/* papers.css — one stylesheet for every page under Website/papers/.
 *
 * The Blaze Papers is deliberately NOT wired into the shared navbar (nav.css /
 * nav-parity.spec.js). It gets its own slim header instead — a logo, the title,
 * and a link back to sonicblaze.xyz — so adding six new pages here cannot ripple
 * into the 30-measurement navbar parity gate. Do not link nav.css from anything
 * in this folder, and do not add a class named "navbar" to the header below.
 *
 * Visual language matches the rest of the site: Comic Sans, dark translucent
 * panels, a gold/orange glow. Tokens copied verbatim from nftviewer.css's :root
 * (which itself copies style.css lines 17-41), because these pages link neither
 * of those stylesheets and would otherwise render with no brand colour at all.
 */

:root {
    --c-orange: orange;
    --c-orange-dark: darkorange;
    --c-red: #ff4500;
    --c-gold: #ffcf48;
    --c-text: #ffffff;
    --navbar-bg: rgba(0, 0, 0, 0.95);
    --glow: 0 0 10px rgba(255, 69, 0, 0.7);
    --panel: rgba(0, 0, 0, 0.82);
    --touch: 44px;
    --nav-h: 80px;   /* same bar height as nav.css, so the header matches */
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body, "Comic Sans MS", system-ui, sans-serif);
    background: url('../images/BlazeitBG.png') no-repeat center center;
    background-size: 100% auto;
    background-attachment: fixed;
    background-color: #b0e8f7;
    color: var(--c-text);
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
    /* Sticky footer, same pattern as the six main pages (style.css, about.css,
       bf.css, distribution.css, headblazed.css, nftviewer.css). */
    display: flex;
    flex-direction: column;
}

/* ---- header ---- */
.papers-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--navbar-bg);
    border-bottom: 2px solid var(--c-orange);
    box-shadow: var(--glow);
}

/* FIXED height, not min-height — deliberate, and it is what lets the logo be
   full size. The mark below is 105px inside an 80px bar, exactly as nav.css
   does it on the six main pages: a fixed height on the flex row means the
   oversized child OVERHANGS instead of inflating the row. With min-height the
   sticky header would grow to ~125px and eat a fifth of every reading screen.
   Fixed height also means no wrapping here, hence flex-wrap: nowrap; the
   <=768px block below restores wrapping and drops the logo to phone size. */
.papers-header-inner {
    max-width: 1400px;
    margin: 0 auto;
    height: var(--nav-h);
    padding: 10px 16px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
}

.papers-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--c-gold);
    min-height: var(--touch);
}

/* Matches .navbar-logo in nav.css (105px desktop / 56px phone). The Papers do
   not link nav.css — see the file header — so the size is duplicated here on
   purpose. It was 36px, which read as a favicon next to the full-size mark on
   every other page and made the library look like a different site. If nav.css
   ever changes its logo size, change this too. */
.papers-logo {
    height: 105px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

.papers-title {
    font-weight: bold;
    font-size: 18px;
    text-shadow: 0 0 6px #ff8c00, 0 0 10px #ff4500;
    overflow-wrap: anywhere;
}

.papers-back {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch);
    padding: 6px 10px;
    color: var(--c-text);
    text-decoration: none;
    font-size: 14px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 10px;
    background: rgba(0, 0, 0, .4);
}

.papers-back:hover,
.papers-back:focus-visible {
    color: var(--c-gold);
    border-color: var(--c-orange);
}

/* Off-screen until focused. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: #000;
    color: var(--c-gold);
    padding: 10px 14px;
    border-radius: 0 0 8px 0;
    z-index: 2000;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---- layout ---- */
/* The page sits on the site's SKY-BLUE backdrop art, but every heading, eyebrow
   and dek here is white/gold — unreadable straight on that light background
   (reported live 2026-08-02: "hard to read the white letters"). Only the
   degen/nerd boxes carried their own dark panel, so the text between them was
   floating on pale blue.

   Fix is the house pattern, same as nftviewer.css's .viewer-panel: the whole
   content column gets a dark translucent panel with the orange glow, so all
   copy — inside boxes or between them — sits on a dark surface. */
