/* landing.css — the public landing page (pages/index.html), after site.css.
 *
 * Design direction 01 of the landing-page prototype: "the bookshop that builds
 * itself". The chapter text scrolls on the left while an illustrated shop on
 * the right is pinned and builds itself as you read (landing.js drives it).
 * Then the map of every way to sell, the close, and How it works. The fees
 * are on their own page (pricing.css).
 *
 * Only this page loads this file, after brand.css (fonts, palette, the
 * resets of site.css's generic rules, buttons).
 *
 * Everything here works with scripts off: [data-in] parts of the illustration
 * default to built (--t:1), and the overlays that only make sense in motion
 * are hidden until landing.js marks the root .js.
 */

:root{
  /* the per-chapter "world" tints: hue from --h, these set saturation and
     lightness. Each chapter's hue is drawn at 30% lightness as text: 4.7:1 or
     better on its tint, every hue on the page (WCAG AA). */
  --ws:72%; --wl:95%; --wal:30%; --wml:88%; --tile-s:80%; --tile-l:91%; --icon-l:38%;
  --speed:1; --barh:0px;
  /* the shop: an illustration, so it keeps its own colours in both themes */
  --s-plaster:#f3e4d4; --s-plaster2:#e2c9b2; --s-trim:#2e4b40; --s-trim2:#1f352c; --s-gold:#f2c46d;
  --s-wood:#a26a44; --s-wood2:#7b4c2f; --s-awn:#f4663f; --s-awn2:#fff3e8; --s-walk:#ddd3c9;
  --s-walk2:#c9bdb1; --s-glass:#3b2b26; --s-lit:#ffe3bd; --s-ink:#2c1a14; --s-blue:#3a78d6;
  --scene-dim:none;
}
@media (prefers-color-scheme:dark){
  :root{
    --ws:30%; --wl:12%; --wal:74%; --wml:22%; --tile-s:34%; --tile-l:22%; --icon-l:76%;
    --scene-dim:brightness(.94) saturate(.96);
  }
}
.w{--wbg:hsl(var(--h) var(--ws) var(--wl));--wacc:hsl(var(--h) 62% var(--wal));--wmid:hsl(var(--h) 55% var(--wml))}

/* the five demo covers, as backgrounds where the illustration draws a book */
.c-love{background-image:url(/img/landing/love-stuck.webp)}
.c-fishy{background-image:url(/img/landing/here-fishy-fishy.webp)}
.c-alice{background-image:url(/img/landing/alice-expanded.webp)}
.c-cog{background-image:url(/img/landing/cog-in-the-machine.webp)}
.c-cellist{background-image:url(/img/landing/cellist-and-hockey-player.webp)}
img.cover{display:block;object-fit:cover;height:auto}

