/* =========================================================================
   MARKS & BLINDS (mainertc.org) — design system "flyway", prefix fwy-.
   Lexicon: the flyway and the marsh. marsh (usable width), levee (site
   header), reeds (nav), mark (wordmark), daybreak (home cover), count
   (numbers band), crossing (breadcrumb), flat (numbered section), band
   (small-caps overline), decoy (card), spread (card grid), tide (dated
   register), log (byline row), slip (article head), plate (lead image),
   current (reading column), call (pull quote), shell (note box), strap
   (checklist), shallows (common mistakes), tally (table), return (read
   next), wake (separator), rail (sticky left rail), reach (rail + column),
   landing (footer), portage (skip link).
   Cold water at first light: fog ground, tidewater accent, blaze ornament.
   No external request, no script, automatic dark mode, print sheet.
   ========================================================================= */

:root {

  /* ---- 1. COLOR: cold marsh at first light ------------------------------ */
  --fog:            #E7EDEC;  /* page ground, pale green grey haze          */
  --slick:          #F4F8F7;  /* bright paper: checklists, register rows    */
  --silt:           #D3DEDC;  /* alternate sections, boxes, image beds      */
  --gunmetal:       #16262B;  /* body text and headings, cold black         */
  --driftwood:      #4E6268;  /* captions, standfirsts, bylines             */
  --tidewater:      #0F5A63;  /* links and load-bearing rules               */
  --tidewater-set:  #0A424A;  /* hover and current state                    */
  --blaze:          #C1440E;  /* ORNAMENT ONLY: numbers, bars, ::selection  */
  --blaze-set:      #9E370A;  /* the only blaze allowed to carry text       */
  --hairline:       #BFCECB;  /* rules of the register and of the tables    */
  --landing:        #12252A;  /* footer ground and table headers            */
  --landing-ink:    #DCE7E5;
  --landing-link:   #5FC0C9;

  /* ---- 2. TYPE (system stacks only, no font file, no remote call) ------- */
  --slab-stack: Rockwell, "Rockwell Nova", "Roboto Slab", "Zilla Slab", "DejaVu Serif", serif;
  --text-stack: Optima, "Optima nova", "URW Classico", Candara, "Noto Sans", sans-serif;
  --num-stack:  ui-monospace, "SF Mono", "Cascadia Mono", "DejaVu Sans Mono", monospace;

  --caps-track: 0.14em;
  --body-size: clamp(1.05rem, 1rem + 0.25vw, 1.16rem);
  --body-lead: 1.64;

  /* ---- 3. RHYTHM AND MEASURE ------------------------------------------- */
  --measure:       72ch;
  --measure-wide:  1380px;
  --rail-width:    15rem;
  --shore:   clamp(1.1rem, 4vw, 4rem);
  --channel: clamp(0.9rem, 2.2vw, 2.1rem);
  --breath:  clamp(3rem, 7vw, 6.6rem);

  /* ---- 4. DETAIL: hairlines, square corners, no shadow ------------------ */
  --bevel: 0;
  --rule-weight: 1px solid var(--hairline);
  --rule-strong: 1px solid var(--tidewater);
  --ease: 150ms ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fog:           #0D1618;
    --slick:         #152225;
    --silt:          #1D2E32;
    --gunmetal:      #DCE7E5;
    --driftwood:     #9DB2B4;
    --tidewater:     #5FC0C9;
    --tidewater-set: #8AD6DD;
    --blaze:         #E8A07A;
    --blaze-set:     #F0B695;
    --hairline:      #2C4247;
    --landing:       #08100F;
    --landing-ink:   #D6E4E2;
    --landing-link:  #7FD2DA;
  }
}

/* =========================================================================
   BASE
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fog);
  color: var(--gunmetal);
  font-family: var(--text-stack);
  font-size: var(--body-size);
  line-height: var(--body-lead);
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--slab-stack);
  font-weight: 600;
  letter-spacing: 0.002em;
  line-height: 1.12;
  margin: 0;
}
h1 { font-size: clamp(2rem, 1.25rem + 3.1vw, 3.5rem); }
h2 { font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem); }
h3 { font-size: clamp(1.1rem, 1.02rem + 0.42vw, 1.38rem); }
h4 { font-size: 1.02rem; }

p, ul, ol { margin: 0 0 1.12em; }
a { color: var(--tidewater); text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: color var(--ease); }
a:hover { color: var(--tidewater-set); }
::selection { background: var(--blaze); color: #F4F8F7; }
:focus-visible { outline: 2px solid var(--tidewater); outline-offset: 3px; }
hr { border: 0; border-top: var(--rule-weight); margin: var(--breath) 0; }
time, .fwy-num { font-family: var(--num-stack); font-variant-numeric: tabular-nums; }

/* =========================================================================
   FRAME
   ========================================================================= */

