/* --- Inter, self-hosted ------------------------------------------------------
   Replaces a render-blocking round trip to fonts.googleapis.com on every page.

   TWO files, not ten. Google serves ONE variable font per subset and repeats it
   for each requested weight — all five weights came back byte-identical, and the
   file carries fvar/gvar/avar, so a single variable range covers 400 through 900.

   latin-ext is SUBSET to exactly the three codepoints this site renders: Ł and ł
   (U+0141-0142, the Litecoin symbol) and ₿ (U+20BF). Google's stock latin-ext file
   is 85,068 B covering 733 codepoints; subset it is 1,840 B.

   That correction matters. The first pass shipped the stock file on the reasoning
   that unicode-range makes it free unless a page needs it — but Ł is in the
   videos.php logo glyph and the store footer, so it was fetched on NINE of ten
   pages, where it was the largest single asset on six and 92% of the entire
   /videos.php payload. "Only fetched when needed" is worthless when the character
   is in the chrome of every page.

   The unicode-range below MUST stay in step with what the file actually contains.
   Claim a codepoint the subset does not carry and the browser will download this
   file for it and then render tofu. Regenerate both together.

   Everything else the site uses outside these ranges — 𝕏 🛒 and the arrows — is not
   in Inter at all and already falls back to a system font.

   Every page also previously preconnected to fonts.googleapis.com and NEVER to
   fonts.gstatic.com, which is the host the font files actually came from. That
   was a wasted hint and a missing one; self-hosting deletes the question. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0141-0142, U+20BF;
}

/* --- Anton, self-hosted — the display face -----------------------------------
   Every headline on this site was Inter Black uppercase, which is the single
   biggest reason a redesign kept reading as "the old site, repainted": Inter is
   a UI face, and at poster sizes it has no voice. Anton is a condensed display
   weight with real poster energy, which is what a comic universe and a boxed
   collector drop actually want.

   One file, latin only, 18,612 B. It is used ONLY for display type — never for
   body copy, never below ~1.25rem, and never for anything a screen reader has
   to wade through at length. The unicode-range is deliberately narrower than
   Inter's: Ł (the Litecoin glyph) is NOT in this subset, so the logo mark and
   the store footer keep falling through to Inter, which does carry it.

   Anton has a single weight. Do not ask it for 700 or 900 — the browser will
   synthesise a fake bold and it looks like a smudge. Set font-weight: 400. */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/anton-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2212, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════════════════
   LITECOIN HORIZON — MASTER STYLESHEET
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS — Phase 4
   ═══════════════════════════════════════════════════════════

   The pre-Phase-4 audit counted 10 real tokens holding back 266 raw colour
   literals (75 distinct values), 38 font sizes, 47 spacing steps and 18 shadow
   definitions. This is the layer that replaces them.

   Two rules govern this block:

   1. EVERY token the old stylesheet defined is still defined, at the bottom, as
      an alias onto the new scale. Phase 4 migrates the site page by page, so the
      pages that have not been touched yet must keep rendering exactly as they
      do. Deleting a legacy name here breaks five pages at once.

   2. Light and dark are BOTH complete. The audit found --shadow-card and
      --shadow-window had no dark values at all, so every card on the dark theme
      was painting a shadow tuned for a white page. A token that exists in only
      one theme is a bug waiting for the theme switch.

   Dark is now the default (see partials/head.php) because the direction is
   "premium collector drop" — the light theme is the alternate, not the base.
   The .theme-dark CLASS mechanism is unchanged, so every existing
   `.theme-dark .x` rule still applies; only which way the default falls moved. */

