/* ============================================
   COMPONENTS.CSS — chrome, section skeletons, cards, footer
   KUNLUN BIO — ORVENNE-1
   FICTIONAL DEMO. NOT A REAL PRODUCT.

   Twelve screens, twelve different skeletons. The section
   blocks below are deliberately NOT interchangeable — each
   one owns its own grid, and none of them is a card wall.
   ============================================ */

/* ============================================
   Caution block — retired banner, live glyph

   The full-width fiction banner this styled is gone from the
   markup: everything it said now sits in the "About this page"
   block that closes the document, so the writing is not
   interrupted every screen. The rules stay for two reasons.
   .notice__icon is still used by .data__disclaimer, and
   app.js re-measures --notice-h if a banner is ever put back.
   Amber throughout, on purpose: it sits outside the jade
   palette so a caution can never read as decoration.
   ============================================ */
.notice {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  min-height: var(--notice-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  padding: 8px var(--sp-12);
  background: linear-gradient(90deg, #2a2008 0%, #3a2c0a 50%, #2a2008 100%);
  border-bottom: 1px solid var(--warn-line);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
  transform: translateY(0);
  transition: transform var(--t-med) var(--ease);
}

.notice__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--warn);
  color: var(--warn);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}

.notice__text {
  font-size: 0.8rem;
  line-height: 1.5;
  color: #ffe8b0;
  letter-spacing: 0.005em;
  max-width: 96ch;
  text-align: center;
}

.notice__text strong { color: var(--warn); font-weight: 700; }
.notice__text em { font-style: normal; color: #ffe8b0; opacity: 0.86; }

.notice__close {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #d9c48a;
  font-size: 1rem;
  line-height: 1;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.notice__close:hover {
  background: rgba(255, 209, 102, 0.16);
  color: var(--warn);
}

body.is-notice-hidden .notice { transform: translateY(-100%); }

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

body.is-notice-hidden .nav { top: 0; }

.nav--scrolled {
  background: rgba(7, 16, 13, 0.86);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 1px 0 var(--line), 0 6px 34px rgba(0, 0, 0, 0.5);
}

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

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

/* Molecular mark: shell + nucleus */
.nav__mark {
  position: relative;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--jade);
  display: grid;
  place-items: center;
  box-shadow: 0 0 14px var(--glow-32), inset 0 0 10px var(--glow-16);
}

.nav__mark::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--jade);
  box-shadow: 0 0 8px var(--jade);
}

.nav__mark::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--line);
}

.nav__name { display: flex; flex-direction: column; line-height: 1.1; }

.nav__name-en {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--bone);
}

.nav__name-sub {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  color: var(--muted);
}

/* ============================================
   Nav badge — retired

   The amber "FICTIONAL DEMO" pill that used to sit between the
   wordmark and the links is gone from the markup. Everything it
   said is in the "About this page" block that closes the
   document, which is now the only place on the page that talks
   about the page. The rules below are kept, unreferenced, so
   that putting a badge back is a one-line markup change rather
   than a re-derivation of six media queries — but nothing in
   index.html carries this class, and nothing should.
   ============================================ */
.nav__fiction {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--warn-line);
  background: var(--warn-bg);
  color: var(--warn);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(7, 16, 13, 0.6), 0 2px 12px rgba(255, 209, 102, 0.16);
}

.nav__fiction::before {
  content: '';
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 0 7px var(--warn);
}

.nav__links { display: flex; gap: var(--sp-12); margin-left: auto; }

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

.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--jade);
  box-shadow: 0 0 6px var(--glow-32);
  transition: width var(--t-med) var(--ease);
}

.nav__link:hover { color: var(--jade-soft); }
.nav__link:hover::after,
.nav__link.is-active::after { width: 100%; }
.nav__link.is-active { color: var(--bone); }

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

.nav__cta:hover {
  background: var(--jade);
  color: var(--void);
  box-shadow: 0 0 24px var(--glow-32);
}

.nav__toggle {
  display: none;
  flex-direction: column;
  flex-shrink: 0;
  gap: 5px;
  width: 26px;
  margin-left: auto;
}

.nav__toggle span {
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background: var(--jade);
  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(--notice-h) + var(--nav-h));
  left: 0;
  right: 0;
  z-index: 1090;
  padding: var(--sp-8) var(--sp-16) var(--sp-16);
  background: rgba(7, 16, 13, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-med) var(--ease),
              transform var(--t-med) var(--ease),
              visibility var(--t-med),
              top var(--t-med) var(--ease);
}

body.is-notice-hidden .nav__drawer { top: var(--nav-h); }

.nav__drawer.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.nav__drawer a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-8);
  padding: 12px 0;
  border-bottom: 1px solid var(--line-cold);
  font-size: 0.92rem;
  color: var(--text);
}

.nav__drawer a span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--faint);
}

.nav__drawer a:last-child { border-bottom: none; }

/* ============================================
   Scroll progress
   ============================================ */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1300;
  height: 2px;
  background: transparent;
  pointer-events: none;
}

.progress__bar {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--jade-deep), var(--jade), var(--jade-soft));
  box-shadow: 0 0 12px var(--glow-32);
}

#particles-canvas {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
}

/* ============================================
   Buttons — capsule form, the house signature
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  white-space: nowrap;
  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-fast) var(--ease);
}

.btn--solid {
  background: var(--jade);
  border-color: var(--jade);
  color: #04150f;
  font-weight: 600;
  box-shadow: 0 6px 28px rgba(61, 220, 151, 0.22);
}

.btn--solid:hover {
  background: var(--jade-soft);
  color: #04150f;
  transform: translateY(-2px);
  box-shadow: 0 10px 40px rgba(61, 220, 151, 0.36);
}

.btn--ghost {
  background: rgba(61, 220, 151, 0.05);
  border-color: var(--line-hi);
  color: var(--jade);
}

.btn--ghost:hover {
  background: var(--glow-16);
  border-color: var(--jade);
  color: var(--jade-soft);
  transform: translateY(-2px);
}

.btn--lg { padding: 16px 36px; font-size: 0.94rem; }

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

/* ============================================
   Section shell
   ============================================ */
.section {
  position: relative;
  padding: var(--sp-64) 0;
  isolation: isolate;
}

.section--alt  { background: var(--surface); }
.section--tight { padding: var(--sp-48) 0; }

.section > .wrap { position: relative; z-index: 2; }

.section + .section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(760px, 82%);
  height: 1px;
  z-index: 3;
  background: linear-gradient(90deg, transparent, var(--line-hi), transparent);
}

/* --- Section header, default: title left, standfirst right --- */
.head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--sp-16) var(--sp-32);
  align-items: end;
  margin-bottom: var(--sp-32);
  padding-bottom: var(--sp-16);
  border-bottom: 1px solid var(--line-cold);
}

/* --- Variant: eyebrow + title only. No standfirst. --- */
.head--bare {
  grid-template-columns: 1fr;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: var(--sp-24);
}

/* --- Variant: title above, standfirst indented underneath --- */
.head--under {
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--sp-12);
}

.head--under .head__desc {
  margin-left: clamp(0px, 12vw, 168px);
  border-left: 1px solid var(--line);
}

/* --- Variant: standfirst first, headline under it. Used on the one
   screen whose subject is that its own figures are invented, so the
   admission arrives before the claim rather than after it. --- */
.head--lede {
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--sp-16);
}

.head--lede .head__desc {
  max-width: 64ch;
  padding: var(--sp-12) var(--sp-16);
  border-left: 2px solid var(--warn-line);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--warn-bg);
  color: var(--text);
}

.head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--sp-8);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  color: var(--jade);
  text-transform: uppercase;
}

.head__eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--jade);
  box-shadow: 0 0 6px var(--glow-32);
}

.head__title { margin-bottom: 0; }

.head__desc {
  font-size: 0.93rem;
  line-height: 1.7;
  color: var(--muted);
  max-width: 56ch;
  padding-left: var(--sp-16);
  border-left: 1px solid var(--line);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--glow-04);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  color: var(--jade);
  text-transform: uppercase;
}

/* Inline fiction chip. Rides alongside every number and every name. */
.fict {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--warn-line);
  background: var(--warn-bg);
  color: var(--warn);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  vertical-align: middle;
  text-transform: uppercase;
}

/* Section-scale fiction banner. Louder than .fict, used where a
   screen carries credibility signals of its own (institutions, data). */
.fict-band {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-8);
  padding: var(--sp-12);
  border-radius: var(--r-md);
  border: 1px solid var(--warn-line);
  background: var(--warn-bg);
}

.fict-band p {
  font-size: 0.82rem;
  line-height: 1.62;
  color: #ffe8b0;
  max-width: none;
}

.fict-band strong { color: var(--warn); font-weight: 700; }

.fict-band__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--warn);
  color: var(--warn);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

/* Footnote / marginal aside. Small, dim, allowed to be incomplete. */
.footnote {
  margin-top: var(--sp-12);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--line-cold);
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--faint);
  max-width: 62ch;
}

.footnote sup { color: var(--jade-dim); font-family: var(--font-mono); }

/* ============================================
   Photo layer system
   image → grade → jade wash (mix-blend) → scrim → 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%;
  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-jade);
  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--alt .section-photo { --scrim-edge: var(--surface); }

.section-photo--half { width: 56%; }

.section-photo--right {
  left: auto;
  right: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 26%, #000 60%);
          mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 26%, #000 60%);
}

.section-photo--left {
  left: 0;
  right: auto;
  -webkit-mask-image: linear-gradient(to left, transparent 0%, rgba(0,0,0,0.5) 26%, #000 60%);
          mask-image: linear-gradient(to left, transparent 0%, rgba(0,0,0,0.5) 26%, #000 60%);
}

.section-photo--half .section-photo__scrim {
  background:
    linear-gradient(to bottom,
      var(--scrim-edge) 0%,
      rgba(7, 16, 13, 0.60) 16%,
      rgba(7, 16, 13, 0.60) 84%,
      var(--scrim-edge) 100%),
    rgba(7, 16, 13, 0.46);
}

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

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

.section-photo--footband {
  top: auto;
  height: clamp(300px, 46vh, 520px);
}

.section-photo--footband .section-photo__img { top: 0; height: 112%; }

.section-photo--footband .section-photo__scrim {
  background: linear-gradient(to bottom,
    var(--scrim-edge) 0%,
    rgba(7, 16, 13, 0.88) 34%,
    rgba(7, 16, 13, 0.74) 100%);
}

/* --- Grades: no two adjacent screens get the same treatment --- */
.section-photo--tone-clinical .section-photo__img {
  filter: grayscale(0.86) contrast(1.26) brightness(0.40) saturate(0.5);
}
.section-photo--tone-clinical .section-photo__tint {
  background: linear-gradient(115deg,
    rgba(61, 220, 151, 0.20) 0%,
    rgba(125, 154, 144, 0.10) 44%,
    rgba(7, 16, 13, 0.60) 100%);
  mix-blend-mode: overlay;
}

