@font-face {
  font-family: "STIX Two Text";
  src: url("fonts/stix-two-text.50787b9fd0c0.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "STIX Two Text";
  src: url("fonts/stix-two-text-italic.e5af0d113a98.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --ground: #1d1512;
  --ground-2: #2a1f1a;
  --slate: #4c382f;
  --stone: #755544;
  --bronze: #ab7a58;
  --umber: #762c08;
  --ink: #fae6ae;
  --ink-soft: #d8c193;
  --accent: #ec892e;
  --accent-hi: #f6bd6a;
  --paper: #fae6ae;
  --paper-ink: #241a14;
  --paper-soft: #5c4636;
  --water: #2c4a4f;
  --water-hi: #3a5f63;
  --m: clamp(16px, 2vw, 28px);
  --s-small: 0.875rem;
  --s-body: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  --s-lead: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);
  --s-head: clamp(2.25rem, 1.3rem + 3.2vw, 4.25rem);
  --s-display: clamp(5.5rem, 13vw, 13.5rem);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --serif: "STIX Two Text", "Iowan Old Style", Georgia, serif;
}

* { box-sizing: border-box; }

html { color-scheme: dark; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 var(--s-body)/1.45 var(--serif);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 400; letter-spacing: -0.026em; line-height: 1.1; margin: 0; text-wrap: balance; }
p { margin: 0; max-width: 65ch; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: color .2s, opacity .2s; }
a:hover { color: var(--accent-hi); }
:focus-visible { outline: 3px solid var(--accent-hi); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--ground); }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  background: var(--accent);
  color: var(--ground);
  font: 600 var(--s-small)/1 var(--serif);
  font-size: 1rem;
  text-decoration: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background-color .2s, transform .15s var(--ease);
}
.button:hover { background: var(--accent-hi); color: var(--ground); }
.button:active { transform: translateY(1px) scale(.98); }

