/* Music Box — one strip of paper.
   The page is the punched strip the app plays: warm white stock, a pencil-grey grid in millimetres,
   real tunes punched through it, lying on the walnut table the box stands on. Around it, the site's
   own sheet: drafting paper, ink, Young Serif, and ruby for the reading line and the red pencil.
   The table, the strip and the app's screenshots look the same in the light and the dark scheme:
   they are objects, not surfaces. One unit of every drawing is one millimetre (--mm px on screen). */

@font-face {
  font-family: "Young Serif";
  src: url("/fonts/young-serif-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/fonts/eb-garamond-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/fonts/eb-garamond-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --paper: oklch(95.5% 0.016 82);
  --paper-deep: oklch(92.4% 0.02 80);
  --ink: oklch(23% 0.018 55);
  --soft: oklch(39% 0.02 58);
  --faint: oklch(47% 0.02 60);
  --rule: oklch(23% 0.018 55 / 0.16);
  --line: oklch(23% 0.018 55 / 0.62);
  --ruby: oklch(50% 0.19 18);
  /* the table: the app's walnut, grey-brown under a studio light */
  --table: oklch(33% 0.02 50);
  --table-deep: oklch(24% 0.018 48);
  --table-ink: oklch(92% 0.022 82);
  --table-soft: oklch(77% 0.026 76);
  --table-faint: oklch(66% 0.024 70);
  --table-line: oklch(92% 0.03 80 / 0.16);
  --lamp: oklch(85% 0.1 78);
  /* the strip: card stock, its printing, and the table seen through a hole */
  --strip: oklch(96.4% 0.014 88);
  --strip-print: oklch(42% 0.015 70 / 0.5);
  --strip-bar: oklch(34% 0.015 70 / 0.72);
  --strip-ink: oklch(30% 0.02 250 / 0.88);
  --strip-label: oklch(50% 0.012 250 / 0.14);
  --hole: oklch(25% 0.022 45);
  --read: oklch(58% 0.2 20);
  --serif: "Young Serif", "Songti SC", "Noto Serif CJK SC", Georgia, serif;
  --garamond: "EB Garamond", "Songti SC", "Noto Serif CJK SC", Georgia, serif;
  --sans: ui-sans-serif, -apple-system, "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* radii: the sheet's square corner, the app's pill, a phone's screen */
  --r-sheet: 2px;
  --r-pill: 999px;
  --r-screen: 30px;
  --grain: 0.05;
  --grain-blend: multiply;
  --shadow: oklch(23% 0.03 55 / 0.28);
  /* px to a millimetre in the stage, and where its reading line stands */
  --mm: 4;
  --read-x: calc(max(40px, (100vw - 1160px) / 2) + 104px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: oklch(18.5% 0.012 62);
    --paper-deep: oklch(15.8% 0.012 60);
    --ink: oklch(90% 0.02 82);
    --soft: oklch(75% 0.024 76);
    --faint: oklch(63% 0.024 70);
    --rule: oklch(90% 0.02 82 / 0.13);
    --line: oklch(90% 0.02 82 / 0.6);
    --ruby: oklch(68% 0.17 18);
    --table: oklch(29% 0.02 50);
    --table-deep: oklch(21% 0.018 48);
    --grain: 0.07;
    --grain-blend: screen;
    --shadow: oklch(5% 0.02 50 / 0.7);
  }
}

* { box-sizing: border-box; }
html { background: var(--paper); scroll-padding-top: 24px; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  touch-action: manipulation;
  overflow-x: hidden;
}
/* the homepage's paper grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: var(--grain);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background: var(--ruby); color: var(--paper); }
a { color: inherit; text-underline-offset: 5px; text-decoration-thickness: 1px; text-decoration-color: var(--line); }
a, button { transition: color 180ms var(--ease), text-decoration-color 180ms var(--ease); }
@media (hover: hover) {
  a:hover { color: var(--ruby); text-decoration-color: currentColor; }
}
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--ruby);
  outline-offset: 5px;
  border-radius: var(--r-sheet);
}
main { overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
figure, p, h1, h2, h3, dl, dd, ol, ul { margin: 0; }
ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; text-wrap: balance; }
h1 { font-size: clamp(60px, 9.2vw, 128px); line-height: 0.92; letter-spacing: -0.028em; margin-left: -0.04em; }
h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.12; letter-spacing: -0.022em; }
h3 { font-size: 20px; line-height: 1.35; letter-spacing: -0.012em; }
p { text-wrap: pretty; }
:lang(zh-Hans) h1 { letter-spacing: 0; line-height: 1.1; margin-left: 0; }
:lang(zh-Hans) h2, :lang(zh-Hans) h3 { letter-spacing: 0; line-height: 1.4; }
/* Songti at its bold weight stands beside Young Serif; at regular it reads as a different, thinner voice */
:lang(zh-Hans) :is(h1, h2, h3, .lead, .specs dd, .legend b, .questions dt, .tune-name, .now-title) { font-weight: 700; }
.shell { width: min(1160px, calc(100% - 80px)); margin-inline: auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute;
  left: 24px;
  top: -100px;
  z-index: 20;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  border-radius: var(--r-sheet);
}
.skip:focus { top: 12px; }

/* header: the homepage's quiet meta line, with the wordmark set as the logotype */
.site-header {
  min-height: 88px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: env(safe-area-inset-top);
}
.wordmark { font-family: "Young Serif", Georgia, serif; font-size: 24px; letter-spacing: -0.028em; text-decoration: none; white-space: nowrap; }
.wordmark span, .wm span { color: var(--ruby); }
.wm { font-family: "Young Serif", Georgia, serif; letter-spacing: -0.012em; color: var(--ink); }
.site-nav { display: flex; align-items: center; gap: 28px; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--soft); }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.site-nav .language { text-transform: none; letter-spacing: 0; color: var(--ink); }

