/* Tojuri site shell: shared by every page. Tokens, nav, footer, page bands and shared rooms. */
/* Self-hosted fonts [WEB-04]: Latin subsets of the google/fonts originals, OFL beside each. Sources: fonts/README.md. */
@font-face{font-family:'Gabarito';font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/gabarito/gabarito-latin-variable.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/hanken-grotesk/hanken-grotesk-latin-variable.woff) format('woff');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono/ibm-plex-mono-latin-500.woff) format('woff');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;src:url(fonts/fraunces/fraunces-italic-latin-variable.woff) format('woff');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  /* type colours: soft deep blue slate, never near black */
  --ink:var(--tojuri-sky-navy); --body:var(--tojuri-slate); --ink-2:var(--tojuri-slate-soft); --ink-3:var(--tojuri-slate-soft);   /* headlines, body, secondary */
  --sky-ink:var(--tojuri-sky-navy); --sky-ink-2:var(--tojuri-slate);
  --night-ink:var(--tojuri-cream); --night-ink-2:var(--web-night-ink-2);
  --action:var(--tojuri-sky-navy); --action-hover:var(--tojuri-sky-navy-deep); /* the one CTA colour, used by every button and link */
  --sign:var(--web-sign);
  --protected:var(--tojuri-protected); --cream:var(--tojuri-cream); --wordmark:var(--tojuri-sky-navy); --line:var(--web-line); --paper:var(--web-paper); --mist:var(--web-mist);
  --sky-top:var(--tojuri-sky-top); --sky-bot:var(--tojuri-sky-bottom);
  --card:var(--tojuri-white); --warn:var(--web-warn); --glow:var(--web-glow); --glow-soft:rgba(255,227,181,.08); --night-ink-3:var(--web-night-ink-3); --veil:rgba(13,26,49,.35); /* drop zone, result card, mismatch mark */
  --leo:var(--mallow-leo-navy); --mia:var(--mallow-mia-coral); --lola:var(--mallow-lola-yellow); --pip:var(--mallow-pip-blue); --nana:var(--mallow-rosa-sage); --nana-ink:var(--web-nana-ink);
  --display:'Gabarito','Helvetica Neue',Arial,sans-serif;   /* founder, 18 Oct 2026: Gabarito replaces Outfit, set at 450 to match Outfit 500 */ --sans:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace; --serif:'Fraunces',Georgia,serif;
  --ease:cubic-bezier(.22,1,.36,1);
  /* motion: one set of timings and curves for every page (founder round, 18 Oct 2026). Calm, never bouncy. */
  --ease-out:cubic-bezier(.22,1,.36,1);     /* arrives and settles, no overshoot (same curve as --ease) */
  --ease-in-out:cubic-bezier(.65,0,.35,1);  /* a slow start and a slow stop, for things that travel */
  --ease-press:cubic-bezier(.3,.7,.4,1);    /* a press: quick in, soft out */
  --dur-press:120ms;    /* a button going down */
  --dur-hover:280ms;    /* hover in and out */
  --dur-soft:480ms;     /* underlines, lifts, small state changes */
  --dur-reveal:700ms;   /* pictures fading in, lines rising in */
  --dur-page:560ms;     /* the page change */
  --gut:clamp(16px,6vw,96px);
  /* vertical rhythm: one set of steps for every page */
  --sec-pad:clamp(108px,11.5vw,160px);   /* top and bottom of a section */
  --gap-intro:clamp(16px,1.4vw,22px);    /* headline to its intro line */
  --gap-visual:clamp(56px,6.2vw,92px);   /* intro line to the visual */
  --gap-caption:clamp(32px,3.4vw,50px);  /* visual to its caption or link */
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--tojuri-white);color:var(--body);font:400 16px/1.6 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:none}
button{font:inherit}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--action);outline-offset:3px}
a:not([class]):focus-visible,.textlink:focus-visible,.legal a:focus-visible,.flinks a:focus-visible{border-radius:3px}
.foot[data-tod="night"] :focus-visible,body[data-nav="dark"] .nav :focus-visible,.cap.dark :focus-visible,.drop :focus-visible,.kept :focus-visible{outline-color:var(--cream)}
.kept :focus-visible{outline-color:var(--action)}
.skip{position:fixed;left:12px;top:-60px;z-index:80;background:var(--tojuri-white);color:var(--ink);padding:10px 16px;border-radius:999px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
#main{overflow-x:clip}

/* ---------- nav: wordmark only, it changes tone with what is under it ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:30px;padding:22px clamp(16px,3.4vw,48px);transition:opacity .6s var(--ease),background .6s var(--ease),padding .6s var(--ease)}
body[data-nav="white"] .nav{background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding-top:14px;padding-bottom:14px}
body[data-nav="dark"][data-zone="foot"] .nav{background:rgba(14,26,49,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding-top:14px;padding-bottom:14px}
body[data-nav="sky"][data-zone="foot"] .nav{background:rgba(214,235,252,.78);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding-top:14px;padding-bottom:14px}
.word{display:block;line-height:0;color:var(--wordmark);transition:color .7s var(--ease),filter .7s var(--ease)}
.word svg{width:62px;height:auto;display:block}
.nav .sp{flex:1}
.nav .links{display:flex;gap:28px;font:500 13.5px/1 var(--sans);color:var(--sky-ink);transition:color .7s var(--ease)}
.nav .links a{text-decoration:none;opacity:.88;position:relative;padding:6px 0}
.nav .links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.nav .links a:hover{opacity:1}.nav .links a:hover::after,.nav .links a[aria-current="page"]::after{transform:scaleX(1)}
.nav .links a[aria-current="page"]{opacity:1}
body[data-nav="white"] .word{color:var(--wordmark);filter:none}
body[data-nav="white"] .nav .links{color:var(--body)}
body[data-nav="dark"] .word{color:var(--cream);filter:none}
body[data-nav="dark"] .nav .links{color:var(--night-ink)}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 24px;border-radius:999px;background:var(--action);color:var(--tojuri-white);font:600 14px/1 var(--sans);text-decoration:none;border:0;cursor:pointer;
  transition:background var(--dur-hover) var(--ease-out),transform var(--dur-hover) var(--ease-out);-webkit-tap-highlight-color:transparent}
/* the soft depth under a button is its own layer, so hover only fades it in (opacity) and lifts the button 1 px */
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity var(--dur-hover) var(--ease-out);
  box-shadow:0 10px 22px -12px rgba(26,50,73,.6),0 2px 5px -2px rgba(26,50,73,.28)}
