/* Atli's advent calendar (/advent). Paper world, December colours, one door a day. */
:root {
  --pine: #2f6b4f; --pine-deep: #214d39;
  --cran: #c8443a; --cran-deep: #9b2f27;
  --gold: #f2b53c; --gold-deep: #c98f17;
  --sky: #d7ebfb; --frost: #eef6fd;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --pop: cubic-bezier(.34, 1.56, .64, 1);
  --jelly: var(--pop);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --jelly: linear(0, .26 9%, .74 21%, 1.09 33%, 1.12 39%, .98 53%, 1.02 68%, 1); }
}

body.adv { overflow-x: hidden; }
/* the scrollbar's room stays reserved, so locking the page under a card never shifts it sideways */
html { scrollbar-gutter: stable; }
.adv main { position: relative; z-index: 2; }

/* ── snow ── */
#snow { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }

/* ── header ── */
.adv header { z-index: 5; }
.adv .top-links { display: flex; align-items: center; gap: 14px; }
.adv .top-links a.back { display: inline-flex; align-items: center; gap: 7px; color: var(--navy); text-decoration: none; font-weight: 700; font-size: 16px; white-space: nowrap; }
.adv .top-links a.back .arr { transition: transform .22s var(--ease); }
/* hover effects only where there is a real pointer: a phone keeps :hover after a tap, which left things lifted */
@media (hover: hover) { .adv .top-links a.back:hover .arr { transform: translateX(-3px); } }
.sound-btn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 99px; border: 2px solid var(--ink);
  background: var(--paper-card); color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  box-shadow: 2px 2px 0 var(--ink); transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s; }
@media (hover: hover) { .sound-btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); } }
.sound-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.sound-btn .ic-off { display: none; }
.sound-btn[aria-pressed="false"] { color: var(--ink-soft); background: var(--paper); }
.sound-btn[aria-pressed="false"] .ic-on { display: none; }
.sound-btn[aria-pressed="false"] .ic-off { display: block; }
.sound-btn .eq { display: none; align-items: flex-end; gap: 2px; height: 12px; margin-left: -1px; }
.sound-btn.playing[aria-pressed="true"] .eq { display: inline-flex; }
.sound-btn .eq i { display: block; width: 2.2px; height: 11px; border-radius: 2px; background: var(--cran); transform-origin: 50% 100%; transform: scaleY(.27); animation: eqBar 1.1s ease-in-out infinite; }
/* the bars grow by transform, not height, so the page never lays itself out again for them; a negative delay starts
   each bar mid-step instead of holding it still first */
.sound-btn .eq i:nth-child(2) { animation-delay: -.88s; background: var(--pine); }
.sound-btn .eq i:nth-child(3) { animation-delay: -.65s; background: var(--gold-deep); }
@keyframes eqBar { 0%, 100% { transform: scaleY(.27); } 50% { transform: scaleY(1); } }

