/* Home page: the world. Tokens, nav, footer and rooms live in shared.css. */

/* ---------- the world ---------- */
#track{position:relative;height:1650vh}
#stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--sky-top);transition:opacity .1s linear}
.sky{position:absolute;inset:0}
.sky i{position:absolute;inset:0;opacity:0}
.sky .day{opacity:1;background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-bot) 100%)}
.sky .dusk{background:linear-gradient(180deg,var(--web-sky-dusk) 0%,var(--web-sky-dusk-2) 52%,var(--web-sky-dusk-3) 100%)}
.sky .night{background:linear-gradient(180deg,var(--web-sky-night) 0%,var(--web-sky-night-2) 55%,var(--web-sky-night-3) 100%)}
.sky .dawn{background:linear-gradient(180deg,var(--web-foot-dawn-fsky1) 0%,var(--web-sky-dawn) 58%,var(--web-sky-dawn-2) 100%)}
.stars{position:absolute;inset:0;opacity:0}
.stars b{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--tojuri-white);animation:tw 4.5s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.25}50%{opacity:.95}}
.sun{position:absolute;left:0;top:0;width:46vmax;height:46vmax;margin:-23vmax 0 0 -23vmax;border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(255,236,200,.95) 0 3.2%,rgba(255,214,160,.55) 7%,rgba(255,200,150,.18) 22%,rgba(255,200,150,0) 52%)}
.moon{position:absolute;left:0;top:0;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 40% 38%,var(--web-moon),var(--web-moon-2) 70%);box-shadow:0 0 40px 10px rgba(255,248,225,.25);opacity:0}

.layer{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;will-change:transform}
/* Founder, 18 Oct 2026: the far distance is the rest of Alba, low contrast and softly hazed, never competing with Pebble Row. */
.layer.far{opacity:.8;filter:blur(.5px)}
/* The houses behind are a soft blur, so the three up front and the people on the street stand out. */
.layer.mid{opacity:.85;filter:blur(3.5px)}
/* The skyline fades into the sky at its top instead of ending in a band. */
.layer.far .piece.alba{-webkit-mask-image:linear-gradient(90deg,transparent 0,black 6%,black 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,black 6%,black 94%,transparent 100%)}
.piece.side{filter:saturate(.8) brightness(1.04);opacity:.93}
.layer>*{position:absolute}
.layer .ground{left:-60000px;width:120000px;top:0;height:6000px}
.far .ground{background:var(--web-far-ground)}
.mid .ground{background:var(--web-bcity-bmidg)}
.near .ground{background:var(--web-bcity-bground);box-shadow:inset 0 2px 0 rgba(255,255,255,.9),inset 0 10px 18px -12px rgba(120,110,95,.35)}
.near .kerb{left:-60000px;width:120000px;height:14px;top:calc(var(--u) * .085);background:var(--web-near-kerb)}
/* the kerb is a soft line, not a stripe, so the street hands off to the page below without a band */
.near .kerb{height:20px;-webkit-mask:linear-gradient(180deg,transparent,black 50%,transparent);mask:linear-gradient(180deg,transparent,black 50%,transparent);opacity:calc(.7 - .5 * var(--night,0))}
.ground::after,.kerb::after{content:"";position:absolute;inset:0;opacity:var(--night,0)}
.near .ground::after{background:var(--web-near-ground-night)}.mid .ground::after{background:var(--web-mid-ground-night)}.far .ground::after{background:var(--web-far-ground-night)}.near .kerb::after{background:var(--web-near-kerb-night)}
.base{filter:var(--grade,none)}
.nimg{position:absolute;left:0;top:0;width:100%;height:100%;opacity:var(--night,0);pointer-events:none}
.nshaft{position:absolute;inset:0;background-repeat:repeat-y;background-position:top center;background-size:100% auto;opacity:var(--night,0)}
.lit{opacity:var(--lit,0)}
.piece{transform:translate(-50%,-100%)}
.piece img{width:100%;height:auto}
.win{position:absolute;background-repeat:no-repeat;border-radius:3px;opacity:0;overflow:hidden;
  filter:brightness(1.06) saturate(1.15) sepia(.18);box-shadow:0 0 calc(var(--u)*.05) calc(var(--u)*.008) rgba(255,196,120,.42)}
.shadow{transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(70,90,110,.22),rgba(70,90,110,0))}
.lola,.walker{transform:translate(-50%,-100%)}
/* the Mallows move (shared.js ANIM): moonlit clips follow the night picture; a lit window carries its own copy of the clip */
.piece .ov.nov.on{opacity:var(--night,0)}
.wk-scene .house .ov.nov.on{opacity:var(--n)}
.wk-scene .house .lit{overflow:hidden}
.tower-shaft{transform:translateX(-50%);background-repeat:repeat-y;background-position:top center}