.eyebrow {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--soft);
}
/* captions: Garamond italic, as lettered under a plate; the number upright */
figcaption {
  font-family: var(--garamond);
  font-style: italic;
  color: var(--faint);
  font-size: 16px;
  line-height: 1.45;
  margin-top: 16px;
  max-width: 34em;
  text-wrap: pretty;
}
figcaption b { font-style: normal; font-weight: 400; color: var(--ink); margin-right: 0.5em; font-variant-caps: all-small-caps; letter-spacing: 0.04em; font-size: 1.08em; }
:lang(zh-Hans) figcaption { font-style: normal; font-size: 14px; line-height: 1.6; }
:lang(zh-Hans) figcaption b { font-size: 1em; letter-spacing: 0; font-variant-caps: normal; }

/* the head of the sheet: the name large on the left, what it is on the right */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  column-gap: 64px;
  align-items: end;
  padding-block: 56px 64px;
}
.hero h1 { margin-top: 24px; }
.lead { font-family: var(--serif); font-size: clamp(22px, 2.1vw, 27px); line-height: 1.35; letter-spacing: -0.012em; max-width: 19em; }
:lang(zh-Hans) .lead { letter-spacing: 0; line-height: 1.6; }
.description { color: var(--soft); max-width: 31em; margin-top: 16px; }
/* the call to action, once the app is out: inked in, square as the sheet's corner */
.store {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: 28px;
  padding: 0 24px;
  border-radius: var(--r-sheet);
  background: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: -0.005em;
  color: var(--paper);
  text-decoration: none;
  transition: background-color 180ms var(--ease), transform 160ms var(--ease);
}
:lang(zh-Hans) .store { letter-spacing: 0; font-size: 16px; font-weight: 700; }
@media (hover: hover) {
  .store:hover { color: var(--paper); background: var(--ruby); }
}
.store:active { transform: scale(0.98); }
/* a punched hole, in ruby, before the line that says when */
.availability { display: flex; align-items: center; gap: 10px; margin-top: 24px; font-size: 13px; color: var(--soft); }
.availability::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ruby); flex: none; }

