/* =========================================================================
   RESO MUSIC — design system
   Built by OCTA DEVS · https://octadevs.fun
   -------------------------------------------------------------------------
   Material: Liquid Glass (translucent floating layer over rich content)
   Register: warm amber / gold, "audiophile" premium

   THE ONE RULE THAT HOLDS IT TOGETHER
     Glass is expensive. Spend it on the FLOATING FUNCTIONAL LAYER only: the
     nav, the player, the download buttons, the OCTA panel. Everything that is
     merely content (features, steps) sits on type and hairlines with no card
     chrome at all. When every section is glass, glass stops reading as a
     material and starts reading as a border.

   HOW TO RETUNE (edit only the values in this block)
     --accent-h ... hue of the amber family (try 32 amber, 210 ice, 265 violet)
     --glass-blur / --glass-sat ... material intensity
   ========================================================================= */

/* --------------------------------------------------------------- 1. RESET */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* --scroll-pad keeps the sticky nav from covering the heading you jumped to. */
  scroll-padding-top: var(--scroll-pad);
  /* `clip`, NOT `hidden`. `overflow-x: hidden` computes to `hidden auto`, which
     turns <body> into its own scroll container: the viewport stops scrolling
     (window.scrollY stays 0) and every scroll-linked feature dies with it —
     scroll-behavior:smooth, position:sticky, and the IntersectionObserver
     behind the nav spy + reveal animations. `clip` clips without scrolling. */
  overflow-x: clip;
}

/* ------------------------------------------------------------- 1b. LENIS
   Smooth-scrolling driven by assets/vendor/lenis.min.js. This is Lenis's own
   recommended integration CSS, kept verbatim — the `!important` on
   scroll-behavior is load-bearing: it stops the native `smooth` above from
   fighting Lenis's own easing, which is what makes the motion feel like one
   continuous curve instead of two animations fighting over the same axis. */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