/* labels that live in the world, not on top of it */
.lab{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none}
.lab.num{font:450 calc(var(--u)*.026)/1 var(--display);color:var(--web-lab-num);letter-spacing:.02em;padding:calc(var(--u)*.006) calc(var(--u)*.009);border-radius:calc(var(--u)*.005);
  background:linear-gradient(180deg,var(--web-lab-num-2),var(--web-lab-num-3));box-shadow:0 1px 2px rgba(90,70,40,.25),inset 0 1px 0 rgba(255,255,255,.7);filter:brightness(calc(1 - var(--night,0) * .45))}
.lab.engr{font:450 calc(var(--u)*.0175)/1 var(--display);letter-spacing:.32em;text-transform:uppercase;color:rgba(84,96,114,.62);text-shadow:0 1px 0 rgba(255,255,255,.85);filter:brightness(calc(1 - var(--night,0) * .5))}
.lab.gilt{font:italic 500 calc(var(--u)*.07)/1 var(--serif);letter-spacing:.01em;background:linear-gradient(180deg,var(--web-lab-gilt) 0%,var(--web-lab-gilt-2) 55%,var(--web-lab-gilt-3) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 1.5px rgba(255,252,240,.95)) drop-shadow(0 1px 1px rgba(110,80,30,.35))}
.lab.decal{font:450 calc(var(--u)*.018)/1 var(--display);color:rgba(255,255,255,.82);letter-spacing:.06em}
.post{transform:translate(-50%,-100%);width:calc(var(--u)*.008);background:linear-gradient(90deg,var(--web-post),var(--web-post-2) 45%,var(--web-post-3));border-radius:2px;filter:brightness(calc(1 - var(--night,0) * .55))}
.post .plate{position:absolute;left:50%;top:0;transform:translate(-50%,-30%);padding:calc(var(--u)*.011) calc(var(--u)*.02);border-radius:calc(var(--u)*.007);background:var(--web-post-plate);
  box-shadow:inset 0 0 0 calc(var(--u)*.0035) var(--web-post-plate),inset 0 0 0 calc(var(--u)*.0055) var(--sign),0 2px 5px rgba(40,60,90,.18);
  font:450 calc(var(--u)*.026)/1 var(--display);color:var(--sign);white-space:nowrap;letter-spacing:-.005em}
.post .plate small{display:block;font:500 calc(var(--u)*.0135)/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--web-post-plate-2);margin-top:calc(var(--u)*.006)}

#orbs{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* The living cloud (home hero only): one soft render with the logo's two-lobe gesture, coloured by
   masked layers that follow the story's time of day. It is a button: hover or tap and it keeps Pip's drawing. */
.cloud{position:absolute;left:0;top:0;width:100px;margin:0;padding:0;border:0;border-radius:42% 46% 30% 30%;background:none;font:inherit;color:inherit;cursor:pointer;
  transform-origin:50% 60%;will-change:transform;pointer-events:none;-webkit-tap-highlight-color:transparent}
.cloud.live{pointer-events:auto}
.cloud:focus-visible{outline:2px solid var(--action);outline-offset:8px}
.cloud img{display:block;width:100%;height:auto;position:relative;transition:filter .6s}
.cloud span{display:block;position:absolute;pointer-events:none}
.cloud .tint{inset:0;-webkit-mask:url(../img/cloud-hero.webp) center/100% 100% no-repeat;mask:url(../img/cloud-hero.webp) center/100% 100% no-repeat}
/* the lit top stays bright white */
.cloud .t-hi{background:radial-gradient(70% 55% at 36% 10%,var(--web-cloud-light),color-mix(in srgb,var(--web-cloud-light) 0%,transparent) 100%);mix-blend-mode:screen;opacity:calc(.6 * (1 - var(--c-night,0)))}
/* Founder, 18 Oct 2026: the cloud's shade is the sky itself, never darker. Under the cloud lies the hero sky
   gradient, tracked to the cloud's height; the render is drawn on it as light ("screen", after mapping its shade
   to black), so where the cloud is in shade you see exactly the sky and where it is lit it turns white. The body
   then dissolves downward, so the cloud seems to emerge from the sky. */
