/* ============================================================
   FABER, core stylesheet
   Dark editorial system. Monochrome, hairline rules, big type.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  --bg:           #000000;
  --bg-raised:    #0b0b0b;
  --bg-panel:     #0e0e0e;

  --ink:          #f3f1ee;
  --ink-dim:      rgba(243, 241, 238, 0.68);
  --ink-faint:    rgba(243, 241, 238, 0.52);
  --ink-ghost:    rgba(243, 241, 238, 0.14);

  --line:         rgba(243, 241, 238, 0.14);
  --line-soft:    rgba(243, 241, 238, 0.07);

  /* Bodoni is beautiful but its hairlines vanish on black at heading size,
     so it is now reserved for the FABER wordmark alone. Headings use a
     screen-drawn editorial serif with far less stroke contrast.
     To try a different heading face, change --display only:
       "Instrument Serif" , more dramatic, thinner, closer to Bodoni
       "Fraunces"         , warmer, chunkier, more personality
       "Archivo"          , a grotesque; maximum clarity, less classic
     (and add the family to the Google Fonts <link> in each page's head). */
  --wordmark: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:    "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gut:     clamp(20px, 5vw, 64px);
  --maxw:    1320px;
  --ease:    cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Film grain. Painted into the body background rather than a fixed overlay:
   a full-viewport fixed layer forces the whole page to recomposite on every
   scroll frame, which is what caused the smearing and ghosting. */

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

::selection { background: var(--ink); color: var(--bg); }

/* ---------- 2. Type ---------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;              /* white-on-black eats stroke weight */
  font-optical-sizing: auto;
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 0;
}

.h-display {
  font-size: clamp(2.9rem, 8.5vw, 7rem);
  line-height: 0.96;
}
.h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); }
.h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); }
.h3 { font-size: clamp(1.35rem, 2.2vw, 1.85rem); line-height: 1.2; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  line-height: 1.6;
  color: var(--ink-dim);
  font-weight: 300;
  max-width: 62ch;
}

.body-dim { color: var(--ink-dim); }
.measure  { max-width: 68ch; }
.measure-tight { max-width: 52ch; }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 26px;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-soft);
}
.eyebrow--plain::after { display: none; }
.eyebrow { flex-wrap: wrap; row-gap: 4px; }
@media (max-width: 560px) {
  .eyebrow { letter-spacing: 0.16em; font-size: 0.62rem; }
}

.meta {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.italic-note { font-family: var(--display); font-style: italic; color: var(--ink-dim); }

a { color: inherit; }

.link-u {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-ghost);
  padding-bottom: 2px;
  transition: border-color 0.35s var(--ease);
}
.link-u:hover { border-color: var(--ink); }

/* ---------- 3. Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
}

section { position: relative; }

.sec      { padding: clamp(72px, 11vw, 150px) 0; }
.sec--tight { padding: clamp(52px, 7vw, 96px) 0; }
.sec--line  { border-top: 1px solid var(--line-soft); }

.grid { display: grid; gap: clamp(28px, 4vw, 56px); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.g-split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.g-side  { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); }

@media (max-width: 900px) {
  .g-2, .g-3, .g-4, .g-split, .g-side { grid-template-columns: 1fr; }
}
@media (max-width: 900px) and (min-width: 600px) {
  .g-4 { grid-template-columns: repeat(2, 1fr); }
}

.stack-sm > * + * { margin-top: 12px; }
.stack    > * + * { margin-top: 22px; }
.stack-lg > * + * { margin-top: 40px; }

/* ---------- 4. Header ---------- */
.hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
  /* DO NOT add backdrop-filter, filter, transform, perspective or
     will-change:transform to this element. Any of them makes .hdr the
     containing block for its position:fixed children, so the closed mobile
     menu, which parks itself off-screen with translateY(-100%), would only
     move up by the height of this bar and its links would spill across the
     page. That was the ghost text scrolling over the hero. */
}
.hdr.is-stuck {
  background: #000;
  border-bottom-color: var(--line-soft);
}
.hdr__in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px var(--gut);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.mark {
  font-family: var(--wordmark);
  font-style: italic;          /* matches the printed masthead */
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
  line-height: 1;
}
.nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); }
.nav a {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-dim);
  position: relative;
  padding: 4px 0;
  transition: color 0.3s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--ink);
  transition: width 0.4s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after,
