/* ===========================================================
   ARTICULATED OFFERING — site stylesheet
   Palette derived from the cast's substances, not invented.
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&family=Spectral:ital,wght@0,300;0,400;0,500;1,300;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* the vellum dark field — warm, never pure black */
  --field:        #13100C;
  --field-raised: #1A1510;
  --field-edge:   #2A2119;

  /* graphite and light on vellum */
  --ink:          #EDE4D3;
  --ink-muted:    #9A8E7C;
  --ink-faint:    #8A7F6E;   /* raised from #6B6255, which rendered at 3.16:1 on the
                                vellum field and failed WCAG AA. Now 4.82:1. The
                                accessibility page commits to AA, so this is not optional. */

  /* substances (each accent is a figure's material) */
  --amber:        #C8912E;  /* Sun — alabaster with amber glass */
  --wax:          #D9C79B;  /* Moon — worked beeswax */
  --verdigris:    #7A9782;  /* Venus — copper gone green */
  --copper:       #A6603C;  /* Venus — copper before it turns */
  --gallium:      #AFB5BA;  /* Mercury — cool, state-dependent */

  /* per-system accent: the three theatres carry their own material */
  --accent: var(--amber);

  --measure: 34rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --band-y: clamp(4.5rem, 11vh, 9rem);

  --f-display: 'Fraunces', Georgia, serif;
  --f-body: 'Spectral', Georgia, serif;
  --f-spec: 'IBM Plex Mono', ui-monospace, monospace;
}

[data-system="hee"]  { --accent: var(--amber); }
[data-system="her"]  { --accent: var(--wax); }
[data-system="heir"] { --accent: var(--verdigris); }

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--field);
  color: var(--ink);
  font-family: var(--f-body);
  font-weight: 300;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.115rem);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

/* vellum tooth — a grain over the whole field so it never reads as flat black */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  opacity: 0.045;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, video { max-width: 100%; display: block; }

a { color: inherit; }

::selection { background: var(--accent); color: var(--field); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ---------- type ---------- */

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 1.5rem + 5.2vw, 5.4rem); }
h2 { font-size: clamp(1.85rem, 1.2rem + 2.6vw, 3rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem); }

p { margin: 0 0 1.15em; max-width: var(--measure); }

em { font-style: italic; color: var(--wax); }

.lede {
  font-size: clamp(1.14rem, 1rem + 0.65vw, 1.42rem);
  line-height: 1.62;
  color: var(--ink);
}

.spec {
  font-family: var(--f-spec);
  font-size: 0.685rem;
  font-weight: 400;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* copy slots only Rimari can fill — deliberately conspicuous */
.slot {
  font-family: var(--f-spec);
  font-size: 0.78em;
  letter-spacing: 0.06em;
  color: var(--amber);
  border-bottom: 1px dashed color-mix(in srgb, var(--amber) 55%, transparent);
  padding: 0 0.12em;
  white-space: nowrap;
}

/* ---------- layout ---------- */

.wrap { width: min(72rem, 100% - var(--gutter) * 2); margin-inline: auto; }
/* .narrow shares .wrap's LEFT edge rather than centring in the viewport, so a
   page-head and the sections beneath it line up on one axis. On screens narrower
   than 72rem the max() falls back to the gutter and nothing changes. */
.narrow {
  width: min(46rem, 100% - var(--gutter) * 2);
  margin-inline: max(var(--gutter), (100% - 72rem) / 2) auto;
}

.band { padding-block: var(--band-y); }
.band--tight { padding-block: calc(var(--band-y) * 0.55); }
.band--edge { border-top: 1px solid var(--field-edge); }

.stack > * + * { margin-top: 1.5rem; }

/* ---------- header ---------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.15rem var(--gutter);
  background: color-mix(in srgb, var(--field) 88%, transparent);
  backdrop-filter: blur(9px);
  border-bottom: 1px solid var(--field-edge);
}

.mark {
  font-family: var(--f-display);
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.mark span { color: var(--ink-faint); }

.nav { display: flex; gap: clamp(0.9rem, 2.2vw, 1.9rem); flex-wrap: wrap; }
.nav a {
  font-family: var(--f-spec);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.25s, border-color 0.25s;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

/* ---------- hero: the viewer is the room ---------- */

.hero {
  position: relative;
  min-height: min(88vh, 60rem);
  display: grid;
  align-items: end;
  overflow: hidden;
  border-bottom: 1px solid var(--field-edge);
}

.hero-field {
  position: absolute;
  inset: 0;
  --mx: 50%;
  --my: 46%;
  --r: 32vmax;
}

.hero-plate {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

/* the figure barely present in the dark... */
.hero-plate--base { opacity: 0.13; filter: grayscale(0.4) contrast(0.9); }

/* ...and fully present only where the visitor's light falls */
.hero-plate--lit {
  opacity: 0.95;
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my), #000 0%, rgba(0,0,0,0.72) 38%, transparent 72%);
  mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my), #000 0%, rgba(0,0,0,0.72) 38%, transparent 72%);
}

