/* ============================================================
   site.css
   Shared foundation for every page except index.html.

   index.html still carries its own inline copy of all of this
   because it also holds the hero, the halo, the path and the
   calendar, none of which any other page needs. It can migrate
   here whenever you want; until it does, this file and the top
   of index.html are two copies of the same tokens. If you change
   a colour, change it in both.

   Load order in <head>:
     <link rel="stylesheet" href="fonts.css">
     <link rel="stylesheet" href="site.css">
     then the page's own <style>
   ============================================================ */

:root{
  --gr-900:#201C1E;
  --ox:#5C1A26;
  --crest:#800210;
  --ink:#241B1C;
  --bone:#FAF8F5;
  --bone-warm:#EDE7DD;
  --paper:#FFFFFF;
  --rule:#E2D9D2;
  --rule-hair:#EDE6E0;
  --muted:#6E5B5E;
  --muted-2:#7D6A69;

  /* text ON the mesh, measured against #5E5B62, its lightest point */
  --on:#F6F2EF;
  --on-2:#E4DBD7;
  --on-3:#E2D9D5;
  --on-line:rgba(245,241,233,.14);
  /* decoration only. No red clears 4.5:1 on this mesh without turning
     pink, so on the mesh the accent is rules and marks and the TEXT is
     white. Red carries text inside the white cards. */
  --crest-lt:#E8697A;

  --display:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;

  --pad-bezel:8px;
  --r-outer:26px;
  --r-inner:18px;
  --r-sm:10px;
  --r-xs:7px;
  --r-pill:999px;

  --ease:cubic-bezier(.22,.9,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* THE GUTTER. One number, every horizontal edge on every page that
     loads this file. Raise the 9vw in the mobile block below if it is
     still tight. Matches index.html, which carries its own copy. */
  --gut:1.5rem;
}
@media (max-width:760px){
  :root{--gut:clamp(1.4rem, 9vw, 2.75rem)}
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  font-optical-sizing:auto;
  background:var(--gr-900);
  color:var(--on);
  font-size:18px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Two fixed layers behind everything rather than background-attachment,
   which janks on iOS and repaints the gradient every scroll frame. */
body::before{
  content:"";position:fixed;inset:-12%;z-index:-2;pointer-events:none;
  animation:breathe 52s ease-in-out infinite alternate;
  will-change:transform;
  background:
    radial-gradient(70% 52% at 6% -6%,   #5A575E 0%, rgba(90,87,94,0) 58%),
    radial-gradient(64% 50% at 96% 2%,   #6E565C 0%, rgba(110,86,92,0) 54%),
    radial-gradient(58% 42% at 90% 88%,  #800210 0%, rgba(128,2,16,0) 58%),
    radial-gradient(96% 68% at 40% 110%, #5C1A26 0%, rgba(92,26,38,0) 62%),
    linear-gradient(166deg, #3D3A40 0%, #47404A 38%, #4E2C34 72%, #201C1E 100%);
}
/* The noise does not move with it. Grain that drifts reads as a video
   artifact; grain that sits still reads as the surface the light is
   moving across. */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='150' height='150' filter='url(%23n)' opacity='.5'/></svg>");
  opacity:.11;mix-blend-mode:overlay;
}
@keyframes breathe{
  from{transform:scale(1)   translate3d(0,0,0)}
  to  {transform:scale(1.14) translate3d(-3%,2%,0)}
}
@media (max-width:760px){
  body::before{animation:none;transform:scale(1.06)}
}

a{color:var(--ink)}
a:focus-visible,button:focus-visible,summary:focus-visible,
select:focus-visible,input:focus-visible{
  outline:2px solid var(--on);outline-offset:3px;
}
/* scoped away from pills: setting the radius on the element itself
   squares off anything pill shaped the moment it takes focus */
a:not(.pill):focus-visible,button:not(.pill):focus-visible,
summary:focus-visible,select:focus-visible,input:focus-visible{
  border-radius:6px;
}
.shell{max-width:1160px;margin:0 auto;padding:0 var(--gut)}
.shell-narrow{max-width:880px;margin:0 auto;padding:0 var(--gut)}
::selection{background:var(--ox);color:var(--bone)}
.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--ox);color:var(--bone);
  padding:.75rem 1.3rem;font-weight:700;
  border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{left:0}

.nojs{
  padding:.9rem 1.5rem;
  background:var(--ox);color:var(--bone);
  font-size:.88rem;text-align:center;
}
.nojs a{color:var(--bone);font-weight:600}

/* ===== Containers ===== */
.bezel{
  background:rgba(255,255,255,.10);
  border-radius:var(--r-outer);padding:var(--pad-bezel);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.pane{
  background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(28px) saturate(1.35);
          backdrop-filter:blur(28px) saturate(1.35);
  border-radius:var(--r-inner);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.5),
    0 2px 6px rgba(20,14,16,.2),
    0 28px 64px -20px rgba(20,14,16,.55);
}

/* ===== Buttons ===== */
.pill{
  display:inline-flex;align-items:center;gap:.45rem;
  border-radius:var(--r-pill);
  font-weight:600;font-size:.97rem;letter-spacing:-.008em;
  text-decoration:none;padding:.74rem 1.45rem;
  border:0;cursor:pointer;font-family:var(--body);
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .16s var(--ease), background .16s ease, box-shadow .16s ease;
}
.pill,.pill:hover,.pill:focus,.pill:focus-visible,.pill:active{
  border-radius:var(--r-pill);
}
.pill::selection{background:transparent}
.pill-ink{
  background:var(--ink);color:var(--paper);
  box-shadow:0 1px 2px rgba(20,14,16,.22), 0 8px 20px -8px rgba(20,14,16,.4);
}
.pill-ink:hover{background:#3A2C2E;transform:translate3d(0,-2px,0)}
.pill-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule)}
.pill-ghost:hover{box-shadow:inset 0 0 0 1px var(--ink);transform:translate3d(0,-2px,0)}
.pill-bone{
  background:var(--paper);color:var(--ink);
  box-shadow:0 1px 2px rgba(0,0,0,.18), 0 10px 24px -10px rgba(0,0,0,.45);
}
.pill-bone:hover{transform:translate3d(0,-2px,0)}
.pill-inv{
  background:rgba(255,255,255,.06);color:#F1EBE8;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.32);
}
.pill-inv:hover{background:rgba(255,255,255,.13);transform:translate3d(0,-2px,0)}
/* a button that cannot act yet. Reads as pending, not as broken. */
.pill-wait{
  background:transparent;color:var(--muted-2);
  box-shadow:inset 0 0 0 1px var(--rule);
  cursor:default;
}

/* ===== Type ===== */
.kicker{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.74rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--on-3);margin-bottom:.95rem;
}
.kicker::before{content:"";width:20px;height:1px;background:var(--crest-lt)}
.band-tight{padding:3.5rem 0 6rem}

.sec-head{max-width:58ch;margin-bottom:2rem}
.sec-head p{margin-top:1rem;font-size:clamp(.95rem,1.05vw,1.02rem);line-height:1.7;color:var(--on-2)}
h2.big{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.6rem, 3.1vw, 2.5rem);
  line-height:1.08;letter-spacing:-.026em;
  color:var(--on);text-wrap:balance;
}

/* ===== Reveal ===== */
.rise{opacity:0;transform:translateY(18px)}
.rise.in{opacity:1;transform:none;transition:opacity .7s var(--ease-out), transform .7s var(--ease-out)}
.rise.in.d1{transition-delay:.06s}
.rise.in.d2{transition-delay:.12s}
.rise.in.d3{transition-delay:.18s}
.rise.in.d4{transition-delay:.24s}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .rise{
      opacity:0;transform:translateY(18px);
      animation:riseIn linear both;
      animation-timeline:view();
      animation-range:entry 8% cover 22%;
    }
    .rise.d1{animation-range:entry 11% cover 25%}
    .rise.d2{animation-range:entry 14% cover 28%}
    .rise.d3{animation-range:entry 17% cover 31%}
    .rise.d4{animation-range:entry 20% cover 34%}
    @keyframes riseIn{to{opacity:1;transform:none}}
  }
}

