:root{
  --shale:#101E24;
  --shale-2:#182C33;
  --silt:#DFE3DE;
  --silt-2:#D3D9D4;
  --line:#C0C9C2;
  --ink:#14211F;
  --ink-soft:#40514D;
  --ice:#EAF1F0;
  --water:#2C7C8C;
  --water-deep:#1B535F;
  --fescue:#A4923F;
  --selenium:#8A3524;

  --serif: Georgia,"Iowan Old Style","Palatino Linotype",Palatino,"Times New Roman",serif;
  --sans: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono: ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --rail:108px;
  --gut:clamp(20px,5vw,48px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--silt);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--water-deep);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--selenium)}
:focus-visible{outline:2px solid var(--water);outline-offset:3px;border-radius:2px}

.wrap{max-width:960px;margin:0 auto;padding:0 var(--gut)}

.skip{position:absolute;left:-9999px;top:0;background:var(--ice);color:var(--ink);padding:10px 16px;z-index:20}
.skip:focus{left:8px;top:8px}

/* ── mark ───────────────────────────────────────────── */
.mark{display:inline-block;vertical-align:-0.08em;color:var(--water)}
.mark svg{display:block}

/* ── hero ───────────────────────────────────────────── */
.hero{
  background:var(--shale);
  color:var(--ice);
  padding:clamp(64px,13vh,132px) 0 clamp(72px,14vh,150px);
  position:relative;
  overflow:hidden;
}
/* chinook arch — a single warm band low over the mountains */
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 62% at 24% -12%, rgba(96,150,160,.30), transparent 62%),
    linear-gradient(178deg, rgba(196,152,96,.10) 0%, rgba(196,152,96,0) 34%);
  pointer-events:none;
}
.hero .wrap{position:relative;z-index:1}

.eyebrow{
  font-family:var(--mono);font-size:.71rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--water);margin:0 0 clamp(24px,5vh,44px);
}
.hero .eyebrow{color:#7FB3BC}

.wordmark{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(2.5rem,8.2vw,5.2rem);
  line-height:.94;letter-spacing:-.025em;
  margin:0 0 clamp(22px,4vh,34px);
  max-width:14ch;
}
.wordmark .mark{color:var(--ice);margin:0 .04em}

.lede{
  font-size:clamp(1.1rem,2.5vw,1.45rem);
  line-height:1.5;max-width:34ch;margin:0 0 28px;color:#D5E2E1;
}
.lede em{font-style:normal;color:#fff}

.stamp{
  font-family:var(--mono);font-size:.78rem;line-height:1.7;
  color:#8FA9AD;max-width:46ch;margin:0;
  padding-top:22px;border-top:1px solid rgba(143,169,173,.28);
}

/* ── flow (the watershed) ───────────────────────────── */
.flow{position:relative;padding-left:var(--rail)}
.stream{
  position:absolute;left:0;top:0;bottom:0;width:68px;
  pointer-events:none;
}
.stream svg{width:100%;height:100%;display:block}
.stream .bed{fill:var(--silt-2)}
.stream .flowfill{fill:var(--water);opacity:.85}

section{padding:clamp(56px,9vh,96px) 0}
.h2{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(1.55rem,3.6vw,2.35rem);
  line-height:1.12;letter-spacing:-.015em;margin:0 0 8px;
}
.sub{color:var(--ink-soft);margin:0 0 clamp(28px,5vh,44px);max-width:52ch}

/* stanzas */
.stanzas{display:grid;gap:clamp(26px,4vh,38px);max-width:60ch}
.stanza h3{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--water-deep);
  margin:0 0 10px;font-weight:600;
}
.stanza p{margin:0;font-size:1.08rem}
.stanza p b,.stanza p strong{font-weight:600;color:var(--selenium)}

/* timeline */
.entries{list-style:none;margin:0;padding:0}
.entry{position:relative;padding:0 0 clamp(30px,4.6vh,46px) 0}
.entry:last-child{padding-bottom:0}
/* tributary joining the stream */
.entry::before{
  content:"";position:absolute;
  left:calc(-1 * var(--rail) + 34px);top:.62em;
  width:calc(var(--rail) - 34px - 14px);height:1px;
  background:linear-gradient(90deg,var(--line),var(--water));
}
.entry::after{
  content:"";position:absolute;left:-14px;top:calc(.62em - 3.5px);
  width:8px;height:8px;border-radius:50%;
  background:var(--water);
}
.entry .when{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--water-deep);display:block;margin-bottom:4px;
}
.entry h3{
  font-family:var(--serif);font-size:1.16rem;font-weight:700;
  line-height:1.3;margin:0 0 6px;letter-spacing:-.005em;
}
.entry p{margin:0;max-width:56ch;color:var(--ink-soft)}

.figure{
  display:block;font-family:var(--mono);
  font-size:clamp(1.6rem,4.4vw,2.4rem);letter-spacing:-.02em;
  color:var(--selenium);line-height:1;margin:14px 0 4px;
}
.figure small{
  display:block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:7px;
}

/* ── close ──────────────────────────────────────────── */
.close{background:var(--shale-2);color:var(--ice);margin-top:clamp(56px,9vh,96px)}
.close .h2{max-width:20ch}
.close p{color:#C6D5D4;max-width:50ch}
.cta{
  display:inline-block;margin-top:26px;
  background:var(--fescue);color:#1B1706;
  font-family:var(--mono);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  padding:15px 26px;text-decoration:none;font-weight:600;
  transition:transform .18s ease, background .18s ease;
}
.cta:hover{background:#BCA84C;color:#1B1706;transform:translateY(-2px)}

footer{
  padding:38px 0 56px;
  font-family:var(--mono);font-size:.73rem;line-height:1.9;
  color:var(--ink-soft);
}
footer .mark{width:14px}

@media (max-width:720px){
  :root{--rail:56px}
  .stream{width:38px}
  .entry::before{left:calc(-1 * var(--rail) + 20px);width:calc(var(--rail) - 20px - 12px)}
  .entry::after{left:-12px}
  body{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}