.hero-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle calc(var(--r) * 0.85) at var(--mx) var(--my),
    color-mix(in srgb, var(--amber) 15%, transparent) 0%, transparent 68%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.hero-vignette {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--field) 4%, color-mix(in srgb, var(--field) 55%, transparent) 42%, transparent 78%);
  pointer-events: none;
}

.hero-copy { position: relative; z-index: 2; padding: 0 var(--gutter) clamp(3rem, 8vh, 6rem); }
.hero-copy h1 { max-width: 15ch; }
.hero-sub { margin-top: 1.6rem; max-width: 30rem; color: var(--ink-muted); }
.hero-note { margin-top: 2.2rem; }

/* ---------- the three theatres ---------- */

.theatres { display: grid; gap: 1px; background: var(--field-edge); border-block: 1px solid var(--field-edge); }
@media (min-width: 56rem) { .theatres { grid-template-columns: repeat(3, 1fr); } }

.theatre {
  background: var(--field);
  padding: clamp(2rem, 4vw, 3.2rem) clamp(1.5rem, 3vw, 2.4rem);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: background 0.4s;
}
.theatre:hover { background: var(--field-raised); }
.theatre h3 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem); }
.theatre p { color: var(--ink-muted); font-size: 0.98rem; margin: 0; }
.theatre .spec { color: color-mix(in srgb, var(--accent) 80%, var(--ink-faint)); }
.theatre .rule { height: 1px; background: var(--accent); width: 2.4rem; opacity: 0.75; }

/* ---------- the cabinet (cast) ---------- */

.cabinet {
  display: grid;
  gap: 1px;
  background: var(--field-edge);
  border: 1px solid var(--field-edge);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.figure {
  background: var(--field);
  padding: 1.4rem 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.figure img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; opacity: 0.88; }
.figure h3 { font-size: 1.25rem; }
.figure .ache { font-size: 0.95rem; line-height: 1.55; color: var(--ink-muted); font-style: italic; margin: 0; }
.figure .substance { color: var(--ink-faint); }

/* the essence — one word per figure. Read down the cabinet, the fourteen are a system.
   This is the studio labelling, not the figure speaking: mono, not Spectral. It sits
   directly above the line so the line has something to be about. */
.figure .essence {
  font-size: 0.645rem;
  letter-spacing: 0.26em;
  color: var(--accent);
  margin-top: -0.28rem;
}

/* ---------- sample blocks ----------
   The excerpt is INLINE, never a PDF link. A hundred words does not justify
   routing someone out of the page into a document viewer. If an excerpt ever
   grows long enough to need a scroll, cap it here rather than linking away. */

.excerpt {
  margin: 0;
  max-height: 26rem;
  overflow-y: auto;
  padding-right: 0.6rem;
}
.excerpt p {
  font-size: 0.95rem;
  line-height: 1.62;
  color: var(--ink);
  font-style: italic;
  margin: 0 0 0.85rem;
  text-wrap: pretty;
}
.excerpt p:last-child { margin-bottom: 0; }
/* nested scrolling is miserable on a phone: let it flow instead */
@media (max-width: 46rem) { .excerpt { max-height: none; overflow: visible; } }

.specimen-audio { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--field-edge); }
.specimen-audio h4 {
  font-family: var(--f-spec); font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 0.8rem;
}
.specimen-audio audio { width: 100%; height: 2.5rem; }

/* ---------- sample blocks ---------- */

