/* ============================================================
   COMPONENTS.CSS — chrome, twelve sections, footer
   VELLMARK FOODLAB · SATIA-30 (fictional design demonstration)

   Twelve screens, twelve skeletons. Nothing here is a variant
   of anything else on the page; if two sections look related,
   one of them is wrong.
   ============================================================ */

/* ============================================================
   Navigation
   ============================================================ */
.nav {
  position: fixed;
  top: var(--topbar-h);
  left: 0; right: 0;
  z-index: 1300;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: top var(--t-med) var(--ease-io),
              background var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease);
}

html.is-scrolled .nav {
  top: 0;
  background: rgba(20, 16, 12, 0.88);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 1px 0 var(--line), 0 10px 34px rgba(0, 0, 0, 0.44);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  width: 100%;
  max-width: var(--wrap-lg);
  margin: 0 auto;
  padding: 0 var(--sp-6);
}

.nav__brand { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }

.nav__logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Unit mark: amber capsule with a seam down the middle */
.nav__logo-mark {
  position: relative;
  width: 30px; height: 18px;
  border-radius: var(--r-pill);
  background: linear-gradient(112deg, var(--amber-lt), var(--amber) 45%, var(--ember) 100%);
  box-shadow: 0 0 16px var(--amber-glow);
  flex-shrink: 0;
}

.nav__logo-mark::after {
  content: '';
  position: absolute;
  top: 3px; bottom: 3px; left: 50%;
  width: 1.5px;
  transform: translateX(-50%);
  background: rgba(26, 19, 9, 0.62);
}

.nav__logo-text { display: flex; flex-direction: column; line-height: 1.05; }

.nav__logo-name {
  font-family: var(--font-serif);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

.nav__logo-sub {
  font-family: var(--font-mono);
  font-size: 0.53rem;
  letter-spacing: 0.26em;
  color: var(--amber);
  margin-top: 3px;
}

.nav__links { display: flex; align-items: center; gap: var(--sp-6); margin-left: auto; }

.nav__link {
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  padding: 6px 0;
  position: relative;
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1.5px;
  background: linear-gradient(90deg, var(--amber), var(--ember));
  transition: width var(--t-med) var(--ease);
}

.nav__link:hover { color: var(--text-primary); }
.nav__link:hover::after { width: 100%; }
.nav__link.is-active { color: var(--amber-lt); }
.nav__link.is-active::after { width: 100%; opacity: 0.75; }

.nav__cta {
  flex-shrink: 0;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--amber);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 8px 18px;
  transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}

.nav__cta:hover {
  background: var(--amber);
  border-color: var(--amber);
  color: #1c1202;
  box-shadow: 0 4px 22px var(--amber-glow-s);
}

.nav__progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: rgba(245, 166, 35, 0.08);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
}

html.is-scrolled .nav__progress { opacity: 1; }

.nav__progress i {
  display: block;
  height: 100%; width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--ember), var(--amber) 60%, var(--amber-lt));
  box-shadow: 0 0 12px var(--amber-glow-s);
}

.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px; height: 34px;
  margin-left: auto;
  flex-shrink: 0;
}

.nav__toggle span {
  display: block;
  height: 1.5px; width: 100%;
  background: var(--amber);
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}

.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-drawer {
  position: fixed;
  top: calc(var(--topbar-h) + var(--nav-h));
  left: 0; right: 0;
  z-index: 1250;
  /* The drawer hangs below the notice bar and the nav, so both
     have to come out of the height it is allowed — without the
     first term its last two items sit under the fold on a phone
     with nothing to scroll them into view. */
  max-height: calc(100vh - var(--topbar-h) - var(--nav-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(16, 13, 9, 0.975);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  padding: var(--sp-5) var(--sp-6) var(--sp-7);
  transition: top var(--t-med) var(--ease-io);
}

html.is-scrolled .nav-drawer { top: var(--nav-h); max-height: calc(100vh - var(--nav-h)); }
.nav-drawer[hidden] { display: none; }

.nav-drawer a {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  font-size: 0.95rem;
  color: var(--text-secondary);
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}

.nav-drawer a:hover { color: var(--amber); }

.nav-drawer a i {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  min-width: 3.4em;
}

/* ============================================================
   Buttons — internal language only. No commerce anywhere.
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 28px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease),
              transform var(--t-med) var(--ease);
}

.btn--solid {
  background: linear-gradient(102deg, var(--amber-lt) 0%, var(--amber) 42%, var(--ember) 100%);
  color: #1e1403;
  box-shadow: 0 6px 26px rgba(245, 166, 35, 0.24);
}

.btn--solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 34px rgba(255, 107, 53, 0.36);
  color: #1e1403;
}

.btn--ghost {
  background: rgba(245, 166, 35, 0.05);
  color: var(--amber);
  border-color: var(--line-strong);
}

.btn--ghost:hover {
  background: var(--amber-a14);
  border-color: var(--amber);
  color: var(--amber-lt);
  transform: translateY(-2px);
}

.btn__arrow { transition: transform var(--t-fast) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ============================================================
   Section shell
   ============================================================ */
.section {
  position: relative;
  z-index: 1;
  padding: var(--sp-11) 0;
}

.section--alt { background: var(--bg-surface); }
.section--tight { padding: var(--sp-10) 0; }
.section > .container { position: relative; z-index: 2; }

/* Section heads are optional furniture. Several screens have no
   kicker, one has no lede, one has no head at all. */
.shead { max-width: 760px; margin: 0 0 var(--sp-9); }
.shead--center { margin-left: auto; margin-right: auto; text-align: center; }
.shead--right  { margin-left: auto; text-align: right; }
.shead--wide   { max-width: 940px; }

.shead__kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line-strong);
}

.shead__title { margin-bottom: var(--sp-5); }

.shead__lede {
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.66;
  max-width: 62ch;
}

.shead--center .shead__lede { margin-left: auto; margin-right: auto; }
.shead--right  .shead__lede { margin-left: auto; }

/* Fiction / source footnote. Appears under any block that shows
   numbers, names or diagrams. */
.fnote {
  margin-top: var(--sp-8);
  padding: var(--sp-5) var(--sp-6);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: rgba(245, 166, 35, 0.045);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: none;
}

.fnote strong { color: var(--amber-lt); font-weight: 700; }
.fnote--tight { margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); }

/* House reference number — a build code, set apart from the
   specification list it belongs to. */
.refbox {
  margin-top: var(--sp-7);
  padding: var(--sp-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: rgba(255, 107, 53, 0.055);
}

.refbox__label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 6px;
}

.refbox__value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--amber-lt);
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-3);
}

.refbox__note { font-size: 0.73rem; line-height: 1.6; color: var(--text-muted); max-width: none; }

/* ============================================================
   Photograph layer system
   photo → amber wash → scrim → lab grid → content
   ============================================================ */
.section-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  isolation: isolate;
}

.section-photo__img {
  position: absolute;
  top: -12%; left: 0;
  width: 100%; height: 124%;    /* 12% of headroom reserved for parallax */
  object-fit: cover;
  object-position: center;
  filter: var(--grade-base);
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.section-photo__tint {
  position: absolute; inset: 0;
  background: var(--wash-amber);
  mix-blend-mode: soft-light;
}

.section-photo__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom,
      var(--scrim-edge) 0%, var(--scrim-core) 20%,
      var(--scrim-core) 80%, var(--scrim-edge) 100%),
    var(--scrim-base);
}

.section-photo__grid {
  position: absolute; inset: 0;
  background-image: var(--labgrid);
  opacity: 0.55;
}

.section--alt .section-photo { --scrim-edge: var(--bg-surface); }

/* --- placement variants --- */
.section-photo--half { width: 56%; }

.section-photo--half-right {
  left: auto; right: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.4) 22%, #000 56%);
          mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.4) 22%, #000 56%);
}

