/* Name Badges page only (name-badges.html). Prefix .nb-.
   The scenes, top to bottom: the badge on the tailgate (hero), the flashlight on the tailgate,
   the shirt on the hook, the badge rack, the driveway tap, the time clock wall, the shop fridge,
   the box on the tailgate, the crew list clipboard. The sample badges themselves are SVG
   symbols in the page (#nbDanny, #nbMiguel, #nbTyler, #nbJake, #nbCody, #nbBack, #nbClip).
   Every scene is drawn finished here; js/pages/name-badges.js only plays it. */

/* ---------- shared bits ---------- */
.nb-after {
  max-width: 44em;
  margin: clamp(22px, 3vw, 34px) auto 0;
  font-weight: 600;
  line-height: 1.55;
  text-align: center;
  color: var(--fc-ink-2);
}
.nb-after strong { font-weight: 800; color: var(--fc-ink); }
.nb-proofline { font-size: 0.9375rem; line-height: 1.5; color: var(--fc-ink-2); }
.nb-proofline strong { font-weight: 800; color: var(--fc-ink); }
.nb-punch { font-size: clamp(1.2rem, 1rem + 0.7vw, 1.5rem); font-weight: 800; line-height: 1.3; color: var(--fc-ink); }

/* a little kraft hang tag on a string (the "Sample" tag on a badge clip) */
.nb-hangtag {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 7px;
  border: var(--fc-line);
  border-radius: 4px 10px 10px 4px;
  background: var(--fc-kraft);
  box-shadow: 2px 2px 0 var(--fc-ink);
  color: var(--fc-ink);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(-9deg);
  transform-origin: 100% 50%;
}
.nb-hangtag::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border: 2px solid var(--fc-ink);
  border-radius: 50%;
  background: var(--fc-paper);
}
.nb-hangtag::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: var(--string, 26px);
  height: 2px;
  background: var(--fc-ink);
  transform: rotate(var(--string-a, -24deg));
  transform-origin: 0 50%;
}

/* ==========================================================================
   1. Hero: the badge on the tailgate
   ========================================================================== */
/* the deck's two lines at every width: the accent phrase never splits, and when line 1 is too
   wide for the column it breaks as "The crew / badge that", never leaving "that" alone */
.nb-h1 .fc-mark-line,
.nb-h1__keep { white-space: nowrap; }
.nb-sub { margin-bottom: 8px; }
.nb-sub--2 { margin-bottom: 18px; }
.nb-heroproof { max-width: 36em; margin: 0 0 24px; font-size: 0.9rem; line-height: 1.55; color: var(--fc-ink-2); }
.nb-heroproof .fc-proofchip { margin-right: 4px; vertical-align: 1px; }
.nb-cue { margin-top: 14px; font-size: 0.9375rem; }
/* a standalone link: a 44px tap target without moving the lines around it */
.nb-cue .fc-link { display: inline-block; padding-block: 13px; margin-block: -13px; }
/* the spec line lives in #inside, under the punch line: a short spec strip on a dashed rule */
.nb-spec { max-width: 30em; margin-top: 18px; padding-top: 12px; border-top: 2px dashed rgba(22, 58, 37, 0.35); font-size: 0.875rem; font-weight: 700; line-height: 1.5; letter-spacing: 0.01em; color: var(--fc-ink-2); }
/* each spec item stays whole, so the line wraps between items, never inside one */
.nb-spec span { white-space: nowrap; }

.nb-tg { width: min(100%, 540px); margin: 0 auto; container-type: inline-size; }
.nb-tg__scene {
  position: relative;
  aspect-ratio: 540 / 580;
  border: var(--fc-line);
  border-radius: var(--fc-r3);
  overflow: hidden;
  background: var(--fc-sky-2);
  box-shadow: var(--fc-chunk-lg);
}
.nb-tg__bg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the badge hangs from its clip on the rack bar, over the tailgate */
.nb-tg__hang { position: absolute; z-index: 3; left: 7.4cqw; top: 5.4cqw; width: 43.7cqw; }
.nb-tg__clip { position: absolute; z-index: 2; top: 0; left: 50%; width: 6.7cqw; height: 11.7cqw; transform: translateX(-50%); }
.nb-tg__tag { top: 4.6cqw; left: 16%; --string: 5.6cqw; --string-a: -26deg; }
.nb-tg__badge {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 11.3cqw;
  padding: 0;
  border: 0;
  border-radius: 6%;
  background: none;
  cursor: pointer;
  perspective: 1100px;
  transition: transform 0.3s var(--fc-bounce);
}
@media (hover: hover) and (pointer: fine) { .nb-tg__badge:hover { transform: translateY(-3px) rotate(-1deg); } }
.nb-tg__badge:focus-visible { outline-offset: 6px; }
.nb-flip {
  position: relative;
  display: block;
  aspect-ratio: 230 / 365;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.45, 0.05, 0.35, 1);
}
.nb-tg__badge[aria-pressed="true"] .nb-flip { transform: rotateY(180deg); }
.nb-flip__face {
  position: absolute;
  inset: 0;
  border-radius: 7% / 4.4%;
  box-shadow: 5px 5px 0 var(--fc-ink);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* the faces also swap visibility at the half turn: WebKit does not always honor
   backface-visibility on a face that holds an SVG */
.nb-flip__front { transition: visibility 0s linear 0.3s; }
.nb-flip__back { visibility: hidden; transform: rotateY(180deg); transition: visibility 0s linear 0.3s; }
.nb-tg__badge[aria-pressed="true"] .nb-flip__front { visibility: hidden; }
.nb-tg__badge[aria-pressed="true"] .nb-flip__back { visibility: visible; }
.nb-flip__face svg { display: block; width: 100%; height: 100%; }
.nb-tg__hint { position: absolute; right: -9.6cqw; bottom: -4.6cqw; width: 7.4cqw; height: 7.4cqw; opacity: 0.85; transform: rotate(-18deg); pointer-events: none; }
/* the reflection on the tailgate paint below */
.nb-tg__refl {
  position: absolute;
  z-index: 1;
  left: 7.4cqw;
  top: 86.5cqw;
  width: 43.7cqw;
  height: 9.8cqw;
  overflow: hidden;
  opacity: 0.38;
  -webkit-mask-image: linear-gradient(#000, transparent 92%);
  mask-image: linear-gradient(#000, transparent 92%);
  pointer-events: none;
}
/* mirrored about its own middle, so the badge's bottom edge (the SHMOCARD footer) meets the top
   of the reflection box, right under the badge */
.nb-tg__rface { position: absolute; top: 0; left: 0; display: block; width: 100%; height: auto; aspect-ratio: 230 / 365; transform: scaleY(-1); transform-origin: 50% 50%; }
.nb-tg__rface--back,
.nb-tg.is-flipped .nb-tg__rface--front { display: none; }
.nb-tg.is-flipped .nb-tg__rface--back { display: block; }
/* rings between the badge and the phone */
.nb-tg__rings { --x: 58.4%; --y: 50%; --rs: 19cqw; z-index: 4; }
.nb-tg.is-live .nb-tg__rings i { animation-iteration-count: infinite; }
.nb-tg.is-paused .nb-tg__rings i,
.nb-tg.is-still .nb-tg__rings i { animation: none; }
/* the homeowner's phone, standing on the tailgate on its lock screen */
.nb-tg__phone { position: absolute; z-index: 3; left: 66cqw; top: 38cqw; transform: rotate(-3deg); }
.nb-tg__ph { --pw: 27.6cqw; box-shadow: 5px 5px 0 var(--fc-ink); }
.nb-tg__ph::before { top: 30%; }
.nb-tg__ph .fc-phone__screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--pw) * 0.2) calc(var(--pw) * 0.06) calc(var(--pw) * 0.06);
  border-radius: calc(var(--pw) * 0.13);
}
.nb-tg__ph .fc-phone__notch { top: calc(var(--pw) * 0.045); width: 30%; height: calc(var(--pw) * 0.075); margin-left: -15%; }
.nb-lock__ico { width: calc(var(--pw) * 0.075); height: auto; }
.nb-tg__ph .nb-lock__time { margin-top: calc(var(--pw) * 0.02); font-size: calc(var(--pw) * 0.3); }
.nb-lock__date { margin-top: calc(var(--pw) * 0.02); font-size: calc(var(--pw) * 0.075); font-weight: 700; color: var(--fc-chalk-2); white-space: nowrap; }
.nb-tg__banner {
  display: flex;
  align-items: center;
  gap: calc(var(--pw) * 0.035);
  width: 100%;
  margin-top: calc(var(--pw) * 0.13);
  padding: calc(var(--pw) * 0.045) calc(var(--pw) * 0.04);
  border: var(--fc-line);
  border-radius: calc(var(--pw) * 0.09);
  background: var(--fc-white);
  box-shadow: 0 4px 0 rgba(8, 24, 14, 0.4);
  color: var(--fc-ink);
}
.nb-tg__appico { display: grid; flex: none; place-items: center; width: calc(var(--pw) * 0.14); aspect-ratio: 1; border: 2px solid var(--fc-ink); border-radius: 26%; background: var(--fc-sun); }
.nb-tg__appico svg { width: 64%; height: auto; }
.nb-tg__btext { display: grid; min-width: 0; line-height: 1.2; }
.nb-tg__btext b { font-size: calc(var(--pw) * 0.07); font-weight: 800; line-height: 1.15; }
.nb-tg__btext span { margin-top: 2px; font-size: calc(var(--pw) * 0.054); font-weight: 600; line-height: 1.15; color: var(--fc-ink-2); }
.nb-lock__quick { display: flex; justify-content: space-between; width: 100%; margin-top: auto; padding: 0 calc(var(--pw) * 0.04); }
.nb-lock__quick i { width: calc(var(--pw) * 0.15); aspect-ratio: 1; border: 2px solid rgba(255, 248, 230, 0.7); border-radius: 50%; background: rgba(10, 30, 18, 0.45); }
.nb-lock__home { width: 38%; height: 4px; margin-top: calc(var(--pw) * 0.05); border-radius: 4px; background: var(--fc-chalk); }
.nb-tg.is-live:not(.is-paused) .nb-tg__banner { animation: nb-banner 4.8s var(--fc-ease) infinite; }
@keyframes nb-banner {
  0%, 8% { opacity: 0; transform: translateY(-70%) scale(0.94); }
  18%, 84% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(-40%) scale(0.96); }
}
.nb-tg__pause { position: absolute; z-index: 6; right: 2.2cqw; bottom: 2.2cqw; }
.nb-tg__cap {
  min-height: 2.6em;
  margin-top: 18px;
  font-family: var(--fc-hand);
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
  color: var(--fc-ink);
}
/* narrow scenes: a bigger phone, so its lock screen still reads; the pause button moves to the
   free bottom-left corner, off the phone */
