/* ==========================================================================
   stamp-book.css — the stamp book (gremlin layer only)
   --------------------------------------------------------------------------
   Pairs with js/stamp-book.js; station markup lives at the top of
   components/footer.html. Shipped 2026-10-19 from auditions/stamp-book.html (v3).

   Three pieces:
     .sb-station  the rubber stamp + ink pad on every page (footer, top)
     .sb-dock     the closed book, docked bottom-right (a11y pill owns bottom-left)
     .sb-book     the open book, a <dialog>: inside cover, 10 main stops,
                  the stamps on two 3 x 3 pages, the reward page

   Rules this file keeps:
     - Pro mode renders nothing. Stamps keycap off (html[data-stamps="off"])
       renders nothing but keeps the data.
     - The station is display:none until the pre-paint snippet in the footer
       names a stop (html[data-stamp-stop]); when it shows, its box is a fixed
       size with `contain: size layout`, so nothing it does can shift the page.
     - Ink: each stamp is an SVG in one ink (currentColor): ring, text, stars,
       date, and the painted motif as an alpha mask. Light theme uses the -ink
       tokens, dark the lighter pastels (shojo.css flips them).
     - Drawn in SVG since 2026-10-21 (auditions/stamp-book-svg, direction B):
       desk, dock cover, boards and stamps. The open book is 3D (perspective on
       .sb-bk, the cover and turning pages swing on the spine).
     - Motion: all of it is Web Animations started from js/stamp-book.js (one
       helper, anim()), which skips them under reduced motion or
       html[data-motion="off"]. No CSS keyframes here. No loops.
   ========================================================================== */

