/* ==========================================================================
   נהורא · nehora.app — studio.v8.css
   A workshop, not an agency. The walls are warm charcoal; things on them are
   paper, kraft, steel and brass, attached at their edges with tape, clips and
   pins. One colour is reserved for light (נהורא is Aramaic for light): the
   work lamp over the pegboard, the flagship's showroom, the lit name in the
   footer, and focus.

   Desktop is walking into the workshop. The phone is holding something from
   it: its own compositions (the board stands tall, decks swipe, the torch sits
   under your thumb), not the desktop stacked up.

   Order: fonts, tokens, base, buttons, materials, masthead + menu, hero,
   films, cards, where to start, the reel, showroom, commission, follow, rooms
   (projects, work, about, ideas, 404), footer, phones, reduced motion.
   ========================================================================== */

/* ---------- Fonts (self-hosted — licences in fonts/LICENSE-*) ---------- */

@font-face {
  font-family: "Nehora Display";
  src: url(fonts/HadasimCLM-Bold.otf) format("opentype");
  font-weight: 600 900;
  font-display: swap;
}
@font-face {
  font-family: "Nehora Display";
  src: url(fonts/HadasimCLM-Regular.otf) format("opentype");
  font-weight: 300 599;
  font-display: swap;
}
@font-face {
  font-family: "Nehora Text";
  src: url(fonts/rubik-hebrew-wght-normal.woff2) format("woff2-variations");
  font-weight: 300 900;
  font-display: swap;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Nehora Text";
  src: url(fonts/rubik-latin-wght-normal.woff2) format("woff2-variations");
  font-weight: 300 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nehora Hand";
  src: url(fonts/gveret-levin-hebrew-400-normal.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Nehora Hand";
  src: url(fonts/gveret-levin-latin-400-normal.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */

:root {
  color-scheme: dark;

  --wall: #2a2825;
  --wall-2: #33302b;
  --wall-board: #37332e;
  --wall-deep: #161412;
  --glow: 255 204 128;
  --lamp: #ffd84a;
  --phosphor: #cfff9e;

  --chalk: #efe7d6;
  --chalk-2: rgb(239 231 214 / 0.78);
  --chalk-3: rgb(239 231 214 / 0.6);
  --line: rgb(239 231 214 / 0.13);

  --ink: #1d1b18;
  --graphite: #5d574f;
  --paper: #fffefa;
  --paper-warm: #f6f0e3;
  --kraft: #e8d7ab;
  --kraft-edge: #cdb57d;
  --tape: rgb(236 224 190 / 0.93);
  --ply: #e3cfa8;
  --brass-hi: #e6c878;
  --brass: #b88d3c;
  --brass-ink: #8a5a12;
  --pen: #1d4b9c;
  --cord: #efe8d8;

  --display: "Nehora Display", "Hadasim CLM", "Frank Ruhl Libre", "David", "Times New Roman", serif;
  --text: "Nehora Text", "Rubik", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --hand: "Nehora Hand", "Gveret Levin", var(--text);

  --wrap: 76rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --room: clamp(5rem, 10vw, 8.5rem);

  --hang: 0 1.8rem 2.4rem -1.5rem rgb(0 0 0 / 0.85), 0 0.2rem 0.35rem rgb(0 0 0 / 0.25);
  --spring: cubic-bezier(0.2, 1.4, 0.4, 1);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .94  0 0 0 0 .84  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 1.5rem;
}

html.menu-open {
  overflow: hidden;
}

body {
  margin: 0;
  overflow-x: hidden;
  background-color: var(--wall);
  background-image: var(--noise);
  color: var(--chalk);
  font: 400 1.0625rem/1.7 var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

main {
  display: block;
  overflow-x: clip;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
}

p {
  margin: 0;
  text-wrap: pretty;
}

h1,
h2,
h3 {
  margin: 0;
  text-wrap: balance;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

figure,
fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

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

[hidden] {
  display: none !important;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 200;
  padding: 0.6rem 1rem;
  background: var(--paper);
  color: var(--ink);
  border-radius: 0.5rem;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip:focus {
  transform: none;
}

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

/* ---------- Buttons & links ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0.85rem 1.6rem;
  border: 0;
  border-radius: 0.75rem;
  font: 600 1.0625rem/1.1 var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.btn--paper {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 0.25rem 0 var(--wall-deep);
}

.btn--ink {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 0.25rem 0 #000;
}

.btn--paper:hover {
  transform: translateY(-2px);
  box-shadow: 0 calc(0.25rem + 2px) 0 var(--wall-deep);
}

.btn--ink:hover {
  transform: translateY(-2px);
  box-shadow: 0 calc(0.25rem + 2px) 0 #000;
}

.btn--paper:active,
.btn--ink:active {
  transform: translateY(0.25rem);
  box-shadow: none;
}

.link-quiet {
  color: var(--chalk-2);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--chalk-3);
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}

.link-quiet:hover {
  color: var(--chalk);
  text-decoration-color: var(--lamp);
}

.link-quiet--ink {
  color: var(--graphite);
  text-decoration-color: rgb(29 27 24 / 0.35);
}

.link-quiet--ink:hover {
  color: var(--ink);
  text-decoration-color: var(--pen);
}

/* ---------- Materials ---------- */

/* A plate riveted to the wall. Brass is kept for the flagship. */
.plate {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  margin: 0;
  padding: 0.5rem 1.75rem 0.45rem;
  color: var(--ink);
  font: 700 clamp(1.05rem, 1.6vw, 1.25rem) / 1.15 var(--display);
  border-radius: 4px;
}

.plate--brass {
  background: linear-gradient(var(--brass-hi), var(--brass));
  color: #2a1d08;
  box-shadow:
    0 0 0 2px #7c5c22,
    0 0 0 3px #3f2e10,
    inset 0 1px 0 rgb(255 255 255 / 0.55),
    0 0.7rem 1.2rem -0.5rem rgb(0 0 0 / 0.7);
}

.plate::before,
.plate::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0.42rem;
  height: 0.42rem;
  margin-top: -0.21rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 15%, #b9b4aa 45%, #6f6b64 100%);
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.4);
}

.plate::before {
  right: 0.55rem;
}

.plate::after {
  left: 0.55rem;
}

.paperclip {
  position: absolute;
  z-index: 3;
  width: 1.1rem;
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.35));
  pointer-events: none;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

.section-title {
  font: 700 clamp(2rem, 4.2vw, 3.1rem) / 1.05 var(--display);
  color: var(--chalk);
}

/* ==========================================================================
   Masthead, and the phone's menu
   ========================================================================== */

.masthead {
  position: relative;
  z-index: 40;
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.4rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--chalk);
  text-decoration: none;
}

.brand__mark {
  width: 2.1rem;
  height: 2.1rem;
  flex: none;
}

.mark__plate {
  fill: var(--chalk);
}
.mark__holes {
  fill: var(--wall);
}
.mark__glow {
  fill: var(--lamp);
  opacity: 0.35;
}
.mark__light {
  fill: var(--lamp);
}

.brand__name {
  font: 900 1.7rem/1 var(--display);
  translate: 0 -0.06em;
}

.nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem clamp(1.25rem, 2.6vw, 2.25rem);
}

.nav__list a {
  display: block;
  padding-block: 0.45rem;
  color: var(--chalk-2);
  font-weight: 500;
  text-decoration: none;
  background: linear-gradient(var(--lamp), var(--lamp)) no-repeat right bottom / 0 2px;
  transition: background-size 0.25s ease, color 0.15s ease;
}

.nav__list a:hover,
.nav__list a[aria-current="page"] {
  color: var(--chalk);
  background-size: 100% 2px;
}

.menu-button {
  display: none;
}

.menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: #23211e;
  background-image: var(--noise);
}

.menu__panel {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 1.1rem var(--gutter) max(1.5rem, env(safe-area-inset-bottom));
}

.menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.25rem;
}

.menu__close {
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  background: rgb(239 231 214 / 0.08);
  border: 0;
  border-radius: 999px;
  color: var(--chalk);
  font-weight: 600;
  cursor: pointer;
}

.menu__list {
  display: grid;
  border-top: 1px solid var(--line);
}

.menu__link {
  position: relative;
  display: grid;
  gap: 0.15rem;
  padding: 1.05rem 1.6rem 1.05rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}

.menu__link b {
  font: 700 2rem/1.1 var(--display);
  color: var(--chalk);
}

.menu__link span {
  color: var(--chalk-3);
  font-size: 0.975rem;
  line-height: 1.45;
}

.menu__link[aria-current="page"]::before {
  content: "";
  position: absolute;
  right: 0.15rem;
  top: 1.65rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--lamp);
  box-shadow: 0 0 0.6rem rgb(255 216 74 / 0.7);
}

.menu__link:not([aria-current="page"]) {
  padding-right: 0;
}

.menu__foot {
  margin-top: auto;
  padding-top: 2rem;
}

.menu__follow {
  margin-bottom: 0.75rem;
  color: var(--chalk-2);
  font: 700 1.25rem/1.2 var(--display);
}

.menu__social {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.5rem;
}

.menu__social .social {
  flex-direction: column;
  gap: 0.35rem;
  min-height: 4.25rem;
  padding: 0.6rem 0.25rem;
  font-size: 0.875rem;
}

/* One account to follow is one wide button, its icon beside its name. */
.menu__social .social:only-child {
  flex-direction: row;
  gap: 0.55rem;
  min-height: 3.25rem;
  font-size: 1rem;
}

.menu__mail {
  display: inline-block;
  margin-top: 1rem;
  color: var(--chalk-2);
  font-size: 0.95rem;
}

/* A social link, as a small paper button. */
.social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0.7rem 1.15rem;
  background: var(--paper);
  color: var(--ink);
  border-radius: 0.7rem;
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none;
  box-shadow: 0 0.22rem 0 var(--wall-deep);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.social svg {
  width: 1.3rem;
  height: 1.3rem;
  flex: none;
}

.social:hover {
  transform: translateY(-2px);
  box-shadow: 0 calc(0.22rem + 2px) 0 var(--wall-deep);
}

.social:active {
  transform: translateY(0.22rem);
  box-shadow: none;
}

/* ==========================================================================
   The hero: the pegboard under a work lamp
   ========================================================================== */

.hero {
  --lx: 60%;
  --ly: 45%;
  position: relative;
  isolation: isolate;
  padding-block: clamp(0.5rem, 1.6vw, 1.25rem) clamp(2rem, 4vw, 3rem);
  transition: background-color 0.7s ease;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 36%;
  top: 56%;
  width: min(80rem, 150vw);
  aspect-ratio: 1.5;
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgb(var(--glow) / 0.13), rgb(var(--glow) / 0.035) 58%, transparent 76%);
  pointer-events: none;
}

/* The name and the studio's line stand over everything; under them the
   pegboard and the studio's film hang side by side; under those, what the
   workshop makes and the three ways in. */
.hero__grid {
  position: relative;
  z-index: 1;
}

.hero__head {
  display: grid;
  justify-items: center;
  text-align: center;
}

.hero__lead,
.hero__foot {
  transition: opacity 0.7s ease;
}

/* The row is as wide as the wall. The board hangs at its edge, as wide as it
   has ever been (--b), and nothing is taken from it for the film: the film
   stands at the other edge, exactly as tall as the board, and the wall between
   them is whatever is left. A board B wide is B × 17/24 tall; a film F wide is
   F × 16/9 + --chin tall (the housing's key strip, less its rim); so
   F = B × 0.3984 − --chin × 9/16. */
.hero__stage {
  --b: min(50rem, 66%);
  --chin: 1.85rem;
  display: grid;
  grid-template-columns: calc(var(--b) * 0.3984 - 0.5625 * var(--chin)) var(--b);
  justify-content: space-between;
  align-items: start;
}

.hero__stage > .board-frame {
  grid-area: 1 / 2;
  max-width: none;
}

.hero__stage > .film {
  grid-area: 1 / 1;
  margin-top: 5.25rem;
}

.hero__foot {
  display: grid;
  justify-items: center;
  margin-top: clamp(3.25rem, 5vw, 4rem);
  text-align: center;
}

