*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--rfb-ink);color:var(--rfb-paper);font-family:Montserrat,Arial,sans-serif}a{color:inherit}.skip{position:fixed;z-index:100;left:10px;top:8px;transform:translateY(-160%);background:#fff;color:#111;padding:12px}.skip:focus{transform:none}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:var(--rfb-t-micro);letter-spacing:var(--rfb-track-label)}.brand img{width:48px;height:48px;border-radius:var(--rfb-r-round)}@keyframes worldDrift{to{transform:scale(1.035) translateX(-.35%)}}.story-evidence>div>p{color:var(--rfb-brass);font:700 var(--rfb-t-micro)/1 Montserrat;letter-spacing:var(--rfb-track-word)}@keyframes coverFloat{50%{transform:perspective(1000px) rotateY(-5deg) rotateZ(.3deg) translateY(-8px)}}.rain-layer,.leaf-layer,.sand-layer,.rail-light,.sun-haze{position:absolute;z-index:2;inset:0;pointer-events:none}.rain-layer{opacity:.28;background:repeating-linear-gradient(104deg,transparent 0 29px,#cde6f12f 30px 31px,transparent 32px 59px);background-size:200% 100%;animation:rain 3s linear infinite}@keyframes rain{to{background-position:-150px 180px}}.rail-light{background:linear-gradient(118deg,transparent 45%,#bfe9ff30 55%,transparent 67%);mix-blend-mode:screen;animation:railPulse 4s ease-in-out infinite}@keyframes railPulse{50%{opacity:.45}}/* Motes of light in the air, not a polka-dot grid. A single hard-edged disc
   tiled at 173x137 read as a regular lattice over the hero art. Three soft
   glows on tile sizes that share no common factor never line up inside a
   viewport, and each drifts on its own vector. */
.leaf-layer{background-image:radial-gradient(circle at 21% 33%,#d1b44f30 0 1.5px,transparent 8px),radial-gradient(circle at 72% 12%,#e6cd8226 0 2.5px,transparent 13px),radial-gradient(circle at 45% 79%,#d1b44f24 0 1px,transparent 6px);background-size:317px 241px,419px 337px,233px 179px;opacity:.55;animation:leafDrift 34s linear infinite}@keyframes leafDrift{to{background-position:-160px 340px,130px 300px,-95px 255px}}
.calm .leaf-layer{animation:none}.sand-layer{opacity:.22;background-image:radial-gradient(circle,var(--rfb-brass-lit) 0 1px,transparent 1.6px);background-size:31px 27px;animation:sandDrift 12s linear infinite}@keyframes sandDrift{to{background-position:300px 30px}}.sun-haze{background:radial-gradient(circle at 72% 25%,#ffe9a969,transparent 28%);mix-blend-mode:screen;animation:haze 5.5s ease-in-out infinite}@keyframes haze{50%{opacity:.65}}.story-evidence{min-height:72svh;display:grid;grid-template-columns:1fr 1.25fr;gap:8vw;align-items:center;padding:10svh 7vw;background:radial-gradient(circle at 25% 35%,#4a2c18,var(--rfb-ink) 65%)}.story-evidence h2{font:600 clamp(43px,4.7vw,74px)/.92 Cormorant,Georgia,serif;margin:14px 0}.story-evidence>div>span{display:block;max-width:620px;color:#ccb995;font:20px/1.5 Cormorant,Georgia,serif}.evidence-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;perspective:900px}.evidence-cards article{min-height:230px;padding:30px 22px;background:linear-gradient(145deg,var(--rfb-paper),#c5a573);color:#28190c;border:1px solid var(--rfb-paper-warm);border-radius:var(--rfb-r-md);box-shadow:0 18px 35px var(--rfb-scrim-2);transition:.4s}.evidence-cards article:nth-child(2){transform:translateY(-22px)}.evidence-cards article:hover{transform:translateY(-12px) rotateY(-3deg)}.evidence-cards article:nth-child(2):hover{transform:translateY(-34px) rotateY(-3deg)}.evidence-cards b{font-size:var(--rfb-t-micro);letter-spacing:var(--rfb-track-word)}.evidence-cards p{font:18px/1.4 Cormorant,Georgia,serif}.pending-seal{display:grid;place-items:center;flex:0 0 62px;height:62px;border:2px solid #b88f4e;border-radius:var(--rfb-r-round);color:var(--rfb-brass);font:700 16px Cormorant}body.garden-world{--gold:#d2bd6e}body.jungle-world{--gold:#e4bc5d}body.desert-world{--gold:#e8bd6d}@media(prefers-reduced-motion:reduce){*{animation:none;scroll-behavior:auto;transition-duration:.01ms}}@media(max-width:760px){.brand span{display:none}.story-evidence{grid-template-columns:1fr;padding:80px 7vw}.evidence-cards{grid-template-columns:1fr}.evidence-cards article,.evidence-cards article:nth-child(2){min-height:0;transform:none}}

/* ============================================================================
   The book hero — one composition, three viewports.

   Rebuilt 2026-09-08 (Phase 4). It was five absolutely-positioned percentages,
   which is why 403px of a 1,038px tablet hero carried no content: the copy was
   pinned to the top, the art to the bottom, and nothing owned the middle.

   Now it is a grid. Slack is distributed by align-content, never pooled into a
   single band, and the art is a real pair (guide + object) instead of two
   independently positioned images.
   ========================================================================= */
.book-hero{
  position:relative; isolation:isolate; overflow:hidden;
  display:grid;
  grid-template-areas:"copy" "art";
  grid-template-rows:auto auto;
  align-content:center;
  justify-items:stretch;
  gap:clamp(20px,3.5vw,44px);
  min-height:min(100svh, 720px);
  padding:calc(var(--rfb-head-h) + var(--rfb-s6)) var(--rfb-gutter) var(--rfb-s7);
}
@media (min-width:900px){
  .book-hero{
    grid-template-areas:"copy art";
    grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
    grid-template-rows:auto;
    align-items:center;
    gap:clamp(28px,4vw,72px);
    min-height:100svh;
    padding-block:calc(var(--rfb-head-h) + var(--rfb-s7)) var(--rfb-s8);
  }
}

.world-backdrop{
  position:absolute; inset:0; z-index:var(--rfb-z-under);
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--rfb-night) 82%, transparent) 0%,
                            color-mix(in srgb, var(--rfb-night) 40%, transparent) 46%,
                            color-mix(in srgb, var(--rfb-night) 92%, transparent) 100%),
    var(--world);
  background-size:cover; background-position:center;
  filter:saturate(.94) brightness(.74);
  transform:scale(1.05);
}
@media (min-width:900px){
  /* Wide screens read left-to-right, so the scrim is a side wash instead. */
  .world-backdrop{
    background-image:
      linear-gradient(90deg, color-mix(in srgb, var(--rfb-night) 90%, transparent) 0 30%,
                             color-mix(in srgb, var(--rfb-night) 38%, transparent) 62%,
                             color-mix(in srgb, var(--rfb-night) 74%, transparent) 100%),
      var(--world);
  }
}

.hero-copy{
  grid-area:copy; position:relative; z-index:2;
  max-width:34rem; justify-self:start;
  text-shadow:0 3px 18px color-mix(in srgb, var(--rfb-night) 80%, transparent);
}
@media (min-width:900px){ .hero-copy{ max-width:38rem; } }

.hero-copy>p{
  margin:0; color:var(--rfb-brass);
  font:700 var(--rfb-t-micro)/1 var(--rfb-ui);
  letter-spacing:var(--rfb-track-word); text-transform:uppercase;
}
.hero-copy h1{
  margin:var(--rfb-s3) 0 var(--rfb-s4);
  font:600 var(--rfb-t-h1)/.88 var(--rfb-display);
  text-wrap:balance;
}
.hero-copy h1 em{ color:var(--rfb-brass-lit); font-weight:500; }
.hero-copy>span{
  display:block; max-width:34rem;
  font:italic var(--rfb-t-lead)/1.38 var(--rfb-display);
  color:var(--rfb-paper-dim); text-wrap:pretty;
}

.hero-actions{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--rfb-s3);
  margin-top:var(--rfb-s5); max-width:26rem;
}
@media (min-width:600px){
  .hero-actions{ display:flex; flex-wrap:wrap; max-width:none; }
}
.hero-actions a{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--rfb-tap-lg); padding:0 var(--rfb-s5);
  border:1px solid color-mix(in srgb, var(--rfb-brass) 62%, transparent);
  border-radius:var(--rfb-r-sm);
  background:color-mix(in srgb, var(--rfb-ink) 82%, transparent);
  color:var(--rfb-paper); text-decoration:none;
  font:600 var(--rfb-t-label)/1 var(--rfb-ui);
  letter-spacing:var(--rfb-track-label); text-transform:uppercase;
  transition:background var(--rfb-med) var(--rfb-ease),
             transform var(--rfb-med) var(--rfb-ease);
}
/* "Take it home" is the commerce action and must not look optional. */
.hero-actions a[href="#purchase"]{
  border-color:var(--rfb-brass);
  background:linear-gradient(180deg, var(--rfb-brass-lit), var(--rfb-brass));
  color:var(--rfb-ink);
}
.hero-actions a:hover,.hero-actions a:focus-visible{
  background:var(--rfb-brass); color:var(--rfb-ink); transform:translateY(-3px);
}
.hero-actions a[href="#purchase"]:hover{ filter:brightness(1.08); transform:translateY(-3px); }

