/* ═══════════════════════════════════════════════════════════════════════════════
   All Things HVAC — "Comfort Almanac"
   A household reference you keep, not a page you land on once.

   Slate is the ground and paper is the panel — the inverse of the ivory-and-warm-
   serif this genre defaults to.

   Two accents, with distinct jobs:
     verdigris  — interaction. Links, hovers, buttons, focus. The colour copper
                  line sets actually oxidise to.
     ochre      — editorial marking. The seasonal spine, eyebrows, list markers,
                  category labels, and correction notes. Never a control.

   Tokens are declared once here and referenced everywhere. Nothing below hard-codes
   a colour, a duration or an easing curve.
   ═══════════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── ground and paper ── */
  --slate:#1f2f3a;
  --slate-2:#18242d;
  --paper:#f7f4ec;
  --paper-2:#ece7db;
  --panel:#fffdf7;

  /* ── ink, biased warm-neutral to sit on paper rather than white ── */
  --ink:#17242c;
  --ink-2:#455662;
  --muted:#78848d;
  --hair:#d7d0c0;
  --hair-2:#e5e0d2;

  /* ── accent: verdigris, plus its light form for use on slate ── */
  --accent:#2f7d6b;
  --accent-deep:#245f52;
  --accent-light:#7fd0bc;
  --accent-ink:#fffdf7;

  /* ── the seasonal spine, and nothing else, is ochre ── */
  --ochre:#9a6a12;
  --ochre-light:#dcb463;

  /* No urgency palette is declared. This direction organises by season, not by
     triage, so green/amber/red would be three colours with nothing to say. Add
     them here if a severity system ever lands on the troubleshooting hub. */

  /* ── motion. Nothing on this site animates linearly. ── */
  --e-out:cubic-bezier(.22,.68,.16,1);
  --e-inout:cubic-bezier(.45,.05,.25,1);
  --e-spring:cubic-bezier(.34,1.42,.58,1);
  --t-tap:150ms;
  --t-hover:220ms;
  --t-move:420ms;
  --t-tell:820ms;
  --stagger:80ms;

  /* ── spacing steps ── */
  --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4.5rem;

  /* ── radii, shadow, icons ── */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-pill:999px;
  --shadow:0 1px 2px rgba(23,36,44,.05), 0 18px 38px -30px rgba(23,36,44,.42);
  --icon-sm:14px; --icon:20px; --icon-lg:24px; --icon-stroke:1.75;

  /* ── type ── */
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,
         sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SFMono-Regular",Consolas,monospace;
  --measure:68ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 1.0625rem/1.68 var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  display:flex;flex-direction:column;min-height:100vh;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--accent-deep);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--ochre)}
:where(a,button,summary,[tabindex]):focus-visible{
  outline:2.5px solid var(--accent);outline-offset:3px;border-radius:var(--r-sm);
}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--slate);
  color:var(--paper);padding:.7rem 1.1rem;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

.wrap{width:100%;max-width:1060px;margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}
.wrap.narrow{max-width:748px}
.muted{color:var(--muted)}
.serif{font-family:var(--serif)}

/* ── one icon set, one stroke weight, one 24-grid ── */
.i{width:var(--icon);height:var(--icon);flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round}
.i-lg{width:var(--icon-lg);height:var(--icon-lg)}
.i-sm{width:var(--icon-sm);height:var(--icon-sm)}
.i-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ── staggered scroll reveal ──
   The stagger index is derived here with :nth-child rather than written into 1,128
   inline style attributes. It cycles every four items so a long grid still feels
   brisk instead of making the reader wait. */
/* Gated on the .js class that an inline <head> script sets. Without scripting the
   content is simply visible — an unconditional opacity:0 here would blank all 172
   pages the moment JS is disabled, blocked, or errors before the observer attaches. */
