/* Hallmark · macrostructure: split-studio · genre: editorial · theme: custom (Giftwrap)
 * nav: N9 edge-aligned minimal · hero: H2 split diptych 7/5 (proof column = gift-tag sample players)
 * features: F4 step sequence · faq: conversational · footer: Ft6 letter close (roman) · mobile cta: C4 sticky bottom bar
 * pre-emit critique: P4 H4 E4 S5 R4 V4
 */

/* ── base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; overflow-x: clip;
  background: var(--color-paper); color: var(--color-ink);
  font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55;
  font-kerning: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--font-display); font-style: normal; font-weight: 600; line-height: 1.08; letter-spacing: -0.015em; margin: 0; font-optical-sizing: auto; overflow-wrap: anywhere; min-width: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-sm); }
::selection { background: var(--color-accent-tint); color: var(--color-ink); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--space-4); top: -100px; background: var(--color-ink); color: var(--color-paper); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); z-index: var(--z-toast); }
.skip:focus-visible { top: var(--space-4); }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--page-gutter); }
.muted { color: var(--color-muted); }
.small { font-size: var(--text-sm); }
.tnum { font-variant-numeric: tabular-nums; }

/* ── nav (N9) ─────────────────────────────────────────────────────────── */
.nav-edge { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding-block: var(--space-5); }
.wordmark { font-family: var(--font-display); font-weight: 650; font-size: var(--text-lg); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; }
.wordmark svg { width: 22px; height: 22px; }

/* ── buttons: 8 states ────────────────────────────────────────────────── */
.btn {
  --btn-bg: transparent; --btn-fg: var(--color-ink); --btn-bd: var(--color-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-h); padding: 0 var(--space-6);
  border: 1px solid var(--btn-bd); border-radius: var(--radius-md);
  background: var(--btn-bg); color: var(--btn-fg);
  font: 600 var(--text-md)/1 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-instant) var(--ease-out), border-color var(--dur-short) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn-primary { --btn-bg: var(--color-accent); --btn-fg: var(--color-accent-ink); --btn-bd: var(--color-accent); }
.btn-outline { --btn-bg: transparent; }
.btn-ghost { --btn-bd: transparent; padding-inline: var(--space-3); }
.btn-sm { min-height: 44px; padding-inline: var(--space-4); font-size: var(--text-sm); }
.btn-block { width: 100%; }
@media (hover: hover) {
  .btn-primary:hover, .btn-primary.is-hover { --btn-bg: var(--color-accent-2); --btn-bd: var(--color-accent-2); transform: translateY(-1px); }
  .btn-outline:hover, .btn-outline.is-hover, .btn-ghost:hover { --btn-bg: var(--color-paper-2); }
}
.btn:focus-visible, .btn.is-focus { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn-primary:active, .btn-primary.is-active { --btn-bg: var(--color-accent-3); --btn-bd: var(--color-accent-3); transform: translateY(0); }
.btn-outline:active, .btn-outline.is-active { --btn-bg: var(--color-paper-3); transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[data-state="loading"] { cursor: progress; }
.btn[data-state="loading"]::before { content: ""; width: 1em; height: 1em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.8s linear infinite; }
.btn[data-state="error"] { --btn-bg: var(--color-error); --btn-bd: var(--color-error); --btn-fg: var(--color-accent-ink); }
.btn[data-state="success"] { --btn-bg: var(--color-success); --btn-bd: var(--color-success); --btn-fg: var(--color-accent-ink); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── hero (H2 split diptych, 7/5) ─────────────────────────────────────── */
.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-16); align-items: start; }
.split--flip > :first-child { order: 2; }
.hero { padding-block: var(--space-10) var(--space-24); }
.hero h1 { font-size: var(--text-2xl); font-weight: 600; line-height: 1.02; letter-spacing: -0.025em; max-width: 12ch; }
.hero h1 .name-mark { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.14em; text-decoration-color: var(--color-accent); }
.lede { font-size: var(--text-lg); line-height: 1.5; color: var(--color-ink-2); max-width: 44ch; margin-top: var(--space-6); }
.hero-cta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4) var(--space-6); margin-top: var(--space-8); }
.price-note { font-size: var(--text-sm); color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.facts { list-style: none; margin: var(--space-10) 0 0; padding: var(--space-5) 0 0; border-top: 1px solid var(--color-rule); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: var(--text-sm); color: var(--color-ink-2); }
.facts li { display: inline-flex; align-items: baseline; gap: var(--space-2); }
.facts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); transform: translateY(-2px); flex: none; }

