/* Versus Avenue brand site. One stylesheet.

   Typefaces. The brand's are NB International (Neubau) and Base Neue (Power Type). They are commercial and are not
   bundled; the page asks for them by name first and falls back to Onest and Barlow, which are. Once licensed for
   web use, add them here, for example:
     @font-face { font-family: 'NB International'; src: url('../fonts/NBInternational-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
     @font-face { font-family: 'Base Neue'; src: url('../fonts/BaseNeue-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; } */
@font-face { font-family: 'Onest'; src: url('../fonts/Onest-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/Barlow-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
/* the little the page expects from the document around it */
:root { box-sizing: border-box; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
img { max-width: 100%; }

/* Layout: one black stage, read top to bottom like a binder. Type and hairlines carry the page.
   The only objects with edges are cards cut to 63 x 88, the size of a trading card. */
:root {
  color-scheme: dark;
  --stage: #000000;
  --white: #FFFFFF;
  --yellow: #FFDE16;
  --orange: #F89322;
  --oxblood: #6C0C17;
  --purple: #92278F;
  --red: #EC2A40;
  --pink: #F06E8C;
  --rule: #4D4D4D;
  --muted: #9A9A9A;
  --soft: #BDBDBD;
  --mat: #262626;
  --dot: #2B2B2B;
  --font: 'NB International', 'NB International Pro', Onest, system-ui, sans-serif;
  --label: 'Base Neue', Barlow, 'Arial Narrow', sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1280px;
  --fs-head: clamp(34px, 5vw, 56px);
  --fs-sub: clamp(21px, 2.3vw, 28px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
.asis { text-transform: none; }
/* Hooks for the motion layer. Springs write these variables; they ride on translate and scale, which are separate from
   transform, so a scroll reveal (transform) and a press (scale) can run on the same element without stepping on each other. */
.fx { translate: var(--fx-x, 0px) var(--fx-y, 0px); scale: var(--fx-s, 1); }
/* set by a tiny script at the top of the page, dropped as soon as the opening sequence takes over, or after 2.6 s at the latest */
.fx-pending .hero-lockup, .fx-pending .hero-line, .fx-pending .hero-actions, .fx-pending .ticker { opacity: 0; }
html { scroll-padding-top: 72px; }
body {
  overflow-x: hidden;               /* things slide in from the side; none of them may widen the page */
  overflow-x: clip;                 /* (clip where the browser has it, hidden where it does not) */
  margin: 0;
  padding-inline: var(--gutter);
  background: var(--stage);
  color: var(--white);
  font: 400 17px/26px var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
h1, h2, h3 { font-weight: 400; letter-spacing: -0.02em; text-wrap: balance; }
a { color: var(--yellow); }
a:hover { color: var(--white); }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.page { max-width: var(--maxw); margin-inline: auto; }
.label { font-family: var(--label); font-size: 13px; line-height: 16px; letter-spacing: 0.02em; text-transform: uppercase; }
.muted { color: var(--muted); }
.soft { color: var(--soft); }

/* ---------- controls ---------- */
.btn {
  font-family: var(--label); font-size: 14px; line-height: 20px; letter-spacing: 0.02em; text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 12px 20px;
  border: 1px solid var(--white); border-radius: 0; background: transparent; color: var(--white); text-decoration: none; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn:hover { background: var(--white); color: var(--stage); }
.btn.primary { background: var(--yellow); border-color: var(--yellow); color: var(--stage); }
.btn.primary:hover { background: var(--white); border-color: var(--white); color: var(--stage); }
.btn[disabled], .chip[disabled] { opacity: .45; cursor: not-allowed; }
.btn.small { min-height: 36px; padding: 7px 14px; font-size: 13px; }
.chip {
  font-family: var(--label); font-size: 12px; line-height: 16px; letter-spacing: 0.02em; text-transform: uppercase;
  padding: 6px 10px; border: 1px solid var(--rule); border-radius: 0; background: transparent; color: var(--white); cursor: pointer;
  transition: border-color .15s, color .15s;
}
.chip:hover { border-color: var(--white); }
.chip[aria-pressed="true"], .chip[aria-checked="true"] { border-color: var(--yellow); color: var(--yellow); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  background: var(--stage); border-bottom: 1px solid var(--rule);
}
.nav-in { max-width: var(--maxw); margin-inline: auto; height: 60px; display: flex; align-items: center; gap: 24px; }
.nav-brand { color: var(--white); text-decoration: none; font-size: 15px; line-height: 20px; }
.nav-links { position: relative; display: flex; gap: clamp(12px, 1.7vw, 26px); margin-left: auto; }
.nav-ind { position: absolute; left: 0; bottom: -9px; width: 40px; height: 2px; background: var(--yellow); opacity: 0; pointer-events: none; transform-origin: left center; }
.nav-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--yellow); transform: scaleX(0); transform-origin: left center; pointer-events: none; }
.nav-links a { color: var(--soft); text-decoration: none; }
.nav-links a:hover, .nav-links a[aria-current="true"] { color: var(--yellow); }
.nav .btn { margin-left: 8px; }
@media (max-width: 1040px) { .nav-links { display: none; } .nav .btn { margin-left: auto; } }

/* ---------- hero: centre stage ---------- */
.hero { display: flex; flex-direction: column; align-items: center; padding-block: clamp(8px, 2vw, 24px) clamp(56px, 8vw, 104px); }
/* the lockup keeps X (13.8% of its width) clear of the screen edge too: width <= screen / (1 + 2 x 0.138) */
.hero-stage { width: min(760px, calc((100% + 2 * var(--gutter)) * 0.775), max(300px, calc(108vh - 250px))); }
@supports (height: 1svh) { .hero-stage { width: min(760px, calc((100% + 2 * var(--gutter)) * 0.775), max(300px, calc(108svh - 250px))); } }
.hero-lockup { width: 100%; height: auto; margin-block: 14.5%; overflow: visible; --px: 0; --py: 0; }
/* Every part of the lockup is two groups. The outer one belongs to the sequences: GSAP writes its transform, or, without
   GSAP, the two keyframe animations below run on it. The inner one leans toward the pointer. One job per element, because
   an element GSAP transforms must not carry translate, rotate or scale of its own: GSAP folds them in and they are lost. */
html:not(.has-gsap) .hero-lockup > g { transform-box: fill-box; transform-origin: 50% 50%; }
.hl-orbit > .hl-in { translate: calc(var(--px) * -8px) calc(var(--py) * -6px); }
.hl-letters > .hl-in { translate: calc(var(--px) * 5px) calc(var(--py) * 4px); }
.hl-die > .hl-in { translate: calc(var(--px) * 18px) calc(var(--py) * 14px); }
.hl-spark > .hl-in { translate: calc(var(--px) * 30px) calc(var(--py) * 22px); }
.hl-die, .hl-spark { cursor: pointer; }
.hero-line { font-size: clamp(18px, 2.2vw, 24px); line-height: 1.35; text-align: center; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
@keyframes va-hop {
  0% { transform: translateY(0) rotate(0deg); }
  38% { transform: translateY(-46%) rotate(calc(var(--spin, 1) * 150deg)); }
  72% { transform: translateY(0) rotate(calc(var(--spin, 1) * 360deg)); }
  84% { transform: translateY(-7%) rotate(calc(var(--spin, 1) * 360deg)); }
  100% { transform: translateY(0) rotate(calc(var(--spin, 1) * 360deg)); }
}
@keyframes va-twinkle {
  0% { transform: scale(1) rotate(0deg); }
  45% { transform: scale(.3) rotate(-50deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.hl-die.is-hop { animation: va-hop .95s var(--ease) both; }
.hl-spark.is-hop { animation: va-twinkle .7s var(--ease) both; }

/* ---------- ticker: the contents, on a marquee ---------- */
.ticker { overflow: hidden; border-top: 1px solid var(--rule); padding-block: 15px; color: var(--muted); white-space: nowrap; }
.ticker-track { display: inline-flex; will-change: transform; }
.ticker-set { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; }
.ticker-set i { font-style: normal; color: var(--yellow); }

/* ---------- sections ---------- */
/* the hairline above each section is drawn, not bordered, so it can run in from the left */
section { position: relative; padding-block: clamp(64px, 9vw, 128px); }
section::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); transform: scaleX(var(--rule-x, 1)); transform-origin: left center; }
.head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px clamp(24px, 6vw, 96px); align-items: end; margin-bottom: clamp(32px, 5vw, 64px); }
.head .eyebrow { grid-column: 1 / -1; color: var(--yellow); }
.head h2 { font-size: var(--fs-head); line-height: 1.06; }
.ln-mask { padding-bottom: 0.16em; margin-bottom: -0.16em; }     /* room for descenders while a title rises through its mask */
.head .lead { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.45; max-width: 58ch; }
@media (max-width: 760px) { .head { grid-template-columns: minmax(0, 1fr); } }
.sub { font-size: var(--fs-sub); line-height: 1.25; letter-spacing: -0.01em; }
.note { font-size: 15px; line-height: 22px; color: var(--muted); max-width: 70ch; }
.block { margin-top: clamp(40px, 6vw, 80px); }

/* ---------- the deck: marks as cards ---------- */
.deck { display: grid; grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; gap: 24px; }
@media (min-width: 1256px) { .deck { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .deck { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(92%, 320px); justify-content: start; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: thin; }
  .deck > * { scroll-snap-align: center; }
}
.card { perspective: 1400px; }
/* dealt like a hand when the deck comes into view. The cards never wait on it: the class is set by the script,
   and all it does is play this once. */
@keyframes va-deal { from { opacity: 0; transform: translate3d(-56px, 32px, 0) rotate(-5deg); } to { opacity: 1; transform: none; } }
.deck.is-dealt .card { animation: va-deal .7s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 110ms); }
.card-inner {
  position: relative; aspect-ratio: 63 / 88; transform-style: preserve-3d;
  transform: translateY(var(--lift, 0px)) rotateX(var(--rx, 0deg)) rotateY(calc(var(--ry, 0deg) + var(--flip, 0deg)));
  transition: transform .7s var(--ease);
}
.card.is-tilting .card-inner { transition: transform .08s linear; }
.card.fx-spring .card-inner { transition: none; }          /* springs drive --rx, --ry, --flip and --lift frame by frame */
.card.is-flipped { --flip: 180deg; }
.card-face {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px;
  border: 1px solid var(--rule); border-radius: 4.8% / 3.4%; background: var(--stage);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden;
}
/* The two faces are a pixel apart, not in one plane. In one plane the browser cannot tell which of them is in front,
   and a click on the back of a tilted card can land on neither. */
.card-front { transform: translateZ(0.5px); }
.card-back { transform: rotateY(180deg) translateZ(0.5px); }
.card:not(.is-flipped) .card-back, .card.is-flipped .card-front { pointer-events: none; }
/* foil edge: the brand colours catching the light as the card turns */
.card-face::before {
  content: ""; position: absolute; inset: -1px; padding: 3px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from calc(var(--a, .08) * 1turn), var(--yellow), var(--orange), var(--red), var(--pink), var(--purple), var(--yellow));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .3s;
}
.card:hover .card-face::before, .card:focus-within .card-face::before, .card.is-flipped .card-face::before { opacity: 1; }
.card-hit { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.card-top { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); }
.card-art { flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; container-type: size; background: var(--stage); transition: background-color .3s; }
.card-art[data-bg="white"] { background: var(--white); }
.card-art[data-bg="oxblood"] { background: var(--oxblood); }
.card-art[data-bg="yellow"] { background: var(--yellow); }
.card-art img { height: auto; }
/* each mark is sized so its own clear space fits inside the window */
.card-art img[data-mark="lockup"] { width: min(72cqw, 100cqh); }
.card-art img[data-mark="wordmark"] { width: min(66cqw, 84cqh); }
.card-art img[data-mark="brandmark"], .card-art img[data-mark="dice"] { width: min(60cqw, 62cqh); }
.card-name { font-size: 24px; line-height: 28px; letter-spacing: -0.01em; }
.card-role { font-size: 15px; line-height: 21px; color: var(--soft); }
.card-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; color: var(--muted); }
.card-foot .flip { color: var(--yellow); }
.rules { display: flex; flex-direction: column; gap: 8px; }
.rules > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; }
.rules dt { font-family: var(--label); font-size: 12px; line-height: 19px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); }
.rules dd { font-size: 14px; line-height: 19px; }
.card-back fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.card-back legend { padding: 0; margin-bottom: 6px; color: var(--muted); }
.card-back .card-foot { margin-top: auto; }
.linkish { padding: 4px 0; border: 0; background: none; color: var(--yellow); cursor: pointer; }
.linkish:hover { color: var(--white); }
.deck-hint { margin-top: 20px; }

/* ---------- fit check ---------- */
.fit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .fit { grid-template-columns: minmax(0, 1fr); } }
.fit-stage {
  position: relative; height: clamp(320px, 42vw, 460px); border: 1px solid var(--rule); overflow: hidden; touch-action: pan-y;
  background-image: radial-gradient(circle, var(--dot) 1px, transparent 1.3px); background-size: 20px 20px; background-position: 10px 10px;
}
.fit-frame { position: absolute; left: 20px; top: 20px; background: var(--stage); outline: 1px solid var(--soft); display: grid; place-items: center; }
.fit-zone { position: relative; border: 1px dashed var(--yellow); display: grid; place-items: center; }
.fit-zone[hidden] + .fit-none { display: block; }
.fit-zone img { display: block; }
.fit-size { position: absolute; left: 0; bottom: calc(100% + 4px); white-space: nowrap; color: var(--muted); font-size: 12px; }
.fit-handle {
  position: absolute; right: -14px; bottom: -14px; width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: nwse-resize; touch-action: none;
}
.fit-handle::before { content: ""; position: absolute; inset: 8px; background: var(--yellow); }
.fit-none { display: none; color: var(--muted); }
.fit-side { display: flex; flex-direction: column; gap: 20px; }
.fit-read { display: flex; flex-direction: column; gap: 10px; min-height: 168px; }
.fit-read .sub { color: var(--white); }
.fit-read dl { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 6px 12px; font-size: 15px; line-height: 22px; }
.fit-read dt { font-family: var(--label); font-size: 12px; line-height: 22px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); }
.range { display: grid; grid-template-columns: 56px minmax(0, 1fr) 52px; gap: 12px; align-items: center; }
.range output { text-align: right; font-variant-numeric: tabular-nums; color: var(--soft); }
input[type="range"] { width: 100%; accent-color: var(--yellow); }

