/* /css/bwe-home.css
   S127. Home page only. Loaded last on index.html so equal-specificity rules here win.

   Two jobs:
   1. FLAT MODE for touch and narrow viewports (html.rw-flat, set by a tiny inline
      script in <head>). The scrollymation was built for a tall stable desktop
      viewport. On phones the sticky stages, viewport-height math and overlaid text
      cards collide, and the memory cost of the choreography crashes Safari. In
      flat mode every chapter becomes an ordinary stacked section: index label,
      text card, then the composed scene frame showing its finished state. No
      sticky, no scroll math, no overlays.
   2. RETRO VISUAL SYSTEM. Flat warm surfaces, thick ink outlines, hard offset
      shadows with zero blur, one accent at a time. Spec from RETRO_WEBSITE_BUILD.

   No copy lives here. Style only. */

:root{
  --rw-box:#FFFBF2;
  --rw-outline:#2B1F3A;
  --rw-purple:#9A70D4;
  --rw-purple-d:#6B4C9A;
  --rw-coral:#DD8560;
  --rw-cream:#F5F0E6;
  --rw-ink:#2D2820;
  --rw-line:3px;
  --rw-shadow-x:6px;
  --rw-shadow-y:8px;
}
@media (min-width:900px){
  :root{ --rw-line:4px; --rw-shadow-x:8px; --rw-shadow-y:10px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   0. GIF BUDGET. Images swapped to a 1x1 placeholder by bwe-home.js carry
   data-gif instead of a .gif src, so the crop rule in bwe-gif-crop.css no
   longer matches them. Mirror it here on the attribute.
   ───────────────────────────────────────────────────────────────────────── */
img[data-gif]{
  object-fit:cover;
  object-position:center 38%;
  transform:scale(1.08);
  transform-origin:center 40%;
  background-color:#1a0e2a;
}
/* No opacity gating on these. A GIF that has a src is simply shown; the
   placeholder is a transparent pixel over the dark card colour, so nothing
   flashes. Gating on a class plus a transition was tested and rejected:
   a transition that never gets to run leaves an image invisible forever. */

/* ─────────────────────────────────────────────────────────────────────────
   1. FLAT MODE
   ───────────────────────────────────────────────────────────────────────── */

/* The page-level timeline chip and bar make no sense without a scroll story. */
html.rw-flat .bwe-tl-mini,
html.rw-flat .bwe-tl-chip,
html.rw-flat .bwe-timeline{ display:none !important; }

/* Chapter scenes: unpin. */
html.rw-flat .bwe-tour--mini .scene[data-scene]{
  height:auto;
  padding:40px 0 8px;
  margin-top:0;
  background:var(--rw-cream);
}
html.rw-flat .bwe-tour--mini .scene[data-scene] .scene-stage{
  position:relative;
  top:auto;
  height:auto;
  overflow:visible;
  display:flex;
  flex-direction:column;
  background:transparent;
}
/* Index label first, as a normal eyebrow. */
html.rw-flat .bwe-tour--mini .scene-index{
  position:static;
  order:1;
  display:block;
  transform:none;
  margin:0 20px 10px;
  color:#6f6450;
  text-shadow:none;
  font-size:13px;
}
/* Text card second, in flow, full width. */
html.rw-flat .bwe-tour--mini .scene-text{
  position:static;
  order:2;
  transform:none;
  opacity:1;
  max-width:none;
  margin:0 22px 22px 16px;
  pointer-events:auto;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
/* The composed frame third. Same geometry it was tuned for (one viewport tall),
   just not sticky and not overlaid. svh so the browser toolbar cannot move it. */
html.rw-flat .bwe-tour--mini .scene[data-scene] .scene-canvas{
  position:relative;
  order:3;
  inset:auto;
  width:calc(100% - 38px);
  margin:0 22px 0 16px;
  height:min(78svh, 620px);
  min-height:420px;
  border-radius:20px;
  overflow:hidden;
  transform:none;
  opacity:1;
  background:#1a1612;
  border:var(--rw-line) solid var(--rw-outline);
  box-shadow:var(--rw-shadow-x) var(--rw-shadow-y) 0 var(--rw-outline);
}
@supports not (height:1svh){
  html.rw-flat .bwe-tour--mini .scene[data-scene] .scene-canvas{ height:min(78vh, 620px); }
}
/* FLOW chapters. Story page (2), browse (3), the year (7) and the tapestry (8)
   compose a page-like layout inside their layer rather than a full-bleed picture.
   Their frame grows with the content instead of holding a fixed height, and the
   layer itself joins normal flow. */
html.rw-flat .bwe-tour--mini .scene[data-scene="2"] .scene-canvas,
html.rw-flat .bwe-tour--mini .scene[data-scene="3"] .scene-canvas,
html.rw-flat .bwe-tour--mini .scene[data-scene="5"] .scene-canvas,
html.rw-flat .bwe-tour--mini .scene[data-scene="6"] .scene-canvas,
html.rw-flat .bwe-tour--mini .scene[data-scene="7"] .scene-canvas,
html.rw-flat .bwe-tour--mini .scene[data-scene="8"] .scene-canvas{
  height:auto;
  min-height:0;
  background:transparent;
  overflow:visible;
}
html.rw-flat .bwe-tour--mini .scene[data-scene="2"] .scene-layer,
html.rw-flat .bwe-tour--mini .scene[data-scene="3"] .scene-layer,
html.rw-flat .bwe-tour--mini .scene[data-scene="5"] .scene-layer,
html.rw-flat .bwe-tour--mini .scene[data-scene="6"] .scene-layer,
html.rw-flat .bwe-tour--mini .scene[data-scene="7"] .scene-layer,
html.rw-flat .bwe-tour--mini .scene[data-scene="8"] .scene-layer{
  position:relative;
  inset:auto;
  height:auto;
  transform:none;
}
/* Story page and browse carry their own retro panels (sp-reader, br-panel), so
   the frame around them is invisible. The year and the tapestry are a sheet of
   cards on paper, so the frame stays as the sheet. */
html.rw-flat .bwe-tour--mini .scene[data-scene="2"] .scene-canvas,
html.rw-flat .bwe-tour--mini .scene[data-scene="3"] .scene-canvas{
  border:0; box-shadow:none; border-radius:0; width:auto; margin:0;
}
html.rw-flat .bwe-tour--mini .scene[data-scene="5"] .scene-canvas,
html.rw-flat .bwe-tour--mini .scene[data-scene="6"] .scene-canvas,
html.rw-flat .bwe-tour--mini .scene[data-scene="7"] .scene-canvas,
html.rw-flat .bwe-tour--mini .scene[data-scene="8"] .scene-canvas{
  overflow:hidden;
  background:var(--rw-box);
}
/* Journey and share: the paper lays a list beside a tilted phone for a wide
   stage. Stack them, and let the phone stand straight. */
html.rw-flat .bwe-tour--mini .s5-paper{
  flex-direction:column; align-items:center; justify-content:flex-start;
  padding:24px 16px 32px; gap:22px; flex-wrap:nowrap;
}
html.rw-flat .bwe-tour--mini .s5-phone{ transform:none; opacity:1; }
html.rw-flat .bwe-tour--mini .s5-modal{ transform:none; opacity:1; position:relative; inset:auto; max-width:100%; }

/* The two picture chapters sit a hair off square, like stuck-down prints. */
html.rw-flat:not(.rw-phone) .bwe-tour--mini .scene[data-scene="1"] .scene-canvas{ transform:rotate(-0.8deg); }
html.rw-flat:not(.rw-phone) .bwe-tour--mini .scene[data-scene="4"] .scene-canvas{ transform:rotate(0.7deg); }

/* Warm placeholder under small faces on paper while their GIF is on its way. */
.bwe-tour .riv-face img[data-gif],
.bwe-tour .tp-face img[data-gif],
.bwe-tour .s6-cf img[data-gif],
.bwe-tour .s6-feat-face img[data-gif]{ background-color:#d9cdb9; }

/* Reveal. Cards rise into place as they arrive. Only when JS has confirmed
   IntersectionObserver exists (html.rw-js), and never under reduced motion. A
   timer in bwe-home.js settles anything the observer missed, so nothing can
   stay hidden. */
html.rw-js.rw-flat .rw-reveal{ opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
html.rw-js.rw-flat .rw-reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html.rw-js.rw-flat .rw-reveal{ opacity:1; transform:none; transition:none; }
}
html.rw-flat .bwe-tour--mini .s6-paper{ padding:28px 16px 32px; gap:20px; }
html.rw-flat .bwe-tour--mini .s6-featured{ transform:none; }
html.rw-flat .bwe-tour--mini .tp-cloth{ padding:28px 14px 32px; }

/* Every layer that is on in the finished state is simply on. The engine still
   sets data-progress=3 in flat mode, this is belt and braces. */
html.rw-flat .bwe-tour--mini .scene-layer[data-on~="3"]{ opacity:1; }
html.rw-flat .bwe-tour--mini .scene-layer:not([data-on~="3"]){ display:none; }

/* Voices: same treatment. Portrait frame, then the quote card in flow. */
html.rw-flat .bwe-tour--mini .voice-scene{
  height:auto;
  padding:40px 0 8px;
  background:#16120f;
}
html.rw-flat .bwe-tour--mini .voice-stage{
  position:relative;
  top:auto;
  height:auto;
  overflow:visible;
  display:flex;
  flex-direction:column;
  background:transparent;
}
html.rw-flat .bwe-tour--mini .voice-portrait{
  position:relative;
  order:1;
  inset:auto;
  width:calc(100% - 38px);
  margin:0 22px 18px 16px;
  height:min(56svh, 460px);
  border-radius:20px;
  overflow:hidden;
  border:var(--rw-line) solid var(--rw-cream);
  box-shadow:var(--rw-shadow-x) var(--rw-shadow-y) 0 var(--rw-purple);
}
html.rw-flat .bwe-tour--mini .voice-scene .scene-index,
html.rw-flat .bwe-tour--mini .voice-scene .voice-index{
  position:static; order:0; transform:none; margin:0 20px 10px; color:rgba(245,240,230,.75);
}
html.rw-flat .bwe-tour--mini .voice-content{
  position:static;
  order:2;
  transform:none;
  opacity:1;
  max-width:none;
  margin:0 22px 12px 16px;
  pointer-events:auto;
}

/* The one-face-becomes-many flood is a transition effect that needs a pinned
   stage and 25 video elements. In flat mode the library marquee that follows
   does the reveal on its own. */
html.rw-flat .flood-scene{ display:none !important; }

/* Tour heros: the content is absolutely centred inside a viewport-height box.
   In flat mode bring it into flow so the box is exactly as tall as its text. */
html.rw-flat .bwe-tour .tour-hero{ height:auto; min-height:0; padding:0; }
html.rw-flat .bwe-tour .tour-hero-content{ position:relative; inset:auto; padding:72px 6vw 64px; }
html.rw-flat .bwe-tour .tour-hero-h{ font-size:clamp(34px, 9.5vw, 52px); }
html.rw-flat .bwe-tour .tour-hero-sub--lg{ font-size:clamp(19px, 5vw, 24px); }





/* ─────────────────────────────────────────────────────────────────────────
   2. RETRO VISUAL SYSTEM
   ───────────────────────────────────────────────────────────────────────── */

/* Tour text cards: flat box, ink outline, hard shadow. Glass is gone. */
.bwe-tour .scene-text{
  background:var(--rw-box);
  border:var(--rw-line) solid var(--rw-outline);
  border-radius:18px;
  box-shadow:var(--rw-shadow-x) var(--rw-shadow-y) 0 var(--rw-outline);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.bwe-tour .scene-text.is-dark{
  background:#221a33;
  border-color:var(--rw-cream);
  box-shadow:var(--rw-shadow-x) var(--rw-shadow-y) 0 var(--rw-purple);
}

/* A little coloured tab on every text card, like the index tab on a file card. */
.bwe-tour .scene-text{ position:absolute; }
html.rw-flat .bwe-tour--mini .scene-text{ position:relative; }
.bwe-tour .scene-text::before{
  content:'';
  position:absolute;
  top:calc(-1 * var(--rw-line));
  left:50%;
  transform:translateX(-50%);
  width:64px; height:11px;
  background:var(--rw-coral);
  border:var(--rw-line) solid var(--rw-outline);
  border-top:0;
  border-radius:0 0 7px 7px;
}
.bwe-tour .scene-text.is-dark::before{ background:var(--rw-purple); border-color:var(--rw-cream); }

/* Big headlines get the printed offset shadow from the ad wordmark. */
.hero .hero-h1{ text-shadow:4px 5px 0 #1a1130 !important; }
/* s128: this headline had a 28% lavender offset, which read as a smudge rather
   than a printed offset, and which .pop and .pop2 inherited, so one line
   carried three different shadow tints. Tried a single hard ink offset: worse,
   because the first three words are near-black ink and a dark offset under
   dark type is a blob. The right answer is no shadow at all. An offset exists
   to lift type off a busy or photographic ground; this headline sits on flat
   cream and does not need lifting. Clean Shrikhand with coral and purple
   accents is more confident, and more retro, than an imitation letterpress.
   The hero h1 keeps its offset because it sits on a dark gradient. */
.bwe-tour .tour-hero--warm .tour-hero-h,
.bwe-tour .tour-hero--warm .tour-hero-h .pop,
.bwe-tour .tour-hero--warm .tour-hero-h .pop2{ text-shadow:none !important; }
.bwe-tour .tour-hero--cool .tour-hero-h{ text-shadow:4px 5px 0 #0a0806; }

/* Links that say "try it live" get a solid underline in the accent. */
.bwe-tour .st-try{ text-decoration-thickness:3px; text-underline-offset:5px; }

/* Story page and browse frames. */
.bwe-tour .sp-frame,
.bwe-tour .br-frame{ background:transparent; box-shadow:none; }
.bwe-tour .sp-reader,
.bwe-tour .br-panel{
  background:var(--rw-box);
  border:var(--rw-line) solid var(--rw-outline);
  border-radius:20px;
  box-shadow:var(--rw-shadow-x) var(--rw-shadow-y) 0 var(--rw-outline);
}

/* The browse search bar becomes the retro search bar from the ad. */
.bwe-tour .br-searchbar{
  position:relative;
  display:flex;
  align-items:center;
  background:var(--rw-box);
  border:var(--rw-line) solid var(--rw-outline);
  border-radius:16px;
  box-shadow:5px 6px 0 var(--rw-outline);
  padding:0 66px 0 18px;
  min-height:54px;
  overflow:hidden;
  font-family:'Fredoka',sans-serif;
  font-weight:500;
  color:var(--rw-ink);
}
.bwe-tour .br-searchbar::after{
  content:'';
  position:absolute;
  top:0; right:0; bottom:0;
  width:52px;
  background:var(--rw-purple);
  border-left:var(--rw-line) solid var(--rw-outline);
}
.bwe-tour .br-search-icon{
  position:absolute;
  right:0; top:0; bottom:0;
  width:52px;
  display:flex; align-items:center; justify-content:center;
  z-index:1;
  color:var(--rw-box);
  font-size:22px;
  font-weight:700;
}
.bwe-tour .br-search-text{ font-size:16px; color:#5a5040; }
.bwe-tour .br-search-caret{ background:var(--rw-coral); width:2px; height:22px; margin-left:4px; }

/* Cards across chapters. */
.bwe-tour .br-card,
.bwe-tour .s6-featured,
.bwe-tour .tp-card{
  border:var(--rw-line) solid var(--rw-outline);
  box-shadow:5px 6px 0 var(--rw-outline);
}

/* Library marquee faces. */
.bwe-tour .riv-face{
  border:3px solid var(--rw-outline);
  box-shadow:4px 5px 0 var(--rw-outline);
  border-radius:12px;
}

/* Hero email card and CTAs. */
.rw-msave{
  background:var(--rw-box) !important;
  border:var(--rw-line) solid var(--rw-outline) !important;
  border-radius:22px !important;
  box-shadow:var(--rw-shadow-x) var(--rw-shadow-y) 0 var(--rw-outline) !important;
}
.rw-msave-input{
  border:var(--rw-line) solid var(--rw-outline) !important;
  border-radius:14px !important;
  background:#fff !important;
  box-shadow:none !important;
}
.rw-msave-btn,
.hero-cta,
.outro-btn{
  border:var(--rw-line) solid var(--rw-outline) !important;
  box-shadow:4px 5px 0 var(--rw-outline) !important;
  transition:transform .12s ease, box-shadow .12s ease !important;
}
.rw-msave-btn:active,
.hero-cta:active{
  transform:translate(3px,4px) !important;
  box-shadow:1px 1px 0 var(--rw-outline) !important;
}

/* Outro card. */
.bwe-tour .outro-card{
  background:var(--rw-box);
  border:var(--rw-line) solid var(--rw-outline);
  border-radius:22px;
  box-shadow:var(--rw-shadow-x) var(--rw-shadow-y) 0 var(--rw-outline);
}

/* ─────────────────────────────────────────────────────────────────────────
   3. DESKTOP TUNING. Less dead air in the mini tour, label never in a heading.
   ───────────────────────────────────────────────────────────────────────── */
html:not(.rw-flat) .bwe-tour--mini .scene[data-scene]{ height:220vh; }
html:not(.rw-flat) .bwe-tour--mini .voice-scene{ height:220vh; }
html:not(.rw-flat) .bwe-tour--mini .scene-index{ top:22px; }
html:not(.rw-flat) .flood-scene{ height:170vh; }
/* The canvas and the card used to stay transparent for the first 45vh a chapter
   was on screen, then fade in over the next 40vh. That was a viewport of blank
   cream between every pair of chapters. Fade in as soon as the chapter arrives. */
html:not(.rw-flat) .bwe-tour--mini .scene[data-scene] .scene-canvas{
  opacity:min(clamp(0, calc((var(--sp, 0) - 0.03) / 0.09), 1), clamp(0, calc((0.97 - var(--sp, 0)) / 0.09), 1));
}
html:not(.rw-flat) .bwe-tour--mini .scene-text{
  opacity:min(clamp(0, calc((var(--sp, 0) - 0.05) / 0.09), 1), clamp(0, calc((0.95 - var(--sp, 0)) / 0.09), 1));
}

/* Tablet nav. Between 769 and 900px the full desktop nav wraps. Hamburger. */
@media (max-width:900px){
  #nav .nav-mid{ display:none !important; }
  #nav .nav-r{ display:none !important; }
  #nav .nav-ham{ display:flex !important; margin-left:auto !important; }
}


/* ─────────────────────────────────────────────────────────────────────────
   4. HERO. Brand gradient replaces the rotating films. The blurred orbs and
   the sketched doodles go too: an 80px blur animating forever is one of the
   heaviest things a phone GPU can be asked to do, and it was under everything.
   ───────────────────────────────────────────────────────────────────────── */
.hero{
  background:
    radial-gradient(ellipse 70% 55% at 88% 108%, rgba(232,132,90,.62), transparent 60%),
    radial-gradient(ellipse 60% 50% at 6% -6%, rgba(154,112,212,.62), transparent 58%),
    linear-gradient(168deg, #3a2470 0%, #2d1a52 52%, #22123f 100%) !important;
}
.hero .orb,
.hero .chalk-deco,
.hero .hero-gif-bg{ display:none !important; }
/* s128: both hero lines are set in the body face. The tagline is no longer a
   different typeface; it is the same face, one step heavier, in a cooler tint.
   Hierarchy comes from weight and colour, not from switching fonts mid block. */
.hero .hero-sub{ font-family:'Fredoka',sans-serif; font-weight:500; font-size:clamp(18px, 2.1vw, 23px); line-height:1.5; }
.hero .hero-sub .hero-sub-2{ font-family:'Fredoka',sans-serif; font-weight:600; font-size:1em; }

/* ─────────────────────────────────────────────────────────────────────────
   5. PHONE HARDENING. Things that cost GPU memory and gain nothing when the
   page is a plain stack.
   ───────────────────────────────────────────────────────────────────────── */
html.rw-flat .bwe-tour .scene-layer,
html.rw-flat .bwe-tour .scene-canvas,
html.rw-flat .bwe-tour .scene-text{ will-change:auto; }
html.rw-phone .bwe-tour .scene-layer.is-paper::before{ display:none; }
html.rw-phone .bwe-tour .riv-row{ mask-image:none; -webkit-mask-image:none; }
html.rw-phone .bwe-tour .riv-track{
  animation:none !important;
  width:auto;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  padding:0 16px;
}
html.rw-phone .bwe-tour .riv-face:nth-child(n+13){ display:none; }
html.rw-phone .bwe-tour .riv-face{ width:calc((100% - 30px) / 4); height:auto; aspect-ratio:4/3; }
html.rw-phone .bwe-tour .riv-row + .riv-row{ margin-top:10px; }

/* ─────────────────────────────────────────────────────────────────────────
   6. DESKTOP FLAT. Same stack, laid out with room. Picture chapters become a
   two column spread that alternates sides. Sheet chapters run down the middle.
   ───────────────────────────────────────────────────────────────────────── */
@media (min-width:900px){
  html.rw-flat .bwe-tour--mini .scene[data-scene]{ padding:88px 0 40px; }
  html.rw-flat .bwe-tour--mini .scene[data-scene] .scene-stage{
    display:grid;
    grid-template-columns:minmax(300px, 440px) minmax(0, 1fr);
    column-gap:56px;
    row-gap:18px;
    align-items:center;
    max-width:1200px;
    margin:0 auto;
    padding:0 40px;
  }
  html.rw-flat .bwe-tour--mini .scene-index{ grid-column:1 / -1; margin:0 0 4px; font-size:14px; }
  html.rw-flat .bwe-tour--mini .scene-text{ grid-column:1; grid-row:2; margin:0; max-width:440px; padding:30px 32px; }
  html.rw-flat .bwe-tour--mini .scene[data-scene] .scene-canvas{ grid-column:2; grid-row:2; width:100%; margin:0; height:min(70vh, 640px); }
  /* alternate: the weave chapter puts its picture on the left */
  html.rw-flat .bwe-tour--mini .scene[data-scene="4"] .scene-text{ grid-column:2; }
  html.rw-flat .bwe-tour--mini .scene[data-scene="4"] .scene-canvas{ grid-column:1; }
  html.rw-flat .bwe-tour--mini .scene[data-scene="4"] .scene-stage{ grid-template-columns:minmax(0, 1fr) minmax(300px, 440px); }

  /* sheet chapters: text card centred above a centred sheet */
  html.rw-flat .bwe-tour--mini .scene[data-scene="2"] .scene-stage,
  html.rw-flat .bwe-tour--mini .scene[data-scene="3"] .scene-stage,
  html.rw-flat .bwe-tour--mini .scene[data-scene="5"] .scene-stage,
  html.rw-flat .bwe-tour--mini .scene[data-scene="6"] .scene-stage,
  html.rw-flat .bwe-tour--mini .scene[data-scene="7"] .scene-stage,
  html.rw-flat .bwe-tour--mini .scene[data-scene="8"] .scene-stage{
    display:flex; flex-direction:column; align-items:center;
  }
  html.rw-flat .bwe-tour--mini .scene[data-scene="5"] .scene-text,
  html.rw-flat .bwe-tour--mini .scene[data-scene="6"] .scene-text,
  html.rw-flat .bwe-tour--mini .scene[data-scene="7"] .scene-text,
  html.rw-flat .bwe-tour--mini .scene[data-scene="8"] .scene-text{ max-width:640px; margin:0 0 28px; text-align:center; }
  html.rw-flat .bwe-tour--mini .scene[data-scene="2"] .scene-canvas,
  html.rw-flat .bwe-tour--mini .scene[data-scene="3"] .scene-canvas,
  html.rw-flat .bwe-tour--mini .scene[data-scene="5"] .scene-canvas,
  html.rw-flat .bwe-tour--mini .scene[data-scene="6"] .scene-canvas,
  html.rw-flat .bwe-tour--mini .scene[data-scene="7"] .scene-canvas,
  html.rw-flat .bwe-tour--mini .scene[data-scene="8"] .scene-canvas{ width:100%; max-width:1000px; height:auto; margin:0; }
  html.rw-flat .bwe-tour--mini .scene[data-scene="2"] .scene-index,
  html.rw-flat .bwe-tour--mini .scene[data-scene="3"] .scene-index,
  html.rw-flat .bwe-tour--mini .scene[data-scene="5"] .scene-index,
  html.rw-flat .bwe-tour--mini .scene[data-scene="6"] .scene-index,
  html.rw-flat .bwe-tour--mini .scene[data-scene="7"] .scene-index,
  html.rw-flat .bwe-tour--mini .scene[data-scene="8"] .scene-index{ align-self:flex-start; margin-bottom:14px; }
  html.rw-flat .bwe-tour--mini .s5-paper{ flex-direction:row; align-items:center; justify-content:center; gap:48px; padding:40px 48px; }

  /* voices: portrait beside the words */
  html.rw-flat .bwe-tour--mini .voice-scene{ padding:88px 0 40px; }
  html.rw-flat .bwe-tour--mini .voice-stage{
    display:grid; grid-template-columns:minmax(300px, 440px) minmax(0, 1fr);
    column-gap:56px; row-gap:18px; align-items:center; max-width:1200px; margin:0 auto; padding:0 40px;
  }
  html.rw-flat .bwe-tour--mini .voice-scene .voice-index{ grid-column:1 / -1; margin:0 0 4px; }
  html.rw-flat .bwe-tour--mini .voice-portrait{ grid-column:1; grid-row:2; width:100%; margin:0; height:auto; aspect-ratio:4/5; }
  html.rw-flat .bwe-tour--mini .voice-content{ grid-column:2; grid-row:2; margin:0; max-width:640px; }
  html.rw-flat .bwe-tour--mini .voice-scene[data-vt="coral"] .voice-portrait{ grid-column:2; }
  html.rw-flat .bwe-tour--mini .voice-scene[data-vt="coral"] .voice-content{ grid-column:1; }
  html.rw-flat .bwe-tour--mini .voice-scene[data-vt="coral"] .voice-stage{ grid-template-columns:minmax(0, 1fr) minmax(300px, 440px); }

  html.rw-flat .bwe-tour .tour-hero-content{ padding:104px 6vw 88px; }
}

/* Finding-a-story frame on desktop: the composition was sized for a 1440px
   stage and now lives in a 700px frame. zoom scales every length inside it,
   percentages and inset:0 still fill the frame, so the whole picture shrinks
   to fit rather than clipping at the edges. */
@media (min-width:900px){
  html.rw-flat .bwe-tour--mini .scene[data-scene="1"] .scene-canvas > *{ zoom:0.62; }
}


/* ─────────────────────────────────────────────────────────────────────────
   7. FILMS AS VIDEO. The GIF img underneath is the poster and the fallback.
   ───────────────────────────────────────────────────────────────────────── */
.bwe-tour .s2-hero,
.bwe-tour .sp-film{ position:relative; }
.bwe-tour .s2-hero{ position:absolute; }
.bwe-tour .rw-film{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 28%;
  display:block; z-index:1; opacity:0; transition:opacity .5s ease;
  pointer-events:none;
}
.bwe-tour .rw-film.is-playing{ opacity:1; }
.bwe-tour .sp-film .sp-film-tag,
.bwe-tour .sp-film .sp-watch{ z-index:2; }



/* ─────────────────────────────────────────────────────────────────────────
   8. GRAIN. Static screenprint tooth on the hero and the dark picture frames.
   Never over body copy. A tiled SVG noise, rasterised once by the browser.
   ───────────────────────────────────────────────────────────────────────── */
.rw-grain::after{
  content:'';
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:180px 180px;
  opacity:.11;
  mix-blend-mode:overlay;
}
.hero.rw-grain::after{ z-index:0; }
.hero.rw-grain{ position:relative; }
html.rw-flat .bwe-tour--mini .scene[data-scene="1"] .scene-canvas.rw-grain::after,
html.rw-flat .bwe-tour--mini .scene[data-scene="4"] .scene-canvas.rw-grain::after{ z-index:3; opacity:.14; }
@media (prefers-reduced-transparency: reduce){ .rw-grain::after{ display:none; } }

/* ─────────────────────────────────────────────────────────────────────────
   9. MORE RETRO. Chapter numbers as stamped tags, pill buttons with ink
   outlines and hard shadows, voice portraits in the cream inset frame.
   ───────────────────────────────────────────────────────────────────────── */
html.rw-flat .bwe-tour--mini .scene-index,
html.rw-flat .bwe-tour--mini .voice-index{
  display:inline-block;
  width:max-content;
  padding:6px 12px 5px;
  background:var(--rw-box);
  color:var(--rw-outline);
  border:2px solid var(--rw-outline);
  border-radius:8px;
  box-shadow:3px 3px 0 var(--rw-outline);
  transform:rotate(-1.5deg);
  font-size:12px;
  letter-spacing:.14em;
  text-shadow:none;
}
html.rw-flat .bwe-tour--mini .voice-index{ background:#221a33; color:var(--rw-cream); border-color:var(--rw-cream); box-shadow:3px 3px 0 var(--rw-purple); }
@media (min-width:900px){
  html.rw-flat .bwe-tour--mini .scene-index,
  html.rw-flat .bwe-tour--mini .voice-index{ justify-self:start; margin-left:0; }
}

.bwe-tour .voice-cta,
.bwe-tour .sp-watch,
.bwe-tour .s2-watch-disc,
#nav .nav-cta,
#nav .nav-weave,
#nav .find-pill{
  border:2px solid var(--rw-outline) !important;
  box-shadow:3px 3px 0 var(--rw-outline) !important;
}
#nav .nav-cta:hover, #nav .nav-weave:hover, #nav .find-pill:hover{ transform:translate(1px,1px); box-shadow:2px 2px 0 var(--rw-outline) !important; }

/* Voice portraits: window inset on a cream field, the ad's video frame. */
html.rw-flat .bwe-tour--mini .voice-portrait{
  padding:12px;
  background:var(--rw-box);
  border-color:var(--rw-outline);
  box-shadow:var(--rw-shadow-x) var(--rw-shadow-y) 0 var(--rw-outline);
}
html.rw-flat .bwe-tour--mini .voice-portrait img{
  position:absolute; inset:12px; width:calc(100% - 24px); height:calc(100% - 24px);
  border-radius:12px; transform:none;
}
html.rw-flat .bwe-tour--mini .voice-portrait-play{ z-index:2; }

/* Hero sub: the highlighted words carry the accent. */
.hero .hero-sub strong{ color:#f0a878; font-weight:600; }
.hero .hero-sub .hero-sub-2 strong{ color:#c4a5e8; font-weight:700; }

/* Hero sub: wide enough that the tagline does not leave a single word alone. */
.hero .hero-sub{ max-width:780px; }


/* ─────────────────────────────────────────────────────────────────────────
   10. HERO TYPE, s128. The tagline was set in Fraunces italic at 1.22em, which
   did two things wrong at once: it introduced a third typeface inside a two
   line block, and it made the secondary line LARGER than the primary one, so
   the eye landed on the invitation before the definition. Both lines are now
   Fredoka. The tagline is distinguished by weight, tint and a deliberate gap.
   Line breaks are balanced rather than ragged, so the primary line no longer
   orphans its last three words.
   ───────────────────────────────────────────────────────────────────────── */
.hero .hero-sub{
  max-width:660px;
  text-wrap:balance;
  margin-bottom:52px;
}
.hero .hero-sub .hero-sub-2{
  font-family:'Fredoka',sans-serif;
  font-style:normal;
  font-weight:600;
  font-size:1em;
  letter-spacing:0;
  line-height:1.45;
  margin-top:.85em;
  color:#d8c4f4;
  font-variation-settings:normal;
}
.hero .hero-sub .hero-sub-2 strong{ color:#f0a878; font-weight:700; font-style:normal; }
.hero .hero-eye{ font-family:'Fredoka',sans-serif; font-weight:600; letter-spacing:.2em; }

/* The glow behind the sub was tuned for the italic serif and smears the heavier
   face. Tighten it to a single close shadow that still lifts cream off purple. */
.hero .hero-sub{ text-shadow:0 1px 6px rgba(20,12,40,.75) !important; }

/* Headline sits closer to the line it introduces. */
.hero .hero-h1{ margin-bottom:26px; }
@media (max-width:640px){
  .hero .hero-sub{ max-width:30ch; margin-bottom:40px; }
  .hero .hero-sub .hero-sub-2{ margin-top:.75em; }
}

/* ─────────────────────────────────────────────────────────────────────────
   11. FILMSTRIP, rebuilt s128. It did not read as film, and there were three
   specific reasons, all of them fixable rather than reasons to remove it.

   1. The holes were square, 10px wide on a 26px pitch, drawn with a
      linear-gradient (which cannot take a corner radius, so border-radius on
      the pseudo element did nothing). Real 35mm perforations are small
      rounded rectangles, taller than they are wide, on a tight pitch. They
      are now an SVG rect with an actual radius, 7 wide by 10 tall on a 19
      pitch, which is close to the real ratio.
   2. Every frame had a 2px cream border. No film has that. Frames on a strip
      are separated by the dark base itself. Border gone, replaced by a 1px
      inset black edge and a 3px gutter, so the frames sit close the way real
      ones do instead of floating as separate cards.
   3. Base was #1a1130, a purple. Film base is nearly black. Darker now, which
      also means a frame whose image fails to load reads as an unexposed
      frame rather than as a hole in the design.
   ───────────────────────────────────────────────────────────────────────── */
.hero .rw-filmstrip{
  position:relative; z-index:2;
  width:100vw; margin:44px calc(50% - 50vw) -60px;
  background:#150d26;
  border-top:var(--rw-line) solid var(--rw-outline);
  border-bottom:var(--rw-line) solid var(--rw-outline);
  padding:20px 0;
  overflow:hidden;
}
.hero .rw-filmstrip::before,
.hero .rw-filmstrip::after{
  content:''; position:absolute; left:0; right:0; height:10px; z-index:2; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='10'%3E%3Crect x='0' y='0' width='7' height='10' rx='1.8' fill='%23EFE8DA'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-position:left center;
}
.hero .rw-filmstrip::before{ top:5px; }
.hero .rw-filmstrip::after{ bottom:5px; }
.hero .rw-fs-track{ display:flex; gap:3px; width:max-content; padding:0 3px; animation:rw-crawl 70s linear infinite; }
@keyframes rw-crawl{ to{ transform:translateX(-50%); } }
.hero .rw-fs-cell{
  position:relative; flex:0 0 auto; width:112px; height:74px; border-radius:1px; overflow:hidden;
  background:#241736; border:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.55);
}
.hero .rw-fs-cell img{ width:100%; height:100%; object-fit:cover; display:block; }
html.rw-phone .hero .rw-filmstrip{ margin-bottom:-60px; padding:18px 0; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
html.rw-phone .hero .rw-filmstrip::-webkit-scrollbar{ display:none; }
html.rw-phone .hero .rw-fs-track{ animation:none; }
html.rw-phone .hero .rw-fs-cell{ width:94px; height:63px; }
html.rw-phone .hero .rw-filmstrip{ padding:17px 0; }
html.rw-phone .hero .rw-filmstrip::before{ top:4px; }
html.rw-phone .hero .rw-filmstrip::after{ bottom:4px; }
html.rw-phone .hero .rw-fs-cell:nth-child(n+13){ display:none; }
@media (prefers-reduced-motion: reduce){ .hero .rw-fs-track{ animation:none; } }

/* Meet: the film that plays in place when you rest on a face. */
video.rw-meet{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%;
  z-index:3; opacity:0; transition:opacity .35s ease; pointer-events:none; border-radius:inherit;
}
video.rw-meet.is-playing{ opacity:1; }


/* ─────────────────────────────────────────────────────────────────────────
   4b. THE GATEWAY, s128. The band between the filmstrip and chapter one.
   Three things were wrong and all three read as "not quite finished":

   1. The eyebrow was Gaegu, uppercase, tracked at .12em. Gaegu is a
      handwriting face; its letterforms are not built for caps with tracking,
      so it looked like a font substitution rather than a choice. It is now
      Fredoka, matching .hero-eye directly above it.
   2. The sub line was Gaegu 700 at 24px desktop and 19.5px phone. That is
      handwriting doing body work at near headline scale. Now Fredoka, sized
      just under the hero sub so the two read as one family.
   3. Measured dead space between the sub and the chapter tag: 174px on
      desktop, 102px on phone. A line that says "scroll to see" followed by a
      void makes the page look broken. Halved on both, by trimming the
      gateway's bottom padding and pulling only the FIRST chapter up. Every
      other chapter keeps its full separation.
   ───────────────────────────────────────────────────────────────────────── */
html.rw-flat .bwe-tour--embedded .tour-hero-eye{
  font-family:'Fredoka',sans-serif;
  font-weight:600;
  font-size:14px;
  letter-spacing:.18em;
  margin-bottom:18px;
}
html.rw-flat .bwe-tour--embedded .tour-hero-sub--lg{
  font-family:'Fredoka',sans-serif;
  font-weight:500;
  font-size:clamp(17px, 1.9vw, 21px);
  line-height:1.5;
  max-width:44ch;
  text-wrap:balance;
}
html.rw-flat .bwe-tour--embedded .tour-hero-content{ padding-bottom:36px; }
html.rw-flat .bwe-tour--mini .scene[data-scene="1"]{ padding-top:28px; }
@media (min-width:900px){
  html.rw-flat .bwe-tour--embedded .tour-hero-content{ padding-bottom:44px; }
  html.rw-flat .bwe-tour--mini .scene[data-scene="1"]{ padding-top:52px; }
}


/* ─────────────────────────────────────────────────────────────────────────
   4c. TWO MEASURED DEFECTS IN THE GATEWAY BAND, s128.

   THE SEAM. There is a visible horizontal line where the gateway ends. Read
   the computed values: .tour-hero--warm is a gradient finishing at
   rgb(237,231,216) and the tour section directly beneath it is a flat
   rgb(245,240,230). Two creams eight to fourteen points apart meeting at a
   hard edge is exactly visible enough to read as an unfinished join. Ending
   the gradient on the neighbour's own colour makes the join disappear while
   keeping the gentle warm fall from the top.

   THE OFFSET CARDS. .pos-bl and friends set bottom:60px and left:40px for the
   pinned layout, where .scene-text is absolutely positioned. Flat mode resets
   it to position:relative, but those offsets survive and become a RELATIVE
   nudge, so every text card sits 60px above and 40px right of the grid cell it
   was placed in, out of alignment with the picture beside it. Zeroed in flat
   mode only; the pinned tour on /pro-tour is untouched.
   ───────────────────────────────────────────────────────────────────────── */
html.rw-flat .bwe-tour .tour-hero--warm{
  background:linear-gradient(168deg, #fdfaf2 0%, #f5f0e6 100%) !important;
}
html.rw-flat .bwe-tour--mini .scene-text.pos-bl,
html.rw-flat .bwe-tour--mini .scene-text.pos-br,
html.rw-flat .bwe-tour--mini .scene-text.pos-tl,
html.rw-flat .bwe-tour--mini .scene-text.pos-tr{
  top:auto; right:auto; bottom:auto; left:auto;
}


/* ═════════════════════════════════════════════════════════════════════════
   s128. THE SKY, AND THE INVERSION.

   The top screen is now the illustrated sky: one flattened WebP, 41KB on
   desktop and 25KB on phones, with a separate crop per orientation. It costs
   less than the video it replaces and it decodes nothing, so the largest
   element on the page is now a static image.

   CONTRAST, measured rather than eyeballed. Sampling the actual artwork in
   the bands where type sits: cream on the headline band is 4.11:1 on desktop
   and 3.07:1 on the mobile crop; ink is 3.31:1 and 4.43:1. Large display type
   needs 3:1 and body needs 4.5:1, so cream carries the headline but NOTHING
   carries the sub lines on the raw art. Hence the scrim below: a soft dark
   ellipse centred on the type, about 30% at its middle and gone by 78%. That
   is enough to put cream over 4.5:1 where it matters while the sun, the cloud
   and the teal all stay at full strength. A flat veil over the whole image
   would have worked too and would have wasted the artwork.

   THE INVERSION. The film moves down into the gateway, where a dark ground is
   what a faded grayscale film always wanted. So the page now reads: bright sky,
   then the filmstrip as the cut, then a dark gateway holding the film, then the
   chapters opening back into cream. The filmstrip stops being a stray band and
   becomes the transition it was always shaped like.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── THE SKY, second pass ────────────────────────────────────────────────
   Three things were wrong and all three were geometry.

   1. WRONG SCRIM SHAPE. I used a radial ellipse centred on the block. A
      headline is a WIDE horizontal band, and a radial is strongest at its
      centre and weakest at its left and right edges, which is exactly where
      "learn" and "curiosity" land. So the two hardest words to read were the
      two the scrim protected least. It is a feathered horizontal band now, so
      contrast is even across the whole line no matter what sits behind it.

   2. WRONG CROP. The art is 16:9. A desktop hero here is about 1.1:1, so
      cover scaled by height and threw away 38% of the width, which dragged
      the sun inward until it sat under the first word. Fitting to WIDTH
      instead renders the art at the aspect it was painted at and puts the
      clean upper purple exactly where the artist put it. Same approach as the
      phone, so one behaviour at every size.

   3. NO HORIZON. The art stopped and flat colour began, with a hard edge. It
      dissolves now, so the picture reads as sky above and atmosphere below.
   ───────────────────────────────────────────────────────────────────────── */
.hero{ position:relative; overflow:hidden; background:#7d68a0 !important; }
.hero .orb, .hero .chalk-deco, .hero .hero-gif-bg{ display:none !important; }

/* Line 774 of index.html gives every hero child position:relative and a
   stacking index, via a :not() list that names the OLD video wrapper. An empty
   absolutely-positioned div caught by that rule collapses to 0x0, so this box
   is stated outright rather than relying on inset alone. */
.hero .hero-sky{
  position:absolute !important;
  top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
  width:100% !important; height:100% !important;
  z-index:0 !important; pointer-events:none;
  /* Phone: the mobile art was painted with a sun two thirds of the width, so
     no crop or scale gets it out from under the first word; scaling only made
     it larger. Shown at the artist's own composition instead. What made it
     look wrong was not the sun, it was a near-black band over orange, which
     reads as brown. The phone band below is PURPLE, so the sun goes to a warm
     rose under the headline and stays in the brand family. */
  background-image:
    linear-gradient(180deg, rgba(125,104,160,0) 0, rgba(125,104,160,0) 112vw, #7d68a0 168vw),
    url("/images/hero-sky-mobile.webp");
  background-size:100% 100%, 100% auto;
  background-position:center top, center top;
  background-repeat:no-repeat, no-repeat;
  background-color:#7d68a0;
}
/* DESKTOP SCALE. Fit-to-width put the art at 1x, and at 1x the teal disc's
   edge ran straight through "judgment" and the sun sat under "learn". The art
   was painted with its big shapes in the CORNERS and a clean purple field in
   the upper middle; at 1x that clean field is about 580px wide, and the
   headline is 1100. Scaling the art to 150% pushes the sun mostly off the
   top-left edge, moves the teal down and right so it starts below the
   headline, and widens the clean field to roughly the headline's width. The
   shapes become soft colour at the edges, which is a poster, instead of hard
   edges under type, which is a fight. It is a 41KB painted WebP, so the
   upscale costs nothing and shows nothing. */
@media (min-width:820px){
  .hero .hero-sky{
    background-image:
      linear-gradient(180deg, rgba(125,104,160,0) 0, rgba(125,104,160,0) 62vw, #7d68a0 84vw),
      url("/images/hero-sky-desktop.webp");
    background-size:100% 100%, 150% auto;
    background-position:center top, 50% 0;
  }
}
@media (min-width:1500px){
  .hero .hero-sky{ background-size:100% 100%, 140% auto; }
}

/* The demo pill and its hint sit where the cloud comes in, cream on cream.
   The hint goes to ink and the pill gets the ink outline every other retro
   element on the page already has, so it reads on cloud and on sky alike. */
.hero .prdemo-tab-hint{ color:#3a2e52 !important; text-shadow:none !important; }
.hero .prdemo .prdemo-tabs,
.hero .prdemo [class*="tabs"]{ box-shadow:0 0 0 2px var(--rw-outline), 4px 5px 0 var(--rw-outline) !important; }

/* The band. Feathered top and bottom, strongest through the headline, clear by
   the time it reaches the cloud and the teal so the picture keeps its colour. */
.hero .hero-sky::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(34,18,63,.22) 0%,
    rgba(34,18,63,.34) 10%,
    rgba(34,18,63,.32) 34%,
    rgba(34,18,63,.20) 48%,
    rgba(34,18,63,.06) 60%,
    transparent 70%);
}
@media (max-width:819px){
  .hero .hero-sky::after{
    background:linear-gradient(180deg,
      rgba(74,46,122,.24) 0%,
      rgba(74,46,122,.34) 12%,
      rgba(74,46,122,.34) 40%,
      rgba(74,46,122,.20) 54%,
      rgba(74,46,122,.06) 64%,
      transparent 74%);
  }
  /* The sub lines are 17px cream, so they carry a per-glyph shadow that acts as
     a local scrim wherever a bright shape sits behind a word. */
  .hero .hero-sub{ text-shadow:0 1px 2px rgba(20,12,40,.9), 0 0 14px rgba(20,12,40,.55) !important; }
}
.hero .hero-h1, .hero .hero-sub, .hero .rw-filmstrip, .hero .prdemo, .hero .rw-msave-host{ position:relative; z-index:2; }

/* ── THE GATEWAY, second pass ───────────────────────────────────────────────
   The film was at 58% under a light wash, so you could read the tree, the
   building and the field. A recognisable photograph behind a headline is a
   stock-photo hero, and it was competing with the type instead of supporting
   it. Two changes: the film drops to 30%, and the purple above it goes from a
   thin wash to a real field. Grayscale plus a dense purple means the picture
   contributes texture and movement and nothing else, which is what "faded
   video behind purple" actually asks for. Same feathered band as the hero
   carries the type.
   ───────────────────────────────────────────────────────────────────────── */
html.rw-flat .bwe-tour .tour-hero--warm{
  background:linear-gradient(168deg, #33205f 0%, #2a1850 52%, #1f1139 100%) !important;
  position:relative; overflow:hidden;
  border-bottom:var(--rw-line) solid var(--rw-outline);
}
html.rw-flat .bwe-tour .tour-hero--warm .tour-hero-content{
  position:relative; z-index:2;
  padding-top:76px;
}
@media (min-width:900px){
  html.rw-flat .bwe-tour .tour-hero--warm .tour-hero-content{ padding-top:96px; }
}
.rw-gate-film{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.rw-gate-film .rw-hero-film{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 42%;
  opacity:0; transition:opacity 1.6s ease;
  filter:grayscale(1) contrast(1.04) brightness(1.06);
}
.rw-gate-film .rw-hero-film.is-playing{ opacity:.30; }
html.rw-phone .rw-gate-film .rw-hero-film.is-playing{ opacity:.24; }
.rw-gate-film::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(26,14,45,.40) 0%, rgba(26,14,45,.52) 30%, rgba(26,14,45,.44) 58%, rgba(26,14,45,.30) 100%),
    radial-gradient(ellipse 82% 70% at 50% 44%, rgba(122,82,186,.34), transparent 76%);
}
@media (prefers-reduced-motion: reduce){ .rw-gate-film .rw-hero-film{ display:none; } }

html.rw-flat .bwe-tour .tour-hero--warm .tour-hero-h{
  color:var(--rw-cream) !important;
  text-shadow:4px 5px 0 #150d26 !important;
}
html.rw-flat .bwe-tour .tour-hero--warm .tour-hero-h .pop{ color:#f0a878 !important; text-shadow:inherit; }
html.rw-flat .bwe-tour .tour-hero--warm .tour-hero-h .pop2{ color:#c4a5e8 !important; text-shadow:inherit; }
html.rw-flat .bwe-tour--embedded .tour-hero--warm .tour-hero-eye{ color:#f3c8aa !important; }
html.rw-flat .bwe-tour--embedded .tour-hero--warm .tour-hero-sub--lg{
  color:rgba(245,240,230,.96) !important;
  text-shadow:0 1px 8px rgba(16,9,30,.85);
}
html.rw-flat .bwe-tour .tour-hero--warm .tour-hero-sub--lg a{ color:inherit; }

/* ── filmstrip, perforation geometry corrected ──
   Real 35mm perforations are WIDER than they are tall: 2.79mm across by
   1.98mm high on a 4.75mm pitch. The previous pass made them 7 wide by 10
   tall, which is why they still read as a dotted rule rather than as film.
   Now 11 by 8 on a 19 pitch, which matches the real ratio closely. */
.hero .rw-filmstrip::before,
.hero .rw-filmstrip::after{
  height:8px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='8'%3E%3Crect x='0' y='0' width='11' height='8' rx='1.5' fill='%23EFE8DA'/%3E%3C/svg%3E");
}
.hero .rw-filmstrip::before{ top:6px; }
.hero .rw-filmstrip::after{ bottom:6px; }
html.rw-phone .hero .rw-filmstrip::before{ top:5px; }
html.rw-phone .hero .rw-filmstrip::after{ bottom:5px; }


/* ═════════════════════════════════════════════════════════════════════════
   s128 PASS THREE. White type on the sky, a sky that is alive, and the last
   two slides that were still wearing handwriting at body scale.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── ONE INK. The hero goes monochrome. ──
   The last pass only whitened the words that were already cream and left the
   coral and purple accents alone, which missed the actual problem. Those
   accents were not decoration on a flat ground any more. They were competing
   with an orange sun, a purple sky and a teal disc, all sitting in the same
   hue family at similar value. Coral on a sunlit sky and lavender on a purple
   sky are near-invisible no matter how the scrim is tuned, because the issue
   is hue collision, not contrast.

   So: the painting carries all the colour, the type carries all the message.
   Every word in the hero is one soft off-white. Hierarchy comes from size,
   weight and a little opacity, never from hue. This is how a film poster over
   artwork is set, and it is the only treatment that stays legible whichever
   part of the sky a word lands on.

   Not #ffffff, which was harsh against a soft painted ground, and not the
   brand cream #F5F0E6, which skews yellow against these blues and purples.
   #F8F6F3 is neutral: warm enough to sit with the sun, no yellow cast. */
.hero .hero-h1,
.hero .hero-h1 .pop,
.hero .hero-h1 .pop2,
.hero .hero-h1 span{ color:#f8f6f3 !important; }
.hero .hero-sub,
.hero .hero-sub strong,
.hero .hero-sub .hero-sub-2,
.hero .hero-sub .hero-sub-2 strong{ color:#f8f6f3 !important; }
/* The one permitted differentiation: the tagline steps back on opacity, so the
   definition reads first and the invitation second, without a colour change. */
.hero .hero-sub .hero-sub-2{ opacity:.88; }
.hero .hero-sub strong,
.hero .hero-sub .hero-sub-2 strong{ font-weight:700; }

/* ── The sky breathes ──
   A painting that never moves under a headline reads as a screenshot. Two
   very slow motions, both GPU-only: the whole sky drifts about four percent
   over forty six seconds, and seven stars added by bwe-home.js pulse on
   staggered cycles so no two are ever in phase. Nothing here costs a frame
   on a phone and all of it honours reduced motion. */
@keyframes rw-sky-drift{
  from{ transform:scale(1) translate3d(0,0,0); }
  to{   transform:scale(1.045) translate3d(0,-1.2%,0); }
}
@keyframes rw-star-pulse{
  0%,100%{ opacity:.35; transform:scale(.85); }
  50%{     opacity:1;   transform:scale(1.15); }
}
.hero .hero-sky{
  transform-origin:50% 40%;
  animation:rw-sky-drift 46s ease-in-out infinite alternate;
  will-change:transform;
}
.hero .rw-star{
  position:absolute; z-index:1; pointer-events:none;
  width:6px; height:6px; border-radius:50%;
  background:radial-gradient(circle, #fff 0%, rgba(255,255,255,.85) 35%, rgba(255,255,255,0) 72%);
  box-shadow:0 0 14px 4px rgba(255,255,255,.28);
  animation:rw-star-pulse var(--dur,5.6s) ease-in-out var(--delay,0s) infinite;
}
.hero .rw-star.is-big{ width:9px; height:9px; box-shadow:0 0 22px 6px rgba(255,255,255,.34); }
@media (prefers-reduced-motion: reduce){
  .hero .hero-sky{ animation:none; }
  .hero .rw-star{ animation:none; opacity:.8; }
}

/* ── The library slide ──
   "Everyone you saw is waiting to meet you" was Gaegu at 32px. Same rule as
   every other place it came up today: handwriting at body scale looks like a
   font that failed to load. Fredoka for both lines, with the closing line one
   weight heavier so it lands. */
.riv-sub{
  font-family:'Fredoka',sans-serif !important;
  font-weight:500 !important;
  font-size:clamp(18px, 2vw, 23px) !important;
  line-height:1.5 !important;
  max-width:44ch;
  margin-left:auto; margin-right:auto;
  text-wrap:balance;
}
.riv-close{
  font-family:'Fredoka',sans-serif !important;
  font-weight:600 !important;
  font-size:clamp(19px, 2.1vw, 24px) !important;
  letter-spacing:0 !important;
}

/* ── The slow-down slide ──
   Big white Shrikhand on purple with no offset floats. The offset is what the
   hero and the gateway both carry; this slide is the third dark field and it
   should speak with the same voice. Eyebrow moves off handwriting too. */
.man-h{ text-shadow:4px 5px 0 #150d26 !important; }
.man-h .pop{ text-shadow:inherit; }
.man-eye{
  font-family:'Fredoka',sans-serif !important;
  font-weight:600 !important;
  letter-spacing:.2em !important;
  color:rgba(255,255,255,.62) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   S129 r17. Four fixes, all append only. Nothing above this line is edited,
   so any one of them can be backed out by deleting its block.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. THE BLACK BOX AROUND THE DEMO PILL ───────────────────────────────────
   Cause: the rule near "The demo pill and its hint sit where the cloud comes
   in" uses `.hero .prdemo [class*="tabs"]`. That wildcard was written to catch
   whatever bwe-demo.js renders, and it does: it also catches .bwd-tabs-row,
   which is the plain flex wrapper the pill sits inside. .bwd-tabs-row has no
   border-radius, so `box-shadow:0 0 0 2px` draws a hard SQUARE ring around the
   whole row, which is the ugly black rectangle. The rounded pill inside it is
   .prdemo-tabs and that one is correct.
   Fix: take the ring off the wrapper and leave it on the pill. */
.hero .prdemo .bwd-tabs-row{ box-shadow:none !important; }
.hero .prdemo .prdemo-tabs{
  box-shadow:0 0 0 2px var(--rw-outline), 4px 5px 0 var(--rw-outline) !important;
}

/* ── 2. THE SKY CAME BACK TO LIFE ────────────────────────────────────────────
   The art was being flattened by two things at once: a scrim peaking at 34%
   of near-black purple across the whole upper hero, and a 150% upscale that
   pushed every painted shape off into the corners. Together they left a flat
   lilac field with a hint of tan top left and teal bottom right, which is not
   what was painted.
   The scrim was there to protect type. It is doing a job that a per-glyph
   shadow does better and more cheaply: a local shadow darkens only the 2px
   around each letter instead of dulling the entire picture. That technique is
   already in this file, applied to .hero-sub below 820px. Promote it to every
   width, then the global wash can come down to a third of what it was and the
   headline stays just as readable because it already carries a hard ink
   offset of its own.
   The upscale drops 150 to 125, which brings the sun, the cloud and the teal
   back into frame without letting either shape run through the headline (the
   thing the 150 was protecting against). */
.hero .hero-sky::after{
  background:linear-gradient(180deg,
    rgba(34,18,63,.12) 0%,
    rgba(34,18,63,.17) 10%,
    rgba(34,18,63,.15) 34%,
    rgba(34,18,63,.09) 48%,
    rgba(34,18,63,.03) 60%,
    transparent 70%);
}
.hero .hero-sub{
  text-shadow:0 1px 2px rgba(20,12,40,.9), 0 0 14px rgba(20,12,40,.55) !important;
}
.hero .hero-price-line{
  text-shadow:0 1px 2px rgba(20,12,40,.92), 0 0 14px rgba(20,12,40,.6) !important;
}
@media (min-width:820px){
  .hero .hero-sky{ background-size:100% 100%, 125% auto; }
  /* The flat lilac slab that used to fill the lower hero goes translucent so
     the painting keeps going down to the cut instead of stopping in a band. */
  .hero .hero-sky{
    background-image:
      linear-gradient(180deg, rgba(125,104,160,0) 0, rgba(125,104,160,0) 62vw, rgba(125,104,160,.34) 88vw),
      url("/images/hero-sky-desktop.webp");
  }
}
@media (min-width:1500px){
  .hero .hero-sky{ background-size:100% 100%, 118% auto; }
}

/* ── 3. THE TACKY BAND UNDER THE FILMSTRIP ───────────────────────────────────
   The hero is min-height:100vh with justify-content:center, so when its
   content is shorter than the viewport the leftover space lands ABOVE and
   BELOW the children. The filmstrip is the last child, so a strip of light
   hero purple was being left between the dark filmstrip and the dark gateway
   below it: sky, then a hard cut to ink, then a slab of lilac, then another
   hard cut to near black. Three surfaces in 200px.
   The filmstrip is meant to be the cut between the bright top of the page and
   the dark chapters. Fading the bottom of the hero into the same ink the
   filmstrip is painted in makes it read as exactly that: one dark ground that
   the perforations sit inside.

   First attempt used a 240px gradient on .hero::after, but the gap is
   dynamic: it is whatever flex centering leaves over, so on a short viewport
   the gradient started too late and on a tall one it started too early, and
   either way a lilac slab stayed visible right under the strip.
   The strip paints it instead. A hard box-shadow with no blur, in the strip's
   own ink. Offset alone is not enough: an offset MOVES the shadow rectangle,
   it does not stretch it, so 0 1200px 0 0 drew a 122px bar a screen and a
   half below and nothing in between. Offset 600 with spread 600 inflates the
   rect by 600 on every side and then pushes it down 600, so its top edge
   lands exactly on the strip's own top edge and its bottom edge 1200px below
   the strip. Everything under the strip is filled, nothing above it is.
   .hero has overflow:hidden, so it can never bleed into the section below,
   and the strip is already full-bleed 100vw, so the fill is edge to edge. */
.hero .rw-filmstrip{
  box-shadow:0 600px 0 600px #150d26;
}

/* ── 4. ONE VOICE ON THE GATEWAY ─────────────────────────────────────────────
   "What does a year with reweave feel like?" was cream, then coral, then pale
   violet across a single sentence, over a moving film. Three colours on one
   line makes the eye parse the colours instead of the sentence, and on a dark
   film ground the coral and the violet are the two that lose contrast first.
   All cream. The coral stays exactly one place on this screen, the dot before
   the eyebrow, which is how the rest of the page already works. */
.bwe-tour .tour-hero--warm .tour-hero-h,
.bwe-tour .tour-hero--warm .tour-hero-h .pop,
.bwe-tour .tour-hero--warm .tour-hero-h .pop2,
html.rw-flat .bwe-tour .tour-hero--warm .tour-hero-h,
html.rw-flat .bwe-tour .tour-hero--warm .tour-hero-h .pop,
html.rw-flat .bwe-tour .tour-hero--warm .tour-hero-h .pop2{
  color:#F8F6F3 !important;
}
.bwe-tour--embedded .tour-hero--warm .tour-hero-eye,
html.rw-flat .bwe-tour--embedded .tour-hero--warm .tour-hero-eye{
  color:#F8F6F3 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   S129 r17b. Second design pass, after auditing the rendered page end to end.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 5. THE DEMO PILL NEVER GOT ITS INK RING ─────────────────────────────────
   Fix 1 above took the square ring off .bwd-tabs-row and put it back on
   .prdemo-tabs, and then nothing appeared at all. bwe-demo.js styles the same
   pill with `.prdemo--showroom:not(.prdemo--modal) .prdemo-tabs` carrying a
   soft blurred shadow and !important. A :not() counts its argument, so that
   selector scores one class higher than `.hero .prdemo .prdemo-tabs` and won.
   The old wildcard had been beating it only because an attribute selector
   scored higher still, which is also exactly why it leaked onto the wrapper.
   Matching their selector and arriving later in the cascade wins cleanly, and
   the pill stops being the one soft-shadowed floating object on a page whose
   entire language is ink outlines and hard offsets. */
.hero .prdemo--showroom:not(.prdemo--modal) .prdemo-tabs{
  box-shadow:0 0 0 2px var(--rw-outline), 5px 6px 0 var(--rw-outline) !important;
}

/* ── 6. THE EYEBROW OVER THE DEMO ────────────────────────────────────────────
   Set to near black ink back when the pill sat on the pale cloud. With the
   art brought back in fix 2 that line now sits on mid purple and it is the
   one piece of dark type anywhere on the sky. Off white with the same per
   glyph shadow every other hero line carries. */
.hero .prdemo-tab-hint{
  color:#F8F6F3 !important;
  text-shadow:0 1px 2px rgba(20,12,40,.9), 0 0 14px rgba(20,12,40,.55) !important;
}
.hero .prdemo-tab-hint::before{ background:var(--coral) !important; }

/* ── 7. THE PRICE BLOCK ARRIVED WITH NO ANNOUNCEMENT ─────────────────────────
   The library river above is #F5F0E6 and the pricing field is #EDE4D3. Two
   creams four points apart is a change the eye does not register, so the most
   important block on an 18,900px page was arriving as a slightly different
   shade of the same thing.
   The page already owns a way to say "new chapter": the filmstrip cut under
   the hero. Reusing it here gives the page exactly two cuts, one into the
   chapters and one into the price, and the second one lands as an event
   rather than a tint. Same ink, same 19 pitch perforations, same cream
   sprocket colour as the strip. */
#pricing{ position:relative; }
#pricing::before{
  content:''; position:absolute; top:0; left:0; right:0; height:24px;
  background:#150d26;
  border-bottom:var(--rw-line) solid var(--rw-outline);
  z-index:1; pointer-events:none;
}
#pricing::after{
  content:''; position:absolute; top:7px; left:0; right:0; height:10px;
  z-index:2; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='10'%3E%3Crect x='0' y='0' width='7' height='10' rx='1.8' fill='%23EFE8DA'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-position:left center;
}
@media (max-width:600px){
  #pricing::before{ height:20px; }
  #pricing::after{ top:5px; }
}

/* ── 8. THE PHONE NAV FIX NEVER REACHED THIS PAGE ────────────────────────────
   r17 added a rule to bwe-nav.css that brings .nav-r back on phones, which
   both shows the Begin pill logged out and restores the profile avatar for
   signed-in members (bwe-nav-auth.js mounts .rw-profile inside .nav-r). It
   worked on every page except this one. The "Tablet nav" rule above hides
   .nav-r below 900px with !important, and this file loads AFTER bwe-nav.css,
   so same selector plus same !important meant this file won. Caught in S129
   r19 by measuring computed display at 360, 390, 480, 600 and 768: none at
   every width. Restored here, below the rule it overrides, at the same 900px
   breakpoint so tablets between 769 and 900 get it too. Donate and Log in
   stay hidden in the bar; both are in the hamburger. */
@media (max-width:900px){
  #nav .nav-r{ display:flex !important; gap:10px; margin-left:auto !important; margin-right:0; }
  #nav .nav-r .nav-donate,
  #nav .nav-r .nav-login{ display:none !important; }
  #nav .nav-r{ order:1; }
  #nav .nav-ham{ order:2; margin-left:8px !important; }
}