/* The name is a built sign (assets/brand/nehora-wordmark.svg), inlined in
   the h1, which keeps the word as text for screen readers. The drawing's
   viewBox (812 × 290) leaves room around the letters (0..790 × 0..220) for
   the shadow, the bulb's light and the cable that hangs under ה and נ; the
   margins give that room back, so the נ stands on the column's edge and the
   letters' tops sit where the text's top would. */
.hero__title {
  --w: min(100%, 26rem);
  width: var(--w);
  margin: 0 0 1rem;
  line-height: 0;
}

.hero__mark {
  display: block;
  width: 100%;
  height: auto;
  margin-block: calc(var(--w) * -22 / 812) calc(var(--w) * -12 / 812);
  overflow: visible;
}

.hero__mark .wm-shade,
.hero__mark .wm-hardware {
  transition: opacity 0.7s ease;
}

.hero__lead {
  max-width: 34ch;
  font: 500 clamp(1.4rem, 2.1vw, 1.85rem) / 1.3 var(--display);
  text-wrap: balance;
}

.hero__sub {
  max-width: 62ch;
  color: var(--chalk-2);
  font-size: 1.0625rem;
  text-wrap: balance;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.9rem 1rem;
  margin-top: 1.75rem;
}

.hero__actions .btn {
  min-width: 10.5rem;
}

/* The lamp's light: a warm pool that follows the pointer. When the room is
   dark it is the only light, and it is blended so it brightens what it hits.
   The room clips it, so the light never spills past the hero. */
.hero__room {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__pool {
  position: absolute;
  left: var(--lx);
  top: var(--ly);
  z-index: 0;
  width: min(46rem, 130vw);
  aspect-ratio: 1.15;
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgb(var(--glow) / 0.18), rgb(var(--glow) / 0.05) 48%, transparent 72%);
  pointer-events: none;
  transition: left 0.12s linear, top 0.12s linear, opacity 0.7s ease, width 0.7s ease;
}

/* Lights off. Content is only dimmed, never removed, and the cord that turns
   the light back on stays lit. The masthead goes dark with the room, and the
   dark fades into the wall below instead of stopping at a hard edge. */
.hero.is-dark,
.lights-off .masthead {
  background-color: rgb(9 8 7 / 0.74);
}

.masthead {
  transition: background-color 0.7s ease;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 100% 0 auto;
  height: 7rem;
  background: linear-gradient(rgb(9 8 7 / 0.74), rgb(9 8 7 / 0));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease;
}

.hero.is-dark::after {
  opacity: 1;
}

/* The copy dims with the room, but the sign stays lit: its stone goes dark,
   the brass dulls, and the tubes and the bulb keep their light. */
.hero.is-dark .hero__lead,
.hero.is-dark .hero__foot {
  opacity: 0.3;
}

.hero.is-dark .hero__mark .wm-shade {
  opacity: 0.8;
}

.hero.is-dark .hero__mark .wm-hardware {
  opacity: 0.4;
}

.hero.is-dark .hero__pool {
  z-index: 6;
  width: min(32rem, 100vw);
  background: radial-gradient(closest-side, rgb(255 222 160 / 0.6), rgb(255 205 130 / 0.2) 42%, transparent 70%);
  mix-blend-mode: screen;
}

.hero.is-dark .board {
  background-color: #1a1815;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 0 0 1px rgb(0 0 0 / 0.5);
}

.hero.is-dark .paint {
  background: rgb(0 0 0 / 0.5);
}

.hero.is-dark .obj__tile,
.hero.is-dark .obj__wire {
  filter: brightness(0.26) saturate(0.7);
}

.hero.is-dark .obj__paper {
  background: var(--phosphor);
  color: #16240b;
  box-shadow: 0 0 0.7rem rgb(190 255 130 / 0.55), 0 0 2rem rgb(190 255 130 / 0.2);
}

.hero.is-dark .obj--next .obj__paper {
  background: var(--lamp);
  color: var(--ink);
  box-shadow: 0 0 0.9rem rgb(255 216 74 / 0.7), 0 0 2.4rem rgb(255 216 74 / 0.3);
}

.hero.is-dark .board-tape {
  opacity: 0.25;
}

.obj__tile,
.obj__wire,
.obj__paper,
.paint,
.board {
  transition: filter 0.7s ease, background-color 0.7s ease, box-shadow 0.7s ease, color 0.7s ease;
}

/* The lamp: clamped over the board, its head turns toward the pointer. */
.lamp {
  position: absolute;
  top: -6.4rem;
  left: calc(38.75% - 3.6rem);
  z-index: 5;
  width: 7.2rem;
  height: 8.4rem;
  transform-origin: 50% 0.55rem;
  rotate: var(--aim, 0deg);
  transition: rotate 0.35s cubic-bezier(0.3, 1.3, 0.5, 1);
  filter: drop-shadow(0 0.8rem 0.8rem rgb(0 0 0 / 0.5));
  pointer-events: none;
}

/* The cable it hangs from, out of sight above. */
.lamp::before {
  content: "";
  position: absolute;
  bottom: calc(100% - 0.2rem);
  left: 50%;
  width: 2px;
  height: var(--cable, 7rem);
  margin-left: -1px;
  background: linear-gradient(rgb(20 18 16 / 0), #141210 70%);
  /* The head turns on the clamp; the cable above it stays plumb. */
  transform-origin: 50% 100%;
  rotate: calc(var(--aim, 0deg) * -1);
  transition: rotate 0.35s cubic-bezier(0.3, 1.3, 0.5, 1);
}

.lamp__clamp {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1.5rem;
  height: 1.1rem;
  margin-left: -0.75rem;
  border-radius: 0.2rem;
  background: linear-gradient(90deg, #6c6861, #e2dfd8 45%, #8f8a81);
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.4);
}

.lamp__clamp::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5rem;
  height: 0.5rem;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 15%, #b9b4aa 45%, #6f6b64 100%);
}

.lamp__arm {
  position: absolute;
  top: 1rem;
  left: 50%;
  width: 0.42rem;
  height: 3.5rem;
  margin-left: -0.21rem;
  background: linear-gradient(90deg, #5a564f, #cfcbc3 45%, #7c7870);
}

.lamp__head {
  position: absolute;
  top: 4.2rem;
  left: 50%;
  width: 6.2rem;
  height: 3.7rem;
  translate: -50% 0;
  background: linear-gradient(90deg, #1f3b2c, #3d6b4f 40%, #2a4d39 70%, #17291f);
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
}

.lamp__head::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 0.5rem;
  background: linear-gradient(90deg, #8f8a81, #f1eee8 50%, #8f8a81);
}

.lamp__bulb {
  position: absolute;
  bottom: -0.45rem;
  left: 50%;
  width: 5.2rem;
  height: 1.1rem;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, #fff9e0, #ffe08a 55%, rgb(255 216 74 / 0));
  box-shadow: 0 0 1.2rem 0.4rem rgb(255 216 74 / 0.45), 0 1.5rem 3rem 0.6rem rgb(255 216 74 / 0.25);
  transition: box-shadow 0.7s ease;
}

.hero.is-dark .lamp__bulb {
  box-shadow: 0 0 1.6rem 0.6rem rgb(255 216 74 / 0.7), 0 2rem 4rem 1rem rgb(255 216 74 / 0.4);
}

/* The pull cord: drag it down and let go, or just press it. */
.cord {
  --pull: 0px;
  position: absolute;
  top: -2.2rem;
  left: max(-3rem, calc(var(--gutter) * -0.75));
  z-index: 7;
  width: 2.75rem;
  height: calc(10rem + var(--pull));
  padding: 0;
  background: none;
  border: 0;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.cord.is-held {
  cursor: grabbing;
}

.cord__line {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: calc(7.4rem + var(--pull));
  margin-left: -1px;
  background: linear-gradient(#efe8d8, #cdbf9d);
}

.cord__line::before {
  content: "";
  position: absolute;
  top: -0.35rem;
  left: 50%;
  width: 0.9rem;
  height: 0.9rem;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 14%, #d6d3cd 38%, #7f7b74 85%);
  box-shadow: 0 0.1rem 0.2rem rgb(0 0 0 / 0.55);
}

.cord__bead {
  position: absolute;
  top: calc(7.4rem + var(--pull));
  left: 50%;
  width: 1.2rem;
  height: 2.2rem;
  translate: -50% 0;
  border-radius: 45% 45% 50% 50% / 30% 30% 50% 50%;
  background: radial-gradient(ellipse at 35% 25%, #e8bd82, #a5702f 55%, #5e3c14);
  box-shadow: 0 0.35rem 0.5rem rgb(0 0 0 / 0.5), inset 0 -0.2rem 0.3rem rgb(0 0 0 / 0.25);
  transition: scale 0.15s ease;
}

.hero.is-dark .cord__bead {
  box-shadow: 0 0 0 2px rgb(255 216 74 / 0.5), 0 0 1rem rgb(255 216 74 / 0.45);
}

.cord.is-past .cord__bead {
  scale: 1.08;
}

.cord.is-snapped .cord__line,
.cord.is-snapped .cord__bead {
  animation: snap 0.5s var(--spring);
}

@keyframes snap {
  0% {
    translate: -50% 0.9rem;
  }
  45% {
    translate: -50% -0.35rem;
  }
  100% {
    translate: -50% 0;
  }
}

.cord.is-snapped .cord__line {
  animation-name: snap-line;
}

@keyframes snap-line {
  0% {
    height: calc(8.3rem + var(--pull));
  }
  45% {
    height: calc(7.1rem + var(--pull));
  }
  100% {
    height: calc(7.4rem + var(--pull));
  }
}

.cord:focus-visible {
  outline: none;
}

.cord:focus-visible .cord__bead {
  outline: 3px solid var(--lamp);
  outline-offset: 4px;
  border-radius: 1rem;
}

@media (hover: hover) {
  .cord:hover .cord__bead {
    scale: 1.06;
  }
}

/* ---- the pegboard ---- */

.board-frame {
  --cols: 24;
  --rows: 17;
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: 50rem;
  margin-top: 5.25rem;
  justify-self: end;
}

.board {
  --u: calc(100cqi / var(--cols));
  position: relative;
  width: 100%;
  aspect-ratio: var(--cols) / var(--rows);
  border-radius: calc(var(--u) * 0.45);
  background-color: var(--wall-board);
  background-image:
    radial-gradient(circle at 50% 50%, var(--wall-deep) 0 calc(var(--u) * 0.12), transparent calc(var(--u) * 0.12 + 0.5px)),
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0.11) 0 calc(var(--u) * 0.15), transparent calc(var(--u) * 0.15 + 0.5px));
  background-size: var(--u) var(--u);
  background-position: 0 0, 0 calc(var(--u) * 0.035);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.1),
    inset 0 -2px 0 rgb(0 0 0 / 0.1),
    0 calc(var(--u) * 1.2) calc(var(--u) * 2) calc(var(--u) * -0.8) rgb(0 0 0 / 0.7),
    0 0 0 1px rgb(0 0 0 / 0.3);
}

.spot {
  --sx: var(--x);
  --sy: var(--y);
  --ss: var(--s);
  position: absolute;
  left: calc((var(--sx) - var(--ss) / 2) * var(--u));
  top: calc((var(--sy) - 0.3) * var(--u));
  width: calc(var(--ss) * var(--u));
}

.spot::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  width: calc(var(--u) * 0.6);
  height: calc(var(--u) * 0.6);
  margin-left: calc(var(--u) * -0.3);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fff 0 14%, #d6d3cd 38%, #7f7b74 85%);
  box-shadow: 0 calc(var(--u) * 0.08) calc(var(--u) * 0.12) rgb(0 0 0 / 0.55);
  pointer-events: none;
}

.paint {
  position: absolute;
  top: calc(var(--u) * 1.4);
  left: 0;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 22%;
  background: rgb(0 0 0 / 0.3);
  scale: 1.07;
}

.obj {
  position: relative;
  display: block;
  color: var(--ink);
  text-decoration: none;
  transform-origin: 50% calc(var(--u) * 0.3);
  animation: hang 1.25s cubic-bezier(0.3, 0.7, 0.3, 1) var(--d, 0s) backwards;
  -webkit-tap-highlight-color: transparent;
}

.obj__body {
  position: relative;
  display: block;
  transform-origin: 50% calc(var(--u) * 0.3);
  transition: transform 0.8s cubic-bezier(0.2, 1.9, 0.4, 0.8);
}

.obj__wire {
  width: 100%;
  height: calc(var(--u) * 1.4);
  overflow: visible;
}

.obj__wire path {
  fill: none;
  stroke: var(--cord);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.obj__tile {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 22%;
  box-shadow:
    0 calc(var(--u) * 0.45) calc(var(--u) * 0.7) calc(var(--u) * -0.25) rgb(0 0 0 / 0.7),
    0 calc(var(--u) * 0.06) calc(var(--u) * 0.1) rgb(0 0 0 / 0.4);
}

.obj__tag {
  position: absolute;
  top: calc(100% + var(--u) * 0.3);
  right: 50%;
  z-index: 0;
  translate: 50% 0;
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.4));
  rotate: -3deg;
  transform-origin: 50% 0;
  transition: rotate 1s cubic-bezier(0.2, 1.8, 0.4, 0.8) 0.05s;
}

