/* ── blacklabstudios.com ────────────────────────────────────────────
   Site layer. Consumes the Black Lab Studios design tokens unchanged.
   The tokens in tokens/ are vendored from the design system and are
   read-only. This file is ours.

   The house style here is a spec sheet, not a brochure. Hairline rules
   carry the structure, metadata sits in the margins, numbers are
   tabular, and nothing raises its voice. Foundation palette only,
   because Black Lab Studios is the parent identity and carries no
   extension accent of its own.
   ------------------------------------------------------------------ */

/* Token override ---------------------------------------------------
   V3 §4 restricts Charcoal 60 to "large text and headings only": on Off
   White it measures 4.20:1, under the 4.5:1 WCAG AA floor for normal
   text. Every --text-muted consumer on this site is 12px or 14px, so
   none of them qualify. We raise the token to Charcoal 80 (8.33:1)
   rather than patch each rule.

   The tokens in tokens/ stay untouched. If a genuinely large grey
   heading is ever needed, reach for --color-charcoal-60 directly and
   only above 24px.

   Worth raising with NordikBrand: a semantic token named --text-muted
   that resolves to a tint the same document forbids for text is an
   inconsistency in the system, not in this site.
   ------------------------------------------------------------------ */

:root{
  --text-muted:var(--color-charcoal-80);
  --action-ghost-on-inverse:rgba(255,255,255,.08);
  /* Middle tile. The outer two ride --surface-card and --surface-inverse,
     which already flip, so this is the only step the ramp has to name. */
  --tile-mid:var(--color-charcoal-20);
  --tile-mid-fg:var(--color-charcoal);
  color-scheme:light;
}

/* Dark-surface text ramp -------------------------------------------
   §4 prescribes White on Charcoal 80-100% for body text, and lists no
   approved Charcoal-tint-on-dark combination at all. It also has no
   guidance for metadata on dark, which is the real gap.

   We follow the pattern the system already uses for dark surfaces:
   --border-inverse is rgba(255,255,255,.24), white-at-opacity, not a
   Charcoal tint. Text does the same. The colour decision stays "White
   on Charcoal", and it travels to any dark surface, whereas Charcoal 20
   is only calibrated for Charcoal 100 and drops to 6.0:1 on Charcoal 80.

   White 100% = 17.4:1. White 70% = 8.97:1. Both AAA.
   ------------------------------------------------------------------ */

:root{
  /* Vendored --text-on-inverse-muted resolves to Charcoal 20, which §4
     forbids as a text colour. White-at-opacity instead, matching how
     --border-inverse already treats the inverse surface. Both of these
     flip in the dark-theme block below. */
  --text-on-inverse-muted:rgba(255,255,255,.7);
}

/* Dark theme ------------------------------------------------------
   V3 defines no dark theme. It defines a light page with an inverse
   (Charcoal) surface on it. So the whole theme is one idea: the page
   and the inverse surface trade places, and everything expressed
   against a semantic token follows without being touched.

   The palette stays foundation-only. Charcoal is the page, Off White
   is the inverse surface, Pampas is unchanged because it is the hinge
   the tile ramp turns on. No extension colour is spent.

   Text and lines on a dark ground are white-at-opacity, never a
   Charcoal tint, for the reasons in the ramp note above.

   The two blocks below must stay in sync. The first is the no-JS
   fallback and yields to an explicit light choice; the second is what
   the head script sets and what the toggle writes.
   ------------------------------------------------------------------ */

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;

    --surface-page:var(--color-charcoal);
    --surface-card:#242424;
    --surface-card:color-mix(in srgb, var(--color-white) 6%, var(--color-charcoal));
    --surface-sunken:#101010;
    --surface-inverse:var(--color-off-white);
    --surface-inverse-soft:var(--color-pampas);

    --text-primary:var(--color-white);
    --text-secondary:rgba(255,255,255,.72);
    --text-muted:rgba(255,255,255,.72);
    --text-on-inverse:var(--color-charcoal);
    --text-on-inverse-muted:rgba(26,26,26,.72);
    --text-link:var(--color-white);
    --text-link-hover:rgba(255,255,255,.72);

    --border-hairline:rgba(255,255,255,.16);
    --border-strong:rgba(255,255,255,.32);
    --border-inverse:rgba(26,26,26,.24);

    --action-primary-bg:var(--color-white);
    --action-primary-bg-hover:var(--color-charcoal-20);
    --action-primary-fg:var(--color-charcoal);
    --action-secondary-fg:var(--color-white);
    --action-secondary-border:var(--color-white);
    --action-ghost-bg-hover:rgba(255,255,255,.08);
    --action-ghost-on-inverse:rgba(26,26,26,.08);
    --focus-ring:var(--color-white);
    --tile-mid:var(--color-charcoal-80);
    --tile-mid-fg:var(--color-white);
  }
}

