/* tokens */

:root{
  --navy:#152A4D;
  --navy-deep:#0B1830;
  --navy-mid:#1D3760;
  --brass:#C0972D;
  --brass-bright:#E0B252;
  --brass-ink:#7A5F1C;
  --hall:#F2F1EC;
  --stone:#E3E1D8;
  --paper:#FBFAF7;
  --ink:#101A2B;
  --ink-muted:#4E5D73;
  --on-navy:#EDEFF3;
  --on-navy-muted:#A9B6C9;
  --up:#256B4C;
  --down:#A63A28;
  --display:"Prata",Georgia,"Times New Roman",serif;
  --body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --maxw:1240px;
  --pad:clamp(20px,4vw,44px);
  --lintel-h:80px;
  --lintel-h-stuck:66px;
}

/* reset */

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--hall);color:var(--ink);
  font-family:var(--body);font-size:1rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:400;letter-spacing:-0.01em;line-height:1.12;color:var(--ink);}
p{margin:0;}
a{color:inherit;text-decoration:none;text-underline-offset:3px;}
img{display:block;max-width:100%;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
table{border-collapse:collapse;}
::selection{background:var(--brass);color:var(--navy-deep);}
input,select,textarea{caret-color:var(--brass-ink);font:inherit;}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px;}
html{scrollbar-color:var(--brass) var(--navy-deep);}
::-webkit-scrollbar{width:12px;height:12px;}
::-webkit-scrollbar-track{background:var(--navy-deep);}
::-webkit-scrollbar-thumb{background:var(--brass);border:3px solid var(--navy-deep);border-radius:8px;}

[id]{scroll-margin-top:calc(var(--lintel-h-stuck) + 38px);}

/* utilities */

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);}
.skip{position:fixed;left:12px;top:12px;z-index:200;background:var(--brass);color:var(--navy-deep);padding:12px 22px;font-weight:600;transform:translateY(-180%);transition:transform .2s var(--ease);}
.skip:focus{transform:none;}

/* street */
/* @probe .street */

.street{background:var(--hall);color:var(--ink-muted);font-size:.78rem;border-bottom:1px solid rgba(16,26,43,.1);}
.street .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:38px;flex-wrap:wrap;padding-block:6px;}
.street__facts{display:flex;gap:20px;flex-wrap:wrap;}
.street__facts span{letter-spacing:.02em;}
.street__tools{display:flex;align-items:center;gap:12px;}
.street__tools a{padding:4px 2px;}
.street__tools a:hover{color:var(--brass-ink);text-decoration:underline;}
.street__tools a[aria-current]{color:var(--navy);font-weight:600;}
.street__tools .na{padding:4px 2px;color:rgba(78,93,115,.45);cursor:not-allowed;}
.street__facts a{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--ink);}
.street__facts a:hover{color:var(--brass-ink);text-decoration:underline;}
.street__sep{width:1px;height:12px;background:rgba(16,26,43,.22);}

@media (max-width:820px){
  .street__facts span:nth-child(2){display:none;}
}

/* lintel */
/* @probe .lintel */

