/* Landing page: the parallax hero (and, from phase 3, its sections). Loaded after css/site.css. */

/* ==== Hero ======================================================================================================
   The Christmas Village, built from the game's own layers (sky, far, sides, near) and moved at different speeds as the
   page scrolls, so the camera seems to climb. Only `transform` moves. Native CSS scroll-driven animations are used
   where the browser has them; js/site.js sets --p on .hero as a fallback. prefers-reduced-motion: nothing moves.
   Layer geometry: a layer image is "scene wide" (--scene-w). On a phone that is the viewport width; on a wide screen
   the scene keeps its portrait shape and the towers are framed at the left and right edge, the far layer is mirrored,
   and the cobbles are tiled between the two snow banks. */
.hero {
  --hero-h: max(100vh, 38rem);
  --scene-w: min(100vw, calc(var(--hero-h) * 0.8));
  --focus: #ffd978;
  position: relative; isolation: isolate; overflow: hidden;
  height: var(--hero-h);
  color: var(--cream);
  background: linear-gradient(180deg, #010c43 0%, #03145b 60%, #142a8c 100%);
}
@supports (height: 100svh) { .hero { --hero-h: max(100svh, 38rem); } }

.stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.layer { position: absolute; inset: 0; }
.layer img { position: absolute; display: block; height: auto; max-width: none; user-select: none; -webkit-user-drag: none; }

.layer--sky img { top: 0; left: 0; width: 100%; }

.layer--far img { bottom: 0; left: 50%; width: var(--scene-w); margin-left: calc(var(--scene-w) / -2); }
.layer--far .mirror { display: none; transform: scaleX(-1); }
.layer--far .far-l { margin-left: calc(var(--scene-w) * -1.5 + 1px); }
.layer--far .far-r { margin-left: calc(var(--scene-w) * 0.5 - 1px); }

.layer--sides img, .layer--near img { bottom: 0; width: var(--scene-w); }
.layer--sides .sides-l, .layer--near .near-l { left: 0; }
.layer--sides .sides-r, .layer--near .near-r { right: 0; display: none; }
.layer--near .near-fill { display: none; }

/* Layer speeds: --drift is the share of the page scroll a layer lags behind (0 = moves with the page, 1 = holds still). */
.layer--sky { --drift: 0.8; }
.layer--far { --drift: 0.55; }
.layer--sides { --drift: 0.32; }
.layer--near { --drift: 0.08; }
.hero-inner { --drift: 0.14; }

/* A wide window: frame the towers, mirror the far layer, tile the cobbles. */
@media (min-aspect-ratio: 4/5) {
  .layer--far .mirror { display: block; }
  .layer--sides .sides-l { clip-path: inset(0 52% 0 0); }
  .layer--sides .sides-r { display: block; clip-path: inset(0 0 0 62%); }
  .layer--near .near-l { clip-path: inset(0 66% 0 0); -webkit-mask-image: linear-gradient(to right, #000 calc(34% - 56px), transparent 34%); mask-image: linear-gradient(to right, #000 calc(34% - 56px), transparent 34%); }
  .layer--near .near-r { display: block; clip-path: inset(0 0 0 66%); -webkit-mask-image: linear-gradient(to left, #000 calc(34% - 56px), transparent 34%); mask-image: linear-gradient(to left, #000 calc(34% - 56px), transparent 34%); }
  .layer--near .near-fill {
    display: block; position: absolute; bottom: 0; /* first child of .layer--near: the two banks paint over it; no z-index (a negative one slips behind the hero when will-change is off, i.e. with reduced motion) */
    left: calc(var(--scene-w) * 0.34 - 60px); right: calc(var(--scene-w) * 0.34 - 60px);
    height: calc(var(--scene-w) * 460 / 1179);
    background: url("/assets/img/hero/near-tile.webp?v=ed9ba4c510") repeat-x left bottom / auto 100%;
  }
}

/* Moving: native scroll-driven animation (runs off the main thread) ... */
.layer, .hero-inner { will-change: transform; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .layer, .hero-inner {
      animation: hero-drift linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 var(--hero-h);
    }
  }
}
@keyframes hero-drift { to { transform: translate3d(0, calc(var(--drift) * var(--hero-h)), 0); } }
/* ... or the small script: it adds .parallax-js and sets --p (0 to 1) on .hero */
.hero.parallax-js .layer, .hero.parallax-js .hero-inner {
  transform: translate3d(0, calc(var(--p, 0) * var(--drift) * var(--hero-h)), 0);
}
@media (prefers-reduced-motion: reduce) {
  .layer, .hero-inner { will-change: auto; animation: none !important; transform: none !important; }
}

/* Soft shade behind the header and the buttons so cream text and buttons always read. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(1, 12, 67, 0.62) 0, rgba(1, 12, 67, 0) 22%),
    linear-gradient(0deg, rgba(1, 12, 67, 0.5) 0, rgba(1, 12, 67, 0) 34%),
    linear-gradient(0deg, #03145b 0, rgba(3, 20, 91, 0) 12%);
}

/* ---- Hero content ---- */
.hero-inner {
  position: relative; z-index: 3; height: 100%;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(4.2rem, 9svh, 6rem) var(--gutter) calc(1.4rem + env(safe-area-inset-bottom));
  --santa-d: clamp(150px, min(60vw, 29svh), 300px);
}
.hero-title { margin: 0; line-height: 0; font-size: 1rem; }
.hero-title img { width: clamp(240px, min(80vw, 36svh), 460px); height: auto; filter: drop-shadow(0 6px 18px rgba(1, 12, 67, 0.55)); }
.hero-tag {
  margin: 0.7rem 0 0; max-width: 22ch;
  font: 400 clamp(1.4rem, 5.8vw, 1.85rem)/1.2 var(--display); color: var(--cream); text-wrap: balance;
  text-shadow: 0 2px 16px rgba(1, 12, 67, 0.95), 0 0 3px rgba(1, 12, 67, 0.9);
  position: relative;
}
/* a soft dark pool behind the tagline: it sits on the light snow bank on wide windows */
.hero-tag::before {
  content: ""; position: absolute; z-index: -1; inset: -0.9rem -2.2rem -0.7rem; pointer-events: none;
  background: radial-gradient(ellipse closest-side, rgba(1, 12, 67, 0.7) 0%, rgba(1, 12, 67, 0.5) 60%, rgba(1, 12, 67, 0) 100%);
}
.santa { position: relative; flex: none; width: var(--santa-d); aspect-ratio: 1; margin: auto 0; }
.santa::before {
  content: ""; position: absolute; inset: -16%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(255, 214, 120, 0.5) 0%, rgba(255, 214, 120, 0) 66%);
}
.santa img {
  display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  border: 5px solid var(--gold-light);
  box-shadow: 0 0 0 3px #7a4a10, 0 18px 44px rgba(1, 12, 67, 0.6);
}
@media (prefers-reduced-motion: no-preference) {
  .santa { animation: santa-bob 5.5s ease-in-out infinite; }
}
@keyframes santa-bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-9px) rotate(1.4deg); } }

