/* Advent calendar 2026 (/advent/). Moved from the approved design sample (Resources/advent-calendar-2026-sample,
   artifact v29, 29 Oct 2026). Every rule is scoped under .advent so the calendar and the site's own styles stay apart. */

/* The site's own .btn, .eyebrow, .lede and heading styles must not reach the calendar */
.advent .btn { text-transform:none; letter-spacing:normal; border:0; transition:none; }
.advent .eyebrow { text-transform:none; }
.advent .lede { font-family:inherit; font-style:normal; }
.advent h1, .advent h2, .advent h3 { letter-spacing:normal; color:inherit; }
.advent a:hover { color:inherit; }

  /* Layout: a night-green sky with a lit wreath, then a gold-framed wall of 24 hinged doors and a Christmas star door.
     One deliberate world (winter night, gold leaf, cream paper), so a single dark palette. */
  .advent {
    --night:#0c2219; --pine:#143628; --pine-2:#1c4634; --gold:#c9a24b; --gold-hi:#ecd08a; --gold-lo:#8d6b26;
    --cream:#f7f0de; --paper:#efe4c8; --paper-edge:#d9c79c; --ink:#2a1d12; --ink-soft:#5a4631;
    --berry:#8f1d2c; --berry-hi:#b8323f; --plum:#6d5ea6; --plum-hi:#a99be0; --rose:#b23a4e;
    --display:"IM Fell English", "Iowan Old Style", Georgia, serif;
    --caps:"IM Fell English SC", "IM Fell English", Georgia, serif;
    --body:"Alegreya Sans", "Gill Sans", "Segoe UI", system-ui, sans-serif;
    color-scheme:dark;
  }
  .advent * { box-sizing:border-box; }
  .advent { background:var(--night); color:var(--cream); font:18px/1.55 var(--body); margin:0; }

  .advent .sky { position:relative; overflow:hidden; background:
      radial-gradient(120% 80% at 50% 0%, #1d4a37 0%, var(--pine) 38%, var(--night) 78%); }
  .advent #stars { position:absolute; inset:0; width:100%; height:100%; display:block; }
  .advent .sky-inner { position:relative; max-width:1120px; margin:0 auto; padding-block:28px 8px;
    padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px));
    display:grid; justify-items:center; text-align:center; gap:6px; }
  .advent .sample { font:500 14px/1.35 var(--body); color:var(--night); background:var(--gold-hi); border-radius:999px;
    padding:6px 14px; margin:0 0 6px; max-width:100%; }
  .advent .eyebrow { font:17px/1 var(--caps); letter-spacing:.22em; color:var(--gold-hi); margin:8px 0 0; }
  .advent h1 { font:400 clamp(44px, 9vw, 92px)/.95 var(--display); margin:4px 0 0; color:var(--cream);
    text-shadow:0 2px 0 rgba(0,0,0,.35), 0 0 40px rgba(236,208,138,.18); text-wrap:balance; }
  .advent h1 em { color:var(--gold-hi); font-style:italic; }
  .advent .lede { max-width:46ch; margin:6px 0 0; color:#d9e2d6; font-size:19px; text-wrap:balance; }
  .advent .wreath { width:min(440px, 92%); height:auto; margin-top:6px; overflow:visible; }
  .advent .week { font:italic 18px/1.3 var(--display); color:var(--gold-hi); margin:0 0 18px; min-height:1.3em; }

  .advent .flame { transform-box:fill-box; transform-origin:50% 100%; }
  .advent .flame.lit { animation:flicker 2.6s ease-in-out infinite; }
  .advent .flame:not(.lit), .advent .glow:not(.lit) { opacity:0; }
  .advent .glow { transition:opacity .6s; }
  @keyframes flicker { 0%,100% { transform:scale(1,1) rotate(0deg); } 30% { transform:scale(.94,1.06) rotate(-2deg); }
    60% { transform:scale(1.04,.96) rotate(1.5deg); } }

  .advent .bar { max-width:1120px; margin:0 auto; padding-block:0 18px;
    padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px));
    display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; justify-content:center; font-size:16px; color:#cfd9cc; }
  .advent .bar label { display:flex; gap:10px; align-items:center; }
  .advent .bar select { font:600 16px var(--body); color:var(--night); background:var(--cream); border:2px solid var(--gold);
    border-radius:8px; padding:6px 10px; }
  .advent .bar select:focus-visible { outline:3px solid var(--gold-hi); outline-offset:2px; }
  .advent .bar button { font:600 15px var(--body); background:transparent; color:var(--gold-hi); border:1px solid var(--gold);
    border-radius:999px; padding:6px 14px; cursor:pointer; }
  .advent .bar button:focus-visible { outline:3px solid var(--gold-hi); outline-offset:2px; }

  .advent .adv-main { max-width:1120px; margin:0 auto; padding-block:0 56px;
    padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px)); }
  .advent .frame { position:relative; border-radius:14px; padding:clamp(12px, 2.4vw, 26px);
    background:linear-gradient(145deg, #a37e33, var(--gold-hi) 22%, #9c772e 46%, var(--gold) 70%, #7d5d21);
    box-shadow:0 24px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.25); }
  .advent .wall { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); grid-auto-flow:dense; gap:clamp(8px, 1.3vw, 14px);
    padding:clamp(10px, 1.8vw, 18px); border-radius:8px;
    background:radial-gradient(140% 90% at 50% 10%, var(--pine-2), var(--pine) 55%, #0f2b20);
    box-shadow:inset 0 2px 14px rgba(0,0,0,.6); }

  .advent .door { position:relative; aspect-ratio:3/4; perspective:1700px; border:0; padding:0; background:none; cursor:pointer;
    font:inherit; color:inherit; text-align:inherit; border-radius:5px; }
  .advent .door:focus-visible { outline:3px solid var(--gold-hi); outline-offset:3px; }
  .advent .door.star { grid-column:4 / span 2; grid-row:2 / span 2; aspect-ratio:auto; }
  .advent .inside { position:absolute; inset:0; border-radius:5px; overflow:hidden; display:grid; place-items:center; text-align:center;
    padding:8px; background:radial-gradient(circle at 50% 35%, var(--berry-hi), var(--berry) 60%, #5d0f1b);
    box-shadow:inset 0 3px 10px rgba(0,0,0,.55); }
  .advent .inside .ins-star { width:34%; max-width:46px; color:var(--gold-hi); }
  .advent .inside .ins-title { font:italic clamp(12px, 1.35vw, 16px)/1.15 var(--display); color:var(--cream); margin-top:4px; }
  .advent .inside .ins-tap { font:600 11px/1.2 var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--gold-hi); margin-top:4px; }
  .advent .leaf { position:absolute; inset:0; transform-origin:0 50%; transform-style:preserve-3d;
    transition:transform 1s cubic-bezier(.2,.7,.2,1); z-index:2; }
  .advent .door.open .leaf { transform:rotateY(-100deg); }
  .advent .door.open { z-index:3; }
  .advent .front, .advent .back { position:absolute; inset:0; border-radius:5px; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
  .advent .front { background:
      radial-gradient(circle at 30% 20%, rgba(255,255,255,.55), transparent 45%),
      linear-gradient(160deg, var(--cream), var(--paper) 60%, #e6d6b1);
    box-shadow:0 2px 0 var(--paper-edge), 0 6px 14px rgba(0,0,0,.35);
    display:grid; grid-template-rows:auto 1fr auto; padding:7%; color:var(--ink); }
  .advent .front::before { content:""; position:absolute; inset:5%; border:1.5px solid var(--gold); border-radius:3px;
    box-shadow:inset 0 0 0 2px var(--cream), inset 0 0 0 3px rgba(201,162,75,.55); pointer-events:none; }
  .advent .back { transform:rotateY(180deg); background:linear-gradient(200deg, #e8dbbb, #cdb889); box-shadow:inset -6px 0 12px rgba(0,0,0,.2); }
  .advent .cap { justify-self:start; display:grid; place-items:center; width:clamp(22px, 2.6vw, 32px); aspect-ratio:1; border-radius:2px;
    background:var(--berry); color:var(--gold-hi); font:clamp(14px, 1.7vw, 21px)/1 var(--display);
    box-shadow:inset 0 0 0 1.5px var(--gold), 0 1px 0 rgba(0,0,0,.2); position:relative; z-index:1; }
  .advent .cap.xyz { width:auto; padding:0 4px; font-size:clamp(11px, 1.2vw, 15px); }
  .advent .num { align-self:center; justify-self:center; font:clamp(30px, 4.4vw, 54px)/1 var(--display); color:var(--ink);
    text-shadow:0 1px 0 rgba(255,255,255,.7); position:relative; z-index:1; }
  .advent .theme { justify-self:center; text-align:center; font:clamp(9px, 0.95vw, 12px)/1.1 var(--caps); letter-spacing:.02em;
    color:var(--ink-soft); position:relative; z-index:1; max-width:100%; padding-inline:6%; overflow-wrap:break-word; }
  .advent .door.today .front { box-shadow:0 0 0 2px var(--gold-hi), 0 0 22px 4px rgba(236,208,138,.55), 0 6px 14px rgba(0,0,0,.35); }
  .advent .door.today::after { content:"Today"; position:absolute; top:-9px; left:50%; transform:translateX(-50%); z-index:4;
    font:700 11px/1 var(--body); letter-spacing:.1em; text-transform:uppercase; color:var(--night); background:var(--gold-hi);
    padding:4px 8px; border-radius:999px; box-shadow:0 2px 6px rgba(0,0,0,.4); }
  /* Door lettering scales with the door itself (cqw = % of the door's width), so it keeps its proportions on every
     screen; the floors are the old minimum sizes, so small phone doors never get smaller text than before. */
  .advent .door { container-type:inline-size; }
  .advent .num { font-size:max(30px, 40cqw); }
  .advent .cap { width:max(22px, 24cqw); font-size:max(14px, 16cqw); }
  .advent .cap.xyz { width:auto; font-size:max(11px, 11.5cqw); }
  .advent .theme { font-size:max(9px, 9cqw); }
  .advent .inside .ins-title { font-size:max(12px, 12cqw); }
  .advent .inside .ins-tap { font-size:max(9px, 8cqw); }
  /* Small doors (phones): the open door shows just the carol's title, smaller, so it fits. */
  @container (max-width: 90px) {
    .advent .inside { padding:5px; }
    .advent .inside .ins-star, .advent .inside .ins-tap { display:none; }
    .advent .inside .ins-title { font-size:10px; margin-top:0; }
  }
  .advent .door.locked .front { filter:saturate(.75) brightness(.93); }
  .advent .door.locked .front .lock { position:absolute; bottom:7%; right:9%; width:12px; height:12px; color:var(--gold-lo); }
  .advent .door.nope .leaf { animation:nope .45s; }
  @keyframes nope { 20% { transform:rotateY(-6deg); } 45% { transform:rotateY(2deg); } 70% { transform:rotateY(-3deg); } }

  .advent .door.star .front { background:radial-gradient(circle at 50% 40%, #2a5a45, var(--pine) 70%); color:var(--cream);
    grid-template-rows:1fr auto auto; justify-items:center; }
  .advent .door.star .front::before { border-color:var(--gold-hi); box-shadow:inset 0 0 0 3px var(--pine), inset 0 0 0 4px rgba(236,208,138,.5); }
  .advent .door.star .bigstar { width:min(58%, 150px); align-self:end; color:var(--gold-hi); filter:drop-shadow(0 0 14px rgba(236,208,138,.5)); }
  .advent .door.star .num { color:var(--gold-hi); text-shadow:none; font-size:max(34px, 22cqw); }
  .advent .door.star .theme { color:var(--cream); font-size:max(12px, 6.2cqw); }
  .advent .door.star .inside { background:radial-gradient(circle at 50% 40%, #fff6d8, var(--gold-hi) 35%, var(--gold) 75%); }
  .advent .door.star .inside .ins-title { color:var(--ink); font-size:max(15px, 8cqw); }
  .advent .door.star .inside .ins-tap { color:var(--berry); }

  .advent .credit { margin:22px auto 0; max-width:68ch; text-align:center; font-size:16px; color:#b9c7b8; }
  .advent .credit a { color:var(--gold-hi); }

  .advent dialog.sheet { border:0; padding:0; background:transparent; width:min(640px, calc(100vw - 24px)); max-height:calc(100dvh - 24px); }
  .advent dialog.sheet::backdrop { background:rgba(5,16,11,.78); backdrop-filter:blur(3px); }
  .advent .card { position:relative; background:linear-gradient(170deg, var(--cream), var(--paper)); color:var(--ink);
    border-radius:10px; padding:clamp(20px, 4vw, 34px); box-shadow:0 30px 80px rgba(0,0,0,.6);
    max-height:calc(100dvh - 24px); overflow:auto; }
  .advent .card::before { content:""; position:absolute; inset:10px; border:1.5px solid var(--gold); border-radius:6px; pointer-events:none; }
  .advent .card .close { position:absolute; top:14px; right:14px; z-index:2; font:600 15px var(--body); color:var(--ink);
    background:var(--cream); border:1px solid var(--gold); border-radius:999px; padding:6px 12px; cursor:pointer; }
  .advent .card .close:focus-visible { outline:3px solid var(--berry); outline-offset:2px; }
  .advent .sheet-head { display:flex; gap:16px; align-items:center; margin:0 0 12px; position:relative; }
  .advent .bigcap { flex:none; width:76px; height:76px; display:grid; place-items:center; border-radius:4px;
    background:radial-gradient(circle at 35% 30%, var(--berry-hi), var(--berry)); color:var(--gold-hi);
    font:52px/1 var(--display); box-shadow:inset 0 0 0 2px var(--gold), inset 0 0 0 5px var(--berry), inset 0 0 0 6px rgba(236,208,138,.6); }
  .advent .bigcap.xyz { font-size:28px; }
  .advent .sheet-day { font:15px/1.2 var(--caps); letter-spacing:.14em; color:var(--berry); margin:0; }
  .advent .sheet-theme { font:400 clamp(28px, 5vw, 38px)/1.05 var(--display); margin:2px 0 0; text-wrap:balance; }
  .advent .sheet-theme i { color:var(--berry); }
  .advent .reading { font-size:16px; color:var(--ink-soft); margin:0 0 16px; position:relative; }
  .advent .reading b { color:var(--ink); }
  .advent .reading.verse { display:grid; gap:6px; text-align:center; padding:18px 18px 14px; margin:0 0 18px; border-radius:6px;
    background:radial-gradient(130% 120% at 50% 0%, #fffaf0, rgba(255,250,240,.4)); box-shadow:inset 0 0 0 1px var(--paper-edge); }
  .advent .verse-text { font:italic clamp(19px, 3vw, 23px)/1.4 var(--display); color:var(--ink); text-wrap:pretty; }
  .advent .verse-text::before { content:""; display:block; width:44px; height:2px; margin:0 auto 12px; background:var(--gold); }
  .advent .verse-ref { font:14px/1.2 var(--caps); letter-spacing:.14em; color:var(--berry); }
  .advent .pop-btn { justify-self:center; margin-top:4px; font:700 15px var(--body); color:var(--cream); background:var(--pine);
    border:1.5px solid var(--gold); border-radius:999px; padding:8px 16px; cursor:pointer; }
  .advent .pop-btn:hover { background:var(--pine-2); }
  .advent .pop-btn:focus-visible, .advent .btn.page:focus-visible { outline:3px solid var(--gold-lo); outline-offset:2px; }
  .advent button.btn.page { cursor:pointer; font-family:var(--body); }
  .advent .player { position:relative; display:flex; gap:14px; align-items:center; margin:0 0 14px; padding:12px 16px 12px 12px;
    border-radius:999px 14px 14px 999px; background:linear-gradient(100deg, var(--pine), var(--pine-2)); color:var(--cream);
    box-shadow:inset 0 0 0 1.5px var(--gold), 0 4px 12px rgba(0,0,0,.18); }
  .advent .pl-btn { flex:none; width:52px; height:52px; border-radius:50%; border:0; cursor:pointer; display:grid; place-items:center;
    color:var(--cream); background:radial-gradient(circle at 35% 30%, var(--berry-hi), var(--berry));
    box-shadow:inset 0 0 0 2px var(--gold-hi), 0 2px 6px rgba(0,0,0,.35); }
  .advent .pl-btn svg { width:24px; height:24px; }
  .advent .pl-btn .i-pause, .advent .player.playing .pl-btn .i-play { display:none; }
  .advent .player.playing .pl-btn .i-pause { display:block; }
  .advent .pl-btn:focus-visible, .advent .pl-bar:focus-visible { outline:3px solid var(--gold-hi); outline-offset:2px; }
  .advent .player.playing .pl-btn { animation:breathe 2.4s ease-in-out infinite; }
  @keyframes breathe { 50% { box-shadow:inset 0 0 0 2px var(--gold-hi), 0 0 0 6px rgba(236,208,138,.25); } }
  .advent .pl-main { flex:1; min-width:0; display:grid; gap:6px; }
  .advent .pl-label { margin:0; font:italic 18px/1.2 var(--display); color:var(--gold-hi); }
  .advent .pl-bar { position:relative; height:8px; border-radius:999px; background:rgba(247,240,222,.22); cursor:pointer; touch-action:none; }
  .advent .pl-bar span { position:absolute; inset:0 auto 0 0; width:0; border-radius:999px;
    background:linear-gradient(90deg, var(--gold), var(--gold-hi)); box-shadow:0 0 8px rgba(236,208,138,.6); }
  .advent .pl-time { margin:0; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:13px; color:#cfd9cc;
    font-variant-numeric:tabular-nums; }
  .advent .player.compact { margin:0; border-radius:999px; padding:8px 14px 8px 8px; }
  .advent .player.compact .pl-btn { width:42px; height:42px; }
  .advent .pop-body .player { margin:0 0 22px; }
  .advent .no-words { font:italic 18px/1.5 var(--display); color:var(--ink-soft); text-align:center; margin:4px 0 12px; }
  .advent button.btn.play { border:0; cursor:pointer; font-family:var(--body); font-size:17px; padding:12px 22px; }
  .advent button.btn.play:hover { background:var(--berry-hi); }
  @media (prefers-reduced-motion: reduce) { .advent .player.playing .pl-btn { animation:none; } }
  .advent .invite { position:relative; display:flex; gap:14px; align-items:flex-start; margin:20px -4px 0; padding:16px 18px;
    border-radius:10px; color:var(--cream);
    background:radial-gradient(120% 140% at 0% 0%, var(--pine-2), var(--pine) 55%, var(--night));
    box-shadow:inset 0 0 0 1.5px var(--gold), 0 6px 16px rgba(0,0,0,.2); }
  .advent .inv-star { flex:none; width:34px; color:var(--gold-hi); filter:drop-shadow(0 0 8px rgba(236,208,138,.5)); margin-top:2px; }
  .advent .inv-main { min-width:0; }
  .advent .inv-head { margin:0; font:400 22px/1.15 var(--display); color:var(--gold-hi); text-wrap:balance; }
  .advent .inv-text { margin:4px 0 8px; font-size:16px; line-height:1.45; color:#e4ebe2; }
  .advent .inv-links { margin:0; display:flex; flex-wrap:wrap; gap:6px 18px; }
  .advent .inv-links a { color:var(--cream); font-weight:700; font-size:15px; text-decoration-color:var(--gold); text-underline-offset:3px; }
  .advent .inv-links a:focus-visible { outline:2px solid var(--gold-hi); outline-offset:2px; }
  .advent .svc { list-style:none; margin:6px 0 12px; padding:0; display:grid; gap:8px; }
  .advent .svc li { font-size:17px; }
  .advent .svc b { display:inline-block; min-width:84px; font:400 20px/1 var(--display); color:var(--berry); }
  .advent .svc span { display:block; margin-left:84px; font-size:15px; color:var(--ink-soft); }
  .advent .reading.verse .verse-text { font-size:clamp(18px, 2.6vw, 21px); line-height:1.45; }
  .advent .verse-text .vline { display:block; margin:0 0 8px; }
  .advent .verse-text .vline sup { font:700 11px/1 var(--body); font-style:normal; color:var(--berry); margin-right:4px; }
  .advent .verse-text .gap { display:block; color:var(--gold-lo); letter-spacing:.3em; margin:-2px 0 6px; }
  .advent .today-note { font-size:14px; color:var(--ink-soft); font-style:italic; }
  .advent .past-note { font-size:15px; color:var(--ink-soft); }
  .advent .past-note a { color:var(--berry); font-weight:700; white-space:nowrap; }
  .advent .pop-body .vs.poem { padding-left:1.2em; text-indent:-1.2em; }
  .advent .more-link { margin:12px 0 0; font-size:15px; position:relative; }
  .advent .more-link a { color:var(--ink-soft); }

  .advent dialog.sheet { position:fixed; overflow:hidden; }  /* the card and the words panel scroll themselves; the panel's hidden slide-in offset must not add a scrollbar */
  .advent .pop { position:absolute; inset:0; z-index:5; overflow:auto; border-radius:10px; color:var(--ink);
    background:linear-gradient(175deg, #fffaf0, var(--cream) 40%, var(--paper));
    box-shadow:0 30px 80px rgba(0,0,0,.6), inset 0 0 0 1.5px var(--gold), inset 0 0 0 8px #fffaf0, inset 0 0 0 9px rgba(201,162,75,.5);
    opacity:0; transform:translateY(40px) rotate(-1.2deg) scale(.96); pointer-events:none; visibility:hidden;
    transition:opacity .35s ease, transform .5s cubic-bezier(.2,.8,.2,1.05), visibility 0s linear .5s; }
  .advent .pop.show { opacity:1; transform:none; pointer-events:auto; visibility:visible; transition-delay:0s; }
  .advent .pop-head { position:sticky; top:0; z-index:1; padding:16px clamp(20px, 4vw, 34px) 14px; text-align:center;
    background:linear-gradient(180deg, var(--berry), #6f1421); color:var(--cream); border-radius:10px 10px 0 0;
    box-shadow:0 2px 0 var(--gold), 0 6px 14px rgba(0,0,0,.2); }
  .advent .pop-back { font:600 15px var(--body); color:var(--night); background:var(--gold-hi); border:0; border-radius:999px;
    padding:6px 14px; cursor:pointer; }
  .advent .pop-back:focus-visible { outline:3px solid var(--cream); outline-offset:2px; }
  .advent .pop-kicker { font:13px/1 var(--caps); letter-spacing:.18em; color:var(--gold-hi); margin:12px 0 0; }
  .advent .pop-title { font:400 clamp(24px, 4.5vw, 32px)/1.1 var(--display); margin:4px 0 0; text-wrap:balance; }
  .advent .pop-body { padding:20px clamp(22px, 5vw, 44px) 4px; max-width:62ch; margin:0 auto; }
  .advent .pop-body .vs { margin:0 0 10px; font:19px/1.55 var(--display); }
  .advent .pop-body .vs sup { font:700 11px/1 var(--body); color:var(--berry); margin-right:5px; vertical-align:super; }
  .advent .pop-body .gap { text-align:center; color:var(--gold-lo); margin:4px 0 10px; letter-spacing:.3em; }
  .advent .pop-body .stanza { position:relative; margin:0 0 18px; padding-left:30px; font:italic 19px/1.5 var(--display); }
  .advent .pop-body .stn { position:absolute; left:0; top:2px; width:20px; height:20px; display:grid; place-items:center; border-radius:2px;
    background:var(--berry); color:var(--gold-hi); font:normal 12px/1 var(--display); box-shadow:inset 0 0 0 1px var(--gold); }
  /* words lit as they are sung (timed hymns only): the line being sung turns berry; lines to come are softened.
     Line by line, not word by word (Guy, 29 Oct: line times are the reliable ones), and no underline (Guy).
     Before play and after the end, the words look as usual. */
  .advent .pop-body .ln { display:block; transition:color .4s, opacity .5s; }
  .advent .pop-body.singing .ln { opacity:.5; }
  .advent .pop-body.singing .ln.past { opacity:1; }
  .advent .pop-body.singing .ln.now { opacity:1; color:var(--berry); }
  @media (prefers-reduced-motion: reduce) { .advent .pop-body .ln { transition:none; } }
  .advent .pop-note { text-align:center; font-size:14px; color:var(--ink-soft); margin:6px 0 0; padding:0 20px 24px; }
  @media (prefers-reduced-motion: reduce) { .advent .pop { transition:none; transform:none; } }
  .advent .hymn { border-top:1px solid var(--paper-edge); padding-top:16px; position:relative; }
  .advent .hymn-label { font:13px/1 var(--caps); letter-spacing:.16em; color:var(--gold-lo); margin:0; }
  .advent .hymn h3 { font:400 clamp(24px, 4vw, 30px)/1.1 var(--display); margin:6px 0 2px; }
  .advent .hymn .by { font-size:16px; color:var(--ink-soft); margin:0 0 12px; }
  .advent .hymn blockquote { margin:0 0 14px; padding:10px 16px; border-left:3px solid var(--gold); background:rgba(201,162,75,.12);
    font:italic 20px/1.4 var(--display); color:var(--ink); border-radius:0 6px 6px 0; }
  .advent .hymn p.story { margin:0 0 18px; max-width:62ch; }
  .advent .actions { display:flex; flex-wrap:wrap; gap:10px; position:relative; }
  .advent .btn { display:inline-flex; align-items:center; gap:8px; font:700 16px var(--body); text-decoration:none; border-radius:999px;
    padding:10px 18px; }
  .advent .btn.play { background:var(--berry); color:var(--cream); }
  .advent .btn.play:hover { background:var(--berry-hi); }
  .advent .btn.page { background:transparent; color:var(--ink); border:1.5px solid var(--gold); }
  .advent .btn:focus-visible { outline:3px solid var(--gold-lo); outline-offset:2px; }
  .advent .reflect { margin:16px 0 0; font-size:15px; color:var(--ink-soft); position:relative; }
  .advent .reflect a { color:var(--berry); font-weight:700; }

  @media (max-width:900px) {
    .advent .wall { grid-template-columns:repeat(4, minmax(0,1fr)); }
    .advent .door.star { grid-column:2 / span 2; grid-row:3 / span 2; }
  }
  @media (max-width:520px) {
    .advent .door.today::after { font-size:9px; top:-7px; padding:3px 6px; }
    .advent .lede { font-size:17px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .advent .leaf { transition:none; } .advent .flame.lit { animation:none; } .advent .door.nope .leaf { animation:none; }
  }
  /* Computers (mouse or trackpad, window 1100px+): the whole calendar on one screen. Title, wreath and credits on the
     left; the wall of doors on the right, sized to the window height. Door lettering is sized from the door's own width
     (cqw), so it scales with the door whatever the window's shape. Tablets and phones keep the stacked layout. */
  @media (min-width:1100px) and (hover:hover) and (pointer:fine) {
    .advent .adv-cal { display:grid; grid-template-columns:minmax(300px,1fr) auto; grid-template-rows:1fr auto auto auto auto 1fr;
      column-gap:clamp(16px,2.5vw,40px); min-height:calc(100vh - var(--adv-top, 0px)); padding:0 clamp(16px,2.5vw,40px);
      background:radial-gradient(90% 120% at 22% 30%, #1d4a37 0%, var(--pine) 40%, var(--night) 85%); }
    .advent .sky { grid-column:1; grid-row:2; align-self:end; background:none; overflow:visible; }
    .advent .sky-inner { padding-block:0; }
    .advent h1 { font-size:clamp(36px, calc((100vh - var(--adv-top, 0px)) * .085), 80px); }
    .advent .lede { font-size:17px; }
    .advent .wreath { width:min(360px, 92%, calc((100vh - var(--adv-top, 0px)) * .36)); }
    .advent .week { margin-bottom:10px; }
    .advent .bar { grid-column:1; grid-row:3; align-self:start; padding-bottom:0; }
    .advent .adv-main { display:contents; }
    .advent .frame { grid-column:2; grid-row:1 / -1; align-self:center; margin:16px 0;
      width:min(calc((100vh - 56px - var(--adv-top, 0px)) * 1.314), calc(100vw - 440px)); }
    .advent .credit { grid-column:1; grid-row:4; font-size:13px; margin:14px auto 0; max-width:46ch; }
    .advent .credit + .credit { grid-row:5; font-size:11px !important; align-self:start; }
    .advent .door { container-type:inline-size; }
    .advent .num { font-size:40cqw; }
    .advent .cap { width:24cqw; font-size:16cqw; }
    .advent .cap.xyz { width:auto; font-size:11.5cqw; }
    .advent .theme { font-size:9cqw; }
    .advent .inside { padding:6cqw; }
    .advent .inside .ins-title { font-size:12cqw; }
    .advent .inside .ins-tap { font-size:8cqw; }
    .advent .door.star .num { font-size:22cqw; }
    .advent .door.star .theme { font-size:6.2cqw; }
    .advent .door.star .inside .ins-title { font-size:8cqw; }
    /* the door card: two columns, so the whole card fits the screen without scrolling */
    .advent dialog.sheet { width:min(1100px, calc(100vw - 48px)); }
    .advent .card { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); column-gap:clamp(24px,3vw,40px);
      grid-template-areas:"head head" "reading hymn" "reflect hymn" "invite invite"; grid-template-rows:auto auto 1fr auto; align-items:start; }
    .advent .sheet-head { grid-area:head; }
    .advent .reading { grid-area:reading; }
    .advent .hymn { grid-area:hymn; border-top:0; padding-top:0; }
    .advent .reflect { grid-area:reflect; margin-top:0; }
    .advent .invite { grid-area:invite; margin-top:12px; }
    .advent .hymn blockquote { font-size:18px; }
    /* the hymn's words: verses side by side, the player across the top */
    .advent .pop-body { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); column-gap:40px; max-width:900px; }
    .advent .pop-body .player { grid-column:1 / -1; }
  }

  /* ----- motion (Guy kept all four, 29 Oct): card unfolds, gold sparkle, snowfall, Christmas star ----- */
  @media (prefers-reduced-motion: no-preference) {
    .advent .card.reveal .sheet-head, .advent .card.reveal .reading .vline, .advent .card.reveal .reading .gap, .advent .card.reveal .verse-ref, .advent .card.reveal .hymn > *, .advent .card.reveal .reflect, .advent .card.reveal .invite {
      animation:rise .45s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i, 0) * 45ms); }
    .advent .card.reveal .reading.verse { animation:glowin .9s ease-out both; }
    @keyframes rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
    @keyframes glowin { from { box-shadow:inset 0 0 0 1px var(--paper-edge), 0 0 0 0 rgba(236,208,138,.0); }
      40% { box-shadow:inset 0 0 0 1px var(--gold), 0 0 22px 2px rgba(236,208,138,.55); }
      to { box-shadow:inset 0 0 0 1px var(--paper-edge), 0 0 0 0 rgba(236,208,138,0); } }
    .advent .door.star .bigstar { animation:starglow 4.5s ease-in-out infinite alternate; }
    .advent .door.star .bigstar svg path:nth-child(2) { transform-box:view-box; transform-origin:50px 50px; animation:rays 40s linear infinite; }
    @keyframes starglow { from { filter:drop-shadow(0 0 10px rgba(236,208,138,.35)); } to { filter:drop-shadow(0 0 26px rgba(236,208,138,.85)); } }
    @keyframes rays { from { transform:rotate(45deg); } to { transform:rotate(405deg); } }
  }
  .advent .spark { position:fixed; left:0; top:0; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%; pointer-events:none; z-index:50;
    background:radial-gradient(circle, #fffbe8 0%, #f3d98f 40%, rgba(201,162,75,0) 72%); filter:drop-shadow(0 0 4px rgba(255,226,140,.9)); }
  .advent .spark.star4 { width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:0; background:none; color:#f6e2a2; }

/* The way down to the page's text, beside "Close all doors" */
.advent .bar a.about { font:600 15px var(--body); color:var(--gold-hi); text-decoration:none; border:1px solid var(--gold);
  border-radius:999px; padding:6px 14px; }
.advent .bar a.about:focus-visible { outline:3px solid var(--gold-hi); outline-offset:2px; }

/* ----- the page's text, below the calendar: cream paper, like the door cards ----- */
.advent .adv-info { background:linear-gradient(180deg, var(--cream), var(--paper)); color:var(--ink); border-top:3px solid var(--gold);
  padding:clamp(40px, 6vw, 72px) max(16px, env(safe-area-inset-right,0px)) clamp(48px, 7vw, 80px) max(16px, env(safe-area-inset-left,0px));
  scroll-margin-top:0; }
.advent .adv-info-inner { max-width:66ch; margin:0 auto; }
.advent .adv-info h2 { font:400 clamp(30px, 4.6vw, 42px)/1.1 var(--display); color:var(--berry); margin:48px 0 14px; text-wrap:balance; }
.advent .adv-info h2:first-child { margin-top:0; }
.advent .adv-info h3 { font:16px/1.2 var(--caps); letter-spacing:.14em; color:var(--gold-lo); margin:26px 0 8px; }
.advent .adv-info p, .advent .adv-info li { font-size:18px; line-height:1.6; }
.advent .adv-info p { margin:0 0 14px; }
.advent .adv-info p.adv-strap { font:italic 22px/1.4 var(--display); color:var(--ink-soft); margin:-6px 0 18px; }
.advent .adv-info ul, .advent .adv-info ol { margin:0 0 18px; padding-left:1.4em; }
.advent .adv-info li { margin:0 0 8px; padding-left:.2em; }
.advent .adv-info li::marker { color:var(--berry); font-weight:700; }
.advent .adv-info strong { color:var(--ink); }
.advent .adv-info a { color:var(--berry); font-weight:600; text-decoration-color:var(--gold); text-underline-offset:3px; }
.advent .adv-info a:hover { color:var(--berry-hi); }
.advent .adv-info .tip { background:#fffaf0; border:1px solid var(--paper-edge); border-left:4px solid var(--gold); border-radius:0 8px 8px 0;
  padding:14px 18px 6px; margin:8px 0 18px; }
.advent .adv-info .tip p { margin:0 0 8px; }
/* services: a card each, the time in berry (the Christmas page's layout, in the calendar's colours) */
.advent .adv-svc { margin:6px 0 20px; }
.advent .adv-svc h3 { margin-top:24px; }
.advent .adv-svc .dt { margin:0 0 4px; font-size:15px; color:var(--ink-soft); }
.advent .adv-card { display:grid; grid-template-columns:6.4rem 1fr; gap:14px; align-items:baseline; background:#fffaf0;
  border:1px solid var(--paper-edge); border-radius:8px; padding:14px 16px; margin:10px 0; box-shadow:0 1px 3px rgba(80,60,30,.08); }
.advent .adv-card .tm { font:400 26px/1 var(--display); color:var(--berry); white-space:nowrap; }
.advent .adv-card .nm { font-weight:700; color:var(--ink); line-height:1.35; }
.advent .adv-card .ch { color:var(--ink-soft); line-height:1.35; }
.advent .adv-card .nt { margin-top:6px; font-size:15px; color:var(--ink-soft); line-height:1.45; }
@media (max-width:480px) {
  .advent .adv-card { grid-template-columns:5.2rem 1fr; gap:10px; padding:12px 13px; }
  .advent .adv-card .tm { font-size:21px; }
}

/* "See all 24 carols": every door as plain text (for readers and crawlers that don't run the calendar), folded */
.advent .adv-doors { margin:0 0 20px; border:1px solid var(--paper-edge); border-radius:8px; background:#fffaf0; }
.advent .adv-doors summary { cursor:pointer; padding:12px 16px; font:600 17px var(--body); color:var(--berry); }
.advent .adv-doors summary:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
.advent .adv-doors ol { list-style:none; margin:0; padding:4px 16px 14px; }
.advent .adv-doors li { margin:0; padding:7px 0; border-top:1px solid rgba(217,199,156,.6); font-size:16px; line-height:1.45; }
.advent .adv-doors .dd { display:inline-block; min-width:7.2em; font:15px/1.2 var(--caps); letter-spacing:.06em; color:var(--gold-lo); }
.advent .adv-doors .rd { display:block; padding-left:7.6em; font-size:14px; color:var(--ink-soft); }
@media (max-width:480px) { .advent .adv-doors .dd { display:block; min-width:0; } .advent .adv-doors .rd { padding-left:0; } }