/* Specimen bench: source is white-on-white, needs a hard push */
.section-photo--tone-specimen .section-photo__img {
  filter: grayscale(1) contrast(1.24) brightness(0.52);
}
.section-photo--tone-specimen .section-photo__tint {
  background: var(--wash-duotone);
  mix-blend-mode: color;
  opacity: 0.92;
}
.section-photo--tone-specimen .section-photo__scrim {
  background:
    radial-gradient(120% 78% at 72% 44%, transparent 0%, rgba(7,16,13,0.72) 62%, var(--scrim-edge) 100%),
    linear-gradient(to bottom, var(--scrim-edge) 0%, rgba(7,16,13,0.52) 24%, rgba(7,16,13,0.66) 76%, var(--scrim-edge) 100%);
}

/* Under the objective: soft blur + circular falloff */
.section-photo--tone-scope .section-photo__img {
  filter: grayscale(0.72) blur(7px) contrast(1.20) brightness(0.58) saturate(0.9);
  transform: scale(1.06);
}
.section-photo--tone-scope .section-photo__tint {
  background: radial-gradient(60% 60% at 40% 46%,
    rgba(61, 220, 151, 0.42) 0%,
    rgba(15, 118, 110, 0.20) 46%,
    rgba(7, 16, 13, 0.72) 100%);
  mix-blend-mode: overlay;
}

/* Abstract: blurred past recognition, light only */
.section-photo--tone-abstract .section-photo__img {
  left: -7%;
  width: 114%;
  filter: grayscale(1) blur(34px) contrast(1.35) brightness(0.46);
}
.section-photo--tone-abstract .section-photo__tint {
  background: var(--wash-duotone);
  mix-blend-mode: color;
  opacity: 0.85;
}

/* Near-monochrome. The source is a film sheet of scans whose header
   carries record text; it is blurred until none of that is legible and
   only the grid of frames survives as texture. */
.section-photo--tone-mono .section-photo__img {
  filter: grayscale(0.96) contrast(1.16) brightness(0.52) blur(9px);
  object-position: center 30%;
  transform: scale(1.04);
}
.section-photo--tone-mono .section-photo__scrim {
  background:
    linear-gradient(to bottom,
      var(--scrim-edge) 0%,
      rgba(7, 16, 13, 0.80) 22%,
      rgba(7, 16, 13, 0.86) 78%,
      var(--scrim-edge) 100%),
    rgba(7, 16, 13, 0.42);
}

.section-photo--tone-duotone .section-photo__img {
  filter: grayscale(1) contrast(1.16) brightness(0.92);
  object-position: center 26%;
}
.section-photo--tone-duotone .section-photo__tint {
  background: var(--wash-duotone);
  mix-blend-mode: color;
  opacity: 0.94;
}
.section-photo--tone-duotone .section-photo__scrim {
  background:
    linear-gradient(to right,
      rgba(7, 16, 13, 0.92) 0%,
      rgba(7, 16, 13, 0.80) 42%,
      rgba(7, 16, 13, 0.30) 76%,
      rgba(7, 16, 13, 0.48) 100%),
    linear-gradient(to bottom,
      var(--scrim-edge) 0%,
      rgba(7, 16, 13, 0.26) 20%,
      rgba(7, 16, 13, 0.32) 80%,
      var(--scrim-edge) 100%);
}

.section-photo--tone-deep .section-photo__img {
  filter: grayscale(1) contrast(1.14) brightness(0.54) blur(2px);
  transform: scale(1.03);
}
.section-photo--tone-deep .section-photo__tint {
  /* Same caution as the hero: a `color` blend needs chroma, not black */
  background: linear-gradient(200deg, #4fe0a8 0%, #17836f 58%, #10564b 100%);
  mix-blend-mode: color;
  opacity: 0.8;
}

/* Concrete institutional interior, lit only by its own ceiling
   fittings. Darker at source than any other photograph here, so the
   brightness goes up rather than down; measured, this lands at mean
   luminance ~30, in line with the other section bands. Full duotone
   because bare concrete is neutral and would otherwise read grey. */
.section-photo--tone-interior .section-photo__img {
  filter: grayscale(1) contrast(1.22) brightness(0.85);
  object-position: center 46%;
}
.section-photo--tone-interior .section-photo__tint {
  background: var(--wash-duotone);
  mix-blend-mode: color;
  opacity: 0.94;
}

/* Smooth wave field, already close to the palette. Graded lightly so
   the form survives, then dropped well under the headline. */
.section-photo--tone-wave .section-photo__img {
  filter: grayscale(0.55) contrast(1.16) brightness(0.46) saturate(0.9);
  object-position: center 40%;
  transform: scale(1.04);
}
.section-photo--tone-wave .section-photo__tint {
  background: var(--wash-jade-soft);
  mix-blend-mode: overlay;
  opacity: 0.9;
}

.section-photo--tone-glass .section-photo__img {
  filter: grayscale(0.82) contrast(1.14) brightness(0.56) saturate(0.7);
  object-position: center 58%;
}
.section-photo--tone-glass .section-photo__tint {
  background: var(--wash-jade-soft);
  mix-blend-mode: overlay;
  opacity: 0.85;
}

/* ============================================
   SKELETON 1 — HERO
   Split: type on the left, a live structure on the right.
   ============================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  padding-top: calc(var(--notice-h) + var(--nav-h) + var(--sp-16));
  padding-bottom: var(--sp-24);
  background: var(--void);
}

.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%;
  /* The source is a bright glassware bench. Push it too far and the
     frame goes flat black; not far enough and it eats the headline.
     This grade is the balance point. */
  /* The source bench is dark on the right, where the structure sits.
     It needs lifting, not crushing; the headline side is held down by
     the scrim instead. */
  filter: grayscale(0.5) contrast(1.08) brightness(1.14) saturate(0.72);
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

/* Cools the bench to jade. Kept off the near-black end of the ramp:
   dark stops in a `color` blend swallow the photograph whole, which is
   how this hero spent an afternoon looking like an empty black panel. */
.hero__photo-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(148deg,
    rgba(61, 220, 151, 0.46) 0%,
    rgba(15, 118, 110, 0.34) 44%,
    rgba(61, 220, 151, 0.16) 76%,
    rgba(15, 118, 110, 0.26) 100%);
  mix-blend-mode: color;
  opacity: 0.62;
}

.hero__photo-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(7, 16, 13, 0.95) 0%,
      rgba(7, 16, 13, 0.88) 34%,
      rgba(7, 16, 13, 0.34) 66%,
      rgba(7, 16, 13, 0.46) 100%),
    linear-gradient(to bottom,
      rgba(7, 16, 13, 0.72) 0%,
      rgba(7, 16, 13, 0.08) 30%,
      rgba(7, 16, 13, 0.30) 66%,
      var(--void) 100%);
}

/* Scanline plate: instrument sampling texture */
.hero__scan {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(61, 220, 151, 0.045) 0px,
    rgba(61, 220, 151, 0.045) 1px,
    transparent 1px,
    transparent 5px);
  opacity: 0.5;
}

.hero__inner {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: var(--wrap-lg);
  margin: 0 auto;
  padding: 0 var(--sp-16);
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: var(--sp-24);
  align-items: center;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--sp-16);
  padding: 6px 16px 6px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-hi);
  background: rgba(7, 16, 13, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--jade);
  text-transform: uppercase;
}

.hero__eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--jade);
  box-shadow: 0 0 8px var(--jade);
}

.hero__title {
  margin-bottom: var(--sp-12);
  max-width: 13ch;
  text-shadow: 0 4px 40px rgba(7, 16, 13, 0.92);
}

.hero__title .glow {
  color: var(--jade);
  text-shadow: 0 0 34px rgba(61, 220, 151, 0.5);
}

.hero__title .thin {
  display: block;
  font-size: 0.52em;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-top: 0.18em;
}

.hero__lede {
  max-width: 44ch;
  margin-bottom: var(--sp-8);
  font-size: clamp(0.98rem, 1.2vw, 1.1rem);
  line-height: 1.68;
  color: var(--text);
}

/* ============================================
   Hero specimen strip — retired

   The SPECIMEN XY-ORVENNE-0001 line under the hero actions is gone
   from the markup for the same reason the nav badge is: the
   closing block says all of it, once. The hero now reads
   eyebrow → headline → lede → actions and stops. Rules kept,
   unreferenced; see the note on .nav__fiction above.
   ============================================ */
.hero__specimen {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 12px;
  max-width: 52ch;
  margin-bottom: var(--sp-16);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--warn-line);
  font-family: var(--font-mono);
  font-size: 0.63rem;
  line-height: 1.55;
  letter-spacing: 0.05em;
}

.hero__specimen-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--warn-line);
  background: var(--warn-bg);
  color: var(--warn);
  font-weight: 600;
  white-space: nowrap;
}

.hero__specimen-tag::before {
  content: '';
  width: 5px;
  height: 5px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 0 7px var(--warn);
}

.hero__specimen-body {
  flex: 1 1 22ch;
  min-width: 0;
  color: var(--faint);
}

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

/* Right column: the interactive structure */
.hero__structure {
  position: relative;
  align-self: center;
  aspect-ratio: 1 / 1;
  max-height: 60svh;
  margin-left: auto;
  width: 100%;
}

.hero__structure canvas { width: 100%; height: 100%; cursor: crosshair; }

.hero__structure-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__structure-frame::before,
.hero__structure-frame::after {
  content: '';
  position: absolute;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line-hi);
}

.hero__structure-frame::before { top: 8%; left: 6%; border-right: 0; border-bottom: 0; }
.hero__structure-frame::after  { bottom: 8%; right: 6%; border-left: 0; border-top: 0; }

.hero__structure-label {
  position: absolute;
  left: 6%;
  bottom: 3%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.09em;
  color: var(--jade-dim);
  pointer-events: none;
}

.hero__structure-label b { color: var(--jade-soft); font-weight: 500; }
.hero__structure-label i { font-style: normal; color: var(--faint); }

/* Two readings only. Everything else can wait for the data screen. */
.hero__stats {
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-24);
  width: 100%;
  max-width: var(--wrap-lg);
  margin: var(--sp-24) auto 0;
  padding: var(--sp-12) var(--sp-16) 0;
  border-top: 1px solid var(--line-cold);
}

.hero__stat { display: flex; align-items: baseline; gap: var(--sp-8); }

.hero__stat-value {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight: 600;
  line-height: 1;
  color: var(--jade);
  text-shadow: 0 0 26px rgba(61, 220, 151, 0.32);
}