.hero-cta { width: min(100%, 22rem); }
/* The one "Join the beta" button and, on desktop (and with no script), a small chooser under it. Phones and tablets (touch, no hover)
   start without the chooser so nothing jumps when the script has sorted them: js/site.js puts data-platform="ios|android|desktop"
   on .join; css/nojs.css brings the chooser back when there is no script. */
.join { display: grid; justify-items: center; gap: 0.8rem; width: 100%; }
.join .join-main { width: 100%; }
.join .join-soon-main { display: none; width: 100%; }
.join-choose { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.join-pill {
  display: inline-block; padding: 0.35rem 0.95rem; font: 700 1rem/1.2 var(--serif); text-align: center; text-decoration: none;
  color: var(--cream); background: rgba(1, 12, 67, 0.62); border: 2px solid rgba(255, 247, 230, 0.6); border-radius: 999px;
}
a.join-pill:hover { color: var(--cream); background: rgba(255, 247, 230, 0.2); border-color: var(--cream); }
.join-pill--soon { border-style: dashed; cursor: default; }
/* The Android steps (only when <html data-android-beta="on">; hidden otherwise by site.css): the beta group, then the Play testing page.
   Android visitors get them in place of the main button; desktops get them under the chooser; iPhone and iPad never see them. */
.join .join-steps { display: none; width: 100%; gap: 0.5rem; justify-items: center; text-align: center; }
html[data-android-beta="on"] .join:not([data-platform="ios"]) .join-steps { display: grid; }
html[data-android-beta="on"] .join[data-platform="android"] .join-main { display: none; }
.join-steps-title { margin: 0; font: 700 1.05rem/1.2 var(--serif); letter-spacing: 0.02em; color: var(--gold-light); }
.join-steps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; width: 100%; }
.join-steps-list li { display: grid; justify-items: center; gap: 0.25rem; }
.join-steps-list li span { font-size: 0.92rem; line-height: 1.3; color: var(--cream); text-shadow: 0 1px 8px rgba(1, 12, 67, 0.95); max-width: 22rem; }
.join .join-step { width: 100%; min-height: 2.7rem; padding-block: 0.45rem; font-size: 1.05rem; }
.join-stay { margin: 0; font-size: 0.95rem; font-style: italic; color: var(--cream); text-shadow: 0 1px 8px rgba(1, 12, 67, 0.95); }
@media (hover: none) and (pointer: coarse) { .join:not([data-platform]) .join-steps { display: none !important; } }

