/*
    The Tech Stream - Main Stylesheet
    Theme: Signal Editorial (Phase 3, Step 1: design-system foundation)
    Author: Farheena Hassan
    Original: 31/01/2026

    Contents
    1. Fonts (self-hosted, SIL OFL 1.1 - see assets/fonts/README.txt)
    2. Design tokens
    3. Base / reset / typography
    4. Accessibility helpers
    5. Layout and shared components (header, nav, footer, buttons, forms)
    6. Existing page components (restyled with the new tokens)
    7. Responsive rules
    8. Reduced motion
*/

/* ==========================================================================
   1. FONTS
   ========================================================================== */
@font-face {
    font-family: 'Fraunces';
    src: url('assets/fonts/fraunces.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('assets/fonts/inter.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('assets/fonts/jetbrains-mono.woff2') format('woff2');
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}

/* TEMPORARY SHIM: the old pages still say font-family:'Orbitron' in inline
   styles. Until those pages are cleaned up (later steps), map that name to the
   new headline font so they match the redesign and need no outside download. */
@font-face {
    font-family: 'Orbitron';
    src: url('assets/fonts/fraunces.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Metric-matched fallback faces. While a web font is still loading, the browser shows a fallback
   font; if its glyphs are a different width or height, the text reflows when the real font arrives
   (a layout shift). These faces scale a widely installed local font (Arial, Georgia, Courier New) to
   the measured width and vertical metrics of the web font, so the swap moves almost nothing.
   They only ever show before the web font is ready; the final typography is unchanged. */
@font-face {
    font-family: 'Inter Fallback';
    src: local('Arial'), local('Helvetica'), local('Liberation Sans');
    font-weight: 100 900;
    size-adjust: 107.7%;
    ascent-override: 90.1%;
    descent-override: 22.3%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Fraunces Fallback';
    src: local('Georgia');
    font-weight: 100 599;
    size-adjust: 105.6%;
    ascent-override: 92.8%;
    descent-override: 24.6%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'Fraunces Fallback';
    src: local('Georgia Bold'), local('Georgia-Bold');
    font-weight: 600 900;
    size-adjust: 97.2%;
    ascent-override: 100.8%;
    descent-override: 26.7%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'JetBrains Mono Fallback';
    src: local('Courier New'), local('CourierNewPSMT');
    font-weight: 100 800;
    size-adjust: 100%;
    ascent-override: 102%;
    descent-override: 30%;
    line-gap-override: 0%;
}

/* ==========================================================================
   2. DESIGN TOKENS
   ========================================================================== */
:root {
    /* Backgrounds: deep blue-black, darkest to lightest */
    --bg-0: #060912;
    --bg-1: #0b1220;
    --surface: #101a2e;
    --surface-2: #162340;
    --line: #1f2f4d;

    /* Text */
    --text: #e6edf7;
    --text-muted: #93a4bf;

    /* Accents: cyan is primary, amber is used sparingly */
    --cyan: #22d3ee;
    --cyan-strong: #67e8f9;
    --cyan-glow: rgba(34, 211, 238, 0.18);
    --amber: #f5a623;
    --amber-glow: rgba(245, 166, 35, 0.16);

    /* Theme-dependent values that used to be hardcoded further down */
    color-scheme: dark;
    --header-bg: rgba(6, 9, 18, 0.85);
    --hero-bg: linear-gradient(180deg, rgba(16, 26, 46, 0.7), rgba(6, 9, 18, 0.2));
    --hero-glow-1: rgba(34, 211, 238, 0.10);
    --hero-glow-2: rgba(59, 130, 246, 0.09);
    --hero-glow-3: rgba(245, 166, 35, 0.05);
    --halo-1: rgba(6, 9, 18, 0.9);
    --halo-2: rgba(6, 9, 18, 0.8);
    --quote-bg: rgba(34, 211, 238, 0.06);
    --quote-bg-amber: rgba(245, 166, 35, 0.06);
    --cursor-rgb: 34, 211, 238;         /* custom cursor (comma-separated R, G, B) */
    --cursor-strong-rgb: 103, 232, 249;
    --particle-1: 34, 211, 238;         /* hero particle network palette, read by js/main.js */
    --particle-2: 59, 130, 246;
    --particle-3: 245, 166, 35;
    --particle-boost: 1;

    /* Typography */
    --font-display: 'Fraunces', 'Fraunces Fallback', Georgia, 'Times New Roman', serif;
    --font-body: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, 'SFMono-Regular', Consolas, monospace;

    /* Fluid type scale: smoothly grows with screen width */
    --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
    --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
    --step-2: clamp(1.45rem, 1.3rem + 0.75vw, 1.85rem);
    --step-3: clamp(1.8rem, 1.5rem + 1.5vw, 2.6rem);
    --step-4: clamp(2.2rem, 1.6rem + 3vw, 3.9rem);

    /* Spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4.5rem;
    --space-9: 6rem;

    /* Shape and depth */
    --radius-s: 4px;
    --radius-m: 8px;
    --radius-l: 14px;
    --radius-pill: 999px;
    --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.45);
    --shadow-3: 0 20px 50px rgba(0, 0, 0, 0.55);

    /* Layout widths */
    --page-width: 1200px;
    --reading-width: 720px;

    /* Motion */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --speed: 0.25s;

    /* Legacy names: older page markup still uses these inside inline styles.
       They now point at the new palette so the old pages stay on-brand. */
    --bg-color: var(--bg-0);
    --card-bg: var(--surface);
    --text-main: var(--text);
    --border-color: var(--line);
    --neon-green: var(--cyan);
    --neon-blue: var(--cyan);
    --neon-purple: var(--amber);
}

/* ==========================================================================
   3. BASE / RESET / TYPOGRAPHY
   ========================================================================== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-0);
    background-image:
        radial-gradient(900px 500px at 85% -10%, var(--cyan-glow), transparent 60%),
        radial-gradient(700px 400px at -10% 10%, var(--amber-glow), transparent 55%);
    background-repeat: no-repeat;
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

main {
    flex: 1 0 auto;
    width: 100%;
    max-width: var(--page-width);
    margin: var(--space-7) auto;
    padding: 0 var(--space-5);
}

img {
    max-width: 100%;
    height: auto;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--text);
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p {
    max-width: 70ch;
}

a {
    color: var(--cyan);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--speed) var(--ease);
}

a:hover {
    color: var(--cyan-strong);
}

::selection {
    background: var(--cyan);
    color: var(--bg-0);
}

/* ==========================================================================
   4. ACCESSIBILITY HELPERS
   ========================================================================== */
:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 3px;
    border-radius: var(--radius-s);
}

/* "Skip to content" link: hidden until a keyboard user tabs to it.
   (Used by pages once the markup is updated in later steps.) */
.skip-link {
    position: absolute;
    left: var(--space-4);
    top: -100px;
    z-index: 2000;
    padding: var(--space-3) var(--space-4);
    background: var(--cyan);
    color: var(--bg-0);
    font-weight: 600;
    border-radius: var(--radius-s);
    text-decoration: none;
}

.skip-link:focus {
    top: var(--space-4);
}

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

/* Small uppercase label used for metadata (dates, topics, "Featured") */
.eyebrow {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--amber);
}

/* ==========================================================================
   5. LAYOUT AND SHARED COMPONENTS
   ========================================================================== */

/* Header */
header {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-5);
    background-color: var(--header-bg);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}

nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
}

nav a {
    position: relative;
    padding: var(--space-2) 0;
    color: var(--text-muted);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
}

nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--cyan);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--speed) var(--ease);
}

nav a:hover,
nav a[aria-current="page"] {
    color: var(--text);
}

nav a:hover::after,
nav a[aria-current="page"]::after {
    transform: scaleX(1);
}

/* Footer */
footer {
    margin-top: auto;
    padding: var(--space-7) var(--space-5);
    background-color: var(--bg-1);
    border-top: 1px solid var(--line);
    text-align: center;
}

footer p {
    max-width: none;
    margin: 0 auto var(--space-2);
    color: var(--text-muted);
    font-size: var(--step--1);
}

/* Buttons */
.btn-submit {
    display: block;
    width: 100%;
    padding: var(--space-3) var(--space-6);
    background-color: transparent;
    color: var(--cyan);
    border: 1px solid var(--cyan);
    border-radius: var(--radius-s);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease),
        box-shadow var(--speed) var(--ease);
}

.btn-submit:hover {
    background-color: var(--cyan);
    color: var(--bg-0);
    box-shadow: 0 0 24px var(--cyan-glow);
}

/* Form fields */
.form-group {
    margin-bottom: var(--space-5);
}

.form-group label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--text);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: var(--space-3);
    background-color: var(--bg-0);
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--step-0);
    transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.8;
}

/* Keep a clearly visible focus state (was removed in the old stylesheet) */
.form-group input:focus-visible,
.form-group textarea:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
    border-color: var(--cyan);
}

/* Back-to-top button */
#topBtn {
    position: fixed;
    bottom: var(--space-5);
    right: var(--space-5);
    z-index: 1000;
    display: none;
    padding: var(--space-3) var(--space-4);
    background-color: var(--surface);
    color: var(--cyan);
    border: 1px solid var(--cyan);
    border-radius: var(--radius-s);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    cursor: pointer;
    box-shadow: var(--shadow-1);
    transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}

#topBtn:hover,
#topBtn:focus-visible {
    background-color: var(--cyan);
    color: var(--bg-0);
}

/* ==========================================================================
   6. EXISTING PAGE COMPONENTS (restyled with the new tokens)
   These keep their current class names so every page keeps working.
   They will be refined page by page in later steps.
   ========================================================================== */

