/* book.css -- the Hellbox book engine (book.js). Paper, spine, the leaf
   that turns, the stacks either side. Sized by --hb-page-w / --hb-page-h,
   which book.js sets from the host's box. */

.hb-host {
    /* the host is sized by whoever owns it (app.js gives it the reader stage) */
    position: relative;
    outline: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
    --hb-paper: #f3ecdc;
    --hb-paper-deep: #e6dcc4;
    --hb-ink: #1d1a17;
    --hb-ink-soft: #5b544b;
    --hb-rule: rgba(60, 45, 25, 0.22);
    --hb-spine: #0b0a0a;
    --hb-edge: #d9cfb6;
    --hb-shadow: rgba(0, 0, 0, 0.55);
    /* Harrow's ink, everywhere in the book that used to be a flat red
       literal (headings, eyebrows, plate numbers, the ribbon, the
       branding-iron shop). Default here is that same red -- Fix the
       World and anything else with no chain-specific interior reads
       exactly as it always did. See [data-book-chain] below, set by
       applyBookChainTheme() in app.js from the COPY's real chain, not
       the connected wallet's. */
    --hb-accent: #b3121b;
    --hb-accent-bright: #e5132a;
    --hb-accent-deep: #7a0d14;
    --hb-accent-rgb: 179, 18, 27;
    --hb-accent-bright-rgb: 229, 19, 42;

    /* THE X IS ALWAYS RED. Harrow, 2026-09-14: "don't EVER change my red
       Xs again." The X glow used to ride --hb-accent-bright, so the
       edition tint below dragged it along -- green on a Robinhood copy,
       blue on Base, silver on Ethereum, pink on PulseChain. The X's are
       the brand, not the edition: at Hellbox Comix both X's glow red in
       every wordmark, on every chain, in every ink. These are
       deliberately NOT redefined by any [data-book-chain] or ink rule,
       and must never be. */
    --hb-x: #e5132a;
    --hb-x-rgb: 229, 19, 42;
    --hb-x-deep: #b3121b;
}

/* PulseChain -- the flagship edition. Same purple/pink the rest of the
   site uses for this chain (style.css [data-chain-theme="pulsechain"]),
   applied here so PulseChain's OWN interior reads as a deliberate,
   consistent identity too, not the leftover default red every edition
   used before chain-specific editions existed. */
#hellboxReader[data-book-chain="pulsechain"] .hb-host {
    --hb-accent: #8c42ff;
    --hb-accent-bright: #ff2e9c;
    --hb-accent-deep: #4a1a8c;
    --hb-accent-rgb: 140, 66, 255;
    --hb-accent-bright-rgb: 255, 46, 156;
}
#hellboxReader[data-book-chain="base"] .hb-host {
    --hb-accent: #0052ff;
    --hb-accent-bright: #4c8dff;
    --hb-accent-deep: #003399;
    --hb-accent-rgb: 0, 82, 255;
    --hb-accent-bright-rgb: 76, 141, 255;
}
#hellboxReader[data-book-chain="robinhood"] .hb-host {
    --hb-accent: #00c805;
    --hb-accent-bright: #19e60d;
    --hb-accent-deep: #006b03;
    --hb-accent-rgb: 0, 200, 5;
    --hb-accent-bright-rgb: 25, 230, 13;
}
#hellboxReader[data-book-chain="ethereum"] .hb-host {
    --hb-accent: #8a93a3;
    --hb-accent-bright: #e7ebf2;
    --hb-accent-deep: #3a4150;
    --hb-accent-rgb: 138, 147, 163;
    --hb-accent-bright-rgb: 231, 235, 242;
}

/* The reader's own "CLASSIC INK" toggle (Harrow, 2026-09-14: edition color
   is the default, but it should be switchable back to Harrow's original
   red) -- .hb-ink-classic on #hellboxReader, set by applyReaderInk() in
   app.js. Same specificity as the [data-book-chain] rules above (one ID
   plus one class/attribute each), so this MUST stay below them in the
   file to win -- keep it last if anything else gets added here. Does not
   touch data-book-chain itself, so the edition is still whatever it
   really is; this only overrides how it's painted. */
#hellboxReader.hb-ink-classic .hb-host {
    --hb-accent: #b3121b;
    --hb-accent-bright: #e5132a;
    --hb-accent-deep: #7a0d14;
    --hb-accent-rgb: 179, 18, 27;
    --hb-accent-bright-rgb: 229, 19, 42;
}

.hb-host.hb-night {
    --hb-paper: #17171a;
    --hb-paper-deep: #101012;
    --hb-ink: #e8e2d6;
    --hb-ink-soft: #9a938a;
    --hb-rule: rgba(255, 255, 255, 0.16);
    --hb-edge: #2a2a2e;
}

.hb-host.hb-sepia {
    --hb-paper: #efe1c4;
    --hb-paper-deep: #dfcda6;
    --hb-ink: #2a1f12;
    --hb-ink-soft: #6a5a44;
    --hb-edge: #cbb88f;
}

.hb-scene {
    position: absolute;
    inset: 0;
    perspective: 2600px;
    perspective-origin: 50% 45%;
}