@media (hover: none) and (pointer: coarse) { .join:not([data-platform]) .join-choose { display: none; } }
.join[data-platform="ios"] .join-choose, .join[data-platform="android"] .join-choose { display: none; }
/* A computer: the button alone; it opens the choice (data-open="choose"), and "Android" its steps (data-open="android"). */
.join[data-platform="desktop"]:not([data-open]) .join-choose { display: none; }
html[data-android-beta] .join[data-platform="desktop"]:not([data-open="android"]) .join-steps { display: none; }
.join[data-platform="desktop"][data-open] .join-main { display: none; }
.join[data-platform="desktop"][data-open="android"] .join-choose { display: none; }
button.join-pill { cursor: pointer; }
.join[data-platform="desktop"][data-open="choose"] .join-choose { gap: 0.75rem; }
.join[data-platform="desktop"][data-open="choose"] .join-pill { padding: 0.65rem 1.5rem; font-size: 1.2rem; border-color: var(--gold-light); }
button.join-pill:hover { color: var(--cream); background: rgba(255, 247, 230, 0.2); border-color: var(--cream); }
html[data-android-beta="off"] .join[data-platform="android"] .join-main { display: none; }
html[data-android-beta="off"] .join[data-platform="android"] .join-soon-main { display: inline-flex; }
.hero-note {
  display: inline-block; margin: 0.9rem 0 0; padding: 0.2rem 0.8rem; font-size: 1rem; line-height: 1.3; color: var(--cream);
  background: rgba(1, 12, 67, 0.66); border-radius: 999px; /* a scrim: the cobbles are light, so the caption keeps 4.5:1 on any window */
}

/* Wide window: text left, Santa right, towers at the edges. The hero stops a little short of the window's bottom, so the
   next section peeks in and the plain cobbles do not fill the first screen. */
@media (min-aspect-ratio: 5/4) and (min-width: 56rem) {
  .hero { --hero-h: max(100vh - 6rem, 38rem); }
  @supports (height: 100svh) { .hero { --hero-h: max(100svh - 6rem, 38rem); } }
  .hero-inner {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    grid-template-areas: "copy santa" "actions santa"; grid-template-rows: auto auto;
    align-content: end; justify-items: start; column-gap: 2rem; row-gap: 1.6rem; text-align: left;
    width: min(100% - 2 * var(--gutter), 72rem); margin-inline: auto; padding: 4.5rem 0 clamp(2rem, 7svh, 4.5rem);
    --santa-d: clamp(260px, min(36vw, 46svh), 440px);
  }
  .hero-copy { grid-area: copy; align-self: end; }
  .hero-actions { grid-area: actions; align-self: start; }
  .santa { grid-area: santa; justify-self: center; align-self: center; margin: 0; }
  .hero-title img { width: clamp(340px, min(40vw, 62svh), 600px); }
  .hero-tag { max-width: 24ch; font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.3rem); }
  .hero-cta { width: auto; }
  .join { justify-items: start; width: auto; }
  .join .join-main, .join .join-soon-main { width: auto; white-space: nowrap; }
  .join-choose { justify-content: flex-start; }
  .join .join-steps { justify-items: start; text-align: left; width: auto; }
  .join-steps-list { grid-template-columns: repeat(2, minmax(0, 15rem)); gap: 1rem; }
  .join-steps-list li { justify-items: start; }
  .join .join-step { width: auto; white-space: nowrap; }
  .join-stay, .join-steps-title { text-align: left; }
}