.nav a[aria-current="page"]::after { width: 100%; }
.nav a[aria-current="page"] { color: var(--ink); }

.burger {
  display: none;
  background: none;
  border: 0;
  padding: 10px;
  margin: -10px -6px -10px 0;
  cursor: pointer;
  color: var(--ink);
}
.burger span {
  display: block;
  width: 24px; height: 1px;
  background: currentColor;
  transition: transform 0.4s var(--ease), opacity 0.25s var(--ease);
}
.burger span + span { margin-top: 7px; }
body.menu-open { overflow: hidden; }
body.menu-open .burger span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 940px) {
  /* The open menu covers the viewport, so the wordmark and the close button
     have to sit above it or there is no way back out. */
  .burger { display: block; position: relative; z-index: 95; }
  .mark { position: relative; z-index: 95; }
  .nav {
    position: fixed;
    inset: 0;
    background: var(--bg);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding: 0 var(--gut);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.55s var(--ease), visibility 0.55s var(--ease);
    z-index: 90;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body.menu-open .nav { transform: translateY(0); visibility: visible; }
  .nav a {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(1.8rem, 8vw, 2.6rem);
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--ink);
    padding: 14px 0;
    width: 100%;
    border-bottom: 1px solid var(--line-soft);
  }
  .nav a::after { display: none; }
  .nav .btn { margin-top: 28px; width: auto; border-bottom: 1px solid var(--ink); }
}

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 30px;
  border: 1px solid var(--line);
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease);
  z-index: 0;
}
.btn { isolation: isolate; }
.btn span, .btn svg { position: relative; z-index: 1; }
.btn:hover { color: var(--bg); border-color: var(--ink); }
.btn:hover::before { transform: translateY(0); }