.btn:hover{background:var(--action-hover)}
@media (hover:hover){ .btn:hover{transform:translateY(-1px)} .btn:hover::after{opacity:1} }
.btn:active{transform:translateY(0) scale(.975);transition-duration:var(--dur-press);transition-timing-function:var(--ease-press)}
.btn:active::after{opacity:.35;transition-duration:var(--dur-press)}
.btn:disabled,.btn[disabled]{transform:none}.btn:disabled::after,.btn[disabled]::after{opacity:0}
.nav .btn{height:40px;padding:0 18px;font-size:14px}
body[data-nav="dark"] .nav .btn{background:var(--tojuri-cream);color:var(--ink)}
.textlink{position:relative;font:600 14px/1 var(--sans);text-decoration:none;color:var(--action);border-bottom:1px solid rgba(35,64,95,.3);padding-bottom:3px}
/* the line draws itself in from the left on hover and leaves to the right */
.textlink::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform var(--dur-soft) var(--ease-out)}
.textlink:hover::after,.textlink:focus-visible::after{transform:scaleX(1);transform-origin:0 50%}
/* links inside text: a fine underline that darkens on hover, and wraps with the line */
main a:not([class]){text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:rgba(35,64,95,.32);transition:text-decoration-color var(--dur-hover) var(--ease-out),color var(--dur-hover) var(--ease-out)}
main a:not([class]):hover{text-decoration-color:currentColor}
.menu-btn{display:none;height:40px;padding:0 14px;border-radius:999px;border:1px solid rgba(35,64,95,.22);background:rgba(255,255,255,.4);color:var(--ink);font:600 14px/1 var(--sans);cursor:pointer}
body[data-nav="dark"] .menu-btn{color:var(--night-ink);border-color:rgba(244,237,231,.3);background:rgba(255,255,255,.06)}
.sheet{position:fixed;inset:0;z-index:70;background:rgba(214,235,252,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);display:flex;flex-direction:column;padding:84px 28px 32px;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
.sheet.on{opacity:1;visibility:visible}
.sheet a{font:450 30px/1.15 var(--display);letter-spacing:-.03em;color:var(--ink);text-decoration:none;padding:10px 0;border-bottom:1px solid rgba(35,64,95,.12)}
.sheet .close{position:absolute;right:16px;top:16px;height:40px;padding:0 16px;border-radius:999px;border:0;background:var(--ink);color:var(--tojuri-white);font:600 14px/1 var(--sans);cursor:pointer}
.sheet .btn{margin-top:28px;align-self:flex-start;font:600 15px/1 var(--sans);color:var(--tojuri-white);border:0;padding:0 24px}
.sheet img{width:120px;height:auto;align-self:center;margin:auto 0 0}

/* ---------- page band: Alba under the cloud, the top of every page ---------- */
.band{position:relative;display:flex;flex-direction:column;align-items:center;padding:108px var(--gut) 0;background:linear-gradient(180deg,var(--sky-top),var(--sky-bot));overflow:hidden}
/* The cloud ceiling (founder, 18 Oct 2026: "fuller, richer, subtle movement, own its space, be its mark"): one
   full-length cloud along the top of the home hero and every header band, behind the nav. Two seamless layers,
   light only (white with soft alpha) so every shade is exactly the sky behind: a misty back layer drifting very
   slowly, and a fuller front layer drifting a little faster and gently breathing. Each layer moves by exactly one
   tile width per loop, so the wrap never jumps. */
.cbl,.band::before,.band::after{content:"";position:absolute;left:0;top:0;pointer-events:none;background-position:0 0;background-size:auto 100%;background-repeat:repeat-x;will-change:translate}
.cb-back,.band::before{--lh:calc(var(--bank-h) * 1.16);--tw:calc(var(--lh) * 6.588);height:var(--lh);width:calc(100% + var(--tw));background-image:url(img/cloud-bank-back.webp);animation:cdrift 520s linear var(--cph-back,0s) infinite}
.cb-front,.band::after{--lh:var(--bank-h);--tw:calc(var(--lh) * 8.96);height:var(--lh);width:calc(100% + var(--tw));background-image:url(img/cloud-bank-front.webp);transform-origin:50% 0;animation:cdrift 300s linear var(--cph-front,0s) infinite,cbreathe 13s ease-in-out var(--cph-breathe,0s) infinite alternate}
@keyframes cdrift{to{translate:calc(-1 * var(--tw)) 0}}
@keyframes cbreathe{to{scale:1 1.04}}
.cpause .cbl,.band.cpause::before,.band.cpause::after{animation-play-state:paused}
.band{--bank-h:clamp(150px,16vw,230px);padding-top:calc(var(--bank-h) * .86 + clamp(14px,2vw,28px))}
@keyframes breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(3px) scale(1.012)}}
.bwords{text-align:center;max-width:40rem;margin:22px auto 0;position:relative;z-index:2}
.bwords h1{font:450 clamp(28px,3vw,46px)/1.04 var(--display);letter-spacing:-.04em;margin:0;color:var(--sky-ink);text-wrap:balance}
.bwords p{text-wrap:balance}  /* no one-word last lines under the cloud */
.bwords p{margin:14px auto 0;font-size:clamp(15px,1.05vw,17px);color:var(--sky-ink-2);max-width:42ch}
.bcity{position:relative;width:calc(100% + 2 * var(--gut));margin-top:clamp(26px,4vw,48px);height:clamp(210px,26vw,340px);flex:none}
.bcity .bl{position:absolute;left:0;right:0;bottom:0;pointer-events:none}
.bcity .bl img{position:absolute;bottom:0;height:auto}
.bcity .bground{position:absolute;left:0;right:0;bottom:0;height:13%;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)}
.bcity .bmidg{position:absolute;left:0;right:0;bottom:12%;height:4%;background:var(--web-bcity-bmidg)}
.bcity .bfar{bottom:15%;height:52%}
.bcity .bmid{bottom:12.5%;height:46%}
.bcity .bnear{bottom:12%;height:88%}
.bcity .bnear>*{position:absolute;bottom:0}
.bcity .bnear img{width:100%;height:auto}
.bcity .bback{bottom:12.5%;height:88%}
.bcity .bback>*{position:absolute;bottom:0}
.bcity .bhang{top:37%;bottom:auto;height:15%}
.bcity .at{left:var(--x);transform:translateX(-50%)}
.bcity .fade{-webkit-mask:linear-gradient(0deg,var(--web-mask-black) 78%,transparent 100%);mask:linear-gradient(0deg,var(--web-mask-black) 78%,transparent 100%)}  /* the parcel tube rises into the sky */
/* travellers: whole width, fully off screen at both ends whatever their size. Nobody walks on the spot. */
.bcity .roll{animation:roll var(--dur,46s) linear infinite}
.bcity .roll.back,.bcity .roll.left{animation-direction:reverse}
.bcity .roll.back .fig{transform:scaleX(-1)}  /* 'back' mirrors a figure drawn facing right, picture and clip together; 'left' is already drawn facing left */
@keyframes roll{from{left:0;transform:translateX(-100%)}to{left:100%;transform:translateX(0)}}
.bcity .walk img{animation:step .48s ease-in-out infinite alternate}
.bcity .fig{position:relative;display:block;height:100%}
/* the Mallows move (shared.js ANIM): a clip over its cut-out, or over the same spot of a scene picture. The picture
   stays until the clip really plays (.alive), so blocked autoplay and reduced motion show the still art. */