.section-photo--half-left {
  left: 0; right: auto;
  -webkit-mask-image: linear-gradient(to left, transparent 0%, rgba(0,0,0,0.4) 22%, #000 56%);
          mask-image: linear-gradient(to left, transparent 0%, rgba(0,0,0,0.4) 22%, #000 56%);
}

.section-photo--half .section-photo__scrim {
  background:
    linear-gradient(to bottom,
      var(--scrim-edge) 0%, rgba(20, 16, 12, 0.62) 16%,
      rgba(20, 16, 12, 0.62) 84%, var(--scrim-edge) 100%),
    rgba(20, 16, 12, 0.42);
}

.section-photo--band { bottom: auto; height: clamp(260px, 40vh, 440px); }

.section-photo--band .section-photo__scrim {
  background: linear-gradient(to bottom,
    var(--scrim-edge) 0%, rgba(20, 16, 12, 0.70) 26%,
    rgba(20, 16, 12, 0.90) 70%, var(--scrim-edge) 100%);
}

.section-photo--corner {
  -webkit-mask-image: radial-gradient(ellipse 76% 88% at 100% 6%, #000 0%, rgba(0,0,0,0.55) 42%, transparent 78%);
          mask-image: radial-gradient(ellipse 76% 88% at 100% 6%, #000 0%, rgba(0,0,0,0.55) 42%, transparent 78%);
}

.section-photo--corner .section-photo__scrim {
  background: linear-gradient(115deg,
    var(--scrim-edge) 0%, rgba(20, 16, 12, 0.80) 40%, rgba(20, 16, 12, 0.56) 100%);
}

/* ============================================================
   Photographic grades — no two adjacent screens share one
   ============================================================ */

/* 02 — the essay. Cold, hard, scan-lined: the only deliberately
   unappetising treatment on the page. */
.tone-scan .section-photo__img {
  filter: grayscale(0.78) contrast(1.22) brightness(0.98) saturate(0.45);
  object-position: center 44%;
}
.tone-scan .section-photo__tint {
  background: linear-gradient(140deg,
    rgba(162, 147, 127, 0.22) 0%, rgba(245, 166, 35, 0.10) 58%, rgba(20, 16, 12, 0.62) 100%);
  mix-blend-mode: normal;
}
.tone-scan .section-photo__grid {
  background-image: repeating-linear-gradient(0deg, rgba(247, 240, 230, 0.045) 0 1px, transparent 1px 4px);
  opacity: 0.9;
}

/* 03 — the object. Warmest screen; honey sits straight on the photo. */
.tone-amber .section-photo__img {
  filter: sepia(0.40) saturate(1.10) contrast(1.06) brightness(1.05);
  object-position: 62% center;
}
.tone-amber .section-photo__tint { mix-blend-mode: overlay; opacity: 0.86; }

/* 04 — mechanism. Blurred to pure light so the curve can own it. */
.tone-blur .section-photo__img {
  left: -8%; width: 116%;
  filter: sepia(0.45) saturate(1.2) blur(30px) contrast(1.16) brightness(0.92);
}
.tone-blur .section-photo__tint {
  background: linear-gradient(158deg, var(--amber) 0%, var(--ember) 46%, #3a2409 100%);
  mix-blend-mode: color;
  opacity: 0.72;
}
.tone-blur .section-photo__grid { opacity: 0.85; }

/* 05 — the science. Milled matrix, sharp and close. The only
   screen whose photograph is a texture rather than a subject,
   because three diagrams already own the surface. */
.tone-mill .section-photo__img {
  filter: sepia(0.34) saturate(1.05) contrast(1.18) brightness(0.58);
  object-position: 58% center;
}
.tone-mill .section-photo__tint {
  background: linear-gradient(142deg,
    rgba(245, 166, 35, 0.18) 0%, rgba(255, 107, 53, 0.10) 48%, rgba(20, 16, 12, 0.68) 100%);
  mix-blend-mode: soft-light;
}
.tone-mill .section-photo__grid { opacity: 0.6; }

/* 06 — effects. Full amber duotone, the closest thing to a spread. */
.tone-duotone .section-photo__img { filter: grayscale(1) contrast(1.16) brightness(0.95); }
.tone-duotone .section-photo__tint {
  background: linear-gradient(152deg, var(--amber-lt) 0%, var(--amber) 40%, #6b3a10 100%);
  mix-blend-mode: color;
  opacity: 0.94;
}
.tone-duotone .section-photo__scrim {
  background:
    linear-gradient(to bottom,
      var(--scrim-edge) 0%, rgba(20, 16, 12, 0.74) 18%,
      rgba(20, 16, 12, 0.78) 82%, var(--scrim-edge) 100%),
    rgba(20, 16, 12, 0.40);
}

/* 07 — evidence. Near monochrome; nothing may compete with data. */
.tone-char .section-photo__img { filter: grayscale(0.80) contrast(1.10) brightness(0.72) saturate(0.6); }
.tone-char .section-photo__tint {
  background: linear-gradient(126deg,
    rgba(245, 166, 35, 0.20) 0%, rgba(162, 147, 127, 0.12) 50%, rgba(20, 16, 12, 0.50) 100%);
  mix-blend-mode: soft-light;
}
.tone-char .section-photo__grid { opacity: 0.8; }

/* 09 — the quiet screen. The brightest photograph on the page,
   because it is carrying the section by itself. */
.tone-bake .section-photo__img {
  filter: sepia(0.16) saturate(1.16) contrast(1.06) brightness(1.30);
  object-position: center 56%;
}
.tone-bake .section-photo__tint {
  background: linear-gradient(200deg,
    rgba(255, 107, 53, 0.30) 0%, rgba(245, 166, 35, 0.12) 44%, rgba(20, 16, 12, 0.58) 100%);
  mix-blend-mode: overlay;
}
/* The quiet screen carries its type straight over the brightest part
   of the photograph, so this one gets a horizontal scrim as well —
   dark under the words, open on the right where the tent is. */
.tone-bake .section-photo__scrim {
  background:
    linear-gradient(to right,
      rgba(20, 16, 12, 0.84) 0%, rgba(20, 16, 12, 0.66) 30%,
      rgba(20, 16, 12, 0.16) 64%, rgba(20, 16, 12, 0.34) 100%),
    linear-gradient(to bottom,
      var(--scrim-edge) 0%, rgba(20, 16, 12, 0.26) 22%,
      rgba(20, 16, 12, 0.34) 76%, var(--scrim-edge) 100%);
}

/* 11 — the press. Matte flour warmth, nearly one colour. */
.tone-flour .section-photo__img {
  filter: sepia(0.50) saturate(0.90) contrast(1.08) brightness(0.86);
  object-position: center 40%;
}
.tone-flour .section-photo__tint {
  background: linear-gradient(118deg,
    rgba(255, 199, 107, 0.26) 0%, rgba(245, 166, 35, 0.08) 52%, rgba(20, 16, 12, 0.56) 100%);
  mix-blend-mode: soft-light;
}
.tone-flour .section-photo__grid { opacity: 0.4; }

/* ============================================================
   SKELETON A — 01 / Hero
   Full-bleed photograph, oversized serif statement, instrument
   rail hard right. Asymmetric: type left, readouts right.
   ============================================================ */
.hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: calc(var(--topbar-h) + var(--nav-h) + var(--sp-8)) 0 var(--sp-10);
  background: var(--bg-deep);
}

.hero__photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; isolation: isolate; pointer-events: none; }

.hero__photo-img {
  position: absolute;
  top: -7%; left: 0;
  width: 100%; height: 114%;
  object-fit: cover;
  object-position: center 46%;
  filter: sepia(0.30) saturate(1.00) contrast(1.05) brightness(0.92);
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.hero__photo-tint { position: absolute; inset: 0; background: var(--wash-amber); mix-blend-mode: soft-light; }

.hero__photo-scrim {
  position: absolute; inset: 0;
  /* Left side down to 0.90 so the serif holds; right side kept
     light enough that the photograph is genuinely visible. */
  background:
    linear-gradient(to right,
      rgba(20, 16, 12, 0.92) 0%, rgba(20, 16, 12, 0.72) 34%,
      rgba(20, 16, 12, 0.32) 66%, rgba(20, 16, 12, 0.50) 100%),
    linear-gradient(to bottom,
      rgba(20, 16, 12, 0.66) 0%, rgba(20, 16, 12, 0.16) 26%,
      rgba(20, 16, 12, 0.34) 64%, var(--bg-deep) 100%);
}

.hero__photo-grid {
  position: absolute; inset: 0;
  background-image: var(--labgrid);
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.5) 70%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.5) 70%, transparent 100%);
}

.hero__canvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero__canvas canvas { width: 100%; height: 100%; }

.hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--wrap-lg);
  margin: 0 auto;
  padding: 0 var(--sp-6);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--sp-9);
}

.hero__content { max-width: 660px; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: var(--sp-6);
  max-width: none;
}

.hero__eyebrow-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.18);
  flex-shrink: 0;
}

.hero__title { margin-bottom: var(--sp-6); font-weight: 600; }
.hero__title-line { display: block; }

.hero__title em {
  background: linear-gradient(96deg, var(--amber-lt) 0%, var(--amber) 40%, var(--ember) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--amber);
  font-style: italic;
}

.hero__product {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-primary);
  margin-bottom: var(--sp-5);
  max-width: none;
}

.hero__product-code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--amber);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 3px 12px;
}

.hero__lede {
  font-size: 1.04rem;
  line-height: 1.66;
  color: var(--text-secondary);
  max-width: 46ch;
  margin-bottom: var(--sp-7);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-5); }

.hero__disclaimer {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.6;
  color: var(--text-faint);
  max-width: 52ch;
}

/* Instrument rail — reads like a bench display, not a stat block */
.hero__rail {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding-left: var(--sp-6);
  border-left: 1px solid var(--line);
}

.hero__read { min-width: 178px; }

.hero__read-value {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.9rem, 2.9vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--amber);
  text-shadow: 0 0 30px var(--amber-glow);
}

.hero__read-value i { font-style: normal; font-size: 0.4em; color: var(--amber-lt); letter-spacing: 0.04em; }

.hero__read-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 8px;
}

.hero__scroll {
  position: absolute;
  z-index: 3;
  left: 50%; bottom: var(--sp-6);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.hero__scroll-line { width: 1px; height: 40px; background: linear-gradient(to bottom, transparent, var(--amber)); }

.hero__scroll-text {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.3em;
  color: var(--text-faint);
}

.hero__scroll:hover .hero__scroll-text { color: var(--amber); }

/* ============================================================
   SKELETON B — 02 / The essay
   Magazine longform: two serif columns, drop cap, marginalia.
   No cards, no metrics tiles, no icons.
   ============================================================ */
.essay {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 264px;
  gap: var(--sp-9);
  align-items: start;
}

.essay__main {
  columns: 2;
  column-gap: var(--sp-8);
  column-rule: 1px solid var(--line-soft);
}

.essay__main p {
  font-family: var(--font-serif);
  font-size: 1.02rem;
  line-height: 1.72;
  color: var(--text-secondary);
  max-width: none;
  margin-bottom: 1.05em;
  text-wrap: pretty;
  -webkit-hyphens: auto;
          hyphens: auto;
}

.essay__main p:last-child { margin-bottom: 0; }

.essay__main p:first-child::first-letter {
  float: left;
  font-family: var(--font-serif);
  font-size: 3.85em;
  line-height: 0.82;
  font-weight: 600;
  padding: 0.06em 0.1em 0 0;
  color: var(--amber);
  text-shadow: 0 0 34px var(--amber-glow);
}

.essay__main p.essay__kicker-line {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--amber-lt);
  break-inside: avoid;
}

/* Marginalia. On narrow screens these fall inline, which is
   what a printed page would do anyway. */
.essay__rail { display: grid; gap: var(--sp-6); }

.aside {
  padding-left: var(--sp-5);
  border-left: 2px solid var(--line-strong);
}

.aside__label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber-dk);
  margin-bottom: var(--sp-3);
}

.aside p {
  font-size: 0.83rem;
  line-height: 1.62;
  color: var(--text-muted);
  max-width: none;
}

.aside p + p { margin-top: 0.7em; }
.aside .mono { color: var(--amber-lt); }

/* ============================================================
   SKELETON C — 03 / The object
   Offset photographs on the left, dense specification sheet on
   the right. Deliberately off-centre; the plates overlap.
   ============================================================ */
.object {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: var(--sp-8);
  align-items: start;
}

.object__plates { position: relative; padding-bottom: var(--sp-9); }

.plate {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-card);
  transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}

.plate:hover { border-color: var(--line-strong); box-shadow: 0 26px 58px rgba(0, 0, 0, 0.48), 0 0 40px var(--amber-glow); }

.plate--lead .card__media { aspect-ratio: 4 / 3; }

/* A plate that must not crop what it holds — used where the
   subject is centred and the frame is the composition. */
.plate--wide .card__media { aspect-ratio: 3 / 2; }

/* The inset plate hangs over the lead plate's bottom-right corner, so
   the lead caption has to stop before it gets there. */
.plate--lead .plate__cap { right: 46%; }

