/* Get Less Chaos: A Place for Everything. The other pages (Apps & games, Support, Privacy, Terms, page not found).
   One stylesheet for all five, on top of the system (tokens.css, base.css, components.css).

   The same board as the homepage: one piece of foam with a fine grain. Every page opens with its heading set on the
   board (one letter waits over its own pocket), then its content sits in an INSERT cut into the board (a light tray),
   each block a piece seated in its own cut. The footer is the drawer's dark bottom layer.

   The parts marked "shared with the homepage" are the homepage's own rules (homepage/homepage.css), carried over with
   the same values so the header, footer, app cards, empty slot and copy pieces look exactly the same. They belong in
   system/components.css one day, so both pages use one copy. */

/* ================================================================== the board (shared with the homepage) */
:root { --header-h: 76px;
  --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");
  --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); }

/* the footer stays at the bottom of a short page (page not found) */
body { display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }

/* ================================================================== header (shared with the homepage) */
.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); }
/* without scripts the Menu piece can't open its sheet: the links stay on the bar instead (the Menu piece takes over
   at 820px, system/components.css) */
@media (max-width: 820px) {
  html:not(.js) .nav__toggle { display: none; }
  html:not(.js) .nav ul { position: static; visibility: visible; opacity: 1; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 0 4px; padding: 0; background: none; box-shadow: none; }
  html:not(.js) .nav ul .nav__link { width: auto; height: 36px; padding: 0 6px; font-size: var(--text-xs); }
  html:not(.js) .site-header__bar { height: auto; min-height: 64px; flex-wrap: wrap; padding-block: 8px; }
}

/* ================================================================== the page: heading on the board, then its insert */
main[tabindex="-1"]:focus, [tabindex="-1"]:focus { outline: none; }
.eyebrow__n { color: var(--ink); font-weight: 700; }
.page { padding-block: clamp(40px, 6vw, 96px) var(--space-section); }
.page-head { margin-bottom: clamp(40px, 4.6vw, 64px); }
.page-head h1 {
  font-size: clamp(2.75rem, 1.5rem + 4.4vw, 5.5rem); line-height: 1.02; letter-spacing: var(--tracking-display);
  max-width: 16ch;
}
.page-head h1:has(.glyph--slot) { padding-top: .42em; }   /* room for the letter that waits above its slot */
.page-head p { max-width: 46ch; }
.page-head p.page-head__long { max-width: 58ch; }
/* a heading is set before you get to read it (motion.js assemble): it waits, invisible but still read by screen
   readers, until its words are split; whatever happens to the scripts, it shows by 6 s */
html.js.motion .js-assemble:not(.is-set) { opacity: 0; }
html.failsafe .js-assemble, html.failsafe .glyph-word { opacity: 1 !important; }
html.failsafe .glyph-word { transform: none !important; }

/* an INSERT: a tray cut into the board. Light foam, a deep neutral cut, the pieces seated in it (shared with the homepage) */
.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); }

/* a big cut needs big-cut cues: a deeper floor (darker under the far wall, foam-grained) and a scaled occlusion
   (shared with the homepage) */
.block {
  --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);
}
/* a BLOCK: one big piece seated in its own cut; the 2 px kerf shows at rest as a shadowed wall (never green). Unlike
   a card it isn't picked up (it holds text to read), so it never lifts */
.block { 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); }
.block__piece { position: relative; border-radius: var(--radius-lg); background: var(--piece); box-shadow: var(--z-flush); padding: clamp(22px, 3.4vw, 48px); }

/* ================================================================== Apps & games: set in foam (r11-c: ../system/setinfoam.css; the
   old shelf's cards, empty slot and mystery piece are retired) */
.tag--tape { transform: rotate(-1.5deg); height: 28px; font-size: 12px; padding-inline: .8em; }
/* the side you touch lifts first (the pivot is the far foot); --side is set by pages.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))); }
}

/* ================================================================== Apps & games */
/* the empty state: shown only when the list has no apps */
.apps__empty { display: none; margin: 0 0 var(--space-6); font-size: var(--text-lg); color: var(--ink-2); }
.apps:not(:has(.set__list > .set__item)) .apps__empty, .apps.is-empty .apps__empty { display: block; }   /* r11-c: the set's rows */
.apps__help { margin-top: var(--space-6); color: var(--ink-2); max-width: none; }

/* ================================================================== copy: an address goes in the hand (shared with the homepage) */
.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; flex: none;
}
.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; }
/* on a light piece the copy piece is the same paper as the piece around it: its own cut carries it */
.block__piece .copy__piece { background: var(--board); }

/* an address in running text: a little heavier than the words around it, in its green groove (base.css .link) */
.addr { font-weight: 700; white-space: nowrap; }

/* ================================================================== address rows: the homepage's Support tray (shared with the homepage)
   One row per address: a long piece in its own deep cut (a mailto link that lifts, barely tilting) and a copy piece
   beside it. The label (.contact__k) and the line under it (.contact__what) are optional */
.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);
  --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); }
