/* The share pages (/show, /episode, /person; HTML from src/pages.js). The app's Night sky, as
   the widgets draw it (Shared/PeopleWidgetViews.swift, `WidgetPalette` and `NightSky`): dusk
   #1D1846 at the top, through sky #12141A to canvas #0C0D10, a violet glow at the top right,
   fixed stars, and faces ringed in the starlight gradient (accent, ivory, accent).

   Dark only, unlike the rest of the site. These pages are the app's own screens seen from the
   outside, and the app is dark; a light Night sky is not a thing. */
:root {
  --dusk: #1d1846; --sky: #12141a; --canvas: #0c0d10;
  --t1: #e6e8ee; --t2: #a4abb8; --t3: #7d8494; --line: rgba(230, 232, 238, .1);
  --accent: #aa80ff; --ivory: #f4ead2; --initials: #2a2550; --raise: rgba(255, 255, 255, .045);
  --starlight: conic-gradient(from -120deg, var(--accent), var(--ivory), var(--accent));
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--canvas); }
body {
  /* No background here: the html element carries the canvas, and a body background would paint
     over the fixed sky below (z-index -1 sits under the body's own box). */
  margin: 0; min-height: 100vh; color: var(--t1);
  font: 17px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

/* ---------- The sky ---------- */
.night {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(70vmax 50vmax at 100% 0%, rgba(170, 128, 255, .16), transparent 70%),
    linear-gradient(180deg, var(--dusk) 0%, var(--sky) 42%, var(--canvas) 100%);
}
/* Stars: four layers of dots at different spacings so no grid shows, as on the home page. */
.night::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(244, 234, 210, .55) 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 32%, rgba(230, 232, 238, .45) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 38% 72%, rgba(230, 232, 238, .35) 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 82%, rgba(244, 234, 210, .3) 50%, transparent 51%);
  background-size: 173px 167px, 241px 229px, 311px 293px, 397px 383px;
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}
/* The cover, blurred into the top of the sky: the app's ArtworkBackdrop, here. */
.glow {
  position: absolute; left: 50%; top: -12vh; width: 140vmin; height: 90vmin; transform: translateX(-50%);
  background-size: cover; background-position: center;
  filter: blur(70px) saturate(1.3); opacity: .32;
  mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
}

