/* catchy.ad: a mint enamel fridge door covered in word magnets. Light by day; at night the kitchen
   goes dark and the door catches the warm light of the open fridge. */

@font-face {
  font-family: "Unbounded";
  src: url("fonts/unbounded-variable-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-soft-variable-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-variable-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --page: #cfe8dd;
  --ink: #18302a;
  --muted: #2b463e;
  --accent-text: #b02f1c;
  --rule: rgba(24, 48, 42, 0.14);
  --btn: #c63824;
  --btn-edge: #85210f;
  --btn-ink: #ffffff;
  --play-bg: #c3dfd2;
  --tile: rgba(255, 255, 255, 0.42);
  --tile-shade: rgba(24, 48, 42, 0.05);
  --door-1: #e9f6f0;
  --door-2: #c9e6da;
  --door-3: #b3d7c8;
  --door-sheen: rgba(255, 255, 255, 0.6);
  --door-top: rgba(255, 255, 255, 0.55);
  --door-edge: rgba(24, 48, 42, 0.12);
  --door-drop: rgba(14, 58, 44, 0.42);
  --glow: rgba(255, 206, 140, 0);
  --leak: 0;
  --guide: rgba(24, 48, 42, 0.2);
  --chrome: linear-gradient(90deg, #8a9d95 0%, #f8fbfa 28%, #c3d0ca 52%, #ffffff 68%, #95aaa1 100%);
  --chrome-across: linear-gradient(180deg, #ffffff 0%, #d6e0dc 45%, #a9b9b2 55%, #eef3f1 100%);
  --chrome-ink: #44564f;
  --mg-bg: #fffefb;
  --mg-bg-2: #f2eee5;
  --mg-ink: #141414;
  --mg-shadow: 0 1px 0 rgba(0, 0, 0, 0.14), 0 2px 3px rgba(10, 44, 32, 0.16), 0 8px 12px -8px rgba(10, 44, 32, 0.4);
  --mg-lift: 0 1px 0 rgba(0, 0, 0, 0.06), 0 16px 22px -10px rgba(10, 44, 32, 0.5), 0 4px 8px -4px rgba(10, 44, 32, 0.2);
  --mg-flat: 0 1px 0 rgba(0, 0, 0, 0.18), 0 1px 2px rgba(10, 44, 32, 0.22);
  --click: rgba(198, 56, 36, 0.55);
  --strip: rgba(24, 48, 42, 0.08);
  --strip-edge: rgba(255, 255, 255, 0.55);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0f1614;
  --ink: #e8f4ee;
  --muted: #b9cbc3;
  --accent-text: #ff7a5c;
  --rule: rgba(232, 244, 238, 0.1);
  --btn: #ff7a5c;
  --btn-edge: #b1442b;
  --btn-ink: #1c0c07;
  --play-bg: #0b1210;
  --tile: rgba(232, 244, 238, 0.045);
  --tile-shade: rgba(0, 0, 0, 0.25);
  --door-1: #3c544a;
  --door-2: #273a33;
  --door-3: #1b2a25;
  --door-sheen: rgba(255, 236, 200, 0.14);
  --door-top: rgba(255, 220, 160, 0.18);
  --door-edge: rgba(255, 222, 170, 0.12);
  --door-drop: rgba(0, 0, 0, 0.75);
  --glow: rgba(255, 196, 120, 0.3);
  --leak: 1;
  --guide: rgba(255, 230, 190, 0.22);
  --chrome: linear-gradient(90deg, #43514b 0%, #e9dcc0 28%, #7c8983 52%, #fff0d2 68%, #4f5d57 100%);
  --chrome-across: linear-gradient(180deg, #f6e8cb 0%, #b5ab95 45%, #6f7a74 55%, #d9cdb4 100%);
  --chrome-ink: #2a2a24;
  --mg-bg: #f4ecdd;
  --mg-bg-2: #e4d8c3;
  --mg-ink: #17110a;
  --mg-shadow: 0 1px 0 rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.45), 0 10px 14px -8px rgba(0, 0, 0, 0.7);
  --mg-lift: 0 1px 0 rgba(0, 0, 0, 0.2), 0 18px 24px -10px rgba(0, 0, 0, 0.8), 0 4px 8px -4px rgba(0, 0, 0, 0.5);
  --mg-flat: 0 1px 0 rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.5);
  --click: rgba(255, 122, 92, 0.6);
  --strip: rgba(232, 244, 238, 0.07);
  --strip-edge: rgba(255, 255, 255, 0.06);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0f1614;
    --ink: #e8f4ee;
    --muted: #b9cbc3;
    --accent-text: #ff7a5c;
    --rule: rgba(232, 244, 238, 0.1);
    --btn: #ff7a5c;
    --btn-edge: #b1442b;
    --btn-ink: #1c0c07;
    --play-bg: #0b1210;
    --tile: rgba(232, 244, 238, 0.045);
    --tile-shade: rgba(0, 0, 0, 0.25);
    --door-1: #3c544a;
    --door-2: #273a33;
    --door-3: #1b2a25;
    --door-sheen: rgba(255, 236, 200, 0.14);
    --door-top: rgba(255, 220, 160, 0.18);
    --door-edge: rgba(255, 222, 170, 0.12);
    --door-drop: rgba(0, 0, 0, 0.75);
    --glow: rgba(255, 196, 120, 0.3);
    --leak: 1;
    --guide: rgba(255, 230, 190, 0.22);
    --chrome: linear-gradient(90deg, #43514b 0%, #e9dcc0 28%, #7c8983 52%, #fff0d2 68%, #4f5d57 100%);
    --chrome-across: linear-gradient(180deg, #f6e8cb 0%, #b5ab95 45%, #6f7a74 55%, #d9cdb4 100%);
    --chrome-ink: #2a2a24;
    --mg-bg: #f4ecdd;
    --mg-bg-2: #e4d8c3;
    --mg-ink: #17110a;
    --mg-shadow: 0 1px 0 rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.45), 0 10px 14px -8px rgba(0, 0, 0, 0.7);
    --mg-lift: 0 1px 0 rgba(0, 0, 0, 0.2), 0 18px 24px -10px rgba(0, 0, 0, 0.8), 0 4px 8px -4px rgba(0, 0, 0, 0.5);
    --mg-flat: 0 1px 0 rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.5);
    --click: rgba(255, 122, 92, 0.6);
    --strip: rgba(232, 244, 238, 0.07);
    --strip-edge: rgba(255, 255, 255, 0.06);
  }
}

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

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

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 1rem/1.5 "Instrument Sans", system-ui, sans-serif;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  width: min(100% - 32px, 1160px);
  margin-inline: auto;
}

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

:focus-visible {
  outline: 3px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- top bar ---------- */

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 6px;
}

.wordmark {
  text-decoration: none;
  color: inherit;
  padding: 4px;
  margin-left: -4px;
}

.wordmark-face {
  display: inline-block;
  padding: 6px 9px 5px;
  font: 600 1.06rem/1 "Fraunces", Georgia, serif;
  letter-spacing: -0.01em;
  color: var(--mg-ink);
  background: linear-gradient(180deg, var(--mg-bg), var(--mg-bg-2));
  border-radius: 2px;
  box-shadow: var(--mg-shadow);
  rotate: -2.5deg;
  transition: rotate 0.25s cubic-bezier(0.3, 1.5, 0.5, 1);
}

.wordmark:hover .wordmark-face {
  rotate: 0deg;
}

/* The theme switch: three tiny round fridge magnets on a strip of the door. The chosen one is
   snapped flat with a little shadow; the others hover pale, a hair off the surface. */
.theme {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 28px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--strip);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.14), 0 1px 0 var(--strip-edge);
}