/* The inset plate hangs off the lead plate's lower-right corner */
.plate--inset {
  width: 58%;
  margin-left: auto;
  margin-top: calc(var(--sp-8) * -1.4);
  margin-right: calc(var(--sp-7) * -1);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.plate--inset .card__media { aspect-ratio: 1 / 1; }

.plate__cap {
  position: absolute;
  left: var(--sp-5); right: var(--sp-5); bottom: var(--sp-4);
  z-index: 3;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-secondary);
  text-shadow: 0 2px 14px rgba(20, 16, 12, 0.95);
}

.plate__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  color: #1e1403;
  background: var(--amber);
  border-radius: var(--r-pill);
  padding: 2px 8px;
  margin-right: 8px;
  vertical-align: 1px;
}

.object__sheet {
  padding: var(--sp-7);
  background: linear-gradient(168deg, rgba(34, 26, 18, 0.9), rgba(20, 16, 12, 0.88));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.sheet__title {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}

.sheet__title--gap { margin-top: var(--sp-7); }

.sheet { display: grid; gap: 0; }

.sheet__row {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: var(--sp-5);
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
}

.sheet__row:last-child { border-bottom: 0; }

.sheet__row dt {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.sheet__row dd { font-size: 0.88rem; line-height: 1.55; color: var(--text-secondary); }
.sheet__row dd .mono { color: var(--amber-lt); }

.flavours { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

.flavour {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(20, 16, 12, 0.5);
  font-size: 0.81rem;
  color: var(--text-secondary);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.flavour:hover { border-color: var(--line-strong); background: rgba(245, 166, 35, 0.07); }

.flavour__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--c, var(--amber));
  box-shadow: 0 0 10px var(--c, var(--amber));
  flex-shrink: 0;
}

.flavour__name { flex: 1; }
.flavour__code { font-size: 0.64rem; color: var(--text-faint); }

/* ============================================================
   Charts — shared shell (used on screens 04 and 07)
   ============================================================ */
.chart {
  position: relative;
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  background: linear-gradient(170deg, rgba(16, 13, 9, 0.95), rgba(24, 19, 13, 0.92));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

.chart__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}

.chart__label {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber-dk);
  margin-bottom: 7px;
}

.chart__title { font-family: var(--font-serif); font-size: 1.24rem; color: var(--text-primary); }

.chart__legend { display: flex; flex-wrap: wrap; gap: var(--sp-5); }

.chart__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
}

.chart__swatch { width: 20px; height: 3px; border-radius: var(--r-pill); flex-shrink: 0; }
.chart__swatch--amber { background: linear-gradient(90deg, var(--amber), var(--amber-lt)); box-shadow: 0 0 10px var(--amber-glow-s); }
.chart__swatch--ember { background: var(--ember); }
.chart__swatch--dash  { background: repeating-linear-gradient(90deg, var(--text-faint) 0 5px, transparent 5px 9px); }

.chart__canvas-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  min-height: 250px;
}

.chart__canvas-wrap--short { aspect-ratio: 16 / 9; min-height: 220px; }

.chart__canvas-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.chart__canvas-wrap canvas:focus-visible { outline-offset: -2px; }

/* Live hover readout. This is the point of drawing the curve
   rather than shipping a picture of one. */
.chart__readout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  margin-top: var(--sp-4);
  padding: 10px var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(20, 16, 12, 0.7);
  font-variant-numeric: tabular-nums;
}

.chart__readout .ro {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.74rem;
}

.chart__readout .ro i {
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.chart__readout .ro b { font-weight: 700; color: var(--amber-lt); min-width: 3.6em; }
.chart__readout .ro--hint { color: var(--text-faint); font-size: 0.68rem; margin-left: auto; }

/* The plot reads out under a pointermove, which a finger drag
   produces as readily as a mouse — but "hover" and "← →" are not
   instructions a phone can follow. Same control, named for the
   input that is actually present. */
.chart__readout .ro--hint-coarse { display: none; }
@media (hover: none), (pointer: coarse) {
  .chart__readout .ro--hint-fine   { display: none; }
  .chart__readout .ro--hint-coarse { display: inline-flex; }

  /* Without this the browser claims the drag for scrolling and
     cancels the pointer before the readout has moved. pan-y keeps
     the vertical scroll the page needs and leaves the sideways
     gesture — the only axis the plot reads — to the canvas. */
  .chart__canvas-wrap canvas { touch-action: pan-y; }
}

.chart__note {
  margin-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.6;
  color: var(--text-faint);
  max-width: none;
}

/* ============================================================
   SKELETON D — 04 / Mechanism
   Curve across the top, then a horizontal three-phase track.
   The middle phase is physically larger than the other two,
   because it is twenty-one of the thirty days.
   ============================================================ */
.chart--release { margin-bottom: var(--sp-8); }

.track {
  display: grid;
  grid-template-columns: 0.82fr 1.36fr 0.82fr;
  gap: var(--sp-5);
  position: relative;
}

.track::before {
  content: '';
  position: absolute;
  left: 4%; right: 4%; top: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 10%, var(--line-strong) 90%, transparent);
}

.phase {
  position: relative;
  padding: var(--sp-6) var(--sp-6) var(--sp-6);
  background: rgba(28, 22, 16, 0.78);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--t-med) var(--ease), background var(--t-med) var(--ease);
}

.phase:hover { border-color: var(--line-strong); background: rgba(42, 32, 21, 0.86); }

.phase--hold {
  background: linear-gradient(168deg, rgba(48, 35, 20, 0.9), rgba(24, 19, 13, 0.88));
  border-color: var(--line-strong);
}

.phase__mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #1e1403;
  background: linear-gradient(110deg, var(--amber-lt), var(--amber));
  border-radius: var(--r-pill);
  padding: 4px 12px;
  margin-bottom: var(--sp-5);
  box-shadow: 0 0 0 5px var(--bg-surface);
}

.phase--hold .phase__mark { background: linear-gradient(110deg, var(--amber), var(--ember)); }

.phase__title { font-family: var(--font-serif); font-size: 1.24rem; margin-bottom: var(--sp-4); }
.phase--hold .phase__title { font-size: 1.5rem; }

.phase__desc { font-size: 0.88rem; line-height: 1.66; color: var(--text-muted); max-width: 46ch; }
.phase__desc + .phase__desc { margin-top: 0.8em; }

.phase__bar {
  margin-top: var(--sp-6);
  height: 3px;
  border-radius: var(--r-pill);
  background: rgba(247, 240, 230, 0.08);
  overflow: hidden;
}

.phase__bar i {
  display: block;
  height: 100%;
  width: var(--w, 50%);
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--amber), var(--ember));
}

.phase__meta {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

.phase__meta b { color: var(--amber-lt); font-weight: 700; }

/* ============================================================
   SKELETON E — 05 / The science
   Diagram is the main visual. Cross-section holds the left
   two-thirds; prose is subordinate and sits in a narrow rail.
   ============================================================ */
.science {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: var(--sp-8);
  align-items: start;
}

/* The prose rail runs about 840px past the bottom of the diagram
   beside it, which left the left column empty for most of a
   screen — a hole big enough to read as a mistake. Pinning the
   cross-section keeps the drawing next to the paragraphs that
   describe it, and only where the grid is still two columns and
   the viewport is tall enough to hold the whole figure. `main`
   is overflow-x: clip rather than hidden, so it does not become
   a scroll container and the sticky still resolves against the
   viewport. */
@media (min-width: 1101px) and (min-height: 780px) {
  .science > .figure {
    position: sticky;
    top: calc(var(--nav-h) + var(--sp-5));
  }
}

.figure {
  position: relative;
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(170deg, rgba(16, 13, 9, 0.95), rgba(26, 20, 14, 0.9));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

.figure__head { margin-bottom: var(--sp-5); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line); }
.figure__label { font-family: var(--font-mono); font-size: 0.63rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber-dk); margin-bottom: 7px; }
.figure__title { font-family: var(--font-serif); font-size: 1.22rem; }
.figure__cap { margin-top: var(--sp-5); font-family: var(--font-mono); font-size: 0.68rem; line-height: 1.6; color: var(--text-faint); max-width: none; }

.xsec { width: 100%; height: auto; }

/* Terminology blocks. Prose, not cards — no borders, no icons. */
.terms { display: grid; gap: var(--sp-6); }

.term { padding-bottom: var(--sp-6); border-bottom: 1px solid var(--line-soft); }
.term:last-child { border-bottom: 0; padding-bottom: 0; }

.term__name {
  font-family: var(--font-serif);
  font-size: 1.16rem;
  margin-bottom: var(--sp-3);
  color: var(--text-primary);
}

.term p { font-size: 0.9rem; line-height: 1.68; color: var(--text-muted); max-width: 54ch; }
.term p em { color: var(--amber-lt); font-style: italic; }

/* Pathway schematic — always wider than a phone; scrolls itself */
.pathway { margin-top: var(--sp-8); }
.pathway__scroll { padding-bottom: var(--sp-3); }
.pathway__svg { min-width: 940px; width: 100%; height: auto; }

/* The honesty note. Set apart from the marketing voice on
   purpose — different rule, different colour, different type. */
.leap {
  margin-top: var(--sp-8);
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: var(--sp-6);
  padding: var(--sp-6) var(--sp-7);
  border: 1px solid var(--ember);
  border-left-width: 4px;
  border-radius: var(--r-md);
  background: rgba(255, 107, 53, 0.075);
}

.leap__label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ember);
  line-height: 1.5;
}

.leap p { font-size: 0.93rem; line-height: 1.68; color: var(--text-secondary); max-width: 68ch; }
.leap p + p { margin-top: 0.8em; }
.leap strong { color: var(--amber-lt); }

