/* Starfont. Palette is OKLCH (DESIGN.md), written here as the sRGB it resolves to so every engine agrees. */
@font-face { font-family: "Instrument Serif"; src: url(assets/fonts/instrument-serif-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(assets/fonts/instrument-serif-latin-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(assets/fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(assets/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --zenith: #030511;   /* oklch(0.12 0.03 268) */
  --deep: #010209;     /* oklch(0.09 0.025 268) */
  --horizon: #20173e;  /* oklch(0.24 0.07 290) */
  --ink: #f5eee0;      /* oklch(0.95 0.02 85) warm paper */
  --muted: #acb8cb;    /* oklch(0.78 0.03 260) */
  --ignite: #ffc346;   /* oklch(0.87 0.16 75) */
  --glass: rgba(8, 13, 26, 0.74);           /* oklch(0.16 0.03 268 / 0.74) */
  --hair: rgba(245, 238, 224, 0.13);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --pad: clamp(16px, 3.2vw, 40px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--zenith); color: var(--ink); }
body { font-family: var(--mono); -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; }
#sky { z-index: 0; }
#ink { z-index: 1; touch-action: none; cursor: grab; }
#ink.dragging { cursor: grabbing; }
#ink.over { cursor: pointer; }
.glass { background: var(--glass); border: 1px solid var(--hair); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }

/* masthead */
.mast { position: fixed; z-index: 3; top: var(--pad); left: var(--pad); max-width: min(560px, calc(100vw - 2 * var(--pad) - 56px));
  pointer-events: none; opacity: 0; transform: translateY(10px); transition: opacity 1.4s var(--ease) .5s, transform 1.6s var(--ease) .5s; }
.ready .mast { opacity: 1; transform: none; }
.mast > * { pointer-events: auto; }
.kicker { margin: 0 0 10px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 5.4vw, 74px); line-height: .98; letter-spacing: -.012em;
  text-shadow: 0 2px 30px rgba(1, 2, 9, .9); }
h1 em { color: var(--ignite); font-style: italic; }
.sub { margin: 14px 0 18px; max-width: 420px; font-size: 13px; line-height: 1.6; color: var(--muted); text-shadow: 0 1px 12px rgba(1, 2, 9, 1); }

.chip { font: 500 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); min-height: 44px; padding: 0 18px;
  border-radius: 999px; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; white-space: nowrap;
  background: var(--glass); border: 1px solid var(--hair); transition: border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease); }
.chip:hover { border-color: rgba(255, 195, 70, .55); }
.chip:active { transform: scale(.97); }
.chip:focus-visible, .round:focus-visible, .hits button:focus-visible { outline: 2px solid var(--ignite); outline-offset: 3px; }
.hero { min-height: 52px; padding: 0 24px 0 18px; font-size: 14px; color: var(--ignite); background: rgba(40, 26, 6, .82);
  border-color: rgba(255, 195, 70, .45); box-shadow: 0 0 0 0 rgba(255, 195, 70, .4); animation: beckon 3.2s var(--ease) 3.4s infinite; }
.hero .play { width: 0; height: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.hero.busy .play { width: 10px; height: 10px; border: 0; border-radius: 50%; background: currentColor; animation: pulse 1s ease-in-out infinite; }
@keyframes beckon { 0% { box-shadow: 0 0 0 0 rgba(255, 195, 70, .38); } 70%, 100% { box-shadow: 0 0 0 16px rgba(255, 195, 70, 0); } }
@keyframes pulse { 50% { opacity: .35; } }

/* find */
.round { position: fixed; z-index: 4; top: var(--pad); right: var(--pad); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  color: var(--ink); background: var(--glass); border: 1px solid var(--hair); cursor: pointer; }
.round.post { top: calc(var(--pad) + 58px); color: var(--ignite); }
.find-open .round.post { display: none; }
.round[aria-expanded="true"] { border-color: rgba(255, 195, 70, .6); color: var(--ignite); }
.find { position: fixed; z-index: 4; top: calc(var(--pad) + 58px); right: var(--pad); width: min(400px, calc(100vw - 2 * var(--pad)));
  border-radius: 18px; padding: 8px; }
.find[hidden] { display: none; }
.find input { width: 100%; height: 46px; border: 0; outline: 0; border-radius: 12px; padding: 0 14px; font: 15px var(--mono); color: var(--ink);
  background: rgba(245, 238, 224, .07); }
.find input::placeholder { color: var(--muted); }
.find ul { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow-y: auto; }
.find li button { width: 100%; min-height: 48px; text-align: left; padding: 8px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--ink);
  cursor: pointer; display: grid; grid-template-columns: 10px 1fr; column-gap: 10px; align-items: center; font: 13px/1.35 var(--mono); }
.find li button:hover, .find li button:focus-visible { background: rgba(245, 238, 224, .08); }
.find li .dot { width: 8px; height: 8px; border-radius: 50%; grid-row: span 2; }
.find li .t { color: var(--muted); font: italic 15px/1.2 var(--serif); }
.find .none { padding: 12px; color: var(--muted); font-size: 13px; }

/* narration caption: karaoke */
.caption { position: fixed; z-index: 3; left: 50%; bottom: calc(var(--rail-h, 124px) + 18px); transform: translateX(-50%); width: min(820px, calc(100vw - 2 * var(--pad)));
  text-align: center; font: italic clamp(21px, 2.3vw, 30px)/1.3 var(--serif); color: rgba(172, 184, 203, .0); pointer-events: none; text-wrap: balance; }
.caption { transition: opacity 1.6s var(--ease); }
.caption.done { opacity: 0; }
.still .mast, .still .rail { transition: none; }
.caption .w { color: var(--muted); opacity: .62; transition: color .18s linear, opacity .18s linear, text-shadow .5s var(--ease); text-shadow: 0 1px 14px rgba(1, 2, 9, 1); }
.caption .w.lit { color: var(--ink); opacity: 1; }
.caption .w.now { color: var(--ignite); text-shadow: 0 0 22px rgba(255, 195, 70, .55), 0 1px 14px rgba(1, 2, 9, 1); }
.caption .status { font: 13px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-style: normal; text-shadow: 0 1px 10px #010209; }
.caption .bar { display: block; width: 220px; height: 2px; margin: 10px auto 0; background: rgba(245, 238, 224, .14); border-radius: 2px; overflow: hidden; }
.caption .bar i { display: block; height: 100%; background: var(--ignite); width: 0; transition: width .25s linear; }

/* star card */
.card { position: fixed; z-index: 5; left: 0; top: 0; width: 300px; border-radius: 16px; padding: 14px 16px 12px; pointer-events: none;
  transition: opacity .3s var(--ease); }
.card[hidden] { display: none; }
.card .n { font: 500 13px/1.35 var(--mono); word-break: break-all; color: var(--ink); }
.card .t { margin-top: 2px; font: italic 19px/1.2 var(--serif); color: var(--ink); }
.card .m { margin-top: 8px; display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.card .c { display: inline-flex; align-items: center; gap: 6px; }
.card .c::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tint, #fff); }
.card a { pointer-events: auto; display: inline-flex; align-items: center; min-height: 44px; color: var(--ignite); font-size: 12px; text-decoration: none; }
.card.docked { pointer-events: auto; }

/* constellation rail */
.rail { position: fixed; z-index: 3; left: 0; right: 0; bottom: 0; padding: 0 var(--pad) calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(1, 2, 9, .92) 30%, rgba(1, 2, 9, 0)); opacity: 0; transition: opacity 1.2s var(--ease) .8s; }
.ready .rail { opacity: 1; }
.rail-in { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 26px 2px 8px; justify-content: safe center; }
.rail-in::-webkit-scrollbar { display: none; }
.rail .chip { flex: 0 0 auto; gap: 8px; padding: 0 13px; font-size: 12px; letter-spacing: .06em; }
.rail .chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tint); box-shadow: 0 0 10px var(--tint); }
.rail .chip .k { color: var(--muted); font-weight: 400; letter-spacing: .02em; }
.rail .chip[aria-pressed="true"] { border-color: var(--tint); background: rgba(245, 238, 224, .08); }
.credit { margin: 0; text-align: center; font-size: 11px; line-height: 1.6; color: var(--muted); }
.credit a { color: var(--ink); text-decoration-color: rgba(245, 238, 224, .3); text-underline-offset: 2px; }
.noscript { position: fixed; inset: auto 0 40% 0; text-align: center; font: italic 24px var(--serif); }

@media (max-width: 640px) {
  .kicker { font-size: 11px; margin-bottom: 8px; }
  .kicker .wide { display: none; }
  .sub { font-size: 12px; margin: 10px 0 14px; max-width: 300px; }
  .card { left: 12px !important; right: 12px; top: auto !important; bottom: calc(var(--rail-h, 124px) + 8px); width: auto; }
  .caption { bottom: calc(var(--rail-h, 124px) + 10px); }
  .credit { font-size: 10px; }
}
@media (max-height: 560px) { .sub { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .mast, .rail { transition: none; }
  .hero { animation: none; }
}