/* Skip link. DO NOT REMOVE. */
.fwy-portage {
  position: absolute; left: -9999px; top: 0;
  background: var(--gunmetal); color: var(--fog);
  padding: 0.7rem 1.1rem; z-index: 50;
}
.fwy-portage:focus { left: 0.6rem; top: 0.6rem; }

/* The marsh: usable width of every block on the page. */
.fwy-marsh {
  width: 100%;
  max-width: var(--measure-wide);
  margin-inline: auto;
  padding-inline: var(--shore);
}

/* The levee: the bank you walk along, i.e. the site header. */
.fwy-levee { border-bottom: var(--rule-weight); padding-block: clamp(0.8rem, 1.7vw, 1.35rem); }
.fwy-levee__row {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 0.8rem 1.6rem;
}
.fwy-mark {
  display: block; text-decoration: none; color: var(--gunmetal);
  font-family: var(--slab-stack); font-weight: 600;
  font-size: clamp(1.14rem, 1rem + 0.6vw, 1.5rem);
  text-transform: uppercase; letter-spacing: var(--caps-track); line-height: 1.05;
}
.fwy-mark:hover { color: var(--tidewater); }
.fwy-mark span {
  display: block; margin-top: 0.34rem;
  font-family: var(--text-stack); font-weight: 400; text-transform: none;
  letter-spacing: 0; font-size: 0.8rem; color: var(--driftwood); max-width: 44ch;
}
.fwy-reeds ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; justify-content: flex-end;
}
.fwy-reeds a {
  color: var(--gunmetal); text-decoration: none;
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: var(--caps-track);
  padding-bottom: 0.2rem; border-bottom: 2px solid transparent;
}
.fwy-reeds a:hover, .fwy-reeds [aria-current="page"] {
  color: var(--tidewater); border-bottom-color: var(--blaze);
}

/* Crossing: the breadcrumb. */
.fwy-crossing { font-size: 0.76rem; color: var(--driftwood); padding-block: 1.05rem; }
.fwy-crossing ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.55rem;
}
.fwy-crossing li + li::before { content: ">"; margin-right: 0.55rem; color: var(--blaze-set); }

/* =========================================================================
   DAYBREAK: the home cover. Flat fog ground, one hairline, no pattern,
   no photo. The subject is stated by the numbers band underneath.
   ========================================================================= */

/* The cover is a BAND, not a screen: the section tiles have to be visible
   without scrolling, and that rule outranks the hero. On wide screens the
   wordmark and the numbers share one row. */
.fwy-daybreak {
  background: var(--fog); border-bottom: var(--rule-weight);
  padding-block: clamp(1.2rem, 2.6vw, 1.9rem) clamp(0.9rem, 2vw, 1.4rem);
}
.fwy-daybreak__row { display: grid; gap: clamp(1.1rem, 2.8vw, 2.4rem); }
.fwy-daybreak__band {
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: var(--caps-track);
  color: var(--blaze-set); margin: 0 0 0.75rem;
}
.fwy-daybreak h1 {
  font-size: clamp(2.2rem, 1.4rem + 3.2vw, 3.7rem);
  text-transform: uppercase; letter-spacing: 0.045em; line-height: 1.02;
  max-width: 18ch;
}
.fwy-daybreak__swell {
  margin: 0.85rem 0 0; max-width: 52ch;
  font-size: clamp(1.02rem, 0.98rem + 0.35vw, 1.14rem); color: var(--driftwood);
}

/* Count: one column per published figure, monospace, on a blaze rule. */
.fwy-count__spread {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
}
.fwy-count__col { border-top: 3px solid var(--blaze); padding-top: 0.6rem; }
.fwy-count__num {
  display: block; font-family: var(--num-stack);
  font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.2rem);
  line-height: 1; letter-spacing: -0.02em; color: var(--gunmetal);
  font-variant-numeric: tabular-nums;
}
.fwy-count__label {
  display: block; margin-top: 0.45rem;
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: var(--caps-track);
  color: var(--gunmetal);
}
.fwy-count__entry { display: block; margin-top: 0.25rem; font-size: 0.8rem; color: var(--driftwood); }
.fwy-count__foot {
  margin: clamp(0.9rem, 2vw, 1.4rem) 0 0; padding-top: 0.7rem;
  border-top: var(--rule-weight);
  font-size: 0.8rem; color: var(--driftwood); max-width: 118ch;
}