/* Home hero */
.hero {
    text-align: center;
    margin-bottom: var(--space-8);
}

.hero h1 {
    margin-bottom: var(--space-4);
}

.hero span {
    color: var(--cyan);
}

.hero p {
    margin-left: auto;
    margin-right: auto;
    color: var(--text-muted);
}

.hero .tagline {
    margin-bottom: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--step-0);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--amber);
}

/* News cards */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

article {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease),
        border-color var(--speed) var(--ease);
}

article:hover {
    transform: translateY(-4px);
    border-color: var(--cyan);
    box-shadow: var(--shadow-2);
}

article img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-bottom: 1px solid var(--line);
}

.article-content {
    padding: var(--space-5);
}

.article-content h2 {
    margin-bottom: var(--space-3);
    font-size: var(--step-2);
    color: var(--text);
}

.article-content p {
    margin-bottom: var(--space-4);
    color: var(--text-muted);
    font-size: 0.95rem;
}

.read-more {
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--amber);
    text-decoration: none;
}

.read-more:hover {
    color: var(--text);
}

/* Contact page */
.contact-section {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--space-6);
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-2);
}

/* Story pages */
.story-content {
    margin-top: var(--space-5);
    padding: var(--space-6);
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
}

.story-content:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--line);
}

.story-content img {
    width: 100%;
    height: auto;
    max-height: 400px;
    margin-bottom: var(--space-5);
    object-fit: cover;
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
}

.story-meta {
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    color: var(--text-muted);
}

article.active {
    border: 2px solid var(--amber);
}

/* ==========================================================================
   7. RESPONSIVE RULES
   ========================================================================== */
@media (max-width: 768px) {
    nav ul {
        justify-content: center;
        gap: var(--space-4);
    }

    .news-grid {
        grid-template-columns: 1fr;
    }

    main {
        margin: var(--space-6) auto;
        padding: 0 var(--space-4);
    }

    .story-content,
    .contact-section {
        padding: var(--space-5);
    }
}

/* ==========================================================================
   8. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    article:hover {
        transform: none;
    }
}

/* ==========================================================================
   9. HOMEPAGE (Step 2)
   Every rule below is scoped to .home so other pages are not affected
   until they are redesigned.
   ========================================================================== */

/* Hero */
.home .hero {
    position: relative;
    overflow: hidden;
    padding: var(--space-9) var(--space-5) var(--space-8);
    margin-bottom: var(--space-8);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    background: var(--hero-bg);
}

.home .hero > :not(.hero-canvas) {
    position: relative;
    z-index: 1;
}

.home .hero h1 {
    margin-bottom: var(--space-4);
    font-size: var(--step-4);
    font-weight: 600;
}

.home .hero-lead {
    font-size: var(--step-1);
}

/* Soft ambient glow behind the network (very slow, very subtle) */
.home .hero::before {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(40% 45% at 30% 40%, var(--hero-glow-1), transparent 70%),
        radial-gradient(35% 40% at 72% 60%, var(--hero-glow-2), transparent 70%),
        radial-gradient(18% 22% at 85% 25%, var(--hero-glow-3), transparent 70%);
    animation: hero-glow 18s ease-in-out infinite alternate;
}

@keyframes hero-glow {
    from {
        transform: translate3d(-2%, -1%, 0) scale(1);
        opacity: 0.8;
    }

    to {
        transform: translate3d(2%, 1.5%, 0) scale(1.06);
        opacity: 1;
    }
}

/* Canvas particle network: decorative only, never intercepts input.
   The mask softly fades it behind the headline so the text stays readable. */
.home .hero-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    user-select: none;
    -webkit-mask-image: radial-gradient(ellipse 48% 58% at 50% 52%, rgba(0, 0, 0, 0.3), #000 100%);
    mask-image: radial-gradient(ellipse 48% 58% at 50% 52%, rgba(0, 0, 0, 0.3), #000 100%);
}

.home .hero h1,
.home .hero-lead,
.home .hero .tagline {
    text-shadow: 0 0 22px var(--halo-1), 0 0 6px var(--halo-2);
}

/* Section titles */
.home .section-title {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-3);
    text-align: left;
    font-size: var(--step-3);
    border-bottom: 1px solid var(--line);
}

/* Cards */
.home article h3 {
    margin-bottom: var(--space-3);
    font-size: var(--step-2);
}

.home .article-content .eyebrow {
    margin-bottom: var(--space-2);
}

.home .source {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    color: var(--text-muted);
}

.home .article-content .source {
    font-size: var(--step--1);
}

.home .source a {
    color: var(--text-muted);
}

.home .source a:hover {
    color: var(--cyan);
}

/* Featured story: image beside text on wide screens */
.home .featured {
    flex-direction: row;
    margin-bottom: var(--space-6);
}

.home .featured img {
    width: 55%;
    height: auto;
    min-height: 320px;
    aspect-ratio: 4 / 3;
    border-bottom: 0;
    border-right: 1px solid var(--line);
}

.home .featured .article-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-6);
}

.home .featured h3 {
    font-size: var(--step-3);
}

.home .news-grid {
    margin-bottom: var(--space-7);
}

.home .news-grid article img {
    height: 240px;
}

/* Topics strip */
.home .topics {
    margin-bottom: var(--space-8);
}

.home .topic-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    list-style: none;
}

.home .topic-chip {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--bg-1);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cyan);
}

/* Scroll reveal: items are hidden only after main.js adds .js-reveal to <html>,
   so everything stays visible if JavaScript fails. */
.js-reveal .home [data-reveal] {
    transition: opacity 0.6s var(--ease) var(--reveal-delay, 0s), transform 0.35s var(--ease),
        box-shadow var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.js-reveal .home [data-reveal]:not(.is-visible) {
    opacity: 0;
    transform: translateY(18px);
}

/* Homepage responsive */
@media (max-width: 900px) {
    .home .featured {
        flex-direction: column;
    }

    .home .featured img {
        width: 100%;
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

}

@media (max-width: 768px) {
    .home .hero {
        padding: var(--space-7) var(--space-4);
    }

}

@media (prefers-reduced-motion: reduce) {
    .home .hero::before {
        animation: none;
    }

    .js-reveal .home [data-reveal]:not(.is-visible) {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   10. CUSTOM CURSOR (shared by every page)
   The elements are created by js/main.js. They only exist
   on mouse devices, without reduced motion. The system cursor is hidden only
   once the script adds .has-custom-cursor (after the first mouse movement).
   ========================================================================== */
/* IMPORTANT: the script moves these three boxes with `transform: translate(...)`.
   Never put `scale` on the boxes themselves: the CSS `scale` property is applied
   before `transform`, so it would also scale the translate distance and push the
   cursor away from the pointer. Visuals and scaling live on ::before instead. */
.cursor-dot,
.cursor-ring,
.cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3000;
    pointer-events: none;
    border-radius: 50%;
    opacity: 0;
    will-change: transform;
}

.cursor-dot {
    width: 8px;
    height: 8px;
    transition: opacity 0.2s var(--ease);
}

.cursor-ring {
    width: 36px;
    height: 36px; /* width, height and border-radius are updated by the script */
    transition: opacity 0.25s var(--ease);
}

.cursor-dot::before,
.cursor-ring::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    transition: scale 0.25s var(--ease), background-color 0.25s var(--ease),
        border-color 0.25s var(--ease);
}

.cursor-dot::before {
    background: var(--cyan-strong);
    box-shadow: 0 0 8px rgba(var(--cursor-rgb), 0.7);
}

.cursor-ring::before {
    border: 1.5px solid rgba(var(--cursor-rgb), 0.55);
    background: rgba(var(--cursor-rgb), 0.05);
}

.cursor-glow {
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(var(--cursor-rgb), 0.28), rgba(var(--cursor-rgb), 0) 65%);
    /* opacity is set by the script from the pointer speed */
}

.cursor-visible .cursor-dot,
.cursor-visible .cursor-ring {
    opacity: 1;
}

/* Over links and buttons: the ring brightens and the dot shrinks.
   Small links are wrapped by the ring (its size comes from the link's real
   box, set by the script); larger clickable things such as tiles just get a
   bigger ring. */
.cursor-link .cursor-ring::before {
    border-color: rgba(var(--cursor-strong-rgb), 0.85);
    background: rgba(var(--cursor-rgb), 0.12);
}

.cursor-link:not(.cursor-snap) .cursor-ring::before {
    scale: 1.7;
}

.cursor-link .cursor-dot::before {
    scale: 0.6;
}

/* While the mouse button is held down */
.cursor-down .cursor-ring::before {
    scale: 0.92;
}

.cursor-down.cursor-link:not(.cursor-snap) .cursor-ring::before {
    scale: 1.5;
}

/* Hide the system cursor only once the custom one is running,
   and never over text-entry fields. */
.has-custom-cursor body,
.has-custom-cursor body *:not(input):not(textarea):not(select):not([contenteditable]) {
    cursor: none;
}

.has-custom-cursor #topBtn {
    cursor: none;
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
    .cursor-dot,
    .cursor-ring,
    .cursor-glow {
        display: none;
    }

    .has-custom-cursor body,
    .has-custom-cursor body * {
        cursor: auto;
    }
}

/* ==========================================================================
   11. SHARED SITE FOOTER (all pages)
   ========================================================================== */
.site-footer {
    padding: var(--space-8) var(--space-5) var(--space-6);
    text-align: left;
}

.footer-groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6) var(--space-7);
    max-width: var(--page-width);
    margin: 0 auto var(--space-7);
}

.footer-heading {
    margin-bottom: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--amber);
}

/* The header's global `nav ul` / `nav a` rules also match these footer navs,
   so the footer resets them explicitly (stacked list, normal case, no underline bar). */
