/* ── Zine layout: one US-Letter sheet, 2 columns × 4 rows ─────────────────── */
/*
 * Eight panels tile a single 8.5in × 11in sheet — two columns of four panels,
 * each panel 4.25in × 2.75in, so the panels FILL the sheet with no gutters
 * (2 × 4.25 = 8.5, 4 × 2.75 = 11).  Because the panels butt together, the cut
 * guides collapse into single shared lines — one line down the centre, three
 * across.
 *
 * Each panel holds a rotated inner "mini-page" (`.page-inner`) that is authored
 * PORTRAIT (2.75in wide × 4.25in tall) and turned a quarter-turn (booklet-fold
 * orientation).  A 90° turn of a 2.75×4.25 box gives a 4.25×2.75 bounding box —
 * exactly the panel.  The turn is a `transform`, which does not affect layout,
 * so the panel keeps its 4.25×2.75 flex slot and the sheet stays one side.
 *
 * Content is sized with `zoom` (not `transform: scale`): `zoom` also shrinks
 * the element in layout, so the grids genuinely get smaller and fit their cell.
 *
 *   Left column        Right column
 *   -----------        ------------
 *   Puzzle 1           Front cover
 *   Puzzle 2           Back cover
 *   Puzzle 3           Solutions 1–4
 *   Puzzle 4           (blank)
 */

/*
 * Sheet geometry lives in these variables so the panels, the rotated mini-pages and the reverse
 * side all follow from one place. Screen shows the full US-Letter sheet; print re-states them at
 * the size that fits inside the @page margin (see the print block), because a sheet WIDER than the
 * printable area makes the print engine silently scale the whole page down — which breaks true-size
 * printing and the quarter-fold geometry with it.
 */
:root {
    --sheet-w: 8.5in;
    --sheet-h: 11in;
    --panel-h: 2.75in;   /* 4 rows fill the sheet height; panel WIDTH is half the sheet */
    --inner-w: 2.75in;   /* mini-page authored portrait, rotated a quarter turn into the panel */
    --inner-h: 4.25in;
}

.zine-pages {
    width: var(--sheet-w);
    height: var(--sheet-h);
    margin: 0 auto;
    display: flex;
    overflow: hidden;          /* keep everything on the one sheet */
    box-sizing: border-box;
}

.zine-pages-left,
.zine-pages-right {
    width: 50%;                /* 4.25in */
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
}

