/* ==========================================================================
   Shmo Cards page only (shmo-cards.html). Loads after css/core.css and css/lawn.css.
   Page-only art uses the .sc- prefix; kit classes are only restyled under a .sc- scope or a
   section id. Every scene is drawn finished at rest: the "before" states live under
   html.js ... :not(.is-playing | .is-lit | .is-on), so no-JS and reduced motion stay finished.
   Scenes scale as one drawing: each one is a size container and its parts are set in cqw.
   ========================================================================== */

/* ---------- 1. Hero: the job board on the tailgate ---------- */
/* the kit's column split, so the crumb row keeps its "Work order" tag from 1240px like the other
   Shmo Card pages (in an even split the copy column is too narrow for it) */
.sc-h1 .fc-mark-line { white-space: normal; }
.sc-nowrap { white-space: nowrap; }
.sc-sub1 { margin-bottom: 10px; }
.sc-hero .fc-note { max-width: 30em; }

.sc-jb { position: relative; width: min(100%, 560px); margin: 0; container-type: inline-size; }
.sc-jb__scene { position: relative; aspect-ratio: 100 / 84; }
.sc-jb__yard {
  position: absolute;
  top: 0;
  left: 2cqw;
  width: 96cqw;
  height: 72cqw;
  border: var(--fc-line);
  border-radius: 5cqw;
  background: var(--fc-sky-2);
  box-shadow: var(--fc-chunk-lg);
}
/* the truck: a lowered tailgate across the front, the bed sides and tail lights at each end */
.sc-jb__gate {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 4cqw;
  height: 11.4cqw;
  border: var(--fc-line);
  border-radius: 1.2cqw 1.2cqw 1.6cqw 1.6cqw;
  background:
    linear-gradient(90deg, transparent calc(50% - 6.2cqw), var(--fc-ink) calc(50% - 6.2cqw) calc(50% - 5.8cqw), var(--fc-rubber) calc(50% - 5.8cqw) calc(50% + 5.8cqw), var(--fc-ink) calc(50% + 5.8cqw) calc(50% + 6.2cqw), transparent calc(50% + 6.2cqw)) 0 4.6cqw / 100% 2.2cqw no-repeat,
    linear-gradient(90deg, transparent calc(50% - 7.2cqw), var(--fc-ink) calc(50% - 7.2cqw) calc(50% - 6.8cqw), var(--fc-steel-a) calc(50% - 6.8cqw) calc(50% + 6.8cqw), var(--fc-ink) calc(50% + 6.8cqw) calc(50% + 7.2cqw), transparent calc(50% + 7.2cqw)) 0 3.8cqw / 100% 3.8cqw no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.22), transparent 45%),
    var(--fc-clover-2);
  box-shadow: 0 0.8cqw 0 var(--fc-ink), inset 0 0 0 1.5cqw var(--fc-clover-2), inset 0 0 0 calc(1.5cqw + 2px) rgba(0, 0, 0, 0.2), inset 0 0 0 calc(1.5cqw + 5px) rgba(255, 255, 255, 0.12);
}
.sc-jb__bumper {
  position: absolute;
  z-index: 2;
  left: 2cqw;
  right: 2cqw;
  bottom: 0;
  height: 4.8cqw;
  border: var(--fc-line);
  border-radius: 0.8cqw 0.8cqw 1.6cqw 1.6cqw;
  background:
    linear-gradient(90deg, transparent calc(50% - 9cqw), var(--fc-rubber) calc(50% - 9cqw) calc(50% + 9cqw), transparent calc(50% + 9cqw)) 0 1.2cqw / 100% 1.6cqw no-repeat,
    linear-gradient(var(--fc-steel-a), var(--fc-steel-b) 60%, var(--fc-steel-c));
  box-shadow: var(--fc-chunk);
}
.sc-jb__gate::before {
  content: "";
  position: absolute;
  left: 2.5%;
  right: 2.5%;
  top: calc(-1.6cqw - 2px);
  height: 1.6cqw;
  border: var(--fc-line);
  border-bottom: 0;
  border-radius: 0.8cqw 0.8cqw 0 0;
  background: var(--fc-rubber);
}
.sc-jb__light {
  position: absolute;
  z-index: -1;
  left: -0.2cqw;
  bottom: calc(100% - 1cqw);
  width: 4.6cqw;
  height: 17cqw;
  border: var(--fc-line);
  border-radius: 1cqw 1cqw 0 0;
  background:
    linear-gradient(var(--fc-red-ink), var(--fc-red-ink)) 50% 2cqw / 2.2cqw 6.5cqw no-repeat,
    linear-gradient(90deg, rgba(255, 255, 255, 0.2), transparent 60%),
    var(--fc-clover-2);
}
.sc-jb__light--r { left: auto; right: -0.2cqw; }

/* the board: a split-flap display in a dark housing, on two rubber feet */
.sc-jb__board {
  position: absolute;
  z-index: 4;
  left: 12.5cqw;
  right: 4cqw;
  bottom: 17cqw;
  display: grid;
  gap: 1.2cqw;
  padding: 2.2cqw 2.4cqw 2cqw;
  border: var(--fc-line);
  border-radius: 2.4cqw;
  background: linear-gradient(var(--fc-flap-a), var(--fc-flap-b));
  box-shadow: var(--fc-chunk-lg), inset 0 0 0 0.7cqw rgba(255, 255, 255, 0.05), inset 0 -0.9cqw 0 rgba(0, 0, 0, 0.3);
  color: var(--fc-chalk);
  font: inherit;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.14s ease-out;
}
.sc-jb__board:focus-visible { outline: 3px solid var(--fc-ink); outline-offset: 4px; }
.sc-jb__board.is-dip { transform: translateY(0.35cqw); }
.sc-jb__etch {
  font-size: clamp(9.5px, 2.05cqw, 12px);
  font-weight: 800;
  letter-spacing: 0.22em;
  line-height: 1;
  color: var(--fc-chalk-2);
}
.sc-jb__row { display: flex; gap: 0.45cqw; padding-inline: 0.4cqw; }
.sc-cell {
  --ch: 8.8cqw;
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: var(--ch);
  border-radius: 0.6cqw;
  background: var(--fc-flap-line);
  perspective: 26cqw;
}
.sc-cell::after {
  content: "";
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  top: calc(50% - 0.5px);
  height: 1px;
  background: var(--fc-flap-line);
}
.sc-cell__t,
.sc-cell__b,
.sc-cell__f { position: absolute; left: 0; right: 0; overflow: hidden; }
.sc-cell__t,
.sc-cell__f { top: 0; height: calc(50% - 0.5px); border-radius: 0.6cqw 0.6cqw 0 0; background: linear-gradient(var(--fc-rubber), var(--fc-flap-a)); }
.sc-cell__b { bottom: 0; height: calc(50% - 0.5px); border-radius: 0 0 0.6cqw 0.6cqw; background: linear-gradient(var(--fc-flap-a), var(--fc-flap-b)); }
.sc-cell i {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--ch);
  font-family: var(--fc-display);
  font-size: 4.2cqw;
  font-style: normal;
  font-weight: 400;
  line-height: var(--ch);
  text-align: center;
  color: var(--fc-sun-2);
}
.sc-cell__t i,
.sc-cell__f i { top: 0; }
.sc-cell__b i { bottom: 0; }
.sc-cell__f { display: none; z-index: 2; transform-origin: 50% 100%; backface-visibility: hidden; }
.sc-cell__f.is-f1 { display: block; animation: sc-flap-top 0.1s linear forwards; }
.sc-cell__f.is-f2 {
  display: block;
  top: auto;
  bottom: 0;
  border-radius: 0 0 0.6cqw 0.6cqw;
  background: linear-gradient(var(--fc-flap-a), var(--fc-flap-b));
  transform-origin: 50% 0;
  animation: sc-flap-bot 0.13s ease-out forwards;
}
.sc-cell__f.is-f2 i { top: auto; bottom: 0; }
@keyframes sc-flap-top { to { transform: rotateX(-88deg); } }
@keyframes sc-flap-bot { from { transform: rotateX(88deg); } to { transform: rotateX(0deg); } }
.sc-jb__plates { display: flex; align-items: center; justify-content: center; gap: 2.2cqw; }
.sc-jb__plate {
  padding: 0.7cqw 2cqw 0.6cqw;
  border: 1.5px solid var(--fc-ink);
  border-radius: 0.8cqw;
  background:
    radial-gradient(circle at 1cqw 50%, var(--fc-brass-lo) 0 0.35cqw, transparent 0.45cqw),
    radial-gradient(circle at calc(100% - 1cqw) 50%, var(--fc-brass-lo) 0 0.35cqw, transparent 0.45cqw),
    linear-gradient(var(--fc-brass-hi), var(--fc-brass) 70%);
  box-shadow: inset 0 -2px 0 var(--fc-brass-lo);
  color: var(--fc-ink);
  font-family: var(--fc-display);
  font-size: clamp(9.5px, 1.9cqw, 11px);
  font-weight: 400;
  letter-spacing: 0.16em;
  line-height: 1.2;
}
.sc-jb__led {
  width: 2cqw;
  height: 2cqw;
  border: 1.5px solid var(--fc-ink);
  border-radius: 50%;
  background: var(--fc-sun);
  box-shadow: 0 0 1.4cqw 0.3cqw rgba(255, 210, 63, 0.55);
}
.sc-jb__led.is-blink { animation: sc-blink 0.5s steps(2, jump-none) 2; }
@keyframes sc-blink { 0% { background: var(--fc-rubber-2); box-shadow: none; } 100% { background: var(--fc-sun); } }
.sc-jb__feet { position: absolute; left: 10%; right: 10%; bottom: calc(-2.2cqw - 2px); height: 2.2cqw; }
.sc-jb__feet::before,
.sc-jb__feet::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6cqw;
  height: 100%;
  border: var(--fc-line);
  border-top: 0;
  border-radius: 0 0 1cqw 1cqw;
  background: var(--fc-rubber);
}
.sc-jb__feet::after { left: auto; right: 0; }
/* the mascot peeks over the top of the board, and hops when the board is pressed */
.sc-jb__mascot {
  position: absolute;
  z-index: 2;
  right: 9cqw;
  bottom: 34cqw;
  width: 21cqw;
  max-width: none;
  height: auto;
  transform: rotate(4deg);
  transform-origin: 50% 100%;
}
.sc-jb__mascot.is-hop { animation: sc-hop 0.6s var(--fc-ease); }
@keyframes sc-hop {
  0%, 100% { transform: rotate(4deg) translateY(0); }
  32% { transform: rotate(1deg) translateY(-3.4cqw); }
  60% { transform: rotate(4deg) translateY(0); }
  80% { transform: rotate(4deg) translateY(-1cqw); }
}
/* the work gloves lie on the tailgate beside the card, in front of the board's lower left corner */
.sc-jb__gloves { position: absolute; z-index: 6; left: 13.6cqw; bottom: 15.4cqw; width: 18.5cqw; height: 7.2cqw; }
.sc-jb__card {
  position: absolute;
  z-index: 5;
  left: 4.4cqw;
  bottom: 15.2cqw;
  width: 9.4cqw;
  height: 14.7cqw;
  transform: rotate(10deg);
  transform-origin: 0 100%;
  filter: drop-shadow(0.6cqw 0.6cqw 0 rgba(22, 58, 37, 0.4));
}
.sc-jb__cap { display: block; width: fit-content; margin: 20px auto 0; text-align: center; }
.sc-jb__pause { position: absolute; z-index: 7; top: 3.2cqw; right: 5.2cqw; }
.sc-jb.is-paused .fc-tape__pause { display: none; }
.sc-jb.is-paused .fc-tape__play { display: block; }
html:not(.js) .sc-jb__pause { display: none; }
/* with reduced motion nothing loops, so the script hides the three pause buttons (the kit's
   display: grid would otherwise win over the hidden attribute) */
.sc-jb__pause[hidden],
.sc-rolo__pause[hidden],
.sc-visor__pause[hidden] { display: none; }

