/* ═══════════════════════════════════════════════════════════════
   FRONTIER MOTO - index.css

   Editorial magazine crossed with an engineering manual. The
   structural device is the hairline rule, not the card: content
   sits in cells divided by 1px lines rather than floating boxes.
   No shadows, no gradients other than the hero scrim, which is
   functional rather than decorative, and no rounded corners
   beyond 2px.

   Order: tokens, reset, type scale, layout, components, motion,
   responsive. Components appear in the order a page uses them.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────────── */

:root[data-theme="light"] {
    --bone:          #F2EFE9;
    --bone-soft:     #E7E3DA;
    --bone-deep:     #DBD6CA;
    --ink:           #121212;
    --charcoal:      #1E1F21;
    /* Muted type has to clear 4.5:1 against the soft surface, not just against
       bone. #6E6A62 measured 4.20 on --bone-soft and failed on every page that
       used a soft section; this measures about 4.95 there and 5.5 on bone. */
    --metal:         #635F58;

    --bg:            var(--bone);
    --bg-soft:       var(--bone-soft);
    --surface-dark:  var(--charcoal);
    --text:          var(--ink);
    --text-muted:    var(--metal);
    --text-on-dark:  #EDE9E1;
    --text-on-dark-muted: #A8A49B;

    --line:          rgba(18, 18, 18, 0.16);
    --line-strong:   rgba(18, 18, 18, 0.42);
    --line-on-dark:  rgba(237, 233, 225, 0.20);
    --grid-line:     rgba(18, 18, 18, 0.035);

    --header-bg:     rgba(242, 239, 233, 0.92);
    --overlay-bg:    #121212;
}

:root[data-theme="dark"] {
    --bone:          #F2EFE9;
    --bone-soft:     #E7E3DA;
    --bone-deep:     #DBD6CA;
    --ink:           #121212;
    --charcoal:      #1E1F21;
    --metal:         #96918A;

    --bg:            #131416;
    --bg-soft:       #191B1D;
    --surface-dark:  #0E0F11;
    --text:          #EDE9E1;
    --text-muted:    #9C978E;
    --text-on-dark:  #EDE9E1;
    --text-on-dark-muted: #9C978E;

    --line:          rgba(237, 233, 225, 0.17);
    --line-strong:   rgba(237, 233, 225, 0.40);
    --line-on-dark:  rgba(237, 233, 225, 0.20);
    --grid-line:     rgba(237, 233, 225, 0.035);

    --header-bg:     rgba(19, 20, 22, 0.92);
    --overlay-bg:    #0E0F11;
}

:root {
    /* One accent. Signal orange carries recovery, focus and active state and
       nothing else. It measures about 3:1 on bone, so it is never body text:
       --signal-ink is the darkened form for type, and orange fills always take
       ink-black labels, about 7.6:1, which is how safety signage works too. */
    --signal:        #FF5A1F;
    --signal-deep:   #E8461B;
    --signal-ink:    #A8330C;
    --on-signal:     #121212;

    --font-display:  'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-mono:     'Roboto Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

    /* Type scale. Every size on the site comes from this list. */
    --t-display:  clamp(2.75rem, 1.10rem + 7.0vw, 6.75rem);
    --t-h1:       clamp(2.10rem, 1.25rem + 3.6vw, 4.00rem);
    --t-h2:       clamp(1.55rem, 1.15rem + 1.7vw, 2.45rem);
    --t-h3:       clamp(1.15rem, 1.02rem + 0.6vw, 1.45rem);
    --t-h4:       clamp(1.02rem, 0.97rem + 0.25vw, 1.15rem);
    --t-lede:     clamp(1.06rem, 0.99rem + 0.42vw, 1.30rem);
    --t-body:     1.0rem;
    --t-small:    0.875rem;
    --t-tiny:     0.8125rem;
    --t-label:    0.6875rem;

    --track-label: 0.16em;
    --track-wordmark: 0.48em;

    --header-h:      92px;
    --header-h-pin:  66px;
    --gutter:        clamp(1.25rem, 0.6rem + 2.4vw, 3rem);
    /* Archivo's zero is narrower than its average lowercase letter, so 68ch
       renders as about 74 characters a line. 62ch lands near 68, inside the
       comfortable range rather than at the top of it. */
    --measure:       62ch;
    --container:     1320px;

    --ease:          cubic-bezier(0.22, 0.90, 0.32, 1);
    --dur-fast:      160ms;
    --dur:           320ms;
    --dur-slow:      620ms;

    /* Functional scrim. Photography needs it for legible type, so it is tuned
       as a left weighted ramp: heaviest where the copy sits.

       Both ramps are measured rather than judged by eye. The flat one was
       first tuned against the generated plates, which were flat mid greys, and
       a photograph of a snow field under a blue sky is nothing like that: the
       section hero label fell to 2.9:1 on Ride, Navigate, Survive and Maintain
       once real pictures went in. These values are the lightest ramp that
       still clears 4.5:1 across every hero, so the photograph stays as visible
       as legibility allows. Re-measure if the photographs change. */
    --scrim: linear-gradient(96deg,
                 rgba(10, 11, 12, 0.90) 0%,
                 rgba(10, 11, 12, 0.74) 42%,
                 rgba(10, 11, 12, 0.30) 100%);
    --scrim-flat: linear-gradient(180deg,
                 rgba(10, 11, 12, 0.48) 0%,
                 rgba(10, 11, 12, 0.82) 38%,
                 rgba(10, 11, 12, 0.93) 100%);
}