/* ---------- colour ---------- */
.prop { display: flex; height: 44px; border: 1px solid var(--rule); }
.prop > span { display: block; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 12px; font-size: 14px; line-height: 22px; color: var(--soft); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 12px; height: 12px; display: inline-block; }
.swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.swatch { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 196px; padding: 16px; border: 0; border-radius: 0; text-align: left; cursor: pointer; }
.swatch.on-dark { color: var(--white); }
.swatch.on-light { color: var(--stage); }
.swatch.edge { box-shadow: inset 0 0 0 1px var(--rule); }
.swatch-name { font-size: 22px; line-height: 26px; letter-spacing: -0.01em; }
.swatch-vals { display: flex; flex-direction: column; font-family: var(--label); font-size: 13px; line-height: 19px; letter-spacing: 0.02em; }
.swatch-copy { font-family: var(--label); font-size: 12px; line-height: 16px; letter-spacing: 0.02em; text-transform: uppercase; opacity: .0; transition: opacity .15s; }
.swatch:hover .swatch-copy, .swatch:focus-visible .swatch-copy, .swatch.is-copied .swatch-copy { opacity: 1; }
.versus { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .versus { grid-template-columns: minmax(0, 1fr); } }
.pick { display: flex; flex-direction: column; gap: 18px; }
.pick-row { display: flex; flex-direction: column; gap: 8px; }
.dots { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.dot { aspect-ratio: 1; padding: 0; border: 0; border-radius: 0; cursor: pointer; box-shadow: inset 0 0 0 1px var(--rule); }
.dot[aria-checked="true"] { outline: 2px solid var(--white); outline-offset: 2px; }
.arena { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--rule); }
@media (max-width: 620px) { .arena { grid-template-columns: minmax(0, 1fr); } }
.arena > div { min-height: 320px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; transition: background-color .25s, color .25s; }
.arena-aa { font-size: clamp(72px, 10vw, 120px); line-height: 1; letter-spacing: -0.02em; }
.arena-pair { font-size: 20px; line-height: 26px; }
.arena-score { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.arena-ratio { font-family: var(--label); font-size: 34px; line-height: 36px; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.arena > .arena-logo { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; justify-content: stretch; justify-items: center; align-items: center; container-type: inline-size; }
.arena-logo img { width: min(72cqw, 260px); height: auto; }
.arena-logo .label { text-align: center; }
.roll { display: inline-flex; align-items: center; gap: 12px; }
.roll img { width: 22px; height: auto; }
details.tones { margin-top: 32px; border-top: 1px solid var(--rule); }
details.tones summary { padding-block: 16px; cursor: pointer; }
.tone-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; padding-bottom: 8px; }
.tone i { display: block; height: 56px; }
.tone b { display: block; margin-top: 8px; font-weight: 400; font-size: 15px; line-height: 20px; }
.tone span { display: block; font-family: var(--label); font-size: 12px; line-height: 17px; letter-spacing: 0.02em; color: var(--muted); }

/* ---------- type ---------- */
.faces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 760px) { .faces { grid-template-columns: minmax(0, 1fr); } }
.face { border: 1px solid var(--rule); padding: 20px 24px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.face-big { font-size: clamp(88px, 12vw, 148px); line-height: 1; letter-spacing: -0.02em; }
.face-abc { font-size: 17px; line-height: 26px; overflow-wrap: anywhere; }
.face.base .face-big, .face.base .face-abc { font-family: var(--label); text-transform: uppercase; letter-spacing: 0.02em; }
.face-meta { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 2px 12px; }
.face-meta dt { color: var(--muted); }
.tester { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 8px; }
.tester input { flex: 1; min-width: 0; max-width: 420px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 0; background: var(--stage); color: var(--white); }
.scale { display: flex; flex-direction: column; }
.scale-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px 32px; align-items: center; padding-block: 14px; border-top: 1px solid var(--rule); }
.scale-row:last-child { border-bottom: 1px solid var(--rule); }
@media (max-width: 760px) { .scale-row { grid-template-columns: minmax(0, 1fr); } }
.scale-spec { display: flex; flex-direction: column; }
.scale-spec b { font-weight: 400; font-size: 20px; line-height: 26px; }
.scale-spec span { color: var(--muted); }
.scale-sample { min-width: 0; overflow-wrap: anywhere; }
.s-display { font-size: 96px; line-height: 96px; letter-spacing: -0.02em; }
.s-headline { font-size: 48px; line-height: 52px; letter-spacing: -0.02em; }
.s-subhead { font-size: 28px; line-height: 36px; }
.s-body { font-size: 16px; line-height: 24px; max-width: 75ch; }
.s-caption { font-size: 12px; line-height: 16px; }
.s-label { font-family: var(--label); font-size: 12px; line-height: 16px; letter-spacing: 0.02em; text-transform: uppercase; }
@media (max-width: 520px) { .s-display { font-size: 64px; line-height: 64px; } }