.lintel{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--stone);transition:box-shadow .3s var(--ease),background .3s var(--ease);}
.lintel.is-stuck{box-shadow:0 10px 30px -18px rgba(11,24,48,.45);background:var(--hall);}
.lintel .wrap{display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,2vw,28px);min-height:var(--lintel-h);}
.lintel.is-stuck .wrap{min-height:var(--lintel-h-stuck);}
.brand{flex:none;}
.brand img{height:44px;width:auto;display:block;}
.lintel.is-stuck .brand img{height:36px;}
.menu{display:flex;gap:clamp(11px,1.35vw,20px);}
.menu a{position:relative;font-size:.855rem;font-weight:500;padding:10px 1px;color:var(--ink);}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--brass);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease);}
.menu a:hover::after,.menu a:focus-visible::after{transform:scaleX(1);}
.lintel__cta{display:flex;align-items:center;gap:12px;}
.burger{display:none;width:48px;height:48px;position:relative;}
.burger span{position:absolute;left:12px;right:12px;height:2px;background:var(--navy);transition:transform .3s var(--ease),opacity .2s;}
.burger span:nth-child(1){top:17px;}
.burger span:nth-child(2){top:23px;}
.burger span:nth-child(3){top:29px;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.drawer{display:none;}

/* keys & ghosts */
/* @probe .key .ghost .link-arrow */

.key,.ghost{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 26px;font-size:.9rem;font-weight:600;letter-spacing:.01em;white-space:nowrap;transition:transform .2s var(--ease),box-shadow .25s var(--ease),background .2s,border-color .2s,color .2s;}
.key{background:var(--brass);color:var(--navy-deep);box-shadow:0 10px 22px -12px rgba(192,151,45,.75),inset 0 1px 0 rgba(255,255,255,.35);}
.key:hover{background:var(--brass-bright);transform:translateY(-2px);box-shadow:0 16px 28px -14px rgba(192,151,45,.85),inset 0 1px 0 rgba(255,255,255,.4);}
.key:active{transform:translateY(0);}
.ghost{border:1px solid var(--stone);color:var(--ink);background:transparent;}
.ghost:hover{border-color:var(--brass);color:var(--brass-ink);}
.ghost--lit{border-color:rgba(237,239,243,.35);color:var(--on-navy);}
.ghost--lit:hover{border-color:var(--brass-bright);color:var(--brass-bright);}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.9rem;color:var(--brass-ink);}
.link-arrow svg{transition:transform .25s var(--ease);}
.link-arrow:hover svg{transform:translateX(5px);}

/* shared legal + source lines */
/* @probe .source .legal-line .sheet-legal */

.source{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.7rem;letter-spacing:.02em;color:var(--ink-muted);line-height:1.6;margin:0;}
.legal-line{font-size:.76rem;line-height:1.65;color:var(--ink-muted);margin:0;max-width:78ch;}
.sheet-legal{display:flex;flex-direction:column;gap:8px;border-top:1px solid rgba(122,95,28,.4);margin-top:clamp(24px,3vw,36px);padding-top:16px;}

/* sections */
/* Deliberately unprobed, and the only migrated module that is: the first
   declaration below is a bare element selector. A sub-page that opens on a
   titled page head and then carries one plain <section> band would match neither
   .section-head nor .rule, so probing on them would silently drop the padding
   from every band on that page. Comments are stripped before declarations are
   compared, so removing this line changes nothing split-verify.mjs measures. */

section{padding:clamp(72px,10vh,120px) 0;}
.section-head{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(40px,6vh,68px);}
.section-head h2{font-size:clamp(1.85rem,3.2vw,2.75rem);line-height:1.16;max-width:22ch;}
.section-head p{color:var(--ink-muted);max-width:44ch;font-size:.98rem;}
.rule{height:1px;background:var(--brass);transform-origin:left;}
.js .rule-draw{transform:scaleX(0);}
.js .rule-draw.in{transform:scaleX(1);transition:transform 1.1s var(--ease);}

@media (max-width:820px){
  .section-head{grid-template-columns:1fr;}
}

/* night */
/* @probe .night */

.night{background:var(--navy-deep);color:var(--on-navy-muted);padding:clamp(56px,8vh,88px) 0 0;}
.night__grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,44px);padding-bottom:52px;border-bottom:1px solid rgba(237,239,243,.14);}
.night__brand img{height:50px;width:auto;margin-bottom:18px;}
.night__brand p{font-size:.86rem;line-height:1.75;max-width:30ch;}
.night h4{font-family:var(--body);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-bright);margin-bottom:16px;}
.night__col a{display:block;font-size:.88rem;padding:5px 0;color:var(--on-navy-muted);}
.night__col a:hover{color:var(--on-navy);text-decoration:underline;}
.night__disclosure{padding:30px 0;font-size:.78rem;line-height:1.75;max-width:96ch;}
.night__bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px 0 30px;font-size:.78rem;}
.night__col .na{display:block;font-size:.88rem;padding:5px 0;color:rgba(169,182,201,.5);cursor:not-allowed;}
.night__demo{margin-top:18px;font-size:.76rem;line-height:1.7;color:rgba(169,182,201,.8);max-width:40ch;}
.night__social{display:flex;gap:12px;}
.night__social a,.night__social span{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid rgba(237,239,243,.22);color:var(--on-navy-muted);transition:border-color .25s,color .25s;}
.night__social a:hover{border-color:var(--brass-bright);color:var(--brass-bright);}
.night__social span{border-style:dashed;border-color:rgba(237,239,243,.16);color:rgba(169,182,201,.42);cursor:not-allowed;}
.night__social svg{width:17px;height:17px;}
.night__terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,48px);padding:30px 0;border-top:1px solid rgba(237,239,243,.14);border-bottom:1px solid rgba(237,239,243,.14);}
.night__terms h3{font-family:var(--body);font-size:.9rem;font-weight:600;color:var(--on-navy);margin-bottom:10px;}
.night__terms p{font-size:.78rem;line-height:1.75;margin:0;color:rgba(169,182,201,.9);max-width:64ch;}

