/* ===========================================================================
   FLBoatingHub.com — Coastal editorial design system
   Palette: warm sand + gulf teal + coral. Editorial serif + clean sans.
   =========================================================================== */

:root {
  /* --- Coastal palette --- */
  --sand-50:  #fdfaf3;   /* page background, warm off-white */
  --sand-100: #f7f0e2;   /* cards / raised surfaces */
  --sand-200: #ece0c9;   /* borders, dividers */
  --sand-300: #dcc9a4;   /* muted lines */

  --teal-900: #06363a;   /* darkest teal, footer */
  --teal-800: #0a4e54;
  --teal-700: #0d6e75;   /* primary gulf-teal */
  --teal-600: #128089;
  --teal-500: #1a9aa4;
  --teal-100: #d6ecec;   /* teal wash */

  --coral-600: #d64828;
  --coral-500: #e85d3d;  /* coral accent / CTA */
  --coral-400: #f27a5c;
  --coral-100: #fbe0d6;

  --gold-500:  #e0a43b;  /* sunrise gold accent (sparing) */

  --ink-900: #1c2321;   /* body text */
  --ink-700: #3a4642;   /* secondary text */
  --ink-500: #6a7772;   /* muted text */

  /* --- Semantic --- */
  --bg: var(--sand-50);
  --surface: #ffffff;
  --surface-warm: var(--sand-100);
  --border: var(--sand-200);
  --text: var(--ink-900);
  --text-muted: var(--ink-500);
  --primary: var(--teal-700);
  --primary-dark: var(--teal-800);
  --accent: var(--coral-500);

  /* --- Type --- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* --- Scale --- */
  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: 1.35rem;
  --step-3: 1.7rem;
  --step-4: 2.15rem;
  --step-5: 2.75rem;
  --step-6: 3.6rem;
  --step-hero: clamp(2.9rem, 6.5vw, 5.4rem);

  /* --- Layout --- */
  --maxw: 1200px;
  --maxw-text: 720px;
  --radius: 14px;
  --radius-sm: 8px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --shadow-sm: 0 1px 3px rgba(28,35,33,0.07), 0 1px 2px rgba(28,35,33,0.04);
  --shadow: 0 12px 34px -14px rgba(6,54,58,0.28);
  --shadow-lg: 0 28px 64px -22px rgba(6,54,58,0.4);
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--coral-600); }
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; color: var(--ink-900); margin: 0 0 .5em; letter-spacing: -0.015em; }
h1 { font-size: var(--step-6); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-3); }
h4 { font-size: var(--step-2); }
p { margin: 0 0 1.1em; }

