/* ============================================================================
   theme.css — PER-APP palette + brand overrides (the only design file a new
   site rewrites). tokens.css supplies structure; this supplies colour and the
   handful of brand-distinguishing knobs (--display serif, --radius, hero
   texture, chip style). Light + dark from the brand-doc palette columns.

   This is the TEMPLATE default theme: the real **oomny** brand — the sky-blue
   cloud-and-person identity (#3aa7df) on clean cool neutrals. scaffold.sh
   leaves this file for a new app to re-skin from its own docs/brand.md palette.

   Brand: oomny blue #3aa7df. Because the fill blue is only ~2.7:1 on white, the
   contract's --accent-text escape hatch carries a darkened blue tuned to AA
   (≥4.5:1) for links + small text; the bright blue stays for fills, the cloud
   mark and large accents. Accent-tinted surfaces use color-mix(var(--accent))
   so re-hueing cascades to the halo + chips automatically.
   ============================================================================ */

/* ---- light ---- */
:root,
[data-theme="light"] {
  --bg:#f5f7f9; --bg-2:#e9eef2; --surface:#ffffff;
  --text:#14191d; --text-soft:#586670;
  --accent:#3aa7df; --accent-2:#5bb8e8; --accent-ink:#ffffff;
  --accent-text:#0e6f9e;                 /* darkened oomny blue, AA ≈5.2:1 on --bg / 5.5:1 on white */
  --line:#dde4e9;
  --verified:#2f8f5e; --caution:#b07d22; --caution-text:#8a6014;
  --halo: radial-gradient(58% 55% at 80% -10%,
            color-mix(in oklab, var(--accent) 16%, transparent), transparent 70%);
}

/* ---- dark (deep cool palette, faint blue atmosphere) ---- */
[data-theme="dark"] {
  --bg:#0b1117; --bg-2:#111a22; --surface:#16212b;
  --text:#eaf1f6; --text-soft:#94a5b0;
  --accent:#54b6ec; --accent-2:#76c6f0; --accent-ink:#07131c;
  --accent-text:#6cc3ef;                 /* AA ≈8.5:1 on --bg */
  --line:#23323f;
  --verified:#7fc9a3; --caution:#d9b36a; --caution-text:#e0bd79;
  --chip-bg:#1c2935;
  --halo: radial-gradient(58% 55% at 80% -10%,
            color-mix(in oklab, var(--accent) 22%, transparent), transparent 72%);
}

/* Follow the OS when the document hasn't pinned a theme via [data-theme]. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:#0b1117; --bg-2:#111a22; --surface:#16212b;
    --text:#eaf1f6; --text-soft:#94a5b0;
    --accent:#54b6ec; --accent-2:#76c6f0; --accent-ink:#07131c;
    --accent-text:#6cc3ef;
    --line:#23323f;
    --verified:#7fc9a3; --caution:#d9b36a; --caution-text:#e0bd79;
    --chip-bg:#1c2935;
    --halo: radial-gradient(58% 55% at 80% -10%,
              color-mix(in oklab, var(--accent) 22%, transparent), transparent 72%);
  }
}

/* The header sets the NAME as the app's wordmark (seven wooden toy letters, one still composed
   from shared/Art) instead of type — the same second mark BrandWordmark draws in the app. The
   design system's .brand>img rule squares every header image to the 30px icon, so the wordmark
   carries its own class and keeps its measured aspect (1474:384). */
.brand img.wordmark{width:auto;height:26px;border-radius:0}

[data-launch] > .launch-live, [data-launch] > .launch-prelaunch{ display:flex; gap:.9rem;
  flex-wrap:wrap; align-items:center; }
[data-launch="prelaunch"] .launch-live{ display:none; }
[data-launch="live"] .launch-prelaunch{ display:none; }
[data-store-badge="prelaunch"], [data-store-badge="absent"]{ display:none; }
.mac-edition{display:grid;gap:2rem;grid-template-columns:1fr 1.5fr;align-items:center}
.mac-edition figure{margin:0}
.mac-edition video{display:block;width:100%;height:auto;border-radius:12px}
.mac-edition figcaption{margin-top:.75rem;font-size:.875rem;color:var(--text-soft)}
@media(max-width:760px){.mac-edition{grid-template-columns:1fr}}