@container (max-width: 440px) {
  .nb-tg__phone { left: 62.5cqw; top: 31cqw; }
  .nb-tg__ph { --pw: 32.5cqw; }
  .nb-tg__rings { --x: 57%; --y: 46%; --rs: 15cqw; }
  .nb-tg__hint { display: none; }
  .nb-tg__pause { right: auto; left: 2.2cqw; }
}
@media (max-width: 999px) { .nb-hero .fc-phero__object { margin-top: 6px; } }
@media (max-width: 600px) {
  .nb-sub { margin-bottom: 6px; font-size: 1rem; }
  .nb-sub--2 { margin-bottom: 12px; }
  .nb-heroproof { margin-bottom: 16px; font-size: 0.84rem; line-height: 1.45; }
  .nb-heroproof .fc-proofchip { display: inline; padding: 0; border: 0; background: none; font-size: inherit; font-weight: 800; letter-spacing: 0; text-transform: none; white-space: normal; color: var(--fc-ink); }
  .nb-heroproof .fc-proofchip::before { display: inline-block; margin-right: 5px; vertical-align: -1px; }
}

/* ==========================================================================
   2. The reveal: the flashlight on the tailgate
   ========================================================================== */
.nb-bench { margin: 0; container-type: inline-size; }
.nb-bench__scene {
  --nb-tilt: -6deg;
  --bdl: 23.57cqw;
  --bdt: 19.3cqw;
  --bdw: 24.29cqw;
  --bx: 36.7cqw;
  --by: 48.1cqw;
  --br: 8.9cqw;
  position: relative;
  aspect-ratio: 700 / 520;
  border: var(--fc-line);
  border-radius: var(--fc-r2);
  overflow: hidden;
  background: var(--fc-clover-2);
  box-shadow: var(--fc-chunk-lg);
}
.nb-bench__bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.nb-bench__bg--tall { display: none; }
.nb-bench__badge { position: absolute; z-index: 1; left: var(--bdl); top: var(--bdt); width: var(--bdw); transform: rotate(var(--nb-tilt)); }
.nb-bench__print { display: block; width: 100%; height: auto; border-radius: 7% / 4.4%; box-shadow: 5px 6px 0 rgba(8, 20, 12, 0.85); }
.nb-bench__xray { position: absolute; inset: 0; border-radius: 7% / 4.4%; clip-path: circle(calc(var(--br) * 0.92) at 50% 75%); }
.nb-bench__xray svg { display: block; width: 100%; height: 100%; }
.nb-chipfx__rip { opacity: 0; transform-box: view-box; transform-origin: 115px 274px; }
.nb-chipfx.is-fire .nb-chipfx__rip { animation: nb-chip 1.1s var(--fc-ease) 1; }
.nb-chipfx.is-fire .nb-chipfx__rip + .nb-chipfx__rip { animation-delay: 0.28s; }
@keyframes nb-chip {
  0% { opacity: 0.95; transform: scale(0.55); }
  100% { opacity: 0; transform: scale(1.9); }
}
/* dusk: everything dark but the beam */
.nb-bench__dark {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(circle at var(--bx) var(--by), rgba(255, 233, 168, 0.16) 0, rgba(255, 233, 168, 0.05) calc(var(--br) * 0.86), rgba(9, 20, 26, 0.66) calc(var(--br) * 1.22));
  transition: opacity 0.55s ease;
  pointer-events: none;
}
.nb-bench.is-lit .nb-bench__dark { opacity: 0; }
/* the clamp work light */
.nb-bench__lamp { position: absolute; z-index: 4; top: 4.2cqw; left: -0.6cqw; width: 20cqw; pointer-events: none; }
.nb-bench__lamp svg { position: relative; display: block; width: 100%; height: auto; }
.nb-bench__bulb { transition: fill 0.3s; }
.nb-bench.is-lit .nb-bench__bulb { fill: var(--fc-glow); }
.nb-bench__cone {
  position: absolute;
  top: 55%;
  left: 55%;
  width: 90cqw;
  height: 80cqw;
  background: radial-gradient(ellipse at 0 0, rgba(255, 233, 168, 0.5), rgba(255, 233, 168, 0.12) 45%, transparent 70%);
  opacity: 0;
  transition: opacity 0.55s ease;
}
.nb-bench.is-lit .nb-bench__cone { opacity: 1; }
/* the repair tag on its wire */
.nb-bench__tag { position: absolute; z-index: 4; left: 64.3cqw; top: 21.2cqw; width: 31cqw; padding-top: 0; --tilt: 0.8deg; }
.nb-bench__tag::before { display: none; }
.nb-bench__tag .fc-tag__body { gap: 4px; padding: 36px 16px 16px; }
.nb-bench__tag .fc-tag__body::before { background: var(--fc-clover-2); }
.nb-bench__tag p { font-family: var(--fc-mono); font-size: clamp(0.72rem, 1.75cqw, 0.86rem); line-height: 1.35; }
.nb-bench__tag b { font-weight: 800; letter-spacing: 0.04em; }
/* the flashlight: its beam is the button, the body rides along */
.nb-bench__torch {
  position: absolute;
  z-index: 5;
  left: calc(var(--bx) - var(--br));
  top: calc(var(--by) - var(--br));
  width: calc(var(--br) * 2);
  height: calc(var(--br) * 2);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.nb-bench__torch.is-grab { cursor: grabbing; }
.nb-bench__torch:focus-visible { outline: 3px solid var(--fc-sun); outline-offset: 4px; }
.nb-bench__beam { position: absolute; inset: 0; border: 2px dashed rgba(255, 233, 168, 0.85); border-radius: 50%; box-shadow: 0 0 0 2px rgba(9, 20, 26, 0.35); }
.nb-bench__body {
  position: absolute;
  left: calc(var(--tb-x, 85%) - 19%);
  top: 85%;
  width: 38%;
  height: auto;
  transform: rotate(var(--tb-a, -45deg));
  transform-origin: 50% 0;
  filter: drop-shadow(4px 4px 0 rgba(8, 20, 12, 0.7));
}
.nb-bench__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 18px; }
.nb-bench__switch { display: grid; place-items: center; width: 68px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: none; cursor: pointer; }
.nb-bench__track { position: relative; width: 62px; height: 32px; border: var(--fc-line); border-radius: 999px; background: var(--fc-rubber); box-shadow: 3px 3px 0 var(--fc-ink); transition: background-color 0.25s; }
.nb-bench__knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border: 2px solid var(--fc-ink); border-radius: 50%; background: var(--fc-steel-a); transition: transform 0.28s var(--fc-bounce); }
.nb-bench__switch[aria-checked="true"] .nb-bench__track { background: var(--fc-sun); }
.nb-bench__switch[aria-checked="true"] .nb-bench__knob { transform: translateX(30px); }
.nb-bench__swlabel { font-family: var(--fc-mono); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.16em; color: var(--fc-ink); }
.nb-bench__cap { margin-left: auto; font-family: var(--fc-hand); font-size: 1.15rem; line-height: 1.3; color: var(--fc-ink); }
@container (max-width: 520px) {
  .nb-bench__scene {
    --bdl: 12cqw;
    --bdt: 31cqw;
    --bdw: 41.9cqw;
    --bx: 34.7cqw;
    --by: 80.7cqw;
    --br: 14cqw;
    aspect-ratio: 358 / 570;
  }
  .nb-bench__bg--wide { display: none; }
  .nb-bench__bg--tall { display: block; }
  .nb-bench__lamp { top: 7.5cqw; width: 30cqw; }
  .nb-bench__torch { --tb-x: 15%; --tb-a: 45deg; }
  .nb-bench__tag { left: 43.3cqw; top: 94.4cqw; width: 53cqw; }
  .nb-bench__tag .fc-tag__body { padding: 34px 12px 14px; }
  .nb-bench__tag p { font-size: 0.72rem; }
  .nb-bench__cap { margin-left: 0; flex-basis: 100%; }
}