body {
  min-height: 100svh;
  font-family: var(--f-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Render the variable font's real cuts. Without these the browser
     synthesises a bold that is a smear of the true 700, and the display
     face loses the crispness the whole register depends on. */
  font-optical-sizing: auto;
  font-synthesis: none;
  font-synthesis-weight: none;
  /* no overflow-x here on purpose — it lives on <html> as `clip`.
     See the note in the reset block above. */
}

/* ------------------------------------------------------------- 1a. GRAIN
   A single fixed film over the whole viewport. The aurora already carries
   grain to stop its gradients banding, but that layer sits BEHIND every
   pixel of content and is therefore invisible where it matters. This one
   rides on top, so type and glass both get the printed-stock tooth that
   separates a real brand site from a gradient demo.
   `mix-blend-mode: soft-light` keeps it a modulation of whatever is beneath
   rather than a wash of grey over the whole page. */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 90;
  pointer-events: none;
  opacity: var(--grain-a);
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

button, input { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; padding: 0; }

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

/* --------------------------------------------------- 2. DESIGN TOKENS
   Three layers: primitive → semantic → component                        */

:root {
  /* -- 2a. PRIMITIVE · amber ramp ------------------------------------- */
  --p-amber-50:  #fff7e8;
  --p-amber-100: #ffebcb;
  --p-amber-200: #ffd79c;
  --p-amber-300: #ffc169;
  --p-amber-400: #f9a93a;
  --p-amber-500: #f08c1a;
  --p-amber-600: #d8720c;
  --p-amber-700: #b0570a;
  --p-amber-800: #8a440c;

  /* -- 2b. PRIMITIVE · warm neutral ramp (espresso) ------------------- */
  --p-ink-950: #0e0a07;
  --p-ink-900: #151009;
  --p-ink-850: #1c150e;
  --p-ink-800: #241b13;
  --p-ink-700: #33261c;
  --p-ink-600: #4a392b;
  --p-ink-500: #6e5b49;
  --p-ink-400: #8f7c69;
  --p-ink-300: #b6a693;
  --p-ink-200: #d8cbb9;
  --p-ink-100: #ece3d6;
  --p-ink-50:  #f7f0e5;

  /* -- 2c. SEMANTIC · theme-independent knobs -------------------------- */
  --accent-h: 32;                 /* amber family — retune here            */
  --accent-canvas: #f08c1a;       /* canvas-safe mirror of --accent        */
  --glass-blur: 22px;
  --glass-sat: 1.55;
  --shell: 74rem;                 /* content measure                       */
  --measure: 62ch;

  /* -- 2d. SPACE · 8pt rhythm ------------------------------------------ */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 2.5rem;   --s-8: 3rem;
  --s-9: 4rem;     --s-10: 5rem;    --s-11: 6.5rem;  --s-12: 8rem;

  /* -- 2e. RADIUS ------------------------------------------------------ */
  --r-xs: 10px; --r-sm: 14px; --r-md: 20px;
  --r-lg: 28px; --r-xl: 38px; --r-pill: 999px;

  /* -- 2f. TYPE -------------------------------------------------------- */
  --f-display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-body: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;

  /* -- 2g. MOTION ------------------------------------------------------ */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 160ms;
  --t-mid: 320ms;
  --t-slow: 720ms;

  /* -- 2i. SCROLL ---------------------------------------------------------
     Height of the sticky nav plus breathing room. Bump this if you resize the
     nav — the landing offset for every in-page link is derived from it. */
  --scroll-pad: 6.5rem;
}

/* -- 2h. SEMANTIC · themes --------------------------------------------- */
[data-theme="light"] {
  color-scheme: light;

  --bg: #fbf6ee;
  --bg-deep: #f3e9db;
  --text: #1c1510;
  --text-soft: #4a392b;
  --muted: #6e5b49;

  --accent: oklch(66% 0.16 calc(var(--accent-h) + 23));
  --accent-ink: #7a3c02;         /* accent that passes 4.5:1 on light surfaces */
  --accent-soft: oklch(92% 0.06 70);
  --on-accent: #2a1503;

  /* glass material */
  --glass-fill: rgb(255 253 250 / 0.58);
  --glass-fill-strong: rgb(255 253 250 / 0.78);
  --glass-edge: rgb(255 255 255 / 0.85);
  --glass-sheen: rgb(255 255 255 / 0.9);
  --glass-under: rgb(120 90 50 / 0.12);
  /* the rim: a gradient hairline, bright where the light lands and dark where
     it falls away. A flat 1px border is what makes glass read as a div. */
  --glass-rim-1: rgb(255 255 255 / 0.95);
  --glass-rim-2: rgb(255 255 255 / 0.16);
  --glass-rim-3: rgb(120 90 50 / 0.22);
  --grain-a: 0.038;

  /* aurora — the rich content the glass needs to refract */
  --aurora-a: oklch(88% 0.13 78 / 0.85);
  --aurora-b: oklch(84% 0.11 45 / 0.6);
  --aurora-c: oklch(90% 0.06 95 / 0.75);

  --hairline: rgb(28 21 16 / 0.1);
  --shadow-1: 0 1px 2px rgb(60 40 20 / 0.05), 0 2px 6px rgb(60 40 20 / 0.04);
  --shadow-2: 0 2px 6px rgb(60 40 20 / 0.06), 0 12px 28px -8px rgb(60 40 20 / 0.1);
  --shadow-3: 0 4px 12px rgb(60 40 20 / 0.07), 0 32px 64px -16px rgb(60 40 20 / 0.16);
  --wordmark-1: #2a1c0e;
  --wordmark-2: #6b4a24;
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0f0b08;
  --bg-deep: #070504;
  --text: #f6efe4;
  --text-soft: #d8cbb9;
  --muted: #a4917b;

  --accent: oklch(78% 0.15 calc(var(--accent-h) + 30));
  --accent-canvas: #f9a93a;       /* canvas-safe mirror of --accent        */
  --accent-ink: #ffc169;         /* accent that passes 4.5:1 on dark surfaces */
  --accent-soft: oklch(38% 0.08 55 / 0.45);
  --on-accent: #2a1503;           /* label colour on the amber button — solid */

  --glass-fill: rgb(48 36 26 / 0.5);
  --glass-fill-strong: rgb(48 36 26 / 0.72);
  --glass-edge: rgb(255 236 210 / 0.14);
  --glass-sheen: rgb(255 240 220 / 0.22);
  --glass-under: rgb(0 0 0 / 0.3);
  --glass-rim-1: rgb(255 240 220 / 0.34);
  --glass-rim-2: rgb(255 240 220 / 0.05);
  --glass-rim-3: rgb(0 0 0 / 0.45);
  --grain-a: 0.055;

  --aurora-a: oklch(62% 0.17 48 / 0.5);
  --aurora-b: oklch(52% 0.14 28 / 0.42);
  --aurora-c: oklch(70% 0.13 78 / 0.36);

  --hairline: rgb(246 239 228 / 0.11);
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-2: 0 2px 8px rgb(0 0 0 / 0.42), 0 14px 32px -10px rgb(0 0 0 / 0.55);
  --shadow-3: 0 6px 18px rgb(0 0 0 / 0.45), 0 40px 80px -20px rgb(0 0 0 / 0.7);
  --wordmark-1: #fdf6ea;
  --wordmark-2: #b98d4e;
}

/* ------------------------------------------------ 3. LIQUID GLASS MATERIAL
   Apple's translation targets, adapted:
     blur 20–40px · fill 60–80% · saturation boost 1.2–1.5× · hairline edge
   Used ONLY on the floating functional layer + a few hero moments.         */

.glass {
  position: relative;
  isolation: isolate;
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid transparent;
  background-clip: padding-box;
  box-shadow:
    inset 0 1px 0 0 var(--glass-sheen),
    inset 0 -1px 0 0 var(--glass-under),
    var(--shadow-2);
  border-radius: var(--r-lg);
}

/* specular sheen — the highlight that sells the material */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(148deg, var(--glass-sheen) 0%, transparent 34%),
    radial-gradient(120% 80% at 8% 0%, var(--glass-sheen) 0%, transparent 58%);
  opacity: 0.55;
  pointer-events: none;
}

