/* ========================================
   Editorial Red Design System
   ======================================== */

/* CSS Variables - Color Palette (light mode, default).
   Text/background pairs are tuned to WCAG 2.2 AAA (7:1 for body text);
   decorative reds that never carry text live in --accent-deco/--hairline. */
:root {
    /* Primary Colors */
    --bg-primary: #faf8f5;
    --bg-white: #ffffff;
    --text-primary: #1a1a1a;
    --text-secondary: #4b4742;
    --text-muted: #595449;
    /* Kicker red that meets AAA (7:1) on the stories surface in each theme. */
    --kicker-red: #8c0d20;

    /* Accent Colors */
    --accent-primary: #8c0d20;
    --accent-secondary: #6e0a19;
    --accent-light: #f7e9eb;
    --accent-soft: rgba(179, 18, 42, 0.08);
    --accent-soft-strong: rgba(179, 18, 42, 0.14);
    /* Vivid red reserved for non-text decoration (blocks, borders, rules). */
    --accent-deco: #b3122a;
    /* Solid button surfaces (always under white text; ≥7:1 in both themes). */
    --btn-bg: #8c0d20;
    --btn-bg-hover: #a5112a;
    /* Focus ring: ≥3:1 against both the white surfaces and the black bands. */
    --focus-ring: #e63946;

    /* Hero / header backdrop: plain in light, a red glow only in dark. */
    --hero-glow: transparent;

    /* Neutral alternate surface (sections, blockquotes) — deliberately not
       warm/cream and not red/pink. */
    --surface-alt: #ebebee;

    /* Homepage: serif titles meet mono labels (literature × technology). */
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --card-bg: #ffffff;
    --card-border: #e7e1d7;
    --stories-bg: #ffffff;

    /* Diagonal taper. --slope-v: drop across the full viewport width;
       --slope-p: the SAME ~4deg angle over the 22rem portrait width. */
    --slope-v: 7vw;
    --slope-p: 1.54rem;
    --hairline: #e63946;
    /* Brighter red for TEXT on the always-black bands (surname, nav hover);
       7.9:1 against #0b0b0b. */
    --name-red: #ff7d76;

    /* Borders & Dividers */
    --border-color: #e7e1d7;
    --border-light: #f0ece4;

    /* Surfaces */
    --code-bg: #f4f1ec;
    --code-inline: #8c0d20;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(40, 30, 20, 0.05);
    --shadow-md: 0 8px 24px rgba(40, 30, 20, 0.10);
    --shadow-lg: 0 12px 32px rgba(40, 30, 20, 0.14);

    /* Typography */
    --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-sans: 'Newsreader', Georgia, 'Times New Roman', serif;
}

/* Dark mode — striking black + red */
[data-theme="dark"] {
    --bg-primary: #0d0d0d;
    --bg-white: #161616;
    --text-primary: #f2efe9;
    --text-secondary: #b3ada3;
    --text-muted: #a8a296;
    --kicker-red: #ff8a80;

    --accent-primary: #ff8a80;
    --accent-secondary: #ffb3ab;
    --accent-light: #2a1416;
    --accent-soft: rgba(230, 57, 70, 0.12);
    --accent-soft-strong: rgba(230, 57, 70, 0.20);
    --accent-deco: #e63946;

    --hero-glow: radial-gradient(60% 60% at 70% 30%, rgba(230, 57, 70, 0.22), transparent 70%);

    --surface-alt: #1b1b1d;

    /* Elevated card surfaces give dark mode real depth/contrast. */
    --card-bg: #202024;
    --card-border: #2e2e30;
    --stories-bg: #16161a;

    --border-color: #282828;
    --border-light: #1f1f1f;

    --code-bg: #1c1c1c;
    --code-inline: #ff97a0;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.65);
}

html {
    background-color: var(--bg-primary);
}

