/* Hallmark · shape: River chart · genre: editorial · theme: custom · job: hire · idea: "Mark Twain took his name from the Mississippi leadsman's call for safe water, so Missouri's library sounds out each market with a lead line before a pro pays" · vibe: "a clean river navigation chart, flat colour"
 * paper: oklch(98.6% 0.005 210) chart water · accent: oklch(52% 0.21 350) channel magenta, with chart yellow land oklch(89% 0.115 95), navy ink and red and green buoys · display: Old Standard TT (19th-century modern, italic for water names) · body: Onest · hero: a full-bleed chart, the Mississippi bending through yellow land with its buoyed channel, the head on the land · nav: a plain bar · footer: a yellow land band · imagery: none, the chart and the state drawn in SVG · signature: the lead line with its marks, ending in a lead
 * axes: light/roman-modern/chromatic-magenta · posture: full palette, flat fields: land, water, channel, ink · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · dismissed F6 · .state h2 reads Four metros on the chart, a word not a figure, nothing compares */
/* Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V5 · weakest: H, a busy chart behind the head; the head sits on the flat yellow land and the river keeps to the right and bottom */
@import url("./tokens.css");
@import url("./base.css");

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

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--space-lg); border: 0; border-radius: 4px; font: 600 var(--text-md)/1 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.btn--navy { background: var(--color-navy); color: var(--color-navy-ink); }
.btn--navy:hover { background: var(--color-channel); }
.link { font: 600 var(--text-md)/1 var(--font-body); color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-channel); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.link:hover { color: var(--color-channel); }
.link:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }

/* ---------- nav ---------- */
.nav { position: absolute; inset: 0 0 auto; z-index: var(--z-sticky-nav); }
.nav__inner { display: flex; align-items: center; gap: var(--space-lg); min-height: 84px; }
.nav__brand { margin-right: auto; font: 700 var(--text-xl)/1 var(--font-display); color: var(--color-ink); text-decoration: none; }
.nav__link { font: 400 var(--text-md)/1 var(--font-body); color: var(--color-ink); text-decoration: none; }
.nav__link:hover { text-decoration: underline; text-decoration-color: var(--color-channel); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.nav__brand:focus-visible, .nav__link:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.nav .btn { min-height: 44px; }

/* ---------- hero: the chart ---------- */
.hero { position: relative; display: grid; align-items: center; min-height: 100svh; overflow: clip; isolation: isolate; }
.chart { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.chart__land { fill: var(--color-land); }
.chart__bank, .chart__shallow, .chart__deep, .chart__channel { fill: none; stroke-linecap: round; }
.chart__bank { stroke: var(--color-land-edge); stroke-width: 236; }
.chart__shallow { stroke: var(--color-shallow); stroke-width: 230; }
.chart__deep { stroke: var(--color-water); stroke-width: 120; }
.chart__channel { stroke: var(--color-channel); stroke-width: 3; stroke-dasharray: 14 10; }
.chart__nun circle { fill: var(--color-buoy-red); stroke: var(--color-navy); stroke-width: 2; }
.chart__can rect { fill: var(--color-buoy-green); stroke: var(--color-navy); stroke-width: 2; }
.chart__name { font: italic 400 28px var(--font-display); fill: var(--color-navy); letter-spacing: 0.06em; }
.hero__inner { display: grid; gap: var(--space-lg); justify-items: start; padding-block: 120px var(--space-3xl); }
.hero h1 { font-size: clamp(3.25rem, 6.6vw, 6.5rem); max-width: 10ch; line-height: 0.98; }
.hero .lead { max-width: 26ch; font-size: var(--text-xl); color: var(--color-ink); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); margin-top: var(--space-xs); }

/* ---------- the lead line ---------- */
.line { padding-block: var(--section-gap) var(--section-gap-s); }
.line__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-3xl); align-items: start; }
.line__story { position: sticky; top: var(--space-2xl); }
.line h2 { font-size: clamp(2.75rem, 5vw, 4.5rem); max-width: 11ch; }
.line__story .lead { margin-top: var(--space-lg); max-width: 40ch; }
.rope { position: relative; margin: 0; padding: 0 0 0 var(--space-3xl); list-style: none; }
.rope::before { content: ""; position: absolute; left: 22px; top: 8px; bottom: 120px; width: 4px; background: var(--color-rope); border-radius: 2px; }
.rope li { position: relative; display: grid; gap: var(--space-xs); padding-bottom: var(--space-2xl); }
.rope li:not(.rope__end)::before { content: ""; position: absolute; left: calc(-1 * var(--space-3xl) + 14px); top: 18px; width: 20px; height: 10px; border-radius: 2px; background: var(--color-channel); }
.rope li:nth-child(2)::before { background: var(--color-navy); height: 16px; top: 15px; }
.rope__call { font: italic 400 clamp(2.25rem, 4vw, 3.5rem)/1 var(--font-display); color: var(--color-channel); }
.rope li:nth-child(2) .rope__call { color: var(--color-navy); }
.rope h3 { font-size: var(--text-2xl); }
.rope li > p:last-child { max-width: 38ch; color: var(--color-ink-2); font-size: var(--text-lg); }
.rope__end { display: flex !important; align-items: end; gap: var(--space-lg); margin-left: calc(-1 * var(--space-3xl) - var(--space-xs)); padding-bottom: 0 !important; }
.rope__end svg { width: 60px; height: 90px; flex-shrink: 0; }
.rope__end path { fill: var(--color-navy); stroke: var(--color-rope); stroke-width: 4; stroke-linejoin: round; }
.rope__end p { font: italic 400 var(--text-2xl)/1.2 var(--font-display); color: var(--color-ink); }