.sample {
  display: grid;
  gap: 1px;
  background: var(--field-edge);
  border: 1px solid var(--field-edge);
  max-width: 52rem;
}
@media (min-width: 46rem) { .sample { grid-template-columns: 1fr 1fr; } }
.sample-part {
  background: var(--field);
  padding: clamp(1.4rem, 3vw, 2rem);
  display: flex; flex-direction: column; justify-content: center; gap: 0.85rem;
}
.sample-part h4 {
  font-family: var(--f-spec);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.sample-part p { color: var(--ink-muted); font-size: 0.93rem; margin: 0; }
.sample-part .btn { text-align: center; }
.sample-part audio { width: 100%; height: 2.5rem; }

/* ---------- the specimen ----------
   A whole deliverable, set inside a page. It has to read as a separate object
   rather than as more page copy, or the proof stops being proof. */

.specimen {
  border: 1px solid var(--field-edge);
  background: color-mix(in srgb, var(--field) 60%, transparent);
  padding: clamp(1.6rem, 4vw, 2.8rem);
  margin-top: 0.6rem;
  max-width: 44rem;
}
.specimen h3 {
  font-size: 0.72rem;
  font-family: var(--f-spec);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 2rem 0 0.9rem;
}
.specimen h3:first-child { margin-top: 0; }
.specimen p {
  font-size: 1rem;
  line-height: 1.68;
  color: var(--ink-muted);
  margin: 0 0 1rem;
  text-wrap: pretty;
}
.specimen .specimen-foot {
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--field-edge);
  font-size: 0.9rem;
  font-style: italic;
  color: var(--ink-faint);
}

/* ---------- reviews ----------
   Deliberately quiet. A studio that shouts about testimonials is selling;
   one that sets them down beside the price is showing its work. */

.voices {
  display: grid;
  gap: 1px;
  background: var(--field-edge);
  border-block: 1px solid var(--field-edge);
}
@media (min-width: 46rem) {
  .voices { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}
.voice {
  background: var(--field); padding: 1.5rem 1.4rem; margin: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.voice blockquote {
  margin: 0 0 0.9rem;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--ink);
  font-style: italic;
  text-wrap: pretty;
}
.voice figcaption { color: var(--ink-faint); }

/* FTC material-connection disclosure. Must stay legible: quiet, not hidden. */
.disclosure {
  margin-top: 1.4rem;
  color: var(--ink-muted);
  letter-spacing: 0.06em;
  text-transform: none;
  max-width: 44rem;
}

/* ---------- product page furniture ---------- */
.page-head { border-bottom: 1px solid var(--field-edge); }
.page-head h1 { max-width: 18ch; }
.page-head .spec { color: var(--accent); margin-bottom: 1.4rem; display: block; }

.receive { display: grid; gap: 1px; background: var(--field-edge); border: 1px solid var(--field-edge); }
@media (min-width: 46rem) { .receive { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }
.receive > div { background: var(--field); padding: 1.6rem 1.5rem; }
.receive h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.receive p { font-size: 0.95rem; color: var(--ink-muted); margin: 0; }

.sequence { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.sequence li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 1rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--field-edge);
  max-width: 44rem;
}
.sequence li:last-child { border-bottom: 1px solid var(--field-edge); }
.sequence li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--f-spec);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  padding-top: 0.42rem;
}
.sequence strong { font-family: var(--f-body); font-weight: 500; display: block; grid-column: 2; }
.sequence li > span { grid-column: 2; color: var(--ink-muted); font-size: 0.95rem; }

/* the honesty block — same on every product page */
.isnt {
  border-left: 2px solid var(--accent);
  padding: 0.2rem 0 0.2rem 1.6rem;
  max-width: 40rem;
}
.isnt ul { margin: 0.8rem 0 0; padding-left: 1.1rem; color: var(--ink-muted); }
.isnt li { margin-bottom: 0.5rem; }

.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.9rem 1.6rem;
  margin-bottom: 1.8rem;
}
.price .amount { font-family: var(--f-display); font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }

.btn {
  display: inline-block;
  font-family: var(--f-spec);
  font-size: 0.75rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--field);
  background: var(--accent);
  padding: 1rem 2rem;
  border: 1px solid var(--accent);
  transition: background 0.3s, color 0.3s;
}
.btn:hover { background: transparent; color: var(--accent); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink-faint); }
.btn--ghost:hover { background: var(--ink); color: var(--field); border-color: var(--ink); }

.embed-slot {
  border: 1px dashed var(--field-edge);
  padding: 2.4rem 1.5rem;
  text-align: center;
  color: var(--ink-faint);
  background: var(--field-raised);
}

/* ---------- the film ---------- */

.film { display: grid; gap: 2.2rem; align-items: center; }
@media (min-width: 60rem) { .film { grid-template-columns: 1.25fr 1fr; gap: 3.5rem; } }
.film video, .film .film-holder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--field-raised);
  border: 1px solid var(--field-edge);
}
.film .film-holder { display: grid; place-items: center; color: var(--ink-faint); }

/* ---------- footer ---------- */