/* ---- the art pair: the guide leads, the book follows ---- */
.book-hero-art{
  grid-area:art; position:relative; z-index:var(--rfb-z-base);
  display:grid; grid-auto-flow:column; grid-auto-columns:max-content;
  align-items:end; justify-content:center;
  gap:clamp(2px,1.6vw,26px);
  min-width:0;
}
@media (min-width:900px){ .book-hero-art{ justify-content:end; } }

.book-hero-art .epub-cast,
.book-hero-art .melody-character{
  width:auto; height:clamp(200px, 30svh, 400px);
  object-fit:contain; object-position:bottom;
  filter:drop-shadow(0 24px 34px color-mix(in srgb, var(--rfb-night) 78%, transparent));
}
@media (min-width:900px){
  .book-hero-art .epub-cast,
  .book-hero-art .melody-character{ height:clamp(300px, 52svh, 520px); }
}

/* A book is an object: face, page block, board and a spine that catches light. */
.book-hero-art .floating-cover{
  height:clamp(150px, 23svh, 300px); width:auto;
  aspect-ratio:2/3; object-fit:cover;
  border:6px solid var(--rfb-paper);
  border-left:11px solid var(--rfb-wood);
  border-radius:2px 9px 9px 2px;
  box-shadow:
    5px 6px 0 color-mix(in srgb, var(--rfb-paper-dim) 80%, transparent),
    9px 10px 0 color-mix(in srgb, var(--rfb-wood) 70%, transparent),
    0 30px 56px color-mix(in srgb, var(--rfb-night) 84%, transparent);
  transform:perspective(1100px) rotateY(-9deg);
}
@media (min-width:900px){
  .book-hero-art .floating-cover{ height:clamp(230px, 40svh, 400px); }
}

