/* ============================================================
   LAERD DISSERTATION — SHARED STYLESHEET
   /css/laerd-shared.css

   The complete design system for the 2026 brand refresh. (v1.4)
   Every page links this one file; do not edit per page.

   Palette roles (from the Laerd brand kit):
   — Sky #f3f8fc · Snow #ffffff · Brand blue #338eca (large/graphic)
   — Trail blue #1e6fa8 (links/small text) · Trail crimson #b23a48
   — Summit gold #d9a036 (decorative) · Gold-deep #946d22 (gold text)
   — Ink #3a3f41
   ============================================================ */

/* ============================================================
   SELF-HOSTED FONT — Montserrat (OFL licensed)
   Variable weight axis 100–900; subset to Latin (incl. æ).
   No third-party font requests — file ships with the site.
   ============================================================ */
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   CSS CUSTOM PROPERTIES — brand tokens
   Palette roles (from the Laerd brand kit):
   — Sky          #f3f8fc  page background, sampled from the hero
   — Snow         #ffffff  cards, header, content ground
   — Brand blue   #338ECA  strokes, graphics, LARGE display only
                           (3.6:1 on white — fails AA for body text)
   — Trail blue   #1e6fa8  links + small interactive text (5.0:1 ✓)
   — Trail crimson #b23a48 the dotted path; markers, active states,
                           kickers (5.9:1 ✓ text-safe)
   — Summit gold  #d9a036  CTA + celebration only; never small text
                           (2.3:1 — pair with ink text, not white)
   — Ink          #3a3f41  brand subtitle grey, body text
   ============================================================ */
:root {
  --color-bg: #f3f8fc;
  --color-bg-card: #ffffff;
  --color-primary: #338eca;
  --color-primary-deep: #1e6fa8;
  --color-primary-light: rgba(51, 142, 202, 0.10);
  --color-accent: #b23a48;
  --color-accent-light: rgba(178, 58, 72, 0.07);
  --color-gold: #d9a036;
  --color-gold-hover: #e0ac4a;
  --color-gold-deep: #946d22;   /* gold for small text (4.7:1 on white) */
  --color-text: #3a3f41;
  --color-text-secondary: #545d62;
  --color-text-tertiary: #687277;
  --color-border: #d7e3ec;
  --color-border-light: #e5eef5;
  --color-footer: #3a3f41;
  --color-footer-link: #cfd9de;
  --color-footer-link-hover: #a8cfea; /* page-tint blue from the brand kit */
  --color-link: var(--color-primary-deep);
  --color-link-hover: var(--color-accent);

  --target-min: 44px;
  --max-width: 860px;
  --max-width-wide: 1060px;
  --header-max-width: 1120px;
  --hero-figure-max: 1480px;

  --font-display: 'Montserrat', -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-xxl: 4rem;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-pill: 999px;
}

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

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Footer hugs the bottom; the white "ground" stretches to fill */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: var(--color-border);
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover,
a:focus {
  color: var(--color-link-hover);
  text-decoration-color: var(--color-accent);
}

a:focus-visible {
  outline: 2px solid var(--color-primary-deep);
  outline-offset: 3px;
  border-radius: 3px;
}

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

/* ============================================================
   SKIP LINK
   ============================================================ */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--color-primary-deep);
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  z-index: 1000;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.skip-link:focus {
  top: 0;
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  color: #ffffff;
}

/* ============================================================
   VISUALLY HIDDEN (screen-reader-only)
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   SITE HEADER — white, brand-blue top edge, real logo lockup
   ============================================================ */
.site-header {
  background: var(--color-bg-card);
  border-top: 3px solid var(--color-primary);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  max-width: var(--header-max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
}

.site-logo {
  display: flex;
  align-items: center;
  min-height: var(--target-min);
  text-decoration: none;
}

.site-logo__img {
  display: block;
  height: 68px;
  width: auto;
}

/* Homepage variant — header floats on the hero sky */
.site-header--transparent {
  background: transparent;
  border-bottom: none;
}

/* ============================================================
   DESKTOP NAV (hidden on mobile)
   ============================================================ */
.main-nav__list {
  list-style: none;
  display: flex;
  gap: var(--space-xs);
}

.main-nav__link {
  display: flex;
  align-items: center;
  min-height: var(--target-min);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.main-nav__link:hover,
.main-nav__link:focus {
  color: var(--color-primary-deep);
  background: var(--color-primary-light);
}

.main-nav__link[aria-current="true"] {
  color: var(--color-primary-deep);
  background: var(--color-bg);
  font-weight: 700;
}

/* ============================================================
   MOBILE MENU TOGGLE
   — No-JS: plain <a> link to menu page
   — JS-enhanced: replaced with <button> that opens overlay
   ============================================================ */
.menu-toggle-link,
.menu-toggle-btn {
  display: none;
  align-items: center;
  min-height: var(--target-min);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.menu-toggle-link:hover,
.menu-toggle-link:focus,
.menu-toggle-btn:hover,
.menu-toggle-btn:focus {
  background: var(--color-primary-light);
  color: var(--color-primary-deep);
}

.menu-toggle-btn:focus-visible {
  outline: 2px solid var(--color-primary-deep);
  outline-offset: 3px;
}

/* ============================================================
   MOBILE OVERLAY
   ============================================================ */
.mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  background: var(--color-bg-card);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-nav.is-open {
  display: block;
}

.mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-lg);
  height: 100px;
  border-bottom: 1px solid var(--color-border);
}

.mobile-nav__close {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target-min);
  min-width: var(--target-min);
  padding: var(--space-sm);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--color-text);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.mobile-nav__close:hover,
