/* =============================================
   MWG · Natural Wellness
   Calming, organic, photographic. Rounded shapes,
   sage + sand + chambray-blue + clay.
   ============================================= */

/* Self-hosted fonts (latin + latin-ext subsets only).
   Source: Google Fonts (Fraunces v38, Inter v20). Files at ../fonts/.
   font-display:swap so text paints in fallback while woff2 loads. */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/inter-normal-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/inter-normal-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/inter-normal-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/inter-normal-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/inter-normal-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/inter-normal-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/inter-normal-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/inter-normal-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/fraunces-normal-400to700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/fraunces-normal-400to700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces'; font-style: italic; font-weight: 400 600; font-display: swap;
  src: url('../fonts/fraunces-italic-400to600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces'; font-style: italic; font-weight: 400 600; font-display: swap;
  src: url('../fonts/fraunces-italic-400to600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Cormorant Garamond — used by typography pair 'cormorant-inter' */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/cormorantgaramond-normal-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/cormorantgaramond-normal-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/cormorantgaramond-normal-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/cormorantgaramond-normal-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/cormorantgaramond-italic-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/cormorantgaramond-italic-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Playfair Display — used by typography pair 'playfair-sourcesans' */
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/playfairdisplay-normal-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/playfairdisplay-normal-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/playfairdisplay-normal-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/playfairdisplay-normal-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/playfairdisplay-italic-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/playfairdisplay-italic-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Source Sans 3 — used by typography pair 'playfair-sourcesans' */
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/sourcesans3-normal-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/sourcesans3-normal-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/sourcesans3-normal-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/sourcesans3-normal-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/sourcesans3-normal-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/sourcesans3-normal-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Rounded title-font options (Customizer · Typography · Title font). Variable
   woff2, one file per subset covers the whole weight range. Only loaded when the
   element actually requests the family, so they cost nothing until a rounded
   title face is selected. */
@font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/quicksand-normal-400to700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/quicksand-normal-400to700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('../fonts/fredoka-normal-300to700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('../fonts/fredoka-normal-300to700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../fonts/baloo2-normal-400to800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../fonts/baloo2-normal-400to800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Newsreader — the reading-body serif (article prose + post excerpts). Variable
   woff2, normal + italic, one file per subset covers the 400–700 weight range.
   Used via --body-font; headings stay on --serif (Fraunces) and UI on --sans. */
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/newsreader-normal-400to700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/newsreader-normal-400to700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url('../fonts/newsreader-italic-400to700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url('../fonts/newsreader-italic-400to700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --serif: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --sans:  'Inter', system-ui, sans-serif;

  /* Body font — EVERYTHING that isn't a heading: article prose, post excerpts,
     navigation, buttons, tags, meta, forms, captions, stat figures… A serif
     (Newsreader) so the whole site reads editorial. Only headings keep --serif
     (Fraunces). --sans (Inter) is no longer used directly — it stays defined so
     the Customizer "Body font → Sans" option can revert the site to Inter. */
  --body-font: 'Newsreader', Georgia, serif;

  /* Display/title font for the hero H1 + water-report masthead. Defaults to the
     serif; the Customizer "Title font" picker swaps in a rounded face (css-vars.php
     overrides this var when a rounded option is chosen). */
  --title-font: var(--serif);
  /* Water-report pages have their own title-font picker; by default they follow
     the site title font, but the Customizer can override --wq-title-font alone. */
  --wq-title-font: var(--title-font);

  /* Vertical spacing controls (Customizer · MWG · Spacing).
     --hero-gap   = the gap below the hero, before "Where we stand".
     --section-gap = extra breathing room added before every following section. */
  --hero-gap:    72px;
  --section-gap: 0px;

  --bg:        #FFFFFF;
  --card:      #F7F4ED;
  --ink:       #1F3329;
  --ink-soft:  #5C6B61;
  --sage:      #A8B89E;
  --sage-deep: #5E7464;
  --water:     #6B8FAA;
  --water-deep:#3D5C77;
  --clay:      #C97D63;
  --teal-deep: #1F5D54;   /* deep pine — water-report lead-capture CTA */
  --rule:      #E2DBCB;

  /* Water-report severity ramp — stronger warning red, used only at the
     high-risk end (verdict, severe tiers, EPA flags). */
  --alert:      #A23A2B;
  --alert-soft: #F3E4DF;
  --gold:       #C9A227;
  --violet:     #8A6FA8;

  --max-w:     1280px;

  --bg-alt: var(--card);
  --text:   var(--ink);
  --border: var(--rule);
  --r:      28px;
  --btn-radius: 100px;   /* pill default; overridden by Customizer btn_style */

  /* Font-size scale multipliers — driven by the Customizer "字号大小 Size"
     sliders (标题 / 正文 / 小字). 1 = theme default; every font-size below is
     calc(<px> * var(--fs-*)), so these scale whole tiers at once.
     css-vars.php overrides these when a slider differs from 100%. */
  --fs-title: 1;   /* headings & display: >=20px and all clamp() */
  --fs-body:  1;   /* body / nav / buttons / excerpts: 14–19px      */
  --fs-meta:  1;   /* eyebrows / tags / meta / fine print: <=13px   */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body-font);
  line-height: 1.6;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--sage-deep); text-decoration: none; }
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 48px; }

/* ── Site header / nav ────────────────────────── */
.site-header {
  background: var(--bg);
  padding: 0;
  border-bottom: none;
}
.site-header .header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 24px 48px;
  gap: 32px;
}
.site-logo { display: flex; align-items: center; gap: 12px; }
.site-logo-text {
  font-family: var(--serif);
  font-size: calc(22px * var(--fs-title));
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.site-logo-text span { font-style: italic; color: var(--sage-deep); font-weight: 400; }
.site-nav {
  list-style: none;
  display: flex;
  gap: 32px;
  font-size: calc(14px * var(--fs-body));
  font-weight: 500;
  justify-self: center;
}
.site-nav a { color: var(--ink); white-space: nowrap; } /* never split a label mid-text into a dead click zone */
.site-nav a:hover { color: var(--sage-deep); }

/* Dropdown menus */
.site-nav li { position: relative; }
.site-nav .sub-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 190px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(0,0,0,.09);
  padding: 6px 0;
  z-index: 300;
  list-style: none;
  gap: 0;
}
/* Invisible bridge that fills the 8px gap between the parent item and the
   dropdown so moving the cursor down into the sub-menu keeps :hover alive
   (otherwise crossing the gap drops the hover and the menu vanishes). */
.site-nav .sub-menu::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}
.site-nav .menu-item-has-children:hover > .sub-menu,
.site-nav .menu-item-has-children:focus-within > .sub-menu { display: block; }
.site-nav .sub-menu li { padding: 0; border: 0; }
.site-nav .sub-menu a {
  display: block;
  padding: 9px 18px;
  white-space: nowrap;
  font-size: calc(13px * var(--fs-body));
  color: var(--ink);
}
.site-nav .sub-menu a:hover { color: var(--clay); background: var(--sage-pale, #f4f6f2); }
.site-nav .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  margin-left: 5px;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid currentColor;
  vertical-align: middle;
  opacity: .6;
}

.header-right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 14px;
}
.header-social { display: none; }

/* Skip link — visible on focus */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 9999;
  background: var(--ink);
  color: var(--bg);
  padding: 10px 16px;
  border-radius: var(--btn-radius);
  font-family: var(--body-font);
  font-size: calc(13px * var(--fs-meta));
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus, .skip-link:focus-visible {
  left: 16px;
  width: auto; height: auto; clip: auto;
  outline: 2px solid var(--sage-deep);
  outline-offset: 2px;
}