/* ---------- 2. The s'more over the fire pit ---------- */
.sc-deep { font-weight: 600; }
/* three standalone links in a row: 44px tall targets without moving the line */
#one-card .sc-deep a { display: inline-block; padding-block: 12px; margin-block: -12px; }
.sc-smore { position: relative; display: grid; justify-items: center; width: min(100%, 560px); margin: 0 auto; container-type: inline-size; }
.sc-smore__yard {
  position: relative;
  grid-area: 1 / 1;
  width: 100%;
  aspect-ratio: 100 / 96;
  overflow: hidden;
  border: var(--fc-line);
  border-radius: var(--fc-r3);
  background:
    linear-gradient(transparent calc(74% - 1px), var(--fc-ink) calc(74% - 1px) calc(74% + 1px), transparent calc(74% + 1px)),
    repeating-linear-gradient(90deg, var(--fc-clover) 0 9cqw, var(--fc-clover-2) 9cqw 18cqw) 0 100% / 100% 26% no-repeat,
    linear-gradient(180deg, var(--fc-dusk-b) 0%, color-mix(in srgb, var(--fc-dusk-b), var(--fc-dusk-a)) 40%, var(--fc-dusk-a) 74%);
  box-shadow: var(--fc-chunk-lg);
}
/* a string of backyard lights across the top */
.sc-smore__lights { position: absolute; top: 0; left: 0; width: 100%; height: auto; }
.sc-smore__pit { position: absolute; left: 50%; bottom: 1cqw; width: 64cqw; transform: translateX(-50%); overflow: visible; }
.sc-smore__flames { transform-origin: 50% 100%; transform-box: fill-box; }
.sc-smore__stick {
  position: absolute;
  top: 44cqw;
  left: 52%;
  right: -4cqw;
  height: 1.7cqw;
  border: var(--fc-line);
  border-radius: 999px;
  background: linear-gradient(var(--fc-rail-a), var(--fc-rail-b));
  transform: rotate(-7deg);
  transform-origin: 0 50%;
}
.sc-smore__stack {
  position: relative;
  z-index: 2;
  grid-area: 1 / 1;
  align-self: start;
  display: grid;
  justify-items: center;
  width: 70cqw;
  margin-top: 6.5cqw;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fc-ink);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* an ink ring with a sun halo inside it: it reads on the dusk sky, the peach glow and the mint */
.sc-smore__stack:focus-visible { outline: 3px solid var(--fc-ink); outline-offset: 5px; border-radius: 12px; box-shadow: 0 0 0 5px var(--fc-sun); }
.sc-layer {
  --dy: 0cqw;
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.3cqw;
  width: 100%;
  padding: 1.6cqw 3cqw;
  border: var(--fc-line);
  text-align: center;
  line-height: 1.15;
}
.sc-layer b { font-size: clamp(12px, 3.5cqw, 19px); }
.sc-layer small { font-size: clamp(10.5px, 2.35cqw, 13px); font-weight: 700; line-height: 1.25; }
.sc-layer--cracker {
  min-height: 11.5cqw;
  border-radius: 1.6cqw;
  background-color: var(--fc-rail-a);
  background-image:
    radial-gradient(circle, rgba(122, 75, 42, 0.55) 0 0.45cqw, transparent 0.6cqw),
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(122, 75, 42, 0.45) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
  background-size: 5cqw 4cqw, 100% 100%;
  background-position: 1.2cqw 1cqw, 0 0;
  box-shadow: 0 0.7cqw 0 rgba(22, 58, 37, 0.35);
}
.sc-layer--cracker b,
.sc-layer--cracker small { padding: 0 1cqw; background: var(--fc-rail-a); border-radius: 4px; }
.sc-layer--top { z-index: 3; }
.sc-layer--bottom { z-index: 1; margin-top: -0.4cqw; }
.sc-layer--choc {
  z-index: 2;
  width: 90%;
  min-height: 9.5cqw;
  margin-top: -0.4cqw;
  border-radius: 0.8cqw;
  background-color: var(--fc-soil);
  background-image:
    linear-gradient(90deg, transparent 32%, rgba(255, 248, 230, 0.13) 32% calc(32% + 2px), transparent calc(32% + 2px) 66%, rgba(255, 248, 230, 0.13) 66% calc(66% + 2px), transparent calc(66% + 2px)),
    linear-gradient(rgba(255, 248, 230, 0.12), transparent 40%);
  color: var(--fc-chalk);
}
.sc-layer--mallow {
  z-index: 3;
  grid-template-columns: auto auto;
  column-gap: 2.4cqw;
  width: 104%;
  min-height: 15cqw;
  margin-top: -0.6cqw;
  padding-block: 1.4cqw;
  border-radius: 5cqw;
  background: radial-gradient(ellipse at 50% 120%, rgba(255, 179, 107, 0.5), transparent 60%), var(--fc-white);
  box-shadow: inset 0 -1.2cqw 0 rgba(255, 179, 107, 0.35);
}
.sc-layer--mallow .fc-sticker { --sticker: 13cqw; width: 13cqw; }
.sc-layer__txt { display: grid; gap: 0.3cqw; justify-items: start; text-align: left; }
.sc-layer--mallow b { font-size: clamp(15px, 4.4cqw, 24px); }
.sc-layer--choc + .sc-layer--cracker { margin-top: -0.4cqw; }
.sc-layer--top { --dy: 23cqw; }
.sc-layer--2 { --dy: 12cqw; }
.sc-layer--4 { --dy: -12cqw; }
.sc-layer--bottom { --dy: -23cqw; }
.sc-smore__stack.is-squish .sc-layer { animation: sc-squish 0.65s var(--fc-ease); }
.sc-smore__stack.is-squish .sc-layer--mallow { animation-name: sc-squish-mid; }
@keyframes sc-squish {
  0%, 100% { transform: none; }
  36%, 58% { transform: translateY(var(--dy)) scaleY(0.22); }
  80% { transform: translateY(calc(var(--dy) * -0.06)) scaleY(1.04); }
}
@keyframes sc-squish-mid {
  0%, 100% { transform: none; }
  36%, 58% { transform: scale(1.08, 0.9); }
  80% { transform: scale(0.98, 1.03); }
}
.sc-smore__hint { grid-area: 2 / 1; margin-top: 18px; text-align: center; }
.sc-smore.is-playing .sc-smore__flames { animation: sc-flicker 1.3s ease-in-out 3; }
@keyframes sc-flicker { 50% { transform: scale(1.04, 0.94) skewX(-2deg); } }

/* ---------- 3. The shop pegboard of real posts (the turf band) ---------- */
@media (max-width: 760px) { .sc-br { display: none; } }
#posts .fc-sec-head { max-width: 1140px; }
.sc-peg {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(58px, 6vw, 84px) clamp(14px, 12vw, 176px) clamp(44px, 5vw, 64px);
  overflow: hidden;
}
/* the shop light, and the wash of light it throws on the board */
.sc-peg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255, 233, 168, 0.4), transparent 70%);
  pointer-events: none;
  transition: opacity 0.5s;
}
.sc-peg__lamp {
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 50%;
  width: min(46%, 420px);
  height: 22px;
  border: var(--fc-line);
  border-radius: 8px;
  background: linear-gradient(var(--fc-steel-a), var(--fc-steel-b));
  box-shadow: 3px 3px 0 rgba(22, 58, 37, 0.35);
  transform: translateX(-50%);
}
.sc-peg__lamp i {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -9px;
  height: 9px;
  border: 2px solid var(--fc-ink);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  background: var(--fc-glow);
  box-shadow: 0 6px 18px 4px rgba(255, 233, 168, 0.55);
  transition: background-color 0.3s, box-shadow 0.3s;
}
.sc-peg__stencil {
  position: relative;
  z-index: 1;
  margin: 8px auto 0;
  font-family: var(--fc-display);
  font-size: clamp(0.8rem, 0.55rem + 1vw, 1.3rem);
  font-weight: 400;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-align: center;
  color: var(--fc-ink);
  text-shadow: 0 0 1px rgba(22, 58, 37, 0.6);
}
.sc-tool { position: absolute; z-index: 1; height: auto; overflow: visible; filter: drop-shadow(4px 4px 0 rgba(22, 58, 37, 0.3)); }
.sc-tool--trimmer { top: 26px; left: clamp(20px, 3.4vw, 50px); width: clamp(64px, 7vw, 102px); transform: rotate(4deg); }
.sc-tool--blower { top: 90px; right: clamp(8px, 1.6vw, 26px); width: clamp(120px, 12vw, 172px); transform: rotate(-6deg); }
.sc-tool--cord { bottom: 48px; right: clamp(24px, 4vw, 60px); width: clamp(80px, 7.6vw, 112px); }
.sc-prints {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 46px 40px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.sc-print { --r: -1.6deg; position: relative; width: var(--w, 230px); transform: rotate(var(--r)); }
.sc-print--1 { --w: 190px; --r: -2deg; }
.sc-print--2 { --w: 300px; --r: 1.4deg; margin-top: 26px; }
.sc-print--3 { --w: 230px; --r: -1deg; margin-top: 8px; }
.sc-print--4 { --w: 232px; --r: 1.8deg; }
.sc-print--5 { --w: 272px; --r: -1.4deg; margin-top: 22px; }
.sc-print__btn {
  display: block;
  width: 100%;
  padding: 8px 8px 12px;
  border: var(--fc-line);
  border-radius: 4px;
  background: var(--fc-white);
  box-shadow: 5px 5px 0 rgba(6, 20, 12, 0.55);
  cursor: zoom-in;
  transition: transform 0.3s var(--fc-bounce), box-shadow 0.3s var(--fc-bounce);
}
.sc-print__btn img { display: block; width: 100%; height: auto; border: 1.5px solid rgba(22, 58, 37, 0.25); border-radius: 2px; }
/* the prints sit on tan pegboard inside the turf band: an ink focus ring, not the band's sun */
#posts .sc-print__btn:focus-visible { outline: 3px solid var(--fc-ink); outline-offset: 4px; }
.sc-print__btn:hover,
.sc-print__btn:focus-visible { transform: translateY(-4px) scale(1.02); box-shadow: 8px 8px 0 rgba(6, 20, 12, 0.55); }
.sc-print__tag { position: absolute; left: 50%; bottom: -14px; z-index: 3; font-size: 0.66rem; white-space: nowrap; translate: -50% 0; }
/* a binder clip on a pegboard hook */
.sc-print .fc-hook { top: -38px; }
.sc-print__clip {
  position: absolute;
  z-index: 7;
  top: -12px;
  left: 50%;
  width: 34px;
  height: 18px;
  margin-left: -17px;
  border: 2px solid var(--fc-ink);
  border-radius: 3px 3px 5px 5px;
  background: linear-gradient(var(--fc-rubber-2), var(--fc-ink-black));
}
.sc-print__clip::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 5px;
  width: 20px;
  height: 12px;
  border: 2.5px solid var(--fc-steel-c);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}
#posts .sc-peg__cap { margin-top: 30px; }
/* before the light comes on (JS only; no-JS and reduced motion stay lit) */
html.js .sc-peg:not(.is-lit)::after { opacity: 0; }
html.js .sc-peg:not(.is-lit) .sc-peg__lamp i { background: var(--fc-steel-b); box-shadow: none; }
html.js .sc-peg:not(.is-lit) .sc-print { opacity: 0; transform: rotate(var(--r)) translateY(-14px) scale(0.96); }
.sc-print { transition: opacity 0.45s var(--fc-ease), transform 0.55s var(--fc-bounce); }
.sc-print:nth-child(2) { transition-delay: 0.12s; }
.sc-print:nth-child(3) { transition-delay: 0.24s; }
.sc-print:nth-child(4) { transition-delay: 0.36s; }
.sc-print:nth-child(5) { transition-delay: 0.48s; }
@media (max-width: 760px) {
  /* on phones the prints fill the board; the blower and the cord hang in a strip of board under them */
  .sc-peg { padding-top: 64px; padding-bottom: 170px; }
  .sc-tool--trimmer { display: none; }
  .sc-tool--blower { top: auto; right: 7%; bottom: 18px; width: min(40%, 190px); }
  .sc-tool--cord { top: auto; right: auto; left: 9%; bottom: 14px; width: min(26%, 120px); }
  .sc-prints { justify-content: flex-start; gap: 64px 16px; margin-top: 34px; }
  .sc-print { --w: calc(50% - 8px); margin-top: 0; }
  .sc-print--1 { order: 1; --r: -1.4deg; }
  .sc-print--3 { order: 2; --r: 1.2deg; }
  .sc-print--2 { order: 3; --w: 100%; --r: -0.8deg; }
  .sc-print--4 { order: 4; --r: 1deg; }
  .sc-print--5 { order: 5; --r: -1.2deg; }
  /* each label tape stays under its own print (it wraps to two lines on a narrow print) */
  .sc-print__tag { width: max-content; max-width: calc(100% + 6px); font-size: 0.56rem; letter-spacing: 0.06em; line-height: 1.35; text-align: center; white-space: normal; padding: 4px 7px 5px; }
}

