/* =========================================================================
   wolfgang_rush — "Marginalia"
   Design system, 2026-08-23.

   The device is the MARGINAL NOTE: the short descriptive label printed in
   the margin beside every section of a Bare Act and an English statute.
   It is native to this subject, it is structural rather than decorative,
   and it carries real information — what this section is, in three words.

   Depth is built from stacked paper, not from effects: sheets of cool legal
   paper laid over one another with true shadows and a small parallax, the
   way a set of case files sits on a desk.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,300;1,6..72,400&family=IBM+Plex+Sans+Condensed:wght@400;500;600&display=swap');

/* ---------- tokens ------------------------------------------------------ */

:root{
  /* Cool legal paper. Not cream — statute paper and newsprint are grey. */
  --paper:        #E9EBEE;
  --paper-raised: #F6F7F8;
  --paper-sunk:   #DFE2E6;
  --ink:          #14161A;
  --ink-soft:     #4E545C;
  --ink-faint:    #7C838C;
  /* Oxidised red from the spine of a Bare Act and from seal wax.
     Used ONLY for marginal rules, section marks and one hover state. */
  --seal:         #8C2F24;
  --seal-bright:  #A8382B;
  --rule:         #C7CCD2;
  --rule-faint:   #D8DCE1;

  --shadow-sheet: 0 1px 2px rgba(20,22,26,.05), 0 8px 24px -12px rgba(20,22,26,.18);
  --shadow-lift:  0 2px 4px rgba(20,22,26,.06), 0 24px 48px -20px rgba(20,22,26,.28);

  --display: "Newsreader", "Iowan Old Style", Palatino, Georgia, serif;
  --margin-face: "IBM Plex Sans Condensed", "Helvetica Neue", Arial, sans-serif;

  --gutter: 13rem;          /* width of the statute margin */
  --measure: 34rem;         /* reading measure */
  --wrap: 78rem;

  --step--1: clamp(.82rem, .79rem + .14vw, .89rem);
  --step-0:  clamp(1.06rem, 1.02rem + .2vw, 1.16rem);
  --step-1:  clamp(1.3rem, 1.2rem + .5vw, 1.55rem);
  --step-2:  clamp(1.7rem, 1.45rem + 1.2vw, 2.35rem);
  --step-3:  clamp(2.3rem, 1.8rem + 2.4vw, 3.7rem);
  --step-4:  clamp(3rem, 2.1rem + 4.4vw, 5.6rem);

  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:        #15171B;
    --paper-raised: #1D2025;
    --paper-sunk:   #101216;
    --ink:          #E9EBEE;
    --ink-soft:     #A8AEB6;
    --ink-faint:    #767D86;
    --seal:         #C4574A;
    --seal-bright:  #D96B5C;
    --rule:         #333941;
    --rule-faint:   #262B31;
    --shadow-sheet: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-lift:  0 2px 4px rgba(0,0,0,.45), 0 24px 48px -20px rgba(0,0,0,.7);
  }
}

:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:        #15171B;
  --paper-raised: #1D2025;
  --paper-sunk:   #101216;
  --ink:          #E9EBEE;
  --ink-soft:     #A8AEB6;
  --ink-faint:    #767D86;
  --seal:         #C4574A;
  --seal-bright:  #D96B5C;
  --rule:         #333941;
  --rule-faint:   #262B31;
  --shadow-sheet: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lift:  0 2px 4px rgba(0,0,0,.45), 0 24px 48px -20px rgba(0,0,0,.7);
}

/* Light, declared explicitly and last. Light must never depend on the ABSENCE
   of a match — it is stated at the same specificity as dark, after dark, so a
   reader who picks light gets light regardless of their operating system.     */
:root[data-theme="light"]{
  color-scheme: light;
  --paper:        #E9EBEE;
  --paper-raised: #F6F7F8;
  --paper-sunk:   #DFE2E6;
  --ink:          #14161A;
  --ink-soft:     #4E545C;
  --ink-faint:    #7C838C;
  --seal:         #8C2F24;
  --seal-bright:  #A8382B;
  --rule:         #C7CCD2;
  --rule-faint:   #D8DCE1;
  --shadow-sheet: 0 1px 2px rgba(20,22,26,.05), 0 8px 24px -12px rgba(20,22,26,.18);
  --shadow-lift:  0 2px 4px rgba(20,22,26,.06), 0 24px 48px -20px rgba(20,22,26,.28);
}

