/* ============================================================================
   HUMAIN — DESIGN SYSTEM v1.0  ·  LOCKED  ·  Sep 2026
   Single source of truth. system.html and every page render from this file.
   Ground: warm paper. Accent: maroon. Gold: linework + dark-ground labels only.
   Device: the circumflex ^ — in the logo, the labels, the rules, the watermark.
   ========================================================================= */

/* ---------- 1 · FONTS ---------------------------------------------------- */
@font-face{font-family:"Newsreader";src:url("../assets/fonts/Newsreader_36pt-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("../assets/fonts/Newsreader_36pt-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("../assets/fonts/Newsreader_36pt-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("../assets/fonts/Newsreader_36pt-Italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"General Sans";src:url("../assets/fonts/GeneralSans-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url("../assets/fonts/GeneralSans-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url("../assets/fonts/GeneralSans-Semibold.otf") format("opentype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url("../assets/fonts/GeneralSans-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}

/* ---------- 2 · TOKENS --------------------------------------------------- */
:root{
  /* Ground & ink */
  --paper:#F2F1EE;          /* page ground  · ink on paper 13.49:1 */
  --surface:#FFFFFF;        /* raised cards */
  --ink:#22262A;            /* primary text on light */
  --ink-2:#585E63;          /* secondary text on light · 6.42:1 */
  --ink-3:#676D73;      /* tertiary / meta on light · 4.60:1 ✓ */
  --black:#0A0A0A;          /* dark sections, header, footer */
  --black-2:#141414;        /* raised surface on black */

  /* Accent — maroon is the LIGHT-ground accent, never used on dark */
  --maroon:#7A2130;         /* on paper 8.91:1 ✓ */
  --maroon-hover:#611A26;
  --maroon-light:#D06078;   /* the ONLY maroon permitted on dark · 5.02:1 ✓ */

  /* Gold — linework on light; label text on dark. Never body on light. */
  --gold:#C79A3B;           /* on paper 2.29 — LINEWORK ONLY */
  --gold-dark:#DBB65B;      /* on black 9.68:1 ✓ — labels, eyebrows, ticks */

  /* Lines */
  --line:rgba(34,38,42,.10);
  --line-2:rgba(34,38,42,.18);
  --line-dark:rgba(255,255,255,.12);
  --line-dark-2:rgba(255,255,255,.22);

  /* Feedback */
  --error:#8E1B24;  --error-bg:#FBF0F1;
  --ok:#2E6B4F;     --ok-bg:#EFF5F1;

  /* Type */
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"General Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; /* swap → IBM Plex Mono */

  /* Grid */
  --max:1180px; --gutter:32px; --pad:32px;

  /* Space — 4px base */
  --s1:.25rem; --s2:.5rem;  --s3:.75rem; --s4:1rem;   --s5:1.5rem;
  --s6:2rem;   --s7:3rem;   --s8:4.5rem; --s9:7rem;   --s10:9rem;

  /* Radius — 3px system, pill reserved for the single primary CTA */
  --r:3px; --r-lg:4px; --pill:999px;

  /* Motion */
  --t-hover:100ms; --t-ui:200ms; --t-panel:320ms; --t-reveal:440ms;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.4,0,1,1);
}

/* ---------- 3 · RESET & BASE --------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul{margin:0;padding:0;list-style:none}

/* ---------- 4 · TYPE ------------------------------------------------------ */
h1,.h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.5rem,4.6vw,4.05rem);
  line-height:1.06;letter-spacing:-.015em;color:var(--ink)}
h2,.h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.9rem,3.4vw,2.75rem);
  line-height:1.14;letter-spacing:-.012em}
h3,.h3{font-family:var(--sans);font-weight:600;font-size:clamp(1.15rem,1.6vw,1.35rem);
  line-height:1.3;letter-spacing:-.005em}
h4,.h4{font-family:var(--sans);font-weight:600;font-size:1rem;line-height:1.35}
p{max-width:66ch}
.lede{font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:1.62;color:var(--ink-2);max-width:52ch}
.body-sm{font-size:.94rem;line-height:1.6;color:var(--ink-2)}
.meta{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

/* The label voice — mono, with the circumflex tick. The system's signature. */
.label{font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--maroon);display:inline-flex;align-items:center;gap:.6rem}
.label::before{content:"";width:11px;height:6px;flex:none;
  background:currentColor;-webkit-mask:var(--caret) no-repeat center/contain;mask:var(--caret) no-repeat center/contain}
/* Not a generic UI chevron: this is the actual circumflex accent outline from
   Newsreader Medium (the "î" in the wordmark uses this exact glyph), pulled
   straight from the font file so every caret on the site is the same mark. */