:root[data-theme="dark"]{
  color-scheme:dark;

  --surface-page:var(--color-charcoal);
  --surface-card:#242424;
  --surface-card:color-mix(in srgb, var(--color-white) 6%, var(--color-charcoal));
  --surface-sunken:#101010;
  --surface-inverse:var(--color-off-white);
  --surface-inverse-soft:var(--color-pampas);

  --text-primary:var(--color-white);
  --text-secondary:rgba(255,255,255,.72);
  --text-muted:rgba(255,255,255,.72);
  --text-on-inverse:var(--color-charcoal);
  --text-on-inverse-muted:rgba(26,26,26,.72);
  --text-link:var(--color-white);
  --text-link-hover:rgba(255,255,255,.72);

  --border-hairline:rgba(255,255,255,.16);
  --border-strong:rgba(255,255,255,.32);
  --border-inverse:rgba(26,26,26,.24);

  --action-primary-bg:var(--color-white);
  --action-primary-bg-hover:var(--color-charcoal-20);
  --action-primary-fg:var(--color-charcoal);
  --action-secondary-fg:var(--color-white);
  --action-secondary-border:var(--color-white);
  --action-ghost-bg-hover:rgba(255,255,255,.08);
  --action-ghost-on-inverse:rgba(26,26,26,.08);
  --focus-ring:var(--color-white);
  --tile-mid:var(--color-charcoal-80);
  --tile-mid-fg:var(--color-white);
}

/* Layout ---------------------------------------------------------- */

.container{
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 var(--grid-margin);
}

.section{padding:var(--space-xxl) 0}
.section--tight{padding:var(--space-l) 0}
.section--flush{padding-top:0}

.band{padding:var(--space-xxl) 0}
.band--sunken{background:var(--surface-sunken)}
.band--inverse{background:var(--surface-inverse);color:var(--text-on-inverse)}
.band--inverse h1,.band--inverse h2,.band--inverse h3{color:var(--text-on-inverse)}
.band--inverse .eyebrow,.band--inverse .label{color:var(--text-on-inverse-muted)}
.band--inverse a{color:var(--text-on-inverse)}

.stack{display:flex;flex-direction:column}
.stack-xs{gap:var(--space-xs)}
.stack-s{gap:var(--space-s)}
.stack-m{gap:var(--space-m)}
.stack-l{gap:var(--space-l)}
.stack-xl{gap:var(--space-xl)}

.grid{display:grid;gap:var(--grid-gutter)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-7-5{grid-template-columns:7fr 5fr;gap:var(--space-xl)}
.grid-5-7{grid-template-columns:5fr 7fr;gap:var(--space-xl)}

.section-head{display:flex;justify-content:space-between;align-items:flex-end;
  gap:var(--space-m);flex-wrap:wrap}
/* Stacked on small screens, so bottom alignment would become right alignment.
   This lives in CSS rather than inline so the media query can win. */
/* The right-hand note in a section head. A class, not an inline style, so
   the small-screen rule below can actually override it. */
.section-note{max-width:15rem;text-align:right}
@media (max-width:760px){
  .section-head{flex-direction:column;align-items:flex-start}
  .section-head .section-note{text-align:left;max-width:none}
}

.measure{max-width:64ch}
.measure-narrow{max-width:52ch}

.lead{font-size:20px;line-height:32px;color:var(--text-secondary)}
.band--inverse .lead{color:var(--text-on-inverse)}
.muted{color:var(--text-muted)}
.secondary{color:var(--text-secondary)}
.tabular{font-variant-numeric:tabular-nums}

/* A uppercase, tracked micro-label. The workhorse of the spec sheet. */
.label{
  font-size:var(--text-ui-sm);line-height:var(--leading-ui-sm);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  font-weight:var(--font-weight-semibold);color:var(--text-muted);
}

/* Rules do the work colour would do elsewhere. */
.rule{border:0;border-top:var(--border-width) solid var(--border-hairline);margin:0}
.rule--strong{border-top:var(--border-width-strong) solid var(--text-primary)}
.rule-top{border-top:var(--border-width-strong) solid var(--text-primary);padding-top:var(--space-s)}

/* Identity strip -------------------------------------------------- */

.strip{
  display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:var(--space-xs) var(--space-l);
  padding:var(--space-s) 0;
  border-bottom:var(--border-width) solid var(--border-hairline);
}
.strip ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-l)}
.strip li{white-space:nowrap}
.strip a{color:inherit;text-decoration:none}
.strip a:hover{color:var(--text-primary)}

/* Masthead -------------------------------------------------------- */

.masthead{
  display:grid;grid-template-columns:minmax(0,1fr) 17rem;
  gap:var(--space-xl);align-items:start;
  padding:var(--space-xl) 0 var(--space-m);
}

