/* ==========================================================================
   Sworn Record
   Design system. Paper and ink alternate. Red is the hinge.
   ========================================================================== */

:root {
  /* Palette. Nothing outside these four. */
  --ink: #121212;
  --paper: #F4F2EE;
  --red: #E0352B;
  --steel: #6E7377;

  /* Derived surfaces.
     --ink-sheet clears 1.27:1 against --ink so it is visibly a card, not a flat field. */
  --ink-sheet: #282828;
  --ink-sheet-hi: #323232;
  --ink-rule: rgba(244, 242, 238, 0.14);
  --ink-soft: rgba(244, 242, 238, 0.62);

  --paper-sheet: #FCFBF9;
  --paper-rule: rgba(18, 18, 18, 0.14);
  --paper-soft: rgba(18, 18, 18, 0.62);

  --red-soft: rgba(224, 53, 43, 0.14);

  /* Type */
  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --f-display: clamp(2.75rem, 10.5vw, 7.25rem);
  --f-h2: clamp(2rem, 5.4vw, 3.5rem);
  --f-h3: clamp(1.3rem, 2.5vw, 1.75rem);
  --f-lead: clamp(1.125rem, 1.7vw, 1.4rem);
  --f-body: clamp(1rem, 1.1vw, 1.0625rem);
  --f-label: 0.6875rem;

  /* Rhythm */
  --band-y: clamp(4.5rem, 11vw, 9rem);
  --rail: 4.5rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--f-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }

/* Playfair's descenders are long. Below about 1.02 the p of one line collides
   with the ascenders of the next. 1.12 measured clean on every wrapping headline. */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

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

::selection { background: var(--red); color: var(--paper); }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.wrap {
  width: min(1240px, 100% - 2.5rem);
  margin-inline: auto;
}

.wrap--narrow { width: min(820px, 100% - 2.5rem); }

/* Constrain a block inside a full-width wrap without breaking the page gutter. */
.hold { max-width: 880px; }

.band {
  position: relative;
  padding-block: var(--band-y);
  overflow: clip;
}

.band--paper {
  --band-bg: var(--paper);
  --band-fg: var(--ink);
  --band-soft: var(--paper-soft);
  --band-rule: var(--paper-rule);
  --band-sheet: var(--paper-sheet);
  background: var(--paper);
  color: var(--ink);
}

.band--ink {
  --band-bg: var(--ink);
  --band-fg: var(--paper);
  --band-soft: var(--ink-soft);
  --band-rule: var(--ink-rule);
  --band-sheet: var(--ink-sheet);
  background: var(--ink);
  color: var(--paper);
}

/* Fine grain, paper bands only. Ink stays clean. */
.band--paper::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

.band > .wrap { position: relative; z-index: 1; }

.lede {
  font-size: var(--f-lead);
  line-height: 1.5;
  color: var(--band-soft, var(--paper-soft));
  max-width: 34ch;
}

.measure { max-width: 62ch; }

/* --------------------------------------------------------------------------
   Exhibit labels
   -------------------------------------------------------------------------- */

.exhibit {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem 0.75rem;
  font-family: var(--mono);
  font-size: var(--f-label);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--band-soft, var(--paper-soft));
  margin-bottom: 1.75rem;
}

.exhibit::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  background: var(--red);
  border-radius: 50%;
}

/* Each half stays on one line and wraps as a unit, so narrow screens stack the
   two labels instead of breaking words mid-phrase. */
.exhibit > span { white-space: nowrap; }
.exhibit > span:not(.exhibit__lead) { color: var(--band-fg, var(--ink)); }

/* --------------------------------------------------------------------------
   Buttons. Stamp press.
   -------------------------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0 1.75rem;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  border: 1.5px solid var(--red);
  opacity: 0;
  transform: scale(1);
  pointer-events: none;
}

.btn:active { transform: translateY(2px); }
.btn.is-stamped::after { animation: stamp 0.5s var(--ease) forwards; }

@keyframes stamp {
  0% { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.22); }
}

.btn--primary {
  background: var(--red);
  color: var(--paper);
}

.btn--primary:hover { background: #C62C23; }

.btn--ghost {
  background: transparent;
  color: var(--band-fg, var(--ink));
  border-color: var(--band-rule, var(--paper-rule));
}

.btn--ghost:hover {
  border-color: var(--band-fg, var(--ink));
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
}

/* Text link with a red underline that draws in */
.tlink {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  display: inline-block;
  padding-bottom: 0.3rem;
}

