:root {
  --paper: #e8edf0;
  --panel: #f7f8f6;
  --ink: #101a25;
  --blue: #123f63;
  --amber: #e19b2d;
  --red: #b13c32;
  --line: #9eabb3;
  --display: "Barlow Condensed", Impact, sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--serif); }
a { color: var(--blue); text-underline-offset: .18em; }
a:hover { color: var(--red); }
a:focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 20; top: .5rem; left: .5rem; padding: .7rem 1rem; color: #fff; background: var(--ink); transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.site-top { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem clamp(1rem, 3vw, 2.5rem); border-bottom: 1px solid var(--line); font: 600 .82rem/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.site-top a { color: inherit; }

.route-field { overflow: hidden; }
.route-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, .78fr); align-items: end; min-height: 31rem; padding: clamp(2rem, 6vw, 6rem) max(1rem, calc((100vw - 78rem) / 2)); color: #fff; background: var(--blue); }
.route-title { padding: 1rem clamp(1rem, 4vw, 3rem); }
.article-logo { width: clamp(6rem, 11vw, 9rem); margin: 0 0 1.5rem; padding: .35rem; background: #f2ead9; clip-path: polygon(3% 0, 100% 4%, 97% 100%, 0 96%); transform: rotate(-1.5deg); }
.article-logo img { display: block; width: 100%; height: auto; filter: contrast(1.04); }
.eyebrow, .article-meta, .route-index, .route-stop::before, .series-nav, .article-foot { font-family: var(--display); text-transform: uppercase; letter-spacing: .075em; }
.eyebrow { margin: 0 0 1.5rem; color: #9ec3d8; font-size: .9rem; }
h1 { max-width: 12ch; margin: 0; font: 700 clamp(4rem, 10vw, 8.5rem)/.79 var(--display); letter-spacing: -.035em; text-transform: uppercase; }
.dek { max-width: 42rem; margin: 2rem 0 1.5rem; font-size: clamp(1.1rem, 2vw, 1.4rem); line-height: 1.45; }
.article-meta { font-size: .78rem; }
.article-meta a { color: #fff; }
.route-map { width: 100%; max-height: 26rem; padding: 1.5rem; }
.route-map .line { fill: none; stroke-width: 9; stroke-linecap: round; }
.route-map .primary { stroke: #fff; }
.route-map .alternate { stroke: var(--amber); stroke-dasharray: 15 13; }
.route-map .closed { stroke: var(--red); stroke-dasharray: 3 18; }
.route-map circle { fill: var(--blue); stroke: #fff; stroke-width: 6; }

.route-layout { display: grid; grid-template-columns: 17rem minmax(0, 47rem); gap: clamp(2rem, 6vw, 6rem); justify-content: center; padding: 5rem clamp(1rem, 5vw, 4rem); }
.route-index { position: sticky; top: 1rem; align-self: start; padding: 1.1rem; border: 1px solid var(--line); background: rgba(247,248,246,.8); }
.route-index p { margin: 0 0 1rem; font-weight: 700; }
.route-index ol { margin: 0; padding: 0; list-style: none; }
.route-index li + li { border-top: 1px solid #c5cdd1; }
.route-index a { display: grid; grid-template-columns: 2rem 1fr; gap: .5rem; padding: .55rem 0; color: inherit; font-size: .85rem; text-decoration: none; }
.route-index span { color: var(--red); }
.route-essay { min-width: 0; font-size: clamp(1.05rem, 1.7vw, 1.23rem); line-height: 1.72; text-align: justify; text-wrap: pretty; hyphens: auto; orphans: 3; widows: 3; }
.route-opening { padding: 0 0 3rem 2rem; border-left: 9px solid var(--amber); font-size: 1.14em; }
.route-signal { margin: 2rem 0; padding: .75rem 1rem; color: #fff; background: var(--ink); font: 600 clamp(1.1rem, 3vw, 1.55rem)/1.15 var(--display); letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.route-stop { position: relative; padding: 3.5rem 0 1.5rem 3rem; border-left: 3px solid var(--blue); }
.route-stop::before { content: counter(route, decimal-leading-zero); position: absolute; top: 3.45rem; left: -1.2rem; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; color: #fff; background: var(--blue); border: 5px solid var(--paper); border-radius: 50%; font-size: .68rem; }
.route-essay { counter-reset: route; }
.route-stop { counter-increment: route; }
.route-stop h2 { margin: 0 0 1.5rem; font: 700 clamp(2rem, 5vw, 3.7rem)/.95 var(--display); text-transform: uppercase; }
.route-stop h3 { margin-top: 2rem; font: 600 1.5rem/1.1 var(--display); text-transform: uppercase; }
.route-stop p, .route-stop li { max-width: 68ch; }
.section-body { min-width: 0; }
.section-art { position: relative; margin: .5rem 0 2.25rem; border: 1px solid #71838e; background: var(--panel); clip-path: polygon(0 1.5%, 99.5% 0, 100% 97.5%, 1% 100%); }
.section-art::after { position: absolute; inset: .55rem; content: ""; border: 1px dashed rgba(247,248,246,.6); pointer-events: none; }
.section-art img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.route-stop blockquote { margin: 2rem 0; padding: .5rem 0 .5rem 1.5rem; border-left: 4px solid var(--red); color: #344957; }
.route-stop li + li { margin-top: .55rem; }
.references { border-left-color: var(--line); font-size: .88em; }
.references::before { background: #6e7b83; }
.references a { overflow-wrap: anywhere; }

.artifact-pair { display: grid; grid-template-columns: minmax(12rem, 24rem) minmax(15rem, 28rem); gap: clamp(1rem, 5vw, 4rem); align-items: center; justify-content: center; padding: 2rem 1rem 6rem; }
.artifact-pair figure { margin: 0; padding: .7rem; background: var(--panel); box-shadow: 0 1.2rem 2.4rem rgba(20,40,55,.16); transform: rotate(-1.5deg); }
.artifact-pair figure + figure { transform: rotate(1deg); }
.artifact-pair img { display: block; width: 100%; height: auto; }
.series-nav { padding: 2.5rem max(1rem, calc((100vw - 78rem)/2)); color: #fff; background: var(--ink); }
.series-nav p { color: #9eabb3; }
.series-nav ol { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.series-nav a { display: flex; gap: .6rem; color: #fff; text-decoration: none; }
.series-nav [aria-current="page"] { color: var(--amber); }
.series-nav span { color: #84939c; }
.article-foot { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem max(1rem, calc((100vw - 78rem)/2)); color: #b4c0c6; background: var(--ink); border-top: 1px solid #394651; font-size: .75rem; }
.article-foot a { color: inherit; }

@media (max-width: 760px) {
  html { scroll-behavior: auto; }
  .route-head { grid-template-columns: 1fr; min-height: auto; }
  .route-title { padding-inline: 0; }
  .article-logo { width: 6.5rem; }
  h1 { font-size: clamp(2.8rem, 16vw, 4rem); }
  .route-map { max-width: 30rem; justify-self: end; }
  .route-layout { display: block; padding-top: 2rem; }
  .route-index { position: static; margin-bottom: 3rem; }
  .route-stop { padding-left: 2rem; }
  .artifact-pair, .series-nav ol { grid-template-columns: 1fr; }
  .artifact-pair figure { width: min(100%, 28rem); justify-self: center; transform: none; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print { .site-top, .route-map, .route-index, .series-nav { display: none; } .route-head { display: block; min-height: auto; color: #000; background: #fff; } .route-layout { display: block; padding: 1rem; } }