:root{--caret:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="108.7" height="60" viewBox="0 0 108.7 60"><path d="M0 60 L39 0 L69.5 0 L108.7 60 L96.8 60 L48.9 20.6 L59.8 20.6 L11.9 60 Z" fill="black"/></svg>')}
/* Traced from the caret above the î in assets/logos/humain-wordmark.png
   itself (not the font) — used only where the mark should read as "the logo",
   e.g. riding the scroll progress rule. */
:root{--caret-logo:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="101.3" height="60" viewBox="0 0 101.3 60"><path d="M 101.3 38.6 L 59.3 0 L 3.2 50.1 L 0 56.1 L 6.1 60 L 59.4 30.8 L 94.5 43.8 L 99.3 43.5 Z" fill="black"/></svg>')}
.label.plain::before{display:none}
.thc-mark{height:42px;width:auto;display:block}
.on-dark .label,.dark .label{color:var(--gold-dark)}

/* Serif italic pull-quote */
.quote{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.35rem,2.4vw,1.95rem);line-height:1.45;max-width:24ch}
.dark .quote{color:#fff}

/* The "ai" inside Humain — one treatment per ground, never two */
.ai{color:var(--maroon)}
.dark .ai,.on-dark .ai{color:var(--gold-dark)}

/* ---------- 5 · GRID ------------------------------------------------------ */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter)}
.col-1{grid-column:span 1}.col-2{grid-column:span 2}.col-3{grid-column:span 3}
.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}
.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-9{grid-column:span 9}
.col-10{grid-column:span 10}.col-11{grid-column:span 11}.col-12{grid-column:span 12}
section{padding:var(--s9) 0}
section.tight{padding:var(--s8) 0}
.dark{background:var(--black);color:#fff}
.dark p,.dark .body-sm{color:rgba(255,255,255,.72)}
.dark h1,.dark h2,.dark h3{color:#fff}

/* Grain — the craft layer. Ink-on-paper, not cold UI void. */
.dark{position:relative;isolation:isolate}
.dark::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.035;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3"/></filter><rect width="140" height="140" filter="url(%23n)"/></svg>')}
.dark > *{position:relative;z-index:1}

/* Section index + rule — editorial precision */
.sec-head{display:flex;align-items:baseline;gap:var(--s5);margin-bottom:var(--s6)}
.sec-index{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--ink-3);flex:none}
.dark .sec-index{color:rgba(255,255,255,.56)}
.rule{height:1px;background:var(--line-2);border:0;margin:0}
.rule-gold{height:1px;background:var(--gold);opacity:.55;border:0;margin:0;width:56px}
.dark .rule{background:var(--line-dark)}
.dark .rule-gold{background:var(--gold-dark);opacity:.7}

/* ---------- 6 · BUTTONS --------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--sans);font-weight:600;font-size:.9375rem;line-height:1;
  padding:.95rem 1.5rem;border-radius:var(--r);border:1px solid transparent;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background var(--t-ui) var(--ease),color var(--t-ui) var(--ease),
             border-color var(--t-ui) var(--ease),transform var(--t-hover) var(--ease)}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn.is-disabled{opacity:.5;pointer-events:none;cursor:not-allowed}

.btn-primary{background:var(--maroon);color:#fff}
.btn-primary:hover{background:var(--maroon-hover)}
.btn-primary.pill{border-radius:var(--pill);padding-inline:1.75rem} /* ONE per page */

.btn-secondary{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-secondary:hover{border-color:var(--ink);background:rgba(34,38,42,.03)}

.btn-ghost-dark{background:transparent;color:#fff;border-color:var(--line-dark-2)}
.btn-ghost-dark:hover{border-color:#fff;background:rgba(255,255,255,.06)}

.btn-sm{padding:.65rem 1.05rem;font-size:.85rem}
.btn .arw{transition:transform var(--t-ui) var(--ease)}
.btn:hover .arw{transform:translateX(3px)}

/* Text link with the caret underline */
.tlink{font-weight:600;font-size:.9375rem;color:var(--maroon);text-decoration:none;
  display:inline-flex;align-items:center;gap:.45rem}
.tlink:hover{text-decoration:underline;text-underline-offset:4px}
.dark .tlink{color:var(--gold-dark)}

/* ---------- 7 · FOCUS — one global rule, every interactive element -------- */
:focus{outline:none}
:focus-visible{outline:2px solid var(--maroon);outline-offset:2px;border-radius:var(--r)}
.dark :focus-visible,.on-dark :focus-visible{outline-color:var(--gold-dark)}

/* ---------- 8 · FORM ------------------------------------------------------ */
.field{display:flex;flex-direction:column;gap:.4rem}
.field label{font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2)}
.input{font-family:var(--sans);font-size:.95rem;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r);padding:.85rem 1rem;width:100%;
  transition:border-color var(--t-ui) var(--ease),box-shadow var(--t-ui) var(--ease)}
.input::placeholder{color:var(--ink-3)}
.input:hover{border-color:rgba(34,38,42,.30)}
.input:focus{border-color:var(--maroon);box-shadow:0 0 0 3px rgba(122,33,48,.12);outline:none}
.input[aria-invalid="true"]{border-color:var(--error);background:var(--error-bg)}
.input[disabled]{background:rgba(34,38,42,.04);color:var(--ink-3);cursor:not-allowed}
.help{font-size:.8125rem;color:var(--ink-2)}
.help.err{color:var(--error);display:flex;align-items:center;gap:.35rem}
.note{border-left:2px solid var(--maroon);background:rgba(122,33,48,.045);
  padding:var(--s4) var(--s5);border-radius:0 var(--r) var(--r) 0;font-size:.9rem;color:var(--ink-2)}
.form-success{border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-lg);
  padding:var(--s7);text-align:left}
.form-error-banner{border:1px solid var(--error);background:var(--error-bg);border-radius:var(--r);
  padding:var(--s4) var(--s5);color:var(--error);font-size:.9rem;display:flex;gap:.6rem;align-items:flex-start}

/* ---------- 9 · CARD ------------------------------------------------------ */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s6);transition:border-color var(--t-ui) var(--ease),transform var(--t-ui) var(--ease)}
.card.hoverable:hover{border-color:var(--line-2);transform:translateY(-2px)}
.card.dark-card{background:var(--black);border-color:transparent;color:#fff}
.card.dark-card p{color:rgba(255,255,255,.72)}

/* ---------- 10 · ACCORDION (open by default; collapse is progressive) ----- */
.acc{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-lg);
  margin-bottom:var(--s3);overflow:hidden;transition:border-color var(--t-ui) var(--ease)}
.acc:hover{border-color:var(--line-2)}
.acc-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  width:100%;background:none;border:0;padding:var(--s5) var(--s6);cursor:pointer;text-align:left;font:inherit}
.acc-sign{width:14px;height:14px;flex:none;position:relative}
.acc-sign::before,.acc-sign::after{content:"";position:absolute;background:var(--maroon);
  transition:transform var(--t-panel) var(--ease),opacity var(--t-panel) var(--ease)}
.acc-sign::before{inset:6px 0 6px 0;height:2px}
.acc-sign::after{inset:0 6px 0 6px;width:2px}
.acc[open] .acc-sign::after,.acc.is-open .acc-sign::after{opacity:0;transform:rotate(90deg)}
.acc-body{padding:0 var(--s6) var(--s6);border-top:1px solid var(--line)}
.acc-body p{margin-top:var(--s4)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s5);margin-top:var(--s4);align-items:center}
.chip{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--maroon)}
.chip.muted{color:var(--ink-3)}

/* ---------- 11 · HEADER --------------------------------------------------- */
.hdr{position:sticky;top:0;z-index:100;background:rgba(242,241,238,.88);
  backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--line);
  transition:box-shadow var(--t-ui) var(--ease),background var(--t-ui) var(--ease)}
.hdr.is-scrolled{box-shadow:0 1px 0 var(--line),0 10px 30px -22px rgba(0,0,0,.35)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s6);
  padding-top:1.15rem;padding-bottom:1.15rem;transition:padding var(--t-ui) var(--ease)}
.hdr.is-scrolled .wrap{padding-top:.8rem;padding-bottom:.8rem}
.brand img{height:38px;width:auto;transition:height var(--t-ui) var(--ease)}
.hdr.is-scrolled .brand img{height:32px}
.nav{display:flex;align-items:center;gap:var(--s6)}
.nav a{font-size:.9375rem;font-weight:500;color:var(--ink-2);text-decoration:none;
  padding:.35rem 0;position:relative;transition:color var(--t-hover) var(--ease)}
.nav a:hover{color:var(--ink);text-decoration:none}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
  background:var(--maroon);transition:right var(--t-ui) var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
.nav a[aria-current="page"]{color:var(--ink)}
.nav a.btn-primary{color:#fff}
.nav a.btn-primary::after{display:none}
.nav a.btn-secondary{color:var(--ink)}
.hdr-actions{display:flex;align-items:center;gap:var(--s4);flex:none}
.cta-hdr .sm{display:none}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:22px;height:1.5px;background:var(--ink);margin:5px 0;
  transition:transform var(--t-ui) var(--ease),opacity var(--t-ui) var(--ease)}