/* Rookaby's landscape phones need wider gallery cells than the portrait template. */
.section .gallery{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.gallery .dv-iphone.dv-landscape{--dv-scale:.34}
.showcase .device-duo .dv-ipad{transform:rotate(calc(var(--rot) * -1.2))}
.device-duo .dv-iphone.dv-landscape{right:var(--sp-3);transform:rotate(calc(var(--rot) * 1.6))}
@media(max-width:820px){
  .section .gallery{grid-template-columns:none}
  .gallery .dv-iphone.dv-landscape{--dv-scale:.26}
}
@media(max-width:560px){
  .showcase .device-duo .dv-ipad{transform:rotate(0deg)}
  .device-duo .dv-iphone.dv-landscape{right:0}
}
@media(max-width:360px){
  .showcase .device-duo .dv-ipad{--dv-scale:.4}
  .device-duo .dv-iphone.dv-landscape{--dv-scale:.24;right:0}
  .gallery .dv-iphone.dv-landscape{--dv-scale:.22}
}


/* ============================================================================
   "De parade" (owner, 1 October 2026: the picture-book garden was not beautiful; take cues from
   Awwwards). Oversized rounded type on flat colour fields. The six cream pieces stand on plinths
   in their own base-ring colours from the game (rookaby.tokens.json), real game captures drift
   past in one strip, and the four ideas stack as colour cards while you scroll.
   No wood grain, no paper texture, no gradients: the colour belongs to the pieces.
   Scoped to .storybook-site. Light and dark share the colour fields; only the ground flips.
   ============================================================================ */
body.storybook-site {
  --rb-ink: #141413; --rb-paper: #ffffff; --rb-soft: #4b4a45;
  --rb-sky: #5bb0e3; --rb-sun: #f5c242; --rb-meadow: #7fc46f; --rb-rose: #e0937a;
  --rb-lilac: #ae93e3; --rb-tangerine: #f39a52; --rb-night: #1c2440;
  --rb-ground: var(--rb-paper); --rb-text: var(--rb-ink); --rb-text-soft: var(--rb-soft);
  --rb-line: #e4e2da;
  --rb-display: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Avenir Next Rounded",
    system-ui, sans-serif;
  --rb-gutter: max(20px, calc((100vw - 1240px) / 2));
  --rb-spring: cubic-bezier(.3, 1.6, .5, 1);
  --bg: var(--rb-ground); --bg-2: #f3f2ee; --surface: var(--rb-paper);
  --text: var(--rb-text); --text-soft: var(--rb-text-soft); --line: var(--rb-line);
  --accent: var(--rb-ink); --accent-text: var(--rb-ink); --accent-ink: var(--rb-paper);
  --display: var(--rb-display);
  margin: 0; overflow-x: clip; background: var(--rb-ground); color: var(--rb-text);
  font-size: 18px; color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  body.storybook-site {
    --rb-ground: #12172b; --rb-text: #f6f4ee; --rb-text-soft: #c4c6d2; --rb-line: #2c3352;
    --bg-2: #1c2440; --surface: #1c2440; color-scheme: dark;
  }
}
.storybook-site h1, .storybook-site h2, .storybook-site h3 { font-family: var(--rb-display); }
.storybook-site main { width: 100%; max-width: none; margin: 0; padding: 0; }
.storybook-site :focus-visible { outline: 3px solid currentColor; outline-offset: 4px;
  border-radius: 6px; }

/* ---- header ---- */
.storybook-site .nav { position: relative; z-index: 8; display: flex; flex-wrap: wrap;
  align-items: center; gap: 12px 28px; width: auto; max-width: none; margin: 0;
  padding: 18px var(--rb-gutter); border: 0; background: transparent; }
.storybook-site .nav .brand { margin-inline-end: auto; min-height: 44px; }
.storybook-site .brand img:first-child { display: none; }
.storybook-site .brand img.wordmark { height: 46px; max-width: 190px; object-fit: contain; }
.storybook-site .nav > nav:not([data-language-picker]) { display: flex; flex-wrap: wrap;
  gap: 4px 28px; margin: 0; font-size: 17px; }
.storybook-site .nav > nav:not([data-language-picker]) a { display: inline-flex;
  align-items: center; min-height: 44px; color: var(--rb-text); font-weight: 700;
  text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 78% / 0 3px
  no-repeat; transition: background-size .25s ease; }
.storybook-site .nav > nav:not([data-language-picker]) a:hover { background-size: 100% 3px; }
body.storybook-site:has(.storybook) .nav { position: absolute; inset: 0 0 auto; }
body.storybook-site:has(.storybook) .nav > nav:not([data-language-picker]) a { color: var(--rb-ink); }

/* ---- buttons: a chunky toy key that presses down ---- */
.storybook-site .story-button, .storybook-site .btn.primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 60px; padding: 14px 30px; border: 0; border-radius: 18px;
  background: var(--rb-ink); color: var(--rb-paper); font: 800 20px/1.1 var(--rb-display);
  text-decoration: none; box-shadow: 0 6px 0 #000; transform: translateY(0);
  transition: transform .15s var(--rb-spring), box-shadow .15s ease; }
