/* ============================================================================
   Build Showcase — one long page of live demos.
   Dark ground that drifts per section (body background is tweened by JS from
   each section's data-bg). Every demo carries a .tag naming the technique.
   ========================================================================== */

:root {
  --ground: #0E0C0A;
  --ink: #F4ECDF;
  --soft: #A79883;
  --faint: #6E6355;
  --line: rgba(244, 236, 223, .12);
  --line-2: rgba(244, 236, 223, .22);
  --panel: rgba(244, 236, 223, .04);
  --accent: #E9962E;
  --lamp: #FFB45C;
  --warm: #FFD9A8;

  --f-display: "Jost", "Instrument Sans", system-ui, sans-serif;
  --f-text: "Instrument Sans", system-ui, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --gutter: clamp(16px, 4vw, 56px);
  --maxw: 1320px;
  --r: 18px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 17px/1.55 var(--f-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: var(--accent); color: #14100C; }

/* ---- chrome --------------------------------------------------------------- */
.grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); }
  40% { transform: translate(3%, -2%); } 60% { transform: translate(-2%, -4%); }
  80% { transform: translate(4%, 2%); } 100% { transform: translate(0, 0); }
}
.rm .grain { animation: none; }

.progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 101; pointer-events: none; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--warm)); transform-origin: 0 50%; transform: scaleX(0); }

.bar {
  position: fixed; z-index: 100; top: 12px; left: 50%; transform: translateX(-50%);
  width: min(calc(100% - 24px), 1180px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 8px 8px 8px 16px; border-radius: 999px;
  background: rgba(14, 12, 10, .55); border: 1px solid var(--line);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.bar__mark { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 500 14px/1 var(--f-display); letter-spacing: .02em; white-space: nowrap; }
.bar__mark svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; }
.bar__mark em { font-style: normal; color: var(--soft); }
.bar__links { display: none; list-style: none; margin: 0; padding: 0; gap: 4px; }
.bar__links a { display: block; padding: 8px 12px; border-radius: 999px; text-decoration: none; font: 400 13px/1 var(--f-mono); color: var(--soft); transition: color .3s, background .3s; }
.bar__links a:hover, .bar__links a.is-on { color: var(--ink); background: rgba(244, 236, 223, .08); }
.bar__cta { padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #14100C; text-decoration: none; font: 500 13px/1 var(--f-text); white-space: nowrap; }
@media (min-width: 980px) { .bar__links { display: flex; } }

/* custom cursor (pointer devices only) */
.cursor { position: fixed; inset: 0 auto auto 0; z-index: 200; pointer-events: none; display: none; }
.js:not(.touch) .cursor { display: block; }
.cursor__dot, .cursor__ring { position: fixed; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -50%); }
.cursor__dot { width: 6px; height: 6px; background: var(--ink); mix-blend-mode: difference; }
.cursor__ring {
  width: 36px; height: 36px; border: 1px solid rgba(244, 236, 223, .5);
  display: grid; place-items: center;
  transition: width .35s var(--ease), height .35s var(--ease), background .35s, border-color .35s, opacity .25s;
}
.cursor__label { font: 500 11px/1 var(--f-mono); color: #14100C; opacity: 0; transition: opacity .2s; text-transform: uppercase; letter-spacing: .06em; }
.cursor.is-big .cursor__ring { width: 76px; height: 76px; background: var(--lamp); border-color: var(--lamp); }
.cursor.is-big .cursor__label { opacity: 1; }
.cursor.is-hover .cursor__ring { width: 56px; height: 56px; border-color: var(--lamp); }

/* ---- shared type ---------------------------------------------------------- */
.eyebrow { margin: 0 0 20px; font: 400 12px/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); display: flex; align-items: center; gap: 10px; }
.eyebrow span { color: var(--accent); }
.h2 { margin: 0; font: 500 clamp(40px, 7.4vw, 104px)/.96 var(--f-display); letter-spacing: -.03em; max-width: 14ch; }
.lede { margin: 26px 0 0; max-width: 52ch; font-size: clamp(16px, 1.4vw, 19px); color: var(--soft); }
.muted { color: var(--faint); font-style: normal; }
.tag {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line-2);
  font: 400 11px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--soft);
  background: rgba(14, 12, 10, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
}
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
/* the piece number; the index at the end lists what each one is */
.tag b { font-weight: 500; font-size: 12px; color: var(--ink); letter-spacing: .04em; }
/* a hint in two wordings: .m for a mouse, .t for touch */
.touch .tag .m, html:not(.touch) .tag .t { display: none; }
/* where a finger drives a piece (01, 09, 03), a sideways drag is the piece's and an up-down drag still scrolls */
.touch .hero, .touch .depth, .touch .glpin--particles .glpin__stage { touch-action: pan-y pinch-zoom; }

.split-line { overflow: clip; padding-bottom: .08em; margin-bottom: -.08em; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 26px; border-radius: 999px; border: 1px solid transparent;
  font: 500 15px/1 var(--f-text); text-decoration: none; white-space: nowrap;
  transition: background .3s, color .3s, border-color .3s;
}
.btn--solid { background: var(--ink); color: #14100C; }
.btn--solid:hover { background: var(--lamp); }
.btn--ghost { border-color: var(--line-2); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); }
.btn--big { padding: 22px 36px; font-size: 17px; }

/* ---- sections ------------------------------------------------------------- */
main { position: relative; }
.sec { position: relative; padding: clamp(110px, 16vh, 180px) 0 clamp(60px, 10vh, 120px); }
.sec__head { width: min(100% - 2 * var(--gutter), var(--maxw)); margin: 0 auto clamp(56px, 9vh, 110px); }
.card {
  position: relative; margin: 0; padding: 22px; border-radius: var(--r);
  background: var(--panel); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 18px; overflow: hidden;
}
.card figcaption { font-size: 14px; color: var(--soft); }