.tlink::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--red);
  transform: scaleX(0.22);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}

.tlink:hover::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   Sheet. The card. Binding holes down the left edge, echoing the mark.
   -------------------------------------------------------------------------- */

.sheet {
  position: relative;
  background: var(--band-sheet, var(--paper-sheet));
  border: 1px solid var(--band-rule, var(--paper-rule));
  border-radius: 4px;
  padding: 2rem 1.75rem 2rem 3.25rem;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease),
    background 0.45s var(--ease), border-color 0.45s var(--ease);
}

/* Content rides above the glare. */
.sheet > *:not(.sheet__glare) { position: relative; z-index: 1; }

/* The sheet picks up off the desk and tilts toward the cursor. */
.sheet__glare {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    var(--glare, rgba(255, 255, 255, 0.6)),
    transparent 46%
  );
}

.sheet.is-tilting .sheet__glare { opacity: 1; }

.band--paper .sheet { --glare: rgba(255, 255, 255, 0.85); }
.band--ink .sheet { --glare: rgba(244, 242, 238, 0.13); }

/* binding holes */
.sheet::before {
  content: "";
  position: absolute;
  left: 1.1rem;
  top: 1.75rem;
  bottom: 1.75rem;
  width: 9px;
  background-image: radial-gradient(
    circle 4.5px at 4.5px 9px,
    var(--band-fg, var(--ink)) 98%,
    transparent 100%
  );
  background-size: 9px 26px;
  background-repeat: repeat-y;
  opacity: 0.85;
}

/* the vertical rule beside them */
.sheet::after {
  content: "";
  position: absolute;
  left: 2.4rem;
  top: 1.5rem;
  bottom: 1.5rem;
  width: 1px;
  background: var(--band-rule, var(--paper-rule));
}

.band--paper .sheet { box-shadow: 0 1px 2px rgba(18, 18, 18, 0.05); }

/* Lift shadow, offset opposite the tilt so the sheet reads as floating.
   The JS sets --sx / --sy; these are the resting values. */
.band--paper .sheet.is-tilting {
  box-shadow: var(--sx, 0px) var(--sy, 20px) 42px -20px rgba(18, 18, 18, 0.45);
  border-color: rgba(18, 18, 18, 0.22);
}

.band--ink .sheet.is-tilting {
  background: var(--ink-sheet-hi);
  box-shadow: var(--sx, 0px) var(--sy, 20px) 44px -18px rgba(0, 0, 0, 0.8);
  border-color: rgba(244, 242, 238, 0.24);
}

/* Touch and reduced-motion get a plain lift instead of the 3D tilt. */
@media (hover: none) {
  .band--paper .sheet:active { transform: translateY(-4px); }
  .band--ink .sheet:active { background: var(--ink-sheet-hi); }
}

.sheet h3 { font-size: var(--f-h3); margin-bottom: 0.7rem; }
.sheet p { color: var(--band-soft, var(--paper-soft)); font-size: 0.975rem; }

.sheet-no {
  font-family: var(--mono);
  font-size: var(--f-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--red);
  display: block;
  margin-bottom: 0.9rem;
}

.grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1040px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem clamp(1.25rem, 3vw, 2.25rem);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  border-bottom: 1px solid transparent;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease),
    padding 0.3s var(--ease);
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .nav { background: rgba(244, 242, 238, 0.92); }
}

.nav.is-stuck {
  background: var(--paper);
  border-bottom-color: var(--paper-rule);
  padding-block: 0.65rem;
}

.nav__logo { display: block; flex: none; }
.nav__logo img { height: 34px; width: auto; }

.nav__links {
  display: none;
  align-items: center;
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
}

.nav__link {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  padding-block: 0.4rem;
  white-space: nowrap;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav .btn { min-height: 2.75rem; padding: 0 1.25rem; font-size: 0.75rem; }

.nav__toggle {
  appearance: none;
  background: transparent;
  border: 1px solid var(--paper-rule);
  border-radius: 2px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 0;
}

.nav__toggle span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}

.nav__toggle span:nth-child(1) { grid-area: 1 / 1; transform: translateY(-5px); }
.nav__toggle span:nth-child(2) { grid-area: 1 / 1; }
.nav__toggle span:nth-child(3) { grid-area: 1 / 1; transform: translateY(5px); }

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

/* Declared after the base rules so the desktop swap actually wins. */
@media (min-width: 900px) {
  .nav__links { display: flex; }
  .nav__toggle { display: none; }
}

