.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: var(--header-h);
  color: var(--paper-light);
  background: color-mix(in srgb, var(--ink) 96%, transparent);
  border-bottom: 1px solid rgba(246, 240, 228, 0.14);
  backdrop-filter: blur(18px);
}
.site-header :focus-visible,
.site-footer :focus-visible { outline-color: var(--copper-light); }

.header-inner {
  width: min(1600px, calc(100% - 2 * clamp(14px, 3vw, 48px)));
  min-height: var(--header-h);
  margin: auto;
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(170px, 250px) auto;
  align-items: center;
  gap: clamp(12px, 1.6vw, 26px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-decoration: none;
}
.brand::before { content: ""; width: 4px; height: 34px; flex: 0 0 auto; background: var(--oxblood); }
.brand-copy { display: grid; line-height: 1; }
.brand-name { font: 750 clamp(0.9rem, 1.4vw, 1.1rem)/1 var(--display); letter-spacing: 0.035em; white-space: nowrap; }
.brand-desc { margin-top: 6px; color: #bdb6a9; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; }

.header-quick-search { position: relative; z-index: 4; min-width: 0; }
.header-quick-field {
  min-height: 38px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 0 9px;
  color: #d0cabf;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .2);
}
.header-quick-field:focus-within { color: white; border-color: var(--copper-light); box-shadow: 0 0 0 2px rgba(217,155,112,.14); }
.header-quick-field svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.header-quick-field input { min-width: 0; width: 100%; padding: 0; color: white; background: transparent; border: 0; outline: 0; font-size: .72rem; }
.header-quick-field input::placeholder { color: #aaa49a; opacity: 1; }
.header-quick-field kbd { min-width: 20px; padding: 3px 5px; color: #9e9990; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.16); font: 700 .62rem/1 var(--mono); text-align: center; }
.header-quick-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(360px, calc(100vw - 28px));
  max-height: min(470px, calc(100vh - var(--header-h) - 28px));
  overflow: auto;
  color: var(--paper-light);
  background: #101615;
  border: 1px solid rgba(217,155,112,.48);
  box-shadow: 0 18px 44px rgba(0,0,0,.38);
}
.header-quick-result { display: grid; gap: 3px; padding: 11px 13px; border-bottom: 1px solid rgba(255,255,255,.09); text-decoration: none; }
.header-quick-result strong { overflow-wrap: anywhere; font: 650 .9rem/1.15 var(--display); }
.header-quick-result small { overflow: hidden; color: #9fa8a1; font: 650 .58rem/1.35 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.header-quick-result:hover,
.header-quick-result.is-active { color: white; background: rgba(166,92,57,.22); }
.header-quick-empty { margin: 0; padding: 14px 13px; color: #aaa49a; font-size: .72rem; }
.header-quick-all { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 13px; color: var(--copper-light); font-size: .64rem; font-weight: 750; letter-spacing: .07em; text-decoration: none; text-transform: uppercase; }
.header-quick-all:hover { color: white; background: rgba(255,255,255,.04); }

.header-actions { display: flex; align-items: center; align-self: stretch; gap: clamp(10px, 1.35vw, 22px); }
.main-nav { display: flex; align-items: stretch; gap: clamp(12px, 1.7vw, 26px); align-self: stretch; }
.main-nav a {
  position: relative;
  display: flex;
  align-items: center;
  color: #d0cabf;
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 3px;
  background: var(--copper-light);
  transition: right 180ms ease;
}
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after { right: 0; }
.main-nav a[aria-current="page"] { color: white; }

.language-picker { display: flex; align-items: center; }
.language-picker select {
  max-width: 8.5rem;
  min-height: 36px;
  padding: 7px 28px 7px 9px;
  color: #d0cabf;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 0;
  font: 650 .68rem/1 var(--sans);
}
.language-picker select:hover { color: white; border-color: rgba(255, 255, 255, .42); }

.menu-toggle { display: none; }

body[data-page="home"] .site-header {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 108px;
  color: #efe4cf;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

body[data-page="home"] .site-header :focus-visible { outline-color: #d56538; }
body[data-page="home"] .header-inner {
  width: 100%;
  min-height: 108px;
  padding-inline: clamp(28px, 3.05vw, 50px);
  grid-template-columns: minmax(210px, .8fr) minmax(180px, 270px) auto;
  gap: clamp(16px, 2vw, 32px);
}
body[data-page="home"] .brand { gap: 0; color: #efe4cf; }
body[data-page="home"] .brand::before { display: none; }
body[data-page="home"] .brand-name { font-size: clamp(.94rem, 1.22vw, 1.12rem); letter-spacing: .03em; }
body[data-page="home"] .brand-desc { margin-top: 7px; color: #b8a98f; font-size: .59rem; letter-spacing: .16em; }
body[data-page="home"] .main-nav { gap: clamp(16px, 1.8vw, 30px); }
body[data-page="home"] .main-nav a { color: #efe4cf; font-size: .68rem; letter-spacing: .15em; }
body[data-page="home"] .main-nav a + a::before {
  content: "·";
  position: absolute;
  left: -22px;
  color: #968267;
}
body[data-page="home"] .main-nav a:hover { color: #fff8ed; }
body[data-page="home"] .main-nav a::after { background: #d56538; }
body[data-page="home"] .language-picker select { color: #efe4cf; border-color: rgba(239, 228, 207, .28); }
body[data-page="home"] .header-quick-field { color: #efe4cf; background: rgba(8,11,12,.28); border-color: rgba(239,228,207,.28); }

.site-footer {
  color: #cbc5b9;
  background: var(--ink);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-inner {
  width: min(var(--container), calc(100% - 2 * var(--gutter)));
  margin: auto;
  padding: 54px 0 34px;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.3fr) repeat(2, minmax(140px, 0.6fr));
  gap: 44px;
}
.footer-title { color: var(--paper-light); font: 500 1.8rem/1 var(--serif); }
.footer-note { max-width: 52ch; margin: 14px 0 0; color: #aaa49a; }
.footer-group strong { display: block; margin-bottom: 12px; color: #8f897f; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; }
.footer-group a { display: block; width: max-content; margin: 8px 0; color: #d7d1c5; text-decoration: none; }
.footer-group a:hover { color: var(--copper-light); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 48px;
  padding-top: 20px;
  color: #9d978e;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.75rem;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--copper); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--copper-dark); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--copper-dark);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}
.text-link::after { content: "→"; transition: transform 160ms ease; }
.text-link:hover::after { transform: translateX(4px); }

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  color: var(--muted);
  border: 1px solid var(--line);
  font: 700 0.62rem/1 var(--sans);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.status-pill[data-status="published"] { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, transparent); }

.reveal { opacity: 1; transform: none; }
.reveal-scope .reveal { opacity: 0; transform: translateY(16px); transition: opacity 420ms ease, transform 420ms ease; }
.reveal-scope .reveal.is-visible { opacity: 1; transform: none; }

.route-hub {
  padding: clamp(42px, 5.5vw, 78px) 0;
  color: var(--ink);
  background: var(--paper-light);
  border-bottom: 1px solid var(--line-strong);
}
.route-hub-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 6vw, 88px);
  align-items: end;
}
.route-hub-head h2 {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(2.4rem, 4.8vw, 5rem);
  line-height: .94;
  letter-spacing: -.042em;
}
.route-hub-stats {
  display: flex;
  margin: 0;
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line);
}
.route-hub-stats > div {
  min-width: 150px;
  display: grid;
  padding: 17px 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.route-hub-stats dt {
  grid-row: 2;
  margin-top: 5px;
  color: var(--muted);
  font: 700 .62rem/1.3 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.route-hub-stats dd {
  grid-row: 1;
  margin: 0;
  color: var(--oxblood-dark);
  font: 750 clamp(2rem, 3vw, 3.2rem)/1 var(--display);
}
.route-hub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}
.route-hub-action {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 15px;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line-strong);
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .07em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}
.route-hub-action:hover,
.route-hub-action:focus-visible { color: var(--oxblood-dark); background: var(--paper); border-color: var(--oxblood); }
.route-hub-action--primary { color: var(--paper-light); background: var(--ink); border-color: var(--ink); }
.route-hub-action--primary:hover,
.route-hub-action--primary:focus-visible { color: white; background: var(--oxblood-dark); border-color: var(--oxblood-dark); }

.period-route-groups {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: clamp(30px, 5vw, 72px);
  margin-top: clamp(38px, 5vw, 64px);
}
.route-hub-group-head {
  min-height: 48px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 22px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line-strong);
}
.route-hub-group-head h3 { margin: 0; font-size: clamp(1.5rem, 2.2vw, 2.25rem); line-height: 1; }
.route-hub-group-head a { color: var(--oxblood-dark); font-size: .65rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; text-underline-offset: 4px; white-space: nowrap; }
.route-hub-list { border-left: 1px solid var(--line); }
.route-hub-item {
  position: relative;
  min-height: 142px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-content: center;
  gap: 4px 18px;
  padding: 20px 18px 20px 22px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.route-hub-item:hover,
.route-hub-item:focus-visible { color: var(--oxblood-dark); background: var(--paper); }
.route-hub-item-meta { color: var(--muted); font: 700 .61rem/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.route-hub-item strong { overflow-wrap: anywhere; font: 750 clamp(1.35rem, 2vw, 2rem)/1.05 var(--display); }
.route-hub-item-summary { max-width: 64ch; margin-top: 3px; color: var(--ink-soft); font-size: .76rem; line-height: 1.45; }
.route-hub-item-arrow { grid-column: 2; grid-row: 1 / 4; align-self: center; justify-self: end; color: var(--oxblood); font-size: 1.25rem; transition: transform 160ms ease; }
.route-hub-item:hover .route-hub-item-arrow,
.route-hub-item:focus-visible .route-hub-item-arrow { transform: translateX(4px); }

.route-hub--war .route-hub-head { grid-template-columns: 1fr; }
.route-hub--war { padding-block: clamp(34px, 3.8vw, 54px); }
.route-hub--war .route-hub-head h2 {
  max-width: 27ch;
  font-size: clamp(2.35rem, 3.7vw, 3.9rem);
}
.route-hub--war .route-hub-actions { margin-top: 24px; }
.campaign-route {
  margin: clamp(24px, 3vw, 40px) 0 0;
  padding: 0;
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line);
  list-style: none;
}
.campaign-route li { margin: 0; }
.campaign-route a,
.campaign-route-pending {
  min-height: 90px;
  display: grid;
  grid-template-columns: 48px minmax(130px, .35fr) minmax(0, 1fr) 28px;
  gap: clamp(16px, 3vw, 42px);
  align-items: center;
  padding: 15px 18px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.campaign-route a:hover,
.campaign-route a:focus-visible { color: var(--oxblood-dark); background: var(--paper); }
.campaign-route-index { color: var(--oxblood-dark); font: 750 1.15rem/1 var(--display); }
.campaign-route time { color: var(--muted); font: 700 .65rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.campaign-route-title { min-width: 0; display: grid; gap: 5px; }
.campaign-route-title strong { overflow-wrap: anywhere; font: 750 clamp(1.45rem, 2.6vw, 2.55rem)/1 var(--display); }
.campaign-route-title small { overflow: hidden; color: var(--ink-soft); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.campaign-route-arrow { justify-self: end; color: var(--oxblood); font-size: 1.25rem; transition: transform 160ms ease; }
.campaign-route a:hover .campaign-route-arrow,
.campaign-route a:focus-visible .campaign-route-arrow { transform: translateX(4px); }
.campaign-route-pending { color: var(--muted); background: var(--paper-deep); }
.campaign-route-empty { padding: 24px 18px; color: var(--muted); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }

@media (max-width: 1100px) {
  .header-inner { grid-template-columns: minmax(150px, 1fr) minmax(180px, 260px) auto; }
  .header-actions { gap: 10px; }
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: grid;
    gap: 0;
    padding: 8px 18px 16px;
    background: var(--ink);
    border-bottom: 1px solid rgba(255,255,255,.12);
    transform: scaleY(0);
    transform-origin: top;
    opacity: 0;
    pointer-events: none;
    transition: 160ms ease;
  }
  .main-nav[data-open="true"] { transform: scaleY(1); opacity: 1; pointer-events: auto; }
  .main-nav a { min-height: 48px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .main-nav a::after { display: none; }
  .menu-toggle {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--paper-light);
    background: transparent;
    border: 1px solid rgba(255,255,255,.22);
    cursor: pointer;
  }
  .menu-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }

  body[data-page="home"] .site-header {
    position: sticky;
    min-height: var(--header-h);
    color: #efe4cf;
    background: rgba(8, 11, 12, .96);
    border: 0;
    box-shadow: none;
    backdrop-filter: blur(18px);
  }
  body[data-page="home"] .header-inner {
    width: min(100% - 28px, var(--container));
    min-height: var(--header-h);
    padding: 0;
    grid-template-columns: minmax(150px, 1fr) minmax(180px, 260px) auto;
  }
  body[data-page="home"] .brand-name { font-size: .98rem; }
  body[data-page="home"] .brand-desc { color: #b8a98f; font-size: .57rem; }
  body[data-page="home"] .main-nav { background: #080b0c; border-bottom-color: rgba(239, 228, 207, .14); }
  body[data-page="home"] .main-nav a { color: #efe4cf; }
  body[data-page="home"] .main-nav a + a::before { display: none; }
  body[data-page="home"] .main-nav a:hover { color: #d56538; }
  body[data-page="home"] .menu-toggle { color: #efe4cf; border-color: rgba(239, 228, 207, .28); }

  .route-hub-head,
  .route-hub--war .route-hub-head { grid-template-columns: 1fr; align-items: start; }
  .route-hub-stats { justify-self: start; }
  .period-route-groups { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  :root { --header-h: 116px; }
  .header-inner,
  body[data-page="home"] .header-inner {
    min-height: 116px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 64px 44px;
    gap: 0 10px;
    padding-bottom: 8px;
  }
  .brand { grid-column: 1; grid-row: 1; }
  .header-actions { grid-column: 2; grid-row: 1; }
  .header-quick-search { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .header-quick-popover { left: 0; right: auto; width: 100%; }
  .header-quick-field { min-height: 44px; }
  .language-picker select { max-width: 6.8rem; }
  .brand-desc { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; }

  .route-hub { padding: 36px 0 44px; }
  .route-hub--war { padding: 32px 0 40px; }
  .route-hub-head { gap: 24px; }
  .route-hub-head h2 { font-size: clamp(2.35rem, 12vw, 3.8rem); }
  .route-hub--war .route-hub-head h2 { font-size: clamp(2.25rem, 10.5vw, 3.35rem); }
  .route-hub-stats { width: 100%; }
  .route-hub-stats > div { min-width: 0; flex: 1; padding: 14px; }
  .route-hub-actions { display: grid; grid-template-columns: 1fr; margin-top: 22px; }
  .route-hub-action { width: 100%; min-height: 48px; }
  .period-route-groups { gap: 34px; margin-top: 38px; }
  .route-hub-group-head { align-items: flex-end; }
  .route-hub-group-head h3 { font-size: 1.55rem; }
  .route-hub-group-head a { max-width: 16ch; text-align: right; white-space: normal; }
  .route-hub-item { min-height: 128px; padding: 18px 14px 18px 16px; }
  .route-hub-item-summary { font-size: .73rem; }
  .campaign-route { margin-top: 26px; }
  .campaign-route a,
  .campaign-route-pending {
    min-height: 104px;
    grid-template-columns: 34px minmax(0, 1fr) 22px;
    grid-template-rows: auto auto;
    gap: 4px 12px;
    padding: 14px 12px;
  }
  .campaign-route-index { grid-column: 1; grid-row: 1 / 3; align-self: center; }
  .campaign-route time { grid-column: 2; grid-row: 1; }
  .campaign-route-title { grid-column: 2; grid-row: 2; }
  .campaign-route-title strong { font-size: clamp(1.35rem, 7.5vw, 2rem); }
  .campaign-route-title small { white-space: normal; }
  .campaign-route-arrow { grid-column: 3; grid-row: 1 / 3; }
}