.mobile-nav__close:focus {
  background: var(--color-primary-light);
  color: var(--color-primary-deep);
}

.mobile-nav__close:focus-visible {
  outline: 2px solid var(--color-primary-deep);
  outline-offset: 3px;
}

.mobile-nav__body {
  padding: var(--space-lg);
}

.mobile-nav__list {
  list-style: none;
}

.mobile-nav__item {
  border-bottom: 1px solid var(--color-border-light);
}

.mobile-nav__link {
  display: flex;
  align-items: center;
  min-height: var(--target-min);
  padding: var(--space-lg) var(--space-sm);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-text);
  border-radius: var(--radius-sm);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.mobile-nav__link:hover,
.mobile-nav__link:focus {
  color: var(--color-primary-deep);
  background: var(--color-primary-light);
}

.mobile-nav__link[aria-current="true"],
.mobile-nav__link[aria-current="page"] {
  color: var(--color-primary-deep);
  font-weight: 700;
}

/* ============================================================
   SECTION NAV — peer sections (categorical, so no trail dots)
   ============================================================ */
.section-nav {
  background: var(--color-bg-card);
  border-bottom: 1px solid var(--color-border);
}

.section-nav__inner {
  max-width: var(--header-max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.section-nav__list {
  list-style: none;
  display: flex;
  gap: var(--space-xs);
}

.section-nav__link {
  display: flex;
  align-items: center;
  min-height: var(--target-min);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  position: relative;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.section-nav__link:hover,
.section-nav__link:focus {
  color: var(--color-primary-deep);
  background: var(--color-primary-light);
}

.section-nav__link:focus-visible {
  outline: 2px solid var(--color-primary-deep);
  outline-offset: -2px;
}

.section-nav__link[aria-current="page"],
.section-nav__link[aria-current="true"] {
  color: var(--color-primary-deep);
  font-weight: 700;
}

.section-nav__link[aria-current="page"]::after,
.section-nav__link[aria-current="true"]::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: var(--space-md);
  right: var(--space-md);
  height: 3px;
  background: var(--color-accent);
  border-radius: 2px 2px 0 0;
}

/* ============================================================
   PHASE NAV — Route sub-navigation with a connecting trail
   ============================================================ */
.phase-nav {
  background: var(--color-bg-card);
  border-bottom: 1px solid var(--color-border);
}

.phase-nav__inner {
  max-width: var(--header-max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.phase-nav__label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 650;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.phase-nav__list {
  list-style: none;
  display: flex;
  align-items: center;
}

.phase-nav__list li {
  display: flex;
  align-items: center;
}

/* Subtle connecting trail between phases */
.phase-nav__list li + li::before {
  content: "";
  width: 24px;
  height: 8px;
  margin: 0 var(--space-xs);
  background-image: radial-gradient(circle, rgba(178, 58, 72, 0.4) 2.5px, transparent 3px);
  background-size: 8px 8px;
  background-repeat: repeat-x;
  background-position: center;
}

.phase-nav__link {
  display: flex;
  align-items: center;
  min-height: var(--target-min);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  position: relative;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.phase-nav__link:hover,
.phase-nav__link:focus {
  color: var(--color-primary-deep);
  background: var(--color-primary-light);
}

.phase-nav__link:focus-visible {
  outline: 2px solid var(--color-primary-deep);
  outline-offset: -2px;
}

/* Current phase — crimson trail-marker underline */
.phase-nav__link[aria-current="page"],
.phase-nav__link[aria-current="true"] {
  color: var(--color-primary-deep);
  font-weight: 700;
}

.phase-nav__link[aria-current="page"]::after,
.phase-nav__link[aria-current="true"]::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: var(--space-md);
  right: var(--space-md);
  height: 3px;
  background: var(--color-accent);
  border-radius: 2px 2px 0 0;
}

/* ============================================================
   BREADCRUMB — crimson trail-dot separators
   ============================================================ */
.breadcrumb {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-lg) 0;
}

.breadcrumb__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.875rem;
  color: var(--color-text-tertiary);
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.breadcrumb__item:not(:last-child)::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(178, 58, 72, 0.45);
}

.breadcrumb__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  color: var(--color-text-tertiary);
  text-decoration: none;
  transition: color 0.15s ease;
}

.breadcrumb__link:hover,
.breadcrumb__link:focus {
  color: var(--color-primary-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.breadcrumb__current {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  color: var(--color-text-secondary);
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.page-main {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-md) var(--space-lg) var(--space-xxl);
}

/* ============================================================
   LANDING WIDTH MODIFIERS
   ============================================================ */
.breadcrumb--wide,
.page-main--wide {
  max-width: var(--max-width-wide);
}

/* ============================================================
   PAGE HEADER — short trail-dot rule beneath
   ============================================================ */
.page-header {
  max-width: 740px;
  padding: var(--space-xl) 0 0;
  margin-bottom: var(--space-xl);
}

.page-header::after {
  content: "";
  display: block;
  width: 110px;  /* 5 trail dots × 22px tile (dots centred per tile) */
  height: 10px;
  margin-top: var(--space-xl);
  background-image: radial-gradient(circle, var(--color-accent) 5px, transparent 5.5px);
  background-size: 22px 10px;
  background-repeat: repeat-x;
  background-position: left center;
}

.page-header__title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: var(--space-sm);
}

.page-header__subtitle {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-primary-deep);
  line-height: 1.4;
  margin-bottom: var(--space-lg);
}

.page-header__desc {
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
  max-width: 640px;
}

/* ============================================================
   STAGE TRAIL — "you are here" progress dots (stage pages)
   Decorative companion to the stage stated in the title.
   ============================================================ */
.page-header--stage::after {
  content: none;
}

.stage-trail {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: var(--space-xl);
}

.stage-trail__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(178, 58, 72, 0.3);
}

