/* ══════════════════════════════════════════════════════════════════
   MAP Kids · Landing page  (standalone, scrolling, responsive)
   Design source: "MAP Kids Landing Page.pdf" — 1920pt-wide artboard.
   Scale system: 1rem = 10 design-px at 1920w, fluid via clamp, so
   design values divide by 10. Below 720px the layout re-flows and
   text sizes are set explicitly.
   Brand (sampled from the PDF + client SVGs):
     ink purple #502875 · panel purple #500778 · pink #FF1F96
     orange #FFA300 · mascot orange #F9A11B · blob #F45B26
     face yellow #EACE24 · blush #FF7BAC · navy text #142D51
     about navy #576A8F · wall yellow #FEDC70 · arc #E1AE5F
     header cream #F3EAD8 · body cream #EFE6D4 · footer #FEEC8C
   ══════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:"Gotham Rounded";
  src:url("/assets/fonts/gothamrnd_medium.otf") format("opentype");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Gotham Rounded";
  src:url("/assets/fonts/gothamrnd_bold.otf") format("opentype");
  font-weight:700;font-style:normal;font-display:swap;
}

:root{
  --ink:#502875;
  --purple:#500778;
  --pink:#FF1F96;
  --orange:#FFA300;
  --mascot:#F9A11B;
  --blob:#F45B26;
  --face:#EACE24;
  --navy:#142D51;
  --about:#576A8F;
  --wall:#FEDC70;
  --arc:#E1AE5F;
  --cream-hd:#F3EAD8;
  --cream:#EFE6D4;
  --foot:#FEEC8C;
  --ease:cubic-bezier(.22,.61,.36,1);
  --boing:cubic-bezier(.34,1.56,.64,1);
  --hd:8rem;   /* header height; hero + art sizing budget against it */
}

html{
  /* 0.52083vw → 10px at 1920: the whole page is a fluid 192rem canvas.
     Floor keeps things legible on tablets; the ceiling lets it scale
     through ~2.5K displays. Past that the rem freezes and the canvas
     CENTRES instead — the section paddings below grow to take up the
     spare width so titles, header and grid stay on one axis. */
  font-size:clamp(5.2px, 0.52083vw, 13.4px);
  scroll-behavior:smooth;
  /* iOS font boosting would inflate copy out of the rem canvas
     (landing + the info pages, which ride this stylesheet). */
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
}
*{box-sizing:border-box}
body{
  margin:0;
  /* Sticky-footer column: header + main + footer stack full-height, and main
     grows to fill so the yellow footer is pinned to the bottom of the viewport
     even on short pages (Safety, Terms, …) rather than floating mid-screen. */
  display:flex;
  flex-direction:column;
  min-height:100vh;
  min-height:100dvh;
  font-family:"Gotham Rounded","Nunito",sans-serif;
  font-weight:500;
  color:var(--navy);
  background:var(--cream);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;   /* iPad Safari: no grey tap flash */
  /* Brand cursor — same white-fill kohl-stroke arrow as the player and
     editor (styles.css); hotspot 3,3 = the arrow tip past the SVG's
     shadow padding. Interactive bits keep their cursor:pointer hands. */
  cursor:url('/assets/img/cursor.svg') 3 3, default;
}
/* paper grain over the cream body (reuses the kiosk texture) */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:url("/assets/img/paper.jpg") center/cover;
  transform:rotate(180deg);
  opacity:.28;
}
header,main,footer,section{position:relative;z-index:1}
/* main takes all the leftover column height, pushing the footer down. */
body > main{flex:1 0 auto}
body > .site-footer{flex:0 0 auto}
img{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
a{color:inherit;text-decoration:none}
:focus-visible{outline:.4rem dashed var(--pink);outline-offset:.4rem;border-radius:1rem}

/* ─────────────────────────── Header ─────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  height:var(--hd);padding:0 max(6rem, 50% - 90rem);
  background:var(--cream-hd);
  transition:box-shadow .3s var(--ease);
}
.site-header::after{ /* its own paper grain (sticky needs opaque bg) */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url("/assets/img/paper.jpg") center/cover;transform:rotate(180deg);
  opacity:.24;
}
.site-header.is-scrolled{box-shadow:0 .8rem 3rem rgba(20,45,81,.16)}
.brand{position:relative;z-index:1;display:block;color:var(--ink)}
.brand svg{display:block;height:6.6rem;width:auto}
/* flex-end, not center: the two chars differ in height — centering the
   items would float their ground lines (and labels) 0.9rem apart */