/* the stage: the walnut table across the whole page, and one strip on it */
.stage {
  position: relative;
  color: var(--table-ink);
  padding-block: 64px 36px;
  overflow: hidden;
  background:
    radial-gradient(120% 150% at 22% -30%, oklch(100% 0 0 / 0.1), transparent 58%),
    linear-gradient(178deg, var(--table), var(--table-deep));
  -webkit-user-select: none;
  user-select: none;
}
/* the grain of the wood: noise drawn out along the table */
.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='300'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0035 0.34' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  1.6 0 0 0 -0.3'/%3E%3C/filter%3E%3Crect width='900' height='300' filter='url(%23w)'/%3E%3C/svg%3E");
  background-size: 900px 300px;
}
.feed { position: relative; height: calc(70px * var(--mm)); }
/* the strip waits with its leading edge 16 mm short of the reading line, as it waits at the feed slot
   (START in box.js, which takes the strip over from here) */
.paper-holder {
  position: absolute;
  left: var(--read-x);
  top: 0;
  transform: translate3d(calc(16px * var(--mm)), 0, 0);
}
.paper {
  display: block;
  height: calc(70px * var(--mm));
  width: calc(var(--len) * var(--mm) * 1px);
  border-radius: 2px;
  box-shadow: 0 1px 2px oklch(10% 0.02 50 / 0.5), 0 14px 22px -10px oklch(8% 0.02 50 / 0.7);
}
.pp-sheet { fill: var(--strip); }
.pp-lines, .pp-bars, .pp-feed { fill: none; stroke: var(--strip-print); stroke-width: 0.13; }
.pp-half { stroke-dasharray: 0.8 0.8; }
.pp-bars { stroke: var(--strip-bar); stroke-width: 0.2; }
.pp-feed { stroke: var(--strip-ink); stroke-width: 0.26; stroke-linecap: round; stroke-linejoin: round; }
.pp-label { fill: var(--strip-label); }
.pp-title { fill: var(--strip-ink); font-family: var(--sans); font-weight: 600; text-anchor: middle; }
.pp-names text { fill: oklch(45% 0.012 70 / 0.85); font-family: var(--sans); font-size: 2.3px; text-anchor: end; }
.pp-numbers text { fill: oklch(40% 0.012 70 / 0.8); font-family: var(--garamond); font-style: italic; font-size: 3.1px; font-variant-numeric: lining-nums; }
/* a hole: the table, with the paper's cut edge catching the light */
.pp-holes circle { fill: var(--hole); stroke: oklch(80% 0.03 80); stroke-width: 0.12; }
/* the line the star wheels stand on: a hole sounds as it crosses */
.reading {
  position: absolute;
  left: var(--read-x);
  top: -20px;
  bottom: -20px;
  width: 2px;
  margin-left: -1px;
  background: var(--read);
  pointer-events: none;
}
.reading::before, .reading::after {
  content: "";
  position: absolute;
  left: -4px;
  border: 5px solid transparent;
}
.reading::before { top: -1px; border-top-color: var(--read); }
.reading::after { bottom: -1px; border-bottom-color: var(--read); }
.reading span {
  position: absolute;
  left: 12px;
  top: -14px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--table-soft);
}
:lang(zh-Hans) .reading span { font-size: 12px; letter-spacing: 0.1em; }
.ping {
  position: absolute;
  left: var(--read-x);
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 2px solid var(--read);
  pointer-events: none;
  animation: ping 520ms cubic-bezier(0.2, 0, 0, 1) both;
}
@keyframes ping {
  from { opacity: 1; transform: scale(0.45); }
  to { opacity: 0; transform: scale(2.1); }
}
@keyframes feed-in {
  from { opacity: 0; transform: translate3d(48px, 0, 0); }
  to { opacity: 1; transform: none; }
}
.paper { animation: feed-in 900ms 120ms var(--ease) both; }

