/* ==========================================================================
   OddHangar
   Square corners only. Flat paint, no drop shadows. Every bay gets its own colour.
   ========================================================================== */

:root {
  --ink: #1B1A22;
  --ink-2: #2E2942;
  --night: #0F0E14;
  --chalk: #F4F1EA;
  --concrete: #DDD8CE;
  --muted: #55525E;
  --tomato: #FF5A36;
  --marigold: #FFBE1A;
  --pink: #FF8DC4;
  --jade: #13A57F;
  --cobalt: #2E4FE0;
  --cobalt-deep: #2440B8;
  --lilac: #B49BFF;

  --f-display: "Big Shoulders", "Arial Narrow", "Helvetica Neue", sans-serif;
  --f-stencil: "Big Shoulders Stencil", "Big Shoulders", "Arial Narrow", sans-serif;
  --f-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;

  --pad: clamp(1rem, 4vw, 3rem);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --snap: cubic-bezier(.2, .9, .25, 1);
  --line: 3px;
}

*,
*::before,
*::after { box-sizing: border-box; border-radius: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--chalk);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1.1875rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
svg { display: block; }
strong { font-weight: 800; }

a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 4px; }

::selection { background: var(--marigold); color: var(--ink); }

:focus-visible { outline: var(--line) solid currentColor; outline-offset: 4px; }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 20;
  padding: .75rem 1rem;
  background: var(--marigold);
  color: var(--ink);
  font: 800 1.1rem/1 var(--f-display);
  text-decoration: none;
}
.skip:focus { top: 1rem; }

.wrap {
  width: min(100% - 2 * var(--pad), 82rem);
  margin-inline: auto;
}

/* ---------- Buttons ---------- */

.btn {
  appearance: none;
  display: inline-block;
  margin: 0;
  padding: .75rem 1.05rem .7rem;
  border: var(--line) solid var(--ink);
  background: var(--ink);
  color: var(--chalk);
  font: 800 1.2rem/1 var(--f-display);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn:hover { background: var(--chalk); color: var(--ink); }
.btn:active { translate: 0 2px; }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--marigold); }
.btn--chalk { background: var(--chalk); color: var(--ink); border-color: var(--chalk); }
.btn--chalk:hover { background: var(--marigold); border-color: var(--marigold); color: var(--ink); }

/* ---------- Header (the roof) ---------- */

.site-header {
  position: relative;
  z-index: 10;
  background: var(--ink);
  color: var(--chalk);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 2rem;
  padding-block: .9rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .85rem;
  color: var(--chalk);
  text-decoration: none;
}
.brand__mark { width: 3.25rem; height: 3.25rem; }
.brand__word { width: auto; height: 1.3rem; aspect-ratio: 806 / 100; }

.site-header__right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a {
  display: block;
  padding: .5rem .7rem;
  color: var(--chalk);
  font: 800 1.2rem/1 var(--f-display);
  text-decoration: none;
  transition: background-color .15s, color .15s;
}
.site-nav li:nth-child(1) a:hover { background: var(--tomato); color: var(--ink); }
.site-nav li:nth-child(2) a:hover { background: var(--marigold); color: var(--ink); }
.site-nav li:nth-child(3) a:hover { background: var(--pink); color: var(--ink); }
.site-nav li:nth-child(4) a:hover { background: var(--jade); color: var(--ink); }
.site-nav li:nth-child(5) a:hover { background: var(--lilac); color: var(--ink); }
.site-nav .site-nav__knock { background: var(--marigold); color: var(--ink); }
.site-nav .site-nav__knock:hover { background: var(--chalk); }

.sound-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  padding: .45rem .65rem;
  border: 2px solid #4A4658;
  background: transparent;
  color: var(--chalk);
  font: 800 1rem/1 var(--f-display);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.sound-toggle svg { width: 1.25rem; height: 1.25rem; }
