/* Michigan Fly Fishing Hub — shared stylesheet.
   Extracted from the former inline <style> block in index.html.
   Generated by build/build.mjs — edit build/src/site.css, not this file. */
  :root {
    --forest:       #1b4332;
    --forest-2:     #2d6a4f;
    --forest-3:     #40916c;
    --forest-pale:  #d8f3dc;
    --forest-xpale: #ecf9ef;
    --river:        #023e8a;
    --river-2:      #0077b6;
    --river-light:  #caf0f8;
    --amber:        #d4a843;
    --amber-2:      #c4922a;
    --amber-3:      #a87520;
    --amber-pale:   #fff3cd;
    --amber-xpale:  #fffbf0;
    --parchment:    #f9f5ec;
    --parchment-2:  #f0ead8;
    --parchment-3:  #e4dcc8;
    --parchment-4:  #d8cfbb;
    --ink:          #1c1917;
    --ink-2:        #44403c;
    --ink-3:        #78716c;
    --ink-4:        #a8a29e;
    --ink-5:        #c8c2bc;
    --rust:         #9a3412;
    --rust-pale:    #fde8d8;
    --green:        #22c55e;
    --red:          #ef4444;
    --border:       rgba(28,25,23,0.1);
    --border-2:     rgba(28,25,23,0.18);
    --border-3:     rgba(28,25,23,0.08);
    --shadow-sm:    0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:    0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
    --shadow-lg:    0 10px 28px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.06);
    --radius-sm:    6px;
    --radius:       10px;
    --radius-lg:    14px;
  }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { font-family: 'Source Sans 3', sans-serif; font-weight: 300; background: var(--parchment); color: var(--ink); min-height: 100vh; }

  
  .mff-nav {
    background: var(--parchment-2);
    border-bottom: 2.5px solid var(--forest);
    padding: 0 32px;
    display: flex; align-items: center; justify-content: space-between;
    height: 62px;
  }
  .mff-nav-logo { display: flex; flex-direction: column; gap: 1px; }
  .mff-nav-logo-main { font-family: 'Playfair Display', serif; font-size: 19px; font-weight: 600; color: var(--forest); line-height: 1; }
  .mff-nav-logo-main em { font-style: italic; color: var(--forest-3); }
  .mff-nav-logo-sub { font-size: 10px; color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }
  .mff-nav-center { display: flex; gap: 28px; align-items: center; }
  .mff-nav-link { font-size: 11px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); text-decoration: none; padding-bottom: 2px; border-bottom: 1.5px solid transparent; transition: all .18s; }
  .mff-nav-link.active { color: var(--forest); border-bottom-color: var(--forest); }
  .mff-nav-link:hover { color: var(--forest); }
  .mff-nav-right { display: flex; align-items: center; gap: 10px; }
  .mff-live-badge { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-3); }
  .mff-nav-btn {
    background: var(--forest); color: var(--amber);
    border: none; padding: 8px 16px; border-radius: 4px;
    font-size: 11px; font-family: 'Source Sans 3', sans-serif;
    font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
    cursor: pointer; transition: background .18s; white-space: nowrap;
  }
  .mff-nav-btn:hover { background: var(--forest-2); }
  .mff-nav-btn-ghost { background: none; color: var(--forest); border: 1.5px solid var(--forest); }
  .mff-nav-btn-ghost:hover { background: var(--forest); color: var(--amber); }

  
  .mff-river-bar {
    background: var(--forest); padding: 0 32px;
    display: flex; align-items: center; gap: 3px;
    height: 48px; overflow-x: auto; scrollbar-width: none; position: relative; z-index: 1;
  }
  .mff-river-bar::-webkit-scrollbar { display: none; }
  .rnav-btn {
    background: none; border: none; color: rgba(255,255,255,.52);
    font-size: 12px; font-family: 'Source Sans 3', sans-serif; font-weight: 400;
    padding: 5px 13px; border-radius: 4px; cursor: pointer; white-space: nowrap;
    transition: all .15s; display: flex; flex-direction: column;
    align-items: flex-start; gap: 1px; height: 100%; justify-content: center;
    border-bottom: 2px solid transparent;
  }
  .rnav-btn:hover { color: rgba(255,255,255,.85); background: rgba(255,255,255,.06); }
  .rnav-btn.active { color: var(--amber); border-bottom-color: var(--amber); background: rgba(255,255,255,.06); font-weight: 500; }
  .rnav-home { font-size: 11px !important; color: rgba(255,255,255,.4) !important; }
  .rnav-home.active { color: rgba(255,255,255,.8) !important; border-bottom-color: rgba(255,255,255,.4) !important; }
  .rnav-sub { font-size: 9px; opacity: .7; letter-spacing: .04em; }

  
  .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; animation: livepulse 2.5s ease-in-out infinite; }
  @keyframes livepulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.85)} }
  @keyframes spin { to { transform: rotate(360deg); } }

  
  .river-hero {
    background: var(--forest); padding: 44px 32px 36px;
    border-bottom: 4px solid var(--amber); position: relative; overflow: hidden;
  }
  .river-hero::before {
    content: ''; position: absolute; right: -80px; top: -60px;
    width: 340px; height: 340px; border-radius: 50%;
    background: rgba(255,255,255,.025); pointer-events: none;
  }
  .river-hero-inner {
    max-width: 1100px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr auto;
    gap: 40px; align-items: center; position: relative; z-index: 1;
  }
  .river-hero-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); margin-bottom: 12px; }
  .river-name { font-family: 'Playfair Display', serif; font-size: 42px; line-height: 1.05; color: #fff; font-weight: 400; }
  .river-name em { font-style: italic; color: var(--amber); }
  .river-hero-body { font-family: 'Lora', serif; font-size: 14px; color: rgba(255,255,255,.65); line-height: 1.72; margin-top: 14px; max-width: 520px; }
  .river-hero-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
  .river-hero-btn {
    font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
    padding: 9px 16px; border-radius: 4px; cursor: pointer; transition: all .15s;
    font-family: 'Source Sans 3', sans-serif; text-decoration: none; display: inline-block;
    border: 1.5px solid rgba(255,255,255,.25); color: rgba(255,255,255,.8); background: none;
  }
  .river-hero-btn:hover { border-color: rgba(255,255,255,.5); color: #fff; background: rgba(255,255,255,.06); }
  .hero-cfs-medallion {
    width: 120px; height: 120px; border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06);
    display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .hero-cfs-score { font-family: 'Playfair Display', serif; font-size: 32px; font-weight: 400; color: #fff; line-height: 1; }
  .hero-cfs-label { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-top: 5px; }

  
  .conditions-strip {
    background: var(--forest-2); padding: 0 32px;
    display: flex; gap: 0; align-items: stretch; min-height: 50px;
    overflow-x: auto; scrollbar-width: none; position: relative; z-index: 1;
  }
  .conditions-strip::-webkit-scrollbar { display: none; }
  .cond-item { display: flex; align-items: center; gap: 10px; padding: 0 22px; border-right: 1px solid rgba(255,255,255,.1); white-space: nowrap; }
  .cond-label { font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.42); display: block; }
  .cond-value { font-size: 14px; font-weight: 500; color: #fff; display: block; line-height: 1.2; }
  .cond-trend { font-size: 11px; color: rgba(255,255,255,.5); margin-left: 2px; }

  
  .home-hero-section {
    background: var(--forest); padding: 64px 32px 56px;
    border-bottom: 4px solid var(--amber); text-align: center; position: relative; overflow: hidden;
  }
  .home-hero-section::before { content:''; position:absolute; top:0;left:0;right:0;bottom:0; background: radial-gradient(ellipse at 60% 40%, rgba(255,255,255,.03) 0%, transparent 70%); pointer-events:none; }
  .home-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: .25em; text-transform: uppercase; color: var(--amber); margin-bottom: 16px; text-shadow: 0 1px 6px rgba(0,0,0,.55); }
  .home-title { font-family: 'Playfair Display', serif; font-size: 44px; line-height: 1.08; color: #fff; font-weight: 400; text-shadow: 0 2px 12px rgba(0,0,0,.7); }
  .home-title em { font-style: italic; color: var(--amber); }
  .home-subtitle { font-family: 'Lora', serif; font-size: 15px; color: rgba(255,255,255,.88); line-height: 1.7; margin-top: 16px; max-width: 560px; margin-left: auto; margin-right: auto; text-shadow: 0 1px 6px rgba(0,0,0,.55); }
  .home-cta-row { display: flex; gap: 12px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }
  .home-cta-primary { background: var(--amber); color: var(--forest); border: none; padding: 12px 28px; border-radius: 4px; font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; font-family: 'Source Sans 3', sans-serif; transition: background .15s; }
  .home-cta-primary:hover { background: var(--amber-2); }
  .home-cta-secondary { background: none; color: rgba(255,255,255,.82); border: 1.5px solid rgba(255,255,255,.3); padding: 12px 24px; border-radius: 4px; font-weight: 500; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; text-decoration: none; font-family: 'Source Sans 3', sans-serif; display: inline-block; transition: all .15s; }
  .home-cta-secondary:hover { border-color: rgba(255,255,255,.6); color: #fff; }

  
  .home-feature-bar { display: grid; grid-template-columns: repeat(3,1fr); background: var(--parchment-2); border-bottom: 1px solid var(--border-2); }
  .home-feature-cell { padding: 20px 24px; border-right: 1px solid var(--border); text-align: center; }
  .home-feature-cell:last-child { border-right: none; }
  .home-feature-icon { font-size: 24px; margin-bottom: 8px; }
  .home-feature-title { font-weight: 600; font-size: 13px; color: var(--ink); margin-bottom: 4px; }
  .home-feature-desc { font-size: 11px; color: var(--ink-3); line-height: 1.5; }

  
  .home-body { padding: 40px 32px 64px; max-width: 1160px; margin: 0 auto; }
  .home-river-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
  .river-card {
    background: #fff; border: 1px solid var(--border-2); border-radius: 10px; padding: 16px 18px;
    cursor: pointer; transition: all .15s; text-decoration: none; display: block;
  }
  .river-card:hover { border-color: var(--forest); box-shadow: var(--shadow-sm); }
  .rc-region { font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-4); margin-bottom: 5px; }
  .rc-name { font-family: 'Playfair Display', serif; font-size: 17px; color: var(--ink); font-weight: 400; margin-bottom: 10px; }
  .rc-stat { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; }
  .rc-stat-label { font-size: 10px; color: var(--ink-4); }
  .rc-stat-val { font-family: 'Playfair Display', serif; font-size: 17px; color: var(--ink); }
  .rc-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 10px; }

  
  .river-page { background: var(--parchment); min-height: 60vh; }
  .river-page-inner { max-width: 1100px; margin: 0 auto; padding: 40px 32px 64px; }
  .section-label {
    font-size: 9px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
    color: var(--forest); display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
  }
  .section-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }

  
  .card { background: #fff; border: 1px solid var(--border-2); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm); }
  .card.mb-24 { margin-bottom: 24px; }
  .card.mb-28 { margin-bottom: 28px; }

  
  .grid-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 28px; }
  .grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px; }
  .grid-lodge { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 28px; }

  
  .flow-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; margin-bottom: 14px; }
  .flow-stat { text-align: center; padding: 8px; border-right: 1px solid var(--border); }
  .flow-stat:last-child { border-right: none; }
  .flow-val { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 400; line-height: 1; color: var(--ink); }
  .flow-unit { font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-top: 2px; }
  .flow-lbl { font-size: 11px; color: var(--ink-2); margin-top: 4px; }
  .flow-bar { height: 4px; background: var(--parchment-3); border-radius: 2px; overflow: hidden; margin: 10px 0 6px; }
  .flow-fill { height: 4px; background: var(--forest); border-radius: 2px; }
  .flow-status { font-size: 12px; margin-top: 4px; }
  .flow-usgs { font-size: 10px; color: var(--ink-3); margin-top: 8px; }
  .flow-usgs a { color: var(--river-2); text-decoration: none; }

  
  .weather-strip { display: grid; grid-template-columns: repeat(10,1fr); gap: 5px; margin-bottom: 28px; }
  .day-cell { background: #fff; border: 1px solid var(--border-2); border-radius: 6px; padding: 7px 4px; text-align: center; }
  .day-cell .day-name { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin-bottom: 3px; }
  .day-cell .day-icon { font-size: 18px; margin: 3px 0; }
  .day-cell .day-hi { font-size: 14px; font-weight: 500; }
  .day-cell .day-lo { font-size: 11px; color: var(--ink-3); }
  .day-cell .day-rain { font-size: 10px; color: var(--river-2); margin-top: 2px; }

  
  .report-note { font-size: 13px; line-height: 1.7; color: var(--ink-2); margin-top: 8px; }
  .report-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
  .rtag { font-size: 11px; padding: 3px 10px; border-radius: 3px; font-weight: 500; display: inline-block; }
  .rtag-ex   { background: var(--forest); color: #fff; }
  .rtag-good { background: var(--forest-pale); color: var(--forest); }
  .rtag-fair { background: var(--amber-pale); color: var(--amber-3); }

  /* Current Conditions — the synthesised conditions block. Baked at build time
     from build/data/conditions.mjs, refreshed on load by mffLoadConditions().
     The shell ships hidden on rivers with nothing published yet, so the [hidden]
     attribute has to actually win: `display: flex` on a container would
     otherwise override the UA stylesheet and show an empty card. */
  .mff-cond[hidden] { display: none; }
  .mff-cond .card { border-left: 3px solid var(--forest-3); }
  .mff-cond-text { font-size: 14px; line-height: 1.75; color: var(--ink-2); margin: 0; }
  .mff-cond-meta {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
    margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-2);
    font-size: 11px; color: var(--ink-3);
  }
  .mff-cond-asof { letter-spacing: .04em; text-transform: uppercase; }
  .mff-cond-sources a { color: var(--forest-2); text-decoration: none; border-bottom: 1px solid var(--forest-pale); }
  .mff-cond-sources a:hover { color: var(--forest); border-bottom-color: var(--forest-3); }

  
  .season-table { background: #fff; border: 1px solid var(--border-2); border-radius: 12px; overflow: hidden; margin-bottom: 32px; box-shadow: var(--shadow-sm); }
  .st-head { display: grid; grid-template-columns: 160px repeat(12,1fr); background: var(--forest); padding: 10px 16px; gap: 2px; }
  .st-head span { font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); text-align: center; }
  .st-head span:first-child { text-align: left; color: rgba(255,255,255,.7); }
  .st-row { display: grid; grid-template-columns: 160px repeat(12,1fr); padding: 8px 16px; gap: 2px; border-bottom: 1px solid rgba(28,25,23,.07); align-items: center; transition: background .12s; }
  .st-row:last-child { border-bottom: none; }
  .st-row:hover { background: rgba(249,245,236,.7); }
  .st-species { font-size: 13px; color: var(--ink-2); font-weight: 400; }
  .st-species small { display: block; font-size: 10px; color: var(--ink-4); font-style: italic; }
  .st-cell { text-align: center; }
  .st-block { display: inline-block; width: 100%; height: 14px; border-radius: 3px; transition: opacity .2s; }
  .st-block.none { background: transparent !important; }
  .st-block.current-month { outline: 2px solid var(--amber); outline-offset: 1px; }

  
  .shop-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
  .shop-card:last-child { border-bottom: none; }
  .shop-icon { width: 36px; height: 36px; border-radius: 6px; background: var(--amber-xpale); border: 1px solid rgba(212,168,67,.2); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
  .lodge-card { background: #fff; border: 1px solid var(--border-2); border-radius: 10px; padding: 14px 16px; text-decoration: none; color: inherit; display: block; transition: border-color .15s; }
  .lodge-card:hover { border-color: var(--forest); }
  .lodge-type { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-bottom: 4px; }
  .lodge-name { font-size: 14px; font-weight: 400; color: var(--ink); }
  .lodge-desc { font-size: 11px; color: var(--ink-3); margin-top: 5px; line-height: 1.5; }
  .lodge-cta { font-size: 11px; color: var(--river-2); margin-top: 4px; }

  
  .history-text { font-size: 13px; line-height: 1.8; color: var(--ink-2); }
  .tidbit { background: var(--river-light); border-left: 3px solid var(--river-2); border-radius: 0 6px 6px 0; padding: 10px 14px; margin-top: 12px; }
  .tidbit-label { font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: var(--river-2); margin-bottom: 4px; font-weight: 500; }
  .tidbit-text { font-size: 12px; color: var(--ink-2); font-style: italic; line-height: 1.6; }

  
  .map-frame { width: 100%; height: 300px; border: none; display: block; isolation: isolate; }
  .map-links { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
  .map-link { font-size: 11px; padding: 5px 12px; border-radius: 20px; text-decoration: none; border: 1px solid var(--border-2); color: var(--ink-2); background: #fff; transition: all .15s; display: flex; align-items: center; gap: 5px; }
  .map-link:hover { border-color: var(--forest); color: var(--forest); }
  .map-link-icon { font-size: 12px; }
  .access-pill { font-size: 11px; padding: 4px 10px; border-radius: 20px; background: var(--parchment-2); border: 1px solid var(--border-2); color: var(--ink-2); }

  
  .plan-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 2000; display: none; align-items: center; justify-content: center; padding: 16px; }
  .plan-backdrop.open { display: flex; }
  .plan-modal { background: #fff; border-radius: 16px; width: 100%; max-width: 680px; max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 64px rgba(0,0,0,0.2); }
  .plan-head { background: var(--forest); padding: 20px 24px; display: flex; align-items: flex-start; justify-content: space-between; border-radius: 16px 16px 0 0; }
  .plan-head-title { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 400; color: #fff; }
  .plan-head-sub { font-size: 12px; color: rgba(255,255,255,.6); margin-top: 3px; }
  .plan-close { background: none; border: none; color: rgba(255,255,255,.7); font-size: 20px; cursor: pointer; padding: 0; line-height: 1; }
  .plan-close:hover { color: #fff; }
  .plan-body { padding: 24px; }
  .plan-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-bottom: 6px; font-weight: 500; }
  .plan-field { margin-bottom: 16px; }
  .plan-input, .plan-select, .plan-textarea {
    width: 100%; padding: 10px 13px; border: 1px solid var(--border-2);
    border-radius: 6px; font-size: 13px; font-family: 'Source Sans 3', sans-serif;
    color: var(--ink); background: #fff; transition: border-color .15s;
  }
  .plan-input:focus, .plan-select:focus, .plan-textarea:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(27,67,50,.1); }
  .plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .plan-submit { width: 100%; background: var(--forest); color: #fff; border: none; border-radius: 6px; padding: 13px; font-size: 14px; font-weight: 500; cursor: pointer; font-family: 'Source Sans 3', sans-serif; transition: background .15s; margin-top: 4px; }
  .plan-submit:hover { background: var(--forest-2); }
  .plan-submit:disabled { opacity: .5; cursor: not-allowed; }
  .plan-result { font-size: 13px; line-height: 1.85; color: var(--ink-2); white-space: pre-wrap; }
  .plan-section-head { font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--forest); margin: 20px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
  .plan-email-row { display: flex; gap: 10px; margin-top: 20px; align-items: flex-end; }
  #ptEmail { flex: 1; }
  #ptEmailStatus { font-size: 11px; margin-top: 6px; }
  #ptEmailBtn { white-space: nowrap; background: var(--forest); color: #fff; border: none; padding: 10px 18px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: 'Source Sans 3', sans-serif; }
  #ptEmailBtn:hover { background: var(--forest-2); }
  .loading-dots::after { content: ''; animation: dots 1.4s infinite; }
  @keyframes dots { 0%{content:'.'} 33%{content:'..'} 66%{content:'...'} 100%{content:''} }

  
  /* @chrome:start — shared site chrome: footer + contact & subscribe modals.

     build/build.mjs slices everything between these two markers into
     assets/site-chrome.js, the bundle the hand-edited article pages load.
     Those pages do not link site.css, so this is the only styling their
     footer and modals get. Rules that belong to the shared chrome go
     inside the markers; anything else stays out of them.

     Every var() below carries a literal fallback. The pages that load this
     define their palette in their own inline :root and they do not all define
     the same names — 404.html has --ink-3 but not --ink-2 or --border-2, and
     none of them define --red. A modal is invisible until someone opens it,
     which is the worst place to discover a missing custom property, so the
     chrome does not assume any of them are there. */

  .site-footer { background: var(--forest, #1b4332); color: rgba(255,255,255,.55); text-align: center; padding: 20px 32px; font-size: 11px; line-height: 1.8; }
  .site-footer a { color: rgba(255,255,255,.7); text-decoration: none; }
  .site-footer a:hover { color: #fff; }
  .site-footer button { background: none; border: none; color: rgba(255,255,255,.6); cursor: pointer; font-size: 11px; font-family: inherit; text-decoration: underline; padding: 0; }
  .site-footer button:hover { color: rgba(255,255,255,.9); }

  .contact-modal { background: #fff; border-radius: 14px; width: 100%; max-width: 480px; box-shadow: 0 20px 60px rgba(0,0,0,0.25); overflow: hidden; }
  .contact-close { background: none; border: none; color: rgba(255,255,255,.7); font-size: 20px; cursor: pointer; }
  .contact-close:hover { color: #fff; }
  .contact-body { padding: 24px; }
  .contact-submit { width: 100%; background: var(--forest, #1b4332); color: #fff; border: none; border-radius: 6px; padding: 12px; font-size: 14px; font-weight: 500; cursor: pointer; font-family: 'Source Sans 3', sans-serif; margin-top: 4px; }
  .contact-submit:hover { background: var(--forest-2, #2d6a4f); }
  .contact-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 2000; display: none; align-items: center; justify-content: center; padding: 20px; }
  .contact-backdrop.open { display: flex; }
  .contact-head { background: var(--forest, #1b4332); color: #fff; padding: 20px 24px; display: flex; align-items: flex-start; justify-content: space-between; }
  .contact-head-title { font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 400; }
  .contact-head-sub { font-size: 11px; color: rgba(255,255,255,.55); margin-top: 3px; }
  .contact-success { text-align: center; padding: 36px 24px; }
  .contact-success-icon { font-size: 38px; margin-bottom: 14px; }
  .contact-success-title { font-family: 'Playfair Display', serif; font-size: 1.1rem; font-weight: 400; margin-bottom: 8px; }
  .contact-success-msg { font-size: 13px; color: var(--ink-2, #44403c); line-height: 1.65; }
  .cf { margin-bottom: 16px; }
  .cf label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3, #78716c); margin-bottom: 5px; font-weight: 500; }
  .cf input, .cf textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--border-2, rgba(28,25,23,0.18)); border-radius: 6px; font-size: 14px; font-family: 'Source Sans 3', sans-serif; color: var(--ink, #1c1917); background: #fff; transition: border-color .15s; box-sizing: border-box; }
  .cf input:focus, .cf textarea:focus { outline: none; border-color: var(--forest, #1b4332); }
  .cf input.err, .cf textarea.err { border-color: var(--red, #ef4444); }
  .cf textarea { resize: vertical; min-height: 110px; line-height: 1.55; }
  .cf-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; min-height: 16px; }
  .cf-err { font-size: 11px; color: var(--red, #ef4444); }
  .cf-count { font-size: 11px; color: var(--ink-3, #78716c); }
  .cf-count.over { color: var(--red, #ef4444); font-weight: 500; }

  .subscribe-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 2000; display: none; align-items: center; justify-content: center; padding: 20px; }
  .subscribe-backdrop.open { display: flex; }
  .subscribe-modal { background: #fff; border-radius: 14px; width: 100%; max-width: 460px; box-shadow: 0 20px 60px rgba(0,0,0,0.25); overflow: hidden; }
  .subscribe-head { background: var(--forest, #1b4332); color: #fff; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; }
  .subscribe-head-title { font-family: 'Playfair Display', serif; font-size: 1.2rem; font-weight: 400; }
  .subscribe-close { background: none; border: none; color: rgba(255,255,255,.7); font-size: 20px; cursor: pointer; line-height: 1; padding: 0; }
  .subscribe-close:hover { color: #fff; }
  .subscribe-body { padding: 24px; }
  .subscribe-desc { font-size: 14px; color: var(--ink-2, #44403c); line-height: 1.7; margin-bottom: 20px; }
  .subscribe-field { margin-bottom: 14px; }
  .subscribe-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3, #78716c); margin-bottom: 6px; font-weight: 500; }
  .subscribe-input { width: 100%; padding: 9px 12px; border: 1px solid var(--border-2, rgba(28,25,23,0.18)); border-radius: 6px; font-size: 14px; font-family: 'Source Sans 3', sans-serif; color: var(--ink, #1c1917); background: #fff; transition: border-color .15s; }
  .subscribe-input:focus { outline: none; border-color: var(--forest, #1b4332); box-shadow: 0 0 0 3px rgba(27,67,50,.1); }
  .subscribe-input.error { border-color: var(--red, #ef4444); }
  .subscribe-btn { width: 100%; margin-top: 4px; background: var(--forest, #1b4332); color: #fff; border: none; border-radius: 6px; padding: 12px; font-size: 14px; font-weight: 500; cursor: pointer; font-family: 'Source Sans 3', sans-serif; transition: background .15s; }
  .subscribe-btn:hover { background: var(--forest-2, #2d6a4f); }
  .subscribe-btn:disabled { opacity: .5; cursor: not-allowed; }
  .subscribe-error { font-size: 12px; color: var(--red, #ef4444); margin-top: 4px; }
  .subscribe-success { text-align: center; padding: 28px 16px; }
  .subscribe-success-icon { font-size: 40px; margin-bottom: 12px; }
  .subscribe-success-title { font-family: 'Playfair Display', serif; font-size: 1.2rem; font-weight: 400; margin-bottom: 8px; color: var(--forest, #1b4332); }
  .subscribe-success-msg { font-size: 13px; color: var(--ink-2, #44403c); line-height: 1.65; }
  /* @chrome:end */

  

  
  .access-pill { font-size: 11px; padding: 5px 12px; border-radius: 20px; background: var(--parchment-2); border: 1px solid var(--border-2); color: var(--ink-2); cursor: pointer; font-family: 'Source Sans 3', sans-serif; transition: all .15s; line-height: 1.4; }
  .access-pill:hover, .access-pill.active-site { background: var(--river-light); border-color: var(--river-2); color: var(--river-2); font-weight: 500; }
  .river-map{padding:16px 16px 4px;background:#fff}
  .river-map svg{display:block;max-width:100%;max-height:540px;height:auto;width:auto;margin:0 auto}
  .river-map-cap{font-size:10px;color:#a8a29e;text-align:center;margin:6px 0 12px;letter-spacing:.02em}
  .rml-key{display:inline-block;width:9px;height:9px;background:#1b4332;vertical-align:middle;margin:0 3px 0 9px}
  .rml-key.ci{border-radius:50%}.rml-key.sq{border-radius:2px}
  .river-map-legend{display:flex;flex-wrap:wrap;gap:7px 14px;padding:0 4px 14px}
  .rml-item{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#44403c;width:calc(50% - 7px)}
  .rml-num{flex:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;background:#1b4332;color:#fff;font-size:11px;font-weight:700}
  .rml-mi{color:#a8a29e;margin-left:auto;font-size:11px}
  @media(max-width:560px){.rml-item{width:100%}}

  

  
  .hatch-cal-col { grid-column: span 2; }
  @media (max-width: 900px) {
    .grid-3col { grid-template-columns: 1fr 1fr; }
    .home-river-grid { grid-template-columns: 1fr 1fr; }
    .home-feature-bar { grid-template-columns: 1fr; }
    .home-feature-cell { border-right: none; border-bottom: 1px solid var(--border); }
    .home-feature-cell:last-child { border-bottom: none; }
    .grid-lodge { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 720px) {
    .grid-3col, .grid-2col { grid-template-columns: 1fr; }
    .hatch-cal-col { grid-column: span 1; }
    .river-hero-inner { grid-template-columns: 1fr; }
    .hero-cfs-medallion { display: none; }
    .mff-nav { padding: 0 16px; }
    .mff-river-bar { padding: 0 16px; }
    .river-page-inner { padding: 24px 16px 48px; }
    .home-body { padding: 24px 16px 48px; }
    .home-river-grid { grid-template-columns: 1fr; }
    .grid-lodge { grid-template-columns: 1fr; }
    .weather-strip { grid-template-columns: repeat(5,1fr); }
    .st-head, .st-row { grid-template-columns: 120px repeat(12,1fr); }
  }
  @media (max-width: 600px) {
    .map-frame { height: 220px; }
    .river-name { font-size: 30px; }
    .home-title { font-size: 30px; }
  }
  @keyframes shimmer { 0%{opacity:.5} 50%{opacity:1} 100%{opacity:.5} }
  .loading-shimmer { animation: shimmer 1.4s ease-in-out infinite; background: var(--parchment-3); }

  
  .home-page { display: block; }
  .home-hero { background: var(--forest); padding: 28px 20px 24px; text-align: center; border-bottom: 4px solid var(--amber); position: relative; overflow: hidden; }
  .home-hero-bg { position: absolute; inset: 0; background-image: url("/assets/img/home-hero.jpg"); background-size: cover; background-position: center 45%; background-repeat: no-repeat; z-index: 0; }
  .home-hero-overlay { position: absolute; inset: 0; background: rgba(5,18,10,.28); z-index: 1; }
  .home-hero-inner { position: relative; z-index: 2; }
  .home-hero-inner { max-width: 700px; margin: 0 auto; }
  .home-subtitle { font-family: 'Lora', serif; font-size: 15px; color: rgba(255,255,255,.65); line-height: 1.7; max-width: 560px; margin: 14px auto 28px; font-weight: 300; }
  .home-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
  .home-cta-primary { background: var(--amber); color: var(--forest); border: none; padding: 12px 28px; border-radius: 4px; font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; font-family: 'Source Sans 3', sans-serif; transition: background .15s; }
  .home-cta-primary:hover { background: var(--amber-2); }
  .home-cta-secondary { background: none; color: rgba(255,255,255,.82); border: 1.5px solid rgba(255,255,255,.3); padding: 12px 24px; border-radius: 4px; font-weight: 500; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; display: inline-block; transition: all .15s; font-family: 'Source Sans 3', sans-serif; }
  .home-cta-secondary:hover { border-color: rgba(255,255,255,.6); color: #fff; }
  .home-body { max-width: 1100px; margin: 0 auto; padding: 44px 32px 64px; }
  .home-section { margin-bottom: 52px; }
  .home-section-label { font-size: 9px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--forest); display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
  .home-section-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }
  .home-features-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
  @media(max-width:800px){ .home-features-grid { grid-template-columns: 1fr 1fr; } }
  @media(max-width:520px){ .home-features-grid { grid-template-columns: 1fr; } }
  .home-feature-card { background: #fff; border: 1px solid var(--border-2); border-radius: var(--radius); padding: 20px 18px; }
  .hfc-icon { font-size: 22px; margin-bottom: 10px; line-height: 1; }
  .hfc-title { font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 7px; }
  .hfc-desc { font-size: 13px; color: var(--ink-2); line-height: 1.65; }
  .home-rivers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
  .home-river-card { background: #fff; border: 1px solid var(--border-2); border-radius: var(--radius); padding: 14px 16px; cursor: pointer; transition: all .15s; text-decoration: none; color: inherit; display: block; }
  .home-river-card:hover { border-color: var(--forest); box-shadow: var(--shadow-sm); }
  .hrc-region { font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-4); margin-bottom: 5px; }
  .hrc-name { font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 400; color: var(--ink); margin-bottom: 7px; }
  .hrc-species { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
  .hrc-sp { font-size: 10px; padding: 2px 7px; border-radius: 20px; background: var(--river-light); color: var(--river-2); }
  .hrc-cta { font-size: 11px; color: var(--river-2); }

  /* ── Hatching now (homepage) ──────────────────────────────────────────────
     Every species ships in the HTML; mffRenderHatchingNow() adds .hnow-on to
     the ones active in the current month. Hidden by default so the page never
     flashes all 13 — the <noscript> block in the section undoes this. */
  .hnow-lede { font-size: 13px; line-height: 1.7; color: var(--ink-2); margin: -6px 0 16px; }
  .hnow-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
  .hnow-card { display: none; background: #fff; border: 1px solid var(--border-2); border-left: 3px solid var(--forest-3); border-radius: var(--radius); padding: 13px 15px; text-decoration: none; color: inherit; transition: all .15s; }
  .hnow-card.hnow-on { display: block; }
  .hnow-card:hover { border-color: var(--forest); border-left-color: var(--forest); box-shadow: var(--shadow-sm); }
  .hnow-card.hnow-peak { border-left-color: var(--amber); background: var(--amber-xpale); }
  .hnow-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
  .hnow-name { font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 400; color: var(--ink); }
  .hnow-pill { display: none; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-radius: 20px; padding: 3px 8px; white-space: nowrap; }
  .hnow-pill-peak { color: var(--amber-3); background: var(--amber-pale); }
  .hnow-pill-next { color: var(--forest); background: var(--forest-xpale); }
  .hnow-card.hnow-peak .hnow-pill-peak { display: inline-block; }
  .hnow-card.hnow-next .hnow-pill-next { display: inline-block; }
  .hnow-latin { font-family: 'Lora', serif; font-style: italic; font-size: 11px; color: var(--ink-4); margin-bottom: 8px; }
  .hnow-detail { font-size: 12px; line-height: 1.5; color: var(--ink-2); }
  .hnow-foot { text-align: right; margin-top: 12px; }
  .hnow-foot a { font-size: 12px; color: var(--forest); text-decoration: underline; }
  .hnow-empty { font-size: 13px; color: var(--ink-3); background: #fff; border: 1px solid var(--border-2); border-radius: var(--radius); padding: 14px 16px; }
  @media(max-width:520px){ .hnow-grid { grid-template-columns: 1fr; } }
  .home-seasons-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
  @media(max-width:800px){ .home-seasons-grid { grid-template-columns: 1fr 1fr; } }
  @media(max-width:480px){ .home-seasons-grid { grid-template-columns: 1fr; } }
  .season-card { border-radius: var(--radius); padding: 18px 16px; border: 1px solid var(--border);
  transition: transform .2s, box-shadow .2s;
}
  .season-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
  .season-spring { background: #f0faf4; border-color: #a8dbb9; }
  .season-summer { background: #fffbee; border-color: #f0d080; }
  .season-fall   { background: #fdf3eb; border-color: #e8b87a; }
  .season-winter { background: #eef4fb; border-color: #a8c4e0; }
  .season-name { font-family: 'Playfair Display', serif; font-size: 1.1rem; font-weight: 400; color: var(--ink); margin-bottom: 2px; }
  .season-months { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-bottom: 12px; }
  .season-body { font-size: 12px; color: var(--ink-2); line-height: 1.65; margin-bottom: 12px; }
  .season-rivers { font-size: 11px; color: var(--ink-3); font-style: italic; }
  .home-about-card { display: grid; grid-template-columns: 1fr 280px; gap: 32px; background: #fff; border: 1px solid var(--border-2); border-radius: var(--radius); padding: 28px; }
  @media(max-width:720px){ .home-about-card { grid-template-columns: 1fr; } }
  .home-about-text p { font-size: 14px; color: var(--ink-2); line-height: 1.75; margin-bottom: 14px; }
  .home-about-text p:last-child { margin-bottom: 0; }
  .home-data-sources { border-left: 1px solid var(--border); padding-left: 24px; }
  @media(max-width:720px){ .home-data-sources { border-left: none; border-top: 1px solid var(--border); padding-left: 0; padding-top: 20px; } }
  .home-ds-label { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); margin-bottom: 12px; font-weight: 500; }
  .home-ds-link { display: block; font-size: 12px; color: var(--river-2); text-decoration: none; padding: 8px 0; border-bottom: 1px solid var(--border); line-height: 1.4; }
  .home-ds-link:last-child { border-bottom: none; }
  .home-ds-link:hover { text-decoration: underline; }
  .site-header { padding: 0; }
  .main { max-width: 1100px; margin: 0 auto; padding: 28px 32px; }
  .river-nav { display: flex; gap: 0; overflow-x: auto; padding: 0 32px; scrollbar-width: none; }
  .river-nav::-webkit-scrollbar { display: none; }
  .divider { height: 1px; background: var(--border); margin: 28px 0; }
  .flow-bar-bg { height: 4px; background: var(--parchment-3); border-radius: 2px; overflow: hidden; margin: 8px 0 5px; }
  .flow-bar-fill { height: 4px; border-radius: 2px; background: var(--forest); transition: width .5s ease; }

  .home-about-text p { font-size: 14px; color: var(--ink-2); line-height: 1.75; margin-bottom: 14px; }
  .home-about-text p:last-child { margin-bottom: 0; }

  
  .shops-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 28px; }
  .shop-card { background: #fff; border: 1px solid var(--border-2); border-radius: var(--radius); padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; transition: border-color .15s; text-decoration: none; color: inherit; }
  .shop-card:hover { border-color: var(--forest); }
  .shop-icon-wrap { width: 38px; height: 38px; border-radius: 8px; background: var(--forest-xpale); border: 1px solid rgba(27,67,50,.12); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
  .shop-info { flex: 1; min-width: 0; }
  .shop-name { font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.3; margin-bottom: 4px; }
  .shop-desc { font-size: 11px; color: var(--ink-3); line-height: 1.5; margin-bottom: 5px; }
  .shop-cta { font-size: 11px; color: var(--forest); font-weight: 500; }
  @media (max-width: 600px) { .shops-grid { grid-template-columns: 1fr; } }

  
  .plan-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 20px;
  }
  .plan-form-grid .plan-field.full { grid-column: span 2; }
  .plan-select, .plan-input, .plan-textarea {
    width: 100%; padding: 10px 13px;
    border: 1px solid var(--border-2); border-radius: 6px;
    font-size: 13px; font-family: 'Source Sans 3', sans-serif;
    color: var(--ink); background: #fff; transition: border-color .15s;
    appearance: none; -webkit-appearance: none;
  }
  .plan-select:focus, .plan-input:focus, .plan-textarea:focus {
    outline: none; border-color: var(--forest);
    box-shadow: 0 0 0 3px rgba(27,67,50,.1);
  }
  @media (max-width: 560px) {
    .plan-form-grid { grid-template-columns: 1fr; }
    .plan-form-grid .plan-field.full { grid-column: span 1; }
  }

  
  .plan-section {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
  }
  .plan-section:last-child { border-bottom: none; margin-bottom: 0; }
  .plan-section-label {
    font-size: 9px; font-weight: 700; letter-spacing: .2em;
    text-transform: uppercase; margin-bottom: 8px;
    display: flex; align-items: center; gap: 8px;
  }
  .plan-section-label::before {
    content: ''; display: inline-block;
    width: 10px; height: 10px; border-radius: 2px;
    background: var(--forest); flex-shrink: 0;
  }
  .plan-section-label.conditions::before  { background: #2471a3; }
  .plan-section-label.times::before       { background: var(--forest); }
  .plan-section-label.flybox::before      { background: var(--amber-2); }
  .plan-section-label.tactics::before     { background: #7d3c98; }
  .plan-section-label.lunch::before       { background: #e67e22; }
  .plan-section-label.dinner::before      { background: #c0392b; }
  .plan-section-label.hotels::before      { background: #1a5276; }
  .plan-section-label.tip::before         { background: var(--forest-3); }
  .plan-section p {
    font-size: 13px; line-height: 1.75;
    color: var(--ink-2); margin: 0;
  }

  
  .plan-email-row {
    display: flex; gap: 10px; margin-top: 24px;
    padding-top: 20px; border-top: 1px solid var(--border);
    align-items: center;
  }
  .plan-email-input {
    flex: 1; padding: 10px 13px;
    border: 1px solid var(--border-2); border-radius: 6px;
    font-size: 13px; font-family: 'Source Sans 3', sans-serif;
    color: var(--ink); background: #fff; transition: border-color .15s;
    min-width: 0;
  }
  .plan-email-input:focus {
    outline: none; border-color: var(--forest);
    box-shadow: 0 0 0 3px rgba(27,67,50,.1);
  }
  .plan-email-btn {
    background: var(--forest); color: #fff;
    border: none; border-radius: 6px;
    padding: 10px 18px; font-size: 12px; font-weight: 600;
    font-family: 'Source Sans 3', sans-serif;
    letter-spacing: .05em; text-transform: uppercase;
    cursor: pointer; transition: background .15s; white-space: nowrap;
  }
  .plan-email-btn:hover { background: var(--forest-2); }
  .plan-email-btn:disabled { opacity: .5; cursor: not-allowed; }
  .plan-email-status {
    font-size: 11px; margin-top: 8px;
    color: var(--ink-3); min-height: 16px;
  }
  @media (max-width: 520px) {
    .plan-email-row { flex-direction: column; }
    .plan-email-btn { width: 100%; text-align: center; }
  }

  
  .guides-section { margin-bottom: 40px; }
  .guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
  .guide-card {
    background: #fff; border: 1px solid var(--border-2);
    border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s;
  }
  .guide-card:hover { border-color: var(--forest); box-shadow: var(--shadow-md); }
  .guide-card-head {
    background: var(--forest); padding: 14px 16px;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  }
  .guide-card-name { font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 400; color: #fff; line-height: 1.3; }
  .guide-type-badge {
    font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 3px; flex-shrink: 0; margin-top: 2px;
    background: rgba(255,255,255,.15); color: rgba(255,255,255,.85);
  }
  .guide-type-badge.orvis { background: var(--amber); color: var(--forest); }
  .guide-card-body { padding: 14px 16px; }
  .guide-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
  .guide-location { font-size: 11px; color: var(--ink-3); }
  .guide-style { font-size: 11px; padding: 2px 8px; border-radius: 3px; background: var(--parchment-2); color: var(--ink-3); }
  .guide-bio { font-size: 12px; color: var(--ink-2); line-height: 1.6; margin-bottom: 12px; }
  .guide-section-head { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--forest); margin-bottom: 6px; margin-top: 10px; }
  .guide-specialties { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
  .guide-spec-tag { font-size: 10px; padding: 2px 7px; border-radius: 3px; background: var(--forest-xpale); color: var(--forest); }
  .guide-pricing-row { background: var(--parchment); border-radius: 6px; padding: 10px 12px; margin-bottom: 10px; }
  .guide-price-item { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 3px; }
  .guide-price-item:last-child { margin-bottom: 0; }
  .guide-price-label { color: var(--ink-3); }
  .guide-price-val { font-weight: 500; color: var(--ink); }
  .guide-includes-list { margin-bottom: 10px; }
  .guide-include-item { font-size: 11px; color: var(--ink-2); padding: 2px 0; display: flex; align-items: flex-start; gap: 6px; }
  .guide-include-item::before { content: '✓'; color: var(--forest); font-size: 10px; flex-shrink: 0; margin-top: 1px; }
  .guide-bring-list { margin-bottom: 12px; }
  .guide-bring-item { font-size: 11px; color: var(--ink-2); padding: 2px 0; display: flex; align-items: flex-start; gap: 6px; }
  .guide-bring-item::before { content: '•'; color: var(--amber-2); font-size: 12px; flex-shrink: 0; }
  .guide-booking-note { font-size: 11px; color: var(--forest); font-style: italic; background: var(--forest-xpale); border-radius: 4px; padding: 8px 10px; margin-bottom: 12px; line-height: 1.5; }
  .guide-cta-row { display: flex; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 12px; }
  .guide-cta-btn {
    font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    padding: 8px 14px; border-radius: 4px; cursor: pointer; text-decoration: none;
    font-family: 'Source Sans 3', sans-serif; transition: all .15s; display: inline-block;
  }
  .guide-cta-primary { background: var(--forest); color: #fff; border: none; }
  .guide-cta-primary:hover { background: var(--forest-2); }
  .guide-cta-secondary { background: none; color: var(--forest); border: 1px solid var(--forest); }
  .guide-cta-secondary:hover { background: var(--forest); color: #fff; }
  .guide-override-note { font-size: 11px; color: var(--ink-4); text-align: center; margin-top: 12px; font-style: italic; }
  @media (max-width: 700px) {
    .guide-grid { grid-template-columns: 1fr; }
  }

  
  .guide-expand-body { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 12px; }
  .guide-expand-btn {
    width: 100%; margin-top: 12px; padding: 8px 14px;
    background: var(--parchment-2); border: 1px solid var(--border-2);
    border-radius: 6px; font-size: 11px; font-weight: 500;
    color: var(--ink-2); cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: space-between;
    transition: all .15s;
  }
  .guide-expand-btn:hover { background: var(--parchment-3); border-color: var(--forest); color: var(--forest); }
  .guide-expand-btn-open { background: var(--forest-xpale); border-color: var(--forest); color: var(--forest); }
  .guide-expand-icon { font-size: 14px; font-weight: 400; line-height: 1; }

  
  .hatch-page { background: var(--parchment); min-height: 60vh; }
  .hatch-page-inner { max-width: 1200px; margin: 0 auto; padding: 40px 32px 64px; }
  .hatch-hero {
    background: var(--forest); border-radius: 12px; padding: 28px 32px 24px;
    margin-bottom: 28px; border-bottom: 4px solid var(--amber);
    position: relative; overflow: hidden;
  }
  .hatch-hero::before {
    content: ''; position: absolute; right: -60px; top: -40px;
    width: 280px; height: 280px; border-radius: 50%;
    background: rgba(255,255,255,.025); pointer-events: none;
  }
  .hatch-hero-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); margin-bottom: 10px; }
  .hatch-hero-title { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 400; color: #fff; line-height: 1.15; margin-bottom: 8px; }
  .hatch-hero-title em { font-style: italic; color: var(--amber); }
  .hatch-hero-sub { font-size: 13px; color: rgba(255,255,255,.58); line-height: 1.6; max-width: 520px; }
  .hatch-hero-stats { display: flex; gap: 28px; margin-top: 16px; }
  .hatch-hero-stat-val { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: #fff; }
  .hatch-hero-stat-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.4); }

  .hatch-full-table { background: #fff; border: 1px solid var(--border-2); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); }
  .hft-head { display: grid; grid-template-columns: 200px repeat(12,1fr); background: var(--forest); padding: 10px 16px; gap: 3px; }
  .hft-head-cell { font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); text-align: center; }
  .hft-head-cell:first-child { text-align: left; color: rgba(255,255,255,.7); }
  .hft-head-cell.hft-now { color: var(--amber); font-weight: 700; }
  .hft-head-cell.hft-now::after { content: ' ▼'; font-size: 7px; }
  .hft-row {
    display: grid; grid-template-columns: 200px repeat(12,1fr);
    padding: 0 16px; gap: 3px; border-bottom: 1px solid rgba(28,25,23,.06);
    align-items: center; cursor: pointer; transition: background .12s;
  }
  .hft-row:last-child { border-bottom: none; }
  .hft-row:hover { background: var(--parchment); }
  .hft-row.hft-expanded { background: var(--parchment); }
  .hft-species { padding: 10px 0; font-size: 12px; color: var(--ink-2); line-height: 1.3; }
  .hft-species strong { display: block; font-size: 13px; font-weight: 500; color: var(--ink); }
  .hft-species em { font-size: 10px; font-style: italic; color: var(--ink-4); }
  .hft-now-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; margin-left: 6px; vertical-align: middle; animation: livepulse 2.5s ease-in-out infinite; }
  .hft-cell { display: flex; align-items: center; justify-content: center; padding: 9px 0; }
  .hft-bar { display: block; width: 100%; height: 14px; border-radius: 3px; }
  .hft-bar-now { outline: 2px solid var(--amber); outline-offset: 1px; }
  .hft-bar-peak-now { outline: 3px solid var(--amber); outline-offset: 1px; }
  .hft-col-now { background: rgba(212,168,67,.05); }

  .hft-expand { display: none; padding: 0 16px 16px; border-bottom: 1px solid rgba(28,25,23,.06); }
  .hft-expand.open { display: block; }
  .hft-expand-inner { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 10px; margin-top: 10px; }
  .hft-expand-card { background: var(--parchment-2); border-radius: 8px; padding: 10px 12px; }
  .hft-expand-label { font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
  .hft-expand-val { font-size: 12px; color: var(--ink); line-height: 1.4; }
  .hft-expand-val em { font-style: italic; }
  .hft-expand-notes { font-size: 12px; color: var(--ink-2); line-height: 1.65; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
  .hft-river-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
  .hft-river-chip {
    font-size: 10px; padding: 3px 9px; border-radius: 3px;
    background: rgba(27,67,50,.08); color: var(--forest);
    border: 1px solid rgba(27,67,50,.15); cursor: pointer;
    transition: all .12s; text-decoration: none; display: inline-block;
  }
  .hft-river-chip:hover { background: var(--forest); color: var(--amber); }

  .hft-legend { display: flex; align-items: center; gap: 16px; padding: 10px 18px; background: var(--parchment-2); border-top: 1px solid var(--border); flex-wrap: wrap; }
  .hft-legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-3); }
  .hft-legend-bar { width: 24px; height: 10px; border-radius: 2px; }
  .hft-legend-note { font-size: 11px; color: var(--ink-4); margin-left: auto; font-style: italic; }

  @media (max-width: 800px) {
    .hft-head { grid-template-columns: 120px repeat(12,1fr); padding: 8px 10px; }
    .hft-row  { grid-template-columns: 120px repeat(12,1fr); padding: 0 10px; }
    .hft-head-cell { font-size: 8px; }
    .hft-species strong { font-size: 11px; }
    .hft-species em { display: none; }
    .hatch-hero-title { font-size: 1.4rem; }
  }

  
  .events-filter-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
  .events-filter-pill {
    background: none; border: 1px solid var(--border-2); padding: 5px 14px;
    border-radius: 20px; font-size: 11px; cursor: pointer; font-family: inherit;
    color: var(--ink-3); transition: all .15s;
  }
  .events-filter-pill.active { background: var(--forest); color: var(--amber); border-color: var(--forest); font-weight: 500; }
  .events-filter-pill:hover:not(.active) { border-color: var(--forest); color: var(--forest); }
  .events-month-group { margin-bottom: 32px; }
  .events-month-label {
    font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-3); padding-bottom: 10px; border-bottom: 1px solid var(--border);
    margin-bottom: 0;
  }
  .event-card {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 16px 0; border-bottom: 1px solid var(--border);
  }
  .event-card:last-child { border-bottom: none; }
  .event-date-block {
    flex-shrink: 0; background: var(--forest); color: #fff;
    border-radius: 8px; padding: 7px 10px; text-align: center; min-width: 46px;
  }
  .event-date-mon { font-size: 8px; text-transform: uppercase; letter-spacing: .1em; opacity: .65; }
  .event-date-day { font-family: 'Playfair Display', serif; font-size: 1.4rem; line-height: 1; }
  .event-card-body { flex: 1; min-width: 0; }
  .event-card-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 5px; }
  .event-type-badge { font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; display: inline-block; }
  .etype-conservation { background: var(--forest-pale); color: var(--forest); }
  .etype-clinic       { background: #dbeafe; color: #1e40af; }
  .etype-hatch_trip   { background: var(--amber-pale); color: var(--amber-3); }
  .etype-guided_event { background: #f3e8ff; color: #6b21a8; }
  .etype-general      { background: var(--parchment-3); color: var(--ink-3); }
  .event-featured-badge { font-size: 9px; font-weight: 700; background: var(--amber); color: var(--forest); padding: 2px 7px; border-radius: 3px; }
  .event-river-chip { font-size: 9px; padding: 2px 7px; border-radius: 3px; background: rgba(27,67,50,.08); color: var(--forest); border: 1px solid rgba(27,67,50,.15); cursor: pointer; text-decoration: none; display: inline-block; }
  .event-river-chip:hover { background: var(--forest); color: var(--amber); }
  .event-card-title { font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 4px; line-height: 1.35; }
  .event-card-meta { font-size: 11px; color: var(--ink-3); margin-bottom: 6px; }
  .event-card-desc { font-size: 12px; color: var(--ink-2); line-height: 1.65; }
  .event-card-cta { margin-top: 8px; }
  .event-card-link { font-size: 11px; color: var(--forest); text-decoration: none; font-weight: 500; }
  .event-card-link:hover { text-decoration: underline; }

  
  .home-event-strip-card {
    background: #fff; border: 1px solid var(--border-2); border-radius: var(--radius);
    padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start;
    transition: border-color .15s; cursor: pointer;
  }
  .home-event-strip-card:hover { border-color: var(--forest); }
  .home-event-strip-card.featured { border-color: var(--amber); background: var(--amber-xpale); }
  .home-events-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 10px; }

  
  .river-events-snippet { margin-bottom: 28px; }
  .river-event-row {
    display: flex; gap: 12px; align-items: center;
    padding: 9px 0; border-bottom: 1px solid var(--border);
  }
  .river-event-row:last-child { border-bottom: none; }
  .rer-date { flex-shrink: 0; font-size: 11px; font-weight: 500; color: var(--ink-3); min-width: 44px; }
  .rer-body { flex: 1; min-width: 0; }
  .rer-title { font-size: 12px; font-weight: 500; color: var(--ink); margin-bottom: 2px; }
  .rer-meta { font-size: 10px; color: var(--ink-3); }
  .rer-link { color: var(--forest); text-decoration: none; font-weight: 500; }

  
  .gear-section { margin-bottom: 32px; }
  .gear-river-note {
    font-size: 13px; color: var(--ink-2); line-height: 1.7;
    background: var(--parchment-2); border-radius: 8px;
    padding: 12px 16px; margin-bottom: 20px;
    border-left: 3px solid var(--forest);
  }
  .gear-table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid var(--border-2); box-shadow: var(--shadow-sm); margin-bottom: 16px; }
  .gear-table { width: 100%; border-collapse: collapse; min-width: 640px; }
  .gear-table th {
    background: var(--forest); color: #fff; padding: 10px 14px;
    font-size: 11px; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; text-align: left; white-space: nowrap;
  }
  .gear-table th.primary-col { background: var(--amber-2); color: var(--forest); }
  .gear-table th:first-child { background: var(--parchment-3); color: var(--ink-3); font-weight: 500; min-width: 120px; }
  .gear-table td {
    padding: 9px 14px; font-size: 12px; color: var(--ink-2);
    border-bottom: 1px solid var(--border); vertical-align: top;
    line-height: 1.5;
  }
  .gear-table td:first-child {
    font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-3); background: var(--parchment); white-space: nowrap;
  }
  .gear-table tr:last-child td { border-bottom: none; }
  .gear-table tr:hover td { background: var(--parchment); }
  .gear-table tr:hover td:first-child { background: var(--parchment-2); }
  .gear-table td.primary-col { background: rgba(212,168,67,.04); }
  .gear-primary-badge {
    display: inline-block; font-size: 8px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; background: var(--amber); color: var(--forest);
    padding: 1px 6px; border-radius: 3px; margin-left: 6px; vertical-align: middle;
  }
  .gear-orvis-link {
    display: inline-block; font-size: 10px; color: var(--forest);
    text-decoration: none; margin-top: 3px; font-weight: 500;
  }
  .gear-orvis-link:hover { text-decoration: underline; }
  .gear-orvis-link::before { content: '🛒 '; font-size: 9px; }
  .gear-notes-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
  .gear-note-card {
    background: #fff; border: 1px solid var(--border-2); border-radius: 8px;
    padding: 12px 14px; font-size: 11px; color: var(--ink-2); line-height: 1.6;
  }
  .gear-note-card.primary { border-color: var(--amber); background: var(--amber-xpale); }
  .gear-note-label {
    font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-3); margin-bottom: 5px;
  }
  .gear-note-card.primary .gear-note-label { color: var(--amber-3); }
  .gear-extras-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
  .gear-extra-tag { font-size: 10px; padding: 2px 7px; border-radius: 3px; background: var(--parchment-2); color: var(--ink-3); }
  .gear-affiliate-note { font-size: 10px; color: var(--ink-4); text-align: right; margin-top: 6px; font-style: italic; }
  @media (max-width: 800px) {
    .gear-notes-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 480px) {
    .gear-notes-grid { grid-template-columns: 1fr; }
  }


  /* ── HOME RIVER CONDITIONS ── */
  .home-conditions-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
  .home-cond-card {
    background: #fff; border: 1px solid var(--border-2); border-radius: var(--radius);
    padding: 16px 18px; cursor: pointer; transition: border-color .15s, box-shadow .15s;
    box-shadow: var(--shadow-sm);
  }
  .home-cond-card:hover { border-color: var(--forest); box-shadow: var(--shadow-md); }
  .home-cond-river {
    font-family: 'Playfair Display', serif; font-size: 1.05rem; font-weight: 400;
    color: var(--ink); margin-bottom: 12px; line-height: 1.3;
  }
  .home-cond-river span { display: block; font-size: 11px; font-family: 'Source Sans 3', sans-serif; color: var(--ink-3); font-weight: 300; margin-top: 2px; }
  .home-cond-metrics { display: flex; gap: 0; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
  .home-cond-metric { flex: 1; padding: 8px 6px; text-align: center; border-right: 1px solid var(--border); }
  .home-cond-metric:last-child { border-right: none; }
  .home-cond-val { font-family: 'Playfair Display', serif; font-size: 1.1rem; color: var(--ink); line-height: 1; margin-bottom: 3px; }
  .home-cond-lbl { font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); }
  .home-cond-report { font-size: 11px; color: var(--ink-2); line-height: 1.55; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 34px; }
  .home-cond-cta { font-size: 11px; color: var(--forest); font-weight: 500; }
  @media (max-width: 700px) { .home-conditions-grid { grid-template-columns: 1fr; } }


  /* ── HOME NEWSLETTER BLOCK ── */
  .home-newsletter-block { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; background: #fff; border: 1px solid var(--border-2); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
  .hnl-left { padding: 28px 28px 28px; border-right: 1px solid var(--border); }
  .hnl-logo { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 400; color: var(--ink); margin-bottom: 10px; }
  .hnl-logo em { font-style: italic; color: var(--forest); }
  .hnl-desc { font-size: 13px; color: var(--ink-3); line-height: 1.65; margin-bottom: 18px; }
  .hnl-latest { background: var(--parchment-2); border-radius: 7px; padding: 12px 14px; margin-bottom: 18px; }
  .hnl-latest-label { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 5px; }
  .hnl-latest-title { font-family: 'Playfair Display', serif; font-size: 0.95rem; font-weight: 400; color: var(--ink); line-height: 1.3; margin-bottom: 3px; }
  .hnl-latest-date { font-size: 11px; color: var(--ink-4); }
  .hnl-actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .hnl-right { padding: 24px; background: var(--parchment); overflow: hidden; }
  .hnl-preview-loading { font-size: 12px; color: var(--ink-4); font-style: italic; }
  .hnl-preview-content { font-size: 12px; color: var(--ink-2); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 12; -webkit-box-orient: vertical; overflow: hidden; }
  .hnl-preview-content h2 { font-family: 'Playfair Display', serif; font-size: 0.95rem; color: var(--forest); margin: 12px 0 6px; font-weight: 400; }
  .hnl-preview-content h2:first-child { margin-top: 0; }
  .hnl-preview-content p { margin-bottom: 8px; }
  .hnl-preview-content strong { font-weight: 600; color: var(--ink); }
  .hnl-read-more { font-size: 11px; color: var(--forest); font-weight: 500; margin-top: 10px; display: block; cursor: pointer; background: none; border: none; font-family: inherit; padding: 0; text-align: left; }
  @media (max-width: 640px) { .home-newsletter-block { grid-template-columns: 1fr; } .hnl-left { border-right: none; border-bottom: 1px solid var(--border); } }


  /* ═══════════════════════════════════════════
     MFF GLOBAL NAV — v2
  ═══════════════════════════════════════════ */
  .mff-nav-v2 {
    background: var(--forest);
    border-bottom: 3px solid var(--amber);
    position: sticky; top: 0; z-index: 1000;
    font-family: 'Source Sans 3', sans-serif;
  }
  .mff-nav-v2-inner {
    max-width: 1100px; margin: 0 auto;
    padding: 0 24px;
    display: flex; align-items: center;
    height: 56px; gap: 0;
  }
  /* Logo */
  .mff-nav-logo-v2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem; font-weight: 400;
    color: #fff; text-decoration: none;
    white-space: nowrap; margin-right: 32px;
    flex-shrink: 0;
  }
  .mff-nav-logo-v2 em { font-style: italic; color: var(--amber); }
  .mff-nav-logo-v2:hover { text-decoration: none; }

  /* Nav items */
  .mff-nav-items {
    display: flex; align-items: stretch;
    flex: 1; gap: 0; height: 100%;
  }
  .mff-nav-item {
    position: relative; display: flex; align-items: center;
  }
  .mff-nav-link {
    display: flex; align-items: center; gap: 5px;
    padding: 0 14px; height: 100%;
    font-size: 13px; font-weight: 500;
    color: rgba(255,255,255,.75);
    text-decoration: none; cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -3px;
    transition: color .15s, border-color .15s;
    white-space: nowrap; user-select: none;
    background: none; border-top: none;
    border-left: none; border-right: none;
    font-family: inherit;
  }
  .mff-nav-link:hover, .mff-nav-link:focus { color: #fff; text-decoration: none; outline: none; }
  .mff-nav-link.active { color: #fff; border-bottom-color: var(--amber); }
  .mff-nav-chevron { font-size: 9px; opacity: .6; transition: transform .2s; }
  .mff-nav-item.open .mff-nav-chevron { transform: rotate(180deg); }

  /* Dropdown */
  .mff-nav-dropdown {
    position: absolute; top: calc(100% + 3px); left: 0;
    background: #fff; border: 1px solid var(--border-2);
    border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.18);
    padding: 8px; min-width: 220px; z-index: 300;
    opacity: 0; transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .18s, transform .18s;
  }
  .mff-nav-item.open .mff-nav-dropdown {
    opacity: 1; transform: translateY(0); pointer-events: auto;
  }
  .mff-nav-dropdown-section { margin-bottom: 4px; }
  .mff-nav-dropdown-label {
    font-size: 9px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-4);
    padding: 6px 10px 4px; display: block;
  }
  .mff-nav-dropdown-link {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: 6px;
    font-size: 12px; font-weight: 400; color: var(--ink-2);
    text-decoration: none; transition: background .12s, color .12s;
    white-space: nowrap;
  }
  .mff-nav-dropdown-link:hover { background: var(--parchment-2); color: var(--forest); text-decoration: none; }
  .mff-nav-dropdown-link .ddi { font-size: 13px; flex-shrink: 0; }
  .mff-nav-dropdown-divider { border: none; border-top: 1px solid var(--border); margin: 4px 0; }

  /* Rivers dropdown — two columns */
  .mff-nav-dropdown.rivers-dd { min-width: 380px; }
  .mff-nav-dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }

  /* Search */
  .mff-nav-search-wrap { margin-left: auto; flex-shrink: 0; position: relative; }
  .mff-nav-search-btn {
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
    border-radius: 6px; padding: 5px 12px 5px 32px;
    font-size: 12px; color: rgba(255,255,255,.65);
    cursor: text; white-space: nowrap;
    font-family: inherit; transition: all .15s;
    position: relative;
  }
  .mff-nav-search-btn:hover { background: rgba(255,255,255,.18); color: #fff; }
  .mff-nav-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; }

  /* Search modal */
  .mff-search-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.55);
    z-index: 500; display: flex; align-items: flex-start;
    justify-content: center; padding-top: 80px;
    opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  .mff-search-overlay.open { opacity: 1; pointer-events: auto; }
  .mff-search-modal {
    background: #fff; border-radius: 12px; width: 100%; max-width: 560px;
    box-shadow: 0 20px 60px rgba(0,0,0,.3); overflow: hidden;
    transform: translateY(-12px); transition: transform .2s;
  }
  .mff-search-overlay.open .mff-search-modal { transform: translateY(0); }
  .mff-search-input-wrap {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px; border-bottom: 1px solid var(--border);
  }
  .mff-search-input-icon { font-size: 16px; color: var(--ink-4); flex-shrink: 0; }
  .mff-search-input {
    flex: 1; border: none; outline: none;
    font-size: 16px; font-family: inherit; color: var(--ink);
    background: transparent;
  }
  .mff-search-input::placeholder { color: var(--ink-4); }
  .mff-search-close {
    background: none; border: none; cursor: pointer;
    font-size: 18px; color: var(--ink-4); padding: 2px 4px;
    border-radius: 4px; transition: color .12s;
    font-family: inherit;
  }
  .mff-search-close:hover { color: var(--ink); }
  .mff-search-results { max-height: 420px; overflow-y: auto; padding: 8px; }
  .mff-search-result {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px; border-radius: 8px; cursor: pointer;
    text-decoration: none; transition: background .12s;
  }
  .mff-search-result:hover { background: var(--parchment); text-decoration: none; }
  .mff-search-result-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
  .mff-search-result-title { font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 2px; }
  .mff-search-result-desc { font-size: 11px; color: var(--ink-3); line-height: 1.4; }
  .mff-search-result-section { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--amber-2); margin-bottom: 2px; }
  .mff-search-empty { padding: 32px; text-align: center; font-size: 13px; color: var(--ink-4); }
  .mff-search-loading { padding: 24px; text-align: center; font-size: 12px; color: var(--ink-4); }

  /* Breadcrumb */
  .mff-breadcrumb {
    background: var(--parchment-2); border-bottom: 1px solid var(--border);
    padding: 8px 24px; font-size: 11px; color: var(--ink-4);
  }
  .mff-breadcrumb-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .mff-breadcrumb a { color: var(--ink-3); text-decoration: none; }
  .mff-breadcrumb a:hover { color: var(--forest); text-decoration: underline; }
  .mff-breadcrumb-sep { color: var(--ink-4); }
  .mff-breadcrumb-current { color: var(--ink-2); font-weight: 500; }

  /* Mobile */
  .mff-nav-mobile-btn {
    display: none; margin-left: auto;
    background: none; border: none; color: #fff;
    font-size: 22px; cursor: pointer; padding: 4px;
  }
  .mff-nav-mobile-menu {
    display: none; background: var(--forest);
    border-top: 1px solid rgba(255,255,255,.1);
  }
  .mff-nav-mobile-link {
    display: block; padding: 12px 24px;
    font-size: 14px; font-weight: 500; color: rgba(255,255,255,.85);
    text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .mff-nav-mobile-link:hover { color: #fff; text-decoration: none; background: rgba(255,255,255,.05); }
  .mff-nav-mobile-section { font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.4); padding: 10px 24px 4px; }
  @media (max-width: 768px) {
    .mff-nav-items, .mff-nav-search-wrap { display: none; }
    .mff-nav-mobile-btn { display: block; }
    .mff-nav-mobile-menu.open { display: block; }
    .mff-breadcrumb { padding: 7px 16px; }
    .mff-nav-v2-inner { padding: 0 16px; }
  }


  /* ── MFF CUSTOM ICONS ── */
  .mff-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }
  .mff-icon-sm { width: 18px; height: 18px; }
  .mff-icon-md { width: 24px; height: 24px; }
  .mff-icon-lg { width: 36px; height: 36px; }
  .mff-icon-xl { width: 48px; height: 48px; }
  .gear-card-icon .mff-icon { width: 32px; height: 32px; }
  .ddi .mff-icon { width: 16px; height: 16px; }
  .mff-nav-dropdown-link .mff-icon { width: 16px; height: 16px; }
  .feature-card .mff-icon, .fc-icon .mff-icon { width: 28px; height: 28px; }


  /* ══════════════════════════════════════════════════════════════════════
     ADDED IN THE MULTI-PAGE REBUILD
     Styles for elements that did not exist when the site was a single page:
     breadcrumbs, related-guide lists, prev/next river navigation, and the
     handful of buttons/divs that became real <a> links.
     ══════════════════════════════════════════════════════════════════════ */

  /* Buttons and cards that are now anchors — keep the original look. */
  a.home-cta-primary { text-decoration: none; display: inline-block; }
  a.home-cond-cta    { text-decoration: none; display: inline-block; }
  a.home-cond-cta:hover { color: var(--forest-2); }
  a.home-river-card  { text-decoration: none; color: inherit; display: block; }

  /* ── Breadcrumb ── */
  .mff-breadcrumb {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    font-size: 11px; letter-spacing: .04em; color: var(--ink-3);
    padding: 14px 2px 12px; font-family: 'Source Sans 3', sans-serif;
  }
  .mff-breadcrumb a { color: var(--forest-2); text-decoration: none; }
  .mff-breadcrumb a:hover { text-decoration: underline; }
  .mff-breadcrumb [aria-current="page"] { color: var(--ink-3); }
  .mff-breadcrumb-sep { color: var(--parchment-4); }

  /* ── Related guides ── */
  .river-related-list { margin: 0; padding-left: 18px; }
  .river-related-list li { margin: 5px 0; font-size: 14px; line-height: 1.5; }
  .river-related-list a { color: var(--forest-2); text-decoration: none; border-bottom: 1px solid var(--parchment-4); }
  .river-related-list a:hover { border-bottom-color: var(--forest-2); }

  /* ── Prev / next river ── */
  .river-prevnext {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px;
    align-items: center; margin: 28px 0 8px;
    padding-top: 18px; border-top: 1px solid var(--border);
  }
  .river-prevnext-link {
    display: flex; flex-direction: column; gap: 3px; text-decoration: none;
    padding: 10px 14px; border: 1px solid var(--border-2); border-radius: var(--radius);
    background: #fff; transition: border-color .15s;
  }
  .river-prevnext-link:hover { border-color: var(--forest-3); }
  .river-prevnext-link.next { text-align: right; }
  .rpn-dir  { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
  .rpn-name { font-size: 14px; color: var(--forest); font-weight: 600; }
  .river-prevnext-all {
    font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
    color: var(--forest-2); text-decoration: none; white-space: nowrap; padding: 0 4px;
  }
  .river-prevnext-all:hover { text-decoration: underline; }
  @media (max-width: 700px) {
    .river-prevnext { grid-template-columns: 1fr; }
    .river-prevnext-link.next { text-align: left; }
  }

  /* ==========================================================================
     SALMON & STEELHEAD RUN TRACKER  —  /michigan-salmon-run/
     Rendered by build/lib/render-run.mjs.

     Status colour is doing real work here, so it is chosen for meaning rather
     than for variety: the greens mean fish are in, amber means waiting, rust
     means the run is going out, grey means we do not know. Nothing on this page
     uses colour as its only signal — every pill carries its own word, every dot
     on the map carries a <title>, and the confidence meter carries screen-reader
     text — because a page whose whole message is "green means go" is unusable
     for one man in twelve.
     ========================================================================== */

  .mff-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  .mff-run-page { --run-peak: #14532d; --run-building: var(--forest-3);
                  --run-first: #0e7490; --run-staging: var(--amber-3);
                  --run-notyet: var(--ink-3); --run-tailing: var(--rust);
                  --run-over: var(--ink-4); --run-unknown: var(--ink-4); }

  /* ── status pills ──────────────────────────────────────────────────────── */
  .mff-run-pill {
    display: inline-block; font-size: 11px; font-weight: 600;
    letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
    padding: 4px 9px; border-radius: 999px; color: #fff; line-height: 1.3;
  }
  .mff-run-pill.is-sm { font-size: 10px; padding: 3px 8px; }
  .mff-run-peak     { background: var(--run-peak); }
  .mff-run-building { background: var(--run-building); }
  .mff-run-first    { background: var(--run-first); }
  .mff-run-staging  { background: var(--run-staging); }
  .mff-run-notyet   { background: var(--run-notyet); }
  .mff-run-tailing  { background: var(--run-tailing); }
  .mff-run-over     { background: var(--run-over); }
  .mff-run-unknown  { background: transparent; color: var(--ink-3);
                      border: 1px dashed var(--border-2); }

  /* ── confidence meter ───────────────────────────────────────────────────── */
  .mff-run-conf { display: inline-flex; gap: 2px; vertical-align: middle; margin-left: 4px; }
  .mff-run-conf i { width: 3px; height: 9px; border-radius: 1px; background: var(--ink-5); display: block; }
  .mff-run-conf-high i { background: var(--forest-2); }
  .mff-run-conf-medium i:nth-child(-n+2) { background: var(--amber-3); }
  .mff-run-conf-low  i:nth-child(1) { background: var(--ink-3); }

  /* ── header strip ───────────────────────────────────────────────────────── */
  .mff-run-updated { font-size: 12px; color: var(--ink-3); margin: 14px 0 22px; }
  .mff-run-stale {
    background: var(--amber-xpale); border: 1px solid var(--amber-2);
    border-left: 3px solid var(--amber-3); border-radius: var(--radius-sm);
    padding: 12px 16px; font-size: 13px; color: var(--ink-2); margin: 18px 0 0;
  }

  /* ── the map ────────────────────────────────────────────────────────────── */
  .mff-run-map { margin: 0 0 8px; }
  .mff-run-map-svg {
    width: 100%; height: auto; max-height: 620px; display: block;
    background: var(--river-light); border-radius: var(--radius);
    border: 1px solid var(--border);
  }
  .mff-run-land polygon { fill: var(--parchment-2); stroke: var(--forest-2); stroke-width: 1.5; stroke-linejoin: round; }
  .mff-run-dot circle:first-child { fill: currentColor; opacity: .28; }
  .mff-run-dot .mff-run-dot-core  { fill: currentColor; stroke: #fff; stroke-width: 1.5; }
  .mff-run-dot { cursor: pointer; }
  .mff-run-dot:hover circle:first-child { opacity: .5; }
  .mff-run-dot:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
  .mff-run-dots .mff-run-peak     { color: var(--run-peak); }
  .mff-run-dots .mff-run-building { color: var(--run-building); }
  .mff-run-dots .mff-run-first    { color: var(--run-first); }
  .mff-run-dots .mff-run-staging  { color: var(--run-staging); }
  .mff-run-dots .mff-run-notyet   { color: var(--run-notyet); }
  .mff-run-dots .mff-run-tailing  { color: var(--run-tailing); }
  .mff-run-dots .mff-run-over     { color: var(--run-over); }
  .mff-run-dots .mff-run-unknown  { color: var(--run-unknown); }
  .mff-run-maplabel {
    font-family: 'Source Sans 3', sans-serif; font-size: 12px; font-weight: 500;
    fill: var(--ink-2); paint-order: stroke; stroke: var(--parchment-2);
    stroke-width: 3px; stroke-linejoin: round;
  }
  .mff-run-legend {
    display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px;
    font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em;
  }
  .mff-run-legend-item { display: inline-flex; align-items: center; gap: 6px; }
  .mff-run-legend-item i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
  .mff-run-legend-item i.mff-run-unknown { border: 1px dashed var(--border-2); background: transparent; }

  /* ── the table ──────────────────────────────────────────────────────────── */
  .mff-run-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
  .mff-run-tablewrap {
    overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius);
    background: #fff; box-shadow: var(--shadow-sm); margin-bottom: 28px;
  }
  .mff-run-table { border-collapse: collapse; width: 100%; min-width: 720px; font-size: 13px; }
  .mff-run-table thead th {
    text-align: left; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-3); font-weight: 600; padding: 11px 14px; white-space: nowrap;
    background: var(--parchment); border-bottom: 1.5px solid var(--parchment-4);
  }
  .mff-run-table tbody th,
  .mff-run-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border-3); vertical-align: middle; }
  .mff-run-table tbody tr:last-child th,
  .mff-run-table tbody tr:last-child td { border-bottom: none; }
  .mff-run-table tbody tr:hover { background: var(--parchment); }
  .mff-run-table tbody th {
    text-align: left; font-weight: 600; color: var(--ink); white-space: nowrap;
  }
  .mff-run-table tbody th a { color: var(--forest); text-decoration: none; }
  .mff-run-table tbody th a:hover { text-decoration: underline; }
  .mff-run-table tbody th small { display: block; font-weight: 400; color: var(--ink-3); font-size: 11px; }
  .mff-run-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
  .mff-run-next { color: var(--ink-3); font-size: 12px; }
  .mff-run-table tr[hidden] { display: none; }

  .mff-run-none { color: var(--ink-4); font-style: italic; font-size: 12px; }
  .mff-run-temp { font-weight: 600; }
  .mff-run-temp.is-warm  { color: var(--rust); }
  .mff-run-temp.is-prime { color: var(--forest-2); }
  .mff-run-temp.is-cold  { color: var(--river-2); }
  .mff-run-flow small { color: var(--ink-3); font-weight: 400; }
  .mff-run-trend { font-style: normal; margin-left: 5px; font-weight: 700; }
  .mff-run-trend.t-rising  { color: var(--forest-2); }
  .mff-run-trend.t-falling { color: var(--rust); }
  .mff-run-trend.t-steady, .mff-run-trend.t-unknown { color: var(--ink-4); }

  .mff-run-sp {
    display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .04em;
    padding: 2px 6px; border-radius: var(--radius-sm); margin-right: 4px;
    background: var(--parchment-2); color: var(--ink-2); border: 1px solid var(--border-3);
  }
  .mff-run-sp.sp-king   { background: #fde8d8; color: #9a3412; border-color: #f0c9ae; }
  .mff-run-sp.sp-coho   { background: var(--forest-xpale); color: var(--forest); border-color: #bfe3ca; }
  .mff-run-sp.sp-chrome { background: var(--river-light); color: #075985; border-color: #a9dcea; }
  .mff-run-sp.sp-brown  { background: var(--parchment-3); color: #6b4423; border-color: var(--parchment-4); }
  .mff-run-sp.sp-pink     { background: #fce7f0; color: #9d2c5c; border-color: #f2c2d5; }
  .mff-run-sp.sp-atlantic { background: #e8eefb; color: #33468c; border-color: #c2d0ee; }

  /* ── river cards ────────────────────────────────────────────────────────── */
  .mff-run-card {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 22px 24px; margin-bottom: 18px; box-shadow: var(--shadow-sm);
    scroll-margin-top: 80px;
  }
  .mff-run-card-head {
    display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-start;
    justify-content: space-between; padding-bottom: 14px; margin-bottom: 14px;
    border-bottom: 1px solid var(--border-3);
  }
  .mff-run-card-head h3 {
    font-family: 'Playfair Display', serif; font-size: 1.35rem; font-weight: 500;
    color: var(--forest); margin: 0; line-height: 1.2;
  }
  .mff-run-card-meta { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
  .mff-run-card-status { display: flex; align-items: center; gap: 4px; }
  .mff-run-verdict-line {
    font-family: 'Lora', serif; font-size: 15px; line-height: 1.6;
    color: var(--ink-2); margin: 0 0 16px;
  }

  .mff-run-readings { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
  .mff-run-reading {
    background: var(--parchment); border: 1px solid var(--border-3);
    border-radius: var(--radius-sm); padding: 8px 12px; min-width: 118px;
  }
  .mff-run-reading > span {
    display: block; font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
    color: var(--ink-3); margin-bottom: 3px;
  }
  .mff-run-gaugenote {
    font-size: 12px; line-height: 1.55; color: var(--ink-3);
    border-left: 2px solid var(--amber-2); padding-left: 12px; margin: 0 0 14px;
  }

  /* Rain forecast. Deliberately quieter than the status pill and the readings
     above it: this is the one number on the card that is a prediction rather
     than a measurement, and it should not out-shout the things we actually
     know. The band only changes the rule colour — never the type size — so a
     soaking rain reads as more emphatic without reading as an alarm. */
  .mff-run-rain {
    font-size: 12.5px; line-height: 1.55; color: var(--ink-2);
    border-left: 2px solid var(--border-2); padding-left: 12px; margin: 0 0 14px;
  }
  .mff-run-rain.rain-light   { border-left-color: var(--forest-3, var(--border-2)); }
  .mff-run-rain.rain-wetting { border-left-color: var(--forest-2); }
  .mff-run-rain.rain-soaking { border-left-color: var(--forest-1, var(--forest-2)); }
  .mff-run-rain.rain-dry     { color: var(--ink-3); }
  .mff-run-rain-k {
    display: inline-block; font-size: 10.5px; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3);
    margin-right: 6px;
  }
  .mff-run-rain-caveat { color: var(--ink-3); }
  /* Stamped because the staleness guard runs at build time and cannot protect a
     page that has been sitting on the server for three days. */
  .mff-run-rain-stamp { display: block; margin-top: 3px; font-size: 11px; color: var(--ink-3); }

  .mff-run-working { margin: 0 0 16px; }
  .mff-run-working > summary {
    cursor: pointer; font-size: 12px; font-weight: 600; color: var(--forest-2);
    letter-spacing: .03em; padding: 4px 0;
  }
  .mff-run-working > summary:hover { text-decoration: underline; }
  .mff-run-evidence { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 1px;
                      background: var(--border-3); border: 1px solid var(--border-3);
                      border-radius: var(--radius-sm); overflow: hidden; }
  .mff-run-evidence li {
    background: #fff; padding: 9px 12px; display: grid; gap: 2px 12px;
    grid-template-columns: 96px 110px 1fr; align-items: baseline; font-size: 12px;
  }
  .mff-run-ev-k { color: var(--ink-3); text-transform: uppercase; letter-spacing: .07em; font-size: 10px; }
  .mff-run-ev-v { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
  .mff-run-ev-d { color: var(--ink-3); }

  .mff-run-species-block { display: grid; gap: 10px; margin-bottom: 18px; }
  .mff-run-sprow {
    display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
    padding: 10px 12px; background: var(--parchment); border-radius: var(--radius-sm);
  }
  .mff-run-sprow-name { font-size: 13px; font-weight: 500; color: var(--ink); }
  .mff-run-sprow-status { text-align: right; }
  .mff-run-sprow-window { grid-column: 1 / -1; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
  .mff-run-sprow-note { grid-column: 1 / -1; font-size: 12px; color: var(--ink-2); line-height: 1.5; margin: 4px 0 0; }

  .mff-run-facts { display: grid; gap: 12px; margin: 0 0 16px; }
  .mff-run-fact dt {
    font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
    color: var(--ink-3); font-weight: 600; margin-bottom: 3px;
  }
  .mff-run-fact dd { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
  /* Its own line. Inline, the wade/float note read as a continuation of the
     access sentence — "…Sixth Street in Manistee. Both. The dam pool wades." */
  .mff-run-fact-sub { display: block; margin-top: 3px; color: var(--ink-3); font-style: italic; font-size: 12.5px; }

  .mff-run-weir {
    background: var(--forest-xpale); border: 1px solid #bfe3ca;
    border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 14px;
  }
  .mff-run-weir-lab {
    font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
    color: var(--forest); font-weight: 600; display: block; margin-bottom: 4px;
  }
  .mff-run-weir p { font-size: 13px; line-height: 1.6; color: var(--ink-2); margin: 0; }

  .mff-run-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
  .mff-run-links a { font-size: 13px; color: var(--forest-2); }

  /* ── Weir returns ───────────────────────────────────────────────────────
     The harvested/passed distinction is load-bearing, not decorative: chinook
     are taken at the weir and never pass upstream. The dot colours carry that
     into the table where the prose can't reach, and every dot has a title
     attribute because colour alone is not an accessible way to say it. */
  .mff-run-weir-strength {
    font-size: 13px; line-height: 1.6; color: var(--ink-2);
    margin: 8px 0 0; padding-top: 8px; border-top: 1px solid #bfe3ca;
  }
  .mff-weir-h3 {
    font-family: 'Lora', serif; font-size: 16px; font-weight: 500;
    color: var(--forest); margin: 22px 0 10px;
  }
  .mff-weir-fate {
    background: var(--parchment); border-radius: var(--radius-sm);
    padding: 14px 16px; margin: 14px 0 18px;
  }
  .mff-weir-fate p { font-size: 13px; line-height: 1.65; color: var(--ink-2); margin: 0 0 8px; }
  .mff-weir-fate ul { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 8px; }
  .mff-weir-fate li { font-size: 13px; line-height: 1.65; color: var(--ink-2); }
  .mff-weir-fate-tag {
    display: inline-block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
    font-weight: 600; padding: 2px 7px; border-radius: 3px; margin-right: 6px; vertical-align: 1px;
  }
  .mff-weir-fate-tag.harvest { background: #f7e3e0; color: #8c3a2c; border: 1px solid #e3b8b0; }
  .mff-weir-fate-tag.pass    { background: #e2f0e7; color: #2f6b45; border: 1px solid #bfe3ca; }
  .mff-weir-fate-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    margin-left: 5px; vertical-align: 1px;
  }
  .mff-weir-fate-dot.harvest { background: #b45b48; }
  .mff-weir-fate-dot.pass    { background: #4b9166; }
  .mff-weir-attrib { font-size: 11.5px; color: var(--ink-3); margin: 8px 0 0; font-style: italic; }

  .mff-weir-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px; background: var(--border-3); border: 1px solid var(--border-3);
    border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 10px;
  }
  .mff-weir-stat { background: #fff; padding: 12px 14px; }
  .mff-weir-stat-lab { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
  .mff-weir-stat-val { font-size: 22px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.2; margin: 3px 0; }
  .mff-weir-stat-sub { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }
  .mff-weir-band { font-weight: 600; }
  .mff-weir-band.wb, .mff-weir-band.b { color: #8c3a2c; }
  .mff-weir-band.n  { color: var(--ink-2); }
  .mff-weir-band.a, .mff-weir-band.wa { color: #2f6b45; }

  .mff-weir-note { font-size: 12px; line-height: 1.6; color: var(--ink-3); margin: 10px 0 0; }
  .mff-weir-current { font-size: 13px; line-height: 1.65; color: var(--ink-2); margin: 16px 0; }
  .mff-weir-current h3 { font-family: 'Lora', serif; font-size: 15px; color: var(--forest); margin: 0 0 8px; }
  .mff-weir-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .mff-weir-log time { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
  .mff-weir-quote { margin: 6px 0 0; padding-left: 12px; border-left: 3px solid #bfe3ca; font-style: italic; color: var(--ink-2); }
  .mff-weir-src { font-size: 11.5px; color: var(--forest-2); }

  .mff-weir-tablewrap { overflow-x: auto; margin-top: 18px; -webkit-overflow-scrolling: touch; }
  .mff-weir-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 12.5px; }
  .mff-weir-table caption { caption-side: bottom; text-align: left; font-size: 11.5px; color: var(--ink-3); padding-top: 8px; line-height: 1.5; }
  .mff-weir-table th, .mff-weir-table td { padding: 6px 10px; text-align: right; border-bottom: 1px solid var(--border-3); }
  .mff-weir-table thead th { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; white-space: nowrap; }
  .mff-weir-table tbody th { text-align: left; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-2); }
  .mff-weir-table td { position: relative; font-variant-numeric: tabular-nums; color: var(--ink); }
  .mff-weir-bar { position: absolute; left: 0; top: 4px; bottom: 4px; background: #e2f0e7; border-radius: 2px; }
  .mff-weir-num { position: relative; }
  .mff-weir-na { color: var(--ink-3); font-style: italic; }
  .mff-weir-na abbr { text-decoration: underline dotted; cursor: help; }

  /* ── FAQ ────────────────────────────────────────────────────────────────── */
  .mff-run-faqitem {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    margin-bottom: 8px;
  }
  .mff-run-faqitem > summary { cursor: pointer; padding: 14px 18px; list-style-position: inside; }
  .mff-run-faqitem > summary h3 {
    display: inline; font-family: 'Lora', serif; font-size: 15px; font-weight: 500; color: var(--forest);
  }
  .mff-run-faqitem[open] > summary { border-bottom: 1px solid var(--border-3); }
  .mff-run-faqitem > p { padding: 14px 18px; margin: 0; font-size: 14px; line-height: 1.7; color: var(--ink-2); }

  @media (max-width: 700px) {
    .mff-run-evidence li { grid-template-columns: 1fr; gap: 1px; }
    .mff-run-ev-v { font-size: 14px; }
    .mff-run-card { padding: 18px 16px; }
    .mff-run-maplabel { font-size: 15px; }
  }
  .mff-run-empty { padding: 24px; text-align: center; color: var(--ink-3); font-size: 13px; }
  .mff-run-mapleader { stroke: var(--ink-4); stroke-width: 1; opacity: .55; }

  /* ==========================================================================
     NAV FIT — 2026-08-25.

     Found while adding the Salmon Run item: the desktop nav was ALREADY
     overflowing its container before that item existed. `.mff-nav-v2-inner` is
     capped at 1100px, and at full size the logo (211px including its gutter),
     the eight item labels (~769px) and the search control (167px) needed about
     1147px. Every page on the site therefore had a horizontal scrollbar at any
     viewport above the 768px mobile breakpoint. The ninth item took the
     shortfall from ~47px to ~153px, which is how it got noticed.

     Three changes, in the order they take effect:

       1. The nav row may run wider than the article column. A nav that spans
          1280px above content capped at 1100px is a deliberate and common
          layout; a nav that overflows its own container is a bug.
       2. Between 1025 and 1300px the shortfall is absorbed rather than scrolled
          — tighter item padding, tighter logo gutter, and the search control
          reduced to its icon.
       3. Below 1025px nine top-level items do not fit at any padding worth
          having, so the mobile menu takes over there instead of at 768px.

     A tenth item does not fit anywhere. If one is needed, the honest answer is
     a "More" dropdown, not another round of squeezing.
     ========================================================================== */
  .mff-nav-v2-inner { max-width: 1280px; }

  @media (min-width: 1025px) and (max-width: 1300px) {
    .mff-nav-logo-v2 { margin-right: 16px; font-size: 1rem; }
    .mff-nav-link { padding: 0 9px; font-size: 12px; }

    /* Icon only. font-size:0 hides the label without needing a wrapper element
       around text that lives in the one canonical copy of the nav; the SVG
       carries its own width and height attributes so it is unaffected. */
    .mff-nav-search-btn { font-size: 0; padding: 5px 10px 5px 30px; }
    .mff-nav-search-icon { font-size: 12px; }
  }

  @media (max-width: 1024px) {
    .mff-nav-items, .mff-nav-search-wrap { display: none; }
    .mff-nav-mobile-btn { display: block; }
    .mff-nav-mobile-menu.open { display: block; }
  }

  /* The run hero carries four stat tiles where the hatch hero carries three,
     and four do not fit across a phone. Scoped to this page so the hatch hero
     keeps the single row it was designed for. */
  @media (max-width: 620px) {
    .mff-run-hero .hatch-hero-stats { flex-wrap: wrap; gap: 16px 24px; }
    .mff-run-hero .hatch-hero-stat { flex: 0 0 calc(50% - 12px); }
  }

  /* ==========================================================================
     BORROWED GAUGE BANNER — river pages, 2026-08-25.

     Five of the eighteen rivers have no usable gauge of their own and read a
     neighbour's. That was already recorded in `gaugeNote`, but it rendered as
     10px grey italic BELOW the numbers, styled identically to the ordinary
     "the gauge is a few miles downstream" caveat. Someone glancing at the Fox
     River page saw a large confident "311 CFS" and nothing telling them it was
     the Tahquamenon's.

     So the warning now sits above the figures, in the site's amber caution
     idiom, and it is driven by `gaugeProxy` in rivers.mjs rather than by
     whether prose happens to exist. Same-river caveats keep the small footnote;
     only borrowed water gets the banner.
     ========================================================================== */
  .flow-proxy {
    background: var(--amber-xpale);
    border: 1px solid var(--amber-2);
    border-left: 3px solid var(--amber-3);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-bottom: 14px;
  }
  .flow-proxy-lab {
    display: block;
    font-size: 10px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--amber-3);
    margin-bottom: 4px;
  }
  .flow-proxy p {
    margin: 0;
    font-size: 12px; line-height: 1.55;
    color: var(--ink-2);
  }

  /* ==========================================================================
     CONDITIONS STRIP — mobile overflow fix, 2026-08-25.

     The strip was already given `overflow-x: auto` so its four items could
     scroll sideways on a phone. They never did: a flex item defaults to
     `min-width: auto`, which means "do not shrink below my content", so the
     strip expanded to fit all four items and pushed the whole page wide
     instead of scrolling inside itself. Every river page had a horizontal
     scrollbar at phone widths — 474px of content in a 390px viewport.

     `min-width: 0` is what lets `overflow-x: auto` do the job it was already
     asked to do. Found while checking the borrowed-gauge banner; it is not
     caused by that banner and predates it.
     ========================================================================== */
  .conditions-strip { min-width: 0; max-width: 100%; }

  /* Same trap one level up. `.grid-3col` already collapses to a single column
     at 720px, but a `1fr` track is `minmax(auto, 1fr)` — it will not shrink
     below its content either — so the hatch table and the gear table stretched
     the column to 442px inside a 326px page and took the whole layout with
     them. `.gear-table-wrap` had `overflow-x: auto` for exactly this and was
     being prevented from using it.

     `min-width: 0` on the grid children is the canonical fix and changes
     nothing at any width where the content already fit. */
  .grid-3col > *, .grid-2col > * { min-width: 0; }