/* placed by book.js on whole pixels: a page at a half-pixel breaks its
   lines a hair differently from the same page measured elsewhere */
.hb-book {
    position: absolute;
    left: var(--hb-book-x, 0px);
    top: var(--hb-book-y, 0px);
    width: calc(var(--hb-page-w) * var(--hb-faces) + (var(--hb-faces) - 1) * 6px);
    height: var(--hb-page-h);
    transform-style: preserve-3d;
    filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.6));
}

/* the stacks: pages already read (left), pages to come (right) */
/* Gilt edges (Harrow, 2026-09-12: "like a bible would be"): the fore-edge is
   gold leaf -- a metallic sweep along the block with the fine dark seams of
   the leaves showing through it, and a soft highlight that moves with the
   book's tilt. */
.hb-block {
    position: absolute;
    top: 4px;
    bottom: 4px;
    width: 4px;
    background:
        repeating-linear-gradient(90deg, rgba(60, 38, 8, 0.55) 0 1px, transparent 1px 2px),
        linear-gradient(180deg, #7a5a12 0%, #d4aa3c 12%, #f6e08a 22%, #c9982c 38%, #8f6a17 52%, #e8c95d 66%, #fff3b0 74%, #d3a836 86%, #6f5010 100%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), inset 0 0 2px rgba(255, 244, 190, 0.35);
    transition: width 420ms ease;
}
.hb-block::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 250, 220, 0.35), rgba(255, 250, 220, 0) 45%, rgba(0, 0, 0, 0.25));
    pointer-events: none;
}
.hb-block-left {
    right: 100%;
    border-radius: 3px 0 0 3px;
}
.hb-block-right {
    left: 100%;
    border-radius: 0 3px 3px 0;
}
.hb-single .hb-block-left {
    display: none;
}

.hb-spine {
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: calc(var(--hb-page-w) + 1px);
    width: 4px;
    background: linear-gradient(90deg, #000, #2a2624 50%, #000);
    z-index: 3;
}
.hb-single .hb-spine {
    display: none;
}

.hb-page {
    position: absolute;
    top: 0;
    width: var(--hb-page-w);
    height: var(--hb-page-h);
    background: var(--hb-paper);
    overflow: hidden;
}
.hb-page-left {
    left: 0;
    border-radius: 3px 0 0 3px;
    box-shadow: inset -22px 0 30px -18px rgba(0, 0, 0, 0.55);
}
.hb-page-right {
    right: 0;
    border-radius: 0 3px 3px 0;
    box-shadow: inset 22px 0 30px -18px rgba(0, 0, 0, 0.5);
}
.hb-single .hb-page-right {
    box-shadow: inset 14px 0 24px -16px rgba(0, 0, 0, 0.45);
    border-radius: 3px;
}
.hb-page.hb-empty {
    background: transparent;
    box-shadow: none;
}
.hb-closed-front .hb-page-left,
.hb-closed-back .hb-page-right {
    visibility: hidden;
}

/* a face is one side of one page; everything drawn on it lives here */
.hb-face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    color: var(--hb-ink);
    background: var(--hb-paper);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.hb-face::before {
    /* paper grain */
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.35), transparent 60%),
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.012) 0 2px, transparent 2px 4px);
    mix-blend-mode: multiply;
    opacity: 0.9;
}
.hb-face.hb-face-empty {
    background: transparent;
}
.hb-face.hb-face-empty::before {
    display: none;
}

/* the turning leaf, hung on the spine at the right-hand slot */
.hb-leaf {
    position: absolute;
    top: 0;
    left: calc(100% - var(--hb-page-w));
    width: var(--hb-page-w);
    height: var(--hb-page-h);
    transform-origin: left center;
    transform-style: preserve-3d;
    z-index: 5;
    will-change: transform;
    --hb-lift: 0;
}
.hb-leaf[hidden] {
    display: none;
}
.hb-leaf .hb-face-front {
    border-radius: 0 3px 3px 0;
    box-shadow: inset 18px 0 26px -16px rgba(0, 0, 0, 0.5);
}
.hb-leaf .hb-face-back {
    transform: rotateY(180deg);
    border-radius: 3px 0 0 3px;
    box-shadow: inset -18px 0 26px -16px rgba(0, 0, 0, 0.55);
}
.hb-leaf-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.35));
    opacity: 0;
    transform: translateZ(1px);
    border-radius: 3px;
}
/* the shadow the leaf throws on the page beneath it */
.hb-cast {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(100% - var(--hb-page-w) * 2);
    width: calc(var(--hb-page-w) * 2);
    pointer-events: none;
    opacity: 0;
    z-index: 4;
    --hb-cast: 0.5;
    background: radial-gradient(ellipse at calc(var(--hb-cast) * 100%) 50%, rgba(0, 0, 0, 0.45), transparent 42%);
    transition: opacity 120ms linear;
}
.hb-single .hb-cast {
    left: 0;
    width: var(--hb-page-w);
}

/* --- what app.js draws on faces ------------------------------------ */
.hb-face .hb-head {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 12px 30px 0;
    font: 700 10px/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--hb-ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}
