/* SongCatcher's identity, on the web: dusk radio.
   The same tokens as Theme.swift and the share page the Worker renders, so the
   site, the shared pages and the app are visibly one thing.

   Committed to dark rather than theme-aware, on purpose. The app is dark-first,
   the share pages are dark-only, and a light landing page in front of a dark
   product misrepresents it. */

:root {
  color-scheme: dark;
  --ground: #191627;
  --panel: #241F35;
  --panel2: #2E2842;
  --hairline: #3A3352;
  --tungsten: #F5A65B;
  --rose: #E96A8D;
  --ink: #F2EDE4;
  /* Lifted from #8B87A0. That value is right in the app, where secondary text
     sits on small dense rows; on a marketing page read at arm's length it was
     the main reason the page felt grey and tiring. */
  --slate: #A8A3BE;

  /* The spectrum.
     The app proper keeps one accent -- tungsten, the dial lamp -- and that is
     correct for a tool you use in a dark bar. A page that has to make someone
     *want* the app can afford the full band, and it isn't invented: these are
     the colours already in the app icon's cyan-to-pink sweep. Used as a
     spectrum, in order, wherever something has a sequence to express: the
     meter's bars, the recognition ladder's rungs, the section marks. */
  --spec1: #5CC5F0;   /* cyan    — first, on-device */
  --spec2: #A78BFA;   /* violet  — second */
  --spec3: #E96A8D;   /* rose    — third */
  --spec4: #F5A65B;   /* amber   — the dial lamp, last and warmest */

  --serif: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* A spacing scale, so section rhythm is chosen once rather than per block. */
  --s1: 8px;
  --s2: 14px;
  --s3: 22px;
  --s4: 36px;
  --s5: 60px;
  --s6: 92px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; }
.narrow { max-width: 720px; }

a { color: var(--tungsten); }
/* `:not(.btn)` on the radius, because a:focus-visible is (0,1,1) and beat
   `.btn`'s (0,1,0) -- the primary CTA snapped from a 12px pill to a 4px
   rectangle the instant it took keyboard focus. Modern outlines already
   follow the element's own border-radius, so buttons need nothing here. */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--rose);
  outline-offset: 3px;
}
a:focus-visible:not(.btn) { border-radius: 4px; }

/* ── Masthead ─────────────────────────────────────────────── */
header.site {
  border-bottom: 1px solid var(--hairline);
  position: sticky; top: 0; z-index: 10;
  /* iOS 17 ships -webkit-backdrop-filter only; unprefixed landed in Safari 18.
     The app targets iOS 17+, and without the prefix the header lost its blur
     entirely and body text read straight through it. The base is 97% rather
     than 92% so the no-blur fallback is still opaque enough to be a header. */
  background: color-mix(in srgb, var(--ground) 97%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
header.site .wrap {
  display: flex; align-items: center; gap: var(--s2);
  padding-top: 15px; padding-bottom: 15px;
}
.wordmark {
  display: flex; align-items: center; gap: 9px;
  font: 600 18px var(--serif); color: var(--ink); text-decoration: none;
  letter-spacing: -.01em;
}
.wordmark .dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--tungsten);
  box-shadow: 0 0 12px var(--tungsten);
}
header.site nav {
  margin-left: auto; display: flex; align-items: center; gap: var(--s3);
  font-size: 14.5px;
}
/* Scoped to `:not(.btn)` on purpose. As `header.site nav a` this selector is
   specificity (0,1,3) and beat `.btn`'s own (0,1,0) `color`, which painted the
   install button's label slate-purple on amber -- about 1.9:1, and the single
   most-clicked thing on the page. */
header.site nav a:not(.btn) { color: var(--slate); text-decoration: none; }
header.site nav a:not(.btn):hover { color: var(--ink); }

/* The install button is its own group, not the third text link. Everything up
   to here is navigation; this is the point of the page. */
header.site nav .btn.mini { margin-left: var(--s2); }

/* Always visible. It used to appear only after the hero scrolled away, on the
   reasoning that two buttons on one screen is one too many -- which produced
   ZERO buttons on a 1280x720 laptop, where the hero's CTA sits below the fold.
   A permanently available install button is worth more than the tidiness. */
.btn.mini {
  padding: 9px 17px; font-size: 14px; border-radius: 9px;
  transition: transform .18s ease, box-shadow .18s ease;
}