.hero__stat-unit { font-size: 0.8rem; font-weight: 400; color: var(--jade-dim); }

.hero__stat-label {
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--muted);
  max-width: 22ch;
}

/* Inline, not a block underneath. The qualifier has to be inside the
   label's own sentence so that no crop of the stat can leave it behind.
   Jade, not amber: amber is now the notice's colour and the notice's
   only, so a unit qualifier has no business wearing it. */
.hero__stat-label em {
  display: inline;
  white-space: nowrap;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  color: var(--jade-dim);
  opacity: 0.95;
  text-transform: uppercase;
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 5;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.24em;
  color: var(--faint);
}

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

/* ============================================
   SKELETON 2 — THE DECLINE
   Magazine long-form: drop cap, two text columns,
   a marginal note, and a chart panel on the right.
   ============================================ */
.essay {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: var(--sp-32);
  align-items: start;
}

.essay__lede {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.1vw, 1.72rem);
  line-height: 1.42;
  letter-spacing: -0.012em;
  color: var(--bone);
  max-width: 30ch;
  margin-bottom: var(--sp-16);
}

.essay__body {
  columns: 2;
  column-gap: var(--sp-16);
  column-rule: 1px solid var(--line-cold);
}

.essay__body p {
  font-size: 0.9rem;
  line-height: 1.72;
  color: var(--text);
  max-width: none;
  margin-bottom: var(--sp-8);
  break-inside: avoid-column;
}

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

/* Drop cap. Serif, jade, four lines deep. */
.essay__body > p:first-child::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 3.9em;
  line-height: 0.78;
  padding: 0.06em 0.1em 0 0;
  color: var(--jade);
  text-shadow: 0 0 28px rgba(61, 220, 151, 0.35);
}

.essay__aside { display: flex; flex-direction: column; gap: var(--sp-12); }

/* Marginal note: hangs off the text, allowed to interrupt */
.sidenote {
  margin-top: var(--sp-16);
  padding: var(--sp-8) var(--sp-12);
  border-left: 2px solid var(--jade-deep);
  background: rgba(15, 118, 110, 0.08);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 46ch;
}

.sidenote b {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jade);
  margin-bottom: 3px;
}

/* Chart panel, shared by the decline and evidence screens */
.chart {
  position: relative;
  padding: var(--sp-16);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(16, 48, 41, 0.5) 0%, rgba(7, 16, 13, 0.86) 100%);
  box-shadow: inset 0 1px 0 var(--glow-08), 0 20px 60px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.chart::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(61, 220, 151, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(61, 220, 151, 0.05) 1px, transparent 1px);
  background-size: 38px 38px;
}

.chart__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: var(--sp-12);
}

.chart__title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bone);
  letter-spacing: -0.005em;
}

.chart__unit {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.05em;
  color: var(--faint);
}

.chart__canvas-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.chart__canvas-wrap canvas { width: 100%; height: 100%; }

.chart__foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  flex-wrap: wrap;
  margin-top: var(--sp-12);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--line-cold);
}

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

/* Carries the reading of the plot: which series are drawn, which are
   not and why, and what the gap between two curves is worth. Sits under
   the legend, in the legend's register. */
.chart__note {
  flex: 1 1 100%;
  font-size: 0.7rem;
  line-height: 1.55;
  color: var(--faint);
}

.chart__note b { color: var(--jade-dim); font-weight: 600; }

.chart__key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.63rem;
  color: var(--muted);
}

.chart__key i { width: 14px; height: 3px; border-radius: 2px; background: var(--jade); }
.chart__key--alt i  { background: var(--muted); opacity: 0.7; }
.chart__key--warn i { background: var(--warn); }

/* Horizontal readout bars */
.bars { display: flex; flex-direction: column; gap: var(--sp-8); }

.bar__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px var(--sp-8);
  align-items: baseline;
}

.bar__label { font-size: 0.82rem; color: var(--text); }

.bar__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--jade);
}

.bar__track {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--panel-deep);
  border: 1px solid var(--line-cold);
  overflow: hidden;
}

.bar__fill {
  /* A span is inline by default, and width/height do not apply to a
     non-replaced inline box — without this the fill never renders at
     any value and all three tracks read as empty. */
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--jade-deep), var(--jade));
  box-shadow: 0 0 12px var(--glow-32);
  transition: width 1.6s var(--ease);
}

.bar__row--muted .bar__fill { background: linear-gradient(90deg, #33463f, #55726a); box-shadow: none; }
.bar__row--muted .bar__value { color: var(--muted); }

/* ============================================
   SKELETON 3 — THE PRODUCT
   Specification sheet. The table is the layout;
   the photograph is a narrow left margin.
   ============================================ */
.sheet {
  display: grid;
  grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr);
  gap: var(--sp-24);
  align-items: start;
}

.sheet__col { display: flex; flex-direction: column; gap: var(--sp-12); }

.product__shot {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 60px var(--glow-08);
}

.product__shot .media { aspect-ratio: 4 / 5; }

.product__shot-caption {
  position: absolute;
  left: var(--sp-12);
  bottom: var(--sp-12);
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product__shot-caption b {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--bone);
  text-shadow: 0 2px 14px rgba(7, 16, 13, 0.95);
}

.product__shot-caption span {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--jade-soft);
  text-shadow: 0 2px 14px rgba(7, 16, 13, 0.95);
}

.product__ticks { position: absolute; inset: 12px; z-index: 4; pointer-events: none; }

.product__ticks::before,
.product__ticks::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line-hi);
}

.product__ticks::before { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: var(--r-sm) 0 0 0; }
.product__ticks::after  { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 var(--r-sm) 0; }

.product__name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin-bottom: var(--sp-8);
}

.product__name h3 {
  font-size: clamp(1.7rem, 2.8vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.product__name .mono {
  font-size: 0.86rem;
  color: var(--jade);
  padding: 3px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-hi);
  background: var(--glow-04);
}

.product__desc { margin-bottom: var(--sp-16); font-size: 0.95rem; }

/* Specification table — the dense screen's backbone */
.spec {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: rgba(7, 16, 13, 0.6);
}

.spec caption {
  padding: 10px var(--sp-12);
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jade-dim);
  background: rgba(61, 220, 151, 0.05);
  border-bottom: 1px solid var(--line);
}

.spec tr { border-bottom: 1px solid var(--line-cold); }
.spec tr:last-child { border-bottom: none; }

.spec th,
.spec td {
  padding: 10px var(--sp-12);
  text-align: left;
  font-size: 0.84rem;
  vertical-align: top;
  line-height: 1.5;
}

.spec th {
  width: 32%;
  font-weight: 500;
  color: var(--muted);
  background: rgba(61, 220, 151, 0.035);
  letter-spacing: 0.005em;
}

.spec td { color: var(--bone); }
.spec td .mono { color: var(--jade); font-size: 0.8rem; }

/* Three presentations. Not four, not six. */
.forms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-8);
}

.form-card {
  position: relative;
  padding: var(--sp-12);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
  transition: border-color var(--t-med) var(--ease),
              transform var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease);
}

.form-card:hover {
  border-color: var(--line-hi);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 40px var(--glow-08);
}

.form-card__pill {
  display: block;          /* it is a <span>; without this the box collapses */
  width: 40px;
  height: 16px;
  margin-bottom: var(--sp-8);
  border-radius: var(--r-pill);
  border: 1px solid var(--jade);
  background: linear-gradient(90deg, var(--jade) 0 50%, transparent 50% 100%);
  box-shadow: 0 0 14px var(--glow-32);
}

.form-card--b .form-card__pill {
  border-radius: 50%; width: 20px; height: 20px;
  background: radial-gradient(circle at 34% 32%, var(--jade-soft), var(--jade-deep));
}
.form-card--c .form-card__pill {
  border-radius: var(--r-sm); width: 22px; height: 24px;
  background: linear-gradient(180deg, var(--jade) 0%, rgba(61,220,151,0.15) 100%);
}

.form-card__name { font-size: 0.9rem; font-weight: 600; color: var(--bone); margin-bottom: 3px; }
.form-card__meta { font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted); }

/* "What it is not" — three flat negations, no icons */
.negations { display: flex; flex-direction: column; gap: 0; }

.negations li {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--sp-8);
  padding: 10px 0;
  border-top: 1px solid var(--line-cold);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--muted);
}

.negations li b {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  padding-top: 3px;
}

.negations li i { font-style: normal; color: var(--text); }

/* Foil texture strip */
.foil {
  position: relative;
  height: 96px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line-cold);
  isolation: isolate;
}

.foil__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
  /* Softened into a band of light rather than a second product shot. */
  filter: grayscale(1) blur(5px) contrast(1.35) brightness(0.5);
  transform: scale(1.25);
}

.foil__tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #43e6a4 0%, #0f766e 58%, #061512 100%);
  mix-blend-mode: color;
  opacity: 0.9;
}

.foil__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7,16,13,0.92) 0%, rgba(7,16,13,0.5) 46%, rgba(7,16,13,0.9) 100%);
}

.foil__label {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding: 0 var(--sp-16);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  color: var(--jade-soft);
}

/* ============================================
   SKELETON 4 — MECHANISM
   Horizontal timeline. The rail is drawn on entry;
   the three phase blocks hang off it at different heights.
   ============================================ */
.rail {
  position: relative;
  padding: var(--sp-16) var(--sp-16) var(--sp-8);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(12, 28, 24, 0.72) 0%, rgba(7, 16, 13, 0.9) 100%);
  box-shadow: inset 0 1px 0 var(--glow-08), 0 24px 70px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.rail__svg { width: 100%; height: auto; display: block; min-width: 720px; }

.rail__axis {
  display: flex;
  justify-content: space-between;
  margin-top: var(--sp-8);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--line-cold);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--faint);
  min-width: 720px;
}

.rail__axis b { color: var(--jade-dim); font-weight: 500; }

/* Phase blocks: staggered heights break the three-across grid */
.phases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-16);
  margin-top: var(--sp-24);
  align-items: start;
}

.phase { position: relative; padding-top: var(--sp-16); border-top: 2px solid var(--jade-deep); }
.phase:nth-child(2) { margin-top: var(--sp-24); }
.phase:nth-child(3) { margin-top: var(--sp-48); }

.phase__no {
  position: absolute;
  top: calc(var(--sp-16) * -1);
  left: 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--jade);
  text-transform: uppercase;
}

.phase__time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--faint);
  margin-bottom: var(--sp-4);
}

.phase h3 { margin-bottom: var(--sp-8); }

.phase p { font-size: 0.87rem; line-height: 1.68; color: var(--muted); }
.phase p + p { margin-top: var(--sp-8); }

.phase__note {
  margin-top: var(--sp-12);
  padding-top: var(--sp-8);
  border-top: 1px dashed rgba(125, 154, 144, 0.2);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--jade);
}

