/* ================================================================
   HELLBOX COMIX -- THE LAIR (reimagined homepage layer)
   Loads AFTER style.css. Owns every `.lr-*` block and lightly
   harmonizes the kept widget sections (hero, press, wall, signals,
   exit, footer) so the whole page reads as one shop floor.

   Accent rule (same as the machines): `--theme` / `--theme-hot`
   swap with the connected wallet's chain via [data-chain-theme];
   `--lr-red` is Harrow's own red and never swaps -- it's for
   stamps, seals and the things that are his, not the chain's.
   ================================================================ */

:root {
    --lr-ink: #050505;
    --lr-ink-2: #0c0b0d;
    --lr-ink-3: #151317;
    --lr-ink-4: #1f1c22;
    --lr-paper: #ece8df;
    --lr-paper-2: #b9b2a5;
    --lr-paper-3: #7d766c;
    --lr-red: #c62020;
    --lr-red-hot: #ff3b2f;
    --lr-note: #e7ca77;
    --lr-note-ink: #1a1408;
    --lr-warn: #f2b418;
    --lr-ok: #7dffb0;
    --lr-crt: #a8f0c1;
    --lr-crt-dim: rgba(168, 240, 193, 0.55);
    --lr-line: rgba(236, 232, 223, 0.12);
    --lr-line-strong: rgba(236, 232, 223, 0.26);
    --lr-accent: var(--theme-hot, #ff3b2f);
    --lr-accent-soft: rgba(var(--theme-hot-rgb, 255, 59, 47), 0.16);
    --lr-display: "Barlow Condensed", "Oswald", "Arial Narrow", Impact, sans-serif;
    --lr-body: "Barlow", "Helvetica Neue", Arial, sans-serif;
    --lr-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
    --lr-hand: "Permanent Marker", "Comic Sans MS", cursive;
    --lr-shell: min(1440px, calc(100vw - 48px));
    --lr-gap: clamp(88px, 8vw, 150px);
    --lr-h-xl: clamp(64px, 9.5vw, 150px);
    --lr-h-l: clamp(46px, 6.4vw, 104px);
    --lr-h-m: clamp(30px, 3.2vw, 46px);
    --lr-lede: clamp(17px, 1.35vw, 21px);
}

/* ---------------------------------------------------------------
   HARMONIZE THE KEPT SECTIONS
   Old numbered kickers and headings pick up the new voice.
   --------------------------------------------------------------- */

html[data-lair] .section-number {
    font-family: var(--lr-display);
    font-weight: 800;
    letter-spacing: 0.14em;
    color: var(--lr-accent);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--lr-line);
    border-radius: 0;
    padding: 0 0 14px;
    min-height: 0;
    width: 100%;
    font-size: 15px;
}

html[data-lair] .section-heading h2,
html[data-lair] .press-heading h2,
html[data-lair] .exit-section h2,
html[data-lair] .signals-section h2,
html[data-lair] .obsession-wall-section h2 {
    font-family: var(--lr-display);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 0.9;
    text-wrap: balance;
}

html[data-lair] .section-heading .eyebrow,
html[data-lair] .system-label {
    font-family: var(--lr-mono);
    letter-spacing: 0.14em;
}

html[data-lair] .section-intro p,
html[data-lair] .hero-description {
    font-family: var(--lr-body);
}

/* The old floating radio machine stays exactly as built, but it is
   now summoned from the deck rather than sitting open in the corner.
   Its toggle chip is still there for people who scroll past. */

/* ---------------------------------------------------------------
   PRIMITIVES
   --------------------------------------------------------------- */

.lr-shell {
    width: var(--lr-shell);
    margin-inline: auto;
}

.lr-section {
    position: relative;
    padding-block: var(--lr-gap);
    font-family: var(--lr-body);
    color: var(--lr-paper);
}

.lr-section-raised {
    background: var(--lr-ink-2);
    border-top: 1px solid var(--lr-line);
    border-bottom: 1px solid var(--lr-line);
}

.lr-h {
    font-family: var(--lr-display);
    font-weight: 800;
    line-height: 0.9;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    text-wrap: balance;
    color: var(--lr-paper);
}

.lr-h-xl { font-size: var(--lr-h-xl); }
.lr-h-l  { font-size: var(--lr-h-l); }
.lr-h-m  { font-size: var(--lr-h-m); font-weight: 700; }

.lr-red  { color: var(--lr-red-hot); }
.lr-dim  { color: var(--lr-paper-2); }

.lr-hand {
    font-family: var(--lr-hand);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: var(--lr-red-hot);
}

.lr-hand-sub {
    font-size: 0.42em;
    line-height: 1.2;
    display: inline-block;
    transform: rotate(-2deg);
}

.lr-lede {
    font-size: var(--lr-lede);
    line-height: 1.45;
    max-width: 62ch;
    margin: 0;
    color: var(--lr-paper);
}

.lr-lede-2 { margin-top: 16px; }

.lr-body {
    font-size: 16px;
    line-height: 1.55;
    margin: 0 0 12px;
    max-width: 60ch;
}

.lr-small {
    font-size: 14px;
    line-height: 1.5;
    color: var(--lr-paper-2);
    max-width: 60ch;
    margin: 14px 0 0;
}

.lr-eyebrow {
    font-family: var(--lr-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lr-paper-2);
    margin: 0 0 12px;
}

.lr-eyebrow b { color: var(--lr-accent); font-weight: 500; }

.lr-grid2 {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(28px, 5vw, 72px);
    align-items: end;
}

@media (max-width: 900px) {
    .lr-grid2 { grid-template-columns: 1fr; }
}

/* station bar */
.lr-station {
    display: flex;
    align-items: baseline;
    gap: 18px;
    margin-bottom: 34px;
    border-bottom: 1px solid var(--lr-line);
    padding-bottom: 14px;
}

.lr-station-num {
    font-family: var(--lr-display);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.14em;
    color: var(--lr-accent);
}

.lr-station-name {
    font-family: var(--lr-mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lr-paper-2);
}

.lr-station-right {
    margin-left: auto;
    font-family: var(--lr-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lr-paper-3);
    text-align: right;
}

/* stamp */
.lr-stamp {
    display: inline-block;
    font-family: var(--lr-display);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 3px solid var(--lr-red-hot);
    color: var(--lr-red-hot);
    padding: 0.22em 0.55em;
    font-size: 15px;
    line-height: 1;
    transform: rotate(-6deg);
    opacity: 0.9;
    mix-blend-mode: screen;
    pointer-events: none;
}

/* sharpie note */
.lr-note {
    position: relative;
    background: var(--lr-note);
    color: var(--lr-note-ink);
    padding: 18px 20px 22px;
    width: min(280px, 100%);
    font-family: var(--lr-hand);
    font-size: 19px;
    line-height: 1.25;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
    transform: rotate(var(--r, -2deg));
    border: 0;
    text-align: left;
    cursor: default;
}

button.lr-note { cursor: pointer; }
button.lr-note:hover { transform: rotate(0deg) scale(1.02); }

.lr-note small {
    display: block;
    font-family: var(--lr-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.55;
    margin-bottom: 8px;
}

.lr-note em {
    display: block;
    font-style: normal;
    font-size: 15px;
    margin-top: 4px;
    opacity: 0.8;
}

/* THE SIGNATURE ON EVERY NOTE -- Harrow, 2026-09-15: "why are notes not
   consistent in font and wordmark?"
   They were not: five notes signed "-- H." in Permanent Marker, the
   archive note signed with the real Harrow wordmark over a sans-serif
   body, and the press post-it signed with nothing at all. Three hands on
   notes that are all supposed to be from the same man.
   One hand now, and it is his actual mark rather than an initial. Drawn
   as a background image so the "-- H." underneath stays in the markup for
   a screen reader; text-indent, not display:none, keeps it readable to
   anything that does not paint. */
.lr-note .sig {
    display: block;
    margin-top: 12px;
    height: 26px;

    background-image: url("/assets/art/harrow-wordmark-black.webp");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 100%;

    /* the "-- H." stays for assistive tech, off-canvas for eyes */
    text-indent: -9999px;
    overflow: hidden;
    white-space: nowrap;
}

/* buttons */
.lr-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    font-family: var(--lr-display);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.7em 1.3em;
    border: 1px solid var(--lr-paper);
    color: var(--lr-paper);
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.lr-btn:hover,
.lr-btn:focus-visible {
    background: var(--lr-paper);
    color: var(--lr-ink);
    outline: none;
}

/* ---------------------------------------------------------------
   AFTER THE HERO: STATUS STRIP + PRESS LOG
   --------------------------------------------------------------- */

.lr-strip {
    background: var(--lr-ink);
    border-top: 1px solid var(--lr-line);
    padding-block: 26px;
    font-family: var(--lr-body);
}

.lr-strip-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 28px;
    align-items: center;
}

.lr-status {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--lr-line-strong);
    background: rgba(5, 5, 5, 0.6);
    font-family: var(--lr-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.lr-status-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 16px;
    border-right: 1px solid var(--lr-line);
    border-bottom: 1px solid var(--lr-line);
    color: var(--lr-paper-2);
}

.lr-status-row:nth-child(3n) { border-right: 0; }
.lr-status-row:nth-last-child(-n+3) { border-bottom: 0; }
.lr-status-row b { color: var(--lr-paper); font-weight: 500; text-align: right; }
.lr-status-row b.ok { color: var(--lr-ok); }
.lr-status-row b.hot { color: var(--lr-red-hot); }
.lr-status-row b.ch { color: var(--lr-accent); }

.lr-note-hero { --r: 2deg; width: 250px; }

@media (max-width: 900px) {
    .lr-strip-grid { grid-template-columns: 1fr; }
    .lr-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lr-status-row:nth-child(3n) { border-right: 1px solid var(--lr-line); }
    .lr-status-row:nth-child(2n) { border-right: 0; }
    .lr-status-row:nth-last-child(-n+3) { border-bottom: 1px solid var(--lr-line); }
    .lr-status-row:nth-last-child(-n+2) { border-bottom: 0; }
    .lr-note-hero { justify-self: end; }
}

.lr-log {
    border-top: 1px solid var(--lr-line);
    border-bottom: 1px solid var(--lr-line);
    background: var(--lr-ink-2);
    overflow: hidden;
    white-space: nowrap;
}

.lr-log-track {
    display: inline-flex;
    padding-block: 11px;
    animation: lr-log 95s linear infinite;
    will-change: transform;
}

.lr-log-track span {
    font-family: var(--lr-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lr-paper-2);
    padding-inline: 26px;
    border-right: 1px solid var(--lr-line);
}

.lr-log-track span b {
    color: var(--lr-accent);
    font-weight: 500;
    margin-right: 10px;
}

@keyframes lr-log { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------
   STATION 02 // HARROW FM DECK
   --------------------------------------------------------------- */

.lr-fm {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
}

.lr-fm-copy .lr-lede { margin-top: 22px; }

.lr-deck {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 0;
    border: 1px solid var(--lr-line-strong);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 40%),
        var(--lr-ink-2);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8);
}

.lr-deck-art {
    position: relative;
    border: 0;
    border-right: 1px solid var(--lr-line-strong);
    background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.06), transparent 65%), var(--lr-ink);
    padding: 14px 10px 32px;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.lr-deck-art img {
    width: 100%;
    max-width: 120px;
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.8));
    transition: transform 0.2s;
}

.lr-deck-art:hover img,
.lr-deck-art:focus-visible img { transform: scale(1.04); }

.lr-deck-art-label {
    position: absolute;
    left: 0; right: 0; bottom: 9px;
    font-family: var(--lr-mono);
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lr-paper-3);
    text-align: center;
}

.lr-deck-panel {
    padding: 18px 20px 16px;
    display: grid;
    gap: 14px;
    align-content: start;
}

.lr-deck-screen {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #07070a;
    border: 1px solid var(--lr-line-strong);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.8);
    font-family: var(--lr-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    overflow: hidden;
}

.lr-deck-led {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #3a2a2a;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
    flex: 0 0 auto;
    transition: background 0.2s, box-shadow 0.2s;
}

.lr-deck[data-playing="1"] .lr-deck-led {
    background: var(--lr-accent);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6), 0 0 14px var(--lr-accent);
}

.lr-deck-now {
    color: var(--lr-warn);
    font-size: 15px;
    font-weight: 500;
    text-shadow: 0 0 12px rgba(242, 180, 24, 0.35);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
}

.lr-deck[data-playing="1"] .lr-deck-now { color: var(--lr-accent); text-shadow: 0 0 12px var(--lr-accent-soft); }