/* Small phones in portrait (320x568, 360x640): everything must fit above the fold, caption included. */
@media (max-height: 40rem) and (max-width: 56rem) and (orientation: portrait) {
  .hero { --hero-h: max(100svh, 30rem); }
  .hero-inner { padding-top: 3.6rem; padding-bottom: 0.9rem; --santa-d: clamp(104px, 20svh, 200px); }
  .hero-title img { width: clamp(190px, min(70vw, 27svh), 460px); }
  .hero-tag { margin-top: 0.4rem; font-size: clamp(1.2rem, 5vw, 1.5rem); }
  .join { gap: 0.55rem; }
  .join .btn { min-height: 2.9rem; padding-block: 0.45rem; }
  .join-pill { padding-block: 0.25rem; }
  .hero-note { margin-top: 0.5rem; }
}
/* A phone on its side (844x390): no Santa medallion, text left and buttons right, one short screen. */
@media (max-height: 32rem) and (orientation: landscape) {
  .hero { --hero-h: max(100svh, 21rem); }
  .santa { display: none; }
  .hero-inner {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "copy actions"; grid-template-rows: auto;
    align-content: center; align-items: center; justify-items: start; text-align: left; column-gap: 1.5rem; row-gap: 0;
    width: auto; margin-inline: 0; padding: 3.4rem max(var(--gutter), env(safe-area-inset-right)) 0.8rem max(var(--gutter), env(safe-area-inset-left));
  }
  .hero-copy { grid-area: copy; align-self: center; }
  .hero-actions { grid-area: actions; align-self: center; justify-self: center; }
  .hero-title img { width: clamp(170px, 34vw, 300px); }
  .hero-tag { font-size: clamp(1.15rem, 3.2vw, 1.5rem); max-width: 20ch; }
  .hero-cta { width: min(100%, 20rem); }
  .join { gap: 0.5rem; }
  .join .btn { min-height: 2.8rem; padding-block: 0.4rem; white-space: normal; }
  .hero-note { margin-top: 0.5rem; }
}
html.home { background: #010c43; } /* overscroll above the hero and below the footer is night, not paper */

/* ==== Sections ================================================================================================= */
.section { position: relative; padding: clamp(3.5rem, 2rem + 6vw, 7rem) 0; background: var(--paper); color: var(--ink); }
.section--deep { background: var(--paper-deep); }
.section--night {
  --focus: #ffd978; --ink: var(--cream); --muted: #d9cdb2; --link: #ffb4a8; --link-hover: #ffd2c9;
  color: var(--cream);
  background:
    radial-gradient(ellipse 60% 45% at 85% 0%, var(--aurora), transparent 70%),
    radial-gradient(3px 3px at 12% 22%, #fff 0, rgba(255, 255, 255, 0.55) 40%, transparent 100%), radial-gradient(2.5px 2.5px at 64% 14%, #fff 0, rgba(255, 255, 255, 0.5) 40%, transparent 100%),
    radial-gradient(2.5px 2.5px at 82% 66%, #fff 0, rgba(255, 255, 255, 0.5) 40%, transparent 100%), radial-gradient(3px 3px at 30% 80%, #fff 0, rgba(255, 255, 255, 0.55) 40%, transparent 100%),
    linear-gradient(180deg, #03145b 0%, #0a1d78 100%);
}
.section h2, .section h3 { color: inherit; }
.section-head { max-width: 46rem; margin: 0 auto clamp(2rem, 1rem + 3vw, 3.5rem); text-align: center; }
.section-head .lead, .lead { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem); line-height: 1.4; }
.section-head .lead { margin-inline: auto; }
.section :where(p, li) { max-width: 62ch; }
.section-head p { margin-inline: auto; }

/* ---- Film ---- */
.film { --aurora: rgba(63, 214, 160, 0); } /* flush with the hero's bottom: no glow at its top edge */
.film-grid { display: grid; gap: var(--sp-6); align-items: center; justify-items: center; }
.film-copy { text-align: center; }
.film-copy p { margin-inline: auto; }
.phone--film { --phone-w: min(17.5rem, 72vw); }
.film-sound {
  position: absolute; z-index: 3; top: 0.6rem; left: 50%; translate: -50% 0; display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.9rem; font: 700 1rem/1 var(--serif); color: #3b1f0f; background: var(--cream); border: 2px solid var(--gold-light);
  border-radius: 999px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); cursor: pointer; white-space: nowrap;
}
.film-sound[hidden] { display: none; }
.film-sound:hover { filter: brightness(1.05); }
@media (min-aspect-ratio: 5/4) and (min-width: 56rem) { .film { padding-top: 1.5rem; } }
@media (min-width: 56rem) {
  .film-grid { grid-template-columns: 1.1fr 0.9fr; justify-items: stretch; }
  .film-copy { text-align: left; }
  .film-copy p { margin-inline: 0; }
  .phone-wrap { justify-self: center; }
  .phone--film { --phone-w: 19rem; }
}

/* ---- How it plays ---- */
.beats { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4rem); }
.beat { display: grid; gap: var(--sp-5); justify-items: center; text-align: center; }
.beat-copy h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
.beat-copy p { margin-inline: auto; }
.phone--loop { --phone-w: min(14rem, 62vw); }
@media (min-width: 48rem) {
  .beats { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); align-items: start; }
  .phone--loop { --phone-w: min(15rem, 100%); }
}