/* ── Shared primitives ────────────────────────────────────── */
.readout {
  font: 500 11px/1 var(--mono);
  letter-spacing: .19em; text-transform: uppercase; color: var(--tungsten);
}
.readout.dim { color: var(--slate); }
/* Each section is marked in its own band of the spectrum, so scrolling the
   page moves through it rather than repeating one amber note nine times. */
.readout.c1 { color: var(--spec1); }
.readout.c2 { color: var(--spec2); }
.readout.c3 { color: var(--spec3); }
.readout.c4 { color: var(--spec4); }

/* A printed label plate, borrowed from the app's cassette panel. */
.plate {
  display: inline-flex; align-items: center; gap: var(--s1);
  border: 1px solid var(--hairline); background: var(--panel2);
  border-radius: 3px; padding: 5px 10px;
  font: 500 10px var(--mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--slate);
}
.rule { height: 1px; background: var(--hairline); border: 0; margin: var(--s3) 0; }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: linear-gradient(135deg, #FFC078, var(--tungsten) 55%, #EE8A5C);
  color: #17131F;
  font: 600 16px var(--sans); text-decoration: none;
  padding: 14px 26px; border-radius: 12px;
  box-shadow: 0 8px 26px -10px color-mix(in srgb, var(--tungsten) 85%, transparent);
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px -12px color-mix(in srgb, var(--tungsten) 95%, transparent);
}
.btn.ghost { background: transparent; color: var(--tungsten); border: 1px solid var(--tungsten); box-shadow: none; }
.cta-row { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; margin-top: var(--s4); }
.cta-note { font-size: 14px; color: var(--slate); }

/* ── Hero: the tuner ──────────────────────────────────────── */
.hero {
  padding: clamp(40px, 6vh, 76px) 0 clamp(56px, 9vh, 96px);
  position: relative; overflow: hidden;
  background: var(--ground);
}
/* The room the meter is listening to: three lights, blurred well past the
   point of being readable as shapes. Static -- a drifting animation here reads
   as a screensaver, and the meter is already the moving thing. */
.hero::before {
  content: ""; position: absolute; inset: -25% -12% -10%;
  background:
    radial-gradient(42% 40% at 16% 10%, color-mix(in srgb, var(--spec1) 30%, transparent), transparent 68%),
    radial-gradient(40% 38% at 84% 6%, color-mix(in srgb, var(--spec3) 28%, transparent), transparent 68%),
    radial-gradient(66% 52% at 50% 104%, color-mix(in srgb, var(--spec4) 34%, transparent), transparent 66%);
  filter: blur(34px);
  pointer-events: none;
}
.hero .wrap {
  position: relative; z-index: 1;
  max-width: 1180px;
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.hero .copy { display: flex; flex-direction: column; align-items: flex-start; }
.hero-shot { max-width: min(310px, 34vh); justify-self: end; width: 100%; }
.tuner-chrome {
  display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap;
  font: 500 10.5px var(--mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--slate); margin: 0;
}
.tuner-chrome b { color: var(--tungsten); font-weight: 500; font-variant-numeric: tabular-nums; }
h1 {
  font: 600 clamp(38px, 4.7vw, 64px)/1.02 var(--serif);
  margin: var(--s3) 0 0; letter-spacing: -.03em; text-wrap: balance; max-width: 17ch;
}
/* The page's one gradient, on the page's biggest object. Spectrum committed
   rather than sprinkled at 11px, where a cyan word on navy just reads grey. */
h1 em {
  font-style: normal;
  background: linear-gradient(96deg, var(--spec2), var(--spec3) 45%, var(--spec4) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lede {
  font-size: clamp(17px, 1.4vw, 20px);
  color: color-mix(in srgb, var(--ink) 74%, var(--slate));
  max-width: 42ch; margin: var(--s3) 0 0; line-height: 1.58;
}
.lede b { color: var(--ink); font-weight: 600; }

#meter {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 0;
  display: block; width: 100%; height: clamp(96px, 15vh, 170px);
  opacity: .55; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}


/* ── Section rhythm ───────────────────────────────────────── */
/* Each section is keyed to a band of the spectrum via `--band`, set inline in
   the markup in scroll order, so the page genuinely warms as you descend
   instead of repeating one violet-amber hairline nine times. */
section.slab { padding: var(--s6) 0; position: relative; --band: var(--spec2); }
section.slab::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 190px;
  pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--band) 11%, transparent), transparent);
}
/* The privacy section is the one place the answer is less: no colour, darker
   ground. Removing it here is what makes it mean something elsewhere. */
