/* ==========================================================================
   PAWN LEADS THEME KIT: AFTER HOURS
   The shop at night, neon on. Deep night stage in the family's "print night"
   dialect (grain, registration marks, halftone light, ink outlines, hard
   offset shadows), one lit statement per screen, and cream paper objects
   (tickets, tags, ledgers) that pop off the dark in navy ink.

   Display: Big Shoulders Display 800/900. Body: Schibsted Grotesk.
   Hand: Gloria Hallelujah (notes only, a few words at a time).

   This file is the whole shared system: tokens, base, bands and edges, type,
   buttons, header and menu, footer, motion contract and the inner-page kit.
   Homepage-only styles live in home.css; page styles in css/pages/<page>.css.
   The build manual is THEME.md. The live styleguide is kit.html.

   Motion: the resting state is the finished state. The head script adds
   html.motion (armed "from" poses) only when motion is allowed; reduced
   motion and no-JS both get a still, complete page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* night stage (tinted to Pawn navy, hue about 222) */
  --ah-950: #03060d;
  --ah-920: #050912;
  --ah-900: #070d1a;
  --ah-850: #09111f;
  --ah-800: #0b1424;
  --ah-700: #101c33;
  --ah-600: #17284a;
  --ah-500: #22385f;
  --ah-line: rgba(173, 229, 255, 0.16);
  --ah-line-2: rgba(173, 229, 255, 0.3);

  /* brand */
  --ah-blue: #1b8df6;        /* fills; also passes as text on night (5.5:1). NEVER white text on it */
  --ah-blue-hi: #3d9eff;
  --ah-blue-deep: #0a6fd4;   /* white text allowed on this one (5.0:1) */
  --ah-blue-ink: #1565c0;    /* blue as text on cream paper (5.3:1) */
  --ah-sky: #ade5ff;

  /* type colors on night */
  --ah-paper: #eef4fb;       /* 17:1 */
  --ah-fog: #aebed3;         /* 10:1 */
  --ah-mute: #8fa3bd;        /* 7.5:1 */

  /* paper objects */
  --ah-cream: #f6efdd;
  --ah-cream-2: #ece2c8;
  --ah-ink: #0b1424;
  --ah-ink-2: #34425b;       /* muted text on cream (9:1) */
  --ah-red-ink: #b42318;     /* stamps on cream (6.1:1) */

  /* small objects only: three balls, frame, plaque, bolts, joints */
  --ah-gold: #f2b632;
  --ah-brass-hi: #ffe3a1;
  --ah-brass: #d9a637;
  --ah-brass-lo: #9c7420;
  --ah-steel-a: #e3e9f0;
  --ah-steel-b: #9aa7b8;
  --ah-steel-c: #5d6a7d;

  /* neon (the one sanctioned glow: tube objects only) */
  --ah-neon-blue: #2f9bff;
  --ah-neon-blue-core: #e6f4ff;
  --ah-neon-sky: #8fd6ff;
  --ah-neon-gold: #ffbf3a;
  --ah-neon-gold-core: #fff5d8;
  --ah-neon-pink: #ff3f86;
  --ah-neon-pink-core: #ffe4ee;
  --ah-hot: #ff5c97;         /* the pink accent word on night (6.3:1) */

  /* type */
  --ah-display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --ah-body: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ah-hand: "Gloria Hallelujah", "Marker Felt", "Comic Sans MS", cursive;
  --ah-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* shape */
  --ah-outline:
    drop-shadow(2px 0 0 var(--ah-950)) drop-shadow(-2px 0 0 var(--ah-950))
    drop-shadow(0 2px 0 var(--ah-950)) drop-shadow(0 -2px 0 var(--ah-950));
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-snap: cubic-bezier(0.2, 0.9, 0.25, 1.15);

  --gut: 16px;
  --header-h: 64px;
  --pad-y: clamp(72px, 9vw, 128px);

  /* textures (inline tiles: no requests, painted once, no fixed layers) */
  --ah-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='2.2 0 0 0 -.6 2.2 0 0 0 -.6 2.2 0 0 0 -.6 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.07'/%3E%3C/svg%3E");
  --ah-reg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' fill='none' stroke='%23eef4fb' stroke-opacity='.28' stroke-width='1.2'%3E%3Ccircle cx='13' cy='13' r='6'/%3E%3Cpath d='M13 1v24M1 13h24'/%3E%3C/svg%3E");
  --ah-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='340' fill='%23eef4fb' fill-opacity='.11'%3E%3Cpath d='M60 63l1.5 5.5L67 70l-5.5 1.5L60 77l-1.5-5.5L53 70l5.5-1.5zM300 36l.9 3.1 3.1.9-3.1.9-.9 3.1-.9-3.1-3.1-.9 3.1-.9zM410 241l2 7 7 2-7 2-2 7-2-7-7-2 7-2zM170 275l1.1 3.9 3.9 1.1-3.9 1.1-1.1 3.9-1.1-3.9-3.9-1.1 3.9-1.1z'/%3E%3C/svg%3E");
  --ah-torn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12'%3E%3Cpath d='M0 12V7l4-3 5 4 4-5 6 4 3-6 5 5 6-3 4 4 5-5 6 3v7z'/%3E%3C/svg%3E");
  --ah-zigzag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 12 12 0l12 12z'/%3E%3C/svg%3E");
  --ah-perf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='12'%3E%3Cpath d='M0 12V0h7a6 6 0 0 0 12 0h7v12z'/%3E%3C/svg%3E");
  --ah-brick-dim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='44' viewBox='0 0 120 44'%3E%3Crect width='120' height='44' fill='%23090d18'/%3E%3Crect x='2' y='2' width='56' height='18' rx='1.5' fill='%231d1727'/%3E%3Crect x='3' y='2' width='54' height='1.5' fill='rgba(255,255,255,.04)'/%3E%3Crect x='3' y='18' width='54' height='2' fill='rgba(0,0,0,.28)'/%3E%3Crect x='62' y='2' width='56' height='18' rx='1.5' fill='%23191624'/%3E%3Crect x='63' y='2' width='54' height='1.5' fill='rgba(255,255,255,.04)'/%3E%3Crect x='63' y='18' width='54' height='2' fill='rgba(0,0,0,.28)'/%3E%3Crect x='-28' y='24' width='56' height='18' rx='1.5' fill='%23221a2b'/%3E%3Crect x='-27' y='24' width='54' height='1.5' fill='rgba(255,255,255,.04)'/%3E%3Crect x='-27' y='40' width='54' height='2' fill='rgba(0,0,0,.28)'/%3E%3Crect x='92' y='24' width='56' height='18' rx='1.5' fill='%23221a2b'/%3E%3Crect x='93' y='24' width='54' height='1.5' fill='rgba(255,255,255,.04)'/%3E%3Crect x='93' y='40' width='54' height='2' fill='rgba(0,0,0,.28)'/%3E%3Crect x='32' y='24' width='56' height='18' rx='1.5' fill='%231b1929'/%3E%3Crect x='33' y='24' width='54' height='1.5' fill='rgba(255,255,255,.04)'/%3E%3Crect x='33' y='40' width='54' height='2' fill='rgba(0,0,0,.28)'/%3E%3Crect x='14' y='8' width='3' height='2' fill='rgba(0,0,0,.35)'/%3E%3Crect x='40' y='13' width='2' height='1.5' fill='rgba(0,0,0,.35)'/%3E%3Crect x='77' y='6' width='2' height='2' fill='rgba(0,0,0,.35)'/%3E%3Crect x='101' y='14' width='3' height='1.5' fill='rgba(0,0,0,.35)'/%3E%3Crect x='8' y='31' width='2' height='2' fill='rgba(0,0,0,.35)'/%3E%3Crect x='50' y='36' width='2' height='1.5' fill='rgba(0,0,0,.35)'/%3E%3Crect x='66' y='29' width='3' height='2' fill='rgba(0,0,0,.35)'/%3E%3Crect x='84' y='37' width='2' height='1.5' fill='rgba(0,0,0,.35)'/%3E%3Crect x='110' y='30' width='2' height='2' fill='rgba(0,0,0,.35)'/%3E%3Crect x='23' y='15' width='3' height='1.5' fill='rgba(0,0,0,.35)'/%3E%3C/svg%3E");
  --ah-brick-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='44' viewBox='0 0 120 44'%3E%3Crect width='120' height='44' fill='%233b332d'/%3E%3Crect x='2' y='2' width='56' height='18' rx='1.5' fill='%237a4334'/%3E%3Crect x='3' y='2' width='54' height='1.5' fill='rgba(255,226,190,.2)'/%3E%3Crect x='3' y='18' width='54' height='2' fill='rgba(0,0,0,.28)'/%3E%3Crect x='62' y='2' width='56' height='18' rx='1.5' fill='%236b3b2f'/%3E%3Crect x='63' y='2' width='54' height='1.5' fill='rgba(255,226,190,.2)'/%3E%3Crect x='63' y='18' width='54' height='2' fill='rgba(0,0,0,.28)'/%3E%3Crect x='-28' y='24' width='56' height='18' rx='1.5' fill='%2383503b'/%3E%3Crect x='-27' y='24' width='54' height='1.5' fill='rgba(255,226,190,.2)'/%3E%3Crect x='-27' y='40' width='54' height='2' fill='rgba(0,0,0,.28)'/%3E%3Crect x='92' y='24' width='56' height='18' rx='1.5' fill='%2383503b'/%3E%3Crect x='93' y='24' width='54' height='1.5' fill='rgba(255,226,190,.2)'/%3E%3Crect x='93' y='40' width='54' height='2' fill='rgba(0,0,0,.28)'/%3E%3Crect x='32' y='24' width='56' height='18' rx='1.5' fill='%23713f30'/%3E%3Crect x='33' y='24' width='54' height='1.5' fill='rgba(255,226,190,.2)'/%3E%3Crect x='33' y='40' width='54' height='2' fill='rgba(0,0,0,.28)'/%3E%3Crect x='14' y='8' width='3' height='2' fill='rgba(40,16,8,.45)'/%3E%3Crect x='40' y='13' width='2' height='1.5' fill='rgba(40,16,8,.45)'/%3E%3Crect x='77' y='6' width='2' height='2' fill='rgba(40,16,8,.45)'/%3E%3Crect x='101' y='14' width='3' height='1.5' fill='rgba(40,16,8,.45)'/%3E%3Crect x='8' y='31' width='2' height='2' fill='rgba(40,16,8,.45)'/%3E%3Crect x='50' y='36' width='2' height='1.5' fill='rgba(40,16,8,.45)'/%3E%3Crect x='66' y='29' width='3' height='2' fill='rgba(40,16,8,.45)'/%3E%3Crect x='84' y='37' width='2' height='1.5' fill='rgba(40,16,8,.45)'/%3E%3Crect x='110' y='30' width='2' height='2' fill='rgba(40,16,8,.45)'/%3E%3Crect x='23' y='15' width='3' height='1.5' fill='rgba(40,16,8,.45)'/%3E%3C/svg%3E");
  --ah-guilloche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='9'%3E%3Cpath d='M0 4.5Q6.5-1 13 4.5T26 4.5' fill='none' stroke='%237fc6ec' stroke-width='1' opacity='.55'/%3E%3C/svg%3E");
  --ah-speckle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -7 0 0 0 4.7'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23s)'/%3E%3C/svg%3E");
  --ah-fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23f)'/%3E%3C/svg%3E");
  --ah-peg-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Crect width='28' height='28' fill='%238a6644'/%3E%3Ccircle cx='14' cy='14' r='3.4' fill='%232a1a0e'/%3E%3Cpath d='M10.8 15.4a3.4 3.4 0 0 0 6.4 0' stroke='%23c39a6c' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  --ah-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ah-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media (min-width: 640px) { :root { --gut: 28px; } }
@media (min-width: 1100px) { :root { --gut: 40px; --header-h: 74px; } }

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); background: var(--ah-900); color-scheme: dark; }
body {
  margin: 0;
  background-color: var(--ah-900);
  background-image: var(--ah-grain);
  color: var(--ah-paper);
  font-family: var(--ah-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
}
img, svg { max-width: 100%; }
img { display: block; height: auto; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; }
h1, h2 { font-family: var(--ah-display); font-weight: 900; }
h3, h4 { font-family: var(--ah-body); font-weight: 800; }
:where(h1, h2) :where(b, strong) { font-weight: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ah-sky); outline-offset: 3px; }
/* inside cream paper objects the ring goes navy (sky on cream is invisible) */
.dd-menu :focus-visible, .ah-card :focus-visible, .ah-ledger :focus-visible, .ah-print :focus-visible,
.ah-paper :focus-visible, .ah-faq :focus-visible, .ah-compare :focus-visible, .ah-pkg :focus-visible,
.ah-sheet :focus-visible, .ah-defn :focus-visible, .ah-receipt :focus-visible, .ah-pop :focus-visible,
.ah-ticket :focus-visible, .ah-callout :focus-visible, .ah-math :focus-visible, .ah-loop :focus-visible, .ah-ptag :focus-visible,
.ah-calc__deck :focus-visible, .ah-panel :focus-visible, .ah-result--you :focus-visible { outline-color: var(--ah-ink); }
@media (max-width: 1099px) { .nav-links :focus-visible { outline-color: var(--ah-ink); } }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ah-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ah-skip { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 18px; border: 2px solid var(--ah-950); border-radius: 999px; background: var(--ah-cream); color: var(--ah-ink); font-weight: 800; text-decoration: none; }
.ah-skip:focus { top: 10px; outline-color: var(--ah-ink); }

.ah-wrap { width: min(100% - 2 * var(--gut), 1200px); margin-inline: auto; }
.ah-wrap--narrow { width: min(100% - 2 * var(--gut), 860px); }

main > section, .ah-footer { position: relative; overflow-x: clip; }
@supports not (overflow-x: clip) { main > section, .ah-footer { overflow-x: hidden; } }

/* --------------------------------------------------------------------------
   3. Bands, textures, tones and edges
   A page is a walk through the shop at night: every band is a different wall,
   case or counter, and every seam is a different edge (THEME.md, "Bands").
   -------------------------------------------------------------------------- */
.ah-band { --band-bg: var(--ah-900); position: relative; isolation: isolate; padding: var(--pad-y) 0; }

/* Night band textures: grain + scattered sparks, registration marks from tablet up */
.ah-band, .ah-footer { background-color: var(--ah-900); background-image: var(--ah-stars), var(--ah-grain); background-size: 480px 340px, 160px 160px; }
@media (min-width: 48rem) {
  .ah-band, .ah-footer {
    background-image: var(--ah-reg), var(--ah-reg), var(--ah-stars), var(--ah-grain);
    background-repeat: no-repeat, no-repeat, repeat, repeat;
    background-position: left 14px top 14px, right 14px bottom 14px, 0 0, 0 0;
    background-size: 26px 26px, 26px 26px, 480px 340px, 160px 160px;
  }
}
/* tones: each sets the band color AND --band-bg (the color its top edge bites with) */
.ah-band--night { --band-bg: var(--ah-900); background-color: var(--ah-900); }
.ah-band--deep { --band-bg: var(--ah-800); background-color: var(--ah-800); }
.ah-band--ink { --band-bg: var(--ah-850); background-color: var(--ah-850); }
.ah-band--slate { --band-bg: #0d1527; background-color: #0d1527; }
.ah-band--midnight { --band-bg: #0a1020; background-color: #0a1020; }
.ah-band--velvet { --band-bg: #0b1226; background-color: #0b1226; }
.ah-band--black { --band-bg: #060a14; background-color: #060a14; }
/* the back wall after close: dim bricks with a vignette (one per page besides the hero) */
.ah-band.ah-band--brick {
  --band-bg: #090c17;
  background-color: #090c17;
  background-image:
    radial-gradient(120% 95% at var(--vig-at, 66% 42%), rgba(3, 6, 13, 0) 30%, rgba(3, 6, 13, 0.6) 78%, rgba(3, 6, 13, 0.86) 100%),
    linear-gradient(180deg, rgba(3, 6, 13, 0.62), rgba(3, 6, 13, 0) 20%),
    var(--ah-grain),
    var(--ah-brick-dim);
  background-size: auto, auto, 160px 160px, 120px 44px;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  background-position: 0 0, 0 0, 0 0, 0 0;
}
/* pegboard behind the counter (one per page: the real-posts wall lives here) */
.ah-band.ah-band--peg {
  --band-bg: #0d1527;
  background-color: #0d1527;
  background-image: var(--ah-grain), radial-gradient(circle, rgba(173, 229, 255, 0.07) 3.6px, transparent 4.2px), radial-gradient(circle, #03060d 3px, transparent 3.5px);
  background-size: 160px 160px, 28px 28px, 28px 28px;
  background-position: 0 0, 0 1.5px, 0 0;
  background-repeat: repeat;
}

/* halftone corner in Pawn blue, fading toward the text (set --deco-at / --deco-size) */
.ah-ht::before {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(27, 141, 246, 0.36) 1.5px, transparent 1.9px) 0 0 / 11px 11px;
  -webkit-mask-image: radial-gradient(var(--deco-size, 46% 62%) at var(--deco-at, 100% 0), #000 10%, transparent 100%);
  mask-image: radial-gradient(var(--deco-size, 46% 62%) at var(--deco-at, 100% 0), #000 10%, transparent 100%);
}

/* TOP EDGES: the band bites up into the band above in its own color (--band-bg), with a thin ink rim
   along the cut so the seam reads even between two close night tones (the rim is drawn in the same
   pseudo-element: the mask is the cut grown by the rim, the rim line is a background layer on top) */
.ah-top--torn::after, .ah-top--zigzag::after, .ah-top--perf::after {
  content: ""; position: absolute; left: 0; right: 0; top: -13px; height: 14px; pointer-events: none;
  background-color: var(--band-bg); background-repeat: repeat-x, repeat; background-position: 0 0, 0 0;
}
.ah-top--torn::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14'%3E%3Cpath d='M0 9l4-3 5 4 4-5 6 4 3-6 5 5 6-3 4 4 5-5 6 3' fill='none' stroke='%2303060d' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E"), var(--ah-grain);
  background-size: 48px 14px, 160px 160px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14'%3E%3Cpath d='M0 14V9l4-3 5 4 4-5 6 4 3-6 5 5 6-3 4 4 5-5 6 3v7z' stroke='%23000' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 48px 14px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14'%3E%3Cpath d='M0 14V9l4-3 5 4 4-5 6 4 3-6 5 5 6-3 4 4 5-5 6 3v7z' stroke='%23000' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 48px 14px repeat-x;
}
.ah-top--zigzag::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14'%3E%3Cpath d='M-1 15 12 2l13 13' fill='none' stroke='%2303060d' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E"), var(--ah-grain);
  background-size: 24px 14px, 160px 160px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14'%3E%3Cpath d='M-1 15 12 2l13 13z' stroke='%23000' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 24px 14px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14'%3E%3Cpath d='M-1 15 12 2l13 13z' stroke='%23000' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 24px 14px repeat-x;
}
.ah-top--perf::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='14'%3E%3Cpath d='M-1 2h8a6 6 0 0 0 12 0h8' fill='none' stroke='%2303060d' stroke-width='2.6'/%3E%3C/svg%3E"), var(--ah-grain);
  background-size: 26px 14px, 160px 160px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='14'%3E%3Cpath d='M-1 15V2h8a6 6 0 0 0 12 0h8v13z' stroke='%23000' stroke-width='2.6'/%3E%3C/svg%3E") 0 0 / 26px 14px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='14'%3E%3Cpath d='M-1 15V2h8a6 6 0 0 0 12 0h8v13z' stroke='%23000' stroke-width='2.6'/%3E%3C/svg%3E") 0 0 / 26px 14px repeat-x;
}
/* a steel strip across the top (the pegboard frame) */
.ah-top--steel { border-top: 2px solid var(--ah-950); box-shadow: inset 0 10px 0 #5d6a7d, inset 0 12px 0 var(--ah-950); }
/* a wood picture rail across the top of a wall */
.ah-top--trim { border-top: 2px solid var(--ah-950); }
.ah-top--trim::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px; z-index: 2; pointer-events: none;
  border-bottom: 2px solid var(--ah-950);
  background: linear-gradient(180deg, rgba(255, 220, 170, 0.22), transparent 3px), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0 2px, transparent 2px 13px), linear-gradient(180deg, #6a4428, #3a2414);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.45);
}
/* a lit neon tube along the seam: add <div class="ah-tube-edge" aria-hidden="true"><span></span></div> as the band's first child */
.ah-tube-edge { position: absolute; left: 0; right: 0; top: -7px; height: 14px; z-index: 2; pointer-events: none; }
.ah-tube-edge span { position: absolute; left: 3%; right: 3%; top: 4px; height: 6px; border-radius: 6px; background: var(--ah-neon-sky); box-shadow: 0 0 0 1.5px rgba(3, 6, 13, 0.7), 0 0 10px 2px rgba(47, 155, 255, 0.85), inset 0 0 0 1.5px rgba(255, 255, 255, 0.85); }
.ah-tube-edge::before, .ah-tube-edge::after { content: ""; position: absolute; top: 1px; width: 22px; height: 12px; border: 2px solid var(--ah-950); border-radius: 4px; background: linear-gradient(180deg, #4a5568, #1a202c); }
.ah-tube-edge::before { left: calc(3% - 18px); } .ah-tube-edge::after { right: calc(3% - 18px); }

/* BOTTOM EDGES: a div as the band's last child, aria-hidden. Give the band extra bottom padding (+28px). */
.ah-rail {
  position: absolute; left: 0; right: 0; bottom: 0; height: 26px;
  border-top: 2px solid var(--ah-950);
  background:
    radial-gradient(circle at 50% 50%, #e3e9f0 0 2px, #5d6a7d 2.5px, var(--ah-950) 3.2px, transparent 3.6px) 40px 50% / 160px 10px repeat-x,
    linear-gradient(180deg, #e3e9f0 0, #9aa7b8 35%, #cfd7e1 55%, #6f7c90 100%);
}
.ah-curb {
  position: absolute; left: 0; right: 0; bottom: 0; height: 30px;
  border-top: 2px solid var(--ah-950);
  background:
    linear-gradient(var(--ah-950), var(--ah-950)) 0 11px / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 158px, rgba(3, 6, 13, 0.7) 158px 160px) 0 0 / 100% 11px no-repeat,
    linear-gradient(#3a4660, #26314c) 0 0 / 100% 11px no-repeat,
    repeating-linear-gradient(90deg, var(--ah-gold) 0 44px, transparent 44px 80px) 0 21px / 100% 3px no-repeat,
    #0a0f1c;
}
.ah-counter { position: absolute; left: 0; right: 0; bottom: 0; height: 30px; border-top: 2px solid var(--ah-950); background: linear-gradient(180deg, rgba(255, 220, 170, 0.18), transparent 3px), repeating-linear-gradient(177deg, rgba(0, 0, 0, 0.14) 0 2px, transparent 2px 11px), linear-gradient(180deg, #6a4428, #3a2414); }
/* the roll-up security gate, pulled halfway down over the seam */
.ah-gate {
  position: absolute; left: 0; right: 0; bottom: 0; height: 40px;
  border-top: 2px solid var(--ah-950);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0 calc(100% - 9px), var(--ah-950) calc(100% - 9px) calc(100% - 7px), #2a3142 calc(100% - 7px)),
    repeating-linear-gradient(180deg, #5d6a7d 0 2px, #9aa7b8 2px 5px, #cfd7e1 5px 6px, #6f7c90 6px 9px, var(--ah-950) 9px 10px);
}
.ah-gate::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 46px; height: 12px; margin-left: -23px; border: 2px solid var(--ah-950); border-radius: 3px; background: linear-gradient(180deg, var(--ah-brass-hi), var(--ah-brass) 60%, var(--ah-brass-lo)); }
.ah-band:where(:has(> .ah-rail), :has(> .ah-curb), :has(> .ah-counter), :has(> .ah-gate)) { padding-bottom: calc(var(--pad-y) + 28px); }

/* --------------------------------------------------------------------------
   4. Type
   -------------------------------------------------------------------------- */
.ah-h1, .ah-h2 { font-family: var(--ah-display); font-weight: 900; }
.ah-h1 { font-size: clamp(2.75rem, 0.95rem + 4vw, 4.95rem); line-height: 0.92; letter-spacing: 0.002em; text-transform: none; }
.ah-h2 { font-size: clamp(2.35rem, 1.25rem + 3.2vw, 4.4rem); line-height: 0.94; letter-spacing: 0.004em; text-wrap: balance; }
.ah-h3 { font: 900 clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem)/1 var(--ah-display); letter-spacing: 0.02em; text-transform: uppercase; }
.ah-lead { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.55; color: var(--ah-fog); }
.ah-lead strong { color: var(--ah-paper); font-weight: 800; }
.ah-body p, .ah-copy p { color: var(--ah-fog); font-size: 1.1rem; max-width: 34em; }
.ah-body p + p, .ah-copy p + p { margin-top: 12px; }
.ah-copy p strong, .ah-body p strong { color: var(--ah-paper); }
/* the accent line of a headline (sky with a blue-deep shadow); never gradient text */
.ah-accent, .ah-h1__accent { color: var(--ah-sky); text-shadow: 0.04em 0.04em 0 var(--ah-blue-deep), 0.075em 0.075em 0 var(--ah-950); }
/* the hot pink word (one per page, the closing line) */
.ah-hotword, .ah-final__yours { color: var(--ah-hot); text-shadow: 0.04em 0.04em 0 #8f1244, 0.075em 0.075em 0 var(--ah-950); }
/* the dark label-maker label with a pink LED: section kickers */
.ah-label {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 6px 12px 5px;
  border: 2px solid var(--ah-950); border-radius: 4px; background: #11151d; color: #e8edf3;
  font: 700 0.8rem/1.2 var(--ah-mono); letter-spacing: 0.16em; text-transform: uppercase;
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.07), 3px 3px 0 var(--ah-blue); rotate: -1.5deg;
}
.ah-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ah-neon-pink); box-shadow: 0 0 0 2px #11151d, 0 0 8px var(--ah-neon-pink); }

/* hand notes (decoration, max 8 words, never a claim, max one per section) */
.ah-hand { display: inline-flex; align-items: flex-start; gap: 4px; margin: 0; font-family: var(--ah-hand); font-size: 1.05rem; line-height: 1.1; color: var(--ah-sky); rotate: -4deg; pointer-events: none; }
.ah-hand__arrow { flex: none; width: 46px; height: 34px; overflow: visible; }
.ah-hand__arrow path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* kicker: a tiny lit LED on a dark label (hero only) */
.ah-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; font: 800 0.86rem/1.3 var(--ah-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ah-sky); }
.ah-kicker__led { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ah-neon-pink); box-shadow: 0 0 0 2px var(--ah-950), 0 0 10px 1px var(--ah-neon-pink); }

/* the self-drawing hand underline (one per page, in the hero) */
.ah-mark { position: relative; z-index: 0; display: inline-block; white-space: nowrap; color: var(--ah-paper); font-weight: 600; }
.ah-mark__line { position: absolute; z-index: -1; left: -3%; bottom: -0.16em; width: 106%; height: 0.42em; overflow: visible; }
.ah-mark__line path { fill: none; stroke: var(--ah-neon-pink); stroke-width: 6px; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 900; stroke-dashoffset: 0; }
.ah-mark__line .ah-mark__two { stroke-width: 3px; opacity: 0.55; }
.ah-actions { display: flex; flex-wrap: wrap; gap: 14px 16px; align-items: center; }

/* --------------------------------------------------------------------------
   5. Buttons: chunky pills, ink border, hard shadow in paper (it flips on night)
   -------------------------------------------------------------------------- */
.btn {
  --btn-shadow: var(--ah-paper);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: 52px; padding: 0 1.5em;
  border: 2px solid var(--ah-950); border-radius: 999px;
  font: 800 1.0625rem/1.1 var(--ah-body); letter-spacing: -0.005em;
  text-decoration: none; text-align: center; white-space: nowrap; cursor: pointer;
  box-shadow: 4px 4px 0 var(--btn-shadow);
  transition: transform 0.22s var(--ease-back), box-shadow 0.22s var(--ease-back), background-color 0.16s, border-color 0.16s, color 0.16s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--btn-shadow); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--btn-shadow); transition-duration: 0.08s; }
.btn-primary { background-color: var(--ah-blue); background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 52%); color: var(--ah-ink); }
.btn-primary:hover { background-color: var(--ah-blue-hi); }
.btn-ghost { --btn-shadow: transparent; background: transparent; color: var(--ah-paper); border-color: rgba(238, 244, 251, 0.72); }
.btn-ghost:hover { --btn-shadow: var(--ah-blue); border-color: var(--ah-paper); background: rgba(238, 244, 251, 0.05); }
.btn-ghost:active { --btn-shadow: var(--ah-blue); }
/* on cream paper: the shadow goes ink, the ghost goes ink */
.btn-on-paper { --btn-shadow: var(--ah-ink); }
.btn-ghost.btn-on-paper { --btn-shadow: transparent; color: var(--ah-ink); border-color: var(--ah-ink); }
.btn-ghost.btn-on-paper:hover { --btn-shadow: var(--ah-ink); background: rgba(11, 20, 36, 0.05); }
.btn-lg { min-height: 58px; padding: 0 2em; font-size: 1.15rem; }
.btn-sm { min-height: 44px; padding: 0 1.1em; font-size: 0.98rem; box-shadow: 3px 3px 0 var(--btn-shadow); }
@media (max-width: 380px) { .btn { white-space: normal; line-height: 1.15; padding-block: 8px; } }

/* round 44px pause / play control (anything that moves longer than 5s gets one) */
.ah-pause { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 2px solid var(--ah-paper); border-radius: 50%; background: var(--ah-800); color: var(--ah-paper); box-shadow: 3px 3px 0 var(--ah-blue); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: translate 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); }
.ah-pause:hover, .ah-pause:focus-visible { translate: -2px -2px; box-shadow: 5px 5px 0 var(--ah-blue); }
.ah-pause:active { translate: 2px 2px; box-shadow: 1px 1px 0 var(--ah-blue); }
.ah-pause[hidden] { display: none; }
.ah-pause__i { width: 14px; height: 14px; fill: currentColor; }
.ah-pause__i--play, .ah-pause[aria-pressed="true"] .ah-pause__i--pause { display: none; }
.ah-pause[aria-pressed="true"] .ah-pause__i--play { display: block; }
/* generic loops: [data-loop] runs only under html.js; .is-paused (button) and .is-idle (off screen) hold it */
[data-loop].is-paused, [data-loop].is-paused *, [data-loop].is-idle, [data-loop].is-idle * { animation-play-state: paused !important; }

