/* Starlit Door: the paper crib world.
   The scene is the page's ground; everything you read sits on cut paper laid over it.
   Two editions share the structure and differ in time of day, type and ink:
     Scripture: Bethlehem at night. Navy ground, star gold, Eczar headings.
     Spiritual: the same story at dusk. Blue-violet ground, rose-gold glow, Baloo 2 headings.
   Body text is Hind for both (all three faces come from Indian type foundries). */
:root{
  --ground:#1b2f5e; --ground-deep:#13234a; --on-ground:#f5f1e8; --on-ground-muted:#c9d3ea;
  --paper:#fffaf1; --paper-edge:#e9dfcd; --paper-shadow:rgba(0,0,0,.34);
  --ink:#1f1d2b; --ink-muted:#4e4a5c; --accent:#f1c75c; --accent-ink:#5a3d00; --act:#2c4a86; --act-ink:#ffffff; --act-press:#20386a;
  --verse:#2c4a86; --soft:#eef1f8; --done:#2f6d5c;
  --display:'Eczar',Georgia,serif; --display-weight:700; --display-track:-.01em;
  --body:'Hind','Segoe UI',system-ui,sans-serif;
  --r-paper:6px; --r-pill:999px;
  color-scheme:light only;
}
[data-edition="spiritual"]{
  --ground:#2c2f63; --ground-deep:#20234d; --on-ground:#fbf1ea; --on-ground-muted:#e6d3e2;
  --paper:#fffaf5; --paper-edge:#ecdcd4; --paper-shadow:rgba(0,0,0,.3);
  --ink:#2a2236; --ink-muted:#5d4a5e; --accent:#f4b183; --accent-ink:#4a2414; --act:#8a4d7a; --act-ink:#ffffff; --act-press:#723f65;
  --verse:#8a4d7a; --soft:#f6eef3; --done:#3f7a5c;
  --display:'Baloo 2','Hind',sans-serif; --display-weight:800; --display-track:-.005em;
}
*{box-sizing:border-box}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}} /* in-page links glide; reduced motion keeps the jump */
html{background:var(--ground);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--on-ground);font:400 17px/1.55 var(--body);-webkit-font-smoothing:antialiased;padding-bottom:env(safe-area-inset-bottom,0px)}
::selection{background:var(--accent);color:var(--accent-ink)}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}
button{font:inherit;color:inherit}
.shell{max-width:560px;margin:0 auto;position:relative}

/* ---------- the scene ---------- */
/* Opened from the home screen, the page runs under the clock and the camera notch: the scene starts below them
   (on the sky's own top colour), so the star is never hidden. In a browser the inset is 0. */