.site-nav{position:relative;z-index:1;display:flex;align-items:flex-end;gap:7rem}
.nav-item{
  display:flex;align-items:flex-end;gap:1.6rem;
  background:none;border:0;padding:0;cursor:pointer;
  font:700 2.7rem/1 "Gotham Rounded","Nunito",sans-serif;color:var(--navy);
}
.nav-item .nav-label{
  padding-bottom:1.7rem;position:relative;
}
.nav-item .nav-label::after{ /* playful underline that grows on hover */
  content:"";position:absolute;left:0;bottom:1rem;height:.6rem;width:0;
  border-radius:99rem;background:currentColor;opacity:.85;
  transition:width .3s var(--boing);
}
.nav-item:hover .nav-label::after,
.nav-item:focus-visible .nav-label::after{width:100%}
.nav-discover .nav-label::after{background:var(--pink)}
.nav-play     .nav-label::after{background:var(--mascot)}
.nav-char{display:block;width:auto;transform-origin:50% 92%}
/* equal heights read as equal characters: both letterforms fill ~83% of
   their box (discover png is cropped to its art; no transparent padding) */
.nav-discover .nav-char{height:6rem}
.nav-play     .nav-char{height:6rem}
.nav-play svg.nav-char{width:4.8rem} /* height × 14.9/18.6 — inline svg width can't derive from viewBox */
.nav-discover svg.nav-char{width:4.65rem} /* height × 564/727 */
.nav-item:hover .nav-char{animation:char-wiggle .6s var(--boing)}
@keyframes char-wiggle{
  0%{transform:rotate(0)}25%{transform:rotate(-7deg) scale(1.05)}
  55%{transform:rotate(5deg) scale(1.06)}100%{transform:rotate(0)}
}

/* ─────────────────────────── Hero: gallery wall ───────────────────────────
   Header (--hd) + hero fill the viewport exactly. The hero is the same
   cream + paper-grain surface as the rest of the page (no background of
   its own, so the body texture runs straight through) with framed
   artworks and two flat stage spotlights — simple 2D, no room build.
   Layers: floor 0 · art 2 · beams 4 (light washes OVER the frames) ·
   lamps 7 · tagline 8 · hovered art 9 (rides over light + tagline). */
.hero{
  position:relative;
  height:calc(100vh - var(--hd));
  height:calc(100svh - var(--hd));
  min-height:72rem;max-height:116rem;
  overflow:hidden;
}

/* Per-spotlight geometry, shared by beam + lamp:
   --bx lamp x · --bw beam width · --lean aim.
   Lamp and beam pivot about the SAME point (--bx, -5rem) — tucked above
   the hero's top edge. The can is long enough that its mouth + glowing
   lens poke below the edge (the clipped rest hides behind the sticky
   header), so the cone visibly starts AT the lamp instead of appearing
   from nowhere. One --lean tilts fixture and cone together (negative =
   mouth swings right) — steep enough that the two cones overlap
   mid-stage, the reference's V. */
.b-1{--bx:7%; --bw:40%;--lean:-40deg;--dur:4.6s;--del:0s}
.b-2{--bx:93%;--bw:40%;--lean: 40deg;--dur:5.4s;--del:1.3s}

/* Spotlight cones — the reference look: soft feathered flanks with a
   brighter core, in flat brand-gold on the cream. Two conic ramps from
   the apex give the feather (no blur — softness is baked into the
   gradient). Height well over 100%: tilted by --lean it must still
   reach the floor (cos40° ≈ .77). The mask runs ALONG THE BEAM AXIS
   (element coords rotate with it): solid to ~82% then out by 98%, which
   at 40° lands the dissolve right across the tagline on the floor —
   the throw ends on the text. */