.hb-page-left .hb-head,
.hb-face-back .hb-head {
    text-align: left;
}
.hb-page-right .hb-head,
.hb-face-front .hb-head {
    text-align: right;
}
.hb-face .hb-folio {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 30px 12px;
    font: 700 11px/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.16em;
    color: var(--hb-ink-soft);
    text-align: center;
    pointer-events: none;
}

.hb-flow {
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
    font-size: var(--hb-font, 18px);
    line-height: var(--hb-leading, 1.5);
    color: var(--hb-ink);
    text-rendering: optimizeLegibility;
    /* no automatic hyphenation: Chromium loads its dictionaries lazily, so
       a chapter measured before they arrive would not match the pages
       painted after -- and the page count is the page count */
    hyphens: manual;
    -webkit-hyphens: manual;
    text-align: left;
}
.hb-flow p {
    margin: 0 0 0.85em;
    orphans: 2;
    widows: 2;
}
.hb-flow p + p {
    text-indent: 0;
}
.hb-flow h1,
.hb-flow h2,
.hb-flow h3,
.hb-flow h4 {
    font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.12;
    margin: 0 0 0.6em;
    break-after: avoid;
    color: var(--hb-ink);
}
.hb-flow h1 {
    font-size: 1.9em;
    margin-top: 1.4em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.hb-flow h1::after {
    content: "";
    display: block;
    width: 3.2em;
    height: 3px;
    background: var(--hb-accent);
    margin-top: 0.5em;
}
.hb-flow h2 {
    font-size: 1.35em;
    margin-top: 1.2em;
}
.hb-flow h3 {
    font-size: 1.12em;
    margin-top: 1em;
}
.hb-flow .hb-x {
    color: var(--hb-x);
    text-shadow: 0 0 6px rgba(var(--hb-x-rgb), 0.55);
}
.hb-flow blockquote {
    margin: 0 0 0.85em;
    padding: 0 0 0 0.9em;
    border-left: 3px solid var(--hb-rule);
    font-style: italic;
    color: var(--hb-ink-soft);
}
.hb-flow ul,
.hb-flow ol {
    margin: 0 0 0.85em;
    padding-left: 1.3em;
}
.hb-flow li {
    margin: 0 0 0.3em;
}
.hb-flow img,
.hb-flow figure {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0.4em auto 0.9em;
    break-inside: avoid;
}
.hb-flow figure img {
    margin: 0 auto;
}
.hb-flow figcaption {
    font-size: 0.78em;
    color: var(--hb-ink-soft);
    text-align: center;
    margin-top: 0.35em;
}
.hb-flow a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(var(--hb-accent-rgb), 0.6);
    text-underline-offset: 2px;
}
.hb-flow table {
    border-collapse: collapse;
    font-size: 0.85em;
    margin: 0 0 1em;
    break-inside: avoid;
}
.hb-flow td,
.hb-flow th {
    border: 1px solid var(--hb-rule);
    padding: 0.25em 0.5em;
    vertical-align: top;
}
/* the narrator's word and sentence (CSS Highlight API; no DOM touched) */
::highlight(hb-sentence) {
    background-color: rgba(var(--hb-accent-bright-rgb), 0.11);
}
::highlight(hb-word) {
    background-color: rgba(var(--hb-accent-bright-rgb), 0.38);
    color: #000;
}
.hb-host.hb-night ::highlight(hb-word) {
    color: #fff;
}
.hb-flow .speaking,
.hb-flow .narrating {
    background: rgba(var(--hb-accent-bright-rgb), 0.12);
    box-shadow: 0 0 0 4px rgba(var(--hb-accent-bright-rgb), 0.12);
    border-radius: 2px;
}

/* the picture pages (comics) */
.hb-face.hb-kind-picture {
    background: #050505;
}
.hb-face.hb-kind-picture::before {
    display: none;
}
.hb-face .hb-picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #050505;
    display: block;
}

/* the cover: the viewer's own copy */
.hb-face.hb-kind-cover {
    background: #0a0a0c;
}
.hb-face.hb-kind-cover::before {
    display: none;
}
.hb-face .hb-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hb-face .hb-cover-sheen {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0.14), transparent 35%, transparent 70%, rgba(255, 255, 255, 0.06));
}
.hb-face .hb-cover-number {
    position: absolute;
    left: 6%;
    bottom: 5%;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.62);
    color: #f2f2f2;
    font: 700 12px/1 "Space Mono", ui-monospace, monospace;
    letter-spacing: 0.18em;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* the ribbon: a saved place hanging out of the closed book */
.hb-face .hb-ribbon {
    position: absolute;
    right: 9%;
    top: -6px;
    width: 46px;
    padding: 14px 6px 12px;
    background: linear-gradient(180deg, var(--hb-accent-deep), var(--hb-accent) 60%, var(--hb-accent-deep));
    color: #fff;
    border: 0;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    font: 700 9px/1.2 "Space Mono", ui-monospace, monospace;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    z-index: 3;
    transition: transform 160ms ease;
}
.hb-face .hb-ribbon:hover,
.hb-face .hb-ribbon:focus-visible {
    transform: translateY(4px);
    outline: none;
}
.hb-face .hb-ribbon span {
    opacity: 0.85;
}
.hb-face .hb-ribbon b {
    display: block;
    margin-top: 10px;
}

