/* ============================================================================
   The Sharehouse Generation Report 2026: homepage brand kit layer, 27 Oct 2026.

   Brings the report into the same family as the 26 Oct homepage and the feature
   pages (docs/brand-kit-home.md; tokens lifted from src/styles/homepage.css,
   lab-home.css, lab-folk.css and feature-kit.css). The page sits outside the
   Astro layout, so the tokens are ported here rather than imported.

   VISUAL ONLY. Every figure, quote, source line and heading is untouched; this
   file only restyles. It loads after styles.css and wins on source order, so the
   V3 rules stay readable underneath it.

   What changes:
   - Cream grounds (#fff6ed, #ffeedd) in place of the grey band and the four dark
     bands (And yet, the author band, the mid-page banner, two source slides,
     the footer). The kit is warm and light; nothing is a dark surface any more.
   - Cards are the kit's cream to card gradient, larger radii, soft warm shadow.
   - The big proof figures are Homerun orange, as on the homepage's report block.
   - Respondent quotes sit on paper notes (yellow, pink, blue), taped.
   - Section labels are sentence case, the kit's kicker style.
   - Header gets the site's ink "Get started free" pill; footer goes cream.
   ========================================================================= */

:root{
  --kit-cream:#fff6ed;
  --kit-cream-2:#ffeedd;
  --kit-card:#fffaf4;
  --kit-page:#fffdfa;
  --kit-paper-yellow:#fff1a8;
  --kit-paper-pink:#ffd9d2;
  --kit-paper-blue:#d6e9f8;
  --kit-ease:cubic-bezier(0.16, 1, 0.3, 1);
  --kit-shadow:0 30px 60px -40px rgb(120 60 10 / 30%), 0 0 0 1px rgb(36 33 30 / 5%);
  --kit-radius:1.5rem;
  --accent-hover:var(--orange-600);

  --background-1:var(--kit-page);
  --background-2:var(--kit-cream);
  --border:color-mix(in srgb, var(--neutral-900) 10%, transparent);
}

html{overflow-x:clip}
body{background:var(--kit-page)}
.band-2{background:var(--kit-cream)}

/* ---- type: the homepage's section headline and kicker ---------------- */
.sec-head h2,.headrow h2,#why .why-pin h2,.wave h2,.explorer h3,.side h3,.tenurepanel h2{
  font-size:clamp(2rem, 3.6vw, 3rem); line-height:1.05; letter-spacing:-.025em; text-wrap:balance;
}
.side h3[style]{font-size:clamp(1.75rem, 3vw, 2.5rem) !important; line-height:1.08 !important; letter-spacing:-.025em}
.eyebrow,.contents .contents-h,.tenurepanel .ladderhead,.slide .kick,.dl-k,.sliderwrap label,.drawer-label{
  text-transform:none; letter-spacing:0; font-size:.875rem; font-weight:600;
}
.eyebrow,.contents .contents-h,.tenurepanel .ladderhead,.slide .kick,.dl-k{color:var(--accent-hover)}
/* the ink-coloured section labels (h3-sized "The churn", "Your city") */
.sec-head .eyebrow{color:var(--accent-hover)}
.about-grid .eyebrow{color:var(--accent-hover)}

/* ---- header: the site header's ink pill beside the hamburger ---------- */
.topbar{background:color-mix(in srgb, var(--kit-page) 88%, transparent)}
.topbar-actions{display:flex; align-items:center; gap:var(--space-12)}
.topbar-cta{
  display:inline-flex; align-items:center; padding:.625rem 1.125rem; border-radius:var(--radius-full);
  background:var(--neutral-900); color:var(--neutral-50); font-weight:600; font-size:.9375rem;
  line-height:1.25rem; letter-spacing:-.02em; text-decoration:none; white-space:nowrap;
  transition:background-color 180ms var(--kit-ease);
}
.topbar-cta:hover{background:color-mix(in srgb, var(--neutral-900) 84%, var(--neutral-50))}
.burger{border-color:transparent}
.burger:hover{border-color:var(--border)}
@media (max-width:30rem){
  .brand small{display:none}
  .topbar-cta{padding:.5rem .875rem; font-size:.875rem}
}