section.slab.quiet { background: #141122; }
section.slab.quiet::before { display: none; }
/* One tonal inversion across the whole page, so the eye gets a jolt somewhere. */
section.slab.band { background: #0E0B18; }
section.slab.band::before { display: none; }

/* Measures vary deliberately; everything used to be 1080px. */
.wrap.narrow-ish { max-width: 860px; }
.wrap.wide { max-width: 1240px; }
h2 {
  font: 600 clamp(30px, 4.2vw, 50px)/1.06 var(--serif);
  margin: 0; letter-spacing: -.026em; text-wrap: balance; max-width: 20ch;
}
h3 { font: 600 20px/1.2 var(--sans); margin: 0; letter-spacing: -.012em; }
p { margin: 0; }
.slab p { color: var(--slate); max-width: 60ch; text-wrap: pretty; }
.slab .pull, .slab .lede { max-width: none; }
.slab p strong { color: var(--ink); font-weight: 600; }
.stack { display: flex; flex-direction: column; gap: var(--s3); }

/* ── Document pages ───────────────────────────────────────── */


article { padding: var(--s5) 0 var(--s6); }
/* Deliberately not `article .wrap { max-width }`: both pages already carry
   `wrap narrow`, and `article .wrap` would out-specify `.narrow` and widen
   the very measure it was meant to set. */
article h1 { font-size: clamp(31px, 4.4vw, 44px); max-width: none; }
article .updated {
  font: 400 13px var(--mono); color: var(--slate); margin-top: var(--s2);
}
article h2 { font-size: 24px; margin: var(--s5) 0 var(--s2); max-width: none; }
article h3 { margin: var(--s4) 0 var(--s1); }
article p, article li { color: var(--slate); font-size: 16.5px; }
article p { margin-bottom: var(--s2); }
article strong { color: var(--ink); font-weight: 600; }
article ul { padding-left: 22px; margin: 0 0 16px; }
article li { margin-bottom: 9px; }
article li::marker { color: var(--tungsten); }
article code {
  font: 500 14px var(--mono); background: var(--panel2);
  padding: 2px 6px; border-radius: 5px; color: var(--ink);
}

.card {
  border: 1px solid var(--hairline); background: var(--panel);
  border-radius: 14px; padding: 20px 22px; margin: 22px 0;
}
.card p:last-child { margin-bottom: 0; }
.card.warm { border-color: var(--tungsten); background: color-mix(in srgb, var(--tungsten) 7%, var(--panel)); }

table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15.5px; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
th { color: var(--ink); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .07em; }
td { color: var(--slate); }
.scroller { overflow-x: auto; }
/* Explicit widths: left to itself the browser gives the prose column whatever
   the two short columns don't want, and "An anonymous device key" ends up
   wrapping over four lines next to a half-empty paragraph. */
.scroller table { min-width: 560px; }
.scroller th:first-child, .scroller td:first-child { width: 23%; }
.scroller th:last-child, .scroller td:last-child { width: 17%; }

/* ── Footer ───────────────────────────────────────────────── */
footer.site {
  border-top: 1px solid var(--hairline); padding: 34px 0 46px;
  color: var(--slate); font-size: 14.5px;
}
footer.site .wrap { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
footer.site nav { margin-left: auto; display: flex; gap: 20px; }
footer.site a { color: var(--slate); text-decoration: none; }
footer.site a:hover { color: var(--ink); }

/* ── The gatefold ─────────────────────────────────────────── */
.gatefold {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--s6);
  align-items: start;
}
.credits { display: grid; grid-template-columns: 96px 1fr; gap: var(--s2) var(--s3); margin: 0; }
.credits dt {
  font: 500 10px/1.9 var(--mono); letter-spacing: .17em; text-transform: uppercase;
  color: var(--tungsten);
}
.credits dd { margin: 0; color: var(--slate); font-size: 15.5px; line-height: 1.5; }

/* Screenshots get a phone around them.
   Bare and tilted, the app's own floating tab bar reads as a detached panel
   hovering off the bottom edge of a rectangle -- there was no device for it to
   float above. The bezel gives it one, and the tilt goes: a phone photographed
   straight on looks deliberate, a rotated rectangle looks like a mistake. */
.shot { position: relative; margin: 0; display: flex; flex-direction: column; gap: var(--s2); }
.phone {
  position: relative;
  border-radius: 44px;
  padding: 10px;
  background: linear-gradient(155deg, #554D77, #2A2440 42%, #131019);
  /* The spectrum wash behind the device is box-shadow, not a blurred pseudo-
     element with negative insets. That was the first version and it pushed the
     page 65px wider than the viewport at 768px, because a blur extends past
     its box and nothing here clips it. A shadow tints the same way and takes
     part in no layout at all. */
  box-shadow:
    0 44px 90px -38px #000,
    -22px 26px 70px -30px color-mix(in srgb, var(--spec1) 62%, transparent),
    26px -18px 70px -30px color-mix(in srgb, var(--spec3) 58%, transparent),
    0 0 0 1px rgba(255, 255, 255, .06) inset;
}
/* `height: auto` is load-bearing, not tidiness. The <img> carries
   height="900", which becomes a presentational hint of `height: 900px`.
   Setting only `width: 100%` overrides the width hint and leaves the height
   literal, so the intrinsic ratio is never consulted and the shot is scaled
   anisotropically -- measured at 82% too wide at 820px, where the app's round
   Listen button renders as an ellipse. Reproduces in WebKit too. */
.phone img { width: 100%; height: auto; display: block; border-radius: 35px; }
.shot figcaption {
  font: 500 10px var(--mono); letter-spacing: .17em; text-transform: uppercase;
  color: var(--slate); text-align: center;
}

/* ── One night ────────────────────────────────────────────── */
.timeline {
  display: flex; flex-direction: column;
  border-left: 1px solid var(--hairline); padding-left: var(--s4);
  max-width: 760px;
}
.timeline {
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--panel) 55%, transparent));
  border-radius: 20px; padding: var(--s3) var(--s4) var(--s3) var(--s5);
  max-width: 820px;
}
.timeline::before { left: var(--s4); width: 3px; opacity: 1; }
.tick {
  position: relative; padding: var(--s4) 0;
  display: grid; grid-template-columns: 82px 1fr; gap: var(--s4); align-items: baseline;
}
.tick + .tick { border-top: 1px solid color-mix(in srgb, var(--hairline) 70%, transparent); }
.tick::before {
  content: ""; position: absolute; left: calc(var(--s4) * -1 - 2.5px); top: calc(var(--s4) + 11px);
  width: 7px; height: 7px; border-radius: 50%; background: var(--hairline);
}
/* The evening warms as it goes: cyan early, rose later, amber by the taxi. */
.timeline { border-left: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--spec1), var(--spec2) 40%, var(--spec3) 72%, var(--spec4));
  opacity: .75; border-radius: 2px;
}
.tick:nth-child(1)::before { background: var(--spec1); box-shadow: 0 0 12px var(--spec1); }
.tick:nth-child(2)::before { background: var(--spec3); box-shadow: 0 0 12px var(--spec3); }
.tick:nth-child(3)::before { background: var(--spec4); box-shadow: 0 0 12px var(--spec4); }
.tick:nth-child(1) .when { color: var(--spec1); }
.tick:nth-child(2) .when { color: var(--spec3); }
.tick:nth-child(3) .when { color: var(--spec4); }
.tick .when {
  font: 500 12.5px var(--mono); font-variant-numeric: tabular-nums;
}
.tick .what { display: flex; flex-direction: column; gap: 5px; }
.tick .what b { font: 600 clamp(19px, 2vw, 23px)/1.2 var(--serif); color: var(--ink); }
.tick .what span { font: 400 14.5px/1.5 var(--sans); color: var(--slate); }
/* The place lives with the song, not in a third column that a media query can
   delete. It used to be `display:none` under 820px -- which removed the
   location from the one section whose entire point is location, for most
   visitors. */
