/* ===== Tokens ===== */
:root {
  --night-950: #000;
  --night-900: #000;
  --night-800: #0f0e16;
  --night-700: #1b1a26;
  --night-600: #2c2a3a;
  --cream: #fbf4e4;
  --cream-2: #f5ead3;
  --cream-line: #e6d6b4;
  --ink: #1d1a33;
  --ink-soft: #57516e;
  --on-night: #eef0ff;
  --on-night-soft: #b9b4cf;

  --gold: #f7c548;
  --gold-soft: #ffe7a3;
  --gold-deep: #c8901c;
  --red: #e9423a;
  --orange: #f39a2b;
  --purple: #8b55c4;
  --teal: #23b2a1;
  --pink: #f06aa0;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: 22px;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(72px, 10vw, 128px);
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--on-night);
  background: var(--night-900);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.08; font-weight: 700; }
h1, h2 { font-family: var(--serif); letter-spacing: -0.015em; font-optical-sizing: auto; text-wrap: balance; }
h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
h3 { font-size: 1.12rem; font-family: var(--sans); font-weight: 700; letter-spacing: -0.005em; }
p { margin: 0; }
em { font-style: italic; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--gold); color: var(--ink); padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.night { background: transparent; color: var(--on-night); }
.sky { position: fixed; inset: 0 0 auto; width: 100%; height: 100lvh; z-index: -1; pointer-events: none; }
.sky g:last-child { transition: opacity .8s ease; }
.sky.calm g:last-child { opacity: .4; }
.sky.calm .const { opacity: .1; }
.cream { background: var(--cream); color: var(--ink); }
.cream-2 { background: var(--cream-2); color: var(--ink); }

section { position: relative; padding-block: var(--section-y); }

.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: 18px;
}
.kicker::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; }
.kicker-gold { color: var(--gold); }
.kicker-pink { color: var(--pink); }
.kicker-purple { color: var(--purple); }
.kicker-teal { color: #14907f; }
.kicker-orange { color: #d9760c; }
.cream .kicker::before, .cream-2 .kicker::before { box-shadow: none; }

.lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); line-height: 1.6; color: var(--on-night-soft); max-width: 36em; }
.cream .lead, .cream-2 .lead { color: var(--ink-soft); }

.section-head { margin-bottom: clamp(36px, 5vw, 56px); }
.section-head.center { text-align: center; }
.section-head.center .lead { margin-inline: auto; }
.section-head h2 { margin-bottom: 18px; }

.serif-rule { margin-bottom: 22px; }
.serif-rule::after { content: ""; display: block; width: 72px; height: 3px; margin-top: 20px; border-radius: 3px; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }

