/* Red Sky in the Morning — palette sampled from five red-sky photos (vault: Personal/Projects/Red Sky in the Morning/palette/).
   Always dark: indigo cloud tops → crimson → ember → gold horizon. The pale-dawn light theme was retired 2026-09-06
   (Kris: "darker / redder please. it's not pink sky in the morning") — the OS colour scheme no longer changes the sky. */
:root{
  color-scheme: dark;
  --sky-top:#12081f; --sky-indigo:#2e1548; --sky-plum:#6b1547; --sky-crimson:#b8102a; --sky-red:#e0261c;
  --sky-ember:#f05a1c; --sky-orange:#ff8a2a; --sky-gold:#ffb347; --sun:#ffe08a; --sun-core:#fff7c8;
  --bg:#120a1c; --bg-2:#1a0f26; --surface:#211430; --surface-2:#2b1a3c; --surface-3:#36224a;
  --ink:#fdf3ec; --ink-2:#dcbdb4; --ink-3:#a58a93; --rule:#3d2650; --rule-2:#5a3868;
  --s0:#7f8bb8; --s1:#f2b53a; --s2:#f26a1b; --s3:#e0261c; --s4:#b52fd0;
  --s0-ink:#0f1220; --s1-ink:#2a1700; --s2-ink:#2a0d00; --s3-ink:#fff4ee; --s4-ink:#fff4fb;
  --glow:0 0 0 1px rgba(255,179,71,.10), 0 10px 30px rgba(0,0,0,.45);
  --glow-hot:0 0 24px rgba(224,38,28,.35);
  --link:#ffb347; --cloud:.55;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.55 "Avenir Next","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--link)}

/* ---- the sky: a full-bleed hero painted in CSS, no image ---- */
.hero{position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(120% 70% at 50% 100%, var(--sky-ember) 0%, var(--sky-red) 34%, var(--sky-crimson) 60%, transparent 84%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-indigo) 22%, var(--sky-plum) 42%, var(--sky-crimson) 64%, var(--sky-red) 84%, var(--sky-ember) 100%);
}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;opacity:var(--cloud);pointer-events:none;
  background:
    radial-gradient(38% 12% at 18% 30%, rgba(26,15,51,.75), transparent 70%),
    radial-gradient(30% 10% at 62% 22%, rgba(26,15,51,.70), transparent 70%),
    radial-gradient(44% 12% at 40% 48%, rgba(58,29,92,.65), transparent 70%),
    radial-gradient(34% 10% at 85% 40%, rgba(26,15,51,.60), transparent 70%),
    radial-gradient(52% 12% at 30% 66%, rgba(107,21,71,.55), transparent 70%),
    radial-gradient(40% 10% at 70% 60%, rgba(58,29,92,.55), transparent 70%);
}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(18,10,28,.55) 60%, var(--bg));}
.hero .inner{max-width:1160px;margin:0 auto;padding:44px 18px 40px;display:flex;flex-direction:column;gap:12px}
.eyebrow{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--sun);text-shadow:0 1px 8px rgba(0,0,0,.35)}
h1{margin:0;font-size:clamp(38px,6.4vw,74px);font-weight:900;letter-spacing:-.035em;line-height:.98;color:#fff8f0;
  text-shadow:0 2px 0 rgba(90,10,20,.35), 0 12px 40px rgba(0,0,0,.45)}
.hero .sub{color:#ffe9dc;text-shadow:0 1px 10px rgba(0,0,0,.45);max-width:66ch}
.hero .sub strong{color:#fff}
.toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:8px}
.btn{font:inherit;font-weight:700;padding:8px 16px;border:1px solid rgba(255,235,210,.35);border-radius:999px;
  background:rgba(20,8,30,.35);color:#fff4ea;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn:hover{background:rgba(20,8,30,.55);border-color:var(--sky-gold)}
.chk{display:flex;align-items:center;gap:6px;color:#ffe9dc;font-size:14px;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.chk input{accent-color:var(--sky-gold)}
.stamp{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:#ffd9c2;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.navlink{font-weight:700;color:#fff4ea;text-decoration:none;margin-left:auto;border-bottom:1px solid rgba(255,244,234,.4);text-shadow:0 1px 8px rgba(0,0,0,.4)}
.navlink:hover{border-color:var(--sky-gold);color:#fff}
.eyebrow .navlink{margin-left:0;font-family:inherit;letter-spacing:.14em}

/* ---- page body ---- */
.wrap{max-width:1160px;margin:0 auto;padding:22px 18px 64px;display:flex;flex-direction:column;gap:24px}
h2{margin:0;font-size:19px;font-weight:800;letter-spacing:-.01em}
.sub{color:var(--ink-2);max-width:68ch;margin:0}
.status{padding:12px 14px;border:1px solid var(--rule-2);border-radius:12px;background:var(--surface-2);font-size:14px}

.groups{display:flex;flex-direction:column;gap:26px}
.group{display:flex;flex-direction:column;gap:12px}
.ghead{font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sky-gold);
  padding-bottom:8px;border-bottom:1px solid var(--rule-2);display:flex;align-items:center;gap:10px}
.ghead::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--sky-gold),transparent)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:14px}

.card{position:relative;background:linear-gradient(180deg,var(--surface),var(--bg-2));border:1px solid var(--rule);border-radius:16px;
  padding:14px 16px 12px;display:flex;flex-direction:column;gap:9px;box-shadow:var(--glow);overflow:hidden}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--band)}