/* ---- Worlds ---- */
.worlds { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-6) var(--sp-5); }
.world { flex: 0 1 100%; text-align: left; }
.world-media {
  position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 5; margin-bottom: var(--sp-3);
  background: #050a2b; box-shadow: 0 0 0 2px rgba(242, 194, 90, 0.7), 0 18px 36px -16px rgba(0, 0, 0, 0.7);
}
/* The pictures are 2:3 (1179 x 1768 source rows, shown at their own width); the frame is 4:5. The image box is a little taller than
   the frame so the light parallax has room to drift it, and --pos says which part of the picture the frame shows. */
.world-media img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; object-position: 50% var(--pos, 50%); display: block; }
.world-media picture { display: contents; }
.world h3 { font-size: 1.5rem; margin-bottom: 0.2rem; }
.world p { margin: 0; font-size: 1.05rem; color: var(--muted); }
/* Where each picture is cropped (the part of the image kept when the box is cut): the ground edge for the worlds that start on
   it, the middle for the others. */
.focus-village, .focus-grotto, .focus-borough, .focus-fjord { --pos: 100%; }
.focus-workshop { --pos: 40%; } .focus-conservatory { --pos: 55%; } .focus-orrery { --pos: 50%; }
@media (min-width: 40rem) { .world { flex-basis: calc(50% - var(--sp-5) / 2); } }
@media (min-width: 64rem) { .world { flex-basis: calc(25% - var(--sp-5) * 3 / 4); } }