/* ---------- elements ---------- */
.kit3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 900px) { .kit3 { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.el { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (min-width: 601px) and (max-width: 900px) {
  .el { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: 12px 28px; }
  .el .el-stage { grid-row: 1 / span 2; }
  .el .el-bar { align-self: end; }
  .el p { align-self: start; }
}
.el-stage { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--rule); overflow: hidden; }
.el-stage .die { position: absolute; width: 26%; height: auto; translate: -50% -50%; scale: var(--fx-s, 1); transition: left .8s var(--ease), top .8s var(--ease), rotate .8s var(--ease), width .8s var(--ease); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .el-stage .die { cursor: grab; } }
.el-stage .die.is-dragging { transition: rotate .8s var(--ease); cursor: grabbing; z-index: 2; }
.el-stage.fx-wait .die { opacity: 0; }                     /* until they are dropped in; the motion layer sets and clears this */
.el-stage .spark { position: absolute; height: auto; translate: -50% -50%; cursor: pointer; }
.el-stage .spark.is-hop { animation: va-twinkle .7s var(--ease) both; }
.el-stage .orbit-spin { position: absolute; inset: 0; }      /* turns with the scroll; the orbit inside keeps its own placement */
.el-stage .orbit { position: absolute; left: 50%; top: 50%; width: 82%; height: auto; translate: -50% -50%; transition: width .8s var(--ease), left .8s var(--ease), top .8s var(--ease); }
.el-stage.is-large .orbit { width: 150%; left: 46%; top: 54%; }
.el-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.el p { font-size: 15px; line-height: 22px; color: var(--soft); }

/* ---------- banned list ---------- */
.ban-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 24px; }
.bans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1255px) { .bans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .bans { grid-template-columns: minmax(0, 1fr); } }
.ban { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ban-art { position: relative; aspect-ratio: 16 / 10; border: 1px solid var(--rule); overflow: hidden; display: grid; place-items: center; padding: 0; background: var(--stage); cursor: pointer; width: 100%; border-radius: 0; container-type: size; transition: background-color .4s; }
.ban-art img { max-width: none; transition: transform .5s var(--ease), filter .5s var(--ease), opacity .4s, width .5s var(--ease), left .5s var(--ease), top .5s var(--ease); }
.ban-art .lay { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .4s; }
.ban-art .lay.right { opacity: 0; }
.ban.is-fixed .lay.wrong { opacity: 0; }
.ban.is-fixed .lay.right { opacity: 1; }
.ban-cap { display: flex; align-items: center; gap: 10px; font-size: 18px; line-height: 24px; }
.ban-x { position: relative; width: 18px; height: 18px; flex: none; }
.ban-x::before, .ban-x::after { content: ""; position: absolute; left: 8px; top: -2px; width: 2.5px; height: 22px; background: var(--red); transition: transform .3s var(--ease), background-color .3s, height .3s, top .3s, left .3s; }
.ban-x::before { transform: rotate(45deg); }
.ban-x::after { transform: rotate(-45deg); }
.ban.is-fixed .ban-x::before { transform: rotate(45deg); background: var(--yellow); height: 20px; top: -2px; left: 11px; }
.ban.is-fixed .ban-x::after { transform: rotate(-45deg); background: var(--yellow); height: 10px; top: 7px; left: 3px; }
.ban-art .w-lockup { width: min(64cqw, 100cqh); height: auto; }
.ban-art .w-wordmark { width: min(50cqw, 80cqh); height: auto; }
.b-stretch .w-lockup { transform: scale(1.32, 0.74); }
.b-stretch.is-fixed .w-lockup { transform: scale(1, 1); }
.b-rotate .w-wordmark { transform: rotate(8.5deg); }
.b-rotate.is-fixed .w-wordmark { transform: rotate(0deg); }
.b-colour .w-lockup { filter: hue-rotate(150deg); }
.b-colour.is-fixed .w-lockup { filter: hue-rotate(0deg); }
.b-glow .w-wordmark { filter: drop-shadow(0 0 8px var(--yellow)) drop-shadow(0 0 22px var(--orange)); }
.b-glow.is-fixed .w-wordmark { filter: drop-shadow(0 0 0 transparent) drop-shadow(0 0 0 transparent); }
.b-crop .w-lockup { width: 130cqw; transform: translate(-6%, 6%); }
.b-crop.is-fixed .w-lockup { width: min(64cqw, 100cqh); transform: none; }
.b-onpurple .ban-art { background: var(--purple); }
.b-parts .lay.wrong img { position: absolute; height: auto; }
.b-retype .typed { font-size: 11cqw; line-height: 1.02; letter-spacing: 0.02em; text-transform: uppercase; color: var(--yellow); text-align: center; }

/* ---------- examples ---------- */
.plays { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; align-items: end; }
@media (max-width: 1000px) { .plays { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .plays { grid-template-columns: minmax(0, 1fr); } }
.play { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.play-art { min-width: 0; }
.play-cap { display: flex; flex-direction: column; }
.play-cap b { font-weight: 400; font-size: 18px; line-height: 24px; }
.play-cap span { color: var(--muted); }
.mock { position: relative; overflow: hidden; container-type: inline-size; max-width: 100%; }
.mock > img, .mock > div { position: absolute; }
.mock > img { height: auto; }
.tilt10 { rotate: 10deg; }
.mock .m-head { left: 0; width: 100%; text-align: center; font-size: 8.2cqw; line-height: 1.25; letter-spacing: -0.02em; }
.mock .m-lab { left: 0; width: 100%; text-align: center; font-family: var(--label); font-size: 5.3cqw; line-height: 1.3; letter-spacing: 0.02em; text-transform: uppercase; color: var(--yellow); }
.icons { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.icons .app { width: 132px; aspect-ratio: 1; border-radius: 22%; overflow: hidden; border: 1px solid var(--rule); }
.icons .avatar { width: 132px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 1px solid var(--rule); }
.icons .favs { display: flex; align-items: center; gap: 16px; }
.icons img { width: 100%; height: auto; }
.icons .favs img { width: auto; }
.sleeves { display: flex; gap: 20px; align-items: flex-end; }
.sleeve { width: min(46%, 170px); aspect-ratio: 63 / 88; border-radius: 4.8% / 3.4%; display: grid; place-items: center; }

/* ---------- the brandbook, page by page ---------- */
/* a strip across the whole screen. Without the motion layer, and on touch, it is swiped or scrolled sideways.
   With it, and a mouse, the strip is held in place and the page scroll runs the pages past, one at a time. */
/* two boxes: .book breaks out to the screen edges; .book-pin, inside it, is what gets held. The held box has no margins
   of its own, so holding it cannot change its width. */
.book { margin-inline: calc(50% - 50vw); }
.book-pin { overflow: hidden; }
.book-track { position: relative; display: flex; gap: clamp(16px, 2.4vw, 32px); padding: 2px max(var(--gutter), calc(50vw - var(--maxw) / 2)) 14px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.bp { flex: none; width: min(86vw, 760px); margin: 0; scroll-snap-align: center; display: flex; flex-direction: column; gap: 10px; }
.book.is-pinned .book-track { overflow: visible; scroll-snap-type: none; will-change: transform; }
.book.is-pinned .bp { width: max(320px, min(78vw, calc((100vh - 230px) * 16 / 9))); }      /* as large as the screen allows under the nav */
.bp-img { border: 1px solid var(--rule); overflow: hidden; aspect-ratio: 16 / 9; background: var(--stage); }
.bp img { display: block; width: 100%; height: 100%; max-width: none; }
.bp figcaption { display: flex; gap: 12px; color: var(--muted); }
.bp figcaption span:first-child { color: var(--yellow); font-variant-numeric: tabular-nums; }
.book-bar { display: flex; align-items: center; gap: 20px; width: min(100vw - 2 * var(--gutter), var(--maxw)); margin-inline: auto; padding: 14px 0 2px; }
.book-count { min-width: 62px; color: var(--soft); font-variant-numeric: tabular-nums; }
.book-line { position: relative; flex: 1; height: 1px; background: var(--rule); }
.book-line i { position: absolute; left: 0; top: -1px; width: 100%; height: 3px; background: var(--yellow); transform: scaleX(0); transform-origin: left center; }
.book-note { margin-top: 20px; }
@media (max-width: 560px) { .book-bar { flex-wrap: wrap; } .book-line { order: 3; flex-basis: 100%; } .book-bar .btn { margin-left: auto; } }

/* ---------- the kit ---------- */
.kit-btns { display: flex; flex-wrap: wrap; gap: 12px; }
/* three sparkles when a save goes through: three at most, at different sizes, as the brandbook has it */
.burst { position: fixed; left: 0; top: 0; z-index: 70; width: 0; height: 0; pointer-events: none; }
.burst img { position: absolute; left: 0; top: 0; max-width: none; height: auto; translate: -50% -50%; }
.kit { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 900px) { .kit { grid-template-columns: minmax(0, 1fr); } }
.kit-cta { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.kit-big { font-size: clamp(40px, 6vw, 72px); line-height: 1.02; letter-spacing: -0.02em; }
.kit-status { min-height: 22px; font-size: 15px; line-height: 22px; color: var(--soft); }
.bar { width: min(100%, 360px); height: 4px; background: var(--mat); }
.bar > i { display: block; height: 100%; width: 0; background: var(--yellow); transition: width .2s linear; }
.folders { display: flex; flex-direction: column; }
.folder { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 4px 20px; padding-block: 14px; border-top: 1px solid var(--rule); align-items: baseline; }
.folder:last-child { border-bottom: 1px solid var(--rule); }
.folder b { font-weight: 400; font-family: var(--label); font-size: 14px; letter-spacing: 0.02em; }
.folder span { font-size: 15px; line-height: 22px; color: var(--soft); }
.folder em { font-style: normal; font-family: var(--label); font-size: 12px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
@media (max-width: 560px) { .folder { grid-template-columns: minmax(0, 1fr) auto; } .folder span { grid-column: 1 / -1; } }
.kit-notes { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--rule); padding-block: 48px 64px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px; }
footer img { width: 132px; height: auto; margin: 24px; }
footer .label { color: var(--muted); display: flex; flex-direction: column; gap: 4px; text-align: right; }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; z-index: 60; padding: 10px 16px; background: var(--white); color: var(--stage); font-family: var(--label); font-size: 14px; letter-spacing: 0.02em; text-transform: uppercase; max-width: calc(100vw - 32px); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hl-die.is-hop, .hl-spark.is-hop, .el-stage .spark.is-hop { animation: none; }
  .card-inner, .ban-art img, .ban-art .lay, .el-stage .die, .el-stage .orbit { transition: none; }
}