/* ↻ 2026-10-27 (the 10-27 site audit, P2): every page of the company crosses to the next with the browser's own fade (Chrome, Edge, Safari 18.2+;
   others simply navigate) — it was set on the three Landfall pages only */
@view-transition { navigation: auto; }
/* ═══════════════════════════════════════════════════════════════════════════════════════════
   ONE DESIGN SYSTEM FOR BOTH SITES — the grammar of Gemini's draft (white ground, near-black tight type, hairline
   rounded panels, pill buttons, mono eyebrows, a segmented hero slider) with OUR paint on it: thick impasto running
   down the white, spatter where you touch, and paintings that hang grey until you reach them — the app's own rule.
   No framework, no build step for the CSS: it deploys anywhere.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
:root{
  --ink:#0B0B0C; --soft:#5B6472; --mute:#8A93A0; --line:rgba(11,11,12,.09); --line2:rgba(11,11,12,.16);
  --white:#fff; --sand:#F5F5F7; --canvas:#FAFAF8;
  --gold1:#F3DC9A; --gold2:#D9B45C; --gold3:#8A6424;
  /* the eight parts of a life, in the inks the app paints them with */
  --p1:#E4572E; --p2:#F2994A; --p3:#F2C94C; --p4:#3FA66B; --p5:#1FA3A3; --p6:#2F80ED; --p7:#7B5CD6; --p8:#E0569B;
  --r-xl:28px; --r-lg:20px; --r-md:14px;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:var(--sans);   /* 2026-11-08, his round 2 "Gone everywhere": every small label keeps its size and tracking, set in the house type */
  --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font:400 17px/1.6 var(--sans);font-feature-settings:"cv02","cv03","cv04","cv11";-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* 🔴 `height:auto` IS LOAD-BEARING AND WAS MISSING (2026-09-20). Lance, on the live page: "the lighthouse images
   still look really bad. there tall and smushed in."  He was describing a real geometry failure, not a taste.
   `shot()` emits <img width="1600" height="1000">. Those attributes are presentational hints, so they land as
   `width:1600px; height:1000px`. `max-width:100%` then caps the WIDTH to the column — and nothing ever touched
   the HEIGHT, so a 1600x1000 landscape screenshot was drawn at 363x1000: a 1:2.75 PORTRAIT, squashed 4.4x.
   Measured on the deployed page: 18 of 25 product screenshots distorted, `object-fit` computing to `fill`,
   which stretches rather than preserves. The skins gallery was the worst at aspect 0.363 against a true 1.6.
   ⚠️ The other three pages were clean, which is why this survived a build, four deploys and a walk — their
   images carry inline `aspect-ratio` + `object-fit:cover`, so they never depended on this line.
   Every rule that deliberately sets a height (.phone img, .day img, .icons img, .few img) is more specific and
   still wins; this only supplies the missing default. */
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:rgba(31,163,163,.18)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
@media(max-width:640px){.wrap{padding:0 16px}}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:10px;z-index:200}
.skip:focus{left:12px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}