/* The mission line is the navigation. Each verb is a link to its group. */
.statement{
  font-size:var(--text-h1);line-height:var(--leading-h1);
  letter-spacing:var(--tracking-h1);
  font-weight:var(--font-weight-semibold);
  margin:0;
}
.statement a{
  color:inherit;text-decoration:none;
  background-image:linear-gradient(var(--color-charcoal-20),var(--color-charcoal-20));
  background-repeat:no-repeat;
  background-size:100% var(--border-width-strong);
  background-position:0 calc(100% - 8px);
  transition:background-image var(--duration-fast) var(--ease-standard);
}
.statement a:hover,.statement a:focus-visible{
  color:inherit;
  background-image:linear-gradient(var(--text-primary),var(--text-primary));
}

/* Margin data. Only numbers we can stand behind. */
.facts{margin:0;border-top:var(--border-width-strong) solid var(--text-primary)}
.facts > div{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--space-s);padding:var(--space-xs) 0;
  border-bottom:var(--border-width) solid var(--border-hairline);
}
.facts dt{max-width:11ch}
.facts--row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  border-bottom:var(--border-width) solid var(--border-hairline);
}
.facts--row > div{
  display:block;padding:var(--space-s) var(--space-m) var(--space-s) 0;
  border-bottom:0;
}
.facts--row dt{max-width:none;margin-bottom:var(--space-half)}
.facts--row dd{font-size:28px;line-height:34px;letter-spacing:-0.01em}

.facts dd{
  margin:0;font-size:18px;line-height:24px;
  font-weight:var(--font-weight-semibold);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* The index ------------------------------------------------------- */

.sheet{
  border-top:var(--border-width-strong) solid var(--text-primary);
  padding-top:var(--space-m);
  margin-top:var(--space-xl);
  scroll-margin-top:var(--space-l);
}
.sheet-head{
  display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:var(--space-xs) var(--space-m);
}
.sheet-title{
  font-size:var(--text-h2);line-height:var(--leading-h2);
  letter-spacing:var(--tracking-h2);font-weight:var(--font-weight-semibold);
  margin:0;
}
.sheet-blurb{
  max-width:62ch;color:var(--text-secondary);
  margin:var(--space-xs) 0 var(--space-m);
}
.idx-rows{border-top:var(--border-width) solid var(--border-hairline)}
/* When a group has no blurb, the rows would otherwise butt into the heading. */
.sheet-head + .rows,.sheet-head + .idx-rows{margin-top:var(--space-m)}

.idx-row{
  display:grid;
  grid-template-columns:3rem minmax(0,15rem) minmax(0,1fr) minmax(0,11rem) 1.25rem;
  gap:var(--space-m);align-items:baseline;
  padding:var(--space-s) var(--space-xs);
  margin:0 calc(var(--space-xs) * -1);
  border-bottom:var(--border-width) solid var(--border-hairline);
  text-decoration:none;color:inherit;
  transition:background-color var(--duration-fast) var(--ease-standard);
}
.idx-row:hover{background:var(--action-ghost-bg-hover);color:inherit}

.idx-num{
  font-variant-numeric:tabular-nums;
  font-size:var(--text-ui);line-height:var(--leading-ui);
  font-weight:var(--font-weight-semibold);color:var(--text-muted);
}
.idx-name{font-size:20px;line-height:28px;font-weight:var(--font-weight-semibold)}
.idx-status{
  display:block;font-style:normal;margin-top:var(--space-half);
  font-size:var(--text-ui-sm);line-height:var(--leading-ui-sm);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  font-weight:var(--font-weight-semibold);color:var(--text-muted);
}
.idx-note{color:var(--text-secondary);font-size:var(--text-caption);line-height:22px}
.idx-target{
  font-size:var(--text-ui);line-height:var(--leading-ui);
  color:var(--text-secondary);overflow-wrap:anywhere;
}
.idx-arrow{align-self:start;margin-top:var(--space-half);justify-self:end;color:var(--text-primary)}
.idx-arrow svg{
  display:block;width:20px;height:20px;
  transition:transform var(--duration-fast) var(--ease-standard);
}
.idx-row:hover .idx-arrow svg{transform:translateX(3px)}
.idx-row--external:hover .idx-arrow svg{transform:translate(2px,-2px)}

/* An outbound link rendered as metadata rather than as a button. */
.link-out{
  display:inline-flex;align-items:center;gap:var(--space-xs);
  font-size:var(--text-ui);line-height:var(--leading-ui);
  font-weight:var(--font-weight-semibold);
  color:var(--text-primary);text-decoration:none;
}
.link-out svg{width:16px;height:16px;transition:transform var(--duration-fast) var(--ease-standard)}
.link-out:hover svg{transform:translate(2px,-2px)}

/* Logo — SVG used as a mask so one file serves every brand colour. */

.logo{display:block;background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
.logo--primary{width:180px;height:60px;
  -webkit-mask-image:url("../assets/logo/primary.svg");
  mask-image:url("../assets/logo/primary.svg")}
.logo--symbol{width:200px;height:210px;
  -webkit-mask-image:url("../assets/logo/symbol.svg");
  mask-image:url("../assets/logo/symbol.svg")}

/* Header ---------------------------------------------------------- */
/* Static, not sticky, and carrying no rule of its own. The page starts
   with air above the display type rather than with a bar. */

.site-header{position:relative;z-index:50}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-m);
  padding-top:var(--space-m);padding-bottom:var(--space-m);
}
.site-header a{text-decoration:none}
.brand-link{display:flex;align-items:center;color:var(--text-primary);flex:0 0 auto}
/* 180px is the Primary Logo's minimum width (V3 §2). Do not go below it.
   The lockup's "B" is 121 of 450 viewBox units, so 1B of clear space at
   this size is 16.1px, which the header's 24px padding clears. Anything
   smaller needs the Wordmark (120px floor) or the Symbol (32px). */