.hero-proof { padding-top: var(--space-2); }
.proof-label { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-4); }

/* gift-tag sample players */
.tags { display: grid; gap: var(--space-5); }
.tag {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-4); align-items: center;
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-10);
  background: var(--color-paper-2); color: var(--color-ink);
  border: 1px solid var(--color-rule);
  clip-path: polygon(22px 0, 100% 0, 100% 100%, 22px 100%, 0 calc(100% - 22px), 0 22px);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.tag::before { /* the punched hole */
  content: ""; position: absolute; left: 13px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%;
  background: var(--color-paper); box-shadow: inset 0 0 0 1px var(--color-rule-2);
}
.tags .tag:nth-child(1) { transform: rotate(-1.2deg); }
.tags .tag:nth-child(2) { transform: rotate(0.8deg) translateX(var(--space-3)); }
.tags .tag:nth-child(3) { transform: rotate(-0.4deg); }
.tag h3, .tag-title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); line-height: 1.2; letter-spacing: -0.01em; }
.tag .meta { font-size: var(--text-sm); color: var(--color-muted); }
.tag .line { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--color-ink-2); font-style: italic; }
.tag .bar { grid-column: 1 / -1; }

/* ── player ───────────────────────────────────────────────────────────── */
.play {
  width: 48px; height: 48px; flex: none; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--color-accent); color: var(--color-accent-ink);
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-instant) var(--ease-out);
}
.play svg { width: 18px; height: 18px; }
.play .i-pause { display: none; }
.play[aria-pressed="true"] .i-play { display: none; }
.play[aria-pressed="true"] .i-pause { display: block; }
@media (hover: hover) { .play:hover, .play.is-hover { background: var(--color-accent-2); } }
.play:focus-visible, .play.is-focus { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 50%; }
.play:active, .play.is-active { background: var(--color-accent-3); transform: scale(0.97); }
.play:disabled { background: var(--color-rule-2); cursor: not-allowed; opacity: 0.7; }
.play[data-state="loading"] .i-play, .play[data-state="loading"] .i-pause { display: none; }
.play[data-state="loading"]::after { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.8s linear infinite; }
.play[data-state="error"] { background: var(--color-error); }
.bar { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.bar input[type="range"] { flex: 1; min-width: 0; height: 24px; margin: 0; background: transparent; accent-color: var(--color-accent); cursor: pointer; }
.player { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3) var(--space-4); align-items: center; padding: var(--space-5); background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-md); }
.player .play { width: 56px; height: 56px; }
.player .now { min-width: 0; }
.player .now strong { display: block; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; line-height: 1.2; }
.player .bar { grid-column: 1 / -1; }
.player .note { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--color-muted); }
.player[data-state="error"] .note { color: var(--color-error); }

/* ── sections ─────────────────────────────────────────────────────────── */
.section { padding-block: var(--space-20); border-top: 1px solid var(--color-rule); }
.section h2 { font-size: var(--text-xl); max-width: 18ch; }
.section .intro { margin-top: var(--space-4); color: var(--color-ink-2); max-width: 46ch; }

/* F4 step sequence */
.steps { list-style: none; margin: var(--space-10) 0 0; padding: 0; display: grid; gap: var(--space-8); }
.steps li { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 0 var(--space-4); }
.steps .stage { grid-row: span 2; font-family: var(--font-display); font-size: var(--text-xl); line-height: 1; color: var(--color-accent); font-variant-numeric: lining-nums; }
.steps h3 { font-size: var(--text-lg); line-height: 1.25; }
.steps p { margin-top: var(--space-2); color: var(--color-ink-2); max-width: 52ch; }