.container {
    flex: 1;
    width: 100%;
    /* The reading column. Two failed attempts are worth recording so nobody
       repeats either:

         1000px + no cap  -> ~90 chars on a line. Too long to track.
         1000px + 70ch cap on the paragraph -> text stopped 307px short of its
                             own box and left a dead gap down the right. Reads
                             as a bug, and it is one.
         660px            -> the line was right but the column looked pinched
                             on a wide monitor and wasted the page.

       Width and type size have to move TOGETHER. 850px with 18px prose lands
       the line in the right band while actually using the screen. Tables
       scroll inside .table-wrap and the card grid is auto-fill, so nothing
       that genuinely needs width is squeezed. */
    max-width: 850px;
    margin: 24px auto 40px;
    padding: 28px 24px 36px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, .82);
    border: 2px solid #ff7a18;
    /* No glow (2026-09-13, "glow means action"): this is a reading column. The
       2px ember rim still frames it; glow is kept for things you can act on. */
    box-shadow: none;
    border-radius: 20px;
}

@media (max-width: 600px) {
    .container {
        margin: 12px auto 24px;
        padding: 18px 14px 24px;
        border-radius: 14px;
    }
}

.papers-eyebrow {
    margin: 0 0 6px;
    color: rgba(255, 255, 255, .7);
    font-size: 14px;
}

.papers-eyebrow a { color: var(--c-gold); text-decoration: none; }
/* Content links (owner 2026-08-07): prose links inside the boxes had NO rule,
   so they fell to browser defaults — blue, and visited-purple, on dark panels.
   Readability first: brand gold, underlined, and :visited stays the SAME gold
   (the purple was the default :visited leaking through, not a choice). */
.paper-section a, .degen-box a, .nerd-box a, .paper-dek a, .paper-card p a {
    color: var(--c-gold);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.paper-section a:visited, .degen-box a:visited, .nerd-box a:visited,
.paper-dek a:visited, .paper-card p a:visited {
    color: var(--c-gold);
}
.paper-section a:hover, .degen-box a:hover, .nerd-box a:hover {
    color: var(--c-orange, orange);
}

.papers-eyebrow a:hover { text-decoration: underline; }

/* eli5's "Where to go next" grid sits INSIDE a .paper-section, so the generic
   `.paper-section a` underline rule (0,1,1) out-ranked .paper-card's own
   text-decoration:none (0,1,0) and underlined entire cards (owner,
   2026-09-01). Links inside a card's own text keep their deliberate
   underline via `.paper-card p a`. */
.paper-section a.paper-card { text-decoration: none; }

h1.paper-h1 {
    margin: 0 0 8px;
    color: var(--c-gold);
    text-shadow: 0 0 6px #ff8c00, 0 0 10px #ff4500;
    overflow-wrap: anywhere;
}

/* The standfirst under the h1. No width cap — the container is the column
   now, so a cap here would only reintroduce the gap it used to leave. */
.paper-dek {
    margin: 0 0 28px;
    color: rgba(255, 255, 255, .85);
    font-size: 18px;
    line-height: 1.65;
}

/* The as-of stamp under a LIVE readout (token.html's deflation section is the
   only live thing on the Papers). It has to read as metadata, not as a claim —
   the numbers above it come off the chain and this line says when, or says the
   chain did not answer. Same job as .pb-stamp on the home page ticker. */
.paper-stamp {
    margin: 6px 0 18px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .72);
}

/* Prose that sits directly in a section rather than inside a degen/nerd box. */
.paper-section > p,
.paper-section > ul > li,
.paper-section > ol > li {
    line-height: 1.7;
    font-size: 18px;
}

.paper-section {
    margin: 0 0 36px;
}

.paper-section h2 {
    margin: 0 0 12px;
    color: var(--c-gold);
    font-size: 22px;
    text-shadow: 0 0 6px #ff8c00, 0 0 10px #ff4500;
    overflow-wrap: anywhere;
}

.paper-section h3.paper-h3 {
    margin: 28px 0 10px;
    color: var(--c-gold);
    font-size: 18px;
}

/* ---- dual-layer boxes ---- */
.degen-box,
.nerd-box {
    border-radius: 16px;
    padding: 16px 18px;
    margin: 0 0 14px;
    background: var(--panel);
    box-sizing: border-box;
}