/* ── hero ── */
.hero { position: relative; display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: 12px 30px; padding: 26px 0 8px; }
.hero .stamp-label { display: inline-flex; align-items: center; gap: 8px; color: var(--cran); font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
.hero .stamp-label svg { width: 16px; height: 16px; animation: spinSlow 9s linear infinite; }
@keyframes spinSlow { to { transform: rotate(360deg); } }
.hero h1 { font-size: clamp(44px, 7.4vw, 84px); line-height: .98; margin: 12px 0 18px; color: var(--ink); }
.hero h1 .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero h1 .line > span { display: inline-block; transform: translateY(105%); animation: riseIn .9s var(--ease) forwards; }
.hero h1 .line:nth-child(2) > span { animation-delay: .12s; }
.hero h1 .candy { position: relative; white-space: nowrap; }
.hero h1 .candy::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.02em; height: .14em; border-radius: 3px;
  background: repeating-linear-gradient(-45deg, var(--cran) 0 8px, #fff 8px 14px); transform: scaleX(0); transform-origin: left;
  animation: drawX 1s var(--ease) .9s forwards; box-shadow: 0 0 0 1.5px var(--ink); }
@keyframes riseIn { to { transform: translateY(0); } }
@keyframes drawX { to { transform: scaleX(1); } }
.hero .sub { font-size: clamp(18px, 2.1vw, 22px); line-height: 1.45; color: var(--ink-body); max-width: 34ch; margin: 0 0 22px; opacity: 0; animation: fadeUp .7s var(--ease) .35s forwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.hero-atli { position: relative; justify-self: center; width: min(300px, 80%); aspect-ratio: 1; }
/* Atli takes taps (shared.css turns them off on pictures), lands on the bob's first pose so the bob takes over
   without a snap, and a tap's wiggle runs on rotate and scale (advent.js), on top of the bob */
.hero-atli img { position: absolute; inset: 0; width: 100%; height: auto; margin: auto; filter: drop-shadow(4px 6px 0 rgba(51,47,39,.12));
  animation: atliHeroIn 1.1s var(--jelly) .3s both, bob 4.2s ease-in-out 1.4s infinite; cursor: pointer; pointer-events: auto; }
@keyframes atliIn { from { opacity: 0; transform: translateY(40px) scale(.6) rotate(-10deg); } to { opacity: 1; transform: none; } }
@keyframes atliHeroIn { from { opacity: 0; transform: translateY(40px) scale(.6) rotate(-10deg); } to { opacity: 1; transform: translateY(0) rotate(-2deg); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
.hero-atli .halo { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(242,181,60,.35), rgba(242,181,60,0) 65%); animation: halo 3.2s ease-in-out infinite; }
@keyframes halo { 50% { transform: scale(1.12); opacity: .6; } }

/* status block: countdown before, today during, a wrap after */
/* it fades in once it has its numbers (advent.js adds .in), never as an empty box first */
.status { opacity: 0; }
.status.in { animation: fadeUp .7s var(--ease) var(--sd, .5s) forwards; }
.status .kicker { font-size: 15px; font-weight: 700; color: var(--ink-soft); margin: 0 0 10px; letter-spacing: .02em; }
.status .when { font-size: 14px; color: var(--ink-soft); margin: 10px 0 0; }
.status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }

/* split-flap countdown */
.flips { display: flex; gap: 10px; align-items: flex-start; }
.flipunit { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.flipunit small { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.flipwrap, .flip { display: block; }
.flip { position: relative; width: 64px; height: 72px; perspective: 300px; font-size: 40px; font-weight: 700; color: #fff; line-height: 72px; text-align: center; }
.flip.sm { width: 46px; height: 52px; font-size: 28px; line-height: 52px; }
.flip > span { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background: var(--pine); border: 2px solid var(--ink); }
.flip .t, .flip .ft { top: 0; border-radius: 10px 10px 0 0; border-bottom-width: 1px; }
.flip .b, .flip .fb { bottom: 0; border-radius: 0 0 10px 10px; border-top-width: 1px; line-height: 0; background: var(--pine-deep); }
.flip.sm .t, .flip.sm .ft { border-radius: 8px 8px 0 0; }
.flip.sm .b, .flip.sm .fb { border-radius: 0 0 8px 8px; }
.flip .ft { transform-origin: 50% 100%; z-index: 2; backface-visibility: hidden; }
.flip .fb { transform-origin: 50% 0; z-index: 2; transform: rotateX(90deg); backface-visibility: hidden; }
.flip.go .ft { animation: flipTop .28s ease-in forwards; }
.flip.go .fb { animation: flipBot .32s cubic-bezier(.2, 1.4, .4, 1) .28s forwards; }
@keyframes flipTop { to { transform: rotateX(-90deg); } }
@keyframes flipBot { to { transform: rotateX(0); } }
.flipwrap { filter: drop-shadow(3px 3px 0 var(--ink)); }
.flipsep { font-size: 30px; font-weight: 700; color: var(--ink); line-height: 72px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; } }

.btn-today { background: var(--cran); color: #fff; border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.btn-today .chev { transition: transform .22s var(--ease); }
@media (hover: hover) { .btn-today:hover { background: var(--cran-deep); } .btn-today:hover .chev { transform: translateX(3px); } }

/* ── the board ── */
.board-wrap { position: relative; margin: 64px 0 20px; }
.board { position: relative; background: var(--paper-card); border: 2.5px solid var(--ink); border-radius: 26px; box-shadow: 7px 7px 0 var(--ink);
  padding: 58px 22px 24px; }
.board::before { content: ""; position: absolute; inset: 10px; border-radius: 18px; border: 1.5px dashed var(--line-strong); pointer-events: none; }
.board::after { content: ""; position: absolute; inset: 0; border-radius: 24px; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(39,70,144,.09) 1.2px, transparent 1.3px); background-size: 18px 18px; }
.plate { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); z-index: 6; white-space: nowrap; }
.plate span { position: relative; display: inline-block; padding: 10px 26px; background: var(--cran); color: #fff; font-weight: 700; font-size: 19px;
  border: 2.5px solid var(--ink); border-radius: 10px; box-shadow: 3px 3px 0 var(--ink); }
.plate::before, .plate::after { content: ""; position: absolute; top: 14px; width: 30px; height: 30px; background: var(--cran-deep); border: 2.5px solid var(--ink); z-index: -1; }
.plate::before { left: -20px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 34% 50%); }
.plate::after { right: -20px; clip-path: polygon(0 0, 100% 0, 66% 50%, 100% 100%, 0 100%); }

.lights { position: absolute; left: -14px; right: -14px; top: -10px; height: 70px; pointer-events: none; z-index: 5; overflow: visible; }
.lights svg { width: 100%; height: 100%; overflow: visible; }
.lights .wire { fill: none; stroke: #2c4a3a; stroke-width: 2.4; stroke-linecap: round; }
.lights .bulb { animation: twinkle 2.6s ease-in-out infinite; }
.lights .bulb .glass { stroke: var(--ink); stroke-width: 1.5; }
.lights .bulb .cap { fill: #3b3b3b; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
/* the chase: a wave of bulbs swelling with their glint. It runs on the inner group because a CSS transform on the
   outer one would replace its place on the wire, and it leaves the twinkle alone, so nothing restarts after it */
.lights .bulb-in { transform-box: fill-box; transform-origin: 50% 0; }
.lights .glint { transform-box: fill-box; transform-origin: center; }
.lights.chase .bulb-in { animation: chase .5s ease-in-out calc(var(--k) * 40ms) 3; }
.lights.chase .glint { animation: glint .5s ease-in-out calc(var(--k) * 40ms) 3; }
@keyframes chase { 50% { transform: scale(1.3); } }
@keyframes glint { 50% { transform: scale(2.3); opacity: 1; } }

/* a tap tugs it (translate and rotate, advent.js) on top of the swing, which keeps going */
.stocking { position: absolute; right: -10px; top: -18px; width: 68px; z-index: 7; transform-origin: 50% 0; animation: swing 3.6s ease-in-out infinite; cursor: pointer; pointer-events: auto; filter: drop-shadow(2px 3px 0 rgba(51,47,39,.16)); }
@keyframes swing { 0%, 100% { transform: rotate(5deg); } 50% { transform: rotate(-5deg); } }

/* Atli in a blanket with a hot drink, peeking round the board: drawn mirrored so the mug faces out, and its steam
   drifts off in two wisps half a beat apart, carried away from the face as if by the cold air */
.peek { position: absolute; left: -64px; bottom: 40px; width: 120px; z-index: 0; transform: translateX(60px) rotate(8deg); transition: transform .9s var(--jelly); pointer-events: none; }
.peek img { display: block; width: 100%; height: auto; transform: scaleX(-1); }
.peek.in { transform: translateX(0) rotate(-6deg); }
.peek .breath { position: absolute; left: 30%; top: 47%; width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.95); box-shadow: 0 0 0 1.5px rgba(51,47,39,.14);
  opacity: 0; animation: steam 2.8s ease-out 1.2s infinite; }
.peek .breath.b2 { left: 33%; top: 46%; animation-delay: 2.6s; }
@keyframes steam { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 25% { opacity: .75; } 100% { opacity: 0; transform: translate(-26px, -14px) scale(1.15); } }

/* grid: desktop six columns, phone three, doors scattered like a real calendar */
.grid { position: relative; z-index: 2; display: grid; gap: 14px; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 128px;
  grid-template-areas:
    "d7 d1 d12 d12 d19 d3"
    "d15 d1 d24 d24 d6 d10"
    "d22 d9 d24 d24 d6 d18"
    "d2 d16 d21 d21 d25 d25"
    "d11 d16 d4 d20 d25 d25"
    "d8 d23 d5 d17 d14 d13"; }
@media (max-width: 720px) {
  .grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 112px; gap: 11px;
    grid-template-areas:
      "d7 d12 d12" "d1 d19 d3" "d1 d15 d10" "d24 d24 d6" "d24 d24 d6" "d22 d9 d18"
      "d2 d21 d21" "d16 d11 d4" "d16 d20 d13" "d25 d25 d8" "d25 d25 d23" "d5 d17 d14"; }
}

/* while a door opens, the rest of the board dims around it */
.grid > .spot { position: absolute; inset: -12px; z-index: 3; border-radius: 20px; pointer-events: none; opacity: 0;
  background: radial-gradient(circle var(--sr, 160px) at var(--sx, 50%) var(--sy, 50%), rgba(28, 24, 18, 0) 40%, rgba(28, 24, 18, .46) 100%);
  transition: opacity .5s var(--ease); }
.grid > .spot.on { opacity: 1; transition-duration: .4s; }

/* ── a door ── */
.door { position: relative; display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit;
  cursor: pointer; -webkit-appearance: none; appearance: none; perspective: 1400px; perspective-origin: 0% 50%; border-radius: 14px; z-index: 1;
  opacity: 0; transform: scale(.6) rotate(var(--r0, 0deg)); }
.ready .door { animation: doorIn .8s var(--jelly) calc(var(--d, 0) * 1ms) forwards; }
@keyframes doorIn { to { opacity: 1; transform: none; } }
/* focus rings only for keyboard users: advent.js sets html.adv-kbd on Tab and clears it on a click or tap */
html:not(.adv-kbd) body.adv :focus-visible { outline: none; }
html.adv-kbd .door:focus-visible .front { outline: 3px solid var(--navy); outline-offset: 3px; }
.door.raise { z-index: 4; }
.tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1); transition: transform .5s var(--ease); }
@media (hover: hover) { .door:hover .tilt { transition-duration: .25s; } }
/* opening: the door lifts toward you and holds still while it swings, then settles once the card covers it */
.door.opening .tilt { transform: rotateX(0deg) rotateY(0deg) scale(1.06); transition: transform .6s var(--ease); }
/* warm light spilling out around the door as it opens: behind the door, above the dimmed board */
.door .spill { position: absolute; inset: -48% -60% -48% -36%; z-index: -1; pointer-events: none; opacity: 0; transform: scale(.7);
  background: radial-gradient(closest-side, rgba(255, 216, 128, .9), rgba(255, 196, 92, .38) 48%, rgba(255, 196, 92, 0));
  transition: opacity .6s var(--ease), transform .9s var(--ease); }
