/* Catch Claus. Old magic, new evidence: a storybook serif for the story, camera type for the facts.
   Night sections are Christmas Eve; snow sections are the morning after; the one red section is Alder Hey. */

@font-face { font-family: "Fell"; src: url("/static/fonts/imfell-pica.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Fell"; src: url("/static/fonts/imfell-pica-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/static/fonts/figtree.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }

:root {
  --night: #0a1428;        /* the sky at two minutes to midnight */
  --night-2: #101d3a;      /* raised surfaces at night */
  --night-3: #1b2c57;      /* house walls */
  --ink: #15223f;          /* text on snow */
  --snow: #f3f6fb;
  --snow-2: #e8eef7;
  --frost: #d5dfee;        /* hairlines on snow */
  --mist: #9fb0cc;         /* quiet text at night */
  --slate: #56657f;        /* quiet text on snow */
  --red: #c4142c;          /* his coat: the button you press, and Alder Hey */
  --red-deep: #9c0f22;
  --lamp: #ffc65c;         /* a lit window */

  --serif: "Fell", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 56px);
  --radius: 14px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--night); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: 88px; }
::selection { background: var(--lamp); color: var(--night); }
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }

h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; text-wrap: balance; }
h1 { font-size: clamp(2.7rem, 7.4vw, 5.6rem); line-height: 1.0; }
h2 { font-size: clamp(2.05rem, 4.6vw, 3.5rem); line-height: 1.06; }
h3 { font-size: 1.12rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.005em; }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -120px; z-index: 100; background: var(--lamp); color: var(--night); padding: 10px 18px; border-radius: 999px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--lamp); outline-offset: 3px; border-radius: 4px; }
.snow :focus-visible, .make :focus-visible, .page :focus-visible { outline-color: var(--red); }

.night { background: var(--night); color: var(--snow); }
.snow { background: var(--snow); color: var(--ink); }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 14px 30px; border: 0; border-radius: 999px;
  background: var(--red); color: #fff; font-weight: 700; font-size: 1.06rem; line-height: 1.2; text-decoration: none; text-align: center;
  box-shadow: 0 1px 0 #ffffff33 inset, 0 10px 28px -10px #c4142ccc; transition: background .18s, transform .18s var(--ease), box-shadow .18s; }
