@font-face{font-family:"Fraunces";src:url("/fonts/fraunces-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("/fonts/fraunces-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("/fonts/fraunces-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Work Sans";src:url("/fonts/work-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Work Sans";src:url("/fonts/work-sans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Work Sans";src:url("/fonts/work-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
/* apps/cf-pages/leesa-doc-the-map/src/styles/site.css
   Last modified 2026-10-11 01:40 EDT by Claude (Builder desk, task recPV5dA6g2DTduec, Step 1.sitec.2).
   The Map's look (design spec TPR-6733 sections 4, 5 and 7): the token set and nothing else for colour, Fraunces
   for display and Work Sans for body and UI on a 1.25 ratio from 16 px, an 8 px spacing base, 44 px targets, the
   150 ms pin lift and the 200 ms appear, both off under reduced motion. Below 1024 px the top bar collapses to the
   wordmark and the bottom bar takes over; the body is padded by the bar's height so it never covers text. */

:root {
  --paper: #f5eddf;
  --map: #e9dcc4;
  --hill: #ccab8b;
  --hill-deep: #b0896a;
  --hill-line: #d2bc98;
  --river: #a9b8ba;
  --ink: #2a1e16;
  --ink-soft: #5a4a3d;
  --muted: #60554c;
  --terracotta: #a9471f;
  --ember: #e39b72;
  --green: #4f6b4a;
  --white: #ffffff;
  --rule: #d9cbb4;

  --t1: 12.8px; --t2: 16px; --t3: 20px; --t4: 25px; --t5: 31.25px; --t6: 39px; --t7: 48.8px; --t8: 61px; --t9: 76.3px;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px;
  --bar: 76px;
  --bottom: calc(64px + env(safe-area-inset-bottom));
  --gutter: 48px;
  --display: "Fraunces", Georgia, serif;
  --sans: "Work Sans", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar) + var(--s2)); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--sans); overflow-x: hidden; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0 0 var(--s2); font-family: var(--display); font-weight: 600; line-height: 1.15; }
h1 { font-size: var(--t8); font-weight: 400; }
h2 { font-size: var(--t6); }
h3 { font-size: var(--t5); }
p { margin: 0 0 var(--s2); }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 2px; }

.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: var(--s2); top: var(--s2); z-index: 60; background: var(--ink); color: var(--paper); padding: var(--s2); }
.wrap { max-width: 1440px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* Type pieces */
.eyebrow { margin: 0 0 var(--s1); font: 600 13px/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.eyebrow--terracotta { color: var(--terracotta); }
.eyebrow--ember { color: var(--ember); }
.eyebrow--green { color: var(--green); }
.lede { font-size: var(--t5); font-weight: 400; max-width: 30ch; }
.lede-p { font-size: var(--t3); }
.measure { max-width: 68ch; }
.h-section { font: 600 28px/1.2 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--terracotta); margin-bottom: var(--s3); }
.h-sub { font: 600 var(--t3)/1.3 var(--sans); margin-top: var(--s4); }
.h-panel { font-size: var(--t4); }
.h-band { font-size: 28px; }

/* Controls: every target is 44 px or larger */
.pill { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 var(--s2); border: 1px solid transparent; border-radius: 999px; background: none; color: var(--ink); font: 500 16px/1 var(--sans); text-decoration: none; cursor: pointer; }
.pill:hover { border-color: var(--rule); }
.pill[aria-current="page"] { background: var(--ink); color: var(--paper); }
.pill--outline { border-color: var(--terracotta); color: var(--terracotta); }
.btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s3); border: 0; border-radius: 999px; font: 600 16px/1 var(--sans); text-decoration: none; cursor: pointer; }
.btn--primary { background: var(--terracotta); color: var(--white); }
.btn[aria-disabled="true"] { cursor: not-allowed; }
.link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--terracotta); font-weight: 600; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.cta-row .pending { margin: 0; }

/* The pending element (spec section 8, W6) */
.pending { max-width: 640px; margin: var(--s2) 0; padding: var(--s1) 12px; border: 1px dashed var(--muted); color: var(--muted); font-size: 15px; }
.pending__label { font: 600 var(--t1)/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }

/* Image frames and chips */
.frame { position: relative; overflow: hidden; aspect-ratio: var(--ratio, auto); background: var(--map); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.chip { position: absolute; left: var(--s1); bottom: var(--s1); right: var(--s1); width: fit-content; max-width: calc(100% - var(--s2)); padding: 4px var(--s1); background: var(--ink); color: var(--paper); font: 500 var(--t1)/1.4 var(--sans); }

/* Top bar */
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); height: var(--bar); padding: 0 var(--gutter); background: var(--paper); border-bottom: 1px solid var(--rule); }
.wordmark { display: flex; flex-direction: column; justify-content: center; min-height: 44px; text-decoration: none; color: var(--ink); }
.wordmark__name { font: italic 400 22px/1.1 var(--display); }
.wordmark__line { font-size: 14px; color: var(--muted); }
.topnav ul { display: flex; align-items: center; gap: 4px; }