.drawer {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  padding: 6rem 1.75rem 2.5rem;
  transform: translateY(-100%);
  transition: transform 0.55s var(--ease);
}

.drawer.is-open { transform: translateY(0); }

.drawer a:not(.btn) {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2rem, 9vw, 3rem);
  text-decoration: none;
  line-height: 1.15;
  padding-block: 0.35rem;
  border-bottom: 1px solid var(--ink-rule);
}

.drawer .btn { margin-top: 1.75rem; align-self: flex-start; }
.drawer .btn { font-family: var(--mono); font-size: 0.8125rem; font-weight: 600; }

/* --------------------------------------------------------------------------
   Left rail. Running transcript line numbers.
   -------------------------------------------------------------------------- */

.rail {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--rail);
  z-index: 40;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  pointer-events: none;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  mix-blend-mode: difference;
  color: #8a8a8a;
}

@media (min-width: 1180px) {
  .rail { display: flex; }
}

.rail__n { opacity: 0.45; transition: opacity 0.3s linear, color 0.3s linear; }
.rail__n.is-on { opacity: 1; color: #d0d0d0; }

/* --------------------------------------------------------------------------
   REC scroll progress
   -------------------------------------------------------------------------- */

.rec {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--steel);
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.rec.is-on { opacity: 1; transform: translateY(0); }

.rec__dot {
  position: relative;
  width: 18px;
  height: 18px;
  flex: none;
}

.rec__dot svg { transform: rotate(-90deg); }
.rec__dot circle { fill: none; stroke-width: 2; }
.rec__track { stroke: rgba(110, 115, 119, 0.35); }
.rec__fill { stroke: var(--red); transition: stroke-dashoffset 0.1s linear; }

.rec__dot::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--red);
  animation: recPulse 2.4s ease-in-out infinite;
}

@keyframes recPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* --------------------------------------------------------------------------
   Registration crosshair cursor
   -------------------------------------------------------------------------- */

.xhair {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s linear;
  will-change: transform;
}

.xhair.is-on { opacity: 1; }

.xhair__line {
  position: absolute;
  background: var(--red);
  transition: transform 0.28s var(--ease), opacity 0.28s var(--ease);
}

.xhair__line--h { left: 0; right: 0; top: 50%; height: 1px; margin-top: -0.5px; }
.xhair__line--v { top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -0.5px; }

.xhair__brk {
  position: absolute;
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--red);
  opacity: 0;
  transition: opacity 0.28s var(--ease), transform 0.35s var(--ease);
}

.xhair__brk:nth-child(3) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.xhair__brk:nth-child(4) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.xhair__brk:nth-child(5) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.xhair__brk:nth-child(6) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.xhair.is-framing { width: 62px; height: 62px; margin: -31px 0 0 -31px; }
.xhair.is-framing .xhair__line { opacity: 0; transform: scale(0.3); }
.xhair.is-framing .xhair__brk { opacity: 1; }

@media (hover: none), (max-width: 900px) {
  .xhair { display: none; }
}

/* --------------------------------------------------------------------------
   Preloader. The mark assembles page by page.
   -------------------------------------------------------------------------- */

.boot {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--ink);
}

.boot.is-done { pointer-events: none; }

.boot__inner { display: grid; place-items: center; }
.boot__mark { width: 168px; height: auto; }

/* Only the inner group animates, so each page keeps the mark's own rotation. */
.boot__mark .pg {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* A back sheet sheds its printing once the sheet in front has landed on it,
   so the loader comes to rest as the mark exactly. */
.boot__mark .pg__detail { transition: opacity 0.35s linear; }

.boot__wipe {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--paper);
  transform: scaleY(0);
  transform-origin: bottom;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Reveals
   -------------------------------------------------------------------------- */

/* Sheet lift. Only hidden when JS is actually running. */
.js .lift {
  opacity: 0;
  transform: translateY(26px);
}

.js .lift.is-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.75s var(--ease), transform 0.9s var(--ease);
}

/* Redaction reveal, for page headlines.
   The bar sits over the words and retracts to the right, so the line is
   exposed the way a redaction is lifted. */
.redact { display: block; }

.redact .ln {
  display: block;
  position: relative;
}

.redact .ln > i {
  display: inline-block;
  position: relative;
  font-style: inherit;
}

