/* STOLAN SITE: LOOK v3, phase 3. One stylesheet for every page.
   The system: every section is a band that belongs to a world (Stolan's own fields at full strength, or a
   customer's world with its own palette and type). The tree behind the page reads the same bands, so it glows
   on a dark world and prints in ink on a light one. Luxury is the base; color is the interrupt, one job each:
   acid is what is real (who you are, and what clients said), pink is your move, orange is the stamp.
   No em or en dashes anywhere (the build refuses them). */

:root{
  --ink:#060507; --cream:#EBDED0; --stone:#9A938A; --moss:#36402A; --fern:#6A865C; --leather:#7B4C2C;
  --pink:#FF2D78; --acid:#81FF28; --orange:#FF6A00;
  --f-disp:'Big Shoulders Display', Impact, sans-serif;
  --f-body:'Hanken Grotesk', system-ui, sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, monospace;
  --f-voice:'Bodoni Moda', Didot, serif;
  --t-label:10.5px; --t-small:13px; --t-body:16px; --t-lead:18.5px;
  --t-disp:clamp(46px, 12.6vw, 128px); --t-disp-xl:clamp(58px, 16.4vw, 200px); --t-disp-s:clamp(46px, 11vw, 96px);
  --t-voice:clamp(46px, 11.6vw, 104px); --t-voice-s:clamp(22px, 5.6vw, 30px);
  --u:8px; --gut:clamp(22px, 6.2vw, 88px); --quiet:clamp(88px, 22vw, 240px); --feather:clamp(56px, 13vh, 130px);
  --ease:cubic-bezier(.3, 0, .1, 1); --d-tap:240ms; --d-move:760ms;
  --r-touch:999px;
  /* the six acids: accents with one job each, never a rainbow (Steve 2026-09-24). New hexes need Steve's eye. */
  --a-green:#81FF28; --a-pink:#FF2D78; --a-orange:#FF6A00; --a-blue:#0083FC; --a-yellow:#F8F206; --a-purple:#762AED;
  --act-bg:var(--a-pink); --act-fg:#060507; --real:var(--a-green); --voice-bg:var(--a-green); --voice-fg:#060507;
  /* the world a band carries; every band sets these (the build writes one rule per world) */
  --g:#060507; --text:#EBDED0; --sub:#9A938A; --a:#81FF28; --a2:#FF2D78; --line:rgba(235,222,208,.22);
  --fd:var(--f-disp); --fdw:900; --fdt:uppercase; --fdk:1; --fdls:-.022em; --fdlh:.84; --fb:var(--f-body); --fl:var(--f-mono); --flw:600; --flt:uppercase; --flls:.16em; --fx:var(--f-disp);
}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:340ms; animation-timing-function:var(--ease)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:clip; background:var(--ink); scroll-padding-top:64px}
body{margin:0; overflow-x:clip; background:var(--ink); color:var(--cream); font:400 var(--t-body)/1.55 var(--f-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
img,video{display:block; max-width:100%; height:auto}
[hidden]{display:none !important}
a{color:inherit}
p{margin:0}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:-999px; top:8px; z-index:99; background:var(--cream); color:var(--ink); padding:8px 12px}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--a); outline-offset:3px}

