/* Parachute, phone build (from the world theme's). Linked with media="(max-width: 759px)", so a desktop
   never downloads it; 760 is the same line scrub.js uses to switch to the
   phone frame set. Written for 390px and one thumb.

   The rule on a phone (Eric, 2026-10-17): the scene owns the upper 60% of
   the screen at every stop. All words live in ONE band along the bottom,
   over a soft shade; no filled buttons anywhere, one small text link per
   stop; nothing floats over the scene that does not have to. */

:root{--hd:60px;--gut:20px;--railw:0px}

/* the header is a solid band on a phone: the hard top edge every overlay
   starts below. The Book pill goes: each stop's own link and the contact
   stop carry the booking, so the header is just the name and the menu */
.whd{background:rgba(250,249,245,.95);border-bottom:1px solid rgba(25,25,23,.08)}
.whd-brand{font-size:19px}
.whd-book{display:none}
.whd-menu{padding:0 12px}
.whd-menu span{display:none}

/* ---------- the band ----------
   The copy sits on the floor of the screen: padding-top is irrelevant (the
   section is a flex column ending at the bottom), the band's height comes
   from its contents, which are held to eyebrow + headline + lede + one
   link (about the lower third of an 844px screen). The right edge
   stays clear of the rail's dot column. */
.wsec{padding:calc(var(--hd) + 24px) calc(var(--gut) + 30px) calc(22px + env(safe-area-inset-bottom,0px)) var(--gut)}
.wsec-copy{max-width:100%}
/* an eyebrow balances its lines and never splits a hyphenated word
   ("SECOND-/GENERATION"): home.php wraps such words in .wnb */
.weyebrow{margin:0 0 8px;font-size:10.5px;letter-spacing:.12em;text-wrap:balance}
.wnb{white-space:nowrap}
.wh,.wsec-sky .wh{font-size:clamp(23px,2.1vh + 11px,32px);line-height:1.06}
/* the lede is whole (Nora, round two: a two-line clamp ended the sky,
   studio and contact ledes on "brands, and..." mid-thought); the valley and
   landing bands drop theirs below, the scene still owns the upper part */
.wlede{margin-top:10px;font-size:14px;line-height:1.5;text-wrap:balance}
.wlede > p{display:inline}
/* lists (work, services) are the scene's job on a phone: the dot picker
   replaces the work list once that scene renders; the link below leads on */
.wlist{display:none}

/* ---------- one small link per stop, never a block ---------- */
.wctas{margin:4px 0 0;gap:0}
.wctas .wbtn:not(.wbtn-solid){display:none}        /* the second of a pair goes */
.wctas .wbtn,.wlink{display:inline-flex;align-items:center;min-height:44px;padding:0;margin:0;
  border:0;border-radius:0;background:none;color:var(--ink);font:600 14px/1.2 var(--body);
  text-decoration:none;text-underline-offset:4px;-webkit-tap-highlight-color:transparent}
.wctas .wbtn-solid::after{content:"\00a0\2192"}     /* the same arrow the other stops' links carry */
.wctas .wbtn:hover,.wctas .wbtn-solid:hover{background:none;border:0}
.wctas .wbtn:active,.wctas .wbtn:focus-visible,.wlink:active,.wlink:focus-visible{text-decoration:underline;color:var(--accent-lift)}
.wnote{margin:0;font-size:12.5px}
.wwalkin{min-height:44px;margin-left:16px;padding:0 14px 0 11px;font-size:13px}

/* the shade the band reads on: clear over the scene, paper at 88% at the
   floor; nothing veils the upper 60% */
.wscrim{background:linear-gradient(0deg,rgba(250,249,245,.9) 0%,rgba(250,249,245,.8) 24%,rgba(250,249,245,0) 46%)}
.wsec::before{background:linear-gradient(0deg,rgba(250,249,245,.9) 0%,rgba(250,249,245,.8) 24%,rgba(250,249,245,0) 46%)}