.scene-wrap{position:relative;height:calc(clamp(280px,38vh,420px) + env(safe-area-inset-top,0px));overflow:hidden;background:#101c42}
[data-edition="spiritual"] .scene-wrap{background:#2c2f63}
.scene-wrap .scene{top:env(safe-area-inset-top,0px)}
@media (min-width:560px){.scene-wrap{height:auto;aspect-ratio:1000/640}.scene-wrap .scene{top:0}}
.scene{position:absolute;inset:0}
.scene-top{position:absolute;left:0;right:0;top:0;padding:calc(env(safe-area-inset-top,0px) + 14px) 18px 0;display:flex;justify-content:space-between;align-items:center;z-index:2}
/* The logo: emblem + textured name + ADVENT (one image per edition, same size, so nothing moves on a switch). */
.wordmark{display:inline-flex;align-items:center;text-decoration:none;line-height:0}
.wordmark img{height:46px;width:auto}
@media (min-width:960px){.wordmark img{height:58px}}
.wordmark .logo-dusk,[data-edition="spiritual"] .wordmark .logo-night{display:none}
[data-edition="spiritual"] .wordmark .logo-dusk{display:block}
.scene-caption{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px 34px;font-size:14.5px;color:var(--on-ground-muted)}
.scene-caption b{color:var(--on-ground);font-weight:600}
.peek-btn{all:unset;cursor:pointer;font-weight:600;font-size:14.5px;color:var(--on-ground);padding:calc(8px + .11em) 14px calc(8px - .11em);border-radius:var(--r-pill);background:rgba(255,255,255,.12);white-space:nowrap}
.peek-btn:hover{background:rgba(255,255,255,.2)}
.peek-btn:focus-visible{outline:3px solid var(--accent)}

/* ---------- paper ---------- */
.paper{background:var(--paper);color:var(--ink);border-radius:var(--r-paper);box-shadow:0 1px 0 var(--paper-edge),0 6px 0 -3px var(--paper-edge),0 16px 30px -12px var(--paper-shadow);position:relative}
.door{margin:0 14px;padding:22px 20px 20px;z-index:3}
.door .content{animation:unfold .6s cubic-bezier(.16,1,.3,1) both}
@keyframes unfold{from{clip-path:inset(0 0 100% 0);opacity:.3}to{clip-path:inset(0 0 -40px 0);opacity:1}}
.door .when{font-size:14.5px;color:var(--ink-muted);margin:0 0 2px}
.door h1{font:var(--display-weight) clamp(32px,9vw,42px)/1.02 var(--display);letter-spacing:var(--display-track);margin:0 0 6px;text-wrap:balance;color:var(--ink)}
.door .kind{font-size:14px;font-weight:600;color:var(--verse);margin:0 0 16px}
.num-seal{position:absolute;right:16px;top:-28px;width:62px;height:62px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font:var(--display-weight) 30px/1 var(--display);box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 70%,#000),0 10px 18px -8px rgba(0,0,0,.4)}
.verse{margin:0 0 16px;font:500 20px/1.42 var(--display);color:var(--ink)}
[data-edition="spiritual"] .verse{font:500 18.5px/1.45 var(--body)}
.verse cite{display:block;margin-top:6px;font:600 14px/1 var(--body);font-style:normal;color:var(--verse)}
.ref-only{font-size:14.5px;font-weight:600;color:var(--verse);margin:0 0 14px}
.deed{font-size:18.5px;line-height:1.55;margin:0 0 14px;color:var(--ink);max-width:62ch}
.why{font-size:16px;color:var(--ink-muted);margin:0 0 14px;max-width:62ch}
.note{font-size:15px;color:var(--ink-muted);margin:0 0 12px;padding-top:12px;border-top:1px dashed var(--paper-edge)}
.note.catholic{color:var(--ink)}
.note + .note{border-top:0;padding-top:0}

/* the flap: today's door before it has been opened on this device */
.flap{position:relative;min-height:300px;margin:-22px -20px -20px;border-radius:var(--r-paper);background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px;z-index:4;transform-origin:50% 0;
}
.flap-masc{width:96px;margin-bottom:-6px}
.flap .big{font:var(--display-weight) 88px/1 var(--display);color:var(--verse)}
.flap p{margin:0;color:var(--ink-muted);font-size:16px}
.flap.opening{animation:flapOpen .75s cubic-bezier(.5,0,.2,1) forwards}
@keyframes flapOpen{0%{transform:perspective(900px) rotateX(0)}100%{transform:perspective(900px) rotateX(-96deg);opacity:0}}

/* ---------- actions ---------- */
.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;font:600 17.5px/1 var(--body);padding:calc(15px + .15em) 22px calc(15px - .15em); /* Hind sits high in its line box; nudge the caps to the optical centre */border-radius:12px;background:var(--act);color:var(--act-ink);box-shadow:0 4px 0 var(--act-press);transition:transform .12s ease-out,box-shadow .12s ease-out}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--act-press)}
.btn[disabled]{opacity:.55;cursor:default}
.btn.wide{width:100%}
.btn.ghost{background:transparent;color:var(--act);box-shadow:inset 0 0 0 2px var(--act)}
.btn.ghost:active{transform:none}
.btn.gold{background:var(--accent);color:var(--accent-ink);box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 65%,#000)}
.btn .mini{width:30px;height:30px;margin:-6px 0}
.done-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:4px}
.who{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.who-label{width:100%;font-size:14px;color:var(--ink-muted);margin:0}
.chip{border:0;cursor:pointer;padding:9px 14px 9px 10px;border-radius:var(--r-pill);background:var(--soft);color:var(--ink);font-weight:600;font-size:15.5px;display:inline-flex;align-items:center;gap:8px}
.chip .dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--ink-muted);display:inline-block;flex:none}
.chip[aria-pressed="true"]{background:var(--act);color:var(--act-ink)}
.chip[aria-pressed="true"] .dot{border-color:var(--act-ink)}
.chip.ticked .dot{background:var(--done);border-color:var(--done);box-shadow:inset 0 0 0 3px var(--soft)}
.chip[aria-pressed="true"].ticked .dot{box-shadow:inset 0 0 0 3px var(--act)}
.toast{margin:12px 0 0;font-weight:600;color:var(--done);min-height:1.4em}
.toast:empty{margin:0;min-height:0}