/* under the strip: what is on it, the app's own buttons, and the crank */
.desk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  column-gap: 40px;
  align-items: center;
  margin-top: 44px;
}
.now-title { font-family: var(--serif); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.25; letter-spacing: -0.012em; }
:lang(zh-Hans) .now-title { letter-spacing: 0; }
.now-facts { margin-top: 6px; font-size: 14px; color: var(--table-soft); font-variant-numeric: tabular-nums; min-height: 1.7em; }
.stage-note { margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--table-faint); max-width: 36em; }
.controls { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
  min-height: 44px;
  min-width: 76px;
  padding: 0 20px;
  border: 1px solid var(--table-line);
  border-radius: var(--r-pill);
  background: oklch(19% 0.014 50 / 0.86);
  color: var(--table-ink);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 180ms var(--ease), color 180ms var(--ease), transform 160ms var(--ease);
}
.pill:active { transform: scale(0.96); }
.pill[data-on] { background: var(--lamp); border-color: transparent; color: oklch(24% 0.03 60); }
.pill[aria-pressed="false"] { color: var(--table-faint); }
@media (hover: hover) {
  .pill:not([data-on]):hover { background: oklch(14% 0.014 50 / 0.92); }
}
.stage :is(.pill, .crank):focus-visible { outline-color: var(--lamp); border-radius: var(--r-pill); }
.crank {
  position: relative;
  width: 132px;
  height: 132px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.crank:active { cursor: grabbing; }
.crank svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ck-track { fill: none; stroke: var(--lamp); stroke-width: 1.6; stroke-dasharray: 5 5; stroke-linecap: round; opacity: 0.75; }
.ck-head { fill: var(--lamp); opacity: 0.9; }
.ck-arm { transform-box: view-box; transform-origin: 60px 60px; transform: rotate(-52deg); }
.ck-rod { stroke: oklch(80% 0.006 80); stroke-width: 5; stroke-linecap: round; }
.ck-hub { fill: oklch(64% 0.008 80); stroke: oklch(18% 0.01 50); stroke-width: 1; }
.ck-knob { fill: oklch(30% 0.008 60); stroke: oklch(12% 0.01 50); stroke-width: 1; }
.ck-shine { fill: none; stroke: oklch(86% 0.006 80 / 0.7); stroke-width: 1.4; stroke-linecap: round; }
.crank-hint {
  position: absolute;
  right: -6px;
  bottom: -4px;
  padding: 3px 10px 4px;
  border-radius: var(--r-pill);
  background: oklch(19% 0.014 50 / 0.86);
  color: var(--lamp);
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
}
/* until the script runs (or without it) the strip lies still: nothing to press */
main:not([data-live]) :is(.controls, .crank, .stage-note, .live-only) { display: none; }
main:not([data-live]) .tune { cursor: default; }

/* the songbook: a ledger under the table; each tune has a hole, and the one on the strip is punched */
.songbook {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  column-gap: 64px;
  align-items: start;
  padding-block: 72px 104px;
}
.songbook-head h2 { margin-top: 18px; }
.songbook-head p:not(.eyebrow) { color: var(--soft); margin-top: 18px; max-width: 26em; }
.tunes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 36px; }
.tunes li { border-top: 1px solid var(--rule); }
.tunes li:nth-last-child(-n + 3) { border-bottom: 1px solid var(--rule); }
.tune {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 2px;
  align-items: baseline;
  width: 100%;
  min-height: 68px;
  padding: 12px 0 13px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tune::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--line);
  align-self: center;
  grid-row: 1;
  transition: background-color 180ms var(--ease), border-color 180ms var(--ease);
}
.tune[aria-pressed="true"]::before { background: var(--ruby); border-color: var(--ruby); }
.tune-name { font-family: var(--serif); font-size: 19px; line-height: 1.3; letter-spacing: -0.012em; }
:lang(zh-Hans) .tune-name { letter-spacing: 0; font-size: 18px; }
.tune-facts { grid-column: 2; font-size: 12px; line-height: 1.4; letter-spacing: 0.02em; color: var(--soft); font-variant-numeric: tabular-nums; }
@media (hover: hover) {
  main[data-live] .tune:hover .tune-name { color: var(--ruby); }
  main[data-live] .tune:hover::before { border-color: var(--ruby); }
}