/* Panel — fills its grid slot edge-to-edge; provides the (shared) cut guide. */
.page {
    flex: 0 0 var(--panel-h);  /* four rows fill the sheet height exactly */
    width: 100%;               /* half the sheet — full column width, no gutter */
    height: var(--panel-h);
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Rotated mini-page — authored portrait, turned to fill the landscape panel. */
.page-inner {
    width: var(--inner-w);
    height: var(--inner-h);
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.12in;
}

/* Booklet-fold orientation — rotate each column's mini-pages a quarter turn. */
.zine-pages-left  .page-inner { transform: rotate(90deg); }
.zine-pages-right .page-inner { transform: rotate(-90deg); }

/* ── Screen: the sheet as a white page on a grey desk ─────────────────────── */
@media screen {
    body.zine-body {
        background: #e5e7eb;
        margin: 0;
        padding: 2rem 0;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }

    .zine-pages {
        background: #fff;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
        margin: 2rem auto;
    }

    .page {
        outline: 1px dashed #d1d5db;   /* cut guides */
        outline-offset: -1px;
    }

    .no-print {
        background: #fef3c7;
        border: 1px solid #fcd34d;
        border-radius: 6px;
        padding: 0.75rem 1rem;
        margin: 1rem auto;
        max-width: 8.5in;
        font-size: 0.85rem;
        line-height: 1.5;
        text-align: center;
    }

    .zine-nav {
        display: flex;
        justify-content: center;
        gap: 1rem;
        margin: 1rem 0 2rem;
    }

    .zine-nav a {
        color: #ef4444;
        text-decoration: none;
        font-weight: 700;
        font-size: 0.9rem;
    }
}

/* ── Print: one full-bleed US-Letter sheet, no screen chrome ──────────────── */
@media print {
    /*
     * margin: 0 is load-bearing. The sheet IS the paper: 2 x 4.25in across, 4 x 2.75in down,
     * printed at true size so the panels are exact quarters of the page and the booklet folds
     * against the paper's own edges.
     *
     * ⚠️ Do NOT add a page margin here. Any margin makes the printable area smaller than the
     * 8.5x11 sheet, and the print engine then scales the WHOLE page to fit — measured 0.94, which
     * turned the 4.25in panels into 4.00in and broke the fold. Compensating for that by shrinking
     * the sheet is worse: resizing the panel boxes clips the grids inside them (they are tuned to
     * a 2.75x4.25in mini-page), and a `zoom` compounds with the engine's own fit.
     * Reference for "correct": storage/app/zine/"...Issue #1NEW.pdf" — ink 8.47x10.97in at the
     * sheet corner, 4.25in panels. Match that.
     */
    @page {
        size: 8.5in 11in;
        margin: 0;
    }

    /* This page also loads grid.book.4322.css for the puzzle-grid styling, and that
       stylesheet ends with an unconditional `@page { size: 6in 9in }` plus
       `html, body { width: 6in; overflow: hidden }` to lock the BOOK's page box.
       Those rules are required there but follow the grid CSS onto any page that
       includes it, so the zine laid itself out in a 6in column and clipped the rest.
       The @page above already outranks the book's (same specificity, later sheet);
       the width lock has to be released by hand. */
    html, body {
        width: auto;
        overflow: visible;
        margin: 0;
        padding: 0;
    }


    /* One cell is always focused (the last grid built keeps the caret), and the browser paints
       its focus ring straight into the PDF — a stray box around one square of one puzzle. */
    .entryPanel {
        outline: none !important;
        box-shadow: none !important;
    }

    .no-print,
    .zine-nav {
        display: none !important;
    }

    .zine-pages {
        box-shadow: none;
        margin: 0;
    }

    .page {
        outline: 1px dashed #cbd5e1;    /* faint cut guides */
        outline-offset: -1px;
        break-inside: avoid;
    }
}

/* ── Cover pages ──────────────────────────────────────────────────────────── */

.cover-page {
    background: #fff;
    color: #374151;
    text-align: center;
    /* Anchor the masthead to the top so the title sits at the SAME height on
       the front and back covers (their lower content — edition vs QR — differs). */
    justify-content: flex-start;
    padding-top: 0.4in;
}

.cover-title {
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    margin: 0 0 0.25rem;
    color: #ef4444;
}

.cover-heart {
    font-size: 1.6rem;
    margin: 0.25rem 0;
    color: #ef4444;
}

/* ── Cover ornament: a solved puzzle, shrunk ──────────────────────────────── */
/*
 * The grids are heart-shaped, so a filled one is the cover art. Sized to sit
 * between the subtitle and the edition/QR block without pushing either off the
 * 2.75x4.25in panel. `zoom` (layout-affecting, as elsewhere in this file) so the
 * grid genuinely occupies its shrunken size instead of overlapping its neighbours.
 */
.cover-mini {
    display: flex;
    justify-content: center;
    margin: 0.06in 0 0.04in;
}

.cover-mini-div {
    zoom: 0.19;
}

/* Ornament, not an answer key: drop the gridlines so it reads as a heart shape
   rather than a puzzle someone is meant to check their work against. */
.cover-mini .playCell,
.cover-mini .cell-top,
.cover-mini .cell-left,
.cover-mini .cell-right,
.cover-mini .cell-bottom { border: none; }

.cover-mini .entryPanel {
    font-size: 2.6em;
    font-weight: 700;
    color: #9ca3af;          /* muted, so the masthead stays the focal point */
}

.cover-qr {
    width: 1.1in;
    height: auto;
    margin: 0.5rem auto;
    display: block;
}

.cover-subtitle {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #9ca3af;
    margin: 0;
}

.cover-edition {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 1rem;
    line-height: 1.6;
}

.cover-url {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.5rem;
}

/* ── Puzzle pages ─────────────────────────────────────────────────────────── */

/*
 * Undo the BOOK's grid positioning.
 *
 * `grid.book.4322.css` pins `.game-div` for the book's 6x9 page —
 * `position: absolute; top: .351in; left: -.199in; padding: 1.75in 0 1.25in` — and the zine's
 * grids carry that class. On a 2.75x4.25in mini-page that takes the grid out of the flex flow
 * (so `justify-content: center` can no longer centre it), parks it at a fixed offset and pads it
 * by 1.75in, pushing the heart off its panel and cutting the outer column and bottom row off
 * every puzzle.
 *
 * ⚠️ NOT inside `@media print`. In the book stylesheet that rule LOOKS print-scoped — it sits
 * under an "@media print {" line and is indented as if nested — but that line is inside a
 * comment (grid.book.4322.css:367), so the media block never opens and the rule is
 * unconditional. It therefore applies on screen too, and a print-only override here fixes the
 * PDF while leaving the on-screen sheet broken.
 *
 * Putting the grid back in normal flow is the whole fix — it is not an out-of-flow element that
 * we are re-flowing by preference; it was authored as a plain flex item and the book stylesheet
 * reached in. Absolute centring was measured as an alternative and is worse: it centres on the
 * whole mini-page, so the grid slides under `.puzzle-label`, and the `translate(-50%,-50%)`
 * variant re-introduces a transform inside the rotated mini-page (see the rasterisation note
 * further down).
 */
.page-inner .game-div {
    position: static;
    top: auto;
    left: auto;
    padding: 0;
}

/*
 * A full-size heart needs the WHOLE mini-page.
 *
 * Cells are 26px (see the font-size note below), which is the size the reference sheet prints
 * at — the puzzles are not meant to be scaled down. At that size the tallest hearts measure
 * ~260px against a 264px (2.75in) panel, so the mini-page's usual 0.12in padding is more than
 * the entire margin available and clips the outer column. Puzzle pages therefore run
 * edge-to-edge; the panel's own `overflow: hidden` still keeps them off the neighbouring cell.
 */
.puzzle-page {
    padding: 0;
}

/*
 * The label is taken OUT of the flex column for the same reason: as a flow sibling it steals
 * height from the grid and pushes the heart off-centre (measured 14px, enough to clip). Floating
 * it over the corner leaves the grid centred in the full mini-page, which is how the reference
 * sheet is laid out — it has no label at all.
 */
.puzzle-page .puzzle-label {
    position: absolute;
    top: 0.06in;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ca3af;
}

/*
 * Crisp gridlines — the important bit for print.
 *
 * We must NOT use `zoom` (or `transform: scale`) to shrink the grid: on the
 * 90°-rotated mini-page that makes Chrome rasterise the whole grid subtree to a
 * low-res bitmap when it builds the print PDF, so the 1px lines come out at
 * ~40% coverage (light grey) and the printer drops them in patches.
 *
 * Instead we shrink the grid purely with `font-size`.  The shared game CSS sizes
 * cells as 4em, so font-size scales the cell geometry, but the borders are set
 * in real px below and therefore stay TRUE 1px vector lines — no rasterisation,
 * no half-pixel coverage.  6.5px font → 4em = 26px cells (the same rendered size
 * as the old 13px-font × 0.5-zoom), so the layout/fit is unchanged.
 */
.puzzle-page .game-grid-table { font-size: 6.5px; }

/*
 * Centre the HEART, not the table.
 *
 * The table is the full rectangle of the puzzle's data array, but the heart only inks part of
 * it, and the leftover blank rows/columns are not shared evenly — the template always leaves one
 * extra on the far side. Measured across every puzzle of issues 1/4/7/11/13/16: the inked box is
 * 260x234px and its centre sits exactly 13px (half a cell) up and to the left of the table's, in
 * all 24 cases. So centring the table leaves the heart 13px off, which on a 264px panel is enough
 * to push the outer column past the edge.
 *
 * A constant offset is therefore exact here, not a fudge. `position: relative` keeps it a layout
 * shift — a transform would rasterise the grid inside the rotated mini-page and break the
 * gridlines (see the note above).
 */
.puzzle-page .game-grid-table {
    position: relative;
    left: 13px;
    top: 13px;
}

/* ── Blank cell ───────────────────────────────────────────────────────────── */

.blank-page {
    background: #fff;
}

/* ── Solutions page (four solutions, 2×2) ─────────────────────────────────── */

.solutions-page {
    justify-content: flex-start;
    padding-top: 0.12in;
}

.solutions-page h3 {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #6b7280;
    margin: 0 0 0.25rem;
    align-self: center;
}

.solutions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0.1rem;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    place-items: center;
}

