/* Get Less Chaos: A Place for Everything. The homepage (stage-2 refine).
   The whole page is ONE piece of foam. The name is cut into it; every section after the hero is an insert cut into
   the same board (a light tray for the apps, a milled bar for the rules, a tray of addresses), and the footer is
   the drawer's bottom layer. Pieces sit in their own cuts; green only shows when a piece is lifted (the reward).
   The system (tokens, base, components) does the heavy lifting; this file lays the page out. */

:root { --header-h: 76px; --hero-gap: clamp(20px, 3.6vh, 40px);
  /* the board is foam: a fine grain, barely there */
  --board-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  /* the kerf: the 2 px gap between a piece and its cut, seen at rest as a shadowed wall (neutral, never green) */
  --kerf: #C2C0B8;
}
body { background-image: var(--board-grain); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --kerf: #08090A; --board-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); } }
:root[data-theme="dark"], [data-theme="dark"] { --kerf: #08090A; }
[data-theme="light"] { --kerf: #C2C0B8; }
@media (max-width: 640px) { :root { --header-h: 64px; } }
html { scroll-padding-top: calc(var(--header-h) + 16px); }

/* ================================================================== header */
.site-header .brand { height: 40px; }
@media (max-width: 640px) { .site-header .brand { height: 32px; } }
.site-header .glc-fallback { height: 100%; width: auto; }
.nav__link[aria-current] { color: var(--ink); }
.nav__link[aria-current]::after { transform: scaleX(1); }
/* reduced motion: no flight, so the header's name crossfades in only once the big one has scrolled away
   (two identical wordmarks are never stacked) */
html.js:not(.motion) .site-header .brand { opacity: 0; transition: opacity var(--dur-crossfade) ease; }
html.js:not(.motion) .site-header.is-past-hero .brand, html.js:not(.motion) .site-header .brand:focus-visible { opacity: 1; }

/* the flight: letters on their way from the hero to the header, drawn above everything */
.flight { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 70; pointer-events: none; overflow: visible; }
.flight .fl-ink { fill: var(--ink); }
.flight .fl-sh { fill: var(--shadow); }

/* ================================================================== hero: the board, with the name cut into it */
.hero { position: relative; min-height: max(560px, calc(100svh - var(--header-h))); }
html:not(.js) .hero { display: grid; align-content: center; justify-items: center; gap: 48px; padding: 64px var(--space-gutter); }
html:not(.js) .hero__logo .glc-fallback { width: min(860px, 86vw); height: auto; }
html:not(.js) .hero__text { width: min(860px, 86vw); }

/* with scripts: the logo engine fills the stage; the text sits under the word, on the word's own left and right edges */
html.js .hero__logo { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
html.js .hero__logo .glc-hit { pointer-events: auto; }
html.js .hero__logo .glc-fallback { position: absolute; left: 50%; top: 22%; width: min(860px, 62%); transform: translateX(-50%); }
html.js .hero__text { position: absolute; z-index: 0; left: var(--logo-left, 10%); width: var(--logo-w, 80%); top: calc(var(--logo-bottom, 46%) + var(--hero-gap)); }

.hero__text { display: grid; gap: clamp(12px, 2vh, 20px); container-type: inline-size; }
/* the headline is demoted: the name owns the screen; this is the label printed under it */
.hero__h {
  justify-self: start; position: relative; isolation: isolate;
  font-size: clamp(1.375rem, 1rem + 1vw, 2rem); font-weight: 640; line-height: 1.12; letter-spacing: -0.014em;
  color: var(--ink); max-width: none; text-wrap: balance;
}
/* its runner: a narrow neutral groove milled into the board, the track the lid slides in along (empty until the line
   arrives; it closes up once the lid is home) */
.hero__h::before {
  content: ""; position: absolute; z-index: -1; left: -.1em; right: -.3em; bottom: -.34em; height: .2em; border-radius: 99px;
  background: linear-gradient(var(--cut-floor-top), var(--cut-floor-bot)); box-shadow: var(--z-cut-1); opacity: 0; pointer-events: none;
  transform-origin: 100% 50%; transform: scaleX(var(--groove, 0));
}
html.js.motion .hero__h::before { opacity: var(--groove, 0); }
.hero__lid { display: inline-block; }
.hero__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-4) var(--space-7); }
.hero__sub { max-width: 46ch; font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); line-height: 1.5; color: var(--ink-2); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; padding: 5px; }
/* until its piece arrives a CTA's slot is a NEUTRAL cut: an empty green pill would read as a button (green is the
   reward, it shows when the piece is lifted) */
html.js.motion .hero__cta .btn:not(.is-in)::before { background: linear-gradient(var(--cut-floor-top), var(--cut-floor-bot)); box-shadow: var(--z-cut-1); }
html.failsafe .hero__cta .btn::before { background: linear-gradient(var(--floor-top), var(--floor-bot)); box-shadow: var(--z-sunk-1); }
/* each CTA sits in its own milled pocket: a faint neutral cut, a kerf wider than the piece, visible at rest */
.hero__cta .btn::after {
  content: ""; position: absolute; inset: -5px; z-index: -2; border-radius: var(--radius-pill);
  background: var(--cut-floor); box-shadow: var(--z-cut-1);
}
/* the bench edge: where the hero's board ends and the foot (replay, the way down, sound) sits */
.hero__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  margin-top: clamp(20px, 5.2vh, 52px); padding-top: 12px;
  border-top: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--lip-a);
}
html:not(.js) .hero__foot { justify-content: center; }

/* the entrance: only the headline (the lid) and the CTA pieces wait for the logo to put itself away. The subline is
   printed on the board from the first frame (it's the page's largest text: no waiting for LCP), and the CTA cuts are
   there from the first frame too. Opacity, never visibility: hidden-for-now text stays in the accessibility tree. */
html.js.motion .hero [data-intro] { opacity: 0; }
html.js.motion .hero__cta .btn__piece { opacity: 0; }
html.js.motion .hero [data-intro-foot] { opacity: 0; }
html.js.intro-on .hero [data-intro] { opacity: 1; }
html.failsafe .hero [data-intro], html.failsafe .hero__cta .btn__piece, html.failsafe .hero [data-intro-foot] { opacity: 1 !important; }
html.failsafe .hero__h::before { opacity: 0 !important; }