/* the enlarged post (a page dialog: it carries the print's tag) */
dialog.sc-view {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 72px 16px 24px;
  border: 0;
  background: transparent;
  overflow: auto;
}
dialog.sc-view[open] { display: grid; place-items: center; }
dialog.sc-view::backdrop { background: rgba(14, 40, 25, 0.78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sc-view__fig { display: grid; justify-items: center; gap: 18px; width: min(100%, 700px); margin: 0; }
.sc-view__fig img { display: block; width: auto; max-width: 100%; max-height: calc(100dvh - 170px); border: 3px solid var(--fc-white); border-radius: 8px; box-shadow: 8px 8px 0 var(--fc-ink); background: var(--fc-white); }
.sc-view__fig figcaption { font-size: 0.8rem; }
dialog.sc-view .lb-x { position: fixed; top: 16px; right: 16px; }

/* ---------- 4. Job one: the driveway tap, the stake line ---------- */
#reviews .fc-split { align-items: center; }
.sc-tap { position: relative; justify-self: center; width: min(100%, 620px); margin: 0; container-type: inline-size; }
.sc-tap__scene { position: relative; aspect-ratio: 100 / 92; }
.sc-tap__yard {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: var(--fc-line);
  border-radius: var(--fc-r3);
  box-shadow: var(--fc-chunk-lg);
}
.sc-tap__hold { position: absolute; z-index: 3; left: 7cqw; bottom: 1.5cqw; }
.sc-tap__phone {
  --pw: 31cqw;
  display: block;
  color: var(--fc-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transform: rotate(-4deg);
  -webkit-tap-highlight-color: transparent;
}
.sc-tap__phone:focus-visible { outline: 3px solid var(--fc-ink); outline-offset: 5px; }
.sc-tap__phone .fc-phone__screen { display: block; padding: calc(var(--pw) * 0.17) calc(var(--pw) * 0.06) calc(var(--pw) * 0.06); }
.sc-tap__phone .fc-phone__notch { top: calc(var(--pw) * 0.04); width: calc(var(--pw) * 0.3); height: calc(var(--pw) * 0.08); margin-left: calc(var(--pw) * -0.15); }
.sc-tap__tag { top: -1cqw; right: auto; left: 2cqw; }
.sc-rev { display: grid; gap: calc(var(--pw) * 0.045); font-size: calc(var(--pw) * 0.062); line-height: 1.25; }
.sc-rev__head { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding-bottom: calc(var(--pw) * 0.035); border-bottom: 1.5px solid rgba(22, 58, 37, 0.18); }
.sc-rev__head b { font-size: 1.12em; font-weight: 800; }
.sc-rev__g {
  flex: none;
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  background: conic-gradient(var(--fc-can) 0 25%, var(--fc-sun) 0 50%, var(--fc-clover) 0 75%, var(--fc-ballpoint) 0);
  box-shadow: inset 0 0 0 0.3em var(--fc-white);
  border: 1.5px solid var(--fc-ink);
}
.sc-rev__prompt { font-size: 1.28em; font-weight: 800; }
.sc-rev__who { display: flex; align-items: center; gap: 0.5em; }
.sc-rev__who i { width: 1.8em; height: 1.8em; border: 1.5px solid var(--fc-ink); border-radius: 50%; background: var(--fc-leaf); }
.sc-rev__who span { width: 50%; height: 0.55em; border-radius: 99px; background: rgba(22, 58, 37, 0.18); }
.sc-rev__stars { --size: calc(var(--pw) * 0.15); justify-self: center; }
.sc-rev__box { display: grid; gap: 0.5em; padding: 0.7em; border: 1.5px solid rgba(22, 58, 37, 0.3); border-radius: 0.5em; }
.sc-rev__box i { display: block; height: 0.45em; border-radius: 99px; background: rgba(22, 58, 37, 0.14); }
.sc-rev__box i:nth-child(2) { width: 80%; }
.sc-rev__box i:nth-child(3) { width: 55%; }
.sc-rev__post {
  justify-self: end;
  padding: 0.35em 1.2em;
  border: 1.5px solid var(--fc-ink);
  border-radius: 999px;
  background: var(--fc-ballpoint);
  color: var(--fc-white);
  font-weight: 800;
}
.sc-tap__crew { position: absolute; z-index: 4; left: 40.5cqw; right: 0; top: 17cqw; height: 34cqw; pointer-events: none; }
.sc-tap__card { position: absolute; left: 0; top: 0; width: 13cqw; height: 20.3cqw; transform: rotate(-8deg); filter: drop-shadow(0.7cqw 0.7cqw 0 rgba(22, 58, 37, 0.35)); }
/* the crew lead's arm from the right: a green work-shirt sleeve with a cuff, and a fist whose
   three fingers wrap the card's edge (the same flat hand drawing as the kit's #fc-grip) */
.sc-tap__arm {
  position: absolute;
  left: 23.6cqw;
  top: 6.65cqw;
  right: 0;
  height: 8.32cqw;
  border-block: var(--fc-line);
  border-left: var(--fc-line);
  background:
    linear-gradient(90deg, transparent 2.4cqw, rgba(22, 58, 37, 0.45) 2.4cqw calc(2.4cqw + 2px), transparent calc(2.4cqw + 2px)),
    linear-gradient(rgba(255, 255, 255, 0.16), transparent 45%),
    var(--fc-clover-2);
}
.sc-tap__fist { --hand: var(--fc-skin-2); position: absolute; left: 8.2cqw; top: 5.4cqw; width: 15.6cqw; height: 10.4cqw; overflow: visible; }
.sc-tap__ring {
  position: absolute;
  left: -1cqw;
  top: 5cqw;
  width: 14cqw;
  height: 14cqw;
  margin: -7cqw 0 0 -7cqw;
  border: 3px solid var(--fc-orange);
  border-radius: 50%;
  opacity: 0.55;
}
.sc-tap__ring--2 { width: 22cqw; height: 22cqw; margin: -11cqw 0 0 -11cqw; opacity: 0.3; }
.sc-tap__cap { display: block; width: fit-content; margin: 18px auto 0; text-align: center; }
@media (max-width: 600px) {
  .sc-tap__scene { aspect-ratio: 100 / 122; }
  .sc-tap__hold { left: 3cqw; }
  .sc-tap__phone { --pw: 47cqw; }
  .sc-tap__crew { left: 48cqw; top: 13cqw; }
  .sc-tap__card { width: 16cqw; height: 25cqw; }
  .sc-tap__fist { left: 10.4cqw; top: 8.4cqw; width: 16.5cqw; height: 11cqw; }
  .sc-tap__arm { left: 26.7cqw; top: 9.72cqw; height: 8.8cqw; }
  .sc-tap__ring { left: 0; top: 7cqw; }
}
/* the tap plays once when the phone scrolls in; a tap on the phone plays it again */
html.js .sc-tap:not(.is-playing) .sc-tap__hold { transform: translate(-6cqw, 8cqw) rotate(-5deg); }
html.js .sc-tap:not(.is-playing) .sc-rev > *,
html.js .sc-tap:not(.is-playing) .sc-tap__ring { opacity: 0; }
html.js .sc-tap:not(.is-playing) .sc-rev__stars::after { width: 0; }
.sc-tap.is-playing .sc-tap__hold { animation: sc-reach 0.8s var(--fc-ease) both; }
.sc-tap.is-playing .sc-rev > * { animation: sc-fade 0.35s ease-out both; animation-delay: 0.85s; }
.sc-tap.is-playing .sc-rev > :nth-child(2) { animation-delay: 0.95s; }
.sc-tap.is-playing .sc-rev > :nth-child(n+3) { animation-delay: 1.05s; }
.sc-tap.is-playing .sc-rev__stars::after { animation: sc-stars 1.3s steps(5, end) 1.2s both; transition: none; }
.sc-tap.is-playing .sc-tap__ring { animation: sc-ring 1.1s ease-out 0.6s 2 both; }
.sc-tap.is-playing .sc-tap__ring--2 { animation-delay: 0.85s; }
@keyframes sc-reach { from { transform: translate(-6cqw, 8cqw) rotate(-5deg); } 70% { transform: translate(0.6cqw, -0.6cqw); } to { transform: none; } }
@keyframes sc-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes sc-stars { from { width: 0; } to { width: 100%; } }
@keyframes sc-ring { 0% { opacity: 0.9; transform: scale(0.3); } 100% { opacity: 0.45; transform: scale(1); } }

/* the stake line: eight survey stakes, each wearing flagging tape at its height, with a kraft
   tag tied at its foot. Row 1 of the grid is the tallest stake (--r1), row 2 the tags; every
   stake is a subgrid, so the posts share one ground line and each tag takes its own height. */
.sc-stakes { margin: clamp(72px, 9vw, 120px) 0 0; }
.sc-stakes__yard {
  --k: 2.1px;
  --r1: calc(130 * var(--k) + 12px);
  --signw: clamp(128px, 12vw, 164px);
  --signgap: clamp(10px, 2vw, 26px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0 var(--signgap);
}
.sc-stakes__sign { position: relative; display: grid; align-content: end; justify-items: center; width: var(--signw); height: calc(var(--r1) + 6px); }
.sc-stakes__sign p {
  position: relative;
  z-index: 2;
  padding: 14px 12px 12px;
  border: var(--fc-line);
  border-radius: 8px;
  background-color: var(--fc-wood);
  background-image: repeating-linear-gradient(176deg, rgba(122, 75, 42, 0.12) 0 2px, transparent 2px 10px);
  box-shadow: var(--fc-chunk);
  font-family: var(--fc-hand);
  font-size: clamp(0.95rem, 0.8rem + 0.4vw, 1.15rem);
  line-height: 1.2;
  text-align: center;
  color: var(--fc-ink);
  transform: rotate(-1deg);
}
.sc-stakes__sign i { position: relative; z-index: 2; display: block; width: 14px; height: 96px; margin-top: -4px; border: var(--fc-line); border-top: 0; background: linear-gradient(90deg, var(--fc-rail-a), var(--fc-rail-b)); }
.sc-stakes__scroll { min-width: 0; }
.sc-stakes__scroll:focus-visible { outline: 3px solid var(--fc-ink); outline-offset: 4px; border-radius: 8px; }
.sc-stakes__row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: var(--r1) auto;
  margin: 0;
  padding: 0 0 8px;
  list-style: none;
}
.sc-stake { --h: calc(var(--v) * var(--k)); position: relative; grid-row: span 2; display: grid; grid-template-rows: subgrid; justify-items: center; padding: 0 4px; }
/* one stretch of lawn edge per stake, so the strip runs on unbroken */
.sc-stake::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: calc(var(--r1) - 12px);
  height: 18px;
  border-block: var(--fc-line);
  background: var(--fc-stripes);
}
.sc-stakes__row .sc-stake:first-child::before { left: calc(-1 * var(--signw) - var(--signgap) - 24px); }
.sc-stake__post {
  position: relative;
  z-index: 2;
  grid-row: 1;
  align-self: end;
  width: clamp(16px, 1.7vw, 24px);
  height: calc(var(--h) + 12px);
  border: var(--fc-line);
  border-radius: 1px 1px 2px 2px;
  background:
    linear-gradient(90deg, transparent 30%, rgba(122, 75, 42, 0.25) 30% 36%, transparent 36% 64%, rgba(122, 75, 42, 0.2) 64% 68%, transparent 68%),
    linear-gradient(90deg, var(--fc-wood), var(--fc-rail-a));
  clip-path: polygon(0 12px, 50% 0, 100% 12px, 100% 100%, 0 100%);
  transform-origin: 50% 100%;
  transition: transform 0.9s var(--fc-bounce);
  transition-delay: calc(var(--i) * 90ms);
}
.sc-stake__tape {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: calc(var(--r1) - var(--h) - 2px);
  padding: 3px 9px 2px;
  border: var(--fc-line);
  border-radius: 3px;
  background: var(--fc-orange);
  box-shadow: 2px 2px 0 rgba(22, 58, 37, 0.35);
  color: var(--fc-ink-deep);
  font-family: var(--fc-hand);
  font-size: clamp(0.95rem, 0.75rem + 0.6vw, 1.3rem);
  font-weight: 400;
  line-height: 1.1;
  white-space: nowrap;
  transform: translateX(-50%) rotate(-4deg);
  transition: opacity 0.4s ease-out, translate 0.9s var(--fc-bounce);
  transition-delay: calc(var(--i) * 90ms + 0.2s);
}
.sc-stake:nth-child(2n) .sc-stake__tape { transform: translateX(-50%) rotate(3deg); }
/* the tail of the flagging tape hangs under the tape, clear of the number */
.sc-stake__tape::after {
  content: "";
  position: absolute;
  top: calc(100% - 3px);
  right: 10px;
  width: 11px;
  height: 18px;
  border: var(--fc-line);
  border-top: 0;
  background: var(--fc-orange);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
  transform: rotate(8deg);
  transform-origin: 50% 0;
  z-index: -1;
}
/* a kraft tag on a short string, tied at the foot of the stake */
.sc-stake__tag {
  position: relative;
  z-index: 3;
  grid-row: 2;
  align-self: start;
  width: calc(100% - 4px);
  max-width: 132px;
  margin-top: 26px;
  padding: 15px 5px 7px;
  border: 1.5px solid var(--fc-ink);
  border-radius: 3px 3px 9px 9px;
  background: radial-gradient(circle at 50% 7px, var(--fc-paper) 0 3px, var(--fc-ink) 3px 4.5px, transparent 4.5px), var(--fc-kraft);
  box-shadow: 2px 2px 0 rgba(22, 58, 37, 0.3);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: var(--fc-ink);
  transform: rotate(-0.8deg);
  transform-origin: 50% 0;
}
.sc-stake:nth-child(2n) .sc-stake__tag { transform: rotate(0.7deg); }
.sc-stake:nth-child(3n) .sc-stake__tag { margin-top: 32px; }
.sc-stake__tag::before { content: ""; position: absolute; left: calc(50% - 0.75px); bottom: calc(100% - 7px); width: 1.5px; height: 34px; background: var(--fc-ink); }
.sc-stake__tag b { font-weight: 800; }
.sc-stakes__cap { max-width: 44em; margin: 22px auto 0; font-weight: 600; text-align: center; color: var(--fc-ink-2); }
html.js .sc-stakes:not(.is-playing) .sc-stake__post { transform: scaleY(0.04); }
html.js .sc-stakes:not(.is-playing) .sc-stake__tape { opacity: 0; translate: 0 calc(var(--h) - 10px); }
@media (max-width: 1100px) {
  .sc-stake__tag { font-size: 0.68rem; }
}
/* under 900px the sign stands over the row, so the eight stakes get the full width */
@media (max-width: 900px) {
  .sc-stakes__yard { --k: 1.45px; grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .sc-stakes__sign { justify-self: start; width: auto; max-width: 17em; height: auto; }
  .sc-stakes__sign i { display: none; }
  .sc-stakes__row .sc-stake:first-child::before { left: -8px; }
  .sc-stakes__row .sc-stake:last-child::before { right: -8px; }
  .sc-stake__tape { font-size: 0.95rem; padding: 2px 6px 1px; }
  .sc-stake__tag { font-size: 0.66rem; padding-inline: 3px; }
}
/* on phones and small tablets the row keeps all eight in one line, shortest to tallest, and
   scrolls sideways (the kit's swipe hint shows under it) */
@media (max-width: 760px) {
  .sc-stakes__yard { --k: 1.3px; }
  .sc-stakes__scroll {
    margin-inline: calc(-1 * var(--fc-gutter));
    padding-inline: var(--fc-gutter);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--fc-gutter);
    scrollbar-width: none;
  }
  .sc-stakes__scroll::-webkit-scrollbar { display: none; }
  .sc-stakes__scroll:focus-visible { outline-offset: -3px; }
  .sc-stakes__row { grid-template-columns: repeat(8, 86px); width: max-content; }
  .sc-stake { scroll-snap-align: start; }
  #scStakes .fc-swipe { display: block; margin: 10px 0 0; font-family: var(--fc-hand); font-size: 1.05rem; text-align: center; color: var(--fc-orange-ink); }
  #scStakes .fc-swipe::after { content: " \2192"; }
}

.sc-proofrow { display: grid; gap: 34px; align-items: center; margin-top: clamp(56px, 7vw, 96px); }
@media (min-width: 960px) {
  .sc-proofrow { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 72px); }
}
.sc-shot {
  position: relative;
  padding: 10px 10px 14px;
  border: var(--fc-line);
  border-radius: 6px;
  background: var(--fc-white);
  box-shadow: 6px 6px 0 var(--fc-ink);
  transform: rotate(-0.8deg);
}
.sc-shot img { display: block; width: 100%; height: auto; border: 1.5px solid rgba(22, 58, 37, 0.25); border-radius: 2px; }
.sc-shot figcaption { margin-top: 12px; font-size: 0.9rem; font-weight: 600; line-height: 1.45; color: var(--fc-ink-2); }
.sc-shot figcaption .fc-proofchip { margin-right: 6px; vertical-align: 1px; }
.sc-after { max-width: 26em; font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); font-weight: 600; line-height: 1.5; }

