/* Luxury edition v0.2: quiet, warm islands. Pale champagne / sea-glass / mist / sage / heather tints, a gold hairline,
   a soft glow of each card's own tone, serif italics for headlines. Dark ink only. */
:root {
  --l-ink: #14121c; --l-ink2: #2b2735; --gold: #b08d3c; --gold-d: #7a5c17;
  --champ: #f3ead6; --seaglass: #d8ece8; --mist: #e0e9f3; --sage: #e1ebdc; --heather: #e8e2f0; --pearl: #efe6cf; --dune: #f1e2cf;
}
body { background: #070b16; }
#loader { background: #070b16; }
.loader-pill { background: var(--champ); border: 1px solid var(--gold); }
.hud-pill { border: 1px solid var(--gold); font-weight: 600; letter-spacing: 0.04em; }
.hud-brand { display: inline-flex; align-items: center; gap: 8px; background: var(--champ); }
.hud-brand img { display: block; }
.hud-chapter { background: var(--mist); }
.hud-sound { background: var(--sage); }
.hud-sound[aria-pressed="true"] { background: var(--pearl); }
.proto-note { background: var(--champ); border: 1px solid var(--gold); }

.card { border-radius: 4px; padding: 34px 34px 28px; border: 1px solid var(--gold); width: min(470px, 100%); position: relative; }
.card::after { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(176,141,60,0.35); border-radius: 2px; pointer-events: none; }
.card.wide { width: min(820px, 100%); }
.card p { color: var(--l-ink2); }
.card h1, .card h2 { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--l-ink); letter-spacing: -0.005em; }
.card h1 { font-size: clamp(42px, 4.6vw, 62px); line-height: 1.02; }
.card h2 { font-size: clamp(34px, 3.6vw, 48px); line-height: 1.05; }
.kicker { letter-spacing: 0.22em; font-size: 11.5px; color: var(--gold-d) !important; }
.lead { font-size: 18px; line-height: 1.6; }
.hint { color: var(--l-ink2); letter-spacing: 0.06em; font-weight: 600; }
.l1 { background: var(--champ); box-shadow: 0 0 80px rgba(224,196,130,0.45), 0 30px 80px rgba(0,0,0,0.5); }
.l2 { background: var(--seaglass); box-shadow: 0 0 80px rgba(120,200,190,0.45), 0 30px 80px rgba(0,0,0,0.5); }
.l3 { background: var(--dune); box-shadow: 0 0 80px rgba(230,170,110,0.42), 0 30px 80px rgba(0,0,0,0.5); }
.l4 { background: var(--sage); box-shadow: 0 0 80px rgba(150,200,130,0.42), 0 30px 80px rgba(0,0,0,0.5); }
.l5 { background: var(--heather); box-shadow: 0 0 80px rgba(170,150,220,0.45), 0 30px 80px rgba(0,0,0,0.5); }
.l6 { background: var(--mist); box-shadow: 0 0 80px rgba(130,170,220,0.45), 0 30px 80px rgba(0,0,0,0.5); width: min(540px, 100%); }
.l7 { background: var(--pearl); box-shadow: 0 0 80px rgba(224,196,130,0.5), 0 30px 80px rgba(0,0,0,0.5); }

.trio { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px !important; }
.trio span { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border: 1px solid var(--gold); border-radius: 999px; color: var(--l-ink); }
.trio span:nth-child(1) { background: var(--seaglass); } .trio span:nth-child(2) { background: var(--dune); } .trio span:nth-child(3) { background: var(--sage); }