/* ============================================================================
   The purchase shelf — the storyworld's own materials.

   Rebuilt 2026-09-08 (Phase 5). It was a flat crimson rectangle for the direct
   sale sitting beneath two bright parchment retailer blocks, so the eye landed
   on Barnes & Noble before it landed on the $3.00 checkout. And the selected
   edition was signalled by fill colour alone.

   The direct sale is now a brass-edged plate — the pressed, made object in a
   world of brass and lamplight. The retailers are quiet engraved rows. Crimson
   is the wax seal on the plate, not the whole card.

   books/book.css owns this outright; 78 competing selectors were removed from
   site-system-v6.css, homepage-v9.css and responsive.css first.
   ========================================================================= */
.purchase-world{
  display:grid; align-content:center;
  min-height:min(82svh, 620px);
  padding:var(--rfb-s9) var(--rfb-gutter);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--rfb-night) 90%, transparent) 0%,
      color-mix(in srgb, var(--rfb-night) 62%, transparent) 45%,
      color-mix(in srgb, var(--rfb-night) 88%, transparent) 100%),
    var(--rfb-book-scene, url('../assets/storyworld-purchase.webp')) center/cover;
}
[data-purchase-book]{
  width:min(100%, 620px); margin-inline:auto;
  display:grid; gap:var(--rfb-s6);
}
@media (min-width:900px){
  /* Three children, two columns: name the areas or the drawer wraps back under
     the heading and the direct plate ends up half its intended width. */
  [data-purchase-book]{
    width:min(100%, 1080px);
    grid-template-columns:minmax(0,.78fr) minmax(0,1fr);
    grid-template-areas:"invite editions" "invite drawer";
    grid-template-rows:auto 1fr;
    gap:var(--rfb-s2) clamp(32px,5vw,88px); align-items:start;
  }
  .purchase-heading{ grid-area:invite; }
  .edition-tabs{ grid-area:editions; }
  .retailer-drawer{ grid-area:drawer; }
}

