/* Hallmark · shape: Interchange · genre: modern-minimal · theme: custom · job: hire · idea: "Indiana is the Crossroads of America, so its library is an interchange where every call gets an exit" · vibe: "daylight interstate signage, bold, plain-spoken Midwestern"
 * paper: oklch(95.5% 0.022 232) daylight sky · accent: oklch(43% 0.105 158) sign green, with plaque yellow oklch(87% 0.165 92) for open spots · display: Overpass (highway lettering) · body: Public Sans · hero: an overhead gantry of three signs, Indiana on the big one with lane arrows · nav: a steel strip · footer: a closing sign · imagery: none, the state map drawn from coordinates · signature: the gantry and the exit board of yellow open plaques
 * axes: light/grotesk-heavy/chromatic-green · posture: committed, sign green carries the hero and the board · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V5 · weakest: E, sign borders and the gantry are easy to overdo; one border recipe for every sign, the gantry is two steel lines only */
@import url("./tokens.css");
@import url("./base.css");

body { background: var(--color-paper); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; }
.lead { color: var(--color-ink-2); }

/* ---------- the one sign recipe: green face, inset white border, rounded ---------- */
.sign { position: relative; background: var(--color-sign); color: var(--color-sign-ink); border: 3px solid var(--color-sign-ink); border-radius: 14px; box-shadow: 0 0 0 6px var(--color-sign), var(--shadow-sign); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--space-lg); border: 2px solid var(--color-sign); border-radius: 10px; font: 800 var(--text-md)/1 var(--font-display); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.btn--sign { background: var(--color-sign); color: var(--color-sign-ink); box-shadow: inset 0 0 0 3px var(--color-sign), inset 0 0 0 5px var(--color-sign-ink); }
.btn--sign:hover { background: var(--color-sign-deep); box-shadow: inset 0 0 0 3px var(--color-sign-deep), inset 0 0 0 5px var(--color-sign-ink); }
.btn--quiet { background: transparent; color: var(--color-sign); }
.btn--quiet:hover { background: var(--color-paper-2); }

/* ---------- top strip ---------- */
.topbar { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: color-mix(in oklab, var(--color-paper) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-rule); }
.topbar__inner { display: flex; align-items: center; gap: var(--space-lg); min-height: 72px; }
.topbar__brand { margin-right: auto; font: 800 var(--text-lg)/1 var(--font-display); color: var(--color-ink); text-decoration: none; }
.topbar__link { font: 400 var(--text-md)/1 var(--font-display); color: var(--color-ink-2); text-decoration: none; }
.topbar__link:hover { color: var(--color-sign); text-decoration: underline; text-underline-offset: 0.3em; }
.topbar__brand:focus-visible, .topbar__link:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; border-radius: 4px; }
.topbar .btn { min-height: 44px; }