/* ── 2. RESET & BASE ──────────────────────────────────────────── */

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

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

body {
    font-family: var(--font-display);
    font-size: var(--t-body);
    line-height: 1.62;
    color: var(--text);
    background-color: var(--bg);
    /* A faint square grid, the one sitewide texture. It is not a layout guide
       and is not expected to align to section edges. */
    background-image:
        linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size: 44px 44px;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; background-color: var(--bg-soft); }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }

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

[hidden] { display: none !important; }

[id] { scroll-margin-top: calc(var(--header-h-pin) + 1.5rem); }

::selection { background: var(--signal); color: var(--on-signal); }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 300;
    background: var(--signal);
    color: var(--on-signal);
    padding: 0.85rem 1.35rem;
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
}
.skip-link:focus { left: 0.75rem; top: 0.75rem; }

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

/* ── 3. TYPE ──────────────────────────────────────────────────── */

h1, h2, h3, h4 {
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.022em;
    text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.012em; line-height: 1.16; }
h4 { font-size: var(--t-h4); letter-spacing: -0.006em; line-height: 1.24; }

p { text-wrap: pretty; }

.lede {
    font-size: var(--t-lede);
    line-height: 1.5;
    color: var(--text-muted);
    max-width: 58ch;
}

.mono {
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    font-weight: 500;
}

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2.4em; }
.prose a {
    color: var(--signal-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
:root[data-theme="dark"] .prose a { color: var(--signal); }

/* ── 4. LAYOUT ────────────────────────────────────────────────── */

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

.section { padding-block: clamp(3.5rem, 2rem + 5vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.section--soft { background: var(--bg-soft); }
.section--dark {
    background: var(--surface-dark);
    color: var(--text-on-dark);
    --text: var(--text-on-dark);
    --text-muted: var(--text-on-dark-muted);
    --line: var(--line-on-dark);
    --line-strong: rgba(237, 233, 225, 0.45);
}
.section--rule { border-top: 1px solid var(--line); }

/* SectionLabel. A numbered mono rail above every major block. It is an h2, so
   the weight, leading and balancing inherited from the heading rules are reset
   here rather than left to fight the label styling. */
.section-label {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    font-family: var(--font-mono);
    font-size: var(--t-label);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    text-wrap: wrap;
    color: var(--text-muted);
    padding-bottom: 0.85rem;
    margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.75rem);
    border-bottom: 1px solid var(--line-strong);
}
.section-label__n { color: var(--signal-ink); font-weight: 500; }
:root[data-theme="dark"] .section-label__n { color: var(--signal); }
.section--dark .section-label__n { color: var(--signal); }
.section-label__title { color: var(--text); font-weight: 500; }
.section-label__aside { margin-left: auto; text-align: right; }

/* ── 5. BUTTONS ───────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 46px;
    padding: 0.75rem 1.4rem;
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    font-weight: 500;
    border: 1px solid var(--line-strong);
    border-radius: 2px;
    color: var(--text);
    background: transparent;
    transition: background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn:active { transform: translateY(1px); }

.btn--solid { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn--solid:hover { background: transparent; color: var(--text); }

.btn--signal {
    background: var(--signal);
    color: var(--on-signal);
    border-color: var(--signal);
    font-weight: 700;
}
.btn--signal:hover { background: var(--signal-deep); border-color: var(--signal-deep); color: var(--on-signal); }

.btn--ghost-light { color: var(--text-on-dark); border-color: rgba(237, 233, 225, 0.45); }
.btn--ghost-light:hover { background: var(--text-on-dark); color: #121212; border-color: var(--text-on-dark); }

.btn[disabled], .btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}
.btn[data-loading="true"] { pointer-events: none; opacity: 0.7; }
.btn[data-loading="true"] .btn__label::after {
    content: "";
    display: inline-block;
    width: 0.6em; height: 0.6em;
    margin-left: 0.5em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 700ms linear infinite;
    vertical-align: -1px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Text link with a travelling underline. */
.tlink {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    font-weight: 500;
    color: var(--text);
    padding-block: 0.35rem;
    position: relative;
}
.tlink::after {
    content: "";
    position: absolute;
    left: 0; right: 100%; bottom: 0;
    height: 1px;
    background: var(--signal);
    transition: right var(--dur) var(--ease);
}
.tlink:hover::after, .tlink:focus-visible::after { right: 0; }
.tlink__arrow { transition: transform var(--dur) var(--ease); }
.tlink:hover .tlink__arrow { transform: translateX(4px); }

/* ── 6. SITE HEADER ───────────────────────────────────────────── */

/* The scroll sentinel. Absolutely positioned so it takes no space in the flow,
   but given real width and height: an IntersectionObserver target with zero
   area is unreliable, since an empty intersection rect gives the observer
   nothing to measure. Its height sets the trigger point, so the header pins
   once roughly its own depth has scrolled past. */
#header-sentinel {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: var(--header-h);
    pointer-events: none;
}

.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 120;
    height: var(--header-h);
    display: flex;
    align-items: center;
    padding-inline: var(--gutter);
    padding-top: env(safe-area-inset-top);
    border-bottom: 1px solid transparent;
    transition: height var(--dur) var(--ease),
                background var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                color var(--dur) var(--ease);
}

/* Default state on a page whose hero is dark photography. */
.site-header[data-over="dark"] {
    background: transparent;
    color: #EDE9E1;
}
/* Every other page, and any page once it has scrolled. */
.site-header:not([data-over="dark"]),
.site-header.is-pinned {
    background: var(--header-bg);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--text);
    border-bottom-color: var(--line);
}
.site-header.is-pinned { height: var(--header-h-pin); }

