/* Mesh journal: blog index, article shell and in-article figures.
   Tokens mirror the page shells — ink #0e0e0c, bone #faf9f0, paper #f4f3ed, blue #182788. */
:root{--ink:#0e0e0c;--bone:#faf9f0;--paper:#f4f3ed;--blue:#182788;--line:#d8d8d1;--muted:#595b55;--mono:'DM Mono',monospace;--sans:'Manrope',sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.72 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
svg{max-width:100%}

/* Header ------------------------------------------------------------------ */
.nav{height:76px;background:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 clamp(24px,6vw,88px);position:relative;z-index:6}
.nav img{width:100px;height:auto;display:block}
.nav-links{display:flex;align-items:center;gap:26px;font:10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--bone)}
.nav-links a{opacity:.78;transition:opacity .2s ease}
.nav-links a:hover{opacity:1}
.nav-links a[aria-current='page']{opacity:1;border-bottom:1px solid rgba(250,249,240,.55);padding-bottom:3px}
.nav-links .pill{padding:12px 16px;border:1px solid rgba(250,249,240,.6);border-radius:999px;opacity:1}
.nav-links .pill:hover{background:rgba(250,249,240,.1)}
.back{font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--bone);border-bottom:1px solid #777;padding:7px 0}

/* Shared type -------------------------------------------------------------- */
.kicker{font:10px var(--mono);letter-spacing:.18em;text-transform:uppercase;display:flex;align-items:center;gap:12px;margin:0}
.kicker:before{content:'';width:28px;height:1px;background:#aeb7ff;flex:none}
.eyebrow{font:10px var(--mono);letter-spacing:.17em;text-transform:uppercase;color:#555750}
.crumbs{font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#8d8f88;margin:0 0 34px}
.crumbs a{border-bottom:1px solid #4a4b47;padding-bottom:2px}
.crumbs a:hover{color:var(--bone)}
.crumbs span{margin:0 9px;opacity:.5}

/* Journal masthead --------------------------------------------------------- */
.masthead{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:var(--bone);padding:clamp(66px,10vw,118px) clamp(24px,12.5vw,180px) clamp(58px,8vw,96px)}
.masthead:before{content:'';position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse 54% 62% at 78% 30%,#3b3e3c 0%,#1c1d1b 44%,#0e0e0c 78%)}
.masthead:after{content:'';position:absolute;inset:0;z-index:-1;opacity:.26;background:linear-gradient(90deg,transparent 24.9%,rgba(255,255,255,.3) 25%,transparent 25.1%),linear-gradient(90deg,transparent 74.9%,rgba(255,255,255,.3) 75%,transparent 75.1%),linear-gradient(0deg,transparent 64.9%,rgba(255,255,255,.22) 65%,transparent 65.1%)}
.masthead h1{font-size:clamp(46px,7.4vw,106px);line-height:.9;letter-spacing:-.085em;font-weight:500;margin:26px 0 22px;max-width:14ch}
.masthead h1 b{font-weight:800;display:block}
.masthead p{max-width:440px;font-size:15px;line-height:1.8;color:#c0c1ba;margin:0}
.masthead .kicker{color:#c9cac3}

/* Journal index ------------------------------------------------------------ */
.lead-post{padding:clamp(52px,7vw,92px) clamp(24px,12.5vw,180px);display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(34px,6vw,84px);align-items:center;border-bottom:1px solid var(--line)}
.lead-post h2{font-size:clamp(32px,4.4vw,58px);line-height:1.02;letter-spacing:-.065em;font-weight:500;margin:22px 0 18px}
.lead-post h2 b{font-weight:800}
.lead-post p{font-size:15px;line-height:1.82;color:#4e504b;max-width:470px;margin:0 0 26px}
.index-head{padding:clamp(48px,6vw,80px) clamp(24px,12.5vw,180px) 30px}
.index-head h2{font-size:clamp(28px,3.6vw,44px);line-height:1.04;letter-spacing:-.06em;font-weight:500;margin:20px 0 0}
.post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(286px,1fr));gap:1px;background:#dedfd7;margin:0 clamp(24px,12.5vw,180px) clamp(58px,8vw,96px);border:1px solid #dedfd7}
.post-card{background:var(--paper);padding:30px 28px 26px;display:flex;flex-direction:column;gap:16px;min-height:340px;transition:background-color .25s ease}
.post-card:hover{background:#fbfaf4}
.post-card .meta{font:9px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:#72736e;display:flex;flex-wrap:wrap;gap:10px}
.post-card h3{font-size:25px;line-height:1.08;letter-spacing:-.055em;font-weight:600;margin:0}
.post-card p{font-size:13px;line-height:1.75;color:#585a55;margin:0}
.post-card .more{margin-top:auto;font:10px var(--mono);letter-spacing:.1em;text-transform:uppercase;display:inline-flex;align-items:center;gap:9px}
.post-card .more i{font-style:normal;transition:transform .25s ease}
.post-card:hover .more i{transform:translate(3px,-3px)}
.post-card.is-soon{background:#ecece6;color:#6c6e68}
.post-card.is-soon h3{color:#3d3f3a}

/* Card art ----------------------------------------------------------------- */
.card-art{display:block;height:92px;border-radius:14px;overflow:hidden;position:relative;background:#14150f}
.art-rings:after{content:'';position:absolute;left:50%;top:50%;width:112px;height:112px;margin:-56px 0 0 -56px;border-radius:50%;border:1px solid rgba(250,249,240,.55);box-shadow:0 0 0 18px rgba(250,249,240,.1),0 0 0 36px rgba(250,249,240,.06)}
.art-stages{display:flex;align-items:center;gap:2px;padding:0 18px;background:#15161a}
.art-stages i{display:block;height:20px;border-radius:3px;background:#b7b8be}
.art-stages i:nth-child(2n){background:#4e515a}
.art-stages i:nth-child(4n){background:#e3d2c4}
.art-dial{background:radial-gradient(circle at 50% 118%,#3c4ba8,#182788 48%,#101a4f)}
.art-dial:after{content:'';position:absolute;left:50%;bottom:-62px;width:124px;height:124px;margin-left:-62px;border-radius:50%;border:2px solid rgba(250,249,240,.5);border-right-color:transparent;border-bottom-color:transparent;transform:rotate(45deg)}
.art-pulse,.art-drop{display:flex;align-items:center;justify-content:center}
.art-pulse svg{width:62%;height:auto}
.art-pulse polyline{fill:none;stroke:rgba(250,249,240,.72);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.art-drop svg{width:auto;height:52%}
.art-drop path{fill:rgba(174,183,255,.85)}
.art-bars{display:flex;align-items:flex-end;gap:4px;padding:18px 20px}
.art-bars i{display:block;flex:1;background:rgba(250,249,240,.42);border-radius:3px 3px 1px 1px}
.art-bars i:last-child,.art-bars i:nth-child(4){background:rgba(174,183,255,.85)}
.art-moon:after{content:'';position:absolute;left:50%;top:50%;width:66px;height:66px;margin:-33px 0 0 -33px;border-radius:50%;
  background:rgba(250,249,240,.6);-webkit-mask:radial-gradient(circle 30px at 72% 36%,transparent 99%,#000 100%);
  mask:radial-gradient(circle 30px at 72% 36%,transparent 99%,#000 100%)}
.art-cell{display:flex;align-items:center;justify-content:center}
.art-cell i{display:block;width:104px;height:44px;border:2px solid rgba(250,249,240,.55);border-radius:7px;position:relative;
  background:linear-gradient(90deg,rgba(174,183,255,.85) 0 72%,transparent 72%) content-box;padding:4px}
.art-cell i:after{content:'';position:absolute;right:-8px;top:50%;width:5px;height:16px;margin-top:-8px;border-radius:0 3px 3px 0;background:rgba(250,249,240,.55)}
.art-aqi{display:flex;gap:2px}
.art-aqi i{display:block;flex:1}
.art-grid{background:radial-gradient(ellipse 60% 90% at 50% 20%,#2c2e2b,#14150f 72%)}
.art-grid:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 19.8%,rgba(174,183,255,.85) 20%,transparent 20.2%),linear-gradient(90deg,transparent 49.8%,rgba(174,183,255,.85) 50%,transparent 50.2%),linear-gradient(90deg,transparent 79.8%,rgba(174,183,255,.85) 80%,transparent 80.2%),linear-gradient(0deg,transparent 54.8%,rgba(250,249,240,.5) 55%,transparent 55.2%)}
.lead-post .card-art{height:clamp(170px,20vw,250px);border-radius:20px}
.lead-post .art-stages{padding:0 clamp(22px,4vw,46px);gap:3px}
.lead-post .art-stages i{height:clamp(46px,6.5vw,74px);border-radius:5px}
/* At lead size the scale is drawn as a rising stair rather than a flat swatch,
   so the card reads as the subject rather than as a palette. */
.lead-post .art-aqi{align-items:flex-end;padding:clamp(26px,3.5vw,42px) clamp(22px,4vw,46px);gap:5px}
.lead-post .art-aqi i{border-radius:6px 6px 3px 3px}
.lead-post .art-aqi i:nth-child(1){height:20%}
.lead-post .art-aqi i:nth-child(2){height:33%}
.lead-post .art-aqi i:nth-child(3){height:46%}
.lead-post .art-aqi i:nth-child(4){height:61%}
.lead-post .art-aqi i:nth-child(5){height:79%}
.lead-post .art-aqi i:nth-child(6){height:100%}
.lead-post .art-rings:after{width:230px;height:230px;margin:-115px 0 0 -115px;box-shadow:0 0 0 38px rgba(250,249,240,.08),0 0 0 76px rgba(250,249,240,.05)}

/* Buttons ------------------------------------------------------------------ */
.cta{display:inline-flex;align-items:center;gap:22px;background:var(--ink);color:var(--bone);border-radius:999px;padding:15px 19px 15px 22px;font:10px var(--mono);letter-spacing:.1em;text-transform:uppercase;transition:background-color .25s ease,transform .25s ease}
.cta i{font-style:normal;font-size:15px;line-height:1}
.cta:hover{background:var(--blue);transform:translateY(-2px)}
.cta-light{background:var(--bone);color:var(--ink)}
.cta-light:hover{background:#fff;color:var(--blue)}

/* Article ------------------------------------------------------------------ */
.post-head{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:var(--bone);padding:clamp(48px,6vw,78px) clamp(24px,12.5vw,180px) clamp(52px,7vw,84px)}
.post-head:before{content:'';position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse 60% 70% at 84% 18%,#3a3d3b 0%,#1b1c1a 46%,#0e0e0c 80%)}
.post-head h1{font-size:clamp(36px,5.4vw,74px);line-height:.96;letter-spacing:-.075em;font-weight:500;margin:24px 0 24px;max-width:20ch}
.post-head h1 b{font-weight:800}
.post-head .standfirst{max-width:560px;font-size:16px;line-height:1.8;color:#c3c4bd;margin:0 0 34px}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding-top:22px;border-top:1px solid #32332f;font:10px var(--mono);letter-spacing:.11em;text-transform:uppercase;color:#9a9c95}
.byline b{color:var(--bone);font-weight:500}

.post-wrap{max-width:1060px;margin:0 auto;padding:clamp(44px,6vw,80px) 24px clamp(64px,8vw,104px);display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(30px,5vw,68px)}
.toc{position:sticky;top:28px;align-self:start}
.toc h2{font:10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#6d6f69;margin:0 0 16px;font-weight:400}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.toc li{counter-increment:toc;margin:0 0 11px;padding-left:26px;position:relative;font-size:13px;line-height:1.5}
.toc li:before{content:counter(toc,decimal-leading-zero);position:absolute;left:0;top:2px;font:9px var(--mono);color:#9a9c94}
.toc a{color:#4c4e49;border-bottom:1px solid transparent}
.toc a:hover{color:var(--ink);border-bottom-color:var(--ink)}

.prose{max-width:720px;min-width:0}
.prose>p{font-size:17px;line-height:1.8;color:#33352f;margin:0 0 23px}
.prose .standfirst{font-size:19px;line-height:1.72;color:#24261f}
.prose h2{font-size:clamp(27px,3.4vw,38px);line-height:1.1;letter-spacing:-.055em;font-weight:500;margin:62px 0 18px;scroll-margin-top:28px}
.prose h3{font-size:19px;line-height:1.3;letter-spacing:-.03em;font-weight:600;margin:38px 0 10px}
.prose a{color:var(--blue);border-bottom:1px solid rgba(24,39,136,.32)}
.prose a:hover{border-bottom-color:var(--blue)}
.prose ul,.prose ol{margin:0 0 24px;padding-left:22px;font-size:17px;line-height:1.8;color:#33352f}
.prose li{margin:9px 0}
.prose li::marker{color:#9a9c94}
.prose strong{font-weight:600;color:var(--ink)}
.prose hr{border:0;border-top:1px solid var(--line);margin:52px 0}
.prose figure{margin:38px 0}
.prose figcaption{font:10px/1.7 var(--mono);letter-spacing:.07em;color:#72746e;margin-top:14px;text-transform:uppercase}

/* In-article figures ------------------------------------------------------- */
.pull{margin:44px 0;padding:4px 0 4px 26px;border-left:3px solid var(--blue);font-size:clamp(22px,2.7vw,29px);line-height:1.22;letter-spacing:-.045em;font-weight:500;color:var(--ink)}
.callout{border-left:3px solid var(--blue);background:#eaecf7;padding:20px 22px;margin:34px 0;font-size:15px;line-height:1.72}
.callout p{margin:0 0 12px}
.callout p:last-child{margin:0}
.mesh-note{background:var(--ink);color:#d3d4cd;border-radius:18px;padding:28px 28px 26px;margin:40px 0}
.mesh-note h3{font:10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#aeb7ff;margin:0 0 14px;font-weight:400}
.mesh-note p{font-size:15px;line-height:1.78;margin:0 0 14px}
.mesh-note p:last-child{margin:0}
.mesh-note strong{color:var(--bone);font-weight:600}
.mesh-note a{color:var(--bone);border-bottom:1px solid #6a6c66}
.mesh-note a:hover{border-bottom-color:var(--bone)}

.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:#dedfd7;border:1px solid #dedfd7;margin:34px 0}
.tile{background:#fbfaf4;padding:22px 20px 20px;display:flex;flex-direction:column;gap:8px}
.tile .label{font:9px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:#72746e}
.tile .value{font-size:clamp(34px,4.4vw,48px);line-height:.98;letter-spacing:-.06em;font-weight:700;color:var(--blue)}
.tile .foot{font-size:12.5px;line-height:1.6;color:#5c5e58}
.tile.is-plain .value{color:var(--ink)}

.datatable{width:100%;border-collapse:collapse;margin:34px 0;font-size:14px}
.datatable caption{text-align:left;font:10px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:#72746e;padding-bottom:14px}
.datatable th,.datatable td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.6}
.datatable thead th{font:9px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:#5d5f59;border-bottom:1px solid #b9bab3}
.datatable tbody th{font-weight:600}
.datatable td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.datatable tbody tr:hover{background:#fbfaf4}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:34px 0;background:linear-gradient(90deg,var(--paper) 30%,rgba(244,243,237,0)) left/24px 100% no-repeat local,linear-gradient(90deg,rgba(244,243,237,0),var(--paper) 70%) right/24px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(14,14,12,.16),rgba(14,14,12,0)) left/13px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(14,14,12,.16),rgba(14,14,12,0)) right/13px 100% no-repeat scroll}
.table-scroll:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.table-scroll .datatable{margin:0;min-width:520px}

.ribbon{display:flex;height:22px;gap:2px;border-radius:8px;overflow:hidden;margin:0}
.ribbon i{display:block}
.ribbon .light,.ribbon-key .light{background:#b7b8be}
.ribbon .deep,.ribbon-key .deep{background:#4e515a}
.ribbon .rem,.ribbon-key .rem{background:#e3d2c4}
.ribbon .wake,.ribbon-key .wake{background:#8f9199}
.ribbon-key{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px;font:9px var(--mono);letter-spacing:.11em;text-transform:uppercase;color:#5d5f59}
.ribbon-key span{display:inline-flex;align-items:center;gap:8px}
.ribbon-key i{width:11px;height:11px;border-radius:3px;display:block}

.faq{margin:30px 0 0}
.faq details{border-top:1px solid var(--line);padding:0}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:19px 34px 19px 0;position:relative;font-size:17px;line-height:1.4;letter-spacing:-.02em;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:'+';position:absolute;right:4px;top:18px;font:300 22px/1 var(--sans);color:#8d8f88}
.faq details[open] summary:after{content:'\2212'}
.faq details>div{padding:0 0 20px}
.faq details p{font-size:16px;line-height:1.78;color:#44463f;margin:0 0 14px}
.faq details p:last-child{margin:0}

.sources{margin:52px 0 0;padding-top:26px;border-top:1px solid var(--line)}
.sources h2{font:10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#6d6f69;margin:0 0 16px;font-weight:400}
.sources ol{margin:0;padding-left:20px;font-size:13.5px;line-height:1.72;color:#55574f}
.sources li{margin:8px 0}
.disclaimer{margin:34px 0 0;font-size:12.5px;line-height:1.72;color:#72746e}

/* Article tail ------------------------------------------------------------- */
.post-cta{position:relative;overflow:hidden;background:var(--blue);color:#fff;padding:clamp(62px,8vw,104px) clamp(24px,12.5vw,180px)}
.post-cta:before{content:'M';position:absolute;right:-4vw;top:-26vw;font-size:66vw;font-weight:800;color:rgba(255,255,255,.035);line-height:.8;letter-spacing:-.16em;pointer-events:none}
.post-cta .kicker{color:#bdc5ff}
.post-cta h2{position:relative;font-size:clamp(32px,4.6vw,62px);line-height:.98;letter-spacing:-.075em;font-weight:500;margin:24px 0 20px;max-width:17ch}
.post-cta h2 b{font-weight:800}
.post-cta p{position:relative;max-width:420px;font-size:15px;line-height:1.8;color:#d3d8ff;margin:0 0 30px}
.post-cta .cta-row{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.post-cta .price{font:10px var(--mono);letter-spacing:.11em;text-transform:uppercase;color:#bdc5ff}

.related{padding:clamp(52px,7vw,88px) clamp(24px,12.5vw,180px) clamp(58px,8vw,96px)}
.related>h2{font-size:clamp(24px,3vw,34px);line-height:1.06;letter-spacing:-.055em;font-weight:500;margin:18px 0 32px}
.related .post-grid{margin:0}

/* Footer ------------------------------------------------------------------- */
.footer{padding:28px clamp(24px,6vw,88px);background:var(--ink);color:#b7b8b2;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.footer a{color:var(--bone)}
.links{display:flex;gap:20px;flex-wrap:wrap}

/* Air-quality figures ------------------------------------------------------ */
/* Tier colours are muted readings of the US EPA AQI bands so they stay legible
   as a scale while sitting inside the bone/ink/blue palette. */
:root{--t1:#7f9b7a;--t2:#d3bd72;--t3:#d19a5f;--t4:#bf6a55;--t5:#8a5d7d;--t6:#6a3a3a}
.sw-t1{background:var(--t1)}.sw-t2{background:var(--t2)}.sw-t3{background:var(--t3)}
.sw-t4{background:var(--t4)}.sw-t5{background:var(--t5)}.sw-t6{background:var(--t6)}

.aqi-bar{display:flex;gap:2px;height:46px;border-radius:10px;overflow:hidden;margin:0}
.aqi-bar i{display:flex;align-items:center;justify-content:center;font:9px var(--mono);letter-spacing:.07em;color:#1a1b17;min-width:0;overflow:hidden}
.aqi-bar i.sw-t5,.aqi-bar i.sw-t6{color:#f6f4ec}
.aqi-key{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;font:9px var(--mono);letter-spacing:.11em;text-transform:uppercase;color:#5d5f59}
.aqi-key span{display:inline-flex;align-items:center;gap:8px}
.aqi-key i{width:11px;height:11px;border-radius:3px;display:block;flex:none}

:root{--z1:#8a9ea8;--z2:#7f9b7a;--z3:#d3bd72;--z4:#d19a5f;--z5:#bf6a55}
.sw-z1{background:var(--z1)}.sw-z2{background:var(--z2)}.sw-z3{background:var(--z3)}
.sw-z4{background:var(--z4)}.sw-z5{background:var(--z5)}

/* A value placed on a scale: where your number sits, and the span either side. */
.rangebar{margin:0}
.rangebar .scale{position:relative;height:12px;border-radius:999px;background:linear-gradient(90deg,#cfd3e4,#8e96c6,var(--blue));margin:44px 0 0}
.rangebar .span{position:absolute;top:-7px;height:26px;border-radius:7px;background:rgba(24,39,136,.17);border:1px solid rgba(24,39,136,.3)}
.rangebar .mark{position:absolute;top:-13px;width:2px;height:38px;background:var(--ink)}
.rangebar .mark b{position:absolute;left:50%;top:-23px;transform:translateX(-50%);font:10px var(--mono);letter-spacing:.06em;white-space:nowrap;font-weight:500}
.rangebar .ticks{display:flex;justify-content:space-between;margin-top:16px;font:9px var(--mono);letter-spacing:.08em;color:#6d6f69}

/* Stacked "what to do at this reading" rows. */
.tiers{margin:34px 0;border:1px solid #dedfd7;border-radius:4px;overflow:hidden}
/* Rows are declared explicitly so the colour chip's grid-row:1/-1 has an
   explicit end line to resolve against -- against implicit rows it collapses
   to a single row and the chip stops stretching. */
.tier{display:grid;grid-template-columns:7px 92px 1fr;grid-template-rows:auto auto;gap:0 16px;align-items:start;background:#fbfaf4;padding:17px 20px 16px;border-top:1px solid #e6e6df}
.tier:first-child{border-top:0}
.tier .chip{grid-row:1/-1;align-self:stretch;border-radius:4px;display:block}
.tier .range{font:11px var(--mono);letter-spacing:.06em;color:#3f413b;padding-top:2px}
.tier .name{font-size:15px;font-weight:600;letter-spacing:-.02em}
.tier p{grid-column:2/span 2;margin:7px 0 0;font-size:14px;line-height:1.68;color:#55574f}

/* Twelve-month severity columns. */
.seasonchart{display:flex;align-items:flex-end;gap:4px;height:168px;margin:0}
.seasonchart .col{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:10px;height:100%}
.seasonchart i{display:block;width:100%;min-height:5px;border-radius:5px 5px 2px 2px}
.seasonchart span{font:9px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:#6d6f69}
.seasonchart .col.is-now span{color:var(--blue);font-weight:500}

/* Horizontal magnitude bars (breathing rate, dose). */
.bars{margin:30px 0;display:flex;flex-direction:column;gap:14px}
.bars .bar{display:grid;grid-template-columns:116px minmax(0,1fr) auto;gap:14px;align-items:center}
.bars .bl{font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#5d5f59}
.bars .track{background:#e4e4dc;border-radius:999px;height:16px;overflow:hidden}
.bars .track i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#2c3f9e,var(--blue))}
.bars .bv{font:11px var(--mono);letter-spacing:.04em;color:#3f413b;white-space:nowrap}

/* Inline SVG figures. */
.chart{margin:0}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .grid{stroke:#dedfd7;stroke-width:1}
.chart .axis{fill:#6d6f69;font:9px var(--mono);letter-spacing:.08em}
.chart .curve{fill:none;stroke:var(--blue);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.chart .area{fill:rgba(24,39,136,.1)}
.chart .node{fill:var(--blue)}
.chart .node-o{fill:var(--paper);stroke:var(--blue);stroke-width:2.5}
.chart .tag{fill:var(--ink);font:10px var(--mono);letter-spacing:.05em;font-weight:500}
.chart .tag-s{fill:#6d6f69;font:9px var(--mono);letter-spacing:.06em}
.chart .lead{stroke:#b9bab3;stroke-width:1;stroke-dasharray:3 3}

/* Numbered protocol. */
.steps{list-style:none;counter-reset:step;margin:30px 0;padding:0}
.steps li{counter-increment:step;position:relative;padding:0 0 22px 56px;border-bottom:1px solid var(--line)}
.steps li:last-child{border-bottom:0;padding-bottom:0}
.steps li+li{padding-top:22px}
.steps li:before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:0;font:12px var(--mono);color:var(--blue);letter-spacing:.04em}
.steps li+li:before{top:22px}
.steps h3{margin:0 0 7px;font-size:18px;line-height:1.3;letter-spacing:-.03em;font-weight:600}
.steps p{margin:0;font-size:15px;line-height:1.72;color:#4b4d47}

/* Swap this for that. */
.swap{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#dedfd7;border:1px solid #dedfd7;margin:34px 0}
.swap .col{background:#fbfaf4;padding:22px 22px 20px}
.swap h4{margin:0 0 14px;font:10px var(--mono);letter-spacing:.14em;text-transform:uppercase;font-weight:400;color:#6d6f69}
.swap .is-no h4{color:#a4584a}
.swap .is-yes h4{color:#4a6b45}
.swap ul{margin:0;padding:0;list-style:none;font-size:14.5px;line-height:1.66}
.swap li{position:relative;padding-left:20px;margin:0 0 11px;color:#44463f}
.swap li:last-child{margin:0}
.swap li:before{position:absolute;left:0;top:0;font:12px var(--mono)}
.swap .is-no li:before{content:'\2715';color:#a4584a}
.swap .is-yes li:before{content:'\2713';color:#4a6b45}

/* Article hero art -------------------------------------------------------- */
.post-head.has-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,72px);align-items:end}
.post-head.has-hero .head-text{min-width:0}
.post-head.has-hero h1{max-width:18ch}
.hero-art{min-width:0;background:rgba(250,249,240,.045);border:1px solid rgba(250,249,240,.14);border-radius:18px;padding:24px 24px 22px}
.hero-art .label{font:9px var(--mono);letter-spacing:.15em;text-transform:uppercase;color:#9fa2bd;margin:0 0 18px}
.hero-art .aqi-bar{height:38px}
.hero-art .aqi-bar i{color:#15160f}
.hero-art .aqi-bar i.sw-t5,.hero-art .aqi-bar i.sw-t6{color:#f6f4ec}
.hero-art .note{margin:18px 0 0;font-size:12.5px;line-height:1.66;color:#aeb0a8}
.hero-art .note b{color:var(--bone);font-weight:600}

/* Responsive --------------------------------------------------------------- */
@media(max-width:980px){
  .lead-post{grid-template-columns:1fr;padding-top:clamp(44px,7vw,70px)}
  .lead-post .card-art{order:-1}
  .post-wrap{grid-template-columns:1fr;max-width:760px}
  .toc{position:static;padding:20px 22px;background:#ecece6;border-radius:16px}
  .toc ol{columns:2;column-gap:26px}
  .post-head.has-hero{grid-template-columns:1fr;align-items:start}
  .post-head.has-hero .hero-art{margin-top:4px}
  .post-head.has-hero h1{max-width:20ch}
}
@media(max-width:740px){
  .nav{padding:0 24px;gap:12px}
  .nav img{width:86px}
  .nav-links a:not(.pill){display:none}
  .nav-links .pill{padding:10px 13px;font-size:9px}
  .masthead h1{font-size:clamp(42px,12vw,56px)}
  .post-head h1{font-size:clamp(32px,8.6vw,42px)}
  .prose>p,.prose ul,.prose ol{font-size:16px}
  .toc ol{columns:1}
  .post-grid{grid-template-columns:1fr}
  .swap{grid-template-columns:1fr}
  .bars .bar{grid-template-columns:1fr auto;gap:7px 12px}
  .bars .bl{grid-column:1/span 2}
  .bars .track{grid-column:1}
  .seasonchart{height:140px;gap:3px}
  .seasonchart span{font-size:8px}
  .aqi-bar i{font-size:8px}
  .tier{grid-template-columns:6px 1fr;grid-template-rows:auto auto auto;gap:0 13px}
  .tier .range{grid-column:2;padding-top:0}
  .tier .name{grid-column:2;margin-top:3px}
  .tier p{grid-column:2}
  .footer{gap:16px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cta,.post-card,.post-card .more i{transition:none}
  .cta:hover{transform:none}
}