/* Global focus ring — applies to anything keyboard-focused */
:focus-visible {
  outline: 2px solid var(--sage-deep);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Header search — real visible input */
.header-search-form {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(31, 51, 41, 0.18);
  border-radius: 999px;
  padding: 4px 4px 4px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.header-search-form:focus-within {
  border-color: var(--sage-deep);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(94, 116, 100, 0.12);
}
.header-search-input {
  border: 0;
  background: transparent;
  outline: none;
  font-family: var(--body-font);
  font-size: calc(13px * var(--fs-meta));
  color: var(--ink);
  padding: 6px 4px;
  width: 160px;
  min-width: 0;
}
.header-search-input::placeholder { color: var(--ink-soft); opacity: 0.7; }
.header-search-submit {
  border: 0;
  background: var(--ink);
  color: var(--bg);
  width: 30px; height: 30px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}
.header-search-submit:hover { background: var(--sage-deep); }
.header-quiz-pill {
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--btn-radius);
  padding: 10px 20px;
  font-size: calc(13px * var(--fs-meta));
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease;
}
.header-quiz-pill:hover { background: var(--sage-deep); }

/* Nav toggle (mobile hamburger) — hidden on desktop */
.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid rgba(31, 51, 41, 0.18);
  border-radius: 10px;
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-toggle-bar {
  display: block;
  width: 18px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.site-header.nat-mast { background: linear-gradient(180deg, rgba(168,184,158,0.18), transparent); }
.site-header.nat-mast .site-nav a { transition: color 0.15s ease; }
.site-header.nat-mast .site-nav a:hover { color: var(--clay); }

/* ── Hero card ────────────────────────────────── */
/* Side gap via auto-margins + max-width instead of a fixed 224px pad: at 1920
   the card is 1472 wide centred (1472 + 224*2 = 1920, identical to before), but
   it no longer stretches on 2K+/zoom-out, and narrower widths get the room back
   instead of being crushed by a fixed 448px of padding. */
.nat-hero { padding: 32px 48px var(--hero-gap, 64px); }
.nat-hero-card {
  max-width: 1472px;
  margin-left: auto;
  margin-right: auto;
  background: var(--card);
  border-radius: 36px;
  padding: 64px 56px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.nat-hero-card::before {
  content: '';
  position: absolute;
  right: -100px; top: -100px;
  width: 600px; height: 600px;
  background: radial-gradient(circle at 50% 50%, var(--sage-deep) 0, transparent 33%),
              radial-gradient(circle at 63% 40%, var(--water) 0, transparent 20%);
  opacity: 0.14;
  pointer-events: none;
}
.nat-hero-text { position: relative; z-index: 1; }
.nat-hero-kicker {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(17px * var(--fs-body));
  color: var(--sage-deep);
  letter-spacing: 0.005em;
  display: inline-block;
  padding-bottom: 12px;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(94, 116, 100, 0.28);
}
.nat-hero-text h1 {
  font-family: var(--title-font);
  font-size: calc(clamp(44px, 5.6vw, 76px) * var(--fs-title));
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}
.nat-hero-text h1 em { color: var(--sage-deep); font-style: italic; }
.nat-hero-text p {
  font-size: calc(18px * var(--fs-body));
  line-height: 1.6;
  color: var(--ink-soft);
  margin-top: 24px;
  max-width: 480px;
}
.nat-hero-cta { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.nat-btn-primary {
  background: var(--ink);
  color: var(--bg);
  border: none;
  border-radius: var(--btn-radius);
  padding: 14px 26px;
  font-size: calc(14px * var(--fs-body));
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.nat-btn-secondary {
  background: transparent;
  border: 1px solid rgba(31, 51, 41, 0.25);
  border-radius: var(--btn-radius);
  padding: 14px 26px;
  font-size: calc(14px * var(--fs-body));
  font-weight: 500;
  cursor: pointer;
  color: var(--ink);
  text-decoration: none;
  display: inline-block;
}
.nat-hero-photo {
  position: relative;
  height: 520px;
  z-index: 1;
  /* The floating founder cutout's box (z-index:1) juts up into the header row and
     its transparent top overlaps the right-hand nav items (Hydration / About),
     stealing their clicks at ~1280–1700px. It's decorative — let pointer events
     pass through to the nav underneath. (Visual is unchanged.) */
  pointer-events: none;
}
/* …but the founder bio (name, story, social links) is nested inside the photo
   column, so re-enable interaction on it — it sits below the nav and doesn't
   overlap it. Without this the IG/LinkedIn/Facebook links go dead. */
.nat-hero-bio { pointer-events: auto; }
.nat-hero-photo-main {
  width: 100%; height: 100%;
  border-radius: 32px;
  background: linear-gradient(160deg, var(--water), var(--water-deep));
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(31, 51, 41, 0.18);
}
.nat-hero-photo-main img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Hero + founder, side-by-side in one card ───────── */
/* Card drops its own grid; .nat-hero-top carries the 2-col split
   (copy left, founder portrait right). Everything is compacted so the
   whole card fits within one laptop viewport. */
/* Extra top air so the founder figure can rise above the card without
   colliding with the header / section above. Keep this >= --hero-rise + ~20px. */
/* --hero-rise = how far the figure's head pokes above the card (drag-tool /
   slider controlled, default 80px). padding-top tracks it (+24px header clearance)
   so raising the figure never collides with the header. */
.nat-hero--founder-split { padding-top: calc(var(--hero-rise, 80px) + 24px); padding-bottom: var(--hero-gap, 72px); }

/* Adjustable breathing room before each following homepage section. Default 0
   keeps the existing rhythm; the Customizer "Space between sections" slider adds
   to it. The hero→"Where we stand" gap has its own control (--hero-gap), so the
   first section (bynums) is excluded here to keep the two independent. */
.nat-tools,
.nat-cats,
.nat-trending,
.nat-dispatch { margin-top: var(--section-gap, 0px); }
.nat-hero--founder-split .nat-hero-card {
  display: block;
  padding: 0;
  max-width: none;     /* match the full-width tools/cats sections below (48px side gap) */
  overflow: visible;   /* let the figure's head/shoulders pop above the top edge */
  position: relative;
}
/* Card no longer clips, so re-contain the decorative glow to the rounded rect. */
.nat-hero--founder-split .nat-hero-card::before {
  inset: 0; right: auto; top: auto; width: auto; height: auto;
  border-radius: 36px; overflow: hidden;
}
.nat-hero-top {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 44px;
  align-items: center;
  position: relative;
  z-index: 1;
}
/* New layout: copy left, full-bleed portrait right, floating bio card overlay. */
.nat-hero--founder-split .nat-hero-top {
  align-items: stretch;   /* photo column stretches to the text-driven card height */
  grid-template-columns: 0.98fr 1.02fr;
  gap: 0;
  /* No fixed height — the card height now follows the left copy column.
     The figure is absolutely positioned (bottom-anchored) and overflows the top. */
}
.nat-hero--founder-split .nat-hero-text {
  align-self: center;
  padding: calc(56px * var(--hero-pad-scale, 1)) 30px calc(56px * var(--hero-pad-scale, 1)) 56px;
  /* Customizer "Founder position" drag tool — nudge the hero copy block x/y. */
  transform: translate(var(--hero-text-x, 0px), var(--hero-text-y, 0px));
}
.nat-hero--founder-split .nat-hero-photo {
  display: block;
  position: relative;     /* containing block for the absolute figure + bio */
  height: auto;
  min-height: 0;
  transform: none;        /* slide is applied on the figure's left offset instead */
}
/* Transparent cut-out: anchored to the card floor, taller than the (text-driven)
   card so the head/shoulders rise above the top edge. */
.nat-hero--founder-split .nat-hero-photo-main {
  position: absolute;
  inset: auto;
  left: -76px; right: 0; bottom: 0;
  /* top above the cell (= card) by --hero-rise → figure always overflows the
     card top by a constant amount, whatever the text-driven card height is.
     height:auto is required so top+bottom drive the height (the base rule's
     height:100% would otherwise win and the bottom anchor would be ignored). */
  top: calc(-1 * var(--hero-rise, 80px));
  height: auto;
  background: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  z-index: 1;
  /* Customizer "Founder position" drag tool — move (x/y) + scale the figure.
     Origin bottom-center so scaling keeps it standing on the card floor. */
  transform: translate(var(--hero-figure-x, 0px), var(--hero-figure-y, 0px)) scale(var(--hero-figure-scale, 1));
  transform-origin: bottom center;
}
.nat-hero--founder-split .nat-hero-photo-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;            /* never crop — the entire cut-out is always shown */
  object-position: center bottom; /* large figure standing on the card floor */
  transform: scaleX(-1);          /* mirror the portrait horizontally */
}
/* Bio becomes a floating white card over the lower-right of the photo. */
.nat-hero--founder-split .nat-hero-photo .nat-hero-bio {
  position: absolute;
  right: 18px;
  bottom: 92px;          /* card top lands at the upper chest / collarbone, not the neck */
  width: 480px;          /* wider → fewer lines → shorter card */
  max-width: calc(100% - 44px);
  margin: 0;
  padding: 14px 20px 12px;
  background: #fff;
  border: 0;
  border-top: 0;
  border-radius: 16px;
  box-shadow: 0 14px 44px rgba(31, 51, 41, 0.2);
  z-index: 3;            /* above the figure (z:1) so it covers the chest-down */
  /* Customizer "Founder position" tool — nudge the story card x/y. */
  transform: translate(var(--hero-bio-x, 0px), var(--hero-bio-y, 0px));
}
.nat-hero--founder-split .nat-hero-bio .nat-section-eyebrow {
  color: var(--sage-deep);
  margin-bottom: 9px;
  font-family: var(--serif);
  font-size: calc(16px * var(--fs-title));
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.nat-hero--founder-split .nat-hero-bio .nat-founder-quote {
  margin: 0;
  font-family: var(--body-font);
  font-style: normal;
  font-size: calc(12.5px * var(--fs-body));
  line-height: 1.5;
  color: var(--ink-soft);
  /* Show the full founder message — this card is the only place the quote
     renders (the old standalone founder section was retired), so clamping it
     dropped real content. */
}
.nat-hero--founder-split .nat-hero-bio .nat-founder-quote::before { display: none; }
.nat-hero--founder-split .nat-hero-bio .nat-founder-meta { margin-top: 10px; }
.nat-hero--founder-split .nat-hero-bio .nat-founder-name {
  font-size: calc(12.5px * var(--fs-meta));
  font-weight: 600;
  color: var(--ink);
}
/* Social icons — each in its own soft grey circle, no surrounding bar. */
.nat-hero--founder-split .nat-hero-bio .nat-founder-social {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding: 0;
  background: none;
  list-style: none;
}
.nat-hero--founder-split .nat-hero-bio .nat-founder-social li { margin: 0; padding: 0; }
.nat-hero--founder-split .nat-hero-bio .nat-founder-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: #F0F1F3;
  border-radius: 50%;
  color: var(--ink);
  transition: color 0.15s ease, background 0.15s ease;
}
.nat-hero--founder-split .nat-hero-bio .nat-founder-social a:hover { color: var(--clay); background: #E6E8EB; }
/* Larger headline — matches the generous sizing of the non-split hero. */
.nat-hero--founder-split .nat-hero-kicker { margin-bottom: 16px; padding-bottom: 8px; }
.nat-hero--founder-split .nat-hero-text h1 { font-size: calc(clamp(36px, 3.7vw, 52px) * var(--fs-title)); }
.nat-hero--founder-split .nat-hero-text p { margin-top: 20px; }

/* Founder bio block tucked under the hero copy. Reuses .nat-founder-* type. */
.nat-hero-bio {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(94, 116, 100, 0.28);
}
.nat-hero-bio .nat-section-eyebrow { color: var(--sage-deep); margin-bottom: 10px; }
.nat-hero-bio .nat-founder-quote { margin-top: 0; font-size: calc(18px * var(--fs-title)); line-height: 1.4; }
.nat-hero-bio .nat-founder-meta { margin-top: 14px; }

/* Subtle "meet the geek ↓" cue under the hero CTA → scrolls to founder intro. */
.nat-hero-meet {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: calc(14px * var(--fs-meta));
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color 0.18s ease;
}
.nat-hero-meet:hover { color: var(--sage-deep); }
.nat-hero-meet-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  background: var(--rule);
  box-shadow: 0 0 0 1px rgba(31, 51, 41, 0.06), 0 2px 6px rgba(31, 51, 41, 0.10);
}
.nat-hero-meet-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.nat-hero-meet-label { border-bottom: 1px solid rgba(94, 116, 100, 0.35); padding-bottom: 1px; }

/* Anchored scroll for in-page jumps (founder intro, tap-water lookup). */
#meet-founder, #tap-water { scroll-margin-top: 24px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ── Hero variant: centered (text-only, no photo) ─────────────── */
.nat-hero[data-variant=centered] .nat-hero-card {
  grid-template-columns: 1fr;
  text-align: center;
  padding: 96px 56px;
}
.nat-hero[data-variant=centered] .nat-hero-photo { display: none; }
.nat-hero[data-variant=centered] .nat-hero-text {
  max-width: 820px;
  margin: 0 auto;
}
.nat-hero[data-variant=centered] .nat-hero-kicker {
  display: inline-block;
  border-bottom: 1px solid rgba(94, 116, 100, 0.28);
}
.nat-hero[data-variant=centered] .nat-hero-text h1 {
  font-size: calc(84px * var(--fs-title));
  line-height: 0.98;
}
.nat-hero[data-variant=centered] .nat-hero-text p {
  margin-left: auto;
  margin-right: auto;
}
.nat-hero[data-variant=centered] .nat-hero-cta {
  justify-content: center;
}

/* ── Hero variant: full-bg (image fills the card, text overlay) ─ */
.nat-hero[data-variant=full-bg] .nat-hero-card {
  grid-template-columns: 1fr;
  padding: 96px 56px;
  position: relative;
  min-height: 560px;
  align-items: flex-end;
}
.nat-hero[data-variant=full-bg] .nat-hero-card::before {
  /* Dark gradient for text legibility — covers bottom 2/3 where text sits. */
  background: linear-gradient(180deg, rgba(31,51,41,0) 30%, rgba(31,51,41,0.7) 100%);
  opacity: 1;
  right: 0; top: 0;
  width: 100%; height: 100%;
  z-index: 1;
}
.nat-hero[data-variant=full-bg] .nat-hero-photo {
  position: absolute;
  inset: 0;
  height: auto;
  z-index: 0;
}
.nat-hero[data-variant=full-bg] .nat-hero-photo-main {
  border-radius: 36px;
  box-shadow: none;
}
.nat-hero[data-variant=full-bg] .nat-hero-text {
  z-index: 2;
  max-width: 760px;
  color: var(--bg);
}
.nat-hero[data-variant=full-bg] .nat-hero-kicker {
  color: var(--bg);
  border-bottom-color: rgba(255,255,255,0.4);
}
.nat-hero[data-variant=full-bg] .nat-hero-text h1,
.nat-hero[data-variant=full-bg] .nat-hero-text p {
  color: var(--bg);
}
.nat-hero[data-variant=full-bg] .nat-hero-text h1 em {
  color: var(--card);
}
.nat-hero[data-variant=full-bg] .nat-hero-text p {
  color: rgba(255,255,255,0.92);
}

@media (max-width: 900px) {
  .nat-hero[data-variant=centered] .nat-hero-text h1 { font-size: calc(56px * var(--fs-title)); }
  .nat-hero[data-variant=full-bg]  .nat-hero-card    { padding: 80px 28px; min-height: 420px; }
}
.nat-hero-quizcard {
  position: absolute;
  left: 0; bottom: 24px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 24px;
  padding: 22px;
  width: 260px;
  box-shadow: 0 20px 50px rgba(31, 51, 41, 0.12);
}
.nat-hero-quizcard .nat-quiz-eyebrow {
  font-size: calc(11px * var(--fs-meta));
  color: var(--sage-deep);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.nat-hero-quizcard h3 {
  font-family: var(--serif);
  font-size: calc(22px * var(--fs-title));
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.nat-hero-quizcard p {
  font-size: calc(13px * var(--fs-meta));
  line-height: 1.5;
  color: var(--ink-soft);
  margin-top: 8px;
}
.nat-hero-quizcard a {
  margin-top: 14px;
  width: 100%;
  background: var(--sage-deep);
  color: white;
  border: none;
  border-radius: var(--btn-radius);
  padding: 11px 0;
  font-size: calc(13px * var(--fs-meta));
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  display: block;
  text-decoration: none;
}
.nat-hero-badge {
  position: absolute;
  top: 30px; left: 20px;
  background: var(--clay);
  color: white;
  padding: 12px 18px;
  border-radius: var(--btn-radius);
  font-size: calc(12px * var(--fs-meta));
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: 0 10px 30px rgba(201, 125, 99, 0.3);
  transform: rotate(-3deg);
}

/* ── Pillars (4 rounded cards) ───────────────── */
.nat-trending { padding: 64px 48px 80px; }
.nat-cats { padding: 0 48px 64px; }
.nat-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 48px;
}
.nat-section-eyebrow {
  font-size: calc(16px * var(--fs-body));
  color: var(--sage-deep);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.nat-section-head h2 {
  font-family: var(--serif);
  font-size: calc(clamp(32px, 4vw, 52px) * var(--fs-title));
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
  line-height: 1.05;
}
.nat-section-head h2 em { color: var(--sage-deep); font-style: italic; }
.nat-section-link {
  font-size: calc(13px * var(--fs-meta));
  color: var(--ink);
  font-weight: 600;
}
/* Trending — auto-scrolling marquee of recent posts */
.nat-trending-marquee {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}
.nat-trending-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: nat-trend-marquee 100s linear infinite;
}
.nat-trending-marquee:hover .nat-trending-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .nat-trending-track { animation: none; }
  .nat-trending-marquee { overflow-x: auto; }
}
@keyframes nat-trend-marquee {
  /* Track holds the cards twice; -50% lands half a gap short of a clean copy
     boundary, so subtract gap/2 (12px) to make the loop seamless. */
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 12px)); }
}
.nat-trending-card {
  flex: 0 0 260px;
  /* Explicit width (not just flex-basis): the track is `width: max-content`,
     which otherwise sizes each card to its UNWRAPPED title and inflates the
     track far past the rendered cards, leaving a huge empty tail that scrolls
     into view as a blank gap mid-loop. A definite width caps that. */
  width: 260px;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.18s ease;
}
.nat-trending-card:hover { transform: translateY(-2px); }
.nat-trending-photo {
  position: relative;
  width: calc(100% * var(--trending-img-scale, 1));
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  background-color: var(--card);
  overflow: hidden;
}
.nat-trending-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.nat-trending-body { padding: 14px 2px 0; }
.nat-trending-tag {
  font-size: calc(13px * var(--fs-meta) * var(--trending-font-scale, 1));
  color: var(--sage-deep);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.nat-trending-card h3 {
  font-family: var(--serif);
  font-size: calc(19px * var(--fs-title) * var(--trending-font-scale, 1));
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin: 0 0 8px;
  color: var(--ink);
}
.nat-trending-meta { font-size: calc(14px * var(--fs-body) * var(--trending-font-scale, 1)); color: var(--ink-soft); }

/* Categories — Healthline-style image cards */
.nat-cats-grid {
  display: grid;
  /* --cats-cols is set inline from PHP = number of tiles actually shown,
     so the row always fills no matter how many tiles the editor enables. */
  grid-template-columns: repeat(var(--cats-cols, 5), 1fr);
  gap: 18px;
}
.nat-cat-card {
  display: flex;
  flex-direction: column;
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.18s ease;
}
.nat-cat-card:hover { transform: translateY(-3px); }
.nat-cat-photo {
  width: calc(100% * var(--cats-img-scale, 1));
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  margin: 0 auto 14px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(31, 51, 41, 0.04);
  position: relative;
}
.nat-cat-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Tile shape variants — Customizer-driven (MWG · 首页 → 分类 5 列 → 分类磁贴形状) */
.nat-cats-grid[data-tile-shape="circle"] .nat-cat-photo {
  width: 75%;
  max-width: 160px;
  border-radius: 50%;
  margin: 0 auto 16px;
}
.nat-cats-grid[data-tile-shape="circle"] .nat-cat-photo img { mix-blend-mode: multiply; }
.nat-cats-grid[data-tile-shape="circle"] .nat-cat-card,
.nat-cats-grid[data-tile-shape="circle"] .nat-cat-label,
.nat-cats-grid[data-tile-shape="circle"] .nat-cat-count { text-align: center; }

.nat-cats-grid[data-tile-shape="squircle"] .nat-cat-photo {
  border-radius: 28px;
}
.nat-cat-label {
  font-family: var(--body-font);
  font-size: calc(16px * var(--fs-body) * var(--cats-font-scale, 1));
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.nat-cat-blurb {
  margin-top: 5px;
  font-size: calc(13px * var(--fs-meta) * var(--cats-font-scale, 1));
  line-height: 1.45;
  color: var(--ink-soft);
}
.nat-cat-card .nat-cat-count {
  margin-top: 4px;
  font-size: calc(12px * var(--fs-meta) * var(--cats-font-scale, 1));
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

/* ── Tools (featured + 3 cards, Healthline-style) ── */
.nat-tools { padding: 0 48px 60px; }
.nat-tools-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
/* Feature/capture card — wide horizontal split (form-left, photo-right) per the
   epatool design. Full-width row; the 3 article cards sit in a row below it. */
.nat-tools-feature {
  display: grid;
  grid-template-columns: 0.92fr 1fr;
  align-items: stretch;
  background: var(--card);
  border-radius: 28px;
  /* NOT overflow:hidden — that clipped the ZIP autocomplete dropdown at the
     card's edge. The photo rounds its own right corners instead, and the card's
     rounded background is preserved by border-radius regardless. */
  overflow: visible;
  color: var(--ink);
  text-decoration: none;
}
.nat-tools-feature-photo {
  order: 2; /* right column (photo is first in source so it can lead on mobile) */
  position: relative; /* anchor the absolute img below */
  width: 100%;
  min-height: 260px;
  background-color: var(--rule);
  overflow: hidden;
  border-radius: 0 28px 28px 0;
}
/* Absolutely positioned so the photo covers whatever height the text column sets
   — the image NO LONGER drives card height, so a wider image column can't make
   the card taller (object-fit:cover just crops more). */
.nat-tools-feature-photo img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.nat-tools-feature-body {
  padding: 22px 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.nat-tools-feature-eyebrow {
  font-size: calc(13px * var(--fs-meta));
  color: var(--sage-deep);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.nat-tools-feature-body h3 {
  font-family: var(--serif);
  font-size: calc(36px * var(--fs-title));
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  text-wrap: balance;
}
.nat-tools-feature-body p {
  font-size: calc(17px * var(--fs-body));
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0 0 14px;
  max-width: none;
}
.nat-tools-feature-cta {
  align-self: flex-start;
  margin-top: auto;
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--btn-radius);
  padding: 10px 20px;
  font-size: calc(13px * var(--fs-meta));
  font-weight: 600;
}

.nat-tools-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.nat-tools-card {
  padding: 4px 28px;
  border-right: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
  display: block;
  transition: transform 0.18s ease;
}
.nat-tools-card:first-child { padding-left: 4px; }
.nat-tools-card:last-child { border-right: none; padding-right: 4px; }
.nat-tools-card:hover { transform: translateY(-2px); }
.nat-tools-card-tag {
  display: inline-block;
  font-size: calc(11px * var(--fs-meta));
  color: var(--sage-deep);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.nat-tools-card h4 {
  font-family: var(--serif);
  font-size: calc(22px * var(--fs-title));
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 0 0 6px;
  color: var(--ink);
}
.nat-tools-card p {
  font-size: calc(14px * var(--fs-body));
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 10px;
}
.nat-tools-card-link {
  font-size: calc(13px * var(--fs-meta));
  font-weight: 600;
  color: var(--sage-deep);
  letter-spacing: 0.005em;
}

/* ── By the numbers (site-level stat strip) ──── */
.nat-bynums { padding: 0 48px 80px; text-align: center; }
.nat-bynums-eyebrow {
  font-family: var(--body-font);
  font-size: calc(12px * var(--fs-meta));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage-deep);
  font-weight: 600;
  display: inline-block;
  padding-bottom: 16px;
  margin-bottom: 28px;
  /* tapered hairline that dissolves at both ends (rhymes with the cell dividers) */
  background: linear-gradient(90deg, transparent, rgba(94, 116, 100, 0.34) 50%, transparent)
              bottom center / 72px 1px no-repeat;
}
/* Open "trust band" — no card box (it sits right under the hero card, so a
   second bordered/tinted box reads as box-on-box, the same reason the founder
   block below drops its box). Defined by top/bottom hairlines + inset gradient
   dividers floating between cells. */
.nat-bynums-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.35fr;  /* 3 figures + a trimmed statement */
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  margin: 0;
}
.nat-bynums-stat {
  padding: 36px 32px 34px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
/* inset vertical dividers — hairlines between content, not edge-to-edge walls */
.nat-bynums-stat + .nat-bynums-stat::before {
  content: "";
  position: absolute;
  left: 0; top: 26px; bottom: 26px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--rule) 20%, var(--rule) 80%, transparent);
}
/* Statement cell — prose "promise", no figure; top-aligned to share the row's
   datum, set off by a stronger (sage-deep) inset gradient divider. */
.nat-bynums-statement { text-align: center; }
.nat-bynums-stat + .nat-bynums-statement::before {
  background: linear-gradient(180deg, transparent 12%, rgba(94, 116, 100, 0.42) 50%, transparent 88%);
}
.nat-bynums-statement-text {
  font-family: var(--serif);
  font-size: calc(clamp(16px, 1.55vw, 19px) * var(--fs-body));
  line-height: 1.55;
  color: var(--ink);
  letter-spacing: 0.002em;
  margin: 0 auto;
  max-width: 30ch;
  text-wrap: balance;
  order: 2;
}
.nat-bynums-stat-n {
  font-family: var(--serif);
  font-size: calc(clamp(40px, 4.4vw, 56px) * var(--fs-title));
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin: 0;
  order: 2;
}
.nat-bynums-stat-l {
  font-family: var(--body-font);
  font-size: calc(11px * var(--fs-meta));
  letter-spacing: 0.18em;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--sage-deep);
  font-weight: 500;
  margin: 0;
  order: 1;
  /* Reserve a fixed two-line slot and seat the label at its bottom, so the big
     figures (and the statement's first line) always start on the same row even
     when an edited label wraps to two lines — the cause of the misalignment. */
  min-height: 2.4em;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
}
.nat-bynums-stat-c {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(13px * var(--fs-meta));
  line-height: 1.4;
  color: var(--ink-soft);
  letter-spacing: 0.005em;
  margin: 8px 0 0;
  order: 3;
  text-wrap: balance;
}
@media (max-width: 900px) {
  .nat-bynums-stat { padding: 28px 22px 26px; }
  .nat-bynums-stat-c { font-size: calc(12px * var(--fs-meta)); }
}
@media (max-width: 720px) {
  .nat-bynums { padding-left: 20px; padding-right: 20px; padding-bottom: 60px; }
  .nat-bynums-grid { grid-template-columns: repeat(2, 1fr); }
  /* horizontal rules between stacked rows; vertical divider stays only in the top 2-up row */
  .nat-bynums-stat:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .nat-bynums-stat:nth-child(3)::before,
  .nat-bynums-statement::before { display: none; }
  .nat-bynums-stat:nth-child(3) { grid-column: 1 / -1; }
  .nat-bynums-statement {
    grid-column: 1 / -1;
    text-align: center;
    border-top: 1px solid var(--rule);
  }
  .nat-bynums-statement-text {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    text-wrap: pretty;
  }
}

/* ── Founder card ───────────────────────────── */
.nat-founder { padding: 8px 48px 56px; }
/* Open editorial "meet the founder" — no card box (it sits right under the
   hero card, so a second bordered box reads as box-on-box). Portrait + bio
   float on the page; a hairline below delineates the section. */
.nat-founder-card {
  color: var(--ink);
  max-width: 960px;
  margin: 0 auto;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--rule);
}
.nat-founder-main {
  display: grid;
  grid-template-columns: minmax(230px, 0.8fr) 1.2fr;
  gap: 44px;
  align-items: center;
}
.nat-founder-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--rule);
  border-radius: 20px;
}
.nat-founder-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.nat-founder-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.nat-founder-body .nat-section-eyebrow {
  color: var(--sage-deep);
  margin-bottom: 14px;
}
.nat-founder-logo {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  margin-bottom: 18px;
  text-decoration: none;
  transition: transform 0.18s ease;
}
.nat-founder-logo:hover {
  transform: translateY(-1px);
}
.nat-founder-logo img {
  display: block;
  height: 22px;
  width: auto;
}
.nat-founder-quote {
  font-family: var(--serif);
  font-size: calc(21px * var(--fs-title));
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0 0 22px;
  position: relative;
  color: var(--ink);
}
.nat-founder-quote::before {
  content: '"';
  position: absolute;
  top: -28px; left: -8px;
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(90px * var(--fs-title));
  color: var(--sage);
  opacity: 0.55;
  line-height: 1;
  pointer-events: none;
}
.nat-founder-quote em { font-style: italic; color: var(--sage-deep); }
.nat-founder-meta { margin-bottom: 18px; }
.nat-founder-name {
  font-family: var(--serif);
  font-size: calc(17px * var(--fs-body));
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.nat-founder-role {
  font-size: calc(12px * var(--fs-meta));
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.nat-founder-social {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 8px;
}
.nat-founder-social a {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--btn-radius);
  background: var(--rule);
  color: var(--ink);
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.nat-founder-social a:hover {
  background: var(--sage-deep);
  color: #FFFFFF;
  transform: translateY(-1px);
}
.nat-founder-social svg { display: block; width: 16px; height: 16px; }

/* ── Tap-water ZIP lookup form — lives inside the Tools feature card.
   White pill on the sand feature body; the button is the "check your water"
   CTA. The inline tap-check script appends the ZIP as a path segment. */
.nat-tools-feature .nat-tapcheck-form { margin-top: auto; }
/* In-card ZIP + email capture: the .nat-wq-audit-form base styling is tuned for
   the standalone landing (teal, tall boxy fields). Inside this sage card, re-skin
   it to the card's own palette/rhythm so it doesn't read as a foreign element —
   matching the original tap-check pill (white fields, ink→sage-deep button). */
.nat-tools-feature .nat-wq-audit-form { margin-top: 16px; gap: 8px; max-width: none; grid-template-columns: 1fr 1fr; }
.nat-tools-feature .nat-wq-audit-form input {
  padding: 11px 15px;
  border-radius: var(--btn-radius);
  font-size: calc(14.5px * var(--fs-body));
}
.nat-tools-feature .nat-wq-audit-form input:focus {
  border-color: var(--sage-deep);
  box-shadow: 0 0 0 3px rgba(94, 116, 100, 0.12);
}
/* ZIP + email share a row; button + fine print span both columns underneath —
   keeps the capture compact so the card + cards row stay within one screen. */
.nat-tools-feature .nat-wq-audit-btn {
  grid-column: 1 / -1;
  margin-top: 0;
  padding: 11px 20px;
  border-radius: var(--btn-radius);
  background: var(--ink);
  font-size: calc(13px * var(--fs-meta));
}
.nat-tools-feature .nat-wq-audit-btn:hover { background: var(--sage-deep); }
/* Privacy microcopy: small lock glyph + text on one baseline-aligned row,
   sat just under the button and flush with the form's left edge. */
.nat-tools-feature .nat-wq-audit-fine {
  grid-column: 1 / -1;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: calc(12px * var(--fs-meta));
  line-height: 1.4;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}
.nat-tools-feature .nat-wq-audit-fine-ic {
  flex: none;
  color: var(--sage-deep);
  opacity: 0.9;
}
.nat-tapcheck-form {
  display: flex;
  gap: 6px;
  background: #FFFFFF;
  border: 1px solid var(--rule);
  border-radius: var(--btn-radius);
  padding: 4px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  max-width: 420px;
}
.nat-tapcheck-form:focus-within {
  border-color: var(--sage-deep);
  box-shadow: 0 0 0 3px rgba(94, 116, 100, 0.12);
}
.nat-tapcheck-form input {
  flex: 1;
  min-width: 9em;
  padding: 11px 16px;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--body-font);
  font-size: calc(14px * var(--fs-body));
  color: var(--ink);
}
.nat-tapcheck-form input::placeholder { color: var(--ink-soft); opacity: 0.6; }
.nat-tapcheck-form button {
  padding: 11px 20px;
  border: none;
  border-radius: var(--btn-radius);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--body-font);
  font-size: calc(13px * var(--fs-meta));
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s ease;
}
.nat-tapcheck-form button:hover { background: var(--sage-deep); }