:root {
    /* ── Neutral ramp: ASH.
       The direction is "a phoenix rising", so the ground is what a phoenix rises
       OUT of — warm charcoal with a faint violet cast, not the cool navy of the
       sibling site and not neutral grey. The warmth matters: the same ember
       reads hot against ash and merely orange against navy.

       Not pure #000 either. Pure black clips against the box art and makes the
       grid edges vanish on an OLED panel. ── */
    --ink-950: #0b0a10;         /* page ground — the ash bed */
    --ink-900: #141017;
    --ink-850: #1a141d;         /* card surface */
    --ink-800: #221a26;
    --ink-700: #2c2231;
    --ink-600: #3a2e40;
    --ink-500: #4e3f55;
    --ink-400: #6e5c76;
    --ink-300: #b9aab5;         /* muted text — 8.90:1 on the ash ground */
    --ink-200: #d6cbd2;
    --ink-100: #ebe4e9;
    --ink-50:  #f7f2ea;         /* cream, not grey — the light-section ground */
    --white:   #fffdf8;         /* warm white; pure #fff reads cold against it */

    /* ── Accent: EMBER → GOLD, the rising flame.
       Cyan is gone. It was ~40 of the audit's 69 failing contrast pairs on its
       own (#06b6d4 under white text measures 2.43:1) and it says nothing about
       this site.

       The ramp IS the metaphor: deep ember at the bottom, gold at the top. Every
       stop from --ember-500 upward clears 5:1 on the ash ground, which is what
       makes --flame safe to use as background-clipped text — a gradient headline
       passes AA at every point along its length, not just at the bright end.
       Below --ember-500 is decorative only: --ember-700 is 2.59:1 and must never
       carry text on dark.

       Direction of use, and it does not invert: ember and gold are a FILL
       carrying ash-dark text, or bright TEXT on the ash ground. Never white on
       either — white on gold is 1.77:1. ── */
    --ember-700: #9a2d0c;       /* decorative / gradient base ONLY — never text */
    --ember-600: #c2410c;       /* text on cream — 4.65:1 */
    --ember-500: #e8481c;       /* text on ash — 5.05:1; the gradient's low stop */
    --ember-400: #ff6a1f;       /* 6.88:1 on ash */
    --ember-300: #ff8c3a;       /* 8.51:1 on ash */
    --ember-200: #ffb347;       /* 11.07:1 on ash */

    --accent-bright: #ffd774;   /* gold text on the ash ground — 14.29:1 */
    --accent:        #f4b735;   /* the CTA fill; pairs with --accent-ink */
    --accent-deep:   #9a2d0c;   /* deep ember, dark enough to be text on cream */
    --accent-ink:    #0b0a10;   /* what sits ON a fill — ash, never white */

    /* Bottom-to-top on purpose: 0deg puts the deep ember at the base and the
       gold at the crown, so anything painted with it reads as rising. */
    --flame: linear-gradient(0deg, #e8481c 0%, #ff6a1f 35%, #f4b735 70%, #ffd774 100%);
    --flame-soft: linear-gradient(0deg, rgba(232,72,28,0.22) 0%, rgba(255,215,116,0) 70%);

    /* ── Brand coin colours. Semantically fixed — these are other projects'
       identities and are not ours to restyle. ── */
    --ltc:  #345d9d;
    --btc:  #f7931a;
    --doge: #c2a633;

    /* ── Type scale. Fluid via clamp so the display sizes carry the "big
       confident type" of the drop direction on a wide screen without
       overflowing a phone. Replaces 38 ad-hoc sizes. ── */
    --fs-2xs:  0.6875rem;
    --fs-xs:   0.75rem;
    --fs-sm:   0.875rem;
    --fs-base: 1rem;
    --fs-md:   1.125rem;
    --fs-lg:   clamp(1.25rem,  1.13rem + 0.55vw, 1.5rem);
    --fs-xl:   clamp(1.5rem,   1.24rem + 1.15vw, 2rem);
    --fs-2xl:  clamp(2rem,     1.55rem + 2.1vw,  3rem);
    --fs-3xl:  clamp(2.5rem,   1.6rem  + 4vw,    4.5rem);

    --lh-tight: 1.1;
    --lh-snug:  1.3;
    --lh-base:  1.6;

    --tracking-display: -0.02em;   /* large type needs negative tracking */
    --tracking-label:    0.12em;   /* small caps labels need positive */

    /* Display face. Anton has ONE weight — always pair it with font-weight 400.
       Ask for 700/900 and the browser synthesises a fake bold that smears at
       poster sizes, which is worse than not using it at all. */
    --font-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
    --font-serif:   Georgia, 'Times New Roman', Times, serif;

    --fw-normal: 400;
    --fw-medium: 500;
    --fw-bold:   700;
    --fw-black:  900;

    /* ── Spacing. 4px base, 11 steps, replacing 47. ── */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.5rem;
    --space-6:  2rem;
    --space-7:  2.5rem;
    --space-8:  3rem;
    --space-10: 4rem;
    --space-12: 6rem;
    --space-16: 8rem;

    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-pill: 999px;

    /* ── Motion. Every duration here is also honoured by the reduced-motion
       block further down, which zeroes them globally. ── */
    --dur-fast: 120ms;
    --dur-base: 220ms;
    --dur-slow: 420ms;
    --ease:     cubic-bezier(0.2, 0, 0, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* ── Semantic surfaces — LIGHT theme. ── */
    --surface-page:   var(--ink-100);
    --surface-1:      var(--white);
    --surface-2:      var(--ink-50);
    --surface-3:      var(--ink-100);
    --surface-sunken: var(--ink-100);
    --border:         var(--ink-100);
    --border-strong:  var(--ink-200);

    --text-1: var(--ink-900);
    --text-2: #4a3f52;          /* warm, to match the ash ramp — 9.73:1 on white */
    --text-3: #6b5f72;          /* 5.89:1 on white, 5.38:1 on cream */
    --text-on-accent: var(--accent-ink);   /* navy on gold — never white on gold */

    --focus-ring: var(--accent-deep);

    --shadow-1: 0 1px 2px rgba(9, 12, 18, 0.06), 0 1px 3px rgba(9, 12, 18, 0.10);
    --shadow-2: 0 4px 6px -1px rgba(9, 12, 18, 0.10), 0 2px 4px -1px rgba(9, 12, 18, 0.06);
    --shadow-3: 0 12px 24px -8px rgba(9, 12, 18, 0.18);
    --shadow-4: 0 25px 50px -12px rgba(9, 12, 18, 0.25);

    /* ── LEGACY ALIASES — do not delete until every page is migrated. ── */
    --bg-page:       var(--surface-page);
    --bg-window:     var(--surface-1);
    --text-main:     var(--text-1);
    --text-muted:    var(--text-3);
    --border-light:  var(--border);
    --blue-primary:  #1d4ed8;
    --cyan-primary:  var(--accent);
    --shadow-window: var(--shadow-4);
    --shadow-card:   var(--shadow-2);
}

.theme-dark {
    --surface-page:   var(--ink-950);
    --surface-1:      var(--ink-850);
    --surface-2:      var(--ink-800);
    --surface-3:      var(--ink-700);
    --surface-sunken: var(--ink-900);
    --border:         var(--ink-600);
    --border-strong:  var(--ink-500);

    --text-1: #f4f7fb;
    --text-2: var(--ink-200);
    --text-3: var(--ink-300);

    --focus-ring: var(--accent-bright);

    /* Shadow on a dark ground cannot be a darker grey — there is nothing darker
       to go to. It has to be near-opaque black plus a hairline top highlight,
       which is what actually reads as elevation here. The audit flagged the
       absence of these outright. */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.6);
    --shadow-2: 0 4px 10px -2px rgba(0, 0, 0, 0.65);
    --shadow-3: 0 16px 32px -12px rgba(0, 0, 0, 0.75);
    --shadow-4: 0 32px 64px -16px rgba(0, 0, 0, 0.85);

    --blue-primary: #3b82f6;
    --cyan-primary: var(--accent-bright);
}

.theme-dark .comic-card,
.theme-dark .video-archive-card,
.theme-dark .donate-card { background: var(--surface-1); }
/* .comic-page-canvas was read.php's only consumer and the reader now renders
   .reader-canvas instead, so that rule is gone rather than left as a dead
   selector nobody dares delete later. */

/* The audit caught this one: .product-img-wrap paints a white plate behind every
   product photo, which on the dark theme puts a glaring white rectangle behind
   box art that was rendered on black. */
.theme-dark .product-img-wrap { background: var(--surface-2); }

/* ─── Focus, motion, and the visually-hidden utility ──────────
   The audit found NO :focus-visible rule anywhere in the codebase and no
   visually-hidden class. The product Display radios are opacity:0, so a keyboard
   user picking between a $100 and a $140 option had no visible indication at all
   of where they were. This is the global floor; components may restyle it, but
   nothing is allowed to remove it. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ─── Base Reset ──────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, sans-serif; }
body { background-color: var(--bg-page); color: var(--text-main); min-height: 100vh; padding: 2rem; display: flex; justify-content: center; }
a { text-decoration: none; color: inherit; }

/* ─── App Window ──────────────────────────────────────────── */
.app-window {
    background: var(--bg-window);
    width: 100%; max-width: 1300px;
    border-radius: 12px;
    box-shadow: var(--shadow-window);
    overflow: hidden;
    display: flex; flex-direction: column;
}

/* ─── Header ──────────────────────────────────────────────── */
.app-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1.25rem 2.5rem;
    border-bottom: 1px solid var(--border-light);
    position: relative;
}

