/* ==========================================================================
   Lockwood & Co. — Core stylesheet
   Loaded on every page. Page-specific rules live in their own files
   (home.css, etc.) and are queued through $page_styles.

   Contents
   1.  Design tokens
   2.  Reset & base
   3.  Typography
   4.  Layout primitives
   5.  Buttons & links
   6.  Section furniture (eyebrows, headings, rules)
   7.  Site header & navigation
   8.  Site footer
   9.  Utilities & motion
   ========================================================================== */

/* 1. Design tokens
   ========================================================================== */

/* Palette sampled from the series key art: teal-black night, spectral teal
   light, plasm-green ghost glow, and the Fittes red that punctuates it. */
:root {
    /* Ink — the teal-black the whole site sits on */
    --ink-900: #04090b;
    --ink-800: #071216;
    --ink-700: #0a191e;
    --ink-600: #0e2229;
    --ink-500: #142c33;
    --ink-400: #1c3a41;

    /* Fog — text and hairlines, cooled to match the photography */
    --fog-100: #eef5f4;
    --fog-200: #d3e0de;
    --fog-300: #b3c4c4;
    --fog-400: #8b9d9e;
    --fog-500: #6d8082;
    --fog-600: #526567;

    --line:        rgba(206, 228, 227, 0.09);
    --line-strong: rgba(206, 228, 227, 0.17);

    /* Accents */
    --accent:      #46d6bd;   /* spectral teal — primary accent */
    --accent-dim:  #2c9c88;
    --accent-glow: rgba(70, 214, 189, 0.22);
    --plasm:       #a6e84f;   /* ghost-light green — glows and highlights */
    --plasm-glow:  rgba(166, 232, 79, 0.20);
    --alert:       #e5442c;   /* Fittes red — danger, Type Three, ghost-touch */

    /* Type */
    --font-display: 'Cinzel', 'Times New Roman', Times, serif;
    --font-serif:   'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.375rem;
    --text-2xl:  1.75rem;
    --text-3xl:  2.25rem;
    --text-4xl:  3rem;
    --text-5xl:  clamp(2.75rem, 8vw, 5.5rem);

    --tracking-wide:  0.08em;
    --tracking-wider: 0.18em;

    /* Space */
    --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: 4rem;
    --space-9: 6rem;

    --section-y: clamp(3.5rem, 8vw, 6.5rem);

    /* Shell */
    --container:        1220px;
    --container-narrow: 780px;
    --gutter:           clamp(1.25rem, 4vw, 2.5rem);
    --header-height:    72px;

    --radius-sm: 4px;
    --radius:    8px;
    --radius-lg: 14px;

    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
    --shadow:    0 12px 34px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 26px 70px rgba(0, 0, 0, 0.6);

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --duration: 260ms;
}

/* 2. Reset & base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
    min-height: 100%;
    background-color: var(--ink-900);
    color: var(--fog-300);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* A faint, fixed fog wash so scrolling never feels like flat black */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(1100px 600px at 12% -10%, rgba(70, 214, 189, 0.07), transparent 60%),
        radial-gradient(900px 620px at 90% 8%,  rgba(166, 232, 79, 0.05), transparent 62%),
        radial-gradient(1200px 800px at 50% 110%, rgba(166, 232, 79, 0.045), transparent 65%);
}

body > * { position: relative; z-index: 1; }

img, svg, video { display: block; max-width: 100%; height: auto; }

ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
}

::selection {
    background: var(--accent);
    color: var(--ink-900);
}

/* 3. Typography
   ========================================================================== */

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

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { text-wrap: pretty; }

strong { color: var(--fog-100); font-weight: 600; }

/* 4. Layout primitives
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--container-narrow); }

.site-main { display: block; }

.section { padding-block: var(--section-y); }

.section--tint {
    background:
        linear-gradient(180deg, rgba(14, 34, 41, 0) 0%, rgba(14, 34, 41, 0.72) 18%, rgba(14, 34, 41, 0.72) 82%, rgba(14, 34, 41, 0) 100%);
}

.section--panel {
    background: var(--ink-800);
    border-block: 1px solid var(--line);
}

/* 5. Buttons & links
   ========================================================================== */