.card.fav{border-color:var(--sky-gold);box-shadow:var(--glow),0 0 0 1px rgba(255,179,71,.35)}
.card .top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding-left:6px}
.card .city{font-weight:800;font-size:17px;line-height:1.15;letter-spacing:-.01em}
.card .meta{font-family:ui-monospace,Menlo,monospace;font-size:10.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em;margin-top:3px}
.star{font:inherit;font-size:22px;line-height:1;background:none;border:0;cursor:pointer;color:var(--ink-3);padding:0 2px;transition:transform .12s ease,color .12s ease}
.star:hover{transform:scale(1.15);color:var(--sky-gold)}
.star[aria-pressed="true"]{color:var(--sky-gold);text-shadow:0 0 12px rgba(255,179,71,.6)}

.worst{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:12px;margin-left:6px;
  background:linear-gradient(135deg,var(--band),color-mix(in srgb,var(--band) 70%,#000 30%));color:var(--band-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.card[style*="--band:var(--s3)"] .worst,.card[style*="--band:var(--s4)"] .worst{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),var(--glow-hot)}
.worst .lbl{font-family:ui-monospace,Menlo,monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.9}
.worst .big{font-size:24px;font-weight:900;letter-spacing:-.02em;line-height:1.05}
.worst .det{font-size:12.5px;opacity:.95}
.worst .act{font-size:12.5px;font-weight:700;margin-top:3px}

.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-left:6px}
.mt{background:var(--surface-2);border:1px solid var(--rule);border-radius:10px;padding:7px 9px;min-width:0}
.mt .k{font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.mt .v{font-weight:900;font-size:18px;font-variant-numeric:tabular-nums;line-height:1.15;letter-spacing:-.01em}
.mt .s{font-size:11px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt.a1 .v{color:var(--s1)} .mt.a2 .v{color:var(--s2)} .mt.a3 .v{color:var(--s3)} .mt.a4 .v{color:var(--s4)}
.others{display:flex;flex-wrap:wrap;gap:6px;margin-left:6px}
.pill{font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:20px;background:var(--surface-2);border:1px solid var(--rule-2);color:var(--ink-2)}
.pill.s2{border-color:var(--s2);color:var(--s2)} .pill.s3{border-color:var(--s3);color:var(--s3)} .pill.s4{border-color:var(--s4);color:var(--s4)}

.panel{background:linear-gradient(180deg,var(--surface),var(--bg-2));border:1px solid var(--rule);border-radius:18px;padding:20px 22px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--glow)}
.legend{display:flex;flex-wrap:wrap;gap:8px}
.lg{display:flex;align-items:center;gap:7px;font-size:12.5px;padding:4px 11px 4px 6px;border:1px solid var(--rule-2);border-radius:20px;background:var(--surface-2)}
.sw{width:14px;height:14px;border-radius:4px}
details summary{cursor:pointer;font-weight:700;color:var(--link)}
.rules{border-collapse:collapse;width:100%;font-size:13px;margin-top:8px}
.rules th,.rules td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--rule);white-space:nowrap}
.rules thead th{font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.panel > details{overflow-x:auto}
code{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;background:var(--surface-3);padding:1px 6px;border-radius:5px}
footer{color:var(--ink-3);font-size:12.5px;border-top:1px solid var(--rule);padding-top:16px;display:flex;flex-direction:column;gap:8px}
footer p{margin:0}
.prose p{margin:0;color:var(--ink-2);max-width:68ch}
.poem{margin:6px 0;padding:16px 20px;border-left:4px solid var(--sky-red);border-radius:0 12px 12px 0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--sky-crimson) 22%,transparent),transparent)}
.poem p{color:var(--ink);font-size:18px;line-height:1.5;font-style:italic;font-family:Georgia,"Times New Roman",serif}
.skeleton{opacity:.55}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:520px){.hero .inner{padding:34px 16px 30px}}