/* Default (no phase class) = dusk palette. Phase class set server-side by worker.js. */
:root{--bg:#fbeee3;--fg:#2a1a14;--mut:#6b4a3e;--acc:#a8402f;--line:rgba(168,64,47,.12);--g1:#f2a06b;--g2:#e88a9a;color-scheme:light}
html.phase-night{--bg:#0b1210;--fg:#e8efe9;--mut:#93a39b;--acc:#7fd1b0;--line:rgba(127,209,176,.18);color-scheme:dark}
html.phase-day{--bg:#f6f5f0;--fg:#14201b;--mut:#5d6b64;--acc:#1f7a5a;--line:rgba(20,32,27,.12);color-scheme:light}
html.phase-dawn{--bg:#fbf0e4;--fg:#2a1a14;--mut:#6b4a3e;--acc:#a8402f;--line:rgba(31,122,90,.12);--g1:#f6b67a;--g2:#ef9aa6;color-scheme:light}
html.phase-dusk{--bg:#fbeee3;--fg:#2a1a14;--mut:#6b4a3e;--acc:#a8402f;--line:rgba(168,64,47,.12);--g1:#f2a06b;--g2:#e88a9a;color-scheme:light}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font:400 17px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden}
.bg{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60rem 40rem at 85% -10%,color-mix(in srgb,var(--acc) 16%,transparent),transparent 60%),radial-gradient(40rem 30rem at -10% 110%,color-mix(in srgb,var(--acc) 10%,transparent),transparent 60%)}
.grid{position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at center,#000 40%,transparent 85%);-webkit-mask-image:radial-gradient(ellipse at center,#000 40%,transparent 85%)}
header,footer{width:100%;max-width:1080px;margin:0 auto;padding:28px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.mark{display:flex;align-items:center;gap:12px;font-weight:600;letter-spacing:.01em;font-size:15px;color:var(--fg);text-decoration:none}
.mark img{width:28px;height:28px}
main{flex:1;width:100%;max-width:1080px;margin:0 auto;padding:8vh 24px 10vh;display:flex;flex-direction:column;justify-content:center}
.eyebrow{font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--acc);display:inline-flex;align-items:center;gap:10px;margin-bottom:28px}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 22%,transparent)}
.sun-badge{display:inline-flex;align-items:center;gap:8px;width:fit-content;max-width:100%;margin-bottom:18px;padding:5px 11px;font:400 12px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--mut);background:color-mix(in srgb,var(--bg) 60%,transparent);border:1px solid color-mix(in srgb,var(--acc) 24%,transparent);border-radius:999px}
.sun-badge-icon{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
h1{font-family:ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-weight:500;font-size:clamp(44px,9vw,112px);line-height:.98;letter-spacing:-.025em;max-width:12ch}
h1 em{font-style:italic;color:var(--acc)}
.lede{margin-top:32px;font-size:clamp(18px,2.2vw,22px);color:var(--mut);max-width:34ch}
.rule{margin-top:56px;height:1px;background:var(--line);max-width:420px}
footer{font-size:13px;color:var(--mut);border-top:1px solid var(--line)}
footer span:last-child{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}
a.back{color:var(--acc);text-decoration:none;border-bottom:1px solid currentColor}
/* warm glow: dusk sinks from top-right, dawn rises from bottom-left */
:root:not(.phase-day):not(.phase-night):not(.phase-dawn) .bg{background:radial-gradient(70rem 45rem at 90% -15%,color-mix(in srgb,var(--g1) 55%,transparent),transparent 65%),radial-gradient(50rem 35rem at 20% 0%,color-mix(in srgb,var(--g2) 35%,transparent),transparent 60%),linear-gradient(180deg,color-mix(in srgb,var(--g1) 18%,transparent),transparent 70%)}
html.phase-dawn .bg{background:radial-gradient(70rem 45rem at 10% 115%,color-mix(in srgb,var(--g1) 55%,transparent),transparent 65%),radial-gradient(50rem 35rem at 80% 100%,color-mix(in srgb,var(--g2) 35%,transparent),transparent 60%),linear-gradient(0deg,color-mix(in srgb,var(--g1) 18%,transparent),transparent 70%)}
body{transition:background-color .6s,color .6s}
@media (max-width:560px){header,footer{padding:20px}main{padding:6vh 20px 8vh}footer{flex-direction:column;align-items:flex-start}}