.site-footer .footer-group ul {
    display: block;
    list-style: none;
}

.site-footer .footer-group a {
    position: static;
    display: inline-block;
    padding: var(--space-2) 0;
    min-height: 44px;
    line-height: 1.6;
    color: var(--text-muted);
    font-size: var(--step-0);
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    background-image: linear-gradient(var(--cyan), var(--cyan));
    background-repeat: no-repeat;
    background-position: 0 calc(100% - 10px);
    background-size: 0 1px;
    transition: color var(--speed) var(--ease), background-size var(--speed) var(--ease);
}

.footer-group a:hover {
    color: var(--cyan-strong);
    background-size: 100% 1px;
}

.site-footer .footer-group a::after {
    content: none;
}

.footer-bottom {
    max-width: var(--page-width);
    margin: 0 auto;
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
    text-align: center;
}

.footer-bottom p {
    margin: 0 auto var(--space-2);
}

@media (max-width: 768px) {
    .site-footer {
        /* extra bottom space so the fixed Top button never covers the last line */
        padding: var(--space-7) var(--space-4) var(--space-9);
    }

    .footer-groups {
        grid-template-columns: 1fr;
        gap: var(--space-5);
        margin-bottom: var(--space-6);
    }
}

@media (prefers-reduced-motion: reduce) {
    .footer-group a {
        transition: none;
    }
}

/* ==========================================================================
   12. TEXT PAGES (about, editorial policy, privacy, cookies, terms)
   ========================================================================== */
.text-page {
    max-width: 820px;
    margin: var(--space-5) auto 0;
}

.text-page h1 {
    margin-bottom: var(--space-3);
    font-size: var(--step-3);
}

.text-page h2 {
    margin: var(--space-7) 0 var(--space-3);
    font-size: var(--step-2);
}

.text-page h3 {
    margin: var(--space-5) 0 var(--space-2);
    font-size: var(--step-1);
}

.text-page p,
.text-page li {
    color: var(--text);
}

.text-page p {
    margin-bottom: var(--space-4);
}

.text-page ul,
.text-page ol {
    margin: 0 0 var(--space-4) var(--space-5);
    max-width: 70ch;
}

.text-page li {
    margin-bottom: var(--space-2);
}

.text-page .lead {
    font-size: var(--step-1);
    color: var(--text-muted);
}

.text-page .page-meta {
    max-width: none;
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    color: var(--text-muted);
}

.text-page code {
    padding: 0.1em 0.4em;
    border-radius: var(--radius-s);
    background: var(--bg-1);
    border: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 0.9em;
}

.text-page .summary-box {
    margin: var(--space-5) 0;
    padding: var(--space-4) var(--space-5);
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-left: 3px solid var(--cyan);
    border-radius: var(--radius-m);
}

.text-page .summary-box h2 {
    margin-top: 0;
    font-size: var(--step-1);
}

.text-page .summary-box :last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   13. THEMES (dark is the default; light overrides the same tokens)
   js/theme-init.js sets data-theme on <html> before first paint.
   ========================================================================== */
:root[data-theme="light"] {
    color-scheme: light;

    --bg-0: #f7f9fc;
    --bg-1: #eef2f8;
    --surface: #ffffff;
    --surface-2: #f1f5fa;
    --line: #d5deea;

    --text: #0e1a2b;
    --text-muted: #4a5b73;

    /* Accent TEXT colours are deeper than the dark theme's so they stay readable on white */
    --cyan: #0e7490;
    --cyan-strong: #155e75;
    --cyan-glow: rgba(14, 116, 144, 0.12);
    --amber: #a84a08;
    --amber-glow: rgba(180, 83, 9, 0.08);

    --shadow-1: 0 1px 3px rgba(14, 26, 43, 0.12);
    --shadow-2: 0 8px 24px rgba(14, 26, 43, 0.12);
    --shadow-3: 0 18px 40px rgba(14, 26, 43, 0.16);

    --header-bg: rgba(247, 249, 252, 0.88);
    --hero-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(238, 242, 248, 0.55));
    --hero-glow-1: rgba(14, 116, 144, 0.10);
    --hero-glow-2: rgba(37, 99, 235, 0.07);
    --hero-glow-3: rgba(180, 83, 9, 0.05);
    --halo-1: rgba(247, 249, 252, 0.95);
    --halo-2: rgba(247, 249, 252, 0.85);
    --quote-bg: rgba(14, 116, 144, 0.07);
    --quote-bg-amber: rgba(180, 83, 9, 0.07);
    --cursor-rgb: 14, 116, 144;
    --cursor-strong-rgb: 21, 94, 117;
    --particle-1: 14, 116, 144;
    --particle-2: 37, 99, 235;
    --particle-3: 180, 83, 9;
    --particle-boost: 1.6;
}

:root[data-theme="light"] .home .hero {
    box-shadow: var(--shadow-1);
}

/* Short colour fade while switching (removed again by js/main.js, skipped for reduced motion) */
@media (prefers-reduced-motion: no-preference) {
    .theme-changing,
    .theme-changing *,
    .theme-changing *::before,
    .theme-changing *::after {
        transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease,
            box-shadow 0.25s ease, fill 0.25s ease, stroke 0.25s ease !important;
    }
}

/* ---- Theme switch (sun / moon) ---- */
.theme-toggle {
    display: none; /* only shown when scripts run (the html element gets .theme-js) */
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 44px; /* comfortable tap target; the visible pill inside is smaller */
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--radius-pill);
    cursor: pointer;
    color: var(--text-muted);
}

.theme-js .theme-toggle {
    display: inline-flex;
}

.theme-toggle__track {
    position: relative;
    display: block;
    width: 60px;
    height: 32px;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    transition: border-color var(--speed) var(--ease), background-color var(--speed) var(--ease);
}

.theme-toggle:hover .theme-toggle__track {
    border-color: var(--cyan);
}

.theme-toggle__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    background: var(--cyan);
    border-radius: 50%;
    transform: translateX(28px); /* dark: thumb sits on the moon */
    transition: transform 0.25s var(--ease), background-color var(--speed) var(--ease);
}

:root[data-theme="light"] .theme-toggle__thumb {
    transform: translateX(0); /* light: thumb sits on the sun */
}

.theme-toggle svg {
    position: absolute;
    top: 7px;
    z-index: 1;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.theme-toggle .icon-sun {
    left: 7px;
}

.theme-toggle .icon-moon {
    right: 7px;
}

/* The icon under the thumb takes the page background colour; the other stays muted */
:root:not([data-theme="light"]) .theme-toggle .icon-moon,
:root[data-theme="light"] .theme-toggle .icon-sun {
    color: var(--bg-0);
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle__thumb,
    .theme-toggle__track {
        transition: none;
    }
}

/* ---- Classes that replace old inline colours ---- */
.article-content .source-line {
    font-size: 0.8em;
    color: var(--text-muted);
}

.source-line a {
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.source-line a:hover {
    color: var(--cyan);
}

.pull-quote {
    margin-top: 40px;
    padding: 20px;
    background: var(--quote-bg);
    border-left: 4px solid var(--cyan);
}

.pull-quote--amber {
    background: var(--quote-bg-amber);
    border-left-color: var(--amber);
}

/* ==========================================================================
   14. TOPICS DROPDOWN (disclosure navigation) AND SKIP-LINK TARGET
   Markup: <li class="nav-dropdown"> link + button + <ul class="nav-dropdown__panel">.
   The button is only shown when scripts run (html.js); without scripts the
   "Topics" link still goes to the hub page.
   ========================================================================== */
main:focus {
    outline: none; /* the skip link moves focus here; it is a landmark, not a control */
}

.skip-link:focus,
.skip-link:focus-visible {
    top: var(--space-4);
    outline: 2px solid var(--text);
    outline-offset: 2px;
}

/* The Topics item is taller (44px chevron button), so centre every nav item on the row */
header nav > ul {
    align-items: center;
}

.nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-dropdown__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 44px;
    margin-left: -2px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--radius-s);
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--speed) var(--ease);
}

.js .nav-dropdown__toggle {
    display: inline-flex;
}

.nav-dropdown__toggle:hover,
.nav-dropdown__toggle[aria-expanded="true"] {
    color: var(--text);
}

.nav-dropdown__toggle svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--speed) var(--ease);
}

.nav-dropdown__toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* The panel resets the header's global `nav ul` / `nav a` styles, as the footer does */
.nav-dropdown .nav-dropdown__panel {
    position: absolute;
    top: calc(100% + 6px);
    left: -12px;
    z-index: 1100;
    display: block;
    min-width: 300px;
    margin: 0;
    padding: var(--space-2);
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-3);
    animation: nav-panel-in 0.16s var(--ease);
}

.nav-dropdown .nav-dropdown__panel[hidden] {
    display: none;
}

@keyframes nav-panel-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.nav-dropdown__panel a {
    position: static;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-s);
    color: var(--text);
    font-size: var(--step-0);
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
}

.nav-dropdown__panel a::after {
    content: none;
}

.nav-dropdown__panel a:hover {
    background: var(--bg-1);
    color: var(--cyan);
}

.nav-dropdown__panel a[aria-current="page"] {
    color: var(--cyan);
    font-weight: 600;
}

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

    .nav-dropdown__toggle svg {
        transition: none;
    }
}

/* ==========================================================================
   15. TOPICS HUB AND TOPIC PAGE COMPONENTS
   Shared by topics.html and the topic pages (which also use .text-page, section 12).
   ========================================================================== */

/* Breadcrumb */
.breadcrumb {
    margin-bottom: var(--space-5);
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-2);
    list-style: none;
    font-family: var(--font-mono);
    font-size: var(--step--1);
}