.phase__note span { color: var(--faint); }

/* Two constraints, set as a plain prose pair below the timeline */
.constraints {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-24);
  margin-top: var(--sp-32);
  padding-top: var(--sp-16);
  border-top: 1px solid var(--line-cold);
}

.constraints h4 {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 400;
  color: var(--jade-soft);
  margin-bottom: var(--sp-4);
}

.constraints p { font-size: 0.87rem; color: var(--muted); }

/* ============================================
   SKELETON 5 — MOLECULAR BASIS
   Diagram-dominant and deliberately off-centre: the
   schematics sit left of the axis, notes hug the right edge.
   ============================================ */
.basis {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 0.58fr);
  gap: var(--sp-24);
  align-items: start;
}

.schem {
  position: relative;
  padding: var(--sp-16);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(16, 48, 41, 0.32) 0%, rgba(7, 16, 13, 0.9) 100%);
  overflow: hidden;
}

.schem::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(61, 220, 151, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(61, 220, 151, 0.04) 1px, transparent 1px);
  background-size: 26px 26px;
}

.schem__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-8);
  flex-wrap: wrap;
  margin-bottom: var(--sp-8);
}

.schem__head h3 { font-size: 0.98rem; }

.schem__ref {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--faint);
  text-transform: uppercase;
}

.schem svg { position: relative; z-index: 1; width: 100%; height: auto; }

.schem__cap {
  position: relative;
  z-index: 1;
  margin-top: var(--sp-8);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--line-cold);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: none;
}

/* The pair of smaller schematics sit side by side under the big one */
.schem-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-12);
  margin-top: var(--sp-12);
}

.basis__notes { display: flex; flex-direction: column; gap: var(--sp-12); }

.basis__note b {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jade);
  margin-bottom: 4px;
}

.basis__note p { font-size: 0.86rem; line-height: 1.65; color: var(--muted); }

.basis__note + .basis__note { padding-top: var(--sp-12); border-top: 1px solid var(--line-cold); }

/* The note that names the real-world objection. It is the only one on
   the screen that has to be read, so it is the only one marked. */
.basis__note--warn {
  padding: var(--sp-12) var(--sp-16);
  border-left: 2px solid var(--warn-line);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--warn-bg);
}

.basis__note--warn b { color: var(--warn); }
.basis__note--warn p { color: var(--text); }
.basis__note + .basis__note--warn { border-top: none; }

/* Vocabulary table — the technical glossary, deliberately dense */
.lexicon {
  margin-top: var(--sp-24);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: rgba(7, 16, 13, 0.55);
  min-width: 640px;
}

.lexicon caption {
  padding: 10px var(--sp-12);
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jade-dim);
  background: rgba(61, 220, 151, 0.05);
  border-bottom: 1px solid var(--line);
}

.lexicon th,
.lexicon td {
  padding: 9px var(--sp-12);
  text-align: left;
  vertical-align: top;
  font-size: 0.81rem;
  line-height: 1.55;
  border-bottom: 1px solid var(--line-cold);
}

.lexicon tbody tr:last-child th,
.lexicon tbody tr:last-child td { border-bottom: none; }

.lexicon thead th {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 500;
  background: rgba(61, 220, 151, 0.03);
}

.lexicon tbody th {
  width: 26%;
  font-weight: 600;
  color: var(--bone);
  white-space: nowrap;
}

.lexicon tbody th small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--jade-dim);
  margin-top: 2px;
}

.lexicon td { color: var(--muted); }
.lexicon td:last-child { color: var(--text); width: 38%; }
.lexicon tbody tr:hover { background: rgba(61, 220, 151, 0.035); }

/* ============================================
   SKELETON 6 — WHAT IT DOES
   Three tiers stacked, each hanging off a vertical
   timescale rail. Long-form, not cards.
   ============================================ */
.tiers { display: flex; flex-direction: column; }

.tier {
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  gap: var(--sp-24);
  padding: var(--sp-24) 0;
  border-top: 1px solid var(--line-cold);
}

.tier:last-child { border-bottom: 1px solid var(--line-cold); }

.tier__scale { position: relative; padding-left: var(--sp-16); }

.tier__scale::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(to bottom, var(--jade), var(--jade-deep), transparent);
}

.tier__scale::after {
  content: '';
  position: absolute;
  left: -3px;
  top: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--jade);
  box-shadow: 0 0 10px var(--glow-32);
}

.tier__span {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--jade);
  text-transform: uppercase;
}

.tier__unit {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--faint);
  line-height: 1.55;
}

.tier__body h3 {
  font-family: var(--font-display);
  font-size: clamp(1.28rem, 2.1vw, 1.66rem);
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--bone);
  margin-bottom: var(--sp-8);
}

.tier__body p { font-size: 0.92rem; line-height: 1.72; }
.tier__body p + p { margin-top: var(--sp-8); }

.tier__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: var(--sp-16);
  align-items: start;
}

/* Sites-of-action strip inside a tier */
.tier__sites {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--sp-12);
  padding-top: var(--sp-8);
  border-top: 1px dashed rgba(125, 154, 144, 0.2);
}

.tier__sites span {
  padding: 3px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-cold);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.tier__figure {
  padding: var(--sp-12);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: rgba(7, 16, 13, 0.66);
}

.tier__figure svg { width: 100%; height: auto; }

/* The closure figure reuses the chart primitives, but they were only
   ever scoped to .curve — so its grid, its axis and its tick labels
   were painting with the SVG defaults (no stroke, black fill) and
   never appeared. Same values as .curve, so the two charts read as
   one pair. */
.tier__figure .grid-line { stroke: rgba(125, 154, 144, 0.16); stroke-width: 1; }
.tier__figure .axis-line { stroke: rgba(125, 154, 144, 0.34); stroke-width: 1; }
.tier__figure .tick-text {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: rgba(125, 154, 144, 0.7);
  letter-spacing: 0.04em;
}
.tier__figure .lbl {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
}

.tier__figure figcaption {
  margin-top: var(--sp-8);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-cold);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--faint);
}

/* ============================================
   SKELETON 7 — EVIDENCE
   Lab readout. Dense, tabular, numeric.
   ============================================ */
.readout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--sp-12);
  align-items: stretch;
}

.readout__side { display: flex; flex-direction: column; gap: var(--sp-12); }

/* SVG curve panel: paths draw themselves on entry */
.curve { position: relative; z-index: 1; width: 100%; height: auto; }

.curve .grid-line { stroke: rgba(125, 154, 144, 0.16); stroke-width: 1; }
.curve .axis-line { stroke: rgba(125, 154, 144, 0.34); stroke-width: 1; }
.curve .tick-text {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: rgba(125, 154, 144, 0.7);
  letter-spacing: 0.04em;
}
.curve .band { fill: rgba(255, 209, 102, 0.09); }
.curve .lbl {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
}

.trial {
  padding: var(--sp-16);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(16, 48, 41, 0.42) 0%, rgba(7, 16, 13, 0.88) 100%);
  flex: 1;
}

.trial__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  margin-bottom: var(--sp-12);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--line-cold);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jade-dim);
}

.trial__rows { display: flex; flex-direction: column; }

.trial__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-8);
  padding: 8px 0;
  border-bottom: 1px dashed rgba(125, 154, 144, 0.14);
  font-size: 0.83rem;
}

.trial__row:last-child { border-bottom: none; }
.trial__row dt { color: var(--muted); }
.trial__row dd {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--bone);
  text-align: right;
}

.kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-8);
  margin-top: var(--sp-12);
}

.kpi {
  position: relative;
  padding: var(--sp-12);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: rgba(7, 16, 13, 0.72);
  overflow: hidden;
  transition: border-color var(--t-med) var(--ease), background var(--t-med) var(--ease);
}

.kpi:hover { border-color: var(--line-hi); background: rgba(16, 48, 41, 0.55); }

.kpi__value {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 600;
  line-height: 1.05;
  color: var(--jade);
  text-shadow: 0 0 22px rgba(61, 220, 151, 0.28);
}

.kpi__value sup { font-size: 0.72rem; font-weight: 400; color: var(--jade-dim); top: -0.62em; }

/* The chip rides on the number's own line. A crop tight enough to take
   the figure takes the word with it. */
.kpi__fict {
  margin-left: auto;
  align-self: center;
  font-size: 0.54rem;
  padding: 2px 7px;
}

/* The tile that reports nothing. Its whole job is to be the large
   standalone number a screenshot would carry away. */
.kpi--void { border-color: var(--warn-line); background: rgba(255, 209, 102, 0.06); }
.kpi--void .kpi__value { color: var(--warn); }
.kpi--void .kpi__label { color: var(--text); }

.kpi__label { margin-top: 6px; font-size: 0.79rem; line-height: 1.45; color: var(--text); }
.kpi__sub   { margin-top: 3px; font-family: var(--font-mono); font-size: 0.6rem; color: var(--faint); }

.data__disclaimer {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-8);
  margin-top: var(--sp-16);
  padding: var(--sp-12);
  border-radius: var(--r-md);
  border: 1px solid var(--warn-line);
  background: var(--warn-bg);
}

.data__disclaimer p {
  font-size: 0.82rem;
  line-height: 1.62;
  color: #ffe8b0;
  max-width: none;
}

.data__disclaimer strong { color: var(--warn); }

/* ============================================
   SKELETON 8 — PARTNER INSTITUTIONS
   A ledger, not a card wall. Seven rows, numbered
   because the ordering is the register, and a
   fiction banner that belongs to this screen alone.
   ============================================ */
.ledger { width: 100%; min-width: 760px; }

.ledger thead th {
  padding: 0 var(--sp-12) var(--sp-8);
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  border-bottom: 1px solid var(--line);
}

.ledger tbody tr {
  border-bottom: 1px solid var(--line-cold);
  transition: background var(--t-med) var(--ease);
}

.ledger tbody tr:hover { background: rgba(61, 220, 151, 0.045); }

.ledger td {
  padding: var(--sp-12);
  vertical-align: top;
  font-size: 0.86rem;
  line-height: 1.58;
}

.ledger .ld-i {
  width: 46px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  color: var(--jade-dim);
  padding-top: calc(var(--sp-12) + 2px);
}

.ledger .ld-name {
  width: 27%;
  color: var(--bone);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.ledger .ld-name em {
  display: block;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--jade-dim);
  margin-top: 3px;
}

.ledger .ld-kind {
  width: 20%;
  color: var(--muted);
  font-size: 0.8rem;
}

.ledger .ld-work { color: var(--text); }

.ledger .ld-since {
  width: 74px;
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  color: var(--faint);
}

/* ============================================
   SKELETON 9 — THE QUIET SCREEN
   One photograph. Three lines. Nothing explained.
   ============================================ */