.map .land use { transition: fill 1s var(--ease); }
.map .ford-water, .map .flood { transition: opacity 1s var(--ease); }
.map[data-phase="low"] .ford-water { opacity: 0; }
.map[data-phase="low"] .land .h1 { fill: #5a4630; }
.map[data-phase="high"] .flood { opacity: .92; }

.stage-wrap { position: relative; display: grid; grid-template-columns: 47% 1fr; }
.stage { position: sticky; top: 0; height: 100svh; margin: 0; padding: var(--m) 0 var(--m) var(--m); z-index: 1; }
.stage .map { display: block; width: 100%; height: 100%; animation: drift 40s ease-in-out infinite alternate; transform-origin: 50% 55%; }
.stage { overflow: hidden; }
.plaque {
  position: absolute;
  left: calc(var(--m) * 2);
  top: calc(var(--m) * 2);
  max-width: 22ch;
  padding: 12px 14px;
  background: var(--ground);
  font-size: var(--s-small);
  line-height: 1.35;
  color: var(--ink-soft);
}
.plaque span { color: var(--ink); display: block; font-weight: 600; }

.read { position: relative; z-index: 2; padding: 0 var(--m) 0 clamp(32px, 5vw, 80px); min-width: 0; }

.hero { position: relative; min-height: 100svh; }
.hero-nav { position: absolute; top: var(--m); right: 0; display: flex; gap: 28px; align-items: center; font-size: 1rem; }
.hero-nav a:not(.button) { text-decoration: none; }
.hero-line { position: absolute; top: 40%; left: 0; max-width: 24ch; font-size: var(--s-lead); line-height: 1.3; }
.hero-line span { display: block; margin-top: 14px; font-size: var(--s-body); color: var(--ink-soft); }
.name {
  position: absolute;
  right: 0;
  bottom: 40px;
  font-size: var(--s-display);
  line-height: .85;
  letter-spacing: -0.045em;
  white-space: nowrap;
  transform-origin: 100% 100%;
}

.tide { padding-top: 160px; }
.split-head { font-size: var(--s-head); max-width: 12ch; margin-bottom: 48px; }
.tide-input { background: var(--ground-2); padding: clamp(28px, 4vw, 56px); display: grid; gap: 16px; }
.tide-now { font-size: var(--s-head); line-height: 1; letter-spacing: -0.026em; }
.tide-now span { color: var(--accent-hi); }
.tide-label { font-size: var(--s-small); color: var(--ink-soft); }
.tide-state { min-height: 4.4em; max-width: 40ch; }
input[type="range"] { width: 100%; height: 44px; accent-color: var(--accent); cursor: pointer; margin: 0; }
.tide-table { background: var(--paper); color: var(--paper-ink); padding: clamp(24px, 3vw, 40px); }
.tide-table table, .route { width: 100%; border-collapse: collapse; }
.tide-table caption, .route caption { text-align: left; font-size: var(--s-small); color: var(--paper-soft); padding-bottom: 12px; }
.tide-table th, .tide-table td { text-align: left; vertical-align: top; padding: 12px 12px 12px 0; font-size: 1rem; line-height: 1.4; }
.tide-table thead th { font-size: var(--s-small); color: var(--paper-soft); font-weight: 400; padding-top: 0; }
.tide-table tbody th { font-weight: 600; white-space: nowrap; }
.tide-table tbody tr { transition: background-color .4s; }
.tide-table tbody tr.is-now { background: var(--accent-hi); }
.tide-table tbody tr.is-now th { padding-left: 10px; }

.march { padding-top: 200px; padding-bottom: 120px; }
.march > h2 { font-size: var(--s-head); margin-bottom: 64px; max-width: 14ch; }
.module { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 300px); gap: 24px; align-items: start; margin-bottom: 104px; }
.panel { background: var(--ground-2); padding: 20px 22px; min-height: 120px; }
.panel .route th, .panel .route td { font-size: 1rem; padding: 6px 0; text-align: left; font-weight: 400; }
.panel .route td { text-align: right; color: var(--ink-soft); }
.panel .route caption { color: var(--ink-soft); }
.panel .route .total th, .panel .route .total td { font-weight: 600; color: var(--accent-hi); padding-top: 12px; }
.panel-profile { padding: 0; height: 168px; background: var(--ground-2); }
.panel-profile svg { width: 100%; height: 100%; display: block; }
.panel-profile .ridge { fill: var(--stone); }
.panel-profile .vale { fill: var(--water-hi); }
.module-text h3 { font-size: var(--s-lead); margin-bottom: 12px; }
.module-text p { font-size: 1rem; line-height: 1.5; margin-bottom: 10px; }
.cal-head { font-size: var(--s-small); color: var(--ink-soft); margin-bottom: 12px; }
.cal { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(14, 1fr); grid-auto-flow: column; grid-template-rows: 1fr 1fr; gap: 3px; height: 64px; }
.cal li, .cal-key span::before { background: var(--slate); }
.cal .cal-low, .cal-key .cal-low::before { background: #9c7d58; }
.cal .cal-rising, .cal-key .cal-rising::before { background: var(--water); }
.cal .cal-high, .cal-key .cal-high::before { background: var(--water-hi); }
.cal .cal-falling, .cal-key .cal-falling::before { background: var(--stone); }
.cal-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; font-size: var(--s-small); color: var(--ink-soft); }
.cal-key span::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; }

.factions { padding: 200px var(--m) 160px; background: var(--ground-2); }
.factions > h2 { font-size: var(--s-head); margin: 0 0 96px calc(34% - var(--m)); max-width: 14ch; }
.faction { display: grid; grid-template-columns: calc(34% - var(--m)) minmax(0, 56%); grid-template-areas: "facts name" "facts text"; margin-bottom: 96px; }
.faction h3 { grid-area: name; font-size: var(--s-head); margin-bottom: 18px; }
.faction .facts { grid-area: facts; }
.faction > p { grid-area: text; font-size: var(--s-body); line-height: 1.5; max-width: 44ch; }
.facts { margin: 0; display: grid; gap: 18px; align-content: start; font-size: var(--s-small); padding-top: 10px; }
.facts dt { color: var(--ink-soft); }
.facts dd { margin: 2px 0 0; }
.faction-note { margin-left: calc(34% - var(--m)); max-width: 46ch; color: var(--ink-soft); }