.breadcrumb li + li::before {
    content: "\203A";
    margin-right: var(--space-2);
    color: var(--text-muted);
}

/* The breadcrumb is a <nav>, so it also matches the header's global `nav a` rules;
   reset those here (normal case, no underline bar) and let long page titles wrap. */
.breadcrumb a {
    position: static;
    display: inline-block;
    padding: 6px 0;
    color: var(--text-muted);
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

.breadcrumb a::after {
    content: none;
}

.breadcrumb a:hover {
    color: var(--cyan);
}

.breadcrumb a[aria-current="page"] {
    color: var(--text);
    text-decoration: none;
}

/* Hub intro and section headings */
.page-intro {
    max-width: 820px;
    margin-bottom: var(--space-8);
}

.page-intro h1 {
    margin-bottom: var(--space-4);
    font-size: var(--step-4);
}

.page-intro .lead {
    margin-bottom: var(--space-4);
    font-size: var(--step-1);
    color: var(--text-muted);
}

.topic-section {
    margin-bottom: var(--space-8);
}

.topic-section .section-title {
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    font-size: var(--step-3);
    border-bottom: 1px solid var(--line);
}

.text-block p,
.text-block li {
    max-width: 70ch;
}

.connect-list {
    margin: 0 0 var(--space-4) var(--space-5);
}

.connect-list li {
    margin-bottom: var(--space-3);
}

/* Topic cards: one wide "start here" card, then a three-column grid */
.topic-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
    list-style: none;
}

.topic-cards > li {
    display: flex;
    min-width: 0;
}

.topic-cards > li:first-child {
    grid-column: 1 / -1;
}

.topic-card {
    flex: 1;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
}

.topic-card--featured {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-5);
    padding: var(--space-6);
}

.topic-card--featured h3 {
    font-size: var(--step-3);
}

.topic-card--accent {
    border-color: var(--amber);
}

.topic-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    color: var(--cyan);
}

.topic-card--accent .topic-icon {
    color: var(--amber);
}

.topic-icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.topic-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.topic-card h3 {
    margin: 0 0 var(--space-3);
    font-size: var(--step-2);
}

.topic-card__body p {
    margin-bottom: var(--space-4);
    color: var(--text-muted);
    font-size: 0.95rem;
}

.topic-card__body .eyebrow {
    margin-bottom: var(--space-2);
    font-size: var(--step--1);
}

.topic-card .read-more {
    margin-top: auto;
    padding: var(--space-2) 0;
    min-height: 44px;
}

@media (max-width: 900px) {
    .topic-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .topic-cards > li:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .topic-cards {
        grid-template-columns: 1fr;
    }

    .topic-card--featured {
        flex-direction: column;
        padding: var(--space-5);
    }
}

/* ---- Components for the topic pages ---- */

/* "Established / In development / Forecast": the text label, border style and symbol all differ,
   so the meaning never depends on colour alone */
.status {
    display: inline-block;
    padding: 0.1em 0.65em;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--bg-1);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    vertical-align: middle;
}

.status::before {
    content: "\25CF  ";
    content: "\25CF  " / "";
}

.status--development {
    border-style: dashed;
    border-color: var(--cyan);
}

.status--development::before {
    content: "\25D0  ";
    content: "\25D0  " / "";
}

.status--forecast {
    border-style: dotted;
    border-color: var(--amber);
}

.status--forecast::before {
    content: "\25CB  ";
    content: "\25CB  " / "";
}

/* Tables scroll sideways inside their own box on small screens (the box is keyboard-focusable) */
.table-wrap {
    margin: 0 0 var(--space-5);
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
}

.table-wrap table {
    width: 100%;
    min-width: 36rem;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.table-wrap caption {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-weight: 600;
    color: var(--text);
}

.table-wrap th,
.table-wrap td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    vertical-align: top;
    border-top: 1px solid var(--line);
}

.table-wrap thead th {
    background: var(--bg-1);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.table-wrap tbody th {
    font-weight: 600;
    color: var(--text);
}

.table-wrap tbody tr:nth-child(even) {
    background: var(--bg-1);
}

.table-wrap:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}

/* Key terms (definition lists) */
.key-terms {
    margin: 0 0 var(--space-5);
}

.key-terms dt {
    margin-top: var(--space-4);
    font-weight: 600;
    color: var(--text);
}

.key-terms dd {
    margin: var(--space-1) 0 0;
    max-width: 70ch;
    color: var(--text-muted);
}

/* Related pages and references */
.related {
    margin: var(--space-7) 0 var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
}

.related h2 {
    margin-top: 0;
    font-size: var(--step-1);
}

.related ul {
    margin-bottom: 0;
}

.refs {
    margin: 0 0 var(--space-5) var(--space-5);
}

.refs li {
    margin-bottom: var(--space-3);
    overflow-wrap: anywhere; /* long document titles and URLs never cause sideways scrolling */
}

.refs .ref-note {
    display: block;
    color: var(--text-muted);
    font-size: var(--step--1);
}

.text-page a {
    overflow-wrap: anywhere;
}

/* ==========================================================================
   16. TOPIC PAGE ADDITIONS (citations and "our interpretation" notes)
   ========================================================================== */

/* Numbered citation markers, e.g. [1] */
.cite {
    margin-left: 1px;
    font-family: var(--font-mono);
    font-size: 0.72em;
    line-height: 0;
    white-space: nowrap;
}

.cite a {
    padding: 0 1px;
    text-decoration: none;
}

.cite a:hover {
    text-decoration: underline;
}

/* Visually and semantically separates our own reading of the evidence from the evidence itself */
.text-page .note {
    max-width: 70ch;
    margin: 0 0 var(--space-5);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-left: 3px solid var(--amber);
    border-radius: var(--radius-s);
    font-size: 0.95rem;
}

/* The reference you jumped to from a citation */
.refs li:target {
    background: var(--bg-1);
    outline: 2px solid var(--cyan);
    outline-offset: 4px;
    border-radius: var(--radius-s);
}

/* Table cells hold long explanations and citations: let them wrap and keep readable line lengths */
.table-wrap td,
.table-wrap th {
    min-width: 9rem;
    overflow-wrap: anywhere;
}

.table-wrap td {
    max-width: 34rem;
}

/* Jumping to a citation or reference must land below the sticky header (taller on phones) */
html {
    scroll-padding-top: 5rem;
}

/* ==========================================================================
   17. ARTICLE FIGURES (images with captions inside .text-page articles)
   ========================================================================== */
.text-page .figure {
    margin: var(--space-5) 0 var(--space-6);
}

/* Overrides the generic .story-content img rule (capped height, cropping, margin) so the whole picture shows */
.text-page .figure img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    margin: 0;
    object-fit: contain;
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-2);
}

.text-page .figure figcaption {
    max-width: 70ch;
    margin-top: var(--space-3);
    color: var(--text-muted);
    font-size: var(--step--1);
    line-height: 1.55;
}

.text-page .figure .figure-credit {
    display: block;
    margin-top: var(--space-1);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ==========================================================================
   18. DIAGRAMS AND APPLICATION CARDS (IoT article)
   Built from HTML, CSS and inline SVG icons so text wraps, scales and follows the theme.
   ========================================================================== */
.text-page .diagram {
    margin: var(--space-5) 0 var(--space-6);
}

.text-page .diagram figcaption {
    max-width: 70ch;
    margin-top: var(--space-3);
    color: var(--text-muted);
    font-size: var(--step--1);
    line-height: 1.55;
}

/* Four stages, left to right on wide screens and top to bottom on phones */
.text-page .flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    max-width: none;
    list-style: none;
}

.text-page .flow > li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-4);
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
}

/* The arrow between stages is decorative: the numbered list already gives the order */
.text-page .flow > li:not(:last-child)::after {
    content: "\2192";
    content: "\2192" / "";
    position: absolute;
    top: 1.25rem;
    right: calc(var(--space-5) * -0.5 - 0.6rem);
    z-index: 1;
    width: 1.2rem;
    text-align: center;
    color: var(--cyan);
    font-size: 1.25rem;
    line-height: 1;
}

.flow__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    color: var(--cyan);
}

.flow__icon svg,
.app-card__icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.flow__num {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--amber);
}

.flow__title {
    font-family: var(--font-display);
    font-size: 1.1rem; /* the four columns are narrow; this keeps "Connectivity" inside its card */
    font-weight: 600;
    line-height: 1.2;
    color: var(--text);
    overflow-wrap: anywhere;
}

.text-page .flow p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.text-page .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: var(--space-1) 0 0;
    padding: 0;
    max-width: none;
    list-style: none;
}

.text-page .chips li {
    margin: 0;
    padding: 0.1em 0.65em;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

.text-page .diagram__qualify {
    max-width: none;
    margin: var(--space-4) 0 0;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-left: 3px solid var(--amber);
    border-radius: var(--radius-s);
    font-size: 0.92rem;
}

@media (max-width: 760px) {
    .text-page .flow {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .text-page .flow > li:not(:last-child)::after {
        content: "\2193";
        content: "\2193" / "";
        top: auto;
        right: auto;
        bottom: calc(var(--space-6) * -0.5 - 0.7rem);
        left: calc(50% - 0.6rem);
    }
}

/* Application cards: two columns on wide screens, one on phones */
.text-page .app-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin: 0 0 var(--space-5);
    padding: 0;
    max-width: none;
    list-style: none;
}

.text-page .app-cards > li {
    display: flex;
    margin: 0;
}

.app-card {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-4) var(--space-5);
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
}

.app-card__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.app-card__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    color: var(--cyan);
}

.text-page .app-card h3 {
    margin: 0;
    font-size: var(--step-1);
}