.sound-toggle:hover { border-color: var(--chalk); }
.sound-toggle[aria-pressed="true"] { border-color: var(--jade); }
.sound-toggle[aria-pressed="true"] .sound-toggle__off { display: none; }
.sound-toggle[aria-pressed="false"] .sound-toggle__waves { display: none; }
.sound-toggle[aria-pressed="false"] { color: #B9B4C4; }

/* ---------- Hero (the front of the hangar) ---------- */

.hero {
  --floor: 4.4rem;
  position: relative;
  padding-top: clamp(2rem, 4.5vw, 4rem);
  color: var(--chalk);
  background:
    repeating-linear-gradient(90deg, var(--marigold) 0 2.25rem, transparent 2.25rem 3.5rem) 0 calc(100% - .7rem) / 100% 5px no-repeat,
    linear-gradient(to top, var(--ink) var(--floor), transparent var(--floor)),
    repeating-linear-gradient(90deg, rgba(27, 26, 34, .1) 0 4px, transparent 4px 56px),
    var(--cobalt);
}

.hero__top {
  display: grid;
  gap: 2rem 4rem;
  align-items: start;
}

/* The headline sits on a painted sign board, so it never fights the ribbed wall */
.hero__copy {
  --rivet: #5A5468;
  padding: clamp(1.25rem, 3.2vw, 2.5rem) clamp(1.25rem, 3.4vw, 2.75rem) clamp(1.4rem, 3.4vw, 2.6rem);
  border: var(--line) solid var(--ink);
  background-color: rgba(20, 19, 27, .8);
  -webkit-backdrop-filter: blur(10px) saturate(.8);
  backdrop-filter: blur(10px) saturate(.8);
}

.hero h1 {
  margin: 0;
  font: 900 clamp(2.7rem, 5.4vw, 5.9rem)/.9 var(--f-display);
  letter-spacing: -.005em;
}
.js [data-stamp] .w {
  display: inline-block;
  animation: stamp .6s var(--spring) backwards;
  animation-delay: calc(var(--w) * 45ms + 120ms);
}
@keyframes stamp {
  from { transform: translateY(-.4em) scale(1.3) rotate(-5deg); }
}

.hero__lede {
  max-width: 46ch;
  margin: 1.25rem 0 0;
  color: #E9E5DC;
  font-size: clamp(1.2rem, 1.6vw, 1.45rem);
  line-height: 1.45;
}

.notice {
  justify-self: start;
  width: min(100%, 20rem);
  padding: 1.1rem 1.2rem .6rem;
  border: var(--line) solid var(--ink);
  background-color: var(--concrete);
  color: var(--ink);
}
.notice__head {
  margin: 0;
  padding-bottom: .6rem;
  border-bottom: var(--line) solid var(--ink);
  font: 900 1.3rem/1 var(--f-display);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.notice__list { margin: 0; }
.notice__list a { overflow-wrap: anywhere; }
.notice__list div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 0;
}
.notice__list div + div { border-top: 2px solid rgba(27, 26, 34, .25); }
.notice__list dt { font: 800 1.2rem/1.2 var(--f-display); }
.notice__list dd { margin: 0; font-weight: 700; text-align: right; }

@media (min-width: 64em) {
  .hero__top { grid-template-columns: minmax(0, 1fr) auto; }
  .notice { justify-self: end; margin-top: .6rem; }
}

/* The doors */

.bays { margin-top: clamp(2rem, 4.5vw, 3.75rem); }

.bays__row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(.45rem, 2.4vw, 2.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bay-door {
  position: relative;
  display: flex;
  flex-direction: column;
  color: var(--chalk);
  text-decoration: none;
}
.bay-door:focus-visible { outline-color: var(--marigold); outline-offset: 6px; }

.bay-door__no {
  margin-bottom: .3rem;
  font: 900 clamp(1.5rem, 3.4vw, 2.9rem)/1 var(--f-stencil);
  text-align: center;
}

.bay-door__lamp {
  position: relative;
  z-index: 2;
  display: block;
  width: 36%;
  height: clamp(.35rem, .7vw, .6rem);
  margin: 0 auto clamp(.25rem, .6vw, .5rem);
  background: var(--ink);
}
.bay-door__lamp::before {
  content: "";
  position: absolute;
  left: 30%; right: 30%;
  top: 100%;
  height: 60%;
  background: var(--marigold);
}
.bay-door__lamp::after {
  content: "";
  position: absolute;
  top: 160%;
  left: 50%;
  width: 290%;
  height: clamp(3rem, 9vw, 8rem);
  translate: -50% 0;
  background: rgba(255, 214, 102, .26);
  clip-path: polygon(41% 0, 59% 0, 100% 100%, 0 100%);
  opacity: 0;
  transition: opacity .2s;
}
.bay-door:hover .bay-door__lamp::after,
.bay-door:focus-visible .bay-door__lamp::after { opacity: 1; }
.bays__row li:nth-child(3) .bay-door__lamp::before { animation: flicker 7s steps(1) infinite; }
@keyframes flicker {
  0%, 61%, 64%, 66%, 100% { background: var(--marigold); }
  62%, 65% { background: #4A4658; }
}

.bay-door__art { width: 100%; height: auto; aspect-ratio: 1; }
.bay-door__art .hole { fill: var(--ink); }

.bay-door .panel {
  fill: var(--door);
  transform: translateY(calc(var(--lift) * 1px));
  transition: transform .6s var(--spring);
  animation: door-rise 1.1s var(--spring) backwards;
  animation-delay: calc(.55s + var(--i, 0) * .11s);
}
.bay-door:hover .panel,
.bay-door:focus-visible .panel { transform: translateY(calc(var(--lift-hover) * 1px)); }

.bay-door .envelope { transition: transform .4s var(--spring); }
.bay-door:hover .envelope,
.bay-door:focus-visible .envelope { transform: translateY(-5px); }

@keyframes door-rise { from { transform: translateY(0); } }

.bay-door__label {
  display: flex;
  justify-content: center;
  height: var(--floor);
  padding-top: .75rem;
  font: 800 clamp(.85rem, 1.7vw, 1.45rem)/1 var(--f-display);
  text-align: center;
  transition: color .15s;
}
.bay-door:hover .bay-door__label,
.bay-door:focus-visible .bay-door__label { color: var(--door); }

/* ---------- Bays (sections) ---------- */

.bay { padding-block: clamp(4.5rem, 9vw, 8rem); }

.bay--1 { background: var(--chalk); --tag-bg: var(--tomato); --tag-fg: var(--ink); }
.bay--3 { background: var(--ink); color: var(--chalk); --tag-bg: var(--marigold); --tag-fg: var(--ink); }
.bay--5 { background: var(--marigold); --tag-bg: var(--ink); --tag-fg: var(--marigold); }
.bay--7 { background: var(--lilac); --tag-bg: var(--cobalt); --tag-fg: var(--chalk); }
.bay--9 { background: var(--tomato); --tag-bg: var(--ink); --tag-fg: var(--tomato); }
.bay--11 { --tag-bg: var(--pink); --tag-fg: var(--ink); }

.bay-head {
  display: flex;
  align-items: flex-end;
  gap: clamp(1rem, 3vw, 2.25rem);
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
}

.bay-tag {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: clamp(4.75rem, 10vw, 8.5rem);
  aspect-ratio: 1;
  margin: 0;
  padding: .5rem .55rem .4rem;
  background: var(--tag-bg);
  color: var(--tag-fg);
  transform-origin: 50% 0;
}
.bay-tag span { font: 800 clamp(.9rem, 1.4vw, 1.2rem)/1 var(--f-display); }
.bay-tag b {
  align-self: flex-end;
  font: 900 clamp(3.3rem, 8vw, 6.6rem)/.75 var(--f-stencil);
}
.bay.is-arriving .bay-tag { animation: swing 1.4s var(--spring) both; }
@keyframes swing {
  0% { rotate: -22deg; }
  35% { rotate: 9deg; }
  60% { rotate: -4deg; }
  80% { rotate: 1.5deg; }
  100% { rotate: 0deg; }
}

.bay h2 {
  margin: 0;
  font: 900 clamp(2.5rem, 6.2vw, 5.6rem)/.9 var(--f-display);
  letter-spacing: -.005em;
}

.bay-intro {
  max-width: 48ch;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
  line-height: 1.45;
}

.big {
  font-size: clamp(1.35rem, 2.3vw, 1.8rem);
  line-height: 1.35;
}

/* Roller doors that open as you reach each bay (added by JS) */

.js .bay[data-roll] { position: relative; overflow: clip; }

.rolldoor {
  --c: var(--roll, var(--tomato));
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 6;
  height: max(100%, 100vh);
  max-height: 100vh;
  pointer-events: none;
  transform: translateY(calc(var(--open, 0) * -101%));
  will-change: transform;
  background:
    linear-gradient(var(--ink), var(--ink)) 0 100% / 100% 14px no-repeat,
    repeating-linear-gradient(to bottom,
      color-mix(in srgb, var(--c) 62%, white) 0 4px,
      var(--c) 4px 50px,
      color-mix(in srgb, var(--c) 80%, black) 50px 55px,
      var(--ink) 55px 59px);
}
.rolldoor::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 30px;
  width: 7rem;
  height: 1rem;
  translate: -50% 0;
  background: var(--ink);
}
.rolldoor__label {
  position: absolute;
  left: 50%;
  bottom: 4.5rem;
  translate: -50% 0;
  padding: .3rem 1.2rem .1rem;
  background: var(--ink);
  color: var(--c);
  font: 900 clamp(3rem, 9vw, 7.5rem)/1 var(--f-stencil);
  white-space: nowrap;
}
.rolldoor.is-open { visibility: hidden; }

/* ---------- Bay 1: about ---------- */

.about {
  display: grid;
  gap: 3rem 5rem;
  align-items: start;
}
.about__text p { max-width: 48ch; margin: 0 0 1.25rem; }
.about__text p.big { max-width: 30ch; margin-bottom: 1.5rem; }

@media (min-width: 58em) {
  .about { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

.rivets {
  background-image:
    linear-gradient(var(--rivet, var(--ink)), var(--rivet, var(--ink))),
    linear-gradient(var(--rivet, var(--ink)), var(--rivet, var(--ink))),
    linear-gradient(var(--rivet, var(--ink)), var(--rivet, var(--ink))),
    linear-gradient(var(--rivet, var(--ink)), var(--rivet, var(--ink)));
  background-size: 7px 7px;
  background-position: 9px 9px, calc(100% - 9px) 9px, 9px calc(100% - 9px), calc(100% - 9px) calc(100% - 9px);
  background-repeat: no-repeat;
}

.plate {
  padding: 1.5rem 1.6rem 1.1rem;
  border: var(--line) solid var(--ink);
  background-color: var(--concrete);
}
.plate__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding-bottom: .7rem;
  border-bottom: var(--line) solid var(--ink);
  font: 900 1.45rem/1 var(--f-display);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.plate__head span + span { font-family: var(--f-stencil); }
.plate__list { margin: 0; }
.plate__list div {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: .6rem 0;
}
.plate__list div + div { border-top: 2px solid rgba(27, 26, 34, .25); }
.plate__list dt { font: 800 1.15rem/1.35 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.plate__list dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }

/* The conveyor belt */

.line { margin-top: clamp(4rem, 8vw, 6.5rem); }
.line__title { margin: 0 0 1.75rem; font: 900 clamp(1.9rem, 3.2vw, 2.7rem)/1 var(--f-display); }
.line__scroller {
  overflow-x: auto;
  padding: 1.5rem 0 .75rem;
  scrollbar-width: thin;
}

.belt {
  display: grid;
  grid-template-columns: repeat(5, minmax(9.5rem, 1fr));
  gap: clamp(.75rem, 2vw, 1.75rem);
  min-width: 52rem;
  margin: 0;
  padding: 0 1rem;
  list-style: none;
}

.crate {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  gap: .9rem;
}
.crate__note {
  margin: 0;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
}
.crate__box {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: var(--line) solid var(--ink);
  background-color: var(--crate);
  background-image:
    linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, .3)),
    repeating-linear-gradient(to bottom, transparent 0 calc(25% - 3px), rgba(27, 26, 34, .2) calc(25% - 3px) 25%);
  background-size: 100% 5px, 100% 100%;
  background-repeat: no-repeat;
  animation: bob 1.6s ease-in-out infinite;
  animation-delay: calc(var(--d) * -.32s);
  transition: translate .3s var(--spring);
}
.crate__icon {
  width: 46%;
  height: 46%;
  margin-bottom: 1.5rem;
  color: var(--ink);
  transition: rotate .4s var(--spring), scale .4s var(--spring);
}
.crate:hover .crate__icon { rotate: -8deg; scale: 1.12; }
.crate__label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: .45rem .3rem .4rem;
  background: var(--ink);
  color: var(--crate);
  font: 900 clamp(1.1rem, 1.6vw, 1.4rem)/1 var(--f-display);
  text-align: center;
}
.crate--bin .crate__label { color: var(--chalk); }

@keyframes bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}