.obj__tag::before {
  content: "";
  position: absolute;
  bottom: calc(100% - var(--u) * 0.22);
  left: 50%;
  width: 1.5px;
  height: calc(var(--u) * 0.85);
  margin-left: -0.75px;
  background: var(--cord);
}

.obj__paper {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  padding: calc(var(--u) * 0.4) calc(var(--u) * 0.42) calc(var(--u) * 0.18);
  background: var(--paper);
  color: var(--ink);
  font-size: max(10.5px, calc(var(--u) * 0.43));
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  border-radius: 2px;
  clip-path: polygon(calc(var(--u) * 0.3) 0, calc(100% - var(--u) * 0.3) 0, 100% calc(var(--u) * 0.3), 100% 100%, 0 100%, 0 calc(var(--u) * 0.3));
}

.obj__paper b {
  font: 700 1.05em/1 var(--display);
  color: var(--brass-ink);
}

.obj__paper::after {
  content: "";
  position: absolute;
  top: calc(var(--u) * 0.12);
  left: 50%;
  width: calc(var(--u) * 0.16);
  height: calc(var(--u) * 0.16);
  margin-left: calc(var(--u) * -0.08);
  border-radius: 50%;
  background: var(--wall-board);
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.3);
}

@media (hover: hover) {
  .obj:hover .obj__body {
    transform: rotate(-6deg);
  }

  .obj:hover .obj__tag {
    rotate: 6deg;
  }
}

.obj:focus-visible .obj__body {
  transform: rotate(-6deg);
}

.obj:focus-visible {
  outline: none;
}

.obj:focus-visible .obj__tile,
.obj--next:focus-visible .obj__paper {
  outline: 3px solid var(--lamp);
  outline-offset: 4px;
}

.obj:active .obj__body {
  transform: rotate(-4deg) scale(0.97);
  transition-duration: 0.15s;
}

@keyframes hang {
  0% {
    opacity: 0;
    transform: translateY(calc(var(--u) * -2.5)) rotate(-12deg);
  }
  40% {
    opacity: 1;
  }
  58% {
    transform: translateY(0) rotate(6deg);
  }
  74% {
    transform: rotate(-3deg);
  }
  88% {
    transform: rotate(1.2deg);
  }
  100% {
    transform: none;
  }
}