/* Bottom bar (phone) */
.bottombar { display: none; }

/* Sheets */
.sheet { position: fixed; z-index: 40; left: 0; right: 0; top: var(--bar); max-height: calc(100vh - var(--bar)); overflow-y: auto; padding: var(--s3) var(--gutter) var(--s4); background: var(--paper); border-bottom: 1px solid var(--rule); box-shadow: 0 8px 24px rgba(42, 30, 22, 0.18); }
.sheet[hidden] { display: none; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s2); }
.sheet__head .eyebrow { margin: 0; color: var(--terracotta); }
.sheet__close { border-color: var(--rule); }
.sheet__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3) var(--s4); }
.sheet__route, .sheet__place { display: flex; align-items: center; gap: var(--s1); min-height: 44px; font: 600 var(--t3)/1.2 var(--display); text-decoration: none; }
.sheet__num { font: 600 var(--t1)/1 var(--sans); color: var(--terracotta); letter-spacing: 0.14em; }
.sheet__anchors a { display: flex; align-items: center; min-height: 44px; padding-left: var(--s2); border-left: 1px solid var(--rule); color: var(--muted); font-size: 15px; text-decoration: none; }
.sheet__anchors a:hover { color: var(--ink); }

/* Home: the map and the side panel */
.home { display: grid; grid-template-columns: 74% 26%; height: calc(100vh - var(--bar)); min-height: 600px; }
.map-wrap { position: relative; display: grid; place-items: center; overflow: hidden; background: var(--map); }
.map-stage { position: relative; aspect-ratio: 1060 / 1100; width: min(100%, calc((100vh - var(--bar)) * 1060 / 1100)); }
.map { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-ground { fill: var(--map); }
.m-hill { fill: var(--hill); }
.m-hill-deep { fill: var(--hill-deep); }
.m-contour { fill: none; stroke: var(--hill-line); stroke-width: 1.5; }
.m-river { fill: none; stroke: var(--river); stroke-width: 6; stroke-linecap: round; }
.m-road { fill: none; stroke: var(--terracotta); stroke-width: 4; stroke-dasharray: 14 6; }
.m-park { fill: url(#hatch); stroke: var(--ink-soft); stroke-width: 2; }
.m-hatch { stroke: var(--ink-soft); stroke-width: 1.5; }
.m-town rect { fill: var(--ink-soft); }
.m-label { font: italic 400 36px var(--display); fill: var(--ink-soft); }
.m-dot { fill: var(--terracotta); stroke: var(--white); stroke-width: 4; }
.pin { position: absolute; z-index: 2; left: var(--x); top: var(--y); transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; min-width: 44px; min-height: 44px; color: var(--ink); text-decoration: none; }
.pin__card { display: flex; flex-direction: column; width: 140px; padding: 4px; background: var(--white); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); transition: transform 150ms ease-out, box-shadow 150ms ease-out; }
.pin__photo { width: 132px; height: 90px; object-fit: cover; }
.pin__name { padding: 6px 4px 0; font: 600 14px/1.3 var(--sans); }
.pin__line { padding: 0 4px 4px; font-size: 13px; line-height: 1.3; color: var(--muted); }
.pin__feature { padding: 0 4px 4px; font: 600 13px/1.3 var(--sans); color: var(--terracotta); }
.pin__stem { width: 2px; height: 28px; background: var(--ink); }
.pin--label .pin__card { width: auto; padding: 4px 8px; }
.pin--label .pin__name, .pin--label .pin__line { white-space: nowrap; }
.pin:hover .pin__card, .pin:focus-visible .pin__card { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18); }
.map-note { position: absolute; z-index: 1; left: var(--s2); bottom: var(--s2); max-width: 260px; margin: 0; padding: var(--s1) 12px; background: var(--white); border: 1px solid var(--rule); color: var(--muted); font-size: 13px; line-height: 1.4; }
.panel { overflow-y: auto; padding: var(--s4); background: var(--paper); border-left: 1px solid var(--rule); }
.panel__head h1 { font-size: var(--t6); }
.panel__block { padding: var(--s3) 0; border-top: 1px solid var(--rule); }
.panel__block h3 { font-size: var(--t4); }
.placelist li a { display: flex; flex-direction: column; justify-content: center; min-height: 48px; padding: var(--s1) 0; border-top: 1px solid var(--rule); text-decoration: none; }
.placelist__name { font-size: 17px; font-weight: 500; }
.placelist__tag { font-size: 14px; color: var(--muted); line-height: 1.4; }
.feature { border-left: 4px solid var(--terracotta); padding-left: var(--s2); }
.station { margin: var(--s3) 0; padding: var(--s3); background: var(--ink); color: var(--paper); }
.station h3 { font-size: 28px; color: var(--paper); }
.station .link { color: var(--ember); }
.station section + section { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--ink-soft); }