.tick .where-inline {
  font: 500 12px var(--mono); color: var(--band, var(--spec4));
  letter-spacing: .06em;
}


/* ── The recognition ladder ───────────────────────────────── */
.ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.rung {
  display: flex; flex-direction: column; gap: var(--s2);
  padding-top: var(--s3); border-top: 2px solid var(--hairline);
}
/* Each rung is a longer reach than the one above it, and moves further along
   the spectrum to say so. The rule is the loudest thing in the section because
   the sequence is the point. */
.rung { border-top-width: 3px; }
.rung:nth-child(1) { border-top-color: var(--spec1); }
.rung:nth-child(2) { border-top-color: var(--spec2); }
.rung:nth-child(3) { border-top-color: var(--spec3); }
.rung:nth-child(1) .step { color: var(--spec1); }
.rung:nth-child(2) .step { color: var(--spec2); }
.rung:nth-child(3) .step { color: var(--spec3); }
.rung .step {
  font: 500 10px var(--mono); letter-spacing: .17em; text-transform: uppercase;
}
.rung p { font-size: 15px; }

/* ── A two-up spread ──────────────────────────────────────── */
.pair { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--s6); align-items: center; }
.pair.reverse { grid-template-columns: 1.05fr .95fr; }

/* ── What a shared catch looks like ───────────────────────── */
/* The sharing section was the only one making a promise without showing the
   thing it promised, which is why it read as the emptiest part of the page. */
