:root {
  color-scheme: light;
  --mast-height: 5.25rem;
  --content-width: 1276px;
  --content-gutter: clamp(1.2rem, 5vw, 3.75rem);
  --paper: #f5f0e6;
  --paper-light: #faf7f0;
  --ink: #272720;
  --muted: #635d50;
  --accent: #783a2e;
  --rule: #c8beab;
  --sans: "Avenir Next", "Segoe UI", sans-serif;
  --serif: "Baskerville", "Palatino Linotype", Georgia, serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding: calc(var(--mast-height) + 2rem) 2rem 2rem; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 17px/1.58 var(--sans); }
a { color: var(--accent); text-underline-offset: .2em; }
a:hover { color: #54251b; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
figure, dl { margin: 0; }
p { margin: 0 0 1rem; }
img { display: block; width: 100%; height: auto; }
.mast, footer { display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; padding: 1.2rem max(5vw,calc((100vw - 1200px)/2)); border-bottom: 1px solid var(--rule); }
.mast { position: sticky; top: 0; z-index: 2; background: var(--paper); padding: .7rem clamp(1.2rem, 3.6vw, 4rem); }
.mast .wordmark { font-size: clamp(1.45rem, 2.45vw, 2.3rem); font-weight: 500; letter-spacing: -.045em; }
.mast .archive-views { gap: 0 clamp(.65rem, 2.1vw, 2.55rem); font-size: clamp(.86rem, 1.18vw, 1.07rem); }
.mast .archive-views a { display: flex; align-items: center; min-height: 44px; padding: 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--ink); font-weight: 500; white-space: nowrap; }
.mast .archive-views a:hover { color: var(--accent); }
.mast .archive-views a[aria-current="page"] { color: var(--accent); font-weight: 700; border-color: var(--accent); }
.wordmark { white-space: nowrap; font-family: var(--serif); font-size: 1.25rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.archive-views { display: flex; align-items: stretch; flex-wrap: wrap; gap: .5rem; font-size: .88rem; }
.archive-views a { display: grid; place-items: center; min-height: 44px; padding: .55rem .95rem; border: 1px solid var(--accent); border-radius: .28rem; background: var(--paper-light); font-weight: 650; line-height: 1.2; text-align: center; text-decoration: none; }
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
main { max-width: var(--content-width); margin: auto; padding: 0 var(--content-gutter); }
.home { max-width: 1560px; padding-inline: clamp(1.2rem, 3.6vw, 4rem); }
.home-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.95fr); gap: clamp(1.6rem, 3.5vw, 3.4rem); align-items: start; padding: clamp(1.8rem, 3vw, 2.9rem) 0 2.4rem; }
.home-intro { padding-top: clamp(0rem, 1.5vw, 1.4rem); }
.home-location { color: var(--accent); font-size: clamp(.85rem, 1.35vw, 1.18rem); font-weight: 600; letter-spacing: .085em; }
.home-feature h1 { margin: .4em 0 .36em; font-size: clamp(2.8rem, 5.9vw, 5.55rem); letter-spacing: -.055em; line-height: .97; }
.home-deck { max-width: 31ch; font-size: clamp(1.07rem, 1.75vw, 1.58rem); line-height: 1.45; }
.home-feature-photo { display: block; }
.home-feature figcaption h2 { margin: .33em 0 .2em; font-size: clamp(1.65rem, 3.3vw, 3rem); line-height: 1.03; }
.home-feature figcaption p { margin: 0; color: var(--muted); font-size: clamp(.88rem, 1.36vw, 1.2rem); }
.home-feature figcaption p a { color: inherit; }
.home-paths { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 2rem 0 2.6rem; }
.home-paths > div { min-width: 0; padding-inline: clamp(.75rem, 2vw, 2rem); }
.home-paths > div:first-child { padding-left: 0; }
.home-paths > div:last-child { padding-right: 0; }
.home-paths > div + div { border-left: 1px solid var(--rule); }
.home-paths h2 { margin: 0 0 .4rem; font-size: clamp(1.48rem, 2.55vw, 2.35rem); line-height: 1.04; }
.home-paths p { margin: 0; line-height: 1.42; }
.culture-group { margin-top: 1.5rem; }
.culture-group + .culture-group { margin-top: 3rem; }
.culture-records { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.culture-records li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .55rem; align-items: baseline; margin: 0; padding: .55rem 0; border-bottom: 1px solid var(--rule); }
.resident-timelines { border-top: 1px solid var(--rule); padding: 2rem 0 3.5rem; }
.resident-timelines > p { max-width: 70ch; color: var(--muted); }
.resident-timeline { margin-top: 2.5rem; }
.timeline-scroll { overflow-x: auto; padding-bottom: .75rem; }
.timeline-chart { min-width: 800px; }
.timeline-axis, .timeline-row { display: grid; grid-template-columns: 13rem minmax(0, 1fr) 8rem; align-items: center; gap: .7rem; }
.timeline-axis { padding: .4rem 0; color: var(--muted); font-size: .8rem; }
.timeline-years { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.timeline-row { min-height: 2.35rem; border-top: 1px solid var(--rule); font-size: .86rem; }
.timeline-row > a { line-height: 1.3; padding: .4rem 0; }
.timeline-track { position: relative; height: 1rem; background: #e9e2d5; }
.timeline-bar { position: absolute; left: var(--start); width: var(--width); top: .1rem; bottom: .1rem; min-width: 3px; background: var(--accent); }
.timeline-date { color: var(--muted); font-size: .78rem; }
.page-intro { padding: clamp(1.8rem, 4vw, 3rem) 0; }
.page-intro h1 { margin: 0; font-size: clamp(2.7rem, 6vw, 4.5rem); line-height: 1; letter-spacing: -.045em; }
.hero { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(2rem, 5vw, 5rem); padding: clamp(2.8rem, 6vw, 5rem) 0 3rem; }
.eyebrow { font-size: .7rem; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.eyebrow span { display: inline-block; width: 1.5rem; height: 1px; background: var(--accent); vertical-align: middle; margin-right: .5rem; }
h1, h2, h3, h4, dd { font-family: var(--serif); font-weight: 500; }
h1 { font-size: clamp(4.2rem, 9.5vw, 8rem); letter-spacing: -.063em; line-height: .85; margin: .25em 0; }
.deck { max-width: 33ch; font-family: var(--serif); font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.3; color: var(--muted); }
.leadphoto { padding: .75rem .75rem 0; background: var(--paper-light); border: 1px solid var(--rule); transform: rotate(-1deg); }
.leadphoto figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem .8rem; padding: .7rem 0; font-size: .72rem; color: var(--muted); }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 1.5rem; border-top: 1px solid var(--rule); }
.facts div { padding: .85rem 0; border-bottom: 1px solid var(--rule); }
.facts div:nth-child(even) { padding-left: .85rem; }
dt { text-transform: uppercase; font-size: .64rem; letter-spacing: .13em; color: var(--muted); }
dd { font-size: clamp(1.05rem, 2.1vw, 1.6rem); line-height: 1.2; margin: .3rem 0; }
.archive, .open-research { border-top: 1px solid var(--rule); padding: clamp(2rem, 4vw, 3.2rem) 0; }
.open-research { display: grid; grid-template-columns: minmax(14rem,.7fr) minmax(0,1.8fr); gap: clamp(1.3rem, 4vw, 4rem); }
.feed-page {
  --decade-width: 4.65rem;
  --decade-gap: clamp(.65rem, 3vw, 2.6rem);
  --decade-inset: calc(max(0px, (100vw - var(--content-width)) / 2) + var(--content-gutter));
}
.feed-page main { padding-inline-end: calc(var(--content-gutter) + var(--decade-width) + var(--decade-gap)); }
.feed-page footer { padding-inline-end: calc(var(--decade-inset) + var(--decade-width) + var(--decade-gap)); }
.decade-navigation {
  position: fixed;
  z-index: 1;
  inset-block: calc(var(--mast-height) + .75rem) .75rem;
  inset-inline-end: var(--decade-inset);
  width: var(--decade-width);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
}
.entry-date, .gallery figcaption span, footer { color: var(--muted); }
.decade-links {
  display: flex;
  flex-direction: column;
  min-block-size: 100%;
  list-style: none;
  margin: 0;
  padding: .1rem .3rem .1rem .1rem;
}
.decade-links li { display: flex; flex: 1 0 auto; margin-block-end: 0; }
.decade-links a {
  display: flex;
  flex: 1;
  align-items: center;
  min-height: 1.19rem;
  padding-inline: .35rem;
  border-inline-start: 2px solid transparent;
  font-size: clamp(.81rem, calc((100dvh - var(--mast-height)) / 49), 1rem);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  white-space: nowrap;
}
.decade-links a:focus-visible { outline-offset: -2px; }
.decade-links a[aria-current="location"] { border-color: var(--accent); background: #eadfd1; font-weight: 700; }
h2 { font-size: clamp(2.35rem, 4.2vw, 4rem); letter-spacing: -.04em; line-height: .96; margin: .35em 0; }
h3, h4 { font-size: 1.68rem; line-height: 1.12; margin: 0 0 .5rem; }
.archive-decade + .archive-decade { margin-top: 1.5rem; border-top: 1px solid var(--rule); padding-top: 2rem; }
.decade-intro { margin-bottom: .65rem; }
.decade-label { color: var(--accent); font-family: var(--serif); font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 500; line-height: 1; letter-spacing: -.045em; margin-bottom: .35rem; }
.decade-intro h3 { font-size: clamp(1.9rem, 3vw, 2.65rem); line-height: 1.03; }
.decade-intro > p:last-child { margin: .65rem 0 1rem; max-width: 61ch; }
.archive-entry { display: grid; grid-template-columns: minmax(7rem,.4fr) minmax(0,1.6fr); gap: 1rem; padding: 1.25rem 0 1rem; border-bottom: 1px solid var(--rule); }
.archive-entry:last-child { border: 0; }
.entry-date { font-size: .77rem; font-weight: 650; padding-top: .25rem; }
.archive-entry.records, .archive-entry.gallery { padding-bottom: 1.25rem; }
.archive-entry :is(h3, h4):only-child { margin-bottom: 0; }
.entry-body h5 { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; line-height: 1.2; margin: 1.5rem 0 .5rem; }
.entry-body > :last-child { margin-bottom: 0; }
.sources { display: flex; flex-wrap: wrap; gap: .15rem .85rem; font-size: .81rem; }
.households { display: grid; grid-template-columns: 3.25rem 1fr; margin: 1rem 0; gap: .65rem .5rem; }
.households dd { margin: 0; font: inherit; }
.households dt { padding-top: .4rem; }
.entry-body figure { background: var(--paper-light); border: 1px solid var(--rule); }
.entry-body figure img { background: #e5dccb; }
.entry-body figcaption strong { font-size: .94rem; }
.entry-body figcaption { padding: .75rem; font-size: .82rem; line-height: 1.35; }
.entry-body figcaption span { display: block; margin-top: .25rem; }
.entry-body > figure + p { margin-top: .9rem; }
.source-previews { display: grid; gap: 1rem; margin-top: 1rem; }
.source-preview figcaption, .source-excerpt, .source-gap { color: var(--muted); }
.source-excerpt, .source-gap { font-size: .84rem; margin: 0; }
.source-excerpt { border-left: 2px solid var(--rule); padding: .55rem .9rem; background: var(--paper-light); }
.source-excerpt p { margin: .35rem 0; }
.source-excerpt small { font-size: .75rem; }
.map-key span { display: block; }
.map-key span::before {
  content: "";
  display: inline-block;
  width: 1.4rem;
  margin: 0 .45rem .18rem 0;
  border-top: 3px solid #bb2522;
}
.map-key .map-key-dashed::before { border-top-style: dashed; }
[data-map] > a { display: block; }
.map-image { display: block; position: relative; background: #e5dccb; }
.map-outline { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; fill: none; }
.map-outline .outline-halo { stroke: #fff9ec; stroke-width: 6px; }
.map-outline .outline-color { stroke: #bd2925; stroke-width: 3px; }
.map-outline.area { stroke-dasharray: 6px 4px; }
.map-alignment { color: var(--muted); margin-top: .5rem; }
ul { padding-left: 1.2rem; margin-top: .65rem; }
li { margin-bottom: .43rem; }
.records { font-size: .91rem; }
.archive-view { max-width: 1080px; margin-inline: auto; padding-bottom: 3.5rem; }
.view-card { padding: clamp(1.2rem, 3vw, 2rem) 0; border-bottom: 1px solid var(--rule); }
.view-card.has-image { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); align-items: start; gap: clamp(1.15rem, 4vw, 3rem); }
.view-card h3 { letter-spacing: -.04em; margin: 0 0 .5rem; font-size: clamp(1.8rem, 3.1vw, 2.55rem); line-height: 1.05; }
.view-card p { max-width: 68ch; }
.view-card .entry-date { margin: 0 0 .4rem; }
.view-card .sources { margin: 0; }
.view-card figure { background: var(--paper-light); border: 1px solid var(--rule); }
.view-card figcaption { padding: .75rem; font-size: .82rem; line-height: 1.35; }
.view-card figcaption span { display: block; margin-top: .25rem; color: var(--muted); }
.view-note { margin: 1rem 0 0; color: var(--muted); max-width: 70ch; font-size: .85rem; }
.view-section-title { margin: 2.5rem 0 .5rem; }
footer { border-top: 1px solid var(--rule); border-bottom: 0; font-size: .8rem; }
footer p { margin: 0; }
@media(max-width: 1000px) {
  .mast { flex-wrap: wrap; column-gap: 1.1rem; row-gap: .15rem; }
  .mast .archive-views { width: 100%; }
}
@media (760px < width <= 1000px) {
  .home-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 0; }
  .home-paths > div { padding-block: 1rem; }
  .home-paths > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .home-paths > div:nth-child(even) { padding-right: 0; }
  .home-paths > div:nth-child(n + 3) { border-top: 1px solid var(--rule); }
}
@media(max-width: 760px) {
  :root { --mast-height: 9rem; }
  .mast, footer { align-items: flex-start; flex-wrap: wrap; }
  .home-feature { grid-template-columns: minmax(0, 1fr); }
  .home-deck { max-width: 36ch; }
  .home-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 0 1.3rem; }
  .home-paths > div { padding: 1rem .9rem; border-bottom: 1px solid var(--rule); }
  .home-paths > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .home-paths > div:nth-child(even) { padding-right: 0; }
  .culture-records { grid-template-columns: 1fr; }
  .hero, .open-research { grid-template-columns: 1fr; }
  .hero { gap: 2.1rem; }
  .leadphoto { transform: none; }
  .facts { grid-template-columns: 1fr 1fr; }
  .open-research { gap: 1.2rem; }
  .view-card.has-image { grid-template-columns: 1fr; }
}
@media(max-width: 600px) {
  .feed-page { --content-gutter: .75rem; --decade-width: 3.9rem; }
  .feed-page .archive-entry { grid-template-columns: 1fr; gap: .55rem; }
}
@media(max-width: 450px) {
  :root { --mast-height: 12.5rem; }
  .archive-entry { grid-template-columns: 1fr; gap: .55rem; }
}
@media(pointer: coarse) { .decade-links a { min-height: 1.59rem; } }
@media(prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