/* ---------- the stage ---------- */
#tree{position:fixed; inset:0; width:100vw; height:100vh; height:100lvh; display:block; z-index:0; pointer-events:none}
.grain{position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
main,footer{position:relative; z-index:2}

/* ---------- bands: the world under every section ---------- */
.band{position:relative; background:var(--g); color:var(--text); padding:var(--feather) var(--gut)}
html.gl .band{background:transparent}
.band + .band{margin-top:0}

/* ---------- the registers ---------- */
.disp{font-family:var(--fd); font-weight:var(--fdw); text-transform:var(--fdt); letter-spacing:var(--fdls); line-height:var(--fdlh); font-size:calc(var(--t-disp) * var(--fdk)); margin:0; text-wrap:balance}
.disp.xl{font-size:calc(var(--t-disp-xl) * var(--fdk))}
.disp.s{font-size:calc(var(--t-disp-s) * var(--fdk))}
.label{font-family:var(--fl); font-weight:var(--flw); font-size:var(--t-label); letter-spacing:var(--flls); text-transform:var(--flt); line-height:1.5; margin:0}
.body{font-family:var(--fb); font-size:var(--t-body); line-height:1.55; max-width:34ch}
.lead{font-family:var(--fb); font-size:var(--t-lead); line-height:1.45; max-width:30ch}
.voice{font-family:var(--f-voice); font-style:italic; font-weight:400; font-size:var(--t-voice); line-height:1.02; letter-spacing:-.02em; margin:0; text-wrap:pretty}
.voice.s{font-size:var(--t-voice-s); line-height:1.2; letter-spacing:-.005em}
.fine{font-family:var(--f-mono); font-weight:500; font-size:9px; letter-spacing:.14em; text-transform:uppercase; opacity:.82}
.sub{color:var(--sub)}
.cm{position:relative; top:-.12em}
/* the highlight covers the caps only: the display content box is 1.19em tall inside a .84em line, caps rise .81em */
mark.real{background:linear-gradient(var(--real), var(--real)) 0 .155em / 100% calc(100% - .345em) no-repeat; color:var(--ink); padding:0 .06em; box-decoration-break:clone; -webkit-box-decoration-break:clone}
.lnk{font-family:var(--fl); font-weight:var(--flw); font-size:var(--t-label); letter-spacing:var(--flls); text-transform:uppercase; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px}

/* ---------- the bar: wordmark, the four doors ---------- */
.bar{position:fixed; z-index:30; left:0; right:0; top:0; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px var(--gut) 12px; color:var(--bar, #EBDED0); transition:color 300ms var(--ease)}
.bar::before{content:""; position:absolute; inset:0 0 -34px; z-index:-1; background:linear-gradient(to bottom, var(--barg, rgba(6,5,7,.7)), transparent); opacity:var(--barO, 0); transition:opacity 300ms var(--ease)}
.wm{font-family:var(--f-disp); font-weight:900; font-size:19px; letter-spacing:.01em; text-decoration:none; text-transform:uppercase; white-space:nowrap}
.wm b{color:var(--orange)}
.nav{display:flex; align-items:center; gap:clamp(12px, 3.4vw, 30px)}
.nav a{font-family:var(--f-mono); font-weight:600; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; padding:8px 0; white-space:nowrap; position:relative}
.nav a[aria-current="page"]::after{content:""; position:absolute; left:0; right:0; bottom:3px; height:1.5px; background:currentColor}
.nav .nav-go{display:none; background:var(--act-bg); color:var(--act-fg); padding:10px 16px; border-radius:var(--r-touch)}
@media (min-width:900px){ .nav .nav-go{display:inline-block} }

/* ---------- the one action ---------- */
.act{display:inline-flex; align-items:center; gap:12px; background:var(--act-bg); color:var(--act-fg); text-decoration:none; font:600 15px/1 var(--f-body); letter-spacing:-.005em; padding:15px 8px 15px 20px; border-radius:var(--r-touch); transition:transform var(--d-tap) var(--ease)}
.act i{width:30px; height:30px; border-radius:50%; background:var(--act-fg); color:var(--act-bg); display:grid; place-items:center; font-style:normal; font-size:15px; transition:transform var(--d-tap) var(--ease)}
.act:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){ .act:hover i{transform:translateX(3px)} }
.act.inv{--act-bg:#060507; --act-fg:#EBDED0}
.plain{font-family:var(--f-body); font-size:var(--t-small); line-height:1.45; margin:11px 0 0; max-width:34ch; color:var(--sub)}

/* ---------- chips: every industry, in its own world ---------- */
.chips{display:flex; flex-wrap:wrap; gap:7px}
.chip{flex:0 0 auto; background:var(--g); color:var(--text); border:1px solid var(--line); font-family:var(--fd); font-weight:var(--fdw); text-transform:var(--fdt); letter-spacing:normal; font-size:var(--fck, 15px); line-height:1; padding:12px 14px 11px; border-radius:var(--r-touch); cursor:pointer; transition:transform var(--d-tap) var(--ease), box-shadow var(--d-tap) var(--ease)}
.chip b{font-weight:inherit; color:var(--a)}
.deck,.whead{--pring:var(--text)}
.sheet{--pring:#EBDED0}
.chip[aria-checked="true"]{box-shadow:0 0 0 2px var(--g), 0 0 0 3.5px var(--pring, #EBDED0)}
.chip:active{transform:scale(.96)}
.see{margin:0 0 10px; color:var(--sub)}

/* ---------- frames: their site, cut square ---------- */
.win{position:relative; margin:0; background:#000; overflow:hidden; aspect-ratio:390/760; border:1px solid var(--line)}
.win video,.win img{width:100%; height:100%; object-fit:cover; object-position:top}
.win .play{position:absolute; left:50%; bottom:12px; transform:translateX(-50%); font:600 12px/1 var(--f-body); background:rgba(6,5,7,.85); color:var(--cream); border:1px solid rgba(235,222,208,.3); padding:9px 12px; border-radius:var(--r-touch); display:none}
.rm .win .play{display:block}
.pop-open{clip-path:circle(0 at var(--ox, 0) var(--oy, 0)); transition:clip-path 900ms var(--ease)}
.pop-open.open{clip-path:circle(150% at var(--ox, 0) var(--oy, 0))}
.rm .pop-open,html:not(.gl) .pop-open{clip-path:none}

/* ---------- the dock: your world at your thumb, and the action ---------- */
.dock{position:fixed; z-index:40; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); display:flex; gap:8px; transform:translateY(150%); transition:transform var(--d-move) var(--ease)}
.dock.on{transform:none}
.dock .for{flex:1; min-width:0; display:flex; align-items:center; gap:9px; background:rgba(14,12,13,.9); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); color:var(--cream); border:1px solid rgba(235,222,208,.18); border-radius:var(--r-touch); padding:0 16px 0 7px; font:500 14px/1 var(--f-body); height:50px; text-align:left; cursor:pointer}
.dock .for .sw{flex:0 0 36px; height:36px; border-radius:50%; background:var(--swg, #060507); border:1px solid rgba(235,222,208,.3); display:grid; place-items:center; overflow:hidden}
.dock .for .sw::after{content:""; width:12px; height:12px; border-radius:50%; background:var(--swa, #81FF28)}
.dock .for .lb{display:flex; flex-direction:column; gap:3px; min-width:0}
.dock .for .lb .label{color:var(--stone); font-family:var(--f-mono); font-size:9px; letter-spacing:.16em}
.dock .for .lb span:last-child{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dock .for .car{margin-left:auto; opacity:.6; font-size:11px}
.dock .go{height:50px; display:inline-flex; align-items:center; padding:0 20px; background:var(--act-bg); color:var(--act-fg); border-radius:var(--r-touch); font:600 14px/1 var(--f-body); text-decoration:none; white-space:nowrap}
.sheet{position:fixed; z-index:41; left:12px; right:12px; bottom:calc(72px + env(safe-area-inset-bottom)); padding:16px; background:rgba(14,12,13,.95); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border:1px solid rgba(235,222,208,.16); transform:translateY(12px); opacity:0; pointer-events:none; transition:transform var(--d-tap) var(--ease), opacity var(--d-tap) var(--ease)}
.sheet.on{transform:none; opacity:1; pointer-events:auto}
.sheet .label{color:var(--stone); margin-bottom:12px; font-family:var(--f-mono)}
.sheet{--ring:#EBDED0}

/* ---------- the tape: acid at the foot of the first screen (Silvia's skills band, ours) ---------- */
.tapeband{padding:0; overflow:hidden; border-block:1px solid rgba(6,5,7,.2)}
.tapeband .run{display:flex; width:max-content; animation:run 38s linear infinite}
.tapeband .tr{display:flex; align-items:center; gap:18px; padding:13px 9px; font:900 15px/1 var(--f-disp); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap}
.tapeband .tr b{font-family:var(--f-mono); font-weight:600; font-size:11px; opacity:.55}
@keyframes run{to{transform:translateX(-50%)}}
.rm .tapeband .run{animation:none}

/* (the engraved price plate of phase 3 is retired; the ladder hangs on the trunk, see phase 6) */
.plate{position:relative; padding:28px 22px 26px; border:1px solid color-mix(in srgb, var(--text) 42%, transparent); outline:1px solid color-mix(in srgb, var(--text) 20%, transparent); outline-offset:5px}
.plate ol{list-style:none; margin:22px 0 0; padding:0}
.plate li{padding:18px 0 16px; border-top:1px solid var(--line)}
.plate .nm{color:var(--sub)}
.plate .price{font-family:var(--f-disp); font-weight:900; font-size:clamp(58px, 17vw, 132px); line-height:.86; letter-spacing:-.03em; margin:6px 0 8px}
.plate li.small .price{font-size:clamp(40px, 11vw, 80px)}
.plate .line{font-size:15px; line-height:1.45; max-width:30ch}
.plate .row{display:flex; gap:18px; flex-wrap:wrap; margin-top:12px}

/* ---------- the world chapter (Work, and the home teaser) ---------- */
.world{padding-top:calc(var(--feather) + 24px); padding-bottom:calc(var(--feather) + 12px); overflow:clip}
.world .kind{display:flex; flex-wrap:wrap; gap:6px 12px; align-items:baseline; color:var(--sub)}
.world .kind .fine{color:var(--text)}
.world .nm{margin:14px 0 0; color:var(--text)}
.world .own{font-family:var(--fx); color:var(--a); font-size:calc(26px * var(--fxk, 1)); line-height:1.1; margin:14px 0 0; max-width:18ch}
.world .still{position:relative; margin:26px calc(-1 * var(--gut)) 0; height:clamp(220px, 58vw, 520px); overflow:hidden}
.world .still img{width:100%; height:100%; object-fit:cover}
.world .still::after{content:""; position:absolute; inset:0; background:linear-gradient(to bottom, transparent 55%, var(--g))}
html.gl .world .still::after{background:linear-gradient(to bottom, transparent 50%, var(--g) 98%)}
.world .pair{display:grid; grid-template-columns:1fr 46%; gap:18px; align-items:start; margin-top:-64px; position:relative}
.world .pair .meta{padding-top:84px}
.world .pair .meta p{font-family:var(--fb); font-size:15px; line-height:1.5; margin-bottom:12px}
.world .said{margin:40px 0 0}
.world .said .voice{color:var(--a)}
.world .said figcaption{margin-top:14px; color:var(--sub)}
/* the Stolan thread through every world: a paper tag with their measured palette and their type */
.stag{display:inline-flex; flex-direction:column; gap:8px; margin-top:34px; background:#EBDED0; color:#16130E; padding:12px 14px 11px; font-family:var(--f-mono); font-weight:500; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; max-width:100%; box-shadow:0 18px 40px -20px rgba(0,0,0,.45)}
.stag .top{display:flex; justify-content:space-between; gap:16px}
.stag .top b{font-weight:600}
.stag .top b::after{content:"."; color:var(--orange)}
.stag .pal{display:flex; flex-wrap:wrap; gap:4px 10px}
.stag .pal span{display:inline-flex; align-items:center; gap:5px; white-space:nowrap}
.stag .pal i{width:11px; height:11px; border:1px solid rgba(22,19,14,.3); display:inline-block}
.stag .ty{opacity:.7; letter-spacing:.08em}

/* ---------- quotes that pop ---------- */
.pop{margin:0}
.pop blockquote{margin:0}
.pop figcaption{margin-top:16px}
.said-band .pop + .pop{margin-top:64px}

/* ---------- tables and questions ---------- */
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa summary{list-style:none; display:flex; justify-content:space-between; gap:18px; align-items:flex-start; padding:18px 0; cursor:pointer}
.qa summary::-webkit-details-marker{display:none}
.qa h3{margin:0; font:500 17px/1.35 var(--f-body)}
.qa summary i{flex:0 0 14px; height:14px; margin-top:5px; position:relative}
.qa summary i::before,.qa summary i::after{content:""; position:absolute; left:0; right:0; top:6px; height:1.5px; background:currentColor; transition:transform var(--d-tap) var(--ease)}
.qa summary i::after{transform:rotate(90deg)}
.qa[open] summary i::after{transform:rotate(0)}
.qa p{padding:0 0 20px; max-width:38ch; color:var(--sub); font-size:15px}
.cmp{width:100%; border-collapse:collapse; font-size:14px}
.cmp caption{text-align:left}
.cmp th,.cmp td{text-align:left; vertical-align:top; padding:12px 10px 12px 0; border-top:1px solid var(--line)}
.cmp thead th{font-family:var(--f-mono); font-weight:600; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--sub)}
.cmp .us{color:var(--text)}
@media (max-width:760px){
  .cmp thead{display:none}
  .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block; width:100%}
  .cmp tr{padding:18px 0 8px; border-top:1px solid var(--line)}
  .cmp th[scope="row"]{border:0; padding:0 0 10px; font:500 17px/1.3 var(--f-body)}
  .cmp td{border:0; padding:6px 0 8px; display:grid; grid-template-columns:38% 1fr; gap:12px; color:var(--sub)}
  .cmp td::before{content:attr(data-col); font-family:var(--f-mono); font-weight:600; font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--sub); opacity:.8}
  .cmp td.us{color:var(--text)}
}

/* ---------- footer ---------- */
.foot{padding:var(--quiet) var(--gut) calc(96px + env(safe-area-inset-bottom))}
.foot .fw{font-family:var(--f-disp); font-weight:900; text-transform:uppercase; font-size:clamp(64px, 20vw, 220px); line-height:.82; letter-spacing:-.03em; margin:0}
.foot .fw b{color:var(--orange)}
.foot nav{display:flex; flex-wrap:wrap; gap:10px 22px; margin:30px 0 26px}
.foot nav a{font-family:var(--f-mono); font-weight:600; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; text-decoration:none}
.foot .stampline{color:var(--sub)}
.foot .legal{margin-top:8px; font-size:13px; color:var(--sub)}

/* ---------- reveal: masked lines rise once (reduced motion: never) ---------- */
.rise{transition:opacity 900ms var(--ease), transform 900ms var(--ease)}
html.gl:not(.rm) .rise:not(.in){opacity:0; transform:translateY(26px)}

/* ---------- the recorder's touch marker ---------- */
.touch{position:fixed; z-index:99; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; background:rgba(235,222,208,.55); box-shadow:0 0 0 3px rgba(6,5,7,.35); pointer-events:none; opacity:0; transform:scale(.6); transition:opacity .12s, transform .25s}

@media (prefers-reduced-motion: reduce){
  .dock,.sheet,.chip,.act,.bar,.pop-open,.rise{transition:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}
@media (min-width:900px){
  .band{padding-left:var(--gut); padding-right:var(--gut)}
}

/* ======================= PAGES ======================= */
/* ---------- the first screen (Home and The Site): their world takes the whole screen ---------- */
.hero{min-height:calc(100svh - 44px); padding-top:96px; padding-bottom:26px; display:flex; flex-direction:column; overflow:clip}
.hero h1{margin:0; position:relative; z-index:2}
.hero .q{display:block; color:var(--sub); max-width:26ch; margin-bottom:14px}
.hero .q span{color:var(--a)}
.hero .head{display:block; font-size:calc(clamp(52px, 14vw, 152px) * var(--fdk)); max-width:9.2em}
.home-hero .head{font-size:clamp(60px, 16.6vw, 176px); max-width:6.6em}
.hero .head mark.real{color:var(--ink)}
.hero-row{display:grid; grid-template-columns:1fr; gap:16px; margin-top:22px; align-items:start; position:relative; z-index:2}
html:not([data-for="all"]) .hero-row,.site-hero .hero-row{grid-template-columns:1fr 43%}
.hero .lead{max-width:24ch; font-size:17px}
.home-hero .hsub{margin-top:22px; max-width:25ch; font-size:19px; line-height:1.4}
.hero .cap{margin-top:14px; color:var(--text)}
.hero .spec{margin-top:18px; color:var(--sub); line-height:1.8}
.hero-win{width:100%}
.hero .deck{margin-top:auto; padding-top:26px; position:relative; z-index:2}
.hero .go-row{margin-top:22px; position:relative; z-index:2}
.hero .act{white-space:nowrap}
.hero .go-row .plain{color:var(--sub)}
.seal{position:absolute; z-index:3; width:72px; height:72px; right:max(8px, calc(var(--gut) - 14px)); bottom:84px}
.seal .ring{transform-origin:52px 52px; animation:spin 48s linear infinite}
.seal text{font:600 7.6px var(--f-mono); letter-spacing:.08em; fill:var(--orange)}
.seal .sealbg{fill:none; stroke:var(--orange); stroke-width:.7; opacity:.55}
.seal .dot{fill:var(--orange)}
@keyframes spin{to{transform:rotate(360deg)}}
.rm .seal .ring{animation:none}
/* their imagery, behind their words */
.hstills{position:absolute; left:0; right:0; top:0; height:72%; z-index:1; pointer-events:none}
.hstill{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:var(--stillO, .42); -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.95) 20%, rgba(0,0,0,.5) 55%, transparent 96%); mask-image:linear-gradient(to bottom, rgba(0,0,0,.95) 20%, rgba(0,0,0,.5) 55%, transparent 96%)}
/* The Site, Everyone: the real Four-99 site on a laptop and a phone */
.real-site{position:relative; margin:0; aspect-ratio:4/5}
.real-site .lap{position:absolute; left:0; top:6%; width:100%; aspect-ratio:16/10; border:1px solid var(--line); background:#000}
.real-site .lap img,.real-site .ph2 img{width:100%; height:100%; object-fit:cover; object-position:top}
.real-site .ph2{position:absolute; right:-4%; bottom:4%; width:42%; aspect-ratio:540/1168; border:1px solid rgba(235,222,208,.4); background:#000; box-shadow:0 18px 40px -12px rgba(0,0,0,.8)}
html:not([data-for="all"]) .real-site{display:none}

/* ---------- who we are, what we do, what we are against ---------- */
.who{padding-top:calc(var(--feather) + 8px); padding-bottom:calc(var(--feather) - 10px)}
.byline{display:grid; grid-template-columns:40% 1fr; gap:18px; align-items:end}
.byline .fp{width:100%; aspect-ratio:600/804; object-fit:cover; filter:brightness(.86) contrast(1.04); border:1px solid var(--line)}
.byline .by{font-size:15.5px; line-height:1.45; max-width:18ch}
.facts{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; color:var(--sub)}
.who .answer{margin-top:30px; max-width:33ch; font-size:16.5px}
.stance{margin-top:72px}
.stance .label{color:var(--a)}
.stance .disp{margin:14px 0 20px; max-width:6.5em}
.stance .body + .body{margin-top:14px}
.bridge{margin-top:72px; max-width:10.5em}
.more{padding-top:36px; padding-bottom:calc(var(--feather) + 8px)}

/* ---------- the worlds, compact on Home ---------- */
.world.mini{padding-top:var(--feather); padding-bottom:calc(var(--feather) - 16px)}
.world.mini .pair{margin-top:26px; grid-template-columns:1fr 50%}
.world.mini .pair .meta{padding-top:0}
.world .own{font-family:var(--fx); font-style:var(--fxs, normal); font-weight:var(--fxw, 400); font-size:calc(24px * var(--fxk, 1)); line-height:1.08}
.world .meta .lnk{display:inline-block; margin-top:6px}
.world .win{width:100%}

/* ---------- what they said: acid ---------- */
.said-band{padding-top:calc(var(--feather) + 20px); padding-bottom:calc(var(--feather) - 6px)}
.said-band > .label{color:var(--sub)}
.said-band .pop{margin-top:26px}
.said-band .pop + .pop{margin-top:56px}
.said-band .voice{max-width:11em; font-size:clamp(34px, 8.8vw, 76px); line-height:1.04}
.said-band .pop + .pop .voice{font-size:clamp(40px, 10.6vw, 92px)}
.said-band figcaption{color:var(--text)}

/* ---------- the price plate ---------- */
.prices{padding-top:var(--feather); padding-bottom:var(--feather)}
.prices .plate > .label{color:var(--a)}
.prices .plate .lead{margin-top:14px; max-width:30ch; font-size:16.5px}
.plate .row{display:flex; gap:22px; flex-wrap:wrap; margin-top:18px}

/* ---------- the close: pink, your move ---------- */
.close{padding-top:calc(var(--feather) + 8px); padding-bottom:calc(var(--feather) + 20px)}
.close .disp{max-width:5.4em}
.close .lead{margin:24px 0 28px; max-width:28ch}
.close .door{display:inline-block; margin-top:28px}

/* ---------- Work ---------- */
.whead{padding-top:108px; padding-bottom:calc(var(--feather) + 24px)}
.whead .q{display:block; color:var(--a); margin-bottom:14px}
.whead .head{display:block; font-size:clamp(46px, 12.2vw, 132px); max-width:9.5em}
.whead .lead{margin:24px 0 30px}
.whead .note{margin-top:22px}
.world .kind .label{color:var(--sub)}

/* ---------- The Site ---------- */
.ans{padding-top:calc(var(--feather) * .7); padding-bottom:40px}
.ans .answer{max-width:31ch}
.why .disp,.bp .disp,.how .disp,.builds > .disp,.unseen .disp,.know .disp{margin:14px 0 24px; max-width:6.6em}
.why .cols{display:grid; gap:22px}
.why .body{max-width:36ch}
.why .body + .body{margin-top:14px}
.why .body strong{font-weight:600}
.why > .label,.bp > .label,.how > .label,.builds > .label,.unseen > .label,.beats > .label,.know > .label,.books > .label,.next > .label{color:var(--a)}
.bp .reach{list-style:none; padding:0; margin:34px 0 0}
.bp .reach li{padding:22px 0 20px; border-top:1px solid var(--line)}
.bp .reach .label{color:var(--sub)}
.bp .reach h3{font:500 21px/1.25 var(--f-body); margin:8px 0 10px}
.bp .reach .body{max-width:36ch; font-size:15px}
.bp .tail{margin-top:24px}
.how .lead{margin-bottom:6px}
.stages-w{position:relative; margin-top:44px; max-width:620px}
.stages{list-style:none; margin:0; padding:0 0 0 30px; position:relative}
.stages-w::before{content:''; position:absolute; left:4px; top:6px; bottom:6px; width:1px; background:var(--line)}
.stages-w .fill{position:absolute; left:4px; top:6px; bottom:6px; width:1px; background:var(--a-blue); transform-origin:top; transform:scaleY(var(--prog, 1))}
.stage{position:relative; padding:0 0 6vh}
.stage::before{content:''; position:absolute; left:-30px; top:3px; width:9px; height:9px; border-radius:50%; border:1px solid var(--a-blue); background:var(--ink); transition:background .5s var(--ease)}
.stage.lit::before{background:var(--a-blue)}
.stage .n{color:var(--a-blue)}
.stage h3{font:900 clamp(40px, 10.4vw, 80px)/.84 var(--f-disp); letter-spacing:-.022em; text-transform:uppercase; margin:12px 0 0; max-width:7.6em}
.stage .d{margin-top:16px; max-width:33ch; color:rgba(235,222,208,.84)}
.stage .leave{margin-top:12px; max-width:33ch; font-size:14px; color:var(--sub)}
.stage .leave .label{display:block; margin-bottom:4px}
.each{padding-left:0; padding-right:0}
.each > .disp{padding:0 var(--gut)}
.each-track{display:grid; grid-auto-flow:column; grid-auto-columns:84%; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; margin-top:26px; padding:0 var(--gut) 12px; scroll-padding:0 var(--gut); scrollbar-width:none}
.each-track::-webkit-scrollbar{display:none}
.ecol{scroll-snap-align:start; margin:0; display:flex; flex-direction:column; border:1px solid var(--line); background:rgba(255,255,255,.28); padding:16px}
.ecol .ph{font:900 48px/.84 var(--f-disp); letter-spacing:-.022em}
.ecol .pn{margin-top:8px; color:var(--sub)}
.ecol figcaption{font-size:13.5px; line-height:1.45; margin-top:10px; min-height:5.8em}
.ecol .pic{position:relative; margin-top:14px; aspect-ratio:4/5; background:#161314; overflow:hidden}
.ecol .fine{margin-top:10px}
.ecol .lap{position:absolute; left:5%; top:12%; width:84%; aspect-ratio:16/10; border:1px solid rgba(235,222,208,.26); background:#000}
.ecol .lap img,.ecol .ph2 img{width:100%; height:100%; object-fit:cover; object-position:top}
.ecol .ph2{position:absolute; right:6%; bottom:9%; width:27%; aspect-ratio:540/1168; border:1px solid rgba(235,222,208,.4); background:#000; box-shadow:0 18px 40px -12px rgba(0,0,0,.8)}
.bio{position:absolute; left:8%; top:7%; width:48%; aspect-ratio:9/19; background:#CFE3C8; color:#1F2A6E; border:1px solid rgba(235,222,208,.3); padding:14% 8% 0; display:flex; flex-direction:column; align-items:center; gap:7%}
.bio .av{width:34%; aspect-ratio:1; border-radius:50%; background:#1F2A6E; display:grid; place-items:center; color:#CFE3C8; font:400 13px/1 'Young Serif', Georgia, serif}
.bio .nm2{font:400 14px/1 'Young Serif', Georgia, serif}
.bio .ln{width:100%; border:1.5px solid #1F2A6E; border-radius:999px; font:600 8.5px/1 var(--f-body); padding:7px 0; text-align:center}
.bio .ln.on{background:#1F2A6E; color:#CFE3C8}
.board{position:absolute; right:6%; top:18%; width:40%; aspect-ratio:3/4; background:#F6F1E5; color:#1F2A6E; padding:9%; box-shadow:0 18px 40px -16px rgba(0,0,0,.7); transform:rotate(3deg)}
.board .sw{display:grid; grid-template-columns:repeat(4,1fr); gap:5%}
.board .sw i{aspect-ratio:1; display:block}
.board .ty{font:400 22px/1 'Young Serif', Georgia, serif; margin-top:12%}
.board .vo{font:500 7px/1.35 var(--f-body); margin-top:8%}
.ecol .pic.kitpic{aspect-ratio:auto}
.flat{position:relative; padding:12px; display:grid; grid-template-columns:repeat(12, 1fr); gap:5px; align-content:start}
.flat img{width:100%; height:100%; display:block; object-fit:cover}
.flat .pr{grid-column:span 3; aspect-ratio:1; border-radius:50%; overflow:hidden; background:#000; display:grid; place-items:center}
.flat .pr img{width:80%; height:auto}
.flat .bn{grid-column:span 9; aspect-ratio:3/1; overflow:hidden}
.flat .print{grid-column:span 4; aspect-ratio:17/22; overflow:hidden; background:#FFF6E0}
.flat .print img{object-fit:contain}
.flat .days{grid-column:span 8; display:flex; align-items:flex-end; border:1px solid rgba(106,134,92,.9); padding:8px}
.flat .days .dl{font:600 8px/1.2 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:#EBDED0}
.flat .sq{grid-column:span 4; aspect-ratio:1; overflow:hidden}
.flat .post{grid-column:span 4; aspect-ratio:9/16; overflow:hidden; background:#000}
.builds .lead{max-width:30ch}
.honest{margin-top:34px; padding-top:18px; border-top:1px solid var(--line); display:grid; gap:12px}
.honest .body{color:var(--sub); font-size:15px}
.card{position:relative; margin-top:34px; padding:24px 20px 26px}
.card .hd{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.card .pr{font:900 48px/.84 var(--f-disp); letter-spacing:-.022em}
.card .kick{margin-top:14px; display:inline-block; padding:4px 8px 3px; border:1px solid currentColor}
.card h3{margin-top:16px; max-width:7em}
.card .fit{margin-top:16px; font-size:var(--t-lead); line-height:1.4}
.card .txt p{margin-top:14px; font-size:15px; line-height:1.52}
.card .spec{margin-top:18px; padding-top:14px; border-top:1px solid currentColor; line-height:1.8}
.card ul.pieces{list-style:none; margin:16px 0 0; padding:0}
.card ul.pieces li{padding:11px 0; border-top:1px solid var(--line); font-size:15px; line-height:1.4}
.card .ex{margin-top:14px; font-size:13px; line-height:1.45; opacity:.78}
.card .act{margin-top:24px}
.card.site{background:#EBDED0; color:#16130E}
.card.site .plain{color:#5C5047}
.card.kit{border:1px solid var(--line)}
.said2{margin:24px -20px 0; padding:22px 20px 20px; background:var(--voice-bg); color:var(--voice-fg)}
.said2 figcaption{margin-top:12px}
.door{margin-top:34px; padding:20px; border:1px dashed var(--line)}
.door .hd{display:flex; justify-content:space-between; gap:12px; color:var(--sub)}
.door .kick{margin-top:12px; color:var(--sub)}
.door h3{font:600 19px/1.3 var(--f-body); margin:10px 0 0}
.door .fit,.door .t{font-size:14.5px; line-height:1.5; margin-top:10px; color:var(--sub); max-width:36ch}
.door .go{display:inline-block; margin-top:16px; padding:12px 16px; border:1px solid currentColor; border-radius:var(--r-touch); text-decoration:none; font:600 14px/1 var(--f-body)}
.door .micro{margin-top:8px; font-size:12px; color:var(--sub)}
.compare > .disp,.faq > .disp{margin-bottom:26px; max-width:7em}
.faq .faq-h{margin-top:64px}
.faq .list{max-width:640px}

/* ---------- About ---------- */
.ahero{padding-top:108px; padding-bottom:calc(var(--feather) + 20px)}
.ahero .q{display:block; color:var(--a); margin-bottom:14px}
.ahero .head{display:block; max-width:5em}
.ahero .lead{margin:24px 0 30px}
.fbig{margin:0 calc(-1 * var(--gut)); position:relative}
.fbig img{width:100%; aspect-ratio:900/1100; object-fit:cover; object-position:center 30%; filter:brightness(.9) contrast(1.03)}
.fbig figcaption{position:absolute; left:var(--gut); bottom:14px; color:#EBDED0}
.ahero .facts{flex-direction:row; flex-wrap:wrap; gap:6px 18px; margin-top:22px}
.unseen .body,.know .body{max-width:34ch}
.unseen .body + .body,.know .body + .body{margin-top:14px}
.beat{margin-top:44px}
.beat .disp{max-width:7.5em; margin-bottom:14px}
.said3{margin:34px calc(-1 * var(--gut)) 0; padding:30px var(--gut); background:var(--voice-bg); color:var(--voice-fg)}
.said3 figcaption{margin-top:14px}
.know .proof{margin-top:26px; font-family:var(--f-body); font-weight:500; font-size:18px; line-height:1.4; max-width:30ch}
.know .lnk{display:inline-block; margin-top:14px}
.books .shelf{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:24px 0 18px}
.books .shelf img{width:100%; aspect-ratio:1; object-fit:cover; filter:brightness(.92)}
.books .disp{margin-top:12px; max-width:8em}

/* ---------- Start ---------- */
.shero{min-height:92svh; padding-top:108px; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:calc(var(--feather) + 10px)}
.shero .q{display:block; color:var(--sub); margin-bottom:14px}
.shero .head{display:block; max-width:5em}
.shero .lead{margin:24px 0 20px; max-width:28ch}
.shero .carry{margin:0 0 22px; color:var(--text)}
.shero .carry span:not(:empty) + span:not(:empty)::before{content:" / "}
.shero .carry{display:inline-block; background:#060507; color:#EBDED0; padding:6px 10px 5px}
.steps{list-style:none; margin:26px 0 0; padding:0}
.steps li{padding:22px 0 26px; border-top:1px solid var(--line)}
.steps .n{color:var(--a)}
.steps .disp{margin:10px 0 12px; max-width:8em}
/* the intake (phase 4, round 1): the site's own registers and tokens, nothing new. 16px inputs so iOS never zooms. */
.intake{margin-top:30px; padding:20px 18px 24px; border:1px solid var(--line); max-width:560px}
.intake > .label{color:var(--a); margin-bottom:4px}
.intake .f{display:block; margin:20px 0 0; padding:0; border:0; min-width:0}
.intake .f > span,.intake legend{display:block; padding:0; font-family:var(--f-mono); font-weight:600; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--sub); margin-bottom:8px}
.intake input[type="text"],.intake select{display:block; width:100%; margin:0; background:transparent; color:var(--text); border:0; border-bottom:1px solid var(--line); border-radius:0; padding:9px 0 8px; font:400 16px/1.3 var(--f-body); -webkit-appearance:none; appearance:none}
.intake input[type="text"]:focus,.intake select:focus{outline:none; border-bottom-color:var(--a)}
.intake .sel{position:relative}
.intake .sel select{padding-right:22px}
.intake .sel::after{content:"\25BE"; position:absolute; right:2px; bottom:10px; color:var(--sub); pointer-events:none; font-size:12px}
.intake .picks{display:flex; flex-wrap:wrap; gap:8px}
.intake .picks legend{margin-bottom:10px}
.intake .picks label{position:relative; display:block}
.intake .picks span{display:block; border:1px solid var(--line); border-radius:var(--r-touch); padding:11px 13px 10px; font:600 10.5px/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--text); cursor:pointer; transition:background var(--d-tap) var(--ease), color var(--d-tap) var(--ease)}
.intake .picks input:checked + span{background:var(--cream); color:var(--ink); border-color:var(--cream)}
.intake .picks input:focus-visible + span{outline:2px solid var(--a); outline-offset:3px}
.intake .two{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
.intake .two legend{grid-column:1 / -1}
.intake .two .sel{display:block; margin-top:8px}
.intake .act{margin-top:28px; border:0; cursor:pointer; font-family:var(--f-body)}
.intake .fine{margin-top:14px; opacity:.82; letter-spacing:.08em; line-height:1.6; text-transform:none; font-size:11px; max-width:40ch}
.door.small{margin-top:40px}

/* the tether: a fine line from the branch to the world it opened */
.tether{position:fixed; inset:0; width:100vw; height:100vh; z-index:3; pointer-events:none; opacity:0; transition:opacity 400ms var(--ease); overflow:visible}
.dock.solo{left:auto}
@media (min-width:900px){
  .hero-row{max-width:1100px}
  html:not([data-for="all"]) .hero-row,.site-hero .hero-row{grid-template-columns:1fr 30%}
  .world .pair{grid-template-columns:1fr 30%}
  .why .cols{grid-template-columns:1fr 1fr; max-width:1000px}
  .each-track{grid-auto-columns:31%}
  .card,.door{max-width:720px}
}

/* ---------- the poster wall (from the Lobby, with taste): torn paper, a strip of tape, one acid at a time ---------- */
.pw{position:relative; margin:0; filter:drop-shadow(0 16px 18px rgba(0,0,0,.32))}
.poster{position:relative; clip-path:polygon(var(--rip, 0 0, 100% 0, 100% 100%, 0 100%)); padding:26px 22px 24px; background:var(--pbg); color:var(--pfg)}
.tilt-l{transform:rotate(-1.1deg)} .tilt-r{transform:rotate(.9deg)} .tilt-s{transform:rotate(-.45deg)}
.tape{position:absolute; z-index:2; width:86px; height:24px; background:rgba(235,222,208,.62); mix-blend-mode:normal; box-shadow:0 1px 0 rgba(0,0,0,.05)}
.tape.t1{left:14px; top:-10px; transform:rotate(-8deg)}
.tape.t2{right:18px; top:-9px; transform:rotate(6deg)}
.p-yellow{--pbg:var(--a-yellow); --pfg:#060507}
.p-green{--pbg:var(--a-green); --pfg:#060507}
.p-blue{--pbg:var(--a-blue); --pfg:#060507}
.p-purple{--pbg:var(--a-purple); --pfg:#EBDED0}
.p-cream{--pbg:#EBDED0; --pfg:#16130E}
.p-ink{--pbg:#060507; --pfg:#EBDED0}
.poster .label{color:inherit; opacity:.78}
.poster .disp{color:inherit}
.poster figcaption{color:inherit}
p.disp.poster{padding:22px 22px 20px; display:inline-block; max-width:none}
.stance .poster .disp{margin:12px 0 16px; max-width:6.5em}
.stance .after{margin-top:26px}
.said-band .pw + .pw{margin-top:56px}
.said-band .poster{padding:30px 24px 26px}
.said-band .poster .voice{color:inherit}
.card.site.poster{--pbg:#EBDED0; --pfg:#16130E; margin-top:0}
.builds .pw.tilt-s{margin-top:34px}
.card .pr{color:var(--a-purple)}
.card.kit .pr{color:#EBDED0}
.said3.poster{margin:34px 0 0; padding:28px 22px 24px}
.why .pw,.bp .pw,.unseen .pw{display:inline-block; margin:14px 0 24px}
.why .pw .disp,.bp .pw .disp,.unseen .pw .disp{margin:0; max-width:6.6em}

/* ---------- THE PAPER TURN (signature): black to cream, the tree carried across the edge ----------
   The edge is crisp and rises with your thumb; above it the engraving glows, below it the same tree prints in ink.
   A fine double rule inset from the phone's edge makes the cream a printed plate, a specimen sheet. */
.paper{padding-top:calc(var(--feather) + 34px); padding-bottom:calc(var(--feather) + 30px)}
.paper::before{content:""; position:absolute; inset:12px 10px; border:1px solid rgba(22,19,14,.42); outline:1px solid rgba(22,19,14,.2); outline-offset:4px; pointer-events:none}
.paper .disp{color:#16130E}
.paper .poster.disp{color:var(--pfg)}
.hl-y{background:var(--a-yellow); color:#060507; padding:3px 6px 2px; box-decoration-break:clone; -webkit-box-decoration-break:clone}
.stance-band .disp{margin:16px 0 22px; max-width:6.2em}
.stance-band .body + .body{margin-top:14px}
/* the horizon: the marquee sits on the line between the night and the paper */
.marq{padding:0; overflow:hidden; border-block:1px solid rgba(235,222,208,.18)}
.marq .run{display:flex; width:max-content; animation:run 44s linear infinite}
.marq .tr{display:flex; align-items:center; gap:18px; padding:14px 9px; font:900 15px/1 var(--f-disp); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; color:#EBDED0}
.marq .tr b{font-family:var(--f-mono); font-weight:600; font-size:11px; color:var(--a-green)}
.rm .marq .run{animation:none}
.world.nostill .pair{margin-top:26px}
.world.nostill .pair .meta{padding-top:0}
.fold summary{list-style:none; display:flex; justify-content:space-between; align-items:flex-end; gap:16px; cursor:pointer; padding-bottom:18px; border-bottom:1px solid var(--line)}
.fold summary::-webkit-details-marker{display:none}
.fold summary .label{color:var(--a-green); white-space:nowrap}
.fold[open] summary .label{opacity:.5}
.fold .cmp{margin-top:18px}
/* inside a world, the first screen keeps the action above the fold: the industries become one row you can swipe */
html:not([data-for="all"]) .hero .chips{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-right:calc(-1 * var(--gut)); padding:3px var(--gut) 3px 3px; margin-left:-3px}
html:not([data-for="all"]) .hero .chips::-webkit-scrollbar{display:none}
.hero-win{max-height:300px}
html:not([data-for="all"]) .hero .deck{padding-top:18px}

.pull{font:900 var(--t-disp-s)/.96 var(--f-disp); letter-spacing:-.022em; text-transform:uppercase; margin:22px 0 22px; max-width:8em; color:#16130E}
.hl-g{background:var(--a-green); color:#060507; padding:0 .06em; box-decoration-break:clone; -webkit-box-decoration-break:clone}
.facts .brandline{color:var(--a-green)}
.bp .reach h3{font:500 23px/1.22 var(--f-body)}
.pull .hl-y,.pull .hl-g{padding:0 .05em; background-clip:border-box; background-color:transparent; background-repeat:no-repeat; background-position:0 .155em; background-size:100% calc(100% - .345em)}
.pull .hl-y{background-image:linear-gradient(var(--a-yellow), var(--a-yellow))}
.pull .hl-g{background-image:linear-gradient(var(--a-green), var(--a-green))}

/* ======================= PHASE 4: REORGANIZE (2026-09-24) =======================
   Home is us, and the tree is the hub. The branches are the navigation (Services, Work, Tools, Journal; the roots are
   About), so the menu on a phone is drawn as the tree, and on Home each branch hangs a paper tag off a real limb. */

/* ---------- the bar on a phone: the wordmark and the tree menu; on a wide screen, the branches inline ---------- */
.nav{display:none}
.menu-b{display:inline-flex; align-items:center; gap:9px; background:none; color:inherit; border:1px solid color-mix(in srgb, currentColor 38%, transparent); border-radius:var(--r-touch); padding:9px 12px 9px 14px; cursor:pointer; font:inherit}
.menu-b .label{font-family:var(--f-mono); font-weight:600; font-size:10px; letter-spacing:.16em; text-transform:uppercase}
.menu-b i{position:relative; width:14px; height:14px; display:inline-block}
.menu-b i::before{content:""; position:absolute; left:6.5px; top:2px; bottom:0; width:1px; background:currentColor}
.menu-b i::after{content:""; position:absolute; left:1.5px; right:1.5px; top:4px; height:6px; border:1px solid currentColor; border-bottom:0; border-radius:7px 7px 0 0}
@media (min-width:900px){ .nav{display:flex} .menu-b{display:none} }

/* ---------- the menu is the tree: a trunk, four branches popping left and right, the ground, the roots ---------- */
.menu{position:fixed; inset:0; z-index:60; background:rgba(6,5,7,.975); color:#EBDED0; overflow-y:auto; padding:78px var(--gut) calc(34px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; opacity:0; transition:opacity 260ms var(--ease)}
.menu.on{opacity:1}
html.menu-on,html.menu-on body{overflow:hidden}
.menu-x{position:absolute; top:13px; right:var(--gut); background:none; color:#EBDED0; border:1px solid rgba(235,222,208,.38); border-radius:var(--r-touch); padding:9px 14px; cursor:pointer}
.menu-x .label{font-family:var(--f-mono); font-size:10px}
.mtree{position:relative; display:flex; flex-direction:column; gap:14px; padding:6px 0 10px}
.mtree .trunk{position:absolute; left:50%; top:0; bottom:64px; width:1px; background:linear-gradient(to bottom, rgba(231,211,166,.08), rgba(231,211,166,.85)); transform-origin:bottom}
.mtree .br{position:relative; width:50%}
.mtree .br.l{padding-right:20px; text-align:right}
.mtree .br.r{margin-left:50%; padding-left:20px}
.mtree .br:not(.root)::before{content:""; position:absolute; top:31px; width:16px; height:1px; background:rgba(231,211,166,.85); transform-origin:var(--o, left)}
.mtree .br.l::before{right:0; --o:right} .mtree .br.r::before{left:0}
.mtree .br a{display:block; text-decoration:none; color:inherit}
.mtree .br .label{color:#9A938A}
.mtree .nm{display:block; font:900 clamp(34px, 10vw, 60px)/.86 var(--f-disp); letter-spacing:-.022em; text-transform:uppercase; margin:6px 0 6px}
.mtree .fine{display:block; opacity:.8}
.mtree .sub{display:inline-block; margin-top:8px; font:600 10px/1.4 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; border-bottom:1px solid currentColor; padding-bottom:2px}
.mtree .ground{display:block; height:1px; margin:6px 0 2px; background:linear-gradient(to right, transparent, rgba(235,222,208,.4), transparent)}
.mtree .br.root{width:100%; text-align:center}
.mtree [aria-current] .nm{color:var(--a-green)}
.mgo{margin-top:auto; padding-top:26px}
.mgo .plain{color:#9A938A}
.menu.on .br{animation:brIn 520ms var(--ease) both}
.menu.on .br:nth-child(2){animation-delay:40ms} .menu.on .br:nth-child(3){animation-delay:100ms} .menu.on .br:nth-child(4){animation-delay:160ms} .menu.on .br:nth-child(5){animation-delay:220ms} .menu.on .br.root{animation-delay:300ms}
.menu.on .trunk{animation:trunkUp 620ms var(--ease) both}
@keyframes brIn{from{opacity:0; transform:translateY(10px)}}
@keyframes trunkUp{from{transform:scaleY(0)}}
.rm .menu.on .br,.rm .menu.on .trunk{animation:none}

/* ---------- Home: the first screen is us, no switcher, one action at the foot ---------- */
.home-hero .go-row{margin-top:auto; padding-top:28px}
.home-hero .seal{bottom:214px}
.home-hero mark.real{white-space:nowrap}
.tapeband .tr{color:#060507}

/* (the phase 4 hub rules lived here; phase 6 owns the stage, the tags and the threads) */

/* ---------- Home: the ladder on the engraved plate ---------- */
.plate .rungs{list-style:none; margin:22px 0 0; padding:0}
.plate .rungs .lnk{display:inline-block; margin-top:10px}
.plate .after-h{margin-top:34px; color:var(--sub)}
.after{list-style:none; margin:10px 0 0; padding:0}
.plate .after li,.after li{display:grid; grid-template-columns:1fr; gap:3px; padding:14px 0 13px; border-top:1px solid var(--line)}
.after .an{font:600 16.5px/1.3 var(--f-body)}
.after .ap{font:600 10px/1.6 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--text)}
.after .al{font-size:14px; line-height:1.45; color:var(--sub); max-width:34ch}
.after .lnk{justify-self:start; margin-top:8px}
.after.big li{padding:22px 0 20px}
.after.big .an{font:600 clamp(22px, 6vw, 30px)/1.15 var(--f-body)}
.after.big .ap{margin-top:8px}
.after.big .al{font-size:15px; margin-top:4px}

/* ---------- Home: a small taste of the work, as the surfaces one identity lands on ---------- */
.surf{padding-top:var(--feather); padding-bottom:calc(var(--feather) + 10px)}
.surf > .label{color:var(--a)}
.surf > .disp{margin:14px 0 18px; max-width:7em}
.surf > .lead{max-width:28ch}
.spread{display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:14px 10px; margin:30px 0 24px; align-items:start}
.pl{margin:0; position:relative; min-width:0}
.pl figcaption{margin-top:8px; color:var(--text)}
.pl img{display:block; width:100%; height:auto; border:1px solid var(--line)}
.pl-id{grid-column:1 / -1}
.pl-id .stag{margin:0; display:flex; transform:rotate(-.6deg)}
.pl-badge{grid-column:1 / span 3} .pl-badge img{aspect-ratio:1; object-fit:cover; background:#000}
.pl-menu{grid-column:4 / span 3} .pl-menu img{aspect-ratio:440/569; object-fit:cover}
.pl-site{grid-column:1 / span 4}
.pl-site .lap{position:relative; aspect-ratio:16/10; border:1px solid var(--line); background:#000; margin-right:18%}
.pl-site .lap img,.pl-site .ph2 img{width:100%; height:100%; object-fit:cover; object-position:top; border:0}
.pl-site .ph2{position:absolute; right:0; top:22%; width:30%; aspect-ratio:540/1168; border:1px solid rgba(235,222,208,.4); background:#000; box-shadow:0 18px 40px -12px rgba(0,0,0,.8)}
.pl-site figcaption{margin-top:46px}
.pl-sp{grid-column:5 / span 2} .pl-sp img{aspect-ratio:540/1168; object-fit:cover; object-position:top}
@media (min-width:900px){ .spread{grid-template-columns:repeat(12, minmax(0, 1fr)); max-width:1180px} .pl-id{grid-column:1 / span 5} .pl-badge{grid-column:6 / span 3} .pl-menu{grid-column:9 / span 3} .pl-site{grid-column:1 / span 7} .pl-sp{grid-column:8 / span 2} }

/* ---------- reviews: one bubble for the text it was, swatch cards for the rest; smaller, real, no stars ---------- */
.said-band{padding-top:var(--feather); padding-bottom:var(--feather)}
.bubble-w{margin:22px 0 0; max-width:318px}
.bubble-w .thread{color:var(--sub); margin:0 0 8px 16px}
.bubble{margin:0; position:relative; background:var(--a-green); color:#060507; border-radius:22px; padding:12px 16px 13px}
.bubble p{font:500 17px/1.38 var(--f-body)}
.bubble::after{content:""; position:absolute; left:-6px; bottom:0; width:18px; height:18px; background:var(--a-green); clip-path:path('M18 18 C10 18 3 15 0 18 C4 13 5 8 6 0 L18 0 Z')}
.bubble-w figcaption{margin:12px 0 0 16px; color:var(--text)}
.swatch{margin:40px 0 0; max-width:340px; background:#F4ECE2; color:#16130E; box-shadow:0 20px 38px -22px rgba(0,0,0,.6)}
.paper .swatch{background:#FBF7F1}
.sw-chip{height:64px; padding:10px 12px 9px; display:flex; justify-content:space-between; align-items:flex-end; gap:10px; background:var(--sw); color:#060507; font:600 9.5px/1.3 'IBM Plex Mono', ui-monospace, monospace; letter-spacing:.12em; text-transform:uppercase}
.sw-q{margin:0; padding:16px 16px 2px}
.sw-q p{font:500 16px/1.5 'Hanken Grotesk', system-ui, sans-serif; letter-spacing:0; text-transform:none}
.swatch figcaption{padding:10px 16px 14px; display:flex; flex-direction:column; gap:3px}
.sw-n{font:600 15px/1.25 'Hanken Grotesk', system-ui, sans-serif}
.swatch figcaption .label{color:#5C5047; font-family:'IBM Plex Mono', ui-monospace, monospace; font-weight:600; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase}
.world .swatch{margin-top:44px}
.beats .swatch{margin:40px 0 4px}

/* ---------- Services ---------- */
.shead{padding-top:108px; padding-bottom:calc(var(--feather) - 12px)}
.shead .q{display:block; color:var(--a); margin-bottom:14px}
.shead .head{display:block; max-width:6.6em}
.shead .answer{margin-top:26px; max-width:31ch}
.rungs-b > .label{color:var(--a)}
.rung{margin-top:30px; padding-top:22px; border-top:1px solid var(--line); position:relative}
.rung .rk{color:var(--sub)}
.rung h3.disp{margin:10px 0 0}
.rung .rp{font:900 clamp(52px, 15vw, 112px)/.86 var(--f-disp); letter-spacing:-.03em; margin:8px 0 12px}
.rung .rf{font-size:var(--t-lead); line-height:1.4; max-width:28ch}
.rd{margin:16px 0 0}
.rd dt{color:var(--sub); margin-top:12px}
.rd dd{margin:4px 0 0; font-size:15px; line-height:1.5; max-width:34ch}
.rung .spec{margin-top:16px; color:var(--sub); line-height:1.8}
.rung .lnk{display:inline-block; margin-top:16px}
.door.rung{border:1px dashed var(--line); padding:20px; margin-top:40px}
.filter > .label{color:var(--a)}
.fl2{display:grid; gap:28px; margin-top:22px}
.fk{color:var(--a-green)} .fk.no{color:var(--sub)}
.fl{list-style:none; padding:0; margin:12px 0 0}
.fl li{padding:12px 0; border-top:1px solid var(--line); font:500 17px/1.35 var(--f-body); max-width:30ch}
.fl.no li{color:var(--sub)}
.honest1{margin-top:28px; color:var(--sub); max-width:36ch}
.after-b > .label{color:var(--a)}
@media (min-width:900px){ .fl2{grid-template-columns:1fr 1fr; max-width:980px} .rungs-b{display:grid; grid-template-columns:1fr 1fr; gap:0 48px} .rungs-b > .label,.door.rung{grid-column:1 / -1} }

/* ---------- Tools and Journal (stubs in the new look, their real items) ---------- */
.thead,.jhead{padding-top:108px; padding-bottom:calc(var(--feather) - 8px)}
.thead .q,.jhead .q{display:block; color:var(--a); margin-bottom:14px}
.thead .head,.jhead .head{display:block; max-width:6em}
.thead .lead,.jhead .lead{margin-top:22px; max-width:28ch}
.jhead .note{margin-top:14px}
.tlist > .label,.jlist > .label,.studio-b > .label,.tdoor > .label{color:var(--a)}
.tools{list-style:none; margin:22px 0 0; padding:0}
.tool a{display:block; padding:22px 0 20px; border-top:1px solid var(--line); text-decoration:none}
.tool .tp{color:var(--sub)}
.tool .tn{display:block; font:900 clamp(40px, 11vw, 84px)/.86 var(--f-disp); letter-spacing:-.022em; text-transform:uppercase; margin:10px 0 10px}
.tool .tl{display:block; font-size:15.5px; line-height:1.5; max-width:34ch}
.tool .tg{display:inline-block; margin-top:12px; font:600 10.5px/1.4 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; border-bottom:1px solid currentColor; padding-bottom:2px}
.studio-b .disp{margin:12px 0 16px}
.studio-b .lnk{display:inline-block; margin-top:16px}
.tdoor{padding-top:calc(var(--feather) - 10px)}
.tdoor .lead{margin:14px 0 16px}
.tdoor .disp{margin:12px 0 18px}
.jfeat .jf{display:block; text-decoration:none; margin-top:22px; color:#16130E}
.jfeat .jt{display:block; margin:12px 0 14px; max-width:18ch; font:600 clamp(26px, 7vw, 40px)/1.12 var(--f-body); text-transform:none; letter-spacing:-.01em}
.jfeat .lnk{display:inline-block; margin-top:14px}
.jidx{list-style:none; margin:20px 0 0; padding:0}
.jidx a{display:grid; grid-template-columns:34px 1fr; gap:4px 10px; padding:18px 0; border-top:1px solid var(--line); text-decoration:none}
.jidx .jn{color:var(--a-green); grid-row:span 2; padding-top:4px}
.jidx .jt{font:600 19px/1.25 var(--f-body)}
.jidx .jk{color:var(--sub)}

/* ---------- small pieces ---------- */
.pagelink{margin-top:30px}
.close .lead{max-width:30ch}

.menu-b{background:color-mix(in srgb, var(--barg, #060507) 88%, transparent)}
/* ======================= PHASE 6: THE STORY ON THE TREE, TYPE WITHOUT PLATES (2026-09-25) =======================
   The phase 5 plates and blocks are gone. Every text column is declared to the engine (data-col), which thins and dims
   the linework inside a soft clearing behind it and leaves the tree whole around it. Nothing here paints a ground behind
   running copy. The objects that carry their own ground are objects: the paper tags, the tape, the specimen tag, the
   text bubble, the review swatch, the torn poster cards, the palette tag, the chips, the dock, the menu. */

/* ---------- columns: the text the engine composes around ---------- */
.col{position:relative}
.band .lead{max-width:27ch}
.band .body{max-width:31ch}
.band .answer{max-width:29ch}
.band > .label,.col > .label{display:inline-block}
.hero .lead,.home-hero .hsub{max-width:23ch}

/* ---------- the one action: two lines inside one button, the state line small above the label ---------- */
.act{display:inline-grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; column-gap:14px; row-gap:1px; align-items:center; text-align:left; padding:12px 8px 12px 20px; line-height:1.15}
.act .al{grid-column:1; grid-row:1; font:500 12px/1.2 var(--f-body); letter-spacing:.01em; opacity:.78}
.act .ab{grid-column:1; grid-row:2; display:inline-flex; align-items:center; gap:10px; font:600 15.5px/1.2 var(--f-body); letter-spacing:-.005em; white-space:nowrap}
.act .ab i{width:26px; height:26px; font-size:14px}
.act.sm{display:inline-flex; padding:13px 8px 13px 18px; font:600 14.5px/1 var(--f-body); gap:10px}
.act.buy{--act-bg:transparent; --act-fg:var(--text); box-shadow:inset 0 0 0 1.5px currentColor}
.act.buy .ab i{background:var(--text); color:var(--g)}
.go{display:block}
.go .plain{color:var(--sub); max-width:34ch}
.hero .go{margin-top:auto}
.close .go{margin-top:26px}
.close .lead{margin:22px 0 0; max-width:29ch}
.close .notfor{margin-top:18px; font-size:15px; line-height:1.5; max-width:31ch; color:var(--text)}
.door{margin-top:22px; font-size:14.5px; line-height:1.5; max-width:34ch; color:var(--sub)}
.door a{color:var(--text)}
.state{font:600 17px/1.4 var(--f-body); max-width:27ch; margin-top:14px}
.fine-line{margin-top:20px; font-size:14.5px; line-height:1.5; color:var(--sub); max-width:30ch}
.seen{margin-top:24px; font:500 16px/1.5 var(--f-body); max-width:29ch}

/* ---------- the tape strip: a pain line in their words, torn tape, one acid ---------- */
.strip{margin:22px 0 0; display:inline-block; max-width:100%; transform:rotate(-1.4deg)}
.strip span{display:inline; background:var(--a-yellow); color:#060507; font:600 15px/1.9 var(--f-body); padding:3px 10px 4px; box-decoration-break:clone; -webkit-box-decoration-break:clone; box-shadow:0 12px 26px -16px rgba(0,0,0,.7)}
.paper .strip{transform:rotate(1.1deg)}

/* ---------- the load: screen zero is the ground; the loader draws the rings, the roots take over; three swipes ---------- */
.load{--loadlen:1200px; padding:0; height:calc(100svh + var(--loadlen)); min-height:0}
.load-in{position:sticky; top:0; height:100svh; overflow:clip}
.hero-lay{position:absolute; inset:0; padding-left:var(--gut); padding-right:var(--gut); min-height:0; height:100%; opacity:0; clip-path:inset(0 0 100% 0); transform:translateY(18px)}
.ltape{position:absolute; left:-8%; right:-8%; top:56%; z-index:3; background:var(--a-yellow); color:#060507; transform:rotate(-6deg); overflow:hidden; box-shadow:0 14px 30px -14px rgba(0,0,0,.7)}
.ltape .run{display:flex; width:max-content; animation:run 26s linear infinite}
.ltape .tr{display:flex; align-items:center; gap:16px; padding:12px 10px 11px; font:900 22px/1 var(--f-disp); letter-spacing:.04em; text-transform:uppercase; white-space:nowrap}
.ltape .tr b{font-family:var(--f-mono); font-weight:600; font-size:12px; opacity:.6}
.lspec{position:absolute; left:var(--gut); top:84px; z-index:3; display:grid; grid-template-columns:auto auto; gap:6px 14px; align-items:baseline; background:#060507; color:#EBDED0; padding:12px 14px 11px; box-shadow:inset 0 0 0 1px rgba(235,222,208,.26); font-size:10px; max-width:calc(100% - 2 * var(--gut))}
.lspec .k{color:var(--a-green)}
.lspec b{color:var(--orange)}
.lspec span:nth-child(4){max-width:22ch; line-height:1.4}
.sig{position:absolute; left:var(--gut); bottom:calc(30px + env(safe-area-inset-bottom)); z-index:3; display:flex; align-items:center; gap:12px; color:#E7D3A6; margin:0}
.sig i{width:1px; height:44px; background:linear-gradient(#E7D3A6, transparent); display:block; transform-origin:top; animation:drop 1.7s ease-in-out infinite}
@keyframes drop{0%{transform:scaleY(.15); opacity:1}55%{transform:scaleY(1); opacity:1}100%{transform:scaleY(1); opacity:0}}
.ltags{position:absolute; inset:0; z-index:3; pointer-events:none}
.ltag{position:absolute; left:0; top:0; pointer-events:auto; background:#EBDED0; color:#16130E; text-decoration:none; padding:9px 12px 8px; font:600 10.5px/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; box-shadow:0 18px 30px -18px rgba(0,0,0,.85); opacity:0; transition:opacity 420ms var(--ease); will-change:transform}
.ltag.on{opacity:1}
.ltag .eye{position:absolute; top:-5px; left:50%; width:9px; height:9px; margin-left:-5px; border-radius:50%; background:#060507; box-shadow:0 0 0 2px #EBDED0}
html.grown .load{height:auto; padding:0}
html.grown .load-in{position:static; height:auto; overflow:visible}
html.grown .hero-lay{position:relative; inset:auto; opacity:1; clip-path:none; transform:none; height:auto; min-height:calc(100svh - 44px)}
html.grown .ltape,html.grown .lspec,html.grown .ltags,html.grown .sig{display:none}
.home-hero .seal{bottom:214px}
.home-hero mark.real{white-space:nowrap}
.tapeband .tr{color:#060507}

/* ---------- who: the answer, the two people, the one line for the reader who has paid before ---------- */
.who{padding-top:calc(var(--feather) + 8px)}
.who .answer{margin-top:22px; max-width:30ch; font-size:16.5px}
.byline{margin-top:28px}
.byline .bl{align-self:end}

/* ---------- the hub: paper tags hang off real limbs on gold threads; the root tag first, the ground tag last ---------- */
.hub{padding-top:calc(var(--feather) + 10px); padding-bottom:calc(var(--feather) + 24px)}
.hub .disp{margin:14px 0 18px; max-width:7em}
.hub .lead{max-width:26ch}
.twigl{list-style:none; margin:30px 0 0; padding:0; position:relative; height:clamp(800px, 212vw, 900px)}
.twigs-l{list-style:none; margin:0; padding:0}
.twig{position:absolute; width:47%; margin:0}
.twig.l{left:-6px} .twig.r{right:-6px}
.twigs-l .twig:nth-child(1){top:19%} .twigs-l .twig:nth-child(2){top:29%} .twigs-l .twig:nth-child(3){top:52%} .twigs-l .twig:nth-child(4){top:62%}
.twig a,.twig .tag{display:block; position:relative; background:#EBDED0; color:#16130E; text-decoration:none; padding:13px 13px 12px 14px; box-shadow:0 24px 40px -24px rgba(0,0,0,.8); transform:rotate(var(--tr, -.8deg)); transition:transform var(--d-tap) var(--ease)}
.twig.r a{--tr:.9deg}
.twig .eye{position:absolute; top:13px; width:10px; height:10px; border-radius:50%; background:#060507; box-shadow:0 0 0 2px #EBDED0, 0 0 0 3px rgba(22,19,14,.45)}
.twig.l .eye{right:12px} .twig.r .eye{left:12px}
.twig .no{display:block; opacity:.72; font-family:var(--f-mono); letter-spacing:.1em; font-size:10px; white-space:nowrap}
.twig.l a .no{padding-right:18px} .twig.r a .no{padding-left:18px}
.twig .tn{display:block; font:900 clamp(22px, 6.2vw, 40px)/.88 var(--f-disp); letter-spacing:-.022em; text-transform:uppercase; margin:9px 0 8px; max-width:8.5em}
.twig .tf{display:block; margin-top:9px; padding:8px 16px 0 0; border-top:1px solid rgba(22,19,14,.25); font:500 9.5px/1.55 var(--f-mono); letter-spacing:.1em; text-transform:uppercase}
.twig a > i{position:absolute; right:13px; bottom:11px; font-style:normal; font-size:16px}
.twig a:active{transform:rotate(var(--tr)) scale(.98)}
@media (hover:hover) and (pointer:fine){ .twig a:hover{transform:rotate(0deg) translateY(-3px)} }
.twigl .twig.root{top:0; left:0; width:auto; max-width:62%}
.twig.root .tag{--tr:-1.6deg; background:#F8F206; color:#060507; padding:10px 14px 10px 16px; display:inline-block; min-width:118px}
.twig.root .tf{border-color:rgba(6,5,7,.3); padding-right:0; max-width:19ch}
.twig.root .tag .tn{margin:5px 0 0; font-size:clamp(30px, 8vw, 44px)}
.twig.root .eye{left:auto; right:12px; top:13px; margin:0; box-shadow:0 0 0 2px #F8F206, 0 0 0 3px rgba(6,5,7,.45)}
.twigl .twig.ground{top:auto; bottom:0; left:50%; width:min(74%, 340px); transform:translateX(-50%)}
.twig.ground a{--tr:0deg; background:#36402A; color:#EBDED0; box-shadow:inset 0 0 0 1px rgba(235,222,208,.32), 0 24px 40px -24px rgba(0,0,0,.8)}
.twig.ground .eye{left:50%; top:-5px; margin-left:-5px; box-shadow:0 0 0 2px #36402A, 0 0 0 3px rgba(235,222,208,.5)}
.twig.ground .tn{font-size:clamp(20px, 5.6vw, 32px)}
.twigs{position:fixed; inset:0; width:100vw; height:100vh; z-index:1; pointer-events:none; overflow:visible; color:#E7D3A6; opacity:0; transition:opacity 500ms var(--ease)}
.twigs.on{opacity:1}
.twigs path{fill:none; stroke:currentColor; stroke-width:1.2; opacity:.9}
.twigs circle{fill:currentColor}
@media (min-width:900px){ .twigl{height:720px; max-width:1100px; margin-left:auto; margin-right:auto} .twig{width:30%} .twig.l{left:2%} .twig.r{right:2%} .twigs-l .twig:nth-child(1){top:18%} .twigs-l .twig:nth-child(2){top:26%} .twigs-l .twig:nth-child(3){top:54%} .twigs-l .twig:nth-child(4){top:62%} .twig.ground{width:380px} .twig.root{left:2%} }

/* ---------- the trunk: the ladder from free up. The trunk stands in the left strip; every rung hangs off it on a gold thread ---------- */
.prices{padding-top:var(--feather); padding-bottom:calc(var(--feather) + 8px)}
.prices .disp{margin:14px 0 18px; max-width:7em}
.prices .lead{max-width:27ch}
.ladder-w{margin-top:28px; margin-left:36%}
.ladder{list-style:none; margin:0; padding:0}
.ladder li{position:relative; display:grid; grid-template-columns:minmax(78px, 30%) 1fr; gap:2px 12px; padding:20px 0 20px 16px; border-top:1px solid var(--line)}
.ladder .lp{grid-row:span 4; align-self:start}
.ladder .ln,.ladder .lk,.ladder .ll,.ladder .lnk,.ladder .go{grid-column:2}
.ladder .lk{justify-self:start}
.ladder li:last-child{border-bottom:1px solid var(--line)}
.ladder .eye{position:absolute; left:-2px; top:26px; width:10px; height:10px; border-radius:50%; background:#060507; box-shadow:0 0 0 2px #E7D3A6}
.ladder .lp{display:block; font:900 clamp(28px, 8vw, 40px)/.9 var(--f-disp); letter-spacing:-.02em; color:var(--text); padding-top:2px}
.ladder .rung-free .lp{color:var(--a-green)}
.ladder .ln{display:block; margin-top:2px; font:600 18px/1.25 var(--f-body)}
.ladder .lk{display:inline-block; margin-top:8px; background:var(--a-green); color:#060507; font:600 8.5px/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; padding:4px 6px 3px}
.ladder .ll{display:block; margin-top:8px; font-size:14.5px; line-height:1.48; color:var(--sub); max-width:29ch}
.ladder .lnk{display:inline-block; margin-top:12px}
.ladder .go{margin-top:14px}
.ladder .act{font-size:14px}
.afterl{margin:22px 0 0; font-size:14px; line-height:1.5; color:var(--sub); max-width:30ch}
.afterl .lnk{display:inline-block; margin-top:8px; color:var(--text)}
@media (min-width:900px){ .ladder-w{margin-left:0; max-width:620px} }

/* ---------- the leaves: two live sites in their own colors, with their owners' words beside them ---------- */
.leaves{padding-top:var(--feather); padding-bottom:calc(var(--feather) + 8px)}
.leaves .disp{margin:14px 0 18px; max-width:7em}
.leaves .lead{max-width:27ch}
.live{position:relative; margin-top:44px; display:grid; grid-template-columns:1fr 50%; gap:16px; align-items:start}
.live .win{grid-column:2; grid-row:1 / span 2; width:100%; aspect-ratio:390/700}
.live .meta{grid-column:1; grid-row:1; padding-top:22px}
.live .meta .body{font-size:15px; max-width:22ch}
.live .meta .fine{margin-top:12px; display:block; max-width:20ch; line-height:1.7}
.live .bubble-w,.live .swatch{grid-column:1 / -1; grid-row:3; margin-top:18px}
.win .open{position:absolute; left:10px; bottom:10px; z-index:2; font:600 9.5px/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; text-decoration:none; background:rgba(6,5,7,.86); color:#EBDED0; padding:8px 10px 7px; border:1px solid rgba(235,222,208,.28)}
.leaves > .col:last-child{margin-top:34px}
@media (min-width:900px){ .live{grid-template-columns:1fr 300px; max-width:900px} }

/* ---------- reviews: the bubble for the text it was, the swatch for the rest; no stars ---------- */
.bubble-w{margin:0; max-width:318px}
.bubble-w .thread{color:var(--sub); margin:0 0 8px 16px}
.bubble{margin:0; position:relative; background:var(--a-green); color:#060507; border-radius:22px; padding:12px 16px 13px}
.bubble p{font:500 17px/1.38 var(--f-body)}
.bubble::after{content:""; position:absolute; left:-6px; bottom:0; width:18px; height:18px; background:var(--a-green); clip-path:path('M18 18 C10 18 3 15 0 18 C4 13 5 8 6 0 L18 0 Z')}
.bubble-w figcaption{margin:12px 0 0 16px; color:var(--text)}
.swatch{margin:0; max-width:340px; background:#F4ECE2; color:#16130E; box-shadow:0 20px 38px -22px rgba(0,0,0,.6)}
.paper .swatch{background:#FBF7F1; margin-top:34px}
.sw-chip{height:64px; padding:10px 12px 9px; display:flex; justify-content:space-between; align-items:flex-end; gap:10px; background:var(--sw); color:#060507; font:600 9.5px/1.3 'IBM Plex Mono', ui-monospace, monospace; letter-spacing:.12em; text-transform:uppercase}
.sw-q{margin:0; padding:16px 16px 2px}
.sw-q p{font:500 16px/1.5 'Hanken Grotesk', system-ui, sans-serif; letter-spacing:0; text-transform:none}
.swatch figcaption{padding:10px 16px 14px; display:flex; flex-direction:column; gap:3px}
.sw-n{font:600 15px/1.25 'Hanken Grotesk', system-ui, sans-serif}
.swatch figcaption .label{color:#5C5047; font-family:'IBM Plex Mono', ui-monospace, monospace; font-weight:600; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase}
.beats .swatch{margin:40px 0 40px}

/* ---------- the forest close: pink field, the trees in ink across it ---------- */
.forest-b{padding-top:calc(var(--feather) + 30px); padding-bottom:calc(var(--feather) + 30px)}

/* ---------- Start: one page, the call explained first, then the questions, then the booking ---------- */
.shero{min-height:78svh; padding-top:108px; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:var(--feather)}
.shero .head{display:block; max-width:6.2em; font-size:calc(clamp(52px, 13.4vw, 140px) * var(--fdk))}
.shero .lead{margin:24px 0 0; max-width:27ch}
.shero .carry{margin:18px 0 0; display:inline-block; background:#060507; color:#EBDED0; padding:6px 10px 5px}
.shero .carry span:not(:empty) + span:not(:empty)::before{content:" / "}
.sblock{padding-top:calc(var(--feather) * .55); padding-bottom:calc(var(--feather) * .55)}
.sblock .body{margin-top:14px}
.sblock .body + .body{margin-top:12px}
.steps{list-style:none; margin:14px 0 0; padding:0}
.steps li{display:grid; grid-template-columns:34px 1fr; gap:10px; padding:12px 0; border-top:1px solid var(--line); max-width:34ch}
.steps .n{color:var(--a); padding-top:3px}
.steps .body{margin:0; font-size:15.5px}
.squest{padding-top:calc(var(--feather) * .55)}
.intake{margin:0; padding:0; max-width:400px}
.intake .f{display:block; margin:20px 0 0; padding:0; border:0; min-width:0; max-width:34ch}
.intake .f > span,.intake legend{display:block; padding:0; font-family:var(--f-mono); font-weight:600; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--sub); margin-bottom:8px; line-height:1.5}
.intake input[type="text"],.intake input[type="email"],.intake select{display:block; width:100%; margin:0; background:transparent; color:var(--text); border:0; border-bottom:1px solid color-mix(in srgb, var(--text) 45%, transparent); border-radius:0; padding:9px 0 8px; font:400 16px/1.3 var(--f-body); -webkit-appearance:none; appearance:none}
.intake input:focus,.intake select:focus{outline:none; border-bottom-color:var(--a)}
.intake .sel{position:relative}
.intake .sel select{padding-right:22px}
.intake .sel::after{content:"\25BE"; position:absolute; right:2px; bottom:10px; color:var(--sub); pointer-events:none; font-size:12px}
.intake .picks .row{display:flex; flex-wrap:wrap; gap:8px}
.intake .picks legend{margin-bottom:10px; float:left; width:100%}
.intake .picks .row{clear:both}
.intake .picks label{position:relative; display:block}
.intake .picks span{display:block; border:1px solid color-mix(in srgb, var(--text) 45%, transparent); border-radius:var(--r-touch); padding:11px 13px 10px; font:600 10.5px/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--text); cursor:pointer; transition:background var(--d-tap) var(--ease), color var(--d-tap) var(--ease)}
.intake .picks input:checked + span{background:var(--cream); color:var(--ink); border-color:var(--cream)}
.intake .picks input:focus-visible + span{outline:2px solid var(--a); outline-offset:3px}
.intake .bk{margin-top:40px}
.intake .body{margin-top:10px}
.intake .fine{display:block; margin-top:10px; letter-spacing:.08em; line-height:1.6; text-transform:none; font-size:11px; max-width:40ch; opacity:1; color:var(--sub)}
.intake .act{margin-top:26px; border:0; cursor:pointer; font-family:var(--f-body); background:var(--act-bg); color:var(--act-fg)}
.faq .door{margin-top:30px}
.faq > .col > .label{margin-bottom:14px}
.faq .list{max-width:78%}
.qa h3{font-size:16.5px}

/* ---------- Services: the rungs from free up, hanging off the services limb; the small door with the one buy button ---------- */
.shead{padding-top:108px; padding-bottom:calc(var(--feather) - 12px)}
.shead .head{display:block; max-width:6.6em}
.shead .answer{margin-top:26px; max-width:31ch}
.rung{margin-top:30px; padding:22px 0 0 14px; border-top:1px solid var(--line); position:relative; max-width:400px}
.rung .rk{color:var(--sub)}
.rung h3.disp{margin:10px 0 0; max-width:8em}
.rung .rf{margin-top:14px; font-size:16.5px; line-height:1.45; max-width:28ch}
.rung .t{margin-top:12px; font-size:14.5px; line-height:1.5; color:var(--sub); max-width:33ch}
.rung .go,.rung .act{margin-top:18px}
.rung .micro{margin-top:10px; font-size:12px; color:var(--sub)}
.rung .eye{position:absolute; left:-1px; top:22px; width:10px; height:10px; border-radius:50%; background:#060507; box-shadow:0 0 0 2px #E7D3A6}
.rd{margin:16px 0 0}
.rd dt{color:var(--sub); margin-top:12px}
.rd dd{margin:4px 0 0; font-size:15px; line-height:1.5; max-width:28ch}
.rung .lnk{display:inline-block; margin-top:16px}
.rung.door{padding:22px 16px 18px 16px; border:1px dashed var(--line); margin-top:36px}
.rung.door .eye{left:-6px; top:-6px}
.each{padding-left:0; padding-right:0}
.each > .col{padding:0 var(--gut)}
.each-track{display:grid; grid-auto-flow:column; grid-auto-columns:68%; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; margin-top:26px; padding:0 var(--gut) 12px; scroll-padding:0 var(--gut); scrollbar-width:none}
.each-track::-webkit-scrollbar{display:none}
.ecol{scroll-snap-align:start; margin:0; display:flex; flex-direction:column; border:1px solid var(--line); background:#F4ECE2; padding:16px}
.ecol.words{background:none; border:1px dashed var(--line)}
.ecol .ph{font:900 48px/.84 var(--f-disp); letter-spacing:-.022em}
.ecol .pn{margin-top:8px; color:var(--sub)}
.ecol figcaption{font-size:13.5px; line-height:1.45; margin-top:10px; min-height:5.8em}
.ecol .pic{position:relative; margin-top:14px; aspect-ratio:4/5; background:#161314; overflow:hidden}
.ecol .fine{margin-top:10px}
.ecol .lap{position:absolute; left:5%; top:12%; width:84%; aspect-ratio:16/10; border:1px solid rgba(235,222,208,.26); background:#000}
.ecol .lap img,.ecol .ph2 img{width:100%; height:100%; object-fit:cover; object-position:top}
.ecol .ph2{position:absolute; right:6%; bottom:9%; width:27%; aspect-ratio:540/1168; border:1px solid rgba(235,222,208,.4); background:#000; box-shadow:0 18px 40px -12px rgba(0,0,0,.8)}
.ecol .pic.kitpic{aspect-ratio:auto}
.flat{position:relative; padding:12px; display:grid; grid-template-columns:repeat(12, 1fr); gap:6px; align-content:start}
.flat img{width:100%; height:100%; display:block; object-fit:cover}
.flat .print{grid-column:span 5; grid-row:span 2; aspect-ratio:17/22; overflow:hidden; background:#FFF6E0}
.flat .print img{object-fit:contain}
.flat .post{grid-column:span 7; aspect-ratio:9/16; overflow:hidden; background:#000}
.flat .post + .post{grid-column:span 7}
.fl2{display:grid; gap:28px; margin-top:22px}
.fk{color:var(--a-green)} .fk.no{color:var(--sub)}
.fl{list-style:none; padding:0; margin:12px 0 0}
.fl li{padding:12px 0; border-top:1px solid var(--line); font:500 17px/1.35 var(--f-body); max-width:30ch}
.fl.no li{color:var(--sub)}
.honest1{margin-top:28px; color:var(--sub); max-width:33ch}
.after{list-style:none; margin:10px 0 0; padding:0}
.after li{display:grid; grid-template-columns:1fr; gap:3px; padding:22px 0 20px; border-top:1px solid var(--line)}
.after .an{font:600 clamp(22px, 6vw, 30px)/1.15 var(--f-body)}
.after .ap{margin-top:8px; font:600 10px/1.6 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--text)}
.after .al2{font-size:15px; line-height:1.45; color:var(--sub); max-width:34ch; margin-top:4px}
.after .lnk{justify-self:start; margin-top:8px}
@media (min-width:900px){ .fl2{grid-template-columns:1fr 1fr; max-width:980px} .rungs-b{display:grid; grid-template-columns:1fr 1fr; gap:0 48px} .rungs-b > .col,.rung.door{grid-column:1 / -1} .each-track{grid-auto-columns:31%} }

/* ---------- Tools and Journal ---------- */
.thead,.jhead{padding-top:108px; padding-bottom:calc(var(--feather) - 8px)}
.thead .head,.jhead .head{display:block; max-width:6em}
.thead .lead,.jhead .lead{margin-top:22px; max-width:28ch}
.jhead .note{margin-top:14px}
.tools{list-style:none; margin:22px 0 0; padding:0}
.tool a{display:block; padding:22px 0 20px; border-top:1px solid var(--line); text-decoration:none; max-width:30ch}
.tool .tp{color:var(--sub)}
.tool .tn{display:block; font:900 clamp(40px, 11vw, 84px)/.86 var(--f-disp); letter-spacing:-.022em; text-transform:uppercase; margin:10px 0 10px}
.tool .tl{display:block; font-size:15.5px; line-height:1.5; max-width:30ch}
.tool .tg{display:inline-block; margin-top:12px; font:600 10.5px/1.4 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; border-bottom:1px solid currentColor; padding-bottom:2px}
.studio-b .disp{margin:12px 0 16px}
.studio-b .lnk{display:inline-block; margin-top:16px}
.tdoor{padding-top:calc(var(--feather) - 10px)}
.tdoor .lead{margin:14px 0 18px}
.tdoor .disp{margin:12px 0 18px}
.jfeat .jf{display:block; text-decoration:none; margin-top:22px; color:#16130E; max-width:30ch}
.jfeat .jt{display:block; margin:12px 0 14px; max-width:18ch; font:600 clamp(26px, 7vw, 40px)/1.12 var(--f-body); text-transform:none; letter-spacing:-.01em}
.jfeat .lnk{display:inline-block; margin-top:14px}
.jidx{list-style:none; margin:20px 0 0; padding:0; max-width:34ch}
.jidx a{display:grid; grid-template-columns:34px 1fr; gap:4px 10px; padding:18px 0; border-top:1px solid var(--line); text-decoration:none}
.jidx .jn{color:var(--a-green); grid-row:span 2; padding-top:4px}
.jidx .jt{font:600 19px/1.25 var(--f-body)}
.jidx .jk{color:var(--sub)}

/* ---------- The Site and About: the cards and the world stills leave the trunk a strip ---------- */
.card.site.poster,.pw.tilt-s{margin-right:12%}
.card.kit{margin-left:12%}
.world .still{height:clamp(200px, 48vw, 420px)}
.reach li,.bp .lead,.how .lead,.builds .lead{max-width:30ch}
.honest{max-width:32ch}
.faq .list,.faq .fold{max-width:78%}
.hstill{-webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.95) 20%, rgba(0,0,0,.5) 55%, transparent 96%), linear-gradient(to right, #000 50%, transparent 88%); -webkit-mask-composite:source-in; mask-image:linear-gradient(to bottom, rgba(0,0,0,.95) 20%, rgba(0,0,0,.5) 55%, transparent 96%), linear-gradient(to right, #000 50%, transparent 88%); mask-composite:intersect}
.fine.cap,.world .kind .fine{opacity:1}
.world .kind .fine{font-size:8.5px}
.ahero .facts{flex-direction:row; flex-wrap:wrap; gap:6px 18px; margin-top:22px}
.builds .door{margin-top:30px}
@media (min-width:900px){ .card.site.poster,.pw.tilt-s{margin-right:0} .card.kit{margin-left:0} }

/* ---------- the menu button keeps its ground; the bar reads the world under it ---------- */
.menu-b{background:color-mix(in srgb, var(--barg, #060507) 88%, transparent)}

/* ---------- reduced motion: the grown tree, no sequence ---------- */
@media (prefers-reduced-motion: reduce){ .ltag,.ltape .run,.sig i{transition:none; animation:none} }
.rm .sig i,.rm .ltape .run{animation:none}

/* ---------- the paid start and the audit's door (Steve 2026-09-25 18:35: free is the audit, never a call) ---------- */
.act.pay{--act-bg:var(--a-green); --act-fg:#060507}
.act.pay.inv{--act-bg:#060507; --act-fg:#EBDED0}
.shero .switch{margin-top:16px; color:var(--sub)}
.shero .switch a{color:var(--text)}
.intake .fine[hidden]{display:none}
.adoor{min-height:78svh; display:flex; flex-direction:column; justify-content:flex-end; padding-top:108px; padding-bottom:var(--feather)}
.adoor .head{display:block; max-width:6.4em}
.adoor .lead{margin:22px 0 0; max-width:27ch}
.adoor .notfor{margin-top:16px; display:block; max-width:34ch; letter-spacing:.08em; text-transform:none; font-size:11px; color:var(--sub)}
.adoor .find{margin-top:22px; --act-bg:var(--a-green); --act-fg:#060507}
.aq{padding-top:calc(var(--feather) + 20px); padding-bottom:calc(var(--feather) + 40px)}
.aq .prog{color:var(--a)}
.aq .disp{margin:14px 0 22px; max-width:8.5em}
.opts{list-style:none; margin:0; padding:0; max-width:400px}
.opts li + li{margin-top:8px}
.opt{display:grid; grid-template-columns:28px 1fr; gap:12px; align-items:start; width:100%; text-align:left; background:transparent; color:var(--text); border:1px solid color-mix(in srgb, var(--text) 40%, transparent); border-radius:14px; padding:13px 14px 13px 12px; font:500 15.5px/1.35 var(--f-body); cursor:pointer; transition:background var(--d-tap) var(--ease), color var(--d-tap) var(--ease), transform var(--d-tap) var(--ease)}
.opt .label{color:var(--a); padding-top:2px}
.opt[aria-pressed="true"]{background:var(--cream); color:var(--ink); border-color:var(--cream)}
.opt[aria-pressed="true"] .label{color:#36402A}
.opt:active{transform:scale(.985)}
.aq .proto{margin-top:18px; display:block; letter-spacing:.08em; text-transform:none; font-size:11px; color:var(--sub); max-width:34ch}
.aq .proto.on{opacity:1; color:var(--a)}

/* ---------- calibration round 2: the trunk strip on Start (the questions hang on the trunk), their own line in a color that carries ---------- */
.squest .intake,.start-faq{margin-left:36%}
[data-page="start"] .faq > .col{margin-left:36%}
[data-page="start"] .faq .list,[data-page="start"] .faq .door{max-width:none}
.world .own{color:var(--own, var(--a))}
.sblock .body,.sblock .steps{max-width:29ch}

.adoor .notfor,.aq .proto{opacity:1}
[data-page="start"] .intake .f{max-width:none}
.close .door,.close .door a{color:var(--text)}

/* ---------- calibration round 3: the prose columns leave the tree a strip of at least a third of the phone ---------- */
.band .lead{max-width:25ch}
.band .body{max-width:27ch}
.band .answer{max-width:27ch}
.rung{max-width:270px}
.rung .rf{max-width:25ch}
.rung .t,.rd dd{max-width:27ch}
.fl li{max-width:24ch}
.honest1,.honest{max-width:27ch}
.after .al2{max-width:27ch}
.after .an{max-width:12ch}
.tool a,.tool .tl{max-width:26ch}
.jidx{max-width:27ch}
.faq .list,.faq .fold{max-width:70%}
.qa p{max-width:30ch}
.reach li,.bp .lead,.how .lead,.builds .lead{max-width:26ch}
.reach .body{max-width:27ch}
.stage h3{max-width:6.4em}
.stage .d,.stage .leave{max-width:27ch}
.sblock .body,.sblock .steps{max-width:27ch}
.steps li{max-width:27ch}
.card.kit{margin-left:0; max-width:300px}
.card.site.poster,.pw.tilt-s{margin-right:0; max-width:300px}
.hero-txt{max-width:64%}
.hero .lead{max-width:22ch}
.who .answer{max-width:27ch}
.hub .lead{max-width:24ch}
.live .meta .body{max-width:20ch}
.stance-band .disp{max-width:5.6em}
.disp{max-width:6.2em}
.disp.s{max-width:7em}
.each-track{grid-auto-columns:64%}

/* ---------- calibration round 4: the rails and lists that hang on the trunk start past its strip ---------- */
.how .stages-col{margin-left:30%}
.how .stages-w{margin-top:34px; max-width:none}
.stage h3{font-size:clamp(30px, 8vw, 60px); max-width:7em}
.stage .d,.stage .leave{max-width:24ch}
.stage .leave{font-size:13.5px}
.close .plain,.close .go .plain{color:var(--text)}
.each-track{grid-auto-columns:56%}
.ecol{padding:14px}
.ecol .ph{font-size:40px}

/* ---------- calibration round 5 (AA on the built site3, one fail): the fine print under Home's hero button wraps clear of the
   root flare, which stacks bright through the clearing at the line's right end; the tree is not touched ---------- */
[data-page="home"] .hero .go-row .plain{max-width:24ch}

/* the Services pieces (What's in each) start past the trunk, which stands on the left for that stretch */
.each-track{margin-left:22%; grid-auto-columns:70%}

/* MIRROR round 1 (built page, 3 readers): the two people named on screen 1 (THE SPINE section 1's line) */
.hero .hby{margin-top:14px; color:var(--text); max-width:24ch}

/* boot: the first paint takes its styled values without transitioning from the unstyled ones (the head script sets it, site.css's onload clears it two frames later; a window load clears it as a fallback) */
html.boot *,html.boot *::before,html.boot *::after{transition:none !important}

/* ======================= PHASE 7: STEVE'S POLISH ROUND (2026-09-25 ~21:15 ET, eleven items) ======================= */
/* 1. the loader: the words first (IDENTITY, then FIRST., stacked, each with a scale pop), a hard cut, then the rings draw */
.lword{position:absolute; inset:0; z-index:5; margin:0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#EBDED0; font:900 clamp(74px, 23vw, 210px)/.84 var(--f-disp); letter-spacing:-.022em; text-transform:uppercase; text-align:center; pointer-events:none}
.lword span{display:block; opacity:0; transform:scale(.5); will-change:transform}
.lword b{color:var(--orange); font-weight:inherit}
html.grown .lword,html.rm .lword{display:none}
html.js:not(.grown) .ltape,html.js:not(.grown) .lspec,html.js:not(.grown) .sig{opacity:0}   /* they arrive with the rings, never over the words (site.js sets them each frame) */
/* 3. the ladder fits the phone: the trunk strip narrows a little, the rows stack inside the frame, the button wraps its label */
.ladder-w{margin-left:24%}
.ladder li{grid-template-columns:auto 1fr; gap:2px 10px; padding-left:14px; min-width:0}
.ladder .lp{font-size:clamp(24px, 6.4vw, 40px); white-space:nowrap}   /* the price column takes the widest price and never breaks one */
.ladder .ln,.ladder .ll,.ladder .lnk,.ladder .go{min-width:0}
.ladder .ll{max-width:none}
.ladder .go{grid-column:1 / -1; margin-top:16px}
.ladder .go .act{max-width:100%; box-sizing:border-box}
.ladder .go .act .ab{white-space:normal}
@media (min-width:900px){ .ladder li{grid-template-columns:minmax(78px, 30%) 1fr; gap:2px 12px} .ladder .go{grid-column:2} }
/* 4. the threads: lighter than words (.42), and a ghost where they cross type (site.js cuts the frame's clearings into their mask) */
.twigs path{stroke-width:1; opacity:.42}
.twigs circle{opacity:.72}
.tether path{opacity:.5}
/* 6. the bar steps away while you read down, back on the first scroll up (the hub's root tag slid under it) */
.bar{transition:color 300ms var(--ease), transform 380ms var(--ease)}
.bar.away{transform:translateY(-118%)}
.rm .bar{transition:none}
/* 5, 7, 8. what's in each as three flip cards; The Page's preview; the Kit's board */
.each{padding-left:var(--gut); padding-right:var(--gut)}
.each .eachl{margin-top:14px; color:var(--text)}
.flips{margin:26px 0 0 22%; display:grid; gap:18px}
.flip{position:relative; perspective:1600px}
.flip .card3{position:relative; display:grid; transform-style:preserve-3d; transition:transform 640ms var(--ease)}
.flip.on .card3{transform:rotateY(180deg)}
.flip .face{grid-area:1 / 1; -webkit-backface-visibility:hidden; backface-visibility:hidden; background:#F4ECE2; color:#16130E; border:1px solid rgba(22,19,14,.16); box-shadow:0 20px 38px -22px rgba(0,0,0,.5); padding:16px 16px 18px; display:flex; flex-direction:column; align-items:flex-start; text-align:left; min-width:0; transition:opacity 0s linear 176ms}
/* WebKit paints a hidden back face's CHILDREN through the front (the Safari backface bug, seen in the headless shots: the back's list
   mirrored over the front), so the faces also swap opacity at the turn's midpoint: the curve reaches 90 degrees at 27.5 percent of 640 ms */
.flip .face *{-webkit-backface-visibility:hidden; backface-visibility:hidden}
.flip .front{cursor:pointer}
.flip .back{transform:rotateY(180deg); opacity:0}
.flip.on .back{opacity:1}
.flip.on .front{opacity:0}
.flip .fp,.flip .fn,.flip .fs{display:block}
.flip .fp{font:900 40px/.84 var(--f-disp); letter-spacing:-.022em; color:#16130E}
.flip .fn{margin-top:8px; font:600 19px/1.2 var(--f-body)}
.flip .fs{margin-top:6px; font-size:13.5px; line-height:1.45; color:#5C5047; max-width:26ch}
.flip .back .fs{color:#16130E; font-family:var(--f-mono); font-weight:600; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; margin-top:12px}
.flip .pic,.flip .pgv,.flip .kitb{width:100%; margin-top:14px}
.flip .pgplain{margin-top:12px; font-size:14px; line-height:1.45; color:#16130E; max-width:28ch}
.flip .pic{position:relative; aspect-ratio:4/5; background:#161314; overflow:hidden}
.flip .pic .lap{position:absolute; left:5%; top:12%; width:84%; aspect-ratio:16/10; border:1px solid rgba(235,222,208,.26); background:#000}
.flip .pic .lap img,.flip .pic .ph2 img{width:100%; height:100%; object-fit:cover; object-position:top}
.flip .pic .ph2{position:absolute; right:6%; bottom:9%; width:27%; aspect-ratio:540/1168; border:1px solid rgba(235,222,208,.4); background:#000; box-shadow:0 18px 40px -12px rgba(0,0,0,.8)}
.flip .front > .fine{margin-top:10px}
.flip .fine,.pgv figcaption,.kitb figcaption{opacity:1; color:#4A4038}   /* AA: the .82 stone fine print failed on paper (4.36); full opacity, a darker warm gray (8.4:1) */
.flip .tap{margin-top:16px; display:inline-flex; align-items:center; gap:10px; background:#16130E; color:#EBDED0; border:0; padding:11px 14px 10px; font:600 10px/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; cursor:pointer}
.flip .tap i{width:12px; height:12px; border:1.5px solid currentColor; border-radius:50%; position:relative; display:inline-block}
.flip .tap i::after{content:""; position:absolute; left:2.5px; top:2.5px; width:4px; height:4px; background:currentColor; border-radius:50%}
.flip .back ul{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:8px; font-size:14px; line-height:1.4}
.flip .back li{padding-left:16px; position:relative}
.flip .back li::before{content:""; position:absolute; left:0; top:.5em; width:7px; height:7px; background:var(--a-green); box-shadow:0 0 0 1px rgba(22,19,14,.4)}
.flip .back .lnk{margin-top:18px; color:#16130E}
.flip .unflip{margin-top:16px; background:none; border:0; border-bottom:1px solid currentColor; padding:0 0 2px; font:600 10px/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:#5C5047; cursor:pointer}
.rm .flip .card3,html:not(.gl) .flip .card3{transition:none}
.rm .flip.on .card3,html:not(.gl) .flip.on .card3{transform:none}
.rm .flip .face,html:not(.gl) .flip .face{transition:none}
.rm .flip .back,html:not(.gl) .flip .back{transform:none; display:none}
.rm .flip.on .back,html:not(.gl) .flip.on .back{display:flex}
.rm .flip.on .front,html:not(.gl) .flip.on .front{display:none}
@media (min-width:900px){ .flips{grid-template-columns:repeat(3, minmax(0, 1fr)); margin-left:0; max-width:1100px} }
/* 7. The Page's preview: a concept page on a phone, in that world's type and colors (Ellis Residential, a realtor concept) */
.pgv{margin:0}
.pgf{position:relative; aspect-ratio:4/5; background:#161314; overflow:hidden}
.pgp{position:absolute; left:50%; top:5%; transform:translateX(-50%); width:56%; aspect-ratio:390/760; overflow:hidden; background:var(--g); color:var(--text); font-family:var(--fb); border:1px solid rgba(235,222,208,.35); box-shadow:0 18px 40px -12px rgba(0,0,0,.8); display:flex; flex-direction:column; padding:7% 7% 0; font-size:7.5px; line-height:1.4}
.pgbar{display:flex; justify-content:space-between; align-items:center; margin:0 0 8%}
.pgwm{font-family:var(--fd); font-weight:var(--fdw); font-size:9px; letter-spacing:-.01em}
.pgmenu{display:flex; flex-direction:column; gap:2px} .pgmenu i{display:block; width:11px; height:1px; background:currentColor}
.pgimg{aspect-ratio:4/3; overflow:hidden; margin:0 0 7%} .pgimg img{width:100%; height:100%; object-fit:cover}
.pgline{font-family:var(--fd); font-weight:var(--fdw); font-size:15px; line-height:1.02; letter-spacing:-.02em; margin:0; text-transform:var(--fdt)}
.pgsub{font-family:var(--fx); font-style:italic; color:var(--a); margin:5% 0 0; max-width:22ch}
.pgbtn{margin:7% 0 0; align-self:flex-start; background:var(--a); color:var(--g); padding:5px 9px; font-family:var(--fl); font-weight:var(--flw); font-size:6.5px; letter-spacing:.12em; text-transform:uppercase}
.pglinks{list-style:none; margin:8% 0 0; padding:0; font-family:var(--fl); font-weight:var(--flw); font-size:6.5px; letter-spacing:.1em; text-transform:uppercase}
.pglinks li{padding:5px 0; border-top:1px solid var(--line)}
.pgv figcaption{margin-top:10px}
.rung .pgv figcaption{color:var(--text); opacity:.9}
.rung .pgv{margin-top:18px}
.rung .pgplain{margin:12px 0 18px; font-size:14.5px; line-height:1.45; color:var(--text); max-width:26ch}
/* 8. the Kit's board: real pieces where a real client has them (Four-99), a concept letterhead marked as one (Ellis) */
.kitb{margin:0}
/* MIRROR (the food truck owner, phase 7): 'the one thing that would convince a truck owner is sitting in a postage stamp'. On a
   phone the board breaks out of its card to the section's full width (the card is 78 percent of the column, padded 16 px, bordered
   1 px); the 3-column desktop grid keeps it inside the card */
.flip .kitb{width:calc((100% + 34px) / 0.78); margin-left:calc(-0.22 * (100% + 34px) / 0.78 - 17px); max-width:none}
.flip .kitb figcaption{padding:0 17px 0 calc(0.22 * (100% + 34px) / 0.78 + 17px)}
@media (min-width:900px){ .flip .kitb{width:100%; margin-left:0} .flip .kitb figcaption{padding:0} }
.kb{position:relative; display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:6px; background:#161314; padding:7px; align-content:start}
.kb-ig{grid-column:1 / span 3; grid-row:1 / span 2; background:var(--g); color:var(--text); padding:6px; font-family:var(--fb); min-width:0}
.kb-igh{display:flex; align-items:center; gap:5px; margin:0 0 6px; font-size:6px; line-height:1.3}
.kb-igh img{width:17px; height:17px; border-radius:50%; object-fit:cover; flex:0 0 auto}
.kb-igh b{display:block; font-family:var(--fd); font-weight:var(--fdw); font-size:8px; letter-spacing:.02em}
.kb-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:2px}
.kb-grid img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 30%; display:block}
.kb-badge{grid-column:4 / span 3; grid-row:1; background:#0D0D0D; display:grid; place-items:center; padding:9% 26%}
.kb-badge img{width:100%; height:auto}
.kb-lh{grid-column:4 / span 3; grid-row:2 / span 2; position:relative; background:#F6F4EE; color:var(--text); padding:10% 9%; display:flex; flex-direction:column; gap:4px; min-height:0; overflow:hidden}
.kb-lhh{font-family:var(--fd); font-weight:var(--fdw); font-size:7.5px; letter-spacing:-.01em; margin:0}
.kb-rule{display:block; height:1px; background:var(--a); margin:2px 0 5px}
.kb-t{display:block; height:2px; background:rgba(22,22,20,.16); width:88%} .kb-t.s{width:56%}
.kb-lhf{margin:auto 0 0; padding-top:10px; font-family:var(--fx); font-style:italic; font-size:5.5px; color:var(--a)}
.kb-stamp{position:absolute; right:5px; top:5px; font:600 5px/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--a); border:1px solid currentColor; padding:2px 3px; transform:rotate(6deg)}
.kb-truck{grid-column:1 / span 3; grid-row:3; overflow:hidden} .kb-truck img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; display:block}
.kb-menu{grid-column:1 / span 2; grid-row:4; overflow:hidden} .kb-menu img{width:100%; height:auto; aspect-ratio:440/569; object-fit:cover; object-position:top; display:block}
.kb-night{grid-column:3 / span 4; grid-row:4; overflow:hidden; align-self:end} .kb-night img{width:100%; height:100%; object-fit:cover; aspect-ratio:3/2; display:block}
.kitb figcaption{margin-top:10px; line-height:1.7}
.card.kit .kitb{margin:18px 0 4px}
.card.kit .kitb figcaption{color:var(--text); opacity:.9}
.edframe figcaption,.edin .label{color:var(--text); opacity:.9}
/* 9. the editor placeholder: the client edits the everyday things; the preview lands after the review session (nothing invented) */
.editor-b{padding-top:var(--feather); padding-bottom:calc(var(--feather) + 8px)}
.editor-b .disp{margin:14px 0 18px; max-width:7em}
.editor-b .lead{max-width:26ch}
.edframe{margin:26px 0 0; max-width:420px}
.edin{aspect-ratio:16/10; border:1px dashed color-mix(in srgb, var(--text) 45%, transparent); display:grid; place-items:center; color:var(--sub)}
.edframe .edwin{width:min(100%, 300px); background:#000 url(/assets/v/p7-editor.webp) center top / cover no-repeat}
.edframe .edwin video{object-fit:cover; object-position:top}
.editor-b .edline{margin-top:4px; max-width:30ch}
.edframe figcaption{margin-top:10px}
/* 11. the hard goods shop: one quiet footer line, never in the primary nav */
.foot .shopline{margin-top:16px; font-size:13px; color:var(--sub)}
.foot .shopline a{text-decoration:none; border-bottom:1px solid color-mix(in srgb, currentColor 55%, transparent); padding-bottom:1px}

.live .meta .lnk{display:inline-block; margin-top:12px}
/* the 2026-09-28 launch posts: a plain list inside a journal body */
.sblock .plainlist{margin:14px 0 0; padding-left:18px; max-width:29ch; display:grid; gap:9px}
.sblock .plainlist li{font-size:15px; line-height:1.5}
@media (min-width:1000px){ .sblock .plainlist{max-width:34ch} }
/* /work/: the "Read the case study" line after a world band sits on the gutter like everything else */
p.casestudy{display:block; border-bottom:0; margin:0; padding:16px var(--gut) 22px}
p.casestudy a{color:inherit; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px}