/* ── Sunday Dispatch — standalone band (split out of the founder card) ── */
.nat-dispatch { padding: 8px 48px 72px; }
.nat-dispatch-card {
  max-width: 960px;
  margin: 0 auto;
  border: 1px solid var(--rule);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(31, 51, 41, 0.06);
}
.nat-dispatch .nat-founder-dispatch { border-top: none; }

/* ── Fresh articles (4-col grid) ─────────────── */
.nat-fresh { padding: 0 48px 80px; }
.nat-fresh-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 28px;
}
.nat-fresh-card {
  background: var(--card);
  border-radius: 24px;
  border: 1px solid var(--rule);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
}
.nat-fresh-photo {
  height: 160px;
  background: linear-gradient(135deg, var(--sage), var(--water));
}
.nat-fresh-body { padding: 18px; }
.nat-fresh-tag {
  font-size: calc(10px * var(--fs-meta));
  color: var(--sage-deep);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.nat-fresh-body h3 {
  font-family: var(--serif);
  font-size: calc(18px * var(--fs-body));
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.nat-fresh-meta {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--rule);
  font-size: calc(12px * var(--fs-meta));
  color: var(--ink-soft);
}

/* ── Founder dispatch band (inside founder card) ─ */
.nat-founder-dispatch {
  border-top: 1px solid var(--rule);
  background: rgba(168, 184, 158, 0.10);
  padding: 24px 40px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
}
.nat-founder-dispatch-text { min-width: 0; }
.nat-founder-dispatch-kicker {
  font-family: var(--body-font);
  font-size: calc(10px * var(--fs-meta));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage-deep);
  font-weight: 600;
  margin-bottom: 4px;
}
.nat-founder-dispatch-copy {
  font-family: var(--serif);
  font-size: calc(17px * var(--fs-body));
  line-height: 1.3;
  margin: 0 0 4px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.nat-founder-dispatch-copy em { font-style: italic; color: var(--sage-deep); }
.nat-founder-dispatch-foot {
  font-size: calc(11px * var(--fs-meta));
  color: var(--ink-soft);
  margin: 0;
  letter-spacing: 0.02em;
}
.nat-founder-dispatch-form {
  display: flex;
  gap: 6px;
  background: #FFFFFF;
  border: 1px solid var(--rule);
  border-radius: var(--btn-radius);
  padding: 4px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  min-width: 320px;
}
.nat-founder-dispatch-form:focus-within {
  border-color: var(--sage-deep);
  box-shadow: 0 0 0 3px rgba(94, 116, 100, 0.12);
}
.nat-founder-dispatch-form input {
  flex: 1;
  min-width: 0;
  padding: 10px 16px;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--body-font);
  font-size: calc(13px * var(--fs-meta));
  color: var(--ink);
}
.nat-founder-dispatch-form input:focus-visible { outline: none; }
.nat-founder-dispatch-form input::placeholder {
  color: var(--ink-soft);
  opacity: 0.6;
}
.nat-founder-dispatch-form button {
  padding: 10px 18px;
  border: none;
  border-radius: var(--btn-radius);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--body-font);
  font-size: calc(12px * var(--fs-meta));
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s ease;
}
.nat-founder-dispatch-form button:hover { background: var(--sage-deep); }
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Site footer (4 cols) ────────────────────── */
.site-footer {
  background: var(--bg);
  padding: 48px 0 24px;
  border-top: 1px solid var(--rule);
  color: var(--ink);
}
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 32px;
  border-bottom: 1px dashed var(--rule);
}
.footer-brand .site-logo-text { font-size: calc(22px * var(--fs-title)); }
.footer-brand p {
  margin-top: 12px;
  font-size: calc(14px * var(--fs-body));
  line-height: 1.6;
  color: var(--ink-soft);
}
.footer-col-title {
  font-size: calc(12px * var(--fs-meta));
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin-bottom: 12px;
}
.footer-links { list-style: none; }
.footer-links li { padding: 4px 0; }
.footer-links a {
  color: var(--ink);
  text-decoration: none;
  font-size: calc(14px * var(--fs-body));
}
.footer-links a:hover { color: var(--sage-deep); }
.footer-social { display: grid; gap: 8px; }
.footer-social-link {
  display: flex; align-items: center; gap: 8px;
  color: var(--ink); font-size: calc(13px * var(--fs-meta));
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 18px;
  font-size: calc(12px * var(--fs-meta));
  color: var(--ink-soft);
}

/* ── Other templates: single, archive, search, page, 404 ── */
#site-content { background: var(--bg); }

/* Reading progress */
.reading-progress {
  position: fixed; top: 0; left: 0; height: 3px;
  background: var(--sage-deep); width: 0%; z-index: 100;
  transition: width 0.1s ease-out;
}

/* Breadcrumb */
.breadcrumb {
  font-family: var(--body-font);
  font-size: calc(12px * var(--fs-meta)); letter-spacing: 0.08em;
  color: var(--ink-soft);
  padding: 28px 48px 0; max-width: var(--max-w); margin: 0 auto;
}
.breadcrumb a { color: var(--sage-deep); text-decoration: none; }
.breadcrumb a:hover { color: var(--clay); }
.breadcrumb .bc-sep { padding: 0 8px; opacity: 0.5; }
.breadcrumb-light { padding-bottom: 12px; }

/* Archive featured card (page 1, first post — bigger, two-up image + body) */
.nat-archive-featured {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 32px;
  background: var(--card);
  border-radius: var(--r);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  margin-bottom: 32px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.nat-archive-featured:hover { transform: translateY(-2px); box-shadow: 0 14px 50px rgba(31, 51, 41, 0.10); }
.nat-archive-featured-photo {
  min-height: 320px;
  background: var(--rule) center/cover no-repeat;
}
.nat-archive-featured-body {
  padding: 36px 32px;
  display: flex; flex-direction: column; justify-content: center;
}
.nat-archive-featured-tag {
  display: inline-block;
  font-size: calc(11px * var(--fs-meta)); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sage-deep); font-weight: 600;
  margin-bottom: 14px;
}
.nat-archive-featured h2 {
  font-family: var(--serif);
  font-size: calc(34px * var(--fs-title)); font-weight: 500; line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}