/* Open state: the three rules fold into a cross. Driven off aria-expanded so
   the visual state and the announced state can never disagree. */
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- 12 · FOOTER --------------------------------------------------- */
.ftr{background:var(--black);color:#fff;padding:var(--s8) 0 var(--s7)}
.ftr .brand img{height:34px;filter:brightness(0) invert(1)}
.ftr a{color:rgba(255,255,255,.72);text-decoration:none;font-size:.9rem}
.ftr a:hover{color:#fff}
.soc{display:flex;gap:var(--s3)}
.soc a{width:36px;height:36px;border:1px solid var(--line-dark-2);border-radius:var(--r);
  display:grid;place-items:center;transition:border-color var(--t-ui) var(--ease),background var(--t-ui) var(--ease)}
.soc a:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.soc svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6}

/* ---------- 13 · HERO ----------------------------------------------------- */
.hero{padding:clamp(96px,12vh,168px) 0 clamp(72px,9vh,120px);position:relative;overflow:hidden}
.hero .grid{align-items:start}
.hero .specimen{margin-top:3.25rem}
/* Specimen block — fills columns 8–12 so the grid is never half-empty.
   Designed to ship WITHOUT photography. */
.specimen{border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface);
  padding:var(--s7) var(--s6) var(--s6);display:flex;flex-direction:column;gap:var(--s4);align-items:center;
  text-align:center;position:relative}
.specimen::after{content:"";position:absolute;left:14px;top:14px;width:16px;height:16px;
  border-left:1px solid var(--gold);border-top:1px solid var(--gold);opacity:.7}
.specimen .caret-mark{width:34px;height:19px;background:var(--maroon);opacity:.9;
  -webkit-mask:var(--caret) no-repeat center/contain;mask:var(--caret) no-repeat center/contain}
.specimen .spec-word{font-family:var(--serif);font-size:1.9rem;line-height:1;margin-top:.35rem}
.specimen .spec-rule{width:40px;height:1px;background:var(--gold);opacity:.6;margin:.35rem 0 .1rem}
.specimen .spec-cap{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);max-width:26ch}

/* ---------- 14 · STATUS PILL --------------------------------------------- */
.status{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--mono);
  font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--line-2);border-radius:var(--pill);padding:.45rem 1rem;color:var(--ink-2)}
.status .dot{width:6px;height:6px;border-radius:50%;background:var(--maroon)}
.dark .status,.on-dark .status{border-color:var(--line-dark-2);color:rgba(255,255,255,.82)}
.dark .status .dot{background:var(--gold-dark)}

/* ---------- 15 · STEPS ---------------------------------------------------- */
.step .num{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--maroon)}
.step .rule-gold{width:100%;margin:var(--s3) 0 var(--s4)}

/* ---------- 16 · MOTION --------------------------------------------------- */
/* Gated on .js: with scripting off, nothing is ever hidden. Content that is
   invisible by default and revealed by script is one failed request away from
   a blank page. */
.js .reveal{opacity:0;transform:translateY(16px);
  transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease)}
.reveal.in{opacity:1;transform:none}
.js .stagger > *{opacity:0;transform:translateY(16px);
  transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease)}
.stagger.in > *{opacity:1;transform:none}
.stagger.in > *:nth-child(1){transition-delay:0ms}
.stagger.in > *:nth-child(2){transition-delay:70ms}
.stagger.in > *:nth-child(3){transition-delay:140ms}
.stagger.in > *:nth-child(4){transition-delay:210ms}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal,.stagger > *,.js .reveal,.js .stagger > *{opacity:1!important;transform:none!important}
}

/* ---------- 17 · HILT BRAND STATE ---------------------------------------
   Applies when hostname === 'hilt.ac' (or <html class="brand-hilt">).
   Swaps the masthead lockup and the endorsement line. Nothing else changes. */
.brand,.brand:hover{text-decoration:none;color:inherit}
.lockup{display:none;align-items:center;gap:.85rem;text-decoration:none}
.lockup img{height:1.55rem;width:auto;display:block}
.lockup .endorse{font-family:var(--mono);font-size:.625rem;text-decoration:none;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);border-left:1px solid var(--line-2);padding-left:.85rem;line-height:1.3}
.brand-humain .lockup{display:none}
.brand-hilt .brand-img{display:none}
.brand-hilt .lockup{display:flex}
.ftr .lockup .endorse{color:rgba(255,255,255,.6);border-left-color:rgba(255,255,255,.25)}

/* ---------- 18 · RESPONSIVE ---------------------------------------------- */
@media (max-width:960px){
  :root{--pad:24px;--gutter:24px}
  .col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11{grid-column:span 12!important}
  .grid > *{grid-column:span 12!important}
  .hero .grid{gap:var(--s7)}
}
@media (max-width:860px){
  .burger{display:block}
  .nav{position:fixed;inset:64px 0 auto 0;background:var(--paper);flex-direction:column;
    align-items:flex-start;gap:var(--s5);padding:var(--s7) 24px var(--s8);
    border-bottom:1px solid var(--line);transform:translateY(-10px);opacity:0;
    pointer-events:none;transition:all var(--t-panel) var(--ease)}
  .nav.open{transform:none;opacity:1;pointer-events:auto}
  .nav a{font-size:1.1rem}
  section{padding:var(--s8) 0}
}
@media (max-width:560px){
  .actions{flex-direction:column;align-items:stretch;gap:.75rem}
  .actions .btn{width:100%}
  .sec-head{flex-direction:column;gap:var(--s2)}
}
.actions{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;margin-top:var(--s6)}

/* ---------- 19 · PROOF BAND ------------------------------------------------
   Design slot. Figures supplied separately; treatment is locked.
   .is-empty kicks in until real numbers exist. */
.proof{border-block:1px solid var(--line);padding-block:var(--s7)}
.proof .stat .fig{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,3vw,2.6rem);
  line-height:1;color:var(--ink);letter-spacing:-.01em}
.proof.is-empty .stat .fig{color:var(--ink-3)}
.proof .stat .cap{font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-top:.55rem;display:block}
.proof .stat{border-left:1px solid var(--line);padding-left:var(--s5)}
.proof .slot-note{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--maroon);opacity:.75;margin-top:var(--s6);display:block}

/* ---------- 20 · WATERMARK -------------------------------------------------
   The brand device at scale. Fills the right columns on dark sections so the
   grid is never half-empty. Decorative only — aria-hidden. */
.watermark{position:absolute;right:-2%;top:50%;transform:translateY(-50%);
  width:min(38%,420px);aspect-ratio:22/12;background:#fff;opacity:.028;pointer-events:none;
  -webkit-mask:var(--caret) no-repeat center/contain;mask:var(--caret) no-repeat center/contain}

/* ============================================================================
   LAYER 2 — THE PUBLICATION SYSTEM
   The site is not a landing page. It is a published document that happens to
   be on the web. Format carries authority independent of content: a thing
   set like a journal inherits the credibility of journals. This layer is how
   thin copy and zero photography still read as substantial.
   ========================================================================= */