.section { padding-block: 104px; border-top: 1px solid var(--rule); }
.section h2 { margin-top: 18px; }
.copy p:not(.eyebrow) { color: var(--soft); margin-top: 18px; max-width: 31em; }

/* the app's own screenshots: whole screens, at a phone's corner radius */
.plate img {
  width: 100%;
  border-radius: var(--r-screen);
  box-shadow: 0 2px 4px -1px var(--shadow), 0 28px 44px -28px var(--shadow);
  outline: 1px solid oklch(100% 0 0 / 0.08);
  outline-offset: -1px;
}

/* the box: the movement as the app shows it, and what it measures */
.box { display: grid; grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr); gap: 56px 96px; align-items: center; }
.box .plate { max-width: 372px; }
.specs {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--line);
}
.specs div { padding: 18px 24px 20px 0; }
.specs div + div { padding-left: 24px; box-shadow: inset 1px 0 var(--rule); }
.specs dt { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--soft); margin-bottom: 6px; }
.specs dd { font-family: var(--serif); font-size: 20px; line-height: 1.35; letter-spacing: -0.012em; }
:lang(zh-Hans) .specs dt { font-size: 12px; letter-spacing: 0.04em; }
:lang(zh-Hans) .specs dd { letter-spacing: 0; }

/* punching: the rules of the grid, drawn and dimensioned in red pencil */
.punch { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.68fr); gap: 56px 88px; align-items: start; }
.punch .plate { grid-column: 2; grid-row: 1 / span 2; max-width: 340px; justify-self: end; }
.rules-figure { max-width: 640px; }
.punch-drawing { display: block; width: 100%; height: auto; overflow: visible; }
.punch-drawing .pp-sheet { stroke: var(--rule); stroke-width: 0.12; filter: drop-shadow(0 0.5px 0.6px var(--shadow)); }
.pf-silent { fill: none; stroke: var(--ruby); stroke-width: 0.22; stroke-dasharray: 0.7 0.5; }
/* tape torn off by hand never goes on straight */
.pf-tape { fill: oklch(86% 0.06 88 / 0.86); stroke: oklch(55% 0.05 80 / 0.5); stroke-width: 0.1; }
.dm-line, .dm-ext { stroke: var(--ruby); stroke-width: 0.16; fill: none; }
.dm-ext { opacity: 0.7; }
.dm-arrow { fill: var(--ruby); }
.dm-text { fill: var(--ruby); font-family: var(--garamond); font-variant-numeric: lining-nums tabular-nums; font-size: 2.7px; text-anchor: middle; }
.dm-text-side { text-anchor: end; }
.pf-tag circle { fill: var(--paper); stroke: var(--ink); stroke-width: 0.16; }
.pf-tag text { fill: var(--ink); font-family: var(--garamond); font-size: 2.6px; text-anchor: middle; }
.legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; margin-top: 36px; }
.legend li:nth-last-child(2) { border-bottom: 1px solid var(--rule); }
.legend li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 8px; align-items: baseline; align-content: start; padding-block: 12px; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.6; color: var(--soft); }
.legend li:last-child { border-bottom: 1px solid var(--rule); }
.legend b { display: block; font-family: var(--serif); font-weight: 400; font-size: 17px; letter-spacing: -0.005em; color: var(--ink); }
.tag {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font-family: var(--garamond);
  font-size: 16px;
  line-height: 1;
  color: var(--ink);
  grid-row: 1 / span 2;
  align-self: start;
  margin-top: 2px;
}