/* ── type ── */
h1,h2,h3{margin:0;letter-spacing:-.035em;line-height:1.04;font-weight:800;text-wrap:balance}
h1{font-size:clamp(40px,6.2vw,76px)}
h2{font-size:clamp(32px,4.6vw,58px)}
h3{font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em;line-height:1.2;font-weight:700}
p{margin:0;text-wrap:pretty}
.lead{font-size:clamp(18px,1.7vw,22px);line-height:1.5;color:var(--soft);max-width:60ch}
.eyebrow{font:600 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--soft);display:inline-flex;align-items:center;gap:10px}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--p5);display:inline-block}
.tag{display:inline-flex;align-items:center;gap:8px;font:700 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:9px 14px;border-radius:999px;border:1px solid var(--line2);background:#fff}
.soft{color:var(--soft)} .mono{font-family:var(--mono)} .center{text-align:center}
.grad{background:linear-gradient(100deg,var(--p1),var(--p3) 28%,var(--p5) 55%,var(--p7) 80%,var(--p8));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ── nav ── */
.nav{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:20px;height:60px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em;text-decoration:none;font-size:18px;white-space:nowrap}
.brand b{width:28px;height:28px;border-radius:8px;background:var(--ink);color:#fff;display:grid;place-items:center;font:800 13px var(--sans)}
.nav nav{display:flex;gap:22px;margin-left:auto;font-size:14.5px;color:var(--soft)}
.nav nav a{text-decoration:none;white-space:nowrap;display:inline-block;padding:11px 0;line-height:22px}.nav nav a:hover{color:var(--ink)}
@media(max-width:900px){.nav nav{display:none}.nav .btn{margin-left:auto}}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;font:700 15.5px/1 var(--sans);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn-ink{background:var(--ink);color:#fff;box-shadow:0 10px 24px -10px rgba(11,11,12,.55)}
.btn-ink:hover{transform:translateY(-1px);box-shadow:0 16px 30px -12px rgba(11,11,12,.6)}
.btn-line{background:#fff;color:var(--ink);border-color:var(--line2)}
.btn-line:hover{border-color:var(--ink)}
.btn-line i{width:7px;height:7px;border-radius:50%;background:var(--p5)}
.btn-sm{min-height:40px;padding:0 16px;font-size:14px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ── sections ── */
section{position:relative;padding:clamp(72px,10vw,132px) 0}
section.tight{padding:clamp(48px,6vw,80px) 0}
.sand{background:var(--sand)}
.inkbg{background:var(--ink);color:#fff}.inkbg .lead,.inkbg .soft,.inkbg .eyebrow{color:rgba(255,255,255,.66)}
.head{display:grid;gap:18px;margin-bottom:clamp(36px,5vw,64px);max-width:860px}
.head.center{margin-left:auto;margin-right:auto;justify-items:center}
.panel{border:1px solid var(--line);border-radius:var(--r-xl);background:#fff;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 30px 60px -40px rgba(11,11,12,.25)}
.grid2{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:960px){.grid2{grid-template-columns:1fr}.grid3{grid-template-columns:1fr}.grid4{grid-template-columns:1fr 1fr}}
.card{border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;background:#fff;display:grid;gap:10px;align-content:start}
.card .n{font:700 12px var(--mono);letter-spacing:.12em;color:var(--mute)}
.card p{color:var(--soft);font-size:16px}
.list{display:grid;gap:14px;padding:0;margin:0;list-style:none}
.list li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;color:var(--soft)}
.list li b{color:var(--ink)}
.list li::before{content:"";width:9px;height:9px;border-radius:50%;margin-top:9px;background:var(--dot,var(--p5))}

/* ── the hero slider (Gemini's segmented rail, ours in paint) ── */
.hero{padding:clamp(24px,4vw,44px) 0 clamp(40px,6vw,72px)}
.hero-card{position:relative;overflow:hidden;border-radius:clamp(22px,3vw,36px);border:1px solid var(--line);background:linear-gradient(180deg,#fff 0%,#FBFBFA 100%);box-shadow:0 40px 80px -60px rgba(11,11,12,.35)}
.hero-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--p1),var(--p2),var(--p3),var(--p4),var(--p5),var(--p6),var(--p7),var(--p8));z-index:3}
.hero-in{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(20px,4vw,56px);padding:clamp(28px,5vw,68px);min-height:min(78vh,720px);align-items:center;position:relative;z-index:2}
@media(max-width:960px){.hero-in{grid-template-columns:1fr;min-height:0;padding-top:84px}}
.hero-in>*,.slide{min-width:0}
.slides{display:grid}
.slide{grid-area:1/1;display:grid;gap:22px;align-content:center;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1),visibility 0s .6s}
.slide .tag{justify-self:start}
.slide h1,.slide h2{font-size:clamp(36px,5.1vw,66px)}
.slide.on{opacity:1;visibility:visible;transform:none;transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.visuals{display:grid;place-items:center;min-height:380px}
.visual{grid-area:1/1;opacity:0;transform:scale(.97) translateY(10px);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.2,1);pointer-events:none;width:100%;display:grid;place-items:center}
.visual.on{opacity:1;transform:none;pointer-events:auto}
.counter{position:absolute;right:clamp(18px,3vw,40px);top:clamp(18px,3vw,36px);z-index:4;display:flex;align-items:center;gap:4px;border:1px solid var(--line2);border-radius:999px;background:rgba(255,255,255,.9);padding:4px;font:600 12.5px var(--mono)}
.counter button{width:44px;height:44px;border-radius:50%;border:0;background:transparent;cursor:pointer;font-size:16px;display:grid;place-items:center;color:var(--ink)}
.counter button:hover{background:var(--sand)}
.counter span{padding:0 8px;min-width:64px;text-align:center}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px;padding:0 clamp(28px,5vw,68px) clamp(24px,3vw,40px);position:relative;z-index:2}
.rail button{all:unset;cursor:pointer;display:grid;gap:10px;font:600 12.5px var(--sans);color:var(--mute);min-height:44px}
.rail button .bar{height:4px;border-radius:4px;background:rgba(11,11,12,.1);overflow:hidden}
.rail button .bar b{display:block;height:100%;width:0;background:var(--c,var(--ink));border-radius:4px}
.rail button.on{color:var(--ink)} .rail button.on .bar b{width:100%;transition:width var(--dur,6s) linear}
.rail button.done .bar b{width:100%;transition:none;opacity:.35}
@media(max-width:760px){.rail button span{display:none}.rail{gap:6px}}
@media(prefers-reduced-motion:reduce){.slide,.visual{transition:none}.rail button.on .bar b{transition:none}}

/* ── frames: a phone, a browser, a gilded picture frame ── */
.phone{width:min(300px,100%);max-width:72vw;aspect-ratio:390/844;border-radius:46px;padding:9px;background:#0B0B0C;box-shadow:0 0 0 1.5px #2a2a2d inset,0 40px 70px -30px rgba(11,11,12,.55),0 12px 24px -12px rgba(11,11,12,.35);position:relative}
.phone img{width:100%;height:100%;object-fit:cover;border-radius:38px}
.phone::after{content:"";position:absolute;left:50%;top:16px;transform:translateX(-50%);width:34%;height:22px;border-radius:14px;background:#0B0B0C}
.phone.sm{width:min(230px,58vw);border-radius:38px;padding:7px}.phone.sm img{border-radius:32px}.phone.sm::after{height:17px;top:13px}
.browser{border:1px solid var(--line2);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 40px 80px -50px rgba(11,11,12,.45)}
.browser .bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--sand)}
.browser .bar i{width:11px;height:11px;border-radius:50%;background:#FF5F57}.browser .bar i:nth-child(2){background:#FEBC2E}.browser .bar i:nth-child(3){background:#28C840}
.browser .bar span{margin-left:12px;font:500 12px var(--mono);color:var(--soft);background:#fff;border:1px solid var(--line);border-radius:8px;padding:4px 12px}
.gilt{padding:clamp(8px,1.2vw,14px);border-radius:6px;background:linear-gradient(160deg,#F6E7B4 0%,#D9B45C 38%,#A9843D 70%,#E9D39A 100%);box-shadow:0 30px 50px -28px rgba(60,40,15,.6),0 2px 0 rgba(255,255,255,.7) inset,0 -2px 0 rgba(90,60,20,.35) inset}
.gilt>*{border-radius:2px;box-shadow:0 0 0 1px rgba(60,40,15,.45),0 0 0 5px #3B2A10 inset}
.plaque{display:inline-block;margin-top:12px;padding:6px 14px;border-radius:5px;font:800 12.5px var(--sans);color:#3B2A10;background:linear-gradient(180deg,var(--gold1),var(--gold2) 48%,#B8893A);border:1px solid var(--gold3);box-shadow:0 2px 5px rgba(60,40,15,.3)}

/* ── the varnish: a painting hangs grey until you reach it — the app's own grammar ── */
.varnish{position:relative;overflow:hidden;display:block}
.varnish img{width:100%;display:block}
.varnish .g{filter:grayscale(1) contrast(.82) brightness(1.1)}
.varnish .c{position:absolute;inset:0;height:100%;object-fit:cover;-webkit-mask-image:radial-gradient(ellipse farthest-corner at 50% 56%,#000 calc(var(--reach,0%) - 16%),transparent var(--reach,0%));mask-image:radial-gradient(ellipse farthest-corner at 50% 56%,#000 calc(var(--reach,0%) - 16%),transparent var(--reach,0%));transition:--reach 2.2s cubic-bezier(.2,.7,.2,1)}
@property --reach{syntax:'<percentage>';inherits:false;initial-value:0%}
.varnish.lit .c{--reach:118%}
@media(prefers-reduced-motion:reduce){.varnish .c{transition:none}}

/* ── horizontal galleries (the second slider) ── */
.scroller{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 24px 28px;margin:0 -24px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.scroller::-webkit-scrollbar{display:none}
@media(max-width:640px){.scroller{margin:0 -16px;padding-left:16px;padding-right:16px}}
.grid2>*,.grid3>*,.grid4>*{min-width:0}
.pair{display:flex;gap:14px;justify-content:center;align-items:flex-end}.pair .phone{width:min(230px,43vw)}
.scroller>*{scroll-snap-align:center;flex:0 0 auto}
.piece{width:min(420px,78vw)} .piece figcaption{margin-top:12px;font-size:14.5px;color:var(--soft);line-height:1.4}
.ctrl{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}
.ctrl button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line2);background:#fff;cursor:pointer;font-size:18px}
.ctrl button:hover{border-color:var(--ink)}

/* ── facts strip ── */
.facts{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.facts div{padding:22px 18px;border-right:1px solid var(--line);display:grid;gap:4px}
.facts div:last-child{border-right:0}
.facts b{font-size:clamp(26px,3vw,38px);letter-spacing:-.03em;line-height:1}
.facts span{font-size:13px;color:var(--soft);line-height:1.3}
@media(max-width:900px){.facts{grid-template-columns:repeat(2,1fr)}.facts div{border-bottom:1px solid var(--line)}}
.footnote{font:500 12px var(--mono);color:var(--mute);margin-top:14px}

/* ── the five movements ── */
.weeks{display:grid;gap:14px}
.week{border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;background:#fff;display:grid;grid-template-columns:230px 1fr;gap:20px;align-items:start}
.week h3{display:flex;align-items:baseline;gap:10px}.week h3 small{font:700 12px var(--mono);color:var(--mute);letter-spacing:.1em}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.day{border:1px solid var(--line);border-radius:14px;padding:10px 8px;text-align:center;display:grid;gap:6px;justify-items:center;background:var(--canvas);min-height:112px}
.day img{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 4px 5px rgba(60,40,15,.22))}
.day b{font:700 11px var(--mono);color:var(--mute)} .day span{font-size:11.5px;line-height:1.25;color:var(--soft)}
@media(max-width:960px){.week{grid-template-columns:1fr}.days{grid-template-columns:repeat(4,1fr)}}
@media(max-width:520px){.days{grid-template-columns:repeat(3,1fr)}}

/* ── icon wall ── */
.icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
.icons figure{margin:0;border:1px solid var(--line);border-radius:18px;background:#fff;padding:14px 8px;display:grid;justify-items:center;gap:6px;transition:transform .25s ease,box-shadow .25s ease}
.icons figure:hover{transform:translateY(-4px);box-shadow:0 18px 30px -18px rgba(11,11,12,.35)}
.icons img{width:62px;height:62px;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(60,40,15,.22))}
.icons figcaption{font-size:11px;color:var(--soft);text-align:center;line-height:1.2}

/* ── sky switcher ── */
.skies{display:flex;gap:8px;flex-wrap:wrap}
.skies button{all:unset;cursor:pointer;padding:11px 18px;border-radius:999px;border:1px solid var(--line2);font:600 14px var(--sans);min-height:44px;box-sizing:border-box;display:inline-flex;align-items:center}
.skies button[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.island{position:relative;width:min(420px,100%);aspect-ratio:1620/2181;filter:drop-shadow(0 30px 40px rgba(60,40,15,.32))}
.island .sky{position:absolute;left:14.88%;top:10.82%;width:70.12%;height:77.95%;object-fit:cover;transition:opacity .9s ease}
.island .fr{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* ── paint ── */
.paint-top{position:absolute;left:0;right:0;top:0;width:100%;pointer-events:none;z-index:1;mix-blend-mode:multiply;opacity:.96}
canvas.drips{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
canvas.splat{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:60}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ── footer ── */
footer{border-top:1px solid var(--line);padding:44px 0 64px;color:var(--soft);font-size:14.5px}
footer .wrap{display:grid;gap:18px}
footer .cols{display:flex;flex-wrap:wrap;gap:4px 28px}
footer .cols a{display:inline-block;padding:11px 0;line-height:22px}
footer a{text-decoration:none}footer a:hover{color:var(--ink)}

/* ═══════════════ 2026-09-20 · his reference (Xai-Therapy-Homepage): the ghosted numeral, the slide, the answer ═══════════════
   He named the file he liked FIRST — a hero whose panels move sideways behind an enormous pale number, and a black
   bubble that answers the question a person is actually holding. Both are reproduced here in our own colour. */
.slide{transform:translateX(38px)}                      /* enters from the right, the way his reference moves */
.slide.on{transform:none}
.hero-card .ghost{position:absolute;left:50%;top:50%;transform:translate(-50%,-46%);z-index:0;pointer-events:none;
  font:900 clamp(160px,27vw,400px)/0.78 var(--sans);letter-spacing:-.06em;color:rgba(11,11,12,.045);user-select:none}
@media(max-width:960px){.hero-card .ghost{font-size:clamp(130px,36vw,240px);top:44%;opacity:.7}}
/* an anchor must not land under the sticky bar */
section[id]{scroll-margin-top:96px}

/* the answer — a worry in a light bubble, the product's reply in ink, with the thing that makes it true underneath */
.qa{display:grid;gap:14px;justify-items:end;max-width:min(560px,100%)}
.qa .ask{background:#fff;border:1px solid var(--line);border-radius:20px 20px 6px 20px;padding:14px 18px;font-size:clamp(15px,1.5vw,17px);font-weight:600;box-shadow:0 12px 30px -22px rgba(11,11,12,.5)}
.qa .say{justify-self:start;background:var(--ink);color:#fff;border-radius:20px 20px 20px 6px;padding:18px 20px;max-width:100%;box-shadow:0 26px 50px -34px rgba(11,11,12,.9)}
.qa .say p{margin:0;font-size:clamp(15px,1.55vw,17.5px);line-height:1.5;color:#fff}
.qa .say p .soften{color:rgba(255,255,255,.62)}
.qa .say .src{display:flex;align-items:center;gap:8px;margin-top:12px;font:600 11.5px var(--mono);letter-spacing:.06em;color:rgba(255,255,255,.55);text-transform:uppercase}
.qa .say .src i{width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;font-style:normal;font-size:11px;color:#fff}

/* a wall of things, shown big and few — replaces the thumbnail grid */
.few{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(18px,3vw,38px);align-items:end}
.few.six{grid-template-columns:repeat(6,1fr)}
.few.six img{width:clamp(84px,9vw,112px)}
@media(max-width:1000px){.few{grid-template-columns:repeat(3,1fr)}.few.six{grid-template-columns:repeat(4,1fr)}}
@media(max-width:620px){.few,.few.six{grid-template-columns:repeat(2,1fr);gap:22px}}
.few figure{margin:0;text-align:center;display:grid;gap:12px;justify-items:center}
.few img{width:clamp(96px,13vw,148px);height:auto;filter:drop-shadow(0 26px 34px rgba(11,11,12,.16))}
.few figcaption{font-size:14px;font-weight:650;color:var(--ink);max-width:19ch;line-height:1.3}
.few .sub{font:600 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}

/* a call to action should not break across a line mid-phrase — photographed on Wayward's world cards ("See" / "it →") */
.card p a,.card a[href]{white-space:nowrap}
.grid3 .card,.grid2 .card{align-content:start}

/* A screenshot you can open (2026-09-20, his pick: "whole, but let them open"). The whole workspace stays on the
   page at page width, and the file itself opens full size in a new tab — the browser is the lightbox, so there is
   no script to load and it still works with JavaScript off. */
/* 🖼 THE PRODUCT GETS A WIDER MEASURE THAN THE PROSE (2026-09-20). Lance: "They should be 4k brilliant … those
   should be the best thing about this page."  Measured on the deployed page first: the widest any screenshot
   was ever DRAWN was 758px CSS on a 1920 viewport, and the skins gallery drew each one at 363px — a whole
   clinical workspace rendered narrower than a phone. `--wrap` is 1180px and every picture lived inside it,
   usually in half of it beside text.
   Prose wants ~70 characters and must NOT get wider; a screenshot wants every pixel it can have. So they stop
   sharing a measure. `.stage` is opt-in and scoped to this page's figures — nothing else reflows, and the
   three other pages never reference it. */
/* ⚠️ IT HAS TO BREAK OUT OF .wrap, AND MY FIRST VERSION DID NOT. `max-width:1640px` on a child of a 1180px
   `.wrap` is a ceiling that never gets reached: the parent's content box is the real limit, so the skins tiles
   still drew at 523px instead of ~780. `margin-left: calc(50% - half the width)` re-centres a box WIDER than
   its parent on the parent's own centre line, which is the one trick that does not need every section
   restructured. (50% here resolves against the parent's width, so this is W/2 - B/2 — the negative offset a
   break-out needs.) */
.stage{width:min(1640px,96vw);margin:clamp(26px,4vw,52px) 0 0 calc(50% - min(820px,48vw));padding:0 24px}
.stage-note{width:min(1640px,96vw);margin:14px 0 0 calc(50% - min(820px,48vw));padding:0 24px;color:var(--soft);font-size:14.5px}
/* One big one per row, and on a wide screen two — never three: three is how they became thumbnails. */
.stage-grid{display:grid;grid-template-columns:1fr;gap:clamp(20px,2.6vw,34px)}
@media (min-width:1180px){.stage-grid.two{grid-template-columns:repeat(2,1fr)}}
.stage figcaption,.stage-grid figcaption{margin-top:12px;font-size:14.5px;color:var(--soft)}

.browser.shot{display:block;cursor:zoom-in;transition:transform .18s ease,box-shadow .18s ease}
.browser.shot:hover{transform:translateY(-3px);box-shadow:0 52px 96px -48px rgba(11,11,12,.55)}
.browser.shot:focus-visible{outline:3px solid var(--p5);outline-offset:4px}
@media (prefers-reduced-motion:reduce){.browser.shot{transition:none}.browser.shot:hover{transform:none}}

/* THE OPENING (2026-09-20). A painted lamp room at dawn, six seconds, silent, looping — the one thing on these
   pages that is not literally the software, and he chose it knowing that. It carries no information the words
   below do not, so it is `aria-hidden` and announces itself to nobody.
   ⚠️ IT STOPS FOR ANYONE WHO ASKED FOR STILLNESS: under prefers-reduced-motion the poster frame stands in and the
   video is never shown, decided by the stylesheet rather than waiting on script. */
/* 🔬 WHERE THE WORDS SIT IS THE WHOLE ANSWER, AND IT WAS MEASURED, NOT GUESSED (2026-09-20).
   Lance, looking at the live hero: "the hero shot is awesome … the words can giv[e] them the best quality
   with all that light". Blanking the glyphs and reading the pixel actually painted behind them, at 1920x1080:
     .open-name  worst 2.43:1 · 18 of 55 sample points under 4.5 · 7 under 3.0
     .open-line  worst 2.08:1 · 30 of 55 under 4.5 · 13 under 3.0   ← more than half the line
   The words were centred, which on THIS film is dead on the Fresnel lens — the brightest object in frame.
   ⚠️ THE OBVIOUS FIX IS THE WRONG ONE. Darkening the scrim to rescue the text dims the lamp, and the lamp is
   the thing he loves. So the words MOVE instead: down into the band below the lens, where the film is already
   dark, plus a local pool under the text block only. The light is untouched; the type simply stops standing
   in front of it. (A fix that trades away the thing being praised is not a fix.) */
.open{position:relative;min-height:min(78vh,720px);display:grid;place-items:end center;overflow:hidden;background:#07161b;padding:0 0 clamp(64px,11vh,132px)}
.open-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* the white fade now starts LATER (was .62 at 82%, then #fff at 100%) so the lower band the words moved into
   is still dark enough to carry white ink, instead of whitening out from under them */
.open::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(7,22,27,.34),rgba(7,22,27,.10) 34%,rgba(7,22,27,.52) 66%,rgba(7,22,27,.80) 88%,#fff 100%)}
.open-in{position:relative;z-index:2;text-align:center;display:grid;justify-items:center;gap:10px;padding:0 24px;isolation:isolate}
/* the local pool: a soft ellipse behind the text block ONLY. `isolation:isolate` on the parent keeps this
   z-index:-1 inside .open-in's own stacking context, so it lands above the film and below the words. */
.open-in::before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(132%,1060px);height:230%;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 50% at 50% 50%,rgba(4,14,18,.74),rgba(4,14,18,.52) 52%,rgba(4,14,18,.20) 74%,rgba(4,14,18,0) 88%)}
.open-name{margin:0;font:800 clamp(30px,4.4vw,52px)/1.05 var(--sans);letter-spacing:-.035em;color:#fff;text-shadow:0 2px 22px rgba(3,12,16,.55)}
.open-line{margin:0;font-size:clamp(15.5px,1.7vw,19px);line-height:1.5;color:rgba(255,255,255,.94);max-width:34ch;text-shadow:0 1px 14px rgba(3,12,16,.6)}
@media (prefers-reduced-motion:reduce){.open-film{display:none}.open{background:#07161b url(../assets/film/lamp-dawn.webp) center/cover}}

/* 44px IS A CLAIM THIS REPO MAKES, AND THE HEADER WAS NOT KEEPING IT (2026-09-20, lighthouse-1f).
   README: "every control at or above 44px". Measured in a real browser at 1440, 768 and 390 on the LANDFALL page
   — the one already approved and live — the brand link was 29px tall and the header's pill CTA 40px. Both are
   shared by all four pages, so this was never one page's defect; it was the standard being stated and not held.
   The fix is height only: no colour, no type size, no spacing between them moves, so nothing anyone has looked at
   changes shape. ⚠️ The other three sites pick this up on their NEXT deploy — their live CSS is the older one
   until someone republishes them, and that is not mine to do. */
.nav .brand{min-height:44px}
.nav .btn-sm{min-height:44px}

/* 🔴 THE BRAND WAS BEING CRUSHED AND ITS TEXT PAINTED OVER THE FIRST NAV LINK (2026-09-20, the Lighthouse page).
   Found by LOOKING at a photograph of the hero: the header read "The Lighthouse hour". Every box measurement said
   the row was fine — `.brand` ended at 537.7 and the nav began at 557.7, a 20px gap, at every width tested.
   ⚠️ THE BOXES WERE NOT LYING, THEY WERE ANSWERING A DIFFERENT QUESTION. `.brand` is a flex item with the default
   `0 1 auto`, so an over-full row SHRANK it to 144px — but it also carries `white-space:nowrap` and inherits
   `overflow:visible`, so its 178px of glyphs simply rendered 34px outside the box it had been given.
   `getBoundingClientRect` reports the BOX. `scrollWidth > clientWidth` reports the GLYPHS, and it is the witness:
     lighthouse  scrollW 178  clientW 144  → 34px of "The Lighthouse" painted over "The hour", at 1280–1920
     landfall    scrollW 107  clientW 107  → fits, which is the only reason the approved page looks right
   A brand is a name, not a thing that gives way, so it stops shrinking here. The row is made to fit by carrying
   fewer links instead — see IN_NAV in build.mjs, which now has a budget and says why. */
.nav .brand{flex:none}

/* THE MARK'S NEW HOME (2026-09-20). Lance on the hero: "probably move the icon somewhere else". In the hero it
   sat 92px wide dead on the brightest point of the lens, which is the one place on that film where a small object
   cannot be seen — it read as a sticker on a painting, and it stood between the words and the light.
   It lands in #why instead — "Somebody has to keep the light on", the same sentence the hero opens with — on the
   ink ground, big, with a lamp's glow behind it. ⚠️ The image it replaces was `art/lamp-dawn.webp`, which is a
   STILL OF THE HERO'S OWN FILM: the page was showing the same frame twice and calling the second one an argument. */
.mark-moment{position:relative;display:grid;place-items:center;padding:clamp(18px,4vw,46px)}
.mark-moment::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(46% 46% at 50% 48%,rgba(255,214,150,.30),rgba(255,196,110,.13) 45%,rgba(255,190,100,0) 72%)}
.mark-moment img{position:relative;z-index:1;width:min(78%,420px);height:auto;filter:drop-shadow(0 34px 58px rgba(0,0,0,.55))}

.browser.film video{display:block;width:100%;height:auto}

/* 🔴 `all:unset` ON .rail button WIPED ITS FOCUS RING — found 2026-09-20 by tabbing the page rather than looking
   at it. The stylesheet declares `:focus-visible{outline:2px solid var(--ink)}` at (0,1,0); `.rail button` is
   (0,1,1) AND `all:unset` resets outline to none, so the five slider tabs were reachable by keyboard on ALL FOUR
   pages with nothing on screen to say where you were. The rule above was true and unreachable.
   Restated here at a specificity that wins, and given the slide's own colour so it reads on any of them. */
.rail button:focus-visible{outline:2px solid var(--c,var(--ink));outline-offset:4px;border-radius:6px}
/* `.skies button` (Landfall's sky switcher) carries the same `all:unset` and lost its ring the same way. */
.skies button:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:999px}

/* ── 2026-10-19 · THE LANDFALL PAGE'S DRAFTS, BLUE AND THE BOOK (the websites helper; his D8 · D10 · D12 in
   lance-command-center/docs/registers/THE_WEBSITES_ROLLOUT_2026-10-16.md). A ✏️ line is a Claude's draft for his redline;
   a struck line is one the app has overtaken, kept beside its replacement because his D8 says the words stay. Only the
   Landfall page and its book carry these classes, so nothing the other three pages show moves. ───────────────────── */
ins.draft,.draft{background:#fff3dc;color:#8a5200;text-decoration:none;border-radius:4px;padding:0 3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hand{font-family:"Caveat","Snell Roundhand","Bradley Hand",cursive;font-weight:700;font-size:28px;line-height:1.1;color:#1f3fa8;letter-spacing:0}
.film-wide{width:100%;height:auto;aspect-ratio:16/9;border-radius:22px;display:block;background:#fff;object-fit:cover}
.book{display:grid;grid-template-columns:1fr 1fr;border-radius:14px;overflow:hidden;box-shadow:0 26px 40px -24px rgba(0,0,0,.45);border:1px solid #d9d2c3}
.book .cover{background:#2c3e57;color:#f4ead2;padding:22px;display:flex;flex-direction:column;justify-content:space-between;min-height:320px;gap:14px}
.book .cover img{width:100%;height:170px;object-fit:cover;border-radius:10px;border:3px solid #c9a75a}
.book .cover b{display:block;font-family:Georgia,serif;font-weight:400;font-size:24px;letter-spacing:.02em}
.book .cover i{display:block;font-family:"Caveat",cursive;font-style:normal;font-size:22px;color:#e8cf8f;border-bottom:1.5px solid #e8cf8f;width:max-content;min-width:140px;margin-top:6px}
.book .leaf{background:#fbf6ea;padding:22px;font-family:Georgia,serif;color:#3a3326;display:grid;align-content:start;gap:10px}
.book .leaf b{font-size:17px}.book .leaf p{margin:0;font-size:15px;color:#5a523f}
.book .leaf span{justify-self:start;font:600 13px/26px Inter,-apple-system,sans-serif;color:#2b5fd9;border:1px solid #2b5fd9;border-radius:999px;padding:9px 14px;min-height:44px}
@media(max-width:520px){.book{grid-template-columns:1fr}}
.blue-orb{border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff 0 7%,#bcd3ff 14%,#5d8df0 38%,#1f3fa8 70%,#0b1d5e 100%);box-shadow:inset -8px -12px 22px rgba(0,0,0,.35),0 16px 30px -12px rgba(31,63,168,.55)}
/* a picture slot the night will fill: the register's §4 — every Lighthouse photograph predates the October look (2026-10-19) */
.browser.reshoot .reshoot-in{aspect-ratio:16/10;display:grid;place-content:center;text-align:center;gap:8px;padding:24px;background:repeating-linear-gradient(45deg,#f7f7f5 0 12px,#efefeb 12px 24px);color:var(--soft);font-size:14.5px}
.browser.reshoot .reshoot-in b{color:#a32d2d;font:700 12px var(--mono);letter-spacing:.12em}

/* ── 2026-10-19 · THE LIGHTHOUSE PAGE (lane W of the Lighthouse build; the lane brief allows this one appended block, for classes
   only that page uses). .lh-fig: every figure carries a caption — the three product films and five stills had none. .lh-upto:
   "up to" over the tools figure (his 10-18 R2: "Up to N", derived through the product's own catalogueForWorld). .lh-nav: that
   page's header carries the four chapters, eight links; measured in a browser 2026-10-19 12:28 (lanes/W/runs/measure-nav.txt): brand 178
   + links 713 + CTA 154 + gaps and padding need ≥ 1132px of viewport, so the links hide below 1140px on that page alone. ──────────────────── */
.lh-fig{margin:0;min-width:0}.lh-fig>figcaption{margin-top:12px;font-size:14.5px;line-height:1.45}
.mark-moment>figcaption{position:relative;z-index:1;text-align:center;margin-top:18px}
.facts b .lh-upto{display:block;font:600 11px var(--mono);letter-spacing:.12em;color:var(--mute);margin-bottom:6px}
@media(max-width:1139px){.lh-nav nav{display:none}.lh-nav .btn{margin-left:auto}}

/* ── 2026-10-19 · THE LIVING STORY BUILD (seven pages, one generator — his round 2). The company band on every page, the glass box as
   its mark, Blue in the margin of the product pages, the two halves, the nine, the join table, the product cards. Nothing above
   this line moved; every class below is new, so the four older pages keep their shape where they do not use them. ───────── */
/* ── 2026-10-23 · THE ONE MENU (his round 3: "A: one header, menus (Recommended)"; the old company band retired with it).
   The company header on every page, sticky; a group opens a panel the width of the page (Products with the paintings); the
   page’s own header follows it as the slim chapter row. Under 1080px one Menu button opens one sheet. ───────────────────── */
.gnav{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line)}
.gnav>.wrap{display:flex;align-items:center;gap:18px;height:64px}
.gbrand{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:16px;letter-spacing:-.01em;color:var(--ink);text-decoration:none;white-space:nowrap;min-height:44px;flex:none}
.gbrand img{width:30px;height:30px;border-radius:8px;object-fit:cover}
.gmenu{display:flex;align-items:center;gap:4px;margin-left:8px}
.gm-b,.gm-a{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:0 13px;min-height:44px;border-radius:999px;font:500 15px/1 var(--sans);color:var(--ink);white-space:nowrap;text-decoration:none}
.gm-b span{font-size:10px;color:var(--mute);transition:transform .2s}
.gm-b:hover,.gm-a:hover,.gm-b[aria-expanded=true]{background:var(--sand)}.gm-b[aria-expanded=true] span{transform:rotate(180deg)}
.gm-a[aria-current]{text-decoration:underline;text-underline-offset:6px}
.gm-b:focus-visible,.gm-a:focus-visible,.gm-burger:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.gm-panel{position:absolute;left:0;right:0;top:64px;background:#FBFBFA;border-bottom:1px solid var(--line);box-shadow:0 30px 50px -40px rgba(11,11,12,.45);padding:20px max(20px,calc((100vw - 1240px) / 2 + 20px)) 24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.gm-panel[hidden]{display:none}
.gm-panel.pics{grid-template-columns:repeat(6,minmax(0,1fr))}
.gm-panel a{display:grid;gap:6px;align-content:start;text-decoration:none;color:var(--ink);padding:12px;border-radius:16px}
.gm-panel a:hover,.gm-panel a:focus-visible{background:#fff}
.gm-panel img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:14px;border:1px solid var(--line)}
.gm-panel b{font-size:15px;line-height:1.25}.gm-panel span{font-size:13.5px;color:var(--soft);line-height:1.35}
.gm-panel a[aria-current] b{text-decoration:underline;text-underline-offset:5px}
.gright{margin-left:auto;display:flex;align-items:center;gap:10px}
.gm-burger{all:unset;box-sizing:border-box;cursor:pointer;display:none;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line2);font:600 14px var(--sans)}
.gm-sheet{position:fixed;left:0;right:0;top:64px;bottom:0;overflow:auto;background:#fff;padding:6px 20px 48px;z-index:95}
.gm-sheet[hidden]{display:none}
.gm-sheet h6{font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:20px 0 4px}
.gm-sheet a{display:flex;align-items:center;gap:12px;min-height:50px;text-decoration:none;color:var(--ink);font-size:17px;border-bottom:1px solid var(--line)}
.gm-sheet a[aria-current]{font-weight:700}
.gm-sheet a img{width:48px;height:36px;border-radius:8px;object-fit:cover}
@media(max-width:1240px) and (min-width:1081px){.gm-panel.pics{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1080px){.gmenu,.gright .btn{display:none}.gm-burger{display:inline-flex}}
@media(min-width:1081px){.gm-sheet{display:none!important}}
@media(max-width:400px){.gbrand{font-size:15px;gap:8px}.gbrand img{width:26px;height:26px}}
/* each page’s own header, under the one menu: the slim chapter row */
.gnav~.nav{top:64px;z-index:80}
.gnav~.nav .wrap{height:52px}
.gnav~.nav .brand{font-size:15px}
.gnav~.nav .brand b,.gnav~.nav .brand img{width:24px;height:24px;font-size:11px;border-radius:6px}
.gnav~.nav nav{font-size:14px}
.nav .brand img{width:30px;height:30px;border-radius:8px;object-fit:cover}
@media(max-width:560px){.nav .brand{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:16px}.nav .btn-sm{padding:0 13px;font-size:13.5px}}

/* Blue in the margin: her orb at the edge, one line in her hand; on a phone a small orb that opens the line.
   2026-10-26 night: on a computer the line used to stay up for good, a 360 px bubble fixed over the right edge of the column
   (seen over THE TAPS card's text at 1440) — she says it once (.say, ~7 s), folds back into the orb, and the orb opens it again. */
.blue-side{position:fixed;right:18px;bottom:22px;z-index:70;display:flex;align-items:flex-end;gap:12px;max-width:min(360px,calc(100vw - 36px));opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.blue-side.in{opacity:1;transform:none;pointer-events:auto}
.blue-side-orb{all:unset;cursor:pointer;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;flex:none}
.blue-side-orb .blue-orb{width:48px;height:48px}
.blue-side-orb:focus-visible{outline:2px solid #1f3fa8;outline-offset:3px;border-radius:50%}
.blue-side .hand{font-size:22px;line-height:1.15;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:18px 18px 4px 18px;padding:12px 16px;box-shadow:0 18px 40px -24px rgba(11,11,12,.5);margin:0 0 6px;transition:opacity .5s ease,transform .5s ease,visibility 0s linear 0s}
.blue-side:not(.open):not(.say) .hand{opacity:0;transform:translateY(6px);visibility:hidden;transition:opacity .5s ease,transform .5s ease,visibility 0s linear .5s}
@media(max-width:760px){.blue-side .hand{display:none}.blue-side.open .hand{display:block}}
@media(prefers-reduced-motion:reduce){.blue-side{transition:none}}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}   /* 2026-10-23: left:-999px was measured from Blue’s fixed box at the right edge, so on a wide screen the hidden label “Blue” showed at the bottom left */

/* the two halves of the company */
.halves{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:860px){.halves{grid-template-columns:1fr}}
.half{border:1px solid var(--line);border-radius:var(--r-xl);background:#fff;padding:30px;display:grid;gap:14px;align-content:start}
.half .n{font:700 12px var(--mono);letter-spacing:.14em;color:var(--mute)}
.half ul{list-style:none;margin:6px 0 10px;padding:0;display:grid;gap:12px}
.half li{display:grid;gap:2px;padding:12px 0;border-top:1px solid var(--line)}
.half li b{font-size:18px;letter-spacing:-.02em}.half li span{color:var(--soft);font-size:15px}
.half .btn{justify-self:start}

/* the products on the home */
.products .product{text-decoration:none;color:inherit;padding:0;overflow:hidden}
.products .product img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.products .product .n,.products .product h3,.products .product p,.products .product .go{margin-left:22px;margin-right:22px}
.products .product .n{margin-top:18px}.products .product .go{display:block;margin-bottom:22px;font-size:15px;white-space:nowrap}
.products .product:hover{box-shadow:0 30px 60px -40px rgba(11,11,12,.45);transform:translateY(-3px);transition:transform .2s ease,box-shadow .2s ease}
.loop-icons{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:end}
.loop-icons figure{margin:0;text-align:center;display:grid;gap:10px;justify-items:center;position:relative}
.loop-icons img{width:clamp(80px,10vw,140px);height:auto;filter:drop-shadow(0 26px 34px rgba(11,11,12,.16))}
.loop-icons .step{font:700 12px var(--mono);color:#fff;background:var(--p6);width:26px;height:26px;border-radius:50%;display:grid;place-items:center}
.loop-icons figcaption{font-size:14px;font-weight:650}

/* the nine, in four */
.nine{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1000px){.nine{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.nine{grid-template-columns:1fr}}
.group{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;padding:22px;display:grid;gap:12px;align-content:start}
.group .gh{display:grid;gap:6px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.group .n{font:700 11.5px var(--mono);letter-spacing:.12em;color:var(--mute)}
.group .rise{font-size:22px;letter-spacing:-.02em;background:linear-gradient(100deg,var(--p5),var(--p7));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.phase{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start}
.phase .num{width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font:700 13px var(--mono)}
.phase b{display:block;font-size:16px;letter-spacing:-.01em;line-height:1.25}
.phase i{display:block;font-style:normal;color:var(--soft);font-size:14px;line-height:1.35;margin-top:3px}
.rises{display:grid;gap:10px;width:100%;max-width:420px}
.rises div{border:1px solid var(--line);border-radius:14px;padding:14px 18px;background:#fff;display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.rises b{font-size:20px;letter-spacing:-.02em}.rises span{color:var(--soft);font-size:13px;text-align:right}

/* the join table */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
.join{border-collapse:collapse;width:100%;min-width:760px;font-size:15px}
.join th{text-align:left;font:700 11.5px var(--mono);letter-spacing:.12em;color:var(--mute);padding:14px 16px;border-bottom:1px solid var(--line);text-transform:uppercase}
.join td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.join tr:last-child td{border-bottom:0}
.join td b{display:block;font-size:16px}.join td .soft{display:block;font-size:14px;margin-top:3px}
.join .chip{display:inline-block;border:1px solid var(--line2);border-radius:999px;padding:4px 10px;margin:2px 4px 2px 0;font-size:13.5px;white-space:nowrap}
.steps{margin:0;padding-left:22px;display:grid;gap:10px;color:var(--soft);font-size:16px}.steps li::marker{font-weight:700;color:var(--ink)}

/* crew portraits */
.crew .portrait{padding:0;overflow:hidden}
.crew .portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top;display:block}
.crew .portrait figcaption{padding:18px 22px 22px;display:grid;gap:6px}
.crew .portrait p{color:var(--soft);font-size:15px}
@media(max-width:960px){.crew{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.crew{grid-template-columns:1fr}}
/* up close: the parts of a screen at the size a therapist sees them; the films; a crew card that plays */
.close-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,34px)}
@media(max-width:860px){.close-grid{grid-template-columns:1fr}}
.close{margin:0;display:grid;gap:12px}
.close img{width:100%;height:auto;border-radius:16px;border:1px solid var(--line2);box-shadow:0 40px 80px -50px rgba(11,11,12,.45);background:#fff}
.close figcaption{font-size:14.5px;line-height:1.45}
.films-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.6vw,34px)}
@media(max-width:860px){.films-grid{grid-template-columns:1fr}}
.crew .portrait video{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top;display:block;background:#000}

/* ── 2026-10-22 · THE HEADER FITS (lighthouse-22; the site's own walk, check-pages "header overflow"): the company and clinical headers
   carry nine links and their button — 1234 and 1222 px in the 1180 px row at 1440 (older than tonight: the same ten links since 2568135).
   Under 1500 px the links sit 14 px apart at 14 px, so nine fit at 1440; and the links' row may scroll sideways rather than push the button
   out of the header on a narrow laptop, as the band's own links (.co-links) already do. A wide screen is as it was. ────────────────────── */
@media (min-width:901px) and (max-width:1499px){.nav nav{gap:14px;font-size:14px}}
.nav nav{min-width:0;overflow-x:auto;scrollbar-width:none}.nav nav::-webkit-scrollbar{display:none}
/* the foot's site map (2026-10-23): the menu's four groups, so the bottom of every page is a way to every other */
footer .sitemap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin:24px 0 8px}
footer .sitemap h6{font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:0 0 6px}
footer .sitemap a{display:flex;align-items:center;min-height:36px;color:var(--soft)}
@media(max-width:700px){footer .sitemap{grid-template-columns:repeat(2,minmax(0,1fr))}footer .sitemap a{min-height:44px}}
/* ── 2026-10-23 · THE FRAMEWORK PAGE, MY ROBOT FRIEND, THE STORE (his rounds 2–5) ── */
.fw-hero{padding:clamp(40px,6vw,80px) 0 20px}.fw-hero h1{font-size:clamp(40px,5.4vw,72px);line-height:1.02;letter-spacing:-.035em;margin:0 0 16px}
.fw-nine{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.fw-group{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;padding:20px;display:grid;gap:12px;align-content:start}
.fw-group .gh{display:flex;justify-content:space-between;align-items:baseline;gap:10px}.fw-group .gh .n{font:700 11.5px var(--mono);letter-spacing:.1em;color:var(--mute)}
.fw-group .rise{font-size:15px}.fw-gline{margin:0;font-size:14.5px}
.fw-phase{display:grid;grid-template-columns:34px 1fr;gap:10px;border-top:1px solid var(--line);padding-top:12px}
.fw-phase .num{width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font:700 13px var(--mono)}
.fw-phase b{display:block;font-size:15.5px}.fw-phase i{display:block;font-style:normal;color:var(--soft);font-size:14px;margin-top:2px}
.fw-phase p{margin:8px 0 0;font-size:14px;line-height:1.45;color:#2B2F36}
@media(max-width:1100px){.fw-nine{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.fw-nine{grid-template-columns:1fr}}
.card a.go{font-weight:700;text-decoration:none;color:var(--ink)}
.mrf-cast{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.mrf-one{margin:0;padding:14px;gap:12px}.mrf-stages{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mrf-stages img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;background:#0d1b1e}
.mrf-one figcaption b{display:block;font-size:17px}.mrf-one figcaption span{color:var(--soft);font-size:14px}
@media(max-width:1100px){.mrf-cast{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.mrf-cast{grid-template-columns:1fr}}
.store-big h2{margin:6px 0 4px}
.rooms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}@media(max-width:820px){.rooms{grid-template-columns:1fr}}
/* the book's bar (2026-10-23): under the one menu, the way back to the page; it replaces the comparison bar of 10-17 */
.book-bar{background:var(--ink);color:#fff;font-size:14px;line-height:1.4;padding:6px 18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.book-bar b{font-weight:700;white-space:nowrap}.book-bar a{color:#fff;text-decoration:underline;margin-left:auto;min-height:44px;display:inline-flex;align-items:center}
/* ── 2026-10-23 · THE PRIVACY POLICY AND THE TERMS (his rollout round 1, G5: drafts for counsel). The paper's reading measure, a bar that
   says the page is not yet in force, and every unanswered blank marked where it falls. ── */
.counsel-bar{background:#fff3dc;color:#5a3a00;border-bottom:1px solid #f0d9a8;font-size:14.5px;line-height:1.45;padding:12px 20px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.paper.legal{padding:clamp(30px,5vw,60px) 0 80px}.paper.legal .wrap{max-width:780px}
.paper.legal h1{font-size:clamp(34px,4.6vw,56px);letter-spacing:-.03em;margin:0 0 20px}.paper.legal h2{font-size:clamp(21px,2.4vw,28px);margin:38px 0 10px}
.paper.legal p,.paper.legal li{font-size:17px;line-height:1.65;color:#2B2F36}.paper.legal p{margin:0 0 14px}
.paper.legal p.caution{border-left:3px solid #c98a1b;background:#fff8ea;padding:12px 16px;border-radius:0 12px 12px 0}
mark.blank{background:#ffe7a8;color:#5a3a00;border-radius:4px;padding:0 4px;font-weight:600}
.paper.legal ol.blanks{padding-left:22px}.paper.legal ol.blanks li{margin:0 0 10px}
.paper.legal hr{border:0;border-top:1px solid var(--line);margin:34px 0}
/* ── 2026-10-23 · THE TITLE ART (his names rounds): a page opens on its painted title, a chapter may hold a second, the foot carries the
   company's. ── */
.title-art{padding:clamp(18px,3vw,34px) 0 0}.title-art .wrap{display:grid;place-items:center}
.title-art img{width:min(1100px,100%);height:auto;filter:drop-shadow(0 24px 30px rgba(11,11,12,.16))}
.title-fig{margin:clamp(28px,4vw,48px) auto 0;max-width:900px;text-align:center}.title-fig img{width:100%;height:auto;filter:drop-shadow(0 20px 26px rgba(11,11,12,.14))}
.title-fig figcaption{margin-top:10px;font-size:14.5px}
footer .foot-logo{display:block;width:min(360px,80%);height:auto;margin:0 0 14px}
/* the moving titles: the loop plays where it exists; the still painting is its fallback and its reduced-motion face */
.title-art.moving img{display:none}
.title-art video.title-loop{width:min(1100px,100%);height:auto;display:block;background:#fff}
@media(prefers-reduced-motion:reduce){.title-art.moving video{display:none}.title-art.moving img{display:block}}

/* the commercials and trailers (2026-10-23 night): a 9:16 film in a phone-shaped frame */
.spots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
@media(max-width:980px){.spots{grid-template-columns:repeat(2,minmax(0,1fr))}}
.spot{margin:0}.spot-frame{border-radius:26px;overflow:hidden;background:#0d1b1e;border:6px solid #0d1b1e;box-shadow:0 30px 60px -40px rgba(11,11,12,.55)}
.spot video{display:block;width:100%;height:auto;aspect-ratio:9/16;background:#0d1b1e}
.spot figcaption{font-size:14px;line-height:1.4;color:var(--mute);margin-top:10px}.spot figcaption b{color:var(--ink)}
.spot-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,22px)}
.trailer-tall{max-width:380px;margin-inline:auto;width:100%}
.beam-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
@media(max-width:1100px){.beam-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:640px){.beam-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.beam{margin:0}.beam video{display:block;width:100%;height:auto;aspect-ratio:960/536;border-radius:14px;background:#0d1b1e}.beam figcaption{font-size:13px;line-height:1.35;color:var(--mute);margin-top:6px}

/* ── 2026-10-26 · THE LANDFALL PAGE REBUILT (his round 7 with the designer session 9f2686; SITE_PLAN.md): the name as ONE WINDOW (the
   letters cut from paper, one moving painting behind them, an SVG clipPath in objectBoundingBox units so the word fills the box at
   every width), the BOOK WRITING ITSELF (CSS perspective, the painting on the left page, a page of a person's story on the right), the two
   paths, the engine spread with its tabs, the island strip, five acts, the cast, the hall, and the DAY rail. Only landfall/ and its two
   paths wear these classes; the other pages' copies change bytes, not looks. ───────────────────────────────────────────────────── */
.lf-name{padding:clamp(14px,2.6vw,30px) 0 0}
.lf-window{position:relative;width:100%;aspect-ratio:16/5.6;background:#fff;overflow:hidden}
.lf-window video,.lf-window img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;-webkit-clip-path:url(#lf-word);clip-path:url(#lf-word);will-change:transform}
.lf-window img{display:none}
.lf-line{margin:clamp(12px,2vw,20px) auto 0;text-align:center;max-width:62ch;font-size:clamp(17px,1.9vw,22px);line-height:1.45;color:var(--soft)}
@media(prefers-reduced-motion:reduce){.lf-window video{display:none}.lf-window img{display:block}}
.lf-hero{padding:clamp(26px,4vw,54px) 0 clamp(40px,6vw,80px)}
.lf-stage{perspective:1600px;overflow:hidden;padding:12px 0 30px}
.lf-book{display:grid;grid-template-columns:1fr 1fr;max-width:1040px;margin:0 auto;transform:rotateX(5deg);transform-style:preserve-3d;filter:drop-shadow(0 30px 34px rgba(11,11,12,.26))}
.lf-pg{position:relative;overflow:hidden;background:#fffcf2;border:1px solid #e6dcc3;aspect-ratio:3/4;min-width:0}
.lf-pg.l{border-radius:12px 2px 2px 12px;transform:rotateY(12deg);transform-origin:right center;box-shadow:inset -26px 0 34px rgba(0,0,0,.12)}
.lf-pg.r{border-radius:2px 12px 12px 2px;transform:rotateY(-12deg);transform-origin:left center;box-shadow:inset 26px 0 34px rgba(0,0,0,.09);padding:clamp(16px,2.6vw,36px);font-family:Georgia,"Iowan Old Style",serif;color:#2f2a20;font-size:clamp(13px,1.4vw,18.5px);line-height:1.5;display:flex;flex-direction:column}
.lf-pg.l video,.lf-pg.l img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;aspect-ratio:auto;border-radius:0}
.lf-num{display:flex;justify-content:space-between;gap:10px;font:700 10px var(--mono);letter-spacing:.14em;color:#8a7f68;margin-bottom:clamp(8px,1.4vw,16px)}
.lf-pg.r p,.lf-leaf p{margin:0 0 .7em}
.lf-pg.r .w{display:inline-block}
.lf-pg.r i,.lf-leaf i{font-style:italic}
.slot{background:#fff1c6;border-bottom:1.5px solid #b8860b;padding:0 2px;border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.lf-foot{margin-top:auto;border-top:1px dashed #c9bb98;padding-top:8px;font-weight:700;font-size:.86em}
@media(max-width:700px){.lf-book{grid-template-columns:1fr;transform:none}.lf-pg.l{aspect-ratio:16/10;transform:none;border-radius:12px 12px 0 0}.lf-pg.r{aspect-ratio:auto;transform:none;border-radius:0 0 12px 12px;font-size:16px;padding:20px 18px 18px}.lf-foot{margin-top:14px}}
.lf-paths{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,22px);max-width:1040px;margin:clamp(14px,3vw,30px) auto 0}
@media(max-width:700px){.lf-paths{grid-template-columns:1fr}}
.lf-path{display:grid;gap:10px;align-content:start;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,2.6vw,30px);background:#fff;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease}
.lf-path:hover{transform:translateY(-3px);box-shadow:0 30px 50px -36px rgba(11,11,12,.45)}
.lf-path b{font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em;line-height:1.15}
.lf-path p{color:var(--soft);font-size:16px}
.lf-path .k{justify-self:start;margin-top:4px;background:var(--ink);color:#fff;border-radius:999px;padding:0 18px;font:700 14px var(--sans);min-height:44px;display:inline-flex;align-items:center}
.lf-six{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
@media(max-width:1000px){.lf-six{grid-template-columns:repeat(3,1fr)}}@media(max-width:520px){.lf-six{grid-template-columns:repeat(2,1fr)}}
.lf-six figure{margin:0;display:grid;gap:10px;justify-items:center;text-align:center;padding:18px 12px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;align-content:start}
.lf-six img{width:96px;height:96px;object-fit:cover;border-radius:18px}.lf-six img.icon{object-fit:contain;border-radius:0}
.lf-six figcaption{font-size:13.5px;line-height:1.35;color:var(--soft)}.lf-six figcaption b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}
.lf-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.lf-tabs button{all:unset;cursor:pointer;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line2);font:600 14px var(--sans);color:var(--soft);display:inline-flex;align-items:center;background:#fff}
.lf-tabs button[aria-selected=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.lf-tabs button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.lf-leaf{background:#fffcf2;border:1px solid #e6dcc3;border-radius:14px;padding:clamp(20px,3vw,36px);font-family:Georgia,"Iowan Old Style",serif;color:#2f2a20;font-size:clamp(16px,1.5vw,19px);line-height:1.55;max-width:720px;box-shadow:0 30px 50px -40px rgba(0,0,0,.35);display:flex;flex-direction:column}
.lf-leaf[hidden]{display:none}.lf-leaf .lf-foot{margin-top:10px}
.lf-strip .scroller{gap:clamp(14px,2vw,22px)}
.lf-film{margin:0;width:min(560px,78vw)}
.lf-film video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:18px;background:#0d1b1e;display:block}
.lf-film figcaption{margin-top:10px;font:600 14px var(--sans);color:var(--soft)}
.lf-acts{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.6vw,22px)}
@media(max-width:1100px){.lf-acts{grid-template-columns:repeat(3,1fr)}}@media(max-width:640px){.lf-acts{grid-template-columns:1fr 1fr}}
.lf-act{margin:0;display:grid;gap:8px;align-content:start}
.lf-act img,.lf-act video{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:18px;background:#0d1b1e}
.lf-act small{font:700 11px var(--mono);letter-spacing:.14em;color:var(--mute);margin-top:4px}
.lf-act b{font-size:clamp(17px,1.6vw,21px);letter-spacing:-.02em;line-height:1.2}
.lf-act span{color:var(--soft);font-size:15px;line-height:1.4}
.lf-cast{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,30px)}
@media(max-width:860px){.lf-cast{grid-template-columns:1fr}}
.lf-who{margin:0;display:grid;gap:12px;align-content:start}.lf-who img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top;border-radius:20px}
.lf-who b{font-size:clamp(20px,2vw,26px);letter-spacing:-.02em}.lf-who span{color:var(--soft)}
.lf-hall video,.lf-hall img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:22px;display:block;background:#0d1b1e}
.lf-rail{position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:60;font:700 11px var(--mono);letter-spacing:.16em;color:var(--mute);writing-mode:vertical-rl;pointer-events:none;background:rgba(255,255,255,.72);padding:10px 4px;border-radius:999px;border:1px solid var(--line)}
@media(max-width:760px){.lf-rail{right:4px;font-size:10px;padding:8px 3px}}
.lf-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,22px)}@media(max-width:700px){.lf-two{grid-template-columns:1fr}}
/* THE 3-D LAYER (2026-10-26 night, the night builder; shared/landfall3d.js): one transparent canvas fixed over the white page, under the rail, Blue's margin and
   the two headers; each scene stands in an anchor that holds its still, and the still fades once the scene is lit */
canvas.lf-3d{position:fixed;left:0;top:0;z-index:30;pointer-events:none;display:block}
.lf-3d-anchor{position:relative;display:block}
.lf-3d-anchor>img,.lf-3d-anchor>.lf-egg-shell{transition:opacity .9s ease}
.lf-3d-anchor.lit>img,.lf-3d-anchor.lit>.lf-egg-shell{opacity:0}
.lf-who-stage.lit>img{opacity:.14}
.lf-grab{cursor:grab}.lf-grab:active{cursor:grabbing}
.lf-six .lf-3d-anchor{width:96px;height:96px}
/* the book: on a computer the drawn spread replaces the HTML one (still on the page for a reader that reads it); on a phone the painting page alone */
@media(min-width:760px){.lf-book3d.lit .lf-book{opacity:0}}
@media(max-width:759px){.lf-book3d.lit .lf-pg.l>video,.lf-book3d.lit .lf-pg.l>img{opacity:0}}
.lf-isle{margin:clamp(10px,2vw,24px) auto clamp(28px,4vw,48px);max-width:1180px}
.lf-isle-stage{aspect-ratio:16/8;display:grid;place-items:center}
.lf-isle-stage>img{width:min(78%,820px);height:auto}
.lf-isle figcaption{text-align:center;font-size:14px;margin-top:8px;position:relative;z-index:31;text-shadow:0 0 6px rgba(255,255,255,.9)}   /* above canvas.lf-3d (z 30): the sea's glow is drawn past the stage and buried this line at 1440 */
@media(max-width:700px){.lf-isle-stage{aspect-ratio:1/1}.lf-isle-stage>img{width:96%}}
.lf-exhibit{margin:0;width:min(560px,78vw)}
.lf-exhibit .lf-3d-anchor{aspect-ratio:16/9;border-radius:18px;background:radial-gradient(ellipse at 50% 92%,#efe9dc 0,#fbf9f4 45%,#fff 75%);display:grid;place-items:center}
.lf-exhibit .lf-3d-anchor>img{width:auto;height:84%;object-fit:contain}
.lf-exhibit figcaption{margin-top:10px;font:600 14px var(--sans);color:var(--soft)}
.lf-who-stage{border-radius:20px;overflow:visible}.lf-who-stage>img{display:block}
.lf-eggs{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,2vw,22px)}
@media(max-width:860px){.lf-eggs{grid-template-columns:repeat(3,1fr)}}@media(max-width:520px){.lf-eggs{grid-template-columns:repeat(2,1fr)}}
.lf-egg{margin:0;display:grid;gap:8px;text-align:center;align-content:start}.lf-egg figcaption{font-size:14px;color:var(--soft)}.lf-egg figcaption b{display:block;color:var(--ink);font-size:16px}
.lf-egg-stage{aspect-ratio:4/5;display:grid;place-items:center}
.lf-egg-shell{width:46%;aspect-ratio:.78;border-radius:50% 50% 46% 46%/58% 58% 42% 42%;background:radial-gradient(circle at 34% 30%,var(--g) 0,var(--p) 42%,var(--a) 100%);box-shadow:0 18px 26px -14px rgba(0,0,0,.35)}
/* THE ALTIMETER: the rail as a gauge on a computer — a tick a day, the marker climbing (a phone keeps DAY n) */
.lf-rail{writing-mode:horizontal-tb;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 6px}
.lf-rail .alt-scale{display:flex;flex-direction:column-reverse;gap:5px}
.lf-rail .alt-scale i{display:block;width:8px;height:2px;border-radius:2px;background:var(--line2,#d9d6cf);transition:background .3s,width .3s}
.lf-rail .alt-scale i.wk{width:14px}.lf-rail .alt-scale i.on{background:var(--ink,#0b0b0c)}
.lf-rail .alt-day{writing-mode:vertical-rl;font:700 11px var(--mono);letter-spacing:.16em;color:var(--ink)}
@media(max-width:760px){.lf-rail .alt-scale{display:none}}
/* THE PAGE TRANSITIONS (his N1 · 2): the three Landfall pages uncover into each other — the new page rises from the foot as the old one settles back */
@keyframes lf-uncover{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes lf-settle{to{transform:scale(.965);opacity:.4}}
::view-transition-new(root){animation:lf-uncover .8s cubic-bezier(.76,0,.24,1) both}
::view-transition-old(root){animation:lf-settle .8s cubic-bezier(.76,0,.24,1) both}
@media(prefers-reduced-motion:reduce){::view-transition-new(root),::view-transition-old(root){animation:none}}
/* Lenis (the main Landfall page only): the page glides; the sticky header and the menu sheet keep working */
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}.lenis.lenis-stopped{overflow:hidden}

/* ── 2026-11-04 · ONE HERO + THE TRUE THINGS (his round 3 that day; lib/kit.mjs nameLine() and truths(); pages/truths.mjs) ── */
.name-line{padding:0 0 clamp(8px,1.6vw,18px)}
.truths{padding:clamp(40px,6vw,84px) 0}
.truths-list{list-style:none;margin:0;padding:0;counter-reset:t;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,4vw,64px)}
.truths-list li{counter-increment:t;display:grid;grid-template-columns:clamp(48px,5vw,68px) minmax(0,1fr);column-gap:clamp(12px,1.6vw,20px);row-gap:6px;padding:clamp(18px,2.2vw,28px) 0;border-top:1px solid var(--line);min-width:0;align-content:start}
.truths-list li::before{content:counter(t,decimal-leading-zero);grid-row:1/span 3;font:700 clamp(30px,3.6vw,46px)/1 var(--mono);letter-spacing:-.05em;color:var(--mute);padding-top:2px}
.truths-list b{font-size:clamp(19px,2vw,25px);letter-spacing:-.022em;line-height:1.15;color:var(--ink)}
.truths-list p{margin:0;color:var(--soft);font-size:clamp(15px,1.4vw,17px);line-height:1.5}
.truths-list .src{font:500 11.5px/1.4 var(--mono);letter-spacing:.04em;color:var(--mute);overflow-wrap:anywhere}
.truths-list .src::before{content:"read from ";text-transform:none}
.inkbg .truths-list b{color:#fff}.inkbg .truths-list li{border-top-color:rgba(255,255,255,.14)}
@media(max-width:760px){.truths-list{grid-template-columns:minmax(0,1fr)}.truths-list li::before{font-size:26px}}
/* the practice page's hero: his name in the house type, one line, and his living portrait as the page's one picture */
.pr-hero{padding:clamp(18px,3vw,40px) 0 clamp(28px,4vw,56px)}
.pr-name{margin:0;text-align:center;font:800 clamp(44px,9vw,128px)/.95 var(--sans);letter-spacing:-.045em;text-wrap:balance}
.pr-name small{display:block;font:700 12px/1 var(--mono);letter-spacing:.32em;color:var(--mute);margin-top:clamp(10px,1.4vw,16px)}
.pr-film{margin:clamp(22px,3vw,40px) auto 0;max-width:1040px}
.pr-film video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-xl);background:#111;box-shadow:0 40px 80px -60px rgba(11,11,12,.45)}

/* ── 2026-11-08 · THE RELEASE CUT (his websites rounds 1–3, the designer session ed60f5): the mono labels gone (the --mono token above now
   names the house type), the boxes lifted in the Lighthouse's glass (~/landfall2 …/ui/liftedGlass.ts, the Lighthouse's own --glass-*),
   the sand a soft ground wash the glass can float over, his tagline at every foot, the paint as one or two slow threads (site.js `thread`). ── */
.card,.panel,.half,.facts,.hero-card,.qa .ask,.lf-path,.week,.group,.fw-group{background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.92);box-shadow:0 22px 48px rgba(16,24,40,.10),0 4px 12px rgba(16,24,40,.05),inset 0 1px 0 rgba(255,255,255,.95);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%)}
.card:hover,.half:hover{box-shadow:0 30px 60px rgba(16,24,40,.13),0 6px 14px rgba(16,24,40,.06),inset 0 1px 0 rgba(255,255,255,.95)}
.facts div{border-right-color:rgba(16,24,40,.07)}
.sand{background:radial-gradient(700px 420px at 10% -10%,#E7F6F1 0%,rgba(231,246,241,0) 60%),radial-gradient(640px 420px at 100% 0%,#EAF0FF 0%,rgba(234,240,255,0) 58%),radial-gradient(680px 460px at 70% 110%,#FFF3E2 0%,rgba(255,243,226,0) 60%),#FAFAF8}
.inkbg .card,.inkbg .panel{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#fff;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.inkbg .card p{color:rgba(255,255,255,.72)}
.eyebrow{color:var(--mute)}
footer .tagline{font:500 clamp(18px,1.7vw,22px)/1.35 var(--sans);letter-spacing:-.015em;color:var(--ink);max-width:40ch;margin:2px 0 10px;text-wrap:balance}

/* ── 2026-11-08 · THE COMPANY HOME'S NEW PIECES (pages/company.mjs): his wall as a lifted tree (the lines drawn at run time from the nodes' boxes;
   phase 1 lit, phases 2 and 3 in outline), the island-brain film, the ten moments' captions, the five papers a provider can hold, the model's chart. ── */
.tree{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);grid-template-areas:". root ." "studio . group" "bar bar bar" ". lighthouse ." ". landfall ." ". copperheart ." ". driftwood ." ". companion ." ". vr .";gap:22px 32px;align-items:start;transform-style:preserve-3d;transition:transform .5s ease;padding:8px 0}
#tn-root{grid-area:root}#tn-studio{grid-area:studio}#tn-group{grid-area:group}#tn-storyland{grid-area:bar}#tn-lighthouse{grid-area:lighthouse}#tn-landfall{grid-area:landfall}#tn-copperheart{grid-area:copperheart}#tn-driftwood{grid-area:driftwood}#tn-companion{grid-area:companion}#tn-vr{grid-area:vr}
.tnode{position:relative;z-index:1;display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:14px;row-gap:2px;align-items:center;padding:14px 16px;border-radius:18px;text-decoration:none;color:var(--ink);background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.92);box-shadow:0 18px 40px rgba(16,24,40,.10),0 3px 10px rgba(16,24,40,.05),inset 0 1px 0 rgba(255,255,255,.95);backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);transition:transform .25s ease,box-shadow .25s ease;transform:translateZ(0)}
.tnode:hover{transform:translateZ(24px) translateY(-2px);box-shadow:0 28px 56px rgba(16,24,40,.14),0 6px 14px rgba(16,24,40,.06),inset 0 1px 0 rgba(255,255,255,.95)}
.tnode img{grid-row:1/span 3;width:56px;height:56px;border-radius:50%;object-fit:cover;background:#fff;border:1px solid var(--line)}
.tnode b{font-size:17px;letter-spacing:-.015em;line-height:1.2}
.tnode i{font-style:normal;font:700 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--p5)}
.tnode span{grid-column:2;font-size:14px;line-height:1.4;color:var(--soft)}
.tnode.root{grid-template-columns:72px minmax(0,1fr);padding:18px 20px}.tnode.root img{width:72px;height:72px}.tnode.root b{font-size:22px}.tnode.root span{font-size:15.5px;color:var(--ink)}
.tnode.bar{grid-template-columns:minmax(0,1fr);border-left:5px solid var(--p8)}.tnode.bar b{font-size:16px}.tnode.bar span{grid-column:1}
.tnode.ph2,.tnode.ph3{background:rgba(255,255,255,.42);border:1px dashed rgba(16,24,40,.22);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.tnode.ph2 img,.tnode.ph3 img{filter:saturate(.25) opacity(.8)}.tnode.ph2 i,.tnode.ph3 i{color:var(--mute)}
.tnode.ph1{box-shadow:0 18px 40px rgba(16,24,40,.10),0 3px 10px rgba(16,24,40,.05),inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(31,163,163,.35)}
svg.tree-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.tree-lines .tl-shadow{fill:none;stroke:#fff;stroke-width:7;stroke-linecap:round}
.tree-lines .tl{fill:none;stroke:rgba(16,24,40,.30);stroke-width:2;stroke-linecap:round;transition:stroke-dashoffset 2.2s ease .2s}
@media(max-width:760px){.tree{grid-template-columns:minmax(0,1fr);grid-template-areas:"root" "studio" "group" "bar" "lighthouse" "landfall" "copperheart" "driftwood" "companion" "vr";gap:16px}.tnode:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.tree-lines .tl{transition:none;stroke-dashoffset:0!important}.tnode{transition:none}}
.brain-film{margin:0}.brain-film video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-xl);background:#0d1b1e;box-shadow:0 40px 80px -50px rgba(11,11,12,.5)}
.brain-film figcaption{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px}.brain-film .hand{font-size:24px}
.moments .scroller{margin:0;padding-left:max(24px,calc((100vw - var(--wrap)) / 2));padding-right:24px}
.moments .lf-film{width:min(520px,82vw)}.moments figcaption{display:grid;gap:4px}.moments figcaption b{font:700 17px/1.2 var(--sans);color:var(--ink)}.moments figcaption span{font:400 15px/1.45 var(--sans);color:var(--soft)}
.scroller-keys{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}.scroller-keys .btn{min-width:44px;min-height:44px;padding:0 15px}
.papers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;perspective:1200px}
.docpaper{margin:0;aspect-ratio:3/4;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 24px 50px rgba(16,24,40,.14),0 4px 12px rgba(16,24,40,.06);transform:rotate(-1.2deg);transition:transform .3s ease}
.docpaper:nth-child(even){transform:rotate(1deg)}.docpaper:hover{transform:rotate(0) translateY(-6px)}
.docpaper .band{height:8px}.docpaper .in{padding:16px 16px 18px;display:grid;gap:6px;align-content:start}
.docpaper small{font:700 10px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.docpaper b{font:400 clamp(17px,1.5vw,21px)/1.1 Georgia,"Iowan Old Style",serif;color:var(--ink)}
.docpaper em{font-style:normal;font-size:12.5px;line-height:1.35;color:var(--soft)}
.docpaper .lines{display:grid;gap:7px;margin-top:10px}.docpaper .lines i{display:block;height:7px;border-radius:4px;background:rgba(16,24,40,.08)}
@media(max-width:1000px){.papers{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:600px){.papers{grid-template-columns:repeat(2,minmax(0,1fr))}.docpaper b{font-size:16px}}
.chart{margin:0;padding:clamp(14px,2vw,24px)}.chart svg{display:block;width:100%;height:auto}
.chart .line{stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 2.4s ease}.chart .l2{transition-delay:.4s}.chart .l3{transition-delay:.8s}.chart .area{opacity:0;transition:opacity 1.2s ease 1s}
.chart.in .line{stroke-dashoffset:0}.chart.in .area{opacity:1}
@media(prefers-reduced-motion:reduce){.chart .line{stroke-dashoffset:0;transition:none}.chart .area{opacity:1}}
/* the painted moments (kit.mjs truths() with pics, 2026-11-08): a picture to each line, two to a row, lifted glass; the file names off the page */
.moments-grid .truths-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.moments-grid .truths-list li{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;gap:0;padding:0;border:1px solid rgba(255,255,255,.92);border-radius:var(--r-lg);overflow:hidden;background:rgba(255,255,255,.74);box-shadow:0 22px 48px rgba(16,24,40,.10),0 4px 12px rgba(16,24,40,.05),inset 0 1px 0 rgba(255,255,255,.95);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%)}
.moments-grid .truths-list li::before{display:none}
.moments-grid .truths-list li figure{margin:0;aspect-ratio:16/9;background:#f3f1ec;display:grid;place-items:center;overflow:hidden}
.moments-grid .truths-list li figure video{width:100%;height:100%;object-fit:cover;display:block}
.moments-grid .truths-list li figure img{width:100%;height:100%;object-fit:cover;display:block}
.moments-grid .truths-list li figure img[src*="/icons/"],.moments-grid .truths-list li figure img[src*="/3d/tools/"],.moments-grid .truths-list li figure img[src*="/companions/"]{width:46%;height:auto;object-fit:contain;filter:drop-shadow(0 18px 24px rgba(16,24,40,.18))}
.moments-grid .truths-list li .t{padding:18px 20px 22px;display:grid;gap:6px}
.moments-grid .truths-list b{font-size:clamp(18px,1.7vw,22px)}
@media(max-width:760px){.moments-grid .truths-list{grid-template-columns:minmax(0,1fr)}}
/* one sentence where six numbers stood (2026-11-08, his round 1 "much cleaner"), and his quote over the oldest island on the approach page */
.one-line{max-width:72ch;margin-inline:auto;text-align:center;font-size:clamp(18px,1.8vw,24px);line-height:1.5;color:var(--ink)}
.quote-film figcaption.quote{display:block;margin-top:clamp(18px,3vw,32px)}
.quote-film blockquote{margin:0 auto;max-width:34ch;font:500 clamp(22px,3vw,40px)/1.25 var(--sans);letter-spacing:-.02em;text-wrap:balance;text-align:center;color:var(--ink)}
.quote-film cite{display:block;margin-top:14px;font:600 14px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-style:normal}
/* the Lighthouse's five scenes of a Tuesday (2026-11-08, his round 5 "yes on cut") */
.scene{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(20px,3vw,40px);align-items:center;padding:clamp(20px,3vw,36px);margin-bottom:22px}
.scene.flip{direction:rtl}.scene.flip>*{direction:ltr}
.scene figure{margin:0}.scene figure img,.scene figure video,.scene .browser{width:100%;height:auto;display:block}
.scene h3{font-size:clamp(24px,2.6vw,36px);margin:10px 0 12px;letter-spacing:-.025em;line-height:1.1}
.scene p{color:var(--soft);font-size:17px;line-height:1.55}
@media(max-width:860px){.scene{grid-template-columns:1fr}}