/* --- Rule weight hierarchy. Four weights, four meanings. Most sites have one. */
.r-major{height:3px;background:var(--ink);border:0;margin:0}
.r-section{height:1px;background:var(--ink);opacity:.85;border:0;margin:0}
.r-hair{height:1px;background:var(--line-2);border:0;margin:0}
.dark .r-major{background:#fff;opacity:.9}
.dark .r-section{background:#fff;opacity:.35}
.dark .r-hair{background:rgba(255,255,255,.16)}

/* A rule with the caret notched into it — the device, at architectural scale */
.r-caret{position:relative;height:3px;background:var(--ink);border:0;margin:0}
.r-caret::after{content:"";position:absolute;left:0;bottom:-1px;width:46px;height:24px;
  background:var(--paper);-webkit-mask:var(--caret-notch) no-repeat center/contain;mask:var(--caret-notch) no-repeat center/contain}
:root{--caret-rule:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 26"><path d="M1.5 24.5 L30 3 L58.5 24.5" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>')}
.r-caret .peak{position:absolute;left:0;bottom:0;width:46px;height:24px;background:var(--maroon);
  -webkit-mask:var(--caret) no-repeat center/contain;mask:var(--caret) no-repeat center/contain}

/* --- Folio bar: running head. Says "part of a larger body" on issue one. */
.folio{font-family:var(--mono);font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);display:flex;justify-content:space-between;gap:var(--s5);
  padding:.9rem 0;flex-wrap:wrap;max-width:none;width:100%}
.dark .folio{color:rgba(255,255,255,.56)}

/* --- Masthead. Not a hero. */
.masthead{padding-top:var(--s5)}
.masthead .name{font-family:var(--serif);font-weight:500;
  line-height:.86;letter-spacing:-.035em;color:var(--ink);
  /* Optical, not mathematical: the em box leaves far more room under the
     baseline than over the cap. These two em-based margins put equal air
     above and below the glyphs at every size. */
  margin:calc(var(--s4) + .105em) 0 calc(var(--s4) - .105em)}
.masthead .strap{font-family:var(--mono);font-size:clamp(.625rem,.85vw,.75rem);
  letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2);
  display:flex;justify-content:space-between;gap:var(--s4);padding:.85rem 0 2.1rem;flex-wrap:wrap;
  max-width:none;width:100%}   /* bottom pad clears the caret riding the rule below */

/* --- Marginalia. Zero landing pages do this; every serious journal does. */
.margin-note{font-family:var(--mono);font-size:.6875rem;line-height:1.75;letter-spacing:.01em;
  color:var(--ink-3);max-width:36ch}
.margin-note.tag{font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;line-height:1.6;max-width:none}
.dark .margin-note{color:rgba(255,255,255,.56)}

/* --- The lead. Editorial opening, not a hero block. */
.lead-h{font-family:var(--serif);font-weight:500;
  font-size:clamp(2.5rem,6.2vw,5.6rem);line-height:1.02;letter-spacing:-.022em}
.drop::first-letter{float:left;font-family:var(--serif);font-size:3.5em;line-height:.8;
  padding:.02em .08em 0 0;font-weight:500;color:var(--ink)}
@supports (initial-letter:3) or (-webkit-initial-letter:3){
  .drop::first-letter{float:none;font-size:inherit;line-height:inherit;padding:0 .1em 0 0;
    -webkit-initial-letter:3 3;initial-letter:3 3}
}

/* --- Numbered editorial items with hanging index. Density, not tiles. */
.entry{display:grid;grid-template-columns:auto 1fr;gap:var(--s5);padding:var(--s5) 0;
  border-top:1px solid var(--line-2)}
.dark .entry{border-top-color:rgba(255,255,255,.16)}
.entry .idx{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;color:var(--maroon);
  padding-top:.55rem}
.dark .entry .idx{color:var(--gold-dark)}
.entry:last-child{border-bottom:1px solid var(--line-2)}
.dark .entry:last-child{border-bottom-color:rgba(255,255,255,.16)}

/* --- Catalogue entry. Provenance formatting: lot number, title, spec table. */
.lot{padding:var(--s6) 0;border-top:1px solid var(--ink)}
.lot .lot-no{font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--maroon)}
.lot .lot-title{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,3.4vw,2.9rem);
  line-height:1.05;letter-spacing:-.015em;margin:.65rem 0 .5rem}
.spec-table{width:100%;border-collapse:collapse;margin-top:var(--s5)}
.spec-table th,.spec-table td{text-align:left;padding:.55rem 0;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;vertical-align:top}
.spec-table th{color:var(--ink-3);font-weight:500;width:38%}
.spec-table td{color:var(--ink)}
.dark .spec-table th,.dark .spec-table td{border-bottom-color:rgba(255,255,255,.14)}
.dark .spec-table th{color:rgba(255,255,255,.56)} .dark .spec-table td{color:#fff}

/* --- The record. Proof as a TABLE, not stat tiles.
   Tiles are a marketing form. Tables are an evidence form. */
.record{width:100%;border-collapse:collapse}
.record caption{text-align:left;font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);padding-bottom:var(--s4)}
.record th{text-align:left;font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);font-weight:500;padding:.7rem 1.5rem .7rem 0;
  border-bottom:1px solid var(--ink)}
.record td{padding:1rem 1.5rem 1rem 0;border-bottom:1px solid var(--line);vertical-align:baseline}
.record td.val{font-family:var(--serif);font-size:1.85rem;line-height:1;color:var(--ink);width:22%}
.record.is-empty td.val{color:var(--ink-3)}
.record td.src{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase}

/* --- Full-bleed. Breaking the container is a confidence signal. */
.bleed{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}

/* --- Colophon. Costs nothing; signals "made by people who care". */
.colophon{font-family:var(--mono);font-size:.6875rem;line-height:1.85;letter-spacing:.01em;
  color:rgba(255,255,255,.52);max-width:62ch}
.colophon strong{color:rgba(255,255,255,.78);font-weight:500;letter-spacing:.12em;text-transform:uppercase;font-size:.625rem}

@media (max-width:860px){
  .masthead .name{font-size:clamp(3.2rem,17vw,6rem)}
  .masthead .strap{gap:.35rem;letter-spacing:.22em}
  .folio{font-size:.5625rem;letter-spacing:.14em}
  .lead-h{font-size:clamp(2.2rem,9vw,3.4rem)}
  .entry{grid-template-columns:1fr;gap:var(--s2)}
  .drop::first-letter{font-size:3.2em}
}

/* ============================================================================
   LAYER 3 — COMPOSITION
   Layer 2 gave the vocabulary. This layer is how the page is SET.
   Three rules govern it:
   1. Irregular rhythm. Uniform section padding is the tell of a template.
   2. One very large thing, one very small thing, nothing mushy in between.
   3. Exactly one dense moment. Density is what "there is substance here"
      looks like before anyone has read a word.
   ========================================================================= */

html{overflow-x:clip}          /* lets .bleed break the container without a scrollbar */
html.has-inertia{scroll-behavior:auto}  /* a per-frame lerp and smooth scroll fight each other */

/* --- Section rhythm. Chosen per section, never global. -------------------- */
.s-xs{padding:var(--s6) 0}
.s-sm{padding:var(--s7) 0}
.s-md{padding:var(--s8) 0}
.s-lg{padding:var(--s10) 0}
.s-flush{padding:0}
.s-top-0{padding-top:0}