.theme-mg {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  scale: 0.9;
  translate: 0 -1px;
  transition: scale 0.2s, translate 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.theme-mg svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-mg:hover {
  background: var(--strip);
  scale: 1;
}

.theme-mg:focus-visible {
  outline-width: 2px;
  outline-offset: 2px;
  border-radius: 50%;
}

.theme-mg--light {
  --face: #f2b316;
  --face-edge: #9f7300;
  --face-ink: #2a1d00;
}
.theme-mg--system {
  --face: #2e9e6a;
  --face-edge: #18603e;
  --face-ink: #ffffff;
}
.theme-mg--dark {
  --face: #2f6fde;
  --face-edge: #1b4492;
  --face-ink: #ffffff;
}

:root:not([data-theme]) .theme-mg--system,
:root[data-theme="light"] .theme-mg--light,
:root[data-theme="dark"] .theme-mg--dark {
  color: var(--face-ink);
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 46%), var(--face);
  box-shadow: 0 1px 0 var(--face-edge), 0 2px 3px rgba(0, 0, 0, 0.3);
  scale: 1;
  translate: 0 0;
}

.motion .theme-mg.is-snapping {
  animation: theme-snap 0.36s cubic-bezier(0.3, 1.6, 0.5, 1);
}

@keyframes theme-snap {
  0% { scale: 1.3; translate: 0 -3px; }
  55% { scale: 0.9; translate: 0 0; }
  100% { scale: 1; }
}