.rollers {
  position: relative;
  display: flex;
  justify-content: space-around;
  min-width: 52rem;
  height: 2rem;
  margin-top: 6px;
  padding-top: 14px;
}
.rollers::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 12px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 20px, #4A4658 20px 26px);
  background-size: 26px 12px;
  animation: belt 0.9s linear infinite;
}
.rollers i {
  width: 1.15rem;
  height: 1.15rem;
  border: var(--line) solid var(--ink);
  background: var(--marigold);
  animation: spin 1.8s linear infinite;
}
.rollers i:nth-child(even) { background: var(--concrete); }
@keyframes belt { to { background-position: 26px 0; } }
@keyframes spin { to { rotate: 360deg; } }

/* ---------- Bay 3: genres / paint shop ---------- */

.paintshop {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.paintshop .chips { order: 1; }
.paintshop .tint { order: 2; }

@media (min-width: 64em) {
  .paintshop {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 21rem;
    gap: 2.5rem;
    align-items: start;
  }
  .paintshop .chips { grid-column: 1; grid-row: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .paintshop .tint { grid-column: 2; grid-row: 1; position: sticky; top: 1.5rem; }
}

.chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(10.5rem, 40vw), 1fr));
  gap: .8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--chalk);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  outline: 4px solid transparent;
  outline-offset: 3px;
  transition: rotate .25s var(--spring), outline-color .15s, translate .25s var(--spring);
}
.chip:hover { rotate: -1.6deg; }
.chips li:nth-child(odd) .chip:hover { rotate: 1.4deg; }
.chip:active { translate: 0 3px; }
.chip:focus-visible { outline-color: var(--chalk); }
.chip[aria-pressed="true"] { outline-color: var(--marigold); }
.js .chips li .chip { animation: deal .6s var(--spring) backwards; animation-play-state: paused; }
.js .bay--3.is-arriving .chips li .chip { animation-play-state: running; }
.chips li:nth-child(4n+1) .chip { animation-delay: .05s; }
.chips li:nth-child(4n+2) .chip { animation-delay: .12s; }
.chips li:nth-child(4n+3) .chip { animation-delay: .19s; }
.chips li:nth-child(4n+4) .chip { animation-delay: .26s; }
@keyframes deal {
  from { translate: 0 30px; rotate: -7deg; }
}