/* Header suppression on the home page is GONE. It existed because the
   page-filling masthead was the identity; with the masthead removed, the
   wordmark in the header is the only mark on the screen and must always
   be visible. */

/* --- The masthead rule stack ---------------------------------------------- */
.name-box{container-type:inline-size}
.masthead .name{display:block;text-align:left;white-space:nowrap;
  font-size:30cqw}   /* Measured: "Humaîn" sets 3.317em wide in Newsreader Medium
                        at -.035em tracking. 100/3.317 = 30.15 — 30 fills the
                        measure and leaves a hair of optical margin. Re-measure
                        if the string, the weight or the tracking changes. */
.masthead .name .ai{color:var(--maroon)}

/* --- A rule with the house mark riding it, at architectural scale ---------
   Full-bleed; the caret aligns to the left edge of the TEXT column, not the
   viewport, so the device stays on the grid even when the rule is not. */
.crule{position:relative;height:3px;background:var(--ink);border:0;margin:0;overflow:visible}
.crule::after{content:"";position:absolute;bottom:0;width:60px;height:26px;
  left:max(var(--pad),calc(50% - (var(--max) / 2) + var(--pad)));
  background:var(--maroon);
  -webkit-mask:var(--caret-rule) no-repeat center bottom/60px 26px;
  mask:var(--caret-rule) no-repeat center bottom/60px 26px}
.dark .crule{background:#fff}
.dark .crule::after{background:var(--gold-dark)}

/* --- Contents. A one-page site with a table of contents is a document,
   not a landing page — and the anchors are real navigation. ---------------- */
.toc{border-top:2px solid var(--ink);padding-top:var(--s4)}
.toc ol{list-style:none;margin:0;padding:0}
.toc .toc-t{font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:var(--s3)}
.toc li{border-bottom:1px solid var(--line)}
.toc a{display:grid;grid-template-columns:2.1rem 1fr;align-items:baseline;gap:.4rem;
  padding:.62rem 0;font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2);text-decoration:none;
  transition:color var(--t-hover) var(--ease)}
.toc a .n{color:var(--ink-3)}
.toc a:hover,.toc a:hover .n{color:var(--maroon)}

/* --- Theses. Roman numerals, hanging. Set upright, not italic: three
   consecutive italic statements read as shouting. ------------------------- */
.thesis{display:grid;grid-template-columns:2.4rem 1fr;gap:var(--s5);
  padding:var(--s6) 0;border-top:1px solid rgba(255,255,255,.18)}
.thesis:last-of-type{border-bottom:1px solid rgba(255,255,255,.18)}
.thesis .num{font-family:var(--mono);font-size:.6875rem;letter-spacing:.18em;
  color:var(--gold-dark);padding-top:.95rem}
.thesis p{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.45rem,2.9vw,2.3rem);line-height:1.3;letter-spacing:-.008em;
  color:#fff;max-width:30ch}
/* The vertical hairline that used to fill the empty right third is gone:
   there is a plate in that space now. */
.theses{position:relative}

/* --- Catalogue lot, laid out. Full width, not a card in a row of cards. --- */
.lot{border-top:2px solid var(--ink);padding:var(--s7) 0}
.lot:last-of-type{border-bottom:2px solid var(--ink)}
.lot .lot-lede{font-size:1.05rem;line-height:1.62;color:var(--ink-2);max-width:44ch;
  margin-top:var(--s4)}

/* --- Provenance. The record of what this is, in the form a catalogue uses.
   Not statistics — statistics we do not yet have. Provenance we do. ------- */
.prov{width:100%;border-collapse:collapse}
.prov tr:first-child th,.prov tr:first-child td{border-top:2px solid var(--ink)}
.prov th{width:26%;text-align:left;font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:500;
  padding:.95rem 1.5rem .95rem 0;border-bottom:1px solid var(--line);vertical-align:baseline}
.prov td{padding:.95rem 0;border-bottom:1px solid var(--line);font-size:.98rem;
  color:var(--ink);vertical-align:baseline}
.prov td .num-lg{font-family:var(--serif);font-size:1.75rem;line-height:1;letter-spacing:-.01em}
/* Source column. A figure without an attribution is a claim; a figure with one
   is a record. This column is the difference. */
.prov td.src{width:32%;font-family:var(--mono);font-size:.625rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.6}
.prov tr.fig td{padding-top:1.15rem;padding-bottom:1.15rem}
.prov td.src:empty{padding:0}
.prov td.slot{font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--maroon);opacity:.8}

/* --- The invitation. One line, very large, almost nothing else. ---------- */
.invite h2{font-family:var(--serif);font-weight:500;
  font-size:clamp(2.6rem,6.6vw,5.8rem);line-height:1;letter-spacing:-.025em;max-width:13ch}

@media (max-width:960px){
  .lot .lot-lede{max-width:none}
}
@media (max-width:860px){
  .cta-hdr .lg{display:none}
  .cta-hdr .sm{display:inline}
  .folio{flex-direction:column;gap:.3rem;padding:.75rem 0}
  .masthead .strap{flex-direction:column;gap:.3rem}
  .thesis{grid-template-columns:3rem 1fr;gap:var(--s4);padding:var(--s5) 0}
  .thesis .num{padding-top:.55rem;font-size:.6875rem}
  .prov{display:block}
  .prov tbody,.prov tr{display:block}
  .prov th,.prov td{display:block;width:auto;border-bottom:0;padding:.15rem 0}
  .prov tr{border-bottom:1px solid var(--line);padding:.9rem 0}
  .prov tr:first-child{border-top:2px solid var(--ink)}
  .prov tr:first-child th,.prov tr:first-child td{border-top:0}
  .prov th{font-size:.625rem;color:var(--ink-3)}
  .prov td.src{padding-top:.35rem}
  .prov td.src:empty{display:none}
  .s-lg{padding:var(--s8) 0}
  .s-md{padding:var(--s7) 0}
}

/* Watermark, section-scale. Present enough to be read as intent, quiet
   enough never to compete with the theses beside it. */
.watermark.is-strong{opacity:.05;width:min(34%,430px);right:-9%;top:56%}

/* Smallest phones: the header carries a wordmark, a CTA and a menu in 272px. */
@media (max-width:400px){
  .hdr .wrap{gap:var(--s2)}
  .hdr-actions{gap:var(--s2)}
  .brand img{height:30px}
  .hdr.is-scrolled .brand img{height:26px}
  .cta-hdr{padding:.58rem .8rem;font-size:.75rem}
  .burger{padding:6px}
  .burger span{width:20px}
}
@media (max-width:340px){
  .cta-hdr .sm{font-size:0}                 /* label collapses; the pill stays a target */
  .cta-hdr .sm::after{content:"Test";font-size:.75rem}
}

/* ============================================================================
   LAYER 4 — HILT
   The endorsed brand gets the same publication grammar and a different
   letterform: Humaîn is set in the serif, HILT in the sans. Same system,
   two voices — masterbrand and institute.
   ========================================================================= */

