.hub-body{background:#080b0c}.world-hub{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;background:#080b0c}.hub-environment{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.hub-heading{position:absolute;z-index:8;color:#fff;text-shadow:0 3px 18px #000,0 1px 2px #000}.hub-heading p{margin:0;color:#efc369;font:700 var(--rfb-t-micro) Montserrat,sans-serif;letter-spacing:var(--rfb-track-word)}.hub-heading h1{margin:.35rem 0;font:400 clamp(2.7rem,5.5vw,6rem)/.88 Limelight,serif;text-transform:uppercase}.hub-heading span{font-size:clamp(1rem,1.45vw,1.3rem)}.hub-character{position:absolute;z-index:5;pointer-events:none}.hub-character img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1.5rem 1.4rem var(--rfb-scrim-3))}.hub-instruction{position:absolute;z-index:8;margin:0;color:#ffe7ad;font:700 var(--rfb-t-micro) Montserrat,sans-serif;letter-spacing:var(--rfb-track-label);text-transform:uppercase;text-shadow:0 2px 8px #000}
.scarlet-hub-heading{left:4.5%;top:13%;width:38%}.scarlet-hub-character{left:1%;bottom:-13%;width:min(32vw,31rem);height:78%}.case-file-controls{position:absolute;z-index:9;inset:0}.case-folder{position:absolute;display:flex;flex-direction:column;justify-content:center;width:17.5%;height:15%;padding:1rem 1.1rem;color:var(--rfb-wood-deep);text-decoration:none;text-align:left;background:linear-gradient(145deg,#dec18b,#a56d35);border:1px solid var(--rfb-brass-lit);border-radius:.3rem .3rem .7rem .3rem;box-shadow:0 1rem 1.3rem var(--rfb-scrim-3);transform-origin:50% 100%;transition:transform .4s var(--rfb-ease-arrive),filter .3s,box-shadow .3s}.case-folder:before{content:"";position:absolute;left:4%;top:-13%;width:42%;height:16%;background:#c79659;border-radius:.3rem .3rem 0 0}.case-folder small{font:700 var(--rfb-t-micro) Montserrat,sans-serif;letter-spacing:var(--rfb-track-label);color:#4a1626}.case-folder strong{font:700 clamp(.92rem,1.35vw,1.3rem)/1.02 Cormorant,serif}.case-folder span{margin-top:.28rem;font:700 var(--rfb-t-micro) Montserrat,sans-serif;letter-spacing:var(--rfb-track-body);text-transform:uppercase}.case-folder:hover,.case-folder:focus-visible{transform:translateY(-.75rem) rotate(-1deg) scale(1.035);filter:brightness(1.12);box-shadow:0 1.6rem 1.7rem var(--rfb-scrim-4),0 0 1.8rem #e6b65d4d}.case-folder:active{transform:translateY(-.2rem) scale(.99)}.melody-file{left:54.3%;top:65.2%;transform:rotate(3deg)}.trolley-file{left:69.4%;top:67%;transform:rotate(5deg);background:linear-gradient(145deg,#c77955,#7f3528);color:#fff0d8}.trolley-file small{color:#fff3d6}.scarlet-office .hub-instruction{left:59%;bottom:8%}
.office-window-weather{position:absolute;z-index:3;left:14.3%;top:0;width:27.5%;height:51.5%;overflow:hidden;clip-path:polygon(7% 0,93% 0,100% 100%,0 100%);pointer-events:none}.office-window-weather span{position:absolute;top:-8%;width:2px;height:clamp(12px,1.8vw,24px);border-radius:var(--rfb-r-pill);background:linear-gradient(transparent,#d7efff 55%,transparent);opacity:.54;animation:officeDrop 1s linear infinite}.office-window-weather span:nth-child(1){left:7%;animation-delay:-.1s}.office-window-weather span:nth-child(2){left:17%;animation-delay:-.75s;height:14px}.office-window-weather span:nth-child(3){left:29%;animation-delay:-.3s}.office-window-weather span:nth-child(4){left:39%;animation-delay:-1s;height:17px}.office-window-weather span:nth-child(5){left:49%;animation-delay:-.55s}.office-window-weather span:nth-child(6){left:59%;animation-delay:-.22s;height:12px}.office-window-weather span:nth-child(7){left:69%;animation-delay:-.75s}.office-window-weather span:nth-child(8){left:78%;animation-delay:-.4s;height:15px}.office-window-weather span:nth-child(9){left:88%;animation-delay:-1s}.office-window-weather span:nth-child(10){left:96%;animation-delay:-.55s;height:13px}.office-window-weather i{position:absolute;bottom:0;width:2.5rem;height:.45rem;border:1px solid #bde3ff77;border-radius:var(--rfb-r-round);opacity:0;animation:windowSplash 2.4s ease-out infinite}.office-window-weather i:nth-of-type(1){left:15%}.office-window-weather i:nth-of-type(2){left:47%;animation-delay:-.75s}.office-window-weather i:nth-of-type(3){left:75%;animation-delay:-1.35s}@keyframes officeDrop{from{transform:translate3d(0,-12%,0)}to{transform:translate3d(-5px,620%,0)}}@keyframes windowSplash{0%,74%{opacity:0;transform:scale(.25)}78%{opacity:.65}100%{opacity:0;transform:scale(1.15)}}
.gus-hub-heading{left:4.5%;top:12%;width:33%;color:var(--rfb-wood-deep);text-shadow:0 2px 10px #ffe8ad}.gus-hub-heading p{color:var(--rfb-crimson-deep)}.gus-hub-character{left:4%;bottom:-9%;width:min(28vw,28rem);height:68%}.travel-map{position:absolute;z-index:7;left:37.8%;top:19.6%;width:46.2%;height:52.5%}.journey-routes{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.journey-routes path{fill:none;stroke:#9c2c34;stroke-width:.65;stroke-linecap:round;stroke-dasharray:1.5 3;opacity:.64;animation:routeTravel 14s linear infinite}

/* --------------------------------------------------------------------------
   Gus's map: three places he has been, marked the way a storybook map marks
   them. Rewritten 2026-09-08.

   The old markers were bare crimson x glyphs whose place name only appeared
   on :hover. On a touch screen there is no hover, so the first tap painted the
   label and the second one travelled -- which is why the map felt like it
   sometimes needed a long press, sometimes a short one, and sometimes did
   nothing. Names are now always visible: a map that labels its places is both
   more usable and more like the books.

   Nothing here replaces the centring transform. --pin-lift composes with it,
   so a marker can rise without jumping half its own width sideways (which is
   what .is-entering used to do).
   -------------------------------------------------------------------------- */
.map-destination{position:absolute;z-index:2;display:grid;place-items:center;
  width:max(3.1rem,var(--rfb-tap));height:max(3.1rem,var(--rfb-tap));
  --pin-lift:0rem;color:#8c1e2e;text-decoration:none;
  transform:translate(-50%,-50%) translateY(var(--pin-lift));
  transition:transform .3s var(--rfb-ease-snap);
  filter:drop-shadow(0 3px 2px #4a250955)}

/* the wax seal the x is stamped into */
.map-destination::before{content:"";position:absolute;z-index:0;
  width:2.15rem;height:2.15rem;border-radius:var(--rfb-r-round);
  background:radial-gradient(circle at 35% 30%,#f6e6bd,#e2c88f 58%,#c69a4e);
  border:1px solid #8a5f24;
  box-shadow:0 2px 5px #3a1c0866, inset 0 1px 2px #fff6dd;
  transition:transform .3s var(--rfb-ease-snap),box-shadow .3s}
.map-destination b{position:relative;z-index:var(--rfb-z-base);
  font:700 1.85rem/1 Cormorant,serif;color:#9c1f2f;
  transition:transform .3s var(--rfb-ease-snap),color .22s;
  text-shadow:0 1px #fff2cf}

/* the place name, hand-lettered onto the map -- always legible, never a hover */
.map-destination span{position:absolute;left:50%;top:calc(100% - .35rem);
  min-width:max-content;padding:.3rem .5rem;
  color:#fff7dc;background:color-mix(in srgb, var(--rfb-wood-deep) 88%, transparent);
  border:1px solid #c18b3c;border-radius:.2rem;
  font:700 var(--rfb-t-micro) Montserrat,sans-serif;letter-spacing:.04em;
  text-align:center;text-shadow:0 1px 2px #1c0d03;
  transform:translateX(-50%);transition:background .22s,border-color .22s,box-shadow .22s;
  pointer-events:none}
.map-destination span small{display:block;color:#efc369;
  font-size:var(--rfb-t-micro);font-weight:600;letter-spacing:.07em}


/* The pyramids sit near the right edge of the paper, so their name plate is
   anchored inward rather than centred -- otherwise it runs off the screen at
   the narrow end of the desktop range. */
.pyramids-x span{left:50%;transform:translateX(-74%)}
.maymont-x span{left:50%;transform:translateX(-38%)}
.map-destination:hover,.map-destination:focus-visible{--pin-lift:-.3rem;z-index:12}
.map-destination:hover::before,.map-destination:focus-visible::before{transform:scale(1.12);
  box-shadow:0 5px 12px #3a1c0888, inset 0 1px 2px #fff6dd, 0 0 0 .28rem #ffd66f5c}
.map-destination:hover b,.map-destination:focus-visible b{transform:scale(1.1) rotate(-7deg);color:#c21832}
.map-destination:hover span,.map-destination:focus-visible span{
  background:var(--rfb-wood-deep);border-color:var(--rfb-focus);box-shadow:0 4px 12px var(--rfb-scrim-1)}
.map-destination:active{--pin-lift:-.1rem}
.map-destination:focus-visible{outline:3px solid var(--rfb-focus);outline-offset:4px;border-radius:.35rem}

/* departing: lift and glow, still composed with the centring transform */
.world-object.is-entering{z-index:30;filter:brightness(1.35) drop-shadow(0 0 1.5rem var(--rfb-focus));transform:translateY(-1rem) scale(1.09)}
.map-destination.is-entering{--pin-lift:-1rem;z-index:30;filter:brightness(1.3) drop-shadow(0 0 1.4rem var(--rfb-focus))}
@keyframes routeTravel{to{stroke-dashoffset:-45}}.maymont-x{left:15%;top:52%}.sigiriya-x{left:47%;top:53%}.pyramids-x{left:77%;top:54%}.gus-treehouse .hub-instruction{left:57%;bottom:20%}.treehouse-light{position:absolute;z-index:2;inset:0;background:linear-gradient(110deg,#fff2a31f 0 23%,transparent 41%);animation:sunBreathe 7s ease-in-out infinite}.leaf-shadows{position:absolute;z-index:3;inset:-5%;background:radial-gradient(ellipse at 8% 15%,#44641c1e 0 3%,transparent 9%),radial-gradient(ellipse at 63% 71%,#3450161a 0 4%,transparent 11%),radial-gradient(ellipse at 34% 44%,#4a6b2016 0 2%,transparent 7%);background-size:23rem 19rem,31rem 26rem,17rem 14rem;mix-blend-mode:multiply;animation:leafShadow 9s ease-in-out infinite alternate;pointer-events:none}@keyframes sunBreathe{50%{opacity:.68}}@keyframes leafShadow{to{transform:translate(1.5rem,.5rem) rotate(.6deg)}}

@media(max-width:900px){.scarlet-hub-heading,.gus-hub-heading{left:5%;top:10%;width:55%}.hub-heading h1{font-size:clamp(2.5rem,7vw,4.6rem)}.scarlet-hub-character{left:-4%;width:39vw;height:66%}.case-folder{width:21%;height:14%}.melody-file{left:52%;top:66%}.trolley-file{left:70%;top:67%}.gus-hub-character{left:-2%;width:34vw;height:58%}.travel-map{left:37.5%;top:20%;width:47%;height:52%}}
@media(max-width:600px){.world-hub{min-height:54rem}.scarlet-office .hub-environment{object-position:61% center}.gus-treehouse .hub-environment{object-position:58% center}.scarlet-hub-heading,.gus-hub-heading{top:5.7rem;left:1rem;width:calc(100% - 2rem)}.hub-heading h1{font-size:2.5rem;max-width:20rem}.hub-heading span{display:block;max-width:17rem}.scarlet-hub-character{left:-17%;bottom:-8%;width:68vw;height:58%;opacity:.9}.office-window-weather{left:0;top:0;width:38%;height:49%}.case-folder{width:38%;height:8.2rem;padding:.65rem}.melody-file{left:40%;top:62%;transform:rotate(3deg)}.trolley-file{left:61%;top:76%;transform:rotate(4deg)}.scarlet-office .hub-instruction{left:auto;right:1rem;bottom:5%}.gus-hub-character{left:-18%;bottom:-5%;width:66vw;height:52%;opacity:.95}.travel-map{left:22%;top:33%;width:73%;height:37%}.gus-treehouse .hub-instruction{left:auto;right:1rem;bottom:9%}.case-desk,.traveler-profile{padding:4rem 1.2rem}


.folder-sheet{padding:1.5rem}}
.calm .office-window-weather span,.calm .office-window-weather i,.calm .journey-routes path,.calm .treehouse-light,.calm .leaf-shadows{animation:none}.calm .office-window-weather{display:none}@media(prefers-reduced-motion:reduce){.office-window-weather{display:none}.journey-routes path,.treehouse-light,.leaf-shadows{animation:none}.case-folder,.map-destination b,.map-destination span{transition:none}}
.scarlet-hub-heading{width:34%}.scarlet-hub-heading h1{font-size:clamp(2.7rem,4.35vw,4.8rem)}.gus-hub-heading{width:29%}.gus-hub-heading h1{font-size:clamp(2.5rem,3.65vw,4.1rem)}
.gus-hub-heading{color:var(--rfb-paper-warm);text-shadow:0 3px 14px #261204,0 1px 2px #261204}.gus-hub-heading p{color:var(--rfb-focus);text-shadow:0 2px 8px #261204}.gus-hub-heading span{color:#fff7df;text-shadow:0 2px 8px #261204}
@media(max-width:900px){.scarlet-hub-heading,.gus-hub-heading{width:55%}.scarlet-hub-heading h1,.gus-hub-heading h1{font-size:clamp(2.5rem,7vw,4.6rem)}}
@media(max-width:600px){.scarlet-hub-heading,.gus-hub-heading{width:calc(100% - 2rem)}.scarlet-hub-heading h1,.gus-hub-heading h1{font-size:2.5rem}}
.world-hub .hub-environment,.world-hub .hub-character,.world-hub .hub-heading,.world-hub .hub-instruction{transition:transform .75s var(--rfb-ease-arrive),opacity .55s ease,filter .55s ease}.world-hub.hub-departing .hub-environment{transform:scale(1.13);transform-origin:var(--travel-x,50%) var(--travel-y,50%);filter:brightness(.72) blur(1px)}.world-hub.hub-departing .hub-character{transform:translateY(2%) scale(.97);opacity:.35}.world-hub.hub-departing .hub-heading,.world-hub.hub-departing .hub-instruction{opacity:0;transform:translateY(-.6rem)}
@media(max-width:600px){.map-destination span{top:88%;padding:.28rem .38rem}.hub-instruction{display:none}.case-folder strong{font-size:1rem}}
@media(prefers-reduced-motion:reduce){.world-hub .hub-environment,.world-hub .hub-character,.world-hub .hub-heading,.world-hub .hub-instruction{transition:none}.world-hub.hub-departing .hub-environment{transform:none;filter:none}.world-hub.hub-departing .hub-character,.world-hub.hub-departing .hub-heading{transform:none;opacity:1}}

/* Keep Scarlet's weather outside by aligning it with the exterior window glass. */
.office-window-weather{left:19%;top:0;width:18.5%;height:49%;clip-path:inset(0 0 5%);-webkit-mask:none;mask:none}
@media(max-width:900px){.office-window-weather{left:0;top:0;width:27%;height:49%}}
@media(max-width:600px){.office-window-weather{left:0;top:0;width:30%;height:47%}}

/* Touchscreens do not have hover, so destination names must remain visible. */
@media(hover:none),(pointer:coarse){.map-destination span{opacity:1;transform:translate(-50%,0)}}

/* Destination markers are the only way into a Gus book from his treehouse. */
.map-pin,.destination-pin,.gus-destination,a.world-object{
  min-width:var(--rfb-tap); min-height:var(--rfb-tap);
}

/* --------------------------------------------------------------------------
   The passport. Rebuilt 2026-09-08.

   This was a flat tan gradient carrying four bare boxes and ~180px of empty
   gold -- the one section on the site that did not look art-directed, sitting
   directly under the most detailed illustration on it. It is named after a
   passport, so it is one now: a spread lying open on the treehouse desk, the
   traveller's details on the left page and a stamp for each journey on the
   right. The stamps are the second way into the three books, which is what
   the section was missing: a reason to exist.
   -------------------------------------------------------------------------- */
.traveler-profile{display:grid;grid-template-columns:minmax(0,1fr);gap:0;
  padding:clamp(3rem,7vw,6rem) var(--rfb-gutter);
  color:var(--rfb-ink);
  background:radial-gradient(ellipse at 50% 0%,#3d2412,#1b1008 62%,#120a05)}
.traveler-profile>*{min-width:0}

.gus-passport-page{position:relative;padding:clamp(1.6rem,3.4vw,2.8rem)}
.gus-passport-page{background:linear-gradient(158deg,#f7ebcd,#ecdcb4 48%,#dfcb9e)}
.gus-passport-page::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(122deg,#00000005 0 2px,transparent 2px 7px);
  mix-blend-mode:multiply}

.gus-passport-data{border:1px solid #b89a63;border-bottom:0;
  box-shadow:inset 0 0 0 1px #ffffff5c, 0 18px 40px var(--rfb-scrim-2)}
.gus-passport-stamps{display:flex;flex-direction:column;border:1px solid #b89a63;
  box-shadow:inset 0 0 0 1px #ffffff4d, 0 18px 40px var(--rfb-scrim-2)}
.gus-passport-stamps{background:linear-gradient(158deg,#f3e5c3,#e6d4aa 52%,#d9c69b)}

.traveler-profile .type-label{margin:0;color:#8d2233;
  font:700 var(--rfb-t-micro) Montserrat,sans-serif;letter-spacing:var(--rfb-track-word);text-transform:uppercase}
.traveler-profile h2{margin:.45rem 0 .7rem;color:#2a1608;
  font:400 clamp(2.1rem,3.4vw,3.5rem)/.92 Limelight,serif;text-transform:uppercase}
.gus-passport-blurb{max-width:34rem;margin:0 0 1.4rem;color:#3b2412;
  font:italic 400 var(--rfb-t-lead)/1.5 Cormorant,Georgia,serif}

.traveler-profile dl{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0;
  border-top:1px solid #b89a63;border-left:1px solid #b89a63}
.traveler-profile dl div{padding:.85rem 1rem;
  border-right:1px solid #b89a63;border-bottom:1px solid #b89a63}
.traveler-profile dt{color:#7c5626;
  font:700 var(--rfb-t-micro) Montserrat,sans-serif;letter-spacing:var(--rfb-track-label);text-transform:uppercase}
.traveler-profile dd{margin:.2rem 0 0;color:#241505;
  font:600 var(--rfb-t-h3)/1.15 Cormorant,Georgia,serif}

.gus-passport-stamps h3{margin:0 0 1.3rem;color:#7c5626;
  font:700 var(--rfb-t-micro) Montserrat,sans-serif;letter-spacing:var(--rfb-track-word);text-transform:uppercase}
.gus-passport-stamps ul{display:flex;flex-wrap:wrap;gap:clamp(.9rem,2vw,1.5rem);
  margin:0;padding:0;list-style:none}
.gus-passport-stamps li{flex:0 1 calc(50% - clamp(.45rem,1vw,.75rem));min-width:0}

/* an inked entry stamp, pressed a little crooked because they always are */
.journey-stamp{display:grid;place-content:center;gap:.15rem;min-height:var(--rfb-tap);
  padding:1rem .8rem;text-align:center;text-decoration:none;
  border:2px solid currentColor;border-radius:.3rem;
  box-shadow:inset 0 0 0 1px currentColor;
  transform:rotate(var(--tilt,-3deg));opacity:.86;
  transition:transform .3s var(--rfb-ease-snap),opacity .3s}
.journey-stamp b{font:700 var(--rfb-t-label)/1.15 Montserrat,sans-serif;letter-spacing:var(--rfb-track-tight);text-transform:uppercase}
.journey-stamp i{font:600 var(--rfb-t-micro)/1.3 Montserrat,sans-serif;font-style:normal;letter-spacing:var(--rfb-track-body);opacity:.85}
.journey-stamp em{margin-top:.3rem;padding-top:.3rem;border-top:1px solid currentColor;
  font:600 var(--rfb-t-micro)/1 Montserrat,sans-serif;font-style:normal;letter-spacing:var(--rfb-track-label);text-transform:uppercase;opacity:.8}
.stamp-sigiriya{--tilt:-4deg;color:#2f5d43}
.stamp-maymont{--tilt:2.5deg;color:#8d2233}
.stamp-pyramids{--tilt:-1.5deg;color:#2c4a6b}
.journey-stamp:hover,.journey-stamp:focus-visible{transform:rotate(var(--tilt)) scale(1.05);opacity:1}
.journey-stamp:focus-visible{outline:3px solid #8d2233;outline-offset:4px}

.gus-passport-note{margin:auto 0 0;padding-top:1.6rem;color:#5b3d1c;
  font:italic 400 var(--rfb-t-body)/1.5 Cormorant,Georgia,serif}

@media (min-width:900px){
  .traveler-profile{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:stretch}
  .gus-passport-data{border-bottom:1px solid #b89a63;border-right:0}
  .gus-passport-stamps{border-left:1px solid #8a6d3f;
    box-shadow:inset 14px 0 26px -14px #6b4a1e88, inset 0 0 0 1px #ffffff4d, 0 18px 40px var(--rfb-scrim-2)}
  .gus-passport-stamps ul{flex-wrap:nowrap}
  .gus-passport-stamps li{flex:1 1 0}
}

/* Under 760px the painted map is wider than the screen however it is placed,
   so the map becomes its own framed panel -- the same paper, cropped out of the
   artwork -- pinned in the lower half of the treehouse. The markers are
   percentages of this element, so they land on their real coastlines by
   construction rather than by coincidence. */
/* 759px was only ever a PROXY for "the painted paper is wider than the screen".
   It fails on a tall tablet: at 820x1180 the paper renders 872px wide inside an
   820px viewport, so the overlay -- and the Pyramids name plate with it -- ran
   62px off the right edge while the panel treatment sat waiting for a width
   that never came.

   The real condition is an aspect one. With the paper at 41.6% of a 1672x941
   plate, a height-driven cover makes it 0.739 x viewport height, so it outgrows
   the screen whenever the viewport is narrower than about 74% of its height. */
@media (max-width:759px), (max-aspect-ratio:74/100){
  .world-hub.gus-treehouse .travel-map{left:50%;right:auto;top:auto;bottom:9%;
    width:min(100% - 1.6rem,32rem);height:auto;aspect-ratio:695/493;
    transform:translateX(-50%);
    background:url('../assets/gus-map.webp') center/100% 100% no-repeat;
    border:.35rem solid #6d4a24;border-radius:.2rem;
    box-shadow:0 .1rem 0 #a87a3f inset,0 1rem 2.4rem var(--rfb-scrim-3),0 0 0 1px #2c1a0a}
  /* Three name plates on a 364px-wide map cannot all hang below their pin --
     at 390 Maymont overlapped Sigiriya by 2050px2. Alternating above and
     below gives each one its own row. */
  .world-hub.gus-treehouse .maymont-x span,
  .world-hub.gus-treehouse .pyramids-x span{top:auto;bottom:calc(100% - .3rem)}
  /* Richmond sits near the left edge of the paper; on a narrow panel its plate
     is anchored inward so it cannot run off the screen. */
  .world-hub.gus-treehouse .maymont-x span{left:50%;transform:translateX(-12%)}
  .world-hub.gus-treehouse .pyramids-x span{left:50%;transform:translateX(-84%)}
  .gus-treehouse .hub-instruction{left:50%;right:auto;bottom:3.2%;transform:translateX(-50%);
    width:max-content;max-width:calc(100% - 2rem);text-align:center}

  /* Two maps at once. The hub artwork has its own map painted on the treehouse
     wall, and at object-position:58% the narrow crop landed squarely on it --
     so the standalone panel read as a second, misaligned map on top of the
     first. Gus was at left:-18%, half off screen, and the panel covered what
     was left of him.

     Narrow screens now frame the interior to the LEFT of the wall map, so the
     panel is the only map on the page, and Gus stands clear of it. */
  .world-hub.gus-treehouse .hub-environment{object-position:15% center}
  .world-hub.gus-treehouse .travel-map{top:23%;bottom:auto}
  .world-hub.gus-treehouse .gus-hub-character{left:auto;right:-2%;bottom:-1%;
    width:46vw;max-width:11rem;height:auto;aspect-ratio:1161/1392;opacity:1;z-index:4}
  .world-hub.gus-treehouse{min-height:46rem}
}

/* Scarlet's note ran 90 characters per line at desktop width. */
.case-desk .folder-sheet p{max-width:62ch}

/* ====================================================================
   THE PASSPORT, EARNED
   The three stamps were always drawn here. Now they are only inked once
   you have actually been to that book: an unvisited stamp is the blind
   impression a stamp leaves before the pad touches it -- still pressed
   into the page, still crooked, just without colour. Arriving inks it.

   Storage can fail, and when it does every stamp stays blind. That is a
   passport you have not filled in yet, which is the correct thing for it
   to look like -- never an error, never a missing feature.
   ==================================================================== */
.journey-stamp{
  color:#9c8f76;                       /* the blind-emboss colour, until earned */
  opacity:.62;
  transition:color .5s ease,opacity .5s ease,box-shadow .5s ease
}
.journey-stamp.is-stamped{opacity:1}
.journey-stamp.is-stamped.stamp-sigiriya{color:#2f5d43}
.journey-stamp.is-stamped.stamp-maymont {color:#8d2233}
.journey-stamp.is-stamped.stamp-pyramids{color:#2c4a6b}
/* ink sits unevenly on paper */
.journey-stamp.is-stamped{
  box-shadow:inset 0 0 0 1px currentColor, inset 0 0 14px -6px currentColor
}
.journey-stamp .stamp-date{
  display:block;margin-top:.3rem;
  font:700 .58rem/1 Montserrat,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;opacity:.72
}
.journey-stamp:not(.is-stamped) em{opacity:.55}

@media (prefers-reduced-motion:reduce){
  .journey-stamp{transition:none}
}


/* ====================================================================
   THE DESK LAMP, AND LEAVES PAST THE BALCONY            2026-09-10
   --------------------------------------------------------------------
   Both ported back from the app.

   Scarlet's lamp is the only light source in a night office and it sat
   perfectly still. The glow is anchored on the bulb, found on the plate
   at 52.5% / 42.5% of 1672x941.

   Gus's room already breathes -- .treehouse-light and .leaf-shadows do
   that -- but nothing actually MOVES out on the balcony, which is the
   half of the room that is outdoors. Seven leaves now turn past the
   open side.

   Both respect the motion toggle and the OS setting, same as the rest
   of the hub.
   ==================================================================== */
.office-lamp{
  position:absolute;z-index:2;pointer-events:none;
  left:52.5%;top:42.5%;width:11%;height:18%;
  border-radius:var(--rfb-r-round);
  background:radial-gradient(ellipse at center,
    color-mix(in srgb, var(--rfb-focus) 22%, transparent) 0 12%,
    #ffb43a1c 34%, transparent 68%);
  mix-blend-mode:screen;filter:blur(7px);
  transform:translate(-50%,-50%);
  animation:lampBreathe 4.2s ease-in-out infinite;
  will-change:transform,opacity;
}
@keyframes lampBreathe{
  0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(.97)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.045)}
}

.treehouse-leaves{
  position:absolute;z-index:4;left:0;top:0;width:19.5%;height:100%;
  overflow:hidden;pointer-events:none;
}
.treehouse-leaves i{
  position:absolute;top:-7%;
  width:clamp(9px,1.15vw,20px);aspect-ratio:9/17;
  border-radius:100% 0 100% 0;
  background:#96ba5685;filter:blur(.2px);
  animation:balconyLeaf 11s linear infinite;
}
.treehouse-leaves i:nth-child(2n){background:#c6b45680}
.treehouse-leaves i:nth-child(1){left:8%;animation-delay:-1.2s}
.treehouse-leaves i:nth-child(2){left:23%;animation-delay:-4.6s;animation-duration:13s}
.treehouse-leaves i:nth-child(3){left:39%;animation-delay:-7.1s;animation-duration:9.5s}
.treehouse-leaves i:nth-child(4){left:54%;animation-delay:-2.4s;animation-duration:12s}
.treehouse-leaves i:nth-child(5){left:68%;animation-delay:-9.3s;animation-duration:10.5s}
.treehouse-leaves i:nth-child(6){left:82%;animation-delay:-5.8s;animation-duration:14s}
.treehouse-leaves i:nth-child(7){left:93%;animation-delay:-11.1s;animation-duration:11.5s}
@keyframes balconyLeaf{
  0%{transform:translate(0,0) rotate(0);opacity:0}
  9%{opacity:.85}
  90%{opacity:.7}
  100%{transform:translate(3.5vw,112svh) rotate(470deg);opacity:0}
}

body.calm .office-lamp,body.calm .treehouse-leaves i,
body.reduced-motion .office-lamp,body.reduced-motion .treehouse-leaves i{animation:none}
body.calm .treehouse-leaves,body.reduced-motion .treehouse-leaves{display:none}
@media (prefers-reduced-motion:reduce){
  .office-lamp{animation:none}
  .treehouse-leaves{display:none}
}


/* Gus's heading sits over a sunlit window. Paper-warm type on bright foliage was
   the one place on the site where the words fought the picture, so it gets the
   same courtesy the entry title gets: something dark to sit on. */
.gus-hub-heading{position:absolute;isolation:isolate}
.gus-hub-heading::before{
  content:"";position:absolute;z-index:-1;
  left:-8%;right:-14%;top:-28%;bottom:-22%;
  background:radial-gradient(ellipse at 38% 50%,
    color-mix(in srgb, #120a04 74%, transparent) 0 38%,
    color-mix(in srgb, #120a04 42%, transparent) 62%,
    transparent 84%);
  filter:blur(10px);pointer-events:none;
}


/* "Two maps at once", the aspect-driven case. The 759px rule frames the interior
   at object-position:15%, which on a phone pushes the painted wall map fully off
   screen. On an iPad in portrait the visible window is wider -- 39% of the plate
   against a phone's 26% -- so 15% still leaves a third of the wall map showing
   and the framed panel reads as a second, misaligned map lying on top of it.
   Framing harder left keeps the panel the only map on the page. */
@media (min-width:760px) and (max-aspect-ratio:74/100){
  /* On an iPad in portrait the hub is only ~736px tall, so the cover is
     height-driven and shows 63% of the plate however it is framed -- the
     painted wall map cannot be pushed off screen at this aspect. Framing left
     helps a little; pushing the whole room back does the rest, so the framed
     panel reads as the map and the wall behind it reads as wall.

     Worth recording WHY the panel engages here at all: at 820px the painted
     paper is 872px wide, so the Pyramids marker itself landed at x=851 --
     entirely off screen and unreachable. A clipped name plate was the symptom;
     an unreachable third book was the actual bug. */
  .world-hub.gus-treehouse .hub-environment{object-position:4% center;filter:brightness(.78) saturate(.9)}
  .world-hub.gus-treehouse .travel-map{box-shadow:0 .1rem 0 #a87a3f inset,0 1.4rem 3.2rem #000d,0 0 0 1px #2c1a0a,0 0 0 100vmax #0a06034d}
}