.night__legal{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.night__legal a + a{border-left:1px solid rgba(237,239,243,.2);padding-left:14px;}
.night__legal a:hover{color:var(--brass-bright);}

@media (max-width:1080px){
  .night__grid{grid-template-columns:1fr 1fr;}
}

@media (max-width:820px){
  .night__terms{grid-template-columns:1fr;}
}

@media (max-width:560px){
  .night__grid{grid-template-columns:1fr;}
}

/* page head */
/* @probe .page-head */

/* The Engraved-Head rule written for the top of a document instead of the middle
   of one: a Prata heading held to 22ch, one Archivo sentence held to 44ch,
   optionally closed by a 1px brass rule. The rule itself is the `.rule` that
   07-rhythm already defines — reused here rather than restated, so the system
   still has exactly one rule element and one draw-on-reveal behaviour.

   Two deliberate departures from `.section-head`, both worth stating because a
   reader will otherwise "fix" them:

   · The heading is the document's h1, and it sits below the hero's Display tier
     (clamp(2.7rem,4.6vw,4.6rem)). The hall is the loudest voice in the building;
     a room you walked into from it must not match it, or every sub-page opens by
     shouting over the front door.
   · Neither the title nor the lede carries `.rise`. A page title is wayfinding,
     not a reveal: putting the one line that says where you are behind a shutter
     trades an arrival gesture for a blank frame on every navigation, and for the
     largest text on the page that is also the LCP candidate. The closing rule
     still draws, so the head is not motionless — it just never hides its name.

   Ground is the hall limestone, which is the body's own ground: a page head that
   commits to no material lets whatever band follows read as a level change. It
   still closes on a 1px stone hairline, because the band below may be the same
   tone and the Layout rule requires adjacent equals to be separated. */

.page-head{background:var(--hall);border-bottom:1px solid var(--stone);padding:clamp(52px,7vh,84px) 0 clamp(40px,6vh,64px);}
.page-head__title{font-size:clamp(2.05rem,3.4vw,3.1rem);line-height:1.08;letter-spacing:-0.02em;max-width:22ch;}
.page-head__lede{color:var(--ink-muted);max-width:44ch;font-size:.98rem;margin-top:clamp(14px,2vh,20px);}
.page-head .rule{max-width:clamp(120px,16vw,200px);margin-top:clamp(28px,4vh,44px);}

@media (max-width:820px){
  .page-head{padding:40px 0 32px;}
}

/* breadcrumb */
/* @probe .crumb */

/* Wayfinding, now that the building has more than one floor.

   It sits above an Engraved-Head, which forbids "a kicker or eyebrow line above
   any heading". That rule is aimed at decorative pre-titles — an uppercase
   fragment restating the heading's own category — and this is not one: it is a
   landmark nav with its own accessible name, a trail of links, and a last step
   rendered as a <span> rather than an <a> because a link to the page you are
   already on is a dead control. It is set at .78rem in ink-muted, quieter than
   every other voice on the page, and it is the only element above a heading that
   the building permits.

   Archivo, not mono. The plan sketched this in JetBrains Mono; Tabular-Only
   reserves mono for figures that align in columns and names "labels" as something
   mono never sets, and a trail of room names is a label. What it does borrow is
   the street rail's small utility hand, so the two pieces of quiet furniture in
   the building match: .78rem, .02em tracking, a 1px × 10px ink tick at 22% as the
   separator (`.street__sep` is 1px × 12px at the same alpha — one step shorter
   because it separates words rather than contact details), and navy at 600 for
   the step you are standing on, lifted from `.street__tools a[aria-current]`.

   The separator is `content:""` with a drawn bar rather than a glyph, so there is
   no generated text for a screen reader to announce between two real names. */

.crumb{font-size:.78rem;letter-spacing:.02em;color:var(--ink-muted);margin-bottom:clamp(16px,2.4vh,24px);}
.crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:10px;list-style:none;margin:0;padding:0;}
.crumb li{display:flex;align-items:center;gap:10px;}
.crumb li+li::before{content:"";width:1px;height:10px;background:rgba(16,26,43,.22);}
.crumb a{padding:2px 0;}
.crumb a:hover{color:var(--brass-ink);text-decoration:underline;}
.crumb [aria-current]{color:var(--navy);font-weight:600;}