/* ---------- hero: the gantry ---------- */
.hero { position: relative; padding-block: var(--space-2xl) var(--space-3xl); overflow: clip; }
.gantry { position: absolute; inset: calc(var(--space-2xl) - 6px) 0 auto; height: 22px; border-block: 4px solid var(--color-steel); background: repeating-linear-gradient(60deg, transparent 0 14px, var(--color-steel) 14px 17px, transparent 17px 28px); opacity: 0.9; }
.hero__signs { position: relative; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr) minmax(0, 3fr); gap: var(--space-xl); align-items: start; padding-top: 32px; }
.hero__signs::before, .hero__signs::after { content: none; }
.sign--main { display: grid; justify-items: center; gap: var(--space-lg); padding: var(--space-xl) var(--space-xl) var(--space-lg); text-align: center; }
.sign--main h1 { display: grid; gap: var(--space-xs); max-width: none; color: var(--color-sign-ink); font-size: clamp(4rem, 9.5vw, 9.5rem); line-height: 0.9; letter-spacing: -0.02em; }
.sign--main h1 span { font-size: clamp(1.25rem, 2.1vw, 2rem); line-height: 1.1; letter-spacing: 0; }
.sign__lanes { display: flex; gap: clamp(2rem, 8vw, 7rem); }
.sign__lanes svg, .sign__arrow { width: 34px; height: 42px; fill: var(--color-sign-ink); }
.sign--side { display: grid; gap: var(--space-2xs); justify-items: start; margin-top: var(--space-xl); padding: var(--space-lg); }
.sign__route { margin-bottom: var(--space-xs); padding: var(--space-3xs) var(--space-xs); border: 2px solid var(--color-sign-ink); border-radius: 6px; font: 800 var(--text-sm)/1.2 var(--font-display); }
.sign__dest { font: 800 var(--text-2xl)/1.1 var(--font-display); }
.sign__arrow { margin-top: var(--space-sm); }
/* hangers from the gantry */
.sign--main::before, .sign--side::before { content: ""; position: absolute; top: -40px; left: 22%; width: 6px; height: 34px; background: var(--color-steel); box-shadow: calc(56% * 1) 0 0 var(--color-steel); }
.sign--main::before { left: 18%; box-shadow: 0 0 0 transparent; }
.sign--main::after { content: ""; position: absolute; top: -40px; right: 18%; width: 6px; height: 34px; background: var(--color-steel); }
.hero__road { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-rule); }
.hero__road .lead { font: 400 var(--text-2xl)/1.2 var(--font-display); color: var(--color-ink); max-width: 28ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ---------- map ---------- */
.mapsec { padding-block: var(--section-gap-s) var(--section-gap); background: var(--color-paper-2); }
.mapsec__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-3xl); align-items: center; }
.mapsec h2 { font-size: var(--text-display-s); line-height: 0.98; max-width: 14ch; }
.mapsec .lead { margin-top: var(--space-lg); max-width: 38ch; }
.map { margin: 0; }
.map svg { width: 100%; max-height: 720px; }
.map__land { fill: var(--color-land); stroke: var(--color-sign); stroke-width: 2.5; stroke-linejoin: round; }
.map__roads path { fill: none; stroke: var(--color-steel); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.map__roads .map__launch { stroke: var(--color-sign); stroke-width: 6; }
.map__hub { fill: var(--color-sign); stroke: var(--color-land); stroke-width: 4; }
.map__label { font: 800 13px var(--font-display); fill: var(--color-ink); stroke: var(--color-land); stroke-width: 5px; paint-order: stroke; stroke-linejoin: round; }
.map__metro circle { fill: var(--color-plaque); stroke: var(--color-plaque-ink); stroke-width: 2.5; }
.map__metro text { font: 800 14px var(--font-display); fill: var(--color-ink); stroke: var(--color-land); stroke-width: 5px; paint-order: stroke; stroke-linejoin: round; }
.map figcaption { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- mile markers ---------- */
.markers { padding-block: var(--section-gap) var(--section-gap-s); }
.markers h2 { font-size: var(--text-section); line-height: 1; max-width: 20ch; }
.markers__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin: var(--space-2xl) 0 0; padding: 0; list-style: none; align-items: end; }
.post { position: relative; display: grid; justify-items: center; gap: var(--space-xs); padding: var(--space-xl) var(--space-lg); background: var(--color-sign); color: var(--color-sign-ink); border: 3px solid var(--color-sign-ink); border-radius: 12px; box-shadow: 0 0 0 5px var(--color-sign); text-align: center; margin-bottom: 120px; }
.post::after { content: ""; position: absolute; top: calc(100% + 8px); left: 50%; width: 12px; height: 112px; transform: translateX(-50%); background: var(--color-steel); }
.post:nth-child(1) { min-height: 300px; } .post:nth-child(2) { min-height: 260px; } .post:nth-child(3) { min-height: 200px; }
.post__city { font: 800 var(--text-xl)/1.1 var(--font-display); }
.post__num { font: 800 clamp(3.5rem, 6.5vw, 6rem)/0.95 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.post__note { font-size: var(--text-sm); color: var(--color-sign-muted); }
.markers__row::after { content: none; }
.markers .container { position: relative; }
.markers .container::after { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; height: 2px; background: var(--color-rule); }

/* ---------- the exit board ---------- */
.exits { padding-block: var(--section-gap-s) var(--section-gap); }
.exits__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg) var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.exits h2 { font-size: var(--text-display-s); line-height: 0.98; }
.board { padding: var(--space-xl); background: var(--color-sign); border: 3px solid var(--color-sign-ink); border-radius: 18px; box-shadow: 0 0 0 8px var(--color-sign), var(--shadow-board); overflow-x: auto; }
.board table { width: 100%; border-collapse: collapse; color: var(--color-sign-ink); }
.board thead th { padding: 0 var(--space-md) var(--space-md); font: 400 var(--text-md)/1.2 var(--font-display); color: var(--color-sign-muted); text-align: left; border-bottom: 2px solid var(--color-sign-muted); }
.board tbody th { padding: var(--space-lg) var(--space-md); font: 800 var(--text-3xl)/1 var(--font-display); text-align: left; white-space: nowrap; }
.board td { padding: var(--space-lg) var(--space-md); }
.board tbody tr + tr > * { border-top: 1px solid color-mix(in oklab, var(--color-sign-ink) 30%, transparent); }
.plaque { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); background: var(--color-plaque); color: var(--color-plaque-ink); border: 2px solid var(--color-plaque-ink); border-radius: 6px; font: 800 var(--text-lg)/1 var(--font-display); text-decoration: none; transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.plaque:hover { transform: translateY(-2px); background: var(--color-sign-ink); }
.plaque:active { transform: translateY(1px); }
.plaque:focus-visible { outline: 3px solid var(--color-sign-ink); outline-offset: 3px; }

/* ---------- the road ---------- */
.road { position: relative; padding-block: var(--section-gap-s); background: var(--color-asphalt); color: var(--color-lane); }
.road::before, .road::after { content: ""; position: absolute; left: 0; right: 0; height: 6px; }
.road::before { top: 40px; background: repeating-linear-gradient(90deg, var(--color-lane) 0 64px, transparent 64px 128px); opacity: 0.85; }
.road::after { bottom: 40px; height: 14px; border-block: 4px solid var(--color-lane-yellow); }
.road__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-2xl); align-items: end; }
.road h2 { color: var(--color-lane); font-size: var(--text-display-s); line-height: 1; max-width: 18ch; }
.road .lead { color: color-mix(in oklab, var(--color-lane) 78%, var(--color-asphalt)); }