/* the foot: three small pieces */
.foot-btn, .hero__cue {
  display: inline-flex; align-items: center; gap: .6em; min-height: 44px; padding: 0 var(--space-2);
  border: 0; background: none; color: var(--ink-3); text-decoration: none; border-radius: var(--radius-sm);
  font-family: var(--font-label); font-variation-settings: "MONO" 1, "CASL" 0;
  font-size: var(--text-xs); font-weight: 560; letter-spacing: .04em;
  -webkit-tap-highlight-color: transparent; transition: color var(--dur-hover) var(--ease-settle);
}
.foot-btn { margin-left: calc(-1 * var(--space-2)); }
.foot-btn:hover, .hero__cue:hover { color: var(--ink); }
.lbl__s { display: none; white-space: nowrap; }
.foot-btn__icon { /* a tiny drawer, tipping */
  position: relative; width: 16px; height: 12px; border-radius: 3px; flex: none;
  background: linear-gradient(var(--floor-top), var(--floor-bot)); box-shadow: inset .5px 2px 0 -.5px var(--pocket-edge-a), 0 1px 0 var(--lip-a);
}
.foot-btn__icon::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 6px; height: 6px; border-radius: 1.5px; background: var(--ink);
  transform-origin: 50% 100%; transition: transform var(--dur-hover) var(--ease-spring);
}
.foot-btn:hover .foot-btn__icon::after { transform: translate(5px, -6px) rotate(24deg); }
.foot-btn:active .foot-btn__icon::after { transform: translate(1px, 1px); transition-duration: var(--dur-press); }
.hero__sound { color: var(--ink-3); font-family: var(--font-label); font-variation-settings: "MONO" 1, "CASL" 0; font-size: var(--text-xs); letter-spacing: .04em; font-weight: 560; min-height: 44px; }
.hero__sound .switch__slot { width: 40px; height: 24px; }
.hero__sound .switch__piece { width: 18px; height: 18px; }
.hero__sound[aria-checked="true"] .switch__piece { transform: translateX(16px); }
.hero__sound[aria-checked="true"]:active .switch__piece { --sx: 16px; }
/* reduced motion: there is nothing to tip out again (the rest state is the whole show) */
html.js:not(.motion) #replay { display: none; }

/* a slot with a piece that drops in, again and again: "this way" (paused while offscreen) */
.cue-slot {
  position: relative; display: inline-block; width: 14px; height: 20px; border-radius: 5px; flex: none;
  background: linear-gradient(var(--floor-top), var(--floor-bot)); box-shadow: inset .5px 2px 0 -.5px var(--pocket-edge-a), inset 0 3px 4px -2px var(--pocket-ao-a), 0 1px 0 var(--lip-a);
}
.cue-slot i {
  position: absolute; left: 2px; right: 2px; bottom: 2px; height: 10px; border-radius: 3px; background: var(--ink);
  animation: cue-drop 2.4s var(--ease-drop) infinite;
}
.is-off .cue-slot i, .cue-slot.is-off i { animation-play-state: paused; }
@keyframes cue-drop {
  0%, 10% { transform: translateY(-16px) rotate(-10deg); opacity: 0; }
  16% { opacity: 1; }
  30% { transform: translateY(1px) scaleY(.86); animation-timing-function: var(--ease-thunk); }
  44%, 78% { transform: none; opacity: 1; }
  92%, 100% { transform: translateY(-16px) rotate(8deg); opacity: 0; }
}
/* the row stacks when the WORD is narrow (it sizes the text block), not just when the screen is: a short landscape
   phone has a small lockup and room for nothing beside the subline */
@container (max-width: 680px) {
  .hero__row { grid-template-columns: 1fr; align-items: start; }
  .hero__cta { justify-content: flex-start; }
}
@media (max-width: 760px) {
  .hero__row { grid-template-columns: 1fr; align-items: start; }
  .hero__cta { justify-content: flex-start; }
}
@media (max-width: 640px) {
  /* phones: short labels you can see, the full ones for screen readers */
  .lbl__l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .lbl__s { display: inline; }
  .hero__text { gap: 12px; }
  .hero__h { font-size: 1.3125rem; }
  .hero__sub { font-size: 1rem; }
  .hero__cta { gap: 12px; }
  .hero__foot { margin-top: 18px; }
}

/* ================================================================== section rhythm */
main section[tabindex="-1"]:focus, main[tabindex="-1"]:focus { outline: none; }
.section { padding-block: var(--space-section); }
.section + .section { padding-top: 0; }
.eyebrow { position: relative; z-index: 2; }
.eyebrow__n { color: var(--ink); font-weight: 700; }
.section-head h2 { font-size: clamp(2.25rem, 1.4rem + 3vw, 4.25rem); line-height: 1.02; letter-spacing: var(--tracking-display); }
.section-head p { max-width: 46ch; }

/* an INSERT: a tray cut into the board. Light foam, a deep neutral cut, the pieces seated in it */
.insert {
  position: relative; list-style: none; margin: 0;
  border-radius: calc(var(--radius-xl) + var(--space-kerf));
  background: var(--grain-light), linear-gradient(var(--cut-floor-top), var(--cut-floor-bot));
  box-shadow: var(--z-cut-2), inset 0 0 0 1px var(--line);
  padding: clamp(12px, 1.6vw, 22px);
}
ul.insert, ol.insert { padding: clamp(12px, 1.6vw, 22px); }   /* (base.css zeroes list padding) */

/* ================================================================== 01 the junk drawer */
.drawer { position: relative; }
/* QA fix (r20-final): scrolled back above the drawer, the tray rests tilted back (its scrub's start) and its near edge
   reaches past the window's sides (390 wide: 470; 1440 wide: 1790). The window already hid that, but it still counted
   as page width, so phones zoomed the whole page out. Clipping sideways at the section's own edges (the window's
   edges) hides exactly what was already hidden; nothing on screen changes. Vertical overflow is untouched. */