/* The next number: an empty, lit peg. */
.spot--next::before {
  background: radial-gradient(circle at 40% 35%, #fff7cf 0 18%, var(--lamp) 55%, #e6b400 100%);
  box-shadow:
    0 0 calc(var(--u) * 0.6) calc(var(--u) * 0.15) rgb(255 216 74 / 0.55),
    0 0 calc(var(--u) * 2.2) calc(var(--u) * 0.4) rgb(255 216 74 / 0.18);
  animation: glow 3.2s ease-in-out 1.6s infinite alternate;
}

.paint--empty {
  background: transparent;
  border: 2px dashed rgb(255 255 255 / 0.26);
  scale: 1;
}

.obj--next .obj__body {
  height: calc(var(--u) * 0.6);
}

.obj--next .obj__tag {
  top: calc(var(--u) * 1.6);
}

.obj--next .obj__tag::before {
  height: calc(var(--u) * 1.45);
}

.obj--next .obj__paper {
  flex-direction: column;
  align-items: center;
  gap: 0.15em;
  background: var(--lamp);
}

.obj--next .obj__paper b {
  color: var(--ink);
  font-size: 1.15em;
}

@keyframes glow {
  to {
    box-shadow:
      0 0 calc(var(--u) * 0.8) calc(var(--u) * 0.22) rgb(255 216 74 / 0.7),
      0 0 calc(var(--u) * 3) calc(var(--u) * 0.6) rgb(255 216 74 / 0.24);
  }
}

/* A note taped under the board, where nothing hangs. */
.board-tape {
  position: absolute;
  bottom: -1.35rem;
  left: 1.25rem;
  z-index: 8;
  margin: 0;
  padding: 0.3rem 1rem 0.35rem;
  background: var(--tape);
  color: #2b2620;
  font: 400 1.35rem/1.1 var(--hand);
  rotate: -2.5deg;
  clip-path: polygon(0 10%, 3% 0, 50% 3%, 97% 0, 100% 12%, 98.5% 50%, 100% 90%, 96% 100%, 50% 96%, 3% 100%, 0 88%, 1.5% 50%);
  pointer-events: none;
  transition: opacity 0.7s ease;
}

/* ==========================================================================
   Films: a small screen in a housing, hung in the workshop
   ========================================================================== */

/* One colour is reserved for light, and a film is light: the button that
   starts one is the lit peg grown to a thumb's size, and the line under the
   screen fills with the same yellow while the film runs. The housing has two
   keys, play and sound, and nothing is ever drawn over the film itself. */
.film {
  --rim: 0.4rem;
  position: relative;
  margin: 0;
}

.film__box {
  position: relative;
  z-index: 1;
  padding: var(--rim) var(--rim) 0;
  background: linear-gradient(#1e1b17, #131110);
  border-radius: 0.85rem;
  box-shadow: var(--hang), inset 0 1px 0 rgb(255 255 255 / 0.09), 0 0 0 1px rgb(0 0 0 / 0.45);
  transition: box-shadow 0.7s ease, filter 0.5s ease;
}

.film__screen {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  aspect-ratio: 9 / 16;
  border-radius: 0.5rem;
  background: #0c0b0a;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.film__poster,
.film__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* With the script, the poster stands until the film is really running, and
   again when it is over. Without it, the browser's own player stands there. */
.js .film__video {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.js .film.is-started .film__video {
  opacity: 1;
}

/* Under the button the picture darkens a little, so the light reads on a
   paper-white poster as well as on a dark one. */
.js .film__screen::after {
  content: "";
  position: absolute;
  inset: 50% 0 0;
  background: linear-gradient(rgb(12 11 10 / 0), rgb(12 11 10 / 0.62));
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.js .film[data-state="playing"] .film__screen::after {
  opacity: 0;
}

/* The button: a lit bulb with its label taped beside it, low on the screen,
   under whatever the poster shows. */
.film__go {
  position: absolute;
  inset: auto 0 5.5%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.film__bulb {
  display: grid;
  place-items: center;
  flex: none;
  /* On a narrow film the bulb and its label come down together, so neither is cut at the screen's edge. */
  width: min(3.4rem, 26cqi - 6.5px);
  height: min(3.4rem, 26cqi - 6.5px);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 34%, #fff7cf 0 16%, var(--lamp) 56%, #e6b400 100%);
  color: var(--ink);
  box-shadow:
    0 0 0 0.3rem rgb(255 216 74 / 0.16),
    0 0 1.6rem 0.35rem rgb(255 216 74 / 0.5),
    0 0.5rem 0.9rem rgb(0 0 0 / 0.45);
  animation: film-glow 3.2s ease-in-out 0.6s infinite alternate;
  transition: scale 0.25s var(--spring);
}

.film__bulb svg {
  width: 1.45rem;
  height: 1.45rem;
  translate: 0.08rem 0;
}

@keyframes film-glow {
  to {
    box-shadow:
      0 0 0 0.45rem rgb(255 216 74 / 0.2),
      0 0 2.4rem 0.6rem rgb(255 216 74 / 0.62),
      0 0.5rem 0.9rem rgb(0 0 0 / 0.45);
  }
}

.film__go-label {
  padding: 0.25rem 0.9rem 0.3rem;
  background: var(--tape);
  color: #2b2620;
  font: 400 min(1.25rem, 9.57cqi - 2.4px) / 1.1 var(--hand);
  white-space: nowrap;
  rotate: -2deg;
  clip-path: polygon(0 10%, 3% 0, 50% 4%, 97% 0, 100% 12%, 98.5% 50%, 100% 90%, 96% 100%, 50% 96%, 3% 100%, 0 88%, 1.5% 50%);
}

@media (hover: hover) {
  .film__go:hover .film__bulb {
    scale: 1.07;
  }
}

.film__go:active .film__bulb {
  scale: 0.95;
}

.film__go:focus-visible {
  outline: none;
}

.film__go:focus-visible .film__bulb {
  outline: 3px solid var(--lamp);
  outline-offset: 4px;
}

.film__chin {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  height: 2.9rem;
  padding-inline: 0.1rem;
}

.film__key {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--chalk-2);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.film__key svg {
  width: 1.3rem;
  height: 1.3rem;
}

@media (hover: hover) {
  .film__key:hover {
    color: var(--lamp);
  }
}

.film__key:active {
  background: rgb(239 231 214 / 0.1);
}

.film__key:focus-visible {
  outline-offset: -3px;
  border-radius: 50%;
}

/* Each key holds two drawings and shows the one that is true now. */
.film__key--play svg:last-child,
.film__key--play.is-on svg:first-child,
.film__key--sound[aria-pressed="true"] svg:last-child,
.film__key--sound[aria-pressed="false"] svg:first-child {
  display: none;
}

.film__key--play.is-on svg:last-child {
  display: block;
}

.film__key--sound[aria-pressed="false"] {
  color: var(--chalk-3);
}

/* A film that starts silent says, in pencil beside the key, that it has a
   sound. The words are part of the key, and go when the sound is on. */
.film__key-note {
  display: none;
}

.js .film__key--sound[aria-pressed="false"]:has(.film__key-note) {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  width: auto;
  padding-inline: 0.72rem 0.6rem;
  border-radius: 999px;
}

.js .film__key--sound[aria-pressed="false"] .film__key-note {
  display: block;
  color: var(--chalk-2);
  font: 400 1.1rem/1 var(--hand);
  white-space: nowrap;
  translate: 0 -0.05em;
}

.film__bar {
  flex: 1;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: rgb(239 231 214 / 0.16);
}

.film__bar i {
  display: block;
  height: 100%;
  background: var(--lamp);
  scale: 0 1;
  transform-origin: 100% 50%;
  transition: scale 0.25s linear;
}

html:not(.js) .film__go,
html:not(.js) .film__chin {
  display: none;
}

/* The browser's player paints an empty film dark; its poster goes on the player itself. */
html:not(.js) .film__video {
  background: var(--poster) center / cover no-repeat;
}

html:not(.js) .film__box {
  padding-bottom: var(--rim);
}

/* Beside the pegboard the film hangs the way the tiles do: a pin, a wire,
   and a paper tag on a thread. */
.film--hero {
  --u: clamp(1.5rem, 2.1vw, 1.9rem);
}

.film__hang {
  position: absolute;
  bottom: calc(100% - 0.2rem);
  left: 0;
  width: 100%;
  height: 2.8rem;
  pointer-events: none;
  transition: opacity 0.7s ease;
}

.film__hang svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.film__hang path {
  fill: none;
  stroke: var(--cord);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.film__hang::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: 0.85rem;
  height: 0.85rem;
  margin-left: -0.425rem;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fff 0 14%, #d6d3cd 38%, #7f7b74 85%);
  box-shadow: 0 0.12rem 0.2rem rgb(0 0 0 / 0.55);
}

/* Lights off: a screen is a light of its own, so the film stays lit. */
.hero.is-dark .film__box {
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.6), 0 0 3.5rem rgb(var(--glow) / 0.2);
}

.hero.is-dark .film__hang {
  opacity: 0.3;
}

/* ==========================================================================
   Cards: a project on paper, in its own colours
   ========================================================================== */

.card {
  --rx: 0deg;
  --ry: 0deg;
  --p-accent-text: color-mix(in srgb, var(--p-accent) 78%, var(--p-ink));
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0.85rem 0.85rem 1.25rem;
  background: var(--p-paper);
  color: var(--p-ink);
  border-radius: 4px;
  text-decoration: none;
  box-shadow: var(--hang);
  transform: perspective(900px) rotate(var(--tilt, 0deg)) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.45s var(--spring), box-shadow 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.card__art {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 2px;
  background: rgb(0 0 0 / 0.06);
}

.card__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Not positioned: the "new" sticker inside it hangs off the card's corner. */
.card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 1rem 0.35rem 0;
}

.card__meta {
  color: color-mix(in srgb, var(--p-ink) 74%, transparent);
  font-size: 0.85rem;
  font-weight: 500;
}

.card__meta b {
  margin-left: 0.35rem;
  color: var(--p-accent-text);
  font: 700 0.95rem/1 var(--display);
}

.card__name {
  margin-top: 0.2rem;
  font: 700 1.65rem/1.1 var(--display);
  text-wrap: balance;
}

.card__tagline {
  margin-top: 0.35rem;
  color: color-mix(in srgb, var(--p-ink) 76%, transparent);
  font-size: 0.975rem;
  line-height: 1.5;
}

.card__cta {
  margin-top: auto;
  padding-top: 1rem;
  color: var(--p-accent-text);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

/* The newest thing gets a round sticker on the card's right corner: a little
   below the top edge, clear of the taped note's words, and stuck on top of
   everything else on the card. */
.card__new {
  position: absolute;
  top: 1.1rem;
  right: -0.85rem;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: var(--lamp);
  color: var(--ink);
  font: 700 1.05rem/1 var(--display);
  rotate: 12deg;
  box-shadow: 0 0.4rem 0.6rem -0.2rem rgb(0 0 0 / 0.45), inset 0 0 0 2px rgb(0 0 0 / 0.08);
}

@media (hover: hover) {
  .card:hover {
    --tilt: 0deg;
    transform: perspective(900px) translateY(-6px) rotateX(var(--rx)) rotateY(var(--ry));
    box-shadow: 0 2.6rem 3rem -1.6rem rgb(0 0 0 / 0.9), 0 0.2rem 0.35rem rgb(0 0 0 / 0.25);
  }

  .card:hover .card__cta {
    text-decoration-thickness: 3px;
  }
}

.card:active {
  transform: perspective(900px) rotate(var(--tilt, 0deg)) scale(0.985);
  transition-duration: 0.12s;
}

/* An app-first project's card is not one link: it stays on the wall and does not move. Its foot holds a link to
   each app store and one to its site. */
.card--still,
.card--still:hover,
.card--still:active {
  --tilt: inherit;
  transform: perspective(900px) rotate(var(--tilt, 0deg));
  box-shadow: var(--hang);
}

.card__stores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
}

.card--still:hover .card__cta {
  text-decoration-thickness: 2px;
}

.card--still .card__cta:hover {
  text-decoration-thickness: 3px;
}

.card__site {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.card__site:hover {
  text-decoration-thickness: 2px;
}

/* On a phone the stores are the way in; the site (a page for downloading the app) is for everyone else. A phone held
   upright is narrower than the phone composition's 44rem, and one turned on its side is a touch screen under 32rem tall. */
@media (max-width: 43.99rem), (pointer: coarse) and (max-height: 32rem) {
  .card__site,
  .proof__site {
    display: none;
  }
}

/* ==========================================================================
   Where to start
   ========================================================================== */

.picks-section {
  padding-top: clamp(3.5rem, 6vw, 5rem);
}

.picks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 2.4vw, 2.25rem);
}

.pick {
  position: relative;
  padding-top: 1.1rem;
}

/* The note is taped over the card's top edge, above the picture, never on it. */
.card__note {
  position: absolute;
  top: -1.55rem;
  right: 50%;
  z-index: 3;
  max-width: calc(100% - 1rem);
  padding: 0.25rem 0.9rem 0.3rem;
  translate: 50% 0;
  background: var(--tape);
  color: #2b2620;
  font: 400 1.2rem/1.1 var(--hand);
  white-space: nowrap;
  rotate: -2deg;
  clip-path: polygon(0 10%, 3% 0, 50% 4%, 97% 0, 100% 12%, 98.5% 50%, 100% 90%, 96% 100%, 50% 96%, 3% 100%, 0 88%, 1.5% 50%);
}

.pick .card {
  padding-top: 1.1rem;
}

.deck-dots {
  display: none;
}

/* ==========================================================================
   The reel: films clipped to a line, one in front
   ========================================================================== */

.reel-section {
  padding-top: clamp(4.5rem, 8vw, 6.5rem);
  scroll-margin-top: 0.5rem;
}

.reel-section .section-head {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.reel__lead {
  flex-basis: 100%;
  color: var(--chalk-2);
  font-size: 1.125rem;
}

/* --fw is a film's width and --fh its housing's height; --step is how far
   along the line the next one hangs. */
.reel {
  --fw: clamp(15rem, 20vw, 17.5rem);
  --fh: calc((var(--fw) - 0.8rem) * 16 / 9 + 3.3rem);
  --step: calc(var(--fw) * 1.04);
  --top: 2.5rem;
  position: relative;
  padding-top: var(--top);
}

/* The line: a cord from pin to pin. */
.reel__rail {
  position: absolute;
  top: 1.42rem;
  inset-inline: 0;
  height: 2px;
  background: linear-gradient(var(--cord), #cdbf9d);
  box-shadow: 0 0.4rem 0.35rem rgb(0 0 0 / 0.3);
}

.reel__rail::before,
.reel__rail::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0.85rem;
  height: 0.85rem;
  margin-top: -0.425rem;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fff 0 14%, #d6d3cd 38%, #7f7b74 85%);
  box-shadow: 0 0.12rem 0.2rem rgb(0 0 0 / 0.55);
}

.reel__rail::before {
  right: -0.4rem;
}

.reel__rail::after {
  left: -0.4rem;
}

/* Without the script the films hang side by side, each with the browser's
   player. With it they share one place: one in front, the others waiting
   further along the line, smaller and out of the light. */
.reel__films {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3.5rem 2.25rem;
}

.reel__item {
  position: relative;
  width: var(--fw);
}

.js .reel__films {
  display: grid;
  justify-items: center;
  touch-action: pan-y;
}

.js .reel__item {
  grid-area: 1 / 1;
  transform-origin: 50% -1.1rem;
  translate: calc(var(--at, 0) * var(--step)) 0;
  transition: translate 0.65s cubic-bezier(0.3, 1.15, 0.4, 1), scale 0.65s cubic-bezier(0.3, 1.15, 0.4, 1), opacity 0.4s ease;
}

.js .reel__item[data-pos="0"] {
  z-index: 2;
}

.js .reel__item:not([data-pos="0"]) {
  scale: 0.74;
  cursor: pointer;
}

/* The next film waits on the left, where Hebrew reads on to. */
.js .reel__item[data-pos="1"] {
  --at: -1;
}

.js .reel__item[data-pos="-1"] {
  --at: 1;
}

.js .reel__item[data-pos="2"],
.js .reel__item[data-pos="-2"] {
  --at: -1.9;
  opacity: 0;
  pointer-events: none;
}

.js .reel__item[data-pos="-2"] {
  --at: 1.9;
}

.js .reel__item:not([data-pos="0"]) .film__box {
  filter: brightness(0.46) saturate(0.75);
}

@media (hover: hover) {
  .js .reel__item:not([data-pos="0"]):hover .film__box {
    filter: brightness(0.64) saturate(0.85);
  }
}

.js .reel__item:not([data-pos="0"]) .film__go,
.js .reel__item:not([data-pos="0"]) .film__screen::after {
  display: none;
}

.film--reel .film__box {
  transform-origin: 50% -1.1rem;
}

/* A bulldog clip holds each one to the line. */
.film__clip {
  position: absolute;
  bottom: calc(100% - 0.6rem);
  left: 50%;
  z-index: 2;
  width: 2.7rem;
  translate: -50% 0;
  filter: drop-shadow(0 0.2rem 0.25rem rgb(0 0 0 / 0.45));
  pointer-events: none;
}

.film__clip svg {
  width: 100%;
  height: auto;
}

.reel__caption {
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  margin-top: 1.1rem;
  text-align: center;
}

/* Wider than its film, centred under it, and clear of the row of controls. */
.js .reel__caption {
  --cw: min(32rem, 100vw - 2 * var(--gutter));
  width: var(--cw);
  margin: 5.6rem calc((var(--fw) - var(--cw)) / 2) 0;
  transition: opacity 0.35s ease 0.2s;
}

.js .reel__item:not([data-pos="0"]) .reel__caption {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s 0.2s;
}

.reel__kind {
  color: var(--chalk-3);
  font-size: 0.9rem;
  font-weight: 500;
}

.reel__name {
  color: var(--chalk);
  font: 700 clamp(1.7rem, 2.6vw, 2.1rem) / 1.1 var(--display);
}

.reel__text {
  max-width: 46ch;
  color: var(--chalk-2);
  text-wrap: balance;
}

.reel__open {
  margin-top: 0.3rem;
  color: var(--chalk);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration-color: var(--lamp);
  text-underline-offset: 0.3em;
}

/* The controls sit right under the films, where they do not move when one
   caption is a line longer than another. */
.reel__nav {
  display: none;
}

.js .reel__nav {
  position: absolute;
  top: calc(var(--top) + var(--fh) + 1.25rem);
  inset-inline: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.reel__arrow {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 0.22rem 0 var(--wall-deep);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.reel__arrow svg {
  width: 1.25rem;
  height: 1.25rem;
}

.reel__arrow--prev svg {
  scale: -1 1;
}

@media (hover: hover) {
  .reel__arrow:hover {
    transform: translateY(-2px);
    box-shadow: 0 calc(0.22rem + 2px) 0 var(--wall-deep);
  }
}

.reel__arrow:active {
  transform: translateY(0.22rem);
  box-shadow: none;
}

.reel__arrow:focus-visible {
  border-radius: 50%;
}

.reel__dots {
  display: flex;
  align-items: center;
}

.reel__dot {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 2.75rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.reel__dot::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--chalk-3);
  transition: background-color 0.25s ease, scale 0.25s ease;
}

.reel__dot[aria-current="true"]::before {
  background: var(--lamp);
  scale: 1.35;
}

.reel__order {
  max-width: 52rem;
  margin: clamp(3rem, 6vw, 4.25rem) auto 0;
}

/* ==========================================================================
   The flagship's showroom
   ========================================================================== */

.showroom {
  position: relative;
  isolation: isolate;
  margin-top: clamp(4rem, 7vw, 6rem);
  padding-block: clamp(5.5rem, 9vw, 8rem) clamp(4.5rem, 8vw, 7rem);
}

/* The room around the flagship is darker than the wall, and the dark fades in
   and out instead of starting at a hard edge. */
.showroom::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60% 70% at 30% 100%, rgb(var(--glow) / 0.07), transparent 70%),
    rgb(8 7 6 / 0.42);
  -webkit-mask-image: linear-gradient(transparent, #000 9rem, #000 calc(100% - 7rem), transparent);
  mask-image: linear-gradient(transparent, #000 9rem, #000 calc(100% - 7rem), transparent);
  pointer-events: none;
}

/* A cone of light from above, falling on the stage. */
.showroom__light {
  position: absolute;
  top: 0;
  left: max(4%, calc(50% - var(--wrap) / 2 - 2rem));
  z-index: -1;
  width: min(46rem, 56%);
  height: 100%;
  background: linear-gradient(rgb(255 226 170 / 0.16), rgb(255 214 150 / 0.07) 60%, transparent 92%);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  filter: blur(6px);
  -webkit-mask-image: linear-gradient(transparent, #000 6rem);
  mask-image: linear-gradient(transparent, #000 6rem);
  pointer-events: none;
}

.showroom__light::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 26%;
  height: 0.6rem;
  translate: -50% 0;
  border-radius: 0 0 50% 50%;
  background: #fff3cf;
  box-shadow: 0 0 2rem 0.6rem rgb(255 216 140 / 0.5);
}

.showroom__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(2.5rem, 5vw, 5rem);
}

.showroom__name {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.6vw, 1.25rem);
  margin-top: 1.6rem;
  font: 900 clamp(3rem, 5.2vw, 4.7rem) / 0.95 var(--display);
  white-space: nowrap;
  color: var(--chalk);
}

.showroom__icon {
  width: clamp(3.6rem, 6vw, 5rem);
  flex: none;
  border-radius: 22%;
  box-shadow: 0 0.8rem 1.4rem -0.6rem rgb(0 0 0 / 0.7);
}

.showroom__latin {
  margin-top: 0.4rem;
  color: var(--brass-hi);
  font: 500 1.15rem/1.2 var(--display);
  text-align: right;
}

.showroom__lead {
  margin-top: 1.6rem;
  font: 700 clamp(1.4rem, 2.2vw, 1.8rem) / 1.25 var(--display);
}

.showroom__text {
  max-width: 44ch;
  margin-top: 0.75rem;
  color: var(--chalk-2);
}

.showroom__facts {
  margin-top: 1rem;
  color: var(--chalk);
  font-weight: 600;
}

.showroom__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}

.showroom__stores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.store {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.7rem 1.2rem;
  background: var(--chalk);
  color: var(--ink);
  border-radius: 0.7rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.store:hover {
  background: #fff;
}

.store--ghost {
  background: transparent;
  color: var(--chalk);
  box-shadow: inset 0 0 0 1.5px var(--chalk-3);
}

.store--ghost:hover {
  background: rgb(239 231 214 / 0.08);
}

.showroom__site {
  color: var(--chalk);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

.showroom__site:hover {
  text-decoration-color: var(--lamp);
}

.showroom__stage {
  position: relative;
  padding-bottom: 1.6rem;
}

.screens {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.screen figure {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.phone {
  display: block;
  width: clamp(9rem, 14vw, 12rem);
  overflow: hidden;
  background: #15120f;
  border: 0.42rem solid #15120f;
  border-radius: 1.9rem;
  box-shadow: 0 2rem 2.6rem -1.4rem rgb(0 0 0 / 0.9), inset 0 0 0 1px rgb(255 255 255 / 0.07), 0 0 0 1px rgb(255 255 255 / 0.06);
}

.phone img {
  width: 100%;
  aspect-ratio: 9 / 19.5;
  object-fit: cover;
  object-position: top;
  border-radius: 1.45rem;
}

.screen--main {
  z-index: 2;
}

.screen--main .phone {
  width: clamp(10.5rem, 16.5vw, 14rem);
}

.screen--0 {
  margin-left: -2.4rem;
}

.screen--2 {
  margin-right: -2.4rem;
}

.screen--0 .phone {
  rotate: 7deg;
  transform-origin: 50% 100%;
}

.screen--2 .phone {
  rotate: -7deg;
  transform-origin: 50% 100%;
}

.screen__note {
  margin-top: 1.4rem;
  padding: 0.2rem 0.75rem 0.25rem;
  background: var(--kraft);
  color: #3a2c12;
  font: 400 1.2rem/1.15 var(--hand);
  white-space: nowrap;
  border-radius: 2px;
  rotate: -2deg;
  box-shadow: 0 0.5rem 0.8rem -0.4rem rgb(0 0 0 / 0.6);
}

.screen figure {
  position: relative;
}

/* The captions are stuck to the plinth's front edge, one under each phone. */
.screen__note {
  position: relative;
  z-index: 3;
  margin-top: 1.9rem;
  font-size: 1.1rem;
}

.screen--0 .screen__note {
  rotate: 2deg;
  translate: 1.4rem 0;
}

.screen--2 .screen__note {
  rotate: -3deg;
  translate: -1.4rem 0;
}

.screen--0 .phone,
.screen--2 .phone {
  margin-bottom: 1.2rem;
}

.plinth {
  position: absolute;
  inset: auto -1rem 0.4rem;
  height: 5.6rem;
  border-radius: 6px;
  background:
    linear-gradient(#5b4a36, #3f3326) top / 100% 0.9rem no-repeat,
    linear-gradient(#34291f, #2a2119);
  box-shadow: 0 2rem 2.4rem -1.2rem rgb(0 0 0 / 0.9), inset 0 1px 0 rgb(255 255 255 / 0.12);
}

/* ==========================================================================
   Commission: the door for clients
   ========================================================================== */

.commission {
  padding-top: clamp(3.5rem, 6vw, 5rem);
}

.commission__sheet {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  background: var(--paper-warm);
  color: var(--ink);
  border-radius: 4px;
  box-shadow: var(--hang);
}

.commission__clip {
  position: absolute;
  top: -0.9rem;
  right: 50%;
  translate: 50% 0;
  width: 5rem;
  height: 1.8rem;
  border-radius: 0.3rem 0.3rem 0.5rem 0.5rem;
  background: linear-gradient(#57534c, #2b2926 40%);
  box-shadow: 0 0.35rem 0.5rem rgb(0 0 0 / 0.4);
}

.commission__clip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 3.2rem;
  height: 1.2rem;
  translate: -50% 0.35rem;
  border: 3px solid #cfcbc3;
  border-bottom: 0;
  border-radius: 1.2rem 1.2rem 0 0;
}

.commission__main {
  padding: clamp(2.25rem, 4.5vw, 3.75rem);
}

.commission__title {
  font: 900 clamp(2.2rem, 4.2vw, 3.4rem) / 1.02 var(--display);
}

.commission__text {
  max-width: 46ch;
  margin-top: 1rem;
  color: var(--graphite);
  font-size: 1.1rem;
}

.commission__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}

/* The tear-off stub: what can be ordered, each a shortcut into the form. */
.commission__order {
  position: relative;
  padding: clamp(2.25rem, 4.5vw, 3.75rem) clamp(1.75rem, 3.5vw, 3rem);
  border-right: 2px dashed rgb(29 27 24 / 0.2);
}

.commission__order::before,
.commission__order::after {
  content: "";
  position: absolute;
  right: -0.8rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--wall);
}

.commission__order::before {
  top: -0.75rem;
}

.commission__order::after {
  bottom: -0.75rem;
}

.commission__order-head {
  margin-bottom: 0.9rem;
  color: var(--graphite);
  font-size: 0.9rem;
  font-weight: 600;
}

.commission__kinds {
  display: grid;
  gap: 0.25rem;
}

.commission__kinds a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 2.9rem;
  padding: 0.4rem 0;
  color: var(--ink);
  font: 700 1.3rem/1.2 var(--display);
  text-decoration: none;
  border-bottom: 1px solid rgb(29 27 24 / 0.1);
}

.box {
  position: relative;
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  border: 2px solid var(--ink);
  border-radius: 3px;
}

.box::after {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: -0.35rem;
  width: 0.55rem;
  height: 1.05rem;
  border-right: 3px solid var(--pen);
  border-bottom: 3px solid var(--pen);
  rotate: 40deg;
  scale: 0;
  transform-origin: 50% 80%;
  transition: scale 0.25s var(--spring);
}

@media (hover: hover) {
  .commission__kinds a:hover .box::after {
    scale: 1;
  }
}

.commission__kinds a:focus-visible .box::after,
.commission__kinds a:active .box::after {
  scale: 1;
}

.idea-nudge {
  margin-top: 1.75rem;
  color: var(--chalk-2);
  text-align: center;
}

.idea-nudge a {
  color: var(--chalk);
  font-weight: 600;
  text-decoration-color: var(--lamp);
  text-underline-offset: 0.3em;
}

/* ==========================================================================
   Follow: after the page has given something
   ========================================================================== */

.follow {
  margin-top: var(--room);
  padding-block: clamp(2.25rem, 4vw, 3rem);
  background: rgb(0 0 0 / 0.16);
  border-block: 1px solid var(--line);
}

.follow__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
}

.follow__title {
  font: 700 clamp(1.6rem, 2.8vw, 2.2rem) / 1.1 var(--display);
}

.follow__text p {
  margin-top: 0.35rem;
  color: var(--chalk-2);
}

.follow__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Follow: two WhatsApp groups. Each is the same small paper button as every other social link,
   with its name and one line about it. */
.follow__option {
  justify-content: flex-start;
  gap: 0.8rem;
  min-height: 3.75rem;
  padding: 0.7rem 1.25rem;
  text-align: start;
}

.follow__option-text {
  display: grid;
  gap: 0.2rem;
}

.follow__option-text b {
  font-size: 1.05rem;
  font-weight: 700;
}

.follow__option-text small {
  color: var(--graphite);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.3;
}

/* ==========================================================================
   Rooms: the pages after the wall
   ========================================================================== */

.room {
  padding-bottom: var(--room);
}

.room__head {
  padding-block: clamp(2rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem);
}

.room__title {
  font: 900 clamp(2.8rem, 6.4vw, 5.2rem) / 0.98 var(--display);
  color: var(--chalk);
}

.room__lead {
  max-width: 48ch;
  margin-top: 1rem;
  color: var(--chalk-2);
  font-size: 1.15rem;
}

/* ---------- /projects/: the sorter ---------- */

.sorter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

.lever {
  --pos: 1;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 27rem);
  padding: 0.3rem;
  background: #1c1a17;
  border-radius: 999px;
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.6), 0 1px 0 rgb(255 255 255 / 0.06);
}

.lever:has(input[value="useful"]:checked) {
  --pos: 0;
}

.lever:has(input[value="fun"]:checked) {
  --pos: 2;
}

.lever__slot {
  position: absolute;
  inset: 0.3rem;
  pointer-events: none;
}

.lever__knob {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: calc(var(--pos) * 100% / 3);
  width: calc(100% / 3);
  border-radius: 999px;
  background: linear-gradient(var(--brass-hi), var(--brass));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 2px 4px rgb(0 0 0 / 0.5);
  transition: inset-inline-start 0.45s var(--spring);
}

.lever__pos {
  position: relative;
  z-index: 1;
  cursor: pointer;
}

.lever__pos input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lever__pos span {
  display: grid;
  place-items: center;
  min-height: 2.6rem;
  padding: 0.3rem 0.5rem;
  color: var(--chalk-2);
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.25s ease;
}

.lever__pos input:checked + span {
  color: #231807;
}

.lever__pos input:focus-visible + span {
  outline: 3px solid var(--lamp);
  outline-offset: 2px;
  border-radius: 999px;
}

.finder {
  position: relative;
  display: block;
  width: min(100%, 15rem);
  margin-inline-start: auto;
}

.finder__icon {
  position: absolute;
  top: 50%;
  right: 0.85rem;
  width: 1.1rem;
  height: 1.1rem;
  translate: 0 -50%;
  color: var(--chalk-3);
  pointer-events: none;
}

.finder__input {
  width: 100%;
  min-height: 2.9rem;
  padding: 0.5rem 2.5rem 0.5rem 1rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--chalk);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.finder__input::placeholder {
  color: var(--chalk-3);
}

.finder__input:focus {
  outline: none;
  border-color: var(--lamp);
  background: rgb(0 0 0 / 0.15);
}

.sorter__count {
  flex-basis: 100%;
  min-height: 1.5em;
  margin-top: -0.25rem;
  color: var(--chalk-3);
  font-size: 0.95rem;
}

.sorter__count:empty {
  display: none;
}

.topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.topic input {
  position: absolute;
  opacity: 0;
}

.topic span {
  display: inline-block;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--chalk-2);
  cursor: pointer;
}

.topic input:checked + span {
  background: var(--chalk);
  color: var(--ink);
}

/* ---------- /projects/: the stock ---------- */

.stock {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 3vw, 2.75rem) clamp(1.5rem, 2.5vw, 2.25rem);
}

.stock__item {
  transition: opacity 0.3s ease;
}

.stock__item.is-out {
  opacity: 0;
}

.card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  width: 100%;
}

.card__stamp {
  padding: 0.05rem 0.45rem;
  border: 1.5px solid var(--p-accent-text);
  border-radius: 3px;
  color: var(--p-accent-text);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  rotate: -5deg;
}

.card--stock .card__body {
  padding-top: 1rem;
}

.card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1rem;
  margin-top: 0.8rem;
  color: color-mix(in srgb, var(--p-ink) 70%, transparent);
  font-size: 0.85rem;
  font-weight: 500;
}