/* ---------- 5. Job two: the rolodex on the office desk ---------- */
.sc-dollar strong { font-weight: 800; }
.sc-rolo { --u: 1cqw; position: relative; margin: 0; container-type: inline-size; }
.sc-rolo__head { display: grid; gap: 6px; margin-bottom: 18px; }
.sc-rolo__head p { font-weight: 600; color: var(--fc-ink-2); }
.sc-rolo__stage { position: relative; }
.sc-rolo__room {
  position: relative;
  aspect-ratio: 100 / 62.5;
  overflow: hidden;
  border: var(--fc-line);
  border-radius: var(--fc-r2);
  background: var(--fc-shopwall);
  box-shadow: var(--fc-chunk-lg);
}
.sc-rolo__bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-rolo__cone {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255, 233, 168, 0.85), rgba(255, 233, 168, 0.12) 70%);
  clip-path: polygon(35.4% 23.4%, 43.8% 27.4%, 83% 70.4%, 33% 70.4%);
}
.sc-rolo__wheel { position: absolute; left: 58%; top: 44%; width: 0; height: 0; }
.sc-rolo__fan {
  position: absolute;
  left: calc(var(--u) * -13);
  top: calc(var(--u) * -13);
  width: calc(var(--u) * 26);
  height: calc(var(--u) * 26);
  border: var(--fc-line);
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--fc-rubber) 0 calc(var(--u) * 3), var(--fc-ink) calc(var(--u) * 3) calc(var(--u) * 3 + 2px), transparent calc(var(--u) * 3 + 2px)),
    repeating-conic-gradient(var(--fc-white) 0deg 3.4deg, var(--fc-kraft) 3.4deg 6deg, rgba(22, 58, 37, 0.55) 6deg 7.2deg);
  box-shadow: inset 0 0 0 calc(var(--u) * 0.8) rgba(22, 58, 37, 0.12);
  transition: transform 0.6s var(--fc-ease);
}
.sc-rolo__arm {
  position: absolute;
  left: calc(var(--u) * -17.5);
  top: calc(var(--u) * -1);
  width: calc(var(--u) * 2.2);
  height: calc(var(--u) * 16);
  border: var(--fc-line);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--fc-steel-a), var(--fc-steel-b));
  transform: rotate(14deg);
  transform-origin: 50% 0;
}
.sc-rolo__arm--r { left: auto; right: calc(var(--u) * -17.5); transform: rotate(-14deg); }
.sc-rolo__knob {
  position: absolute;
  z-index: 3;
  left: calc(var(--u) * -19.5);
  top: calc(var(--u) * -3);
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  border: var(--fc-line);
  border-radius: 50%;
  background:
    linear-gradient(var(--fc-ink), var(--fc-ink)) 50% 50% / 2px 70% no-repeat,
    radial-gradient(circle at 35% 30%, var(--fc-rubber-2), var(--fc-rubber));
  transition: transform 0.6s var(--fc-ease);
}
.sc-rolo__knob--r { left: auto; right: calc(var(--u) * -19.5); }
.sc-rolo__base {
  position: absolute;
  z-index: 2;
  left: calc(var(--u) * -21);
  top: calc(var(--u) * 13.5);
  display: grid;
  place-items: center;
  width: calc(var(--u) * 42);
  height: calc(var(--u) * 5.5);
  border: var(--fc-line);
  border-radius: calc(var(--u) * 1.4) calc(var(--u) * 1.4) calc(var(--u) * 0.6) calc(var(--u) * 0.6);
  background: linear-gradient(var(--fc-rubber-2), var(--fc-rubber));
}
.sc-rolo__base b {
  padding: calc(var(--u) * 0.4) calc(var(--u) * 1.8);
  border: 1.5px solid var(--fc-ink);
  border-radius: 3px;
  background: linear-gradient(var(--fc-brass-hi), var(--fc-brass) 60%, var(--fc-brass-lo));
  color: var(--fc-ink);
  font-family: var(--fc-display);
  font-size: max(9px, calc(var(--u) * 1.8));
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.1;
}
.sc-rolo__top {
  position: absolute;
  z-index: 4;
  left: calc(var(--u) * -11.5);
  top: calc(var(--u) * -22);
  display: grid;
  align-content: start;
  gap: calc(var(--u) * 0.3);
  width: calc(var(--u) * 23);
  height: calc(var(--u) * 14);
  padding: calc(var(--u) * 1.4) calc(var(--u) * 1.6);
  border: var(--fc-line);
  border-radius: calc(var(--u) * 0.8);
  background: linear-gradient(transparent calc(var(--u) * 4.4), rgba(180, 35, 24, 0.4) calc(var(--u) * 4.4) calc(var(--u) * 4.4 + 1px), transparent calc(var(--u) * 4.4 + 1px)), var(--fc-white);
  box-shadow: calc(var(--u) * 0.6) calc(var(--u) * 0.6) 0 rgba(22, 58, 37, 0.3);
  color: var(--fc-ink);
  line-height: 1.15;
  transition: opacity 0.25s;
}
.sc-rolo__top b { font-family: var(--fc-display); font-size: max(11px, calc(var(--u) * 2.4)); font-weight: 400; }
.sc-rolo__top span { margin-top: calc(var(--u) * 0.8); font-family: var(--fc-mono); font-size: max(9.5px, calc(var(--u) * 1.8)); font-weight: 700; }
.sc-rolo__top small { font-size: max(9px, calc(var(--u) * 1.55)); font-weight: 600; color: var(--fc-ink-2); }
.sc-rolo__top.is-dim { opacity: 0.25; }
.sc-rolo__flyer { z-index: 6; opacity: 0; pointer-events: none; }
.sc-rolo__flyer.is-fly { animation: sc-fly 0.9s cubic-bezier(0.3, 0.7, 0.3, 1) forwards; }
@keyframes sc-fly {
  0% { opacity: 1; transform: translate(calc(var(--u) * -34), calc(var(--u) * 38)) rotate(-24deg) scale(0.45); }
  55% { opacity: 1; transform: translate(calc(var(--u) * -12), calc(var(--u) * -9)) rotate(-8deg) scale(0.9); }
  100% { opacity: 1; transform: none; }
}
.sc-rolo__rig {
  position: absolute;
  z-index: 5;
  left: calc(var(--u) * 15);
  top: calc(var(--u) * -0.5);
  display: grid;
  justify-items: center;
  transform-origin: 50% 0;
}
.sc-rolo__rig i { display: block; width: 2px; height: calc(var(--u) * 6); background: var(--fc-ink); }
.sc-rolo__rig b {
  padding: calc(var(--u) * 0.6) calc(var(--u) * 1.4) calc(var(--u) * 0.6) calc(var(--u) * 2.4);
  border: 1.5px solid var(--fc-ink);
  border-radius: 3px calc(var(--u) * 0.8) calc(var(--u) * 0.8) 3px;
  background: radial-gradient(circle at calc(var(--u) * 1.1) 50%, var(--fc-shopwall) 0 calc(var(--u) * 0.45), var(--fc-ink) calc(var(--u) * 0.45) calc(var(--u) * 0.45 + 1px), transparent calc(var(--u) * 0.45 + 1px)), var(--fc-kraft);
  box-shadow: 2px 2px 0 rgba(22, 58, 37, 0.3);
  font-size: max(10px, calc(var(--u) * 1.7));
  font-weight: 800;
  white-space: nowrap;
}
.sc-rolo__rig.is-swing { animation: sc-swing 1s ease-out; }
@keyframes sc-swing { 20% { transform: rotate(14deg); } 45% { transform: rotate(-9deg); } 70% { transform: rotate(4deg); } 100% { transform: none; } }
.sc-rolo__card { position: absolute; z-index: 7; left: 7%; bottom: 3%; width: calc(var(--u) * 13); aspect-ratio: 64 / 100; transform: rotate(-6deg); }
.sc-rolo__card svg { display: block; width: 100%; height: 100%; filter: drop-shadow(calc(var(--u) * 0.8) calc(var(--u) * 0.8) 0 rgba(22, 58, 37, 0.4)); }
.sc-rolo__ripple { position: absolute; left: 50%; top: 22%; width: 150%; aspect-ratio: 1; margin-left: -75%; border: 3px solid var(--fc-orange); border-radius: 50%; opacity: 0; transform: translateY(-50%); pointer-events: none; }
.sc-rolo__ripple.is-go { animation: sc-ripple 0.8s ease-out; }
@keyframes sc-ripple { 0% { opacity: 0.95; transform: translateY(-50%) scale(0.2); } 100% { opacity: 0; transform: translateY(-50%) scale(1.3); } }
.sc-rolo__hit {
  position: absolute;
  inset: 0;
  z-index: 8;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--fc-r2);
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sc-rolo__hit:focus-visible { outline: 3px solid var(--fc-ink); outline-offset: 4px; }
.sc-rolo__sample { position: absolute; z-index: 9; top: -12px; right: 16px; pointer-events: none; }
.sc-rolo__pause { position: absolute; z-index: 9; right: 14px; bottom: 14px; }
.sc-rolo.is-paused .fc-tape__pause { display: none; }
.sc-rolo.is-paused .fc-tape__play { display: block; }
html:not(.js) .sc-rolo__pause { display: none; }
@media (max-width: 600px) {
  .sc-rolo { --u: 1.5cqw; }
  .sc-rolo__room { aspect-ratio: 100 / 86; }
  .sc-rolo__wheel { left: 55%; top: 50%; }
  .sc-rolo__card { left: 4%; bottom: 3%; width: calc(var(--u) * 12); }
  .sc-rolo__rig { left: calc(var(--u) * 10); top: calc(var(--u) * 5); }
  .sc-rolo__cone { clip-path: polygon(27% 34%, 36% 37%, 92% 80%, 24% 80%); }
}