/* One colour per letter, as in the logo (assets/ucoolele-logo.svg). */
.logo-word > :nth-child(1), .logo-word > :nth-child(8) { color: #ffa422; }
.logo-word > :nth-child(2), .logo-word > :nth-child(5) { color: #872d8d; }
.logo-word > :nth-child(3), .logo-word > :nth-child(6) { color: #f55323; }
.logo-word > :nth-child(4), .logo-word > :nth-child(7) { color: #16aa9a; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  font: 700 1rem/1 var(--sans); text-decoration: none; white-space: nowrap;
  border: 2px solid transparent; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-gold { background: var(--gold); color: var(--ink); box-shadow: 0 8px 28px -8px rgba(247, 197, 72, .7); }
.btn-gold:hover { box-shadow: 0 12px 34px -8px rgba(247, 197, 72, .9); }
.btn-ghost { color: var(--on-night); border-color: rgba(238, 240, 255, .28); }
.btn-ghost:hover { border-color: var(--on-night); }
.btn-ink { background: var(--ink); color: var(--cream); }
.btn-line { color: var(--ink); border-color: rgba(29, 26, 51, .28); }   /* the quieter button on cream */
.btn-line:hover { border-color: var(--ink); }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: .92rem; }
.btn-block { width: 100%; }
.btn-note { font-weight: 600; font-size: .85rem; padding: 4px 9px; border-radius: 999px; background: rgba(29, 26, 51, .12); }

/* ===== Header ===== */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; transition: background-color .3s ease, box-shadow .3s ease; }
.site-header.scrolled { background: rgba(0, 0, 0, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand img { width: 128px; height: auto; }
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav a:not(.btn) { color: var(--on-night-soft); text-decoration: none; font-weight: 600; font-size: .95rem; transition: color .15s; }
.site-nav a:not(.btn):hover { color: var(--on-night); }
.nav-toggle { display: none; }
@media (max-width: 1100px) { .site-nav { gap: 20px; } }   /* seven links: room for the logo until the menu folds up at 900px */
.header-inner { gap: 10px; }
.header-inner .brand { margin-right: auto; }

/* The language flags (lang.js): English and Croatian, the page's own one lit; a tap goes to the
   other copy of the page. Last in the header (on the home page, last in the menu). */
.lang-switch {
  order: 1; display: inline-flex; align-items: center; gap: 6px; height: 42px; margin-left: 8px; padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: rgba(0, 0, 0, .5); transition: border-color .15s;
}
.lang-switch:hover { border-color: rgba(255, 255, 255, .45); }
.lang-switch img { width: 22px; height: 22px; border-radius: 50%; opacity: .35; filter: saturate(.3); transition: opacity .15s, filter .15s; }
.lang-switch img.now { opacity: 1; filter: none; box-shadow: 0 0 0 2px var(--gold); }
.lang-switch:hover img:not(.now) { opacity: .8; filter: none; }
@media (max-width: 900px) {
  .lang-switch { order: 0; margin-left: 0; }
  /* on the home page the flags are the menu's last row (the cover's big logo leaves no room
     beside the menu button): only the other language, its flag and its name */
  .site-nav a.lang-switch {
    height: auto; margin-top: 10px; padding: 16px 10px 4px; gap: 8px;
    border: 0; border-top: 1px solid rgba(255, 255, 255, .08); border-radius: 0; background: none;
  }
  .site-nav .lang-switch img.now { display: none; }
  .site-nav .lang-switch img { opacity: 1; filter: none; }
  .site-nav .lang-name { display: inline; margin-left: 4px; }
}
.lang-name { display: none; }
/* the "Back to Ucoolele" button keeps only its arrow on phones, to fit beside the flags */
@media (max-width: 480px) {
  .btn-back { width: 42px; padding: 0; }
  .btn-back .back-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (max-width: 900px) {
  .nav-toggle {
    display: grid; place-content: center; gap: 6px; width: 46px; height: 46px; padding: 0;
    border: 1px solid rgba(255, 255, 255, .2); border-radius: 14px; background: rgba(0, 0, 0, .5); cursor: pointer;
  }
  .nav-toggle span:not(.sr) { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--on-night); transition: transform .2s; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
  .site-nav {
    position: absolute; top: 76px; left: 12px; right: 12px;
    flex-direction: column; align-items: stretch; gap: 4px; padding: 14px;
    background: var(--night-800); border: 1px solid rgba(255, 255, 255, .08); border-radius: 20px;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .7);
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s, transform .2s, visibility .2s;
  }
  .site-nav.open { opacity: 1; visibility: visible; transform: none; }
  .site-nav a:not(.btn) { padding: 12px 10px; font-size: 1.05rem; }
  .site-nav .btn { margin-top: 8px; min-height: 50px; }
}

/* A slim ukulele neck at the right edge: strings run down it, each section is a fret with
   an LED (lit for the section on screen), and a star slides down with the scroll. Only where
   it clears the content column. */
.fret-rail { display: none; }
@media (min-width: 1240px) {
  .fret-rail {
    display: block; position: fixed; right: 14px; top: 50%; translate: 0 -50%; z-index: 40;
    width: 28px; padding: 14px 0; border-radius: 999px;
    background: rgba(15, 14, 22, .88); border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .6);
  }
  .fret-rail::before {   /* the four strings */
    content: ""; position: absolute; top: 10px; bottom: 10px; left: 50%; width: 13px; translate: -50% 0; pointer-events: none;
    background: repeating-linear-gradient(90deg, rgba(232, 224, 200, .32) 0 1px, transparent 1px 4px);
  }
  .fret-rail ol { list-style: none; margin: 0; padding: 0; }
  .fret-rail li + li { border-top: 2px solid rgba(232, 224, 200, .2); }   /* a fret wire */
  .fret-rail a { position: relative; display: block; height: 40px; outline-offset: 2px; }
  .fret-rail a::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; translate: -50% -50%; border-radius: 50%;
    background: rgba(255, 255, 255, .2); transition: background-color .3s, box-shadow .3s, scale .3s;
  }
  .fret-rail a.on::before { background: var(--c); box-shadow: 0 0 0 2px rgba(255, 255, 255, .25), 0 0 14px var(--c); scale: 1.25; }
  .fret-rail a span {
    position: absolute; right: calc(100% + 12px); top: 50%; translate: 4px -50%; white-space: nowrap; pointer-events: none;
    padding: 6px 12px; border-radius: 999px; background: var(--night-800); color: var(--on-night); font-size: .8rem; font-weight: 600;
    opacity: 0; transition: opacity .2s, translate .2s;
  }
  .fret-rail a:hover span, .fret-rail a:focus-visible span { opacity: 1; translate: 0 -50%; }
  .rail-star {
    position: absolute; left: 50%; top: calc(14px + var(--p, 0) * (100% - 28px)); width: 12px; height: 12px; translate: -50% -50%; pointer-events: none;
    background: var(--gold); filter: drop-shadow(0 0 5px var(--gold));
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  }
}

/* ===== Hero ===== */
.home-header:not(.logo-away) .brand { opacity: 0; pointer-events: none; }
.brand { transition: opacity .3s ease; }
.hero { min-height: 100svh; padding-top: 104px; padding-bottom: 0; overflow: hidden; display: flex; align-items: stretch; }
.sky-art { position: absolute; inset: 0; pointer-events: none; }
/* Empty boxes that place the constellations; main.js lights them on the sky grid.
   On desktop they spread around the hero; in the cover layout the two notes
   flank the neck from inside .uke-box instead. */
.cluster { position: absolute; }
.cluster-star { top: 12%; left: 85%; width: clamp(60px, 6vw, 100px); aspect-ratio: 1; }
.cluster-pair { top: 10%; left: 45%; width: clamp(68px, 6.8vw, 105px); aspect-ratio: 416 / 480; }
.cluster-purple { top: 48%; left: 93%; width: clamp(36px, 3.4vw, 54px); aspect-ratio: 325 / 450; }
.cluster-teal { top: 88%; left: 45%; width: clamp(38px, 3.8vw, 60px); aspect-ratio: 20 / 24; }
.cluster-orange { top: 30%; left: 3%; width: clamp(28px, 2.6vw, 42px); aspect-ratio: 13 / 24; }

.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: center; }
.hero-copy { padding-bottom: 80px; }
.hero-logo { width: clamp(220px, 30vw, 400px); margin: 0 0 26px -6px; }
.dot-title {
  font-family: "Doto", var(--sans); font-weight: 900; font-variation-settings: "ROND" 100;
  font-size: clamp(2.5rem, 5.6vw, 4.7rem); line-height: 1.02; letter-spacing: .02em; text-transform: uppercase;
  color: #ffd23f; text-shadow: 0 0 18px rgba(255, 196, 40, .55), 0 0 2px rgba(255, 230, 150, .9);
  margin-bottom: 14px;
}
.dot-sub { font-family: var(--sans); font-weight: 700; font-size: clamp(1.1rem, 1.6vw, 1.4rem); color: #ff7eb6; margin-bottom: 22px; }
.hero .lead { margin-bottom: 32px; max-width: 32em; color: var(--on-night); }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-art { position: relative; left: 3%; align-self: end; justify-self: end; width: 100%; max-width: 440px; margin-bottom: 11svh; }
.uke-box { position: relative; }
.uke-box picture { display: block; }
.hero-uke { position: relative; width: 100%; max-height: calc(100svh - 120px); object-fit: contain; object-position: bottom; animation: rise 1.6s cubic-bezier(.2, .7, .2, 1) .2s both; }
.cover-note { display: none; position: absolute; }

@keyframes rise { from { opacity: 0; transform: translateY(70px); } to { opacity: 1; transform: none; } }
@keyframes drift { from { transform: translate(0, 0); } to { transform: translate(-10px, 8px); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: var(--o, 1); } }

/* Phones and small tablets: laid out like the flyer's cover. Logo, the faded
   ukulele with its halo and star notes, then the dot-matrix slogan; all of it
   scales with --uke-h so the cover fits one screen. */
@media (max-width: 900px) {
  .hero { --uke-h: clamp(280px, calc((100svh - 236px) / 1.62), 560px); padding: 28px 0 28px; }
  /* More constellations in the sides beside the ukulele; phones have no room. */
  .desk-only { display: none; }
  .cluster-star { top: 8%; left: 80%; width: 13vw; }
  .cluster-teal { top: 56%; left: 85%; width: 8vw; }
  .cluster-orange { top: 52%; left: 8%; width: 6vw; }
  .hero-grid { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0; width: 100%; }
  .hero-copy { display: contents; }
  /* The logo sits at the top of the screen, lifted out of the column; the
     ukulele keeps the logo's room above it, so nothing else moves. */
  .hero-logo { position: absolute; top: -12px; left: 50%; translate: -50% 0; width: calc(var(--uke-h) * .64); max-width: 100%; margin: 0; }
  .hero-art { order: 1; left: 0; width: 100%; max-width: none; align-self: stretch; margin: calc(var(--uke-h) * (.64 * 157 / 420 + .03)) 0 0; }
  /* An explicit width, not height + aspect-ratio: Safari sizes a centred flex
     item from its content and would collapse the box to zero width. */
  .uke-box { width: min(100%, calc(var(--uke-h) * 900 / 1131)); aspect-ratio: 900 / 1131; margin: 0 auto calc(var(--uke-h) * .05); }
  .uke-box::before {
    content: ""; position: absolute; left: 1%; top: 19%; width: 98%; height: 96%;
    background: radial-gradient(closest-side, rgba(123, 44, 255, .35), rgba(224, 52, 79, .12) 55%, transparent);
    animation: fade-in 2s ease-out .6s both;
  }
  .uke-box picture { position: absolute; inset: 0; }
  .hero-uke { height: 100%; max-height: none; object-position: center; }
  .cover-note { display: block; top: -4%; }
  .cover-notes { left: -7.8%; width: 31.6%; aspect-ratio: 416 / 480; }
  .cover-purple { left: 76.4%; width: 29%; aspect-ratio: 325 / 450; }
  .dot-title {
    order: 2; font-size: clamp(2.1rem, calc(var(--uke-h) * .14), 4.6rem); margin-bottom: 10px;
    color: #ff9f1c; text-shadow: 0 0 18px rgba(255, 159, 28, .55), 0 0 2px rgba(255, 220, 150, .9);
  }
  .dot-sub {
    order: 3;
    font-size: clamp(1.02rem, calc(var(--uke-h) * .042), 1.35rem); color: #ff7eb6; margin-bottom: 24px;
  }
  .hero .lead { display: none; }
  .cta-row { order: 4; justify-content: center; }
}
@media (max-width: 600px) {
  .sky-art { display: none; }
}
@media (max-width: 520px) {
  .hero { --uke-h: clamp(300px, calc((100svh - 300px) / 1.62), 520px); padding-top: 24px; }
  .hero-logo { top: -8px; }
  .cta-row { width: 100%; gap: 10px; }
  .cta-row .btn { flex: 1 1 100%; }
}

/* The LED ticker under the hero: every song, scrolling on a dot-matrix strip. */
.ticker {
  position: relative; z-index: 1; overflow: hidden; padding: 14px 0 12px;
  background: var(--night-800); border-block: 1px solid rgba(255, 255, 255, .08);
}
.ticker::before {   /* the unlit LEDs */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(150, 165, 220, .14) 0 1px, transparent 1.6px) 0 0 / 6px 6px;
}
.ticker-track { position: relative; display: flex; width: max-content; }
@media (prefers-reduced-motion: no-preference) {
  .ticker-track { animation: ticker 70s linear infinite; }
}
@keyframes ticker { to { transform: translateX(-50%); } }
.ticker-track span {
  flex: none; padding-right: 40px; white-space: nowrap;
  font: 900 clamp(1.1rem, 2vw, 1.5rem)/1 "Doto", var(--sans); font-variation-settings: "ROND" 100; text-transform: uppercase; letter-spacing: .04em;
  color: var(--gold); text-shadow: 0 0 10px rgba(247, 197, 72, .6);
}
.ticker-track span::after { content: "+"; margin-left: 40px; color: var(--c); text-shadow: 0 0 10px var(--c); }   /* Doto's own plus, lit on the same dots as the titles */

/* ===== How it works ===== */
.how { padding-top: clamp(48px, 7vw, 88px); }
.how .section-head { margin-bottom: clamp(24px, 3vw, 36px); }
.mode-switch {
  display: flex; width: max-content; max-width: 100%; margin: 0 auto 18px; padding: 5px; gap: 4px;
  border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1);
}
.mode-switch button { min-height: 42px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; color: var(--on-night-soft); font: 700 .95rem var(--sans); cursor: pointer; }
.mode-switch button[aria-pressed="true"] { background: var(--gold); color: var(--ink); }
/* The switch, the demo and the steps should fit on one screen under the
   fixed header. Wide screens put the steps in a column beside the demo;
   narrower ones shrink them to a row of numbers under it. */
