@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil:wght@700;800&family=Karla:ital,wght@0,400;0,500;0,700;1,400&family=Overpass+Mono:wght@500;700&display=swap');

:root {
  --gritstone: #241f19;
  --gritstone-soft: #423a2f;
  --limestone: #efe8d8;
  --limestone-deep: #e2d3ac;
  --fell: #57633a;
  --fell-deep: #3c4527;
  --beck: #4d6d79;
  --beck-deep: #37515b;
  --hay: #c9a227;
  --paper-white: #faf7ef;
  --content-max: 78rem;
  --reading-max: 42rem;
  --step-0: clamp(.85rem, .82rem + .12vw, .95rem);
  --step-1: clamp(1rem, .96rem + .16vw, 1.1rem);
  --step-2: clamp(1.3rem, 1.16rem + .6vw, 1.7rem);
  --step-3: clamp(1.9rem, 1.5rem + 1.7vw, 3.1rem);
  --step-4: clamp(2.6rem, 1.9rem + 3vw, 4.6rem);
  --space-s: clamp(.75rem, .6rem + .6vw, 1.25rem);
  --space-m: clamp(1.5rem, 1.1rem + 1.6vw, 2.75rem);
  --space-l: clamp(2.5rem, 1.7rem + 3.5vw, 5.5rem);
  --course: .18rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--gritstone);
  background: var(--limestone);
  font-family: "Karla", -apple-system, sans-serif;
  font-size: var(--step-1);
  line-height: 1.65;
}
img { display: block; max-width: 100%; }
a { color: var(--beck-deep); }
a:hover { color: var(--fell-deep); }
:focus-visible { outline: .2rem solid var(--hay); outline-offset: .18rem; }
h1, h2, h3, h4 {
  font-family: "Big Shoulders Stencil", "Arial Narrow", sans-serif;
  font-weight: 800;
  line-height: .96;
  text-transform: uppercase;
  letter-spacing: .01em;
  text-wrap: balance;
  margin: 0 0 .6rem;
}
h1 { font-size: var(--step-4); letter-spacing: 0; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
p { max-width: 68ch; }
.data, .stat, .pace-readout, .fact-key { font-family: "Overpass Mono", ui-monospace, monospace; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: .8rem 1.1rem; background: var(--hay); color: var(--gritstone); }
.skip-link:focus { left: 1rem; top: 1rem; }
.rail { width: min(calc(100% - 2.2rem), var(--content-max)); margin-inline: auto; }

/* ---- header: packhorse ---- */
.packhorse { background: var(--paper-white); border-bottom: var(--course) solid var(--gritstone); }
.packhorse-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; padding-block: .6rem; flex-wrap: wrap; }
.packhorse-mark { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--gritstone); }
.packhorse-mark svg { width: 2.4rem; height: 2.4rem; flex-shrink: 0; }
.packhorse-mark strong { display: block; font-family: "Big Shoulders Stencil", sans-serif; font-size: 1.35rem; font-weight: 800; text-transform: uppercase; }
.packhorse-mark span { display: block; font-family: "Overpass Mono", monospace; font-size: .62rem; letter-spacing: .07em; color: var(--gritstone-soft); }
.packhorse-nav { display: flex; gap: .2rem; overflow-x: auto; scrollbar-width: thin; }
.packhorse-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: .4rem .7rem; color: var(--gritstone); font-weight: 700; white-space: nowrap; text-decoration: none; border-bottom: .18rem solid transparent; }
.packhorse-nav a[aria-current="page"] { border-bottom-color: var(--fell); color: var(--fell-deep); }