.card__facts span {
  position: relative;
  padding-right: 1.05rem;
}

.card__facts span::before {
  content: "";
  position: absolute;
  right: 0.1rem;
  top: 0.45em;
  width: 0.6rem;
  height: 0.32rem;
  border-left: 2px solid var(--p-accent);
  border-bottom: 2px solid var(--p-accent);
  rotate: -45deg;
}

.card__summary {
  max-width: 48ch;
  margin-top: 0.6rem;
  color: color-mix(in srgb, var(--p-ink) 80%, transparent);
  font-size: 1rem;
  line-height: 1.6;
}

.card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  width: 100%;
  margin-top: auto;
  padding-top: 1.1rem;
}

.card__foot .card__cta {
  margin-top: 0;
  padding-top: 0;
}

.card__host {
  color: color-mix(in srgb, var(--p-ink) 72%, transparent);
  font-size: 0.82rem;
  font-weight: 500;
}

/* The flagship takes two columns, the picture beside the words. */
.stock__item--flag {
  grid-column: span 2;
}

.stock__item--flag .card {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  align-items: center;
  gap: 0 1.75rem;
  padding: 1.25rem;
}

.stock__item--flag .card__body {
  padding: 0.5rem 0.25rem 0.25rem;
  height: 100%;
}

.stock__item--flag .card__name {
  font-size: clamp(2.1rem, 3.2vw, 2.7rem);
}



