/* Christmas Countdown — the website.
   Rebuilt 13 November 2026 after the owner's "re-do it completely": the
   countdown front and centre, bold type, and bands of real colour instead of
   one long dark green. Colours and radii are the app's own tokens
   (shared/design/tokens.json). */

@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces.ttf") format("truetype-variations");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("fonts/Figtree.ttf") format("truetype-variations");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --night: #0b1f17;
  --pine: #12301f;
  --pine-light: #1f5c40;
  --snow: #f2ecdf;
  --cream: #fff8ea;
  --ivory: #f6eedd;
  --muted: #b9c4b4;
  --body-on-dark: #dde3d8;
  --gold: #e2b866;
  --gold-light: #f3c96b;
  --gold-dark: #b8862b;
  --red: #b3202a;
  --red-bright: #c2343b;
  --red-deep: #a3242b;
  --shutter: #5a0e13;
  --ink: #1b1512;
  --ink-soft: #4a4337;
  --card-label: #1f4a36;
  --garland: #2f5241;
  --moon: #f3ebd8;
  --on-red-soft: #fbe3dc;

  --display: "Fraunces", Georgia, serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-phone: 34px;
  --r-panel: 24px;
  --r-card: 22px;
  --r-control: 16px;

  --pad: 20px;
  --max: 1120px;
  --touch: 44px;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--night); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--night); color: var(--ivory);
  font-family: var(--body); font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--gold); color: var(--ink); padding: 12px 18px; border-radius: 0 0 12px 0;
  font-weight: 700; text-decoration: none;
}
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

/* ---------- type ----------
   Headlines are the heavy sans, not the serif: the serif read literary where
   this wants to read loud. The serif keeps the numerals, which is what it is
   for, and what the app uses it for. */

h1, h2 {
  font-family: var(--body); font-weight: 900;
  letter-spacing: -.035em; line-height: .95;
  margin: 0; text-wrap: balance;
}
h1 { font-size: clamp(52px, 9.5vw, 116px); }
h2 { font-size: clamp(38px, 6vw, 72px); }
h3 { font-family: var(--body); font-weight: 800; font-size: clamp(18px, 2vw, 22px); line-height: 1.15; margin: 0; letter-spacing: -.015em; }
p { margin: 0 0 1em; }

.kicker {
  font-size: 13px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 18px;
}

/* ---------- the sky: garland, moon, snow ---------- */

.garland { position: absolute; top: 0; left: 0; width: 100%; height: 62px; z-index: 2; pointer-events: none; }
.tw { animation: cctw 2.4s ease-in-out infinite; }
@keyframes cctw { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }

.moon {
  position: absolute; top: 120px; right: clamp(20px, 7vw, 120px);
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--moon);
  box-shadow: 0 0 70px rgba(243, 235, 216, .42), 0 0 170px rgba(243, 235, 216, .18);
  z-index: 0; pointer-events: none;
}