/* ---------- base -------------------------------------------------------- */

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--display);
  font-size:var(--step-0);
  font-weight:400;
  line-height:1.62;
  font-optical-sizing:auto;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

::selection{ background:var(--seal); color:#F6F7F8; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--ink); color:var(--paper);
  padding:.7rem 1.1rem; font-family:var(--margin-face);
}
.skip:focus{ left:.5rem; top:.5rem; }

:focus-visible{
  outline:2px solid var(--seal-bright);
  outline-offset:3px;
}

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.15rem,4vw,3rem); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- the marginal note ------------------------------------------ */
/* A statute prints a short label in the margin beside each section.
   Every major block on this site carries one. On narrow screens it moves
   above the block and sets as a rule-and-label, the way a printed digest
   collapses its margin into a running head.                                */

.mg{
  display:grid;
  grid-template-columns:var(--gutter) minmax(0,1fr);
  gap:0 clamp(1.5rem,4vw,3.5rem);
  align-items:start;
}
.mg > .note{
  font-family:var(--margin-face);
  font-size:var(--step--1);
  font-weight:500;
  line-height:1.34;
  letter-spacing:.055em;
  text-transform:uppercase;
  color:var(--ink-faint);
  text-align:right;
  padding-top:.55rem;
  padding-right:clamp(.9rem,1.6vw,1.4rem);
  border-right:1px solid var(--rule);
  position:relative;
  hyphens:none;
}
.mg > .note::after{            /* the seal-red section mark */
  content:"";
  position:absolute;
  right:-1px; top:.55rem;
  width:1px; height:2.1em;
  background:var(--seal);
}
.mg > .note .n{
  display:block;
  font-variant-numeric:tabular-nums;
  color:var(--seal);
  letter-spacing:.09em;
  margin-bottom:.25rem;
}

@media (max-width: 62rem){
  .mg{ grid-template-columns:minmax(0,1fr); gap:0; }
  .mg > .note{
    text-align:left;
    border-right:0;
    border-top:1px solid var(--rule);
    padding:.55rem 0 1rem 0;
    margin-bottom:.25rem;
  }
  .mg > .note::after{ right:auto; left:0; top:-1px; width:2.6rem; height:1px; }
}

/* ---------- header ------------------------------------------------------ */

header.site{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--rule-faint);
}
.head-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:4.4rem; }
.brand{ display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; }
.brand img{ width:30px; height:30px; border-radius:2px; }
.brand-text{
  font-family:var(--margin-face);
  font-weight:600; font-size:.95rem;
  letter-spacing:.11em; text-transform:lowercase;
}
.site-nav{ display:flex; align-items:center; gap:clamp(.9rem,2vw,1.9rem); flex-wrap:wrap; }
.site-nav a{
  font-family:var(--margin-face);
  font-size:.83rem; font-weight:500;
  letter-spacing:.075em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none;
  padding:.35rem 0; position:relative;
}
.site-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--seal); transform:scaleX(0);
  transform-origin:left; transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.site-nav a:hover{ color:var(--ink); }
.site-nav a:hover::after{ transform:scaleX(1); }
.site-nav a.ext::before{ content:"↗ "; color:var(--ink-faint); }

/* ---------- hero: the case files spread on a desk ----------------------- */

.hero{
  position:relative;
  padding:clamp(4rem,11vh,8rem) 0 clamp(3rem,7vh,5.5rem);
  overflow:hidden;
  border-bottom:1px solid var(--rule-faint);
}
.hero::before{                 /* the ruled gutter line of a statute page */
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--paper-sunk) 55%, transparent));
  pointer-events:none;
}
.hero-inner{ position:relative; }
.eyebrow{
  font-family:var(--margin-face);
  font-size:var(--step--1); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--seal); margin:0 0 1.3rem;
}
.hero-title{
  font-size:var(--step-4);
  font-weight:400; line-height:1.02;
  letter-spacing:-.022em;
  margin:0 0 1.6rem;
  max-width:19ch;
}
.hero-title em{ font-style:italic; color:var(--seal); }
.hero-sub{
  font-size:var(--step-1);
  line-height:1.52; color:var(--ink-soft);
  max-width:46ch; margin:0 0 2.4rem;
  font-weight:300;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:.85rem; }