/* ---- the invitation ---- */
.purchase-heading{ align-self:center; max-width:28rem; }
.purchase-heading>p{
  margin:0; color:var(--rfb-brass);
  font:700 var(--rfb-t-micro)/1 var(--rfb-ui);
  letter-spacing:var(--rfb-track-word); text-transform:uppercase;
}
.purchase-heading h2{
  margin:var(--rfb-s3) 0;
  font:600 var(--rfb-t-h2)/1.02 var(--rfb-display);
  color:var(--rfb-paper); text-wrap:balance;
}
.purchase-heading>span{
  display:block; max-width:30rem;
  font:italic var(--rfb-t-body)/1.5 var(--rfb-display);
  color:var(--rfb-paper-dim); text-wrap:pretty;
}

/* ---- edition tabs: a mark AND a fill, never a fill alone ---- */
.edition-tabs{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--rfb-s3);
  margin-bottom:var(--rfb-s5);
}
.edition-tabs button{
  display:grid; gap:2px; justify-items:start; text-align:left;
  min-height:var(--rfb-tap-lg); padding:var(--rfb-s3) var(--rfb-s4);
  border:1px solid color-mix(in srgb, var(--rfb-brass) 34%, transparent);
  border-radius:var(--rfb-r-sm);
  background:color-mix(in srgb, var(--rfb-night) 62%, transparent);
  color:var(--rfb-paper-dim); cursor:pointer;
  transition:border-color var(--rfb-fast) var(--rfb-ease),
             background var(--rfb-fast) var(--rfb-ease);
}
.edition-tabs button b{
  font:600 var(--rfb-t-label)/1.2 var(--rfb-ui);
  letter-spacing:.04em; color:var(--rfb-paper);
}
.edition-tabs button span{ font:400 var(--rfb-t-micro)/1.35 var(--rfb-ui); }
.edition-tabs button::before{
  content:"○ "; color:var(--rfb-brass-deep);
  font-size:var(--rfb-t-micro); line-height:1;
}
.edition-tabs button[aria-selected="true"]{
  border-color:var(--rfb-brass);
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--rfb-brass) 22%, transparent),
    color-mix(in srgb, var(--rfb-brass) 8%, transparent));
  color:var(--rfb-paper);
}
.edition-tabs button[aria-selected="true"]::before{ content:"● "; color:var(--rfb-brass-lit); }
.edition-tabs button:hover{ border-color:var(--rfb-brass); }

/* ---- the direct sale: a brass plate, pressed ---- */
.rfb-direct-buy{
  position:relative; display:grid; width:100%;
  grid-template-columns:1fr auto; align-items:center;
  gap:var(--rfb-s1) var(--rfb-s5);
  margin:0 0 var(--rfb-s5);
  padding:var(--rfb-s5) var(--rfb-s5) var(--rfb-s4);
  text-align:left; cursor:pointer;
  border:1px solid var(--rfb-brass);
  border-radius:var(--rfb-r-sm);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--rfb-brass) 20%, transparent) 0%,
      color-mix(in srgb, var(--rfb-night) 78%, transparent) 46%,
      color-mix(in srgb, var(--rfb-night) 92%, transparent) 100%),
    color-mix(in srgb, var(--rfb-ink) 90%, transparent);
  color:var(--rfb-paper);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--rfb-brass-lit) 55%, transparent),
    var(--rfb-lift-2);
  transition:transform var(--rfb-med) var(--rfb-ease),
             box-shadow var(--rfb-med) var(--rfb-ease);
}
.rfb-direct-buy>span{
  grid-column:1; font:600 var(--rfb-t-body)/1.3 var(--rfb-ui); color:var(--rfb-paper);
}
.rfb-direct-buy>b{
  grid-column:2; grid-row:1/3; justify-self:end; align-self:center;
  white-space:nowrap;
  font:600 clamp(22px,2.4vw,34px)/1 var(--rfb-display);
  color:var(--rfb-brass-lit);
}
.rfb-direct-buy>small{
  grid-column:1; font-size:var(--rfb-t-micro);
  color:var(--rfb-paper-dim); line-height:1.5;
}
/* the wax seal */
.rfb-direct-buy::after{
  content:""; position:absolute; top:-7px; left:var(--rfb-s5);
  width:14px; height:14px; border-radius:var(--rfb-r-round);
  background:radial-gradient(circle at 34% 30%,
    var(--rfb-crimson-lit), var(--rfb-crimson) 58%, var(--rfb-crimson-deep));
  box-shadow:0 1px 4px color-mix(in srgb, var(--rfb-night) 70%, transparent);
}
.rfb-direct-buy:hover,.rfb-direct-buy:focus-visible{
  transform:translateY(-3px);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--rfb-brass-lit) 75%, transparent),
    var(--rfb-lift-3);
}
@media (max-width:600px){
  .rfb-direct-buy{ grid-template-columns:1fr; }
  .rfb-direct-buy>b{ grid-column:1; grid-row:auto; justify-self:start; }
}

