/* ==========================================================================
   AFTER HOURS: About (prefix ab-)
   The scenes of this page only. Shared pieces come from css/theme.css.
   This page is the shop itself, after close: the crew and the storefront.
   hero: the "PAWN LEADS vs. THE STIGMA" fight poster pasted on the brick wall, the real crew in our corner
   who: the storefront window, sign-painted, the rules sign hanging inside, hours-style lines on the glass
   beliefs: the back-office corkboard, one real thing pinned beside each belief
   team: a short velvet valance, the time cards hung on the steel rack, the owner's note
   run: the day book on the counter, the flywheel folded into its foot
   fit: the slip we take, and the slip on the spike
   family: the strip-mall pylon sign, one tenant per brand
   book: the poster-stock card and the service bell on the counter (tap the bell: the confirm card)
   final: the neon PAWN ONLY sign in the window
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO: the fight poster on the brick wall. The flashlight (theme) plays over it.
   Phones (and tablets) get the iPhone first-screen order: headline, the who line,
   the Apply button, then the poster; the stigma lines and the second button go
   under the poster. (A page-scoped stand-in for the planned kit change.)
   -------------------------------------------------------------------------- */
.ab-hero .ah-phero__copy { position: relative; z-index: 2; }
.ab-hero__who { margin-bottom: 16px; }
.ab-hero__who strong { font-weight: 700; }
/* keep a short sentence or a parenthetical on one line, so a wrap lands at the sentence break (inline-block still wraps inside if it can't fit) */
.ab-hero__who { text-wrap: wrap; } /* greedy: WebKit's "pretty" pulls "pawn." down to the second line */
.ab-hero__who .ab-keep { display: inline-block; }
@media (min-width: 360px) { .ab-fit .ah-h2 .ab-keep { display: inline-block; } }
.ab-hero__why .ah-phero__lead:last-child { margin-bottom: 30px; }
/* two even lines, not "...every / single day." */
.ab-hero__why .ah-phero__lead:first-child { text-wrap: balance; }
@media (max-width: 999px) {
  .ab-hero .ah-phero__grid { gap: 0; }
  .ab-hero .ah-phero__copy, .ab-hero .ab-hero__actions { display: contents; }
  .ab-hero .ah-crumbs { order: 1; }
  .ab-hero .ah-kicker { order: 2; justify-self: start; }
  .ab-hero .ah-phero__h { order: 3; }
  .ab-hero .ab-hero__who { order: 4; max-width: 32em; margin-bottom: 20px; }
  .ab-hero .ab-hero__apply { order: 5; justify-self: start; }
  .ab-hero .ab-hero__object { order: 6; margin-top: 30px; }
  .ab-hero .ab-hero__why { order: 7; margin-top: 34px; }
  .ab-hero .ab-hero__more { order: 8; justify-self: start; }
  .ab-hero .ab-hero__why .ah-phero__lead:last-child { margin-bottom: 24px; }
}
@media (max-width: 600px) {
  .ab-hero .ah-phero__lead { font-size: 1.08rem; line-height: 1.5; }
  .ab-hero .ab-hero__who { margin-bottom: 18px; }
  .ab-hero .ab-hero__object { margin-top: 26px; }
}