.lr-deck-tag {
    font-size: 10px;
    color: var(--lr-paper-3);
    flex: 0 0 auto;
}

.lr-deck-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.lr-deck-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--lr-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 10px 14px;
    border: 1px solid var(--lr-line-strong);
    background: var(--lr-ink-3);
    color: var(--lr-paper);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.lr-deck-btn:hover,
.lr-deck-btn:focus-visible { border-color: var(--lr-paper); outline: none; }

.lr-deck-start { background: var(--lr-red); border-color: var(--lr-red-hot); color: #fff; min-width: 118px; }
.lr-deck-start:hover { background: var(--lr-red-hot); }
.lr-deck[data-playing="1"] .lr-deck-start { background: var(--lr-ink-3); border-color: var(--lr-paper); }

.lr-deck-btn-glyph { font-size: 12px; }

.lr-deck-vol {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.lr-deck-vol-btn { padding: 10px 13px; font-size: 18px; line-height: 1; }

.lr-deck-vol-bars {
    display: inline-flex;
    gap: 3px;
    align-items: flex-end;
    height: 18px;
}

.lr-deck-vol-bars i {
    display: block;
    width: 5px;
    background: var(--lr-paper-3);
    height: 100%;
    transform-origin: bottom;
}

.lr-deck-vol-bars i.on { background: var(--lr-accent); }

.lr-deck-foot {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--lr-paper-3);
    display: grid;
    gap: 4px;
}

.lr-deck-foot-signal {
    font-family: var(--lr-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lr-paper-2);
}

@media (max-width: 900px) {
    .lr-fm { grid-template-columns: 1fr; }
    .lr-deck { grid-template-columns: 110px 1fr; }
    .lr-deck-vol { margin-left: 0; }
}

@media (max-width: 480px) {
    .lr-deck { grid-template-columns: 1fr; }
    .lr-deck-art { border-right: 0; border-bottom: 1px solid var(--lr-line-strong); }
}

/* ---------------------------------------------------------------
   STATION 03 // MASTHEAD
   --------------------------------------------------------------- */

.lr-mast {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
}

.lr-mast-portrait { position: relative; }

.lr-mast-figure {
    display: block;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    width: min(460px, 100%);
    margin-inline: auto;
}

.lr-mast-figure img {
    width: 100%;
    filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.7));
    transition: transform 0.25s;
}

.lr-mast-figure:hover img { transform: translateY(-4px); }

.lr-cred {
    position: absolute;
    right: 0;
    bottom: 5%;
    width: min(260px, 82%);
    background: var(--lr-paper);
    color: var(--lr-ink);
    padding: 14px 16px;
    transform: rotate(3deg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    font-family: var(--lr-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.55;
    text-align: left;
    border: 0;
    cursor: pointer;
}

.lr-cred:hover { transform: rotate(1deg); }

.lr-cred b {
    display: block;
    font-family: var(--lr-display);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 0.02em;
    line-height: 1;
    margin-bottom: 8px;
    color: var(--lr-red);
}

.lr-stamp-mast {
    position: absolute;
    left: 4%;
    top: 6%;
    font-size: 18px;
}

.lr-mast-copy .lr-lede { margin-top: 22px; }

.lr-roles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border: 1px solid var(--lr-line-strong);
    margin-top: 28px;
}

.lr-roles > div {
    padding: 14px 16px;
    border-bottom: 1px solid var(--lr-line);
    border-right: 1px solid var(--lr-line);
}

.lr-roles > div:nth-child(2n) { border-right: 0; }
.lr-roles > div:nth-last-child(-n+2) { border-bottom: 0; }

.lr-roles .k {
    font-family: var(--lr-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lr-paper-3);
    margin-bottom: 4px;
}

.lr-roles .v {
    font-family: var(--lr-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.lr-review {
    display: block;
    width: 100%;
    text-align: left;
    margin-top: 28px;
    border: 0;
    border-left: 3px solid var(--lr-accent);
    background: transparent;
    padding: 6px 0 6px 20px;
    color: var(--lr-paper);
    cursor: pointer;
    font-family: var(--lr-body);
}

.lr-review-label {
    display: block;
    font-family: var(--lr-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lr-paper-3);
    margin-bottom: 8px;
}

.lr-review-q {
    display: block;
    font-size: 19px;
    line-height: 1.45;
    max-width: 60ch;
}

.lr-review cite {
    display: block;
    margin-top: 10px;
    font-style: normal;
    font-family: var(--lr-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lr-paper-3);
}

.lr-mast-line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 26px 0 0;
    font-family: var(--lr-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lr-paper-2);
}

@media (max-width: 900px) {
    .lr-mast { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   STATION 04 // THE HOUSE
   --------------------------------------------------------------- */

.lr-house-open { align-items: start; }

.lr-problem {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    margin-top: 56px;
    padding: 30px 0;
    border-top: 1px solid var(--lr-line);
    border-bottom: 1px solid var(--lr-line);
}

.lr-problem-copy .lr-h { margin-bottom: 16px; }
.lr-note-therapy { --r: -2.5deg; width: 280px; }
.lr-note-therapy > span:not(.sig) { display: block; font-size: 22px; line-height: 1.1; }

@media (max-width: 760px) {
    .lr-problem { grid-template-columns: 1fr; }
    .lr-note-therapy { justify-self: end; }
}

.lr-born {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border: 1px solid var(--lr-line-strong);
    margin-top: 48px;
}

.lr-born > div {
    padding: 26px 22px 28px;
    border-right: 1px solid var(--lr-line);
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 12px;
    min-height: 330px;
}

.lr-born > div:last-child { border-right: 0; }

.lr-born .step {
    font-family: var(--lr-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--lr-accent);
}

.lr-born h3 {
    font-family: var(--lr-display);
    font-weight: 800;
    font-size: clamp(30px, 2.6vw, 40px);
    line-height: 0.9;
    margin: 0;
    text-transform: uppercase;
}

.lr-born p {
    font-size: 15px;
    line-height: 1.5;
    color: var(--lr-paper-2);
    margin: 0;
}

.lr-born .foot {
    font-family: var(--lr-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--lr-paper-3);
    border-top: 1px dashed var(--lr-line);
    padding-top: 12px;
    line-height: 1.6;
}

.lr-born .foot b { color: var(--lr-paper); font-weight: 500; }

.lr-born-burn {
    background:
        repeating-linear-gradient(-45deg, transparent 0 14px, rgba(242, 180, 24, 0.05) 14px 16px),
        var(--lr-ink-3);
}

.lr-born-burn .step { color: var(--lr-warn); }

@media (max-width: 1100px) {
    .lr-born { grid-template-columns: repeat(3, 1fr); }
    .lr-born > div:nth-child(3n) { border-right: 0; }
    .lr-born > div:nth-child(-n+3) { border-bottom: 1px solid var(--lr-line); }
    .lr-born > div:nth-child(4) { border-right: 1px solid var(--lr-line); }
}

@media (max-width: 700px) {
    .lr-born { grid-template-columns: 1fr; }
    .lr-born > div { border-right: 0 !important; border-bottom: 1px solid var(--lr-line); min-height: 0; }
    .lr-born > div:last-child { border-bottom: 0; }
}

.lr-marks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(20px, 3vw, 40px);
    margin-top: 40px;
}

.lr-marks table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--lr-mono);
    font-size: 12.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lr-marks caption {
    text-align: left;
    font-family: var(--lr-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding-bottom: 10px;
    color: var(--lr-paper);
}

.lr-marks caption small {
    display: block;
    font-family: var(--lr-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--lr-paper-3);
    font-weight: 400;
    margin-top: 4px;
}

.lr-marks th,
.lr-marks td {
    text-align: left;
    padding: 9px 10px;
    border-top: 1px solid var(--lr-line);
}

.lr-marks th { color: var(--lr-paper-3); font-weight: 400; font-size: 11px; letter-spacing: 0.14em; }
.lr-marks td:last-child,
.lr-marks th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.lr-marks tr.top td { color: var(--lr-red-hot); }

@media (max-width: 760px) { .lr-marks { grid-template-columns: 1fr; } }

.lr-ledger {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
    margin-top: 56px;
}

.lr-ledger .lr-lede { margin-top: 14px; }
.lr-ledger .lr-note { margin-top: 28px; }

.lr-ledger-list {
    margin: 0;
    border: 1px solid var(--lr-line-strong);
    background: var(--lr-ink);
}

.lr-ledger-list .head {
    padding: 12px 18px;
    border-bottom: 1px solid var(--lr-line-strong);
    font-family: var(--lr-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lr-paper-3);
    display: flex;
    justify-content: space-between;
}

.lr-ledger-list .r {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--lr-line);
    align-items: baseline;
}

.lr-ledger-list .r:last-child { border-bottom: 0; }
.lr-ledger-list dt { font-size: 15px; color: var(--lr-paper-2); }

.lr-ledger-list dd {
    margin: 0;
    font-family: var(--lr-mono);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lr-paper);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.lr-ledger-list dd.hot { color: var(--lr-red-hot); }
.lr-ledger-list dd.ch { color: var(--lr-accent); }

@media (max-width: 900px) { .lr-ledger { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   STATION 06 // YOUR STUFF (archive terminal + organized shelf)
   --------------------------------------------------------------- */

html[data-lair] .archive-terminal { margin-top: 40px; }
/* the old per-publication list is superseded by the shelf below; app.js still fills it, we just don't show it */
html[data-lair] .collection-list { display: none; }
html[data-lair] .press-heading h2 { overflow: visible; }

.lr-vault {
    margin-top: 36px;
    border: 1px solid var(--lr-line-strong);
    background: var(--lr-ink);
}

.lr-vault-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--lr-line-strong);
    font-family: var(--lr-mono);
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lr-paper-2);
}

.lr-vault-bar-title { font-family: var(--lr-display); font-weight: 800; font-size: 16px; letter-spacing: 0.12em; color: var(--lr-paper); }
.lr-vault-bar-chain { color: var(--lr-accent); }

.lr-vault-filters { display: flex; gap: 6px; margin-left: auto; }

.lr-vault-filters button {
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    padding: 6px 10px;
    border: 1px solid var(--lr-line);
    background: transparent;
    color: var(--lr-paper-2);
    cursor: pointer;
}

.lr-vault-filters button.on { border-color: var(--lr-paper); color: var(--lr-paper); }

.lr-vault-groups { display: grid; }

.lr-vault-group { border-bottom: 1px solid var(--lr-line); }
.lr-vault-group:last-child { border-bottom: 0; }

.lr-vault-group-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 16px 18px 6px;
    font-family: var(--lr-display);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.lr-vault-group-head small {
    font-family: var(--lr-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--lr-paper-3);
    font-weight: 400;
}

.lr-vault-group-head .lr-tag { margin-left: auto; }

.lr-tag {
    display: inline-block;
    font-family: var(--lr-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 4px 8px;
    border: 1px solid var(--lr-line-strong);
    color: var(--lr-paper-2);
    font-weight: 400;
}

.lr-tag.native { border-color: var(--lr-red-hot); color: var(--lr-red-hot); }
.lr-tag.outside { border-color: var(--lr-paper-3); color: var(--lr-paper-3); border-style: dashed; }

/* Which chain's edition is in this case. Each chain wears its own fixed
   brand colour (Robinhood green, PulseChain purple, Base blue) exactly
   like the Press Report's chain tags -- set inline as --chain-rgb by
   lair.js from app.js's one table. Falls back to the paper colour if a
   chain has no brand colour rather than disappearing. */
.lr-tag.chain {
    border-color: rgba(var(--chain-rgb, 214, 211, 203), 0.55);
    color: rgb(var(--chain-rgb, 214, 211, 203));
    background: rgba(var(--chain-rgb, 214, 211, 203), 0.07);
    font-weight: 600;
}
.lr-edition { font-family: var(--lr-mono); font-size: 10.5px; letter-spacing: 0.14em; font-weight: 600; }

.lr-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 14px;
    padding: 10px 18px 22px;
}

.lr-card {
    border: 1px solid var(--lr-line-strong);
    background: var(--lr-ink-3);
    padding: 14px;
    display: grid;
    gap: 10px;
    position: relative;
}

.lr-card-cover {
    aspect-ratio: 2 / 3;
    background: linear-gradient(160deg, #2a2226, #111);
    border: 1px solid var(--lr-line);
    position: relative;
    display: grid;
    place-items: center;
    font-family: var(--lr-display);
    font-weight: 800;
    font-size: 30px;
    color: rgba(236, 232, 223, 0.18);
    overflow: hidden;
    text-align: center;
    padding: 12px;
    line-height: 0.95;
}

.lr-card-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.lr-card.archived .lr-card-cover::after {
    content: "";
    position: absolute;
    inset: -6px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02) 40%, rgba(255, 255, 255, 0.1));
    pointer-events: none;
}

