/* ===========================================================================
   Speech Act Studio
   One world: cold light drawing structure inside a deep slate volume.
   =========================================================================== */

:root {
  --canvas: #0d121b;
  --canvas-deep: #080c13;
  --panel: #151c28;
  --panel-edge: rgba(143, 180, 255, 0.14);
  --accent: #8fb4ff;
  --accent-hover: #b0cbff;
  --accent-muted: rgba(143, 180, 255, 0.22);
  --text-primary: #e9edf5;
  --text-secondary: #97a3ba;
  --rule: rgba(233, 237, 245, 0.12);

  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --body: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --step--1: 0.8125rem;
  --step-0: 1.0625rem;
  --step-1: clamp(1.125rem, 0.4vw + 1.02rem, 1.3125rem);
  --step-2: clamp(1.5rem, 1.1vw + 1.2rem, 2.125rem);
  --step-3: clamp(2rem, 2.6vw + 1.3rem, 3.5rem);
  --step-4: clamp(2.5rem, 5.4vw + 0.9rem, 5.75rem);

  --gutter: clamp(1.5rem, 4vw, 3.25rem);
  --band: clamp(5rem, 10vh + 3rem, 9rem);
  --measure: 62ch;
  --shell: 1220px;

  --ease: cubic-bezier(0.22, 0.68, 0.16, 1);
  --ease-soft: cubic-bezier(0.33, 0.9, 0.28, 1);

  --tshadow: 0 1px 2px rgba(4, 7, 14, 0.95), 0 3px 12px rgba(4, 7, 14, 0.78),
    0 10px 44px rgba(4, 7, 14, 0.8);
}

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

html, body { overflow-x: hidden; overflow-x: clip; }

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text-primary);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--canvas-deep);
  padding: 12px 20px; text-decoration: none; font-size: var(--step--1); font-weight: 500;
}
.skip-link:focus { left: 0; }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }

.display { font-family: var(--display); font-weight: 300; letter-spacing: -0.018em; line-height: 1.02; text-wrap: balance; }

.label {
  display: flex; align-items: center; gap: 12px; margin: 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--text-secondary);
}
.label::before { content: ""; width: 26px; height: 1px; background: var(--accent-muted); flex: none; }

.idx { font-family: var(--mono); font-size: var(--step--1); color: var(--accent); letter-spacing: 0.1em; margin: 0; }

/* --- The fixed environment layer ---------------------------------------- */

.environment {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 22% 18%, rgba(143, 180, 255, 0.09), transparent 70%),
    radial-gradient(50% 45% at 82% 72%, rgba(143, 180, 255, 0.07), transparent 72%);
  animation: drift 96s var(--ease-soft) -24s infinite alternate;
}
.environment::after {
  content: ""; position: absolute; inset: -50%;
  background-image: radial-gradient(rgba(233, 237, 245, 0.5) 0.5px, transparent 0.5px);
  background-size: 3px 3px; opacity: 0.028;
}
@keyframes drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1.02); }
  to { transform: translate3d(1.5%, 1.5%, 0) scale(1.06); }
}

.page { position: relative; z-index: 1; }

/* --- Header -------------------------------------------------------------- */

.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  transition: background 400ms var(--ease), border-color 400ms var(--ease), backdrop-filter 400ms var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(13, 18, 27, 0.82);
  -webkit-backdrop-filter: saturate(1.3) blur(12px);
  backdrop-filter: saturate(1.3) blur(12px);
  border-bottom-color: var(--rule);
}
.header-row { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); height: clamp(68px, 7.5vh, 84px); }

.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brand svg { flex: none; }
.brand-logo {
  flex: none; display: block; height: clamp(34px, 4vw, 44px); width: auto;
  filter: drop-shadow(0 1px 10px rgba(143, 180, 255, 0.18));
  transition: filter 400ms var(--ease), transform 400ms var(--ease);
}
.brand:hover .brand-logo { filter: drop-shadow(0 1px 14px rgba(143, 180, 255, 0.34)); }
.brand-name { font-family: var(--display); font-weight: 400; font-size: clamp(1rem, 0.4vw + 0.95rem, 1.2rem); letter-spacing: -0.008em; white-space: nowrap; }