.js [data-reveal]{opacity:0;transform:translateY(14px)}
.js [data-reveal].is-in{opacity:1;transform:none;
  transition:opacity var(--t-move) var(--e-out),transform var(--t-move) var(--e-out);
  transition-delay:calc(var(--i,0) * var(--stagger))}

.cards>li:nth-child(4n+2),.sym-grid>li:nth-child(4n+2),.jobs>li:nth-child(4n+2),
.cols>div:nth-child(4n+2),.hubblocks>section:nth-child(4n+2),
.pledge dl>div:nth-child(4n+2){--i:1}
.cards>li:nth-child(4n+3),.sym-grid>li:nth-child(4n+3),.jobs>li:nth-child(4n+3),
.cols>div:nth-child(4n+3),.hubblocks>section:nth-child(4n+3),
.pledge dl>div:nth-child(4n+3){--i:2}
.cards>li:nth-child(4n+4),.sym-grid>li:nth-child(4n+4),.jobs>li:nth-child(4n+4),
.cols>div:nth-child(4n+4),.hubblocks>section:nth-child(4n+4),
.pledge dl>div:nth-child(4n+4){--i:3}

/* ── one CTA treatment, propagated ── */
.btn{position:relative;display:inline-flex;align-items:center;gap:var(--s2);
  padding:.82rem 1.3rem;border-radius:var(--r-pill);border:1.5px solid var(--hair);
  background:transparent;color:var(--ink);font:650 .95rem/1 var(--sans);cursor:pointer;
  text-decoration:none;
  transition:transform var(--t-hover) var(--e-out),box-shadow var(--t-hover) var(--e-out),
             border-color var(--t-hover) var(--e-out),background var(--t-hover) var(--e-out),
             color var(--t-hover) var(--e-out)}
.btn:hover{transform:translateY(-2px);border-color:var(--accent);color:var(--accent-deep)}
.btn:active{transform:translateY(0) scale(.985);transition-duration:var(--t-tap)}
.btn .i{transition:transform var(--t-hover) var(--e-spring)}
.btn:hover .i{transform:translateX(3px)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-deep);border-color:var(--accent-deep);
  color:var(--accent-ink);box-shadow:0 10px 22px -14px var(--accent)}