.beam{
  position:absolute;top:-5rem;height:135%;pointer-events:none;z-index:4;
  left:calc(var(--bx) - var(--bw)/2);width:var(--bw);
  background:
    conic-gradient(at 50% -4%,
      transparent 164deg, rgba(255,233,160,.2) 171deg,
      rgba(255,233,160,.38) 177deg, rgba(255,233,160,.38) 183deg,
      rgba(255,233,160,.2) 189deg, transparent 196deg),
    conic-gradient(at 50% -4%,
      transparent 174deg, rgba(255,246,216,.45) 179deg,
      rgba(255,246,216,.45) 181deg, transparent 186deg);
  /* Shoulders on the flanks: brightness falls off from the axis, so
     edges feather and the mid-stage crossing blends instead of making a
     hard X. The mask dims the throw with distance (light thins as it
     travels) before the same dissolve across the tagline.
     screen blend = additive light: it can only brighten, so the wash
     over the artworks (beams sit above the frames) lifts their shadows
     a touch instead of laying a gold film over them — picked over
     normal-blend and full-strength-screen variants by eye: those either
     stained the b/w photographs sepia or washed out their blacks. */
  mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,rgba(0,0,0,.72) 82%,transparent 98%);
          mask-image:linear-gradient(180deg,#000 55%,rgba(0,0,0,.72) 82%,transparent 98%);
  transform-origin:50% 0;
  animation:beam-sway var(--dur) ease-in-out var(--del) infinite;
  /* sway + breathing are transform/opacity only — pure compositing */
  will-change:transform,opacity;
}
/* offscreen, the whole rig sleeps (landing.js toggles the class) */
.hero.is-asleep .beam{animation-play-state:paused}
@keyframes beam-sway{
  0%,100%{transform:rotate(calc(var(--lean) - .7deg))}
  50%    {transform:rotate(calc(var(--lean) + .7deg))}
}

.lamp{ /* stage spot can on the shared pivot; long enough that the mouth
          and lens hang below the hero's top edge — the beams need a
          visible source. The clipped upper half stays behind the header,
          reading as "mounted above". */
  position:absolute;z-index:7;top:-5.4rem;left:var(--bx);
  width:5.6rem;height:9rem;pointer-events:none;
  transform:translateX(-50%) rotate(var(--lean));
  transform-origin:50% 0;
  background:var(--navy);
  border-radius:1.1rem 1.1rem 1.6rem 1.6rem;
}
.lamp-bulb{ /* lens sits proud of the mouth, glowing */
  position:absolute;left:50%;bottom:-.5rem;
  width:4.6rem;height:1.8rem;
  transform:translateX(-50%);
  border-radius:50%;
  background:#FFF6D8;
  box-shadow:0 .4rem 2rem rgba(254,220,112,.9);
}

.hero-floor{ /* curved 2D stage: the wall bows away panorama-style (the
                old room's arc) but flat — one translucent arc-tan fill
                so the paper grain runs through, skirting as a hairline */
  position:absolute;z-index:0;left:-10%;right:-10%;top:80%;bottom:0;
  border-radius:100% 100% 0 0;
  background:rgba(90,92,164,.42);   /* #5a5ca4 at 42% so the paper grain runs through */
  border-top:.4rem solid rgba(139,86,20,.16);
}

/* Frames on the wall. Width is capped against the hero height (--k per
   frame) so bottoms can never sink past the hero on short viewports. */
.art{
  position:absolute;z-index:2;margin:0;cursor:pointer;
  width:min(var(--w),calc(var(--k, .9)*(100vh - var(--hd))));
  width:min(var(--w),calc(var(--k, .9)*(100svh - var(--hd))));
  will-change:transform;
}
.art:hover{z-index:9}   /* the hover-scaled frame rides above its neighbours,
                           the beam wash and the tagline — held in the light */
.art img{
  display:block;width:100%;height:auto;
  filter:drop-shadow(0 1.2rem 2.6rem rgba(20,45,81,.18));
  transition:filter .35s var(--ease);
}
.art.is-lit img{
  filter:drop-shadow(0 0 1.6rem rgba(255,247,190,.95))
         drop-shadow(0 0 4rem rgba(255,196,60,.65))
         drop-shadow(0 1.2rem 2.6rem rgba(20,45,81,.14));
}
/* hover tooltip card (landing.js mounts it on <body> + positions it;
   z above the sticky header (40) so top-row cards overlay the nav) */