/* The next empty place, at the end of the grid. */
.stock__slot {
  align-self: start;
}

.stock__slot a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  height: 100%;
  min-height: 16rem;
  padding: 2rem 1.5rem;
  border: 2px dashed rgb(239 231 214 / 0.22);
  border-radius: 6px;
  color: var(--chalk-2);
  text-align: center;
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.stock__slot b {
  color: var(--chalk);
  font: 700 1.5rem/1.15 var(--display);
}

.stock__slot i {
  width: 0.9rem;
  height: 0.9rem;
  margin-bottom: 0.6rem;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff7cf 0 18%, var(--lamp) 55%, #e6b400 100%);
  box-shadow: 0 0 0.8rem 0.2rem rgb(255 216 74 / 0.45);
}

.stock__slot a:hover {
  border-color: var(--lamp);
  background: rgb(255 216 74 / 0.04);
}

.stock__empty {
  padding: 3rem 0 1rem;
  color: var(--chalk-2);
  font-size: 1.1rem;
}

.stock__empty-title {
  color: var(--chalk);
  font: 700 2rem/1.1 var(--display);
}

.stock__empty a {
  color: var(--chalk);
  text-decoration-color: var(--lamp);
}

.room__next {
  margin-top: var(--room);
}

.door {
  display: grid;
  gap: 0.35rem;
  padding: 1.6rem 1.75rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--chalk-2);
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.door b {
  color: var(--chalk);
  font: 700 clamp(1.5rem, 2.4vw, 1.9rem) / 1.15 var(--display);
}

.door:hover {
  border-color: var(--chalk-3);
  background: rgb(239 231 214 / 0.03);
}

.door--client {
  background: var(--paper-warm);
  border-color: transparent;
  color: var(--graphite);
  box-shadow: var(--hang);
}

.door--client b {
  color: var(--ink);
}

.door--client:hover {
  background: var(--paper);
  border-color: transparent;
}

.door--wide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.75rem, 3.5vw, 2.75rem);
}

.door__words {
  display: grid;
  gap: 0.35rem;
}

.door__words b {
  color: var(--ink);
  font: 900 clamp(1.8rem, 3vw, 2.4rem) / 1.1 var(--display);
}

.door__button {
  display: inline-flex;
  align-items: center;
  min-height: 3.25rem;
  padding: 0.85rem 1.6rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 0.75rem;
  font-weight: 600;
  box-shadow: 0 0.25rem 0 #000;
  transition: transform 0.15s ease;
}

.door--wide:hover .door__button {
  transform: translateY(-2px);
}

/* ---------- /work/ ---------- */

.work-top {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: clamp(2.5rem, 5vw, 5rem);
  padding-top: clamp(2rem, 5vw, 4rem);
}

.pitch {
  position: sticky;
  top: 2rem;
}

.pitch__lead {
  margin-top: 1.25rem;
  font: 500 clamp(1.45rem, 2.3vw, 1.9rem) / 1.3 var(--display);
}

.pitch__text {
  max-width: 44ch;
  margin-top: 1rem;
  color: var(--chalk-2);
  font-size: 1.1rem;
}

.pitch__text a {
  color: var(--chalk);
  text-decoration-color: var(--lamp);
  text-underline-offset: 0.3em;
}

.pitch__points {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.pitch__points li {
  position: relative;
  padding-right: 1.6rem;
  color: var(--chalk);
}

.pitch__points a {
  text-decoration-color: var(--lamp);
  text-underline-offset: 0.3em;
}

.pitch__points li::before {
  content: "";
  position: absolute;
  right: 0.15rem;
  top: 0.55em;
  width: 0.75rem;
  height: 0.38rem;
  border-left: 2.5px solid var(--lamp);
  border-bottom: 2.5px solid var(--lamp);
  rotate: -45deg;
}

/* The clipboard: hardboard, a steel clip, and the order sheet. */
.clipboard {
  position: relative;
  padding: 2.6rem clamp(0.75rem, 1.5vw, 1.15rem) clamp(0.75rem, 1.5vw, 1.15rem);
  background: linear-gradient(135deg, #7b5b3a, #5f4428);
  border-radius: 0.9rem;
  box-shadow: var(--hang), inset 0 1px 0 rgb(255 255 255 / 0.18);
}

.clipboard__clip {
  position: absolute;
  top: -0.8rem;
  right: 50%;
  z-index: 3;
  width: 9rem;
  height: 3.2rem;
  translate: 50% 0;
  border-radius: 0.6rem 0.6rem 1rem 1rem;
  background: linear-gradient(#f0ede6, #a9a49a 60%, #7c776e);
  box-shadow: 0 0.5rem 0.7rem rgb(0 0 0 / 0.45), inset 0 1px 0 #fff;
}

.clipboard__clip i {
  position: absolute;
  top: 0.8rem;
  left: 50%;
  width: 3.5rem;
  height: 0.8rem;
  translate: -50% 0;
  border-radius: 999px;
  background: #3c3934;
  box-shadow: inset 0 2px 3px rgb(0 0 0 / 0.6);
}

.sheet {
  position: relative;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  background: #fdf9ee;
  color: var(--ink);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
}

.sheet__head {
  display: flex;
  justify-content: space-between;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--ink);
  font-size: 0.85rem;
  font-weight: 700;
}

.sheet__for {
  color: var(--graphite);
  font-weight: 500;
}

.sheet__title {
  margin-top: 1.3rem;
  font: 900 clamp(2rem, 3.4vw, 2.6rem) / 1 var(--display);
}

.sheet__hint {
  margin-top: 0.5rem;
  color: var(--graphite);
  font-size: 0.975rem;
}

.ticks {
  margin-top: 1.6rem;
}

.ticks legend {
  margin-bottom: 0.55rem;
  font-weight: 700;
}

.ticks__list {
  display: grid;
  gap: 0.2rem;
}

.tick {
  position: relative;
}

.tick__box {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tick__label {
  position: relative;
  display: grid;
  gap: 0.05rem;
  min-height: 2.75rem;
  padding: 0.45rem 2.4rem 0.45rem 0;
  cursor: pointer;
  line-height: 1.4;
}

.tick__label b {
  font-size: 1.075rem;
}

.tick__label span {
  color: var(--graphite);
  font-size: 0.9rem;
}

.tick__label::before {
  content: "";
  position: absolute;
  right: 0.1rem;
  top: 0.62rem;
  width: 1.35rem;
  height: 1.35rem;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: #fff;
}

.tick__label::after {
  content: "";
  position: absolute;
  right: 0.5rem;
  top: 0.3rem;
  width: 0.6rem;
  height: 1.15rem;
  border-right: 3.5px solid var(--pen);
  border-bottom: 3.5px solid var(--pen);
  rotate: 40deg;
  scale: 0;
  transform-origin: 50% 85%;
  transition: scale 0.25s var(--spring);
}

.tick__box:checked + .tick__label::after {
  scale: 1;
}

.tick__box:focus-visible + .tick__label::before {
  outline: 3px solid var(--pen);
  outline-offset: 2px;
}

.tick--round .tick__label {
  align-content: center;
  font-weight: 600;
}

.tick--round .tick__label::before {
  border-radius: 50%;
}

.tick--round .tick__label::after {
  right: 0.42rem;
  top: calc(50% - 0.33rem);
  width: 0.72rem;
  height: 0.72rem;
  border: 0;
  border-radius: 50%;
  background: var(--pen);
  rotate: 0deg;
  transform-origin: 50% 50%;
}

.tick--round .tick__label::before {
  top: calc(50% - 0.675rem);
}

.sheet__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.5rem;
}

.line {
  display: block;
  margin-top: 1.6rem;
}

.line__label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 700;
}

.line__input {
  display: block;
  width: 100%;
  min-height: 5.6rem;
  resize: none;
  padding: 0.1rem 0.1rem 0;
  background: repeating-linear-gradient(transparent 0 2.75rem, rgb(29 75 156 / 0.25) 2.75rem calc(2.75rem + 1px), transparent calc(2.75rem + 1px) 2.8rem);
  border: 0;
  color: var(--pen);
  font: 400 1.45rem/2.8rem var(--hand);
}

.line__input::placeholder {
  color: rgb(29 27 24 / 0.38);
}

.line__input:focus {
  outline: none;
  background-color: rgb(29 75 156 / 0.04);
}

.sheet__send {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px dashed rgb(29 27 24 / 0.25);
}

.sheet__or {
  color: var(--graphite);
  font-size: 0.9rem;
}

.sheet__or a {
  color: var(--ink);
}

/* What the e-mail will say: the carbon copy, useful. */
.preview {
  margin-top: 1.5rem;
  padding: 1rem 1.15rem;
  background: #f1ead8;
  border-radius: 3px;
  color: #4b4337;
  font-size: 0.9rem;
  line-height: 1.55;
}

.preview__label {
  margin-bottom: 0.3rem;
  color: #6b604c;
  font-size: 0.8rem;
  font-weight: 600;
}

.preview__subject {
  color: var(--ink);
  font-weight: 700;
}

.preview__body {
  margin-top: 0.3rem;
  white-space: pre-line;
}

.proof {
  padding-top: var(--room);
}

.proof__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.proof__link {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  grid-template-areas:
    "tile head"
    "tile text"
    "tile open";
  gap: 0.25rem 1.1rem;
  height: 100%;
  padding: 1.35rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.proof__link:hover {
  border-color: var(--chalk-3);
  background: rgb(239 231 214 / 0.03);
}

.proof__link--still:hover {
  border-color: var(--line);
  background: none;
}

.proof__stores {
  grid-area: open;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
}

.proof__stores .proof__open:hover {
  text-decoration-thickness: 2px;
}

.proof__tile {
  grid-area: tile;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 22%;
  box-shadow: 0 0.4rem 0.7rem -0.3rem rgb(0 0 0 / 0.6);
}

.proof__head {
  grid-area: head;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.7rem;
}

.proof__name {
  color: var(--chalk);
  font: 700 1.4rem/1.2 var(--display);
}

.proof__kind {
  color: var(--chalk-3);
  font-size: 0.875rem;
}

.proof__text {
  grid-area: text;
  color: var(--chalk-2);
  font-size: 0.975rem;
  line-height: 1.6;
}

.proof__open {
  grid-area: open;
  margin-top: 0.35rem;
  color: var(--chalk);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--lamp);
  text-underline-offset: 0.3em;
}

.cases {
  padding-top: var(--room);
}

.cases__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.case {
  padding: 2rem;
  background: var(--paper-warm);
  color: var(--ink);
  border-radius: 4px;
  box-shadow: var(--hang);
}

.case__meta {
  color: var(--graphite);
  font-size: 0.875rem;
}

.case__title {
  margin: 0.2rem 0 0.6rem;
  font: 700 1.8rem/1.1 var(--display);
}

.steps-section {
  padding-top: var(--room);
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  counter-reset: step;
}

.step {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.4rem;
  padding-top: 4.25rem;
  counter-increment: step;
}

.step::before {
  content: counter(step);
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border: 2px solid var(--chalk-3);
  border-radius: 50%;
  color: var(--lamp);
  font: 700 1.4rem/1 var(--display);
}

.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.45rem;
  right: 3.6rem;
  left: -1.3rem;
  border-top: 2px dotted var(--chalk-3);
}