.lr-seal {
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--lr-red);
    box-shadow: 0 0 0 2px var(--lr-ink-3);
    vertical-align: -2px;
    margin-right: 8px;
}

.lr-seal-archived { background: #cfe9ff; box-shadow: 0 0 0 2px var(--lr-ink-3), 0 0 0 4px rgba(255, 255, 255, 0.25); }
.lr-seal-broken { background: transparent; border: 2px dashed var(--lr-paper-3); }

.lr-card-cover .lr-seal { position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; margin: 0; }

.lr-card-title {
    font-family: var(--lr-display);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: baseline;
}

.lr-card-meta {
    font-family: var(--lr-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lr-paper-3);
    line-height: 1.7;
}

.lr-card-meta b { color: var(--lr-paper); font-weight: 500; }

.lr-chip {
    display: inline-block;
    font-family: var(--lr-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 4px 8px;
    border: 1px solid;
    white-space: nowrap;
}

.lr-chip.sealed { color: var(--lr-red-hot); border-color: var(--lr-red-hot); }
.lr-chip.archived { color: #cfe9ff; border-color: #cfe9ff; }
.lr-chip.unsealed { color: var(--lr-paper-3); border-color: var(--lr-paper-3); }
.lr-chip.owned { color: var(--lr-ok); border-color: var(--lr-ok); }
.lr-chip.missing { color: var(--lr-paper-3); border-color: var(--lr-paper-3); border-style: dashed; }
.lr-chip.onpress { color: var(--lr-warn); border-color: var(--lr-warn); }

.lr-card-acts { display: flex; gap: 6px; flex-wrap: wrap; }

.lr-card-acts a,
.lr-card-acts button {
    font-family: var(--lr-display);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 7px 10px;
    border: 1px solid var(--lr-line-strong);
    color: var(--lr-paper);
    background: transparent;
    text-decoration: none;
    cursor: pointer;
}

.lr-card-acts a:hover,
.lr-card-acts button:hover { border-color: var(--lr-paper); }
.lr-card-acts .warn { border-color: var(--lr-red-hot); color: var(--lr-red-hot); }
.lr-card-acts .dim { color: var(--lr-paper-3); border-style: dashed; cursor: default; }
.lr-card-acts .market { border-color: var(--lr-accent); color: var(--lr-accent); }

.lr-vault-status {
    margin: 0;
    padding: 14px 18px;
    border-top: 1px solid var(--lr-line);
    font-size: 14px;
    color: var(--lr-paper-2);
}

.lr-vault-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    padding: 12px 18px 16px;
    border-top: 1px solid var(--lr-line);
    font-family: var(--lr-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lr-paper-3);
}

.lr-vault-empty {
    padding: 30px 18px;
    font-family: var(--lr-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--lr-paper-3);
}

.lr-vault-empty small {
    display: block;
    font-family: var(--lr-body);
    font-weight: 400;
    font-size: 14px;
    text-transform: none;
    letter-spacing: 0;
    margin-top: 6px;
}

/* ---------------------------------------------------------------
   STATION 07 // CREATORS TERMINAL (on hellbox-creator-panel.png)
   Art is 1122 x 1402. Every control below is a percentage of that
   frame, measured from the PNG:
     screen ......... x 24.51%  y 24.61%  w 50.71%  h 30.74%
     connect ........ x 21.5%   y 65.0%   w  7.0%   h  6.2%
     upload slot .... x 34.0%   y 65.0%   w 26.4%   h  6.2%
     scan ........... x 63.2%   y 64.2%   w  8.4%   h  7.0%
     keypad ......... x 19.4%   y 76.7%   w 13.2%   h 12.3%
     send (circle) .. center 47.5% / 82.6%, radius ~7.1% of width
   --------------------------------------------------------------- */

.lr-creator {
    display: grid;
    grid-template-columns: minmax(0, 620px) 1fr;
    gap: clamp(24px, 4vw, 60px);
    align-items: start;
    margin-top: 40px;
}

.lr-creator-zone {
    position: relative;
    width: 100%;
    aspect-ratio: 1122 / 1402;
    container-type: inline-size;
    filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.7));
}

.lr-creator-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    user-select: none;
}

.lr-creator-screen {
    position: absolute;
    left: 24.51%;
    top: 24.61%;
    width: 50.71%;
    height: 30.74%;
    background: #05090a;
    border-radius: 1.2cqw;
    overflow: hidden;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(168, 240, 193, 0.08);
}

.lr-creator-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px),
        radial-gradient(ellipse at 50% 40%, rgba(168, 240, 193, 0.06), transparent 70%);
    pointer-events: none;
    z-index: 2;
}

.lr-creator-crt {
    position: absolute;
    inset: 0;
    padding: 5.5cqw 5cqw;
    font-family: var(--lr-mono);
    font-size: clamp(9px, 2.05cqw, 16px);
    line-height: 1.55;
    color: var(--lr-crt);
    text-shadow: 0 0 10px rgba(120, 255, 170, 0.28);
    overflow: hidden;
}

.lr-creator-crt .p { color: #6fdc95; }
.lr-creator-crt .dim { color: var(--lr-crt-dim); }
.lr-creator-crt .warn { color: var(--lr-warn); }
.lr-creator-crt .hot { color: #ff6b62; }
.lr-creator-crt .cur { animation: lr-blink 1s steps(2) infinite; }
.lr-creator-crt .line { white-space: pre-wrap; }
.lr-creator-crt .opts { display: flex; flex-wrap: wrap; gap: 0.6em; margin: 0.5em 0 0.7em; }

.lr-creator-crt .opt {
    display: inline-block;
    padding: 0.25em 0.7em;
    border: 1px solid rgba(168, 240, 193, 0.35);
    cursor: pointer;
    background: transparent;
    color: inherit;
    font: inherit;
    text-shadow: inherit;
}

.lr-creator-crt .opt.live { border-color: var(--lr-crt); background: rgba(168, 240, 193, 0.08); }
.lr-creator-crt .opt.sel { background: var(--lr-crt); color: #05090a; text-shadow: none; }
.lr-creator-crt .opt.hot { border-color: var(--lr-warn); color: var(--lr-warn); }
.lr-creator-crt .opt.hot:hover { background: var(--lr-warn); color: #05090a; }
.lr-creator-crt .opt small { opacity: 0.6; margin-left: 0.6em; }
.lr-creator-crt .opt:disabled { opacity: 0.45; cursor: not-allowed; }

.lr-creator-crt .field {
    display: block;
    width: 100%;
    margin: 0.4em 0;
    padding: 0.35em 0.6em;
    background: rgba(168, 240, 193, 0.06);
    border: 1px solid rgba(168, 240, 193, 0.35);
    color: var(--lr-crt);
    font: inherit;
    text-shadow: inherit;
}

.lr-creator-crt .field:focus { outline: 1px solid var(--lr-crt); }

@keyframes lr-blink { 50% { opacity: 0; } }

/* physical controls */
.lr-creator-btn {
    position: absolute;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 6%;
    outline-offset: 2px;
}

.lr-creator-btn:hover,
.lr-creator-btn:focus-visible { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35), 0 0 18px rgba(255, 255, 255, 0.18); }

.lr-creator-connect { left: 21.5%; top: 65%; width: 7%; height: 6.2%; }
.lr-creator-upload  { left: 34%;   top: 65%; width: 26.4%; height: 6.2%; }
.lr-creator-scan    { left: 63.2%; top: 64.2%; width: 8.4%; height: 7%; }
.lr-creator-send    { left: 40.4%; top: 77%; width: 14.2%; height: 11.3%; border-radius: 50%; }

.lr-creator-led {
    position: absolute;
    right: 8%;
    top: 12%;
    width: 18%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #4b1010;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.8);
}

.lr-creator[data-wallet="1"] .lr-creator-led { background: #ff2a2a; box-shadow: 0 0 10px #ff2a2a, 0 0 22px rgba(255, 42, 42, 0.5); }

.lr-creator-keypad {
    position: absolute;
    left: 19.4%;
    top: 76.7%;
    width: 13.2%;
    height: 12.3%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 4%;
}

.lr-creator-keypad button {
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 15%;
}

.lr-creator-keypad button:hover,
.lr-creator-keypad button:focus-visible { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4); outline: none; }
.lr-creator-keypad button:active { background: rgba(255, 255, 255, 0.18); }

.lr-creator-send:active { transform: scale(0.96); }

/* glass */
.lr-creator-glass {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, rgba(5, 5, 5, 0.32), rgba(5, 5, 5, 0.55));
    backdrop-filter: blur(1px);
    pointer-events: none;
}

.lr-creator-sign {
    pointer-events: auto;
    background: var(--lr-note);
    color: var(--lr-note-ink);
    padding: 2.2cqw 2.8cqw;
    transform: rotate(-2deg);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7);
    text-align: center;
    font-family: var(--lr-display);
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(16px, 3.6cqw, 34px);
    line-height: 1;
    letter-spacing: 0.02em;
    margin-top: 38%;
}

.lr-creator-sign small {
    display: block;
    margin-top: 0.4em;
    font-family: var(--lr-hand);
    font-size: 0.55em;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.lr-creator[data-state="open"] .lr-creator-glass { display: none; }
.lr-creator[data-state="locked"] .lr-creator-btn,
.lr-creator[data-state="locked"] .lr-creator-keypad button { pointer-events: none; }

.lr-creator-side { display: grid; gap: 18px; align-content: start; }

.lr-creator-steps {
    display: grid;
    border: 1px solid var(--lr-line-strong);
    font-family: var(--lr-mono);
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.lr-creator-steps span {
    padding: 11px 14px;
    border-bottom: 1px solid var(--lr-line);
    color: var(--lr-paper-3);
}

.lr-creator-steps span:last-child { border-bottom: 0; }
.lr-creator-steps span.on { color: var(--lr-paper); background: var(--lr-accent-soft); }
.lr-creator-steps span.done { color: var(--lr-ok); }

@media (max-width: 900px) {
    .lr-creator { grid-template-columns: 1fr; }
}

/* hold-to-enlarge (press screens + creator screen). No button: the
   old corner buttons covered most of a phone-sized screen. A hold
   ramps a soft glow (delayed so a plain tap shows nothing), then the
   screen jumps to the overlay. Selection/callout are off so iOS and
   Android don't pop their own long-press menus over it. */
.lr-holdable,
.lr-holdable * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.lr-holdable {
    /* .press-screen is pointer-events:none by default (taps fall
       through to the machine); the hold needs the events. Clicks
       still bubble up to the zone, so nothing under it loses a tap. */
    pointer-events: auto;
    transition: box-shadow 420ms ease 140ms;
}

.lr-holdable.is-holding {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55), 0 0 22px rgba(255, 255, 255, 0.3);
}

.lr-expand { display: none !important; }

.lr-hold-hint {
    position: fixed;
    left: 50%;
    bottom: max(18px, env(safe-area-inset-bottom));
    transform: translate(-50%, 12px);
    z-index: 9500;
    padding: 10px 14px;
    border: 1px solid var(--lr-line-strong);
    background: rgba(2, 2, 2, 0.92);
    color: var(--lr-paper);
    font-family: var(--lr-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0;
    pointer-events: none;
    transition: opacity 320ms ease, transform 320ms ease;
}

.lr-hold-hint.is-on {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* expanded overlay */
.lr-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(2, 2, 2, 0.97);
    display: grid;
    grid-template-rows: auto 1fr;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

.lr-overlay[hidden] { display: none; }

.lr-overlay-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 6px 12px;
    font-family: var(--lr-mono);
    font-size: 11.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lr-paper-2);
}

.lr-overlay-bar b { color: var(--lr-paper); font-weight: 500; }

.lr-overlay-close {
    margin-left: auto;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    padding: 8px 12px;
    border: 1px solid var(--lr-line-strong);
    background: transparent;
    color: var(--lr-paper);
    cursor: pointer;
}

.lr-overlay-stage {
    position: relative;
    min-height: 0;
    display: grid;
    place-items: center;
    overflow: auto;
}

/* the moved screen: reset its in-machine geometry */
.lr-overlay-stage > .is-expanded {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    border-radius: 6px;
}

.lr-overlay-stage > .is-expanded { cursor: default; }

/* ---------------------------------------------------------------
   STATION 09 // FUEL
   --------------------------------------------------------------- */

.lr-fuel { align-items: center; }
.lr-fuel .lr-lede { margin-top: 22px; }

.lr-gauge {
    position: relative;
    border: 1px solid var(--lr-line-strong);
    background: var(--lr-ink);
    padding: 26px;
    display: grid;
    gap: 14px;
    text-align: left;
    color: var(--lr-paper);
    cursor: pointer;
    width: 100%;
    overflow: hidden;
}

.lr-gauge:hover { border-color: var(--lr-paper-3); }

.lr-gauge .k {
    font-family: var(--lr-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lr-paper-3);
    display: flex;
    justify-content: space-between;
    gap: 14px;
}

.lr-gauge .bar {
    height: 18px;
    border: 1px solid var(--lr-line-strong);
    background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(255, 255, 255, 0.04) 6px 7px);
    position: relative;
    overflow: hidden;
}

.lr-gauge .bar i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--lr-red), var(--lr-red-hot)); }