/* --- SVG typography: every diagram shares one type scale ------ */
.xsec text,
.pathway__svg text,
.termfig__svg text,
.clockfig text {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.xsec-name { font-size: 15.5px; font-weight: 700; fill: var(--text-primary); letter-spacing: 0.005em; }
.xsec-note { font-size: 12.5px; fill: var(--text-muted); }
.xsec-dim  { font-size: 12.5px; fill: var(--amber); letter-spacing: 0.05em; }
.xsec-mark { font-size: 12.5px; fill: var(--amber-dk); letter-spacing: 0.16em; }

.node-box {
  fill: rgba(28, 22, 16, 0.92);
  stroke: var(--line-strong);
  stroke-width: 1;
}

.node-box--key { fill: rgba(58, 42, 20, 0.95); stroke: var(--amber); stroke-width: 1.4; }
.node-box--reg { fill: rgba(48, 24, 14, 0.9);  stroke: rgba(255, 107, 53, 0.55); }

.node-t { font-size: 13px;   fill: var(--text-primary); }
.node-s { font-size: 10.5px; fill: var(--text-faint); }

.node:hover .node-box { stroke: var(--amber); fill: rgba(46, 34, 20, 0.95); }
.node { transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.node-box { transition: stroke var(--t-fast) var(--ease), fill var(--t-fast) var(--ease); }

/* ============================================================
   SKELETON F — 06 / What it does
   A stack of four layers, not a grid of four cards. Each layer
   is a full-width row: index rail, argument, clock.
   ============================================================ */
.layers { border-top: 1px solid var(--line); }

.layer {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 210px;
  gap: var(--sp-7);
  padding: var(--sp-8) 0;
  border-bottom: 1px solid var(--line);
  transition: background var(--t-med) var(--ease);
}

.layer:hover { background: rgba(245, 166, 35, 0.028); }

.layer__rail { position: relative; }

.layer__depth {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber-dk);
  margin-bottom: var(--sp-4);
}

.layer__title {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  line-height: 1.14;
  color: var(--text-primary);
}

.layer__body p { font-size: 0.96rem; line-height: 1.7; color: var(--text-secondary); max-width: 68ch; }
.layer__body p + p { margin-top: 0.85em; }
.layer__body em { color: var(--amber-lt); font-style: italic; }

.layer__clock {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.7;
  color: var(--text-muted);
  border-left: 2px solid var(--line-strong);
  padding-left: var(--sp-5);
}

.layer__clock dt {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 4px;
}

.layer__clock dd { color: var(--amber-lt); margin-bottom: var(--sp-4); }
.layer__clock dd:last-child { margin-bottom: 0; }

/* ============================================================
   SKELETON G — 07 / Evidence
   Instrument panel: two plotted figures, then a hard tabular
   matrix in monospace. Everything numeric lives here.
   ============================================================ */
.figs {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: var(--sp-5);
  margin-bottom: var(--sp-8);
}

.trialbox {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-4) var(--sp-8);
  margin-bottom: var(--sp-6);
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: var(--r-md);
  background: rgba(20, 16, 12, 0.6);
}

.trialbox__n {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--amber);
  text-shadow: 0 0 30px var(--amber-glow);
}

.trialbox__n span { font-size: 0.4em; color: var(--text-faint); margin-right: 6px; letter-spacing: 0.1em; }

.trialbox p {
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 58ch;
  flex: 1 1 320px;
}

/* --- nutrient matrix: data grid, tabular figures --- */
.matrix__wrap { border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(16, 13, 9, 0.86); }

.matrix {
  width: 100%;
  min-width: 780px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.76rem;
}

.matrix caption {
  text-align: left;
  padding: var(--sp-5) var(--sp-6) var(--sp-4);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber-dk);
  border-bottom: 1px solid var(--line);
}

/* A screenshot of this table travels without the section around it, so the
   two things that stop it being read as a formulation have to sit inside
   the table itself: here, and in the Coverage header. */
.matrix__capnote {
  display: block;
  margin-top: 9px;
  max-width: 68ch;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.55;
  text-transform: none;
  color: var(--ember);
  white-space: normal;
}

.matrix__qual {
  display: block;
  margin-top: 3px;
  font-size: 0.56rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--ember);
}

.matrix th, .matrix td { padding: 9px var(--sp-5); text-align: left; }
.matrix thead th {
  position: sticky; top: 0;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: rgba(16, 13, 9, 0.97);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}

.matrix tbody tr { border-bottom: 1px solid var(--line-soft); transition: background var(--t-fast) var(--ease); }
.matrix tbody tr:last-child { border-bottom: 0; }
.matrix tbody tr:hover { background: rgba(245, 166, 35, 0.055); }

.matrix td.num { text-align: right; color: var(--text-primary); white-space: nowrap; }
.matrix thead th:nth-child(3) { text-align: right; }   /* over the figures */
.matrix td.unit { color: var(--text-faint); width: 1%; white-space: nowrap; }
.matrix th[scope="row"] { font-weight: 500; color: var(--text-secondary); white-space: nowrap; }

.matrix .cls {
  display: inline-block;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  border: 1px solid currentColor;
  opacity: 0.85;
}

.cls--macro { color: var(--amber); }
.cls--micro { color: var(--ember); }
.cls--vit   { color: #e8d08a; }
.cls--fx    { color: #b0824f; }

/* coverage bar drawn in the cell itself */
.cov { display: flex; align-items: center; gap: 10px; min-width: 132px; }
.cov__bar { flex: 1; height: 3px; border-radius: var(--r-pill); background: rgba(247, 240, 230, 0.09); overflow: hidden; }
.cov__bar i { display: block; height: 100%; width: var(--w, 50%); border-radius: var(--r-pill); background: linear-gradient(90deg, var(--ember), var(--amber)); }
.cov__val { color: var(--amber-lt); min-width: 3.4em; text-align: right; }

/* A subordinate row: already counted in the row above it, so it is set
   back and dimmed rather than reading as a twentieth ingredient. */
.matrix tbody tr.matrix__sub th[scope="row"] { color: var(--text-faint); font-weight: 400; padding-left: calc(var(--sp-5) + 12px); }

/* The reconciliation. The table's whole argument is that the column adds
   up to the unit mass on the specification sheet, so it adds it up. */
.matrix tfoot th, .matrix tfoot td { padding: 11px var(--sp-5); border-top: 1px solid var(--line-strong); }
.matrix tfoot th[scope="row"] {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.matrix tfoot td.num { color: var(--amber-lt); font-weight: 600; }

/* ============================================================
   SKELETON H — 08 / Institutions
   A roster, set as an index rather than a card grid. Rules
   between rows; no boxes, no logos, no seals.
   ============================================================ */
.roster { margin-top: var(--sp-8); border-top: 1px solid var(--line-strong); }

/* The index is seven rows long, so it is broken in two by a band.
   The continuation keeps the rules and drops the heavy top rule. */
.roster--cont { margin-top: 0; border-top: 0; }

.roster__row {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.9fr) minmax(0, 1.55fr);
  gap: var(--sp-6);
  align-items: baseline;
  padding: var(--sp-6) var(--sp-4);
  border-bottom: 1px solid var(--line);
  transition: background var(--t-med) var(--ease), padding-left var(--t-med) var(--ease);
}

.roster__row:hover { background: rgba(245, 166, 35, 0.04); padding-left: var(--sp-6); }

.roster__name {
  font-family: var(--font-serif);
  font-size: 1.18rem;
  line-height: 1.25;
  color: var(--text-primary);
}

.roster__name span {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember);
}

.roster__field {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--amber);
}

.roster__field em { display: block; font-style: normal; color: var(--text-faint); margin-top: 4px; }

.roster__work { font-size: 0.89rem; line-height: 1.65; color: var(--text-muted); max-width: 52ch; }

/* ============================================================
   SKELETON I — 09 / The quiet screen
   One photograph, one sentence, five bare lines. Nothing is
   explained here, and that is the point.
   ============================================================ */
.section--quiet { padding: 0; }

.quiet {
  position: relative;
  z-index: 1;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.quiet__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--sp-11) var(--sp-6);
}

.quiet__line {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  line-height: 1.16;
  letter-spacing: -0.022em;
  color: var(--text-primary);
  max-width: 20ch;
  text-shadow: 0 4px 40px rgba(20, 16, 12, 0.9);
  margin-bottom: var(--sp-10);
}

.quiet__list { max-width: 640px; border-top: 1px solid rgba(247, 240, 230, 0.16); }

.quiet__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: 15px 0;
  border-bottom: 1px solid rgba(247, 240, 230, 0.16);
  font-size: 0.94rem;
  color: var(--text-primary);
  text-shadow: 0 2px 18px rgba(20, 16, 12, 0.9);
}

.quiet__list li span {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber-lt);
  white-space: nowrap;
}

.quiet__foot {
  margin-top: var(--sp-8);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  max-width: 56ch;
  text-shadow: 0 2px 14px rgba(20, 16, 12, 0.9);
}

/* ============================================================
   SKELETON J — 10 / Field notes
   A quote wall on a six-column grid with uneven spans. Five
   entries: four with portraits, one large text-only.
   ============================================================ */
.section--wall {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(255, 107, 53, 0.07) 0%, transparent 70%),
    var(--bg-surface);
}

.wall { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-5); }

.note {
  position: relative;
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding: var(--sp-7);
  background: linear-gradient(166deg, rgba(34, 26, 18, 0.9), rgba(20, 16, 12, 0.9));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}

.note--wide { grid-column: span 3; }

.note:hover { border-color: var(--line-strong); box-shadow: 0 26px 58px rgba(0, 0, 0, 0.46), 0 0 40px var(--amber-glow); }

.note::before {
  content: '\201C';
  position: absolute;
  top: -22px; right: 14px;
  font-family: var(--font-serif);
  font-size: 8rem;
  line-height: 1;
  color: var(--amber);
  opacity: 0.09;
  pointer-events: none;
}

.note__quote {
  font-family: var(--font-serif);
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--text-secondary);
  flex: 1;
}

.note--wide .note__quote { font-size: 1.02rem; }

/* The pull quote carries no portrait and no border ornament */
.note--pull {
  grid-column: span 2;
  justify-content: center;
  background: linear-gradient(150deg, rgba(255, 107, 53, 0.13), rgba(20, 16, 12, 0.92));
  border-color: var(--line-strong);
}

.note--pull .note__quote { font-size: clamp(1.2rem, 1.9vw, 1.55rem); line-height: 1.4; color: var(--text-primary); }
.note--pull::before { display: none; }

.note__src {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.6;
  color: var(--text-muted);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}

.note__person { display: flex; align-items: center; gap: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--line); }

.note__avatar {
  position: relative;
  width: 60px; height: 60px;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  flex-shrink: 0;
  border: 1px solid var(--line-strong);
  background: var(--bg-inset);
}

.note__avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;
  filter: sepia(0.34) saturate(0.8) contrast(1.06) brightness(0.86);
  transition: filter var(--t-med) var(--ease), transform 0.9s var(--ease);
}

.note:hover .note__avatar img { filter: sepia(0.06) saturate(1.04) contrast(1.03) brightness(1); transform: scale(1.06); }

.note__avatar-tint {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(245, 166, 35, 0.30), rgba(20, 16, 12, 0.42));
  mix-blend-mode: soft-light;
}