.btn { border-radius: 999px; border: 1px solid var(--l-ink); font-weight: 600; letter-spacing: 0.04em; padding: 12px 22px; transition: background 0.6s, color 0.6s; }
.btn.big { font-size: 16px; padding: 14px 26px; margin: 6px 0 14px; }
.b-sea { background: var(--mist); } .b-road { background: var(--sage); } .b-home { background: var(--champ); } .b-gold { background: #e9d39a; }
.btn[aria-pressed="true"] { background: var(--l-ink); color: #f3ead6; box-shadow: none; }

/* host hero */
.host { display: grid; grid-template-columns: 132px 1fr; gap: 14px; align-items: center; margin: 4px 0 12px; }
.host img { width: 132px; height: auto; aspect-ratio: 553 / 310; object-fit: cover; border: 1px solid var(--gold); display: block; background: #111; }
.host p { margin: 0 !important; }
.host b { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 24px; color: var(--l-ink); line-height: 1.1; }
.host span { font: 700 11.5px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-d); }

/* timelines reveal line by line */
.timeline { list-style: none; padding: 0; margin: 0 0 14px; border-left: 1px solid var(--gold); }
.timeline li { position: relative; padding: 6px 8px 8px 18px; color: var(--l-ink); font-size: 15.5px; border-radius: 2px; transition: background 1.2s ease; }
.timeline li.on { background: rgba(255,255,255,0.75); }
.timeline li.on::before { background: var(--l-ink); box-shadow: 0 0 0 3px var(--gold); }
.timeline li::before { content: ""; position: absolute; left: -5px; top: 13px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); transition: background 1.2s, box-shadow 1.2s; }
.timeline time { display: block; font: 700 12px var(--mono); letter-spacing: 0.12em; color: var(--gold-d); }

/* crew gallery */
.gallery { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; margin-top: 8px; }
.g-stage { position: relative; aspect-ratio: 553 / 310; border: 1px solid var(--gold); background: #0b0a10; overflow: hidden; }
.g-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 1.4s ease; }
.g-stage img.fade { opacity: 0; }
.g-list { display: flex; flex-direction: column; gap: 6px; }
.g-list button { text-align: left; border: 1px solid rgba(176,141,60,0.6); border-radius: 3px; padding: 8px 12px; cursor: pointer; font: 400 21px/1.1 var(--serif); font-style: italic; color: var(--l-ink); }
.g-list button small { display: block; font: 700 10.5px var(--mono); font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-d); margin-top: 3px; }
.g-list button[aria-pressed="true"] { background: var(--l-ink) !important; color: #f3ead6; border-color: var(--l-ink); }
.g-list button[aria-pressed="true"] small { color: #e9d39a; }
.g-line { grid-column: 1 / -1; margin: 0 !important; font-size: 16px; color: var(--l-ink) !important; background: rgba(255,255,255,0.6); padding: 10px 14px; border-left: 3px solid var(--gold); min-height: 3.2em; }

.promise { background: rgba(255,255,255,0.7); border: 1px solid var(--gold); padding: 14px 16px 10px; margin-top: 12px; }
.promise-kicker { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; margin: 0 0 2px !important; color: var(--gold-d) !important; }
.promise h3 { margin: 0 0 6px; font: italic 400 26px var(--serif); color: var(--l-ink); }
.promise ul { margin: 0 0 8px; padding-left: 18px; font-size: 14.5px; color: var(--l-ink); }
.promise li { margin-bottom: 4px; }
.promise-note { font-size: 13px; }

details { background: rgba(255,255,255,0.7); border: 1px solid rgba(176,141,60,0.6); padding: 9px 12px; margin-bottom: 6px; }
summary { font-weight: 600; cursor: pointer; color: var(--l-ink); }
details p { margin: 6px 0 2px !important; font-size: 15px; }

.w-label { position: fixed; left: 0; top: 0; z-index: 4; pointer-events: none; padding: 4px 12px; border: 1px solid var(--gold); border-radius: 999px; background: var(--champ); font: 700 11.5px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--l-ink); white-space: nowrap; opacity: 0; transition: opacity 1s; }
.w-label.show { opacity: 1; }

@media (max-width: 760px) {
  .hud-brand { display: none; }
  .hud-chapter, .hud-sound { white-space: nowrap; }
  .card { padding: 24px 20px 20px; }
  .card h1 { font-size: 40px; } .card h2 { font-size: 33px; }
  .host { grid-template-columns: 96px 1fr; } .host img { width: 96px; }
  .gallery { grid-template-columns: 1fr; }
  .g-list { flex-direction: row; flex-wrap: wrap; }
  .g-list button { font-size: 17px; padding: 6px 10px; }
  .w-label { display: none; }
}
@media (prefers-reduced-motion: reduce) { .timeline li, .g-stage img, .btn { transition: none; } }

/* v0.2 */
.reveal .wd { display: inline-block; white-space: pre; opacity: 0; transform: translateY(0.3em); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.2,.7,.2,1); }
.reveal.in .wd { opacity: 1; transform: none; }
.subtitle { position: fixed; left: 50%; bottom: 56px; z-index: 12; transform: translateX(-50%) translateY(8px); max-width: min(760px, calc(100vw - 32px)); margin: 0; padding: 9px 22px; background: var(--champ); color: var(--l-ink); border: 1px solid var(--gold); border-radius: 999px; font: italic 400 21px/1.3 var(--serif); text-align: center; opacity: 0; transition: opacity 1s ease, transform 1s ease; pointer-events: none; box-shadow: 0 0 50px rgba(224,196,130,0.35); }
.subtitle.show { opacity: 1; transform: translateX(-50%); }
@media (min-width: 761px) { .subtitle { left: auto; right: 40px; transform: translateY(8px); } .subtitle.show { transform: none; } }
@media (max-width: 760px) { .subtitle { display: none; } }
@media (prefers-reduced-motion: reduce) { .reveal .wd { opacity: 1; transform: none; transition: none; } .subtitle { transition: none; } }