/* ========================================
   Global Styles
   ======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Smooth scrolling only for users who have not asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 1.0625rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 640px) {
    .container {
        padding: 0 1.5rem;
    }
}

@media (min-width: 1024px) {
    .container {
        padding: 0 2rem;
    }
}

/* ========================================
   Typography
   ======================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2.25rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.125rem;
    font-weight: 600;
}

p {
    line-height: 1.7;
}

a {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--accent-secondary);
}

/* Visible keyboard focus indicator (WCAG 2.4.7), works on light and dark.
   --focus-ring keeps ≥3:1 against white surfaces and the black bands alike. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.theme-toggle:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 2px;
}

/* The header is fixed, so make sure focused or jumped-to elements scroll
   clear of it instead of being hidden underneath (WCAG 2.4.11/2.4.12). */
:focus,
:target {
    scroll-margin-top: 5.5rem;
}

/* Visually hidden but available to screen readers. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

strong {
    font-weight: 600;
    color: var(--text-primary);
}

/* ========================================
   Buttons
   ======================================== */

.btn {
    display: inline-block;
    padding: 0.8rem 1.75rem;
    border-radius: 2rem;
    font-size: 1rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-sans);
}

.btn-primary {
    background-color: var(--btn-bg);
    color: #fff;
    box-shadow: 0 4px 12px var(--accent-soft-strong);
}

.btn-primary:hover {
    background-color: var(--btn-bg-hover);
    color: #fff;
    box-shadow: 0 6px 20px var(--accent-soft-strong);
    transform: translateY(-2px);
}

.btn-secondary {
    color: var(--text-primary);
    border: 2px solid var(--border-color);
    background-color: var(--bg-white);
}

.btn-secondary:hover {
    background-color: var(--bg-white);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* ========================================
   Header
   ======================================== */

/* Global black nav for continuity across every page. */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: all 0.3s ease;
    background-color: #0b0b0b;
    border-bottom: 1px solid #222;
    padding: 0.6rem 0;
}

.header.scrolled {
    background-color: #0b0b0b;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
    padding: 0.6rem 0;
}

.header-content {
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
}

.logo {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    transition: opacity 0.2s ease;
    /* ≥44px hit area (WCAG 2.5.5) with no visual shift. */
    padding: 0.5rem 0.25rem;
    margin: -0.5rem -0.25rem;
}

.logo:hover {
    /* Explicit white: the global a:hover would otherwise recolour the brand
       dark red, which vanishes against the black header bar. */
    color: #fff;
    opacity: 0.8;
}

.nav-desktop {
    display: none;
    align-items: center;
    gap: 2rem;
}

.nav-desktop.active {
    display: block;
}

/* Expanded mobile menu: keep the brand (name + mouse) and the hamburger on
   one top row, and drop the nav onto its own full-width row below, instead
   of letting the tall nav squeeze the brand and stretch it vertically. */
@media (max-width: 767px) {
    .header-content {
        flex-wrap: wrap;
        align-items: center;
    }

    .nav-desktop.active {
        flex-basis: 100%;
        order: 3;
    }
}

.nav-desktop.active a.nav-link {
    display: block;
}

.nav-desktop.active a.nomob {
    display: none;
}

.nav-desktop.active .menu-toggle {
    vertical-align: top;
}

@media (min-width: 768px) {
    .nav-desktop {
        display: flex;
    }
}

.nav-link {
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    text-decoration: none;
    transition: color 0.2s ease;
    /* Enlarge the hit area to ≥44px (WCAG 2.5.5) without moving the layout. */
    padding: 0.85rem 0.35rem;
    margin: -0.85rem -0.35rem;
}

/* In the expanded mobile menu the links stack, so give them real height
   instead of overlapping negative margins. */
.nav-desktop.active .nav-link {
    padding: 0.8rem 0.5rem;
    margin: 0;
}

.nav-link:hover,
.nav-link.active {
    color: var(--name-red);
}

.menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    position: relative;
}

/* Invisible extension so the tap target is at least 44x44px (WCAG 2.5.5). */
.menu-toggle::after {
    content: "";
    position: absolute;
    inset: -6px;
}

@media (min-width: 768px) {
    .menu-toggle {
        display: none;
    }
}

.menu-toggle span {
    width: 24px;
    height: 2px;
    background-color: #fff;
    transition: all 0.3s ease;
}

/* Theme toggle */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    background-color: transparent;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    font-size: 0.95rem;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.theme-toggle:hover {
    color: #fff;
    border-color: #fff;
}