.site-header__inner {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* FrontierWordmark. Three four character rows, so a monospace makes all three
   measure identically and the block stays a true cube at any tracking. The
   negative right margin removes the trailing space that letter-spacing adds
   after the final character, which would otherwise push the cube left. */
.wordmark {
    /* The cube itself measures roughly 38 by 43, just under a comfortable
       target, so the link carries a 44px minimum box with the rows centred in
       it. The cube does not move; only the hit area grows. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.6875rem;
    line-height: 1.30;
    letter-spacing: var(--track-wordmark);
    text-transform: uppercase;
    color: currentColor;
    transition: font-size var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.wordmark span {
    display: block;
    margin-right: calc(var(--track-wordmark) * -1);
}
.wordmark:hover { opacity: 0.72; }
.site-header.is-pinned .wordmark { font-size: 0.625rem; }

/* PrimaryNav. The list itself is the flex container rather than the nav with a
   display:contents ul, which drops list semantics in some browsers. */
.primary-nav { display: flex; align-items: center; }
.primary-nav__list {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 0.4rem + 1.3vw, 2.1rem);
}
.primary-nav__link {
    position: relative;
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    font-weight: 500;
    padding-block: 0.5rem;
    white-space: nowrap;
}
.primary-nav__link::after {
    content: "";
    position: absolute;
    left: 0; right: 100%; bottom: 0;
    height: 2px;
    background: var(--signal);
    transition: right var(--dur) var(--ease);
}
.primary-nav__link:hover::after,
.primary-nav__link:focus-visible::after { right: 0; }
.primary-nav__link[aria-current="page"]::after { right: 0; }
.primary-nav__link[aria-current="page"] { font-weight: 700; }

.header__actions { display: flex; align-items: center; gap: 0.6rem; }

/* RecoveryAction. Held outside the hamburger at every width, because a rider
   who is already stranded should never have to open a menu to find it. Marked
   by the beacon glyph and the border weight as well as by colour. */
.recovery-action {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0.55rem 1rem;
    background: var(--signal);
    color: var(--on-signal);
    border: 2px solid var(--signal);
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    font-weight: 700;
    transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.recovery-action:hover { background: var(--signal-deep); border-color: var(--signal-deep); }
.recovery-action:active { transform: translateY(1px); }
.recovery-action__beacon { flex: none; }
.recovery-action__beacon path { fill: currentColor; }

/* Two labels, one shown at a time: the long one by default, the short one on
   the narrowest screens. This must be declared here rather than after the
   media query, or it wins on source order and hides both, leaving Recovery as
   a bare icon. It always keeps a text label: it may not fall back to colour
   and a glyph alone. */
.recovery-action__short { display: none; }

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border: 1px solid currentColor;
    border-radius: 2px;
    opacity: 0.75;
    transition: opacity var(--dur-fast) var(--ease);
}
.theme-toggle:hover { opacity: 1; }
.theme-toggle svg { width: 17px; height: 17px; }
:root[data-theme="light"] .theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: none; }

.menu-trigger {
    display: none;
    width: 44px; height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid currentColor;
    border-radius: 2px;
}
.menu-trigger span {
    display: block;
    width: 18px; height: 2px;
    background: currentColor;
    position: relative;
}
.menu-trigger span::before,
.menu-trigger span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 18px; height: 2px;
    background: currentColor;
}
.menu-trigger span::before { top: -6px; }
.menu-trigger span::after { top: 6px; }