/* The bar covers the words only, so it reads as a redaction and not a slab. */
.js .redact .ln > i::after {
  content: "";
  position: absolute;
  inset: 0.07em -0.045em 0.11em;
  background: var(--ink);
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 0.72s cubic-bezier(0.76, 0, 0.24, 1);
}

.js .redact .ln.is-open > i::after { transform: scaleX(0); }

/* On ink bands the redaction bar flips to paper so it still reads as a bar. */
.js .band--ink .redact .ln > i::after { background: var(--paper); }

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

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: 8rem 4.5rem;
  overflow: clip;
}

.hero--page {
  min-height: auto;
  padding-block: clamp(7.25rem, 15vw, 11rem) clamp(2.5rem, 5vw, 4.5rem);
}

.hero__fan {
  position: absolute;
  right: -8%;
  top: 50%;
  transform: translateY(-50%) rotate(-4deg);
  width: min(46vw, 620px);
  opacity: 0.05;
  pointer-events: none;
}

@media (max-width: 900px) {
  .hero__fan { right: -28%; width: 90vw; opacity: 0.045; }
}

.hero h1 {
  font-size: var(--f-display);
  letter-spacing: -0.028em;
  margin-bottom: 1.75rem;
}

/* Declared after .hero h1 so the smaller inner-page size actually wins. */
.hero.hero--page h1 { font-size: clamp(2.4rem, 7.2vw, 5.25rem); }

.hero__sub {
  font-size: var(--f-lead);
  line-height: 1.5;
  color: var(--paper-soft);
  max-width: 44ch;
  margin-bottom: 2.5rem;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--paper-rule);
  font-family: var(--mono);
  font-size: var(--f-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
}


/* --------------------------------------------------------------------------
   Hero stack: the mark rebuilt as three real sheets on their own depth planes
   -------------------------------------------------------------------------- */

.fan3d {
  --w: min(30vw, 386px);
  position: absolute;
  right: 3.5%;
  top: 50%;
  width: var(--w);
  height: calc(var(--w) * 1.2793);
  margin-top: calc(var(--w) * -0.6397);
  perspective: 1150px;
  pointer-events: none;
}

.fan3d__def { position: absolute; width: 0; height: 0; overflow: hidden; }

/* The stack is positioned, so without this it would paint over the copy at
   widths where the two meet. */
.hero > .wrap { position: relative; z-index: 1; }

.fan3d__stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

/* The logo fans its sheets around a point near the bottom-right corner.
   (86,104) in the mark's own units lands here as a percentage. */
.fan3d__sheet {
  position: absolute;
  inset: 0;
  transform-origin: 91.9% 99.13%;
  transform:
    rotate(calc(var(--rot, 0deg) + var(--drot, 0deg)))
    translateZ(calc(var(--z, 0px) + var(--dz, 0px)));
  transform-style: preserve-3d;
  will-change: transform;
}

.fan3d__paper {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--w) * 0.095);
  background: var(--paper);
  overflow: hidden;
  opacity: 0;
  box-shadow:
    0 calc(26px + 16px * var(--lift, 0)) calc(52px + 22px * var(--lift, 0)) -22px
      rgba(18, 18, 18, calc(0.42 + 0.16 * var(--lift, 0))),
    0 4px 12px -4px rgba(18, 18, 18, 0.16);
  animation:
    fan-in 0.95s var(--ease) var(--in-d, 0s) both,
    fan-float var(--fl-t, 13s) ease-in-out calc(var(--in-d, 0s) + 0.95s) infinite;
  animation-play-state: paused;
  will-change: transform;
}

/* The boot overlay covers the hero for its first second and a half. Holding the
   stack paused until the wipe clears means nobody watches it arrive behind a
   black screen. */
html.is-booted .fan3d__paper,
html:not(.js) .fan3d__paper { animation-play-state: running; }

.fan3d__ink {
  position: absolute;
  inset: 3.06% 3.91%;
  border-radius: calc(var(--w) * 0.0559);
  background: var(--ink);
  overflow: hidden;
}

.fan3d__print { position: absolute; inset: 0; width: 100%; height: 100%; }

@keyframes fan-in {
  from { opacity: 0; transform: translate3d(0, 38px, 0) rotate(5deg) scale(0.93); }
  to   { opacity: 1; transform: none; }
}

@keyframes fan-float {
  0%   { transform: none; }
  27%  { transform: translate3d(0, -8px, 0) rotate(-0.85deg); }
  63%  { transform: translate3d(0, 7px, 0) rotate(0.7deg); }
  100% { transform: none; }
}