.stage-trail__dot--current {
  width: 13px;
  height: 13px;
  background: var(--color-accent);
}

/* ============================================================
   PROSE CONTENT (article body)
   ============================================================ */
.prose {
  max-width: 740px;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-text);
}

.prose h2 {
  scroll-margin-top: var(--space-lg);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-top: var(--space-xxl);
  margin-bottom: var(--space-md);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  scroll-margin-top: var(--space-lg);
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 650;
  color: var(--color-text);
  line-height: 1.4;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

.prose p {
  margin-bottom: var(--space-lg);
}

.prose ul,
.prose ol {
  margin-bottom: var(--space-lg);
  padding-left: var(--space-lg);
}

.prose li {
  margin-bottom: var(--space-sm);
}

.prose strong {
  font-weight: 650;
}

.prose a {
  color: var(--color-primary-deep);
  font-weight: 500;
  text-decoration-color: rgba(30, 111, 168, 0.35);
}

.prose a:hover,
.prose a:focus {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

/* ============================================================
   PROSE EXTENSIONS (v1.4) — tables, figures, h4
   ============================================================ */
.prose h4 {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 650;
  color: var(--color-text);
  line-height: 1.4;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
}

.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-xl) 0;
}

.prose table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  line-height: 1.5;
  overflow: hidden;
}

.prose th {
  background: var(--color-primary-deep);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 650;
  text-align: left;
  padding: var(--space-sm) var(--space-md);
}

.prose td {
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--color-border-light);
  vertical-align: top;
}

.prose thead + tbody tr:first-child td {
  border-top: none;
}

.prose-figure {
  margin: var(--space-xl) 0;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
}

.prose-figure img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

.prose-figure figcaption {
  font-size: 0.8125rem;
  color: var(--color-text-tertiary);
  margin-top: var(--space-sm);
}

/* ============================================================
   IN-PAGE TABLE OF CONTENTS — a trail map of the page
   ============================================================ */
.toc {
  max-width: 740px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-xl);
  margin-bottom: var(--space-xl);
}

.toc__heading {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 650;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--space-sm);
}

.toc__list,
.toc__list--nested {
  list-style: none;
}

.toc__list--nested {
  padding-left: var(--space-lg);
}

.toc__link {
  display: block;
  position: relative;
  min-height: var(--target-min);
  padding: 0.6rem var(--space-sm) 0.6rem calc(var(--space-sm) + 1.05rem);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-primary-deep);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color 0.15s ease, background-color 0.15s ease;
}