/* Mobile overlay */
.menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--overlay-bg);
    color: #EDE9E1;
    display: flex;
    flex-direction: column;
    padding: calc(env(safe-area-inset-top) + 1.25rem) var(--gutter)
             calc(env(safe-area-inset-bottom) + 2rem);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-1.25rem);
    transition: opacity var(--dur) var(--ease),
                transform var(--dur) var(--ease),
                visibility var(--dur) var(--ease);
}
.menu-overlay.is-open { opacity: 1; visibility: visible; transform: none; }
.menu-overlay__top { display: flex; align-items: flex-start; justify-content: space-between; }
.menu-overlay__close {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(237, 233, 225, 0.45);
    border-radius: 2px;
    font-size: 1.2rem;
}
.menu-overlay__nav { margin-top: auto; padding-top: 2.5rem; }
.menu-overlay__nav li { border-top: 1px solid rgba(237, 233, 225, 0.16); }
.menu-overlay__nav li:last-child { border-bottom: 1px solid rgba(237, 233, 225, 0.16); }
.menu-overlay__nav a {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0.9rem 0;
    font-size: clamp(1.5rem, 1rem + 3.4vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.menu-overlay__nav a[aria-current="page"] { color: var(--signal); }
.menu-overlay__n {
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    color: #8E8A82;
    font-weight: 500;
}
.menu-overlay__foot { margin-top: 2rem; display: grid; gap: 1rem; }
.menu-overlay__foot .recovery-action { justify-content: center; min-height: 54px; }
.menu-overlay__note {
    font-family: var(--font-mono);
    font-size: var(--t-tiny);
    color: #8E8A82;
    line-height: 1.5;
}
body.menu-open { overflow: hidden; }

/* ── 7. EDITORIAL HERO ────────────────────────────────────────── */

.hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: min(92vh, 860px);
    padding-top: calc(var(--header-h) + 3rem);
    padding-bottom: clamp(2rem, 1rem + 4vw, 4.5rem);
    background: var(--surface-dark);
    color: var(--text-on-dark);
    overflow: hidden;
    isolation: isolate;
}
.hero--compact { min-height: min(62vh, 560px); }

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim { position: absolute; inset: 0; z-index: -1; background: var(--scrim); }
.hero--flat .hero__scrim { background: var(--scrim-flat); }

.hero__inner {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.hero__label {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: #C9C4B8;
    margin-bottom: clamp(1rem, 0.6rem + 1.2vw, 1.8rem);
}
.hero__label b { color: var(--signal); font-weight: 500; }
.hero__label::after {
    content: "";
    flex: 1 1 auto;
    max-width: 180px;
    height: 1px;
    background: rgba(237, 233, 225, 0.3);
}

.hero__title {
    font-size: var(--t-display);
    line-height: 0.94;
    letter-spacing: -0.035em;
    font-weight: 700;
    text-transform: uppercase;
    max-width: 16ch;
}
.hero__title span { display: block; }

.hero__lede {
    margin-top: clamp(1.1rem, 0.8rem + 1vw, 1.75rem);
    max-width: 46ch;
    font-size: var(--t-lede);
    line-height: 1.5;
    color: #CFCAC0;
}
.hero__actions { margin-top: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); }

/* The indexed field detail sitting at the foot of the hero. */
.hero__field {
    margin-top: clamp(2rem, 1.2rem + 3vw, 3.5rem);
    border-top: 1px solid rgba(237, 233, 225, 0.22);
    padding-top: 1rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem 1.5rem;
}
.hero__field div { min-width: 0; }
.hero__field dt {
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    /* Measured, not chosen by eye. Against the original scrim this grey read
       1.09:1 over the Maintain hero. scripts/check_contrast.py puts the floor
       for this slot at #BAB6AE; this sits just above it and still reads quiet. */
    color: #BFBAB1;
}
.hero__field dd {
    font-family: var(--font-mono);
    font-size: var(--t-small);
    color: #EDE9E1;
    margin-top: 0.3rem;
}

/* ── 8. FRONTIER INDEX ────────────────────────────────────────── */

/* Cells divided by rules rather than six identical cards. Sizes vary by
   design: one wide, one tall, one signal, three standard. */
.index-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}
.index-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 260px;
    padding: clamp(1.25rem, 0.9rem + 1vw, 1.9rem);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
    isolation: isolate;
    transition: background var(--dur) var(--ease);
}
.index-card:hover { background: var(--bg-soft); }
.index-card--wide { grid-column: span 2; }
.index-card--tall { grid-row: span 2; }
.index-card--media { color: var(--text-on-dark); background: var(--surface-dark); }
.index-card--media:hover { background: var(--surface-dark); }

.index-card__media { position: absolute; inset: 0; z-index: -2; }
.index-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.index-card--media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,
                 rgba(10, 11, 12, 0.45) 0%,
                 rgba(10, 11, 12, 0.80) 45%,
                 rgba(10, 11, 12, 0.94) 100%);
}
.index-card:hover .index-card__media img { transform: scale(1.045); }

.index-card__n {
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    color: var(--text-muted);
}
.index-card--media .index-card__n { color: #B3AEA5; }
.index-card__title {
    margin-top: 0.6rem;
    font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem);
    text-transform: uppercase;
    letter-spacing: -0.02em;
}
.index-card__blurb { margin-top: 0.5rem; font-size: var(--t-small); color: var(--text-muted); max-width: 34ch; }
.index-card--media .index-card__blurb { color: #C4BFB5; }
.index-card__detail { margin-top: 0.85rem; font-size: var(--t-tiny); color: var(--text-muted); max-width: 40ch; }
.index-card--media .index-card__detail { color: #B3AEA5; }
.index-card__foot {
    margin-top: auto;
    padding-top: 1.4rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
}
.index-card__stat { color: var(--text-muted); text-align: right; }
.index-card--media .index-card__stat { color: #B3AEA5; }
.index-card__stat b { display: block; color: var(--text); font-size: var(--t-small); letter-spacing: 0.04em; }
.index-card--media .index-card__stat b { color: #EDE9E1; }

/* Stretched link keeps the whole cell clickable with one real anchor. */
.index-card__link::after { content: ""; position: absolute; inset: 0; }
.index-card:focus-within { outline: 3px solid var(--signal); outline-offset: -3px; }
.index-card__link:focus-visible { outline: none; }

.index-card--signal {
    background: var(--signal);
    color: var(--on-signal);
}
.index-card--signal:hover { background: var(--signal-deep); }
.index-card--signal .index-card__n,
.index-card--signal .index-card__blurb,
.index-card--signal .index-card__detail,
.index-card--signal .index-card__stat { color: rgba(18, 18, 18, 0.78); }
.index-card--signal .index-card__stat b { color: var(--on-signal); }

/* ── 9. FEATURE STORY ─────────────────────────────────────────── */

.feature {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 0.8rem + 3vw, 3.5rem);
    align-items: start;
}
.feature__media { position: relative; overflow: hidden; background: var(--bg-soft); }
.feature__media img { width: 100%; height: auto; transition: transform var(--dur-slow) var(--ease); }
.feature:hover .feature__media img { transform: scale(1.03); }
.feature__issue {
    position: absolute;
    top: 0; left: 0;
    background: var(--signal);
    color: var(--on-signal);
    padding: 0.5rem 0.85rem;
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    font-weight: 700;
}
.feature__body { position: relative; }
.feature__eyebrow {
    display: flex;
    gap: 0.75rem;
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--text-muted);
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--line);
}
.feature__title {
    margin-top: 1.1rem;
    font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem);
    letter-spacing: -0.03em;
    line-height: 1.02;
}
.feature__title a::after { content: ""; position: absolute; inset: 0; }
.feature__dek { margin-top: 0.9rem; font-size: var(--t-lede); color: var(--text-muted); max-width: 44ch; }
.feature__note {
    margin-top: 1.2rem;
    padding-left: 1rem;
    border-left: 2px solid var(--signal);
    font-size: var(--t-small);
    color: var(--text-muted);
    max-width: 48ch;
}
.feature__actions { margin-top: 1.6rem; }