.pledge { display: grid; grid-template-columns: 5fr 7fr; min-height: 90svh; }
.field { display: grid; grid-template-rows: auto auto 1fr auto; padding: 40px clamp(20px, 3vw, 48px) 48px; gap: 18px; }
.field h2 { font-size: var(--s-head); }
.field > p:not(.big) { font-size: var(--s-lead); line-height: 1.3; max-width: 26ch; }
.field .big { grid-row: 4; font-size: var(--s-display); line-height: .85; letter-spacing: -0.045em; }
.field-money { background: var(--bronze); color: var(--ground); }
.field-strength { background: var(--umber); color: var(--ink); grid-template-columns: 1fr auto; }
.field-strength > * { grid-column: 1 / -1; }
.field-strength .big { grid-column: 1; }
.field-strength .button { grid-row: 4; grid-column: 2; align-self: end; }

.join { padding: 30svh var(--m) 20svh; margin-left: calc(47% + clamp(32px, 5vw, 80px) - var(--m)); max-width: 40rem; }
.join h2 { font-size: var(--s-lead); margin-bottom: 12px; }
.join-line { font-size: var(--s-body); max-width: 34ch; margin-bottom: 28px; }
.join form { display: grid; gap: 18px; }
.join-row { display: flex; gap: 0; }
.join input[type="email"] {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0 14px;
  font: inherit;
  font-size: 1rem;
  color: var(--paper-ink);
  background: var(--paper);
  border: 0;
  border-radius: 0;
}
.join input[type="email"]::placeholder { color: var(--paper-soft); }
fieldset { border: 0; margin: 0; padding: 0; display: flex; gap: 8px 24px; flex-wrap: wrap; align-items: center; }
legend { float: left; margin-right: 8px; padding: 0; color: var(--ink-soft); font-size: 1rem; }
.choice { display: flex; align-items: flex-start; gap: 10px; min-height: 32px; font-size: 1rem; cursor: pointer; }
.choice input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--accent); flex: none; }
.consent { color: var(--ink-soft); line-height: 1.45; }
.err { color: #ffb08a; font-size: 1rem; }
.hp { position: absolute; left: -10000px; width: 0; height: 0; overflow: hidden; }

.dispatches { background: var(--slate); padding: 160px var(--m); }
.sheet {
  --bite: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Ccircle cx='12' cy='0' r='8' fill='%234c382f'/%3E%3C/svg%3E");
  position: relative;
  width: min(640px, 100%);
  margin: 0 auto;
  padding: 72px clamp(24px, 6vw, 64px) 64px;
  background: var(--paper) var(--bite) repeat-x top left / 24px 12px;
  color: var(--paper-ink);
  text-align: center;
}
.sheet::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--bite) repeat-x; background-size: 24px 12px; transform: scaleY(-1); }
.sheet h2 { font-size: var(--s-head); }
.sheet-note { font-size: var(--s-small); color: var(--paper-soft); margin: 10px 0 48px; }
.dispatch { display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; text-align: left; max-width: 420px; margin: 0 auto 28px; }
.dispatch h3 { font-size: 1rem; font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.dispatch h3 a { text-decoration: none; }
.dispatch h3 a:hover { color: var(--umber); text-decoration: underline; }
.dispatch time { font-size: 1rem; color: var(--paper-soft); }
.dispatch p { grid-column: 1 / -1; font-size: var(--s-small); color: var(--paper-soft); }
.dispatch-empty { font-size: 1rem; margin-bottom: 28px; }
.sheet-foot { margin-top: 40px; font-size: 1rem; }
.sheet-foot a:hover { color: var(--umber); }

.close { display: grid; grid-template-columns: 1fr 1fr; min-height: 100svh; background: var(--ground); }
.close-map { width: 100%; height: 100%; min-height: 50svh; display: block; }
.close-menu { display: grid; grid-template-rows: auto 1fr auto auto; padding: 80px var(--m) var(--m) clamp(32px, 6vw, 96px); gap: 48px; }
.wordmark { font-size: var(--s-lead); letter-spacing: -0.03em; text-decoration: none; }
.close-menu nav { display: grid; gap: 14px; align-content: start; }
.close-menu nav a { font-size: var(--s-lead); font-weight: 600; letter-spacing: -0.026em; text-decoration: none; justify-self: start; transition: transform .25s var(--ease), color .2s, opacity .2s; }
.close-menu nav:hover a { opacity: .55; }
.close-menu nav a:hover, .close-menu nav a:focus-visible { opacity: 1; transform: translateX(12px); color: var(--accent-hi); }
.close-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; font-size: 1rem; color: var(--ink-soft); }
.close-notes a { color: var(--ink); }
.legal { font-size: var(--s-small); color: var(--ink-soft); }