.lr-gauge .redact { font-family: var(--lr-mono); font-size: 14px; letter-spacing: 0.12em; color: var(--lr-paper); }

.lr-gauge-mark {
    position: absolute;
    right: -6%;
    bottom: -18%;
    width: 42%;
    opacity: 0.08;
    pointer-events: none;
    filter: grayscale(1);
}

/* ---------------------------------------------------------------
   KEPT SECTIONS -- light touch
   --------------------------------------------------------------- */

html[data-lair] .signals-section,
html[data-lair] .exit-section,
html[data-lair] .obsession-wall-section,
html[data-lair] .press-section { font-family: var(--lr-body); }

/* the radio's corner toggle: still there, smaller, honest label */
html[data-lair] .radio-toggle { opacity: 0.85; }

/* ---------------------------------------------------------------
   LARGE + ULTRAWIDE (34" horizontal: 3440 x 1440)
   --------------------------------------------------------------- */

@media (min-width: 1900px) {
    :root {
        --lr-shell: min(1760px, calc(100vw - 96px));
        --lr-h-xl: clamp(120px, 7.4vw, 220px);
        --lr-h-l: clamp(84px, 4.6vw, 132px);
        --lr-lede: 23px;
    }
    .lr-born h3 { font-size: 44px; }
    .lr-creator { grid-template-columns: minmax(0, 760px) 1fr; }
}

@media (min-width: 2600px) {
    :root { --lr-shell: min(2100px, calc(100vw - 160px)); --lr-lede: 26px; }
    .lr-section { font-size: 19px; }
    .lr-born p { font-size: 18px; }
    .lr-ledger-list dt { font-size: 18px; }
    .lr-ledger-list dd { font-size: 15px; }
    .lr-cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

/* ---------------------------------------------------------------
   TALL / VERTICAL (34" rotated: 1440 x 3440, and portrait tablets)
   Wide enough for two columns, so keep them; stretch the gaps so
   sections don't bunch, and let the big machines take the width.
   --------------------------------------------------------------- */

@media (min-width: 1200px) and (max-aspect-ratio: 3/4) {
    :root { --lr-gap: clamp(120px, 9vh, 220px); --lr-h-l: clamp(72px, 7.2vw, 120px); }
    .lr-creator { grid-template-columns: minmax(0, 720px) 1fr; }
    .lr-mast { grid-template-columns: 0.9fr 1.1fr; }
}

/* ---------------------------------------------------------------
   PHONES
   --------------------------------------------------------------- */

@media (max-width: 600px) {
    :root { --lr-shell: calc(100vw - 32px); --lr-gap: 72px; }
    .lr-station { flex-wrap: wrap; gap: 10px 14px; }
    .lr-station-right { margin-left: 0; width: 100%; text-align: left; }
    .lr-roles .v { font-size: 18px; }
    .lr-cred { position: static; width: 100%; transform: none; margin-top: 14px; }
    .lr-stamp-mast { top: 2%; left: 0; font-size: 14px; }
    .lr-note { width: 100%; }
    .lr-log-track span { font-size: 11px; padding-inline: 16px; }
}

/* ---------------------------------------------------------------
   MOTION
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .lr-log-track { animation: none; }
    .lr-creator-crt .cur { animation: none; }
    .lr-mast-figure img,
    .lr-deck-art img { transition: none; }
}

/* ================================================================
   PASS 2 -- radio inversion, theory correction, the manic layer
   ================================================================ */

/* ---------------------------------------------------------------
   STATION 02: the machine lives here now
   --------------------------------------------------------------- */
.lr-fm { grid-template-columns: 0.8fr 1.2fr; align-items: center; }
.lr-fm-machine { position: relative; width: min(680px, 100%); margin-inline: auto; }
.lr-fm-machine .radio-machine-zone { margin-bottom: 0; filter: drop-shadow(0 50px 70px rgba(0, 0, 0, 0.75)); }
.lr-note-fm { margin-top: 26px; width: 240px; }

/* the floating panel is now the deck: controls only */
html[data-lair] .radio-panel { width: 300px; padding: 10px 10px 8px; }
.lr-deck-float { display: grid; grid-template-columns: 1fr; border: 0; background: transparent; box-shadow: none; }
.lr-deck-float .lr-deck-screen { padding: 10px 12px; }
.lr-deck-float .lr-deck-now { font-size: 13px; }
.lr-deck-float .lr-deck-controls { margin-top: 10px; gap: 8px; }
.lr-deck-float .lr-deck-btn { padding: 8px 11px; font-size: 13px; }
.lr-deck-float .lr-deck-start { min-width: 96px; }
.lr-deck-float .lr-deck-vol { margin-left: auto; gap: 6px; }
.lr-deck-float .lr-deck-vol-btn { padding: 8px 10px; font-size: 16px; }
.lr-deck-float .lr-deck-vol-bars { height: 14px; }
.lr-deck-float .lr-deck-vol-bars i { width: 4px; }
.lr-deck-float .lr-deck-foot { margin-top: 10px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.lr-deck-link { font-family: var(--lr-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lr-paper-2); text-decoration: none; border-bottom: 1px solid var(--lr-line-strong); }
.lr-deck-link:hover { color: var(--lr-paper); }

@media (max-width: 900px) {
    .lr-fm { grid-template-columns: 1fr; }
    .lr-fm-machine { order: -1; }
}

/* ---------------------------------------------------------------
   THEORY CORRECTION -- slower, legible, and grammatical
   Gated on .lr-go (set by lair.js when the heading is actually in
   view), not on app.js's zone observer, so it plays where you look.
   --------------------------------------------------------------- */
html[data-lair] .vandalized-word.is-revealed:not(.lr-go) .theory-strike-one,
html[data-lair] .vandalized-word.is-revealed:not(.lr-go) .theory-strike-two { clip-path: inset(0 100% 0 0); }
html[data-lair] .vandalized-word.is-revealed:not(.lr-go) .theory-correction,
html[data-lair] .vandalized-word.is-revealed:not(.lr-go) .theory-correction-arrow { opacity: 0; animation: none; }

html[data-lair] .theory-strike-one { transition-duration: 0.9s; transition-delay: 0.3s; }
html[data-lair] .theory-strike-two { transition-duration: 0.9s; transition-delay: 0.9s; }
html[data-lair] .theory-correction { transition: opacity 0.35s ease 2s, transform 0.6s cubic-bezier(.34,1.56,.64,1) 2s; }
html[data-lair] .vandalized-word.is-revealed.lr-go .theory-correction { animation-delay: 2.7s; }
html[data-lair] .theory-correction-arrow { transition: opacity 0.3s ease 2.6s, transform 0.5s cubic-bezier(.34,1.56,.64,1) 2.6s; }
html[data-lair] .theory-correction-arrow-shaft,
html[data-lair] .theory-correction-arrow-head {
    stroke: var(--lr-paper);
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.9)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.lr-theory-word { position: relative; display: inline-block; }
.lr-theory-y { position: relative; display: inline-block; }
.lr-y-strike {
    position: absolute;
    left: -6%;
    right: -6%;
    top: 50%;
    height: 0.09em;
    background: var(--lr-red-hot);
    transform: translateY(-50%) rotate(-14deg);
    transform-origin: left center;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.5s cubic-bezier(.16,1,.3,1) 3.4s;
    box-shadow: 0 0 0.05em rgba(255, 59, 47, 0.6);
}
.lr-theory-ies {
    position: absolute;
    left: 100%;
    top: -0.55em;
    margin-left: -0.45em;
    font-size: 0.62em;
    line-height: 1;
    white-space: nowrap;
    transform: rotate(-9deg) translateY(0.3em) scale(0.3);
    opacity: 0;
    filter: url(#chalkTexture);
    transition: opacity 0.3s ease 3.9s, transform 0.55s cubic-bezier(.34,1.56,.64,1) 3.9s;
    pointer-events: none;
}
.theory-heading.lr-go .lr-y-strike { clip-path: inset(0 0 0 0); }
.theory-heading.lr-go .lr-theory-y > span { color: var(--lr-paper-3); transition: color 0.4s ease 3.6s; }
.theory-heading.lr-go .lr-theory-ies { opacity: 1; transform: rotate(-9deg) translateY(0) scale(1); }

@media (prefers-reduced-motion: reduce) {
    .lr-y-strike, .lr-theory-ies { transition: none; }
}

/* ---------------------------------------------------------------
   THE MANIC LAYER
   --------------------------------------------------------------- */

/* stamps thump in when they scroll into view */
.lr-stamp { opacity: 0; transform: rotate(-6deg) scale(1.6); transition: opacity 0.12s ease, transform 0.22s cubic-bezier(.2,1.6,.4,1); }
.lr-stamp.is-inked { opacity: 0.92; transform: rotate(-6deg) scale(1); }
.lr-stamp-diff { position: absolute; right: 4%; top: -22px; font-size: 20px; transform: rotate(5deg) scale(1.6); transform-origin: right top; }
.lr-section { overflow-x: clip; overflow-y: visible; }
.lr-stamp-diff.is-inked { transform: rotate(5deg) scale(1); }

/* why this is different */
.lr-diff {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--lr-line-strong);
    margin-top: 48px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 30%),
        var(--lr-ink);
}
.lr-diff-cell { padding: 22px 22px 24px; border-right: 1px solid var(--lr-line); border-bottom: 1px solid var(--lr-line); display: grid; gap: 10px; align-content: start; }
.lr-diff-cell:nth-child(3n+1) { border-right: 0; }
.lr-diff-cell:nth-last-child(-n+3) { border-bottom: 0; }
.lr-diff-cell b { font-family: var(--lr-display); font-weight: 800; font-size: 22px; line-height: 0.95; letter-spacing: 0.01em; text-transform: uppercase; color: var(--lr-paper); }
.lr-diff-cell span { font-size: 14.5px; line-height: 1.5; color: var(--lr-paper-2); }
.lr-diff-cell:last-child b { color: var(--lr-accent); }
@media (max-width: 900px) {
    .lr-diff { grid-template-columns: 1fr 1fr; }
    .lr-diff-cell:nth-child(3n+1) { border-right: 1px solid var(--lr-line); }
    .lr-diff-cell:nth-child(2n+1) { border-right: 0; }
    .lr-diff-cell:nth-last-child(-n+3) { border-bottom: 1px solid var(--lr-line); }
    .lr-diff-cell:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 560px) {
    .lr-diff { grid-template-columns: 1fr; }
    .lr-diff-cell { border-right: 0 !important; border-bottom: 1px solid var(--lr-line) !important; }
    .lr-diff-cell:last-child { border-bottom: 0 !important; }
}

/* two objects on the floor */
.lr-objects { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.5vw, 28px); margin-top: 40px; }
.lr-object {
    position: relative;
    border: 1px solid var(--lr-line-strong);
    background: var(--lr-ink);
    padding: 20px 22px 18px;
    display: grid;
    gap: 14px;
    /* no overflow:hidden here -- the tape strip in .lr-object::after
       sits partly above the box on purpose (top: -8px), same as
       .lr-card's tape. Clipping it cut the tape off at the corner. */
}
.lr-object-head { display: flex; justify-content: space-between; gap: 12px; font-family: var(--lr-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lr-paper-2); }
.lr-object-tag { color: var(--lr-warn); }
.lr-object p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--lr-paper-2); }
.lr-object-foot { font-family: var(--lr-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lr-paper-3); border-top: 1px dashed var(--lr-line); padding-top: 10px; }
.lr-clock { display: flex; gap: 10px; font-variant-numeric: tabular-nums; }
.lr-clock span { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 4px; padding: 8px 12px; border: 1px solid var(--lr-line-strong); background: #07070a; box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.8); }
.lr-clock b { font-family: var(--lr-display); font-weight: 800; font-size: clamp(28px, 3vw, 44px); line-height: 1; color: var(--lr-red-hot); text-shadow: 0 0 14px rgba(255, 59, 47, 0.35); }
.lr-clock i { font-family: var(--lr-mono); font-style: normal; font-size: 11px; letter-spacing: 0.14em; color: var(--lr-paper-3); }
.lr-object-clock[data-state="armed"] .lr-clock b { color: var(--lr-paper-3); text-shadow: none; }
.lr-object-clock[data-state="running"] .lr-clock b { animation: lr-tick 1s steps(2) infinite; }
@keyframes lr-tick { 50% { text-shadow: 0 0 22px rgba(255, 59, 47, 0.7); } }
.lr-prize-body { display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: start; }
.lr-prize-mark { width: 84px; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.7)); }
.lr-prize-body b { display: block; font-family: var(--lr-display); font-weight: 800; font-size: 20px; line-height: 1; text-transform: uppercase; margin-bottom: 8px; }
@media (max-width: 900px) { .lr-objects { grid-template-columns: 1fr; } }