.degen-box {
    border: 2px solid var(--c-orange);
    box-shadow: var(--glow);
}

.nerd-box {
    border: 1px solid rgba(255, 122, 24, .5);
}

.degen-box h3, .degen-box h2,
.nerd-box h3, .nerd-box h2 {
    text-shadow: none; /* the two top-of-page boxes are h2: keep .paper-section h2's glow off them */
    margin: 0 0 10px;
    font-size: 15px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--c-gold);
}

/* ================================================================
   PROSE MEASURE — the COLUMN is the measure, not a cap inside it.

   First attempt capped paragraphs at 70ch inside the 1000px container.
   That fixed the line length and looked broken: measured, the text ran
   641px inside a 948px box, so every paragraph stopped 307px short of
   its own box and left a dead gap down the right-hand side. A reader
   sees that as a bug, correctly — text is supposed to reach the edge of
   its box and wrap.

   So the container is now the reading column, and paragraphs fill it.
   Sizing is measured, not guessed: at 16px this face averages ~7.6px
   per character, so a ~75-character line wants ~570px of text, which is
   660px of container once padding is taken off. Note 70ch was never 70
   characters — `ch` is the width of "0", wider than an average letter,
   so it was really rendering ~90.

   Wide content is unaffected: .table-wrap already scrolls on its own
   axis, and .papers-grid is auto-fill so it simply reflows.
   ================================================================ */
.degen-box p,
.nerd-box p,
.degen-box li,
.nerd-box li {
    margin: 0 0 var(--space-3, 12px);
    line-height: 1.7;
    font-size: 18px;
    overflow-wrap: anywhere;
}

.degen-box p:last-child,
.nerd-box p:last-child { margin-bottom: 0; }

.nerd-box ul,
.nerd-box ol {
    margin: 0 0 10px;
    padding-left: 20px;
}

.nerd-box code {
    background: rgba(255, 255, 255, .1);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: .9em;
}

.nerd-box strong,
.degen-box strong { color: var(--c-gold); }

/* ---- tables, always horizontally scrollable ---- */
.table-wrap {
    width: 100%;
    overflow-x: auto;
    margin: 0 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 122, 24, .5);
}

table.paper-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 480px;
    font-size: 14px;
}

.paper-table caption { display: none; }

.paper-table th,
.paper-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    overflow-wrap: anywhere;
}

.paper-table thead th {
    background: rgba(0, 0, 0, .5);
    color: var(--c-gold);
    white-space: nowrap;
}

.paper-table tbody tr:last-child td { border-bottom: none; }
.paper-table tbody tr:hover { background: rgba(255, 122, 24, .08); }

.paper-table a { color: var(--c-gold); }
.paper-table a:hover { color: var(--c-orange); }

/* ---- status pills (trust.html) ---- */
.pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: bold;
}
.pill-renounced { background: rgba(76, 217, 100, .18); color: #7ee787; border: 1px solid rgba(76, 217, 100, .5); }
.pill-owner { background: rgba(255, 165, 0, .18); color: var(--c-orange); border: 1px solid rgba(255, 165, 0, .5); }

/* ---- hub card grid ---- */
.papers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin: 0 0 28px;
}

.paper-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px;
    border-radius: 16px;
    background: var(--panel);
    border: 1px solid rgba(255, 122, 24, .5);
    text-decoration: none;
    color: var(--c-text);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.paper-card:hover,
.paper-card:focus-visible {
    border-color: var(--c-orange);
    box-shadow: var(--glow);
}

.paper-card-title {
    margin: 0;
    color: var(--c-gold);
    font-size: 18px;
    font-weight: bold;
}

.paper-card-desc {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, .8);
    line-height: 1.5;
}

/* ---- footer — the SITE-STANDARD block (tests/footer-parity.spec.js pins it
   across every page; 0.82 alpha via --panel used to be the one-off here) ---- */
.footer {
    width: 100%;
    text-align: center;
    padding: 10px 0;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    position: relative;
    font-size: 14px;
    margin-top: 20px;
}

.footer p { margin: 0; }