.note__meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.note__name { font-size: 0.95rem; font-weight: 650; color: var(--text-primary); }
.note__role { font-family: var(--font-mono); font-size: 0.68rem; line-height: 1.5; color: var(--text-muted); }


/* ============================================================
   SKELETON K — 11 / The press
   Half-screen first person set large, portrait plate opposite,
   then a process rail and a tolerance list underneath.
   ============================================================ */
.maker {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  gap: var(--sp-9);
  align-items: center;
  margin-bottom: var(--sp-10);
}

/* Sized in rem, not ch: `ch` on this wrapper would resolve against
   its own 1rem sans, not the display serif set inside it, and the
   column would come out about half the width it should be. */
.maker__quote { max-width: 32rem; }

.maker__quote p {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.35vw, 1.95rem);
  line-height: 1.32;
  letter-spacing: -0.014em;
  color: var(--text-primary);
  max-width: none;
}

.maker__quote p + p { margin-top: 0.85em; }
.maker__quote p:first-child { text-indent: -0.42em; }

.maker__quote em { color: var(--amber-lt); font-style: italic; }

.maker__attrib { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--line-strong); max-width: 32rem; }
.maker__name { font-size: 1rem; font-weight: 650; color: var(--text-primary); }
.maker__role { font-family: var(--font-mono); font-size: 0.7rem; line-height: 1.6; color: var(--text-muted); margin-top: 4px; }


.maker__plate {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-card);
  transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}

.maker__plate:hover { border-color: var(--line-strong); box-shadow: 0 26px 58px rgba(0, 0, 0, 0.48), 0 0 40px var(--amber-glow); }
.maker__plate .card__media { aspect-ratio: 3 / 4; }

/* --- process rail: four steps, real sequence, so numbered --- */
.process { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); position: relative; margin-bottom: var(--sp-8); }

.process::before {
  content: '';
  position: absolute;
  top: 17px; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 12%, var(--line-strong) 88%, transparent);
}

.step { position: relative; padding-top: var(--sp-3); }

.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: #1e1403;
  background: linear-gradient(120deg, var(--amber-lt), var(--amber));
  box-shadow: 0 0 0 6px var(--bg-deep), 0 0 20px var(--amber-glow);
  margin-bottom: var(--sp-5);
}

.step__title { font-family: var(--font-serif); font-size: 1.1rem; margin-bottom: var(--sp-3); }
.step__desc { font-size: 0.85rem; line-height: 1.62; color: var(--text-muted); max-width: 40ch; }

/* --- tolerances --- */
.press__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-7); align-items: start; }

.tol {
  padding: var(--sp-7);
  background: linear-gradient(168deg, rgba(34, 26, 18, 0.9), rgba(20, 16, 12, 0.88));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.tol__title {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}

.tol__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}

.tol__row:last-child { border-bottom: 0; }
.tol__name { font-size: 0.86rem; color: var(--text-secondary); }
.tol__val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.88rem; font-weight: 700; color: var(--amber-lt); white-space: nowrap; }

/* ============================================================
   Card photo layers (plates)
   ============================================================ */
.card__media { position: relative; overflow: hidden; isolation: isolate; background: var(--bg-inset); line-height: 0; }

.card__img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: var(--grade-card);
  transform: scale(1.01);
  transition: transform 1s var(--ease), filter 0.6s var(--ease);
}

.card__tint { position: absolute; inset: 0; background: var(--wash-amber-soft); mix-blend-mode: soft-light; transition: opacity var(--t-med) var(--ease); }

.card__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    var(--scrim-card) 0%, rgba(20, 16, 12, 0.66) 26%,
    rgba(20, 16, 12, 0.14) 58%, rgba(20, 16, 12, 0) 82%);
}

.card__scrim--soft {
  background: linear-gradient(to top,
    rgba(20, 16, 12, 0.86) 0%, rgba(20, 16, 12, 0.20) 50%, rgba(20, 16, 12, 0.24) 100%);
}

.card__sheen {
  position: absolute; inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(112deg,
    transparent 34%, rgba(255, 199, 107, 0.16) 47%, rgba(255, 199, 107, 0.03) 55%, transparent 66%);
  opacity: 0;
  transform: translateX(-118%);
  transition: transform 1.1s var(--ease), opacity var(--t-med) var(--ease);
}

.plate:hover .card__sheen,
.maker__plate:hover .card__sheen { opacity: 1; transform: translateX(118%); }

.plate:hover .card__img,
.maker__plate:hover .card__img { filter: var(--grade-card-hover); transform: scale(1.05); }

.plate:hover .card__tint,
.maker__plate:hover .card__tint { opacity: 0.45; }

/* ============================================================
   SKELETON L — 12 / Close + About This Page
   ============================================================ */
.section--close { padding-bottom: var(--sp-9); }

.close {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  padding: var(--sp-11) var(--sp-7);
  text-align: center;
}

.close__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; isolation: isolate; }

.close__img {
  position: absolute;
  top: -8%; left: 0;
  width: 100%; height: 116%;
  object-fit: cover;
  object-position: center 50%;
  filter: sepia(0.20) saturate(1.05) contrast(1.05) brightness(0.90);
  transform: translate3d(0, 0, 0);
}

.close__tint {
  position: absolute; inset: 0;
  background: linear-gradient(146deg, rgba(255, 107, 53, 0.34) 0%, rgba(245, 166, 35, 0.18) 46%, rgba(20, 16, 12, 0.5) 100%);
  mix-blend-mode: overlay;
}

.close__scrim {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 74% 66% at 50% 50%,
    rgba(20, 16, 12, 0.60) 0%, rgba(20, 16, 12, 0.88) 60%, rgba(20, 16, 12, 0.95) 100%);
}

.close__grid { position: absolute; inset: 0; background-image: var(--labgrid); opacity: 0.5; }
.close__inner { position: relative; z-index: 2; }

.close__badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #1e1403;
  background: var(--amber);
  border-radius: var(--r-pill);
  padding: 4px 14px;
  margin-bottom: var(--sp-6);
}

.close__title { font-size: clamp(2rem, 4.6vw, 3.5rem); margin-bottom: var(--sp-5); text-shadow: 0 4px 30px rgba(20, 16, 12, 0.85); }
.close__title em { background: linear-gradient(96deg, var(--amber-lt), var(--amber) 45%, var(--ember)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-style: italic; }

.close__desc { font-size: 1rem; line-height: 1.66; color: var(--text-secondary); max-width: 56ch; margin: 0 auto var(--sp-7); }
.close__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4); margin-bottom: var(--sp-6); }

/* ============================================================
   FICTION MARK ③ — About This Page
   ============================================================ */
.disclosure {
  position: relative;
  z-index: 1;
  padding: var(--sp-10) 0 var(--sp-11);
  background: linear-gradient(180deg, var(--bg-deep) 0%, #191309 100%);
  border-top: 1px solid var(--line-strong);
}

.disclosure__panel {
  position: relative;
  padding: var(--sp-9) var(--sp-8);
  border: 2px solid var(--amber);
  border-radius: var(--r-lg);
  background: linear-gradient(168deg, rgba(255, 107, 53, 0.08), rgba(20, 16, 12, 0.92));
  box-shadow: 0 0 0 1px rgba(20, 16, 12, 0.9), 0 30px 70px rgba(0, 0, 0, 0.5);
}

.disclosure__flag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 6px 6px;
  border-radius: var(--r-pill);
  background: linear-gradient(100deg, var(--ember), var(--amber));
  color: #1c1202;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-bottom: var(--sp-6);
}

.disclosure__flag-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #1c1202;
  color: var(--amber-lt);
  font-weight: 800;
  font-size: 0.8rem;
}

.disclosure__title { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: var(--sp-5); }

/* ---- Masthead ---------------------------------------------
   Flag, title and one sentence, ruled off from the six columns
   below it. This block is the whole disclosure for the page, so
   it is set as a closing statement rather than as small print:
   a masthead, then evidence, then the line that ends it. */
.disclosure__head {
  padding-bottom: var(--sp-7);
  margin-bottom: var(--sp-8);
  border-bottom: 1px solid var(--line-strong);
}

.disclosure__lede {
  font-family: var(--font-serif);
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 54ch;
}

/* ---- The six panes ----------------------------------------
   Two columns of three on a wide screen. The gap is generous on
   purpose: this has to read as the page's proper ending, not as
   a paragraph of disclaimer set in six pieces. */
.disclosure__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-8) var(--sp-9);
}

.disclosure__col { display: grid; gap: var(--sp-4); align-content: start; }

.disclosure__sub {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}

.disclosure__col p { font-size: 0.94rem; line-height: 1.68; color: var(--text-secondary); max-width: none; }

.disclosure__col strong { color: var(--amber-lt); }

/* The one exhaustive list on this screen that reads better as a list. */
.disclosure__list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 78ch;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.disclosure__list li { position: relative; padding-left: var(--sp-5); }
.disclosure__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.66em;
  width: 13px; height: 1px;
  background: var(--amber-dk);
}

/* Last line of the page and the shortest. Nothing coordinated inside it. */
.disclosure__strong {
  margin-top: var(--sp-8);
  padding: var(--sp-5) var(--sp-6);
  border-left: 3px solid var(--ember);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: rgba(255, 107, 53, 0.09);
  font-size: 0.94rem;
  line-height: 1.68;
  color: var(--text-secondary);
  max-width: none;
}

.disclosure__strong strong { color: var(--amber-lt); }

.disclosure__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line-strong);
}

.disclosure__fact { padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(20, 16, 12, 0.6); }

.disclosure__fact dt {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 7px;
}

.disclosure__fact dd { font-size: 0.86rem; line-height: 1.5; color: var(--amber-lt); font-weight: 600; }

/* ============================================================
   Footer
   ============================================================ */
.footer {
  position: relative;
  z-index: 1;
  background: #100d09;
  border-top: 1px solid var(--line);
  padding: var(--sp-8) 0 var(--sp-7);
}

.footer__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-7);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--line-soft);
}

.footer__brand { display: flex; align-items: center; gap: var(--sp-4); }

.footer__mark {
  position: relative;
  width: 34px; height: 20px;
  border-radius: var(--r-pill);
  background: linear-gradient(112deg, var(--amber-lt), var(--amber) 45%, var(--ember));
  flex-shrink: 0;
}

.footer__mark::after {
  content: '';
  position: absolute;
  top: 3px; bottom: 3px; left: 50%;
  width: 1.5px;
  transform: translateX(-50%);
  background: rgba(26, 19, 9, 0.62);
}