/* Invisible extension so the tap target is at least 44x44px (WCAG 2.5.5). */
.theme-toggle::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
}

/* Show the moon in light mode (click for dark), the sun in dark mode. */
.theme-toggle .theme-icon-light {
    display: none;
}

.theme-toggle .theme-icon-dark {
    display: inline-block;
}

[data-theme="dark"] .theme-toggle .theme-icon-light {
    display: inline-block;
}

[data-theme="dark"] .theme-toggle .theme-icon-dark {
    display: none;
}

/* On mobile the nav collapses; keep the toggle reachable next to the menu button. */
@media (max-width: 767px) {
    .nav-desktop .theme-toggle {
        display: none;
    }

    .nav-desktop.active .theme-toggle {
        display: inline-flex;
    }
}

/* ========================================
   Homepage — Literature × Technology
   ======================================== */

/* The global nav is already black, so on the homepage it merges seamlessly
   into the dark masthead — no page-specific override needed. */

/* Shared eyebrow (sits on the always-black masthead band) */
.eyebrow {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--name-red);
}

/* --- Masthead: dramatic, always dark in both themes --- */
/* Red base + a black fill raised 1.5px leaves a thin red hairline along the
   diagonal (clip-path would clip a drop-shadow, so we layer instead). */
.masthead {
    background-color: var(--hairline);
    color: #f4f1ec;
    padding: 8rem 0 calc(4rem + var(--slope-v));
    position: relative;
    z-index: 2;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--slope-v)));
}

.masthead::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #0b0b0b;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5px), 0 calc(100% - var(--slope-v) - 2.5px));
}

.masthead::after {
    content: "";
    position: absolute;
    top: -25%;
    right: -10%;
    width: 50vw;
    height: 50vw;
    z-index: 1;
    background: radial-gradient(circle, rgba(230, 57, 70, 0.30), transparent 65%);
    pointer-events: none;
}

.masthead-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 900px) {
    .masthead-inner {
        grid-template-columns: 1.5fr 1fr;
        gap: 4rem;
    }
}

.masthead .eyebrow {
    display: block;
    margin-bottom: 1.5rem;
}

.masthead-name {
    font-family: var(--font-serif);
    font-weight: 600;
    line-height: 0.9;
    letter-spacing: -0.02em;
    font-size: clamp(3.5rem, 11vw, 8rem);
    margin: 0 0 1.75rem;
    color: #fff;
}

.masthead-name .lastname {
    /* Display-size text: AAA large-text threshold is 4.5:1, so the vivid
       brand red (4.95:1 on the black band) is compliant here; --name-red's
       lighter tint is only needed at body sizes. */
    color: #f23044;
    font-style: italic;
}

.masthead-role {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    line-height: 1.6;
    color: #ffffff;
    max-width: 34rem;
    margin-bottom: 2.5rem;
}

.masthead-role strong {
    color: #fff;
    font-weight: 600;
}

.masthead-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-bold,
.btn-ghost {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 1rem 1.6rem;
    border-radius: 2rem;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    cursor: pointer;
}

.btn-bold {
    background-color: var(--btn-bg);
    color: #fff;
}

.btn-bold:hover {
    background-color: var(--btn-bg-hover);
    color: #fff;
    transform: translateY(-2px);
}

.btn-ghost {
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.btn-ghost:hover {
    border-color: #fff;
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* Portrait: high-contrast with a red offset block behind */
.masthead-portrait {
    position: relative;
    justify-self: center;
    max-width: 22rem;
    width: 100%;
}

.masthead-portrait::before {
    content: "";
    position: absolute;
    inset: 1.25rem -1.25rem -1.25rem 1.25rem;
    background-color: var(--accent-deco);
    z-index: 0;
    /* Same taper angle as the masthead, so photo + block + band rhyme. */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--slope-p)));
}

.masthead-portrait img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    filter: grayscale(1) contrast(1.08);
    transition: filter 0.4s ease;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--slope-p)));
}

.masthead-portrait:hover img {
    filter: grayscale(0) contrast(1);
}

/* --- Stories: image-led story grid --- */
/* Slides up under the masthead (top) and under the book band (bottom) so both
   diagonals cleanly reveal this section. */