/* the fan of jurisdiction sheets */
.fan{
  margin-top:clamp(3rem,7vh,5rem);
  perspective:1400px;
  perspective-origin:50% 20%;
}
.fan-inner{
  display:flex; justify-content:center; align-items:flex-end;
  transform-style:preserve-3d;
  min-height:15rem;
}
.sheet{
  --i:0;
  position:relative;
  width:clamp(6.2rem,10vw,8.6rem);
  aspect-ratio:5/7;
  margin-inline:clamp(-2.2rem,-2vw,-1.2rem);
  background:var(--paper-raised);
  border:1px solid var(--rule-faint);
  border-radius:2px;
  box-shadow:var(--shadow-sheet);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:.85rem .8rem;
  text-decoration:none;
  transform-origin:50% 100%;
  transform:rotate(calc((var(--i) - 3.5) * 5.2deg)) translateY(calc(abs(var(--i) - 3.5) * 0.55rem));
  transition:transform .5s cubic-bezier(.2,.8,.25,1), box-shadow .5s, border-color .35s;
  animation:deal .85s cubic-bezier(.2,.85,.3,1) backwards;
  animation-delay:calc(var(--i) * 65ms + 150ms);
}
.sheet:hover, .sheet:focus-visible{
  transform:rotate(calc((var(--i) - 3.5) * 5.2deg)) translateY(-1.6rem) scale(1.045);
  box-shadow:var(--shadow-lift);
  border-color:var(--seal);
  z-index:5;
}
.sheet .code{
  font-family:var(--margin-face);
  font-size:.7rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--seal);
}
.sheet .place{
  font-size:.95rem; line-height:1.18;
  letter-spacing:-.01em;
}
.sheet .rule{ height:1px; background:var(--rule-faint); margin:.5rem 0; }

@keyframes deal{
  from{ opacity:0; transform:rotate(0deg) translateY(3.5rem) scale(.94); }
}
@media (prefers-reduced-motion: reduce){
  .sheet{ animation:none; }
  .sheet:hover,.sheet:focus-visible{ transform:rotate(calc((var(--i) - 3.5) * 5.2deg)); }
}
@media (max-width:46rem){
  .fan-inner{ flex-wrap:wrap; justify-content:flex-start; gap:.6rem; min-height:0; }
  .sheet{ margin-inline:0; transform:none !important; animation:none; width:calc(33.333% - .4rem); }
}

/* ---------- buttons ----------------------------------------------------- */

.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--margin-face);
  font-size:.87rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  padding:.85rem 1.5rem;
  border:1px solid var(--ink);
  border-radius:1px;
  text-decoration:none;
  transition:background .25s, color .25s, border-color .25s, transform .25s;
}
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ background:var(--seal); border-color:var(--seal); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--rule); }
.btn-ghost:hover{ border-color:var(--seal); color:var(--seal); transform:translateY(-2px); }
.btn-lg{ padding:1rem 1.9rem; font-size:.92rem; }

/* ---------- sections + sheets of paper ---------------------------------- */

main{ display:block; }

.section{
  padding:clamp(3.5rem,9vh,6.5rem) 0;
  border-bottom:1px solid var(--rule-faint);
}
.section:last-child{ border-bottom:0; }

h2{
  font-size:var(--step-2); font-weight:400;
  line-height:1.14; letter-spacing:-.018em;
  margin:0 0 1.3rem; max-width:24ch;
}
h3{
  font-size:var(--step-1); font-weight:500;
  line-height:1.22; letter-spacing:-.012em;
  margin:0 0 .7rem;
}
p{ margin:0 0 1.15rem; max-width:var(--measure); }
p.lede{ font-size:var(--step-1); font-weight:300; color:var(--ink-soft); line-height:1.5; max-width:44ch; }
.muted{ color:var(--ink-soft); }
.small{ font-size:var(--step--1); }

strong{ font-weight:600; }
em{ font-style:italic; }

a.link, .prose a{
  color:var(--ink);
  text-decoration:none;
  background-image:linear-gradient(var(--seal),var(--seal));
  background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%;
  padding-bottom:.06em;
  transition:background-size .3s, color .25s;
}
a.link:hover, .prose a:hover{ color:var(--seal); background-size:100% 2px; }