.sharecard {
  display: flex; gap: var(--s3); align-items: center;
  padding: var(--s3);
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--spec2) 30%, var(--hairline));
  background:
    linear-gradient(140deg,
      color-mix(in srgb, var(--spec2) 16%, var(--panel)),
      var(--panel) 55%,
      color-mix(in srgb, var(--spec4) 13%, var(--panel)));
  box-shadow:
    0 34px 70px -34px #000,
    -16px 18px 56px -30px color-mix(in srgb, var(--spec2) 70%, transparent),
    18px -12px 56px -30px color-mix(in srgb, var(--spec4) 60%, transparent);
}
.sc-art {
  width: 108px; height: 108px; flex: none; border-radius: 14px;
  background: linear-gradient(150deg, var(--spec3), #8A3B6B 48%, var(--spec2));
  box-shadow: 0 12px 30px -14px #000;
}
.sc-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sc-mark {
  font: 500 9.5px var(--mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--spec2); margin-bottom: 5px;
}
.sc-body b { font: 600 clamp(19px, 2.2vw, 23px) var(--serif); color: var(--ink); line-height: 1.2; }
.sc-artist { font: 400 15px var(--sans); color: var(--ink); opacity: .82; }
.sc-meta { font: 400 12px var(--mono); color: var(--slate); margin-top: 6px; }

/* ── Privacy ──────────────────────────────────────────────── */
.pull {
  border-left: 3px solid transparent;
  border-image: linear-gradient(180deg, var(--spec2), var(--spec3), var(--spec4)) 1;
  padding: 4px 0 4px var(--s3);
  font: 400 clamp(20px, 2.7vw, 26px)/1.42 var(--serif);
  color: var(--ink); max-width: 32ch; margin: 0;
}
/* .slab p paints every paragraph slate; the pull-quote is the one line on the
   page worth reading in full contrast, so it wins on specificity deliberately. */
.slab p.pull { color: var(--ink); }
.trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s4); }
.trio .item { display: flex; flex-direction: column; gap: var(--s1); }
.trio .item p { font-size: 15px; }

/* ── The closer ───────────────────────────────────────────── */
.closer {
  padding: var(--s6) 0;
  position: relative; overflow: hidden;
  background: var(--ground);
  text-align: center;
}
.closer::before {
  content: ""; position: absolute; inset: -30% -10% -20%;
  background:
    radial-gradient(40% 44% at 22% 96%, color-mix(in srgb, var(--spec2) 30%, transparent), transparent 68%),
    radial-gradient(38% 42% at 78% 92%, color-mix(in srgb, var(--spec1) 26%, transparent), transparent 68%),
    radial-gradient(60% 50% at 50% 6%, color-mix(in srgb, var(--spec4) 32%, transparent), transparent 66%);
  filter: blur(36px); pointer-events: none;
}
.closer .wrap { position: relative; z-index: 1; }
.closer .wrap { display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
.closer h2 { max-width: 18ch; }
.closer .cta-row { justify-content: center; margin-top: 0; }

/* On a narrow screen the masthead can't carry two text links and a button.
   The links go, not the button: both are repeated in the footer, and the
   button is the reason the page exists. */
@media (max-width: 560px) {
  header.site nav a:not(.btn) { display: none; }
  header.site nav .btn.mini { margin-left: 0; }
}

@media (max-width: 820px) {
  .gatefold { grid-template-columns: 1fr; gap: var(--s5); }
  .pair, .pair.reverse { grid-template-columns: 1fr; gap: var(--s5); }
  /* Stacked, the card belongs under the words that explain it. */
  .pair.reverse .sharecard { order: 2; }
  .sharecard { flex-direction: column; align-items: flex-start; text-align: left; }
  .ladder { grid-template-columns: 1fr; gap: var(--s3); }
  .trio { gap: var(--s3); }
  .timeline { padding: var(--s2) var(--s3) var(--s2) var(--s4); }
  .timeline::before { left: var(--s3); }
  .tick { grid-template-columns: 64px 1fr; gap: var(--s3); }
  .tick::before { left: calc(var(--s3) * -1 - 2.5px); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ── The gallery band ─────────────────────────────────────── */
/* The page's one moment of density: three phones on the inverted ground, the
   middle one lifted. Built from the three screenshots that were sitting unused
   in site/img/ while the page showed the same screen twice. */
.gallery {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 3vw, 40px); align-items: end;
}
.gallery figure { margin: 0; display: flex; flex-direction: column; gap: var(--s2); }
.gallery .tall { transform: translateY(-40px); }
.gallery img {
  width: 100%; height: auto; display: block; border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 44px 90px -44px #000;
}
.gallery figcaption {
  font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--slate); text-align: center;
}

/* ── FAQ ──────────────────────────────────────────────────── */
.faq { display: flex; flex-direction: column; gap: 0; margin: 0; }
.faq dt {
  font: 600 18px/1.35 var(--sans); color: var(--ink);
  padding-top: var(--s3); margin-top: var(--s3);
  border-top: 1px solid var(--hairline);
}
.faq dt:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.faq dd { margin: var(--s1) 0 0; color: var(--slate); font-size: 16px; max-width: 62ch; }

/* ── Privacy trio, as a colophon ──────────────────────────── */
.itemhead {
  font: 600 15px/1.35 var(--sans); color: var(--ink);
  letter-spacing: -.005em;
}
.trio .item { gap: var(--s1); }

/* ── Small print ──────────────────────────────────────────── */
.footnote { font: 400 13px/1.5 var(--sans); color: var(--slate); opacity: .8; }

/* ── The share card, as a page you send ───────────────────── */
.sc-chrome {
  display: flex; align-items: center; padding: 9px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--spec2) 25%, var(--hairline));
  font: 400 11.5px var(--mono); color: var(--slate);
}
.sc-inner { display: flex; gap: var(--s3); align-items: center; padding: var(--s3); }
.sharecard { display: block; padding: 0; overflow: hidden; }