.solution-cell {
    position: relative;
    overflow: hidden;
}

.solution-cell .solution-number {
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 0.5rem;
    font-weight: 700;
    color: #374151;
    z-index: 10;
}

.solution-cell .solution-div {
    /* `zoom` (layout-affecting) so all four solutions fit the 2×2 block. */
    zoom: 0.25;
}

/* Solutions are a compact answer key — no gridlines, just the digits.  Removing
   the lines de-clutters the 2×2 block, so the digits can read a little larger
   and bolder without crowding. */
.solution-cell .entryPanel {
    font-size: 2.6em;
    font-weight: 700;
    color: #111;
}

/* ── Grid lines: single weight (undo the doubled div borders) ─────────────── */
/*
 * In the shared game CSS every play cell draws a 1px border on all four sides,
 * so each interior grid line is painted twice by the two cells that share it —
 * it prints ~2px and reads too dark.  Here (zine only) each cell draws just its
 * RIGHT and BOTTOM edge, so every interior line is painted once; the top and
 * left outer edges come from the `cell-top` / `cell-left` boundary classes.
 *
 * The grids are shrunk with `zoom`, which also scales border width: a 1px line
 * under `zoom:0.5` is 0.5 device-px and under `zoom:0.25` is 0.25px, so the
 * browser rounds some lines down to 0 and they vanish.  Counter-scale the width
 * (2px on puzzles → ~1px, 4px on solutions → ~1px) so every line survives.
 */