/* A phone hero has no clear space beside the copy, so anything big enough to
   read sits under the meta row. Measured: the sheets at 13% drop that steel
   text from 4.29:1 to 3.27:1. The phone keeps the flat watermark instead. */
@media (max-width: 900px) {
  .fan3d { display: none; }
}

@media (min-width: 901px) {
  .hero__fan--sm { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fan3d__paper { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Section headings
   -------------------------------------------------------------------------- */

.head {
  display: grid;
  gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 900px) {
  .head--split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: end;
  }
}

.head h2 { font-size: var(--f-h2); }

.rule {
  height: 1px;
  background: var(--band-rule, var(--paper-rule));
  border: 0;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Steps
   -------------------------------------------------------------------------- */

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

.step {
  display: grid;
  gap: 0.75rem 2rem;
  padding-block: 2rem;
  border-top: 1px solid var(--band-rule, var(--paper-rule));
  align-items: start;
}

.step:last-child { border-bottom: 1px solid var(--band-rule, var(--paper-rule)); }

@media (min-width: 860px) {
  .step { grid-template-columns: 6rem minmax(0, 18rem) minmax(0, 1fr); }
}

.step__n {
  font-family: var(--mono);
  font-size: var(--f-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--red);
  padding-top: 0.45rem;
}

.step h3 { font-size: var(--f-h3); }
.step p { color: var(--band-soft, var(--paper-soft)); margin: 0; }

/* --------------------------------------------------------------------------
   Video, hover to scrub
   -------------------------------------------------------------------------- */

.reel {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  max-width: 860px;
}

.clip {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 4px;
  overflow: hidden;
  background: var(--ink-sheet);
  border: 1px solid var(--band-rule, var(--ink-rule));
  display: grid;
  place-items: center;
}

/* Holding state until the first session's clips are cut in. */
.clip__ph {
  display: grid;
  place-items: center;
  gap: 0.9rem;
  padding: 1.5rem;
  text-align: center;
}

.clip__ph img { width: 42px; opacity: 0.28; }

.clip__ph span {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  line-height: 1.8;
}

.clip video,
.clip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.clip__scrub {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(244, 242, 238, 0.25);
}

.clip__scrub i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--red);
}

.clip__tag {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  font-family: var(--mono);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(18, 18, 18, 0.7);
  padding: 0.3rem 0.5rem;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Question and answer blocks
   -------------------------------------------------------------------------- */

.qa { border-top: 1px solid var(--band-rule, var(--paper-rule)); }

.qa__item {
  border-bottom: 1px solid var(--band-rule, var(--paper-rule));
  padding-block: 1.75rem;
}

.qa__q {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--f-h3);
  line-height: 1.15;
  margin-bottom: 0.75rem;
}

.qa__a { color: var(--band-soft, var(--paper-soft)); margin: 0; max-width: 68ch; }

/* --------------------------------------------------------------------------
   Founders
   -------------------------------------------------------------------------- */

.people {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .people { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
}

.person__shot {
  aspect-ratio: 4 / 5;
  background: var(--ink-sheet);
  border: 1px solid var(--band-rule, var(--paper-rule));
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 1.25rem;
  position: relative;
  display: grid;
  place-items: center;
}

.person__shot img { width: 100%; height: 100%; object-fit: cover; }

.person__ph {
  font-family: var(--mono);
  font-size: var(--f-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--steel);
  text-align: center;
  padding: 1rem;
}

.person__role {
  font-family: var(--mono);
  font-size: var(--f-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.5rem;
}

.person h3 { font-size: var(--f-h3); margin-bottom: 0.6rem; }
.person p { color: var(--band-soft, var(--paper-soft)); }

/* --------------------------------------------------------------------------
   Pull quote / statement
   -------------------------------------------------------------------------- */

.statement {
  font-family: var(--display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(1.6rem, 4vw, 2.85rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  max-width: 22ch;
}

.statement em { font-style: italic; color: var(--red); }

/* --------------------------------------------------------------------------
   Closing call to action
   -------------------------------------------------------------------------- */

.close__title {
  font-size: clamp(2.25rem, 7vw, 5rem);
  margin-bottom: 1.5rem;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form { display: grid; gap: 1.25rem; }

@media (min-width: 720px) {
  .form__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}

.field { display: grid; gap: 0.5rem; }

.field label {
  font-family: var(--mono);
  font-size: var(--f-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--band-soft, var(--paper-soft));
}

.field input,
.field select,
.field textarea {
  font-family: var(--body);
  font-size: 1rem;
  color: var(--band-fg, var(--ink));
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--band-rule, var(--paper-rule));
  border-radius: 0;
  padding: 0.85rem 0.25rem;
  min-height: 3.25rem;
  transition: border-color 0.25s var(--ease);
  appearance: none;
}

.field select {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 8px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}

.field textarea { min-height: 7rem; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--red);
}

.field input::placeholder,
.field textarea::placeholder { color: var(--steel); }

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__note {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--band-soft, var(--paper-soft));
  line-height: 1.7;
}

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

.foot {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}

.foot__top {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--ink-rule);
}

@media (min-width: 860px) {
  .foot__top { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
}

.foot__logo img { height: 40px; width: auto; margin-bottom: 1.25rem; }

.foot h4 {
  font-family: var(--mono);
  font-size: var(--f-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 1.1rem;
}

.foot__list { display: grid; gap: 0.6rem; }

.foot__list a {
  text-decoration: none;
  font-size: 0.95rem;
  color: var(--ink-soft);
  transition: color 0.2s var(--ease);
  width: fit-content;
}

.foot__list a:hover { color: var(--paper); }

.foot__base {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  padding-top: 1.75rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--steel);
}

.foot__base a { text-decoration: none; }
.foot__base a:hover { color: var(--paper); }

/* --------------------------------------------------------------------------
   Legal / long-form copy
   -------------------------------------------------------------------------- */

.prose { max-width: 70ch; }
.prose h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 2.5rem 0 0.9rem; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--paper-soft); }
.prose ul { padding-left: 1.1rem; margin: 0 0 1.1em; }
.prose li { margin-bottom: 0.5em; }

/* --------------------------------------------------------------------------
   Session-day track. Sticky column on the left, filling rail on the right.
   -------------------------------------------------------------------------- */

.track-wrap { display: grid; gap: 2.5rem; }

@media (min-width: 980px) {
  .track-wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: 4.5rem;
  }

  .track-wrap__sticky {
    position: sticky;
    top: 7.5rem;
    align-self: start;
  }
}

