/* ==========================================================================
   site.css — Castalore.com base design system
   ==========================================================================
   Dark lab aesthetic: #0a0a0f background, electric blue #3b82f6 accent,
   warning red #ef4444 for break states. Mobile-first, accessible.
   ========================================================================== */

/* ---- CSS reset + base ----------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg-primary: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-tertiary: #1a1a28;
    --text-primary: #e8e8f0;
    --text-secondary: #a8a8c0; /* ~8:1 on --bg-primary */
    --text-muted: #8b8ba3;     /* was #606070 (~3:1, unreadable on a phone in daylight) */
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --danger: #ef4444;
    --danger-glow: rgba(239, 68, 68, 0.3);
    --border: #2a2a3a;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-serif: Georgia, "Times New Roman", Times, serif;
    --font-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", Menlo, Consolas, monospace;
    --radius: 6px;
    --max-w: 960px;
    --gutter: 1.25rem;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
}

img { max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Typography ----------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--font-serif); line-height: 1.3; font-weight: 400; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1rem; }
p { margin-bottom: 1rem; }
.text-muted { color: var(--text-muted); }

code, .mono { font-family: var(--font-mono); font-size: 0.9em; }

.break-callout {
    background: rgba(239, 68, 68, 0.08);
    border-left: 4px solid var(--danger);
    padding: 1rem 1.25rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin: 1.5rem 0;
    font-weight: 600;
    color: var(--danger);
}

/* ---- Layout --------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.sr-only {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- Site header ---------------------------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(10, 10, 15, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
}

.site-header .container {
    display: flex; align-items: center;
    justify-content: space-between;
    min-height: 56px;
}

.logo { font-family: var(--font-serif); font-size: 1.25rem; color: var(--text-primary); }
.logo:hover { text-decoration: none; color: var(--accent); }

.site-header nav { display: flex; gap: 1rem; }
.site-header nav a {
    color: var(--text-secondary); font-size: 0.875rem;
    padding: 0.25rem 0.5rem; border-radius: var(--radius);
    transition: color 0.15s, background 0.15s;
}
.site-header nav a:hover {
    color: var(--text-primary); background: var(--bg-tertiary); text-decoration: none;
}

/* ---- Hero ----------------------------------------------------------- */
.hero {
    position: relative;
    min-height: 70vh;
    display: flex; align-items: center;
    overflow: hidden;
}

.hero-canvas {
    position: absolute; inset: 0;
    z-index: 0;
}

.hero-text {
    position: relative; z-index: 1;
    max-width: 640px;
}

.hero-text h1 { margin-bottom: 0.75rem; }
.hero-text p { color: var(--text-secondary); font-size: 1.125rem; }

/* ---- Email capture -------------------------------------------------- */
.email-capture {
    display: flex; gap: 0.5rem; margin-top: 1.5rem;
    flex-wrap: wrap;
}

.email-capture input[type="email"] {
    flex: 1 1 240px; min-width: 200px;
    padding: 0.625rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 0.9375rem;
    outline: none; transition: border-color 0.15s;
}

.email-capture input[type="email"]:focus {
    border-color: var(--accent);
}

.btn {
    display: inline-flex; align-items: center;
    padding: 0.625rem 1.25rem;
    background: var(--accent); color: #fff;
    border: none; border-radius: var(--radius);
    font-size: 0.9375rem; font-family: var(--font-sans);
    cursor: pointer; transition: background 0.15s;
    white-space: nowrap;
}

.btn:hover { background: var(--accent-hover); }

.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #dc2626; }

/* ---- Mechanism grid ------------------------------------------------- */
.mechanism-grid {
    padding-top: 3rem; padding-bottom: 3rem;
}

/* ---- Footer --------------------------------------------------------- */
.site-footer {
    border-top: 1px solid var(--border);
    padding: 1.5rem 0;
    color: var(--text-muted);
    font-size: 0.8125rem;
    text-align: center;
}

/* ---- Mechanism page (Phase 3 details) ------------------------------- */
.m-canvas {
    width: 100%; height: 70vh; min-height: 400px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    position: relative; overflow: hidden;
}