.trust-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 4px 12px;
    margin-top: 6px;
    padding: 0 12px;
    font-size: 12px;
    color: #ded6c6; /* opaque: translucent text over a translucent panel has no contrast ratio (READABILITY rule) */
}
.trust-strip a {
    color: var(--c-gold);
    text-decoration: none;
}
.trust-strip a:hover,
.trust-strip a:focus-visible {
    color: var(--c-orange);
    text-decoration: underline;
}
.trust-sep { opacity: 0.5; }

/* ---- focus rings ---- */
.papers-back:focus-visible,
.paper-card:focus-visible,
a:focus-visible {
    outline: 3px solid var(--c-gold);
    outline-offset: 2px;
}

/* Phone: same breakpoint and same logo size nav.css uses (768px / 56px). The
   bar goes back to growing with its content here, because the brand and the
   back link legitimately wrap onto two rows on a narrow screen. */
@media screen and (max-width: 768px) {
    .papers-header-inner {
        height: auto;
        min-height: var(--touch);
        flex-wrap: wrap;
    }
    .papers-logo { height: 56px; }
}

@media screen and (max-width: 600px) {
    .papers-header-inner { justify-content: center; text-align: center; }
    .paper-h1 { font-size: 24px; }
    .degen-box, .nerd-box { padding: 14px; }
}

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

/* The beginner on-ramp card. Sits above the grid, full width, and wears the
   house flame treatment so it reads as the obvious first stop rather than one
   tile among equals — the reader who needs it is the least likely to go
   hunting. Glow is deliberate site identity, not decoration. */
.paper-card-start {
    display: block;
    margin: 0 0 18px;
    border: 2px solid var(--c-orange);
    box-shadow: var(--glow);
}

.paper-card-start .paper-card-title {
    font-size: 1.15em;
}

/* The featured "Start Here" card sits outside the grid and spans the full
   column, which pushed its description to ~114 characters a line while the
   grid cards beside it sat at ~45. Narrowed and centred — it is a featured
   CTA, so a tighter block reads as deliberate rather than pinched. */
.paper-card-start {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

/* ------------------------------------------------------------------------- */
/* THE JUMP LIST.                                                             */
/*                                                                            */
/* Owner, 2026-09-02: the long pages "carry a lot, all of it needed, and they  */
/* feel heavy. The answer is order, not cuts."                                 */
/*                                                                            */
/* The obvious move was to fold the 🤓 nerd boxes behind <details>. MEASURED    */
/* first, and dropped: 57 of the 77 nerd boxes on these pages (74%) carry risk */
/* or limit language — the owner powers, the bust odds, the "no paid audit",   */
/* the reverts. Folding those puts the bad news one click further away than    */
/* the good news, which is the one thing this project does not do. So the      */
/* papers hide nothing; they just tell you what is in them and let you land    */
/* on the part you came for. Casino alone is ten sections and 6,661 words.     */
/* ------------------------------------------------------------------------- */
.paper-toc {
    max-width: 760px;
    margin: 0 auto 22px;
    padding: 12px 16px 14px;
    background: rgba(0, 0, 0, .42);
    border: 1px solid rgba(255, 207, 72, .28);
    border-radius: 12px;
    box-sizing: border-box;
}

.paper-toc-title {
    margin: 0 0 8px;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--c-gold, #ffcf48);
}

.paper-toc ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
}

.paper-toc li { margin: 0; }

.paper-toc a {
    /* inline-flex + min-height: the pills were 34px tall, under the 44px tap bar. */
    display: inline-flex;
    align-items: center;
    min-height: var(--touch, 44px);
    box-sizing: border-box;
    padding: 7px 11px;
    border: 1px solid rgba(255, 207, 72, .22);
    border-radius: 999px;
    font-size: 13.5px;
    line-height: 1.25;
    text-decoration: none;
}

.paper-toc a:hover,
.paper-toc a:focus-visible {
    background: rgba(255, 207, 72, .12);
    border-color: var(--c-gold, #ffcf48);
    outline: none;
}

/* A jumped-to heading must not land under the fixed navbar. */
.paper-section h2[id] { scroll-margin-top: calc(var(--nav-h, 64px) + 16px); }

@media (max-width: 640px) {
    .paper-toc { margin-bottom: 18px; }
    .paper-toc a { font-size: 13px; padding: 8px 10px; }
}