/* Items */
.items li { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: var(--s2); padding: 12px 0; border-top: 1px solid var(--rule); }
.items__label { font-weight: 600; }
.items__body { color: var(--muted); }
.items--rows li { grid-template-columns: 1fr; gap: 2px; }
.items--bullets li { display: list-item; margin-left: 1.2em; list-style: disc; padding: 4px 0; border: 0; }
.items--links li, .items--coverage li { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); align-items: center; }
.items--coverage .items__label .link { font: 400 21px/1.2 var(--display); color: var(--ink); }
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); margin: var(--s2) 0; }
.person { display: flex; flex-direction: column; padding: var(--s2); background: var(--white); border-left: 4px solid var(--green); }
.person__role { font-size: 17px; font-weight: 600; }
.person__name { font-size: 13px; color: var(--muted); }
.person__body { margin-top: var(--s1); font-size: 15px; }

/* A place page */
.place-hero__media { position: relative; height: 600px; overflow: hidden; background: var(--ink); }
.place-hero__img { position: absolute; inset: 0; }
.place-hero__img .chip { top: var(--s1); bottom: auto; z-index: 2; }
.place-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(42, 30, 22, 0) 35%, rgba(42, 30, 22, 0.7) 100%); }
.place-hero__text { position: absolute; z-index: 1; left: var(--gutter); right: 290px; bottom: var(--s5); color: var(--white); text-shadow: 0 1px 12px rgba(42, 30, 22, 0.6); }
.place-hero__text h1 { font-size: var(--t9); color: var(--white); margin-bottom: var(--s1); }
.place-hero__caption { margin: 0; font-size: 19px; }
.locator { position: absolute; z-index: 1; right: var(--gutter); bottom: var(--s5); width: 190px; height: 140px; border: 4px solid var(--white); background: var(--map); }
.place-intro { padding-top: var(--s5); }
.place-body { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--s5); padding-top: var(--s5); padding-bottom: var(--s6); }
.place-aside { min-width: 0; }
.block { padding-top: var(--s4); padding-bottom: var(--s4); }
.block + .block { border-top: 1px solid var(--rule); }
.quote-title { font-style: italic; font-weight: 400; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1); }
.stills { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1); margin-top: var(--s3); }
.stills__wide { grid-column: 1 / -1; }
.timeline { display: flex; align-items: baseline; gap: var(--s2); margin-bottom: var(--s1); }
.timeline__year { margin: 0; font: 600 28px/1 var(--display); color: var(--terracotta); }
.pull { margin: var(--s3) 0; padding-left: var(--s3); border-left: 4px solid var(--terracotta); }
.pull blockquote { margin: 0 0 var(--s2); font: italic 400 var(--t6)/1.25 var(--display); }
.pull--place blockquote { font-size: var(--t5); }
.pull figcaption { font: 600 13px/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

/* From here */
.fromhere { position: sticky; top: calc(var(--bar) + var(--s3)); max-width: 340px; padding: var(--s3); background: var(--white); border: 1px solid var(--rule); }
.fromhere .eyebrow { color: var(--terracotta); }
.fromhere__rows a { display: flex; align-items: center; justify-content: space-between; min-height: 44px; border-top: 1px solid var(--rule); text-decoration: none; font-weight: 500; }
.prevnext { display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--s3); border-top: 1px solid var(--rule); }
.prevnext a { display: flex; flex-direction: column; min-height: 44px; padding: 12px var(--s1) 0 0; text-decoration: none; }
.prevnext a + a { padding-left: var(--s2); border-left: 1px solid var(--rule); }
.prevnext .eyebrow { color: var(--terracotta); margin: 0; }
.prevnext__name { font: 400 var(--t3)/1.2 var(--display); }