/* lyric sheet: ruled like a card */
.sheet {
  --line: 2rem;
  margin: 0; padding: var(--space-8) var(--space-8) var(--space-6);
  background-color: var(--color-paper-2);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--line) - 1px), var(--color-rule) calc(var(--line) - 1px), var(--color-rule) var(--line));
  background-position: 0 calc(var(--space-8) + 0.35rem);
  border: 1px solid var(--color-rule); border-radius: var(--radius-md);
  font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--line);
}
.sheet .sec { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted); line-height: var(--line); }
.sheet p { line-height: var(--line); }
.sheet .stanza + .sec { margin-top: var(--line); }
.sheet .nm { color: var(--color-accent); font-weight: 650; }
.sheet figcaption { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-muted); line-height: var(--line); margin-top: var(--line); }

/* who it's for */
.occasions { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.25; color: var(--color-ink-2); }
.occasions li:not(:last-child)::after { content: "·"; margin-left: var(--space-5); color: var(--color-accent); }

/* conversational FAQ */
.qa { margin: var(--space-10) 0 0; }
.qa > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3) var(--space-16); padding-block: var(--space-6); border-top: 1px solid var(--color-rule); }
.qa dt { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; line-height: 1.3; }
.qa dd { margin: 0; color: var(--color-ink-2); max-width: 58ch; }
.qa dd p + p { margin-top: var(--space-3); }

.closing { padding-block: var(--space-20) var(--space-24); border-top: 1px solid var(--color-rule); align-items: end; }
.closing h2 { font-size: var(--text-2xl); max-width: 14ch; }
.closing .act { display: grid; gap: var(--space-3); justify-items: start; }

/* ── footer (Ft6 letter close, roman) ─────────────────────────────────── */
.foot-letter { padding-block: var(--space-16) var(--space-12); border-top: 1px solid var(--color-rule); }
.foot-letter__close { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.25; }
.foot-letter__sign { font-weight: 650; }
.foot-letter__ps { margin-top: var(--space-6); max-width: 56ch; color: var(--color-ink-2); }
.legal { margin-top: var(--space-10); font-size: var(--text-xs); color: var(--color-muted); max-width: 72ch; }
.legal a { white-space: nowrap; }
.legal-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-3); font-size: var(--text-sm); }
.legal-links a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }

/* ── C4 sticky bottom bar (small screens) ─────────────────────────────── */
.cta-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  display: none; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) var(--page-gutter) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--color-paper); border-top: 1px solid var(--color-rule);
  transform: translateY(110%); transition: transform var(--dur-med) var(--ease-out);
}
.cta-sticky span { font-size: var(--text-sm); color: var(--color-ink-2); }
.cta-sticky.is-on { transform: translateY(0); }
@media (max-width: 47.99rem) { .cta-sticky { display: flex; } body.has-sticky { padding-bottom: 76px; } }

/* ── forms: inputs with 8 states, no layout shift ─────────────────────── */
.field { margin-bottom: var(--space-6); min-width: 0; }
.field > label, .label { display: block; font-weight: 600; font-size: var(--text-sm); margin-bottom: var(--space-2); }
.label .opt, .field > label .opt { font-weight: 400; color: var(--color-muted); }
.input {
  display: block; width: 100%; min-height: var(--control-h); padding: var(--space-3) var(--space-10) var(--space-3) var(--space-4);
  background: var(--color-paper); color: var(--color-ink);
  border: 1px solid var(--color-rule-2); border-radius: var(--radius-md);
  outline: 2px solid transparent; outline-offset: 1px;
  font: 400 var(--text-md)/1.4 var(--font-body);
  transition: background-color var(--dur-short) var(--ease-out);
  -webkit-appearance: none; appearance: none;
}
select.input { background-image: linear-gradient(45deg, transparent 50%, var(--color-ink-2) 50%), linear-gradient(135deg, var(--color-ink-2) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: var(--space-10); cursor: pointer; }
textarea.input { min-height: 6rem; resize: vertical; padding-right: var(--space-4); }
.input::placeholder { color: var(--color-muted); opacity: 1; }
@media (hover: hover) { .input:hover, .input.is-hover { background-color: var(--color-paper-2); } }
.input:focus-visible, .input.is-focus, .input:focus { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-ink-2); }
.input:disabled, .input.is-disabled { opacity: 0.55; cursor: not-allowed; }
.input[aria-invalid="true"] { border-color: var(--color-error); background-color: var(--color-error-tint); }
.input.is-valid { border-color: var(--color-success); }
.hint { margin-top: var(--space-1); min-height: 1lh; font-size: var(--text-sm); color: var(--color-muted); }
.hint.is-error { color: var(--color-error); font-weight: 500; }
.hint.is-error::before { content: "! "; font-weight: 700; }
.counter { float: right; font-size: var(--text-xs); color: var(--color-muted); font-variant-numeric: tabular-nums; }