/* on the slate ground */
.on-slate .btn{border-color:rgba(255,255,255,.3);color:#e8efe9}
.on-slate .btn:hover{border-color:var(--accent-light);color:var(--accent-light)}
.on-slate .btn-primary{background:var(--accent-light);border-color:var(--accent-light);
  color:#0e1a20}
.on-slate .btn-primary:hover{background:#9adfcd;border-color:#9adfcd;color:#0e1a20}
/* label swap at the moment of intent */
.btn-swap{display:grid}
.btn-swap>span{grid-area:1/1;
  transition:opacity var(--t-hover) var(--e-inout),transform var(--t-hover) var(--e-out)}
.btn-swap>span:last-child{opacity:0;transform:translateY(6px)}
.btn:hover .btn-swap>span:first-child,.btn:focus-visible .btn-swap>span:first-child{
  opacity:0;transform:translateY(-6px)}
.btn:hover .btn-swap>span:last-child,.btn:focus-visible .btn-swap>span:last-child{
  opacity:1;transform:none}
.btns{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}
.reassure{display:inline-flex;align-items:center;gap:.4rem;font-size:.84rem;
  color:var(--muted)}
.reassure.spaced{margin:var(--s4) 0 0}
.reassure .i{color:var(--accent)}
.on-slate .reassure{color:#9fb0bb}
.on-slate .reassure .i{color:var(--accent-light)}

/* ═════════════════════════════════ header ═════════════════════════════════ */
.banner{background:var(--slate);color:var(--paper)}
.bar{display:flex;align-items:center;gap:var(--s4);min-height:62px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:.55rem;color:var(--paper);
  text-decoration:none;font-family:var(--serif);font-weight:700;font-size:1.18rem;
  letter-spacing:-.01em}
.brand b{color:var(--accent-light);font-weight:700}
.brand .i{color:var(--accent-light);
  transition:transform var(--t-hover) var(--e-spring)}
.brand:hover .i{transform:translateX(2px)}
.mainnav{margin-left:auto}
.mainnav ul{display:flex;flex-wrap:wrap;gap:.2rem 1.05rem;list-style:none;margin:0;padding:0}
.mainnav a{color:#c6d2da;text-decoration:none;font-size:.88rem;font-weight:500;
  padding:.35rem 0;border-bottom:2px solid transparent;
  transition:color var(--t-hover) var(--e-out),border-color var(--t-hover) var(--e-out)}
.mainnav a:hover{color:var(--accent-light)}
.mainnav a[aria-current="page"]{color:var(--accent-light);
  border-bottom-color:var(--accent-light)}

/* the slate resolves into paper on a curve, not a hard rule */
.curve{display:block;width:100%;height:clamp(34px,5vw,62px);color:var(--paper)}
.curve-2{color:var(--paper-2)}

/* ══════════════════════════════ breadcrumbs ══════════════════════════════ */
.crumbs{padding-top:var(--s5)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0;
  font-size:.84rem;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:.4rem;color:var(--hair)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--accent-deep);text-decoration:underline}

/* ════════════════════════════════ homepage ════════════════════════════════ */
.hero{background:var(--slate);color:var(--paper);padding-top:clamp(1.8rem,4vw,2.8rem)}
.hero-in{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(1.4rem,4vw,2.6rem);align-items:center}
.season-chip{display:inline-flex;align-items:center;gap:.45rem;margin:0 0 var(--s4);
  padding:.35rem .78rem;border:1px solid rgba(154,106,18,.55);border-radius:var(--r-pill);
  font:700 .68rem/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ochre-light)}
.hero h1{margin:0 0 var(--s3);font-family:var(--serif);font-weight:700;
  font-size:clamp(1.9rem,4.7vw,3rem);line-height:1.08;letter-spacing:-.02em;
  max-width:26ch;text-wrap:balance}
.hero-lede{margin:0 0 var(--s5);max-width:52ch;color:#bdcad2;font-size:1.04rem}

/* ── the seasonal arc: structure carrying real information ── */
.arc{width:clamp(172px,25vw,224px);flex:0 0 auto}
.arc svg{width:100%;height:auto;overflow:visible}
.arc .track{stroke:rgba(255,255,255,.15);stroke-width:8;fill:none;stroke-linecap:round}
.arc .band{stroke:var(--accent-light);stroke-width:8;fill:none;stroke-linecap:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset var(--t-tell) var(--e-out)}
.is-in .arc .band{stroke-dashoffset:calc(var(--len) - var(--fill))}
.arc .pin{fill:var(--ochre-light);opacity:0;transform-origin:center;transform:scale(.4);
  transition:opacity var(--t-move) var(--e-out) 620ms,
             transform var(--t-move) var(--e-spring) 620ms}
.is-in .arc .pin{opacity:1;transform:scale(1)}
.arc text{fill:#9fb0bb;font:600 7.5px/1 var(--mono);letter-spacing:.06em}
.arc .now{fill:var(--ochre-light);font-weight:700}

/* ── the monthly plate, overlapping the curve ── */
.plate{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:1.35rem 1.45rem;box-shadow:var(--shadow);position:relative;z-index:2;
  margin-top:calc(clamp(34px,5vw,62px) * -0.5)}
.plate h2{margin:0 0 .2rem;font-family:var(--serif);font-size:1.14rem;letter-spacing:-.01em;
  display:flex;align-items:center;gap:var(--s2)}
.plate h2 .i{color:var(--accent)}
.plate-note{margin:0 0 var(--s4);font-size:.89rem;color:var(--muted)}
.jobs{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3);
  grid-template-columns:repeat(auto-fit,minmax(224px,1fr))}
.jobs li{display:flex;gap:.65rem;align-items:flex-start}
.jobs .i{color:var(--accent);margin-top:3px}
.jobs p{margin:0;font-size:.9rem;color:var(--ink-2);line-height:1.55}
.jobs a{color:var(--accent-deep);font-weight:600;text-decoration:none;
  border-bottom:1px solid color-mix(in oklab,var(--accent) 36%,transparent);
  transition:border-color var(--t-hover) var(--e-out),color var(--t-hover) var(--e-out)}
.jobs a:hover{border-bottom-color:var(--accent);color:var(--accent)}

/* ── shelf: the almanac's contents page ── */
.shelf{padding:var(--s7) 0 var(--s6)}
.shelf-hd{display:flex;align-items:baseline;gap:var(--s4);margin-bottom:var(--s5);
  border-bottom:2px solid var(--hair);padding-bottom:.55rem}
.shelf-hd h2{margin:0;font-family:var(--serif);font-size:1.5rem;letter-spacing:-.015em;
  font-weight:700}
.shelf-hd span{margin-left:auto;font:600 .74rem/1 var(--mono);color:var(--muted);
  letter-spacing:.06em;white-space:nowrap}
.cols{display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.col h3{margin:0 0 .15rem;font-size:1.04rem;letter-spacing:-.01em;display:flex;
  align-items:center;gap:.45rem}
.col h3 a{color:var(--ink);text-decoration:none;
  transition:color var(--t-hover) var(--e-out)}
.col h3 a:hover{color:var(--accent)}
.col h3 .i{color:var(--accent)}
.col .cnt{font:700 .68rem/1 var(--mono);color:var(--muted);letter-spacing:.08em}
.col ul{list-style:none;margin:.7rem 0 var(--s3);padding:0;display:grid;gap:.42rem}
.linklist{list-style:none;margin:0;padding:0;display:grid;gap:.42rem}
.col li a,.linklist li a{font-size:.9rem;color:var(--ink-2);text-decoration:none;
  display:block;padding-left:.85rem;position:relative;
  transition:color var(--t-hover) var(--e-out),padding-left var(--t-hover) var(--e-out)}
.col li a::before,.linklist li a::before{content:"";position:absolute;left:0;top:.62em;
  width:4px;height:4px;border-radius:50%;background:var(--ochre);
  transition:background var(--t-hover) var(--e-out)}
.col li a:hover,.linklist li a:hover{color:var(--accent);padding-left:1.05rem}
.col li a:hover::before,.linklist li a:hover::before{background:var(--accent)}
.more{display:inline-flex;align-items:center;gap:.35rem;font-weight:650;font-size:.9rem;
  text-decoration:none;color:var(--accent-deep)}
.more .i{transition:transform var(--t-hover) var(--e-spring)}
.more:hover .i{transform:translateX(3px)}

/* ── how this is written ── */
.pledge{background:var(--paper-2);padding:var(--s7) 0}
.pledge h2{margin:0 0 var(--s5);font-family:var(--serif);font-size:1.42rem;
  letter-spacing:-.015em}
.pledge dl{margin:0;display:grid;gap:var(--s5);
  grid-template-columns:repeat(auto-fit,minmax(228px,1fr))}
.pledge dt{display:flex;align-items:center;gap:.45rem;font-weight:700;font-size:.98rem;
  margin-bottom:.3rem}
.pledge dt .i{color:var(--accent)}
.pledge dd{margin:0;font-size:.9rem;color:var(--ink-2)}

/* ── symptom strip on the homepage ── */
.symptoms{padding:var(--s6) 0}
.symptoms h2{margin:0 0 var(--s5);font-family:var(--serif);font-size:1.42rem;
  letter-spacing:-.015em;display:flex;align-items:center;gap:var(--s2)}
.symptoms h2 .i{color:var(--accent)}
.sym-grid{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3);
  grid-template-columns:repeat(auto-fill,minmax(252px,1fr))}
.sym-grid a{display:flex;align-items:center;gap:.6rem;background:var(--panel);
  border:1px solid var(--hair);border-left:4px solid var(--ochre);
  border-radius:var(--r-md);padding:.85rem 1rem;text-decoration:none;color:var(--ink);
  font-weight:600;font-size:.94rem;height:100%;
  transition:transform var(--t-hover) var(--e-out),border-left-color var(--t-hover) var(--e-out),
             color var(--t-hover) var(--e-out),box-shadow var(--t-hover) var(--e-out)}
.sym-grid a:hover{transform:translateY(-2px);border-left-color:var(--accent);
  color:var(--accent-deep);box-shadow:var(--shadow)}
.sym-grid .i{color:var(--accent)}

/* ════════════════════════════════ cards ════════════════════════════════ */
.cards{list-style:none;margin:0;padding:0}
.cards.grid{display:grid;gap:var(--s4);
  grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}
.card a{display:flex;flex-direction:column;height:100%;background:var(--panel);
  border:1px solid var(--hair);border-radius:var(--r-md);overflow:hidden;
  text-decoration:none;color:var(--ink);
  transition:transform var(--t-hover) var(--e-out),border-color var(--t-hover) var(--e-out),
             box-shadow var(--t-hover) var(--e-out)}
.card a:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--shadow)}
.card-media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)}
.card-media img{width:100%;height:100%;object-fit:cover}
.noimg{display:block;width:100%;height:100%;
  background:linear-gradient(140deg,var(--paper-2),color-mix(in oklab,var(--accent) 16%,var(--paper-2)))}