/* --------------------------------------------------------------------------
   6. Header + dropdowns + phone menu (layout.js builds the markup)
   -------------------------------------------------------------------------- */
#site-nav { display: block; position: sticky; top: 0; z-index: 60; min-height: calc(var(--header-h) + 2px); background-color: rgba(5, 9, 18, 0.97); border-bottom: 2px solid var(--ah-950); } /* holds the bar's height until layout.js runs */
.ah-nojs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; min-height: var(--header-h); }
.ah-nojs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ah-paper); font-weight: 700; }
.ah-header {
  position: sticky; top: 0; z-index: 60;
  background-color: rgba(5, 9, 18, 0.97); background-image: var(--ah-grain);
  border-bottom: 2px solid var(--ah-950); box-shadow: 0 1px 0 var(--ah-line);
}
.ah-header__in { position: relative; display: flex; align-items: center; gap: 10px; min-height: var(--header-h); }
.ah-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-right: auto; color: var(--ah-paper); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.ah-brand__mark { width: 46px; height: auto; flex: none; }
.ah-brand__word { font: 900 1.6rem/1 var(--ah-display); letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.ah-brand__word span { color: var(--ah-blue); }
.ah-brand:hover .ah-brand__mark { animation: ah-wiggle 0.5s var(--ease-back); }
@keyframes ah-wiggle { 30% { rotate: -8deg; } 65% { rotate: 5deg; } }

.nav-top, .dd-toggle {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 11px;
  border: 0; border-radius: 10px; background: none; color: var(--ah-paper);
  font: 700 0.98rem/1.2 var(--ah-body); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.dd-chev { width: 11px; height: 8px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s var(--ease-out); }
.nav-dd.open > .dd-toggle .dd-chev { transform: rotate(180deg); }
.dd-menu a { display: grid; gap: 1px; align-content: center; min-height: 44px; padding: 8px 12px; border-radius: 8px; color: var(--ah-ink); text-decoration: none; }
.dd-menu a b { font-weight: 800; font-size: 1rem; line-height: 1.25; }
.dd-menu a span { font-size: 0.85rem; font-weight: 500; line-height: 1.35; color: var(--ah-ink-2); }
.dd-menu a:hover { background: rgba(27, 141, 246, 0.14); }
.dd-menu a[aria-current="page"] { background: rgba(27, 141, 246, 0.16); }
.dd-menu a[aria-current="page"] b::after { content: "You are here"; display: inline-block; margin-left: 8px; padding: 2px 7px 1px; border: 1.5px solid var(--ah-ink); border-radius: 4px; background: var(--ah-blue); color: var(--ah-ink); font: 800 0.62rem/1.2 var(--ah-body); letter-spacing: 0.1em; text-transform: uppercase; vertical-align: 2px; rotate: -3deg; white-space: nowrap; }
.ah-login { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 6px; border: 2px solid var(--ah-line-2); border-radius: 999px; color: var(--ah-paper); font-weight: 700; font-size: 0.95rem; text-decoration: none; }
.ah-login img { width: 26px; height: 26px; }
.ah-login:hover { border-color: var(--ah-sky); }
.ah-header__cta { min-height: 46px; padding: 0 1.1em; font-size: 0.98rem; box-shadow: 3px 3px 0 var(--btn-shadow); }
.ah-header__cta:hover { box-shadow: 5px 5px 0 var(--btn-shadow); }
.ah-toggle { display: none; }
.ah-drawer-cta { display: none; }
.ah-scrim { position: fixed; inset: 0; z-index: 59; background: rgba(3, 6, 13, 0.55); -webkit-tap-highlight-color: transparent; }
.ah-scrim[hidden] { display: none; }

@media (min-width: 1100px) {
  .nav-links { display: flex; align-items: center; gap: 2px; margin-right: 12px; }
  .nav-top:hover, .dd-toggle:hover { color: var(--ah-sky); }
  /* current page: a lit underline tube under the item */
  .nav-top[aria-current="page"], .nav-dd.is-current > .dd-toggle { color: var(--ah-sky); box-shadow: inset 0 -3px 0 -0px var(--ah-blue); border-radius: 10px 10px 2px 2px; }
  .nav-dd { position: relative; }
  .dd-menu {
    position: absolute; top: calc(100% + 18px); left: 50%; z-index: 5; width: 336px; padding: 14px 8px 8px;
    border: 2px solid var(--ah-950); border-radius: 10px; background: var(--ah-cream);
    background-image: linear-gradient(var(--ah-blue), var(--ah-blue)); background-size: 100% 6px; background-repeat: no-repeat;
    box-shadow: 6px 6px 0 var(--ah-blue); color: var(--ah-ink);
    opacity: 0; visibility: hidden; transform: translate(-50%, 8px) rotate(-0.5deg);
    transition: opacity 0.16s, transform 0.22s var(--ease-out), visibility 0s linear 0.22s;
  }
  .dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }
  .dd-menu li + li { border-top: 2px dashed rgba(11, 20, 36, 0.14); }
  .nav-dd.open > .dd-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0) rotate(-0.5deg); transition-delay: 0s; }
  .ah-login { margin-left: 8px; }
}
@media (min-width: 1100px) {
  .nav-top, .dd-toggle { white-space: nowrap; }
}
@media (min-width: 1100px) and (max-width: 1259px) {
  .ah-header__in { gap: 6px; }
  .nav-top, .dd-toggle { gap: 5px; padding: 0 7px; font-size: 0.93rem; }
  .nav-links { margin-right: 6px; }
  .ah-login { margin-left: 4px; padding-right: 11px; font-size: 0.92rem; }
  .ah-header__cta { padding: 0 0.85em; font-size: 0.92rem; }
  .ah-brand { gap: 8px; }
  .ah-brand__mark { width: 40px; }
  .ah-brand__word { font-size: 1.4rem; }
}
@media (min-width: 1100px) and (hover: hover) {
  .nav-dd:hover > .dd-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0) rotate(-0.5deg); transition-delay: 0.05s; }
  /* Escape, or a click that closes the menu, dismisses it even under the pointer (WCAG 1.4.13); one panel at a time */
  .nav-dd.is-dismissed:hover > .dd-menu, .nav-links:has(.nav-dd.open) .nav-dd:not(.open):hover > .dd-menu { opacity: 0; visibility: hidden; transform: translate(-50%, 8px) rotate(-0.5deg); transition-delay: 0s; }
}