.foot {
  border-top: 1px solid var(--field-edge);
  padding: clamp(2.5rem, 6vh, 4rem) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  justify-content: space-between;
  align-items: flex-start;
  color: var(--ink-faint);
}
.foot a { color: var(--ink-muted); text-decoration: none; border-bottom: 1px solid transparent; }
.foot a:hover { border-bottom-color: var(--ink-muted); }
.foot-links { display: flex; flex-direction: column; gap: 0.5rem; }
.foot p { font-size: 0.85rem; max-width: 26rem; margin: 0; }

/* ---------- motion ---------- */

.rise { opacity: 0; transform: translateY(14px); transition: opacity 0.85s ease, transform 0.85s ease; }
.rise.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { opacity: 1; transform: none; transition: none; }
  .hero-field { --r: 100vmax; --mx: 50%; --my: 45%; }
  .hero-plate--lit { opacity: 0.8; }
  .hero-glow { display: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- legal pages ---------- */

.legal { counter-reset: sec; }
.legal h2 {
  counter-increment: sec;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  margin: 2.6rem 0 0.9rem;
}
.legal h2::before {
  content: counter(sec) ". ";
  color: var(--accent);
}
.legal h3 { font-size: 1.05rem; margin: 1.6rem 0 0.5rem; font-weight: 500; font-family: var(--f-body); }
.legal p, .legal li { max-width: 42rem; }
.legal ul, .legal ol { padding-left: 1.2rem; color: var(--ink); }
.legal li { margin-bottom: 0.5rem; }
.legal .effective { color: var(--ink-muted); font-size: 0.9rem; }

/* items that need the attorney's judgment, not just a blank filled */
.review {
  display: block;
  border-left: 2px solid var(--copper);
  background: var(--field-raised);
  padding: 0.8rem 1.1rem;
  margin: 1rem 0;
  font-size: 0.88rem;
  color: var(--ink-muted);
  max-width: 42rem;
}
.review::before {
  content: "FOR ATTORNEY REVIEW — ";
  font-family: var(--f-spec);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--copper);
}

/* ---------- tiers & the switchboard ---------- */

.tiers { display: grid; gap: 1px; background: var(--field-edge); border: 1px solid var(--field-edge); }
@media (min-width: 56rem) { .tiers { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }
.tier { background: var(--field); padding: clamp(1.6rem, 3vw, 2.4rem); display: flex; flex-direction: column; gap: 0.9rem; }
.tier h3 { font-size: 1.25rem; }
.tier > p { color: var(--ink-muted); font-size: 0.95rem; margin: 0; }
.tier .btn { margin-top: auto; }
.tier .price { margin: 0; }
.tier .amount { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); }
.tier .btn { text-align: center; }
.tier .cap { font-size: 0.78rem; }

/* ---------- the format choice ----------
   One price, two deliverables. Reads as a single rung with a fork in it rather
   than two competing tiers, which is the whole point: the buyer is not deciding
   how much to spend, only how they want to receive it. */

.choice {
  border: 1px solid var(--accent);
  background: var(--field);
  margin-bottom: 1px;
}
.choice-head {
  padding: clamp(1.15rem, 2.2vw, 1.6rem) clamp(1.6rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--field-edge);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1.4rem;
}
.choice-head h3 { font-size: 1.25rem; margin: 0; }
.choice-head .amount { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); color: var(--accent); }
.choice-head p { flex-basis: 100%; margin: 0; color: var(--ink-muted); font-size: 0.95rem; }

.choice-opts { display: grid; gap: 1px; background: var(--field-edge); }
@media (min-width: 46rem) { .choice-opts { grid-template-columns: 1fr 1fr; } }
.opt {
  background: var(--field);
  padding: clamp(1.4rem, 3vw, 2rem);
  display: flex; flex-direction: column; gap: 0.8rem;
}
.opt h4 {
  font-family: var(--f-spec);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.opt p { color: var(--ink-muted); font-size: 0.95rem; margin: 0; }
.opt .btn { margin-top: auto; }
.opt .btn { text-align: center; }

.btn--closed {
  background: transparent;
  color: var(--ink-muted);
  border-color: var(--field-edge);
  pointer-events: auto;
}
.btn--closed:hover { background: var(--field-raised); color: var(--ink); border-color: var(--ink-faint); }

/* ---------- companion essays & the threshold text ---------- */

.essay h2 { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.8rem); margin: 2.8rem 0 0.9rem; }
.essay p { max-width: 42rem; }

.threshold {
  border: 1px solid var(--field-edge);
  border-left: 2px solid var(--accent);
  background: var(--field-raised);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  margin: 1.5rem 0;
  max-width: 44rem;
}
.threshold p { font-size: 0.98rem; }
.threshold p:last-child { margin-bottom: 0; }