/* the door that isn't on the map */
.lr-door {
    display: grid;
    gap: 8px;
    margin-top: 40px;
    padding: 22px 24px;
    border: 1px dashed var(--lr-line-strong);
    text-decoration: none;
    color: var(--lr-paper);
    background: repeating-linear-gradient(-45deg, transparent 0 18px, rgba(242, 180, 24, 0.04) 18px 20px), var(--lr-ink);
    transition: border-color 0.2s, transform 0.2s;
}
.lr-door:hover { border-color: var(--lr-warn); transform: translateY(-2px); }
.lr-door[hidden] { display: none; } /* the door only exists while a campaign is live (lair.js sets href + un-hides) */
.lr-door-tag { font-family: var(--lr-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lr-warn); }
.lr-door b { font-family: var(--lr-display); font-weight: 800; font-size: clamp(26px, 3vw, 40px); line-height: 0.95; text-transform: uppercase; }
.lr-door-sub { font-size: 14.5px; color: var(--lr-paper-2); max-width: 70ch; }

/* CRT flicker on the creators screen */
.lr-creator-crt { animation: lr-crt 6s steps(1) infinite; }
@keyframes lr-crt { 0%, 92%, 100% { opacity: 1; } 93% { opacity: 0.86; } 94% { opacity: 1; } 97% { opacity: 0.92; } 98% { opacity: 1; } }

/* tape on the sharpie notes */
.lr-note::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -9px;
    width: 64px;
    height: 18px;
    transform: translateX(-50%) rotate(-2deg);
    background: rgba(255, 255, 255, 0.28);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* one thing slightly off, on purpose */
.lr-roles > div:nth-child(5) .v { transform: rotate(-0.6deg); display: inline-block; }
.lr-marks table:last-child { transform: rotate(0.35deg); }

@media (prefers-reduced-motion: reduce) {
    .lr-stamp { opacity: 0.92; transform: rotate(-6deg) scale(1); transition: none; }
    .lr-creator-crt { animation: none; }
    .lr-object-clock[data-state="running"] .lr-clock b { animation: none; }
}

/* the floating deck steps out of the way of the creators terminal keypad */
html[data-lair].lr-dodge .radio-player { left: auto; right: 96px; transition: right 0.25s, left 0.25s; }
html[data-lair].lr-dodge .radio-panel { left: auto; right: 0; }

/* ================================================================
   PASS 3 -- every station is a station, and the place gets dirty
   ================================================================ */

/* ---------------------------------------------------------------
   KEPT SECTIONS AS STATIONS (press, research, keep up, go away)
   --------------------------------------------------------------- */
html[data-lair] .lr-kept .section-number,
html[data-lair] .lr-kept .exit-content > span:first-child { display: none; }
html[data-lair] .lr-kept { font-family: var(--lr-body); }
html[data-lair] .lr-kept .lr-station { margin-bottom: 40px; }
html[data-lair] .lr-kept .section-heading .eyebrow { color: var(--lr-paper-3); }

/* research */
html[data-lair] .obsession-wall-section { background: var(--lr-ink); }

/* keep up */
html[data-lair] .signals-section { background: var(--lr-ink-2); border-top: 1px solid var(--lr-line); border-bottom: 1px solid var(--lr-line); }

/* go away: dark, like everything else in the building */
html[data-lair] .exit-section { background: var(--lr-ink); color: var(--lr-paper); min-height: 0; padding: var(--lr-gap) 0; display: block; }
html[data-lair] .exit-background { color: rgba(236, 232, 223, 0.045); }
html[data-lair] .exit-content h2 { color: var(--lr-paper); }
html[data-lair] .exit-content h2 em { color: var(--lr-red-hot); }
html[data-lair] .exit-content p { color: var(--lr-paper-2); }
html[data-lair] .exit-content a { border-color: var(--lr-paper); color: var(--lr-paper); background: transparent; }
html[data-lair] .exit-content a:hover { background: var(--lr-paper); color: var(--lr-ink); }
html[data-lair] .exit-afterthought { color: var(--lr-paper-3); font-family: var(--lr-hand); font-size: 22px; }

/* ---------------------------------------------------------------
   THE WALL -- house rules
   --------------------------------------------------------------- */
.lr-wall {
    position: relative;
    padding-block: clamp(48px, 6vw, 96px);
    background:
        radial-gradient(ellipse at 20% 0%, rgba(198, 32, 32, 0.12), transparent 55%),
        repeating-linear-gradient(90deg, transparent 0 39px, rgba(255, 255, 255, 0.02) 39px 40px),
        var(--lr-ink-2);
    border-bottom: 1px solid var(--lr-line);
    overflow: hidden;
    font-family: var(--lr-body);
}
.lr-wall::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    opacity: 0.35;
    mix-blend-mode: overlay;
    pointer-events: none;
}
.lr-wall-grid { position: relative; display: grid; grid-template-columns: 1.4fr 0.6fr; gap: clamp(24px, 5vw, 80px); align-items: center; }
.lr-wall-kicker { display: block; font-family: var(--lr-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lr-paper-3); margin-bottom: 22px; }
.lr-wall-rule {
    margin: 0 0 14px;
    font-family: var(--lr-display);
    font-weight: 800;
    font-size: clamp(26px, 3.4vw, 46px);
    line-height: 0.95;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--lr-paper);
    filter: url(#chalkTexture);
    transform: rotate(-0.4deg);
}
.lr-wall-rule:nth-child(3) { transform: rotate(0.3deg); }
.lr-wall-rule b { color: var(--lr-red-hot); font-weight: 800; margin-right: 0.3em; }
.lr-wall-rule span { display: block; font-family: var(--lr-body); font-weight: 400; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--lr-paper-2); margin-top: 6px; filter: none; max-width: 62ch; line-height: 1.45; }
.lr-wall-motto {
    margin: 26px 0 0;
    display: inline-block;
    font-family: var(--lr-display);
    font-weight: 800;
    font-size: clamp(22px, 2.6vw, 34px);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lr-ink);
    background: var(--lr-paper);
    padding: 0.2em 0.5em;
    transform: rotate(-1.5deg);
    box-shadow: 4px 4px 0 var(--lr-red);
}
.lr-wall-mark { display: grid; justify-items: center; gap: 12px; }
.lr-wall-mark img { width: min(260px, 70%); filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.8)); transform: rotate(4deg); }
.lr-wall-mark-text { font-family: var(--lr-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lr-paper-3); text-align: center; }
@media (max-width: 900px) { .lr-wall-grid { grid-template-columns: 1fr; } .lr-wall-mark { order: -1; } }

/* ---------------------------------------------------------------
   DIRT -- the texture pass
   --------------------------------------------------------------- */

/* grain on every lair section */
.lr-section::before,
.lr-kept::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.12 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    opacity: 0.5;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 0;
}
.lr-section > .lr-shell, .lr-kept > .section-shell { position: relative; z-index: 1; }

/* misregistered display type: the print shop's tell */
.lr-h-l, .lr-h-xl { text-shadow: 0.025em 0 rgba(255, 59, 47, 0.45), -0.02em 0 rgba(0, 194, 255, 0.28); }
.lr-red { text-shadow: 0.025em 0 rgba(236, 232, 223, 0.25), -0.02em 0 rgba(0, 194, 255, 0.28); }

/* torn top edge on the big strips */
.lr-diff, .lr-vault, .lr-ledger-list, .lr-creator-steps { position: relative; }
.lr-diff::before, .lr-vault::before, .lr-ledger-list::before, .lr-creator-steps::before {
    content: "";
    position: absolute;
    left: -1px; right: -1px; top: -1px;
    height: 7px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='7' preserveAspectRatio='none'><polygon points='0,0 120,0 120,4 110,1 100,6 88,0 76,5 64,1 52,6 40,0 28,5 16,1 6,6 0,2' fill='%230c0b0d'/></svg>") repeat-x;
    background-size: 120px 7px;
    pointer-events: none;
    z-index: 2;
}

/* stickers */
.lr-sticker {
    position: absolute;
    z-index: 3;
    font-family: var(--lr-display);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 6px 10px;
    background: var(--lr-paper);
    color: var(--lr-ink);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
    transform: rotate(var(--r, -7deg));
    pointer-events: none;
    white-space: nowrap;
}
.lr-sticker.warn { background: var(--lr-warn); }
.lr-sticker.red { background: var(--lr-red); color: #fff; }
.lr-sticker::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0, 0, 0, 0.05) 6px 8px); }

/* coffee ring on the ledger, ink thumb on the marks, tape on the objects */
.lr-ledger-list::after {
    content: "";
    position: absolute;
    right: -30px;
    bottom: -34px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 9px solid rgba(120, 78, 30, 0.22);
    box-shadow: inset 0 0 0 3px rgba(120, 78, 30, 0.08), 0 0 0 2px rgba(120, 78, 30, 0.06);
    filter: blur(0.6px);
    pointer-events: none;
    transform: rotate(-12deg) scaleX(1.06);
}
.lr-marks table:first-child { position: relative; }
.lr-marks table:first-child::after {
    content: "";
    position: absolute;
    left: 58%;
    top: -14px;
    width: 46px;
    height: 58px;
    border-radius: 50% 50% 45% 55% / 60% 60% 40% 40%;
    background: radial-gradient(ellipse at 45% 40%, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.2) 60%, transparent 75%);
    opacity: 0.55;
    transform: rotate(-24deg);
    pointer-events: none;
}
.lr-object::after,
.lr-card::after {
    content: "";
    position: absolute;
    right: 14px;
    top: -8px;
    width: 58px;
    height: 16px;
    background: rgba(255, 255, 255, 0.22);
    transform: rotate(4deg);
    pointer-events: none;
}
.lr-card::after { right: auto; left: 12px; transform: rotate(-6deg); }

/* things sit slightly wrong, on purpose */
.lr-station { transform: rotate(-0.15deg); }
.lr-born > div:nth-child(2) { transform: translateY(3px); }
.lr-born > div:nth-child(4) { transform: translateY(-2px); }
.lr-object-prize { transform: rotate(0.4deg); }
.lr-object-clock { transform: rotate(-0.3deg); }
.lr-mast-figure { transform: rotate(-0.8deg); }

/* scuffed edges on the deck panel */
html[data-lair] .radio-panel { border-style: solid; border-color: var(--lr-line-strong); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.03); }

/* ---------------------------------------------------------------
   DECK: native player (Brave, or by choice)
   --------------------------------------------------------------- */
.lr-deck-native { margin-top: 10px; display: grid; gap: 6px; }
.lr-deck-native-hint { font-family: var(--lr-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lr-warn); line-height: 1.5; }
.lr-deck-native .radio-mixcloud-mount { position: static !important; opacity: 1 !important; pointer-events: auto !important; width: 100% !important; height: 60px !important; left: auto !important; top: auto !important; overflow: hidden; border: 1px solid var(--lr-line-strong); background: #000; }
.lr-deck-native .radio-mixcloud-mount iframe { width: 100%; height: 60px; display: block; }
.lr-deck-native .radio-mixcloud-mount[hidden] { display: block !important; }
.lr-deck[data-native="1"] .lr-deck-start .lr-deck-btn-text::after { content: " // LOAD"; opacity: 0.6; }
#lrDeckNativeToggle { background: transparent; border: 0; border-bottom: 1px solid var(--lr-line-strong); padding: 0; cursor: pointer; }
.lr-deck[data-native="1"] #lrDeckNativeToggle { display: none; }

/* ---------------------------------------------------------------
   TERMINAL: measured hitboxes (PNG 1122x1402, connected-component
   measurement 2026-09-08) + numbered menus + scrolling screen
   --------------------------------------------------------------- */
.lr-creator-connect { left: 20.86%; top: 65.55%; width: 10.16%; height: 5.99%; }
.lr-creator-upload  { left: 34.76%; top: 63.34%; width: 24.78%; height: 8.56%; }
.lr-creator-scan    { left: 64.26%; top: 63.84%; width: 7.49%; height: 5.42%; }
.lr-creator-send    { left: 40.46%; top: 76.96%; width: 14.08%; height: 11.34%; border-radius: 50%; }
.lr-creator-led { right: auto; left: 78%; top: 15%; width: 15%; }
.lr-creator-keypad { left: 22%; top: 76.2%; width: 9.9%; height: 10.6%; gap: 0; }
.lr-creator-keypad button { border-radius: 18%; margin: 8%; }

.lr-creator-crt { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(168, 240, 193, 0.4) transparent; }
.lr-creator-crt .opt em { font-style: normal; color: var(--lr-warn); }
.lr-creator-screen:focus-within { box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.9), inset 0 0 0 2px rgba(168, 240, 193, 0.35); }
.lr-mast-copy { position: relative; }