/* hairline: gradient border so the rim is lit at the top, shaded at the base */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    155deg,
    var(--glass-rim-1) 0%,
    var(--glass-rim-2) 34%,
    var(--glass-rim-3) 72%,
    var(--glass-rim-2) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

[data-theme="dark"] .glass::before { opacity: 0.4; }

/* --------------------------------------------------------- 4. LAYOUT */
.shell {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
}
@media (max-width: 40rem) {
  .shell { width: min(100% - 1.75rem, var(--shell)); }
}

.section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.section--tight { padding-block: clamp(3rem, 6vw, 4.5rem); }

.stack > * + * { margin-top: var(--flow, 1rem); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
/* A dot, not a dash. Five identical 1.75rem rules marching down the page is
   one of the loudest tells of a generated layout; punctuation reads as a
   considered label instead. */
.eyebrow::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 16%, transparent);
}

/* Instrument Serif ships weight 400 and NOTHING else - no variable weight
   axis, no bold. Every serif rule in this file therefore states 400
   explicitly. Because <body> sets font-synthesis-weight:none, a stray 700
   here does not render as a bold heading, it renders as a silently thin one,
   which is the hardest kind of bug to notice. */
.display {
  font-family: var(--f-display);
  font-weight: 400;
  /* A face with real ascenders, bracketed serifs and a tall x-height needs
     air. The 0.95 the old grotesk wanted would collide the brackets. */
  line-height: 1.06;
  /* Serifs cannot take the tracking a grotesk can. At -0.04em the serifs on
     neighbouring capitals overlap and the wordmark turns to mush; -0.012em
     is about the most this face tolerates at display size. */
  letter-spacing: -0.012em;
  text-wrap: balance;
}

/* Instrument Serif reads small next to a grotesk of the same px size, so the
   display steps are sized up and the sans sub-heading steps down. */
.h1 { font-size: clamp(2.9rem, 1rem + 9.5vw, 6.9rem); }
/* The desktop hero splits 1.05fr / 0.95fr, so the headline is boxed into
   about 47% of the shell. "Nothing else." measures 4.219em wide in Instrument
   Serif, so the full-width mobile size would wrap it onto a second line from
   62rem up. This value is derived from that measurement, not guessed: it
   lands the headline at 79-84% of its column across the desktop range. */
@media (min-width: 62rem) {
  .h1 { font-size: clamp(3rem, 1.1rem + 6.9vw, 6.9rem); }
}
.h2 { font-size: clamp(2.35rem, 1.2rem + 4.6vw, 4.4rem); }
.h3 { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem); line-height: 1.3; letter-spacing: -0.014em; }

.lede {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  line-height: 1.6;
  letter-spacing: -0.006em;
  color: var(--muted);
  max-width: var(--measure);
  text-wrap: pretty;
}

.mono {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.section-head {
  display: grid;
  gap: var(--s-4);
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* --------------------------------------------------- 5. AMBIENT AURORA
   Glass needs something rich beneath it. This is that something.            */
.aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg);
}
.aurora__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}
.aurora__blob--a {
  width: 62vw; height: 62vw;
  top: -22vw; left: -10vw;
  background: radial-gradient(circle at 40% 40%, var(--aurora-a), transparent 68%);
  animation: drift-a 34s var(--ease-in-out) infinite alternate;
}
.aurora__blob--b {
  width: 54vw; height: 54vw;
  top: 4vh; right: -16vw;
  background: radial-gradient(circle at 55% 45%, var(--aurora-b), transparent 66%);
  animation: drift-b 42s var(--ease-in-out) infinite alternate;
}
.aurora__blob--c {
  width: 70vw; height: 46vw;
  bottom: -18vw; left: 18vw;
  background: radial-gradient(circle at 50% 50%, var(--aurora-c), transparent 70%);
  animation: drift-c 50s var(--ease-in-out) infinite alternate;
}
/* fine grain keeps the large gradients from banding */
.aurora::after {
  content: "";
  position: absolute;
  inset: -50%;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(8vw, 10vh, 0) scale(1.16); }
}
@keyframes drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(-10vw, 14vh, 0) scale(0.94); }
}
@keyframes drift-c {
  from { transform: translate3d(0, 0, 0) scale(0.95); }
  to   { transform: translate3d(-6vw, -12vh, 0) scale(1.2); }
}