/* the plates: bookplate, title, colophon, blanks, the end */
.hb-plate {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10% 12%;
    color: var(--hb-ink);
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}
.hb-plate .hb-eyebrow {
    font: 700 10px/1 "Space Mono", ui-monospace, monospace;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--hb-ink-soft);
    margin-bottom: 1.6em;
}
.hb-plate h1 {
    font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    font-size: clamp(22px, calc(var(--hb-page-w) * 0.085), 46px);
    line-height: 1.05;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 0 0 0.5em;
}
.hb-plate h1 .hb-x {
    color: var(--hb-x);
    text-shadow: 0 0 10px rgba(var(--hb-x-rgb), 0.6);
}
.hb-plate .hb-by {
    font-style: italic;
    font-size: clamp(14px, calc(var(--hb-page-w) * 0.04), 20px);
    color: var(--hb-ink-soft);
    margin-bottom: 2.5em;
}
.hb-plate .hb-mark {
    width: clamp(46px, calc(var(--hb-page-w) * 0.18), 96px);
    height: auto;
    opacity: 0.85;
    margin: 1.2em 0;
}
.hb-plate .hb-small {
    font: 500 11px/1.7 "Space Mono", ui-monospace, monospace;
    letter-spacing: 0.08em;
    color: var(--hb-ink-soft);
    overflow-wrap: anywhere;
}
.hb-plate .hb-small b {
    color: var(--hb-ink);
}
.hb-plate.hb-blank {
    justify-content: flex-end;
    align-items: flex-end;
    font: 700 10px/1.6 "Space Mono", ui-monospace, monospace;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--hb-ink-soft);
    opacity: 0.7;
    text-align: right;
}
.hb-plate .hb-rule {
    width: 30%;
    height: 2px;
    background: var(--hb-accent);
    margin: 1.4em 0;
}
/* the bookplate: a numbered copy of a limited run, and its dates */
.hb-plate-bookplate .hb-rule {
    margin: 1em 0;
}
.hb-plate-bookplate .hb-run {
    margin-bottom: 0.9em;
    color: var(--hb-accent);
}
.hb-plate-bookplate .hb-plate-number {
    font: 500 12px/1.2 "Space Mono", ui-monospace, monospace;
    letter-spacing: 0.12em;
    color: var(--hb-ink-soft);
    text-transform: uppercase;
}
.hb-plate-bookplate .hb-plate-number b {
    display: inline-block;
    font: 800 clamp(24px, calc(var(--hb-page-w) * 0.1), 52px)/1 "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
    letter-spacing: 0.02em;
    color: var(--hb-ink);
    margin-left: 0.15em;
}
.hb-plate-bookplate .hb-plate-number .hb-of {
    font: 700 clamp(14px, calc(var(--hb-page-w) * 0.05), 26px)/1 "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
    color: var(--hb-ink-soft);
}
.hb-plate-bookplate .hb-never {
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    font-style: italic;
    font-size: clamp(12px, calc(var(--hb-page-w) * 0.036), 16px);
    letter-spacing: 0;
    margin-top: 0.6em;
}
.hb-plate-bookplate .hb-condition {
    margin-top: 0.7em;
    letter-spacing: 0.3em;
}
.hb-plate-bookplate .hb-facts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 1.2em;
    row-gap: 0.35em;
    width: 100%;
    max-width: 34em;
    font: 500 10.5px/1.5 "Space Mono", ui-monospace, monospace;
    letter-spacing: 0.08em;
    text-align: left;
}
.hb-plate-bookplate .hb-fact {
    display: contents;
}
.hb-plate-bookplate .hb-fact span {
    color: var(--hb-ink-soft);
    text-align: right;
    white-space: nowrap;
}
.hb-plate-bookplate .hb-fact b {
    color: var(--hb-ink);
    overflow-wrap: anywhere;
}
.hb-plate .hb-chapter-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: left;
    font-size: clamp(12px, calc(var(--hb-page-w) * 0.036), 17px);
}
.hb-plate .hb-chapter-list li {
    display: flex;
    justify-content: space-between;
    gap: 1em;
    padding: 0.35em 0;
    border-bottom: 1px dotted var(--hb-rule);
    cursor: pointer;
}
.hb-plate .hb-chapter-list li:hover {
    color: var(--hb-accent);
}
.hb-plate .hb-chapter-list b {
    font-family: "Space Mono", ui-monospace, monospace;
    font-weight: 700;
    font-size: 0.8em;
    letter-spacing: 0.1em;
}

.hb-measure {
    contain: layout style;
}

@media (prefers-reduced-motion: reduce) {
    .hb-block {
        transition: none;
    }
}