.door.opening .spill { opacity: 1; transform: scale(1); transition-duration: .5s, .9s; transition-delay: .1s; }

.inside { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; border: 2.5px solid var(--ink); background: #213042;
  box-shadow: 3px 3px 0 var(--ink); transition: box-shadow .35s var(--ease); }
.inside::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 3px rgba(0,0,0,.18), inset 8px 10px 22px rgba(0,0,0,.38); border-radius: 11px; }
.inside .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transform: scale(1.22); transition: transform 1.8s var(--ease), filter .6s; }
.inside .mosaic { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(0, 1fr); gap: 2px; background: var(--ink); transform: scale(1.22); transition: transform 1.8s var(--ease); }
.inside .mosaic.two { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr); }
.inside .mosaic img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; object-position: var(--pos, 50% 50%); display: block; }
.door.open .inside .photo, .door.open .inside .mosaic { transform: scale(1); }
.inside .art { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 42%, var(--bg1), var(--bg2)); }
.inside .art::before { content: ""; position: absolute; inset: 0; opacity: .25; background-image: radial-gradient(#fff 1.4px, transparent 1.6px); background-size: 16px 16px; }
.inside .art img { position: relative; height: 76%; width: auto; max-width: 84%; object-fit: contain; transform: translateY(24%) scale(.7); opacity: 0;
  transition: transform .9s var(--jelly) .22s, opacity .3s .22s; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.18)); }