.track { position: relative; padding-left: 2.75rem; }

@media (min-width: 720px) { .track { padding-left: 3.5rem; } }

.track__rail {
  position: absolute;
  left: 0.5rem;
  top: 0.75rem;
  bottom: 0.75rem;
  width: 1px;
  background: var(--band-rule, var(--paper-rule));
}

@media (min-width: 720px) { .track__rail { left: 0.9rem; } }

.track__rail i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--red);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.15s linear;
}

.track__step {
  position: relative;
  padding-block: clamp(1.5rem, 3.5vw, 2.5rem);
}

.track__step::before {
  content: "";
  position: absolute;
  left: -2.42rem;
  top: calc(clamp(1.5rem, 3.5vw, 2.5rem) + 0.5rem);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--band-bg, var(--paper));
  border: 1px solid var(--band-rule, var(--paper-rule));
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease),
    transform 0.35s var(--ease);
}

@media (min-width: 720px) { .track__step::before { left: -3.03rem; } }

.track__step.is-on::before {
  background: var(--red);
  border-color: var(--red);
  transform: scale(1.15);
}

.track__time {
  font-family: var(--mono);
  font-size: var(--f-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--steel);
  display: block;
  margin-bottom: 0.55rem;
  transition: color 0.35s var(--ease);
}

.track__step.is-on .track__time { color: var(--red); }

.track__step h3 { font-size: var(--f-h3); margin-bottom: 0.55rem; }
.track__step p { color: var(--band-soft, var(--paper-soft)); margin: 0; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .lift { opacity: 1; transform: none; }
  .redact .ln > i { opacity: 1; }
  .redact .ln::after { display: none; }
  .xhair { display: none; }
  .boot { display: none; }
}

/* ==========================================================================
   Packages. Built as a manifest, not a pricing table: a quantity column and a
   label column, hairline-ruled so the two cards read row against row. There
   are no prices on this site by design, so the last row of each card is the
   call, not a number.
   ========================================================================== */

.pkg__kicker {
  font-family: var(--mono);
  font-size: var(--f-label);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--band-soft, var(--paper-soft));
  margin-bottom: 0.9rem;
}

.pkg h3 { margin-bottom: 0.5rem; }

.pkg__sub {
  font-size: 0.975rem;
  color: var(--band-soft, var(--paper-soft));
  margin-bottom: 1.9rem;
}