/* Trail-dot marker, pinned to the first line of each link */
.toc__link::before {
  content: "";
  position: absolute;
  left: var(--space-sm);
  top: calc(0.6rem + 0.825em - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

.toc__list--nested .toc__link {
  font-size: 0.875rem;
  font-weight: 400;
}

.toc__list--nested .toc__link::before {
  width: 5px;
  height: 5px;
  background: rgba(178, 58, 72, 0.45);
}

.toc__link:hover,
.toc__link:focus {
  color: var(--color-accent);
  background: var(--color-primary-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================
   COMING SOON — quiet gold-edged callout
   ============================================================ */
.coming-soon {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-gold);
  border-radius: var(--radius-sm);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-xl) 0;
}

.coming-soon__heading {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 650;
  color: var(--color-gold-deep);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--space-xs);
}

.coming-soon__text {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.coming-soon__text a {
  color: var(--color-primary-deep);
  font-weight: 500;
  text-decoration-color: rgba(30, 111, 168, 0.35);
}

.coming-soon__text a:hover,
.coming-soon__text a:focus {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

/* ============================================================
   SEARCH/FILTER — No-JS submits to PHP; JS filters live
   ============================================================ */
.article-search {
  max-width: 740px;
  margin-bottom: var(--space-md);
}

.article-search__form {
  display: flex;
  gap: var(--space-sm);
  align-items: stretch;
}

.article-search__input {
  flex: 1;
  min-height: var(--target-min);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-text);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.article-search__input::placeholder {
  color: var(--color-text-tertiary);
}

.article-search__input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(51, 142, 202, 0.15);
}

/* No-JS submit button — hidden when JS is active */
.article-search__submit {
  min-height: var(--target-min);
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 650;
  color: #ffffff;
  background: var(--color-primary-deep);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.article-search__submit:hover,
.article-search__submit:focus {
  background: var(--color-primary);
}

html.js-enhanced .article-search__submit {
  display: none;
}

/* Clear button — JS-only, hidden until there's input */
.article-search__clear {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: var(--target-min);
  min-width: var(--target-min);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-tertiary);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.article-search__clear:hover,
.article-search__clear:focus {
  color: var(--color-primary-deep);
  background: var(--color-primary-light);
}

html.js-enhanced .article-search__clear.is-visible {
  display: flex;
}

.article-search__status {
  font-size: 0.8125rem;
  color: var(--color-text-tertiary);
  padding: var(--space-xs) 0;
  min-height: 1.5em;
}

.article-search__no-results {
  display: none;
  padding: var(--space-xl) var(--space-md);
  text-align: center;
  font-size: 0.9375rem;
  color: var(--color-text-tertiary);
}

.article-search__no-results.is-visible {
  display: block;
}

/* Search match highlight (built by JS via createElement) */
.article-list__title mark {
  background: rgba(217, 160, 54, 0.35);
  color: inherit;
  border-radius: 2px;
}

/* ============================================================
   ARTICLE LIST & CARD
   ============================================================ */
.article-card {
  max-width: 740px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  box-shadow: 0 1px 3px rgba(51, 142, 202, 0.08),
              0 8px 24px rgba(51, 142, 202, 0.06);
}

.article-list {
  list-style: none;
}

.article-list__item {
  border-bottom: 1px solid var(--color-border-light);
}

.article-list__item:last-child {
  border-bottom: none;
}

.article-list__item.is-hidden {
  display: none;
}

.article-list__link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--target-min);
  padding: var(--space-md) var(--space-sm);
  text-decoration: none;
  color: var(--color-text);
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease;
}

.article-list__link:hover,
.article-list__link:focus {
  background: var(--color-bg);
}

.article-list__link:focus-visible {
  outline: 2px solid var(--color-primary-deep);
  outline-offset: -2px;
}

.article-list__title {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 650;
  color: var(--color-text);
  line-height: 1.4;
  transition: color 0.15s ease;
}

.article-list__link:hover .article-list__title,
.article-list__link:focus .article-list__title {
  color: var(--color-primary-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article-list__desc {
  display: block;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-text-tertiary);
  line-height: 1.5;
  margin-top: 0.25rem;
}

.article-list__link[aria-current="page"] {
  background: var(--color-accent-light);
  border-left: 3px solid var(--color-accent);
  padding-left: calc(var(--space-sm) - 3px + 3px);
}

/* Alias match badge — shown when a match comes from data-aliases */
.article-list__alias-badge {
  display: none;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-accent);
  background: var(--color-accent-light);
  padding: 0.125rem 0.5rem;
  border-radius: 3px;
  margin-top: 0.25rem;
  width: fit-content;
}

.article-list__alias-badge.is-visible {
  display: inline-block;
}

/* ============================================================
   STAGE LIST — the ten stages as a threaded trail
   ============================================================ */
.stage-card {
  max-width: 740px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: 0 1px 3px rgba(51, 142, 202, 0.08),
              0 8px 24px rgba(51, 142, 202, 0.06);
}

.stage-list {
  list-style: none;
}

/* Vertical trail connector between stage markers */
.stage-list__item:not(:last-child)::after {
  content: "";
  display: block;
  width: 10px;
  height: 24px;
  margin-left: calc(var(--space-sm) + 22px - 5px);
  background-image: radial-gradient(circle, rgba(178, 58, 72, 0.4) 3px, transparent 3.5px);
  background-size: 10px 12px;
  background-repeat: repeat-y;
  background-position: center;
}

.stage-list__link {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: var(--target-min);
  padding: var(--space-sm);
  text-decoration: none;
  color: var(--color-text);
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease;
}

.stage-list__link:hover,
.stage-list__link:focus {
  background: var(--color-bg);
}

.stage-list__link:focus-visible {
  outline: 2px solid var(--color-primary-deep);
  outline-offset: -2px;
}

.stage-list__number {
  flex-shrink: 0;
  width: var(--target-min);
  height: var(--target-min);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 650;
  color: var(--color-primary-deep);
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  border-radius: 50%;
  transition: border-color 0.15s ease;
}

.stage-list__link:hover .stage-list__number,
.stage-list__link:focus .stage-list__number {
  border-color: var(--color-primary);
}

.stage-list__content {
  flex: 1;
}

.stage-list__title {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 650;
  color: var(--color-text);
  line-height: 1.4;
  transition: color 0.15s ease;
}

.stage-list__link:hover .stage-list__title,
.stage-list__link:focus .stage-list__title {
  color: var(--color-primary-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.stage-list__desc {
  display: block;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-text-tertiary);
  line-height: 1.5;
  margin-top: 0.125rem;
}

/* ============================================================
   PREV/NEXT STAGE NAVIGATION
   ============================================================ */
.prev-next-nav {
  display: flex;
  gap: var(--space-md);
  max-width: 740px;
  margin-top: var(--space-xxl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border-light);
}

.prev-next-nav__link {
  flex: 1 1 0;
  max-width: calc(50% - var(--space-md) / 2);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-height: var(--target-min);
  padding: var(--space-md) var(--space-lg);
  text-decoration: none;
  color: var(--color-text);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease;
}

.prev-next-nav__link:hover,
.prev-next-nav__link:focus {
  border-color: var(--color-primary);
}

.prev-next-nav__link:focus-visible {
  outline: 2px solid var(--color-primary-deep);
  outline-offset: 3px;
}

.prev-next-nav__link:hover .prev-next-nav__title,
.prev-next-nav__link:focus .prev-next-nav__title {
  color: var(--color-primary-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prev-next-nav__link--next {
  text-align: right;
  align-items: flex-end;
  margin-left: auto;
}

.prev-next-nav__label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 650;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.prev-next-nav__link--next .prev-next-nav__label::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.45em;
  letter-spacing: 0;
  transition: transform 0.15s ease;
}

.prev-next-nav__link--prev .prev-next-nav__label::before {
  content: "\2190";
  display: inline-block;
  margin-right: 0.45em;
  letter-spacing: 0;
  transition: transform 0.15s ease;
}

.prev-next-nav__link--next:hover .prev-next-nav__label::after,
.prev-next-nav__link--next:focus .prev-next-nav__label::after {
  transform: translateX(3px);
}

.prev-next-nav__link--prev:hover .prev-next-nav__label::before,
.prev-next-nav__link--prev:focus .prev-next-nav__label::before {
  transform: translateX(-3px);
}

.prev-next-nav__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
  transition: color 0.15s ease;
}

/* ============================================================
   ARTICLE PAGINATION — trail markers
   The page numbers are stops on the article's path; faded
   trail dots connect them.
   ============================================================ */
.article-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin-top: var(--space-xxl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border-light);
  max-width: 740px;
}

.article-pagination__pages {
  display: flex;
  align-items: center;
  flex-wrap: wrap;            /* v1.4: long groups (§10.6 flat sequences) wrap */
  justify-content: center;
  row-gap: var(--space-sm);
  list-style: none;
}

.article-pagination__pages li {
  display: flex;
  align-items: center;
}

.article-pagination__pages li + li::before {
  content: "";
  width: 30px;  /* 3 connector dots */
  height: 10px;
  margin: 0 var(--space-xs);
  background-image: radial-gradient(circle, rgba(178, 58, 72, 0.45) 3px, transparent 3.5px);
  background-size: 10px 10px;
  background-repeat: repeat-x;
  background-position: center;
}

.article-pagination__page {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--target-min);
  height: var(--target-min);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 650;
  color: var(--color-primary-deep);
  background: var(--color-bg-card);
  border: 2px solid var(--color-border);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease,
              color 0.15s ease;
}