.quiet {
  position: relative;
  min-height: 76svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: var(--sp-48) 0;
}

.quiet__inner { position: relative; z-index: 3; }

.quiet__line {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  font-weight: 400;
  line-height: 1.34;
  letter-spacing: -0.018em;
  color: var(--bone);
  max-width: 22ch;
  text-shadow: 0 4px 40px rgba(7, 16, 13, 0.9);
}

.quiet__line span { color: var(--jade); }

.quiet__meta {
  margin-top: var(--sp-32);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-16);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.quiet__meta span { display: inline-flex; align-items: center; gap: 7px; }
.quiet__meta span::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--jade-dim);
}

/* ============================================
   SKELETON 10 — QUOTE WALL
   Uneven grid: one long testimony, three short ones.
   ============================================ */
.wall {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-12);
}

.voice {
  position: relative;
  padding: var(--sp-16);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(16, 48, 41, 0.3) 0%, rgba(10, 22, 19, 0.9) 60%);
  overflow: hidden;
  transition: border-color var(--t-med) var(--ease),
              transform var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease);
}

.voice:hover {
  border-color: var(--line-hi);
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 44px var(--glow-08);
}

.voice--wide  { grid-column: span 4; }
.voice--tall  { grid-column: span 2; }
.voice--third { grid-column: span 2; }
.voice--half  { grid-column: span 4; }

.voice__quote {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.62;
  color: var(--text);
  margin-bottom: var(--sp-12);
  max-width: none;
}

.voice--wide .voice__quote { font-size: clamp(1.08rem, 1.7vw, 1.36rem); line-height: 1.5; color: var(--bone); }

.voice__quote::before { content: '\201C'; color: var(--jade); opacity: 0.7; }
.voice__quote::after  { content: '\201D'; color: var(--jade); opacity: 0.7; }

.voice__foot {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: var(--sp-8);
  align-items: center;
  padding-top: var(--sp-12);
  border-top: 1px solid var(--line-cold);
}

.voice__portrait {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--line-hi);
  box-shadow: 0 0 22px var(--glow-16);
}

.voice__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  filter: grayscale(0.72) contrast(1.08) brightness(0.8) saturate(0.76);
  transition: filter var(--t-med) var(--ease), transform 0.9s var(--ease);
}

.voice:hover .voice__portrait img {
  filter: grayscale(0.24) contrast(1.04) brightness(0.94) saturate(1);
  transform: scale(1.05);
}

.voice__portrait-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgba(61, 220, 151, 0.32) 0%, rgba(7, 16, 13, 0.5) 100%);
  mix-blend-mode: soft-light;
}

.voice__who { font-size: 0.86rem; font-weight: 600; color: var(--bone); }

.voice__role {
  display: block;
  font-size: 0.74rem;
  color: var(--muted);
  margin-top: 1px;
}

/* Persona marker rides on the portrait, never only in the footer */
.voice__fict {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  border: 1px solid var(--warn-line);
  background: var(--warn-bg);
  color: var(--warn);
  font-family: var(--font-mono);
  font-size: 0.54rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.4;
}

.voice__stamp {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.68rem;
  color: var(--jade);
  white-space: nowrap;
  align-self: flex-start;
}

/* ============================================
   SKELETON 11 — THE LAB
   Half-screen first person, set large. The only place
   on this page where one person is talking.
   ============================================ */
.memoir {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: var(--sp-32);
  align-items: start;
}

.memoir__mark {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--jade);
  margin-bottom: var(--sp-12);
}

.memoir__big {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.7vw, 2.15rem);
  font-weight: 400;
  line-height: 1.34;
  letter-spacing: -0.018em;
  color: var(--bone);
  max-width: 24ch;
}

.memoir__body { margin-top: var(--sp-16); }

.memoir__body p {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  max-width: 64ch;
}

.memoir__body p + p { margin-top: var(--sp-8); }

.memoir__sign {
  display: flex;
  align-items: baseline;
  gap: var(--sp-8);
  flex-wrap: wrap;
  margin-top: var(--sp-16);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--line-cold);
  font-size: 0.84rem;
  color: var(--muted);
}

.memoir__sign b { color: var(--bone); font-weight: 600; }

.memoir__aside { display: flex; flex-direction: column; gap: var(--sp-12); }

.micro {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  isolation: isolate;
  aspect-ratio: 5 / 4;
}

.micro img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% center;
  /* Clean micrograph, no print on it — graded into the palette
     rather than blurred away. */
  filter: contrast(1.12) brightness(0.86) saturate(0.9) hue-rotate(-8deg);
  transform: scale(1.04);
}

.micro__tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, #55e8ac 0%, #0f766e 52%, #06110f 100%);
  mix-blend-mode: color;
  opacity: 0.55;
}

.micro__scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 58% at 50% 46%, transparent 0%, rgba(7,16,13,0.55) 66%, rgba(7,16,13,0.94) 100%);
}

.micro__cross { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

.micro__cross::before,
.micro__cross::after { content: ''; position: absolute; background: var(--line-hi); }
.micro__cross::before { left: 50%; top: 12%; bottom: 12%; width: 1px; }
.micro__cross::after  { top: 50%; left: 12%; right: 12%; height: 1px; }

.micro__label {
  position: absolute;
  left: 12px;
  bottom: 10px;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--jade-soft);
  text-shadow: 0 2px 10px rgba(7, 16, 13, 0.95);
}

/* Roster strip: initials only. No invented headshots of scientists. */
.crew { display: flex; flex-direction: column; }

.crew__row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: var(--sp-8);
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--line-cold);
}

.crew__initial {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  border: 1px solid var(--line-hi);
  background: linear-gradient(150deg, rgba(61, 220, 151, 0.16), rgba(7, 16, 13, 0.6));
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--jade);
  text-shadow: 0 0 16px var(--glow-32);
}

.crew__name { font-size: 0.9rem; color: var(--bone); font-weight: 600; }
.crew__role { font-size: 0.78rem; color: var(--muted); margin-top: 1px; }

.crew__field {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--jade-dim);
  text-align: right;
  white-space: nowrap;
}

/* ============================================
   SKELETON 12 — CTA + ABOUT THIS PAGE
   ============================================ */
.cta { position: relative; }

.cta__inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.cta__title { font-size: clamp(2rem, 4vw, 3.1rem); margin-bottom: var(--sp-12); }

.cta__text { margin-bottom: var(--sp-24); color: var(--text); font-size: 1rem; }

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin-bottom: var(--sp-16);
}

.cta__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-24);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--faint);
}

.cta__meta span { display: inline-flex; align-items: center; gap: 6px; }
.cta__meta span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--jade-dim); }

/* ============================================
   [FICTION MARKER 2/2] About This Page
   A section in its own right. Never a footnote.
   ============================================ */
.about-page {
  position: relative;
  z-index: 2;
  margin-top: var(--sp-48);
  padding: var(--sp-32);
  border-radius: var(--r-lg);
  border: 1px solid var(--warn-line);
  background: linear-gradient(160deg, rgba(58, 44, 10, 0.62) 0%, rgba(20, 16, 6, 0.9) 62%);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 209, 102, 0.16);
  text-align: left;
}

.about-page__head {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  flex-wrap: wrap;
  margin-bottom: var(--sp-16);
  padding-bottom: var(--sp-12);
  border-bottom: 1px solid rgba(255, 209, 102, 0.28);
}

.about-page__icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--warn);
  color: var(--warn);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.about-page__title {
  font-family: var(--font-sans);
  font-size: clamp(1.25rem, 2.1vw, 1.6rem);
  font-weight: 600;
  color: var(--warn);
  letter-spacing: 0.01em;
}

.about-page__badge {
  margin-left: auto;
  padding: 4px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--warn-line);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--warn);
  white-space: nowrap;
}

/* The one paragraph in this block that is set to be read from across
   the room. It carries the whole statement in three sentences; the
   columns underneath carry the detail. Ruled off from them so the
   block opens on a standfirst rather than on a wall. */
.about-page__lede {
  max-width: 74ch;
  margin-bottom: var(--sp-16);
  padding-bottom: var(--sp-16);
  border-bottom: 1px solid rgba(255, 209, 102, 0.2);
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  line-height: 1.66;
  color: #ffeec4;
  letter-spacing: -0.004em;
}

.about-page__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.46fr);
  gap: var(--sp-16) var(--sp-24);
  align-items: start;
}

/* The mark. Geometry only — it carries no reading, it just stops the
   notice from opening as two columns of unbroken prose. */
.about-page__mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-8) 0;
  color: var(--warn);
}

.about-page__mark svg {
  display: block;
  width: min(100%, 208px);
  height: auto;
  opacity: 0.72;
}

.about-page__mark figcaption {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 209, 102, 0.7);
  text-align: center;
}

.about-page__body p {
  font-size: 0.89rem;
  line-height: 1.72;
  color: #f2e4bd;
  max-width: none;
}

.about-page__body p + p { margin-top: var(--sp-8); }
.about-page__body p strong { color: var(--warn); font-weight: 700; }

/* Standing head for the checklist. A label on a rule, so the block
   reads as two movements — the statement, then the six checks —
   rather than as one long column of amber. */
.about-page__rule {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  margin-top: var(--sp-24);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--warn);
}

.about-page__rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 209, 102, 0.42), transparent);
}

/* Six cards across the full width, not a bullet list down one column.
   Each one leads with its own glyph so the block scans as a checklist. */
.about-page__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-8) var(--sp-12);
  margin-top: var(--sp-12);
}

.about-page__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: var(--sp-8);
  border-radius: var(--r-md, 10px);
  border: 1px solid rgba(255, 209, 102, 0.2);
  background: rgba(255, 209, 102, 0.045);
  font-size: 0.82rem;
  line-height: 1.6;
  color: #f2e4bd;
}

.about-page__glyph {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 209, 102, 0.42);
  background: rgba(255, 209, 102, 0.07);
  color: var(--warn);
}

.about-page__glyph svg { display: block; width: 19px; height: 19px; }

.about-page__foot {
  margin-top: var(--sp-16);
  padding-top: var(--sp-12);
  border-top: 1px solid rgba(255, 209, 102, 0.28);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--warn);
  font-weight: 600;
}

/* The line the footer used to carry. It belongs to the notice now, and
   it is set as a colophon rather than as a caption: two fields on one
   rule, quiet, at the very bottom of the only block on the page that
   talks about the page. */
.about-page__colophon {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4) var(--sp-16);
  flex-wrap: wrap;
  margin-top: var(--sp-12);
  padding-top: var(--sp-8);
  border-top: 1px solid rgba(255, 209, 102, 0.16);
  font-size: 0.64rem;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: rgba(242, 228, 189, 0.62);
}