.storybook-site .story-button:hover, .storybook-site .btn.primary:hover {
  background: var(--rb-ink); color: var(--rb-paper); transform: translateY(-2px);
  box-shadow: 0 8px 0 #000; }
.storybook-site .story-button:active, .storybook-site .btn.primary:active {
  transform: translateY(5px); box-shadow: 0 1px 0 #000; }
.storybook-site .story-button:focus-visible { outline-color: var(--rb-paper);
  box-shadow: 0 6px 0 #000, 0 0 0 6px var(--rb-ink); }
@media (prefers-color-scheme: dark) {
  .storybook-site .btn.primary { background: var(--rb-sun); color: var(--rb-ink);
    box-shadow: 0 6px 0 #b98a14; }
  .storybook-site .btn.primary:hover { background: var(--rb-sun); color: var(--rb-ink);
    box-shadow: 0 8px 0 #b98a14; }
}

/* ---- the hero: a sky field, huge words, the parade standing on the bottom edge ---- */
.storybook-site .storybook { position: relative; isolation: isolate; overflow: clip;
  width: 100%; max-width: none; min-height: min(100svh, 64rem); margin: 0; border-radius: 0;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  grid-template-rows: 1fr auto; grid-template-areas: "copy art" "parade parade"; align-items: center;
  gap: 0 clamp(24px, 4vw, 64px); padding: clamp(96px, 12vh, 128px) var(--rb-gutter) 0;
  background: var(--rb-sky); color: var(--rb-ink); }
.storybook-site .storybook-copy { grid-area: copy; position: relative; z-index: 2;
  padding: 0; border: 0; background: none; box-shadow: none; animation: none; }
.storybook-site .storybook-copy::before, .storybook-site .storybook-copy::after { content: none; }
.storybook-site .storybook h1 { max-width: 11.5ch; margin: 0; color: var(--rb-ink);
  font: 900 clamp(44px, min(6.6vw, 11vh), 112px)/.92 var(--rb-display); letter-spacing: -.045em;
  text-shadow: none; text-wrap: balance; overflow-wrap: break-word; hyphens: manual; }
.storybook-site .storybook-copy > p { max-width: 26ch; margin: clamp(20px, 2.4vw, 32px) 0
  clamp(26px, 3vw, 40px); color: var(--rb-ink); font: 600 clamp(20px, 1.9vw, 27px)/1.35
  var(--rb-display); }
.storybook-site .storybook-art { grid-area: art; position: relative; z-index: 1; height: auto;
  margin: 0; transform: none; display: flex; justify-content: center; align-self: end; }
.rb-screen { width: min(100%, 300px, 30vh); margin: 0 0 -5rem; padding: 10px; background: var(--rb-paper);
  border-radius: 34px; transform: rotate(4deg); box-shadow: 0 30px 60px -24px #0b3a5c99;
  transition: transform .5s var(--rb-spring); }
.rb-screen:hover { transform: rotate(1deg) translateY(-8px); }
.storybook-site .rb-screen img.game-home { display: block; width: 100%; height: auto;
  border-radius: 25px; outline: 0; box-shadow: none; }
.rb-parade { grid-area: parade; position: relative; z-index: 3; display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end;
  gap: clamp(6px, 1.2vw, 18px); margin: clamp(8px, 2vw, 24px) 0 0; padding: 0; list-style: none; }
.rb-parade li { --h: 6rem; display: flex; flex-direction: column; align-items: center;
  margin: 0; }
.rb-parade li::after { content: ""; align-self: stretch; height: var(--h);
  border-radius: clamp(14px, 2vw, 28px) clamp(14px, 2vw, 28px) 0 0; background: var(--c); }
.rb-parade img { position: relative; z-index: 1; display: block; width: 92%; height: auto;
  margin-bottom: -8.5%; transform-origin: 50% 92%;
  filter: drop-shadow(0 10px 8px #0003);
  transition: transform .45s var(--rb-spring); }
.rb-parade li:hover img { transform: translateY(-14px) rotate(-4deg); }
.rb-pawn { --c: var(--rb-meadow); } .rb-rook { --c: var(--rb-paper); }
.rb-knight { --c: var(--rb-rose); } .rb-bishop { --c: var(--rb-lilac); }
.rb-queen { --c: var(--rb-tangerine); } .rb-king { --c: var(--rb-sun); }
.rb-parade .rb-pawn { --h: clamp(44px, min(5.5vw, 8.8vh), 96px); }
.rb-parade .rb-rook { --h: clamp(64px, min(8vw, 12.8vh), 136px); }
.rb-parade .rb-knight { --h: clamp(36px, min(4.5vw, 7.2vh), 76px); }
.rb-parade .rb-bishop { --h: clamp(80px, min(10vw, 16.0vh), 168px); }
.rb-parade .rb-queen { --h: clamp(56px, min(7vw, 11.2vh), 116px); }
.rb-parade .rb-king { --h: clamp(96px, min(12vw, 19.2vh), 200px); }
.rb-parade .rb-rook::after { background: var(--rb-paper); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes rb-breathe { 50% { transform: scale(1.025, .975); } }
  @keyframes rb-rise { from { transform: translateY(40%); opacity: 0; } }
  .rb-parade li { animation: rb-rise .9s var(--rb-spring) both; }
  .rb-parade li:nth-child(2) { animation-delay: .06s; } .rb-parade li:nth-child(3) { animation-delay: .12s; }
  .rb-parade li:nth-child(4) { animation-delay: .18s; } .rb-parade li:nth-child(5) { animation-delay: .24s; }
  .rb-parade li:nth-child(6) { animation-delay: .3s; }
  .rb-parade li:not(:hover) img { animation: rb-breathe 3.2s ease-in-out infinite; }
  .rb-parade li:nth-child(odd):not(:hover) img { animation-delay: -1.6s; }
}

/* ---- the statement, with two friends at the edges ---- */
.storybook-site .story-intro { position: relative; overflow: clip; max-width: none; min-height: 0;
  margin: 0; padding: clamp(96px, 13vw, 180px) var(--rb-gutter); text-align: center;
  background: var(--rb-ground); }
.storybook-site .story-intro::before { content: none; }
.storybook-site .story-intro > h2 { position: relative; z-index: 1; max-width: 15ch;
  margin: 0 auto; color: var(--rb-text); font: 900 clamp(38px, 6.2vw, 96px)/.98 var(--rb-display);
  letter-spacing: -.04em; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
.storybook-site .story-intro > p { position: relative; z-index: 1; max-width: 34ch;
  margin: 28px auto 24px; color: var(--rb-text-soft); font: 600 clamp(19px, 1.7vw, 24px)/1.45
  var(--rb-display); }
.storybook-site .story-intro > a { position: relative; z-index: 1; display: inline-block;
  min-height: 44px; padding: 0; color: var(--rb-text);
  background: none; box-shadow: none; font: 800 clamp(22px, 2vw, 28px)/1.2 var(--rb-display);
  text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.storybook-site .story-intro > a:hover { text-decoration-color: var(--rb-tangerine); }
.storybook-site .story-friend { position: absolute; z-index: 0; top: auto; bottom: clamp(24px, 4vw, 64px);
  width: clamp(120px, 15vw, 230px); height: auto; filter: drop-shadow(0 14px 12px #0002);
  animation: none; }
.storybook-site .story-friend-rook { left: auto; inset-inline-start: var(--rb-gutter);
  transform: rotate(-8deg); }
.storybook-site .story-friend-knight { right: auto; inset-inline-end: var(--rb-gutter);
  transform: rotate(8deg) scaleX(-1); }

/* ---- a strip of real captures drifting past on a sun field ---- */
.rb-marquee { overflow: hidden; padding-block: clamp(48px, 6vw, 88px); background: var(--rb-sun); }
.rb-track { display: flex; width: max-content; }
.rb-run { display: flex; gap: clamp(18px, 2.4vw, 32px); padding-inline-end: clamp(18px, 2.4vw, 32px); }
.rb-run img { display: block; width: clamp(150px, 17vw, 240px); height: auto; border: 7px solid
  var(--rb-paper); border-radius: 26px; background: var(--rb-paper); }
.rb-run img:nth-child(odd) { transform: rotate(-2.5deg); }
.rb-run img:nth-child(even) { transform: rotate(2deg) translateY(18px); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes rb-drift { to { transform: translateX(-50%); } }
  .rb-track { animation: rb-drift 70s linear infinite; }
  .rb-marquee:hover .rb-track { animation-play-state: paused; }
  [dir="rtl"] .rb-track { animation-direction: reverse; }
}
@media (prefers-reduced-motion: reduce) {
  .rb-marquee { overflow-x: auto; }
  .rb-run + .rb-run { display: none; }
  .rb-run { padding-inline: var(--rb-gutter); }
}

/* ---- the four ideas, stacked colour cards ---- */
.storybook-site .story-features { width: 100%; max-width: none; margin: 0;
  padding: clamp(88px, 11vw, 160px) var(--rb-gutter) clamp(64px, 8vw, 120px);
  background: var(--rb-ground); }
.storybook-site .story-features > h2 { display: block; width: auto; max-width: 12ch;
  margin: 0 0 clamp(36px, 5vw, 72px); padding: 0; border: 0; background: none; box-shadow: none;
  color: var(--rb-text); text-align: start; text-shadow: none;
  font: 900 clamp(44px, 7vw, 116px)/.94 var(--rb-display); letter-spacing: -.045em; }
.storybook-site .story-features ul { display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px); margin: 0; padding: 0; list-style: none; }
.storybook-site .story-features li { --c: var(--rb-sky); position: sticky;
  top: calc(24px + var(--i) * 18px); min-height: min(30rem, 72vh); margin: 0; padding:
  clamp(28px, 4.5vw, 72px); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  grid-template-rows: auto 1fr; gap: 20px clamp(24px, 5vw, 80px); align-content: start;
  overflow: hidden; border: 0; border-radius: clamp(28px, 3.4vw, 48px); background: var(--c);
  color: var(--rb-ink); box-shadow: 0 -12px 40px -24px #0006; transform: none; }
.storybook-site .story-features li::before { content: none; }
.storybook-site .story-features li::after { content: ""; grid-column: 2; grid-row: 1 / span 2;
  align-self: end; width: min(100%, 300px); aspect-ratio: 10 / 16; justify-self: center;
  margin-bottom: clamp(-160px, -12vw, -72px); border: 8px solid var(--rb-paper);
  border-radius: 30px; background: var(--rb-paper) var(--scene) 50% 0 / cover no-repeat;
  transform: rotate(var(--r)); box-shadow: 0 24px 50px -20px #0005; }
.storybook-site .story-features li:nth-child(1) { --i: 0; --c: var(--rb-meadow); --r: -4deg;
  --scene: url(shot-meet.webp); }
.storybook-site .story-features li:nth-child(2) { --i: 1; --c: var(--rb-lilac); --r: 3deg;
  --scene: url(shot-stories.webp); }
.storybook-site .story-features li:nth-child(3) { --i: 2; --c: var(--rb-tangerine); --r: -3deg;
  --scene: url(shot-puzzles.webp); }
.storybook-site .story-features li:nth-child(4) { --i: 3; --c: var(--rb-sky); --r: 4deg;
  --scene: url(shot-turns.webp); }
.storybook-site .story-features li:hover { transform: none; }
.storybook-site .story-features li h3 { grid-column: 1; margin: 0; padding: 0; border: 0;
  background: none; color: var(--rb-ink); text-shadow: none; max-width: 12ch;
  font: 900 clamp(36px, 5vw, 80px)/.96 var(--rb-display); letter-spacing: -.04em;
  overflow-wrap: break-word; hyphens: auto; }
.storybook-site .story-features li p { grid-column: 1; align-self: end; max-width: 30ch; margin: 0;
  padding: 0; background: none; color: var(--rb-ink); font: 600 clamp(19px, 1.7vw, 24px)/1.45
  var(--rb-display); }

/* ---- spoken languages: the night field ---- */
.storybook-site .language-update { position: relative; width: 100%; max-width: none; margin: 0;
  padding: clamp(80px, 10vw, 150px) var(--rb-gutter); border-radius: 0; text-align: start;
  overflow: clip; background: var(--rb-night); color: #f6f4ee; }
.storybook-site .language-update::after { content: ""; position: absolute; z-index: 0;
  inset-block: 12% 0; inset-inline-end: var(--rb-gutter); width: min(40%, 520px);
  background: url(cast-queen.webp) 0 100% / 50% auto no-repeat,
    url(cast-king.webp) 100% 100% / 58% auto no-repeat;
  filter: drop-shadow(0 20px 24px #0008); pointer-events: none; }
.storybook-site .language-update > * { position: relative; z-index: 1; }
.storybook-site .language-update h2 { display: block; width: auto; max-width: 14ch; margin: 0;
  padding: 0; border: 0; background: none; box-shadow: none; color: #fff; text-shadow: none;
  font: 900 clamp(40px, 6.4vw, 104px)/.96 var(--rb-display); letter-spacing: -.04em;
  overflow-wrap: break-word; hyphens: auto; }
.storybook-site .language-update > p { max-width: 36ch; margin: 28px 0 0; color: #d5d8e6;
  font: 600 clamp(19px, 1.7vw, 24px)/1.5 var(--rb-display); }

/* ---- footer ---- */
.storybook-site footer { width: auto; margin: 0; padding: 28px var(--rb-gutter) 40px;
  border: 0; background: var(--rb-night); color: #d5d8e6; font-size: 15px; }
.storybook-site footer .inner { display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 12px 24px; width: 100%; max-width: none; padding: 24px 0 0;
  border-top: 1px solid #ffffff2b; }
.storybook-site footer strong { color: #fff; }
.storybook-site footer .links { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.storybook-site footer a { display: inline-flex; align-items: center; min-height: 44px;
  color: #fff; text-underline-offset: 5px; }

/* ---- inner pages: the same colour fields, calmer ---- */
.storybook-site .story-detail { --band: var(--rb-sky); display: flex; flex-direction: column;
  width: auto; max-width: none; margin: 0; padding: 0 var(--rb-gutter) clamp(64px, 8vw, 120px); }
body.storybook-site:has(.frow) .story-detail { --band: var(--rb-meadow); }
body.storybook-site:has(.faq) .story-detail { --band: var(--rb-lilac); }
body.storybook-site:has(.price) .story-detail { --band: var(--rb-sun); }
body.storybook-site:has(.story-detail) .nav { background: var(--band, var(--rb-sky)); }
body.storybook-site:has(.frow) .nav { --band: var(--rb-meadow); }
body.storybook-site:has(.faq) .nav { --band: var(--rb-lilac); }
body.storybook-site:has(.price) .nav { --band: var(--rb-sun); }
body.storybook-site:has(.story-detail) .nav > nav:not([data-language-picker]) a { color: var(--rb-ink); }
.storybook-site .story-detail > h1 { align-self: stretch; margin: 0 calc(-1 * var(--rb-gutter));
  padding: clamp(32px, 6vw, 96px) var(--rb-gutter) clamp(48px, 7vw, 112px); border: 0;
  border-radius: 0 0 clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px); background: var(--band);
  color: var(--rb-ink); text-shadow: none; box-shadow: none;
  font: 900 clamp(52px, 9vw, 150px)/.92 var(--rb-display); letter-spacing: -.05em;
  overflow-wrap: break-word; hyphens: auto; }
.storybook-site .story-detail > .language-update { order: 100; width: auto;
  margin: clamp(48px, 6vw, 96px) 0 0; padding: clamp(48px, 7vw, 96px) clamp(28px, 6vw, 88px);
  border-radius: clamp(28px, 4vw, 56px); }
.storybook-site .story-detail .wrap { width: 100%; max-width: none; padding: 0; }
.storybook-site .story-detail .section { padding-block: clamp(48px, 6vw, 88px) 0; }
.storybook-site .story-detail .section-head { max-width: 46rem; margin-bottom: clamp(24px, 4vw, 56px); }
.storybook-site .story-detail .section-head h2 { margin: 8px 0 18px; color: var(--rb-text);
  font: 900 clamp(32px, 4.2vw, 64px)/1 var(--rb-display); letter-spacing: -.035em;
  text-wrap: balance; }
.storybook-site .story-detail .section-head p { color: var(--rb-text-soft); font-size: 20px;
  line-height: 1.55; }
.storybook-site .story-detail .eyebrow { display: block; padding: 0; border-radius: 0;
  background: none; color: var(--rb-text-soft); font: 800 17px/1.3 var(--rb-display);
  letter-spacing: 0; text-transform: none; }
.storybook-site .story-detail .frow { --c: var(--rb-sky); display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 88px);
  align-items: center; padding-block: clamp(28px, 4vw, 56px); border: 0; }
.storybook-site .story-detail .frow:nth-child(5n + 2) { --c: var(--rb-meadow); }
.storybook-site .story-detail .frow:nth-child(5n + 3) { --c: var(--rb-lilac); }
.storybook-site .story-detail .frow:nth-child(5n + 4) { --c: var(--rb-tangerine); }
.storybook-site .story-detail .frow:nth-child(5n + 5) { --c: var(--rb-rose); }
.storybook-site .story-detail .frow:nth-child(5n + 6) { --c: var(--rb-sun); }
.storybook-site .story-detail .frow:nth-child(odd) .fmedia { order: 2; }
.storybook-site .story-detail .frow:nth-child(even) .fmedia { order: 0; }
.storybook-site .story-detail .fmedia:has(img) { display: grid; place-items: center; padding:
  clamp(28px, 4vw, 56px); overflow: hidden; aspect-ratio: auto; border: 0;
  border-radius: clamp(28px, 3.4vw, 48px); background: var(--c); }
.storybook-site .story-detail .fmedia:has(img)::before { content: none; }
.storybook-site .story-detail .frow .fmedia img { position: static; display: block;
  width: min(100%, 280px); height: auto; margin: 0; border: 8px solid var(--rb-paper);
  border-radius: 28px; box-shadow: 0 24px 50px -20px #0005; transform: rotate(-3deg);
  transition: transform .45s var(--rb-spring); }
.storybook-site .story-detail .frow:nth-child(even) .fmedia img { transform: rotate(3deg); }
.storybook-site .story-detail .frow .fmedia img:hover { transform: rotate(0deg) scale(1.03); }
.storybook-site .story-detail .fbody { min-width: 0; max-width: 34rem; }
.storybook-site .story-detail .fbody h3 { margin: 0 0 16px; color: var(--rb-text);
  font: 900 clamp(30px, 3.4vw, 52px)/1 var(--rb-display); letter-spacing: -.035em; }
.storybook-site .story-detail .fbody p { color: var(--rb-text-soft); font-size: 19px; line-height: 1.6; }
.storybook-site .story-detail .more { display: inline-flex; align-items: center; min-height: 44px;
  padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--rb-text);
  font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 6px; }
.storybook-site .story-detail .gallery { display: grid; grid-template-columns: minmax(0, 1fr);
  justify-items: center; gap: 24px; }
.storybook-site .story-detail .gallery figure { width: min(100%, 340px); margin: 0; }
.storybook-site .story-detail .gallery img { display: block; width: 100%; height: auto;
  border: 8px solid var(--rb-paper); border-radius: 28px; box-shadow: 0 24px 50px -20px #0005;
  transform: rotate(-2deg); }
.storybook-site .story-detail .gallery figcaption { margin-top: 18px; text-align: center;
  color: var(--rb-text-soft); }
/* For parents: four promises as colour tiles, then the questions. */
.storybook-site .story-detail .strip { margin: clamp(48px, 6vw, 88px) 0 0; padding: 0;
  border: 0; border-radius: 0; background: none; }
.storybook-site .story-detail .strip .wrap { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 16px; }
.storybook-site .story-detail .strip .item { --c: var(--rb-meadow); display: block;
  min-height: 11rem; padding: 28px; border-radius: 32px; background: var(--c); color: var(--rb-ink);
  font: 600 19px/1.45 var(--rb-display); }
.storybook-site .story-detail .strip .item:nth-child(2) { --c: var(--rb-sun); }
.storybook-site .story-detail .strip .item:nth-child(3) { --c: var(--rb-rose); }
.storybook-site .story-detail .strip .item:nth-child(4) { --c: var(--rb-sky); }
.storybook-site .story-detail .strip .item b { display: block; margin-bottom: 8px; color: inherit;
  font: 900 26px/1.1 var(--rb-display); letter-spacing: -.02em; }
.storybook-site .story-detail .strip .item:nth-child(4) b { display: inline; font: inherit;
  font-weight: 900; }
.storybook-site .story-detail .strip .ic { display: none; }
.storybook-site .story-detail .faq { width: 100%; max-width: 52rem; margin: clamp(64px, 8vw, 120px) 0 0; }
.storybook-site .story-detail .faq h2 { margin: 0 0 24px; color: var(--rb-text);
  font: 900 clamp(36px, 5vw, 72px)/1 var(--rb-display); letter-spacing: -.04em; }
.storybook-site .story-detail .faq details { margin: 0; padding: 0; border: 0;
  border-top: 2px solid var(--rb-text); border-radius: 0; background: none; }
.storybook-site .story-detail .faq details:last-of-type { border-bottom: 2px solid var(--rb-text); }
.storybook-site .story-detail .faq summary { display: flex; justify-content: space-between;
  align-items: center; gap: 24px; min-height: 44px; padding: 26px 0; cursor: pointer;
  list-style: none; color: var(--rb-text); font: 800 clamp(21px, 2vw, 28px)/1.25 var(--rb-display); }
.storybook-site .story-detail .faq summary::-webkit-details-marker { display: none; }
.storybook-site .story-detail .faq summary::after { content: "+"; flex: none; display: grid;
  place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--rb-lilac);
  color: var(--rb-ink); font: 800 28px/1 var(--rb-display); transition: transform .3s var(--rb-spring); }
.storybook-site .story-detail .faq details[open] summary::after { transform: rotate(45deg); }
.storybook-site .story-detail .faq details p { max-width: 42rem; margin: 0 0 28px;
  color: var(--rb-text-soft); font-size: 19px; line-height: 1.65; }
.storybook-site #how-its-made { padding-block: clamp(56px, 7vw, 96px) 0; }
.storybook-site #how-its-made .prose { max-width: 42rem; margin: 0; }
.storybook-site #how-its-made summary { min-height: 44px; cursor: pointer; font-weight: 700; }
/* Download: one price card, the whole cast waiting beside it. */
.storybook-site .story-detail .price-wrap { position: relative; display: block;
  margin-top: clamp(48px, 6vw, 88px); padding: 0; }
.storybook-site .story-detail .price-wrap::after { content: ""; position: absolute;
  inset-block: 8% 4%; inset-inline: min(48rem, 56%) 0; pointer-events: none;
  background: url(cast-pawn.webp) 0% 100% / 24% auto no-repeat,
    url(cast-knight.webp) 26% 82% / 28% auto no-repeat,
    url(cast-bishop.webp) 52% 64% / 26% auto no-repeat,
    url(cast-queen.webp) 76% 40% / 24% auto no-repeat,
    url(cast-king.webp) 100% 8% / 26% auto no-repeat;
  filter: drop-shadow(0 16px 14px #0002); }
.storybook-site .story-detail .price::before { content: none; }
.storybook-site .story-detail .price .once { padding: 0; border: 0; background: none;
  letter-spacing: 0; text-transform: none; }
.storybook-site .story-detail .price li { color: var(--rb-text); font-size: 18px; }
.storybook-site .story-detail .price { position: relative; z-index: 1; width: min(100%, 40rem);
  max-width: none; margin: 0; padding: clamp(32px, 5vw, 64px);
  border: 2px solid var(--rb-text); border-radius: clamp(28px, 3.4vw, 48px);
  background: var(--rb-ground); box-shadow: 10px 10px 0 var(--rb-sun); }
.storybook-site .story-detail .price .once { display: block; color: var(--rb-text);
  font: 800 22px/1.2 var(--rb-display); }
.storybook-site .story-detail .price .amt { margin: 10px 0 18px; color: var(--rb-text);
  font: 900 clamp(64px, 9vw, 120px)/.9 var(--rb-display); letter-spacing: -.05em; }
.storybook-site .story-detail .price p { color: var(--rb-text-soft) !important; font-size: 19px;
  line-height: 1.6; }
.storybook-site .story-detail .price ul { display: grid; gap: 10px; margin: 24px 0 32px;
  padding: 0; list-style: none; font-weight: 700; }
.storybook-site .story-detail .price li { display: flex; gap: 12px; align-items: center; }
.storybook-site .story-detail .price li::before { content: ""; flex: none; width: 14px;
  height: 14px; border-radius: 4px; background: var(--rb-meadow); }
.storybook-site .story-detail .price [data-launch="live"] > .launch-live,
.storybook-site .story-detail .price [data-launch="prelaunch"] > .launch-prelaunch {
  display: grid; gap: 16px; }
/* Support and legal keep their own structure; they take the type and colour only. */
.storybook-site .help-hero, .storybook-site .topic-grid, .storybook-site .help-cat,
.storybook-site .help-empty, .storybook-site .help-foot { width: calc(100% - 40px); }
.storybook-site .help-hero { padding-block: 40px 24px; }
.storybook-site .help-hero h1, .storybook-site main > .hero h1 {
  font: 900 clamp(36px, 6vw, 96px)/.95 var(--rb-display); letter-spacing: -.045em;
  overflow-wrap: anywhere; }
.storybook-site .topic-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.storybook-site .topic-card { border-radius: 28px; }
.storybook-site .tc-title, .storybook-site .help-cat h2 { overflow-wrap: anywhere;
  font-family: var(--rb-display); }
.storybook-site .help-foot { margin-bottom: 48px; }
.storybook-site #help-clear { min-width: 44px; min-height: 44px; right: auto; inset-inline-end: 4px; }
.storybook-site #help-q { padding-inline-end: 52px; }
.storybook-site .help-search .hs-ic { left: auto; inset-inline-start: 16px; }
.storybook-site .cat-n { margin-inline-start: auto; margin-inline-end: 0; }
.storybook-site .legal-doc { width: calc(100% - 40px); margin-inline: auto; }
.storybook-site .legal-doc h1, .storybook-site .legal-doc h2 { overflow-wrap: anywhere; hyphens: auto;
  font-family: var(--rb-display); }
[dir="rtl"] .story-button span, [dir="rtl"] .story-intro a span { display: inline-block;
  transform: scaleX(-1); }

/* ---- narrow screens ---- */
@media (max-width: 900px) {
  .storybook-site .storybook { grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "art" "parade"; min-height: 0; padding-top: 128px; }
  .storybook-site .storybook-art { margin-top: 40px; }
  .rb-screen { width: min(62%, 280px); margin-bottom: -3rem; }
  .storybook-site .story-features li { grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto; min-height: 0; }
  .storybook-site .story-features li::after { grid-column: 1; grid-row: 3; width: min(78%, 260px);
    margin: 12px 0 clamp(-140px, -30vw, -80px); }
  .storybook-site .story-detail .frow { grid-template-columns: minmax(0, 1fr); }
  .storybook-site .story-detail .frow:nth-child(odd) .fmedia { order: 0; }
  .storybook-site .story-detail .price-wrap::after { content: none; }
}
@media (max-width: 760px) {
  .storybook-site .nav { gap: 4px 20px; padding-block: 12px; }
  .storybook-site .nav > nav:not([data-language-picker]) { order: 3; width: 100%; gap: 0 22px;
    font-size: 16px; }
  .storybook-site .brand img.wordmark { height: 40px; max-width: 160px; }
  .storybook-site .storybook { padding-top: 156px; }
  .rb-screen { width: min(56%, 210px); padding: 7px; border-radius: 26px; }
  .storybook-site .rb-screen img.game-home { border-radius: 20px; }
  .storybook-site .story-features li { position: relative; top: auto; }
  .storybook-site .story-friend { width: 104px; bottom: auto; top: 28px; }
  .storybook-site .language-update { padding-bottom: 260px; }
  .storybook-site .language-update::after { inset-block: auto 0; height: 240px;
    width: min(80%, 320px); }
  .storybook-site .story-intro { padding-top: 150px; }
  .storybook-site footer .inner { flex-direction: column; align-items: flex-start; }
}

/* Scripts with tall vowel signs need more leading than the tight Latin display setting. */
:is(:lang(ar), :lang(he), :lang(hi), :lang(mr), :lang(bn), :lang(gu), :lang(pa), :lang(ta),
  :lang(te), :lang(kn), :lang(ml), :lang(th), :lang(ka)) .storybook-site
  :is(h1, h2, h3, .amt) { line-height: 1.22; letter-spacing: 0; }