.pkg__list { list-style: none; margin: 0; padding: 0; }

.pkg__row {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0 0.9rem;
  align-items: baseline;
  padding: 0.72rem 0;
  border-top: 1px solid var(--band-rule, var(--paper-rule));
  font-size: 0.975rem;
  color: var(--band-soft, var(--paper-soft));
}

/* The quantity reads as a figure on a docket, so it stays mono and full
   contrast while the label beside it stays soft. */
.pkg__q {
  font-family: var(--mono);
  font-size: var(--f-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--band-fg, var(--ink));
  font-variant-numeric: tabular-nums;
}

/* Rows that exist only on the larger package. Red is the hinge and it is
   spent here, once per card, on the marker rather than the text. */
.pkg__row--add .pkg__q { color: var(--red); }
.pkg__row--add > span:last-child { color: var(--band-fg, var(--ink)); }

.pkg__foot {
  margin-top: 1.9rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--band-rule, var(--paper-rule));
}

.pkg__note {
  font-family: var(--mono);
  font-size: var(--f-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--band-soft, var(--paper-soft));
}

/* Marks a deliverable that only exists on the larger package, so the format
   grid above the packages cannot read as a promise that everything is
   included in both. */
.sheet__pkg {
  font-family: var(--mono);
  font-size: var(--f-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  margin: -0.35rem 0 0.7rem;
}

/* Side by side the two package cards are read row against row, so the header
   block above the first row has to be the same height in both or every row
   below it sits a line out. Two lines of sub is the worst case at this width.
   Below the 2-up breakpoint they stack and alignment stops mattering. */
@media (min-width: 720px) {
  .pkg__sub { min-height: 3.4em; }
}

/* A quiet word under the mark while the sheets fan in. Deliberately low
   contrast on the ink ground (3.4:1): it is a status line, not a headline,
   and it must not pull the eye off the mark landing above it. It waits
   0.45s so the first sheet is already moving before the word appears. */
.boot__word {
  margin-top: 1.5rem;
  font-family: var(--mono);
  font-size: var(--f-label);
  font-weight: 500;
  letter-spacing: 0.42em;
  /* Letter-spacing leaves a trailing gap after the last character, which
     shifts centred text to the left by exactly that much. Pull it back. */
  text-indent: 0.42em;
  text-transform: uppercase;
  color: rgba(244, 242, 238, 0.38);
  opacity: 0;
  animation: boot-word 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.45s forwards;
}

@keyframes boot-word {
  to { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Evidence (work.html). Real clips set as exhibits on the page.
   -------------------------------------------------------------------------- */
.evidence {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 2.4vw, 2rem) clamp(0.9rem, 2vw, 1.5rem);
  align-items: start;
}
.ev { margin: 0; }
.ev--wide { grid-column: 1 / -1; }
.ev__frame {
  aspect-ratio: 9 / 16;
  background: var(--ink);
  border-radius: 4px;
  overflow: hidden;
}
.ev--wide .ev__frame { aspect-ratio: 16 / 9; max-width: 1000px; }
.ev__frame video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--ink); }
.ev figcaption { margin-top: 0.75rem; display: grid; gap: 0.3rem; }
.ev__label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
}
.ev__line { font-size: 0.9375rem; line-height: 1.45; }
@media (max-width: 900px) { .evidence { grid-template-columns: repeat(2, 1fr); } }

.step__pkg {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
}

/* --------------------------------------------------------------------------
   Liquid glass menu bar, every page, every scroll position (Sep 28).
   Mostly clear: a light blur, almost no tint, light caught on the top edge.
   site.js adds .nav--dark over dark bands so the type stays readable.
   -------------------------------------------------------------------------- */
.nav,
.nav.is-stuck {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0.1) 38%,
      rgba(255, 255, 255, 0) 62%,
      rgba(255, 255, 255, 0.14) 100%),
    rgba(244, 242, 238, 0.12);
  -webkit-backdrop-filter: blur(5px) saturate(1.4) brightness(1.03);
  backdrop-filter: blur(5px) saturate(1.4) brightness(1.03);
  border-bottom-color: rgba(255, 255, 255, 0.75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(18, 18, 18, 0.07),
    0 6px 18px -12px rgba(18, 18, 18, 0.3);
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease),
    box-shadow 0.35s var(--ease), color 0.35s var(--ease), padding 0.3s var(--ease);
}