.app-card__facts {
    margin: 0;
}

.app-card__facts dt {
    margin-top: var(--space-3);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--amber);
}

.app-card__facts dt:first-child {
    margin-top: 0;
}

/* The prefix symbols are decorative: the label text carries the meaning */
.app-card__facts dt.is-benefit::before {
    content: "+ ";
    content: "+ " / "";
}

.app-card__facts dt.is-limit::before {
    content: "! ";
    content: "! " / "";
}

.app-card__facts dd {
    margin: var(--space-1) 0 0;
    max-width: none;
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.55;
}

@media (max-width: 640px) {
    .text-page .app-cards {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   19. BATCH 2 ADDITIONS (5G and drone pages)
   Three-column card rows, drone silhouettes and photo attributions.
   ========================================================================== */
.text-page .figure .figure-attrib {
    display: block;
    margin-top: var(--space-1);
    font-size: 0.8rem;
    line-height: 1.5;
}

.text-page .figure .figure-attrib a {
    overflow-wrap: anywhere;
}

.text-page .app-cards--wide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.type-art {
    display: inline-flex;
    flex: 0 0 auto;
    width: 64px;
    color: var(--cyan);
}

.type-art svg {
    width: 100%;
    height: auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 960px) {
    .text-page .app-cards--wide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .text-page .app-cards--wide {
        grid-template-columns: 1fr;
    }
}

.text-page .app-cards--wide .app-card h3 {
    min-width: 0;
    font-size: 1.05rem;
    overflow-wrap: anywhere;
}

/* ==========================================================================
   20. REALITY-VIRTUALITY CONTINUUM (AR, VR and MR article)
   Text labels in HTML so they wrap and follow the theme; the SVG arrow carries no text.
   ========================================================================== */
.continuum {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
}

.text-page .continuum p {
    margin: 0;
    max-width: none;
}

.continuum__title {
    grid-column: 1 / -1;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--amber);
}

.continuum__span {
    padding: var(--space-2) var(--space-3);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text);
    border-radius: var(--radius-s, 6px);
}

.continuum__span--xr {
    grid-column: 1 / -1;
    border: 2px solid var(--cyan);
}

.continuum__span--mr {
    grid-column: 2 / 4;
    border: 2px dashed var(--amber);
}

.continuum__scale {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.continuum__scale li {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    margin: 0;
    padding: var(--space-3);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-s, 6px);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text);
}

.continuum__scale li strong {
    overflow-wrap: anywhere;
}

.continuum__arrow {
    grid-column: 1 / -1;
    width: 100%;
    height: 24px;
    fill: none;
    stroke: var(--cyan);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.continuum__ends {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

@media (max-width: 760px) {
    .continuum {
        grid-template-columns: minmax(0, 1fr);
    }

    .continuum__span--mr,
    .continuum__span--xr {
        grid-column: 1;
    }

    .continuum__scale {
        grid-template-columns: minmax(0, 1fr);
    }

    .continuum__arrow,
    .continuum__ends {
        grid-column: 1;
    }
}

.text-page .continuum__scale {
    margin: 0;
    padding: 0;
    max-width: none;
}

/* ==========================================================================
   21. TECHNOLOGY RELATIONSHIP MAP AND REFLECTION LIST (comparison article)
   ========================================================================== */
.relmap {
    display: grid;
    gap: var(--space-4);
}

.relmap__hub {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--bg-1);
    border: 2px solid var(--cyan);
    border-radius: var(--radius-m);
}

.relmap__hub svg {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    fill: none;
    stroke: var(--cyan);
    stroke-width: 2;
    stroke-linecap: round;
}

.text-page .relmap h3 {
    margin: 0 0 var(--space-1);
    font-size: var(--step-1);
}

.text-page .relmap p {
    margin: 0;
    max-width: none;
}

.text-page .relmap__nodes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    max-width: none;
    list-style: none;
}

.text-page .relmap__nodes > li {
    display: flex;
    margin: 0;
}

.relmap__node {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-4) var(--space-5);
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    font-size: 0.95rem;
    line-height: 1.55;
}

.text-page .relmap__badge {
    align-self: flex-start;
    padding: 2px var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px;
}

.relmap__badge.is-documented {
    border: 1px solid var(--cyan);
    color: var(--text);
}

.relmap__badge.is-documented::before {
    content: "\2713  ";
    content: "\2713  " / "";
}

.relmap__badge.is-possible {
    border: 1px dashed var(--amber);
    color: var(--text);
}

.relmap__badge.is-possible::before {
    content: "?  ";
    content: "?  " / "";
}

.text-page .relmap__link {
    color: var(--text-muted);
}

.text-page .reflect {
    padding-left: 1.4rem;
}

.text-page .reflect > li {
    margin-bottom: var(--space-3);
}

.reflect__see {
    display: block;
    margin-top: var(--space-1);
    color: var(--text-muted);
    font-size: 0.9rem;
}

@media (max-width: 640px) {
    .text-page .relmap__nodes {
        grid-template-columns: minmax(0, 1fr);
    }

    .relmap__hub {
        padding: var(--space-3) var(--space-4);
    }
}

/* ==========================================================================
   22. WIDE EDUCATIONAL ARTICLES
   The topic articles share .text-page (max-width 820px, set for the plain text pages). Adding
   .text-page--wide lifts that cap so they match the story pages: the article then fills <main>
   (max-width var(--page-width)), giving tables, diagrams and cards the same room. Paragraphs and
   lists keep their own 70ch limit, so line lengths stay comfortable.
   ========================================================================== */
.text-page.text-page--wide {
    max-width: none;
}


/* ==========================================================================
   23. OLDER PAGES: CLASSES THAT REPLACE INLINE STYLES
   The story pages, News and Contact once carried these values as style="..." attributes.
   They are the same values, now shared. The legacy --neon-* colour variables stay defined above
   because these rules (and 'Orbitron', mapped to the headline font in section 1) still use them.
   ========================================================================== */

/* The logo is a link to the homepage on every page (the homepage styles its own in section 9) */
a.logo {
    text-decoration: none;
}

a.logo:hover {
    color: var(--cyan);
}

/* Story pages */
.story-content .story-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.story-content .story-title--green { color: var(--neon-green); }
.story-content .story-title--blue { color: var(--neon-blue); }

.story-content .story-body {
    line-height: 1.8;
    font-size: 1.1rem;
}

/* Section headings inside a story: h2 in the outline, drawn at the size h3 used before */
.story-content .story-subhead {
    margin-top: 30px;
    margin-bottom: 15px;
    font-size: var(--step-2);
}

.story-content .story-subhead--blue { color: var(--neon-blue); }
.story-content .story-subhead--green { color: var(--neon-green); }
.story-content .story-subhead--purple { color: var(--neon-purple); }

.story-content .story-quote-text {
    font-style: italic;
}

.story-content .story-back {
    margin-top: 50px;
}

.story-content .story-back-link {
    text-decoration: none;
    font-weight: bold;
}

.story-content .story-back-link--green { color: var(--neon-green); }
.story-content .story-back-link--purple { color: var(--neon-purple); }

/* News and Contact page titles */
.page-title {
    text-align: center;
    font-family: 'Orbitron', sans-serif;
}

.page-title--news {
    margin-bottom: 30px;
}

.page-title--spaced {
    margin-bottom: 40px;
    color: var(--text-main);
}


/* ==========================================================================
   24. SITE SEARCH (header form on every page, and the search.html results page)
   ========================================================================== */
.site-search {
    display: flex;
    align-items: center;
    flex: 0 1 15rem;
    min-width: 0;
}

.site-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    padding: 0 var(--space-3);
    background: var(--bg-1);
    color: var(--text);
    border: 1px solid var(--line);
    border-right: 0;
    border-radius: var(--radius-pill) 0 0 var(--radius-pill);
    font: inherit;
    font-size: 0.85rem;
}

.site-search__input::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

.site-search__input:focus-visible,
.site-search__btn:focus-visible,
.site-search__submit:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}

.site-search__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 40px;
    padding: 0;
    background: var(--bg-1);
    color: var(--cyan);
    border: 1px solid var(--line);
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
    cursor: pointer;
    transition: border-color var(--speed) var(--ease), background-color var(--speed) var(--ease);
}

.site-search__btn:hover {
    border-color: var(--cyan);
}

.site-search__btn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

/* The in-page search form on search.html */
.site-search--page {
    display: block;
    flex: none;
    max-width: 38rem;
    margin: var(--space-5) 0;
}

.site-search__label {
    display: block;
    margin-bottom: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.site-search__row {
    display: flex;
    gap: var(--space-2);
}

.site-search--page .site-search__input {
    height: 48px;
    border-right: 1px solid var(--line);
    border-radius: var(--radius-s);
    font-size: 1rem;
}

.site-search__submit {
    flex: 0 0 auto;
    padding: 0 var(--space-5);
    height: 48px;
    background: transparent;
    color: var(--cyan);
    border: 1px solid var(--cyan);
    border-radius: var(--radius-s);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}

.site-search__submit:hover {
    background: var(--cyan);
    color: var(--bg-0);
}

.search-status {
    margin: 0 0 var(--space-4);
    color: var(--text);
}

.text-page .search-results {
    margin: 0 0 var(--space-5);
    padding: 0;
    max-width: none;
    list-style: none;
}

.text-page .search-result,
.text-page .search-empty {
    margin: 0;
    padding: var(--space-4) 0;
    border-top: 1px solid var(--line);
}

.text-page .search-result > * {
    max-width: 70ch;
}

.text-page .search-result__title {
    margin: 0 0 var(--space-1);
    font-size: var(--step-1);
}

.text-page .search-result__type {
    margin: 0 0 var(--space-2);
}

.text-page .search-result p {
    margin-bottom: var(--space-2);
}

.text-page .search-result__excerpt {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.search-page mark {
    background: transparent;
    color: var(--cyan);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.text-page .search-note {
    margin-top: var(--space-5);
    color: var(--text-muted);
    font-size: var(--step--1);
}

/* ==========================================================================
   25. "LATEST FROM TOPICS" CAROUSEL (homepage)
   A row that scrolls sideways inside its own box: three cards on wide screens, two on medium,
   one on phones. Previous / Next buttons are added by js/main.js; nothing moves on its own.
   ========================================================================== */
.topics-carousel {
    --slides: 3;
    --slide-gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.topics-carousel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2) var(--space-5);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--line);
}

.home .topics-carousel .section-title {
    margin: 0;
    padding: 0;
    border: 0;
}

.topics-carousel__all {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cyan);
}