.anim{position:absolute;left:50%;bottom:calc(var(--ab) * var(--ah) * -100%);height:calc(var(--ah) * 100%);width:auto;max-width:none;aspect-ratio:var(--aar);
  transform:translateX(calc(-50% - var(--acx) * 100%));object-fit:fill;opacity:0;pointer-events:none;background:transparent}
.anim.on{opacity:1}
.alive>img{visibility:hidden}
.ov{position:absolute;left:var(--l);top:var(--t);width:var(--w);height:var(--h);max-width:none;object-fit:fill;opacity:0;pointer-events:none;background:transparent}
.ov.on{opacity:1}
@keyframes step{to{translate:0 -1.5px}}
/* Market Square (pricing): paving instead of a verge, low roofs behind a shorter arcade */
.bcity.g-square .bmidg{background:var(--web-bcity-bground)}
.bcity.g-square .bground{background-image:repeating-linear-gradient(90deg,rgba(150,132,110,.08) 0 1px,transparent 1px 40px),repeating-linear-gradient(180deg,rgba(150,132,110,.07) 0 1px,transparent 1px 12px)}
.bcity.g-square .bfar{bottom:15%;height:44%}
.bcity.g-square .bmid{height:38%}
/* The harbour (recovery): a calm bay between the quay and the far headland, the lighthouse on the horizon */
.bcity.g-harbour .bmidg{bottom:12%;height:31%;background:linear-gradient(180deg,rgba(206,228,246,.9),rgba(186,216,240,.92) 70%,rgba(214,232,246,.95));overflow:hidden}
.bcity.g-harbour .bmidg::before{content:"";position:absolute;inset:0 -60px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.8) 0 22px,transparent 22px 64px);-webkit-mask:repeating-linear-gradient(180deg,var(--web-mask-black) 0 1px,transparent 1px 10px);mask:repeating-linear-gradient(180deg,var(--web-mask-black) 0 1px,transparent 1px 10px);opacity:.55;animation:ripple 9s linear infinite}
@keyframes ripple{to{transform:translateX(64px)}}
.bcity.g-harbour .bground{background-image:repeating-linear-gradient(90deg,rgba(150,132,110,.09) 0 1px,transparent 1px 64px)}
.bcity.g-harbour .bfar{bottom:42.5%;height:13%}
.bcity.g-harbour .bback{bottom:40%;height:58%}
/* College Green (questions) and the hillside (privacy, terms): grass, no street */
.bcity.g-lawn .bground,.bcity.g-lawn .bmidg,.bcity.g-hill .bground,.bcity.g-hill .bmidg{background:linear-gradient(180deg,rgba(214,224,192,.85),rgba(228,233,210,.9)),var(--web-bcity-bground);box-shadow:inset 0 2px 0 rgba(255,255,255,.6)}
.bcity.g-lawn .bmidg,.bcity.g-hill .bmidg{bottom:12%;height:5%;box-shadow:none}
.bcity.g-lawn .bfar{bottom:16%;height:30%}
.bcity.g-hill .bfar{bottom:16%;height:46%}
/* Neighbours Row (compare): the tram's wire, at the height of its pantograph */
.bcity .bwire{position:absolute;left:0;right:0;top:57.9%;height:1px;background:rgba(70,86,108,.32)}
@media (max-width:640px){
  .bcity .at{left:var(--xs,var(--x))}
  .bcity .wide{display:none}
}
/* Market Square (pricing): the clock's own dial and hands over the painted face (shared.js turns them) */
.bcity .clock .dial{position:absolute;left:49.43%;top:37.03%;width:45.45%;aspect-ratio:1;translate:-50% -50%;pointer-events:none}
.bcity .clock .dial img{position:absolute;left:0;top:0;bottom:auto;width:100%;height:100%}
.bcity .clock .dial .hh{rotate:var(--hr,60deg)}
.bcity .clock .dial .mh{rotate:var(--mr,0deg)}
.post{position:absolute;bottom:0;width:6px;background:linear-gradient(90deg,var(--web-post),var(--web-post-2) 45%,var(--web-post-3));border-radius:2px}
.post .plate{position:absolute;left:50%;top:0;transform:translate(-50%,-30%);padding:8px 14px;border-radius:6px;background:var(--web-post-plate);
  box-shadow:inset 0 0 0 3px var(--web-post-plate),inset 0 0 0 4.5px var(--sign),0 2px 5px rgba(40,60,90,.18);font:450 clamp(12px,1.2vw,16px)/1 var(--display);color:var(--sign);white-space:nowrap}
.post .plate small{display:block;font:500 9px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--web-post-plate-2);margin-top:5px}

/* ---------- rooms: the white sections ---------- */
.room{background:var(--tojuri-white);padding:var(--sec-pad) var(--gut);position:relative}
.room.mist{background:var(--mist)}
.room .in{max-width:1120px;margin:0 auto}
.room h2{font:450 clamp(28px,3.2vw,44px)/1.04 var(--display);letter-spacing:-.035em;margin:0;color:var(--ink);text-align:center}
.room .lede{margin:var(--gap-intro) auto 0;color:var(--body);max-width:46ch;font-size:clamp(15.5px,1.15vw,17.5px);text-align:center}
.room .more{display:flex;justify-content:center;margin-top:var(--gap-caption)}
.prose{max-width:68ch;margin:0 auto;color:var(--body)}
.prose h2{text-align:left;font-size:clamp(22px,2vw,28px);margin:48px 0 12px}
.prose h3{font:450 19px/1.3 var(--display);color:var(--ink);margin:28px 0 8px}
.prose p,.prose li{font-size:16px;line-height:1.7}
.prose ul{padding-left:20px}
.prose strong{color:var(--ink);font-weight:600}
.small{font-size:13.5px;color:var(--ink-3)}
.center{text-align:center}

/* objects on a light wood shelf */
.shelfwrap{margin-top:var(--gap-visual)}
.shelf{position:relative;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:0 32px;padding:0 2%;--oh:clamp(150px,17vw,230px)}
.shelf::after{content:"";position:absolute;left:0;right:0;top:var(--oh);height:14px;border-radius:7px;
  background:linear-gradient(180deg,var(--web-shelf) 0%,var(--web-shelf-2) 55%,var(--web-shelf-3) 100%);box-shadow:0 22px 30px -18px rgba(110,85,50,.35),inset 0 1px 0 rgba(255,255,255,.6)}