.art-tip{
  position:absolute;z-index:50;left:0;top:0;
  padding:.6rem 2rem .8rem;border-radius:1.2rem;
  background:var(--ink);text-align:center;white-space:nowrap;
  pointer-events:none;opacity:0;
  box-shadow:0 1.2rem 3rem rgba(80,40,117,.4);
}
.art-tip::before{ /* gradient hairline along the base */
  content:"";position:absolute;left:14%;right:14%;bottom:0;height:.25rem;border-radius:.25rem;
  background:linear-gradient(90deg,transparent,var(--orange),transparent);
}
.tip-name{display:block;font-weight:600;font-size:1.8rem;line-height:1.3;color:#fff}
/* positions/tilts — bottom-row bottoms stay clear of the tagline.
   (Sizes are the original wall ×1.25, centres held — a fuller wall with
   less cream between the frames.) */
.art--autumn {left:6.6%; top:8.2%;  --w:13.6%;--k:.775;--tilt:-1deg}
.art--mithila{left:28.3%;top:7.2%;  --w:20.5%;--k:1.075;--tilt:-6deg}
.art--street {left:17.5%;top:41.0%; --w:23.8%;--k:.490;--tilt:-4deg}
.art--women  {left:54.8%;top:22.3%; --w:17.6%;--k:.364;--tilt: 2deg}
.art--birds  {left:75.9%;top:9.1%;  --w:20.2%;--k:1.013;--tilt: 2.5deg}
.art--swing  {left:79.4%;top:42.1%; --w:16.1%;--k:.334;--tilt:-2deg}

/* ── Tagline: arched sticker lettering ── */
.hero-tag{
  position:absolute;z-index:8;left:0;right:0;bottom:4.5%;
  margin:0;
  display:flex;justify-content:center;
  pointer-events:none;
}
.tag-arc{
  width:110rem;max-width:94vw;height:auto;overflow:visible;
  filter:drop-shadow(0 .4rem 0 rgba(120,60,0,.16));
}
.tag-text{
  font:700 56px/1 "Gotham Rounded","Nunito",sans-serif;
  fill:var(--ink);
}
.tag-text .hl{fill:var(--pink)}
.tag-spark{fill:#FFF9E3}
.tag-spark.ts-2{fill:var(--pink)}

/* ─────────────────────────── Sections shared ─────────────────────────── */
.section-title{
  margin:0;
  font:700 5.2rem/1.15 "Gotham Rounded","Nunito",sans-serif;
  color:var(--navy);
  text-wrap:balance;
}

/* ─────────────────────────── Favourites ─────────────────────────── */
/* Side padding = 12rem while the canvas is fluid; on displays wider than
   the rem ceiling it grows to centre the 168rem content column (percent
   basis, so Windows scrollbars don't skew the maths). */
.favourites{padding:8.6rem max(12rem, 50% - 84rem) 2rem}
/* Hidden by request: the API-populated "Popular journeys" and "Popular
   activities" sections. !important so it stays hidden even after landing.js
   removes their `hidden` attribute when the API returns items. */
#popular-journeys,#popular-activities{display:none !important}
.section-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:4rem;margin-bottom:4.4rem;
}
.see-all{
  display:inline-flex;align-items:center;gap:1.6rem;
  background:var(--pink);color:#fff;
  font:700 2.7rem/1 "Gotham Rounded","Nunito",sans-serif;
  padding:2.1rem 3.6rem;border-radius:99rem;
  box-shadow:0 .8rem 2.6rem rgba(255,31,150,.32);
  transition:transform .3s var(--boing), box-shadow .3s var(--ease);
}
.see-all:hover{transform:translateY(-.5rem);box-shadow:0 1.4rem 3.4rem rgba(255,31,150,.4)}
.see-all:active{transform:translateY(-.1rem) scale(.98)}
.see-all-arrow{width:2.8rem;height:2.8rem;transition:transform .3s var(--boing)}
.see-all:hover .see-all-arrow{transform:translateX(.7rem)}

/* Journey-adaptive bento: rows are justified around the covers' true
   aspect ratios. Each card's flex-grow IS its cover's w/h and its art box
   carries aspect-ratio:<w>/<h>, so every cover in a row lands at the same
   height with its native proportions — shown whole, never cropped, no
   letterbox bars. Rows the maths can't fill (one very wide cover at the
   height cap) stay centred instead of stretching. */
.bento{display:flex;flex-direction:column;gap:4rem}
.b-row{display:flex;gap:4rem;justify-content:center;min-width:0}
/* a stacked column: two wide cards sharing one slot beside a tall anchor */
.b-stack{display:flex;flex-direction:column;gap:4rem;flex:0 0 auto;min-width:0}
.j-card{
  position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;
  border-radius:2.6rem;
  border:.7rem solid var(--theme);
  background:var(--theme);
  box-shadow:0 .9rem 2.6rem rgba(20,20,31,.10);
  transition:transform .35s var(--boing), box-shadow .35s var(--ease);
  will-change:transform;
}
.j-card:hover{
  transform:translateY(-1rem);
  box-shadow:0 2.6rem 5.4rem rgba(20,20,31,.18);
}
.j-card:active{transform:translateY(-.3rem) scale(.995)}
.theme-pink  {--theme:#FF1F96}
.theme-purple{--theme:#500778}
.theme-orange{--theme:#FFA300}

/* ── CMS preview chrome ──
   These classes are only ever added inside the editor's preview iframe
   (landing.js PREVIEW branch) — the kiosk never sees them. Deep ink is
   the one hue no card theme uses, so the rings read on every card. */
.j-card.is-editing{
  outline:.8rem solid #1F1233;outline-offset:1rem;
  box-shadow:0 0 0 2.6rem rgba(31,18,51,.14);
}
.j-card.is-hover-hint:not(.is-editing){
  outline:.6rem dashed rgba(31,18,51,.5);outline-offset:1rem;
}
/* Every tile wears its rail number — "Card 3" is findable at a glance. */
.j-card .edit-badge{
  position:absolute;top:1.6rem;left:1.6rem;z-index:40;
  width:4.4rem;height:4.4rem;border-radius:50%;
  display:grid;place-items:center;pointer-events:none;
  background:#1F1233;color:#FFFDF6;
  font:800 2.2rem/1 Nunito,'DM Sans',sans-serif;
  box-shadow:0 .2rem .8rem rgba(31,18,51,.35);
}
/* CMS preview only — the picked journey no longer exists */
.j-card.is-broken{opacity:.7}

/* art zone — the box's aspect-ratio (inline) equals the image's own, so
   object-fit:cover cannot actually crop; it only guards sub-pixel rounding.
   No hover zoom here: a scale-up would clip the artwork edges. */
.j-art{
  position:relative;display:block;width:100%;min-height:0;
  background:#fff;overflow:hidden;
}
.j-art img{width:100%;height:100%;object-fit:cover;display:block}
.j-art.is-empty{background:#F6EFE2}
.j-art.is-empty::after{content:'';position:absolute;inset:0;background:var(--theme);opacity:.14}

/* words strip — a shared height keeps every card in a row the same height;
   the JS render sizes it to the row (--ph), tall rows keep the full 22rem */
.j-panel{
  position:relative;display:flex;flex-direction:column;gap:1.2rem;
  flex:0 0 auto;height:var(--ph,22rem);
  background:var(--theme);
  padding:2.8rem 16.4rem 2.6rem 3.4rem;   /* right side clears the Play chip */
  color:#fff;
}
.j-title{
  font:700 3.2rem/1.2 "Gotham Rounded","Nunito",sans-serif;
  text-wrap:balance;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.j-body{
  font:500 2.2rem/1.38 "Gotham Rounded","Nunito",sans-serif;
  text-wrap:pretty;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* the words' float-dodge for the Play chip — only alive on desktop
   words-below cards (see the tier media block); everywhere else it must
   be display:none or it would count as a flex item and add a gap */
.j-dodge{display:none}
/* side variant — the client PDF's wide-card recipe: art to the left,
   words in a fixed-width column to the right, Play chip at its foot.
   The words column is ABSOLUTE so only the art's aspect-ratio box sets
   the card height — long copy can never stretch the card and distort
   (crop) the artwork; it clamps and clips inside the column instead. */
.j-card.is-side .j-art{width:calc(100% - var(--pw,40rem))}
.j-card.is-side .j-panel{
  position:absolute;top:0;right:0;bottom:0;
  width:var(--pw,40rem);height:auto;flex:none;
  padding:3.2rem 3.2rem 10.4rem 3.4rem;   /* foot clears the Play chip */
  overflow:hidden;
}
.j-card.is-side .j-title{-webkit-line-clamp:3}
.j-card.is-side .j-body{-webkit-line-clamp:6}
/* mirrored side card — a side card OPENING a multi-card row puts its words
   column on the row's outer LEFT edge (art slides right), so words frame
   the wall instead of piling toward one side. Same anatomy, flipped. */
.j-card.is-side-left .j-art{margin-left:var(--pw,40rem)}
.j-card.is-side-left .j-panel{right:auto;left:0}
.j-card.is-side-left .edit-badge{left:auto;right:1.6rem}

/* words keep their natural height — without this, a tight panel makes the
   flex column SHRINK the title/body boxes and chop glyphs mid-letter */
.j-panel .j-title,.j-panel .j-body{flex:0 0 auto}

/* shorter side cards (JS stamps the tier from the row height) fall back to
   fewer clamped lines — clean ellipses, never a clipped line */
.j-card.is-mid .j-title{-webkit-line-clamp:2}
.j-card.is-mid .j-body{-webkit-line-clamp:3}
.j-card.is-squat .j-title{-webkit-line-clamp:2;font-size:2.8rem}
.j-card.is-squat .j-body{-webkit-line-clamp:2;font-size:2rem}
.j-card.is-squat .j-panel{padding:2.4rem 2.8rem 9.6rem 3rem}

/* words-below cards on desktop: the words leave the -webkit-box column
   and wrap the Play chip's CORNER instead — a right float shaped to the
   chip's strip lets every line run the panel's full width until it
   actually reaches the chip (the old full-height right padding wasted
   the whole zone above it). Clamping becomes max-height in whole lines
   (em, so the fit pass's font steps rescale it) + overflow:clip — clip,
   unlike hidden, creates no new formatting context, which is what keeps
   the per-line wrap alive. No native ellipsis this way: the words-fit
   pass trims at a word boundary and writes one when needed.
   JS stamps the width tiers; each tier re-aims the dodge at its chip. */
@media (min-width:721px){
  .j-card:not(.is-side) .j-panel{display:block;padding:2.8rem 3.4rem 2.6rem}
  .j-card:not(.is-side) .j-title,
  .j-card:not(.is-side) .j-body{display:block;overflow:hidden;overflow:clip}
  .j-card:not(.is-side) .j-title{max-height:2.4em}                 /* 2 lines × 1.2  */
  .j-card:not(.is-side) .j-body{margin-top:1.2rem;max-height:2.76em} /* 2 lines × 1.38 */
  .j-card:not(.is-side) .j-dodge{
    display:block;float:right;width:15rem;height:16.6rem;
    shape-outside:inset(7.2rem 0 0 0);
  }
  .j-card.is-narrow .j-panel{padding:2.8rem 3.2rem 2.6rem}
  .j-card.is-narrow .j-dodge{width:13.2rem;shape-outside:inset(8.2rem 0 0 0)}
  .j-card.is-tight .j-panel{padding:2.4rem 2.8rem 2.2rem}
  .j-card.is-tight .j-dodge{width:13.2rem;height:17.4rem;shape-outside:inset(9.3rem 0 0 0)}
  .j-card.is-tight .j-title{font-size:2.7rem;line-height:1.25;max-height:3.75em} /* 3 × 1.25 */
  .j-card.is-tight .j-body{font-size:2rem;max-height:2.76em}
}

/* Corner Play chip — white pill, navy label, theme-coloured triangle.
   Decorative (the whole card is the link); hover rides the card's own
   :hover so it lifts with the lift, arrow nudging like See-all's. */
.j-play{
  position:absolute;right:2.6rem;bottom:2.4rem;
  display:inline-flex;align-items:center;gap:1.1rem;
  background:#fff;color:var(--navy);
  font:700 2.6rem/1 "Gotham Rounded","Nunito",sans-serif;
  padding:1.5rem 2.2rem 1.5rem 2.6rem;border-radius:99rem;
  box-shadow:0 .6rem 2rem rgba(20,45,81,.22);
  transition:transform .35s var(--boing), box-shadow .3s var(--ease);
}
.j-play-ic{width:2.4rem;height:2.4rem;color:var(--theme);transition:transform .3s var(--boing)}
.j-card:hover .j-play{transform:translateY(-.4rem);box-shadow:0 1.2rem 3rem rgba(20,45,81,.28)}
.j-card:hover .j-play-ic{transform:translateX(.5rem)}
.j-card:active .j-play{transform:translateY(-.1rem) scale(.96)}
/* compact chip on the smaller card tiers */
.j-card.is-narrow .j-play,.j-card.is-tight .j-play,.j-card.is-squat .j-play{
  font-size:2.3rem;gap:1rem;padding:1.3rem 1.9rem 1.3rem 2.2rem;
}
.j-card.is-narrow .j-play-ic,.j-card.is-tight .j-play-ic,.j-card.is-squat .j-play-ic{
  width:2.1rem;height:2.1rem;
}
.j-card.is-narrow .j-play,.j-card.is-squat .j-play{right:2rem;bottom:2rem}
.j-card.is-tight .j-play{right:1.8rem;bottom:1.8rem}

/* ─────────────────────────── About ─────────────────────────── */
.about{padding:8.8rem max(12rem, 50% - 84rem) 0}
.about .section-title{margin-bottom:4.2rem}
/* A banner, not a poster: lockup and copy sit side by side so the card
   spends its height on words, and the blob peeks from the right without
   demanding a viewport of navy to itself. */
.about-card{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:7rem;
  background:var(--about);
  border-radius:4rem;
  min-height:42rem;
  padding:5rem 5.6rem;
  box-shadow:0 1.2rem 4rem rgba(20,45,81,.18);
}
.about-lockup{flex:0 0 auto}
.about-lockup svg{display:block;height:14rem;width:auto;color:#fff}
.about-copy{
  margin:0;
  flex:0 1 auto;
  max-width:60rem;   /* stops short of the blob's dome */
  font:500 2.9rem/1.6 "Gotham Rounded","Nunito",sans-serif;
  color:#F6F1E6;
  text-wrap:pretty;
}
.spark{position:absolute;pointer-events:none}
.spark-1{left:50%;top:14%;width:9rem}
.spark-2{left:64.5%;top:70%;width:4.6rem}
.spark-3{left:90.5%;top:16%;width:4.6rem}
.spark-4{left:8.5%;top:16%;width:4.6rem}
.about-blob{
  position:absolute;right:0;bottom:-0.5rem;
  width:30%;height:auto;display:block;
  transform-origin:80% 100%;
}

/* ─────────────────────────── Footer ─────────────────────────── */
.site-footer{
  position:relative;
  margin-top:8.8rem;
  background:var(--foot);
  padding:5rem max(12rem, 50% - 84rem) 4.2rem;
}
.foot-links{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:4.6rem;
}
.foot-links a{
  font:700 3rem/1 "Gotham Rounded","Nunito",sans-serif;color:var(--navy);
  position:relative;padding-bottom:.8rem;
}
.foot-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:.5rem;width:0;
  border-radius:99rem;background:var(--pink);
  transition:width .3s var(--boing);
}
.foot-links a:hover::after{width:100%}
.foot-legal{display:flex;align-items:flex-start;gap:2.6rem}
.foot-char{
  width:5rem;height:auto;flex:0 0 auto;margin-top:.4rem;
  transform-origin:50% 90%;
}
.foot-char:hover{animation:char-wiggle .6s var(--boing)}
.foot-copy{
  margin:0 0 1rem;
  font:700 2.2rem/1.3 "Gotham Rounded","Nunito",sans-serif;color:var(--navy);
}
.foot-small{
  margin:0;max-width:160rem;
  font:500 1.7rem/1.55 "Gotham Rounded","Nunito",sans-serif;color:var(--navy);
  opacity:.92;
  text-wrap:pretty;
}

/* ─────────────────────────── Journey-launch wipe ─────────────────────────── */
.wipe{
  position:fixed;z-index:90;left:0;top:0;width:1px;height:1px;
  border-radius:50%;background:var(--pink);
  transform:translate(-50%,-50%) scale(0);
  pointer-events:none;
}

/* ─────────────────────────── ≤ 720px re-flow ─────────────────────────── */
@media (max-width:720px){
  html{font-size:8.5px;scroll-behavior:smooth}

  .site-header{height:auto;padding:10px 18px;gap:10px}
  .brand svg{height:44px}
  .site-nav{gap:22px}
  .nav-item{font-size:15px;gap:7px}
  .nav-item .nav-label{padding-bottom:12px}
  .nav-item .nav-label::after{bottom:7px}
  .nav-discover .nav-char{height:40px}
  .nav-play .nav-char{height:40px}
  .nav-play svg.nav-char{width:32px} /* 40 × 14.9/18.6 */
  .nav-discover svg.nav-char{width:31px} /* 40 × 564/727 */

  /* hero → tidy collage grid; the spotlight rig + stage are off */
  .hero{height:auto;min-height:0;max-height:none;padding:26px 18px 46px}
  .beam,.lamp,.hero-floor{display:none}
  .hero-wall{
    position:relative;display:grid;grid-template-columns:1fr 1fr;
    gap:18px;align-items:center;justify-items:center;
  }
  .art{position:static;width:78% !important}
  .art--women{grid-row:span 2;width:88% !important}
  .hero-tag{position:relative;margin:26px 0 0;padding:0 24px}
  .tag-arc{width:100%;max-width:420px}

  .favourites{padding:34px 18px 0}
  .section-title{font-size:26px}
  .section-head{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:20px}
  .see-all{font-size:14px;padding:11px 20px;gap:8px}
  .see-all-arrow{width:15px;height:15px}

  /* rows stack; the inline flex/width sizing is desktop-only, so undo it */
  .bento{gap:14px}
  .b-row{flex-direction:column;gap:14px}
  /* stacks dissolve into the column flow — every card full width */
  .b-stack{display:contents}
  .j-card{width:100% !important;flex:0 0 auto !important;border-width:4px;border-radius:16px}
  /* side cards fold back to art-over-words on small screens */
  .j-card.is-side .j-art{width:100%;margin-left:0}
  .j-card.is-side .j-panel{position:static;flex:0 0 auto;width:auto;height:auto;padding:16px 90px 18px 16px}
  .j-panel{height:auto;min-height:96px;padding:16px 90px 18px 16px;gap:8px}
  /* !important: the desktop words-fit pass writes inline rem sizes; the
     phone column keeps its own px scale if a window crosses 720 live */
  .j-title{font-size:18px !important}
  .j-body{font-size:13.5px !important}
  .j-card .j-play{font:700 13px/1 "Gotham Rounded","Nunito",sans-serif;gap:5px;padding:7px 11px 7px 13px;right:12px;bottom:12px}
  .j-card .j-play-ic{width:12px;height:12px}

  .about{padding:36px 18px 0}
  .about .section-title{margin-bottom:18px}
  .about-card{
    flex-direction:column;align-items:flex-start;gap:0;
    border-radius:18px;min-height:0;padding:22px 20px 130px;
  }
  .about-copy{margin:22px 0 0;max-width:100%;font-size:14.5px}
  .about-lockup svg{height:64px}
  .spark-1{left:52%;top:58%;width:34px}
  .spark-2{left:70%;top:8%;width:20px}
  .spark-3{left:88%;top:20%;width:18px}
  .spark-4{left:6%;top:70%;width:20px}
  .about-blob{width:56%}

  .site-footer{margin-top:38px;padding:22px 18px 20px}
  .foot-links{flex-wrap:wrap;gap:12px 26px;justify-content:flex-start;margin-bottom:20px}
  .foot-links a{font-size:15px}
  .foot-char{width:24px}
  .foot-copy{font-size:12.5px}
  .foot-small{font-size:10.5px}
}

/* ─────────────────────────── Reduced motion ─────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}