/* TechnicalSpecList */
.spec-list {
    margin-top: 1.6rem;
    border-top: 1px solid var(--line-strong);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.spec-list div {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--line);
    min-width: 0;
}
.spec-list div:nth-child(odd) { padding-right: 1rem; }
.spec-list dt {
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--text-muted);
}
.spec-list dd {
    font-family: var(--font-mono);
    font-size: var(--t-small);
    margin-top: 0.2rem;
    overflow-wrap: anywhere;
}
.spec-list--single { grid-template-columns: minmax(0, 1fr); }

/* ── 10. UTILITY BLOCK: CHECKLISTS ────────────────────────────── */

.utility-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 265px), 1fr));
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}
.checklist {
    padding: clamp(1.15rem, 0.9rem + 0.8vw, 1.6rem);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.checklist__head { display: flex; align-items: baseline; gap: 0.7rem; }
.checklist__n {
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    color: var(--signal-ink);
    font-weight: 500;
}
:root[data-theme="dark"] .checklist__n { color: var(--signal); }
.checklist__title { font-size: var(--t-h4); text-transform: uppercase; letter-spacing: 0.01em; }
.checklist__note { margin-top: 0.6rem; font-size: var(--t-tiny); color: var(--text-muted); }
.checklist__items { margin-top: 1rem; }
.checklist__items li {
    display: grid;
    grid-template-columns: 1.15rem minmax(0, 1fr);
    gap: 0.6rem;
    padding: 0.6rem 0;
    border-top: 1px solid var(--line);
    font-size: var(--t-small);
}
.checklist__box {
    width: 1.05rem; height: 1.05rem;
    margin-top: 0.22rem;
    border: 1.5px solid var(--line-strong);
    border-radius: 1px;
    flex: none;
}
.checklist__label { font-weight: 600; }
.checklist__detail { display: block; color: var(--text-muted); font-size: var(--t-tiny); margin-top: 0.15rem; }

/* Numbered step sequence, used by Survive and Recovery. */
.steps { border-top: 1px solid var(--line-strong); counter-reset: step; }
.step {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: clamp(0.75rem, 0.4rem + 1vw, 1.75rem);
    padding: clamp(1rem, 0.8rem + 0.8vw, 1.5rem) 0;
    border-bottom: 1px solid var(--line);
}
.step__n {
    font-family: var(--font-mono);
    font-size: var(--t-h4);
    font-weight: 700;
    color: var(--signal-ink);
    line-height: 1.2;
}
:root[data-theme="dark"] .step__n { color: var(--signal); }
.section--dark .step__n { color: var(--signal); }
.step__title { font-size: var(--t-h3); }
.step__detail { margin-top: 0.45rem; color: var(--text-muted); max-width: 62ch; font-size: var(--t-small); }

/* ── 11. MAINTENANCE / WORKSHOP FEATURE ───────────────────────── */

.workshop-callout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 0.8rem + 3vw, 3.5rem);
    align-items: start;
}
.workshop-callout__figure { position: relative; border: 1px solid var(--line); background: var(--bg-soft); }
.workshop-callout__figure img { width: 100%; height: auto; }
.workshop-callout__figcaption {
    border-top: 1px solid var(--line);
    padding: 0.65rem 0.9rem;
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.callout-list { border-top: 1px solid var(--line-strong); margin-top: 1.4rem; }
.callout-list li {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    gap: 0.85rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--t-small);
}
.callout-list__n {
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--on-signal);
    background: var(--signal);
    width: 2.1rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1px;
}
.callout-list__part { font-weight: 600; }
.callout-list__check { display: block; color: var(--text-muted); font-size: var(--t-tiny); margin-top: 0.1rem; }

/* Interval table. Scrolls inside its own container on narrow screens. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: var(--t-small);
}
.data-table th, .data-table td {
    text-align: left;
    padding: 0.7rem 1rem 0.7rem 0;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
.data-table thead th {
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 500;
    border-bottom-color: var(--line-strong);
    white-space: nowrap;
}
.data-table td.num { font-family: var(--font-mono); white-space: nowrap; }
.data-table .note { color: var(--text-muted); font-size: var(--t-tiny); }
.scroll-hint {
    font-family: var(--font-mono);
    font-size: var(--t-tiny);
    color: var(--text-muted);
    margin-top: 0.6rem;
}

/* ── 12. ARTICLE CARDS & ROWS ─────────────────────────────────── */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
    gap: clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem);
}