/* ---------- the 26 tabs ---------- */
.section{padding:28px 18px 0}
.section h2{font:var(--display-weight) 24px/1.15 var(--display);letter-spacing:var(--display-track);margin:0 0 4px;color:var(--on-ground)}
.section p.sub{margin:0 0 14px;color:var(--on-ground-muted);font-size:15.5px}
.tabs{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.tab{aspect-ratio:1/1.12;border:0;border-radius:6px;cursor:pointer;background:var(--paper);color:var(--ink);font:var(--display-weight) 19px/1 var(--display);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;position:relative;box-shadow:0 3px 0 var(--paper-edge)}
.tab small{font:500 11.5px/1 var(--body);color:var(--ink-muted)}
.tab.done::after{content:"";position:absolute;right:5px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--done)}
.tab.today{background:var(--accent);color:var(--accent-ink);box-shadow:0 3px 0 color-mix(in srgb,var(--accent) 65%,#000)}
.tab.today small{color:var(--accent-ink)}
.tab.current{outline:3px solid var(--on-ground);outline-offset:2px}
.tab.sealed{background:rgba(255,255,255,.08);color:var(--on-ground-muted);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18);cursor:default}
.tab.sealed small{color:var(--on-ground-muted)}
.tab.blank{visibility:hidden}
/* Christmas Day closes the last row: not a door, a promise. */
.tab.xmas{aspect-ratio:auto;flex-direction:row;gap:8px;cursor:default;background:transparent;color:var(--accent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 55%,transparent);font:600 14px/1.15 var(--body);text-align:left;padding:0 10px}
.tab.xmas svg{flex:none}
.tab.xmas .xmas-t{display:flex;flex-direction:column;gap:3px}
.tab.xmas b{font:var(--display-weight) 19px/1 var(--display);color:var(--on-ground)}
.tab.xmas small{font:500 11.5px/1 var(--body);color:var(--on-ground-muted)}

/* ---------- setup card (home screen, reminders) ---------- */
.setup{margin:22px 14px 0;padding:18px 18px 16px;display:grid;grid-template-columns:64px 1fr;gap:4px 14px;align-items:start}
.setup .art{grid-row:span 3;width:64px;padding-top:6px}
.setup .art svg{width:64px;height:auto}
.setup h3{margin:2px 0 2px;font:var(--display-weight) 21px/1.15 var(--display);color:var(--ink)}
.setup p{margin:0 0 12px;color:var(--ink-muted);font-size:15.5px}
.setup .acts{display:flex;flex-wrap:wrap;gap:10px}
.setup .btn{font-size:16px;padding:calc(12px + .1em) 18px calc(12px - .1em)}

footer{padding:34px 18px 40px;color:var(--on-ground-muted);font-size:14.5px}
footer p{margin:0 0 8px;max-width:60ch}
footer a{color:var(--on-ground)}

/* ---------- install sheet ---------- */
.sheet{position:fixed;inset:0;z-index:50;background:var(--paper);color:var(--ink);overflow:auto;padding:max(22px,env(safe-area-inset-top,0px)) 22px 140px;animation:up .3s cubic-bezier(.16,1,.3,1) both}
@keyframes up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.sheet .inner{max-width:520px;margin:0 auto;position:relative}
.sheet h2{font:var(--display-weight) 30px/1.05 var(--display);margin:6px 90px 8px 0}
.sheet .close{position:absolute;top:0;right:0}
.step{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:16px 0;border-top:1px solid var(--paper-edge)}
.step .n{font:var(--display-weight) 32px/1 var(--display);color:var(--verse)}
.step b{display:block;font-size:18.5px;margin-bottom:2px}
.step span{color:var(--ink-muted);font-size:15.5px}
.hint{position:fixed;left:0;right:0;bottom:max(10px,env(safe-area-inset-bottom,0px));text-align:center;color:var(--verse);font-weight:700;animation:bob 1.2s ease-in-out infinite;pointer-events:none}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ---------- Christmas Eve ---------- */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.confetti i{position:absolute;top:-30px;width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l3 7.2 7.7.6-5.9 5 1.8 7.6L12 17.8l-6.6 4.1 1.8-7.6-5.9-5 7.7-.6z' fill='%23f1c75c'/%3E%3C/svg%3E") center/contain no-repeat;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}

/* ---------- states ---------- */
.quiet{text-align:center;padding:26px 20px 24px}
.quiet h1{font-size:30px}
.quiet .mascot{width:120px;margin:0 auto 6px}

/* ---------- desktop: the calendar on the left (crib above, 26 doors below), today's door on the right ---------- */
@media (min-width:960px){
  .shell{max-width:1240px;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(420px,1fr);gap:0 48px;padding:32px 40px 0;align-items:start}
  .stage{grid-column:1;grid-row:1 / span 2}
  .stage .scene-wrap{height:auto;aspect-ratio:1000/600;border-radius:16px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
  .scene-top{padding:18px 22px 0}
  .scene-caption{padding:14px 4px 0}
  .stage .section{padding:26px 0 0}
  .stage .section h2{font-size:22px}
  .stage .tabs{gap:8px}
  .stage .tab{aspect-ratio:auto;height:62px;font-size:18px}
  main{grid-column:2;grid-row:1}
  .door{margin:0;padding:30px 32px 28px}
  .num-seal{top:24px;right:24px;width:56px;height:56px;font-size:27px}
  .flap{margin:-30px -32px -28px;min-height:420px}
  .door .when,.door h1{padding-right:72px}
  .setup{margin:20px 0 0;padding:22px 24px;grid-template-columns:56px 1fr;gap:2px 18px}
  .setup .art{width:56px}.setup .art svg{width:56px}
  footer{grid-column:2;grid-row:2;padding:28px 0 48px}
  footer p{max-width:none}
}
/* Tall enough screens keep the calendar in view while the right column scrolls. */
@media (min-width:960px) and (min-height:820px){.stage{position:sticky;top:32px}}

@media (prefers-reduced-motion:reduce){
  .flap.opening{animation:none;display:none}
  .door .content{animation:none}
  .btn{transition:none}
  .hint,.sheet{animation:none}
  .confetti{display:none}
}

/* Reading sheet: a door's passage slides up over the door (public/reader.js). */
.read-chip{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--body);color:var(--verse);padding:calc(10px + .11em) 14px calc(10px - .11em);border-radius:var(--r-pill);background:color-mix(in srgb,var(--verse) 11%,transparent);margin:0 0 16px}
.read-chip:hover{background:color-mix(in srgb,var(--verse) 17%,transparent)}
.read-chip:focus-visible{outline:2px solid var(--verse);outline-offset:2px}
.verse + .read-chip{margin-top:-4px}
.reader{position:fixed;inset:auto 0 0 0;margin:0 auto;width:100%;max-width:560px;max-height:min(84svh,760px);padding:10px 20px calc(20px + env(safe-area-inset-bottom,0px));border:0;border-radius:22px 22px 0 0;background:var(--paper);color:var(--ink);box-shadow:0 -10px 30px rgba(0,0,0,.25);flex-direction:column;animation:reader-up .32s cubic-bezier(.16,1,.3,1)}
.reader[open]{display:flex}
.reader.closing{animation:reader-down .22s ease-in forwards}
.reader::backdrop{background:rgba(10,10,20,.45);animation:reader-fade .32s ease-out}
.reader.closing::backdrop{animation:reader-fade .22s ease-in reverse forwards}
html.reading{overflow:hidden}
.reader-grab{width:42px;height:5px;border-radius:3px;background:var(--paper-edge);margin:0 auto 12px;flex:none}
.reader-ref{font:var(--display-weight) 26px/1.1 var(--display);letter-spacing:var(--display-track);margin:0;outline:none}
.reader-note{margin:4px 0 0;font-size:14px;color:var(--ink-muted)}
.reader-text{margin-top:12px;overflow:auto;flex:1;min-height:0;font:400 18px/1.65 var(--body);color:var(--ink);overscroll-behavior:contain}
[data-edition="scripture"] .reader-text{font:500 18.5px/1.6 var(--display)}
.reader-text mark.on-door{background:color-mix(in srgb,var(--verse) 11%,transparent);color:inherit;border-radius:3px;padding:0 2px;margin:0 -2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.reader-text sup{font:600 11px/1 var(--body);color:var(--verse);margin-right:3px}
.reader-src{margin:10px 0 0;font-size:12.5px;color:var(--ink-muted);flex:none}
.reader-close{margin-top:14px;flex:none}
@media (min-width:700px){.reader{inset:0;margin:auto;border-radius:22px;max-height:min(80vh,720px);animation-name:reader-pop}.reader.closing{animation-name:reader-pop-out}.reader-grab{display:none}}
@keyframes reader-up{from{transform:translateY(100%)}}
@keyframes reader-down{to{transform:translateY(100%)}}
@keyframes reader-pop{from{opacity:0;transform:translateY(16px) scale(.98)}}
@keyframes reader-pop-out{to{opacity:0;transform:translateY(16px) scale(.98)}}
@keyframes reader-fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.reader,.reader::backdrop,.reader.closing,.reader.closing::backdrop{animation:none}}