.topics-carousel__frame {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.topics-carousel__track {
    display: flex;
    flex: 1 1 auto;
    gap: var(--slide-gap);
    min-width: 0;
    margin: 0;
    padding: 4px 2px;
    max-width: none;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
}

/* The scrollbar is only hidden when scripts run (the buttons then replace it) */
.js .topics-carousel__track {
    scrollbar-width: none;
}

.js .topics-carousel__track::-webkit-scrollbar {
    display: none;
}

.topic-slide {
    flex: 0 0 calc((100% - (var(--slides) - 1) * var(--slide-gap)) / var(--slides));
    min-width: 0;
    scroll-snap-align: start;
}

.topic-slide__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    color: var(--text);
    text-decoration: none;
    transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.topic-slide__link:hover {
    border-color: var(--cyan);
    box-shadow: 0 0 24px var(--cyan-glow);
}

.topic-slide__link:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}

.topic-slide__media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bg-2, var(--bg-1));
    border-bottom: 1px solid var(--line);
}

.topic-slide__media img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.topic-slide__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
}

.topics-carousel .topic-slide__body h3 {
    margin: 0;
    font-size: var(--step-1);
}

.topics-carousel .topic-slide__body p {
    margin: 0;
    max-width: none;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.55;
}

.topic-slide__cta {
    margin-top: auto;
    padding-top: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cyan);
}

.topics-carousel__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: var(--bg-1);
    color: var(--cyan);
    border: 1px solid var(--line);
    border-radius: 50%;
    cursor: pointer;
    transition: border-color var(--speed) var(--ease), opacity var(--speed) var(--ease);
}

.topics-carousel__btn[hidden] {
    display: none;
}

.topics-carousel__btn:hover:not(:disabled) {
    border-color: var(--cyan);
}

.topics-carousel__btn:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}

.topics-carousel__btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.topics-carousel__btn svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 1000px) {
    .topics-carousel {
        --slides: 2;
    }
}

@media (max-width: 640px) {
    .topics-carousel {
        --slides: 1;
    }

    .topics-carousel__frame {
        gap: var(--space-2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .topic-slide__link,
    .topics-carousel__btn,
    .site-search__btn,
    .site-search__submit {
        transition: none;
    }
}

/* ==========================================================================
   26. THREE-ERA TIMELINE (used by past-to-future.html)
   Three connected columns on wide screens; one stacked column with a vertical line on narrow
   screens. Plain CSS: nothing here moves.
   ========================================================================== */
.timeline__list {
    --era-gap: var(--space-6);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--era-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.era {
    position: relative;
    padding-top: var(--space-6);
}

/* the connecting line runs from this era's dot to the next era's dot */
.era::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 0;
    right: calc(-1 * var(--era-gap));
    height: 2px;
    background: var(--line);
}

.era:last-child::before {
    right: 0;
    background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px);
}

.era__dot {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bg-0);
    border: 2px solid var(--text-muted);
}

.era--present .era__dot {
    background: var(--cyan);
    border-color: var(--cyan);
    box-shadow: 0 0 0 4px var(--cyan-glow);
}

.era--future .era__dot {
    border: 2px dashed var(--cyan);
}

.era__label {
    margin: 0 0 var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cyan);
}

.era .era__title {
    margin: 0 0 var(--space-3);
    font-size: var(--step-1);
}

.era .era__text {
    margin: 0 0 var(--space-4);
    max-width: none;
    color: var(--text-muted);
}

.era .era__note {
    color: var(--text);
    font-style: italic;
}

.era__examples {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.era__examples li {
    padding: var(--space-3) var(--space-4);
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    font-size: 0.95rem;
    line-height: 1.55;
}

.era--future .era__examples li {
    border-style: dashed;
}

.era__when {
    display: block;
    margin-bottom: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.08em;
    color: var(--cyan);
}

.era__examples a {
    display: block;
    margin-top: var(--space-1);
    color: var(--cyan);
}

@media (max-width: 768px) {
    .timeline__list {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-6);
    }

    .era {
        padding: 0 0 0 var(--space-7);
    }

    /* the line becomes vertical, down the left edge */
    .era::before,
    .era:last-child::before {
        top: 8px;
        bottom: calc(-1 * var(--space-6));
        left: 7px;
        right: auto;
        width: 2px;
        height: auto;
        background: var(--line);
    }

    .era:last-child::before {
        bottom: 0;
        background: repeating-linear-gradient(180deg, var(--line) 0 8px, transparent 8px 14px);
    }
}

/* ==========================================================================
   27. "TEST YOUR TECH KNOWLEDGE" QUIZ (homepage; behaviour in js/quiz.js)
   ========================================================================== */
.quiz {
    margin-bottom: var(--space-8);
}

.quiz__head {
    max-width: 44rem;
    margin: 0 auto var(--space-6);
}

.home .quiz .section-title {
    display: block;
    margin: 0 0 var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--line);
}

.quiz__intro {
    margin: 0;
    color: var(--text-muted);
}

.quiz__panel {
    max-width: 44rem;
    margin: 0 auto;
    padding: var(--space-6);
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 4px solid var(--cyan);
    border-radius: var(--radius-l);
}

.quiz__nojs {
    margin: 0;
}

.quiz__progress {
    margin: 0 0 var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cyan);
}

.quiz__bar {
    display: block;
    height: 6px;
    margin-bottom: var(--space-5);
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.quiz__bar-fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--cyan);
    transition: width 0.4s var(--ease);
}

.quiz__fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.quiz__question {
    display: block;
    width: 100%;
    margin: 0 0 var(--space-4);
    padding: 0;
    font-family: var(--font-display);
    font-size: var(--step-2);
    line-height: 1.25;
    color: var(--text);
}

.quiz__question:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 4px;
}

.quiz__options {
    display: grid;
    gap: var(--space-3);
}

.quiz__option {
    position: relative;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    cursor: pointer;
    transition: border-color var(--speed) var(--ease), background-color var(--speed) var(--ease);
}

.quiz__option:hover {
    border-color: var(--cyan);
}

/* the real radio button stays in place for keyboards and screen readers; the custom marker is drawn over it */
.quiz__input {
    position: absolute;
    opacity: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
}

.quiz__mark {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border: 2px solid var(--text-muted);
    border-radius: 50%;
    background: transparent;
    box-shadow: inset 0 0 0 4px var(--bg-1);
}

.quiz__text {
    flex: 1 1 14rem;
    min-width: 0;
}

.quiz__tag {
    flex: 0 0 100%;
    padding-left: calc(20px + var(--space-3));
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.quiz__tag:empty {
    display: none;
}

/* chosen answer: filled marker plus a thicker border (not colour alone) */
.quiz__option.is-selected {
    border-color: var(--cyan);
    border-width: 2px;
    padding: calc(var(--space-3) - 1px) calc(var(--space-4) - 1px);
    background: var(--cyan-glow);
    font-weight: 600;
}

.quiz__option.is-selected .quiz__mark {
    border-color: var(--cyan);
    background: var(--cyan);
}

.quiz__option:has(.quiz__input:focus-visible) {
    outline: 2px solid var(--cyan);
    outline-offset: 3px;
}

.quiz__option.is-correct {
    border-color: var(--cyan);
    border-width: 2px;
}

.quiz__option.is-correct .quiz__tag {
    color: var(--cyan);
}

.quiz__option.is-correct .quiz__mark {
    border-color: var(--cyan);
    background: var(--cyan);
}

.quiz__option.is-wrong {
    border-color: var(--amber);
    border-width: 2px;
    border-style: dashed;
    background: var(--amber-glow);
}

.quiz__option.is-wrong .quiz__tag {
    color: var(--amber);
}

.quiz__option.is-wrong .quiz__mark {
    border-color: var(--amber);
    background: var(--amber);
}

.quiz__option:has(.quiz__input:disabled),
.quiz__input:disabled {
    cursor: default;
}

.quiz__feedback {
    margin: var(--space-4) 0 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

.quiz__feedback:empty {
    display: none;
}

.quiz__feedback--right,
.quiz__feedback--wrong,
.quiz__feedback--warn {
    padding: var(--space-3) var(--space-4);
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-left-width: 4px;
    border-radius: var(--radius-m);
}

.quiz__feedback--right {
    border-left-color: var(--cyan);
}

.quiz__feedback--wrong,
.quiz__feedback--warn {
    border-left-color: var(--amber);
}

.quiz__actions {
    margin-top: var(--space-5);
}

.quiz__btn {
    min-height: 44px;
    padding: 0 var(--space-6);
    background: transparent;
    color: var(--cyan);
    border: 1px solid var(--cyan);
    border-radius: var(--radius-s);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}

.quiz__btn:hover {
    background: var(--cyan);
    color: var(--bg-0);
}

.quiz__btn:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 3px;
}

.quiz__btn[hidden],
.quiz__form[hidden],
.quiz__result[hidden] {
    display: none;
}

.quiz__result-title {
    margin: 0 0 var(--space-3);
    font-size: var(--step-2);
}

.quiz__result-title:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 4px;
}