.obj{position:relative;display:flex;align-items:flex-end;justify-content:center;width:100%;height:var(--oh);cursor:pointer;background:none;border:0;padding:0;-webkit-tap-highlight-color:transparent}
.obj img{max-width:88%;max-height:100%;width:auto;height:auto;transform:translateY(-70px);opacity:0;transition:transform 1.1s var(--ease),opacity .8s var(--ease)}
.obj::after{content:"";position:absolute;left:18%;right:18%;bottom:-4px;height:12px;border-radius:50%;background:radial-gradient(closest-side,rgba(90,70,40,.28),rgba(90,70,40,0));opacity:0;transition:opacity .8s .3s}
.shelfwrap.shown .obj img{transform:translateY(0);opacity:1}
.shelfwrap.shown .obj::after{opacity:1}
.shelfwrap.shown .item:nth-child(2) img{transition-delay:.12s}.shelfwrap.shown .item:nth-child(3) img{transition-delay:.24s}.shelfwrap.shown .item:nth-child(4) img{transition-delay:.36s}
.shelfwrap.shown .obj:hover img,.shelfwrap.shown .obj.on img{transform:translateY(-10px) rotate(-1.5deg)}
.note{margin-top:var(--gap-caption);transition:opacity .5s var(--ease)}
.note b{display:block;font:450 19px/1.2 var(--display);letter-spacing:-.02em;color:var(--ink);margin-bottom:8px}
.note span{color:var(--body);font-size:15.5px;line-height:1.55;display:block}
.note .textlink{display:inline-block;margin-top:12px}
.shelfwrap.focus .note{opacity:.42}.shelfwrap.focus .note.on{opacity:1}

/* receipts that print */
.printers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;margin:64px auto 0;max-width:960px}
.printer{position:relative;padding-top:18px}
.printer .mouth{height:18px;border-radius:9px;background:linear-gradient(180deg,var(--web-printer-mouth),var(--web-printer-mouth-2));box-shadow:inset 0 2px 3px rgba(40,50,70,.12);position:relative;z-index:2}
.printer .mouth::after{content:"";position:absolute;left:7%;right:7%;top:8px;height:3px;border-radius:2px;background:var(--web-printer-mouth-3);opacity:.8}
.rc-clip{position:relative;margin:-8px 9% 0;overflow:hidden;padding-bottom:30px}
.receipt{background:var(--paper);padding:28px 24px 32px;box-shadow:0 20px 30px -24px rgba(40,50,70,.45),0 0 0 1px rgba(40,50,70,.04);
  -webkit-mask:linear-gradient(var(--web-mask-black),var(--web-mask-black)) top/100% calc(100% - 10px) no-repeat,conic-gradient(from -45deg at bottom,var(--web-mask-clear),var(--web-mask-black) 1deg 89deg,var(--web-mask-clear) 90deg) bottom/16px 10px repeat-x;
  mask:linear-gradient(var(--web-mask-black),var(--web-mask-black)) top/100% calc(100% - 10px) no-repeat,conic-gradient(from -45deg at bottom,var(--web-mask-clear),var(--web-mask-black) 1deg 89deg,var(--web-mask-clear) 90deg) bottom/16px 10px repeat-x}
.receipt.print{clip-path:inset(0 0 100% 0)}
.receipt .rw{display:block;width:64px;height:auto;color:var(--wordmark);margin-bottom:16px}
.receipt .who{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase;margin-bottom:14px}
.receipt h3{font:450 22px/1.1 var(--display);letter-spacing:-.02em;margin:0 0 18px;color:var(--ink)}
.receipt ul{list-style:none;margin:0;padding:0;border-top:1px dashed var(--web-receipt-3)}
.receipt li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px dashed var(--web-receipt-3);font-size:14.5px;color:var(--ink-2)}
.receipt li em{font:500 12.5px/1.6 var(--mono);font-style:normal;color:var(--ink);white-space:nowrap}
.receipt .tot{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-top:16px;font:500 14px/1.4 var(--mono);color:var(--ink)}
.receipt .tot b{font:450 26px/1 var(--display);letter-spacing:-.02em}

/* questions */
.qa{margin:48px auto 0;max-width:860px;border-top:1px solid var(--line);text-align:left}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:20px;padding:22px 0;font:450 clamp(16px,1.4vw,19px)/1.3 var(--display);letter-spacing:-.015em;color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary svg{flex:none;width:34px;height:auto;transition:transform .8s var(--ease)}
.qa summary .tw{margin-left:auto;flex:none;width:12px;height:12px;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);transform:rotate(45deg) translateY(-3px);transition:transform .6s var(--ease)}
.qa details[open] summary svg{transform:translateY(5px) rotate(-6deg)}
.qa details[open] summary .tw{transform:rotate(225deg) translateY(-3px)}
.qa .ans{padding:0 0 26px 54px;color:var(--body);max-width:64ch}
.qa .ans p{margin:0 0 10px}
.qa .ans ul{margin:0 0 10px;padding-left:18px}
.qa .ans small{display:block;color:var(--ink-3);font-size:14px}
.qa .ans a{color:var(--action)}
.qgroup{max-width:860px;margin:72px auto 0}
.qgroup :is(h2,h3){font:500 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0;padding-bottom:4px}
.qgroup .qa{margin-top:14px}