#snow { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fl {
  position: absolute; top: -20px; border-radius: 50%;
  background: var(--ivory); opacity: .7;
  animation: ccfall linear infinite;
}
@keyframes ccfall {
  from { transform: translateY(-20px) translateX(0) }
  to { transform: translateY(105vh) translateX(var(--drift, 14px)) }
}
@media (prefers-reduced-motion: reduce) { #snow { display: none } }
.hill { position: absolute; left: 0; bottom: 0; width: 100%; height: 160px; z-index: 0; pointer-events: none; }

/* ---------- header ---------- */

.top {
  position: relative; z-index: 3;
  padding: 80px 0 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.mark { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.mark-icon {
  width: 56px; height: 56px; flex: none; border-radius: 15px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08);
}
.foot .mark-icon { width: 40px; height: 40px; border-radius: 11px; }
.mark-name {
  font-family: var(--body); font-weight: 900; font-size: 22px;
  color: var(--ivory); letter-spacing: -.02em; line-height: 1.02;
}
.mark-name span {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .2em;
  color: var(--gold); text-transform: uppercase;
}
/* The season, beside the name: this is the 2026 countdown until the 27th of
   December, and then it is the 2027 one. countdown.js writes it. */
.mark-year {
  align-self: center;
  font-size: 12px; font-weight: 800; letter-spacing: .12em;
  color: var(--gold); background: rgba(226, 184, 102, .14);
  border: 1px solid rgba(226, 184, 102, .34);
  padding: 3px 9px; border-radius: 999px; line-height: 1.4;
}
@media (max-width: 420px) { .mark-year { display: none } }

.top-cta {
  flex: none; text-decoration: none;
  font-weight: 800; font-size: 15.5px;
  color: var(--ink); background: linear-gradient(170deg, var(--gold-light), var(--gold));
  padding: 14px 24px; border-radius: 999px;
  box-shadow: 0 0 0 4px var(--night), 0 8px 22px rgba(0, 0, 0, .55);
  transition: transform .18s ease, box-shadow .18s ease;
}
.top-cta:hover { transform: translateY(-1px); box-shadow: 0 0 0 4px var(--night), 0 12px 30px rgba(226, 184, 102, .5); }
@media (max-width: 520px) { .top-cta { display: none } }

/* ---------- hero: the countdown, centred ---------- */

.hero { position: relative; z-index: 1; padding-bottom: clamp(44px, 6vw, 86px); overflow: hidden; }
.hero-mid { position: relative; z-index: 1; text-align: center; padding-top: clamp(26px, 4vw, 52px); }
.hero-mid h1 { margin-bottom: clamp(26px, 3.4vw, 44px); }
.hero-sub {
  max-width: 30ch; margin: clamp(22px, 3vw, 34px) auto clamp(20px, 2.6vw, 30px);
  font-size: clamp(18px, 2vw, 22px); color: var(--body-on-dark);
  text-wrap: balance;
}

.stage { position: relative; width: min(100%, 440px); margin: 0 auto; --santa-lift: 96px; padding-top: var(--santa-lift); }
/* He is sized from the room above the card, not from a fixed 136px: the stage
   sets `--santa-lift` and he is that, plus the bit of him that leans over the
   card's top edge. Tightening the stage for a short screen used to leave him
   the same size, and his beard covered the number. */
.santa {
  position: absolute; top: 0; left: 50%;
  width: auto; height: calc(var(--santa-lift, 96px) + 38px);
  transform: translateX(-50%);
  z-index: 2; animation: ccbob 3.2s ease-in-out infinite;
}
@keyframes ccbob {
  0%, 100% { transform: translateX(-50%) translateY(0) }
  50% { transform: translateX(-50%) translateY(-5px) }
}
@media (prefers-reduced-motion: reduce) { .santa { animation: none } }

.card {
  position: relative; z-index: 1;
  border-radius: var(--r-phone); padding: 9px;
  background: repeating-linear-gradient(135deg, var(--red-bright) 0 13px, #ffffff 13px 26px);
  box-shadow: 0 0 110px rgba(243, 201, 107, .32), 0 28px 70px rgba(0, 0, 0, .5);
}
.card-face {
  border-radius: 27px; background: var(--cream); color: var(--ink);
  padding: 10px 0 24px; display: flex; flex-direction: column; align-items: center;
  container-type: inline-size;
}

.picker { display: flex; align-items: center; gap: 8px; }
.picker button {
  width: var(--touch); height: var(--touch); border: 0; background: transparent;
  color: var(--ink); cursor: pointer; display: grid; place-items: center; border-radius: 50%;
}
.picker button:hover { background: rgba(27, 21, 18, .07); }
.picker-name {
  min-width: 132px; text-align: center;
  font-size: 13px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--card-label);
}

.big {
  font-family: var(--display); font-weight: 600;
  line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  color: var(--red);
  min-height: 150px; display: flex; align-items: center; justify-content: center;
  max-width: 100%; padding: 0 12px; text-align: center;
  /* Sized by how much there is to show. A digit of Fraunces is about 0.62em
     wide, so the card's own width divided by the characters there are is the
     largest size that fits; countdown.js keeps --cc-chars up to date. The old
     rule was clamp(96px, 34vw, 150px), which had no idea how many digits it
     was setting, and the seconds ran clean off the card. */
  --cc-chars: 2;
  font-size: min(168px, 36vw, calc(96cqw / var(--cc-chars) * 1.6));
}
.big.is-words {
  font-size: min(48px, calc(96cqw / var(--cc-chars) * 1.9));
  line-height: 1.1; padding: 0 20px; text-wrap: balance;
}

.unit { font-family: var(--display); font-weight: 600; font-size: 28px; color: var(--card-label); text-align: center; }
.detail { font-size: 14.5px; color: var(--ink-soft); margin: 2px 0 0; text-align: center; min-height: 21px; }

.pills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; width: 330px; max-width: calc(100% - 40px); margin-top: 14px; }
.pill {
  height: 66px; border-radius: var(--r-control); background: var(--red); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.pill b { font-family: var(--display); font-weight: 600; font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; }
.pill span { font-size: 10px; font-weight: 800; letter-spacing: .14em; color: var(--on-red-soft); }

.dots { display: flex; align-items: center; justify-content: center; margin-top: 18px; }
.dots button { width: 30px; height: var(--touch); border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; padding: 0; }
.dots i { width: 7px; height: 7px; border-radius: 4px; background: rgba(246, 238, 221, .35); transition: width .22s ease, background-color .22s ease; display: block; }
.dots button[aria-current="true"] i { width: 24px; background: var(--gold); }

.stage-foot { margin: 8px 0 0; text-align: center; font-size: 14px; color: var(--muted); }

/* ---------- buttons ---------- */

.getit { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.btn {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 16px 26px; border-radius: 999px; text-decoration: none;
  font-family: var(--body); font-size: 17px; font-weight: 800;
  border: 1px solid transparent; transition: transform .18s ease, box-shadow .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-lines { display: grid; line-height: 1.05; text-align: left; }
.btn small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }

.btn-gold {
  background: linear-gradient(170deg, var(--gold-light), var(--gold));
  color: var(--ink);
  box-shadow: 0 12px 30px rgba(226, 184, 102, .34);
}
.btn-quiet {
  background: rgba(246, 238, 221, .1); color: var(--ivory);
  border-color: rgba(246, 238, 221, .3);
}
.band-cream .btn-quiet, .band-gold .btn-quiet { background: rgba(27, 21, 18, .08); color: var(--ink); border-color: rgba(27, 21, 18, .28); }
.getit-note { margin-top: 14px; font-size: 14px; color: var(--muted); text-align: center; }
.band-cream .getit-note, .band-gold .getit-note { color: var(--ink-soft); }

/* ---------- bands ----------
   The page was one dark green from top to bottom. It is now blocks of real
   colour, each edged with candy stripes, so scrolling feels like something
   is happening. */

.band { position: relative; z-index: 1; padding: clamp(54px, 6.5vw, 96px) 0; text-align: center; }
.band h2 { margin-bottom: clamp(26px, 3vw, 40px); }
.band-sub { margin: -18px auto clamp(26px, 3vw, 38px); max-width: 44ch; font-size: 18px; opacity: .85; }

.band-red { background: linear-gradient(180deg, var(--red-bright), var(--red-deep)); color: var(--cream); }
.band-cream { background: linear-gradient(180deg, var(--cream), #f4e9d2); color: var(--ink); }
.band-gold { background: linear-gradient(180deg, var(--gold-light), var(--gold-dark)); color: var(--ink); }
.band-dark { background: var(--night); }

.band-red::before, .band-red::after,
.band-cream::before, .band-cream::after,
.band-gold::before, .band-gold::after {
  content: ""; position: absolute; left: 0; right: 0; height: 13px;
  background: repeating-linear-gradient(135deg, var(--red-bright) 0 13px, #fff 13px 26px);
}
.band-red::before, .band-cream::before, .band-gold::before { top: 0; }
.band-red::after, .band-cream::after, .band-gold::after { bottom: 0; }

/* ---------- the phones ---------- */

.phones { display: flex; align-items: flex-end; justify-content: center; gap: clamp(14px, 2.4vw, 36px); }
.phone { margin: 0; text-align: center; }
.phone img {
  display: block; width: 100%; height: auto; border-radius: 26px;
  box-shadow: 0 0 0 7px #10231b, 0 0 0 8px rgba(255, 255, 255, .22), 0 26px 60px rgba(0, 0, 0, .45);
}
.phone figcaption {
  margin-top: 14px; font-size: 12.5px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--on-red-soft);
}
.phone-main { width: clamp(220px, 26vw, 320px); }
.phone-main figcaption { color: var(--cream); }
.phone-side { width: clamp(156px, 19vw, 236px); }
.phone-side:first-child img { transform: perspective(1200px) rotateY(9deg); }
.phone-side:last-child img { transform: perspective(1200px) rotateY(-9deg); }
@media (max-width: 720px) {
  .phone-side { display: none; }
  .phone-main { width: min(72vw, 320px); }
}

/* ---------- what is behind the doors ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.chip {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 24px 15px 16px; border-radius: 999px;
  background: #fff; color: var(--ink);
  box-shadow: 0 3px 0 rgba(27, 21, 18, .1), 0 10px 24px rgba(27, 21, 18, .1);
}
.chip-icon {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--red); color: #fff;
}
.chip h3 { font-size: clamp(16px, 1.7vw, 19px); }

/* ---------- the calendar: Santa's workshop, as the app paints it ---------- */

.cal-house {
  position: relative; max-width: 560px; margin: 0 auto;
  padding: clamp(30px, 3.4vw, 42px) clamp(12px, 1.8vw, 18px) clamp(26px, 3vw, 36px);
  border-radius: 34px 34px 22px 22px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 1px, transparent 1px 86px),
    radial-gradient(120% 95% at 50% 6%, #c2343b 0%, #a3242b 52%, #7d1a20 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .1),
    inset 0 120px 120px -110px rgba(255, 236, 190, .24),
    0 40px 90px rgba(0, 0, 0, .5);
  overflow: hidden; isolation: isolate;
}
.cal-house::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: clamp(22px, 3vw, 34px);
  background: linear-gradient(180deg, #fffdf7 0%, var(--cream) 60%, #e6dcc6 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - 11px) no-repeat,
    radial-gradient(11px 11px at 11px 0, #000 98%, transparent) bottom left / 22px 11px repeat-x;
  mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - 11px) no-repeat,
    radial-gradient(11px 11px at 11px 0, #000 98%, transparent) bottom left / 22px 11px repeat-x;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .4));
}
.cal-house::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: clamp(26px, 3.4vw, 40px);
  background: linear-gradient(180deg, #fffdf7, var(--cream) 55%, #ded3bb);
  border-radius: 50% 50% 0 0 / 80% 80% 0 0;
  transform: scaleX(1.3);
}

.cal-lights { position: absolute; left: 0; right: 0; top: clamp(20px, 2.8vw, 32px); height: 34px; z-index: 1; pointer-events: none; }
.cal-lights svg { width: 100%; height: 100%; display: block; }
.cal-lights .bulb { animation: ccbulb 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .cal-lights .bulb { animation: none } }
@keyframes ccbulb { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }

.cal-star {
  position: absolute; left: 50%; top: -26px; transform: translateX(-50%);
  width: 46px; height: 46px; z-index: 2; pointer-events: none;
  filter: drop-shadow(0 0 18px rgba(243, 201, 107, .75));
}

.cal { position: relative; z-index: 1; display: grid; gap: clamp(6px, 0.9vw, 10px); grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 860px) { .cal { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cal { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.win {
  position: relative; aspect-ratio: 1 / 0.88;
  border-radius: 999px 999px 7px 7px;
  border: 0; padding: 8px 6px 10px; cursor: default;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  text-align: center; color: rgba(255, 244, 214, .8);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .14) 0%, transparent 38%),
    radial-gradient(110% 80% at 50% 78%, rgba(255, 211, 120, .2) 0%, transparent 70%),
    linear-gradient(180deg, #5d1016 0%, #6d151c 72%, #7a1a22 100%);
  box-shadow:
    0 0 0 4px rgba(255, 228, 170, .22),
    0 0 0 5px rgba(0, 0, 0, .3),
    inset 0 2px 0 rgba(255, 235, 190, .16),
    inset 0 -14px 22px -12px rgba(0, 0, 0, .7),
    0 10px 20px rgba(0, 0, 0, .35);
}
.win::before {
  content: "";
  position: absolute; left: 10%; right: 10%; top: 46%; height: 3px;
  background: rgba(255, 228, 170, .28);
}
.win::after {
  content: "";
  position: absolute; left: -6px; right: -6px; bottom: -6px; height: 9px;
  border-radius: 7px 7px 4px 4px;
  background: linear-gradient(180deg, #fffdf7, var(--cream) 60%, #ded3bb);
  box-shadow: 0 4px 9px rgba(0, 0, 0, .4);
}
.win-n { font-family: var(--display); font-weight: 600; font-size: clamp(20px, 2.2vw, 27px); line-height: 1; color: #ffeec2; }
.win-l { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.win svg { opacity: .8; }

.win.is-open {
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .45) 0%, transparent 34%),
    radial-gradient(120% 95% at 50% 36%, #FFF6DA 0%, #F3C96B 58%, #D9A74E 100%);
  color: #4a2f12;
  box-shadow:
    0 0 0 4px rgba(255, 240, 196, .8), 0 0 0 5px rgba(0, 0, 0, .3),
    inset 0 2px 0 rgba(255, 255, 255, .5),
    0 10px 20px rgba(0, 0, 0, .35), 0 18px 44px rgba(243, 201, 107, .4);
}
.win.is-open::before { background: rgba(120, 80, 20, .45); }
.win.is-today {
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .55) 0%, transparent 34%),
    radial-gradient(120% 95% at 50% 34%, #FFFEF8 0%, #FFF2CC 55%, #F3C96B 100%);
  color: #4a2f12;
  animation: ccring 2.8s ease-in-out infinite;
}
@keyframes ccring {
  0%, 100% { box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(0,0,0,.3), 0 10px 20px rgba(0,0,0,.35), 0 16px 40px rgba(255, 240, 196, .45) }
  50%      { box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(0,0,0,.3), 0 10px 20px rgba(0,0,0,.35), 0 24px 72px rgba(255, 240, 196, .9) }
}
@media (prefers-reduced-motion: reduce) { .win.is-today { animation: none } }
.win.is-today .win-l { color: var(--red); opacity: 1; }

.win.is-big {
  grid-column: 1 / -1; aspect-ratio: auto; min-height: clamp(74px, 7.5vw, 96px);
  padding-top: clamp(32px, 3.8vw, 44px);
}
.win.is-big .win-n { font-size: clamp(24px, 3vw, 34px); }
.win.is-big::before {
  left: 50%; right: auto; top: 10%; transform: translateX(-50%);
  width: clamp(24px, 3vw, 34px); height: clamp(24px, 3vw, 34px);
  border-radius: 50%; background: none; border: 5px solid #2F6B46; opacity: 1;
}

.cal-caption { margin: 22px 0 0; font-size: 15px; color: var(--muted); }

/* ---------- the promises under the last button ---------- */

.promises {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center;
  font-weight: 700; font-size: 15.5px; color: rgba(27, 21, 18, .72);
}
.promises li::before { content: "✓"; margin-right: 8px; font-weight: 900; }

/* ---------- footer ---------- */

.foot { position: relative; z-index: 1; padding: 46px 0 58px; background: var(--night); }
.foot-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.foot nav { display: flex; gap: 8px; flex-wrap: wrap; }
.foot nav a { color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 600; padding: 10px 13px; border-radius: 999px; }
.foot nav a:hover { color: var(--ivory); background: rgba(246, 238, 221, .07); }
.foot-fine { margin: 26px 0 0; font-size: 12.5px; line-height: 1.6; color: rgba(185, 196, 180, .72); max-width: 80ch; }

/* ---------- legal and support pages ---------- */

.doc { position: relative; z-index: 1; padding: 54px 0 70px; }
.doc-inner { max-width: 72ch; margin: 0 auto; }
.doc h1 { font-size: clamp(38px, 5.4vw, 62px); margin-bottom: 10px; }
.doc h2 { font-size: clamp(24px, 3vw, 34px); margin: 40px 0 12px; }
.doc h3 { margin: 26px 0 8px; }
.doc p, .doc li { color: var(--body-on-dark); font-size: 17px; }
.doc ul { padding-left: 22px; }
.doc a { color: var(--gold); }
.doc-updated { color: var(--muted); font-size: 15px; }
.doc-card {
  background: rgba(31, 92, 64, .22); border: 1px solid rgba(246, 238, 221, .14);
  border-radius: var(--r-panel); padding: 26px 28px; margin: 26px 0 36px;
}
.doc-card ul { margin: 0; }
.doc-back { display: inline-block; margin-bottom: 26px; color: var(--muted); text-decoration: none; font-weight: 700; }
.doc-back:hover { color: var(--ivory); }

/* ---------- one section to a screen ----------
   Added 14 November 2026. The owner, looking at the live site: "the website
   has too much below the fold", "much of the website is too tall tbh, needs to
   suit seeing all each section on each scroll", and then "could condense
   vertically more tbh".

   It was built width-first. Every size was a `vw` or a fixed pixel count, so
   nothing anywhere knew the height of the screen it had to fit in: the
   headline was `clamp(52px, 9.5vw, 116px)` and came out 110 tall on a laptop,
   the phone shots were sized by width and came out 692 tall, and on a phone
   the calendar dropped to three columns, which is nine rows of windows.
   Measured on a 1280x700 laptop the hero was 1070px - a screen and a half -
   and the calendar 836.

   So every piece that can be is now capped by `svh` as well: the headlines,
   the big number, the pills, the shots, the workshop and every gap between
   them. `svh` is the small viewport, the one that does not change when a
   phone's toolbars slide away; `vh` is written first wherever something has
   not got it.

   The snap is `proximity`, never `mandatory`: it settles a scroll that has
   come to rest near a join and leaves every other scroll alone. A section that
   genuinely cannot fit - a short screen, a reader at 200% - keeps its natural
   height and the snapping is turned off entirely, because a section taller
   than the screen with snapping on is a trap.

   The numbers were not guessed: `tools/check_site_heights.js` loads the built
   page in a real browser and fails if a section is taller than the screen. */

html { scroll-snap-type: y proximity; }

.hero, .band { scroll-snap-align: start; }

/* --- the type, capped by the screen as well as by the width --- */
h1 { font-size: min(clamp(52px, 9.5vw, 116px), 9svh); }
h2 { font-size: min(clamp(38px, 6vw, 72px), 7svh); }
.kicker { margin-bottom: clamp(6px, 1.4svh, 18px); font-size: min(13px, 1.9svh); }

/* --- the hero --- */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column;
  padding-bottom: clamp(10px, 2svh, 40px);
}
/* The masthead stays at the top; the countdown takes the room that is left. */
.hero > .wrap { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.hero-mid {
  flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center;
  padding-top: clamp(4px, 1svh, 24px);
}
.top { padding-top: clamp(12px, 2.4svh, 40px); }
.hero-mid h1 { margin-bottom: clamp(6px, 1.4svh, 22px); }
.hero-sub {
  max-width: 44ch;
  margin: clamp(8px, 1.6svh, 22px) auto clamp(8px, 1.6svh, 20px);
  font-size: min(clamp(16px, 2vw, 22px), 2.6svh);
}
.getit-note { margin-top: clamp(6px, 1.2svh, 14px); }

/* --- the card: the one thing on the page that must stay big --- */
.stage { --santa-lift: clamp(40px, 7svh, 96px); padding-top: var(--santa-lift); }
.big { min-height: min(150px, 17svh); }
.big { font-size: min(168px, 36vw, 21svh, calc(96cqw / var(--cc-chars) * 1.6)); }
.unit { font-size: min(28px, 3.4svh); }
.detail { min-height: min(21px, 2.6svh); }
.pills { margin-top: clamp(6px, 1.4svh, 14px); }
.pill { height: min(66px, 8svh); }
.pill b { font-size: min(28px, 3.4svh); }
.card-face { padding: clamp(6px, 1.2svh, 10px) 0 clamp(10px, 2.4svh, 24px); }
.dots { margin-top: clamp(2px, 1svh, 18px); }
.stage-foot { margin-top: clamp(2px, 0.8svh, 8px); }

/* --- the bands --- */
.band {
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(18px, 4svh, 72px) 0;
}
/* Two of the five bands are a heading and a handful of chips - 205px of
   content on a 800px screen. Forcing a whole screen on those leaves three
   quarters of it empty, which reads as a mistake rather than as room, so they
   take what they need and no more. Nothing is cut off either way: the ask was
   to see a whole section at a time, and a section shorter than the screen is
   seen whole by definition. The snap still starts at their top. */
#inside, #get {
  min-height: auto;
  padding: clamp(40px, 8svh, 110px) 0;
}

.band h2 { margin-bottom: clamp(10px, 2.2svh, 36px); }
.band-sub { margin: clamp(-18px, -1.4svh, -6px) auto clamp(8px, 2svh, 32px); font-size: min(18px, 2.4svh); }

/* Sized by the height there is. `width: auto` with `max-height` keeps the
   shot's own aspect; the figure's width rule still decides how wide it may
   get, so nothing is stretched either way. */
.phone img { width: auto; max-height: min(620px, 56svh); margin: 0 auto; }
.phone figcaption { margin-top: clamp(4px, 1svh, 12px); }

.chips { gap: clamp(6px, 1.2svh, 12px); }
.chip { padding: clamp(8px, 1.4svh, 15px) 24px clamp(8px, 1.4svh, 15px) 16px; }

/* The workshop is as tall as it is wide, so capping the width caps the height:
   five windows across is five rows, and a row is about 0.88 of its width. On a
   narrow phone it used to fall to three columns, which is NINE rows - 879px of
   calendar on an 844px screen. Four is the narrowest it goes now. */
.cal-house {
  max-width: min(560px, 62svh);
  padding-top: clamp(22px, 3.4svh, 42px);
  padding-bottom: clamp(18px, 3svh, 36px);
  /* The windows size themselves from this, below. */
  container-type: inline-size;
}

/* A window is `aspect-ratio: 1 / 0.88`, but an aspect ratio is only a
   preference: a box still grows to fit what is in it. A number at 27px, an
   18px icon and a 10px label with 5px gaps come to 85, so on a capped house
   every window was 58 wide and 73 tall and five rows made 531px of calendar
   where 255 was asked for. Everything inside a window is now measured in
   `cqi` - a share of the house's own width - so a smaller house really does
   make a smaller calendar. */
.win { padding: 5px 4px 6px; gap: clamp(2px, 0.9cqi, 5px); }
.win-n { font-size: clamp(14px, 5.2cqi, 27px); }
.win svg { width: clamp(12px, 3.4cqi, 18px); height: clamp(12px, 3.4cqi, 18px); }
.win-l { font-size: clamp(8px, 2.1cqi, 10px); letter-spacing: .06em; }
.win.is-big .win-n { font-size: clamp(16px, 6.4cqi, 34px); }

/* Five across at every width. It used to drop to four and then three, which on
   a phone is NINE rows of windows and 879px of calendar on an 844px screen -
   and the app's own wall is five across, so three never looked like it either. */
.cal { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Where a window is too small to letter, the label goes rather than shrinking
   to a smudge. The number and the icon are what a window is for. */
@container (max-width: 430px) {
  .win-l { display: none; }
  .win-n { font-size: clamp(15px, 6.2cqi, 27px); }
}
.cal-caption { margin-top: clamp(6px, 1.4svh, 24px); }

.promises { margin-top: clamp(10px, 2svh, 28px); }

/* --- the hero, side by side where there is width and no height ---
   A laptop is 1280 by 700: all the room in the world across, none at all down.
   Stacked, the hero wants 861px there and the store buttons fall off the
   bottom of the screen, which is the "too much below the fold" the owner saw.
   Beside each other they both fit with room to spare, and the countdown - the
   thing the page is for - gets BIGGER rather than smaller. Phones and portrait
   tablets keep the stack; there is no width to spend there. */
/* Narrow: the wrapper disappears and the hero lays out its grandchildren
   itself, so the card still sits between the headline and the sentence under
   it. `display: contents` is what makes one piece of markup do both. */
.hero-words { display: contents; }
.hero-mid > .stage { order: 3; }
.hero-words > .kicker { order: 1; }
.hero-words > h1 { order: 2; }
.hero-words > .hero-sub { order: 4; }
.hero-words > .getit { order: 5; }
.hero-words > .getit-note { order: 6; }

@media (min-width: 900px) {
  /* Two real columns, so neither can stretch the other: the words in one
     block, the card in the next. */
  .hero-mid {
    flex-direction: row; align-items: center; justify-content: center;
    gap: clamp(28px, 5vw, 80px);
    text-align: left;
  }
  .hero-words { display: block; flex: 1 1 0; min-width: 0; max-width: 34rem; }
  .hero-mid > .stage { flex: 0 1 440px; order: 2; --santa-lift: clamp(40px, 7svh, 86px); padding-top: var(--santa-lift); }
  .hero-words > .hero-sub { margin: clamp(10px, 2svh, 22px) 0 clamp(12px, 2.4svh, 26px); max-width: 28ch; }
  .hero-words > .getit { justify-content: flex-start; }
  .hero-words > .getit-note { text-align: left; }
}

/* --- narrow screens, where the only lever is less of everything --- */
@media (max-width: 899px) {
  h1 { font-size: min(clamp(40px, 9.5vw, 116px), 9svh); }
  /* Two store buttons where there was one. The App Store link appeared the
     moment the app got its Apple ID, and on a phone the pair wrapped to two
     rows and pushed the hero 33px past the screen - which the height check
     caught in the same run. They are narrower here so they sit on one row. */
  .getit { gap: clamp(8px, 1.4svh, 12px); }
  .btn { padding: 13px 16px; font-size: 15.5px; gap: 8px; }
  .stage { --santa-lift: clamp(30px, 4.5svh, 96px); padding-top: var(--santa-lift); }
  .big { min-height: min(150px, 13svh); }
  .top { padding-top: clamp(8px, 1.2svh, 40px); }
  .hero-sub { margin: clamp(6px, 1.2svh, 22px) auto clamp(6px, 1.2svh, 20px); }
  .getit-note { margin-top: clamp(4px, 0.9svh, 14px); }
  .card-face { padding-bottom: clamp(8px, 1.8svh, 24px); }
  .pill { height: min(66px, 7svh); }
}

/* --- a small phone: narrow AND short, where every lever has to be pulled ---
   Caught by `tools/check_site_heights.js` at 360x740, where the hero came out
   836 - a screen and an eighth - while 390x844 fitted exactly. Nothing here is
   a new idea; it is the same caps, tighter. */
@media (max-width: 899px) and (max-height: 800px) {
  h1 { font-size: min(clamp(32px, 8.6vw, 116px), 8svh); }
  .top { padding-top: clamp(6px, 1.1svh, 40px); }
  .hero-sub { font-size: min(15px, 2.2svh); margin: clamp(6px, 1.2svh, 22px) auto clamp(6px, 1.2svh, 20px); }
  .getit-note { margin-top: clamp(4px, 0.8svh, 14px); font-size: 13px; }
  .stage { --santa-lift: clamp(26px, 4svh, 96px); padding-top: var(--santa-lift); }
  .big { min-height: min(150px, 12svh); }
  .big { font-size: min(168px, 32vw, 18svh, calc(96cqw / var(--cc-chars) * 1.6)); }
  .unit { font-size: min(28px, 3svh); }
  .pill { height: min(66px, 6.4svh); }
  .pill b { font-size: min(28px, 3svh); }
  .card-face { padding-bottom: clamp(6px, 1.4svh, 24px); }
  .dots { margin-top: clamp(0px, 0.5svh, 18px); }
  .btn { padding: 11px 14px; font-size: 15px; }
  .getit-note { font-size: 12px; }
  .big { min-height: min(150px, 11svh); }
}

/* A screen too short to hold a section, or a reader who has asked for less
   movement: natural heights, no snapping. */
@media (max-height: 560px), (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
  .hero, .band { min-height: 0; }
}