.m-controls {
    display: flex; gap: 0.75rem; flex-wrap: wrap;
    padding: 1rem 0;
}

.m-controls label { font-size: 0.8125rem; color: var(--text-secondary); display: flex; align-items: center; gap: 0.5rem; }

.m-controls input[type="range"] {
    width: 120px;
    accent-color: var(--accent);
}

.m-controls button {
    padding: 0.4rem 0.75rem;
    background: var(--bg-tertiary); color: var(--text-primary);
    border: 1px solid var(--border); border-radius: var(--radius);
    cursor: pointer; font-size: 0.8125rem;
    transition: background 0.15s;
}

.m-controls button:hover { background: var(--border); }

/* ---- Archive page --------------------------------------------------- */
.archive-filters { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.archive-filters a {
    padding: 0.35rem 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: 0.8125rem;
}
.archive-filters a.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.archive-filters a:hover { text-decoration: none; background: var(--bg-tertiary); }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    transition: border-color 0.15s;
}

.card:hover { border-color: var(--accent); }
.card h3 { margin-bottom: 0.25rem; }
.card .topic { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }

/* ---- Auth pages ----------------------------------------------------- */
.auth-form { max-width: 400px; margin: 3rem auto; }
.auth-form h1 { margin-bottom: 1.5rem; }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: 0.8125rem; color: var(--text-secondary); margin-bottom: 0.25rem; }
.form-group input { width: 100%; padding: 0.5rem 0.75rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); }
.form-group input:focus { border-color: var(--accent); outline: none; }
.form-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; }

/* ---- Alerts / flash messages ---------------------------------------- */
.alert { padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: 0.875rem; }
.alert-error { background: rgba(239, 68, 68, 0.12); color: var(--danger); border: 1px solid rgba(239, 68, 68, 0.2); }
.alert-success { background: rgba(34, 197, 94, 0.12); color: #22c55e; border: 1px solid rgba(34, 197, 94, 0.2); }

/* ---- Responsive ----------------------------------------------------- */
@media (max-width: 640px) {
    :root { --gutter: 1rem; }
    .site-header nav a { font-size: 0.8125rem; }
    .email-capture input[type="email"] { flex: 1 1 100%; }
    .email-capture .btn { width: 100%; justify-content: center; }
    .card-grid { grid-template-columns: 1fr; }
}

/* ---- Reduced motion ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    .hero-canvas { display: none; }
    .hero { background: var(--bg-secondary); }
    /* The old rule here pointed at /assets/images/hero-fallback.jpg, which
       does not exist and used a root-absolute path that breaks under the
       XAMPP subfolder. The poster frame replaces it in Slice 3. */
}

/* ------------------------------------------------------------------
   Phase 3 — Public Site additions
   ------------------------------------------------------------------ */

/* Hero overlay wraps the text so it reads cleanly over the 3D canvas */
.hero-overlay {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 0 var(--gutter);
}
.hero { position: relative; min-height: 70vh; display: flex; align-items: center; }

/* Countdown */
.countdown-timer {
    font-family: var(--font-mono);
    color: var(--accent);
    font-size: 1.5rem;
    margin: 1.25rem 0;
    letter-spacing: 0.03em;
}

/* Section block */
.section { padding-top: 2.5rem; padding-bottom: 3rem; }
.section-title { margin-bottom: 1.5rem; }
.section-muted { background: var(--bg-secondary); border-top: 1px solid var(--border); }

/* Restored .email-capture-block (partial uses it) */
.email-capture-block { max-width: 520px; margin: 0 auto; text-align: left; }
.email-capture-heading { margin-bottom: 0.5rem; }

/* Card claim text */
.card-claim { color: var(--text-secondary); font-size: 0.9375rem; flex-grow: 1; }
.card { display: flex; flex-direction: column; }
.card-cta { color: var(--accent); font-size: 0.875rem; margin-top: 0.75rem; font-weight: 600; }