/* ==========================================================================
   3. Why a badge: the shirt on the hook, the box on the dash
   ========================================================================== */
.nb-shop {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr);
  margin: 0;
  border: var(--fc-line);
  border-radius: var(--fc-r2);
  overflow: hidden;
  background: var(--fc-shopwall);
  box-shadow: var(--fc-chunk-lg);
}
.nb-shop__wall { position: relative; aspect-ratio: 760 / 520; border-right: var(--fc-line); container-type: inline-size; }
.nb-shop__cab { position: relative; min-height: 100%; background: var(--fc-asphalt-2); }
.nb-shop__bg,
.nb-shop__dash { position: absolute; inset: 0; width: 100%; height: 100%; }
.nb-shop__keys { position: absolute; left: 24.3cqw; top: 13.4cqw; width: 11.8cqw; height: auto; transform-origin: 50% 4%; }
.nb-shop__muffs { position: absolute; left: 79.6cqw; top: 13.2cqw; width: 14.5cqw; height: auto; }
.nb-shop__tee { position: absolute; left: 36.8cqw; top: 11.6cqw; width: 39.5cqw; transform-origin: 50% 1%; }
.nb-shop__shirt { display: block; width: 100%; height: auto; filter: drop-shadow(5px 5px 0 rgba(22, 58, 37, 0.3)); }
.nb-shop.is-playing .nb-shop__tee { animation: nb-sway 3.6s ease-out 1; }
.nb-shop.is-playing .nb-shop__keys { animation: nb-sway 2.8s ease-out 0.3s 1; }
@keyframes nb-sway {
  0% { transform: rotate(4.5deg); }
  22% { transform: rotate(-3deg); }
  44% { transform: rotate(1.8deg); }
  66% { transform: rotate(-0.9deg); }
  84% { transform: rotate(0.4deg); }
  100% { transform: rotate(0deg); }
}
.nb-shop__pin { position: absolute; left: 57%; top: 27%; width: 19%; }
.nb-shop__badge {
  position: relative;
  display: block;
  width: 100%;
  min-width: 44px;
  padding: 0;
  border: 0;
  border-radius: 8%;
  background: none;
  cursor: pointer;
  transform: rotate(3deg);
  transition: transform 0.25s var(--fc-bounce);
}
.nb-shop__badge svg { display: block; width: 100%; height: auto; border-radius: 7% / 4.4%; box-shadow: 3px 3px 0 var(--fc-ink); }
.nb-shop__badge::before {
  content: "";
  position: absolute;
  top: -7%;
  left: 38%;
  width: 24%;
  height: 11%;
  border: 2px solid var(--fc-ink);
  border-radius: 3px;
  background: linear-gradient(var(--fc-steel-a), var(--fc-steel-b));
}
/* hover only where there is a real pointer: on touch, :hover sticks after a tap and the second
   tap (which unpins the caption) would show no change */
@media (hover: hover) and (pointer: fine) { .nb-shop__badge:hover { transform: rotate(0deg) scale(1.07); } }
.nb-shop.is-active .nb-shop__badge { transform: rotate(0deg) scale(1.07); }
.nb-shop .nb-shop__badge[aria-pressed="true"] { transform: rotate(0deg) scale(1.1); }
/* the ring on the green shirt: sun, which reads against the tee (ink would not) */
.nb-shop__badge:focus-visible { outline-color: var(--fc-sun); }
.nb-shop__ripple { --x: 50%; --y: 50%; --rs: 190%; z-index: -1; }
.nb-shop__ripple i { animation: none; opacity: 0; }
.nb-shop__ripple.is-fire i { animation: fc-ripple 1.5s var(--fc-ease) 1; }
.nb-shop__ripple.is-fire i:nth-child(2) { animation-delay: 0.3s; }
.nb-shop__ripple.is-fire i:nth-child(3) { animation-delay: 0.6s; }
.nb-shop__cap {
  position: absolute;
  z-index: 3;
  left: 73.5cqw;
  top: 33cqw;
  width: 24cqw;
  font-family: var(--fc-hand);
  font-size: clamp(0.95rem, 2.4cqw, 1.2rem);
  line-height: 1.25;
  color: var(--fc-ink);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s, transform 0.3s var(--fc-bounce);
  pointer-events: none;
}
.nb-shop__cap::before {
  content: "";
  position: absolute;
  top: 0.4em;
  right: 100%;
  width: 3.4cqw;
  height: 2px;
  margin-right: 6px;
  background: var(--fc-ink);
  transform: rotate(-16deg);
}
.nb-shop.is-active .nb-shop__cap,
.nb-shop__wall:has(.nb-shop__badge:focus-visible) .nb-shop__cap { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .nb-shop__wall:has(.nb-shop__badge:hover) .nb-shop__cap { opacity: 1; transform: none; } }
.nb-shop__boxcap {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 5%;
  font-family: var(--fc-hand);
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.15rem);
  line-height: 1.25;
  text-align: center;
  color: var(--fc-chalk);
}
.nb-shop__words { margin-top: 4px; }
.nb-shop__body { display: grid; gap: 14px; }
.nb-shop .nb-shop__sample { top: 12px; right: 14px; }
.nb-bench .nb-bench__sample { position: absolute; z-index: 6; top: 12px; right: 12px; }
.nb-shop__kicker { font-weight: 700; color: var(--fc-ink); }
/* wide screens: the H2 runs across, the six short paragraphs split into two columns under it
   (the kit's head-left recipe left a tall empty column under a two-line H2 here) */
@media (min-width: 960px) {
  .nb-shop__words { grid-template-columns: minmax(0, 1fr); max-width: none; }
  .nb-shop__words > :first-child { grid-row: auto; }
  .nb-shop__body { display: block; columns: 2; column-gap: clamp(32px, 5vw, 72px); }
  .nb-shop__body > p { margin-bottom: 14px; break-inside: avoid; }
}
/* phones: a taller wall, so the caption has its own band between the shirt hem and the floor
   edge; the tee hangs on the rail, the keys hang off the door knob (off the window) */