/* sending: two screens of the gift, and its link taken apart */
.send { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px 88px; align-items: start; }
.gift-plates { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.gift-plates .plate:nth-child(2) { margin-top: 72px; }
.gift-plates .plate img { border-radius: 22px; }
.link-figure { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--rule); }
.link-anatomy { display: grid; gap: 22px; }
.link-part { display: grid; width: fit-content; max-width: 100%; }
.link-part code {
  font-family: var(--mono);
  font-size: clamp(12.5px, 1.1vw, 14px);
  line-height: 1.55;
  overflow-wrap: anywhere;
  padding-bottom: 10px;
}
.link-strip code { color: var(--ruby); }
/* a dimension line under each part, with its two witness ticks */
.link-note {
  position: relative;
  border-top: 1px solid currentColor;
  padding-top: 9px;
  font-family: var(--garamond);
  font-style: italic;
  font-size: 17px;
  line-height: 1.4;
  color: var(--soft);
}
.link-note::before, .link-note::after { content: ""; position: absolute; top: -6px; height: 11px; border-left: 1px solid currentColor; }
.link-note::before { left: 0; }
.link-note::after { right: 0; }
.link-strip .link-note { color: var(--ruby); }
:lang(zh-Hans) .link-note { font-style: normal; font-size: 14px; }
.link-keys { margin-top: 28px; }
.link-keys dl { display: grid; gap: 2px; }
.link-keys dl div { display: grid; grid-template-columns: 5.4em minmax(0, 1fr); gap: 12px; align-items: baseline; }
.link-keys dt { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--soft); }
:lang(zh-Hans) .link-keys dt { font-size: 12px; letter-spacing: 0.04em; }
.link-keys dd { font-size: 15px; color: var(--ink); }
.text-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; font-size: 14px; text-decoration-color: var(--ruby); }

/* support: the address is the anchor; the questions are the sheet's notes */
.support { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 96px; align-items: start; }
.support-intro p:not(.eyebrow) { margin-top: 20px; color: var(--soft); font-size: 15px; max-width: 28em; }
.mail {
  display: inline-block;
  margin-top: 6px;
  font-family: "Young Serif", Georgia, serif;
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: -0.012em;
  line-height: 1.3;
  text-decoration-color: var(--ruby);
  text-underline-offset: 7px;
  overflow-wrap: anywhere;
}
.questions { counter-reset: note; }
.questions div {
  counter-increment: note;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 12px;
  padding-block: 24px;
  border-top: 1px solid var(--rule);
}
.questions div:first-child { border-top: 0; padding-top: 6px; }
.questions div::before {
  content: counter(note) ".";
  grid-row: 1 / span 2;
  font-family: var(--garamond);
  font-style: italic;
  font-variant-numeric: lining-nums;
  font-size: 24px;
  line-height: 1.2;
  color: var(--ruby);
}
.questions dt { font-family: var(--serif); font-size: 20px; line-height: 1.4; letter-spacing: -0.012em; }
:lang(zh-Hans) .questions dt { letter-spacing: 0; font-size: 19px; }
.questions dd { margin-top: 8px; color: var(--soft); font-size: 15px; max-width: 36em; }

.site-footer {
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 24px;
  padding-block: 16px calc(32px + env(safe-area-inset-bottom));
  font-size: 13px;
  color: var(--soft);
}
.site-footer .wm { font-size: 15px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 24px; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; }

/* privacy pages */
.legal-header { padding-block: 64px 48px; max-width: 800px; }
.legal-header h1 { font-size: clamp(40px, 5.6vw, 72px); line-height: 1.05; }
:lang(zh-Hans) .legal-header h1 { line-height: 1.3; letter-spacing: 0; }
.legal-header .lead { font-family: var(--sans); font-size: 18px; line-height: 1.7; letter-spacing: 0; font-weight: 400; max-width: 34em; margin-top: 28px; color: var(--soft); }
.legal-layout { display: grid; grid-template-columns: 220px minmax(0, 720px); gap: 72px; padding-bottom: 96px; align-items: start; }
.legal-index { position: sticky; top: 24px; font-size: 14px; }
.legal-index a { display: inline-flex; align-items: center; min-height: 40px; color: var(--soft); text-decoration: none; font-variant-numeric: tabular-nums; }
.legal-body section { border-top: 1px solid var(--rule); padding-top: 32px; margin-top: 40px; }
.legal-body section:first-child { margin-top: 0; }
.legal-body h2 { font-size: 26px; line-height: 1.3; letter-spacing: -0.012em; }
.legal-body p, .legal-body ul { margin-top: 16px; }
.legal-body p, .legal-body li { color: var(--soft); }
.legal-body ul { padding-left: 22px; margin-bottom: 0; }
.legal-body li + li { margin-top: 8px; }
.legal-body li::marker { color: var(--ruby); }
.legal-body strong { color: var(--ink); font-weight: 600; }
.legal-body a { text-decoration-color: var(--ruby); }