@media (min-width: 1000px) {
  .fwy-daybreak__row { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; }
}

/* =========================================================================
   FLAT: a numbered section. A flat is shallow water you can walk.
   ========================================================================= */

.fwy-flat { margin-top: clamp(2rem, 4.4vw, 3.4rem); }
.fwy-flat--first { margin-top: clamp(1.1rem, 2.2vw, 1.7rem); }
.fwy-flat--sunken {
  background: var(--silt);
  padding-block: clamp(2rem, 4.4vw, 3.4rem);
  margin-block: clamp(2.6rem, 5.4vw, 4.4rem) 0;
}
.fwy-flat__sill {
  border-top: var(--rule-weight); padding-top: 0.85rem; margin-bottom: 1.15rem;
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 0.5rem 1.6rem;
}
.fwy-flat__crest { display: flex; align-items: baseline; gap: 0.85rem; max-width: 46ch; }
.fwy-flat__count {
  font-family: var(--num-stack); font-size: 0.86rem; color: var(--blaze-set);
  letter-spacing: 0.06em; white-space: nowrap;
}
.fwy-flat__lede { font-size: 0.82rem; color: var(--driftwood); max-width: 46ch; margin: 0; }

/* Band: the small-caps overline, like the ring on a bird's leg. */
.fwy-band {
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: var(--caps-track);
  color: var(--blaze-set); margin: 0 0 0.7rem;
}

/* =========================================================================
   SPREAD: an even grid of equal-height tiles. No slope, no variable span.
   ========================================================================= */

.fwy-spread {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: calc(var(--channel) * 1.35) var(--channel);
  grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
}
.fwy-decoy { margin: 0; position: relative; display: flex; flex-direction: column; }
.fwy-decoy__frame { overflow: hidden; background: var(--silt); border: var(--rule-weight); border-radius: var(--bevel); aspect-ratio: 3 / 2; }
.fwy-decoy__view { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; }
.fwy-decoy__slat { padding-top: 0.75rem; margin-top: 0.75rem; border-top: var(--rule-weight); flex: 1; }
.fwy-decoy__crest { margin: 0; font-size: clamp(1.06rem, 1rem + 0.4vw, 1.26rem); }
.fwy-decoy__link { color: var(--gunmetal); text-decoration: none; transition: color var(--ease); }
.fwy-decoy__link:hover { color: var(--tidewater); }
.fwy-decoy__link::after { content: ""; position: absolute; inset: 0; }
.fwy-decoy:hover .fwy-decoy__view { transform: scale(1.02); }
.fwy-decoy__note { margin: 0.45rem 0 0; color: var(--driftwood); font-size: 0.86rem; max-width: 46ch; }
.fwy-decoy__log {
  margin: 0.6rem 0 0; font-family: var(--num-stack); font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--driftwood);
}

/* =========================================================================
   TIDE: the dated register. Dense, ruled, no thumbnail. Date on the left
   in monospace, title on the same line, one sentence underneath.
   ========================================================================= */

.fwy-tide { list-style: none; margin: 0; padding: 0; border-top: var(--rule-weight); }
.fwy-tide__row {
  display: grid; grid-template-columns: 10.5rem 1fr;
  gap: 0.2rem 1.6rem; align-items: baseline;
  padding-block: 0.95rem;
  border-bottom: var(--rule-weight);
}
.fwy-tide__row:hover { background: var(--slick); }
.fwy-stamp {
  font-family: var(--num-stack); font-size: 0.78rem; color: var(--driftwood);
  text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap;
}
.fwy-tide__crest { margin: 0; font-size: clamp(1.02rem, 0.98rem + 0.34vw, 1.22rem); }
.fwy-tide__crest a { color: var(--gunmetal); text-decoration: none; }
.fwy-tide__crest a:hover { color: var(--tidewater); text-decoration: underline; }
.fwy-tide__lede { grid-column: 2; margin: 0.3rem 0 0; color: var(--driftwood); font-size: 0.88rem; max-width: 78ch; }
.fwy-tide__tag { grid-column: 1; margin: 0.3rem 0 0; font-size: 0.72rem; text-transform: uppercase; letter-spacing: var(--caps-track); color: var(--blaze-set); }

/* =========================================================================
   REACH: sticky rail on the LEFT, single reading column on its right.
   ========================================================================= */