/* reveal on scroll */
.rv{transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
/* only hidden once the script has run and the element is still below the screen; with no script it simply shows */
.life .rv:not(.shown){opacity:0;transform:translateY(18px)}

/* ---------- scroll life (founder, 18 Oct 2026): headings, lines and cards rise in as they arrive ----------
   The waiting state is set by shared.js only on elements still below the screen, so nothing is ever left hidden
   without the script, in a thumbnail or in print. */
.lp{transition:opacity .7s var(--ease),transform .8s var(--ease);transition-delay:var(--ld,0ms)}
.lp.lw{opacity:0;transform:translateY(10px)}
.lpar{will-change:translate}
@media print{.lp.lw,.life .rv:not(.shown){opacity:1!important;transform:none!important}.lpar{translate:none!important}}

/* ---------- footer: Alba, right now, at your own time of day ---------- */
.foot{position:relative;color:var(--ink);--fsky1:var(--sky-top);--fsky2:var(--sky-bot);--street:var(--web-bcity-bground);--ftext:var(--ink);--ftext2:var(--body);--fsmall:var(--ink-2);--flink:var(--action);
  background:linear-gradient(180deg,var(--fsky1) 0%,var(--fsky2) 100%);transition:background 1.2s}
.foot[data-tod="dawn"]{--fsky1:var(--web-foot-dawn-fsky1);--fsky2:var(--web-foot-dawn-fsky2);--street:var(--web-foot-dawn-street)}
.foot[data-tod="dusk"]{--fsky1:var(--web-foot-dusk-fsky1);--fsky2:var(--web-foot-dusk-fsky2);--street:var(--web-foot-dusk-street)}
.foot[data-tod="night"]{--fsky1:var(--web-foot-night-fsky1);--fsky2:var(--web-foot-night-fsky2);--street:var(--web-foot-night-street);--ftext:var(--night-ink);--ftext2:var(--night-ink-2);--fsmall:var(--web-foot-night-fsmall);--flink:var(--web-foot-night-flink)}
.peek{position:absolute;right:clamp(24px,12vw,220px);bottom:100%;width:clamp(86px,9vw,128px);height:calc(clamp(86px,9vw,128px) * .845);overflow:hidden;z-index:4}
.peek img{width:100%;height:auto;transform:translateY(102%);transition:transform 1.2s var(--ease)}
.foot.seen .peek img{transform:translateY(8%)}
.foot.seen .peek:hover img{transform:translateY(34%)}
.foot .stars{position:absolute;inset:0 0 40% 0;opacity:0;transition:opacity 1.2s;pointer-events:none}
.foot[data-tod="night"] .stars{opacity:1}
.foot .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}}
.finvite{position:relative;z-index:2;max-width:1120px;margin:0 auto;padding:clamp(96px,10vw,128px) var(--gut) 0}
.finvite h2{font:450 clamp(28px,3.2vw,44px)/1.04 var(--display);letter-spacing:-.035em;margin:0;color:var(--ftext);max-width:20ch}  /* one line, as with Outfit (Gabarito's ch is narrower) */
.finvite p{color:var(--ftext2);max-width:42ch;margin:14px 0 24px}
.finvite form{display:flex;gap:10px;flex-wrap:wrap;max-width:500px}
.finvite input{flex:1 1 220px;height:48px;border-radius:999px;border:1px solid rgba(35,64,95,.22);background:rgba(255,255,255,.55);color:var(--ink);padding:0 20px;font:400 16px/1 var(--sans)}
.foot[data-tod="night"] .finvite input{border-color:rgba(244,237,231,.22);background:rgba(244,237,231,.06);color:var(--night-ink)}
.finvite input::placeholder{color:var(--web-finvite-placeholder)}
.foot[data-tod="night"] .finvite .btn{background:var(--tojuri-cream);color:var(--ink)}
.finvite input:disabled,.finvite .btn:disabled{opacity:.55;cursor:not-allowed}
.finvite .note2{display:block;margin-top:10px;font-size:13.5px;color:var(--fsmall);min-height:1.4em}
.pinned{position:absolute;right:var(--gut);top:clamp(80px,9vw,110px);width:160px;transform:rotate(5deg);background:var(--web-pinned);padding:10px 10px 26px;box-shadow:0 18px 30px -16px rgba(20,30,60,.5);cursor:pointer;border:0;transition:transform .8s var(--ease);text-decoration:none;display:block}
.pinned:hover{transform:rotate(2deg) translateY(-4px)}
.pinned::before{content:"";position:absolute;left:50%;top:-10px;width:62px;height:20px;transform:translateX(-50%) rotate(-3deg);background:rgba(232,224,208,.8)}
.pinned svg{width:100%;height:auto;display:block}
.pinned span{position:absolute;left:0;right:0;bottom:7px;text-align:center;font:italic 500 13px/1 var(--serif);color:var(--web-pinned-2)}
.fscene{position:relative;margin-top:var(--gap-visual);padding-top:clamp(70px,8vw,120px)}
.froof{position:relative;width:min(1040px,96vw);margin:0 auto;aspect-ratio:1500/879}
.froof>img{position:absolute;left:0;right:0;bottom:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;transition:opacity 1.2s}
.froof .nightonly{opacity:0}
.foot[data-tod="night"] .froof .nightonly{opacity:1}
.foot[data-tod="night"] .froof .dayonly{opacity:0}
.foot[data-tod="dusk"] .froof .dayonly{filter:sepia(.25) brightness(.94) saturate(.95)}
.foot[data-tod="dawn"] .froof .dayonly{filter:sepia(.14) brightness(1.02)}
.froof .ov{transition:opacity 1.2s}
.froof .ovn.on,.foot[data-tod="night"] .froof .ovd.on{opacity:0}
.foot[data-tod="night"] .froof .ovn.on{opacity:1}
.foot[data-tod="dusk"] .froof .ovd{filter:sepia(.25) brightness(.94) saturate(.95)}
.foot[data-tod="dawn"] .froof .ovd{filter:sepia(.14) brightness(1.02)}
.fcloud{position:absolute;z-index:3;left:50%;bottom:90%;width:clamp(150px,19%,250px);transform:translateX(-50%);transform-origin:50% 70%;transition:transform 1.4s var(--ease),bottom 1.2s var(--ease);cursor:pointer;background:none;border:0;padding:0}
.foot[data-tod="night"] .fcloud{bottom:84%}
.fcloud img{width:100%;height:auto;position:relative}
.fcloud .g{position:absolute;left:-45%;top:-60%;width:190%;height:220%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,232,190,.4),rgba(255,226,180,0) 70%);opacity:0;transition:opacity 1.2s}
.foot[data-tod="night"] .fcloud .g{opacity:1}
.fcloud .b{animation:rest 7s ease-in-out infinite}
@keyframes rest{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.fcloud .rb{position:absolute;left:50%;top:78%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--web-fcloud-rb);box-shadow:0 0 12px 5px rgba(255,214,150,.6);opacity:0}
.fcloud.reading .rb{animation:readback 2.6s var(--ease) 1}
.fcloud.reading .b{animation:catchdip 2.6s var(--ease) 1}
@keyframes readback{0%{opacity:0;transform:translateY(0)}15%{opacity:1}40%,63%{opacity:1;transform:translateY(46px)}92%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(0)}}
@keyframes catchdip{0%,100%{transform:translateY(0)}40%,63%{transform:translateY(3px)}}
.foot.lean .fcloud{transform:translateX(-58%) rotate(-4deg)}
.street{position:relative;z-index:3;background:var(--street);transition:background 1.2s;padding:0 var(--gut) 30px}
.street::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;background:linear-gradient(180deg,rgba(60,70,90,.12),rgba(60,70,90,0))}
.foot[data-tod="night"] .street::before{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0))}
.street .in{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:44px 64px;align-items:start;padding-top:52px}
/* the logo: the cloud mark on its own */
.fbrand{display:flex;flex-direction:column;gap:22px;padding-top:6px}
.fline{margin:0;font:450 clamp(20px,1.7vw,24px)/1.3 var(--display);letter-spacing:-.02em;color:var(--ftext);white-space:nowrap}  /* the approved core line [§34] */
.fword{color:var(--ftext);line-height:0;display:block;width:max-content;transition:color 1.2s}
.fword .fmark{display:block;width:52px;height:auto;overflow:visible}
.fword .fmark use{fill:none;stroke:currentColor;stroke-width:18;stroke-linecap:round;stroke-linejoin:round}
/* the bar: legal on the left, Alba's own clock on the right, one hairline above */
.fbar{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 32px;padding-top:22px;border-top:1px solid rgba(35,64,95,.12);font-size:13px;color:var(--fsmall)}
.foot[data-tod="night"] .fbar{border-top-color:rgba(244,237,231,.12)}
.tonight{font:400 13px/1.5 var(--sans);color:var(--fsmall)}
.tonight .ftn{display:flex;align-items:center;gap:10px}
.tonight .ftn::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--flink);box-shadow:0 0 0 4px rgba(35,64,95,.1)}
.foot[data-tod="night"] .tonight .ftn::before{box-shadow:0 0 0 4px rgba(244,237,231,.1)}
.tonight .ftn.now::before{animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{50%{box-shadow:0 0 0 7px rgba(35,64,95,0)}}
.tonight span{color:var(--fsmall)}
.tonight .fst{margin-bottom:8px}
.sentence{grid-column:1/-1;color:var(--ftext2);font-size:15px;line-height:1.75;margin:4px 0 0;max-width:72ch}
.sentence a{color:var(--flink);text-decoration:none;border-bottom:1px solid currentColor;border-bottom-color:rgba(127,141,162,.45)}
.sentence a:hover{border-bottom-color:currentColor}
.legal{display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px}
.legal a{color:inherit;text-decoration:none;transition:color .3s}
.legal a:hover,.legal a:focus-visible{color:var(--ftext)}


/* ---------- the rhythm, applied: headline, intro, visual, caption ---------- */
.room .in > :is(h2,.lede,.sec-p) + :is(.lede,.sec-p){margin-top:var(--gap-intro)}
.room .in > :is(h2,.lede,.sec-p) + :not(h2,p,.lede,.sec-p){margin-top:var(--gap-visual)}
.room .in > :not(h2,.lede,.sec-p) + :is(.small,.small-note,.trade,.worth,.cnote,.later-strip,.sum,.facts3,.checkcard,.keeps,.wk-honest,.more,.qtools){margin-top:var(--gap-caption)}
.room .in > :not(h2,.lede,.sec-p) + :is(.bignum,.lede){margin-top:var(--gap-visual)}
.room .in > :not(h2,.lede,.sec-p) + :is(.printers,.est,.rail,.tablewrap,.ptags){margin-top:var(--gap-visual)}

/* ---------- interludes: the Mallows between two sections ---------- */
.interlude{position:relative;padding:0 var(--gut) var(--gap-visual);background:var(--tojuri-white);overflow:hidden}
.interlude.to-mist{background:var(--tojuri-white)}
.il-stage{position:relative;max-width:1120px;height:clamp(230px,24vw,320px);margin:0 auto}
.il-far{position:absolute;left:-10%;right:-10%;bottom:10%;height:52%;opacity:.55;pointer-events:none}
.il-far img{position:absolute;bottom:0;height:100%;width:auto}
.il-ground{position:absolute;left:-50vw;right:-50vw;bottom:0;height:10%;background:var(--web-bcity-bground);box-shadow:inset 0 2px 0 rgba(255,255,255,.85)}
/* The harbour behind Nana and Pip (recovery): a small window onto the bay, its edges dissolving into the page;
   the lighthouse sweeps its beam once as it reaches the middle of the screen (shared.js adds .sweep). */
.il-far.il-harbour{left:-4%;right:-4%;bottom:8%;top:-6%;height:auto;opacity:1;
  -webkit-mask:linear-gradient(90deg,transparent,var(--web-mask-black) 26%,var(--web-mask-black) 74%,transparent),linear-gradient(180deg,transparent 4%,var(--web-mask-black) 46%);-webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent,var(--web-mask-black) 26%,var(--web-mask-black) 74%,transparent),linear-gradient(180deg,transparent 4%,var(--web-mask-black) 46%);mask-composite:intersect}