.door.open .inside .art img { transform: translateY(-9%); opacity: 1; }
.door.gift.open .inside .art img { transform: translateY(-4%); }
.inside .rays { position: absolute; inset: -45%; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: repeating-conic-gradient(from 0deg, rgba(255, 232, 150, .42) 0deg 12deg, rgba(255, 232, 150, 0) 12deg 24deg);
  mask-image: radial-gradient(circle, #000 10%, transparent 66%); -webkit-mask-image: radial-gradient(circle, #000 10%, transparent 66%); }
.door.opening .inside .rays { animation: raysBurst 1.6s ease-out forwards; }
@keyframes raysBurst { 0% { opacity: 0; transform: rotate(0deg) scale(.6); } 30% { opacity: .95; } 100% { opacity: 0; transform: rotate(55deg) scale(1.25); } }
.inside .glow { position: absolute; inset: -20%; background: radial-gradient(circle at 20% 50%, rgba(255,226,140,.95), rgba(255,226,140,0) 55%); opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.inside .tag { position: absolute; left: 7px; right: 7px; bottom: 6px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; z-index: 2; }
.inside .tag b { display: inline-block; background: #fff; color: var(--cran); border: 2px solid var(--ink); border-radius: 7px; padding: 2px 7px; font-size: 13.5px; line-height: 1.1;
  box-shadow: 2px 2px 0 var(--ink); transform: scale(0) rotate(-7deg); transition: transform .6s var(--jelly) .42s; }
.inside .tag i { font-style: normal; font-size: 11.5px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.85); opacity: 0; transition: opacity .4s .55s; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inside::before { content: ""; position: absolute; inset: 46% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.62)); z-index: 1; pointer-events: none; }
.door.open .inside .tag b { transform: rotate(-4deg); }
.door.open .inside .tag i { opacity: 1; }
.door.closed.open .inside .photo, .door.closed.open .inside .mosaic img { filter: saturate(.85) brightness(.94); }
.door .shut { position: absolute; top: 8px; right: 7px; z-index: 3; background: rgba(51, 47, 39, .88); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .08em;
  padding: 2px 6px; border-radius: 5px; transform: rotate(5deg); display: none; }
.door.closed.open .shut { display: block; }

.leaf { position: absolute; inset: 0; transform-origin: 0 50%; transform-style: preserve-3d; transition: transform .85s var(--jelly); z-index: 2; }
.door.open .leaf { transform: rotateY(-93deg) scaleX(.16); }
/* the first paint shows every door as it already is: one opened on an earlier visit appears open, with no swing */
.grid.instant .door * { transition: none !important; }
/* the swing itself runs from advent.js on a sampled spring curve, so its speed never jumps */
.door.opening .leaf { transition: none; will-change: transform; }
.leaf .front, .leaf .back { position: absolute; inset: 0; border-radius: 14px; border: 2.5px solid var(--ink); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.leaf .front { background: var(--c); color: var(--fg); box-shadow: 3px 3px 0 var(--ink); overflow: visible; container-type: size; }
.leaf .front .num { position: absolute; left: 10%; bottom: 8%; font-weight: 700; font-size: clamp(30px, 46cqmin, 96px); line-height: .85; letter-spacing: -.03em;
  -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); }
.leaf .front .doodle { position: absolute; right: 10%; top: 14%; width: clamp(18px, 26cqmin, 44px); height: auto; opacity: .9; }
.leaf .front .knob { position: absolute; right: 7px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--gold); border: 2px solid var(--ink); box-shadow: 1px 1px 0 var(--ink); }
.leaf .front .lock { position: absolute; left: 9px; top: 9px; width: 15px; height: 15px; opacity: .55; }
.leaf .front .snowcap { position: absolute; left: -4px; right: -4px; top: -9px; height: 18px; width: calc(100% + 8px); overflow: visible; pointer-events: none; }
.leaf .front .snowcap path { fill: #fff; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.leaf .front .sheen { position: absolute; inset: 0; border-radius: 12px; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.45), rgba(255,255,255,0) 55%); mix-blend-mode: soft-light; }
@media (hover: hover) { .door:hover .leaf .front .sheen { opacity: 1; } }
/* the label wraps before it reaches the doodle (on the present, before the ribbon), so narrow phone doors stay clean */
.leaf .front .label { position: absolute; left: 10%; right: calc(10% + clamp(18px, 26cqmin, 44px) + 4px); top: 12%; font-size: clamp(11px, 9cqmin, 15px); line-height: 1.15;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.door.gift .leaf .front .label { right: 57%; }
.leaf .back { transform: rotateY(180deg); background: #f4ecdc; overflow: hidden; }
.leaf .back::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(51,47,39,.05) 0 2px, transparent 2px 9px); }
.leaf .back span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: clamp(14px, 22cqmin, 28px); color: rgba(51,47,39,.35); transform: scaleX(-1); }

