/* ============================================================================
   SKY — the site in the game's own light.
   The game is a black canvas that fills with light: words in the corners, a
   serif set light with a moon glow, panels of near-black glass with a hairline
   of light round them, pill buttons that breathe, kickers in small spaced
   capitals, nothing louder than it needs to be. This sheet is those laws, for
   pages. Tokens and component names come from Home - world/home.html and the
   front-door wireframes (FRONT-DOOR.html); every colour here is one of theirs.
   ============================================================================ */
:root{
  --bg:#000; --bg2:#05070e; --bg3:#0a0e1a;
  --ink:#e4eeff; --ink2:#c3cfe6; --muted:#9aa6c0; --dim:#5f6a86;
  --line:rgba(190,215,255,.16); --line2:rgba(190,215,255,.30); --line3:rgba(220,238,255,.6);
  --panel:rgba(5,7,14,.82); --glass:rgba(140,180,255,.10);
  --gold:#ffd68a; --gold2:#ffb266; --moon:#8ec5ff; --mint:#a8e6d0; --rose:#f2a5c8; --bad:#f28b8b;
  --moonglow:rgba(150,200,255,.42); --moonglow2:rgba(120,170,255,.22);
  --serif:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,serif;
  --sans:"Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,Consolas,"Cascadia Mono",Menlo,monospace;
  /* the older pages' names for the same lights (see the last block) */
  --night:#000; --night-2:#05070e; --paper:#000; --card:var(--panel); --ink-2:var(--ink2);
  --teal:var(--moon); --teal-soft:rgba(142,197,255,.10); --firefly:var(--mint); --ember:var(--gold); --ember-deep:var(--gold2);
  --amber:var(--gold); --amber-soft:rgba(255,214,138,.08);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; background:var(--bg); }
body{ margin:0; background:var(--bg); color:var(--ink); font:15.5px/1.6 var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
/* the constellation hangs beyond the coast: a few far lights, and one moon glow, fixed behind everything */
body::before{ content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; background:
  radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.55) 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 82% 12%, rgba(180,220,255,.5) 50%, transparent 51%),
  radial-gradient(1px 1px at 65% 30%, rgba(255,255,255,.4) 50%, transparent 51%),
  radial-gradient(1px 1px at 30% 60%, rgba(255,255,255,.32) 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 92% 55%, rgba(255,220,170,.4) 50%, transparent 51%),
  radial-gradient(1px 1px at 8% 82%, rgba(255,255,255,.3) 50%, transparent 51%),
  radial-gradient(1px 1px at 48% 88%, rgba(180,220,255,.35) 50%, transparent 51%),
  radial-gradient(1.2px 1.2px at 74% 76%, rgba(255,255,255,.28) 50%, transparent 51%),
  radial-gradient(1px 1px at 22% 40%, rgba(255,214,138,.35) 50%, transparent 51%),
  radial-gradient(900px 520px at 8% -10%, rgba(150,200,255,.10), transparent 70%),
  var(--bg); }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:300; margin:0; text-wrap:balance; letter-spacing:.02em; color:#f0f6ff; }