.footer__name { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 600; color: var(--text-primary); }
.footer__name span { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.2em; color: var(--amber); margin-left: 8px; vertical-align: 2px; }
.footer__tag { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-faint); margin-top: 4px; }

.footer__nav { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); align-items: center; }
.footer__nav a { font-size: 0.8rem; color: var(--text-muted); }
.footer__nav a:hover { color: var(--amber); }
.footer__nav-hi { color: var(--amber-lt) !important; font-weight: 600; }

.footer__legal { margin-top: var(--sp-6); font-size: 0.75rem; line-height: 1.7; color: var(--text-muted); max-width: none; }


/* ============================================================
   BREAK BANDS — a wide photographic rest between two dense
   blocks. Used on screens 02, 05 and 07, where the reading was
   otherwise several hundred words with nothing to look at.

   The internals are the plate layers (.card__media / .card__img
   / .card__tint) so the grade matches the rest of the page; only
   the scrim is new, because a band carries type over the picture
   and a plate does not.
   ============================================================ */
.band {
  position: relative;
  margin: var(--sp-9) 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-inset);
}

.band .card__media { aspect-ratio: 24 / 7; }
.band--tall .card__media { aspect-ratio: 19 / 7; }

/* A band is wallpaper, not a plate: it never leans or brightens
   under the pointer, and it is graded down to carry text. */
.band .card__img { filter: var(--grade-base); }

.band__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right,
      rgba(20, 16, 12, 0.90) 0%,  rgba(20, 16, 12, 0.66) 34%,
      rgba(20, 16, 12, 0.24) 64%, rgba(20, 16, 12, 0.46) 100%),
    linear-gradient(to top,
      rgba(20, 16, 12, 0.88) 0%, rgba(20, 16, 12, 0) 62%);
}

.band--cap-right .band__scrim {
  background:
    linear-gradient(to left,
      rgba(20, 16, 12, 0.90) 0%,  rgba(20, 16, 12, 0.66) 34%,
      rgba(20, 16, 12, 0.24) 64%, rgba(20, 16, 12, 0.46) 100%),
    linear-gradient(to top,
      rgba(20, 16, 12, 0.88) 0%, rgba(20, 16, 12, 0) 62%);
}

.band__grid { position: absolute; inset: 0; background-image: var(--labgrid); opacity: 0.45; }

.band__cap {
  position: absolute;
  z-index: 3;
  left: 0; bottom: 0;
  max-width: 36rem;
  padding: var(--sp-6) var(--sp-7);
}

.band--cap-right .band__cap { left: auto; right: 0; text-align: right; }

.band__stat {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(1.45rem, 3.1vw, 2.35rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: var(--amber-lt);
  text-shadow: 0 3px 28px rgba(20, 16, 12, 0.96);
}

.band__line {
  display: block;
  margin-top: var(--sp-4);
  max-width: 32rem;
  font-size: 0.9rem;
  line-height: 1.58;
  color: var(--text-secondary);
  text-shadow: 0 2px 18px rgba(20, 16, 12, 0.96);
}

.band--cap-right .band__line { margin-left: auto; }
.band__line b { color: var(--amber-lt); font-weight: 700; }

/* ============================================================
   Two more photographic grades. Both reuse a photograph that
   has already appeared once, and both have to look like a
   different picture when they come back.
   ============================================================ */

/* 08 — institutions. Screen 02's room again, but read as a place
   rather than as evidence: warm, defocused, pushed a long way
   back behind the index. */
.tone-room .section-photo__img {
  filter: sepia(0.44) saturate(0.88) contrast(1.02) brightness(0.66) blur(3px);
  object-position: center 58%;
}
.tone-room .section-photo__tint {
  background: linear-gradient(134deg,
    rgba(245, 166, 35, 0.24) 0%, rgba(255, 107, 53, 0.10) 52%, rgba(20, 16, 12, 0.66) 100%);
  mix-blend-mode: soft-light;
}
.tone-room .section-photo__scrim {
  background:
    linear-gradient(to bottom,
      var(--scrim-edge) 0%, rgba(20, 16, 12, 0.80) 20%,
      rgba(20, 16, 12, 0.84) 80%, var(--scrim-edge) 100%),
    rgba(20, 16, 12, 0.30);
}
.tone-room .section-photo__grid { opacity: 0.45; }

/* 12 — the close. A gilded field a long way back, so the last
   card on the page is standing in something rather than on
   nothing. Nothing here is legible as an object, on purpose. */
.tone-gild .section-photo__img {
  filter: sepia(0.34) saturate(1.10) contrast(1.04) brightness(0.52) blur(4px);
  object-position: center 55%;
}
.tone-gild .section-photo__tint {
  background: linear-gradient(158deg,
    rgba(245, 166, 35, 0.22) 0%, rgba(255, 107, 53, 0.12) 54%, rgba(20, 16, 12, 0.62) 100%);
  mix-blend-mode: soft-light;
}
.tone-gild .section-photo__scrim {
  background:
    linear-gradient(to bottom,
      var(--bg-deep) 0%, rgba(20, 16, 12, 0.84) 24%,
      rgba(20, 16, 12, 0.86) 78%, var(--bg-deep) 100%),
    rgba(20, 16, 12, 0.30);
}
.tone-gild .section-photo__grid { opacity: 0.4; }

/* 13 — about this page. An abstract, held right down. Every other
   screen earns its photograph; this one only needs a floor, and
   nothing on it may compete with the disclosure. */
.tone-vault .section-photo__img {
  filter: sepia(0.20) saturate(0.90) contrast(1.06) brightness(0.46) blur(3px);
  object-position: center 46%;
}
.tone-vault .section-photo__tint {
  background: linear-gradient(150deg,
    rgba(245, 166, 35, 0.14) 0%, rgba(20, 16, 12, 0.74) 100%);
  mix-blend-mode: normal;
}
.tone-vault .section-photo__scrim {
  background:
    linear-gradient(to bottom,
      var(--bg-deep) 0%, rgba(20, 16, 12, 0.86) 24%,
      rgba(20, 16, 12, 0.88) 76%, #191309 100%),
    rgba(20, 16, 12, 0.32);
}
.tone-vault .section-photo__grid { opacity: 0.5; }

/* ============================================================
   02 / A plotted margin note
   The essay rail already holds marginalia; one of the three is
   now a chart, because the claim it makes is a quantity.
   ============================================================ */
.aside__fig { display: block; width: 100%; height: auto; margin: var(--sp-4) 0 var(--sp-5); }

.dfig-name {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--text-muted);
}
.dfig-name--hi { fill: var(--amber); font-weight: 700; }
.dfig-val   { font-family: var(--font-mono); font-size: 10px; font-weight: 700; fill: var(--amber-lt); }
.dfig-val--dim { fill: var(--text-muted); font-weight: 400; }
.dfig-track { fill: rgba(247, 240, 230, 0.07); }
.dfig-bar   { fill: var(--amber-dk); }
.dfig-ghost { fill: none; stroke: var(--text-faint); stroke-width: 1; stroke-dasharray: 3 3; }
.dfig-rule  { stroke: var(--line-strong); stroke-width: 1; }
.dfig-foot  {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--text-faint);
}

/* ============================================================
   04 / Phase glyphs
   Each phase card carries the whole thirty-day curve with its
   own stretch lit. Three small drawings along a timeline read
   faster than three paragraphs do.
   ============================================================ */
.phase__glyph {
  display: block;
  width: 124px;
  max-width: 100%;
  height: auto;
  margin-bottom: var(--sp-5);
}

.pg-track { fill: none; stroke: rgba(247, 240, 230, 0.16); stroke-width: 2;   stroke-linecap: round; }
.pg-live  { fill: none; stroke: var(--amber);              stroke-width: 2.6; stroke-linecap: round; }
.phase--hold .pg-live { stroke: var(--amber-lt); }
.pg-zone  { fill: rgba(245, 166, 35, 0.10); }
.phase--hold .pg-zone { fill: rgba(245, 166, 35, 0.17); }
.pg-base  { stroke: var(--line); stroke-width: 1; }
.pg-tick  { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.1em; fill: var(--text-faint); }

/* ============================================================
   05 / A plotted figure inside a terminology block
   Same drawing language as the big figures, a third of the
   weight, sitting with the paragraph it explains.
   ============================================================ */
.termfig {
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(16, 13, 9, 0.72);
}

.termfig__svg { display: block; width: 100%; max-width: 480px; height: auto; }
.termfig__cap {
  margin-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  line-height: 1.6;
  color: var(--text-faint);
  max-width: none;
}

.plot-axis { stroke: var(--line-strong); stroke-width: 1; }
.plot-grid { stroke: var(--line); stroke-width: 1; }
.plot-tick { font-size: 12.5px; fill: var(--text-faint); }
.plot-lab  { font-size: 12.5px; fill: var(--text-muted); letter-spacing: 0.08em; }
.plot-a    { fill: none; stroke: var(--amber); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.plot-b    { fill: none; stroke: var(--ember); stroke-width: 1.8; stroke-dasharray: 6 5; }

/* ============================================================
   06 / Layer two carries a photograph beside its argument
   One picture in a run of four rows is a rhythm. Four would be
   a card grid, which this screen deliberately is not.
   ============================================================ */
.layer__body--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 292px);
  gap: var(--sp-6) var(--sp-7);
  align-items: start;
}

/* Two rows in the stack carry a picture. They take opposite sides,
   so the run reads as an alternation instead of a column. */
.layer__body--flip { grid-template-columns: minmax(0, 292px) minmax(0, 1fr); }
.layer__body--flip .layer__shot { order: -1; }

.layer__text { min-width: 0; }

.layer__shot {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-card);
}

.layer__shot .card__media { aspect-ratio: 4 / 3; }
.layer__shot .card__img { filter: sepia(0.30) saturate(1.04) contrast(1.08) brightness(0.90); }

.layer__cap {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  line-height: 1.55;
  color: var(--text-faint);
}

/* --- the four-clock figure ------------------------------------ */
.figure--gap { margin-bottom: var(--sp-8); }
.clockfig { min-width: 780px; width: 100%; height: auto; }