/* entrance, as on the homepage */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}
.rise { animation: rise 700ms var(--ease) both; }
.hero-name .rise:nth-child(2) { animation-delay: 90ms; }
.hero-what .rise:nth-child(1) { animation-delay: 180ms; }
.hero-what .rise:nth-child(2) { animation-delay: 240ms; }
.hero-what .rise:nth-child(3) { animation-delay: 300ms; }
.hero-what .rise:nth-child(4) { animation-delay: 360ms; }
@media (prefers-reduced-motion: reduce) {
  .rise, .paper { animation: none; }
  .ping { animation-duration: 1ms; }
  .pill, .store { transition: none; }
}

@media (max-width: 1080px) {
  .songbook { grid-template-columns: 1fr; row-gap: 36px; }
  .songbook-head p:not(.eyebrow) { max-width: 34em; }
  .box { gap: 48px 56px; }
  .punch, .send { gap: 48px 48px; }
  .support { gap: 48px; }
  .legal-layout { grid-template-columns: 170px minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 760px) {
  :root { --mm: 3.2; --read-x: 52px; }
  .shell { width: calc(100% - 40px); }
  .site-header { min-height: 72px; gap: 12px; }
  .wordmark { font-size: 22px; }
  .site-nav { gap: 18px; font-size: 12px; }
  .hero { grid-template-columns: 1fr; row-gap: 28px; padding-block: 24px 44px; }
  .stage { padding-block: 52px 28px; }
  .desk { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 20px; margin-top: 36px; }
  .now { grid-column: 1 / -1; }
  .crank { width: 116px; height: 116px; }
  .songbook { padding-block: 52px 72px; }
  .tunes { grid-template-columns: 1fr; }
  .tunes li:nth-last-child(-n + 3) { border-bottom: 0; }
  .tunes li:last-child { border-bottom: 1px solid var(--rule); }
  .tune { min-height: 60px; }
  .section { padding-block: 72px; }
  .box, .punch, .send, .support { grid-template-columns: 1fr; gap: 44px; }
  /* the words first, then what they describe */
  .box .copy, .send .copy { order: -1; }
  .box .plate, .punch .plate { max-width: 300px; justify-self: center; }
  .punch .plate { grid-column: auto; grid-row: auto; }
  .specs { grid-template-columns: 1fr 1fr; }
  .specs div { padding: 16px 12px 16px 0; }
  .specs div + div { padding-left: 0; box-shadow: none; }
  .specs div:nth-child(even) { padding-left: 16px; box-shadow: inset 1px 0 var(--rule); }
  .specs div:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .specs dd { font-size: 18px; }
  .legend { grid-template-columns: 1fr; }
  .legend li:nth-last-child(2) { border-bottom: 0; }
  .gift-plates { gap: 16px; }
  .gift-plates .plate:nth-child(2) { margin-top: 44px; }
  .gift-plates .plate img { border-radius: 16px; }
  .legal-header { padding-top: 32px; }
  .legal-layout { grid-template-columns: 1fr; gap: 32px; }
  .legal-index { position: static; }
  .legal-index ol { display: flex; flex-wrap: wrap; column-gap: 20px; }
  .site-footer { flex-direction: column; align-items: flex-start; gap: 0; }
}