.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: var(--m); }
.bar nav { display: flex; gap: 24px; align-items: center; font-size: 1rem; }
.bar nav a:not(.button) { text-decoration: none; }
.page { padding: 96px var(--m) 160px; max-width: 46rem; margin: 0 auto; }
.page h1 { font-size: var(--s-head); margin-bottom: 40px; }
.page h2 { font-size: var(--s-lead); margin: 40px 0 12px; }
.page p { margin-bottom: 1em; }
.page time { color: var(--ink-soft); font-size: 1rem; }
.page .body { margin: 32px 0 48px; }
.page .back { font-size: 1rem; margin-bottom: 32px; }
.card { margin-bottom: 40px; }
.card h3 { font-size: var(--s-lead); margin: 6px 0 8px; }
.card h3 a { text-decoration: none; }
.card p { color: var(--ink); }
.pager { display: flex; justify-content: space-between; margin-top: 24px; }

html.js [data-rise] > * { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.js [data-rise] > :nth-child(2) { transition-delay: 80ms; }
html.js [data-rise] > :nth-child(3) { transition-delay: 160ms; }
html.js [data-rise] > :nth-child(n+4) { transition-delay: 240ms; }
html.js [data-rise].in > * { opacity: 1; transform: none; }

@keyframes drift { from { transform: scale(1); } to { transform: scale(1.05) translateY(-1%); } }
@keyframes settle { to { transform: scale(.93); } }

@supports (animation-timeline: scroll()) {
  .name { animation: settle linear both; animation-timeline: scroll(root); animation-range: 0 100svh; }
}

@media (max-width: 900px) {
  .stage-wrap { display: block; }
  .stage { position: relative; height: 58svh; padding: 12px; }
  .plaque { left: 24px; top: 24px; }
  .read { position: static; padding: 0 var(--m); background: var(--ground); }
  .hero { min-height: 0; padding: 0 0 56px; position: static; display: flex; flex-direction: column; }
  .hero-nav { position: static; order: 1; margin-top: 24px; gap: 24px; }
  .hero-nav a:not(.button):not([href="/news/"]) { display: none; }
  .name { order: -1; position: relative; z-index: 2; right: auto; bottom: auto; margin-top: -6vw; font-size: 21vw; }
  .hero-line { position: static; font-size: 1.0625rem; margin-top: 20px; max-width: 32ch; }
  .tide { padding-top: 96px; }
  .march { padding-top: 120px; padding-bottom: 40px; }
  .module { grid-template-columns: 1fr; gap: 16px; margin-bottom: 64px; }
  .factions { padding: 120px var(--m) 96px; }
  .factions > h2 { margin: 0 0 56px; }
  .faction { grid-template-columns: 1fr; grid-template-areas: "name" "facts" "text"; gap: 0; margin-bottom: 64px; }
  .faction .facts { margin-bottom: 20px; }
  .facts { grid-template-columns: 1fr 1fr; padding: 0; }
  .faction-note { margin-left: 0; }
  .pledge { grid-template-columns: 1fr; }
  .field { min-height: 0; padding-bottom: 32px; gap: 14px; }
  .field .big { margin-top: 48px; }
  .field-strength { grid-template-columns: 1fr; }
  .field-strength .button { grid-column: 1; grid-row: 5; width: 100%; }
  .field .big { font-size: 24vw; }
  .join { margin-left: 0; max-width: none; padding: 20svh var(--m) 14svh; }
  .dispatches { padding: 96px 10px; }
  .close { grid-template-columns: 1fr; }
  .close-map { height: 50svh; }
  .close-menu { padding: 48px var(--m) var(--m); gap: 36px; }
  .close-menu nav a { font-size: 8vw; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stage .map, .name { animation: none; }
  html.js [data-rise] > * { opacity: 1; transform: none; transition: none; }
  .map .land use, .map .ford-water, .map .flood { transition: none; }
}