.nat-archive-featured p {
  font-family: var(--body-font);
  font-size: calc(16px * var(--fs-body)); color: var(--ink-soft); line-height: 1.55;
  margin: 0 0 18px;
}
.nat-archive-featured-meta {
  font-size: calc(13px * var(--fs-meta)); color: var(--ink-soft); font-style: italic;
  display: flex; gap: 10px; align-items: center;
}
@media (max-width: 900px) {
  .nat-archive-featured { grid-template-columns: 1fr; gap: 0; }
  .nat-archive-featured-photo { min-height: 220px; }
  .nat-archive-featured-body { padding: 28px 24px 32px; }
  .nat-archive-featured h2 { font-size: calc(28px * var(--fs-title)); }
}

/* Water Quiz page */
.quiz-page { background: var(--bg); min-height: 100vh; }
.quiz-header-strip {
  background: var(--card);
  padding: 32px 24px 24px;
  text-align: center;
  border-bottom: 1px solid var(--rule);
}
.quiz-logo { font-family: var(--serif); font-size: calc(22px * var(--fs-title)); font-weight: 500; margin-bottom: 6px; }
.quiz-header-sub { font-size: calc(14px * var(--fs-body)); color: var(--ink-soft); margin: 0; }
.quiz-progress-wrap {
  background: var(--rule);
  height: 4px;
}
.quiz-progress-bar {
  background: var(--sage-deep);
  height: 100%;
  width: 0;
  transition: width 0.3s ease;
}
.quiz-shell {
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}
.quiz-step-counter {
  text-align: center;
  font-size: calc(13px * var(--fs-meta));
  color: var(--sage-deep);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 32px;
}
.quiz-step { display: none; }
.quiz-step.active { display: block; animation: quiz-slide-in 0.3s ease; }
@keyframes quiz-slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.quiz-q {
  font-family: var(--serif);
  font-size: calc(32px * var(--fs-title)); font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  text-align: center;
}
.quiz-hint {
  text-align: center;
  font-size: calc(15px * var(--fs-body));
  color: var(--ink-soft);
  margin-bottom: 28px;
  line-height: 1.5;
}
.quiz-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }
.quiz-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border: 1.5px solid var(--rule);
  border-radius: 14px;
  font-size: calc(15px * var(--fs-body));
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  background: var(--bg);
}
.quiz-opt:hover { border-color: var(--sage); background: var(--card); }
.quiz-opt input { margin: 0; accent-color: var(--sage-deep); }
.quiz-opt.selected {
  border-color: var(--sage-deep);
  background: rgba(168, 184, 158, 0.15);
}
.quiz-nav {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
}
.quiz-back-btn {
  background: transparent;
  border: 1.5px solid var(--rule);
  color: var(--ink-soft);
  padding: 12px 22px;
  border-radius: var(--btn-radius);
  font-size: calc(14px * var(--fs-body));
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.quiz-back-btn:hover { border-color: var(--ink); color: var(--ink); }
.quiz-next-btn, .quiz-submit-btn {
  margin-left: auto;
  background: var(--sage-deep);
  color: var(--bg);
  border: none;
  padding: 12px 28px;
  border-radius: var(--btn-radius);
  font-size: calc(14px * var(--fs-body));
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.quiz-next-btn:hover, .quiz-submit-btn:hover { background: var(--ink); transform: translateY(-1px); }
.quiz-next-btn:disabled { background: var(--rule); color: var(--ink-soft); cursor: not-allowed; transform: none; }
.quiz-email-icon {
  font-size: calc(48px * var(--fs-title)); text-align: center; margin-bottom: 12px;
}
.quiz-email-fields { display: flex; flex-direction: column; gap: 18px; margin-bottom: 28px; }
.quiz-field label {
  display: block;
  font-size: calc(13px * var(--fs-meta));
  color: var(--ink-soft);
  margin-bottom: 6px;
  font-weight: 500;
}
.quiz-optional { color: var(--ink-soft); font-weight: 400; }
.quiz-required { color: var(--clay); }
.quiz-field input {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--rule);
  border-radius: 12px;
  font-size: calc(16px * var(--fs-body));
  font-family: var(--body-font);
  background: var(--bg);
  transition: border-color 0.15s ease;
}
.quiz-field input:focus { border-color: var(--sage-deep); }
.quiz-field input:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 2px; }
.quiz-field input.invalid { border-color: var(--clay); }
.quiz-field-error {
  display: none;
  color: var(--clay);
  font-size: calc(13px * var(--fs-meta));
  margin-top: 6px;
}
.quiz-privacy {
  font-size: calc(13px * var(--fs-meta));
  color: var(--ink-soft);
  text-align: center;
  margin: 8px 0 0;
}
.quiz-success { text-align: center; padding: 32px 0; }
.quiz-success-icon { font-size: calc(56px * var(--fs-title)); margin-bottom: 16px; }
.quiz-success-title {
  font-family: var(--serif);
  font-size: calc(36px * var(--fs-title));
  font-weight: 500;
  margin-bottom: 16px;
}
.quiz-success-body { font-size: calc(16px * var(--fs-body)); line-height: 1.6; color: var(--ink); margin-bottom: 24px; }
.quiz-success-note { font-size: calc(14px * var(--fs-body)); color: var(--ink-soft); margin-bottom: 20px; }
.quiz-success-btn {
  display: inline-block;
  background: var(--sage-deep);
  color: var(--bg);
  padding: 12px 28px;
  border-radius: var(--btn-radius);
  text-decoration: none;
  font-weight: 600;
  font-size: calc(14px * var(--fs-body));
}
.quiz-success-btn:hover { background: var(--ink); }
.quiz-error-msg {
  background: rgba(201, 125, 99, 0.12);
  color: var(--clay);
  padding: 16px 20px;
  border-radius: 12px;
  font-size: calc(14px * var(--fs-body));
  text-align: center;
  margin-top: 24px;
}
@media (max-width: 600px) {
  .quiz-q { font-size: calc(26px * var(--fs-title)); }
  .quiz-shell { padding: 32px 16px 60px; }
  .quiz-opt { padding: 14px 16px; font-size: calc(14px * var(--fs-body)); }
}

/* Contact page card + socials */
.nat-contact-card {
  background: var(--card);
  border-radius: var(--r);
  padding: 40px 32px;
  text-align: center;
  margin: 48px 0 32px;
}
.nat-contact-card-eyebrow {
  font-size: calc(12px * var(--fs-meta)); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sage-deep); font-weight: 600;
  margin-bottom: 18px;
}
.nat-contact-card-email {
  display: inline-block;
  font-family: var(--serif);
  font-size: calc(32px * var(--fs-title)); font-weight: 500;
  color: var(--ink); text-decoration: none;
  border-bottom: 2px solid var(--clay);
  padding-bottom: 4px;
}
.nat-contact-card-email:hover { color: var(--clay); }
.nat-contact-card-note { font-size: calc(14px * var(--fs-body)); color: var(--ink-soft); margin-top: 18px; }
.nat-contact-socials { text-align: center; margin-bottom: 48px; }
.nat-contact-socials-label {
  font-size: calc(13px * var(--fs-meta)); color: var(--ink-soft); margin-bottom: 14px;
}
.nat-contact-socials ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 18px; justify-content: center; flex-wrap: wrap;
}
.nat-contact-socials a {
  display: inline-block;
  font-family: var(--body-font); font-size: calc(14px * var(--fs-body));
  color: var(--ink); text-decoration: none;
  padding: 10px 18px;
  border: 1px solid var(--rule);
  border-radius: var(--btn-radius);
  transition: background 0.15s ease;
}
.nat-contact-socials a:hover { background: var(--card); }
.nat-contact-extra { margin-top: 16px; }
@media (max-width: 720px) {
  .nat-contact-card { padding: 32px 20px; }
  .nat-contact-card-email { font-size: calc(24px * var(--fs-title)); }
}

/* About page hero CTA & single-column layout */
.nat-about-hero-cta { margin-top: 24px; }
.post-layout-single { grid-template-columns: minmax(0, 1fr); }
.post-layout-single .post { max-width: 760px; margin: 0 auto; }
.post-layout-single .post-content { font-size: calc(17px * var(--fs-body)); }

/* About page editorial heading + figure caption (mwg_about_content_html) */
.nat-about-body .mwg-about-h1 {
  font-family: var(--serif);
  font-size: calc(clamp(30px, 4vw, 44px) * var(--fs-title));
  line-height: 1.1;
  margin: 0 0 6px;
  color: var(--ink);
}
.nat-about-body .mwg-about-eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(20px * var(--fs-title));
  color: var(--sage-deep);
  margin: 0 0 28px;
}
.nat-about-body .mwg-about-photo img { width: 100%; height: auto; border-radius: 12px; display: block; }
.nat-about-body .mwg-about-ces { margin: 28px 0; }
.nat-about-body .mwg-about-ces figcaption {
  margin-top: 10px;
  font-size: calc(13.5px * var(--fs-meta));
  color: var(--ink-soft);
  line-height: 1.5;
  font-style: italic;
}

/* Single post hero band (full-width sage band wrapping eyebrow/title/deck/meta) */
.nat-post-hero {
  background: #F0EADC;
  padding: 72px 24px 64px;
  margin: 16px 0 0;
  border-radius: var(--r);
  margin-left: 48px;
  margin-right: 48px;
}
.nat-post-hero-inner {
  max-width: 880px; margin: 0 auto;
  text-align: center;
}
.nat-post-hero .post-header-tag { background: rgba(94, 116, 100, 0.12); }
.nat-post-hero .post-title { margin-top: 0; }
.nat-post-feature {
  max-width: 1080px; margin: 32px auto 48px;
  padding: 0 24px;
}
.nat-post-feature img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r);
  box-shadow: 0 14px 50px rgba(31, 51, 41, 0.10);
}
.nat-post-hero + .nat-post-feature { margin-top: 24px; position: relative; z-index: 1; }
@media (max-width: 720px) {
  .nat-post-hero { padding: 48px 20px 40px; margin-left: 16px; margin-right: 16px; }
  .nat-post-hero + .nat-post-feature { margin-top: 18px; }
}

/* Single post header (legacy — kept for compatibility) */
.post-header {
  text-align: center;
  padding: 56px 48px 36px;
  max-width: 880px; margin: 0 auto;
}
.post-header-tag {
  display: inline-block;
  font-family: var(--body-font); font-size: calc(11px * var(--fs-meta));
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sage-deep); text-decoration: none;
  background: rgba(168, 184, 158, 0.25);
  padding: 6px 14px; border-radius: var(--btn-radius);
  margin-bottom: 18px;
}
.post-header .post-title,
.nat-post-hero-inner .post-title {
  font-family: var(--serif); font-size: calc(56px * var(--fs-title)); font-weight: 400;
  letter-spacing: -0.02em; line-height: 1.05;
  max-width: 880px; margin: 0 auto 16px;
}
@media (max-width: 720px) {
  .nat-post-hero-inner .post-title { font-size: calc(40px * var(--fs-title)); }
}
.post-deck {
  font-family: var(--serif); font-size: calc(21px * var(--fs-title)); font-style: italic;
  color: var(--ink-soft);
  max-width: 640px; margin: 0 auto 22px; line-height: 1.5;
}
.post-meta {
  font-family: var(--body-font); font-size: calc(13px * var(--fs-meta)); color: var(--ink-soft);
  font-style: italic; /* Newsreader italic — secondary meta reads as an editorial caption now that the whole site is one serif. */
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap; gap: 10px;
}
.post-author-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--rule);
}
.post-author-name { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; }
.meta-sep { opacity: 0.4; }

/* Feature image */
.post-feature-image { margin: 32px auto; max-width: 1080px; padding: 0 24px; }
.post-feature-image img { width: 100%; height: auto; border-radius: var(--r); }
.post-feature-image figcaption {
  font-family: var(--body-font); font-size: calc(13px * var(--fs-meta)); color: var(--ink-soft);
  text-align: center; margin-top: 12px; font-style: italic;
}

/* Post body */
.post-content {
  max-width: 720px;
  margin: 36px auto 48px;
  padding: 0 24px;
  /* Reading-body serif (Newsreader). Headings, blockquote, dropcap, code, pre and
     table headers below pin their own family (--serif / mono / --sans), so only
     the prose (p / li / td / figcaption) inherits this. */
  font-family: var(--body-font);
  font-size: calc(18px * var(--fs-body)); line-height: 1.75;
  /* Long URLs in citations/references must break instead of overflowing on narrow screens. */
  overflow-wrap: break-word;
}
.post-content > p:first-of-type::first-letter {
  font-family: var(--serif);
  float: left; font-size: calc(68px * var(--fs-title)); line-height: 0.88;
  font-weight: 400; margin: 4px 10px 0 0;
  color: var(--sage-deep);
}
.post-content p { margin-bottom: 22px; }
.post-content h1, .post-content h2, .post-content h3, .post-content h4 {
  font-family: var(--serif); font-weight: 500;
  letter-spacing: -0.015em; margin: 38px 0 14px;
}
.post-content h2 { font-size: calc(32px * var(--fs-title)); }
.post-content h3 { font-size: calc(24px * var(--fs-title)); }
.post-content h4 { font-size: calc(20px * var(--fs-title)); }
.post-content a { color: var(--clay); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.post-content blockquote {
  font-family: var(--serif); font-style: italic;
  font-size: calc(22px * var(--fs-title)); line-height: 1.5; color: var(--sage-deep);
  background: rgba(168, 184, 158, 0.15);
  border-radius: 24px;
  padding: 24px 28px; margin: 28px 0;
}
.post-content ul, .post-content ol { margin: 0 0 22px 22px; }
.post-content li { margin-bottom: 8px; }
.post-content li::marker { color: var(--sage-deep); }
.post-content hr { border: 0; height: 1px; background: var(--rule); margin: 36px auto; max-width: 120px; }
.post-content figure { margin: 28px 0; }
.post-content figcaption {
  font-family: var(--body-font); font-size: calc(13px * var(--fs-meta)); font-style: italic;
  color: var(--ink-soft); text-align: center; margin-top: 8px;
}
.post-content img { max-width: 100%; height: auto; border-radius: 16px; }
/* Classic-WordPress image alignment. Most imported posts use alignleft/right/
   center (250+ posts) plus small inline icons & affiliate buttons; without these
   rules the floats/centering are lost and everything drifts left at full size. */
.post-content .aligncenter,
.post-content figure.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.post-content .alignright,
.post-content figure.alignright { float: right; margin: 6px 0 14px 22px; max-width: 50%; }
.post-content .alignleft,
.post-content figure.alignleft  { float: left;  margin: 6px 22px 14px 0; max-width: 50%; }
.post-content .alignnone { display: block; height: auto; }
/* Small inline icons (✓/✗ ~20px, arrows) shouldn't carry the big photo
   corner-radius — at 16px it rounds a 20px icon into a blob. Reset by the
   handful of icon pixel-widths these imports use; real photos are far wider. */
.post-content img[width="16"], .post-content img[width="18"], .post-content img[width="20"],
.post-content img[width="22"], .post-content img[width="24"], .post-content img[width="25"],
.post-content img[width="28"], .post-content img[width="30"], .post-content img[width="32"],
.post-content img[width="36"], .post-content img[width="40"], .post-content img[width="48"],
.post-content img[width="50"] { border-radius: 0; }
/* Headings clear any preceding float so a right-floated image can't bleed into
   the next section; and the content box clears its own floats at the end. */
.post-content h2, .post-content h3 { clear: both; }
.post-content::after { content: ''; display: block; clear: both; }
.post-content code {
  font-family: ui-monospace, monospace;
  background: var(--card); padding: 2px 6px; border-radius: 6px; font-size: 0.88em;
}
.post-content pre {
  font-family: ui-monospace, monospace; background: var(--card);
  border-radius: 16px; padding: 16px 18px;
  margin: 22px 0; font-size: calc(14px * var(--fs-body)); overflow-x: auto;
}
.post-content pre code { background: transparent; padding: 0; }
.post-content table { width: 100%; margin: 24px 0; border-collapse: separate; border-spacing: 0; font-size: calc(15px * var(--fs-body)); border-radius: 16px; overflow: hidden; }
.post-content th, .post-content td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--rule); }
.post-content th { background: var(--card); font-family: var(--body-font); font-weight: 600; }

