:root {
  --ink: #172b3a;
  --paper: #f4efe6;
  --paper-deep: #e8dfd1;
  --white: #fffdf8;
  --plum: #6b4d6e;
  --rust: #c65d3a;
  --moss: #7b8650;
  --line: rgba(23, 43, 58, 0.24);
  --shadow: 0 20px 50px rgba(23, 43, 58, 0.16);
  --serif: "Fraunces", Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--ink);
}

body {
  margin: 0;
  min-width: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(23,43,58,.12) 1px, transparent 1.3px),
    linear-gradient(110deg, rgba(107,77,110,.04), transparent 34%, rgba(198,93,58,.04));
  background-size: 24px 24px, 100% 100%;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.72;
}

a { color: #713b2c; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--plum); }
img { display: block; max-width: 100%; }

.skip-link {
  position: fixed;
  z-index: 99;
  left: 1rem;
  top: -5rem;
  padding: .7rem 1rem;
  color: white;
  background: var(--rust);
}
.skip-link:focus { top: 1rem; }

.site-header {
  position: relative;
  z-index: 4;
  border-bottom: 2px solid var(--ink);
  background: rgba(244,239,230,.96);
}

.masthead {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 1.1rem 0 .85rem;
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(0, 2.2fr);
  align-items: end;
  gap: 1rem 2rem;
}

.brand {
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
}
.brand-kicker,
.eyebrow,
.section-index,
.card-number,
.page-stamp {
  display: block;
  font: 600 .71rem/1.2 var(--sans);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.brand-name {
  display: block;
  margin-top: .13rem;
  font: 650 clamp(1.45rem, 3vw, 2.15rem)/.95 var(--serif);
  letter-spacing: -.035em;
}

.primary-nav { min-width: 0; }
.primary-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: .38rem .55rem;
  min-width: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}
.primary-nav a {
  display: block;
  border: 1px solid var(--ink);
  padding: .37rem .62rem .32rem;
  color: var(--ink);
  background: var(--white);
  font: 600 .71rem/1.2 var(--sans);
  letter-spacing: .055em;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 var(--ink);
}
.primary-nav a[aria-current="page"],
.primary-nav a:hover {
  color: var(--white);
  background: var(--plum);
  transform: translate(1px,1px);
  box-shadow: 1px 1px 0 var(--ink);
}

main { overflow: hidden; }

.hero {
  position: relative;
  width: min(1240px, calc(100% - 2rem));
  margin: 2.4rem auto 4rem;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.25fr);
  align-items: center;
  gap: clamp(1.4rem, 4vw, 4rem);
}
.hero-copy { position: relative; z-index: 2; }
.page-stamp {
  width: max-content;
  margin-bottom: 1rem;
  padding: .45rem .65rem;
  color: var(--white);
  background: var(--rust);
  transform: rotate(-1.7deg);
}
.hero h1 {
  max-width: 12ch;
  margin: 0 0 1.1rem;
  font: 650 clamp(3.2rem, 7.3vw, 7.4rem)/.83 var(--serif);
  letter-spacing: -.065em;
}
.hero .lede {
  max-width: 37rem;
  margin: 0;
  padding-left: 1.1rem;
  border-left: 4px solid var(--moss);
  font-size: clamp(1.08rem, 1.7vw, 1.3rem);
  line-height: 1.53;
}
.hero-figure {
  position: relative;
  margin: 0;
  padding: .8rem .8rem 2.5rem;
  border: 2px solid var(--ink);
  background: var(--white);
  box-shadow: var(--shadow), 10px 10px 0 var(--rust);
  transform: rotate(1.2deg);
}
.hero-figure::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -.8rem;
  left: 44%;
  width: 6rem;
  height: 1.6rem;
  background: rgba(216,203,167,.78);
  transform: rotate(-3deg);
}
.hero-figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(.88) contrast(1.03);
}
.hero-figure figcaption {
  position: absolute;
  right: .9rem;
  bottom: .5rem;
  font: 600 .68rem/1.4 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hero.no-image {
  min-height: 26rem;
  grid-template-columns: minmax(0, 48rem) 1fr;
  border-bottom: 2px solid var(--ink);
}
.hero.no-image::after {
  content: attr(data-mark);
  justify-self: end;
  color: transparent;
  -webkit-text-stroke: 2px var(--line);
  font: 650 clamp(8rem, 20vw, 18rem)/.7 var(--serif);
  letter-spacing: -.09em;
}

.field-tabs,
.page-shell,
.related,
.gallery-grid {
  width: min(1080px, calc(100% - 2rem));
  margin-inline: auto;
}

.field-tabs {
  position: relative;
  margin-top: -1.4rem;
  margin-bottom: 5rem;
}
.field-tabs::before {
  content: "Recovered route markers / renewed purpose";
  display: block;
  margin-bottom: .8rem;
  font: 600 .7rem/1.3 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.tab-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .8rem;
}
.field-card {
  position: relative;
  min-width: 0;
  min-height: 13rem;
  padding: 1.1rem;
  border: 2px solid var(--ink);
  color: var(--ink);
  background: var(--white);
  text-decoration: none;
  box-shadow: 5px 5px 0 var(--ink);
}
.field-card:nth-child(2) { background: #dde0c5; transform: translateY(1rem) rotate(.5deg); }
.field-card:nth-child(3) { background: #ead3c4; transform: rotate(-.6deg); }
.field-card:nth-child(4) { background: #d9cadb; transform: translateY(.6rem) rotate(.4deg); }
.field-card:hover { color: var(--ink); transform: translateY(-.2rem); }
.card-number { color: var(--rust); }
.field-card h2 { margin: 2.4rem 0 .5rem; font: 650 1.7rem/1 var(--serif); }
.field-card p { margin: 0; font-size: .91rem; line-height: 1.45; }
.field-card .arrow { position: absolute; right: .8rem; bottom: .55rem; font-size: 1.4rem; }

.page-shell {
  display: grid;
  grid-template-columns: minmax(9rem, .28fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  margin-bottom: 5rem;
}
.margin-note { min-width: 0; }
.margin-note-inner {
  position: sticky;
  top: 1.5rem;
  padding-top: .7rem;
  border-top: 5px solid var(--plum);
}
.margin-note p {
  margin: .6rem 0;
  font-size: .8rem;
  line-height: 1.5;
}
.section-index { color: var(--plum); }

.article-body {
  min-width: 0;
  max-width: 48rem;
}
.article-body > :first-child { margin-top: 0; }
.article-body h1 { display: none; }
.article-body h2 {
  margin: 3.1rem 0 .75rem;
  padding-top: .65rem;
  border-top: 1px solid var(--ink);
  font: 650 clamp(1.65rem, 3vw, 2.35rem)/1.05 var(--serif);
  letter-spacing: -.025em;
}
.article-body h3 {
  margin: 2rem 0 .5rem;
  font: 650 1.25rem/1.2 var(--serif);
}
.article-body p { margin: 0 0 1.25rem; }
.article-body ul,
.article-body ol { margin: 0 0 1.5rem; padding-left: 1.25rem; }
.article-body li { margin: 0 0 .5rem; padding-left: .25rem; }
.article-body blockquote {
  margin: 2rem 0;
  padding: 1.2rem 1.4rem;
  border: 2px solid var(--ink);
  background: var(--white);
  box-shadow: 6px 6px 0 var(--paper-deep);
  font: 560 1.18rem/1.5 var(--serif);
}
.article-body a[href^="http"]::after { content: " ↗"; font-size: .7em; }

.inline-figure {
  margin: 2.8rem 0;
  padding: .65rem;
  border: 2px solid var(--ink);
  background: var(--white);
  box-shadow: 7px 7px 0 var(--plum);
  transform: rotate(-.45deg);
}
.inline-figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.inline-figure figcaption {
  padding: .6rem .35rem 0;
  font-size: .76rem;
  line-height: 1.4;
}

.gallery-grid {
  display: grid;
  grid-template-columns: 1.4fr .8fr;
  gap: 1.4rem;
  margin-top: -1rem;
  margin-bottom: 5rem;
}
.gallery-grid .inline-figure { margin: 0; }
.gallery-grid .inline-figure:nth-child(2) { margin-top: 4rem; transform: rotate(1deg); box-shadow-color: var(--rust); }

.related {
  margin-bottom: 5rem;
  padding: 1.4rem;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.related h2 { margin: 0 0 1rem; font: 650 1.5rem/1 var(--serif); }
.related ul { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.related a { display: block; padding: .45rem .7rem; border: 1px solid var(--paper); color: var(--paper); text-decoration: none; }
.related a:hover { color: var(--ink); background: var(--paper); }

.site-footer {
  border-top: 2px solid var(--paper);
  color: var(--paper);
  background: var(--ink);
}
.footer-inner {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 3rem 0 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 2.5rem;
}
.footer-name { margin: 0 0 .5rem; font: 650 2rem/1 var(--serif); }
.footer-tagline { margin: 0; color: #c8d0d4; font-size: .9rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: 0 0 1.4rem; padding: 0; list-style: none; }
.footer-nav a { color: var(--paper); font-size: .78rem; }
.non-affiliation {
  margin: 0;
  padding: 1rem;
  border: 1px solid rgba(244,239,230,.42);
  color: #dfe2de;
  font-size: .78rem;
  line-height: 1.55;
}
.copyright { grid-column: 1 / -1; margin: 0; padding-top: 1rem; border-top: 1px solid rgba(244,239,230,.22); color: #aeb8bd; font-size: .72rem; }

.error-page {
  min-height: 74vh;
  display: grid;
  place-items: center;
  padding: 2rem;
}
.error-card {
  width: min(700px, 100%);
  padding: clamp(1.5rem, 5vw, 4rem);
  border: 2px solid var(--ink);
  background: var(--white);
  box-shadow: 10px 10px 0 var(--rust);
  transform: rotate(-.5deg);
}
.error-code { color: var(--plum); font: 650 clamp(6rem, 22vw, 12rem)/.7 var(--serif); letter-spacing: -.08em; }
.error-card h1 { margin: 1rem 0; font: 650 2rem/1 var(--serif); }

@media (max-width: 900px) {
  .masthead { grid-template-columns: 1fr; align-items: start; }
  .primary-nav ul { justify-content: flex-start; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { max-width: 50rem; }
  .hero h1 { max-width: 10ch; }
  .hero-figure { width: min(760px, 94%); margin-left: auto; }
  .hero.no-image { grid-template-columns: 1fr; min-height: auto; }
  .hero.no-image::after { position: absolute; right: 0; bottom: -.5rem; z-index: -1; }
  .tab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-shell { grid-template-columns: 1fr; gap: 1rem; }
  .margin-note-inner { position: static; display: flex; gap: 1rem; align-items: baseline; }
  .margin-note p { margin: 0; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .masthead,
  .hero,
  .field-tabs,
  .page-shell,
  .related,
  .gallery-grid,
  .footer-inner { width: min(100% - 1.15rem, 1080px); }
  .masthead { gap: .8rem; }
  .primary-nav ul { gap: .35rem; }
  .primary-nav a { padding: .36rem .5rem; font-size: .65rem; }
  .hero { margin-top: 1.5rem; margin-bottom: 3rem; }
  .hero h1 { font-size: clamp(2.8rem, 17vw, 5rem); }
  .hero-figure { width: 96%; padding: .5rem .5rem 2rem; box-shadow: 6px 6px 0 var(--rust); }
  .tab-grid { grid-template-columns: 1fr; }
  .field-card,
  .field-card:nth-child(2),
  .field-card:nth-child(3),
  .field-card:nth-child(4) { min-height: 10rem; transform: none; }
  .field-card h2 { margin-top: 1.5rem; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-grid .inline-figure:nth-child(2) { margin-top: 0; }
  .footer-inner { grid-template-columns: 1fr; gap: 1.5rem; }
}

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