.cloud .body{position:relative;-webkit-mask:linear-gradient(180deg,black 0%,black 54%,rgba(0,0,0,.6) 72%,transparent 94%);mask:linear-gradient(180deg,black 0%,black 54%,rgba(0,0,0,.6) 72%,transparent 94%)}
.cloud .body img{mix-blend-mode:screen}
.cloud .t-sky{background:linear-gradient(180deg,var(--sky-top),var(--sky-bot)) 0 var(--sky-y,0)/100% var(--sky-h,100vh) no-repeat;opacity:var(--c-skyb,1)}
/* dawn: a faint peach rim on the sun side (left); dusk: a gold edge (right, low sun) */
.cloud .t-dawn{background:linear-gradient(96deg,var(--web-cloud-dawn) 0%,color-mix(in srgb,var(--web-cloud-dawn) 45%,transparent) 13%,transparent 34%),linear-gradient(0deg,color-mix(in srgb,var(--web-cloud-dawn) 50%,transparent),transparent 26%);mix-blend-mode:multiply;opacity:var(--c-dawn,0)}
.cloud .t-dusk{background:linear-gradient(264deg,var(--web-cloud-dusk) 0%,color-mix(in srgb,var(--web-cloud-dusk) 45%,transparent) 12%,transparent 32%),linear-gradient(0deg,color-mix(in srgb,var(--web-cloud-dusk) 55%,transparent),transparent 24%);mix-blend-mode:multiply;opacity:var(--c-dusk,0)}
/* night: moonlit from above right, the underside in the night sky's blue */
.cloud .t-night{background:radial-gradient(80% 70% at 70% 0%,var(--web-cloud-night),color-mix(in srgb,var(--web-cloud-night) 0%,transparent) 100%),linear-gradient(180deg,var(--web-cloud-night) 0%,color-mix(in srgb,var(--web-cloud-night-shade) 80%,var(--web-cloud-night)) 100%);mix-blend-mode:multiply;opacity:calc(.25 * var(--c-night,0))}
/* the soft warm glow inside, when it keeps something */
.cloud .t-core{background:radial-gradient(58% 62% at 52% 64%,var(--web-cloud-glow),color-mix(in srgb,var(--web-cloud-glow) 45%,transparent) 55%,color-mix(in srgb,var(--web-cloud-glow) 0%,transparent) 100%);opacity:var(--c-glow,0)}
/* the bloom when it keeps something by day: the cloud fills with light */
.cloud .t-bright{background:radial-gradient(70% 75% at 50% 58%,var(--web-cloud-light),color-mix(in srgb,var(--web-cloud-light) 70%,transparent) 55%,color-mix(in srgb,var(--web-cloud-light) 20%,transparent) 100%);mix-blend-mode:screen;opacity:var(--c-bright,0)}

.cloud .glow{left:-40%;top:-55%;width:180%;height:210%;border-radius:50%;opacity:0;visibility:hidden;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--web-cloud-light) 72%,transparent),color-mix(in srgb,var(--web-cloud-light) 30%,transparent) 42%,transparent 75%)}
/* The cloud ceiling (founder, 18 Oct 2026): at rest the hero's only cloud is the full-length one along the top,
   behind the nav (its layers live in shared.css); it is the keep target. ?cloud=single shows the single cloud. */
.bank{display:none;position:absolute;left:0;right:0;top:0;width:100%;height:calc(var(--bank-h,200px) * 1.16);margin:0;padding:0;border:0;background:none;font:inherit;cursor:pointer;
  pointer-events:none;overflow:hidden;will-change:transform;-webkit-tap-highlight-color:transparent}
body.ceiling .bank{display:block}
.bank.live{pointer-events:auto}
.bank:focus-visible{outline:2px solid var(--action);outline-offset:-6px}
/* when it keeps something, the light gathers where the spark arrived and spreads along the cloud */
.bank .b-bright{position:absolute;inset:0;display:block;opacity:var(--c-bright,0);
  background:radial-gradient(16% 34% at var(--bx,50%) 50%,color-mix(in srgb,var(--web-cloud-glow) 70%,var(--web-cloud-light)),color-mix(in srgb,var(--web-cloud-glow) 30%,transparent) 55%,transparent 100%),
    radial-gradient(46% 60% at var(--bx,50%) 42%,color-mix(in srgb,var(--web-cloud-light) 60%,transparent),color-mix(in srgb,var(--web-cloud-light) 30%,transparent) 50%,transparent 100%)}
/* the cloud's shadow on Pebble Row: on the street, and across the house under it */
.cshadow{position:absolute;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--web-cloud-shadow) 30%,transparent),color-mix(in srgb,var(--web-cloud-shadow) 12%,transparent) 55%,transparent)}
.piece .roofshade{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:0;
  -webkit-mask:url(../img/home.webp) center/100% 100% no-repeat;mask:url(../img/home.webp) center/100% 100% no-repeat;
  background:radial-gradient(40% 38% at var(--sx,50%) 18%,color-mix(in srgb,var(--web-cloud-shade) 32%,var(--web-cloud-light)),color-mix(in srgb,var(--web-cloud-shade) 20%,transparent) 45%,color-mix(in srgb,var(--web-cloud-shade) 0%,transparent) 100%)}