@media (max-width: 759px) {
  .nb-shop { grid-template-columns: minmax(0, 1fr); }
  .nb-shop__wall { aspect-ratio: 358 / 500; border-right: 0; border-bottom: var(--fc-line); }
  .nb-shop__cab { aspect-ratio: 358 / 330; min-height: 0; }
  .nb-shop__tee { left: 17cqw; top: 24.6cqw; width: 66cqw; }
  .nb-shop__keys { left: 14.4cqw; top: 74.6cqw; width: 14cqw; }
  .nb-shop__muffs { left: 81cqw; top: 27.4cqw; width: 18cqw; }
  .nb-shop__pin { width: 21%; }
  .nb-shop__cap { left: 31cqw; right: 2cqw; top: auto; bottom: 15.4cqw; width: auto; font-size: clamp(0.9rem, 4.4cqw, 1rem); text-align: center; text-wrap: balance; }
  .nb-shop__cap::before { display: none; }
}

/* ==========================================================================
   4. The gallery: the badge rack, the flip side
   ========================================================================== */
.nb-gallery__head { max-width: 820px; }
.nb-rack { margin-top: clamp(4px, 1vw, 12px); }
.nb-rack > .fc-wrap:first-child { text-align: center; }
.nb-rack__eyebrow { margin-bottom: 30px; }
.nb-rack__board {
  position: relative;
  padding: 50px 0 38px;
  border-block: var(--fc-line);
  background-color: var(--fc-peg);
  background-image:
    radial-gradient(circle, var(--fc-ink) 0 2.4px, rgba(22, 58, 37, 0.3) 2.8px 3.6px, transparent 4px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 30%);
  background-size: 28px 28px, 100% 100%;
  background-position: 14px 14px, 0 0;
  box-shadow: inset 0 -8px 0 rgba(122, 75, 42, 0.14);
}
.nb-rack__tape { position: absolute; z-index: 3; top: -15px; left: 50%; max-width: calc(100% - 32px); text-align: center; transform: translateX(-50%) rotate(-1deg); }
@media (max-width: 600px) { .nb-rack__tape { width: max-content; font-size: 0.7rem; letter-spacing: 0.05em; } }
.nb-rack__viewport { overflow: hidden; }
.nb-rack__viewport:focus-visible { outline-offset: -4px; }
.nb-rack__track {
  --gap: clamp(22px, 2.6vw, 36px);
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: nb-rack 90s linear infinite;
}
.nb-rack.is-paused .nb-rack__track { animation-play-state: paused; }
@keyframes nb-rack { to { transform: translateX(-50%); } }
.nb-rack__item {
  --r: -2deg;
  position: relative;
  flex: none;
  width: clamp(112px, 10.4vw, 152px);
  margin-right: var(--gap);
  padding-top: 24px;
  transform: rotate(var(--r));
  transform-origin: 50% 0;
}
.nb-rack__item:nth-child(2n) { --r: 2.4deg; }
.nb-rack__item:nth-child(3n) { --r: -0.8deg; }
.nb-rack__item:hover { animation: nb-swing 1s ease-out 1; }
@keyframes nb-swing {
  0% { transform: rotate(var(--r)); }
  25% { transform: rotate(calc(var(--r) + 5deg)); }
  55% { transform: rotate(calc(var(--r) - 3deg)); }
  80% { transform: rotate(calc(var(--r) + 1deg)); }
  100% { transform: rotate(var(--r)); }
}
.nb-rack__item img { display: block; width: 100%; height: auto; aspect-ratio: 460 / 730; border: 2px solid var(--fc-ink); border-radius: 9px; background: var(--fc-sheet); box-shadow: 4px 4px 0 var(--fc-ink); color: transparent; font-size: 0; }
.nb-rack__hook { position: absolute; z-index: 2; top: 0; left: 50%; width: 22px; height: 34px; margin-left: -11px; }
.nb-rack__hook::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 6px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--fc-ink);
  border-radius: 50%;
  background: var(--fc-steel-c);
}
.nb-rack__hook::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 3px;
  width: 16px;
  height: 26px;
  border: 3.5px solid var(--fc-steel-c);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  filter: drop-shadow(1px 0 0 var(--fc-ink)) drop-shadow(-1px 0 0 var(--fc-ink)) drop-shadow(0 1px 0 var(--fc-ink));
}
.nb-rack__bar { display: flex; align-items: center; justify-content: center; gap: 12px 18px; margin-top: 22px; }
.nb-rack__cap { max-width: 36em; font-weight: 600; line-height: 1.5; text-align: center; color: var(--fc-ink-2); }
.nb-rack__pause { flex: none; }

.nb-flipside {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
  align-items: center;
  max-width: 1000px;
  margin-top: clamp(52px, 6.5vw, 88px);
}
@media (min-width: 860px) { .nb-flipside { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); column-gap: clamp(40px, 6vw, 80px); } }
.nb-flipside__art { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 12px; }
/* the short peg rail the clip hangs from (a strip of the shop's wood trim, screwed to the wall) */
.nb-flipside__art::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(300px, 92%);
  height: 24px;
  border: var(--fc-line);
  border-radius: 4px;
  background:
    radial-gradient(circle at 14px 50%, var(--fc-steel-c) 0 3px, transparent 3.6px),
    radial-gradient(circle at calc(100% - 14px) 50%, var(--fc-steel-c) 0 3px, transparent 3.6px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0 30%, transparent 30%),
    var(--fc-board);
  box-shadow: 3px 3px 0 var(--fc-ink);
  transform: translateX(-50%);
}
.nb-flipside__hang { position: relative; width: min(220px, 58vw); padding-top: 56px; transform: rotate(2.5deg); transform-origin: 50% 0; }
.nb-flipside__hang::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: -6px;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border: 2px solid var(--fc-ink);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--fc-steel-a) 0 2px, var(--fc-steel-c) 3px);
}
.nb-flipside__clip { position: absolute; z-index: 2; top: 0; left: 50%; width: 36px; height: 63px; transform: translateX(-50%); }
.nb-flipside__tag { top: 12px; right: 60%; --string: 30px; --string-a: 14deg; }
.nb-flipside__badge { display: block; width: 100%; height: auto; border-radius: 7% / 4.4%; box-shadow: 6px 6px 0 var(--fc-ink); }
.nb-flipside__shadow { width: 56%; height: 14px; margin-top: 20px; border-radius: 50%; background: rgba(22, 58, 37, 0.16); }
@media (max-width: 600px) {
  .nb-flipside { gap: 24px; }
  .nb-flipside__hang { width: min(190px, 52vw); }
}
.nb-flipside__copy { display: grid; gap: 14px; max-width: 32em; }

/* ==========================================================================
   5. The tap: the driveway, and the lever on the trailer toolbox
   ========================================================================== */