.nav { display: none; margin-left: auto; gap: clamp(1.4rem, 2.4vw, 2.25rem); align-items: center; }
@media (min-width: 940px) { .nav { display: flex; } }
.nav a {
  position: relative; color: var(--text-secondary); text-decoration: none;
  font-size: var(--step--1); padding-block: 6px; transition: color 300ms var(--ease);
}
.nav a::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 380ms var(--ease);
}
.nav a:hover { color: var(--text-primary); }
.nav a:hover::after { transform: scaleX(1); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  font-family: var(--body); font-size: var(--step--1); font-weight: 500; letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer; border: 0; border-radius: 999px;
  padding: 12px 22px; background: var(--accent); color: #0a1020;
  transition: background 300ms var(--ease), transform 300ms var(--ease), box-shadow 300ms var(--ease);
  text-shadow: none;
}
.btn:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 12px 30px -16px rgba(143, 180, 255, 0.9); }
.btn .dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(10, 16, 32, 0.55); transition: transform 300ms var(--ease); }
.btn:hover .dot { transform: scale(1.7); }
.header-cta { display: none; margin-left: 0; }
@media (min-width: 940px) { .header-cta { display: inline-flex; } }
/* Touch targets only. Never re-declare display here: doing so resurrects
   buttons that a breakpoint has hidden. */
@media (pointer: coarse) { .btn { min-height: 44px; } }
/* Text links are typographic, so grow the hit area, not the type. */
@media (pointer: coarse) {
  .footer-row a, .meta-item dd a, .mail-note a, .back-link {
    display: inline-block; padding-block: 10px;
  }
  .qa summary { min-height: 44px; }
  a, button, summary { -webkit-tap-highlight-color: rgba(143, 180, 255, 0.18); }
}

.menu { margin-left: auto; }
/* An open panel needs an opaque header above it, or the brand sits on the hero. */
.site-header:has(.menu[open]), .site-header.menu-open {
  background: rgba(13, 18, 27, 0.92);
  -webkit-backdrop-filter: saturate(1.3) blur(12px);
  backdrop-filter: saturate(1.3) blur(12px);
  border-bottom-color: var(--rule);
}
@media (min-width: 940px) { .menu { display: none; } }
.menu summary {
  list-style: none; display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-primary); padding: 12px 2px; min-height: 44px;
}
.menu summary::-webkit-details-marker { display: none; }
.menu .bars { display: grid; gap: 4px; width: 20px; }
.menu .bars i { display: block; height: 1.5px; background: currentColor; transition: transform 320ms var(--ease), opacity 320ms var(--ease); }
.menu[open] .bars i:first-child { transform: translateY(5.5px) rotate(45deg); }
.menu[open] .bars i:last-child { transform: translateY(-5.5px) rotate(-45deg); }
.menu[open] .bars i:nth-child(2) { opacity: 0; }
.menu-panel {
  position: absolute; inset-inline: 0; top: 100%;
  background: rgba(8, 12, 19, 0.97);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-block: 1px solid var(--rule); padding: 8px var(--gutter) 26px; display: grid;
}
.menu-panel a {
  padding: 16px 0; border-bottom: 1px solid var(--rule); color: var(--text-primary);
  text-decoration: none; font-family: var(--display); font-weight: 300; font-size: 1.5rem;
}
.menu-panel a:last-child { border-bottom: 0; }
.menu-panel .menu-mail { font-family: var(--mono); font-size: var(--step--1); color: var(--accent); padding-bottom: 0; }

/* --- Hero ---------------------------------------------------------------- */

.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: end; isolation: isolate; }

.stage { position: absolute; inset: 0; overflow: hidden; background: var(--canvas-deep); z-index: -1; }
.poster {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transition: opacity 900ms var(--ease-soft);
}
.film {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 900ms var(--ease-soft);
  will-change: transform; transform: translateZ(0);
}
.stage.film-ready .film { opacity: 1; }
.stage.film-ready .poster { opacity: 0; }
.stage.film-failed .film { display: none; }

.scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(8, 12, 19, 0.92) 0%, rgba(8, 12, 19, 0.55) 34%, rgba(8, 12, 19, 0) 62%),
    radial-gradient(ellipse 120% 90% at 50% 45%, rgba(8, 12, 19, 0) 30%, rgba(8, 12, 19, 0.6) 100%);
}

