/* moonstone fx — one look for every page.
   The chooser's night (web/index.html), grown into a house: the sky, the
   serif in small capitals, the stone's milky light. Colour on a page is only
   ever light the stone really makes; it comes from palette.css, which
   site/build.py writes from core/ux/palette.json. */

:root {
  --night: #05070d;
  --night-2: #0a0d16;
  --deep: #0d1018;
  --regolith: #2a2c33;
  --stone: #dcd7cd;
  --pearl: #ece8df;
  --moonlight: #9aa3b5;
  --dim: #6c7486;
  --line: rgb(220 215 205 / .09);
  --line-2: rgb(220 215 205 / .16);
  --gold: #c9a45c;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gutter: clamp(16px, 5vw, 56px);
  --measure: 34rem;
}

* { box-sizing: border-box; }
html { background: var(--night); color-scheme: dark; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; min-height: 100vh; color: var(--stone);
  font: 300 17px/1.62 var(--sans);
  background: radial-gradient(ellipse 120% 70% at 50% 100%, #0b0d15 0%, var(--night) 60%) fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, canvas, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }
::selection { background: rgb(var(--ice) / .3); }
canvas.sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
main, .bar, .foot { position: relative; z-index: 1; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 10; padding: 8px 14px; background: var(--deep); border-radius: 4px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 1px solid var(--moonlight); outline-offset: 3px; }

/* ---- type ---------------------------------------------------------------- */

h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--pearl); margin: 0; text-wrap: balance; }
h2 { font-size: clamp(30px, 4.4vw, 54px); line-height: 1.08; letter-spacing: -.005em; }
h3 { font-size: clamp(21px, 2.2vw, 26px); line-height: 1.2; }
p { margin: 0 0 1em; max-width: var(--measure); text-wrap: pretty; }
p b, p strong { font-weight: 500; color: var(--pearl); }
.label, .caps {
  font-family: var(--serif); font-variant: small-caps; text-transform: lowercase;
  letter-spacing: .32em; font-size: 15px; color: var(--moonlight); margin: 0;
}
.lede { font-family: var(--serif); font-size: clamp(20px, 2.1vw, 24px); line-height: 1.5; color: var(--stone); }
.quiet { color: var(--moonlight); }
.small { font-size: 14px; color: var(--moonlight); }
em.lore, .lore {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(20px, 2.6vw, 27px); line-height: 1.4; letter-spacing: .01em; color: var(--stone);
}

/* ---- the bar ------------------------------------------------------------- */

.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 18px var(--gutter);
  transition: background .5s ease, border-color .5s ease, padding .4s ease;
  border-bottom: 1px solid transparent;
}
.bar.over { background: rgb(5 7 13 / .92); border-color: var(--line); padding-block: 12px; }
.mark {
  font-family: var(--serif); font-variant: small-caps; text-transform: lowercase;
  letter-spacing: .42em; font-size: 16px; text-decoration: none; color: var(--pearl); white-space: nowrap;
}
.nav { display: flex; gap: clamp(14px, 2.4vw, 30px); }
.nav a {
  font-family: var(--serif); font-variant: small-caps; text-transform: lowercase;
  letter-spacing: .22em; font-size: 14px; color: var(--moonlight); text-decoration: none;
  padding: 4px 0; border-bottom: 1px solid transparent; transition: color .3s ease, border-color .3s ease; white-space: nowrap;
}
.nav a:hover { color: var(--pearl); }

.nav a[aria-current] { color: var(--pearl); border-bottom-color: rgb(var(--ice) / .55); }
.nav { align-items: center; }

/* a tab that fans out (the blog: the journey and the stones) — hover, focus or a tap opens it */
.nav-group { position: relative; }
.nav-tab {
  display: inline-flex; align-items: center; gap: 9px; padding: 4px 0; background: none; border: 0; border-bottom: 1px solid transparent;
  font-family: var(--serif); font-variant: small-caps; text-transform: lowercase; letter-spacing: .22em; font-size: 14px;
  color: var(--moonlight); cursor: pointer; white-space: nowrap; transition: color .3s ease, border-color .3s ease;
}
.nav-tab::after { content: ""; width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  rotate: 45deg; translate: 0 -2px; transition: rotate .35s ease, translate .35s ease; }
.nav-tab[data-current], .nav-group:hover .nav-tab, .nav-group.open .nav-tab { color: var(--pearl); }
.nav-tab[data-current] { border-bottom-color: rgb(var(--ice) / .55); }
.nav-group:hover .nav-tab::after, .nav-group.open .nav-tab::after { rotate: 225deg; translate: 0 2px; }
.nav-fan {
  position: absolute; top: calc(100% + 16px); left: 50%; translate: -50% 0; width: 270px; padding: 10px;
  display: grid; gap: 4px; border-radius: 16px; background: rgb(6 8 15 / .97); border: 1px solid var(--line);
  box-shadow: 0 30px 70px -20px rgb(0 0 0 / .9), 0 0 40px -10px rgb(var(--ice) / .14);
  opacity: 0; visibility: hidden; transform: translateY(-8px); transform-origin: top center;
  transition: opacity .3s ease, transform .45s cubic-bezier(.2,.7,.2,1), visibility 0s linear .45s;
}
.nav-fan::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }   /* the bridge the pointer crosses */
.nav-group:hover .nav-fan, .nav-group.open .nav-fan, .nav-group:focus-within .nav-fan {
  opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .45s cubic-bezier(.2,.7,.2,1), visibility 0s;
}
.nav-fan a {
  display: grid; gap: 5px; padding: 13px 16px 14px; border-radius: 11px; border: 0;
  opacity: 0; transform: translateY(-10px) rotate(calc(-4deg + var(--i) * 3deg)); transform-origin: left center;
  transition: opacity .35s ease, transform .55s cubic-bezier(.2,.8,.2,1), background .25s ease;
}
.nav-group:hover .nav-fan a, .nav-group.open .nav-fan a, .nav-group:focus-within .nav-fan a {
  opacity: 1; transform: none; transition-delay: calc(var(--i) * 80ms + 60ms), calc(var(--i) * 80ms + 60ms), 0s;
}
.nav-fan a:hover, .nav-fan a:focus-visible { background: rgb(255 255 255 / .045); color: var(--pearl); }
.nav-fan a[aria-current] { color: rgb(var(--ice)); }
.nav-fan small { font: italic 400 14px/1.3 var(--serif); font-variant: normal; text-transform: none; letter-spacing: .01em; color: var(--dim); }
@media (prefers-reduced-motion: reduce) { .nav-fan, .nav-fan a { transition: none; transform: none; } }
/* a phone: one line — the mark and a menu, and the menu holds every page and the house
   (a tester on Chrome Android, 2026-10-10: "Header doesn't work on mobile", "Primary nav is
   gone on the product page"); the two-line wrap stood over a fifth of the screen */
.menu-button, .menu-sheet { display: none; }
@media (max-width: 700px) {
  .bar { padding: 14px var(--gutter); }
  .bar.over { padding-block: 10px; }
  .bar .nav { display: none; }
  .mark { font-size: 14px; letter-spacing: .36em; }
  .menu-button {
    display: inline-flex; align-items: center; gap: 10px; padding: 8px 0 8px 14px; margin-right: -2px;
    background: none; border: 0; cursor: pointer; color: var(--moonlight);
    font-family: var(--serif); font-variant: small-caps; text-transform: lowercase; letter-spacing: .22em; font-size: 14px;
  }
  .menu-button i { position: relative; width: 16px; height: 1px; background: currentColor; }
  .menu-button i::after { content: ""; position: absolute; left: 4px; right: 0; top: 5px; height: 1px; background: currentColor; }
  .menu-sheet {
    display: grid; position: fixed; inset: 0; z-index: 40; place-content: center; justify-items: center; gap: 28px;
    padding: 80px var(--gutter) 60px; background: rgb(5 7 13 / .97); opacity: 0; transition: opacity .3s ease;
  }
  .menu-sheet[hidden] { display: none; }
  .menu-sheet.open { opacity: 1; }
  .menu-sheet nav { display: grid; justify-items: center; gap: 18px; outline: none; }
  .menu-sheet nav a, .menu-house {
    font-family: var(--serif); font-variant: small-caps; text-transform: lowercase; text-decoration: none;
    letter-spacing: .26em; font-size: 21px; color: var(--pearl);
  }
  .menu-sheet nav a[aria-current] { color: rgb(var(--ice)); }
  .menu-house { font-size: 13px; letter-spacing: .32em; color: var(--dim); border-top: 1px solid var(--line); padding-top: 22px; }
  .menu-close { position: absolute; top: 12px; right: calc(var(--gutter) - 8px); width: 44px; height: 44px; padding: 10px;
    background: none; border: 0; cursor: pointer; }
  .menu-close svg { width: 22px; height: 22px; fill: none; stroke: var(--moonlight); stroke-width: 1.6; stroke-linecap: round; }
  body.menu-open { overflow: hidden; }
}

/* ---- the find (a page's first screen) ------------------------------------ */

.find {
  min-height: 100svh; display: grid; grid-template-rows: 1fr auto auto; justify-items: center; align-items: end;
  padding: 92px var(--gutter) 7vh; text-align: center; position: relative;
}
.find .stage { position: relative; width: min(72vh, 94vw, 760px); aspect-ratio: 1 / 1; align-self: center; }
.find .stage canvas, .find .stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.find .stage .lit { opacity: 0; }
.find .stage .glow {
  position: absolute; inset: -18%; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 46%, rgb(var(--fam-reverb) / .26) 0%, rgb(var(--fam-reverb) / .07) 32%, transparent 62%);
  filter: blur(14px);
}
.find .stage .ground {
  position: absolute; left: 14%; right: 14%; bottom: 3%; height: 9%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgb(0 0 0 / .85), transparent 70%); filter: blur(6px); z-index: -1;
}
.find .lore { max-width: 30ch; margin: 2vh auto 0; }
.find .under { margin-top: 5vh; display: grid; justify-items: center; gap: 10px; color: var(--dim); font-size: 13px; }
.find .under .line { width: 1px; height: 46px; background: linear-gradient(var(--moonlight), transparent); opacity: .5; }

