/* ==========================================================================
   Hard Water STL - shared editorial stylesheet
   An independent local resource about hard water in the St. Louis metro.
   Fonts: Fraunces (display), Newsreader (body), Inter (ui)
   ========================================================================== */

:root{
  --paper:#faf7f2;
  --ink:#211d19;
  --ink-70:rgba(33,29,25,.72);
  --ink-45:rgba(33,29,25,.45);
  --rule:#e5ddd0;
  --brick:#a8382c;
  --brick-deep:#8f2c22;
  --accent-soft:#f2e4d8;
  --gold:#8a6d3b;
  --gold-light:#d4ac74;
  --card:#fff;
  --panel:#f4eee4;
  --measure:720px;
  --wide:1040px;
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Newsreader',Georgia,'Times New Roman',serif;
  --ui:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:19px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* the paper's colored top rule */
body::before{content:"";display:block;height:5px;background:var(--brick)}

.wrap{max-width:var(--measure);margin:0 auto;padding:0 24px}
.wide{max-width:var(--wide);margin:0 auto;padding:0 24px}

a{color:var(--brick);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{color:var(--brick-deep)}
img{max-width:100%;height:auto}
hr{border:0;border-top:1px solid var(--rule);margin:34px 0}

/* ---------- Masthead ---------- */
.masthead{padding-top:22px}
.masthead-top{
  display:flex;justify-content:space-between;gap:16px;
  font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-70);
  padding-bottom:14px;border-bottom:1px solid var(--rule);
}
.wordmark{
  display:block;text-align:center;text-decoration:none;color:var(--ink);
  font-family:var(--display);font-weight:600;
  font-size:clamp(2.6rem,8vw,4.6rem);line-height:.98;letter-spacing:-.012em;
  margin:24px 0 0;
}
.wordmark em{font-style:italic;color:var(--brick)}
.masthead-sub{
  text-align:center;font-family:var(--body);font-style:italic;
  color:var(--ink-70);font-size:1.08rem;line-height:1.4;
  margin:13px auto 0;max-width:600px;
}
.nav{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px 26px;
  margin-top:22px;padding:12px 0;
  border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);
  font-family:var(--ui);font-weight:600;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;
}
.nav a{color:var(--ink);text-decoration:none;padding:2px 0;white-space:nowrap}
.nav a:hover{color:var(--brick)}
.nav a.current{color:var(--brick);border-bottom:2px solid var(--brick)}

/* ---------- Article ---------- */
.article{max-width:var(--measure);margin:0 auto;padding:46px 24px 8px}
.kicker{
  font-family:var(--ui);font-weight:700;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin:0 0 14px;
}
h1{
  font-family:var(--display);font-weight:600;
  font-size:clamp(2.05rem,5.4vw,3.05rem);line-height:1.08;letter-spacing:-.016em;
  margin:0 0 18px;
}
.dek{
  font-family:var(--body);font-style:italic;font-size:clamp(1.15rem,2.4vw,1.3rem);
  line-height:1.5;color:var(--ink-70);margin:0 0 24px;
}
.byline{
  font-family:var(--ui);font-weight:600;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-70);
  padding-bottom:24px;margin:0 0 32px;border-bottom:1px solid var(--rule);
}

.article p{margin:0 0 22px}
.article p:last-child{margin-bottom:0}
.lede::first-letter{
  float:left;font-family:var(--display);font-weight:600;
  font-size:3.7rem;line-height:.78;padding:8px 10px 0 0;color:var(--brick);
}

.article h2{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.5rem,3.4vw,1.92rem);line-height:1.16;letter-spacing:-.01em;
  margin:46px 0 15px;
}
.article h2::before{
  content:"";display:block;width:40px;height:3px;background:var(--brick);margin-bottom:18px;
}
.article h3{
  font-family:var(--ui);font-weight:700;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin:34px 0 10px;
}
.article ul,.article ol{margin:0 0 22px;padding-left:1.15em}
.article li{margin:0 0 11px;padding-left:.15em}
.article li::marker{color:var(--brick)}
.article strong{font-weight:500;color:var(--ink)}
.article em{font-style:italic}

/* ---------- Pull fact ---------- */
.pullfact{
  margin:34px 0;padding:26px 30px;background:var(--accent-soft);border-radius:3px;
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
}
.pullfact-num{
  font-family:var(--display);font-weight:600;color:var(--brick);
  font-size:clamp(3rem,9vw,4.4rem);line-height:.88;letter-spacing:-.02em;
}
.pullfact-text{flex:1;min-width:220px}
.pullfact-label{
  font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  font-size:13px;color:var(--brick);margin-bottom:7px;
}
.pullfact-note{font-family:var(--body);font-size:1rem;line-height:1.42;color:var(--ink-70)}