/* ------------------------------------------------------------ 6. BUTTONS */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 46px;
  padding: 0.7rem 1.35rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.9375rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-mid) var(--ease-out),
    background-color var(--t-fast) var(--ease-out),
    opacity var(--t-fast) linear;
}
/* one pass of specular light across the label. At z-index -1 inside the
   isolated button it sits above the fill and below the text, so the label
   stays crisp while the surface underneath catches the highlight. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(104deg, transparent 34%, rgb(255 255 255 / 0.4) 50%, transparent 66%);
  transform: translateX(-115%);
  transition: transform var(--t-slow) var(--ease-out);
}
.btn:hover::after { transform: translateX(115%); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.985); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn svg { width: 1.0625em; height: 1.0625em; flex: none; }

/* primary: colour the background, not the label (Apple's rule) */
.btn--primary {
  --btn-fg: var(--on-accent);
  background: linear-gradient(168deg, var(--p-amber-300), var(--accent) 46%, var(--p-amber-600));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.55),
    0 1px 2px rgb(80 45 10 / 0.2),
    0 10px 24px -8px oklch(60% 0.16 45 / 0.55);
}
[data-theme="dark"] .btn--primary { --btn-fg: #2a1503; }
.btn--primary:hover {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.6),
    0 2px 4px rgb(80 45 10 / 0.22),
    0 16px 34px -10px oklch(60% 0.16 45 / 0.68);
}

.btn--glass {
  background: var(--glass-fill-strong);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 0 var(--glass-sheen),
    inset 0 0 0 1px var(--glass-edge),
    var(--shadow-1);
}
.btn--glass:hover { box-shadow: inset 0 1px 0 0 var(--glass-sheen), inset 0 0 0 1px var(--glass-edge), var(--shadow-2); }

.btn--quiet { color: var(--muted); padding-inline: 0.9rem; }
.btn--quiet:hover { color: var(--text); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-weight: 650;
  font-size: 0.9375rem;
  color: var(--accent-ink);
  transition: gap var(--t-fast) var(--ease-out);
}
.link-arrow svg { width: 1em; height: 1em; }
.link-arrow:hover { gap: 0.75em; }

/* ---------------------------------------------------------------- 7. NAV */
.nav-shell {
  position: sticky;
  top: 0;
  z-index: 60;
  padding-top: var(--s-4);
  /* scroll edge effect: content fades out as it meets the bar */
  -webkit-mask-image: linear-gradient(#000 0 84%, transparent 100%);
  mask-image: linear-gradient(#000 0 84%, transparent 100%);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: 0.5rem 0.5rem 0.5rem 0.9rem;
  border-radius: var(--r-pill);
  transition: box-shadow var(--t-mid) var(--ease-out);
}
.nav[data-stuck="true"] { box-shadow: inset 0 1px 0 0 var(--glass-sheen), inset 0 0 0 1px var(--glass-edge), var(--shadow-3); }

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding-block: 0.4rem;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: -0.005em;
  margin-right: auto;
}
.nav__brand img {
  width: 30px; height: 30px;
  border-radius: 8px;
  object-fit: cover;
}
.nav__brand small {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  align-self: center;
  margin-top: 2px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}
.nav__link {
  display: inline-block;
  padding: 0.5rem 0.8rem;
  border-radius: var(--r-pill);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-soft);
  transition: color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.nav__link:hover { color: var(--text); background: var(--hairline); }
.nav__link[aria-current="page"] { color: var(--text); }

.nav__actions { display: flex; align-items: center; gap: 0.35rem; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-spring);
}
.icon-btn:hover { background: var(--hairline); }
.icon-btn:active { transform: scale(0.92); }
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn--sm { width: 40px; height: 40px; }

/* comfortable hit areas on touch devices */
@media (pointer: coarse) {
  .icon-btn--sm { width: 44px; height: 44px; }
  .nav__link { padding-block: 0.85rem; }
}

/* theme toggle: sun ⇄ moon crossfade, no layout shift */
.theme-toggle svg { grid-area: 1 / 1; transition: transform var(--t-mid) var(--ease-spring), opacity var(--t-mid) var(--ease-out); }
.theme-toggle .i-sun { opacity: 0; transform: rotate(-70deg) scale(0.6); }
.theme-toggle .i-moon { opacity: 1; transform: rotate(0) scale(1); }
[data-theme="light"] .theme-toggle .i-sun { opacity: 1; transform: rotate(0) scale(1); }
[data-theme="light"] .theme-toggle .i-moon { opacity: 0; transform: rotate(70deg) scale(0.6); }

.nav__burger { display: none; }

@media (max-width: 56rem) {
  .nav__links {
    position: fixed;
    inset: auto 1rem auto 1rem;
    top: 4.75rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    padding: 0.6rem;
    border-radius: var(--r-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.98);
    transition: opacity var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out), visibility var(--t-mid);
  }
  .nav__links[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
  .nav__link { padding: 0.75rem 0.9rem; font-size: 0.9375rem; }
  .nav__link[aria-current="page"] { background: var(--hairline); }
  .nav__burger { display: grid; }
  .nav .btn--primary { display: none; }
}
@media (max-width: 30rem) {
  .nav__brand small { display: none; }
}

/* --------------------------------------------------------------- 8. HERO */
.hero {
  position: relative;
  padding-block: clamp(3.5rem, 10vw, 7rem) clamp(3rem, 7vw, 5rem);
}
.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
}
@media (min-width: 62rem) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; }
}