.drawer { overflow-x: clip; }
.drawer__pin { padding: var(--space-5) var(--space-gutter) var(--space-7); }
html.js.motion .drawer__pin { height: 100vh; height: 100svh; min-height: 560px; padding: calc(var(--header-h) + 8px) clamp(10px, 2.2vw, 32px) clamp(10px, 2vh, 24px); display: flex; }
html.js.motion .drawer.is-unpinned .drawer__pin { height: auto; min-height: 0; padding-top: var(--space-5); }
/* seams pass 2 (r20-final): while the cookie strip is open, the pinned drawer stops at the strip's top edge and fits
   itself into the smaller space, as in a short window. homepage.js sets --drawer-room (the strip's height) and eases it
   with the strip on screen. A margin on the tray, because the pin's own padding is held inline while it is pinned */
html.js.motion .drawer:not(.is-unpinned) .drawer__tray { margin-bottom: var(--drawer-room, 0px); }
.drawer__tray {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  position: relative; flex: 1; min-width: 0;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(12px, 2vh, 24px);
  padding: clamp(20px, 3.2vw, 44px) clamp(20px, 3.4vw, 48px) clamp(18px, 2.6vw, 36px);
  border-radius: calc(var(--radius-xl) + var(--space-kerf));
  background: var(--grain), radial-gradient(120% 90% at 30% 0%, var(--tray-top) 0%, var(--tray) 60%, var(--tray-bot) 100%);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 22px 34px -22px rgba(0,0,0,.9), 0 1px 0 var(--lip-a), 0 26px 60px -30px rgba(0,0,0,.45);
  /* hidden, not clip: after the pin ends (a translated ancestor) Chrome paints an overflow:clip box with a stale clip
     rect and the tray's lower third vanished */
  overflow: hidden; isolation: isolate; transform-origin: 50% 0%;
}
/* the drawer in 3D: while it is pulled open (and pushed shut) the far edge is in shadow (homepage.js drives --shade-t
   and --shade-b from 1 to 0 as it tilts; flat and open, both are 0 and this layer paints nothing) */
.drawer__tray::after {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(0,0,0,calc(.62 * var(--shade-t, 0))) 0%, rgba(0,0,0,0) 62%),
              linear-gradient(0deg, rgba(0,0,0,calc(.5 * var(--shade-b, 0))) 0%, rgba(0,0,0,0) 70%);
}
/* at night the insert gets a lit rim and a deep surround, so the step into the drawer is still felt */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .drawer__tray { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.09), inset 0 22px 34px -22px #000, 0 0 0 1px rgba(255,255,255,.05), 0 30px 60px -20px #000; }
}
:root[data-theme="dark"] .drawer__tray { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.09), inset 0 22px 34px -22px #000, 0 0 0 1px rgba(255,255,255,.05), 0 30px 60px -20px #000; }
.drawer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5) var(--space-7); flex-wrap: wrap; position: relative; z-index: 3; pointer-events: none; }
@media (min-width: 1100px) {
  html.js .drawer__tray { grid-template-columns: minmax(340px, 34%) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: clamp(24px, 3vw, 56px); }
  html.js .drawer__top { grid-column: 1; grid-row: 1; flex-direction: column; gap: var(--space-6); }
  html.js .drawer__board { grid-column: 2; grid-row: 1 / -1; }
  html.js .drawer__bottom { grid-column: 1; grid-row: 3; }
  html.js .drawer__count { justify-items: start; text-align: left; padding-top: 0; }
  html.js .drawer__h .swap { display: grid; }
}
.drawer__top > * { pointer-events: auto; }
.drawer__copy { display: grid; gap: var(--space-3); max-width: 44ch; }
.drawer__h { font-size: clamp(2.125rem, 1.2rem + 2.9vw, 4.25rem); line-height: .98; letter-spacing: var(--tracking-display); color: var(--ink); }
.swap { display: inline-grid; vertical-align: baseline; white-space: nowrap; }
.swap > span { grid-area: 1 / 1; white-space: nowrap; justify-self: start; }
.swap__b { visibility: hidden; }
.drawer__lede { display: grid; color: var(--ink-2); font-size: var(--text-lg); }
.drawer__lede > span { grid-area: 1 / 1; text-wrap: balance; }
.lede__b { visibility: hidden; }
.drawer__lede .glyph-word { display: inline-block; }

/* the counter: one mini slot per object; each fills as its object goes home. At the end it collapses into a single
   line of label tape: "7 of 8 · Close enough." */