/* Tags */
.post-tags {
  max-width: 720px; margin: 32px auto 0; padding: 0 24px;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.post-tags-label { font-size: calc(13px * var(--fs-meta)); color: var(--ink-soft); }
.post-tag {
  font-family: var(--body-font); font-size: calc(12px * var(--fs-meta));
  color: var(--sage-deep); text-decoration: none;
  background: rgba(168, 184, 158, 0.2);
  padding: 5px 12px; border-radius: var(--btn-radius);
}
.post-tag:hover { background: var(--sage); color: var(--bg); }

/* Share bar */
.share-bar {
  max-width: 720px; margin: 36px auto;
  padding: 22px 24px;
  background: var(--card); border-radius: 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.share-label { font-family: var(--body-font); font-size: calc(13px * var(--fs-meta)); color: var(--ink-soft); }
.share-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.share-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--body-font); font-size: calc(13px * var(--fs-meta));
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--rule);
  padding: 8px 16px; border-radius: var(--btn-radius);
  cursor: pointer; text-decoration: none;
}
.share-btn svg { width: 15px; height: 15px; fill: currentColor; flex: 0 0 auto; }
.share-btn:hover { background: var(--sage-deep); color: var(--bg); border-color: var(--sage-deep); }

/* Author bio */
.author-bio {
  max-width: 720px; margin: 32px auto 64px; padding: 28px;
  display: flex; gap: 20px; align-items: flex-start;
  background: var(--card); border-radius: var(--r); border: 1px solid var(--rule);
}
.author-bio-avatar { width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--rule); }
.author-bio-initials {
  background: var(--clay); color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: calc(18px * var(--fs-body));
}
.author-bio-label { font-family: var(--body-font); font-size: calc(11px * var(--fs-meta)); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage-deep); margin-bottom: 6px; }
.author-bio-name { font-family: var(--serif); font-size: calc(22px * var(--fs-title)); font-weight: 500; margin-bottom: 8px; }
.author-bio-text { font-size: calc(15px * var(--fs-body)); line-height: 1.6; color: var(--ink-soft); }

/* Sidebar layout */
.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 56px;
  max-width: var(--max-w); margin: 0 auto; padding: 0 48px;
}
.sidebar-sticky { position: sticky; top: 24px; }
.newsletter-widget {
  background: linear-gradient(135deg, rgba(168,184,158,0.25), rgba(201,125,99,0.18));
  padding: 28px 24px; border-radius: var(--r);
  margin-bottom: 32px;
}
.newsletter-widget h3 { font-family: var(--serif); font-size: calc(22px * var(--fs-title)); font-weight: 500; margin-bottom: 8px; }
.newsletter-widget p { font-size: calc(14px * var(--fs-body)); color: var(--ink-soft); margin-bottom: 14px; line-height: 1.55; }
.newsletter-form { display: flex; flex-direction: column; gap: 8px; }
.newsletter-input {
  border: 1px solid var(--rule); background: var(--bg);
  padding: 12px 14px; border-radius: var(--btn-radius);
  font-family: var(--body-font); font-size: calc(14px * var(--fs-body));
}
.newsletter-btn {
  font-family: var(--body-font); font-size: calc(13px * var(--fs-meta)); font-weight: 500;
  background: var(--sage-deep); color: var(--bg);
  border: 0; padding: 12px; border-radius: var(--btn-radius); cursor: pointer;
}
.newsletter-btn:hover { background: var(--clay); }
.sidebar-widget { margin-bottom: 32px; }
.sidebar-widget-title { font-family: var(--body-font); font-size: calc(12px * var(--fs-meta)); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage-deep); margin-bottom: 14px; }
.post-list-item { display: grid; grid-template-columns: 60px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
/* Thumbnail is optional; without it the text must not get crushed into the 60px column. */
.post-list-item:not(:has(.post-list-image)) { grid-template-columns: 1fr; }
.post-list-image img { width: 60px; height: 60px; object-fit: cover; border-radius: 12px; }
.post-list-tag { font-family: var(--body-font); font-size: calc(10px * var(--fs-meta)); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage-deep); margin-bottom: 3px; }
.post-list-title { font-family: var(--serif); font-size: calc(15px * var(--fs-body)); font-weight: 500; line-height: 1.3; margin-bottom: 4px; }
.post-list-title a { color: var(--ink); text-decoration: none; }
.post-list-title a:hover { color: var(--clay); }
.post-list-meta { font-size: calc(11px * var(--fs-meta)); color: var(--ink-soft); font-style: italic; }

/* Related */
.related-posts {
  max-width: var(--max-w); margin: 56px auto 80px; padding: 36px 48px 0;
  border-top: 1px solid var(--rule);
}
.related-posts-title {
  font-family: var(--serif); font-size: calc(32px * var(--fs-title)); font-weight: 400;
  text-align: center; margin-bottom: 28px;
}
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* Archive header */
.archive-header {
  text-align: center;
  padding: 56px 48px 32px;
  background: linear-gradient(180deg, rgba(168,184,158,0.18), transparent);
  position: relative;
}
.archive-header::before {
  content: "From the field";
  font-family: var(--body-font); font-size: calc(12px * var(--fs-meta));
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sage-deep); display: block; margin-bottom: 12px;
}
body.search .archive-header::before { content: "What you searched for"; }
body.author .archive-header::before { content: "Notes by"; }
body.date .archive-header::before { content: "From the archive"; }
.archive-title {
  font-family: var(--serif); font-size: calc(56px * var(--fs-title)); font-weight: 400;
  letter-spacing: -0.02em; line-height: 1.05;
  margin: 0 auto 12px;
}
.archive-description {
  font-family: var(--serif); font-style: italic;
  font-size: calc(19px * var(--fs-body)); color: var(--ink-soft);
  max-width: 600px; margin: 0 auto 14px; line-height: 1.55;
}
.archive-meta-row { font-family: var(--body-font); font-size: calc(12px * var(--fs-meta)); color: var(--ink-soft); font-style: italic; }

.archive-container { max-width: var(--max-w); margin: 0 auto; padding: 0; }
.archive-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px; padding: 32px 48px;
}
.archive-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px; padding: 0; margin-bottom: 28px;
}
.fc-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 32px 48px; }
.archive-grid .post-card { background: var(--card); border-radius: var(--r); border: 1px solid var(--rule); overflow: hidden; transition: transform 0.2s ease; }
.archive-grid .post-card:hover { transform: translateY(-2px); }
.post-card { background: var(--card); border-radius: var(--r); border: 1px solid var(--rule); overflow: hidden; }
.post-card a { color: inherit; text-decoration: none; display: block; }
.post-card-image, .post-card img { height: 200px; width: 100%; object-fit: cover; }
.post-card-body { padding: 22px; }
.post-card-tag { font-size: calc(10px * var(--fs-meta)); color: var(--sage-deep); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 8px; }
.post-card-title { font-family: var(--serif); font-size: calc(22px * var(--fs-title)); font-weight: 500; line-height: 1.2; margin-bottom: 12px; }
.post-card-excerpt { font-family: var(--body-font); font-size: calc(14px * var(--fs-body)); line-height: 1.55; color: var(--ink-soft); }
.post-card-meta { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--rule); font-size: calc(12px * var(--fs-meta)); color: var(--ink-soft); font-style: italic; }

/* Tag cloud */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-pill { font-family: var(--body-font); font-size: calc(12px * var(--fs-meta)); color: var(--ink); text-decoration: none; padding: 6px 14px; border-radius: var(--btn-radius); background: var(--card); border: 1px solid var(--rule); }
.tag-pill:hover { background: var(--sage-deep); color: var(--bg); border-color: var(--sage-deep); }
.tag-pill-active { background: var(--clay); border-color: var(--clay); color: var(--bg); }

/* Pagination — soft pills */
.archive-main .navigation.pagination,
.archive-main .pagination { margin-top: 32px; padding-top: 16px; text-align: center; }
.archive-main .nav-links { display: inline-flex; gap: 8px; align-items: center; }
.page-numbers {
  font-family: var(--body-font); font-size: calc(14px * var(--fs-body)); font-weight: 500;
  color: var(--ink); text-decoration: none;
  padding: 8px 14px; border-radius: var(--btn-radius);
  background: var(--card);
}
.page-numbers:hover { background: var(--sage-deep); color: var(--bg); }
.page-numbers.current { background: var(--sage-deep); color: var(--bg); }
.page-numbers.dots { background: transparent; color: var(--ink-soft); }

/* Page (static) */
body.page .post-layout { grid-template-columns: 1fr; max-width: 880px; }
body.page .post-content { max-width: 720px; }

/* 404 — soft sage empty state */
.nat-404 {
  max-width: 720px;
  margin: 64px auto;
  padding: 64px 32px;
  text-align: center;
  background: linear-gradient(160deg, rgba(168,184,158,0.22), rgba(201,125,99,0.12));
  border-radius: var(--r);
}
.nat-404-illustration {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 22px;
  font-size: calc(42px * var(--fs-title));
  color: var(--sage-deep);
  box-shadow: 0 0 0 8px rgba(168,184,158,0.18);
}
.nat-404-kicker { font-family: var(--body-font); font-size: calc(12px * var(--fs-meta)); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage-deep); margin-bottom: 12px; }
.nat-404-title { font-family: var(--serif); font-size: calc(48px * var(--fs-title)); font-weight: 400; line-height: 1.1; margin-bottom: 16px; max-width: 480px; margin-left: auto; margin-right: auto; }
.nat-404-deck { font-family: var(--serif); font-style: italic; font-size: calc(20px * var(--fs-title)); color: var(--ink-soft); max-width: 480px; margin: 0 auto 28px; line-height: 1.5; }
.nat-404-cta { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.nat-404-cta a {
  font-family: var(--body-font); font-size: calc(14px * var(--fs-body)); font-weight: 500;
  color: var(--bg); background: var(--sage-deep);
  text-decoration: none; padding: 12px 22px;
  border-radius: var(--btn-radius);
}
.nat-404-cta a + a { background: var(--bg); color: var(--ink); border: 1px solid var(--rule); }
.nat-404-cta a:hover { background: var(--clay); color: var(--bg); border-color: var(--clay); }

/* ── Announcement bar (single centered CTA, dismissible) ──────── */
.announcement-bar {
  position: relative; /* anchors the dismiss × to the full-width bar's right edge */
  background: transparent;
  color: var(--ink-soft);
  font-size: calc(11px * var(--fs-meta));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 0;
  border-bottom: 1px solid var(--rule);
}
.announcement-bar[hidden] { display: none; }
/* Optional pin-to-top (Customizer: Announcement Bar → Stick to top on scroll).
   position:fixed so it stays pinned for the whole page regardless of any
   overflow ancestor; announcement.php offsets <body> by the bar's height (and
   removes the offset on dismiss) so content isn't hidden underneath. */
.announcement-bar--sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 350;
  background: var(--bg);
}
.announcement-inner {
  /* No positioning here: the dismiss × is absolutely positioned against the
     full-width .announcement-bar so it pins to the bar's true right edge,
     not the right edge of this centered 1472px column. */
  max-width: 1472px;
  margin: 0 auto;
  /* Side padding still protects the centered CTA from the button on narrower
     screens, where this column spans nearly the full width. */
  padding: 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  text-align: center;
}
.announcement-cta {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
a.announcement-cta:hover { color: var(--sage-deep); text-decoration: underline; text-underline-offset: 3px; }
/* Responsive copy: full sentence on desktop, shortened text on phones. */
.announcement-cta-short { display: none; }
@media (max-width: 767.98px) {
  .announcement-cta-full  { display: none; }
  .announcement-cta-short { display: inline; }
}
.announcement-dismiss {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.announcement-dismiss:hover { color: var(--ink); background: rgba(0, 0, 0, 0.05); }
.announcement-dismiss:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 2px; }

/* Responsive */
@media (max-width: 1100px) {
  .nat-hero-card { grid-template-columns: 1fr; padding: 40px; }
  .nat-hero-top { grid-template-columns: 1fr; }
  .nat-hero--founder-split .nat-hero-photo { min-height: 0; }
  .nat-hero-bio { margin-top: 24px; padding-top: 24px; }
  .nat-hero-photo { height: 320px; }
  .nat-hero-photo-main { width: 100%; height: 100%; border-radius: 24px; }
  .nat-trending-card { flex-basis: 360px; width: 360px; }
  /* Tablet: show only the first 3 tiles in one clean row — the rest live
     behind the "All topics" link. */
  .nat-cats-grid { grid-template-columns: repeat(3, 1fr); }
  .nat-cat-card:nth-child(n+4) { display: none; }
  .nat-tools-grid { grid-template-columns: 1fr; }
  .nat-fresh-grid { grid-template-columns: repeat(2, 1fr); }
  .nat-founder-main { grid-template-columns: 1fr; gap: 28px; }
  .nat-founder-photo { aspect-ratio: 16 / 10; }
  .nat-founder-body { padding: 0; }
  .nat-founder-quote { font-size: calc(24px * var(--fs-title)); }
  .nat-founder-quote::before { font-size: calc(110px * var(--fs-title)); top: -32px; left: -8px; }
  .nat-founder-dispatch { grid-template-columns: 1fr; gap: 16px; padding: 24px 36px; }
  .nat-founder-dispatch-form { min-width: 0; width: 100%; }
  .nat-tapcheck-form { max-width: none; }
  .site-footer .footer-grid { grid-template-columns: repeat(2, 1fr); padding: 0 24px 32px; }
  .archive-grid { grid-template-columns: repeat(2, 1fr); padding: 24px; }
}
@media (max-width: 860px) {
  /* Tools feature: horizontal split → stack (photo back on top), 3-up row → list. */
  .nat-tools-feature { grid-template-columns: 1fr; }
  .nat-tools-feature-photo {
    order: -1;
    min-height: 0;
    aspect-ratio: 21 / 9;
    border-radius: 28px 28px 0 0;
  }
  .nat-tools-feature-body { padding: 28px; }
  .nat-tools-feature .nat-wq-audit-form { max-width: none; grid-template-columns: 1fr; }
  .nat-tools-list { grid-template-columns: 1fr; }
  .nat-tools-card {
    padding: 22px 4px;
    border-right: none;
    border-bottom: 1px solid var(--rule);
  }
  .nat-tools-card:first-child { padding-top: 4px; }
  .nat-tools-card:last-child { border-bottom: none; padding-bottom: 4px; }
}
/* Switch to the hamburger at 1180, not 900: between ~900–1100px the inline
   desktop nav is too wide, wraps to two lines, and "About Mr. Water Geek"
   splits so its click target gains a dead gap (reported as "About won't open",
   most often on Macs whose system font renders a hair wider). Below 1180 the
   clean mobile menu takes over instead of the cramped/wrapping desktop row. */
@media (max-width: 1180px) {
  .nav-toggle { display: inline-flex; order: 3; }
  .site-nav-wrap {
    display: none;
    flex-basis: 100%;
    order: 4;
    margin-top: 12px;
  }
  .site-nav-wrap.is-open { display: block; }
  .site-nav-wrap .site-nav,
  .site-nav-wrap ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0;
    border-top: 1px solid var(--rule);
  }
  .site-nav-wrap .site-nav li,
  .site-nav-wrap ul li { padding: 10px 4px; border-bottom: 1px solid var(--rule); }
  .site-nav-wrap .site-nav li:last-child,
  .site-nav-wrap ul li:last-child { border-bottom: 0; }
  .site-nav-wrap .sub-menu {
    display: block;
    position: static;
    transform: none;
    background: transparent; /* drop the desktop dropdown's --bg fill so it blends with the mobile menu */
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-left: 12px;
  }
  .site-nav-wrap .sub-menu::before { display: none; } /* no hover bridge needed on mobile */
  .site-nav-wrap .sub-menu li { padding: 6px 4px; }
  .site-nav-wrap .menu-item-has-children > a::after { display: none; }
  .site-header .header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }
  .site-logo { margin-right: auto; }
  .header-right { order: 2; }
}