.cf-lane    { fill: rgba(247, 240, 230, 0.05); }
.cf-hold    { fill: rgba(245, 166, 35, 0.26); }
.cf-ramp    { fill: rgba(245, 166, 35, 0.13); }
.cf-edge    { fill: none; stroke: var(--amber); stroke-width: 1.3; stroke-linejoin: round; }
.cf-grid    { stroke: var(--line); stroke-width: 1; }
.cf-name    { font-size: 13px;   fill: var(--text-primary); }
.cf-sub     { font-size: 10.5px; fill: var(--text-faint); }
.cf-tick    { font-size: 10.5px; fill: var(--text-faint); letter-spacing: 0.08em; }
.cf-phase   { fill: rgba(245, 166, 35, 0.09); stroke: var(--line-strong); stroke-width: 1; }
.cf-phase-t { font-size: 10px; fill: var(--amber-dk); letter-spacing: 0.14em; }

/* ============================================================
   08 / Institutions — a lead photograph in front of the index
   So the screen does not open with seven ruled rows and
   nothing to look at.
   ============================================================ */
.lead {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: var(--sp-8);
  align-items: center;
  margin-top: var(--sp-8);
}

.lead__plate .card__media { aspect-ratio: 3 / 2; }
.lead__body { min-width: 0; }

.lead__title {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.1vw, 1.72rem);
  margin-bottom: var(--sp-5);
}

.lead__body p { font-size: 0.93rem; line-height: 1.68; color: var(--text-muted); max-width: 54ch; }
.lead__body p + p { margin-top: var(--sp-4); }

/* The disclosure block keeps its container above the photograph
   layer behind it. */
.disclosure > .container { position: relative; z-index: 2; }

/* ============================================================
   Responsive — three steps
   ============================================================ */
@media (max-width: 1240px) {
  .nav__links { gap: var(--sp-5); }
  .nav__link { font-size: 0.76rem; }
  .layer { grid-template-columns: 168px minmax(0, 1fr) 190px; gap: var(--sp-6); }
}

