/* ============================================================
   THE ELECTRIC BILL BLOG — Elevate
   Shared stylesheet for the blog index and all article pages.
   Newspaper structure, Elevate typography.
   ============================================================ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --ink:#16130d;
  --body:#2d281e;
  --muted:#8b8271;
  --muted-2:#a9a091;
  --rule:#ded8ca;
  --rule-dk:#1a1a1a;
  --gold:#a8823c;
  --gold-lt:#c8a96b;
  --paper:#ffffff;
  --paper-2:#faf8f3;
  --black:#050505;

  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --display:'Cormorant Garamond',Georgia,serif;

  --measure:660px;
  --wide:1240px;
  --nav-h:110px;
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--body);
  font-family:var(--serif);
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:#f2e4c6;color:var(--ink)}

/* ---------- Reading progress (article pages) ---------- */
.progress{
  position:fixed;top:0;left:0;height:3px;width:0;
  background:var(--gold-lt);z-index:120;
  transition:width .08s linear;
}

/* ============================================================
   HEADER — matches the main site, with real navigation
   ============================================================ */
.bnav{
  display:flex;align-items:center;justify-content:space-between;
  height:var(--nav-h);padding:0 5vw;background:var(--black);
  position:relative;z-index:100;
}
.bnav__logo{display:inline-flex;align-items:center;flex:0 0 auto}
.bnav__logo img{height:104px;width:auto;opacity:.95;display:block}