/* Pip's drawing: pale until it is kept, then it has colour */
.piece .pale{position:absolute;pointer-events:none;background-repeat:no-repeat;filter:grayscale(1) contrast(.42) brightness(1.32);opacity:0}
.piece .bloom{position:absolute;pointer-events:none;background-repeat:no-repeat;filter:saturate(1.35) brightness(1.08);opacity:0;transform-origin:50% 55%}
.fog{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 45%,var(--web-fog) 0%,var(--web-fog-2) 60%,var(--web-fog-3) 100%);opacity:0;pointer-events:none}
/* One art world (founder round, 18 Oct 2026): the morning sun low on the left, a warm light over Pebble Row like the
   postcards' light. It goes with the day: gone at night, and warms in during the opening. ?world=pale hides it. */
.mlight{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:calc((1 - var(--night,0)) * var(--mk,1));
  background:radial-gradient(60% 70% at 4% 40%,rgba(255,212,156,.6),rgba(255,212,156,0) 70%),linear-gradient(180deg,rgba(255,232,200,0) 45%,rgba(255,226,190,.28) 92%)}
/* The opening (first visit in a session, shared-head.js adds .intro before the first paint): the street starts in a
   soft mist and the words fade up. The home script takes over at once and removes .intro; if it never runs, a
   fallback shows everything after 2 s. */
/* the soft opening's mist is the sky's own: white at the heart, the sky colour at the edges */
.fog.sky,.intro:not(.intro-classic) #stage .fog{background:radial-gradient(120% 90% at 50% 42%,color-mix(in srgb,var(--tojuri-white) 94%,transparent) 0%,color-mix(in srgb,var(--sky-bot) 92%,var(--tojuri-white)) 64%,var(--sky-bot) 100%)}
.intro #stage .fog{opacity:1;animation:intro-safe-out 0s 2s forwards}
.intro #stage .hero{opacity:0;animation:intro-safe-in 0s 2s forwards}
@keyframes intro-safe-out{to{opacity:0}}
@keyframes intro-safe-in{to{opacity:1}}
.family{position:absolute;left:50%;opacity:0;will-change:transform}
.family img{width:100%;height:auto}

/* ---------- words in the world ---------- */
.hero{position:absolute;left:50%;transform:translateX(-50%);top:30%;width:min(44rem,86vw);text-align:center;color:var(--sky-ink)}
.hero h1{font:450 clamp(28px,min(3vw,4.8vh),46px)/1.04 var(--display);letter-spacing:-.04em;margin:0 0 20px;color:var(--sky-ink)}
.hero p{margin:0 auto 20px;font-size:clamp(15px,1.05vw,17px);line-height:1.5;color:var(--sky-ink-2);max-width:40ch}
.hero .row{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap}
.cap{position:absolute;left:50%;top:19%;width:min(32rem,88vw);text-align:center;opacity:0;will-change:transform,opacity;pointer-events:none}
.cap h2{font:450 clamp(28px,min(3vw,5vh),44px)/1.04 var(--display);letter-spacing:-.035em;margin:0 0 12px;color:var(--sky-ink)}
.cap p{margin:0 auto;color:var(--sky-ink-2);font-size:clamp(14.5px,1vw,16px);max-width:52ch}
.cap.dark h2{color:var(--night-ink)}.cap.dark p{color:var(--night-ink-2)}
.cap .mono{display:block;margin-top:18px;font:500 13.5px/1.5 var(--mono);color:var(--glow)}
.cap.center{left:50%;width:min(36rem,88vw);text-align:center}
.cap.center p{margin:0 auto}

.streetfade{position:absolute;left:0;right:0;top:0;height:100%;transform-origin:50% 0;pointer-events:none;opacity:var(--sf,1);
  background:linear-gradient(180deg,color-mix(in srgb,var(--tojuri-white) 0%,transparent) 0%,color-mix(in srgb,var(--tojuri-white) 72%,transparent) 32%,var(--tojuri-white) 72%)}
.clock{position:absolute;left:clamp(16px,3.4vw,48px);bottom:24px;display:flex;align-items:center;gap:10px;font:500 13px/1 var(--mono);color:var(--sky-ink);transition:color .6s}
.clock .dial{width:14px;height:14px;border-radius:50%;background:var(--mallow-lola-yellow);box-shadow:0 0 0 4px rgba(242,197,92,.22);transition:background .6s,box-shadow .6s}
.clock span{font:500 13px/1 var(--sans);color:var(--sky-ink-2);transition:color .6s}
body.is-night .clock{color:var(--night-ink)} body.is-night .clock span{color:var(--night-ink-2)}
body.is-night .clock .dial{background:var(--tojuri-cream);box-shadow:inset -5px -2px 0 0 var(--web-is-night-clock-dial)}