/* ---- hero: scarp ---- */
.scarp { position: relative; background: var(--gritstone); color: var(--limestone); overflow: hidden; }
.scarp-grid { display: grid; }
.scarp-copy { padding: var(--space-l) 1.1rem var(--space-m); position: relative; z-index: 1; }
.scarp-copy .trailmark { display: inline-block; margin-bottom: 1rem; padding: .3rem .6rem; background: var(--hay); color: var(--gritstone); font-family: "Overpass Mono", monospace; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }
.scarp-copy h1 { color: var(--paper-white); }
.scarp-copy p { color: var(--limestone-deep); font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); max-width: 46ch; }
.scarp-strata { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.scarp-strata span { padding: .35rem .6rem; border: .12rem solid var(--beck); font-family: "Overpass Mono", monospace; font-size: .7rem; color: var(--limestone); }
.scarp-face { position: relative; min-height: 18rem; border-top: var(--course) solid var(--hay); }
.scarp-face img { width: 100%; height: 100%; object-fit: cover; }
.scarp-face figcaption { position: absolute; inset: auto 0 0 0; margin: 0; padding: .55rem .9rem; background: rgba(36,31,25,.82); color: var(--limestone); font-family: "Overpass Mono", monospace; font-size: .68rem; }

/* ---- generic inner-page content wrapper ---- */
.parcel { padding-block: var(--space-l); }
.parcel.alt { background: var(--limestone-deep); }
.parcel-head { display: grid; gap: .6rem; margin-bottom: var(--space-m); max-width: var(--reading-max); }
.parcel-head .trailmark { font-family: "Overpass Mono", monospace; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--beck-deep); }

/* ---- homepage: territories (persistent split, not a stripe) ---- */
.territories { padding-block: var(--space-l); }
.territories-head { display: grid; gap: .6rem; margin-bottom: var(--space-m); max-width: var(--reading-max); }
.territories-split { display: grid; border: var(--course) solid var(--gritstone); min-width: 0; }
.parkside { position: relative; padding: var(--space-m) 1.2rem; min-width: 0; }
.parkside--grit { background: var(--gritstone); color: var(--limestone); }
.parkside--grit h3, .parkside--grit .go { color: var(--paper-white); }
.parkside--grit .go { background: var(--hay); color: var(--gritstone); }
.parkside--lime { background: var(--paper-white); color: var(--gritstone); border-top: var(--course) solid var(--gritstone); }
.parkside-photo { margin: 0 0 1rem; min-height: 10rem; position: relative; overflow: hidden; }
.parkside-photo img { width: 100%; height: 100%; object-fit: cover; }
.parkside h3 { font-size: 1.6rem; }
.parkside a.go { display: inline-flex; min-height: 44px; align-items: center; padding: .5rem .85rem; background: var(--gritstone); color: var(--limestone); text-decoration: none; font-weight: 700; margin-top: .3rem; }

/* ---- homepage: waymarks (coursed/staggered mosaic, not a uniform grid) ---- */
.waymarks { padding-block: var(--space-l); background: var(--limestone-deep); }
.waymarks-head { display: grid; gap: .6rem; margin-bottom: var(--space-m); max-width: var(--reading-max); }
.coursed-wall { display: grid; grid-auto-flow: dense; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; }
.coursed-wall .stone { min-width: 0; }
.coursed-wall .stone:nth-child(3n+1) { grid-column: span 2; }

.coursing { display: grid; gap: 1rem; }
.stone {
  position: relative;
  background: var(--paper-white);
  border: var(--course) solid var(--gritstone);
  border-top-width: .45rem;
  padding: 1.2rem;
}
.stone:nth-child(3n+2) { border-top-color: var(--fell); }
.stone:nth-child(3n) { border-top-color: var(--beck); }
.stone h3 { font-size: 1.25rem; }
.stone .stone-photo { margin: -1.2rem -1.2rem 1rem; min-height: 11rem; position: relative; overflow: hidden; background: var(--gritstone-soft); }
.stone .stone-photo img { width: 100%; height: 100%; object-fit: cover; }
.stone p:last-of-type { margin-bottom: .5rem; }
.stone a.go { display: inline-flex; min-height: 44px; align-items: center; padding: .5rem .85rem; background: var(--gritstone); color: var(--limestone); text-decoration: none; font-weight: 700; }
.stone a.go:hover { background: var(--fell-deep); }

.fact-strip { display: grid; gap: var(--course); margin: 1.6rem 0; background: var(--gritstone); border: var(--course) solid var(--gritstone); }
.fact-strip > div { background: var(--paper-white); padding: .85rem 1rem; }
.fact-key { display: block; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: var(--beck-deep); margin-bottom: .2rem; }
.fact-val { font-weight: 700; }