.article-pagination__page:hover,
.article-pagination__page:focus {
  color: var(--color-primary-deep);
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.article-pagination__page:focus-visible {
  outline: 2px solid var(--color-primary-deep);
  outline-offset: 3px;
}

.article-pagination__page[aria-current="page"] {
  color: #ffffff;
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.article-pagination__page[aria-current="page"]:hover,
.article-pagination__page[aria-current="page"]:focus {
  color: #ffffff;
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.article-pagination__prev,
.article-pagination__next {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 650;
  color: var(--color-primary-deep);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.article-pagination__next::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.45em;
  transition: transform 0.15s ease;
}

.article-pagination__prev::before {
  content: "\2190";
  display: inline-block;
  margin-right: 0.45em;
  transition: transform 0.15s ease;
}

.article-pagination__prev:hover,
.article-pagination__prev:focus,
.article-pagination__next:hover,
.article-pagination__next:focus {
  color: var(--color-accent);
  background: var(--color-accent-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article-pagination__next:hover::after,
.article-pagination__next:focus::after {
  transform: translateX(3px);
}

.article-pagination__prev:hover::before,
.article-pagination__prev:focus::before {
  transform: translateX(-3px);
}

/* ============================================================
   FUNDAMENTALS LANDING — 2x2 sub-section card grid
   ============================================================ */
.subsection-cards__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.subsection-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-lg);
  text-decoration: none;
  color: var(--color-text);
  min-height: var(--target-min);
  box-shadow: 0 1px 3px rgba(51, 142, 202, 0.08),
              0 8px 24px rgba(51, 142, 202, 0.06);
  transition: border-color 0.15s ease, transform 0.15s ease,
              box-shadow 0.15s ease;
}

.subsection-card:hover,
.subsection-card:focus {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(51, 142, 202, 0.10),
              0 12px 32px rgba(51, 142, 202, 0.12);
}

.subsection-card:hover .subsection-card__title,
.subsection-card:focus .subsection-card__title {
  color: var(--color-primary-deep);
}

.subsection-card:focus-visible {
  outline: 2px solid var(--color-primary-deep);
  outline-offset: 3px;
}

.subsection-card__title {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-bottom: var(--space-sm);
  transition: color 0.15s ease;
}

.subsection-card__desc {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
  flex: 1;
  margin-bottom: var(--space-md);
}

.subsection-card__meta {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 650;
  color: var(--color-primary-deep);
  letter-spacing: 0.02em;
  transition: color 0.15s ease;
}

.subsection-card__meta::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.45em;
  transition: transform 0.15s ease;
}

.subsection-card:hover .subsection-card__meta,
.subsection-card:focus .subsection-card__meta {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.subsection-card:hover .subsection-card__meta::after,
.subsection-card:focus .subsection-card__meta::after {
  transform: translateX(3px);
}

/* Placeholder card — not yet launched */
.subsection-card--placeholder {
  opacity: 0.6;
  cursor: default;
  box-shadow: none;
}

.subsection-card--placeholder:hover,
.subsection-card--placeholder:focus {
  border-color: var(--color-border);
  transform: none;
  box-shadow: none;
}

.subsection-card--placeholder:hover .subsection-card__title,
.subsection-card--placeholder:focus .subsection-card__title {
  color: var(--color-text);
}

.subsection-card--placeholder .subsection-card__meta {
  font-family: var(--font-body);
  font-weight: 500;
  font-style: italic;
  color: var(--color-text-tertiary);
  text-decoration: none;
}

.subsection-card--placeholder .subsection-card__meta::after {
  content: none;
}

/* ============================================================
   HERO — sky band; the illustration's white base hands over
   to the white "ground" section beneath it
   ============================================================ */
.hero {
  background: var(--color-bg);
  text-align: center;
  display: flex;
  flex-direction: column;
  /* Fill the first screen exactly (100svh minus the 103px header):
     the fold lands on the mountain's base, where the white ground
     and the trail begin */
  min-height: calc(100vh - 103px);
  min-height: calc(100svh - 103px);
}

.hero__intro {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg) var(--space-xl);
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin-bottom: var(--space-md);
}

.hero__subtitle {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-primary-deep);
  line-height: 1.4;
  margin-bottom: var(--space-lg);
}

.hero__desc {
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.8;
  max-width: 620px;
  margin: 0 auto var(--space-xl);
}

.hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

/* Primary CTA — the summit-gold "flag" moment */
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: var(--target-min);
  padding: 0.8rem 2rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  background: var(--color-gold);
  border-radius: var(--radius-pill);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: background-color 0.15s ease, transform 0.15s ease,
              box-shadow 0.15s ease;
}