/* ---------- 6. Job three: the truck visor and the page it opens ---------- */
.sc-visor { position: relative; justify-self: center; width: min(100%, 660px); margin: 0; container-type: inline-size; }
.sc-visor__cab {
  position: relative;
  aspect-ratio: 100 / 80;
  overflow: hidden;
  border: var(--fc-line);
  border-radius: var(--fc-r3);
  background:
    linear-gradient(var(--fc-smoke) 0 10cqw, var(--fc-ink) 10cqw calc(10cqw + 2px), transparent calc(10cqw + 2px)),
    repeating-linear-gradient(90deg, transparent 0 1.2cqw, rgba(22, 58, 37, 0.04) 1.2cqw 1.4cqw) 0 0 / 100% 10cqw no-repeat,
    linear-gradient(var(--fc-sky) 0 50cqw, var(--fc-ink) 50cqw calc(50cqw + 2px), transparent calc(50cqw + 2px)),
    repeating-linear-gradient(90deg, var(--fc-lawn-a) 0 8cqw, var(--fc-lawn-b) 8cqw 16cqw);
  box-shadow: var(--fc-chunk-lg);
}
/* the dash along the bottom of the windshield */
.sc-visor__cab::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -2px;
  height: 12cqw;
  border: var(--fc-line);
  border-radius: 6cqw 6cqw 0 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 2cqw, rgba(255, 255, 255, 0.08) 2cqw 2.8cqw) 50% 4cqw / 18cqw 3cqw no-repeat,
    var(--fc-asphalt);
}
.sc-visor__glass {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(10cqw + 2px);
  height: 40cqw;
  background: linear-gradient(115deg, transparent 0 55%, rgba(255, 255, 255, 0.35) 55% 60%, transparent 60% 64%, rgba(255, 255, 255, 0.25) 64% 66%, transparent 66%);
}
.sc-visor__flap {
  position: absolute;
  z-index: 2;
  left: 3.4cqw;
  top: 10cqw;
  width: 61cqw;
  height: 35cqw;
  border: var(--fc-line);
  border-radius: 1.4cqw 1.4cqw 5cqw 5cqw;
  background-color: var(--fc-smoke);
  background-image:
    radial-gradient(rgba(22, 58, 37, 0.06) 1px, transparent 1.4px),
    linear-gradient(rgba(255, 255, 255, 0.35), transparent 30%);
  background-size: 6px 6px, 100% 100%;
  box-shadow: var(--fc-chunk-lg), inset 0 0 0 1.2cqw var(--fc-smoke), inset 0 0 0 calc(1.2cqw + 1.5px) rgba(22, 58, 37, 0.25);
}
.sc-visor__rod {
  position: absolute;
  left: 6cqw;
  right: 6cqw;
  top: -1.6cqw;
  height: 2cqw;
  border: var(--fc-line);
  border-radius: 999px;
  background: linear-gradient(var(--fc-steel-a), var(--fc-steel-b));
}
.sc-visor__strap {
  position: absolute;
  z-index: 5;
  left: -2px;
  right: -2px;
  top: 3.2cqw;
  height: 2.6cqw;
  border-block: var(--fc-line);
  background: repeating-linear-gradient(90deg, var(--fc-rubber) 0 0.8cqw, var(--fc-rubber-2) 0.8cqw 1.1cqw);
  pointer-events: none;
}
.sc-bcards { position: absolute; z-index: 3; left: 3cqw; top: 2.2cqw; width: 23cqw; height: 14.5cqw; }
.sc-bcards__under {
  position: absolute;
  inset: 0;
  border: var(--fc-line);
  border-radius: 0.6cqw;
  background: var(--fc-white);
  transform: rotate(-5deg);
}
.sc-bcards__under--2 { transform: rotate(4deg) translate(0.6cqw, 0.4cqw); background: var(--fc-paper-2); }
.sc-bcards__top {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: end;
  justify-items: start;
  gap: 0.2cqw;
  padding: 1.2cqw 1.8cqw 1.5cqw;
  border: var(--fc-line);
  border-radius: 0.6cqw;
  background: var(--fc-white);
  line-height: 1.15;
  transform: rotate(-1deg);
}
.sc-bcards__top b { white-space: nowrap; font-family: var(--fc-display); font-size: clamp(9px, 1.65cqw, 12px); font-weight: 400; letter-spacing: 0.04em; }
.sc-bcards__new { font-size: clamp(11px, 2.4cqw, 16px); }
.sc-bcards__old { font-family: var(--fc-mono); font-size: clamp(8.5px, 1.75cqw, 12px); font-weight: 700; color: var(--fc-ink-3); text-decoration-color: var(--fc-red-ink); text-decoration-thickness: 2px; }
.sc-bcards__band { position: absolute; z-index: 2; top: -1cqw; bottom: -1cqw; left: 90%; width: 1.4cqw; border: 1.5px solid var(--fc-ink); border-radius: 3px; background: var(--fc-peach); }
.sc-faded {
  position: absolute;
  z-index: 3;
  left: 29cqw;
  top: 1.6cqw;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 0.8cqw;
  width: 13cqw;
  height: 29cqw;
  padding: 7cqw 1cqw 1cqw;
  border: var(--fc-line);
  border-radius: 1cqw 1cqw 0.6cqw 0.6cqw;
  background:
    radial-gradient(circle at 50% 2.6cqw, var(--fc-smoke) 0 1.5cqw, var(--fc-ink) 1.5cqw calc(1.5cqw + 2px), transparent calc(1.5cqw + 2px)),
    linear-gradient(transparent 60%, rgba(255, 255, 255, 0.4)),
    var(--fc-sun-2);
  color: var(--fc-ink-2);
  text-align: center;
  line-height: 1.15;
  transform: rotate(1deg);
}
.sc-faded b { font-family: var(--fc-display); font-size: clamp(8.5px, 1.85cqw, 12.5px); font-weight: 400; letter-spacing: 0.04em; }
.sc-faded span { font-size: clamp(7.5px, 1.45cqw, 10px); font-weight: 800; letter-spacing: 0.06em; }
.sc-sleeve {
  position: absolute;
  z-index: 4;
  right: 4cqw;
  top: 1.6cqw;
  width: 14.6cqw;
  height: 22.4cqw;
  padding: 0.8cqw;
  border: var(--fc-line);
  border-radius: 1.2cqw;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.55) 0 30%, rgba(255, 255, 255, 0.2) 30% 42%, rgba(255, 255, 255, 0.5) 42%);
  box-shadow: 0.5cqw 0.5cqw 0 rgba(22, 58, 37, 0.3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sc-sleeve__card { display: block; width: 100%; height: 100%; }
.sc-sleeve__card svg { display: block; width: 100%; height: 100%; }
.sc-sleeve::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1.2cqw;
  background: linear-gradient(120deg, transparent 0 55%, rgba(255, 255, 255, 0.45) 55% 62%, transparent 62%);
  pointer-events: none;
}
.sc-sleeve__ring {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 20cqw;
  height: 20cqw;
  margin: -10cqw 0 0 -10cqw;
  border: 3px solid var(--fc-orange);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.sc-sleeve.is-tap .sc-sleeve__ring { animation: sc-ringout 1.2s ease-out both; }
.sc-sleeve.is-tap .sc-sleeve__ring--2 { animation-delay: 0.3s; }
@keyframes sc-ringout { 0% { opacity: 0.95; transform: scale(0.25); } 100% { opacity: 0; transform: scale(1.4); } }
.sc-sleeve__tag {
  position: absolute;
  top: calc(100% + 3.4cqw);
  left: 50%;
  width: 13cqw;
  padding: 1.2cqw 0.8cqw 1cqw;
  border: 1.5px solid var(--fc-ink);
  border-radius: 0.6cqw 0.6cqw 1.2cqw 1.2cqw;
  background: var(--fc-kraft);
  box-shadow: 2px 2px 0 rgba(22, 58, 37, 0.3);
  color: var(--fc-ink);
  font-size: clamp(8px, 1.6cqw, 11px);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-align: center;
  translate: -50% 0;
  transform-origin: 50% -3.4cqw;
}
.sc-sleeve__tag i { position: absolute; left: 50%; bottom: 100%; width: 1.5px; height: 3.6cqw; background: var(--fc-ink); }
.sc-sleeve__tag.is-nod { animation: sc-nod 0.9s ease-out; }
@keyframes sc-nod { 25% { transform: rotate(10deg); } 55% { transform: rotate(-6deg); } 80% { transform: rotate(2deg); } 100% { transform: none; } }
.sc-sleeve:focus-visible { outline: 3px solid var(--fc-ink); outline-offset: 3px; }
/* the phone in a windshield mount, showing the page the card opens */
.sc-visor__hold { position: absolute; z-index: 3; right: 3.5cqw; top: 8cqw; }
.sc-visor__phone { --pw: 31cqw; transform: rotate(2deg); }
.sc-visor__tag { top: -12px; right: auto; left: -8px; }
.sc-visor__phone::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -1.6cqw;
  right: -1.6cqw;
  top: 44%;
  height: 4cqw;
  border: var(--fc-line);
  border-radius: 1cqw;
  background: linear-gradient(var(--fc-rubber-2), var(--fc-rubber));
}
/* one column the width of the screen: a long line never stretches the rows past the glass */
.sc-visor__phone .fc-phone__screen { padding: calc(var(--pw) * 0.16) calc(var(--pw) * 0.05) calc(var(--pw) * 0.05); display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: calc(var(--pw) * 0.024); font-size: calc(var(--pw) * 0.056); line-height: 1.2; transition: background-color 0.5s; }
.sc-visor__phone .fc-phone__notch { top: calc(var(--pw) * 0.04); width: calc(var(--pw) * 0.3); height: calc(var(--pw) * 0.08); margin-left: calc(var(--pw) * -0.15); }
.sc-links__url {
  min-width: 0;
  padding: 0.35em 0.5em;
  border-radius: 999px;
  background: var(--fc-paper-2);
  font-family: var(--fc-mono);
  font-size: max(8px, 0.9em);
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
  font-weight: 700;
  text-align: center;
  color: var(--fc-ink-2);
}
.sc-links__wm { margin: 0.35em 0 0.1em; font-size: 1.28em; line-height: 1.05; text-align: center; color: var(--fc-clover-2); }
.sc-links { display: grid; gap: 0.3em; margin: 0; padding: 0; list-style: none; }
.sc-links li {
  display: flex;
  align-items: center;
  gap: 0.55em;
  min-width: 0;
  padding: 0.36em 0.6em;
  border: 1.5px solid var(--fc-ink);
  border-radius: 0.6em;
  background: var(--fc-white);
  box-shadow: 2px 2px 0 rgba(22, 58, 37, 0.25);
  font-weight: 700;
}
.sc-links svg,
.sc-deal svg { flex: none; width: 1.35em; height: 1.35em; }
.sc-deal {
  display: flex;
  align-items: center;
  gap: 0.55em;
  width: 100%;
  min-height: 44px;
  padding: 0.45em 0.6em;
  border: 2px solid var(--fc-ink);
  border-radius: 0.6em;
  background: var(--fc-sun);
  box-shadow: 2px 2px 0 var(--fc-ink);
  color: var(--fc-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sc-deal__box { display: grid; gap: 0.1em; min-width: 0; }
.sc-deal__box b { font-size: 0.8em; font-weight: 800; letter-spacing: 0.12em; }
.sc-deal__text { font-weight: 700; transition: opacity 0.22s, transform 0.22s; }
.sc-deal.is-out .sc-deal__text { opacity: 0; transform: translateY(-40%) rotateX(60deg); }
.sc-links__upd { font-size: max(9px, 0.82em); font-weight: 600; text-align: center; color: var(--fc-ink-2); }
.sc-visor__note { margin-top: 16px; font-size: 0.9rem; font-weight: 600; text-align: center; color: var(--fc-ink-2); }
.sc-visor__pause { position: absolute; z-index: 6; left: 3cqw; top: calc(80cqw - 58px); }
/* the button sits on the dark dash (and, on phones, across the lawn line): a sun ring over an ink
   band, so the ring shows on asphalt and on grass alike */
#scVisor .sc-visor__pause:focus-visible { outline-color: var(--fc-sun); box-shadow: 0 0 0 3px var(--fc-ink), 3px 3px 0 var(--fc-ink); }
.sc-visor.is-paused .fc-tape__pause { display: none; }
.sc-visor.is-paused .fc-tape__play { display: block; }
html:not(.js) .sc-visor__pause { display: none; }
/* before the scene lights up: the phone screen is dark */
html.js .sc-visor:not(.is-lit) .fc-phone__screen { background: var(--fc-case-ink-2); }
html.js .sc-visor:not(.is-lit) .fc-phone__screen > :not(.fc-phone__notch) { opacity: 0; }
.sc-visor .fc-phone__screen > * { transition: opacity 0.5s 0.2s; }
@media (max-width: 600px) {
  .sc-visor__cab { aspect-ratio: 100 / 178; }
  .sc-visor__flap { left: 3cqw; right: 3cqw; width: auto; top: 10cqw; height: 58cqw; }
  .sc-bcards { left: 4cqw; top: 4cqw; width: 40cqw; height: 24cqw; }
  .sc-faded { left: 46cqw; top: 3cqw; width: 20cqw; height: 44cqw; padding-top: 10cqw; }
  .sc-faded b { font-size: 10px; }
  .sc-faded span { font-size: 9px; }
  .sc-sleeve { right: 5cqw; top: 3cqw; width: 22cqw; height: 34cqw; }
  .sc-sleeve__tag { width: 24cqw; top: calc(100% + 4cqw); font-size: 10px; }
  .sc-visor__strap { top: 6cqw; height: 4cqw; }
  .sc-visor__hold { left: 50%; right: auto; top: 74cqw; translate: -50% 0; }
  .sc-visor__phone { --pw: 49cqw; transform: rotate(1deg); }
  .sc-visor__phone .fc-phone__screen { gap: calc(var(--pw) * 0.018); }
  .sc-links { gap: 0.26em; }
  .sc-links li { padding-block: 0.3em; }
  .sc-visor__pause { left: 4cqw; top: auto; bottom: calc(18cqw + 36px); }
  .sc-visor__cab::after { height: 16cqw; }
}

/* ---------- 7. The tool roll on the tailgate ---------- */
.sc-roll { position: relative; margin: 0; }
.sc-roll__gate { padding-bottom: 80px; }
.sc-roll__canvas {
  position: relative;
  z-index: 1;
  width: min(100%, 880px);
  margin: 0 auto;
  padding: 26px clamp(10px, 3vw, 34px) 30px;
  border: var(--fc-line);
  border-radius: 20px 20px 12px 12px;
  background-color: var(--fc-kraft);
  background-image:
    repeating-linear-gradient(0deg, rgba(122, 75, 42, 0.07) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(122, 75, 42, 0.06) 0 1px, transparent 1px 5px);
  box-shadow: var(--fc-chunk-lg), inset 0 0 0 7px var(--fc-kraft), inset 0 0 0 9px rgba(122, 75, 42, 0.35);
}
.sc-roll__flap {
  position: absolute;
  left: 18px;
  right: 18px;
  top: -18px;
  height: 30px;
  border: var(--fc-line);
  border-radius: 14px 14px 4px 4px;
  background: linear-gradient(var(--fc-wood), var(--fc-kraft));
  box-shadow: inset 0 -6px 0 rgba(122, 75, 42, 0.15);
}
.sc-roll__flap::after { content: ""; position: absolute; left: 12px; right: 12px; top: 8px; border-top: 2px dashed rgba(122, 75, 42, 0.55); }
/* the right end of the roll is rolled up, a leather strap around it */
.sc-roll__coil {
  position: absolute;
  z-index: 2;
  top: -30px;
  bottom: -10px;
  right: -34px;
  width: 58px;
  border: var(--fc-line);
  border-radius: 29px / 16px;
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(122, 75, 42, 0.18) 9px 11px),
    linear-gradient(90deg, var(--fc-wood), var(--fc-kraft) 45%, var(--fc-wood) 80%, var(--fc-rail-a));
  box-shadow: var(--fc-chunk-lg);
}
/* the end of the roll: a spiral of canvas */
.sc-roll__coil i {
  position: absolute;
  left: -2px;
  right: -2px;
  top: -2px;
  height: 32px;
  border: var(--fc-line);
  border-radius: 50%;
  background: repeating-radial-gradient(ellipse at 46% 50%, var(--fc-kraft) 0 3px, rgba(122, 75, 42, 0.55) 3px 4.5px);
}
.sc-roll__strap {
  position: absolute;
  z-index: 3;
  right: -42px;
  top: 44%;
  width: 72px;
  height: 26px;
  border: var(--fc-line);
  border-radius: 6px;
  background: linear-gradient(var(--fc-rail-b), var(--fc-soil));
}
.sc-roll__strap::after { content: ""; position: absolute; left: 12px; top: 1px; width: 16px; height: 18px; border: 3px solid var(--fc-brass); border-radius: 3px; }
/* four pockets of different widths, each tool a different tool at its own height */
.sc-roll__pockets { display: grid; grid-template-columns: 1.1fr 1fr 0.82fr 1.25fr; gap: 0; margin-top: 76px; margin-right: 18px; }
.sc-pocket {
  --tool: var(--fc-sun);
  --fh: 136px;
  --th: 206px;
  --tx: 12px;
  position: relative;
  display: block;
  height: 180px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fc-ink);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sc-pocket--1 { --fh: 128px; }
.sc-pocket--2 { --fh: 136px; --th: 206px; --tx: 13px; --st: -22px; }
.sc-pocket--3 { --fh: 118px; --th: 236px; --tx: 6px; --st: -8px; }
.sc-pocket--4 { --fh: 146px; --th: 194px; --tx: 11px; --st: -14px; }
.sc-pocket:focus-visible { outline: 3px solid var(--fc-ink); outline-offset: 2px; border-radius: 12px; }
.sc-pocket__front {
  position: absolute;
  z-index: 2;
  left: 5%;
  right: 5%;
  bottom: 0;
  display: grid;
  place-items: center;
  height: var(--fh);
  padding: 10px;
  border: var(--fc-line);
  border-radius: 6px 6px 16px 16px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.28), transparent 26%),
    var(--fc-wood);
  box-shadow: inset 0 0 0 6px var(--fc-wood), inset 0 0 0 8px rgba(122, 75, 42, 0.35), 0 4px 0 rgba(22, 58, 37, 0.18);
}
.sc-pocket__front::before { content: ""; position: absolute; left: 10px; right: 10px; top: 8px; border-top: 2px dashed rgba(122, 75, 42, 0.5); }
.sc-patch {
  display: grid;
  place-items: center;
  width: 86%;
  min-height: 52px;
  padding: 8px 6px;
  border: 2px solid var(--fc-ink);
  border-radius: 12px;
  background: var(--fc-clover-2);
  box-shadow: inset 0 0 0 3px var(--fc-clover-2), inset 0 0 0 4.5px var(--fc-sun);
  color: var(--fc-chalk);
  font-size: clamp(0.72rem, 0.6rem + 0.35vw, 0.95rem);
  line-height: 1.1;
  text-align: center;
}
.sc-pocket__tool {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 8px;
  width: calc(var(--th) * 0.2);
  height: var(--th);
  margin-left: calc(var(--th) * -0.1);
  color: var(--tool);
  transition: transform 0.45s var(--fc-bounce);
}
.sc-pocket__tool > svg { display: block; width: 100%; height: 100%; }
.sc-pocket[aria-pressed="true"] .sc-pocket__tool { transform: translateY(-46px); }
/* the SOON tag on a thread from the handle; it turns over to one plain line */
.sc-soon { position: absolute; z-index: 3; top: var(--st, -24px); left: calc(50% + var(--tx)); width: 118px; color: var(--fc-ink); perspective: 500px; transform-origin: 0 0; transition: translate 0.45s var(--fc-bounce); }
.sc-pocket[aria-pressed="true"] .sc-soon { translate: 0 -46px; }
.sc-soon > i { position: absolute; left: 0; top: 0; width: 20px; height: 2px; background: var(--fc-ink); transform: rotate(38deg); transform-origin: 0 0; }
.sc-soon__card { position: relative; display: grid; margin: 12px 0 0 12px; transform-style: preserve-3d; transition: transform 0.55s var(--fc-ease); }
.sc-soon__a,
.sc-soon__b {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  min-height: 40px;
  padding: 7px 8px 7px 16px;
  border: 1.5px solid var(--fc-ink);
  border-radius: 4px 10px 10px 4px;
  background: radial-gradient(circle at 8px 50%, var(--fc-kraft) 0 3px, var(--fc-ink) 3px 4.5px, transparent 4.5px), var(--fc-white);
  box-shadow: 2px 2px 0 rgba(22, 58, 37, 0.3);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.sc-soon__a { justify-self: start; align-self: start; width: 74px; font-weight: 800; letter-spacing: 0.14em; font-size: 0.78rem; color: var(--fc-red-ink); }
.sc-soon__b { font-size: 0.74rem; font-weight: 700; line-height: 1.25; text-align: left; transform: rotateY(180deg); visibility: hidden; transition: visibility 0s linear 0.27s; }
.sc-soon__a { transition: visibility 0s linear 0.27s; }
.sc-pocket[aria-pressed="true"] .sc-soon__card { transform: rotateY(180deg); }
.sc-pocket[aria-pressed="true"] .sc-soon__a { visibility: hidden; }
.sc-pocket[aria-pressed="true"] .sc-soon__b { visibility: visible; }
/* an open pocket lifts above its neighbours, so their SOON tags, the coil and the strap never cover its turned tag */
.sc-pocket[aria-pressed="true"] { z-index: 4; }
/* a turned tag carries a sentence: it hangs level (the tilt budget), and stops swaying */
.sc-roll .sc-pocket[aria-pressed="true"] .sc-soon { animation: none; transform: none; }
/* only the face that shows takes a tap, so a tag hanging over the next pocket never steals it */
.sc-soon,
.sc-soon__card { pointer-events: none; }
.sc-soon__a,
.sc-soon__b { pointer-events: auto; }
.sc-roll.is-on .sc-soon { animation: sc-sway 2.4s ease-in-out 2; }
.sc-roll .sc-pocket:nth-child(3) .sc-soon { animation-delay: 0.4s; }
.sc-roll .sc-pocket:nth-child(4) .sc-soon { animation-delay: 0.8s; }
@keyframes sc-sway { 25% { transform: rotate(-4deg); } 75% { transform: rotate(3deg); } }
/* pocket 1 hangs empty and slack: its tool is out on the tailgate */
.sc-pocket--empty .sc-pocket__front { border-radius: 22px 22px 18px 18px / 10px 10px 18px 18px; transform: skewX(-2deg); }
.sc-pocket__mouth {
  position: absolute;
  z-index: 1;
  left: 12%;
  right: 12%;
  bottom: calc(var(--fh) - 12px);
  height: 22px;
  border: var(--fc-line);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%, var(--fc-soil), var(--fc-ink-deep));
}
.sc-pocket--empty.is-point .sc-pocket__front { animation: sc-point 0.5s ease-out; }
@keyframes sc-point { 40% { transform: skewX(-2deg) translateY(6px); } }
/* the tool that is out, lying on the tailgate with its tag */
.sc-roll__bench { position: absolute; z-index: 3; left: 2%; right: auto; bottom: 34px; justify-content: flex-start; }
.sc-out {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 10px 6px;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sc-out:focus-visible { outline: 3px solid var(--fc-ink); outline-offset: 4px; border-radius: 10px; }
.sc-out__tool { position: relative; display: flex; align-items: center; transform: rotate(-3deg); }
.sc-out__tip { width: 12px; height: 8px; border: 2px solid var(--fc-ink); border-right: 0; border-radius: 3px 0 0 3px; background: var(--fc-steel-b); }
.sc-out__shank { width: clamp(90px, 13vw, 150px); height: 10px; border: 2px solid var(--fc-ink); border-inline: 0; background: linear-gradient(var(--fc-steel-a), var(--fc-steel-b)); }
.sc-out__collar { width: 16px; height: 18px; border: 2px solid var(--fc-ink); border-radius: 3px; background: var(--fc-steel-b); }
.sc-out__handle {
  position: relative;
  width: clamp(92px, 11vw, 120px);
  height: 38px;
  border: var(--fc-line);
  border-radius: 8px 19px 19px 8px;
  background:
    linear-gradient(90deg, transparent 20%, rgba(22, 58, 37, 0.22) 20% 22%, transparent 22% 42%, rgba(22, 58, 37, 0.22) 42% 44%, transparent 44% 64%, rgba(22, 58, 37, 0.22) 64% 66%, transparent 66%),
    linear-gradient(rgba(255, 255, 255, 0.35), transparent 45%),
    var(--fc-orange);
}
.sc-out__cap {
  position: absolute;
  right: -2px;
  top: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  border: var(--fc-line);
  border-radius: 50%;
  background: var(--fc-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z' fill='%23FFD23F' stroke='%23163A25' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
  transform: rotate(var(--turn, 0deg));
  transition: transform 0.45s var(--fc-bounce);
}
.sc-out__star {
  position: absolute;
  right: -6px;
  top: -22px;
  width: 26px;
  height: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z' fill='%23FFD23F' stroke='%23163A25' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  pointer-events: none;
}
.sc-out__star.is-tick { animation: sc-tick 0.8s var(--fc-bounce); }
@keyframes sc-tick { 0% { opacity: 0; transform: scale(0.2); } 35% { opacity: 1; transform: scale(1.25) rotate(20deg); } 75% { opacity: 1; transform: translateY(-6px) scale(1); } 100% { opacity: 0; transform: translateY(-12px) scale(0.9); } }
.sc-out__tag {
  position: relative;
  display: grid;
  margin: 26px 0 0 -58px;
  padding: 7px 12px 7px 20px;
  border: 1.5px solid var(--fc-ink);
  border-radius: 4px 10px 10px 4px;
  background: radial-gradient(circle at 9px 50%, var(--fc-clover-2) 0 3px, var(--fc-ink) 3px 4.5px, transparent 4.5px), var(--fc-kraft);
  box-shadow: 2px 2px 0 rgba(22, 58, 37, 0.3);
  color: var(--fc-ink);
  line-height: 1.2;
  text-align: left;
  transform: rotate(-1deg);
}
.sc-out__tag i { position: absolute; left: 4px; top: -18px; width: 2px; height: 22px; background: var(--fc-ink); transform: rotate(-30deg); }
.sc-out__tag b { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.14em; color: var(--fc-red-ink); }
.sc-out__tag span { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; }
.sc-roll__tape { position: absolute; z-index: 3; right: 7%; bottom: 20px; font-size: 1.05rem; }
.sc-roll__cap { font-size: 1.15rem; line-height: 1.4; transform: rotate(-1deg); }
.sc-roll__link { display: inline-flex; align-items: center; min-height: 44px; }
/* on phones the roll stays one object: the four pockets in one row, the tools and patches smaller */
@media (max-width: 760px) {
  .sc-roll__gate { padding-bottom: 76px; }
  .sc-roll__canvas { padding: 22px 8px 58px; border-radius: 16px 16px 10px 10px; }
  .sc-roll__flap { left: 12px; right: 12px; }
  .sc-roll__coil { right: -14px; width: 34px; top: -24px; border-radius: 17px / 11px; }
  .sc-roll__coil i { height: 22px; }
  .sc-roll__strap { right: -20px; width: 44px; height: 20px; }
  .sc-roll__strap::after { left: 7px; width: 12px; height: 12px; border-width: 2.5px; }
  .sc-roll__pockets { grid-template-columns: 1fr 0.95fr 0.8fr 1.45fr; gap: 4px; margin: 62px 16px 0 0; }
  .sc-pocket { height: 132px; }
  .sc-pocket--1 { --fh: 92px; }
  .sc-pocket--2 { --fh: 98px; --th: 150px; }
  .sc-pocket--3 { --fh: 86px; --th: 172px; }
  .sc-pocket--4 { --fh: 104px; --th: 142px; }
  .sc-pocket__front { left: 3%; right: 3%; padding: 6px 3px; box-shadow: inset 0 0 0 4px var(--fc-wood), inset 0 0 0 5.5px rgba(122, 75, 42, 0.35), 0 3px 0 rgba(22, 58, 37, 0.18); }
  .sc-pocket__front::before { left: 6px; right: 6px; top: 5px; }
  .sc-pocket__tool { bottom: 6px; }
  .sc-pocket[aria-pressed="true"] .sc-pocket__tool { transform: translateY(-34px); }
  .sc-patch { width: 94%; min-height: 36px; padding: 5px 3px; border-radius: 9px; font-size: clamp(0.5625rem, 2.7vw, 0.72rem); }
  .sc-pocket__mouth { left: 10%; right: 10%; height: 16px; }
  .sc-roll__bench { left: 0; bottom: 44px; }
  .sc-roll__tape { right: 4%; bottom: 8px; white-space: nowrap; font-size: 0.95rem; }
  /* the SOON tag hangs straight down from the handle, over the mouth of its pocket */
  .sc-soon { top: -8px; left: 50%; width: 104px; margin-left: -52px; transform-origin: 50% 0; }
  .sc-pocket[aria-pressed="true"] .sc-soon { translate: 0 -34px; }
  .sc-soon > i { left: 50%; width: 2px; height: 14px; transform: none; }
  .sc-soon__card { margin: 12px 0 0; }
  .sc-soon__a { justify-self: center; width: 56px; min-height: 34px; font-size: 0.64rem; letter-spacing: 0.1em; }
  .sc-soon__a, .sc-soon__b { background: radial-gradient(circle at 50% 7px, var(--fc-kraft) 0 3px, var(--fc-ink) 3px 4.5px, transparent 4.5px), var(--fc-white); padding: 16px 6px 6px; border-radius: 10px 10px 4px 4px; }
  .sc-soon__b { text-align: center; font-size: 0.7rem; }
  .sc-pocket--4 .sc-soon { left: auto; right: 0; margin-left: 0; }
  .sc-pocket--4 .sc-soon__a { justify-self: end; margin-right: calc(50% - 28px); }
}

/* ---------- 8. The designs: a split head over the kit's string line ---------- */
.sc-dhead { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 56px; margin-bottom: clamp(26px, 4vw, 44px); }
/* the H2 keeps its three phrases whole ("Your crew's names." is one unit, about 10.2em wide), so
   under 380px it steps down with the screen and the last phrase still fits a 320px phone */
@media (max-width: 379px) {
  #designs .sc-dhead .fc-h2 { font-size: min(2rem, calc(9.4vw - 3px)); }
}
.sc-dhead__a { display: grid; gap: 14px; justify-items: start; }
.sc-dhead__b { display: grid; gap: 12px; max-width: 34em; }
/* without JavaScript the line is six fronts that scroll by hand (the kit drops the hint and pause) */
.sc-line__static { display: flex; gap: clamp(16px, 2vw, 26px); margin: 0; padding: 0 var(--fc-gutter) 8px; list-style: none; overflow-x: auto; }
.sc-line__img { display: block; width: 100%; height: auto; border: var(--fc-line); border-radius: 10px; background: var(--fc-pure); box-shadow: 3px 3px 0 rgba(22, 58, 37, 0.35); }
@media (min-width: 960px) {
  .sc-dhead { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: end; }
}

/* ---------- 9. Bulk: the proof sheet on the light table ---------- */
.sc-record strong { font-weight: 800; }
.sc-press {
  --pc-face: var(--fc-clover-2);
  --pc-foil: var(--fc-sun);
  --pc-text: var(--fc-chalk);
  position: relative;
  justify-self: center;
  width: min(100%, 680px);
  margin: 0;
  container-type: inline-size;
}
.sc-press.is-v2 { --pc-face: var(--fc-ink); --pc-foil: var(--fc-lawn-a); --pc-text: var(--fc-sun); }
.sc-press.is-v3 { --pc-face: var(--fc-orange); --pc-foil: var(--fc-ink-deep); --pc-text: var(--fc-ink-deep); }
.sc-press__table {
  position: relative;
  padding: 4.4cqw 4.4cqw 7cqw;
  border: var(--fc-line);
  border-radius: var(--fc-r2);
  background:
    linear-gradient(var(--fc-sky-2), var(--fc-pure)) 3cqw 3cqw / calc(100% - 6cqw) calc(100% - 6cqw) no-repeat,
    linear-gradient(var(--fc-rubber-2), var(--fc-rubber));
  box-shadow: var(--fc-chunk-lg);
}
.sc-press__glow {
  position: absolute;
  inset: 3cqw;
  border: var(--fc-line);
  border-radius: 1.4cqw;
  background: radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, 0.9), rgba(227, 242, 247, 0.4) 70%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 5cqw rgba(191, 227, 240, 0.9);
  transition: opacity 0.6s;
}
.sc-press__sheet {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform: rotate(-0.6deg);
  -webkit-tap-highlight-color: transparent;
}
.sc-press__sheet svg { display: block; width: 100%; height: auto; border: 1.5px solid rgba(22, 58, 37, 0.5); border-radius: 3px; box-shadow: 1.2cqw 1.2cqw 0 rgba(22, 58, 37, 0.25); }
.sc-press__sheet:focus-visible { outline: 3px solid var(--fc-ink); outline-offset: 4px; }
.sc-pc-paper { fill: var(--fc-sheet-warm); }
.sc-pc-face { fill: var(--pc-face); stroke: var(--fc-ink); stroke-width: 1.5; transition: fill 0.3s; }
.sc-pc-foil { stroke: var(--pc-foil); transition: stroke 0.3s; }
.sc-pc-fill { fill: var(--pc-text); transition: fill 0.3s; }
.sc-pc-slab { font-family: var(--fc-display); font-weight: 400; }
.sc-pc-sans { font-family: var(--fc-body); font-weight: 700; }
.sc-pc-mark { stroke: var(--fc-gray-1); }
.sc-pc-slug { fill: var(--fc-ink-2); font-family: var(--fc-mono); font-weight: 700; }
.sc-pc-ok { fill: none; stroke: var(--fc-red-ink); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.sc-pc-red { fill: var(--fc-red-ink); font-family: var(--fc-hand); font-weight: 400; }
.sc-press__roller {
  position: absolute;
  z-index: 3;
  top: -3%;
  bottom: -3%;
  left: -6%;
  width: 6cqw;
  border: var(--fc-line);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--fc-rubber), var(--fc-rubber-2) 40%, var(--fc-rubber));
  box-shadow: 0.8cqw 0 0 rgba(22, 58, 37, 0.3);
  opacity: 0;
  pointer-events: none;
}
.sc-press__sheet.is-rolling .sc-press__roller { animation: sc-roll 0.7s ease-in-out; }
@keyframes sc-roll { 0% { opacity: 1; left: -8%; } 90% { opacity: 1; left: 102%; } 100% { opacity: 0; left: 104%; } }
.sc-press__fan { position: absolute; z-index: 4; left: 1cqw; bottom: -2cqw; width: 22cqw; height: 6cqw; }
.sc-press__fan i {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 20cqw;
  height: 4.4cqw;
  border: var(--fc-line);
  border-radius: 0.8cqw;
  background: linear-gradient(90deg, var(--sw) 0 70%, var(--fc-white) 70%);
  transform-origin: 1.6cqw 50%;
  transform: rotate(var(--a));
  transition: transform 0.45s var(--fc-bounce);
}
.sc-press__fan i:nth-child(1) { --sw: var(--fc-clover-2); --a: -34deg; }
.sc-press__fan i:nth-child(2) { --sw: var(--fc-lawn-a); --a: -25deg; }
.sc-press__fan i:nth-child(3) { --sw: var(--fc-sun); --a: -16deg; }
.sc-press__fan i:nth-child(4) { --sw: var(--fc-orange); --a: -7deg; }
.sc-press__fan i:nth-child(5) { --sw: var(--fc-ink); --a: 2deg; }
.sc-press__fan.is-shuffle i:nth-child(1) { --a: -44deg; }
.sc-press__fan.is-shuffle i:nth-child(2) { --a: -30deg; }
.sc-press__fan.is-shuffle i:nth-child(4) { --a: -2deg; }
.sc-press__fan.is-shuffle i:nth-child(5) { --a: 10deg; }
.sc-press__pencil {
  position: absolute;
  z-index: 4;
  right: 14cqw;
  top: 0.3cqw;
  width: 26cqw;
  height: 2.6cqw;
  border: var(--fc-line);
  border-radius: 0.4cqw;
  background:
    linear-gradient(90deg, var(--fc-peach) 0 12%, var(--fc-steel-b) 12% 18%, transparent 18%),
    linear-gradient(transparent 33%, rgba(22, 58, 37, 0.2) 33% 38%, transparent 38% 62%, rgba(22, 58, 37, 0.2) 62% 67%, transparent 67%),
    var(--fc-sun);
  clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%);
  transform: rotate(2deg);
}
.sc-press__pencil::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 12%; background: linear-gradient(90deg, var(--fc-wood) 0 55%, var(--fc-ink) 55%); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.sc-press .fc-sample--pin { right: 5cqw; }
/* the job ticket taped to the table edge, the shelf tag clipped beside it */
.sc-ticket {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 14px 22px;
  align-items: start;
  width: min(100%, 560px);
  margin: -4cqw 0 0 auto;
  padding: 22px 18px 18px;
  border: var(--fc-line);
  border-radius: 4px;
  background:
    linear-gradient(90deg, transparent 0 calc(47% - 1px), rgba(22, 58, 37, 0.25) calc(47% - 1px) 47%, transparent 47%),
    var(--fc-sheet-warm);
  box-shadow: var(--fc-chunk);
  transform: rotate(0.6deg);
}
.sc-ticket__tape { top: -14px; left: 26%; }
.sc-ticket__lines { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-family: var(--fc-mono); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; line-height: 1.3; }
.sc-ticket__lines li:first-child { font-size: 1rem; }
.sc-ticket__lines li:nth-child(2) { color: var(--fc-red-ink); }
.sc-ticket__free { color: var(--fc-green-ink); }
#scArtLine.is-tick { animation: sc-bump 0.5s var(--fc-bounce); }
@keyframes sc-bump { 40% { transform: translateX(6px); background: var(--fc-sun-2); } }
.sc-ticket__quote { grid-column: 1; font-family: var(--fc-hand); font-size: 1.05rem; line-height: 1.25; color: var(--fc-ballpoint); }
.sc-shelf {
  position: relative;
  grid-column: 2;
  grid-row: 1 / span 2;
  padding: 0 0 10px;
  border: var(--fc-line);
  border-radius: 4px;
  background: var(--fc-white);
  box-shadow: 3px 3px 0 rgba(22, 58, 37, 0.3);
  overflow: visible;
}
.sc-shelf__clip {
  position: absolute;
  top: -14px;
  left: -16px;
  width: 30px;
  height: 20px;
  border: 2px solid var(--fc-ink);
  border-radius: 3px;
  background: linear-gradient(var(--fc-rubber-2), var(--fc-ink-black));
  transform: rotate(-20deg);
}
.sc-shelf__head { padding: 7px 10px; border-bottom: var(--fc-line); background: var(--fc-ink); color: var(--fc-chalk); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; }
.sc-shelf__prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.sc-shelf__prices li { display: grid; padding: 7px 10px 6px; border-bottom: 1.5px dashed rgba(22, 58, 37, 0.3); line-height: 1.1; }
.sc-shelf__prices li:nth-child(odd) { border-right: 1.5px dashed rgba(22, 58, 37, 0.3); }
.sc-shelf__prices span { font-size: 0.72rem; font-weight: 700; color: var(--fc-ink-2); }
.sc-shelf__prices b { font-family: var(--fc-display); font-size: 1.2rem; font-weight: 400; }
.sc-shelf__fine { display: grid; gap: 3px; margin: 8px 0 0; padding: 0 10px; list-style: none; font-size: 0.72rem; font-weight: 700; line-height: 1.3; }
/* the table lights up on view */
html.js .sc-press:not(.is-on) .sc-press__glow { opacity: 0.15; }
html.js .sc-press:not(.is-on) .sc-pc-ok { stroke-dashoffset: 100; }
.sc-pc-ok { transition: stroke-dashoffset 0.9s ease-out 0.5s; }
@media (max-width: 600px) {
  .sc-ticket { grid-template-columns: minmax(0, 1fr); margin-top: 18px; transform: none; }
  .sc-shelf { grid-column: 1; grid-row: auto; }
  .sc-ticket { background: var(--fc-sheet-warm); }
  .sc-shelf__clip { left: auto; right: 18px; }
}