.brand-link .logo--primary{width:180px;height:60px}

/* Sentence case and quiet. The nav is a signpost, not a headline. */
.site-nav{display:flex;align-items:center;gap:var(--space-l)}
.site-nav a{
  font-size:var(--text-ui);line-height:var(--leading-ui);
  color:var(--text-muted);text-decoration:none;white-space:nowrap;
  transition:color var(--duration-fast) var(--ease-standard);
}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--text-primary)}

.header-hello{
  display:inline-flex;align-items:center;gap:var(--space-xs);
  font-size:var(--text-ui);line-height:var(--leading-ui);
  font-weight:var(--font-weight-semibold);
  color:var(--text-primary);white-space:nowrap;
}
.header-hello svg{width:16px;height:16px;transition:transform var(--duration-fast) var(--ease-standard)}
.header-hello:hover svg{transform:translate(2px,-2px)}

/* The right-hand cluster. Grouping these keeps the header at three
   children, so space-between still does something sensible. */
.header-actions{display:flex;align-items:center;gap:var(--space-s)}

.icon-btn{
  display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;
  padding:0;border-radius:var(--radius-pill);
  border:var(--border-width) solid var(--border-hairline);
  background:transparent;color:var(--text-primary);cursor:pointer;
  transition:border-color var(--duration-fast) var(--ease-standard),
             background-color var(--duration-fast) var(--ease-standard);
}
.icon-btn:hover{border-color:var(--border-strong);background:var(--action-ghost-bg-hover)}
.icon-btn svg{width:20px;height:20px}

/* Both glyphs are in the DOM; only the one for the active theme shows.
   No script touches the icon, so it cannot fall out of step. */
.theme-icon{display:none}
:root[data-theme="light"] .theme-icon--moon{display:block}
:root[data-theme="dark"] .theme-icon--sun{display:block}
/* No JS: fall back to the OS, matching the media query in the theme block. */
:root:not([data-theme]) .theme-icon--moon{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .theme-icon--moon{display:none}
  :root:not([data-theme]) .theme-icon--sun{display:block}
}

/* The menu button is the only one that hides on wide screens. */
.nav-toggle{display:none}

.nav-panel{
  border-top:var(--border-width) solid var(--border-hairline);
  padding:var(--space-xs) 0 var(--space-s);
}
.nav-panel[hidden]{display:none}
.nav-panel .container{
  display:flex;flex-direction:column;
  /* align-items must be reset, or the header's centring leaks in here. */
  align-items:stretch;justify-content:flex-start;
}
.nav-panel a{
  padding:var(--space-s) 0;font-size:18px;line-height:26px;
  color:var(--text-primary);text-decoration:none;
  border-bottom:var(--border-width) solid var(--border-hairline);
}
.nav-panel a:last-child{border-bottom:0}

@media (min-width:761px){ .nav-panel{display:none} }
@media (max-width:760px){
  .site-nav,.header-hello{display:none}
  .nav-toggle{display:inline-flex}
  /* Two buttons instead of one, and the logo cannot shrink below its
     180px floor, so the gaps give up the room instead. */
  .header-actions{gap:var(--space-xs)}
}
@media (max-width:480px){
  .site-header .container{gap:var(--space-s)}
}