.btn:hover { background: #d81a35; transform: translateY(-1px); }
.btn:active { transform: translateY(1px); background: var(--red-deep); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.btn-small { min-height: 42px; padding: 9px 20px; font-size: .96rem; box-shadow: none; }
.btn-ink { background: var(--ink); box-shadow: none; }
.btn-ink:hover { background: #22335c; }
.btn-quiet { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn-quiet:hover { background: #ffffff14; }
.snow .btn-quiet:hover, .page .btn-quiet:hover { background: #15223f0d; }
.link { background: none; border: 0; padding: 0; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.link:hover { text-decoration-thickness: 2.5px; }

/* ---------------------------------------------------------------- header */
.site-header { position: absolute; inset: 0 0 auto 0; z-index: 30; color: var(--snow); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--serif); font-size: 1.62rem; line-height: 1; text-decoration: none; color: inherit; letter-spacing: -0.01em; white-space: nowrap; }
.mark { flex: none; overflow: visible; }
.mark-ring { stroke: var(--lamp); }
.mark-hat { fill: var(--red); }                      /* the hat he left on the doorbell, at an angle */
.mark-fur { fill: #fff; stroke: currentColor; stroke-width: 1; }
.site-nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); font-size: .98rem; font-weight: 500; }
.site-nav a:not(.btn) { text-decoration: none; opacity: .92; padding-block: 8px; }
.site-nav a:not(.btn):hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 760px) { .site-nav a:not(.btn) { display: none; } .header-row { height: 66px; } .brand { font-size: 1.45rem; } }
.site-header.is-plain { position: static; background: var(--night); }
.site-header.is-stuck { position: fixed; background: #0a1428f2; -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: 0 1px 0 #ffffff14, 0 14px 30px -20px #000; animation: header-in .4s var(--ease); }
.site-header.is-stuck .header-row { height: 62px; }
@keyframes header-in { from { transform: translateY(-100%); } }

/* ---------------------------------------------------------------- hero: the footage is the picture */
.hero { position: relative; isolation: isolate; overflow: hidden; min-height: min(100svh, 940px); display: flex; }
.feed { position: absolute; z-index: -2; top: 0; right: 0; height: 100%; aspect-ratio: 4 / 3; background: #0c0f16; }
.feed video { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .feed { overflow: hidden; } .feed video { transform: scale(1.07); transform-origin: 100% 100%; } }   /* the footage's own clock sits top-left, under our header: crop it out */
/* Night vision is grey; pull it a few degrees towards the page's blue, then melt its left edge into the sky. */
.feed::before { content: ""; position: absolute; inset: 0; z-index: 1; background: #12254f; mix-blend-mode: color; opacity: .42; pointer-events: none; }
.feed::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, var(--night) 0%, #0a1428eb 16%, #0a1428a6 36%, #0a142800 60%),
              linear-gradient(180deg, #0a1428cc 0%, #0a142800 20%, #0a142800 72%, #0a1428f2 100%); }
.feed-toggle { position: absolute; right: 18px; bottom: 18px; z-index: 5; border: 0; border-radius: 999px; padding: 8px 14px; background: #0a1428b3; color: var(--snow); font-size: .82rem; font-weight: 600; backdrop-filter: blur(6px); }
.feed-toggle:hover { background: #0a1428e6; }
.snowfall { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }

.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: end; padding-top: 132px; padding-bottom: clamp(48px, 9vh, 96px); }
.hero-copy { max-width: 39rem; }
.aid { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 26px; font-size: 1rem; font-weight: 600; color: #ffe7b5; }
.lamp { width: 9px; height: 9px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 0 5px #ffc65c26, 0 0 18px 4px #ffc65c80; flex: none; }
.hero h1 { margin-bottom: 26px; text-shadow: 0 2px 30px #0a1428; }
.lede { max-width: 33rem; font-size: clamp(1.08rem, 1.5vw, 1.24rem); line-height: 1.55; color: #dfe7f4; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 34px; }
.price { font-size: 1rem; font-weight: 600; color: #f3f6fb; }
.spaces { margin-top: 22px; font-size: .98rem; color: var(--mist); }
.spaces strong { color: var(--lamp); font-weight: 700; font-variant-numeric: tabular-nums; }

/* The phone alert. It arrives when he does. */
.ping { position: absolute; right: 0; bottom: clamp(48px, 9vh, 96px); width: min(330px, 100%); padding: 15px 17px 16px; border-radius: 20px; background: #f6f8fce8; color: var(--ink);
  backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 24px 60px -18px #000c, 0 0 0 1px #ffffff40 inset; transform-origin: 100% 100%;
  display: block; text-decoration: none; opacity: 0; visibility: hidden; transform: translateY(18px) scale(.96);
  transition: opacity .5s var(--ease), transform .7s var(--ease), visibility 0s .5s, box-shadow .2s; }
.ping.is-in { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ping.is-in:hover { transform: translateY(-2px); box-shadow: 0 30px 64px -18px #000d, 0 0 0 1px #ffffff66 inset; }
.ping > span { display: block; }
.ping .ping-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; font-size: .8rem; color: var(--slate); }
.ping-head .mark { width: 13px; height: 18px; color: var(--ink); }
.ping-head .mark-ring { stroke: var(--red); }
.ping-head strong { color: var(--ink); font-weight: 700; }
.ping-head span { margin-left: auto; }
.ping-title { font-weight: 700; font-size: 1rem; line-height: 1.3; }
.ping-body { font-size: .92rem; line-height: 1.4; color: #3a4963; margin-top: 2px; }

@media (max-width: 899px) {
  .hero { display: block; min-height: 0; }
  .feed { position: relative; z-index: 0; width: 100%; height: auto; margin-top: 66px; }
  .feed::before { opacity: .4; }
  .feed::after { background: linear-gradient(180deg, #0a142800 62%, var(--night) 100%); }
  .feed-toggle { right: 12px; bottom: 46px; }
  .hero-grid { position: static; padding-top: 0; padding-bottom: 52px; margin-top: -34px; }
  .hero-copy { position: relative; z-index: 3; }
  /* the alert drops in over the top of the footage, the way one does on a phone, so it never holds a gap open */
  .ping { z-index: 4; top: 76px; right: 12px; bottom: auto; left: 12px; width: auto; max-width: 420px; margin-inline: auto; padding: 12px 15px 13px; border-radius: 18px;
    transform-origin: 50% 0; transform: translateY(-22px) scale(.96); }
  .aid { margin-bottom: 18px; }
  .snowfall { z-index: 1; height: 75vw; }
}
@media (min-width: 900px) and (max-aspect-ratio: 4/3) { .feed { aspect-ratio: auto; width: 100%; } }
/* small laptops and tablets on their side: the footage runs under the words, so keep the paragraph clear of him */
@media (min-width: 900px) and (max-width: 1180px) {
  .lede { max-width: 26rem; }
  .feed::after { background: linear-gradient(90deg, var(--night) 0%, #0a1428eb 22%, #0a142899 42%, #0a142800 66%),
                             linear-gradient(180deg, #0a1428cc 0%, #0a142800 20%, #0a142800 72%, #0a1428f2 100%); }
}

/* ---------------------------------------------------------------- sections */
.proof, .round, .stills, .questions { padding-block: clamp(52px, 7vw, 92px); }
.section-head { max-width: 46rem; margin-bottom: clamp(26px, 3.4vw, 42px); }
.section-head p { margin-top: 14px; font-size: 1.1rem; color: var(--slate); max-width: 36rem; }
.night .section-head p { color: var(--mist); }

/* ---------------------------------------------------------------- the proof: drag to see who came */
.compare { margin-bottom: clamp(38px, 5vw, 60px); }
.compare-frame { position: relative; overflow: hidden; border-radius: var(--radius); background: #0c0f16; aspect-ratio: 4 / 3; max-height: 78vh; margin-inline: auto;
  box-shadow: 0 40px 80px -40px #15223f80, 0 0 0 1px #15223f1a; --cut: 38%; touch-action: pan-y; }
.compare-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.compare-after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--cut)); }
.compare-handle { position: absolute; top: 0; bottom: 0; left: var(--cut); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px #0a142833; pointer-events: none; }
.compare-handle span { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #fff; box-shadow: 0 6px 20px #0a142866;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315223f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E"); background-size: 24px; background-position: center; background-repeat: no-repeat; }
.compare-frame { cursor: ew-resize; }
.compare-frame.is-playing { cursor: auto; }
.compare-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }   /* keyboard only; pointers are handled on the frame */
.tag { transition: opacity .2s; }
.compare-frame.no-before .tag-before, .compare-frame.no-after .tag-after { opacity: 0; }
.compare-range:focus-visible + * { outline: none; }
.compare-frame:has(.compare-range:focus-visible) { outline: 3px solid var(--red); outline-offset: 4px; }
.tag { position: absolute; bottom: 14px; padding: 5px 11px; border-radius: 6px; background: #000000a6; color: #fff; font-size: .82rem; font-weight: 700; letter-spacing: .01em; pointer-events: none; }
.tag-before { left: 14px; }
.tag-after { right: 14px; }
.compare-clip { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; object-fit: contain; background: #0c0f16; }
.compare-frame.is-playing .tag, .compare-frame.is-playing .compare-handle, .compare-frame.is-playing .compare-range { display: none; }
.compare-switch { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.chip { border: 1.5px solid var(--frost); background: transparent; border-radius: 999px; padding: 8px 18px; font-size: .95rem; font-weight: 600; color: var(--slate); transition: background .15s, color .15s, border-color .15s; }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip-play { display: inline-flex; align-items: center; gap: 9px; border-color: var(--red); color: var(--red); }
.chip-play::before { content: ""; border-left: 9px solid currentColor; border-block: 6px solid #0000; }
.chip-play.is-on { background: var(--red); border-color: var(--red); color: #fff; }
@media (hover: hover) { .chip-play:hover { background: var(--red); border-color: var(--red); color: #fff; } }
.chip-play.is-on::before { display: none; }
@media (min-width: 560px) { .chip-play { margin-left: 14px; } }
@media (min-width: 900px) { .compare-frame { width: min(100%, calc(78vh * 4 / 3)); } }

.steps { counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(26px, 3.4vw, 44px); }
.steps li { counter-increment: step; position: relative; padding-top: 58px; }
.steps li::before { content: counter(step); position: absolute; top: 0; left: 0; font-family: var(--serif); font-size: 2.9rem; line-height: 1; color: var(--red); }
.steps li::after { content: ""; position: absolute; top: 24px; left: 44px; right: 0; height: 1px; background: var(--frost); }
.steps h3 { margin-bottom: 8px; }
.steps p { color: var(--slate); font-size: 1rem; }

/* ---------------------------------------------------------------- the round: a street of houses */
.round { position: relative; background:
  radial-gradient(1px 1px at 12% 18%, #fff 50%, #0000 51%), radial-gradient(1px 1px at 31% 9%, #ffffffb3 50%, #0000 51%), radial-gradient(1.5px 1.5px at 47% 22%, #fff 50%, #0000 51%),
  radial-gradient(1px 1px at 63% 12%, #ffffffb3 50%, #0000 51%), radial-gradient(1px 1px at 78% 25%, #fff 50%, #0000 51%), radial-gradient(1.5px 1.5px at 91% 8%, #ffffffcc 50%, #0000 51%),
  radial-gradient(1px 1px at 22% 31%, #ffffff80 50%, #0000 51%), radial-gradient(1px 1px at 85% 36%, #ffffff80 50%, #0000 51%), radial-gradient(1px 1px at 55% 5%, #ffffff99 50%, #0000 51%),
  linear-gradient(180deg, #070f20 0%, var(--night) 40%, #0f1d3c 100%); isolation: isolate; overflow: hidden; }
/* A moon over the street, and once in a while something crosses it. The team is pale against the sky and, by difference
   blending, dark against the moon. Without motion it simply sits there, mid-crossing. */
.round-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.round-moon { position: absolute; top: clamp(26px, 5vw, 66px); right: max(var(--gutter), calc((100% - var(--wrap)) / 2 + 5%)); width: clamp(52px, 9vw, 116px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #fffdf2 0%, #f6efd2 55%, #e3dab4 100%); box-shadow: 0 0 0 10px #fff8d60d, 0 0 0 26px #fff8d608, 0 0 90px 20px #fff3c62e; }
.round-sleigh { position: absolute; left: 50%; top: 50%; width: 186%; translate: -50% -50%; rotate: -5deg; color: #dbe4f2; mix-blend-mode: difference; }
.round-sleigh svg { width: 100%; height: auto; overflow: visible; }
.round.is-asleep .round-sleigh { opacity: 0; }
.round.is-awake .round-sleigh { animation: sleigh-pass 40s linear .4s infinite both; }
.round.is-awake .round-sleigh svg { animation: sleigh-bob 2.6s ease-in-out infinite alternate; }
/* it comes out of the dark just short of the moon, so it never flies across the words */
@keyframes sleigh-pass {
  0% { translate: calc(-50% - 40vw) calc(-50% + 34px); opacity: 0; }
  1.8% { opacity: 0; }
  5% { opacity: 1; }
  14.2% { translate: calc(-50% + 45vw) calc(-50% - 38px); opacity: 1; }
  14.21%, 100% { translate: calc(-50% + 45vw) calc(-50% - 38px); opacity: 0; }
}
@keyframes sleigh-bob { from { transform: translateY(-3px); } to { transform: translateY(3px); } }
@media (max-width: 620px) { .round-moon { top: 20px; } }
.street { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); row-gap: clamp(20px, 3vw, 30px); margin-bottom: clamp(34px, 5vw, 56px); }
/* a hundred houses: more to a row, so the street stays a street and not a housing estate */
.street-long { grid-template-columns: repeat(13, minmax(0, 1fr)); row-gap: 16px; }
@media (min-width: 620px) { .street { grid-template-columns: repeat(17, minmax(0, 1fr)); } .street-mid, .street-long { grid-template-columns: repeat(20, minmax(0, 1fr)); row-gap: clamp(18px, 2.4vw, 26px); } }
@media (min-width: 980px) { .street-mid, .street-long { grid-template-columns: repeat(25, minmax(0, 1fr)); } }
.house { position: relative; border-bottom: 3px solid #e7edf7; --wall: #223566; --win: #0c1731; --door: #0c1731; --snowcap: #e7edf7; --wreath: #0000; }
.house svg { width: 100%; height: auto; overflow: visible; }
.house svg { transform-origin: 50% 100%; transition: transform .25s var(--ease); }
.house:hover svg { transform: scale(1.14); }
.h-wall { fill: var(--wall); transition: fill .7s ease; }
.h-chim { fill: var(--wall); transition: fill .7s ease; }
.h-snow { fill: var(--snowcap); }
.h-win { fill: var(--win); transition: fill .45s ease; }
.h-door { fill: var(--door); transition: fill .7s ease; }
.h-wreath { fill: var(--wreath); transition: fill .7s ease; }
.house.lit { --wall: #2e4687; --win: var(--lamp); --door: #7d1220; --wreath: #2f8f5b; }
.house.lit .h-win { filter: drop-shadow(0 0 2.2px #ffc65ccc); }
.house.now::before, .house.mine::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 4px); width: 10px; height: 10px; margin-left: -5px; background: var(--lamp); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: twinkle 2.4s ease-in-out infinite; }
.house.mine { --wall: #2d4380; --door: var(--red); }
.house.mine::before { background: #fff; animation: none; width: 12px; height: 12px; margin-left: -6px; }
.house.mine::after { content: "You"; position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); font-size: .72rem; font-weight: 700; color: var(--snow); }
@keyframes twinkle { 0%, 100% { transform: scale(.7); opacity: .65; } 50% { transform: scale(1.15); opacity: 1; } }

.round-foot { display: grid; gap: 26px clamp(28px, 4vw, 56px); align-items: center; }
.round-count { display: flex; align-items: center; gap: 18px; }
.round-count strong { font-size: clamp(4rem, 9vw, 6.4rem); line-height: .86; font-weight: 800; letter-spacing: -0.045em; color: var(--lamp); font-variant-numeric: tabular-nums; }
.round-count span { font-size: 1.3rem; font-weight: 700; line-height: 1.25; }
.round-count small { font-size: .98rem; font-weight: 500; color: var(--mist); }
/* what he is doing this minute: a lit lamp and two lines, set level with the count */
.round-now { display: flex; align-items: flex-start; gap: 16px; }
.round-now .lamp { margin-top: .5em; animation: lamp 2.6s ease-in-out infinite; }
.round-now p { display: grid; gap: 3px; }
.round-now strong { font-size: 1.2rem; font-weight: 700; line-height: 1.3; color: var(--snow); }
.round-now span { color: var(--mist); font-size: 1.02rem; }
@keyframes lamp { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (min-width: 860px) {
  .round-foot { grid-template-columns: auto minmax(0, 1fr) auto; }
  .round-now { padding-left: clamp(28px, 4vw, 56px); border-left: 1px solid #ffffff26; min-height: 64px; align-items: center; }
  .round-now .lamp { margin-top: 0; }
}

/* ---------------------------------------------------------------- Alder Hey: the one red room in the house */
.cause { background: var(--red-deep); color: #fff; padding-block: clamp(52px, 7vw, 92px);
  background-image: radial-gradient(120% 90% at 85% 0%, #c4142c 0%, #9c0f22 55%, #7f0b1b 100%); }
.cause-grid { display: grid; gap: clamp(40px, 6vw, 84px); align-items: start; }
@media (min-width: 940px) { .cause-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); } }
.cause h2 { font-size: clamp(2.5rem, 6.2vw, 4.7rem); line-height: .98; margin-bottom: 24px; }
.cause-copy p { max-width: 34rem; font-size: 1.1rem; color: #ffe9ec; }
.cause-copy p + p { margin-top: 16px; }
.cause-copy .cause-sign { font-family: var(--serif); font-style: italic; font-size: 1.7rem; line-height: 1.1; color: #fff; margin-top: 22px; }
.link-on-red { font-weight: 600; text-underline-offset: 4px; }
/* A till receipt with a torn-off bottom. The teeth are cut out of the card itself with a mask (one clean edge, no seam),
   and the shadow is cast by the wrapper so it follows the teeth. */
.receipt-wrap { filter: drop-shadow(0 22px 26px #3a000980); }
.receipt { --tooth: 16px; background: #fffdf8; color: var(--ink); border-radius: 8px 8px 0 0; padding: 30px clamp(22px, 3vw, 34px) calc(30px + var(--tooth));
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% 0 / var(--tooth) 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% 0 / var(--tooth) 100%; }
.receipt-title { font-family: var(--serif); font-size: 1.55rem; line-height: 1.15; margin-bottom: 18px; }
.receipt dl > div { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px dashed #c9d2e0; font-size: 1.02rem; }
.receipt dt { color: #3c4a66; }
.receipt dd { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.receipt .receipt-total { border-bottom: 0; border-top: 2px solid var(--ink); margin-top: 8px; padding-top: 16px; font-size: 1.22rem; }
.receipt .receipt-total dt { color: var(--ink); font-weight: 700; }
.receipt .receipt-total dd { color: var(--red); }
.receipt-raised { margin-top: 20px; font-size: 1rem; color: #3c4a66; }
.receipt-raised strong { color: var(--ink); font-size: 1.15rem; }
.receipt-goal { margin-top: 12px; padding-top: 14px; border-top: 1px dashed #c9d2e0; font-size: 1.08rem; font-weight: 600; color: var(--ink); }
.receipt-goal strong { color: var(--red); font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------------------------------------------------------------- stills */
.stills { background: var(--snow-2); }
.stills-grid { display: grid; gap: 22px clamp(26px, 4vw, 56px); }
@media (min-width: 760px) { .stills-grid { grid-template-columns: 1fr 1fr; } .how-to-save { grid-column: 1 / -1; } }
/* one look at each: the camera's own picture, against a whole-phone screenshot and a photo of a screen */
.specimen { display: flex; align-items: flex-end; gap: clamp(14px, 3vw, 26px); height: clamp(116px, 15vw, 164px); margin-bottom: 26px; }
.specimen > * { position: relative; flex: none; height: 100%; }
.specimen > *::after { content: ""; position: absolute; right: -10px; top: -10px; width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 3px var(--snow-2); background: #1d7a4c center / 13px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E"); }
.specimen-no > *::after { background-color: var(--red); background-size: 11px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M3.5 3.5l9 9M12.5 3.5l-9 9'/%3E%3C/svg%3E"); }
.specimen img { width: 100%; height: 100%; object-fit: cover; }
.specimen-shot { aspect-ratio: 4 / 3; }
.specimen-shot img { border-radius: 8px; box-shadow: 0 0 0 1px #15223f24, 0 16px 30px -18px #15223f99; }
.specimen-phone { aspect-ratio: 9 / 16.5; display: grid; grid-template-rows: auto auto auto 1fr; gap: 4px; padding: 6px 5px 8px; border-radius: 11px; background: #10192c; color: #fff; box-shadow: 0 16px 30px -18px #15223f99; }
.specimen-phone img { height: auto; aspect-ratio: 4 / 3; border-radius: 2px; }
.sp-bar { display: flex; justify-content: space-between; align-items: center; font-size: 6.5px; font-weight: 700; line-height: 1; padding-inline: 2px; }
.sp-bar i { width: 11px; height: 5px; border-radius: 1.5px; background: #fff; opacity: .85; }
.sp-title { font-size: 7.5px; font-weight: 700; line-height: 1.2; text-align: center; }
.sp-keys { display: flex; justify-content: center; align-items: center; gap: 7px; }
.sp-keys i { width: 13px; height: 13px; border-radius: 50%; background: #ffffff2e; }
.sp-keys i:nth-child(2) { width: 18px; height: 18px; background: var(--red); }
.specimen-screen { height: 82%; aspect-ratio: 4 / 3; margin-left: 6px; rotate: -5deg; }
.specimen-screen img { border: 5px solid #1b2030; border-bottom-width: 9px; border-radius: 5px; box-shadow: 0 16px 30px -18px #15223f99; }
.specimen-screen::before { content: ""; position: absolute; inset: 5px 5px 9px; z-index: 1; border-radius: 1px;
  background: linear-gradient(112deg, #fff0 30%, #ffffff73 44%, #fff0 58%), repeating-linear-gradient(0deg, #0000 0 2px, #00000026 2px 3px); }
.stills-list h3 { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; margin-bottom: 14px; }
.stills-list li { position: relative; padding: 13px 0 13px 34px; border-top: 1px solid var(--frost); }
.stills-list li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 16px; height: 16px; background: center / contain no-repeat; }
.stills-list.yes li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231d7a4c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E"); }
.stills-list.no li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23c4142c' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3.5 3.5l9 9M12.5 3.5l-9 9'/%3E%3C/svg%3E"); }

details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    :root { interpolate-size: allow-keywords; }
    details::details-content { block-size: 0; overflow: clip; transition: block-size .38s var(--ease), content-visibility .38s allow-discrete; }
    details[open]::details-content { block-size: auto; }
  }
}
.how-to-save { border-top: 1px solid var(--frost); }
.how-to-save summary { position: relative; padding: 20px 44px 20px 0; font-weight: 700; font-size: 1.08rem; }
.how-to-save summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; margin-top: -9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .25s var(--ease); }
.how-to-save[open] > summary::after { transform: translateY(5px) rotate(-135deg); }
.how-to-save p { padding: 0 44px 22px 0; color: var(--slate); max-width: 44rem; }

/* ---------------------------------------------------------------- grown-ups */
.grownups { padding-block: clamp(34px, 4.5vw, 56px); }
.sealed { max-width: 50rem; margin-inline: auto; border: 1.5px dashed #ffffff47; border-radius: var(--radius); background: #ffffff08; }
.sealed summary { display: grid; gap: 4px; padding: 22px 60px 22px 26px; position: relative; }
.sealed summary::after { content: ""; position: absolute; right: 26px; top: 50%; width: 12px; height: 12px; margin-top: -9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .25s var(--ease); }
.sealed-title { font-family: var(--serif); font-size: 1.6rem; line-height: 1.15; }
.sealed-sub { color: var(--mist); font-size: .98rem; }
.sealed-body { padding: 0 26px 26px; display: grid; gap: 14px; color: #dfe7f4; max-width: 44rem; }

/* ---------------------------------------------------------------- questions, lost link, closing */
.questions-grid { display: grid; gap: 34px clamp(34px, 5vw, 76px); align-items: start; }
@media (min-width: 940px) { .questions-grid { grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr); } .questions-head { position: sticky; top: 40px; } }
.questions-head { display: grid; gap: 20px; justify-items: start; }
.questions-head p { color: var(--slate); font-size: 1.08rem; max-width: 24rem; }
.questions-head p a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
/* The answers sit on one sheet of paper, so the list reads as a single object and not as loose lines on the page. */
.faq { background: #fff; border-radius: 18px; padding: 8px clamp(14px, 2.4vw, 26px); box-shadow: 0 0 0 1px var(--frost), 0 30px 60px -44px #15223f66; }
.faq details + details { border-top: 1px solid var(--snow-2); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-inline: -8px; padding: 20px 8px; border-radius: 10px; font-weight: 700; font-size: 1.1rem; line-height: 1.35; transition: color .15s; }
.faq summary:hover { color: var(--red); }
.faq summary:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; }
/* a plus that turns into a cross */
.faq summary::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--snow-2) center / 12px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2315223f' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 1v10M1 6h10'/%3E%3C/svg%3E"); transition: transform .3s var(--ease), background-color .15s; }
.faq details[open] > summary::after { transform: rotate(45deg); background-color: #fbe3e6; }
.faq details[open] > summary { color: var(--ink); }
.faq p { padding: 0 46px 24px 0; color: #3c4a66; max-width: 40rem; }
@media (max-width: 600px) { .faq p { padding-right: 0; } .faq summary { font-size: 1.04rem; } }

.lost { padding-bottom: clamp(52px, 7vw, 92px); }
.lost-row { display: grid; gap: 24px 60px; align-items: center; padding: clamp(26px, 4vw, 44px); border-radius: var(--radius); background: #fff; box-shadow: 0 0 0 1px var(--frost); }
@media (min-width: 860px) { .lost-row { grid-template-columns: 1fr 1fr; } }
.lost h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 8px; }
.lost p { color: var(--slate); }
.lost-form { display: flex; flex-wrap: wrap; gap: 10px; }
.lost-form input { flex: 1 1 220px; }
.form-note { flex-basis: 100%; min-height: 1.5em; font-size: .95rem; color: var(--slate); }
.form-note.is-error { color: var(--red); font-weight: 600; }

input[type="email"], input[type="text"], input[type="time"] { min-height: 54px; padding: 12px 18px; border-radius: 12px; border: 1.5px solid #b9c5d8; background: #fff; color: var(--ink); width: 100%; }
input::placeholder { color: #66738b; }
input:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; border-color: var(--red); border-radius: 12px; }

.closing { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding-block: clamp(68px, 9vw, 120px); background: linear-gradient(180deg, #070f20, var(--night)); }
.closing .snowfall { z-index: -1; }
.closing-line { font-family: var(--serif); font-style: italic; font-size: clamp(1.9rem, 4.6vw, 3.5rem); line-height: 1.12; max-width: 22ch; margin: 0 auto 34px; text-wrap: balance; }
.closing .price { margin-top: 16px; color: var(--mist); font-weight: 500; }

/* ---------------------------------------------------------------- footer */
.site-footer { border-top: 1px solid #ffffff1f; padding-block: 44px 56px; font-size: .95rem; }
.footer-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 30px; padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid #ffffff1f; }
.footer-line { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: #ffe7b5; }
.footer-cols { display: grid; gap: 22px 60px; color: var(--mist); }
.footer-cols p { max-width: 40rem; }
.footer-cols nav { display: flex; flex-wrap: wrap; gap: 8px 26px; align-content: start; }
.footer-cols a { color: #dfe7f4; text-underline-offset: 3px; }
@media (min-width: 860px) { .footer-cols { grid-template-columns: 1fr auto; } }

/* ---------------------------------------------------------------- plain pages: privacy, terms, errors */
.page { background: var(--snow); color: var(--ink); padding-block: clamp(48px, 8vw, 96px) clamp(72px, 10vw, 120px); min-height: 60vh; }
.page .wrap { max-width: 46rem; }
.page h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); margin-bottom: 26px; }
.page h2 { font-size: 1.7rem; margin: 40px 0 12px; }
.page p, .page li { color: #2c3a57; }
.page p + p { margin-top: 14px; }
.page ul { list-style: disc; padding-left: 22px; display: grid; gap: 8px; margin-top: 12px; }
.page ul + p { margin-top: 16px; }
.page .updated { color: var(--slate); font-size: .95rem; margin-bottom: 30px; }
.error-page { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 120px var(--gutter) 80px; }
.error-page { position: relative; isolation: isolate; overflow: hidden; }
/* one house with nobody in: every window dark, snow on the roof */
.dark-house { width: 96px; margin: 0 auto 34px; }
.dark-house .house { border-bottom-width: 3px; padding-inline: 8px; margin-inline: -8px; }
.error-page h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); margin-bottom: 18px; }
.error-page p { color: var(--mist); max-width: 30rem; margin: 0 auto 30px; font-size: 1.1rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .ping { opacity: 1; visibility: visible; transform: none; }
  .snowfall { display: none; }
}