.hero__cta:hover,
.hero__cta:focus {
  background: var(--color-gold-hover);
  color: var(--color-text);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(217, 160, 54, 0.35);
}

.hero__cta:focus-visible {
  outline: 2px solid var(--color-primary-deep);
  outline-offset: 3px;
}

.hero__cta-flag {
  display: block;
  flex: none;
}

/* Secondary CTA — quiet trail-blue text link */
.hero__alt-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-primary-deep);
  text-decoration: underline;
  text-decoration-color: var(--color-border);
  text-underline-offset: 4px;
}

.hero__alt-link:hover,
.hero__alt-link:focus {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

/* The illustration — full-bleed up to its natural ceiling.
   Its sky matches --color-bg exactly; its white base meets
   the white .paths section, so the mountain sits on the
   page's "ground". */
.hero__figure {
  /* Take exactly the space left under the intro (flex-basis 0),
     never less than 240px, and let the illustration scale to fit */
  flex: 1 1 0;
  min-height: 240px;
  width: 100%;
  max-width: var(--hero-figure-max);
  margin: 0 auto;
}

.hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

/* ============================================================
   PATHS — white "ground" section with the section cards.
   The crimson dotted trail steps down from the mountain
   into the cards.
   ============================================================ */
.paths {
  background: var(--color-bg-card);
  padding-bottom: var(--space-xxl);
}

.paths__inner {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* Decorative trail connector — crimson dots, like the path
   in the illustration */
.trail-connector {
  /* Dot size matches the illustration's trail: 11px dots at 24px
     spacing in the 1568px source ≈ 10px at 22px as displayed */
  width: 12px;
  height: 66px; /* 3 dots × 22px spacing — keep as a multiple of 22 */
  margin: 0 auto var(--space-lg);
  background-image: radial-gradient(circle, var(--color-accent) 5px, transparent 5.5px);
  background-size: 12px 22px;
  background-repeat: repeat-y;
  background-position: center top;
}

.paths__header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.paths__kicker {
  display: block;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: var(--space-sm);
}

.paths__heading {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.section-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.section-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-lg);
  text-decoration: none;
  color: var(--color-text);
  min-height: var(--target-min);
  box-shadow: 0 1px 3px rgba(51, 142, 202, 0.08),
              0 8px 24px rgba(51, 142, 202, 0.06);
  transition: border-color 0.15s ease, transform 0.15s ease,
              box-shadow 0.15s ease;
}

.section-card:hover,
.section-card:focus {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(51, 142, 202, 0.10),
              0 12px 32px rgba(51, 142, 202, 0.12);
}

.section-card:hover .section-card__title,
.section-card:focus .section-card__title {
  color: var(--color-primary-deep);
}

.section-card:hover .section-card__action,
.section-card:focus .section-card__action {
  color: var(--color-primary-deep);
}

.section-card:focus-visible {
  outline: 2px solid var(--color-primary-deep);
  outline-offset: 3px;
}

.section-card__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-bottom: var(--space-sm);
  transition: color 0.15s ease;
}