h1{ font-size:clamp(38px,5.2vw,62px); line-height:1.02; text-shadow:0 0 20px var(--moonglow), 0 0 56px var(--moonglow2); }
h1 em, h2 em{ font-style:normal; color:var(--gold); text-shadow:0 0 22px rgba(255,214,138,.35); }
h2{ font-size:clamp(26px,3.2vw,36px); line-height:1.1; letter-spacing:.04em; text-shadow:0 0 18px var(--moonglow2); }
h3{ font-size:1.25rem; letter-spacing:.04em; font-weight:400; }
p{ margin:0 0 12px; }
a{ color:var(--moon); text-decoration:none; } a:hover{ color:#fff; }
::selection{ background:rgba(140,190,255,.3); }
.wrap{ max-width:1080px; margin:0 auto; padding:0 24px; }
/* small spaced capitals: the game's kickers and corner words */
.kick, .kicker, .eyebrow{ font:600 11px/1.4 var(--sans); letter-spacing:.26em; text-transform:uppercase; color:rgba(154,166,192,.6); margin:0 0 12px; }
.quiet, .fine, small{ color:var(--muted); }
hr, .rim{ border:0; border-top:1px solid var(--line); margin:0; }
/* the panel — the worlds' panel grammar: near-black glass, a hairline of light */
.panel, .card, .cell, .door, .stepbox, .box, .step, .note{ background:var(--panel); border:1px solid var(--line); border-radius:22px; backdrop-filter:blur(10px);
  box-shadow:0 18px 50px rgba(0,0,0,.55), 0 0 46px rgba(120,170,255,.05); }
/* buttons: the one bright button the beginning ends on, and the quiet pill beside it */
.btn{ display:inline-block; font:inherit; font-size:16px; letter-spacing:.06em; color:rgba(238,246,255,.96); cursor:pointer; text-decoration:none; white-space:nowrap;
  padding:11px 28px; border-radius:999px; border:1px solid rgba(190,220,255,.4); background:var(--glass);
  box-shadow:0 0 26px rgba(140,190,255,.22), inset 0 0 18px rgba(140,190,255,.08); text-shadow:0 0 12px rgba(0,0,0,.9);
  transition:color .3s, border-color .3s, box-shadow .3s, background .3s; }
.btn:hover, .btn:focus-visible{ color:#fff; border-color:rgba(220,238,255,.75); box-shadow:0 0 40px rgba(150,200,255,.4), inset 0 0 22px rgba(150,200,255,.14); outline:none; }
.btn.breathe{ animation:hwBreathe 3.4s ease-in-out infinite; }
.btn.ghost, .btn.back, .btn.teal, .btn.sm{ background:rgba(6,8,16,.45); border-color:var(--line2); box-shadow:none; color:rgba(228,238,255,.86); }
.btn.ghost:hover, .btn.teal:hover{ border-color:var(--line3); box-shadow:0 0 22px rgba(150,200,255,.25); }
.btn.gold{ border-color:rgba(255,214,138,.5); background:rgba(255,214,138,.08); box-shadow:0 0 26px rgba(255,214,138,.18), inset 0 0 18px rgba(255,214,138,.06); }
.btn.gold:hover{ border-color:rgba(255,224,170,.85); box-shadow:0 0 40px rgba(255,214,138,.32); }
.btn.sm{ font-size:13px; padding:7px 16px; }
.btn[disabled]{ opacity:.4; cursor:default; }
/* the toggles and tags: .tog from the home world */
.tog, .pill, .sitepill{ display:inline-block; font:600 11.5px/1.5 var(--sans); letter-spacing:.14em; text-transform:uppercase; padding:6px 12px; border-radius:999px; border:1px solid var(--line); color:var(--muted); background:transparent; cursor:pointer; }
.tog.on, .pill.on{ color:var(--ink); border-color:var(--line2); background:var(--glass); }
.pill{ cursor:default; color:var(--gold); border-color:rgba(255,214,138,.35); }
.sitepill{ color:var(--gold); border-color:rgba(255,214,138,.45); cursor:default; }
/* words in the field: the name box from the home world — transparent, a hairline, the light inside */
input, select, textarea{ width:100%; font:inherit; font-size:15.5px; color:var(--ink); background:rgba(255,255,255,.035); border:1px solid rgba(228,240,255,.22); border-radius:10px; padding:11px 13px; letter-spacing:.02em; }
input::placeholder, textarea::placeholder{ color:rgba(154,166,192,.55); }
input:focus, select:focus, textarea:focus{ outline:none; border-color:rgba(190,220,255,.6); box-shadow:0 0 0 3px rgba(140,190,255,.14), 0 0 22px rgba(150,200,255,.18); }
select{ color-scheme:dark; }
input[type=checkbox], input[type=radio]{ width:auto; accent-color:var(--moon); }
label.f span, label.f > span{ color:var(--ink2); }
label.f small{ color:var(--muted); }
.err{ color:var(--bad); }
@keyframes hwRise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes hwBreathe{ 0%,100%{ opacity:.94; filter:drop-shadow(0 0 16px rgba(140,190,255,.26)); } 50%{ opacity:1; filter:drop-shadow(0 0 34px rgba(165,210,255,.5)); } }
.rise{ animation:hwRise 1.4s ease-out both; }
.rise.d1{ animation-delay:.25s; } .rise.d2{ animation-delay:.7s; } .rise.d3{ animation-delay:1.15s; } .rise.d4{ animation-delay:1.6s; }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.01s !important; animation-iteration-count:1 !important; } }