/* the read-back, on this page */
.drop{position:absolute;left:50%;top:44%;transform:translateX(-50%);width:min(34rem,90vw);text-align:center;opacity:0;pointer-events:none}
.drop.on{pointer-events:auto}
.drop h2{font:450 clamp(30px,3.2vw,46px)/1.04 var(--display);letter-spacing:-.035em;margin:0 0 14px;color:var(--night-ink)}
.drop p{margin:0 auto 24px;max-width:36ch;color:var(--night-ink-2);font-size:16px}
.drop .t-touch{display:none}
.drop .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.ghost{display:inline-flex;align-items:center;height:44px;padding:0 20px;border-radius:999px;background:var(--card);color:var(--ink);border:0;font:600 14px/1 var(--sans);cursor:pointer}
.ghost.dim{background:rgba(255,255,255,.12);color:var(--cream)}
.zone{margin:22px auto 0;width:min(24rem,86vw);height:64px;border-radius:18px;border:1.5px dashed rgba(244,237,231,.45);display:grid;place-items:center;color:var(--night-ink-2);font-size:14px;transition:border-color .4s,background .4s}
body.dragging .zone{border-color:var(--glow);background:var(--glow-soft);color:var(--glow)}
.privacy{display:block;margin-top:14px;font-size:13px;color:var(--night-ink-3)}
.kept{position:absolute;left:50%;top:40%;transform:translate(-50%,16px);width:min(25rem,90vw);background:var(--card);border-radius:18px;padding:22px 22px 18px;opacity:0;pointer-events:none;color:var(--body);
  transition:opacity .6s var(--ease),transform .9s var(--ease);box-shadow:0 30px 60px -30px rgba(5,12,30,.6)}