/* ---------- footer: a closing sign ---------- */
.footer { padding-block: var(--section-gap-s) var(--space-2xl); }
.footer__grid { display: grid; gap: var(--space-2xl); }
.sign--close { display: grid; gap: var(--space-lg); justify-items: start; padding: var(--space-2xl); }
.footer__head { font: 800 var(--text-section)/1 var(--font-display); max-width: 18ch; text-wrap: balance; }
.footer__contact { display: flex; flex-wrap: wrap; gap: var(--space-md); font-size: var(--text-lead); }
.fill { padding: 0 0.3em; border: 1px dashed var(--color-sign-muted); border-radius: 4px; color: var(--color-sign-muted); }
.footer__legal { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gap-columns); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }
.footer__legal a { color: var(--color-ink-2); }
.footer__legal a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* ---------- responsive ---------- */
@media (max-width: 60rem) {
  .topbar__link { display: none; }
  .gantry { display: none; }
  .hero__signs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-top: 0; }
  .sign--main { grid-column: 1 / -1; order: -1; }
  .sign--main::before, .sign--main::after, .sign--side::before { display: none; }
  .sign--side { margin-top: var(--space-md); }
  .mapsec__grid, .road__inner, .exits__head { grid-template-columns: minmax(0, 1fr); }
  .map svg { max-height: 560px; }
  .markers__row { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .post, .post:nth-child(1), .post:nth-child(2), .post:nth-child(3) { min-height: 0; margin-bottom: 0; }
  .post::after { display: none; }
  .markers .container::after { display: none; }
  .footer__legal { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .hero__signs { grid-template-columns: minmax(0, 1fr); }
  .sign--main { padding: var(--space-lg) var(--space-md); }
  .sign__dest { font-size: var(--text-xl); }
  .board { padding: var(--space-md); }
  .board thead { display: none; }
  .board tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); padding-block: var(--space-md); }
  .board tbody th { grid-column: 1 / -1; padding: 0; font-size: var(--text-2xl); }
  .board td { padding: 0; }
  .board td::before { display: block; margin-bottom: var(--space-2xs); font-size: var(--text-xs); color: var(--color-sign-muted); }
  .board td:nth-of-type(1)::before { content: "Electrical"; }
  .board td:nth-of-type(2)::before { content: "Plumbing"; }
  .board td:nth-of-type(3)::before { content: "HVAC"; }
  .plaque { padding: 0 var(--space-sm); font-size: var(--text-md); }
  .sign--close { padding: var(--space-xl) var(--space-lg); }
}