.logo { display: flex; align-items: center; gap: 10px; }
.logo-icon { width: 36px; height: 36px; border-radius: 50%; }
/* The Litecoin mark. Brand blue with a white Ł — it was a black disc here and a
   SILVER raster (avg srgb 46/48/51%) in the other variant, so neither was the
   Litecoin logo. nav.php's own docblock asked Phase 4 to pick one of the two;
   this is that decision, and it picks the correct-coloured one.

   Drawn in CSS rather than shipped as an image: crisp at any DPI, correct in
   both themes, and one less request on every page. The Ł is U+0141, which is
   exactly why the Inter latin-ext subset carries that codepoint — see the
   @font-face note at the top of this file. Do not narrow that range.

   White on #345d9d is 6.46:1; the disc itself is 3.00:1 on the ash ground and
   5.89:1 on cream, so it holds its shape in both themes without an outline. */
.logo-symbol {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--ltc); color: var(--white);
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 1.2rem; line-height: 1;
    flex: 0 0 auto;
}
/* No dark-mode inversion: the brand colour is the brand colour in both themes. */
.logo-text { font-size: 1.1rem; font-weight: 800; line-height: 1; letter-spacing: -0.5px; }

.app-nav { display: flex; gap: 2rem; font-size: 0.95rem; font-weight: 700; color: var(--text-main); }
.app-nav a:hover, .app-nav a.active { color: var(--blue-primary); }

.header-actions { display: flex; align-items: center; gap: 0.75rem; }

/* Hamburger — hidden on desktop */
.nav-toggle {
    display: none;
    background: none; border: none; cursor: pointer;
    font-size: 1.5rem; color: var(--text-main);
    padding: 4px 8px; border-radius: 6px;
    line-height: 1;
}
.nav-toggle:hover { background: var(--border-light); }

/* ─── Buttons ─────────────────────────────────────────────── */
.btn-primary {
    background: var(--blue-primary); color: white; padding: 8px 16px;
    border-radius: 6px; font-weight: 600; font-size: 0.9rem;
    transition: 0.2s; border: none; cursor: pointer;
}
.btn-primary:hover { opacity: 0.9; }

/* ─── Dashboard 2-Column Layout ──────────────────────────── */
.dashboard-layout {
    display: grid;
    grid-template-columns: 2.2fr 1fr;
    gap: 3rem;
    padding: 3rem 2.5rem;
}

/* ─── Comic Grid (Left Column) ────────────────────────────── */
.page-title { font-size: 2.5rem; font-weight: 900; letter-spacing: -1px; text-transform: uppercase; margin-bottom: 0.5rem; }
.page-subtitle { color: var(--text-muted); font-size: 1.1rem; margin-bottom: 2rem; }

.comic-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.comic-card {
    border: 1px solid var(--border-light); border-radius: 12px; padding: 0.75rem;
    transition: 0.2s; background: #ffffff;
    display: flex; flex-direction: column;
}
.comic-card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
/* fill remaining card height so the Read button can pin to the bottom and align across the row */
.comic-details { display: flex; flex-direction: column; flex: 1; }

.comic-cover {
    border-radius: 8px; overflow: hidden; aspect-ratio: 2 / 3; background: #0f172a;
    display: flex; align-items: center; justify-content: center; margin-bottom: 1rem;
}
.cover-placeholder { color: white; font-weight: 800; font-size: 1rem; text-align: center; }

.comic-card-title { font-size: 0.95rem; font-weight: 800; line-height: 1.2; margin-bottom: 0.2rem; }
.comic-creator { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.4rem; }

.btn-read {
    display: block; width: 100%; text-align: center;
    background: #06b6d4; color: white; border-radius: 4px; padding: 8px 0;
    font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
    min-height: 44px; margin-top: auto; display: flex; align-items: center; justify-content: center;
}
.btn-read:hover { background: #0891b2; }

/* ─── Sidebar (Right Column) ──────────────────────────────── */
.sidebar-title {
    font-size: 1.1rem; font-weight: 800; text-transform: uppercase;
    margin-bottom: 1.5rem; letter-spacing: -0.5px;
}
.sidebar-section { margin-bottom: 2.5rem; }

.view-all-link { display: block; font-size: 0.8rem; font-weight: 800; color: var(--blue-primary); margin-bottom: 3rem; text-transform: uppercase; }

/* ─── Donate Cards ────────────────────────────────────────── */
.donate-grid { display: flex; gap: 1rem; flex-wrap: wrap; }
.donate-card {
    flex: 1; min-width: 200px;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border: 1px solid #334155;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
    display: flex; flex-direction: column;
    color: #f8fafc;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative; overflow: hidden;
}
.donate-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100%;
    background: radial-gradient(circle at top right, rgba(6, 182, 212, 0.15), transparent 70%);
    pointer-events: none;
}
/* Per-coin glow. Keyed by class, not :last-child, so adding a card doesn't
   hand Bitcoin's orange wash to whatever ends up last in the row. */