/* ---------- hero ---------- */

.hero {
  display: grid;
  gap: 20px;
  padding: 14px 0 34px;
}

h1,
h2 {
  margin: 0;
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.035em;
}

h1 {
  font-size: clamp(2.3rem, 10.3vw, 5.4rem);
  line-height: 0.98;
}

h1 .accent {
  display: block;
  color: var(--accent-text);
}

.lede {
  margin: 12px 0 0;
  max-width: 33em;
  font-size: 1rem;
  line-height: 1.5;
}

/* ---------- the fridge door ---------- */

.door {
  --mg-size: 19px;
  --ltr-size: 30px;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 16px 14px 36px 50px;
  border-radius: 24px 24px 18px 18px;
  background:
    linear-gradient(97deg, transparent 0 9%, var(--door-sheen) 13%, transparent 24%),
    linear-gradient(97deg, transparent 0 74%, var(--door-sheen) 79%, transparent 80.5%),
    radial-gradient(120% 55% at 65% -5%, var(--door-top), transparent 62%),
    linear-gradient(174deg, var(--door-1), var(--door-2) 56%, var(--door-3));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, calc(0.85 - var(--leak) * 0.75)),
    inset 0 -4px 0 rgba(0, 0, 0, 0.08),
    inset -9px 0 14px -12px rgba(0, 0, 0, 0.35),
    inset 9px 0 14px -12px rgba(255, 255, 255, calc(0.9 - var(--leak) * 0.8)),
    0 0 0 1px var(--door-edge),
    0 0 70px -8px var(--glow),
    0 26px 36px -24px var(--door-drop),
    0 8px 12px -8px var(--door-drop);
}

/* At night: the warm light of the open fridge leaks round the door's edge and washes across it. */
.door::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 14px;
  bottom: 14px;
  right: -2px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #ffe9be, #ffd08a 60%, #ffe2ad);
  box-shadow: 0 0 14px 4px rgba(255, 200, 120, 0.55), 0 0 46px 14px rgba(255, 186, 104, 0.2);
  opacity: var(--leak);
}

.door::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(90% 75% at 104% 35%, rgba(255, 196, 120, 0.22), transparent 70%);
  opacity: var(--leak);
  pointer-events: none;
}

.handle {
  position: absolute;
  left: 13px;
  top: 20%;
  bottom: 20%;
  width: 18px;
}

.handle::before,
.handle::after {
  content: "";
  position: absolute;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--chrome);
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.25);
}

.handle::before {
  top: 0;
}
.handle::after {
  bottom: 0;
}

.handle-bar {
  position: absolute;
  left: 4px;
  top: 5px;
  bottom: 5px;
  width: 10px;
  border-radius: 6px;
  background: var(--chrome);
  box-shadow: 4px 5px 7px -1px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.badge {
  position: absolute;
  right: 16px;
  bottom: 11px;
  padding: 4px 6px 4px 8px;
  font: 700 8px/1 "Unbounded", system-ui, sans-serif;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--chrome-ink);
  background: var(--chrome-across);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  user-select: none;
}