/* ---------- the state chart ---------- */
.state { padding-block: var(--section-gap-s); background: var(--color-shallow); }
.state__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; }
.state h2 { font-size: clamp(2.75rem, 5vw, 4.5rem); max-width: 10ch; }
.state .lead { margin-top: var(--space-lg); max-width: 34ch; }
.map { margin: 0; }
.map svg { width: 100%; }
.map__land { fill: var(--color-land); stroke: var(--color-land-edge); stroke-width: 3; stroke-linejoin: round; }
.map__river { fill: none; stroke: var(--color-water); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.map__channel { fill: none; stroke: var(--color-channel); stroke-width: 2.5; stroke-dasharray: 8 6; }
.map__city circle { fill: var(--color-navy); stroke: var(--color-land); stroke-width: 3; }
.map__city text { font: 700 18px var(--font-display); fill: var(--color-ink); }
.map__water { font: italic 400 16px var(--font-display); fill: var(--color-navy); letter-spacing: 0.04em; }

/* ---------- the list ---------- */
.list { padding-block: var(--section-gap) var(--section-gap-s); }
.list__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-lg) var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.list h2 { font-size: clamp(2.75rem, 5vw, 4.5rem); max-width: 14ch; }
.slots { width: 100%; border-collapse: collapse; }
.slots thead th { padding: 0 var(--space-md) var(--space-md); font: 400 var(--text-md)/1.2 var(--font-body); color: var(--color-muted); text-align: left; border-bottom: 2px solid var(--color-navy); }
.slots tbody th { padding: var(--space-lg) var(--space-md); font: 700 clamp(1.5rem, 2.4vw, 2.25rem)/1 var(--font-display); color: var(--color-ink); text-align: left; white-space: nowrap; }
.slots td { padding: var(--space-lg) var(--space-md); }
.slots tbody tr { border-bottom: 1px solid var(--color-rule); }
.join { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-lg); border: 2px solid var(--color-navy); border-radius: 4px; color: var(--color-navy); font: 600 var(--text-md)/1 var(--font-body); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.join:hover { background: var(--color-navy); color: var(--color-navy-ink); }
.join:active { transform: translateY(1px); }
.join:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

/* ---------- close ---------- */
.close { padding-block: var(--section-gap-s); background: var(--color-land); border-top: 3px solid var(--color-land-edge); }
.close__inner { display: grid; gap: var(--space-xl); justify-items: start; }
.close__head { font: 700 clamp(3rem, 7vw, 6.5rem)/0.98 var(--font-display); color: var(--color-land-ink); max-width: 12ch; text-wrap: balance; }
.close__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-land-ink); border-radius: 4px; color: var(--color-land-ink); }
.legal { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gap-columns); padding-block: var(--space-xl) var(--space-2xl); font-size: var(--text-sm); color: var(--color-muted); }
.legal a { color: var(--color-ink-2); }
.legal a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* ---------- responsive ---------- */
@media (max-width: 60rem) {
  .nav__link { display: none; }
  .line__grid, .state__grid, .list__head { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .line__story { position: static; }
  .state__text { order: -1; }
  .legal { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .hero { align-items: start; }
  .hero__inner { padding-top: 112px; }
  .rope { padding-left: var(--space-2xl); }
  .rope li:not(.rope__end)::before { left: calc(-1 * var(--space-2xl) + 14px); }
  .rope__end { margin-left: calc(-1 * var(--space-2xl) - var(--space-xs)); }
  .slots thead { display: none; }
  .slots tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); padding-block: var(--space-md); }
  .slots tbody th { grid-column: 1 / -1; padding: 0; }
  .slots td { padding: 0; }
  .slots td::before { display: block; margin-bottom: var(--space-2xs); font-size: var(--text-xs); color: var(--color-muted); }
  .slots td:nth-of-type(1)::before { content: "Electrical"; }
  .slots td:nth-of-type(2)::before { content: "Plumbing"; }
  .slots td:nth-of-type(3)::before { content: "HVAC"; }
  .join { padding: 0 var(--space-md); }
}