.donate-card.is-btc::before {
    background: radial-gradient(circle at top right, rgba(247, 147, 26, 0.15), transparent 70%);
}
.donate-card.is-doge::before {
    background: radial-gradient(circle at top right, rgba(194, 166, 51, 0.18), transparent 70%);
}
.donate-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
    border-color: #475569;
}
.donate-header { display: flex; align-items: center; gap: 15px; margin-bottom: 1.25rem; z-index: 1; }
.donate-icon {
    width: 38px; height: 38px; border-radius: 50%; background: #06b6d4; color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.3rem;
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.4); flex-shrink: 0;
}
.donate-header-text { z-index: 1; }
.donate-header-text h4 { font-size: 1.1rem; font-weight: 900; line-height: 1.1; letter-spacing: 0.05em; color: #fff; }
.donate-header-text span { font-size: 0.8rem; color: #94a3b8; font-weight: 600; text-transform: uppercase; }

.donate-desc { padding: 0 0 1rem; font-size: 0.85rem; color: #94a3b8; line-height: 1.5; z-index: 1; }
.donate-inputs { z-index: 1; }

.btn-donate {
    border: none; border-radius: 8px; padding: 14px 0;
    font-weight: 800; font-size: 0.95rem; cursor: pointer;
    color: white; display: block; width: 100%;
    transition: all 0.2s; z-index: 1;
    min-height: 44px;
}
.cyan-btn { background: #06b6d4; }
.cyan-btn:hover { background: #0891b2; }
.blue-btn { background: var(--blue-primary); }
.blue-btn:hover { background: #1e3a8a; }
.gold-btn { background: #c2a633; }
.gold-btn:hover { background: #a8912c; }

/* ─── Video Archive (videos.php) ──────────────────────────── */
.archive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 30px;
}

.video-archive-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.video-date-label {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 100%;
    text-align: left;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 8px;
}

/* Year pagination. Gold fill carrying navy text for the selected chip — 10.19:1.
   The pairing that fails is white-on-gold (1.77:1), which is why --text-on-accent
   resolves to navy and is used here rather than a literal. */
.archive-years {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-5);
}
.archive-years-foot { margin-top: var(--space-8); justify-content: center; }

.archive-year {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-strong);
    background: var(--surface-1);
    color: var(--text-2);
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
}
.archive-year:hover { border-color: var(--accent); color: var(--accent-deep); }
.archive-year.is-current {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-on-accent);
}
.archive-year-count {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    opacity: 0.75;
}
/* Full opacity on the selected chip only — at 0.75 the badge loses too much
   contrast against the gold fill, and it is 12px text. */
.archive-year.is-current .archive-year-count { opacity: 1; }

.archive-year-heading {
    margin-top: var(--space-6);
    font-size: var(--fs-sm);
    font-weight: var(--fw-black);
    color: var(--accent-deep);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
}

/* Pre-hydration state. The card shows a dated link until shared.js promotes it,
   and reserves roughly an embed's height so swapping in the iframe does not
   shove the rest of the grid down. */
.video-archive-card blockquote.twitter-tweet-pending {
    width: 100%;
    min-height: 380px;
    display: grid;
    place-items: center;
    margin: 0;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--text-3);
}

.theme-dark .archive-year {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text-2);
}
.theme-dark .archive-year:hover { border-color: var(--accent-bright); color: var(--accent-bright); }
.theme-dark .archive-year.is-current {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-on-accent);
}
.theme-dark .archive-year-heading { color: var(--accent-bright); }
.theme-dark .video-archive-card blockquote.twitter-tweet-pending {
    background: var(--surface-sunken);
    border-color: var(--border);
    color: var(--text-3);
}


/* ─── Store (store.php) ───────────────────────────────────── */
.store-notice {
    display: flex; align-items: center; gap: 0.75rem;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #f8fafc;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin: 0 0 2.5rem;
    font-size: 0.9rem; font-weight: 600; line-height: 1.5;
    box-shadow: var(--shadow-card);
}
.store-notice .store-notice-icon {
    flex-shrink: 0;
    width: 34px; height: 34px; border-radius: 8px;
    background: #06b6d4; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; font-weight: 900;
}
.store-notice strong { color: #fff; }

.store-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.product-card {
    border: 1px solid var(--border-light); border-radius: 14px;
    background: var(--bg-window);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
}
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }

.product-img-wrap {
    position: relative;
    aspect-ratio: 3 / 4;
    background: radial-gradient(circle at 50% 35%, #ffffff 0%, #e2e5ea 100%);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.product-img-wrap img { width: 100%; height: 100%; object-fit: contain; display: block; }

.product-badge {
    position: absolute; top: 10px; left: 10px;
    background: rgba(15, 23, 42, 0.9); color: #fff;
    font-size: 0.7rem; font-weight: 900; letter-spacing: 0.05em;
    padding: 5px 9px; border-radius: 6px;
    text-transform: uppercase;
}
.product-tag {
    position: absolute; top: 10px; right: 10px;
    background: #06b6d4; color: #fff;
    font-size: 0.65rem; font-weight: 800; letter-spacing: 0.05em;
    padding: 5px 9px; border-radius: 999px;
    text-transform: uppercase;
}

.product-info { padding: 1rem 1rem 1.1rem; display: flex; flex-direction: column; flex: 1; }
.product-name { font-size: 1rem; font-weight: 900; line-height: 1.2; margin-bottom: 0.15rem; }
.product-sub { font-size: 0.75rem; font-weight: 700; color: var(--cyan-primary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.5rem; }
.product-desc { font-size: 0.82rem; color: var(--text-muted); line-height: 1.45; margin-bottom: 1rem; flex: 1; }
.product-price { font-size: 0.95rem; font-weight: 800; color: var(--text-main); margin-bottom: 0.75rem; }
.product-price span { color: var(--text-muted); font-weight: 600; font-size: 0.8rem; }

.btn-comingsoon {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 44px;
    border: none; border-radius: 8px;
    background: var(--border-light); color: var(--text-muted);
    font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
    cursor: not-allowed;
}

/* Store category sections (Print Editions / Figurines / Soap) */
.store-category { margin-top: 2.75rem; }
.store-cat-title { font-size: 1.3rem; font-weight: 900; letter-spacing: -0.5px; margin-bottom: 0.2rem; }
.store-cat-sub { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.25rem; }

/* ── Store landing hero banner ── */
.store-hero {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border: 1px solid #334155; border-radius: 18px;
    padding: 2.75rem 2.25rem; color: #f8fafc;
    box-shadow: var(--shadow-card); margin-bottom: 2rem;
}
.store-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 85% 15%, rgba(6,182,212,0.22), transparent 55%);
}
.store-hero-badge {
    width: 50px; height: 50px; border-radius: 12px; background: #06b6d4; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem; font-weight: 900; margin-bottom: 1.1rem;
    box-shadow: 0 0 18px rgba(6,182,212,0.45); position: relative;
}
.store-hero h1 { font-size: 2.3rem; font-weight: 900; letter-spacing: -1px; margin-bottom: 0.4rem; position: relative; }
.store-hero p { color: #94a3b8; font-size: 1.02rem; max-width: 580px; position: relative; }
.store-hero .hero-note { margin-top: 1.1rem; font-size: 0.82rem; font-weight: 700; color: #cbd5e1; }

/* ── Category tiles (clickable) ── */
.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.category-tile {
    position: relative; overflow: hidden; border-radius: 16px;
    aspect-ratio: 4 / 3; background: #0f172a; color: #fff; display: block;
    box-shadow: var(--shadow-card); transition: transform 0.2s, box-shadow 0.2s;
}
.category-tile:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.4); }
.category-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cat-noart { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 4rem; background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); }
.cat-overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
    padding: 1.25rem;
    background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0.05) 100%);
}
.cat-label { font-size: 1.2rem; font-weight: 900; letter-spacing: -0.3px; }
.cat-count { font-size: 0.8rem; font-weight: 700; color: #cbd5e1; margin-top: 0.1rem; }
.cat-cta { margin-top: 0.55rem; font-size: 0.74rem; font-weight: 800; color: var(--cyan-primary); text-transform: uppercase; letter-spacing: 0.05em; }

/* ── Back link on category pages ── */
.store-back { display: inline-block; margin-bottom: 1rem; font-size: 0.85rem; font-weight: 800; color: var(--text-muted); }
.store-back:hover { color: var(--blue-primary); }

/* ── Category page: share control sits under the title block ── */
.cat-share { margin: 0.2rem 0 1.6rem; }

/* ── Share button + popover in the product action row ── */
.share-wrap { position: relative; display: inline-block; }
.btn-share {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 16px;
    border: 1px solid rgba(128, 128, 128, 0.38); border-radius: 10px;
    background: transparent; color: var(--text-muted);
    font-family: inherit; font-size: 0.85rem; font-weight: 800; letter-spacing: 0.02em;
    cursor: pointer; white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}
.btn-share:hover,
.share-wrap.is-open .btn-share { color: var(--blue-primary); border-color: var(--blue-primary); }

.share-pop {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 40;
    display: flex; flex-direction: column; min-width: 172px; padding: 6px;
    border: 1px solid var(--border-soft, rgba(128, 128, 128, 0.28)); border-radius: 12px;
    background: var(--bg-window, #fff);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}
.share-pop[hidden] { display: none; }

.share-item {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 11px; border: 0; border-radius: 8px;
    background: transparent; color: var(--text-main); text-align: left;
    font-family: inherit; font-size: 0.83rem; font-weight: 700; white-space: nowrap;
    cursor: pointer; text-decoration: none;
    transition: background 0.12s, color 0.12s;
}
.share-item b { font-size: 0.95rem; line-height: 1; width: 1.15em; text-align: center; }
.share-item:hover { background: rgba(128, 128, 128, 0.13); color: var(--blue-primary); }
.share-item.copied { color: var(--cyan-primary); }

/* On narrow screens the product action row can push Share near the right edge,
   so its popover opens leftward. The category share sits at the page's left
   margin and keeps the default alignment. */
@media (max-width: 768px) {
    .detail-actions .share-pop { left: auto; right: 0; }
}

@media (max-width: 768px) {
    .category-grid { grid-template-columns: 1fr; }
    .store-hero { padding: 2rem 1.5rem; }
    .store-hero h1 { font-size: 1.7rem; }
}

/* Print editions use the comic cover at a 2:3 portrait crop */
.product-img-wrap.is-cover { aspect-ratio: 2 / 3; background: #0f172a; }
.product-img-wrap.is-cover img { object-fit: cover; }

/* Figurine boxes are 2:3 — match the frame so the whole box shows, no bars */
.product-img-wrap.is-box { aspect-ratio: 2 / 3; }

/* Figurines community selector — compact image-forward coin cards */
.community-cards { display: flex; flex-wrap: wrap; gap: 0.85rem; margin: 0 0 1.75rem; }
.community-card {
    position: relative; overflow: hidden; border-radius: 12px;
    width: 130px; flex: 0 0 auto; aspect-ratio: 1 / 1; background: #0f172a; cursor: pointer; display: block; padding: 0;
    border: 2px solid transparent; box-shadow: var(--shadow-card);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.community-card:hover { transform: translateY(-3px); box-shadow: 0 14px 20px -6px rgba(0,0,0,0.4); }
.community-card.active { border-color: var(--cyan-primary); box-shadow: 0 0 0 3px var(--cyan-primary); }
.community-card > img, .community-card > .cc-glyph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.community-card > .cc-glyph { display: flex; align-items: center; justify-content: center; font-size: 2.2rem; color: #fff; background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); }
.cc-overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
    padding: 0.55rem; text-align: left;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.25) 50%, transparent 75%);
}
.cc-name { font-size: 0.82rem; font-weight: 900; color: #fff; letter-spacing: -0.2px; line-height: 1.1; }
.cc-count { font-size: 0.6rem; font-weight: 800; color: var(--cyan-primary); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 0.1rem; }
.community-empty { color: var(--text-muted); font-size: 0.95rem; padding: 2.5rem 0; text-align: center; }

/* Figurine sub-filters: Genre + Collection chip rows */
.facet-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0 0 0.55rem; }
.facet-row:last-of-type { margin-bottom: 1.25rem; }
.facet-label { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); min-width: 74px; }
.genre-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.genre-chip { padding: 0.35rem 0.85rem; border-radius: 999px; border: 1px solid var(--border-light); background: var(--bg-window); font-size: 0.78rem; font-weight: 800; color: var(--text-muted); cursor: pointer; transition: all 0.15s; }
.genre-chip:hover { border-color: var(--cyan-primary); color: var(--text-main); }
.genre-chip.active { background: var(--cyan-primary); color: #fff; border-color: var(--cyan-primary); }

/* Soap placeholders (no product art yet) */
.product-placeholder {
    position: relative;
    aspect-ratio: 3 / 4;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem;
}

.product-readlink {
    display: inline-block; margin-top: 0.6rem;
    font-size: 0.72rem; font-weight: 800; color: var(--cyan-primary);
    text-transform: uppercase; letter-spacing: 0.03em;
}

/* Cards link through to the product detail page */
.product-media-link { display: block; }
.product-name-link { display: inline-block; color: inherit; }
.product-name-link:hover .product-name { color: var(--blue-primary); }

/* ── Product detail page ── */
.product-detail { display: grid; grid-template-columns: 380px 1fr; gap: 2.5rem; align-items: start; margin-top: 0.5rem; }
.detail-media { width: 100%; }
.detail-info h1 { font-size: 1.9rem; font-weight: 900; letter-spacing: -0.5px; margin-bottom: 0.2rem; }
.detail-sub { font-size: 0.9rem; font-weight: 800; color: var(--cyan-primary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 1rem; }
.detail-desc { color: var(--text-muted); line-height: 1.6; margin-bottom: 1.25rem; }
.detail-meta { list-style: none; margin: 0 0 1.5rem; padding: 0; border-top: 1px solid var(--border-light); }
.detail-meta li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border-light); font-size: 0.88rem; }
.detail-meta li .k { color: var(--text-muted); font-weight: 700; }
.detail-meta li .v { font-weight: 700; text-align: right; }
.detail-price { font-size: 1.4rem; font-weight: 900; margin-bottom: 0.75rem; }
.detail-price span { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); }
.detail-actions { max-width: 320px; }
.detail-note { font-size: 0.8rem; color: var(--text-muted); margin-top: 1rem; line-height: 1.5; }

/* Detail image gallery (render + any real product photos) */
.detail-main { border-radius: 12px; overflow: hidden; background: #f3f4f6; box-shadow: var(--shadow-card); }
.theme-dark .detail-main { background: #0f172a; }
.detail-main img { display: block; width: 100%; height: auto; }
.detail-main .product-placeholder { aspect-ratio: 3 / 4; }
.detail-thumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.detail-thumb { width: 64px; height: 64px; padding: 0; border: 2px solid var(--border-light); border-radius: 8px; overflow: hidden; cursor: pointer; background: #f3f4f6; }
.detail-thumb:hover { border-color: var(--cyan-primary); }
.detail-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 768px) {
    .product-detail { grid-template-columns: 1fr; gap: 1.5rem; }
    .detail-media { max-width: 320px; }
}

@media (max-width: 1024px) { .store-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .store-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }
@media (max-width: 480px)  { .store-grid { grid-template-columns: 1fr; } }

/* ─── Footer ──────────────────────────────────────────────── */
.app-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1.5rem 2.5rem; border-top: 1px solid var(--border-light);
    font-size: 0.75rem; font-weight: 600; color: var(--text-muted);
}
.footer-left a { margin-left: 10px; }
.footer-socials { display: flex; gap: 15px; font-weight: 800; color: var(--text-main); font-size: 1rem; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — TABLET (≤1024px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .dashboard-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem 1.5rem;
    }
    .donate-grid { flex-direction: row; }
    .comic-grid { grid-template-columns: repeat(3, 1fr); }
    .archive-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤768px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Full-bleed on mobile — no padding, no rounded window */
    body { padding: 0; }
    .app-window { border-radius: 0; max-width: 100%; }

    /* Header: logo row + hamburger, nav collapses below */
    .app-header {
        flex-wrap: wrap;
        padding: 1rem 1.25rem;
        gap: 0;
    }
    .logo { flex: 1; }
    .header-actions { order: 2; }
    .nav-toggle { display: flex; order: 3; margin-left: 0.5rem; }

    /* Nav collapses by default, opens with .nav-open */
    .app-nav {
        display: none;
        width: 100%;
        order: 4;
        flex-direction: column;
        gap: 0;
        border-top: 1px solid var(--border-light);
        padding: 0.5rem 0;
        margin-top: 0.75rem;
    }
    .app-nav.nav-open { display: flex; }
    .app-nav a {
        padding: 0.85rem 0;
        font-size: 1rem;
        border-bottom: 1px solid var(--border-light);
        min-height: 44px;
        display: flex; align-items: center;
    }
    .app-nav a:last-child { border-bottom: none; }

    /* Dashboard */
    .dashboard-layout { padding: 1.5rem 1rem; gap: 1.5rem; }
    .page-title { font-size: 1.75rem; }
    .page-subtitle { font-size: 0.95rem; }

    /* Comics grid */
    .comic-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }

    /* Donate cards */
    .donate-grid { flex-direction: column; }
    .donate-card { min-width: unset; }

    /* Archive grid */
    .archive-grid { grid-template-columns: 1fr; gap: 20px; }

    /* Footer */
    .app-footer {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
        padding: 1.25rem 1rem;
    }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE (≤480px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .comic-grid { grid-template-columns: 1fr; }
    .dashboard-layout { padding: 1rem; }
}

/* ═══════════════════════════════════════════════════════════
   STORE CHECKOUT — buy buttons, box selector, soap 4-pack kit
   ═══════════════════════════════════════════════════════════ */
.preview-banner, .checkout-success {
    display: flex; align-items: center; gap: 0.7rem;
    border-radius: 10px; padding: 0.85rem 1.1rem; margin-bottom: 1.5rem;
    font-size: 0.9rem; line-height: 1.45;
}
.preview-banner { background: rgba(6,182,212,0.12); border: 1px solid var(--cyan-primary); color: var(--text-main); }
.checkout-success { background: rgba(22,163,74,0.12); border: 1px solid #16a34a; color: var(--text-main); }
.checkout-success .cs-icon {
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
    background: #16a34a; color: #fff; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
}

/* Primary buy CTA */
.btn-buy {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 46px; border: none; border-radius: 8px;
    background: var(--cyan-primary); color: #fff;
    font-size: 0.85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
    cursor: pointer; text-decoration: none; transition: filter 0.15s, opacity 0.15s;
}
.btn-buy:hover { filter: brightness(1.08); }
.btn-buy.is-disabled { background: var(--border-light); color: var(--text-muted); cursor: not-allowed; pointer-events: auto; }

/* Figurine box / no-box selector */
.buy-box { margin-bottom: 0.5rem; }
.opt-label { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 0.5rem; }
.opt-pills { display: flex; gap: 0.6rem; margin-bottom: 1rem; }
.opt-pill {
    flex: 1; display: flex; flex-direction: column; gap: 0.15rem;
    border: 2px solid var(--border-light); border-radius: 10px; padding: 0.7rem 0.85rem;
    cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.opt-pill:hover { border-color: var(--cyan-primary); }
.opt-pill.active { border-color: var(--cyan-primary); background: rgba(6,182,212,0.08); }
.opt-pill input { position: absolute; opacity: 0; pointer-events: none; }
.opt-title { font-size: 0.85rem; font-weight: 800; color: var(--text-main); }
.opt-title em { font-style: normal; color: var(--cyan-primary); font-size: 0.72rem; }
.opt-price { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); }
.opt-hint { font-size: 0.76rem; color: var(--text-muted); margin-top: 0.6rem; line-height: 1.45; }
.price-unit { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); }

/* Soap mix-&-match 4-pack kit */
.soap-kit { border: 1px solid var(--border-light); border-radius: 14px; padding: 1.5rem; background: var(--bg-window); }
.soap-kit-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.soap-kit-title { font-size: 1.35rem; font-weight: 900; letter-spacing: -0.5px; margin: 0; }
.soap-kit-sub { color: var(--text-muted); font-size: 0.9rem; margin: 0.2rem 0 0; }
.soap-kit-price { font-size: 1.5rem; font-weight: 900; color: var(--text-main); white-space: nowrap; }
.soap-kit-price span { display: block; font-size: 0.72rem; font-weight: 700; color: var(--text-muted); text-align: right; }
.soap-ship-banner { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 1.25rem; padding: 0.65rem 0.9rem; border-radius: 10px; background: rgba(6,182,212,0.12); border: 1px solid var(--cyan-primary); color: var(--text-main); font-size: 0.88rem; line-height: 1.4; }
.soap-ship-banner strong { font-weight: 800; }
.ship-note { font-size: 0.82rem; font-weight: 700; color: var(--cyan-primary); background: rgba(6,182,212,0.10); border: 1px solid rgba(6,182,212,0.30); border-radius: 9px; padding: 0.55rem 0.8rem; margin: 0.9rem 0 0; }
.card-ship { font-size: 0.72rem; font-weight: 800; color: var(--cyan-primary); margin: 0.1rem 0 0.6rem; }
.soap-scents { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.6rem; }
.scent {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    border: 1px solid var(--border-light); border-radius: 10px; padding: 0.7rem 0.9rem;
    transition: border-color 0.15s, background 0.15s;
}
.scent.picked { border-color: var(--cyan-primary); background: rgba(6,182,212,0.07); }
.scent-detail-link { display: flex; align-items: center; gap: 0.7rem; min-width: 0; color: inherit; text-decoration: none; }
.scent-detail-link:hover .scent-name { color: var(--cyan-primary); }
.scent-img { width: 50px; height: 50px; border-radius: 8px; object-fit: cover; background: #f3f4f6; flex: 0 0 auto; }
.scent-placeholder { display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.scent-info { display: block; min-width: 0; }
.scent-name { display: block; font-size: 0.92rem; font-weight: 800; color: var(--text-main); }
.scent-sub { display: block; font-size: 0.74rem; color: var(--text-muted); margin-top: 0.1rem; }
.scent-qty { display: flex; align-items: center; gap: 0.6rem; flex: 0 0 auto; }
.qbtn {
    width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border-light);
    background: var(--bg-main, transparent); color: var(--text-main);
    font-size: 1.1rem; font-weight: 800; line-height: 1; cursor: pointer;
}
.qbtn:hover:not(:disabled) { border-color: var(--cyan-primary); color: var(--cyan-primary); }
.qbtn:disabled { opacity: 0.35; cursor: not-allowed; }
.qval { min-width: 16px; text-align: center; font-weight: 800; font-size: 0.95rem; }
.soap-kit-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap; }
.soap-kit-count { font-size: 0.85rem; font-weight: 800; color: var(--text-muted); }
.soap-kit-foot .btn-buy, .soap-kit-foot .btn-comingsoon { width: auto; min-width: 200px; padding: 0 1.5rem; }

/* Pay-with-crypto (BTCPay) button */
.crypto-form { margin: 0; }
.detail-actions { display: flex; flex-direction: column; gap: 0.6rem; max-width: 340px; }
.detail-actions .btn-buy, .detail-actions .crypto-form, .detail-actions .crypto-form .btn-crypto { width: 100%; }
.btn-crypto {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 46px; border: 1px solid var(--border-light); border-radius: 8px;
    background: #1b2330; color: #fff;
    font-size: 0.82rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
    cursor: pointer; transition: filter 0.15s;
}
.btn-crypto:hover { filter: brightness(1.25); }
.btn-crypto.is-disabled, .btn-crypto:disabled { background: var(--border-light); color: var(--text-muted); cursor: not-allowed; }
.soap-kit-foot .crypto-form { display: inline; }
.soap-kit-foot .btn-crypto { width: auto; min-width: 160px; padding: 0 1.25rem; }

/* ═══════════════════════════════════════════════════════════
   THE PHOENIX
   ═══════════════════════════════════════════════════════════
   A stylised bird fixed behind the page that rises as you scroll — the site's
   motif, made literal. Markup in partials/phoenix.php.

   BLUE on purpose. The accent system is ash-and-ember, but the bird is Litecoin
   blue: it reads as this project's phoenix rather than a stock flame, and it
   keeps the one moving thing on the page from competing with the gold CTAs.

   OPACITY IS A CONTRAST BUDGET, not a taste setting. It sits behind body text,
   so it was measured rather than eyeballed. Worst case is the brightest stop
   under the smallest text:
     dark  — at 0.26 white is 12.5:1 and muted #b9aab5 is 5.6:1. Headroom to spare.
     light — at 0.14 muted #6b5f72 falls to 4.41:1, which FAILS AA. Capped at
             0.10 (4.67:1). Do not raise the light values.

   .app-window gets `isolation: isolate` so the bird can sit at z-index -1:
   above the window's own background, below every piece of content. Without a
   stacking context there it would paint behind the window entirely and be
   invisible. Nothing inside needs to escape — the highest z-index in the
   component CSS is 60, and the skip-link is a sibling outside it. */

.app-window { position: relative; isolation: isolate; }

:root {
    /* The deep stop was #12233d, which composited to within 1.05:1 of the ash
       ground — the tail was mathematically present and visually absent. Lifted
       until the darkest part of the bird actually separates from the page. */
    /* An iridescent ramp, not a flat fill — the bird is meant to shimmer rather
       than read as a cut-out. Indigo at the tail through violet and Litecoin
       blue into teal and ice at the crown, so light appears to travel up it.
       --phoenix-glint is the travelling highlight and it is the CONTRAST LIMIT:
       #9fd0ff at 0.28 leaves muted body text at 4.68:1, and anything brighter
       or any higher opacity fails AA. Do not lighten it. */
    --phoenix-deep:   #1b2f6b;
    --phoenix-mid:    #345d9d;   /* Litecoin blue */
    --phoenix-bright: #7fb6f0;
    --phoenix-min: 0.05;
    --phoenix-max: 0.10;         /* light theme ceiling — see the note above */
}
.theme-dark {
    /* 0.32 is the measured ceiling, not a guess: above it the brightest stop
       under muted #b9aab5 drops below 4.5:1 (0.34 gives 4.48). Held at 0.30. */
    /* These were the ceiling for a bird sitting UNDER body text. It is no longer
       under body text — see the placement note below — so the limit that
       actually binds is different, and the old values made it invisible: 0.25
       opacity behind an 80% band means 5% of the bird reaches the eye. */
    --phoenix-min: 0.42;
    --phoenix-max: 0.72;
}

/* The bird is now a RENDERED ILLUSTRATION, not a masked silhouette.
   assets/phoenix-blue-rising.png was generated through the litecoin-image-gen
   pipeline and shipped here as WebP derivatives: 700w for 1x, 1240w for 2x,
   50 KB and 93 KB against a 5.2 MB source.

   It is painted on PURE BLACK and composited with mix-blend-mode: screen, which
   is why there is no alpha channel and none is needed — screen maps black to
   "no change", so the ground drops out on its own and only the glowing plumage
   lights the page. That also means the file never needed keying, and no soft
   matte edge can leave a halo.

   Consequence worth knowing: screen only disappears the black on a DARK ground.
   On the light theme it would wash out, so the light theme dims it hard below. */
.phoenix-bg { display: none; }

@supports (mix-blend-mode: screen) {
.phoenix-bg {
    display: block;
    position: fixed;
    /* Centred, at the owner's request. That does put it behind the left-aligned
       headline and lede, so the opacity is no longer buying its freedom from the
       text — it is measured against it instead. See the sampled figures in the
       token block above. */
    left: 50%;
    bottom: -30vh;   /* dropped: the head was clipping the top of the viewport at rest */
    width: min(62vw, 560px);
    aspect-ratio: 1240 / 2222;
    z-index: -1;
    pointer-events: none;
    background-image: image-set(url("assets/phoenix-700.webp") 1x,
                                url("assets/phoenix-1240.webp") 2x);
    background-image: -webkit-image-set(url("assets/phoenix-700.webp") 1x,
                                        url("assets/phoenix-1240.webp") 2x);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    mix-blend-mode: screen;
    /* --rise is 0 at the top of the page and 1 at the bottom; shared.js sets it.
       The bird climbs and brightens together, so the ascent reads as gaining
       height rather than just sliding. */
    transform: translate3d(-50%, calc(var(--rise, 0) * -70vh), 0);
    opacity: calc(var(--phoenix-min) + (var(--phoenix-max) - var(--phoenix-min)) * var(--rise, 0));
    will-change: transform;
}
}

/* Narrow screens: text reflows to full width, so the bird IS under it again.
   Recentre and dim. */
@media (max-width: 1100px) {
    .phoenix-bg {
        left: 50%;
        --phoenix-min: 0.16;
        --phoenix-max: 0.24;
    }
}

/* Light theme: screen against a cream page lifts nothing and only fogs it, so
   the bird is held right down rather than pretending it works there. */
:root:not(.theme-dark) .phoenix-bg { opacity: 0.10; }

/* No scroll listener runs under reduced motion (shared.js bails), so pin the
   bird mid-climb rather than leaving it parked at the bottom. */
@media (prefers-reduced-motion: reduce) {
    .phoenix-bg {
        transform: translate3d(-50%, -32vh, 0);
        opacity: calc((var(--phoenix-min) + var(--phoenix-max)) / 2);
    }
}


/* ─── The auction nav item ────────────────────────────────────
   Lives here rather than in css/home.css because the nav is on every page and
   read.php, videos.php and store.php do not load the home stylesheet — putting
   it there would give the same nav item a dot on four pages and none on the
   other five.

   The dot is decoration and is aria-hidden; the meaning is carried by the
   visually-hidden " (live now)" beside it, so a screen reader hears "Auction
   (live now)" rather than being told about a coloured circle. */
.app-nav a.is-auction {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.nav-live {
    width: 7px; height: 7px;
    border-radius: 999px;
    background: var(--ember-400);
    flex: none;
    animation: nav-live-pulse 2s ease-out infinite;
}

@keyframes nav-live-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ember-400) 60%, transparent); }
    70%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--ember-400) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ember-400) 0%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
    .nav-live { animation: none; }
}