/* ===== Document sections ===== */
.doc{border-top:1px solid var(--on-line)}
/* Vertical only. .doc-row lands on the same element as .shell, and a
   padding shorthand with a horizontal value overrides the gutter with
   whatever that value is. It was 0. */
.doc-row{
  padding-top:clamp(2.75rem, 5.5vw, 4.75rem);
  padding-bottom:clamp(2.75rem, 5.5vw, 4.75rem);
  border-bottom:1px solid var(--on-line);
}
.doc-lbl{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--mono);font-size:.64rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-3);margin-bottom:1.1rem;
}
.doc-lbl::before{content:"";width:2px;height:12px;border-radius:1px;background:var(--crest-lt)}
.doc-body h2{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.6rem, 3vw, 2.4rem);
  line-height:1.08;letter-spacing:-.024em;
  color:var(--on);max-width:20ch;
  margin-bottom:1.3rem;text-wrap:balance;
}
.doc-body > p{
  max-width:64ch;
  font-size:clamp(.95rem, 1.05vw, 1.02rem);
  line-height:1.72;color:var(--on-2);
}
.doc-body > p + p{margin-top:.9rem}

.qs{border-top:1px solid var(--on-line);margin-top:1.5rem}
.qs details{border-bottom:1px solid var(--on-line)}
.qs summary{
  cursor:pointer;list-style:none;padding:1.1rem 0;
  font-weight:500;font-size:clamp(.98rem,1.1vw,1.06rem);
  letter-spacing:-.014em;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.qs summary::-webkit-details-marker{display:none}
.qs summary i{
  width:18px;height:18px;flex:none;
  font-style:normal;font-family:var(--mono);
  font-size:.85rem;line-height:18px;text-align:center;color:var(--on-3);
  transition:transform .2s var(--ease), color .2s ease;
}
.qs details[open] summary i{transform:rotate(45deg);color:var(--on)}
.qs .a{padding:0 0 1.3rem;max-width:62ch;font-size:.94rem;line-height:1.65;color:var(--on-2)}

/* ===== Slots =====
   An empty value labels itself. Nothing on these pages is guessed and
   the page says so in the slot rather than in a footnote. */
.facts{list-style:none;border-top:1px solid var(--on-line)}
.facts li{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1.25rem;padding:.66rem 0;border-bottom:1px solid var(--on-line);
}
.facts .k{
  flex:none;font-family:var(--mono);font-size:.6rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--on-3);
}
.facts .v{font-size:.92rem;color:var(--on);text-align:right}
.facts .v a{color:var(--on);text-decoration:none;border-bottom:1px solid var(--on-line)}
.facts .v a:hover{border-bottom-color:var(--crest-lt)}
.facts .v.slot::before{
  content:"To be confirmed";
  font-family:var(--mono);font-size:.58rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--crest-lt);
}
/* the same idea inside a white card */
.slot-lt::before{
  content:"To be confirmed";
  font-family:var(--mono);font-size:.58rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--crest);
}