/* the poster: cream poster stock, navy ink, halftone, torn corners, one corner peeling off the bricks */
.ab-hero__object { align-self: center; }
.ab-poster {
  --paper: #f3e8cc;
  position: relative; width: min(100%, 470px); margin: 0 auto; container-type: inline-size;
  filter: var(--ah-outline) drop-shadow(7px 7px 0 rgba(0, 0, 0, 0.6));
  rotate: -1deg;
}
/* the peeled corner: the back of the paper, folded over at the bottom right */
.ab-poster::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 9cqi; height: 9cqi; pointer-events: none;
  background: linear-gradient(135deg, #fff8e2 0%, #ddcda6 62%, #c5b38a 100%);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.ab-poster__paper {
  position: relative; display: flex; flex-direction: column; padding: 4.4cqi 4.4cqi 0;
  background-color: var(--paper);
  background-image:
    linear-gradient(101deg, transparent 31%, rgba(11, 20, 36, 0.08) 31.3%, transparent 32.1%),
    linear-gradient(82deg, transparent 66%, rgba(255, 255, 255, 0.4) 66.3%, transparent 67%),
    linear-gradient(177deg, transparent 47%, rgba(11, 20, 36, 0.06) 47.3%, transparent 48.2%),
    var(--ah-fiber);
  color: var(--ah-ink);
  clip-path: polygon(0.8% 1.6%, 2.8% 0.3%, 4.6% 1.1%, 6.6% 0, 50% 0.5%, 92.6% 0, 95% 0.9%, 97.4% 0.2%, 100% 1.8%, 99.5% 48%, 100% 90.6%, 90.6% 100%, 51% 99.5%, 6.4% 100%, 3.8% 99%, 1.4% 100%, 0 97.6%, 0.6% 52%);
}
/* the double rule printed inside the edge */
.ab-poster__paper::before { content: ""; position: absolute; inset: 2.1cqi; border: max(1.5px, 0.4cqi) solid var(--ah-ink); outline: max(1px, 0.2cqi) solid var(--ah-ink); outline-offset: -1.2cqi; pointer-events: none; opacity: 0.85; }
.ab-poster__top {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 2.6cqi;
  margin: 1.2cqi 2cqi 0; padding: 1.5cqi 0 1.2cqi; background: var(--ah-ink); color: var(--paper);
  font: 900 max(11px, 3.6cqi)/1 var(--ah-display); letter-spacing: 0.32em; text-transform: uppercase;
}
.ab-poster__top i { font-style: normal; letter-spacing: 0; color: var(--ah-neon-pink); }
.ab-poster__bill { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1.4cqi; margin: 3.6cqi 2cqi 0; }
.ab-poster__name { display: block; font: 900 12.4cqi/0.8 var(--ah-display); letter-spacing: 0.01em; text-transform: uppercase; white-space: nowrap; }
.ab-poster__name > span { display: block; margin-top: 0.06em; }
.ab-poster__name--us { color: var(--ah-blue-ink); text-shadow: 0.05em 0.05em 0 var(--ah-ink); }
.ab-poster__name--them { color: var(--ah-ink); text-align: right; text-shadow: 0.05em 0.05em 0 var(--ah-red-ink); }
/* the VS roundel: a pink starburst, outlined in ink */
.ab-poster__vs { position: relative; display: grid; place-items: center; width: 15.5cqi; aspect-ratio: 1; filter: var(--ah-outline); rotate: -10deg; }
.ab-poster__vs::before { content: ""; position: absolute; inset: 0; background: var(--ah-neon-pink); clip-path: polygon(50.0% 0.0%, 59.1% 10.0%, 71.7% 5.0%, 75.6% 17.9%, 89.1% 18.8%, 86.9% 32.2%, 98.7% 38.9%, 91.0% 50.0%, 98.7% 61.1%, 86.9% 67.8%, 89.1% 81.2%, 75.6% 82.1%, 71.7% 95.0%, 59.1% 90.0%, 50.0% 100.0%, 40.9% 90.0%, 28.3% 95.0%, 24.4% 82.1%, 10.9% 81.2%, 13.1% 67.8%, 1.3% 61.1%, 9.0% 50.0%, 1.3% 38.9%, 13.1% 32.2%, 10.9% 18.8%, 24.4% 17.9%, 28.3% 5.0%, 40.9% 10.0%); }
.ab-poster__vs span { position: relative; color: var(--ah-ink); font: 900 6.6cqi/1 var(--ah-display); text-transform: uppercase; letter-spacing: 0.02em; }
/* the ring: our corner (blue rays, the crew) and theirs (red rays, the stereotype) */
.ab-poster__ring { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 56cqi; margin: 3cqi -4.4cqi 0; border-top: max(2px, 0.5cqi) solid var(--ah-ink); }
.ab-poster__corner { position: relative; display: block; overflow: hidden; }
.ab-poster__corner--us { background: repeating-conic-gradient(from -3deg at 34% 44%, rgba(27, 141, 246, 0.36) 0 7deg, transparent 7deg 16deg); }
.ab-poster__corner--them { border-left: max(2px, 0.5cqi) solid var(--ah-ink); background: repeating-conic-gradient(from 2deg at 52% 40%, rgba(180, 35, 24, 0.24) 0 7deg, transparent 7deg 16deg); }
.ab-poster__face {
  position: absolute; left: var(--x); top: var(--y); display: block; width: var(--s); aspect-ratio: 1; overflow: hidden;
  border: max(2px, 0.6cqi) solid var(--ah-ink); border-radius: 50%; background: var(--ah-cream);
  box-shadow: 0.9cqi 0.9cqi 0 var(--ah-ink);
}
.ab-poster__face img { width: 100%; height: 100%; object-fit: cover; }
/* printed: a fine halftone screen over every photo */
.ab-poster__face::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(3, 6, 13, 0.2) 0.7px, transparent 1.1px) 0 0 / 4px 4px; pointer-events: none; }
.ab-poster__face--jeff { --s: 25cqi; --x: 4cqi; --y: 5cqi; z-index: 2; }
.ab-poster__face--jeff img { transform: scale(1.9); transform-origin: 51% 33%; }
.ab-poster__face--shell { --s: 17cqi; --x: 29cqi; --y: 2cqi; }
.ab-poster__face--shane { --s: 17cqi; --x: 31cqi; --y: 19.5cqi; z-index: 1; }
.ab-poster__face--shane img { transform: scale(1.15); transform-origin: 60% 40%; }
.ab-poster__face--isabel { --s: 17cqi; --x: 6cqi; --y: 31cqi; z-index: 1; }
.ab-poster__face--isabel img { transform: scale(1.3); transform-origin: 48% 42%; }
.ab-poster__dog { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.ab-poster__face--sammy { --s: 15cqi; --x: 27.5cqi; --y: 37cqi; z-index: 3; }
.ab-poster__face--sammy img { transform: scale(1.18); transform-origin: 50% 30%; }
/* anchored from the divider side, so the 10px floor on small phones grows it leftward instead of under the divider (it clipped at 320) */
.ab-poster__dogtag { position: absolute; z-index: 4; right: 2.4cqi; top: 49cqi; --tilt: -5deg; font-size: max(10px, 2.8cqi); padding: 0.4em 0.6em 0.32em; white-space: nowrap; }
.ab-poster__stigma { position: absolute; left: 50%; bottom: 0; width: 44cqi; height: auto; translate: -50% 0; overflow: visible; }
.ab-st__coat { fill: #142039; stroke: var(--ah-ink); stroke-width: 3; stroke-linejoin: round; }
.ab-st__lapel { fill: none; stroke: #4a5873; stroke-width: 3; stroke-linejoin: round; }
.ab-st__belt { stroke: #4a5873; stroke-width: 5; }
.ab-st__btn { fill: #4a5873; stroke: var(--ah-ink); stroke-width: 1.5; }
.ab-st__collar { fill: #1d2c4b; stroke: var(--ah-ink); stroke-width: 3; stroke-linejoin: round; }
.ab-st__head { fill: #0b1424; stroke: var(--ah-ink); stroke-width: 3; }
.ab-st__eyes { stroke: #f3e8cc; stroke-width: 3.2; stroke-linecap: round; }
.ab-st__crown { fill: #1d2c4b; stroke: var(--ah-ink); stroke-width: 3; stroke-linejoin: round; }
.ab-st__band { fill: var(--ah-red-ink); stroke: var(--ah-ink); stroke-width: 2.4; }
.ab-st__brim { fill: #142039; stroke: var(--ah-ink); stroke-width: 3; stroke-linejoin: round; }
.ab-st__dent { fill: none; stroke: #4a5873; stroke-width: 2.4; stroke-linecap: round; }
/* pasted up: the poster slaps onto the wall once (pure CSS, finished without JS, off with reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  html.motion .ab-poster { animation: ab-paste 0.75s var(--ease-back) 0.35s both; }
}
@keyframes ab-paste { from { opacity: 0; transform: translate(-6px, -16px) scale(1.07) rotate(-3deg); } }

/* --------------------------------------------------------------------------
   WHO WE ARE: the storefront window. Sign-painted lettering on the glass (cream:
   gold stays on small objects), the rules sign hanging inside on two strings,
   and the credentials lettered low on the glass like store hours.
   -------------------------------------------------------------------------- */
.ab-who { --deco-at: 100% 0; --deco-size: 42% 60%; }
.ab-who .ah-head { margin-bottom: clamp(26px, 3.4vw, 44px); }
.ab-window { position: relative; width: min(100%, 1040px); margin: 0 auto; }
.ab-window__frame {
  position: relative; padding: clamp(10px, 1.5vw, 16px);
  border: 2px solid var(--ah-950); border-radius: 8px 8px 2px 2px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 9px), linear-gradient(180deg, #22355c, #16264a 60%, #101d3a);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.14), inset 0 -2px 0 rgba(3, 6, 13, 0.4), 9px 9px 0 rgba(0, 0, 0, 0.55);
}
.ab-window__glass {
  --gp: clamp(30px, 4vw, 54px);
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px;
  padding: var(--gp) clamp(18px, 4vw, 56px) clamp(26px, 3.6vw, 46px);
  border: 2px solid var(--ah-950); border-radius: 3px; background-color: #0a1324;
}
/* the shop inside, lit low after close (printed light, no blur) */
.ab-window__glass::before {
  content: ""; position: absolute; z-index: -2; inset: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 214, 160, 0.3) 1.3px, transparent 1.8px) 0 0 / 10px 10px;
  -webkit-mask-image: radial-gradient(70% 80% at 72% 100%, #000 10%, transparent 100%);
  mask-image: radial-gradient(70% 80% at 72% 100%, #000 10%, transparent 100%);
}
/* the streetlight on the glass */
.ab-window__glass::after {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 0 20%, rgba(200, 230, 255, 0.075) 20% 29%, transparent 29% 33%, rgba(200, 230, 255, 0.05) 33% 36%, transparent 36% 70%, rgba(200, 230, 255, 0.045) 70% 74%, transparent 74%);
}
.ab-window__letters { position: relative; min-width: 0; }
.ab-window__name {
  color: var(--ah-cream); font: 900 clamp(3rem, 1.3rem + 6.2vw, 6.8rem)/0.84 var(--ah-display); letter-spacing: 0.035em; text-transform: uppercase;
  text-shadow: 0.03em 0.03em 0 var(--ah-blue-deep), 0.06em 0.06em 0 var(--ah-950);
}
/* the sign painter's pinstripe under the name */
.ab-window__letters::after { content: ""; display: block; width: min(100%, 420px); height: 7px; margin: 18px 0 14px; border-block: 2px solid var(--ah-sky); opacity: 0.75; }
.ab-window__line { max-width: 22em; color: var(--ah-sky); font: 800 clamp(1.2rem, 0.92rem + 1vw, 1.75rem)/1.12 var(--ah-display); letter-spacing: 0.07em; text-transform: uppercase; }
.ab-window__sign { position: relative; justify-self: center; width: min(100%, 320px); padding-top: 34px; }
.ab-window__strings { position: absolute; left: 18%; right: 18%; top: calc(var(--gp) * -1); height: calc(var(--gp) + 46px); border-inline: 2px solid #d8cba8; border-top: 0; }
.ab-window__strings::before { content: ""; position: absolute; left: 50%; top: 0; width: 34px; height: 12px; margin-left: -17px; border: 2px solid var(--ah-950); border-top: 0; border-radius: 0 0 6px 6px; background: linear-gradient(180deg, var(--ah-brass-hi), var(--ah-brass) 60%, var(--ah-brass-lo)); }
.ab-window__card {
  position: relative; padding: 26px 22px 22px; text-align: center;
  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: 5px 5px 0 var(--ah-neon-pink); rotate: 1deg; transform-origin: 50% -40px;
}
.ab-window__card::before { content: ""; position: absolute; inset: 6px; border: 2px solid var(--ah-ink); border-radius: 4px; pointer-events: none; }
.ab-window__card::after { content: ""; position: absolute; left: 18%; right: 18%; top: 8px; height: 10px; background: radial-gradient(circle, #0a1324 0 4px, var(--ah-950) 4.5px 5.5px, transparent 6px) 0 50% / 10px 10px no-repeat, radial-gradient(circle, #0a1324 0 4px, var(--ah-950) 4.5px 5.5px, transparent 6px) 100% 50% / 10px 10px no-repeat; margin-inline: -5px; }
.ab-window__rule { color: var(--ah-ink); font: 900 clamp(1.6rem, 1.25rem + 1.1vw, 2.2rem)/0.95 var(--ah-display); letter-spacing: 0.02em; text-transform: uppercase; }
.ab-window__rule2 { margin-top: 10px; color: var(--ah-ink-2); font-size: 1rem; font-weight: 700; line-height: 1.4; }
.ab-hours { display: grid; gap: 0; max-width: 560px; margin: 0; padding: 0; list-style: none; }
.ab-hours li { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 10px 0 9px; border-bottom: 1.5px dashed rgba(246, 239, 221, 0.32); color: var(--ah-cream); font-size: 1.04rem; font-weight: 600; line-height: 1.3; }
.ab-hours li:first-child { border-top: 1.5px dashed rgba(246, 239, 221, 0.32); }
.ab-hours b { color: var(--ah-paper); font: 900 1.45rem/1 var(--ah-display); letter-spacing: 0.06em; text-transform: uppercase; }
.ab-window__sill { position: relative; height: 18px; margin: 0 -14px; border: 2px solid var(--ah-950); border-radius: 3px; background: linear-gradient(180deg, #8996a8, #5d6a7d 40%, #3a4660); box-shadow: 9px 6px 0 rgba(0, 0, 0, 0.5); }
@media (min-width: 880px) {
  .ab-window__glass { grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.8fr); grid-template-areas: "letters sign" "hours sign"; column-gap: clamp(28px, 4vw, 60px); row-gap: 40px; }
  .ab-window__letters { grid-area: letters; }
  .ab-window__sign { grid-area: sign; align-self: start; padding-top: clamp(60px, 7vw, 104px); }
  .ab-window__strings { height: calc(var(--gp) + clamp(60px, 7vw, 104px) + 12px); }
  .ab-hours { grid-area: hours; align-self: end; }
}
@media (max-width: 879px) { .ab-window__sign { padding-top: 22px; } .ab-window__strings { top: -34px; height: 58px; } }
@media (max-width: 420px) { .ab-hours li { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
/* the sign on its strings swings once when the window comes into view */
@media (prefers-reduced-motion: no-preference) {
  .ab-window.is-play .ab-window__card { animation: ab-sign 2.2s var(--ease-out) 0.3s; }
}
@keyframes ab-sign { 0% { rotate: 1deg; } 18% { rotate: -3deg; } 40% { rotate: 2.2deg; } 62% { rotate: -0.6deg; } 100% { rotate: 1deg; } }

/* --------------------------------------------------------------------------
   BELIEFS: the back-office corkboard. Each belief on an index card, and beside it
   one real thing pinned up: a real post, a sample AI reply, a photo still to come.
   -------------------------------------------------------------------------- */
.ab-cork {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 54px;
  padding: clamp(34px, 4vw, 54px) clamp(14px, 3.2vw, 44px) clamp(38px, 4vw, 58px);
  border: clamp(10px, 1.3vw, 16px) solid #4a2f1a; border-radius: 6px;
  background-color: #6d4f33;
  background-image:
    linear-gradient(rgba(7, 13, 26, 0.22), rgba(7, 13, 26, 0.22)),
    radial-gradient(circle at 20% 30%, rgba(52, 30, 12, 0.6) 0 1.1px, transparent 1.6px),
    radial-gradient(circle at 70% 60%, rgba(255, 226, 180, 0.2) 0 1px, transparent 1.5px),
    radial-gradient(circle at 45% 80%, rgba(52, 30, 12, 0.45) 0 1.5px, transparent 2px),
    var(--ah-grain);
  background-size: auto, 9px 9px, 11px 13px, 17px 15px, 160px 160px;
  box-shadow: 0 0 0 2px var(--ah-950), inset 0 0 0 2px var(--ah-950), inset 0 4px 0 rgba(0, 0, 0, 0.25), 10px 10px 0 2px rgba(0, 0, 0, 0.55);
}
.ab-belief { position: relative; display: grid; gap: 30px; align-content: start; min-width: 0; }
/* from tablets up: each belief is a row, the card on one side and its proof pinned beside it,
   zigzagging down the board (never three cards in a row) */
@media (min-width: 640px) {
  .ab-cork { gap: clamp(46px, 5vw, 64px); }
  .ab-belief { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr); align-items: center; gap: clamp(26px, 4vw, 60px); }
  .ab-belief--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); }
  .ab-belief--2 .ab-note { order: 2; }
}
@media (min-width: 980px) {
  .ab-cork { max-width: 1080px; margin-inline: auto; }
  .ab-belief--1 { padding-right: 4%; }
  .ab-belief--2 { padding-left: 2%; }
  .ab-belief--3 { padding-right: 8%; }
  .ab-note { max-width: 440px; }
  .ab-belief--2 .ab-note { justify-self: end; }
}
.ab-pushpin { position: absolute; z-index: 4; top: -10px; left: 50%; width: 20px; height: 20px; margin-left: -10px; border: 2px solid var(--ah-950); border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff 0 12%, var(--pin) 34%, var(--pin-lo) 100%); box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.5); }
.ab-pushpin--red { --pin: #e0453a; --pin-lo: #7a140d; }
.ab-pushpin--blue { --pin: var(--ah-blue); --pin-lo: #0a3f7a; }
.ab-pushpin--gold { --pin: var(--ah-gold); --pin-lo: var(--ah-brass-lo); }
/* the index card */
.ab-note {
  --r: -0.8deg; position: relative; padding: 30px clamp(18px, 2vw, 24px) 22px;
  border: 2px solid var(--ah-950); border-radius: 3px;
  background-color: #fbf7ec; color: var(--ah-ink); box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5); rotate: var(--r);
}
.ab-belief--2 .ab-note { --r: 0.7deg; }
.ab-belief--3 .ab-note { --r: -0.4deg; }
.ab-note__h { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 2px solid rgba(180, 35, 24, 0.6); color: var(--ah-ink); font: 900 clamp(1.5rem, 1.15rem + 0.9vw, 1.9rem)/1 var(--ah-display); letter-spacing: 0.02em; text-transform: uppercase; text-wrap: balance; }
/* the blue rules are printed on the writing itself, one per 28px line, so every line of text sits on its rule
   (a card-wide rule pattern drifted against the text and cut through it by the third line) */
.ab-note p { color: var(--ah-ink-2); font-size: 1.03rem; line-height: 28px; background: repeating-linear-gradient(180deg, transparent 0 27px, rgba(21, 101, 192, 0.16) 27px 28px); }
.ab-note p + p { margin-top: 8px; }
/* the pinned things */
.ab-pins { position: relative; display: flex; justify-content: center; gap: 16px; align-items: flex-start; min-width: 0; }
.ab-pin { --r: 1.4deg; position: relative; flex: 1 1 auto; min-width: 0; margin: 0; rotate: var(--r); }
.ab-pin .ab-pushpin { top: -8px; }
.ab-pin__shot {
  position: relative; display: block; width: 100%; padding: 8px 8px 12px; margin: 0;
  border: 2px solid var(--ah-950); border-radius: 3px; background: #fbfaf6; cursor: zoom-in;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5); -webkit-tap-highlight-color: transparent;
  transition: rotate 0.35s var(--ease-back), translate 0.35s var(--ease-back);
}
.ab-pin__shot img { display: block; width: 100%; border: 1.5px solid rgba(11, 20, 36, 0.2); border-radius: 2px; }
.ab-pin__shot:hover, .ab-pin__shot:focus-visible { rotate: calc(var(--r) * -1); translate: 0 -4px; }
.ab-pin__shot:focus-visible { outline: 3px solid var(--ah-sky); outline-offset: 4px; }
.ab-pin__tag {
  position: absolute; left: 12px; 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), 2px 2px 0 var(--ah-950); rotate: -2.5deg;
}
.ab-pin--nick { --r: 1.6deg; order: -1; flex: 1 1 100%; max-width: 470px; }
.ab-pin--nick img { aspect-ratio: 1014 / 494; object-fit: cover; object-position: 50% 0; }
.ab-pin--jason { --r: -1.4deg; width: min(100%, 420px); margin-inline: auto; }
/* the trade show photo still to come: an empty polaroid with a dashed window */
.ab-pin--todo { --r: -3deg; flex: 0 0 auto; width: 150px; margin-top: 0; padding: 8px 8px 30px; border: 2px solid var(--ah-950); border-radius: 2px; background: #fbfaf6; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5); }
.ab-pin__blank { display: grid; place-content: center; gap: 4px; aspect-ratio: 1; padding: 6px; border: 2px dashed rgba(11, 20, 36, 0.45); background: repeating-linear-gradient(135deg, rgba(11, 20, 36, 0.04) 0 8px, transparent 8px 16px); color: var(--ah-ink-2); text-align: center; font: 600 0.8rem/1.25 var(--ah-body); }
.ab-pin__blank b { color: var(--ah-ink); font: 900 0.98rem/1.05 var(--ah-display); letter-spacing: 0.04em; text-transform: uppercase; }
/* the AI reply, printed and pinned (the same sample the Google Reviews page shows) */
.ab-pin--reply { --r: -1deg; width: min(100%, 400px); margin-inline: auto; }
.ab-pin--reply .ah-sample { top: -14px; right: 10px; }
.ab-reply {
  padding: 20px 16px 18px; border: 2px solid var(--ah-950); border-radius: 2px; background: #fdfbf4; color: var(--ah-ink);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5);
}
.ab-reply__who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 0.98rem; }
.ab-reply__who b { font-weight: 800; }
.ab-reply__ava { display: grid; place-items: center; width: 30px; height: 30px; border: 1.5px solid var(--ah-950); border-radius: 50%; background: var(--ah-blue-deep); color: #fff; font: 900 0.95rem/1 var(--ah-display); }
.ab-reply__stars { color: #a86f08; font-size: 1rem; letter-spacing: 0.08em; }
.ab-reply__text { margin-top: 8px; color: var(--ah-ink); font-size: 0.96rem; line-height: 1.48; }
.ab-reply__head { margin-top: 14px; padding-top: 12px; border-top: 1.5px dashed rgba(11, 20, 36, 0.3); color: var(--ah-blue-ink); font: 700 0.74rem/1.35 var(--ah-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.ab-reply__head b { font-weight: 800; }
.ab-reply__text--us { margin-top: 8px; padding: 10px 12px; border-radius: 8px; background: rgba(21, 101, 192, 0.08); }
.ab-belief--1 .ab-pins { flex-wrap: wrap; row-gap: 26px; }
@media (max-width: 979px) { .ab-pin--nick { max-width: 380px; } }
/* wide boards: the polaroid sits to the right under the post, its top edge tucked over the post's blank corner */
@media (min-width: 980px) { .ab-pin--todo { margin: -40px -12px 0 auto; } }
@media (max-width: 639px) {
  .ab-cork { gap: 50px; }
  .ab-pin__blank { font-size: 0.74rem; }
  .ab-pin__blank b { font-size: 0.86rem; }
}

/* --------------------------------------------------------------------------
   TEAM: a short velvet valance under the picture rail, the time cards hung on hooks
   on the steel rack, and the owner's note under it
   -------------------------------------------------------------------------- */
.ab-team { padding-top: calc(var(--pad-y) + 44px); }
.ab-team::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 12%; width: min(1100px, 120vw); height: 80%; translate: -50% 0; pointer-events: none; background: radial-gradient(circle, rgba(173, 229, 255, 0.18) 1.4px, transparent 1.9px) 0 0 / 10px 10px; -webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent 100%); mask-image: radial-gradient(closest-side, #000 25%, transparent 100%); }
.ab-valance { position: absolute; z-index: 1; left: 0; right: 0; top: 18px; height: 50px; pointer-events: none; filter: drop-shadow(0 2px 0 var(--ah-950)) drop-shadow(0 6px 0 rgba(0, 0, 0, 0.4)); }
.ab-valance::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4), transparent 34%), repeating-linear-gradient(90deg, #0c1a3c 0, #1f3a78 10px, #2a4a92 15px, #142a5c 23px, #08142f 32px);
  -webkit-mask: linear-gradient(#000, #000) 0 0 / 100% 32px no-repeat, radial-gradient(circle 16px at 16px 32px, #000 97%, transparent 100%) 0 0 / 32px 50px repeat-x;
  mask: linear-gradient(#000, #000) 0 0 / 100% 32px no-repeat, radial-gradient(circle 16px at 16px 32px, #000 97%, transparent 100%) 0 0 / 32px 50px repeat-x;
}
.ab-team .ah-wrap { position: relative; z-index: 1; }
.ab-team__h { margin-bottom: clamp(36px, 5vw, 60px); text-align: center; }
/* the rack: a brushed-steel plate on the back-room wall, a brass hook per card */
.ab-rack {
  position: relative; max-width: 940px; margin: 0 auto; padding: clamp(28px, 3.4vw, 40px) clamp(18px, 3.4vw, 40px) clamp(28px, 3vw, 36px);
  border: 2px solid var(--ah-950); border-radius: 10px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px), linear-gradient(180deg, #3a4456, #262e3e 55%, #1a202c);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.ab-rack::before, .ab-rack::after { content: ""; position: absolute; top: 10px; width: 11px; height: 11px; 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); }
.ab-rack::before { left: 10px; } .ab-rack::after { right: 10px; }
.ab-rack__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(18px, 3vw, 34px); margin: 0; padding: 0; list-style: none; }
.ab-tc { --r: -1deg; position: relative; padding-top: 12px; }
.ab-tc:nth-child(2) { --r: 0.9deg; } .ab-tc:nth-child(3) { --r: -0.5deg; } .ab-tc:nth-child(4) { --r: 1deg; } .ab-tc:nth-child(5) { --r: -0.8deg; } .ab-tc:nth-child(6) { --r: 0.7deg; }
/* the brass hook the card hangs on */
.ab-tc::before { content: ""; position: absolute; z-index: 3; left: 50%; top: 4px; width: 16px; height: 16px; margin-left: -8px; border: 2px solid var(--ah-950); border-radius: 50%; background: radial-gradient(circle at 35% 32%, var(--ah-brass-hi), var(--ah-brass) 55%, var(--ah-brass-lo)); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45); }
.ab-tc__card {
  position: relative; z-index: 1; padding: 26px 10px 48px;
  border: 2px solid var(--ah-950); border-radius: 3px;
  background-color: #f8f2e2; background-image: var(--ah-fiber);
  color: var(--ah-ink); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
  rotate: var(--r); transform-origin: 50% 12px;
  transition: rotate 0.45s var(--ease-back), translate 0.45s var(--ease-back);
}
/* the punched hole at the top */
.ab-tc__card::before { content: ""; position: absolute; left: 50%; top: 5px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #262e3e; box-shadow: inset 0 0 0 2px rgba(11, 20, 36, 0.5); }
/* the punch rows printed at the foot of the card */
.ab-tc__card::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 10px; height: 26px; pointer-events: none;
  background:
    linear-gradient(rgba(11, 20, 36, 0.28), rgba(11, 20, 36, 0.28)) 0 0 / 100% 1.5px no-repeat,
    linear-gradient(rgba(11, 20, 36, 0.18), rgba(11, 20, 36, 0.18)) 0 12px / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0 46%, rgba(11, 20, 36, 0.18) 46% calc(46% + 1px), transparent calc(46% + 1px)) 0 0 / 100% 100% no-repeat,
    repeating-linear-gradient(90deg, rgba(122, 52, 140, 0.55) 0 14px, transparent 14px 22px) 6px 4px / 30% 5px no-repeat,
    repeating-linear-gradient(90deg, rgba(122, 52, 140, 0.55) 0 14px, transparent 14px 22px) calc(46% + 8px) 4px / 30% 5px no-repeat,
    repeating-linear-gradient(90deg, rgba(122, 52, 140, 0.4) 0 14px, transparent 14px 22px) 6px 16px / 20% 5px no-repeat;
}
.ab-tc:hover .ab-tc__card, .ab-tc:focus-within .ab-tc__card { rotate: 0deg; translate: 0 -6px; }
.ab-tc__head { display: flex; justify-content: space-between; gap: 6px; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 2px solid var(--ah-ink); color: var(--ah-ink-2); font: 800 0.68rem/1.2 var(--ah-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.ab-tc__no { color: var(--ah-red-ink); white-space: nowrap; }
.ab-tc__photo { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border: 1.5px solid rgba(11, 20, 36, 0.35); }
.ab-tc .ah-pet__face { border: 1.5px solid rgba(11, 20, 36, 0.35); }
.ab-tc__name { margin-top: 10px; color: var(--ah-ink); font: 900 clamp(1.15rem, 1rem + 0.6vw, 1.45rem)/1 var(--ah-display); letter-spacing: 0.03em; text-transform: uppercase; }
.ab-tc__role { margin-top: 4px; color: var(--ah-ink-2); font-size: 0.92rem; font-weight: 600; line-height: 1.3; }
/* the job line: a write-in field still waiting on Jeff (a visible placeholder) */
.ab-tc__job { margin-top: 10px; }
.ab-blank { display: inline-block; max-width: 100%; padding: 4px 8px 3px; border: 1.5px dashed rgba(11, 20, 36, 0.5); border-radius: 3px; color: var(--ah-ink-2); font: 700 0.72rem/1.3 var(--ah-mono); letter-spacing: 0.06em; text-transform: uppercase; }
/* the rest of the crew: a stack of blue cards */
.ab-tc--more .ab-tc__card {
  background-color: var(--ah-blue); background-image: none;
  box-shadow: -7px -7px 0 -2px #67b3fa, -7px -7px 0 0 var(--ah-950), -13px -13px 0 -2px #9fd0fd, -13px -13px 0 0 var(--ah-950), 4px 4px 0 rgba(0, 0, 0, 0.5);
}
.ab-tc--more .ab-tc__head { border-bottom-color: var(--ah-ink); color: var(--ah-ink); }
.ab-tc--more .ab-tc__no { color: var(--ah-ink); }
.ab-tc--more .ab-tc__role { color: var(--ah-ink); font-weight: 700; }
.ab-tc--more .ab-tc__card::after { opacity: 0.6; }
.ab-tc--more .ab-tc__card::before { background: #1f2836; }
.ab-tc__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, 5rem)/1 var(--ah-display); text-shadow: 0.05em 0.05em 0 var(--ah-blue-deep); }
.ab-tc__note { position: absolute; z-index: 3; right: -16px; top: -30px; font-size: 1rem; rotate: 7deg; }
.ab-tc__note .ah-hand__arrow { width: 38px; height: 28px; margin-top: 10px; }
html:not(.js) .ab-tc__note { display: none; }
/* the owner's note, taped under the rack (Jeff's story goes here) */
.ab-owner {
  position: relative; max-width: 560px; margin: clamp(46px, 5vw, 64px) auto 0; padding: 22px clamp(18px, 3vw, 26px) 24px;
  border: 2px solid var(--ah-950); border-radius: 3px;
  background-color: #fbf7ec; background-image: repeating-linear-gradient(180deg, transparent 0 27px, rgba(21, 101, 192, 0.13) 27px 28px);
  color: var(--ah-ink); box-shadow: 6px 6px 0 var(--ah-blue); rotate: -0.6deg;
}
.ab-owner::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; }
.ab-owner__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid var(--ah-ink); color: var(--ah-red-ink); font: 800 0.74rem/1.2 var(--ah-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.ab-owner__head span + span { color: var(--ah-ink-2); }
.ab-owner__blank .ab-blank { display: block; padding: 22px 12px; text-align: center; font-size: 0.78rem; }
@media (max-width: 699px) {
  .ab-rack { padding-inline: 14px; }
  .ab-rack__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 16px; }
  .ab-tc__card { padding: 24px 8px 44px; }
  .ab-tc__head { font-size: 0.6rem; letter-spacing: 0.08em; }
  .ab-tc__role { font-size: 0.86rem; }
  .ab-blank { font-size: 0.66rem; letter-spacing: 0.04em; }
  .ab-tc__note { right: -8px; top: -30px; font-size: 0.95rem; }
}
@media (max-width: 379px) {
  .ab-tc__head { gap: 4px; font-size: 0.54rem; letter-spacing: 0.05em; white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   WHAT WE RUN ALL DAY: the day book, open on the counter, still out after close.
   Its foot carries the flywheel we teach (the old flywheel section, folded in).
   -------------------------------------------------------------------------- */
/* desktop: the heading starts level with the top of the book and rides beside it while the page scrolls
   (centered on a 1,000px book it left the reader an empty half-screen and showed up mid-book) */
@media (min-width: 980px) {
  .ab-run .ah-split { align-items: start; }
  .ab-run .ah-split__copy { position: sticky; top: calc(var(--header-h) + 40px); padding-top: 28px; }
}
.ab-daybook { position: relative; isolation: isolate; width: min(100%, 600px); margin: 0 auto; padding: 0 16px 18px 0; }
/* the cloth cover under the page, with a brass corner */
.ab-daybook::before {
  content: ""; position: absolute; z-index: -2; left: -10px; top: 12px; right: 0; bottom: 0;
  border: 2px solid var(--ah-950); border-radius: 8px;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 5px), linear-gradient(160deg, #1a2d52, #101c33 60%, #0b1424);
  box-shadow: 9px 9px 0 rgba(0, 0, 0, 0.55);
}
.ab-daybook::after {
  content: ""; position: absolute; z-index: -1; right: -2px; bottom: -2px; width: 46px; height: 46px; pointer-events: none;
  border: 2px solid var(--ah-950); border-radius: 0 0 8px 0;
  background: linear-gradient(135deg, var(--ah-brass-hi), var(--ah-brass) 55%, var(--ah-brass-lo));
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
#run .ab-daybook__page { box-shadow: 3px 3px 0 rgba(3, 6, 13, 0.6); rotate: -0.4deg; }
.ab-daybook__ribbon { position: absolute; z-index: -1; right: 24%; bottom: -26px; width: 20px; height: 70px; background: linear-gradient(90deg, #d42f6c, var(--ah-neon-pink) 45%, #d42f6c); border-inline: 2px solid var(--ah-950); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); }
/* inline links in the entries: blue ink, a bigger touch area that never moves the line */
.ab-inline { padding: 0.45em 0.08em; margin: -0.45em -0.08em; color: var(--ah-blue-ink); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ab-inline:hover { color: var(--ah-ink); text-decoration-color: var(--ah-blue); }
.ab-inline:focus-visible { outline: 3px solid var(--ah-ink); outline-offset: 0; border-radius: 3px; }
/* the foot of the page: the flywheel, written as the loop it is */
.ab-wheel { margin: 4px calc(clamp(16px, 2.6vw, 28px) * -1) 0; padding: 18px clamp(16px, 2.6vw, 28px) 12px; border-top: 4px double var(--ah-ink); background: rgba(27, 141, 246, 0.07); }
.ab-wheel__h { color: var(--ah-ink); font: 900 clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem)/1 var(--ah-display); letter-spacing: 0.03em; text-transform: uppercase; }
.ab-wheel__p { margin-top: 6px; color: var(--ah-ink-2); font-size: 1rem; line-height: 1.5; }
.ab-wheel__loop { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.ab-wheel__loop li { display: inline-flex; align-items: center; gap: 7px; color: var(--ah-ink); font-size: 0.98rem; font-weight: 800; line-height: 1.2; }
.ab-wheel__loop li:not(:last-child)::after { content: ""; flex: none; width: 16px; height: 10px; margin-left: 1px; background: var(--ah-blue-ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 5h12M9 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 5h12M9 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.ab-wheel__n { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border: 1.5px solid var(--ah-ink); border-radius: 50%; background: #fffdf6; font: 900 0.82rem/1 var(--ah-display); }
.ab-wheel__hub { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--ah-blue-ink); font-size: 0.98rem; font-weight: 700; }
.ab-wheel__hub b { color: var(--ah-ink); font: 900 1.12rem/1 var(--ah-display); letter-spacing: 0.05em; text-transform: uppercase; }
.ab-wheel__back { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--ah-blue-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 520px) { .ab-daybook { padding-right: 10px; } .ab-wheel { margin-inline: -14px; padding-inline: 14px; } }

/* --------------------------------------------------------------------------
   FIT: the slip we take (stamped with a check), the slip on the spike (an X)
   -------------------------------------------------------------------------- */
.ab-fit__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 46px; align-items: start; max-width: 1060px; margin: 0 auto; }
@media (min-width: 900px) { .ab-fit__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); gap: clamp(40px, 5vw, 76px); } }
.ab-slip { --slip-pad: clamp(18px, 3vw, 32px); position: relative; padding: 0 var(--slip-pad) clamp(22px, 3vw, 30px); border: 2px solid var(--ah-950); border-radius: 6px; background-color: var(--ah-cream); background-image: var(--ah-fiber); color: var(--ah-ink); }
.ab-slip--yes { box-shadow: 7px 7px 0 var(--ah-blue); rotate: -0.6deg; }
.ab-slip__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 calc(var(--slip-pad) * -1) 18px; padding: 18px var(--slip-pad) 14px; border-bottom: 4px double var(--ah-ink); }
.ab-slip__h { color: var(--ah-ink); font: 900 clamp(1.75rem, 1.3rem + 1.3vw, 2.5rem)/1 var(--ah-display); letter-spacing: 0.02em; text-transform: uppercase; }
.ab-slip p { max-width: 36em; color: var(--ah-ink-2); font-size: 1.05rem; line-height: 1.55; }
.ab-slip p + p { margin-top: 10px; }
.ab-slip .ab-slip__go { color: var(--ah-ink); font-weight: 800; }
.ab-slip__tags { margin: 20px 0 22px; }
#fit .ah-sticker { max-width: 100%; white-space: normal; line-height: 1.2; text-align: left; }
.ab-mark { flex: none; display: grid; place-items: center; width: 58px; height: 58px; border: 3.5px solid currentColor; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ah-cream), inset 0 0 0 4px currentColor; rotate: -10deg; -webkit-mask: var(--ah-speckle) 0 0 / 90px 90px; mask: var(--ah-speckle) 0 0 / 90px 90px; }
.ab-mark svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 3.8; stroke-linecap: round; stroke-linejoin: round; }
.ab-mark--yes { color: var(--ah-blue-ink); }
.ab-mark--no { color: var(--ah-red-ink); border-style: dashed; box-shadow: none; rotate: 9deg; }
.ab-spike { position: relative; width: min(100%, 420px); margin: 0 auto; padding: 44px 0 64px; }
@media (min-width: 900px) { .ab-spike { margin-top: 36px; } }
.ab-slip--no { z-index: 1; padding-top: 22px; background-color: #ebe4d1; box-shadow: 6px 6px 0 var(--ah-neon-pink); rotate: 1deg; transform-origin: 50% 0; }
.ab-slip--no .ab-slip__head { padding-top: 10px; }
.ab-spike__hole { position: absolute; left: 50%; top: 9px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: radial-gradient(circle, #03060d 0 34%, rgba(3, 6, 13, 0.28) 38% 62%, transparent 66%); }
.ab-spike__tip { position: absolute; z-index: 2; left: 50%; top: 10px; width: 7px; height: 48px; margin-left: -3.5px; background: linear-gradient(90deg, #5d6a7d, #f2f5f9 45%, #6f7c90); clip-path: polygon(50% 0, 100% 22%, 100% 100%, 0 100%, 0 22%); filter: drop-shadow(1.5px 0 0 var(--ah-950)) drop-shadow(-1.5px 0 0 var(--ah-950)); }
.ab-spike__rod { position: absolute; z-index: 0; left: 50%; top: 50px; bottom: 22px; width: 7px; margin-left: -3.5px; border: 1.5px solid var(--ah-950); background: linear-gradient(90deg, #5d6a7d, #e3e9f0 45%, #6f7c90); }
.ab-spike__base { position: absolute; z-index: 1; left: 50%; bottom: 0; width: 132px; height: 32px; margin-left: -66px; border: 2px solid var(--ah-950); border-radius: 66px / 14px; background: linear-gradient(180deg, #e3e9f0 0 34%, #9aa7b8 36%, #6f7c90 100%); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5); }
@media (prefers-reduced-motion: no-preference) {
  html.motion .ab-fit__grid:not(.is-play) .ab-mark { opacity: 0; transform: scale(1.8); }
  .ab-mark { transition: opacity 0.2s 0.45s, transform 0.4s var(--ease-back) 0.45s; }
  .ab-mark--no { transition-delay: 0.95s, 0.95s; }
  html.motion .ab-fit__grid:not(.is-play) .ab-slip--no { translate: 0 -46px; opacity: 0; }
  .ab-slip--no { transition: translate 0.45s cubic-bezier(0.5, 0, 0.75, 0) 0.6s, opacity 0.2s 0.6s; }
}

/* --------------------------------------------------------------------------
   THE FAMILY: a strip-mall pylon sign. One structure, one tenant panel per brand.
   -------------------------------------------------------------------------- */
.ab-family { --deco-at: 0 100%; --deco-size: 40% 55%; }
.ab-family .ah-split__copy .ah-h2 { max-width: 12em; }
.ab-pylon { position: relative; width: min(100%, 470px); margin: 0 auto; }
.ab-pylon__crown {
  position: relative; z-index: 2; margin: 0 16px -2px; padding: 10px 18px 6px;
  border: 2px solid var(--ah-950); border-radius: 22px 22px 0 0;
  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% 50%, 12.5% 100%; background-position: 0 10px, 10px 0;
  box-shadow: 8px 0 0 rgba(0, 0, 0, 0.55);
}
.ab-pylon__crown::before, .ab-pylon__crown::after { content: ""; position: absolute; top: 12px; 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); }
.ab-pylon__crown::before { left: 12px; } .ab-pylon__crown::after { right: 12px; }
.ab-pylon__neon { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 4px rgba(255, 63, 134, 0.95)); }
.ab-pylon__neon text { font: 900 50px/1 var(--ah-display); letter-spacing: 0.08em; text-anchor: middle; text-transform: uppercase; }
.ab-pylon__glow { fill: none; stroke: var(--ah-neon-pink); stroke-width: 7; stroke-opacity: 0.3; stroke-linejoin: round; }
.ab-pylon__tube { fill: none; stroke: var(--ah-neon-pink); stroke-width: 3.6; stroke-linejoin: round; }
.ab-pylon__core { fill: none; stroke: var(--ah-neon-pink-core); stroke-width: 1.2; stroke-linejoin: round; }
.ab-pylon__list {
  position: relative; z-index: 1; display: grid; gap: 10px; margin: 0; padding: 10px; list-style: none;
  border: 2px solid var(--ah-950); border-radius: 8px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px), linear-gradient(90deg, #2a3142, #4a5568 50%, #2a3142);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.55);
}
.ab-panel { position: relative; }
.ab-panel__face {
  position: relative; display: flex; align-items: center; gap: clamp(12px, 3vw, 18px); min-height: 104px; padding: 14px clamp(14px, 3vw, 22px);
  border: 2px solid var(--ah-950); border-radius: 4px; color: inherit; text-decoration: none;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.12), inset 0 12px 0 rgba(255, 255, 255, 0.07);
  -webkit-tap-highlight-color: transparent;
}
.ab-panel__face::after { content: ""; position: absolute; inset: 0; z-index: 2; background: rgba(3, 6, 13, 0.66); opacity: 0; pointer-events: none; }
.ab-panel__mark { position: relative; z-index: 1; flex: none; width: clamp(54px, 13vw, 70px); height: auto; filter: drop-shadow(2px 2px 0 rgba(3, 6, 13, 0.55)); }
.ab-panel__txt { position: relative; z-index: 1; display: grid; justify-items: start; min-width: 0; }
.ab-panel__name { font: 900 clamp(1.65rem, 1.25rem + 1.1vw, 2.2rem)/0.95 var(--ah-display); letter-spacing: 0.04em; text-transform: uppercase; }
.ab-panel__for { margin-top: 5px; font-size: 1rem; font-weight: 700; line-height: 1.3; }
.ab-panel__url { display: inline-flex; align-items: center; gap: 6px; margin-top: 7px; padding: 3px 8px 2px; border: 1.5px solid currentColor; border-radius: 4px; font: 700 0.8rem/1.2 var(--ah-mono); letter-spacing: 0.04em; }
.ab-panel__url svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ab-panel--pawn .ab-panel__face { background: radial-gradient(120% 140% at 20% 0, #1a2d52, #0b1424 70%); color: var(--ah-paper); box-shadow: 0 0 0 3px var(--ah-neon-blue-core), 0 0 0 5px var(--ah-neon-blue), 0 0 14px 3px rgba(47, 155, 255, 0.7), inset 0 0 0 3px rgba(255, 255, 255, 0.08); }
.ab-panel--pawn .ab-panel__name span { color: var(--ah-blue); }
.ab-panel--pawn .ab-panel__for { color: var(--ah-sky); }
.ab-panel__here { position: absolute; z-index: 3; top: -14px; right: 14px; --tilt: 4deg; }
.ab-panel--lawn .ab-panel__face { background: linear-gradient(180deg, #17663d, #0b4a2b 75%); color: #f6efdd; }
.ab-panel--coffee .ab-panel__face { background: linear-gradient(180deg, #45291a, #2b1a12 75%); color: #f6efdd; }
a.ab-panel__face { transition: translate 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); }
a.ab-panel__face:hover { translate: -2px -2px; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.2), inset 0 12px 0 rgba(255, 255, 255, 0.09), 4px 4px 0 var(--ah-950); }
a.ab-panel__face:hover .ab-panel__url { background: rgba(246, 239, 221, 0.14); }
a.ab-panel__face:focus-visible { outline: 3px solid var(--ah-sky); outline-offset: 3px; }
.ab-pylon__poles { position: relative; display: flex; justify-content: space-between; width: 52%; height: 74px; margin: 0 auto; }
.ab-pylon__poles i { width: 24px; height: 100%; border: 2px solid var(--ah-950); border-top: 0; background: linear-gradient(90deg, #5d6a7d, #c9d1dc 40%, #6f7c90); }
.ab-pylon__poles::after { content: ""; position: absolute; left: -26%; right: -26%; bottom: -12px; height: 14px; border: 2px solid var(--ah-950); border-radius: 3px; background: linear-gradient(180deg, #3a4660, #26314c); box-shadow: 0 5px 0 rgba(0, 0, 0, 0.45); }
@media (max-width: 420px) {
  .ab-panel__face { min-height: 96px; }
  .ab-panel__for { font-size: 0.95rem; }
  .ab-pylon__crown { margin-inline: 10px; padding-inline: 14px; }
}
@media (prefers-reduced-motion: no-preference) {
  html.motion .ab-pylon:not(.is-play) .ab-panel__face::after { opacity: 1; }
  html.motion .ab-pylon:not(.is-play) .ab-pylon__neon { opacity: 0.08; }
  .ab-pylon.is-play .ab-pylon__neon { animation: ah-ignite 1.1s 0.15s both; }
  .ab-pylon.is-play .ab-panel__face::after { animation: ab-flick 0.9s both; }
  .ab-pylon.is-play .ab-panel--pawn .ab-panel__face::after { animation-delay: 0.55s; }
  .ab-pylon.is-play .ab-panel--lawn .ab-panel__face::after { animation-delay: 0.95s; }
  .ab-pylon.is-play .ab-panel--coffee .ab-panel__face::after { animation-delay: 1.3s; }
}
@keyframes ab-flick { 0% { opacity: 1; } 12% { opacity: 0.15; } 18% { opacity: 0.9; } 30% { opacity: 0; } 36% { opacity: 0.55; } 48%, 100% { opacity: 0; } }

/* --------------------------------------------------------------------------
   BOOK: the words on a sheet of the same poster stock, and the service bell on
   the counter beside it. The bell is a real link (index.html#book); with JS it
   dings and opens the confirm card first (HANDOFF: never straight to the calendar).
   -------------------------------------------------------------------------- */
/* filter and clip-path on one box would clip the outline: the torn paper is the ::before, the words ride on top */
.ab-bill {
  position: relative; isolation: isolate; width: min(100%, 540px); justify-self: center;
  padding: clamp(30px, 4vw, 44px) clamp(22px, 4vw, 40px) clamp(28px, 3.6vw, 38px);
  color: var(--ah-ink); filter: var(--ah-outline) drop-shadow(7px 7px 0 var(--ah-neon-pink));
  rotate: -0.8deg;
}
.ab-bill::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background-color: #f3e8cc; background-image: linear-gradient(101deg, transparent 63%, rgba(11, 20, 36, 0.06) 63.3%, transparent 64%), var(--ah-fiber);
  clip-path: polygon(0.8% 2%, 3% 0.4%, 5.2% 1.3%, 7.4% 0, 50% 0.6%, 93% 0, 95.4% 1.1%, 97.6% 0.2%, 100% 2.2%, 99.5% 50%, 100% 97.6%, 97.4% 100%, 50% 99.4%, 6.6% 100%, 3.8% 98.8%, 1.2% 100%, 0 97.4%, 0.5% 50%);
}
.ab-bill::after { content: ""; position: absolute; z-index: -1; inset: 12px; border: 2px solid var(--ah-ink); outline: 1px solid var(--ah-ink); outline-offset: -6px; opacity: 0.8; pointer-events: none; }
.ab-book .ab-bill .ah-h2 { color: var(--ah-ink); text-shadow: 0.04em 0.04em 0 var(--ah-blue); }
.ab-book .ab-bill p { color: var(--ah-ink-2); font-weight: 600; }
.ab-bill__actions { margin-top: 26px; }
.ab-bill :focus-visible { outline-color: var(--ah-ink); }
/* the counter, with the bell on it */
/* the counter: the counter card (the original launcher's words) standing beside the bell */
.ab-desk {
  position: relative; display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr); grid-template-areas: "card bell" "top top";
  align-items: end; column-gap: 10px; width: min(100%, 520px); min-height: 330px; margin: 0 auto; padding: 44px 20px 0;
}
.ab-desk__card {
  grid-area: card; position: relative; z-index: 1; align-self: end; margin: 0 0 6px; padding: 18px 16px 18px;
  border: 2px solid var(--ah-950); border-radius: 4px; background-color: var(--ah-cream); background-image: var(--ah-fiber);
  color: var(--ah-ink); box-shadow: 5px 5px 0 var(--ah-blue); rotate: -1deg;
}
/* the little brass easel behind it */
.ab-desk__card::after { content: ""; position: absolute; z-index: -1; left: 50%; bottom: -8px; width: 46%; height: 12px; margin-left: -23%; border: 2px solid var(--ah-950); border-radius: 2px; background: linear-gradient(180deg, var(--ah-brass-hi), var(--ah-brass) 60%, var(--ah-brass-lo)); }
.ab-desk__h { padding-bottom: 8px; margin-bottom: 8px; border-bottom: 2px solid rgba(180, 35, 24, 0.6); color: var(--ah-ink); font: 900 clamp(1.3rem, 1.1rem + 0.6vw, 1.55rem)/0.98 var(--ah-display); letter-spacing: 0.02em; text-transform: uppercase; }
.ab-desk__p { color: var(--ah-ink-2); font-size: 0.95rem; font-weight: 600; line-height: 1.42; }
/* the counter: a lit top edge, then the front face the nameplate is screwed to */
.ab-desk__top {
  grid-area: top; justify-self: center; position: relative; z-index: 0; width: calc(100% + 40px); height: 84px; margin-top: -14px;
  border: 2px solid var(--ah-950); border-radius: 4px 4px 2px 2px;
  background:
    linear-gradient(180deg, rgba(255, 220, 170, 0.28), transparent 4px) 0 0 / 100% 18px no-repeat,
    repeating-linear-gradient(177deg, rgba(0, 0, 0, 0.14) 0 2px, transparent 2px 11px) 0 0 / 100% 18px no-repeat,
    linear-gradient(180deg, #93613a, #6f4628) 0 0 / 100% 18px no-repeat,
    linear-gradient(var(--ah-950), var(--ah-950)) 0 18px / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0 2px, transparent 2px 38px),
    linear-gradient(180deg, #4e321c, #321f10);
  box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.55);
}
.ab-bell { grid-area: bell; justify-self: center; position: relative; z-index: 1; display: grid; justify-items: center; width: min(100%, 300px); color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.ab-bell__art { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.5)); }
.ab-bell__plate { position: absolute; z-index: 2; left: 50%; top: calc(100% + 18px); translate: -50% 0; white-space: nowrap; font-size: 1.15rem; }
.ab-bell:focus-visible { outline: none; }
.ab-bell:focus-visible .ab-bell__plate { outline: 3px solid var(--ah-sky); outline-offset: 4px; }
.ab-bell:hover .ab-bell__plate { translate: -50% -1px; }
.ab-bell__shadow { fill: rgba(0, 0, 0, 0.35); }
.ab-bell__base { stroke: var(--ah-950); stroke-width: 3; stroke-linejoin: round; }
.ab-bell__top { fill: #8a5a34; stroke: var(--ah-950); stroke-width: 3; }
.ab-bell__rod { fill: #9aa7b8; stroke: var(--ah-950); stroke-width: 2.6; }
.ab-bell__knob { stroke: var(--ah-950); stroke-width: 3; }
.ab-bell__dome { stroke: var(--ah-950); stroke-width: 3.2; stroke-linejoin: round; }
.ab-bell__shine { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-opacity: 0.7; }
.ab-bell__rim { fill: none; stroke: var(--ah-950); stroke-width: 2.4; stroke-opacity: 0.6; }
.ab-bell__waves path { fill: none; stroke: var(--ah-sky); stroke-width: 4; stroke-linecap: round; opacity: 0; }
.ab-bell__plunger { transform-box: view-box; transform-origin: 120px 96px; transition: transform 0.12s var(--ease-out); }
.ab-bell:active .ab-bell__plunger { transform: translateY(9px); }
.ab-desk__note { position: absolute; z-index: 2; left: 40%; top: 0; font-size: 1.2rem; rotate: -8deg; }
.ab-desk__note .ah-hand__arrow { width: 44px; height: 34px; margin-top: 12px; }
html:not(.js) .ab-desk__note { display: none; }
/* the ding: the plunger drops, the sound lines ring out (finite) */
@media (prefers-reduced-motion: no-preference) {
  .ab-bell.is-ding .ab-bell__plunger { animation: ab-press 0.42s var(--ease-out); }
  .ab-bell.is-ding .ab-bell__waves path { animation: ab-ring 0.9s var(--ease-out) 0.08s; }
  .ab-bell.is-ding .ab-bell__art { animation: ab-shake 0.5s ease-in-out 0.06s; }
  .ab-desk.is-play .ab-bell__waves path { animation: ab-ring 0.9s var(--ease-out) 0.6s; }
}
@keyframes ab-press { 30% { transform: translateY(10px); } 100% { transform: translateY(0); } }
@keyframes ab-ring { 0% { opacity: 0; transform: scale(0.9); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.12); } }
@keyframes ab-shake { 25% { rotate: -1.6deg; } 55% { rotate: 1.2deg; } 80% { rotate: -0.4deg; } }
.ab-bell__waves { transform-box: view-box; transform-origin: 120px 94px; }
.ab-bell__waves path { transform-box: fill-box; transform-origin: center; }
@media (max-width: 520px) {
  .ab-desk { grid-template-columns: minmax(0, 1fr); grid-template-areas: "card" "bell" "top"; min-height: 0; padding-top: 0; row-gap: 0; }
  .ab-desk__card { justify-self: center; width: min(100%, 300px); margin: 0 0 34px; }
  .ab-desk__note { left: 2%; top: auto; bottom: 190px; font-size: 1.05rem; }
  .ab-bell { width: min(78%, 270px); }
}

/* --------------------------------------------------------------------------
   FINAL: the neon PAWN ONLY sign hanging in the window. Lights on view (finite).
   -------------------------------------------------------------------------- */
.ab-neon { position: relative; width: min(100%, 460px); margin: 0 auto 50px; padding-top: 62px; }
.ab-neon__chain { position: absolute; top: 0; width: 8px; height: 86px; background: radial-gradient(ellipse 45% 40% at 50% 50%, transparent 52%, #9aa7b8 58%, #5d6a7d 85%, transparent 90%) 0 0 / 100% 10px repeat-y; }
.ab-neon__chain--l { left: calc(43.4% - 4px); } .ab-neon__chain--r { right: calc(43.4% - 4px); }
.ab-neon__svg { display: block; width: 100%; height: auto; overflow: visible; }
/* the fight poster's pink starburst, in neon tube: no box, so it never reads as the homepage OPEN sign */
.ab-neon__back { fill: #070b15; stroke: var(--ah-950); stroke-width: 3; stroke-linejoin: round; }
.ab-neon__svg text { font: 900 76px/1 var(--ah-display); letter-spacing: 0.1em; text-anchor: middle; text-transform: uppercase; }
.ab-neon__glass use, .ab-neon__glass text { fill: none; stroke: rgba(255, 230, 240, 0.14); stroke-width: 8; stroke-linejoin: round; }
.ab-neon__lit use, .ab-neon__lit text { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.ab-neon__lit .ab-neon__halo { stroke-width: 14; opacity: 0.85; }
.ab-neon__lit use.ab-neon__halo { stroke-width: 18; }
.ab-neon__lit .ab-neon__tube { stroke-width: 4.6; }
.ab-neon__lit use.ab-neon__tube { stroke-width: 7; }
.ab-neon__lit .ab-neon__core { stroke-width: 1.6; }
.ab-neon__lit use.ab-neon__core { stroke-width: 2.4; }
.ab-neon__lit--border .ab-neon__halo, .ab-neon__lit--border .ab-neon__tube { stroke: var(--ah-neon-pink); }
.ab-neon__lit--border .ab-neon__core { stroke: var(--ah-neon-pink-core); }
.ab-neon__lit--a .ab-neon__halo, .ab-neon__lit--a .ab-neon__tube, .ab-neon__lit--b .ab-neon__halo, .ab-neon__lit--b .ab-neon__tube { stroke: var(--ah-neon-blue); }
.ab-neon__lit--a .ab-neon__core, .ab-neon__lit--b .ab-neon__core { stroke: var(--ah-neon-blue-core); }
@media (prefers-reduced-motion: no-preference) {
  html.motion .ab-final:not(.is-play) .ab-neon__lit { opacity: 0.05; }
  .ab-final.is-play .ab-neon__lit { animation: ah-ignite 1.1s var(--t, 0.1s) both; }
}