.demo-layout { max-width: 1040px; margin: 0 auto; }
.demo {
  position: relative; margin: 0 auto;
  background: rgba(10, 9, 16, .82);
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 28px;
  padding: 18px clamp(10px, 3vw, 28px) 16px;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.demo-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: .85rem; color: var(--on-night-soft); padding: 0 6px 4px; }
.demo-score { font-variant-numeric: tabular-nums; display: flex; gap: 14px; align-items: baseline; }
.demo-score b { display: inline-block; min-width: 3ch; color: var(--gold); font-size: 1.15rem; text-align: right; }
.demo-stage { position: relative; }
.demo-stage svg { display: block; width: 100%; height: auto; max-height: max(180px, 100svh - 460px); margin: 0 auto; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.demo-stage svg:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; border-radius: 16px; }
.demo.playing .demo-stage svg { cursor: pointer; }
.demo-pop {
  position: absolute; left: 50%; top: 8%; transform: translate(-50%, 0) scale(.6); opacity: 0; pointer-events: none;
  font-family: "Doto", var(--sans); font-weight: 900; font-variation-settings: "ROND" 100; font-size: clamp(1.6rem, 4vw, 2.6rem); text-transform: uppercase;
  color: var(--gold); text-shadow: 0 0 16px currentColor; white-space: nowrap;
}
.demo-pop.show { animation: pop .9s ease-out both; }
.demo-pop.good { color: #4fe3d0; }
.demo-pop.miss { color: var(--pink); }
.demo-pop.open { color: #e9f6ff; text-shadow: 0 0 18px #7cc4ff, 0 0 4px #7cc4ff; }   /* the open string's white light */
.demo-pop.open.show { animation-duration: 1.8s; }
@keyframes pop { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.6); } 18% { opacity: 1; transform: translate(-50%, 0) scale(1.08); } 70% { opacity: 1; transform: translate(-50%, -6px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -18px) scale(1); } }
.demo-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); border-radius: 18px; z-index: 2; padding: 16px; }
.demo-overlay[hidden] { display: none; }
.overlay-card { max-width: 380px; text-align: center; padding: 26px 24px; border-radius: 22px; background: var(--night-800); border: 1px solid rgba(247, 197, 72, .35); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); }
.overlay-card h3 { font-family: var(--serif); font-size: 1.7rem; margin-bottom: 10px; }
.overlay-card p { color: var(--on-night-soft); margin-bottom: 20px; font-size: .98rem; }
.demo-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 6px 0; min-height: 52px; }
.demo-coach { color: var(--on-night); font-weight: 600; font-size: .98rem; }
.demo-buttons { display: flex; gap: 8px; flex: none; }
.pluck-btn {
  min-height: 46px; padding: 0 22px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--pink); color: #fff; font: 700 1rem var(--sans); display: inline-flex; align-items: center; gap: 10px;
  box-shadow: 0 8px 24px -8px rgba(240, 106, 160, .8);
}
.pluck-btn:active { transform: scale(.96); }
.pluck-btn kbd { font: 600 .7rem var(--sans); padding: 2px 6px; border-radius: 6px; background: rgba(255, 255, 255, .22); }
.demo-pause {
  min-height: 40px; font: 600 .82rem var(--sans); color: var(--on-night-soft); background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; padding: 0 16px; cursor: pointer;
}
.demo-pause:hover { color: var(--on-night); }
.demo-pause[hidden], .pluck-btn[hidden] { display: none; }
/* Sound buttons (off until pressed): the speaker crossed out, or with waves while it plays */
[data-sound-toggle] { display: inline-flex; align-items: center; gap: 6px; }
[data-sound-toggle] svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[data-sound-toggle] .speaker { fill: currentColor; }
[data-sound-toggle][aria-pressed="true"] .cross, [data-sound-toggle][aria-pressed="false"] .waves { display: none; }
.demo-sound { padding-left: 12px; }
.demo-sound[aria-pressed="true"] { color: var(--on-night); }

/* Compact steps: the four numbers in a row on a line, and only the active
   step's text below them (step 1's when none is active). */
.steps {
  position: relative; list-style: none; padding: 0; margin: 20px auto 0; max-width: 520px;
  display: grid; grid-template-columns: repeat(4, 34px); justify-content: space-between; row-gap: 10px; text-align: center;
}
.steps::before { content: ""; grid-row: 1; grid-column: 1 / -1; align-self: center; height: 2px; margin-inline: 17px; background: rgba(255, 255, 255, .12); }
.steps li { display: contents; }
@media (max-width: 999px) {
  .steps li:nth-child(1) .step-num { grid-column: 1; }
  .steps li:nth-child(2) .step-num { grid-column: 2; }
  .steps li:nth-child(3) .step-num { grid-column: 3; }
  .steps li:nth-child(4) .step-num { grid-column: 4; }
}
.steps h3, .steps p { display: none; grid-column: 1 / -1; }
.steps li.active h3, .steps li.active p,
.steps:not(:has(.active)) li:first-child h3, .steps:not(:has(.active)) li:first-child p { display: block; }
.steps h3 { grid-row: 2; font-family: var(--serif); font-size: 1.2rem; font-weight: 700; }
.steps p { grid-row: 3; min-height: 3em; color: var(--on-night-soft); font-size: .92rem; line-height: 1.5; }
.step-num { position: relative; grid-row: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-weight: 700; background: var(--night-700); color: var(--on-night); transition: background-color .35s, color .35s, box-shadow .35s; }
.steps li.active .step-num { background: var(--gold); color: var(--ink); box-shadow: 0 0 20px rgba(247, 197, 72, .7); }
.steps li.open-string.active .step-num { background: #e9f6ff; box-shadow: 0 0 20px #7cc4ff; }   /* an open string: its white light */

@media (min-width: 1000px) {
  .demo-layout { max-width: none; display: grid; grid-template-columns: minmax(240px, 280px) 1fr; gap: 24px; align-items: center; }
  .demo-layout .steps { order: -1; }
  .demo-layout .demo { width: 100%; }
  .demo-stage svg { max-height: max(220px, 100svh - 480px); }
  .steps { display: flex; flex-direction: column; gap: 10px; margin: 0; max-width: none; text-align: left; }
  .steps::before { content: none; }
  .steps li {
    display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; padding: 12px 14px; border-radius: 18px;
    background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07);
    transition: background-color .35s, border-color .35s, transform .35s;
  }
  .steps li.active { background: rgba(247, 197, 72, .09); border-color: rgba(247, 197, 72, .55); transform: translateX(4px); }
  .steps li .step-num { grid-column: 1; grid-row: 1 / span 2; background: rgba(255, 255, 255, .08); }
  .steps h3, .steps p { display: block; grid-column: 2; }
  .steps h3 { grid-row: 1; margin: 5px 0 2px; font-size: 1.05rem; }
  .steps p { grid-row: 2; min-height: 0; font-size: .85rem; line-height: 1.4; }
}

/* Practice mode, right after Play anywhere on the same night background: a screen of its own,
   centred below the header. The badge on the photo is the instrument waiting for a note; top right,
   over the window, so it never covers the face. */