.callout { border-left: .4rem solid var(--hay); background: var(--limestone-deep); padding: 1rem 1.2rem; margin: 1.5rem 0; }
.callout strong { display: block; margin-bottom: .3rem; font-family: "Overpass Mono", monospace; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--gritstone-soft); }

.two-col { display: grid; gap: var(--space-m); }
.detail-toc { align-self: start; background: var(--paper-white); border: var(--course) solid var(--gritstone); padding: 1rem 1.2rem; }
.detail-toc p { margin: 0 0 .5rem; font-family: "Overpass Mono", monospace; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; }
.detail-toc ol { margin: 0; padding-left: 1.1rem; }
.detail-toc a { text-decoration: none; }

/* ---- the pace planner ---- */
.pace-planner { background: var(--gritstone); color: var(--limestone); padding-block: var(--space-l); }
.pace-planner h2 { color: var(--paper-white); }
.pace-planner .intro { max-width: var(--reading-max); color: var(--limestone-deep); }
.pace-grid { display: grid; gap: var(--space-m); margin-top: var(--space-m); }
.pace-controls { display: grid; gap: 1.1rem; align-content: start; }
.pace-controls label { display: block; font-weight: 700; margin-bottom: .35rem; }
.pace-controls select, .pace-controls input[type="time"] {
  width: 100%; min-height: 48px; padding: .6rem .7rem; font: inherit; font-size: 1rem;
  background: var(--paper-white); color: var(--gritstone); border: var(--course) solid var(--limestone-deep);
}
.pace-legs { list-style: none; margin: 0; padding: 0; border-top: .12rem solid var(--beck); }
.pace-legs li { display: grid; grid-template-columns: 1fr auto auto; gap: .5rem 1rem; align-items: baseline; padding: .7rem 0; border-bottom: .12rem solid var(--beck); }
.pace-legs li strong { font-size: 1rem; }
.pace-legs .pace-readout { text-align: right; }
.pace-summary { margin-top: 1rem; padding: 1rem 1.2rem; background: var(--beck-deep); border-left: .4rem solid var(--hay); }
.pace-summary p { margin: 0; color: var(--paper-white); }
.pace-summary [data-verdict] { font-family: "Overpass Mono", monospace; }

/* ---- footer: intake ---- */
.intake { background: var(--gritstone-soft); color: var(--limestone); border-top: var(--course) solid var(--hay); }
.intake .rail { display: grid; gap: 1.5rem; padding-block: var(--space-m); }
.intake a { color: var(--limestone); }
.intake nav { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.intake small { display: block; max-width: 60ch; color: var(--limestone-deep); }

.field-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .95rem; }
.field-table th, .field-table td { padding: .7rem .8rem; border: .1rem solid var(--gritstone-soft); text-align: left; vertical-align: top; }
.field-table th { background: var(--limestone-deep); font-family: "Overpass Mono", monospace; font-size: .75rem; text-transform: uppercase; }

@media (min-width: 42rem) {
  .coursing.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .coursing.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .fact-strip { grid-template-columns: repeat(3, 1fr); }
  .intake .rail { grid-template-columns: 1.2fr 1fr; }
  .territories-split { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .parkside--lime { border-top: 0; border-left: var(--course) solid var(--gritstone); }
}
@media (min-width: 64rem) {
  .scarp-grid { grid-template-columns: minmax(0,1fr) minmax(30rem, .95fr); align-items: stretch; max-width: var(--content-max); margin-inline: auto; }
  .scarp-copy { padding-inline: 1.1rem max(1.1rem, 2.5rem); align-self: center; }
  .scarp-face { border-top: 0; border-left: var(--course) solid var(--hay); }
  .coursing.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .two-col { grid-template-columns: 15rem minmax(0,1fr); }
  .pace-grid { grid-template-columns: 18rem minmax(0,1fr); align-items: start; }
  .coursed-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .coursed-wall .stone:nth-child(3n+1) { grid-row: span 2; grid-column: span 2; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}