/* palettes */
.door[data-c="cran"] { --c: var(--cran); --fg: #fff; }
.door[data-c="pine"] { --c: var(--pine); --fg: #fff; }
.door[data-c="navy"] { --c: var(--navy); --fg: #fff; }
.door[data-c="gold"] { --c: var(--gold); --fg: #fff; }
.door[data-c="paper"] { --c: #fffaf0; --fg: var(--cran); }
.door[data-c="sky"] { --c: var(--sky); --fg: var(--navy); }

/* today: it breathes */
.door.today { z-index: 3; }
.door.today .tilt::before { content: ""; position: absolute; inset: -7px; border-radius: 19px; border: 3px dashed var(--gold-deep); animation: ring 2.4s ease-in-out infinite; }
@keyframes ring { 0%, 100% { opacity: .9; transform: scale(1); } 50% { opacity: .35; transform: scale(1.025); } }
.door .ribbon { position: absolute; top: -12px; right: -10px; z-index: 6; background: var(--gold); color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: .08em;
  padding: 4px 9px; border: 2px solid var(--ink); border-radius: 8px; box-shadow: 2px 2px 0 var(--ink); transform: rotate(8deg); display: none; animation: ribbonBob 2.4s ease-in-out infinite; }
.door.today .ribbon, .door.lastday .ribbon { display: block; }
.door.lastday .ribbon { background: #fff; }
@keyframes ribbonBob { 50% { transform: rotate(4deg) translateY(-3px); } }
.door .spark { position: absolute; width: 14px; height: 14px; color: var(--gold-deep); z-index: 6; display: none; pointer-events: none; animation: spark 1.8s ease-in-out infinite; }
.door.today:not(.open) .spark { display: block; }
.door .spark:nth-of-type(1) { left: -9px; top: 22%; }
.door .spark:nth-of-type(2) { right: 18%; bottom: -10px; animation-delay: .6s; }
.door .spark:nth-of-type(3) { left: 30%; top: -12px; animation-delay: 1.2s; }
@keyframes spark { 0%, 100% { transform: scale(0) rotate(0); opacity: 0; } 50% { transform: scale(1) rotate(90deg); opacity: 1; } }

/* locked: no peeking */
.door.nope .tilt { animation: nope .5s cubic-bezier(.36, .07, .19, .97); }
@keyframes nope { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-6px) rotate(-1deg); } 40%, 60% { transform: translateX(6px) rotate(1deg); } }
.door .bigLock { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; z-index: 8; color: #fff; background: var(--ink); border-radius: 50%; padding: 8px;
  transform: scale(0); opacity: 0; pointer-events: none; }
/* the lock pops in with one overshoot, holds, then shrinks away; its fade never overshoots, so it can't flicker */
.door.nope .bigLock { animation: lockPop .9s both; }
@keyframes lockPop {
  0% { transform: scale(0); opacity: 0; animation-timing-function: cubic-bezier(.3, 1.5, .55, 1); }
  30%, 74% { transform: scale(1); opacity: 1; animation-timing-function: cubic-bezier(.55, 0, .8, .4); }
  100% { transform: scale(.7); opacity: 0; } }

/* door 25: wrapped like a present */
.door.gift .front { background: var(--cran); }
.door.gift .front::before, .door.gift .front::after { content: ""; position: absolute; background: var(--gold); border: 2px solid var(--ink); }
.door.gift .front::before { left: 44%; width: 12%; top: -2px; bottom: -2px; border-top: 0; border-bottom: 0; }
.door.gift .front::after { top: 44%; height: 12%; left: -2px; right: -2px; border-left: 0; border-right: 0; }
.door.gift .num { z-index: 2; color: var(--gold); }
.door.gift .bow { position: absolute; left: 50%; top: 50%; width: 46%; max-width: 130px; transform: translate(-50%, -62%); z-index: 3; transition: transform .7s var(--ease), opacity .5s; }
.door.gift.open .bow { transform: translate(-50%, -260%) rotate(-40deg) scale(.6); opacity: 0; }
.door.gift .inside .art img { height: 92%; }

/* progress garland */
.progress { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 18px; margin-top: 22px; padding-top: 16px; border-top: 1.5px dashed var(--line-strong); }
.progress p { margin: 0; font-weight: 700; color: var(--ink-body); font-size: 15px; }
.garland { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-start; }
@media (max-width: 520px) { .garland { gap: 3px; } .garland i { width: 8px !important; height: 11px !important; } }
.garland i { position: relative; display: block; width: 10px; height: 14px; border-radius: 50% 50% 46% 46%; border: 1.5px solid var(--ink); background: #e8e2d6; transition: background .4s, transform .5s var(--jelly), box-shadow .4s; }
/* a socket on every bulb, and every other one hanging a little lower, so the row reads as lights on a string */
.garland i::before { content: ""; position: absolute; left: 50%; top: -4.5px; width: 5px; height: 4px; margin-left: -2.5px; border-radius: 1.5px 1.5px 0 0; background: #3b3b3b; }
.garland i:nth-child(even) { margin-top: 3px; }
.garland i.lit { background: var(--lc); box-shadow: 0 0 8px var(--lc); transform: translateY(2px); }

/* ── sections under the board ── */
.adv section.block { margin: 72px 0 0; }
.adv h2 { font-size: clamp(28px, 4vw, 40px); margin: 0 0 10px; color: var(--ink); }
.adv .lede { font-size: 18px; color: var(--ink-body); margin: 0 0 24px; max-width: 52ch; line-height: 1.5; }
@media (max-width: 760px) { .hero { grid-template-columns: 1fr; } .hero-atli { position: absolute; right: -8px; top: 52px; width: 118px; } }
/* phones: Atli sits in the top corner, beside the short first line, clear of "Christmas." and of the label (his door
   reaches the left edge of the picture, so he sits a little smaller than the round Atli in lights did) */
@media (max-width: 600px) { .hero-atli { top: 2px; right: -8px; width: 92px; } }
/* the smallest phones (320 wide): narrower gutters, the sound button as an icon, no room for hero Atli, a smaller countdown */
@media (max-width: 374px) {
  .adv .wrap { padding: 0 18px; }
  .adv .top-links { gap: 10px; }
  .sound-btn { padding: 6px 9px; }
  .sound-btn #soundLabel { display: none; }
  .hero-atli { display: none; }
  .flips { gap: 8px; }
  .flip { width: 54px; height: 62px; font-size: 34px; line-height: 62px; }
  .flipsep { line-height: 62px; }
}

/* the five socials as icon tiles: everyone knows them on sight */
.socials { display: flex; flex-wrap: wrap; gap: 12px; }
.soc { display: inline-grid; place-items: center; width: 62px; height: 62px; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper-card); color: var(--ink);
  text-decoration: none; box-shadow: 3px 3px 0 var(--ink); transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s; }
.soc:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.soc svg { width: 27px; height: 27px; }
@media (hover: hover) {
  .soc:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
  .soc[data-s="tiktok"]:hover { background: #e9fbfa; }
  .soc[data-s="instagram"]:hover { background: #fdeef5; }
  .soc[data-s="facebook"]:hover { background: #eaf1fd; }
  .soc[data-s="youtube"]:hover { background: #fdecec; }
  .soc[data-s="x"]:hover { background: #efefef; }
}
@media (max-width: 600px) { .socials { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } .soc { width: 100%; height: 58px; } }

.faq details { border: 2px solid var(--ink); border-radius: 14px; background: var(--paper-card); margin-bottom: 12px; box-shadow: 3px 3px 0 var(--ink); overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; padding: 16px 18px; font-weight: 700; font-size: 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 20px; height: 20px; flex: none; transition: transform .28s var(--ease); }
.faq details[open]:not([data-closing]) summary svg { transform: rotate(90deg); }
.faq .ans { padding: 0 18px 16px; color: var(--ink); line-height: 1.55; font-size: 16px; }
.faq code, .sheet code { font-family: inherit; font-weight: 700; background: var(--paper-deep); border: 1.5px solid var(--line-strong); border-radius: 6px; padding: 1px 6px; color: var(--ink); }

.adv footer { position: relative; z-index: 2; margin-top: 80px; }
/* the hop: height on translate (rising slows to the top, falling speeds up into the ground, both on a parabola),
   squash and stretch on transform, from the feet */
.adv footer .foot-atli { position: absolute; right: 4%; bottom: 100%; width: 92px; transform-origin: 50% 100%; animation: hopUp 3s linear infinite, hopSquash 3s linear infinite; pointer-events: none; }
@media (max-width: 600px) { .adv footer { margin-top: 96px; } .adv footer .foot-atli { width: 74px; } }
@keyframes hopUp {
  0%, 72% { translate: 0 0; animation-timing-function: cubic-bezier(.333, .667, .667, 1); }
  83% { translate: 0 -18px; animation-timing-function: cubic-bezier(.333, 0, .667, .333); }
  94%, 100% { translate: 0 0; } }
@keyframes hopSquash {
  0%, 66% { transform: scaleY(1); animation-timing-function: ease-in-out; }
  72% { transform: scaleY(.88); animation-timing-function: ease-out; }
  76% { transform: scaleY(1.06); animation-timing-function: ease-in-out; }
  83% { transform: scaleY(1); animation-timing-function: ease-in; }
  92% { transform: scaleY(1.04); animation-timing-function: ease-out; }
  96% { transform: scaleY(.9); animation-timing-function: ease-in-out; }
  100% { transform: scaleY(1); } }

/* santa flies by now and then */
.santa { position: fixed; top: 90px; left: 0; width: 120px; z-index: 3; pointer-events: none; opacity: 0; }
/* the flight: straight across at one speed (translate), rising and dipping on a smooth wave (transform), the nose
   following the climb a quarter wave behind (rotate), so the path has no corners */
@supports (translate: 1px) {
  .santa.fly { animation: flyX 9s linear forwards, flyY 2.25s ease-in-out 4 alternate, flyTilt 2.25s ease-in-out -1.125s 5 alternate; }
}
@media (max-width: 600px) { .santa { width: 78px; top: 64px; } }
@keyframes flyX { from { opacity: 1; translate: -160px 0; } to { opacity: 1; translate: calc(100vw + 40px) 0; } }
@keyframes flyY { from { transform: translateY(34px); } to { transform: translateY(-12px); } }
@keyframes flyTilt { from { rotate: 5deg; } to { rotate: -6deg; } }

/* ── the sheet ── */
.scrim { position: fixed; inset: 0; z-index: 50; background: rgba(28, 24, 18, .5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
.scrim.on { opacity: 1; pointer-events: auto; transition-duration: .45s; }
/* the card grows out of the door it came from (--ox, --oy and --s0 are set in advent.js) and shrinks back into it */
.sheet { position: fixed; left: 50%; top: 50%; z-index: 51; width: min(520px, calc(100vw - 28px)); max-height: calc(100vh - 40px); overflow: auto; overscroll-behavior: contain;
  background: var(--paper-card); border: 2.5px solid var(--ink); border-radius: 22px; box-shadow: 7px 7px 0 var(--ink);
  transform: translate(-50%, -50%) scale(var(--s0, .94)); transform-origin: var(--ox, 50%) var(--oy, 50%); opacity: 0; pointer-events: none;
  transition: transform .3s cubic-bezier(.4, 0, .9, .6), opacity .2s ease-in .1s; scrollbar-width: none; }
/* leaving, the card speeds up into its door (or off the bottom) as it fades: an exit that starts at full speed and
   slows down jumps in its first frames */
.sheet::-webkit-scrollbar { display: none; }
.sheet.on { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; transition: transform .6s var(--ease), opacity .2s ease-out; }
.sheet .grab { display: none; position: absolute; left: 50%; top: 0; z-index: 6; width: 42px; height: 5px; margin: 9px 0 0 -21px; border-radius: 3px;
  background: rgba(255, 255, 255, .92); box-shadow: 0 1px 3px rgba(0, 0, 0, .35); pointer-events: none; }
.sheet .hero-img { position: relative; height: 210px; overflow: hidden; border-bottom: 2.5px solid var(--ink); background: #213042; }
.sheet .hero-img .photo, .sheet .hero-img .mosaic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.sheet .hero-img .mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(0, 1fr); gap: 2px; background: var(--ink); }
.sheet .hero-img .mosaic.two { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr); }
.sheet .hero-img .mosaic img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; object-position: var(--pos, 50% 50%); display: block; }
.sheet .hero-img .art { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 50%, var(--bg1), var(--bg2)); }
.sheet .hero-img .art img { height: 82%; width: auto; }
.sheet.in .hero-img > :first-child { animation: kenburns 7s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.18) translate(2%, 2%); } to { transform: scale(1.02); } }
.sheet.in .hero-img .art img { animation: atliIn .9s var(--jelly) .1s both; }
.sheet .hero-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.35)); }
.sheet .xbar { position: -webkit-sticky; position: sticky; top: 0; height: 0; z-index: 6; }
.sheet .x { position: absolute; top: 12px; right: 12px; z-index: 5; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper-card);
  display: grid; place-items: center; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); transition: transform .22s var(--ease); color: var(--ink); padding: 0; }
@media (hover: hover) { .sheet .x:hover { transform: rotate(90deg); } }
.sheet .x svg { width: 18px; height: 18px; }
.stamp { position: absolute; right: 18px; bottom: -26px; z-index: 4; width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; align-content: center; text-align: center;
  background: var(--cran); color: #fff; border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font-weight: 700; line-height: 1; transform: rotate(-12deg); }
.stamp::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 2px dashed rgba(255,255,255,.75); }
.stamp b { display: block; font-size: 30px; letter-spacing: -.02em; }
.stamp small { display: block; font-size: 12px; letter-spacing: .1em; margin-top: 3px; text-transform: uppercase; }
.stamp.long b { font-size: 22px; }
.stamp::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid var(--cran); opacity: 0; }
.sheet.in .stamp { animation: slam .55s cubic-bezier(.2, .9, .3, 1.2) .32s both; }
.sheet.in .stamp::after { animation: inkRing .7s ease-out .55s both; }
@keyframes slam { 0% { transform: scale(2.6) rotate(-30deg); opacity: 0; } 55% { transform: scale(.9) rotate(-10deg); opacity: 1; } 75% { transform: scale(1.04) rotate(-13deg); } 100% { transform: scale(1) rotate(-12deg); opacity: 1; } }
@keyframes inkRing { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.6); } }
.sheet.closed .stamp { background: #6f675a; }
.sheet .body { padding: 22px 22px 24px; }
.sheet.has-pal .body { padding-top: 34px; }
.sheet .eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cran); margin: 0 0 6px; }
.sheet h3 { font-size: 30px; margin: 0 0 6px; line-height: 1.05; padding-right: 110px; color: var(--ink); }
.sheet .deal { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0 0 4px; padding-right: 100px; }
.sheet .deal .fine { display: block; margin-top: 4px; font-size: 15.5px; font-weight: 400; line-height: 1.45; color: var(--ink-body); }
.sheet .say { font-size: 17px; color: var(--ink-body); margin: 0 0 18px; }
.sheet .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.sheet .facts li i { font-style: normal; }
.sheet .facts .at { display: inline-block; }
.sheet .facts li { display: flex; gap: 9px; align-items: flex-start; background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 14.5px; line-height: 1.35; color: var(--ink-body); }
.sheet .facts li b { display: block; color: var(--ink); font-size: 15px; }
.sheet .facts svg { width: 18px; height: 18px; flex: none; color: var(--navy); margin-top: 1px; }
.sheet .reveal > * { opacity: 0; transform: translateY(10px); }
/* .in stays on while the card closes, so the words leave with the card instead of vanishing first */
.sheet.in .reveal > * { animation: fadeUp .5s var(--ease) forwards; animation-delay: calc(.16s + var(--k, 0) * 45ms); }
.sheet .drop { display: flex; align-items: center; gap: 14px; padding: 14px; border: 2px dashed var(--ink); border-radius: 14px; margin: 0 0 16px; background: #fffaf0; }
.sheet .drop .ic { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--ink); color: #fff; }
.sheet .drop .ic svg { width: 24px; height: 24px; }
.sheet .drop p { margin: 0; font-size: 15px; color: var(--ink-body); line-height: 1.4; }
.sheet .drop p b { color: var(--ink); font-size: 16px; }
.sheet .drop a { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--navy); text-decoration: none; white-space: nowrap; }
.sheet .drop a svg { width: 16px; height: 16px; transition: transform .22s var(--ease); }
@media (hover: hover) { .sheet .drop a:hover svg { transform: translateX(3px); } }
.sheet .how { margin: 0 0 18px; font-size: 15.5px; color: var(--ink-body); line-height: 1.55; }
.sheet .how strong { color: var(--ink); }
.sheet .ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.sheet .ctas .btn { font-size: 16px; padding: 11px 16px; }
.btn-app { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: 3px 3px 0 var(--gold); }
.sheet .banner { display: none; margin: 0 0 16px; padding: 10px 12px; border-radius: 12px; background: var(--paper-deep); border: 1.5px solid var(--line-strong); font-size: 15px; color: var(--ink); font-weight: 700; }
.sheet.closed .banner, .sheet.newonly .banner { display: block; }