/* Buttons --------------------------------------------------------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);
  padding:var(--space-s) var(--space-m);
  font-family:inherit;font-size:var(--text-body);line-height:20px;
  font-weight:var(--font-weight-semibold);
  border-radius:var(--radius-md);border:var(--border-width) solid transparent;
  text-decoration:none;cursor:pointer;
  transition:background-color var(--duration-fast) var(--ease-standard),
             color var(--duration-fast) var(--ease-standard),
             border-color var(--duration-fast) var(--ease-standard),
             transform var(--duration-fast) var(--ease-standard);
}
.btn:active{transform:scale(.98)}
.btn svg{width:20px;height:20px;flex:0 0 auto}

.btn--primary{background:var(--action-primary-bg);color:var(--action-primary-fg)}
.btn--primary:hover{background:var(--action-primary-bg-hover);color:var(--action-primary-fg)}

.btn--secondary{background:transparent;color:var(--action-secondary-fg);border-color:var(--action-secondary-border)}
.btn--secondary:hover{background:var(--action-ghost-bg-hover);color:var(--action-secondary-fg)}

.btn--ghost{background:transparent;color:var(--text-primary);padding-left:var(--space-s);padding-right:var(--space-s)}
.btn--ghost:hover{background:var(--action-ghost-bg-hover)}

.band--inverse .btn--primary{background:var(--text-on-inverse);color:var(--surface-inverse)}
.band--inverse .btn--primary:hover{background:var(--text-on-inverse-muted);color:var(--surface-inverse)}
.band--inverse .btn--secondary{color:var(--text-on-inverse);border-color:var(--text-on-inverse)}
.band--inverse .btn--secondary:hover{background:var(--action-ghost-on-inverse);color:var(--text-on-inverse)}

.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-s)}

/* Badges ---------------------------------------------------------- */

.badge{
  align-self:flex-start;
  font-size:var(--text-ui-sm);line-height:var(--leading-ui-sm);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  font-weight:var(--font-weight-semibold);
  padding:var(--space-half) var(--space-xs);
  border:var(--border-width) solid var(--border-strong);
  border-radius:var(--radius-sm);color:var(--text-secondary);
}

/* Numbered definition rows (topics, formats, values) --------------- */

.rows{border-top:var(--border-width-strong) solid var(--text-primary)}
.row{
  display:grid;grid-template-columns:3rem minmax(0,17rem) minmax(0,1fr);
  gap:var(--space-m);
  padding:var(--space-m) 0;
  border-bottom:var(--border-width) solid var(--border-hairline);
}
.row h3{font-size:20px;line-height:28px}
.row p{color:var(--text-secondary)}
.row .meta{font-size:var(--text-caption);line-height:var(--leading-caption);color:var(--text-muted);margin-top:var(--space-half)}
.row-num{
  font-variant-numeric:tabular-nums;
  font-size:var(--text-ui);line-height:28px;
  font-weight:var(--font-weight-semibold);color:var(--text-muted);
}

/* A row that is itself a link. Gains an arrow column and a hover wash. */
.row--link{
  grid-template-columns:3rem minmax(0,17rem) minmax(0,1fr) 24px;
  padding:var(--space-m) var(--space-xs);
  margin:0 calc(var(--space-xs) * -1);
  text-decoration:none;color:inherit;
  transition:background-color var(--duration-fast) var(--ease-standard);
}
.row--link:hover{background:var(--action-ghost-bg-hover);color:inherit}
.row-arrow{width:20px;height:20px;align-self:start;justify-self:end;margin-top:var(--space-half);
  transition:transform var(--duration-fast) var(--ease-standard)}
.row--link:hover .row-arrow{transform:translateX(3px)}

.checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-s)}
.checklist li{display:flex;gap:var(--space-s);align-items:flex-start;color:var(--text-secondary)}
.checklist svg{width:20px;height:20px;flex:0 0 auto;margin-top:4px;color:var(--text-primary)}

/* Quote ----------------------------------------------------------- */

.quote{display:flex;flex-direction:column;gap:var(--space-m)}
/* Quotes are Accent, exactly as V3 §5 defines it: Inter Light Italic at
   16/28, the style the scale names for "quotes, emphasis and editorial
   highlights". Same values as the .accent class, so a quote and an
   editorial line read as one voice.

   Accent is body size, so a quote does not get to be large here. Give it
   room with space around it rather than points. */
.quote blockquote{
  font-size:var(--text-accent);line-height:var(--leading-accent);
  font-weight:var(--font-weight-light);font-style:italic;
}
.quote figcaption{font-size:var(--text-caption);line-height:var(--leading-caption);color:var(--text-secondary)}
.quote figcaption strong{color:var(--text-primary);font-weight:var(--font-weight-semibold)}
/* On the inverse band, "primary" is the wrong side of the page. */
.band--inverse .quote figcaption strong{color:var(--text-on-inverse)}

/* Form ------------------------------------------------------------ */