.kept.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.kept h3{font:450 24px/1.1 var(--display);letter-spacing:-.02em;margin:0 0 4px;color:var(--ink)}
.kept .fn{font-weight:600;word-break:break-all;color:var(--ink-2)}
.kept dl{margin:14px 0 12px;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13.5px}
.kept dt{color:var(--ink-3)}
.kept dd{margin:0;font:500 12.5px/1.5 var(--mono);color:var(--ink);word-break:break-all}
.kept .ok{display:inline-flex;align-items:center;gap:8px;height:26px;padding:0 12px 0 8px;border-radius:999px;background:var(--mist);color:var(--ink);font:600 12.5px/1 var(--sans)}
/* Same rule as the app [D-BRAND-03]: only the small tick is coloured, in the protected blue; the words stay in the text colour. A mismatch gets its own amber mark, never the success look. */
.kept .ok i{background:var(--protected)}
.kept .ok.bad i{background:var(--warn)}
.kept .ok i{width:8px;height:8px;border-radius:50%}
.kept p{margin:10px 0 0;font-size:13.5px;color:var(--body);line-height:1.5}
.kept .again{margin-top:14px;background:none;border:0;padding:0;font:600 14px/1 var(--sans);color:var(--action);cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.dragveil{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:var(--veil);opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
body.dragging .dragveil{opacity:1}
.dragveil div{padding:18px 26px;border-radius:999px;background:var(--card);color:var(--ink);font:450 18px/1 var(--display)}

/* ---------- after the day: the app, then the reasons ---------- */
.sec-h{font:450 clamp(28px,3.2vw,44px)/1.04 var(--display);letter-spacing:-.035em;margin:0;color:var(--ink);text-align:center}
.sec-p{margin:16px auto 0;max-width:52ch;text-align:center;text-wrap:balance;color:var(--body);font-size:clamp(15.5px,1.1vw,17px)}
.small-note{margin:18px auto 0;max-width:60ch;text-align:center;font-size:13.5px;color:var(--ink-2)}

/* set it once, then a week passes on its own */
.once{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;max-width:1160px;margin:56px auto 0;list-style:none;padding:0}
.once li{display:flex;flex-direction:column}
.once .shot{aspect-ratio:4/3;border-radius:16px;background:var(--tojuri-white);box-shadow:0 0 0 1px rgba(35,64,95,.08),0 30px 60px -36px rgba(30,60,100,.5);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:6% 5%}
.once .shot img{width:100%;height:100%;object-fit:contain}
.once b{display:block;margin-top:18px;font:450 18px/1.25 var(--display);color:var(--ink)}
.once b i{font:600 12px/1 var(--mono);font-style:normal;color:var(--ink-2);margin-right:10px}
.once span{display:block;margin-top:6px;font-size:15px;color:var(--body)}
.weektrack{position:relative;height:340vh;margin-top:var(--gap-visual)}
.wk-stick{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:84px var(--gut) 24px}
.wk-head{text-align:center;margin-bottom:clamp(20px,2.4vw,32px)}
.wk-head h3{font:450 clamp(22px,2.2vw,30px)/1.1 var(--display);letter-spacing:-.025em;color:var(--ink);margin:0}
.wk-scene{position:relative;width:min(1080px,100%);height:min(56vh,500px);border-radius:28px;overflow:hidden;box-shadow:0 0 0 1px rgba(35,64,95,.08),0 40px 80px -50px rgba(30,60,100,.55);--n:0;--k:0}
.wk-scene .s-day,.wk-scene .s-night{position:absolute;inset:0}
.wk-scene .s-day{background:linear-gradient(180deg,var(--sky-top),var(--sky-bot))}
.wk-scene .s-night{background:linear-gradient(180deg,var(--web-sky-night),var(--web-foot-night-fsky2));opacity:var(--n)}
.wk-scene .s-stars{position:absolute;inset:0 0 40% 0;opacity:var(--n)}
.wk-scene .s-stars b{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--tojuri-white);opacity:.8}
.wk-scene .row{position:absolute;left:0;right:0;bottom:12%;pointer-events:none}
.wk-scene .row img{position:absolute;bottom:0;height:100%;width:auto}
.wk-scene .row .nt{opacity:var(--n)}
.wk-scene .wfar{height:46%;bottom:16%}
.wk-scene .wmid{height:40%;bottom:12.5%}
.wk-scene .gnd{position:absolute;left:0;right:0;bottom:0;height:13%;background:var(--web-bcity-bground)}
.wk-scene .gnd::after{content:"";position:absolute;inset:0;background:var(--web-near-ground-night);opacity:var(--n)}
.wk-scene .house{position:absolute;left:50%;bottom:12%;height:58%;aspect-ratio:1390/936;transform:translateX(-50%)}
.wk-scene .house img{position:absolute;inset:0;width:100%;height:100%}
.wk-scene .house .nt{opacity:var(--n)}
.wk-scene .house .lit{position:absolute;left:53%;top:20%;width:22.5%;height:27%;border-radius:3px;background:url(../img/home.webp) no-repeat;background-size:444% 370%;background-position:68.4% 27.4%;opacity:var(--lit,0);box-shadow:0 0 30px 6px rgba(255,196,120,.4);filter:brightness(1.06) sepia(.18)}
.wk-scene .wcloud{position:absolute;left:50%;top:9%;width:clamp(110px,13%,150px);transform:translateX(-50%)}
.wk-scene .wcloud img{width:100%;height:auto;position:relative}
.wk-scene .wcloud .g{position:absolute;left:-40%;top:-55%;width:180%;height:210%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,232,190,.55),rgba(255,226,180,0) 70%);opacity:calc(var(--n) * .7 + var(--rb,0) * .6)}
.wk-scene .rbdot{position:absolute;left:50%;top:0;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--web-fcloud-rb);box-shadow:0 0 14px 6px rgba(255,214,150,.65);opacity:0}
.wk-scene .ticks{position:absolute;left:50%;bottom:3.4%;transform:translateX(-50%);display:flex;gap:clamp(8px,1.6vw,18px)}
.wk-scene .ticks span{display:flex;flex-direction:column;align-items:center;gap:4px;font:600 10.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--body)}
.wk-scene .ticks i{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(35,64,95,.3);display:grid;place-items:center;font:700 10px/1 var(--sans);font-style:normal;color:transparent;transition:background .5s,color .5s,box-shadow .5s}
.wk-scene .ticks span.done i{background:var(--protected);box-shadow:none;color:var(--tojuri-white)}
.wk-scene .ticks span.now{color:var(--ink)}
.wk-scene.dark .ticks span{color:var(--web-night-ink-2)}.wk-scene.dark .ticks span.now{color:var(--tojuri-white)}
.wk-scene .stamp{position:absolute;left:4%;top:7%;font:500 13px/1.4 var(--mono);color:var(--ink);transition:color .5s}
.wk-scene .stamp span{display:block;font:500 12px/1.4 var(--sans);color:var(--ink-2)}
.wk-scene.dark .stamp{color:var(--tojuri-cream)}.wk-scene.dark .stamp span{color:var(--web-night-ink-2)}
.wk-line{min-height:3.2em;margin:clamp(20px,2.4vw,30px) auto 0;max-width:46ch;text-align:center;font:450 clamp(16px,1.3vw,19px)/1.4 var(--display);color:var(--ink)}
.wk-honest{margin:6px auto 0;max-width:60ch;text-align:center;font-size:13.5px;color:var(--ink-2)}