.sheet .pal { position: absolute; left: 14px; bottom: -18px; width: 104px; z-index: 4; transform-origin: 50% 100%; filter: drop-shadow(2px 3px 0 rgba(51,47,39,.15)); cursor: pointer; pointer-events: auto; }
/* lands on the bob's first pose and the bob starts that moment; a tap's wiggle rides on top (advent.js) */
.sheet.in .pal { animation: palIn .9s var(--jelly) .45s both, palBob 3.6s ease-in-out 1.35s infinite; }
@keyframes palIn { from { opacity: 0; transform: translateY(40px) scale(.4) rotate(-14deg); } to { opacity: 1; transform: rotate(-3deg); } }
@keyframes palBob { 0%, 100% { transform: rotate(-3deg); } 50% { transform: translateY(-5px) rotate(3deg); } }
.sheet .pal ~ .stamp { right: 18px; }
.sheet .body .eyebrow { padding-left: 0; }

/* ── phones: the card is a bottom sheet. It slides up, is pulled down to close (advent.js), keeps its close button in
   reach, and stops short of the top by the measured screen height (--avail), clear of the home bar at the bottom ── */
@media (max-width: 600px) {
  .sheet { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: calc(var(--avail, 100vh) - 28px); border-radius: 22px 22px 0 0; border-bottom: 0;
    box-shadow: 0 -4px 0 var(--ink); transform: translateY(100%); }
  .sheet.on { transform: translateY(var(--drag, 0px)); }
  .sheet .grab { display: block; }
  .sheet .x::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; }
  .sheet .hero-img { height: 196px; }
  .sheet .stamp { width: 100px; height: 100px; bottom: -22px; }
  .sheet .stamp b { font-size: 27px; }
  .sheet .stamp.long b { font-size: 20px; }
  .sheet .pal { width: 90px; left: 10px; bottom: -14px; }
  .sheet .body { padding: 20px 18px calc(22px + env(safe-area-inset-bottom, 0px)); }
  .sheet.has-pal .body { padding-top: 28px; }
  .sheet .eyebrow { padding-right: 106px; }
  .sheet h3 { font-size: 27px; padding-right: 0; }
  .sheet .deal { font-size: 17px; padding-right: 0; }
  .sheet .say { font-size: 16px; margin-bottom: 16px; }
  /* the four facts as one compact list, label and value side by side */
  .sheet .facts { display: block; padding: 2px 14px; background: var(--paper); border: 1.5px solid var(--line); border-radius: 14px; }
  .sheet .facts li { gap: 10px; padding: 10px 0; background: none; border: 0; border-radius: 0; }
  .sheet .facts li + li { border-top: 1.5px dashed var(--line); }
  .sheet .facts li > span { flex: 1; display: grid; grid-template-columns: 7.4em minmax(0, 1fr); column-gap: 10px; }
  .sheet .facts li b, .sheet .facts li i { font-size: 14.5px; }
  .sheet .drop { padding: 12px; gap: 12px; }
  .sheet .ctas .btn { flex: 1 1 140px; justify-content: center; }
  .peek { display: none; }
}