.hero__copy { display: grid; gap: var(--s-5); justify-items: start; }

.hero__title .line { display: block; }
/* The theme override swaps --grad ONLY. Using the `background` shorthand in a
   dark-mode rule would reset background-clip to border-box, painting the
   gradient as a solid box over transparent text (the text then disappears). */
.hero__title .accent {
  --grad: linear-gradient(102deg, var(--p-amber-500), var(--accent) 40%, var(--p-amber-300));
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme="dark"] .hero__title .accent {
  --grad: linear-gradient(102deg, var(--p-amber-400), var(--p-amber-200) 46%, var(--p-amber-300));
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  padding-top: var(--s-2);
}
.hero__proof li {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
}
.hero__proof svg { width: 1.05em; height: 1.05em; color: var(--accent-ink); flex: none; }

/* --- 8a. device frame (the honest screenshot slot) --------------------- */
.device {
  position: relative;
  width: min(100%, 20rem);
  margin-inline: auto;
  aspect-ratio: 9 / 19.2;
  padding: 0.55rem;
  border-radius: clamp(2.25rem, 6vw, 2.9rem);
  background: linear-gradient(160deg, var(--p-ink-700), var(--p-ink-850) 45%, var(--p-ink-950));
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.14),
    inset 0 1px 0 0 rgb(255 255 255 / 0.22),
    var(--shadow-3);
}
.device::after {
  /* glass reflection across the cover glass */
  content: "";
  position: absolute;
  inset: 0.55rem;
  border-radius: inherit;
  background: linear-gradient(122deg, rgb(255 255 255 / 0.16) 0 26%, transparent 46%);
  pointer-events: none;
  z-index: 3;
}
.device__screen {
  position: relative;
  height: 100%;
  border-radius: clamp(1.8rem, 5vw, 2.4rem);
  overflow: hidden;
  background: var(--bg-deep);
  display: grid;
}
.device__island {
  position: absolute;
  top: 0.7rem; left: 50%;
  transform: translateX(-50%);
  width: 30%; height: 1.4rem;
  border-radius: var(--r-pill);
  background: #000;
  z-index: 4;
}

/* --- 8b. screenshot slot ---------------------------------------------- */
.shot {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  min-height: 9rem;
  overflow: hidden;
  background:
    linear-gradient(150deg, var(--p-ink-800), var(--p-ink-950));
  text-align: center;
}
.shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
}
/* The placeholder OVERLAYS the image rather than replacing it. Hiding the
   <img> with display:none would stop the browser fetching it, so the slot
   could never fill itself. */
.shot__ph {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.6rem;
  padding: var(--s-4);
  color: var(--p-ink-300);
  text-align: center;
  background: linear-gradient(150deg, var(--p-ink-800), var(--p-ink-950));
}
.shot__ph svg { width: 26px; height: 26px; opacity: 0.55; }
.shot__ph b {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.shot__ph span { font-size: 0.75rem; opacity: 0.6; max-width: 22ch; }
/* placeholder steps aside the moment a real screenshot lands */
.shot.is-filled .shot__ph { display: none; }

/* --- 8c. floating now-playing bar (UI, sits over the device) ------------ */
.player {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: -1.5rem;
  transform: translateX(-50%);
  width: min(112%, 21rem);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.7rem;
  border-radius: var(--r-pill);
}
.player__art {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--p-amber-400), var(--p-amber-700));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4);
  flex: none;
}
.player__art svg { width: 20px; height: 20px; color: #3a1f04; }
.player__meta { min-width: 0; }
.player__meta b {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player__meta span {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player__eq { display: flex; align-items: flex-end; gap: 2px; height: 18px; }
.player__eq i {
  width: 2px;
  border-radius: 1px;
  background: var(--accent);
  animation: eq 900ms var(--ease-in-out) infinite alternate;
}
.player__eq i:nth-child(1) { height: 40%; animation-delay: 0ms; }
.player__eq i:nth-child(2) { height: 85%; animation-delay: 120ms; }
.player__eq i:nth-child(3) { height: 55%; animation-delay: 240ms; }
.player__eq i:nth-child(4) { height: 100%; animation-delay: 360ms; }
@keyframes eq { from { transform: scaleY(0.32); } to { transform: scaleY(1); } }

.hero__note {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.75rem;
  color: var(--muted);
}
.hero__note svg { width: 1em; height: 1em; flex: none; }

@media (min-width: 62rem) {
  .hero__stage { position: relative; }
  .player { bottom: -2.25rem; }
}

/* ------------------------------------------------------- 9. MARQUEE STRIP */
.strip {
  overflow: hidden;
  padding-block: var(--s-3);
  border-block: 1px solid var(--hairline);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.strip__track {
  display: flex;
  width: max-content;
  gap: var(--s-6);
  animation: slide 34s linear infinite;
}
.strip:hover .strip__track { animation-play-state: paused; }
.strip__track li {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.strip__track li::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.7;
}
@keyframes slide { to { transform: translateX(-50%); } }

/* --------------------------------------------- 10. CAPABILITY LEDGER
   Six identical glass cards was the loudest generated-layout tell on the
   page, and it spent the expensive material on content that never needed
   it. This is the same information set as a spec sheet: a sticky editorial
   column, hairline rules, mono indices, the display face carrying the
   hierarchy, and an amber rule that draws itself under the hovered row.
   No card, no icon chip, no backdrop-filter. */

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
@media (min-width: 62rem) {
  .split {
    grid-template-columns: minmax(0, 23rem) minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 5.5rem);
  }
  /* the head stays put while the ledger scrolls past it */
  .split__head { position: sticky; top: calc(var(--scroll-pad) + 0.5rem); }
}
.split__head { display: grid; gap: var(--s-4); justify-items: start; }
/* A display heading sized for the full shell would wrap to five lines inside
   a 23rem sticky column. The narrow column gets its own step. */
.split__head .h2 { font-size: clamp(1.95rem, 1.2rem + 2vw, 2.85rem); }

.ledger { border-top: 1px solid var(--hairline); }
.ledger__row {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0 1.25rem;
  padding-block: clamp(1.35rem, 2.3vw, 1.85rem);
  border-bottom: 1px solid var(--hairline);
}
/* the amber rule, drawn from the left on hover */
.ledger__row::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 30%, transparent));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-mid) var(--ease-out);
}
.ledger__row:hover::after { transform: scaleX(1); }