/* yours, not ours */
.door{position:relative;height:clamp(240px,28vw,360px);max-width:640px;margin:48px auto 0;overflow:hidden}
.door .gl{position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px;background:var(--web-near-kerb)}
.door .room-i{position:absolute;left:50%;bottom:3px;height:78%;transform:translateX(-58%)}
.door .pip-i{position:absolute;left:50%;bottom:3px;height:58%;transform:translateX(150%);opacity:0;transition:transform 1.6s var(--ease),opacity .8s}
.door.shown .pip-i{transform:translateX(62%);opacity:1}
.door .pip-i img{height:100%;width:auto;animation:bob 1.6s ease-in-out infinite alternate}
.door .room-i img{height:100%;width:auto}
.door .sh{position:absolute;bottom:-6px;height:14px;border-radius:50%;background:radial-gradient(closest-side,rgba(90,70,40,.22),rgba(90,70,40,0))}
@keyframes bob{to{transform:translateY(-3px)}}
.facts3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;max-width:960px;margin:44px auto 0;text-align:center}
.facts3 b{display:block;font:450 18px/1.25 var(--display);color:var(--ink);margin-bottom:6px}
.facts3 span{font-size:15px;color:var(--body)}

/* checked, not hoped */
.rbk{position:relative;height:clamp(230px,24vw,300px);max-width:520px;margin:44px auto 0}
.rbk .c{position:absolute;left:50%;top:0;width:clamp(120px,12vw,160px);transform:translateX(-50%)}
.rbk .c img{width:100%;height:auto;position:relative}
.rbk .c .g{position:absolute;left:-40%;top:-55%;width:180%;height:210%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,232,190,.6),rgba(255,226,180,0) 70%);opacity:0}
.rbk .dot{position:absolute;left:50%;top:22%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--web-fcloud-rb);box-shadow:0 0 14px 6px rgba(255,214,150,.7);opacity:0}
.rbk .file{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:clamp(250px,24vw,300px);padding:14px 16px;border-radius:14px;background:var(--tojuri-white);box-shadow:0 0 0 1px rgba(35,64,95,.08),0 22px 40px -26px rgba(30,60,100,.45);display:flex;align-items:center;gap:12px;text-align:left}
.rbk .file .ic{width:30px;height:36px;border-radius:5px;background:var(--web-rbk-file-ic);box-shadow:inset 0 0 0 1px var(--web-rbk-file-ic-2);flex:none}
.rbk .file b{display:block;font:600 14px/1.3 var(--sans);color:var(--ink);white-space:nowrap}
.rbk .file small{display:block;font:500 12px/1.3 var(--mono);color:var(--ink-2)}
.rbk .file .ok{margin-left:auto;width:22px;height:22px;border-radius:50%;background:var(--protected);color:var(--tojuri-white);display:grid;place-items:center;font:700 12px/1 var(--sans);opacity:0;transform:scale(.5)}
.rbk.shown .dot{animation:rbdot 6s var(--ease) infinite}
.rbk.shown .c .g{animation:rbglow 6s var(--ease) infinite}
.rbk.shown .ok{animation:rbok 6s var(--ease) infinite}
@keyframes rbdot{0%,8%{opacity:0;transform:translateY(0)}14%{opacity:1}38%,52%{opacity:1;transform:translateY(clamp(110px,11vw,150px))}76%{opacity:1;transform:translateY(0)}84%,100%{opacity:0;transform:translateY(0)}}
@keyframes rbglow{0%,72%{opacity:0}82%{opacity:1}100%{opacity:0}}
@keyframes rbok{0%,40%{opacity:0;transform:scale(.5)}48%,92%{opacity:1;transform:none}100%{opacity:0;transform:scale(.8)}}
.checkcard{max-width:560px;margin:44px auto 0;border-radius:16px;background:var(--tojuri-white);box-shadow:0 0 0 1px rgba(35,64,95,.08),0 30px 60px -40px rgba(30,60,100,.5);overflow:hidden}
.checkcard .bar{height:28px;display:flex;align-items:center;gap:7px;padding:0 12px;background:linear-gradient(180deg,var(--web-rv-mac-bar),var(--web-rv-mac-bar-2));border-bottom:1px solid var(--web-rv-mac-bar-3)}
.checkcard .bar i{width:10px;height:10px;border-radius:50%;background:var(--web-checkcard-bar)}
.checkcard img{width:100%;height:auto;padding:14px 18px}

