/* ==========================================================================
   Wondermaths world homes - "living worlds" presentation layer, 2026-09-26.
   Direction: tmp/worlds-redesign-brief.md. Loads last, after
   portal-theme.css / portal-navy-turquoise.css / world-entrances.css.

   Presentation only: no content, transcript, media, download or route is
   touched. Colours follow the portal system - every surface sets
   --brand-ink / --brand-surface, because portal-theme.css pins text and
   border colours to those two variables.
   ponytail: the world scene already loaded in the hero is reused as a cached
   CSS background for the audio cards instead of shipping new artwork.
   ========================================================================== */

/* 1 - world tokens ------------------------------------------------------- */
:root[data-portal-theme] body {
  --wl-navy:#174A7E;
  --wl-ink:#17324D;
  --wl-mint:#D2F9F6;
  --wl-mist:#EDFCFA;
  --wl-accent:#2E9E6B;
  --wl-shadow:0 28px 46px -32px rgba(23,74,126,.55);
  --wl-scene:url('/assets/world-entrances/forest-scene.webp');
}
main.farm-world[data-set]{--wl-accent:#E0912F;--wl-scene:url('/assets/farmyard-world/gate-landscape.webp')}
main.farm-world[data-world-page="forest"]{--wl-accent:#2E9E6B;--wl-scene:url('/assets/world-entrances/forest-scene.webp')}
main.farm-world[data-world-page="water"]{--wl-accent:#2E9ED6;--wl-scene:url('/assets/world-entrances/water-scene.webp')}
main.farm-world[data-world-page="sky"]{--wl-accent:#6C8CE8;--wl-scene:url('/assets/world-entrances/sky-scene.webp')}
main.farm-world[data-world-page="magic"]{
  --wl-navy:#54318E;--wl-ink:#3C2566;--wl-mint:#EEE5FF;--wl-mist:#F7F2FF;
  --wl-accent:#8B5CF6;--wl-shadow:0 28px 46px -32px rgba(84,49,142,.5);
  --wl-scene:url('/assets/world-entrances/magic-scene.webp');
}
/* The five worlds are responsive: nothing is allowed to add a sideways scroll.
   Overflow checks still measure element rectangles, so real overflow is still
   reported even though the page cannot be dragged sideways. */
:root[data-portal-theme] body main.farm-world{overflow-x:clip}
:root[data-portal-theme] body.farm-world-page{overflow-x:clip}

/* 2 - hero: white copy on the left, the canonical scene as the environment --
   Approved composition: no boxed picture, the scene reaches the right edge and
   the full hero height, and a flowing white edge separates it from the copy. */
:root[data-portal-theme] body .farm-arrival{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,34%) minmax(0,66%);
  align-items:stretch;
  width:100%;max-width:100%;min-width:0;margin:0;padding:0;
  /* scene + copy row: ~700px at 1536x1024 keeps the hero and all four actions
     inside the first view */
  --wl-hero-h:clamp(430px,68vh,700px);
  /* the wave height is the single source of truth: the copy reserves it */
  --wl-wave:clamp(56px,7.8vw,120px);
  min-height:var(--wl-hero-h);
  background:#fff;
  --wl-stroke:#A8E9E1;
  --brand-ink:var(--wl-ink);
  --brand-heading-ink:var(--wl-navy);
  --brand-surface:var(--wl-mint);
}
/* the reference keeps a ~44px page gutter, not a centred max-width column */
:root[data-portal-theme] body.farm-world-page .portal-header>.wrap{width:calc(100% - 88px);max-width:none}
:root[data-portal-theme] body .farm-gate{
  /* a real grid item pinned to the hero row, so the picture always matches the
     copy row exactly; the right ~72.5%, from 27.5% to the right edge */
  position:relative;z-index:0;grid-column:1/-1;grid-row:1;justify-self:end;width:72.5%;
  display:block;margin:0;padding:0;min-width:0;
  background:transparent;border-radius:0;box-shadow:none;filter:none;
}
:root[data-portal-theme] body .farm-gate img{
  /* out of flow: the picture fills the hero row without driving its height */
  position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;max-height:none;
  object-fit:cover;object-position:left center;aspect-ratio:auto;
  border-radius:0!important;box-shadow:none;filter:none;background:transparent;
}
/* the flowing white edge: opaque on the left, two broad curves on the right */
:root[data-portal-theme] body .farm-arrival::before{
  content:"";position:relative;z-index:1;grid-column:1/-1;grid-row:1;justify-self:start;width:35%;
  background:#fff;pointer-events:none;
  /* 538x700 basis: the concave opening sits beside the short first line, then
     the white runs out past every long line before the inward sweep to 400 */
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 538 700' preserveAspectRatio='none'%3E%3Cpath d='M0 0H490C480 12 468 40 465 62C460 84 494 84 505 92C518 118 516 200 516 300C516 345 514 372 512 400C506 452 470 520 440 578C420 618 408 660 400 700H0Z'/%3E%3C/svg%3E") left center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 538 700' preserveAspectRatio='none'%3E%3Cpath d='M0 0H490C480 12 468 40 465 62C460 84 494 84 505 92C518 118 516 200 516 300C516 345 514 372 512 400C506 452 470 520 440 578C420 618 408 660 400 700H0Z'/%3E%3C/svg%3E") left center/100% 100% no-repeat;
}
:root[data-portal-theme] body .farm-arrival > *{min-width:0;max-width:100%}
:root[data-portal-theme] body .farm-titleband{
  position:relative;z-index:2;grid-column:1;grid-row:1;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
  gap:0;
  width:100%;max-width:100%;min-width:0;box-sizing:border-box;
  /* the copy row defines the scene height, so the picture is never half-hidden */
  min-height:var(--wl-hero-h);
  /* the bottom padding reserves the wave, so no CTA can ever sit behind it */
  margin:0;padding:clamp(18px,2.6vw,40px) 6px calc(var(--wl-wave) + 16px) clamp(18px,2.8vw,44px);
  background:transparent;text-align:left;
  --brand-ink:var(--wl-ink);--brand-heading-ink:var(--wl-navy);--brand-surface:var(--wl-mint);
}
/* two turquoise accent strokes in the white beside the short first line.
   Off by default: only the Forest headline at large screens leaves the room,
   everywhere else they would collide with the ink. */
:root[data-portal-theme] body .farm-titleband::after{
  display:none;
  content:"";position:absolute;top:clamp(24px,9%,72px);right:clamp(60px,20%,130px);
  width:clamp(44px,4vw,64px);height:clamp(24px,2.4vw,36px);
  background:var(--wl-stroke);pointer-events:none;transform:rotate(-24deg);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 36'%3E%3Crect x='0' y='12' width='38' height='10' rx='5'/%3E%3Crect x='26' y='2' width='26' height='10' rx='5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 36'%3E%3Crect x='0' y='12' width='38' height='10' rx='5'/%3E%3Crect x='26' y='2' width='26' height='10' rx='5'/%3E%3C/svg%3E") center/contain no-repeat;
}
:root[data-portal-theme] body .farm-titleband > *{min-width:0;max-width:100%}
/* the classed lead break is a desktop-only line break */
@media (max-width:780px){
  :root[data-portal-theme] body .farm-titleband h1 br.wl-lead{display:none}
}
/* accent strokes: only the Forest headline leaves room for them */
@media (min-width:1300px) and (min-height:521px){
  :root[data-portal-theme] body main.farm-world[data-world-page="forest"] .farm-titleband::after{display:block}
}
:root[data-portal-theme] body .farm-titleband h1{
  font-size:clamp(44px,4.95vw,76px);
  line-height:.98!important;letter-spacing:-.05em;
  max-width:100%;margin:0;
  --brand-ink:var(--wl-navy);--brand-heading-ink:var(--wl-navy);
}
:root[data-portal-theme] body .farm-titleband p{
  font-size:clamp(18px,1.85vw,29px);line-height:1.32;
  /* wraps like the reference and can never run under the white edge */
  margin:clamp(16px,1.6vw,24px) 0 0;max-width:min(26ch,100%);
}
:root[data-portal-theme] body .farm-start{
  position:relative;
  display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;
  gap:12px 20px;width:100%;max-width:100%;min-width:0;box-sizing:border-box;
  margin:clamp(20px,2.2vw,30px) 0 0;
}
:root[data-portal-theme] body .farm-start::before{
  content:none; /* secondary accent removed: it overlapped the subtitle ink */
}
:root[data-portal-theme] body .farm-start > *{min-width:0;max-width:100%}
:root[data-portal-theme] body .farm-start .farm-button{
  min-height:clamp(56px,5.2vw,80px);padding:clamp(14px,1.4vw,20px) clamp(26px,2.6vw,40px);
  border-radius:999px;font-size:clamp(19px,1.78vw,27px);
  box-shadow:0 18px 30px -20px rgba(23,74,126,.85);max-width:100%;white-space:normal;
}
:root[data-portal-theme] body .farm-start > a:not(.farm-button){
  display:inline-flex;align-items:center;min-height:44px;padding:0;
  background:transparent;box-shadow:none;font-size:15px;font-weight:650;text-decoration:underline;
}
:root[data-portal-theme] body .farm-start > span{display:none} /* age badge: rejected */
:root[data-portal-theme] body .farm-hero-links{
  grid-column:1/-1;z-index:4;position:relative;
  display:flex;flex-wrap:wrap;gap:4px 28px;justify-content:center;
  margin:0;padding:clamp(6px,1vw,12px) clamp(18px,3vw,44px) clamp(10px,1.4vw,18px);
  background:var(--wl-mint);--brand-surface:var(--wl-mint);--brand-ink:var(--wl-ink);
}
:root[data-portal-theme] body .farm-hero-links .text-link{
  display:inline-flex;align-items:center;min-height:44px;background:transparent;
  font-size:15px;font-weight:650;text-decoration:underline;
}

/* 3 - four illustrated storybook actions on the turquoise wave ------------- */
:root[data-portal-theme] body .farm-jumps{
  position:relative;z-index:3;grid-column:1/-1;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;
  gap:clamp(8px,1.6vw,28px);
  width:100%;margin:0;border:0;
  padding:clamp(20px,1.8vw,28px) clamp(18px,2.8vw,44px) clamp(8px,1vw,12px);
  background:var(--wl-mint);
  --brand-ink:var(--wl-ink);--brand-surface:var(--wl-mint);
}
:root[data-portal-theme] body .farm-jumps::before{
  content:"";position:absolute;left:0;right:0;top:calc(-1 * var(--wl-wave));
  height:var(--wl-wave);background:var(--wl-mint);pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 40C200 2 380 118 620 112C860 106 1010 8 1230 58C1330 82 1400 96 1440 100V120H0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 40C200 2 380 118 620 112C860 106 1010 8 1230 58C1330 82 1400 96 1440 100V120H0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
/* two real leaf sprigs (same supplied artwork, mirrored and rotated) tie the
   white copy to the wave; decoration only, no pointer events, never over text */
:root[data-portal-theme] body .farm-arrival::after,
:root[data-portal-theme] body .farm-hero-links::after{
  content:"";position:absolute;pointer-events:none;
  background:url('/assets/storybook-nav/foliage.webp') center/contain no-repeat;
}
:root[data-portal-theme] body .farm-arrival::after{
  z-index:1;left:1.2%;bottom:calc(var(--wl-wave) + 4px);
  width:clamp(84px,8vw,150px);aspect-ratio:512/512;transform:rotate(-8deg);
}
:root[data-portal-theme] body .farm-hero-links::after{
  right:1.4%;bottom:0;width:clamp(60px,5vw,104px);aspect-ratio:512/512;
  transform:rotate(6deg);
}
/* the supplied sprig actually crosses the white/scenic/turquoise boundary:
   anchored to the wave crest, above the band, clear of the action labels */
:root[data-portal-theme] body .farm-jumps::after{
  content:"";position:absolute;z-index:2;left:2%;top:calc(-1 * var(--wl-wave));
  width:clamp(70px,7vw,110px);aspect-ratio:1;pointer-events:none;
  background:url('/assets/storybook-nav/foliage.webp') center/contain no-repeat;
  transform:rotate(-6deg);
}
:root[data-portal-theme] body .farm-jump{
  position:relative;display:flex;align-items:center;gap:clamp(4px,.8vw,14px);
  min-width:0;min-height:clamp(84px,8.6vw,150px);
  padding:8px 16px 8px 8px;box-sizing:border-box;
  font-family:var(--brand-heading-font);font-weight:900;letter-spacing:-.02em;
  text-decoration:none;color:inherit;
  transition:transform .24s cubic-bezier(.2,.7,.3,1);
}
/* explicit pale organic island behind the art, varied per action; the real
   illustration keeps its leaves so they read outside the pale shape */
:root[data-portal-theme] body .farm-jump::before{
  content:"";position:absolute;inset:9px 4px 7px 2px;background:rgba(255,255,255,.62);
  border-radius:50%;
}
:root[data-portal-theme] body .farm-jump:nth-child(1)::before{border-radius:54% 46% 44% 56%/62% 60% 40% 38%}
:root[data-portal-theme] body .farm-jump:nth-child(2)::before{border-radius:46% 54% 56% 44%/58% 62% 38% 42%}
:root[data-portal-theme] body .farm-jump:nth-child(3)::before{border-radius:50% 50% 58% 42%/44% 56% 44% 56%}
:root[data-portal-theme] body .farm-jump:nth-child(4)::before{border-radius:58% 42% 46% 54%/40% 44% 56% 60%}
:root[data-portal-theme] body .farm-jump > *{position:relative;z-index:1}
:root[data-portal-theme] body .farm-jump:hover{transform:translateY(-3px)}
:root[data-portal-theme] body .farm-jump-art{
  flex:0 0 auto;width:clamp(120px,10.4vw,166px);height:auto;
  max-height:166px;object-fit:contain;
  border-radius:0!important;background:transparent;filter:none;
}
:root[data-portal-theme] body .farm-jump-label{font-size:clamp(24px,2.7vw,46px)}
:root[data-portal-theme] body .farm-jump-go{font-size:clamp(22px,2.2vw,38px);font-weight:400;opacity:.75;line-height:1}

/* 4 - section rhythm and headings ---------------------------------------- */
:root[data-portal-theme] body .farm-section-title{
  text-align:center;padding:clamp(26px,3.4vw,48px) 18px clamp(18px,2.4vw,30px);
}
:root[data-portal-theme] body .farm-section-title h2{font-size:clamp(28px,3.4vw,46px)}
:root[data-portal-theme] body .farm-section-title h2::after{
  content:"";display:block;width:78px;height:8px;margin:16px auto 0;
  border-radius:999px;background:var(--wl-accent);opacity:.85;
}
:root[data-portal-theme] body .farm-section-title h3{font-size:clamp(22px,2.4vw,31px)}
:root[data-portal-theme] body .farm-section-title p{margin:14px auto 0;max-width:60ch}
:root[data-portal-theme] body .eyebrow{
  display:inline-flex;align-items:center;padding:7px 16px;border-radius:999px;
  background:var(--wl-mint);--brand-ink:var(--wl-navy);
  font-size:13px;letter-spacing:1.2px;
}

/* 5 - audio story cards: cohesive illustrated layout, story art reused.
   The audio shell, the card grid and the story art size all live here because
   production serves the worlds with `style-src 'self'`: the inline <style> the
   generator used to ship was dropped by CSP. */
:root[data-portal-theme] body :is(.game-audio-story,#forest-audio,.audio-story-section){
  position:relative;overflow:hidden;
  width:min(1180px,92%)!important;
  max-width:1180px!important;
  margin:clamp(26px,3.6vw,50px) auto!important;
  padding:clamp(24px,3vw,44px) clamp(22px,3.4vw,54px)!important;
  border-radius:30px;
  --brand-ink:var(--wl-ink);
  --brand-heading-ink:var(--wl-navy);
  --brand-surface:var(--wl-mint);
  background-image:
    linear-gradient(100deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.86) 52%,rgba(255,255,255,.42) 100%),
    var(--wl-scene);
  background-size:cover,cover;
  background-position:center,center right;
  background-repeat:no-repeat;
  box-shadow:var(--wl-shadow);
}
/* The decorative "Listen to an adventure" eyebrow repeats what the title and the
   metadata already say, so the shell drops it. Title and metadata are untouched. */
:root[data-portal-theme] body :is(.game-audio-story,#forest-audio,.audio-story-section) .eyebrow{display:none}
:root[data-portal-theme] body :is(.game-audio-story,#forest-audio,.audio-story-section) .farm-section-title{
  text-align:left;padding:0 0 12px;max-width:76ch;
}
:root[data-portal-theme] body :is(.game-audio-story,#forest-audio,.audio-story-section) .farm-section-title h2::after{margin-inline:0}
:root[data-portal-theme] body :is(.game-audio-story,#forest-audio,.audio-story-section) :is(h2,p){max-width:62ch}
:root[data-portal-theme] body :is(.game-audio-story,#forest-audio,.audio-story-section) audio{
  display:block;width:100%;max-width:620px;margin:8px 0 4px;
}
:root[data-portal-theme] body :is(.game-audio-story,#forest-audio,.audio-story-section) details{
  margin-top:8px;max-width:74ch;border-radius:18px;background:rgba(255,255,255,.82);
  padding:0 16px 8px;
}
:root[data-portal-theme] body :is(.game-audio-story,#forest-audio,.audio-story-section) summary{
  cursor:pointer;padding:10px 0;font-weight:750;min-height:48px;
}
:root[data-portal-theme] body :is(.game-audio-story,#forest-audio,.audio-story-section) details p{
  max-width:70ch;line-height:1.75;
}
:root[data-portal-theme] body :is(.game-audio-story,#forest-audio,.audio-story-section) .farm-text-link{
  min-height:44px;padding-block:6px;
}
:root[data-portal-theme] body .audio-story{
  display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;
  max-width:940px;margin-inline:auto;
  border-radius:22px;padding:clamp(14px,2vw,24px);gap:clamp(12px,2vw,24px);
  background:#D2F9F6;color:#174A7E;
}
/* One square, 120px on desktop, art contained. Without this the img keeps its
   width="700" attribute and the story pushes a 700px column into the card. */
:root[data-portal-theme] body .audio-story-art{
  width:120px;height:120px;max-width:120px;max-height:120px;
  object-fit:contain;justify-self:center;
}
/* The generator's own `.audio-story-body > *` (0,1,0) loses to the portal theme's
   `.farm-world p` (0,1,1), so the compact spacing has to be re-asserted here. */
:root[data-portal-theme] body .audio-story-body{display:flex;flex-direction:column;gap:10px;min-width:0}
:root[data-portal-theme] body .audio-story-body > *{margin:0}
:root[data-portal-theme] body .audio-story-meta{font-weight:600}
/* Native player keeps its full control height. */
:root[data-portal-theme] body .audio-story-player{min-height:54px}
/* ponytail: a story rebuilt without art would leave the body in the narrow
   220px column; let it span the card instead. */
:root[data-portal-theme] body .audio-story-body:only-child{grid-column:1/-1}

/* 6 - materials shelf: two real features, first one a tilted book --------- */
:root[data-portal-theme] body .farm-shelf{
  background:linear-gradient(180deg,#fff,var(--wl-mist) 12%,var(--wl-mist) 88%,#fff);
  padding-block:clamp(24px,3vw,44px);
}
:root[data-portal-theme] body .farm-shelf .farm-section-title{background:transparent;padding-bottom:clamp(16px,2vw,26px)}
:root[data-portal-theme] body .farm-shelf-pair{gap:clamp(20px,3vw,40px);padding:clamp(18px,2.4vw,34px) 0}
:root[data-portal-theme] body .farm-shelf-pair > article{
  display:flex;flex-direction:column;align-items:center;
  background:#fff;--brand-ink:var(--wl-ink);--brand-heading-ink:var(--wl-navy);
  --brand-surface:var(--wl-mint);
  border-radius:28px;padding:clamp(20px,2.6vw,34px);
  box-shadow:var(--wl-shadow);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s;
}
:root[data-portal-theme] body .farm-shelf-pair > article:hover{transform:translateY(-6px)}
:root[data-portal-theme] body .farm-book-cover{
  height:clamp(240px,26vw,380px);transform:rotate(-1.6deg);transition:transform .3s;
}
:root[data-portal-theme] body .farm-shelf-pair > article:hover .farm-book-cover{transform:rotate(0)}
:root[data-portal-theme] body .farm-paper-pair{
  height:clamp(240px,26vw,380px);border-radius:22px;
  background:radial-gradient(120% 100% at 50% 112%,var(--wl-mint),rgba(255,255,255,0) 72%);
}
:root[data-portal-theme] body .farm-shelf-pair h3{margin-top:26px}

/* 7 - character cast: large portraits on soft pedestals ------------------ */
:root[data-portal-theme] body .farm-friends{
  background:linear-gradient(180deg,var(--wl-mist),#fff);
  border-radius:34px;
  padding:clamp(18px,2.6vw,38px) clamp(16px,3vw,44px) clamp(26px,3.4vw,52px);
  margin-block:clamp(18px,2.6vw,38px);
}
:root[data-portal-theme] body .farm-cast{gap:clamp(10px,1.6vw,20px);margin:10px 0 28px}
:root[data-portal-theme] body .farm-cast figure{
  position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;
  padding:10px 8px 14px;border-radius:24px;
  background:linear-gradient(180deg,#fff,var(--wl-mist));
  box-shadow:0 20px 30px -28px rgba(23,74,126,.65);
  transition:transform .26s cubic-bezier(.2,.7,.3,1),box-shadow .26s;
}
:root[data-portal-theme] body .farm-cast figure::before{
  content:"";position:absolute;left:50%;top:14%;width:min(76%,160px);aspect-ratio:1;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 42%,var(--wl-mint),rgba(255,255,255,0) 72%);
}
:root[data-portal-theme] body .farm-cast figure:hover{transform:translateY(-6px)}
:root[data-portal-theme] body .farm-cast img{
  position:relative;height:clamp(140px,15vw,220px);width:100%;object-fit:contain;
}
:root[data-portal-theme] body .farm-cast figcaption{
  position:relative;margin-top:10px;padding:6px 18px;border-radius:999px;
  background:var(--wl-navy);--brand-ink:#fff;font-size:18px;font-weight:750;
}
:root[data-portal-theme] body :is(.realm-cast-3,.realm-cast-6,.realm-cast-10) img{
  height:clamp(118px,12vw,190px);
}

/* 8 - tablet pages: fanned real previews --------------------------------- */
:root[data-portal-theme] body .farm-pages{
  background:linear-gradient(180deg,#fff,var(--wl-mist) 10%,var(--wl-mist) 90%,#fff);
  padding-block:clamp(30px,4vw,58px) clamp(34px,4.4vw,64px);
}
:root[data-portal-theme] body .farm-page-row{gap:clamp(18px,2.4vw,30px)}
:root[data-portal-theme] body .farm-page{
  display:flex;flex-direction:column;
  background:#fff;--brand-ink:var(--wl-ink);--brand-heading-ink:var(--wl-navy);
  --brand-surface:var(--wl-mint);
  border-radius:22px;padding:12px 12px 6px;
  box-shadow:0 22px 34px -30px rgba(23,74,126,.7);
  transform:rotate(var(--wl-tilt,-1.1deg));
  transition:transform .26s cubic-bezier(.2,.7,.3,1),box-shadow .26s;
}
:root[data-portal-theme] body .farm-page:nth-child(2n){--wl-tilt:1.1deg}
:root[data-portal-theme] body .farm-page:hover{
  transform:rotate(0) translateY(-6px);box-shadow:0 32px 42px -30px rgba(23,74,126,.75);
}
:root[data-portal-theme] body .farm-page img{border-radius:14px;background:#fff}
:root[data-portal-theme] body .farm-page h3{font-size:19px;margin:14px 6px 6px;line-height:1.32!important}
:root[data-portal-theme] body .farm-page span{font-size:15px;padding:0 6px 10px}

/* 9 - coloring spread ---------------------------------------------------- */
:root[data-portal-theme] body .farm-coloring{
  gap:clamp(20px,3vw,48px);padding-block:clamp(30px,4vw,58px);
}
:root[data-portal-theme] body .farm-color-copy{
  background:linear-gradient(180deg,var(--wl-mist),#fff);
  border-radius:28px;padding:clamp(20px,2.6vw,32px);
}
:root[data-portal-theme] body .farm-color-copy > img{
  width:clamp(120px,12vw,168px);height:auto;margin-bottom:14px;
}
:root[data-portal-theme] body .farm-color-pages{gap:0}
:root[data-portal-theme] body .farm-color-pages a{
  width:54%;border-radius:16px;background:#fff;padding:8px;
  box-shadow:0 24px 34px -30px rgba(23,74,126,.75);
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
:root[data-portal-theme] body .farm-color-pages a:hover{transform:rotate(0)!important}
:root[data-portal-theme] body .farm-color-pages img{border-radius:10px}

/* 10 - more stories ------------------------------------------------------ */
:root[data-portal-theme] body .realm-stories{
  background:linear-gradient(180deg,#fff,var(--wl-mist));
  padding-block:clamp(20px,3vw,40px) clamp(34px,4vw,58px);
}
:root[data-portal-theme] body .realm-book-row{gap:clamp(24px,4vw,60px);max-width:1000px}
:root[data-portal-theme] body .realm-book-row > a{
  display:flex;flex-direction:column;align-items:center;
  background:#fff;--brand-ink:var(--wl-ink);--brand-heading-ink:var(--wl-navy);
  --brand-surface:var(--wl-mint);
  border-radius:26px;padding:clamp(18px,2.4vw,28px);
  box-shadow:var(--wl-shadow);
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
:root[data-portal-theme] body .realm-book-row > a:hover{transform:translateY(-6px)}
:root[data-portal-theme] body .realm-book-row img{height:clamp(200px,24vw,320px);margin-bottom:18px}

/* 11 - farmyard-only extras: memo and keepsakes -------------------------- */
:root[data-portal-theme] body .farm-memo{
  background:linear-gradient(180deg,#fff,var(--wl-mist) 14%,var(--wl-mist) 86%,#fff);
  padding-block:clamp(34px,4vw,58px);
}
:root[data-portal-theme] body .farm-memo-faces > div{
  box-shadow:0 16px 24px -22px rgba(23,74,126,.7);
}
:root[data-portal-theme] body .farm-keepsakes{background:transparent;padding-bottom:clamp(30px,4vw,52px)}
:root[data-portal-theme] body .farm-keepsake-pair > article{
  background:#fff;--brand-ink:var(--wl-ink);--brand-heading-ink:var(--wl-navy);
  --brand-surface:var(--wl-mint);
  border-radius:28px;padding:clamp(18px,2.4vw,30px);
  box-shadow:var(--wl-shadow);
}

/* 12 - parent help ------------------------------------------------------- */
:root[data-portal-theme] body .farm-parent{padding-block:clamp(32px,4vw,58px)}
:root[data-portal-theme] body .farm-parent-ori{
  border-radius:50%;background:radial-gradient(circle at 50% 42%,var(--wl-mint),rgba(255,255,255,0) 72%);
  padding:10px;
}
:root[data-portal-theme] body .farm-parent > div > details{
  border:0;background:#fff;--brand-ink:var(--wl-ink);--brand-heading-ink:var(--wl-navy);
  border-radius:18px;padding:0 20px;margin-bottom:12px;
  box-shadow:0 20px 28px -30px rgba(23,74,126,.7);
}
:root[data-portal-theme] body .farm-parent > div > details > summary{
  padding:16px 0;font-size:17px;min-height:54px;list-style:none;
}
:root[data-portal-theme] body .farm-parent > div > details > summary::after{
  content:'+';float:right;font-weight:900;font-size:20px;line-height:1.2;
}
:root[data-portal-theme] body .farm-parent > div > details[open] > summary::after{content:'\2212'}

/* 13 - world switcher and help bar --------------------------------------- */
:root[data-portal-theme] body .realm-switcher{
  --brand-surface:var(--wl-navy);
  border:0;padding-block:clamp(22px,3vw,40px);
}
:root[data-portal-theme] body .realm-switcher a{
  border-width:2px;border-radius:999px;background:#fff;--brand-ink:var(--wl-navy);
  font-weight:700;transition:transform .2s ease;
}
:root[data-portal-theme] body .realm-switcher a:hover{transform:translateY(-2px)}
:root[data-portal-theme] body .realm-switcher a[aria-current]{background:var(--wl-navy);--brand-ink:#fff}
:root[data-portal-theme] body .help-entry{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;
  width:min(1240px,92%);max-width:1240px;margin:clamp(16px,2.2vw,28px) auto;
  padding:clamp(18px,2.2vw,26px) clamp(20px,2.6vw,30px);
  border-radius:22px;
  background:linear-gradient(120deg,var(--wl-mint),var(--wl-mist));
  --brand-ink:var(--wl-ink);--brand-heading-ink:var(--wl-navy);--brand-surface:var(--wl-mint);
}
:root[data-portal-theme] body .help-entry h2{font-size:20px;margin:0}
:root[data-portal-theme] body .help-entry > a{
  display:inline-flex;align-items:center;min-height:48px;padding:10px 18px;border-radius:999px;
  background:var(--wl-navy);--brand-ink:#fff;font-weight:700;text-decoration:none;
}
:root[data-portal-theme] body .help-entry p{margin:0;font-size:15px}

/* 14 - games: the final section before the footer ------------------------ */
:root[data-portal-theme] body .farm-game-section{
  padding-block:clamp(26px,3.4vw,48px) clamp(34px,4vw,56px);
}
:root[data-portal-theme] body .farm-games{gap:clamp(20px,2.4vw,30px)}
:root[data-portal-theme] body .farm-game{
  background:#fff;--brand-ink:var(--wl-ink);--brand-heading-ink:var(--wl-navy);
  --brand-surface:var(--wl-mint);
  border-radius:24px;padding:14px 14px 18px;
  box-shadow:var(--wl-shadow);
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s;
}
:root[data-portal-theme] body .farm-game:hover{transform:translateY(-6px)}
:root[data-portal-theme] body .farm-game > img,
:root[data-portal-theme] body .farm-game .realm-game-picture img{border-radius:16px}
:root[data-portal-theme] body .farm-game h3{font-size:20px;margin:14px 6px 4px}
:root[data-portal-theme] body .farm-game p{margin-inline:6px}
:root[data-portal-theme] body .farm-game > span{margin-inline:6px}
:root[data-portal-theme] body .realm-game-actions{margin-inline:6px}

/* 15 - water welcome feature (real artwork kept) ------------------------- */
:root[data-portal-theme] body .water-welcome-feature{
  background:linear-gradient(120deg,var(--wl-mist),var(--wl-mint));
  --brand-ink:var(--wl-ink);--brand-heading-ink:var(--wl-navy);--brand-surface:var(--wl-mint);
  border-radius:28px;padding:clamp(20px,2.6vw,32px);margin-block:clamp(28px,3.4vw,48px);
  box-shadow:var(--wl-shadow);
}
:root[data-portal-theme] body .water-welcome-feature img{border-radius:20px}

/* 16 - magic keeps its own purple ---------------------------------------
   The shared theme paints headings cream on coloured surfaces. On the Magic
   Realm those surfaces are pale lavender, so the heading ink is the dark
   purple instead - one variable, every Magic surface, >7:1 on #EEE5FF. */
main.farm-world[data-world-page="magic"]{
  --brand-heading-surface-ink:#54318E;--brand-heading-ink:#54318E;--wl-stroke:#C9B0F5;
}
main.farm-world[data-world-page="magic"] .farm-button{
  background:#54318E;--brand-ink:#fff;
}

/* 17 - motion: one hero entrance and hover, nothing repeating ------------
   Only the hero animates on arrival; sections below no longer replay an
   entrance on scroll. Content is never hidden by motion. */
@media (prefers-reduced-motion:no-preference){
  @keyframes wl-rise{from{opacity:.001;transform:translateY(20px)}to{opacity:1;transform:none}}
  main.farm-world .farm-arrival > .farm-titleband{animation:wl-rise .66s cubic-bezier(.2,.7,.3,1) both}
  main.farm-world .farm-arrival > .farm-gate{animation:wl-rise .7s cubic-bezier(.2,.7,.3,1) .08s both}
  main.farm-world .farm-arrival > .farm-jumps{animation:wl-rise .7s cubic-bezier(.2,.7,.3,1) .16s both}
}
@media (prefers-reduced-motion:reduce){
  :root[data-portal-theme] body :is(.farm-button,.farm-jumps a,.farm-page,.farm-game,
  .farm-shelf-pair > article,.realm-book-row > a,.realm-switcher a,.farm-cast figure){
    transition:none!important;transform:none!important;
  }
}

/* 18 - responsive ------------------------------------------------------- */
@media (max-width:1300px){
  :root[data-portal-theme] body .farm-arrival{grid-template-columns:minmax(0,33%) minmax(0,67%)}
  :root[data-portal-theme] body .farm-titleband h1{font-size:clamp(40px,4.6vw,58px)}
}
@media (max-width:1100px){
  :root[data-portal-theme] body .farm-titleband h1{font-size:clamp(38px,4.6vw,52px)}
  :root[data-portal-theme] body .farm-jump-art{width:clamp(104px,10.4vw,132px);max-height:132px}
  :root[data-portal-theme] body .farm-jump-label{font-size:clamp(20px,2.7vw,30px)}
  :root[data-portal-theme] body :is(.realm-cast-3,.realm-cast-6,.realm-cast-10) img{
    height:clamp(110px,13vw,165px);
  }
}
/* Copy above the complete scene, then 2x2 illustrated actions: phones and
   narrow portrait tablets, where a side-by-side scene would get small. */
@media (max-width:780px),(min-width:781px) and (max-width:1000px) and (orientation:portrait){
  :root[data-portal-theme] body .farm-arrival{grid-template-columns:1fr;min-height:0;padding:0}
  :root[data-portal-theme] body .farm-arrival::before{display:none}
  :root[data-portal-theme] body :is(.farm-arrival,.farm-jumps,.farm-hero-links)::after{display:none}
  :root[data-portal-theme] body .farm-gate{position:static;grid-column:auto;grid-row:auto;
    justify-self:stretch;width:auto;height:auto}
  /* the desktop picture is taken out of flow; put it back in the document so the
     stacked scene keeps its intrinsic height instead of collapsing to zero */
  :root[data-portal-theme] body .farm-gate img{
    position:static;inset:auto;width:100%;height:auto;max-height:none;object-fit:contain;
  }
  :root[data-portal-theme] body .farm-titleband{padding:20px 18px 24px;min-height:0}
  /* no decorative strokes over the copy on phones */
  :root[data-portal-theme] body .farm-titleband::after{display:none}
  /* keep the sentence break - and therefore a real space - on phones */
  :root[data-portal-theme] body .farm-titleband h1 br{display:inline}
  :root[data-portal-theme] body .farm-titleband h1{font-size:clamp(32px,6.6vw,50px);max-width:20ch}
  :root[data-portal-theme] body .farm-jumps{grid-template-columns:1fr 1fr;gap:10px 14px;padding:18px 18px 14px}
  :root[data-portal-theme] body .farm-jump{min-height:0}
  :root[data-portal-theme] body .farm-jump-art{width:clamp(64px,19vw,110px);max-height:116px}
  :root[data-portal-theme] body .farm-jump-label{font-size:clamp(20px,5.4vw,30px)}
  :root[data-portal-theme] body.farm-world-page .portal-header>.wrap{width:calc(100% - 32px)}
  :root[data-portal-theme] body .farm-cast img,
  :root[data-portal-theme] body :is(.realm-cast-3,.realm-cast-6,.realm-cast-10) img{
    height:clamp(104px,22vw,170px);
  }
  /* The audio section keeps its world scene when it narrows: the 100deg wash
     above reads as a plain white panel once the card fills the whole box. */
  :root[data-portal-theme] body :is(.game-audio-story,#forest-audio,.audio-story-section){
    background-image:
      linear-gradient(180deg,rgba(255,255,255,.93) 0%,rgba(255,255,255,.78) 44%,rgba(255,255,255,.58) 100%),
      var(--wl-scene);
    background-position:center,center;
    background-size:cover,cover;
  }
}
@media (max-width:600px){
  :root[data-portal-theme] body .farm-titleband h1{font-size:clamp(30px,8vw,38px)}
  :root[data-portal-theme] body .farm-titleband p{font-size:17px;max-width:30ch}
  :root[data-portal-theme] body .farm-start{flex-direction:column;align-items:stretch;gap:10px}
  :root[data-portal-theme] body .farm-start::before{display:none}
  :root[data-portal-theme] body .farm-start .farm-button{width:100%;justify-content:center;font-size:18px;padding:14px 20px}
  :root[data-portal-theme] body .farm-start > a:not(.farm-button){justify-content:center}
  :root[data-portal-theme] body .farm-jump-art{width:clamp(58px,17vw,88px);max-height:94px}
  :root[data-portal-theme] body .farm-jump-label{font-size:clamp(19px,5vw,26px)}
  :root[data-portal-theme] body :is(.game-audio-story,#forest-audio,.audio-story-section){
    padding:16px!important;margin-block:18px!important;border-radius:22px;
  }
  :root[data-portal-theme] body :is(.game-audio-story,#forest-audio,.audio-story-section) h2{font-size:24px}
  :root[data-portal-theme] body .audio-story{padding:14px;grid-template-columns:80px minmax(0,1fr)}
  :root[data-portal-theme] body .audio-story-art{width:80px;height:80px;max-width:80px;max-height:80px;justify-self:start}
  :root[data-portal-theme] body .audio-story-body{gap:8px}
  :root[data-portal-theme] body .audio-story-player{min-height:44px}
  :root[data-portal-theme] body .farm-page{padding:9px 9px 4px;--wl-tilt:0deg}
  :root[data-portal-theme] body .farm-page:nth-child(2n){--wl-tilt:0deg}
  :root[data-portal-theme] body .farm-page h3{font-size:17px;margin:10px 4px 4px}
  :root[data-portal-theme] body .farm-page span{font-size:14px;padding:0 4px 8px}
  :root[data-portal-theme] body .farm-color-pages a{width:56%;padding:6px}
  :root[data-portal-theme] body .farm-cast figure{padding:8px 6px 12px;border-radius:20px}
  :root[data-portal-theme] body .farm-cast img,
  :root[data-portal-theme] body :is(.realm-cast-3,.realm-cast-6,.realm-cast-10) img{
    height:clamp(92px,26vw,132px);
  }
  :root[data-portal-theme] body .farm-cast figcaption{font-size:16px;padding:5px 14px}
  :root[data-portal-theme] body .farm-friends{padding:16px 12px 28px;border-radius:26px}
  :root[data-portal-theme] body .farm-shelf-pair > article,
  :root[data-portal-theme] body .farm-game,
  :root[data-portal-theme] body .realm-book-row > a,
  :root[data-portal-theme] body .farm-keepsake-pair > article{border-radius:22px}
  :root[data-portal-theme] body .farm-book-cover,
  :root[data-portal-theme] body .farm-paper-pair{height:clamp(210px,58vw,300px)}
  :root[data-portal-theme] body .realm-book-row img{height:clamp(170px,44vw,240px)}
  :root[data-portal-theme] body .help-entry{border-radius:18px;gap:10px 16px}
  :root[data-portal-theme] body .help-entry > a{width:100%;justify-content:center}
}
@media (max-width:390px){
  :root[data-portal-theme] body .farm-cast img,
  :root[data-portal-theme] body :is(.realm-cast-3,.realm-cast-6,.realm-cast-10) img{
    height:clamp(84px,25vw,120px);
  }
  :root[data-portal-theme] body .farm-jump{gap:8px}
}
@media (max-height:520px) and (orientation:landscape){
  :root[data-portal-theme] body .farm-arrival{min-height:0;--wl-hero-h:min(430px,58vh);--wl-wave:46px}
  /* world pages only: keep the fix in view above the Listen action */
  :root[data-portal-theme] body.farm-world-page #wm-page-scroll{top:64px;right:12px;bottom:auto}
  /* compact header and copy so the full primary action stays inside 390px */
  :root[data-portal-theme] body.farm-world-page .portal-header>.wrap{min-height:52px;padding-block:4px}
  :root[data-portal-theme] body.farm-world-page .portal-logo{font-size:20px}
  :root[data-portal-theme] body .farm-titleband{padding:8px 10px calc(var(--wl-wave) + 10px);min-height:0}
  :root[data-portal-theme] body .farm-titleband h1{font-size:clamp(24px,3.4vw,34px)}
  :root[data-portal-theme] body .farm-titleband p{font-size:15px;margin-top:6px;max-width:30ch}
  :root[data-portal-theme] body .farm-start{margin-top:8px}
  :root[data-portal-theme] body .farm-start .farm-button{min-height:46px;padding:8px 20px;font-size:16px}
  :root[data-portal-theme] body .farm-start::before{display:none}
  :root[data-portal-theme] body .farm-jump{min-height:0;padding:4px 10px 4px 4px}
  :root[data-portal-theme] body .farm-jump-art{width:clamp(56px,8vw,96px);max-height:96px}
  :root[data-portal-theme] body .farm-jump-label{font-size:clamp(17px,2.4vw,24px)}
  :root[data-portal-theme] body .farm-jumps{padding:10px 14px 8px}
  /* stretch the scene to a taller copy row instead of leaving a white gap */
  :root[data-portal-theme] body .farm-gate{height:auto;bottom:0}
  :root[data-portal-theme] body .farm-arrival::before{height:auto;bottom:0}
}
/* phone portrait: the fixed scroll helper sits on the parent-help link */
@media (max-width:600px) and (orientation:portrait){
  :root[data-portal-theme] body.farm-world-page #wm-page-scroll{display:none}
}
/* >>> world-game-cutouts:start (generated by tmp/add-world-cutouts.py) >>> */
:root[data-portal-theme] body .farm-game {
  overflow: visible;
}

:root[data-portal-theme] body .farm-game .realm-game-picture,
:root[data-portal-theme] body .realm-game-picture,
body .realm-game-picture,
.realm-game-picture {
  overflow: visible !important;
  display: block;
}

:root[data-portal-theme] body .farm-game .world-game-shot,
:root[data-portal-theme] body .world-game-shot,
body .world-game-shot,
.world-game-shot {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  margin-top: 12px;
  margin-bottom: 32px;
  overflow: visible;
  padding: 0 !important;
  min-height: 0;
}

/* The card anchor owns the bottom spacing. A fixed aspect-ratio on the anchor
   ignored the shot's own margin-bottom, so the hanging cutout drew over the
   heading below; let the anchor grow with its content instead. */
:root[data-portal-theme] body .farm-game .realm-game-picture {
  margin-bottom: 32px;
  aspect-ratio: auto !important;
  height: auto !important;
}

:root[data-portal-theme] body .farm-game .realm-game-picture .world-game-shot {
  margin-bottom: 0;
}

:root[data-portal-theme] body .farm-game .world-game-frame,
:root[data-portal-theme] body .world-game-frame,
body .world-game-frame,
.world-game-frame {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 16px;
}

:root[data-portal-theme] body .farm-game .world-game-frame > img,
:root[data-portal-theme] body .world-game-frame > img,
body .world-game-frame > img,
.world-game-frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

:root[data-portal-theme] body .farm-game img.world-game-character,
:root[data-portal-theme] body img.world-game-character,
body img.world-game-character,
img.world-game-character {
  position: absolute;
  left: -10px;
  bottom: -16px;
  height: 62% !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  aspect-ratio: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.28));
}

:root[data-portal-theme] body .farm-game .farm-game-copy,
:root[data-portal-theme] body .farm-game p {
  position: relative;
  z-index: 2;
}

/* water-welcome / magic-realm-welcome: cutout peeks in from the top right. */
:root[data-portal-theme] body .farm-game:is([data-game-id="water-welcome"],[data-game-id="magic-realm-welcome"]) img.world-game-character {
  left: auto;
  right: -10px;
  top: -14px;
  bottom: auto;
}

/* forest-welcome: cutout centered on the vertical middle of the frame. */
:root[data-portal-theme] body .farm-game[data-game-id="forest-welcome"] img.world-game-character {
  top: calc(50% - 6px);
  bottom: auto;
}

/* one card per row on phones, matching the single-column Explore list */
@media (max-width: 600px) {
  :root[data-portal-theme] body .farm-games {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
/* <<< world-game-cutouts:end <<< */