.dust { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.dust i {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: rgba(200, 220, 255, 0.55); opacity: 0;
}
.motion-on .dust i { animation: mote 14s linear infinite; }
@keyframes mote {
  0% { opacity: 0; transform: translateY(14px); }
  16% { opacity: 0.7; }
  84% { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(-70px); }
}

.hero-inner { position: relative; z-index: 1; padding-block: clamp(6rem, 16vh, 11rem) clamp(3.5rem, 9vh, 6rem); }

.beats { display: grid; }
.beat {
  grid-area: 1 / 1; position: relative; opacity: 0; pointer-events: none;
  /* visibility, not just opacity: a faded out beat must leave the tab order
     and the accessibility tree, or the hero offers three identical buttons. */
  visibility: hidden;
  transition: opacity 700ms var(--ease-soft), visibility 0s linear 700ms;
  text-shadow: var(--tshadow);
}
.beat.is-on {
  opacity: 1; pointer-events: auto; visibility: visible;
  transition: opacity 700ms var(--ease-soft), visibility 0s;
}

/* No JavaScript means no beat is ever switched on, so rest on the static one. */
html:not(.js) .beat { display: none; }
html:not(.js) .beat-static {
  display: block; opacity: 1; visibility: visible; pointer-events: auto;
}
html:not(.js) .beat-static .settle-title .w,
html:not(.js) .beat-static .settle-title,
html:not(.js) .beat-static .settle-sub,
html:not(.js) .beat-static .settle-actions { opacity: 1; transform: none; }
/* The poster is normally painted by script; give it a plain CSS source too. */
html:not(.js) .poster { background-image: url("hero-still.jpg"); }

/* The per band scrim. The film pushes near white light lines straight through
   the text column, so each beat carries its own local darkening, anchored on
   the words and dying out well before the centre lane, which keeps the
   structure in the middle of the frame bright. */
.beat::before {
  content: ""; position: absolute; inset: -34% -18% -30% -30%;
  z-index: -1; pointer-events: none; opacity: 0;
  transition: opacity 700ms var(--ease-soft);
  background: radial-gradient(ellipse 66% 108% at 26% 50%,
    rgba(4, 7, 14, 0.88) 0%,
    rgba(4, 7, 14, 0.78) 38%,
    rgba(4, 7, 14, 0.46) 62%,
    rgba(4, 7, 14, 0) 84%);
}
.beat.is-on::before { opacity: 1; }
.beat-settle::before, .beat-static::before {
  background: radial-gradient(ellipse 62% 96% at 24% 52%,
    rgba(4, 7, 14, 0.9) 0%,
    rgba(4, 7, 14, 0.8) 40%,
    rgba(4, 7, 14, 0.48) 64%,
    rgba(4, 7, 14, 0) 85%);
}

/* Held to the same narrow left column as the settle block, so the words never
   cross into the bright lane where the film's structure sits. */
.beat-line { font-family: var(--display); font-weight: 300; font-size: var(--step-4); line-height: 1; margin: 0; max-width: 9ch; }
.beat-line .w { display: inline-block; white-space: pre; }
.beat-line .c { display: inline-block; }

/* Entrance a: drift down, echoing the descent */
.beat-1 .w { transform: translateY(-26px); opacity: 0; transition: transform 900ms var(--ease-soft), opacity 700ms linear; }
.beat-1.is-on .w { transform: none; opacity: 1; }

/* Entrance b: scatter assemble, echoing the lines joining */
.beat-2 .c { opacity: 0; transform: translate(var(--jx, 0px), var(--jy, 0px)) rotate(var(--jr, 0deg)); transition: transform 820ms var(--ease-soft), opacity 620ms linear; }
.beat-2.is-on .c { opacity: 1; transform: none; }

/* Entrance c: word punch with overshoot, echoing the last edge landing */
.beat-3 .w { opacity: 0; transform: scale(0.62); transition: transform 760ms cubic-bezier(0.18, 1.3, 0.32, 1), opacity 520ms linear; }
.beat-3.is-on .w { opacity: 1; transform: none; }

/* Entrance d: staged settle, three arrivals */
.settle { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); max-width: 44ch; }
.settle-title { font-family: var(--display); font-weight: 300; font-size: var(--step-4); line-height: 0.98; margin: 0; }
.settle-title .w { display: inline-block; white-space: pre; opacity: 0; transform: translateY(22px); transition: transform 900ms var(--ease-soft), opacity 700ms linear; }
.beat.is-on .settle-title .w { opacity: 1; transform: none; }
.settle-sub { margin: 0; color: var(--text-secondary); font-size: var(--step-1); max-width: 40ch; opacity: 0; transform: translateY(14px); transition: opacity 700ms linear 420ms, transform 800ms var(--ease-soft) 420ms; }
.beat.is-on .settle-sub { opacity: 1; transform: none; }
.settle-actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; opacity: 0; transform: translateY(12px); transition: opacity 700ms linear 700ms, transform 800ms var(--ease-soft) 700ms; }
.beat.is-on .settle-actions { opacity: 1; transform: none; }
.settle-note { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary); }