.card-body{display:flex;flex-direction:column;gap:.35rem;padding:.9rem 1rem 1rem}
.card-cat{font:700 .68rem/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--ochre)}
.card-title{font-weight:650;line-height:1.34;letter-spacing:-.01em}
.card-meta{margin-top:auto;font:600 .74rem/1 var(--mono);color:var(--muted);
  font-variant-numeric:tabular-nums}
.card a:hover .card-title{color:var(--accent-deep)}

/* ═════════════════════════════ topic hub pages ═════════════════════════════ */
.hubhead{padding:var(--s5) 0 var(--s6);max-width:var(--measure)}
.hubhead h1{margin:0 0 .55rem;font-family:var(--serif);font-weight:700;
  font-size:clamp(1.8rem,4.3vw,2.55rem);letter-spacing:-.02em;text-wrap:balance}
.hubhead .lede{font-size:1.06rem;color:var(--ink-2);margin:0 0 .5rem;max-width:56ch}
.hubhead .count{font:600 .76rem/1 var(--mono);color:var(--muted);letter-spacing:.07em}
.hubblocks{display:grid;gap:var(--s6);
  grid-template-columns:repeat(auto-fit,minmax(288px,1fr));padding-bottom:var(--s7)}
.hubblock h2{margin:0 0 .3rem;font-family:var(--serif);font-size:1.24rem;
  display:flex;align-items:center;gap:.5rem}