/* nav current */
/* @probe .lintel */

/* The seven lintel links became seven routes, so "which room am I in" is a fact
   the nav can state instead of a scroll position it has to infer. Both treatments
   reuse vocabulary the building already has rather than inventing a badge:

   · On the paper lintel the current link holds open the same 2px brass underline
     that hover and focus draw from the left — the bar is simply never retracted,
     and the label takes the navy-at-600 the street rail gives its current
     language. Flat-At-Rest governs shadows, and this casts none; a persistent
     state marker at rest is exactly what `.street__tools a[aria-current]` already
     is, so the building has one grammar for "you are here", not two.
   · Inside the navy drawer the current link takes brass-bright at 600 over a 2px
     brass-bright left edge, hung the way the fold drawer and the reading room's
     active chapter hang theirs. The edge is what keeps this off colour alone:
     brass-bright against on-navy is a real contrast step, but Never-Colour-Alone
     asks for a shape that survives monochrome and a weight that survives
     blindness, and `aria-current="page"` supplies the announced half.

   The edge is drawn inside the link's own box (negative margin, matching
   padding-left) so the label stays on the column every other row uses.

   The homepage is the one route where nothing here fires: its `section` is "home",
   which matches none of the seven, and `{{home}}` resolves to `#main` there for
   the same reason — on the front door, "go home" is not a destination. */

.menu a[aria-current]{color:var(--navy);font-weight:600;}
.menu a[aria-current]::after{transform:scaleX(1);}
.drawer a[aria-current]{color:var(--brass-bright);font-weight:600;border-left:2px solid var(--brass-bright);padding-left:14px;margin-left:-16px;}

/* night headings */
/* @probe .night */

/* The footer's six group labels were <h4> (nav columns) and <h3> (legal blocks)
   in the single-file page, where they only cleared the heading-order check
   because that document happened to contain an <h3> in its body. A shared footer
   cannot know how deep the page above it went, so all six are now <h2> — the one
   level every document can reach straight after its <h1>.

   These are the pinned 24-night.css declarations with the tag swapped, so the
   footer renders exactly as it did. `.night__terms h2` must come second: it now
   also matches `.night h2`, and has to undo the uppercase and tracked-out
   letter-spacing that rule brings with it. Both rules die with the retired
   `.night h4` / `.night__terms h3` selectors once the single-file page goes. */

.night h2{font-family:var(--body);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-bright);margin-bottom:16px;}
.night__terms h2{font-family:var(--body);font-size:.9rem;font-weight:600;letter-spacing:-0.01em;text-transform:none;color:var(--on-navy);margin-bottom:10px;}

/* article body */
/* @probe .article */

/* Long-form reading: the dispatch pages behind /goc-nhin/ and the academy's
   guides. The measure is 68ch — wider than any band's capped lede because a
   reader who chose an article chose to read, and narrower than the hall because
   Prata-adjacent Archivo at .98rem still owes the eye a line it can finish.

   Prose links live here. The reset strips colour and underline from every
   anchor so that the building's instruments (keys, ghosts, menu links,
   link-arrows) can each carry their own hand, and the side effect was that a
   link inside a paragraph became invisible — a dead control wearing text.
   Inside .article a link is brass-ink with a held underline, the only brass
   permitted as text on a light ground, warming to navy on hover so the state
   change is a word darkening rather than a colour appearing.

   The figure is plated in the hall's materials by the same three declarations
   the reading room's plates use — desaturate, navy screen, brass-bright
   multiply — because an unfiltered photograph would be the only object on the
   page lit by someone else's sun. The caption is furniture: a mono figure
   number, a hairline, one Archivo sentence. */

