@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/instrument_serif.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  src: url("fonts/instrument_serif_italic.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope.ttf") format("truetype");
  font-weight: 200 800;
  font-display: swap;
}

/* Warm monochrome: soot blacks and parchment creams, like an old print. */
:root {
  --night: #0f0e0c;
  --ink: #171513;
  --raised: #201d1a;
  --cream: #ece4d6;
  --muted: #a39b8e;
  --faint: #6b655c;
  --hairline: rgba(236, 228, 214, 0.09);
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;
  --gutter: clamp(22px, 5vw, 72px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { background: var(--night); scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--cream);
  background: var(--night);
  font: 500 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: var(--cream); color: var(--night); }
a { color: inherit; }
em { font-style: italic; }
h1, h2, h3 { font-weight: 400; margin: 0; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  padding: 8px 14px; background: var(--cream); color: var(--night); border-radius: 99px;
}
.skip:focus { top: 12px; }

.fine { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.faint { color: var(--faint); }
.body { margin: 0; color: var(--muted); max-width: 34em; font-size: 16px; line-height: 1.65; }

/* ---------- glass ---------- */
.glass {
  position: relative;
  background:
    linear-gradient(180deg, rgba(236, 228, 214, 0.10), rgba(236, 228, 214, 0.035));
  border: 1px solid rgba(236, 228, 214, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 240, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 10px 30px -12px rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
}
.pill {
  --mx: 50%;
  --my: 50%;
  --lift: 0;
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px 14px 20px;
  border-radius: 999px;
  border: 0;
  isolation: isolate;
  overflow: hidden;
  font: 600 14px/1 var(--sans);
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--cream);
  background:
    /* A slow sheen that crosses the glass now and then. */
    linear-gradient(105deg, transparent 42%, rgba(255, 250, 240, 0.13) 50%, transparent 58%) 160% 0 / 260% 100% no-repeat,
    radial-gradient(120% 160% at 50% -40%, rgba(236, 228, 214, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(236, 228, 214, 0.09), rgba(236, 228, 214, 0.025));
  animation: sheen 9s 4s cubic-bezier(0.45, 0, 0.2, 1) infinite;
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
@keyframes sheen {
  0% { background-position: 160% 0, 0 0, 0 0; }
  22%, 100% { background-position: -60% 0, 0 0, 0 0; }
}
/* Halftone dots that print themselves under the pointer. */
.pill::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(236, 228, 214, 0.5) 0.85px, transparent 1.25px) 0 0 / 5px 5px;
  -webkit-mask: radial-gradient(70px circle at var(--mx) var(--my), #000, rgba(0, 0, 0, 0.12) 55%, transparent 80%);
  mask: radial-gradient(70px circle at var(--mx) var(--my), #000, rgba(0, 0, 0, 0.12) 55%, transparent 80%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
/* A rim of light: bright along the top, and where the pointer is. */
.pill::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background:
    radial-gradient(90px circle at var(--mx) var(--my), rgba(255, 250, 240, calc(0.15 + 0.6 * var(--lift))), transparent 70%),
    linear-gradient(180deg, rgba(255, 250, 240, 0.34), rgba(236, 228, 214, 0.08) 45%, rgba(236, 228, 214, 0.16));
  -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 exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.pill:hover {
  --lift: 1;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 240, 0.12),
    0 0 0 1px rgba(236, 228, 214, 0.04),
    0 18px 40px -16px rgba(0, 0, 0, 0.9),
    0 0 46px -14px rgba(221, 211, 194, 0.35);
}
.pill:hover::before { opacity: 1; }
.pill:active { transform: translateY(0) scale(0.975); transition-duration: 0.15s; }

/* The one thing to press, printed like the covers: page.js lays it down in cream through the Bayer
   screen, fills it in as you reach for it, and ripples its outline outward when pressed. Under the
   print is ink, so the open dots read as part of the button. */
.pill.primary {
  --tx: 0px;
  --ty: 0px;
  overflow: visible;
  color: var(--night);
  font-weight: 650;
  background: var(--ink);
  box-shadow:
    0 14px 34px -14px rgba(0, 0, 0, 0.9),
    0 0 44px -14px rgba(236, 228, 214, 0.32);
  animation: none;
  translate: var(--tx) var(--ty);
  transition: translate 0.5s var(--ease), box-shadow 0.6s var(--ease);
}
.pill.primary::before, .pill.primary::after { content: none; }
.pill.primary:hover, .pill.primary:active { transform: none; }
.pill.primary:hover {
  box-shadow:
    0 22px 44px -18px rgba(0, 0, 0, 0.95),
    0 0 70px -10px rgba(236, 228, 214, 0.5);
}
.pill.primary .moon-icon { width: 22px; height: 22px; }
.pill.primary.large .moon-icon { width: 24px; height: 24px; }
.pill-fx { position: absolute; left: -44px; top: -28px; z-index: -1; pointer-events: none; image-rendering: pixelated; }
.pill-label { position: relative; display: inline-flex; align-items: center; gap: 8px; }
/* Sent: a small tick drawn in before the words. */
.pill.sent .pill-label::before {
  content: ""; width: 5px; height: 10px; margin: -3px 2px 0 1px;
  border: solid currentColor; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  animation: tick 0.4s var(--ease);
}
@keyframes tick { from { opacity: 0; transform: rotate(45deg) scale(0.4); } }
.pill.primary.pop { animation: pop 0.55s var(--ease); }
@keyframes pop {
  25% { scale: 0.95 0.88; }
  60% { scale: 1.05 1.04; }
  100% { scale: 1; }
}
.burst { position: fixed; z-index: 60; pointer-events: none; image-rendering: pixelated; }
.pill.small { padding: 9px 16px; font-size: 12.5px; animation: none; }
.pill.small::before { background-size: 4px 4px; }
.pill.large { padding: 19px 32px 19px 26px; font-size: 15px; }
.pill:focus-visible { border-radius: 999px; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  padding: max(18px, env(safe-area-inset-top)) var(--gutter) 16px;
  transition: background 0.5s, box-shadow 0.5s;
}
.nav.scrolled {
  background: rgba(15, 14, 12, 0.74);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 var(--hairline);
}
/* The page's own wordmark stands on the horizon; the nav's only appears once that one has gone. */
.nav-mark {
  font: 400 28px/1 var(--serif);
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--cream);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.nav.past .nav-mark { opacity: 1; transform: none; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a:not(.pill) {
  text-decoration: none; font-size: 13px; color: var(--muted);
  transition: color 0.3s;
}
.nav-links a:not(.pill):hover { color: var(--cream); }

/* ---------- hero ---------- */
.hero { position: relative; height: 270vh; height: 270svh; }
.hero-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
}
.hero-stage.no-gl { background: radial-gradient(40vh 40vh at 50% 32%, #2a2622, var(--night) 70%); }
#sky {
  position: absolute; left: 0; top: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: pan-y;
}
#sky.on-moon { cursor: grab; }
#sky.dragging { cursor: grabbing; }

.wordmark {
  position: absolute; left: 0; right: 0; top: 0;
  margin: 0;
  text-align: center;
  font: 400 200px/1 var(--serif);
  letter-spacing: -0.035em;
  color: var(--cream);
  /* A keyline of night, so the letters stand in front of the moon. */
  text-shadow: 0 0 0.012em var(--night), 0 0 0.03em var(--night), 0 0 0.08em rgba(15, 14, 12, 0.85), 0 0 0.2em rgba(15, 14, 12, 0.5);
  pointer-events: none;
  will-change: transform, opacity;
}
.wordmark .ch {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateX(calc(var(--spread) * 1em));
  animation: settle 2.4s var(--ease) forwards;
  animation-delay: calc(1.4s + var(--i) * 0.09s);
}
.wordmark .probe { display: inline-block; width: 0; height: 0; }
/* Until sky.js has placed it, the wordmark would show unset at the top of the screen. If the
   script never comes, it shows anyway after a few seconds. */
.js .wordmark:not(.placed) { visibility: hidden; animation: unhide 0s 4s forwards; }
@keyframes unhide { to { visibility: visible; } }
@keyframes settle { to { opacity: 1; filter: blur(0); transform: none; } }

.hero-below {
  position: absolute; left: 0; right: 0; bottom: 0; top: 60%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 18px;
  padding: 0 var(--gutter) clamp(30px, 6.5vh, 64px);
  text-align: center;
  pointer-events: none;
  will-change: transform, opacity;
}
.hero-below > * { pointer-events: auto; opacity: 0; transform: translateY(12px); animation: rise 1.5s var(--ease) forwards; }
.hero-below .tagline { animation-delay: 2.6s; }
.hero-below .subline { animation-delay: 2.75s; }
.hero-below .actions { animation-delay: 3s; }
.hero-below .meta { animation-delay: 3.2s; }
@keyframes rise { to { opacity: 1; transform: none; } }
.tagline {
  margin: 0;
  font: italic 400 clamp(22px, 2.3vw, 30px)/1.2 var(--serif);
  color: var(--cream);
  text-shadow: 0 0 18px var(--night), 0 0 6px var(--night);
}
.actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; justify-content: center; }
/* What it is, in plain words, under the tagline. */
.subline {
  margin: -6px 0 0; max-width: 31em; text-align: center;
  font-size: 15px; line-height: 1.5; color: #cfc6b8; text-wrap: balance;
  /* It sits on the reflection: a dark halo keeps the words clear of the dots. */
  text-shadow: 0 0 18px var(--night), 0 0 8px var(--night), 0 0 3px var(--night), 0 0 1px var(--night);
}
.meta { color: var(--muted); text-shadow: 0 0 10px var(--night), 0 0 4px var(--night); }
.meta span + span::before { content: "·"; margin: 0 0.6em; }

/* Tonight's moon, named only while you touch it, or as you fly in. */
.tonight {
  position: absolute; left: 50%; top: 0;
  margin: 0;
  transform: translateX(-50%);
  font: italic 400 17px/1 var(--serif);
  color: var(--muted);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
.tonight.flying {
  top: auto !important; bottom: 34px;
  padding: 10px 16px; border-radius: 999px;
  background: rgba(15, 14, 12, 0.72);
  box-shadow: 0 0 0 1px var(--hairline);
}
.tonight.shown { opacity: 1; }
.tonight b { font-weight: 400; color: var(--cream); }

/* ---------- sections ---------- */
main > section:not(.hero) { scroll-margin-top: 70px; position: relative; padding-left: var(--gutter); padding-right: var(--gutter); }
h2 {
  margin: 0 0 26px;
  font: 400 clamp(46px, 6vw, 88px)/0.98 var(--serif);
  letter-spacing: -0.02em;
}
h2 em { color: var(--muted); }

/* Artwork: the plate leads, the screens are a short list you can choose from. */
.print {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 110px);
  align-items: center;
  max-width: 1320px; margin: 0 auto;
  padding-top: 22vh; padding-bottom: 26vh;
}
.plate { margin: 0; }
.plate-frame {
  position: relative;
  aspect-ratio: 1;
  border-radius: 4px;
  overflow: hidden;
  background: var(--raised);
  box-shadow: 0 60px 90px -50px rgba(0, 0, 0, 0.95), 0 0 0 1px var(--hairline);
}
#specimen { width: 100%; height: 100%; display: block; }
.plate figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 16px; }
.plate-title { font: italic 400 19px/1 var(--serif); white-space: nowrap; }
.print-text .body { margin-bottom: 34px; }

.screens { border: 0; margin: 0 0 26px; padding: 0; }
.screens legend, .grain-label { padding: 0; margin-bottom: 10px; font-size: 12.5px; color: var(--faint); }
.screens label {
  display: grid; grid-template-columns: 18px 112px 1fr; align-items: baseline; gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--hairline);
  cursor: pointer;
}
.screens label:last-child { border-bottom: 1px solid var(--hairline); }
.screens input {
  appearance: none; -webkit-appearance: none;
  width: 12px; height: 12px; margin: 0;
  border-radius: 50%;
  border: 1px solid var(--faint);
  transform: translateY(1px);
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.screens input:checked { border-color: var(--cream); background: var(--cream); box-shadow: 0 0 0 3px var(--night), 0 0 0 4px rgba(236, 228, 214, 0.35); }
.screens input:focus-visible { outline: 1.5px solid var(--cream); outline-offset: 4px; }
.screen-name { font: 400 23px/1 var(--serif); color: var(--muted); transition: color 0.3s; }
.screen-note { font-size: 13.5px; color: var(--faint); transition: color 0.3s; }
.screens label:hover .screen-name, .screens input:checked ~ .screen-name { color: var(--cream); }
.screens input:checked ~ .screen-note { color: var(--muted); }

.grain { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.grain-label { margin: 0; }
.segmented {
  display: inline-flex; padding: 4px; gap: 2px;
  border-radius: 999px;
  background: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.segmented button {
  appearance: none; border: 0; cursor: pointer;
  padding: 8px 15px; border-radius: 999px;
  font: 500 13px/1 var(--sans); color: var(--muted);
  background: transparent;
  transition: color 0.3s, background 0.4s var(--ease);
}
.segmented button:hover { color: var(--cream); }
.segmented button[aria-pressed="true"] { background: var(--raised); color: var(--cream); box-shadow: inset 0 1px 0 rgba(255, 250, 240, 0.06); }

/* Lyrics: the biggest type on the page, because that's how they read in the player. */
.lyrics {
  max-width: 1320px; margin: 0 auto; padding-bottom: 22vh;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(40px, 7vw, 110px); align-items: center;
}
.lyrics-head h2 { margin-bottom: 26px; }
.lyrics-credit { margin-top: 18px; color: var(--faint); }
/* For reading; the phone sings them. */
.lyrics-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* The phone: the app's portrait lyrics screen, sized in hundredths of its own width. */
.lyrics-phone {
  width: min(372px, 84vw, (100svh - 150px) * 9 / 19.2); aspect-ratio: 9 / 19.2;
  padding: 10px; border-radius: 52px;
  background: linear-gradient(160deg, #2a2723, #141210 40%, #1c1a17);
  box-shadow: inset 0 0 0 1px rgba(236, 228, 214, 0.12), 0 60px 90px -40px rgba(0, 0, 0, 0.95);
  container-type: inline-size;
}
.np {
  position: relative; height: 100%; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 7cqi 7.5cqi 3cqi;
  border-radius: 43px;
  background:
    radial-gradient(120% 60% at 30% 0%, rgba(221, 211, 194, 0.08), transparent 60%),
    radial-gradient(90% 50% at 80% 100%, rgba(221, 211, 194, 0.05), transparent 70%),
    var(--night);
  color: var(--cream);
}
.np svg { width: 6.6cqi; height: 6.6cqi; flex: none; }
.np .st { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.np .fl { fill: currentColor; }
.np-header { display: flex; align-items: center; justify-content: space-between; color: var(--cream); }
.np-from { display: flex; flex-direction: column; align-items: center; gap: 0.6cqi; }
.np-from span { font-size: 2.6cqi; letter-spacing: 0.16em; color: var(--muted); }
.np-from b { font-weight: 500; font-size: 3.6cqi; }
.np-song { display: flex; align-items: center; gap: 3.8cqi; margin: 4.4cqi 0 1.6cqi; }
.np-cover { width: 14.5cqi; height: 14.5cqi; border-radius: 0.8cqi; image-rendering: pixelated; background: #000; flex: none; }
.np-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.6cqi; }
.np-title b { font: 400 6.4cqi/1.05 var(--serif); }
.np-title span { font-size: 3.4cqi; color: var(--muted); }
.np-song svg { color: var(--muted); }
/* The words run edge to edge, past the screen's side margins, as they do in the app. */
.np-lyrics { position: relative; flex: 1; min-height: 0; margin: 0 -7.5cqi; }
.np-column { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.np-lyrics am-lyrics { position: absolute; inset: 0; height: auto; }
.np-seek { margin-top: 3cqi; }
.np-bar { position: relative; height: 0.7cqi; border-radius: 1cqi; background: rgba(236, 228, 214, 0.16); }
.np-bar i {
  position: absolute; left: 0; top: 0; bottom: 0; width: var(--at, 0%);
  border-radius: inherit; background: var(--cream);
}
.np-bar i::after {
  content: ""; position: absolute; right: -1.4cqi; top: 50%; width: 2.8cqi; height: 2.8cqi;
  border-radius: 50%; background: var(--cream); transform: translateY(-50%);
}
.np-times { display: flex; justify-content: space-between; margin-top: 2cqi; font-size: 3cqi; color: var(--muted); font-variant-numeric: tabular-nums; }
.np-controls { display: flex; align-items: center; justify-content: space-between; margin: 3.4cqi -1.4cqi 0; }
.np-controls > svg:first-child, .np-controls > svg:last-child { color: var(--muted); }
.np-play {
  display: grid; place-items: center; width: 17cqi; height: 17cqi; padding: 0;
  border: 0; border-radius: 50%; background: var(--cream); color: var(--night); cursor: pointer;
}
.np-play svg { width: 7.4cqi; height: 7.4cqi; }
.np-play .play, .np-play.paused .pause { display: none; }
.np-play.paused .play { display: block; }
.np-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 3.4cqi; color: var(--muted); }
.np-pill {
  padding: 1.8cqi 4.4cqi; border-radius: 99px; font-size: 3.4cqi; color: var(--cream);
  background: rgba(236, 228, 214, 0.08); box-shadow: inset 0 0 0 1px rgba(236, 228, 214, 0.14);
}

/* Liner notes: a bento of small printed scenes, one per feature. */
.notes { max-width: 1320px; margin: 0 auto; padding-bottom: 24vh; }
.notes-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap;
  margin-bottom: 44px;
}
.notes-head h2 { margin: 0; }
.aside { margin: 0 0 10px; font: italic 400 21px/1.35 var(--serif); color: var(--faint); }

.bento {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 300px;
  grid-template-areas:
    "library glass   quiet"
    "library offline quiet"
    "screen  screen  screen"
    "volume  volume  sleep"
    "widget  stats   touch";
  gap: 12px;
}
.card-library { grid-area: library; }
.card-glass { grid-area: glass; }
.card-quiet { grid-area: quiet; }
.card-offline { grid-area: offline; }
.card-screen { grid-area: screen; }
.card-volume { grid-area: volume; }
.card-sleep { grid-area: sleep; }
.card-widget { grid-area: widget; }
.card-stats { grid-area: stats; }
.card-touch { grid-area: touch; }

.card {
  --mx: 50%;
  --my: 30%;
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0;
  border-radius: 4px;
  overflow: hidden;
  background:
    radial-gradient(420px circle at var(--mx) var(--my), rgba(236, 228, 214, 0.045), transparent 60%),
    linear-gradient(180deg, #1a1816, var(--ink) 55%);
  box-shadow: inset 0 0 0 1px var(--hairline), inset 0 1px 0 rgba(255, 250, 240, 0.04);
  transition: box-shadow 0.5s var(--ease);
}
/* A rim of light that finds the pointer, as on the buttons. */
.card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(236, 228, 214, 0.32), transparent 70%);
  -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 exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
.card:hover::after { opacity: 1; }
.scene-box { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.scene {
  position: absolute;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.card-text { padding: 0 26px 24px; }
.card-text h3 { margin: 0 0 8px; font: 400 25px/1.1 var(--serif); }
.card-text p { margin: 0; max-width: 40ch; color: var(--muted); font-size: 14.5px; line-height: 1.55; }

/* The moonset: a full-bleed scene, the heading standing on the horizon and the download on the water. */
main > section.get { height: 100vh; height: 100svh; min-height: 560px; padding: 0; }
.set-stage { position: relative; height: 100%; overflow: hidden; }
.set-stage.no-gl { background: radial-gradient(60vh 30vh at 70% 60%, #2a2622, var(--night) 70%); }
#moonset { position: absolute; left: 0; top: 0; image-rendering: pixelated; touch-action: pan-y; }
.set-title {
  position: absolute; left: 0; right: 0; margin: 0; text-align: center; pointer-events: none;
  font-size: min(112px, 8.6vw); line-height: 1; white-space: nowrap;
}
.set-title .probe { display: inline-block; width: 0; height: 0; }
/* Held upright, the words take two lines so the moon has room to set beside them. sky.js switches
   at the same shape. */
@media (max-aspect-ratio: 9 / 10) {
  .set-title { font-size: min(96px, 13.5vw); line-height: 0.95; white-space: normal; }
  .set-title em { display: block; }
}
.set-below {
  position: absolute; left: 0; right: 0; padding: clamp(40px, 9vh, 96px) var(--gutter) 0;
  display: flex; flex-direction: column; align-items: center; text-align: center; pointer-events: none;
}
.set-below > * { pointer-events: auto; }
.get .pill { margin-bottom: 20px; }
.get .fine + .fine { margin-top: 6px; }


.foot {
  display: flex; align-items: baseline; gap: 28px; flex-wrap: wrap;
  padding: 30px var(--gutter) max(34px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--hairline);
}
.foot-mark { font: 400 24px/1 var(--serif); margin-right: auto; }

/* Reveal on scroll, once. */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1.3s var(--ease), transform 1.3s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- small screens ---------- */
@media (max-width: 860px) {
  .nav-links a:not(.pill) { display: none; }
  .hero-below { gap: 14px; }
  .meta span { display: block; }
  .meta span + span::before { content: none; }
  .lyrics, .notes, .print { padding-bottom: 14vh; }
  .actions { flex-direction: column; gap: 14px; }
  .print, .lyrics { grid-template-columns: 1fr; }
  .lyrics-phone { justify-self: center; }
  .print { padding-top: 16vh; padding-bottom: 18vh; }
  .bento {
    grid-template-columns: 1fr;
    grid-template-areas: none;
    grid-auto-rows: auto;
  }
  .bento .card { grid-area: auto; height: 300px; }
  .bento .card-library, .bento .card-quiet { height: 400px; }
  .screens label { grid-template-columns: 18px 1fr; }
  .screen-note { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero { height: 100vh; height: 100svh; }
  .wordmark .ch, .hero-below > * { animation: none !important; opacity: 1; filter: none; transform: none; }
  .reveal { transition: none; opacity: 1; transform: none; }
}