.btn {
    --btn-bg: transparent;
    --btn-fg: var(--fog-100);
    --btn-border: var(--line-strong);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    padding: 0.85em 1.7em;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transition: background var(--duration) var(--ease),
                border-color var(--duration) var(--ease),
                color var(--duration) var(--ease),
                transform var(--duration) var(--ease),
                box-shadow var(--duration) var(--ease);
}

.btn:hover,
.btn:focus-visible {
    transform: translateY(-2px);
}

.btn--primary {
    --btn-bg: var(--accent);
    --btn-fg: var(--ink-900);
    --btn-border: var(--accent);
    box-shadow: 0 8px 26px rgba(70, 214, 189, 0.18);
}

.btn--primary:hover,
.btn--primary:focus-visible {
    --btn-bg: #62e3cc;
    --btn-border: #62e3cc;
    box-shadow: 0 14px 34px rgba(70, 214, 189, 0.28);
}

.btn--ghost {
    --btn-bg: rgba(238, 244, 243, 0.03);
    backdrop-filter: blur(6px);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
    --btn-bg: rgba(238, 244, 243, 0.09);
    --btn-border: var(--fog-400);
}

.btn--plasm {
    --btn-fg: var(--plasm);
    --btn-border: rgba(166, 232, 79, 0.35);
    --btn-bg: rgba(166, 232, 79, 0.06);
}

.btn--plasm:hover,
.btn--plasm:focus-visible {
    --btn-bg: rgba(166, 232, 79, 0.14);
    --btn-border: var(--plasm);
    box-shadow: 0 12px 30px var(--plasm-glow);
}

.btn--sm { padding: 0.65em 1.2em; font-size: var(--text-xs); }
.btn--block { width: 100%; }

/* Text link with a drawn-on underline */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    color: var(--accent);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.link-arrow::after {
    content: "→";
    transition: transform var(--duration) var(--ease);
}

.link-arrow:hover::after,
a:hover .link-arrow::after {
    transform: translateX(4px);
}

/* 6. Section furniture
   ========================================================================== */

.eyebrow {
    display: flex;
    align-items: center;
    gap: 0.75em;
    margin-bottom: var(--space-3);
    color: var(--accent);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
}

.eyebrow__glyph {
    font-size: 1.05em;
    filter: grayscale(0.15);
}

.eyebrow::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--line-strong), transparent);
}

.section-head {
    max-width: 62ch;
    margin-bottom: var(--space-7);
}

.section-head__title {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-3);
}

.section-head__lede {
    color: var(--fog-400);
    font-size: var(--text-lg);
}

.section-head--center {
    margin-inline: auto;
    text-align: center;
}

.section-head--center .eyebrow { justify-content: center; }
.section-head--center .eyebrow::before,
.section-head--center .eyebrow::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-strong));
}
.section-head--center .eyebrow::after {
    background: linear-gradient(90deg, var(--line-strong), transparent);
}

/* Small uppercase tag, used for content types and metadata */
.tag {
    display: inline-block;
    padding: 0.3em 0.7em;
    border: 1px solid var(--line-strong);
    border-radius: 2px;
    background: rgba(238, 244, 243, 0.03);
    color: var(--fog-400);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    line-height: 1.5;
}

.tag--accent { border-color: rgba(70, 214, 189, 0.4);  color: var(--accent); background: rgba(70, 214, 189, 0.07); }
.tag--plasm  { border-color: rgba(166, 232, 79, 0.4);  color: var(--plasm);  background: rgba(166, 232, 79, 0.07); }

/* Hazard classification — Visitors rather than agents */
.tag--alert  { border-color: rgba(229, 68, 44, 0.45); color: #f4735e;       background: rgba(229, 68, 44, 0.09); }

/* Eyebrow used as a breadcrumb: a link back to the section, then where you are */
.eyebrow__link {
    color: var(--fog-500);
    transition: color var(--duration) var(--ease);
}

.eyebrow__link:hover,
.eyebrow__link:focus-visible { color: var(--accent); }

.eyebrow__crumb::before {
    content: "/";
    margin-right: 0.75em;
    color: var(--fog-600);
}

/* Ruled strip of short labelled values — a book's imprint, a season's credits */
.facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-4);
    margin: 0;
    padding-block: var(--space-4);
    border-block: 1px solid var(--line);
}