.beat-1 .w:nth-child(1) { transition-delay: 0ms; }
.beat-1 .w:nth-child(2) { transition-delay: 90ms; }
.beat-1 .w:nth-child(3) { transition-delay: 180ms; }
.beat-1 .w:nth-child(4) { transition-delay: 270ms; }
.beat-3 .w:nth-child(1) { transition-delay: 0ms; }
.beat-3 .w:nth-child(2) { transition-delay: 110ms; }
.beat-3 .w:nth-child(3) { transition-delay: 220ms; }
.beat-3 .w:nth-child(4) { transition-delay: 330ms; }
.settle-title .w:nth-child(1) { transition-delay: 0ms; }
.settle-title .w:nth-child(2) { transition-delay: 120ms; }
.settle-title .w:nth-child(3) { transition-delay: 240ms; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Section furniture --------------------------------------------------- */

.band { padding-block: var(--band); position: relative; }
.band-head { display: grid; gap: clamp(0.9rem, 1.8vw, 1.35rem); max-width: var(--measure); }
.band-head h2 { font-family: var(--display); font-weight: 300; font-size: var(--step-3); letter-spacing: -0.018em; line-height: 1.04; margin: 0; max-width: 18ch; }
.band-head p { margin: 0; color: var(--text-secondary); font-size: var(--step-1); }

.rule { height: 1px; background: var(--rule); transform: scaleX(0); transform-origin: left; transition: transform 1200ms var(--ease); }
.in .rule, .rule.in { transform: scaleX(1); }

/* Entrance choreography */
.js .reveal > * { opacity: 0; transform: translateY(20px); }
.js .reveal.in > * { opacity: 1; transform: none; transition: opacity 760ms linear, transform 900ms var(--ease-soft); }
.js .reveal.in > *:nth-child(1) { transition-delay: 0ms; }
.js .reveal.in > *:nth-child(2) { transition-delay: 90ms; }
.js .reveal.in > *:nth-child(3) { transition-delay: 180ms; }
.js .reveal.in > *:nth-child(4) { transition-delay: 270ms; }
.js .reveal.in > *:nth-child(5) { transition-delay: 360ms; }
.js .reveal.done > *, .js .reveal.done > *:nth-child(n) { transition-delay: 0ms !important; }

/* --- b. The three worries (three-up, big indices) ------------------------ */

.worries-grid { display: grid; gap: clamp(2rem, 4vw, 3rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 860px) { .worries-grid { grid-template-columns: repeat(3, 1fr); } }
.worry { display: grid; gap: 14px; align-content: start; padding-top: 26px; border-top: 1px solid var(--rule); position: relative; }
.worry::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 46px; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 700ms var(--ease);
}
.worry.lit::before { transform: scaleX(1); }
.worry-said { font-family: var(--display); font-weight: 300; font-size: var(--step-2); line-height: 1.15; margin: 0; color: var(--text-primary); }
.worry-said::before { content: "“"; color: var(--accent); margin-right: 2px; }
.worry-said::after { content: "”"; color: var(--accent); }
.worry p { margin: 0; color: var(--text-secondary); }

/* --- c. The work (numbered rows) ----------------------------------------- */

.rows { margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--rule); }
.row {
  display: grid; gap: 10px clamp(2rem, 4vw, 3.5rem); padding-block: clamp(1.6rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--rule); position: relative;
}
@media (min-width: 900px) { .row { grid-template-columns: 66px minmax(0, 1fr) minmax(0, 1.4fr); align-items: baseline; } }
.row::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 620ms var(--ease);
}
.row:hover::after { transform: scaleX(1); }
.row h3 { font-family: var(--display); font-weight: 300; font-size: var(--step-2); line-height: 1.12; margin: 0; letter-spacing: -0.012em; }
.row p { margin: 0; color: var(--text-secondary); }

/* --- d. The method (image beside steps) ---------------------------------- */