/* if Tojuri disappears */
.kitscene{position:relative;max-width:760px;margin:48px auto 0;height:clamp(300px,34vw,430px)}
.kitscene .paper{position:absolute;left:50%;top:0;width:min(400px,72%);transform:translateX(-62%) rotate(-4deg);background:var(--tojuri-white);border-radius:8px;padding:14px;box-shadow:0 0 0 1px rgba(35,64,95,.06),0 36px 60px -36px rgba(30,60,100,.55)}
.kitscene .paper img{width:100%;height:auto;display:block}
.kitscene .paper .smp{position:absolute;right:12px;top:12px;font:600 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--web-kitscene-paper-smp);background:var(--web-kitscene-paper-smp-2);padding:5px 8px;border-radius:6px}
.kitscene .nana-i{position:absolute;left:50%;bottom:0;height:62%;transform:translateX(70%)}
.kitscene .nana-i img{height:100%;width:auto}

/* close */
.closer{position:relative;background:linear-gradient(180deg,var(--tojuri-white) 0%,var(--sky-bot) 40%,var(--sky-top) 100%);padding:var(--sec-pad) var(--gut) var(--sec-pad);text-align:center;overflow:hidden}
.closer .cl{width:clamp(130px,13vw,180px);margin:0 auto clamp(28px,3vw,40px);animation:breathe 6s ease-in-out infinite}
.closer .cl img{width:100%;height:auto}
.closer .btn{margin-top:var(--gap-caption)}
.closer .fam{position:relative;width:min(560px,86vw);margin:var(--gap-visual) auto 0}
.closer .fam img{width:100%;height:auto;position:relative;z-index:1}
.closer .fam::after{content:"";position:absolute;left:-60vw;right:-60vw;bottom:0;height:18px;background:var(--web-bcity-bground)}

.end{position:absolute;left:50%;transform:translateX(-50%);width:min(52rem,92vw);text-align:center;opacity:0;pointer-events:none}
.end.on{pointer-events:auto}
.end h2{font:450 clamp(32px,3.6vw,54px)/1.02 var(--display);letter-spacing:-.04em;margin:0 0 16px;color:var(--sky-ink)}
.end p{margin:0 auto 26px;max-width:42ch;color:var(--sky-ink-2)}

@media (max-width:860px){
  .hero{left:50%;transform:translateX(-50%);width:min(30rem,90vw);text-align:center}
  .hero h1{font-size:clamp(26px,7.4vw,34px);margin-bottom:12px}
  .hero p{margin:0 auto 20px;font-size:15px}
  .hero .row{justify-content:center;gap:20px}
  .cap{left:50%;width:min(30rem,88vw);text-align:center}
  .cap h2{font-size:clamp(24px,7vw,32px);margin:0 0 10px}
  .cap p{margin:0 auto;font-size:14.5px;max-width:32ch}
  .clock{bottom:16px;font-size:12px}
  .drop .t-desk{display:none}.drop .t-touch{display:inline}
  .zone{display:none}
  .once{grid-template-columns:1fr;max-width:440px}
  .facts3{grid-template-columns:1fr;gap:22px}
  .wk-scene{height:min(46vh,420px);border-radius:22px}
  .wk-scene .stamp{font-size:12px}
  .wk-scene .ticks span{font-size:9px}
  .kitscene .paper{transform:translateX(-56%) rotate(-4deg)}
  .kitscene .nana-i{height:50%;transform:translateX(55%)}
}
/* Tall screens (an iPad held upright) use the same centred hero as phones, matching the narrow world scale in measure(). */
@media (min-width:861px) and (max-aspect-ratio:105/100){
  .hero{left:50%;transform:translateX(-50%);width:min(32rem,80vw);text-align:center;top:22%}
  .hero p{margin:0 auto 22px}
  .hero .row{justify-content:center}
}
/* A phone held sideways: the hero words are smaller so they fit between the header and the street (measure()). */
@media (max-height:520px) and (min-aspect-ratio:13/10){
  .hero h1{font-size:26px;margin-bottom:8px}
  .hero p{font-size:14px;margin-bottom:12px;max-width:52ch}
  .hero .btn{height:40px}
}
@media (prefers-reduced-motion:reduce){
  .stars b,.rv-cloud,.closer .cl,.door .pip-i img{animation:none}
  .rbk.shown .dot,.rbk.shown .c .g{animation:none}
  .rbk .file .ok{opacity:1;transform:none}
  .rbk.shown .ok{animation:none}
  .kept{transition:opacity .2s linear;transform:translate(-50%,0)}
}