/* ============================================
   Footer
   ============================================ */
.footer {
  position: relative;
  z-index: 2;
  padding: var(--sp-32) 0 var(--sp-24);
  border-top: 1px solid var(--line-cold);
  background: var(--void);
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 0.9fr));
  gap: var(--sp-24);
  padding-bottom: var(--sp-24);
  border-bottom: 1px solid var(--line-cold);
}

.footer__brand { display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-8); }

.footer__tagline { font-size: 0.84rem; line-height: 1.62; color: var(--muted); max-width: 38ch; }

.footer__col h4 {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--jade-dim);
  text-transform: uppercase;
  margin-bottom: var(--sp-8);
  font-weight: 500;
}

.footer__col li { padding: 4px 0; font-size: 0.83rem; color: var(--muted); }
.footer__col a:hover { color: var(--jade); }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-8);
  flex-wrap: wrap;
  padding-top: var(--sp-16);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--faint);
}

.footer__bottom .fict { font-size: 0.6rem; }

/* The one link in the closing rule sat at 109x14 — a 0.66rem mono line
   with no box around it. Given a touch-sized target of its own so the
   last thing on the page is not the hardest thing on it to hit. */
.footer__bottom a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
}

/* ============================================
   Shared card photo layer
   ============================================ */
.media {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--panel-deep);
  line-height: 0;
}

.media__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);
}

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

.media__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    var(--scrim-card) 0%,
    rgba(7, 16, 13, 0.72) 26%,
    rgba(7, 16, 13, 0.14) 60%,
    rgba(7, 16, 13, 0.28) 100%);
}

.media__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(61, 220, 151, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(61, 220, 151, 0.055) 1px, transparent 1px);
  background-size: 30px 30px;
}

.product__shot:hover .media__img { filter: var(--grade-card-hover); transform: scale(1.05); }
.product__shot:hover .media__tint { opacity: 0.55; }

/* ============================================
   Inline plate — a picture set beside running text
   Reuses the .media layer stack (image → grade → wash →
   scrim) so an inline photograph is graded exactly like
   the product shot. The plate only supplies the frame,
   the ratio and the caption slot.
   ============================================ */
.plate {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  isolation: isolate;
  background: var(--panel-deep);
}

/* Ratios are declared, not inferred, so the box is reserved
   before the file arrives and nothing shifts on load. */
.plate--wide   .media { aspect-ratio: 16 / 10; }
.plate--four   .media { aspect-ratio: 4 / 3; }
.plate--square .media { aspect-ratio: 1 / 1; }
.plate--tall   .media { aspect-ratio: 4 / 5; }

.plate .media__img { object-position: center; }

/* Street-level photographs of real buildings are blurred on the same
   principle as the scan sheet behind the evidence screen: the massing
   survives, and nothing that could identify a place does. The scale-up
   keeps the blur from sampling past the edge of the frame. */
.plate--redact .media__img {
  filter: var(--grade-card) blur(6px);
  transform: scale(1.08);
}
.plate--redact:hover .media__img {
  filter: var(--grade-card-hover) blur(6px);
  transform: scale(1.1);
}

/* The maintenance plate and the lab micrograph are the same
   negative. A portrait ratio off the left third gives it a
   different field so the page is not showing one photograph
   twice in the same crop. */
.plate--offset-l .media__img { object-position: 26% center; }

.plate__label {
  position: absolute;
  left: 12px;
  bottom: 10px;
  right: 12px;
  z-index: 3;
  display: flex;
  align-items: baseline;
  gap: var(--sp-8);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.07em;
  color: var(--jade-soft);
  text-shadow: 0 2px 10px rgba(7, 16, 13, 0.95);
}

.plate__label .fict { flex-shrink: 0; }

.plate:hover .media__img { filter: var(--grade-card-hover); transform: scale(1.04); }
.plate:hover .media__tint { opacity: 0.55; }

/* ============================================
   Figure row — text and picture side by side
   The measure stays inside 60–68 characters; the plate
   takes the rest. --flip puts the picture first so a run
   of these does not settle into a list.
   ============================================ */
.figrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.68fr);
  gap: var(--sp-16);
  align-items: start;
}

.figrow__body > p { max-width: 64ch; }

.figrow--flip { grid-template-columns: minmax(0, 0.68fr) minmax(0, 1fr); }
.figrow--flip .figrow__body  { order: 2; }
.figrow--flip .figrow__media { order: 1; }

/* Right column of tier one carries a plate above its chart */
.tier__stack { display: flex; flex-direction: column; gap: var(--sp-12); }

/* ============================================
   Band shot — a full-bleed rest between two walls of text
   Runs the width of the section and carries one short line
   rather than a paragraph. Same layer order as .section-photo.

   It is a sibling of .wrap, not a child of it. A `100vw`
   breakout from inside the wrap overhangs by the width of
   the scrollbar, which body{overflow-x:hidden} then hides
   rather than fixes; sitting outside the wrap needs no
   viewport maths at all. Sections that carry one therefore
   close their wrap around it.
   ============================================ */
.band-shot {
  position: relative;
  /* .section > .wrap gets this from its own rule; the band
     has to claim it too, or it falls under .section-photo. */
  z-index: 2;
  width: 100%;
  margin-block: var(--sp-32);
  height: clamp(260px, 46vh, 430px);
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid var(--line-cold);
  border-bottom: 1px solid var(--line-cold);
}

.band-shot__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: var(--grade-base);
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.band-shot__tint {
  position: absolute;
  inset: 0;
  background: var(--wash-jade);
  mix-blend-mode: soft-light;
}

/* Weighted to the left, because that is where the line sits */
.band-shot__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(7, 16, 13, 0.92) 0%,
      rgba(7, 16, 13, 0.66) 44%,
      rgba(7, 16, 13, 0.26) 100%),
    linear-gradient(to bottom,
      var(--scrim-edge) 0%,
      rgba(7, 16, 13, 0.14) 24%,
      rgba(7, 16, 13, 0.30) 76%,
      var(--scrim-edge) 100%);
}

.band-shot__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--sp-16) var(--sp-12);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
}

.band-shot__line {
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 2.2vw, 1.68rem);
  line-height: 1.32;
  letter-spacing: -0.012em;
  color: var(--bone);
  max-width: 24ch;
  text-shadow: 0 2px 26px rgba(7, 16, 13, 0.92);
}

.band-shot__line em { font-style: normal; color: var(--jade); }

.band-shot__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  color: var(--jade-soft);
  text-shadow: 0 2px 14px rgba(7, 16, 13, 0.95);
}

/* The seam band between the two vocabulary tables carries no aphorism
   at all — a mono section marker instead, so the run of full-bleed
   pull-quotes breaks before the reader can start predicting it. */
.band-shot__meta--seam {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--warn);
}

.band-shot__meta--seam span + span::before {
  content: '\00b7';
  margin-right: var(--sp-8);
  color: var(--jade-soft);
  opacity: 0.6;
}

.band-shot__meta--seam span:last-child { color: var(--jade-soft); }

/* --- Band grades: same rule as the section photos, no two
       adjacent bands get the same treatment --- */

/* Violet particle field → flattened into the jade duotone */
.band-shot--tone-scatter .band-shot__img {
  filter: grayscale(1) contrast(1.30) brightness(0.74);
  object-position: center 62%;
}
.band-shot--tone-scatter .band-shot__tint {
  background: var(--wash-duotone);
  mix-blend-mode: color;
  opacity: 0.9;
}

/* Already jade at source, and dark to begin with — the grade
   only settles it, and the scrim eases off so the forms are
   actually legible rather than a black field with a line on it. */
.band-shot--tone-flow .band-shot__img {
  filter: contrast(1.06) brightness(0.86) saturate(0.94);
}
.band-shot--tone-flow .band-shot__tint {
  background: var(--wash-jade-soft);
  mix-blend-mode: overlay;
  opacity: 0.8;
}
.band-shot--tone-flow .band-shot__scrim {
  background:
    linear-gradient(to right,
      rgba(7, 16, 13, 0.86) 0%,
      rgba(7, 16, 13, 0.46) 46%,
      rgba(7, 16, 13, 0.10) 100%),
    linear-gradient(to bottom,
      var(--scrim-edge) 0%,
      rgba(7, 16, 13, 0.10) 24%,
      rgba(7, 16, 13, 0.24) 76%,
      var(--scrim-edge) 100%);
}

/* Filament tangle. Bright, high-frequency and off-palette at source,
   so it is flattened and re-tinted rather than washed. */
.band-shot--tone-mesh .band-shot__img {
  /* Desaturating fine bright lines on a near-black ground collapses
     both towards mid-grey, so the contrast goes back in before the
     duotone. The source is far brighter than the other band
     photographs, hence the low brightness: measured, this lands at
     mean luminance ~45 against ~31 for the flow band and ~68 for the
     lab band. */
  filter: grayscale(1) contrast(1.5) brightness(0.36);
  object-position: center 46%;
}
.band-shot--tone-mesh .band-shot__tint {
  background: var(--wash-duotone);
  mix-blend-mode: color;
  opacity: 0.92;
}
.band-shot--tone-mesh .band-shot__scrim {
  background:
    linear-gradient(to right,
      rgba(7, 16, 13, 0.88) 0%,
      rgba(7, 16, 13, 0.50) 46%,
      rgba(7, 16, 13, 0.12) 100%),
    linear-gradient(to bottom,
      var(--scrim-edge) 0%,
      rgba(7, 16, 13, 0.12) 24%,
      rgba(7, 16, 13, 0.26) 76%,
      var(--scrim-edge) 100%);
}

/* Fluorescence field, on the seam of the vocabulary table. Same family
   of source as the mesh band — fine bright structures on a near-black
   ground — but this band's whole job is to interrupt a long run of
   prose, so it has to read as a photograph at a glance instead of as
   one more dark panel. Held well above the mesh grade, keeping some of
   its own colour under a lighter duotone, and the scrim eases off on
   the right where there is no caption over it. */
.band-shot--tone-field .band-shot__img {
  /* Synthetic render, already close to the palette, so this is a
     settle rather than a rotation. Held a little under the mesh band
     above it — measured, ~34 against that band's 40 — so two figures
     roughly a screen apart do not read as the same treatment twice. */
  filter: contrast(1.18) brightness(0.82) saturate(0.78);
  object-position: center 46%;
}
.band-shot--tone-field .band-shot__tint {
  background: var(--wash-jade-soft);
  mix-blend-mode: overlay;
  opacity: 0.55;
}
.band-shot--tone-field .band-shot__scrim {
  background:
    linear-gradient(to right,
      rgba(7, 16, 13, 0.84) 0%,
      rgba(7, 16, 13, 0.42) 44%,
      rgba(7, 16, 13, 0.06) 100%),
    linear-gradient(to bottom,
      var(--scrim-edge) 0%,
      rgba(7, 16, 13, 0.08) 24%,
      rgba(7, 16, 13, 0.20) 76%,
      var(--scrim-edge) 100%);
}