/* ---------- 10. The badge rail at our office ---------- */
.sc-rail { position: relative; }
.sc-rail__signrow { position: relative; z-index: 4; display: flex; justify-content: center; margin-bottom: -22px; }
.sc-rail__sign { max-width: 600px; }
.sc-rail__wall {
  position: relative;
  padding: 56px 0 40px;
  border-block: var(--fc-line);
  background-color: var(--fc-shopwall);
  background-image:
    var(--fc-grain),
    repeating-linear-gradient(90deg, transparent 0 318px, rgba(22, 58, 37, 0.2) 318px 320px);
}
.sc-rail__bar {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 58px;
  height: 22px;
  border-block: var(--fc-line);
  background: linear-gradient(var(--fc-rail-a), var(--fc-rail-b));
}
.sc-rail__viewport { position: relative; z-index: 2; overflow: hidden; }
.sc-rail__viewport:focus-visible { outline: 3px solid var(--fc-ink); outline-offset: -3px; }
.sc-rail__track {
  display: flex;
  gap: clamp(20px, 2.4vw, 34px);
  width: max-content;
  margin: 0;
  padding: 0 0 12px clamp(20px, 2.4vw, 34px);
  list-style: none;
  animation: fc-marquee 70s linear infinite;
}
.sc-rail:hover .sc-rail__track,
.sc-rail:focus-within .sc-rail__track,
.sc-rail.is-paused .sc-rail__track { animation-play-state: paused; }
.sc-badge { position: relative; flex: none; width: clamp(112px, 10.5vw, 150px); padding-top: 34px; }
.sc-badge__hook {
  position: absolute;
  left: 50%;
  top: 0;
  width: 20px;
  height: 42px;
  margin-left: -10px;
}
.sc-badge__hook::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 3px;
  width: 12px;
  height: 22px;
  border: 3.5px solid var(--fc-steel-c);
  border-top: 0;
  border-radius: 0 0 9px 9px;
  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));
}
.sc-badge__hook::after {
  content: "";
  position: absolute;
  left: 2px;
  bottom: 0;
  width: 16px;
  height: 18px;
  border: 2px solid var(--fc-ink);
  border-radius: 3px 3px 5px 5px;
  background: linear-gradient(var(--fc-steel-a), var(--fc-steel-b));
}
.sc-badge img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 6px;
  border: var(--fc-line);
  border-radius: 10px;
  box-shadow: 4px 4px 0 rgba(22, 58, 37, 0.35);
  transform: rotate(-1.6deg);
  transform-origin: 50% 0;
}
.sc-badge:nth-child(2n) img { transform: rotate(1.4deg); }
.sc-badge:nth-child(3n) img { transform: rotate(-0.4deg); }
.sc-rail__slip {
  position: absolute;
  z-index: 3;
  left: var(--fc-gutter);
  top: 36px;
  max-width: 190px;
  padding: 12px 12px 10px;
  border: 1.5px solid var(--fc-ink);
  border-radius: 3px;
  background:
    repeating-linear-gradient(0deg, transparent 0 17px, rgba(22, 58, 37, 0.08) 17px 18px),
    var(--fc-white);
  box-shadow: 3px 3px 0 rgba(22, 58, 37, 0.3);
  font-family: var(--fc-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
  color: var(--fc-ink);
  transform: rotate(-1deg);
}
.sc-rail__slip b { display: block; color: var(--fc-red-ink); letter-spacing: 0.14em; }
.sc-rail__pause { position: absolute; z-index: 5; right: max(var(--fc-gutter), calc((100% - 1280px) / 2 + var(--fc-gutter))); bottom: -22px; }
.sc-badges__words { margin-top: clamp(44px, 5vw, 64px); }
@media (prefers-reduced-motion: reduce) {
  .sc-rail__track { animation: none; }
  .sc-rail__track > [aria-hidden="true"] { display: none; }
  .sc-rail__viewport { overflow-x: auto; scroll-snap-type: x proximity; }
  .sc-rail__pause { display: none; }
}
@media (max-width: 600px) {
  /* on phones the slip is taped to the wall under the badges, inside the wall */
  .sc-rail__slip { top: auto; bottom: 14px; max-width: min(62%, 210px); font-size: 0.64rem; }
  .sc-rail__wall { padding-bottom: 96px; }
}

/* ---------- 11. The order pad (closing band variant: the order ticket) ---------- */
.sc-cta__link { font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.sc-cta__shot {
  position: relative;
  max-width: 460px;
  margin: clamp(26px, 3vw, 40px) 0 0;
  padding: 8px 8px 12px;
  border: var(--fc-line);
  border-radius: 6px;
  background: var(--fc-white);
  box-shadow: 6px 6px 0 var(--fc-ink-deep);
  transform: rotate(-1deg);
}
.sc-cta__shot img { display: block; width: 100%; height: auto; border: 1.5px solid rgba(22, 58, 37, 0.25); border-radius: 2px; }
.sc-cta__shot figcaption { margin-top: 10px; font-size: 0.86rem; font-weight: 600; line-height: 1.45; color: var(--fc-ink-2); }
.sc-cta__shot figcaption .fc-proofchip { margin-right: 6px; vertical-align: 1px; }
#check .sc-pad { gap: 6px; }
.sc-pad__lines { display: grid; width: 100%; margin: 0; padding: 0; list-style: none; }
.sc-pad__line {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 14px;
  padding: 16px 0;
  border-bottom: 1.5px solid rgba(22, 58, 37, 0.28);
}
.sc-pad__line:last-child { border-bottom: 0; padding-bottom: 4px; }
.sc-pad__box { display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--fc-ink); border-radius: 4px; background: var(--fc-white); }
.sc-pad__box svg { width: 24px; height: 24px; margin: -6px -4px 0 0; fill: none; stroke: var(--fc-ballpoint); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sc-pad__what { font-weight: 700; line-height: 1.35; }
.sc-pad__line .btn { white-space: nowrap; }
.sc-pad__line--zip { grid-template-columns: 30px minmax(0, 1fr); }
.sc-pad__line--zip .fc-zip,
.sc-pad__line--zip .fc-note { grid-column: 2; }
#check .sc-pad__line--zip .fc-zip label { font-size: 0.85rem; }
@media (max-width: 600px) {
  .sc-pad__line { grid-template-columns: 28px minmax(0, 1fr); }
  .sc-pad__line .btn { grid-column: 1 / -1; width: 100%; }
  .sc-pad__line--zip .fc-zip,
  .sc-pad__line--zip .fc-note { grid-column: 1 / -1; }
}

/* ---------- the Shmo guide: shows once the hero is a quarter scrolled ---------- */
html.js .sc-guide:not(.is-on) { opacity: 0; visibility: hidden; }
.sc-guide { transition: opacity 0.4s, visibility 0s linear 0.4s; }
.sc-guide.is-on:not(.is-away) { transition: opacity 0.4s, visibility 0s; }
/* without JavaScript it cannot step aside for the card line, so it stays home */
html:not(.js) #scGuide { display: none; }


/* ---------- motion off: every scene rests finished ---------- */
@media (prefers-reduced-motion: reduce) {
  /* core.css shortens durations but keeps delays: these scenes show their end state at once */
  .sc-tap.is-playing .sc-rev > *,
  .sc-tap.is-playing .sc-rev__stars::after,
  .sc-tap.is-playing .sc-tap__ring,
  .sc-tap.is-playing .sc-tap__hold { animation: none !important; }
  .sc-pc-ok,
  .sc-visor .fc-phone__screen > * { transition: none; }
  .sc-smore__flames,
  .sc-soon,
  .sc-jb__mascot,
  .sc-rolo__rig,
  .sc-sleeve__tag { animation: none !important; }
  .sc-smore__stack.is-squish .sc-layer { animation: none; }
  .sc-print,
  .sc-stake__post,
  .sc-stake__tape,
  .sc-pocket__tool,
  .sc-soon__card,
  .sc-rolo__fan,
  .sc-rolo__knob { transition: none; }
}