.ledger__n {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding-top: 0.45em;
  transition: color var(--t-mid) var(--ease-out);
}
.ledger__row:hover .ledger__n { color: var(--accent-ink); }

.ledger__row h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.95rem);
  line-height: 1.18;
  letter-spacing: -0.012em;
  transition: color var(--t-mid) var(--ease-out);
}
.ledger__row:hover h3 { color: var(--accent-ink); }
.ledger__row p {
  margin-top: 0.45rem;
  max-width: 56ch;
  font-size: 0.9375rem;
  line-height: 1.62;
  color: var(--muted);
  text-wrap: pretty;
}

/* --------------------------------------------------------- 11. SHOWCASE */
.showcase {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 60rem) {
  .showcase { grid-template-columns: 0.9fr 1.1fr; }
  .showcase--flip > :first-child { order: 2; }
}
.showcase__shots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
}
.shot-card {
  padding: 0.6rem;
  border-radius: var(--r-lg);
  display: grid;
  gap: 0.7rem;
}
.shot-card .shot {
  aspect-ratio: 9 / 17;
  border-radius: var(--r-md);
  min-height: 0;
}
.shot-card figcaption {
  padding: 0 0.4rem 0.35rem;
  font-size: 0.8125rem;
  color: var(--muted);
}
.shot-card figcaption b { color: var(--text); font-weight: 650; display: block; }

/* --------------------------------------------------------- 12. TIMELINE
   Three glass cards said "here are three steps". A spine with three nodes on
   it says the same thing and looks like somebody chose it. The hairline runs
   behind the nodes and stops short at both ends so it never reads as a rule
   that failed to reach the margin. */

.steps {
  position: relative;
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.5rem);
}
/* vertical spine, mobile */
.steps::before {
  content: "";
  position: absolute;
  top: 5px; bottom: 5px; left: 4px;
  width: 1px;
  background: linear-gradient(180deg, var(--hairline) 0%, var(--hairline) 78%, transparent);
}

.step {
  position: relative;
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding-left: 1.6rem;
}
/* the node sitting on the spine */
.step::before {
  content: "";
  position: absolute;
  top: 0.35rem; left: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow:
    0 0 0 1px var(--accent),
    0 0 0 5px color-mix(in oklab, var(--accent) 13%, transparent);
}

@media (min-width: 54rem) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  /* horizontal spine, desktop */
  .steps::before {
    top: 5px; bottom: auto; left: 0; right: 0;
    width: auto; height: 1px;
    background: linear-gradient(90deg, transparent, var(--hairline) 6%, var(--hairline) 94%, transparent);
  }
  .step { padding-left: 0; padding-top: 1.85rem; }
  .step::before { top: 1px; left: 0; }
}

.step__n {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--accent-ink);
}
.step p { font-size: 0.9375rem; line-height: 1.62; color: var(--muted); text-wrap: pretty; }

/* ------------------------------------------ 13. THE SIGNATURE: BIG "RESO"
   The wordmark is the demo. Glass bars drift across it so you watch the
   letters refract — the material proves itself on the brand's own name.   */