.loose,
.line {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.loose {
  gap: 10px 15px;
}

.loose--top {
  justify-content: space-around;
}

.line {
  gap: 7px 7px;
  min-height: 48px;
  padding: 4px 0;
}

.door--hero .line .mg-face {
  font-size: calc(var(--mg-size) * 1.16);
}

/* ---------- magnets ---------- */

.mg {
  --dx: 0px;
  --dy: 0px;
  --r: 0deg;
  --lr: 0deg;
  --ux: 0px;
  --uy: 0px;
  --sx: 0px;
  --sy: 0px;
  --sr: 0deg;
  position: relative;
  display: inline-block;
  flex: none;
}

.mg-face {
  position: relative;
  display: block;
  padding: 0.34em 0.48em 0.3em;
  font: 600 var(--mg-size, 19px)/1 "Fraunces", Georgia, serif;
  letter-spacing: -0.005em;
  white-space: nowrap;
  color: var(--mg-ink);
  background: linear-gradient(180deg, var(--mg-bg), var(--mg-bg-2));
  border-radius: 2px;
  box-shadow: var(--mg-shadow);
  transform: translate(calc(var(--dx) + var(--sx) + var(--ux)), calc(var(--dy) + var(--sy) + var(--uy))) rotate(calc(var(--r) + var(--sr)));
  user-select: none;
  -webkit-user-select: none;
}

.line .mg {
  --dx: 0px;
  --dy: 0px;
  --r: var(--lr);
}

/* Scatter presets: a loose tilt and offset, and a smaller tilt once snapped into a line. */
.o1 { --r: -5deg; --lr: -1.4deg; --dx: -3px; --dy: 4px; --drift: 11s; --dd: -3s; }
.o2 { --r: 6deg; --lr: 1deg; --dx: 2px; --dy: -3px; --drift: 13s; --dd: -9s; }
.o3 { --r: -2.5deg; --lr: 0.8deg; --dx: 4px; --dy: 2px; --drift: 9s; --dd: -1s; }
.o4 { --r: 3.5deg; --lr: -1.6deg; --dx: -2px; --dy: -5px; --drift: 12s; --dd: -6s; }
.o5 { --r: -7deg; --lr: 1.5deg; --dx: 3px; --dy: 5px; --drift: 10s; --dd: -4s; }
.o6 { --r: 2deg; --lr: -0.6deg; --dx: -4px; --dy: -2px; --drift: 14s; --dd: -11s; }
.o7 { --r: -4deg; --lr: 1.2deg; --dx: 1px; --dy: 6px; --drift: 12.5s; --dd: -7s; }
.o8 { --r: 8deg; --lr: -1deg; --dx: -1px; --dy: -4px; --drift: 10.5s; --dd: -2s; }

/* Letter magnets: chunky plastic letters, the colour is the magnet. */
.mg--ltr .mg-face {
  padding: 0 0.04em 0.06em;
  font: 800 var(--ltr-size, 30px)/1 "Unbounded", system-ui, sans-serif;
  color: var(--c);
  background: none;
  box-shadow: none;
  text-shadow:
    0 1px 0 var(--c-edge),
    0 2px 0 var(--c-edge),
    0 3px 0 var(--c-edge),
    0 6px 7px rgba(0, 0, 0, 0.3);
}

.c-tomato { --c: #e8432e; --c-edge: #a3281a; }
.c-mustard { --c: #f2b316; --c-edge: #a77800; }
.c-blue { --c: #2f6fde; --c-edge: #1c4593; }
.c-green { --c: #2e9e6a; --c-edge: #1a6342; }

.js [data-drag] .mg {
  cursor: grab;
  touch-action: none;
}

.mg.is-lifted,
.mg.is-flying {
  z-index: 5;
}

.mg.is-lifted {
  cursor: grabbing;
}

.mg.is-lifted .mg-face,
.mg.is-flying .mg-face {
  box-shadow: var(--mg-lift);
  scale: 1.06;
}

.mg--ltr.is-lifted .mg-face,
.mg--ltr.is-flying .mg-face {
  box-shadow: none;
  text-shadow:
    0 1px 0 var(--c-edge),
    0 2px 0 var(--c-edge),
    0 3px 0 var(--c-edge),
    0 16px 14px rgba(0, 0, 0, 0.32);
}

.mg.is-flying .mg-face {
  transition: transform 0.62s cubic-bezier(0.3, 0.7, 0.3, 1), box-shadow 0.2s, scale 0.2s;
}

.mg.is-returning .mg-face {
  transition: transform 0.55s cubic-bezier(0.3, 1.4, 0.5, 1), box-shadow 0.2s, scale 0.2s;
}

.mg.is-lifted .mg-face {
  transition: box-shadow 0.15s, scale 0.15s !important;
}

.mg-face::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 2px solid var(--click);
  border-radius: 5px;
  opacity: 0;
  pointer-events: none;
}

.motion .mg.is-click .mg-face::after {
  animation: click 0.34s ease-out;
}

@keyframes click {
  from { opacity: 0.95; transform: scale(0.94); }
  to { opacity: 0; transform: scale(1.2); }
}

/* The loose words drift a millimetre now and then, as if the door was just closed. */
.motion .loose .mg-face {
  animation: drift var(--drift, 11s) ease-in-out var(--dd, 0s) infinite;
}

.motion .mg.is-lifted .mg-face,
.motion .mg.is-flying .mg-face {
  animation-play-state: paused;
}

@keyframes drift {
  0%, 82%, 100% { translate: 0 0; rotate: 0deg; }
  87% { translate: 1.4px -1.6px; rotate: 0.6deg; }
  93% { translate: 0.5px 0.6px; rotate: -0.2deg; }
}

/* On load the hero's three words slide in from the loose pile and snap into the line. */
.door--hero .line .mg:nth-child(1) { --i: 0; --fx: -26px; --fy: -58px; --fr: -10deg; }
.door--hero .line .mg:nth-child(2) { --i: 1; --fx: 64px; --fy: 70px; --fr: 8deg; }
.door--hero .line .mg:nth-child(3) { --i: 2; --fx: -46px; --fy: 82px; --fr: 13deg; }

.motion .door--hero .line .mg {
  animation: snap-in 1.15s calc(0.45s + var(--i) * 0.14s) backwards;
}

.motion .door--hero .line .mg-face {
  animation: snap-shadow 1.15s calc(0.45s + var(--i) * 0.14s) backwards;
}

.motion .door--hero .line .mg-face::after {
  animation: click 0.34s ease-out calc(0.45s + var(--i) * 0.14s + 0.83s);
}

@keyframes snap-in {
  0% {
    translate: var(--fx) var(--fy);
    rotate: var(--fr);
    animation-timing-function: cubic-bezier(0.25, 0.6, 0.35, 1);
  }
  60% {
    translate: calc(var(--fx) * 0.16) calc(var(--fy) * 0.16);
    rotate: calc(var(--fr) * 0.3);
    animation-timing-function: cubic-bezier(0.75, 0, 1, 0.6);
  }
  72% {
    translate: calc(var(--fx) * -0.035) calc(var(--fy) * -0.035);
    rotate: calc(var(--fr) * -0.1);
    animation-timing-function: ease-out;
  }
  86% {
    translate: calc(var(--fx) * 0.012) calc(var(--fy) * 0.012);
    rotate: 0deg;
  }
  100% {
    translate: 0 0;
    rotate: 0deg;
  }
}

@keyframes snap-shadow {
  0%, 66% { box-shadow: var(--mg-lift); scale: 1.06; }
  74% { box-shadow: var(--mg-flat); scale: 0.98; }
  100% { box-shadow: var(--mg-shadow); scale: 1; }
}

/* ---------- the play ---------- */

.play {
  padding: 46px 0 54px;
  background:
    linear-gradient(var(--tile) 1px, transparent 1px) 0 0 / 30px 30px,
    linear-gradient(90deg, var(--tile) 1px, transparent 1px) 0 0 / 30px 30px,
    linear-gradient(180deg, var(--tile-shade), transparent 24px),
    var(--play-bg);
  border-block: 1px solid var(--rule);
}

.play-grid {
  display: grid;
  gap: 24px;
}

h2 {
  font-size: clamp(1.9rem, 8.4vw, 3.4rem);
  line-height: 1;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 8px;
  min-inline-size: 0;
  margin: 20px 0 22px;
  padding: 0;
  border: 0;
}

.chip {
  display: inline-flex;
  cursor: pointer;
}

.chip span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 15px;
  font: 600 0.97rem/1 "Instrument Sans", system-ui, sans-serif;
  color: var(--mg-ink);
  background: linear-gradient(180deg, var(--mg-bg), var(--mg-bg-2));
  border-radius: 3px;
  box-shadow: var(--mg-shadow);
  rotate: -1.4deg;
  transition: rotate 0.25s cubic-bezier(0.3, 1.5, 0.5, 1), background-color 0.2s, box-shadow 0.2s, translate 0.2s;
}

.chip:nth-of-type(2) span {
  rotate: 1.2deg;
}
.chip:nth-of-type(3) span {
  rotate: -0.6deg;
}

.chip:hover span {
  translate: 0 -2px;
  box-shadow: var(--mg-lift);
}

.chip input:checked + span {
  color: var(--page);
  background: var(--ink);
  box-shadow: var(--mg-flat);
  rotate: 0deg;
  translate: 0 0;
}

.chip input:focus-visible + span {
  outline: 3px solid var(--accent-text);
  outline-offset: 3px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 22px 15px 17px;
  font: 700 1.06rem/1 "Instrument Sans", system-ui, sans-serif;
  color: var(--btn-ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 55%), var(--btn);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--btn-edge), 0 12px 18px -10px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  text-decoration: none;
  transition: translate 0.08s, box-shadow 0.08s;
}

.btn:hover {
  translate: 0 -1px;
  box-shadow: 0 5px 0 var(--btn-edge), 0 14px 20px -10px rgba(0, 0, 0, 0.5);
}

.btn:active {
  translate: 0 3px;
  box-shadow: 0 1px 0 var(--btn-edge), 0 4px 8px -6px rgba(0, 0, 0, 0.5);
}

.btn-icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke-width: 3.6;
  stroke-linecap: butt;
  rotate: 180deg;
}

.btn-icon .horse {
  stroke: currentColor;
}

.btn-icon .tip {
  stroke: color-mix(in srgb, var(--btn) 45%, #ffffff);
}

.motion .btn.is-pulling .btn-icon {
  animation: pull 0.5s cubic-bezier(0.3, 1.6, 0.5, 1);
}

@keyframes pull {
  0% { translate: 0 0; }
  35% { translate: 0 -3px; rotate: 172deg; }
  100% { translate: 0 0; rotate: 180deg; }
}

.door--play {
  gap: 14px;
  min-height: 360px;
  padding-top: 20px;
  padding-bottom: 40px;
}

.door--play .line {
  min-height: 98px;
  align-content: center;
}

.door--play .line:empty::before {
  content: "";
  position: absolute;
  inset: 10px 4%;
  border: 2px dashed var(--guide);
  border-radius: 10px;
}

.slot {
  position: relative;
  display: inline-grid;
  flex: none;
}

.play-note {
  margin: 16px 2px 0;
  max-width: 34em;
  font-size: 0.95rem;
  color: var(--muted);
}

.taglines[hidden] {
  display: none;
}

/* ---------- steps ---------- */

.steps {
  padding: 58px 0 44px;
}

.step-list {
  display: grid;
  gap: 38px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mini {
  --mg-size: 18px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 84px;
  margin-bottom: 18px;
  padding: 18px 16px;
  border-radius: 16px;
  background:
    linear-gradient(97deg, transparent 0 12%, var(--door-sheen) 17%, transparent 30%),
    radial-gradient(120% 70% at 60% -10%, var(--door-top), transparent 62%),
    linear-gradient(174deg, var(--door-1), var(--door-2) 60%, var(--door-3));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, calc(0.85 - var(--leak) * 0.75)),
    inset 0 -3px 0 rgba(0, 0, 0, 0.08),
    0 0 0 1px var(--door-edge),
    0 0 40px -12px var(--glow),
    0 16px 24px -18px var(--door-drop);
}

.mini .s1 { --r: -1.2deg; --sx: -24px; --sy: 7px; --sr: -8deg; }
.mini .s2 { --r: 0.8deg; --sx: 0px; --sy: -12px; --sr: 6deg; }
.mini .s3 { --r: -0.5deg; --sx: 26px; --sy: 5px; --sr: 10deg; }

.mini.is-snapped .mg {
  --sx: 0px;
  --sy: 0px;
  --sr: 0deg;
}

.motion .mini .mg-face {
  transition: transform 0.8s cubic-bezier(0.72, 0, 0.24, 1.45);
}
.motion .mini .s2 .mg-face {
  transition-delay: 0.08s;
}
.motion .mini .s3 .mg-face {
  transition-delay: 0.16s;
}

.step h3 {
  margin: 0 0 6px;
  font: 700 1.12rem/1.2 "Unbounded", system-ui, sans-serif;
  letter-spacing: -0.02em;
}

.step p {
  margin: 0;
  font-size: 1rem;
}

/* ---------- footer ---------- */

.foot {
  padding: 26px 0 40px;
  border-top: 1px solid var(--rule);
}

.foot-line {
  margin: 0;
  font-size: 0.95rem;
}

.foot-line a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.foot-line a:hover {
  color: var(--accent-text);
}

/* ---------- 404 ---------- */

.nf {
  display: grid;
  justify-items: center;
  gap: 30px;
  padding: 20px 0 64px;
}

.nf .door--nf {
  --mg-size: 21px;
  --ltr-size: 56px;
  width: min(100%, 540px);
  min-height: 380px;
  gap: 18px;
  padding: 30px 40px 130px 56px;
}

@media (min-width: 600px) {
  .nf .door--nf {
    --mg-size: 24px;
    --ltr-size: 72px;
    min-height: 460px;
    padding: 40px 64px 150px 76px;
  }
}

.nf-digits {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.nf-digits .mg:nth-child(1) { --r: -6deg; }
.nf-digits .mg:nth-child(2) { --r: 4deg; --dy: -4px; }
.nf-digits .mg:nth-child(3) { --r: -3deg; --dy: 3px; }

.nf h1 {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  font: inherit;
  letter-spacing: normal;
}

/* The words come loose one by one: the last ones slide down the door and off its bottom edge. */
.nf h1 .mg:nth-child(1) { --r: -1.4deg; }
.nf h1 .mg:nth-child(2) { --r: 1deg; }
.nf h1 .mg:nth-child(3) { --fall-x: 4px; --fall-y: 16px; --fall-r: 9deg; --i: 0; }
.nf h1 .mg:nth-child(4) { --fall-x: -10px; --fall-y: 52px; --fall-r: -17deg; --i: 1; }
.nf h1 .mg:nth-child(5) { --fall-x: 12px; --fall-y: 96px; --fall-r: 24deg; --i: 2; }
.nf h1 .mg:nth-child(6) { --fall-x: -64px; --fall-y: 150px; --fall-r: -7deg; --i: 3; }

.nf h1 .mg {
  translate: var(--fall-x, 0) var(--fall-y, 0);
  rotate: var(--fall-r, 0deg);
}

.motion .nf h1 .mg:nth-child(n + 3) {
  animation: fall 1.1s calc(0.6s + var(--i) * 0.22s) backwards;
}

@keyframes fall {
  0% { translate: 0 0; rotate: 0deg; animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.5); }
  70% { translate: var(--fall-x) var(--fall-y); rotate: var(--fall-r); animation-timing-function: ease-out; }
  82% { translate: var(--fall-x) calc(var(--fall-y) - 7px); rotate: calc(var(--fall-r) * 1.1); animation-timing-function: ease-in; }
  100% { translate: var(--fall-x) var(--fall-y); rotate: var(--fall-r); }
}

/* Calm mode: nothing glides, tilts or fades; every state change lands at once. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- wider screens ---------- */

@media (min-width: 600px) {
  .door {
    --mg-size: 22px;
    --ltr-size: 36px;
    padding: 26px 24px 42px 66px;
  }
  .handle {
    left: 20px;
  }
  .step-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
  }
  .mini {
    --mg-size: 17px;
  }
}

@media (min-width: 900px) {
  .bar {
    padding-top: 22px;
  }
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 64px;
    padding: 56px 0 84px;
  }
  .hero-copy {
    container-type: inline-size;
  }
  .hero h1 {
    font-size: min(6rem, 15.3cqi);
  }
  .hero h1 .accent {
    white-space: nowrap;
  }
  .lede {
    margin-top: 22px;
    font-size: 1.16rem;
  }
  .door--hero {
    --mg-size: 27px;
    --ltr-size: 46px;
    min-height: 430px;
    gap: 26px;
    padding: 40px 34px 52px 84px;
  }
  .door--hero .handle {
    left: 26px;
    width: 22px;
  }
  .door--hero .handle-bar {
    width: 12px;
  }
  .door--hero .loose {
    gap: 18px 34px;
  }
  .door--hero .line {
    gap: 10px;
  }
  .play {
    padding: 84px 0 92px;
  }
  .play-grid {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    align-items: center;
    gap: 64px;
  }
  .play-copy {
    align-self: center;
  }
  .door--play {
    --mg-size: 25px;
    --ltr-size: 42px;
    min-height: 470px;
    padding: 36px 32px 52px 84px;
  }
  .door--play .handle {
    left: 26px;
    width: 22px;
  }
  .door--play .handle-bar {
    width: 12px;
  }
  .door--play .line {
    min-height: 120px;
  }
  .door--play .loose {
    gap: 14px 22px;
  }
  .steps {
    padding: 88px 0 72px;
  }
  .step-list {
    gap: 40px;
  }
  .mini {
    --mg-size: 20px;
    min-height: 104px;
  }
  .badge {
    right: 22px;
    bottom: 16px;
    font-size: 9px;
  }
}