.form{display:flex;flex-direction:column;gap:var(--space-m);max-width:720px}
.field{display:flex;flex-direction:column;gap:var(--space-xs)}
.field label{
  font-size:var(--text-ui-sm);line-height:var(--leading-ui-sm);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  font-weight:var(--font-weight-semibold);color:var(--text-secondary);
}
.field .hint{font-size:var(--text-caption);line-height:var(--leading-caption);color:var(--text-muted)}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:var(--text-body);line-height:var(--leading-body);
  color:var(--text-primary);background:var(--surface-card);
  border:var(--border-width) solid var(--border-strong);
  border-radius:var(--radius-sm);
  padding:var(--space-xs) var(--space-s);
  transition:border-color var(--duration-fast) var(--ease-standard);
}
.field textarea{min-height:104px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--text-primary);
}
/* No outline:none here. It used to sit on :focus, which outranks the
   :focus-visible ring in base.css and stripped the indicator from
   keyboard users too. The system already defines --focus-ring,
   --focus-ring-width and --focus-ring-offset. Let them do the job. */
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-m)}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{font-size:var(--text-ui);line-height:var(--leading-ui);padding:var(--space-s);border-radius:var(--radius-sm)}
.form-status[data-state="ok"]{background:var(--color-meadow-mist-20);color:var(--color-charcoal);border:var(--border-width) solid var(--color-meadow-mist)}
.form-status[data-state="error"]{background:var(--color-warm-clay-20);color:var(--color-charcoal);border:var(--border-width) solid var(--color-warm-clay)}
.form-status[hidden]{display:none}

/* Footer ---------------------------------------------------------- */
/* One line. The sitemap lives on the home page, which is the index,
   so repeating it here would only say the same thing twice. */

.site-footer{padding:0 0 var(--space-xxl)}
/* The rule lines up with page content, so it sits on an inner element
   rather than on the container, which carries the gutters. */
.footer-inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--space-s) var(--space-l);
  border-top:var(--border-width) solid var(--border-hairline);
  padding-top:var(--space-m);
  font-size:var(--text-ui-sm);line-height:var(--leading-ui-sm);
  color:var(--text-muted);
}
.site-footer a{color:var(--text-muted);text-decoration:none}
.site-footer a:hover{color:var(--text-primary)}
.site-footer .brand-link{color:var(--text-primary)}
.site-footer .logo--primary{width:180px;height:60px}
.footer-line{margin:0}
/* Wraps: at the narrowest widths the links no longer fit on one row, and
   nowrap squeezes the last one into two crammed lines instead. */
.footer-links{display:flex;flex-wrap:wrap;gap:var(--space-s) var(--space-l)}

/* Skip link ------------------------------------------------------- */

.skip-link{position:absolute;left:-9999px;top:0;background:var(--surface-inverse);color:var(--text-on-inverse);
  padding:var(--space-s) var(--space-m);z-index:100;text-decoration:none}
.skip-link:focus{left:0;color:var(--text-on-inverse)}

/* Responsive ------------------------------------------------------ */

@media (max-width:1024px){
  .container{padding:0 var(--space-l)}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-7-5,.grid-5-7{grid-template-columns:1fr;gap:var(--space-l)}
  .masthead{grid-template-columns:1fr;gap:var(--space-l)}
  .facts{max-width:26rem}
  .idx-row{grid-template-columns:2.5rem minmax(0,13rem) minmax(0,1fr) 1.25rem;gap:var(--space-s) var(--space-m)}
  .idx-target{grid-column:2 / 4;color:var(--text-muted)}
  .row{grid-template-columns:2.5rem minmax(0,14rem) minmax(0,1fr)}
  .row--link{grid-template-columns:2.5rem minmax(0,14rem) minmax(0,1fr) 24px}
}

@media (max-width:760px){
  .br-lg{display:none}
  .container{padding:0 var(--space-m)}
  h1,.statement{font-size:36px;line-height:44px}
  h2,.sheet-title{font-size:28px;line-height:36px}
  h3{font-size:22px;line-height:30px}
  .lead{font-size:18px;line-height:28px}
  .statement a{background-position:0 calc(100% - 5px)}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .quote blockquote{font-size:20px;line-height:30px}
  .footer-inner{justify-content:flex-start}

  /* Rows stack: number and name on one line, everything else beneath. */
  .idx-row{grid-template-columns:2.5rem minmax(0,1fr) 1.25rem;gap:var(--space-xs) var(--space-s);padding:var(--space-m) var(--space-xs)}
  .idx-num{grid-column:1;grid-row:1}
  .idx-name{grid-column:2;grid-row:1}
  .idx-arrow{grid-column:3;grid-row:1;margin-top:var(--space-half)}
  .idx-note{grid-column:2 / 4;grid-row:2}
  .idx-target{grid-column:2 / 4;grid-row:3}

  .row{grid-template-columns:2.5rem minmax(0,1fr);gap:var(--space-xs) var(--space-s)}
  .row-num{grid-column:1;grid-row:1}
  .row > :nth-child(2){grid-column:2;grid-row:1}
  .row > :nth-child(3){grid-column:2;grid-row:2}

  .row--link{grid-template-columns:2.5rem minmax(0,1fr) 24px}
  .row-arrow{grid-column:3;grid-row:1;margin-top:4px}

  /* The destination drops under the title rather than beside it. */
  .big-row{grid-template-columns:minmax(0,1fr) 24px}
  .big-row-target{grid-column:1;grid-row:2;margin-top:0}
}