.fwy-reach { display: block; }
.fwy-rail { margin-bottom: 2rem; }
.fwy-rail__crest {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: var(--caps-track);
  color: var(--driftwood); margin: 0 0 0.6rem; border-top: 3px solid var(--blaze); padding-top: 0.6rem;
}
.fwy-rail ul { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.fwy-rail li { border-bottom: var(--rule-weight); }
.fwy-rail a {
  display: block; padding-block: 0.5rem; font-size: 0.87rem;
  color: var(--gunmetal); text-decoration: none;
}
.fwy-rail a:hover { color: var(--tidewater); }
.fwy-rail [aria-current="page"] { color: var(--blaze-set); }

@media (min-width: 1100px) {
  .fwy-reach {
    display: grid;
    grid-template-columns: var(--rail-width) minmax(0, 1fr);
    gap: calc(var(--channel) * 2);
    align-items: start;
  }
  .fwy-rail { position: sticky; top: 1.6rem; margin-bottom: 0; margin-top: clamp(1.6rem, 3.4vw, 2.8rem); }
}

/* =========================================================================
   SLIP, PLATE AND CURRENT: the reading page.
   ========================================================================= */

.fwy-slip { padding-block: clamp(1.1rem, 2.6vw, 2rem) clamp(0.9rem, 2vw, 1.6rem); }
.fwy-slip h1 { max-width: 24ch; }
.fwy-slip__lede {
  margin: 1rem 0 0; max-width: 60ch;
  font-size: clamp(1.06rem, 1rem + 0.5vw, 1.24rem); color: var(--driftwood);
}
.fwy-log {
  list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem;
  margin: 1.4rem 0 0; padding: 0;
  font-family: var(--num-stack); font-size: 0.73rem;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--driftwood);
}
.fwy-log a { color: var(--driftwood); }

.fwy-plate { margin: 0; }
.fwy-plate__view { width: 100%; aspect-ratio: 21 / 9; max-height: 22rem; object-fit: cover; background: var(--silt); }
.fwy-plate__caption {
  max-width: var(--measure-wide); margin-inline: auto;
  padding: 0.7rem var(--shore) 0;
  font-size: 0.8rem; color: var(--driftwood);
}

.fwy-current { max-width: var(--measure); margin-top: clamp(1.6rem, 3.4vw, 2.8rem); }
.fwy-current h2 { margin-top: 2.4rem; }
.fwy-current h3 { margin-top: 1.9rem; }
.fwy-current h2:first-child, .fwy-current h3:first-child { margin-top: 0; }
.fwy-current ul, .fwy-current ol { padding-left: 1.15rem; }
.fwy-current li { margin-bottom: 0.44em; }
.fwy-current strong { color: var(--gunmetal); }
.fwy-current > h2 { border-top: var(--rule-weight); padding-top: 1.2rem; }

/* Pull quote. */
.fwy-call {
  margin: 2.4rem 0; padding-left: 1.3rem; border-left: 3px solid var(--blaze);
  font-family: var(--slab-stack); font-size: clamp(1.16rem, 1.05rem + 0.7vw, 1.5rem);
  line-height: 1.34; color: var(--gunmetal);
}

/* Note box. */
.fwy-shell { background: var(--slick); padding: clamp(1.1rem, 2.8vw, 1.8rem); margin: 2.2rem 0; border: var(--rule-weight); }
.fwy-shell > :last-child { margin-bottom: 0; }

/* Checklist: the game strap, where the birds line up. */
.fwy-strap {
  background: var(--slick); border: var(--rule-weight); border-left: 3px solid var(--tidewater);
  padding: clamp(1.1rem, 2.6vw, 1.7rem); margin: 2.2rem 0;
}
.fwy-strap h3 { margin-bottom: 0.7rem; }
.fwy-strap ul { list-style: none; margin: 0; padding: 0; }
.fwy-strap li { position: relative; padding-left: 1.5rem; margin-bottom: 0.55em; }
.fwy-strap li::before {
  content: ""; position: absolute; left: 0; top: 0.72em;
  width: 0.85rem; height: 0; border-top: 2px solid var(--tidewater);
}

/* Common mistakes: the shallows, where you run aground. */
.fwy-shallows {
  background: var(--silt); border-left: 3px solid var(--blaze);
  padding: clamp(1.1rem, 2.6vw, 1.7rem); margin: 2.2rem 0;
}
.fwy-shallows h3 {
  font-size: 0.86rem; text-transform: uppercase; letter-spacing: var(--caps-track);
  color: var(--blaze-set); margin-bottom: 0.8rem;
}
.fwy-shallows ul { margin-bottom: 0; padding-left: 1.15rem; }
.fwy-shallows li { margin-bottom: 0.55em; }