.btn--solid { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn--solid::before { background: transparent; }
.btn--solid:hover { background: transparent; color: var(--ink); }

.btn--wide { width: 100%; }
.btn--sm { padding: 12px 22px; font-size: 0.64rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- 5b. Overture, the landing wordmark ---------- */
/* A full-width FABER masthead that greets you and dissolves as you scroll, handing
   the name over to the small mark in the header. */
.overture {
  margin: 0;
  will-change: opacity, transform;
}
.overture svg { width: 100%; height: auto; display: block; }
.overture text { fill: var(--ink); }
.overture .ov-name {
  font-family: var(--wordmark);
  font-style: italic;
  font-weight: 700;
}
.overture .ov-sub {
  font-family: var(--wordmark);
  font-weight: 400;
}

/* Founding-members strip. Written as two full lines rather than fragments
   joined by separators, the separators disappeared at narrow widths and left
   the text reading as one run-on sentence. */
.founding-bar {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 16px 0 18px;
  margin-bottom: clamp(30px, 4.5vw, 52px);
  text-align: center;
}
.founding-bar__lead {
  font-family: var(--mono);
  font-size: clamp(0.78rem, 1.4vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 8px;
}
.founding-bar__lead .amt { white-space: nowrap; }
.founding-bar__lead s {
  color: var(--ink-faint);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  margin-right: 2px;
}
.founding-bar__sub {
  font-size: 0.88rem;
  color: var(--ink-dim);
  margin: 0;
  max-width: 62ch;
  margin-inline: auto;
}
@media (max-width: 560px) {
  .founding-bar__lead { font-size: 0.74rem; letter-spacing: 0.16em; }
  .founding-bar__sub { font-size: 0.82rem; }
}

.tier__was {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  text-decoration: line-through;
  margin-left: 4px;
}

/* The two primary actions sit directly under the masthead. They do NOT
   fade with it, the wordmark is decoration, these are the point. */
.overture-cta {
  justify-content: center;
  margin: clamp(26px, 3.6vw, 40px) 0 clamp(22px, 3vw, 32px);
}
@media (max-width: 560px) {
  .overture-cta { flex-direction: column; }
  .overture-cta .btn { width: 100%; }
}

/* On the home page the header mark stays out of the way until the big one
   has gone, so the name is never on screen twice. */
.hdr--home .mark {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
.hdr--home.mark-in .mark,
body.menu-open .hdr--home .mark { opacity: 1; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .overture { opacity: 1 !important; transform: none !important; }
  .hdr--home .mark { opacity: 1; pointer-events: auto; }
}

/* ---------- 6. Hero ---------- */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 88px 0 52px;
  position: relative;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
  width: 100%;
}
.hero__cover {
  position: relative;
  border: 1px solid var(--line-soft);
}
/* With the masthead and both calls to action above it, the cover no longer
   has to squeeze into one screen, it runs past the fold on purpose, which
   is what the Scroll cue is for. Fixed size beats a viewport calculation
   here: it stops the cover collapsing to a postage stamp on a laptop. */
.hero .hero__cover {
  max-width: min(100%, 430px);
  margin-left: auto;
}
.hero__cover img {
  width: 100%;
  filter: contrast(1.04);
}
.hero__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}
.hero__tag {
  position: absolute;
  bottom: -1px; left: -1px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  padding: 9px 16px;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--ink-dim);
}
/* The hero headline lives in a narrower column than a page head, so it
   needs its own ceiling or it breaks into five short lines. */
.hero .h-display { font-size: clamp(2.5rem, 5.4vw, 5rem); }

@media (max-width: 900px) {
  .hero { min-height: auto; padding: 92px 0 8px; }
  
  .hero__grid { grid-template-columns: 1fr; gap: 44px; }
  /* Text first on a phone, the cover follows immediately under the CTAs. */
  .hero__cover { max-width: 360px; }
  .hero .h-display { font-size: clamp(2.6rem, 11vw, 4rem); }
}

.scrim {
  position: absolute;
  left: var(--gut);
  bottom: 34px;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 12px;
}
.scrim::before {
  content: "";
  width: 34px; height: 1px;
  background: var(--ink-ghost);
}
@media (max-width: 900px) { .scrim { display: none; } }

/* ---------- 7. Cards & panels ---------- */
.card {
  border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0));
  padding: clamp(24px, 3vw, 38px);
  transition: border-color 0.45s var(--ease), background 0.45s var(--ease), transform 0.45s var(--ease);
  height: 100%;
}
.card:hover { border-color: var(--line); background: rgba(255,255,255,0.028); }

a.card { text-decoration: none; display: block; }
a.card:hover { transform: translateY(-3px); }

.card__no {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 22px;
}

.panel {
  border: 1px solid var(--line-soft);
  background: var(--bg-panel);
  padding: clamp(26px, 4vw, 52px);
}

.rule { height: 1px; background: var(--line-soft); border: 0; margin: 0; }

/* Numbered list of steps */
.steps { counter-reset: s; display: grid; gap: 0; }
.step {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 18px;
  padding: 26px 0;
  border-top: 1px solid var(--line-soft);
  align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--line-soft); }