/* ---- buttons: the homepage pill, orange primary ----------------------- */
.btn{transition:box-shadow 180ms var(--kit-ease), border-color 180ms var(--kit-ease), background-color 180ms var(--kit-ease)}
.btn-secondary{background:var(--kit-page)}
.textlink{
  align-self:center; color:var(--text-primary); font-weight:600; text-decoration:underline;
  text-decoration-color:var(--orange-300); text-underline-offset:.25rem; text-decoration-thickness:.125rem;
}
.textlink:hover{text-decoration-color:var(--accent)}

/* ---- hero: the feature-page warm wash -------------------------------- */
.hero.warm{background:linear-gradient(180deg, #ffe9d4 0%, var(--kit-cream) 55%, var(--kit-page) 100%)}
.hero.warm::before{opacity:.45}
.hero-display .hl{color:var(--accent-hover)}

/* ---- cards: cream to card, rounded, soft warm shadow ------------------ */
.stat,.group,.gapwrap,.citypanel,.wavecard,.dl,.srccard,.chip{
  background:linear-gradient(180deg, var(--kit-cream) 0%, var(--kit-card) 100%);
  border-color:transparent; border-radius:var(--kit-radius); box-shadow:var(--kit-shadow);
}
.band-2 .stat,.band-2 .group,.band-2 .gapwrap,.band-2 .citypanel,.band-2 .wavecard,.band-2 .dl,.band-2 .srccard,
.explorer .gapwrap,.explorer .citypanel{
  background:linear-gradient(180deg, #fffdfa 0%, var(--kit-card) 100%);
}
.dl:hover{border-color:transparent; box-shadow:0 30px 60px -32px rgb(120 60 10 / 40%), 0 0 0 1px rgb(214 100 6 / 35%)}
.aside-note,.tenurepanel,.reframe-panel,.bigstat{
  background:var(--kit-cream-2); border-color:transparent; border-radius:1.75rem;
}
.tenurepanel .rung{border-color:color-mix(in srgb, var(--orange-300) 45%, transparent)}
.slot{background:var(--kit-cream); border-color:var(--orange-200)}
.copybtn{background:var(--kit-page); border-color:var(--border)}
.key,.methodline,.callout{border-inline-start-color:var(--accent)}

/* ---- the big orange proof figures ------------------------------------ */
#gap .stat .num,.aside-note .big,.bigstat-n,.slide .n,.srccard .n{color:var(--accent)}
.stat .num{color:var(--accent)}
.fact .n,.group .gnum{color:var(--accent-hover)}
.slide .n.need{color:var(--text-primary)}

/* ---- the tenure explorer band ---------------------------------------- */
.explorer{background:var(--kit-cream); border-block-color:transparent}

/* ---- AND YET: the dark band, now a warm cream one --------------------- */
.turn{background:var(--kit-cream-2); color:var(--text-primary)}
.turn .eyebrow{color:var(--accent-hover)}
.turn h2,.turn h3{color:var(--text-primary)}
.turn .sec-head p{color:var(--text-secondary)}
.turn .key{border-color:var(--accent); color:var(--text-primary)}
.turn .stat{background:linear-gradient(180deg, #fffdfa 0%, var(--kit-card) 100%); border-color:transparent}
.turn .stat .num{color:var(--accent)} .turn .stat .lbl{color:var(--text-secondary)}
.turn .src,.turn .src a{color:var(--text-muted)}
.turn .copybtn{background:var(--kit-page); border-color:var(--border); color:var(--text-secondary)}
.turn .gapwrap{background:linear-gradient(180deg, #fffdfa 0%, var(--kit-card) 100%); border-color:transparent}
.turn .chart .grid-l{stroke:color-mix(in srgb, var(--neutral-900) 10%, transparent)}
.turn .chart .axis-t{fill:var(--neutral-500)}
.turn .chart .lab{fill:var(--neutral-900)} .turn .chart .lab-sub{fill:var(--neutral-600)}
.turn .chart .ln-c{stroke:var(--orange-500)} .turn .chart .dot-c{fill:var(--orange-500)}
.turn .chart .ln-d{stroke:var(--neutral-900)} .turn .chart .dot-d{fill:var(--neutral-900)}
.turn .chart .ln-e{stroke:var(--neutral-400)} .turn .chart .dot-e{fill:var(--neutral-400)}
.turn .legend span{color:var(--text-secondary)}
.turn .readout div,.turn .readout i{color:var(--text-muted)} .turn .readout b{color:var(--text-primary)}
.turn .charttable th,.turn .charttable td{border-color:var(--border)}
.turn .charttable > summary{color:var(--text-secondary)}
.turn .ctip{background:var(--neutral-900); color:var(--neutral-50)}
.turn .pending{background:color-mix(in srgb, var(--orange-300) 30%, transparent); color:var(--orange-800)}
.turn .sec-icon{color:var(--orange-700)} .turn .sec-icon .fl{fill:var(--orange-200)} .turn .sec-icon .fl2{fill:var(--orange-100)}
.qcard{background:var(--kit-card); border-color:transparent; box-shadow:var(--kit-shadow)}
.qcard p{color:var(--text-primary)} .qcard .who{color:var(--text-muted)}

/* ---- quotes on paper notes ------------------------------------------ */
/* the big one: a yellow note, taped, slightly askew, as on the homepage */
.bigquote{
  position:relative; max-width:52rem; margin-inline:auto; padding:var(--space-64) var(--space-64) var(--space-48);
  background:var(--kit-paper-yellow); border-radius:.25rem; rotate:-1.25deg;
  box-shadow:0 1px 0 rgb(36 33 30 / 6%), 0 24px 40px -22px rgb(36 33 30 / 40%);
}
.bigquote::before{
  content:""; position:absolute; top:-.75rem; left:50%; width:6rem; height:1.5rem; translate:-50% 0; rotate:3deg;
  background:rgb(255 255 255 / 62%); box-shadow:0 1px 2px rgb(36 33 30 / 12%);
}
.bigquote blockquote{font-size:clamp(1.75rem, 4.2vw, 3.25rem); color:var(--neutral-900)}
.bigquote cite{color:var(--neutral-700); text-transform:none; letter-spacing:0}
@media (max-width:47.9375rem){
  .bigquote{padding:var(--space-40) var(--space-24) var(--space-32); rotate:-.75deg; margin-block:var(--space-80)}
}

/* pull quotes in the chart panels: a pink note under the chart */
.pullquote{
  position:relative; border:0; margin-block-start:var(--space-40); padding:var(--space-32) var(--space-32) var(--space-24);
  background:var(--kit-paper-pink); border-radius:.25rem; rotate:.75deg;
  box-shadow:0 1px 0 rgb(36 33 30 / 6%), 0 18px 30px -20px rgb(36 33 30 / 40%);
}
.turn .pullquote{background:var(--kit-paper-blue); rotate:-.75deg; border:0}
.pullquote::before{
  content:""; position:absolute; top:-.625rem; left:2rem; width:4.5rem; height:1.25rem; rotate:-3deg;
  background:rgb(255 255 255 / 62%); box-shadow:0 1px 2px rgb(36 33 30 / 12%);
}
.pullquote blockquote,.turn .pullquote blockquote{color:var(--neutral-900)}
.pullquote figcaption,.turn .pullquote figcaption{color:var(--neutral-700); text-transform:none; letter-spacing:0}

/* the group quotes: a small yellow slip at the foot of each card */
.gquote{
  position:relative; border:0; margin-block-start:auto; padding:var(--space-24) var(--space-24) var(--space-16);
  background:var(--kit-paper-yellow); border-radius:.25rem; rotate:-.75deg;
  box-shadow:0 1px 0 rgb(36 33 30 / 6%), 0 12px 22px -16px rgb(36 33 30 / 40%);
}
.group:nth-child(2) .gquote{background:var(--kit-paper-blue); rotate:.75deg}
.gquote figcaption{color:var(--neutral-700); text-transform:none; letter-spacing:0}
/* the cards put the quote at the foot; give it air above */
.group p + .gquote{margin-block-start:var(--space-24)}

/* ---- the mid-page banner: a cream card, not a dark slab --------------- */
.banner .panel{
  background:linear-gradient(180deg, var(--kit-cream-2) 0%, var(--kit-cream) 100%); color:var(--text-primary);
  border-radius:1.75rem; box-shadow:var(--kit-shadow);
}
.banner .eyebrow{color:var(--accent-hover)}
.banner h2{color:var(--text-primary); font-size:clamp(1.75rem, 3vw, 2.5rem); line-height:1.08; letter-spacing:-.025em}
.banner p{color:var(--text-secondary)}

/* ---- the source slides: all warm, no dark cards ------------------------ */
.why-pin{background:var(--kit-page)}
.slide{border-block-start-color:color-mix(in srgb, var(--orange-300) 40%, transparent)}
.slide.s-a{background:var(--kit-cream)}
.slide.s-b{background:var(--kit-cream-2); color:var(--text-primary)}
.slide.s-c{background:var(--kit-card)}
.slide.s-d{background:var(--orange-100)}
.slide.s-e{background:var(--kit-page)}
.slide.s-f{background:var(--kit-cream-2); color:var(--text-primary)}
.slide.s-b .kick,.slide.s-f .kick{color:var(--accent-hover)}
.slide.s-b .src,.slide.s-f .src,.slide.s-b .src a,.slide.s-f .src a{color:var(--text-muted)}
.slide.s-b .n,.slide.s-f .n{color:var(--accent)}
.slide.s-b .stack-count,.slide.s-f .stack-count{color:var(--text-muted)}
.slide.s-d .n{color:var(--orange-700)}

/* ---- the conclusion -------------------------------------------------- */
#conclusion.band-2{background:var(--kit-cream)}
.conclusion .big-q{color:var(--accent-hover)}

/* ---- author band: cream, the portrait as a rounded card ---------------- */
.authorband{background:var(--kit-cream-2); color:var(--text-primary)}
.authorband .portrait{border:0; box-shadow:0 30px 60px -30px rgb(120 60 10 / 35%), 0 0 0 .375rem var(--kit-page)}
.authorband .eyebrow{color:var(--accent-hover)}
.authorband h2{color:var(--text-primary)}
.authorband .role{color:var(--accent-hover)}
.authorband p{color:var(--text-secondary)}
.authorband .founder-note{color:var(--text-primary); border-inline-start-color:var(--accent)}
.authorband a{color:var(--orange-700)}
.authorband .src{color:var(--text-muted)}

/* ---- FAQ: the kit's one column, plus icons ---------------------------- */
.faq summary::after{color:var(--neutral-900); font-weight:400}

/* ---- about band and footer: the homepage's cream footer ---------------- */
.about-band{background:var(--kit-page)}
footer{background:var(--kit-cream); color:var(--text-secondary); border-block-start:0}
footer a{color:var(--text-primary)}
footer a:hover{color:var(--accent-hover)}
footer h4{color:var(--text-primary); font-size:1.125rem}
footer .wordmark{color:var(--text-primary); font-size:clamp(1.75rem, 3vw, 2.25rem); line-height:1.08; letter-spacing:-.025em; display:inline-block; padding:0}
footer .wordmark em{color:var(--accent-hover)}
footer .fine{color:var(--text-secondary)}

/* ---- drawer: the site drawer stays ink, the CTA stays orange ----------- */
.drawer .button-wrapper .btn{width:100%; justify-content:center}

/* ---- reveal: the brand curve, and nothing moves under reduced motion ---- */
.js .reveal{transition:opacity var(--motion-slow, 520ms) var(--kit-ease), transform var(--motion-slow, 520ms) var(--kit-ease)}
@media (prefers-reduced-motion:reduce){
  .bigquote,.pullquote,.gquote{rotate:none}
  .topbar-cta,.btn,.dl{transition:none}
}

/* ---- small fixes after the first screenshot pass ---------------------- */
/* .turn .sec-head p outranks .turn .eyebrow and .turn .key */
.turn .sec-head .eyebrow{color:var(--accent-hover)}
.turn .sec-head .key{color:var(--text-primary)}
/* rent maths cells: cream, not grey */
.rrcell{background:var(--kit-cream); border-radius:1rem}
.rrcell.hot{background:var(--kit-cream-2); border-color:transparent}
/* the tenure explorer's figure card */
.exp-out{
  background:linear-gradient(180deg, #fffdfa 0%, var(--kit-card) 100%);
  border-color:transparent; border-radius:var(--kit-radius); box-shadow:var(--kit-shadow);
}
.exp-big{color:var(--accent)}

/* ============================================================================
   Round two, 27 Oct 2026: editorial, illustrated, alive.

   Still VISUAL ONLY. Chapter numbers come from data-chap through ::before, so
   they add no text to the document; the cast are alt="" and the slide pictures
   are aria-hidden. Every animation ends on the static state, and under
   prefers-reduced-motion nothing moves (block at the end of this file).
   One face, once: galah, possum, keys, kookaburra, Hills hoist, wombat,
   magpie, ibis and the wheelie bin each appear a single time.
   ========================================================================= */

/* ---- hero: the street goes up house by house, then the lights come on ---- */
.streetscape .hs{transform-box:fill-box; transform-origin:50% 100%;
  animation:hs-rise .9s var(--kit-ease) both; animation-delay:calc(.25s + var(--i) * .11s)}
.streetscape .hs .win{animation:hs-light .5s ease both, winflick 7s ease-in-out infinite;
  animation-delay:calc(1.05s + var(--i) * .11s), calc(3s + var(--i) * .9s)}
@keyframes hs-rise{from{transform:translateY(100%) scaleY(.6); opacity:0} 60%{opacity:1} to{transform:none; opacity:1}}
@keyframes hs-light{from{fill:#fcb26d} to{fill:#fff6ed}}

/* ---- chapter openers: a big drawn numeral above the kicker ---------------- */
[data-chap]::before{
  content:attr(data-chap); display:block; margin-block-end:var(--space-12);
  font-size:clamp(3.75rem, 7vw, 6.25rem); font-weight:600; line-height:.82; letter-spacing:-.06em;
  font-variant-numeric:tabular-nums lining-nums;
  color:transparent; -webkit-text-stroke:2px var(--orange-400); paint-order:stroke;
}
.why-pin .eyebrow[data-chap]::before{
  display:inline-block; margin:0 .5rem 0 0; font-size:inherit; line-height:inherit; letter-spacing:0;
  color:var(--accent); -webkit-text-stroke:0;
}
#faq h3[data-chap]::before{margin-block-end:var(--space-16)}
.sec-head .eyebrow[data-chap],.side .eyebrow[data-chap]{margin-block-end:var(--space-12)}
/* the old line icons give way to the cast */
.sec-icon{display:none !important}

/* ---- the cast ------------------------------------------------------------ */
.mascot{display:block; height:auto; pointer-events:none; user-select:none;
  filter:drop-shadow(0 16px 18px rgb(120 60 10 / 16%))}
.sec-head{position:relative}
.mascot--side{position:absolute; inset-block-start:0; inset-inline-start:calc(100% + clamp(2rem, 6vw, 7rem));
  width:clamp(8rem, 11vw, 10.5rem); rotate:5deg}
.mascot--float{float:right; width:clamp(5.5rem, 8vw, 7.5rem); margin:0 0 var(--space-16) var(--space-16); rotate:-5deg}
.tenurepanel .mascot--float{rotate:8deg}
.mascot--magpie{rotate:-4deg}
.mascot--hills-hoist{rotate:-3deg}
@media (max-width:74.9375rem){
  .mascot--side{inset-inline-start:auto; inset-inline-end:calc(var(--space-24) * -1); width:7.5rem}
  .sec-head:has(.mascot--side){padding-inline-end:6rem}
}
@media (max-width:61.9375rem){
  .mascot--side{position:static; float:right; width:5.75rem; margin:0 0 var(--space-12) var(--space-12)}
  .sec-head:has(.mascot--side){padding-inline-end:0}
  .mascot--float{width:5.75rem}
}
/* each one arrives like a sticker being pressed on */
.js .reveal .mascot,.js .stag .mascot{opacity:0; transform:scale(.7) rotate(-10deg)}
.js .reveal.in .mascot,.js .stag.in .mascot,.js .in .mascot{
  animation:stick-on .8s cubic-bezier(.34, 1.56, .64, 1) .25s both}
@keyframes stick-on{from{opacity:0; transform:scale(.7) rotate(-10deg)} to{opacity:1; transform:none}}

/* ---- the five outside figures: number left, its picture right ------------ */
.slide .shell{display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr); column-gap:var(--space-64); align-items:center}
.slide-in{position:relative}
.slide-viz{width:100%; max-width:26rem; height:auto; justify-self:center; overflow:visible}
.slide .n{font-size:clamp(5rem, 15vw, 13rem)}
.stack-count{font-size:.875rem; color:var(--orange-700)}
/* narrower screens: the picture sits on the number's line, top right, and the copy keeps its full width */
@media (max-width:61.9375rem){
  .slide .shell{display:block; position:relative}
  .slide-viz{position:absolute; inset-block-start:2.5rem; inset-inline-end:var(--margin); width:10rem; max-width:none}
}
@media (max-width:30rem){
  .slide-viz{width:6.25rem; inset-block-start:3rem}
}
.vz-base{stroke:var(--neutral-800); stroke-width:3; stroke-linecap:round}
.vz-old{fill:var(--orange-200)}
.vz-hot{fill:var(--orange-500)}
.vz-dash{stroke:var(--neutral-800); stroke-width:2; stroke-dasharray:6 7; opacity:.55}
.vz-cold{fill:var(--orange-200)}
.slide.s-b .vz-cold,.slide.s-f .vz-cold{fill:color-mix(in srgb, var(--orange-300) 55%, var(--kit-cream-2))}
.vz-h,.vz-p{fill:var(--orange-500)}
.vz-track{fill:none; stroke:var(--orange-100); stroke-width:22}
.slide.s-c .vz-track{stroke:var(--kit-cream-2)}
.vz-ring{fill:none; stroke-width:22; stroke-linecap:butt; transform:rotate(-90deg); transform-box:fill-box; transform-origin:center;
  stroke-dasharray:calc(var(--c) * var(--p)) var(--c)}
.vz-ring-old{stroke:var(--neutral-400)}
.vz-ring-hot{stroke:var(--orange-500)}
.vz-arrow{fill:none; stroke:var(--neutral-800); stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.vz-tick{stroke:var(--neutral-800); stroke-width:2; stroke-linecap:round; opacity:.6}
.vz-span{stroke:var(--orange-500); stroke-width:6; stroke-linecap:round}
.vz-dot-old{fill:var(--orange-100); stroke:var(--neutral-800); stroke-width:2.5}
.vz-dot-hot{fill:var(--orange-500)}
.slide.s-d .vz-dot-old{fill:var(--kit-page)}

/* drawn in when the slide arrives (script.js adds .in to the slide) */
.js .slide .vz-grow .vz-hot,.js .slide .vz-bar{transform-box:fill-box; transform-origin:50% 100%}
.js .slide.in .vz-bar{animation:vz-up .9s var(--kit-ease) both}
.js .slide.in .vz-grow .vz-hot{animation:vz-up .9s var(--kit-ease) .55s both}
.js .slide.in .vz-dash{animation:vz-fade .6s ease .9s both}
.js .slide.in .vz-h{animation:vz-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay:calc(.2s + var(--k) * .06s); transform-box:fill-box; transform-origin:50% 100%}
.js .slide.in .vz-p{animation:vz-pop .45s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay:calc(.15s + var(--k) * .018s); transform-box:fill-box; transform-origin:50% 100%}
.js .slide.in .vz-ring{animation:vz-ring 1.3s var(--kit-ease) both}
.js .slide.in .vz-ring-hot{animation-delay:.45s}
.js .slide.in .vz-move{animation:vz-slide 1.1s var(--kit-ease) .35s both}
.js .slide.in .vz-span{animation:vz-fade .5s ease 1.1s both}
@keyframes vz-up{from{transform:scaleY(0)} to{transform:none}}
@keyframes vz-fade{from{opacity:0}}
@keyframes vz-pop{from{transform:scale(0); opacity:0} to{transform:none; opacity:1}}
@keyframes vz-ring{from{stroke-dasharray:0 var(--c)}}
@keyframes vz-slide{from{transform:translateX(-48px)}}

/* ---- big figures: steady width while they count (script.js) -------------- */
.stat .num,.group .gnum,.fact .n,.aside-note .big{font-variant-numeric:tabular-nums lining-nums}

/* ---- chapter dock: a slim contents rail along the foot, desktop only ----- */
.dock{
  position:fixed; z-index:30; inset-block-end:1.25rem; inset-inline-start:50%; translate:-50% 1rem;
  display:none; align-items:center; gap:.25rem; padding:.375rem;
  background:color-mix(in srgb, var(--kit-card) 90%, transparent); backdrop-filter:blur(10px);
  border-radius:999px; box-shadow:0 18px 40px -22px rgb(120 60 10 / 45%), 0 0 0 1px rgb(36 33 30 / 7%);
  opacity:0; pointer-events:none; transition:opacity .35s var(--kit-ease), translate .35s var(--kit-ease);
}
@media (min-width:64rem){.dock{display:flex}}
.dock.show{opacity:1; translate:-50% 0; pointer-events:auto}
.dock a{
  display:inline-flex; align-items:center; justify-content:center; min-width:2.25rem; height:2.25rem; padding-inline:.5rem;
  border-radius:999px; text-decoration:none; color:var(--neutral-600); font-size:.8125rem; font-weight:600;
  font-variant-numeric:tabular-nums; white-space:nowrap;
  transition:background-color .25s var(--kit-ease), color .25s var(--kit-ease), padding .25s var(--kit-ease);
}
.dock a::before{content:attr(data-n)}
.dock a:hover{background:var(--kit-cream-2); color:var(--neutral-900)}
.dock a.on{background:var(--accent); color:#fff; padding-inline:.875rem}
.dock a.on::after{content:attr(data-label); margin-inline-start:.5rem}
.toast{z-index:40}

/* ---- the close: centred, two of the cast either side, a note of promises -- */
.close .wave{grid-template-columns:1fr; justify-items:center; text-align:center; gap:var(--space-48)}
.close .wave > .reveal:first-child{position:relative; max-width:44rem}
.close h2{font-size:clamp(2.5rem, 5vw, 4rem); line-height:1; letter-spacing:-.03em}
.close .lede{margin-inline:auto}
.close .button-wrapper{justify-content:center; flex-wrap:wrap}
.close-cast{position:absolute; inset:0; pointer-events:none}
.close-st{position:absolute; inset-block-start:10%; width:clamp(6rem, 10vw, 11rem)}
.close-st--l{inset-inline-end:calc(100% + clamp(1rem, 3vw, 2.5rem)); rotate:-8deg}
.close-st--r{inset-inline-start:calc(100% + clamp(1rem, 3vw, 2.5rem)); rotate:8deg}
.close .wavecard{
  position:relative; max-width:36rem; text-align:start; background:var(--kit-paper-blue); border-radius:.25rem;
  rotate:-.75deg; padding:var(--space-40) var(--space-40) var(--space-32);
  box-shadow:0 1px 0 rgb(36 33 30 / 6%), 0 24px 40px -24px rgb(36 33 30 / 40%);
}
.close .wavecard::before{
  content:""; position:absolute; top:-.75rem; left:50%; width:5.5rem; height:1.375rem; translate:-50% 0; rotate:-2deg;
  background:rgb(255 255 255 / 62%); box-shadow:0 1px 2px rgb(36 33 30 / 12%);
}
.close .wavecard ul{color:var(--neutral-800)}
@media (max-width:61.9375rem){
  .close-cast{position:static; display:flex; justify-content:center; gap:var(--space-24); margin-block-end:var(--space-24)}
  .close-st{position:static; width:5.5rem}
}
@media (max-width:47.9375rem){.close .wavecard{padding:var(--space-32) var(--space-24) var(--space-24)}}

/* ---- reduced motion: everything is already where it ends up -------------- */
@media (prefers-reduced-motion:reduce){
  .streetscape .hs,.streetscape .hs .win{animation:none}
  .js .reveal .mascot,.js .stag .mascot{opacity:1; transform:none; animation:none !important}
  .js .slide.in .vz-bar,.js .slide.in .vz-grow .vz-hot,.js .slide.in .vz-dash,.js .slide.in .vz-h,
  .js .slide.in .vz-p,.js .slide.in .vz-ring,.js .slide.in .vz-move,.js .slide.in .vz-span{animation:none}
  .dock,.dock a{transition:none}
  .mascot--side,.mascot--float,.close-st,.close .wavecard{rotate:none}
}