/* ---- tokens --------------------------------------------------------------- */
:root[data-mode="gremlin"] {
    --sb-plum: var(--ink, #4A3560);
    --sb-rose: var(--rose-ink, #9C2D63);
    --sb-peri: var(--peri-ink, #1F6F9E);
    --sb-sage: var(--sage-ink, #3F7A5E);
    --sb-page: var(--paper-2, #FFFFFF);
    --sb-line: var(--border, rgba(74, 53, 96, .16));
    --sb-ghost: color-mix(in srgb, var(--ink, #4A3560) 34%, transparent);
    --sb-grid: color-mix(in srgb, var(--ink, #4A3560) 6%, transparent);
    --sb-cover: #4A3560;
    --sb-cover-2: #3A2A4D;
    --sb-foil: #F4C7D9;
    --sb-band: #89C4E1;
    --sb-wood: #E3B98D;
    --sb-wood-2: #C99A6B;
    --sb-tin: #F4A7C3;
    --sb-tin-2: #E58BAE;
    --sb-pad: #4A3560;
    --sb-paper: #FFFDF9;                 /* book pages + the station slip */
    --sb-endpaper: #FBEFF5;
    --sb-dot: rgba(74, 53, 96, .14);
    --sb-shade: rgba(74, 53, 96, .22);   /* shadow a turning page casts */
    --sb-lift: rgba(74, 53, 96, .10);
    --sb-shadow: 0 2px 4px rgba(74, 53, 96, .15), 0 14px 34px rgba(74, 53, 96, .18);
    --sb-focus: var(--peri-ink, #1F6F9E);
    /* new curve with the SVG port (2026-10-21; MOTION.md): an even in-out for
       anything that swings on a hinge. js/stamp-book.js uses the same numbers. */
    --ease-turn: cubic-bezier(0.45, 0.05, 0.25, 1);
}
:root[data-mode="gremlin"][data-theme="dark"] {
    --sb-cover: #6B4E8C;
    --sb-cover-2: #54396F;
    --sb-foil: #FFE3EE;
    --sb-band: #6FA9C6;
    --sb-wood: #B98F66;
    --sb-wood-2: #9A7450;
    --sb-tin: #C9799A;
    --sb-tin-2: #A9607F;
    --sb-pad: #2A1F38;
    --sb-paper: #241C2E;
    --sb-endpaper: #2C2238;
    --sb-dot: rgba(240, 214, 255, .12);
    --sb-shade: rgba(0, 0, 0, .45);
    --sb-lift: rgba(0, 0, 0, .45);
    --sb-shadow: 0 2px 4px rgba(0, 0, 0, .45), 0 14px 34px rgba(0, 0, 0, .45);
}

/* ---- the off switches ----------------------------------------------------- */
.sb-station,
.sb-dock,
.sb-a11y-row { display: none; }
:root[data-mode="pro"] .sb-book,
:root[data-stamps="off"] .sb-book { display: none; }

/* ---- the station ---------------------------------------------------------- */
:root[data-mode="gremlin"][data-stamp-stop]:not([data-stamp-stop="none"]):not([data-stamps="off"]) .sb-station {
    display: grid;
}
.sb-station {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: min(640px, calc(100% - 32px));
    height: 212px;                       /* reserved from first paint: zero CLS (212: room for a 2-line hint) */
    contain: size layout;
    margin: 4px auto 44px;
    padding: 18px 22px;
    grid-template-columns: clamp(150px, 38%, 300px) minmax(0, 1fr);
    gap: 22px;
    align-items: center;
    border: 2px dashed var(--sb-line);
    border-radius: 18px;
    background: var(--paper, transparent);
    color: var(--ink);
    text-align: left;
    --sb-stamp-ink: var(--sb-plum);
}
.sb-station[data-ink="rose"] { --sb-stamp-ink: var(--sb-rose); }
.sb-station[data-ink="peri"] { --sb-stamp-ink: var(--sb-peri); }
.sb-station[data-ink="sage"] { --sb-stamp-ink: var(--sb-sage); }
/* the desk: rubber stamp on the ink-pad tin, the slip the stamp lands on (360 x 200) */
.sb-station-art { position: relative; width: 100%; min-width: 0; }
.sb-desk { display: block; width: 100%; height: auto; overflow: visible; }
.sb-desk .sb-tool-g, .sb-desk .sb-mark, .sb-desk .sb-splash { transform-box: fill-box; }
.sb-desk .sb-tool-g { transform-origin: 50% 100%; }   /* squashes from the foot */
.sb-desk .sb-mark { transform-origin: 50% 50%; color: var(--sb-stamp-ink); }
.sb-desk .sb-splash { transform-origin: 50% 50%; opacity: 0; stroke: var(--sb-stamp-ink); }
#sbStation .sb-kicker {
    margin: 0;
    font: 700 13px/1.3 var(--font-ui, system-ui, sans-serif);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-2, #5E4278);
    white-space: nowrap;
}
#sbStation .sb-station-name {
    margin: 4px 0 2px;
    padding: 0;
    border: 0;
    background: none;
    font: 800 26px/1.1 var(--font-display, Georgia, serif);
    color: var(--ink);
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#sbStation .sb-hint {
    margin: 0 0 12px;
    font: 21px/1.15 var(--font-note, cursive);
    color: var(--text-2, #5E4278);
    /* wraps to 2 lines ("in your book (saved in this browser). stamped ...", 2026-10-21) */
}
.sb-station-text { min-width: 0; }
.sb-press,
.sb-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    border: 2px solid transparent;
    border-radius: 999px;
    padding: 8px 20px;
    background: var(--sb-rose);
    color: #fff;
    font: 800 16px/1.1 var(--font-ui, system-ui, sans-serif);
    cursor: pointer;
    white-space: nowrap;
}
:root[data-theme="dark"] .sb-press,
:root[data-theme="dark"] .sb-btn { color: #2A1830; }
:root .sb-station .sb-press[aria-pressed="true"] {
    background: transparent;
    color: var(--ink);
    border-color: var(--sb-line);
}
.sb-press:focus-visible,
.sb-btn:focus-visible,
.sb-dock:focus-visible,
.sb-book button:focus-visible,
.sb-book input:focus-visible {
    outline: 3px solid var(--sb-focus);
    outline-offset: 3px;
}
.sb-sr {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}
@media (max-width: 560px) {
    .sb-station {
        height: 344px;
        grid-template-columns: 1fr;
        justify-items: center;
        align-content: center;
        gap: 10px;
        padding: 16px;
        text-align: center;
        grid-template-columns: minmax(0, 1fr);
    }
    .sb-station-art { width: 216px; }    /* 216 x 120 */
    .sb-station-text { max-width: 100%; }
}

#sbStation .sb-station-name::before, #sbStation .sb-station-name::after,
#sbBook .sb-pg h3::before, #sbBook .sb-pg h3::after { content: none; }

/* ---- one stamp (the 3 x 3 pages, the station slip, the flying copy) ------- */
.sb-stamp {
    position: relative;
    display: block;
    width: var(--size, 220px);
    height: var(--size, 220px);
    overflow: visible;
    color: var(--sb-plum);
}
.sb-stamp[data-ink="rose"] { color: var(--sb-rose); }
.sb-stamp[data-ink="peri"] { color: var(--sb-peri); }
.sb-stamp[data-ink="sage"] { color: var(--sb-sage); }
/* type on the ring (SVG text, 240-unit stamp) */
.sb-ring-t { font: 800 16px var(--font-display, Georgia, serif); letter-spacing: 3px; }
.sb-ring-b { font: 800 15px var(--font-display, Georgia, serif); letter-spacing: 2px; }
.sb-ring-d { font: 800 12.5px var(--font-ui, system-ui, sans-serif); letter-spacing: 1.5px; }
.sb-flyer { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; transform-origin: 50% 50%; }
.sb-flyer .sb-stamp { --size: 100%; color: inherit; }
/* the empty slot: a faint outline + the stop name (the hint to explore) */
.sb-slot {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--size, 220px);
    height: var(--size, 220px);
    border: 2.5px dashed var(--sb-line);
    border-radius: 50%;
    box-sizing: border-box;
}
.sb-slot-ghost {
    padding: 18%;
    font: 700 calc(var(--size, 220px) * 11 / 220) / 1.4 var(--font-ui, system-ui, sans-serif);
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: center;
    color: var(--sb-ghost);
}
.sb-slot.has-stamp { border-color: transparent; }

/* ---- the dock (the closed book, an SVG cover) ------------------------------ */
:root[data-mode="gremlin"]:not([data-stamps="off"]) .sb-dock { display: block; }
.sb-dock {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999;
    width: 72px;
    height: 96px;
    padding: 0;
    border: 0;
    border-radius: 6px 12px 12px 6px;
    background: none;
    color: var(--sb-foil);
    text-align: center;
    cursor: pointer;
}
.sb-dock .sb-cover-art { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 12px var(--sb-lift)); }
.sb-dock-count {
    position: absolute;
    left: 20%; right: 10%; bottom: 11%;
    height: 1.25em;
    overflow: hidden;
    font: 800 14px/1.25 var(--font-ui, system-ui, sans-serif);
    color: var(--sb-foil);
}
.sb-dock-n { display: block; }
/* at 0 the dock says what to do; it goes back to the count once one stamp is in */
.sb-dock-cta {
    display: none;
    position: absolute;
    left: 18%; right: 8%; bottom: 6%;
    font: 700 9.5px/1.1 var(--font-ui, system-ui, sans-serif);
    letter-spacing: .04em;
    text-transform: lowercase;
    color: var(--sb-foil);
}
.sb-dock[data-empty] .sb-dock-count { bottom: 19%; }
.sb-dock[data-empty] .sb-dock-cta { display: block; }
/* cover art pieces (shared by the dock and the cover leaf of the open book) */
.sb-cv-board { fill: var(--sb-cover); stroke: var(--sb-cover-2); }
.sb-cv-spine { fill: var(--sb-cover-2); opacity: .7; }
.sb-cv-stitch { stroke: var(--sb-foil); opacity: .55; }
.sb-cv-frame { stroke: var(--sb-foil); }
.sb-cv-star { fill: var(--sb-foil); }
.sb-cv-faint { opacity: .55; }
.sb-cv-t { fill: var(--sb-foil); font: 800 34px var(--font-display, Georgia, serif); }
.sb-cv-n { fill: var(--sb-foil); font: 24px var(--font-note, cursive); }
.sb-cv-band { fill: var(--sb-band); }
.sb-dock[data-complete] .sb-cv-star:not(.sb-cv-faint) { fill: #FFE38A; }
@media (max-width: 700px) {
    .sb-dock { right: 12px; bottom: 12px; width: 50px; height: 66px; }
    .sb-dock-count { font-size: 10.5px; }
    .sb-dock-cta { font-size: 7.5px; bottom: 5%; }
    /* room under the last footer row so the docked book (and the a11y pill) never sit on a link */
    :root[data-mode="gremlin"]:not([data-stamps="off"]) .site-footer { padding-bottom: 118px; }   /* site.css phone bottom 28px + ~90px */
}
@media print { .sb-dock, .sb-station, .sb-book { display: none !important; } }

/* ---- the open book (dialog): a small 3D book -------------------------------
   .sb-bk holds the perspective (it only reaches direct children, so it lives
   on the book itself, not the stage). Page size: --pw x --ph. */
.sb-book {
    width: min(900px, calc(100vw - 20px));
    max-width: none;
    max-height: calc(100dvh - 20px);
    margin: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    overflow: visible;
}
.sb-book::backdrop { background: rgba(20, 16, 25, .6); }
.sb-book-inner { position: relative; }
.sb-bk-stage { display: grid; justify-items: center; padding: 22px 0 4px; }
.sb-bk-wrap {
    --pw: min(430px, calc((100vw - 60px) / 2));
    --ph: min(560px, calc(100dvh - 150px));
    position: relative;
}
.sb-bk {
    position: relative;
    width: calc(var(--pw) * 2);
    height: var(--ph);
    transform-style: preserve-3d;
    perspective: 2000px;
    perspective-origin: 50% 45%;
}
.sb-under { position: absolute; inset: -8px; pointer-events: none; filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .28)); }
.sb-under svg { display: block; width: 100%; height: 100%; }
.sb-ub { fill: var(--sb-cover); }
.sb-ub-spine { fill: var(--sb-cover-2); }
.sb-ub-edge { stroke: var(--sb-paper); opacity: .75; fill: none; }
.sb-page { position: absolute; top: 0; width: 50%; height: 100%; }
.sb-page-l { left: 0; }
.sb-page-r { left: 50%; }
#sbBook .sb-page > .sb-pg,
#sbBook .sb-face .sb-pg { position: absolute; inset: 0; min-height: 0; overflow: auto; }
.sb-leaf {
    display: none;
    position: absolute;
    top: 0; left: 50%;
    width: 50%; height: 100%;
    z-index: 5;
    transform-origin: 0 50%;
    transform-style: preserve-3d;
    pointer-events: none;
}
.sb-leaf.is-on { display: block; }
.sb-face { position: absolute; inset: 0; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.sb-face.sb-back { transform: rotateY(180deg); }
#sbBook .sb-face .sb-pg { overflow: hidden; }
/* the cover leaf covers the board edges too */
.sb-leaf.is-cover .sb-face { inset: -8px; }
.sb-leaf.is-cover .sb-front { border-radius: 4px 12px 12px 4px; }
.sb-leaf.is-cover .sb-back { border-radius: 12px 4px 4px 12px; }
.sb-face .sb-cover-art { display: block; width: 100%; height: 100%; }
/* the back of the cover: the board with the page it opens onto printed on it */
.sb-endboard { position: absolute; inset: 0; background: var(--sb-cover); }
#sbBook .sb-endboard > .sb-pg { inset: 8px; }
/* the turning page darkens towards 90deg; the page under it gets its shadow */
.sb-lightfx, .sb-cast { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; }
.sb-front .sb-lightfx { background: linear-gradient(90deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0) 45%); }
.sb-back .sb-lightfx { background: linear-gradient(270deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0) 45%); }
.sb-page-r .sb-cast { background: linear-gradient(90deg, var(--sb-shade), rgba(0, 0, 0, 0) 60%); }
.sb-page-l .sb-cast { background: linear-gradient(270deg, var(--sb-shade), rgba(0, 0, 0, 0) 60%); }
#sbBook .sb-pg {
    position: relative;
    box-sizing: border-box;
    min-height: 480px;
    padding: 26px 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: var(--sb-paper);
    background-image: radial-gradient(circle, var(--sb-dot) 0 .9px, transparent 1.2px);
    background-size: 14px 14px;
    background-position: 7px 7px;
}
#sbBook .sb-pg.l { border-radius: 6px 0 0 6px; box-shadow: inset -16px 0 20px -14px rgba(0, 0, 0, .22); }
#sbBook .sb-pg.r { border-radius: 0 6px 6px 0; box-shadow: inset 16px 0 20px -14px rgba(0, 0, 0, .22); }
#sbBook .sb-no {
    font: 700 12px/1 var(--font-ui, system-ui, sans-serif);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-2, #5E4278);
}
#sbBook .sb-pg h3 {
    margin: 8px 0 2px;
    padding: 0;
    border: 0;
    background: none;
    font: 800 22px/1.15 var(--font-display, Georgia, serif);
    color: var(--ink);
}
#sbBook .sb-where { margin: 0 0 14px; font: 20px/1.2 var(--font-note, cursive); color: var(--text-2, #5E4278); }
#sbBook .sb-where a { color: inherit; text-underline-offset: 3px; }
#sbBook .sb-when { margin-top: auto; padding-top: 12px; font: 14px/1.3 var(--font-ui, system-ui, sans-serif); color: var(--text-2, #5E4278); }

/* inside cover */
#sbBook .sb-pg.sb-cover-in {
    justify-content: center;
    gap: 10px;
    /* endpaper: soft pink with a scatter of rose sparkles and lavender dots */
    background-color: var(--sb-endpaper);
    background-image:
        radial-gradient(circle, color-mix(in srgb, var(--rose, #F4A7C3) 45%, transparent) 0 1.8px, transparent 2.2px),
        radial-gradient(circle, color-mix(in srgb, var(--lav, #C4A8E0) 60%, transparent) 0 1.4px, transparent 1.8px);
    background-size: 36px 36px, 36px 36px;
    background-position: 8px 8px, 26px 26px;
}
#sbBook .sb-cover-title { font: 800 30px/1.1 var(--font-display, Georgia, serif); }
#sbBook .sb-cover-in label { font: 21px/1.2 var(--font-note, cursive); color: var(--text-2, #5E4278); }
#sbBook .sb-cover-in input {
    width: 80%;
    padding: 4px;
    border: 0;
    border-bottom: 2px solid var(--sb-line);
    background: none;
    color: var(--ink);
    text-align: center;
    font: 26px/1.2 var(--font-note, cursive);
}
#sbBook .sb-cover-in input::placeholder { color: var(--sb-ghost); }
#sbBook .sb-cover-in p { max-width: 32ch; margin: 8px 0 0; font: 15px/1.5 var(--font-ui, system-ui, sans-serif); color: var(--text-2, #5E4278); }
#sbBook .sb-cover-count { font: 700 14px/1 'DM Mono', ui-monospace, Menlo, monospace; color: var(--text-2, #5E4278); }

/* the stamp pages: 18 stops on two 3 x 3 grids (2026-10-21, Sara: no bonus row,
   every stop counts). The grid sits in the middle of the page, not under the title. */
#sbBook .sb-grid-pg h3 { margin-bottom: 0; }
.sb-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 6px;
    width: 100%;
    margin: auto 0;          /* centred in the space under the heading */
    padding: 6px 0 2px;
}
.sb-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; --size: clamp(58px, calc((var(--ph, 560px) - 330px) / 3), 86px); }   /* three rows + labels fit the page height */
/* each row of three is one group (where on the site to look), labelled above the row */
#sbBook .sb-grid-row {
    grid-column: 1 / -1;
    margin: 4px 0 -6px;
    padding-bottom: 3px;
    border-bottom: 1.5px dashed var(--sb-line);
    text-align: left;
    font: 17px/1.1 var(--font-note, cursive);
    color: var(--text-2, #5E4278);
}
.sb-cell .sb-slot-ghost { display: none; }
#sbBook .sb-cell-name { font: 700 12px/1.25 var(--font-ui, system-ui, sans-serif); letter-spacing: .03em; color: var(--text-2, #5E4278); overflow-wrap: anywhere; }
#sbBook .sb-cell-name a { color: inherit; text-underline-offset: 3px; }
#sbBook .sb-cell.is-unfound .sb-cell-name { color: var(--sb-ghost); }
#sbBook .sb-cell-when { min-height: 1em; font: 11px/1 'DM Mono', ui-monospace, Menlo, monospace; color: var(--text-2, #5E4278); }

/* reward page */
#sbBook .sb-reward-body { margin: auto 0; padding-top: 10px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
#sbBook .sb-locked { max-width: 30ch; font: 21px/1.3 var(--font-note, cursive); color: var(--text-2, #5E4278); }
#sbBook .sb-locked a { color: inherit; text-underline-offset: 3px; }
#sbBook .sb-complete { font: 800 26px/1.1 var(--font-display, Georgia, serif); color: var(--sb-rose); }
#sbBook .sb-reward-note { max-width: 30ch; margin: 0; font: 15px/1.5 var(--font-ui, system-ui, sans-serif); color: var(--text-2, #5E4278); }

.sb-book-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    color: #fff;
    font: 14px/1 'DM Mono', ui-monospace, Menlo, monospace;
}
.sb-book-nav button {
    min-height: 40px;
    padding: 8px 16px;
    border: 0;
    border-radius: 999px;
    background: rgba(20, 16, 25, .78);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28);
    color: #fff;
    font: 700 15px/1 var(--font-ui, system-ui, sans-serif);
    cursor: pointer;
}
.sb-book-nav button[disabled] { opacity: .4; cursor: default; }
/* the page count sits on its own dark pill: the backdrop alone is too light over a light page for white text */
.sb-book-nav .sb-pos { padding: 8px 12px; border-radius: 999px; background: rgba(20, 16, 25, .78); }
.sb-book-close {
    position: absolute;
    top: -14px; right: -10px;
    z-index: 2;
    width: 40px; height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--sb-page);
    color: var(--ink);
    font: 24px/1 var(--font-ui, system-ui, sans-serif);
    box-shadow: var(--sb-shadow);
    cursor: pointer;
}
@media (max-width: 700px) {
    .sb-bk-wrap { --pw: min(420px, calc(100vw - 32px)); --ph: min(520px, calc(100dvh - 140px)); }
    .sb-bk { width: var(--pw); }
    .sb-page-l { display: none; }
    .sb-page-r, .sb-leaf { left: 0; width: 100%; }
    #sbBook .sb-pg.l, #sbBook .sb-pg.r { border-radius: 6px; box-shadow: none; }
    #sbBook .sb-pg { min-height: 0; padding: 22px 16px 16px; }
    .sb-book-close { top: -12px; right: -4px; }
    .sb-cell { --size: clamp(54px, calc((var(--ph) - 300px) / 3), 74px); }
    .sb-grid { gap: 8px 4px; }
    #sbBook .sb-grid-row { font-size: 16px; }
}

/* ---- one stamp, big (2026-10-22) --------------------------------------------
   A stamped slot in the book is a button; it opens .sb-zoom: the same SVG stamp
   at up to 440px on a paper card, with the stop name and date under it. */
#sbBook .sb-zoom-btn {
    padding: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: zoom-in;
}
#sbBook .sb-zoom-btn:focus-visible { outline: 3px solid var(--sb-focus); outline-offset: 4px; }
.sb-zoom {
    position: fixed;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(20, 16, 25, .55);
    cursor: zoom-out;
}
.sb-zoom[hidden] { display: none; }
.sb-zoom-card {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 8px;
    max-width: calc(100vw - 32px);
    padding: 28px 32px 26px;
    border-radius: 18px;
    background: var(--sb-paper);
    background-image: radial-gradient(var(--sb-dot) 1.2px, transparent 1.4px);
    background-size: 18px 18px;
    box-shadow: var(--sb-shadow);
    color: var(--ink);
    text-align: center;
}
.sb-zoom-art .sb-stamp { --size: min(440px, calc(100vw - 96px), calc(100dvh - 220px)); }
.sb-zoom-name { font: 800 clamp(22px, 3vw, 28px)/1.2 var(--font-display, Georgia, serif); color: var(--ink); }
.sb-zoom-when { font: 16px/1.3 'DM Mono', ui-monospace, Menlo, monospace; color: var(--text-2, #5E4278); }
.sb-zoom-close {
    position: absolute;
    top: -14px; right: -14px;
    width: 44px; height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--sb-page);
    color: var(--ink);
    font: 26px/1 var(--font-ui, system-ui, sans-serif);
    box-shadow: var(--sb-shadow);
    cursor: pointer;
}
@media (max-width: 700px) {
    .sb-zoom-card { padding: 22px 16px 18px; }
    .sb-zoom-close { top: -12px; right: -6px; }
}

/* ---- motion -----------------------------------------------------------------
   None in CSS. Press, ink landing, the flying copy, dock hop + count roll, cover
   open/close and page turns are all Web Animations in js/stamp-book.js (anim()),
   skipped under prefers-reduced-motion: reduce and html[data-motion="off"]. */

/* ---- the "stamp book" switch in the a11y pill panel ----------------------- */
:root[data-mode="gremlin"] .sb-a11y-row { display: flex; }

/* ---- station mount (2026-10-21) -------------------------------------------
   A page can carry <div id="sbStationMount" class="sb-mount"> right under the
   thing its stop is named after (index.html: under the skill sky). An inline
   script inside the mount sets html[data-stamp-mount] before paint, so the
   mount reserves the station's exact height from first paint; the footer moves
   the station in during parse. Same fixed heights as the station (212px,
   344px under 560px), so nothing shifts. Pro / stamps off: no box at all. */
.sb-mount { display: none; }
:root[data-mode="gremlin"][data-stamp-mount]:not([data-stamps="off"]) .sb-mount {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 212px;
    margin: 28px 0 56px;
    contain: size layout;
}
/* before the station arrives (only if the browser paints mid-parse): the same dashed frame */
:root[data-mode="gremlin"][data-stamp-mount] .sb-mount:not(:has(> .sb-station)) {
    border: 2px dashed var(--sb-line);
    border-radius: 18px;
}
.sb-mount > .sb-station {
    width: 100%;
    height: 100%;
    margin: 0;
}
@media (max-width: 560px) {
    :root[data-mode="gremlin"][data-stamp-mount]:not([data-stamps="off"]) .sb-mount { height: 344px; margin: 20px 0 40px; }
}
@media print { .sb-mount { display: none !important; } }
/* the mounted kicker also names the stop ("stamp station · stop 01 · the skill sky"): let it wrap on narrow boxes */
#sbStation[data-mounted] .sb-kicker { white-space: normal; }

/* the book animates only through js (one helper, 0ms when motion is off); keep site-wide
   CSS transitions off its layers so they never replay a jump the helper skipped */
#sbBook, #sbBook * { transition: none !important; }