.il-harbour::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(214,235,252,0) 0%,rgba(214,235,252,.75) 44%,rgba(205,229,250,.9) 70%)}
.ilh-hl{position:absolute;left:0;right:0;bottom:24%;height:14%;background:url(img/hb-headland.webp) repeat-x 0 100%/auto 100%;opacity:.7}
.ilh-bay{position:absolute;left:0;right:0;bottom:0;height:25%;background:linear-gradient(180deg,rgba(196,222,244,.95),rgba(214,232,246,.9))}
.ilh-lh{position:absolute;left:79%;bottom:22%;height:46%;aspect-ratio:484/600;translate:-50% 0}
.il-far .ilh-lh img{position:absolute;left:0;bottom:0;width:100%;height:100%;opacity:.9}
.ilh-lh .lamp{position:absolute;z-index:2;left:49.8%;top:13%;width:70%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;opacity:0;
  background:radial-gradient(closest-side,rgba(255,244,214,1),rgba(255,232,180,.5) 40%,rgba(255,232,180,0))}
.ilh-lh .beam{position:absolute;z-index:1;left:49.8%;top:13%;width:1100%;height:150%;translate:0 -50%;transform-origin:0 50%;opacity:0;scale:1 1;
  background:linear-gradient(90deg,rgba(255,246,222,.95),rgba(255,246,222,.5) 30%,rgba(255,246,222,0) 80%);clip-path:polygon(0 47%,100% 8%,100% 92%,0 53%)}
.il-harbour.sweep .beam{animation:beam 2.6s var(--ease-in-out) .2s 1 both}
.il-harbour.sweep .lamp{animation:lamp 2.6s var(--ease-in-out) .2s 1 both}
@keyframes beam{0%{opacity:0;scale:1 1}18%{opacity:.75}47%{opacity:.95;scale:.06 1}53%{opacity:.95;scale:-.06 1}82%{opacity:.7}100%{opacity:0;scale:-1 1}}
@keyframes lamp{0%,28%{opacity:.15}50%{opacity:1}72%,100%{opacity:.15}}
.il-m{position:absolute;bottom:8%;margin:0;height:var(--h,78%);transform:translateX(-50%);opacity:0;transition:opacity .9s var(--ease)}
.il-m img{height:100%;width:auto;display:block}
.il-m::after{content:"";position:absolute;left:12%;right:12%;bottom:-6px;height:12px;border-radius:50%;background:radial-gradient(closest-side,rgba(70,90,110,.22),rgba(70,90,110,0))}
.il-m.in{opacity:1}
.il-caps{display:grid;grid-template-columns:repeat(var(--c,4),minmax(0,1fr));gap:20px;max-width:1120px;margin:var(--gap-caption) auto 0;text-align:center;list-style:none;padding:0}
.il-caps li{font:450 15px/1.45 var(--display);color:var(--ink)}
.il-caps li small{display:block;font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:8px}
.il-line{max-width:46ch;margin:var(--gap-caption) auto 0;text-align:center;font:italic 500 clamp(16px,1.3vw,19px)/1.45 var(--serif);color:var(--ink-2)}
@media (max-width:760px){
  .il-stage{height:clamp(210px,62vw,280px)}
  .il-stage.four .il-m{--h:56%!important}
  .il-stage.four{height:clamp(180px,50vw,220px)}
  .il-caps{grid-template-columns:1fr 1fr;gap:18px 14px}
}