/* light parallax inside the picture frames: the picture drifts a little as the frame crosses the screen */
/* The timeline is named on the frame (overflow: hidden): view() on the <img> itself resolves to that frame and never moves. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-drift] { view-timeline: --drift block; }
    [data-drift] img { animation: drift-img linear both; animation-timeline: --drift; animation-range: cover; }
  }
}
@keyframes drift-img { from { transform: translate3d(0, 5%, 0); } to { transform: translate3d(0, -5%, 0); } }
[data-drift].drift-js img { transform: translate3d(0, calc(var(--v, 0) * -5%), 0); }
@media (prefers-reduced-motion: reduce) { [data-drift] img { animation: none !important; transform: none !important; } }

/* ---- Music ---- */
/* Its own shade of blue between the worlds' royal blue and the paper sections: a deep indigo with a violet hint, like the paintings'
   evening skies, a soft pink cloud glow and a few snow sparkles (owner, 2026-10-20: another blue, not the worlds' one, not green). */
.music {
  --glow: rgba(242, 155, 192, 0.2);
  background:
    radial-gradient(ellipse 60% 45% at 10% 92%, var(--glow), transparent 70%),
    radial-gradient(ellipse 55% 40% at 92% 6%, rgba(150, 140, 255, 0.18), transparent 70%),
    radial-gradient(3px 3px at 78% 9%, #fff 0, rgba(255, 255, 255, 0.55) 40%, transparent 100%), radial-gradient(2.5px 2.5px at 24% 31%, #fff 0, rgba(255, 255, 255, 0.5) 40%, transparent 100%),
    radial-gradient(2.5px 2.5px at 91% 57%, #fff 0, rgba(255, 255, 255, 0.5) 40%, transparent 100%), radial-gradient(3px 3px at 47% 93%, #fff 0, rgba(255, 255, 255, 0.55) 40%, transparent 100%),
    linear-gradient(180deg, #24187a 0%, #150d4e 100%);
}
.music-copy { max-width: 48rem; margin: 0 auto clamp(2rem, 1rem + 3vw, 3.5rem); text-align: center; }
.music-copy p { margin-inline: auto; }
.music-copy .lead { margin-bottom: var(--sp-5); font-size: clamp(1.15rem, 1.05rem + 0.55vw, 1.45rem); text-wrap: pretty; } /* the longest lead on the page */
/* The player is as wide as the content (16:9, so no layout shift); it carries the gold ring of the world pictures. The ring sits on the video itself, not on
   a clipping frame, so the keyboard focus ring is not cut off. */
.music-player { margin: 0; }
.music-player video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius); background: #050a2b;
  box-shadow: 0 0 0 2px rgba(242, 194, 90, 0.7), 0 18px 36px -16px rgba(0, 0, 0, 0.7), 0 0 60px -10px rgba(242, 155, 192, 0.22);
}
.music-player video:focus-visible { border-radius: var(--radius); } /* the page-wide focus rule would square it to 6px */

/* ---- Suits ---- */
.suits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.suit { display: grid; align-content: start; justify-items: center; text-align: center; padding: var(--sp-4) var(--sp-3) var(--sp-5); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.suit img { width: auto; height: 9.6rem; margin-bottom: var(--sp-2); filter: drop-shadow(0 8px 10px rgba(59, 31, 15, 0.25)); }
.suit h3 { font-size: 1.45rem; margin-bottom: 0; }
.suit .suit-power { margin: 0.1rem 0 0.4rem; font-weight: 700; color: var(--link); font-size: 1.1rem; }
.suit p { margin: 0 0 0; font-size: 1rem; line-height: 1.35; color: var(--muted); }
.suit .suit-power + p { margin-top: 0; }
.suit:last-child { grid-column: 1 / -1; }
@media (min-width: 40rem) { .suits { grid-template-columns: repeat(4, 1fr); } .suit:last-child { grid-column: auto; } }
@media (min-width: 72rem) { .suits { grid-template-columns: repeat(7, 1fr); gap: var(--sp-3); } .suit { padding-inline: 0.6rem; } .suit img { height: 8.6rem; } .suit h3 { font-size: 1.3rem; } .suit p { font-size: 0.95rem; } }

/* ---- Story ---- */
.story-grid, .endless-grid { display: grid; gap: var(--sp-7); align-items: center; }
.pages { list-style: none; margin: 0; padding: 0 0.4rem; columns: 2; column-gap: var(--sp-4); }
.page { break-inside: avoid; margin: 0 0 var(--sp-4); padding: 0.45rem; background: #fffaf0; border-radius: 0.5rem; box-shadow: 0 10px 26px -10px rgba(59, 31, 15, 0.55); }
.page img { display: block; width: 100%; height: auto; border-radius: 0.25rem; }
.page--a { transform: rotate(-2deg); } .page--b { transform: rotate(1.6deg); } .page--c { transform: rotate(1.2deg); } .page--d { transform: rotate(-1.8deg); }
@media (min-width: 56rem) { .story-grid { grid-template-columns: 0.95fr 1.05fr; } .pages { padding: 0 1rem; column-gap: var(--sp-5); } }

/* ---- Endless ---- */
.ticks { list-style: none; padding: 0; margin: var(--sp-4) 0 0; display: grid; gap: var(--sp-3); }
.ticks li { position: relative; padding-left: 2rem; }
.ticks li::before { content: ""; position: absolute; left: 0.1rem; top: 0.4em; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe9a6, var(--gold)); box-shadow: 0 0 0 2px rgba(201, 138, 26, 0.35); }
.shots { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; align-items: flex-start; gap: var(--sp-5); }
.phone--shot .screen { aspect-ratio: 9 / 16; }
.phone--shot { --phone-w: min(14rem, 40vw); }
.phone--shot-2 { margin-top: 2.5rem; }
@media (min-width: 56rem) { .endless-grid { grid-template-columns: 1fr 1fr; } .endless-copy { order: 2; } .phone--shot { --phone-w: 15.5rem; } }

/* ---- Beta and FAQ ---- */
.beta { text-align: center; }
.beta-inner { display: grid; justify-items: center; }
.beta-inner .lead { max-width: 36rem; margin-inline: auto; }
.beta-cta { margin-top: var(--sp-4); }
.beta .hero-note { text-align: center; }
@media (min-width: 40rem) { .beta-cta .join-steps-list { grid-template-columns: repeat(2, minmax(0, 16rem)); gap: 1.2rem; } .beta-cta .join .join-step { width: 100%; white-space: normal; }
  .beta-cta { width: auto; } .beta-cta .join { justify-items: center; width: auto; } .beta-cta .join .btn { white-space: nowrap; width: auto; } }
.faq-wrap { max-width: 46rem; }
.faq-wrap h2 { text-align: center; margin-bottom: var(--sp-5); }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); margin: 0 0 var(--sp-3); padding: 0 var(--sp-4); box-shadow: var(--shadow); }
.faq summary { font-weight: 700; font-size: 1.2rem; padding-block: 0.9rem; } /* the box, the marker and the chevron: css/site.css */
.faq details[open] { padding-bottom: 0.2rem; }
.faq details p { margin: 0 0 var(--sp-3); }