/* the raised sheet — the depth device */
.sheet-block{
  background:var(--paper-raised);
  border:1px solid var(--rule-faint);
  border-radius:2px;
  box-shadow:var(--shadow-sheet);
  padding:clamp(1.6rem,3.5vw,2.6rem);
  transition:box-shadow .45s cubic-bezier(.2,.8,.25,1), transform .45s cubic-bezier(.2,.8,.25,1);
}
.sheet-block:hover{ box-shadow:var(--shadow-lift); transform:translateY(-3px); }

/* ---------- doors (home) ------------------------------------------------ */

.doors{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:clamp(1rem,2.2vw,1.7rem);
  margin-top:.5rem;
}
.door{
  display:flex; flex-direction:column; gap:.55rem;
  background:var(--paper-raised);
  border:1px solid var(--rule-faint);
  border-radius:2px;
  box-shadow:var(--shadow-sheet);
  padding:clamp(1.5rem,2.6vw,2.1rem);
  text-decoration:none;
  transition:transform .45s cubic-bezier(.2,.8,.25,1), box-shadow .45s, border-color .3s;
}
.door:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lift); border-color:var(--seal); }
.door-eyebrow{
  font-family:var(--margin-face); font-size:var(--step--1); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--seal);
}
.door-title{ font-size:var(--step-1); font-weight:500; letter-spacing:-.012em; line-height:1.2; }
.door-body{ color:var(--ink-soft); font-size:.97rem; line-height:1.55; font-weight:300; }
.door-cta{
  margin-top:auto; padding-top:.7rem;
  font-family:var(--margin-face); font-size:.8rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink);
}
.door:hover .door-cta{ color:var(--seal); }

/* ---------- latest issue ------------------------------------------------ */

.latest-box{
  background:var(--paper-raised);
  border:1px solid var(--rule-faint);
  border-left:3px solid var(--seal);
  border-radius:2px;
  box-shadow:var(--shadow-sheet);
  padding:clamp(1.7rem,3.5vw,2.8rem);
  max-width:52rem;
}
.tag{
  display:inline-block;
  font-family:var(--margin-face); font-size:var(--step--1); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--seal);
  margin-bottom:.9rem;
}
.latest-title{ font-size:var(--step-2); font-weight:400; line-height:1.16; letter-spacing:-.018em; margin:0 0 .5rem; }
.latest-date{ font-family:var(--margin-face); font-size:var(--step--1); letter-spacing:.06em; color:var(--ink-faint); text-transform:uppercase; margin:0 0 1rem; }
.latest-summary{ color:var(--ink-soft); font-weight:300; }
.latest-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem; margin-bottom:0; }

/* ---------- posture list ------------------------------------------------ */

ul.posture{ list-style:none; margin:0; padding:0; max-width:60rem; }
ul.posture li{
  position:relative;
  padding:1.15rem 0 1.15rem 2.6rem;
  border-bottom:1px solid var(--rule-faint);
  color:var(--ink-soft); font-weight:300; line-height:1.58;
}
ul.posture li:last-child{ border-bottom:0; }
ul.posture li::before{
  content:"§";
  position:absolute; left:0; top:1.15rem;
  font-family:var(--display);
  color:var(--seal); font-size:1.05rem;
}
ul.posture li strong{ color:var(--ink); font-weight:600; }

/* ---------- tools + long-form ------------------------------------------ */

.tool{
  padding:clamp(2.2rem,5vh,3.4rem) 0;
  border-bottom:1px solid var(--rule-faint);
}
.tool:last-of-type{ border-bottom:0; }
.tool-head{ display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:1.1rem; }
.tool-head h2{ margin:0; }
.badge{
  font-family:var(--margin-face); font-size:.74rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-soft);
  border:1px solid var(--rule); border-radius:1px;
  padding:.25rem .6rem;
}
.badge-live{ color:var(--seal); border-color:var(--seal); }
.what-is{ font-size:var(--step-1); font-weight:300; color:var(--ink); max-width:44ch; }
.tool-problem{ color:var(--ink-soft); }
.tool-meta{ font-size:var(--step--1); color:var(--ink-faint); }
.juris-links{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.4rem; }