/* --- Utilities --- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.wrap-text { max-width: var(--maxw-text); }
.eyebrow {
  font-family: var(--font-body);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--coral-600);
  margin: 0 0 .8rem;
  display: inline-flex; align-items: center; gap: .5rem;
}
.eyebrow::before { content:""; width: 26px; height: 2px; background: var(--coral-500); display:inline-block; }
.section { padding-block: clamp(3rem, 7vw, 6rem); }
.lede { font-size: var(--step-2); line-height: 1.5; color: var(--ink-700); font-family: var(--font-display); font-weight: 400; }
.muted { color: var(--text-muted); }
.center { text-align: center; }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-body); font-weight: 600; font-size: .98rem;
  padding: .8rem 1.5rem; border-radius: 100px;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary { background: var(--coral-500); color: #fff; box-shadow: 0 8px 20px -8px rgba(232,93,61,.6); }
.btn-primary:hover { background: var(--coral-600); color:#fff; transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--teal-800); border-color: var(--sand-300); }
.btn-ghost:hover { background: var(--sand-100); color: var(--teal-800); }

/* Sprint 1 — hero tertiary Plan + trust line (dark hero) */
.hero-plan-wrap { margin: .85rem 0 0; }
.hero-plan-link {
  color: #e8f2f1;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-color: rgba(232,242,241,.45);
}
.hero-plan-link:hover { color: #fff; text-decoration-color: #f9d29b; }
.hero-trust-line {
  margin: .9rem 0 0;
  max-width: 40ch;
  font-size: .8125rem;
  line-height: 1.4;
  color: rgba(232,242,241,.82);
}
.btn-teal { background: var(--teal-700); color:#fff; }
.btn-teal:hover { background: var(--teal-800); color:#fff; transform: translateY(-2px); }

/* --- Header --- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253,250,243,.88);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 72px; }
.brand { display: flex; align-items: center; gap: .6rem; color: var(--teal-800); }
.brand:hover { color: var(--teal-800); }
.brand svg { width: 38px; height: 38px; flex-shrink: 0; }
.brand-name { font-family: var(--font-display); font-weight: 600; font-size: 1.32rem; letter-spacing: -.02em; }
.brand-name b { color: var(--coral-600); font-weight: 600; }
.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a { color: var(--ink-700); font-weight: 500; font-size: .96rem; }
.nav a:hover { color: var(--coral-600); }
.nav-cta { display: inline-flex; }
.menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.menu-toggle svg { width: 26px; height: 26px; stroke: var(--teal-800); }

/* --- Footer --- */
.site-footer { background: var(--teal-900); color: #cfe3e2; margin-top: 4rem; }
.site-footer a { color: #cfe3e2; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 2rem; padding-block: 3.5rem 2rem; }
.footer-grid h4 { color: #fff; font-family: var(--font-body); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: .55rem; font-size: .94rem; }
.footer-brand svg { width: 42px; height: 42px; margin-bottom: 1rem; color: #fff; }
.footer-brand p { color: #9fbfbe; font-size: .92rem; max-width: 34ch; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-block: 1.4rem; font-size: .84rem; color: #8fb0af; display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content: space-between; }

/* --- Ad slots (hidden until monetization is live) --- */
.ad-slot {
  display: none !important;
  background: repeating-linear-gradient(45deg, var(--sand-100), var(--sand-100) 12px, #f2ead9 12px, #f2ead9 24px);
  border: 1px dashed var(--sand-300);
  border-radius: var(--radius-sm);
  align-items: center; justify-content: center;
  color: var(--ink-500); font-size: .8rem; font-weight: 600; letter-spacing: .04em;
  text-align: center; padding: 1rem;
}
.ad-leaderboard { min-height: 90px; margin: 1.5rem auto; max-width: 728px; }
.ad-inarticle { min-height: 250px; margin: 2rem 0; }
.ad-sidebar { min-height: 600px; width: 300px; }

/* --- Cards --- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card-media { aspect-ratio: 3/2; overflow: hidden; background: var(--sand-100); position: relative; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card-media img { transform: scale(1.05); }
.card-body { padding: 1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.card-body h3 { font-size: var(--step-2); margin-bottom: .35rem; }
.card-tag { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-700); margin-bottom: .5rem; }
.card-meta { font-size: .86rem; color: var(--text-muted); margin-top: auto; display:flex; gap:.8rem; flex-wrap:wrap; padding-top:.8rem; }

.grid { display: grid; gap: 1.6rem; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

/* --- Chips / pills --- */
.chip { display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem; font-weight:600; padding:.32rem .7rem; border-radius:100px; background: var(--teal-100); color: var(--teal-800); }
.chip-coral { background: var(--coral-100); color: var(--coral-600); }
.chip-sand { background: var(--sand-100); color: var(--ink-700); border:1px solid var(--sand-200); }
.chips { display:flex; flex-wrap:wrap; gap:.5rem; }

/* --- Breadcrumb --- */
.breadcrumb { font-size: .84rem; color: var(--text-muted); padding-block: 1.2rem; display:flex; gap:.4rem; flex-wrap:wrap; }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--coral-600); }
.breadcrumb span { color: var(--sand-300); }

/* --- Callout --- */
.callout {
  background: var(--teal-100); border-left: 4px solid var(--teal-700);
  border-radius: var(--radius-sm); padding: 1.3rem 1.5rem; margin: 1.8rem 0;
}
.callout h4 { font-family: var(--font-body); font-size: .8rem; letter-spacing:.1em; text-transform: uppercase; color: var(--teal-800); margin-bottom:.5rem; }
.callout.coral { background: var(--coral-100); border-color: var(--coral-500); }
.callout.coral h4 { color: var(--coral-600); }
.callout.boater-note { background: var(--sand-100); border-color: var(--coral-500); }
.callout.boater-note h4 { color: var(--coral-600); }
.callout.boater-note .note-body { font-size: 1rem; line-height: 1.55; }
.callout.boater-note .note-meta { font-size: .78rem; color: var(--text-muted); margin-top: .8rem; }

/* --- Ramp hero photo --- */
.ramp-hero { margin: 0 0 1.6rem; }
.ramp-hero img { width: 100%; height: min(46vh, 420px); object-fit: cover; border-radius: var(--radius); display: block; }
.ramp-hero .photo-credit { font-size: .78rem; color: var(--text-muted); margin-top: .5rem; text-align: right; }
.ramp-hero .photo-credit a { color: var(--text-muted); text-decoration: underline; text-decoration-color: var(--sand-300); }
.ramp-hero .photo-credit a:hover { color: var(--coral-600); }

/* --- Community photo gallery --- */
.community-photos { margin: 2rem 0; }
.community-photos h2 { margin-bottom: .3rem; }
.community-photos .cp-sub { color: var(--text-muted); font-size: .92rem; margin-bottom: 1rem; }
.cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .9rem; margin: 1rem 0; }
.cp-item { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--sand-100); aspect-ratio: 4/3; }
.cp-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.cp-item:hover img { transform: scale(1.03); }
.cp-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: .55rem .75rem .5rem; background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0)); color: #fff; font-size: .78rem; }
.cp-caption .cp-author { display: block; font-weight: 500; }
.cp-caption .cp-date { opacity: .8; font-size: .72rem; }

/* --- Submit photo block --- */
.cp-submit { background: var(--sand-100); border: 1px dashed var(--sand-300); border-radius: var(--radius); padding: 1.4rem 1.5rem; margin: 1.5rem 0; text-align: center; }
.cp-submit h4 { margin: 0 0 .4rem; color: var(--text); }
.cp-submit p { margin: 0 0 1rem; color: var(--text-muted); font-size: .92rem; }
.cp-submit .btn-submit { display: inline-block; background: var(--coral-500); color: #fff; padding: .65rem 1.4rem; border-radius: var(--radius); font-weight: 600; border: 0; cursor: pointer; font-size: .95rem; transition: background .2s ease; }
.cp-submit .btn-submit:hover { background: var(--coral-600); }
.cp-submit .cp-note { font-size: .78rem; color: var(--text-muted); margin-top: .8rem; }

/* --- Ramp discussion (Disqus) --- */
.ramp-discussion { margin: 2.5rem 0 1.5rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.ramp-discussion h2 { margin: 0 0 .4rem; }
.ramp-discussion .discussion-sub { color: var(--text-muted); font-size: .92rem; margin-bottom: 1.4rem; }
#disqus_thread { margin-top: 1rem; }

/* --- Article layout --- */
.article-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 3rem; align-items: start; }
.article-body { max-width: 720px; }
.article-body h2 { margin-top: 2.2rem; }
.article-body h3 { margin-top: 1.6rem; }
.article-body ul, .article-body ol { padding-left: 1.3rem; margin-bottom: 1.2rem; }
.article-body li { margin-bottom: .5rem; }
.sidebar { position: sticky; top: 90px; display:flex; flex-direction:column; gap: 1.5rem; }
.sidebar-box { background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow-sm); }
.sidebar-box h4 { font-family: var(--font-body); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--teal-700); margin-bottom:.9rem; }
.sidebar-box ul { list-style:none; margin:0; padding:0; }
.sidebar-box li { margin-bottom:.6rem; font-size:.92rem; border-bottom:1px solid var(--sand-100); padding-bottom:.6rem; }
.sidebar-box li:last-child { border-bottom:none; padding-bottom:0; margin-bottom:0; }

/* --- Data table / spec list --- */
.spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1px; background: var(--border); border:1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin: 1.5rem 0; }
.spec { background: var(--surface); padding: 1rem 1.1rem; }
.spec dt { font-size: .74rem; letter-spacing:.06em; text-transform: uppercase; color: var(--text-muted); font-weight:600; margin-bottom:.25rem; }
.spec dd { margin:0; font-weight:600; color: var(--ink-900); font-size:.98rem; }

/* --- Map --- */
.map { height: 380px; width: 100%; border-radius: var(--radius); border:1px solid var(--border); z-index: 1; }

/* --- Tide chart --- */
.chart-wrap { background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow-sm); }
.tide-today { display:flex; gap:1rem; flex-wrap:wrap; margin: 1.2rem 0; }
.tide-pill { flex:1; min-width:130px; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-sm); padding: .9rem 1.1rem; }
.tide-pill .t-type { font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.tide-pill.high .t-type { color: var(--teal-700); }
.tide-pill.low .t-type { color: var(--coral-600); }
.tide-pill .t-time { font-family: var(--font-display); font-size: 1.4rem; font-weight:600; }
.tide-pill .t-val { font-size:.86rem; color: var(--text-muted); }

/* --- Source cite --- */
.source-note { font-size:.82rem; color: var(--text-muted); border-top:1px solid var(--border); padding-top:1rem; margin-top:2rem; }
.source-note a { color: var(--teal-700); }

/* --- Search --- */
.searchbox { position: relative; max-width: 560px; }
.searchbox input {
  width: 100%; font-family: var(--font-body); font-size: 1.05rem;
  padding: 1rem 1.3rem 1rem 3rem; border-radius: 100px;
  border: 1.5px solid var(--sand-200); background: #fff; color: var(--ink-900);
  box-shadow: var(--shadow);
}
.searchbox input:focus { outline: none; border-color: var(--teal-500); }
.searchbox svg { position:absolute; left:1.1rem; top:50%; transform:translateY(-50%); width:20px; height:20px; stroke: var(--ink-500); }
.search-results { position:absolute; top:calc(100% + .5rem); left:0; right:0; background:#fff; border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); max-height: 340px; overflow:auto; z-index: 20; display:none; }
.search-results.open { display:block; }
.search-results a { display:block; padding:.75rem 1.1rem; border-bottom:1px solid var(--sand-100); color: var(--ink-900); }
.search-results a:hover { background: var(--sand-50); }
.search-results a small { color: var(--text-muted); display:block; font-size:.8rem; }

/* --- Stats strip --- */
.stats { display:grid; grid-template-columns: repeat(5,1fr); gap: 1px; background: var(--sand-200); border-radius: var(--radius); overflow:hidden; border:1px solid var(--sand-200); }
@media (max-width:900px) { .stats { grid-template-columns: repeat(2,1fr); } }
@media (min-width:901px) and (max-width:1100px) { .stats { grid-template-columns: repeat(3,1fr); } }
.stat { background: var(--sand-50); padding: 1.75rem 1.2rem; text-align:center; }
.stat .num { font-family: var(--font-display); font-size: var(--step-4); font-weight:600; color: var(--teal-700); line-height:1.15; padding-top:.1em; }
.stat .lbl { font-size:.82rem; color: var(--text-muted); margin-top:.4rem; letter-spacing:.03em; }

/* --- Prose links list --- */
.linklist { list-style:none; padding:0; margin: 1rem 0; columns: 2; column-gap: 2rem; }
.linklist li { margin-bottom:.5rem; break-inside: avoid; }

/* --- Responsive --- */
@media (max-width: 960px) {
  .article-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; flex-direction: row; flex-wrap:wrap; }
  .sidebar-box, .ad-sidebar { flex:1; min-width: 260px; width:auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .grid-4 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 760px) {
  .nav { position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--sand-50); border-bottom:1px solid var(--border); padding: .5rem var(--gutter) 1.2rem; box-shadow: var(--shadow); transform: translateY(-120%); transition: transform .3s ease; }
  .nav.open { transform: translateY(0); }
  .nav a { padding: .8rem 0; border-bottom: 1px solid var(--sand-100); }
  .nav a.nav-cta { align-self: center; justify-content: center; text-align: center; padding: .8rem 1.75rem; margin-top: .9rem; border-bottom: 0; box-sizing: border-box; max-width: 100%; }
  .menu-toggle { display: block; }
  .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2,1fr); }
  .linklist { columns: 1; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Radar control (RainViewer overlay)
   ============================================================ */
.flb-radar-ctrl{
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 6px 20px rgba(6,54,58,.16);
  padding:.55rem .7rem .6rem;
  font-family:inherit;
  min-width:230px;
  max-width:280px;
}
.flb-radar-row{display:flex;align-items:center;gap:.55rem;margin-bottom:.35rem}
.flb-radar-play{
  appearance:none;background:var(--teal-700);color:#fff;border:0;
  width:32px;height:32px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;cursor:pointer;
  padding:0;flex:0 0 auto;transition:background .15s ease;
}
.flb-radar-play:hover{background:var(--teal-900)}
.flb-radar-play:focus-visible{outline:2px solid var(--teal-700);outline-offset:2px}
.flb-radar-meta{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.flb-radar-label{
  font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--teal-700);
}
.flb-radar-label-forecast{color:#c05a1c}
.flb-radar-label-now{color:#1a9aa4}
.flb-radar-time{font-size:.95rem;font-weight:600;color:var(--ink-900,#0a2a2d)}
.flb-radar-slider{
  width:100%;appearance:none;height:5px;border-radius:3px;
  background:linear-gradient(to right,#a9cbc9 0%,#1a9aa4 60%,#e0a43b 100%);
  outline:none;margin:.15rem 0 .4rem;
}
.flb-radar-slider::-webkit-slider-thumb{
  appearance:none;width:15px;height:15px;border-radius:50%;
  background:#fff;border:2px solid var(--teal-700);cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.flb-radar-slider::-moz-range-thumb{
  width:15px;height:15px;border-radius:50%;background:#fff;
  border:2px solid var(--teal-700);cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.flb-radar-legend{
  display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;
  font-size:.7rem;color:var(--text-muted);
}
.flb-radar-legend .dot{
  display:inline-block;width:9px;height:9px;border-radius:50%;margin-left:.35rem;
}
.flb-radar-legend .dot:first-child{margin-left:0}
.flb-radar-legend .dot.light{background:#7ecbf5}
.flb-radar-legend .dot.mod{background:#3a8bd6}
.flb-radar-legend .dot.heavy{background:#f4a531}
.flb-radar-legend .dot.severe{background:#e14a3b}

/* Shared basemap selector (segmented control) */
.flb-basemap-ctrl{
  display:flex;overflow:hidden;background:#fff;
  border-radius:8px;border:1px solid var(--border,#cfd8db);
}
.flb-basemap-ctrl.leaflet-bar{box-shadow:0 2px 8px rgba(6,54,58,.18)}
.flb-basemap-btn{
  appearance:none;border:0;background:#fff;color:var(--ink-900,#0a2a2d);
  font:inherit;font-size:.8rem;font-weight:600;line-height:1;
  padding:.42rem .6rem;cursor:pointer;white-space:nowrap;
  border-left:1px solid var(--border,#cfd8db);transition:background .15s ease;
}
.flb-basemap-btn:first-child{border-left:0}
.flb-basemap-btn:hover{background:#eef4f4}
.flb-basemap-btn.is-active{background:var(--teal-700,#0d6e75);color:#fff}
.flb-basemap-btn:focus-visible{outline:2px solid var(--teal-700,#0d6e75);outline-offset:-2px}

/* Shared current-location control */
.flb-locate-wrap{display:flex;flex-direction:column;gap:.35rem;align-items:flex-start}
.flb-locate-ctrl{background:#fff}
.flb-locate-btn{
  appearance:none;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;background:#fff;border:0;color:var(--teal-700,#0d6e75);
  cursor:pointer;padding:0;transition:background .15s ease;
}
.flb-locate-btn:hover{background:#eef4f4}
.flb-locate-btn:focus-visible{outline:2px solid var(--teal-700,#0d6e75);outline-offset:-2px}
.flb-locate-btn.is-busy{opacity:.6;cursor:wait}
.flb-locate-btn:disabled{cursor:wait}
.flb-locate-msg{
  max-width:220px;background:rgba(255,255,255,.97);border:1px solid var(--border,#cfd8db);
  border-radius:8px;padding:.35rem .55rem;font-size:.78rem;line-height:1.25;
  color:var(--ink-900,#0a2a2d);box-shadow:0 2px 8px rgba(6,54,58,.16);
}
.flb-locate-msg-error{border-color:#e0a43b;color:#8a5a10}

/* Full-screen radar page */
.radar-page-map{
  width:100%;height:min(70vh,720px);min-height:460px;
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  background:#dbe6e8;
}
.radar-legend-inline{
  display:flex;flex-wrap:wrap;gap:1rem;margin-top:1rem;
  font-size:.9rem;color:var(--text-muted);
}
.radar-legend-inline .item{display:inline-flex;align-items:center;gap:.4rem}
.radar-legend-inline .swatch{
  width:14px;height:14px;border-radius:3px;display:inline-block;
}

/* =============================================================
   STATEWIDE MAP PAGE
   ============================================================= */
.statewide-map{
  width:100%;height:min(75vh,780px);min-height:520px;
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  background:#e6ecee;
}
.map-controls{
  display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:.75rem;
  align-items:end;margin-bottom:1rem;
}
.map-controls label{font-size:.82rem;color:var(--text-muted);display:block;margin-bottom:.35rem}
.map-controls input[type=text],
.map-controls select{
  width:100%;padding:.55rem .7rem;border:1px solid #cfd8db;border-radius:8px;
  font:inherit;background:#fff;
}
.map-controls .map-toggles{display:flex;gap:1.25rem;align-items:center;font-size:.9rem}
.map-controls .map-toggles label{margin-bottom:0;color:var(--ink-900);cursor:pointer}
.map-controls .map-toggles input{margin-right:.35rem;vertical-align:middle}
#locate-me{
  padding:.6rem 1rem;background:var(--brand);color:#fff;border:0;border-radius:8px;
  font:inherit;font-weight:500;cursor:pointer;white-space:nowrap;
}
#locate-me:hover{background:#0a5c62}
#locate-me:disabled{opacity:.6;cursor:wait}
.locate-status{margin:.4rem 0 0;font-size:.82rem;color:var(--text-muted)}
.locate-status-error{color:#8a5a10}
@media (max-width:760px){
  .map-controls{grid-template-columns:1fr;gap:.5rem}
}

/* Legend chip row under the map */
.map-legend{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1rem;font-size:.86rem;color:var(--text-muted)}
.map-legend .item{display:inline-flex;align-items:center;gap:.45rem}
.map-legend .pin-salt{width:14px;height:14px;background:#0d6e75;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:inline-block}
.map-legend .pin-fresh{width:14px;height:14px;background:#2e7d3a;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:inline-block}
.map-legend .pin-brack{width:14px;height:14px;background:#c07a2c;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:inline-block}
.map-legend .pin-tide{width:14px;height:14px;background:#1a9aa4;border-radius:50%;display:inline-block;border:2px solid #fff;box-shadow:0 0 0 1px #1a9aa4}

/* Leaflet marker overrides */
.flb-marker{background:transparent!important;border:0!important}
.flb-cluster{background:transparent!important;border:0!important}
.flb-cluster-inner{
  background:rgba(13,110,117,.92);color:#fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-weight:600;
  border:3px solid rgba(255,255,255,.92);box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.flb-cluster-inner span{font-size:.9rem}
.flb-popup{min-width:200px}
.flb-popup-title{font-weight:600;font-size:1rem;color:var(--ink-900);line-height:1.25;margin-bottom:.25rem}
.flb-popup-meta{font-size:.82rem;color:var(--text-muted);margin-bottom:.6rem}
.flb-popup-actions{display:flex;flex-wrap:wrap;gap:.3rem 1rem}
.flb-popup-link{font-weight:500;color:var(--brand);text-decoration:none}
.flb-popup-link:hover{text-decoration:underline}
.locate-status-advisory{color:var(--ink-900);font-weight:500}

/* =============================================================
   FWC RESTRICTION ZONES (manatee / boating) — overlay, legend, popups
   ============================================================= */
.zone-legend{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin-top:1rem;font-size:.86rem;color:var(--text-muted)}
.zone-legend-title{font-weight:600;color:var(--ink-900)}
.zone-legend-item{display:inline-flex;align-items:center;gap:.45rem}
.zone-swatch{width:16px;height:12px;display:inline-block;border-radius:2px;border:1px solid rgba(0,0,0,.35)}
.zone-swatch-manatee{background:rgba(55,176,212,.45);border-color:#0a6b8a}
.zone-swatch-boating{background:rgba(224,83,83,.4);border-color:#9a2b2b}
.zone-legend-hint{flex-basis:100%;font-size:.78rem;color:var(--text-muted)}
.zone-disclaimer{margin:.8rem 0 0;padding:.6rem .8rem;font-size:.8rem;line-height:1.4;color:var(--text-muted);background:var(--surface-alt,#f5f8f9);border-left:3px solid #c07a2c;border-radius:4px}
.zone-disclaimer a{color:var(--brand)}

/* Ramp-page "nearby restrictions" summary */
.zone-list{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.zone-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem;font-size:.9rem;line-height:1.4}
.zone-tag{display:inline-block;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.02em;padding:.1rem .4rem;border-radius:3px;color:#fff}
.zone-tag-manatee{background:#0a6b8a}
.zone-tag-boating{background:#9a2b2b}
.zone-meta{flex-basis:100%;font-size:.8rem;color:var(--text-muted)}
.zone-none{margin:.6rem 0 0;font-size:.9rem;color:var(--text-muted)}

/* Zone popups (Leaflet) */
.flb-zone-popup{min-width:180px}
.flb-zone-pop-title{font-weight:600;font-size:.98rem;color:var(--ink-900);line-height:1.25}
.flb-zone-pop-cat{font-size:.78rem;color:var(--text-muted);margin-bottom:.4rem;text-transform:capitalize}
.flb-zone-pop-row{font-size:.84rem;margin:.15rem 0}
.flb-zone-pop-row a{color:var(--brand)}
.flb-zone-pop-disclaimer{margin-top:.5rem;font-size:.74rem;color:var(--text-muted);line-height:1.35}

/* =============================================================
   TRIP PLANNER
   ============================================================= */
.planner-grid{display:grid;grid-template-columns:1fr 2fr;gap:2rem}
@media (max-width:900px){.planner-grid{grid-template-columns:1fr}}
.planner-form{background:var(--surface-alt,#f5f8f9);padding:1.5rem;border-radius:var(--radius);border:1px solid #e2e8ea}
.planner-form label{display:block;font-size:.85rem;color:var(--text-muted);margin:.9rem 0 .35rem;font-weight:500}
.planner-form select,
.planner-form input{
  width:100%;padding:.6rem .75rem;border:1px solid #cfd8db;border-radius:8px;
  font:inherit;background:#fff;
}
.planner-form select:focus,
.planner-form input:focus{outline:2px solid var(--brand);outline-offset:1px}
.planner-form .help{font-size:.78rem;color:var(--text-muted);margin-top:.3rem}
.planner-results{min-height:200px}
.planner-empty{padding:2rem;text-align:center;color:var(--text-muted);background:#f5f8f9;border-radius:var(--radius)}
.planner-window{
  padding:1.1rem 1.25rem;background:#fff;border:1px solid #e2e8ea;border-left:4px solid var(--brand);
  border-radius:10px;margin-bottom:.75rem;
}
.planner-window.optimal{border-left-color:#2e7d3a;background:#f4faf5}
.planner-window .day{font-weight:600;color:var(--ink-900);font-size:.95rem;margin-bottom:.3rem}
.planner-window .times{font-size:.86rem;color:var(--text-muted);line-height:1.55}
.planner-window .times strong{color:var(--ink-900)}
.planner-window .rating{
  display:inline-block;padding:.15rem .55rem;font-size:.72rem;
  background:#e6f4e8;color:#1f5a2a;border-radius:99px;margin-left:.5rem;font-weight:600;
}
.planner-window .rating.fair{background:#fef5e0;color:#7a5910}
.planner-window .rating.poor{background:#f6e4e2;color:#7a2a20}
.planner-station-info{font-size:.85rem;color:var(--text-muted);margin-bottom:1rem}

/* =============================================================
   SPECIES PAGES
   ============================================================= */
.species-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.25rem}
.species-card{
  background:#fff;border:1px solid #e2e8ea;border-radius:var(--radius);
  overflow:hidden;transition:transform .15s,box-shadow .15s;text-decoration:none;color:inherit;
  display:block;
}
.species-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.species-card .thumb{aspect-ratio:16/10;background:linear-gradient(135deg,#0d6e75,#1a9aa4);display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-display,Fraunces,serif);font-size:1.4rem;font-weight:500;letter-spacing:.02em}
.species-card .thumb.salt{background:linear-gradient(135deg,#0d6e75,#1a9aa4)}
.species-card .thumb.fresh{background:linear-gradient(135deg,#2e7d3a,#5aa668)}
.species-card .thumb.deepwater{background:linear-gradient(135deg,#1a3a58,#0d6e75)}
.species-card .body{padding:1rem 1.15rem 1.15rem}
.species-card h3{margin:0 0 .3rem;font-size:1.05rem}
.species-card p{margin:0;font-size:.85rem;color:var(--text-muted);line-height:1.5}
.species-card .season-tag{display:inline-block;font-size:.72rem;font-weight:600;color:var(--brand);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.3rem}

.species-header{background:linear-gradient(135deg,#0d6e75,#1a9aa4);color:#fff;padding:3rem 0}
.species-header.fresh{background:linear-gradient(135deg,#2e7d3a,#5aa668)}
.species-header.deepwater{background:linear-gradient(135deg,#1a3a58,#0d6e75)}
.species-header h1{color:#fff;max-width:20ch}
.species-header .sci{font-style:italic;opacity:.85;font-size:1.05rem;margin-top:.3rem}
.species-header p{color:rgba(255,255,255,.95);max-width:62ch;margin-top:1rem;font-size:1.08rem}

.reg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:1.5rem 0 2rem}
.reg-card{background:#fff;padding:1.1rem 1.25rem;border:1px solid #e2e8ea;border-radius:12px}
.reg-card .label{font-size:.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-bottom:.35rem}
.reg-card .value{font-size:1.15rem;font-weight:600;color:var(--ink-900);line-height:1.3}
.reg-card .sublabel{font-size:.78rem;color:var(--text-muted);margin-top:.25rem}

.season-strip{
  display:flex;background:#fff;border:1px solid #e2e8ea;border-radius:12px;
  overflow:hidden;margin:1rem 0 2rem;
}
.season-strip .month{flex:1;padding:.55rem .2rem;text-align:center;font-size:.72rem;color:var(--text-muted);border-right:1px solid #f0f4f5;position:relative}
.season-strip .month:last-child{border-right:0}
.season-strip .month.open{background:#e6f4e8;color:#1f5a2a;font-weight:600}
.season-strip .month.closed{background:#f6e4e2;color:#7a2a20;font-weight:600}
.season-strip .month .m-label{display:block;font-size:.68rem;letter-spacing:.05em;margin-top:.15rem}

/* PWA install prompt (subtle) */
.pwa-install-banner{
  position:fixed;bottom:1rem;right:1rem;z-index:1000;
  background:#fff;border:1px solid #e2e8ea;border-radius:12px;padding:.85rem 1rem;
  box-shadow:0 4px 16px rgba(0,0,0,.14);max-width:320px;display:none;
  font-size:.9rem;
}
.pwa-install-banner.visible{display:block}
.pwa-install-banner p{margin:0 0 .6rem;color:var(--ink-900);line-height:1.35}
.pwa-install-banner .row{display:flex;gap:.5rem}
.pwa-install-banner button{padding:.4rem .9rem;border-radius:6px;border:0;cursor:pointer;font:inherit;font-size:.85rem}
.pwa-install-banner .btn-install{background:var(--brand);color:#fff}
.pwa-install-banner .btn-dismiss{background:#eef2f3;color:var(--ink-900)}

/* -------- Species page (new v2 layout) -------- */
.species-card{display:block;text-decoration:none;color:inherit;border-radius:14px;overflow:hidden;background:var(--surface);border:1px solid var(--border);transition:transform .15s ease,box-shadow .15s ease}
.species-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.species-thumb{aspect-ratio:5/3;overflow:hidden;background:#f0efe9}
.species-thumb svg,.species-thumb img,.species-thumb picture{display:block;width:100%;height:100%;object-fit:cover}

.species-hero{background:linear-gradient(180deg,#f0f7f7 0%,transparent 100%);border-radius:16px;padding:1.5rem 1.25rem;margin-top:.5rem}
.species-hero-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:2rem;align-items:center}
.species-hero-thumb{border-radius:12px;overflow:hidden;box-shadow:0 6px 24px rgba(13,110,117,.14);background:#f0efe9;aspect-ratio:5/3}
.species-hero-thumb svg,.species-hero-thumb img,.species-hero-thumb picture{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:720px){
  .species-hero-grid{grid-template-columns:1fr;gap:1rem}
  .species-hero-thumb{max-width:340px;margin:0 auto}
}

.reg-box{border:1px solid var(--border);border-radius:12px;overflow:hidden;margin:.6rem 0 .4rem;background:#fff}
.reg-row{display:grid;grid-template-columns:200px 1fr;gap:1rem;padding:.7rem 1rem;border-bottom:1px solid #f0f4f5}
.reg-row:last-child{border-bottom:0}
.reg-row.reg-head{background:#f7fafa;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);padding:.45rem 1rem}
.reg-region{font-weight:600;color:var(--ink-900);font-size:.92rem}
.reg-value{font-size:.94rem;line-height:1.5}
@media (max-width:640px){
  .reg-row{grid-template-columns:1fr;gap:.25rem;padding:.7rem .9rem}
  .reg-region{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
}

/* -------- PWA install banner (v2, matches JS structure) -------- */
.pwa-install-banner{position:fixed;left:12px;right:12px;bottom:12px;z-index:1000;display:flex;gap:.75rem;align-items:center;padding:.85rem 1rem;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 10px 30px rgba(10,30,40,.18);animation:pwaSlide .25s ease-out}
@keyframes pwaSlide{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.pwa-install-copy{display:flex;flex-direction:column;flex:1;min-width:0}
.pwa-install-copy strong{color:var(--ink-900);font-size:.98rem;line-height:1.25}
.pwa-install-copy span{color:var(--text-muted);font-size:.85rem;line-height:1.35;margin-top:.15rem}
.pwa-install-actions{display:flex;gap:.4rem;flex-shrink:0}
.pwa-install-actions .btn{padding:.5rem .85rem;font-size:.88rem}
.pwa-install-actions .btn-ghost{background:transparent;color:var(--text-muted);border:1px solid var(--border)}
@media (min-width:720px){
  .pwa-install-banner{left:auto;right:20px;bottom:20px;max-width:440px}
}

/* ---- Ramp finder (Near Me) + Plan-a-Trip nearest ramp + beginner glossary ---- */
.finder{margin:1.5rem 0 0}
.finder-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem}
.finder-nearme{white-space:nowrap}
.finder-filters{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;border:0;padding:0;margin:0}
.finder-filters-legend{font-size:.82rem;color:var(--text-muted);padding:0;margin-right:.15rem}
.finder-filter{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;cursor:pointer}
.finder-filter input{width:1.05rem;height:1.05rem}
.finder-reset{padding:.55rem .9rem}
.finder-status{min-height:1.2em;margin:.85rem 0 0;font-size:.92rem;color:var(--text-muted)}
.finder-status[data-role="error"]{color:var(--coral-600)}
.finder-results{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.5rem}
.finder-item{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:var(--sand-50);border:1px solid var(--sand-200);border-radius:var(--radius-sm);padding:.7rem .9rem}
.finder-item-link{display:flex;flex-direction:column;gap:.15rem;text-decoration:none;color:inherit;min-width:0}
.finder-item-link:hover .finder-item-name{color:var(--teal-800);text-decoration:underline}
.finder-item-name{font-weight:600}
.finder-item-meta{font-size:.82rem;color:var(--text-muted)}
.finder-item-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.25rem}
.finder-tag{font-size:.7rem;letter-spacing:.03em;text-transform:uppercase;background:var(--teal-100);
  color:var(--teal-800);border-radius:999px;padding:.1rem .5rem}
.finder-item-dist{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:.3rem;text-align:right}
.finder-item-distval{font-weight:600;color:var(--teal-800);white-space:nowrap}
.finder-item-action,.finder-item-dir{font-weight:500;font-size:.72rem;color:var(--teal-800);text-decoration:none;white-space:nowrap}
.finder-item-action:hover,.finder-item-dir:hover{text-decoration:underline}
.finder-note{font-size:.78rem;margin:.75rem 0 0}

.plan-nearme{display:flex;flex-direction:column;gap:.5rem}
.plan-nearme-status{min-height:1.2em;margin:0;font-size:.92rem;color:var(--text-muted)}
.plan-nearme-card{background:var(--sand-50);border:1px solid var(--sand-200);border-radius:var(--radius-sm);padding:1rem 1.15rem}
.plan-nearme-name{font-size:1.15rem;font-weight:600}
.plan-nearme-meta{font-size:.9rem;color:var(--text-muted);margin-top:.2rem}
.plan-nearme-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.9rem}
.plan-nearme-actions .btn{padding:.55rem .95rem;font-size:.9rem}

.glossary{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.2rem;margin:1rem 0}
.glossary dt{font-weight:600;color:var(--teal-800)}
.glossary dd{margin:0}
@media (max-width:540px){
  .glossary{grid-template-columns:1fr;gap:.15rem}
  .glossary dd{margin:0 0 .6rem}
  .finder-item{flex-direction:row;align-items:flex-start}
}

/* ---- Boat mechanic directory (/mechanics) ---- */
.mech-jump{margin:1.5rem 0 0}
.mech-jump a b{color:var(--teal-700)}
.mech-filters{display:flex;flex-direction:column;gap:.75rem;margin:1.5rem 0 0;
  background:var(--sand-50);border:1px solid var(--sand-200);border-radius:var(--radius);padding:1rem 1.15rem}
.mech-filter-group{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem}
.mech-filter-label{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;color:var(--text-muted);margin-right:.4rem}
.mech-chip{display:inline-flex;align-items:center;gap:.35rem;font-size:.86rem;font-weight:600;
  padding:.42rem .85rem;border-radius:100px;border:1px solid var(--sand-300);
  background:#fff;color:var(--ink-700);cursor:pointer;font-family:inherit;line-height:1.2}
.mech-chip b{font-weight:700;color:var(--teal-700)}
.mech-chip:hover{border-color:var(--teal-500);color:var(--teal-800)}
.mech-chip:focus-visible{outline:2px solid var(--teal-700);outline-offset:2px}
.mech-chip.is-active{background:var(--teal-700);border-color:var(--teal-700);color:#fff}
.mech-chip.is-active b{color:#fff}
.mech-filter-help{font-size:.82rem;margin:0}
.mech-status{min-height:1.2em;margin:.85rem 0 0;font-size:.9rem;color:var(--text-muted)}
.mech-empty{margin:1rem 0 0;font-size:.95rem;color:var(--text-muted)}
.mech-linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--teal-700);
  font-weight:600;cursor:pointer;text-decoration:underline}
.mech-linkbtn:focus-visible{outline:2px solid var(--teal-700);outline-offset:2px}

.mech-region{margin-top:2.5rem}
.mech-region-title{font-size:var(--step-3);margin:0 0 1.1rem;padding-bottom:.5rem;
  border-bottom:1px solid var(--border)}
.mech-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
.mech-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.3rem 1.4rem 1.4rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:.6rem}
.mech-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem}
.mech-name{font-size:var(--step-1);margin:0}
.mech-type{flex:none;white-space:nowrap}
.mech-where{margin:0;font-size:.9rem;color:var(--text-muted)}
.mech-label{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;color:var(--teal-700);margin-bottom:.2rem}
.mech-services{margin:0;font-size:.88rem;line-height:1.5}
.mech-scope{margin:0;font-size:.85rem;line-height:1.45;color:var(--coral-600);font-weight:500}
.mech-flag{margin:0;font-size:.85rem;line-height:1.45;background:var(--coral-100);
  border-left:3px solid var(--coral-500);border-radius:var(--radius-sm);padding:.55rem .75rem;color:var(--ink-700)}
.mech-brands{margin:0}
.mech-brands-more{font-size:.8rem}
.mech-actions{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:auto;padding-top:.4rem}
.mech-actions .btn{padding:.55rem 1rem;font-size:.88rem}
@media (max-width:760px){
  .mech-grid{grid-template-columns:1fr}
  .mech-card-head{flex-direction:column;gap:.4rem}
  .mech-actions .btn{flex:1 1 auto;justify-content:center}
}

/* ---- Monthly newsletter (/newsletter) ---- */
/* The h1 is "The FLBoatingHub monthly": "FLBoatingHub" is a 12-character word
   with no break opportunity, and the global h1 size (--step-6, 3.6rem) renders
   it wider than the content box on a 390px viewport, forcing document scroll.
   The clamp ceiling is --step-6 and is reached at 760px — the site's existing
   mobile breakpoint — so tablet and desktop render exactly as before and only
   narrow viewports scale down. */
.newsletter-intro h1 { font-size: clamp(2.1rem, 1.1rem + 5.26vw, var(--step-6)); }
/* h2 is a fixed --step-4 (2.15rem) globally, so scaling only the h1 would flatten
   the hierarchy — at 320px the two would be the same size. This tracks the h1 at
   a constant ratio and shares the same 760px crossover. */
.newsletter-intro h2 { font-size: clamp(1.25rem, 0.656rem + 3.14vw, var(--step-4)); }
/* overflow-wrap is inherited, so this also makes the h1 break rather than
   overflow if the font ever renders wider than the clamp anticipates, and guards
   the column against any long token (email address, URL). No effect on text
   that already fits. */
.newsletter-intro { overflow-wrap: break-word; }

/* ---- About page bio portrait ---- */
/* The source image is square (900x900); capping the width keeps it from
   dominating the text column, and the aspect-ratio reserves the box before the
   lazy-loaded file arrives so the paragraphs below don't shift. */
.about-portrait { margin: 1.8rem 0; max-width: 360px; }
.about-portrait img { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: var(--radius); }
.about-portrait figcaption { font-size: .82rem; line-height: 1.5; color: var(--text-muted); margin-top: .55rem; }
.about-reviewed { font-size: .85rem; margin-top: 2rem; }

/* ---- Newsletter signup module (MailerLite embed) ---- */
/* Two-column on desktop: our copy on the left, MailerLite's embed on the right.
   The embed is third-party markup, so everything here constrains it rather than
   restyling its internals — the form owns its own fields and buttons. */
.newsletter-signup {
  background: var(--sand-100);
  border-block: 1px solid var(--border);
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
  margin-block: clamp(2.5rem, 6vw, 4rem);
}
.newsletter-signup--teal { background: var(--teal-100); border-color: var(--teal-500); }
.newsletter-signup-inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.newsletter-signup-copy h2,
.newsletter-signup-copy h3 {
  margin: .35rem 0 .75rem;
  font-size: clamp(1.5rem, 1rem + 2.4vw, var(--step-4));
  overflow-wrap: break-word;
}
.newsletter-signup-lede {
  margin: 0;
  max-width: 46ch;
  color: var(--ink-700);
  font-size: var(--step-1);
  line-height: 1.55;
}
.newsletter-signup-note {
  margin: .85rem 0 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 52ch;
}
/* MailerLite injects its own stylesheet with fixed pixel widths; these keep the
   embed inside our grid column on every viewport instead of forcing horizontal
   document scroll on a phone. */
.newsletter-signup-form { min-width: 0; }
.newsletter-signup-form .ml-embedded { min-width: 0; }
.newsletter-signup-form .ml-form-embedContainer,
.newsletter-signup-form .ml-form-embedWrapper,
.newsletter-signup-form .ml-form-align-center,
.newsletter-signup-form .ml-form-embedBody { max-width: 100% !important; width: 100% !important; }
.newsletter-signup-form .ml-form-embedContainer { margin: 0 !important; }
/* Reserve vertical space so the async embed doesn't shift the sections below it
   as it renders. Min-height, not fixed height, so a taller form still fits. */
.newsletter-signup-form .ml-embedded { display: block; min-height: 210px; }
/* The MailerLite form carries its own copy of the heading and support text. Our
   module already renders that copy (and renders it even if the third-party
   script never loads), so the embed's duplicate header block is hidden here.
   This targets the form body only — the post-submit success message lives in a
   separate .ml-form-successBody and stays visible. */
.newsletter-signup-form .ml-form-embedBody .ml-form-embedContent { display: none; }
/* Let the form sit on our band instead of its own grey card, and drop the
   embed's own horizontal gutter so the fields line up with our copy column
   on narrow screens. */
.newsletter-signup-form .ml-form-embedWrapper { background-color: transparent !important; }
.newsletter-signup-form .ml-form-embedBody,
.newsletter-signup-form .ml-form-successBody { padding-inline: 0 !important; }

@media (max-width: 860px) {
  .newsletter-signup-inner { grid-template-columns: 1fr; }
  .newsletter-signup-lede { max-width: none; }
  .newsletter-signup-form .ml-embedded { min-height: 0; }
}

/* Compact footer invitation — a link, never a second embed. */
.footer-newsletter { margin-top: 1.4rem; }
.footer-newsletter h4 { margin-bottom: .4rem; }
.footer-newsletter p { color: #9fbfbe; font-size: .9rem; max-width: 34ch; margin: 0; }
.footer-newsletter a { text-decoration: underline; }