#tap .fc-fence { margin-top: clamp(36px, 5vw, 64px); }
.nb-tap { container-type: inline-size; }
.nb-tap__scene {
  position: relative;
  aspect-ratio: 700 / 560;
  border: var(--fc-line);
  border-radius: var(--fc-r2);
  overflow: hidden;
  background: var(--fc-sky-2);
  box-shadow: var(--fc-chunk-lg);
}
.nb-tap .nb-tap__demo { top: 14px; right: auto; left: 14px; }
.nb-tap__bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.nb-tap__crew { position: absolute; z-index: 2; left: -2cqw; bottom: 0; width: 51.4cqw; aspect-ratio: 360 / 560; }
.nb-tap__torso { display: block; width: 100%; height: 100%; }
.nb-tap__badge { position: absolute; left: 53%; top: 21%; width: 20%; }
.nb-tap__badge svg { display: block; width: 100%; height: auto; }
.nb-tap__badge svg:last-child { border-radius: 7% / 4.4%; box-shadow: 3px 3px 0 var(--fc-ink); }
.nb-tap__badge .nb-tap__clip { width: 34%; margin: 0 auto -3%; }
.nb-tap__rings { --x: 40.5%; --y: 38%; --rs: 16cqw; z-index: 4; }
.nb-tap__rings i { animation: none; opacity: 0.55; }
.nb-tap__rings i:nth-child(2) { opacity: 0.35; }
.nb-tap__rings i:nth-child(3) { opacity: 0.18; }
.nb-tap.is-ring:not(.is-browser) .nb-tap__rings i { animation: fc-ripple 1.3s var(--fc-ease) 2; }
.nb-tap.is-ring:not(.is-browser) .nb-tap__rings i:nth-child(2) { animation-delay: 0.2s; }
.nb-tap.is-ring:not(.is-browser) .nb-tap__rings i:nth-child(3) { animation-delay: 0.4s; }
.nb-tap.is-run:not(.is-ring) .nb-tap__rings,
.nb-tap.is-run.is-browser:not(.nb-tap--final) .nb-tap__rings { opacity: 0; }
/* the arm and the phone: at rest (the finished state) it sits right beside the badge */
.nb-tap__arm {
  position: absolute;
  z-index: 3;
  left: 45cqw;
  top: 21cqw;
  transition: transform 0.9s var(--fc-ease);
}
.nb-tap.is-run:not(.is-in) .nb-tap__arm { transform: translate(34cqw, 30cqw) rotate(12deg); transition-duration: 0s; }
.nb-tap.is-run.is-in:not(.is-dip) .nb-tap__arm { transform: translate(3cqw, 4cqw) rotate(4deg); }
.nb-tap.is-dip:not(.is-browser) .nb-tap__arm { transform: translate(-3.4cqw, 1cqw) rotate(-3deg); transition-duration: 0.35s; }
.nb-tap__ph { --pw: 28cqw; }
.nb-tap__ph .fc-phone__screen { padding: 0; border-radius: calc(var(--pw) * 0.13); }
.nb-tap__ph .fc-phone__notch { z-index: 6; top: calc(var(--pw) * 0.04); width: 30%; height: calc(var(--pw) * 0.07); margin-left: -15%; }
.nb-tap__idle {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(var(--pw) * 0.3);
  background:
    linear-gradient(180deg, rgba(10, 30, 18, 0.62), rgba(10, 30, 18, 0.1) 46%, rgba(10, 30, 18, 0.55)),
    repeating-linear-gradient(90deg, var(--fc-screen-a) 0 34px, var(--fc-screen-b) 34px 68px);
  color: var(--fc-chalk);
  opacity: 0;
  transition: opacity 0.3s;
}
.nb-tap.is-run:not(.is-browser) .nb-tap__idle { opacity: 1; }
.nb-tap__clock { font-size: calc(var(--pw) * 0.28); font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
.nb-tap__date { margin-top: calc(var(--pw) * 0.03); font-size: calc(var(--pw) * 0.075); font-weight: 700; color: var(--fc-chalk-2); }
.nb-tap__toast {
  position: absolute;
  z-index: 3;
  top: calc(var(--pw) * 0.16);
  left: calc(var(--pw) * 0.05);
  right: calc(var(--pw) * 0.05);
  padding: calc(var(--pw) * 0.045) calc(var(--pw) * 0.05);
  border: var(--fc-line);
  border-radius: calc(var(--pw) * 0.08);
  background: var(--fc-white);
  box-shadow: 0 4px 0 rgba(8, 24, 14, 0.4);
  color: var(--fc-ink);
  font-size: calc(var(--pw) * 0.056);
  line-height: 1.35;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-160%);
  transition: opacity 0.3s, transform 0.45s var(--fc-bounce);
}
.nb-tap__toast span { display: block; font-weight: 600; color: var(--fc-ink-2); }
.nb-tap__toast b { display: block; }
.nb-tap__toast b { font-weight: 800; color: var(--fc-ballpoint); }
.nb-tap.is-toast:not(.is-browser) .nb-tap__toast { opacity: 1; transform: none; }
.nb-tap__browser {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: calc(var(--pw) * 0.14) calc(var(--pw) * 0.035) calc(var(--pw) * 0.05);
  background: var(--fc-white);
  transition: opacity 0.35s, transform 0.45s var(--fc-ease);
}
.nb-tap.is-run:not(.is-browser) .nb-tap__browser { opacity: 0; transform: translateY(10%); }
.nb-tap__urlbar {
  padding: calc(var(--pw) * 0.025) calc(var(--pw) * 0.02);
  border: 1.5px solid rgba(22, 58, 37, 0.35);
  border-radius: 999px;
  background: var(--fc-paper-2);
  font-size: calc(var(--pw) * 0.05);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--fc-ink-2);
}
.nb-tap__page { display: none; flex: 1; flex-direction: column; align-items: center; justify-content: flex-start; gap: calc(var(--pw) * 0.045); padding-top: calc(var(--pw) * 0.1); text-align: center; }
.nb-tap__vip { display: flex; }
.nb-tap--review .nb-tap__vip { display: none; }
.nb-tap--review .nb-tap__rev { display: flex; }
.nb-tap__store { font-family: var(--fc-display); font-size: calc(var(--pw) * 0.085); font-weight: 400; line-height: 1.1; letter-spacing: 0.04em; }
.nb-tap__rule { width: 34%; height: 3px; border-radius: 3px; background: var(--fc-sun); }
.nb-tap__perk { font-size: calc(var(--pw) * 0.075); font-weight: 700; line-height: 1.25; color: var(--fc-ink-2); }
.nb-tap__zone { display: grid; width: 100%; margin-top: calc(var(--pw) * 0.04); }
.nb-tap__join,
.nb-tap__done { grid-area: 1 / 1; }
.nb-tap__join {
  display: grid;
  place-items: center;
  min-height: calc(var(--pw) * 0.17);
  border: 2px solid var(--fc-ink);
  border-radius: calc(var(--pw) * 0.06);
  background: var(--fc-clover-2);
  box-shadow: 0 3px 0 var(--fc-ink);
  color: var(--fc-chalk);
  font-size: calc(var(--pw) * 0.064);
  font-weight: 800;
  letter-spacing: 0.06em;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.3s;
  opacity: 0;
}
.nb-tap.is-run:not(.is-ok) .nb-tap__join { opacity: 1; }
.nb-tap.is-press:not(.is-ok) .nb-tap__join { transform: translateY(3px); box-shadow: 0 0 0 var(--fc-ink); }
.nb-tap__done { display: flex; flex-direction: column; align-items: center; gap: calc(var(--pw) * 0.03); font-size: calc(var(--pw) * 0.07); font-weight: 800; line-height: 1.25; color: var(--fc-green-ink); transition: opacity 0.3s; }
.nb-tap.is-run:not(.is-ok) .nb-tap__done { opacity: 0; }
.nb-tap__tick { width: calc(var(--pw) * 0.13); aspect-ratio: 1; border: 2px solid var(--fc-ink); border-radius: 50%; background: var(--fc-lawn-a) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.4l2.3 2.3 4.7-5' fill='none' stroke='%23163A25' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat; }
.nb-tap__revhead { display: flex; align-items: center; gap: calc(var(--pw) * 0.03); font-size: calc(var(--pw) * 0.07); font-weight: 700; }
.nb-tap__g { display: grid; place-items: center; width: calc(var(--pw) * 0.1); aspect-ratio: 1; border: 1.5px solid var(--fc-ink); border-radius: 50%; background: var(--fc-pure); color: var(--fc-ballpoint); font-weight: 800; font-size: calc(var(--pw) * 0.065); }
.nb-tap__revstore { font-size: calc(var(--pw) * 0.08); font-weight: 800; }
.nb-tap__stars { display: flex; gap: calc(var(--pw) * 0.012); font-size: calc(var(--pw) * 0.11); line-height: 1; }
.nb-tap__stars i { font-style: normal; color: var(--fc-sun-3); -webkit-text-stroke: 1px var(--fc-ink); transition: color 0.2s, transform 0.3s var(--fc-bounce); }
.nb-tap.is-run:not(.is-stars) .nb-tap__stars i { color: var(--fc-gray-2); transform: scale(0.85); }
.nb-tap__stars i:nth-child(2) { transition-delay: 0.14s; }
.nb-tap__stars i:nth-child(3) { transition-delay: 0.28s; }
.nb-tap__stars i:nth-child(4) { transition-delay: 0.42s; }
.nb-tap__stars i:nth-child(5) { transition-delay: 0.56s; }
.nb-tap__field {
  position: relative;
  width: 100%;
  min-height: calc(var(--pw) * 0.34);
  padding: calc(var(--pw) * 0.03) calc(var(--pw) * 0.04);
  border: 1.5px solid rgba(22, 58, 37, 0.45);
  border-radius: calc(var(--pw) * 0.04);
  font-size: calc(var(--pw) * 0.058);
  line-height: 1.3;
  text-align: left;
  color: var(--fc-placeholder);
}
.nb-tap__caret { display: inline-block; width: 1.5px; height: 1.1em; margin-right: 2px; vertical-align: -0.2em; background: var(--fc-ink); }
.nb-tap.is-type .nb-tap__caret,
.nb-tap--final .nb-tap__caret { animation: nb-blink 1s steps(1) 6; }
.nb-tap.is-run:not(.is-type) .nb-tap__caret { opacity: 0; }
@keyframes nb-blink { 50% { opacity: 0; } }
.nb-tap__post { align-self: flex-end; padding: calc(var(--pw) * 0.02) calc(var(--pw) * 0.07); border-radius: 999px; background: var(--fc-ballpoint); color: var(--fc-pure); font-size: calc(var(--pw) * 0.06); font-weight: 800; }
.nb-tap__count {
  position: absolute;
  z-index: 5;
  right: 3.4cqw;
  top: 4cqw;
  padding: 0.35em 0.7em 0.3em;
  border: 3.5px solid var(--fc-green-ink);
  border-radius: 9px;
  background: rgba(255, 253, 246, 0.9);
  color: var(--fc-green-ink);
  font-family: var(--fc-mono);
  font-size: clamp(0.72rem, 2.3cqw, 1rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  white-space: nowrap;
  transform: rotate(-4deg);
  transition: opacity 0.2s, transform 0.35s var(--fc-bounce);
}
.nb-tap.is-run:not(.is-count) .nb-tap__count { opacity: 0; transform: rotate(-4deg) scale(1.7); }
/* the steel plate on the trailer toolbox, with the lever */
.nb-tap__box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 18px;
  width: 94%;
  margin: 18px auto 0;
  padding: 20px clamp(12px, 3cqw, 26px);
  border: var(--fc-line);
  border-radius: 0 0 var(--fc-r1) var(--fc-r1);
  background-color: var(--fc-steel-b);
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.4) 0 2px, transparent 2px 13px),
    repeating-linear-gradient(-45deg, rgba(22, 58, 37, 0.14) 0 2px, transparent 2px 13px);
  box-shadow: var(--fc-chunk);
}
.nb-tap__plate {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  justify-items: center;
  gap: 8px 14px;
  padding: 18px 24px 16px;
}
/* the side the lever points at is full ink with an engraved underline; the other side is ink-2
   (never dimmed with opacity, which dropped it under AA on the steel) */