/* HILT masthead. The caret sits over the I, not over the centre of the word. */
/* Two-part masthead: the acronym and the name it stands for, set side by side.
   Filling the measure with four bold capitals makes a poster; an institute
   needs the acronym AND the words behind it. */
.hilt-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s7);flex-wrap:wrap}
.hilt-name{font-family:var(--sans);font-weight:700;letter-spacing:.005em;line-height:.78;
  color:var(--ink);white-space:nowrap;display:block;
  font-size:20cqw;     /* "HILT" sets 2.293em wide in General Sans Bold — this
                          holds it at ~46% of the measure, leaving the other
                          half for the full name. */
  /* Top margin carries the caret clear of the rule above it. */
  margin:calc(var(--s5) + .162em) 0 calc(var(--s4) - .015em)}
.hilt-full{font-family:var(--serif);font-weight:500;
  font-size:clamp(1.35rem,2.5vw,2.3rem);line-height:1.14;letter-spacing:-.012em;
  /* Set so the last line sits on HILT's baseline, not near it. */
  color:var(--ink);text-align:right;max-width:none;margin-bottom:0}

/* Reply coupon. A form set as a form — ruled, titled, on its own stock. */
.coupon{border:1px solid var(--ink);background:var(--surface);
  padding:var(--s6) var(--s6) var(--s7)}
.coupon .coupon-head{display:flex;justify-content:space-between;gap:var(--s5);max-width:none;width:100%;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);border-bottom:1px solid var(--ink);padding-bottom:.85rem;margin-bottom:var(--s6);
  flex-wrap:wrap}

/* Questions as ruled rows, not as cards. Cards are a product form; a ruled
   list is a reference form, and this page is a reference. */
details.qa{border:0;border-top:1px solid var(--line-2);border-radius:0;background:none;
  margin:0;overflow:visible}
details.qa:last-of-type{border-bottom:1px solid var(--line-2)}
details.qa .acc-head{padding:var(--s5) 0}
details.qa .acc-body{padding:0 0 var(--s5);border-top:0}
details.qa .h4{font-family:var(--serif);font-weight:500;font-size:1.22rem;line-height:1.35}
details.qa:hover{border-color:var(--line-2)}

/* Admission steps: numbered editorial entries, not three tiles in a row. */
.entry h3{font-family:var(--serif);font-weight:500;font-size:1.45rem;line-height:1.2;
  letter-spacing:-.01em}
.entry .entry-body{max-width:52ch;margin-top:.5rem}

@media (max-width:860px){
  .hilt-name{font-size:34cqw;margin:calc(var(--s4) + .19em) 0 calc(var(--s3) - .015em)}
  .hilt-full{text-align:left;font-size:1.35rem;margin-bottom:var(--s4)}
  .hilt-head{gap:var(--s4)}
  .coupon{padding:var(--s5) var(--s5) var(--s6)}
}

/* ============================================================================
   LAYER 5 — PLATES AND MOTION
   Sep 9 review: too text-heavy, too many places to go, the display type too
   bold up front, and "it still gives the feel that this is AI — maybe because
   it doesn't have a lot of images."
   So: the page is no longer carried by type alone. Images carry it, type
   directs it, and motion replaces the paragraphs that used to fill the space.
   ========================================================================= */

/* --- PLATES ---------------------------------------------------------------
   "Plate" is the publication word for an image, and the word matters: a plate
   is placed and captioned, not dropped in. One treatment for every image so
   founder photography and commissioned conceptual work sit on the same page
   without a seam. */
.plate{position:relative;overflow:hidden;margin:0;background:rgba(34,38,42,.06);
  --curtain:var(--paper)}
.dark .plate,.on-dark .plate{--curtain:var(--black);background:rgba(255,255,255,.06)}
.plate img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.86) contrast(1.02)}
/* Tint: pulls every photograph onto the same ink-on-paper ground. */
.plate::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(34,38,42,.05) 0%,rgba(34,38,42,.16) 100%);
  mix-blend-mode:multiply}
/* Grain: the same craft layer the dark sections carry. */
.plate .grain{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.055;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="p"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3"/></filter><rect width="140" height="140" filter="url(%23p)"/></svg>')}
.r45{aspect-ratio:4/5}.r32{aspect-ratio:3/2}.r11{aspect-ratio:1/1}.r169{aspect-ratio:16/9}
.plate-cap{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-top:.8rem;display:block}
.dark .plate-cap{color:rgba(255,255,255,.56)}

/* Art-direction slot: a photograph that has to be shot, specified rather than
   faked. Styled so it reads as a decision, not a broken image. */
.plate.is-slot{background:rgba(34,38,42,.035);border:1px solid var(--line-2);
  display:grid;align-content:center;padding:var(--s6)}
.plate.is-slot::after{display:none}
.plate.is-slot .spec{font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);line-height:2;max-width:34ch}
.plate.is-slot .spec strong{color:var(--maroon);font-weight:500;display:block;margin-bottom:.5rem}

/* Sticky plate — the image holds while the argument scrolls past it. */
.sticky-plate{position:sticky;top:104px}

/* --- FIGURES BAND — three numbers, three sources, one rule ---------------
   Replaces the nine-row record table. A figure without an attribution is a
   claim; the caption under each number is what keeps this evidence. */
.figures{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s7);
  border-top:2px solid var(--ink);padding-top:var(--s6)}
.figures .f-n{font-family:var(--serif);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(2.6rem,5.2vw,4.4rem);line-height:.95;color:var(--ink);display:block}
.figures .f-l{font-family:var(--sans);font-weight:500;font-size:.95rem;color:var(--ink);
  display:block;margin-top:.7rem}
.figures .f-s{font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);display:block;margin-top:.35rem}

/* --- MOTION ---------------------------------------------------------------
   Every effect below is gated twice: on html.js (so nothing is hidden when
   scripting fails) and on prefers-reduced-motion (so nothing moves when the
   reader has asked it not to). */
.js .rv{opacity:0;transform:translateY(14px);
  transition:opacity 680ms var(--ease),transform 680ms var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv-1.in{transition-delay:80ms}.js .rv-2.in{transition-delay:160ms}
.js .rv-3.in{transition-delay:240ms}.js .rv-4.in{transition-delay:320ms}

/* Display type rises out of a clip, the way a line is set. */
.js .clip{overflow:hidden;display:block}
.js .clip > span{display:block;transform:translateY(108%);
  transition:transform 900ms var(--ease)}
.js .clip.in > span{transform:none}

/* Rules draw from the left, at the weight they will hold. */
.js .draw{transform:scaleX(0);transform-origin:left center;
  transition:transform 820ms var(--ease)}
.js .draw.in{transform:scaleX(1)}

/* Plates: a curtain in the ground colour lifts, and the image settles out of
   a slight over-scale. Reads as a print being placed rather than loaded. */
.js .plate .curtain{position:absolute;inset:0;z-index:4;background:var(--curtain);
  transform-origin:bottom;transition:transform 980ms var(--ease)}
.js .plate.in .curtain{transform:scaleY(0)}
.js .plate img{transform:scale(1.07);transition:transform 1400ms var(--ease)}
.js .plate.in img{transform:scale(1)}
/* Hover only where the plate is a link target. */
.lot:hover .plate img,.plate-link:hover img{transform:scale(1.035)}

/* Scroll progress: a hairline of maroon under the masthead. */
.progress{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--maroon);
  z-index:2;transition:width 90ms linear}