/* the press record: two short fact tables, the window below the dates */
.hb-plate-record .hb-facts + .hb-rule {
    margin: 1.1em 0;
}
/* the owner ledger: one line per hand, the chain's own record */
.hb-plate-ledger {
    padding-top: 8%;
}
.hb-plate-ledger .hb-eyebrow {
    margin-bottom: 0.8em;
}
.hb-plate-ledger .hb-ledger-summary {
    letter-spacing: 0.2em;
}
.hb-plate-ledger .hb-rule {
    margin: 0.9em 0 1em;
}
.hb-plate-ledger .hb-ledger {
    width: 100%;
    font: 500 10.5px/1.5 "Space Mono", ui-monospace, monospace;
    letter-spacing: 0.06em;
    text-align: left;
}
.hb-plate-ledger .hb-ledger-row {
    display: grid;
    grid-template-columns: 2.2em minmax(0, 1fr) auto;
    column-gap: 0.8em;
    align-items: baseline;
    padding: 0.28em 0;
    border-bottom: 1px dotted rgba(60, 40, 20, 0.25);
}
.hb-plate-ledger .hb-ledger-n {
    color: var(--hb-ink-soft);
    text-align: right;
}
.hb-plate-ledger .hb-ledger-who {
    color: var(--hb-ink);
    overflow-wrap: anywhere;
}
.hb-plate-ledger .hb-ledger-who i {
    font-style: normal;
    color: var(--hb-accent);
    letter-spacing: 0.2em;
    margin-left: 0.4em;
}
.hb-plate-ledger .hb-ledger-how {
    grid-column: 3;
    color: var(--hb-ink-soft);
    letter-spacing: 0.16em;
    font-size: 9px;
}
.hb-plate-ledger .hb-ledger-when {
    grid-column: 2 / 4;
    color: var(--hb-ink-soft);
    font-size: 9.5px;
}
.hb-plate-ledger .hb-ledger-first .hb-ledger-how {
    color: var(--hb-accent);
}
.hb-plate-ledger .hb-ledger-note {
    margin-top: auto;
    padding-top: 1em;
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    font-style: italic;
    font-size: clamp(11px, calc(var(--hb-page-w) * 0.032), 14px);
    letter-spacing: 0;
}

/* the guestbook: what a hand chose to leave beside its line */
.hb-plate-ledger .hb-ledger-sig {
    grid-column: 2 / 4;
    display: flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.15em 0 0.1em;
    color: var(--hb-ink);
    font-size: 10.5px;
}
.hb-plate-ledger .hb-ledger-logo {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    object-fit: cover;
    vertical-align: middle;
    box-shadow: 0 0 0 1px rgba(60, 40, 20, 0.35);
}
.hb-plate-ledger .hb-ledger-emoji {
    font-size: 13px;
    line-height: 1;
}
.hb-plate-ledger .hb-ledger-alias {
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    font-style: italic;
    font-size: 12px;
    letter-spacing: 0;
}
.hb-plate-ledger .hb-ledger-sign {
    margin-left: 0.7em;
    padding: 0.1em 0.5em;
    border: 1px solid var(--hb-accent);
    border-radius: 2px;
    background: transparent;
    color: var(--hb-accent);
    font: 700 8.5px/1.6 "Space Mono", ui-monospace, monospace;
    letter-spacing: 0.18em;
    cursor: pointer;
}
.hb-plate-ledger .hb-ledger-sign:hover {
    background: var(--hb-accent);
    color: #fff;
}
.hb-plate-ledger .hb-guest {
    position: absolute;
    inset: 6% 8%;
    display: flex;
    flex-direction: column;
    gap: 0.7em;
    padding: 1.2em 1.4em;
    background: var(--hb-paper);
    border: 2px solid var(--hb-accent);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
    text-align: left;
    font: 500 10.5px/1.5 "Space Mono", ui-monospace, monospace;
    letter-spacing: 0.06em;
    overflow: auto;
    z-index: 4;
}
.hb-plate-ledger .hb-guest .hb-eyebrow {
    margin-bottom: 0.2em;
    color: var(--hb-accent);
}
.hb-plate-ledger .hb-guest label {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
}
.hb-plate-ledger .hb-guest label span {
    font-size: 9px;
    letter-spacing: 0.22em;
    color: var(--hb-ink-soft);
}
.hb-plate-ledger .hb-guest label small {
    font-size: 9px;
    color: var(--hb-ink-soft);
    letter-spacing: 0.02em;
}
.hb-plate-ledger .hb-guest input[type="text"] {
    padding: 0.45em 0.6em;
    border: 1px solid rgba(60, 40, 20, 0.45);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.35);
    color: var(--hb-ink);
    font: 500 12px/1.4 "Space Mono", ui-monospace, monospace;
}
.hb-plate-ledger .hb-guest input[type="file"] {
    font-size: 10px;
    color: var(--hb-ink-soft);
}
.hb-plate-ledger .hb-guest-preview img {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(60, 40, 20, 0.35);
}
.hb-plate-ledger .hb-guest-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6em;
    margin-top: 0.3em;
}
.hb-plate-ledger .hb-guest-actions button {
    padding: 0.5em 0.9em;
    border: 1px solid var(--hb-accent);
    border-radius: 2px;
    background: transparent;
    color: var(--hb-accent);
    font: 700 9.5px/1 "Space Mono", ui-monospace, monospace;
    letter-spacing: 0.2em;
    cursor: pointer;
}
.hb-plate-ledger .hb-guest-actions .hb-guest-save {
    background: var(--hb-accent);
    color: #fff;
}
.hb-plate-ledger .hb-guest-actions button:disabled {
    opacity: 0.5;
    cursor: wait;
}
.hb-plate-ledger .hb-guest-status {
    min-height: 1.4em;
    color: var(--hb-accent);
    font-size: 10px;
}
.hb-host.hb-night .hb-plate-ledger .hb-guest input[type="text"] {
    background: rgba(0, 0, 0, 0.25);
}