.stories {
    background-color: var(--stories-bg);
    position: relative;
    z-index: 1;
    margin-top: calc(-1 * var(--slope-v));
    padding: calc(5rem + var(--slope-v)) 0 calc(6rem + var(--slope-v));
}

.stories-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

.stories-kicker {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--kicker-red);
    display: block;
    margin-bottom: 0.5rem;
}

.stories-title {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1;
    margin: 0;
}

.stories-link {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-primary);
    border-bottom: 2px solid var(--accent-deco);
    padding-bottom: 0.25rem;
    white-space: nowrap;
    position: relative;
}

/* Invisible extension so the link's target is ≥44px tall (WCAG 2.5.5). */
.stories-link::after {
    content: "";
    position: absolute;
    inset: -12px -8px;
}

.stories-link:hover {
    color: var(--accent-primary);
}

/* Lead story banner */
.story-lead {
    position: relative;
    display: block;
    margin-bottom: 2rem;
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 16 / 7;
    background-color: var(--card-bg);
}

.story-lead img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.story-lead:hover img {
    transform: scale(1.04);
}

.story-lead::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.1) 55%, rgba(0, 0, 0, 0.2) 100%);
}

.story-lead-body {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2.5rem;
}

.story-lead-title {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: clamp(1.6rem, 3.5vw, 2.75rem);
    line-height: 1.05;
    color: #fff;
    max-width: 42rem;
    display: block;
}

/* Pill (mono date) overlay */
.story-pill {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background-color: rgba(255, 255, 255, 0.92);
    color: #0b0b0b;
    padding: 0.4rem 0.9rem;
    border-radius: 2rem;
    display: inline-block;
}

.story-lead .story-pill {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    z-index: 2;
}

/* Grid of smaller stories */
.story-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 600px) {
    .story-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 920px) {
    .story-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.story {
    display: flex;
    flex-direction: column;
}

.story-media {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 6px;
    background-color: var(--card-bg);
    margin-bottom: 1rem;
}

.story-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.story:hover .story-media img {
    transform: scale(1.05);
}

.story-media .story-pill {
    position: absolute;
    top: 1rem;
    left: 1rem;
}

.story-media-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: var(--font-serif);
    font-size: 4rem;
    color: #fff;
    background: linear-gradient(135deg, var(--accent-secondary), #0b0b0b);
}

.story-title {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.story-title a {
    color: var(--text-primary);
    /* ≥44px hit area (WCAG 2.5.5) without shifting the card layout. */
    display: inline-block;
    padding: 0.55rem 0;
    margin: -0.55rem 0;
}

.story:hover .story-title a {
    color: var(--accent-primary);
}

.story-excerpt {
    font-family: var(--font-sans);
    color: var(--text-secondary);
    font-size: 0.98rem;
    line-height: 1.55;
}

/* --- Feature book: second dark band, diagonal top to echo the masthead --- */
.feature-book {
    background-color: var(--hairline);
    color: #f4f1ec;
    padding: calc(5.5rem + var(--slope-v)) 0 5.5rem;
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * var(--slope-v));
    overflow: hidden;
    clip-path: polygon(0 0, 100% var(--slope-v), 100% 100%, 0 100%);
}

.feature-book::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #0b0b0b;
    clip-path: polygon(0 2.5px, 100% calc(var(--slope-v) + 2.5px), 100% 100%, 0 100%);
}

.feature-book::after {
    content: "";
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 45vw;
    height: 45vw;
    z-index: 1;
    background: radial-gradient(circle, rgba(230, 57, 70, 0.22), transparent 65%);
    pointer-events: none;
}

.feature-book-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 820px) {
    .feature-book-inner {
        grid-template-columns: 0.8fr 1.2fr;
        gap: 4rem;
    }
}

.fb-cover {
    justify-self: center;
}

.fb-cover img {
    display: block;
    max-height: 360px;
    width: auto;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.fb-kicker {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--name-red);
    display: block;
    margin-bottom: 1rem;
}

.fb-title {
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.05;
    color: #fff;
    margin-bottom: 1.25rem;
}