/* the app reveal: the window rises into the sky, big */
.reveal{position:relative;height:calc(150vh + var(--n,3) * 96vh);background:linear-gradient(180deg,var(--tojuri-white) 0%,var(--sky-bot) 9%,var(--sky-top) 50%,var(--sky-bot) 91%,var(--tojuri-white) 100%)}
.rv-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.rv-intro{position:absolute;left:50%;top:46%;width:min(34rem,90vw);text-align:center;transform:translate(-50%,-50%)}
.rv-cloud{width:clamp(130px,13vw,190px);margin:0 auto 34px;animation:breathe 6s ease-in-out infinite}
.rv-cloud img{width:100%;height:auto}
.rv-mac{position:absolute;left:50%;top:0;width:900px;transform-origin:50% 0;will-change:transform}
.rv-mac .mwin{position:relative;background:var(--tojuri-white);border-radius:14px;box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 60px 120px -50px rgba(30,60,100,.5),0 0 0 1px rgba(35,64,95,.08);overflow:hidden}
.rv-mac .bar{height:32px;display:flex;align-items:center;gap:8px;padding:0 14px;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)}
.rv-mac .bar i{width:12px;height:12px;border-radius:50%}
.rv-mac .bar i:nth-child(1){background:var(--web-window-close)}.rv-mac .bar i:nth-child(2){background:var(--web-window-minimize)}.rv-mac .bar i:nth-child(3){background:var(--web-window-zoom)}
.rv-mac .bar span{flex:1;text-align:center;font:600 12.5px/1 -apple-system,'Hanken Grotesk',sans-serif;color:var(--web-rv-mac-bar-text);margin-right:52px}
.rv-mac .screens{position:relative;aspect-ratio:var(--ar,1.6);background:var(--tojuri-white)}
.rv-mac figure{position:absolute;inset:0;margin:0;opacity:0;backface-visibility:hidden;transform-origin:50% 50%}
.rv-mac figure.on{opacity:1}
.rv-mac figure img{translate:0 var(--drift,0px)}
/* the screen change (founder, 18 Oct 2026): a macOS-style swipe by default, a card flip with ?reveal=alt;
   the window frame and its traffic lights stay still, only the screen moves (shared.js) */
.rv-mac .screens{overflow:hidden;perspective:2400px;background:var(--web-rv-mac-bar-2)}
.rv-mac figure img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.rv-mac .sample{position:absolute;right:4px;top:calc(100% + 8px);font:600 9.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--web-rv-mac-sample);pointer-events:none}
.rv-mac .peek3{position:absolute;right:6%;bottom:100%;width:clamp(64px,6vw,92px);height:calc(clamp(64px,6vw,92px) * .845);overflow:hidden}
.rv-mac .peek3 .fig{position:relative;display:block;transform:translateY(14%)}
.rv-mac .peek3 img{width:100%;height:auto;display:block}
.rv-cap{position:absolute;left:50%;width:min(40rem,92vw);transform:translateX(-50%);text-align:center;height:62px}
.rv-cap div{position:absolute;inset:0}
/* the caption swaps line by line: out with a short rise, in from below, the second line a beat later */
.rv-cap b,.rv-cap span{opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .45s var(--ease)}
.rv-cap div.on b,.rv-cap div.on span{opacity:1;transform:none}
.rv-cap div.on span{transition-delay:.08s}
.rv-cap div.was b,.rv-cap div.was span{opacity:0;transform:translateY(-6px);transition-delay:0s}
.rv-cap b{display:block;font:450 clamp(18px,1.5vw,21px)/1.25 var(--display);letter-spacing:-.02em;color:var(--ink)}
.rv-cap span{display:block;margin-top:4px;font-size:15px;color:var(--body)}
.rv-dots{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.rv-dots i{position:relative;overflow:hidden;width:8px;height:8px;border-radius:4px;background:rgba(35,64,95,.22);transition:width .45s var(--ease)}
.rv-dots i.on{width:30px}
/* the active pill fills from left to right as you scroll through its step */
.rv-dots i.on::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--ink);transform-origin:0 50%;transform:scaleX(var(--f,1))}
/* the first time the window pins: a small chevron says there is more; it leaves after the first step */
.rv-cue{position:absolute;left:50%;width:18px;height:18px;margin-left:-9px;opacity:0;transition:opacity .5s var(--ease);pointer-events:none}
.rv-cue.on{opacity:.55}
.rv-cue::before{content:"";position:absolute;left:4px;top:2px;width:9px;height:9px;border-right:1.6px solid var(--ink);border-bottom:1.6px solid var(--ink);transform:rotate(45deg);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%,100%{translate:0 0}50%{translate:0 4px}}

.rv-mac figure img.contain{object-fit:contain;padding:5% 7%}
@media (max-width:860px){
  .rv-mac figure .f-recover{object-position:84% 0}
  .rv-mac figure .f-settings{object-position:70% 0}
  .rv-mac figure .f-home{object-position:0 0}
}

@media (max-width:980px){
  .nav .links{gap:20px}
}
@media (max-width:900px){
  .nav{gap:12px;padding:16px}
  .nav .links{display:none}
  .menu-btn{display:inline-flex;align-items:center}
  .word svg{width:56px}
  .nav .btn{padding:0 14px}
  .shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:52px 18px;padding:0;--oh:140px}
  .shelf::after{display:none}
  .obj::before{content:"";position:absolute;left:-6px;right:-6px;bottom:-14px;height:12px;border-radius:6px;background:linear-gradient(180deg,var(--web-shelf),var(--web-obj));box-shadow:0 16px 22px -14px rgba(110,85,50,.35)}
  .note{margin-top:34px}
  .note b{font-size:17.5px}.note span{font-size:14.5px}
  .printers{grid-template-columns:1fr;gap:28px}
  .qa .ans{padding-left:0}
  .pinned{position:relative;right:auto;top:auto;margin:36px 6px 0 auto;width:128px}
  .street .in{grid-template-columns:1fr;gap:32px;padding-top:40px}
  .foot .flinks{grid-template-columns:1fr 1fr;gap:30px 32px}
  .foot .flinks div:last-child{grid-column:1/-1}
}
@media (max-width:420px){ .nav .btn{font-size:13px;padding:0 12px;height:38px} .menu-btn{padding:0 12px;height:38px} }
@media (max-width:520px){ .shelf{gap:48px 14px} }
@media (prefers-reduced-motion:reduce){
  .cbl,.band::before,.band::after,.rv-cloud,.fcloud .b,.stars b,.foot .stars b,.bcity .roll,.bcity .walk img,.bcity .bmidg::before{animation:none!important}
  .anim,.ov{display:none!important}
  .alive>img{visibility:visible}
  .obj img,.peek img,.fcloud,.rv,.rv-mac figure,.il-m{transition:opacity .2s linear!important}
  .rv-mac figure,.rv-cap b,.rv-cap span{transform:none!important;transition:none!important}
  .rv-cue{display:none}
  .lp.lw{opacity:1;transform:none}.lpar{translate:none!important}
  .obj img,.rv{transform:none}
}
/* Footer links: one quiet row [founder: "looks busy here"]. */
.foot .flinks{display:grid;grid-template-columns:repeat(3,max-content);gap:0 64px;font:400 14px/1.4 var(--sans);color:var(--ftext2)}
.foot .flinks div{display:flex;flex-direction:column;gap:13px}
.foot .flinks a{color:inherit;text-decoration:none;transition:color .3s}
.foot .flinks a:hover,.foot .flinks a:focus-visible{color:var(--ftext)}