/* Android visitors with the steps shown: a smaller Santa so the two steps fit above the fold */
html[data-android-beta="on"] .hero-inner:has(.join[data-platform="android"]) { --santa-d: clamp(100px, 17svh, 180px); }
/* Wide hero with the Android steps shown (desktop): a smaller logo and tighter steps so the whole stack still fits under the header */
@media (min-aspect-ratio: 5/4) and (min-width: 56rem) {
  html[data-android-beta="on"] .hero-inner:has(.join:not([data-platform="ios"])) { row-gap: 1rem; }
  html[data-android-beta="on"] .hero-inner:has(.join:not([data-platform="ios"])) .hero-title img { width: clamp(280px, min(34vw, 44svh), 520px); }
  html[data-android-beta="on"] .hero-inner:has(.join:not([data-platform="ios"])) .hero-tag { margin-top: 0.4rem; }
  html[data-android-beta="on"] .hero-inner:has(.join:not([data-platform="ios"])) .join { gap: 0.55rem; }
  .hero .join-steps-title { display: none; }
  .hero .join-steps-list li span { font-size: 0.88rem; }
}
/* In the beta section the steps are centred */
.beta-cta .join .join-steps { justify-items: center; text-align: center; width: 100%; }
.beta-cta .join-steps-list li { justify-items: center; }
.beta-cta .join-stay, .beta-cta .join-steps-title { text-align: center; }