@media (max-width: 1100px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: flex; }

  .essay { grid-template-columns: 1fr; gap: var(--sp-7); }
  .essay__main { columns: 1; }
  .essay__rail { grid-template-columns: 1fr 1fr; display: grid; gap: var(--sp-6); }

  /* minmax(0, 1fr), not 1fr: a bare `1fr` track takes its floor
     from the item's min-content, and these columns hold figures
     with a min-width (the pathway diagram, the cross-section,
     the composition table). One of those would push the whole
     grid past the viewport instead of scrolling inside itself. */
  .object,
  .science,
  .figs,
  .maker,
  .press__split { grid-template-columns: minmax(0, 1fr); }

  /* And the same on the items: a grid item's own automatic
     minimum size is its min-content, which a min-width'd
     diagram inherits straight through a scroll container. */
  .object > *,
  .science > *,
  .figs > *,
  .maker > *,
  .press__split > * { min-width: 0; }

  .plate--inset { width: 62%; margin-top: calc(var(--sp-7) * -1); margin-right: 0; }

  .track { grid-template-columns: 1fr; }
  .track::before { display: none; }

  .layer { grid-template-columns: 1fr; gap: var(--sp-5); padding: var(--sp-7) 0; }
  .layer__clock { border-left: 0; border-top: 1px solid var(--line-strong); padding-left: 0; padding-top: var(--sp-4); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .layer__clock dd { margin-bottom: 0; }

  .roster__row { grid-template-columns: 1fr; gap: var(--sp-3); }

  .process { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
  .process::before { display: none; }

  .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .note, .note--pull { grid-column: span 2; }
  .note--wide { grid-column: span 4; }

  .disclosure__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .leap { grid-template-columns: 1fr; gap: var(--sp-4); }

  /* Tablets: half-width photographs go full width and dim, so we
     never end up with a lone vertical sliver of image. */
  .section-photo--half { width: 100%; left: 0; right: 0; -webkit-mask-image: none; mask-image: none; }
  .section-photo--half .section-photo__img { opacity: 0.7; }
  .section-photo--half .section-photo__scrim {
    background:
      linear-gradient(to bottom, var(--scrim-edge) 0%, rgba(20, 16, 12, 0.74) 18%,
        rgba(20, 16, 12, 0.74) 82%, var(--scrim-edge) 100%),
      rgba(20, 16, 12, 0.34);
  }

  .section-photo--corner {
    -webkit-mask-image: radial-gradient(ellipse 120% 80% at 100% 0%, #000 0%, rgba(0,0,0,0.5) 52%, transparent 88%);
            mask-image: radial-gradient(ellipse 120% 80% at 100% 0%, #000 0%, rgba(0,0,0,0.5) 52%, transparent 88%);
  }

  .hero__inner { grid-template-columns: 1fr; align-items: start; gap: var(--sp-8); }
  .hero__rail { flex-direction: row; flex-wrap: wrap; gap: var(--sp-7); padding-left: 0; padding-top: var(--sp-6); border-left: 0; border-top: 1px solid var(--line); }
  .hero__read { min-width: 0; }

  .shead--right { text-align: left; margin-left: 0; margin-right: auto; }
  .shead--right .shead__lede { margin-left: 0; }

  /* Side-by-side image blocks stack. Nothing gains a sideways
     scrollbar on the way down — the wide diagrams already have
     their own .scroller and keep it. */
  .lead { grid-template-columns: 1fr; gap: var(--sp-7); }

  .band .card__media { aspect-ratio: 16 / 7; }
  .band--tall .card__media { aspect-ratio: 3 / 1.2; }
}

@media (max-width: 860px) {
  .section { padding: var(--sp-10) 0; }

  .layer__body--split,
  .layer__body--flip { grid-template-columns: 1fr; gap: var(--sp-6); }
  .layer__body--flip .layer__shot { order: 0; }
  .layer__shot { max-width: 420px; }

  .band .card__media,
  .band--tall .card__media { aspect-ratio: 16 / 9; }
  .band__cap { padding: var(--sp-5) var(--sp-6); }
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .note, .note--pull, .note--wide { grid-column: span 2; }
  .chart__canvas-wrap { aspect-ratio: 4 / 3; }
  .disclosure__panel { padding: var(--sp-7) var(--sp-6); }

  /* Six panes in one column. The rule under each heading is what
     keeps them separable once they are stacked. */
  .disclosure__cols { grid-template-columns: 1fr; gap: var(--sp-7); }
  .disclosure__head { padding-bottom: var(--sp-6); margin-bottom: var(--sp-7); }

  .quiet { min-height: 82vh; }
}

@media (max-width: 640px) {
  .nav__inner { padding: 0 var(--sp-5); gap: var(--sp-4); }

  .essay__rail { grid-template-columns: 1fr; }
  .flavours { grid-template-columns: 1fr; }
  .sheet__row { grid-template-columns: 1fr; gap: 3px; }
  .process { grid-template-columns: 1fr; }
  .layer__clock { grid-template-columns: 1fr; }
  .disclosure__facts { grid-template-columns: 1fr; }

  .plate--inset { width: 74%; }

  .btn { width: 100%; justify-content: center; }
  .close { padding: var(--sp-9) var(--sp-5); }

  .chart { padding: var(--sp-5) var(--sp-4); }
  .chart__canvas-wrap { aspect-ratio: 3 / 4; }
  .chart__head { flex-direction: column; align-items: flex-start; }
  .chart__readout .ro--hint { margin-left: 0; }

  .quiet__list li { flex-direction: column; align-items: flex-start; gap: 5px; }
  .footer__grid { flex-direction: column; }

  .band .card__media,
  .band--tall .card__media { aspect-ratio: 4 / 3; }
  .band__cap { max-width: none; padding: var(--sp-5); }
  .band__line { font-size: 0.82rem; }

  /* The kinetics plot is the one figure small enough to shrink
     its own type past legibility. Give it back. */
  .termfig__svg .plot-tick,
  .termfig__svg .plot-lab { font-size: 15px; }

  /* Mobile: drop the parallax headroom (iOS composites fixed
     backgrounds badly) and let photographs sit flush. */
  .section-photo__img,
  .close__img,
  .hero__photo-img { top: 0; height: 100%; transform: none !important; }

  .tone-blur .section-photo__img { left: 0; width: 100%; filter: sepia(0.55) saturate(1.2) blur(20px) contrast(1.24) brightness(0.54); }

  .section-photo--band { height: clamp(200px, 32vh, 300px); }

  .hero__photo-scrim {
    background: linear-gradient(to bottom,
      rgba(20, 16, 12, 0.84) 0%, rgba(20, 16, 12, 0.54) 32%,
      rgba(20, 16, 12, 0.74) 70%, var(--bg-deep) 100%);
  }

  .hero__scroll { display: none; }
}

@media (max-width: 460px) {
  .wall { grid-template-columns: 1fr; }
  .note, .note--pull, .note--wide { grid-column: span 1; }
  .note { padding: var(--sp-6) var(--sp-5); }
  .note__person { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
}

/* ============================================================
   HANDHELD — the fourth step
   Everything from here down is inside a media query. The
   desktop composition above is untouched by all of it.

   The phone is not a narrow desktop. Three things break when
   the columns stack, and each needs its own answer:

     ① a section that was 900px tall becomes 4,000px, and an
        inset:0 background photograph is dragged to 4,000px
        with it — object-fit:cover then shows a 375px slit of
        the middle of the frame and the picture is gone;
     ② diagrams drawn 940 units wide are scaled to 300px, and
        their labels go with them, down to six pixels;
     ③ every tap target sized for a mouse is half the size a
        thumb needs.
   ============================================================ */

/* Affordance for anything that scrolls inside itself. Hidden
   above the breakpoint, where nothing has to be swiped. */
.scroll-hint { display: none; }

@media (max-width: 860px) {

  /* ==========================================================
     ① Photographs — a held band, not a stretched backdrop

     The photograph stops being the section's full height and
     becomes a sticky window roughly two-thirds of a screen
     tall. It keeps one legible crop, and because it is sticky
     it still sits behind the whole section on the way down,
     which is what the full-bleed version was for. Nothing on
     the page is allowed to display taller than it is wide by
     more than about 3:2.
     ========================================================== */
  .section-photo {
    --photo-band: clamp(300px, 56vh, 460px);
    position: sticky;
    top: 0;
    right: auto; bottom: auto; left: auto;
    width: 100%;
    height: var(--photo-band);
    /* the negative margin gives the band back the layout space
       it took, so the section content starts where it did */
    margin-bottom: calc(var(--photo-band) * -1);
  }

  /* Already a band on every screen size; just shorter here. */
  .section-photo--band { --photo-band: clamp(200px, 32vh, 300px); }

  /* The quiet screen centres its one sentence with flexbox, and
     a sticky child would become a flex item and sit beside it.
     Take the centring off — there is nothing left to centre once
     the content is taller than the screen anyway. */
  .section--quiet .quiet {
    display: block;
    overflow: visible;
    min-height: 0;
  }

  /* No parallax headroom on a phone: app.js stops writing the
     transform below this width, so the 124%-tall image would
     just sit 12% too high forever. */
  .section-photo__img,
  .close__img,
  .hero__photo-img {
    top: 0;
    height: 100%;
    transform: none !important;
  }

  /* A landscape frame cropped into a portrait window loses its
     sides, so each grade is re-pointed at its own subject. */
  .tone-scan   .section-photo__img { object-position: 54% 48%; }
  .tone-amber  .section-photo__img { object-position: 56% 46%; }
  .tone-mill   .section-photo__img { object-position: 56% 50%; }
  .tone-duotone .section-photo__img { object-position: 50% 38%; }
  .tone-char   .section-photo__img { object-position: 46% 52%; }
  .tone-room   .section-photo__img { object-position: 50% 42%; }
  .tone-bake   .section-photo__img { object-position: 58% 50%; }
  .tone-flour  .section-photo__img { object-position: 52% 46%; }
  .tone-gild   .section-photo__img { object-position: 50% 50%; }
  .tone-vault  .section-photo__img { object-position: 50% 48%; }

  /* The hero keeps its photograph absolute — the statement is
     set over it — but the frame is capped and the scrim below
     dissolves it into the page floor. */
  .hero__photo { bottom: auto; height: clamp(340px, 66vh, 580px); }

  /* The closing card is a card, so its photograph stays inset —
     the padding comes down instead, which is what was making
     the frame too tall. */
  .close { padding: var(--sp-7) var(--sp-5); }
  .close__img { object-position: center 44%; }

  /* ==========================================================
     ② Wide figures — scroll inside themselves, and say so
     ========================================================== */
  .scroll-hint {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: var(--sp-3);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--amber-dk);
    max-width: none;
  }

  .scroll-hint span {
    font-size: 1rem;
    line-height: 1;
    color: var(--amber);
  }

  .scroller { overscroll-behavior-x: contain; }

  /* The cross-section is the one diagram that was being scaled
     rather than scrolled: at 293px wide its leader labels came
     out at six pixels. Give it a floor and let it scroll. */
  .xsec__scroll { padding-bottom: var(--sp-3); }
  .xsec { min-width: 640px; }
  .xsec-name { font-size: 17px; }
  .xsec-note,
  .xsec-dim,
  .xsec-mark { font-size: 15px; }

  /* The kinetics plot has two 35-character legend lines, and at
     the 301px it gets inside a phone column they came out at
     eight pixels. Setting the type larger in user units instead
     just pushes the legend off the right of the viewBox — so it
     gets a floor and a swipe, like the other two plots. */
  .termfig__svg { min-width: 420px; }
  .termfig__svg .plot-tick,
  .termfig__svg .plot-lab { font-size: 13px; }

  /* .terms is a one-column grid, and an auto track takes its
     floor from the item's min-content — which the plot's
     min-width reaches straight through the scroll container.
     Pin the track and clear the item minimum. */
  .terms { grid-template-columns: minmax(0, 1fr); }
  .terms > *,
  .term > * { min-width: 0; }

  /* The two block diagrams already scrolled, but they were also
     being scaled down inside their scroller: a 1200-unit viewBox
     laid out 940px wide is 78% scale, which turned 10.5px labels
     into 8px. Give each one a floor equal to its own viewBox, so
     the type lands at the size it was specified at, and let the
     swipe cover the extra distance. */
  .pathway__svg { min-width: 1200px; }
  .clockfig { min-width: 960px; }

  .node-s,
  .cf-sub,
  .cf-tick,
  .cf-phase-t { font-size: 12px; }

  .pg-tick { font-size: 9px; }
  .dfig-name { font-size: 9.6px; }
  .dfig-foot { font-size: 9px; }

  .figure { padding: var(--sp-5) var(--sp-4); }

  /* ==========================================================
     ③ Tap targets — 44px minimum, without resizing the design
     Where a control is visually small, the hit area is grown
     with padding or a pseudo-element rather than the ink.
     ========================================================== */
  .nav__logo { min-height: 44px; }

  .nav__toggle {
    width: 44px; height: 44px;
    padding: 5px;
    margin-right: -5px;
  }

  .nav-drawer a { padding: 13px 0; }

  .footer__nav { gap: 0 var(--sp-5); }
  .footer__nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
  }

  /* Anchors set inside running text keep their own size; only
     the standalone controls are grown. */
  .btn { min-height: 46px; }
  .hero__scroll { min-height: 44px; }

  /* ==========================================================
     ④ Type floor

     The desktop scale runs down to eight pixels for labels and
     captions, which is legible at arm's length on a 27-inch
     display and not on a phone. Nothing here changes the scale;
     it only stops the bottom of it — running prose no smaller
     than 15px, no explanatory small print below 12px.
     ========================================================== */
  .essay__main p,
  .aside p,
  .term p,
  .phase__desc,
  .layer__body p,
  .leap p,
  .lead__body p,
  .roster__work,
  .step__desc,
  .trialbox p,
  .disclosure__col p,
  .disclosure__strong,
  .disclosure__list,
  .disclosure__fact dd,
  .close__desc,
  .tol__name,
  .tol__val,
  .quiet__list li,
  .sheet__row dd,
  .flavour,
  .nav-drawer a,
  .maker__name,
  .note__name { font-size: 0.95rem; }

  .shead__lede { font-size: 1.02rem; }
  .note__quote { font-size: 1.02rem; }

  .fnote,
  .refbox__note,
  .chart__note,
  .chart__legend-item,
  .figure__cap,
  .termfig__cap,
  .layer__cap,
  .plate__cap,
  .band__line,
  .note__role,
  .note__src,
  .maker__role,
  .quiet__foot,
  .hero__eyebrow,
  .hero__disclaimer,
  .disclosure__flag,
  .footer__tag,
  .footer__legal,
  .roster__field,
  .roster__name span,
  .layer__clock,
  .chart__readout .ro,
  .chart__readout .ro i,
  .chart__readout .ro--hint,
  .shead__kicker,
  .sheet__title,
  .chart__label,
  .figure__label,
  .phase__meta,
  .layer__depth,
  .close__badge,
  .matrix,
  .matrix thead th,
  .matrix__qual,
  .matrix__capnote,
  .matrix caption { font-size: 0.75rem; }

  .band__line { line-height: 1.6; }
  .fnote { line-height: 1.66; }

  /* A 22-character strapline cannot be set at 12px beside the
     wordmark on a phone bar, and it is decoration — the name is
     the part that carries meaning. */
  .nav__logo-sub { display: none; }

  /* ----------------------------------------------------------
     The floor above caught the captions and the small print but
     missed the micro-labels — the all-caps mono tags that sit
     over a figure, a term or a definition list. They were set
     between 9.3px and 10.9px, which is under the floor this
     section exists to hold.

     They are set in wide tracking, and 12px at 0.2em is wider
     than 9.6px at 0.2em by more than the extra type: each one
     gives back tracking in proportion so the label occupies
     about the width it did.
     ---------------------------------------------------------- */
  .hero__read-label   { font-size: 0.75rem; letter-spacing: 0.14em; }
  .aside__label       { font-size: 0.75rem; letter-spacing: 0.14em; }
  .refbox__label      { font-size: 0.75rem; letter-spacing: 0.13em; }
  .leap__label        { font-size: 0.75rem; letter-spacing: 0.1em; }
  .phase__mark        { font-size: 0.75rem; letter-spacing: 0.1em; }
  .plate__tag         { font-size: 0.75rem; letter-spacing: 0.09em; }
  .tol__title         { font-size: 0.75rem; letter-spacing: 0.12em; }
  .layer__clock dt    { font-size: 0.75rem; letter-spacing: 0.12em; }
  .disclosure__fact dt { font-size: 0.75rem; letter-spacing: 0.1em; }
  .disclosure__sub     { font-size: 0.75rem; letter-spacing: 0.14em; }
  .sheet__row dt      { font-size: 0.75rem; letter-spacing: 0.09em; }
  .quiet__list li span { font-size: 0.75rem; letter-spacing: 0.1em; }
  .matrix .cls        { font-size: 0.75rem; letter-spacing: 0.07em; }
  .footer__name span  { font-size: 0.75rem; letter-spacing: 0.12em; }

  /* The phase glyph is drawn on a 124-unit viewBox and laid out
     at exactly 124px, so its D0/D30 ticks render at the 9px they
     are specified at. Nothing inside can be enlarged without
     moving the curve, so the drawing is scaled instead: 166px
     puts the ticks at 12px and the glyph is still a third of
     the column. */
  .phase__glyph { width: 166px; }

  /* 9px inside a viewBox that lands at 1.32x is 11.9px — under
     the floor by a tenth of a pixel. */
  .dfig-foot { font-size: 9.6px; }
}

@media (max-width: 640px) {

  /* ---- Measure and gutters --------------------------------
     Text may not touch the glass. 20px each side, and the
     figure shells come in to match. */
  .container { padding: 0 20px; }
  .quiet__inner { padding: var(--sp-9) 20px; }
  .chart { padding: var(--sp-5) var(--sp-4); }
  .note { padding: var(--sp-6) var(--sp-5); }
  .disclosure__panel { padding: var(--sp-7) var(--sp-5); }
  .trialbox { padding: var(--sp-5); }
  .leap { padding: var(--sp-5); }
  .tol { padding: var(--sp-6) var(--sp-5); }
  .band__cap { padding: var(--sp-5) 20px; }

  /* ---- Charts ---------------------------------------------
     A thirty-day time series drawn taller than it is wide reads
     as a different chart. Keep it landscape and let it be short.
     ---------------------------------------------------------- */
  .chart__canvas-wrap,
  .chart__canvas-wrap--short { aspect-ratio: 5 / 4; min-height: 260px; }
}

/* Landscape phone (812 x 375). Every band above is sized in vh,
   so on a 375px-tall viewport they collapse to letterboxes. Hold
   a pixel floor instead, and stop the hero reserving a screen it
   no longer has. */
@media (max-width: 940px) and (orientation: landscape) and (max-height: 540px) {
  .section-photo { --photo-band: 300px; }
  .hero__photo { bottom: auto; height: 300px; }
  .hero { min-height: 0; padding-top: calc(var(--topbar-h) + var(--nav-h) + var(--sp-6)); }
  .quiet { min-height: 0; }
  .quiet__inner { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
}