.reso-band {
  position: relative;
  overflow: clip;
  padding-block: clamp(2.5rem, 7vw, 5rem) clamp(1rem, 2vw, 1.5rem);
  isolation: isolate;
}
.reso-band__wave {
  position: absolute;
  inset: auto 0 22%;
  height: 46%;
  z-index: -1;
  opacity: 0.5;
  pointer-events: none;
}
.reso-band__word {
  position: relative;
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  /* Instrument Serif sets "RESO" in just 1.82em, roughly a third narrower
     than the grotesk this replaced, so the vw coefficient is much larger to
     land the same optical fill: 45vw puts the wordmark at ~83% of the band.
     The 44rem ceiling keeps the band from becoming a full screen of letters
     on wide monitors. Measured, not eyeballed. */
  font-size: clamp(3rem, 45vw, 44rem);
  /* 400 at this size is a magazine masthead, not a weak headline: the
     bracketed serifs and the high stroke contrast carry the mass, and the
     drifting glass bars read far better against a high-contrast face than
     they would against a slab of 800-weight grotesque. */
  line-height: 1;
  /* A third of the tracking the grotesk used. Any tighter and the serifs on
     R-E-S-O collide before the counters close up. */
  letter-spacing: -0.02em;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  background: linear-gradient(178deg, var(--wordmark-1) 8%, var(--wordmark-2) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* the letters sit under the drifting bars, so the bars read as glass.
     No ::after sheen here on purpose: a background-clip:text pseudo-element
     with no text of its own paints nothing. The gradient above plus the
     drifting bars and the spectrum carry the effect on their own. */
}

.reso-band__bars {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.reso-bar {
  position: absolute;
  left: -30%;
  width: 46%;
  height: clamp(5rem, 13vw, 10rem);
  border-radius: var(--r-pill);
  -webkit-backdrop-filter: blur(18px) saturate(1.7) brightness(1.06);
  backdrop-filter: blur(18px) saturate(1.7) brightness(1.06);
  background: linear-gradient(120deg, rgb(255 255 255 / 0.3), rgb(255 255 255 / 0.06) 46%, rgb(255 255 255 / 0.22));
  box-shadow:
    inset 0 1px 0 0 rgb(255 255 255 / 0.75),
    inset 0 -1px 0 0 rgb(255 255 255 / 0.12),
    inset 0 0 0 1px rgb(255 255 255 / 0.3),
    0 18px 50px -14px rgb(0 0 0 / 0.28);
  animation: drift-bar 17s var(--ease-in-out) infinite alternate;
}
.reso-bar:nth-child(1) { top: 14%; height: clamp(4rem, 10vw, 8rem); }
.reso-bar:nth-child(2) { top: 44%; animation-duration: 23s; animation-delay: -6s; }
.reso-bar:nth-child(3) { top: 68%; height: clamp(3rem, 8vw, 6rem); animation-duration: 29s; animation-delay: -12s; }
@keyframes drift-bar {
  from { transform: translateX(0) translateY(0) rotate(-3deg); }
  to { transform: translateX(280%) translateY(-8%) rotate(4deg); }
}

.reso-band__tag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--s-5);
}

/* ------------------------------------------------------------ 14. OCTA */
.octa {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: var(--r-xl);
  align-items: center;
}
@media (min-width: 56rem) { .octa { grid-template-columns: 1fr auto; } }
.octa__id { display: flex; align-items: center; gap: var(--s-4); }
/* The OCTA mark is light artwork lifted off a black ground (the source was a
   black-background JPG, now keyed to transparent). It therefore needs a dark
   chip in BOTH themes or it disappears into a light page. */
.octa__mark {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  flex: none;
  padding: 9px;
  border-radius: var(--r-md);
  background: linear-gradient(158deg, #241a12, #100b08);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.09),
    inset 0 1px 0 0 rgb(255 255 255 / 0.07),
    0 10px 26px -12px oklch(45% 0.14 40 / 0.55);
}
.octa__mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.octa__links { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.octa__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 42px;
  padding: 0.5rem 1rem;
  border-radius: var(--r-pill);
  font-size: 0.875rem;
  font-weight: 620;
  background: var(--glass-fill-strong);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: inset 0 1px 0 0 var(--glass-sheen), inset 0 0 0 1px var(--glass-edge);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-mid) var(--ease-out);
}
.octa__link:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 0 var(--glass-sheen), inset 0 0 0 1px var(--glass-edge), var(--shadow-2); }
.octa__link svg { width: 1.05em; height: 1.05em; color: var(--accent-ink); flex: none; }

/* ----------------------------------------------------------- 15. FOOTER */
.foot {
  position: relative;
  padding-block: var(--s-6) var(--s-7);
  margin-top: clamp(3rem, 7vw, 5rem);
}
/* a hairline that fades out at both ends, rather than a rule that chops the
   page in half at full strength */
.foot::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline) 16%, var(--hairline) 84%, transparent);
}
.foot__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
  justify-content: space-between;
}
.foot__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
}
.foot__legal a {
  font-size: 0.8125rem;
  color: var(--muted);
  transition: color var(--t-fast) var(--ease-out);
}
.foot__legal a:hover { color: var(--text); }