/* Near-black gym frame: held dark, pushed to near-monochrome */
.band-shot--tone-load .band-shot__img {
  filter: grayscale(0.92) contrast(1.22) brightness(0.66) saturate(0.5);
  object-position: center 42%;
}
.band-shot--tone-load .band-shot__tint {
  background: linear-gradient(120deg,
    rgba(61, 220, 151, 0.22) 0%,
    rgba(15, 118, 110, 0.12) 48%,
    rgba(7, 16, 13, 0.60) 100%);
  mix-blend-mode: overlay;
}

/* Instrument bay, lit cold blue → rotated onto the jade axis */
.band-shot--tone-bench .band-shot__img {
  filter: grayscale(0.9) contrast(1.14) brightness(0.62) saturate(0.6);
  object-position: center 46%;
}
.band-shot--tone-bench .band-shot__tint {
  background: linear-gradient(150deg, #5fe8b4 0%, #0f766e 54%, #08201c 100%);
  mix-blend-mode: color;
  opacity: 0.78;
}

/* ============================================
   Horizon strip — SVG, partners screen
   ============================================ */
.horizon {
  padding: var(--sp-12);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: rgba(7, 16, 13, 0.66);
}

.horizon svg { width: 100%; height: auto; }

.horizon .horizon-rule { stroke: rgba(125, 154, 144, 0.34); stroke-width: 1; }
.horizon .horizon-tick { stroke: rgba(125, 154, 144, 0.24); stroke-width: 1; }

.horizon .horizon-lbl {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  fill: var(--text);
}

.horizon .horizon-ax {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  fill: rgba(125, 154, 144, 0.7);
}

.horizon figcaption {
  margin-top: var(--sp-8);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-cold);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--faint);
}

/* ============================================
   About-this-page texture
   A near-black striated ground under the amber panel.
   It sits below the head and the body and never touches
   the caution palette the fiction notice is built from.
   ============================================ */
.about-page__tex {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.about-page__tex img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.34;
  filter: contrast(1.08) brightness(0.62);
}

.about-page__head,
.about-page__body,
.about-page__list,
.about-page__foot { position: relative; z-index: 1; }

/* ============================================
   Responsive — three stops
   ============================================ */
@media (max-width: 1180px) {
  .nav__links { gap: var(--sp-8); }
  .nav__link  { font-size: 0.76rem; }
}

/* Below this the bar cannot hold brand + badge + links + button.
   The button goes first; the badge is the last thing to be dropped. */
@media (max-width: 1120px) {
  .nav__cta { display: none; }
}

@media (max-width: 1080px) {
  .head { grid-template-columns: 1fr; align-items: start; }
  .head__desc { padding-left: 0; border-left: none; padding-top: var(--sp-8); border-top: 1px solid var(--line); }
  .head--under .head__desc { margin-left: 0; border-left: none; }

  .hero__inner { grid-template-columns: 1fr; gap: var(--sp-16); }
  .hero__structure { max-height: 40svh; aspect-ratio: 16 / 10; margin: 0; }

  .essay      { grid-template-columns: 1fr; }
  .essay__body { columns: 2; }
  .sheet      { grid-template-columns: 1fr; }
  .basis      { grid-template-columns: 1fr; }
  .readout    { grid-template-columns: 1fr; }
  .memoir     { grid-template-columns: 1fr; gap: var(--sp-24); }
  .tier__grid { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }

  .voice--wide, .voice--half { grid-column: span 6; }
  .voice--tall, .voice--third { grid-column: span 3; }

  /* Side-by-side collapses to a stack at the same stop as the
     tier grid it usually sits inside. Text first in every case —
     the flipped order is a desktop rhythm, not a reading order. */
  .figrow,
  .figrow--flip { grid-template-columns: 1fr; }
  .figrow--flip .figrow__body  { order: 0; }
  .figrow--flip .figrow__media { order: 1; }

  .plate--tall .media { aspect-ratio: 16 / 10; }
  .plate--offset-l .media__img { object-position: center; }
}

@media (max-width: 940px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  /* 0.62rem is the floor. The badge is the page's load-bearing
     compliance element; the links and the CTA are already gone by this
     stop, and the wordmark goes next. The badge does not shrink. */
  .nav__fiction { font-size: 0.62rem; padding: 4px 9px; letter-spacing: 0.02em; }
  .nav__name-sub { display: none; }

  .phases { grid-template-columns: 1fr; gap: var(--sp-24); }
  .phase:nth-child(2), .phase:nth-child(3) { margin-top: 0; }
  .constraints { grid-template-columns: 1fr; gap: var(--sp-12); }

  .section-photo--half { width: 100%; -webkit-mask-image: none; mask-image: none; }
  .section-photo--half .section-photo__scrim {
    background:
      linear-gradient(to bottom, var(--scrim-edge) 0%, rgba(7,16,13,0.78) 16%, rgba(7,16,13,0.82) 84%, var(--scrim-edge) 100%),
      rgba(7, 16, 13, 0.42);
  }

  .about-page__body { grid-template-columns: 1fr; }
  /* Stacked, the mark would run the full width of the notice. Cap it
     and centre it so it stays a mark rather than becoming a banner. */
  .about-page__mark { order: -1; }
  .about-page__mark svg { width: min(100%, 150px); }
  .about-page__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

  .essay__body { columns: 1; column-rule: none; }
  .essay__body > p:first-child::first-letter { font-size: 3.2em; }

  .hero__stats { flex-direction: column; gap: var(--sp-12); }
  .hero__scroll { display: none; }
  .hero__structure { max-height: 34svh; }

  .forms  { grid-template-columns: 1fr; }
  .kpis   { grid-template-columns: 1fr; }
  .schem-pair { grid-template-columns: 1fr; }

  .tier { grid-template-columns: 1fr; gap: var(--sp-12); }
  .tier__scale { padding-left: var(--sp-12); }
  .tier__scale::before { top: 4px; bottom: auto; height: 22px; }

  .wall { grid-template-columns: 1fr; }
  .voice--wide, .voice--half, .voice--tall, .voice--third { grid-column: span 1; }

  .band-shot {
    height: clamp(200px, 34vh, 280px);
    margin-block: var(--sp-24);
  }
  .band-shot__line { max-width: none; }

  .plate--square .media,
  .plate--four .media { aspect-ratio: 16 / 10; }

  .negations li { grid-template-columns: 1fr; gap: 2px; }
  .crew__row { grid-template-columns: 40px minmax(0, 1fr); }
  .crew__initial { width: 40px; height: 40px; font-size: 0.78rem; }
  .crew__field { grid-column: 2; text-align: left; }

  .footer__top { grid-template-columns: 1fr; }
  .about-page { padding: var(--sp-16); }
  .about-page__badge { margin-left: 0; }
  .about-page__list { grid-template-columns: 1fr; }

  .notice__text { font-size: 0.72rem; }
  .btn { padding: 12px 22px; font-size: 0.82rem; }
}

/* Phone. The nav badge keeps its full wording — it is the one
   element that must not be abbreviated — so the wordmark gives up
   its lettering instead and the bar tightens around it. */
@media (max-width: 620px) {
  .nav__inner { padding: 0 var(--sp-8); gap: var(--sp-8); }
  .nav__name { display: none; }
  .nav__fiction {
    font-size: 0.62rem;
    padding: 4px 8px;
    gap: 5px;
    letter-spacing: 0.01em;
  }
  .nav__fiction::before { width: 5px; height: 5px; }
  .footer__brand .nav__name { display: flex; }
}

@media (max-width: 380px) {
  .nav__fiction { padding: 3px 7px; }
}

/* ============================================================
   PHONE — a measured pass at 375 x 812

   Everything below this line is phone-only. The desktop
   composition, the photo grading, the three fiction markers,
   the diagrams and the interaction effects are untouched.
   ============================================================ */

/* --- 1. Photographs: bands, not columns ---------------------
   A section that stands one screen tall on desktop runs to three
   or four thousand pixels once its columns stack, and a photograph
   pinned to `inset: 0` stretches with it. Measured at 375px wide,
   bg-tech.jpg was displaying at 375 x 6443 — a 17:1 slit through
   the middle of the frame, which reads as noise rather than as a
   picture. bg-product, bg-mechanism, bg-problem and bg-authority
   were all between 8:1 and 9.5:1, and the hero at 3.9:1.

   Below this stop every full-bleed photograph adopts the geometry
   the --band modifier already defines: a fixed band at the head of
   the section, at a ratio where the composition survives. No new
   layer system — the existing one is re-pointed.

   The stop is 1080, not 720, because 1080 is where the columns
   collapse — and a collapsed column is what makes a section run
   three thousand pixels deep, whatever the device. Every tablet
   was inheriting the desktop geometry over sections that no longer
   had the desktop's proportions: bg-tech displayed at 768 x 6294
   (8.2:1) on an iPad in portrait, and bg-problem at 1024 x 7005
   (6.8:1) in landscape. Four more sat between 3.3:1 and 6:1. */
@media (max-width: 1080px) {
  .section-photo:not(.section-photo--band):not(.section-photo--footband) {
    bottom: auto;
    height: clamp(230px, 36svh, 340px);
  }

  .section-photo:not(.section-photo--band):not(.section-photo--footband) .section-photo__img {
    top: 0;
    height: 100%;
  }

  /* One scrim for every banded photo, opaque enough at the foot to
     hand off to the flat section ground so the band has an edge
     rather than a cut. Outranks the --half override at the 940 stop. */
  .section-photo:not(.section-photo--band):not(.section-photo--footband) .section-photo__scrim {
    background: linear-gradient(to bottom,
      var(--scrim-edge) 0%,
      rgba(7, 16, 13, 0.58) 24%,
      rgba(7, 16, 13, 0.86) 78%,
      var(--scrim-edge) 100%);
  }

  /* The two that were already bands only need their ceiling lowered. */
  .section-photo--band     { height: clamp(210px, 32svh, 300px); }
  .section-photo--footband { height: clamp(230px, 36svh, 330px); }

  /* The quiet screen is the exception, and has to be: it is one
     photograph and three lines, so demoting the photograph to a
     header band would empty the screen out. It is short enough to
     stay full-bleed — the frame lands at 1.8:1 rather than the
     2.04:1 it was showing. */
  .quiet .section-photo:not(.section-photo--band):not(.section-photo--footband) {
    bottom: 0;
    height: auto;
  }
  .quiet .section-photo:not(.section-photo--band):not(.section-photo--footband) .section-photo__img {
    top: -6%;
    height: 112%;
  }

  /* Hero: the same stretch one screen earlier. Capping the whole
     layer stack keeps image, wash and scrim in register, and the
     scrim already resolves to --void at its foot. */
  .hero__photo { bottom: auto; height: min(78svh, 600px); }
  .hero__photo-img { top: 0; height: 100%; }

  /* Decorative striation behind the fiction panel: was 325 x 1958. */
  .about-page__tex { bottom: auto; height: 300px; }
}