/* ---------- Pull quote ---------- */
.pullquote{margin:36px 0;padding:4px 0 4px 26px;border-left:3px solid var(--brick)}
.pullquote p{
  font-family:var(--display);font-style:italic;font-weight:600;
  font-size:clamp(1.35rem,3.5vw,1.7rem);line-height:1.32;color:var(--ink);margin:0 0 12px;
}
.pullquote cite{
  font-family:var(--ui);font-style:normal;font-weight:600;font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-70);
}

/* ---------- Recommend / funnel module ---------- */
.recommend{
  margin:40px 0;padding:32px 34px 30px;background:var(--accent-soft);
  border-top:4px solid var(--brick);border-radius:0 0 4px 4px;
}
.rec-eyebrow{
  font-family:var(--ui);font-weight:700;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin:0 0 11px;
}
.recommend .rec-head{
  font-family:var(--display);font-weight:600;font-style:normal;
  font-size:clamp(1.4rem,3.4vw,1.78rem);line-height:1.14;letter-spacing:-.01em;
  color:var(--ink);text-transform:none;margin:0 0 15px;
}
.recommend .rec-head::before{display:none}
.rec-body{font-family:var(--body);font-size:1.06rem;line-height:1.56;color:var(--ink);margin:0 0 22px}
.rec-btn{
  display:inline-block;background:var(--brick);color:var(--paper);
  font-family:var(--ui);font-weight:700;font-size:15px;letter-spacing:.015em;
  text-decoration:none;padding:14px 28px;border-radius:3px;
}
.rec-btn:hover{background:var(--brick-deep);color:var(--paper)}
.rec-disclosure{
  font-family:var(--ui);font-weight:600;font-size:12px;line-height:1.5;
  color:var(--ink-70);margin:20px 0 0;
}

/* dark variant, used just above the footer */
.recommend--ink{background:var(--ink);border-top-color:var(--brick)}
.recommend--ink .rec-eyebrow{color:var(--gold-light)}
.recommend--ink .rec-head{color:var(--paper)}
.recommend--ink .rec-body{color:rgba(250,247,242,.82)}
.recommend--ink .rec-disclosure{color:rgba(250,247,242,.6)}
.recommend--ink .rec-btn{background:var(--brick);color:#fff}
.recommend--ink .rec-btn:hover{background:#bd4034}
.closing-cta{padding-top:8px;padding-bottom:8px}

/* ---------- Keep reading ---------- */
.keepreading{margin:52px 0 8px;padding-top:30px;border-top:2px solid var(--ink)}
.keepreading .kr-head{
  font-family:var(--ui);font-weight:700;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin:0 0 20px;
}
.keepreading .kr-head::before{display:none}
.kr-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:3px;overflow:hidden;
}
.kr-card{display:block;background:var(--paper);padding:22px 22px 24px;text-decoration:none;color:var(--ink);transition:background .15s ease}
.kr-card:hover{background:var(--card)}
.kr-kicker{
  display:block;font-family:var(--ui);font-weight:700;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin-bottom:9px;
}
.kr-title{
  display:block;font-family:var(--display);font-weight:600;font-size:1.26rem;line-height:1.18;
  color:var(--ink);margin-bottom:9px;letter-spacing:-.01em;
}
.kr-card:hover .kr-title{color:var(--brick)}
.kr-teaser{display:block;font-family:var(--body);font-size:1rem;line-height:1.45;color:var(--ink-70)}

/* ---------- Footer ---------- */
.site-footer{margin-top:62px;border-top:5px solid var(--brick);background:var(--panel)}
.site-footer .wide{padding-top:40px;padding-bottom:48px}
.footer-brand{font-family:var(--display);font-weight:600;font-size:1.85rem;color:var(--ink);line-height:1}
.footer-brand em{font-style:italic;color:var(--brick)}
.footer-about{font-family:var(--body);font-size:1.04rem;line-height:1.5;color:var(--ink-70);max-width:660px;margin:12px 0 24px}
.footer-nav{
  display:flex;flex-wrap:wrap;gap:8px 26px;
  font-family:var(--ui);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  padding:18px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.footer-nav a{color:var(--ink);text-decoration:none}
.footer-nav a:hover{color:var(--brick)}
.footer-disclosure{font-family:var(--ui);font-weight:600;font-size:12.5px;line-height:1.62;color:var(--ink-70);margin:24px 0 0;max-width:760px}
.footer-copy{font-family:var(--ui);font-weight:600;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-45);margin:16px 0 0}

/* ---------- Mobile ---------- */
@media(max-width:680px){
  body{font-size:18px;line-height:1.62}
  .masthead-top{font-size:9.5px;letter-spacing:.1em}
  .masthead-top .flag-right{display:none}
  .masthead-sub{font-size:1rem}
  .nav{gap:6px 16px;font-size:11.5px;letter-spacing:.08em}
  .article{padding-top:36px}
  .kr-grid{grid-template-columns:1fr}
  .pullfact{padding:22px 22px;gap:16px}
  .recommend{padding:26px 22px}
  .lede::first-letter{font-size:3.1rem}
}