@media (max-width:480px){
  .container{padding:0 var(--space-s)}
  .idx-row{grid-template-columns:2rem minmax(0,1fr) 1.25rem}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:0.01ms !important;animation-duration:0.01ms !important}
  .btn:active{transform:none}
  .idx-row:hover .idx-arrow svg{transform:none}
}

/* ── Display system ─────────────────────────────────────────────────
   An extension above the brand H1. The parent scale tops out at 56px,
   which is a page-heading size, not a display size. One display block
   per page, and tracking tightens as the size grows because -2% is
   far too loose at 140px.
   ------------------------------------------------------------------ */

.display{
  font-size:clamp(48px,10.5vw,152px);
  line-height:.94;
  letter-spacing:-0.06em;
  font-weight:var(--font-weight-semibold);
  margin:0;
}
.display a{
  color:inherit;text-decoration:none;
  background-image:linear-gradient(var(--color-charcoal-20),var(--color-charcoal-20));
  background-repeat:no-repeat;
  background-size:100% 3px;
  background-position:0 calc(100% - .1em);
  transition:background-image var(--duration-fast) var(--ease-standard);
}
.display a:hover,.display a:focus-visible{
  color:inherit;
  background-image:linear-gradient(var(--text-primary),var(--text-primary));
}

.display-md{
  font-size:clamp(34px,5.4vw,72px);
  line-height:1;
  letter-spacing:-0.045em;
  font-weight:var(--font-weight-semibold);
  margin:0;
}
.display-sm{
  font-size:clamp(28px,3.6vw,52px);
  line-height:1.08;
  letter-spacing:-0.035em;
  font-weight:var(--font-weight-semibold);
  margin:0;
}

/* Hero ------------------------------------------------------------ */

.hero{padding:var(--space-l) 0 var(--space-xxl)}
.hero .eyebrow,.hero .label{display:block;margin-bottom:var(--space-l)}
@media (min-width:1024px){ .hero{padding:var(--space-xxl) 0 calc(var(--space-xxl) * 2)} }

/* The lead is deliberately offset and small against the display block.
   The asymmetry is the point, so it does not centre and does not grow. */
.hero-note{
  max-width:36rem;margin-top:var(--space-xl);
  border-left:var(--border-width-strong) solid var(--text-primary);
  padding-left:var(--space-m);
  font-size:18px;line-height:30px;color:var(--text-secondary);
}
@media (min-width:1024px){ .hero-note{margin-left:31%} }

/* Tiles ----------------------------------------------------------- */

.tiles{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--border-width);
  background:var(--border-hairline);
  border:var(--border-width) solid var(--border-hairline);
}
/* The whole tile is the link. Badge and arrow at the top, everything
   that reads sits at the bottom, and the space between them is the
   point. One extension tone each. */
.tile{
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-xxl);
  min-height:27rem;padding:var(--space-l);
  text-decoration:none;color:inherit;
  transition:transform var(--duration-base) var(--ease-standard);
}
.tile:hover{transform:translateY(-4px)}

/* Greys only, light to dark, and the whole ramp reverses in dark mode
   because every step is a token that flips. Light: White, Charcoal 20,
   Charcoal. Dark: the raised card, Charcoal 80, Off White. The card
   reads against the page because the grid's hairlines draw its edges. */
/* Doubled class on purpose: (0,2,0) beats a:hover (0,1,1) from base.css,
   so a tile keeps its own foreground while hovered. Do not simplify to a
   single class, or the inverse tile turns its text the colour of its own
   background on hover. */
.tile.tile--card   {background:var(--surface-card);   color:var(--text-primary)}
.tile.tile--mid    {background:var(--tile-mid);       color:var(--tile-mid-fg)}
.tile.tile--inverse{background:var(--surface-inverse);color:var(--text-on-inverse)}

.tile-top{display:flex;align-items:flex-start;justify-content:space-between}
/* Light italic, because the brand has no serif and this is the one
   place a letterform is doing decorative work. */
.tile-mark{
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:var(--radius-pill);
  border:var(--border-width) solid currentColor;
  font-size:24px;line-height:1;
  font-style:italic;font-weight:var(--font-weight-light);
}
.tile-arrow{width:20px;height:20px;flex:0 0 auto;
  transition:transform var(--duration-base) var(--ease-standard)}
.tile:hover .tile-arrow{transform:translateX(4px)}

.tile .label{color:inherit;opacity:.75;display:block;margin-bottom:var(--space-s)}
.tile-title{
  font-size:36px;line-height:40px;letter-spacing:-0.04em;
  font-weight:var(--font-weight-semibold);margin:0 0 var(--space-m);
}
.tile-note{max-width:20rem;font-size:var(--text-caption);line-height:24px;opacity:.8}

/* Asymmetric split. The narrow column carries only a label, which is
   what gives the wide column its room. */
.split{display:grid;grid-template-columns:1fr 1.35fr;gap:var(--space-xl)}
.split--wide{grid-template-columns:.7fr 1.3fr}