/* ======================================================= HERO */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__inner { position: relative; z-index: 2; width: min(100% - 2 * var(--gutter), var(--maxw)); margin: 0 auto; padding: 140px 0 40px; }
.hero__eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 16px var(--lamp); }
.hero__title { margin: 0; font: 500 clamp(56px, 12.5vw, 196px)/.88 var(--f-display); letter-spacing: -.045em; }
.hero__title em { font-style: normal; font-weight: 300; color: var(--warm); }
.hero__lede { margin: 30px 0 0; max-width: 46ch; font-size: clamp(16px, 1.5vw, 20px); color: rgba(244, 236, 223, .78); min-height: 4.6em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero__tag { margin-bottom: 26px; }

/* ======================================================= STORIES: 08 film, 09 layers, 10 three moods */
/* A. film */
.film { position: relative; height: 100svh; }
.film__frame {
  position: absolute; inset: 0; overflow: hidden;
  clip-path: inset(10% 8% 10% 8% round 28px);
}
.phfilm { position: absolute; inset: 0; overflow: hidden; background: #0A0806; }
.phfilm video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 3; }
/* 08: a corridor of arched walls in CSS 3D. The camera (the world's
   translateZ) moves with the scroll; JS fogs each wall by its distance. */
.corr { position: absolute; inset: 0; overflow: hidden; background: #120C09; perspective: 700px; perspective-origin: 50% 46%; }
.corr__world { position: absolute; inset: 0; transform-style: preserve-3d; }
.corr__wall { position: absolute; left: 50%; top: 50%; width: 100vmin; height: 100vmin; max-width: none; margin: -50vmin 0 0 -50vmin; overflow: visible; }
.corr__wall path { fill-rule: evenodd; }
.corr__wall .rim { fill: none; stroke: #FFB45C; stroke-width: 3; }
.corr__floor {
  position: absolute; left: 50%; top: calc(50% + 40vmin); width: 30vmin; height: 5800px; margin-left: -15vmin;
  transform-origin: 50% 0; transform: translateZ(300px) rotateX(-90deg);
  background:
    repeating-linear-gradient(180deg, transparent 0 278px, rgba(255, 200, 140, .1) 278px 280px),
    linear-gradient(90deg, transparent 30%, rgba(255, 190, 120, .16) 50%, transparent 70%),
    linear-gradient(180deg, #160F0B 0%, #2B1B12 55%, #7A4520 92%, #C9752F 100%);
}
.corr__end {
  position: absolute; left: 50%; top: 50%; width: 260vmin; height: 260vmin; margin: -130vmin 0 0 -130vmin;
  transform: translateZ(-5600px);
  background: radial-gradient(circle at 50% 50%, #FFF4DE 0, #FFD08A 5%, #E07A2E 11%, #6B2A10 20%, #23110A 32%, #120C09 46%);
}
.corr__haze { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(255, 170, 90, .14), transparent 70%), linear-gradient(180deg, rgba(18,12,9,.5), transparent 25%, transparent 75%, rgba(18,12,9,.6)); }
.film__hud { position: absolute; z-index: 5; top: 13%; left: 10%; right: 10%; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.film__tc { font: 500 13px/1 var(--f-mono); color: var(--ink); letter-spacing: .06em; padding: 6px 10px; border-radius: 6px; background: rgba(0,0,0,.35); }
.film__copy { position: absolute; z-index: 5; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: grid; place-items: center; padding: 0 var(--gutter); }
.film__line { grid-area: 1 / 1; margin: 0; text-align: center; max-width: 16ch; font: 500 clamp(34px, 6vw, 88px)/1 var(--f-display); letter-spacing: -.03em; text-shadow: 0 4px 40px rgba(0,0,0,.5); opacity: 0; }
.film__bar { position: absolute; z-index: 5; left: 10%; right: 10%; bottom: 16%; height: 2px; background: rgba(244,236,223,.2); }
.film__bar i { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }


/* C. depth */
.depth { position: relative; height: 100svh; margin-top: 14vh; }
.depth__stage { position: absolute; inset: 0; overflow: hidden; }
.depth__sky { position: absolute; inset: 0; background: linear-gradient(180deg, #0C1124 0%, #26315C 38%, #8C5677 62%, #E9946A 80%, #FFC98F 100%); }
.depth__sun { position: absolute; left: 50%; top: 36%; width: 44vmin; aspect-ratio: 1; margin-left: -22vmin; border-radius: 50%;
  background: radial-gradient(circle, #FFF4DE 0, #FFE2B4 18%, rgba(255, 214, 160, .55) 26%, rgba(255, 190, 130, .18) 45%, rgba(255, 190, 130, 0) 70%); }
.depth__birds { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.depth__birds path { fill: none; stroke: #3A2540; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.depth__layer { position: absolute; left: -6%; width: 112%; max-width: none; bottom: -2%; height: 72%; }
.depth__pines { fill: #0D0914; }
/* on narrow screens the ridges would squeeze into spikes: give them width to keep their shape */
@media (max-width: 720px) { .depth__layer { left: -90%; width: 280%; } }
/* mist: soft bands that sit just above a ridge */
.depth__mist { position: absolute; left: -10%; right: -10%; height: 16%; border-radius: 50%; pointer-events: none; filter: blur(18px);
  background: linear-gradient(180deg, transparent, rgba(255, 228, 220, .32) 50%, transparent); }
.depth__mist--0 { bottom: 34%; opacity: .7; }
.depth__mist--1 { bottom: 26%; opacity: .55; }
.depth__mist--2 { bottom: 17%; opacity: .45; }
.depth__title { position: absolute; left: 0; right: 0; top: 30%; margin: 0; text-align: center; font: 500 clamp(40px, 8vw, 128px)/.92 var(--f-display); letter-spacing: -.04em; color: #FFF4E2; text-shadow: 0 10px 60px rgba(30,10,40,.5); }
.depth__tag { position: absolute; left: var(--gutter); top: 90px; z-index: 3; }

/* D. wipe */
.wipe { position: relative; height: 100svh; }
.wipe__stage { position: absolute; inset: 0; overflow: hidden; display: grid; place-items: center; }
/* 10: three states of one screen and two wipes. State B floods over A from
   the lower-left corner with a living edge (a clip-path polygon redrawn each
   frame) led by a thin ring; then blinds sweep in from alternating sides and
   state C's lines rise. */
.ws { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 0 var(--gutter); }
.ws__big { margin: 0; font: 500 clamp(44px, 9vw, 150px)/.9 var(--f-display); letter-spacing: -.045em; }
.ws__count { position: absolute; top: 96px; right: var(--gutter); margin: 0; font: 500 12px/1 var(--f-mono); letter-spacing: .14em; opacity: .55; }
.ws--a { background: #0E0C0A; color: var(--ink); }
.ws--a .ws__big { color: #EFE6D8; }
.ws--b { background: radial-gradient(ellipse at 22% 78%, #F4A646 0%, #E9962E 45%, #D9781C 100%); color: #1A0F06; clip-path: circle(0px at 22% 78%); }
.ws--b .ws__big { font-weight: 600; }
.ws--b .ws__big em { font-weight: 300; font-style: italic; }
.ws__ring { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; overflow: visible; }
.ws__ring path { fill: none; stroke: #FFC77D; stroke-width: 1.5; }
.ws__blinds { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(10, 1fr); pointer-events: none; }
.ws__blinds i { background: #F2ECE2; transform: scaleX(0); }
.ws__blinds i:nth-child(odd) { transform-origin: 0 50%; }
.ws__blinds i:nth-child(even) { transform-origin: 100% 50%; }
.ws--c { background: transparent; color: #1B2A4A; pointer-events: none; }
.ws--c .ws__big span { display: inline-block; }
.ws--c .ws__big span:last-child { font-weight: 300; font-style: italic; color: #C2541F; }
.ws--c .ws__count { opacity: 0; }
.ws--c .ws__big { opacity: 0; }
.wipe__tag { position: absolute; left: var(--gutter); top: 90px; z-index: 3; }

/* ======================================================= WORDS: 11, 13, 12; and 02, the word you fly into */
.typeblock { width: min(100% - 2 * var(--gutter), var(--maxw)); margin: 0 auto clamp(90px, 16vh, 180px); display: flex; flex-direction: column; gap: 26px; }
/* 11: one manifesto, five ways for it to arrive */
.manifesto { gap: 22px; }
.manifesto__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; max-width: 1040px; }
.manifesto__who { margin: 0; font: 500 15px/1.4 var(--f-text); color: var(--ink); }
.manifesto__who span { color: var(--faint); }
.manifesto__label { margin: 10px 0 0; font: 500 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lamp); }
.manifesto__text { margin: 0; max-width: 24ch; font: 500 clamp(32px, 5vw, 76px)/1.06 var(--f-display); letter-spacing: -.03em; color: var(--ink); perspective: 900px; }
.manifesto__text em { font-style: italic; font-weight: 400; color: var(--lamp); }

/* 13: a split-flap departures board. Each tile is two halves of one glyph
   plus two flaps that fall when the character changes. Sizes are in em, so
   the whole board scales with its font size. */
.flapblock { gap: 22px; }
.board { --cell: 1.18em; --gap: .14em; font: 600 clamp(9px, 2.45vw, 26px)/1 var(--f-mono); color: #F2EBDD; padding: 1.2em 1.1em 1.3em; border-radius: 14px; background: linear-gradient(180deg, #121214, #0A0A0B); box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 40px 80px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.04); width: max-content; max-width: 100%; }
.board__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .9em; }
.board__title { font: 600 .62em/1 var(--f-mono); letter-spacing: .3em; text-transform: uppercase; color: var(--lamp); }
.board__clock { display: flex; gap: var(--gap); }
/* the columns are measured at the board's own size (em), only the labels are small */
.board__cols { display: grid; grid-template-columns: calc(5 * var(--cell) + 4 * var(--gap)) calc(10 * var(--cell) + 9 * var(--gap)) calc(3 * var(--cell) + 2 * var(--gap)) auto; column-gap: .9em; margin-bottom: .45em; }
.board__cols span { font: 500 .42em/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: #6E6A72; padding-left: .25em; }
.board__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .32em; }
.board__rows li { display: flex; gap: .9em; cursor: default; }
.board__group { display: flex; gap: var(--gap); }
.flap { position: relative; width: var(--cell); height: 1.6em; perspective: 6em; }
.flap > span { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background: linear-gradient(180deg, #232326, #1B1B1E); border-radius: .14em .14em 0 0; }
.flap > span > b { display: block; height: 1.6em; line-height: 1.6em; text-align: center; font-weight: 600; }
.flap .t, .flap .ft { top: 0; }
.flap .b, .flap .fb { top: 50%; border-radius: 0 0 .14em .14em; background: linear-gradient(180deg, #1A1A1D, #151517); }
.flap .b > b, .flap .fb > b { margin-top: -.8em; }
.flap .ft { transform-origin: 50% 100%; backface-visibility: hidden; }
.flap .fb { transform-origin: 50% 0; backface-visibility: hidden; transform: rotateX(90deg); }
.flap::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - .5px); height: 1px; background: rgba(0,0,0,.75); z-index: 3; }
.board__rows li.is-boarding .board__status b { color: var(--lamp); }
.board__rows li.is-delayed .board__status b { color: #FF7A6B; }
.board__rows li.is-gate .board__status b { color: #8FE3A0; }
.board__rows li:hover .flap > span { background: linear-gradient(180deg, #2A2A2E, #202024); }
.board__note { margin: 0; font: 400 11px/1 var(--f-mono); color: var(--faint); }

/* 12: a festival lineup on four running rows, big and slow to small and quick */
.lineup { gap: 18px; margin-bottom: 26px; }
.lineup__note { margin: 0; font: 400 11px/1.5 var(--f-mono); color: var(--faint); }
.touch .lineup__note .m, html:not(.touch) .lineup__note .t { display: none; }
.lineup__poster { overflow: hidden; padding: 30px 0 18px; border-block: 1px solid var(--line); margin-bottom: clamp(90px, 16vh, 180px); }
.lineup__row { display: flex; width: max-content; white-space: nowrap; font-family: var(--f-display); line-height: 1.02; will-change: transform; }
.lineup__row b, .lineup__row em, .lineup__row i { font-style: normal; font-weight: inherit; }
.lineup__row--1 { --fs: clamp(52px, 9.6vw, 156px); font-size: var(--fs); font-weight: 500; letter-spacing: -.035em; color: var(--ink); }
/* outlined: a stroke under a fill of the section's ground, so the overlaps
   inside the variable font's letters don't show as stray lines */
.lineup__row--2 { font-size: clamp(38px, 6.2vw, 100px); font-weight: 500; letter-spacing: -.03em; color: #0B0B0E; -webkit-text-stroke: max(2px, .03em) var(--soft); paint-order: stroke fill; }
.lineup__row--3 { font-size: clamp(26px, 3.9vw, 62px); font-weight: 400; letter-spacing: -.02em; color: var(--soft); }
.lineup__row--4 { margin-top: 16px; font: 400 clamp(11px, 1vw, 13px)/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.lineup__row .sep { margin: 0 .3em; color: var(--faint); -webkit-text-stroke: 0; }
/* the day, set small at cap height before each headliner */
.lineup__row i { display: inline-block; vertical-align: top; margin: calc(var(--fs) * .17) calc(var(--fs) * .07) 0 0; font: 500 max(10px, calc(var(--fs) * .13))/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--lamp); }
.act { position: relative; display: inline-block; transition: color .35s, -webkit-text-stroke-color .35s; }
.act.is-on { color: var(--lamp); -webkit-text-stroke-color: transparent; }
/* the act's slot, a small pill just above its capitals */
.act::after {
  content: attr(data-slot); position: absolute; left: 0; top: 15%; z-index: 2;
  padding: 6px 9px; border-radius: 999px; background: var(--lamp); color: #14100C; -webkit-text-stroke: 0;
  font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; transform: translateY(-100%); transition: opacity .25s, transform .45s var(--ease); pointer-events: none;
}
.act.is-on::after { opacity: 1; transform: translateY(calc(-100% - 8px)); }

/* 02: a word you fly into, with the northern lights inside */
.aurora { position: relative; height: 100svh; }
.aurora__stage { position: absolute; inset: 0; overflow: hidden; background: #0B0B0E; }
.aurora__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.aurora__top { position: absolute; left: var(--gutter); right: var(--gutter); top: 90px; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.aurora__note { margin: 0; font: 400 11px/1.4 var(--f-mono); color: rgba(244, 236, 223, .62); text-shadow: 0 1px 10px rgba(0, 0, 0, .8); }
/* the fictional company's hero: the pitch, and a booking card beside it (below it on narrow screens) */
.aurora__copy { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: 7vh; display: flex; flex-direction: column; gap: 22px; }
.aurora [data-in] { opacity: 0; visibility: hidden; }
/* a soft shade under the copy, so it reads wherever the lights are */
.aurora__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(5, 8, 13, .88) 0%, rgba(5, 8, 13, .6) 34%, rgba(5, 8, 13, 0) 62%); }
.aurora__lead { display: grid; gap: 10px; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
.aurora__lead > * { margin: 0; }
.aurora__brand { font: 500 12px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: #8FE8C0; }
.aurora__line { font: 500 clamp(40px, 6.4vw, 96px)/1 var(--f-display); letter-spacing: -.03em; color: var(--ink); }
.aurora__sub { max-width: 44ch; text-wrap: balance; font-size: clamp(15px, 1.4vw, 19px); color: rgba(244, 236, 223, .76); }
.aurora__facts { list-style: none; padding: 0; margin-top: 6px !important; display: flex; flex-wrap: wrap; gap: 8px; }
.aurora__facts li { padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(244, 236, 223, .18); background: rgba(8, 12, 18, .35); font: 400 12px/1 var(--f-mono); color: var(--ink); }
.trip {
  width: min(100%, 360px); padding: 16px; border-radius: 18px; display: grid; gap: 12px;
  background: rgba(8, 12, 18, .5); border: 1px solid rgba(244, 236, 223, .14);
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
}
.trip__head { display: flex; justify-content: space-between; align-items: center; font: 500 13px/1 var(--f-text); color: var(--ink); }
.trip__season { display: inline-flex; align-items: center; gap: 7px; font: 400 11px/1 var(--f-mono); color: #8FE8C0; }
.trip__season i { width: 7px; height: 7px; border-radius: 50%; background: #8FE8C0; box-shadow: 0 0 0 0 rgba(143, 232, 192, .6); animation: seasonPulse 2.2s ease-out infinite; }
@keyframes seasonPulse { 0% { box-shadow: 0 0 0 0 rgba(143, 232, 192, .55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(143, 232, 192, 0); } }
.trip__dates { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.trip__dates button {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 11px; border: 1px solid rgba(244, 236, 223, .1); background: rgba(244, 236, 223, .03);
  font: 500 14px/1 var(--f-text); color: var(--ink); text-align: left; transition: border-color .25s, background .25s;
}
.trip__dates button span { font: 400 11px/1 var(--f-mono); color: var(--soft); transition: color .25s; }
.trip__dates button:hover:not(:disabled) { border-color: rgba(143, 232, 192, .4); }
.trip__dates button.is-on { border-color: #8FE8C0; background: rgba(143, 232, 192, .1); }
.trip__dates button.is-on span { color: #8FE8C0; }
.trip__dates button:disabled { cursor: default; color: var(--faint); text-decoration: line-through; text-decoration-color: rgba(244, 236, 223, .25); }
.trip__dates button:disabled span { color: var(--faint); }
.trip__book {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 15px 18px; border: 0; border-radius: 999px;
  background: #8FE8C0; color: #08130F; font: 600 15px/1 var(--f-text); transition: background .3s;
}
.trip__book:hover { background: #B5F2D6; }
.trip__book svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.trip__book.is-done { background: var(--ink); }
.trip__book .ck, .trip__book.is-done .ar { display: none; }
.trip__book.is-done .ck { display: block; }
.trip__note { margin: 0; text-align: center; font: 400 11px/1.4 var(--f-mono); color: var(--soft); }
@media (min-width: 1100px) {
  .aurora__copy { flex-direction: row; justify-content: space-between; align-items: flex-end; bottom: 9vh; }
}
@media (max-width: 699px) {
  /* the dates as three chips in a row */
  .trip { width: 100%; padding: 14px; gap: 10px; }
  .trip__dates { grid-template-columns: repeat(3, 1fr); }
  .trip__dates button { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px; font-size: 13px; }
  .aurora__copy { gap: 16px; }
}
.rm .trip__season i { animation: none; }

/* ======================================================= DRAWINGS: 07 the bike, 18 weather, 17 the delivery */
/* 07: a frame builder's drawing that becomes the bike (pinned, full screen) */
.bp { position: relative; height: 100svh; margin-bottom: clamp(70px, 12vh, 140px); }
.bp__stage {
  position: absolute; inset: 0; overflow: hidden; background-color: #0A1524;
  background-image: linear-gradient(rgba(127, 212, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(127, 212, 255, .06) 1px, transparent 1px);
  background-size: 40px 40px; background-position: center center;
}
.bp__studio { position: absolute; inset: 0; opacity: 0; background: radial-gradient(120% 90% at 50% 38%, #F6F3EE 0%, #E9E4DB 55%, #D9D2C6 100%); }
.bp__top { position: absolute; left: var(--gutter); right: var(--gutter); top: 90px; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.bp__note { margin: 0; font: 400 11px/1.4 var(--f-mono); color: rgba(178, 222, 255, .72); transition: color .6s; }
.bp.is-studio .bp__note { color: rgba(20, 16, 12, .62); }
.bp__top .tag { transition: background .6s; }
.bp.is-studio .bp__top .tag, .rm .bp__top .tag { background: rgba(20, 16, 12, .82); }
/* the opening line, before the drawing starts */
.bp__intro { position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0 var(--gutter); display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; gap: 0 .24em; text-align: center; pointer-events: none; font: 500 clamp(46px, 8.4vw, 132px)/1 var(--f-display); letter-spacing: -.035em; color: #E3F5FF; }
.bp__intro .w { display: inline-block; overflow: hidden; padding: 0 .02em .1em; margin-bottom: -.1em; vertical-align: bottom; }
.bp__intro .w > * { display: inline-block; }
.bp__intro em { font-style: italic; font-weight: 400; color: #8AD8FF; }
.rm .bp__intro { display: none; }
/* the drawing: kept well inside the screen, with room for the copy below */
.bp__art { position: absolute; z-index: 1; left: max(var(--gutter), calc(50% - 560px)); right: max(var(--gutter), calc(50% - 560px)); top: 150px; bottom: 210px; }
.bike { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bk-con path { fill: none; stroke: rgba(127, 212, 255, .3); stroke-width: 1; stroke-dasharray: 12 4 2 4; }
.bk-line { fill: none; stroke: #8AD8FF; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.bk-spoke { stroke-width: .8; }
.bk-dim path { fill: none; stroke: rgba(255, 208, 138, .8); stroke-width: 1; }
.bk-dim text { font: 500 12px var(--f-mono); letter-spacing: .06em; fill: #FFD08A; }
.bk-title rect, .bk-title path { fill: none; stroke: rgba(138, 216, 255, .5); stroke-width: 1; }
.bk-title text { font: 500 10.5px var(--f-mono); letter-spacing: .08em; fill: rgba(178, 222, 255, .85); }
/* the finished bike: hidden until the drawing turns into it */
.bk-paint, .bk-shadow { opacity: 0; }
.bk-shadow { fill: rgba(40, 30, 20, .2); filter: blur(6px); }
.bk-frame { fill: var(--frame, #1F4D3A); stroke: rgba(0, 0, 0, .22); stroke-width: 1; transition: fill .7s var(--ease); }
.bk-tyre { fill: none; stroke: #1A1A1D; }
.bk-gum { fill: none; stroke: #C59C6E; }
.bk-rim { fill: none; stroke: #C4C9D0; }
.bk-hub { fill: #C4C9D0; }
.bk-metal { fill: #C2C8D0; stroke: rgba(0, 0, 0, .28); stroke-width: .8; }
.bk-ringhole { fill: #8F969F; }
.bk-dark { fill: #2A2A2F; }
.bk-chain { fill: none; stroke: #3B3B42; stroke-width: 3; stroke-linecap: round; }
.bk-tape, .bk-leather { fill: #6E4529; stroke: rgba(0, 0, 0, .25); stroke-width: .8; }
.bk-badge { fill: #E9962E; }
.bp__info { position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: clamp(28px, 6vh, 56px); display: grid; gap: 8px; justify-items: start; color: #14100C; visibility: hidden; }
.bp__info > p { margin: 0; }
.bp__model { font: 500 clamp(28px, 3.4vw, 46px)/1 var(--f-display); letter-spacing: -.02em; }
.bp__line { font-size: clamp(15px, 1.3vw, 18px); color: rgba(20, 16, 12, .72); }
.bp__price { font: 500 11.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(20, 16, 12, .58); }
.bp__paint { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.bp__paint button {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 7px; border-radius: 999px;
  border: 1px solid rgba(20, 16, 12, .16); background: rgba(255, 255, 255, .55); font: 500 13px/1 var(--f-text); color: #14100C;
  transition: border-color .25s, background .25s;
}
.bp__paint button i { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16); }
.bp__paint button:hover { border-color: rgba(20, 16, 12, .45); }
.bp__paint button.is-on { border-color: #14100C; background: #fff; }
@media (min-width: 1100px) {
  .bp__info { left: auto; right: var(--gutter); justify-items: end; text-align: right; }
  .bp__art { top: 160px; bottom: 175px; }
}
.rm .bp { height: auto; }
.rm .bp__stage { position: relative; min-height: 100svh; }
.rm .bp__studio, .rm .bk-paint, .rm .bk-shadow { opacity: 1; }
.rm .bk-con, .rm .bk-lines, .rm .bk-dim, .rm .bk-title { display: none; }
.rm .bp__info { visibility: visible; }
.rm .bp__note { color: rgba(20, 16, 12, .62); }

/* 17 and 18, side by side on wide screens, the delivery wider */
.shapes2 { width: min(100% - 2 * var(--gutter), var(--maxw)); margin: 0 auto; display: grid; gap: 18px; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 1100px) { .shapes2 { grid-template-columns: 7fr 5fr; } }
/* in Apps it follows the roaster's grid */
.shapes2--apps { margin-top: 18px; }

/* 18: a weather widget; its icon, curve and colours change shape with the day */
.wxcard { gap: 16px; }
.wx {
  --wx-a: #F59E42; --wx-b: #D9572F;
  position: relative; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 22px; border-radius: 16px; color: #fff;
  background: linear-gradient(160deg, var(--wx-a), var(--wx-b)); overflow: hidden;
}
.wx::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(80% 60% at 85% 0%, rgba(255, 255, 255, .22), transparent 70%); }
.wx > * { position: relative; z-index: 1; }
.wx__defs { position: absolute; width: 0; height: 0; }
.wx__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.wx__top p { margin: 0; }
.wx__place { font: 600 20px/1.1 var(--f-text); }
.wx__day { margin-top: 4px !important; font-size: 14px; opacity: .8; }
.wx__note { padding: 5px 9px; border-radius: 999px; background: rgba(0, 0, 0, .16); font: 400 10.5px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.wx__now { display: flex; align-items: center; gap: 14px; }
.wx__icon { width: clamp(110px, 12vw, 150px); height: auto; flex: none; overflow: visible; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .18)); }
.wx__read p { margin: 0; }
.wx__temp { font: 300 clamp(64px, 7vw, 92px)/.9 var(--f-display); letter-spacing: -.04em; }
.wx__cond { margin-top: 6px !important; font: 500 16px/1.2 var(--f-text); }
.wx__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; opacity: .88; }
.wx__meta b { font-weight: 600; }
.wx__chart { width: 100%; height: auto; overflow: visible; }
.wx__area { fill: rgba(255, 255, 255, .16); }
.wx__line { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.wx__dot { fill: #fff; }
.wx__val { font: 600 11px var(--f-text); fill: #fff; text-anchor: middle; }
.wx__hours text { font: 400 10px var(--f-mono); fill: rgba(255, 255, 255, .7); text-anchor: middle; }
.wx__days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.wx__days button {
  display: grid; justify-items: center; gap: 4px; padding: 9px 2px 8px; border-radius: 12px; border: 1px solid transparent;
  background: rgba(0, 0, 0, .12); color: #fff; font: 500 12px/1 var(--f-text); transition: background .3s, border-color .3s;
}
.wx__days button svg { width: 30px; height: 30px; }
.wx__days button b { font-weight: 600; font-size: 13px; }
.wx__days button:hover { background: rgba(0, 0, 0, .2); }
.wx__days button.is-on { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .5); }

/* 17: an order on its way across a drawn town */
.dlcard { gap: 14px; }
.dl__note { margin: -4px 0 0; font: 400 11px/1.4 var(--f-mono); color: var(--faint); }
.dl { display: grid; gap: 14px; flex: 1; }
.dl__map { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.dmap { width: 100%; height: auto; }
.dm-ground { fill: #1B232D; }
.dm-st { stroke: #1B232D; }
.dm-block { fill: #131A22; }
.dm-bldg { fill: #19222D; }
.dm-bank { fill: none; stroke: #20425A; stroke-width: 1.5; }
.dm-bank, .dm-river { pointer-events: none; }
rect.dm-bank { fill: #142019; stroke: none; }
.dm-river { fill: #0E2537; }
.dm-park { fill: #14261C; }
.dm-parkpath { fill: none; stroke: #1E3A2A; stroke-width: 3; stroke-linecap: round; }
.dm-tree { fill: #1C3A27; }
.dm-bridge { fill: #222C38; }
.dm-rail { stroke: #3A4858; stroke-width: 1.2; }
.dm-label { font: 500 8px var(--f-mono); letter-spacing: .14em; fill: #5E6E80; }
.dm-plan { fill: none; stroke: rgba(255, 180, 92, .1); stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
.dm-todo { fill: none; stroke: rgba(244, 236, 223, .5); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; }
.dm-trail { fill: none; stroke: var(--lamp); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.dm-light rect { fill: #0B0F14; stroke: #3A4858; stroke-width: 1; }
.dm-light circle { fill: #2B333D; transition: fill .2s; }
.dm-light .dm-green { fill: #3BD27A; }
.dm-light.is-red .dm-red { fill: #FF5A4E; }
.dm-light.is-red .dm-green { fill: #2B333D; }
.dm-pin circle { fill: #0E1319; stroke: var(--lamp); stroke-width: 2; }
.dm-pin path { fill: none; stroke: var(--lamp); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dm-pin text { font: 500 10px var(--f-text); fill: var(--ink); }
.dm-pin--to .dm-ring { fill: none; stroke: #8FE8C0; opacity: 0; transform-box: fill-box; transform-origin: center; }
.dm-pin--to .dm-check { stroke: #0E1319; stroke-width: 2.2; opacity: 0; }
.dm-pin--to.is-done circle:not(.dm-ring) { fill: #8FE8C0; stroke: #8FE8C0; }
.dm-pin--to.is-done .dm-house { opacity: 0; }
.dm-pin--to.is-done .dm-check { opacity: 1; }
.dm-pin--to.is-done .dm-ring { animation: dmRing 1.6s ease-out 2; }
@keyframes dmRing { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
.dm-van__glow { fill: rgba(255, 180, 92, .18); }
.dm-van__body { fill: #F4ECDF; }
.dm-van__cab { fill: #2A3442; }
.dm-van__roof { fill: #E9962E; }
.dl__panel { display: grid; gap: 16px; align-content: start; }
.dl__head p { margin: 0; }
.dl__order { font: 400 11px/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.dl__eta { margin-top: 6px !important; font: 500 clamp(30px, 3vw, 40px)/1 var(--f-display); letter-spacing: -.02em; }
.dl__sub { margin-top: 6px !important; font-size: 14px; color: var(--soft); }
.dl__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.dl__steps li { position: relative; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; color: var(--faint); }
.dl__steps li::before { content: ""; position: absolute; left: 6px; top: -50%; height: 100%; width: 2px; background: var(--line-2); }
.dl__steps li:first-child::before { display: none; }
.dl__steps li.is-done::before, .dl__steps li.is-now::before { background: var(--lamp); }
.dl__steps i { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-2); background: #14110E; }
.dl__steps time { font: 400 12px/1 var(--f-mono); }
.dl__steps li.is-done, .dl__steps li.is-now { color: var(--ink); }
.dl__steps li.is-done i { border-color: var(--lamp); background: var(--lamp); }
.dl__steps li.is-now i { border-color: var(--lamp); box-shadow: 0 0 0 0 rgba(255, 180, 92, .6); animation: dlNow 1.8s ease-out infinite; }
@keyframes dlNow { 0% { box-shadow: 0 0 0 0 rgba(255, 180, 92, .55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(255, 180, 92, 0); } }
/* top right of the card, beside the number: it fades in when the order arrives and takes no space */
.dl__again {
  position: absolute; top: 18px; right: 22px; z-index: 2; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(14, 12, 10, .6);
  font: 500 12px/1 var(--f-text); color: var(--ink); opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .35s, transform .35s var(--ease), visibility 0s .35s, border-color .25s;
}
.dl__again.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .35s, transform .35s var(--ease), visibility 0s, border-color .25s; }
.dl__again:hover { border-color: var(--ink); }
@media (min-width: 700px) and (max-width: 1099px), (min-width: 1500px) {
  .dl__panel { grid-template-columns: 1fr 1fr; align-items: start; }
}
.rm .dl__steps li.is-now i { animation: none; }

/* ======================================================= TILES: 06 the watch, 19 the deck, 20 the project list */
/* tiles: the watch on its own in Products (06); the deck and the project list side by side in Details (19 | 20) */
.touch2 { width: min(100% - 2 * var(--gutter), var(--maxw)); margin: 0 auto; display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .touch2 { grid-template-columns: repeat(12, 1fr); }
  .tile--watch { grid-column: 1 / -1; }
  .tile--swipe { grid-column: span 5; }
  .tile--list { grid-column: span 7; }
}
.tile {
  position: relative; min-height: 340px; padding: 22px; border-radius: var(--r); overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column;
}
.tile > .tag { position: relative; z-index: 3; }
/* the watch alone between two pinned scenes in Products */
.touch2--solo { margin-block: clamp(48px, 9vh, 110px); }

/* 06: the watch, and a lens that shows its movement */
.tile--watch { min-height: 0; padding: 22px; background: radial-gradient(90% 120% at 70% 50%, #18202B 0%, #0D1117 70%); }
.wt { display: grid; gap: 28px; align-items: center; padding: 10px 0 6px; }
@media (min-width: 900px) { .wt { grid-template-columns: minmax(260px, 1fr) minmax(0, 560px); padding: 10px 2vw 6px; } }
.wt__copy p { margin: 0; }
.wt__note { font: 400 11px/1.4 var(--f-mono); color: var(--faint); }
.wt__title { margin-top: 14px !important; font: 500 clamp(34px, 4vw, 56px)/1 var(--f-display); letter-spacing: -.03em; }
.wt__line { margin-top: 12px !important; max-width: 36ch; color: var(--soft); }
.wt__specs { margin: 22px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 160px)); gap: 14px 24px; }
.wt__specs div { padding-top: 10px; border-top: 1px solid var(--line-2); }
.wt__specs dt { font: 400 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.wt__specs dd { margin: 6px 0 0; font: 500 18px/1.1 var(--f-display); }
.wt__stage { --lx: 50%; --ly: 50%; --lr: 0px; position: relative; width: 100%; max-width: 560px; aspect-ratio: 1; margin: 0 auto; touch-action: pan-y; cursor: none; }
.wt__dial, .wt__mv { position: absolute; inset: 0; width: 100%; height: 100%; }
.wt__inside { position: absolute; inset: 0; transform-origin: var(--lx) var(--ly); transform: scale(1.22); clip-path: circle(calc(var(--lr) / 1.22) at var(--lx) var(--ly)); }
.wt__lens {
  position: absolute; left: var(--lx); top: var(--ly); width: calc(var(--lr) * 2); height: calc(var(--lr) * 2); margin: calc(var(--lr) * -1) 0 0 calc(var(--lr) * -1);
  border-radius: 50%; pointer-events: none; box-sizing: border-box; border: 3px solid rgba(232, 236, 240, .9);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 0 0 7px rgba(20, 24, 30, .55), 0 18px 40px rgba(0, 0, 0, .6), inset 0 0 22px rgba(0, 0, 0, .45);
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .22), transparent 32%);
}
.wt-date { font: 600 16px var(--f-text); fill: #14100C; }
.wt-brand { font: 600 22px var(--f-display); letter-spacing: 6px; fill: #F1F4F7; }
.wt-sub { font: 500 8.5px var(--f-mono); letter-spacing: 2.4px; fill: rgba(241, 244, 247, .7); }
.wt-sub--dim { fill: rgba(241, 244, 247, .45); }
.wt-engr { font: 500 9px var(--f-mono); letter-spacing: 1.6px; fill: #6E757E; }
.rm .wt__stage { cursor: auto; }

.sw__note { position: relative; z-index: 1; margin: 12px 0 0; font: 400 11px/1.4 var(--f-mono); color: var(--faint); }

/* 19: keep or pass. Cards stack; the top one follows a drag and leans. */
.tile--swipe { min-height: 600px; }
.sw { flex: 1; display: flex; flex-direction: column; gap: 16px; padding-top: 16px; }
.sw__deck { position: relative; flex: 1; min-height: 400px; margin-bottom: 40px; }
.sw__card {
  position: absolute; left: 50%; top: 0; width: min(100%, 300px); height: 100%; max-height: 410px; margin-left: calc(min(100%, 300px) / -2);
  border-radius: 18px; overflow: hidden; background: #17120F; border: 1px solid var(--line); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .9);
  display: flex; flex-direction: column; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; will-change: transform;
}
.sw__card:active { cursor: grabbing; }
.sw__img { position: relative; flex: 1; overflow: hidden; }
.sw__art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sw__meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; padding: 14px 16px 16px; }
.sw__meta span { font: 400 10.5px/1 var(--f-mono); color: var(--faint); }
.sw__meta h3 { margin: 6px 0 0; font: 500 20px/1.1 var(--f-display); letter-spacing: -.01em; }
.sw__meta p { margin: 0; display: grid; justify-items: end; gap: 5px; font-size: 12.5px; color: var(--soft); text-align: right; }
.sw__meta b { font: 600 16px/1 var(--f-display); color: var(--g); }
.sw__stamp {
  position: absolute; top: 22px; padding: 6px 12px; border-radius: 8px; border: 2.5px solid; font: 700 18px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; opacity: 0; pointer-events: none;
}
.sw__stamp--keep { left: 18px; color: #8FE8C0; border-color: #8FE8C0; transform: rotate(-12deg); background: rgba(10, 30, 22, .5); }
.sw__stamp--pass { right: 18px; color: #FF8A7A; border-color: #FF8A7A; transform: rotate(12deg); background: rgba(40, 12, 10, .5); }
.sw__end { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; opacity: 0; visibility: hidden; }
.sw__end p { margin: 0; }
.sw__endtitle { font: 500 26px/1.1 var(--f-display); letter-spacing: -.02em; }
.sw__endline { color: var(--soft); }
.sw__again { margin-top: 6px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--ink); font: 500 13px/1 var(--f-text); }
.sw__again:hover { border-color: var(--ink); }
.sw__bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; width: min(100%, 300px); margin: 0 auto; }
.sw__btn { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); background: rgba(244, 236, 223, .04); color: var(--ink); transition: border-color .25s, background .25s, transform .25s var(--ease); }
.sw__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sw__btn--pass:hover { border-color: #FF8A7A; color: #FF8A7A; }
.sw__btn--keep:hover { border-color: #8FE8C0; color: #8FE8C0; }
.sw__btn:active { transform: scale(.92); }
.sw__kept { display: grid; justify-items: center; gap: 7px; }
.sw__count { font: 400 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.sw__tray { display: flex; gap: 4px; min-height: 12px; }
.sw__tray i { width: 12px; height: 12px; border-radius: 50%; background: var(--g); box-shadow: 0 0 0 2px rgba(0, 0, 0, .35); }

/* 20: selected work. Point at a project: its row lights, the arrow turns, a preview follows. */
.plist__note { position: relative; z-index: 1; margin: 12px 0 0; font: 400 11px/1.4 var(--f-mono); color: var(--faint); }
.plist { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--line); }
.plist li {
  position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 46px 22px; align-items: center; gap: 14px;
  padding: 20px 4px; border-bottom: 1px solid var(--line); cursor: default; transition: color .3s;
}
.plist li::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--a) 14%, transparent), transparent 70%); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease); pointer-events: none; }
.plist li > * { position: relative; }
.plist li i { font: 400 11px/1 var(--f-mono); font-style: normal; color: var(--faint); }
.plist li span { font: 500 clamp(22px, 2.6vw, 38px)/1 var(--f-display); letter-spacing: -.02em; transition: transform .45s var(--ease); }
.plist li em, .plist li time { font: 400 11.5px/1 var(--f-mono); color: var(--faint); font-style: normal; text-transform: uppercase; letter-spacing: .06em; }
.plist__go { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--faint); transform: rotate(45deg); transition: transform .45s var(--ease), color .3s; }
.plist li.is-on { color: var(--a); }
.plist li.is-on::before { transform: scaleX(1); }
.plist li.is-on span { transform: translateX(10px); }
.plist li.is-on .plist__go { transform: none; color: var(--a); }
@media (max-width: 600px) {
  .plist li { grid-template-columns: 26px minmax(0, 1fr) 20px; padding: 16px 2px; }
  .plist li em, .plist li time { display: none; }
}

/* 20: one floating window above the page; JS reveals it with a clip and
   slides the reel to the project being pointed at. */
.plist__preview {
  position: fixed; left: 0; top: 0; z-index: 60; width: 280px; height: 190px; border-radius: 14px;
  pointer-events: none; overflow: hidden; visibility: hidden;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08);
}
.plist__reel { position: absolute; inset: 0; }
.pv { position: relative; height: 100%; overflow: hidden; }

/* Northwind: one SVG on a 280x190 grid; 1px strokes sit on half pixels. */
.pv--arch { background: #EEEBE5; }
.pv__arch { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.pv__arch text { font-kerning: normal; }
.nw-mark { font: 600 7px var(--f-display); letter-spacing: 2.4px; fill: #171513; }
.nw-nav { font: 500 6.5px var(--f-text); fill: #6B655C; }
.nw-hair { fill: none; stroke: #171513; stroke-opacity: .16; stroke-width: 1; shape-rendering: crispEdges; }
.nw-h { font: 400 15.5px Georgia, "Times New Roman", serif; letter-spacing: -.2px; fill: #171513; }
.nw-h--em { font-style: italic; fill: #8A5A2B; }
.nw-meta { font: 500 5.6px var(--f-mono); letter-spacing: .7px; fill: #6B655C; }
.pv__arch .dl { fill: none; stroke: #171513; stroke-width: 1; }
.pv__arch .nw-crisp, .nw-glass, .nw-wood, .nw-win, .nw-roof, .nw-shadow { shape-rendering: crispEdges; }
.nw-dim .dl { stroke-opacity: .55; shape-rendering: crispEdges; }
.nw-dim text { font: 500 5.6px var(--f-mono); letter-spacing: .4px; fill: #6B655C; }
.nw-tree .dl { stroke-opacity: .5; }
.nw-glass { fill: url(#nw-glass); stroke: #171513; stroke-width: 1; }
.nw-shadow { fill: #171513; fill-opacity: .14; }
.nw-wood { fill: url(#nw-slats); stroke: #171513; stroke-width: 1; }
.nw-win { fill: #24221F; stroke: #171513; stroke-width: 1; }
.nw-glint { fill: none; stroke: #fff; stroke-opacity: .22; stroke-width: 1; }
.nw-roof { fill: #171513; }
.nw-fig circle { fill: #171513; }
.nw-fig path { fill: none; stroke: #171513; stroke-width: 1; stroke-linecap: round; }
.nw-hatch { fill: none; stroke: #171513; stroke-opacity: .22; stroke-width: .8; }

/* The other three previews share Northwind's grid; each is one SVG. */
.pv__svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }

/* Pale Harbour */
.pv--hotel { background: #EEDFD3; }
.ph-land { fill: #6F8E9C; }
.ph-beam { fill: #FFE8BE; opacity: .35; animation: beam 3.2s ease-in-out infinite; }
@keyframes beam { 50% { opacity: .08; } }
.ph-swell { fill: none; stroke: #fff; stroke-opacity: .1; stroke-width: 1; shape-rendering: crispEdges; }
.ph-ref { fill: none; stroke: #FFE6C2; stroke-opacity: .8; stroke-width: 1.5; stroke-linecap: round; }
.ph-mark { font: italic 400 10.5px Georgia, "Times New Roman", serif; fill: #24485E; }
.ph-nav { font: 500 6.5px var(--f-text); word-spacing: 9px; fill: #4D6B7E; }
.ph-hair { fill: none; stroke: #24485E; stroke-opacity: .18; stroke-width: 1; shape-rendering: crispEdges; }
.ph-h { font: 400 15.5px Georgia, "Times New Roman", serif; letter-spacing: -.2px; fill: #24485E; }
.ph-h--em { font-style: italic; fill: #B4643A; }
.ph-meta { font: 500 5.6px var(--f-mono); letter-spacing: .7px; fill: #4D6B7E; }
.ph-bar__bg { fill: #fff; fill-opacity: .95; }
.ph-bar__sep { fill: none; stroke: #24485E; stroke-opacity: .14; stroke-width: 1; shape-rendering: crispEdges; }
.ph-lbl { font: 500 4.8px var(--f-mono); letter-spacing: .6px; fill: #7D93A1; }
.ph-val { font: 600 7px var(--f-text); fill: #24485E; }
.ph-btn { fill: #24485E; }
.ph-btn__t { font: 600 7px var(--f-text); fill: #fff; }

/* Fieldwork */
.pv--field { background: #F1EEDF; }
.fw-sun { fill: #F2C14E; }
.fw-hill--back { fill: #CBD6A3; }
.fw-hill--front { fill: #B4C485; }
.fw-strip--0 { fill: #8DB35B; }
.fw-strip--1 { fill: #A8C86F; }
.fw-rays { fill: none; stroke: #4F7A2E; stroke-opacity: .35; stroke-width: .8; }
.fw-horizon { fill: none; stroke: #4F7A2E; stroke-opacity: .25; stroke-width: 1; shape-rendering: crispEdges; }
.fw-leaf { fill: #3E6B25; }
.fw-mark { font: 700 10px var(--f-display); letter-spacing: -.2px; fill: #1F3A12; }
.fw-nav { font: 500 6.5px var(--f-text); word-spacing: 9px; fill: #5D6B4A; }
.fw-hair { fill: none; stroke: #1F3A12; stroke-opacity: .16; stroke-width: 1; shape-rendering: crispEdges; }
.fw-h { font: 600 14px var(--f-display); letter-spacing: -.3px; fill: #1F3A12; }
.fw-h--2 { fill: #6E8A3C; }
.fw-meta { font: 500 5.6px var(--f-mono); letter-spacing: .7px; fill: #5D6B4A; }
.fw-card__bg { fill: #FFFDF6; }
.fw-lbl { font: 500 4.8px var(--f-mono); letter-spacing: .7px; fill: #7B8B5E; }
.fw-title { font: 600 9.5px var(--f-display); fill: #1F3A12; }
.fw-sep { fill: none; stroke: #1F3A12; stroke-opacity: .12; stroke-width: 1; shape-rendering: crispEdges; }
.fw-item { font: 500 6.2px var(--f-text); fill: #2E3F22; }
.fw-qty { font: 500 5.6px var(--f-mono); fill: #6E7C58; }
.fw-btn { fill: #1F3A12; }
.fw-btn__t { font: 600 6px var(--f-text); fill: #F1EEDF; }

/* Low Tide Records */
.pv--vinyl { background: #121016; }
.lt-mark { font: 700 8px var(--f-display); letter-spacing: 2.4px; fill: #fff; }
.lt-nav { font: 500 6.5px var(--f-text); word-spacing: 9px; fill: #8E8798; }
.lt-hair { fill: none; stroke: #fff; stroke-opacity: .1; stroke-width: 1; shape-rendering: crispEdges; }
.lt-grooves circle { fill: none; stroke: #241F2A; stroke-width: 1; }
.lt-spin { transform-box: fill-box; transform-origin: center; animation: disc 3.6s linear infinite; }
.lt-tide { fill: none; stroke: #fff; stroke-opacity: .5; stroke-width: 1; }
.lt-cat { font: 500 4.6px var(--f-mono); letter-spacing: .6px; fill: #fff; fill-opacity: .8; }
.lt-cover-artist { font: 500 4.6px var(--f-mono); letter-spacing: .8px; fill: #fff; fill-opacity: .85; }
.lt-cover-title { font: 700 7px var(--f-display); letter-spacing: 1.6px; fill: #fff; }
.lt-meta { font: 500 5.4px var(--f-mono); letter-spacing: .8px; fill: #FF9ACB; }
.lt-title { font: 700 17px var(--f-display); letter-spacing: -.4px; fill: #fff; }
.lt-artist { font: 500 7.5px var(--f-text); fill: #B7B0C2; }
.lt-sep { fill: none; stroke: #fff; stroke-opacity: .08; stroke-width: 1; shape-rendering: crispEdges; }
.lt-num { font: 500 5.6px var(--f-mono); fill: #6F6878; }
.lt-track { font: 500 6.8px var(--f-text); fill: #D9D3E2; }
.lt-track--on { fill: #FF9ACB; }
.lt-dur { font: 500 5.6px var(--f-mono); fill: #8E8798; }
.lt-eq rect { fill: #FF6FB5; transform-box: fill-box; transform-origin: 50% 100%; animation: eq .9s ease-in-out infinite; }
.lt-eq rect:nth-child(2) { animation-delay: -.3s; animation-duration: .7s; }
.lt-eq rect:nth-child(3) { animation-delay: -.6s; animation-duration: 1.1s; }
@keyframes eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.lt-play { fill: #FF6FB5; }
.lt-wave { fill: #4A4452; }
.lt-wave--on { fill: #FF6FB5; }
.lt-time { font: 500 5.6px var(--f-mono); fill: #8E8798; }
@keyframes disc { to { transform: rotate(360deg); } }
.rm .lt-spin, .rm .lt-eq rect, .rm .ph-beam { animation: none; }
@media (max-width: 600px) { .plist__preview { width: 240px; height: 163px; } }

/* ======================================================= APPS: 14, 15, 16 (the roaster), 17 and 18 beside them */
.uigrid { width: min(100% - 2 * var(--gutter), var(--maxw)); margin: 0 auto; display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .uigrid { grid-template-columns: 1fr 1fr; }
  .card--dash { grid-column: 1 / -1; }
}
.pc__note, .mn__note { margin: -6px 0 0; font: 400 11px/1.4 var(--f-mono); color: var(--faint); }

/* 14: a product card; its one button walks through buying */
.card--shape { position: relative; }
.pc__bagwrap { position: absolute; top: 18px; right: 22px; z-index: 6; }
.pc__bagicon {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: transparent; color: var(--ink);
  border: 1px solid var(--line-2); font: 600 13px/1 var(--f-text); transition: border-color .3s, color .3s;
}
/* the bag's contents: opens under the icon on hover, focus or tap */
.pc__bagpop {
  position: absolute; right: 0; top: calc(100% + 10px); width: 270px; padding: 14px 16px; border-radius: 14px; text-align: left;
  background: rgba(24, 19, 15, .96); border: 1px solid var(--line-2); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transform-origin: 90% 0; transition: opacity .25s, transform .3s var(--ease), visibility 0s .3s;
}
.pc__bagwrap.is-open .pc__bagpop { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .3s var(--ease), visibility 0s; }
.pc__bagpop::before { content: ""; position: absolute; right: 22px; top: -6px; width: 10px; height: 10px; background: inherit; border-left: 1px solid var(--line-2); border-top: 1px solid var(--line-2); transform: rotate(45deg); }
.pc__bagpop p { margin: 0; }
.pc__bagtitle { font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.pc__baglines { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.pc__baglines li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13.5px; }
.pc__baglines li i { width: 26px; height: 32px; border-radius: 4px; background: linear-gradient(90deg, #9C7650, #D4AE84 50%, #8E6A45); box-shadow: inset 0 9px 0 -6px #B88D62; }
.pc__baglines li small { display: block; font: 400 11px/1.3 var(--f-mono); color: var(--faint); }
.pc__baglines li b { font: 600 14px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.pc__baglines .is-empty { display: block; color: var(--faint); font-size: 13.5px; }
.pc__bagtotal { display: flex; justify-content: space-between; margin-top: 12px !important; padding-top: 10px; border-top: 1px dashed var(--line-2); font-size: 13.5px; }
.pc__bagtotal b { font: 600 15px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.pc__bagicon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pc__bagicon b { min-width: 1ch; font-variant-numeric: tabular-nums; }
.pc__bagicon.is-full { border-color: var(--lamp); color: var(--lamp); }
.pc { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 22px; align-items: center; padding: 10px 0 64px; }
.pc__img { position: relative; width: 100%; max-width: 260px; margin: 0 auto; aspect-ratio: 240 / 300; border-radius: 18px; background: radial-gradient(70% 60% at 50% 46%, rgba(233, 150, 46, .16), transparent 70%); }
.pc__bag { position: absolute; inset: 0; width: 100%; height: 100%; }
.bag-brand { font: 700 13px var(--f-display); letter-spacing: 4px; fill: #2A211A; }
.bag-name { font: 600 8px var(--f-mono); letter-spacing: 1.4px; fill: #2A211A; }
.bag-meta { font: 500 6px var(--f-mono); letter-spacing: .4px; fill: #7A6450; }
.pc__info { display: grid; gap: 8px; justify-items: start; }
.pc__info p, .pc__info h3 { margin: 0; }
.pc__origin { font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--lamp); }
.pc__name { font: 500 clamp(26px, 2.6vw, 34px)/1.05 var(--f-display); letter-spacing: -.02em; }
.pc__notes { color: var(--soft); font-size: 14.5px; }
.pc__sizes { display: flex; gap: 6px; margin-top: 6px; }
.pc__sizes button { padding: 8px 13px; border-radius: 10px; border: 1px solid var(--line-2); background: transparent; color: var(--soft); font: 500 13px/1 var(--f-text); transition: border-color .25s, color .25s, background .25s; }
.pc__sizes button:hover { color: var(--ink); }
.pc__sizes button.is-on { border-color: var(--ink); color: var(--ink); background: rgba(244, 236, 223, .06); }
.pc__price { margin-top: 4px !important; font: 600 24px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.pc__buy { margin-top: 10px; height: 54px; display: flex; align-items: center; }
.oneshape { position: relative; width: 190px; height: 52px; border-radius: 26px; background: var(--ink); color: #14100C; overflow: hidden; box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .9); }
.os { position: absolute; inset: 0; display: grid; place-items: center; padding: 0; border: 0; background: none; color: inherit; font: 600 15px/1 var(--f-text); white-space: nowrap; opacity: 0; visibility: hidden; }
.os--btn { opacity: 1; visibility: visible; cursor: pointer; }
.os--load i { width: 24px; height: 24px; border-radius: 50%; border: 3px solid rgba(20, 16, 12, .2); border-top-color: #14100C; animation: rot .7s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
.os--check svg, .pc__toast svg { width: 24px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.os--step { grid-template-columns: 44px 1fr 44px; padding: 0 4px; }
.os--step button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(20, 16, 12, .08); color: #14100C; font: 500 20px/1 var(--f-text); transition: background .2s; }
.os--step button:hover { background: rgba(20, 16, 12, .16); }
.os--step b { text-align: center; font: 600 17px/1 var(--f-text); font-variant-numeric: tabular-nums; }
.pc__toast {
  position: absolute; left: 50%; bottom: 20px; z-index: 3; margin: 0; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px;
  background: var(--ink); color: #14100C; font-size: 14px; white-space: nowrap; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8);
  opacity: 0; visibility: hidden; transform: translate(-50%, 12px);
}
.pc__toast svg { width: 20px; color: #1E7A3C; }
.fakecursor { position: absolute; left: 0; top: 0; z-index: 5; width: 22px; fill: #fff; stroke: #14100C; stroke-width: 1.2; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }
@media (max-width: 600px) {
  .pc { grid-template-columns: 1fr; gap: 14px; }
  .pc__img { max-width: 190px; }
}

/* 15: the café menu. One fixed box, so the card never changes size; inside a
   tile everything is placed absolutely, and JS moves the drawing, the name
   and the price with the tile (Flip), then fades the rest in. */
.flipbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.flipbar__end { display: flex; gap: 8px; }
.seg { display: flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--line-2); }
.seg button { padding: 7px 12px; border: 0; border-radius: 999px; background: transparent; font: 400 12px/1 var(--f-mono); color: var(--soft); transition: color .25s, background .25s; }
.seg button:hover { color: var(--ink); }
.seg button.is-on { background: var(--ink); color: #14100C; }
.seg--icons button { padding: 5px 8px; display: grid; place-items: center; }
.seg--icons svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mn__defs { position: absolute; width: 0; height: 0; }
.flipbox { position: relative; height: 340px; display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; }
.ftile {
  position: relative; min-height: 0; padding: 0; border: 1px solid color-mix(in oklab, var(--c) 22%, transparent); border-radius: 14px; overflow: hidden; text-align: left; color: var(--ink);
  background: radial-gradient(120% 90% at 20% 0%, color-mix(in oklab, var(--c) 16%, #17120F), #15110E 70%); transition: border-color .3s;
}
.ftile:hover { border-color: color-mix(in oklab, var(--c) 50%, transparent); }
.ftile.is-out { display: none; }
.ftile__ic { position: absolute; left: 12px; top: 12px; width: 56px; height: 56px; }
.ftile b { position: absolute; left: 14px; bottom: 32px; font: 500 16px/1.2 var(--f-display); white-space: nowrap; }
.ftile i { position: absolute; left: 14px; bottom: 14px; font: 400 11px/1 var(--f-mono); font-style: normal; color: var(--faint); white-space: nowrap; }
.ftile em { position: absolute; right: 14px; top: 16px; font: 600 15px/1 var(--f-display); font-style: normal; color: var(--c); font-variant-numeric: tabular-nums; }
.ftile span { position: absolute; left: 20px; right: 20px; top: 132px; font-size: 15px; line-height: 1.45; color: var(--ink); opacity: 0; }
.ftile small { position: absolute; left: 20px; bottom: 18px; font: 400 11px/1 var(--f-mono); color: var(--soft); text-transform: uppercase; letter-spacing: .08em; opacity: 0; }

.flipbox[data-layout="list"] { grid-template-columns: 1fr; grid-auto-rows: 49px; gap: 7px; align-content: start; }
.flipbox[data-layout="list"] .ftile__ic { left: 8px; top: 6px; width: 36px; height: 36px; }
.flipbox[data-layout="list"] .ftile b { left: 56px; bottom: auto; top: 15px; }
.flipbox[data-layout="list"] .ftile i { left: auto; right: 86px; bottom: auto; top: 18px; }
.flipbox[data-layout="list"] .ftile em { top: 16px; }

.flipbox[data-flip] .ftile.is-open { position: absolute; inset: 0; z-index: 3; background: radial-gradient(120% 90% at 85% 0%, color-mix(in oklab, var(--c) 26%, #17120F), #15110E 70%); }
.flipbox[data-flip] .ftile.is-open .ftile__ic { left: auto; right: 22px; top: 22px; width: 120px; height: 120px; }
.flipbox[data-flip] .ftile.is-open b { left: 20px; top: 24px; bottom: auto; font-size: 28px; }
.flipbox[data-flip] .ftile.is-open i { left: 20px; top: 64px; bottom: auto; right: auto; font-size: 12px; }
.flipbox[data-flip] .ftile.is-open em { left: 20px; right: auto; top: 88px; font-size: 22px; }
.flipbox[data-flip] .ftile.is-open span { opacity: 1; }
.flipbox[data-flip] .ftile.is-open small { opacity: 1; }
@media (max-width: 600px) {
  .flipbox { grid-template-columns: repeat(2, 1fr); height: 420px; }
  .flipbox[data-flip] .ftile.is-open .ftile__ic { width: 84px; height: 84px; }
  .flipbox[data-flip] .ftile.is-open span { top: 130px; }
}

/* 16: the shop's dashboard */
.card--dash { padding: 0; }
.dash { display: grid; grid-template-columns: 64px 1fr; min-height: 420px; }
.dash__side { position: relative; border-right: 1px solid var(--line); padding: 18px 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dash__side button { position: relative; z-index: 1; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; display: grid; place-items: center; color: var(--soft); transition: color .25s, background .25s; }
.dash__side button:hover { color: var(--ink); background: rgba(244, 236, 223, .06); }
.dash__side button.is-on { color: #14100C; background: transparent; }
.dash__side svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dash__pill { position: absolute; left: 12px; top: 18px; width: 40px; height: 40px; border-radius: 10px; background: var(--accent); box-shadow: 0 6px 20px -6px var(--accent); }
.dash__main { padding: 22px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.dash__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.dash__example { font: 400 11px/1 var(--f-mono); color: var(--faint); text-transform: uppercase; letter-spacing: .08em; }
.dash__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.dash__title { margin: 0; display: flex; align-items: center; gap: 10px; font: 500 26px/1 var(--f-display); letter-spacing: -.02em; }
.dash__title small { font: 500 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #8FE3A0; }
.dash__live { width: 8px; height: 8px; border-radius: 50%; background: #8FE3A0; box-shadow: 0 0 0 0 rgba(143, 227, 160, .6); animation: live 1.6s ease-out infinite; }
@keyframes live { to { box-shadow: 0 0 0 10px rgba(143, 227, 160, 0); } }
.rm .dash__live { animation: none; }
.dash__range { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(244, 236, 223, .05); border: 1px solid var(--line); }
.dash__range button { padding: 7px 12px; border: 0; border-radius: 999px; background: transparent; font: 400 12px/1 var(--f-mono); color: var(--soft); transition: color .25s, background .25s; }
.dash__range button:hover { color: var(--ink); }
.dash__range button.is-on { background: var(--ink); color: #14100C; }
.dash__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dash__kpis > div { position: relative; padding: 14px; border-radius: 12px; background: rgba(244, 236, 223, .04); border: 1px solid var(--line); display: grid; gap: 4px; min-width: 0; overflow: hidden; }
.dash__kpis span { font-size: 12px; color: var(--soft); }
.dash__kpis b { font: 500 clamp(22px, 2.6vw, 34px)/1 var(--f-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; transition: color .6s; }
.dash__kpis b.is-up { color: #8FE3A0; transition: none; }
.dash__kpis em { font: 400 12px/1 var(--f-mono); color: #8FE3A0; font-style: normal; }
.dash__spark { position: absolute; right: 12px; bottom: 14px; width: 34%; height: 30px; overflow: visible; }
.dash__spark path { fill: none; stroke: var(--lamp); stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .85; }
.dash__charts { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 12px; }
.dash__linewrap { position: relative; height: 240px; border-radius: 12px; background: rgba(244, 236, 223, .03); border: 1px solid var(--line); overflow: hidden; cursor: crosshair; touch-action: pan-y; }
.dash__chartlabel { position: absolute; left: 14px; top: 12px; margin: 0; font-size: 12px; color: var(--soft); }
.dash__line { position: absolute; left: 0; top: 40px; width: 100%; height: calc(100% - 68px); overflow: visible; }
.dash__grid { fill: none; stroke: rgba(244, 236, 223, .06); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dash__area { fill: url(#dash-fill); }
.dash__stroke { fill: none; stroke: var(--lamp); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(255, 180, 92, .45)); }
.dash__days { position: absolute; left: 14px; right: 14px; bottom: 9px; display: flex; justify-content: space-between; font: 400 10px/1 var(--f-mono); color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.dash__guide { position: absolute; top: 40px; bottom: 28px; left: 0; width: 1px; background: rgba(244, 236, 223, .25); opacity: 0; pointer-events: none; }
.dash__dot { position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--lamp); border: 2px solid #14100C; box-shadow: 0 0 14px var(--lamp); opacity: 0; pointer-events: none; }
.dash__tip { position: absolute; left: 0; top: 10px; padding: 6px 9px; border-radius: 8px; background: var(--ink); color: #14100C; font: 500 12px/1 var(--f-mono); white-space: nowrap; opacity: 0; pointer-events: none; }
.dash__side2 { position: relative; height: 240px; border-radius: 12px; background: rgba(244, 236, 223, .03); border: 1px solid var(--line); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.dash__panelhead { margin: 0; font-size: 12px; color: var(--soft); }
.dash__feed, .dash__top5 { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.dash__feed li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 9px 11px; border-radius: 10px; background: rgba(244, 236, 223, .04); transition: background 1.2s; }
.dash__feed li span { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash__feed li small { font: 400 10.5px/1 var(--f-mono); color: var(--faint); }
.dash__feed li b { grid-row: 1 / span 2; grid-column: 2; align-self: center; font: 600 14px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.dash__feed li.is-new { background: rgba(143, 232, 192, .14); transition: none; }
.dash__top5 li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; font-size: 13px; }
.dash__top5 li b { font: 500 12px/1 var(--f-mono); color: var(--soft); }
.dash__top5 li i { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: rgba(244, 236, 223, .08); overflow: hidden; }
.dash__top5 li i::after { content: ""; display: block; height: 100%; width: var(--w, 0%); border-radius: 3px; background: linear-gradient(90deg, #C2541F, var(--lamp)); transition: width .8s var(--ease); }
.dash__donut { display: flex; align-items: center; gap: 14px; }
.dash__donut svg { width: 120px; height: 120px; flex: none; transform: rotate(-90deg); }
.dash__donut text { transform: rotate(90deg); transform-origin: 60px 60px; font: 600 20px var(--f-display); fill: var(--ink); }
.dash__donut .dn-small { font: 400 9px var(--f-mono); fill: var(--faint); letter-spacing: .08em; text-transform: uppercase; }
.dn-bg, .dn-a { fill: none; stroke-width: 12; }
.dn-bg { stroke: #6FD3FF; opacity: .55; }
.dn-a { stroke: var(--lamp); stroke-linecap: round; stroke-dasharray: 289 289; stroke-dashoffset: 289; }
.dash__donut ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 13px; }
.dash__donut li { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 8px; }
.dash__donut li i { width: 10px; height: 10px; border-radius: 3px; }
.dn-k1 { background: var(--lamp); }
.dn-k2 { background: #6FD3FF; opacity: .7; }
.dash__donut li b { font: 500 12px/1 var(--f-mono); color: var(--soft); }
.dash__side2 > ul, .dash__side2 > .dash__donut { display: none; }
.dash__side2[data-panel="feed"] .dash__feed, .dash__side2[data-panel="top"] .dash__top5 { display: grid; }
.dash__side2[data-panel="donut"] .dash__donut { display: flex; }
@media (max-width: 600px) {
  .dash { grid-template-columns: 1fr; }
  .dash__side { flex-direction: row; justify-content: center; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px 0; }
  .dash__pill { left: 0; top: 10px; }
  .dash__charts { grid-template-columns: 1fr; }
  .dash__kpis { grid-template-columns: 1fr 1fr; }
  .dash__kpis > div:last-child { grid-column: span 2; }
}
@media (max-width: 1099px) and (min-width: 601px) { .dash__charts { grid-template-columns: 1fr; } }

/* ======================================================= WEBGL PINS: 05 the ring, 03 the points */
.glpin { position: relative; height: 100svh; }
.glpin__stage { position: absolute; inset: 0; overflow: hidden; }
.glpin canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.glpin__copy { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: 12vh; display: grid; }
.glpin__copy--left { bottom: auto; top: 50%; transform: translateY(-50%); max-width: 520px; }
.glpin__line { grid-area: 1 / 1; margin: 0; max-width: 22ch; font: 400 clamp(28px, 4vw, 56px)/1.04 var(--f-display); letter-spacing: -.025em; color: rgba(244,236,223,.8); opacity: 0; }
.glpin__line b { font-weight: 600; color: var(--ink); }
.glpin__tag { position: absolute; left: var(--gutter); top: 90px; z-index: 3; }
/* 03: a soft shade under the captions; the last one has a field for a word */
.glpin--particles .glpin__stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(20deg, rgba(5, 6, 9, .82) 0%, rgba(5, 6, 9, .4) 30%, rgba(5, 6, 9, 0) 52%); }
.pt__final { display: grid; gap: 14px; justify-items: start; max-width: none; pointer-events: none; }
.pt__final.is-live { pointer-events: auto; }
.pt__final p { margin: 0; max-width: 22ch; }
.pt__type {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 999px; border: 1px solid var(--line-2);
  background: rgba(10, 11, 15, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: text; transition: border-color .25s;
}
.pt__type:focus-within { border-color: var(--lamp); }
.pt__type span { font: 400 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.pt__type input {
  width: 13em; max-width: calc(100vw - 2 * var(--gutter) - 110px); padding: 9px 12px; border: 0; border-radius: 999px; background: rgba(244, 236, 223, .08); color: var(--ink); outline: none;
  font: 600 16px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase;
}
.pt__type input::placeholder { color: rgba(244, 236, 223, .4); }
.rm .glpin--particles .glpin__line:not(:last-child) { display: none; }
.rm .pt__final { pointer-events: auto; }
/* 05: the jeweller's ring. The story lines sit bottom left; the last one is the product, with its metals. */
.ring__top { position: absolute; left: var(--gutter); right: var(--gutter); top: 90px; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ring__note { margin: 0; font: 400 11px/1.4 var(--f-mono); color: var(--faint); }
/* a soft shade under the story lines, so they read over the hot metal */
.glpin--ring .glpin__stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(20deg, rgba(6, 5, 4, .78) 0%, rgba(6, 5, 4, .35) 32%, rgba(6, 5, 4, 0) 55%); }
.ring__final { display: grid; gap: 10px; max-width: none; pointer-events: none; }
.ring__final.is-live { pointer-events: auto; }
.ring__final p { margin: 0; }
.ring__name { font: 600 clamp(30px, 4vw, 54px)/1 var(--f-display); letter-spacing: -.025em; color: var(--ink); }
.ring__spec { font: 400 clamp(15px, 1.3vw, 18px)/1.4 var(--f-text); letter-spacing: 0; color: var(--soft); }
.ring__finish { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ring__finish button {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 7px; border-radius: 999px; border: 1px solid var(--line-2);
  background: rgba(14, 12, 10, .5); color: var(--soft); font: 500 13px/1 var(--f-text); letter-spacing: 0; transition: border-color .25s, color .25s, background .25s;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ring__finish button i { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.ring__finish button:hover { color: var(--ink); }
.ring__finish button.is-on { border-color: var(--ink); color: var(--ink); background: rgba(244, 236, 223, .08); }
.ring__price { font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--lamp); }
.rm .ring__final { pointer-events: auto; }

/* ======================================================= 04 STYLES */
/* 04: one page of the fictional roaster in six looks. The page's elements and
   words never change; each look is only the rules under [data-look=…]: its
   grid, type, colour and a few decorations. On a switch the script flies each
   element from its old place to its new one; colours ease here. Phone layouts
   follow the browser frame's width (container queries). Rules that must not
   be transitioned here: transform, opacity and filter on the elements (the
   script animates those). */
.styles { width: min(100% - 2 * var(--gutter), var(--maxw)); margin: 0 auto; }
.styles__tag { margin-bottom: 16px; }
/* its note sits under the number: the piece opens Pages, so it has no heading of its own to carry it */
.styles__note { margin: 0 0 18px; max-width: 62ch; font-size: 16px; line-height: 1.55; color: var(--soft); }
.styles__tabs { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 14px; }
.styles__tabs button { flex: none; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; font: 400 13px/1 var(--f-mono); color: var(--soft); transition: all .3s; }
.styles__tabs button:hover { color: var(--ink); border-color: var(--soft); }
.styles__tabs button[aria-selected="true"] { background: var(--ink); color: #14100C; border-color: var(--ink); }
@media (max-width: 560px) {
  .styles__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .styles__tabs button { padding: 10px 4px; font-size: 12px; }
}
.styles__meter { height: 2px; margin-top: 14px; background: var(--line); }
.styles__meter i { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
.browser { border-radius: 16px; overflow: hidden; border: 1px solid var(--line-2); background: #1A1714; box-shadow: 0 40px 100px -30px rgba(0,0,0,.8); }
.browser__bar { display: flex; align-items: center; gap: 7px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.browser__bar i { width: 11px; height: 11px; border-radius: 50%; background: rgba(244,236,223,.15); }
.browser__bar span { margin-left: 12px; padding: 5px 14px; border-radius: 6px; background: rgba(244,236,223,.06); font: 400 12px/1 var(--f-mono); color: var(--soft); }
.browser__view { position: relative; height: clamp(470px, 64vh, 640px); overflow: hidden; container-type: inline-size; }

/* the page: the same ten elements in every look */
/* clip, not hidden: a box that hides overflow can still be scrolled (by focus, say), and the page would slide up inside the frame */
.site { position: absolute; inset: 0; display: grid; overflow: hidden; overflow: clip; transition: background-color .7s var(--ease); }
.site > [data-m] { position: relative; z-index: 1; margin: 0; min-width: 0; min-height: 0; transition: color .6s, background-color .6s, border-color .6s, border-radius .6s, box-shadow .6s; }
.site [data-m] * { transition: color .6s, background-color .6s, border-color .6s; }
.s-logo { grid-area: logo; } .s-nav { grid-area: nav; } .s-bag { grid-area: bag; } .s-kick { grid-area: kick; } .s-title { grid-area: title; }
.s-art { grid-area: art; } .s-name { grid-area: name; } .s-notes { grid-area: notes; } .s-price { grid-area: price; } .s-add { grid-area: add; }
.s-logo small { font-size: inherit; }
.s-nav { display: flex; }
.s-bag { display: flex; align-items: baseline; }
.s-bag b { display: inline-block; font-weight: inherit; font-variant-numeric: tabular-nums; }
.s-title span, .s-title em { display: inline; }
.s-name b, .s-name span { display: block; }
.s-price b { font-weight: inherit; }
.s-add { font: inherit; color: inherit; border: 0 solid transparent; background-color: transparent; padding: 0; cursor: pointer; }
.s-add:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.site.is-added .s-add { animation: s-hit .5s var(--ease); }
@keyframes s-hit { 30% { filter: brightness(1.25); } }
.s-art { display: block; }
.s-art__bag {
  position: absolute; left: 6%; top: 6%; width: 88%; height: 88%; overflow: visible;
  transition: transform .9s var(--ease), filter .9s var(--ease);
  filter: grayscale(0) sepia(0) hue-rotate(0deg) saturate(1) contrast(1) brightness(1) drop-shadow(0 22px 26px rgba(0, 0, 0, .5));
}
/* decorations, one look each */
.site__deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sd { position: absolute; opacity: 0; transition: opacity .8s var(--ease); }
.sd--blob { border-radius: 50%; filter: blur(40px); }
.sd--a { width: 46%; aspect-ratio: 1; left: -8%; top: -14%; background: #FFC2D9; }
.sd--b { width: 40%; aspect-ratio: 1; right: -6%; top: 18%; background: #C9D7FF; }
.sd--c { width: 36%; aspect-ratio: 1; left: 30%; bottom: -24%; background: #FFE4B8; }
.sd--spot { left: 22%; right: 22%; top: 4%; bottom: -10%; background: radial-gradient(ellipse at 50% 52%, rgba(201, 164, 106, .2), rgba(201, 164, 106, .05) 45%, transparent 68%); }
.sd--scan { inset: 0; z-index: 5; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .28) 0 2px, transparent 2px 4px), radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, .55)); }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- editorial: a magazine. Serif on paper, a rule under the masthead, the coffee in a dark plate */
[data-look=editorial] {
  background-color: #F3EEE4; color: #1B1814; font-family: Georgia, "Times New Roman", serif;
  padding: 24px 40px 30px; column-gap: 0;
  grid-template-columns: 1.25fr 1fr 48px 1fr 1fr 1fr; grid-template-rows: auto auto auto 1fr auto auto;
  grid-template-areas:
    "logo  nav   nav nav nav bag"
    "kick  kick  .   art art art"
    "title title .   art art art"
    ".     .     .   art art art"
    "notes name  .   art art art"
    "price add   .   art art art";
}
[data-look=editorial] .s-logo, [data-look=editorial] .s-nav, [data-look=editorial] .s-bag {
  padding-bottom: 14px; margin-bottom: 30px; border-bottom: 1px solid #1B1814; font: 500 12px/1 var(--f-text); letter-spacing: .18em; text-transform: uppercase;
}
[data-look=editorial] .s-nav { justify-content: center; gap: 28px; }
[data-look=editorial] .s-bag { justify-content: flex-end; gap: .4em; }
[data-look=editorial] .s-bag b::before { content: "("; } [data-look=editorial] .s-bag b::after { content: ")"; }
[data-look=editorial] .s-kick { margin-bottom: 14px; font: italic 400 17px/1.2 Georgia, serif; color: #8A4A15; }
[data-look=editorial] .s-title { font: 400 clamp(40px, 6.6cqw, 88px)/.96 Georgia, "Times New Roman", serif; letter-spacing: -.02em; padding-right: 12px; }
[data-look=editorial] .s-title em { font-style: italic; color: #8A4A15; }
[data-look=editorial] .s-notes { font-size: 14px; line-height: 1.55; padding-right: 22px; max-width: 30ch; }
[data-look=editorial] .s-name b { font: italic 400 16px/1.3 Georgia, serif; }
[data-look=editorial] .s-name span { margin-top: 4px; font-size: 13px; line-height: 1.5; color: #6E5F50; }
[data-look=editorial] .s-price { align-self: end; margin-top: 22px; font-size: 24px; line-height: 1; }
[data-look=editorial] .s-price span { margin-left: 8px; font-size: 14px; color: #6E5F50; }
[data-look=editorial] .s-add { align-self: end; justify-self: start; margin-top: 22px; padding-bottom: 5px; border-bottom: 1px solid #1B1814; font: 500 12px/1 var(--f-text); letter-spacing: .16em; text-transform: uppercase; }
[data-look=editorial] .s-add::after { content: " →"; }
[data-look=editorial] .s-art { border-radius: 2px; background-color: #3A1B0D; box-shadow: inset 0 0 140px 30px rgba(0, 0, 0, .5); }

/* ---------- poster: loud. Orange, black, giant type, the bag tilted with a hard shadow, the price on a disc */
[data-look=poster] {
  background-color: #FF4D1C; color: #0F0A08; font-family: var(--f-display);
  padding: 20px 30px 26px; column-gap: 24px; row-gap: 14px;
  grid-template-columns: 1fr 1fr 1fr 1.15fr; grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "logo  nav   nav   bag"
    "title title title art"
    "kick  notes name  add";
}
[data-look=poster] .s-logo { white-space: nowrap; font: 900 22px/1 var(--f-display); letter-spacing: -.02em; text-transform: uppercase; align-self: center; }
[data-look=poster] .s-logo small { margin-left: 4px; font-size: 11px; font-weight: 600; letter-spacing: .22em; }
[data-look=poster] .s-nav { justify-content: center; align-self: center; gap: 22px; font: 700 13px/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; }
[data-look=poster] .s-bag { justify-self: end; align-self: center; gap: 6px; padding: 9px 15px; border-radius: 999px; background-color: #0F0A08; color: #FFE9D6; font: 800 12px/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; }
[data-look=poster] .s-kick { align-self: end; font: 800 14px/1.2 var(--f-display); letter-spacing: .04em; text-transform: uppercase; }
[data-look=poster] .s-title { align-self: center; font: 900 clamp(56px, 11.4cqw, 168px)/.8 var(--f-display); letter-spacing: -.055em; text-transform: uppercase; }
[data-look=poster] .s-title span, [data-look=poster] .s-title em { display: block; }
[data-look=poster] .s-title em { font-style: normal; color: #FFE9D6; }
[data-look=poster] .s-notes { align-self: end; font: 500 15px/1.35 var(--f-display); max-width: 26ch; }
[data-look=poster] .s-name { align-self: end; }
[data-look=poster] .s-name b { font: 800 18px/1.1 var(--f-display); text-transform: uppercase; }
[data-look=poster] .s-name span { margin-top: 4px; font: 500 12px/1.3 var(--f-display); }
[data-look=poster] .s-price { grid-area: art; z-index: 3; justify-self: end; align-self: start; width: 112px; height: 112px; border-radius: 50%; background-color: #0F0A08; color: #FFE9D6; display: grid; place-content: center; text-align: center; }
[data-look=poster] .s-price b { font: 900 34px/1 var(--f-display); letter-spacing: -.03em; }
[data-look=poster] .s-price span { margin-top: 4px; font: 700 11px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; }
[data-look=poster] .s-add { align-self: end; justify-self: end; padding: 17px 28px; border-radius: 999px; background-color: #0F0A08; color: #FFE9D6; font: 800 14px/1 var(--f-display); letter-spacing: .05em; text-transform: uppercase; }
[data-look=poster] .s-art__bag { transform: rotate(-9deg) scale(1.22); filter: grayscale(0) sepia(0) hue-rotate(0deg) saturate(1.05) contrast(1.05) brightness(1) drop-shadow(14px 14px 0 #0F0A08); }

/* ---------- brutalist: raw. Black rules between plain boxes (the gaps show the black page), mono, one green */
[data-look=brutal] {
  background-color: #000; color: #000; font-family: var(--f-mono); padding: 0; gap: 3px;
  grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto 1fr auto auto;
  grid-template-areas:
    "logo  nav   nav   bag"
    "title title art   art"
    "kick  name  notes price"
    "add   add   add   add";
}
[data-look=brutal] > [data-m] { padding: 13px 16px; background-color: #E8E8E2; font-size: 13px; line-height: 1.45; }
[data-look=brutal] .s-logo, [data-look=brutal] .s-nav, [data-look=brutal] .s-bag { background-color: #fff; font-weight: 500; text-transform: uppercase; }
[data-look=brutal] .s-nav { gap: 14px; }
[data-look=brutal] .s-nav span::before { content: "["; } [data-look=brutal] .s-nav span::after { content: "]"; }
[data-look=brutal] .s-bag { justify-content: flex-end; }
[data-look=brutal] .s-bag::before { content: "["; } [data-look=brutal] .s-bag::after { content: "]"; }
[data-look=brutal] .s-bag span::after { content: ":"; }
[data-look=brutal] .s-title { display: flex; flex-wrap: wrap; align-content: center; column-gap: .26em; padding: 22px 18px; font: 900 clamp(34px, 6.6cqw, 94px)/.92 "Arial Black", "Arial Bold", Impact, sans-serif; letter-spacing: -.045em; text-transform: uppercase; }
[data-look=brutal] .s-title em { font-style: normal; background-color: #00F07A; padding: 0 .08em; }
[data-look=brutal] .s-art { background-color: #fff; }
[data-look=brutal] .s-art__bag { transform: scale(.94); filter: grayscale(1) sepia(0) hue-rotate(0deg) saturate(1) contrast(1.3) brightness(1.02) drop-shadow(0 0 0 rgba(0, 0, 0, 0)); }
[data-look=brutal] .s-kick { text-transform: uppercase; }
[data-look=brutal] .s-kick::before { content: "// "; }
[data-look=brutal] .s-name b { font-weight: 500; text-transform: uppercase; }
[data-look=brutal] .s-name span { font-size: 12px; }
[data-look=brutal] .s-price b { display: block; font: 900 30px/1 "Arial Black", "Arial Bold", Impact, sans-serif; letter-spacing: -.03em; }
[data-look=brutal] .s-price span { font-size: 12px; text-transform: uppercase; }
[data-look=brutal] .s-add { padding: 18px 16px; background-color: #00F07A; text-align: left; font: 900 clamp(20px, 2.8cqw, 36px)/1 "Arial Black", "Arial Bold", Impact, sans-serif; letter-spacing: -.03em; text-transform: uppercase; }
[data-look=brutal] .s-add::after { content: " →"; }

/* ---------- soft: gentle. Pastel light, rounded, the bag floating in the middle with the words around it */
[data-look=soft] {
  background-color: #F6E9F0; color: #3B2340; font-family: var(--f-display);
  padding: 20px 36px 26px; column-gap: 34px;
  grid-template-columns: 1fr minmax(0, .9fr) 1fr; grid-template-rows: auto auto auto 1fr auto auto 1fr;
  grid-template-areas:
    "logo  nav   bag"
    "kick  kick  kick"
    "title title title"
    ".     art   ."
    "name  art   price"
    "notes art   add"
    ".     art   .";
}
[data-look=soft] .sd--blob { opacity: 1; }
[data-look=soft] .s-logo { align-self: center; font: 400 19px/1 var(--f-display); letter-spacing: .01em; text-transform: lowercase; }
[data-look=soft] .s-nav { justify-content: center; align-self: center; gap: 6px; font: 400 14px/1 var(--f-display); }
[data-look=soft] .s-nav span { padding: 8px 14px; border-radius: 999px; background-color: rgba(255, 255, 255, .5); }
[data-look=soft] .s-bag { justify-self: end; align-self: center; gap: 6px; padding: 9px 16px; border-radius: 999px; background-color: rgba(255, 255, 255, .75); font: 400 14px/1 var(--f-display); text-transform: lowercase; }
[data-look=soft] .s-kick { margin-top: 18px; text-align: center; font: 400 13px/1 var(--f-display); letter-spacing: .32em; text-transform: lowercase; }
[data-look=soft] .s-title { margin: 10px 0 18px; text-align: center; font: 300 clamp(40px, 6.4cqw, 86px)/1 var(--f-display); letter-spacing: -.035em; }
[data-look=soft] .s-title em { font-style: normal; color: #B0507D; }
[data-look=soft] .s-art { border-radius: 999px; background-color: rgba(255, 255, 255, .45); box-shadow: 0 30px 60px -20px rgba(120, 60, 120, .25); }
[data-look=soft] .s-art__bag { transform: rotate(-4deg) scale(.92); filter: grayscale(0) sepia(0) hue-rotate(0deg) saturate(.95) contrast(1) brightness(1.04) drop-shadow(0 24px 26px rgba(120, 60, 120, .3)); }
[data-look=soft] .s-name { align-self: end; text-align: right; }
[data-look=soft] .s-name b { font: 400 20px/1.2 var(--f-display); }
[data-look=soft] .s-name span { margin-top: 4px; font: 300 14px/1.4 var(--f-display); opacity: .75; }
[data-look=soft] .s-notes { justify-self: end; margin-top: 12px; max-width: 24ch; text-align: right; font: 300 15px/1.45 var(--f-display); }
[data-look=soft] .s-price { align-self: end; font: 300 36px/1 var(--f-display); letter-spacing: -.02em; }
[data-look=soft] .s-price span { margin-left: 8px; font-size: 14px; letter-spacing: 0; opacity: .7; }
[data-look=soft] .s-add { justify-self: start; align-self: start; margin-top: 14px; padding: 15px 28px; border-radius: 999px; background-color: #3B2340; color: #F6E9F0; font: 400 15px/1 var(--f-display); box-shadow: 0 14px 30px -10px rgba(59, 35, 64, .45); }

/* ---------- luxury: dark and quiet. Tracked capitals, a serif in italics, gold, the bag in a pool of light */
[data-look=luxe] {
  background-color: #0C0B0A; color: #EDE6DA; font-family: var(--f-display);
  padding: 24px 44px 28px; column-gap: 44px;
  grid-template-columns: 1fr minmax(0, .9fr) 1fr; grid-template-rows: auto 1fr auto auto auto auto 1fr;
  grid-template-areas:
    "nav   logo  bag"
    ".     art   ."
    "kick  art   name"
    "title art   notes"
    "title art   price"
    "title art   add"
    ".     art   .";
}
[data-look=luxe] .sd--spot { opacity: 1; }
[data-look=luxe] .s-nav { align-self: center; gap: 24px; font: 400 11px/1 var(--f-display); letter-spacing: .3em; text-transform: uppercase; color: #A89F92; }
[data-look=luxe] .s-logo { text-align: center; font: 300 20px/1 var(--f-display); letter-spacing: .55em; text-indent: .55em; text-transform: uppercase; }
[data-look=luxe] .s-logo small { display: block; margin-top: 7px; font-size: 9px; letter-spacing: .6em; color: #C9A46A; }
[data-look=luxe] .s-bag { justify-content: flex-end; align-self: center; gap: .5em; font: 400 11px/1 var(--f-display); letter-spacing: .3em; text-transform: uppercase; color: #A89F92; }
[data-look=luxe] .s-bag b::before { content: "("; } [data-look=luxe] .s-bag b::after { content: ")"; }
[data-look=luxe] .s-kick { text-align: right; margin-bottom: 16px; font: 400 11px/1 var(--f-display); letter-spacing: .32em; text-transform: uppercase; color: #C9A46A; }
[data-look=luxe] .s-title { text-align: right; font: italic 400 clamp(30px, 3.8cqw, 54px)/1.08 Georgia, "Times New Roman", serif; letter-spacing: -.01em; }
[data-look=luxe] .s-title em { color: #C9A46A; }
[data-look=luxe] .s-art__bag { transform: scale(1.04); filter: grayscale(0) sepia(0) hue-rotate(0deg) saturate(.92) contrast(1.08) brightness(.9) drop-shadow(0 34px 40px rgba(0, 0, 0, .75)); }
[data-look=luxe] .s-name b { font: 300 14px/1.3 var(--f-display); letter-spacing: .3em; text-transform: uppercase; }
[data-look=luxe] .s-name span { margin-top: 7px; font: 400 11px/1.4 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: #A89F92; }
[data-look=luxe] .s-notes { margin-top: 16px; max-width: 26ch; font: 300 14px/1.65 var(--f-display); color: #CFC6B8; }
[data-look=luxe] .s-price { margin-top: 18px; font: 300 26px/1 var(--f-display); letter-spacing: .04em; }
[data-look=luxe] .s-price span { margin-left: 12px; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: #A89F92; }
[data-look=luxe] .s-add { justify-self: start; margin-top: 20px; padding: 14px 26px; border: 1px solid #C9A46A; color: #C9A46A; font: 400 11px/1 var(--f-display); letter-spacing: .3em; text-transform: uppercase; }
[data-look=luxe] .s-add:hover { background-color: #C9A46A; color: #0C0B0A; }

/* ---------- terminal: the page as a text screen. Green phosphor, mono lines, the bag in a dashed box */
[data-look=terminal] {
  background-color: #050A06; color: #7CFF9B; font-family: var(--f-mono); font-size: 14px; line-height: 1.6;
  padding: 22px 30px 26px; column-gap: 28px; row-gap: 6px;
  grid-template-columns: auto 1fr auto 32%; grid-template-rows: auto auto auto auto auto auto 1fr;
  grid-template-areas:
    "logo  nav   bag   bag"
    "kick  kick  kick  art"
    "title title title art"
    "name  name  name  art"
    "notes notes notes art"
    "price add   .     art"
    ".     .     .     art";
  text-shadow: 0 0 8px rgba(124, 255, 155, .45);
}
[data-look=terminal] .sd--scan { opacity: 1; }
[data-look=terminal] .s-logo { text-transform: lowercase; }
[data-look=terminal] .s-logo::before { content: "["; } [data-look=terminal] .s-logo::after { content: "]"; }
[data-look=terminal] .s-nav { gap: 0; color: #3FA35A; text-transform: lowercase; }
[data-look=terminal] .s-nav span + span::before { content: " | "; white-space: pre; }
[data-look=terminal] .s-bag { justify-self: start; text-transform: lowercase; }
[data-look=terminal] .s-bag b::before { content: "("; } [data-look=terminal] .s-bag b::after { content: ")"; }
[data-look=terminal] .s-kick { margin-top: 26px; color: #3FA35A; text-transform: lowercase; }
[data-look=terminal] .s-kick::before { content: "# "; }
[data-look=terminal] .s-title { margin: 4px 0 18px; font: 500 clamp(24px, 3.6cqw, 48px)/1.15 var(--f-mono); letter-spacing: -.02em; text-transform: uppercase; }
[data-look=terminal] .s-title::before { content: "> "; }
[data-look=terminal] .s-title em { font-style: normal; }
[data-look=terminal] .s-title::after { content: ""; display: inline-block; width: .55em; height: .9em; margin-left: .15em; vertical-align: -.08em; background: #7CFF9B; animation: blink 1s steps(1) infinite; }
[data-look=terminal] .s-name b, [data-look=terminal] .s-name span { font-weight: 400; }
[data-look=terminal] .s-name b, [data-look=terminal] .s-name span, [data-look=terminal] .s-notes { padding-left: 10ch; text-indent: -10ch; }   /* a wrapped line starts under the value, not the label */
[data-look=terminal] .s-name b::before { content: "coffee  : "; white-space: pre; color: #3FA35A; }
[data-look=terminal] .s-name span::before { content: "origin  : "; white-space: pre; color: #3FA35A; }
[data-look=terminal] .s-notes::before { content: "notes   : "; white-space: pre; color: #3FA35A; }
[data-look=terminal] .s-price { align-self: center; margin-top: 14px; }
[data-look=terminal] .s-price b::before { content: "price   : "; white-space: pre; color: #3FA35A; }
[data-look=terminal] .s-price span { margin-left: .6em; }
[data-look=terminal] .s-add { justify-self: start; align-self: center; margin-top: 14px; padding: 4px 8px; text-transform: lowercase; }
[data-look=terminal] .s-add::before { content: "[ "; white-space: pre; } [data-look=terminal] .s-add::after { content: " ]"; white-space: pre; }
[data-look=terminal] .s-add:hover, [data-look=terminal] .s-add:focus-visible { background-color: #7CFF9B; color: #050A06; text-shadow: none; }
[data-look=terminal] .s-art { border: 1px dashed rgba(124, 255, 155, .45); background-color: rgba(124, 255, 155, .04); }
[data-look=terminal] .s-art__bag { transform: scale(.86); filter: grayscale(1) sepia(1) hue-rotate(68deg) saturate(2.2) contrast(1.15) brightness(.72) drop-shadow(0 0 14px rgba(124, 255, 155, .3)); }

/* ---------- narrower frames: no room for the menu, as on a real site; the masthead closes over its place */
@container (max-width: 820px) {
  .s-nav { display: none; }
  [data-look=editorial] .s-logo { grid-column: 1 / 6; }
  [data-look=brutal] .s-logo { grid-column: 1 / 4; }
  [data-look=poster] .s-logo { font-size: 19px; }
  [data-look=poster] .s-logo small { font-size: 9px; letter-spacing: .14em; }
}

/* ---------- phones and small tablets: each look keeps its character in a narrow layout (the frame's width decides) */
@container (max-width: 720px) {
  [data-look=editorial] .s-logo, [data-look=brutal] .s-logo { grid-column: auto; grid-area: logo; }
  [data-look=editorial] {
    padding: 16px 18px 20px; column-gap: 0;
    grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "logo bag" "kick kick" "title title" "art art" "notes name" "price add";
  }
  [data-look=editorial] .s-logo, [data-look=editorial] .s-bag { margin-bottom: 18px; padding-bottom: 12px; font-size: 11px; }
  [data-look=editorial] .s-kick { margin-bottom: 8px; font-size: 15px; }
  [data-look=editorial] .s-title { margin-bottom: 14px; font-size: 40px; }
  [data-look=editorial] .s-notes { margin-top: 14px; padding-right: 16px; font-size: 13px; line-height: 1.45; }
  [data-look=editorial] .s-name { margin-top: 14px; }
  [data-look=editorial] .s-name b { font-size: 15px; } [data-look=editorial] .s-name span { font-size: 12px; }
  [data-look=editorial] .s-price, [data-look=editorial] .s-add { margin-top: 14px; }
  [data-look=editorial] .s-add { justify-self: end; }

  [data-look=poster] {
    padding: 14px 16px 18px; column-gap: 12px; row-gap: 10px;
    grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "logo bag" "title title" "kick art" "notes art" "name art" "add art";
  }
  [data-look=poster] .s-title { font-size: 15cqw; }
  [data-look=poster] .s-price { width: 76px; height: 76px; }
  [data-look=poster] .s-price b { font-size: 24px; }
  [data-look=poster] .s-price span { font-size: 9px; }
  [data-look=poster] .s-kick { align-self: start; font-size: 12px; }
  [data-look=poster] .s-notes { font-size: 13px; }
  [data-look=poster] .s-name b { font-size: 15px; }
  [data-look=poster] .s-add { justify-self: start; padding: 14px 20px; font-size: 12px; }

  [data-look=brutal] {
    grid-template-columns: 1fr 1fr; grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
    grid-template-areas: "logo bag" "title title" "art name" "art price" "kick notes" "add add";
  }
  [data-look=brutal] > [data-m] { padding: 10px 12px; font-size: 12px; }
  [data-look=brutal] .s-title { padding: 16px 12px; font-size: 10.5cqw; }
  [data-look=brutal] .s-price b { font-size: 24px; }
  [data-look=brutal] .s-add { padding: 14px 12px; font-size: 20px; }

  [data-look=soft] {
    padding: 16px 18px 20px; column-gap: 14px;
    grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "logo bag" "kick kick" "title title" "art art" "name price" "notes add";
  }
  [data-look=soft] .s-logo { font-size: 17px; }
  [data-look=soft] .s-bag { font-size: 13px; padding: 8px 13px; }
  [data-look=soft] .s-kick { margin-top: 14px; font-size: 11px; }
  [data-look=soft] .s-title { margin: 8px 0 12px; font-size: 40px; }
  [data-look=soft] .s-name { margin-top: 12px; }
  [data-look=soft] .s-name b { font-size: 16px; } [data-look=soft] .s-name span { font-size: 12px; }
  [data-look=soft] .s-notes { margin-top: 8px; font-size: 13px; }
  [data-look=soft] .s-price { margin-top: 12px; font-size: 28px; }
  [data-look=soft] .s-add { margin-top: 10px; padding: 13px 20px; font-size: 14px; }

  [data-look=luxe] {
    padding: 18px 18px 20px; column-gap: 16px;
    grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(0, 1fr) auto auto auto auto;
    grid-template-areas: "logo bag" "art art" "kick kick" "title title" "name price" "notes add";
  }
  [data-look=luxe] .s-logo { text-align: left; text-indent: 0; font-size: 16px; letter-spacing: .4em; }
  [data-look=luxe] .s-bag { font-size: 10px; letter-spacing: .2em; }
  [data-look=luxe] .s-kick { margin: 10px 0 8px; text-align: center; font-size: 10px; }
  [data-look=luxe] .s-title { margin-bottom: 14px; text-align: center; font-size: 30px; }
  [data-look=luxe] .s-name b { font-size: 12px; letter-spacing: .22em; } [data-look=luxe] .s-name span { font-size: 10px; letter-spacing: .1em; }
  [data-look=luxe] .s-notes { margin-top: 10px; font-size: 12.5px; line-height: 1.5; }
  [data-look=luxe] .s-price { margin-top: 0; justify-self: end; font-size: 22px; }
  [data-look=luxe] .s-add { justify-self: end; align-self: end; margin-top: 10px; padding: 12px 16px; font-size: 10px; letter-spacing: .22em; }

  [data-look=terminal] {
    padding: 16px 16px 20px; column-gap: 14px; row-gap: 4px; font-size: 12.5px;
    grid-template-columns: 1fr auto; grid-template-rows: auto auto auto minmax(0, 1fr) auto auto auto;
    grid-template-areas: "logo bag" "kick kick" "title title" "art art" "name name" "notes notes" "price add";
  }
  [data-look=terminal] .s-bag { justify-self: end; }
  [data-look=terminal] .s-kick { margin-top: 14px; }
  [data-look=terminal] .s-title { margin: 2px 0 10px; font-size: 24px; }
  [data-look=terminal] .s-art { margin-bottom: 10px; }
  [data-look=terminal] .s-price, [data-look=terminal] .s-add { margin-top: 8px; }
}

/* ======================================================= END */
.end { position: relative; padding: clamp(120px, 18vh, 200px) 0 0; }
.end__inner { width: min(100% - 2 * var(--gutter), var(--maxw)); margin: 0 auto; }
.end__title { margin: 0 0 60px; font: 500 clamp(44px, 8vw, 128px)/.92 var(--f-display); letter-spacing: -.04em; }
.index { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); column-gap: 32px; border-top: 1px solid var(--line); }
.index li { border-bottom: 1px solid var(--line); }
.index a { display: flex; gap: 14px; align-items: baseline; padding: 15px 4px; text-decoration: none; font-size: 16px; transition: color .25s, padding .35s var(--ease); }
.index b { flex: none; width: 2.2em; font: 500 13px/1 var(--f-mono); color: var(--accent); }
.index a:hover { color: var(--lamp); padding-left: 12px; }
.end__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 70px 0 0; }
.foot { width: min(100% - 2 * var(--gutter), var(--maxw)); margin: 120px auto 0; padding: 26px 0 34px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font: 400 12px/1.4 var(--f-mono); color: var(--faint); }

/* ======================================================= REDUCED MOTION
   No pins. Every cue is shown at once, stacked; the films stay still. */
.rm .film, .rm .depth, .rm .wipe, .rm .aurora, .rm .glpin { height: auto; min-height: 80svh; }
.rm .film__frame, .rm .depth__stage, .rm .wipe__stage, .rm .aurora__stage, .rm .glpin__stage { position: relative; min-height: 80svh; }
.rm .film__frame { clip-path: none; }
.rm .film__copy { gap: 10px; }
.rm .film__line { grid-area: auto; opacity: 1; font-size: clamp(26px, 4vw, 52px); }
.rm .ws--b { clip-path: none; }
.rm .glpin__copy { display: flex; flex-direction: column; gap: 12px; }
.rm .glpin__line { opacity: 1; font-size: clamp(22px, 3vw, 36px); }
.rm .aurora [data-in] { opacity: 1; visibility: visible; }
.rm .site, .rm .site *, .rm .sd, .rm .s-art__bag { transition: none !important; }
.rm [data-look=terminal] .s-title::after { animation: none; }