.step__title {
  color: var(--chalk);
  font: 700 1.5rem/1.15 var(--display);
}

.step__text {
  color: var(--chalk-2);
  font-size: 0.975rem;
}

.closing {
  padding-top: var(--room);
}

.closing__card {
  position: relative;
  max-width: 44rem;
  margin-inline: auto;
  padding: clamp(2.25rem, 4.5vw, 3.25rem);
  background: var(--paper);
  color: var(--ink);
  border-radius: 3px;
  rotate: -0.6deg;
  box-shadow: var(--hang);
}

.closing__card .paperclip {
  top: -1.1rem;
  right: 2.5rem;
  width: 1.3rem;
}

.closing__title {
  font: 900 clamp(2.2rem, 4vw, 3rem) / 1 var(--display);
}

.closing__card p {
  margin-top: 0.75rem;
  color: var(--graphite);
  font-size: 1.1rem;
}

.closing__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 1.75rem;
}

/* ---------- /about/ ---------- */

.about-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
  padding-top: clamp(2rem, 5vw, 4rem);
}

/* The name as a dictionary entry, on a slip of old paper. */
.entry {
  position: relative;
  padding: clamp(2rem, 4.5vw, 3.5rem);
  background: #f4ecd9;
  color: var(--ink);
  border-radius: 3px;
  rotate: 1deg;
  box-shadow: var(--hang);
}

.entry::before {
  content: "";
  position: absolute;
  top: -0.9rem;
  left: 2.2rem;
  width: 6.5rem;
  height: 1.9rem;
  background: var(--tape);
  rotate: -8deg;
  clip-path: polygon(0 10%, 3% 0, 50% 4%, 97% 0, 100% 12%, 98.5% 50%, 100% 90%, 96% 100%, 50% 96%, 3% 100%, 0 88%, 1.5% 50%);
}

.entry__lang {
  color: var(--brass-ink);
  font-size: 0.9rem;
  font-weight: 600;
}

.entry__word {
  margin-top: 0.3rem;
  font: 900 clamp(4rem, 9vw, 6.8rem) / 1 var(--display);
}

.entry__say {
  margin-top: 0.35rem;
  color: var(--graphite);
  font: italic 500 1.1rem/1.2 Georgia, "Times New Roman", serif;
  text-align: right;
}

.entry__senses {
  display: grid;
  gap: 1rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgb(29 27 24 / 0.18);
  counter-reset: sense;
}

.entry__senses li {
  position: relative;
  padding-right: 2rem;
  font: 500 clamp(1.2rem, 1.8vw, 1.4rem) / 1.45 var(--display);
  counter-increment: sense;
}

.entry__senses li::before {
  content: counter(sense) ".";
  position: absolute;
  right: 0;
  color: var(--brass-ink);
  font-weight: 700;
}

.entry__pos {
  display: block;
  color: var(--graphite);
  font: 500 0.85rem/1.4 var(--text);
}

.about-intro {
  display: grid;
  gap: 1rem;
  color: var(--chalk-2);
  font-size: 1.125rem;
}

.about-intro__lead {
  color: var(--chalk);
  font: 700 clamp(1.7rem, 3vw, 2.4rem) / 1.2 var(--display);
}

.ways {
  padding-top: var(--room);
}

.ways__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 3.5rem;
}

.way {
  padding-top: 1.4rem;
  border-top: 2px solid var(--chalk-3);
}

.way__title {
  color: var(--chalk);
  font: 700 clamp(1.6rem, 2.6vw, 2.1rem) / 1.1 var(--display);
}

.way__text {
  max-width: 46ch;
  margin-top: 0.6rem;
  color: var(--chalk-2);
}

.way__link {
  display: inline-block;
  margin-top: 0.6rem;
  color: var(--chalk);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration-color: var(--lamp);
  text-underline-offset: 0.3em;
}

.doors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  padding-top: var(--room);
}

.about-mail {
  margin-top: 2rem;
  color: var(--chalk-2);
}

.about-mail a {
  color: var(--chalk);
}

/* ---------- /ideas/ ---------- */

.ideas-top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
  padding-top: clamp(2rem, 5vw, 4rem);
}

.ideas-copy__lead {
  max-width: 30ch;
  margin-top: 1.4rem;
  font: 500 clamp(1.4rem, 2.3vw, 1.85rem) / 1.35 var(--display);
}

.ideas-copy > p:not(.ideas-copy__lead) {
  max-width: 44ch;
  margin-top: 1rem;
  color: var(--chalk-2);
  font-size: 1.1rem;
}

.ideas-copy__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 2rem;
}

.ideas-copy__mail {
  color: var(--chalk-3);
  font-size: 0.95rem;
}

/* A patch of pegboard with the next place in it, empty and lit. */
.slot__board {
  --u: 2.2rem;
  position: relative;
  aspect-ratio: 1 / 1.05;
  width: min(100%, 26rem);
  margin-inline: auto;
  border-radius: 0.9rem;
  background-color: var(--wall-board);
  background-image:
    radial-gradient(circle at 50% 50%, var(--wall-deep) 0 0.27rem, transparent calc(0.27rem + 0.5px)),
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0.1) 0 0.34rem, transparent calc(0.34rem + 0.5px));
  background-size: var(--u) var(--u);
  background-position: center, center calc(50% + 0.08rem);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), 0 2.5rem 3rem -1.8rem rgb(0 0 0 / 0.8);
}

.slot__board::after {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: -1;
  background: radial-gradient(closest-side, rgb(255 216 74 / 0.12), transparent 70%);
}

.slot__pin {
  position: absolute;
  top: 18%;
  left: 50%;
  width: 1.3rem;
  height: 1.3rem;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff7cf 0 18%, var(--lamp) 55%, #e6b400 100%);
  box-shadow: 0 0 1.4rem 0.4rem rgb(255 216 74 / 0.55), 0 0 5rem 1rem rgb(255 216 74 / 0.2);
  animation: slot-glow 3.2s ease-in-out infinite alternate;
}

@keyframes slot-glow {
  to {
    box-shadow: 0 0 1.8rem 0.6rem rgb(255 216 74 / 0.7), 0 0 6rem 1.4rem rgb(255 216 74 / 0.28);
  }
}

.slot__outline {
  position: absolute;
  top: 27%;
  left: 50%;
  width: 46%;
  aspect-ratio: 1;
  translate: -50% 0;
  border: 2.5px dashed rgb(255 255 255 / 0.3);
  border-radius: 22%;
}

.slot__string {
  position: absolute;
  top: 18%;
  left: 50%;
  width: 2px;
  height: 58%;
  margin-left: -1px;
  background: var(--cord);
  opacity: 0.8;
}

.slot__tag {
  position: absolute;
  top: 74%;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 0.1rem;
  padding: 0.7rem 1.1rem 0.45rem;
  translate: -50% 0;
  background: var(--lamp);
  color: var(--ink);
  rotate: -4deg;
  white-space: nowrap;
  clip-path: polygon(0.6rem 0, calc(100% - 0.6rem) 0, 100% 0.6rem, 100% 100%, 0 100%, 0 0.6rem);
  filter: drop-shadow(0 3px 4px rgb(0 0 0 / 0.4));
}

.slot__tag b {
  font: 700 1.9rem/1 var(--display);
}

.slot__tag span {
  font-size: 0.9rem;
  font-weight: 600;
}

.after {
  padding-top: var(--room);
}

.after__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem 3rem;
}

.after__list li {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding-top: 1.3rem;
  border-top: 2px solid var(--chalk-3);
}

.after__list b {
  color: var(--chalk);
  font: 700 clamp(1.5rem, 2.4vw, 1.9rem) / 1.1 var(--display);
}

.after__list span {
  color: var(--chalk-2);
}

.after__work {
  margin-top: 3rem;
  color: var(--chalk-2);
  font-size: 1.1rem;
}

.after__work a {
  color: var(--chalk);
  font-weight: 600;
  text-decoration-color: var(--lamp);
  text-underline-offset: 0.3em;
}

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

.lost__body {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 1.25rem;
  min-height: 58dvh;
  padding-block: 3rem 2rem;
}

.lost__code {
  font: 900 clamp(6rem, 20vw, 13rem) / 0.8 var(--display);
  color: transparent;
  background:
    radial-gradient(circle, rgb(255 214 140 / 0.45) 0 0.16rem, transparent calc(0.16rem + 0.5px)) 0 0 / 0.9rem 0.9rem,
    var(--wall-board);
  -webkit-background-clip: text;
  background-clip: text;
}

.lost__title {
  font: 900 clamp(2.2rem, 5vw, 3.8rem) / 1.04 var(--display);
}

.lost__text {
  max-width: 42ch;
  color: var(--chalk-2);
  font-size: 1.15rem;
}

.lost__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
  margin-top: 0.75rem;
}

/* ==========================================================================
   Footer: the name, in light coming through the holes
   ========================================================================== */

.footer {
  position: relative;
  overflow: hidden;
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
  color: var(--chalk-2);
}

.page-home .footer,
.page-about .footer {
  padding-top: clamp(3rem, 6vw, 4.5rem);
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
}

.footer__brand p {
  max-width: 30ch;
  margin-top: 1rem;
  color: var(--chalk);
  font: 500 1.15rem/1.45 var(--display);
}

.footer__head {
  margin: 0 0 0.9rem;
  color: var(--chalk);
  font: 700 1.05rem/1.2 var(--display);
}

.footer__col ul {
  display: grid;
  gap: 0.45rem;
}

.footer__col a {
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer__col a:hover {
  color: var(--lamp);
}

.footer__all {
  color: var(--chalk);
  font-weight: 600;
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--chalk-3);
  font-size: 0.9rem;
}

.footer__word {
  margin: 1.5rem 0 0;
  color: transparent;
  font: 900 clamp(8rem, 31vw, 27rem) / 0.72 var(--display);
  text-align: center;
  background:
    radial-gradient(circle, rgb(255 214 140 / 0.95) 0 0.16rem, transparent calc(0.16rem + 0.5px)) 0 0 / 0.95rem 0.95rem,
    var(--wall-board);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 1.4rem rgb(255 200 120 / 0.18));
  translate: 0 0.16em;
  user-select: none;
}

/* ==========================================================================
   Between desktop and phone
   ========================================================================== */

@media (max-width: 75rem) {
  .picks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.25rem;
    row-gap: 3.25rem;
    max-width: 44rem;
    margin-inline: auto;
  }

  .footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 68rem) {
  .showroom__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .showroom__light {
    left: 50%;
    top: auto;
    bottom: 0;
    height: 60%;
    translate: -50% 0;
    width: min(46rem, 100%);
  }

  .commission__sheet {
    grid-template-columns: minmax(0, 1fr);
  }

  .commission__order {
    border-right: 0;
    border-top: 2px dashed rgb(29 27 24 / 0.2);
  }

  .commission__order::before,
  .commission__order::after {
    top: -0.8rem;
    right: auto;
    bottom: auto;
  }

  .commission__order::before {
    right: -0.75rem;
  }

  .commission__order::after {
    left: -0.75rem;
  }

  .commission__kinds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
  }

  .stock {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .work-top {
    grid-template-columns: minmax(0, 1fr);
  }

  .pitch {
    position: static;
  }

  .clipboard {
    width: min(100%, 44rem);
    margin-inline: auto;
  }

  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 2.5rem;
  }

  .step:nth-child(2)::after {
    display: none;
  }

  .about-top,
  .ideas-top {
    grid-template-columns: minmax(0, 1fr);
  }

  .entry {
    width: min(100%, 38rem);
  }
}