/* --- 2. Diagrams: scrolled at size, not shrunk to nothing ----
   Every SVG here is drawn in a wide viewBox and scaled down to its
   column. At 375px those scales run 0.36–0.82, which put the chart
   and horizon tick labels at 3.3px and the schematic labels at
   4.1px — present, but unreadable. The mechanism rail already
   solved this: a min-width inside a .scroll-x, so the drawing keeps
   its size and the reader swipes. The rest now do the same, and the
   type inside them is set larger to survive the scaling that is
   left. The body itself still never scrolls sideways. Same 1080
   stop as the photographs, and for the same reason. */
@media (max-width: 1080px) {
  /* The stacked grids above resolve to a bare `1fr`, and a bare `1fr`
     still carries `min-width: auto` — so a scroller holding a 620px
     drawing widens its own column past the screen instead of scrolling
     inside it, and the page gains a sideways scroll. Zeroing the
     minimum is what makes .scroll-x actually contain anything. The
     desktop tracks already say minmax(0, …) for the same reason. */
  .essay > *,
  .sheet > *,
  .sheet__col > *,
  .basis > *,
  .basis__notes > *,
  .readout > *,
  .readout__side > *,
  .memoir > *,
  .tier > *,
  .tier__grid > *,
  .tier__stack > *,
  .figrow > *,
  .schem-pair > * { min-width: 0; }

  .scroll-x { max-width: 100%; }

  .curve,
  .horizon svg      { min-width: 620px; }
  .schem--wide svg  { min-width: 560px; }
  .tier__figure svg { min-width: 400px; }

  /* The rail is the widest drawing on the page (1160 units), so even
     inside its scroller it still renders at 0.62 — its labels need
     both a wider floor and a larger size to clear 10px. The axis
     underneath carries the same floor, or the two fall out of
     register as the reader swipes. */
  .rail__svg,
  .rail__axis { min-width: 880px; }
  .rail__svg text { font-size: 14px; }

  .curve .tick-text,
  .curve .lbl,
  .tier__figure .tick-text,
  .tier__figure .lbl,
  .horizon .horizon-lbl,
  .horizon .horizon-ax,
  .schem svg text { font-size: 12px; }

  /* Swipe affordance. A sticky pseudo-element inside the scroller
     stays pinned to the left edge while the content moves under it,
     so the hint is readable at every scroll position. Carried only
     by the containers whose content is genuinely wider than the
     screen — the spec table fits, and is not labelled as if it did
     not. */
  .scroll-x--wide::after {
    content: 'Swipe sideways for the full width  \2192';
    display: block;
    position: sticky;
    left: 0;
    width: max-content;
    max-width: 100%;
    margin-top: var(--sp-4);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: var(--jade-dim);
  }
}

/* --- 3. Touch targets ---------------------------------------
   Measured at 375px, thirteen controls were under 44px in one
   dimension: the notice close (26x26), the wordmark (30x30), the
   menu button (26x15) and ten footer links (16px tall). The three
   icon controls keep their drawn size and gain the area through a
   transparent pseudo-element, so the bar looks identical; the
   footer links take real padding, which a phone wants anyway. */
@media (max-width: 1080px) {
  .notice__close,
  .nav__brand,
  .nav__toggle { position: relative; }

  .notice__close::after,
  .nav__brand::after,
  .nav__toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  .nav__toggle { min-height: 44px; justify-content: center; }

  /* The pseudo-element above gives these two a 44px hit area while the
     drawn mark stays small. An audit that measures the element box
     rather than the hit area still reads them as undersized, so the box
     is grown to match — transparent padding on the wordmark, a wider
     track on the toggle with the bars held against the right edge.
     Nothing visible moves. */
  .nav__brand { padding: 7px; margin: -7px; }

  .nav__toggle {
    min-width: 44px;
    align-items: flex-end;
  }
  .nav__toggle span { width: 26px; }

  /* The fiction badge is the one marker that travels with every screen,
     so it is also a link, and it was 41px tall — under the thumb floor
     by three pixels. It takes the height as real padding rather than a
     pseudo-element: at 58px of nav bar there is room for it, and a
     marker that is easy to hit is the point of it. */
  .nav__fiction { min-height: 44px; }

  .footer__col li { padding: 0; }
  .footer__col li a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

/* --- 4. Type floor ------------------------------------------
   Measured at 375px, 120 leaf elements were setting text below
   12px, and the nav fiction badge had fallen to 7.4px — a marker
   nobody can read is not a marker. Running prose now sits at 15px
   or above, every caption, chip and mono label at 12px or above.
   Sizes only; no colour, weight or tracking is changed.

   Also raised to the 1080 stop, alongside the photographs. On a
   tablet this floor was not applying at all: 136 leaf elements sat
   under 12px at 768 and 139 at 1024, and the "invented figure"
   markers that carry the disclaimer were at 9.3px — smaller than
   they had ever been on a phone. */
@media (max-width: 1080px) {
  /* Running prose -> 15px+ */
  .head__desc,
  .essay__body p,
  .phase p,
  .constraints p,
  .basis__note p,
  .tier__body p,
  .about-page__body p,
  .about-page__foot { font-size: 0.95rem; }

  .negations li,
  .about-page__list li,
  .schem__cap,
  .sidenote,
  .ledger td,
  .spec th,
  .spec td,
  .trial__row,
  .data__disclaimer p,
  .fict-band p,
  .bar__label,
  .footer__col li,
  .footer__tagline { font-size: 0.92rem; }

  .lexicon th,
  .lexicon td,
  .ledger .ld-kind,
  .kpi__label,
  .crew__role,
  .hero__stat-label { font-size: 0.88rem; }

  /* Captions, chips and mono labels -> 12px+ */
  .footnote,
  .voice__role,
  .notice__text { font-size: 0.8rem; }

  /* The chart note carries a reading now, not just a caption about
     which series are absent, so it joins the running-caption floor. */
  .chart__note,
  .phase__time,
  .phase__note,
  .tier__span,
  .hero__specimen,
  .cta__meta,
  .ledger .ld-i,
  .ledger .ld-since { font-size: 0.78rem; }

  .head__eyebrow,
  .hero__eyebrow,
  .tag,
  .chart__unit,
  .foil__label,
  .trial__title,
  .quiet__meta,
  .memoir__mark,
  .about-page__badge,
  .about-page__rule,
  .form-card__meta,
  .band-shot__meta,
  .footer__bottom { font-size: 0.75rem; }

  .fict,
  .voice__fict,
  .chart__key,
  .phase__no,
  .tier__unit,
  .tier__sites span,
  .rail__axis,
  .plate__label,
  .micro__label,
  .schem__ref,
  .kpi__sub,
  .sidenote b,
  .basis__note b,
  .crew__field,
  .memoir__sign,
  .hero__structure-label,
  .hero__stat-label em,
  .spec caption,
  .lexicon caption,
  .lexicon thead th,
  .lexicon tbody th small,
  .ledger thead th,
  .ledger .ld-name em,
  .footer__col h4,
  .footer__bottom .fict,
  .footer__brand .nav__name-sub,
  .tier__figure figcaption,
  .horizon figcaption,
  .about-page__mark figcaption,
  .about-page__colophon,
  .voice__stamp,
  .nav__drawer a span,
  .product__shot-caption span,
  .negations li b { font-size: 0.75rem; }
}

/* --- 5. The nav fiction badge -------------------------------
   The badge kept its full wording by giving up its size, and at
   375px that had run it down to 7.4px, which defeats the point of
   carrying it at all. It keeps the wording and takes a legible
   size instead — it wraps inside the bar if it has to, and there is
   room for it from the moment the desktop links come off. Scoped to
   the same 940 stop as the hamburger so a landscape phone, which is
   still a phone, does not get the 9.9px version. */
@media (max-width: 940px) {
  .nav__fiction {
    font-size: 0.75rem;
    line-height: 1.3;
    padding: 4px 9px;
    letter-spacing: 0.01em;
    white-space: normal;
    text-align: center;
    min-width: 8.5em;
  }

  /* The badge kept flex-shrink:0 from the desktop bar, where it is the
     one thing that must not be squeezed. On a phone it is the only
     flexible item left — brand, badge and hamburger together want
     359px inside a 343px bar at 375, and the hamburger, which has no
     intrinsic content, was the item flexbox chose to collapse: the
     menu button was rendering 0px wide and the drawer was reachable
     only by keyboard. The badge now takes the shortfall by wrapping
     to a second line, which the 58px bar has room for, and never goes
     below the 8.5em floor set above. */
  .nav__fiction { flex-shrink: 1; }
}

/* --- 6. The footer fiction line -----------------------------
   `.fict` is white-space:nowrap because it is normally a two-word
   chip riding beside a number. The footer uses the same component
   for a 77-character sentence, and section 4 above raises it from
   9.6px to 12px on phones — at 375px that is a 612px box that
   cannot break, which was the whole of the page's horizontal
   scroll (documentElement.scrollWidth 635 against a 375 viewport).
   Only this one instance is released from nowrap. */
@media (max-width: 1080px) {
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer__bottom .fict {
    white-space: normal;
    max-width: 100%;
    line-height: 1.5;
    padding: 4px 10px;
  }
}

/* --- 7. Landscape phone -------------------------------------
   812 x 375. The full-height screens have to give up their
   minimums, or the notice bar, the nav and one line of type fill
   the viewport between them. */
@media (max-width: 940px) and (orientation: landscape) and (max-height: 520px) {
  .hero {
    min-height: 0;
    padding-top: calc(var(--notice-h) + var(--nav-h) + var(--sp-8));
  }

  /* Landscape has the width the stacked hero gave up. Putting the
     structure back beside the type is what keeps the first screen
     from running three viewports deep on a 375px-tall phone. */
  .hero__inner {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: var(--sp-16);
  }
  .hero__structure { max-height: 62svh; aspect-ratio: 1 / 1; }
  .hero__photo { height: min(96svh, 420px); }
  .hero__stats { flex-direction: row; gap: var(--sp-16); }

  .quiet { min-height: 0; padding: var(--sp-32) 0; }

  .section-photo:not(.section-photo--band):not(.section-photo--footband),
  .section-photo--band,
  .section-photo--footband { height: clamp(170px, 58svh, 250px); }

  .band-shot { height: clamp(170px, 58svh, 250px); }
}