/* ================================================================
   PASS 4 -- fixes from the station-by-station review
   ================================================================ */

/* fuel gauge: sticker sits outside the clipping box */
.lr-gauge-wrap { position: relative; }
.lr-gauge-wrap .lr-sticker { z-index: 4; }

/* the VU meter, LED and byte gif keyed on the machine's new home */
#lrFmMachine[data-state="playing"] .radio-vu-pivot { animation: radioVuBounce 2.6s ease-in-out infinite; }
#lrFmMachine[data-state="playing"] .radio-byte-gif { opacity: 1; }
@media (prefers-reduced-motion: reduce) { #lrFmMachine[data-state="playing"] .radio-vu-pivot { animation: none; } }

/* extinction clocks: one row per live native issue */
.lr-clocks { display: grid; gap: 10px; }
.lr-clock-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.lr-clock-title { font-family: var(--lr-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lr-paper-2); }
.lr-clock-row.is-armed .lr-clock b { color: var(--lr-paper-3); text-shadow: none; }
.lr-clock-row.is-running .lr-clock b { animation: lr-tick 1s steps(2) infinite; }
.lr-clock span { padding: 6px 9px; }
.lr-clock b { font-size: clamp(22px, 2.2vw, 34px); }
@media (max-width: 600px) { .lr-clock-row { grid-template-columns: 1fr; } }

/* the reader block in Station 06 */
.lr-reader {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: clamp(24px, 4vw, 56px);
    align-items: start;
    margin-top: 44px;
    padding: 30px 0;
    border-top: 1px solid var(--lr-line);
    border-bottom: 1px solid var(--lr-line);
}
.lr-reader-copy .lr-h { margin: 6px 0 16px; }
.lr-reader-side { display: grid; gap: 14px; justify-items: start; }
.lr-reader-open { border-color: var(--lr-red-hot); background: var(--lr-red); color: #fff; }
.lr-reader-open:hover { background: var(--lr-red-hot); color: #fff; }
.lr-reader-state { font-family: var(--lr-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lr-paper-3); }
@media (max-width: 900px) { .lr-reader { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   HEADER NAV -- never break a station name mid-word.
   gate02.css puts `overflow-wrap: anywhere` on every <a>/<button>
   (so long translations can't escape controls), which lets the flex
   items shrink below their own words and split "HARR/OW", "PRE/SS"
   at laptop widths. Station names stay on one line; the gap and the
   type give way first. Measured 2026-09-10 at 1100-1920px.
   --------------------------------------------------------------- */
html[data-lair] .header-nav {
    gap: clamp(10px, 1.25vw, 38px);
    min-width: 0;
}
html[data-lair] .header-nav a,
html[data-lair] .header-nav button {
    white-space: nowrap;
    overflow-wrap: normal;
    flex-shrink: 0;
}
/* Re-tuned 2026-09-13. Harrow: "my navigation menu just falls off at
   creators." Two stations (CLASSIFIED, SIGNALS) were missing from the
   menu entirely, so it stopped short of the end of the site; putting
   them back made nine, which no longer fit the row this was measured
   for. ACCESS // LANGUAGE moved out of the nav into its own header
   slot (it's a setting, not a station), and the type tightens further
   so nine names still sit on one line. */
@media (min-width: 1701px) {
    html[data-lair] .header-nav { gap: 16px; }
    html[data-lair] .header-nav a { font-size: 13px; letter-spacing: 0.06em; }
}
@media (min-width: 1401px) and (max-width: 1700px) {
    html[data-lair] .header-nav { gap: 8px; }
    html[data-lair] .header-nav a,
    html[data-lair] .header-nav button { font-size: 10px; letter-spacing: 0.035em; }
    html[data-lair] .site-header { gap: 14px; }
}

/* 761-1400px: eight stations do not fit beside the brand, the chain
   switcher and the wallet button without breaking words -- and
   761-1100 previously had no navigation at all (desktop nav hidden,
   MENU button only below 760). Use the MENU button + dropdown that
   already works on phones. */
@media (min-width: 761px) and (max-width: 1400px) {
    /* five children now: brand | nav | access | network | wallet */
    html[data-lair] .site-header { grid-template-columns: auto 1fr auto auto auto; gap: 16px; }
    html[data-lair] .header-nav { display: none; }
    html[data-lair] .header-network { justify-self: end; }
    html[data-lair] .mobile-menu-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 38px;
        padding: 0 14px;
        border: 1px solid rgba(255,255,255,0.15);
        background: transparent;
        color: #fff;
        font-family: var(--font-ui);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        cursor: pointer;
    }
    html[data-lair] .mobile-nav {
        display: block;
        left: auto;
        right: 16px;
        width: min(360px, calc(100vw - 32px));
    }
}


/* ---------------------------------------------------------------
   HERO // CINEMATIC PASS (2026-09-11, hellbox-hero.png)
   Desktop/landscape only. The mobile (<=760) and tall (aspect <= 4/5)
   passes in style.css are untouched -- the scene is already
   aspect-exact there.

   1. ART-EXACT SCENE BOX. style.css crops the art with object-fit:
      cover inside a box that follows the viewport, so hotspot
      percentages drifted with the aspect ratio. Here the scene box
      itself takes the art's 1672:941 shape and covers the hero, so a
      hotspot at 70.5% / 30% is at 70.5% / 30% of the painting on
      every screen.
   2. THE COPY DECK MOVES OFF THE OBJECTS. Headline top-left over the
      neon and the windows; transmission bottom-right, compact. The
      desk, the pages, Harrow, the bike and the stage stay clear.
   3. LIGHT, NOT A BLACK CURTAIN. Localized gradients under the two
      decks plus a soft vignette replace the old left-half blackout.
   4. GRAIN + DRIFT + REVEAL, all off for reduced motion.
   --------------------------------------------------------------- */
@media (min-width: 761px) and (min-aspect-ratio: 4 / 5) {

    html[data-lair] .hero {
        --hero-h: max(820px, 100svh);
        --hero-ar: calc(1672 / 941);
        min-height: var(--hero-h);
        height: var(--hero-h);
    }

    /* 1. art-exact scene box */
    html[data-lair] .hero-scene {
        inset: auto;
        left: 50%;
        top: 50%;
        width: max(100%, calc(var(--hero-h) * var(--hero-ar)));
        aspect-ratio: 1672 / 941;
        translate: -50% -50%;
        transform-origin: 50% 50%;
        will-change: transform;
    }
    html[data-lair] .hero-art img {
        object-fit: fill;
        object-position: center;
    }

    /* 3. light */
    html[data-lair] .hero-blackout {
        background:
            /* headline deck, top-left */
            radial-gradient(ellipse 62% 70% at 0% 0%, rgba(2,2,2,0.86), rgba(2,2,2,0.55) 40%, transparent 72%),
            /* transmission deck, bottom-right */
            radial-gradient(ellipse 40% 46% at 100% 100%, rgba(2,2,2,0.78), rgba(2,2,2,0.4) 45%, transparent 75%),
            /* header + status-strip seams */
            linear-gradient(180deg, rgba(2,2,2,0.66) 0%, transparent 16%, transparent 84%, rgba(2,2,2,0.9) 100%),
            /* vignette */
            radial-gradient(ellipse 80% 80% at 50% 50%, transparent 55%, rgba(0,0,0,0.42) 100%);
    }

    /* 4a. grain -- one SVG turbulence tile, jittered in 8 steps */
    html[data-lair] .hero::after {
        content: "";
        position: absolute;
        inset: -40px;
        z-index: 2;
        pointer-events: none;
        opacity: 0.085;
        mix-blend-mode: overlay;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
        background-size: 220px 220px;
        animation: lrGrain 1.4s steps(8) infinite;
    }

    /* 4b. drift -- the whole scene (hotspots included) breathes over 48s */
    html[data-lair] .hero-scene {
        animation: lrDrift 48s ease-in-out infinite alternate;
    }

    /* 2. the copy deck */
    html[data-lair] .hero-inner {
        justify-content: flex-start;
        padding-top: calc(var(--header-h) + 34px);
        padding-bottom: 0;
    }
    /* The header and the painting both already say HELLBOX COMIX; a
       third wordmark over the art is noise. The logo button (and its
       dialogue) still exists on tall/mobile layouts. */
    html[data-lair] .hero-brand { display: none; }
    html[data-lair] .hero-content {
        display: block;
        max-width: min(44vw, 620px);
    }
    html[data-lair] .hero-copy h1 {
        margin: 12px 0 18px;
        font-size: clamp(76px, 7.4vw, 148px);
        letter-spacing: -0.06em;
        text-shadow: 0 2px 30px rgba(0,0,0,0.6);
    }
    html[data-lair] .hero-description {
        max-width: 26ch;
        text-shadow: 0 1px 18px rgba(0,0,0,0.7);
    }
    html[data-lair] .hero-actions { margin-top: 26px; }
    html[data-lair] .hero-transmission {
        position: absolute;
        right: 0;
        bottom: 96px;
        width: min(360px, 27vw);
        margin: 0;
    }
    html[data-lair] .hero-harrow-signature { width: 130px; margin: 0 18px 14px auto; }
    html[data-lair] .hero-scroll-note {
        right: 0;
        left: auto;
        top: calc(var(--header-h) + 40px);
        bottom: auto;
        writing-mode: horizontal-tb;
        margin-right: calc((100% - var(--shell)) / 2);
    }

    /* 4c. staged reveal (first paint only) */
    html[data-lair] .hero-copy > *,
    html[data-lair] .hero-transmission,
    html[data-lair] .hero-meta,
    html[data-lair] .hero-scroll-note {
        animation: lrRise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }
    html[data-lair] .hero-scroll-note { animation-delay: 1.4s; }
    html[data-lair] .hero-copy > :nth-child(1) { animation-delay: 0.3s; }
    html[data-lair] .hero-copy > :nth-child(2) { animation-delay: 0.42s; }
    html[data-lair] .hero-copy > :nth-child(3) { animation-delay: 0.56s; }
    html[data-lair] .hero-copy > :nth-child(4) { animation-delay: 0.7s; }
    html[data-lair] .hero-transmission { animation-delay: 1.0s; }
    html[data-lair] .hero-meta { animation-delay: 1.2s; }
    html[data-lair] .hero-scene .hero-art {
        animation: lrArtIn 1.6s ease-out both;
    }
}

@keyframes lrGrain {
    0%   { background-position: 0 0; }
    12%  { background-position: -60px 40px; }
    25%  { background-position: 30px -70px; }
    37%  { background-position: -90px -20px; }
    50%  { background-position: 70px 60px; }
    62%  { background-position: -30px 90px; }
    75%  { background-position: 100px -40px; }
    87%  { background-position: -80px 10px; }
    100% { background-position: 0 0; }
}
@keyframes lrDrift {
    from { transform: scale(1); }
    to   { transform: scale(1.045); }
}
@keyframes lrRise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes lrArtIn {
    from { opacity: 0; filter: brightness(0.6) saturate(0.8); }
    to   { opacity: 1; filter: brightness(1) saturate(1); }
}

/* reduced motion: still, and the site's own toggle honored too */
@media (prefers-reduced-motion: reduce) {
    html[data-lair] .hero::after,
    html[data-lair] .hero-scene,
    html[data-lair] .hero-scene .hero-art,
    html[data-lair] .hero-brand,
    html[data-lair] .hero-copy > *,
    html[data-lair] .hero-transmission,
    html[data-lair] .hero-meta { animation: none !important; }
}
html[data-lair] body.a11y-reduce-motion .hero::after,
html[data-lair] body.a11y-reduce-motion .hero-scene,
html[data-lair] body.a11y-reduce-motion .hero-scene .hero-art,
html[data-lair] body.a11y-reduce-motion .hero-brand,
html[data-lair] body.a11y-reduce-motion .hero-copy > *,
html[data-lair] body.a11y-reduce-motion .hero-transmission,
html[data-lair] body.a11y-reduce-motion .hero-meta { animation: none !important; }

/* Brave disclaimer under the radio copy. Plain by default; when lair.js
   detects Brave (navigator.brave.isBrave) it lights the note up. */
.lr-fm-brave { margin-top: 14px; max-width: 52ch; border-left: 2px solid var(--lr-line); padding-left: 12px; }
.lr-fm-brave b { color: var(--lr-paper); }
.lr-fm-brave.is-brave { border-left-color: var(--lr-red-hot); color: var(--lr-paper); }
.lr-fm-brave.is-brave b { color: var(--lr-red-hot); }

/* ---------------------------------------------------------------
   THE SHELF // a room, not a grid (2026-09-12)
   Unsealed copies are a pile you dig through. Sealed copies stand in
   the file box. Archived copies sit on the display shelf in their
   on-chain frames. Outside publishers get their own case. Every
   picture is the copy's own tokenURI image.
   --------------------------------------------------------------- */

.lr-vault-tools { display: flex; gap: 10px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.lr-vault-search input,
.lr-vault-sort select {
    font-family: var(--lr-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    background: var(--lr-ink-2); color: var(--lr-paper); border: 1px solid var(--lr-line-strong);
    padding: 8px 10px; min-width: 200px; outline: none;
}
.lr-vault-sort select { min-width: 0; cursor: pointer; }
.lr-vault-search input:focus, .lr-vault-sort select:focus { border-color: var(--lr-accent); }
.lr-vault-search input::placeholder { color: var(--lr-paper-3); }

.lr-room { padding: 18px 18px 10px; display: grid; gap: 26px; }
.lr-case { border: 1px solid var(--lr-line-strong); background: var(--lr-ink-2); position: relative; }
.lr-case-head {
    display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 12px 16px;
    border-bottom: 1px solid var(--lr-line); font-family: var(--lr-display); font-weight: 700;
    font-size: 22px; letter-spacing: 0.03em; text-transform: uppercase;
}
.lr-case-head small { font-family: var(--lr-mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--lr-paper-3); font-weight: 400; }
.lr-case-head .lr-tag { margin-left: auto; }
/* With the chain banner present the chain tag takes the auto margin and
   the case's own tag sits beside it, instead of the two splitting apart. */
.lr-case-head .lr-tag + .lr-tag { margin-left: 8px; }
.lr-case.outside { border-style: dashed; }
.lr-case-body { display: grid; gap: 18px; padding: 16px; }
@media (min-width: 1100px) { .lr-case-body { grid-template-columns: 1.15fr 1fr 1fr; } .lr-case-body.two { grid-template-columns: 1fr 1fr; } .lr-case-body.one { grid-template-columns: 1fr; } }

.lr-fx { position: relative; min-height: 250px; display: grid; grid-template-rows: auto 1fr auto; gap: 10px; }
.lr-fx-label { font-family: var(--lr-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lr-paper-2); display: flex; gap: 10px; align-items: center; }
.lr-fx-label b { color: var(--lr-paper); font-weight: 600; }
.lr-fx-label .n { margin-left: auto; color: var(--lr-paper-3); }
.lr-fx-empty { font-family: var(--lr-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--lr-paper-3); align-self: center; text-align: center; padding: 30px 12px; border: 1px dashed var(--lr-line); }
.lr-fx-hint { font-family: var(--lr-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--lr-paper-3); text-transform: uppercase; }

.lr-copy { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; color: inherit; font: inherit; position: relative; text-align: left; }
.lr-copy img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lr-copy:focus-visible { outline: 2px solid var(--lr-accent); outline-offset: 3px; }
.lr-copy.selected { outline: 2px solid var(--lr-accent); outline-offset: 3px; }
.lr-copy-tag {
    position: absolute; left: 6px; bottom: 6px; font-family: var(--lr-mono); font-size: 9.5px; letter-spacing: 0.12em;
    background: rgba(0,0,0,0.78); color: var(--lr-paper); padding: 3px 6px; border: 1px solid var(--lr-line-strong); pointer-events: none;
}

/* DISPLAY SHELF -- archived, framed, standing on a plank */
.lr-fx-shelf .lr-fx-stage {
    display: flex; gap: 14px; align-items: flex-end; overflow-x: auto; padding: 22px 12px 0;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.03), transparent 60%),
        radial-gradient(60% 40% at 50% 100%, rgba(255,255,255,0.06), transparent);
    scroll-snap-type: x proximity;
}
.lr-fx-shelf .lr-copy { flex: 0 0 auto; width: 118px; aspect-ratio: 2 / 3.1; scroll-snap-align: start; transform-origin: bottom center; transition: transform 200ms ease; filter: drop-shadow(0 18px 14px rgba(0,0,0,0.65)); }
.lr-fx-shelf .lr-copy:hover, .lr-fx-shelf .lr-copy.selected { transform: translateY(-10px) scale(1.04); z-index: 2; }
.lr-fx-shelf .lr-plank { height: 14px; background: linear-gradient(180deg, #3a2f28, #1a1411 70%, #0b0908); border-top: 1px solid rgba(255,255,255,0.18); box-shadow: 0 10px 18px rgba(0,0,0,0.6); }
.lr-fx-shelf .lr-plank::after { content: ""; display: block; height: 6px; background: linear-gradient(180deg, rgba(0,0,0,0.6), transparent); }

/* FILE BOX -- sealed, filed edge-on; hover pulls one up */
.lr-fx-box .lr-fx-stage {
    position: relative; display: flex; align-items: flex-end; gap: 4px; padding: 56px 14px 0; overflow-x: auto; overflow-y: hidden;
    border: 1px solid var(--lr-line-strong); border-top: 0; background: linear-gradient(180deg, transparent 52px, #1c1719 52px, #120f10);
    min-height: 230px;
}
.lr-fx-box .lr-fx-stage::before { content: ""; position: absolute; left: 0; right: 0; top: 52px; height: 18px; background: linear-gradient(180deg, #2a2224, #171315); border-top: 1px solid rgba(255,255,255,0.14); pointer-events: none; z-index: 3; }
.lr-fx-box .lr-copy { flex: 0 0 auto; width: 34px; height: 150px; overflow: hidden; border: 1px solid rgba(255,255,255,0.14); background: #222; transition: width 220ms ease, transform 220ms ease; z-index: 1; }
.lr-fx-box .lr-copy img { object-position: left center; opacity: 0.8; }
.lr-fx-box .lr-copy .spine { position: absolute; inset: 0; display: grid; place-items: center; writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--lr-mono); font-size: 9.5px; letter-spacing: 0.14em; color: var(--lr-paper); background: linear-gradient(90deg, rgba(0,0,0,0.85), rgba(0,0,0,0.55)); pointer-events: none; }
.lr-fx-box .lr-copy:hover, .lr-fx-box .lr-copy:focus-visible, .lr-fx-box .lr-copy.selected { width: 104px; transform: translateY(-44px); z-index: 4; filter: drop-shadow(0 12px 12px rgba(0,0,0,0.7)); }
.lr-fx-box .lr-copy:hover img, .lr-fx-box .lr-copy:focus-visible img, .lr-fx-box .lr-copy.selected img { opacity: 1; object-position: center; }
.lr-fx-box .lr-copy:hover .spine, .lr-fx-box .lr-copy:focus-visible .spine, .lr-fx-box .lr-copy.selected .spine { opacity: 0; }

/* THE PILE -- unsealed, read copies, dumped; sort through fans them out */
.lr-fx-pile .lr-fx-stage { position: relative; min-height: 230px; display: grid; place-items: center; }
.lr-fx-pile .lr-pile { position: relative; width: 150px; height: 215px; }
.lr-fx-pile .lr-pile .lr-copy { position: absolute; inset: 0; width: 140px; aspect-ratio: 2 / 3; height: auto; border: 1px solid rgba(255,255,255,0.12); background: #1a1618; transform: rotate(var(--rot, 0deg)) translate(var(--dx, 0px), var(--dy, 0px)); transition: transform 260ms ease; box-shadow: 0 8px 14px rgba(0,0,0,0.6); }
.lr-fx-pile .lr-pile .lr-copy:hover, .lr-fx-pile .lr-pile .lr-copy.selected { z-index: 50 !important; transform: rotate(0deg) translate(0, -12px) scale(1.05); }
.lr-fx-pile.fanned .lr-fx-stage { place-items: start; }
.lr-fx-pile.fanned .lr-pile { width: 100%; height: auto; display: flex; flex-wrap: wrap; gap: 12px; padding: 8px 4px; }
.lr-fx-pile.fanned .lr-pile .lr-copy { position: static; width: 104px; transform: rotate(var(--rot2, 0deg)); }
.lr-fx-pile .lr-fx-sort { justify-self: start; }

/* NIGHTSTAND -- ebooks (no seal), a short reading stack */
.lr-fx-stack { min-height: 0; }
.lr-fx-stack .lr-fx-stage { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; padding: 10px 6px 0; }
.lr-fx-stack .lr-copy { width: 96px; aspect-ratio: 2 / 3; border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 10px 14px rgba(0,0,0,0.6); transition: transform 200ms ease; }
.lr-fx-stack .lr-copy:hover, .lr-fx-stack .lr-copy.selected { transform: translateY(-8px); }

/* the copy panel: what you picked up */
.lr-copy-panel { grid-column: 1 / -1; position: relative; border-top: 1px solid var(--lr-line-strong); padding: 16px 0 2px; display: grid; gap: 16px; grid-template-columns: 150px 1fr; align-items: start; }
.lr-copy-panel .cover { width: 150px; aspect-ratio: 2 / 3; border: 1px solid var(--lr-line-strong); background: #111; overflow: hidden; }
.lr-copy-panel .cover img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lr-copy-panel .lr-card-meta { font-family: var(--lr-mono); font-size: 11px; letter-spacing: 0.08em; line-height: 1.7; color: var(--lr-paper-2); }
.lr-copy-panel .lr-card-meta b { color: var(--lr-paper); font-size: 15px; font-family: var(--lr-display); letter-spacing: 0.04em; }
.lr-copy-panel .lr-card-acts { margin-top: 10px; }
.lr-copy-panel .close { position: absolute; right: 0; top: 14px; }
.lr-copy-panel .lr-card-title { padding-right: 130px; } /* the chip stays clear of PUT IT BACK (they overlapped, 2026-09-12) */
@media (max-width: 640px) { .lr-copy-panel { grid-template-columns: 1fr; } .lr-copy-panel .cover { width: 120px; } .lr-vault-tools { margin-left: 0; width: 100%; } .lr-vault-search input { min-width: 0; width: 100%; } }

/* not yours, yet -- a listing, not a possession */
.lr-missing { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; padding: 12px 16px 18px; }
.lr-btn-ghost { background: transparent; color: var(--lr-paper-2); border-style: dashed; font-size: 11px; padding: 8px 12px; }
.lr-btn-ghost:hover, .lr-btn-ghost:focus-visible { color: var(--lr-paper); border-style: solid; }
.lr-vault-filters button { white-space: nowrap; }
@media (max-width: 640px) { .lr-vault-filters { width: 100%; } .lr-vault-filters button { flex: 1 1 auto; } }

/* ============================================================
   OPERATING CARDS -- one laminated card zip-tied to every machine
   (Harrow, 2026-09-12: "an operating guide for dummies next to each",
   on-brand, simple enough for a child or a senior). The tag is the
   only thing showing until it's pulled; the card is a cream laminate
   with a punched hole, a black header band and big red step numbers.
   ============================================================ */
.op-card { position: relative; margin-top: 22px; max-width: 420px; }
.op-card-tag {
    display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 9px 14px 9px 30px; border: 1px solid rgba(236, 232, 223, 0.35); border-radius: 3px;
    background: linear-gradient(180deg, #f3eee1, #e4ddca); color: #16130f; text-align: left; cursor: pointer;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5); transform: rotate(var(--r, -1.2deg)); position: relative;
    transition: transform 160ms ease, box-shadow 160ms ease;
}
.op-card-tag::before { /* the punched hole */
    content: ""; position: absolute; left: 11px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-radius: 50%;
    background: #0a0a0c; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 0 2px #cfc6ad;
}
.op-card-tag::after { /* the zip tie */
    content: ""; position: absolute; left: 13px; top: -14px; width: 5px; height: 18px; background: #1a1a1c; border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.op-card-tag:hover, .op-card-tag:focus-visible { transform: rotate(0deg) scale(1.02); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.6); outline: none; }
.op-card-tag[aria-expanded="true"] { transform: rotate(0deg); }
.op-card-tag-eyebrow { font-family: var(--lr-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.55; }
.op-card-tag-title { font-family: var(--lr-display); font-weight: 800; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; }
.op-card-tag-title i { font-style: normal; color: var(--lr-red); transition: transform 160ms ease; display: inline-block; }
.op-card-tag[aria-expanded="true"] .op-card-tag-title i { transform: rotate(90deg); }

.op-card-body {
    margin-top: 12px; background: linear-gradient(170deg, #f4efe2 0%, #ebe4d1 60%, #e2dac4 100%); color: #16130f;
    border-radius: 4px; box-shadow: 0 22px 50px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    padding: 0 0 16px; position: relative; overflow: hidden;
}
.op-card-body::after { /* laminate glare -- a corner only, never across the words (a child or a senior reads this) */
    content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; pointer-events: none; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 70%);
}
.op-card-head {
    display: flex; flex-direction: column; gap: 2px; padding: 12px 18px 11px; background: #0d0d10; color: var(--lr-paper);
    font-family: var(--lr-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
}
.op-card-head b { font-family: var(--lr-display); font-weight: 800; font-size: 20px; letter-spacing: 0.06em; color: #fff; }
.op-card-lede { margin: 14px 18px 6px; font-family: var(--lr-hand); font-size: 18px; line-height: 1.3; color: #2a2419; }
.op-card-steps { list-style: none; counter-reset: op; margin: 6px 0 0; padding: 0 18px; }
.op-card-steps li { counter-increment: op; position: relative; padding: 10px 0 10px 54px; border-top: 1px dashed rgba(22, 19, 15, 0.22); font-size: 15px; line-height: 1.5; }
.op-card-steps li::before {
    content: counter(op); position: absolute; left: 0; top: 8px; width: 38px; height: 38px; border-radius: 50%;
    background: var(--lr-red); color: #fff; font-family: var(--lr-display); font-weight: 800; font-size: 22px; line-height: 38px; text-align: center;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
}
.op-card-steps li b { display: block; font-family: var(--lr-display); font-weight: 800; font-size: 19px; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.1; margin-bottom: 3px; }
.op-card-aside { margin: 10px 18px 0; padding: 10px 12px; border-left: 4px solid #0d0d10; background: rgba(13, 13, 16, 0.06); font-size: 13.5px; line-height: 1.5; }
.op-card-foot { margin: 14px 18px 0; font-family: var(--lr-hand); font-size: 17px; line-height: 1.3; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.op-card-foot .sig { font-size: 21px; white-space: nowrap; }
.op-card[data-op="fuel"] .op-card-steps li:nth-child(2) { color: #0d0d10; letter-spacing: 0.04em; }
.lr-fuel .op-card { margin-top: 26px; }

/* VERIFIED CONTRACTS -- a data ledger, not a how-to note, so it keeps the
   op-card's click-to-open mechanic but trades the cream laminated-card
   look for the same dark ink the CONTRACT FACTS ledger above it uses. */
.op-card.contract-card { max-width: 640px; }
.op-card.contract-card .op-card-body {
    background: var(--lr-ink); color: var(--lr-paper);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.6), inset 0 0 0 1px var(--lr-line-strong);
}
.op-card.contract-card .op-card-body::after { display: none; }
.op-card.contract-card .op-card-lede {
    font-family: var(--lr-mono); font-size: 13px; line-height: 1.5; color: var(--lr-paper-2);
}
.op-card.contract-card .op-card-foot {
    font-family: var(--lr-mono); font-size: 12px; color: var(--lr-paper-3); border-top: 1px solid var(--lr-line); padding-top: 12px;
}
.op-card.contract-card .op-card-foot .sig { font-size: 15px; color: var(--lr-paper-2); }

.contract-list { margin: 8px 18px 0; border: 1px solid var(--lr-line-strong); }
.contract-row { padding: 12px 14px; border-bottom: 1px solid var(--lr-line); }
.contract-row-top {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px;
}
.contract-row:last-child { border-bottom: 0; }
.contract-name { font-size: 13.5px; color: var(--lr-paper); }

/* 2026-09-17: what it does and why the house needed it, on the row. A
   contract nobody can explain is a contract nobody should trust. */
.contract-what {
    margin: 6px 0 0; max-width: 62ch;
    font-size: 12.5px; line-height: 1.55; color: var(--lr-paper-3);
}
/* A state on a row that IS shown -- "retired" on the misprint run's press
   and checkout. Contracts that have not shipped are filtered out in
   lair.js and never reach this stylesheet. */
.contract-flag {
    display: inline-block; vertical-align: 1px; margin-left: 2px;
    font-family: var(--lr-mono); font-style: normal;
    font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 2px 5px; border: 1px dotted var(--lr-line-strong); border-radius: 2px;
    color: var(--lr-paper-3); white-space: nowrap;
}
.contract-addr-wrap { display: flex; align-items: center; gap: 10px; font-family: var(--lr-mono); }
.contract-link {
    font-size: 12.5px; letter-spacing: 0.02em; color: var(--lr-paper-2); text-decoration: none;
    border-bottom: 1px dotted var(--lr-line-strong);
}
.contract-link:hover, .contract-link:focus-visible { color: var(--lr-paper); border-bottom-color: var(--lr-accent); }
.contract-badge a {
    color: inherit;
    text-decoration: none;
}

.contract-badge a:hover,
.contract-badge a:focus-visible {
    text-decoration: underline;
}

.contract-badge {
    font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; padding: 2px 6px;
    border: 1px solid var(--lr-line-strong); border-radius: 2px; color: var(--lr-paper-3); white-space: nowrap;
    /* Every badge is the same object: same width, same weight, one
       word. 2026-09-13 -- two labels at two widths read as a list that
       isn't sure of itself. */
    min-width: 104px; text-align: center; opacity: 0.8;
}
.contract-badge:empty { display: none; }
.contract-badge.is-verified { color: var(--lr-accent); border-color: var(--lr-accent); opacity: 1; }
.contract-badge.is-pending { color: var(--lr-paper-3); }
/* PARTIAL -- the code matches, the compiler's fingerprint does not. Said
   plainly rather than folded in with VERIFIED, which is what the badge used
   to do. 2026-09-22. */
.contract-badge.is-partial { color: var(--lr-paper-2); border-color: var(--lr-paper-3); opacity: 1; }
@media (max-width: 640px) {
    .op-card.contract-card { max-width: none; }
    .contract-row-top { flex-direction: column; align-items: flex-start; gap: 6px; }
    .contract-what { max-width: none; }
}
@media (max-width: 640px) {
    .op-card { max-width: none; }
    .op-card-steps li { padding-left: 48px; font-size: 14.5px; }
    .op-card-steps li::before { width: 34px; height: 34px; line-height: 34px; font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .op-card-tag, .op-card-tag-title i { transition: none; } }

/* THE SPLIT (station 09): the thirds, published; only the name stays black */
.lr-thirds { margin-top: 44px; border-top: 1px solid var(--lr-line-strong); padding-top: 28px; display: grid; gap: 22px; }
.lr-thirds-head .lr-lede { max-width: 70ch; margin: 0; }
.lr-thirds-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lr-third { position: relative; border: 1px solid var(--lr-line-strong); padding: 18px 18px 20px 18px; background: rgba(255, 255, 255, 0.02); display: grid; gap: 6px; align-content: start; }
.lr-third b { font-family: var(--lr-display); font-weight: 800; font-size: 44px; line-height: 1; color: var(--lr-red); }
.lr-third span { font-family: var(--lr-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lr-paper); }
.lr-third small { font-size: 14px; line-height: 1.5; color: var(--lr-paper-2); }
.lr-thirds-foot { display: grid; gap: 10px; }
.lr-thirds-foot .lr-small { margin: 0; max-width: 78ch; }
@media (max-width: 760px) { .lr-thirds-row { grid-template-columns: 1fr; } .lr-third b { font-size: 36px; } }

/* ------------------------------------------------------------------
   ADD-ON SERVICES -- the creators terminal's side board, 2026-09-13.
   Harrow: "one of our add on services for outside creators will be we
   can auto-verify their contract for 2,000,000 $PLS... A lot of people
   don't want to touch things like that." A price list, in the house's
   own handwriting: what you get, what it costs, and nothing about how
   it's done -- how it's done is exactly what the buyer is paying not
   to think about.
   ------------------------------------------------------------------ */
.lr-services {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--lr-line-strong);
}

.lr-services-head {
    display: block;
    margin-bottom: 10px;
    color: var(--lr-accent);
    font-family: var(--lr-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;
}

.lr-service {
    padding: 10px 0 12px;
    border-bottom: 1px dashed var(--lr-line);
}

.lr-service:last-of-type {
    border-bottom: 0;
}

.lr-service-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.lr-service-top b {
    color: var(--lr-paper);
    font-family: var(--lr-mono);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.lr-service-price {
    flex: 0 0 auto;
    padding: 3px 7px;
    border: 1px solid rgba(var(--theme-rgb), 0.5);
    color: rgba(var(--theme-rgb), 0.95);
    font-family: var(--lr-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.lr-service p {
    margin: 7px 0 0;
    color: var(--lr-paper-2);
    font-size: 12.5px;
    line-height: 1.5;
}

@media (max-width: 520px) {
    .lr-service-top {
        flex-direction: column;
        gap: 6px;
    }
}

/* THE CHAIN TABS on the contract ledger (2026-09-15). Harrow: "contracts are
   stacked. they should be per chain. when on pulsechain here are the
   contracts. robinhood here are the contracts." Stacking every chain made a
   41-row wall, and nobody reads a wall. One chain at a time, and the tab
   carries that chain's own colour so which one you are looking at is
   readable without reading. */
.contract-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 18px 0;
}

.contract-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 7px 13px;

    background: transparent;
    border: 1px solid rgba(236, 232, 223, 0.18);
    border-radius: 999px;

    color: #8f8992;
    font-family: "Space Mono", ui-monospace, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;

    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.contract-tab:hover,
.contract-tab:focus-visible {
    color: #ece8df;
    border-color: rgba(var(--chain-rgb, var(--theme-rgb)), 0.5);
}

.contract-tab.is-on {
    color: rgba(var(--chain-rgb, var(--theme-rgb)), 1);
    border-color: rgba(var(--chain-rgb, var(--theme-rgb)), 0.7);
    background: rgba(var(--chain-rgb, var(--theme-rgb)), 0.08);
}

.contract-tab-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(236, 232, 223, 0.25);
    transition: background 0.18s ease, box-shadow 0.18s ease;
}

.contract-tab.is-on .contract-tab-dot {
    background: rgba(var(--chain-rgb, var(--theme-rgb)), 1);
    box-shadow: 0 0 7px rgba(var(--chain-rgb, var(--theme-rgb)), 0.7);
}

/* The open chain's colour runs down the edge of its list. */
.contract-list {
    border-left: 2px solid rgba(var(--chain-rgb, var(--theme-rgb)), 0.7);
}

/* 2026-09-15: a copy whose number the chain hasn't given us yet -- an
   honest dark plate with the title, never another edition's cover. */
.lr-copy.unresolved { background: #0b0b0b; border: 1px dashed rgba(255,255,255,0.18); }
.lr-copy.unresolved .lr-copy-tag { font-size: 0.62rem; letter-spacing: 0.08em; opacity: 0.8; }
.lr-cover-wait { display: flex; align-items: center; justify-content: center; height: 100%; padding: 10%; text-align: center; font-size: 0.7rem; letter-spacing: 0.08em; line-height: 1.5; color: rgba(255,255,255,0.55); }


/* ---- the basement, teased: the stairs and four lines ------------------- */
.basement-tease-grid { align-items: center; }
.basement-door { position: relative; margin: 0; max-width: 560px; }
.basement-door picture, .basement-door img { display: block; width: 100%; height: auto; }
.basement-door img { filter: saturate(1.05); }
.basement-door figcaption {
    margin-top: 12px;
    font-family: var(--font-ui);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lr-paper-2);
}
.basement-tease-copy .lr-lede { margin-top: 14px; }
.basement-status {
    display: block;
    margin-top: 26px;
    font-family: var(--font-ui);
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lr-paper-2);
}
.basement-status b { color: var(--lr-accent); font-weight: 700; }
@media (max-width: 900px) {
    .basement-door { max-width: 420px; margin: 0 auto; }
}