/* The founder note ------------------------------------------------ */

/* A portrait plate beside a signed note. The photo is the only photograph
   on the site, so it gets a full column rather than a thumbnail, and it is
   left at its native 2:3 rather than cropped. */
.founder{
  display:grid;grid-template-columns:5fr 7fr;
  gap:var(--space-xl);margin-top:var(--space-m);
  align-items:start;
}
.founder figure{margin:0}
.founder img{display:block;width:100%;height:auto}
/* Caption, set as a spec line rather than a photo credit. */
.founder figcaption{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--space-s);
  margin-top:var(--space-s);padding-top:var(--space-xs);
  border-top:var(--border-width) solid var(--border-hairline);
}
.founder-name{font-weight:var(--font-weight-semibold)}

/* The note column runs the height of the portrait, which lets the spec
   strip drop to the bottom so both columns finish on the same line. */
.founder-note{display:flex;flex-direction:column;gap:var(--space-m);min-height:100%}
.founder-note .facts{margin-top:auto}

@media (max-width:1024px){
  /* Stacked, the portrait would otherwise be a full-width slab. */
  .founder{grid-template-columns:1fr;gap:var(--space-l)}
  .founder figure{max-width:20rem}
  .founder-note{min-height:0}
  .founder-note .facts{margin-top:0}
}

/* Big list rows, used on dark ------------------------------------- */

.big-rows{border-top:var(--border-width) solid var(--border-inverse)}
.big-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto 24px;
  gap:var(--space-s) var(--space-l);align-items:start;
  padding:var(--space-m) 0;
  border-bottom:var(--border-width) solid var(--border-inverse);
  text-decoration:none;color:inherit;
}
.big-row:hover{color:inherit}
.big-row h3{
  font-size:clamp(24px,3.2vw,44px);line-height:1.08;letter-spacing:-0.035em;
  font-weight:var(--font-weight-semibold);max-width:22ch;
}
.big-row p{margin-top:var(--space-s);font-size:var(--text-caption);line-height:22px;color:var(--text-on-inverse)}
/* Where the row actually goes. Metadata, so it stays small and grey. */
.big-row-target{
  font-size:var(--text-ui);line-height:var(--leading-ui);
  color:var(--text-on-inverse-muted);white-space:nowrap;margin-top:var(--space-xs);
}
.big-row svg{width:24px;height:24px;margin-top:8px;
  transition:transform var(--duration-fast) var(--ease-standard)}
.big-row:hover svg{transform:translate(3px,-3px)}
.big-row--internal:hover svg{transform:translateX(3px)}

/* The index, grouped by verb. */
.index-group{scroll-margin-top:var(--space-l)}
.index-group + .index-group{margin-top:var(--space-xl)}
.index-group-label{display:block;margin-bottom:var(--space-s)}

/* Contact --------------------------------------------------------- */

.contact{
  display:flex;flex-direction:column;align-items:flex-start;
  justify-content:space-between;gap:var(--space-xl);
  border-bottom:var(--border-width) solid var(--border-hairline);
  padding-bottom:var(--space-xxl);
}
.contact-side{display:flex;flex-direction:column;gap:var(--space-s);width:100%;max-width:24rem}
/* Sits on a rule like an input, because that is what the eye expects
   at the end of a page. It is a mailto, not a form. */
.contact-email{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-s);
  padding-bottom:var(--space-s);border-bottom:var(--border-width) solid var(--text-primary);
  font-size:18px;line-height:26px;font-weight:var(--font-weight-semibold);
  color:var(--text-primary);text-decoration:none;
}
.contact-email svg{width:20px;height:20px;flex:0 0 auto;
  transition:transform var(--duration-fast) var(--ease-standard)}
.contact-email:hover{color:var(--text-primary)}
.contact-email:hover svg{transform:translate(2px,-2px)}
@media (min-width:761px){
  .contact{flex-direction:row;align-items:flex-end}
}

/* Section rules, the way the reference divides the page. */
.ruled{border-top:var(--border-width) solid var(--border-hairline);
       border-bottom:var(--border-width) solid var(--border-hairline)}

@media (max-width:1024px){
  .tiles{grid-template-columns:1fr}
  .tile{min-height:0;gap:var(--space-l)}
  .split,.split--wide{grid-template-columns:1fr;gap:var(--space-m)}
  .hero{padding:var(--space-l) 0 var(--space-xl)}
  .hero-note{margin-top:var(--space-xl)}
}

@media (max-width:760px){
  .display{letter-spacing:-0.04em}
  .tile{padding:var(--space-m)}
  .tile-title{font-size:32px;line-height:36px}
  .big-row{gap:var(--space-m)}
}

@media (prefers-reduced-motion:reduce){
  .big-row:hover svg,.row--link:hover .row-arrow{transform:none}
  .tile:hover{transform:none}
  .tile:hover .tile-arrow{transform:none}
}