/* Upgrade Digest — "daylight through a window": pine frame, sky glass, sunlit yellow, brick CTA */
:root{
  --ink:#1d2733; --muted:#56606c; --line:#dbe3ea;
  --pine:#13614f; --pine-deep:#0d4a3c; --pine-tint:#e4f1ec;
  --sky:#e3f1fb; --sky-mid:#b9dcf3; --sky-deep:#2f7fb8;
  --sun:#ffd86b; --sun-tint:#fff5d6;
  --brick:#c8431a; --brick-hover:#ad3812;
  --paper:#ffffff;
  --serif:Georgia,'Iowan Old Style','Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:19px;line-height:1.7}
img{max-width:100%;height:auto}
a{color:var(--pine)}
.wrap{max-width:740px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
.wide{max-width:1040px}

/* masthead: pine bar with a sunlit rule */
.mast{background:var(--pine);border-bottom:4px solid var(--sun)}
.mast .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:13px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.logo svg{flex:none}
.logo b{font-family:var(--sans);font-weight:800;font-size:21px;letter-spacing:-.02em}
.logo b span{color:var(--sun)}
.nav{display:flex;gap:20px;font-family:var(--sans);font-size:15px}
.nav a{color:#d5ebe3;text-decoration:none}
.nav a:hover{color:#fff}

/* article */
article{padding-block:24px 10px}
.tag{margin:0 0 14px;font-family:var(--sans);font-size:14px;color:var(--muted)}
.tag b{display:inline-block;background:var(--sun);color:var(--ink);font-weight:700;padding:2px 10px;border-radius:4px;margin-right:6px}
h1{font-family:var(--sans);font-size:clamp(28px,6vw,40px);line-height:1.15;font-weight:800;letter-spacing:-.015em;margin:0 0 12px;text-wrap:balance}
h2{font-family:var(--sans);font-size:24px;line-height:1.25;font-weight:750;margin:40px 0 12px;text-wrap:balance;color:var(--pine-deep)}
p{margin:0 0 16px}
.by{font-family:var(--sans);font-size:14px;color:var(--muted);margin-bottom:20px}
.lead{font-size:21px}
.hero{display:block;margin:0 0 22px}
.hero img{display:block;width:100%;height:auto;max-height:380px;border-radius:10px;aspect-ratio:1120/748;object-fit:cover;object-position:center 30%;background:var(--sky)}
.note{font-family:var(--sans);font-size:13px;color:var(--muted)}

/* cost range graphic */
.range{background:var(--sky);border-radius:10px;padding:16px 18px 12px;margin:18px 0 22px;font-family:var(--sans)}
.range h3{margin:0 0 40px;font-size:15px;font-weight:700;color:var(--ink)}
.track{position:relative;height:10px;background:#fff;border-radius:5px;margin:0 0 30px}
.band{position:absolute;top:0;bottom:0;left:24.5%;right:15.4%;background:var(--sky-deep);border-radius:5px}
.avg{position:absolute;left:52.5%;bottom:-6px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap}
.avg::after{content:"";display:block;width:3px;height:20px;background:var(--brick);margin-top:3px;border-radius:2px}
.avgv{color:var(--brick)}
.lo,.hi{position:absolute;top:16px;transform:translateX(-50%);font-size:14px;font-weight:700;color:var(--sky-deep);font-variant-numeric:tabular-nums;white-space:nowrap}
.lo{left:24.5%}.hi{left:84.6%}
.range .cap{font-size:13px;color:var(--muted);margin:0}

/* material range bars */
.mats{list-style:none;margin:8px 0 6px;padding:0;font-family:var(--sans)}
.mats li{display:grid;grid-template-columns:96px 1fr 120px;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);margin:0}
.mats .nm{font-weight:700;font-size:16px}
.mats .bar{position:relative;height:8px;background:var(--sky);border-radius:4px}
.mats .bar i{position:absolute;top:0;bottom:0;background:var(--pine);border-radius:4px}
.mats .pr{text-align:right;font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}
.mats .scale{display:grid;grid-template-columns:96px 1fr 120px;gap:12px;border:0;padding:6px 0 0;font-size:12px;color:var(--muted)}
.mats .scale span:nth-child(2){display:flex;justify-content:space-between}
@media (max-width:520px){
  .mats li{grid-template-columns:1fr auto;row-gap:6px}
  .mats .bar{grid-column:1 / -1;grid-row:2}
  .mats .scale{display:none}
}

/* signs list with icons */
.signs{list-style:none;margin:6px 0 16px;padding:0}
.signs li{display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:start;margin:0 0 12px}
.signs svg{width:38px;height:38px;display:block;margin-top:2px}

/* tax note */
.box{display:grid;grid-template-columns:28px 1fr;gap:12px;background:var(--sun-tint);border-left:5px solid var(--sun);border-radius:10px;padding:18px 20px;margin:24px 0}
.box svg{width:28px;height:28px;margin-top:3px}
.box p{margin:0}

/* savings stat */
.save{display:flex;align-items:center;gap:16px;background:var(--pine-tint);border-radius:10px;padding:14px 18px;margin:18px 0 22px;font-family:var(--sans)}
.save b{font-size:32px;line-height:1;color:var(--pine);font-weight:800;letter-spacing:-.02em;flex:none}
.save span{font-size:15px;line-height:1.45}

/* buttons */
.cta{display:block;text-align:center;background:var(--brick);color:#fff;text-decoration:none;font-family:var(--sans);font-weight:700;font-size:18px;line-height:1.3;padding:15px 18px;border-radius:10px;margin:28px 0 8px;box-shadow:0 3px 0 var(--brick-hover)}
.cta:hover,.cta:focus-visible{background:var(--brick-hover)}
.cta-sub{text-align:center;font-family:var(--sans);font-size:13px;color:var(--muted);margin-bottom:24px}

/* window-count picker */
.pick{background:var(--pine);color:#fff;border-radius:12px;padding:18px 18px 14px;margin:30px 0 10px;font-family:var(--sans)}
.pick-q{font-weight:750;font-size:19px;line-height:1.3;margin:0 0 4px}
.pick-hint{font-size:14px;color:#cfe6dd;margin:0 0 12px}
.pick-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.pick-opts a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:11px 8px 10px;background:#fff;border-radius:8px;color:var(--ink);font-weight:700;font-size:16px;text-decoration:none;box-shadow:0 3px 0 var(--pine-deep)}
.pick-opts a svg{width:32px;height:24px}
.pick-opts a:hover,.pick-opts a:focus-visible{background:var(--sun)}
.pick-sub{font-size:13px;color:#cfe6dd;margin:14px 0 0;text-align:center}
@media (min-width:600px){ .pick-opts{grid-template-columns:repeat(4,1fr)} }

.disc{font-family:var(--sans);font-size:13px;color:var(--muted);border-top:1px solid var(--line);margin-top:34px;padding-top:16px}
.disc a{color:var(--muted)}

/* home: magazine front page */
.home{padding-block:22px 10px}
.kicker{font-family:var(--sans);font-size:15px;color:var(--muted);margin:0 0 18px}
.feature{display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:center;text-decoration:none;color:var(--ink);padding-bottom:36px;border-bottom:1px solid var(--line)}
.feature-img img{display:block;width:100%;height:auto;aspect-ratio:1120/748;object-fit:cover;border-radius:12px}
.feature-body{display:block}
.topic{display:inline-block;font-family:var(--sans);font-size:14px;font-weight:700;color:var(--pine);background:var(--pine-tint);padding:2px 10px;border-radius:4px}
.feature h1{font-size:clamp(30px,4.2vw,46px);line-height:1.08;margin:14px 0 14px;color:var(--ink)}
.dek{display:block;font-size:19px;line-height:1.6;color:var(--muted);margin-bottom:22px}
.read{display:inline-block;font-family:var(--sans);font-weight:700;font-size:17px;color:#fff;background:var(--pine);padding:12px 22px;border-radius:8px}
.feature:hover .read,.feature:focus-visible .read{background:var(--pine-deep)}
.feature:hover h1{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}

.glance{background:var(--sky);border-radius:12px;padding:22px 24px 18px;margin:36px 0 0;font-family:var(--sans)}
.glance h2{margin:0 0 18px;font-size:22px}
.glance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.glance-grid b{display:block;font-size:30px;line-height:1.05;letter-spacing:-.02em;color:var(--sky-deep);margin-bottom:6px}
.glance-grid div:nth-child(3) b{color:var(--pine)}
.glance-grid span{display:block;font-size:15px;line-height:1.45;color:var(--ink)}
.glance-src{font-size:13px;color:var(--muted);margin:18px 0 0}

.how{margin:44px 0 0}
.how h2{margin:0 0 18px;font-size:22px}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.how h3{font-family:var(--sans);font-size:17px;margin:0 0 6px;padding-top:12px;border-top:3px solid var(--sun)}
.how p{font-size:17px;line-height:1.6;color:var(--muted);margin:0}
.soon{font-family:var(--sans);font-size:15px;color:var(--muted);margin:40px 0 0;padding:16px 0 0;border-top:1px solid var(--line)}

@media (max-width:820px){
  .feature{grid-template-columns:1fr;gap:18px}
  .glance-grid,.how-grid{grid-template-columns:1fr;gap:18px}
  .glance{padding:22px 20px 18px}
  .glance-grid div{display:grid;grid-template-columns:130px 1fr;gap:14px;align-items:center}
  .glance-grid b{font-size:24px;margin:0}
}
@media (max-width:520px){ .feature-img{margin:0 -18px} .feature-img img{border-radius:0} }

/* (legacy card styles) */
.intro{background:var(--sky);border-bottom:1px solid var(--sky-mid)}
.intro .wrap{display:grid;grid-template-columns:1fr 220px;gap:30px;align-items:center;padding-block:40px 36px}
.intro h1{font-size:clamp(30px,6vw,46px);color:var(--pine-deep)}
.intro p{color:var(--ink);max-width:56ch;margin:0}
.intro svg{width:220px;height:auto}
@media (max-width:640px){ .intro .wrap{grid-template-columns:1fr} .intro svg{display:none} }
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px;padding-block:28px 40px}
.card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;text-decoration:none;color:var(--ink);background:#fff}
.card:hover{border-color:var(--pine)}
.card .thumb{aspect-ratio:16/9;background:var(--sky);display:block}
.card .thumb svg,.card .thumb img{display:block;width:100%;height:100%;object-fit:cover}
.card .body{padding:14px 16px 18px}
.card .k{display:inline-block;font-family:var(--sans);font-size:13px;color:var(--pine);background:var(--pine-tint);font-weight:700;padding:1px 8px;border-radius:4px}
.card h2{font-size:20px;margin:8px 0 6px;color:var(--ink)}
.card p{font-size:16px;color:var(--muted);margin:0}

/* pages */
.page{padding-block:30px 20px}
.page h1{font-size:clamp(28px,5vw,36px)}
.page ul{padding-left:22px;margin:0 0 16px}

/* footer */
footer{background:var(--pine-deep);margin-top:34px;color:#c4ddd4}
footer .wrap{padding-block:26px 32px;font-family:var(--sans);font-size:14px}
footer nav{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:12px}
footer a{color:#fff}
footer p{margin:0 0 6px}
:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
@media (max-width:520px){
  .nav{display:none} body{font-size:18px} .lead{font-size:20px}
  .hero{margin-left:-18px;margin-right:-18px} .hero img{border-radius:0}
  .save b{font-size:28px}
}

/* roofing additions + two-story home */
.chart-h{font-family:var(--sans);font-size:15px;font-weight:700;margin:20px 0 4px}
.mats.sizes li{grid-template-columns:96px 1fr 150px}
.mats.sizes .scale{grid-template-columns:96px 1fr 150px}
table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:16px;margin:6px 0 8px;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line)}
th{font-size:13px;color:var(--muted);font-weight:600}
td:nth-child(2),th:nth-child(2){text-align:right;white-space:nowrap}
td:nth-child(3),th:nth-child(3){text-align:right;white-space:nowrap}
tbody tr:nth-child(odd){background:#f7fafc}
ul.plain{padding-left:22px;margin:0 0 16px}
ul.plain li{margin-bottom:8px}
.hero svg{display:block;width:100%;height:auto;max-height:380px;border-radius:10px}
.pick-opts.txt a{padding:14px 8px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding-bottom:30px;border-bottom:1px solid var(--line)}
.story{display:block;text-decoration:none;color:var(--ink)}
.story-img{display:block;margin-bottom:14px}
.story-img img,.story-img svg{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:12px}
.story h2{font-size:clamp(24px,2.8vw,32px);line-height:1.15;margin:10px 0 8px;color:var(--ink)}
.story:hover h2{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.story .dek{font-size:17px;margin-bottom:16px}
.story:hover .read{background:var(--pine-deep)}
@media (max-width:820px){ .duo{grid-template-columns:1fr} }
@media (max-width:520px){ .mats.sizes li{grid-template-columns:1fr auto} th:nth-child(2){font-size:12px} td,th{padding:9px 5px} table{font-size:15px} }