/* Mechanism page: canvas container */
.m-canvas {
    width: 100%;
    height: 60vh;
    min-height: 360px;
    margin: 1.5rem 0;
}
.m-controls { margin: 0.75rem 0 1.5rem; }
.mechanism-body { max-width: var(--max-w); }

/* Breaks-if callout — visually distinct */
.break-callout {
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    border: 1px solid var(--danger);
    border-left-width: 6px;
    background: rgba(239, 68, 68, 0.08);
    color: var(--danger);
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    margin: 1.75rem 0;
    box-shadow: 0 0 18px rgba(239, 68, 68, 0.12);
}
.break-callout .break-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.8;
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--font-mono);
}

@media (max-width: 640px) {
    .m-canvas { height: 45vh; }
}
/* Poster stand-in when a mechanism is published before its scene exists. */
.m-poster {
    width: 100%; height: auto; display: block;
    margin: 1.5rem 0 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.m-poster-note {
    font-family: var(--font-mono);
    font-size: 0.75rem; color: var(--text-muted);
    margin-bottom: 1.5rem;
}

/* ==========================================================================
   Mechanism stage — poster first, canvas second (Slice 3)
   ========================================================================== */
.m-stage { margin: 1.5rem 0 0; }
/* Fixed 16:9 so the stage matches the poster it upgrades from, and so
   the page does not reflow when the canvas replaces the image. vh-based
   heights made the model a different shape on every screen. */
.m-stage .m-canvas {
    margin: 0;
    position: relative;
    overflow: hidden;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: 70vh;
    min-height: 220px;
}

/* Poster and canvas occupy the same box; the poster fades out once the
   model is actually running, so there is never an empty dark rectangle. */
.m-poster-frame {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: opacity 0.35s ease;
}
.m-stage .m-canvas > canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block;
}
.m-stage.is-running .m-poster-frame { opacity: 0; pointer-events: none; }

/* Tap-to-run target on phones. Big enough to hit, centred over the poster. */
.m-run {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.8rem 1.4rem;
    min-height: 48px;
    background: var(--accent); color: #fff;
    border: none; border-radius: 999px;
    font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}
.m-run:hover { background: var(--accent-hover); }
.m-run[disabled] { opacity: 0.7; cursor: default; }
/* A class setting `display` beats the UA stylesheet's [hidden] rule, so
   the attribute has to be honoured explicitly or the button never goes
   away once the model starts. */
.m-run[hidden] { display: none; }
.m-stage.no-poster .m-canvas { background: var(--bg-secondary); }