.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; text-wrap: balance; }
.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); }
.contact__piece > .contact__addr:only-child { grid-column: 1 / -1; }
@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); }
@media (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; }
}
@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; }
  .contact .copy__piece, .contact .copy__done { min-height: 44px; }
  .contact__addr { font-size: var(--text-md); }
  .contact .copy { min-width: 0; align-self: stretch; }
  .contact .copy__piece, .contact .copy__done { padding: 0 var(--space-3); }
}
@media (max-width: 420px) {
  .contact__addr { font-size: var(--text-sm); letter-spacing: -.01em; }
  .contact .copy__piece, .contact .copy__done { padding: 0 10px; font-size: 11px; }
}
@media (max-width: 400px) {
  .contact { gap: 6px; }
  .contact__piece { padding: 14px 10px 14px 14px; }
  .contact__addr { font-size: 14px; letter-spacing: -.018em; }
  .contact .copy__piece, .contact .copy__done { padding: 0 8px; font-size: 10.5px; letter-spacing: .05em; }
}
html:not(.js) .contact { grid-template-columns: 1fr; }

/* ================================================================== Support blocks: words with an address in them */
.help { display: grid; gap: clamp(10px, 1.2vw, 16px); }
/* a line with its copy piece beside it: the copy sits right after the words, aligned with their first line */
.say { display: grid; grid-template-columns: minmax(0, max-content) auto; justify-content: start; align-items: start; gap: var(--space-4) var(--space-6); }
.say > p { max-width: 48ch; }
.say .copy { margin-top: -.15em; }
.help__lead { font-size: clamp(1.25rem, 1.02rem + .85vw, 1.75rem); line-height: 1.32; font-weight: 600; letter-spacing: -.008em; color: var(--ink); }
.help__line { font-size: var(--text-lg); line-height: 1.5; color: var(--ink-2); max-width: 52ch; }
.help__line .addr { color: var(--ink); }
/* the three things to include: one milled bar with three places, the grooves between them cut with a shadow and a
   lip (the homepage's rules bar, small). Each place has a mini slot whose piece drops in as the list arrives */