/* Founder-split hero → stacked "clean founder card". Triggers at ≤1200, NOT
   ≤900: the desktop 2-col split's photo column gets too narrow below ~1300, so
   the object-fit:contain portrait collapses to a sliver and the bio card
   collides with it — that was the "messy hero" seen at non-1080p zoom levels.
   Stacking here skips the whole broken mid-width zone. (≤900 still gets it —
   1200 ⊃ 900.) The 2-col design look stays for ≥1201px. */
@media (max-width: 1200px) {
  /* copy on top, then a centered white card holding the portrait panel + bio. */
  /* Drop the desktop top-air: the figure no longer floats above the card here,
     so the extra padding would just be empty whitespace. */
  .nat-hero--founder-split { padding-top: 24px; }
  .nat-hero--founder-split .nat-hero-top { grid-template-columns: 1fr; min-height: 0; }
  /* transform:none drops the desktop --hero-text-x/y nudge — without it the
     copy block is shoved off-centre (and clipped at the right edge on phones). */
  .nat-hero--founder-split .nat-hero-text { transform: none; padding: 40px 28px 8px; text-align: center; max-width: 620px; margin-left: auto; margin-right: auto; }
  .nat-hero--founder-split .nat-hero-cta { justify-content: center; }

  /* The portrait + bio become one self-contained card. CRITICAL: reset the
     desktop translateX(-76px) — that slide was pushing this block's left edge
     under the card's overflow:hidden and clipping the bio text. */
  .nat-hero--founder-split .nat-hero-photo {
    display: block;
    transform: none;
    height: auto;
    margin: 18px 16px 30px;
    padding: 16px 16px 18px;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 22px;
    box-shadow: 0 12px 36px rgba(31, 51, 41, 0.08);
    text-align: center;
  }
  /* Portrait on a soft sage→clay panel. object-fit:cover fills the panel and
     trims the cut-out's transparent side margins so the figure reads large. */
  .nat-hero--founder-split .nat-hero-photo-main {
    position: relative;
    inset: auto;
    left: auto; right: auto; bottom: auto; top: auto;
    transform: none;   /* drop the desktop figure-x nudge in the stacked card */
    width: 100%;
    max-width: 420px;
    height: 380px;
    margin: 0 auto;
    background: linear-gradient(165deg, rgba(168, 184, 158, 0.35), rgba(201, 125, 99, 0.18));
    border-radius: 18px;
    overflow: hidden;
  }
  .nat-hero--founder-split .nat-hero-photo-main img {
    object-fit: cover;
    object-position: center top;
  }
  /* Bio flows below the portrait, centered, full width inside the card — no clip. */
  .nat-hero--founder-split .nat-hero-photo .nat-hero-bio {
    position: static;
    transform: none;   /* drop the desktop story-card nudge in the stacked card */
    width: auto;
    max-width: 460px;
    margin: 16px auto 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .nat-hero--founder-split .nat-hero-bio .nat-founder-social { justify-content: center; }
}
@media (max-width: 720px) {
  .container, .nat-hero, .nat-trending, .nat-cats, .nat-tools, .nat-founder, .nat-fresh, .nat-dispatch { padding-left: 20px; padding-right: 20px; }
  .nat-tapcheck-form { flex-direction: column; border-radius: 18px; padding: 8px; gap: 6px; }
  .nat-tapcheck-form button { width: 100%; }
  .nat-section-head { flex-direction: column; gap: 12px; align-items: flex-start; }
  .nat-trending-card { flex-basis: 300px; width: 300px; }
  /* Mobile: show the first 4 tiles as a clean 2×2 — re-reveal the 4th that
     the tablet rule hid, and hide the 5th onward. */
  .nat-cats-grid { grid-template-columns: repeat(2, 1fr); }
  .nat-cat-card:nth-child(4) { display: flex; }
  .nat-cat-card:nth-child(n+5) { display: none; }
  .nat-tools-feature-body { padding: 24px; }
  .nat-tools-feature-body h3 { font-size: calc(28px * var(--fs-title)); }
  .nat-fresh-grid { grid-template-columns: 1fr; }
  .nat-founder-body { padding: 0; }
  .nat-founder-quote { font-size: calc(20px * var(--fs-title)); }
  .nat-founder-quote::before { font-size: calc(90px * var(--fs-title)); top: -26px; left: -6px; }
  .nat-founder-social a { width: 36px; height: 36px; }
  .nat-founder-dispatch { padding: 20px 24px; }
  .nat-founder-dispatch-copy { font-size: calc(15px * var(--fs-body)); }
  .nat-founder-dispatch-form { flex-direction: column; border-radius: 18px; padding: 8px; gap: 6px; }
  .nat-founder-dispatch-form button { width: 100%; }
  .archive-grid { grid-template-columns: 1fr; padding: 16px; }
  .header-search-input { width: 110px; }
  .site-footer .footer-grid { grid-template-columns: 1fr; padding: 0 20px 32px; }
}

/* ── Responsive: article & archive (sidebar stacks) ─────── */
@media (max-width: 900px) {
  /* The 320px sidebar was crushing the content column on phones — stack it. */
  .post-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 0 24px; }
  .archive-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 28px 24px; }
  .sidebar-sticky { position: static; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .fc-track { grid-template-columns: repeat(2, 1fr); padding: 28px 24px; }
  .post-header { padding: 44px 24px 28px; }
  .post-header .post-title { font-size: calc(40px * var(--fs-title)); }
  .archive-header { padding: 44px 24px 24px; }
  .archive-title { font-size: calc(40px * var(--fs-title)); }
  .related-posts { padding: 32px 24px 0; }
}
@media (max-width: 600px) {
  .post-layout { gap: 32px; padding: 0 20px; }
  .archive-layout { padding: 24px 16px; }
  .related-grid { grid-template-columns: 1fr; }
  .fc-track { grid-template-columns: 1fr; padding: 24px 16px; }
  .post-content { padding: 0 20px; }
  .post-header { padding: 36px 20px 24px; }
  .post-header .post-title,
  .archive-title { font-size: calc(34px * var(--fs-title)); }
  .post-feature-image { padding: 0 16px; margin: 24px auto; }
  /* Wide tables scroll within their own box instead of forcing page overflow. */
  .post-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* On phones, stop floating images — full-width block reads better. */
  .post-content .alignright, .post-content .alignleft,
  .post-content figure.alignright, .post-content figure.alignleft {
    float: none; display: block; margin: 16px auto; max-width: 100%;
  }
}

/* ── Post TOC ─────────────────────────────────── */
.post-toc {
  max-width: 720px;
  margin: 0 auto 28px;
  padding: 16px 24px;
  background: rgba(168, 184, 158, 0.08);
  border-left: 3px solid var(--sage-deep);
  border-radius: 14px;
}
.post-toc[hidden] { display: none; }
.post-toc-label {
  font-family: var(--body-font);
  font-size: calc(11px * var(--fs-meta));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage-deep);
  font-weight: 600;
  margin-bottom: 10px;
}
.post-toc-list {
  list-style: decimal;
  margin: 0;
  padding-left: 22px;
  font-family: var(--body-font);
  font-size: calc(14px * var(--fs-body));
  line-height: 1.65;
  color: var(--ink-soft);
}
.post-toc-list li { padding: 2px 0; }
.post-toc-list a {
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.15s ease;
}
.post-toc-list a:hover { color: var(--ink); }
.post-toc-list a.is-current { color: var(--sage-deep); font-weight: 600; }

/* ── Quiz intro card (Step 0) ─────────────────── */
.quiz-intro {
  display: none;
  max-width: 560px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 24px;
  padding: 40px 36px;
  text-align: center;
}
.quiz-intro.active { display: block; animation: quiz-slide-in 0.3s ease; }
.quiz-intro:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 4px; }
.quiz-intro-eyebrow {
  font-family: var(--body-font);
  font-size: calc(11px * var(--fs-meta));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage-deep);
  font-weight: 600;
  margin-bottom: 18px;
}
.quiz-intro-title {
  font-family: var(--serif);
  font-size: calc(36px * var(--fs-title));
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
  text-wrap: balance;
}
.quiz-intro-deck {
  font-size: calc(15px * var(--fs-body));
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 24px;
}
.quiz-intro-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  text-align: left;
  display: grid;
  gap: 10px;
  font-size: calc(14px * var(--fs-body));
  color: var(--ink);
}
.quiz-intro-bullets li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg);
  border-radius: 12px;
}
.quiz-intro-bullet-icon { font-size: calc(18px * var(--fs-body)); }
.quiz-intro-start {
  background: var(--sage-deep);
  color: var(--bg);
  border: 0;
  padding: 14px 32px;
  border-radius: var(--btn-radius);
  font-family: var(--body-font);
  font-size: calc(14px * var(--fs-body));
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.quiz-intro-start:hover { background: var(--ink); transform: translateY(-1px); }
@media (max-width: 600px) {
  .quiz-intro { padding: 32px 22px; }
  .quiz-intro-title { font-size: calc(28px * var(--fs-title)); }
}

/* ── Contact form ─────────────────────────────── */
.nat-contact-form {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 32px 28px;
  margin-bottom: 48px;
}
.nat-contact-form-eyebrow {
  font-family: var(--body-font);
  font-size: calc(12px * var(--fs-meta));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-deep);
  font-weight: 600;
  margin-bottom: 18px;
  text-align: center;
}
.nat-contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.nat-contact-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.nat-contact-field label {
  font-family: var(--body-font);
  font-size: calc(12px * var(--fs-meta));
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.nat-contact-optional { color: var(--ink-soft); opacity: 0.6; }
.nat-contact-required { color: var(--clay); }
.nat-contact-field input,
.nat-contact-field textarea {
  font-family: var(--body-font);
  font-size: calc(14px * var(--fs-body));
  padding: 11px 14px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  transition: border-color 0.15s ease;
}
.nat-contact-field input:focus,
.nat-contact-field textarea:focus { border-color: var(--sage-deep); outline: none; }
.nat-contact-field textarea { resize: vertical; min-height: 120px; }
.nat-contact-form-btn {
  display: block;
  width: 100%;
  background: var(--sage-deep);
  color: var(--bg);
  border: 0;
  padding: 13px 24px;
  border-radius: var(--btn-radius);
  font-family: var(--body-font);
  font-size: calc(14px * var(--fs-body));
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.nat-contact-form-btn:hover { background: var(--ink); }
@media (max-width: 600px) {
  .nat-contact-form-row { grid-template-columns: 1fr; }
}

/* ── Search refine (search.php) + 404 search ──── */
.nat-search-refine,
.nat-404-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 24px;
  background: #FFFFFF;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 4px 4px 4px 18px;
  max-width: 480px;
  width: 100%;
}
.nat-search-refine input,
.nat-404-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--body-font);
  font-size: calc(15px * var(--fs-body));
  padding: 10px 4px;
  color: var(--ink);
}
.nat-search-refine button,
.nat-404-search button {
  background: var(--sage-deep);
  color: var(--bg);
  border: 0;
  padding: 10px 22px;
  border-radius: 999px;
  font-family: var(--body-font);
  font-size: calc(13px * var(--fs-meta));
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.nat-search-refine button:hover,
.nat-404-search button:hover { background: var(--ink); }
.nat-404-search { margin: 24px auto 28px; display: flex; }

/* Header nav-toggle JS hook */

/* ── Water quality report — /water-quality/ + /water-quality/{zip}/ ──
   Direction A "magazine report": serif masthead, by-the-numbers stat strip,
   thin-ruled editorial contaminant list. Rendered by water-report.php /
   water-search.php; data via the mwg-water-report mu-plugin. */
.nat-wq {
  max-width: 880px;
  margin: 0 auto;
  padding: 64px 24px 80px;
}
.nat-wq-kicker {
  font-family: var(--body-font);
  font-size: calc(12px * var(--fs-meta));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage-deep);
  font-weight: 600;
  margin-bottom: 16px;
}
.nat-wq-title {
  font-family: var(--wq-title-font);
  font-size: calc(clamp(36px, 5vw, 60px) * var(--fs-title));
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 18px;
  text-wrap: balance;
}
.nat-wq-title em { color: var(--water-deep); font-style: italic; }

/* When a rounded title face is active, the serif's 400 weight reads too light at
   display size and its italic <em> would be a faux-oblique — so bump the weight a
   touch and keep emphasis as colour only. The hero (has-rounded-title) and the
   water-report pages (has-rounded-wq) are flagged independently so each can use a
   rounded face without forcing the other. */
.has-rounded-title .nat-hero-text h1 { font-weight: 600; letter-spacing: -0.015em; }
.has-rounded-title .nat-hero-text h1 em { font-style: normal; }
.has-rounded-wq .nat-wq-title,
.has-rounded-wq .nat-wq-form-title { font-weight: 600; letter-spacing: -0.015em; }
.has-rounded-wq .nat-wq-title em { font-style: normal; }
.nat-wq-sysline {
  font-family: var(--body-font);
  font-size: calc(14px * var(--fs-body));
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.5;
}
.nat-wq-dot { margin: 0 6px; color: var(--rule); }
.nat-wq-deck {
  font-family: var(--body-font);
  font-size: calc(17px * var(--fs-body));
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0 0 28px;
}
/* On the landing page, match the deck to the darker body copy directly below it
   (the intro paragraphs inherit --ink), so the subtitle isn't a paler grey. */
.nat-wq-landing .nat-wq-deck { color: var(--ink); }
/* Underline the inline links in the landing intro (the EPA "required to test"
   source link) so it reads clearly as a link. */
.nat-wq-landing-intro a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Stat strip — same vocabulary as the homepage by-the-numbers band. */
.nat-wq-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(168, 184, 158, 0.10);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  overflow: hidden;
  margin: 40px 0 0;
}
.nat-wq-stat {
  padding: 30px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nat-wq-stat + .nat-wq-stat { border-left: 1px solid var(--rule); }
.nat-wq-stat-l {
  font-family: var(--body-font);
  font-size: calc(11px * var(--fs-meta));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage-deep);
  font-weight: 600;
  margin: 0;
  order: 1;
  /* Reserve two label lines and bottom-align, so the big numbers below
     start at the same height whether the label wraps or not. */
  min-height: 3.2em;
  display: flex;
  align-items: flex-end;
}
.nat-wq-stat-n {
  font-family: var(--serif);
  font-size: calc(clamp(34px, 3.6vw, 46px) * var(--fs-title));
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin: 0;
  order: 2;
}
.nat-wq-stat-n.is-flagged { color: var(--alert); }
.nat-wq-stat-c {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(12px * var(--fs-meta));
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 2px 0 0;
  order: 3;
}
.nat-wq-risk--low { color: var(--sage-deep); }
.nat-wq-risk--medium { color: var(--water-deep); }
.nat-wq-risk--high { color: var(--clay); }
.nat-wq-risk--unknown { color: var(--ink-soft); }