/* Table. */
.fwy-tally { margin: 2.4rem 0; overflow-x: auto; border: var(--rule-weight); }
.fwy-tally table { border-collapse: collapse; width: 100%; min-width: 36rem; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.fwy-tally caption {
  text-align: left; padding: 0.85rem 1rem; background: var(--slick);
  font-size: 0.76rem; text-transform: uppercase; letter-spacing: var(--caps-track);
  color: var(--driftwood); border-bottom: var(--rule-weight);
}
.fwy-tally th, .fwy-tally td { text-align: left; padding: 0.66rem 1rem; border-bottom: var(--rule-weight); vertical-align: top; }
.fwy-tally tr:last-child td { border-bottom: 0; }
.fwy-tally th {
  background: var(--landing); color: var(--landing-ink);
  font-family: var(--slab-stack); font-weight: 600;
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em;
}
.fwy-tally .fwy-practice { display: block; margin-top: 0.35rem; color: var(--driftwood); font-style: italic; }
.fwy-tally .fwy-practice::before {
  content: "Practice "; font-style: normal; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: var(--caps-track); color: var(--blaze-set);
}

/* Read next. */
.fwy-return { border-top: var(--rule-weight); margin-top: var(--breath); padding-top: 1.2rem; }
.fwy-return h2 { font-size: clamp(1.16rem, 1rem + 0.7vw, 1.5rem); border-top: 0; padding-top: 0; }
.fwy-return ul { list-style: none; margin: 0.7rem 0 0; padding: 0; }
.fwy-return li { margin-bottom: 0.62rem; }

/* Separator: the wake, an offset single rule. */
.fwy-wake { border: 0; border-top: var(--rule-weight); width: 42%; margin: var(--breath) 0 var(--breath) 0; }

/* =========================================================================
   LANDING: the launch, i.e. the footer.
   ========================================================================= */

.fwy-landing {
  background: var(--landing); color: var(--landing-ink);
  margin-top: var(--breath); padding-block: clamp(2.4rem, 5vw, 4rem);
}
.fwy-landing__cols {
  display: grid; gap: var(--channel);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.fwy-landing h2 { font-size: 0.86rem; text-transform: uppercase; letter-spacing: var(--caps-track); margin-bottom: 0.9rem; color: var(--landing-ink); }
.fwy-landing ul { list-style: none; margin: 0; padding: 0; }
.fwy-landing li { margin-bottom: 0.5rem; }
.fwy-landing a { color: var(--landing-link); text-decoration: none; border-bottom: 1px solid transparent; font-size: 0.9rem; }
.fwy-landing a:hover { border-bottom-color: var(--landing-link); }
.fwy-landing p { color: var(--landing-ink); font-size: 0.88rem; max-width: 54ch; }
.fwy-landing__base {
  margin-top: clamp(1.8rem, 3.4vw, 2.6rem); padding-top: 1.1rem;
  border-top: 1px solid rgba(220, 231, 229, 0.22);
  font-family: var(--num-stack); font-size: 0.74rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--landing-ink);
}

/* =========================================================================
   RESPONSIVE: the grid folds, nothing overflows sideways.
   ========================================================================= */

@media (max-width: 900px) {
  .fwy-levee__row { align-items: flex-start; flex-direction: column; }
  .fwy-reeds ul { justify-content: flex-start; }
}
@media (max-width: 640px) {
  :root { --breath: clamp(2.2rem, 9vw, 3.4rem); }
  .fwy-spread { grid-template-columns: 1fr; }
  .fwy-tide__row { grid-template-columns: 1fr; gap: 0.25rem; }
  .fwy-tide__lede, .fwy-tide__tag { grid-column: 1; }
  .fwy-count__col { border-top-width: 2px; }
  .fwy-daybreak h1 { letter-spacing: 0.03em; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .fwy-decoy:hover .fwy-decoy__view { transform: none; }
}

/* =========================================================================
   PRINT
   ========================================================================= */

@media print {
  .fwy-levee, .fwy-landing, .fwy-reeds, .fwy-rail, .fwy-return, .fwy-portage { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .fwy-current, .fwy-marsh { max-width: none; padding: 0; }
  .fwy-tally { overflow: visible; }
  .fwy-strap, .fwy-shallows, .fwy-shell { border: 1px solid #999; background: none; }
}