/* On a phone the label is flex:none and the value is pushed to the
   far edge, so a long label like "How long you have to file" leaves
   the value nothing to sit in and short ones jam straight against
   it. Stacked, each row is a label and an answer under it, which is
   what the pattern actually is. */
@media (max-width:760px){
  .facts li{
    display:grid;grid-template-columns:1fr;
    gap:.3rem;padding:.8rem 0;
  }
  .facts .k{font-size:.56rem;letter-spacing:.16em}
  .facts .v{text-align:left;font-size:.96rem;line-height:1.5}
  .facts .v br{display:none}
}

.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.75rem,4vw,3.5rem)}
@media (max-width:760px){ .pair{grid-template-columns:1fr} }
.pair h3{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.25rem,2.2vw,1.6rem);
  line-height:1.12;letter-spacing:-.022em;
  color:var(--on);margin-bottom:.85rem;max-width:20ch;
}
.pair p{font-size:clamp(.92rem,1vw,.98rem);line-height:1.7;color:var(--on-2);max-width:46ch}
.pair p + p{margin-top:.75rem}

/* ===== Closing card ===== */
.close{
  position:relative;border-radius:24px;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(32px) saturate(1.35);
          backdrop-filter:blur(32px) saturate(1.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.5),
    0 3px 8px rgba(20,14,16,.2),
    0 36px 80px -24px rgba(20,14,16,.6);
  overflow:hidden;
  padding:clamp(2.5rem,5vw,4rem) clamp(1.5rem,3vw,3rem);
  text-align:center;
  margin:clamp(3rem,6vw,5rem) 0 clamp(3.5rem,7vw,6rem);
}
.close > *{position:relative;z-index:1}
.close .seal{
  width:56px;height:56px;margin:0 auto 1.4rem;
  border-radius:50%;overflow:hidden;background:var(--paper);
  box-shadow:inset 0 0 0 1px rgba(61,17,26,.10), 0 6px 18px -6px rgba(61,17,26,.28);
}
.close .seal img{width:106%;height:106%;object-fit:contain;display:block;margin:-3%}
.close h2{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.7rem,3.2vw,2.5rem);
  letter-spacing:-.026em;line-height:1.08;
  color:var(--ink);max-width:18ch;margin:0 auto;text-wrap:balance;
}
.close p{margin:1rem auto 1.9rem;max-width:48ch;color:var(--muted);font-size:.97rem}
.close .row{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
.close .note{
  margin:1.5rem auto 0;font-family:var(--mono);
  font-size:.68rem;letter-spacing:.06em;color:var(--muted-2);
}
.close .note a{color:var(--muted);text-decoration:none}
.close .note a:hover{color:var(--ox);text-decoration:underline}

/* Phones: the blur over an animated gradient is the single most
   expensive thing on the page and at 94% opacity it is invisible. */
@media (max-width:760px){
  .pane,.close{
    -webkit-backdrop-filter:none;backdrop-filter:none;
    background:rgba(255,255,255,.97);
  }
  .bezel{-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-reduced-transparency:reduce){
  .pane,.close{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .pane,.close{background:#fff}
}
@media (prefers-contrast:more){
  :root{--muted:#4A3A3C;--muted-2:#5C4A4A;--rule:#B9A79F;--rule-hair:#C6B5AE}
  .bezel,.pane,.qs details{box-shadow:none;border-color:var(--ox)}
}
@media (forced-colors:active){
  .pill,.pane,.bezel,.close{border:1px solid CanvasText}
}

/* ===== Print ===== */
@media print{
  @page{margin:16mm}
  *{
    animation:none!important;transition:none!important;
    box-shadow:none!important;text-shadow:none!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }
  body{background:#FFF;color:#000;font-size:11pt;line-height:1.45}
  body::before,body::after{display:none}
  .shell,.shell-narrow{max-width:none;padding:0}
  .nojs{display:none}
  .doc{border-color:#999}
  .doc-row{border-color:#999;break-inside:avoid}
  .doc-lbl{color:#000}
  .doc-lbl::before{display:none}
  .doc-body h2{color:#000;font-size:14pt;break-after:avoid}
  .doc-body > p{color:#000}
  .sec-head p,h2.big{color:#000}
  .kicker{color:#000}
  .kicker::before{display:none}
  .qs{border-color:#999}
  .qs details{border-color:#999;break-inside:avoid}
  .qs summary{color:#000}
  .qs summary i{display:none}
  .qs .a{color:#000;padding-bottom:.8rem}
  .qs details:not([open]) .a{display:block}
  .facts{border-color:#999}
  .facts li{border-color:#999}
  .facts .k,.facts .v,.facts .v a{color:#000}
  .facts .v.slot::before,.slot-lt::before{color:#000}
  .pair{display:block}
  .pair > div{break-inside:avoid;margin-bottom:1rem}
  .pair h3{color:#000;font-size:13pt;break-after:avoid}
  .pair p{color:#000;max-width:none}
  .close{background:none;padding:0;text-align:left;margin:1rem 0}
  .close .seal{display:none}
  .close h2{color:#000;font-size:14pt}
  .close p,.close .note{color:#000;max-width:none}
  .close .row{display:none}
  .rise{opacity:1;transform:none}
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  body::before{transform:none}
  .rise{opacity:1;transform:none}
}