.facts dt {
    margin-bottom: 0.2rem;
    color: var(--fog-600);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
}

.facts dd {
    margin: 0;
    color: var(--fog-200);
    font-size: var(--text-sm);
    font-weight: 500;
}

/* 7. Site header & navigation
   ========================================================================== */

.skip-link {
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 200;
    transform: translate(-50%, -120%);
    padding: 0.75rem 1.25rem;
    background: var(--accent);
    color: var(--ink-900);
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: 0 0 var(--radius) var(--radius);
    transition: transform 180ms var(--ease);
}

.skip-link:focus { transform: translate(-50%, 0); }

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: linear-gradient(180deg, rgba(4, 9, 11, 0.92), rgba(4, 9, 11, 0.45) 70%, transparent);
    transition: background var(--duration) var(--ease),
                border-color var(--duration) var(--ease),
                box-shadow var(--duration) var(--ease);
    border-bottom: 1px solid transparent;
}

.site-header.is-stuck {
    background: rgba(6, 17, 21, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom-color: var(--line);
    box-shadow: var(--shadow-sm);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    width: 100%;
    max-width: var(--container);
    min-height: var(--header-height);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* -- Wordmark -- */

.wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    flex: none;
    margin-right: auto;
    color: var(--fog-100);
}

.wordmark__mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    color: var(--accent);
    transition: color var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.wordmark:hover .wordmark__mark {
    color: var(--plasm);
    transform: translateY(-1px);
}

.wordmark__text { display: grid; }

.wordmark__name {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

.wordmark__tagline {
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--fog-500);
}

/* -- Toggle (mobile only) -- */

.nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    color: var(--fog-200);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.nav-toggle__bars {
    display: grid;
    gap: 4px;
    width: 16px;
}

.nav-toggle__bars i {
    display: block;
    height: 1.5px;
    background: currentColor;
    transition: transform 220ms var(--ease), opacity 160ms var(--ease);
}

[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* -- Primary navigation: mobile drawer by default -- */

.primary-nav {
    position: fixed;
    inset: var(--header-height) 0 0 auto;
    z-index: 99;
    width: min(360px, 88vw);
    padding: var(--space-5) var(--gutter) var(--space-8);
    background: var(--ink-800);
    border-left: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(102%);
    visibility: hidden;
    transition: transform 320ms var(--ease), visibility 320ms;
}

.primary-nav.is-open {
    transform: translateX(0);
    visibility: visible;
}

.primary-nav__list { display: grid; gap: 2px; }

.primary-nav__item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    border-bottom: 1px solid var(--line);
}

.primary-nav__link {
    padding: 0.85rem 0;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--fog-200);
    text-transform: uppercase;
    transition: color var(--duration) var(--ease);
}

.primary-nav__link:hover,
.primary-nav__link.is-active { color: var(--accent); }

.submenu-toggle {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: var(--fog-500);
    transition: color var(--duration) var(--ease);
}

.submenu-toggle svg { width: 11px; transition: transform var(--duration) var(--ease); }
.submenu-toggle:hover { color: var(--accent); }
.submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.submenu {
    grid-column: 1 / -1;
    display: none;
    padding: 0 0 var(--space-4) var(--space-4);
    border-left: 1px solid var(--line-strong);
    margin-bottom: var(--space-3);
}

.submenu.is-open { display: grid; gap: 1px; }

.submenu__link {
    display: block;
    padding: 0.5rem 0;
    color: var(--fog-400);
    font-size: var(--text-sm);
    transition: color var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.submenu__link:hover,
.submenu__link.is-active {
    color: var(--fog-100);
    transform: translateX(3px);
}

/* -- Submenus carrying cover art -- */

.submenu--covers .submenu__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-block: 0.35rem;
}

.submenu__cover {
    width: 40px;
    height: 61px;
    flex: none;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid var(--line-strong);
    background: var(--ink-700);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
    transition: border-color var(--duration) var(--ease),
                box-shadow var(--duration) var(--ease);
}

/* Rows without art: text stays on the same left edge, but the row keeps its
   natural height rather than reserving space for a cover that never comes. */
.submenu--covers .submenu__link--indent {
    padding-left: calc(40px + 0.75rem);
    min-height: 0;
}