.step__no {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  padding-top: 6px;
}
@media (max-width: 640px) {
  .step { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- 8. Pricing ---------- */
.tier {
  border: 1px solid var(--line-soft);
  padding: clamp(26px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  transition: border-color 0.45s var(--ease);
  position: relative;
}
.tier:hover { border-color: var(--line); }
.tier--feature { border-color: var(--ink-ghost); background: rgba(255,255,255,0.035); }
.tier__flag {
  position: absolute;
  top: -1px; right: -1px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  padding: 6px 12px;
  text-transform: uppercase;
}
.tier__name {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 24px;
}
.tier__price {
  font-family: var(--display);
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.tier__price small {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.tier__sub { color: var(--ink-faint); font-size: 0.84rem; margin-top: 10px; }
.tier ul {
  list-style: none;
  margin: 30px 0 34px;
  padding: 0;
  display: grid;
  gap: 13px;
  font-size: 0.93rem;
  color: var(--ink-dim);
}
.tier li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; }
.tier li::before { content: "\00B7"; color: var(--ink-faint); line-height: 1.6; font-size: 1.2em; }
.tier li.is-off { color: var(--ink-faint); }
.tier li.is-off::before { content: "×"; }
.tier .btn { margin-top: auto; }

/* ---------- 9. Prize table ---------- */
.prize {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: clamp(16px, 3vw, 40px);
  padding: 30px 0;
  border-top: 1px solid var(--line-soft);
  align-items: start;
}
.prize:last-of-type { border-bottom: 1px solid var(--line-soft); }
.prize__pos {
  font-family: var(--display);
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: 1;
  color: var(--ink);
}
.prize--2 .prize__pos, .prize--3 .prize__pos { color: var(--ink-dim); }
@media (max-width: 640px) { .prize { grid-template-columns: 1fr; gap: 10px; } }

/* ---------- 10. Forms ---------- */
.form { display: grid; gap: 26px; }
.field { display: grid; gap: 9px; }
.field label {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
  width: 100%;
  border-radius: 0;
  transition: border-color 0.35s var(--ease);
  appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
}
.field select option { background: #101010; color: var(--ink); }
.field textarea { min-height: 132px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-bottom-color: var(--ink); }
.field input::placeholder, .field textarea::placeholder { color: rgba(243, 241, 238, 0.30); }
.field .hint { font-size: 0.78rem; color: var(--ink-faint); }

.check {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 0.86rem;
  color: var(--ink-dim);
}
.check input { width: 16px; height: 16px; margin-top: 4px; accent-color: #fff; }

.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 640px) { .form-2 { grid-template-columns: 1fr; } }

:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.hp { position: absolute; left: -9999px; opacity: 0; }

/* ---------- 11. Directory / contact grid ---------- */
.dir {
  border: 1px solid var(--line-soft);
  padding: 26px;
  display: grid;
  gap: 8px;
}
.dir__name { font-family: var(--display); font-size: 1.25rem; }
.dir__cat {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.qr {
  width: 54px; height: 54px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.5rem;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
}

/* ---------- 12. FAQ ---------- */
.faq { border-top: 1px solid var(--line-soft); }
.faq details {
  border-bottom: 1px solid var(--line-soft);
}
.faq summary {
  font-weight: 500;
  list-style: none;
  cursor: pointer;
  padding: 24px 40px 24px 0;
  position: relative;
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  transition: color 0.3s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--ink-faint);
  transition: transform 0.35s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p {
  color: var(--ink-dim);
  padding: 0 40px 26px 0;
  max-width: 74ch;
  font-size: 0.95rem;
}

/* ---------- 13. Footer ---------- */
.ftr {
  border-top: 1px solid var(--line-soft);
  padding: clamp(56px, 8vw, 96px) 0 40px;
}
.ftr__mark {
  font-family: var(--wordmark);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(3.4rem, 16vw, 12rem);
  letter-spacing: 0.005em;
  line-height: 0.92;
  color: var(--ink);
  opacity: 0.92;
  margin-bottom: clamp(40px, 6vw, 72px);
  white-space: nowrap;
}
.ftr__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--line-soft);
}
@media (max-width: 780px) { .ftr__cols { grid-template-columns: 1fr 1fr; gap: 30px; } }
.ftr__cols h4 {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 16px;
  font-weight: 500;
}
.ftr__cols a, .ftr__cols p {
  display: block;
  text-decoration: none;
  color: var(--ink-dim);
  font-size: 0.9rem;
  margin-bottom: 9px;
  transition: color 0.3s var(--ease);
}
.ftr__cols a:hover { color: var(--ink); }
.ftr__fine {
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.ftr__fine a { text-decoration: none; color: var(--ink-faint); }
.ftr__fine a:hover { color: var(--ink); }

/* ---------- 14. Page head ---------- */
.phead { padding: clamp(132px, 17vw, 200px) 0 clamp(40px, 6vw, 72px); }
.phead .h-display { margin-bottom: 26px; }

/* ---------- 15. Reveal ---------- */
.rv { opacity: 0; transform: translateY(22px); }
.rv.in { opacity: 1; transform: none; transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv, .rv.in { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- 16. Utilities ---------- */
.tc { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.nowrap { white-space: nowrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--bg); padding: 12px 18px;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em;
}
.skip:focus { left: 12px; top: 12px; }