/* -------------------------------------------------------- 16. LEGAL PAGES */
.legal-head {
  padding-block: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 3vw, 2.5rem);
}
.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-4);
}
.legal-body {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
}
@media (min-width: 62rem) {
  .legal-body { grid-template-columns: 15rem 1fr; align-items: start; }
}
.toc {
  display: grid;
  gap: 0.15rem;
  padding: 1.1rem 1.15rem;
  border-radius: var(--r-lg);
  align-self: start;
}
@media (min-width: 62rem) { .toc { position: sticky; top: 6rem; } }
.toc b {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.toc a {
  display: block;
  padding: 0.4rem 0.6rem;
  border-radius: var(--r-xs);
  font-size: 0.875rem;
  color: var(--text-soft);
  border-left: 2px solid transparent;
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.toc a:hover { color: var(--text); background: var(--hairline); }
.toc a.is-active { color: var(--accent-ink); border-left-color: var(--accent); }

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.15rem);
  letter-spacing: -0.012em;
  line-height: 1.2;
  margin-top: 2.2em;
  scroll-margin-top: 6rem;
  text-wrap: balance;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-top: 1.8em;
}
.prose p, .prose li { color: var(--text-soft); text-wrap: pretty; }
.prose ul, .prose ol { display: grid; gap: 0.5em; padding-left: 1.15rem; }
.prose ul li { list-style: none; position: relative; }
.prose ul li::before {
  content: "";
  position: absolute;
  left: -1.15rem;
  top: 0.7em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.7;
}
.prose ol { list-style: decimal; }
.prose ol li::marker { color: var(--accent-ink); font-family: var(--f-mono); font-size: 0.85em; }
.prose a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose strong { color: var(--text); font-weight: 680; }

.callout {
  padding: 1.15rem 1.25rem;
  border-radius: var(--r-md);
  font-size: 0.9375rem;
}
.callout p { color: var(--text-soft); margin: 0; }
.callout b { color: var(--text); display: block; margin-bottom: 0.2rem; }

/* ------------------------------------------------------------- 17. 404 */
.nf {
  display: grid;
  place-items: center;
  min-height: calc(100svh - 8rem);
  padding-block: clamp(2rem, 6vw, 4rem);
  text-align: center;
}
.nf__code {
  position: relative;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(6rem, 26vw, 17rem);
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(172deg, var(--wordmark-1) 10%, var(--wordmark-2) 98%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nf__code span { position: relative; z-index: 1; }
.nf__code::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: clamp(7rem, 20vw, 13rem); height: clamp(7rem, 20vw, 13rem);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 0;
  -webkit-backdrop-filter: blur(20px) saturate(1.8) brightness(1.08);
  backdrop-filter: blur(20px) saturate(1.8) brightness(1.08);
  background: radial-gradient(circle at 40% 35%, rgb(255 255 255 / 0.4), rgb(255 255 255 / 0.05) 70%);
  box-shadow:
    inset 0 1px 0 0 rgb(255 255 255 / 0.7),
    inset 0 0 0 1px rgb(255 255 255 / 0.32),
    0 30px 70px -18px rgb(0 0 0 / 0.3);
  animation: nf-drift 12s var(--ease-in-out) infinite alternate;
}
@keyframes nf-drift {
  from { transform: translate(-58%, -42%) scale(0.94); }
  to   { transform: translate(-42%, -58%) scale(1.08); }
}
.nf__body { display: grid; gap: var(--s-4); justify-items: center; margin-top: var(--s-5); }
.nf__body p { max-width: 46ch; }

/* ---------------------------------------------------- 19. SCROLL REVEAL */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* -------------------------------------------- 20. ACCESSIBILITY STATES */
@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;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .aurora__blob, .reso-bar, .player__eq i, .strip__track { animation: none !important; }
  .strip__track { transform: none; }
}

/* Reduce Transparency → opaque fallback, material disappears but hierarchy stays */
@media (prefers-reduced-transparency: reduce) {
  .glass, .btn--glass, .player, .octa__link, .nav, .shot-card, .toc,
  .reso-bar, .nf__code::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--bg) !important;
  }
  .reso-bar { background: var(--glass-fill-strong) !important; }
  .nf__code::after { display: none; }
  [data-theme="dark"] .glass,
  [data-theme="dark"] .btn--glass,
  [data-theme="dark"] .player,
  [data-theme="dark"] .octa__link,
  [data-theme="dark"] .nav { background: #211910 !important; }
}

@media (prefers-contrast: more) {
  :root { --hairline: currentColor; --grain-a: 0; }
  .glass, .nav, .shot-card, .toc, .btn--glass, .player, .octa__link {
    box-shadow: inset 0 0 0 1px var(--muted), var(--shadow-1) !important;
  }
  .lede, .ledger__row p, .step p, .prose p { color: var(--text); }
}

@media print {
  .aurora, .grain, .nav-shell, .reso-band__bars, .strip { display: none !important; }
  body { background: #fff; color: #000; }
  .glass, .toc { box-shadow: none; background: #fff; }
}