pre.code-block{
  background:var(--paper-sunk);
  border:1px solid var(--rule-faint);
  border-left:3px solid var(--seal);
  border-radius:2px;
  padding:1.1rem 1.3rem;
  overflow-x:auto;
  font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.85rem; line-height:1.7;
  max-width:100%;
}
code{ font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.9em; }

/* ---------- tables ------------------------------------------------------ */

.table-scroll{ overflow-x:auto; margin:1.6rem 0; }
table{ border-collapse:collapse; width:100%; min-width:34rem; font-size:.95rem; }
th,td{ text-align:left; padding:.75rem .9rem; border-bottom:1px solid var(--rule-faint); vertical-align:top; }
th{
  font-family:var(--margin-face); font-size:.76rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint);
  border-bottom:1px solid var(--rule);
}
td{ color:var(--ink-soft); font-weight:300; }

/* ---------- subscribe --------------------------------------------------- */

form.subscribe{ display:flex; flex-wrap:wrap; gap:.7rem; margin:1.6rem 0 1.2rem; max-width:34rem; }
form.subscribe input[type=email]{
  flex:1 1 16rem;
  font-family:var(--display); font-size:1rem;
  padding:.85rem 1rem;
  background:var(--paper-raised);
  border:1px solid var(--rule);
  border-radius:1px;
  color:var(--ink);
}
form.subscribe input[type=email]::placeholder{ color:var(--ink-faint); }
form.subscribe input[type=email]:focus{ outline:none; border-color:var(--seal); box-shadow:0 0 0 3px color-mix(in srgb, var(--seal) 18%, transparent); }
form.subscribe button{ cursor:pointer; }

/* ---------- issue list -------------------------------------------------- */

ul.issue-list{ list-style:none; margin:0; padding:0; }
ul.issue-list li{ padding:1.5rem 0; border-bottom:1px solid var(--rule-faint); }
ul.issue-list li:last-child{ border-bottom:0; }
.issue-meta{ font-family:var(--margin-face); font-size:var(--step--1); letter-spacing:.08em; text-transform:uppercase; color:var(--seal); margin:0 0 .4rem; }
.issue-title{ font-size:var(--step-1); font-weight:500; letter-spacing:-.012em; text-decoration:none; display:inline-block; margin-bottom:.4rem; }
.issue-title:hover{ color:var(--seal); }
.issue-summary{ color:var(--ink-soft); font-weight:300; margin:0; }

/* ---------- footer ------------------------------------------------------ */

footer.site{
  padding:clamp(2.6rem,6vh,4rem) 0;
  border-top:1px solid var(--rule);
  background:var(--paper-sunk);
}
.foot-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:2rem; }
.foot-h{
  font-family:var(--margin-face); font-size:.76rem; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-faint);
  margin:0 0 .8rem;
}
.foot-grid a{
  display:block; text-decoration:none; color:var(--ink-soft);
  font-size:.94rem; padding:.22rem 0;
}
.foot-grid a:hover{ color:var(--seal); }
.foot-legal{
  margin-top:2.6rem; padding-top:1.5rem; border-top:1px solid var(--rule-faint);
  font-size:var(--step--1); color:var(--ink-faint); max-width:64ch;
}

/* ---------- scroll reveal (progressive, CSS-only fallback safe) --------- */

.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.2,.8,.25,1), transform .7s cubic-bezier(.2,.8,.25,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }
.no-js .reveal{ opacity:1; transform:none; }

/* ---------- theme toggle ------------------------------------------------ */

.theme-toggle{
  font-family:var(--margin-face);
  font-size:.74rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-soft);
  background:transparent;
  border:1px solid var(--rule);
  border-radius:1px;
  padding:.32rem .7rem;
  cursor:pointer;
  min-width:5.4rem;
  transition:border-color .25s, color .25s, background .25s;
}
.theme-toggle:hover{ border-color:var(--seal); color:var(--seal); }
.theme-toggle::before{ content:"◐ "; }

/* ---------- landing on a linked section --------------------------------- */
/* Click a jurisdiction sheet in the hero and you arrive at that edition —
   the section marks itself the way a cited provision would.               */