/* ---- Admin capture bar (never rendered for visitors) ----------------- */
.m-admin-bar {
    display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
    margin: 0.5rem 0 1rem;
    padding: 0.6rem 0.85rem;
    background: var(--bg-secondary);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    font-size: 0.8125rem;
}
.m-admin-bar .btn-sm-ghost {
    background: var(--bg-tertiary); color: var(--text-secondary);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 0.35rem 0.7rem; font-size: 0.8125rem; cursor: pointer;
}
.m-admin-bar .btn-sm-ghost:hover:not([disabled]) { color: var(--text-primary); border-color: var(--accent); }
.m-admin-bar .btn-sm-ghost[disabled] { opacity: 0.45; cursor: not-allowed; }
.m-capture-status { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.75rem; }
.m-capture-status.is-ok    { color: #86efac; }
.m-capture-status.is-warn  { color: #fcd34d; }
.m-capture-status.is-error { color: var(--danger); }

/* On a phone the hero canvas is not worth the battery, and it must not
   sit behind the headline. Full hero rework lands in Slice 5. */
@media (max-width: 767px) {
    .hero-canvas { display: none; }
    .hero { min-height: auto; padding: 2rem 0 2.5rem; }
}

/* ==========================================================================
   Friday Brief page (Slice 4) — the issue is the hero, not a countdown
   ========================================================================== */
.brief-page { padding-top: 2.5rem; padding-bottom: 3.5rem; max-width: 680px; }
.brief-head { text-align: center; margin-bottom: 2rem; }
.brief-sub { color: var(--text-secondary); font-size: 1.0625rem; margin-top: 0.5rem; }

.issue-meta {
    display: flex; align-items: center; gap: 0.75rem;
    margin-bottom: 0.6rem;
    font-family: var(--font-mono); font-size: 0.7rem;
    text-transform: uppercase; letter-spacing: 0.1em;
}
.issue-label { color: var(--accent); }
.issue-date  { color: var(--text-muted); }

/* The issue is rendered with the email's own inline styles, so it is
   shown on a white sheet — it reads as "this is the actual email",
   which is the point of putting it here. */
.issue-frame {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem 1.5rem 1.75rem;
    overflow: hidden;
}
.issue-frame img { border-radius: 6px; }

.brief-signup {
    margin-top: 2.5rem; padding-top: 2rem;
    border-top: 1px solid var(--border);
    text-align: center;
}
.brief-signup h2 { margin-bottom: 0.4rem; }
.brief-when { color: var(--text-secondary); font-size: 0.9375rem; margin-bottom: 1.25rem; }
.brief-when strong { color: var(--text-primary); font-family: var(--font-mono); font-size: 0.875rem; }
.brief-smallprint { font-size: 0.8125rem; margin-top: 0.85rem; }

@media (max-width: 640px) {
    .issue-frame { padding: 1rem 1rem 1.25rem; }
}

/* ==========================================================================
   Slice 5 — public UI pass
   ========================================================================== */

/* Shared small caps label. Mono, muted, used for topic/section eyebrows. */
.eyebrow {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

/* ---- The break line, as a bet ---------------------------------------
   Red and mono because red means break everywhere in this system. No
   glow, no box-shadow, no background panel — the old treatment read as
   a system error message. This reads as the most confident sentence on
   the page, which is what it is. */
.break-bet {
    font-family: var(--font-mono);
    font-size: 1rem;
    line-height: 1.55;
    color: #fca5a5;
    border-left: 3px solid var(--danger);
    padding-left: 0.9rem;
    margin: 1.25rem 0 0;
}
.break-bet-label {
    display: block;
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--danger);
    margin-bottom: 0.2rem;
}

/* ---- Home ------------------------------------------------------------ */
.home-hero { padding-top: 2.25rem; padding-bottom: 1rem; max-width: 760px; }
.home-h1 { font-size: clamp(1.9rem, 6vw, 3rem); margin-bottom: 0.75rem; }
.home-lede {
    color: var(--text-secondary);
    font-size: 1.0625rem;
    max-width: 46ch;
    margin-bottom: 1.75rem;
}
.home-stage { margin: 0 0 1.5rem; }
.home-stage .m-canvas { height: auto; aspect-ratio: 16 / 9; min-height: 0; }
.home-claim-block { margin-bottom: 1.75rem; }
.home-claim {
    font-size: clamp(1.3rem, 3.6vw, 1.75rem);
    line-height: 1.35;
    margin-bottom: 0;
}
.home-open { margin: 1.25rem 0 0; font-size: 0.9375rem; }
.home-email {
    margin-top: 2rem; padding-top: 1.75rem;
    border-top: 1px solid var(--border);
}
.home-email .email-capture-block { margin: 0; max-width: none; }
.home-all { margin-top: 1.5rem; font-size: 0.9375rem; }

/* ---- Cards: objects on a shelf, not blog teasers --------------------- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
}

.m-card {
    display: flex; flex-direction: column;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    color: inherit; text-decoration: none;
    transition: border-color 0.15s, transform 0.15s;
}
.m-card:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-2px); }

.m-card-img {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--bg-tertiary);
    overflow: hidden;
}
.m-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* No poster yet: a topic-tinted field with the slug, so the grid still
   reads as a set of distinct objects instead of repeated placeholders. */
.m-card-img.is-empty {
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(circle at 30% 35%, rgba(59,130,246,0.22), transparent 62%),
        var(--bg-tertiary);
}
.m-card-img.is-empty[data-topic="science"]   { background: radial-gradient(circle at 30% 35%, rgba(139,92,246,0.22), transparent 62%), var(--bg-tertiary); }
.m-card-img.is-empty[data-topic="business"]  { background: radial-gradient(circle at 30% 35%, rgba(251,191,36,0.20), transparent 62%), var(--bg-tertiary); }
.m-card-img.is-empty[data-topic="crossover"] { background: radial-gradient(circle at 30% 35%, rgba(236,72,153,0.20), transparent 62%), var(--bg-tertiary); }
.m-card-slug {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* Topic chip sits ON the image. */
.chip {
    position: absolute; left: 0.6rem; top: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    background: rgba(10, 10, 15, 0.78);
    backdrop-filter: blur(2px);
}
.chip-tech      { color: #93c5fd; }
.chip-science   { color: #c4b5fd; }
.chip-business  { color: #fcd34d; }
.chip-crossover { color: #f9a8d4; }

.m-card-body { padding: 0.9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.45rem; }
.m-card-title { font-size: 1.125rem; margin: 0; color: var(--text-primary); }
.m-card-break {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #fca5a5;
    margin: 0;
}
.m-card-break-label {
    display: block;
    font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--danger); opacity: 0.85; margin-bottom: 0.1rem;
}

/* ---- Mechanism page -------------------------------------------------- */
.mech-page { padding-bottom: 3rem; }
.mech-head { padding-top: 1.75rem; max-width: 720px; }
.mech-claim { font-size: clamp(1.6rem, 4.6vw, 2.4rem); margin-bottom: 0; }

.mechanism-body { max-width: 680px; }

/* The ask, placed at the moment of "huh". */
.mech-ask {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin: 0 0 2.25rem;
}
.mech-ask-line { font-size: 0.9375rem; color: var(--text-secondary); margin-bottom: 0.85rem; }
.mech-ask .email-capture-block { margin: 0; max-width: none; }
.mech-ask .email-capture-heading { display: none; }

.mechanism-body-copy p { color: var(--text-secondary); }
.mechanism-body-copy h2, .mechanism-body-copy h3 { margin: 1.75rem 0 0.6rem; color: var(--text-primary); }

/* Somewhere to go next. */
.next-mech {
    margin-top: 2.5rem; padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}
.next-mech-link {
    display: block;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.15rem;
    text-decoration: none;
    transition: border-color 0.15s;
}
.next-mech-link:hover { border-color: var(--accent); text-decoration: none; }
.next-mech-title {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.2rem;
    color: var(--text-primary);
    margin-bottom: 0.35rem;
}
.next-mech-break {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: #fca5a5;
}

/* ---- Archive --------------------------------------------------------- */
.archive-lede { color: var(--text-secondary); font-size: 1.0625rem; margin-bottom: 1.5rem; }

/* ---- About ----------------------------------------------------------- */
.about-page { padding-top: 2.25rem; padding-bottom: 3.5rem; max-width: 640px; }
.about-page p { color: var(--text-secondary); }
.about-lede { font-size: 1.1875rem; color: var(--text-primary) !important; margin: 1rem 0 1.5rem; }
.about-page h2 { margin: 2rem 0 0.6rem; }
.about-sign { font-family: var(--font-mono); font-size: 0.875rem; margin-top: 1.75rem; }
.about-cta { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--border); }
.about-cta .email-capture-block { max-width: none; }

@media (max-width: 640px) {
    .home-hero { padding-top: 1.5rem; }
    .home-stage .m-canvas { border-radius: var(--radius); }
    .card-grid { grid-template-columns: 1fr; }
    .break-bet { font-size: 0.9375rem; }
}

/* ---- Narrow screens: the header must never widen the document -------
   The nav is a nowrap flex row; at 390px "Castalore + Mechanisms +
   About + Friday Brief" is wider than the viewport, which pushed the
   whole document sideways and clipped every section on the right. */
@media (max-width: 560px) {
    .site-header .container {
        flex-wrap: wrap;
        gap: 0.15rem 0.6rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        min-height: 0;
    }
    .site-header nav { gap: 0.4rem; flex-wrap: wrap; }
    .site-header nav a { font-size: 0.8125rem; padding: 0.2rem 0.35rem; }
    .logo { font-size: 1.1rem; }
}