/* ---- the other booksellers: quiet, engraved ---- */
.retailer-alternatives{
  margin:var(--rfb-s5) 0 var(--rfb-s3);
  color:var(--rfb-paper-dim);
  font:600 var(--rfb-t-micro)/1 var(--rfb-ui);
  letter-spacing:var(--rfb-track-label); text-transform:uppercase;
}
.retailer-drawer>a{
  display:flex; align-items:center; justify-content:space-between; gap:var(--rfb-s4);
  min-height:var(--rfb-tap-lg); padding:var(--rfb-s3) var(--rfb-s4);
  border:0; border-top:1px solid color-mix(in srgb, var(--rfb-brass) 24%, transparent);
  background:none; color:var(--rfb-paper); text-decoration:none;
  transition:background var(--rfb-fast) var(--rfb-ease);
}
.retailer-drawer>a:last-of-type{
  border-bottom:1px solid color-mix(in srgb, var(--rfb-brass) 24%, transparent);
}
.retailer-drawer>a>span{ font:500 var(--rfb-t-body)/1.3 var(--rfb-display); }
.retailer-drawer>a>b{
  font:600 var(--rfb-t-micro)/1 var(--rfb-ui);
  letter-spacing:var(--rfb-track-label); text-transform:uppercase;
  color:var(--rfb-brass-lit); white-space:nowrap;
}
.retailer-drawer>a:hover{ background:color-mix(in srgb, var(--rfb-brass) 10%, transparent); }

.retailer-pending{
  display:flex; gap:var(--rfb-s4); align-items:flex-start;
  padding:var(--rfb-s4);
  border:1px dashed color-mix(in srgb, var(--rfb-brass) 34%, transparent);
  border-radius:var(--rfb-r-sm);
  color:var(--rfb-paper-dim);
}
.retailer-pending .pending-seal{
  flex:none; display:grid; place-items:center;
  width:44px; height:44px; border-radius:var(--rfb-r-round);
  border:1px solid color-mix(in srgb, var(--rfb-brass) 50%, transparent);
  font:700 var(--rfb-t-micro)/1 var(--rfb-ui); letter-spacing:var(--rfb-track-body);
  color:var(--rfb-brass);
}
.retailer-pending b{ display:block; color:var(--rfb-paper); font:600 var(--rfb-t-body)/1.4 var(--rfb-ui); }
.retailer-pending p{ margin:var(--rfb-s2) 0 0; font-size:var(--rfb-t-micro); line-height:1.55; }

/* The purchase backdrop is a 219 KB plate sitting behind a scrim on every book page.
   At phone width the 87 KB cut is indistinguishable under that scrim. */
@media(max-width:600px){:root{--rfb-book-scene:url('../assets/storyworld-purchase-mobile.webp')}}

/* On a wide desktop the hero grid spanned the whole viewport, so the title block was
   pinned to the left edge and the character-plus-cover pair to the right, leaving ~660px
   of dead corridor between them at 1920. The backdrop's vanishing point is meant to be
   seen, so the fix is not to close the gap but to stop throwing both halves at the
   extremes: cap the measure and centre it, and let the art breathe around it. */
@media (min-width:1400px){
  .book-hero{
    padding-inline:max(var(--rfb-gutter), calc((100vw - 1520px) / 2));
    grid-template-columns:minmax(0,.94fr) minmax(0,1fr);
    gap:clamp(28px,3vw,56px);
  }
}