/* the iron's lede, the brand you wear, the shop */
.hb-plate-ledger .hb-guest-lede {
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    font-style: italic;
    font-size: 12px;
    letter-spacing: 0;
    color: var(--hb-ink-soft);
}
.hb-plate-ledger .hb-guest-worn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6em;
    padding: 0.6em 0.7em;
    border: 1px dashed rgba(60, 40, 20, 0.45);
}
.hb-plate-ledger .hb-guest-worn > span {
    flex-basis: 100%;
    font-size: 9px;
    letter-spacing: 0.22em;
    color: var(--hb-ink-soft);
}
.hb-plate-ledger .hb-guest-worn b {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    font-style: italic;
    font-size: 13px;
    letter-spacing: 0;
}
.hb-plate-ledger .hb-guest-worn img {
    width: 28px;
    height: 28px;
}
.hb-plate-ledger .hb-guest-worn button {
    padding: 0.45em 0.8em;
    border: 1px solid var(--hb-accent);
    border-radius: 2px;
    background: transparent;
    color: var(--hb-accent);
    font: 700 9px/1 "Space Mono", ui-monospace, monospace;
    letter-spacing: 0.18em;
    cursor: pointer;
}
.hb-plate-ledger .hb-guest-worn .hb-guest-stamp {
    background: var(--hb-accent);
    color: #fff;
}
.hb-plate-ledger .hb-guest-fields {
    display: flex;
    flex-direction: column;
    gap: 0.7em;
}
.hb-plate-ledger .hb-guest-fields[hidden],
.hb-plate-ledger .hb-guest-worn[hidden],
.hb-plate-ledger .hb-guest-forge[hidden],
.hb-plate-ledger .hb-guest-save[hidden] {
    display: none;
}
.hb-plate-ledger .hb-guest-markrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6em;
}
.hb-plate-ledger .hb-guest-markrow > span {
    flex-basis: 100%;
    font-size: 9px;
    letter-spacing: 0.22em;
    color: var(--hb-ink-soft);
}
.hb-plate-ledger .hb-guest-design {
    padding: 0.45em 0.8em;
    border: 1px solid var(--hb-ink);
    border-radius: 2px;
    background: var(--hb-ink);
    color: var(--hb-paper);
    font: 700 9px/1 "Space Mono", ui-monospace, monospace;
    letter-spacing: 0.18em;
    cursor: pointer;
}
.hb-plate-ledger .hb-guest-upload {
    font-size: 9px;
    letter-spacing: 0.12em;
    color: var(--hb-ink-soft);
}
.hb-plate-ledger .hb-guest-upload input {
    display: block;
    margin-top: 0.3em;
}
.hb-plate-ledger .hb-shop {
    display: flex;
    flex-direction: column;
    gap: 0.55em;
    padding: 0.8em;
    border: 1px solid rgba(60, 40, 20, 0.45);
    background: rgba(0, 0, 0, 0.03);
}
.hb-plate-ledger .hb-shop-preview {
    display: flex;
    align-items: center;
    gap: 0.9em;
}
.hb-plate-ledger .hb-shop-art {
    flex: 0 0 auto;
    width: 128px;
    height: 128px;
    padding: 4px;
    background: var(--hb-paper);
    box-shadow: inset 0 0 0 1px rgba(60, 40, 20, 0.35);
    cursor: crosshair;
    touch-action: none;
    user-select: none;
}
.hb-plate-ledger .hb-shop-side {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}
.hb-plate-ledger .hb-shop-scratch {
    display: flex;
    gap: 0.4em;
}
.hb-plate-ledger .hb-shop-scratch button {
    padding: 0.35em 0.55em;
    border: 1px solid rgba(60, 40, 20, 0.45);
    border-radius: 2px;
    background: transparent;
    color: var(--hb-ink-soft);
    font: 700 8.5px/1 "Space Mono", ui-monospace, monospace;
    letter-spacing: 0.14em;
    cursor: pointer;
}
.hb-plate-ledger .hb-shop-choices[data-choice="preset"] button {
    border-color: var(--hb-accent);
    color: var(--hb-accent);
}
.hb-plate-ledger .hb-shop-art svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 1px rgba(120, 40, 10, 0.55));
}
.hb-plate-ledger .hb-shop-preview small {
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    font-style: italic;
    font-size: 11px;
    letter-spacing: 0;
    color: var(--hb-ink-soft);
}
.hb-plate-ledger .hb-shop-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4em;
}
.hb-plate-ledger .hb-shop-row > span {
    flex: 0 0 4.5em;
    font-size: 9px;
    letter-spacing: 0.22em;
    color: var(--hb-ink-soft);
}
.hb-plate-ledger .hb-shop-row input[type="text"] {
    width: 5em;
    padding: 0.35em 0.5em;
    border: 1px solid rgba(60, 40, 20, 0.45);
    background: rgba(255, 255, 255, 0.35);
    color: var(--hb-ink);
    font: 700 13px/1.2 "Space Mono", ui-monospace, monospace;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}