.checklist {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(22px, 2.6vw, 34px) 0 0; overflow: hidden;
  border-radius: calc(var(--radius-md) + 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);
}
ul.checklist { padding: 0; }
.checklist li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 14px; padding: clamp(18px, 2vw, 26px) clamp(16px, 2vw, 26px); color: var(--ink); font-weight: 560; text-wrap: pretty; }
.checklist li + li { box-shadow: inset 1px 0 0 var(--kerf), inset 2px 0 0 var(--lip-a); }
.tick {
  position: relative; display: block; width: 22px; height: 16px; margin-top: .26em; border-radius: 5px; flex: none;
  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);
}
.tick i { position: absolute; inset: 0; border-radius: 5px; background: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
html.js.motion .tick:not(.is-in) i { transform: translateY(-13px) rotate(-14deg); opacity: 0; transition: transform .22s var(--ease-drop), opacity .12s; }
html.js.motion .tick.is-in i { animation: glc-thunk var(--dur-thunk) var(--ease-thunk) both; }
.help__note { margin-top: var(--space-5); color: var(--ink-3); font-size: var(--text-sm); }
@media (max-width: 900px) {
  .checklist { grid-template-columns: 1fr; }
  .checklist li + li { box-shadow: inset 0 1px 0 var(--kerf), inset 0 2px 0 var(--lip-a); }
}
@media (max-width: 560px) {
  .say { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .say .copy { margin-top: 0; justify-self: start; }
  .block__piece { padding: 20px 18px 22px; }
  .checklist li { padding: 16px 14px; gap: 12px; }
}

/* ================================================================== Privacy and Terms: the legal text on one sheet */
/* the sheet is one big piece in its cut; each part of it is a place on the sheet, with a milled groove between.
   Wide: the heading on the left, the words on the right, on the same baseline. The measure stays under 64ch */
.sheet { padding: clamp(22px, 4.2vw, 64px) clamp(20px, 4.6vw, 72px) clamp(10px, 2.4vw, 32px); }
.sheet p { max-width: 64ch; }
/* QA fix (r20-final): a long web address (Privacy's "tools.google.com/dlpage/gaoptout") ran out of the sheet and off the
   screen on phones up to about 380 wide; it now breaks where it has to, only when it can't fit on its line */
.sheet a { overflow-wrap: break-word; }
.sheet__date { margin-bottom: clamp(14px, 2vw, 26px); }
.tag--date { height: auto; min-height: 28px; padding: 6px .8em; font-size: 12px; line-height: 1.25; white-space: normal; transform: rotate(-1.2deg); transform-origin: 0 50%; }
/* stuck on as the sheet arrives (pages.js); invisible until then, but still read by screen readers */
@keyframes tape-on { from { transform: translate(-6px, -14px) rotate(-6deg); opacity: 0; } 40% { opacity: 1; } to { transform: rotate(-1.2deg); } }
html.js.motion .tag--date:not(.is-stuck) { opacity: 0; }
html.js.motion .tag--date.is-stuck { animation: tape-on .42s var(--ease-seat) both; }
html.failsafe .tag--date { opacity: 1 !important; }
/* a clause: its heading (h2) on the left, everything else (paragraphs, lists) stacked on the right */
.clause { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); align-items: start; gap: .9em clamp(28px, 4vw, 64px); padding-block: clamp(22px, 2.6vw, 34px); }
.clause > h2 { grid-column: 1; grid-row: 1; }
.clause > :not(h2) { grid-column: 2; }
.clause + .clause { box-shadow: inset 0 1px 0 var(--kerf), inset 0 2px 0 var(--lip-a); }
.clause h2 { font-size: var(--text-lg); line-height: 1.25; letter-spacing: -.006em; max-width: 18ch; padding-top: .12em; }
.clause h3 { font-size: var(--text-md); line-height: 1.4; font-weight: var(--weight-bold); letter-spacing: 0; margin-top: .4em; }
.clause p, .sheet li { color: var(--ink-2); font-size: clamp(1.0625rem, 1.02rem + .18vw, 1.1875rem); line-height: var(--leading-loose); }
/* lists in the legal text: each item has a tiny cut for a bullet (the eyebrow's own slot); numbered lists use the
   label face. Give a styled list role="list" so Safari keeps reading it as a list */
.sheet ul, .sheet ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .35em; max-width: 64ch; }
.sheet ul > li, .sheet ol > li { position: relative; padding-left: 1.7em; text-wrap: pretty; }
.sheet ul > li::before {
  content: ""; position: absolute; left: .3em; top: .78em; width: .62em; height: .42em; border-radius: 2px;
  background: linear-gradient(var(--floor-top), var(--floor-bot));
  box-shadow: inset .5px 1.5px 0 -.5px var(--pocket-edge-a), 0 1px 0 var(--lip-a);
}
.sheet ol { counter-reset: glc-n; }
.sheet ol > li { counter-increment: glc-n; padding-left: 2.1em; }
.sheet ol > li::before {
  content: counter(glc-n); position: absolute; left: 0; top: 0;
  font-family: var(--font-label); font-variation-settings: "MONO" 1, "CASL" 0; font-weight: 700; font-size: .82em; color: var(--ink);
  line-height: calc(var(--leading-loose) / .82);
}
.sheet strong, .sheet b { color: var(--ink); }
.clause__addr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.clause__addr p { font-size: var(--text-lg); line-height: 1.4; color: var(--ink); }
.clause__addr p a { font-weight: 700; }
@media (max-width: 760px) {
  .clause { grid-template-columns: minmax(0, 1fr); gap: .6em; }
  .clause > h2, .clause > :not(h2) { grid-column: 1; grid-row: auto; }
  .clause h2 { max-width: none; padding-top: 0; }
}
@media (max-width: 560px) {
  .doc.insert { padding: 8px; }
  .sheet { padding: 22px 18px 6px; }
  .clause { padding-block: 20px 22px; }
  .clause__addr p { font-size: var(--text-md); }
}

/* ================================================================== page not found */
.lost { display: grid; align-content: center; min-height: calc(100svh - var(--header-h) - 220px); }
.lost h1 {
  font-size: clamp(2.75rem, 1rem + 6.9vw, 8.5rem); line-height: 1.12; letter-spacing: var(--tracking-display); max-width: none;
}
@media (min-width: 900px) { .lost h1 { white-space: nowrap; line-height: 1; } }
.lost h1:has(.glyph--slot) { padding-top: .42em; }
.lost h1 .glyph--slot { cursor: pointer; }
.glyph.has-ghost { isolation: isolate; }
.glyph > .glyph__piece { display: inline-block; }
.lost__line { margin-top: var(--space-5); font-size: var(--text-lg); color: var(--ink-2); }
.lost__go { margin-top: clamp(28px, 3.6vw, 44px); }
/* the way home sits in its own milled pocket, like the homepage's first-screen pieces: a neutral cut, a kerf wider
   than the piece, visible at rest */
.pocketed { display: inline-flex; padding: 5px; }
.pocketed .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);
}

/* ================================================================== footer: the drawer's bottom layer (shared with the homepage) */
.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, .site-footer__links a[aria-current="page"] { color: var(--ink); }
.site-footer__links a[aria-current="page"] { text-decoration: underline 2px var(--foam); text-underline-offset: .3em; }
.site-footer__row--meta { margin-top: var(--space-7); font-size: var(--text-sm); color: var(--ink-2); }
.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__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); }
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: label-maker tape on the cursor, over things you can pick up (shared with the homepage) */
.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, still and complete */
@media (prefers-reduced-motion: reduce) {
  .hand-tape { display: none; }
  .tick i { transform: none !important; opacity: 1 !important; animation: none !important; }
}

/* ================================================================== without scripts: no dead controls */
html:not(.js) .copy { display: none; }
html:not(.js) .say { grid-template-columns: minmax(0, 1fr); }