.nav.nav--dark {
  color: var(--paper);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.03) 40%,
      rgba(255, 255, 255, 0) 62%,
      rgba(255, 255, 255, 0.05) 100%),
    rgba(18, 18, 18, 0.2);
  -webkit-backdrop-filter: blur(5px) saturate(1.4) brightness(0.95);
  backdrop-filter: blur(5px) saturate(1.4) brightness(0.95);
  border-bottom-color: rgba(244, 242, 238, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 6px 18px -12px rgba(0, 0, 0, 0.6);
}

.nav--dark .nav__toggle { border-color: rgba(244, 242, 238, 0.3); }
.nav--dark .nav__toggle span { background: var(--paper); }

/* No backdrop-filter support: fall back to a readable solid-ish bar. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav, .nav.is-stuck { background: rgba(244, 242, 238, 0.94); }
  .nav.nav--dark { background: rgba(18, 18, 18, 0.92); }
}

/* --------------------------------------------------------------------------
   Question accordions (Sep 29, rebuilt). Shared by the home Exhibit 06 and
   the How it works list. Quiet by design: no tinted slab, no bar hanging off
   the edge. The open row is marked by a red number, a plus that turns into
   a cross, and a red hairline that draws along its bottom edge.
   -------------------------------------------------------------------------- */

.qa--acc { border-top: 1px solid var(--paper-rule); }
.qa--acc .qa__item {
  position: relative;
  border: 0;
  border-bottom: 1px solid var(--paper-rule);
  padding: 0;
}
.qa--acc .qa__item::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--red);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1);
}
.qa--acc .qa__item.is-open::after { transform: scaleX(1); }

.qa--acc summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 1.25rem;
  column-gap: 0.75rem;
  align-items: center;
  padding: 1.2rem 0;
  -webkit-tap-highlight-color: transparent;
}
.qa--acc summary::-webkit-details-marker { display: none; }
.qa--acc summary:focus { outline: none; }
.qa--acc summary:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.qa__num {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--steel);
  transition: color .3s;
}
.qa--acc .qa__q {
  margin: 0;
  color: var(--ink);
  transition: transform .45s cubic-bezier(0.22, 1, 0.36, 1);
}
.qa--acc summary:hover .qa__q { transform: translateX(3px); }
.qa--acc summary:hover .qa__num,
.qa--acc .is-open .qa__num { color: var(--red); }

/* plus that turns into a cross */
.qa--acc .qa__plus {
  position: relative;
  width: 0.85rem; height: 0.85rem;
  justify-self: end;
  transition: transform .5s cubic-bezier(0.22, 1, 0.36, 1);
}
.qa--acc .qa__plus::before,
.qa--acc .qa__plus::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1.5px; margin-top: -0.75px;
  background: var(--ink);
  transition: background-color .3s;
}
.qa--acc .qa__plus::after { transform: rotate(90deg); }
.qa--acc summary:hover .qa__plus::before,
.qa--acc summary:hover .qa__plus::after,
.qa--acc .is-open .qa__plus::before,
.qa--acc .is-open .qa__plus::after { background: var(--red); }
.qa--acc .is-open .qa__plus { transform: rotate(135deg); }

/* the answer sits in the question's column */
.qa--acc .qa__body {
  display: block;
  box-sizing: border-box;
  padding: 0 2rem 1.35rem calc(2rem + 0.75rem);
}
.qa--acc .qa__body .qa__mark { display: none; }
.qa--acc .qa__a {
  margin: 0;
  max-width: 62ch;
  color: var(--paper-soft);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .35s ease, transform .5s cubic-bezier(0.22, 1, 0.36, 1);
}
.qa--acc .is-open .qa__a { opacity: 1; transform: none; transition-delay: .08s; }

@media (prefers-reduced-motion: reduce) {
  .qa--acc .qa__item::after, .qa--acc .qa__plus, .qa--acc .qa__q, .qa--acc .qa__a { transition: none; }
}

/* How it works: page scale */
.faq { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 900px) {
  .faq { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
  .faq__head { position: sticky; top: 7rem; }
}
.faq__list .qa__q {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.2;
}
.faq__list summary { padding: 1.4rem 0; min-height: 44px; }

/* Enquiry form: send failure message, and the button while sending. */
.form__status {
  margin: 1rem 0 0;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--red);
  background: var(--red-soft);
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.5;
}
.form__status[hidden] { display: none; }
.form button[disabled] { opacity: 0.6; cursor: progress; }