.nb-tap__eng { font-family: var(--fc-mono); font-size: clamp(0.7rem, 1.9cqw, 0.85rem); font-weight: 800; letter-spacing: 0.1em; color: var(--fc-ink-2); white-space: nowrap; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.nb-tap:not(.nb-tap--review) .nb-tap__eng--a,
.nb-tap--review .nb-tap__eng--b { color: var(--fc-ink); text-decoration-line: underline; }
.nb-tap__small { grid-column: 1 / -1; font-family: var(--fc-mono); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; color: var(--fc-ink-2); }
.nb-tap__lever {
  position: relative;
  width: 84px;
  height: 44px;
  padding: 0;
  border: var(--fc-line);
  border-radius: 999px;
  background: linear-gradient(var(--fc-rubber), var(--fc-asphalt-2));
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.35), 2px 2px 0 var(--fc-ink);
  cursor: pointer;
}
.nb-tap__knob {
  position: absolute;
  top: 4px;
  left: 5px;
  width: 32px;
  height: 32px;
  border: var(--fc-line);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, var(--fc-sun-2) 0 3px, var(--fc-sun) 4px);
  box-shadow: 0 3px 0 var(--fc-ink);
  transition: transform 0.3s var(--fc-bounce);
}
.nb-tap__lever[aria-checked="true"] .nb-tap__knob { transform: translateX(38px); }
@container (max-width: 520px) {
  .nb-tap__scene { aspect-ratio: 358 / 470; }
  .nb-tap__crew { left: -14cqw; width: 72cqw; }
  .nb-tap__arm { left: 45cqw; top: 36cqw; }
  .nb-tap__ph { --pw: 45cqw; }
  .nb-tap__rings { --x: 42%; --y: 50%; --rs: 20cqw; }
  .nb-tap.is-dip:not(.is-browser) .nb-tap__arm { transform: translate(-6cqw, 1cqw) rotate(-3deg); }
  .nb-tap__count { right: 3cqw; top: 13cqw; }
  .nb-tap__plate { padding: 16px 16px 14px; gap: 8px 10px; }
  .nb-tap__box { width: 100%; }
}

/* ==========================================================================
   6. The board: the time clock wall
   ========================================================================== */
.nb-clock__head { max-width: 760px; }
.nb-clock {
  position: relative;
  padding: 128px clamp(16px, 3vw, 44px) clamp(26px, 3vw, 40px);
  border: var(--fc-line);
  border-radius: var(--fc-r2);
  background-color: var(--fc-shopwall);
  background-image:
    var(--fc-grain),
    repeating-linear-gradient(90deg, transparent 0 238px, rgba(22, 58, 37, 0.24) 238px 240px),
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(22, 58, 37, 0.035) 22px 23px);
  box-shadow: var(--fc-chunk-lg);
}
.nb-clock .nb-clock__label { top: -13px; right: 18px; }
.nb-clock__plate { position: absolute; z-index: 2; top: 30px; left: 50%; padding: 14px 34px 12px; transform: translateX(-50%); white-space: nowrap; }
.nb-clock__lamp { position: absolute; z-index: 1; top: -2px; left: 7%; width: 120px; pointer-events: none; }
.nb-clock__lamp svg { position: relative; display: block; width: 100%; height: auto; }
.nb-clock__cone {
  position: absolute;
  top: 78%;
  left: 10%;
  width: 360px;
  height: 320px;
  background: linear-gradient(180deg, rgba(255, 233, 168, 0.55), transparent 85%);
  clip-path: polygon(0 0, 30% 0, 100% 100%, 0 100%);
  opacity: 0.8;
}
.nb-clock__floor { position: relative; z-index: 2; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: clamp(16px, 3vw, 40px); }
.nb-clock__puncher { width: clamp(84px, 9vw, 124px); }
.nb-clock__puncher svg { display: block; width: 100%; height: auto; filter: drop-shadow(4px 4px 0 rgba(22, 58, 37, 0.35)); }
.nb-clock__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(6px, 2vw, 30px); margin: 0; padding: 0; list-style: none; }
.nb-clock__col { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 24px; }
.nb-clock__hook { position: absolute; z-index: 2; top: 0; left: 50%; width: 22px; height: 30px; margin-left: -11px; }
.nb-clock__hook::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 5px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--fc-ink);
  border-radius: 50%;
  background: var(--fc-steel-c);
}
.nb-clock__hook::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 3px;
  width: 16px;
  height: 22px;
  border: 3.5px solid var(--fc-steel-c);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  filter: drop-shadow(1px 0 0 var(--fc-ink)) drop-shadow(-1px 0 0 var(--fc-ink)) drop-shadow(0 1px 0 var(--fc-ink));
}
.nb-clock__badge {
  display: block;
  width: min(100%, 116px);
  margin-top: var(--drop, 0px);
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  cursor: pointer;
}
.nb-clock__pend { display: block; transform: rotate(var(--tilt, 0deg)); transform-origin: 50% -16px; }
.nb-clock__badge.is-swing .nb-clock__pend { animation: nb-swing-once 1.2s ease-out 1; }
@keyframes nb-swing-once {
  0% { transform: rotate(var(--tilt, 0deg)); }
  20% { transform: rotate(calc(var(--tilt, 0deg) + 9deg)); }
  45% { transform: rotate(calc(var(--tilt, 0deg) - 6deg)); }
  70% { transform: rotate(calc(var(--tilt, 0deg) + 3deg)); }
  100% { transform: rotate(var(--tilt, 0deg)); }
}
.nb-clock__pend svg { display: block; width: 100%; height: auto; border-radius: 7% / 4.4%; box-shadow: 4px 4px 0 var(--fc-ink); }
.nb-clock__name { padding: 4px 9px 5px; font-size: 0.72rem; }
.nb-clock__count { --ro: 1.2rem; gap: 6px; padding: 6px 7px; }
.nb-clock__live { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 2px; border: 0; border-radius: 14px; background: none; cursor: pointer; }
.nb-clock__live .nb-clock__count { box-shadow: 0 0 0 3px var(--fc-sun), var(--fc-chunk); }
.nb-clock__glow {
  position: absolute;
  z-index: -1;
  top: 20px;
  left: 50%;
  width: 150%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 210, 63, 0.55), transparent 62%);
  opacity: 0;
  transform: translateX(-50%) scale(0.8);
}
.nb-clock__glow.is-pulse { animation: nb-glow 1.1s ease-out 1; }
@keyframes nb-glow {
  0% { opacity: 0; transform: translateX(-50%) scale(0.7); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scale(1.15); }
}
.nb-clock .nb-clock__note { max-width: 11em; padding: 12px 18px 12px; font-size: 1.05rem; line-height: 1.3; transform: rotate(1deg); }
.nb-clock__note b { display: block; margin-top: 4px; font-weight: 400; text-align: right; }
.nb-clock__after { margin-top: clamp(26px, 3vw, 36px); }
@media (max-width: 900px) {
  .nb-clock { padding-top: 24px; }
  .nb-clock__plate { position: relative; top: auto; left: auto; display: block; width: max-content; max-width: 100%; margin: 0 auto 26px; transform: none; }
  .nb-clock__lamp { display: none; }
  .nb-clock__floor { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "row row" "punch note"; row-gap: 26px; align-items: center; }
  .nb-clock__row { grid-area: row; }
  .nb-clock__puncher { grid-area: punch; justify-self: end; width: 76px; }
  .nb-clock .nb-clock__note { grid-area: note; }
}
@media (max-width: 600px) {
  .nb-clock { padding-inline: 10px; }
  .nb-clock .nb-clock__label { top: -16px; right: 8px; font-size: 0.56rem; letter-spacing: 0.1em; }
  .nb-clock__plate { padding: 12px 20px 10px; }
  .nb-clock__plate .fc-plate__title { font-size: 1.05rem; }
  .nb-clock__col { gap: 8px; padding-top: 20px; }
  .nb-clock__name { padding: 3px 5px 4px; font-size: 0.56rem; letter-spacing: 0.06em; }
  .nb-clock__count { --ro: 0.8rem; gap: 4px; padding: 4px 4px; }
  .nb-clock__count .fc-readout__cells { gap: 2px; }
  .nb-clock__pend { transform-origin: 50% -10px; }
}