.method-grid { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); margin-top: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 1000px) { .method-grid { grid-template-columns: 0.88fr 1.12fr; } }
.method-figure { margin: 0; position: relative; border: 1px solid var(--panel-edge); border-radius: 3px; overflow: hidden; }
.method-figure img { width: 100%; height: auto; }
.steps { display: grid; gap: clamp(1.6rem, 3vw, 2.4rem); }
.step { display: grid; gap: 9px; padding-left: clamp(1.1rem, 2vw, 1.6rem); border-left: 1px solid var(--accent-muted); position: relative; }
.step::before { content: ""; position: absolute; left: -1px; top: 0; width: 1px; height: 26px; background: var(--accent); }
.step h3 { font-family: var(--display); font-weight: 300; font-size: var(--step-2); line-height: 1.12; margin: 0; }
.step p { margin: 0; color: var(--text-secondary); }

/* --- e. The promise (interactive) ---------------------------------------- */

.promise { background: var(--panel); border-block: 1px solid var(--panel-edge); }
.promise-inner { display: grid; gap: clamp(2rem, 4vw, 3rem); justify-items: center; text-align: center; }
.promise-inner .band-head { justify-items: center; text-align: center; max-width: 46ch; }
.promise-inner .band-head h2 { max-width: 22ch; }
.promise-inner .label { justify-content: center; }

.hold {
  position: relative; display: grid; place-items: center; gap: 18px;
  width: min(420px, 100%); padding: 26px; border-radius: 4px;
  border: 1px solid var(--panel-edge); background: rgba(8, 12, 19, 0.5);
  cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none;
  font: inherit; color: inherit;
}
.hold svg { width: 100%; height: auto; overflow: visible; }
.hold .track { stroke: var(--accent-muted); stroke-width: 1; fill: none; }
.hold .draw { stroke: var(--accent); stroke-width: 1.5; fill: none; stroke-linecap: round; }
.hold-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-secondary); }
.hold:hover { border-color: var(--accent-muted); }
.hold.done .hold-label { color: var(--accent); }

.commitments { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; width: min(560px, 100%); }
/* Readable at rest on purpose. The content is never gated behind the
   interaction; holding the line lights the marker and lifts each one. */
.commitments li {
  display: flex; align-items: baseline; justify-content: center; gap: 14px;
  font-family: var(--display); font-weight: 300; font-size: var(--step-2); line-height: 1.2;
  color: var(--text-secondary); opacity: 0.72; transform: translateY(6px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease-soft), color 620ms var(--ease);
}
.commitments li::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); transform: scale(0); transform-origin: center;
  transition: transform 520ms var(--ease-soft);
}
.commitments li.lit { opacity: 1; transform: none; color: var(--text-primary); }
.commitments li.lit::before { transform: scale(1); }
.promise-done { margin: 0; color: var(--accent); font-family: var(--mono); font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0; transition: opacity 620ms var(--ease); }
.promise-done.lit { opacity: 1; }

/* --- f. Questions (disclosure list) -------------------------------------- */

.qa { margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--rule); max-width: 80ch; }
.qa details { border-bottom: 1px solid var(--rule); }
.qa summary {
  list-style: none; cursor: pointer; display: flex; gap: 20px; align-items: baseline;
  padding-block: clamp(1.1rem, 2.2vw, 1.6rem); font-family: var(--display); font-weight: 300;
  font-size: var(--step-2); line-height: 1.2; letter-spacing: -0.012em; min-height: 44px;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; margin-left: auto; flex: none; align-self: center;
  width: 11px; height: 11px; border-right: 1px solid var(--accent); border-bottom: 1px solid var(--accent);
  transform: rotate(45deg) translateY(-2px); transition: transform 380ms var(--ease);
}
.qa details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.qa .answer { padding-bottom: clamp(1.1rem, 2.2vw, 1.6rem); color: var(--text-secondary); max-width: var(--measure); margin: 0; }

/* --- g. Contact ---------------------------------------------------------- */