@media (max-width: 60rem) {
  /* Side by side would squeeze the board: it takes the whole width again,
     and the film hangs under it. */
  .hero__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .hero__stage > .board-frame {
    max-width: 50rem;
    margin-top: 7.75rem;
  }

  /* The studio's line is centred right above the lamp here: its cable stops short of the words. */
  .lamp {
    --cable: 1.25rem;
  }

  .hero__stage > .film {
    width: min(46%, 19rem);
    margin-top: 5.75rem;
  }

  .cord {
    left: -0.25rem;
    top: -3.5rem;
  }
}

/* ==========================================================================
   Phones: composed for the hand, not stacked from the desktop
   ========================================================================== */

@media (max-width: 43.99rem) {
  :root {
    --room: 4.5rem;
  }

  body {
    font-size: 1rem;
  }

  /* Masthead: the brand and one clear menu button. */
  .masthead__inner {
    padding-block: 0.9rem;
  }

  .brand__mark {
    width: 1.9rem;
    height: 1.9rem;
  }

  .brand__name {
    font-size: 1.55rem;
  }

  .js .nav {
    display: none;
  }

  .js .menu-button {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.75rem;
    padding: 0.45rem 0.95rem 0.45rem 0.8rem;
    background: rgb(239 231 214 / 0.08);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--chalk);
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .menu-button__bars {
    display: grid;
    gap: 0.28rem;
    width: 1.1rem;
  }

  .menu-button__bars i {
    height: 2px;
    border-radius: 2px;
    background: currentColor;
  }

  .menu-button__bars i:last-child {
    width: 70%;
  }

  .menu:not([hidden]) {
    animation: menu-in 0.32s cubic-bezier(0.2, 0.9, 0.3, 1);
  }

  @keyframes menu-in {
    from {
      opacity: 0;
      transform: translateY(-0.75rem);
    }
  }

  /* Hero: the name, the board standing tall under the lamp, then the way in. */
  .hero {
    padding-top: 0.5rem;
    padding-bottom: 1rem;
  }

  .hero::before {
    left: 50%;
    top: 45%;
  }

  .hero__title {
    --w: min(100%, 20rem);
    margin: 0.35rem 0 0.9rem;
  }

  .hero__lead {
    max-width: none;
    font-size: clamp(1.15rem, 5.4vw, 1.45rem);
  }

  .hero__stage > .board-frame {
    --cols: 16;
    --rows: 19;
    width: calc(100% + 0.5rem);
    max-width: 26rem;
    margin: 6.9rem auto 0;
    translate: 0.25rem 0;
  }

  /* The film under the board: a film's proportions, not a phone's whole screen. */
  .hero__stage > .film {
    width: min(68%, 17rem);
    margin-top: 5rem;
  }

  .spot {
    --sx: var(--tx);
    --sy: var(--ty);
    --ss: var(--ts);
  }

  .spot--wide {
    display: none;
  }

  /* The studio's line is centred right above the lamp now: its cable stops short of the words. */
  .lamp {
    --cable: 1.1rem;
    top: -6rem;
    left: calc(49% - 3.6rem);
    scale: 0.9;
  }

  .cord {
    top: -4.2rem;
    left: 0.1rem;
  }

  .board-tape {
    left: auto;
    right: 0.25rem;
    bottom: -1.3rem;
    font-size: 1.2rem;
  }

  .hero__foot {
    margin-top: 3.5rem;
  }

  .hero__sub {
    font-size: 1rem;
  }

  /* Three ways in: two side by side, and the one with the longest name under them. */
  .hero__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    width: 100%;
    margin-top: 1.5rem;
  }

  .hero__actions .btn {
    min-width: 0;
    padding-inline: 0.75rem;
  }

  .hero__actions .btn:last-child {
    grid-column: 1 / -1;
  }

  /* The reel: one film in the hand, its neighbours' edges at the sides. */
  .reel {
    --fw: min(62vw, 16rem);
    --step: calc(var(--fw) * 0.84);
  }

  .reel__rail {
    inset-inline: calc(var(--gutter) * -1);
  }

  .reel__rail::before,
  .reel__rail::after {
    display: none;
  }

  .reel__lead {
    font-size: 1.05rem;
  }

  .js .film__key--sound[aria-pressed="false"] .film__key-note {
    font-size: 1rem;
  }

  /* Where to start: a deck in the hand, swiped sideways. */
  .picks-section .wrap {
    width: 100%;
  }

  .picks-section .section-head {
    width: min(100% - 2 * var(--gutter), var(--wrap));
    margin-inline: auto;
    margin-bottom: 1rem;
  }

  .picks {
    display: flex;
    gap: 1rem;
    max-width: none;
    padding: 2.4rem var(--gutter) 2.25rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .picks::-webkit-scrollbar {
    display: none;
  }

  .pick {
    flex: 0 0 min(80%, 20rem);
    scroll-snap-align: center;
  }

  .pick .card {
    transition: transform 0.5s var(--spring), box-shadow 0.3s ease;
  }

  .pick.is-front .card {
    --tilt: 0deg;
  }

  .deck-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: -0.75rem;
  }

  .deck-dots i {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--chalk-3);
    transition: background-color 0.25s ease, scale 0.25s ease;
  }

  .deck-dots i.is-on {
    background: var(--lamp);
    scale: 1.35;
  }

  .card__name {
    font-size: 1.55rem;
  }

  /* Showroom: the words, then the screens to swipe through. */
  .showroom {
    padding-block: 3.75rem 3.5rem;
  }

  .showroom__grid {
    gap: 2rem;
  }

  /* Sized to the phone's width, so a longer name (המעשרות שלי) still fits on one line beside its icon. */
  .showroom__name {
    margin-top: 1.4rem;
    font-size: clamp(2rem, 10.5vw, 3.5rem);
  }

  .showroom__icon {
    width: 3.4rem;
  }

  .showroom__lead {
    margin-top: 1.25rem;
    font-size: 1.35rem;
  }

  .showroom__actions {
    display: contents;
  }

  .showroom__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .showroom__light {
    display: none;
  }

  .showroom__stage {
    margin-inline: calc(var(--gutter) * -1);
    padding-bottom: 0;
  }

  .showroom__stage::before {
    content: "";
    position: absolute;
    inset: -10% 0 10%;
    background: radial-gradient(closest-side, rgb(255 222 160 / 0.14), transparent 75%);
    pointer-events: none;
  }

  .screen--main .screen__note {
    margin-top: 1.4rem;
  }

  .screen--0 .screen__note,
  .screen--2 .screen__note {
    translate: 0 0;
  }

  .screen--0 .phone,
  .screen--2 .phone {
    margin-bottom: 0;
  }

  .screen .screen__note {
    margin-top: 1.25rem;
  }

  .screens {
    justify-content: flex-start;
    align-items: stretch;
    gap: 1.25rem;
    padding: 1.5rem var(--gutter) 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .screens::-webkit-scrollbar {
    display: none;
  }

  .screen {
    flex: 0 0 auto;
    scroll-snap-align: center;
  }

  .screen--main {
    order: -1;
  }

  .screen--0,
  .screen--2 {
    margin: 0;
  }

  .screen--0 .phone,
  .screen--2 .phone {
    rotate: 0deg;
  }

  .phone,
  .screen--main .phone {
    width: min(58vw, 13.5rem);
  }

  .screen .screen__note {
    rotate: -2deg;
  }

  .plinth {
    display: none;
  }

  .showroom__stores {
    display: grid;
    width: 100%;
    margin-top: 1.5rem;
  }

  .store {
    justify-content: center;
    min-height: 3.25rem;
  }

  .showroom__site {
    margin-top: 1.25rem;
  }

  .showroom .deck-dots {
    margin-top: 0.5rem;
  }

  /* Commission: a full-width work order with big targets. */
  .commission .wrap {
    width: min(100% - 1.5rem, var(--wrap));
  }

  .commission__main {
    padding: 2.25rem 1.5rem 1.75rem;
  }

  .commission__title {
    font-size: 2.25rem;
  }

  .commission__text {
    font-size: 1.025rem;
  }

  .commission__actions {
    display: grid;
    justify-items: center;
  }

  .commission__actions .btn {
    width: 100%;
  }

  .commission__order {
    padding: 1.6rem 1.5rem 1.4rem;
  }

  .commission__kinds {
    grid-template-columns: minmax(0, 1fr);
  }

  .commission__kinds a {
    font-size: 1.2rem;
  }

  .idea-nudge {
    padding-inline: var(--gutter);
  }

  /* Follow: three plain buttons, full width. */
  .follow__actions {
    display: grid;
    width: 100%;
  }

  .social {
    min-height: 3.25rem;
  }

  /* Projects: the lever is the whole width, a thumb's control. */
  .sorter {
    gap: 0.75rem;
  }

  .lever {
    width: 100%;
  }

  .finder {
    width: 100%;
    margin: 0;
  }

  .stock {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .stock__item--flag {
    grid-column: auto;
  }

  .stock__item--flag .card {
    display: flex;
    padding: 0.85rem 0.85rem 1.25rem;
  }

  .stock__item--flag .card__body {
    padding: 1rem 0.35rem 0;
  }



  .stock__item--flag .card__summary {
    display: none;
  }

  .stock__slot a {
    min-height: 10rem;
  }

  .card {
    --tilt: 0deg !important;
  }

  /* A touch smaller, and tucked in so a swiped row never cuts it off. */
  .card__new {
    top: 0.85rem;
    right: -0.6rem;
    width: 3.1rem;
    height: 3.1rem;
    font-size: 0.975rem;
  }

  .door--wide {
    display: grid;
  }

  .door__button {
    justify-content: center;
  }

  /* Work: the pitch, then the clipboard edge to edge. */
  .clipboard {
    width: calc(100% + 1rem);
    margin-inline: -0.5rem;
    padding: 2.3rem 0.5rem 0.5rem;
    border-radius: 0.7rem;
  }

  .clipboard__clip {
    width: 7.5rem;
    height: 2.8rem;
  }

  .sheet {
    padding: 1.6rem 1.2rem 1.4rem;
  }

  .sheet__pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .sheet__send {
    display: grid;
  }

  .sheet__send .btn {
    width: 100%;
  }

  .proof__list,
  .cases__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .proof__link {
    padding: 1.15rem 1.1rem;
  }

  .steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .step {
    padding: 0 3.9rem 2rem 0;
  }

  .step::after,
  .step:nth-child(2)::after {
    display: block;
  }

  .step:not(:last-child)::after {
    top: 3.2rem;
    right: 1.45rem;
    left: auto;
    bottom: 0.3rem;
    border-top: 0;
    border-right: 2px dotted var(--chalk-3);
  }

  .step:last-child {
    padding-bottom: 0;
  }

  .closing__card {
    rotate: 0deg;
  }

  .closing__actions {
    display: grid;
  }

  /* About */
  .entry {
    rotate: 0deg;
    padding: 2rem 1.5rem;
  }

  .ways__list,
  .doors,
  .after__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .ways__list {
    gap: 2rem;
  }

  /* Ideas: the lit slot first, small, then the words. */
  .ideas-top {
    gap: 2rem;
  }

  .slot {
    order: -1;
  }

  .slot__board {
    --u: 1.8rem;
    width: min(78%, 17rem);
  }

  .ideas-copy__actions {
    display: grid;
  }

  .ideas-copy__actions .btn {
    width: 100%;
  }

  /* 404 */
  .lost__body {
    min-height: 0;
    padding-block: 3.5rem 1rem;
  }

  .lost__actions {
    display: grid;
    width: 100%;
    justify-items: center;
  }

  .lost__actions .btn {
    width: 100%;
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1.5rem;
  }

  .footer__col:last-child {
    grid-column: 1 / -1;
  }

  .footer__legal {
    display: grid;
  }
}

@media (max-width: 22.5rem) {
  .lever__pos span {
    font-size: 0.925rem;
  }
}

/* ==========================================================================
   Reduced motion: things are simply where they belong
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .card {
    transform: none !important;
  }
}