.hubblock h2 a{text-decoration:none;color:var(--ink);
  transition:color var(--t-hover) var(--e-out)}
.hubblock h2 a:hover{color:var(--accent)}
.hubblock h2 .i{color:var(--accent)}
.hubblock .cnt{margin-left:auto;font:700 .68rem/1 var(--mono);color:var(--muted);
  letter-spacing:.08em}
.hubblock>p{margin:0 0 var(--s3);font-size:.92rem;color:var(--muted)}

/* ══════════════════════════════════ article ══════════════════════════════════ */
.post{padding-bottom:var(--s7)}
.posthead{padding:var(--s5) 0 var(--s5)}
.eyebrow{margin:0 0 .55rem;font:700 .7rem/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ochre)}
.eyebrow a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color var(--t-hover) var(--e-out)}
.eyebrow a:hover{border-bottom-color:var(--ochre)}
.posthead h1{margin:0 0 .7rem;font-family:var(--serif);font-weight:700;
  font-size:clamp(1.85rem,4.5vw,2.65rem);line-height:1.13;letter-spacing:-.02em;
  text-wrap:balance}
.byline{margin:0;font-size:.88rem;color:var(--muted);display:flex;flex-wrap:wrap;
  gap:.3rem .6rem;align-items:center}
.byline a{color:var(--muted)}
.byline .i{color:var(--accent);width:15px;height:15px}
figure.hero-img{margin:0 0 var(--s6);border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--hair)}
figure.hero-img img{width:100%;aspect-ratio:16/9;object-fit:cover}