/* Section headings */
.nat-wq-h2 {
  font-family: var(--serif);
  font-size: calc(clamp(26px, 3.2vw, 38px) * var(--fs-title));
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 14px;
}
.nat-wq-h2 em { color: var(--sage-deep); font-style: italic; }
.nat-wq-found, .nat-wq-violations { margin-top: 64px; }
.nat-wq-found-deck {
  font-family: var(--body-font);
  font-size: calc(15px * var(--fs-body));
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 0 0 8px;
}

/* Editorial ruled list — worst offenders first */
.nat-wq-list, .nat-wq-viol-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}
.nat-wq-row {
  border-top: 1px solid var(--rule);
  padding: 22px 0 24px;
}
.nat-wq-list > .nat-wq-row:last-child,
.nat-wq-viol-list > .nat-wq-row:last-child { border-bottom: 1px solid var(--rule); }
.nat-wq-row-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.nat-wq-row-name {
  font-family: var(--serif);
  font-size: calc(22px * var(--fs-title));
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
}
.nat-wq-row-figures {
  display: flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
}
.nat-wq-row-val {
  font-family: var(--body-font);
  font-size: calc(14px * var(--fs-body));
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* Multiplier capsule — tinted per severity tier (see .nat-wq-sev-*). */
.nat-wq-row-mult {
  font-family: var(--body-font);
  font-size: calc(12.5px * var(--fs-meta));
  font-weight: 700;
  color: var(--clay);
  background: rgba(201, 125, 99, 0.10);
  border: 1px solid rgba(201, 125, 99, 0.34);
  border-radius: var(--btn-radius);
  padding: 3px 11px;
  font-variant-numeric: tabular-nums;
}
.nat-wq-flag {
  font-family: var(--body-font);
  font-size: calc(10.5px * var(--fs-meta));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--bg);
  background: var(--alert);
  border-radius: var(--btn-radius);
  padding: 3px 10px;
  white-space: nowrap;
}
.nat-wq-row-health {
  font-family: var(--body-font);
  font-size: calc(14px * var(--fs-body));
  line-height: 1.55;
  color: var(--ink);
  margin: 10px 0 0;
  max-width: 64ch;
}
/* Severity word — replaces the old meter bar; enlarged, tier-coloured below. */
.nat-wq-row-sev {
  font-family: var(--body-font);
  font-size: calc(13px * var(--fs-meta));
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap;
}
/* "guideline" → EWG's page on that contaminant. */
.nat-wq-row-gl {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.nat-wq-row-gl:hover { text-decoration-thickness: 2px; }
/* Status/date line — still used by the EPA violations list. */
.nat-wq-row-limits {
  font-family: var(--body-font);
  font-size: calc(12px * var(--fs-meta));
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 8px 0 0;
}

/* Within-guidelines — collapsed by default */
.nat-wq-within { margin-top: 28px; }
.nat-wq-within summary {
  cursor: pointer;
  font-family: var(--body-font);
  font-size: calc(14px * var(--fs-body));
  font-weight: 600;
  color: var(--sage-deep);
  padding: 12px 0;
}
.nat-wq-within summary:hover { color: var(--ink); }
.nat-wq-within-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  columns: 2;
  column-gap: 40px;
}
.nat-wq-within-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--rule);
  padding: 9px 2px;
  break-inside: avoid;
  font-size: calc(13px * var(--fs-body));
}
.nat-wq-within-name { color: var(--ink); }
.nat-wq-within-val {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Sources + disclaimer */
.nat-wq-sources { margin-top: 48px; }
.nat-wq-sources p {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(13px * var(--fs-meta));
  line-height: 1.65;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
  padding-top: 20px;
  margin: 0;
}

/* PDF conversion — dark ink panel + mini report preview */
.nat-wq-pdf {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  overflow: hidden;
  margin-top: 56px;
}
.nat-wq-pdf-l { background: var(--ink); color: #fff; padding: 42px 40px; }
.nat-wq-pdf-l .nat-wq-kicker { color: var(--sage); }
.nat-wq-pdf-l h2 {
  font-family: var(--serif);
  font-size: calc(34px * var(--fs-title));
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 14px 0 12px;
}
.nat-wq-pdf-l h2 em { color: var(--sage); font-style: italic; }
.nat-wq-pdf-l p {
  font-family: var(--body-font);
  font-size: calc(14px * var(--fs-body));
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.74);
  max-width: 42ch;
  margin: 0 0 22px;
}
.nat-wq-pdf-form {
  display: flex;
  gap: 6px;
  background: #fff;
  border-radius: var(--btn-radius);
  padding: 5px;
  max-width: 420px;
}
.nat-wq-pdf-form input[type="email"] {
  flex: 1;
  min-width: 8em;
  border: none;
  outline: none;
  background: transparent;
  padding: 11px 16px;
  font-family: var(--body-font);
  font-size: calc(14px * var(--fs-body));
  color: var(--ink);
}
.nat-wq-pdf-form button {
  border: none;
  border-radius: var(--btn-radius);
  background: var(--clay);
  color: #fff;
  font-family: var(--body-font);
  font-size: calc(13px * var(--fs-meta));
  font-weight: 600;
  padding: 11px 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.16s ease;
}
.nat-wq-pdf-form button:hover { background: #b86b51; }
.nat-wq-pdf-trust {
  display: flex;
  gap: 18px;
  margin-top: 16px;
  font-family: var(--body-font);
  font-size: calc(11.5px * var(--fs-meta));
  color: rgba(255, 255, 255, 0.6);
  flex-wrap: wrap;
}
.nat-wq-pdf-trust span { display: flex; align-items: center; gap: 6px; }

/* Form success confirmation — replaces a submitted form. .mwg-form-sent strips
   the input pill so the message sits on the real surface and inherits its
   contrast colour (white on the dark PDF panel, ink on the light landing). */
.mwg-form-done {
  font-family: var(--body-font);
  color: inherit;
  animation: mwg-done-in 0.4s ease both;
}
.mwg-form-done-ic { flex: 0 0 auto; margin-top: 1px; }
.mwg-form-done-msg { max-width: 42ch; }
@keyframes mwg-done-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .mwg-form-done { animation: none; } }
/* Dark inbox panel: drop the white pill, sage-tint the check. */
.nat-wq-pdf-form.mwg-form-sent { background: transparent; border: 0; padding: 6px 0; }
.nat-wq-pdf-l .mwg-form-done-ic { color: var(--sage); }
/* Landing audit form: deep-pine check on ink text. */
.nat-wq-audit-form .mwg-form-done-ic { color: var(--teal-deep); }

.nat-wq-pdf-r {
  background: var(--card);
  padding: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nat-wq-pdf-doc {
  width: 200px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: 0 16px 40px -18px rgba(31, 51, 41, 0.4), 0 2px 8px -2px rgba(31, 51, 41, 0.16);
  padding: 20px 18px;
  transform: rotate(-3deg);
  position: relative;
}
.nat-wq-pdf-doc::after {
  content: "PDF";
  position: absolute;
  top: 14px;
  right: -10px;
  background: var(--alert);
  color: #fff;
  font-family: var(--body-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 4px 8px;
  border-radius: 4px;
  transform: rotate(3deg);
}
.nat-wq-pd-k {
  font-family: var(--body-font);
  font-size: 7px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-deep);
  font-weight: 700;
}
.nat-wq-pd-t {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.1;
  margin: 4px 0 12px;
  color: var(--ink);
}
.nat-wq-pd-t em { color: var(--water-deep); font-style: italic; }
.nat-wq-pd-bars { display: flex; flex-direction: column; gap: 7px; }
.nat-wq-pd-bar { height: 6px; border-radius: 3px; background: rgba(31, 51, 41, 0.08); }
.nat-wq-pd-bar i { display: block; height: 100%; border-radius: 3px; }
.nat-wq-pd--severe { background: var(--alert); }
.nat-wq-pd--high   { background: var(--clay); }
.nat-wq-pd--mod    { background: var(--water-deep); }
.nat-wq-pd--low    { background: var(--sage-deep); }

/* Check another ZIP + related reading */
.nat-wq-again { margin-top: 56px; }
/* Horizontal band: heading + copy left, search pill right. White-on-rule so it
   reads as a sibling of (not a twin to) the cream email-capture card above. */
.nat-wq-again-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px 36px;
  background: #FFFFFF;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 30px 36px;
}
.nat-wq-again-title { margin-bottom: 6px; font-size: calc(clamp(22px, 2.6vw, 30px) * var(--fs-title)); }
.nat-wq-again-text p {
  font-family: var(--body-font);
  font-size: calc(14px * var(--fs-body));
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 44ch;
}
.nat-wq-again-form { flex: 0 0 auto; width: min(380px, 100%); margin: 0; }
.nat-wq-related { margin-top: 48px; }
@media (max-width: 860px) {
  .nat-wq-again-card { flex-direction: column; align-items: stretch; padding: 26px 22px; }
  .nat-wq-again-form { width: 100%; }
}

/* Landing page (/water-quality/) — ZIP + email audit capture */
/* "Get your free Water Quality Report" — sits under the intro prose; give it
   clear breathing room above so it reads as a fresh section, not a runover. */
.nat-wq-form-title {
  font-family: var(--wq-title-font);
  font-size: calc(clamp(22px, 2.6vw, 32px) * var(--fs-title));
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 48px 0 14px;
  text-wrap: balance;
}
.nat-wq-audit-form {
  margin-top: 6px;
  max-width: 420px;
  display: grid;
  gap: 10px;
}
.nat-wq-audit-field { position: relative; }
.nat-wq-audit-form input {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: #fff;
  font-family: var(--body-font);
  font-size: calc(15px * var(--fs-body));
  color: var(--ink);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.nat-wq-audit-form input::placeholder { color: var(--ink-soft); opacity: 0.6; }
.nat-wq-audit-form input:focus {
  outline: none;
  border-color: var(--teal-deep);
  box-shadow: 0 0 0 3px rgba(31, 93, 84, 0.13);
}
.nat-wq-audit-btn {
  margin-top: 2px;
  padding: 14px 22px;
  border: none;
  border-radius: 14px;
  background: var(--teal-deep);
  color: #fff;
  font-family: var(--body-font);
  font-size: calc(15px * var(--fs-body));
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.nat-wq-audit-btn:hover { background: #18514A; }
.nat-wq-audit-btn:active { transform: translateY(1px); }
.nat-wq-audit-fine {
  font-family: var(--body-font);
  font-size: calc(12.5px * var(--fs-meta));
  color: var(--ink-soft);
  margin: 4px 0 0;
}
.nat-wq-form-error {
  font-family: var(--body-font);
  font-size: calc(14px * var(--fs-body));
  color: var(--clay);
  font-weight: 600;
  margin: 0 0 14px;
}
.nat-wq-landing-how {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 56px 0 0;
  padding: 0;
}
.nat-wq-landing-how li {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 28px 26px;
}
.nat-wq-landing-step {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(15px * var(--fs-meta));
  color: var(--sage-deep);
  display: block;
  margin-bottom: 12px;
}
.nat-wq-landing-how h3 {
  font-family: var(--serif);
  font-size: calc(20px * var(--fs-title));
  font-weight: 400;
  margin: 0 0 8px;
}
.nat-wq-landing-how p {
  font-family: var(--body-font);
  font-size: calc(13.5px * var(--fs-body));
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}
.nat-wq-landing-note {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(13px * var(--fs-meta));
  color: var(--ink-soft);
  margin: 36px 0 0;
}
.nat-wq-landing-note a { color: var(--sage-deep); }

/* Error / not-found states */
.nat-wq-state { text-align: left; }
.nat-wq-state .nat-wq-deck { margin-bottom: 24px; }
.nat-wq-retry { max-width: 380px; }
.nat-wq-state-cta { display: flex; align-items: center; gap: 22px; }
.nat-wq-btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: var(--btn-radius);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--body-font);
  font-size: calc(14px * var(--fs-body));
  font-weight: 600;
  text-decoration: none;
  transition: background 0.18s ease;
}
.nat-wq-btn:hover { background: var(--sage-deep); }
.nat-wq-link {
  font-family: var(--body-font);
  font-size: calc(14px * var(--fs-body));
  color: var(--sage-deep);
  font-weight: 600;
}
.nat-wq-state-alt {
  font-family: var(--body-font);
  font-size: calc(14px * var(--fs-body));
  color: var(--ink-soft);
  margin-top: 24px;
}
.nat-wq-state-alt a { color: var(--sage-deep); }

@media (max-width: 900px) {
  .nat-wq-stats { grid-template-columns: repeat(2, 1fr); }
  .nat-wq-stat:nth-child(odd) { border-left: 0; }
  .nat-wq-stat:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .nat-wq-landing-how { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .nat-wq { padding: 44px 20px 64px; }
  .nat-wq-row-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .nat-wq-row-figures { margin-left: 0; }
  .nat-wq-within-list { columns: 1; }
  .nat-wq-cta-card { padding: 30px 22px; }
  .nat-wq-email-form { flex-direction: column; border-radius: var(--r); }
  .nat-wq-email-form button { width: 100%; }
  .nat-wq-state-cta { flex-wrap: wrap; }
}

/* ── Water quality report v2 — multi-system, tabs, bars, FAQ, autocomplete ── */

/* Multi-system selector */
.nat-wq-systems { margin-top: 22px; }
.nat-wq-systems-label {
  display: block;
  font-family: var(--body-font);
  font-size: calc(12px * var(--fs-meta));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
  margin-bottom: 8px;
}
.nat-wq-systems select {
  max-width: 100%;
  padding: 10px 38px 10px 16px;
  font-family: var(--body-font);
  font-size: calc(14px * var(--fs-body));
  color: var(--ink);
  background: #FFFFFF;
  border: 1px solid var(--rule);
  border-radius: var(--btn-radius);
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235C6B61' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}
.nat-wq-systems select:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 2px; }
.nat-wq-systems-links { list-style: none; margin: 10px 0 0; padding: 0; }
.nat-wq-systems-links a { color: var(--sage-deep); font-size: calc(14px * var(--fs-body)); }

/* Legal ≠ Safe */
.nat-wq-legal {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  margin-top: 56px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 32px 36px;
}
.nat-wq-legal-mark {
  font-family: var(--serif);
  font-size: calc(64px * var(--fs-title));
  line-height: 1;
  color: var(--water-deep);
  flex: 0 0 auto;
}
.nat-wq-legal-body .nat-wq-h2 { margin-bottom: 8px; }
.nat-wq-legal-body p {
  font-family: var(--body-font);
  font-size: calc(14.5px * var(--fs-body));
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
  max-width: 62ch;
}

/* Filter bar — hidden until water-tool.js adds .is-enhanced */
.nat-wq-filterbar { display: none; }
.nat-wq-found.is-enhanced .nat-wq-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin: 20px 0 4px;
}
.nat-wq-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.nat-wq-tab {
  font-family: var(--body-font);
  font-size: calc(12.5px * var(--fs-meta));
  font-weight: 600;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--btn-radius);
  padding: 7px 14px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.nat-wq-tab span { color: var(--sage-deep); margin-left: 4px; font-variant-numeric: tabular-nums; }
.nat-wq-tab:hover { border-color: var(--sage-deep); color: var(--ink); }
.nat-wq-tab.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.nat-wq-tab.is-active span { color: var(--sage); }
.nat-wq-filter-search {
  margin-left: auto;
  min-width: 200px;
  padding: 8px 16px;
  font-family: var(--body-font);
  font-size: calc(13px * var(--fs-body));
  color: var(--ink);
  background: #FFFFFF;
  border: 1px solid var(--rule);
  border-radius: var(--btn-radius);
  outline: none;
}
.nat-wq-filter-search:focus { border-color: var(--sage-deep); box-shadow: 0 0 0 3px rgba(94, 116, 100, 0.12); }
.nat-wq-list-empty {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(15px * var(--fs-body));
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
  padding: 28px 0;
}

/* Substance-category chips on rows */
.nat-wq-chip {
  font-family: var(--body-font);
  font-size: calc(10.5px * var(--fs-meta));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: var(--btn-radius);
  padding: 3px 10px;
  background: rgba(168, 184, 158, 0.16);
  color: var(--sage-deep);
}
.nat-wq-chip--pfas         { background: rgba(201, 125, 99, 0.12); color: var(--clay); }
.nat-wq-chip--dbp          { background: rgba(61, 92, 119, 0.10); color: var(--water-deep); }
.nat-wq-chip--heavy-metal  { background: rgba(31, 51, 41, 0.08); color: var(--ink); }
.nat-wq-chip--radiological { background: rgba(138, 111, 168, 0.12); color: #6E5689; }

/* Source blurb line on rows */
.nat-wq-row-source {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(13px * var(--fs-meta));
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 8px 0 0;
  max-width: 64ch;
}

/* FAQ */
.nat-wq-faq { margin-top: 64px; }
.nat-wq-faq-list { margin-top: 20px; border-top: 1px solid var(--rule); }
.nat-wq-faq-item { border-bottom: 1px solid var(--rule); }
.nat-wq-faq-item summary {
  cursor: pointer;
  font-family: var(--serif);
  font-size: calc(18px * var(--fs-title));
  line-height: 1.35;
  color: var(--ink);
  padding: 18px 28px 18px 2px;
  position: relative;
  list-style: none;
}
.nat-wq-faq-item summary::-webkit-details-marker { display: none; }
.nat-wq-faq-item summary::after {
  content: '+';
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--body-font);
  color: var(--sage-deep);
  font-size: calc(20px * var(--fs-body));
}
.nat-wq-faq-item[open] summary::after { content: '\2212'; }
.nat-wq-faq-item summary:hover { color: var(--sage-deep); }
.nat-wq-faq-item p {
  font-family: var(--body-font);
  font-size: calc(14.5px * var(--fs-body));
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
  padding: 0 2px 20px;
  max-width: 68ch;
}

/* Not-found sibling ZIP pills */
.nat-wq-siblings { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; }
.nat-wq-sibling {
  font-family: var(--body-font);
  font-size: calc(14px * var(--fs-body));
  font-weight: 600;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--btn-radius);
  padding: 9px 18px;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.nat-wq-sibling:hover { border-color: var(--sage-deep); background: rgba(168, 184, 158, 0.12); }

/* City/ZIP autocomplete dropdown (anchored to the pill form) */
.nat-wq-suggest-host { position: relative; }
.nat-wq-suggest {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 30;
  background: #FFFFFF;
  border: 1px solid var(--rule);
  border-radius: 18px;
  box-shadow: 0 14px 36px rgba(31, 51, 41, 0.12);
  overflow: hidden;
  max-height: 320px;
  overflow-y: auto;
}
/* Doubled-up selector on purpose: the suggestions are <button>s rendered
   inside the pill form, so they must out-rank `.nat-tapcheck-form button`
   (dark ink bg, white text) — otherwise the dropdown is ink-on-ink invisible. */
.nat-wq-suggest .nat-wq-suggest-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--ink);
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--rule);
  padding: 12px 18px;
  cursor: pointer;
  font-family: var(--body-font);
  font-size: calc(14px * var(--fs-body));
  font-weight: 400;
  white-space: normal;
  transition: background 0.15s ease;
}
.nat-wq-suggest .nat-wq-suggest-item:last-child { border-bottom: none; }
.nat-wq-suggest .nat-wq-suggest-item:hover,
.nat-wq-suggest .nat-wq-suggest-item.is-focused { background: rgba(168, 184, 158, 0.12); }
.nat-wq-suggest-city { font-size: calc(14px * var(--fs-body)); color: var(--ink); }
.nat-wq-suggest-zip {
  font-size: calc(12px * var(--fs-meta));
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .nat-wq-bar { grid-template-columns: 1fr 56px; grid-template-rows: auto auto; }
  .nat-wq-bar-label { grid-column: 1 / -1; }
  .nat-wq-legal { flex-direction: column; gap: 10px; padding: 24px 20px; }
  .nat-wq-legal-mark { font-size: calc(44px * var(--fs-title)); }
  .nat-wq-filter-search { margin-left: 0; width: 100%; }
}