.practice { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 92px; }
.practice-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 6vw, 88px); align-items: center; }
.practice-copy h2 { margin-bottom: 18px; }
.practice-copy .lead { margin-bottom: 28px; }
.practice-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; max-width: 34em; }
.practice-points li { position: relative; padding-left: 26px; color: var(--on-night-soft); line-height: 1.5; }
.practice-points li::before {   /* a lit LED */
  content: ""; position: absolute; left: 3px; top: .5em; width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 8px rgba(247, 197, 72, .8);
}
.practice-points b { color: #fff; }
.practice-photo {
  position: relative; margin: 0; width: min(40vw, calc((100svh - 92px - var(--section-y)) * .75)); aspect-ratio: 3 / 4;
  border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
}
.practice-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.practice-badge {
  position: absolute; right: 14px; top: 14px; display: inline-flex; align-items: center; margin: 0; padding: 8px 14px 8px 12px;
  border-radius: 999px; background: rgba(8, 10, 24, .62); border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; font: 600 .82rem var(--sans);
}
.practice-badge i { width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background: #9cc0ff; box-shadow: 0 0 10px #9cc0ff; }
@media (prefers-reduced-motion: no-preference) {
  .practice-badge i { animation: practice-wait 1.6s ease-out infinite; }
  .practice-badge span { animation: practice-dots 1.6s steps(1) infinite; }
}
@keyframes practice-wait { from { box-shadow: 0 0 10px #9cc0ff, 0 0 0 0 rgba(156, 192, 255, .7); } to { box-shadow: 0 0 10px #9cc0ff, 0 0 0 10px rgba(156, 192, 255, 0); } }
@keyframes practice-dots { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

@media (max-width: 900px) {
  .practice { padding-bottom: 40px; }
  .practice-grid { grid-template-columns: 1fr; }
  .practice-photo { width: 100%; max-width: 560px; aspect-ratio: 4 / 5; justify-self: center; }
}
@media (max-width: 640px) {
  .demo { padding: 14px 10px 12px; border-radius: 22px; }
  .demo-bar { flex-direction: column; align-items: stretch; text-align: center; }
  .demo-buttons { justify-content: center; }
  .pluck-btn { flex: 1; justify-content: center; min-height: 56px; font-size: 1.1rem; }
  .pluck-btn kbd { display: none; }
}

/* ===== Garland & foliage ===== */
/* Night to cream: the sky warms towards the edge like dawn, and a flowering vine
   (garland.webp: two tiles that join seamlessly, art/garland in art-requests)
   runs along the edge, its vine on the line and its flowers hanging into the cream. */
.garland {
  --garland-h: clamp(84px, 11vw, 160px);
  position: absolute; left: 0; right: 0; top: calc(var(--garland-h) * -.37); height: var(--garland-h); z-index: 3; pointer-events: none;
  background: url("assets/img/garland.webp") repeat-x center top / auto 100%;
}
.score .garland { background-position: 41% top; }   /* the same vine, its flowers in other places */
.songs::before, .score::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: clamp(140px, 16vw, 220px); pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(18, 24, 64, .5) 55%, rgba(222, 168, 104, .38));
}
.foliage { position: absolute; top: 0; width: clamp(150px, 22vw, 300px); pointer-events: none; z-index: 1; }
.foliage-left { left: 0; }
.foliage-right { right: 0; transform: scaleX(-1); }

/* ===== Songs ===== */
.songs { padding-top: calc(var(--section-y) + 30px); overflow-x: clip; }
/* The song list with the treasure chest beside it, mirrored to face the text: big on the
   right on desktop, in the bottom-right corner on tablets, by the heading on phones.
   (`translate` and `scale` leave `transform` free for the scroll reveal.) */
/* Two screens: the song list fills the first (the section's top padding plus this), the
   chest pair the second, each centred in it. */
.songs { padding-bottom: 0; }
.songs-grid { position: relative; z-index: 2; display: grid; align-content: center; min-height: calc(100svh - var(--section-y) - 30px); }
.songs-copy { position: relative; z-index: 1; grid-area: 1 / 1; max-width: min(600px, 54%); }
.songs-copy .lead { margin-bottom: 24px; }
.chips-title { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }
.song-chips { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.song-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--cream-line); font-size: .92rem; font-weight: 600; }
.song-chips li.more { background: transparent; border-style: dashed; color: var(--ink-soft); font-weight: 500; font-style: italic; }
.d { display: inline-block; width: 10px; height: 10px; border-radius: 3px; transform: rotate(45deg); flex: none; }
.d-easy { background: var(--teal); }
.d-med { background: var(--gold-deep); }
.d-hard { background: var(--pink); }
.legend { display: flex; gap: 18px; font-size: .82rem; color: var(--ink-soft); margin-bottom: 28px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }

.chest {
  position: absolute; right: var(--gutter); top: 50%; translate: 0 -50%; scale: -1 1; width: clamp(320px, 36vw, 500px); pointer-events: none;
  filter: drop-shadow(0 30px 30px rgba(80, 50, 10, .18));
}

/* The story's chest and the song menu on the neck, framed alike side by side. */
.chest-pair {
  position: relative; z-index: 2; text-align: center;
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: 92px 40px;   /* clear of the header */
}
.pair-title { font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: clamp(20px, 3vw, 32px); }
.pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(12px, 2.4vw, 28px); max-width: 760px; margin: 0 auto; }
.pair figure { margin: 0; padding: 10px 10px 14px; background: #fff; border-radius: 10px; box-shadow: 0 24px 50px -22px rgba(40, 20, 0, .45); }
.pair figure:first-child { transform: rotate(-2deg); }
.pair figure:last-child { transform: rotate(2deg); }
.pair-pic { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 4px; }
.pair-pic > img, .pair-pic > svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.pair figcaption { margin-top: 10px; font-family: var(--serif); font-style: italic; font-size: .95rem; color: var(--ink-soft); line-height: 1.35; }
.pair figcaption b { display: block; font-family: var(--sans); font-style: normal; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--purple); margin-bottom: 2px; }

/* The chest picture at its full height, centred in the 3:4 frame, so the glow can sit on a
   gem by its place in the picture (main.js has the gem centres in image pixels). On a new
   song the glow fades out and comes back on the next gem. */
.chest-art { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; aspect-ratio: 733 / 1100; }
.chest-art img { display: block; width: 100%; height: auto; }
.chest-art::before {   /* the other gems in a little shade, as the neck dims them */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse calc(var(--w) * 1.3) calc(var(--w) * .87) at var(--x) var(--y), rgba(20, 10, 30, 0) 50%, rgba(20, 10, 30, .4) 100%);
}
.chest-glow {
  position: absolute; left: var(--x); top: var(--y); width: calc(var(--w) * 2.6); aspect-ratio: 1; translate: -50% -50%;
  pointer-events: none; mix-blend-mode: screen; transition: opacity .25s ease, scale .25s ease;
}
.chest-glow.out { opacity: 0; scale: .6; transition-duration: .11s; }
.chest-glow.out::before { animation: none; }   /* so the pulse starts over on the new gem, as on the neck */
.chest-glow::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .35) 0 20%, rgba(255, 232, 248, .6) 31%, rgba(200, 175, 255, .28) 45%, rgba(255, 255, 255, 0) 64%);
}
.chest-glow::after, .chest-twinkle {   /* a four-point sparkle */
  content: ""; position: absolute; width: 26%; aspect-ratio: 1; background: #fff;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter: drop-shadow(0 0 3px #fff);
}
.chest-glow::after { left: 58%; top: 18%; }
.chest-twinkle { width: 4.5%; translate: -50% -50%; pointer-events: none; animation: twinkle 1.3s ease-in-out forwards; }
@media (prefers-reduced-motion: no-preference) {
  .chest-glow::before { animation: gem-pulse 2s ease-in-out infinite; }
  .chest-glow::after { animation: twinkle-spin 2s ease-in-out infinite; }
}
@keyframes gem-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes twinkle-spin { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(.4) rotate(45deg); } }
@keyframes twinkle { 0%, 100% { transform: scale(0) rotate(0); opacity: 0; } 45% { transform: scale(1) rotate(45deg); opacity: 1; } }