.toc{margin:0 0 var(--s6);padding:1.1rem 1.3rem;background:var(--paper-2);
  border:1px solid var(--hair);border-radius:var(--r-md)}
.toc h2{margin:0 0 .6rem;font:700 .72rem/1 var(--mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.toc ol{margin:0;padding-left:1.2rem;display:grid;gap:.36rem}
.toc a{color:var(--ink-2);text-decoration:none;font-size:.94rem;
  transition:color var(--t-hover) var(--e-out)}
.toc a:hover{color:var(--accent);text-decoration:underline}

.prose{max-width:var(--measure)}
.prose>*+*{margin-top:1.15em}
.prose h2{margin:2.35em 0 .65em;font-family:var(--serif);font-weight:700;font-size:1.52rem;
  line-height:1.24;letter-spacing:-.015em;padding-bottom:.3em;
  border-bottom:1px solid var(--hair-2);scroll-margin-top:1.5rem}
.prose h3{margin:1.9em 0 .5em;font-family:var(--serif);font-weight:700;font-size:1.2rem;
  letter-spacing:-.01em;scroll-margin-top:1.5rem}
.prose h4{margin:1.6em 0 .45em;font-size:1.02rem;font-weight:700;color:var(--ink-2);
  scroll-margin-top:1.5rem}
.prose p,.prose li{color:var(--ink-2)}
.prose ul,.prose ol{padding-left:1.35rem}
.prose li+li{margin-top:.4em}
.prose li::marker{color:var(--ochre)}
.prose strong{color:var(--ink);font-weight:650}
.prose a{font-weight:550}
.prose blockquote{margin:1.6em 0;padding:.3em 0 .3em 1.25em;
  border-left:3px solid var(--ochre);color:var(--ink-2);font-family:var(--serif);
  font-size:1.06rem}
.prose blockquote p{color:var(--ink-2)}
.prose figure{margin:1.8em 0}
.prose figcaption{margin-top:.5em;font-size:.86rem;color:var(--muted)}
.prose img{border-radius:var(--r-md);border:1px solid var(--hair)}
.prose hr{border:0;border-top:1px solid var(--hair);margin:2.4em 0}
.prose abbr{text-decoration-style:dotted;text-decoration-thickness:1px}
.prose .lede-in{font-size:1.14rem;color:var(--ink);font-family:var(--serif)}

.table-scroll{overflow-x:auto;margin:1.7em 0;border:1px solid var(--hair);
  border-radius:var(--r-md);background:var(--panel)}
.table-scroll table{border-collapse:collapse;width:100%;min-width:460px;font-size:.93rem}
.table-scroll th,.table-scroll td{padding:.66rem .85rem;
  border-bottom:1px solid var(--hair-2);text-align:left;vertical-align:top}
.table-scroll thead th{background:var(--paper-2);font-weight:700;color:var(--ink);
  border-bottom:1px solid var(--hair);font-family:var(--mono);font-size:.82rem;
  letter-spacing:.03em}
.table-scroll tbody tr:last-child td{border-bottom:0}
.table-scroll td{font-variant-numeric:tabular-nums}

/* a correction stays visible rather than quietly replacing the old number */
.editor-note{margin:2.2em 0;padding:1.15rem 1.35rem;
  background:color-mix(in oklab,var(--ochre) 8%,var(--panel));
  border:1px solid color-mix(in oklab,var(--ochre) 26%,var(--hair));
  border-left:4px solid var(--ochre);border-radius:var(--r-md)}
.editor-note h2{margin:0 0 .5rem;padding:0;border:0;font-family:var(--mono);
  font-size:.76rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ochre)}
.editor-note p{margin:0;font-size:.93rem}

.sources{margin:2.6em 0 0;padding-top:var(--s5);border-top:2px solid var(--hair)}
.sources h2{margin:0 0 .7rem;padding:0;border:0;font-family:var(--mono);font-size:.76rem;
  font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.sources ol{margin:0;padding-left:1.3rem;display:grid;gap:.4rem}
.sources li{font-size:.9rem;color:var(--muted)}
.sources li::marker{color:var(--muted)}
.sources cite{font-style:normal;font-weight:650;color:var(--ink-2)}
.sources a{color:var(--accent-deep)}

.related{margin:0;padding:var(--s6) 0 0;border-top:1px solid var(--hair)}
.related h2{margin:0 0 var(--s4);font-family:var(--serif);font-size:1.3rem;
  letter-spacing:-.015em}
.related .cards{display:grid;gap:var(--s4);
  grid-template-columns:repeat(auto-fill,minmax(214px,1fr))}

.err{padding:var(--s7) 0 var(--s8)}
.err h1{margin:0 0 .7rem;font-family:var(--serif);font-weight:700;
  font-size:clamp(1.8rem,4.3vw,2.5rem);letter-spacing:-.02em}
.err .lede{font-size:1.06rem;color:var(--ink-2);max-width:52ch}
.err .linklist{margin-top:var(--s5)}

/* ═════════════════════════════════ footer ═════════════════════════════════ */
.sitefoot{background:var(--slate-2);color:#adbac4;padding:var(--s7) 0 var(--s6);
  margin-top:auto}
.footgrid{display:grid;gap:var(--s6);grid-template-columns:1.5fr 1fr 1fr;
  padding-bottom:var(--s5)}
.footbrand{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 .55rem;
  font-family:var(--serif);font-weight:700;font-size:1.12rem;color:var(--paper);
  text-decoration:none}
.footbrand b{color:var(--accent-light)}
.footbrand .i{color:var(--accent-light)}
.sitefoot p.muted{color:#8fa0ab;font-size:.92rem;margin:0;max-width:44ch}
.sitefoot h2{margin:0 0 .7rem;font:700 .74rem/1 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:#7e8f9a}
.sitefoot ul{list-style:none;margin:0;padding:0;display:grid;gap:.42rem}
.sitefoot a{color:#dbe3e8;text-decoration:none;font-size:.92rem;
  transition:color var(--t-hover) var(--e-out)}
.sitefoot a:hover{color:var(--accent-light);text-decoration:underline}
.legal{margin:0;padding-top:var(--s5);border-top:1px solid #2a3a45;font-size:.82rem;
  color:#7e8f9a;max-width:82ch}

@media (max-width:760px){
  .footgrid{grid-template-columns:1fr}
  .hero-in{grid-template-columns:1fr}
  .arc{width:min(224px,62vw)}
  .mainnav{margin-left:0;width:100%;overflow-x:auto}
  .mainnav ul{flex-wrap:nowrap;padding-bottom:.35rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0ms!important}
  .js [data-reveal]{opacity:1!important;transform:none!important}
  .arc .band{stroke-dashoffset:calc(var(--len) - var(--fill))!important}
  .arc .pin{opacity:1!important;transform:scale(1)!important}
}

@media print{
  .banner,.sitefoot,.toc,.related,.crumbs,.btns,.curve,.arc{display:none}
  body{background:#fff;font-size:11pt;display:block}
  .prose{max-width:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:#555}
}