/* Field station, Leesa and Press */
.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s5); align-items: center; padding-top: var(--s6); padding-bottom: var(--s5); }
.split--page { padding-top: 0; }
.split__img--narrow { max-width: 420px; justify-self: end; width: 100%; }
.routes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); padding-top: var(--s3); padding-bottom: var(--s3); }
.route-card { padding: var(--s4); background: var(--white); border: 1px solid var(--rule); }
.route-card h3 { font-size: var(--t6); }
.route-card__label { margin: var(--s3) 0 var(--s1); font: 600 13px/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s1); }
.chip-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s2); background: var(--map); font-size: 14px; text-decoration: none; }
.partner-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s5); margin-top: var(--s5); margin-bottom: var(--s6); border-top: 2px solid var(--ink); }
.pb { padding: var(--s4) 0 0; }
.pb--side { grid-column: 3; }
.pb--exists { grid-column: 1 / span 2; grid-row: 1 / span 5; }
.exists { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.figure { margin: var(--s3) 0 0; max-width: 420px; }
.figure figcaption { margin-top: var(--s1); font-size: 14px; color: var(--muted); }
.notfound { max-width: 720px; padding-top: var(--s6); padding-bottom: var(--s6); }
.locator--404 { position: static; display: block; width: 100%; max-width: 520px; height: auto; aspect-ratio: 520 / 360; margin-bottom: var(--s4); }

/* Footer */
.site-footer { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--gutter); border-top: 1px solid var(--rule); color: var(--muted); font-size: 14px; }
.site-footer p { margin: 0; }

/* Motion: blocks appear once, 200 ms; site.js adds .js only when motion is allowed. The transition sits on the
   appear state only, so adding .js hides a block at once rather than fading it out first. */
.js .reveal { opacity: 0; transform: translateY(8px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity 200ms ease-out, transform 200ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media (max-width: 1279px) {
  :root { --gutter: 24px; }
  .place-hero__text h1 { font-size: var(--t8); }
}

/* Phone and tablet: below 1024 px */
@media (max-width: 1023px) {
  :root { --gutter: 16px; --bar: 60px; }
  body { padding-bottom: var(--bottom); }
  h1 { font-size: var(--t6); }
  h2 { font-size: var(--t5); }
  h3 { font-size: var(--t4); }
  .topnav { display: none; }
  .bottombar { position: fixed; z-index: 35; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: var(--bottom); padding-bottom: env(safe-area-inset-bottom); background: var(--ink); }
  .bottombar .pill { height: 64px; border-radius: 0; border: 0; color: var(--paper); font-size: 14px; font-weight: 600; padding: 0 4px; }
  .bottombar .pill[aria-current="page"] { background: none; color: var(--ember); }
  .bottombar .pill[aria-expanded="true"] { color: var(--ember); }
  .sheet { top: auto; bottom: var(--bottom); max-height: calc(100vh - var(--bottom) - var(--s3)); border-top: 1px solid var(--rule); border-bottom: 0; }
  .sheet__list { grid-template-columns: 1fr; }
  .home { display: block; height: auto; min-height: 0; }
  .map-wrap { display: block; height: 560px; }
  .map-stage { position: absolute; inset: 0; width: 100%; aspect-ratio: auto; }
  .pin { left: var(--px); top: var(--py); }
  .pin__card { width: 120px; }
  .pin--label .pin__card { width: auto; }
  .pin__photo { width: 112px; height: 72px; }
  .pin__stem { height: 20px; }
  .pin--photo .pin__line { display: none; }
  .map-note { max-width: 200px; bottom: var(--s1); left: var(--s1); }
  .panel { overflow: visible; padding: var(--s3) var(--gutter); border-left: 0; }
  .place-hero__media { height: 420px; }
  .place-hero__text { left: var(--gutter); right: var(--gutter); bottom: var(--s3); }
  .place-hero__text h1 { font-size: var(--t6); }
  .place-hero__caption { font-size: 16px; }
  .locator { top: var(--s2); right: var(--s2); bottom: auto; width: 110px; height: 81px; }
  .place-hero__img .chip { max-width: calc(100% - 140px); }
  .place-body { grid-template-columns: 1fr; gap: 0; }
  .fromhere { position: static; max-width: none; }
  .split { grid-template-columns: 1fr; gap: var(--s3); padding-top: var(--s4); }
  .split__img--narrow { justify-self: start; }
  .routes { grid-template-columns: 1fr; }
  .route-card { padding: var(--s3); }
  .route-card h3 { font-size: var(--t5); }
  .partner-band { grid-template-columns: 1fr; }
  .pb--side, .pb--exists { grid-column: 1; grid-row: auto; }
  .exists { grid-template-columns: 1fr; gap: var(--s2); }
  .items li, .items--links li, .items--coverage li { grid-template-columns: 1fr; gap: 2px; }
  .people { grid-template-columns: 1fr; }
  .pull blockquote { font-size: var(--t5); }
  .site-footer { flex-direction: column; gap: var(--s1); }
}