fieldset { border: 0; padding: 0; margin: 0 0 var(--space-12); min-width: 0; }
legend { padding: 0; margin-bottom: var(--space-6); font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); line-height: 1.15; display: flex; align-items: baseline; gap: var(--space-3); }
legend .stage { color: var(--color-accent); font-variant-numeric: lining-nums; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--space-5); }

/* choice cards (radios) */
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice { position: relative; display: grid; gap: 2px; min-height: var(--control-h); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-rule-2); border-radius: var(--radius-md); background: var(--color-paper); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice b { font-weight: 600; font-size: var(--text-md); line-height: 1.3; }
.choice small { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.35; }
.choices--3 .choice { align-content: center; text-align: center; }
@media (hover: hover) { .choice:hover { background: var(--color-paper-2); } }
.choice:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-tint); box-shadow: inset 0 0 0 1px var(--color-accent); }
.choice:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.choice:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }
.choices[aria-invalid="true"] .choice { border-color: var(--color-error); }

.check { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-3); align-items: start; font-size: var(--text-sm); line-height: 1.5; cursor: pointer; padding-block: var(--space-2); }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--color-accent); cursor: pointer; }
.check input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.check[aria-invalid="true"] { color: var(--color-error); }

.alert { padding: var(--space-4) var(--space-5); border: 1px solid var(--color-error); background: var(--color-error-tint); border-radius: var(--radius-md); margin-bottom: var(--space-8); }
.alert h2 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.alert ul { margin: 0; padding-left: var(--space-5); }
.alert a { color: var(--color-error); font-weight: 600; }
.note-box { padding: var(--space-4) var(--space-5); border: 1px solid var(--color-rule); background: var(--color-paper-2); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--color-ink-2); }

/* make page */
.page-head { padding-block: var(--space-8) var(--space-10); }
.page-head h1 { font-size: var(--text-2xl); max-width: 14ch; }
.page-head p { margin-top: var(--space-4); font-size: var(--text-lg); color: var(--color-ink-2); max-width: 46ch; }
.form-layout { padding-bottom: var(--space-24); }
.aside-sticky { position: sticky; top: var(--space-8); display: grid; gap: var(--space-6); }
.summary .tag { transform: rotate(-1deg); }
.next { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-ink-2); counter-reset: n; }
.next li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); counter-increment: n; }
.next li::before { content: counter(n); font-family: var(--font-display); font-weight: 600; color: var(--color-accent); }
.fs-intro { margin: calc(var(--space-3) * -1) 0 var(--space-5); }
.tag-mark { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--color-accent-tint); color: var(--color-accent); }
.tag-mark svg { width: 22px; height: 22px; }
.submit { display: grid; gap: var(--space-3); justify-items: start; }
.ts { min-height: 0; }