.section-card__desc {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
  flex: 1;
  margin-bottom: var(--space-lg);
}

.section-card__action {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 650;
  color: var(--color-primary-deep);
  letter-spacing: 0.02em;
  transition: color 0.15s ease;
}

/* Persistent arrow — the action always reads as a link */
.section-card__action::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.45em;
  transition: transform 0.15s ease;
}

.section-card:hover .section-card__action,
.section-card:focus .section-card__action {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.section-card:hover .section-card__action::after,
.section-card:focus .section-card__action::after {
  transform: translateX(3px);
}

/* Featured card — crimson trailhead marker */
.section-card--featured {
  border-left: 3px solid var(--color-accent);
  background: linear-gradient(to right, var(--color-accent-light), rgba(178, 58, 72, 0));
  background-color: var(--color-bg-card);
}

.section-card--featured .section-card__action {
  color: var(--color-accent);
}

.section-card--featured:hover,
.section-card--featured:focus {
  border-color: var(--color-accent);
}

.section-card--featured:hover .section-card__title,
.section-card--featured:focus .section-card__title,
.section-card--featured:hover .section-card__action,
.section-card--featured:focus .section-card__action {
  color: var(--color-accent);
}

/* Homepage <main> is a flex column so the white ground stretches
   to the footer on tall screens (add class="main--home") */
.main--home {
  display: flex;
  flex-direction: column;
}

.main--home .paths {
  flex: 1;
}

/* ============================================================
   SITE FOOTER — ink ground, brand-blue top edge
   ============================================================ */
.site-footer {
  background: var(--color-footer);
  border-top: 3px solid var(--color-primary);
  color: #ffffff;
}

.site-footer__inner {
  max-width: var(--header-max-width);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.site-footer__brand {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ffffff;
}

.footer-nav__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs) var(--space-lg);
}