.hb-plate-ledger .hb-shop-row input[type="range"] {
    flex: 1 1 6em;
    accent-color: var(--hb-accent);
}
.hb-plate-ledger .hb-shop-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em;
}
.hb-plate-ledger .hb-shop-choices button {
    padding: 0.35em 0.55em;
    border: 1px solid rgba(60, 40, 20, 0.45);
    border-radius: 2px;
    background: transparent;
    color: var(--hb-ink-soft);
    font: 700 8.5px/1 "Space Mono", ui-monospace, monospace;
    letter-spacing: 0.14em;
    cursor: pointer;
}
.hb-plate-ledger .hb-shop-choices button.is-on {
    background: var(--hb-ink);
    border-color: var(--hb-ink);
    color: var(--hb-paper);
}
.hb-plate-ledger .hb-shop-actions {
    display: flex;
    justify-content: flex-end;
}
.hb-plate-ledger .hb-shop-use {
    padding: 0.5em 0.9em;
    border: 1px solid var(--hb-accent);
    border-radius: 2px;
    background: var(--hb-accent);
    color: #fff;
    font: 700 9.5px/1 "Space Mono", ui-monospace, monospace;
    letter-spacing: 0.2em;
    cursor: pointer;
}
.hb-plate-ledger .hb-guest {
    inset: 3% 5%;
}

/* the publisher's note on the title page: Harrow's words around the book */
.hb-plate .hb-publisher-note {
    max-width: 32em;
    margin-top: 0.4em;
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    font-style: italic;
    font-size: clamp(11px, calc(var(--hb-page-w) * 0.031), 14.5px);
    letter-spacing: 0;
    line-height: 1.5;
    color: var(--hb-ink);
}
.hb-plate .hb-publisher-sig {
    margin-top: 1.6em;
    font-size: 9px;
    letter-spacing: 0.22em;
}

/* the foreword from the publisher: set like a book page, not a plate */
.hb-plate-foreword {
    justify-content: flex-start;
    align-items: stretch;
    text-align: left;
    padding: 9% 10% 8%;
}
.hb-plate-foreword .hb-eyebrow {
    text-align: center;
    margin-bottom: 1.4em;
}
.hb-plate-foreword .hb-foreword-cont {
    color: var(--hb-ink-soft);
    opacity: 0.8;
}
.hb-plate-foreword .hb-foreword p {
    margin: 0 0 0.85em;
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    font-size: clamp(11px, calc(var(--hb-page-w) * 0.031 + 0.5px), 14.5px);
    line-height: 1.5;
    color: var(--hb-ink);
    text-align: justify;
    hyphens: none;
}
.hb-plate-foreword .hb-foreword p .hb-x {
    color: var(--hb-x-deep);
    text-shadow: none;
}
.hb-plate-foreword .hb-foreword-sig {
    margin-top: auto;
    padding-top: 0.6em;
    text-align: right;
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    font-style: italic;
    font-size: clamp(13px, calc(var(--hb-page-w) * 0.04), 18px);
    color: var(--hb-ink);
}

/* Harrow's editorial notes: scraps stuck to the page, his hand, red ink */
.hb-note {
    position: absolute;
    width: 38%;
    max-width: 190px;
    padding: 10px 12px 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)),
        #f7efd6;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(60, 40, 20, 0.18);
    font-family: "Permanent Marker", "Bradley Hand", "Segoe Script", "Comic Sans MS", cursive;
    font-size: clamp(11px, calc(var(--hb-page-w) * 0.032), 14px);
    line-height: 1.25;
    color: var(--hb-accent);
    z-index: 3;
    cursor: pointer;
    transition: transform 160ms ease;
}
.hb-note-left {
    left: 2.5%;
    transform: rotate(-2.5deg);
}
.hb-note-right {
    right: 2.5%;
    transform: rotate(2deg);
}
.hb-note.is-lifted {
    transform: rotate(0deg) scale(1.08);
    z-index: 4;
}
.hb-note p {
    margin: 0;
}
.hb-note i {
    display: block;
    margin-top: 4px;
    text-align: right;
    font-style: normal;
    font-size: 0.85em;
    opacity: 0.8;
}
.hb-note-tape {
    position: absolute;
    top: -7px;
    left: 50%;
    width: 46px;
    height: 14px;
    margin-left: -23px;
    background: rgba(230, 220, 190, 0.75);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    transform: rotate(-3deg);
}
.hb-note-inline {
    position: relative;
    width: auto;
    max-width: 24em;
    margin: 0.6em 0 1.2em auto;
    font-size: 14px;
    transform: rotate(-1deg);
}
.hb-host.hb-night .hb-note {
    background: #2a2622;
    color: #ff4b5c;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* words can be picked up off the page (the reader's dictionary): the text
   itself selects; the corners still grab for a turn, the edges still tap */
.hb-face .hb-flow {
    user-select: text;
    -webkit-user-select: text;
}

/* Emoji picker on the branding iron -- Harrow, 2026-09-13: "on desktop,
   no way to change emoji, no emoji menu." A phone raises an emoji
   keyboard for this field and a desktop keyboard does not, so PICK
   opens the shop's own drawer of stamps. */
.hb-plate-ledger .hb-guest-emoji-row {
    display: flex;
    gap: 0.4em;
    align-items: stretch;
}

.hb-plate-ledger .hb-guest-emoji-row input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
}