/* The caret on the caret-rule scales up out of the rule it belongs to. */
.js .crule::after{transform:scaleY(0);transform-origin:bottom;
  transition:transform 620ms var(--ease)}
.js .crule.in::after{transform:scaleY(1)}

@media (prefers-reduced-motion:reduce){
  .js .rv,.js .clip > span,.js .draw,.js .plate img,.js .plate .curtain,
  .js .crule::after{opacity:1!important;transform:none!important;transition:none!important}
  .js .plate .curtain{display:none}
  .progress{display:none}
  .sticky-plate{position:static}
}

@media (max-width:960px){
  .figures{grid-template-columns:1fr;gap:var(--s5)}
  .figures > *{border-top:1px solid var(--line);padding-top:var(--s4)}
  .figures > *:first-child{border-top:0;padding-top:0}
  .sticky-plate{position:static}
}

/* --- HILT lockup at hero scale -------------------------------------------
   The acronym still leads the page, at lockup scale rather than masthead
   scale. Same object as the header mark, same caret over the I. */
.hilt-lockup{display:flex;align-items:center;gap:1rem;max-width:none;margin:0}
.hilt-name.sm{height:2.4rem;width:auto;margin:0;line-height:1;display:block}
.hilt-lockup .endorse-line{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.5;
  border-left:1px solid var(--line-2);padding-left:1rem}
@media (max-width:400px){ .hilt-name.sm{height:2rem} }

/* ============================================================================
   LAYER 6 — INSTRUMENT DETAIL
   The entrances were the first pass. This layer is the second: the things a
   reader never names but always feels. Every one of them is native to a
   publication — press marks, running heads, registration, focus — and none of
   them is native to an agency showreel. The Sep 8 rule still governs:
   clean and familiar over futuristic.
   ========================================================================= */

/* --- 1 · The page is authored down to the selection ---------------------- */
::selection{background:rgba(122,33,48,.16);color:var(--ink)}
.dark ::selection,.on-dark ::selection{background:rgba(219,182,91,.24);color:#fff}
.input{caret-color:var(--maroon)}
html{scrollbar-color:rgba(34,38,42,.28) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(34,38,42,.22);border:3px solid var(--paper);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:rgba(34,38,42,.38)}

/* --- 2 · Letterpress. The primary action is a physical object ------------ */
.btn-primary{box-shadow:0 1px 0 rgba(0,0,0,.10)}
.btn-primary:active{transform:translateY(1px);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.22),0 0 0 rgba(0,0,0,0)}

/* --- 3 · The scroll rule, with the house mark riding its leading edge ----
   The device does a job instead of decorating one. */
.progress{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--maroon);
  z-index:2;transition:width 90ms linear}
.progress::after{content:"";position:absolute;right:-20px;bottom:-1px;width:22px;height:12px;
  background:var(--maroon);
  -webkit-mask:var(--caret-logo) no-repeat center/contain;mask:var(--caret-logo) no-repeat center/contain;
  transform:translate(0px,-1px)}
/* Where the browser supports it, the bar is driven by the compositor rather
   than a scroll handler — same look, no main-thread work. */
@supports (animation-timeline: scroll()){
  .progress{width:0;animation:prog linear both;animation-timeline:scroll(root block);transition:none}
  @keyframes prog{from{width:0}to{width:100%}}
}

/* --- 4 · Running head. On scroll the header names where you are, the way a
   verso page does. Two words; the only text this layer adds. Delete the
   .running-head span to remove it. ---------------------------------------- */
.hdr-left{display:flex;align-items:center;min-width:0}
.running-head{font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap;
  border-left:1px solid var(--line-2);padding-left:.9rem;margin-left:.9rem;
  opacity:0;transform:translateY(3px);
  transition:opacity var(--t-ui) var(--ease),transform var(--t-ui) var(--ease)}
.hdr.is-scrolled .running-head{opacity:1;transform:none}
@media (max-width:1100px){.running-head{display:none}}

/* --- 5 · Plates: registration marks mean "this plate is a door" ----------
   Printer's corner marks fade in on the plates that lead somewhere. The ones
   that are purely editorial never show them, so the mark carries meaning. */
.plate-link .marks span{position:absolute;width:15px;height:15px;z-index:5;opacity:0;
  border-color:rgba(255,255,255,.85);transition:opacity var(--t-ui) var(--ease)}
.plate-link .marks span:nth-child(1){top:12px;left:12px;border-left:1px solid;border-top:1px solid}
.plate-link .marks span:nth-child(2){top:12px;right:12px;border-right:1px solid;border-top:1px solid}
.plate-link .marks span:nth-child(3){bottom:12px;left:12px;border-left:1px solid;border-bottom:1px solid}
.plate-link .marks span:nth-child(4){bottom:12px;right:12px;border-right:1px solid;border-bottom:1px solid}
.lot:hover .plate-link .marks span,.lot:focus-within .plate-link .marks span{opacity:1}

/* --- 6 · Plates: LQIP behind, cursor parallax inside ---------------------
   --lq is a 24px inline placeholder, so the frame is never empty on a slow
   connection. --px/--py are set by the pointer; the image leans against the
   cursor by a few pixels and nothing else moves. */
.plate::before{content:"";position:absolute;inset:-10px;z-index:0;
  background:var(--lq) center/cover no-repeat;filter:blur(16px);transform:scale(1.05)}
.plate img{position:relative;z-index:1;
  transform:scale(var(--ps,1)) translate3d(var(--px,0px),var(--py,0px),0)}
.js .plate img{--ps:1.07}
.js .plate.in img{--ps:1}
.lot:hover .plate img,.plate-link:hover img{--ps:1.035}
.plate img{transition:transform 1400ms var(--ease)}
.plate.is-pointing img{transition:transform 260ms cubic-bezier(.22,1,.36,1)}

/* --- 7 · The whole lot is the target ------------------------------------ */
.lot{position:relative}
.lot .tlink::after{content:"";position:absolute;inset:0;z-index:6}
.lot:hover .lot-title{color:var(--maroon)}
.lot-title{transition:color var(--t-ui) var(--ease)}
.lot:hover .tlink .arw,.lot:focus-within .tlink .arw{transform:translateX(4px)}

/* --- 8 · Links underline by drawing, not by decorating ------------------- */
.tlink{position:relative;text-decoration:none}
.tlink:hover{text-decoration:none}
.tlink .arw{transition:transform var(--t-ui) var(--ease)}
.tlink::before{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left center;
  transition:transform 320ms var(--ease)}
.tlink:hover::before,.lot:hover .tlink::before,.tlink:focus-visible::before{transform:scaleX(1)}

/* --- 9 · The argument reads one thesis at a time -------------------------
   The line crossing the middle of the screen is at full strength; the others
   stand down. A reading aid, not an effect. */