.fb-text {
    font-family: var(--font-sans);
    color: #ffffff;
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 36rem;
    margin-bottom: 2rem;
}

.fb-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .masthead {
        padding: 7rem 0 3.5rem;
    }

    .story-lead-body {
        padding: 1.5rem;
    }
}

/* ========================================
   Footer
   ======================================== */

.footer {
    background-color: var(--bg-white);
    border-top: 1px solid var(--border-color);
    padding: 4rem 0 2rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}

/* Footer headings are h2 elements (correct outline order); the classes keep
   the previous h3/h4 visual sizes. */
.footer-section .footer-heading {
    margin-bottom: 1rem;
    font-size: 1.125rem;
}

.footer-section .footer-heading--name {
    font-size: 1.5rem;
}

.footer-section p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.15rem;
}

.footer-section ul li a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
    /* ≥44px-tall targets (WCAG 2.5.5); li margins shrink to keep the rhythm. */
    display: inline-block;
    padding: 0.8rem 0;
}

.footer-section ul li a:hover {
    color: var(--accent-primary);
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.social-icon:hover {
    background-color: var(--btn-bg);
    color: white;
    box-shadow: var(--shadow-md);
}

/* Invisible extension so each icon's tap target is ≥44x44px (WCAG 2.5.5). */
.social-icon::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
}

.footer-bottom {
    border-top: 1px solid var(--border-color);
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
}

@media (min-width: 768px) {
    .footer-bottom {
        flex-direction: row;
        text-align: left;
    }
}

.footer-bottom p {
    color: var(--text-secondary);
    font-size: 1rem;
}