.hb-plate-ledger .hb-guest-emoji-open {
    flex: 0 0 auto;
    padding: 0.35em 0.7em;
    border: 1px solid rgba(60, 40, 20, 0.45);
    border-radius: 2px;
    background: rgba(60, 40, 20, 0.08);
    color: var(--hb-ink);
    font: 700 9px/1 "Space Mono", ui-monospace, monospace;
    letter-spacing: 0.18em;
    cursor: pointer;
}

.hb-plate-ledger .hb-guest-emoji-open:hover {
    background: rgba(60, 40, 20, 0.18);
}

.hb-plate-ledger .hb-guest-emoji-tray {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
    gap: 2px;
    margin-top: 0.4em;
    padding: 6px;
    border: 1px solid rgba(60, 40, 20, 0.35);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.4);
    max-height: 180px;
    overflow-y: auto;
}

.hb-plate-ledger .hb-guest-emoji-tray[hidden] {
    display: none;
}

.hb-plate-ledger .hb-guest-emoji-pick {
    min-height: 34px;
    border: 0;
    border-radius: 2px;
    background: transparent;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}

.hb-plate-ledger .hb-guest-emoji-pick:hover,
.hb-plate-ledger .hb-guest-emoji-pick:focus-visible {
    background: rgba(var(--hb-accent-rgb), 0.14);
}

/* ============================================================
   WHAT THIS COST TO PRINT
   Harrow, 2026-09-15: "What it cost to publish this book 100% on-chain
   $X.XX USD ..... Pulschain, $X.XX USD..... Robinhood, etc."
   Its own page after the edition note, before the index. The dollar
   figure is the loud one -- it is the whole argument -- with the coin
   amount and the date underneath it as the proof.
   ============================================================ */

.hb-cost-lede {
    margin: 0 0 1.1em;
    font-size: 0.95em;
    line-height: 1.55;
    color: var(--hb-ink);
}

.hb-cost-table {
    display: flex;
    flex-direction: column;
    gap: 0.95em;
}

.hb-cost-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "chain usd"
        "when  native";
    align-items: baseline;
    gap: 0.15em 0.8em;
    padding-bottom: 0.8em;
    border-bottom: 1px solid var(--hb-line, rgba(0, 0, 0, 0.14));
}

.hb-cost-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.hb-cost-chain {
    grid-area: chain;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.82em;
}

/* The number the page exists for. */
.hb-cost-usd {
    grid-area: usd;
    font-weight: 700;
    font-size: 1.5em;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.hb-cost-native {
    grid-area: native;
    text-align: right;
    white-space: nowrap;
    font-size: 0.72em;
    letter-spacing: 0.05em;
    color: var(--hb-ink-soft);
    font-variant-numeric: tabular-nums;
}

.hb-cost-when {
    grid-area: when;
    font-size: 0.68em;
    letter-spacing: 0.08em;
    color: var(--hb-ink-soft);
}

.hb-cost-source {
    margin-top: 0.5em;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   FULL DISCLOSURE -- which pages are the chain, which are us
   Harrow, 2026-09-15: "for full disclosure too, we should declare
   on-chain pages from off-chain on server pages."
   Quiet by design: it is a mark in the corner of the paper, the way a
   printer's mark sits on a real sheet, not a banner. It must be
   readable if you look for it and invisible if you are reading.
   ============================================================ */

.hb-provenance {
    position: absolute;
    right: 12px;
    bottom: 8px;
    z-index: 3;

    font: 700 6.5px/1 "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.18em;
    text-transform: uppercase;

    pointer-events: none;
    user-select: none;
}

/* The chain speaking gets the ink; Hellbox speaking is set back, because
   the point of the mark is to make our own pages identifiable as ours. */
.hb-provenance-chain {
    color: var(--hb-ink-soft);
    opacity: 0.62;
}

.hb-provenance-hellbox {
    color: var(--hb-ink-soft);
    opacity: 0.48;
    font-style: normal;
}

/* A left-hand page's mark moves to the gutter side so it never collides
   with the page number or the spine shadow. */
.hb-page-left .hb-provenance,
.hb-face-back .hb-provenance {
    right: auto;
    left: 12px;
}