.article-card { position: relative; display: flex; flex-direction: column; }
.article-card__media { overflow: hidden; background: var(--bg-soft); margin-bottom: 1rem; }
.article-card__media img { width: 100%; height: auto; transition: transform var(--dur-slow) var(--ease); }
.article-card:hover .article-card__media img { transform: scale(1.04); }
.article-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.85rem;
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--text-muted);
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--line);
}
.article-card__cat { color: var(--signal-ink); font-weight: 500; }
:root[data-theme="dark"] .article-card__cat { color: var(--signal); }
.article-card__title { margin-top: 0.8rem; font-size: var(--t-h3); }
.article-card__title a::after { content: ""; position: absolute; inset: 0; }
.article-card__excerpt { margin-top: 0.55rem; font-size: var(--t-small); color: var(--text-muted); }
.article-card__foot {
    margin-top: auto;
    padding-top: 0.9rem;
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ArticleListRow. The denser listing form. */
.row-list { border-top: 1px solid var(--line-strong); }
.article-row {
    position: relative;
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr) 7rem;
    gap: clamp(0.75rem, 0.4rem + 1.2vw, 2rem);
    align-items: baseline;
    padding: clamp(0.95rem, 0.75rem + 0.7vw, 1.4rem) 0;
    border-bottom: 1px solid var(--line);
    transition: background var(--dur-fast) var(--ease);
}
.article-row:hover { background: var(--bg-soft); }
.article-row__cat,
.article-row__meta {
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--text-muted);
}
.article-row__meta { text-align: right; white-space: nowrap; }
.article-row__title { font-size: var(--t-h4); }
.article-row__title a::after { content: ""; position: absolute; inset: 0; }
.article-row__excerpt { margin-top: 0.35rem; font-size: var(--t-small); color: var(--text-muted); max-width: 62ch; }

/* An honest marker on listings that have no page behind them yet. */
.tag-upcoming {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--line-strong);
    border-radius: 1px;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    vertical-align: 0.15em;
}

/* Static topic navigation. Not a filter, and does not pretend to be one. */
.topic-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.topic-nav a, .topic-nav span {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--text-muted);
}
.topic-nav a:hover { border-color: var(--text); color: var(--text); }

/* ── 13. MARKET ───────────────────────────────────────────────── */

.gear-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}
.gear-item {
    padding: clamp(1.15rem, 0.9rem + 0.8vw, 1.6rem);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-direction: column;
}
.gear-item__top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--text-muted);
}
.gear-item__name { margin-top: 0.8rem; font-size: var(--t-h4); }
.gear-item__summary { margin-top: 0.5rem; font-size: var(--t-small); color: var(--text-muted); }
.verdict {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
}
.verdict--tested { color: var(--signal-ink); }
:root[data-theme="dark"] .verdict--tested { color: var(--signal); }
.verdict::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.verdict--untested { color: var(--text-muted); }
.verdict--untested::before { background: transparent; border: 1.5px solid currentColor; }

/* ── 14. RECOVERY BANNER ──────────────────────────────────────── */

.recovery-banner {
    background: var(--signal);
    color: var(--on-signal);
}
.recovery-banner__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 0.8rem + 3vw, 4rem);
    align-items: start;
}
.recovery-banner__label {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    font-weight: 700;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(18, 18, 18, 0.35);
}
.recovery-banner__title {
    margin-top: 1.4rem;
    font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
    text-transform: uppercase;
    letter-spacing: -0.03em;
    line-height: 0.98;
}
.recovery-banner__body { margin-top: 1rem; max-width: 46ch; font-size: var(--t-lede); color: rgba(18, 18, 18, 0.82); }
.recovery-banner__actions { margin-top: 1.6rem; }
.recovery-banner .btn {
    border-color: var(--on-signal);
    color: var(--on-signal);
}
.recovery-banner .btn:hover { background: var(--on-signal); color: var(--signal); }
.recovery-banner .btn--solid { background: var(--on-signal); color: var(--signal); }
.recovery-banner .btn--solid:hover { background: transparent; color: var(--on-signal); }

.ready-list { border-top: 1px solid rgba(18, 18, 18, 0.35); }
.ready-list li {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid rgba(18, 18, 18, 0.22);
    font-size: var(--t-small);
}
.ready-list__n { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: 0.08em; font-weight: 700; }
.ready-list__label { font-weight: 700; }
.ready-list__detail { display: block; color: rgba(18, 18, 18, 0.72); font-size: var(--t-tiny); margin-top: 0.1rem; }

/* Disclaimers. Never decorative, so they get a border rather than a tint. */
.disclaimer {
    border: 1px solid var(--line-strong);
    border-left-width: 4px;
    padding: clamp(0.9rem, 0.75rem + 0.6vw, 1.35rem);
    font-size: var(--t-small);
    color: var(--text-muted);
    max-width: 72ch;
}
.disclaimer strong { color: var(--text); display: block; margin-bottom: 0.35rem; }
.recovery-banner .disclaimer {
    border-color: rgba(18, 18, 18, 0.45);
    color: rgba(18, 18, 18, 0.82);
    margin-top: 1.6rem;
    max-width: none;
}
.recovery-banner .disclaimer strong { color: var(--on-signal); }

/* ── 15. FORMS ────────────────────────────────────────────────── */

.field { display: grid; gap: 0.4rem; }
.field + .field { margin-top: 1rem; }
.field label {
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--text-muted);
}
.field .hint { font-size: var(--t-tiny); color: var(--text-muted); font-family: var(--font-display); text-transform: none; letter-spacing: 0; }
.field input, .field select, .field textarea {
    width: 100%;
    min-height: 46px;
    padding: 0.65rem 0.8rem;
    font-family: inherit;
    font-size: var(--t-body);
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--line-strong);
    border-radius: 2px;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--signal); }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: var(--signal-deep); border-width: 2px; }