.concept { border-left: 2px solid var(--accent); padding-left: 1.6rem; }
.concept p { max-width: 40rem; }
.concept .more { font-family: var(--f-spec); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
.concept .more a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }

/* ---------- the site-wide field: every page is a room with a figure in it ---------- */

.site-field {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* NOT inset:0. A fixed element sized to the viewport re-measures when a mobile
     browser retracts its URL bar on first scroll, and because .plate uses
     object-fit:cover the crop recalculates and the figure visibly jumps.
     100lvh is the LARGE viewport height: a static value that never changes with
     browser chrome, so the crop is computed once and holds. 100vh precedes it
     as the fallback for anything that doesn't know lvh. */
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  pointer-events: none;
  --mx: 50%;
  --my: 42%;
  --r: 34vmax;
}
.site-field .plate {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* --plate-y is set per page on .site-field; lower % = higher in the image.
     Tune it so each figure shows head and upper body. */
  object-position: 50% var(--plate-y, 20%);
}
.site-field .plate--base { opacity: 0.45; filter: grayscale(0.35) brightness(0.72) contrast(0.9); }
.site-field .plate--lit {
  opacity: 0.95;
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my), #000 0%, rgba(0,0,0,0.7) 38%, transparent 72%);
  mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my), #000 0%, rgba(0,0,0,0.7) 38%, transparent 72%);
}
.site-field .glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle calc(var(--r) * 0.85) at var(--mx) var(--my),
    color-mix(in srgb, var(--accent) 13%, transparent) 0%, transparent 68%);
  mix-blend-mode: screen;
}
/* readability veil: darker toward the edges and the bottom, where text runs long */
.site-field::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% 35%, transparent 0%, color-mix(in srgb, var(--field) 62%, transparent) 78%),
    linear-gradient(to bottom, color-mix(in srgb, var(--field) 30%, transparent) 0%, color-mix(in srgb, var(--field) 74%, transparent) 100%);
}

main, .foot { position: relative; z-index: 1; }

/* the hero's own dim layer rises to match the new register */
.hero-plate--base { opacity: 0.45; filter: grayscale(0.3) brightness(0.8); }

@media (prefers-reduced-motion: reduce) {
  .site-field .plate--lit { display: none; }
  .site-field .glow { display: none; }
}

/* ---------- touch devices: the light is a cursor gesture, so it rests ----------
   No pointer means no roving light. The figure simply stands in the field,
   still, and the phone stops repainting the viewport sixty times a second. */

/* ---------- narrow screens ----------
   Two related problems, one cause. Six nav items wrap to two rows, which makes the
   masthead ~230px tall on a phone. And --plate-y is INERT in portrait: the viewport
   is narrower relative to its height than the plate is, so object-fit:cover scales
   to the height and crops horizontally, leaving no vertical overflow to position
   against. So the figure's head sits at the top of the image, behind the masthead.
   Fix both: tighten the nav so it fits one or two compact rows, and drop the whole
   field below the header so no figure is ever born under it. */

@media (max-width: 46rem) {
  .masthead { padding: 0.85rem var(--gutter); gap: 0.7rem; }
  .nav { gap: 0.75rem 0.95rem; }
  .nav a { font-size: 0.62rem; letter-spacing: 0.11em; }
  .site-field { top: 8.5rem; }

  /* belt and braces: if a list item's continuation text is ever left unwrapped,
     collapse to a single column rather than squeezing it into the number gutter */
  .sequence li { grid-template-columns: 1fr; gap: 0.35rem; }
  .sequence li::before { grid-column: 1; padding-top: 0; }
  .sequence strong, .sequence li > span { grid-column: 1; }
}

@media (hover: none), (pointer: coarse) {
  .site-field .plate--lit,
  .site-field .glow,
  .hero-plate--lit,
  .hero-glow { display: none; }

  /* the grain stays, but without blend-mode compositing */
  body::before { mix-blend-mode: normal; opacity: 0.03; }

  /* backdrop blur is the single most expensive thing in a sticky bar */
  .masthead { backdrop-filter: none; background: var(--field); }

  /* the base plate carries the whole image now, so let it sit a touch brighter */
  .site-field .plate--base { opacity: 0.5; }

  /* promote the plate to its own layer so the first scroll does not repaint it */
  .site-field .plate--base { will-change: transform; transform: translateZ(0); }
  .hero-plate--base { opacity: 0.6; }
}