.tool{ scroll-margin-top:6rem; position:relative; }
.tool:target{
  animation:land 2.4s cubic-bezier(.2,.8,.25,1) 1;
}
.tool:target::before{
  content:"";
  position:absolute;
  left:-1.4rem; top:.4rem; bottom:.4rem;
  width:2px;
  background:var(--seal);
  animation:landrule 2.4s cubic-bezier(.2,.8,.25,1) 1;
}
@keyframes land{
  0%   { background:color-mix(in srgb, var(--seal) 9%, transparent); }
  100% { background:transparent; }
}
@keyframes landrule{
  0%   { opacity:1; transform:scaleY(1); }
  85%  { opacity:1; }
  100% { opacity:.35; }
}
@media (prefers-reduced-motion: reduce){
  .tool:target{ animation:none; }
  .tool:target::before{ animation:none; opacity:.5; }
}

.section{ scroll-margin-top:5rem; }

/* ---------- jump nav (tools + brains) ----------------------------------- */

.jump{
  display:flex; flex-wrap:wrap; gap:.4rem .5rem;
  margin:1.6rem 0 0;
  padding:0; list-style:none;
}
.jump a{
  display:inline-block;
  font-family:var(--margin-face);
  font-size:.74rem; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-soft);
  text-decoration:none;
  border:1px solid var(--rule-faint);
  border-radius:1px;
  padding:.34rem .68rem;
  transition:border-color .25s, color .25s, transform .25s;
}
.jump a:hover{ border-color:var(--seal); color:var(--seal); transform:translateY(-2px); }

/* ---------- marginal note as a citable anchor --------------------------- */

.mg > .note a.anchor{
  color:inherit; text-decoration:none;
  display:block;
}
.mg > .note a.anchor:hover{ color:var(--seal); }
.mg > .note a.anchor:hover .n{ text-decoration:underline; text-underline-offset:.2em; }

/* ---------- the wordmark ------------------------------------------------ */
/* The brand is "wolfgang_rush" and the underscore is its own punctuation —
   so the underscore IS the mark. It is set as a seal-red rule on the
   baseline rather than a typed character, sized to the type around it.     */

.brand{ display:inline-flex; align-items:center; text-decoration:none; }
.brand-text{
  display:inline-flex; align-items:baseline; gap:0;
  font-family:var(--margin-face);
  font-weight:600;
  font-size:1.02rem;
  letter-spacing:.1em;
  text-transform:lowercase;
  color:var(--ink);
  line-height:1;
}
.brand-text .us{
  display:inline-block;
  width:.72em;
  height:.13em;
  margin:0 .16em;
  background:var(--seal);
  border-radius:.5px;
  transform-origin:left center;
  transition:width .3s cubic-bezier(.2,.8,.25,1), background .25s;
}
.brand:hover .brand-text{ color:var(--seal); }
.brand:hover .brand-text .us{ width:1.05em; }
.brand:focus-visible{ outline:2px solid var(--seal-bright); outline-offset:4px; }

@media (prefers-reduced-motion: reduce){
  .brand-text .us{ transition:none; }
  .brand:hover .brand-text .us{ width:.72em; }
}


/* Justified body copy — the privacy policy reads as a legal instrument, so it is
   set justified rather than ragged-right. Hyphenation is on, because justified
   text without it opens rivers of whitespace. Turned off on narrow screens,
   where justification does more harm than good. */
#main.prose-justified p,
#main.prose-justified li {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: pretty;
}
@media (max-width: 600px) {
  #main.prose-justified p,
  #main.prose-justified li { text-align: left; hyphens: manual; }
}

/* ---------- mobile / phone hardening ------------------------------------
   2026-08-26 — no phone breakpoint existed for buttons, hero copy, nav,
   .doors, .tool cards, or the footer. The page rendered, but it did not
   fit. These rules scope their fixes to viewport widths that mean
   "phone in portrait" and leave every desktop layout byte-identical.

   Two breakpoints: 640px catches every modern phone in portrait; 380px
   catches the smallest cases (360px-class devices) for a second pass on
   the hero type and the jurisdiction sheet cards.                          */