/* ---------- page transitions (founder round, 18 Oct 2026) ----------
   Cross-document View Transitions: the header and the cloud along the top stay where they are, the words
   under the cloud change in place, and the Alba place below glides in from the direction of travel along the
   nav (shared-head.js names it: 'ahead' or 'back'). The cloud keeps one clock across pages (shared-head.js),
   so it is the same picture on both sides and the cross-fade leaves it still. Browsers without support
   navigate as before; reduced motion turns the transition off. */
@view-transition{navigation:auto}
.nav{view-transition-name:site-nav}
.bwords,.hero{view-transition-name:page-words}
.band .bcity{view-transition-name:band-scene}
::view-transition-group(root){animation-duration:var(--dur-page);animation-timing-function:var(--ease-out)}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--dur-page)}
::view-transition-group(site-nav){animation:none}
::view-transition-old(site-nav){animation:none;opacity:0}
::view-transition-new(site-nav){animation:none}
/* the words: no stretching between two different headlines, just a quiet change in place */
::view-transition-group(page-words){animation-duration:var(--dur-page);animation-timing-function:var(--ease-out)}
::view-transition-old(page-words),::view-transition-new(page-words){height:100%;width:auto;left:50%;right:auto;translate:-50% 0;object-fit:none;object-position:50% 0}
::view-transition-old(page-words){animation:vt-out calc(var(--dur-page) * .5) var(--ease-out) both}
::view-transition-new(page-words){animation:vt-up var(--dur-page) var(--ease-out) calc(var(--dur-page) * .25) both}
/* the place below: a short camera move along Alba */
::view-transition-group(band-scene){animation-duration:var(--dur-page)}
::view-transition-old(band-scene){animation:vt-scene-out var(--dur-page) var(--ease-in-out) both}
::view-transition-new(band-scene){animation:vt-scene-in var(--dur-page) var(--ease-in-out) both}
html:active-view-transition-type(back)::view-transition-old(band-scene){animation-name:vt-scene-out-back}
html:active-view-transition-type(back)::view-transition-new(band-scene){animation-name:vt-scene-in-back}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-up{from{opacity:0;transform:translateY(10px)}}
@keyframes vt-scene-out{to{opacity:0;transform:translateX(-5%)}}
@keyframes vt-scene-in{from{opacity:0;transform:translateX(5%)}}
@keyframes vt-scene-out-back{to{opacity:0;transform:translateX(5%)}}
@keyframes vt-scene-in-back{from{opacity:0;transform:translateX(-5%)}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ---------- calm image loading ----------
   shared.js marks a picture that has not arrived yet ('ld'), and lets it fade in once it is decoded, so nothing
   pops in. Without the script nothing is marked and every picture simply shows. A large picture waits on a
   faint tint of its card instead of on nothing. */
img.ld{opacity:0}
img.ldt{transition:opacity var(--dur-reveal) var(--ease-out)}
:is(.appcard,.checkcard,.once .shot,.shot,.rv-mac .screens):has(img.ld){background-color:var(--mist)}
:is(.appcard,.checkcard,.once .shot,.shot){transition:background-color var(--dur-reveal) var(--ease-out)}

/* ---------- cards and app shots lift a little under the pointer (desktop only) ---------- */
@media (hover:hover) and (pointer:fine){
  :is(.once .shot,.appcard,.checkcard,.dlfacts,.stuck div,.keeps div){transition:translate var(--dur-soft) var(--ease-out),box-shadow var(--dur-soft) var(--ease-out),background-color var(--dur-reveal) var(--ease-out)}
  :is(.once .shot,.appcard,.checkcard):hover{translate:0 -4px;box-shadow:0 0 0 1px rgba(35,64,95,.09),0 40px 70px -38px rgba(30,60,100,.55)}
  :is(.dlfacts,.stuck div,.keeps div):hover{translate:0 -2px}
}

/* ---------- one art world: a touch of morning light on Alba ----------
   The postcards (og/*.jpg) are warm and rich; the pale model town is cool. A very soft warm light from the
   upper left lies over each place, and every piece standing on the ground gets a faint contact shadow, so the
   white models sit in the same morning as the postcards. Colour stays on the kept thing; the sky stays cool.
   ?world=pale (shared-head.js) shows the scenes without it. */
.bcity::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;mix-blend-mode:soft-light;
  background:radial-gradient(60% 90% at 4% 62%,rgba(255,210,150,.5),rgba(255,210,150,0) 100%),linear-gradient(180deg,rgba(255,228,196,0) 40%,rgba(255,226,190,.3) 92%);
  -webkit-mask:linear-gradient(180deg,transparent 18%,var(--web-mask-black) 58%);mask:linear-gradient(180deg,transparent 18%,var(--web-mask-black) 58%)}
.bcity .bfar::after{content:"";position:absolute;left:0;right:0;bottom:-6%;height:46%;pointer-events:none;background:linear-gradient(0deg,rgba(255,240,224,.5),rgba(255,240,224,0))}
.bcity .bnear .at::before{content:"";position:absolute;left:10%;right:10%;bottom:-2.5%;height:7%;z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(78,74,70,.24),rgba(78,74,70,.08) 60%,rgba(78,74,70,0))}
.bcity .bnear .at[style*="bottom:"]::before{opacity:.45}   /* boats on the water: a lighter shadow */
.world-pale .bcity::after,.world-pale .bcity .bfar::after,.world-pale .bcity .bnear .at::before,.world-pale .mlight{display:none}

@media (prefers-reduced-motion:reduce){
  .btn,.btn:hover,.btn:active{transform:none}
  img.ldt{transition-duration:.2s}
  :is(.once .shot,.appcard,.checkcard,.dlfacts,.stuck div,.keeps div):hover{translate:none}
}

/* ---------- without a script, nothing waits ----------
   Pieces that arrive on scroll start hidden only when shared-head.js has marked the page .js; without a script
   (or if it fails) every one of them is simply there, in its final place. */
html:not(.js) .obj img{opacity:1;transform:none}
html:not(.js) .obj::after{opacity:1}
html:not(.js) .receipt.print{clip-path:none}
html:not(.js) .il-m{opacity:1}
html:not(.js) .ladder li{opacity:1}
html:not(.js) .door .pip-i{opacity:1;transform:translateX(62%)}
html:not(.js) .stamps em{opacity:.9;transform:rotate(-6deg)}
html:not(.js) .rlines .rline{position:static;opacity:1;margin:0 auto 10px}
html:not(.js) .rscene .nana{opacity:1;left:auto;right:4%}
/* the in-world sign's small line and the week's day names: same quiet look, readable contrast (WCAG AA) */
.post .plate small{color:var(--ink-2)}
/* no one-word last lines in running text (founder rule under the cloud, now everywhere); headlines balance */
p,li,.lede,.sec-p,.il-line{text-wrap:pretty}
.room h2,.sec-h{text-wrap:balance}