.footer-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  font-size: 0.9375rem;
  color: var(--color-footer-link);
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-nav__link:hover,
.footer-nav__link:focus {
  color: var(--color-footer-link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-nav__link:focus-visible {
  outline: 2px solid var(--color-footer-link-hover);
  outline-offset: 3px;
}

.site-footer__copy {
  font-size: 0.8125rem;
  color: #a6b1b6;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .main-nav {
    display: none;
  }

  .menu-toggle-link {
    display: flex;
  }

  html.js-enhanced .menu-toggle-link {
    display: none;
  }

  html.js-enhanced .menu-toggle-btn {
    display: flex;
  }

  .site-header__inner,
  .mobile-nav__header {
    height: 76px;
  }

  .site-logo__img {
    height: 52px;
  }

  /* Section nav + phase nav: stacked with left-bar indicator */
  .section-nav__inner,
  .phase-nav__inner {
    padding: 0;
  }

  .phase-nav__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .phase-nav__label {
    padding: var(--space-sm) var(--space-md) 0;
  }

  .section-nav__list,
  .phase-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .phase-nav__list li {
    display: block;
  }

  .phase-nav__list li + li::before {
    content: none;
  }

  .section-nav__link,
  .phase-nav__link {
    width: 100%;
    border-bottom: 1px solid var(--color-border-light);
    border-radius: 0;
  }

  .section-nav__list li:last-child .section-nav__link,
  .phase-nav__list li:last-child .phase-nav__link {
    border-bottom: none;
  }

  .section-nav__link[aria-current="page"]::after,
  .section-nav__link[aria-current="true"]::after,
  .phase-nav__link[aria-current="page"]::after,
  .phase-nav__link[aria-current="true"]::after {
    top: 50%;
    bottom: auto;
    left: 0;
    right: auto;
    transform: translateY(-50%);
    width: 3px;
    height: 1.25rem;
    border-radius: 0 2px 2px 0;
  }

  .breadcrumb {
    padding: var(--space-md) var(--space-md) 0;
  }

  .page-main {
    padding: var(--space-sm) var(--space-md) var(--space-xxl);
  }

  .page-header {
    padding-top: var(--space-lg);
    margin-bottom: var(--space-lg);
  }

  .page-header::after {
    margin-top: var(--space-lg);
  }

  .page-header__title {
    font-size: 1.5rem;
  }

  .page-header__subtitle {
    font-size: 1rem;
  }

  .prose {
    font-size: 1rem;
  }

  .toc {
    padding: var(--space-md) var(--space-lg);
  }

  .article-pagination {
    gap: var(--space-md);
  }

  /* v1.4: on mobile, long page groups wrap as plain circles —
     connector dots off, gap on */
  .article-pagination__pages {
    gap: var(--space-sm);
  }

  .article-pagination__pages li + li::before {
    content: none;
    margin: 0;
  }

  .stage-trail {
    gap: 9px;
  }

  .prev-next-nav {
    flex-direction: column;
  }

  .prev-next-nav__link {
    max-width: none;
  }

  .prev-next-nav__link--next {
    margin-left: 0;
  }

  .subsection-cards__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .subsection-card {
    padding: var(--space-lg) var(--space-md);
  }

  /* Homepage */
  .hero {
    min-height: 0;
  }

  .hero__figure {
    flex: none;
    min-height: 0;
  }

  .hero__img {
    height: auto;
  }

  .hero__intro {
    padding: var(--space-xl) var(--space-md) var(--space-lg);
  }

  .hero__subtitle {
    font-size: 1rem;
  }

  .hero__desc {
    font-size: 0.9375rem;
  }

  .hero__actions {
    gap: var(--space-md);
  }

  .trail-connector {
    height: 44px; /* 2 dots × 22px */
  }

  .paths__inner {
    padding: 0 var(--space-md);
  }

  .section-cards__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .section-card {
    padding: var(--space-lg) var(--space-md);
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .hero__cta:hover,
  .hero__cta:focus,
  .section-card:hover,
  .section-card:focus,
  .subsection-card:hover,
  .subsection-card:focus,
  .section-card:hover .section-card__action::after,
  .section-card:focus .section-card__action::after,
  .subsection-card:hover .subsection-card__meta::after,
  .subsection-card:focus .subsection-card__meta::after,
  .article-pagination__next:hover::after,
  .article-pagination__next:focus::after,
  .article-pagination__prev:hover::before,
  .article-pagination__prev:focus::before,
  .prev-next-nav__link--next:hover .prev-next-nav__label::after,
  .prev-next-nav__link--next:focus .prev-next-nav__label::after,
  .prev-next-nav__link--prev:hover .prev-next-nav__label::before,
  .prev-next-nav__link--prev:focus .prev-next-nav__label::before {
    transform: none;
  }
}