.submenu__link:hover .submenu__cover {
    border-color: rgba(70, 214, 189, 0.5);
    box-shadow: 0 4px 16px rgba(70, 214, 189, 0.2);
}

.nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 98;
    background: rgba(3, 8, 10, 0.72);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 320ms var(--ease);
}

.nav-scrim.is-visible { opacity: 1; }

body.nav-open { overflow: hidden; }

/* -- Primary navigation: desktop bar -- */

@media (min-width: 1080px) {
    .nav-toggle { display: none; }
    .nav-scrim  { display: none; }

    .primary-nav {
        position: static;
        width: auto;
        padding: 0;
        background: none;
        border: 0;
        box-shadow: none;
        overflow: visible;
        transform: none;
        visibility: visible;
    }

    .primary-nav__list {
        display: flex;
        align-items: center;
        gap: var(--space-1);
    }

    .primary-nav__item {
        position: relative;
        display: flex;
        border: 0;
    }

    .primary-nav__link {
        padding: 0.5rem 0.7rem;
        font-family: var(--font-sans);
        font-size: 0.8125rem;
        font-weight: 600;
        letter-spacing: var(--tracking-wide);
        color: var(--fog-300);
        white-space: nowrap;
    }

    .primary-nav__item.has-submenu .primary-nav__link { padding-right: 0.3rem; }

    .submenu-toggle {
        width: 22px;
        height: 34px;
        pointer-events: none;
    }

    .submenu-toggle svg { width: 9px; }

    /* Dropdown panel */
    .submenu {
        position: absolute;
        top: 100%;
        left: -0.4rem;
        display: grid;
        gap: 1px;
        width: max-content;
        min-width: 230px;
        margin: 0;
        padding: 0.5rem;
        background: rgba(8, 22, 27, 0.97);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid var(--line-strong);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 200ms;
    }

    .primary-nav__item:hover .submenu,
    .primary-nav__item:focus-within .submenu,
    .submenu.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Keeps the pointer from falling through the gap under the trigger */
    .primary-nav__item.has-submenu::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 12px;
    }

    .submenu__link {
        padding: 0.5rem 0.75rem;
        border-radius: var(--radius-sm);
        font-size: 0.8125rem;
    }

    .submenu--covers { min-width: 290px; }

    .submenu--covers .submenu__link { padding: 0.35rem 0.6rem; }

    /* Restated after the shorthand above, which would otherwise reset it */
    .submenu--covers .submenu__link--indent {
        padding-left: calc(0.6rem + 40px + 0.75rem);
    }

    .submenu__link:hover,
    .submenu__link.is-active {
        background: rgba(238, 244, 243, 0.05);
        color: var(--accent);
        transform: none;
    }

    /* Last two menus open right-aligned so they stay on screen */
    .primary-nav__item:nth-last-child(-n+2) .submenu { left: auto; right: -0.4rem; }
}

/* 8. Site footer
   ========================================================================== */

.site-footer {
    margin-top: var(--space-9);
    background: var(--ink-800);
    border-top: 1px solid var(--line);
}

.site-footer__inner {
    display: grid;
    gap: var(--space-7);
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding: var(--space-8) var(--gutter) var(--space-7);
}

.site-footer__blurb {
    max-width: 40ch;
    margin-top: var(--space-4);
    color: var(--fog-500);
    font-size: var(--text-sm);
}

.site-footer__nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-6);
}

.site-footer__heading {
    margin-bottom: var(--space-4);
    color: var(--fog-200);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
}

.site-footer__column ul { display: grid; gap: 0.55rem; }

.site-footer__column a {
    color: var(--fog-500);
    font-size: var(--text-sm);
    transition: color var(--duration) var(--ease);
}

.site-footer__column a:hover { color: var(--accent); }

.site-footer__base {
    border-top: 1px solid var(--line);
}

.site-footer__base > * {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.site-footer__disclaimer {
    padding-top: var(--space-5);
    color: var(--fog-600);
    font-size: var(--text-xs);
    line-height: 1.7;
}

.site-footer__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    padding-block: var(--space-4) var(--space-6);
    color: var(--fog-600);
    font-size: var(--text-xs);
}

.site-footer__meta a { transition: color var(--duration) var(--ease); }
.site-footer__meta a:hover { color: var(--accent); }