/* ---- the corner words: header + footer, the same on every page ---- */
header.sky{ position:sticky; top:0; z-index:30; background:linear-gradient(rgba(0,0,0,.92), rgba(0,0,0,.72)); backdrop-filter:blur(10px); border-bottom:1px solid rgba(190,215,255,.08); }
header.sky .nav{ display:flex; align-items:center; gap:26px; padding:16px 0; flex-wrap:wrap; }
header.sky .brand{ font-family:var(--serif); font-weight:300; font-size:24px; letter-spacing:.03em; color:rgba(240,247,255,.96); text-shadow:0 0 20px var(--moonglow), 0 0 56px var(--moonglow2); line-height:1; }
header.sky .brand b{ font-weight:300; color:var(--gold); }
header.sky .brand small{ display:block; font:600 10px/1 var(--sans); letter-spacing:.42em; text-transform:uppercase; color:rgba(228,240,255,.4); margin-top:7px; text-shadow:0 0 18px rgba(150,200,255,.4); }
header.sky .sp{ flex:1; }
header.sky a.lnk{ font:600 11px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:rgba(228,238,255,.5); transition:color .3s; }
header.sky a.lnk:hover, header.sky a.lnk.on{ color:rgba(228,238,255,.95); }
@media (max-width:720px){ header.sky .nav, header:not(.sky) .nav{ gap:12px 16px; padding:12px 0; } header.sky a.lnk, header:not(.sky) a.lnk{ display:none; } header.sky .brand{ font-size:21px; } }
footer.sky{ margin-top:72px; padding:40px 0 54px; border-top:1px solid var(--line); color:var(--dim); font-size:13px; }
footer.sky .wrap{ display:flex; gap:30px; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; }
footer.sky .brand{ font-family:var(--serif); font-weight:300; font-size:20px; color:rgba(240,247,255,.9); margin-bottom:8px; }
footer.sky .brand b{ font-weight:300; color:var(--gold); }
footer.sky a{ color:var(--muted); } footer.sky a:hover{ color:#fff; }
footer.sky .crisis{ max-width:54ch; color:var(--ink2); border:1px solid rgba(255,214,138,.30); border-radius:14px; padding:14px 18px; background:linear-gradient(180deg,rgba(255,214,138,.06),rgba(255,214,138,0)); }
footer.sky .crisis b{ color:var(--gold); }

/* ---- the older pages, re-lit: their own sheets set paper and cards; the tokens above already turned those to sky, these are the few hard-coded lights ---- */
body{ font-family:var(--sans); }
.brand{ font-family:var(--serif); }
main .stepbox, .box{ box-shadow:0 18px 50px rgba(0,0,0,.55); }
.note{ background:rgba(255,255,255,.03); color:var(--muted); border-radius:12px; }
.choice button{ font:600 12.5px/1.5 var(--sans); letter-spacing:.08em; text-transform:uppercase; background:transparent; border:1px solid var(--line); color:var(--muted); border-radius:999px; cursor:pointer; padding:9px 16px; }
.choice button.on{ color:var(--ink); border-color:var(--line2); background:var(--glass); font-weight:600; }
.choice button.today.on{ color:var(--bad); border-color:rgba(242,139,139,.5); background:rgba(242,139,139,.08); }
.crisis:not(footer .crisis), .urgent{ background:rgba(242,139,139,.06); border:1px solid rgba(242,139,139,.3); border-radius:12px; color:var(--ink2); }
.urgent b, .crisis b{ color:var(--bad); }
.progress i{ background:var(--line); } .progress i.on{ background:var(--moon); box-shadow:0 0 10px rgba(142,197,255,.6); }
.done-list li{ border-bottom:1px dashed var(--line); }
.done-list li::before, .done li::before{ background:transparent; border:1px solid var(--gold); color:var(--gold); font-family:var(--mono); font-weight:600; }
.doorlink{ background:var(--panel); border:1px solid var(--line); border-radius:16px; }
.doorlink:hover{ border-color:rgba(255,214,138,.5); }
section.door.alt, section.alt, .sec.alt{ background:transparent; border-top:1px solid var(--line); border-bottom:0; }
ol.plan li::before{ background:transparent; border:1px solid var(--moon); color:var(--moon); }
.letter{ background:rgba(255,248,235,.92); color:#2f2a20; }
.hero{ background:transparent; }
header:not(.sky){ background:linear-gradient(rgba(0,0,0,.92), rgba(0,0,0,.72)); backdrop-filter:blur(10px); border-bottom:1px solid rgba(190,215,255,.08); }
header:not(.sky) .brand{ font-family:var(--serif); font-weight:300; font-size:22px; letter-spacing:.03em; color:rgba(240,247,255,.96); text-shadow:0 0 20px var(--moonglow); }
header:not(.sky) .brand b{ font-weight:300; color:var(--gold); }
header:not(.sky) a.lnk{ font:600 11px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:rgba(228,238,255,.5); }
header:not(.sky) a.lnk:hover, header:not(.sky) a.lnk.on{ color:rgba(228,238,255,.95); }
header:not(.sky) .btn{ font-size:13px; padding:8px 18px; }
footer:not(.sky){ background:transparent; border-top:1px solid var(--line); color:var(--dim); }