/* ==========================================================================
   7. Proof: the shop fridge
   ========================================================================== */
.nb-fridge {
  max-width: 980px;
  margin: 0 auto;
  padding-top: clamp(44px, 5vw, 64px);
  padding-bottom: clamp(36px, 4vw, 56px);
  color: var(--fc-ink);
}
.nb-fridge__door { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr); grid-template-areas: "a b" "s b"; gap: 44px 40px; align-items: start; }
.nb-fridge .fc-snap::before { display: none; }
.nb-fridge__post { --r: -0.8deg; cursor: default; }
/* the post itself is the button (main.js .wall-card opens it full size); the tape and the caption
   stay outside it, so a screen reader still reads them */
.nb-fridge__shot { display: block; width: 100%; padding: 0; border: 0; border-radius: 3px; background: none; color: inherit; cursor: zoom-in; }
.nb-fridge__shot:focus-visible { outline-offset: 4px; }
.nb-fridge__post:has(.nb-fridge__shot:focus-visible) { transform: rotate(0deg) scale(1.02); }
.nb-fridge__post--a { grid-area: a; }
.nb-fridge__post--b { grid-area: b; --r: 0.9deg; margin-top: 18px; }
/* the tape rides the frame's top edge, clear of the post itself (the posts are shown unedited) */
.nb-fridge__tape { position: absolute; z-index: 3; top: -25px; left: -14px; font-size: 0.7rem; transform: rotate(-4deg); }
.nb-fridge__cap { margin-top: 10px; font-size: 0.9rem; font-weight: 800; line-height: 1.35; text-wrap: balance; }
/* the fridge door is light: an ink focus ring (the turf band's sun ring would vanish on it) */
.nb-fridge :focus-visible { outline-color: var(--fc-ink); }
.nb-fridge__cap small { display: block; margin-top: 2px; font-size: 0.8rem; font-weight: 600; color: var(--fc-ink-2); }
.nb-fridge__sticky { grid-area: s; justify-self: center; align-self: center; font-size: 1.15rem; }
.nb-fridge__mag { position: absolute; z-index: 1; border: var(--fc-line); box-shadow: 2px 3px 0 rgba(22, 58, 37, 0.35); pointer-events: none; }
.nb-fridge__mag--a { top: 18px; left: 26%; width: 30px; height: 30px; border-radius: 50%; background: var(--fc-orange); }
.nb-fridge__mag--b { top: 24px; left: 34%; width: 22px; height: 34px; border-radius: 10px; background: var(--fc-sun); transform: rotate(14deg); }
.nb-fridge__mag--c { bottom: 22px; right: 18%; width: 40px; height: 26px; border-radius: 6px; background: var(--fc-sky); transform: rotate(-8deg); }
.nb-fridge__mag--d { bottom: 30px; left: 8%; width: 28px; height: 28px; border-radius: 50% 50% 50% 8px; background: var(--fc-lawn-a); transform: rotate(20deg); }
.nb-fridge__under { margin-top: 30px; }
.nb-fridge__after { color: var(--fc-chalk-2); }
.nb-fridge__after .fc-link { color: var(--fc-chalk); text-decoration-color: var(--fc-sun); }
@media (max-width: 760px) {
  .nb-fridge__door { grid-template-columns: minmax(0, 1fr); grid-template-areas: "a" "b" "s"; gap: 40px; }
  .nb-fridge__post--b { width: min(100%, 300px); margin: 0 auto; }
  .nb-fridge__mag--a, .nb-fridge__mag--b { display: none; }
}

/* ==========================================================================
   8. The order: the box on the tailgate
   ========================================================================== */
.nb-ship { margin: 0; }
.nb-ship__gate { padding-top: 84px; padding-inline: clamp(8px, 2vw, 20px); }
.nb-ship__stack { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; }
.nb-ship__box, .nb-ship__slip { grid-area: 1 / 1; }
.nb-ship__box { position: relative; z-index: 1; width: 56%; justify-self: start; margin-bottom: 4px; transition: transform 0.8s var(--fc-ease), opacity 0.5s; }
.nb-ship__carton { position: relative; z-index: 1; display: block; width: 100%; height: auto; filter: drop-shadow(5px 5px 0 var(--fc-ink)); }
.nb-ship__peek { position: absolute; z-index: 0; left: 42%; top: 0; width: 17%; height: auto; transform: translateY(-58%) rotate(5deg); border-radius: 7% / 4.4%; }
.nb-ship__slip { position: relative; z-index: 2; width: min(390px, 66%); justify-self: end; --slip: var(--fc-sheet); transform: rotate(-0.8deg); transition: transform 0.8s var(--fc-ease) 0.12s, opacity 0.5s 0.12s; }
.nb-ship__slip .fc-slip__paper { gap: 12px; padding: 22px 20px 18px; }
.nb-ship__head { display: grid; gap: 3px; padding-bottom: 9px; border-bottom: 3px double var(--fc-ink); }
.nb-ship__title { font-family: var(--fc-display); font-size: clamp(0.92rem, 0.85rem + 0.3vw, 1.08rem); font-weight: 400; line-height: 1.2; letter-spacing: 0.05em; }
.nb-ship__to { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; color: var(--fc-ink-2); }
.nb-ship__rows { display: grid; gap: 10px; margin: 0; }
.nb-ship__row { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; }
.nb-ship__row::before { content: ""; position: absolute; left: 0; right: 0; top: 0.95em; border-bottom: 2px dotted rgba(22, 58, 37, 0.45); }
.nb-ship__row dt { position: relative; max-width: 74%; padding-right: 6px; background: var(--fc-sheet); font-size: 0.72rem; font-weight: 800; line-height: 1.35; letter-spacing: 0.06em; text-wrap: balance; }
.nb-ship__row dd { position: relative; margin: 0; padding-left: 6px; background: var(--fc-sheet); font-size: 0.92rem; font-weight: 800; white-space: nowrap; }
.nb-ship__row .nb-ship__note { flex-basis: 100%; margin: 3px 0 0 10px; padding: 0; background: none; font-family: var(--fc-hand); font-size: 0.98rem; font-weight: 400; line-height: 1.25; white-space: normal; text-wrap: balance; color: var(--fc-ballpoint); }
.nb-ship__meta { display: grid; gap: 4px; padding-top: 10px; border-top: 1.5px dashed rgba(22, 58, 37, 0.35); font-size: 0.82rem; line-height: 1.4; }
.nb-ship__meta b { font-weight: 800; letter-spacing: 0.06em; }
/* the two strips run across the slip's left edge onto the carton's face: the slip is taped to
   the box, not standing on its own */