/* ---------- the rail: six quiet dots, 44px targets ---------- */
.wrail{right:4px;top:calc(var(--hd) + 96px);transform:none}
.wrail-a{min-height:44px;min-width:44px;gap:8px;opacity:.4;transition:opacity .2s}
.wrail-a.on{opacity:1}
.wrail-a span{display:none}

/* ---------- the theme chip (base partial _themeswitch): in the header band
   beside the menu button (parachute.css), at full strength, so the way back
   to the classic site is plain on every stop; two 44px circles + the 44px
   menu fit beside the wordmark at 320px ---------- */
.whd-side{gap:2px}

/* ---------- the chat launcher: small on a phone (world.css hides it until
   the last stop at every width) ---------- */
html.world-on #rchat-launch{padding:8px;min-width:44px;min-height:44px;justify-content:center;right:12px}
html.world-on #rchat-launch .rchat-face{width:26px;height:26px;margin:0}

/* ---------- the first screen: the stops as small text links, a hairline hint ---------- */
.wexplore{gap:0 16px;margin:2px 0 0}
.wexplore-a{min-height:44px;padding:0;border:0;border-radius:0;background:none;font:500 13px/1 var(--body);
  color:rgba(25,25,23,.78);-webkit-tap-highlight-color:transparent}
.wexplore-a:hover,.wexplore-a:focus-visible,.wexplore-a:active{background:none;color:var(--accent-lift)}
.whint{margin-left:auto;font-size:0;gap:0}
.whint i{height:22px}

/* ---------- the stops' content in the band and above it ----------
   The upper 60% is the scene's: the portrait and the reels sit there, the
   band below keeps its words. Captions move into the picker on a phone. */
.wcreds{display:none}
.wctas .wlink + .wlink{display:none}
html.world-on .wfeat{top:calc(var(--hd) + 14px);bottom:auto;left:var(--gut);right:calc(var(--gut) + 30px);width:auto;height:46vh}
html.world-on .wportrait{left:0;right:0;margin:0 auto;width:min(52vw,250px);height:auto}
html.world-on .wreel{--sw:min(100%,calc((46vh - 40px) * 1.5))}
html.world-on .wcard{bottom:6%;align-items:center}
html.world-on .wcard-cap{display:none}
.wchrome{height:14px;background-image:radial-gradient(circle at 9px 50%,#e0715a 2.5px,transparent 3px),
  radial-gradient(circle at 18px 50%,#d9a648 2.5px,transparent 3px),radial-gradient(circle at 27px 50%,#5aa86a 2.5px,transparent 3px)}
.wdesk{border-radius:7px}
.wphone{border-width:2px}
html.world-on .wsec-landing .wlede{display:none}
html.world-on .wpick{margin:8px 0 0}
html.world-on .wpick-cap{display:block;min-height:40px}
.wpick-k{display:block;font:600 10px/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-lift)}
/* a long title wraps to a second line and stops there (an inline-flex box
   never shows the ellipsis, it just cut "a score that shows its own rec") */
.wpick-t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;
  padding:4px 0;font:400 17px/1.2 var(--display);color:var(--ink);text-decoration:none;max-width:100%;text-wrap:balance}
.wpick-t:active,.wpick-t:focus-visible{color:var(--accent-lift)}
.wpick-nav{gap:2px;max-width:none}
.wpick-b{border:0;background:none}
.wpick-n{min-width:52px;font-size:12px}
/* services: four titles in a 2 x 2 grid, the lines and the intro on the services page */
html.world-on .wsec-valley .wlede{display:none}
.wsvc{gap:0 14px;margin-top:12px}
.wsvc a{gap:3px;padding:9px 0 10px}
.wsvc .wtag{font-size:9.5px;letter-spacing:.1em}
.wsvc-h{font-size:16px}
.wsvc-l{display:none}
html.world-on .wsec-valley .wsec-copy{max-width:100%}
html:not(.world-on) .wcard{flex-basis:84vw}
.wmail{display:inline-flex;align-items:center;min-height:44px;margin-left:4px}
/* the contact band ends above that corner */
html.world-on .wsec-contact{padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))}

/* the chat launcher owns the bottom-right corner: the footer ends above it */
.wfoot{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}