.drawer__count { display: grid; justify-items: end; gap: var(--space-2); padding-top: 6px; text-align: right; }
.count__label { font-family: var(--font-label); font-variation-settings: "MONO" 1, "CASL" 0; font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.count__slots { display: flex; gap: 6px; }
.mslot {
  position: relative; width: 20px; height: 14px; border-radius: 4px;
  background: linear-gradient(var(--floor-top), var(--floor-bot));
  box-shadow: inset .5px 2.5px 0 -.5px var(--pocket-edge-a), inset 1px 4px 4px -2px var(--pocket-ao-a), 0 1px 0 var(--lip-a);
}
.mslot i {
  position: absolute; inset: 0; border-radius: 4px; background: var(--paper);
  transform: translateY(-12px) rotate(-14deg); opacity: 0;
  transition: transform .22s var(--ease-drop), opacity .12s;
}
.mslot.is-in i { transform: none; opacity: 1; animation: glc-thunk var(--dur-thunk) var(--ease-thunk) .2s both; transition: transform .2s var(--ease-drop), opacity .08s; }
.mslot.is-hover i { transform: translate(3px, -11px) rotate(-12deg); opacity: 1; transition: transform .5s var(--ease-pop), opacity .12s; }
.count__text { font-family: var(--font-label); font-variation-settings: "MONO" 1, "CASL" 0; font-size: var(--text-sm); color: var(--ink-2); font-weight: 500; }
.count__text b { color: var(--ink); font-weight: 700; display: inline-block; min-width: 1ch; }
.count__text .close { color: var(--foam-ink); }
.drawer__count.is-tape {
  display: inline-flex; align-items: center; gap: 12px; justify-self: start; padding: 7px 12px 7px 10px; border-radius: 3px;
  background: var(--paper); color: #16181B; transform: rotate(-1.2deg); transform-origin: 0 50%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 2px 0 rgba(0,0,0,.35), 0 8px 18px -8px rgba(0,0,0,.6);
  animation: tape-on .42s var(--ease-seat) both;
}
.drawer__count.is-tape .count__label { display: none; }
.drawer__count.is-tape .count__text { color: #45484C; font-weight: 640; letter-spacing: .04em; text-transform: uppercase; font-size: var(--text-xs); }
.drawer__count.is-tape .count__text b { color: #16181B; }
.drawer__count.is-tape .count__text .close { color: #0C7547; }
/* (r00) the "·" is in the text now */
.drawer__count.is-tape .mslot { --floor-top: #0F7A4E; --floor-bot: #1A955F; width: 14px; height: 10px; border-radius: 3px; box-shadow: inset .5px 2px 0 -.5px rgba(8,66,42,.8), 0 1px 0 #fff; }
.drawer__count.is-tape .mslot i { background: #16181B; border-radius: 3px; }
.drawer__count.is-tape .count__slots { gap: 4px; }
.drawer__count.is-tape .count__text { white-space: nowrap; }
@media (max-width: 420px) {
  .drawer__count.is-tape { gap: 8px; padding: 6px 9px 6px 8px; max-width: 100%; }
  .drawer__count.is-tape .mslot { width: 10px; height: 8px; }
  .drawer__count.is-tape .count__slots { gap: 3px; }
  .drawer__count.is-tape .count__text { letter-spacing: .02em; font-size: 11px; }
}
/* r01 check fix: on the narrowest phones the strip was wider than the tray and pushed its one column (board, closing
   lines and all) past the right edge. The column never grows past the tray; the strip's words take two lines instead */
.drawer__tray { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 359px) {
  .drawer__count.is-tape .count__slots { gap: 2px; }
  .drawer__count.is-tape .mslot { width: 9px; }
  .drawer__count.is-tape .count__text { white-space: normal; min-width: 0; }
  .drawer__count.is-tape .count__text .close { white-space: nowrap; }
}
@keyframes tape-on { from { transform: translate(-6px, -14px) rotate(-6deg); opacity: 0; } 40% { opacity: 1; } to { transform: rotate(-1.2deg); } }

/* the shadow board: pockets (svg, board units) and the pieces (real elements, so their text is real) */
.drawer__board { position: relative; min-height: 0; z-index: 2; }
.drawer__pockets { display: none; }
.tools { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: var(--space-6) var(--space-7); padding-block: var(--space-6); }
.tool { position: relative; color: var(--tile); }
.tool__piece { display: block; position: relative; }
.tool__in { position: relative; display: block; border-radius: 14px; }
.tool__shape { overflow: visible; display: block; }
/* r01 drawer B: every place on the board is named, printed into the foam under its cut (real text: the pile's words) */
.tool__name {
  display: block; font-family: var(--font-label); font-variation-settings: "MONO" 1, "CASL" 0; font-weight: 600;
  font-size: calc(max(10px, calc(12px * var(--fs, 1))) / var(--sk, 1)); line-height: 1.22; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); text-align: center; text-wrap: balance; transition: color .25s;
}
/* no scripts: a plain shadow board, every piece in its place over its name */
html:not(.js) .tool { display: grid; justify-items: center; gap: 10px; }
html:not(.js) .tool__name { max-width: 16ch; }
.tool__body { fill: var(--paper); }
.tool__ink { fill: var(--tile); }
.tool__fill { fill: var(--tile); }
.tool__fill.t-band { fill-opacity: .1; }
.tool__fill.t-faint { fill-opacity: .065; }
.tool__fill.t-gum { fill-opacity: .2; }
.tool__detail { fill: none; stroke: var(--tile); stroke-opacity: .24; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tool__detail.t-soft { stroke-opacity: .13; stroke-width: 2.4; }
/* r01 drawer B: the toys' own parts (see _build/objects.py) */
.tool__detail--ink { stroke-opacity: .62; }
.tool__paper { fill: var(--paper); }
.tool__cord { fill: none; stroke: var(--paper); stroke-linecap: round; stroke-linejoin: round; }
.tool__spark, .tool__spark path { fill: none; stroke: var(--paper); stroke-width: 3; stroke-linecap: round; }
.tool__puff { fill: none; stroke: var(--paper); stroke-width: 2.5; }
.tool__wing { fill: var(--paper); fill-opacity: .55; }
.tool__stripe { fill: none; stroke: var(--tile); stroke-width: 1.9; stroke-linecap: round; }
.tool__inkdot { fill: var(--tile); }
.tool__dot { fill: var(--tile); fill-opacity: .16; }
.tool__edge { fill: none; stroke: var(--tile); stroke-opacity: .2; stroke-width: 2.5; }
.tool .fx { opacity: 0; }
.tool__shadow { /* its shadow stays on the board while the piece rises toward you (offset 1.08 z, like the logo's) */
  position: absolute; inset: 0; z-index: -1; overflow: visible; pointer-events: none;
  filter: blur(calc(2px + var(--fs, 1) * 4px));
  will-change: transform, opacity;   /* r01: its own layer, blurred once (the toy above it repaints while it rackets) */
  opacity: min(calc(var(--z, 0) * .3), calc(.6 - var(--z, 0) * .0032));
  transform: translate(calc(var(--z, 0) * .05px + .5px), calc(var(--z, 0) * 1.08px + 1.5px)) scale(calc(1 + var(--z, 0) * .0012));
}
.tool__shadow path { fill: #000; }
/* in the hand: a lit rim and a two-layer shadow (a crisp contact shadow plus the ambient one), so a held piece
   separates from everything it passes over on the dark tray */
.tool.is-held .tool__body { stroke: rgba(255,255,255,.4); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.tool.is-held .tool__shadow { opacity: .55; filter: blur(calc(4px + var(--fs, 1) * 7px)); transform: translate(calc(var(--z, 0) * .06px), calc(var(--z, 0) * 1.1px)) scale(1.03); }
.tool.is-held .tool__in { filter: drop-shadow(0 calc(var(--z, 0) * .35px) calc(var(--z, 0) * .5px) rgba(0,0,0,.6)); }

/* text on the pieces: positioned in % of the piece, sized with the board (--fs) */
.tool__in > span { position: absolute; left: var(--tx); top: var(--ty); white-space: nowrap; line-height: 1; transform: translate(0, -50%) rotate(var(--tr, 0deg)); }
.tool { --fs: 1; }
.tool__big { font-family: var(--font-display); font-weight: 800; font-size: calc(48px * var(--fs)); letter-spacing: -.035em; color: var(--tile); }
.tool__big--c { transform: translate(-50%, -50%); font-size: calc(54px * var(--fs)); }
.tool__tape {
  display: inline-flex; align-items: center; height: max(19px, calc(22px * var(--fs))); padding: 0 .62em 0 .66em;
  background: var(--tile); color: var(--paper); border-radius: 2px;
  font-family: var(--font-label); font-variation-settings: "MONO" 1, "CASL" 0; font-weight: 640;
  font-size: max(11px, calc(12px * var(--fs))); letter-spacing: .07em; text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 1px rgba(0,0,0,.25);
}
.tool__tape--sm { font-size: max(11px, calc(11px * var(--fs))); }
.tool__stamp { font-family: var(--font-label); font-variation-settings: "MONO" 1, "CASL" 0; font-weight: 700; font-size: max(11px, calc(15px * var(--fs))); color: var(--tile); opacity: .78; }
.tool__badge { transform: translate(-50%, -50%) !important; font-family: var(--font-display); font-weight: 800; font-size: calc(17px * var(--fs)); letter-spacing: -.02em; color: var(--paper); }
.tool__head { transform: translate(-50%, -50%) !important; font-family: var(--font-label); font-variation-settings: "MONO" 1, "CASL" 0; font-weight: 640; font-size: max(11px, calc(11px * var(--fs))); letter-spacing: .1em; text-transform: uppercase; color: var(--paper); }
.tool__note { transform: translate(-50%, -50%) !important; font-family: var(--font-label); font-variation-settings: "MONO" 1, "CASL" 0; font-size: max(11px, calc(12px * var(--fs))); color: var(--tile); opacity: .82; }
.tool__hand { font-family: var(--font-label); font-variation-settings: "MONO" 0, "CASL" 1, "slnt" -12; font-weight: 640; font-size: calc(23px * var(--fs)); line-height: 1.05; color: var(--tile); white-space: normal !important; width: 5.4em; }

/* with scripts: an exact board, pockets and pieces in the same coordinates */
/* r01 drawer B: the stage holds the pockets and the pieces; on narrow screens it eases smaller toward its top when the
   closing lines arrive (they sit over the board's lower edge, which the pieces use while the chaos is on) */
html.js .drawer__stage { position: absolute; inset: 0; transform-origin: 50% 0; --sk: 1; }  /* --sk: its scale (the names keep their reading size) */
html.js.motion .drawer:not(.is-unpinned) .drawer__line { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; }
html.js.motion .drawer:not(.is-unpinned) .drawer__line.is-on { pointer-events: auto; }
html.js .drawer__pockets { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
html.js .tools { position: absolute; inset: 0; display: block; padding: 0; }
/* the li is the PLACE (its home box, never moved); the piece moves; the name stays printed under the cut. No stacking
   context on the li, so every piece (z 1) sits above every name (z 0), whatever the list order */
html.js .tool { position: absolute; left: 0; top: 0; pointer-events: none; }
html.js .tool__piece { position: absolute; inset: 0; z-index: 1; pointer-events: auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
html.js .tool.is-in-play .tool__piece { will-change: transform; }
html.js .tool__name { position: absolute; z-index: 0; left: 50%; top: calc(100% + 6px * var(--fs, 1)); width: max-content; max-width: var(--nw, 12em); transform: translateX(-50%); pointer-events: none; }
/* seams pass 2 (r20-final): while the board glides into the cookie strip's room, a name keeps its reading size
   (homepage.js eases --nfl from undoing its place's scale back to none; scaled from its top center) */
html.js .tool__name { scale: var(--nfl, none); transform-origin: 0 0; }
/* ...and its pocket travels with it, drawn live (the painted board, foam.js's bake, waits under it until it lands) */
html.js .drawer__stage.is-gliding .glc-foam .foam-heavy { display: inline; }
html.js .drawer__stage.is-gliding .foam-bake { visibility: hidden; }
html.js .tool__in { width: 100%; height: 100%; transform: rotate(var(--hr, 0deg)); }
html.js .tool__shape { width: 100%; height: 100%; }
html.js .tool.is-off { display: none; }
html.js:not(.motion) .drawer__hint { display: none; }
/* not yet tipped out: invisible, but still in the accessibility tree (opacity, not visibility); the names show from the start */
html.js.motion .tool:not(.is-in-play) .tool__piece { opacity: 0; pointer-events: none; }
html.js.motion .drawer.is-tipped .tool.is-in-play .tool__piece, .tool.is-live .tool__piece { cursor: grab; }
.tool.is-held .tool__piece { cursor: grabbing; z-index: 30; }
.tool.is-flying .tool__piece, .tool.is-acting .tool__piece { z-index: 20; }
.tool.is-live .tool__piece:hover ~ .tool__name, .tool.is-held .tool__name, .tool.is-acting .tool__name { color: var(--ink-2); }
.tool__in:focus-visible { outline: var(--ring-width) solid var(--ring); outline-offset: 6px; }

.drawer__bottom { display: grid; position: relative; z-index: 3; min-height: 2.4em; align-items: end; }
.drawer__bottom > * { grid-area: 1 / 1; }
.drawer__hint {
  display: inline-flex; align-items: center; gap: .8em; justify-self: start; transition: opacity .3s;
  font-family: var(--font-label); font-variation-settings: "MONO" 1, "CASL" 0; font-size: var(--text-xs); letter-spacing: .06em; color: var(--ink-3); text-transform: uppercase; font-weight: 600;
}
html:not(.js) .drawer__hint, html:not(.js) .drawer__count { display: none; }
html:not(.js) .lede__b { display: none; }
/* the payoff: the line the whole set piece lands on, big, in the copy column (the end frame) */
.drawer__line {
  max-width: 18ch; font-family: var(--font-display); font-weight: 800; letter-spacing: var(--tracking-display);
  font-size: clamp(2rem, 1rem + 2.4vw, 3.5rem); line-height: 1.04; color: var(--ink); text-wrap: balance;
}
.drawer__line .glyph-word { display: inline-block; }
html.js.motion .drawer__line { opacity: 0; }
html.js.motion .drawer__line.is-on { opacity: 1; }
html.failsafe .drawer__line { opacity: 1 !important; }
@media (max-width: 1099px) { .drawer__line { font-size: clamp(1.5rem, 1rem + 2.2vw, 2.25rem); max-width: 24ch; } }
@media (max-width: 720px) {
  .drawer__count { justify-items: start; text-align: left; padding-top: 0; }
  .drawer__top { gap: var(--space-3); }
  .drawer__lede { font-size: var(--text-sm); }
  .count__slots { gap: 5px; }
  .mslot { width: 17px; height: 12px; }
  .drawer__line { font-size: clamp(1.375rem, 1rem + 2vw, 1.75rem); }
}
@media (max-height: 760px) and (min-width: 721px) { .drawer__lede { font-size: var(--text-md); } }

/* ================================================================== 02 apps: set in foam (r11-c: ../system/setinfoam.css; the old
   tray's cards, empty cut and mystery piece are retired). What stays here is shared with the rest of the page. */
/* a big cut needs big-cut cues, or a lifted piece uncovers a flat green slab: the floor is a step deeper (darker under
   the far wall, foam-grained), the contact shadow and the occlusion scale with the cut, the near rim catches the light */
.contact__slot, .about__note {
  --deep-floor: var(--board-grain), linear-gradient(172deg, color-mix(in oklab, var(--floor-top) 62%, #01170D) 0%, var(--floor-top) 38%, color-mix(in oklab, var(--floor-bot) 88%, #01170D) 100%);
  --deep-cut: inset 2px 12px 0 -2px var(--pocket-edge-a), inset 6px 30px 34px -12px var(--pocket-ao-a), inset 0 -2px 0 -1px rgba(255,255,255,.18), 0 1px 0 var(--lip-a);
}
.tag--tape { transform: rotate(-1.5deg); height: 28px; font-size: 12px; padding-inline: .8em; }
.shelf__note { margin-top: var(--space-5); max-width: 70ch; }
.shelf__tip { display: none; }
@media (hover: hover) and (pointer: fine) { html.js.motion .shelf__tip { display: inline; color: var(--ink-2); } }

/* the side you touch lifts first (the pivot is the far foot); --side is set by homepage.js, -1 (left) .. 1 (right) */
@media (hover: hover) {
  .btn .btn__piece { transform-origin: calc(50% - var(--side, -1) * 12%) 100%; }
  .btn:hover .btn__piece { transform: translate(calc(var(--side, -1) * 1px), var(--lift-1-y)) rotate(calc(var(--side, -1) * -1 * var(--lift-1-r))); }
}

/* ================================================================== 03 how we build: one milled bar, four numeral pockets */
.rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: none; overflow: hidden; }
ol.rules.insert { padding: 0; }
.rule { position: relative; display: grid; align-content: start; gap: var(--space-3); padding: clamp(22px, 2.6vw, 36px) clamp(18px, 2.2vw, 32px) clamp(26px, 3vw, 40px); }
/* the grooves between the four places: a milled line (shadow + lip) */
.rule + .rule { box-shadow: inset 1px 0 0 var(--kerf), inset 2px 0 0 var(--lip-a); }
.rule__h { font-size: var(--text-xl); }
.rule__text { display: grid; gap: var(--space-2); }
.rule__text p { color: var(--ink-2); max-width: 30ch; }
.numeral {
  display: inline-block; position: relative; justify-self: start;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(4.5rem, 3.2rem + 3.6vw, 7.5rem); line-height: .86; letter-spacing: 0;
  color: var(--ink); margin: -.02em 0 var(--space-2) -.04em; padding-top: .12em;
}
.numeral__piece { display: inline-block; transform-origin: 30% 100%; transition: transform var(--dur-hover) var(--ease-spring); }
.numeral .glc-letter-slot { opacity: 0; transition: opacity 0s linear .42s; }
.numeral.is-out .glc-letter-slot { opacity: 1; transition-delay: 0s; }
@media (hover: hover) {
  .rule:hover .numeral .glc-letter-slot { opacity: 1; transition-delay: 0s; }
  /* a lift that shows a crescent of the cut (like the wordmark's brush), never a second numeral under the first */
  .rule:hover .numeral__piece { transform: translate(.05em, -.13em) rotate(-6deg); }
}
@media (max-width: 1100px) {
  .rules { grid-template-columns: 1fr 1fr; }
  .rule:nth-child(3) { box-shadow: inset 0 1px 0 var(--kerf), inset 0 2px 0 var(--lip-a); }
  .rule:nth-child(4) { box-shadow: inset 1px 0 0 var(--kerf), inset 2px 0 0 var(--lip-a), inset 0 1px 0 var(--kerf), inset 0 2px 0 var(--lip-a); }
}
@media (max-width: 600px) {
  .rule { padding: 20px 16px 24px; gap: var(--space-2); }
  .numeral { font-size: 3.75rem; }
  .rule__h { font-size: 1.25rem; }
  .rule__text p { font-size: var(--text-sm); }
}

/* ================================================================== 04 about */
.about__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-7) var(--space-8); align-items: start; }
.about__head { grid-column: 1 / -1; display: grid; gap: var(--space-5); }
.about__h { font-size: clamp(2.75rem, 1rem + 6.9vw, 8.5rem); line-height: 1.42; letter-spacing: var(--tracking-display); }
@media (min-width: 900px) { .about__h { white-space: nowrap; line-height: 1; } }
.about__h:has(.glyph--slot) { padding-top: .42em; }
.about__body { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-5) var(--space-8); }
@media (max-width: 860px) { .about__body { grid-template-columns: 1fr; } }
.about__body p:not(.lede) { color: var(--ink-2); }
.about__h .glyph--slot { cursor: pointer; }
.glyph.has-ghost { isolation: isolate; }
.glyph > .glyph__piece { display: inline-block; }

/* ================================================================== 05 support: three address pieces in one tray */
.contacts { display: grid; gap: clamp(10px, 1.2vw, 16px); }
.contact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: stretch; }
.contact__slot { display: block; padding: var(--space-kerf); border-radius: calc(var(--radius-lg) + var(--space-kerf)); background: var(--deep-floor); box-shadow: inset 0 0 0 var(--space-kerf) var(--kerf), var(--deep-cut); }
.contact__piece {
  position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; gap: var(--space-4);
  min-height: 76px; padding: var(--space-4) var(--space-6); border-radius: var(--radius-lg);
  background: var(--piece); box-shadow: var(--z-flush); color: var(--ink); text-decoration: none;
  transform-origin: calc(50% - var(--side, -1) * 40%) 100%;
  transition: transform calc(var(--dur-hover) * 1.3) var(--ease-spring), box-shadow var(--dur-hover) var(--ease-settle);
}
.contact__k { grid-column: span 2; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--ink-3); font-weight: 640; }
.contact__addr { grid-column: span 5; font-weight: 700; font-size: var(--text-lg); letter-spacing: -.005em; overflow-wrap: anywhere; }
.contact__what { grid-column: span 5; color: var(--ink-3); font-size: var(--text-sm); }
/* a long piece barely tilts when it lifts (its far end would swing into the row below); the lift stays inside the gap */
@media (hover: hover) {
  .contact__piece:hover { transform: translateY(-6px) rotate(calc(var(--side, -1) * -.22deg)); box-shadow: var(--z-lift-1); }
}
.contact__piece:active { transform: translateY(var(--press-y)) scale(1.002, .985); box-shadow: var(--z-flush); transition-duration: var(--dur-press); }
.contact__piece:focus-visible { outline-offset: 4px; border-radius: var(--radius-lg); }
.copy {
  position: relative; display: inline-grid; place-items: center; border: 0; padding: 0; background: none; border-radius: var(--radius-lg);
  -webkit-tap-highlight-color: transparent; min-width: 92px;
}
.copy::before { content: ""; position: absolute; inset: 0; border-radius: calc(var(--radius-lg) + var(--space-kerf)); background: linear-gradient(var(--floor-top), var(--floor-bot)); box-shadow: inset 0 0 0 var(--space-kerf) var(--kerf), var(--z-sunk-1); }
.copy__piece, .copy__done {
  grid-area: 1 / 1; position: relative; display: grid; place-items: center; width: calc(100% - 4px); height: calc(100% - 4px); min-height: 48px; padding: 0 var(--space-5);
  border-radius: var(--radius-lg); background: var(--piece); color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--line), var(--z-flush);
  font-family: var(--font-label); font-variation-settings: "MONO" 1, "CASL" 0; font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; font-weight: 640;
  transition: transform var(--dur-hover) var(--ease-spring), box-shadow var(--dur-hover) var(--ease-settle);
}
.copy__done { background: var(--ink); color: var(--board); box-shadow: var(--z-flush); visibility: hidden; transform: translateY(-10px) rotate(-3deg); opacity: 0; }
.copy.is-done .copy__piece { visibility: hidden; }
.copy.is-done .copy__done { visibility: visible; transform: none; opacity: 1; transition: transform 320ms var(--ease-seat), opacity 80ms; }
@media (hover: hover) { .copy:hover .copy__piece { transform: translateY(-4px) rotate(-1.5deg); box-shadow: inset 0 0 0 1.5px var(--line), var(--z-lift-1); color: var(--ink); } }
.copy:active .copy__piece { transform: translateY(var(--press-y)); transition-duration: var(--dur-press); }
.copy:focus-visible { outline-offset: 3px; }
.support__more { margin-top: var(--space-6); color: var(--ink-2); }
/* the three-column row needs room for a whole address (it never breaks inside the word): below 1240 px the
   description drops under the address (between 1001 and 1150 px it used to break as "getlesschaos.co m") */
@media (max-width: 1240px) {
  .contact__k { grid-column: span 3; }
  .contact__addr { grid-column: span 9; }
  .contact__what { grid-column: 4 / -1; margin-top: -10px; }
}
@media (max-width: 760px) {
  .contact__piece { grid-template-columns: 1fr; gap: 4px; padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5); }
  .contact__k, .contact__addr, .contact__what { grid-column: 1; margin: 0; }
  .contact { gap: var(--space-2); align-items: center; }
  .copy__piece, .copy__done { min-height: 44px; }
  .contact__addr { font-size: var(--text-md); }
  .copy { min-width: 0; align-self: stretch; }
  .copy__piece, .copy__done { padding: 0 var(--space-3); }
}
@media (max-width: 420px) {
  .contact__addr { font-size: var(--text-sm); letter-spacing: -.01em; }
  .copy__piece, .copy__done { padding: 0 10px; font-size: 11px; }
  .drawer__hint .hint-more { display: none; }
}
/* the smallest phones: every address still fits on one line (no break inside the word) */
@media (max-width: 400px) {
  .contact { gap: 6px; }
  .contact__piece { padding: 14px 10px 14px 14px; }
  .contact__addr { font-size: 14px; letter-spacing: -.018em; }
  .copy__piece, .copy__done { padding: 0 8px; font-size: 10.5px; letter-spacing: .05em; }
}

/* ================================================================== footer: the drawer's bottom layer */
.site-footer {
  position: relative; margin-top: 0; border-top: 0; color: var(--ink-2);
  background: var(--grain-light), radial-gradient(120% 140% at 30% 0%, var(--tray-top) 0%, var(--tray) 55%, var(--tray-bot) 100%);
  box-shadow: inset 0 22px 30px -22px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.06);
  padding-block: var(--space-8) var(--space-7);
}
.site-footer__row { gap: var(--space-5) var(--space-6); }
.footer-mark { display: flex; align-items: center; gap: var(--space-5); }
.footer-brand { display: block; height: 34px; border-radius: var(--radius-sm); }
.footer-brand .glc-mini, .footer-brand .glc-fallback { height: 100%; width: auto; }
.footer-brand:focus-visible { outline-offset: 6px; }
.site-footer__links a { color: var(--ink-2); }
.site-footer__links a:hover { color: var(--ink); }
.site-footer__row--meta { margin-top: var(--space-7); font-size: var(--text-sm); color: var(--ink-2); }
/* the stash: the bottom layer of the drawer has a cut for every piece the page used (system/stash.js draws the cuts
   with the wordmark's recipe and puts the pieces away); a milled groove separates it from the links above */
.stash-bay { margin-top: var(--space-7); padding-top: var(--space-6); box-shadow: inset 0 1px 0 rgba(0,0,0,.55), inset 0 2px 0 rgba(255,255,255,.05); }
.stash__say { margin: 0 0 var(--space-5); color: var(--ink-2); font-size: var(--text-md); text-wrap: balance; }
.stash__b[hidden], .stash__a[hidden] { display: none; }
.stash__except { color: var(--foam-ink); font-weight: 640; display: inline-block; transition: opacity .35s var(--ease-settle), transform .5s var(--ease-pop); }
.stash__except:not(.is-on) { transform: translateY(-.4em) rotate(-4deg); }
.stash { width: 100%; min-height: 96px; }
html:not(.js) .stash-bay { display: none; }
@media (max-width: 640px) { .stash-bay { margin-top: var(--space-6); padding-top: var(--space-5); } .stash__say { font-size: var(--text-sm); } }
.tag--paper { --tape: var(--paper); --tape-fg: #16181B; text-shadow: none; transform: rotate(-1.2deg); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 2px 0 rgba(0,0,0,.4), 0 8px 16px -8px rgba(0,0,0,.6); }
.site-footer .wink { font-size: 11.5px; letter-spacing: .08em; height: 26px; }
@media (max-width: 640px) { .site-footer__row { flex-direction: column; align-items: flex-start; } }

/* ================================================================== the hand: a label-maker tape that follows the cursor over pieces you can pick up */
.hand-tape { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; opacity: 0; visibility: hidden; transform-origin: 0 0; }
.hand-tape span {
  display: inline-flex; align-items: center; height: 22px; padding: 0 .62em 0 .66em; border-radius: 2px;
  background: var(--ink); color: var(--board); white-space: nowrap;
  font-family: var(--font-label); font-variation-settings: "MONO" 1, "CASL" 0; font-weight: 640; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 6px 14px -6px rgba(0,0,0,.4);
}

/* ================================================================== reduced motion: the rest state, beautifully */
@media (prefers-reduced-motion: reduce) {
  .cue-slot i { animation: none; }
  .numeral .glc-letter-slot { display: none; }
  .hand-tape { display: none; }
}

/* ================================================================== without scripts: no dead controls, icons drawn by CSS */
html:not(.js) .copy, html:not(.js) .foot-btn, html:not(.js) .hero__sound { display: none; }
html:not(.js) .contact { grid-template-columns: 1fr; }

/* r00 baseline: copy fit */
/* the drawn pieces have lost their everyday words; empty labels don't show */
.tool__tape:empty, .tool__big:empty, .tool__stamp:empty, .tool__badge:empty, .tool__head:empty, .tool__note:empty, .tool__hand:empty { display: none; }
/* where the chaos lands: the second line, smaller, arriving with the first */
.drawer__line { max-width: 22ch; }
.drawer__line-sub { display: block; margin-top: .55em; max-width: 34ch; font-family: var(--font-text, inherit); font-weight: 400; letter-spacing: 0;
  font-size: clamp(1rem, .9rem + .35vw, 1.25rem); line-height: 1.45; color: var(--ink-soft, var(--ink)); }
/* r00 baseline: the drawer's pieces are the final copy's pile of words. PLACEHOLDERS: the designers turn them into
   objects (or object-like pieces) that represent these words; words only where that makes sense as design */
.tool--word .tool__in > .tool__word { left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(0deg); font-family: var(--font-display);
  font-weight: 800; font-size: calc(30px * var(--fs)); letter-spacing: -.02em; color: var(--tile); }
/* r00: the How intro is longer now; it stays on one line where the approved one did, and never strands "to keep." */
.how .section-head p { max-width: 54ch; text-wrap: balance; }
/* r00: Support's labels are longer now ("Help with an app or game"). From 1300px: label, address and line side by
   side, each on one line. Below that the design's narrower row (the line under the address) now starts at 1300px
   instead of 1240px, so the address never breaks; a label that has to wrap breaks evenly */
.contact__k { text-wrap: balance; }
@media (min-width: 1240.02px) and (max-width: 1299.98px) {
  .contact__k { grid-column: span 3; }
  .contact__addr { grid-column: span 9; }
  .contact__what { grid-column: 4 / -1; margin-top: -10px; }
}
@media (min-width: 1300px) {
  .contact__piece { grid-template-columns: 14rem minmax(0, 1fr) minmax(0, 1fr); }
  .contact__k, .contact__addr, .contact__what { grid-column: auto; }
}
/* r00 (user, 2026-10-24): About comes before the rules, and "Why the name?" is its feature: a paper piece in its own
   cut, labeled with tape like the rest of the page, its answer set big; the piece lifts on hover like the others */
.about__body { align-items: start; }
.about__note { display: block; padding: var(--space-kerf); border-radius: calc(var(--radius-lg) + var(--space-kerf)); background: var(--deep-floor); box-shadow: inset 0 0 0 var(--space-kerf) var(--kerf), var(--deep-cut); }
.about__piece {
  display: grid; gap: var(--space-4); justify-items: start; padding: var(--space-6) var(--space-7) var(--space-7);
  border-radius: var(--radius-lg); background: var(--piece); box-shadow: var(--z-flush); color: var(--ink);
  transform-origin: 30% 100%; transition: transform calc(var(--dur-hover) * 1.3) var(--ease-spring), box-shadow var(--dur-hover) var(--ease-settle);
}
@media (hover: hover) { .about__note:hover .about__piece { transform: translateY(-6px) rotate(-.3deg); box-shadow: var(--z-lift-1); } }
.about__q { margin: 0; }
.about__body p.about__why { margin: 0; max-width: 32ch; color: var(--ink); font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.3rem, 1rem + 1.1vw, 2rem); line-height: 1.25; letter-spacing: -.012em; text-wrap: pretty; }
@media (max-width: 640px) { .about__piece { padding: var(--space-5) var(--space-5) var(--space-6); } }
/* r00: on the narrowest phones (320px) the bench edge (replay, the way down, sound) was wider than the screen and
   pushed the page sideways; there it tightens up, and wraps if it still has to */
@media (max-width: 460px) { .hero__foot { gap: 8px 12px; flex-wrap: wrap; } }