.nb-ship .nb-ship__tape--l { top: auto; bottom: 24px; left: 0; transform: rotate(-9deg); }
.nb-ship .nb-ship__tape--r { top: auto; bottom: 98px; left: 0; transform: rotate(7deg); }
/* the Sample tag on the peeking badge */
.nb-ship__tag { top: -38px; right: 61%; z-index: 2; --string: 18px; --string-a: -8deg; }
.nb-ship .nb-ship__stamp {
  position: relative;
  z-index: 3;
  justify-self: end;
  margin: 2px 4px 0 0;
  padding: 8px 14px 7px;
  font-size: 1.05rem;
  line-height: 1.1;
  text-align: center;
  transform: rotate(-9deg);
}
.nb-ship__stamp small { display: block; margin-top: 2px; font-size: 0.66rem; letter-spacing: 0.16em; }
html.js .nb-ship:not(.is-playing) .nb-ship__box { opacity: 0; transform: translateX(-28px); }
html.js .nb-ship:not(.is-playing) .nb-ship__slip { opacity: 0; transform: translateX(40px) rotate(3deg); }
/* the stamp lands 1.05 s after the box and the slip (a transition, so it still lands when the
   section rests off screen) */
.nb-ship .nb-ship__stamp { transition: opacity 0.12s linear 1.05s, transform 0.42s var(--fc-bounce) 1.05s; }
html.js .nb-ship:not(.is-playing) .nb-ship__stamp { opacity: 0; transform: rotate(-16deg) scale(1.9); transition: none; }
@media (max-width: 600px) {
  .nb-ship__gate { padding-top: 70px; }
  .nb-ship__stack { grid-template-columns: minmax(0, 1fr); }
  .nb-ship__box, .nb-ship__slip { grid-area: auto; }
  .nb-ship__box { width: 76%; margin: 0 auto -5%; justify-self: center; }
  .nb-ship__slip { width: 100%; }
  .nb-ship .nb-ship__stamp { font-size: 0.95rem; }
  /* stacked: the box sits on the slip's top edge, and the strips tape the two together there */
  .nb-ship .nb-ship__tape--l { top: -12px; bottom: auto; left: 18%; transform: rotate(-6deg); }
  .nb-ship .nb-ship__tape--r { top: -12px; bottom: auto; left: 82%; transform: rotate(5deg); }
}

/* ==========================================================================
   9. Check my area: the crew list clipboard
   ========================================================================== */
.nb-cta__body { max-width: 30em; margin-top: 14px; font-weight: 600; line-height: 1.55; color: var(--fc-ink-deep); }
.nb-crew { flex-direction: column; align-items: center; max-width: 340px; margin-top: clamp(40px, 4vw, 52px); transform: rotate(-1deg); }
.nb-crew__board {
  position: relative;
  width: 100%;
  padding: 40px 12px 14px;
  border: var(--fc-line);
  border-radius: 22px;
  background-color: var(--fc-board);
  background-image:
    var(--fc-grain),
    radial-gradient(rgba(84, 44, 14, 0.28) 1px, transparent 1.6px),
    radial-gradient(rgba(255, 236, 205, 0.22) 1px, transparent 1.6px),
    radial-gradient(ellipse at 20% 15%, rgba(255, 255, 255, 0.16), transparent 55%);
  background-size: auto, 9px 11px, 13px 7px, auto;
  background-position: 0 0, 0 0, 4px 6px, 0 0;
  box-shadow: var(--fc-chunk-lg), inset 0 0 0 5px rgba(255, 240, 215, 0.12);
}
.nb-crew .nb-crew__clip { top: -24px; width: 150px; height: 54px; }
.nb-crew__paper { position: relative; padding: 20px 14px 14px; border: var(--fc-line); border-radius: 8px; background: var(--fc-white); color: var(--fc-ink); transform: rotate(0.6deg); }
.nb-crew__head { font-family: var(--fc-display); font-size: 1.3rem; font-weight: 400; line-height: 1.1; }
.nb-crew__area { margin-top: 8px; font-size: 0.82rem; font-weight: 700; white-space: nowrap; }
.nb-crew__zip { font-family: var(--fc-hand); font-size: 1.05rem; font-weight: 400; color: var(--fc-ballpoint); }
.nb-crew__zip .fc-field-line { border-bottom-width: 1.5px; }
/* the columns fit the handwritten sample row ("Race car driver", "Google review"); on a narrow
   sheet a cell wraps inside its own column instead of running into the next one */
.nb-crew__grid { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.2fr) minmax(0, 1.08fr); column-gap: 8px; margin-top: 12px; }
.nb-crew__th { padding-bottom: 4px; border-bottom: 2px solid var(--fc-ink); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.nb-crew__grid .fc-hw { position: relative; padding-top: 8px; border-bottom: 1.5px solid rgba(22, 58, 37, 0.3); font-size: 0.8rem; line-height: 1.3; }
.nb-crew__blank { height: 25px; border-bottom: 1.5px solid rgba(22, 58, 37, 0.3); }
.nb-crew .nb-crew__sample { position: absolute; top: calc(100% + 2px); right: -10px; padding: 2px 6px 2px 5px; font-size: 0.56rem; letter-spacing: 0.1em; box-shadow: 1px 1px 0 var(--fc-ink); }
.nb-crew .nb-crew__sample::before { width: 5px; height: 5px; border-width: 1.5px; }
.nb-crew__check { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 0.84rem; font-weight: 800; }
.nb-crew__box { width: 16px; height: 16px; border: 2px solid var(--fc-ink); border-radius: 3px; background: var(--fc-white); }
.nb-crew__pen { position: absolute; z-index: 4; top: 8px; right: -40px; width: 62px; height: auto; pointer-events: none; }
.nb-crew__cap { margin-top: 16px; font-family: var(--fc-hand); font-size: 1.1rem; line-height: 1.3; text-align: center; text-wrap: balance; color: var(--fc-ink-deep); }
.nb-crew .fc-ring { top: 8px; right: 10px; }
@media (max-width: 600px) {
  .nb-crew { max-width: 100%; margin-inline: auto; }
  .nb-crew__pen { right: -8px; top: -20px; width: 46px; }
}
/* one column (phones and tablets): the form follows the words, and the crew list sits under the
   form, so the service area line fills in right where the ZIP is typed */
@media (max-width: 959px) {
  #check .fc-cta__copy { display: contents; }
  #check .fc-cta__board { order: 1; }
  #check .nb-crew { order: 2; justify-self: center; margin-top: 30px; }
  #check .nb-cta__body { margin-top: -8px; }
}

/* ---------- without JavaScript: nothing loops, and no pause button that cannot pause ---------- */
html:not(.js) .nb-rack__track { animation: none; }
html:not(.js) .nb-rack__viewport { overflow-x: auto; }
html:not(.js) .nb-rack__item[aria-hidden="true"],
html:not(.js) .nb-tg__pause,
html:not(.js) .nb-tap__pause,
html:not(.js) .nb-rack__pause { display: none; }

/* ---------- the Shmo guide (the kit's companion) ---------- */
html.js .nb-guide:not(.is-on) { opacity: 0; visibility: hidden; }
.nb-guide { transition: opacity 0.4s, visibility 0s; }
/* the kit keeps the guide to 1440px and wider, its bubble above the sticker, inside the gutter;
   from 1700px, where the kit would show the bubble for good, it talks for 4.2 s when a section's
   line plays */
@media (min-width: 1700px) { .nb-guide:not(.is-talking):not(:hover):not(:focus-within) .fc-companion__say { opacity: 0; visibility: hidden; } }

/* ---------- motion off: every scene rests finished ---------- */
@media (prefers-reduced-motion: reduce) {
  .nb-tg__rings i,
  .nb-tg__banner,
  .nb-rack__track,
  .nb-rack__item:hover,
  .nb-shop__tee,
  .nb-shop__keys,
  .nb-shop__ripple i,
  .nb-tap__rings i,
  .nb-tap__caret,
  .nb-clock__pend,
  .nb-chipfx__rip { animation: none !important; }
  .nb-rack__viewport { overflow-x: auto; scroll-snap-type: x proximity; }
  .nb-rack__item { scroll-snap-align: center; }
  /* the box, the slip and the stamp are simply there, settled */
  .nb-ship .nb-ship__box,
  .nb-ship .nb-ship__slip,
  .nb-ship .nb-ship__stamp { transition: none !important; }
  .nb-rack__item--copy,
  .nb-rack__item[aria-hidden="true"],
  .nb-rack__pause,
  .nb-tg__pause,
  .nb-tap__pause { display: none; }
}