.js .thesis p,.js .thesis .num{transition:opacity 520ms var(--ease),color 520ms var(--ease)}
.js .theses.is-live .thesis p{opacity:.38}
.js .theses.is-live .thesis .num{opacity:.4}
.js .theses.is-live .thesis.is-active p,
.js .theses.is-live .thesis.is-active .num{opacity:1}

/* --- 10 · Cross-page transitions ----------------------------------------
   Humain → HILT morphs instead of flashing white. Native, progressive, and
   invisible where unsupported. Needs to be served over http(s), not file://. */
@view-transition{navigation:auto}
.hdr{view-transition-name:site-header}
.ftr{view-transition-name:site-footer}
::view-transition-group(root){animation-duration:420ms}
::view-transition-old(root){animation:vt-out 260ms var(--ease) both}
::view-transition-new(root){animation:vt-in 420ms var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}

@media (prefers-reduced-motion:reduce){
  .plate::before{display:none}
  .plate img{transition:none!important;--ps:1!important;--px:0px!important;--py:0px!important}
  .js .theses.is-live .thesis p,.js .theses.is-live .thesis .num{opacity:1!important}
  .running-head{transition:none}
  @view-transition{navigation:none}
  .progress::after{display:none}
}

/* ============================================================================
   LAYER 7 — THE OVERTURE & THE QUESTIONS
   Settled behaviour (formerly URL-switchable experiments, now decided):
     the overture runs once ever, per browser, on first visit; scrolling is
     always smooth; the email gate always sits last, after the three
     questions.
   ========================================================================= */

/* --- 1 · THE OVERTURE ----------------------------------------------------
   Not a loader. A press moment: the rule draws, the name sets, the caret
   ticks, the sheet lifts. ~1.6s, skippable on any key or click, once ever
   per browser (not once per session). This is where the masthead we
   retired earns its keep — as an entrance rather than a header. Injected
   by script, so with JS off it cannot exist and cannot trap the page. */
.overture{position:fixed;inset:0;z-index:9999;background:var(--paper);
  display:grid;place-items:center;overflow:hidden}
.overture .ov-inner{width:min(var(--max),92vw);padding:0 var(--pad)}
.overture .ov-rule{height:3px;background:var(--ink);transform:scaleX(0);
  transform-origin:left center;transition:transform 720ms cubic-bezier(.65,0,.35,1)}
.overture .ov-box{container-type:inline-size;overflow:hidden}
.overture .ov-name{font-family:var(--serif);font-weight:500;font-size:30cqw;
  line-height:.86;letter-spacing:-.035em;color:var(--ink);white-space:nowrap;
  margin:calc(var(--s4) + .105em) 0 calc(var(--s4) - .105em);display:block;
  transform:translateY(106%);transition:transform 900ms var(--ease)}
.overture .ov-name .ai{color:var(--maroon)}
.overture .ov-strap{font-family:var(--mono);font-size:.625rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ink-3);opacity:0;
  transition:opacity 500ms var(--ease);display:flex;justify-content:space-between;
  gap:var(--s4);padding-top:.9rem;border-top:1px solid var(--line-2);flex-wrap:wrap}
.overture.is-2 .ov-rule{transform:scaleX(1)}
.overture.is-3 .ov-name{transform:none}
.overture.is-4 .ov-strap{opacity:1}
.overture.is-out{transform:translateY(-100%);
  transition:transform 760ms cubic-bezier(.76,0,.24,1)}
.overture .ov-skip{position:absolute;bottom:var(--s6);left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:.5625rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);background:none;border:0;cursor:pointer;opacity:0;
  transition:opacity 400ms var(--ease)}
.overture.is-2 .ov-skip{opacity:.7}
html.ov-lock,html.ov-lock body{overflow:hidden}
@media (max-width:860px){.overture .ov-strap{font-size:.5rem;letter-spacing:.16em}}

/* --- 2 · THE QUESTIONS ---------------------------------------------------
   Not a teaser and not a quiz: these ARE the first three questions of the
   assessment, moved upstream of the email gate. Nothing is scored here and
   nothing is invented — the gate simply moves from step 0 to step 3. */
/* In the questions variant the headline shares the row with the card, so it
   comes down from poster scale to column scale. */
[data-variant="ask-first"] h2{font-size:clamp(2.2rem,3.6vw,3.2rem);line-height:1.04;max-width:12ch}
.quiz{border:1px solid var(--ink);background:var(--surface);padding:var(--s6)}
.quiz-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);
  border-bottom:1px solid var(--ink);padding-bottom:.85rem;margin-bottom:var(--s5)}
.q-count{font-family:var(--mono);font-size:.625rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3)}
.q-count b{color:var(--maroon);font-weight:500}
.q-ticks{display:flex;gap:.4rem}
.q-ticks i{width:16px;height:9px;background:var(--line-2);display:block;
  -webkit-mask:var(--caret) no-repeat center/contain;mask:var(--caret) no-repeat center/contain;
  transition:background var(--t-ui) var(--ease)}
.q-ticks i.on{background:var(--maroon)}
.q-list{position:relative;min-height:196px}
.q{position:absolute;inset:0;opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity 380ms var(--ease),transform 380ms var(--ease)}
.q.is-live{opacity:1;pointer-events:auto;transform:none;position:relative}
.q-t{font-family:var(--serif);font-weight:500;font-size:clamp(1.15rem,1.7vw,1.42rem);
  line-height:1.3;letter-spacing:-.008em;color:var(--ink);max-width:28ch;margin-bottom:var(--s5)}
.q-opts{display:grid}
.q-o{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  width:100%;text-align:left;font:inherit;font-size:.95rem;color:var(--ink);
  background:none;border:0;border-top:1px solid var(--line);padding:.9rem 0;cursor:pointer;
  transition:color var(--t-hover) var(--ease),padding var(--t-ui) var(--ease)}
.q-o:last-child{border-bottom:1px solid var(--line)}
.q-o::after{content:"";width:14px;height:8px;flex:none;background:var(--line-2);
  -webkit-mask:var(--caret) no-repeat center/contain;mask:var(--caret) no-repeat center/contain;
  transform:rotate(90deg);transition:background var(--t-ui) var(--ease),transform var(--t-ui) var(--ease)}
.q-o:hover{color:var(--maroon);padding-left:.5rem}
.q-o:hover::after{background:var(--maroon);transform:rotate(90deg) translateY(-3px)}
.q-o.is-picked{color:var(--maroon)}
.q-done{opacity:0;transform:translateY(10px);
  transition:opacity 420ms var(--ease),transform 420ms var(--ease)}
.q-done.in{opacity:1;transform:none}
.q-done .field{margin-top:var(--s5)}
.q-row{display:flex;gap:var(--s3);align-items:flex-end;flex-wrap:wrap}
.q-row .field{flex:1 1 15rem;margin:0}

@media (max-width:860px){
  .q-list{min-height:0}
}
@media (prefers-reduced-motion:reduce){
  .overture{display:none!important}
  .q{transition:none}
}