/* toast */
/* sized to its words and centred by its margins: a fixed box at left: 50% only ever got half the screen (on a phone
   the date folded into a tall square), and centred this way its bump (advent.js) scales from its own middle.
   It drops away speeding up, all the way below the screen's edge */
.toast { position: fixed; left: 0; right: 0; margin: 0 auto; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100vw - 28px);
  background: var(--paper-card); border: 2px solid var(--ink); border-radius: 16px; box-shadow: 4px 4px 0 var(--ink); padding: 10px 18px 10px 10px;
  transform: translateY(calc(100% + 40px + env(safe-area-inset-bottom, 0px))); transition: transform .26s cubic-bezier(.3, 0, .8, .15); pointer-events: none; }
.toast.on { transform: none; transition: transform .42s var(--jelly); }
/* the note's Atli, one per line (advent.js): by his alarm clock, which rattles as it rings with the bells, or shivering in
   his scarf; the same small shake for both, for as long as the note is up. Sized by height, so the two stand as tall */
.toast img { flex: none; width: auto; height: 52px; animation: ring .2s linear infinite; }
@keyframes ring { 0%, 100% { transform: none; } 25% { transform: translateX(1.2px) rotate(.8deg); } 75% { transform: translateX(-1.2px) rotate(-.8deg); } }
.toast p { margin: 0; font-size: 15.5px; color: var(--ink-body); line-height: 1.35; text-wrap: pretty; }
.toast p b { display: block; color: var(--ink); font-size: 16.5px; }
/* the smallest phones: a smaller clock and tighter edges keep the date on two lines */
@media (max-width: 374px) { .toast { gap: 10px; padding-inline-end: 14px; } .toast img { height: 40px; } }

/* burst canvas */
#burst { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 55; }

/* preview bar, only with ?preview */
.pv { position: fixed; left: 14px; bottom: 14px; z-index: 70; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: calc(100vw - 28px);
  background: var(--ink); color: #fff; border-radius: 14px; padding: 10px 14px; font-size: 14px; box-shadow: 3px 3px 0 var(--gold); }
.pv input[type=range] { width: 180px; accent-color: var(--gold); }
.pv button { font: inherit; font-weight: 700; background: var(--gold); color: var(--ink); border: 0; border-radius: 8px; padding: 4px 10px; cursor: pointer; }
.pv output { min-width: 104px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .adv *, .adv *::before, .adv *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .door { opacity: 1; transform: none; }
  .hero h1 .line > span { transform: none; }
  /* shared.css switches every animation off here, so whatever waits for one to appear gets its end state */
  .hero .sub, .status, .sheet .reveal > * { opacity: 1; transform: none; }
  .hero h1 .candy::after { transform: none; }
}