@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes wave{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes blink{50%{opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes type{from{width:0}to{width:calc(var(--n,40) * 1ch)}}

/* ── Shared bits ───────────────────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chip{border:1px solid color-mix(in srgb, var(--wacc,var(--fg)) 30%, transparent);background:color-mix(in srgb, var(--surface) 70%, transparent);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:500}
.foot{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:14px}
.foot svg{flex:none;margin-top:3px}
.dsp{font-family:var(--display);letter-spacing:-.01em}
.role{font:700 16px var(--display);color:var(--wacc);letter-spacing:0}
.num{font:500 14px var(--mono);color:var(--muted)}
u{text-decoration-line:underline;text-decoration-thickness:.12em;text-underline-offset:.12em;text-decoration-color:var(--ul,var(--accent))}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.d1{--h:28;background:hsl(var(--h) var(--ws) var(--wl));transition:background calc(.9s / var(--speed)) ease}
.d1-hero{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:center;padding-block:clamp(48px,9vw,110px) clamp(40px,6vw,80px)}
.d1-hero-copy{display:grid;gap:18px;justify-items:start}
.d1-hero h1{font-size:clamp(38px,4.6vw,64px);font-weight:800}
.d1-hero h1 em{font-style:normal;color:var(--accent-ink)}
.d1-hero-copy > p:not(.eyebrow){font-size:clamp(17px,1.5vw,20px);color:var(--muted);max-width:34rem}
.d1-hero-art{position:relative;height:clamp(260px,32vw,420px)}
.d1-hero-art .cover{position:absolute;width:30%;aspect-ratio:2/3;border-radius:6px 10px 10px 6px;box-shadow:0 22px 34px -18px rgba(40,20,10,.6);animation:bob calc(5s / var(--speed)) ease-in-out infinite}
.d1-hero-art .cover:nth-child(1){left:6%;top:16%;rotate:-10deg}
.d1-hero-art .cover:nth-child(2){left:36%;top:2%;rotate:3deg;animation-delay:-1s}
.d1-hero-art .cover:nth-child(3){left:64%;top:18%;rotate:9deg;animation-delay:-2s}
.d1-hero-art .cover:nth-child(4){left:20%;top:52%;rotate:6deg;animation-delay:-3s}
.d1-hero-art .cover:nth-child(5){left:52%;top:56%;rotate:-6deg;animation-delay:-4s}
@media (max-width:760px){.d1-hero{grid-template-columns:minmax(0,1fr)}.d1-hero-art{height:240px;max-width:360px;width:100%;justify-self:center}}

/* ── The bookshop that builds itself ───────────────────────────────────────
   The text scrolls on the left; the stage on the right is sticky. Scroll
   position becomes one number, P (chapter index + progress through it), and
   every piece of the shop reads its own 0..1 value, --t, from that. World
   coordinates are a 1000 x 760 grid; 1 world unit = .1cqw of the scene. */
.build{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(24px,4vw,56px)}
.chapters{grid-column:1;grid-row:1;padding-bottom:40vh}
.stage-col{grid-column:2;grid-row:1;align-self:start;position:sticky;top:var(--barh);height:calc(100vh - var(--barh));display:flex;align-items:center;justify-content:center;z-index:4}
.stage{width:min(100%, calc((100vh - var(--barh) - 150px) * 1000 / 760));display:grid;gap:10px}
/* A chapter is about two thirds of a screen at a desk, not a whole one: the
   next follows soon after the last is read (Richard, 2026-10-07). The shop
   still builds in step, since P is progress through each block, whatever
   its height. */
.chap{min-height:calc(60vh - var(--barh));display:grid;align-content:center;justify-items:start;gap:16px;padding-block:32px}
.chap-head{display:grid;gap:16px;justify-items:start}
.chap h2{font-size:clamp(34px,4vw,52px);font-weight:800}
.chap h2 span{display:block;color:var(--wacc,var(--accent-ink))}
.chap > p:not([class]){font-size:17px;color:var(--muted);max-width:32rem}
.built{display:inline-flex;gap:8px;align-items:center;font:500 12.5px var(--mono);color:var(--wacc,var(--accent-ink));text-transform:uppercase;letter-spacing:.07em;border:1px dashed color-mix(in srgb, var(--wacc,var(--accent-ink)) 50%, transparent);border-radius:999px;padding:5px 12px}
.built svg{width:14px;height:14px;flex:none}
.codeblock{margin:0;font:13px/1.6 var(--mono);background:var(--surface);color:var(--fg);border:1px solid var(--rule);border-radius:12px;padding:14px 16px;overflow-x:auto;max-width:100%}

/* Narrow screens: one column, the stage pinned above the text.
   The headline of the chapter being read sticks just under the stage
   (landing.js measures the stage into --stage-h), so the stage can never sit
   on top of the headline it is illustrating. */
@media (max-width:860px){
  .build{display:block}
  .stage-col{position:relative;top:auto;height:auto;display:block;padding-block:10px 12px;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);background:hsl(var(--h,28) var(--ws) var(--wl));transition:background calc(.9s / var(--speed)) ease;box-shadow:0 12px 16px -14px rgba(0,0,0,.35)}
  .js .stage-col{position:sticky;top:0}
  .stage{width:min(100%, calc(38svh * 1000 / 760));margin-inline:auto;gap:8px}
  .chap{min-height:0;gap:12px;padding-block:20px 32px;align-content:start}
  .chapters{padding-bottom:30vh}
  .chap h2{font-size:clamp(28px,7.4vw,40px)}
  .js .chap-head{position:sticky;top:var(--stage-h,0px);z-index:3;gap:6px;margin-inline:calc(-1 * var(--gutter));padding:10px var(--gutter) 10px;background:hsl(var(--h,28) var(--ws) var(--wl))}
}

/* the status strip under the stage */
.status{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;font-size:13px}
.state{display:inline-flex;align-items:center;gap:7px;font-weight:600;padding:4px 11px;border-radius:999px;background:var(--surface);border:1px solid var(--rule)}
.state i{width:8px;height:8px;border-radius:50%;background:var(--st,#b3a79c);box-shadow:0 0 0 3px color-mix(in srgb, var(--st,#b3a79c) 25%, transparent)}
.pips{display:flex;gap:3px}
.pips b{width:8px;height:6px;border-radius:3px;background:color-mix(in srgb, var(--fg) 14%, transparent);transition:background .3s}
.pips b.on{background:var(--accent)}
.stlabel{color:var(--muted);display:inline-flex;align-items:center;gap:5px}
.stlabel svg{width:14px;height:14px;color:var(--accent-ink)}
.sold{margin-left:auto;color:var(--muted)}
.sold b{color:var(--fg);font:600 14px var(--mono);font-variant-numeric:tabular-nums}
@media (max-width:1200px){.pips{display:none}}
@media (max-width:520px){.stlabel{display:none}}

/* the embed snippet under the stage types itself out */
.snip{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:10px 12px;box-shadow:var(--shadow);min-width:0}
.snip code{font:12px/1.45 var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;min-width:0;flex:1;display:flex;align-items:center}
.snip .typed{display:inline-block;white-space:nowrap;overflow:hidden;color:var(--fg);flex:none;max-width:calc(100% - 10px)}
.snip.typing .typed{animation:type calc(1.6s / var(--speed)) steps(var(--n,40)) both}
.snip .caret{display:inline-block;flex:none;width:7px;height:14px;background:var(--accent);margin-left:2px;animation:blink calc(1s / var(--speed)) steps(1) infinite}
.snip .go{flex:none;width:26px;height:26px;border-radius:50%;background:var(--accent);display:grid;place-items:center}
@media (max-width:860px){.snip{display:none}}

/* ── The scene ─────────────────────────────────────────────────────────── */
.scene{position:relative;width:100%;aspect-ratio:1000/760;border-radius:20px;overflow:hidden;container-type:inline-size;background:var(--bg);box-shadow:var(--shadow);border:1px solid var(--rule);filter:var(--scene-dim);isolation:isolate}
.world{position:absolute;inset:0;transform-origin:0 0;overflow:hidden;will-change:transform}
.o{position:absolute;left:calc(var(--x) * .1%);top:calc(var(--y) * 100% / 760);width:calc(var(--w) * .1%);height:calc(var(--hh) * 100% / 760)}
.q{position:absolute}
.ext{filter:brightness(calc(1 - var(--night,0) * .5)) saturate(calc(1 - var(--night,0) * .3))}

/* scroll-driven effects: each reads --t (0 = not built yet, 1 = built) */
[data-in]{--t:1}
.fx-grow{transform:scaleY(var(--t));transform-origin:50% 100%}
.fx-unroll{transform:scaleY(var(--t));transform-origin:50% 0}
.fx-growx{transform:scaleX(var(--t));transform-origin:0 50%}
.fx-fade{opacity:var(--t)}
.fx-pop{opacity:calc(var(--t) * 3);transform:scale(calc(.3 + .7 * var(--t)))}
.fx-drop{opacity:calc(var(--t) * 4);transform:translateY(calc((1 - var(--t)) * -140%)) rotate(calc((1 - var(--t)) * -14deg))}
.fx-rise{opacity:calc(var(--t) * 3);transform:translateY(calc((1 - var(--t)) * 60%))}
.fx-left{transform:translateX(calc((1 - var(--t)) * -160%))}
.fx-slidel{opacity:calc(var(--t) * 2);transform:translateX(calc((1 - var(--t)) * -90%))}
.fx-slider{opacity:calc(var(--t) * 2);transform:translateX(calc((1 - var(--t)) * 90%))}
.fx-wipe{clip-path:inset(0 calc((1 - var(--t)) * 100%) 0 0)}
.fx-print{clip-path:inset(0 0 calc((1 - var(--t)) * 100%) 0)}
.fx-stamp{opacity:calc(var(--t) * 6);transform:scale(calc(2.4 - 1.4 * var(--t)))}
.fx-card{opacity:var(--t);transform:translateY(calc((1 - var(--t)) * 18px)) rotate(calc((1 - var(--t)) * -5deg))}
.fx-flip{transform:perspective(40cqw) rotateY(calc(var(--t) * 180deg))}

/* sky and weather */
.sky{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,var(--sky1,#cfe8f6),var(--sky2,#fcebd9) 78%)}
.stars{position:absolute;inset:0;z-index:1;opacity:var(--night,0)}
.stars i{position:absolute;width:.35cqw;height:.35cqw;border-radius:50%;background:#fff;animation:twinkle calc(3s / var(--speed)) ease-in-out infinite}
@keyframes twinkle{50%{opacity:.3}}
.sun{position:absolute;z-index:1;left:10%;top:30%;width:6.4%;aspect-ratio:1;border-radius:50%;translate:-50% -50%;background:radial-gradient(circle at 40% 40%,#fff8de,var(--sunc,#ffd36b) 72%);box-shadow:0 0 3cqw 1cqw color-mix(in srgb, var(--sunc,#ffd36b) 50%, transparent)}
.moon{z-index:1;border-radius:50%;background:radial-gradient(circle at 36% 36%,#fffbe8,#e6dfc2 72%);box-shadow:0 0 2.4cqw .6cqw rgba(255,248,220,.35);opacity:var(--night,0)}
.cloud{z-index:1;background:rgba(255,255,255,.92);border-radius:999px;opacity:calc(1 - var(--night,0) * .85);animation:drift calc(26s / var(--speed)) ease-in-out infinite alternate}
.cloud::before,.cloud::after{content:"";position:absolute;background:inherit;border-radius:50%}
.cloud::before{left:16%;bottom:35%;width:40%;height:130%}
.cloud::after{left:48%;bottom:25%;width:30%;height:100%}
.cloud.c2{animation-duration:calc(34s / var(--speed));animation-delay:-8s}
.cloud.c3{animation-duration:calc(30s / var(--speed));animation-delay:-15s}
@keyframes drift{to{translate:5cqw 0}}

/* the street */
.nb{z-index:2;border-radius:.4cqw .4cqw 0 0;box-shadow:inset 0 1.2cqw 0 rgba(0,0,0,.08)}
.nb-l{background:#d4bfad}
.nb-r{background:#b9c3cc}
.nbw{position:absolute;border-radius:.3cqw;background:rgba(255,255,255,.5)}
.nbw::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#ffd89a;opacity:calc(var(--night,0) * var(--on,0))}
.walk{z-index:3;background:repeating-linear-gradient(90deg,var(--s-walk) 0 7.6cqw,var(--s-walk2) 7.6cqw 7.8cqw);box-shadow:inset 0 .5cqw 0 rgba(0,0,0,.06)}
.curb{z-index:3;background:#b2a597}
.lamp-post{z-index:3;background:linear-gradient(90deg,#3b4a45,#26312d);border-radius:.3cqw}
.lamp-head{z-index:3;background:#26312d;border-radius:1cqw 1cqw .4cqw .4cqw}
.lamp-head::after{content:"";position:absolute;left:18%;right:18%;bottom:12%;height:40%;border-radius:.3cqw;background:#fbe7b5}
.glow{z-index:10;pointer-events:none;border-radius:50%;mix-blend-mode:screen;opacity:var(--night,0);background:radial-gradient(circle,rgba(255,216,146,.9) 0,rgba(255,204,128,.35) 34%,rgba(255,190,110,0) 70%)}
.spill{z-index:4;pointer-events:none;opacity:var(--night,0);background:radial-gradient(ellipse at 50% 0,rgba(255,214,150,.8),rgba(255,214,150,0) 70%)}

/* the shop front */
.facade{z-index:5;background:linear-gradient(180deg,var(--s-plaster),var(--s-plaster2))}
.facade::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 3.4cqw,rgba(110,70,40,.05) 3.4cqw 3.55cqw)}
.cornice{z-index:6;background:var(--s-trim);border-radius:.6cqw;box-shadow:0 .7cqw 0 var(--s-trim2)}
.signb{z-index:6;background:var(--s-trim);border:.45cqw solid var(--s-gold);border-radius:.8cqw;display:grid;place-items:center;color:var(--s-gold);font:800 3.4cqw/1 var(--display);letter-spacing:.01em;white-space:nowrap;box-shadow:0 .7cqw 0 var(--s-trim2), 0 0 calc(var(--night,0) * 3cqw) rgba(255,210,130,.6)}
.awning{z-index:7;background:repeating-linear-gradient(90deg,var(--s-awn) 0 3.18cqw,var(--s-awn2) 3.18cqw 6.36cqw);border-radius:.5cqw .5cqw 0 0;box-shadow:inset 0 1.2cqw 0 rgba(0,0,0,.07)}
.awning::after{content:"";position:absolute;left:0;right:0;top:100%;height:1.6cqw;background:radial-gradient(circle at 1.59cqw 0,var(--s-awn) 1.59cqw,transparent calc(1.59cqw + .5px)) 0 0/6.36cqw 1.6cqw repeat-x,radial-gradient(circle at 4.77cqw 0,var(--s-awn2) 1.59cqw,transparent calc(1.59cqw + .5px)) 0 0/6.36cqw 1.6cqw repeat-x;filter:drop-shadow(0 .5cqw .3cqw rgba(0,0,0,.18))}
.bunt{z-index:6}
.bunt svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pen{position:absolute;width:4.2%;height:62%;background:var(--c);clip-path:polygon(0 0,100% 0,50% 100%)}
.winf{z-index:6;background:var(--s-trim);border-radius:.7cqw;box-shadow:0 .6cqw 0 var(--s-trim2)}
.riser{z-index:6;background:var(--s-trim);box-shadow:inset 0 0 0 1.2cqw var(--s-trim2)}
.decal{z-index:7;display:grid;place-items:center}
.decal img{width:100%;height:100%;object-fit:contain}
.doorf{z-index:6;background:var(--s-trim);border-radius:.8cqw .8cqw 0 0;box-shadow:inset 0 0 0 .9cqw var(--s-trim2)}
.doorf .kick{position:absolute;left:14%;right:14%;bottom:5%;height:17%;border:.3cqw solid rgba(255,255,255,.14);border-radius:.3cqw}
.doorf .knob{position:absolute;right:13%;top:60%;width:6%;aspect-ratio:1;border-radius:50%;background:var(--s-gold)}
.sconce{z-index:6;background:#26312d;border-radius:.4cqw .4cqw 1cqw 1cqw}
.sconce::after{content:"";position:absolute;left:20%;right:20%;bottom:14%;height:46%;border-radius:.3cqw;background:#fbe7b5}
.plaque{z-index:6;background:linear-gradient(160deg,#e9c77a,#b98b3a);border-radius:.6cqw;display:grid;place-items:center;align-content:center;gap:.3cqw;color:#3a2a10;font:700 1.35cqw/1 var(--body);text-transform:uppercase;letter-spacing:.04em}
.plaque svg{width:48%;height:auto;stroke-width:2.4}
#world[data-ch="9"] .plaque svg{animation:ring calc(1.2s / var(--speed)) ease-in-out infinite;transform-origin:50% 10%}
@keyframes ring{0%,60%,100%{rotate:0deg}10%,30%{rotate:14deg}20%,40%{rotate:-14deg}}

/* glass: lit from inside, so it stays bright at night */
.glass,.dglass{z-index:8;overflow:hidden;background:var(--s-glass)}
.glass{border-radius:.3cqw}
.dglass{border-radius:.5cqw .5cqw .2cqw .2cqw}
.glass::before,.dglass::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 70% at 50% 35%,#fff4de,var(--s-lit) 55%,#efc288);opacity:var(--lit,.75)}
.glass::after,.dglass::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(115deg,transparent 0 22%,rgba(255,255,255,.16) 22% 30%,transparent 30% 48%,rgba(255,255,255,.09) 48% 52%,transparent 52%)}
.plank{background:linear-gradient(180deg,var(--s-wood),var(--s-wood2));box-shadow:0 .5cqw .6cqw -.1cqw rgba(0,0,0,.35);border-radius:.15cqw}
.ledge{background:linear-gradient(180deg,var(--s-wood),var(--s-wood2))}
.bk,.cover{background-size:cover;background-position:center;border-radius:.15cqw .35cqw .35cqw .15cqw;box-shadow:inset .3cqw 0 0 rgba(0,0,0,.2),0 .5cqw .6cqw -.2cqw rgba(0,0,0,.55)}
.btag{background:var(--s-awn);color:#2c1a14;font:700 1cqw/1 var(--body);border-radius:.3cqw;display:grid;white-space:nowrap;place-items:center;box-shadow:0 .3cqw .5cqw rgba(0,0,0,.3)}
.sp{background:var(--c);border-radius:.2cqw .2cqw .1cqw .1cqw;box-shadow:inset -.25cqw 0 0 rgba(0,0,0,.18)}
.sp::after{content:"";position:absolute;left:0;right:0;top:16%;height:7%;background:rgba(255,255,255,.35)}
.ribbon-w{position:absolute;left:-14%;top:9%;width:52%;height:10%;rotate:-38deg;z-index:4}
.ribbon{width:100%;height:100%;background:var(--s-awn);color:#2c1a14;font:800 1.9cqw/1 var(--display);letter-spacing:.08em;display:grid;place-items:center;box-shadow:0 .4cqw .8cqw rgba(0,0,0,.3)}
.stand .bk{position:absolute;left:0;right:0;top:0;height:86%}
.stand::before,.stand::after{content:"";position:absolute;bottom:0;width:.6cqw;height:30%;background:var(--s-wood2);border-radius:.2cqw}
.stand::before{left:22%;rotate:14deg}.stand::after{right:22%;rotate:-14deg}
.newb{display:grid;place-items:center;width:100%;height:100%;background:var(--s-awn);color:#2c1a14;font:800 1.5cqw/1 var(--display);clip-path:polygon(50% 0,61% 18%,82% 10%,80% 32%,100% 42%,84% 58%,94% 80%,72% 80%,62% 100%,50% 84%,38% 100%,28% 80%,6% 80%,16% 58%,0 42%,20% 32%,18% 10%,39% 18%);animation:spin calc(14s / var(--speed)) linear infinite}
.hp-cord{position:absolute;left:49%;top:0;width:.25cqw;height:34%;background:#2c2c34}
.hp{position:absolute;left:14%;top:30%;width:72%;height:56%;color:#2c2c34}
.hp svg{width:100%;height:100%;stroke-width:3}
.waves{position:absolute;left:78%;top:34%;width:40%;height:44%}
.waves i{position:absolute;inset:0;border:.3cqw solid var(--s-awn);border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;rotate:45deg;animation:ping calc(1.6s / var(--speed)) ease-out infinite}
.waves i:nth-child(2){animation-delay:calc(-.53s / var(--speed))}.waves i:nth-child(3){animation-delay:calc(-1.06s / var(--speed))}
@keyframes ping{from{opacity:1;transform:scale(.4)}to{opacity:0;transform:scale(1.3)}}
.seal{position:absolute;right:-12%;top:-8%;width:52%;aspect-ratio:1;border-radius:50%;background:var(--s-gold);color:#3a2a10;display:grid;place-items:center;font:700 1.05cqw/1 var(--body);font-style:normal;text-transform:uppercase;box-shadow:0 .2cqw .4cqw rgba(0,0,0,.3)}
.penx{background:linear-gradient(90deg,#1f2433 0 80%,var(--s-gold) 80%);border-radius:.3cqw;rotate:-18deg}
.mug{background:linear-gradient(90deg,#f7efe6,#e5d7c7);border-radius:.3cqw .3cqw .9cqw .9cqw}
.mug::before{content:"";position:absolute;left:0;right:0;top:34%;height:22%;background:var(--s-awn)}
.mug::after{content:"";position:absolute;left:90%;top:20%;width:40%;height:48%;border:.55cqw solid #eadfd1;border-radius:50%;border-left-color:transparent}
.steam{position:absolute;left:20%;bottom:100%;width:60%;height:80%}
.steam b{position:absolute;bottom:0;width:.35cqw;height:100%;border-radius:999px;background:rgba(255,255,255,.8);animation:steam calc(2.4s / var(--speed)) ease-in-out infinite}
.steam b:first-child{left:25%}.steam b:last-child{left:65%;animation-delay:calc(-1.2s / var(--speed))}
@keyframes steam{0%{opacity:0;transform:translateY(40%) scaleY(.5)}40%{opacity:.8}100%{opacity:0;transform:translateY(-40%) scaleY(1) rotate(8deg)}}
.bmks{display:flex;gap:10%;align-items:flex-end}
.bmks i{flex:1;height:100%;background:var(--c);clip-path:polygon(0 0,100% 0,100% 100%,50% 86%,0 100%)}
.aud{background:#6b4e9b;border-radius:.6cqw;display:grid;place-items:center;color:#fff}
.aud svg{width:62%;height:62%;stroke-width:2.6}
.bnd-rib{background:var(--s-gold);border-radius:.2cqw}
.ptag2{background:#fff8ec;color:#2c1a14;font:700 1.35cqw/1 var(--body);border-radius:.3cqw;display:grid;place-items:center;box-shadow:0 .3cqw .6cqw rgba(0,0,0,.3);rotate:6deg}
.hang-str{position:absolute;left:30%;right:30%;top:10%;height:18%;border:.2cqw solid #d9c9a8;border-bottom:0;border-radius:40% 40% 0 0}
.hang{position:absolute;left:14%;top:26%;width:72%;height:30%;transform-style:preserve-3d}
.hang .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff8ec;border-radius:.4cqw;display:grid;place-items:center;font:800 1.9cqw/1 var(--display);letter-spacing:.06em;border:.25cqw solid #2c1a14}
.hang .closed{color:#b8321b}
.hang .open{color:#1f7a4a;transform:rotateY(180deg)}

/* pavement props */
.aframe{z-index:9}
.af-board{position:absolute;left:6%;right:6%;top:0;height:80%;background:#2d3432;border:.5cqw solid var(--s-wood);border-radius:.4cqw;color:#f5f1e8;font:600 2.1cqw/1.05 var(--script);display:grid;place-items:center;align-content:center;gap:.4cqw;text-align:center}
.af-board b{font:700 1.2cqw/1 var(--mono);letter-spacing:.02em;color:#ffd08a}
.af-leg{position:absolute;bottom:0;width:.6cqw;height:26%;background:var(--s-wood2)}
.af-leg.l{left:18%;rotate:12deg}.af-leg.r{right:18%;rotate:-12deg}
.stall{z-index:9}
.st-roof{position:absolute;left:0;right:0;top:0;height:18%;background:repeating-linear-gradient(90deg,var(--s-awn) 0 1.88cqw,#fff 1.88cqw 3.76cqw);border-radius:.8cqw .8cqw 0 0;box-shadow:0 .5cqw .5cqw -.3cqw rgba(0,0,0,.3)}
.st-post{position:absolute;top:18%;width:.7cqw;height:50%;background:var(--s-wood2)}
.st-post.l{left:6%}.st-post.r{right:6%}
.st-fascia{position:absolute;left:4%;right:4%;top:18%;height:13%;background:#fff8f0;color:var(--s-ink);font:700 1.35cqw/1 var(--display);display:grid;place-items:center;border-bottom:.3cqw solid var(--s-awn);white-space:nowrap}
.st-books{position:absolute;left:12%;right:12%;top:41%;height:25%;display:flex;gap:6%;align-items:flex-end;justify-content:center}
.st-books .bk{height:100%;aspect-ratio:2/3}
.st-buy{align-self:center;background:var(--s-awn);color:#2c1a14;font:700 1.3cqw/1 var(--body);padding:.5cqw .8cqw;border-radius:999px}
.st-body{position:absolute;left:2%;right:2%;top:66%;height:22%;background:var(--s-wood);border-radius:.4cqw;box-shadow:inset 0 .6cqw 0 rgba(255,255,255,.15)}
.st-wheel{position:absolute;bottom:0;width:14%;aspect-ratio:1;border-radius:50%;background:#3a3a3a;border:.5cqw solid #8a8a8a}
.st-wheel.l{left:14%}.st-wheel.r{right:14%}
.st-flag{position:absolute;right:4%;top:-24%;width:46%;height:22%}
.st-flag::before{content:"";position:absolute;left:0;top:0;width:.4cqw;height:120%;background:var(--s-wood2)}
.st-flag span{position:absolute;left:.4cqw;top:0;right:0;height:62%;background:#2e6f8e;color:#fff;font:700 1.25cqw/1 var(--body);display:grid;place-items:center;clip-path:polygon(0 0,100% 0,88% 50%,100% 100%,0 100%);white-space:nowrap;padding-right:10%}

/* people: no filter layer, so no browser draws a box round them; night darkens the colours instead */
.person{z-index:9}
.person .fig{position:absolute;inset:0;scale:var(--dir,1) 1;animation:bobp calc(1.1s / var(--speed)) ease-in-out infinite}
@keyframes bobp{50%{transform:translateY(-2%)}}
.person .hd{position:absolute;left:31%;top:0;width:38%;aspect-ratio:1;border-radius:50%;background:color-mix(in srgb,var(--sk),#0b0d22 calc(var(--night,0) * 50%));box-shadow:inset 0 2.4cqw 0 color-mix(in srgb,var(--hr),#0b0d22 calc(var(--night,0) * 50%))}
.person .bd{position:absolute;left:14%;right:14%;top:17%;height:47%;border-radius:3cqw 3cqw 1cqw 1cqw;background:color-mix(in srgb,var(--cl),#0b0d22 calc(var(--night,0) * 50%))}
.person .lg{position:absolute;top:60%;width:15%;height:39%;background:color-mix(in srgb,#2f3440,#0b0d22 calc(var(--night,0) * 50%));border-radius:.6cqw;transform-origin:50% 0}
.person .lg.a{left:30%}.person .lg.b{right:30%}
.person.walking .lg.a{animation:legs calc(.45s / var(--speed)) ease-in-out infinite alternate}
.person.walking .lg.b{animation:legs calc(.45s / var(--speed)) ease-in-out infinite alternate-reverse}
@keyframes legs{from{rotate:20deg}to{rotate:-20deg}}

/* deliveries at night */
.deliv{position:absolute;inset:0;width:100%;height:100%;z-index:11;pointer-events:none;overflow:visible}
.deliv .arc{fill:none;stroke:#ffd9a0;stroke-width:2.4;stroke-dasharray:7 8;stroke-linecap:round}
.dev{z-index:11;display:grid;justify-items:center;align-content:start;gap:.5cqw;font:600 1.7cqw/1 var(--body);color:#fff;white-space:nowrap}
.dev .ic{width:62%;aspect-ratio:1;border-radius:1.2cqw;background:#fff8ec;color:#2c1a14;display:grid;place-items:center;box-shadow:0 0 2.4cqw rgba(255,220,160,.7)}
.dev .ic svg{width:64%;height:64%}
.flybk{position:absolute;z-index:12;width:2.8%;aspect-ratio:2/3;translate:-50% -50%;opacity:0}
.buypill{z-index:13;background:var(--s-awn);color:#2c1a14;border-radius:999px;font:700 2.2cqw/1 var(--body);white-space:nowrap;display:grid;place-items:center;box-shadow:0 .6cqw 1.2cqw rgba(0,0,0,.35)}

/* ── Overlays on the stage: the captions, and the closing checkout ─────── */
.co{position:absolute;z-index:18;width:42%;background:var(--surface);color:var(--fg);border:1px solid var(--rule);border-radius:1.6cqw;box-shadow:var(--shadow);padding:1.8cqw 2cqw;display:grid;gap:.9cqw;font-size:max(10.5px,1.9cqw);line-height:1.3;pointer-events:none}
.co-tl{left:3.5%;top:4%}.co-tr{right:3.5%;top:4%}.co-bl{left:3.5%;bottom:4%}.co-br{right:3.5%;bottom:4%}
.co b{font-family:var(--display);font-size:1.12em;letter-spacing:-.01em}
.co-k{font:500 .76em/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.co-row{display:flex;gap:1.4cqw;align-items:center}
.co-col{display:grid;gap:.5cqw;min-width:0}
.co-cv{width:7cqw;flex:none;aspect-ratio:2/3}
.co-buy{justify-self:start;background:var(--accent);color:var(--on-accent);font-weight:700;border-radius:999px;padding:.45em .9em}
.co .code{justify-self:start;font:500 1em var(--mono);border:1px dashed var(--wacc,var(--accent-ink));color:var(--wacc,var(--accent-ink));padding:2px 8px;border-radius:6px}
.co .bars{display:flex;align-items:center;gap:3px;height:4cqw}
.bars b{flex:1;background:var(--wacc,var(--accent));border-radius:2px;height:100%;transform-origin:center;animation:wave calc(1.1s / var(--speed)) ease-in-out infinite}
.stack{display:grid;gap:.8cqw}
.line{display:flex;justify-content:space-between;gap:10px;font-variant-numeric:tabular-nums}
.line.total{font-weight:700;border-top:1px dashed var(--rule);padding-top:8px}
.quote{border-left:3px solid var(--wacc);padding-left:10px;margin:0}
.acts{display:flex;gap:8px;flex-wrap:wrap}
.acts span{font-size:.85em;font-weight:600;padding:.4em .9em;border-radius:999px;border:1px solid var(--rule)}
.acts span.yes{background:var(--wacc,#1f7a4a);color:var(--surface);border-color:var(--wacc,#1f7a4a)}
.flyleaf{background:#fbf3e4;border-radius:.8cqw;padding:1.4cqw 1.6cqw;display:grid;gap:.4cqw;color:#2a2f5a;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.hand{font:600 2.7cqw/1.1 var(--script)}
.hand.sig{justify-self:end;font-size:3.2cqw}
.co .stamp{position:absolute;right:4%;top:7%;border:.35cqw solid #1f7a4a;color:#1f7a4a;border-radius:.6cqw;padding:.4cqw 1cqw;font:800 1.9cqw/1.05 var(--display);text-transform:uppercase;letter-spacing:.04em;text-align:center;rotate:-12deg;background:color-mix(in srgb, var(--surface) 80%, transparent)}
.co-link{display:inline-flex;gap:.6cqw;align-items:center;justify-self:start;background:color-mix(in srgb, var(--accent) 14%, transparent);color:var(--accent-ink);font-weight:700;border-radius:999px;padding:.4em .9em}
.co-link svg{width:1.2em;height:1.2em}
@media (max-width:560px){.co{width:56%}}
.chrome{position:absolute;z-index:20;left:10%;top:5%;width:80%;height:89%;border:.25cqw solid var(--rule);border-radius:1.4cqw;pointer-events:none;box-shadow:var(--shadow)}
.chrome .cb{position:absolute;left:0;right:0;top:0;height:10.2%;background:var(--surface);border-bottom:1px solid var(--rule);border-radius:1.2cqw 1.2cqw 0 0;display:flex;align-items:center;gap:.8cqw;padding:0 1.8cqw}
.chrome .cb i{width:1.1cqw;height:1.1cqw;border-radius:50%;background:var(--rule)}
.chrome .url{margin:0 auto;background:var(--bg);border:1px solid var(--rule);border-radius:999px;padding:.35cqw 2.4cqw;font:500 max(9px,1.6cqw)/1.3 var(--mono);color:var(--muted);white-space:nowrap}
.mback{position:absolute;z-index:21;left:10%;top:14%;width:80%;height:80%;background:rgba(20,14,12,.45);border-radius:0 0 1.4cqw 1.4cqw}
.modal{position:absolute;z-index:23;left:50%;top:56%;width:44%;translate:-50% -50%;background:var(--surface);color:var(--fg);border-radius:1.6cqw;box-shadow:var(--shadow);padding:2.2cqw;display:grid;gap:1.1cqw;font-size:max(9.5px,1.7cqw);line-height:1.3}
.modal .mrow{display:flex;gap:1.4cqw;align-items:center}
.modal .cover{width:6.4cqw;flex:none;aspect-ratio:2/3}
.modal .mprice{margin-left:auto}
.modal .field{border:1px solid var(--rule);border-radius:.8cqw;padding:.8cqw 1cqw;color:var(--muted)}
.modal .pay{background:var(--accent);color:var(--on-accent);border-radius:999px;font-weight:700;text-align:center;padding:.9cqw}
.modal .dbf-d{height:2.6cqw;width:auto;justify-self:center}
.cursor{position:absolute;z-index:24;width:3.6%;opacity:0;translate:-20% -10%;transition:scale .12s}
.cursor svg{width:100%;height:auto;display:block;filter:drop-shadow(0 .3cqw .4cqw rgba(0,0,0,.35))}
.cursor.click{scale:.82}

/* ── One shop. Every way to sell. ──────────────────────────────────────── */
.hubsec{padding-block:24px 64px}
.hubsec h2{font-size:clamp(30px,4vw,48px);font-weight:800;text-align:center;margin-bottom:12px}
.hub{position:relative;aspect-ratio:16/10;max-width:900px;margin:0 auto}
.hub-lines{position:absolute;inset:0;width:100%;height:100%}
.hub-lines line{stroke:var(--muted);stroke-width:.25;stroke-dasharray:1 1;vector-effect:non-scaling-stroke;opacity:.6}
.hub-core{position:absolute;left:50%;top:50%;width:30%;aspect-ratio:1.2;translate:-50% -50%;display:grid;place-items:center}
.hub-nodes{list-style:none;margin:0;padding:0}
.hub-node{position:absolute;translate:-50% -50%;display:grid;justify-items:center;gap:6px;text-align:center}
.hub-ic{width:clamp(34px,5vw,58px);aspect-ratio:1;border-radius:30%;display:grid;place-items:center;background:hsl(var(--h) var(--tile-s) var(--tile-l));color:hsl(var(--h) 60% var(--icon-l));box-shadow:0 12px 20px -12px hsl(var(--h) 50% 25% / .6)}
.hub-ic svg{width:55%;height:55%}
.hub-l{font:600 clamp(11px,1.1vw,14px)/1.15 var(--body);white-space:nowrap}
@media (max-width:520px){.hub-l{white-space:normal;max-width:6.5em}}
/* the shop in the middle of the map */
.mini{position:relative;width:90%;aspect-ratio:1.35;background:#f3e4d4;border-radius:6px 6px 0 0;box-shadow:0 -1px 0 #e2c9b2 inset}
.mn-sign{position:absolute;left:17%;right:17%;top:6%;height:15%;background:#2e4b40;border:2px solid #f2c46d;border-radius:5px;color:#f2c46d;font:800 clamp(7px,1.05vw,13px)/1 var(--display);display:grid;place-items:center;white-space:nowrap;overflow:hidden}
.mn-awn{position:absolute;left:5%;right:5%;top:27%;height:11%;background:repeating-linear-gradient(90deg,#f4663f 0 11px,#fff3e8 11px 22px);border-radius:4px 4px 0 0;transform-origin:50% 0;animation:mnAwn calc(6s / var(--speed)) infinite}
@keyframes mnAwn{0%,6%{transform:scaleY(0)}16%,100%{transform:scaleY(1)}}
.mn-win{position:absolute;left:8%;width:52%;top:45%;bottom:9%;background:#ffe3bd;border:5px solid #2e4b40;border-radius:4px;display:flex;gap:6%;align-items:flex-end;padding:0 6% 9%}
.mn-win i{flex:1;aspect-ratio:2/3;background-size:cover;border-radius:2px;box-shadow:0 3px 5px -2px rgba(0,0,0,.4);animation:mnDrop calc(6s / var(--speed)) infinite both}
.mn-win i:nth-child(2){animation-delay:calc(.15s / var(--speed))}.mn-win i:nth-child(3){animation-delay:calc(.3s / var(--speed))}.mn-win i:nth-child(4){animation-delay:calc(.45s / var(--speed))}
@keyframes mnDrop{0%,14%{transform:translateY(-40px);opacity:0}24%,100%{transform:none;opacity:1}}
.mn-door{position:absolute;right:10%;width:22%;top:45%;bottom:0;background:#2e4b40;border-radius:6px 6px 0 0;display:grid;justify-items:center;align-content:start;padding-top:16%}
.mn-door span{background:#fff8ec;color:#1f7a4a;font:800 9px/1 var(--display);padding:3px 5px;border-radius:3px;letter-spacing:.05em}

/* ── The close, and How it works ───────────────────────────────────────── */
.close{padding-block:72px 56px;text-align:center;background:var(--bg)}
.close .wrap{display:grid;gap:14px}
.close h2{font-size:clamp(30px,4vw,48px);font-weight:800}
.close .wrap > p{color:var(--muted);font-size:18px}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;text-align:left;margin-top:36px}
.pillars h3{font-size:22px;margin-bottom:6px}
.pillars p{color:var(--muted);font-size:15px}
.how{margin-top:56px;display:grid;gap:20px;justify-items:center}
.how h2{font-size:clamp(26px,3vw,36px)}
.how ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;text-align:left;counter-reset:how;width:100%}
.how li{counter-increment:how;background:var(--surface);border:1px solid var(--rule);border-radius:16px;padding:20px;display:grid;gap:6px;align-content:start}
.how li::before{content:counter(how);width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--on-accent);font:700 15px/30px var(--display);text-align:center}
.how li b{font:700 18px var(--display)}
.how li span{color:var(--muted);font-size:15px}
@media (max-width:760px){.pillars,.how ol{grid-template-columns:minmax(0,1fr)}}
.landing .how-pricing{color:var(--muted);font-size:15px}
.landing main .small{font-size:13px;color:var(--muted);max-width:44rem;margin:0 auto;padding-block:28px 48px;text-align:center}

/* ── The section pager ─────────────────────────────────────────────────── */
.pager{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));translate:-50% 0;z-index:32;display:flex;align-items:center;gap:4px;background:var(--surface);color:var(--fg);border:1px solid var(--rule);border-radius:999px;padding:4px;box-shadow:var(--shadow);max-width:calc(100% - 32px)}
.pager[hidden]{display:none}
.pager{transition:translate .25s ease,opacity .25s ease,visibility 0s}
/* at the end of the page the pager slides away rather than cover the last words */
.pager.tucked{translate:-50% calc(100% + 40px);opacity:0;visibility:hidden;pointer-events:none;transition:translate .25s ease,opacity .25s ease,visibility 0s .25s}
.pdots{display:flex}
.pg-dot{width:24px;height:24px;border:0;padding:0;background:none;cursor:pointer;display:grid;place-items:center}
.pg-dot i{width:10px;height:10px;border-radius:50%;background:hsl(var(--h) 55% 60% / .45);transition:transform .25s,background .25s}
.pg-dot.pg-x i{background:color-mix(in srgb,var(--fg) 22%,transparent);border-radius:3px}
.pg-dot[aria-current="true"] i{background:hsl(var(--h) 60% 48%);transform:scale(1.4)}
.pg-dot.pg-x[aria-current="true"] i{background:var(--fg)}
.pname{font-size:13px;white-space:nowrap;min-width:13ch;text-align:center;padding-inline:4px}
.pg-arrow{border:0;background:none;color:inherit;font-size:22px;line-height:1;width:44px;height:44px;border-radius:50%;cursor:pointer;display:grid;place-items:center}
.pg-arrow:hover{background:var(--rule)}
@media (max-width:860px){.pdots{display:none}}

/* ── Without the script ────────────────────────────────────────────────────
   The shop shows finished, by day, as a picture. What only makes sense in
   motion — the captions that come and go, the night-time deliveries, the
   closing checkout, the live counter — waits for landing.js. */
html:not(.js) .co,html:not(.js) .chrome,html:not(.js) .mback,html:not(.js) .modal,
html:not(.js) .cursor,html:not(.js) .dev,html:not(.js) .flybk,html:not(.js) .buypill,
html:not(.js) .deliv,html:not(.js) .status,html:not(.js) .snip .caret{display:none}
/* and the chapters are as long as their words, not a screen each */
html:not(.js) .chap{min-height:0}
html:not(.js) .chapters{padding-bottom:48px}

/* ── Reduced motion: nothing loops; the scroll-driven shop steps between
   states (landing.js) instead of moving. ─────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .landing *,.landing *::before,.landing *::after{animation:none!important;transition:none!important}
}
:root[data-motion="off"] *,:root[data-motion="off"] *::before,:root[data-motion="off"] *::after{animation:none!important;transition:none!important}