.letterhead { display: grid; gap: clamp(1.75rem, 3.5vw, 2.75rem); }
.letterhead-logo { justify-self: start; }
.letterhead-logo img {
  display: block; width: clamp(150px, 20vw, 210px); height: auto;
  filter: drop-shadow(0 6px 30px rgba(143, 180, 255, 0.16));
}
.mail-line {
  display: block; text-decoration: none; color: var(--text-primary);
  font-family: var(--display); font-weight: 300; letter-spacing: -0.026em;
  font-size: clamp(1.6rem, 5.4vw, 4.25rem); line-height: 1.04;
  padding-bottom: 20px; border-bottom: 1px solid var(--rule); position: relative; word-break: break-word;
}
.mail-line::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 700ms var(--ease);
}
.mail-line:hover::after { transform: scaleX(1); }
.mail-note { margin: 0; color: var(--text-secondary); font-size: var(--step--1); }
.meta-grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (min-width: 780px) { .meta-grid { grid-template-columns: repeat(3, 1fr); } }
.meta-item { display: grid; gap: 6px; align-content: start; }
.meta-item dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-secondary); }
.meta-item dd { margin: 0; }
.meta-item a { color: var(--text-primary); text-decoration: none; border-bottom: 1px solid var(--rule); }
.meta-item a:hover { border-bottom-color: var(--accent); }

/* --- Footer -------------------------------------------------------------- */

.site-footer { background: var(--canvas-deep); border-top: 1px solid var(--rule); padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem); }
.footer-mark {
  font-family: var(--display); font-weight: 300; font-size: clamp(2.25rem, 10vw, 7.5rem);
  line-height: 0.92; letter-spacing: -0.035em; margin: 0 0 clamp(2rem, 4vw, 3.25rem);
  color: rgba(233, 237, 245, 0.9);
}
.footer-mark span { color: var(--accent); }
.footer-mark img {
  display: block; height: clamp(46px, 5.5vw, 82px); width: auto;
  margin: 0 0 clamp(0.5rem, 1.2vw, 0.9rem);
  filter: drop-shadow(0 2px 18px rgba(143, 180, 255, 0.16));
}
.footer-row {
  display: flex; flex-wrap: wrap; gap: 12px clamp(1.25rem, 3vw, 2.25rem); align-items: center;
  padding-top: clamp(1.4rem, 3vw, 2rem); border-top: 1px solid var(--rule);
  font-size: var(--step--1); color: var(--text-secondary);
}
.footer-row a { color: var(--text-primary); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 2px; }
.footer-row a:hover { border-bottom-color: var(--accent); }
.footer-spacer { margin-left: auto; }
.disclosure { width: 100%; margin: 14px 0 0; font-size: 12px; color: var(--text-secondary); opacity: 0.8; }

/* --- Legal page ---------------------------------------------------------- */

.legal { padding-block: clamp(7rem, 14vh, 10rem) clamp(4rem, 8vw, 7rem); }
.legal-head { display: grid; gap: clamp(0.9rem, 1.8vw, 1.35rem); max-width: var(--measure); }
.legal-head h1 { font-family: var(--display); font-weight: 300; font-size: var(--step-3); margin: 0; letter-spacing: -0.018em; }
.legal-head p { margin: 0; color: var(--text-secondary); font-family: var(--mono); font-size: var(--step--1); letter-spacing: 0.06em; }
.legal-body { max-width: var(--measure); margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; gap: clamp(1.75rem, 3.5vw, 2.5rem); }
.legal-body section { display: grid; gap: 12px; padding-top: clamp(1.4rem, 3vw, 2rem); border-top: 1px solid var(--rule); }
.legal-body h2 { font-family: var(--display); font-weight: 300; font-size: var(--step-2); line-height: 1.15; margin: 0; }
.legal-body p, .legal-body li { margin: 0; color: var(--text-secondary); }
.legal-body ul { display: grid; gap: 10px; padding-left: 20px; margin: 0; }
.legal-body a { color: var(--text-primary); }
.legal-body strong { color: var(--text-primary); font-weight: 500; }
.back-link {
  display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono);
  font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-secondary); text-decoration: none;
}
.back-link:hover { color: var(--accent); }

/* --- Short screens ------------------------------------------------------- */

@media (max-height: 560px) { .dust { display: none; } }

/* --- The static hero gates ----------------------------------------------- */

@media (max-width: 720px),
       (orientation: portrait) and (max-width: 1024px),
       (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-motion: reduce) {
  .film { display: none; }
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .js .reveal > * { opacity: 1; transform: none; }
  .beat .w, .beat .c, .settle-sub, .settle-actions { opacity: 1 !important; transform: none !important; }
  .rule { transform: scaleX(1); }
  .commitments li { opacity: 1; transform: none; }
}

/* Paused when the tab is hidden */
body.paused *, body.paused *::before, body.paused *::after { animation-play-state: paused !important; }