.quiz__score {
    margin: 0 0 var(--space-2);
    font-family: var(--font-display);
    font-size: var(--step-3);
    color: var(--cyan);
}

.quiz__result-note {
    margin: 0 0 var(--space-5);
    color: var(--text-muted);
}

@media (max-width: 640px) {
    .quiz__panel {
        padding: var(--space-5) var(--space-4);
    }

    .quiz__btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .quiz__bar-fill,
    .quiz__option,
    .quiz__btn {
        transition: none;
    }
}

/* ==========================================================================
   28. FROM PAST TO FUTURE: homepage preview and the weekly feature page (past-to-future.html)
   The page body between the PTF markers is written by scripts/past-to-future.mjs.
   ========================================================================== */
.ptf-preview {
    margin-bottom: var(--space-8);
}

.ptf-preview__link {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    color: var(--text);
    text-decoration: none;
    transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.ptf-preview__link:hover {
    border-color: var(--cyan);
    box-shadow: 0 0 24px var(--cyan-glow);
}

.ptf-preview__link:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 3px;
}

.ptf-preview__media {
    flex: 0 0 400px;
    display: block;
    border-right: 1px solid var(--line);
    background: #07101f; /* the picture has its own dark background in both themes */
}

.ptf-preview__media picture {
    display: block;
    height: 100%;
}

.ptf-preview__media img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.ptf-preview__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-6);
}

/* three dots joined by a line: Past, Present, Future */
.ptf-preview__steps {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 96px;
    height: 12px;
    margin-bottom: var(--space-1);
}

.ptf-preview__steps::before {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    top: 5px;
    height: 2px;
    background: var(--line);
}

.ptf-preview__steps i {
    position: relative;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bg-1);
    border: 2px solid var(--text-muted);
}

.ptf-preview__steps i:nth-child(2) {
    background: var(--cyan);
    border-color: var(--cyan);
}

.ptf-preview__steps i:nth-child(3) {
    border: 2px dashed var(--cyan);
}

.home .ptf-preview .ptf-preview__title {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: var(--font-display);
    font-size: var(--step-3);
    line-height: 1.15;
    text-align: left;
}

.ptf-preview__tag {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-style: italic;
    color: var(--cyan);
}

.ptf-preview__text {
    max-width: 52ch;
    color: var(--text-muted);
}

.ptf-preview__cta {
    margin-top: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cyan);
}

/* tablets: the picture shrinks and stays beside the text */
@media (max-width: 768px) {
    .ptf-preview__media {
        flex: 0 0 42%;
    }

    .ptf-preview__media {
        display: flex;
        align-items: center;
    }

    .ptf-preview__media picture {
        height: auto;
    }

    .ptf-preview__media img {
        height: auto;
        object-fit: contain;
    }

    .ptf-preview__body {
        padding: var(--space-5) var(--space-4);
    }
}

/* phones: the picture goes on top, whole */
@media (max-width: 560px) {
    .ptf-preview__link {
        flex-direction: column;
    }

    .ptf-preview__media {
        flex: none;
        display: block;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
}

/* ---- the feature page ---- */
.ptf .lead {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--cyan);
}

.ptf-legend {
    max-width: 46rem;
    margin: var(--space-4) 0 var(--space-6);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
}

.ptf-legend summary,
.ptf-details summary {
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cyan);
}

.ptf-legend summary:focus-visible,
.ptf-details summary:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 3px;
}

.ptf-legend ul {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
}

.ptf-kind {
    display: inline-block;
    margin-right: var(--space-2);
    padding: 1px var(--space-2);
    border: 1px solid var(--cyan);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.5;
    color: var(--text);
    vertical-align: 1px;
}

/* different border styles as well as different words, so the labels never rely on colour */
.ptf-kind--established {
    background: var(--cyan-glow);
}

.ptf-kind--research {
    border-style: dotted;
}

.ptf-kind--forecast {
    border-style: dashed;
    border-color: var(--amber);
}

.ptf-latest {
    margin-top: var(--space-7);
}

.ptf-eyebrow {
    margin: 0 0 var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cyan);
}

.text-page .ptf-title {
    margin: 0 0 var(--space-2);
    font-size: var(--step-3);
    line-height: 1.15;
}

.ptf-meta {
    margin: 0 0 var(--space-4);
    color: var(--text-muted);
    font-size: 0.95rem;
}

.text-page .ptf-intro {
    max-width: 62ch;
    font-size: var(--step-1);
}

.ptf-figure {
    margin: var(--space-5) 0 var(--space-7);
}

.ptf-figure picture,
.ptf-figure img {
    display: block;
    width: 100%;
}

.ptf-figure img {
    height: auto;
    max-height: 520px;
    object-fit: cover;
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
}

.ptf-figure figcaption {
    margin-top: var(--space-2);
    color: var(--text-muted);
    font-size: var(--step--1);
}

.ptf-figure--small {
    margin: var(--space-4) 0 var(--space-5);
}

.ptf-figure--small img {
    max-height: 300px;
}

.ptf-timeline {
    margin-bottom: var(--space-6);
}

.era__when + .ptf-kind {
    margin-top: 0;
}

.ptf-cite a {
    display: inline;
    margin: 0;
    color: var(--cyan);
}

.text-page .ptf-note {
    margin: var(--space-3) 0 0;
    max-width: none;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-style: italic;
}

.ptf-sources {
    margin: var(--space-6) 0 var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
}

.text-page .ptf-sources__title {
    margin: 0 0 var(--space-3);
    font-size: var(--step-0);
}

.ptf-sources ol {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding-left: var(--space-5);
}

.ptf-sources li {
    max-width: none;
    font-size: 0.9rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.ptf-sources__note {
    color: var(--text-muted);
}

.ptf-related {
    margin: var(--space-4) 0 0;
    color: var(--text-muted);
}

.ptf-archive {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--line);
}

.ptf-empty,
.ptf-archive__intro {
    color: var(--text-muted);
}

.ptf-archive__list {
    display: grid;
    gap: var(--space-5);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}

.ptf-card {
    padding: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
}

.text-page .ptf-card__title {
    margin: 0 0 var(--space-1);
    font-size: var(--step-2);
}

.ptf-card .timeline__list {
    margin-top: var(--space-5);
}

@media (max-width: 768px) {
    .ptf-card {
        padding: var(--space-4);
    }

    .ptf-sources {
        padding: var(--space-4);
    }
}

/* results screen: score, pie chart and learning links */
.quiz__result-body {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: center;
    margin-top: var(--space-4);
}

.quiz__chart {
    margin: 0;
    text-align: center;
}

.quiz__pie {
    display: block;
    width: 100%;
    max-width: 13rem;
    height: auto;
    margin: 0 auto var(--space-3);
    overflow: visible;
}

.quiz__slice {
    stroke: var(--surface);
    stroke-width: 2;
}

.quiz__slice--right {
    fill: var(--cyan);
}

.quiz__slice--wrong {
    fill: url(#quiz-hatch);
}

.quiz__hatch-bg {
    fill: var(--amber);
}

.quiz__hatch-line {
    stroke: var(--surface);
    stroke-width: 3;
}

.quiz__legend {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
    font-size: 0.95rem;
}

.quiz__legend li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.quiz__legend-total {
    color: var(--text-muted);
}

.quiz__swatch {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.quiz__result-title {
    text-align: left;
}

.quiz__score {
    text-align: left;
}

.quiz__result-note {
    margin: 0 0 var(--space-4);
}

.quiz__links-title {
    margin: 0 0 var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.quiz__links {
    display: grid;
    gap: var(--space-1);
    margin: 0 0 var(--space-5);
    padding-left: var(--space-5);
}

.quiz__links a {
    color: var(--cyan);
}

@media (max-width: 640px) {
    .quiz__result-body {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-5);
    }
}

/* the generic .text-page list rules (indent, 70-character cap, bottom margin) must not squeeze the timeline */
.text-page .timeline__list,
.text-page .era__examples,
.text-page .ptf-sources ol {
    max-width: none;
    margin-left: 0;
}

.text-page .timeline__list {
    margin-bottom: var(--space-6);
    padding: 0;
}

.text-page .era__examples {
    margin-bottom: 0;
    padding: 0;
}

.text-page .era__examples li {
    margin-bottom: 0;
}

.text-page .ptf-sources ol {
    margin-bottom: 0;
    padding-left: var(--space-5);
}

.text-page .ptf-sources li {
    margin-bottom: 0;
}

.text-page .ptf-archive__list {
    max-width: none;
    margin-left: 0;
}

.text-page .ptf-legend ul {
    max-width: none;
    margin-left: 0;
}

.text-page .ptf-legend li,
.text-page .ptf-card li {
    margin-bottom: 0;
}

.text-page .era__text {
    max-width: none;
}

/* ==========================================================================
   29. STORY PAGES: citations and source lists (story-ai, story-quantum, story-green)
   ========================================================================== */
.story-content .story-cite {
    font-size: 0.75em;
    line-height: 0;
}

.story-content .story-cite a {
    margin-left: 1px;
    color: var(--cyan);
}

.story-content .story-body a {
    color: var(--cyan);
}

.story-content .story-sources {
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
}

.story-content .story-sources ol {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding-left: var(--space-5);
    font-size: 0.95rem;
    line-height: 1.6;
}

.story-content .story-sources li {
    overflow-wrap: anywhere;
    color: var(--text-muted);
}

.story-content .story-sources a {
    color: var(--cyan);
}

.story-content .story-sources li:target {
    outline: 2px solid var(--cyan);
    outline-offset: 4px;
}

/* a source reached from a citation must not hide under the sticky header */
.story-content .story-sources li {
    scroll-margin-top: 110px;
}

/* ==========================================================================
   30. COMPACT HEADER, EXPLORE MENU AND MOBILE (HAMBURGER) MENU
   Desktop (1024px and wider): one slim row: logo | News, Explore, About | search | theme switch.
   Narrower screens: logo | search icon, theme switch, menu button. The menu button opens a
   panel under the header that holds the search field and the links (js/main.js).
   Without scripts the panel is simply shown, stacked, so every link stays reachable.
   ========================================================================== */
.logo {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
}

.logo:hover {
    color: var(--cyan);
}

/* Shows only the circuit "T" icon from logo.png (the file has the lettering baked in below it).
   The image keeps its square 1:1 shape; the box crops it. */
.logo-mark {
    --mark: 36px;
    flex: 0 0 auto;
    width: var(--mark);
    height: var(--mark);
    overflow: hidden;
    border-radius: var(--radius-s);
}

.logo-mark img {
    display: block;
    width: calc(var(--mark) * 2.226);
    height: calc(var(--mark) * 2.226);
    max-width: none;
    margin-left: calc(var(--mark) * -0.609);
    margin-top: calc(var(--mark) * -0.424);
}

:root[data-theme="light"] .logo-mark {
    box-shadow: 0 1px 4px rgba(14, 26, 43, 0.28);
}

.header-menu {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-5);
    min-width: 0;
}

header nav > ul {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
}

header nav > ul > li > a,
.nav-dropdown__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0;
    font-family: inherit;
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* The Explore button looks like the other menu words, with a small chevron */
.nav-dropdown__toggle {
    position: relative;
    display: none;
    width: auto;
    height: auto;
    margin: 0;
    background: none;
    border: 0;
    border-radius: var(--radius-s);
    color: var(--text-muted);
    cursor: pointer;
}

.js .nav-dropdown__toggle {
    display: inline-flex;
}

.nav-dropdown__toggle:hover,
.nav-dropdown__toggle[aria-expanded="true"],
.nav-dropdown__toggle[data-current] {
    color: var(--text);
}

.nav-dropdown__toggle[data-current]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    height: 2px;
    background: var(--cyan);
}