.rise { opacity: 0; transform: translateY(12px); }
.awake .rise { animation: settle 1.6s cubic-bezier(.2,.7,.2,1) forwards; }
.awake .rise.r1 { animation-delay: .2s; }
.awake .rise.r2 { animation-delay: .9s; }
.awake .rise.r3 { animation-delay: 2.4s; }
.awake .rise.r4 { animation-delay: 3.2s; }
.awake .find .stage .lit, .awake .find .stage .glow { animation: lights 2.4s ease-out 1.5s forwards; }
@keyframes settle { to { opacity: 1; transform: none; } }
@keyframes lights { 0% { opacity: 0; } 35% { opacity: .55; } 55% { opacity: .35; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .rise, .find .stage .lit, .find .stage .glow { opacity: 1 !important; transform: none !important; animation: none !important; }
  canvas.sky { display: none; }
}

/* ---- chapters ------------------------------------------------------------ */

.chapter { padding: clamp(64px, 11vh, 128px) var(--gutter); max-width: 1180px; margin: 0 auto; }
.chapter > .label { margin-bottom: 22px; }
.chapter > h2 { max-width: 18ch; margin-bottom: 28px; }
.chapter .text { max-width: var(--measure); }
.text > .label { margin-bottom: 18px; }
.text > h2 { margin-bottom: 26px; }
.text > h3 { margin-bottom: 14px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.split.flip > :first-child { order: 2; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split.flip > :first-child { order: 0; } }
.rule { height: 1px; background: linear-gradient(90deg, transparent, var(--line-2), transparent); border: 0; margin: 0 auto; max-width: 900px; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); }
.reveal.seen { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---- a dome grid, drawn by js/domes.js ----------------------------------- */

.domes { width: 100%; aspect-ratio: 1 / 1; }
.figure { display: grid; justify-items: center; gap: 14px; }
.figure figcaption, .figure .cap { font-family: var(--serif); font-style: italic; color: var(--moonlight); font-size: 17px; text-align: center; }

/* ---- the lore cards: the deck's own, as printed (site/tools/cards.py) ------ */

.deck { display: grid; grid-template-columns: repeat(2, minmax(0, 380px)); justify-content: center; gap: clamp(16px, 3vw, 40px); margin-top: 56px; }
@media (max-width: 860px) { .deck { grid-template-columns: 1fr; max-width: 380px; margin-inline: auto; } }
.lorecard {
  display: block; width: 100%; height: auto; aspect-ratio: 63 / 88; border-radius: 4.4%/3.2%;
  box-shadow: 0 40px 80px -40px rgb(0 0 0 / .9), 0 0 0 1px rgb(0 0 0 / .5);
  rotate: var(--tilt, 0deg); transition: rotate .6s cubic-bezier(.2,.7,.2,1), translate .6s cubic-bezier(.2,.7,.2,1), opacity 1.1s ease;
}
.lorecard:hover { rotate: 0deg; translate: 0 -4px; }

/* ---- a sound card: the real playing card, turned by a hover ------------------- */

.sounds { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: clamp(16px, 2.4vw, 30px); margin-top: 56px; }
.sound {
  --hue: var(--fam-reverb);
  position: relative; display: block; width: 100%; aspect-ratio: 63 / 88; padding: 0; border: 0; background: none;
  perspective: 1100px; color: inherit; font: inherit;
}
.sound .faces {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.2,.75,.2,1);
}
.sound[aria-pressed="true"] .faces { transform: rotateY(180deg); }
.sound.lifted { visibility: hidden; }
.sound .face {
  position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 4.4%/3.2%;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 30px 50px -34px rgb(0 0 0 / .95), 0 0 0 1px rgb(0 0 0 / .55);
}
.sound .back { transform: rotateY(180deg); }
/* the card's two icons: on the pointer's arrival (always on a touch screen) */
.card-icon {
  position: absolute; bottom: 3.5%; z-index: 3; width: 34px; height: 34px; border-radius: 50%; padding: 0; cursor: pointer;
  display: grid; place-items: center; background: rgb(5 7 13 / .84); border: 1px solid rgb(255 255 255 / .2);
  opacity: 0; transform: translateY(4px); transition: opacity .25s ease, transform .25s ease, border-color .25s ease, background .25s ease;
}
.card-icon svg { width: 16px; height: 16px; fill: none; stroke: var(--pearl); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.card-icon:hover, .card-icon:focus-visible { border-color: rgb(var(--hue) / .9); background: rgb(var(--hue) / .25); outline: none; }
.card-turn { right: 5%; }
.card-look { right: calc(5% + 42px); }
.sound:hover .card-icon, .sound:focus-within .card-icon { opacity: 1; transform: none; }
@media (hover: none) { .card-icon { opacity: .85; transform: none; } }

/* the large view */
.card-veil {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 4vh 16px;
  background: rgb(3 4 9 / 0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0);
  transition: background .45s ease, backdrop-filter .45s ease;
}
.card-veil.on { background: rgb(3 4 9 / .78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sound.card-large { width: min(88vw, calc(88vh * 63 / 88), 560px); filter: drop-shadow(0 50px 80px rgb(0 0 0 / .8)); }
.card-large .card-icon { opacity: 1; transform: none; width: 42px; height: 42px; bottom: -58px; }
.card-large .card-icon svg { width: 20px; height: 20px; }
.card-large .card-turn { right: calc(50% + 6px); }
.card-large .card-close { left: calc(50% + 6px); }
.turnhint { margin-top: 18px; text-align: center; }

/* ---- the strata: the finish, bottom to top -------------------------------- */

.strata { display: grid; gap: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 40px 90px -50px rgb(0 0 0 / .9); }
.stratum { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding: 15px 20px; font-size: 14.5px; }
.stratum span:last-child { font-family: var(--serif); font-style: italic; opacity: .8; }
.stratum.clear { background: linear-gradient(180deg, rgb(255 255 255 / .16), rgb(255 255 255 / .05)); color: var(--pearl); backdrop-filter: blur(2px); }
.stratum.gold { background: linear-gradient(90deg, #8a6a2c, #d8b56a 40%, #9c7a35); color: #1d1608; }
.stratum.mist { background: linear-gradient(90deg, #b9c9e6, #dfe8f7 50%, #b4c4e2); color: #1b2335; }
.stratum.pearl { background: linear-gradient(90deg, #e9e5dc, #f7f4ee 50%, #e2ddd2); color: #2a2722; }
.stratum.primer { background: #f2f2ef; color: #34342f; }
.stratum.wax { background: linear-gradient(90deg, #c99a45, #f0cf86 45%, #d4a24e); color: #2a1d06; }
.stratum.sanded { background: linear-gradient(90deg, #e4e1da, #f3f1ec 50%, #dedad2); color: #34322d; }
.stratum.print { background: repeating-linear-gradient(0deg, #cfcac0 0 3px, #c6c1b6 3px 4px); color: #3a3731; }

/* ---- specs ---------------------------------------------------------------- */

.specs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); border-top: 1px solid var(--line-2); margin: 0; }
.specs dt, .specs dd { margin: 0; padding: 18px 0; border-bottom: 1px solid var(--line); }
.specs dt { font-family: var(--serif); font-variant: small-caps; text-transform: lowercase; letter-spacing: .2em; color: var(--moonlight); padding-right: 20px; }
.specs dd { color: var(--stone); }
.specs dd .small { display: block; margin-top: 4px; }
@media (max-width: 640px) { .specs { grid-template-columns: 1fr; } .specs dt { border-bottom: 0; padding-bottom: 2px; } .specs dd { padding-top: 0; } }

/* ---- doors and buttons ------------------------------------------------------ */

.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 48px; }
a.door, button.door {
  --cast: var(--ice);
  position: relative; display: block; padding: 24px 26px 24px 28px; text-decoration: none; color: inherit; text-align: left;
  background: linear-gradient(180deg, #0d0f16, #090b11); border: 1px solid #1a1d27; border-radius: 8px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .04); transition: border-color .3s ease, box-shadow .3s ease; font: inherit;
}
a.door::before, button.door::before {
  content: ""; position: absolute; left: 0; top: 16%; bottom: 16%; width: 2px; border-radius: 2px;
  background: rgb(var(--cast) / .55); box-shadow: 0 0 18px 2px rgb(var(--cast) / .35); transition: box-shadow .3s ease, background .3s ease;
}
a.door:hover, a.door:focus-visible { border-color: rgb(var(--cast) / .45); box-shadow: inset 0 1px 0 rgb(255 255 255 / .05), 0 24px 60px -30px rgb(var(--cast) / .6); outline: none; }
a.door:hover::before, a.door:focus-visible::before { background: rgb(var(--cast) / .95); box-shadow: 0 0 28px 4px rgb(var(--cast) / .6); }
.door h3 { margin-bottom: 6px; }
.door p { margin: 0; color: var(--moonlight); font-size: 15px; }
.door.magenta { --cast: var(--magenta); }
.door.gold { --cast: 201 164 92; }

.button {
  display: inline-flex; align-items: center; gap: 12px; padding: 14px 26px; border-radius: 999px;
  font: 400 15px/1 var(--serif); letter-spacing: .14em; font-variant: small-caps; text-transform: lowercase;
  color: var(--pearl); text-decoration: none; cursor: pointer;
  background: linear-gradient(180deg, rgb(var(--ice) / .16), rgb(var(--ice) / .06)); border: 1px solid rgb(var(--ice) / .45);
  box-shadow: 0 0 0 0 rgb(var(--ice) / 0), inset 0 1px 0 rgb(255 255 255 / .08); transition: box-shadow .35s ease, border-color .35s ease;
}
.button:hover, .button:focus-visible { border-color: rgb(var(--ice) / .9); box-shadow: 0 0 34px -4px rgb(var(--ice) / .55), inset 0 1px 0 rgb(255 255 255 / .1); outline: none; }
.button[disabled] { opacity: .5; cursor: default; }

/* ---- forms ---------------------------------------------------------------- */

.form { display: grid; gap: 14px; max-width: 460px; }
.form label { display: grid; gap: 6px; font-size: 14px; color: var(--moonlight); }
.form input, .form textarea, .form select {
  font: 300 16px/1.4 var(--sans); color: var(--pearl); padding: 13px 15px; border-radius: 8px;
  background: rgb(255 255 255 / .03); border: 1px solid var(--line-2); transition: border-color .3s ease, background .3s ease;
}
.form textarea { min-height: 130px; resize: vertical; }
.form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: rgb(var(--ice) / .6); background: rgb(255 255 255 / .05); }
.form .said { min-height: 1.5em; font-family: var(--serif); font-style: italic; color: var(--moonlight); }
.form .said.warm { color: var(--pearl); }
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }

/* ---- footer -------------------------------------------------------------------- */

.foot { padding: 12vh var(--gutter) 6vh; text-align: center; border-top: 1px solid var(--line); margin-top: 6vh; }
.foot-lore { font-family: var(--serif); font-style: italic; color: var(--moonlight); margin: 0 auto 26px; max-width: 34ch; }
.foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-bottom: 26px; }
.foot-nav a, .foot-small a { text-decoration: none; font-family: var(--serif); font-variant: small-caps; text-transform: lowercase; letter-spacing: .2em; font-size: 14px; color: var(--moonlight); }
.foot-nav a:hover, .foot-small a:hover { color: var(--pearl); }
.foot-small { margin: 0 auto; color: var(--dim); font-size: 13px; }

/* ---- the morph you can hold, the treadle, the light's language ---------------- */

.morph { --blend: var(--ice); position: relative; display: grid; justify-items: center; gap: 22px; isolation: isolate; }
.morph::before { content: ""; position: absolute; left: 50%; top: 34%; width: 120%; aspect-ratio: 1; translate: -50% -50%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--blend) / .22) 0%, rgb(var(--blend) / .07) 38%, transparent 66%); filter: blur(10px); }
.morph .domes { max-width: 300px; }
.stomp {
  width: 112px; height: 112px; border-radius: 50%; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
  font: 400 14px/1 var(--serif); font-variant: small-caps; text-transform: lowercase; letter-spacing: .24em; color: var(--moonlight);
  background: radial-gradient(circle at 50% 40%, #3a3d45 0%, #23252b 55%, #15161a 100%);
  border: 1px solid #2c2f37; box-shadow: 0 0 0 10px rgb(255 255 255 / .02), 0 0 0 11px rgb(255 255 255 / .06), 0 22px 40px -18px rgb(0 0 0 / .9), inset 0 2px 0 rgb(255 255 255 / .06);
  transition: transform .12s ease, box-shadow .3s ease, color .3s ease;
}
.stomp:hover { color: var(--pearl); }
.stomp.down { transform: translateY(2px) scale(.985); color: var(--pearl); box-shadow: 0 0 0 10px rgb(var(--magenta) / .06), 0 0 0 11px rgb(var(--magenta) / .35), 0 0 46px -6px rgb(var(--magenta) / .55), inset 0 2px 0 rgb(255 255 255 / .04); }
.morph .cap { min-height: 1.6em; }

.expression { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: center; justify-items: center; }
.expression svg { width: 100%; max-width: 260px; }
.expression .domes { max-width: 220px; }
.expression figcaption { grid-column: 1 / -1; }

.language { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 3vw, 44px); margin: 56px 0 48px; }
@media (max-width: 760px) { .language { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.language .domes { max-width: 210px; }

.allude { margin: 64px auto 0; text-align: center; font-family: var(--serif); font-style: italic; color: var(--moonlight); max-width: none; }

.close { text-align: center; }
.close > h2, .close > .lede { margin-inline: auto; }
.close .doors { text-align: left; }

/* ---- the house's door ------------------------------------------------------ */

.door-find { grid-template-rows: auto auto auto auto; align-content: center; gap: 0; }
.door-find .stage { display: block; width: min(52vh, 80vw, 520px); }
.door-find .stage img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.door-find .stage:hover img { transform: translateY(-4px); }
.page-door .find .stage .glow { background: radial-gradient(circle at 50% 42%, rgb(var(--fam-pitch) / .30) 0%, rgb(var(--fam-pitch) / .08) 30%, transparent 62%); }
.threshold { width: min(980px, 100%); margin-top: 6vh; }
.page-door .foot { margin-top: 0; }

.download { margin-top: 30px; display: grid; gap: 12px; justify-items: start; }
.lost { min-height: 80svh; align-content: center; grid-template-rows: auto auto auto; }

.order-find { grid-template-rows: auto 1fr auto auto; }
.soon { font-size: clamp(44px, 7vw, 88px); line-height: 1; letter-spacing: -.01em; margin: 2vh 0 1vh; color: var(--pearl); }
.order-find .lede { max-width: 30ch; margin-inline: auto; color: var(--moonlight); }

@media (max-width: 700px) {
  .sounds { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 18px; scrollbar-width: none; }
  .sounds::-webkit-scrollbar { display: none; }
  .sound { flex: 0 0 78vw; scroll-snap-align: center; }
}

/* ---- a universe of sounds ---------------------------------------------------- */

.universe { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; padding: 120px var(--gutter) 12vh; overflow-x: clip; }
.constellation { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
.universe-words { position: relative; text-align: center; align-self: center; max-width: 760px; margin: 0 auto; isolation: isolate; }
.universe-words::before { content: ""; position: absolute; inset: -18% -22%; z-index: -1; background: radial-gradient(ellipse at 50% 50%, rgb(5 7 13 / .92) 0%, rgb(5 7 13 / .7) 45%, transparent 72%); }
.universe-words h1 { font-size: clamp(46px, 8vw, 104px); line-height: .98; letter-spacing: -.015em; margin: 16px 0 24px; }
.universe-words .lede { max-width: 34ch; margin: 0 auto; color: var(--stone); }

.fan { --w: clamp(112px, 13vw, 184px); position: relative; height: calc(var(--w) * 1.62); margin: 5vh auto 0; width: min(100%, 980px); }
.fan .sound.in-fan {
  position: absolute; left: 50%; bottom: 0; width: var(--w); margin-left: calc(var(--w) / -2); aspect-ratio: 63 / 88;
  transform-origin: 50% 210%; transform: rotate(calc(var(--i) * 6.4deg));
  transition: transform .6s cubic-bezier(.2,.7,.2,1); z-index: 1;
}
.fan .sound.in-fan:hover, .fan .sound.in-fan:focus-visible { transform: rotate(calc(var(--i) * 6.4deg)) translateY(-28px); z-index: 3; }
/* at rest, one card is already drawn from the hand: superlative (the player, 2026-10-10) */
.fan:not(:hover) .sound.in-fan[data-name="superlative"] { transform: rotate(calc(var(--i) * 6.4deg)) translateY(-34px); z-index: 3; }
@media (max-width: 700px) {
  .universe { padding-bottom: 6vh; }
  .fan { --w: 92px; height: calc(var(--w) * 1.75); margin-top: 4vh; }
  .fan .sound.in-fan { transform-origin: 50% 330%; transform: rotate(calc(var(--i) * 3.6deg)); }
  .fan .sound.in-fan:hover { transform: rotate(calc(var(--i) * 3.6deg)) translateY(-14px); }
  .fan:not(:hover) .sound.in-fan[data-name="superlative"] { transform: rotate(calc(var(--i) * 3.6deg)) translateY(-18px); }
}

.facedown { position: relative; height: clamp(300px, 34vw, 420px); }
.facedown .back {
  position: absolute; left: 50%; top: 50%; width: clamp(170px, 18vw, 230px); aspect-ratio: 63 / 88; border-radius: 14px;
  translate: -50% -50%; rotate: var(--r); transition: rotate .7s cubic-bezier(.2,.7,.2,1), translate .7s cubic-bezier(.2,.7,.2,1);
  background:
    radial-gradient(circle at 34% 33%, #6f737b 0 4.2%, #3e4148 5.6%, transparent 6.2%),
    radial-gradient(circle at 50% 33%, #6f737b 0 4.2%, #3e4148 5.6%, transparent 6.2%),
    radial-gradient(circle at 66% 33%, #6f737b 0 4.2%, #3e4148 5.6%, transparent 6.2%),
    radial-gradient(circle at 34% 45%, #6f737b 0 4.2%, #3e4148 5.6%, transparent 6.2%),
    radial-gradient(circle at 50% 45%, #6f737b 0 4.2%, #3e4148 5.6%, transparent 6.2%),
    radial-gradient(circle at 66% 45%, #6f737b 0 4.2%, #3e4148 5.6%, transparent 6.2%),
    radial-gradient(circle at 34% 57%, #6f737b 0 4.2%, #3e4148 5.6%, transparent 6.2%),
    radial-gradient(circle at 50% 57%, #6f737b 0 4.2%, #3e4148 5.6%, transparent 6.2%),
    radial-gradient(circle at 66% 57%, #6f737b 0 4.2%, #3e4148 5.6%, transparent 6.2%),
    radial-gradient(ellipse 80% 55% at 50% 45%, rgb(var(--ice) / .07), transparent 70%),
    linear-gradient(180deg, #232429, #1b1c20);
  box-shadow: 0 1px 0 rgb(255 255 255 / .06) inset, 0 40px 80px -40px rgb(0 0 0 / .95), 0 0 0 1px rgb(0 0 0 / .6);
  overflow: hidden;
}
.facedown .back::after {
  content: "moonstone"; position: absolute; left: 0; right: 0; bottom: 11%; text-align: center;
  font: 400 11px/1 var(--serif); letter-spacing: .38em; padding-left: .38em; color: #6e7280; font-variant: small-caps;
}
.facedown .back::before {
  content: ""; position: absolute; inset: -40%; background: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / .09) 50%, transparent 58%);
  translate: -60% 0; transition: translate 1.4s ease;
}
.facedown:hover .back::before { translate: 60% 0; }
.facedown .back:nth-child(1) { --r: -11deg; translate: -78% -48%; }
.facedown .back:nth-child(2) { --r: 2deg; z-index: 1; }
.facedown .back:nth-child(3) { --r: 13deg; translate: -22% -46%; }
.facedown:hover .back:nth-child(1) { --r: -15deg; translate: -92% -50%; }
.facedown:hover .back:nth-child(3) { --r: 17deg; translate: -8% -48%; }

.platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; max-width: 760px; }
.platform p { font-variant-numeric: tabular-nums; }

/* ---- a carousel of real screens -------------------------------------------- */

.carousel { margin: 0; display: grid; gap: 14px; justify-items: center; }
.carousel .slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; width: min(100%, 440px); border-radius: 18px;
  box-shadow: 0 50px 100px -50px rgb(0 0 0 / .95), 0 0 0 1px rgb(255 255 255 / .06); }
.carousel .slides::-webkit-scrollbar { display: none; }
.carousel .slide { flex: 0 0 100%; scroll-snap-align: center; margin: 0; display: grid; }
.carousel .slide img { width: 100%; height: auto; display: block; }
.carousel .slide figcaption { padding: 12px 16px 14px; text-align: center; font-family: var(--serif); font-style: italic; color: var(--moonlight); background: #0b0d14; }
.carousel .dots { display: flex; gap: 10px; }
.carousel .dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; background: rgb(255 255 255 / .2); cursor: pointer; }
.carousel .dots button[aria-selected="true"] { background: rgb(var(--ice)); box-shadow: 0 0 10px rgb(var(--ice) / .7); }

.deckrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); margin-top: 44px; }
.deckrow img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 30px 60px -34px rgb(0 0 0 / .95), 0 0 0 1px rgb(0 0 0 / .5); }
.deckrow img:nth-child(odd) { rotate: -1.2deg; } .deckrow img:nth-child(even) { rotate: 1deg; }
@media (max-width: 760px) { .deckrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- features: a tile each, a nine-light glyph showing the thing ------------- */

.features { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1000px) { .features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.features li {
  position: relative; padding: 18px 18px 20px; border-radius: 12px; min-height: 100%;
  background: linear-gradient(180deg, rgb(255 255 255 / .035), rgb(255 255 255 / .012));
  border: 1px solid var(--line); transition: border-color .3s ease, background .3s ease;
}
.features li:hover { border-color: var(--line-2); background: linear-gradient(180deg, rgb(255 255 255 / .05), rgb(255 255 255 / .02)); }
.features .glyph { width: 64px; height: 64px; margin: 0 0 12px -4px; }
.features h3 { font-size: 19px; margin: 0 0 6px; color: var(--pearl); }
.features p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--moonlight); }
@media (max-width: 720px) { .features li { padding: 14px 14px 16px; } .features .glyph { width: 52px; height: 52px; } .features h3 { font-size: 17px; } .features p { font-size: 13.5px; } }

/* Things you press, hold or drag are not text: no selection, no force-click
   Look Up, no callout, no picture dragged off the page. */
.stomp, .morph, .sound, .fan, .features li, .deckrow, .carousel, .find .stage, .facedown, .lorecard, canvas, button, a.door {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
img { -webkit-user-drag: none; }

.footnote { margin: 18px 0 0; max-width: none; }

/* ---- the ones it keeps: a face-down card, its family, its name, its whisper ---- */

.kept { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-top: 48px; }
.keptcard {
  --hue: var(--fam-reverb);
  display: grid; grid-template-columns: 74px 1fr; gap: 16px; align-items: center; padding: 16px 18px 16px 16px; border-radius: 14px;
  background: linear-gradient(180deg, rgb(255 255 255 / .03), rgb(255 255 255 / .01)); border: 1px solid var(--line);
  transition: border-color .35s ease, box-shadow .35s ease;
}
.keptcard:hover { border-color: rgb(var(--hue) / .45); box-shadow: 0 24px 50px -36px rgb(var(--hue) / .7); }
.keptcard .back {
  width: 74px; aspect-ratio: 63 / 88; border-radius: 8px; position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 34% 36%, #6f737b 0 5%, #3e4148 6.6%, transparent 7.3%),
    radial-gradient(circle at 50% 36%, #6f737b 0 5%, #3e4148 6.6%, transparent 7.3%),
    radial-gradient(circle at 66% 36%, #6f737b 0 5%, #3e4148 6.6%, transparent 7.3%),
    radial-gradient(circle at 34% 50%, #6f737b 0 5%, #3e4148 6.6%, transparent 7.3%),
    radial-gradient(circle at 50% 50%, #6f737b 0 5%, #3e4148 6.6%, transparent 7.3%),
    radial-gradient(circle at 66% 50%, #6f737b 0 5%, #3e4148 6.6%, transparent 7.3%),
    radial-gradient(circle at 34% 64%, #6f737b 0 5%, #3e4148 6.6%, transparent 7.3%),
    radial-gradient(circle at 50% 64%, #6f737b 0 5%, #3e4148 6.6%, transparent 7.3%),
    radial-gradient(circle at 66% 64%, #6f737b 0 5%, #3e4148 6.6%, transparent 7.3%),
    radial-gradient(ellipse 80% 55% at 50% 50%, rgb(var(--hue) / .14), transparent 70%),
    linear-gradient(180deg, #24252a, #1b1c20);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .6), 0 14px 26px -16px rgb(0 0 0 / .9);
}
.keptcard .back::before { content: ""; position: absolute; inset: -40%; background: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / .1) 50%, transparent 58%); translate: -60% 0; transition: translate 1.3s ease; }
.keptcard:hover .back::before { translate: 60% 0; }
.keptcard .words p { margin: 0; max-width: none; }
.keptcard .fam { font: 600 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--hue)); }
.keptcard h3 { font-size: 22px; margin: 6px 0 6px; }
.keptcard .whisper { font-family: var(--serif); font-style: italic; color: var(--stone); font-size: 15.5px; line-height: 1.45; }
.keptcard .state { margin-top: 8px !important; font: 400 11px/1 var(--serif); font-variant: small-caps; text-transform: lowercase; letter-spacing: .26em; color: var(--dim); }

/* ---- the exchange (and the hero every door-page shares) -------------------------- */

.door-hero { text-align: center; padding: clamp(130px, 20vh, 200px) var(--gutter) 2vh; }
.door-hero h1 { font-size: clamp(40px, 6.5vw, 82px); line-height: 1.02; margin: 16px auto 22px; max-width: 14ch; }
.door-hero .label { margin: 0 auto; max-width: none; }
.door-hero .lede { margin: 0 auto; max-width: 36ch; }
.exchange-door { display: grid; grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; gap: clamp(24px, 5vw, 72px); }
@media (max-width: 760px) { .exchange-door { grid-template-columns: 1fr; } }
.exchange-door h3, .offer-form h3 { margin-bottom: 4px; }
.room-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.link-button { background: none; border: 0; padding: 4px 0; color: var(--moonlight); cursor: pointer; font: 400 14px/1 var(--serif); font-variant: small-caps; text-transform: lowercase; letter-spacing: .2em; }
.link-button:hover, .link-button:focus-visible { color: var(--pearl); outline: none; }
.room-block { margin-top: 56px; }
.room-block > .label { margin-bottom: 18px; }

.fragments { display: flex; flex-wrap: wrap; gap: 22px; }
.fragment {
  position: relative; width: 112px; height: 112px; border-radius: 50%; border: 1px solid rgb(var(--ice) / .3); cursor: pointer;
  background: radial-gradient(circle at 40% 35%, #2b2f3a, #12141b 70%); display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 0 0 8px rgb(255 255 255 / .02), 0 20px 40px -20px rgb(0 0 0 / .9);
}
.fragment-glow { position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle, rgb(var(--ice) / .55), rgb(var(--magenta) / .25) 45%, transparent 70%); filter: blur(6px); animation: breathe 3.6s ease-in-out infinite; }
.fragment-word { position: relative; font: 400 13px/1 var(--serif); font-variant: small-caps; letter-spacing: .3em; color: var(--pearl); }
.fragment:hover { border-color: rgb(var(--ice) / .8); }
@keyframes breathe { 0%, 100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.06); } }

.prints { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 22px; }
.print { --hue: var(--fam-reverb); display: grid; gap: 8px; }
.print > img { width: 100%; height: auto; border-radius: 4.4%/3.2%; box-shadow: 0 26px 46px -30px rgb(0 0 0 / .95), 0 0 0 1px rgb(0 0 0 / .5); }
.kept-face {
  aspect-ratio: 63 / 88; border-radius: 4.4%/3.2%; padding: 12% 10%; display: grid; align-content: start; gap: 6px;
  background: radial-gradient(ellipse 90% 60% at 50% 45%, rgb(var(--hue) / .14), transparent 70%), linear-gradient(180deg, #24252a, #1b1c20);
  box-shadow: 0 26px 46px -30px rgb(0 0 0 / .95), 0 0 0 1px rgb(0 0 0 / .5);
}
.kept-face .fam { margin: 0; font: 600 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--hue)); }
.kept-face h3 { font-size: 24px; margin: 0; }
.kept-face .whisper { margin: 4px 0 10px; font-family: var(--serif); font-style: italic; font-size: 14.5px; line-height: 1.45; color: var(--stone); max-width: none; }
.kept-face .face-to-make { width: 70%; aspect-ratio: 1; margin: 8px auto 0; }
.print-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.serial { font-family: var(--serif); color: var(--moonlight); font-size: 14px; letter-spacing: .06em; }
.print-meta input[type=checkbox] { width: 20px; height: 20px; accent-color: rgb(var(--ice)); }

.offers { display: grid; gap: 14px; }
.offer { padding: 16px 18px; border-radius: 12px; border: 1px solid var(--line); background: rgb(255 255 255 / .02); display: grid; gap: 8px; }
.offer-who { margin: 0; font-family: var(--serif); font-size: 18px; color: var(--pearl); }
.offer-lane { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13px; }
.offer-acts { display: flex; gap: 22px; }
.offer-form { max-width: none; margin-top: 30px; }
.offer-form fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin: 0 0 14px; }
.offer-form legend { font-family: var(--serif); font-variant: small-caps; letter-spacing: .2em; color: var(--moonlight); padding: 0 8px; }
.offer-form fieldset > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.shop p { max-width: 46ch; }

.reveal-veil { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgb(3 4 9 / 0); transition: background .5s ease; }
.reveal-veil.on { background: rgb(3 4 9 / .86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.reveal-stage { display: grid; justify-items: center; gap: 22px; width: min(320px, 80vw); }
.seal { width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #303542, #12141b 70%);
  box-shadow: 0 0 0 1px rgb(var(--ice) / .35), 0 0 60px -10px rgb(var(--ice) / .5); position: relative; overflow: hidden; }
.seal::after { content: ""; position: absolute; inset: 20%; border-radius: 50%; background: radial-gradient(circle, rgb(255 255 255 / .9), rgb(var(--ice) / .5) 40%, transparent 70%); filter: blur(4px); animation: breathe 1.2s ease-in-out infinite; }
.reveal-veil.broken .seal { animation: crack .9s cubic-bezier(.5,0,.2,1) forwards; }
@keyframes crack { 0% { transform: scale(1); opacity: 1; } 40% { transform: scale(1.15); filter: brightness(2.2); } 100% { transform: scale(2.4); opacity: 0; height: 0; margin: -75px 0; } }
.reveal-card { width: 100%; opacity: 0; transform: translateY(26px) scale(.94); transition: opacity 1s ease .35s, transform 1.1s cubic-bezier(.2,.8,.2,1) .35s; }
.reveal-veil.broken .reveal-card { opacity: 1; transform: none; }
.reveal-words { margin: 0; font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--pearl); text-align: center; min-height: 1.5em; }
.form .button { justify-self: start; }

/* ---- the vault: a stone's presets --------------------------------------------------- */

.stone-door { display: grid; justify-content: center; }
.stone-door .text { max-width: 36rem; display: grid; gap: 4px; }
.stone-door h3 { margin-bottom: 8px; }
.stone-door .said { min-height: 1.5em; margin: 0 0 6px; font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--moonlight); }
.stone-door .said:empty { display: none; }
.stone-door .said.warm { color: var(--pearl); }
.stone-door .button { justify-self: start; margin-top: 10px; }
.stone-name { display: flex; align-items: baseline; gap: 14px; font-size: clamp(24px, 3vw, 34px); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.stone-name .label { font-size: 14px; }
.stone-name .label:empty { display: none; }
.stone-title { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.stone-title .stone-name { overflow-wrap: anywhere; }
.stone-serial { margin: 0; font-size: 13px; letter-spacing: .12em; color: var(--moonlight); font-variant-numeric: tabular-nums; }
.stone-title .said { margin: 0; min-height: 0; font-family: var(--serif); font-style: italic; color: var(--moonlight); }
.stone-title .said:empty { display: none; }
.stone-title .said.warm { color: var(--pearl); }
.name-form { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; }
.name-form input {
  min-width: 0; width: min(18rem, 70vw); padding: 6px 2px; border: 0; border-bottom: 1px solid rgb(var(--ice) / .6);
  background: transparent; color: var(--pearl); font: 400 clamp(22px, 2.6vw, 30px)/1.2 var(--serif); letter-spacing: .03em;
}
.name-form input:focus { outline: none; border-bottom-color: rgb(var(--ice)); }
.name-it { padding: 0; }

.kept-dates { display: flex; flex-wrap: wrap; gap: 10px; }
.kept-date {
  display: grid; gap: 2px; justify-items: start; padding: 10px 16px; border-radius: 12px; cursor: pointer; text-align: left;
  border: 1px solid var(--line-2); background: rgb(255 255 255 / .02); color: var(--stone); font: inherit;
}
.kept-date:hover, .kept-date:focus-visible { border-color: rgb(var(--ice) / .6); outline: none; }
.kept-date[aria-selected="true"] { border-color: rgb(var(--ice) / .85); box-shadow: 0 0 26px -8px rgb(var(--ice) / .55); }
.kept-when { font-family: var(--serif); font-size: 16px; color: var(--pearl); }
.kept-count { font-size: 13px; color: var(--moonlight); }
.kept-latest { font: 400 11px/1 var(--serif); font-variant: small-caps; letter-spacing: .24em; color: rgb(var(--ice)); }

.library { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 860px) { .library { grid-template-columns: 1fr; } }
.banks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 2vw, 22px); max-width: 680px; }
.bank { margin: 0; display: grid; gap: 4px; justify-items: center; }
/* the deep blues and violets would sink into the night on their own: lifted toward pearl */
.bank figcaption { font: 400 12px/1 var(--serif); font-variant: small-caps; letter-spacing: .26em; color: color-mix(in srgb, rgb(var(--hue)) 70%, var(--pearl)); }
.bank-face { position: relative; width: 100%; aspect-ratio: 1; }
.bank-face canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.bank-hits { position: absolute; inset: 7%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.slot-hit { margin: 16%; border: 0; border-radius: 50%; background: transparent; padding: 0; cursor: default; }
.slot-hit.filled { cursor: pointer; }
.slot-hit:focus-visible { outline: 1px solid rgb(var(--ice) / .9); outline-offset: 2px; }
.slot-hit.on { box-shadow: 0 0 0 1px rgb(255 255 255 / .55); }

.preset-card {
  --hue: var(--bank-0); position: sticky; top: 96px; padding: 22px 22px 18px; border-radius: 16px;
  border: 1px solid rgb(var(--hue) / .35); background: radial-gradient(ellipse 120% 80% at 0% 0%, rgb(var(--hue) / .10), transparent 60%), rgb(255 255 255 / .02);
}
@media (max-width: 860px) { .preset-card { position: static; } }
.preset-card .label { color: color-mix(in srgb, rgb(var(--hue)) 70%, var(--pearl)); font-size: 13px; }
.preset-card h3 { font-size: clamp(24px, 2.6vw, 30px); margin: 8px 0 14px; overflow-wrap: anywhere; }
.preset-sounds { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.preset-sounds li { --fam: var(--fam-nominal); display: grid; grid-template-columns: 52px 1fr auto; align-items: baseline; gap: 10px; }
.preset-sounds .row-no { font: 400 12px/1 var(--serif); font-variant: small-caps; letter-spacing: .2em; color: var(--dim); }
.preset-sounds .snd { font-family: var(--serif); font-size: 18px; color: var(--pearl); }
.preset-sounds .snd::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 9px; vertical-align: 1px;
  background: rgb(var(--fam)); box-shadow: 0 0 10px rgb(var(--fam) / .8); }
.preset-sounds .snd.quiet { color: var(--dim); font-size: 15px; }
.preset-sounds .snd.quiet::before { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
.preset-sounds .snd-fam { font-size: 12px; color: rgb(var(--fam)); letter-spacing: .08em; }
.preset-card .small { margin: 0; }

.preset-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.preset-list li { --hue: var(--bank-0); border-bottom: 1px solid var(--line); }
.preset-row {
  width: 100%; display: grid; grid-template-columns: 54px minmax(0, 1.2fr) minmax(0, 2fr) 76px; align-items: baseline; gap: 14px;
  padding: 12px 4px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.preset-row:hover, .preset-row:focus-visible { background: rgb(var(--hue) / .05); outline: none; }
.preset-row .row-place { font-family: var(--serif); color: color-mix(in srgb, rgb(var(--hue)) 70%, var(--pearl)); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.preset-row .row-name { font-family: var(--serif); font-size: 18px; color: var(--pearl); overflow-wrap: anywhere; }
.preset-row .row-name.quiet { color: var(--dim); font-style: italic; font-size: 16px; }
.preset-row .row-sounds { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.chip-sound { --fam: var(--fam-nominal); font-size: 14px; color: var(--stone); }
.chip-sound::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; background: rgb(var(--fam)); }
.preset-row .row-tempo { font-size: 13px; color: var(--moonlight); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 620px) {
  .preset-row { grid-template-columns: 44px minmax(0, 1fr); }
  .preset-row .row-sounds { grid-column: 2; }
  .preset-row .row-tempo { grid-column: 2; text-align: left; }
}
.take-home p { max-width: 46ch; }

/* ---- make it yours ---------------------------------------------------------------- */

.configure { display: grid; grid-template-columns: minmax(0, 1fr) 380px; min-height: 100svh; padding-top: 72px; }
@media (max-width: 900px) { .configure { grid-template-columns: 1fr; } }
.cfg-stage { position: sticky; top: 72px; height: calc(100svh - 72px);
  /* a pool of light under the stone, so a dark body stands out of the night */
  background: radial-gradient(ellipse 48% 40% at 50% 58%, rgb(150 170 210 / .2), rgb(120 140 190 / .06) 55%, transparent 75%); }
@media (max-width: 900px) { .cfg-stage { position: relative; top: 0; height: 64svh; } }
.cfg-stage canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.cfg-hint { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; margin: 0 auto; }
.cfg-panel {
  padding: 34px 28px 60px; border-left: 1px solid var(--line);
  background: linear-gradient(180deg, rgb(10 13 22 / .7), rgb(5 7 13 / .85)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
@media (max-width: 900px) { .cfg-panel { border-left: 0; border-top: 1px solid var(--line); } }
.cfg-title { font-size: 40px; margin: 10px 0 24px; }
.cfg-group { margin-bottom: 26px; }
.cfg-q { margin: 0 0 12px; font-family: var(--serif); font-variant: small-caps; text-transform: lowercase; letter-spacing: .24em; color: var(--moonlight); font-size: 14px; }
.cfg-words { margin: 10px 0 0; font-family: var(--serif); font-style: italic; color: var(--stone); font-size: 15px; min-height: 1.4em; }
.swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.swatch { --swatch: #eee; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; padding: 0;
  background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / .35), transparent 45%), var(--swatch);
  border: 2px solid rgb(255 255 255 / .12); box-shadow: 0 8px 18px -10px rgb(0 0 0 / .9); transition: transform .2s ease, border-color .2s ease; }
.swatch:hover { transform: scale(1.08); }
.swatch[aria-checked="true"] { border-color: var(--pearl); box-shadow: 0 0 0 4px rgb(var(--ice) / .25), 0 8px 18px -10px rgb(0 0 0 / .9); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { --hue: var(--ice); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: none; color: var(--moonlight); cursor: pointer;
  font: 400 14px/1 var(--serif); letter-spacing: .04em; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.pill:hover { color: var(--pearl); }
.pill[aria-checked="true"] { color: var(--pearl); border-color: rgb(var(--hue) / .8); background: rgb(var(--hue) / .14); }
.small-pills .pill { padding: 6px 11px; font-size: 13px; }
.cfg-group input[type=range] { width: 100%; accent-color: rgb(var(--ice)); }
.cfg-summary { font-family: var(--serif); font-size: 21px; color: var(--pearl); margin: 6px 0 12px; min-height: 1.4em; }
.page-configure .foot { margin-top: 0; }

/* ---- an undiscovered sound, half in an ancient alien script (js/alien.js) --------- */

.alien, .alien-word {
  font-family: "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols", "Noto Sans Symbols 2", "Noto Sans Math", "STIX Two Math", system-ui, sans-serif;
  font-style: normal; font-weight: 400;
  text-shadow: 0 0 7px rgb(var(--hue) / .75);
}
/* the sign and its letter share one cell and one baseline; only one shows */
.alien { display: inline-grid; align-items: baseline; justify-items: center; margin: 0 .02em; }
.alien > * { grid-area: 1 / 1; }
.alien-sign { animation: alien-sign 17s var(--when, 0s) infinite; }
/* the sign sets the width; its letter, when it shows, is centred over it */
.alien-letter { width: 0; display: flex; justify-content: center; opacity: 0; font-family: var(--serif); text-shadow: 0 0 10px rgb(var(--hue) / .9);
  animation: alien-letter 17s var(--when, 0s) infinite; }
.alien-word { letter-spacing: .05em; color: var(--pearl); }
/* a change burns: the sign flares as it lets go, its letter arrives alight and
   cools, and the sign flares again as it comes back */
@keyframes alien-sign {
  0%, 86% { opacity: 1; color: inherit; text-shadow: 0 0 7px rgb(var(--hue) / .75); }
  90% { opacity: 1; color: #fff; transform: scale(1.22); text-shadow: 0 0 5px #fff, 0 0 14px #fff, 0 0 24px rgb(var(--hue)), 0 0 46px rgb(var(--hue)), 0 0 80px rgb(var(--hue) / .7); }
  92%, 95% { opacity: 0; color: #fff; transform: scale(1.22); text-shadow: 0 0 5px #fff, 0 0 24px rgb(var(--hue)), 0 0 46px rgb(var(--hue)); }
  97% { opacity: 1; color: #fff; transform: scale(1.22); text-shadow: 0 0 5px #fff, 0 0 14px #fff, 0 0 24px rgb(var(--hue)), 0 0 46px rgb(var(--hue)), 0 0 80px rgb(var(--hue) / .7); }
  100% { opacity: 1; color: inherit; transform: none; text-shadow: 0 0 7px rgb(var(--hue) / .75); }
}
@keyframes alien-letter {
  0%, 90% { opacity: 0; color: #fff; text-shadow: 0 0 4px #fff, 0 0 14px rgb(var(--hue)), 0 0 30px rgb(var(--hue) / .9); }
  92% { opacity: 1; color: #fff; text-shadow: 0 0 5px #fff, 0 0 14px #fff, 0 0 26px rgb(var(--hue)), 0 0 50px rgb(var(--hue)), 0 0 84px rgb(var(--hue) / .7); }
  95% { opacity: 1; color: inherit; text-shadow: 0 0 10px rgb(var(--hue) / .8); }
  97%, 100% { opacity: 0; color: inherit; text-shadow: 0 0 10px rgb(var(--hue) / .8); }
}
@media (prefers-reduced-motion: reduce) { .alien-sign, .alien-letter { animation: none; } }

/* a word that will not hold still (alienCycle): letters turn to signs and back */
.alien-cycle { --hue: var(--ice); white-space: nowrap; }
.alien-cell { display: inline-grid; align-items: baseline; justify-items: center; }
.alien-cell > * { grid-area: 1 / 1; transition: opacity .45s ease; }
.cell-sign { width: 0; display: flex; justify-content: center; opacity: 0; font-style: normal;
  font-family: "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols", "Noto Sans Symbols 2", "Noto Sans Math", "STIX Two Math", system-ui, sans-serif;
  text-shadow: 0 0 9px rgb(var(--hue) / .85); }
.alien-cell.turned .cell-letter { opacity: 0; }
.alien-cell.turned .cell-sign { opacity: 1; }
.alien-cell.flare > * { animation: alien-flare 1.4s ease-out; }
@keyframes alien-flare {
  0% { color: #fff; transform: scale(1.18); text-shadow: 0 0 6px #fff, 0 0 18px #fff, 0 0 34px rgb(var(--hue)), 0 0 70px rgb(var(--hue)), 0 0 120px rgb(var(--hue) / .7); }
  100% { transform: none; }
}

/* ---- the journey: a diary down a line of light ---------------------------------------
   One number, --lit (js/journey.js: 0 at the first day, 1 at today), lights the rail
   behind the reader and waxes the big moon beside the story from new to full. */

.journey-hero { max-width: 1120px; margin: 0 auto; padding: clamp(140px, 22vh, 220px) var(--gutter) clamp(40px, 8vh, 90px); text-align: center; }
.journey-hero h1 { font-size: clamp(54px, 10vw, 128px); line-height: .98; letter-spacing: -.015em; margin: 18px 0 28px;
  text-shadow: 0 0 60px rgb(var(--ice) / .18); }
.journey-hero .lede { margin: 0 auto; max-width: 34ch; }
.journey-voyage { margin: 34px auto 0; font: italic 400 15px/1 var(--serif); letter-spacing: .2em; color: var(--dim); max-width: none; }
.journey-voyage::before, .journey-voyage::after { content: ""; display: inline-block; width: 46px; height: 1px; margin: 0 16px; vertical-align: middle;
  background: linear-gradient(90deg, transparent, var(--line-2)); }
.journey-voyage::after { background: linear-gradient(90deg, var(--line-2), transparent); }

.journey-wrap { display: grid; grid-template-columns: minmax(0, 760px) 220px; justify-content: center; gap: clamp(28px, 4vw, 64px);
  padding: 0 var(--gutter); }
@media (max-width: 1100px) { .journey-wrap { grid-template-columns: minmax(0, 760px); } .journey-moon { display: none !important; } }

.journey { position: relative; padding: 8px 0 110px; }
.journey::before, .journey::after { content: ""; position: absolute; left: 11px; top: 0; width: 1px; }
.journey::before { bottom: 80px; background: linear-gradient(transparent, var(--line-2) 2%, var(--line-2) 96%, transparent); }
/* the part of the line you have read, lit */
.journey::after { height: calc(var(--lit, 0) * (100% - 80px)); background: linear-gradient(rgb(var(--ice)), rgb(var(--magenta)));
  box-shadow: 0 0 8px rgb(var(--ice) / .8), 0 0 22px rgb(var(--magenta) / .45); border-radius: 1px; }

.month { position: relative; margin: 0 0 6px 46px; font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(64px, 11vw, 132px); line-height: 1; letter-spacing: -.02em; color: rgb(236 232 223 / .06);
  pointer-events: none; user-select: none; max-width: none; }

.post { position: relative; padding: 0 0 92px 46px; }
.post-moon {
  --phase: .5; position: absolute; left: 0; top: 2px; width: 23px; height: 23px; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle at 38% 34%, #fbfaf6, #dcdfe8 58%, #a9afbf);
  /* the dark of each day's moon: new at the first day, full today */
  box-shadow: inset calc((1 - var(--phase)) * 23px) 0 0 0 #090c16, 0 0 0 1px rgb(255 255 255 / .1);
  opacity: .5; transition: opacity .9s ease, filter .9s ease;
}
.post.passed .post-moon { opacity: 1; filter: drop-shadow(0 0 9px rgb(var(--ice) / .75)) drop-shadow(0 0 22px rgb(var(--magenta) / .35)); }
.post-glyph { position: absolute; right: 0; top: -6px; }
.post-glyph .glyph { width: 58px; height: 58px; }
.post-date { margin: 0; letter-spacing: .26em; }
.post h2 { font-size: clamp(30px, 4.4vw, 46px); margin: 10px 72px 20px 0; }
.post p { max-width: 60ch; }

/* the player's own words, glowing like a transmission */
.said-by { position: relative; margin: 26px 0; padding: 2px 0 2px 24px; }
.said-by::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px;
  background: linear-gradient(rgb(var(--ice)), rgb(var(--magenta))); box-shadow: 0 0 12px rgb(var(--magenta) / .55); }
.said-by p { margin: 0 0 8px; font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.8vw, 28px); line-height: 1.35;
  color: var(--pearl); text-shadow: 0 0 26px rgb(var(--magenta) / .3); max-width: 30ch; }
.said-by p:last-child { margin-bottom: 0; }

/* photographs, as prints laid on the table */
.post-photo { --tilt: -1.3deg; display: inline-block; margin: 34px 0 30px; padding: 12px 12px 16px; background: #f2efe8; border-radius: 3px;
  rotate: var(--tilt); box-shadow: 0 50px 90px -40px rgb(0 0 0 / .95), 0 0 0 1px rgb(0 0 0 / .45);
  transition: rotate .7s cubic-bezier(.2,.7,.2,1), translate .7s cubic-bezier(.2,.7,.2,1); max-width: 100%; }
.post-photo:hover { rotate: 0deg; translate: 0 -5px; }
.post-photo img, .post-photo video { width: auto; max-width: 100%; height: auto; max-height: min(560px, 72vh); border-radius: 1px; display: block; background: #111; }
.post-photo figcaption { margin: 13px 4px 0; max-width: 32ch; font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.4; color: #4a4b52; }
.photo-pair { display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-start; margin: 34px 0 30px; }
.photo-pair .post-photo { margin: 0; max-width: calc(50% - 13px); }
.photo-pair .post-photo:nth-child(2) { --tilt: 1.7deg; margin-top: 30px; }

/* the big moon, beside the story, waxing as you read */
.journey-moon { position: sticky; top: 140px; align-self: start; display: grid; justify-items: center; gap: 20px; padding-top: 30px; }
.big-moon {
  position: relative; width: 170px; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background:
    radial-gradient(circle at 30% 38%, rgb(60 64 80 / .16) 0 7%, transparent 8%),
    radial-gradient(circle at 62% 27%, rgb(60 64 80 / .12) 0 5%, transparent 6%),
    radial-gradient(circle at 56% 63%, rgb(60 64 80 / .14) 0 10%, transparent 11%),
    radial-gradient(circle at 34% 70%, rgb(60 64 80 / .1) 0 4%, transparent 5%),
    radial-gradient(circle at 74% 50%, rgb(60 64 80 / .12) 0 3.5%, transparent 4.5%),
    radial-gradient(circle at 42% 34%, #fbfaf5, #dfe1e8 52%, #a3a9ba 100%);
  box-shadow: 0 0 calc(24px + var(--lit, 0) * 80px) rgb(var(--ice) / calc(.1 + var(--lit, 0) * .3));
}
/* the dark of the moon slides away to the left: new before the first day, full at today */
.big-moon::after { content: ""; position: absolute; inset: -4%; border-radius: 50%; background: rgb(7 9 18 / .94);
  filter: blur(4px); transform: translateX(calc(var(--lit, 0) * -112%)); }
.journey-moon .label { letter-spacing: .34em; color: var(--moonlight); }

@media (max-width: 600px) {
  .post { padding-left: 38px; padding-bottom: 76px; }
  .month { margin-left: 38px; }
  .post-moon { width: 19px; height: 19px; left: 2px;
    box-shadow: inset calc((1 - var(--phase)) * 19px) 0 0 0 #090c16, 0 0 0 1px rgb(255 255 255 / .1); }
  .post-glyph .glyph { width: 44px; height: 44px; }
  .post h2 { margin-right: 54px; }
  .photo-pair .post-photo { max-width: 100%; }
  .photo-pair .post-photo:nth-child(2) { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .post-photo, .post-moon { transition: none; } }

/* ---- the stones: every one that has left the bench (built from pedals/<id>/stones.json) ----
   Each stone a plate: its picture as a print, glowing in its own colour (build.py glow_of),
   the day it went, who it went to, and the moon that night, drawn as it was. Above them a
   small chart: every stone a star, joined in the order they left. */

.stones-hero { padding-bottom: clamp(20px, 4vh, 40px); }
.stones-chart { max-width: 640px; margin: 0 auto; padding: 0 var(--gutter) clamp(40px, 8vh, 90px); text-align: center; }
.stones-sky { width: 100%; height: auto; overflow: visible; }
.star-lines line { stroke: rgb(var(--ice) / .35); stroke-width: 1; stroke-dasharray: 2 5; }
.stones-sky .star { cursor: pointer; }
.star-halo { fill: rgb(var(--ice) / .08); stroke: rgb(var(--ice) / .25); stroke-width: 1; transition: fill .4s ease; }
.star-shape { fill: var(--pearl); filter: drop-shadow(0 0 6px rgb(var(--ice) / .9)) drop-shadow(0 0 16px rgb(var(--magenta) / .5)); }
.stones-sky .star.newest .star-shape { animation: twinkle 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.stones-sky .star:hover .star-halo, .stones-sky .star:focus-visible .star-halo { fill: rgb(var(--ice) / .2); }
.stones-sky text { fill: var(--moonlight); font: 400 17px var(--serif); font-variant: small-caps; letter-spacing: .26em; text-anchor: middle; }
@keyframes twinkle { 0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); } 50% { opacity: .75; transform: scale(1.25) rotate(20deg); } }
.stones-chart-say { margin: 18px auto 0; font-family: var(--serif); font-style: italic; letter-spacing: .06em; }

.stones { max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter); display: grid; gap: clamp(90px, 14vh, 160px); }
.stone-plate { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 90px); }
.stone-plate:nth-child(even) .stone-print { order: 2; }
/* the stone's own colour, as light thrown around its print */
.stone-plate::before { content: ""; position: absolute; left: -6%; top: 50%; width: 62%; aspect-ratio: 1; translate: 0 -50%; z-index: -1;
  border-radius: 50%; background: radial-gradient(circle, rgb(var(--glow) / .34), rgb(var(--glow) / .1) 45%, transparent 70%); filter: blur(30px); }
.stone-plate:nth-child(even)::before { left: auto; right: -6%; }
.stone-print { justify-self: center; margin: 0; }
.stone-print img { max-height: min(640px, 76vh); }
.stone-print figcaption { font-size: 19px; text-align: center; max-width: none; color: #3d3e45; }
.stone-date { margin: 0; letter-spacing: .3em; }
.stone-for { margin: 14px 0 26px; font-size: clamp(54px, 8vw, 104px); line-height: .95; letter-spacing: -.015em;
  text-shadow: 0 0 50px rgb(var(--glow) / .45); }
.stone-for span { display: block; font-style: italic; font-size: .36em; letter-spacing: .04em; color: rgb(var(--glow)); margin-bottom: .12em; }
.stone-said { font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2.4vw, 25px); line-height: 1.4; color: var(--pearl); max-width: 30ch; }
.stone-moon { display: flex; align-items: center; gap: 18px; margin-top: 34px; }
.stone-moon p { margin: 0; letter-spacing: .04em; color: var(--dim); }
.stone-moon em { font-family: var(--serif); font-size: 17px; color: var(--moonlight); }
.moon-that-night { width: 64px; height: 64px; flex: none; filter: drop-shadow(0 0 14px rgb(var(--ice) / .35)); }
.moon-dark { fill: #0b0e19; stroke: rgb(255 255 255 / .12); stroke-width: 1; }
.moon-lit { fill: #ecebe4; }
.stones-foot { text-align: center; margin: clamp(90px, 14vh, 150px) auto 40px; font-family: var(--serif); font-style: italic; letter-spacing: .06em; }

@media (max-width: 800px) {
  .stone-plate { grid-template-columns: minmax(0, 1fr); text-align: center; gap: 30px; }
  .stone-plate:nth-child(even) .stone-print { order: 0; }
  .stone-plate::before, .stone-plate:nth-child(even)::before { left: 50%; right: auto; width: 110%; translate: -50% -60%; }
  .stone-moon { justify-content: center; text-align: left; }
  .stone-said { margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) { .stones-sky .star.newest .star-shape { animation: none; } }

/* ---- the manual (/<pedal>/manual/, js/manual.js) and its door on support ------------
   Every card in the box from one manifest (tools/cards/manual.py): pages of nine that
   slide under a finger, and a close view you swipe through. Phone first: the 3 x 3
   page fits one screen of an iPhone or an Android, and the close view is the whole
   screen, clear of the notch and the home bar. */

.manual-chapter { padding-top: clamp(104px, 15vh, 170px); }
.manual-chapter > h2 { margin-bottom: 18px; }
.manual { --g: clamp(8px, 1.6vw, 18px); --cw: min(29vw, 230px, calc((100svh - 190px) / 3 * 63 / 88)); margin-top: 30px; }
.manual-said { margin-top: 20px; }

.manual-tabs {
  display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; margin: 0 auto 22px;
  background: rgb(255 255 255 / .035); border: 1px solid var(--line-2);
  position: relative; left: 50%; transform: translateX(-50%);
}
.manual-tab {
  display: inline-flex; align-items: baseline; gap: 9px; padding: 10px 20px; border-radius: 999px; border: 0;
  font: 400 16px/1 var(--serif); letter-spacing: .12em; font-variant: small-caps; text-transform: lowercase;
  color: var(--moonlight); background: transparent; cursor: pointer; transition: background .3s ease, color .3s ease;
}
.manual-tab-count { font: 300 12px/1 var(--sans); letter-spacing: .04em; color: var(--dim); }
.manual-tab[aria-selected="true"] { color: var(--pearl); background: rgb(var(--ice) / .14); box-shadow: inset 0 0 0 1px rgb(var(--ice) / .4); }
.manual-tab[aria-selected="true"] .manual-tab-count { color: rgb(var(--ice)); }

.manual-book {
  display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; outline-offset: 6px; border-radius: 18px;
}
.manual-book::-webkit-scrollbar { display: none; }
.manual-page {
  flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always;
  display: grid; grid-template-columns: repeat(3, var(--cw)); justify-content: center; align-content: start;
  gap: var(--g); padding: 6px 0 14px;
}
.manual-card {
  position: relative; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: calc(var(--cw) * .06);
  -webkit-tap-highlight-color: transparent; transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .35s ease;
  filter: drop-shadow(0 14px 22px rgb(0 0 0 / .55));
}
.manual-card img { width: 100%; height: auto; border-radius: calc(var(--cw) * .06); }
.manual-card:hover, .manual-card:focus-visible { transform: translateY(-4px); filter: drop-shadow(0 22px 30px rgb(0 0 0 / .7)) drop-shadow(0 0 18px rgb(var(--hue, var(--ice)) / .28)); outline: none; }
.manual-card:active { transform: scale(.97); }
.manual-turns {
  position: absolute; right: 6%; bottom: 4.5%; width: 22%; aspect-ratio: 1; display: grid; place-items: center;
  border-radius: 50%; background: rgb(5 7 13 / .62); border: 1px solid rgb(255 255 255 / .18); pointer-events: none;
}
.manual-turns svg { width: 58%; fill: none; stroke: var(--pearl); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.manual-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 8px; }
.manual-arrow {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgb(255 255 255 / .03); border: 1px solid var(--line-2); color: var(--pearl); transition: border-color .3s ease, opacity .3s ease;
}
.manual-arrow svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.manual-arrow:disabled { opacity: .25; cursor: default; }
.manual-arrow:not(:disabled):hover { border-color: rgb(var(--ice) / .7); }
.manual-dots { display: inline-flex; gap: 2px; }
.manual-dot { width: 26px; height: 44px; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.manual-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dim); transition: background .3s ease, transform .3s ease; }
.manual-dot[aria-current="page"]::before { background: rgb(var(--ice)); transform: scale(1.35); box-shadow: 0 0 10px rgb(var(--ice) / .8); }

/* a card with two faces: only a sound turns */
.mflip { display: block; perspective: 1800px; }
.mflip .faces { position: relative; display: block; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.mflip[aria-pressed="true"] .faces { transform: rotateY(180deg); }
.mflip .face { display: block; width: 100%; height: auto; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.mflip .back { position: absolute; inset: 0; transform: rotateY(180deg); }

/* the close view: the whole screen, a section's cards in a row */
html.viewer-open { overflow: hidden; }
.viewer {
  position: fixed; inset: 0; z-index: 50; display: grid; grid-template-rows: 1fr auto;
  background: rgb(3 4 9 / 0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0);
  transition: background .26s ease, backdrop-filter .26s ease, opacity .26s ease; opacity: 0;
  padding-bottom: env(safe-area-inset-bottom);
}
.viewer.on { opacity: 1; background: rgb(3 4 9 / .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.viewer-strip {
  display: flex; overflow-x: auto; overscroll-behavior: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; min-height: 0;
}
.viewer-strip::-webkit-scrollbar { display: none; }
.viewer-slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; display: grid; place-items: center; padding: max(56px, env(safe-area-inset-top)) 16px 8px; }
.viewer-card { width: min(88vw, calc((100svh - 150px) * 63 / 88), 560px); }
.viewer-card .face { border-radius: 4.5%/3.2%; filter: drop-shadow(0 40px 70px rgb(0 0 0 / .8)); }
.viewer-card[role="button"] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.viewer-bar { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 16px 18px; }
.viewer-count { min-width: 64px; text-align: center; font: 300 14px/1 var(--sans); letter-spacing: .08em; color: var(--moonlight); }
.viewer-button, .viewer-close {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .16); color: var(--pearl);
}
.viewer-button svg, .viewer-close svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.viewer-button:disabled { opacity: .25; cursor: default; }
.viewer-turn { border-color: rgb(var(--ice) / .55); box-shadow: 0 0 22px -6px rgb(var(--ice) / .7); }
.viewer-close { position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
@media (hover: hover) { .viewer-button:not(:disabled):hover, .viewer-close:hover { border-color: rgb(var(--ice) / .8); } }
@media (max-width: 700px) {
  .manual { --g: 8px; --cw: calc((100vw - 2 * var(--gutter) - 16px) / 3); }
  .manual-tab { padding: 10px 16px; font-size: 15px; }
  .viewer-bar { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .mflip .faces, .manual-card, .viewer { transition: none; }
}

/* the door on the support page: one big button into the manual */
.manual-door {
  --hue: var(--ice);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(20px, 4vw, 56px);
  margin-top: 40px; padding: clamp(22px, 3.4vw, 44px) clamp(22px, 4vw, 56px); border-radius: 28px; text-decoration: none; color: inherit;
  background:
    radial-gradient(ellipse 70% 90% at 22% 55%, rgb(var(--ice) / .13), transparent 70%),
    linear-gradient(180deg, rgb(255 255 255 / .045), rgb(255 255 255 / .015));
  border: 1px solid rgb(var(--ice) / .3); box-shadow: 0 40px 90px -50px rgb(0 0 0 / .9), inset 0 1px 0 rgb(255 255 255 / .06);
  transition: border-color .4s ease, box-shadow .4s ease, transform .4s cubic-bezier(.2,.8,.2,1);
  -webkit-tap-highlight-color: transparent;
}
.manual-door:hover, .manual-door:focus-visible {
  border-color: rgb(var(--ice) / .7); outline: none; transform: translateY(-3px);
  box-shadow: 0 50px 100px -50px rgb(0 0 0 / .95), 0 0 60px -18px rgb(var(--ice) / .45), inset 0 1px 0 rgb(255 255 255 / .08);
}
.manual-door-fan { position: relative; height: clamp(190px, 26vw, 300px); display: block; }
.manual-door-fan img {
  position: absolute; left: 50%; bottom: 0; width: clamp(118px, 15vw, 190px); height: auto; border-radius: 8px;
  transform-origin: 50% 120%; box-shadow: 0 24px 40px -18px rgb(0 0 0 / .9), 0 0 0 1px rgb(0 0 0 / .5);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.manual-door-fan img:nth-child(1) { transform: translateX(-50%) rotate(-14deg) translateX(-34%); }
.manual-door-fan img:nth-child(2) { transform: translateX(-50%) rotate(-2deg) translateY(-4%); }
.manual-door-fan img:nth-child(3) { transform: translateX(-50%) rotate(11deg) translateX(30%); }
.manual-door:hover .manual-door-fan img:nth-child(1) { transform: translateX(-50%) rotate(-19deg) translateX(-46%); }
.manual-door:hover .manual-door-fan img:nth-child(3) { transform: translateX(-50%) rotate(16deg) translateX(42%); }
.manual-door-words { display: grid; gap: 12px; justify-items: start; }
.manual-door-title { font: 400 clamp(46px, 6.4vw, 84px)/1 var(--serif); color: var(--pearl); letter-spacing: -.01em; }
.manual-door-sub { font: 300 clamp(16px, 1.6vw, 19px)/1.5 var(--sans); color: var(--moonlight); max-width: 26ch; }
.manual-door .button { margin-top: 6px; pointer-events: none; }
.manual-door .button svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 700px) {
  .manual-door { grid-template-columns: 1fr; text-align: center; padding: 26px 20px 30px; border-radius: 24px; }
  .manual-door-fan { height: 200px; }
  .manual-door-words { justify-items: center; }
  .manual-door-sub { max-width: 30ch; }
}
@media (max-width: 700px) {
  /* a phone: the words step back so the first page of nine sits on the first screen */
  .manual-chapter { padding-top: 92px; }
  .manual-chapter > .label { margin-bottom: 12px; }
  .manual-chapter > h2 { font-size: 34px; margin-bottom: 12px; }
  .manual-chapter > .lede { font-size: 17px; line-height: 1.45; margin-bottom: 0; }
  .manual { margin-top: 18px; }
  .manual-tabs { margin-bottom: 14px; }
}