.field__error { font-size: var(--t-tiny); color: var(--signal-ink); font-weight: 600; }
:root[data-theme="dark"] .field__error { color: var(--signal); }

.form-status {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--line-strong);
    border-left-width: 4px;
    font-size: var(--t-small);
}
.form-status:empty { display: none; }
.form-status[data-state="ok"] { border-left-color: var(--signal); }
.form-status[data-state="error"] { border-left-color: var(--signal-deep); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.form-grid .field + .field { margin-top: 0; }
.form-grid .field--full { grid-column: 1 / -1; }

/* NewsletterForm */
.newsletter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 0.8rem + 3vw, 4rem); align-items: end; }
.newsletter__title { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); text-transform: uppercase; letter-spacing: -0.025em; }
.newsletter__body { margin-top: 0.8rem; color: var(--text-muted); max-width: 44ch; }
.newsletter__row { display: flex; gap: 0.6rem; align-items: flex-start; flex-wrap: wrap; }
.newsletter__row .field { flex: 1 1 240px; }

/* ── 16. SITE FOOTER ──────────────────────────────────────────── */

.site-footer {
    background: var(--surface-dark);
    color: var(--text-on-dark);
    padding-top: clamp(3rem, 2rem + 3vw, 5rem);
    padding-bottom: calc(env(safe-area-inset-bottom) + 1.5rem);
}
.site-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.2fr);
    gap: clamp(1.75rem, 1rem + 2.5vw, 3.5rem);
    padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
    border-bottom: 1px solid rgba(237, 233, 225, 0.18);
}
.site-footer__mission { margin-top: 1.5rem; font-size: var(--t-small); color: #A8A49B; max-width: 42ch; }
.site-footer h2 {
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    font-weight: 500;
    color: #8E8A82;
    margin-bottom: 1rem;
}
.site-footer__links li + li { margin-top: 0.15rem; }
.site-footer__links a {
    display: inline-block;
    padding: 0.4rem 0;
    font-size: var(--t-small);
    position: relative;
}
.site-footer__links a::after {
    content: "";
    position: absolute;
    left: 0; right: 100%; bottom: 0.25rem;
    height: 1px;
    background: var(--signal);
    transition: right var(--dur) var(--ease);
}
.site-footer__links a:hover::after { right: 0; }
.site-footer__contact { font-size: var(--t-small); color: #A8A49B; }
.site-footer__contact a { color: var(--text-on-dark); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__cta { display: grid; gap: 0.6rem; margin-top: 1.25rem; }
.site-footer__meta {
    padding-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: var(--t-tiny);
    color: #8E8A82;
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.site-footer__legal a { padding-block: 0.25rem; }
.site-footer__legal a:hover { color: var(--text-on-dark); }

/* ── 17. PAGE MASTHEAD (section pages) ────────────────────────── */

.masthead { position: relative; }
.masthead__purpose {
    margin-top: 1rem;
    font-size: var(--t-lede);
    color: #CFCAC0;
    max-width: 52ch;
}
.masthead__lede { margin-top: 1.2rem; max-width: 58ch; color: #B6B1A8; font-size: var(--t-small); }

.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 0.8rem + 3vw, 4rem);
    align-items: start;
}
.split--wide-left { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }

.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.related-card { background: var(--bg); padding: clamp(1.15rem, 0.9rem + 0.8vw, 1.6rem); position: relative; transition: background var(--dur-fast) var(--ease); }
.related-card:hover { background: var(--bg-soft); }
.related-card__n { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--track-label); color: var(--text-muted); }
.related-card__title { margin-top: 0.5rem; font-size: var(--t-h3); text-transform: uppercase; }
.related-card__title a::after { content: ""; position: absolute; inset: 0; }
.related-card__blurb { margin-top: 0.4rem; font-size: var(--t-small); color: var(--text-muted); }

/* ── 18. ARTICLE DETAIL ───────────────────────────────────────── */

.article-body { max-width: var(--measure); }
.article-body > * + * { margin-top: 1.15em; }
.article-body h2 {
    margin-top: 2.2em;
    font-size: var(--t-h2);
    padding-top: 0.7em;
    border-top: 1px solid var(--line);
}
.article-body p { font-size: 1.0625rem; line-height: 1.7; }
.article-body .pull {
    margin-block: 1.8em;
    padding-left: 1.2rem;
    border-left: 3px solid var(--signal);
    font-size: var(--t-h3);
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.015em;
}
.article-body .note {
    border: 1px solid var(--line-strong);
    border-left-width: 4px;
    border-left-color: var(--signal);
    padding: clamp(0.9rem, 0.75rem + 0.6vw, 1.25rem);
    font-size: var(--t-small);
    color: var(--text-muted);
}
.article-body .note strong { display: block; color: var(--text); font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--track-label); text-transform: uppercase; margin-bottom: 0.4rem; }
.article-body ul.marked { border-top: 1px solid var(--line); }
.article-body ul.marked li {
    padding: 0.65rem 0 0.65rem 1.6rem;
    border-bottom: 1px solid var(--line);
    font-size: var(--t-small);
    position: relative;
}
.article-body ul.marked li::before {
    content: "";
    position: absolute;
    left: 0; top: 1.1rem;
    width: 8px; height: 1px;
    background: var(--signal);
}
.article-body .list-title { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem; }

.article-aside { position: sticky; top: calc(var(--header-h-pin) + 1.5rem); }

/* ── 19. MOTION ───────────────────────────────────────────────── */

[data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
    transition-delay: calc(var(--i, 0) * 70ms);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
html:not(.js) [data-reveal] { opacity: 1; transform: none; }

@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;
        scroll-behavior: auto !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
}

/* ── 20. RESPONSIVE ───────────────────────────────────────────── */

@media (max-width: 1080px) {
    .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
    :root { --header-h: 78px; --header-h-pin: 62px; }

    .primary-nav { display: none; }
    .menu-trigger { display: inline-flex; }

    .index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .index-card--wide { grid-column: span 2; }
    .index-card--tall { grid-row: span 1; }

    .feature,
    .workshop-callout,
    .recovery-banner__inner,
    .newsletter,
    .split, .split--wide-left { grid-template-columns: minmax(0, 1fr); }

    .article-aside { position: static; }
    .hero__field { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    /* Editorial grids become a reading sequence, not a squeezed desktop layout. */
    .index-grid { grid-template-columns: minmax(0, 1fr); }
    .index-card--wide { grid-column: span 1; }
    .index-card { min-height: 0; }
    .index-card--media { min-height: 300px; }

    .article-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.3rem;
    }
    .article-row__meta { text-align: left; }

    .form-grid { grid-template-columns: minmax(0, 1fr); }
    .spec-list { grid-template-columns: minmax(0, 1fr); }
    .spec-list div:nth-child(odd) { padding-right: 0; }

    .site-footer__top { grid-template-columns: minmax(0, 1fr); }
    .site-footer__meta { flex-direction: column; }

    .hero { min-height: min(88vh, 720px); }
    .hero__title { max-width: none; }
    .step { grid-template-columns: 2.5rem minmax(0, 1fr); }
}

@media (max-width: 420px) {
    .header__actions { gap: 0.4rem; }
    .recovery-action { padding-inline: 0.7rem; gap: 0.4rem; }
    .recovery-action__text { display: none; }
    .recovery-action__short { display: inline; }
    .hero__field { grid-template-columns: minmax(0, 1fr); }
}

@media print {
    .site-header, .menu-overlay, .recovery-banner, .newsletter { display: none; }
    body { background: #fff; color: #000; }
}

/* ── 21. RECOVERY MASTHEAD ────────────────────────────────────── */

/* Recovery deliberately does not open with a tall photograph. A rider reading
   this page is already stopped somewhere they would rather not be, so the
   first thing on screen is the instruction, at the top, with nothing to
   scroll past and no large image to wait for. */

.page-top { padding-top: calc(var(--header-h) + clamp(1.5rem, 1rem + 2vw, 3rem)); }

.alert-masthead {
    background: var(--signal);
    color: var(--on-signal);
    padding-top: calc(var(--header-h) + clamp(1.25rem, 1rem + 2vw, 2.5rem));
    padding-bottom: clamp(1.75rem, 1.25rem + 2vw, 3rem);
}
.alert-masthead__label {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    font-weight: 700;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(18, 18, 18, 0.35);
}
.alert-masthead__title {
    margin-top: 1.2rem;
    font-size: clamp(2.4rem, 1.5rem + 4vw, 4.4rem);
    text-transform: uppercase;
    letter-spacing: -0.035em;
    line-height: 0.94;
}
.alert-masthead__purpose {
    margin-top: 1rem;
    max-width: 52ch;
    font-size: var(--t-lede);
    color: rgba(18, 18, 18, 0.84);
}
.alert-masthead__first {
    margin-top: 1.75rem;
    border: 2px solid var(--on-signal);
    padding: clamp(1rem, 0.85rem + 0.7vw, 1.5rem);
    max-width: 78ch;
}
.alert-masthead__first h2 {
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.alert-masthead__first p { font-size: var(--t-small); }
.alert-masthead__first p + p { margin-top: 0.5rem; }
.alert-masthead__actions { margin-top: 1.5rem; }

/* On the orange ground, buttons take ink-black rather than the theme's text
   colour. Without this the dark theme puts bone type on orange at about 3:1.
   Same rule the recovery banner already carries. */
.alert-masthead .btn { color: var(--on-signal); border-color: var(--on-signal); }
.alert-masthead .btn:hover { background: var(--on-signal); color: var(--signal); }
.alert-masthead .btn--solid { background: var(--on-signal); color: var(--signal); }
.alert-masthead .btn--solid:hover { background: transparent; color: var(--on-signal); }

/* Service list, used by Workshop. */
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}
.service {
    padding: clamp(1.15rem, 0.9rem + 0.8vw, 1.6rem);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-direction: column;
}
.service__ref {
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    color: var(--text-muted);
}
.service__name { margin-top: 0.7rem; font-size: var(--t-h3); }
.service__summary { margin-top: 0.5rem; font-size: var(--t-small); color: var(--text-muted); }

/* Plain two column fact list, used for scope and practical detail. */
.fact-list { border-top: 1px solid var(--line-strong); }
.fact-list li {
    display: grid;
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    gap: clamp(0.5rem, 0.3rem + 1vw, 1.75rem);
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--t-small);
}
.fact-list__k {
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--text-muted);
}
.fact-list--marks li { grid-template-columns: 1.5rem minmax(0, 1fr); align-items: baseline; }
.fact-list__mark { color: var(--signal-ink); font-family: var(--font-mono); font-weight: 700; }
:root[data-theme="dark"] .fact-list__mark { color: var(--signal); }

@media (max-width: 720px) {
    .fact-list li { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
    .fact-list--marks li { grid-template-columns: 1.5rem minmax(0, 1fr); }
}