/* song page */
.song-head { padding-block: var(--space-8) var(--space-8); }
.song-head .for { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-3); }
.song-head h1 { font-size: var(--text-2xl); max-width: 16ch; }
.song-layout { padding-bottom: var(--space-24); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "top aside" "words aside"; gap: var(--space-8) var(--space-16); align-items: start; }
.area-top { grid-area: top; } .area-aside { grid-area: aside; } .area-words { grid-area: words; }
.area-words:empty { display: none; }
@media (max-width: 56rem) { .song-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "aside" "words"; gap: var(--space-8); } }
.stack { display: grid; gap: var(--space-8); align-content: start; }
.progress { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.progress li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3); align-items: center; color: var(--color-muted); }
.progress li::before { content: ""; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--color-rule-2); justify-self: center; }
.progress li[data-s="done"] { color: var(--color-ink-2); }
.progress li[data-s="done"]::before { background: var(--color-success); border-color: var(--color-success); }
.progress li[data-s="now"] { color: var(--color-ink); font-weight: 600; }
.progress li[data-s="now"]::before { border-color: var(--color-accent); border-right-color: transparent; animation: spin 0.9s linear infinite; }
.card { padding: var(--space-6); background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-md); display: grid; gap: var(--space-4); }
.card h2 { font-size: var(--text-xl); }
.price { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-ink-2); }
.ticks li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); }
.ticks li::before { content: "✓"; color: var(--color-success); font-weight: 700; }
.fine { font-size: var(--text-xs); color: var(--color-muted); }
.versions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.versions button { min-height: 44px; padding: 0 var(--space-4); border: 1px solid var(--color-rule-2); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink); font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer; white-space: nowrap; }
.versions button[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent-tint); }
.versions button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
details.again { border-top: 1px solid var(--color-rule); padding-top: var(--space-4); }
details.again summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
details.again summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
details.again .body { display: grid; gap: var(--space-3); padding-top: var(--space-2); }
.share { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.copyline { display: flex; gap: var(--space-2); }
.copyline .input { font-size: var(--text-sm); padding-right: var(--space-4); }
.status-msg { min-height: 1lh; font-size: var(--text-sm); }
.status-msg.is-error { color: var(--color-error); }
.status-msg.is-ok { color: var(--color-success); }
.skeleton { height: 1.1em; border-radius: var(--radius-sm); background: var(--color-paper-3); }
.skeleton--name { display: inline-block; width: 10rem; vertical-align: middle; }

/* gift page */
.gift { padding-block: var(--space-12) var(--space-24); }
.gift .for { font-size: var(--text-sm); color: var(--color-muted); }
.gift h1 { font-size: var(--text-2xl); margin-top: var(--space-3); max-width: 14ch; }
.gift .from { margin-top: var(--space-3); font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-ink-2); }

/* legal pages */
.doc { padding-block: var(--space-8) var(--space-24); max-width: 72ch; }
.doc h1 { font-size: var(--text-2xl); }
.doc .updated { margin-top: var(--space-3); color: var(--color-muted); font-size: var(--text-sm); }
.doc h2 { font-size: var(--text-lg); margin-top: var(--space-10); }
.doc p, .doc ul, .doc ol, .doc table { margin-top: var(--space-3); }
.doc li + li { margin-top: var(--space-2); }
.doc table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
.doc th, .doc td { text-align: left; vertical-align: top; padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: 1px solid var(--color-rule); }
.table-scroll { overflow-x: auto; }

/* cookie choice */
.consent { position: fixed; z-index: var(--z-overlay); left: var(--space-4); bottom: var(--space-4); max-width: 420px; padding: var(--space-5); background: var(--color-paper); border: 1px solid var(--color-rule-2); border-radius: var(--radius-md); box-shadow: 0 8px 28px var(--color-shadow); display: grid; gap: var(--space-4); font-size: var(--text-sm); }
.consent .acts { display: flex; gap: var(--space-3); }
.consent .acts .btn { flex: 1; }
@media (max-width: 47.99rem) { .consent { left: var(--space-3); right: var(--space-3); bottom: calc(var(--space-3) + 76px); max-width: none; } }

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 56rem) {
  .split { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .split--flip > :first-child { order: 0; }
  .hero { padding-bottom: var(--space-16); }
  .qa > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .aside-sticky { position: static; }
  .summary { order: -1; }
  .closing { align-items: start; }
}
@media (max-width: 30rem) {
  .row { grid-template-columns: minmax(0, 1fr); }
  .choices { grid-template-columns: minmax(0, 1fr); }
  .choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tag { padding-left: var(--space-8); }
  .tags .tag:nth-child(2) { transform: rotate(0.8deg); }
  .sheet { padding: var(--space-6) var(--space-5) var(--space-5); background-position: 0 calc(var(--space-6) + 0.35rem); }
  .hero-cta .btn-primary { width: 100%; }
  .copyline { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .btn[data-state="loading"]::before, .play[data-state="loading"]::after, .progress li[data-s="now"]::before { animation: spin 2.4s linear infinite !important; }
}

@media print {
  .nav-edge, .foot-letter, .cta-sticky, .consent, .no-print, .player, .card, details.again { display: none !important; }
  body { background: none; }
  .song-layout { display: block; } .area-aside { display: none; }
  .sheet { border: 0; background: none; font-size: 15pt; }
}