@media (max-width: 640px){
  /* The classic "the whole page scrolls sideways" symptom: one
     overflowing child stretches the body, because body has no
     overflow guard. clip is invisible unless something tries to
     overflow; it does not establish a scroll container the way
     hidden does, so position:sticky on the header keeps working. */
  body{ overflow-x:clip; }

  /* ---- type ----
     The hero h1 was clamped to never go below 3rem (~48px). On a
     360-390px phone that is still 48px, which crowds the line and
     can push a long word past the edge. Pull the floor down for
     phones only; the desktop clamp is untouched.                   */
  :root{
    --step-4: clamp(2.2rem, 1.55rem + 5.2vw, 3.4rem);
    --step-3: clamp(1.7rem, 1.35rem + 2.6vw, 2.5rem);
  }

  /* ---- header ----
     Seven nav items + the theme toggle + the brand cannot share a
     360px row. Stack the brand above the nav; let the nav scroll
     horizontally so it never wraps and never eats more than one
     strip of vertical space.                                          */
  .head-inner{
    flex-direction:column;
    align-items:flex-start;
    gap:.55rem;
    min-height:0;
    padding-block:.55rem;
  }
  .site-nav{
    width:100%;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    gap:.85rem;
    padding-bottom:.15rem;
  }
  .site-nav::-webkit-scrollbar{ height:2px; }
  .site-nav a, .theme-toggle{ white-space:nowrap; }

  /* ---- hero ----
     The h1 and lead already clamp, but their max-widths were set for
     a wider viewport; let them breathe on a phone.                 */
  .hero{ padding:clamp(2.6rem,7vh,4rem) 0 clamp(2rem,5vh,3.4rem); }
  .hero-title{ max-width:none; }
  .hero-sub{ max-width:none; margin-bottom:1.6rem; }

  /* ---- buttons ----
     Two long labels side by side (.hero-actions, .latest-cta,
     .juris-links) overflow a phone. Stack them and stretch each
     to the row.                                                     */
  .hero-actions,
  .latest-cta,
  .juris-links{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn,
  .latest-cta .btn,
  .juris-links .btn{
    width:100%;
    justify-content:center;
  }

  /* ---- the fan ----
     8 sheets across a phone at 3 per row makes each card ~110px
     wide, and "United Kingdom" overflows the .place element. Two
     per row keeps every word readable.                              */
  .sheet{
    width:calc(50% - .35rem);
    aspect-ratio:4/5;
    padding:.65rem .6rem;
  }
  .sheet .place{ font-size:.82rem; line-height:1.18; }

  /* ---- doors / sheets / tools / latest ----
     Auto-fit already collapses .doors and .foot-grid to a single
     column on a phone. The padding stays at its clamp minimum,
     which is fine; just nudge it down a touch.                      */
  .door,
  .sheet-block,
  .latest-box{ padding:1.3rem 1.15rem; }
  .tool{ padding:1.8rem 0; }
  .tool-head{ gap:.55rem; }

  /* ---- code blocks ----
     pre.code-block already had overflow-x:auto. What was missing
     was any rule on inline <code> to break very long tokens that
     sit inside paragraphs and would otherwise push the paragraph
     past the viewport.                                              */
  pre.code-block{
    padding:.85rem 1rem;
    font-size:.78rem;
    line-height:1.62;
    border-left-width:2px;
  }
  code{ overflow-wrap:anywhere; word-break:break-word; }

  /* ---- tables ----
     .table-scroll already provides horizontal scroll. Trim cell
     padding so the table does not look cramped against the
     scrollbar.                                                       */
  table{ font-size:.88rem; min-width:30rem; }
  th, td{ padding:.6rem .65rem; }

  /* ---- subscribe ----
     The email field and the button side-by-side squeeze at 360px.
     Stack them; field first, button full-width below.              */
  form.subscribe{ flex-direction:column; align-items:stretch; }
  form.subscribe input[type=email]{ flex:1 1 auto; width:100%; }

  /* ---- footer ----
     Long email addresses should be allowed to break if they
     would otherwise overflow.                                        */
  footer.site{ padding:1.8rem 0; }
  .foot-grid{ gap:1.5rem; }
  .foot-grid a{ overflow-wrap:anywhere; }
}

/* Smallest phones (≤380px) — one more pass for the most cramped cases. */
@media (max-width: 380px){
  :root{
    --step-4: clamp(2rem, 1.4rem + 5.6vw, 3.1rem);
  }
  .sheet{ padding:.55rem .5rem; }
  .sheet .place{ font-size:.76rem; }
}