.bnav__links{
  list-style:none;display:flex;gap:2.6rem;align-items:center;
  margin:0 auto;
}
.bnav__links a{
  font-family:var(--sans);font-size:11px;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.82);
  text-decoration:none;transition:color .25s;padding:6px 0;
  border-bottom:1px solid transparent;
}
.bnav__links a:hover{color:#fff}
.bnav__links a[aria-current="page"]{color:#fff;border-bottom-color:var(--gold-lt)}

.bnav__cta{
  background:#fff;color:var(--black);font-family:var(--sans);
  font-size:11px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  padding:12px 26px;text-decoration:none;transition:background .25s;flex:0 0 auto;
}
.bnav__cta:hover{background:#ececec}

.bnav__toggle{
  display:none;background:none;border:0;cursor:pointer;
  width:34px;height:26px;flex-direction:column;justify-content:space-between;padding:4px 0;
}
.bnav__toggle span{display:block;height:1px;width:100%;background:#fff;transition:transform .3s,opacity .3s}
.bnav__toggle.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.bnav__toggle.open span:nth-child(2){opacity:0}
.bnav__toggle.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.bnav__menu{
  position:absolute;top:100%;left:0;right:0;background:var(--black);
  border-top:1px solid rgba(255,255,255,.1);
  flex-direction:column;padding:1.4rem 5vw 2rem;gap:1.3rem;display:none;
}
.bnav__menu.open{display:flex}
.bnav__menu a{
  font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.85);text-decoration:none;
}
.bnav__menu-cta{
  background:#fff;color:var(--black)!important;text-align:center;padding:13px 0;margin-top:.4rem;
}

@media(max-width:900px){
  .bnav{height:88px}
  .bnav__logo img{height:82px}
  .bnav__links,.bnav__cta{display:none}
  .bnav__toggle{display:flex}
}

/* ============================================================
   MASTHEAD — blog front page nameplate
   ============================================================ */
.masthead{
  max-width:var(--wide);margin:0 auto;padding:3.2rem 5vw 0;text-align:center;
}
.masthead__rule-top{border-top:1px solid var(--rule);margin-bottom:1.6rem}
.masthead__kicker{
  font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.32em;
  text-transform:uppercase;color:var(--gold);margin-bottom:1rem;
}
.masthead__name{
  font-family:var(--display);font-weight:600;
  font-size:clamp(2.6rem,7vw,5.2rem);line-height:1.02;letter-spacing:-.015em;
  color:var(--ink);
}
.masthead__sub{
  font-family:var(--sans);font-size:.86rem;font-weight:300;color:var(--muted);
  letter-spacing:.02em;margin-top:1rem;max-width:640px;margin-left:auto;margin-right:auto;
  line-height:1.65;
}
.masthead__dateline{
  display:flex;align-items:center;justify-content:center;gap:1.4rem;
  font-family:var(--sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted-2);margin-top:1.8rem;padding:.85rem 0;
  border-top:1px solid var(--rule);border-bottom:3px double var(--rule);
}
.masthead__dateline span{white-space:nowrap}
.masthead__dot{color:var(--gold-lt)}

/* ---------- Topic bar ---------- */
.topics{
  max-width:var(--wide);margin:0 auto;padding:1.1rem 5vw;
  display:flex;gap:2rem;justify-content:center;flex-wrap:wrap;
  border-bottom:1px solid var(--rule);
}
.topics a{
  font-family:var(--sans);font-size:10.5px;font-weight:400;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;
  padding-bottom:3px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.topics a:hover{color:var(--ink);border-bottom-color:var(--gold-lt)}
.topics a.is-active{color:var(--ink);border-bottom-color:var(--ink)}

/* ============================================================
   FRONT PAGE
   ============================================================ */
.front{max-width:var(--wide);margin:0 auto;padding:0 5vw 4rem}

.front__top{
  display:grid;grid-template-columns:minmax(0,2.05fr) 1px minmax(0,1fr);
  gap:0;padding-top:2.6rem;
}
.front__divider{background:var(--rule)}
.front__lead{padding-right:3rem}
.front__rail{padding-left:3rem}

/* ---------- Kicker / section label ---------- */
.kicker{
  font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);margin-bottom:.85rem;display:block;
}

/* ---------- Lead story ---------- */
.lead__figure{margin-bottom:1.5rem;overflow:hidden;background:var(--paper-2)}
.lead__figure img{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.lead:hover .lead__figure img{transform:scale(1.028)}
.lead{display:block;text-decoration:none;color:inherit}
.lead__title{
  font-family:var(--display);font-weight:600;
  font-size:clamp(2.1rem,4.1vw,3.5rem);line-height:1.06;letter-spacing:-.015em;
  color:var(--ink);margin-bottom:.9rem;
}
.lead:hover .lead__title{color:var(--gold)}
.lead__deck{
  font-size:1.12rem;line-height:1.62;color:#4a4335;margin-bottom:1.1rem;max-width:56ch;
}
.byline-sm{
  font-family:var(--sans);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted-2);
}
.byline-sm b{font-weight:500;color:var(--muted)}

/* ---------- Rail ---------- */
.rail__head{
  font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink);
  padding-bottom:.8rem;border-bottom:2px solid var(--ink);margin-bottom:1.4rem;
}
.rail__list{list-style:none}
.rail__item{
  display:flex;gap:1rem;padding:1.15rem 0;border-bottom:1px solid var(--rule);
}
.rail__item:last-child{border-bottom:0}
.rail__num{
  font-family:var(--display);font-size:1.9rem;font-weight:500;line-height:1;
  color:var(--gold-lt);flex:0 0 auto;width:1.4rem;
}
.rail__link{text-decoration:none;color:inherit}
.rail__title{
  font-family:var(--display);font-size:1.28rem;font-weight:600;line-height:1.2;
  color:var(--ink);margin-bottom:.3rem;
}
.rail__link:hover .rail__title{color:var(--gold)}
.rail__meta{font-family:var(--sans);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}

/* ---------- Rail CTA card ---------- */
.rail__cta{
  margin-top:2rem;background:var(--black);color:#fff;padding:1.9rem 1.6rem;text-align:center;
}
.rail__cta h3{
  font-family:var(--display);font-size:1.5rem;font-weight:600;line-height:1.2;
  color:#fff;margin-bottom:.7rem;
}
.rail__cta p{
  font-family:var(--sans);font-size:.83rem;font-weight:300;line-height:1.65;
  color:rgba(255,255,255,.7);margin-bottom:1.3rem;
}
.rail__cta a{
  display:inline-block;background:var(--gold-lt);color:#0a0805;text-decoration:none;
  font-family:var(--sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  padding:13px 30px;transition:background .25s,color .25s;
}
.rail__cta a:hover{background:#fff}

/* ---------- Section head ---------- */
.section-head{
  display:flex;align-items:baseline;gap:1.2rem;
  margin:3.4rem 0 1.8rem;padding-top:1.4rem;border-top:3px double var(--rule);
}
.section-head h2{
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap;
}
.section-head .line{flex:1;height:1px;background:var(--rule)}

/* ---------- Story grid ---------- */
.grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:2rem;row-gap:2.6rem;
}
.card{display:block;text-decoration:none;color:inherit;position:relative}
.card + .card::before{
  content:"";position:absolute;left:-1rem;top:0;bottom:0;width:1px;background:var(--rule);
}
.card__figure{margin-bottom:1rem;overflow:hidden;background:var(--paper-2)}
.card__figure img{
  width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.card:hover .card__figure img{transform:scale(1.04)}
/* portrait source photos: bias the crop toward the roofline so the array stays in frame */
.card__figure img[src*="onestep2"]{object-position:center 18%}
.card__figure img[src*="keith-home"]{object-position:center 34%}
.card__title{
  font-family:var(--display);font-size:1.42rem;font-weight:600;line-height:1.15;
  color:var(--ink);margin-bottom:.55rem;
}
.card:hover .card__title{color:var(--gold)}
.card__deck{
  font-size:.95rem;line-height:1.58;color:#57503f;margin-bottom:.75rem;
}

/* ---------- Front-page CTA strip ---------- */
.strip{
  margin-top:4rem;border-top:3px double var(--rule);border-bottom:1px solid var(--rule);
  padding:3.2rem 0;text-align:center;
}
.strip h2{
  font-family:var(--display);font-size:clamp(1.8rem,3.4vw,2.7rem);font-weight:600;
  line-height:1.14;color:var(--ink);margin-bottom:.9rem;
}
.strip p{
  font-size:1.03rem;line-height:1.65;color:#57503f;max-width:56ch;margin:0 auto 1.7rem;
}
.strip a{
  display:inline-block;background:var(--gold-lt);color:#0a0805;text-decoration:none;
  font-family:var(--sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  padding:16px 40px;transition:background .25s,color .25s;
}
.strip a:hover{background:var(--ink);color:#e8dcc8}

/* ============================================================
   ARTICLE PAGE
   ============================================================ */
.article{max-width:var(--wide);margin:0 auto;padding:0 5vw}

.crumb{
  font-family:var(--sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted-2);padding:2.4rem 0 0;
}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--gold)}
.crumb span{color:var(--rule)}

.article__head{max-width:840px;margin:0 auto;padding:2.2rem 0 0;text-align:center}
.article__kicker{
  font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem;
}
.article__title{
  font-family:var(--display);font-weight:600;
  font-size:clamp(2.25rem,5.2vw,4rem);line-height:1.05;letter-spacing:-.018em;
  color:var(--ink);margin-bottom:1.2rem;
}
.article__deck{
  font-size:clamp(1.08rem,1.9vw,1.32rem);line-height:1.55;color:#544c3c;
  font-weight:400;max-width:60ch;margin:0 auto;
}

.byline{
  max-width:var(--measure);margin:2.4rem auto 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:.95rem 0;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;
  font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
}
.byline__by b{font-weight:600;color:var(--ink)}
.byline__meta{color:var(--muted-2);display:flex;gap:.9rem;align-items:center;flex-wrap:wrap}
.byline__meta .sep{color:var(--rule)}

.share{display:flex;gap:.9rem;align-items:center}
.share button,.share a{
  background:none;border:1px solid var(--rule);color:var(--muted);cursor:pointer;
  font-family:var(--sans);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:6px 12px;text-decoration:none;transition:border-color .2s,color .2s;
}
.share button:hover,.share a:hover{border-color:var(--gold-lt);color:var(--ink)}

/* ---------- Lead art ---------- */
.article__figure{max-width:1000px;margin:2.8rem auto 0}
.article__figure img{width:100%;height:auto}
figcaption{
  font-family:var(--sans);font-size:.78rem;font-weight:300;line-height:1.55;
  color:var(--muted);margin-top:.7rem;max-width:var(--measure);
}
figcaption .credit{color:var(--muted-2);font-size:.72rem;letter-spacing:.06em}

/* ---------- Body ---------- */
.article__body{max-width:var(--measure);margin:0 auto;padding:2.8rem 0 1rem}
.article__body p{
  font-size:1.18rem;line-height:1.72;color:var(--body);margin-bottom:1.35rem;
}
.article__body p.lede{font-size:1.3rem;line-height:1.62;color:#241f16}
.article__body h2{
  font-family:var(--display);font-weight:600;font-size:1.95rem;line-height:1.18;
  color:var(--ink);margin:3rem 0 .95rem;letter-spacing:-.01em;
}
.article__body h3{
  font-family:var(--sans);font-weight:600;font-size:.82rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);margin:2.2rem 0 .8rem;
}
.article__body strong{font-weight:600;color:var(--ink)}
.article__body em{font-style:italic}
.article__body a{
  color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold-lt);
  text-underline-offset:3px;text-decoration-thickness:1px;
}
.article__body a:hover{color:var(--gold)}
.article__body ul,.article__body ol{margin:0 0 1.5rem 1.3rem}
.article__body li{font-size:1.13rem;line-height:1.66;margin-bottom:.7rem;padding-left:.35rem}
.article__body li::marker{color:var(--gold-lt)}
.article__body hr{
  border:0;border-top:1px solid var(--rule);width:80px;margin:2.6rem auto;
}

/* ---------- Pull quote ---------- */
.pullquote{
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
  padding:1.7rem 0;margin:2.8rem 0;
}
.pullquote p{
  font-family:var(--display);font-size:1.85rem!important;font-weight:600;line-height:1.24!important;
  color:var(--ink);margin:0!important;letter-spacing:-.01em;
}
.pullquote cite{
  display:block;font-family:var(--sans);font-size:10px;font-style:normal;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);margin-top:.9rem;
}

/* ---------- Data callout ---------- */
.callout{
  background:var(--paper-2);border-top:2px solid var(--ink);
  padding:1.7rem 1.8rem;margin:2.6rem 0;
}
.callout h3{
  font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);margin:0 0 1rem;
}
.callout p,.callout li{
  font-family:var(--sans);font-size:.95rem!important;line-height:1.68!important;color:#4a4335;
}
.callout p:last-child,.callout li:last-child{margin-bottom:0!important}
.callout ul{margin:0 0 0 1.1rem}

/* ---------- Stat row ---------- */
.stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;
  margin:2.6rem 0;padding:1.7rem 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.stat__num{
  font-family:var(--display);font-size:2.4rem;font-weight:600;line-height:1;
  color:var(--ink);margin-bottom:.4rem;
}
.stat__label{
  font-family:var(--sans);font-size:.76rem;font-weight:300;line-height:1.5;color:var(--muted);
}

/* ---------- In-article CTA ---------- */
.article__cta{
  max-width:var(--measure);margin:3.4rem auto 0;background:var(--black);color:#fff;
  padding:2.6rem 2.2rem;text-align:center;
}
.article__cta h2{
  font-family:var(--display);font-size:1.85rem;font-weight:600;line-height:1.18;
  color:#fff;margin-bottom:.85rem;
}
.article__cta p{
  font-family:var(--sans);font-size:.92rem;font-weight:300;line-height:1.7;
  color:rgba(255,255,255,.72);max-width:48ch;margin:0 auto 1.6rem;
}
.article__cta a{
  display:inline-block;background:var(--gold-lt);color:#0a0805;text-decoration:none;
  font-family:var(--sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  padding:15px 36px;transition:background .25s;
}
.article__cta a:hover{background:#fff}

/* ---------- Author note ---------- */
.authornote{
  max-width:var(--measure);margin:2.6rem auto 0;padding-top:1.5rem;
  border-top:1px solid var(--rule);
  font-family:var(--sans);font-size:.83rem;font-weight:300;line-height:1.72;color:var(--muted);
}
.authornote b{font-weight:500;color:var(--ink)}

/* ---------- Related coverage ---------- */
.related{max-width:var(--wide);margin:4rem auto 0;padding:0 0 4rem}
.related__head{
  display:flex;align-items:baseline;gap:1.2rem;
  padding-top:1.4rem;border-top:3px double var(--rule);margin-bottom:1.8rem;
}
.related__head h2{
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap;
}
.related__head .line{flex:1;height:1px;background:var(--rule)}
.related__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:2rem;row-gap:2.4rem}

/* ============================================================
   FOOTER — matches the main site
   ============================================================ */
.site-footer{background:#000;border-top:1px solid rgba(255,255,255,.08);padding:3.5rem 5vw}
.footer__grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem}
.footer__brand{text-align:center}
.footer__mark{height:64px;width:auto;margin-bottom:1rem;display:inline-block}
.footer__tag,.footer__addr,.footer__copy{color:#fff;font-size:.9rem;font-family:var(--sans);font-weight:300}
.footer__addr{line-height:1.6;margin-top:.5rem}
.footer__copy{margin-top:.5rem}
.footer__col{text-align:center}
.footer__col h3{color:#fff;font-size:1.15rem;font-weight:600;margin-bottom:1rem;font-family:var(--sans)}
.footer__col ul{list-style:none;display:flex;flex-direction:column;gap:.75rem}
.footer__col a{color:#fff;text-decoration:none;font-size:1.05rem;font-family:var(--sans);font-weight:300}
.footer__col a:hover{text-decoration:underline}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1080px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2.8rem}
  .card:nth-child(odd) + .card::before{left:-1rem}
  .card:nth-child(odd)::before{display:none}
  .related__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:860px){
  .front__top{grid-template-columns:1fr;padding-top:2rem}
  .front__divider{display:none}
  .front__lead{padding-right:0}
  .front__rail{
    padding-left:0;margin-top:3rem;padding-top:2rem;border-top:3px double var(--rule);
  }
  .article__head{padding-top:1.6rem}
  .byline{justify-content:flex-start;gap:.8rem}
  .share{width:100%;margin-top:.3rem}
}

@media(max-width:640px){
  :root{--measure:100%}
  .masthead{padding-top:2.4rem}
  .masthead__dateline{gap:.8rem;font-size:9px;letter-spacing:.14em;flex-wrap:wrap}
  .topics{gap:1.2rem;padding:.9rem 5vw}
  .grid{grid-template-columns:1fr;row-gap:0}
  .card{padding:1.8rem 0;border-top:1px solid var(--rule)}
  .card:first-child{border-top:0;padding-top:0}
  .card + .card::before{display:none}
  .card__figure{margin-bottom:.9rem}
  .related__grid{grid-template-columns:1fr;row-gap:0}
  .related__grid .card{padding:1.6rem 0;border-top:1px solid var(--rule)}
  .related__grid .card:first-child{border-top:0;padding-top:0}
  .article__body{padding-top:2.2rem}
  .article__body p{font-size:1.11rem}
  .article__body p.lede{font-size:1.2rem}
  .pullquote p{font-size:1.5rem!important}
  .stats{grid-template-columns:1fr;gap:1.4rem;text-align:center}
  .article__cta{padding:2.1rem 1.4rem}
  .footer__grid{grid-template-columns:1fr;gap:2.25rem}
  .front{padding-bottom:3rem}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}