@media (max-width: 820px) {
  .gallery {
    display: flex; grid-template-columns: none; max-width: none;
    gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: var(--s2); margin-inline: -22px; padding-inline: 22px;
  }
  .gallery figure { flex: 0 0 66%; scroll-snap-align: center; }
  .gallery .tall { transform: none; }
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-shot { max-width: 300px; justify-self: center; }
  .hero .copy { align-items: flex-start; }
  /* A 900px-tall screenshot in a single column made the page 9.5 phone
     screens long on its own. */
  .shot { max-width: 320px; margin-inline: auto; }
  .sc-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 820px) {
  /* 92px between every section is generous on a desktop and interminable on a
     phone, where it was a large part of a 14-screen page. */
  section.slab, .closer { padding: var(--s5) 0; }
  .timeline { padding-block: var(--s2); }
}

/* ── The wall label ───────────────────────────────────────── */
/* A museum placard is a printed card, so this is the one light object on the
   whole page. Used exactly once: a second one would make it a style rather
   than the thing it is. */
.label {
  margin: 0;
  background: linear-gradient(170deg, #FBF7EF, #EFE8DC);
  color: #241F35;
  border-radius: 3px;
  padding: clamp(24px, 3vw, 32px) clamp(24px, 3vw, 34px);
  max-width: 460px;
  box-shadow:
    0 30px 60px -28px #000,
    0 0 0 1px rgba(255, 255, 255, .10),
    0 1px 0 rgba(255, 255, 255, .5) inset;
}
.label-head { display: flex; flex-direction: column; gap: 5px; }
.label-head b {
  font: 600 clamp(21px, 2.4vw, 26px)/1.16 var(--serif);
  font-style: italic; letter-spacing: -.01em;
}
.label-artist {
  font: 500 12px var(--sans); letter-spacing: .13em; text-transform: uppercase;
  color: #524D68;
}
.label hr {
  border: 0; height: 1px; background: #241F35; opacity: .22;
  margin: var(--s3) 0;
}
/* `.slab p` paints paragraphs slate for the dark ground; on the placard the
   ink has to come back or it is grey-on-cream. */
.slab .label p {
  font: 400 16px/1.62 var(--serif);
  color: #3A3450; max-width: none; margin: 0;
}
.label figcaption {
  margin-top: var(--s3);
  font: 500 9.5px var(--mono); letter-spacing: .19em; text-transform: uppercase;
  color: #55506B;   /* #6E6884 measured 4.34:1 on the card — under AA at 9.5px */
}

.museum { margin-top: var(--s5); align-items: center; }
.museum .stack { gap: var(--s5); }
.stack-tight { display: flex; flex-direction: column; gap: var(--s1); }