/* a plain link to the topics hub, for visitors without scripts (the Explore button needs scripts) */
.nav-nojs {
    display: none;
}

html:not(.js) .nav-nojs {
    display: list-item;
}

/* Explore panel (desktop: a floating list under the button) */
.nav-dropdown .nav-dropdown__panel {
    left: -16px;
    min-width: 280px;
}

/* compact search */
header .site-search {
    flex: 0 1 14rem;
}

@media (min-width: 1280px) {
    header .site-search {
        flex: 0 1 17rem;
    }
}

header .site-search__input,
header .site-search__btn {
    height: 36px;
}

.nav-toggle,
.nav-search-toggle {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--radius-s);
    color: var(--text);
    cursor: pointer;
}

.nav-toggle:hover,
.nav-search-toggle:hover {
    color: var(--cyan);
}

.nav-toggle:focus-visible,
.nav-search-toggle:focus-visible,
.nav-dropdown__toggle:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}

.nav-search-toggle svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

/* the familiar three lines; they turn into an X while the menu is open */
.nav-toggle__bars {
    position: relative;
    display: block;
    width: 22px;
    height: 16px;
}

.nav-toggle__bars i {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--speed) var(--ease), opacity var(--speed) var(--ease), top var(--speed) var(--ease);
}

.nav-toggle__bars i:nth-child(1) { top: 0; }
.nav-toggle__bars i:nth-child(2) { top: 7px; }
.nav-toggle__bars i:nth-child(3) { top: 14px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) {
    top: 7px;
    transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) {
    top: 7px;
    transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
    .nav-toggle__bars i {
        transition: none;
    }
}

/* ---- narrower screens: hamburger menu ---- */
@media (max-width: 1023px) {
    header {
        gap: var(--space-1);
        padding: var(--space-2) var(--space-4);
    }

    .logo {
        margin-right: auto;
    }

    .nav-toggle,
    .nav-search-toggle {
        display: inline-flex;
    }

    .theme-toggle {
        width: 60px;
    }

    .js .header-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: var(--space-3);
        max-height: calc(100vh - 64px);
        max-height: calc(100dvh - 64px);
        overflow-y: auto;
        padding: var(--space-4);
        background: var(--surface);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-3);
    }

    .js .header-menu.is-open {
        display: flex;
    }

    /* the visitor can read the page without scripts: the menu is just shown below the logo */
    html:not(.js) header {
        flex-wrap: wrap;
    }

    html:not(.js) .header-menu {
        flex: 0 0 100%;
        flex-direction: column;
        align-items: stretch;
        padding-bottom: var(--space-3);
    }

    .header-menu .site-search {
        order: -1;
        flex: none;
        width: 100%;
    }

    header .site-search__input,
    header .site-search__btn {
        height: 44px;
    }

    header .site-search__input {
        font-size: 1rem; /* 16px stops phones zooming in when the field is focused */
    }

    header nav > ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    header nav > ul > li {
        border-bottom: 1px solid var(--line);
    }

    header nav > ul > li:last-child {
        border-bottom: 0;
    }

    header nav > ul > li > a,
    .nav-dropdown__toggle {
        width: 100%;
        min-height: 48px;
        font-size: 0.85rem;
    }

    .nav-dropdown__toggle {
        justify-content: space-between;
    }

    .nav-dropdown__toggle[data-current]::after {
        content: none;
    }

    .nav-dropdown {
        display: block;
        position: static;
    }

    /* the Explore list opens in place, inside the menu */
    .nav-dropdown .nav-dropdown__panel {
        position: static;
        min-width: 0;
        max-height: none;
        margin: 0 0 var(--space-2);
        padding: 0 0 0 var(--space-3);
        background: none;
        border: 0;
        border-left: 2px solid var(--line);
        border-radius: 0;
        box-shadow: none;
        animation: none;
        overflow: visible;
    }

    .nav-dropdown__panel a {
        min-height: 44px;
    }
}

/* phones: the wordmark takes two lines so nothing is squeezed off the row */
@media (max-width: 520px) {
    .logo {
        gap: var(--space-2);
        font-size: 0.78rem;
        letter-spacing: 0.1em;
    }

    .logo-text {
        display: block;
        max-width: 7.6em;
        line-height: 1.2;
        white-space: normal;
    }
}

@media (max-width: 400px) {
    header {
        padding-left: var(--space-3);
        padding-right: var(--space-2);
    }

    .theme-toggle {
        width: 56px;
    }
}

/* ---- the homepage opens with a wide picture, then its heading and introduction below it ---- */
.home .hero-visual {
    margin: 0;
    overflow: hidden;
    line-height: 0;
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: var(--radius-l) var(--radius-l) 0 0;
}

.home .hero-visual picture,
.home .hero-visual img {
    display: block;
    width: 100%;
}

.home .hero-visual img {
    height: auto; /* the whole picture is shown, at its own 16:9 shape */
}

.home .hero {
    margin-top: 0;
    padding: var(--space-7) var(--space-5) var(--space-6);
    border-radius: 0 0 var(--radius-l) var(--radius-l);
}

@media (max-width: 640px) {
    .home .hero {
        padding: var(--space-6) var(--space-4) var(--space-5);
    }
}

/* ---- Topics hub: introduction text beside a picture (stacked on narrower screens) ---- */
.topics-intro {
    display: grid;
    gap: var(--space-5);
    margin-bottom: var(--space-8);
}

.topics-intro .page-intro {
    margin-bottom: 0;
}

.topics-intro__visual {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    line-height: 0;
}

.topics-intro__visual img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

@media (min-width: 960px) {
    .topics-intro {
        grid-template-columns: minmax(0, 1fr) 380px;
        align-items: start;
        gap: var(--space-6);
    }
}

@media (max-width: 959px) {
    .topics-intro__visual img {
        max-height: 320px;
    }
}

/* very narrow phones (320px class): slightly smaller header buttons so the row never overflows */
@media (max-width: 340px) {
    .nav-toggle,
    .nav-search-toggle {
        width: 40px;
    }

    .theme-toggle {
        width: 50px;
    }
}

/* homepage: the picture starts directly under the menu, with no gap above it */
.home main.home-main {
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
}

.home .hero-visual {
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
}

.home main.home-main > :not(.hero-visual):not(.hero) {
    margin-left: var(--space-5);
    margin-right: var(--space-5);
}

.home .hero {
    border-radius: 0;
}

/* ---- Footer: columns centred on the page, with a row of social icons ---- */
.site-footer .footer-groups {
    grid-template-columns: repeat(3, auto);
    justify-content: space-evenly;
    max-width: 960px;
    gap: var(--space-6);
}

.footer-social {
    max-width: var(--page-width);
    margin: 0 auto var(--space-6);
    text-align: center;
}

.footer-social ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--text-muted);
    border: 1px solid var(--line);
    border-radius: 50%;
    transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease), transform var(--speed) var(--ease);
}

.footer-social a:hover,
.footer-social a:focus-visible {
    color: var(--cyan);
    border-color: var(--cyan);
}

.footer-social a:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}

.footer-social svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* the filled shapes (Facebook, LinkedIn) read better solid */
.footer-social li:nth-child(1) svg,
.footer-social li:nth-child(4) svg {
    fill: currentColor;
    stroke: none;
}

@media (max-width: 768px) {
    .site-footer .footer-groups {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .footer-social a {
        transition: none;
    }
}