.footer-links {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

@media (min-width: 768px) {
    .footer-links {
        justify-content: flex-end;
    }
}

.footer-links a {
    color: var(--text-secondary);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: var(--accent-primary);
}

.footer-links a.active {
    color: var(--accent-primary);
    font-weight: 500;
}

/* ========================================
   Animations
   ======================================== */

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(2rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(2rem);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ========================================
   Responsive Design
   ======================================== */

@media (max-width: 767px) {
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .btn {
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
    }

    .section-header-with-button {
        flex-direction: column;
        align-items: stretch;
    }

    .section-header-with-button .btn {
        width: 100%;
    }

    /* Lead post: on mobile the text-over-image hero is unreadable, so drop the
       overlay and stack it like the grid stories (image on top, dark title
       below). Desktop keeps the hero treatment. */
    .story-lead {
        aspect-ratio: auto;
        overflow: visible;
        border-radius: 0;
        background: none;
    }

    .story-lead img {
        position: relative;
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
        border-radius: 6px;
        margin-bottom: 1rem;
    }

    .story-lead::after {
        display: none;
    }

    .story-lead-body {
        position: static;
        padding: 0;
    }

    .story-lead-title {
        color: var(--text-primary);
        font-size: 1.4rem;
        line-height: 1.2;
    }

    .story-lead .story-pill {
        top: 1rem;
        left: 1rem;
    }
}

/* ========================================
   Utility Classes
   ======================================== */

.accent {
    color: var(--accent-primary);
}

.text-center {
    text-align: center;
}

.mt-4 {
    margin-top: 1rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.prefix {
    display: inline-block;
    width: 40px;
}

div p span.bibitem {
    display: inline-block;
    vertical-align: top;
    padding-left: .51in;
    width: 75%;
}

/* Publications: green = green-OA, goldenrod = gold-OA. These inline-coloured
   links carry meaning, so keep the hues in both themes but retune them to
   AAA contrast (7:1) against each theme's background. The generator's raw
   `green`/`goldenrod` fail AAA (goldenrod is 2.2:1 on white). */
[style*="color:green"] {
    color: #0e6312 !important;
}

[style*="color:goldenrod"] {
    color: #6f5400 !important;
}

[data-theme="dark"] [style*="color:green"] {
    color: #5fd07a !important;
}

[data-theme="dark"] [style*="color:goldenrod"] {
    color: #e3b341 !important;
}

.social-links.row-two {
    margin-top: 1.5rem;
}

.image-attribution {
    font-size: 0.85em;
    color: var(--text-secondary);
    margin-top: 8px;
    padding: 10px;
    background-color: var(--code-bg);
    border-left: 3px solid var(--border-color);
    border-radius: 4px;
}

.image-attribution a {
    color: var(--accent-primary);
    text-decoration: none;
}

.image-attribution a:hover {
    text-decoration: underline;
}

/* ========================================
   Mouse mark — subtle decorative logo (© Duncan Stringer)
   A single SVG asset (/images/mouse.svg) drawn via mask-image so it
   takes on currentColor and can be tinted/faded per context.
   Native aspect ratio is 201:105 (~1.91:1).
   ======================================== */

.mouse-mark {
    display: inline-block;
    background-color: currentColor;
    -webkit-mask: url("/images/mouse.svg") center / contain no-repeat;
    mask: url("/images/mouse.svg") center / contain no-repeat;
}

/* Keep the name and its logo together as one brand unit. */
.brand {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

/* Header (desktop): a white mouse just beyond the theme toggle. The header
   bar is dark in both themes, so the lines stay white. Hidden on mobile —
   there the mouse moves next to the name instead (see .mouse-mark--logo). */
.mouse-mark--nav {
    display: none;
    width: 2rem;
    height: 1.05rem;
    margin-left: 0.6rem;
    align-self: center;
    color: #fff;
    opacity: 1;
    transition: opacity 0.3s ease;
}

@media (min-width: 768px) {
    .mouse-mark--nav {
        display: inline-block;
    }
}

/* Header (mobile only): the white mouse sits next to the name. */
.mouse-mark--logo {
    display: none;
    width: 1.85rem;
    height: 0.97rem;
    color: #fff;
    flex: 0 0 auto;
}

@media (max-width: 767px) {
    .mouse-mark--logo {
        display: inline-block;
    }
}

/* Home page (desktop): pull the nav's right edge in so the mouse lines up
   with the masthead portrait below rather than protruding past it. The
   portrait is max 22rem wide and centred in the right column of a
   1.5fr / 1fr grid (4rem gap), so its right edge sits (column - 22rem)/2
   inside the container's content box; we add that as extra right padding.
   Two ranges because the container's own side padding changes at 1024px. */
@media (min-width: 1024px) {
    .home-page .header-content {
        padding-right: calc(2rem + max(0px, ((min(100vw, 1280px) - 8rem) / 2.5 - 22rem) / 2));
    }
}

@media (min-width: 900px) and (max-width: 1023.98px) {
    .home-page .header-content {
        padding-right: calc(1.5rem + max(0px, ((100vw - 7rem) / 2.5 - 22rem) / 2));
    }
}

/* Footer: a small mouse beside its attribution. currentColor here is the
   footer's secondary text colour, so it adapts subtly to light/dark. */
.mouse-credit {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    /* Full-strength secondary colour keeps the credit above WCAG AA (4.5:1);
       an earlier opacity blend dropped it to 4.31:1. */
    color: var(--text-secondary);
}

.mouse-mark--credit {
    width: 1.85rem;
    height: 0.97rem;
    opacity: 0.65;
    flex: 0 0 auto;
    /* Optical nudge: the silhouette is top-heavy, so raise it slightly to
       sit centrally against the cap height of the credit text. */
    transform: translateY(-0.14em);
}

@media print
{
    .header, .breadcrumb-section, .post-sidebar, .footer, .post-date
    {
    display: none !important;
    }
}

/* Skip-to-content link: visually hidden until keyboard focus (a11y bypass block) */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    /* ≥44px-tall target when focused (WCAG 2.5.5). */
    padding: 0.8rem 1.2rem;
    background: var(--accent-primary);
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 6px 0;
}
.skip-link:focus {
    left: 0;
}

/* Keep the skip link white-on-red even under the global a:hover recolour. */
.skip-link:hover,
.skip-link:focus {
    color: #ffffff;
}

/* ========================================
   Reduced motion (WCAG 2.3.3)
   Kill animations, transitions and hover motion for users who ask for it.
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .btn-primary:hover,
    .btn-bold:hover,
    .nav-post:hover,
    .story-lead:hover img,
    .story:hover .story-media img {
        transform: none !important;
    }
}