/* =========================================================
   Spawn Point — case study (process journey)
   Look and structure follow the Wix case study; colours from the brand book.
   ========================================================= */
:root {
  --bg: #000;
  --fg: #fff;
  --text: #b4b4b4;
  --dim: #7e7e7e;
  --line: #262626;
  --sep: #232323;
  --band: #151515;
  --ivory: #EAEBE4;
  --ink: #1D1D1D;
  --ink-2: #4a4a45;
  --crimson: #CB2742;
  --ocean: #088897;

  --f: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-sheet: cubic-bezier(0.33, 1, 0.68, 1);   /* easeOutCubic: gentler than --ease at the start, so a sheet is seen sliding up */
  --wrap: 1120px;
  --gut: clamp(20px, 5vw, 48px);
  --top-h: 64px;
  color-scheme: dark;
}

@font-face { font-family: "Azuki"; src: url("assets/fonts/azuki.ttf") format("truetype"); font-display: swap; }   /* the team's own lettering, made in Calligraphr (May 2024): A–Z only */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--top-h) + 16px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.7 var(--f); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd { margin: 0; }
strong, b { color: var(--fg); font-weight: 600; }
.t-red { color: var(--crimson); }
.t-blue { color: #18a6b7; }
.t-ivory { color: var(--ivory); }
.t-white { color: var(--fg); }
:focus-visible { outline: 2px solid var(--crimson); outline-offset: 3px; border-radius: 4px; }
.skip { position: fixed; z-index: 100; left: 12px; top: -60px; padding: 10px 14px; border-radius: 8px; background: var(--crimson); color: var(--fg); font-weight: 600; text-decoration: none; transition: transform 200ms var(--ease); }
.skip:focus { transform: translateY(72px); }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gut) * 2); margin-inline: auto; padding-inline: var(--gut); }
.narrow { max-width: 560px; }
.nowrap { white-space: nowrap; }
.hint { margin-top: 16px; font-size: 13px; color: var(--dim); text-align: center; }
.hint a { color: var(--fg); }
.caption { max-width: 640px; margin: 20px auto 0; font-size: 14px; color: var(--dim); text-align: center; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--crimson); color: var(--fg); font-weight: 600; font-size: 15px; text-decoration: none; transition: transform 160ms var(--ease), background-color 200ms ease, box-shadow 200ms ease; }
.btn:active { transform: scale(0.97); }
.btn--ghost { background: transparent; box-shadow: inset 0 0 0 1.5px #3a3a3a; }
.btn--light { background: var(--ivory); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: #db3552; }
  .btn--ghost:hover { background: transparent; box-shadow: inset 0 0 0 1.5px var(--fg); }
  .btn--light:hover { background: #fff; }
}

/* ---------- motion primitives ---------- */
.js .rv { opacity: 0; transform: translateY(22px); transition: opacity 800ms var(--ease), transform 800ms var(--ease); transition-delay: var(--d, 0ms); }
.js .rv.is-in { opacity: 1; transform: none; }
.js .rv-img { opacity: 0; clip-path: inset(14% 0 0 0); transition: clip-path 1100ms var(--ease), opacity 700ms ease; transition-delay: var(--d, 0ms); }
.js .rv-img.is-in { opacity: 1; clip-path: inset(0 0 0 0); }
[data-speed] { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .js .rv { transform: none; transition: opacity 400ms ease; }
  .js .rv-img { clip-path: none; transition: opacity 400ms ease; }
  [data-speed] { transform: none !important; }
}

/* =========================================================
   Top bar + journey tracker
   ========================================================= */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--top-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  padding-inline: var(--gut);
  transition: background-color 300ms ease, border-color 300ms ease;
  border-bottom: 1px solid transparent;
}
.top.is-solid { background: rgba(0, 0, 0, 0.94); border-bottom-color: #161616; }   /* no backdrop blur: it is redrawn on every frame of a scroll, which phones feel */
.top__name { justify-self: start; padding: 12px 14px 12px 0; font-size: 14px; font-weight: 500; color: var(--fg); text-decoration: none; white-space: nowrap; }   /* the padding is the logo's tap area */
.top__cta { justify-self: end; font-size: 14px; font-weight: 600; color: var(--fg); text-decoration: none; white-space: nowrap; }
.top__cta span { display: inline-block; transition: transform 200ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .top__cta:hover span { transform: translateX(3px); } .top__cta:hover { color: var(--crimson); } }

.journey { display: grid; gap: 6px; width: min(520px, 46vw); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
.top.is-journey .journey { opacity: 1; transform: none; pointer-events: auto; }
.journey__now { display: flex; justify-content: center; gap: 10px; font-size: 12px; line-height: 1; white-space: nowrap; }
.journey__chapter { color: var(--fg); font-weight: 600; }
.journey__step { color: var(--dim); font-weight: 400; }
.journey__track { display: flex; gap: 4px; }
.journey__track li { flex: 1; }
.journey__track a { position: relative; display: block; height: 14px; }
.journey__track a::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 3px; border-radius: 2px; background: #2c2c2c; }
.journey__fill { position: absolute; left: 0; right: 0; top: 6px; height: 3px; border-radius: 2px; background: var(--crimson); transform-origin: left; transform: scaleX(var(--p, 0)); }
.journey__label {
  position: absolute; top: 20px; left: 50%; translate: -50% 0; white-space: nowrap;
  font-size: 12px; color: var(--fg); background: #1c1c1c; padding: 6px 9px; border-radius: 6px;
  opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 150ms var(--ease), transform 150ms var(--ease);
}
.journey__track a:focus-visible .journey__label { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .journey__track a:hover .journey__label { opacity: 1; transform: none; } .journey__track a:hover::before { background: #444; } }

@media (max-width: 760px) {
  .top { grid-template-columns: 1fr auto; gap: 12px; }
  .top__name { grid-area: 1 / 1; transition: opacity 300ms var(--ease); }
  .top.is-journey .top__name { opacity: 0; pointer-events: none; }
  .top__cta { grid-area: 1 / 2; }
  .journey { position: static; width: auto; grid-area: 1 / 1; }
  .journey__now { justify-content: flex-start; }
  .journey__track { position: absolute; left: 0; right: 0; bottom: -1px; gap: 2px; }
  .journey__track a { height: 3px; }
  .journey__track a::before, .journey__fill { top: 0; border-radius: 0; }
  .journey__label { display: none; }
  .top__cta { font-size: 13px; }
  .top:not(.is-journey) .top__cta { grid-column: 2; }
}

/* =========================================================
   Hero, mark, intro
   ========================================================= */
/* ---------- the logo animation: a full-bleed hero pinned under the bar; the page slides up over it ---------- */
.loop { position: relative; height: 100vh; height: 100svh; }
.loop__stage { position: fixed; z-index: -1; left: 0; right: 0; top: var(--top-h); height: calc(100vh - var(--top-h)); height: calc(100svh - var(--top-h)); overflow: hidden; background: var(--ivory); contain: strict; }
.loop .layer { position: absolute; inset: 0; will-change: transform; }
.loop .layer svg, .loop .layer canvas { display: block; width: 100%; height: 100%; }
.loop .layer--glass, .loop .layer--dither { background: #000; visibility: hidden; }
.loop .layer--blocks { background: var(--crimson); visibility: hidden; }
.loop .layer--white { background: var(--ivory); visibility: hidden; }
.loop .glass { transform-origin: 50% 50%; }
.loop .gl-fringe { mix-blend-mode: screen; }
.loop .cx-grid line, .loop .cx-circle, .loop .cx-dot { stroke-dasharray: 1; stroke-dashoffset: 1; }   /* loop.js draws them in */
.loop__cue { position: absolute; transition: opacity 200ms ease; left: 50%; bottom: 26px; translate: -50% 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; background: rgba(17, 17, 17, 0.72); }
/* the title panel (the gallery, on work.html) is the first thing to slide over it */
.loop + .hero, .loop + .wk-gal { background: var(--bg); border-radius: 28px 28px 0 0; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.22); }
@media (max-width: 700px) { .loop + .hero, .loop + .wk-gal { border-radius: 20px 20px 0 0; } }

.hero { position: relative; min-height: 92vh; min-height: 92svh; display: flex; align-items: center; padding-block: 140px 100px; }
.hero__title { font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; color: var(--fg); }
.hero__date { margin-top: 12px; font-size: 15px; color: var(--fg); }
.hero__hmw { margin-top: 36px; max-width: 680px; font-size: clamp(1.3rem, 2vw, 1.65rem); line-height: 1.35; font-weight: 500; letter-spacing: -0.01em; color: var(--fg); }
.hero__lede { margin-top: 36px; max-width: 620px; font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.6; font-weight: 300; color: #d6d6d6; }
.hero__hmw + .hero__lede { margin-top: 18px; }
.hero__meta { display: grid; grid-template-columns: repeat(3, minmax(0, 180px)); gap: 24px 48px; margin-top: 56px; }
.hero__meta dt { font-size: 16px; font-weight: 600; color: var(--fg); margin-bottom: 8px; }
.hero__meta dd { font-size: 15px; color: var(--text); }
/* impact: little boxes like the "Take me to" cards, the result set large */
.hero__impact { max-width: 1120px; margin-top: 40px; }
.hero__impact-k { font-size: 16px; font-weight: 600; color: var(--fg); margin-bottom: 12px; }
.icards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.icard { display: grid; align-content: space-between; gap: 28px; min-height: 150px; padding: 20px 20px 22px; border-radius: 14px; background: var(--band); }
.icard__ico { display: block; height: 36px; width: auto; margin-bottom: 16px; }   /* each partner's logo (uploads/impact-icons), above its title */
.icard__big { font-size: clamp(1.7rem, 2.8vw, 2.25rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; }
.icard__t { font-size: 14px; line-height: 1.5; color: var(--text); }
@media (max-width: 1100px) { .icards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .icards { grid-template-columns: 1fr; } .icard { min-height: 0; } }
.hero__cue { position: absolute; left: 50%; bottom: 28px; translate: -50% 0; display: grid; place-items: center; width: 44px; height: 44px; color: var(--fg); }
/* scroll cue: two chevrons light up in turn, top then bottom */
.cue { width: 22px; height: 26px; overflow: visible; }
.cue path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px currentColor); animation: cue 1.8s ease-in-out infinite both; }
.cue path + path { animation-delay: -1.35s; }
@keyframes cue { 0%, 14% { opacity: 1; } 30% { opacity: 0.55; } 47%, 55% { opacity: 0; } 70% { opacity: 0.35; } 80%, 100% { opacity: 1; } }
@media (max-width: 600px) { .hero__meta { grid-template-columns: 1fr 1fr; } .hero__meta div:last-child { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .cue path { animation: none; } .cue path + path { opacity: 0.5; } }

.markband { position: relative; height: clamp(300px, 46vw, 600px); display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(120% 140% at 22% 8%, #ffffff 0%, #f0f0ee 30%, #dcdcd9 66%, #c9c9c5 100%); }
.markband::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 46%, transparent 62%); transform: translateX(-60%); transition: transform 1600ms var(--ease) 300ms; pointer-events: none; }
.markband.is-in::after { transform: translateX(60%); }
.markband__mark { height: clamp(150px, 21vw, 290px); width: auto; aspect-ratio: 62 / 138; overflow: visible; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.18)); }
.mk-s { fill: var(--crimson); }
.mk-c { fill: var(--ink); }
.js .markband .mk-s, .js .markband .mk-c { transform-box: fill-box; transition: transform 1100ms var(--ease), opacity 700ms ease; opacity: 0; }
.js .markband .mk-s { transform: translateY(-26%); }
.js .markband .mk-c { transform: translateY(40%) rotate(-90deg); transform-origin: center; transition-delay: 250ms; }
.js .markband.is-in .mk-s, .js .markband.is-in .mk-c { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js .markband .mk-s, .js .markband .mk-c { transform: none; transition: opacity 400ms ease; } .markband::after { display: none; } }

.intro { position: relative; padding-block: clamp(100px, 14vh, 160px) clamp(60px, 10vh, 120px); overflow: hidden; }
.intro__text { position: relative; max-width: 860px; margin-inline: auto; text-align: center; font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.75; font-weight: 300; color: #d0d0d0; }
.intro__collage { position: relative; margin-top: clamp(56px, 8vw, 96px); }
.intro__collage img { width: 100%; }

/* =========================================================
   Methodology
   ========================================================= */
.method { padding-block: clamp(80px, 12vh, 140px); }
.center-title { text-align: center; font-size: clamp(1.7rem, 2.8vw, 2.2rem); font-weight: 600; line-height: 1.2; color: var(--fg); letter-spacing: -0.01em; }
.center-title--s { font-size: clamp(1.4rem, 2.2vw, 1.75rem); margin-top: clamp(72px, 10vw, 112px); }
.center-title--dark { color: var(--ink); margin-top: 0; }
.center-sub { max-width: 560px; margin: 10px auto 0; text-align: center; color: var(--dim); font-size: 15px; }

.method__rows { max-width: 920px; margin: 56px auto 0; }
.method__rows a { display: grid; grid-template-columns: 26px 220px 1fr; align-items: center; gap: 14px; min-height: 44px; text-decoration: none; border-radius: 8px; padding-inline: 8px; transition: background-color 200ms ease; }
.method__arrow { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #5a5a5a; font-size: 12px; color: var(--fg); transition: transform 200ms var(--ease), box-shadow 200ms ease, background-color 200ms ease; }
.method__name { font-size: 15px; color: #d6d6d6; transition: color 200ms ease; }
.method__bar { position: relative; height: 8px; }
.method__bar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #2a2a2a; }
.method__bar i { position: absolute; top: 0; height: 8px; border-radius: 4px; background: var(--crimson); left: calc(var(--s) * 1%); width: calc((var(--e) - var(--s)) * 1%); transform-origin: left; }
.js .method__rows .method__bar i { transform: scaleX(0); transition: transform 900ms var(--ease); transition-delay: calc(var(--i, 0) * 90ms + 200ms); }
.js .method__rows.is-in .method__bar i { transform: scaleX(1); }
.js .method__rows li { opacity: 0; transform: translateX(-10px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js .method__rows.is-in li { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .method__rows a:hover { background: #0f0f0f; }
  .method__rows a:hover .method__arrow { transform: translateX(3px); background: var(--crimson); box-shadow: none; }
  .method__rows a:hover .method__name { color: var(--fg); }
}
.method__note { margin-top: 24px; text-align: center; font-size: 14px; color: var(--dim); }
@media (max-width: 700px) {
  .method__rows a { grid-template-columns: 22px 1fr; row-gap: 6px; padding-block: 8px; }
  .method__bar { grid-column: 1 / -1; }
}

.takeme { margin-top: clamp(72px, 10vw, 110px); }
.takeme__label { text-align: center; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.takeme__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.tcard { position: relative; display: grid; gap: 6px; padding: 14px 14px 18px; border-radius: 14px; background: var(--band); text-decoration: none; transition: transform 300ms var(--ease), background-color 300ms ease; }
.tcard__img { display: block; overflow: hidden; border-radius: 8px; aspect-ratio: 16 / 10; background: #0b0b0b; margin-bottom: 10px; }
.tcard__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: saturate(0.85) brightness(0.8); transition: transform 600ms var(--ease), filter 400ms ease; }
.tcard__n { font-size: 13px; font-weight: 600; color: var(--crimson); }
.tcard__t { font-size: 22px; font-weight: 600; color: var(--fg); line-height: 1.2; }
.tcard__go { font-size: 14px; color: var(--text); }
.tcard__go span { display: inline-block; transition: transform 200ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .tcard:hover { transform: translateY(-4px); background: #1b1b1b; }
  .tcard:hover .tcard__img img { transform: scale(1.04); filter: none; }
  .tcard:hover .tcard__go span { transform: translateX(4px); }
}
@media (max-width: 760px) { .takeme__cards { grid-template-columns: 1fr; } }

/* =========================================================
   Chapters & steps
   ========================================================= */
.chapter { position: relative; min-height: 88vh; min-height: 88svh; display: flex; align-items: center; overflow: hidden; border-top: 1px solid var(--sep); background: radial-gradient(80% 70% at 85% 60%, #160608 0%, #000 60%); }
.chapter__in { position: relative; z-index: 2; padding-block: 120px; display: grid; grid-template-columns: fit-content(100%); }
.chapter__n { font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--crimson); }
/* the title sets the width of the chapter's column (the grid's fit-content track): the line under it and the steps are
   contained, so they wrap inside it rather than widen it, and never run wider than the title (Vishrut, 2026-10-23). It
   keeps to one line, and on narrow phones it shrinks to fit: "Interface Design", the longest, is about 7em wide */
.chapter__title { margin-top: 14px; font-size: clamp(3rem, 7.4vw, 6rem); font-weight: 600; line-height: 0.98; letter-spacing: -0.03em; color: var(--fg); white-space: nowrap; }
@media (max-width: 700px) { .chapter__title { font-size: min(3rem, calc((100vw - 2 * var(--gut)) / 7.2)); } }
.chapter__sub { contain: inline-size; margin-top: 24px; max-width: 520px; font-size: clamp(1.05rem, 1.4vw, 1.25rem); font-weight: 300; line-height: 1.6; color: #cfcfcf; }
.chapter__steps { contain: inline-size; display: flex; flex-wrap: wrap; gap: 10px 0; margin-top: 40px; max-width: 640px; font-size: 14px; color: var(--dim); }
.chapter__steps li + li::before { content: "→"; margin: 0 12px; color: #4a4a4a; }
.chapter__art { position: absolute; z-index: 1; right: max(0px, calc((100vw - var(--wrap)) / 2 - 40px)); bottom: -6%; height: 88%; width: auto; max-width: 40%; object-fit: contain; object-position: bottom right; pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 22%); mask-image: linear-gradient(to top, transparent 0%, #000 22%); }
#branding .chapter__art { height: 76%; bottom: 6%; }
/* on phones the character sits under the chapter's text, cut at its middle by the section's edge, with the same
   parallax as Buying Behaviour (data-speed); --ar is its height over its width */
@media (max-width: 860px) {
  .chapter { flex-direction: column; align-items: stretch; min-height: 0; }
  .chapter__steps { display: none; }   /* the step list is left out on phones (Vishrut, 2026-10-23) */
  .chapter__art, #branding .chapter__art { position: relative; right: auto; bottom: auto; align-self: center; width: min(78vw, 380px); height: auto; max-width: none; opacity: 1;
    margin-bottom: calc(min(78vw, 380px) * var(--ar, 1.6) * -0.5); -webkit-mask-image: none; mask-image: none; }
}

.step { position: relative; padding-block: clamp(96px, 14vh, 160px); }
.step--tight { padding-block: clamp(72px, 10vh, 120px); }
/* a hairline between sections; the hero panel and the light mark band need none */
main > section + section { border-top: 1px solid var(--sep); }
main > .hero, main > .loop + .wk-gal, main > .markband, main > .markband + section { border-top: 0; }
.step__n { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; color: var(--crimson); margin-bottom: 10px; }
.step__title { font-size: clamp(1.6rem, 2.6vw, 2.15rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--fg); margin-bottom: 26px; }
.step__sub { font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 600; color: var(--fg); margin: clamp(64px, 9vw, 96px) 0 18px; }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 480px)); gap: 20px 64px; }
.cols p { font-size: 16px; line-height: 1.75; }
.cols:only-child, .cols p:only-child { max-width: 560px; }
@media (max-width: 800px) { .cols { grid-template-columns: 1fr; } }
.quote { font-style: italic; color: #d8d8d8; border-left: 2px solid var(--crimson); padding-left: 18px; }
.quote--big { margin-top: 28px; font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.5; }
.quote--note { margin-top: 28px; max-width: 640px; font-size: 17px; line-height: 1.6; }
.quote cite { display: block; margin-top: 6px; font-size: 13px; font-style: normal; color: var(--dim); }

.idea { margin-top: 48px; max-width: 760px; padding: 22px 24px; border-radius: 12px; background: var(--band); }
.idea__k { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--crimson); margin-bottom: 8px; }
.idea p:last-child { font-size: 15px; line-height: 1.7; }

.band { padding-block: clamp(56px, 8vw, 88px); }
.step > .wrap + .band { margin-top: clamp(56px, 8vw, 88px); }
.band--gray { background: var(--band); }
.band--ivory { background: var(--ivory); color: var(--ink-2); }
.band--ivory strong, .band--ivory b { color: var(--ink); }

.figure { margin-top: 48px; }
.figure img { width: 100%; border-radius: 8px; }
.figure figcaption { margin-top: 12px; font-size: 13px; color: var(--dim); text-align: center; }
.figure + .cols { margin-top: 40px; }   /* text under a picture: the same gap as under the Final UI video */
@media (max-width: 720px) { .figure + .cols { margin-top: 28px; } }
.figure--narrow { max-width: 620px; margin-inline: auto; }
.figure > a, .cards4 a, .cards3 a, .duo a, .inuse a, .market a, .demo a { display: block; cursor: zoom-in; }

.cards4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cards4 img, .cards3 img { width: 100%; border-radius: 6px; transition: transform 400ms var(--ease), box-shadow 400ms ease; }
@media (hover: hover) and (pointer: fine) { .cards4 a:hover img, .cards3 a:hover img { transform: translateY(-6px); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.9); } }
@media (max-width: 960px) { .cards4 { grid-template-columns: repeat(2, 1fr); } .cards3 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cards4 { grid-template-columns: 1fr; } }

/* demographics */
.demo { display: grid; grid-template-columns: 1.2fr 1fr; margin-top: 32px; border-radius: 10px; overflow: hidden; }
.demo a { display: grid; place-items: center; }
.demo__map { background: #1d1d1d; }
.demo__age { background: var(--ivory); }
.demo__map img { width: 100%; height: auto; }
.demo__fig { position: relative; display: block; width: 100%; }
.demo__fig .dm { position: absolute; inset: 0; width: 100%; height: 100%; }
.demo__age .dm { width: 100%; height: 100%; aspect-ratio: 1376 / 1026; padding: 4%; }
/* build-in once the graphics are on screen: the map, then each share, largest first (country, leader line, bubble);
   the figures rise, then the age ring grows clockwise a section at a time, each with its title, line and figure.
   The figures scramble in (app.js). Built by _dev/demo/make_demo.py; --at and --dur come from there */
.js .demo .demo__base { opacity: 0; transition: opacity 700ms ease; }
.js .demo .dm-c { opacity: 0; transition: opacity 350ms ease calc(400ms + var(--i) * 150ms); }
.js .demo .dm-l { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform 420ms var(--ease) calc(480ms + var(--i) * 150ms); }
.js .demo .dm-b { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 560ms cubic-bezier(0.34, 1.56, 0.64, 1) calc(700ms + var(--i) * 150ms); }
.js .demo .dm-up { opacity: 0; transform: translateY(40px); transition: opacity 500ms ease, transform 800ms var(--ease); transition-delay: calc(200ms + var(--i) * 130ms); }
.js .demo .dm-arc { stroke-dashoffset: var(--len); transition: stroke-dashoffset var(--dur) cubic-bezier(0.45, 0, 0.25, 1) var(--at); }
.js .demo .dm-seg { opacity: 0; transform: translateY(12px); transition: opacity 400ms ease var(--at), transform 600ms var(--ease) var(--at); }
.js .demo .dm-ctr { opacity: 0; transition: opacity 500ms ease 900ms; }
.demo.is-in .demo__base, .demo.is-in .dm-c, .demo.is-in .dm-up, .demo.is-in .dm-ctr, .demo.is-in .dm-seg { opacity: 1; }
.demo.is-in .dm-l, .demo.is-in .dm-b, .demo.is-in .dm-up, .demo.is-in .dm-seg { transform: none; }
.demo.is-in .dm-arc { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .js .demo .demo__base, .js .demo .dm-c, .js .demo .dm-l, .js .demo .dm-b, .js .demo .dm-up, .js .demo .dm-ctr, .js .demo .dm-seg, .js .demo .dm-arc { transition: none; } }
@media (max-width: 760px) { .demo { grid-template-columns: 1fr; } }

/* psychographics */
/* psychographics: the two segments side by side on a 12-column grid (24px gutters). Each takes 6 columns:
   "Who they are" over "What they want" in 3, "How to win them" in the other 3. Stacked on phones, with justified text. */
.psy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 24px; margin-top: 40px; }
.psy__card { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: 24px; align-items: start; }
.psy__card h5 { grid-column: 1 / -1; grid-row: 1; font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--fg); }
.psy__g { padding-top: 18px; }
.psy__g--who { grid-column: 1 / span 3; grid-row: 2; }
.psy__g--want { grid-column: 1 / span 3; grid-row: 3; }
.psy__g--win { grid-column: 4 / span 3; grid-row: 2 / span 2; }
.psy__k { font-size: 14px; font-weight: 600; color: var(--c); }
.psy__card[style*="ocean"] .psy__k { color: #18a6b7; }
.psy__card ul { margin-top: 6px; }
.psy__card li { position: relative; padding-left: 16px; font-size: 15px; line-height: 1.6; }
.psy__card li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 5px; height: 5px; border-radius: 50%; background: #5a5a5a; }
@media (max-width: 760px) {
  .psy { grid-template-columns: 1fr; }
  .psy__card { grid-template-columns: 1fr; grid-template-rows: none; }
  .psy__card h5, .psy__g--who, .psy__g--want, .psy__g--win { grid-column: 1; grid-row: auto; }
  .psy__g { padding-top: 16px; }
  .psy__card li { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
}

/* buying behaviour */
.buying { margin-top: clamp(96px, 12vw, 140px); overflow: hidden; }
.buying__in { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: center; }
.buying__title { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 600; color: var(--crimson); margin-bottom: 24px; }
.buying__list { display: grid; gap: 16px; }
.buying__list li { position: relative; padding-left: 18px; font-size: 15.5px; line-height: 1.7; }
.buying__list li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 6px; height: 6px; background: var(--ink); border-radius: 50%; }
/* the art's box is set outright, a height and the picture's shape, instead of being worked out from the picture: some
   iPhones squashed it when its width came from max-height and its resized copies (srcset). object-fit keeps the
   drawing true whatever the box (Vishrut's screenshot, 2026-10-23) */
.buying__art { height: 600px; width: auto; aspect-ratio: 900 / 1950; object-fit: contain; justify-self: end; margin-block: -40px -120px; }
@media (max-width: 860px) { .buying__in { grid-template-columns: 1fr; } .buying__art { height: 360px; justify-self: center; margin: 0 0 -96px; } }

/* market */
/* The logos tile sets the row: 16:10 at 1.25fr, its size on the published site. The chart takes the rest of the row at
   the same height (minmax(0, …) so its contents can't widen the column and get clipped, as the old image did). */
.market { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); margin-top: 48px; border-radius: 10px; overflow: hidden; }
.market a { aspect-ratio: 16 / 10; }
.market__logos { background: var(--ivory); }
/* the six logos as the published image had them: columns centred at 30/50/70%, rows at a third and two thirds */
.logos { display: grid; grid-template-columns: repeat(3, 20%); grid-template-rows: repeat(2, 33.333%); justify-content: center; align-content: center; place-items: center; width: 100%; height: 100%; color: var(--crimson); }
.logos .draw { width: 51%; height: auto; --draw-w: 7; }
/* the forecast chart, live: laid out on a 16:9 frame (1600 units wide) inside the 16:10 tile; sizes in cqw scale with the tile */
.market__chart { background: #1E1E1E; }
.fc { position: relative; width: 100%; height: 100%; background: #1E1E1E; color: #F2F2F2; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; overflow: hidden; }
.fc__in { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; aspect-ratio: 16 / 9; container-type: inline-size; }
.fc__in > * { position: absolute; margin: 0; line-height: 1; }
.fc__title { left: 5%; top: 8.6%; font-size: 3.5cqw; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.fc__sub { left: 5%; top: 16.6%; font-size: 1.9cqw; white-space: nowrap; }
.fc__bar { left: calc(var(--x) * 1%); bottom: 13.3%; width: 6%; height: calc(var(--h) * 1%); }
.fc__bar i { position: absolute; inset: 0; background: var(--crimson); transform-origin: bottom; }
.fc__val, .fc__year { position: absolute; left: 50%; translate: -50% 0; white-space: nowrap; font-size: 1.4cqw; }
.fc__val { bottom: calc(100% + 0.9cqw); font-weight: 700; }
.fc__year { top: calc(100% + 1.3cqw); }
.fc__cagr { left: 61.4%; top: 27%; font-size: 3.3cqw; font-weight: 700; color: var(--crimson); }
.fc__rule { left: 61.4%; top: 36%; width: 16.4%; height: 0.7%; background: var(--crimson); }
.fc__k { left: 61.4%; top: 38.8%; font-size: 1.9cqw; line-height: 1.6; font-weight: 300; color: var(--crimson); }
.fc__q { left: 61.4%; top: 57%; width: 31%; font-size: 1.4cqw; line-height: 1.35; font-weight: 700; }
.fc__p { left: 61.4%; top: 65%; width: 34%; font-size: 1.4cqw; line-height: 1.4; }
.fc__p b { color: inherit; }
.fc__src { left: 61.4%; top: 85%; width: 34%; font-size: 0.9cqw; line-height: 1.4; color: #bdbdbd; }
/* build-in: the bars rise in turn and their figures scramble in (app.js); the notes follow */
.js .fc .fc__bar i { transform: scaleY(0); transition: transform 900ms var(--ease) calc(150ms + var(--i) * 150ms); }
.js .fc .fc__val { opacity: 0; transition: opacity 300ms ease calc(450ms + var(--i) * 150ms); }
.js .fc .fc__cagr, .js .fc .fc__rule, .js .fc .fc__k, .js .fc .fc__q, .js .fc .fc__p, .js .fc .fc__src { opacity: 0; transform: translateY(1cqw); transition: opacity 500ms ease var(--at), transform 700ms var(--ease) var(--at); }
.js .fc .fc__cagr { --at: 1000ms; } .js .fc .fc__rule { --at: 1100ms; } .js .fc .fc__k { --at: 1150ms; } .js .fc .fc__q { --at: 1300ms; } .js .fc .fc__p { --at: 1400ms; } .js .fc .fc__src { --at: 1500ms; }
.fc.is-in .fc__bar i { transform: none; }
.fc.is-in .fc__val, .fc.is-in .fc__cagr, .fc.is-in .fc__rule, .fc.is-in .fc__k, .fc.is-in .fc__q, .fc.is-in .fc__p, .fc.is-in .fc__src { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .fc .fc__bar i, .js .fc .fc__val, .js .fc .fc__cagr, .js .fc .fc__rule, .js .fc .fc__k, .js .fc .fc__q, .js .fc .fc__p, .js .fc .fc__src { transition: none; } }
/* icons and logos draw their outline, then fill, as their block comes into view; --d is the block's reveal delay */
.js .draw path, .js .draw circle { stroke: currentColor; stroke-width: var(--draw-w, 0.9); stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; transition: stroke-dashoffset 1100ms var(--ease-io) var(--d, 0ms), fill-opacity 500ms ease calc(var(--d, 0ms) + 950ms); }
.js .is-in .draw path, .js .is-in .draw circle { stroke-dashoffset: 0; fill-opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js .draw path, .js .draw circle { stroke-dashoffset: 0; fill-opacity: 1; transition: none; } }
@media (min-width: 761px) { .market .market__chart { aspect-ratio: auto; } }
@media (max-width: 760px) { .market { grid-template-columns: 1fr; } }

.sus { max-width: 760px; margin: 48px auto 0; padding: 24px 26px; border-radius: 12px; background: var(--band); }
.sus figcaption { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; font-weight: 600; color: var(--fg); }
.sus figcaption span { font-weight: 400; font-size: 13px; color: var(--dim); }
.sus__row { display: grid; grid-template-columns: 110px 1fr 104px; align-items: center; gap: 16px; padding-block: 8px; }
.sus__name { font-weight: 600; color: var(--fg); }
.sus__track { position: relative; height: 12px; border-radius: 6px; background: #262626; }
.sus__track i { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 1%); border-radius: 6px; background: var(--ocean); transform-origin: left; }
.sus__track i.lo { background: #6a6a66; }
.js .sus .sus__track i { transform: scaleX(0); transition: transform 1100ms var(--ease); }
.js .sus.is-in .sus__track i { transform: scaleX(1); }
.js .sus .sus__row + .sus__row .sus__track i { transition-delay: 180ms; }
.sus__avg { position: absolute; left: 68%; top: -5px; bottom: -5px; width: 2px; background: var(--fg); opacity: 0.6; }
.sus__score { display: grid; font-size: 22px; font-weight: 600; color: var(--fg); line-height: 1.1; font-variant-numeric: tabular-nums; }
.sus__score small { font-size: 12px; font-weight: 500; color: var(--dim); }
@media (max-width: 560px) { .sus__row { grid-template-columns: 1fr 88px; } .sus__track { grid-column: 1 / -1; grid-row: 2; } }

/* focus group */
.party { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.party li { padding: 10px 14px; border-radius: 999px; background: var(--band); font-size: 14px; }
.party b { color: var(--crimson); margin-right: 6px; }
.party__fac { background: transparent !important; color: var(--dim); }
.figure--light img { background: #fff; }

/* empathy map */
.empathy { position: relative; display: grid; grid-template-columns: 1fr 1fr; max-width: 980px; margin: 40px auto 0; }
.empathy__line { position: absolute; background: var(--crimson); }
.empathy__line--h { left: 10%; right: 10%; top: 50%; height: 1px; transform-origin: center; }
.empathy__line--v { top: 6%; bottom: 6%; left: 50%; width: 1px; transform-origin: center; }
.js .empathy .empathy__line--h { transform: scaleX(0); transition: transform 1100ms var(--ease-io); }
.js .empathy .empathy__line--v { transform: scaleY(0); transition: transform 1100ms var(--ease-io) 150ms; }
.js .empathy.is-in .empathy__line { transform: none; }
.empathy__q { display: flex; flex-direction: column; gap: 14px; padding: 36px 44px; }
.empathy__q h5 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); font-weight: 600; color: var(--fg); }
.empathy__q ul { display: grid; gap: 6px; font-size: 15px; line-height: 1.55; }
.empathy__q--thinks, .empathy__q--does { text-align: right; }
.empathy__q--feels, .empathy__q--does { flex-direction: column-reverse; justify-content: flex-end; }
.empathy__q--feels li, .empathy__q--does li { position: relative; }
.js .empathy .empathy__q { opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.js .empathy.is-in .empathy__q { opacity: 1; transform: none; }
.js .empathy.is-in .empathy__q--says { transition-delay: 300ms; }
.js .empathy.is-in .empathy__q--thinks { transition-delay: 420ms; }
.js .empathy.is-in .empathy__q--feels { transition-delay: 540ms; }
.js .empathy.is-in .empathy__q--does { transition-delay: 660ms; }
@media (max-width: 760px) {
  .empathy { grid-template-columns: 1fr; }
  .empathy__line { display: none; }
  .empathy__q { padding: 22px 0; border-top: 1px solid #2a2a2a; text-align: left !important; flex-direction: column !important; }
}

/* goals */
.goals { margin-top: clamp(80px, 10vw, 120px); }
.goals__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 40px; }
.goals__ico { display: block; width: 52px; height: 52px; color: var(--crimson); margin-bottom: 18px; }
.goals__list h5 { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.goals__list p { font-size: 14.5px; line-height: 1.6; }
@media (max-width: 860px) { .goals__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .goals__list { grid-template-columns: 1fr; } }

/* lists */
.biglist { display: grid; gap: 12px; max-width: 760px; margin: 32px auto 0; }
.biglist li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.65; }
.biglist li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; background: var(--crimson); }
.biglist--features li::before { background: var(--ocean); border-radius: 50%; }

/* inspirations */
.inspo { margin-top: clamp(80px, 10vw, 120px); }
.inspo__line { max-width: 640px; margin: 36px auto 0; text-align: center; font-size: 14px; color: var(--ink-2); }   /* a caption under the two columns */
.inspo__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 64px; max-width: 900px; margin: 44px auto 0; }
.inspo__item { display: grid; grid-template-columns: 96px 1fr; gap: 24px; align-items: center; }
.inspo__logo { display: block; width: 96px; color: var(--crimson); }
.inspo__logo .draw { width: 100%; height: auto; --draw-w: 7; }
.inspo__k { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.inspo__item li { position: relative; padding-left: 14px; font-size: 15px; line-height: 1.65; color: var(--ink); }
.inspo__item li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
@media (max-width: 760px) { .inspo__grid { grid-template-columns: 1fr; } }

/* =========================================================
   Branding
   ========================================================= */
/* word cloud: packed by _dev/wordcloud/layout.py from Azuki's measured letter boxes; sizes follow the panel's width (cqw), so the arrangement scales whole */
.cloud { position: relative; aspect-ratio: 1120 / 470; container-type: inline-size; margin-top: 48px; border-radius: 16px; background: var(--ivory); overflow: hidden; }
.w { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); transform: translate(-50%, -50%); white-space: nowrap; line-height: 1; color: var(--ink); font-family: "Azuki", var(--f); font-weight: 800; font-synthesis: none; letter-spacing: 0.01em; animation: float 8s var(--ease-io) infinite alternate; animation-delay: var(--d, 0s); }
.w--xl { font-size: 9.286cqw; color: var(--crimson); }
.w--l { font-size: 4.821cqw; }
.w--m { font-size: 3.036cqw; }
.w--s { font-size: 1.696cqw; color: #75756e; letter-spacing: 0.04em; }
.w--v { transform: translate(-50%, -50%) rotate(-90deg); }
.w--red { color: var(--crimson); }
.w--blue { color: var(--ocean); }
@keyframes float { from { translate: 0 0; } to { translate: 5px -7px; } }
/* phones: a cluster of their own (--px, --py), packed by _dev/wordcloud/layout_phone.py at sizes that stay legible on a narrow panel */
@media (max-width: 760px) {
  .cloud { aspect-ratio: 350 / 280; }
  .w { left: calc(var(--px) * 1%); top: calc(var(--py) * 1%); animation: none; }
  .w--xl { font-size: 14.486cqw; } .w--l { font-size: 7.8cqw; } .w--m { font-size: 5.571cqw; } .w--s { font-size: 4.114cqw; }
}
@media (prefers-reduced-motion: reduce) { .w { animation: none; } }

.name { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.name p { font-size: 16px; line-height: 1.75; max-width: 480px; }
.name .quote { margin-top: 0; }
.name p + p { margin-top: 12px; }
/* the names we tried, struck through, ending in the one we kept */
.names { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.names li { padding: 6px 13px; border-radius: 999px; box-shadow: inset 0 0 0 1px #333; font-size: 13px; color: var(--dim); text-decoration: line-through; text-decoration-color: rgba(203, 39, 66, 0.75); }
.names .names__win { color: var(--fg); background: var(--crimson); box-shadow: none; font-weight: 600; text-decoration: none; }
@media (max-width: 860px) { .name { grid-template-columns: 1fr; gap: 28px; } }

/* logo construction (scroll-scrubbed) */
.construct { position: relative; height: 360vh; }   /* the last quarter holds the finished pattern (app.js, constructTarget) */
.construct__sticky { position: sticky; top: var(--top-h); height: calc(100vh - var(--top-h)); height: calc(100svh - var(--top-h)); display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: clamp(28px, 5vw, 72px); max-width: calc(var(--wrap) + var(--gut) * 2); margin-inline: auto; padding-inline: var(--gut); }
.construct__art { position: relative; height: min(76vh, 700px); border-radius: 16px; overflow: hidden; background: var(--ivory); display: grid; place-items: center; }
.construct__art svg { width: 100%; height: 100%; }
/* the brand panel (brand book p. 138: the mark in ivory on crimson beside the coin-half pattern) slides in from the right at "The coin becomes the pattern" */
.cx-brand { position: absolute; inset: 0; transform: translateX(100%); }
.construct__steps { display: grid; gap: 4px; margin-top: 4px; }
.construct__steps li { padding: 14px 16px; border-radius: 12px; opacity: 0.35; transition: opacity 300ms ease, background-color 300ms ease; }
.construct__steps li.is-active { opacity: 1; background: var(--band); }
.construct__steps li.is-done { opacity: 0.6; }
.construct__steps h4 { font-size: 17px; font-weight: 600; color: var(--fg); margin-bottom: 4px; }
.construct__steps p { font-size: 15px; line-height: 1.6; }
.construct .hint { text-align: left; }
.cx-grid line { stroke: #BABABA; stroke-width: 1.2; }
.cx-circle { fill: none; stroke: #1D1D1D; stroke-width: 1.3; }
.cx-dot { fill: none; stroke: #1D1D1D; stroke-width: 1.15; }
.cx-dot--big { stroke-width: 1.6; }
.cx-dot--w { stroke: #fff; }
.cx-s { fill: #CB2742; }
.cx-coin { fill: #1D1D1D; }
.cx-rim { fill: #4a4a46; opacity: 0; }
.cx-glare { opacity: 0; }
.cx-shadow { fill: #1D1D1D; opacity: 0; }
.cx-ripples ellipse { fill: none; stroke: #9C9D95; stroke-width: 2; opacity: 0; }   /* a shade of Ivory White */
.cx-label { fill: #1D1D1D; font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; opacity: 0; }
@media (max-width: 860px) {
  .construct { height: 340vh; }
  .construct__sticky { grid-template-columns: 1fr; grid-template-rows: 1fr auto; align-items: stretch; gap: 12px; padding-block: 12px; }
  .construct__art { height: auto; }
  .construct__text .step__title { display: none; }
  .construct__steps li { display: none; }
  .construct__steps li.is-active { display: block; }
  .construct .hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .construct { height: auto; }
  .construct__sticky { position: relative; top: 0; height: auto; padding-block: 72px; }
  .construct__steps li { opacity: 1; display: block; }
  .construct__text .step__title { display: block; }
  .construct .hint { display: none; }
}

.swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.swatches li { display: grid; gap: 4px; min-width: 0; align-content: start; }
.swatch { display: block; aspect-ratio: 1.5; border-radius: 12px; background: var(--c); margin-bottom: 12px; transform-origin: bottom; }
.swatch--line { box-shadow: inset 0 0 0 1px #333; }
.swatches b { font-size: 16px; }
.swatches small { font-size: 13.5px; line-height: 1.5; color: var(--dim); }
.js .swatches .rv .swatch { transform: scaleY(0.3); transition: transform 900ms var(--ease); transition-delay: inherit; }
.js .swatches .rv.is-in .swatch { transform: none; }
@media (max-width: 760px) { .swatches { grid-template-columns: repeat(2, 1fr); } }
.figure--narrow img { border-radius: 10px; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
.duo img { width: 100%; border-radius: 8px; }
@media (max-width: 700px) { .duo { grid-template-columns: 1fr; } }

/* sideways only: left to auto, overflow-y gave the row a few pixels of vertical scroll (the cards still sliding in, .rv),
   which caught the page's scroll on wheels, trackpads and phones */
.cast { display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding: 40px max(var(--gut), calc((100vw - var(--wrap)) / 2)) 16px; scrollbar-width: thin; scrollbar-color: #333 transparent; cursor: grab; }
.cast.is-dragging { cursor: grabbing; scroll-snap-type: none; }
/* under the row: the hint in the middle, both arrows together at the right edge of the text column.
   They step one card and dim at the ends. */
.cast__foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-top: 4px; }
.cast__foot .hint { grid-column: 2; margin: 0; }
.cast__nav { grid-column: 3; justify-self: end; display: flex; gap: 8px; }
.cast__btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--fg); box-shadow: inset 0 0 0 1.5px #3a3a3a; font-size: 28px; line-height: 1; padding-bottom: 4px; transition: box-shadow 200ms ease, opacity 200ms ease, transform 160ms var(--ease); }
.cast__btn:active { transform: scale(0.94); }
.cast__btn[disabled] { opacity: 0.35; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .cast__btn:hover { box-shadow: inset 0 0 0 1.5px var(--fg); } }
@media (max-width: 600px) {
  .cast__foot { grid-template-columns: 1fr auto; }
  .cast__foot .hint { grid-column: 1; text-align: left; }
  .cast__nav { grid-column: 2; }
  .cast__btn { width: 40px; height: 40px; font-size: 24px; }
}
.cast li { flex: 0 0 clamp(220px, 22vw, 280px); aspect-ratio: 3 / 4.2; scroll-snap-align: center; position: relative; border-radius: 16px; background: var(--bg); overflow: hidden; }
.cast li.cast__wide { flex-basis: clamp(320px, 34vw, 440px); aspect-ratio: auto; }
.cast img { position: absolute; left: 50%; bottom: 0; translate: -50% 0; height: 94%; width: auto; max-width: none; transition: transform 600ms var(--ease); pointer-events: none; user-select: none; }
.cast li.cast__wide img { height: auto; width: 110%; bottom: 6%; }
@media (hover: hover) and (pointer: fine) { .cast li:hover img { transform: translateY(-8px) scale(1.03); } }

/* the billboard spans both rows; the brochure and the website stack beside it */
.inuse { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; margin-top: 40px; }
.inuse a { overflow: hidden; border-radius: 10px; aspect-ratio: 16 / 10; background: var(--band); }
.inuse a.inuse__a { grid-row: span 2; aspect-ratio: auto; }
.inuse img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .inuse a:hover img { transform: scale(1.03); } }
@media (max-width: 700px) { .inuse { grid-template-columns: 1fr; } .inuse a.inuse__a { grid-row: auto; aspect-ratio: 16 / 10; } }

.book { display: grid; grid-template-columns: 280px 1fr; align-items: center; gap: clamp(24px, 4vw, 56px); margin-top: 56px; padding: clamp(22px, 3vw, 36px); border-radius: 16px; background: var(--band); }
.book__stack { position: relative; aspect-ratio: 16 / 11; }
.book__stack img { position: absolute; width: 86%; border-radius: 8px; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.8); transition: transform 500ms var(--ease); }
.book__stack img:nth-child(1) { left: 14%; top: 0; transform: rotate(6deg); }
.book__stack img:nth-child(2) { left: 7%; top: 8%; transform: rotate(2deg); }
.book__stack img:nth-child(3) { left: 0; top: 16%; transform: rotate(-3deg); }
.book__k { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--crimson); }
.book__t { margin: 8px 0 20px; font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 600; line-height: 1.3; color: var(--fg); }
@media (hover: hover) and (pointer: fine) {
  .book:hover .book__stack img:nth-child(1) { transform: rotate(10deg) translate(10px, -6px); }
  .book:hover .book__stack img:nth-child(3) { transform: rotate(-6deg) translate(-6px, 4px); }
}
@media (max-width: 700px) { .book { grid-template-columns: 1fr; } .book__stack { width: 240px; } }
.book--board { margin-top: clamp(56px, 7vw, 88px); }
.book__peek { display: block; overflow: hidden; border-radius: 10px; background: #434343; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.8); }
.book__peek img { width: 100%; transition: transform 700ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .book--board:hover .book__peek img { transform: scale(1.05); } }
@media (max-width: 700px) { .book__peek { max-width: 280px; } }

/* ---------- early brand development: the logo journey, a piece of each strand, then the board ---------- */
/* the logo journey: the eleven frames in Vishrut's order, first mark to final */
.lj { margin-top: 48px; }
.lj__row { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 10px; }
.lj__row img { width: 100%; aspect-ratio: 1; border-radius: 8px; background: var(--ivory); }
.lj figcaption { margin-top: 14px; font-size: 13px; color: var(--dim); text-align: center; }
@media (max-width: 899px) { .lj__row { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 560px) { .lj__row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } }
.lj__story { margin-top: 36px; }
/* one piece from each of the other strands, on the board's canvas grey */
.strands { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.strands a { display: block; overflow: hidden; border-radius: 10px; background: #434343; cursor: zoom-in; }
.strands img { width: 100%; aspect-ratio: 16 / 10; transition: transform 700ms var(--ease); }
.strands span { display: block; margin-top: 10px; font-size: 13px; line-height: 1.4; color: var(--text); }
@media (hover: hover) and (pointer: fine) { .strands a:hover img { transform: scale(1.04); } }
@media (max-width: 899px) { .strands { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Azuki, in Type & pattern ---------- */
.subhead { max-width: 620px; margin: clamp(48px, 6vw, 72px) 0 22px; }
.subhead h4 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); font-weight: 600; line-height: 1.3; color: var(--fg); }
.subhead p { margin-top: 6px; font-size: 15px; line-height: 1.7; }
/* the Calligraphr template beside the alphabet, set live in Azuki */
.tspec { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 12px; }
.tspec__sheet { display: block; overflow: hidden; border-radius: 10px; background: #fff; cursor: zoom-in; }
.tspec__sheet img { width: 100%; }
.tspec__live { display: flex; flex-direction: column; justify-content: center; gap: 0.6em; padding: clamp(24px, 4vw, 56px); border-radius: 10px; background: var(--band); color: var(--ivory); font-family: "Azuki", var(--f); font-synthesis: none; container-type: inline-size; }
.tspec__name { font-size: clamp(3.2rem, 19cqw, 9rem); line-height: 0.9; color: var(--crimson); }
.tspec__abc { font-size: clamp(1.1rem, 7.4cqw, 3.4rem); line-height: 1.15; letter-spacing: 0.04em; }
@media (max-width: 760px) { .tspec { grid-template-columns: 1fr; } .tspec__sheet { max-width: 340px; } }
/* the two loader tests, the same height side by side (1 : 2.7) */
.loaders { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.7fr); gap: 12px; }
.loaders video { display: block; width: 100%; height: auto; border-radius: 10px; outline: 1px solid #262626; outline-offset: -1px; }
.loaders figcaption { margin-top: 10px; font-size: 13px; color: var(--dim); }
@media (max-width: 700px) { .loaders { grid-template-columns: 1fr; } .loaders figure:first-child { max-width: 300px; } }


/* =========================================================
   Interface
   ========================================================= */
/* the IA and the user flows: SVGs redrawn in the brand's colours (_dev/diagrams/make_diagrams.py) */
/* the IA and the flows are drawn at their natural size (--w, from make_diagrams.py), with their own generous margins */
.ia { margin-top: 32px; overflow-x: auto; overflow-y: hidden; cursor: grab; background: var(--bg); scrollbar-width: thin; scrollbar-color: #444 transparent; }
.ia.is-dragging { cursor: grabbing; }
.ia svg { display: block; width: var(--w); height: auto; max-width: none; user-select: none; -webkit-user-select: none; }
@media (max-width: 700px) { .ia svg { width: calc(var(--w) * 0.7); } }
/* the buy flow pins under the header while the page's scroll carries it sideways, then lets go (app.js [data-hscroll]) */
.hscroll { position: relative; margin-top: 32px; }
.hscroll__pin { position: sticky; top: var(--top-h); display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh - var(--top-h)); min-height: calc(100svh - var(--top-h)); }
.hscroll .ia { margin-top: 0; cursor: auto; }
.js .hscroll .ia { overflow: hidden; }
.hscroll__track { width: max-content; will-change: transform; }
.hscroll__pin .hint { margin-top: 16px; }
.hscroll--fit .ia svg { width: calc(var(--w) * var(--fit, 1)); }
.hscroll--fit .hscroll__track { transform-origin: 0 50%; }   /* the pull-back shrinks it towards the band's middle */   /* the IA shrinks to fit the screen's height while it's pinned (app.js sets --fit) */
@media (max-width: 700px) { .hscroll--fit .ia svg { width: calc(var(--w) * var(--fit, 0.7)); } }
.flowfig { margin-top: 48px; }
.flowfig svg { display: block; width: 100%; max-width: var(--w); height: auto; margin-inline: auto; border-radius: 12px; }
.flowfig__scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: #444 transparent; }
@media (max-width: 700px) { .flowfig__scroll { cursor: grab; } .flowfig__scroll svg { width: calc(var(--w) * 0.7); max-width: none; } }   /* on phones the flows scroll sideways at a readable size */
.flowfig figcaption { margin-top: 12px; font-size: 13px; color: var(--dim); text-align: center; }
.flowfig__clip { position: relative; max-height: 780px; overflow: hidden; border-radius: 12px; }
.flowfig__clip::after { content: ""; position: absolute; inset: auto 0 0; height: 200px; background: linear-gradient(rgba(0, 0, 0, 0), var(--bg) 80%); pointer-events: none; }
.flowfig--tall.is-open .flowfig__clip { max-height: none; }
.flowfig--tall.is-open .flowfig__clip::after { display: none; }
.flowfig__more { display: flex; position: relative; margin: -64px auto 0; }
.flowfig--tall.is-open .flowfig__more { margin-top: 16px; }
@media (max-width: 700px) { .flowfig__clip { max-height: 520px; } }
@media (min-width: 701px) { .flowfig--tall .flowfig__clip { max-height: none; } .flowfig--tall .flowfig__clip::after, .flowfig--tall .flowfig__more { display: none; } }   /* desktop shows the whole community flow */
/* the interface process: pages from other platforms in a strip, then paper, lo-fi and the navigation bar */
.pages { margin-top: 24px; overflow-x: auto; overflow-y: hidden; cursor: grab; scrollbar-width: thin; scrollbar-color: #444 transparent; }
.pages.is-dragging { cursor: grabbing; }
.pages img { display: block; height: 500px; width: auto; max-width: none; user-select: none; -webkit-user-drag: none; }
@media (max-width: 700px) { .pages img { height: 360px; } }
.wfsteps { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
.wfsteps a { display: block; overflow: hidden; border-radius: 8px; cursor: zoom-in; }
.wfsteps img { display: block; width: 100%; height: auto; }
.wfsteps figcaption { margin-top: 10px; font-size: 13px; color: var(--dim); }
.wfsteps figure:not(.wfsteps__wide) a { aspect-ratio: 16 / 10; background: #CDCDC4; }   /* paper and lo-fi share a frame, on their board's grey */
.wfsteps figure:not(.wfsteps__wide) img { height: 100%; object-fit: contain; }
.wfsteps__wide { grid-column: 1 / -1; }
.wfsteps__wide a { background: #fff; }
@media (max-width: 700px) { .wfsteps { grid-template-columns: 1fr; } }
/* the wireframe wall stays put while the page scrolls past: the picture is fixed to the screen, and the band is a window
   onto it (clip-path clips a fixed child, where overflow can't). With reduced motion it just fills the band. */
.wires { position: relative; margin-top: 32px; height: clamp(360px, 52vw, 700px); clip-path: inset(0); background: #0c0c0c; }
.wires a { display: block; height: 100%; cursor: zoom-in; }
.wires img { position: fixed; top: 0; left: 0; width: 100%; height: calc(100vh / 0.88); height: calc(100lvh / 0.88); max-width: none; object-fit: cover; object-position: 50% 0; }
/* (taller than the screen and pinned to the top, so the wall's bottom eighth, the frame's dark margin and its "Wireframes" label, stays out of view, as before) */
@media (prefers-reduced-motion: reduce) { .wires img { position: absolute; height: 100%; } }

/* the Final UI video: recorded from the prototype, it plays while it's in view (app.js [data-reel]) */
.reel { width: min(100%, calc((100vh - 150px) * 1.6)); margin: 8px 0 0; }   /* starts at the text's margin; short screens get a smaller video */
.cols + .reel { margin-top: 48px; }
.reel__frame { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: #111; box-shadow: 0 0 0 1px #1d1d1d; }
.reel__v { display: block; width: 100%; height: 100%; object-fit: cover; }
.reel__btn { position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(17, 17, 17, 0.82); color: var(--fg); box-shadow: inset 0 0 0 1px rgba(234, 235, 228, 0.16); opacity: 0.85; transition: opacity 200ms ease, transform 160ms var(--ease); }
.reel__btn:hover { opacity: 1; }
.reel__btn:active { transform: scale(0.94); }
.reel__btn svg { width: 18px; height: 18px; fill: currentColor; }
.reel__play, .reel.is-paused .reel__pause { display: none; }
.reel.is-paused .reel__play { display: block; }
.reel figcaption { margin-top: 12px; font-size: 13px; color: var(--dim); text-align: center; }
.reel__why { max-width: 760px; margin: 40px 0 0; font-size: 16px; line-height: 1.75; }
@media (max-width: 720px) { .reel__frame { border-radius: 10px; } .reel__btn { right: 10px; bottom: 10px; width: 38px; height: 38px; } .reel__why { margin-top: 28px; } }
.story { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(32px, 5vw, 72px); margin-top: 24px; }
.story__steps li { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; gap: 10px; opacity: 0.32; transition: opacity 400ms ease; }
.story__steps li.is-active { opacity: 1; }
.story__k { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--crimson); }
.story__steps h4 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); font-weight: 600; line-height: 1.3; color: var(--fg); }
.story__steps p { font-size: 16px; line-height: 1.7; max-width: 420px; }
.story__inline { display: none; }
.story__sticky { position: sticky; top: max(calc(var(--top-h) + 24px), calc(50vh - 15vw)); height: max-content; align-self: start; margin-top: 18vh; }
.story__frame { border-radius: 14px; overflow: hidden; border: 1px solid #2a2a2a; background: #0c0c0c; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9); }
.story__chrome { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: #161616; border-bottom: 1px solid #222; }
.story__chrome i { width: 9px; height: 9px; border-radius: 50%; background: #3a3a3a; }
.story__chrome span { margin-left: 10px; font-size: 11px; color: var(--dim); }
.story__screens { position: relative; aspect-ratio: 16 / 10; }
.story__screens img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 0); opacity: 0; transform: scale(1.03); transition: opacity 500ms ease, transform 900ms var(--ease); }
.story__screens img.is-on { opacity: 1; transform: none; }
@media (max-width: 860px) {
  .story { grid-template-columns: 1fr; }
  .story__sticky { display: none; }
  .story__steps li { min-height: 0; opacity: 1; padding-block: 28px; }
  .story__inline { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 10px; margin-top: 12px; border: 1px solid #222; }
}

.proto { display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; margin-top: clamp(72px, 10vw, 120px); border-radius: 18px; overflow: hidden; background: var(--band); text-decoration: none; }
.proto__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.proto__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 900ms var(--ease); }
.proto__text { display: grid; gap: 10px; justify-items: start; padding: clamp(24px, 4vw, 48px); }
.proto__k { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--crimson); }
.proto__t { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 600; line-height: 1.1; color: var(--fg); }
.proto__d { font-size: 15px; line-height: 1.65; margin-bottom: 10px; }
@media (hover: hover) and (pointer: fine) { .proto:hover .proto__img img { transform: scale(1.03); } }
@media (max-width: 760px) { .proto { grid-template-columns: 1fr; } }

.verdicts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 40px; margin-top: 40px; }
.verdicts li { padding-top: 18px; border-top: 1px solid #2a2a2a; }
.verdicts b { display: block; font-size: 18px; margin-bottom: 8px; }
.verdicts p { font-size: 15px; line-height: 1.65; }
#testing .narrow { margin-top: 40px; color: var(--dim); font-size: 15px; }
@media (max-width: 760px) { .verdicts { grid-template-columns: 1fr; } }

/* =========================================================
   Outcome + footer
   ========================================================= */
.outcome { padding-block: clamp(110px, 16vh, 180px); border-top: 1px solid var(--sep); background: radial-gradient(70% 60% at 12% 0%, rgba(8, 136, 151, 0.12), transparent 60%), radial-gradient(70% 60% at 100% 40%, rgba(203, 39, 66, 0.14), transparent 60%); }
.outcome__title { font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--crimson); }
.outcome__big { margin-top: 18px; max-width: 980px; font-size: clamp(1.6rem, 3.4vw, 2.7rem); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; color: var(--fg); }
/* on the road with ICC Camp: a dated timeline, the text beside its photos */
.road { margin-top: clamp(64px, 9vw, 104px); }
.roadsec { padding-block: clamp(110px, 16vh, 180px); }   /* the ICC road, now ahead of "What happened next" */
.roadsec .road { margin-top: 0; }
.road__k { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--crimson); }
.road__t { margin-top: 10px; max-width: 760px; font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 500; line-height: 1.45; color: var(--fg); }
.road__list { margin-top: 36px; }
.road__stop { position: relative; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: clamp(24px, 4vw, 56px); padding: 26px 0 30px 28px; border-left: 1px solid #2a2a2a; }
.road__stop::before { content: ""; position: absolute; left: -5px; top: 31px; width: 9px; height: 9px; border-radius: 50%; background: var(--crimson); }
.road__when { grid-column: 1; grid-row: 1; font-size: 13px; color: var(--dim); }
.road__stop h4 { grid-column: 1; grid-row: 2; margin-top: 6px; font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--fg); }
.road__stop > p:not(.road__when) { grid-column: 1; grid-row: 3; margin-top: 8px; font-size: 15px; line-height: 1.65; }
.road__shots { grid-column: 2; grid-row: 1 / span 4; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; }
.road__shots--one { grid-template-columns: minmax(0, 420px); }
.road__shots a { display: block; overflow: hidden; border-radius: 10px; background: var(--band); cursor: zoom-in; }
.road__shots img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 700ms var(--ease); }
.road__shots--one img { aspect-ratio: 16 / 9; }
@media (hover: hover) and (pointer: fine) { .road__shots a:hover img { transform: scale(1.04); } }
@media (max-width: 860px) {
  .road__stop { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .road__shots { grid-column: 1; grid-row: auto; margin-top: 16px; }
}
.trailer { margin-top: clamp(40px, 6vw, 64px); }
.trailer video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; background: #000; }
.trailer figcaption { margin-top: 12px; font-size: 13px; color: var(--dim); }
.road__src { margin-top: 18px; font-size: 12px; color: var(--dim); }

.credits { margin-top: 64px; padding-top: 28px; border-top: 1px solid #222; }
.credits__k { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin-bottom: 16px; }
.credits ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px 32px; }
.credits li { font-size: 15px; line-height: 1.55; }
.credits b { display: block; }
.links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 48px; }

.foot { background: #0b0b0b; }
.foot__band { --bh: clamp(44px, 6vw, 88px); height: var(--bh); overflow: hidden; background: var(--bg); }   /* the platform's pixel band (_dev/band/make_band.py, make_band_draw.py) */
/* drawn as in the second loading test (build.py band_draw, app.js [data-band]): each block's spine is stroked from end to
   end, its round cap the running dot, then the block itself appears and the stroke goes. Without the script, or with
   reduced motion, the band is simply there */
.foot__draw { display: block; height: var(--bh); max-width: none; fill: var(--crimson); }   /* as wide as its blocks at the band's height (build.py) */
.foot__draw .bd-s { fill: none; stroke: var(--crimson); stroke-width: 34.76; stroke-linecap: round; stroke-linejoin: miter; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.foot__draw.is-armed .bd-b { opacity: 0; }
.foot__draw.is-drawing .bd-s { animation: bd-draw var(--dur) linear var(--at) both, bd-done 1ms linear calc(var(--at) + var(--dur)) forwards; }
.foot__draw.is-drawing .bd-b { animation: bd-show 1ms linear var(--at) forwards; }
@keyframes bd-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes bd-done { to { visibility: hidden; } }
@keyframes bd-show { to { opacity: 1; } }
.foot__in { padding-block: 40px 48px; }
.foot__name { font-size: 22px; font-weight: 500; color: var(--fg); }
/* Vishrut's mark in place of his name (build.py VS_LOGO; the link or footer line keeps the name for screen readers),
   the height of a capital and a bit, in the text's colour */
.vs-logo { display: block; width: auto; height: 1.15em; fill: currentColor; }
.foot__meta { margin-top: 14px; font-size: 14px; }
.foot__meta a { text-decoration: none; color: var(--text); }
.foot__meta a:hover { color: var(--fg); }
.foot__small { margin-top: 10px; font-size: 12px; color: #5c5c5c; }

/* ---------- back to the top of the page: shows once you've scrolled past the methodology ---------- */
.totop { position: fixed; z-index: 40; left: 24px; bottom: 24px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--fg); background: rgba(17, 17, 17, 0.88); box-shadow: inset 0 0 0 1.5px #3a3a3a; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 250ms ease, transform 250ms var(--ease), box-shadow 200ms ease, visibility 0s linear 250ms; }
.totop.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.totop svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.totop:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .totop:hover { box-shadow: inset 0 0 0 1.5px var(--fg); } }
@media (max-width: 600px) { .totop { left: 16px; bottom: 16px; width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .totop { transform: none; transition: opacity 200ms ease, visibility 0s linear 200ms; } }
/* a menu of the top bar's sections, its button just above the back-to-top arrow (app.js [data-secnav]); a column on wider screens, the width of the screen on phones */
.secnav__btn { position: fixed; z-index: 40; left: 24px; bottom: 82px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--fg); background: rgba(17, 17, 17, 0.88); box-shadow: inset 0 0 0 1.5px #3a3a3a; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 250ms ease, transform 250ms var(--ease), box-shadow 200ms ease, visibility 0s linear 250ms; }
.secnav__btn.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.secnav__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.secnav__btn[aria-expanded="true"] { box-shadow: inset 0 0 0 1.5px var(--fg); }
.secnav:not([hidden]) { display: block; position: fixed; z-index: 45; left: 24px; bottom: 140px; width: 320px; max-height: min(70vh, 520px); overflow-y: auto; padding: 10px; border-radius: 16px; background: rgba(17, 17, 17, 0.98); box-shadow: inset 0 0 0 1.5px #3a3a3a; }
.secnav__k { margin: 10px 12px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--crimson); }
.secnav a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--fg); font-size: 15px; text-decoration: none; }
.secnav a[aria-current] { background: #222; }
@media (hover: hover) and (pointer: fine) { .secnav__btn:hover { box-shadow: inset 0 0 0 1.5px var(--fg); } .secnav a:not([aria-current]):hover { background: #1a1a1a; } }
@media (max-width: 760px) { .secnav:not([hidden]) { width: auto; right: 24px; } }
@media (max-width: 600px) { .secnav__btn { left: 16px; bottom: 70px; width: 44px; height: 44px; } .secnav:not([hidden]) { left: 16px; right: 16px; bottom: 124px; } }
@media (prefers-reduced-motion: reduce) { .secnav__btn { transform: none; transition: opacity 200ms ease, box-shadow 200ms ease, visibility 0s linear 200ms; } }

/* =========================================================
   Lightbox
   ========================================================= */
.lb { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(0, 0, 0, 0.96); color: var(--fg); overflow: hidden; opacity: 0; transition: opacity 250ms var(--ease), overlay 250ms allow-discrete, display 250ms allow-discrete; }
.lb[open] { opacity: 1; display: grid; grid-template-rows: auto 1fr; }
@starting-style { .lb[open] { opacity: 0; } }
.lb::backdrop { background: transparent; }
.lb__bar { display: flex; align-items: center; gap: 12px; padding: 12px var(--gut); border-bottom: 1px solid #1c1c1c; }
.lb__cap { flex: 1; font-size: 14px; color: #d0d0d0; }
.lb__count { font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; }
.lb__btn { height: 38px; min-width: 38px; padding: 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px #3a3a3a; font-size: 13px; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .lb__btn:hover { box-shadow: inset 0 0 0 1.5px var(--fg); } }
.lb__stage { position: relative; overflow: auto; display: grid; place-items: center; padding: 20px; overscroll-behavior: contain; }
.lb__img { max-width: 100%; max-height: calc(100dvh - 110px); width: auto; height: auto; object-fit: contain; border-radius: 6px; cursor: zoom-in; transform: scale(0.97); transition: transform 250ms var(--ease); }
.lb[open] .lb__img { transform: none; }
.lb.is-zoom .lb__stage { place-items: start; }
.lb.is-zoom .lb__img { max-width: none; max-height: none; cursor: zoom-out; }
.lb__nav { position: absolute; top: 50%; translate: 0 -50%; width: 48px; height: 48px; border-radius: 50%; background: rgba(28, 28, 28, 0.92); font-size: 28px; line-height: 1; box-shadow: inset 0 0 0 1px #3a3a3a; }
.lb__prev { left: 14px; }
.lb__next { right: 14px; }
.lb:not(.has-group) .lb__nav { display: none; }
/* phones: the brand book's pages (app.js openLb(…, "book")) keep their arrows under the page, not on it, as the book did */
@media (max-width: 700px) {
  .lb--book .lb__stage { padding-bottom: 92px; }
  .lb--book .lb__nav { top: auto; bottom: 22px; translate: none; }
  .lb--book .lb__prev { left: calc(50% - 60px); }
  .lb--book .lb__next { right: calc(50% - 60px); }
}

/* =========================================================
   Two ways in (index.html) and the work at a glance (work.html)
   ========================================================= */
/* the first screen: the full case study, or just the work. Asked once per visit; a link to a section skips it.
   The head script sets html.ways-open before anything paints, only when it should ask; app.js [data-ways] does the rest */
.ways { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; padding: calc(var(--top-h) + 24px) var(--gut) 48px; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); transition: opacity 320ms var(--ease); }
.ways:focus { outline: none; }
.ways-open .ways { display: grid; }
.ways.is-leaving { opacity: 0; pointer-events: none; }
.ways-open body { overflow: hidden; }
.ways__name { position: absolute; top: 0; left: var(--gut); display: flex; align-items: center; height: var(--top-h); padding-right: 14px; font-size: 14px; font-weight: 500; color: var(--fg); text-decoration: none; white-space: nowrap; }
.ways__in { width: min(100%, 760px); }
.ways__title { font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; color: var(--fg); }
.ways__lede { margin-top: 14px; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.5; font-weight: 300; color: #d6d6d6; }
.ways__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 48px; }
.ways__card { position: relative; display: grid; align-content: start; gap: 10px; min-height: 190px; padding: 24px 24px 68px; border: 0; border-radius: 14px; background: var(--band); color: var(--fg); font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: background-color 250ms ease, transform 300ms var(--ease); }
.ways__k { font-size: clamp(1.4rem, 2.2vw, 1.75rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
.ways__t { font-size: 15px; line-height: 1.5; color: var(--text); }
.ways__go { position: absolute; left: 24px; bottom: 22px; font-size: 22px; line-height: 1; color: var(--crimson); transition: transform 250ms var(--ease); }
.ways__card:focus-visible { outline: 2px solid var(--crimson); outline-offset: 3px; }
.ways__card:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .ways__card:hover { background: #1c1c1c; } .ways__card:hover .ways__go { transform: translateX(5px); } }
@media (max-width: 600px) {
  .ways { place-items: start center; padding-top: calc(var(--top-h) + 48px); }
  .ways__cards { grid-template-columns: 1fr; margin-top: 36px; }
  .ways__card { min-height: 0; padding-bottom: 60px; }
}
@media (prefers-reduced-motion: reduce) { .ways { transition: none; } }

/* the case study's way across to the showcase, under the impact boxes */
.hero__alt { margin-top: 28px; font-size: 15px; color: var(--text); }
.hero__alt a { color: var(--fg); font-weight: 600; text-underline-offset: 4px; }

/* ---------- the work at a glance (work.html), laid out the way Collins presents a case study ---------- */
.top--plain { grid-template-columns: 1fr auto; }
.wk-arrow { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wk-pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; margin-top: 32px; padding: 0 16px 0 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px #3a3a3a; color: var(--fg); font-size: 14px; font-weight: 500; text-decoration: none; transition: box-shadow 200ms ease; }
@media (hover: hover) and (pointer: fine) { .wk-pill:hover { box-shadow: inset 0 0 0 1px var(--fg); } }

/* the gallery: one row of tall cards in two widths, from the text's margin out past the screen's edge; swipe, drag,
   or use the arrows at its bottom right. It ends, as Collins' does, in a pile that opens every picture in the viewer */
.wk-gal { padding-block: clamp(72px, 10vh, 120px) clamp(56px, 8vh, 88px); }   /* room under the arrows, above the line */
/* the logo animation stays pinned behind the page until the page has covered it, so nothing after it is see-through */
.work main > section:not(.loop) { background-color: var(--bg); }
.wk-gal__strip { --h: clamp(280px, 38vw, 560px); --edge: max(var(--gut), calc((100vw - var(--wrap)) / 2)); display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-inline: var(--edge); scroll-padding-inline: var(--edge); scrollbar-width: none; cursor: grab; }
.wk-gal__strip::-webkit-scrollbar { display: none; }
.wk-gal__strip.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.wk-gal__strip a, .wk-gal__strip img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }   /* a drag scrolls the row, it doesn't pick up the picture */
.wk-gal__strip:focus-visible { outline: 2px solid var(--crimson); outline-offset: 4px; }
.wk-card { position: relative; flex: none; display: block; width: calc(var(--h) * 0.75); height: var(--h); overflow: hidden; border-radius: 16px; background: var(--band); scroll-snap-align: start; }
.wk-card--wide { width: calc(var(--h) * 1.5); }
.wk-card > img, .wk-card > video { display: block; width: 100%; height: 100%; object-fit: cover; }
a.wk-card { cursor: zoom-in; }
a.wk-card > img { transition: transform 800ms var(--ease); }
@media (hover: hover) and (pointer: fine) { a.wk-card:hover > img { transform: scale(1.03); } }
.wk-card--board { background: #fbfbfb; }
/* the acrylic mark (Vishrut's render, Figma 6001:5713), on black, with a prism-like glare drifting across it. The glare
   is blended with overlay, so the black stays black and only the acrylic takes the colour */
.wk-card--glass { background: #000; }
.wk-card--glass > img { position: absolute; left: 50%; top: 50%; width: auto; height: 128%; translate: -50% -50%; }   /* the mark large; the render's own black runs on into the card's */
.wk-card--glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px #1f1f1f; pointer-events: none; }   /* a hairline keeps the card's shape on the black page */
.wk-glare { position: absolute; inset: -40% -60%; background: linear-gradient(105deg, transparent 36%, rgba(255, 59, 107, 0.6) 43%, rgba(255, 210, 63, 0.55) 46.5%, rgba(70, 216, 106, 0.5) 49.5%, rgba(22, 199, 192, 0.55) 52.5%, rgba(47, 107, 255, 0.6) 55.5%, rgba(138, 60, 255, 0.55) 58.5%, transparent 66%); mix-blend-mode: overlay; pointer-events: none; animation: wk-glare 12s ease-in-out infinite alternate; }
.is-offscreen, .is-offscreen * { animation-play-state: paused !important; }   /* app.js: endless animations rest off screen */
@keyframes wk-glare { from { transform: translateX(-6%); } to { transform: translateX(6%); } }   /* about 100px either way: the band stays on the mark, drifting across it */
@media (prefers-reduced-motion: reduce) { .wk-glare { animation: none; } }
.wk-card--board > img { object-fit: contain; }
.wk-card--cx { background: var(--ivory); }
.wk-card--loader { background: #000; }
.wk-card .wk-fit { object-fit: contain; }
.wk-card .wk-left { object-position: 0 50%; }   /* the billboard: its wordmark sits on the left */
.wk-more { display: grid; place-items: center; align-content: center; gap: 24px; border: 0; background: transparent; color: var(--fg); font: inherit; cursor: zoom-in; }
.wk-pile { position: relative; width: 66%; aspect-ratio: 1; }
.wk-pile img { position: absolute; width: 72%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); transition: transform 400ms var(--ease); }
.wk-pile img:nth-child(1) { left: 0; top: 2%; transform: rotate(-8deg); }
.wk-pile img:nth-child(2) { left: 14%; top: 12%; transform: rotate(4deg); }
.wk-pile img:nth-child(3) { left: 28%; top: 24%; transform: rotate(-3deg); }
@media (hover: hover) and (pointer: fine) {
  .wk-more:hover .wk-pile img:nth-child(1) { transform: rotate(-12deg) translate(-6px, -4px); }
  .wk-more:hover .wk-pile img:nth-child(3) { transform: rotate(1deg) translate(6px, 4px); }
}
.wk-more__k { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.wk-more:focus-visible { outline: 2px solid var(--crimson); outline-offset: -2px; }
.wk-gal__foot { display: flex; justify-content: flex-end; margin-top: 16px; }
.wk-gal__nav { display: flex; gap: 8px; }
.reel--tile { width: auto; height: 100%; margin: 0; }
.reel--tile .reel__frame { height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
/* the brand book: its 40 pages roll up on their own (twice over, so the loop has no seam); hovering or leaving the screen pauses it */
.roll { display: block; width: 100%; height: 100%; padding: 0 10px; border: 0; overflow: hidden; background: #0d0d0d; cursor: zoom-in; }
.roll__track { display: block; animation: roll 160s linear infinite; }
.roll__track img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: 10px; border-radius: 4px; }
.roll.is-off .roll__track, .roll:hover .roll__track, .roll:focus-visible .roll__track { animation-play-state: paused; }
.roll:focus-visible { outline: 2px solid var(--crimson); outline-offset: -2px; }
@keyframes roll { to { transform: translateY(-50%); } }
/* the logo construction, drawn on a loop (app.js, data-construct="loop"); it fades out just before it starts again */
.cxtile { width: 100%; height: 100%; padding: 6%; transition: opacity 400ms ease; }
.cxtile svg { display: block; width: 100%; height: 100%; }
.cxtile.is-resting { opacity: 0; }
/* the colours, named on their own swatches */
.palette { display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); height: 100%; }
.palette li { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 12px 14px; background: var(--c); color: #fff; font-size: 12px; line-height: 1.3; }
.palette b { font-weight: 600; color: inherit; }
.palette small { font-size: 11px; opacity: 0.85; font-variant-numeric: tabular-nums; }
.palette .palette__light { color: var(--ink); }

/* the story beside its details: the details in a narrow column, the paragraph set large from 40% across, as Collins does */
.wk-story { padding-block: clamp(96px, 14vh, 160px) clamp(88px, 12vh, 140px); }
.wk-story__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 40px; align-items: start; }
.wk-story__meta { display: grid; gap: 18px; padding-top: 8px; }
.wk-story__meta dt { font-size: 15px; font-weight: 600; color: var(--fg); }
.wk-story__meta dd { margin-top: 4px; font-size: 15px; color: var(--text); }
@media (max-width: 700px) { .wk-story__meta { grid-template-columns: 1fr 1fr; gap: 18px 24px; } }   /* six details: two columns on phones, so the story isn't pushed down */
.wk-story__text { font-size: clamp(1.45rem, 2.3vw, 2.05rem); line-height: 1.28; font-weight: 400; letter-spacing: -0.015em; color: #ececec; }
.wk-story__text strong { font-weight: 600; color: var(--fg); }

/* the prototype and the brand book, side by side, each in a panel of its own: a heading, a line, a stack of its pages,
   and the way in */
.wk-feature { padding-block: clamp(64px, 9vh, 104px) clamp(96px, 14vh, 160px); }
/* the impact: the case study's four squares, under the prototype and the brand book */
.wk-impact { padding-block: clamp(64px, 9vh, 104px) clamp(96px, 14vh, 160px); }
.wk-feature__in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.wk-feature__panel { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(40px, 5vw, 72px) clamp(20px, 3vw, 40px); border-radius: 16px; background: var(--band); overflow: hidden; }
.wk-feature .wk-pill { margin-top: auto; }
button.wk-pill { border: 0; background: none; font-family: inherit; cursor: pointer; }
/* on the showcase, the way to the full case study stays at the bottom of the screen (Vishrut, 2026-10-23); the logo
   animation's scroll cue moves up above it, and the footer leaves room under its last line */
.wk-float { position: fixed; z-index: 40; left: 50%; bottom: 20px; translate: -50% 0; height: 44px; margin-top: 0; white-space: nowrap; background: rgba(17, 17, 17, 0.92); box-shadow: inset 0 0 0 1px #3a3a3a, 0 10px 28px rgba(0, 0, 0, 0.4); }
@media (hover: hover) and (pointer: fine) { .wk-float:hover { box-shadow: inset 0 0 0 1px var(--fg), 0 10px 28px rgba(0, 0, 0, 0.4); } }
.work .loop__cue { bottom: 80px; }
.work .foot__in { padding-bottom: 104px; }
button.wk-stack { padding: 0; border: 0; background: none; cursor: zoom-in; }
@media (max-width: 900px) { .wk-feature__in { grid-template-columns: 1fr; } }
.wk-feature__title { font-size: clamp(1.8rem, 2.6vw, 2.25rem); font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; color: var(--fg); }
.wk-feature__t { margin-top: 14px; max-width: 470px; font-size: 15px; line-height: 1.6; color: var(--text); }
.wk-stack { position: relative; display: block; width: min(100%, 520px); aspect-ratio: 16 / 12; margin: clamp(32px, 4vw, 48px) 0 clamp(32px, 4vw, 44px); }
.wk-stack img { position: absolute; width: 76%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 12px; box-shadow: 0 20px 44px rgba(0, 0, 0, 0.55); transform: rotate(-3deg); transition: transform 600ms var(--ease); }
.wk-stack img:nth-child(1) { right: 0; top: 18%; }
.wk-stack img:nth-child(2) { right: 12%; top: 9%; }
.wk-stack img:nth-child(3) { left: 0; top: 0; }
@media (hover: hover) and (pointer: fine) { .wk-feature__panel:hover .wk-stack img:nth-child(3) { transform: rotate(-4deg) translate(-6px, -6px); } }

/* the road, as press cards */
.wk-press { padding-block: clamp(64px, 9vh, 104px) clamp(110px, 16vh, 180px); }
.wk-press__title, .wk-impact__title { margin-bottom: 28px; font-size: clamp(1.6rem, 2.6vw, 2.15rem); font-weight: 600; letter-spacing: -0.01em; color: var(--fg); }
.wk-press__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wk-press__card { display: grid; gap: 6px; height: 100%; padding: 10px 10px 18px; border-radius: 16px; background: var(--band); color: var(--fg); text-decoration: none; cursor: zoom-in; }
.wk-press__img { display: block; aspect-ratio: 3 / 2; margin-bottom: 8px; overflow: hidden; border-radius: 10px; }
.wk-press__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--ease); }
.wk-press__k { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-inline: 6px; font-size: 15px; font-weight: 600; }
.wk-press__t { padding-inline: 6px; font-size: 13px; line-height: 1.5; color: var(--text); }
@media (hover: hover) and (pointer: fine) { .wk-press__card:hover img { transform: scale(1.03); } }

/* the sheets: the story and the gallery slide up over the page, as Collins' case studies open theirs (app.js [data-sheet]) */
html.has-sheet { overflow: hidden; }
.sheet { position: fixed; inset: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: var(--fg); overflow: clip; }   /* clip, not hidden: a scroll container would scroll to the focused close button as the sheet opens, cancelling its slide */
.sheet::backdrop { background: rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 400ms ease; }
.sheet.is-open::backdrop { opacity: 1; }
.sheet__panel { position: absolute; inset: 28px 0 0; overflow-y: auto; overscroll-behavior: contain; border-radius: 24px 24px 0 0; background: #101010; box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5); transform: translateY(100%); transition: transform 560ms var(--ease); }
.sheet.is-open .sheet__panel { transform: none; transition: transform 600ms var(--ease-sheet); }
.sheet__close { position: sticky; top: 20px; z-index: 2; float: right; display: grid; place-items: center; width: 48px; height: 48px; margin: 20px 20px 0 0; border: 0; border-radius: 50%; background: #232323; color: var(--fg); cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); }
.sheet__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sheet__close:focus-visible { outline: 2px solid var(--crimson); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .sheet__close:hover { background: #2e2e2e; } }
/* the story: the lead set large, the rest in a narrow column, then the team */
.sheet__story { width: min(100% - 2 * var(--gut), 660px); margin: 0 auto; padding-block: clamp(96px, 14vh, 140px) clamp(80px, 12vh, 120px); }
.sheet__story .sheet__lead { margin-bottom: clamp(36px, 6vh, 60px); font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; color: var(--fg); }
.sheet__story > p { font-size: clamp(1rem, 1.3vw, 1.18rem); line-height: 1.7; color: var(--text); }
.sheet__story > p + p { margin-top: 1.2em; }
.sheet__credits { margin-top: clamp(48px, 7vh, 72px); padding-top: 36px; border-top: 1px dotted #4a4a4a; }
.sheet__k { margin-bottom: 14px; font-size: 15px; font-weight: 600; color: var(--fg); }
.sheet__credits ul { display: grid; gap: 14px; }
.sheet__credits li { font-size: 15px; line-height: 1.5; color: var(--text); }
.sheet__credits b { display: block; font-weight: 600; color: var(--fg); }
.sheet__story .wk-pill { margin-top: 44px; }
/* the gallery: the work large, in rows of one and two */
.sheet__gallery { display: grid; gap: 16px; width: min(100% - 2 * var(--gut), 1280px); margin: 0 auto; padding-block: 96px clamp(64px, 10vh, 100px); }
.sheet__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sheet__row--one { grid-template-columns: minmax(0, 1fr); }
.sheet__pic, .sheet__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 16px; background: var(--band); }
.sheet__pic img, .sheet__pic video, .sheet__media { display: block; width: 100%; height: 100%; object-fit: cover; }
a.sheet__pic { cursor: zoom-in; }
a.sheet__pic img { transition: transform 800ms var(--ease); }
@media (hover: hover) and (pointer: fine) { a.sheet__pic:hover img { transform: scale(1.02); } }
.sheet__pic--board { background: #fbfbfb; }
.sheet__pic--board img { object-fit: contain; }
.sheet__pic--loader { background: #000; }
.sheet__pic--loader video { object-fit: contain; }
.sheet__row--tall .sheet__pic { aspect-ratio: 3 / 4; }   /* the render and the skulls, upright */
.sheet__pic--poster { aspect-ratio: 1000 / 659; }   /* the posters whole */
.sheet__pic--fit img { object-fit: contain; }
.sheet__pic--black { background: #000; }
.sheet__pic--palette .palette li { padding: 16px 20px; font-size: 14px; }
.sheet__pic--palette .palette small { font-size: 13px; }
@media (max-width: 700px) {
  .sheet__panel { inset: 16px 0 0; border-radius: 18px 18px 0 0; }
  .sheet__close { top: 14px; margin: 14px 14px 0 0; width: 44px; height: 44px; }
  .sheet__gallery, .sheet__row { gap: 12px; }
  .sheet__row { grid-template-columns: minmax(0, 1fr); }
  .sheet__pic, .sheet__media { border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) { .sheet__panel, .sheet.is-open .sheet__panel, .sheet::backdrop { transition: none; } }

@media (max-width: 800px) {
  .wk-story__in { grid-template-columns: 1fr; gap: 32px; }
  .wk-press__cards { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .wk-gal__strip { --h: 58vw; gap: 10px; }
  .wk-card { border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) { .roll__track { animation: none; } .cxtile, .wk-stack img, .wk-pile img { transition: none; } }

/* the brand book, as a book (app.js [data-book], StPageFlip): one page at a time, as large as the screen allows,
   turned like paper, with sticky notes along the top for the sections of the book's index */
html.has-book { overflow: hidden; }
.bk { position: fixed; inset: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: #070707; color: var(--fg); overflow: clip; opacity: 0; transition: opacity 250ms ease; }   /* clip: focus can't scroll it */
.bk::backdrop { background: transparent; }
.bk.is-open { opacity: 1; }
.bk__stage { position: absolute; inset: 64px 0 0; display: grid; place-items: center; padding-top: 48px; }   /* the 48px is for the sticky notes */
.bk__book { position: relative; justify-self: start; transform: translateY(24px); transition: transform 500ms var(--ease); }   /* placed from the left by app.js: the spread is wider than the screen */
.bk.is-open .bk__book { transform: none; }
/* the book's thickness: the edges of the pages under the ones showing, on both sides, and its shadow */
.bk__book::before { content: ""; position: absolute; inset: 0; border-radius: 2px; box-shadow: 2px 2px 0 #d9d9d2, 4px 4px 0 #c4c4bd, 6px 6px 0 #afafa8, -2px 2px 0 #d9d9d2, -4px 4px 0 #c4c4bd, -6px 6px 0 #afafa8, 0 40px 90px rgba(0, 0, 0, 0.7); }
.bk__flip { position: relative; z-index: 1; }
.bk__page { background: #1d1d1d; overflow: hidden; }
.bk__page img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; -webkit-user-select: none; }
.bk__page::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 4%); pointer-events: none; }   /* the shade by the spine */
.bk__page.--left::after { background: linear-gradient(to left, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 4%); }   /* a left-hand leaf's spine is on its right */
.bk__back i { position: absolute; inset: 0; }   /* a page's back: the colour the page is mostly made of (build.py page_back) */
.bk__inside { background: #1d1d1d; }   /* the inside of the cover */
.bk:not(.is-plain) .bk__flip > .bk__page { display: none; }   /* leaves not handed to the book yet */
.bk.is-plain .bk__page { position: relative; aspect-ratio: 16 / 10; }
.bk.is-plain .bk__page[hidden], .bk.is-plain .bk__back, .bk.is-plain .bk__inside { display: none; }
/* the sticky notes: tucked under the page's top edge; the section you're in stands up highest */
.bk__tabs { position: absolute; left: 0; right: 0; bottom: 100%; z-index: 0; display: flex; justify-content: flex-end; gap: clamp(6px, 1vw, 12px); padding: 0 clamp(12px, 3%, 36px); }
.bk__tab { --r: -1.5deg; flex: 0 1 136px; display: flex; align-items: flex-start; min-width: 0; height: 58px; margin-bottom: -18px; padding: 8px 12px 0; border: 0; border-radius: 3px 3px 1px 1px; background: var(--crimson) linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 45%); color: #fff; font: 600 13px/1.2 var(--f); text-align: left; white-space: nowrap; overflow: hidden; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45); transform: translateY(6px) rotate(var(--r)); transition: transform 300ms var(--ease); cursor: pointer; }   /* flex: a button would centre the label, down under the page's edge */
.bk__tab:nth-child(2) { --r: 1deg; background-color: var(--ocean); }
.bk__tab:nth-child(3) { --r: -0.5deg; background-color: var(--ivory); color: var(--ink); }
.bk__tab:nth-child(4) { --r: 1.5deg; }
.bk__tab:nth-child(5) { --r: -1deg; background-color: var(--ocean); }
.bk__tab.is-on { transform: translateY(0) rotate(var(--r)); }
@media (hover: hover) and (pointer: fine) { .bk__tab:hover { transform: translateY(-4px) rotate(var(--r)); } }
.bk__tab:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
@media (max-width: 700px) {
  .bk__stage { padding-bottom: 80px; }
  .bk__tab { height: 52px; margin-bottom: -16px; padding: 6px 6px 0; font-size: 10px; line-height: 1.05; white-space: normal; }   /* a long label takes two lines */
  .bk .lb__nav { top: auto; bottom: 22px; translate: none; }
  .bk .lb__prev { left: calc(50% - 60px); }
  .bk .lb__next { right: calc(50% - 60px); }
}
@media (prefers-reduced-motion: reduce) { .bk, .bk__book, .bk__tab { transition: none; } .bk__book { transform: none; } }