.chip__swatch {
  display: flex;
  align-items: flex-end;
  aspect-ratio: 5 / 4;
  padding: .55rem;
  background: var(--c);
}
.chip--pending .chip__swatch {
  background: repeating-linear-gradient(-45deg, var(--marigold) 0 12px, var(--ink) 12px 24px);
}

.chip__note {
  padding: .3rem .45rem;
  background: var(--chalk);
  color: var(--ink);
  font-size: .9rem;
  line-height: 1.25;
  font-weight: 700;
  opacity: 0;
  translate: 0 6px;
  transition: opacity .15s, translate .25s var(--spring);
}
.chip:hover .chip__note,
.chip:focus-visible .chip__note,
.chip[aria-pressed="true"] .chip__note { opacity: 1; translate: 0 0; }

.chip__text {
  display: grid;
  gap: .15rem;
  padding: .65rem .75rem .8rem;
}
.chip__name { font: 900 1.65rem/.95 var(--f-display); }
.chip__paint { font-size: .9rem; font-weight: 700; line-height: 1.25; }
.chip__code { color: var(--muted); font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.chip[data-slot]::after {
  content: attr(data-slot);
  position: absolute;
  top: 0; right: 0;
  display: grid;
  place-items: center;
  width: 2.1rem; height: 2.1rem;
  background: var(--marigold);
  color: var(--ink);
  font: 900 1.35rem/1 var(--f-display);
}

/* The tint machine */

.tint {
  padding: 1.4rem;
  background: var(--marigold);
  color: var(--ink);
}
.tint__title { margin: 0; font: 900 2.1rem/1 var(--f-display); }
.tint__help { margin: .35rem 0 1.1rem; font-size: 1rem; }

.tint__slots {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.tint__slot {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 0;
  font: 800 1.15rem/1.05 var(--f-display);
}
.tint__slot::before {
  content: "";
  aspect-ratio: 2 / 1;
  border: var(--line) solid var(--ink);
  background: var(--c);
}
.tint__slot[data-empty]::before {
  background: repeating-linear-gradient(-45deg, transparent 0 8px, rgba(27, 26, 34, .3) 8px 10px);
}
.tint__op { padding-bottom: 1.4rem; font: 900 2rem/1 var(--f-display); }

.tint__result {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 9.5rem;
  margin-top: 1rem;
  padding: 1rem;
  border: var(--line) solid var(--ink);
  background: var(--c);
  color: var(--on, var(--ink));
  transition: background-color .5s .35s, color .3s .45s;
}
.tint__result > * { position: relative; z-index: 1; }
.tint__result::before,
.tint__result::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  transform: translateY(-102%);
}
.tint__result::before { left: 0; background: var(--ca, transparent); }
.tint__result::after { right: 0; background: var(--cb, transparent); }
.tint__result.is-pouring::before { animation: pour 1s var(--snap) both; }
.tint__result.is-pouring::after { animation: pour 1s var(--snap) .08s both; }
@keyframes pour {
  0% { transform: translateY(-102%); opacity: 1; }
  40% { transform: translateY(0); opacity: 1; }
  65% { transform: translateY(0) scaleX(1.02); opacity: 1; }
  100% { transform: translateY(0); opacity: 0; }
}

.tint__name { margin: 0; font: 900 clamp(1.8rem, 3vw, 2.35rem)/.95 var(--f-display); }
.tint__paint {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: .5rem 0 0;
  font-size: 1rem;
  font-weight: 700;
}
.tint__hex { font-variant-numeric: tabular-nums; }
.tint__verdict { min-height: 1.6em; margin: 1rem 0; font-weight: 800; font-size: 1.05rem; line-height: 1.35; }
.tint__actions { display: flex; flex-wrap: wrap; gap: .5rem; }

@keyframes wobble {
  0%, 100% { rotate: 0deg; }
  25% { rotate: -2.2deg; }
  55% { rotate: 1.6deg; }
  80% { rotate: -.6deg; }
}

/* Small screens: the tint machine rides along at the bottom while you browse chips */
@media (max-width: 63.99em) {
  .js .paintshop .tint {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .5rem .75rem;
    padding: .7rem;
    border-top: var(--line) solid var(--ink);
  }
  .js .tint__title,
  .js .tint__help,
  .js .tint__slots,
  .js .tint__hex { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .js .tint__result { grid-column: 1 / -1; min-height: 0; margin: 0; padding: .6rem .7rem; }
  .js .tint__name { font-size: 1.45rem; }
  .js .tint__paint { margin-top: .2rem; font-size: .9rem; }
  .js .tint__verdict { margin: 0; align-self: center; font-size: .95rem; line-height: 1.25; }
  .js .tint__actions { flex-wrap: nowrap; }
  .js .tint .btn { padding: .5rem .6rem .45rem; font-size: 1.05rem; }
  .js .tint .btn--ghost { display: none; }
}

/* ---------- Bay 5: house rules ---------- */

.signs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(18.5rem, 100%), 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 64em) {
  .signs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.sign {
  --band: var(--cobalt);
  display: flex;
  flex-direction: column;
  border: var(--line) solid var(--ink);
  background: var(--chalk);
  transition: rotate .4s var(--spring);
}
.sign:nth-child(5) { rotate: 1.3deg; }
.sign:hover { rotate: -1deg; }
.js .sign { animation: hang .8s var(--spring) backwards; animation-play-state: paused; transform-origin: 50% 0; }
.js .bay--5.is-arriving .sign { animation-play-state: running; }
.sign:nth-child(2) { animation-delay: .08s; }
.sign:nth-child(3) { animation-delay: .16s; }
.sign:nth-child(4) { animation-delay: .24s; }
.sign:nth-child(5) { animation-delay: .32s; }
.sign:nth-child(6) { animation-delay: .4s; }
@keyframes hang {
  from { transform: translateY(-40px) rotate(-6deg); }
}

.sign__band {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0;
  padding: .6rem .9rem .5rem;
  background: var(--band);
  font: 900 1.45rem/1 var(--f-display);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.sign__band b { font-family: var(--f-stencil); letter-spacing: 0; }
.sign--notice .sign__band { color: var(--chalk); }
.sign--caution { --band: var(--ink); }
.sign--caution .sign__band { color: var(--marigold); }
.sign--please { --band: var(--jade); }
.sign--please .sign__band { color: var(--ink); }

.sign__body {
  position: relative;
  flex: 1;
  padding: 1.4rem 1.4rem 1.7rem;
}
.sign__icon {
  width: 3.25rem;
  height: 3.25rem;
  margin: .2rem 0 1rem;
  color: var(--band);
  transition: rotate .4s var(--spring);
}
.sign:hover .sign__icon { rotate: 10deg; }
.sign h3 {
  margin: 0 0 .7rem;
  font: 900 clamp(1.8rem, 2.5vw, 2.25rem)/.95 var(--f-display);
}
.sign__body p { margin: 0; font-size: 1.1rem; line-height: 1.45; }


/* ---------- Bay 7: under the tarps ---------- */

.tarps-intro p { max-width: 50ch; margin: 0 0 1.1rem; }
.tarps-intro p.big { max-width: 34ch; margin-bottom: 1.25rem; }

.tarps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 2.5rem clamp(1rem, 3vw, 2.5rem);
  align-items: end;
  margin: clamp(3rem, 6vw, 5rem) 0 0;
  padding: 0;
  list-style: none;
}

.tarp-spot { display: flex; flex-direction: column; align-items: center; }

.tarp {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.tarp:focus-visible { outline-color: var(--ink); }
.tarp__art {
  width: 100%;
  height: auto;
  aspect-ratio: 240 / 200;
  border-bottom: 8px solid var(--ink);
  overflow: visible;
}
.tarp__under { fill: var(--ink); }
.tarp__peek { fill: var(--marigold); font: 800 15px var(--f-display); }
.tarp__cover {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform .55s var(--spring);
}
.tarp:hover .tarp__cover { transform: translateY(-10px); }
.tarp.is-lifted .tarp__cover { transform: translateY(-26px); animation: flutter .35s ease-in-out 3; }
.tarp--grow.is-lifted .tarp__cover { transform: translateY(-26px) scaleY(1.08); }
@keyframes flutter {
  0%, 100% { skew: 0deg; }
  30% { skew: -2.5deg; }
  70% { skew: 2.5deg; }
}

.tarp__say {
  position: absolute;
  left: 50%;
  top: -.5rem;
  translate: -50% -100%;
  padding: .45rem .75rem .4rem;
  background: var(--ink);
  color: var(--chalk);
  font: 800 1.3rem/1 var(--f-display);
  white-space: nowrap;
  opacity: 0;
  scale: .6;
  transition: opacity .15s, scale .35s var(--spring);
}
.tarp__say::after {
  content: "";
  position: absolute;
  left: 1rem;
  top: 100%;
  width: .8rem;
  height: .8rem;
  background: var(--ink);
}
.tarp.is-lifted .tarp__say { opacity: 1; scale: 1; }

.tag {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1rem .5rem;
  margin: 1.1rem 0 0;
  padding: .5rem .9rem .5rem 1.8rem;
  background: var(--chalk);
  font-size: 1.05rem;
  line-height: 1.3;
}
.tag::before {
  content: "";
  position: absolute;
  left: .6rem; top: 50%;
  width: .5rem; height: .5rem;
  margin-top: -.25rem;
  background: var(--lilac);
  outline: 2px solid var(--ink);
}
.tag b { font: 900 1.2rem/1 var(--f-display); }

/* ---------- Bay 11: wind tunnel teaser ---------- */

.tunnel-teaser {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(94vh, 54rem);
  overflow: hidden;
  background-color: var(--night);
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 2px, transparent 2px);
  background-size: 64px 64px;
  color: var(--chalk);
}
.tunnel-teaser__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
  cursor: crosshair;
}
.tunnel-teaser__inner { position: relative; z-index: 1; pointer-events: none; }
.tunnel-teaser__card {
  max-width: 30rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: var(--line) solid #3A3648;
  background: var(--ink);
  pointer-events: auto;
}
.tunnel-teaser__card .bay-head { margin-bottom: 1.5rem; }
.tunnel-teaser__card h2 { font-size: clamp(2.3rem, 4.6vw, 4rem); }
.tunnel-teaser__card p { margin: 0 0 1rem; }
.tunnel-teaser__card .big { font-size: clamp(1.3rem, 2vw, 1.6rem); }
.tunnel-teaser__cta { margin-top: 1.5rem !important; }

/* ---------- Bay 9: knock ---------- */

.knock {
  display: grid;
  gap: 3rem;
  align-items: end;
}
.knock .big { max-width: 34ch; margin: 0; }

.knock__mail { margin: clamp(1.5rem, 4vw, 2.5rem) 0 0; }
.knock__mail a {
  display: inline-block;
  padding: .05em .1em .1em;
  margin-left: -.1em;
  color: var(--ink);
  font: 900 clamp(2rem, 5.4vw, 5.25rem)/.95 var(--f-display);
  overflow-wrap: anywhere;
  text-decoration-thickness: .07em;
  text-underline-offset: .12em;
  transition: background-color .15s, color .15s;
}
.knock__mail a:hover { background: var(--ink); color: var(--tomato); text-decoration-color: var(--marigold); }

.knock__pick { margin: 2rem 0 .7rem; font: 800 1.4rem/1 var(--f-display); }
.knock__types {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.knock__types a {
  display: block;
  padding: .65rem 1rem .6rem;
  border: var(--line) solid var(--ink);
  font: 800 1.25rem/1 var(--f-display);
  text-decoration: none;
  transition: background-color .15s, color .15s;
}
.knock__types a:hover { background: var(--ink); color: var(--chalk); }
.knock__types li:nth-child(2) a:hover { color: var(--marigold); }
.knock__types li:nth-child(3) a:hover { color: var(--pink); }
.knock__types li:nth-child(4) a:hover { color: var(--lilac); }

.knock__small { max-width: 46ch; margin: 1.6rem 0 0; font-size: 1.05rem; }

.knock__door {
  width: min(100%, 14rem);
  height: auto;
  aspect-ratio: 200 / 260;
  justify-self: start;
  transform-origin: 50% 100%;
}
.knock:has(a:hover) .knock__door,
.knock__door.is-knocked { animation: rattle .5s var(--snap); }
@keyframes rattle {
  0%, 100% { translate: 0 0; }
  15% { translate: -5px 0; }
  30% { translate: 4px 0; }
  45% { translate: -3px 0; }
  60% { translate: 2px 0; }
}

@media (min-width: 58em) {
  .knock { grid-template-columns: minmax(0, 1fr) minmax(12rem, 20rem); }
  .knock__door { width: 100%; justify-self: end; }
}

/* ---------- Footer ---------- */

.site-footer {
  padding-block: clamp(3rem, 6vw, 4.5rem) 1.5rem;
  background: var(--ink);
  color: var(--chalk);
}

.site-footer__inner {
  display: grid;
  gap: 2.25rem 3rem;
}
@media (min-width: 52em) {
  .site-footer__inner { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; }
}

.site-footer__word { width: min(100%, 21rem); height: auto; aspect-ratio: 806 / 100; color: var(--chalk); }
.site-footer__brand p { max-width: 30ch; margin: 1.1rem 0 0; color: #D6D1C7; }

.site-footer__nav {
  display: grid;
  gap: .35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer__nav a {
  font: 800 1.35rem/1.1 var(--f-display);
  text-decoration: none;
}
.site-footer__nav a:hover { color: var(--marigold); text-decoration: underline; }

.site-footer__mail { margin: 0; }
.site-footer__mail a { color: var(--marigold); font: 900 1.6rem/1 var(--f-display); }

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: 1.25rem;
  border-top: 2px solid #3A3648;
  font-size: 1rem;
}
.site-footer__base p { margin: 0; }

.bay2 {
  appearance: none;
  margin: 0;
  padding: .4rem .7rem .35rem;
  border: 2px solid #6A6578;
  background: transparent;
  color: var(--chalk);
  font: 800 1.05rem/1 var(--f-display);
  cursor: pointer;
}
.bay2:hover { border-color: var(--chalk); }
.bay2.is-shut { animation: wobble .45s var(--spring); background: var(--tomato); border-color: var(--tomato); color: var(--ink); }

/* ---------- Eyes ---------- */

.eye { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .08s; }
.blink .eye { transform: scaleY(.1); }
.pupil { transition: transform .12s ease-out; }

/* ---------- Small screens ---------- */

@media (max-width: 899px) {
  .tunnel-teaser { align-items: flex-end; padding-top: 38vh; }
}

@media (max-width: 40em) {
  body { font-size: 1.125rem; }
  .site-header__inner { justify-content: space-between; row-gap: .5rem; }
  .site-header__right { display: contents; }
  .site-nav { order: 3; flex-basis: 100%; }
  .sound-toggle { order: 2; padding: .5rem; }
  .sound-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .site-nav ul { justify-content: center; }
  .notice { display: none; }
  .site-nav a { padding: .45rem .5rem; font-size: 1.1rem; }
  .hero { --floor: 3.6rem; }
  .bay-door__label { padding-top: .6rem; }
  .bay-head { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .rolldoor__label { bottom: 3.5rem; }
}

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .001ms !important;
  }
  .rolldoor { display: none; }
}

/* ==========================================================================
   Wind tunnel page
   ========================================================================== */

.tunnel-page {
  min-height: 100svh;
  overflow: hidden;
  background: var(--night);
  color: var(--chalk);
}
.tunnel-page__canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100svh;
  touch-action: none;
  cursor: crosshair;
}

.tunnel-page__top {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem var(--pad);
  pointer-events: none;
}
.tunnel-page__top > * { pointer-events: auto; }
.tunnel-page__home {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .35rem .8rem .35rem .35rem;
  background: var(--ink);
  border: 2px solid #3A3648;
  font: 800 1.15rem/1 var(--f-display);
  text-decoration: none;
}
.tunnel-page__home svg { width: 2.4rem; height: 2.4rem; }
.tunnel-page__home:hover { border-color: var(--marigold); }
.tunnel-page__top .sound-toggle { background: var(--ink); }

.tunnel-page__panel {
  position: fixed;
  left: var(--pad);
  bottom: var(--pad);
  z-index: 2;
  width: min(25rem, calc(100vw - 2 * var(--pad)));
  padding: 1.4rem;
  border: var(--line) solid #3A3648;
  background: var(--ink);
}
.tunnel-page__bay {
  display: inline-block;
  margin: 0 0 .6rem;
  padding: .25rem .5rem .2rem;
  background: var(--pink);
  color: var(--ink);
  font: 900 1.1rem/1 var(--f-stencil);
}
.tunnel-page__panel h1 { margin: 0; font: 900 clamp(2.4rem, 5vw, 3.6rem)/.9 var(--f-display); }
.tunnel-page__lede { margin: .75rem 0 1.1rem; font-size: 1.1rem; line-height: 1.45; }

.tunnel-page__shapes { display: flex; flex-wrap: wrap; gap: .4rem; }
.chiplet {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  padding: .45rem .65rem .4rem;
  border: 2px solid #4A4658;
  background: transparent;
  color: var(--chalk);
  font: 800 1.1rem/1 var(--f-display);
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.chiplet:hover { border-color: var(--chalk); }
.chiplet[aria-pressed="true"] { background: var(--marigold); border-color: var(--marigold); color: var(--ink); }

kbd {
  display: inline-block;
  min-width: 1.3em;
  padding: .1em .3em;
  border: 1.5px solid currentColor;
  font: 700 .8em/1 var(--f-body);
  text-align: center;
}

.tunnel-page__spell { margin-top: 1.2rem; }
.tunnel-page__spell label { display: block; margin-bottom: .4rem; font: 800 1.15rem/1 var(--f-display); }
.tunnel-page__spell-row { display: flex; gap: .4rem; }
.tunnel-page__spell input {
  flex: 1;
  min-width: 0;
  padding: .55rem .7rem;
  border: 2px solid #4A4658;
  background: var(--night);
  color: var(--chalk);
  font: 900 1.3rem/1 var(--f-display);
  text-transform: uppercase;
}
.tunnel-page__spell input:focus { outline: 3px solid var(--marigold); outline-offset: 0; border-color: var(--marigold); }
.tunnel-page__keys { margin: 1rem 0 0; color: #CFCAC0; font-size: .95rem; line-height: 1.5; }

.tunnel-page__nogl,
.tunnel-page__noscript {
  position: fixed;
  top: 50%; left: 50%;
  translate: -50% -50%;
  z-index: 3;
  max-width: 28rem;
  padding: 1.5rem;
  background: var(--tomato);
  color: var(--ink);
  font-weight: 700;
}

@media (max-width: 40em) {
  .tunnel-page__panel { padding: 1rem; }
  .tunnel-page__lede, .tunnel-page__keys { display: none; }
  .tunnel-page__home span { display: none; }
  .tunnel-page__home { padding: .35rem; }
}

.tunnel-teaser.no-webgl .tunnel-teaser__canvas { display: none; }

/* ==========================================================================
   Brand kit page
   ========================================================================== */

.btn--big { padding: 1rem 1.4rem .95rem; font-size: 1.5rem; background: var(--marigold); border-color: var(--marigold); color: var(--ink); }
.btn--big:hover { background: var(--chalk); border-color: var(--chalk); }

.kit-hero {
  padding-block: clamp(3.5rem, 8vw, 7rem);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 4px, transparent 4px 56px),
    var(--ink);
  color: var(--chalk);
}
.kit-hero__inner { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 58em) { .kit-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(12rem, 20rem); } }
.kit-hero h1 { margin: 0 0 1.25rem; font: 900 clamp(2.7rem, 6vw, 5.6rem)/.9 var(--f-display); }
.kit-hero .big { max-width: 36ch; margin: 0; }
.kit-hero__eyebrow { display: flex; align-items: center; gap: .75rem; margin: 0 0 1.25rem; font: 800 1.3rem/1 var(--f-display); }
.kit-hero__eyebrow span { padding: .3rem .55rem .2rem; background: var(--pink); color: var(--ink); font-family: var(--f-stencil); }
.kit-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 2.25rem 0 0; }
.kit-hero__size { color: #D6D1C7; font-weight: 700; }
.kit-hero__badge { width: 100%; max-width: 18rem; height: auto; justify-self: center; rotate: 2deg; }

.kit { padding-block: clamp(4rem, 8vw, 7rem); }
.kit h2 { margin: 0 0 1rem; font: 900 clamp(2.4rem, 5.5vw, 4.8rem)/.9 var(--f-display); }
.kit__intro { max-width: 52ch; margin: 0 0 clamp(2rem, 4vw, 3rem); font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.45; }
.kit__small { margin: 1.5rem 0 0; font-size: 1.05rem; }

.dl { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.dl a {
  display: inline-block;
  padding: .4rem .65rem .35rem;
  border: 2px solid currentColor;
  font: 800 1.05rem/1 var(--f-display);
  text-decoration: none;
}
.dl a:hover { background: var(--ink); color: var(--chalk); border-color: var(--ink); }

.kit--logos { background: var(--chalk); }
.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
  gap: 1.25rem;
  margin: 0; padding: 0; list-style: none;
}
.logo-card { display: flex; flex-direction: column; border: var(--line) solid var(--ink); background: #FFFFFF; }
.logo-card__stage { display: grid; place-items: center; min-height: 15rem; padding: 2.5rem; }
.logo-card__stage img { max-width: 100%; max-height: 9rem; width: auto; height: auto; }
.logo-card__meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; padding: .9rem 1rem; border-top: var(--line) solid var(--ink); background: var(--chalk); }
.logo-card__meta h3 { margin: 0; font: 900 1.5rem/1 var(--f-display); }
.logo-card--dark .logo-card__stage { background: var(--ink); }

.kit--marks { background: var(--ink); color: var(--chalk); }
.kit--marks .dl a:hover { background: var(--chalk); color: var(--ink); border-color: var(--chalk); }
.mark-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(10rem, 44vw), 1fr));
  gap: 1.5rem 1.25rem;
  margin: 0; padding: 0; list-style: none;
}
.mark-grid img { width: 100%; height: auto; transition: rotate .35s var(--spring); }
.mark-grid li:hover img { rotate: -3deg; }
.mark-grid p { margin: .7rem 0 0; font: 900 1.4rem/1 var(--f-display); }
.mark-grid p span { padding: .1rem .35rem; margin-left: .3rem; background: var(--tomato); color: var(--ink); font-size: .9rem; vertical-align: middle; }
.mark-grid .dl { margin-top: .6rem; }