.article{max-width:68ch;}
.article__meta{display:flex;align-items:center;gap:10px;margin:0 0 1.4em;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--brass-ink);}
.article__meta .dot{width:3px;height:3px;border-radius:50%;background:var(--brass-ink);}
.article__meta time{color:var(--ink-muted);font-weight:500;letter-spacing:.04em;}
.article li b{font-weight:600;color:var(--navy);}

.article p{font-size:.98rem;line-height:1.78;color:var(--ink);margin:0 0 1.2em;}
.article__lede{font-size:1.02rem;line-height:1.7;color:var(--ink-muted);margin:0 0 1.7em;}
.article h2{font-family:var(--display);font-weight:400;font-size:clamp(1.35rem,2.1vw,1.75rem);line-height:1.2;letter-spacing:-0.01em;color:var(--navy);margin:1.9em 0 .6em;}
.article h3{font-family:var(--display);font-weight:400;font-size:clamp(1.12rem,1.6vw,1.35rem);line-height:1.25;color:var(--navy);margin:1.6em 0 .5em;}
.article a{color:var(--brass-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(122,95,28,.45);}
.article a:hover{color:var(--navy);text-decoration-color:var(--navy);}
.article ul{margin:0 0 1.2em;padding-left:1.25em;}
.article li{font-size:.98rem;line-height:1.78;color:var(--ink);margin:.45em 0;}
.article li::marker{color:var(--brass-ink);}
.article blockquote{margin:1.8em 0;padding:2px 0 2px clamp(18px,2.6vw,30px);border-left:2px solid var(--brass);}
.article blockquote p{font-family:var(--display);font-weight:400;font-size:clamp(1.18rem,1.9vw,1.5rem);line-height:1.42;letter-spacing:-0.01em;color:var(--navy);margin:0;}
.article figure{margin:2em 0;}
.article__plate{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:16/9;background:var(--navy-deep);}
.article__plate img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.06) brightness(1.1);}
.article__plate::before{content:"";position:absolute;inset:0;background:var(--navy);mix-blend-mode:screen;pointer-events:none;z-index:1;}
.article__plate::after{content:"";position:absolute;inset:0;background:var(--brass-bright);mix-blend-mode:multiply;opacity:.58;pointer-events:none;z-index:2;}
.article figcaption{display:flex;gap:10px;align-items:baseline;margin-top:12px;padding-top:10px;border-top:1px solid rgba(16,26,43,.16);font-size:.78rem;line-height:1.6;color:var(--ink-muted);max-width:56ch;}
.article figcaption .idx{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--brass-ink);white-space:nowrap;}
.article .legal-line{margin-top:2.2em;padding-top:14px;border-top:1px solid rgba(16,26,43,.16);}

/* band surfaces */
/* @probe .band-paper .band-stone */

.band-paper{background:var(--paper);}
.band-stone{background:var(--stone);}

/* nav mode switch */

@media (max-width:1200px){
  .menu,.lintel__cta{display:none;}
  .burger{display:block;}
  .drawer{display:block;position:fixed;inset:0 0 auto 0;top:0;z-index:55;background:var(--navy-deep);color:var(--on-navy);padding:calc(var(--lintel-h) + 16px) var(--pad) 40px;transform:translateY(-102%);transition:transform .45s var(--ease);box-shadow:0 30px 60px -30px rgba(0,0,0,.7);}
  .drawer.is-open{transform:none;}
  .drawer a{display:block;padding:14px 0;font-size:1.05rem;border-bottom:1px solid rgba(237,239,243,.12);}
  .drawer .drawer__cta{display:flex;flex-direction:column;gap:12px;margin-top:26px;border:0;}
}

/* reduced motion */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
  .js .rise{opacity:1;transform:none;clip-path:none;}
  .js .rule-draw{transform:scaleX(1);}
  .louver i{transform:none!important;}
}