/*
 * True 1px vector gridlines.  Because the grid is scaled with `font-size` (not
 * `zoom`), these px widths are NOT scaled down — they stay a solid 1px in the
 * print PDF.  Each interior line is painted once (right + bottom only); the top
 * and left outer edges come from the `cell-top` / `cell-left` boundary classes,
 * so every line is single-weight and even.
 */
.puzzle-page .playCell {
    border: none;
    border-right:  solid #111 1px;
    border-bottom: solid #111 1px;
}
.puzzle-page .cell-top    { border-top:    solid #111 1px; }
.puzzle-page .cell-left   { border-left:   solid #111 1px; }
.puzzle-page .cell-right  { border-right:  solid #111 1px; }
.puzzle-page .cell-bottom { border-bottom: solid #111 1px; }

/* Solutions: no gridlines at all — override the shared game-CSS cell borders. */
.solution-cell .playCell,
.solution-cell .cell-top,
.solution-cell .cell-left,
.solution-cell .cell-right,
.solution-cell .cell-bottom { border: none; }

/* ── Reverse side: getting-started guide (one upright US-Letter sheet) ─────── */
/*
 * Printed double-sided, flipped on the LONG edge, this lands upright on the
 * back of the puzzle sheet.  Normal portrait reading orientation — no rotation.
 */
.zine-back {
    /* Gutter between the two columns, shared by `.zb-cols` and `.zb-brand` so the brand marks sit
       on the same centre lines as the columns they belong to. */
    --zb-gutter: 0.5in;
    width: var(--sheet-w);
    height: var(--sheet-h);
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0.45in 0.6in;
    overflow: hidden;
    background: #fff;
    color: #374151;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    display: flex;
    flex-direction: column;
}

.zb-header {
    text-align: center;
    border-bottom: 2px solid #ef4444;
    padding-bottom: 0.12in;
    margin-bottom: 0.2in;
}
.zb-header .zb-heart { color: #ef4444; font-size: 1.3rem; }
.zb-header h1 {
    margin: 0.05in 0 0.03in;
    font-size: 1.9rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    color: #ef4444;
}
.zb-tagline { margin: 0; font-size: 0.95rem; color: #6b7280; font-style: italic; }

/* `flex: 0 0 auto`, so the columns take only the height their content needs and the leftover
   height falls to `.zb-brand` below them. When this stretched instead, the empty lower third of
   the sheet was trapped INSIDE the columns and nothing could be centred in it.

   ⚠️ The gutter is a variable because `.zb-brand` reuses it to line its two marks up with these
   two columns. Change it in one place or they drift apart. */
.zb-cols {
    display: flex;
    gap: var(--zb-gutter);
    flex: 0 0 auto;
    min-height: 0;
}
.zb-col { flex: 1 1 50%; min-width: 0; }
.zb-col h2 {
    font-size: 1.05rem;
    color: #ef4444;
    margin: 0.11in 0 0.05in;
    padding-bottom: 2px;
    border-bottom: 1px solid #f3d0d0;
}
.zb-col h2:first-child { margin-top: 0; }

.zb-rules { margin: 0; padding-left: 1.1em; font-size: 0.82rem; line-height: 1.5; }
.zb-rules li { margin-bottom: 0.06in; }

/* ── Worked-example mini grid ─────────────────────────────────────────────── */
/*
 * The example uses the REAL grid markup and the shared game CSS, so it looks like the puzzles on
 * the other side of this sheet. It used to be a hand-rolled table with solid black clue cells and
 * a CSS-gradient diagonal — a look this project prints nowhere, which made the instructions teach
 * a different game from the one in the reader's hands.
 *
 * Only two things need saying here: how big a cell is, and the outer boundary lines. Everything
 * else — cell box, clue-sum placement, digit position — comes from grid.book.4322.css exactly as
 * it does for a real puzzle.
 */
.zb-example { margin-top: 0.06in; }

/*
 * Cells are 4em square in the shared CSS, so font-size IS the cell size: 14px → 56px cells.
 * Bigger than the 26px the puzzles print at, because this one is being read as a diagram rather
 * than solved. Same reason the grid is scaled with font-size and not `zoom` — see the crisp
 * gridlines note above; the borders stay true 1px lines.
 */
.zb-grid {
    border-collapse: collapse;
    margin: 0 auto 0.1in;
    font-size: 14px;
}

/*
 * The shared `.playCell` paints only right+bottom, so each interior line is drawn once. The top
 * and left edges of the whole grid come from these boundary classes, which the zine otherwise
 * scopes to `.puzzle-page`.
 */
.zb-grid .cell-top  { border-top:  solid #111 1px; }
.zb-grid .cell-left { border-left: solid #111 1px; }

.zb-steps { margin: 0; padding-left: 1.1em; font-size: 0.78rem; line-height: 1.45; }
.zb-steps li { margin-bottom: 0.04in; }

/* Locked-sums reference table */
.zb-note { font-size: 0.78rem; color: #6b7280; line-height: 1.35; margin: 0 0 0.06in; }
.zb-ref {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.zb-ref th {
    background: #ef4444;
    color: #fff;
    font-weight: 700;
    padding: 2px 6px;
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    /* override the shared game CSS `th,td{width:4em;height:4em}` */
    width: auto;
    height: auto;
}
.zb-ref td {
    border: 1px solid #e5e7eb;
    padding: 2px 6px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    /* override the shared game CSS `th,td{width:4em;height:4em}` */
    width: auto;
    height: auto;
    line-height: 1.2;
}
.zb-ref td:last-child { text-align: left; letter-spacing: 0.14em; font-weight: 700; }

/* The 8-cell row states a rule instead of a digit string, so it drops the digit-run tracking and
   weight that would make prose look like a sum. */
.zb-ref td.zb-ref-rule {
    letter-spacing: 0;
    font-weight: 400;
    font-size: 0.72rem;
    color: #6b7280;
}
.zb-ref td:first-child { font-weight: 700; color: #ef4444; background: #fff6f6; }
.zb-ref tr.zb-hi td { background: #f8fafc; }
.zb-ref tr.zb-hi td:first-child { background: #fff6f6; }
.zb-tip { margin-top: 0.1in; }

/* ── Reverse-sheet brand block (heart + QR), centred in the lower whitespace ── */
/*
 * Takes all the height the two columns leave, and centres its contents in it — so the block sits
 * in the middle of the empty lower third rather than clinging to the footer, and it stays centred
 * as the columns' content grows or shrinks from issue to issue.
 */
/*
 * Laid out as the SAME two halves as `.zb-cols` — equal widths, same `--zb-gutter` — so each mark
 * lands on the centre line of the column above it: QR under The Rules, heart under Locked Sums.
 * Deriving it from the column geometry rather than nudging by hand means the two stay aligned if
 * the gutter or the sheet padding ever changes.
 */
.zb-brand {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    gap: var(--zb-gutter);
    align-items: center;
}

.zb-brand-qr,
.zb-brand-heart {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/*
 * Scaled with font-size, NOT the `zoom` the cover ornament uses. Cells are 4em, so 2.6px → ~10px
 * cells and a heart about 1.4in wide. `zoom` would scale the 1px gridlines down with everything
 * else (0.26px), and sub-pixel lines are exactly what prints as broken grey — the same reason the
 * puzzle grids are sized by font-size. `.cover-mini-div` carries a global `zoom`, so it has to be
 * neutralised here rather than simply not set.
 */
.zb-brand-heart .cover-mini-div { zoom: 1; }
.zb-brand-heart .game-grid-table { font-size: 2.1px; }

/* Outer boundary lines, as on the puzzle pages — the shared `.playCell` only paints right+bottom. */
.zb-brand-heart .cell-top  { border-top:  solid #111 1px; }
.zb-brand-heart .cell-left { border-left: solid #111 1px; }

/* The grid arrives solved (it is copied before `hideEdges()`), so the digits are hidden rather
   than absent — this is branding on the instructions page, not a second answer key. The clue sums
   go too: at this scale they are specks around the silhouette, not readable numbers. */
.zb-brand-heart .entryPanel,
.zb-brand-heart .numberCircle { color: transparent; }

.zb-brand-qr img {
    display: block;
    width: 0.9in;
    height: auto;
    margin: 0 auto;
}

.zb-brand-url {
    margin-top: 0.07in;
    text-align: center;
    font-size: 0.78rem;
    color: #6b7280;
}

.zb-footer {
    text-align: center;
    font-size: 0.75rem;
    color: #9ca3af;
    border-top: 1px solid #e5e7eb;
    padding-top: 0.1in;
    margin-top: 0.15in;
}
.zb-footer span { color: #ef4444; }

/* ── Screen: show the reverse sheet as a second white card ─────────────────── */
@media screen {
    .zine-back {
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
        margin: 2rem auto;
    }
}

/* ── Print: reverse sheet is page 2 (duplex, long-edge flip) ───────────────── */
@media print {
    .zine-back {
        box-shadow: none;
        margin: 0;
        page-break-before: always;
        break-before: page;
    }
}

/* Share-mode entry point. Lives inside .prose.no-print, so it never reaches paper; the share
   page itself is styled by share.css, which this page does not load. */
.zine-share-btn {
    display: inline-block;
    margin-top: .35rem;
    padding: .45rem .9rem;
    border-radius: 8px;
    background: #ef4444;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}
.zine-share-btn:hover { background: #dc2626; }