.kit--palette { background: var(--chalk); }
.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(11rem, 44vw), 1fr));
  gap: .9rem;
  margin: 0; padding: 0; list-style: none;
}
.swatch {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  aspect-ratio: 1;
  margin: 0;
  padding: .85rem;
  border: 0;
  background: var(--c);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: rotate .3s var(--spring);
}
.swatch:hover { rotate: -2deg; }
.swatch--light-text { color: var(--chalk); }
.swatch--outlined { box-shadow: inset 0 0 0 var(--line) var(--ink); }
.swatch__name { font: 900 1.6rem/1 var(--f-display); }
.swatch__hex { margin-top: .3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.swatch__rgb { font-size: .9rem; font-weight: 700; }
.swatch.is-copied { animation: wobble .45s var(--spring); }

.kit--type { background: var(--marigold); }
.type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
  gap: 1.25rem;
  margin: 0; padding: 0; list-style: none;
}
.type-card { padding: 1.5rem; border: var(--line) solid var(--ink); background: var(--chalk); }
.type-card__sample { margin: 0 0 1rem; line-height: .95; }
.type-card__sample--display { font: 900 clamp(3rem, 5vw, 4.2rem)/.9 var(--f-display); }
.type-card__sample--stencil { font: 900 clamp(3rem, 5vw, 4.2rem)/.9 var(--f-stencil); }
.type-card__sample--body { font: 700 1.9rem/1.15 var(--f-body); }
.type-card__use { margin: 0 0 1rem; }