@media (min-width: 860px) {
    .site-footer__inner {
        grid-template-columns: minmax(240px, 1fr) 2.2fr;
        gap: var(--space-8);
    }
}

/* 9. Stub pages (coming-soon.php, 404)
   ========================================================================== */

.stub {
    display: grid;
    align-items: center;
    min-height: clamp(420px, 62vh, 680px);
    padding-block: var(--space-8);
}

.stub__inner { text-align: center; }

.stub__title {
    margin-bottom: var(--space-4);
    font-size: clamp(2rem, 6vw, 3.25rem);
    letter-spacing: 0.02em;
}

.stub__text {
    max-width: 54ch;
    margin-inline: auto;
    color: var(--fog-400);
    font-size: var(--text-lg);
}

.stub__path {
    padding: 0.1em 0.45em;
    border: 1px solid var(--line-strong);
    border-radius: 3px;
    background: rgba(238, 244, 243, 0.04);
    color: var(--plasm);
    font-size: 0.9em;
    word-break: break-all;
}

.stub__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

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

.stub__related-title {
    margin-bottom: var(--space-4);
    color: var(--fog-500);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
}

.stub__related-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-5);
}

.stub__related-list a {
    color: var(--fog-300);
    font-size: var(--text-sm);
    transition: color var(--duration) var(--ease);
}

.stub__related-list a:hover { color: var(--accent); }

/* 10. Utilities & motion
   ========================================================================== */

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

[hidden] { display: none !important; }

/* Scroll-reveal: elements start lowered, JS adds .is-visible on entry.
   Without JS the :not(.js) guard leaves everything visible. */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 700ms var(--ease), transform 700ms var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
}

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

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .js [data-reveal] { opacity: 1; transform: none; }
}

/* 11. Page hero
   ==========================================================================
   The banner at the top of a section page: a wide image with the title over
   it. Lives in main.css rather than a section stylesheet because every
   section uses it. Falls back to a designed plate when there is no artwork,
   so a page can ship before its picture does. */

.page-hero {
    position: relative;
    display: flex;
    /* Title at the top of the band, not the foot of it. */
    align-items: flex-start;
    min-height: clamp(260px, 34vw, 420px);
    padding-block: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 6vw, 4rem);
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}

/* No artwork yet: a plate that reads as a decision rather than an absence. */
.page-hero--plain {
    background:
        radial-gradient(120% 140% at 12% 0%, rgba(70, 214, 189, 0.13), transparent 60%),
        radial-gradient(90% 120% at 88% 10%, rgba(166, 232, 79, 0.09), transparent 62%),
        linear-gradient(170deg, #0e2229, #04090b);
}

.page-hero--plasm.page-hero--plain {
    background:
        radial-gradient(120% 140% at 12% 0%, rgba(166, 232, 79, 0.14), transparent 60%),
        linear-gradient(170deg, #12261f, #04090b);
}

.page-hero__media {
    position: absolute;
    inset: 0;
}

.page-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 55%;
    filter: saturate(0.92) brightness(0.78);
}

/* Reading a title over a photograph means pushing the photograph down under
   it. Weighted to the top now that the title sits there, with the foot kept
   dark as well so the band resolves into the page rather than stopping dead. */
.page-hero__veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(4, 9, 11, 0.82) 0%, rgba(4, 9, 11, 0.45) 45%, rgba(4, 9, 11, 0.8) 100%),
        linear-gradient(90deg, rgba(4, 9, 11, 0.72), transparent 60%);
}

.page-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
}

.page-hero__eyebrow { margin-bottom: var(--space-3); }

/* The rule that trails an eyebrow reads as clutter over a photograph. */
.page-hero__eyebrow::after { display: none; }

.page-hero__title {
    max-width: 20ch;
    font-size: clamp(2.25rem, 6vw, 4rem);
    line-height: 1.05;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 30px rgba(4, 9, 11, 0.85);
}

.page-hero__lede {
    max-width: 56ch;
    margin-top: var(--space-4);
    color: var(--fog-200);
    font-family: var(--font-serif);
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    font-style: italic;
    line-height: 1.45;
    text-shadow: 0 2px 20px rgba(4, 9, 11, 0.8);
}