/* ---------- Bar ---------- */
.bar, main, footer { max-width: 640px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: 8px;
}
.brand {
  display: flex; align-items: center; gap: 9px; text-decoration: none;
  font: 700 18px/1 -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; letter-spacing: -.01em;
}
.brand img { width: 28px; height: 28px; border-radius: 7px; }
.pill {
  font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
  padding: 7px 14px; border-radius: 999px; color: var(--t1);
  background: rgba(255, 255, 255, .08); border: 1px solid var(--line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}

/* ---------- Hero ---------- */
.hero { padding: 28px 0 8px; }
.hero.center { text-align: center; }
.cover {
  width: min(232px, 62vw); aspect-ratio: 1; margin: 0 0 22px; border-radius: 22px; overflow: hidden;
  background: var(--initials);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 24px 70px -18px rgba(170, 128, 255, .55), 0 10px 30px -10px rgba(0, 0, 0, .6);
}
.cover img, .tile img, .thumb img { width: 100%; height: 100%; object-fit: cover; }
.blank { display: grid; place-items: center; color: var(--ivory); font-weight: 700; font-size: 40px; letter-spacing: .02em; }
.kicker {
  margin: 0 0 6px; color: var(--accent); font-size: 14px; font-weight: 600; letter-spacing: .02em;
}
.kicker a { text-decoration: none; }
.kicker a:hover { text-decoration: underline; }
h1 {
  margin: 0 0 10px; font: 700 clamp(28px, 7.4vw, 40px)/1.08 -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  letter-spacing: -.028em; text-wrap: balance;
}
.meta-line { margin: 0 0 12px; color: var(--t2); font-size: 15px; font-variant-numeric: tabular-nums; }
.lede {
  margin: 0 0 4px; color: var(--t2); font-size: 16px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.hero.center .lede { max-width: 30em; margin-left: auto; margin-right: auto; }

/* The portrait: a face ringed in starlight, the app's follow ring (Starlight.gradient). */
.portrait {
  --size: min(168px, 44vw);
  display: grid; place-items: center; width: var(--size); height: var(--size); margin: 8px auto 22px;
  border-radius: 50%; padding: 3px; background: var(--starlight);
  box-shadow: 0 0 60px -6px rgba(170, 128, 255, .55);
}
.portrait img, .portrait .initials {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--sky);
}
.initials {
  display: grid; place-items: center; background: var(--initials); color: var(--ivory);
  font-weight: 700; letter-spacing: .02em;
}
.portrait .initials { font-size: calc(var(--size) * .3); }

/* ---------- Buttons ---------- */
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 10px; }
.hero.center .actions { justify-content: center; }
.btn {
  flex: 1 1 180px; display: inline-flex; align-items: center; justify-content: center; min-height: 50px;
  padding: 0 20px; border-radius: 14px; text-decoration: none; font-weight: 600; font-size: 17px;
  color: var(--t1); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12);
  transition: transform .15s ease, background .15s ease;
}
.btn:active { transform: scale(.98); }
.btn.primary {
  color: #120e24; border: 0;
  background: linear-gradient(180deg, #c3a6ff, var(--accent));
  box-shadow: 0 10px 30px -10px rgba(170, 128, 255, .8);
}
.btn:hover { background: rgba(255, 255, 255, .11); }
.btn.primary:hover { background: linear-gradient(180deg, #cdb4ff, #b48dff); }
.note { margin: 0; color: var(--t3); font-size: 13px; }
.hero.center .note { max-width: 26em; margin: 0 auto; }

/* ---------- Sections ---------- */
.block { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); }
h2 { margin: 0 0 14px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.notes { margin: 0; color: var(--t2); font-size: 16px; white-space: pre-line; }

/* The constellation: faces on a fixed zigzag, joined by a hairline. `--x`/`--y` are each face's
   centre (src/pages.js `LIFT`); the row is tall enough for the lowest face and its name. */
.constellation { position: relative; height: 150px; margin: 6px -4px 0; }
.constellation.few { max-width: 420px; }
.constellation .lines { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.constellation .lines polyline {
  fill: none; stroke: rgba(244, 234, 210, .28); stroke-width: 1; stroke-dasharray: 2 4;
}
.constellation ul { list-style: none; margin: 0; padding: 0; }
.constellation li {
  --face: clamp(46px, 13vw, 60px);
  position: absolute; left: var(--x); top: var(--y); width: calc(var(--face) + 28px);
  transform: translate(-50%, calc(var(--face) / -2));
}
.constellation a { display: flex; flex-direction: column; align-items: center; text-decoration: none; }
.face {
  display: block; width: var(--face); height: var(--face); border-radius: 50%; padding: 2px;
  background: var(--starlight); box-shadow: 0 0 22px -4px rgba(170, 128, 255, .6);
}
.face img, .face .initials {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--sky);
}
.face .initials { font-size: calc(var(--face) * .32); }
.constellation .name {
  margin-top: 7px; font-size: 12px; line-height: 1.25; font-weight: 600; text-align: center; color: var(--t1);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.constellation .role { font-size: 11px; color: var(--t3); margin-top: 1px; }
.constellation a:hover .name { color: var(--ivory); }

/* Episode lists */
.episodes { list-style: none; margin: 0; padding: 0; }
.episodes li { border-bottom: 1px solid var(--line); }
.episodes li:last-child { border-bottom: 0; }
.episodes > li > span:not(.row), .episodes .text { display: block; }
.episodes li > .title, .episodes .text .title { display: block; font-weight: 600; font-size: 16px; line-height: 1.35; padding-top: 12px; }
.episodes li > .meta, .episodes .text .meta { display: block; color: var(--t3); font-size: 13.5px; padding: 3px 0 12px; }
.episodes.with-art a, .episodes.with-art .row { display: flex; gap: 12px; align-items: center; text-decoration: none; }
.thumb { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: var(--initials); }
.thumb.blank { font-size: 16px; }
.episodes.with-art .text { min-width: 0; }
.episodes.with-art .title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Show shelf on a person's page */
.shelf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 12px; }
.shelf a { display: block; text-decoration: none; }
.tile {
  aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--initials);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 8px 24px -12px rgba(0, 0, 0, .8);
}
.tile.blank { font-size: 22px; }
.shelf .name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 7px; font-size: 12.5px; line-height: 1.3; color: var(--t2);
}
.shelf a:hover .name { color: var(--t1); }

/* ---------- Claim line and share kit (2026-10-23) ---------- */
.claim { margin: 28px 0 0; color: var(--t3); font-size: 14px; text-align: center; }
.claim a { color: var(--accent); }
.kit h2 { margin-bottom: 10px; }
.copyrow { display: flex; gap: 10px; align-items: stretch; margin-bottom: 8px; }
.copyrow .btn { flex: none; }
.field {
  flex: 1; min-width: 0; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--raise); color: var(--t1); font: 15px/1.4 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; resize: none;
}
.field.mono { font: 12.5px/1.45 ui-monospace, Menlo, monospace; color: var(--t2); }
.card-preview { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); margin-bottom: 8px; }
.qr { width: 184px; max-width: 100%; padding: 10px; background: #fff; border-radius: 14px; margin-bottom: 8px; }
.qr svg { display: block; width: 100%; height: auto; }
.badge-preview { margin: 0 0 12px; }

/* ---------- Footer ---------- */
footer { margin-top: 56px; padding-top: 22px; padding-bottom: max(36px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
footer .pitch { margin: 0 0 14px; color: var(--t2); font-size: 15px; }
footer .pitch strong { color: var(--t1); }
footer .credits { margin: 0 0 14px; color: var(--t3); font-size: 12px; }
footer .credits a { color: var(--t3); }
footer .links { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; }
footer .links a { color: var(--t3); text-decoration: none; }
footer .links a:hover { color: var(--t1); }

@media (min-width: 560px) {
  .hero:not(.center) { display: grid; grid-template-columns: 200px 1fr; column-gap: 28px; align-items: end; }
  .hero:not(.center) .cover { grid-row: 1 / span 4; width: 200px; margin: 0; align-self: start; }
  .hero:not(.center) > :not(.cover) { grid-column: 2; }
  .hero:not(.center) .actions, .hero:not(.center) .note { grid-column: 1 / -1; }
  .shelf { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 360px) {
  .shelf { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}