.kit--ident {
  background-color: var(--night);
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 2px, transparent 2px);
  background-size: 64px 64px;
  color: var(--chalk);
}
.kit--ident .dl a:hover,
.dl-list a:hover { background: var(--chalk); color: var(--ink); }
.ident-player {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: var(--line) solid #3A3648;
  background: var(--night);
}
.ident-player img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ident-player__play {
  position: absolute;
  left: 50%; bottom: 8%;
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.2rem .8rem;
  border: var(--line) solid var(--marigold);
  background: var(--marigold);
  color: var(--ink);
  font: 900 1.4rem/1 var(--f-display);
  cursor: pointer;
  transition: background-color .15s;
}
.ident-player__play svg { width: 1.4rem; height: 1.4rem; }
.ident-player__play:hover { background: var(--chalk); border-color: var(--chalk); }
.ident-player.is-playing .ident-player__play { visibility: hidden; }

.ident-downloads { display: grid; gap: 2.5rem 3rem; margin-top: 2.5rem; }
@media (min-width: 58em) { .ident-downloads { grid-template-columns: 1fr 1fr; } }
.ident-downloads h3 { margin: 0 0 1rem; font: 900 1.7rem/1 var(--f-display); }
.dl-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.dl-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.dl-list a {
  display: inline-flex;
  gap: .6rem;
  align-items: baseline;
  min-width: 15rem;
  padding: .55rem .8rem .5rem;
  border: 2px solid #4A4658;
  font-weight: 700;
  text-decoration: none;
}
.dl-list a b { color: var(--marigold); font: 900 1.25rem/1 var(--f-display); }
.dl-list a:hover b { color: var(--tomato); }
.dl-list span { color: #CFCAC0; font-size: 1rem; }
.code {
  margin: 1.25rem 0 0;
  padding: 1rem 1.2rem;
  overflow-x: auto;
  border-left: 6px solid var(--tomato);
  background: var(--ink);
  font: 400 .95rem/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.kit--rules { background: var(--lilac); }
.ground {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
  gap: 1rem;
  margin: 0; padding: 0; list-style: none;
}
.ground li { padding: 1.1rem 1.2rem; border: var(--line) solid var(--ink); background: var(--chalk); font-size: 1.1rem; line-height: 1.4; }
.ground b { display: inline-block; margin-right: .4rem; padding: .2rem .45rem .1rem; font: 900 1.15rem/1 var(--f-display); text-transform: uppercase; }
.ground__do b { background: var(--jade); color: var(--ink); }
.ground__dont b { background: var(--ink); color: var(--tomato); }

/* ==========================================================================
   404
   ========================================================================== */

.lost {
  min-height: 100svh;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(90deg, rgba(27, 26, 34, .1) 0 4px, transparent 4px 56px),
    var(--cobalt);
  color: var(--chalk);
}
.lost__main { width: min(100% - 2 * var(--pad), 38rem); padding-block: 3rem; text-align: center; }
.lost__door { width: min(60vw, 15rem); height: auto; margin: 0 auto 1.5rem; }
.lost__bay { display: inline-block; margin: 0 0 1rem; padding: .3rem .6rem .2rem; background: var(--ink); color: var(--lilac); font: 900 1.5rem/1 var(--f-stencil); }
.lost h1 { margin: 0 0 1rem; font: 900 clamp(3rem, 9vw, 5.5rem)/.9 var(--f-display); }
.lost .big { margin: 0 auto 2rem; max-width: 30ch; }