/* The button between the pictures: a gold 3D-printed dome, soft rings always spreading from
   it. Each press sends out stronger rings; until someone presses it, a finger now and then
   comes over it as if about to press (.hint, with .show for one visit). */
.pick { position: relative; z-index: 3; width: clamp(50px, 6.4vw, 66px); aspect-ratio: 1; }
.pick::before, .pick::after, .pick-ripple { content: ""; position: absolute; inset: 4%; border-radius: 50%; pointer-events: none; }
.pick::before, .pick::after { border: 1.5px solid rgba(226, 163, 42, .6); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .pick::before, .pick::after { animation: pick-idle 3s ease-out infinite; }
  .pick::after { animation-delay: 1.5s; }
}
@keyframes pick-idle { from { transform: scale(1); opacity: .8; } to { transform: scale(1.9); opacity: 0; } }
.pick-btn { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
  filter: drop-shadow(0 4px 3px rgba(90, 50, 0, .4)); transition: transform .12s ease, filter .12s ease;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pick-btn svg { display: block; width: 100%; height: 100%; }
.pick-btn:hover { transform: translateY(-1px); }
.pick-btn:active, .pick-btn.pressed { transform: translateY(1.5px) scale(.95); filter: drop-shadow(0 1px 1px rgba(90, 50, 0, .5)) brightness(.94); }
.pick-btn:focus-visible { outline: 3px solid var(--purple); outline-offset: 6px; }
.pick-ripple { border: 2px solid #e2a32a; animation: pick-ripple 1s cubic-bezier(.2, .6, .3, 1) forwards; }
@keyframes pick-ripple { from { transform: scale(.95); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
.pick-finger { position: absolute; left: 50%; top: 50%; width: 130%; translate: -50% -50%; pointer-events: none; opacity: 0; }
.pick-finger svg { display: block; width: 100%; height: auto; overflow: visible; }
.hint .pick-finger.show { animation: pick-hover 2.8s ease-in-out; }
@keyframes pick-hover {   /* from the lower right, over the button, down as if to press, and away */
  0% { opacity: 0; translate: -12% -22%; scale: 1.14; filter: drop-shadow(12px 16px 8px rgba(40, 20, 0, .18)); }
  22%, 38% { opacity: 1; translate: -50% -50%; scale: 1.1; filter: drop-shadow(9px 12px 7px rgba(40, 20, 0, .22)); }
  52% { scale: 1.02; filter: drop-shadow(3px 4px 3px rgba(40, 20, 0, .32)); }
  64%, 76% { opacity: 1; translate: -50% -50%; scale: 1.1; filter: drop-shadow(9px 12px 7px rgba(40, 20, 0, .22)); }
  100% { opacity: 0; translate: -12% -22%; scale: 1.14; filter: drop-shadow(12px 16px 8px rgba(40, 20, 0, .18)); }
}
.pick-now { margin-top: clamp(18px, 2.4vw, 26px); font-family: var(--serif); font-size: 1.05rem; color: var(--ink-soft); min-height: 1.5em; }
.pick-help { margin-top: clamp(14px, 2vw, 22px); font-size: .85rem; color: var(--ink-soft); }
.pick-sound {
  display: flex; width: max-content; margin: calc(-1 * clamp(6px, 1.4vw, 14px)) auto clamp(20px, 3vw, 32px); min-height: 38px; padding: 0 16px 0 12px; border-radius: 999px; cursor: pointer;
  font: 600 .82rem var(--sans); color: var(--ink-soft); background: transparent; border: 1px solid rgba(29, 26, 51, .22);
}
.pick-sound:hover, .pick-sound[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); }
.pick-now b { font-family: var(--sans); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--purple); margin-right: 8px; }

@media (max-width: 900px) {
  .songs-copy { max-width: 640px; }
  /* beside the button: the same grid cell as the copy, at its bottom right */
  .chest { position: static; grid-area: 1 / 1; justify-self: end; align-self: end; translate: 0 14%; width: clamp(120px, 22vw, 170px); }
}
/* Tall screens (phones, upright tablets): the screens are spread out instead of centred,
   headings at the top and the last thing at the bottom, so they don't look half empty. */
@media (max-aspect-ratio: 4/5) {
  .songs-grid { align-content: stretch; padding-bottom: 40px; }
  .songs-copy { display: flex; flex-direction: column; }
  .songs-copy .chips-title { margin-top: auto; }
  .songs-copy .btn { margin-top: auto; align-self: flex-start; }
  .chest-pair { justify-content: flex-start; }
  .chest-pair .pair { margin-top: auto; }
  .pair-pic { aspect-ratio: 2 / 3; }   /* taller frames: the whole chest picture, the neck a little cropped at the sides */
  .chest-pair .pick-now { margin-bottom: auto; }
  /* Practice: the photo takes the rest of the screen under the copy */
  .practice-grid { flex: 1; grid-template-rows: auto 1fr; align-items: stretch; }
  .practice-photo { aspect-ratio: auto; min-height: 260px; }
  .practice-photo img { position: absolute; inset: 0; object-position: center 42%; }   /* the row's height, not its own; face and lit neck both in view */
}
@media (max-width: 520px) {
  .chest { width: clamp(80px, 27vw, 120px); }
  .pair { gap: 10px; }
  .pair figure { padding: 6px 6px 10px; }
  .pair figcaption { font-size: .82rem; }
  .pick { width: 46px; }
}

/* ===== Play anywhere ===== */
.anywhere { min-height: 920px; padding-bottom: clamp(56px, 7vw, 88px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
.anywhere-bg { position: absolute; inset: 0; width: 100%; height: 78%; object-fit: cover; object-position: center 35%; -webkit-mask-image: linear-gradient(#000 0 55%, transparent); mask-image: linear-gradient(#000 0 55%, transparent); }
/* the left-hand shade keeps the copy readable over the bright mugs and fire */
.anywhere::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .25) 40%, rgba(0, 0, 0, 0) 60%), linear-gradient(180deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, .1) 45%, rgba(0, 0, 0, .55) 70%, rgba(0, 0, 0, .2) 100%); }
.anywhere-inner { position: relative; z-index: 1; }
.anywhere .kicker { text-shadow: 0 1px 10px rgba(0, 0, 0, .9), 0 0 2px rgba(0, 0, 0, .8); }
.anywhere h2 { font-size: clamp(2.4rem, 5.4vw, 4.3rem); margin-bottom: 18px; text-shadow: 0 4px 30px rgba(0, 0, 0, .5); }
.anywhere .lead { color: rgba(255, 255, 255, .85); margin-bottom: 40px; }
.features { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.features li { padding: 22px; border-radius: 20px; background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.features h3 { font-family: var(--serif); font-size: 1.45rem; margin: 14px 0 4px; }
.features p { color: rgba(255, 255, 255, .78); font-size: .95rem; }
.feat-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(247, 197, 72, .16); }
.feat-icon svg { width: 24px; height: 24px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) {
  .anywhere { min-height: 0; padding-top: 320px; }
  .anywhere-bg { height: 460px; object-position: 30% center; }
  .anywhere::after { background: linear-gradient(180deg, rgba(0, 0, 0, .1) 0, rgba(0, 0, 0, .5) 300px, rgba(0, 0, 0, .3) 460px); }
  .features { grid-template-columns: 1fr; gap: 10px; }
  .features li { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; padding: 16px; }
  .feat-icon { grid-row: span 2; }
  .features h3 { margin: 0; font-size: 1.2rem; align-self: end; }
}

/* ===== Score ===== */
.score { padding-top: calc(var(--section-y) + 30px); overflow-x: clip; }   /* room under the garland, which reaches up into the night */
.score-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.score-art { position: relative; }
.score-photo { border-radius: 28px; aspect-ratio: 1; object-fit: cover; box-shadow: 0 40px 70px -35px rgba(30, 20, 60, .6); }
.scorecard {
  position: absolute; left: -22px; bottom: 28px; min-width: 210px; padding: 18px 22px;
  background: var(--night-800); color: var(--on-night); border-radius: 20px;
  box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .1);
}
.sc-song { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--on-night-soft); }
.sc-points { font-family: var(--serif); font-size: 2.6rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sc-points b { color: var(--gold); }
.sc-best { font-size: .85rem; color: var(--on-night-soft); }
.sc-badge { display: inline-block; margin-top: 10px; padding: 4px 12px; border-radius: 999px; background: var(--pink); color: #fff; font-weight: 700; font-size: .82rem; opacity: 0; transform: scale(.6); transition: opacity .35s, transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.scorecard.done .sc-badge { opacity: 1; transform: none; }
.score-copy .lead { margin-bottom: 28px; }
.num-list { list-style: none; padding: 0; margin: 0; counter-reset: n; display: grid; gap: 18px; }
.num-list li { counter-increment: n; display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; }
.num-list li::before { content: counter(n); grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; font-family: var(--serif); font-weight: 700; font-size: 1.3rem; background: #fff; border: 1px solid var(--cream-line); color: #14907f; }
.num-list h3 { align-self: end; font-size: 1.15rem; }
.num-list p { color: var(--ink-soft); }
@media (max-width: 900px) {
  .score-grid { grid-template-columns: 1fr; }
  .score-art { max-width: 460px; margin: 0 auto; width: 100%; }
  .score-art { margin-bottom: 40px; }
  .scorecard { left: 12px; bottom: -36px; min-width: 0; padding: 12px 16px; }
  .sc-points { font-size: 1.8rem; }
}

/* ===== Create ===== */
.create-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.create h2 em { color: #d9760c; }
.create .lead { margin-bottom: 18px; }
.small-note { font-weight: 600; color: var(--ink); padding-left: 14px; border-left: 3px solid var(--orange); }
.create-download { margin-top: 28px; }
.create-art { position: relative; padding-bottom: 60px; }
.create-photo { border-radius: 28px; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: 0 40px 70px -35px rgba(60, 30, 0, .45); }
.roll {
  position: absolute; right: -16px; bottom: 0; width: min(62%, 360px);
  background: #fff; border-radius: 18px; padding: 14px 16px 16px;
  box-shadow: 0 24px 50px -18px rgba(40, 20, 0, .45); border: 1px solid var(--cream-line);
}
.roll-head { display: flex; justify-content: space-between; font-size: .78rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 10px; }
.roll-grid {
  position: relative; height: 128px; border-radius: 10px;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(100% / 12 - 1px), #eee4cf calc(100% / 12 - 1px) calc(100% / 12)),
    repeating-linear-gradient(180deg, #fbf6ea 0 16px, #f6efde 16px 32px);
}
.roll-grid i {
  position: absolute; left: calc(var(--x) * 100% / 12 + 2px); top: calc(var(--y) * 16px + 2px);
  width: calc(var(--w) * 100% / 12 - 4px); height: 12px; border-radius: 4px; background: var(--c);
  opacity: 0; transform: scaleX(.2); transform-origin: left;
  transition: opacity .3s, transform .4s cubic-bezier(.3, 1.4, .5, 1);
}
.roll.play i { opacity: 1; transform: none; }
.roll.play i:nth-child(1) { transition-delay: .1s; }
.roll.play i:nth-child(2) { transition-delay: .35s; }
.roll.play i:nth-child(3) { transition-delay: .6s; }
.roll.play i:nth-child(4) { transition-delay: .85s; }
.roll.play i:nth-child(5) { transition-delay: 1.1s; }
.roll.play i:nth-child(6) { transition-delay: 1.35s; }
.roll.play i:nth-child(7) { transition-delay: 1.6s; }
.roll.play i:nth-child(8) { transition-delay: 1.85s; }
@media (max-width: 900px) {
  .create-grid { grid-template-columns: 1fr; }
  .roll { right: 8px; }
}

/* ===== Story ===== */
.story { overflow: hidden; }
.story-strip {
  list-style: none; margin: 0; padding: 8px max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))) 24px;
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--night-600) transparent;
}
.story-strip li {
  flex: 0 0 clamp(250px, 28vw, 320px); scroll-snap-align: center;
  background: var(--cream); color: var(--ink); border-radius: 22px; overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
}
.story-strip li:nth-child(even) { transform: translateY(26px); }
.story-strip img { width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover; }
.story-strip li > div { padding: 18px 20px 22px; }
.story-strip span { font-family: var(--serif); font-weight: 700; color: var(--gold-deep); font-size: .95rem; }
.story-strip p { font-family: var(--serif); font-size: 1.04rem; line-height: 1.45; margin-top: 4px; }
.story-strip::after { content: ""; flex: 0 0 1px; }
.story-nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 30px; }
.story-arrow {
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0; cursor: pointer;
  border: 1px solid rgba(238, 240, 255, .28); border-radius: 50%; background: rgba(255, 255, 255, .04);
  transition: border-color .15s, background-color .15s, opacity .15s;
}
.story-arrow:hover:not(:disabled) { border-color: var(--gold); background: rgba(247, 197, 72, .12); }
.story-arrow:disabled { opacity: .3; cursor: default; }
.story-arrow svg { width: 22px; height: 22px; fill: none; stroke: var(--on-night); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: none) { .story-nav { display: none; } }

/* ===== Get ===== */
.get { overflow: hidden; padding-top: calc(var(--section-y) + 40px); padding-bottom: clamp(56px, 7vw, 88px); }
/* The shooting star (flipped, so it falls from the upper left) with its head on the card's
   top-left corner; the head sits at 86% across and 74% down the flipped picture. It flies
   in when the card is revealed. */
.price-wrap { position: relative; justify-self: end; width: 100%; max-width: 460px; }
.get-star {
  position: absolute; z-index: 1; width: 300px; left: -241px; top: -149px; scale: 1 -1; pointer-events: none;
  transition: opacity .9s ease .35s, translate .9s cubic-bezier(.2, .7, .2, 1) .35s;
}
.price-card.reveal ~ .get-star { opacity: 0; translate: -70px -45px; }
.price-card.reveal.in ~ .get-star { opacity: 1; translate: 0 0; }
.get-grid { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 72px); align-items: center; }
.get h2 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.12; }
.get-twist { margin-top: 18px; font-family: var(--serif); font-style: italic; font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--gold); }
.price-card { background: var(--cream); color: var(--ink); border-radius: 28px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(247, 197, 72, .3); max-width: 460px; justify-self: end; width: 100%; }
.price-uke { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.price-body { padding: 24px 28px 28px; }
.price-tag { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--ink); color: var(--gold); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.price { font-family: var(--serif); font-weight: 800; font-size: 4rem; line-height: 1; margin: 12px 0 10px; letter-spacing: -.02em; }
.price small { font-size: 1.1rem; font-weight: 600; font-style: italic; color: var(--ink-soft); margin-right: 4px; letter-spacing: 0; }
.price-body > p:not(.price):not(.price-tag) { color: var(--ink-soft); margin-bottom: 20px; }
.order-btns { display: grid; gap: 10px; }
.price-body .price-small { margin: 14px 0 0 !important; font-size: .86rem; text-align: center; }
/* Questions under the price card, each one opens in place */
.faq { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(24px, 5vw, 72px); margin-top: clamp(72px, 9vw, 112px); }
.faq-title { font-family: var(--serif); font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.1; }
.faq-list { border-top: 1px solid rgba(238, 240, 255, .18); }
.faq details { border-bottom: 1px solid rgba(238, 240, 255, .18); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 4px; cursor: pointer; list-style: none;
  font-family: var(--serif); font-weight: 600; font-size: clamp(1.08rem, 1.6vw, 1.25rem); line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(238, 240, 255, .35);
  background: linear-gradient(var(--on-night), var(--on-night)) center / 12px 2px no-repeat, linear-gradient(var(--on-night), var(--on-night)) center / 2px 12px no-repeat;
  transition: rotate .25s, background-color .25s, border-color .25s;
}
.faq summary:hover::after { border-color: var(--gold); }
.faq details[open] summary::after {
  rotate: 45deg; border-color: var(--gold);
  background: linear-gradient(var(--ink), var(--ink)) center / 12px 2px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 2px 12px no-repeat, var(--gold);
}
.faq details p { padding: 0 52px 22px 4px; color: var(--on-night-soft); max-width: 40em; }
.faq details a { color: var(--gold); font-weight: 600; }
@media (max-width: 900px) {
  .faq { grid-template-columns: 1fr; gap: 16px; }
  .faq details p { padding-right: 4px; }
}
.tagline { position: relative; margin-top: clamp(48px, 7vw, 80px); text-align: center; font-family: var(--serif); font-weight: 700; font-size: clamp(1.3rem, 2.4vw, 1.8rem); color: var(--pink); }
@media (max-width: 900px) {
  .get-grid { grid-template-columns: 1fr; row-gap: 104px; }   /* room for the star above the card */
  .price-wrap { justify-self: center; }
  /* smaller, landing on the card's top-right corner */
  .get-star { width: 200px; left: auto; right: -3px; top: -95px; }
}

/* ===== Footer ===== */
.site-footer { color: var(--on-night-soft); padding: 40px 0 28px; border-top: 1px solid rgba(255, 255, 255, .06); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-links a { text-decoration: none; font-weight: 600; font-size: .95rem; }
.footer-links a:hover { color: var(--on-night); }
.socials { list-style: none; padding: 0; margin: 0; display: flex; gap: 10px; }
.socials a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(255, 255, 255, .06); transition: background-color .15s; }
.socials a:hover { background: rgba(255, 255, 255, .14); }
.socials svg { width: 22px; height: 22px; fill: none; stroke: var(--on-night); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.socials svg .fill { fill: var(--on-night); stroke: none; }
.footer-small { margin-top: 24px; font-size: .82rem; opacity: .7; }

/* ===== Reveal ===== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ===== Songbook page ===== */
.songbook-page { background: var(--cream); }
.songbook-page .site-header .btn-ghost { color: var(--on-night); }
.book-hero { padding-top: 150px; padding-bottom: 40px; overflow: hidden; }
.book-hero-inner { position: relative; z-index: 2; max-width: var(--wrap); }
.book-hero h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); max-width: 9.5em; }
.book-hero .lead { max-width: 30em; }
.book-chest { position: absolute; right: max(-60px, calc((100vw - var(--wrap)) / 2 - 40px)); bottom: -30px; width: clamp(220px, 32vw, 420px); opacity: .95; }
.book { padding-top: 24px; }
.book-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; padding: 14px; background: #fff; border: 1px solid var(--cream-line); border-radius: 20px; position: relative; z-index: 2; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--cream-line); background: var(--cream); color: var(--ink); font: 600 .95rem var(--sans); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.search { display: flex; align-items: center; gap: 10px; flex: 1 1 260px; max-width: 360px; min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--cream); border: 1px solid var(--cream-line); }
.search:focus-within { border-color: var(--ink); }
.search svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-linecap: round; flex: none; }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 1rem var(--sans); color: var(--ink); }
.book-count { margin: 22px 4px 12px; font-size: .9rem; color: var(--ink-soft); font-weight: 600; }
.book-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.book-list li { position: relative; display: flex; }
.book-list li[hidden] { display: none; }
/* Each song is a button: a click plays a few notes of it (songs.js) */
.song-play {
  flex: 1; display: flex; align-items: center; gap: 16px; padding: 14px 18px 14px 14px; text-align: left;
  font: inherit; color: inherit; background: #fff; border: 1px solid var(--cream-line); border-radius: 18px; cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.song-play:hover, .song-play.playing { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(60, 40, 0, .4); }
.song-play.playing { border-color: #e2c9ff; }
.song-play:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.gem-wrap { position: relative; flex: none; display: grid; place-items: center; }
.gem { flex: none; width: 46px; height: 46px; filter: hue-rotate(var(--hue)) drop-shadow(0 4px 8px rgba(120, 60, 140, .25)); }
.play-icon { position: absolute; right: -5px; bottom: -5px; width: 22px; height: 22px; opacity: .8; transition: opacity .15s, transform .15s; }   /* a play badge on the gem's corner */
.play-icon circle { fill: var(--ink); }
.play-icon path { fill: #fff; }
.song-play:hover .play-icon, .song-play.playing .play-icon { opacity: 1; transform: scale(1.1); }
.song-play.playing .play-icon circle { fill: var(--purple); }
@media (prefers-reduced-motion: no-preference) {
  .song-play.playing .gem { animation: gem-play .5s ease-in-out infinite alternate; }
}
@keyframes gem-play { to { transform: scale(1.12); filter: hue-rotate(var(--hue)) drop-shadow(0 0 12px rgba(255, 220, 140, .9)); } }
/* The song's picture pops up out of its gem while the song plays */
.song-pop {
  position: absolute; z-index: 3; left: 4px; bottom: 50%; width: min(210px, 56vw); aspect-ratio: 1; padding: 0; cursor: zoom-in;
  border-radius: 16px; border: 4px solid #fff; overflow: hidden; background: #fff; box-shadow: 0 22px 48px -14px rgba(40, 20, 60, .6);
  transform-origin: 33px 100%; rotate: -4deg; animation: song-pop .45s cubic-bezier(.2, 1.5, .4, 1) both; transition: rotate .2s, scale .2s;
}
.song-pop img { display: block; width: 100%; height: 100%; object-fit: cover; }
.song-pop:hover, .song-pop:focus-visible { rotate: 0deg; scale: 1.04; }
.song-pop:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.song-pop.out { animation: song-pop-out .25s ease-in both; pointer-events: none; }
@keyframes song-pop { from { opacity: 0; scale: .15; } }
@keyframes song-pop-out { to { opacity: 0; scale: .3; } }
@media (prefers-reduced-motion: reduce) { .song-pop, .song-pop.out { animation: none; } }
/* A song's picture full size (songs.js) */
.art-view { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; overflow: visible; }
.art-view::backdrop { background: rgba(14, 10, 30, .78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.art-view figure { margin: 0; }
.art-view img { display: block; width: min(88vw, 78vh, 640px); aspect-ratio: 1; object-fit: cover; border-radius: 22px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9); }
.art-view figcaption { margin-top: 14px; text-align: center; color: #fff; font-size: .95rem; }
.art-view figcaption b { font-family: var(--serif); font-size: 1.25rem; display: block; }
.art-close {
  position: fixed; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  font: 400 1.8rem/1 var(--sans); color: #fff; background: rgba(255, 255, 255, .14);
}
.art-close:hover { background: rgba(255, 255, 255, .26); }
@media (prefers-reduced-motion: no-preference) {
  .art-view[open] { animation: art-in .3s cubic-bezier(.2, 1.3, .4, 1); }
}
@keyframes art-in { from { opacity: 0; scale: .85; } }
.song-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.song-text b { font-size: 1.05rem; line-height: 1.25; }
.song-text span { color: var(--ink-soft); font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.level { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.pips { display: flex; gap: 4px; }
.pips i { width: 9px; height: 9px; border-radius: 3px; transform: rotate(45deg); }
.pips .pip-off { background: var(--cream-line); }
.level-label { font-size: .75rem; color: var(--ink-soft); font-weight: 600; }
.book-empty { padding: 40px 0; text-align: center; color: var(--ink-soft); }
.book-empty button { font: inherit; font-weight: 700; color: var(--ink); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.book-note { margin-top: 40px; color: var(--ink-soft); font-size: .95rem; }
.book-note a { color: var(--ink); font-weight: 700; }
@media (max-width: 640px) {
  .book-hero { padding-top: 120px; }
  .book-chest { opacity: .35; right: -60px; }
  .book-hero .foliage { display: none; }
  .search { max-width: none; }
}

/* ===== Downloads page ===== */
.dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(16px, 3vw, 28px); }
.dl-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: clamp(22px, 3vw, 32px);
  background: #fff; border: 1px solid var(--cream-line); border-radius: 24px; box-shadow: 0 24px 50px -34px rgba(60, 40, 0, .45);
}
.dl-logo { width: min(100%, 300px); height: auto; margin-bottom: 4px; align-self: center; }
.dl-text { color: var(--ink-soft); font-size: 1.02rem; }
.dl-platforms { font-weight: 600; font-size: .85rem; letter-spacing: .04em; color: var(--ink); }
.dl-card .btn { margin-top: auto; }

/* ===== Order page ===== */
/* Night, like the home page: the dot-matrix sky (main.js) shines behind dark glass panels. */
.order-page { background: var(--night-900); }
.order-page main { position: relative; }
.order-page .book { padding-bottom: var(--section-y); }
.order { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
.order-look { position: sticky; top: 96px; }
.glass {
  background: rgba(15, 14, 22, .72); border: 1px solid rgba(255, 255, 255, .09);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .9);
}
/* the front picture is tall and narrow, the angled one wide: columns in their proportions keep both the same height */
.look-stage {
  display: grid; grid-template-columns: 349fr 789fr; gap: 4%; align-items: end; padding: 8% 8% 6%; border-radius: 28px;
  background: radial-gradient(ellipse 70% 55% at 50% 78%, rgba(255, 231, 163, .16), transparent 70%), rgba(15, 14, 22, .72);
}
.look-stage img { width: 100%; height: auto; filter: drop-shadow(0 22px 22px rgba(0, 0, 0, .55)); }
.swatches { border: 0; margin: 22px 0 0; padding: 0; min-width: 0; }
.swatches legend { padding: 0; margin-bottom: 12px; font-weight: 600; color: var(--on-night-soft); }
.swatches legend b { font-weight: 700; color: var(--on-night); }
.swatch-row { display: flex; flex-wrap: wrap; gap: 12px; }
.swatch { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--c); cursor: pointer; box-shadow: inset 0 -6px 10px rgba(0, 0, 0, .25), 0 0 0 1px rgba(255, 255, 255, .16); transition: transform .15s ease; }
.swatch:hover { transform: scale(1.08); }
.swatch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.swatch:has(input:checked) { box-shadow: inset 0 -6px 10px rgba(0, 0, 0, .25), 0 0 0 3px var(--night-900), 0 0 0 5px var(--gold), 0 0 18px 4px rgba(247, 197, 72, .35); }
.swatch:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 7px; }
/* a few glints for the sparkle filaments */
.swatch-sparkle {
  background:
    radial-gradient(circle at 30% 32%, #fff 0 1px, transparent 1.6px), radial-gradient(circle at 62% 24%, rgba(255,255,255,.8) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 70% 58%, #fff 0 1.1px, transparent 1.7px), radial-gradient(circle at 40% 70%, rgba(255,255,255,.75) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 22% 55%, rgba(255,255,255,.7) 0 .7px, transparent 1.3px), var(--c);
}
.other-colour { margin-top: 18px; max-width: 30em; }
.other-colour[hidden] { display: none; }
.look-note { margin-top: 16px; font-size: .88rem; color: var(--on-night-soft); max-width: 34em; }

.order-card { display: flex; flex-direction: column; gap: 16px; padding: clamp(22px, 3vw, 34px); border-radius: 24px; color-scheme: dark; }
.order-card.glass { background: rgba(15, 14, 22, .38); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }  /* the stars show through */
.order-price { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.order-price span { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.order-price b { font-family: var(--serif); font-size: 2rem; line-height: 1; color: var(--on-night); }
.order-price small { font-family: var(--sans); font-size: .9rem; font-weight: 600; color: var(--on-night-soft); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field span { font-size: .9rem; font-weight: 600; color: var(--on-night); }
.field i { font-style: normal; font-weight: 500; color: var(--on-night-soft); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px;
  background: rgba(255, 255, 255, .06); color: var(--on-night); font: 500 1rem/1.4 var(--sans);
}
.field select option { background: var(--night-800); color: var(--on-night); }
.field ::placeholder { color: rgba(185, 180, 207, .6); }
.field textarea { resize: vertical; min-height: 90px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); background: rgba(255, 255, 255, .09); }
.field-row:has(.field-post) { grid-template-columns: 130px 1fr; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; color: var(--on-night-soft); cursor: pointer; }
.consent input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--gold); }
.order-status:empty { display: none; }
.order-status { padding: 12px 16px; border-radius: 14px; font-size: .95rem; font-weight: 600; color: var(--on-night); background: rgba(255, 255, 255, .08); }
.order-status.bad { background: rgba(233, 66, 58, .16); color: #ffb3ad; }
.order-status.good { background: rgba(61, 209, 122, .16); color: #a6f0c4; }
.order-status a, .order-alt a { color: inherit; font-weight: 700; }
.order-alt { font-size: .9rem; color: var(--on-night-soft); text-align: center; }
@media (max-width: 860px) {
  .order { grid-template-columns: 1fr; }
  .order-look { position: static; }
}
@media (max-width: 480px) {
  .field-row { grid-template-columns: 1fr; }
  .swatch-row { gap: 8px; }
  .swatch { width: 40px; height: 40px; }  /* all seven on one line */
}

/* ===== Thank-you page ===== */
/* After an order: a shower of shooting stars (main.js, data-sky="party") and a card that pops in
   over it; the card can be hidden to watch the sky. */
.thanks-page { background: var(--night-900); }
.thanks { position: relative; min-height: 100svh; display: grid; place-items: center; padding: 104px var(--gutter) 64px; }
.thanks-card {
  position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 40px); align-items: center;
  width: min(820px, 100%); padding: clamp(24px, 4vw, 44px); border-radius: 28px; color: var(--on-night);
  background: rgba(15, 14, 22, .55); border-color: rgba(247, 197, 72, .3);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .95), 0 0 60px -20px rgba(247, 197, 72, .25);
  transition: opacity .4s ease, transform .4s ease;
}
.thanks-card:not(:has(.thanks-look:not([hidden]))) { grid-template-columns: 1fr; max-width: 560px; text-align: center; }
.thanks-card:not(:has(.thanks-look:not([hidden]))) .kicker { justify-content: center; }
.thanks-card.away { opacity: 0; transform: scale(.94) translateY(16px); pointer-events: none; }
.thanks-look {
  display: grid; grid-template-columns: 349fr 789fr; gap: 4%; align-items: end; padding: 8% 6% 4%; border-radius: 22px;
  background: radial-gradient(ellipse 70% 55% at 50% 78%, rgba(255, 231, 163, .18), transparent 70%);
}
.thanks-look[hidden] { display: none; }
.thanks-look img { width: 100%; height: auto; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .55)); }
.thanks-card h1 { font-family: var(--serif); font-size: clamp(2.1rem, 5vw, 3.2rem); line-height: 1.05; margin: 10px 0 14px; }
.thanks-lead { color: var(--on-night-soft); font-size: 1.05rem; }
.thanks-lead span { color: var(--on-night); font-weight: 600; overflow-wrap: anywhere; }
.thanks-list { display: grid; gap: 10px; margin: 22px 0 0; padding: 16px 0 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.thanks-list[hidden] { display: none; }
.thanks-list div { display: grid; grid-template-columns: 6.5em 1fr; gap: 12px; }
.thanks-list dt { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); padding-top: .2em; }
.thanks-list dd { margin: 0; font-weight: 600; }
.thanks-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.thanks-card:not(:has(.thanks-look:not([hidden]))) .thanks-btns { justify-content: center; }
.thanks-close {
  position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 50%; background: rgba(255, 255, 255, .04);
  color: var(--on-night); font: 400 1.5rem/1 var(--sans); cursor: pointer;
}
.thanks-close:hover { border-color: var(--on-night); }
.thanks-show { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); translate: -50% 0; z-index: 5; background: rgba(15, 14, 22, .72); }
.thanks-show[hidden] { display: none; }
.thanks-hint { position: fixed; left: 0; right: 0; bottom: calc(max(24px, env(safe-area-inset-bottom)) + 58px); text-align: center; font-size: .85rem; color: var(--on-night-soft); opacity: .7; pointer-events: none; }
.thanks-card:not(.away) ~ .thanks-hint { opacity: 0; }
.thanks-hint { transition: opacity .4s ease; }
@media (prefers-reduced-motion: no-preference) {
  /* the card waits for the first wave of stars, then pops in */
  .thanks-card { animation: thanks-pop .7s cubic-bezier(.3, 1.4, .5, 1) 1.1s backwards;  /* backwards: once done, .away can still fade it */ }
}
@keyframes thanks-pop { from { opacity: 0; transform: scale(.8) translateY(24px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .thanks { padding-top: 92px; place-items: start center; }
  .thanks-card { grid-template-columns: 1fr; text-align: left; }
  .thanks-look { width: min(230px, 66%); margin: 0 auto; padding-top: 2%; }
  .thanks-btns .btn { flex: 1 1 100%; }
}