/* Elf Tonight. Night-time ink and lamp gold: it's 6pm, the kids are nearly in bed, the elf still needs a plan. */
:root{
  --bg:#eef1f6; --surface:#ffffff; --ink:#14203a; --muted:#56627a; --line:#d5dbe6;
  --night:#14203a; --night-ink:#e7ecf6; --night-muted:#a9b4cc;
  --lamp:#a86a00; --lamp-bright:#f2b544; --lamp-soft:#f6e6c4; --holly:#a3263a;
  --display:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;
  --body:"Literata",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#0d1424; --surface:#151f35; --ink:#e7ecf6; --muted:#9aa6bf; --line:#283552;
  --night:#0a1020; --lamp:#f2b544; --lamp-soft:#3a2f14; --holly:#f07a8c; color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6}
img{max-width:100%}
a{color:inherit;text-decoration-color:var(--lamp);text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:2px solid var(--lamp-bright);outline-offset:3px}
h1,h2,h3{font-family:var(--display);line-height:1.1;margin:0;text-wrap:balance}
h1{font-size:clamp(2.3rem,7vw,4.2rem);font-weight:800;letter-spacing:-.025em}
h2{font-size:clamp(1.5rem,4vw,2.2rem);font-weight:700;letter-spacing:-.01em}
h3{font-size:1.15rem;font-weight:700}
p{margin:0}
.wrap{max-width:960px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
.muted{color:var(--muted)} .small{font-size:.88rem}
.kicker{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lamp)}

/* top bar (inner pages) */
.bar{background:var(--night);color:var(--night-ink)}
.bar .wrap{padding-block:14px}
.brand{font-family:var(--display);font-weight:800;font-size:1.15rem;text-decoration:none;color:var(--night-ink)}
.brand span{font-family:var(--mono);font-weight:600;font-size:.85rem;color:var(--lamp-bright)}

/* hero */
.hero{background:var(--night);color:var(--night-ink);position:relative;overflow:hidden}
.hero .wrap{padding-block:28px 64px;display:grid;gap:28px}
.hero nav{display:flex;justify-content:space-between;align-items:center;gap:12px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px;align-items:center}
.hero h1 em{font-style:normal;color:var(--lamp-bright)}
.hero .lede{font-size:1.15rem;color:var(--night-muted);max-width:34ch;margin-top:18px}
.clock{justify-self:center;width:min(260px,70vw);aspect-ratio:1;border-radius:50%;border:2px solid #2c3a5c;display:grid;place-items:center;position:relative;
  background:radial-gradient(circle at 50% 50%,#1d2b4a 0,#14203a 62%);box-shadow:0 0 0 10px #172440,0 0 80px rgba(242,181,68,.18)}
.clock b{font-family:var(--mono);font-size:clamp(2.6rem,9vw,3.6rem);color:var(--lamp-bright);letter-spacing:-.02em}
.clock small{position:absolute;bottom:26%;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--night-muted)}
.stars{position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:radial-gradient(1.4px 1.4px at 12% 22%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 78% 14%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 64% 70%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 30% 80%,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 90% 52%,#fff 50%,transparent 51%)}
.buy{display:grid;gap:10px;margin-top:26px;justify-items:start}
.btn{display:inline-block;font-family:var(--display);font-weight:700;font-size:1.05rem;text-decoration:none;border:0;cursor:pointer;
  background:var(--lamp-bright);color:#14203a;padding:14px 22px;border-radius:8px}
.btn:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn[aria-disabled="true"]{background:#33405f;color:var(--night-muted);cursor:not-allowed}
.fine{font-size:.82rem;color:var(--night-muted);max-width:52ch}
@media (max-width:720px){.hero-grid{grid-template-columns:1fr}.clock{grid-row:1;width:min(180px,50vw)}}

/* sections */
section.band{padding-block:64px}
section.band>.wrap{display:grid;gap:24px}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.steps div{display:grid;gap:6px;align-content:start}
.steps .t{font-family:var(--mono);font-size:.9rem;color:var(--lamp);font-weight:600}
@media (max-width:720px){.steps{grid-template-columns:1fr}}

/* the 24-night calendar */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal .dow{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center;padding-bottom:2px}
.cal .d{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:8px;min-height:86px;display:grid;align-content:start;gap:4px;min-width:0}
.cal .d b{font-family:var(--mono);font-size:.85rem;color:var(--lamp)}
.cal .d span{font-size:.78rem;line-height:1.3;overflow-wrap:anywhere}
.cal .d.weekend{background:var(--lamp-soft)}
.cal .blank{border:0;background:transparent}
@media (max-width:640px){.cal{grid-template-columns:repeat(2,minmax(0,1fr))}.cal .dow,.cal .blank{display:none}.cal .d{min-height:0}}

/* a night (sample on the home page, and the private nights page) */
.night{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:24px;display:grid;gap:12px;margin-block:18px}
.night dl{margin:0;display:grid;gap:4px}
.night dt{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.night dd{margin:0}
.night ul{margin:6px 0 0;padding-left:1.1em}
.aside{color:var(--muted);font-style:italic}
.note{margin:6px 0 0;background:var(--lamp-soft);border-radius:8px;padding:16px 18px;font-style:italic;font-size:1.1rem}
.note footer{font-style:normal;font-family:var(--display);font-weight:700;margin-top:8px}
.note footer::before{content:"— "}
.actions{display:flex;flex-wrap:wrap;gap:8px}
.actions .btn{font-size:.95rem;padding:10px 14px}

.list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px;padding:0;margin:0;list-style:none}
.list li{padding-left:26px;position:relative}
.list li::before{content:"";position:absolute;left:0;top:.55em;width:12px;height:12px;border-radius:50%;background:var(--lamp-bright)}
@media (max-width:640px){.list{grid-template-columns:1fr}}

details{border-top:1px solid var(--line);padding-block:14px}
details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-family:var(--display);font-weight:700;font-size:1.05rem}
details p{margin-top:8px;max-width:66ch}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:24px;display:grid;gap:12px;margin-block:18px}
.intro{padding-block:32px 8px;display:grid;gap:10px}
main.wrap{padding-bottom:48px}
.prose{max-width:70ch;display:grid;gap:14px;padding-block:32px 48px}
.prose h2{font-size:1.3rem;margin-top:12px}
.prose ul{margin:0;padding-left:1.2em;display:grid;gap:6px}
table.stats{border-collapse:collapse;width:100%;max-width:520px}
table.stats th,table.stats td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.foot{border-top:1px solid var(--line);padding-block:28px;font-size:.88rem;color:var(--muted)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between}
.foot nav{display:flex;flex-wrap:wrap;gap:14px}
@media (prefers-reduced-motion:no-preference){.clock{animation:glow 4s ease-in-out infinite alternate}@keyframes glow{to{box-shadow:0 0 0 10px #172440,0 0 110px rgba(242,181,68,.28)}}}

/* ---------- Christmas dressing ---------- */
:root{--holly-red:#b3283c;--pine:#1f6b4f;--snow:#f7f9fc}
/* fairy lights strung across the top of the hero */
.lights{position:absolute;top:-6px;left:-2%;right:-2%;height:46px;display:flex;justify-content:space-between;pointer-events:none;z-index:1}
.lights::before{content:"";position:absolute;left:0;right:0;top:8px;height:22px;border-bottom:2px solid #33405f;border-radius:0 0 50% 50%/0 0 100% 100%}
.lights i{position:relative;width:10px;height:16px;border-radius:50% 50% 45% 45%;margin-top:22px;background:var(--lamp-bright);box-shadow:0 0 12px 3px rgba(242,181,68,.55)}
.lights i:nth-child(3n+1){background:#e2485f;box-shadow:0 0 12px 3px rgba(226,72,95,.55)}
.lights i:nth-child(3n+2){background:#4fc08d;box-shadow:0 0 12px 3px rgba(79,192,141,.5)}
.lights i:nth-child(even){margin-top:28px}
@media (prefers-reduced-motion:no-preference){.lights i{animation:twinkle 2.4s ease-in-out infinite}.lights i:nth-child(2n){animation-delay:.8s}.lights i:nth-child(3n){animation-delay:1.6s}
@keyframes twinkle{50%{opacity:.45;box-shadow:none}}}
/* gentle snowfall */
.snow{position:absolute;inset:0;pointer-events:none;opacity:.8;
  background-image:radial-gradient(2.5px 2.5px at 20px 30px,#fff 50%,transparent 51%),radial-gradient(2px 2px at 90px 120px,#fff 50%,transparent 51%),radial-gradient(3px 3px at 160px 60px,#fff 50%,transparent 51%),radial-gradient(1.8px 1.8px at 230px 170px,#fff 50%,transparent 51%),radial-gradient(2.2px 2.2px at 300px 90px,#fff 50%,transparent 51%);
  background-size:320px 220px}
@media (prefers-reduced-motion:no-preference){.snow{animation:snowfall 14s linear infinite}.snow.slow{animation-duration:24s;opacity:.45;background-size:260px 200px}
@keyframes snowfall{to{background-position:40px 220px}}}
.snow.slow{opacity:.45}
/* snowy edge under the hero */
.snowline{display:block;width:100%;height:46px;margin-top:-1px;color:var(--bg)}
.hero{padding-bottom:0}
.hero .wrap{position:relative;z-index:2}
.hero h1 em{color:var(--lamp-bright)}
.sprig{display:inline-block;width:1.1em;height:1.1em;vertical-align:-.12em;margin-left:.15em}
/* hero picture, framed like a photo on the fridge */
.polaroid{justify-self:center;margin:0;background:#fff;padding:12px 12px 44px;border-radius:4px;transform:rotate(2.5deg);box-shadow:0 18px 50px rgba(0,0,0,.45);max-width:400px;position:relative}
.polaroid img{display:block;width:100%;height:auto;border-radius:2px}
.polaroid figcaption{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-family:"Brush Script MT","Segoe Script",cursive;font-size:1.35rem;color:#14203a}
.polaroid::before{content:"";position:absolute;top:-12px;left:50%;width:90px;height:26px;margin-left:-45px;background:rgba(242,181,68,.75);transform:rotate(-3deg)}
@media (max-width:720px){.polaroid{grid-row:1;max-width:300px}}
/* advent calendar doors */
.cal .d{border:0;color:#fff;background:var(--pine);position:relative;overflow:hidden}
.cal .d:nth-child(odd){background:var(--holly-red)}
.cal .d.weekend{background:#a86a00}
.cal .d b{color:var(--lamp-bright);font-size:1rem}
.cal .d.weekend b{color:#fff}
.cal .d::after{content:"";position:absolute;right:8px;top:8px;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55)}
.cal .d span{color:#fff}
.cal .blank{background:transparent!important}
.cal .blank::after{display:none}
/* the elf's note reads like a gift tag */
.note{position:relative;border:2px dashed rgba(168,106,0,.45)}
.note::before{content:"";position:absolute;top:-9px;left:22px;width:16px;height:16px;border-radius:50%;background:var(--surface);border:2px solid rgba(168,106,0,.6)}
/* photo strip of real-looking setups */
.photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.photos figure{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.photos img{display:block;width:100%;height:auto}
.photos figcaption{padding:12px 14px;font-size:.92rem}
.photos figcaption b{font-family:var(--display)}
/* festive section headings */
.band h2::after{content:"";display:block;width:64px;height:6px;margin-top:12px;border-radius:3px;background:linear-gradient(90deg,var(--holly-red) 0 33%,var(--lamp-bright) 33% 66%,var(--pine) 66%)}
.buy-band{background:var(--night);color:var(--night-ink);border-radius:16px;padding:32px;position:relative;overflow:hidden}
.buy-band h2{color:var(--night-ink)}
.buy-band .fine{color:var(--night-muted)!important}
.night .sample-pic{display:block;width:calc(100% + 48px);max-width:none;height:auto;margin:-24px -24px 6px;border-radius:10px 10px 0 0}