/* phones and tablets: the menu is a cream pawn ticket that drops out of the header */
@media (max-width: 1099px) {
  .ah-toggle {
    display: inline-grid; place-content: center; gap: 5px; flex: none; width: 46px; height: 46px; padding: 0;
    border: 2px solid var(--ah-paper); border-radius: 12px; background: var(--ah-800); box-shadow: 3px 3px 0 var(--ah-blue);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .ah-toggle__bar { display: block; width: 20px; height: 2.5px; border-radius: 2px; background: var(--ah-paper); transition: transform 0.25s var(--ease-out), opacity 0.2s; }
  body.menu-open .ah-toggle__bar:nth-child(2) { transform: translateY(7.5px) rotate(45deg); }
  body.menu-open .ah-toggle__bar:nth-child(3) { opacity: 0; }
  body.menu-open .ah-toggle__bar:nth-child(4) { transform: translateY(-7.5px) rotate(-45deg); }
  /* absolute under the bar, never fixed (iOS containing-block pitfall) */
  .nav-links {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 61; display: block;
    max-height: calc(100vh - var(--header-h) - 28px); max-height: calc(100dvh - var(--header-h) - 28px);
    overflow-y: auto; overscroll-behavior: contain;
    padding: 18px 16px 18px; border: 2px solid var(--ah-950); border-radius: 6px 6px 12px 12px;
    background-color: var(--ah-cream); background-image: var(--ah-fiber);
    box-shadow: 6px 6px 0 var(--ah-blue); color: var(--ah-ink);
    -webkit-mask: radial-gradient(circle 5px at 9px 0, #0000 96%, #000) 0 0 / 18px 100% repeat-x;
    mask: radial-gradient(circle 5px at 9px 0, #0000 96%, #000) 0 0 / 18px 100% repeat-x;
    opacity: 0; transform: translateY(-8px); transition: opacity 0.2s, transform 0.3s var(--ease-out);
  }
  .nav-links.open { opacity: 1; transform: none; }
  .nav-dd, .nav-links > .nav-top { border-bottom: 2px dashed rgba(11, 20, 36, 0.18); }
  .dd-toggle, .nav-links > .nav-top { display: flex; justify-content: space-between; width: 100%; min-height: 54px; padding: 0 4px; color: var(--ah-ink); font: 900 1.45rem/1 var(--ah-display); letter-spacing: 0.02em; text-transform: uppercase; text-align: left; }
  .nav-links > .nav-top[aria-current="page"]::after, .nav-dd.is-current > .dd-toggle .dd-label::after { content: ""; display: inline-block; width: 9px; height: 9px; margin-left: 10px; border: 1.5px solid var(--ah-ink); border-radius: 50%; background: var(--ah-blue); vertical-align: 3px; }
  .dd-chev { width: 30px; height: 30px; padding: 9px 8px; border: 2px solid var(--ah-ink); border-radius: 50%; background: var(--ah-sky); overflow: visible; }
  .dd-menu { display: none; padding: 0 0 10px 8px; transform: none; }
  /* re-assert at matching specificity so a desktop hover/focus state can never slide the group off screen */
  .nav-dd:hover > .dd-menu, .nav-dd.open > .dd-menu, .nav-dd:focus-within > .dd-menu { transform: none; }
  .nav-dd.open > .dd-menu { display: block; }
  .dd-menu a { padding: 9px 10px; }
  .dd-menu a b { font-size: 1.02rem; }
  .ah-login { margin: 14px 0 0; border-color: rgba(11, 20, 36, 0.35); color: var(--ah-ink); min-height: 46px; }
  .ah-drawer-cta { display: flex; width: 100%; margin-top: 14px; --btn-shadow: var(--ah-ink); }
  /* iOS ghost-tap guard: a closed drawer and everything in it can never be tapped. Do not remove. */
  .nav-links:not(.open), .nav-links:not(.open) * { visibility: hidden !important; pointer-events: none !important; }
}
@media (max-width: 560px) {
  .ah-header__cta { display: none; }
  .ah-brand__mark { width: 40px; }
  .ah-brand__word { font-size: 1.4rem; }
}
/* funnel chrome (promo and order pages): brand + one CTA, no menu; the CTA stays on phones */
.ah-header--funnel .ah-brand { cursor: default; }
@media (max-width: 560px) { .ah-header--funnel .ah-header__cta { display: inline-flex; min-height: 44px; padding: 0 0.9em; font-size: 0.9rem; white-space: normal; line-height: 1.1; } }
.ah-footer.ah-footer--funnel { padding-top: 22px; }
.ah-footer--funnel .ah-footer__legal.ah-footer__legal { margin-top: 0; border-top: 0; }
@media (max-width: 340px) {
  .ah-brand__word { font-size: 1.2rem; }
  .ah-brand { gap: 7px; }
  .ah-brand__mark { width: 34px; }
}

/* --------------------------------------------------------------------------
   7. The flashlight: a crisp disc of warm light with a printed (halftone)
   falloff. Put data-torch on a section and an .ah-torch layer inside it;
   theme.js moves it with a fine pointer only.
   -------------------------------------------------------------------------- */
.ah-torch {
  --tr: clamp(150px, 15vw, 230px);
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  transition: opacity 0.35s var(--ease-out);
}
.ah-torch__lit {
  position: absolute; inset: 0;
  background-color: #3b332d;
  background-image: radial-gradient(circle var(--tr) at var(--tx, 50%) var(--ty, 50%), rgba(255, 236, 200, 0.16), rgba(255, 236, 200, 0) 70%), var(--ah-brick-lit);
  background-size: auto, 120px 44px;
  -webkit-mask-image: radial-gradient(circle var(--tr) at var(--tx, 50%) var(--ty, 50%), #000 0, #000 52%, rgba(0, 0, 0, 0.78) 60%, #000 64%, rgba(0, 0, 0, 0.7) 67%, rgba(0, 0, 0, 0) 69%);
  mask-image: radial-gradient(circle var(--tr) at var(--tx, 50%) var(--ty, 50%), #000 0, #000 52%, rgba(0, 0, 0, 0.78) 60%, #000 64%, rgba(0, 0, 0, 0.7) 67%, rgba(0, 0, 0, 0) 69%);
}
.ah-torch__dots {
  position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(255, 226, 170, 0.55) 1.4px, transparent 1.9px) 0 0 / 9px 9px;
  -webkit-mask-image: radial-gradient(circle calc(var(--tr) * 1.5) at var(--tx, 50%) var(--ty, 50%), transparent 44%, #000 47%, rgba(0, 0, 0, 0.45) 70%, transparent 100%);
  mask-image: radial-gradient(circle calc(var(--tr) * 1.5) at var(--tx, 50%) var(--ty, 50%), transparent 44%, #000 47%, rgba(0, 0, 0, 0.45) 70%, transparent 100%);
}
[data-torch].is-torch .ah-torch { opacity: 1; }
/* pegboard variant (the real-posts wall) */
.ah-torch--peg { --tr: clamp(170px, 16vw, 250px); }
.ah-torch--peg .ah-torch__lit { background-color: #8a6644; background-image: radial-gradient(circle var(--tr) at var(--tx, 50%) var(--ty, 50%), rgba(255, 236, 200, 0.18), transparent 70%), var(--ah-peg-lit); background-size: auto, 28px 28px; }

/* --------------------------------------------------------------------------
   8. Motion contract
   html.motion arms the "from" poses; theme.js adds .is-in / .is-play when an
   element is seen. Everything below is finished without JS.
   -------------------------------------------------------------------------- */
/* kinetic rise for hero lines (pure CSS, finished without JS, off with reduced motion): class ah-k + style="--k:0..3" */
@media (prefers-reduced-motion: no-preference) {
  .ah-k { animation: ah-rise 0.8s var(--ease-out) both; animation-delay: calc(var(--k, 0) * 110ms + 80ms); }
  .ah-h1.ah-k, .ah-phero__h.ah-k { animation-name: ah-rise-h1; }
  .ah-mark__line path { animation: ah-draw 1s 0.9s cubic-bezier(0.55, 0, 0.3, 1) both; }
  .ah-mark__line .ah-mark__two { animation-delay: 1.35s; }
}
@keyframes ah-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes ah-rise-h1 { from { opacity: 0.2; transform: translateY(18px); } }
@keyframes ah-draw { from { stroke-dashoffset: 900; } }
/* neon behavior shared by every tube sign */
@keyframes ah-spin { to { transform: rotate(360deg); } }
@keyframes ah-ignite { 0% { opacity: 0; } 9% { opacity: 0.9; } 12% { opacity: 0.08; } 20% { opacity: 1; } 23% { opacity: 0.25; } 31% { opacity: 1; } 58% { opacity: 0.82; } 62%, 100% { opacity: 1; } }
@keyframes ah-ignite2 { 0% { opacity: 0; } 14% { opacity: 1; } 18% { opacity: 0.12; } 28% { opacity: 1; } 32% { opacity: 0.35; } 40%, 100% { opacity: 1; } }
@keyframes ah-relight { 0% { opacity: 1; } 8% { opacity: 0.05; } 30% { opacity: 0.05; } 38% { opacity: 1; } 42% { opacity: 0.2; } 52%, 100% { opacity: 1; } }
@keyframes ah-glint { 0% { scale: 0.2; rotate: -60deg; } 60% { scale: 1.3; } 100% { scale: 1; rotate: 0deg; } }
@keyframes ah-pop { 0% { opacity: 0; transform: translateY(10px) scale(0.86); } 60% { opacity: 1; transform: translateY(-2px) scale(1.04); } 100% { opacity: 1; transform: none; } }

/* data-reveal: rise in once when seen (rewind pattern). Optional --reveal-delay. */
@media (prefers-reduced-motion: no-preference) {
  html.motion [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(24px); }
  html.motion [data-reveal] { transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
  /* data-reveal="pop": the family overshoot, for stickers and small objects */
  html.motion [data-reveal="pop"]:not(.is-in) { opacity: 0; transform: translateY(10px) scale(0.86); }
  html.motion [data-reveal="pop"] { transition: opacity 0.3s var(--ease-out), transform 0.55s var(--ease-back); }
}

/* --------------------------------------------------------------------------
   9. Tapes across seams
   -------------------------------------------------------------------------- */
/* 9a. The LED ticker: a scrolling sign bolted across a seam, tilted -2deg.
   Place it BETWEEN two sections (outside both). Max one per page. */
.ah-ticker { position: relative; z-index: 20; height: 0; overflow-x: clip; --tk-h: 70px; }
@supports not (overflow-x: clip) { .ah-ticker { overflow-x: hidden; } }
.ah-ticker__box {
  position: absolute; left: -40px; right: -40px; top: calc(var(--tk-h) / -2); height: var(--tk-h);
  rotate: -2deg;
  border-block: 2px solid var(--ah-950);
  background:
    radial-gradient(circle at 50% 50%, #c9d1dc 0 2px, #5d6a7d 2.4px, transparent 3px) 30px 6px / 220px 100% repeat-x,
    linear-gradient(180deg, #3a4456 0, #252d3c 18%, #1a202c 82%, #2c3546 100%);
  box-shadow: 0 7px 0 var(--ah-blue), 0 9px 0 var(--ah-950);
}
.ah-ticker__face {
  position: absolute; inset: 9px 0; overflow: hidden;
  background: #04060b; box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.8), inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}
.ah-ticker__face::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, #172034 1px, transparent 1.4px) 0 0 / 3px 3px; }
.ah-ticker__lens {
  position: absolute; inset: 0;
  -webkit-mask: radial-gradient(circle, #000 1.05px, transparent 1.4px) 0 0 / 3px 3px;
  mask: radial-gradient(circle, #000 1.05px, transparent 1.4px) 0 0 / 3px 3px;
}
.ah-ticker__track { display: flex; width: max-content; height: 100%; align-items: center; }
.ah-ticker__group { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.ah-ticker__group li {
  display: inline-flex; align-items: center; gap: 0.6em; padding-right: 0.6em;
  font: 800 clamp(1.7rem, 1.2rem + 1.4vw, 2.4rem)/1 var(--ah-display); letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap;
  color: #a9e2ff; text-shadow: 0 0 6px rgba(47, 155, 255, 0.95), 0 0 2px #fff;
}
.ah-ticker__group li::after {
  content: ""; flex: none; width: 1.15em; height: 0.85em;
  background:
    radial-gradient(circle at 50% 50%, #ffd36b 0 46%, transparent 50%) 0 0 / 50% 55% no-repeat,
    radial-gradient(circle at 50% 50%, #ffd36b 0 46%, transparent 50%) 100% 0 / 50% 55% no-repeat,
    radial-gradient(circle at 50% 50%, #ffd36b 0 46%, transparent 50%) 50% 100% / 50% 55% no-repeat;
  filter: drop-shadow(0 0 4px rgba(255, 191, 58, 0.9));
}
.ah-ticker__pause { position: absolute; top: calc(var(--tk-h) / 2 + 12px); right: var(--gut); z-index: 2; }
@media (prefers-reduced-motion: no-preference) {
  html.js .ah-ticker__track { animation: ah-marquee 70s linear infinite; }
  .ah-ticker.is-paused .ah-ticker__track, .ah-ticker.is-idle .ah-ticker__track { animation-play-state: paused; }
  @media (hover: hover) { .ah-ticker__box:hover .ah-ticker__track { animation-play-state: paused; } }
}
@keyframes ah-marquee { to { transform: translateX(-50%); } }
@media (max-width: 640px) { .ah-ticker { --tk-h: 60px; } }
@media (prefers-reduced-motion: reduce) {
  .ah-ticker { height: auto; overflow-x: clip; overflow-y: visible; padding: 22px 0; }
  .ah-ticker__box { position: relative; left: auto; right: auto; top: auto; height: auto; rotate: -1deg; margin: -56px -12px 0; padding: 9px 0; }
  .ah-ticker__face { position: relative; inset: auto; padding: 10px 6px; }
  .ah-ticker__lens { position: relative; inset: auto; }
  .ah-ticker__track { width: auto; flex-wrap: wrap; justify-content: center; }
  .ah-ticker__group { flex: 1 1 100%; flex-wrap: wrap; justify-content: center; row-gap: 8px; }
  .ah-ticker__group li { font-size: 1.5rem; }
  .ah-ticker__dup, .ah-ticker__pause { display: none !important; }
}
/* without JS there is no pause button, so the sign rests as a still, wrapped board */
html:not(.js) .ah-ticker { height: auto; overflow-x: clip; overflow-y: visible; padding: 22px 0; }
html:not(.js) .ah-ticker__box { position: relative; left: auto; right: auto; top: auto; height: auto; rotate: -1deg; margin: -56px -12px 0; padding: 9px 0; }
html:not(.js) .ah-ticker__face { position: relative; inset: auto; padding: 10px 6px; }
html:not(.js) .ah-ticker__lens { position: relative; inset: auto; }
html:not(.js) .ah-ticker__track { width: auto; flex-wrap: wrap; justify-content: center; }
html:not(.js) .ah-ticker__group { flex: 1 1 100%; flex-wrap: wrap; justify-content: center; row-gap: 8px; }
html:not(.js) .ah-ticker__group li { font-size: 1.5rem; }
html:not(.js) .ah-ticker__dup, html:not(.js) .ah-ticker__pause { display: none !important; }

/* 9b. Masking tape: a torn strip holding paper to glass. Place inside a positioned object. */
.ah-masking { position: absolute; z-index: 3; top: -14px; width: 108px; height: 30px; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 3px, transparent 3px 7px), rgba(226, 208, 168, 0.88); clip-path: polygon(3% 0, 97% 6%, 100% 28%, 96% 52%, 100% 78%, 97% 100%, 2% 94%, 0 72%, 4% 48%, 0 22%); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); }
.ah-masking--l { left: -18px; rotate: -24deg; }
.ah-masking--r { right: 70px; rotate: 8deg; }
.ah-masking--c { left: 50%; margin-left: -54px; rotate: -3deg; }

/* --------------------------------------------------------------------------
   10. Honest labels: stickers, badges, stamps
   Stickers replace pill chips. Small, tilted, ink border, hard shadow.
   Text on blue is always ink (never white on #1b8df6).
   -------------------------------------------------------------------------- */
.ah-sticker {
  --st-bg: var(--ah-cream); --st-ink: var(--ah-ink); --st-shadow: var(--ah-950);
  display: inline-flex; align-items: center; gap: 0.4em; padding: 0.42em 0.7em 0.36em;
  border: 2px solid var(--ah-950); border-radius: 5px; background: var(--st-bg); color: var(--st-ink);
  font: 800 0.76rem/1.1 var(--ah-body); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 2px 2px 0 var(--st-shadow); rotate: var(--tilt, -3deg);
}
.ah-sticker--blue { --st-bg: var(--ah-blue); --st-ink: var(--ah-ink); }
.ah-sticker--sky { --st-bg: var(--ah-sky); --st-ink: var(--ah-ink); }
.ah-sticker--pink { --st-bg: var(--ah-neon-pink); --st-ink: var(--ah-ink); }
.ah-sticker--gold { --st-bg: var(--ah-gold); --st-ink: var(--ah-ink); }
.ah-sticker--ink { --st-bg: var(--ah-ink); --st-ink: var(--ah-sky); --st-shadow: var(--ah-blue); border-color: var(--ah-950); }
.ah-sticker--lg { font-size: 0.95rem; padding: 0.5em 0.85em 0.42em; box-shadow: 3px 3px 0 var(--st-shadow); }
.ah-sticker svg { width: 1.1em; height: 1.1em; flex: none; }
/* a row of stickers (the replacement for pill chips): wraps, varied tilts */
.ah-stickers { display: flex; flex-wrap: wrap; gap: 12px 10px; align-items: center; margin: 0; padding: 0; list-style: none; }
.ah-stickers > :nth-child(3n+1) { --tilt: -2.5deg; } .ah-stickers > :nth-child(3n+2) { --tilt: 1.8deg; } .ah-stickers > :nth-child(3n) { --tilt: -0.8deg; }
/* the honesty sticker every drawn mock wears: pin it to a corner of the object */
.ah-sample { position: absolute; z-index: 6; top: -12px; right: 14px; --tilt: 6deg; }
/* when the top-right corner holds a label or a number, move the sticker instead of covering it */
.ah-sample.ah-sample--low { top: auto; bottom: -12px; }
.ah-sample.ah-sample--left { right: auto; left: 14px; --tilt: -5deg; }

/* the proof badge: a label-maker strip inline with the text, wearing a real number */
.ah-badge {
  display: inline-flex; align-items: center; gap: 0.35em; padding: 0.12em 0.55em 0.08em 0.4em; margin: 0 0.1em;
  border: 1.5px solid var(--ah-950); border-radius: 3px; background: var(--ah-blue); color: var(--ah-ink);
  font: 800 0.86em/1.25 var(--ah-mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; vertical-align: 0.05em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 0 rgba(3, 6, 13, 0.18), 2px 2px 0 var(--ah-950);
}
.ah-badge::before { content: ""; flex: none; width: 0.95em; height: 0.95em; background: var(--ah-ink); -webkit-mask: var(--ah-check) center / contain no-repeat; mask: var(--ah-check) center / contain no-repeat; }
.ah-badge--cream { background: var(--ah-cream); }
.ah-badge--ink { background: #11151d; color: #e8edf3; }
.ah-badge--ink::before { background-color: var(--ah-sky); }

/* rubber stamps (on cream paper only) */
.ah-stamp {
  grid-area: stamp; justify-self: end; display: inline-block; padding: 7px 12px 6px;
  border: 3.5px solid currentColor; border-radius: 9px;
  color: var(--ah-blue-ink); font: 900 1.38rem/1 var(--ah-display); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  box-shadow: inset 0 0 0 2px var(--ah-cream), inset 0 0 0 3.5px currentColor;
  rotate: -7deg;
  -webkit-mask: var(--ah-speckle) 0 0 / 90px 90px; mask: var(--ah-speckle) 0 0 / 90px 90px;
}
.ah-stamp--b { rotate: -3deg; }
.ah-stamp--no { color: var(--ah-red-ink); border-style: dashed; rotate: 5deg; box-shadow: none; }
.ah-stamp--sm { font-size: 1rem; padding: 5px 9px 4px; border-width: 3px; }

/* --------------------------------------------------------------------------
   11. Paper objects: cream stock, navy ink, ink outline, hard shadow.
   Text-bearing paper tilts at most 1deg; objects up to 4deg; paragraphs never.
   -------------------------------------------------------------------------- */
.ah-paper { position: relative; border: 2px solid var(--ah-950); border-radius: 6px; background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink); box-shadow: 6px 6px 0 var(--ah-blue); }
.ah-paper p { color: var(--ah-ink-2); }

/* 11a. The case glass: paper taped to the inside of a lit display case */
.ah-glass {
  position: relative; max-width: 1040px; margin: 0 auto; padding: 12px;
  border: 2px solid var(--ah-950); border-radius: 14px;
  background: linear-gradient(135deg, #e7edf4 0%, #a7b3c3 22%, #dfe6ee 44%, #8996a8 70%, #cfd7e1 100%);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.55), inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}
.ah-glass::before, .ah-glass::after { content: ""; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--ah-steel-c); box-shadow: 0 0 0 1.5px var(--ah-950), inset 1px 1px 0 rgba(255, 255, 255, 0.5); top: 1.5px; }
.ah-glass::before { left: 20px; }
.ah-glass::after { right: 20px; }
.ah-glass__pane {
  position: relative; padding: clamp(30px, 5vw, 64px) clamp(10px, 4vw, 60px);
  border: 2px solid var(--ah-950); border-radius: 6px;
  background:
    linear-gradient(118deg, transparent 0 14%, rgba(200, 230, 255, 0.09) 14% 24%, transparent 24% 27%, rgba(200, 230, 255, 0.07) 27% 29%, transparent 29% 100%),
    linear-gradient(118deg, transparent 0 70%, rgba(200, 230, 255, 0.05) 70% 82%, transparent 82%),
    radial-gradient(120% 80% at 50% 0%, rgba(47, 155, 255, 0.12), transparent 60%),
    #0b1528;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(173, 229, 255, 0.12);
}

/* 11b. The pawn ticket (checklist rows with stamps, a perforated stub) */
.ah-ticket { position: relative; max-width: 860px; margin: 0 auto; rotate: -0.6deg; }
.ah-ticket__body {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 112px;
  filter: var(--ah-outline) drop-shadow(7px 7px 0 var(--ah-blue));
}
.ah-ticket__main {
  position: relative; padding: 0 clamp(14px, 3.2vw, 36px) clamp(20px, 3vw, 30px);
  background-color: var(--ah-cream);
  background-image: var(--ah-guilloche);
  background-position: 0 6px;
  color: var(--ah-ink);
  -webkit-mask: radial-gradient(circle 12px at 100% 0, #0000 96%, #000) top right / 51% 51% no-repeat, radial-gradient(circle 12px at 100% 100%, #0000 96%, #000) bottom right / 51% 51% no-repeat, linear-gradient(#000 0 0) left / 50% 100% no-repeat;
  mask: radial-gradient(circle 12px at 100% 0, #0000 96%, #000) top right / 51% 51% no-repeat, radial-gradient(circle 12px at 100% 100%, #0000 96%, #000) bottom right / 51% 51% no-repeat, linear-gradient(#000 0 0) left / 50% 100% no-repeat;
  border-radius: 10px 0 0 10px;
}
.ah-ticket__head {
  display: flex; align-items: center; gap: 12px; margin: 0 calc(clamp(14px, 3.2vw, 36px) * -1) 6px; padding: 14px clamp(14px, 3.2vw, 36px);
  background: var(--ah-ink); color: #fff; border-bottom: 5px solid var(--ah-blue);
}
.ah-ticket__head img { width: 46px; height: auto; flex: none; }
.ah-ticket__brand { font: 900 1.55rem/1 var(--ah-display); letter-spacing: 0.06em; text-transform: uppercase; }
.ah-ticket__no { margin-left: auto; font: 800 1rem/1 var(--ah-display); letter-spacing: 0.14em; color: #ff8a8a; font-variant-numeric: tabular-nums; }
.ah-ticket__rows { counter-reset: none; }
.ah-trow {
  position: relative; display: grid; grid-template-columns: 34px 26px minmax(0, 1fr) auto; grid-template-areas: "box n txt stamp";
  gap: 12px; align-items: center; padding: 20px 0; border-bottom: 1.5px dashed rgba(11, 20, 36, 0.3);
}
.ah-trow__box { grid-area: box; display: grid; place-items: center; width: 34px; height: 34px; border: 2.5px solid var(--ah-ink); border-radius: 6px; background: #fffdf6; }
.ah-trow__box svg { width: 24px; height: 24px; fill: none; stroke: var(--ah-blue-ink); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 26; stroke-dashoffset: 0; }
.ah-trow__n { grid-area: n; font: 900 2rem/1 var(--ah-display); color: var(--ah-ink); }
.ah-trow__txt { grid-area: txt; min-width: 0; }
.ah-trow h3 { font-size: clamp(1.12rem, 1rem + 0.5vw, 1.4rem); line-height: 1.2; color: var(--ah-ink); }
.ah-trow p { margin-top: 3px; color: var(--ah-ink-2); font-size: 1rem; line-height: 1.45; }
.ah-trow--no h3 { color: #4b5873; text-decoration: line-through; text-decoration-color: rgba(180, 35, 24, 0.75); text-decoration-thickness: 2px; }
/* row variants: --plain has no stamp column; --stack drops the stamp under the words (half-width tickets) */
.ah-trow--plain { grid-template-columns: 34px 26px minmax(0, 1fr); grid-template-areas: "box n txt"; }
.ah-trow--stack { grid-template-columns: 34px 26px minmax(0, 1fr); grid-template-areas: "box n txt" ". . stamp"; align-items: start; gap: 10px 12px; }
.ah-trow--stack .ah-stamp { justify-self: start; margin-top: 2px; }
/* a refused row: the box draws a red X instead of the tick (it draws on play, like the tick) */
.ah-trow__box--x svg { stroke: var(--ah-red-ink); stroke-dasharray: 34; }
/* a ticket in a half-width column: a slimmer stub */
.ah-ticket--narrow .ah-ticket__body { grid-template-columns: minmax(0, 1fr) 84px; }
.ah-ticket--narrow .ah-ticket__stamp { font-size: 1.3rem; }
.ah-ticket__notes { position: relative; padding-top: 18px; }
.ah-ticket__field { display: block; margin-bottom: 4px; font: 800 0.72rem/1 var(--ah-body); letter-spacing: 0.18em; text-transform: uppercase; color: #5a6a86; }
.ah-ticket__notes p { max-width: 40em; color: var(--ah-ink); font-weight: 600; font-size: 1.05rem; line-height: 1.5; }
.ah-ticket__notes p + p { margin-top: 2px; }
.ah-ticket__stub {
  position: relative; background-color: var(--ah-cream); background-image: linear-gradient(var(--ah-ink), var(--ah-ink)), linear-gradient(var(--ah-blue), var(--ah-blue)), var(--ah-guilloche);
  background-size: 100% 74px, 100% 5px, auto; background-position: 0 0, 0 74px, 0 6px; background-repeat: no-repeat, no-repeat, repeat;
  border-left: 2.5px dashed var(--ah-ink); border-radius: 0 10px 10px 0;
  -webkit-mask: radial-gradient(circle 12px at 0 0, #0000 96%, #000) top left / 51% 51% no-repeat, radial-gradient(circle 12px at 0 100%, #0000 96%, #000) bottom left / 51% 51% no-repeat, linear-gradient(#000 0 0) right / 50% 100% no-repeat;
  mask: radial-gradient(circle 12px at 0 0, #0000 96%, #000) top left / 51% 51% no-repeat, radial-gradient(circle 12px at 0 100%, #0000 96%, #000) bottom left / 51% 51% no-repeat, linear-gradient(#000 0 0) right / 50% 100% no-repeat;
}
.ah-ticket__eyelet { position: absolute; left: 50%; top: 22px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: #d6dfea; border: 2.5px solid var(--ah-sky); box-shadow: inset 0 0 0 6px #d6dfea, inset 0 0 0 13px var(--ah-950); }
.ah-ticket__string { position: absolute; left: 50%; top: -86px; width: 52px; height: 110px; overflow: visible; }
.ah-ticket__string path { fill: none; stroke: var(--ah-950); stroke-width: 5; stroke-linecap: round; }
.ah-ticket__string .s-in { stroke: #f1e6cc; stroke-width: 2.4; }
.ah-ticket__stamp {
  position: absolute; left: 50%; top: 56%; translate: -50% -50%; rotate: -90deg;
  display: inline-flex; align-items: baseline; gap: 0.3em; padding: 0.35em 0.55em 0.28em;
  border: 3px solid var(--ah-blue-ink); border-radius: 0.3em; color: var(--ah-blue-ink);
  box-shadow: inset 0 0 0 2px var(--ah-cream), inset 0 0 0 4px var(--ah-blue-ink);
  font: 900 1.5rem/1 var(--ah-display); letter-spacing: 0.06em; white-space: nowrap;
  -webkit-mask: var(--ah-speckle) 0 0 / 90px 90px; mask: var(--ah-speckle) 0 0 / 90px 90px;
}
.ah-ticket__stamp small { font-size: 0.6em; }
.ah-ticket__code { position: absolute; left: 18%; right: 18%; bottom: 18px; height: 54px; background: repeating-linear-gradient(90deg, var(--ah-ink) 0 2px, transparent 2px 4px, var(--ah-ink) 4px 7px, transparent 7px 8px, var(--ah-ink) 8px 9px, transparent 9px 12px); }
@media (prefers-reduced-motion: no-preference) {
  html.motion .ah-ticket:not(.is-play) .ah-trow__box svg { stroke-dashoffset: 26; }
  html.motion .ah-ticket:not(.is-play) .ah-trow__box--x svg { stroke-dashoffset: 34; }
  html.motion .ah-ticket:not(.is-play) .ah-stamp { opacity: 0; transform: scale(1.8); }
  .ah-trow__box svg { transition: stroke-dashoffset 0.55s var(--ease-out) 0.35s; }
  .ah-trow:nth-child(2) .ah-trow__box svg { transition-delay: 0.65s; }
  .ah-stamp { transition: opacity 0.2s 0.75s, transform 0.4s var(--ease-back) 0.75s; }
  .ah-trow:nth-child(2) .ah-stamp { transition-delay: 1.05s, 1.05s; }
  .ah-trow:nth-child(3) .ah-stamp { transition-delay: 1.35s, 1.35s; }
}
@media (max-width: 700px) {
  .ah-ticket { rotate: -0.4deg; }
  .ah-ticket__body { grid-template-columns: minmax(0, 1fr); }
  .ah-ticket__main { border-radius: 10px 10px 0 0; -webkit-mask: none; mask: none; }
  .ah-ticket__stub { height: 96px; border-left: 0; border-top: 2.5px dashed var(--ah-ink); border-radius: 0 0 10px 10px; background-image: var(--ah-guilloche); background-size: auto; background-position: 0 4px; background-repeat: repeat; -webkit-mask: none; mask: none; }
  .ah-ticket__eyelet { left: 30px; top: 50%; margin: -13px 0 0; }
  .ah-ticket__string { display: none; }
  .ah-ticket__stamp { left: auto; right: 16px; top: 50%; translate: 0 -50%; rotate: -4deg; font-size: 1.3rem; }
  .ah-ticket__code { left: 70px; right: auto; width: 34%; top: 22px; bottom: 22px; height: auto; }
  .ah-trow { grid-template-columns: 30px 22px minmax(0, 1fr); grid-template-areas: "box n txt" ". . stamp"; gap: 10px; align-items: start; padding: 18px 0; }
  .ah-trow--plain { grid-template-areas: "box n txt"; }
  .ah-ticket--narrow .ah-ticket__body { grid-template-columns: minmax(0, 1fr); }
  .ah-trow__box { width: 30px; height: 30px; }
  .ah-trow__n { font-size: 1.7rem; }
  .ah-stamp { justify-self: start; margin-top: 4px; font-size: 1rem; }
  .ah-ticket__head { gap: 10px; }
  .ah-ticket__head img { width: 38px; }
  .ah-ticket__brand { font-size: 1.3rem; }
  .ah-masking--r { right: 14px; }
}

/* 11c. Price tags on a brass rod: proof numbers (one real number per tag) */
.ah-tags { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 22px; }
.ah-rod { position: absolute; left: -10px; right: -10px; height: 14px; border: 2px solid var(--ah-950); border-radius: 8px; background: linear-gradient(180deg, #fff1bf, #e2b44a 45%, #9c7420); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.5); }
.ah-rod::before, .ah-rod::after { content: ""; position: absolute; top: -14px; width: 16px; height: 28px; border: 2px solid var(--ah-950); border-radius: 4px; background: linear-gradient(90deg, #5d6a7d, #9aa7b8); }
.ah-rod::before { left: 6px; }
.ah-rod::after { right: 6px; }
.ah-rod--a { top: 0; }
.ah-rod--b { display: none; }
.ah-ptag { --tilt: -0.8deg; --str: 54px; position: relative; padding-top: var(--str); transform-origin: 50% 0; rotate: var(--tilt); transition: rotate 0.6s var(--ease-back); }
.ah-ptag::before { content: ""; position: absolute; left: 50%; top: 0; width: 2.5px; height: calc(var(--str) + 30px); margin-left: -1.25px; background: #e8dcc0; box-shadow: 0 0 0 1px var(--ah-950); z-index: 2; }
.ah-ptag__wrap { filter: var(--ah-outline) drop-shadow(6px 6px 0 rgba(0, 0, 0, 0.6)); transition: filter 0.25s; }
.ah-ptag__body {
  position: relative; padding: 62px clamp(18px, 2.4vw, 26px) 26px;
  background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink);
  clip-path: polygon(18% 0, 82% 0, 100% 44px, 100% 100%, 0 100%, 0 44px);
}
.ah-ptag__body::before { content: ""; position: absolute; left: 50%; top: 16px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--ah-900); box-shadow: 0 0 0 2px var(--ah-950), 0 0 0 6px var(--ah-brass), 0 0 0 8px var(--ah-950); }
.ah-ptag__num { font: 900 clamp(3.3rem, 2rem + 3vw, 4.9rem)/0.9 var(--ah-display); letter-spacing: 0.005em; color: var(--ah-ink); text-shadow: 0.05em 0.05em 0 var(--ah-blue); white-space: nowrap; }
.ah-ptag__label { display: inline-block; margin: 14px 0 14px -4px; padding: 5px 12px 4px; background: var(--ah-ink); color: var(--ah-sky); font: 900 1.05rem/1.1 var(--ah-display); letter-spacing: 0.12em; text-transform: uppercase; rotate: -1.5deg; clip-path: polygon(0 8%, 3px 30%, 0 52%, 4px 76%, 0 100%, 100% 100%, calc(100% - 4px) 72%, 100% 48%, calc(100% - 3px) 24%, 100% 0); }
.ah-ptag__body p:not(.ah-ptag__num) { color: var(--ah-ink-2); font-size: 1rem; line-height: 1.55; }
.ah-ptag__body p + p { margin-top: 8px; }
.ah-ptag:hover, .ah-ptag:focus-within { rotate: 0deg; }
.ah-ptag:hover .ah-ptag__wrap { filter: var(--ah-outline) drop-shadow(6px 6px 0 rgba(0, 0, 0, 0.6)) drop-shadow(0 0 16px rgba(173, 229, 255, 0.55)); }
.ah-ptag--2 { --tilt: 0.7deg; }
.ah-ptag--3 { --tilt: -0.5deg; }
.ah-ptag--4 { --tilt: 0.9deg; }
@media (max-width: 699px) {
  .ah-ptag { --str: 34px; }
  .ah-ptag + .ah-ptag { margin-top: 0; }
  .ah-ptag + .ah-ptag::before { top: -6px; height: calc(var(--str) + 36px); }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .ah-tags { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .ah-rod--b { display: block; top: var(--rod-b, 50%); }
  .ah-ptag:nth-child(n+5) { margin-top: 60px; }
  .ah-ptag--2 { --str: 92px; } .ah-ptag--4 { --str: 92px; }
}
@media (min-width: 1100px) {
  .ah-tags { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 20px; }
  .ah-ptag--1 { --str: 44px; } .ah-ptag--2 { --str: 104px; } .ah-ptag--3 { --str: 64px; } .ah-ptag--4 { --str: 124px; }
  /* three tags on a rod: a little wider, strings still uneven */
  .ah-tags--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; }
  .ah-tags--3 .ah-ptag--3 { --str: 84px; }
}
/* a single tag (a split's object) */
.ah-tags.ah-tags--1 { grid-template-columns: minmax(0, 1fr); width: min(100%, 340px); margin-inline: auto; }
.ah-tags--1 .ah-ptag--1 { --str: 54px; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .ah-ptag:not(.is-in) { rotate: 12deg; opacity: 0; }
  .ah-ptag { transition: rotate 0.9s var(--ease-back), opacity 0.3s; transition-delay: calc(var(--d, 0) * 120ms); }
  .ah-ptag--2 { --d: 1; } .ah-ptag--3 { --d: 2; } .ah-ptag--4 { --d: 3; }
  .ah-ptag:hover, .ah-ptag:focus-within { transition-delay: 0s; }
}

/* 11d. The ledger: the NUMBERED MANIFEST (the replacement for icon grids).
   A cream ledger page with a double rule head and numbered entries. */
.ah-ledger {
  position: relative; padding: 0 clamp(16px, 2.6vw, 28px) 10px;
  border: 2px solid var(--ah-950); border-radius: 6px;
  background-color: var(--ah-cream); background-image: var(--ah-fiber), linear-gradient(90deg, transparent 0 46px, rgba(180, 35, 24, 0.25) 46px 48px, transparent 48px);
  color: var(--ah-ink); box-shadow: 6px 6px 0 var(--ah-blue);
}
.ah-ledger--sky, .ah-ledger--job2 { box-shadow: 6px 6px 0 var(--ah-sky); }
.ah-ledger--pink, .ah-ledger--boost { box-shadow: 6px 6px 0 var(--ah-neon-pink); }
.ah-ledger--job2 { rotate: 0.4deg; }
.ah-ledger--boost { rotate: -0.4deg; }
.ah-ledger--job1 { rotate: -0.25deg; }
.ah-ledger__h {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 calc(clamp(16px, 2.6vw, 28px) * -1) 6px; padding: 14px clamp(16px, 2.6vw, 28px) 12px;
  border-bottom: 4px double var(--ah-ink); background: rgba(11, 20, 36, 0.04);
  font: 900 1.6rem/1 var(--ah-display); letter-spacing: 0.03em; text-transform: uppercase;
}
.ah-ledger__job { padding: 4px 9px 3px; border-radius: 4px; background: var(--ah-ink); color: var(--ah-sky); font-size: 0.82em; letter-spacing: 0.12em; }
.ah-ledger__dot { color: var(--ah-blue-ink); }
.ah-entry { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-bottom: 1.5px dashed rgba(11, 20, 36, 0.22); transition: background-color 0.2s; }
.ah-entry:last-child { border-bottom: 0; }
.ah-entry.is-hot { background: linear-gradient(90deg, rgba(27, 141, 246, 0.1), rgba(27, 141, 246, 0)); }
.ah-entry__n { display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid var(--ah-ink); border-radius: 50%; background: #fffdf6; font: 900 1.1rem/1 var(--ah-display); color: var(--ah-ink); }
.ah-entry__name { margin: -4px 0 2px; font: 900 clamp(1.45rem, 1.2rem + 0.8vw, 1.8rem)/1 var(--ah-display); letter-spacing: 0.02em; text-transform: uppercase; }
.ah-entry__name a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ah-ink); text-decoration: none; background: linear-gradient(transparent 70%, rgba(27, 141, 246, 0.28) 70%); background-size: 0 100%; background-repeat: no-repeat; transition: background-size 0.3s var(--ease-out); }
.ah-entry__name a::after { content: ""; width: 0.62em; height: 0.62em; border-top: 3px solid var(--ah-blue-ink); border-right: 3px solid var(--ah-blue-ink); rotate: 45deg; translate: 0 1px; transition: translate 0.25s var(--ease-back); }
.ah-entry__name a:hover { background-size: 100% 100%; }
.ah-entry__name a:hover::after { translate: 4px 1px; }
.ah-entry__name a:focus-visible { outline-color: var(--ah-ink); }
/* a plain (unlinked) entry name keeps the 44px rhythm */
.ah-entry__name > span { display: inline-flex; align-items: center; min-height: 44px; }
.ah-entry__body p { color: var(--ah-ink-2); font-size: 1rem; line-height: 1.55; }
.ah-entry__body p + p { margin-top: 6px; }
/* an inline "feeds" chip under an entry (what this item feeds or includes) */
.ah-feeds { display: inline-block; margin-top: 10px !important; padding: 5px 12px 5px 10px; border: 1.5px solid var(--ah-ink); border-radius: 12px; background: #e3f2ff; color: var(--ah-ink) !important; font-size: 0.92rem !important; font-weight: 600; line-height: 1.35 !important; }
.ah-feeds b { margin-right: 4px; color: var(--ah-blue-ink); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.85em; }
/* the entry's tick (a stamped check at the right of a row), optional */
.ah-entry--tick { grid-template-columns: 40px minmax(0, 1fr) 34px; }
.ah-entry__tick { position: relative; align-self: center; width: 30px; height: 30px; border: 2.5px solid var(--ah-blue-ink); border-radius: 50%; rotate: -8deg; }
.ah-entry__tick::after { content: ""; position: absolute; inset: 4px; background: var(--ah-blue-ink); -webkit-mask: var(--ah-check) center / contain no-repeat; mask: var(--ah-check) center / contain no-repeat; }
@media (max-width: 520px) {
  .ah-ledger { padding-inline: 14px; background-image: var(--ah-fiber); }
  .ah-ledger__h { margin-inline: -14px; padding-inline: 14px; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 1.4rem; }
  .ah-entry { position: relative; display: block; padding: 16px 0 16px; }
  .ah-entry__n { position: absolute; left: 0; top: 18px; width: 32px; height: 32px; font-size: 0.95rem; }
  .ah-entry__name { padding-left: 42px; }
  .ah-entry__tick { position: absolute; right: 0; top: 22px; width: 26px; height: 26px; }
  .ah-entry--tick .ah-entry__name { padding-right: 32px; }
  .ah-ledger__dot { display: none; }
  .ah-feeds { font-size: 1rem !important; }
}

/* 11e. Steel plates: short numbered steps on a loop (5 to 7 words each) */
.ah-loopwrap { position: relative; max-width: 480px; margin-top: 30px; padding-right: 58px; }
.ah-loop { position: relative; display: grid; gap: 10px; }
.ah-loopwrap__arrow { position: absolute; right: 0; top: 18px; bottom: 18px; width: 54px; height: calc(100% - 36px); overflow: visible; }
.ah-loopwrap__arrow path { fill: none; stroke: var(--ah-sky); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ah-loopwrap__arrow .lw-dash { stroke-dasharray: 2 9; }
.ah-loop li { position: relative; display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 8px 30px 8px 8px; border: 2px solid var(--ah-950); border-radius: 8px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 1px, transparent 1px 4px), linear-gradient(180deg, #f2f5f9, #c9d2dd 55%, #a9b4c2); color: var(--ah-ink); box-shadow: 4px 4px 0 var(--ah-blue), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.ah-loop li:nth-child(odd) { margin-left: 0; rotate: -0.6deg; }
.ah-loop li:nth-child(even) { margin-left: 22px; rotate: 0.5deg; }
.ah-loop li::before { content: ""; position: absolute; top: 50%; right: 9px; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; border: 1.5px solid var(--ah-950); background: radial-gradient(circle at 35% 35%, var(--ah-brass-hi), var(--ah-brass) 55%, var(--ah-brass-lo)); }
.ah-loop li::after { content: ""; position: absolute; top: 50%; right: 12px; width: 5px; height: 1.5px; margin-top: -0.75px; background: var(--ah-brass-lo); rotate: 35deg; }
.ah-loop__n { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 2px solid var(--ah-950); border-radius: 50%; background: var(--ah-cream); font: 900 1.25rem/1 var(--ah-display); }
.ah-loop__t { font: 900 1.25rem/1.05 var(--ah-display); letter-spacing: 0.06em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55); }

/* --------------------------------------------------------------------------
   12. The inner-page hero: the back wall after close, the flashlight, one
   statement object. Crumbs, kicker, H1 with an accent line, lead, two CTAs.
   -------------------------------------------------------------------------- */
.ah-phero {
  position: relative; isolation: isolate;
  padding: clamp(26px, 4vw, 56px) 0 clamp(84px, 9vw, 120px);
  background-color: #090c17;
  background-image:
    radial-gradient(120% 95% at 72% 46%, rgba(3, 6, 13, 0) 30%, rgba(3, 6, 13, 0.62) 78%, rgba(3, 6, 13, 0.85) 100%),
    linear-gradient(180deg, rgba(3, 6, 13, 0.7), rgba(3, 6, 13, 0) 22%),
    var(--ah-grain),
    var(--ah-brick-dim);
  background-size: auto, auto, 160px 160px, 120px 44px;
}
.ah-phero__grid { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: center; }
@media (min-width: 1000px) {
  .ah-phero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(28px, 3.4vw, 64px); }
  .ah-phero--object-left .ah-phero__object { order: -1; }
}
.ah-phero__copy { max-width: 680px; min-width: 0; }
.ah-phero__h { margin-bottom: 22px; font-family: var(--ah-display); font-weight: 900; font-size: clamp(2.5rem, 1.15rem + 3.3vw, 4.35rem); line-height: 0.94; letter-spacing: 0.003em; color: var(--ah-paper); text-shadow: 0.035em 0.035em 0 var(--ah-950); text-wrap: balance; }
.ah-phero__h--long { font-size: clamp(2.2rem, 1.05rem + 2.6vw, 3.55rem); }
.ah-phero__h .ah-accent { display: block; margin-top: 0.1em; }
.ah-phero__lead { max-width: 32em; margin-bottom: 30px; color: #c9d5e4; font-size: clamp(1.1rem, 1rem + 0.45vw, 1.35rem); line-height: 1.55; }
.ah-phero__lead strong { color: var(--ah-paper); font-weight: 800; }
.ah-phero__lead + .ah-phero__lead { margin-top: -18px; }
.ah-phero__note { display: flex; align-items: center; gap: 10px; margin-top: 20px; color: var(--ah-fog); font-size: 0.98rem; font-weight: 600; }
.ah-phero__note::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ah-neon-sky); box-shadow: 0 0 0 2px var(--ah-950), 0 0 8px var(--ah-neon-sky); }
.ah-phero__object { position: relative; display: flex; justify-content: center; min-width: 0; }
@media (max-width: 600px) { .ah-phero__h { font-size: clamp(2.2rem, 10.4vw, 2.8rem); } .ah-phero__h--long { font-size: clamp(1.95rem, 8.6vw, 2.35rem); } }

/* the breadcrumb: a label-maker strip with a cream tag on the end that points back to the homepage case */
.ah-crumbs {
  display: flex; width: fit-content; align-items: stretch; flex-wrap: wrap; max-width: 100%; margin-bottom: 24px;
  border: 2px solid var(--ah-950); border-radius: 4px; background: #11151d; color: #cdd6e1;
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.07), 3px 3px 0 var(--ah-blue);
  font: 700 0.74rem/1.2 var(--ah-mono); letter-spacing: 0.12em; text-transform: uppercase;
}
.ah-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0 12px; list-style: none; }
.ah-crumbs li { display: inline-flex; align-items: center; min-height: 44px; }
.ah-crumbs li + li::before { content: "/"; margin: 0 8px; color: var(--ah-neon-pink); }
.ah-crumbs a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--ah-paper); text-decoration: none; }
.ah-crumbs a:hover { color: var(--ah-sky); text-decoration: underline; text-underline-offset: 4px; }
.ah-crumbs [aria-current="page"] { color: var(--ah-sky); }
.ah-crumbs a.ah-crumbs__tag, .ah-crumbs__tag { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 12px; border-left: 2px dashed var(--ah-ink); background: var(--ah-cream); color: var(--ah-ink); font-weight: 800; text-decoration: none; border-radius: 0 2px 2px 0; }
.ah-crumbs__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ah-950); }
.ah-crumbs a.ah-crumbs__tag:hover { background: #fffaf0; color: var(--ah-ink); text-decoration: none; }
.ah-crumbs__tag:focus-visible { outline-color: var(--ah-sky); }
/* small phones: the tag goes (same specificity as the display rule above, so it wins) */
@media (max-width: 459px) { .ah-crumbs a.ah-crumbs__tag, .ah-crumbs span.ah-crumbs__tag { display: none; } }
/* theme.js keeps the strip on one row: if the tag would wrap under the trail it goes (.is-notag); if the
   trail itself would wrap, the middle crumbs fold away visually (.is-fold) and screen readers still hear them */
.ah-crumbs.is-notag a.ah-crumbs__tag, .ah-crumbs.is-notag span.ah-crumbs__tag { display: none; }
.ah-crumbs.is-fold li:not(:first-child):not(:last-child) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ah-crumbs.is-fold ol { flex-wrap: nowrap; } /* a very long page name wraps inside its own crumb, never onto a second row */
.ah-crumbs.is-fold li:last-child { min-width: 0; text-wrap: balance; }

/* --------------------------------------------------------------------------
   13. Section heads and layouts
   -------------------------------------------------------------------------- */
.ah-head { max-width: 780px; margin-bottom: clamp(30px, 4vw, 54px); }
.ah-head--center { margin-inline: auto; text-align: center; }
.ah-head .ah-h2 { margin-bottom: 18px; }
.ah-head__intro { max-width: 36em; color: var(--ah-fog); font-size: 1.12rem; }
.ah-head__intro strong { color: var(--ah-paper); }
.ah-head--center .ah-head__intro { margin-inline: auto; }
.ah-head__intro + .ah-head__intro { margin-top: 8px; }
/* split: copy + one object (--flip puts the object first on desktop, --wide gives the object more room) */
.ah-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
@media (min-width: 980px) {
  .ah-split { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(36px, 5vw, 80px); }
  .ah-split--flip > :first-child { order: 2; }
  .ah-split--wide { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}
.ah-split__copy .ah-h2 { margin-bottom: 20px; }
/* a centered punch line under a section (display face, one or two sentences) */
.ah-punch { max-width: 24em; margin: clamp(40px, 5vw, 64px) auto 0; text-align: center; color: var(--ah-paper); font: 900 clamp(1.6rem, 1.1rem + 1.7vw, 2.5rem)/1.08 var(--ah-display); letter-spacing: 0.01em; text-wrap: balance; }
.ah-punch strong { color: var(--ah-sky); }

/* --------------------------------------------------------------------------
   14. Talk: chat thread, dictionary card, mega quote, dead search bar
   -------------------------------------------------------------------------- */
/* 14a. iMessage-style thread. --out (ours) is Pawn blue with ink text, --in is cream. */
.ah-chat { display: grid; gap: 10px; width: min(100%, 520px); margin: 0; }
.ah-chat__meta { justify-self: center; margin-bottom: 4px; color: var(--ah-mute); font: 700 0.78rem/1.2 var(--ah-body); letter-spacing: 0.08em; text-transform: uppercase; }
.ah-chat__row { display: flex; }
.ah-chat__row--out { justify-content: flex-end; }
.ah-chat__row--in { justify-content: flex-start; }
.ah-chat__bubble {
  max-width: 82%; padding: 11px 16px 10px; border: 2px solid var(--ah-950); border-radius: 22px;
  font-size: 1.04rem; font-weight: 700; line-height: 1.4;
}
.ah-chat__row--out .ah-chat__bubble { border-bottom-right-radius: 6px; background: var(--ah-blue); background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 55%); color: var(--ah-ink); box-shadow: 3px 3px 0 var(--ah-paper); }
.ah-chat__row--in .ah-chat__bubble { border-bottom-left-radius: 6px; background: var(--ah-cream); color: var(--ah-ink); box-shadow: 3px 3px 0 var(--ah-blue); }
.ah-chat__who { display: block; margin-bottom: 2px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; }
.ah-chat__typing { display: inline-flex; gap: 5px; padding: 14px 16px; border: 2px solid var(--ah-950); border-radius: 22px 22px 22px 6px; background: var(--ah-cream); box-shadow: 3px 3px 0 var(--ah-blue); }
.ah-chat__typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--ah-ink-2); }
.ah-chat__note { margin-top: 8px; color: var(--ah-fog); font-size: 1rem; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .ah-chat:not(.is-play) .ah-chat__bubble, html.motion .ah-chat:not(.is-play) .ah-chat__typing { opacity: 0; transform: translateY(12px) scale(0.9); }
  .ah-chat__bubble, .ah-chat__typing { transition: opacity 0.3s var(--ease-out), transform 0.5s var(--ease-back); }
  .ah-chat__row:nth-child(2) > * { transition-delay: 0.1s; } .ah-chat__row:nth-child(3) > * { transition-delay: 0.55s; } .ah-chat__row:nth-child(4) > * { transition-delay: 1s; } .ah-chat__row:nth-child(5) > * { transition-delay: 1.45s; } .ah-chat__row:nth-child(6) > * { transition-delay: 1.9s; }
  .ah-chat.is-play .ah-chat__typing i { animation: ah-typing 0.9s ease-in-out 4; }
  .ah-chat__typing i:nth-child(2) { animation-delay: 0.15s; } .ah-chat__typing i:nth-child(3) { animation-delay: 0.3s; }
}
@keyframes ah-typing { 50% { transform: translateY(-4px); opacity: 0.55; } }

/* 14b. The dictionary card: a ruled index card with a thumb tab */
.ah-defn {
  position: relative; max-width: 640px; margin: 0 auto; padding: 28px clamp(20px, 4vw, 36px) 26px;
  border: 2px solid var(--ah-950); border-radius: 6px;
  background-color: #fbf7ec; background-image: repeating-linear-gradient(180deg, transparent 0 29px, rgba(21, 101, 192, 0.13) 29px 30px);
  color: var(--ah-ink); box-shadow: 6px 6px 0 var(--ah-blue); rotate: -0.6deg;
}
.ah-defn__tab { position: absolute; top: 26px; right: -30px; display: grid; place-items: center; width: 30px; height: 54px; border: 2px solid var(--ah-950); border-left: 0; border-radius: 0 8px 8px 0; background: var(--ah-sky); color: var(--ah-ink); font: 900 1.3rem/1 var(--ah-display); }
.ah-defn__term { padding-bottom: 12px; border-bottom: 2px solid rgba(180, 35, 24, 0.55); font: 900 clamp(1.9rem, 1.3rem + 2vw, 2.7rem)/1 var(--ah-display); letter-spacing: 0.02em; color: var(--ah-ink); }
.ah-defn__say { margin-top: 6px; color: var(--ah-ink-2); font: 600 0.95rem/1.3 var(--ah-mono); }
.ah-defn__type { margin: 14px 0 10px; color: var(--ah-blue-ink); font-style: italic; font-weight: 600; font-size: 0.98rem; }
.ah-defn__body { color: var(--ah-ink); font-size: 1.08rem; line-height: 1.6; }
.ah-defn__body b, .ah-defn__body strong { color: var(--ah-blue-ink); font-weight: 800; }
@media (max-width: 640px) { .ah-defn { rotate: 0deg; } .ah-defn__tab { right: 12px; top: -2px; width: 46px; height: 30px; border: 2px solid var(--ah-950); border-top: 0; border-radius: 0 0 8px 8px; } }

/* 14c. The mega quote: one huge line under neon tube quote marks */
.ah-mega { max-width: 18em; margin: 0 auto; text-align: center; color: var(--ah-paper); font: 900 clamp(2.2rem, 1.1rem + 3.4vw, 4.5rem)/0.98 var(--ah-display); letter-spacing: 0.005em; text-shadow: 0.035em 0.035em 0 var(--ah-950); text-wrap: balance; }
.ah-mega::before {
  content: ""; display: block; width: 92px; height: 68px; margin: 0 auto 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 68' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%23ff3f86' stroke-width='11' opacity='.32'%3E%3Cpath d='M30 52a10 10 0 1 1 0-1M20 51C18 33 24 20 38 12M70 52a10 10 0 1 1 0-1M60 51C58 33 64 20 78 12'/%3E%3C/g%3E%3Cg stroke='%23ff7fb0' stroke-width='5'%3E%3Cpath d='M30 52a10 10 0 1 1 0-1M20 51C18 33 24 20 38 12M70 52a10 10 0 1 1 0-1M60 51C58 33 64 20 78 12'/%3E%3C/g%3E%3Cg stroke='%23ffe4ee' stroke-width='1.8'%3E%3Cpath d='M30 52a10 10 0 1 1 0-1M20 51C18 33 24 20 38 12M70 52a10 10 0 1 1 0-1M60 51C58 33 64 20 78 12'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.ah-mega p { margin: 0; }
.ah-mega__hot { display: block; margin-top: 0.12em; color: var(--ah-sky); text-shadow: 0.04em 0.04em 0 var(--ah-blue-deep), 0.075em 0.075em 0 var(--ah-950); }
.ah-mega__by { display: block; margin-top: 18px; color: var(--ah-fog); font: 700 1rem/1.3 var(--ah-body); letter-spacing: 0.04em; text-shadow: none; }

/* 14d. The dead search bar: what nobody types (struck out) */
.ah-search { width: min(100%, 560px); margin: 0 auto; text-align: center; }
.ah-search__bar { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 22px; border: 2px solid var(--ah-950); border-radius: 999px; background: #0e1a30; box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.5), 4px 4px 0 var(--ah-blue); text-align: left; }
.ah-search__icon { position: relative; flex: none; width: 20px; height: 20px; border: 3px solid var(--ah-mute); border-radius: 50%; translate: -2px -2px; }
.ah-search__icon::after { content: ""; position: absolute; right: -7px; bottom: -6px; width: 9px; height: 3px; border-radius: 2px; background: var(--ah-mute); rotate: 45deg; }
.ah-search__text { color: var(--ah-mute); font-size: 1.15rem; font-weight: 700; }
.ah-search__text s { text-decoration-color: var(--ah-neon-pink); text-decoration-thickness: 3px; }
.ah-search__caret { width: 2px; height: 1.3em; background: var(--ah-mute); }
.ah-search__cap { margin-top: 14px; color: var(--ah-hot); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) { .ah-search__caret { animation: ah-blink 1.1s steps(1) 4; } }
@keyframes ah-blink { 50% { opacity: 0; } }

/* --------------------------------------------------------------------------
   15. Money: math tiles, the receipt, the package ticket
   -------------------------------------------------------------------------- */
/* 15a. Math: tiles joined by operators (the result tile is lit blue) */
.ah-math { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 14px; margin: 0 auto; }
.ah-math__tile {
  position: relative; display: grid; gap: 6px; align-content: center; width: min(100%, 240px); min-height: 132px; padding: 20px 18px 18px 30px;
  border: 2px solid var(--ah-950); border-radius: 6px 14px 14px 6px; background-color: var(--ah-cream); background-image: var(--ah-fiber);
  color: var(--ah-ink); box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.6); rotate: var(--tilt, -0.8deg);
}
.ah-math__tile::before { content: ""; position: absolute; left: 10px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--band-bg, var(--ah-900)); box-shadow: 0 0 0 2px var(--ah-950); }
.ah-math__tile:nth-of-type(2) { --tilt: 0.7deg; }
.ah-math__tile b { font: 900 clamp(1.9rem, 1.4rem + 1.4vw, 2.6rem)/0.95 var(--ah-display); letter-spacing: 0.01em; }
.ah-math__tile span { color: var(--ah-ink-2); font-size: 0.95rem; font-weight: 600; line-height: 1.35; }
.ah-math__tile--sum { background: var(--ah-blue); background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 55%); box-shadow: 6px 6px 0 var(--ah-paper); --tilt: -1.4deg; }
.ah-math__tile--sum span { color: var(--ah-ink); }
.ah-math__op { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border: 2px solid var(--ah-950); border-radius: 50%; background: #11151d; color: var(--ah-sky); font: 900 2rem/1 var(--ah-display); box-shadow: 3px 3px 0 var(--ah-blue); }
@media (max-width: 640px) { .ah-math { flex-direction: column; } .ah-math__tile { width: min(100%, 320px); } }

/* 15b. The receipt: thermal paper that prints when it comes into view */
.ah-receipt { position: relative; width: min(100%, 380px); margin: 0 auto; filter: var(--ah-outline) drop-shadow(7px 7px 0 rgba(0, 0, 0, 0.55)); rotate: var(--tilt, 1deg); }
.ah-receipt__paper {
  padding: 30px 24px 34px; background-color: #fbf9f2; background-image: repeating-linear-gradient(180deg, transparent 0 23px, rgba(11, 20, 36, 0.035) 23px 24px); color: var(--ah-ink);
  font: 600 0.95rem/1.5 var(--ah-mono);
  -webkit-mask: var(--ah-zigzag) 0 0 / 16px 9px repeat-x, linear-gradient(#000 0 0) 0 8px / 100% calc(100% - 16px) no-repeat, var(--ah-zigzag) 0 100% / 16px 9px repeat-x;
  mask: var(--ah-zigzag) 0 0 / 16px 9px repeat-x, linear-gradient(#000 0 0) 0 8px / 100% calc(100% - 16px) no-repeat, var(--ah-zigzag) 0 100% / 16px 9px repeat-x;
}
.ah-receipt__paper::after { content: ""; display: block; }
.ah-receipt__head { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 2px dashed rgba(11, 20, 36, 0.35); text-align: center; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.ah-receipt__lines li { display: flex; align-items: baseline; gap: 6px; padding: 5px 0; }
.ah-receipt__lines li span { flex: 1 1 auto; display: flex; align-items: baseline; min-width: 0; }
.ah-receipt__lines li span::after { content: ""; flex: 1 1 12px; min-width: 12px; margin: 0 0 0.3em 6px; border-bottom: 2px dotted rgba(11, 20, 36, 0.4); }
.ah-receipt__lines li b { flex: none; max-width: 52%; text-align: right; font-weight: 800; }
.ah-receipt__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 4px double var(--ah-ink); font-size: 1.05rem; font-weight: 800; text-transform: uppercase; }
.ah-receipt__total b { font: 900 1.5rem/1 var(--ah-display); letter-spacing: 0.02em; text-align: right; }
.ah-receipt__foot { margin-top: 16px; text-align: center; color: var(--ah-ink-2); font-size: 0.85rem; letter-spacing: 0.06em; }
.ah-receipt--us .ah-receipt__total b { color: var(--ah-blue-ink); }
@media (prefers-reduced-motion: no-preference) {
  html.motion .ah-receipt:not(.is-play) .ah-receipt__paper { clip-path: inset(0 0 100% 0); }
  .ah-receipt__paper { transition: clip-path 1.5s steps(16); }
}
/* two receipts side by side: theirs and ours */
.ah-receipts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; align-items: start; max-width: 860px; margin: 0 auto; }
@media (min-width: 760px) { .ah-receipts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ah-receipts > :nth-child(2) { --tilt: -1deg; margin-top: 28px; } }

/* 15c. The package ticket: one plan per ticket, the price on the stub line, a tear-off CTA */
.ah-pkgs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: start; }
@media (min-width: 760px) { .ah-pkgs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ah-pkgs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; } .ah-pkgs > .ah-pkg--flag { margin-top: -14px; } }
.ah-pkg {
  --pkg-pad: clamp(18px, 2.4vw, 26px);
  position: relative; display: flex; flex-direction: column; padding: 0 var(--pkg-pad);
  border: 2px solid var(--ah-950); border-radius: 10px;
  background-color: var(--ah-cream); background-image: var(--ah-guilloche); background-position: 0 6px;
  color: var(--ah-ink); box-shadow: 7px 7px 0 var(--ah-blue); rotate: var(--tilt, -0.6deg);
  transition: rotate 0.4s var(--ease-back), translate 0.4s var(--ease-back);
}
.ah-pkgs > .ah-pkg:nth-child(2) { --tilt: 0.5deg; } .ah-pkgs > .ah-pkg:nth-child(3) { --tilt: -0.3deg; }
.ah-pkg:hover, .ah-pkg:focus-within { rotate: 0deg; translate: 0 -3px; }
.ah-pkg--flag { box-shadow: 7px 7px 0 var(--ah-neon-pink); }
.ah-pkg__head { display: flex; align-items: center; gap: 10px; margin: 0 calc(var(--pkg-pad) * -1) 18px; padding: 13px var(--pkg-pad) 12px; border-radius: 8px 8px 0 0; background: var(--ah-ink); color: #fff; border-bottom: 5px solid var(--ah-blue); }
.ah-pkg--flag .ah-pkg__head { border-bottom-color: var(--ah-neon-pink); }
.ah-pkg__brand { font: 900 1.15rem/1 var(--ah-display); letter-spacing: 0.08em; text-transform: uppercase; }
.ah-pkg__no { margin-left: auto; font: 800 0.9rem/1 var(--ah-display); letter-spacing: 0.14em; color: #ff8a8a; }
.ah-pkg__flag { position: absolute; z-index: 2; top: -30px; right: 18px; --tilt: 5deg; } /* above the ticket head, never on its No. */
.ah-pkg__name { font: 900 clamp(1.7rem, 1.3rem + 1vw, 2.2rem)/1 var(--ah-display); letter-spacing: 0.03em; text-transform: uppercase; }
.ah-pkg__price { margin-top: 10px; font: 900 clamp(2.6rem, 2rem + 1.8vw, 3.4rem)/0.95 var(--ah-display); letter-spacing: 0.005em; color: var(--ah-ink); text-shadow: 0.05em 0.05em 0 var(--ah-blue); }
.ah-pkg__price small { margin-left: 4px; font-size: 0.42em; letter-spacing: 0.04em; text-shadow: none; color: var(--ah-ink-2); }
.ah-pkg__spend { margin-top: 10px; color: var(--ah-ink-2); font-size: 0.95rem; font-weight: 600; line-height: 1.4; }
.ah-pkg__spend b { color: var(--ah-ink); }
.ah-pkg__list { display: grid; gap: 9px; margin: 18px 0 0; padding: 16px 0 0; border-top: 1.5px dashed rgba(11, 20, 36, 0.3); }
.ah-pkg__list li { position: relative; padding-left: 28px; color: var(--ah-ink); font-size: 0.98rem; line-height: 1.45; }
.ah-pkg__list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 19px; height: 19px; background: var(--ah-blue-ink); -webkit-mask: var(--ah-check) center / contain no-repeat; mask: var(--ah-check) center / contain no-repeat; }
.ah-pkg__list li.is-no { color: #4b5873; }
.ah-pkg__list li.is-no::before { background: var(--ah-red-ink); -webkit-mask-image: var(--ah-cross); mask-image: var(--ah-cross); width: 16px; height: 16px; left: 1px; top: 4px; }
.ah-pkg__stub { position: relative; margin: 22px calc(var(--pkg-pad) * -1) 0; padding: 20px var(--pkg-pad) 22px; border-top: 2.5px dashed var(--ah-ink); }
.ah-pkg__stub::before, .ah-pkg__stub::after { content: ""; position: absolute; top: -13px; width: 24px; height: 24px; border: 2px solid var(--ah-950); border-radius: 50%; background: var(--band-bg, var(--ah-900)); }
.ah-pkg__stub::before { left: -13px; clip-path: inset(0 0 0 50%); }
.ah-pkg__stub::after { right: -13px; clip-path: inset(0 50% 0 0); }
.ah-pkg__stub .btn { width: 100%; --btn-shadow: var(--ah-ink); white-space: normal; }
.ah-pkg__fine { margin-top: 10px; text-align: center; color: var(--ah-ink-2); font-size: 0.85rem; font-weight: 600; }
.ah-pkg-note { max-width: 40em; margin: clamp(30px, 4vw, 44px) auto 0; text-align: center; color: var(--ah-fog); }

/* --------------------------------------------------------------------------
   16. Questions and comparisons
   -------------------------------------------------------------------------- */
/* 16a. FAQ: native details; each question is a cream claim ticket with a numbered stub */
.ah-faq { display: grid; gap: 16px; max-width: 840px; margin: 0 auto; }
.ah-faq__item { border: 2px solid var(--ah-950); border-radius: 8px; background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink); box-shadow: 5px 5px 0 var(--ah-blue); transition: box-shadow 0.2s, translate 0.3s var(--ease-back); }
.ah-faq__item:nth-child(3n+2) { box-shadow: 5px 5px 0 var(--ah-sky); }
.ah-faq__item[open] { box-shadow: 7px 7px 0 var(--ah-blue); }
.ah-faq__item summary { display: flex; align-items: center; gap: 14px; min-height: 62px; padding: 0 14px 0 0; list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; font-size: clamp(1.03rem, 0.98rem + 0.25vw, 1.16rem); font-weight: 800; line-height: 1.35; }
.ah-faq__item summary::-webkit-details-marker { display: none; }
.ah-faq__item summary:focus-visible { outline-offset: -3px; border-radius: 6px; }
.ah-faq__n { align-self: stretch; display: grid; place-items: center; flex: none; width: 58px; border-right: 2.5px dashed var(--ah-ink); color: var(--ah-blue-ink); font: 900 1.25rem/1 var(--ah-display); letter-spacing: 0.04em; }
.ah-faq__q { flex: 1 1 auto; padding: 14px 0; }
.ah-faq__item summary::after {
  content: ""; flex: none; width: 34px; height: 34px; border: 2px solid var(--ah-ink); border-radius: 50%;
  background: linear-gradient(var(--ah-ink), var(--ah-ink)) center / 14px 2.5px no-repeat, linear-gradient(var(--ah-ink), var(--ah-ink)) center / 2.5px 14px no-repeat, var(--ah-sky);
  transition: transform 0.3s var(--ease-out);
}
.ah-faq__item summary:hover::after { transform: rotate(90deg); }
.ah-faq__item[open] summary::after { background: linear-gradient(var(--ah-ink), var(--ah-ink)) center / 14px 2.5px no-repeat, var(--ah-blue); transform: rotate(180deg); }
.ah-faq__a { display: grid; gap: 0.75em; padding: 16px 20px 20px 72px; border-top: 2px dashed rgba(11, 20, 36, 0.22); }
.ah-faq__a p { color: var(--ah-ink-2); font-size: 1.02rem; line-height: 1.6; }
.ah-faq__a a { color: var(--ah-blue-ink); font-weight: 700; }
.ah-faq__item:not(:has(.ah-faq__n)) summary { padding-left: 20px; }
.ah-faq__item:not(:has(.ah-faq__n)) .ah-faq__a { padding-left: 20px; }
@media (max-width: 600px) { .ah-faq__n { width: 46px; font-size: 1.05rem; } .ah-faq__a { padding-left: 18px; } }

/* 16b. The comparison table: a cream ledger sheet; the "us" column lit blue. Stacks on phones. */
.ah-compare { position: relative; max-width: 980px; margin: 0 auto; border: 2px solid var(--ah-950); border-radius: 8px; background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink); box-shadow: 7px 7px 0 var(--ah-blue); overflow: hidden; }
.ah-compare table { width: 100%; border-collapse: collapse; }
.ah-compare th, .ah-compare td { padding: 14px 16px; text-align: left; vertical-align: top; font-size: 1rem; line-height: 1.45; }
.ah-compare thead th { background: var(--ah-ink); color: var(--ah-paper); font: 900 1.2rem/1.05 var(--ah-display); letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 5px solid var(--ah-blue); }
.ah-compare thead th.is-us { background: var(--ah-blue); color: var(--ah-ink); border-bottom-color: var(--ah-ink); }
.ah-compare tbody th { width: 30%; color: var(--ah-ink); font-weight: 800; }
.ah-compare tbody tr + tr > * { border-top: 1.5px dashed rgba(11, 20, 36, 0.24); }
.ah-compare td { color: var(--ah-ink-2); }
.ah-compare td.is-us { background: rgba(27, 141, 246, 0.1); color: var(--ah-ink); font-weight: 600; }
.ah-compare tfoot th, .ah-compare tfoot td { border-top: 4px double var(--ah-ink); font-weight: 800; color: var(--ah-ink); }
.ah-compare tfoot td b { font: 900 1.5rem/1 var(--ah-display); letter-spacing: 0.02em; }
.ah-compare tfoot td.is-us b { color: var(--ah-blue-ink); }
.ah-yes, .ah-no { position: relative; display: inline-block; padding-left: 28px; }
.ah-yes::before, .ah-no::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; -webkit-mask: var(--ah-check) center / contain no-repeat; mask: var(--ah-check) center / contain no-repeat; background: var(--ah-blue-ink); }
.ah-no::before { -webkit-mask-image: var(--ah-cross); mask-image: var(--ah-cross); background: var(--ah-red-ink); width: 17px; height: 17px; top: 3px; }
@media (max-width: 680px) {
  .ah-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ah-compare table, .ah-compare tbody, .ah-compare tfoot, .ah-compare tr, .ah-compare th, .ah-compare td { display: block; width: auto; }
  .ah-compare tbody tr, .ah-compare tfoot tr { padding: 4px 0 8px; }
  .ah-compare tbody tr + tr { border-top: 2px dashed rgba(11, 20, 36, 0.3); }
  .ah-compare tbody tr + tr > * { border-top: 0; }
  .ah-compare tbody th, .ah-compare tfoot th { width: auto; padding: 14px 16px 4px; font: 900 1.2rem/1.1 var(--ah-display); letter-spacing: 0.04em; text-transform: uppercase; }
  .ah-compare td { padding: 6px 16px; }
  .ah-compare td.is-us { margin: 4px 10px 0; border-radius: 6px; padding: 8px 10px; }
  .ah-compare td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--ah-ink-2); font: 800 0.7rem/1.2 var(--ah-mono); letter-spacing: 0.14em; text-transform: uppercase; }
  .ah-compare tfoot tr { border-top: 4px double var(--ah-ink); }
  .ah-compare tfoot th, .ah-compare tfoot td { border-top: 0; }
}

/* --------------------------------------------------------------------------
   17. Frames for real things: phone, browser, map, video
   Real screenshots only. A drawn mock always wears .ah-sticker.ah-sample.
   -------------------------------------------------------------------------- */
/* 17a. Phone */
.ah-phone { position: relative; width: min(100%, var(--phone-w, 300px)); margin: 0 auto; rotate: var(--tilt, -2deg); }
.ah-phone__body { position: relative; padding: 11px; border: 3px solid var(--ah-950); border-radius: 44px; background: linear-gradient(160deg, #3a4456, #1a202c 40%, #11151d); box-shadow: 8px 8px 0 var(--ah-blue), inset 0 0 0 2px rgba(255, 255, 255, 0.12); }
.ah-phone__body::before, .ah-phone__body::after { content: ""; position: absolute; width: 5px; border: 2px solid var(--ah-950); background: #4a5568; }
.ah-phone__body::before { left: -8px; top: 22%; height: 54px; border-radius: 3px 0 0 3px; }
.ah-phone__body::after { right: -8px; top: 30%; height: 76px; border-radius: 0 3px 3px 0; }
.ah-phone__screen { position: relative; aspect-ratio: 9 / 19.2; overflow: hidden; border: 2px solid var(--ah-950); border-radius: 33px; background: var(--ah-cream); color: var(--ah-ink); }
.ah-phone__screen > img, .ah-phone__screen > video { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ah-phone__island { position: absolute; z-index: 3; left: 50%; top: 20px; width: 30%; height: 22px; margin-left: -15%; border-radius: 999px; background: #05070c; }
.ah-phone__cap, .ah-browser__cap, .ah-map__cap, .ah-video__cap { margin-top: 18px; text-align: center; color: var(--ah-fog); font-size: 0.98rem; font-weight: 600; rotate: 0deg; }

/* 17b. Browser window (add .ah-browser--scroll to glide a tall screenshot on hover/focus) */
.ah-browser { position: relative; width: 100%; max-width: var(--browser-w, 720px); margin: 0 auto; rotate: var(--tilt, 0deg); }
.ah-browser__win { overflow: hidden; border: 2px solid var(--ah-950); border-radius: 12px; background: #0b1528; box-shadow: 8px 8px 0 var(--ah-blue); }
.ah-browser__bar { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-bottom: 2px solid var(--ah-950); background: linear-gradient(180deg, #e3e9f0, #b9c3d0); }
.ah-browser__bar i { flex: none; width: 12px; height: 12px; border: 1.5px solid var(--ah-950); border-radius: 50%; background: var(--ah-neon-pink); }
.ah-browser__bar i:nth-child(2) { background: var(--ah-gold); } .ah-browser__bar i:nth-child(3) { background: var(--ah-sky); }
.ah-browser__url { flex: 1 1 auto; min-width: 0; margin-left: 8px; padding: 4px 12px; overflow: hidden; border: 1.5px solid rgba(11, 20, 36, 0.4); border-radius: 999px; background: #fbfaf6; color: var(--ah-ink); font: 700 0.8rem/1.3 var(--ah-mono); white-space: nowrap; text-overflow: ellipsis; }
.ah-browser__screen { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #fbfaf6; }
.ah-browser__screen > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.ah-browser--scroll .ah-browser__screen > img { transition: object-position 4.5s ease-in-out; }
.ah-browser--scroll:hover .ah-browser__screen > img, .ah-browser--scroll:focus-within .ah-browser__screen > img { object-position: 50% 100%; }
.ah-browser a.ah-browser__win { display: block; text-decoration: none; color: inherit; }

/* 17c. Map board: a backlit route map behind case glass, neon push pins */
.ah-map { position: relative; width: 100%; max-width: var(--map-w, 860px); margin: 0 auto; }
.ah-map__board { position: relative; padding: 12px; border: 2px solid var(--ah-950); border-radius: 14px; background: linear-gradient(135deg, #e7edf4 0%, #a7b3c3 22%, #dfe6ee 44%, #8996a8 70%, #cfd7e1 100%); box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.55), inset 0 0 0 2px rgba(255, 255, 255, 0.5); }
.ah-map__screen { position: relative; overflow: hidden; border: 2px solid var(--ah-950); border-radius: 6px; background: radial-gradient(circle, rgba(173, 229, 255, 0.08) 1px, transparent 1.4px) 0 0 / 14px 14px, radial-gradient(120% 90% at 50% 0, rgba(47, 155, 255, 0.14), transparent 60%), #0b1528; }
.ah-map__screen > img, .ah-map__screen > svg { display: block; width: 100%; height: auto; }
.ah-map__screen > img { filter: brightness(2.3) saturate(1.25); }
.ah-map__screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, transparent 0 18%, rgba(200, 230, 255, 0.08) 18% 26%, transparent 26% 100%); }
.ah-map__pin { position: absolute; z-index: 2; left: var(--x, 50%); top: var(--y, 50%); width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid var(--ah-950); border-radius: 50%; background: var(--pin, var(--ah-neon-pink)); box-shadow: 0 0 0 4px rgba(255, 63, 134, 0.28), 0 0 10px 2px rgba(255, 63, 134, 0.6); }
.ah-map__pin--blue { --pin: var(--ah-neon-blue); box-shadow: 0 0 0 4px rgba(47, 155, 255, 0.28), 0 0 10px 2px rgba(47, 155, 255, 0.6); }
.ah-map__label { position: absolute; left: 50%; bottom: calc(100% + 8px); translate: -50% 0; --tilt: -3deg; }
.ah-map__plate { position: absolute; z-index: 3; left: 24px; bottom: -14px; padding: 5px 12px 4px; border: 2px solid var(--ah-950); border-radius: 4px; background: linear-gradient(180deg, #f2f5f9, #b9c3d0); color: var(--ah-ink); font: 800 0.74rem/1.2 var(--ah-mono); letter-spacing: 0.14em; text-transform: uppercase; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55); }
.ah-map__board::before, .ah-map__board::after { content: ""; position: absolute; top: 1.5px; width: 9px; height: 9px; border-radius: 50%; background: var(--ah-steel-c); box-shadow: 0 0 0 1.5px var(--ah-950); }
.ah-map__board::before { left: 20px; } .ah-map__board::after { right: 20px; }
/* tappable pins for a dense map: .ah-map--pins on the figure, a .ah-map__plot[data-pins] holding the img and
   button.ah-map__btn pins at --x/--y. theme.js (AH.pins) makes a tap pick the dot nearest the finger, flips the
   labels at the board's edges, and opens the pin's confirm card ([data-pop]). 81 dots on a phone-width board
   cannot each be 44px: always pair a dense map with a select (.ah-select) that reaches every pin. */
.ah-map--pins .ah-map__screen { overflow: visible; }
.ah-map__plot { position: relative; }
.ah-map__plot > img { display: block; width: 100%; height: auto; filter: brightness(2.3) saturate(1.25); }
.ah-map__btn {
  position: absolute; z-index: 2; left: var(--x, 50%); top: var(--y, 50%); display: grid; place-items: center;
  width: 22px; height: 22px; margin: -11px 0 0 -11px; padding: 0; border: 0; border-radius: 50%; background: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.ah-map__dot { position: relative; display: grid; place-items: center; width: 12px; height: 12px; border: 2px solid var(--ah-950); border-radius: 50%; background: var(--ah-neon-blue); box-shadow: 0 0 0 3px rgba(47, 155, 255, 0.25), 0 0 8px 1px rgba(47, 155, 255, 0.7); transition: transform 0.2s var(--ease-back); }
.ah-map__btn--open .ah-map__dot::after { content: ""; position: absolute; inset: -6px; border: 2px solid var(--ah-neon-sky); border-radius: 50%; opacity: 0; pointer-events: none; }
.ah-map__btn--taken { z-index: 3; }
.ah-map__btn--taken .ah-map__dot { width: 19px; height: 19px; background: var(--ah-neon-pink); box-shadow: 0 0 0 3px rgba(255, 63, 134, 0.28), 0 0 9px 1px rgba(255, 63, 134, 0.65); }
.ah-map__dot svg { width: 11px; height: 11px; fill: none; stroke: var(--ah-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ah-map__btn:hover, .ah-map__btn:focus-visible, .ah-map__btn.is-active { z-index: 7; }
.ah-map__btn:hover .ah-map__dot, .ah-map__btn:focus-visible .ah-map__dot, .ah-map__btn.is-active .ah-map__dot { transform: scale(1.35); }
.ah-map__btn:focus-visible { outline-offset: 1px; }
.ah-map__tip {
  position: absolute; left: 50%; bottom: calc(100% + 4px); z-index: 2; translate: -50% 4px; opacity: 0; pointer-events: none;
  padding: 5px 9px 4px; border: 2px solid var(--ah-950); border-radius: 5px; background: var(--ah-cream); color: var(--ah-ink);
  font: 800 0.78rem/1.2 var(--ah-body); white-space: nowrap; text-align: center; box-shadow: 2px 2px 0 var(--ah-950);
  transition: opacity 0.18s, translate 0.18s var(--ease-out);
}
.ah-map__tip b { display: block; margin-top: 2px; color: var(--ah-blue-ink); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; }
.ah-map__btn--taken .ah-map__tip b { color: var(--ah-red-ink); }
.ah-map__btn:hover .ah-map__tip, .ah-map__btn:focus-visible .ah-map__tip { opacity: 1; translate: -50% 0; }
.ah-map__btn.is-edge-l .ah-map__tip { left: 0; translate: -10px 4px; }
.ah-map__btn.is-edge-l:hover .ah-map__tip, .ah-map__btn.is-edge-l:focus-visible .ah-map__tip { translate: -10px 0; }
.ah-map__btn.is-edge-r .ah-map__tip { left: auto; right: 0; translate: 10px 4px; }
.ah-map__btn.is-edge-r:hover .ah-map__tip, .ah-map__btn.is-edge-r:focus-visible .ah-map__tip { translate: 10px 0; }
.ah-map__btn.is-edge-t .ah-map__tip { bottom: auto; top: calc(100% + 4px); }
@media (prefers-reduced-motion: no-preference) {
  .ah-map.is-play .ah-map__btn--open .ah-map__dot::after { animation: ah-ping 1.8s ease-out 2; animation-delay: calc(min(var(--i, 0), 20) * 30ms); } /* finite: under 5s */
  .ah-map__btn--open:hover .ah-map__dot::after, .ah-map__btn--open:focus-visible .ah-map__dot::after { animation: ah-ping 1.2s ease-out 2; }
}
@keyframes ah-ping { 0% { opacity: 0.9; transform: scale(0.6); } 100% { opacity: 0; transform: scale(1.8); } }

/* 17d. Video: the TV on the counter. Put a <video>, an <iframe> or a poster <img> in the screen. */
.ah-video { position: relative; width: 100%; max-width: var(--video-w, 820px); margin: 0 auto; }
.ah-video__set { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 16px; padding: 18px; border: 2px solid var(--ah-950); border-radius: 22px; background: repeating-linear-gradient(178deg, rgba(0, 0, 0, 0.1) 0 2px, transparent 2px 10px), linear-gradient(180deg, #6a4428, #3a2414); box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 220, 170, 0.25); }
.ah-video__screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 3px solid var(--ah-950); border-radius: 18px / 22px; background: #04060b; box-shadow: 0 0 0 6px #1a202c, 0 0 0 8px var(--ah-950); }
.ah-video__screen > img, .ah-video__screen > video, .ah-video__screen > iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
.ah-video__screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px), linear-gradient(120deg, rgba(255, 255, 255, 0.1) 0 14%, transparent 14% 100%); }
.ah-video__play { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; width: 74px; height: 74px; margin: -37px 0 0 -37px; border: 3px solid var(--ah-950); border-radius: 50%; background: var(--ah-blue); box-shadow: 4px 4px 0 var(--ah-paper); }
.ah-video__play::after { content: ""; margin-left: 6px; border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent var(--ah-ink); }
button.ah-video__play { padding: 0; cursor: pointer; transition: transform 0.22s var(--ease-back), box-shadow 0.22s var(--ease-back); }
button.ah-video__play:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ah-paper); }
.ah-video__panel { display: grid; grid-template-rows: auto auto 1fr; justify-items: center; gap: 14px; padding: 8px 0; border-radius: 12px; background: linear-gradient(180deg, #2d3647, #1a202c); border: 2px solid var(--ah-950); }
.ah-video__knob { width: 44px; height: 44px; border: 2px solid var(--ah-950); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f2f5f9, #9aa7b8 55%, #5d6a7d); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6); position: relative; }
.ah-video__knob::after { content: ""; position: absolute; left: 50%; top: 4px; width: 3px; height: 14px; margin-left: -1.5px; border-radius: 2px; background: var(--ah-950); }
.ah-video__knob + .ah-video__knob::after { rotate: 60deg; transform-origin: 50% 18px; }
.ah-video__grille { align-self: stretch; width: 56px; border-radius: 8px; background: repeating-linear-gradient(180deg, var(--ah-950) 0 3px, #3a4456 3px 7px); }
.ah-video__feet { display: flex; justify-content: space-between; width: 70%; margin: 0 auto; }
.ah-video__feet::before, .ah-video__feet::after { content: ""; width: 54px; height: 14px; border: 2px solid var(--ah-950); border-top: 0; border-radius: 0 0 8px 8px; background: #2a190e; }
/* click-to-load: a title card and button.ah-video__play[data-embed] (+ data-title). Nothing third-party loads
   until the tap; theme.js swaps in the iframe (put autoplay in the data-embed URL) and moves focus to it.
   Add <noscript> holding the same iframe for no-JS visitors. */
.ah-video__screen > iframe, .ah-video__screen > noscript > iframe { position: absolute; inset: 0; z-index: 5; display: block; width: 100%; height: 100%; border: 0; }
.ah-video__card {
  position: absolute; inset: 0; display: grid; align-content: space-between; justify-items: start; padding: clamp(14px, 3vw, 30px);
  background: radial-gradient(circle, rgba(47, 155, 255, 0.3) 1.3px, transparent 1.7px) 0 0 / 9px 9px, radial-gradient(90% 80% at 30% 20%, #16305a, #0a1530 60%, #050a16);
}
.ah-video__logo { width: clamp(44px, 8vw, 78px); height: auto; filter: drop-shadow(2px 2px 0 rgba(3, 6, 13, 0.8)); }
.ah-video__title { max-width: 15em; color: var(--ah-paper); font: 900 clamp(1.05rem, 0.7rem + 1.7vw, 2.1rem)/1.02 var(--ah-display); letter-spacing: 0.02em; text-transform: uppercase; text-shadow: 0.05em 0.05em 0 var(--ah-950); }
.ah-video__card ~ .ah-video__play { z-index: 4; }
.ah-video__card ~ .ah-video__play:focus-visible { outline-offset: 5px; }
@media (max-width: 640px) {
  .ah-video__title { max-width: 60%; font-size: clamp(0.98rem, 0.62rem + 1.6vw, 1.25rem); }
  .ah-video__card ~ .ah-video__play { left: auto; right: 10%; margin: -30px 0 0; }
}
@media (max-width: 640px) {
  .ah-video__set { grid-template-columns: minmax(0, 1fr); padding: 12px; border-radius: 16px; }
  .ah-video__panel { grid-template-rows: none; grid-template-columns: auto auto 1fr; align-items: center; padding: 6px 10px; }
  .ah-video__knob { width: 30px; height: 30px; }
  .ah-video__knob::after { height: 9px; top: 3px; }
  .ah-video__knob + .ah-video__knob::after { transform-origin: 50% 12px; }
  .ah-video__grille { width: auto; height: 22px; align-self: center; justify-self: stretch; background: repeating-linear-gradient(90deg, var(--ah-950) 0 3px, #3a4456 3px 7px); }
  .ah-video__play { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
}

/* --------------------------------------------------------------------------
   18. The real-posts wall: screenshots clipped to the pegboard + lightbox
   Real, unedited posts only. Never crop the words at full size.
   -------------------------------------------------------------------------- */
.ah-wall {
  --band-bg: #0d1527;
  background-color: #0d1527;
  background-image: var(--ah-grain), radial-gradient(circle, rgba(173, 229, 255, 0.07) 3.6px, transparent 4.2px), radial-gradient(circle, #03060d 3px, transparent 3.5px);
  background-size: 160px 160px, 28px 28px, 28px 28px;
  background-position: 0 0, 0 1.5px, 0 0;
  background-repeat: repeat;
  border-top: 2px solid var(--ah-950);
  box-shadow: inset 0 10px 0 #5d6a7d, inset 0 12px 0 var(--ah-950);
}
.ah-wall .ah-wrap { position: relative; z-index: 2; }
.ah-wall__head { max-width: 760px; margin: 0 auto clamp(36px, 5vw, 60px); text-align: center; }
.ah-wall__head .ah-h2 { margin-bottom: 18px; }
.ah-wall__intro { color: var(--ah-fog); font-size: 1.1rem; }
.ah-wall__intro + .ah-wall__intro { margin-top: 6px; }
.ah-wall__head, .ah-wall__foot { padding: 0; }
.ah-peg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 36px); align-items: start; max-width: 1120px; margin: 0 auto; }
.ah-peg--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; }
.ah-peg__col { display: grid; gap: clamp(40px, 4vw, 54px); }
.ah-peg__col:nth-child(2) { margin-top: 48px; }
.ah-peg__col:nth-child(3) { margin-top: 18px; }
.ah-post { --r: -1.4deg; position: relative; margin: 0; padding-top: 18px; }
.ah-post:nth-child(2n) { --r: 1.6deg; }
.ah-post:nth-child(3n) { --r: -0.6deg; }
.ah-post__btn {
  position: relative; display: block; width: 100%; padding: 9px 9px 11px;
  border: 2px solid var(--ah-950); border-radius: 4px; background: #fbfaf6; cursor: zoom-in;
  box-shadow: 0 16px 24px -10px rgba(0, 0, 0, 0.75), 6px 6px 0 rgba(0, 0, 0, 0.55);
  rotate: var(--r); transform-origin: 50% 0; transition: rotate 0.4s var(--ease-back), translate 0.4s var(--ease-back), box-shadow 0.3s;
  -webkit-tap-highlight-color: transparent;
}
.ah-post__btn img { width: 100%; border: 1.5px solid rgba(11, 20, 36, 0.2); border-radius: 2px; }
.ah-post__btn:hover, .ah-post__btn:focus-visible { rotate: 0deg; translate: 0 -4px; box-shadow: 0 22px 30px -10px rgba(0, 0, 0, 0.8), 6px 6px 0 rgba(0, 0, 0, 0.55), 0 0 0 4px rgba(173, 229, 255, 0.35); }
.ah-post__btn:focus-visible { outline: 3px solid var(--ah-sky); outline-offset: 4px; }
/* binder clip on a peg hook */
.ah-post__clip { position: absolute; left: 50%; top: -24px; z-index: 2; width: 50px; height: 30px; margin-left: -25px; }
.ah-post__clip::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; border: 2px solid var(--ah-950); border-radius: 3px 3px 2px 2px; background: linear-gradient(180deg, #2a3142, #11151d); clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%); }
.ah-post__clip::after { content: ""; position: absolute; left: 9px; right: 9px; top: -6px; height: 20px; border: 3px solid #c9d1dc; border-bottom: 0; border-radius: 10px 10px 0 0; box-shadow: 0 0 0 1px var(--ah-950); }
/* taped variant: masking tape instead of the clip */
.ah-post--tape .ah-post__clip { display: none; }
.ah-post--tape .ah-post__btn::before { content: ""; position: absolute; z-index: 3; left: 50%; top: -14px; width: 92px; height: 26px; margin-left: -46px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 3px, transparent 3px 7px), rgba(226, 208, 168, 0.9); clip-path: polygon(3% 0, 97% 6%, 100% 28%, 96% 52%, 100% 78%, 97% 100%, 2% 94%, 0 72%, 4% 48%, 0 22%); rotate: -4deg; }
/* label-maker tape: the honest tag on every real post */
.ah-post__tag {
  position: absolute; left: 14px; bottom: -13px; z-index: 2;
  padding: 4px 10px 3px; border: 1.5px solid var(--ah-950); border-radius: 3px;
  background: var(--ah-blue); color: var(--ah-ink);
  font: 800 0.72rem/1.2 var(--ah-mono); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 0 rgba(3, 6, 13, 0.18), 2px 2px 0 var(--ah-950);
  rotate: -2.5deg;
}
.ah-post:nth-child(2n) .ah-post__tag { left: auto; right: 14px; rotate: 2deg; }
.ah-swipe { display: none; }
.ah-wall__foot { max-width: 46em; margin: clamp(40px, 5vw, 64px) auto 0; text-align: center; color: var(--ah-fog); font-size: 1.05rem; }
.ah-wall__foot strong { color: var(--ah-paper); }
.ah-wall__foot p + p { margin-top: 4px; color: var(--ah-paper); font-weight: 700; }
@media (max-width: 760px) {
  .ah-peg { display: flex; gap: 18px; align-items: flex-start; margin: 0 calc(var(--gut) * -1); padding: 26px var(--gut) 24px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); scrollbar-width: none; }
  .ah-peg::-webkit-scrollbar { display: none; }
  .ah-peg__col { display: contents; }
  .ah-post { flex: 0 0 82%; scroll-snap-align: center; }
  .ah-peg { align-items: flex-start; }
  .ah-post__btn img { max-height: 340px; object-fit: cover; object-position: top; }
  .ah-swipe { display: block; margin: 4px auto 0; text-align: center; rotate: -2deg; width: max-content; }
  .ah-swipe::after { content: " \2192"; }
}

/* lightbox (theme.js builds the dialog for any button[data-shot]) */
.ah-lb { width: min(96vw, 880px); max-height: 94vh; padding: 0; border: 0; background: transparent; color: var(--ah-ink); overflow: visible; }
.ah-lb::backdrop { background: rgba(3, 6, 13, 0.86); }
.ah-lb__panel { position: relative; max-height: 94vh; overflow: auto; padding: 14px 14px 16px; border: 2px solid var(--ah-950); border-radius: 8px; background: #fbfaf6; box-shadow: 8px 8px 0 var(--ah-blue); }
.ah-lb__img { width: 100%; height: auto; border: 1.5px solid rgba(11, 20, 36, 0.2); }
.ah-lb__cap { margin-top: 10px; font-weight: 700; color: var(--ah-ink); }
.ah-lb__x { position: absolute; top: -16px; right: -10px; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; margin: 0; padding: 0; border: 2px solid var(--ah-950); border-radius: 50%; background: var(--ah-cream); box-shadow: 3px 3px 0 var(--ah-950); cursor: pointer; }
.ah-lb__x svg { width: 14px; height: 14px; stroke: var(--ah-ink); stroke-width: 2.4; stroke-linecap: round; }
.ah-lb__x:focus-visible { outline-color: var(--ah-ink); }

/* --------------------------------------------------------------------------
   19. People: prints clipped to a cord (team photos, real people only)
   -------------------------------------------------------------------------- */
.ah-crew { position: relative; }
.ah-crew__cord { position: absolute; left: -2%; right: -2%; top: 6px; height: 40px; border-top: 2.5px solid #e8dcc0; border-radius: 50% / 100% 100% 0 0; filter: drop-shadow(0 1px 0 var(--ah-950)); display: none; }
.ah-crew__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; }
@media (min-width: 620px) { .ah-crew__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 24px; } }
@media (min-width: 1040px) { .ah-crew__list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; } .ah-crew__cord { display: block; } }
.ah-print {
  --r: -1.5deg; position: relative; display: grid; align-content: start; padding: 9px 9px 14px;
  border: 2px solid var(--ah-950); border-radius: 3px; background: #fbf7ec; color: var(--ah-ink);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.6); rotate: var(--r); transform-origin: 50% 0;
  transition: rotate 0.45s var(--ease-back), translate 0.45s var(--ease-back);
}
.ah-print:nth-child(2) { --r: 1.2deg; } .ah-print:nth-child(3) { --r: -0.6deg; } .ah-print:nth-child(4) { --r: 1.6deg; } .ah-print:nth-child(5) { --r: -1deg; } .ah-print:nth-child(6) { --r: 0.8deg; }
@media (min-width: 1040px) { .ah-print:nth-child(even) { margin-top: 26px; } }
.ah-print:hover { rotate: 0deg; translate: 0 -4px; }
.ah-print img, .ah-pet__face { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1.5px solid rgba(11, 20, 36, 0.3); }
.ah-print h3 { margin-top: 10px; font: 900 1.3rem/1 var(--ah-display); letter-spacing: 0.03em; text-transform: uppercase; color: var(--ah-ink); }
.ah-print__role { margin-top: 4px; color: var(--ah-ink-2); font-size: 0.9rem; font-weight: 600; line-height: 1.3; }
.ah-print__clip { position: absolute; left: 50%; top: -15px; z-index: 2; width: 22px; height: 26px; margin-left: -11px; border: 2px solid var(--ah-950); border-radius: 4px 4px 2px 2px; background: linear-gradient(90deg, #9c7420, #ffe3a1 45%, #c9962e); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5); }
.ah-print__clip::after { content: ""; position: absolute; left: 50%; top: 4px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--ah-950); }
.ah-print--more { background: var(--ah-blue); border-color: var(--ah-950); }
.ah-print__plus { display: grid; place-items: center; aspect-ratio: 1; border: 2px solid var(--ah-950); background: repeating-linear-gradient(135deg, #0b1424 0 10px, #101d36 10px 20px); color: var(--ah-sky); font: 900 clamp(3rem, 8vw, 4.6rem)/1 var(--ah-display); text-shadow: 0.05em 0.05em 0 var(--ah-blue-deep); }
.ah-print--more h3 { color: var(--ah-ink); font-size: 1.15rem; line-height: 1.05; }
.ah-print--more .ah-print__role { color: var(--ah-ink); font-weight: 700; }
/* Sammy: tap to pet (theme.js) */
.ah-pet { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ah-pet__face { display: block; overflow: hidden; }
.ah-pet__face img { border: 0; transform: scale(1.18); transform-origin: 50% 30%; }
.ah-pet:focus-visible { outline-color: var(--ah-ink); outline-offset: 4px; }
.ah-pet__note { position: absolute; right: -6px; top: -36px; font-size: 1rem; rotate: 8deg; }
.ah-pet__hearts { position: absolute; inset: 0; pointer-events: none; }
.ah-heart { position: absolute; left: 50%; top: 30%; width: 24px; height: 24px; margin-left: -12px; fill: #ff8fb8; stroke: var(--ah-950); stroke-width: 1.8; stroke-linejoin: round; opacity: 0; }
.ah-pet__badge { position: absolute; top: -10px; right: -10px; width: 30px; height: 30px; fill: #ff8fb8; stroke: var(--ah-950); stroke-width: 1.8; rotate: 14deg; filter: drop-shadow(2px 2px 0 var(--ah-950)); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .ah-heart { animation: ah-heart 1s var(--ease-out) both; }
  .ah-heart:nth-child(1) { --dx: -36px; --hr: -18deg; } .ah-heart:nth-child(2) { --dx: 4px; --hr: 6deg; animation-delay: 0.08s; } .ah-heart:nth-child(3) { --dx: 38px; --hr: 20deg; animation-delay: 0.15s; }
  .ah-pet__badge { animation: ah-badge 0.45s var(--ease-back) both; }
}
@keyframes ah-heart { 0% { opacity: 0; transform: translate(0, 10px) scale(0.3); } 22%, 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 0), -84px) scale(1.1) rotate(var(--hr, 0deg)); } }
@keyframes ah-badge { from { transform: scale(0.2) rotate(-40deg); } }

/* --------------------------------------------------------------------------
   20. The masterpiece: a gold frame with a plaque (the 💎 is a Jeff KEEP)
   -------------------------------------------------------------------------- */
.ah-frame { position: relative; width: min(100%, 420px); margin: 30px auto 0; }
.ah-frame__mould {
  position: relative; padding: clamp(20px, 6%, 28px);
  border: 2px solid var(--ah-950); border-radius: 4px;
  background:
    radial-gradient(circle, #fff1bf 0 1.6px, #9c7420 2px, transparent 2.6px) 0 0 / 10px 10px,
    linear-gradient(135deg, #7a560f 0%, #f6d77a 18%, #b8861f 36%, #fbe7a1 52%, #9c7420 72%, #e7bf52 100%);
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.6), inset 0 0 0 4px #c9962e, inset 0 0 0 6px #5c420c, inset 0 0 0 10px #f2cf6b;
}
.ah-frame__mould::before { content: ""; position: absolute; inset: 9px; border: 2px solid #5c420c; border-radius: 2px; pointer-events: none; background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent 40%); }
.ah-frame__corner { position: absolute; z-index: 2; width: 28px; height: 28px; border: 2px solid var(--ah-950); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff4cf, #e7bf52 45%, #9c7420); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45); }
.ah-frame__corner::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 2px solid #7a560f; }
.ah-frame__corner--tl { left: -8px; top: -8px; } .ah-frame__corner--tr { right: -8px; top: -8px; } .ah-frame__corner--bl { left: -8px; bottom: -8px; } .ah-frame__corner--br { right: -8px; bottom: -8px; }
.ah-frame__mat {
  position: relative; display: grid; place-items: center; aspect-ratio: 4 / 4.6;
  border: 2px solid var(--ah-950);
  background: radial-gradient(70% 60% at 50% 40%, #22386a, #10203f 70%, #0a162d), var(--ah-grain);
  box-shadow: inset 0 0 0 10px #0d1a33, inset 0 0 0 12px rgba(173, 229, 255, 0.25), inset 0 14px 22px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.ah-frame__gem { font-size: clamp(5.4rem, 22vw, 9.5rem); line-height: 1; filter: drop-shadow(6px 8px 0 rgba(0, 0, 0, 0.55)); transition: scale 0.4s var(--ease-back), rotate 0.4s var(--ease-back), filter 0.35s ease; }
.ah-frame:hover .ah-frame__gem { scale: 1.06; rotate: -4deg; }
.ah-frame__glint { position: absolute; left: 60%; top: 26%; width: 34px; height: 34px; fill: #fff; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9)); scale: 1; pointer-events: none; transition: opacity 0.3s; }
.ah-frame__glint--2 { left: 25%; top: 36%; width: 22px; height: 22px; }
.ah-frame__glint--3 { left: 46%; top: auto; bottom: 20%; width: 18px; height: 18px; }
.ah-plaque {
  position: relative; display: grid; justify-items: center; gap: 1px; width: max-content; max-width: 100%; margin: 22px auto 0; padding: 11px 32px 10px;
  border: 2px solid var(--ah-950); border-radius: 4px;
  background: linear-gradient(180deg, #fff1bf, #e2b44a 42%, #c9962e 70%, #e7bf52);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.6), inset 0 0 0 2px rgba(255, 255, 255, 0.45), inset 0 0 0 4px rgba(122, 86, 15, 0.45);
  color: #2b1f05; text-align: center;
  font: 800 clamp(0.66rem, 0.55rem + 0.4vw, 0.78rem)/1.35 var(--ah-body); letter-spacing: 0.12em; text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 245, 210, 0.75);
}
/* the plaque sizes to its words (max-content) and only wraps, balanced, when its column is too narrow:
   a long title never runs past the plaque or onto the rivets */
.ah-plaque__t { max-width: 100%; font: 900 clamp(1rem, 0.85rem + 0.6vw, 1.3rem)/1.1 var(--ah-display); letter-spacing: 0.14em; text-wrap: balance; }
.ah-plaque__sep { display: none; }
.ah-plaque__s { max-width: 100%; text-wrap: balance; }
.ah-plaque::before, .ah-plaque::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff4cf, #9c7420); box-shadow: 0 0 0 1.5px #5c420c; }
.ah-plaque::before { left: 11px; } .ah-plaque::after { right: 11px; }
@media (max-width: 380px) { .ah-plaque { padding-inline: 24px; letter-spacing: 0.08em; } .ah-plaque__s { white-space: normal; } }
@media (prefers-reduced-motion: no-preference) {
  html.motion .ah-frame:not(.is-play) .ah-frame__glint { scale: 0; rotate: -90deg; }
  .ah-frame__glint { transition: scale 0.6s var(--ease-back) 0.5s, rotate 0.6s var(--ease-back) 0.5s, opacity 0.3s; }
  .ah-frame:hover .ah-frame__glint { animation: ah-glint 0.7s var(--ease-back); }
}

/* --------------------------------------------------------------------------
   21. The jeweler's lamp (from Day & Night, re-dressed for the shop after
   close: the one warm light in a dark shop). A clamp lamp on a shelf, a beam
   that lands on whatever sits on the bench, a switch on the cord, and a
   .ah-lampwall layer that lights the bricks inside the beam (theme.js).
   Max one per page. Markup: kit.html, "The jeweler's lamp".
   -------------------------------------------------------------------------- */
.ah-bench { --lamp: 0deg; position: relative; width: min(100%, 540px); margin-inline: auto; container-type: inline-size; padding-bottom: 2cqi; }
/* the object on the bench sits under the beam */
.ah-bench > .ah-frame, .ah-bench__obj { position: relative; z-index: 2; width: 60cqi; margin: 30cqi 0 0 19cqi; }
.ah-bench .ah-frame__mould { padding: 5cqi; }
.ah-bench .ah-frame__gem { font-size: 21cqi; }
.ah-bench .ah-frame__glint { width: 7cqi; height: 7cqi; }
.ah-bench .ah-frame__glint--2 { width: 4.6cqi; height: 4.6cqi; }
.ah-bench .ah-frame__glint--3 { width: 3.8cqi; height: 3.8cqi; }
.ah-bench .ah-plaque { margin-top: 6cqi; max-width: 120%; }
.ah-lamp { position: absolute; left: 0; top: 0; z-index: 3; width: 100%; height: auto; overflow: visible; pointer-events: none; }
.ah-lamp__head { transform-box: view-box; transform-origin: 246px 28px; rotate: var(--lamp, 0deg); transition: rotate 0.45s var(--ease-out); }
.ah-lamp__beam { transition: opacity 0.35s ease; }
.lp-shelf { fill: #5a3b22; stroke: var(--ah-950); stroke-width: 3; }
.lp-shelf-grain { fill: none; stroke: #3b2414; stroke-width: 1.6; stroke-linecap: round; }
.lp-bracket { fill: none; stroke: var(--ah-950); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.lp-bracket-hi { fill: none; stroke: #46526e; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lp-clamp { fill: var(--ah-steel-c); stroke: var(--ah-950); stroke-width: 3; stroke-linejoin: round; }
.lp-screw { fill: none; stroke: var(--ah-950); stroke-width: 4; stroke-linecap: round; }
.lp-knob { fill: var(--ah-brass); stroke: var(--ah-950); stroke-width: 2.6; }
.lp-cord { fill: none; stroke: var(--ah-950); stroke-width: 4.5; stroke-linecap: round; }
.lp-cord-hi { fill: none; stroke: #2a3142; stroke-width: 1.6; stroke-linecap: round; }
.lp-arm { fill: none; stroke: var(--ah-950); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.lp-arm-hi { fill: none; stroke: var(--ah-steel-b); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.lp-spring { fill: none; stroke: var(--ah-steel-a); stroke-width: 2.4; stroke-linecap: round; }
.lp-joint { fill: var(--ah-steel-a); stroke: var(--ah-950); stroke-width: 3; }
.lp-nut { fill: var(--ah-brass); stroke: var(--ah-950); stroke-width: 2.4; }
.lp-shade { stroke: var(--ah-950); stroke-width: 3.5; stroke-linejoin: round; }
.lp-shade-hi { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 4; stroke-linecap: round; }
.lp-vent { fill: none; stroke: rgba(3, 6, 13, 0.55); stroke-width: 2.5; stroke-linecap: round; }
.lp-rim { fill: #fff1c4; stroke: var(--ah-950); stroke-width: 3; }
.lp-bulb { fill: #fffaf0; transition: fill 0.3s; }
.lp-halo { fill: none; stroke: #ffd98a; stroke-width: 7; opacity: 0.4; transition: opacity 0.3s; }
/* the switch hangs on the cord, beside the frame */
.ah-lamp__switch {
  position: absolute; z-index: 5; right: 0; top: 17.5cqi; display: inline-flex; align-items: center; gap: 9px;
  min-width: 70px; height: 48px; padding: 0 14px 0 12px;
  border: 2.5px solid var(--ah-paper); border-radius: 12px;
  background: linear-gradient(180deg, #2d3647, #1a202c 70%); color: var(--ah-paper); box-shadow: 3px 3px 0 var(--ah-gold);
  font: 900 1.02rem/1 var(--ah-display); letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: translate 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.ah-lamp__switch:hover { translate: -2px -2px; box-shadow: 5px 5px 0 var(--ah-gold); }
.ah-lamp__switch:active { translate: 2px 2px; box-shadow: 1px 1px 0 var(--ah-gold); }
.ah-lamp__led { flex: none; width: 11px; height: 11px; border-radius: 50%; background: #ffd36b; box-shadow: 0 0 0 2px var(--ah-950), 0 0 9px 2px rgba(255, 201, 90, 0.85); transition: background-color 0.25s, box-shadow 0.25s; }
/* the bricks inside the beam (theme.js sets the cone; hidden without JS) */
.ah-lampwall {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background-color: #3b332d; background-image: var(--ah-brick-lit); background-size: 120px 44px;
  -webkit-mask-image:
    conic-gradient(from var(--lw-from, 150deg) at var(--lw-x, 50%) var(--lw-y, 0px), transparent 0deg, #000 9deg, #000 calc(var(--lw-span, 60deg) - 9deg), transparent var(--lw-span, 60deg)),
    radial-gradient(circle at var(--lw-x, 50%) var(--lw-y, 0px), rgba(0, 0, 0, 0.95) 0, rgba(0, 0, 0, 0.8) calc(var(--lw-len, 600px) * 0.35), rgba(0, 0, 0, 0.3) calc(var(--lw-len, 600px) * 0.7), transparent var(--lw-len, 600px));
  -webkit-mask-composite: source-in;
  mask-image:
    conic-gradient(from var(--lw-from, 150deg) at var(--lw-x, 50%) var(--lw-y, 0px), transparent 0deg, #000 9deg, #000 calc(var(--lw-span, 60deg) - 9deg), transparent var(--lw-span, 60deg)),
    radial-gradient(circle at var(--lw-x, 50%) var(--lw-y, 0px), rgba(0, 0, 0, 0.95) 0, rgba(0, 0, 0, 0.8) calc(var(--lw-len, 600px) * 0.35), rgba(0, 0, 0, 0.3) calc(var(--lw-len, 600px) * 0.7), transparent var(--lw-len, 600px));
  mask-composite: intersect;
  transition: opacity 0.4s ease;
}
.ah-lampwall.is-ready { opacity: 1; }
.ah-lampwall ~ .ah-wrap { position: relative; z-index: 1; }
.ah-lampwall.is-ready.is-off { opacity: 0; }
/* switched off: the beam goes, the bulb goes grey, whatever sits on the bench (the frame or any
   .ah-bench__obj) sinks into the dark */
.ah-bench .ah-frame, .ah-bench .ah-bench__obj { transition: filter 0.4s ease; }
.ah-bench.is-off .ah-lamp__beam, .ah-bench.is-off .lp-halo { opacity: 0; }
.ah-bench.is-off .lp-bulb { fill: #6b7789; }
.ah-bench.is-off .lp-rim { fill: #9aa7b8; }
.ah-bench.is-off .ah-frame, .ah-bench.is-off .ah-bench__obj { filter: brightness(0.6) saturate(0.7); }
.ah-bench.is-off .ah-frame__gem { filter: drop-shadow(6px 8px 0 rgba(0, 0, 0, 0.55)) saturate(0.4) brightness(0.7); }
.ah-bench.is-off .ah-frame__glint { opacity: 0; }
.ah-bench.is-off .ah-lamp__led { background: #3a2a10; box-shadow: 0 0 0 2px var(--ah-950); }
.ah-bench.is-off .ah-lamp__switch { box-shadow: 3px 3px 0 var(--ah-steel-c); }
.ah-bench.is-off .ah-lamp__switch:hover { box-shadow: 5px 5px 0 var(--ah-steel-c); }
@media (prefers-reduced-motion: no-preference) {
  .ah-bench.is-glint .ah-frame__glint { animation: ah-glint 0.9s var(--ease-back) both; }
  .ah-bench.is-glint .ah-frame__glint--2 { animation-delay: 0.15s; }
  .ah-bench.is-glint .ah-frame__glint--3 { animation-delay: 0.3s; }
  .ah-bench.is-glint .ah-frame__gem { animation: ah-gem-pop 0.6s var(--ease-back); }
  html.motion .ah-bench:not(.is-lit) .ah-lamp__beam { opacity: 0; }
  html.motion .ah-bench.is-lit:not(.is-off) .ah-lamp__beam { animation: ah-ignite2 1s 0.15s both; }
}
@keyframes ah-gem-pop { 40% { transform: scale(1.12) rotate(-4deg); } }

/* --------------------------------------------------------------------------
   22. Notes, pop cards and the fine print
   -------------------------------------------------------------------------- */
/* a taped honesty note (one or two sentences) */
.ah-callout { position: relative; max-width: 560px; margin: 0 auto; padding: 24px 24px 20px; border: 2px solid var(--ah-950); border-radius: 4px; background-color: #fff7d6; background-image: var(--ah-fiber); color: var(--ah-ink); box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.55); rotate: var(--tilt, -0.8deg); }
.ah-callout::before { content: ""; position: absolute; left: 50%; top: -13px; width: 98px; height: 26px; margin-left: -49px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 3px, transparent 3px 7px), rgba(226, 208, 168, 0.9); clip-path: polygon(3% 0, 97% 6%, 100% 28%, 96% 52%, 100% 78%, 97% 100%, 2% 94%, 0 72%, 4% 48%, 0 22%); rotate: 3deg; }
.ah-callout p { color: var(--ah-ink); font-weight: 600; font-size: 1.05rem; line-height: 1.5; }
.ah-callout p + p { margin-top: 6px; }
.ah-callout strong { font-weight: 800; }
/* the confirm card before a conversion action (HANDOFF rule: never straight to the calendar) */
.ah-pop { position: relative; width: min(100%, 290px); padding: 18px 18px 16px; border: 2px solid var(--ah-950); border-radius: 10px; background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink); box-shadow: 6px 6px 0 var(--ah-blue); text-align: left; }
.ah-pop--taken { box-shadow: 6px 6px 0 var(--ah-neon-pink); }
.ah-pop__x { position: absolute; top: -14px; right: -12px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 2px solid var(--ah-950); border-radius: 50%; background: var(--ah-cream); box-shadow: 2px 2px 0 var(--ah-950); cursor: pointer; }
.ah-pop__x svg { width: 13px; height: 13px; stroke: var(--ah-ink); stroke-width: 2.4; stroke-linecap: round; }
.ah-pop__status { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--ah-blue-ink); font: 800 0.72rem/1.2 var(--ah-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.ah-pop__status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 2px var(--ah-950); }
.ah-pop--taken .ah-pop__status { color: var(--ah-red-ink); }
.ah-pop--taken .ah-pop__status::before { background: var(--ah-neon-pink); }
/* an icon in the status line (a lock, a check) replaces the dot */
.ah-pop__status svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ah-pop__status:has(svg)::before { display: none; }
.ah-pop__name { font: 900 1.5rem/1 var(--ah-display); letter-spacing: 0.03em; text-transform: uppercase; }
.ah-pop__note { margin: 8px 0 14px; color: var(--ah-ink-2); font-size: 0.95rem; line-height: 1.45; }
.ah-pop .btn { width: 100%; --btn-shadow: var(--ah-ink); min-height: 48px; font-size: 1rem; white-space: normal; }
.ah-pop .btn + .btn { margin-top: 12px; }
.ah-pop .btn-ghost.btn-on-paper { --btn-shadow: transparent; } /* a ghost keeps its resting look in the card */
.ah-pop .btn-ghost.btn-on-paper:hover { --btn-shadow: var(--ah-ink); }
/* the floating card (theme.js AH.pop / [data-pop]): sits on its board, clamped inside it, pops in */
.ah-pop--float { position: absolute; z-index: 12; width: min(290px, calc(100% - 16px)); }
@media (prefers-reduced-motion: no-preference) { .ah-pop--float { animation: ah-pop 0.4s var(--ease-back) both; } }
[data-pop-host] { position: relative; }
/* the fine print: a cream sheet for long reading (legal pages) */
.ah-sheet { position: relative; max-width: 880px; margin: 0 auto; padding: clamp(26px, 5vw, 60px) clamp(18px, 5vw, 64px); border: 2px solid var(--ah-950); border-radius: 6px; background-color: #fbf7ec; background-image: var(--ah-fiber); color: var(--ah-ink); box-shadow: 8px 8px 0 var(--ah-blue); }
.ah-prose { color: var(--ah-ink-2); font-size: 1.04rem; line-height: 1.7; }
.ah-prose > * + * { margin-top: 1em; }
.ah-prose h2 { margin-top: 1.8em; color: var(--ah-ink); font: 900 clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem)/1.05 var(--ah-display); letter-spacing: 0.02em; text-transform: uppercase; }
.ah-prose h3 { margin-top: 1.5em; color: var(--ah-ink); font-size: 1.15rem; line-height: 1.3; }
.ah-prose h2:first-child, .ah-prose h3:first-child { margin-top: 0; }
.ah-prose strong { color: var(--ah-ink); }
.ah-prose a { color: var(--ah-blue-ink); font-weight: 700; text-underline-offset: 3px; }
.ah-prose ul, .ah-prose ol { padding-left: 1.4em; }
.ah-prose ul { list-style: square; }
.ah-prose ol { list-style: decimal; }
.ah-prose li + li { margin-top: 0.35em; }
.ah-prose li::marker { color: var(--ah-blue-ink); }
.ah-prose hr { border: 0; border-top: 2px dashed rgba(11, 20, 36, 0.25); margin: 2em 0; }
.ah-prose table { width: 100%; border-collapse: collapse; font-size: 0.95rem; display: block; overflow-x: auto; }
.ah-prose th, .ah-prose td { padding: 10px 12px; border: 1.5px solid rgba(11, 20, 36, 0.3); text-align: left; vertical-align: top; }
.ah-prose th { background: var(--ah-ink); color: var(--ah-paper); }
.ah-prose__date { display: inline-block; padding: 4px 10px 3px; border: 1.5px solid var(--ah-ink); border-radius: 3px; background: var(--ah-cream); font: 700 0.78rem/1.2 var(--ah-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ah-ink); }
/* prose on the night stage */
.ah-prose--night { color: var(--ah-fog); }
.ah-prose--night h2, .ah-prose--night h3, .ah-prose--night strong { color: var(--ah-paper); }
.ah-prose--night a { color: var(--ah-sky); }
.ah-prose--night li::marker { color: var(--ah-blue); }

/* --------------------------------------------------------------------------
   23. The booking band: the sign hanging on the front door
   (homepage: Book Your Call opens the calendar; inner pages: index.html#book)
   -------------------------------------------------------------------------- */
.ah-book { --deco-at: 100% 100%; --deco-size: 40% 55%; --band-bg: var(--ah-800); background-color: var(--ah-800); }
.ah-book__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: center; }
@media (min-width: 980px) { .ah-book__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); } }
.ah-book__copy .ah-h2 { margin-bottom: 22px; }
.ah-book__copy p { max-width: 30em; color: var(--ah-fog); font-size: 1.15rem; }
.ah-book__copy p + p { margin-top: 12px; }
.ah-door { position: relative; width: min(100%, 470px); margin-inline: auto; padding: 16px 16px 16px 26px; border: 2px solid var(--ah-950); border-radius: 8px; background: linear-gradient(90deg, #5d6a7d, #b9c3d0 30%, #8996a8 70%, #cfd7e1); box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.55); }
.ah-door__frame { position: absolute; inset: 0; pointer-events: none; }
.ah-door__bar { position: absolute; z-index: 3; right: 30px; top: 30%; width: 14px; height: 40%; border: 2px solid var(--ah-950); border-radius: 8px; background: linear-gradient(90deg, #9aa7b8, #f2f5f9 45%, #6f7c90); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.45); }
.ah-door__hinge { position: absolute; left: 6px; width: 10px; height: 34px; border: 2px solid var(--ah-950); border-radius: 3px; background: linear-gradient(90deg, #6f7c90, #cfd7e1); }
.ah-door__hinge--a { top: 12%; } .ah-door__hinge--b { bottom: 12%; }
.ah-door__glass {
  position: relative; padding: 70px clamp(16px, 6%, 40px) 40px;
  border: 2px solid var(--ah-950); border-radius: 4px;
  background: linear-gradient(115deg, transparent 0 18%, rgba(200, 230, 255, 0.09) 18% 30%, transparent 30% 34%, rgba(200, 230, 255, 0.06) 34% 37%, transparent 37%), radial-gradient(90% 60% at 50% 100%, rgba(255, 63, 134, 0.14), transparent 70%), #0a1324;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.12);
}
.ah-door__cup { position: absolute; left: 50%; top: 14px; width: 30px; height: 18px; margin-left: -15px; border: 2px solid rgba(173, 229, 255, 0.6); border-radius: 50% 50% 4px 4px; background: rgba(173, 229, 255, 0.18); }
.ah-door__strings { position: absolute; left: 22%; right: 22%; top: 28px; width: 56%; height: 50px; overflow: visible; }
.ah-door__strings path { fill: none; stroke: #e8dcc0; stroke-width: 2; vector-effect: non-scaling-stroke; }
.ah-card {
  position: relative; display: grid; justify-items: center; gap: 14px; padding: 26px clamp(16px, 5%, 30px) 24px;
  border: 2px solid var(--ah-950); border-radius: 10px;
  background: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink); text-align: center;
  box-shadow: 6px 6px 0 var(--ah-neon-pink); rotate: 1.2deg; transform-origin: 50% -40px;
}
.ah-card::before { content: ""; position: absolute; inset: 7px; border: 2px solid var(--ah-ink); border-radius: 6px; pointer-events: none; }
.ah-card__hole { position: absolute; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: #0a1324; box-shadow: 0 0 0 2px var(--ah-950); }
.ah-card__hole--l { left: 22%; } .ah-card__hole--r { right: 22%; }
.ah-card__h { font: 900 clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem)/1 var(--ah-display); text-transform: uppercase; letter-spacing: 0.02em; color: var(--ah-ink); }
.ah-card__p { max-width: 22em; color: var(--ah-ink-2); font-weight: 600; font-size: 1.02rem; line-height: 1.45; }
.ah-card__btn { --btn-shadow: var(--ah-ink); margin-top: 4px; }
.ah-clock { width: clamp(120px, 34vw, 150px); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ah-clock svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(4px 4px 0 rgba(11, 20, 36, 0.85)); }
.ah-clock .c-rim { fill: var(--ah-blue); stroke: var(--ah-950); stroke-width: 3; }
.ah-clock .c-face { fill: #fffdf6; stroke: var(--ah-950); stroke-width: 2.4; }
.ah-clock .c-ticks path { stroke: var(--ah-ink); stroke-width: 3; stroke-linecap: round; }
.ah-clock .c-ticks path + path { stroke-width: 1.8; }
.ah-clock .c-num text { font: 900 14px/1 var(--ah-display); fill: var(--ah-ink); text-anchor: middle; }
.ah-clock .c-hour path { stroke: var(--ah-ink); stroke-width: 6; stroke-linecap: round; }
.ah-clock .c-min path { stroke: var(--ah-neon-pink); stroke-width: 3.6; stroke-linecap: round; }
.ah-clock .c-pin { fill: var(--ah-950); }
.ah-clock .c-hour, .ah-clock .c-min { transform-box: view-box; transform-origin: 60px 60px; transition: transform 1.2s var(--ease-back); }
.ah-clock .c-hour { transform: rotate(300deg); }
.ah-clock .c-min { transform: rotate(60deg); }
.ah-clock:focus-visible { outline-color: var(--ah-ink); }
@media (prefers-reduced-motion: no-preference) {
  html.motion .ah-door:not(.is-play) .c-hour { transform: rotate(120deg); }
  html.motion .ah-door:not(.is-play) .c-min { transform: rotate(-240deg); }
  .ah-door.is-play .ah-card { animation: ah-swing 2s var(--ease-out) 0.2s; }
  .ah-clock.is-spin .c-min { transition-duration: 1.4s; }
}
@keyframes ah-swing { 0% { rotate: 1.2deg; } 18% { rotate: -3deg; } 40% { rotate: 2.4deg; } 62% { rotate: -0.6deg; } 100% { rotate: 1.2deg; } }

/* --------------------------------------------------------------------------
   24. The closing band: under the OPEN sign (always the last band)
   -------------------------------------------------------------------------- */
.ah-final { --band-bg: #060a14; background-color: #060a14; padding-top: calc(var(--pad-y) + 16px); text-align: center; }
.ah-final::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 6%; width: min(900px, 130vw); height: 70%; translate: -50% 0; pointer-events: none; background: radial-gradient(circle, rgba(255, 63, 134, 0.34) 1.4px, transparent 1.9px) 0 0 / 10px 10px; -webkit-mask-image: radial-gradient(closest-side, #000 15%, transparent 100%); mask-image: radial-gradient(closest-side, #000 15%, transparent 100%); }
.ah-final__in { display: grid; justify-items: center; }
.ah-open { position: relative; display: block; width: min(100%, 520px); margin: 0 auto 54px; padding: 70px 0 0; border: 0; background: none; cursor: pointer; transform-origin: 50% 0; -webkit-tap-highlight-color: transparent; }
.ah-open:focus-visible { outline: none; }
.ah-open:focus-visible .ah-open__svg { outline: 3px solid var(--ah-sky); outline-offset: 6px; border-radius: 16px; }
.ah-open__chain { position: absolute; top: 0; width: 8px; height: 82px; background: radial-gradient(ellipse 45% 40% at 50% 50%, transparent 52%, #9aa7b8 58%, #5d6a7d 85%, transparent 90%) 0 0 / 100% 10px repeat-y; }
.ah-open__chain--l { left: 17%; } .ah-open__chain--r { right: 17%; }
.ah-open__svg { display: block; width: 100%; height: auto; overflow: visible; }
.ah-open__cord { position: absolute; right: 4%; top: calc(100% - 8px); width: 34px; height: 30px; border-left: 3px solid #1f2736; border-bottom: 3px solid #1f2736; border-radius: 0 0 0 16px; }
.ah-open__cord::after { content: ""; position: absolute; right: -24px; bottom: -10px; width: 24px; height: 16px; border: 2px solid var(--ah-950); border-radius: 4px; background: linear-gradient(180deg, #4a5568, #1a202c); }
.op-grid { fill: none; stroke: #1a2232; stroke-width: 3; }
.op-glass path { fill: none; stroke: rgba(255, 230, 240, 0.16); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.op-lit path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.op-lit .op-halo { stroke-width: 20; opacity: 0.85; }
.op-lit .op-tube { stroke-width: 8.5; }
.op-lit .op-core { stroke-width: 3; }
.op-lit--border .op-halo, .op-lit--border .op-tube { stroke: var(--ah-neon-blue); }
.op-lit--border .op-core { stroke: var(--ah-neon-blue-core); }
.op-lit:not(.op-lit--border) .op-halo, .op-lit:not(.op-lit--border) .op-tube { stroke: var(--ah-neon-pink); }
.op-lit:not(.op-lit--border) .op-core { stroke: var(--ah-neon-pink-core); }
.op-hw circle { fill: #141c2c; stroke: var(--ah-950); stroke-width: 2; }
.ah-open.is-off .op-lit { opacity: 0.05 !important; animation: none !important; }
@media (prefers-reduced-motion: no-preference) {
  html.motion .ah-final:not(.is-play) .op-lit { opacity: 0.05; }
  .ah-final.is-play .op-lit { animation: ah-ignite 1.1s var(--t, 0.1s) both; }
  .ah-open.relight .op-lit { animation: ah-ignite2 0.8s var(--t, 0.05s) both !important; }
  .ah-open:hover { animation: ah-sway 1.4s ease-in-out; }
}
@keyframes ah-sway { 25% { rotate: 1.4deg; } 55% { rotate: -1deg; } 80% { rotate: 0.4deg; } }
.ah-final__h { max-width: 16em; margin: 0 auto 32px; font-size: clamp(2.4rem, 1.2rem + 3.6vw, 4.8rem); }
.ah-final__btn { min-height: 58px; padding: 0 2em; font-size: 1.15rem; }

/* --------------------------------------------------------------------------
   25. Footer + the giant channel-letter sign (layout.js builds it)
   -------------------------------------------------------------------------- */
.ah-footer { padding: clamp(56px, 7vw, 88px) 0 0; background-color: var(--ah-920); border-top: 2px solid var(--ah-950); }
.ah-footer::after { content: ""; position: absolute; left: 0; right: 0; top: -11px; height: 12px; pointer-events: none; background-color: var(--ah-920); -webkit-mask: var(--ah-torn) 0 0 / 48px 12px repeat-x; mask: var(--ah-torn) 0 0 / 48px 12px repeat-x; }
.ah-footer__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
@media (min-width: 900px) { .ah-footer__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.2fr); gap: 48px; } }
.ah-footer__brand p { margin-top: 12px; max-width: 18em; color: var(--ah-fog); }
.ah-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
@media (min-width: 700px) { .ah-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ah-footer__h { margin-bottom: 8px; font: 800 0.8rem/1.3 var(--ah-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ah-sky); }
.ah-footer__col a { display: flex; align-items: center; min-height: 44px; color: var(--ah-paper); font-size: 0.98rem; text-decoration: none; line-height: 1.25; }
.ah-footer__col a:hover { color: var(--ah-sky); text-decoration: underline; text-underline-offset: 4px; }
.ah-footer__col a[aria-current="page"] { color: var(--ah-sky); }
.ah-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-top: 40px; padding: 18px 0; border-top: 2px solid var(--ah-line); color: var(--ah-mute); font-size: 0.92rem; }
.ah-footer__legal a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--ah-fog); text-decoration: none; }
.ah-footer__legal a:hover { color: var(--ah-paper); text-decoration: underline; }
.ah-footer__fam { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-left: auto; }
.ah-footer__fam i { width: 2px; height: 16px; background: var(--ah-line-2); }
@media (max-width: 640px) { .ah-footer__fam { margin-left: 0; flex-direction: column; align-items: flex-start; } .ah-footer__fam i { display: none; } }

.ah-giant {
  position: relative; margin-top: clamp(20px, 4vw, 48px); padding: 0 0 calc(clamp(18px, 3vw, 40px) + env(safe-area-inset-bottom));
  text-align: center; white-space: nowrap; user-select: none; -webkit-user-select: none;
  font: 900 clamp(3.4rem, 17.4vw, 17.5rem)/0.84 var(--ah-display); letter-spacing: 0.015em; text-transform: uppercase;
}
.ah-giant__raceway { position: absolute; left: 3%; right: 3%; top: 46%; height: 0.11em; border: 2px solid var(--ah-950); border-radius: 4px; background: radial-gradient(circle, #9aa7b8 0 2px, #2c3546 2.5px, transparent 3px) 20px 50% / 120px 100% repeat-x, linear-gradient(180deg, #4a5568, #1a202c); box-shadow: 0 5px 0 rgba(0, 0, 0, 0.55); }
.ah-giant__word { position: relative; display: inline-block; }
.ah-giant__word > span { position: relative; display: inline-block; color: var(--ah-blue); -webkit-text-stroke: 0.012em var(--ah-sky); text-shadow: 0.008em 0.008em 0 #0a4fa0, 0.016em 0.016em 0 #0a4fa0, 0.024em 0.024em 0 #083d7d, 0.032em 0.032em 0 #083d7d, 0.04em 0.04em 0 #052a57, 0.048em 0.048em 0 #03060d, 0 0 0.18em rgba(27, 141, 246, 0.45); transition: color 0.25s, transform 0.35s var(--ease-back), text-shadow 0.25s, -webkit-text-stroke-color 0.25s; }
.ah-giant__unlit, html.motion .ah-giant:not(.is-lit) .ah-giant__word > span { color: #14223f; -webkit-text-stroke-color: #3b5f93; text-shadow: 0.008em 0.008em 0 #0a1428, 0.016em 0.016em 0 #0a1428, 0.024em 0.024em 0 #08101f, 0.032em 0.032em 0 #08101f, 0.04em 0.04em 0 #050a16, 0.048em 0.048em 0 #03060d; }
.ah-giant .ah-giant__gap { width: 0.26em; }
.ah-giant__word > span:not(.ah-giant__gap):hover, .ah-giant__word > span.is-hop { transform: translateY(-9%) rotate(-5deg); color: var(--ah-sky); }
@media (prefers-reduced-motion: no-preference) {
  .ah-giant.is-lit .ah-giant__word > span:not(.ah-giant__gap) { animation: ah-letter 0.6s var(--ease-back) both; animation-delay: calc(var(--i, 0) * 90ms); }
  .ah-giant.is-hop-all .ah-giant__word > span:not(.ah-giant__gap) { animation: ah-hop 0.7s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
}
@keyframes ah-letter { 0% { color: #14223f; transform: translateY(0); } 35% { transform: translateY(-8%); } 70% { transform: translateY(1.5%); } }
@keyframes ah-hop { 40% { transform: translateY(-11%); } 70% { transform: translateY(2%); } }

/* --------------------------------------------------------------------------
   26. Controls and machines: the brass-knob range, the select and input,
   the LED window, the steel panel and the register (the calculator shell).
   For calculators, finders and live numbers. Markup: kit.html, "Controls".
   -------------------------------------------------------------------------- */
/* 26a. The range: a steel slot, Pawn blue up to a brass knob (--fill; theme.js keeps it in step on input).
   Put the resting fill inline (style="--fill:41.18%") so the page is right without JS. 44px tall for thumbs.
   The slot is dark for paper and steel; on a night band add .ah-range--night. */
.ah-range { --fill: 50%; --range-off: #1a2232; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 6px 0 0; padding: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: pan-y; }
.ah-range::-webkit-slider-runnable-track { height: 14px; border: 2px solid var(--ah-950); border-radius: 999px; background: linear-gradient(90deg, var(--ah-blue) 0 var(--fill), var(--range-off) var(--fill) 100%); box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.35); }
.ah-range::-moz-range-track { height: 10px; border: 2px solid var(--ah-950); border-radius: 999px; background: linear-gradient(90deg, var(--ah-blue) 0 var(--fill), var(--range-off) var(--fill) 100%); box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.35); }
.ah-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 32px; height: 32px; margin-top: -11px; border: 2.5px solid var(--ah-950); border-radius: 50%; background: radial-gradient(circle at 36% 34%, var(--ah-brass-hi) 0 18%, var(--ah-brass) 52%, var(--ah-brass-lo) 100%); box-shadow: 2px 3px 0 var(--ah-950); }
.ah-range::-moz-range-thumb { width: 28px; height: 28px; border: 2.5px solid var(--ah-950); border-radius: 50%; background: radial-gradient(circle at 36% 34%, var(--ah-brass-hi) 0 18%, var(--ah-brass) 52%, var(--ah-brass-lo) 100%); box-shadow: 2px 3px 0 var(--ah-950); }
.ah-range:active::-webkit-slider-thumb { cursor: grabbing; }
.ah-range:focus-visible { outline-offset: 2px; border-radius: 999px; } /* sky ring on night, ink ring inside .ah-panel / .ah-calc__deck */
.ah-range--night { --range-off: var(--ah-600); }
.ah-range__scale { display: flex; justify-content: space-between; gap: 12px; margin-top: 2px; color: var(--ah-ink-2); font: 800 0.78rem/1 var(--ah-mono); letter-spacing: 0.08em; }
.ah-range--night + .ah-range__scale { color: var(--ah-mute); }

/* 26b. A field: a sky label and a cream pill control (select or text input) with a blue hard shadow. 48px tall,
   16px text (iOS never zooms). A control that only works with JS gets .ah-js-only (hidden without JS). */
.ah-field { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ah-field__label { color: var(--ah-sky); font: 800 0.82rem/1.2 var(--ah-body); letter-spacing: 0.14em; text-transform: uppercase; }
.ah-select, .ah-input {
  flex: 1 1 220px; max-width: 360px; min-height: 48px; padding: 0 16px; margin: 0;
  border: 2px solid var(--ah-950); border-radius: 999px; background-color: var(--ah-cream); color: var(--ah-ink);
  font: 700 1rem/1.2 var(--ah-body); box-shadow: 3px 3px 0 var(--ah-blue); -webkit-appearance: none; appearance: none;
}
.ah-select { padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.8L6 6.2l4.5-4.4' fill='none' stroke='%230b1424' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position: right 16px center; background-size: 14px 10px; background-repeat: no-repeat; cursor: pointer; }
.ah-input::placeholder { color: #5a6a86; opacity: 1; }
.ah-select:disabled, .ah-input:disabled { opacity: 0.6; cursor: default; }
/* on cream paper: ink label, ink shadow */
.ah-field--paper .ah-field__label { color: var(--ah-ink); }
.ah-field--paper .ah-select, .ah-field--paper .ah-input { box-shadow: 3px 3px 0 var(--ah-ink); }
.ah-field--paper :focus-visible { outline-color: var(--ah-ink); }
html:not(.js) .ah-js-only { display: none !important; }

/* 26c. The LED window: black glass, sky digits with the tube glow, tabular numbers. A live number.
   --lg for a total, --sm for a small count, --pink for a warning count, --mono for long readouts.
   Restart .is-flip (AH.flip does it) and the window blinks on once. */
.ah-led {
  display: inline-grid; place-items: center; min-width: 3.1ch; padding: 6px 10px 5px;
  border: 2px solid var(--ah-950); border-radius: 6px; background: #04060b;
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.8), inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  color: #c9ecff; font: 800 1.9rem/1 var(--ah-display); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; white-space: nowrap;
  text-shadow: 0 0 6px rgba(47, 155, 255, 0.95), 0 0 2px #fff;
}
.ah-led--lg { min-width: 4ch; padding: 8px 14px 6px; font-size: clamp(2.2rem, 1.8rem + 1.2vw, 2.9rem); }
.ah-led--sm { padding: 4px 8px 3px; font-size: 1.35rem; }
.ah-led--pink { color: #ffd6e5; text-shadow: 0 0 6px rgba(255, 63, 134, 0.95), 0 0 2px #fff; }
.ah-led--mono { font: 700 clamp(1.5rem, 1.1rem + 2vw, 2.3rem)/1 var(--ah-mono); letter-spacing: 0.04em; }
@media (prefers-reduced-motion: no-preference) { .ah-led.is-flip, .is-flip > .ah-led { animation: ah-blinkon 0.4s steps(2); } }
@keyframes ah-blinkon { 0% { opacity: 0.35; } 100% { opacity: 1; } }

/* 26d. The steel panel: a brushed control plate with two screws (sliders, readouts). Paper rules inside (ink text). */
.ah-panel {
  position: relative; padding: 28px clamp(18px, 2.4vw, 26px) 20px;
  border: 2px solid var(--ah-950); border-radius: 12px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 4px), linear-gradient(180deg, #edf1f6, #c6cfdb 55%, #aab5c4);
  color: var(--ah-ink); box-shadow: 6px 6px 0 var(--ah-blue), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.ah-panel::before, .ah-panel::after { content: ""; position: absolute; top: 10px; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--ah-950); background: linear-gradient(35deg, transparent 43%, var(--ah-950) 43% 57%, transparent 57%), radial-gradient(circle at 35% 35%, #f2f5f9, #9aa7b8 60%, #5d6a7d); }
.ah-panel::before { left: 10px; } .ah-panel::after { right: 10px; }
.ah-panel > .ah-label--sm { margin-top: 4px; }
/* a readout row: what it counts, and the LED */
.ah-readout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 12px 12px 14px; border: 2px solid var(--ah-950); border-radius: 8px; background: var(--ah-cream); color: var(--ah-ink); box-shadow: 3px 3px 0 var(--ah-950); font-size: 1.02rem; line-height: 1.3; }
.ah-readout__what { flex: 1 1 10em; font-weight: 700; }

/* 26e. The register: the calculator shell. A steel crest with the badge, a navy body, a cream lever deck
   (label, .ah-range, the value line), number flags in windows, the total on an LED, the base with its key. */
.ah-calc { position: relative; width: 100%; max-width: 640px; margin: 0 auto; }
.ah-calc__crest { position: relative; display: flex; justify-content: center; height: 40px; margin: 0 14%; border: 2px solid var(--ah-950); border-bottom: 0; border-radius: 18px 18px 0 0; background: linear-gradient(180deg, #e3e9f0, #9aa7b8 55%, #6f7c90); }
.ah-calc__crest::before, .ah-calc__crest::after { content: ""; position: absolute; top: 14px; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ah-950); background: radial-gradient(circle at 35% 35%, var(--ah-brass-hi), var(--ah-brass) 55%, var(--ah-brass-lo)); }
.ah-calc__crest::before { left: 16px; } .ah-calc__crest::after { right: 16px; }
.ah-calc__badge { display: inline-flex; align-items: center; gap: 7px; align-self: center; padding: 3px 12px 2px 6px; border: 2px solid var(--ah-950); border-radius: 999px; background: var(--ah-ink); color: var(--ah-paper); font: 900 0.95rem/1 var(--ah-display); letter-spacing: 0.12em; text-transform: uppercase; }
.ah-calc__badge img { width: 26px; height: auto; }
.ah-calc__body {
  position: relative; padding: clamp(16px, 2.6vw, 26px);
  border: 2px solid var(--ah-950); border-radius: 18px 18px 8px 8px;
  background: linear-gradient(180deg, #1a2d52 0, #13213d 40%, #0e1a31 100%);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.55), inset 0 2px 0 rgba(173, 229, 255, 0.2), inset 0 0 0 6px #0b1424, inset 0 0 0 8px rgba(173, 229, 255, 0.14);
}
.ah-calc__deck { display: grid; gap: 20px; padding: 20px clamp(16px, 2.4vw, 24px) 18px; border: 2px solid var(--ah-950); border-radius: 10px; background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink); box-shadow: 4px 4px 0 var(--ah-blue); }
.ah-calc__lever + .ah-calc__lever { padding-top: 18px; border-top: 2px dashed rgba(11, 20, 36, 0.25); }
.ah-calc__label { display: block; color: var(--ah-ink); font: 800 0.8rem/1.3 var(--ah-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.ah-calc__val { margin-top: 2px; color: var(--ah-ink); font-size: 1.02rem; font-weight: 600; line-height: 1.45; }
.ah-calc__val b { color: var(--ah-blue-ink); font-weight: 900; font-variant-numeric: tabular-nums; }
.ah-calc__val small { display: block; margin-top: 4px; color: var(--ah-ink-2); font-size: 0.84rem; font-weight: 600; line-height: 1.4; }
.ah-calc__flags { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; margin-top: 22px; }
.ah-calc__flag { display: grid; align-content: start; justify-items: center; gap: 4px; text-align: center; }
.ah-calc__win { display: grid; place-items: center; width: 100%; padding: 8px; border: 2px solid var(--ah-950); border-radius: 8px; background: #04060b; box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.8), 0 0 0 4px #0b1424, 0 0 0 6px rgba(173, 229, 255, 0.18); }
.ah-calc__n { display: block; width: 100%; padding: 8px 4px 6px; border: 2px solid var(--ah-950); border-radius: 4px; background: linear-gradient(180deg, #fffaf0 0 48%, #ece2c8 52%, var(--ah-cream) 100%); color: var(--ah-ink); font: 900 clamp(2rem, 1.6rem + 1.2vw, 2.6rem)/1 var(--ah-display); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; transform-origin: 50% 0; }
.ah-calc__what { margin-top: 8px; color: var(--ah-paper); font-size: 0.98rem; font-weight: 800; line-height: 1.2; }
.ah-calc__fine { display: block; color: var(--ah-fog); font-size: 0.8rem; font-weight: 600; line-height: 1.4; }
.ah-calc__total { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 22px; padding: 14px 16px; border: 2px solid var(--ah-950); border-radius: 10px; background: #0b1424; box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(173, 229, 255, 0.16); }
.ah-calc__total > span { flex: 1 1 auto; min-width: 0; text-wrap: balance; color: var(--ah-paper); font-weight: 800; font-size: 1.02rem; line-height: 1.3; }
.ah-calc__total > .ah-led { flex: none; }
.ah-calc__base { position: relative; height: 30px; margin: 0 2%; border: 2px solid var(--ah-950); border-top: 0; border-radius: 0 0 10px 10px; background: linear-gradient(180deg, #0b1424, #13213d); box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.5); }
.ah-calc__base::before { content: ""; position: absolute; left: 8%; right: 8%; top: 9px; height: 2px; background: rgba(173, 229, 255, 0.2); }
.ah-calc__base::after { content: ""; position: absolute; left: 50%; top: 6px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; border: 2px solid var(--ah-950); background: linear-gradient(var(--ah-950), var(--ah-950)) 50% 3px / 2px 5px no-repeat, radial-gradient(circle at 35% 35%, var(--ah-brass-hi), var(--ah-brass) 55%, var(--ah-brass-lo)); }
@media (prefers-reduced-motion: no-preference) {
  .ah-calc__win.is-flip .ah-calc__n { animation: ah-flip 0.32s var(--ease-out); }
}
@keyframes ah-flip { 0% { transform: rotateX(80deg); } 100% { transform: rotateX(0); } }
@media (max-width: 640px) {
  .ah-calc__crest { margin: 0 10%; }
  .ah-calc__flags { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ah-calc__flag { grid-template-columns: 92px minmax(0, 1fr); grid-template-areas: "win what" "win fine"; justify-items: start; align-items: center; column-gap: 14px; row-gap: 2px; text-align: left; }
  .ah-calc__win { grid-area: win; }
  .ah-calc__what { grid-area: what; align-self: end; margin-top: 0; }
  .ah-calc__fine { grid-area: fine; align-self: start; }
  .ah-calc__n { font-size: 2rem; text-align: center; }
}

/* --------------------------------------------------------------------------
   27. The neon search sign: a search bar bent in tube, hanging in the window,
   typing real searches ([data-type] on the typed span; theme.js loops it, holds
   it with the pause button and off screen). Results hang under it on strings:
   yours on a cream ticket, the other listing dusty in the dark.
   -------------------------------------------------------------------------- */
.ah-searchsign { position: relative; width: min(100%, 570px); margin: 0 auto; padding-top: 58px; }
.ah-searchsign::before {
  content: ""; position: absolute; z-index: -1; left: -14%; right: -14%; top: 8px; height: 340px; pointer-events: none;
  background: radial-gradient(circle, rgba(47, 155, 255, 0.42) 1.5px, transparent 1.9px) 0 0 / 10px 10px;
  -webkit-mask-image: radial-gradient(closest-side, #000 18%, transparent 100%); mask-image: radial-gradient(closest-side, #000 18%, transparent 100%);
}
.ah-searchsign > .ah-sample { top: 44px; right: 26px; }
.ah-searchsign__chain { position: absolute; top: 0; width: 8px; height: 66px; background: radial-gradient(ellipse 45% 40% at 50% 50%, transparent 52%, #9aa7b8 58%, #5d6a7d 85%, transparent 90%) 0 0 / 100% 10px repeat-y; }
.ah-searchsign__chain--l { left: 15%; } .ah-searchsign__chain--r { right: 15%; }
.ah-searchsign__box {
  position: relative; z-index: 2; padding: 14px; border: 2px solid var(--ah-950); border-radius: 24px; background-color: #070b15;
  background-image: linear-gradient(rgba(30, 40, 60, 0.9) 2px, transparent 2px), linear-gradient(90deg, rgba(30, 40, 60, 0.9) 2px, transparent 2px);
  background-size: 100% 34%, 22% 100%; background-position: 0 16px, 18px 0;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.55), inset 0 0 0 2px rgba(255, 255, 255, 0.05);
}
.ah-searchsign__box::before, .ah-searchsign__box::after { content: ""; position: absolute; top: -9px; width: 16px; height: 16px; border: 3px solid #9aa7b8; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--ah-950), inset 0 0 0 1.5px var(--ah-950); }
.ah-searchsign__box::before { left: calc(15% - 4px); } .ah-searchsign__box::after { right: calc(15% - 4px); }
.ah-searchsign__tube {
  display: flex; align-items: center; gap: 14px; min-height: 98px; padding: 10px 28px 10px 20px; container-type: inline-size;
  border: 3px solid var(--ah-neon-blue-core); border-radius: 999px;
  box-shadow: 0 0 0 2.5px var(--ah-neon-blue), 0 0 16px 3px rgba(47, 155, 255, 0.8), inset 0 0 0 2.5px var(--ah-neon-blue), inset 0 0 14px 2px rgba(47, 155, 255, 0.45);
}
.ah-searchsign__mag { flex: none; width: 50px; height: 50px; overflow: visible; filter: drop-shadow(0 0 4px rgba(255, 63, 134, 0.95)); }
.ah-searchsign__q {
  display: flex; align-items: center; flex: 1 1 auto; min-width: 0; height: 1.25em; margin: 0; overflow: hidden; white-space: nowrap;
  font: 800 clamp(1.2rem, 9.5cqi, 2.6rem)/1 var(--ah-display); letter-spacing: 0.05em;
  color: #d4f0ff; text-shadow: 0 0 6px rgba(47, 155, 255, 0.95), 0 0 2px #fff;
}
.ah-searchsign__caret { flex: none; width: 4px; height: 1em; margin-left: 4px; border-radius: 1px; background: #d4f0ff; box-shadow: 0 0 6px rgba(47, 155, 255, 0.9); }
@media (prefers-reduced-motion: no-preference) {
  html.js .ah-searchsign__caret { animation: ah-blink 1.1s steps(1) infinite; }
  html.motion .ah-searchsign:not(.is-idle) .ah-searchsign__tube { animation: ah-ignite 1.2s 0.35s both; } /* flickers on as it comes into view; lit while off screen */
}
.ah-searchsign__results { position: relative; z-index: 1; display: grid; padding: 0 3% 12px; }
.ah-searchsign__foot { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; }
.ah-result { position: relative; padding: 34px 22px 18px; border: 2px solid var(--ah-950); border-radius: 8px; transform-origin: 50% 0; }
.ah-result::before { content: ""; position: absolute; z-index: 1; left: 50%; top: calc(var(--str, 30px) * -1); width: 2.5px; height: calc(var(--str, 30px) + 14px); margin-left: -1.25px; background: #e8dcc0; box-shadow: 0 0 0 1px var(--ah-950); }
.ah-result__hole { position: absolute; z-index: 2; left: 50%; top: 9px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--ah-900); box-shadow: 0 0 0 2px var(--ah-950), 0 0 0 5px var(--ah-brass), 0 0 0 7px var(--ah-950); }
.ah-result__title { font: 900 clamp(1.3rem, 1rem + 0.9vw, 1.65rem)/1.02 var(--ah-display); letter-spacing: 0.02em; text-transform: uppercase; }
.ah-result__url { margin-top: 6px; font: 700 0.86rem/1.3 var(--ah-mono); overflow-wrap: anywhere; }
.ah-result__ad { position: absolute; z-index: 3; top: -13px; left: 14px; --tilt: -4deg; }
.ah-result__no { position: absolute; top: 10px; right: 14px; font: 800 0.86rem/1 var(--ah-display); letter-spacing: 0.14em; color: var(--ah-red-ink); }
.ah-result--you { --str: 36px; width: 88%; margin-top: 36px; background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink); box-shadow: 6px 6px 0 var(--ah-blue); rotate: -1deg; }
.ah-result--you .ah-result__url { color: var(--ah-blue-ink); }
.ah-result--them { --str: 28px; width: 64%; margin: 28px 0 0 auto; padding-top: 32px; background-color: #8e939d; background-image: var(--ah-fiber); color: #0b1424; box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.55); rotate: 2.4deg; }
.ah-result--them .ah-result__title { font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.25rem); }
.ah-result--them .ah-result__url { color: #1f2a3d; font-size: 0.8rem; }
.ah-result--them .ah-result__hole { background: #3a4150; }
@media (max-width: 420px) {
  .ah-searchsign { padding-top: 50px; }
  .ah-searchsign > .ah-sample { top: 38px; right: 16px; }
  .ah-searchsign__box { padding: 10px; border-radius: 20px; }
  .ah-searchsign__tube { min-height: 66px; gap: 9px; padding: 8px 16px 8px 12px; }
  .ah-searchsign__mag { width: 34px; height: 34px; }
  .ah-result { padding: 32px 16px 14px; }
  .ah-result--you { width: 92%; }
  .ah-result--them { width: 80%; }
  .ah-result--them .ah-result__url { font-size: 0.72rem; letter-spacing: -0.01em; }
}

/* --------------------------------------------------------------------------
   28. The pneumatic tube: "A feeds B" between two lit signs (a connector, never a
   pipe diagram). Capsules ride the glass (data-loop + .ah-pause), across on wide
   screens and down on phones; .ah-pipe--down stays vertical at every width.
   Without JS or with reduced motion the capsules rest spaced along the tube.
   -------------------------------------------------------------------------- */
.ah-pipe { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; max-width: 1000px; margin: 0 auto; padding-bottom: 60px; }
.ah-pipe__end {
  position: relative; z-index: 2; width: min(100%, 350px); padding: 22px 20px; text-align: center;
  border: 2px solid var(--ah-950); border-radius: 16px; background-color: #070b15;
  background-image: linear-gradient(rgba(30, 40, 60, 0.85) 2px, transparent 2px), linear-gradient(90deg, rgba(30, 40, 60, 0.85) 2px, transparent 2px);
  background-size: 100% 25%, 25% 100%; background-position: 0 12px, 12px 0;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.55), inset 0 0 0 2px rgba(255, 255, 255, 0.05);
}
.ah-pipe__end::before, .ah-pipe__end::after { content: ""; position: absolute; top: 10px; width: 9px; height: 9px; border-radius: 50%; background: #141c2c; box-shadow: 0 0 0 2px var(--ah-950), inset 1px 1px 0 rgba(255, 255, 255, 0.25); }
.ah-pipe__end::before { left: 10px; } .ah-pipe__end::after { right: 10px; }
.ah-pipe__icon { display: block; width: 96px; height: 80px; margin: 0 auto 10px; overflow: visible; filter: drop-shadow(0 0 5px rgba(255, 63, 134, 0.9)); }
.ah-pipe__icon.ah-neon--blue { filter: drop-shadow(0 0 5px rgba(47, 155, 255, 0.95)); }
.ah-pipe__t { text-wrap: balance; color: var(--ah-paper); font: 900 clamp(1.45rem, 1.2rem + 0.6vw, 1.65rem)/1.02 var(--ah-display); letter-spacing: 0.02em; text-transform: uppercase; }
.ah-pipe__s { margin-top: 8px; color: var(--ah-fog); font-size: 1rem; font-weight: 600; line-height: 1.35; }
.ah-pipe__link { position: relative; display: grid; justify-items: center; width: 46px; height: 150px; margin: -2px 0; }
.ah-pipe__tube { position: relative; display: block; width: 30px; height: 100%; overflow: hidden; border: 2px solid var(--ah-950); border-radius: 4px; background: linear-gradient(90deg, rgba(173, 229, 255, 0.3), rgba(173, 229, 255, 0.07) 45%, rgba(173, 229, 255, 0.22)); box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.22); }
.ah-pipe__cap { position: absolute; z-index: 2; left: 50%; width: 44px; height: 14px; margin-left: -22px; border: 2px solid var(--ah-950); border-radius: 3px; background: linear-gradient(90deg, var(--ah-brass-lo), var(--ah-brass-hi) 45%, var(--ah-brass)); }
.ah-pipe__cap--a { top: -2px; } .ah-pipe__cap--b { bottom: -2px; }
.ah-pipe__run { position: absolute; inset: 0; }
.ah-pipe__run i { position: absolute; left: 50%; bottom: 0; width: 18px; height: 30px; margin-left: -9px; border: 2px solid var(--ah-950); border-radius: 9px; background: linear-gradient(90deg, #fffaf0, var(--ah-cream) 50%, #c9bea2); }
.ah-pipe__run i::after { content: ""; position: absolute; left: -2px; right: -2px; top: 9px; height: 5px; border-block: 2px solid var(--ah-950); background: var(--ah-blue); }
.ah-pipe__run--1 { transform: translateY(-74%); } .ah-pipe__run--2 { transform: translateY(-42%); } .ah-pipe__run--3 { transform: translateY(-10%); }
.ah-pipe__pause { position: absolute; left: 50%; bottom: 0; z-index: 3; margin-left: -22px; }
@media (min-width: 820px) {
  .ah-pipe:not(.ah-pipe--down) { grid-template-columns: minmax(0, 350px) minmax(110px, 1fr) minmax(0, 350px); align-items: stretch; padding-bottom: 0; }
  .ah-pipe:not(.ah-pipe--down) .ah-pipe__end { display: grid; align-content: center; }
  .ah-pipe:not(.ah-pipe--down) .ah-pipe__link { align-self: center; width: 100%; height: 46px; margin: 0 -4px; }
  .ah-pipe:not(.ah-pipe--down) .ah-pipe__tube { width: 100%; height: 30px; align-self: center; background: linear-gradient(180deg, rgba(173, 229, 255, 0.3), rgba(173, 229, 255, 0.07) 45%, rgba(173, 229, 255, 0.22)); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.22); }
  .ah-pipe:not(.ah-pipe--down) .ah-pipe__cap { top: 50%; left: auto; width: 14px; height: 44px; margin: -22px 0 0; background: linear-gradient(180deg, var(--ah-brass-lo), var(--ah-brass-hi) 45%, var(--ah-brass)); }
  .ah-pipe:not(.ah-pipe--down) .ah-pipe__cap--a { left: -2px; bottom: auto; } .ah-pipe:not(.ah-pipe--down) .ah-pipe__cap--b { right: -2px; bottom: auto; }
  .ah-pipe:not(.ah-pipe--down) .ah-pipe__run i { left: auto; right: 0; top: 50%; bottom: auto; width: 30px; height: 18px; margin: -9px 0 0; }
  .ah-pipe:not(.ah-pipe--down) .ah-pipe__run i::after { left: 9px; right: auto; top: -2px; bottom: -2px; width: 5px; height: auto; border-block: 0; border-inline: 2px solid var(--ah-950); }
  .ah-pipe:not(.ah-pipe--down) .ah-pipe__run--1 { transform: translateX(-74%); } .ah-pipe:not(.ah-pipe--down) .ah-pipe__run--2 { transform: translateX(-42%); } .ah-pipe:not(.ah-pipe--down) .ah-pipe__run--3 { transform: translateX(-10%); }
  .ah-pipe:not(.ah-pipe--down) .ah-pipe__pause { bottom: auto; top: calc(50% + 34px); }
}
@media (prefers-reduced-motion: no-preference) {
  html.js .ah-pipe__run { animation: ah-ride-y 3.6s linear infinite; }
  html.js .ah-pipe__run--2 { animation-delay: -1.2s; } html.js .ah-pipe__run--3 { animation-delay: -2.4s; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 820px) {
  html.js .ah-pipe:not(.ah-pipe--down) .ah-pipe__run { animation-name: ah-ride-x; }
}
@keyframes ah-ride-y { from { transform: translateY(-100%); } to { transform: translateY(32px); } }
@keyframes ah-ride-x { from { transform: translateX(-100%); } to { transform: translateX(32px); } }

/* --------------------------------------------------------------------------
   29. Small bits: the compact label, neon icon strokes, the brass nameplate,
   the adding-machine total
   -------------------------------------------------------------------------- */
/* a compact label-maker strip with no section margin (control labels, captions); --sky lights the LED sky */
.ah-label.ah-label--sm { gap: 8px; margin-bottom: 0; padding: 6px 11px 5px; font-size: 0.74rem; letter-spacing: 0.12em; line-height: 1.35; text-wrap: balance; box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.07), 2px 2px 0 var(--ah-blue); rotate: -1deg; }
.ah-label--sm::before { flex: none; width: 7px; height: 7px; }
.ah-label--sky::before { background: var(--ah-neon-sky); box-shadow: 0 0 0 2px #11151d, 0 0 8px var(--ah-neon-sky); }
/* neon icon strokes: draw the icon twice in one svg, a .ah-neon__tube path then the same path as .ah-neon__core
   (pink by default; .ah-neon--blue on the svg). Small icons on signs only. */
.ah-neon__tube, .ah-neon__core { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ah-neon__tube { stroke: var(--ah-neon-pink); stroke-width: 5; }
.ah-neon__core { stroke: var(--ah-neon-pink-core); stroke-width: 1.8; }
.ah-neon--blue .ah-neon__tube { stroke: var(--ah-neon-blue); }
.ah-neon--blue .ah-neon__core { stroke: var(--ah-neon-blue-core); }
/* the brass nameplate: a name, screwed on (gold is fine here: a small object) */
.ah-nameplate {
  position: relative; display: inline-flex; align-items: center; gap: 12px; max-width: 100%; padding: 11px 14px 10px;
  border: 2px solid var(--ah-950); border-radius: 6px; background: linear-gradient(180deg, #fff1bf, #e2b44a 42%, #c9962e 70%, #e7bf52);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55), inset 0 0 0 2px rgba(255, 255, 255, 0.45), inset 0 0 0 4px rgba(122, 86, 15, 0.45);
  color: #2b1f05; font: 900 1.25rem/1 var(--ah-display); letter-spacing: 0.08em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(255, 245, 210, 0.75);
}
.ah-nameplate::before, .ah-nameplate::after { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff4cf, #9c7420); box-shadow: 0 0 0 1.5px #5c420c; }
@media (max-width: 420px) { .ah-nameplate { gap: 9px; padding-inline: 11px; font-size: 1.05rem; letter-spacing: 0.05em; } }
/* the grand total: one long strip of adding-machine tape with torn ends (b = the number) */
.ah-total { max-width: 980px; margin: clamp(46px, 6vw, 72px) auto 0; filter: var(--ah-outline) drop-shadow(6px 6px 0 var(--ah-blue)); rotate: -0.6deg; }
.ah-total__tape {
  padding: 18px 34px 16px; text-align: center;
  background-color: #fbf9f2; background-image: repeating-linear-gradient(180deg, transparent 0 23px, rgba(11, 20, 36, 0.035) 23px 24px);
  color: var(--ah-ink); font: 700 1rem/1.6 var(--ah-mono); letter-spacing: 0.02em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 12.5%, 100% 25%, calc(100% - 9px) 37.5%, 100% 50%, calc(100% - 9px) 62.5%, 100% 75%, calc(100% - 9px) 87.5%, 100% 100%, 0 100%, 9px 87.5%, 0 75%, 9px 62.5%, 0 50%, 9px 37.5%, 0 25%, 9px 12.5%);
}
.ah-total__tape b { margin: 0 4px; color: var(--ah-blue-ink); font: 900 clamp(1.8rem, 1.4rem + 1.2vw, 2.4rem)/1 var(--ah-display); letter-spacing: 0.01em; vertical-align: -0.1em; }

/* --------------------------------------------------------------------------
   30. Reduced motion: everything rests finished, loops stop. Print.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .ah-ticker__track, [data-loop], [data-loop] * { animation: none !important; }
  .ah-lamp__head { rotate: 0deg !important; }
}
@media print {
  .ah-header, #site-nav, .ah-ticker, .ah-torch, .ah-pause, .ah-giant, .ah-lampwall { display: none !important; }
  body, .ah-band, .ah-footer, .ah-phero { background: #fff !important; color: #000 !important; }
}

/* --------------------------------------------------------------------------
   31. The booking modal (production only)
   tools/port-after-hours.py appends this block to css/after-hours/theme.css. The modal itself is the
   site's one GoHighLevel calendar dialog that js/main.js builds (window.plOpenBook): <dialog
   class="book-modal" id="bookModal"> > .book-panel > .book-bar (b + #bookX) > #bookFrame.book-frame
   (.book-status + the iframe) > .book-help (.book-retry + a). Same ids, classes and behavior as the old
   rules in css/style.css (tests/booking.spec.cjs); here it is a cream pawn ticket on the night stage.
   The calendar is GoHighLevel's white widget, so the frame and its loading screen stay white.
   Every selector is scoped under .book-modal.
   -------------------------------------------------------------------------- */
.book-modal {
  position: fixed; inset: 0; z-index: 3000;
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0;
  display: none; align-items: center; justify-content: center; padding: 16px;
  background: rgba(3, 6, 13, 0.86); color: var(--ah-ink);
}
.book-modal[open] { display: flex; }
.book-modal::backdrop { background: transparent; }
/* Closing removes the whole iframe from layout and hit testing, including descendants whose provider
   code might set visibility or pointer-events (keep: a closed calendar must never catch a tap). */
.book-modal:not([open]) { display: none !important; }
.book-modal .book-panel {
  position: relative; display: flex; flex-direction: column;
  width: 100%; max-width: 720px; height: 92vh; height: 92dvh; max-height: 880px;
  border: 2px solid var(--ah-950); border-radius: 10px; overflow: hidden;
  background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink);
  box-shadow: 8px 8px 0 var(--ah-blue);
}
.book-modal .book-bar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 10px 9px 18px; border-bottom: 2px dashed rgba(11, 20, 36, 0.28); color: var(--ah-ink);
}
.book-modal .book-bar b { font: 900 1.5rem/1 var(--ah-display); letter-spacing: 0.04em; text-transform: uppercase; }
.book-modal .book-x {
  flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0;
  border: 2px solid var(--ah-950); border-radius: 50%; background: var(--ah-cream); color: var(--ah-ink);
  box-shadow: 2px 2px 0 var(--ah-950); font: 800 1rem/1 var(--ah-body); cursor: pointer;
  transition: transform 0.18s var(--ease-back), box-shadow 0.18s var(--ease-back), background-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.book-modal .book-x:hover { background: var(--ah-blue); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ah-950); }
.book-modal .book-x:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ah-950); }
.book-modal .book-frame { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; background: #fff; }
.book-modal .book-frame iframe { width: 100%; height: 100% !important; border: 0; display: block; background: #fff; }
.book-modal .book-status {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; padding: 24px; background: #fff; text-align: center;
}
.book-modal .book-status[hidden] { display: none; }
.book-modal .book-status p { max-width: 30em; color: var(--ah-ink-2); font-weight: 600; }
.book-modal .book-spinner { width: 30px; height: 30px; border: 3px solid rgba(11, 20, 36, 0.14); border-top-color: var(--ah-blue-deep); border-radius: 50%; animation: ah-book-spin 0.8s linear infinite; }
@keyframes ah-book-spin { to { transform: rotate(360deg); } }
.book-modal .book-status.slow .book-spinner { display: none; }
.book-modal .book-help {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 22px;
  padding: 2px 12px; border-top: 2px dashed rgba(11, 20, 36, 0.28); color: var(--ah-ink-2); font-size: 0.9rem; text-align: center;
}
.book-modal .book-retry { margin: 0; padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer; }
.book-modal .book-help a, .book-modal .book-retry { display: inline-flex; align-items: center; min-height: 44px; color: var(--ah-blue-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.book-modal :focus-visible { outline: 3px solid var(--ah-ink); outline-offset: 3px; }
@media (max-width: 600px) {
  .book-modal { padding: 8px; }
  .book-modal .book-panel { height: 94vh; height: 94dvh; box-shadow: 5px 5px 0 var(--ah-blue); }
  .book-modal .book-bar b { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .book-modal .book-spinner { animation: none; }
}

/* --------------------------------------------------------------------------
   32. ADA Tool accessibility menu: the header button and the footer's legal row (production only)
   tools/port-after-hours.py appends this block to css/after-hours/theme.css. Every public page loads the
   ADA Tool widget (HANDOFF.md) with data-hide-launcher, so no floating button ever sits over the page.
   layout.js puts this round button in the header instead, just before the main button (data-adat-open
   opens the menu; without the widget it is a plain link to the statement). No motion here.
   -------------------------------------------------------------------------- */
.ah-a11y {
  display: inline-grid; place-content: center; flex: none; width: 44px; height: 44px;
  border: 2px solid var(--ah-line-2); border-radius: 50%; color: var(--ah-paper);
  text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.ah-a11y svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ah-a11y svg circle { fill: currentColor; stroke: none; }
.ah-a11y:hover { border-color: var(--ah-sky); color: var(--ah-sky); }
/* "Accessibility" joined Terms and Privacy in the legal row: on phones the family line always gets its own row */
@media (max-width: 640px) { .ah-footer__fam { flex-basis: 100%; } }