/* ── Water report v3 (design handoff) — verdict hero, severity meters ── */

/* Verdict hero */
.nat-wq-verdict {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 40px 44px;
  margin-top: 36px;
  position: relative;
  overflow: hidden;
}
.nat-wq-verdict::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--alert), var(--clay) 70%, var(--gold));
}
.nat-wq-verdict--medium::before { background: linear-gradient(90deg, var(--water-deep), var(--water) 70%, var(--sage)); }
.nat-wq-verdict--low::before,
.nat-wq-verdict--unknown::before { background: linear-gradient(90deg, var(--sage-deep), var(--sage) 70%, var(--rule)); }
.nat-wq-verdict-label {
  font-family: var(--body-font);
  font-size: calc(12px * var(--fs-meta));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
  margin-bottom: 10px;
}
.nat-wq-verdict-rating {
  font-family: var(--serif);
  font-size: calc(clamp(46px, 7vw, 78px) * var(--fs-title));
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--alert);
  margin: 0 0 6px;
}
.nat-wq-verdict-rating .rk { font-style: italic; }
.nat-wq-verdict--medium .nat-wq-verdict-rating { color: var(--water-deep); }
.nat-wq-verdict--low .nat-wq-verdict-rating { color: var(--sage-deep); }
.nat-wq-verdict--unknown .nat-wq-verdict-rating { color: var(--ink-soft); }
.nat-wq-verdict-sub {
  font-family: var(--serif);
  font-size: calc(21px * var(--fs-title));
  font-style: italic;
  color: var(--ink);
  line-height: 1.35;
  max-width: 30ch;
  margin: 14px 0 4px;
}
.nat-wq-verdict-sub b { font-style: normal; font-weight: 600; color: var(--alert); }
.nat-wq-verdict--medium .nat-wq-verdict-sub b { color: var(--water-deep); }
.nat-wq-verdict--low .nat-wq-verdict-sub b,
.nat-wq-verdict--unknown .nat-wq-verdict-sub b { color: var(--sage-deep); }

/* Verdict glass — always-visible contaminant bubble cloud (vw MiniGlass port) */
.nat-wq-glasswrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.nat-wq-glassbox { width: 210px; max-width: 46vw; }
.nat-wq-glass-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 18px 34px rgba(60, 50, 45, 0.12));
}
.nat-wq-gbub { cursor: default; }
.nat-wq-gbub text { pointer-events: none; user-select: none; }
.nat-wq-gbub-ring { transition: stroke-opacity 0.18s ease, stroke-width 0.18s ease; }
.nat-wq-gbub:hover .nat-wq-gbub-ring,
.nat-wq-gbub:focus-visible .nat-wq-gbub-ring { stroke-opacity: 1; stroke-width: 2; }
.nat-wq-gbub:focus { outline: none; }

/* Severity tiers — status word + multiplier capsule colour per tier */
.nat-wq-sev-severe .nat-wq-row-sev { color: var(--alert); }
.nat-wq-sev-high   .nat-wq-row-sev { color: var(--clay); }
.nat-wq-sev-mod    .nat-wq-row-sev { color: var(--water-deep); }
.nat-wq-sev-low    .nat-wq-row-sev { color: var(--sage-deep); }
.nat-wq-sev-severe .nat-wq-row-mult { color: var(--alert); background: var(--alert-soft); border-color: #e3b8ae; }
.nat-wq-sev-high   .nat-wq-row-mult { color: var(--clay); background: rgba(201, 125, 99, 0.10); border-color: rgba(201, 125, 99, 0.34); }
.nat-wq-sev-mod    .nat-wq-row-mult { color: var(--water-deep); background: rgba(61, 92, 119, 0.08); border-color: rgba(61, 92, 119, 0.26); }
.nat-wq-sev-low    .nat-wq-row-mult { color: var(--sage-deep); background: rgba(94, 116, 100, 0.08); border-color: rgba(94, 116, 100, 0.26); }

/* Critical tab gets the alert treatment when active */
.nat-wq-tab--crit.is-active { background: var(--alert); border-color: var(--alert); }
.nat-wq-tab--crit.is-active span { color: #f3cfc7; }

/* Chips for the remaining substance categories */
.nat-wq-chip--nitrates  { background: rgba(201, 162, 39, 0.16); color: #8a6d12; }
.nat-wq-chip--solvents  { background: rgba(107, 143, 170, 0.14); color: var(--water-deep); }

/* Within-guidelines summary: +/− marker like the design */
.nat-wq-within summary { list-style: none; }
.nat-wq-within summary::-webkit-details-marker { display: none; }
.nat-wq-within summary::before { content: "+"; display: inline-block; width: 1.2em; color: var(--sage); }
.nat-wq-within[open] summary::before { content: "\2212"; }

@media (max-width: 880px) {
  .nat-wq-verdict { grid-template-columns: 1fr; padding: 30px 24px; }
  .nat-wq-glasswrap { margin-top: 8px; }
  .nat-wq-glassbox { width: 240px; max-width: 64vw; }
  .nat-wq-pdf { grid-template-columns: 1fr; }
  .nat-wq-pdf-r { order: -1; padding: 28px; }
  .nat-wq-pdf-l { padding: 30px 24px; }
}

/* ── Water report — entrance & water animations ──
   All gated behind body.nat-wq-anim, which water-tool.js adds ONLY when JS
   runs and prefers-reduced-motion is off. No-JS, reduced-motion and the
   puppeteer screenshot rig (which emulates reduced motion) all see the
   final state with zero animation. */
.nat-wq-anim [data-wq-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.nat-wq-anim [data-wq-reveal].is-inview {
  opacity: 1;
  transform: none;
}

/* Verdict glass bubbles bob gently in place — per-bubble phase/speed/amplitude
   from server-rendered --b* custom props (hash-seeded, stable per contaminant). */
@keyframes nat-wq-gbob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--bamp, 2px) * -1)); }
}
.nat-wq-anim .nat-wq-gbub {
  animation: nat-wq-gbob var(--bdur, 6s) ease-in-out var(--bdelay, 0s) infinite;
}

/* Belt-and-braces: even if the class sneaks in, honour reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .nat-wq-anim [data-wq-reveal] { opacity: 1; transform: none; transition: none; }
  .nat-wq-anim .nat-wq-gbub { animation: none; }
}

/* Bubble hover/focus tooltip (JS-positioned within .nat-wq-glasswrap). */
.nat-wq-gtip {
  position: fixed;
  z-index: 200;
  width: 220px;
  transform: translate(-50%, calc(-100% - 12px));
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: 0 14px 38px rgba(40, 55, 80, 0.18);
  padding: 12px 14px;
  pointer-events: none;
  text-align: left;
}
.nat-wq-gtip.is-below { transform: translate(-50%, 12px); }
.nat-wq-gtip-cat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--body-font);
  font-size: calc(9.5px * var(--fs-meta));
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 5px;
}
.nat-wq-gtip-cat::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sage);
  flex: 0 0 auto;
}
.nat-wq-gtip-cat--pfas::before         { background: var(--clay); }
.nat-wq-gtip-cat--dbp::before          { background: var(--water-deep); }
.nat-wq-gtip-cat--heavy-metal::before  { background: var(--ink); }
.nat-wq-gtip-cat--nitrates::before     { background: var(--gold); }
.nat-wq-gtip-cat--solvents::before     { background: var(--water); }
.nat-wq-gtip-cat--radiological::before { background: var(--violet); }
.nat-wq-gtip-cat--agricultural::before { background: var(--sage-deep); }
.nat-wq-gtip-cat--other::before        { background: var(--sage); }
.nat-wq-gtip-name {
  font-family: var(--serif);
  font-size: calc(16px * var(--fs-body));
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 6px;
}
.nat-wq-gtip-mult {
  font-family: var(--body-font);
  font-size: calc(11px * var(--fs-meta));
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.nat-wq-gtip-mult b {
  font-size: calc(15px * var(--fs-body));
  color: var(--alert);
  font-weight: 700;
  margin-right: 3px;
}
.nat-wq-gtip-desc {
  font-family: var(--body-font);
  font-size: calc(11.5px * var(--fs-meta));
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

/* ── Key Takeaways — editorial convention for answer-engine-friendly posts.
     Usage in post content: <div class="key-takeaways"><h2>Key takeaways</h2>
     <ul>…</ul></div>. See docs/GEO.md. ── */
.post-content .key-takeaways {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--sage-deep);
  border-radius: var(--r);
  padding: 26px 30px;
  margin: 32px 0;
}
.post-content .key-takeaways h2,
.post-content .key-takeaways h3 {
  font-family: var(--body-font);
  font-size: calc(12px * var(--fs-meta));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-deep);
  font-weight: 700;
  margin: 0 0 12px;
}
.post-content .key-takeaways ul { margin: 0; padding-left: 20px; }
.post-content .key-takeaways li {
  font-size: calc(15px * var(--fs-body));
  line-height: 1.6;
  margin-bottom: 8px;
}
.post-content .key-takeaways li:last-child { margin-bottom: 0; }

/* ── Topics overview page (page-topics.php) ── */
.nat-topics-overview { padding: 48px 48px 80px; }
.nat-topic-block {
  padding-bottom: 44px;
  margin-bottom: 44px;
  border-bottom: 1px solid var(--rule);
}
.nat-topic-block:last-child { border-bottom: 0; margin-bottom: 0; }
.nat-topic-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.nat-topic-name {
  font-family: var(--serif);
  font-size: calc(30px * var(--fs-title));
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
}
.nat-topic-desc {
  margin: 6px 0 0;
  font-size: calc(15px * var(--fs-body));
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 620px;
}
.nat-topic-head .nat-section-link { white-space: nowrap; flex-shrink: 0; }
.nat-topic-posts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.nat-topic-card {
  display: flex;
  flex-direction: column;
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.18s ease;
}
.nat-topic-card:hover { transform: translateY(-3px); }
.nat-topic-card-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  margin-bottom: 12px;
  background-color: var(--card);
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(31, 51, 41, 0.04);
}
.nat-topic-card h3 {
  font-family: var(--serif);
  font-size: calc(17px * var(--fs-title));
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 6px;
  color: var(--ink);
}
.nat-topic-card-meta {
  font-size: calc(12px * var(--fs-meta));
  color: var(--ink-soft);
}
@media (max-width: 900px) {
  .nat-topics-overview { padding: 32px 24px 56px; }
  .nat-topic-posts { grid-template-columns: repeat(2, 1fr); }
  .nat-topic-head { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 520px) {
  .nat-topic-posts { grid-template-columns: 1fr 1fr; gap: 16px; }
}