/* ============================================================
   ELECTYS — home electrical-safety field manual
   Shared stylesheet. Fonts loaded via <link> per page (vendored at finalize).
   ============================================================ */

:root{
  --slate-950:#070b10;
  --slate-900:#0b1017;
  --slate-850:#0d141c;
  --slate-800:#111b26;
  --slate-750:#16222f;
  --slate-700:#1c2c3d;
  --panel:#0d141c;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);

  --blue:#2f81f7;
  --blue-bright:#5a9bff;
  --blue-light:#9cc4ff;
  --blue-dim:rgba(47,129,247,.12);
  --amber:#f6a41c;
  --amber-dim:rgba(246,164,28,.10);

  --ink:#eaf1f9;
  --body:#c7d3df;
  --muted:#9fb0c3;
  --faint:#6b7d92;

  --display:"Space Grotesk",system-ui,sans-serif;
  --sans:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --wrap:1240px;
  --measure:70ch;
  --radius:12px;
  --gutter:clamp(20px,5vw,56px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--slate-950);
  color:var(--body);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-bright)}
::selection{background:rgba(47,129,247,.3)}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);letter-spacing:-.015em;line-height:1.1;margin:0}
strong{color:var(--ink)}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.kicker{font:600 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
.kicker.blue{color:var(--blue)}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;z-index:100;background:var(--blue);color:#04101f;padding:8px 14px;border-radius:6px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--sans);border-radius:8px;padding:13px 20px;cursor:pointer;border:1px solid transparent;transition:.15s}
.btn-primary{background:var(--blue);color:#04101f}
.btn-primary:hover{background:var(--blue-bright);color:#04101f}
.btn-ghost{background:transparent;border-color:var(--line-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--blue);color:var(--ink)}
.btn svg{width:16px;height:16px}

/* ============================================================ MASTHEAD */
.masthead{position:sticky;top:0;z-index:40;background:rgba(11,16,23,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.masthead-in{display:flex;align-items:center;gap:24px;height:70px}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.brand-mark{width:30px;height:30px;border-radius:6px;background:var(--blue);display:grid;place-items:center}
.brand-mark svg{width:16px;height:16px;fill:#04101f}
.brand-name{font:700 21px/1 var(--display);color:var(--ink);letter-spacing:.01em}
.brand-tag{font:500 12px/1 var(--mono);color:var(--amber);letter-spacing:.12em;text-transform:uppercase;border-left:1px solid var(--line-strong);padding-left:12px}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav a{font:500 15px/1 var(--sans);color:var(--muted);padding:9px 13px;border-radius:7px}
.nav a:hover{color:var(--ink);background:var(--slate-800)}
.nav a[aria-current]{color:var(--ink);background:var(--slate-800)}
.nav-cta{margin-left:8px}
.nav-toggle{display:none;margin-left:auto;background:transparent;border:1px solid var(--line-strong);border-radius:7px;width:42px;height:38px;color:var(--ink);cursor:pointer;align-items:center;justify-content:center}
.nav-toggle svg{width:20px;height:20px}

/* ============================================================ FRONT / HERO */
.front{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:
  radial-gradient(1100px 500px at 78% -8%,rgba(47,129,247,.14),transparent 60%),
  var(--slate-900)}
.front-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28;filter:saturate(.85);z-index:0}
.front::after{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(100deg,var(--slate-900) 30%,rgba(11,16,23,.72) 55%,rgba(11,16,23,.35) 100%),
  radial-gradient(900px 460px at 80% 0%,transparent,rgba(7,11,16,.55))}
.front-in{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-block:clamp(48px,7vw,92px)}
.front h1{font-size:clamp(40px,5.6vw,74px);font-weight:700;margin:18px 0 22px;text-wrap:balance}
.front h1 em{font-style:normal;color:var(--blue-light)}
.front-lead{font-size:clamp(18px,1.5vw,21px);color:var(--muted);max-width:34ch;margin:0 0 30px}
.front-cta{display:flex;gap:12px;flex-wrap:wrap}
.front-note{margin-top:26px;font:500 13.5px/1.5 var(--sans);color:var(--faint);display:flex;align-items:center;gap:9px}
.front-note svg{width:17px;height:17px;stroke:var(--amber);fill:none;flex:0 0 auto}
.front-fig{position:relative;border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;background:var(--slate-850);aspect-ratio:4/3.1}
.front-fig img{width:100%;height:100%;object-fit:cover;opacity:.9}
.front-fig figcaption{position:absolute;left:0;right:0;bottom:0;padding:12px 16px;font:500 12.5px/1.4 var(--mono);color:var(--blue-light);background:linear-gradient(transparent,rgba(7,11,16,.9));letter-spacing:.02em}

/* ============================================================ SECTION BANDS */
.band{padding-block:clamp(52px,7vw,88px);border-bottom:1px solid var(--line)}
.band.alt{background:var(--slate-900)}
.band-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px;flex-wrap:wrap}
.band-head h2{font-size:clamp(28px,3.4vw,42px);margin-top:10px}
.band-head p{color:var(--muted);max-width:52ch;margin:10px 0 0;font-size:16.5px}
.band-head .see-all{font:600 14px/1 var(--sans);color:var(--blue);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.band-head .see-all svg{width:15px;height:15px}

/* ---------- card grid (even height) ---------- */
.cards{display:grid;gap:20px}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.card{display:flex;flex-direction:column;background:var(--slate-850);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.15s}
.card:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.card-fig{aspect-ratio:16/9;background:var(--slate-750);overflow:hidden;position:relative}
.card-fig img{width:100%;height:100%;object-fit:cover;opacity:.85}
.card-tag{position:absolute;top:10px;left:10px;font:600 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--amber);background:rgba(7,11,16,.72);padding:5px 8px;border-radius:5px}
.card-body{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
.card-body h3{font-size:20px;line-height:1.22;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.44em}
.card-dek{color:var(--muted);font-size:15px;line-height:1.5;margin:9px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{margin-top:auto;padding-top:16px;font:500 13px/1 var(--mono);color:var(--faint);display:flex;align-items:center;gap:10px;letter-spacing:.02em}
.card-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--faint)}
.card-meta .lvl{color:var(--blue)}

/* small link-list card variant */
.linklist{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--slate-850)}
.linklist a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:16px 20px;border-top:1px solid var(--line);color:var(--ink)}
.linklist a:first-child{border-top:none}
.linklist a:hover{background:var(--slate-800)}
.linklist .n{font:600 13px/1 var(--mono);color:var(--faint)}
.linklist .t{font:600 17px/1.3 var(--sans)}
.linklist .m{font:500 12.5px/1 var(--mono);color:var(--faint);white-space:nowrap}

/* ============================================================ SAFETY MAP */
.smap{background:
  linear-gradient(rgba(120,170,240,.05) 1px,transparent 1px),
  linear-gradient(90deg,rgba(120,170,240,.05) 1px,transparent 1px),
  var(--slate-900);background-size:28px 28px,28px 28px,auto}
.smap-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:stretch}
.plan{border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--slate-850);padding:20px}
.plan-cap{display:flex;justify-content:space-between;align-items:center;font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.rooms{display:grid;gap:10px;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(2,116px);
  grid-template-areas:'living living kitchen kitchen bath bath' 'laundry laundry garage garage panel panel'}
.room{position:relative;border:1px solid var(--line-strong);border-radius:9px;background:var(--slate-750);padding:13px;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;text-align:left;color:var(--ink);font-family:var(--sans);transition:.12s}
.room:hover{background:var(--slate-700)}
.room .rn{font:600 15px/1.15 var(--sans)}
.room .rc{font:600 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--amber)}
.room.panel{background:#152234;border-color:rgba(47,129,247,.4)}
.room.panel .rn{color:var(--blue-light)}
.room.panel .rc{color:var(--blue)}
.room[aria-pressed="true"]{box-shadow:0 0 0 2px var(--blue),0 0 0 5px rgba(47,129,247,.2);border-color:var(--blue)}
.room .rk{font:600 10px/1 var(--mono);color:var(--faint)}
.plan-note{margin-top:14px;font:500 12px/1.4 var(--sans);color:var(--faint);text-align:center}

.smap-detail{border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--slate-850);padding:24px 24px 22px;display:flex;flex-direction:column}
.smap-detail .live{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.smap-detail .live span{width:8px;height:8px;border-radius:2px;background:var(--amber);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.smap-detail h3{font-size:24px}
.smap-detail .dtag{font:600 11px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--amber);margin:6px 0 16px}
.smap-detail .haz{font-size:16px;color:var(--body);line-height:1.6;margin:0 0 18px}
.smap-detail .go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--sans);color:var(--blue)}
.smap-detail .go svg{width:16px;height:16px}
/* static crawlable list */
.smap-static{margin-top:26px;border-top:1px solid var(--line);padding-top:22px}
.smap-static h3{font:600 13px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.smap-static ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.smap-static li{border:1px solid var(--line);border-radius:9px;padding:14px 16px;background:var(--slate-850)}
.smap-static li a{font:600 16px/1.3 var(--sans);color:var(--ink)}
.smap-static li a:hover{color:var(--blue)}
.smap-static li p{margin:5px 0 0;font-size:14px;color:var(--muted);line-height:1.5}

/* ============================================================ GFCI STEP-THROUGH (diagram feature) */
.stepper{border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;background:var(--slate-850);margin-top:8px}
.stepper-fig{position:relative;aspect-ratio:16/7;background:
  linear-gradient(rgba(120,170,240,.06) 1px,transparent 1px),
  linear-gradient(90deg,rgba(120,170,240,.06) 1px,transparent 1px),
  var(--slate-900);background-size:26px 26px;display:grid;place-items:center;border-bottom:1px solid var(--line)}
.stepper-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4}
.stepper-fig .badge{position:relative;font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.stepper-body{display:grid;grid-template-columns:220px 1fr;gap:0}
.stepper-nav{border-right:1px solid var(--line);padding:16px}
.stepper-nav button{display:flex;gap:12px;width:100%;text-align:left;background:transparent;border:none;border-radius:8px;padding:12px 12px;cursor:pointer;color:var(--muted);font-family:var(--sans);align-items:flex-start}
.stepper-nav button:hover{background:var(--slate-800)}
.stepper-nav button[aria-selected="true"]{background:var(--slate-800);color:var(--ink)}
.stepper-nav .sn{font:600 12px/1.4 var(--mono);color:var(--blue);flex:0 0 auto}
.stepper-nav .st{font:600 14.5px/1.3 var(--sans)}
.stepper-panel{padding:24px 28px}
.stepper-panel h4{font-size:20px;margin-bottom:10px}
.stepper-panel p{margin:0;color:var(--body);font-size:16px;line-height:1.65;max-width:56ch}

/* ============================================================ HOW-TO INDEX (filterable static) */
.filterbar{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:20px}
.chip{font:600 13px/1 var(--sans);border:1px solid var(--line-strong);background:var(--slate-850);color:var(--muted);border-radius:100px;padding:9px 16px;cursor:pointer;transition:.12s}
.chip:hover{border-color:var(--blue);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--blue-dim);border-color:var(--blue);color:var(--blue-light)}
.index-list{border-top:1px solid var(--line)}
.index-row{display:grid;grid-template-columns:44px 1fr 190px 92px;align-items:center;gap:16px;padding:16px 6px;border-bottom:1px solid var(--line);color:var(--ink)}
.index-row:hover{background:var(--slate-850)}
.index-row .n{font:600 13px/1 var(--mono);color:var(--faint)}
.index-row .t{font:600 18px/1.3 var(--sans)}
.index-row .sec{font:500 13px/1.3 var(--sans);color:var(--muted)}
.index-row .rt{font:500 13px/1 var(--mono);color:var(--faint);text-align:right}
.index-empty{padding:30px 6px;color:var(--muted);font-style:italic}

/* ============================================================ GEAR SHELF (supporters) */
.shelf{background:var(--slate-900)}
.shelf-lead{max-width:56ch;color:var(--muted);margin:10px 0 30px;font-size:16.5px}
.featured{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sponsor{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.featured .sponsor{border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--slate-850);padding:18px;transition:.15s}
.featured .sponsor:hover{border-color:var(--blue)}
.featured .sponsor>img{width:100%;height:64px;object-fit:contain;background:#060b12;border-radius:8px;padding:10px 14px;margin-bottom:12px;border:1px solid var(--line)}
.sponsor-blurb{font:500 13.5px/1.5 var(--sans);color:var(--muted)}
.featured .sponsor-blurb:empty::before{content:"Featured supporter";color:var(--faint)}
.featured .sponsor .cat{font:600 11px/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--amber);margin-top:8px}

.regulars{margin-top:44px;border-top:1px solid var(--line);padding-top:26px}
.regulars .kicker{color:var(--faint)}
.regulars h3{font-size:20px;margin:8px 0 4px}
.regulars p{color:var(--muted);font-size:15px;margin:0 0 22px;max-width:54ch}
.roll{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.roll .sponsor{border:1px solid var(--line);border-radius:9px;background:#060b12}
.roll .sponsor>img{width:100%;height:44px;object-fit:contain;padding:8px 12px;opacity:.72}
.roll .sponsor:hover>img{opacity:1}
.roll .sponsor-blurb{display:none}

/* ============================================================ FOOTER */
.foot{background:var(--slate-950);padding-block:52px 40px}
.foot-top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px;padding-bottom:34px;border-bottom:1px solid var(--line)}
.foot-brand .brand{margin-bottom:14px}
.foot-brand p{color:var(--muted);font-size:15px;max-width:38ch;line-height:1.6}
.foot col,.foot-col{display:flex;flex-direction:column}
.foot-col h4{font:600 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.foot-col a{color:var(--muted);font-size:15px;padding:6px 0}
.foot-col a:hover{color:var(--ink)}
.foot-bottom{padding-top:26px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.disclaimer{font:500 13.5px/1.6 var(--sans);color:var(--faint);max-width:70ch}
.foot-bottom .brand-name{font-size:15px;color:var(--muted)}

/* ============================================================ ARTICLE / POST */
.post{background:var(--slate-950)}
.post-hero{border-bottom:1px solid var(--line);background:
  radial-gradient(900px 420px at 85% -10%,rgba(47,129,247,.12),transparent 60%),var(--slate-900);
  padding-block:clamp(40px,6vw,74px)}
.post-hero .crumbs{font:500 13.5px/1 var(--sans);color:var(--faint);margin-bottom:18px}
.post-hero .crumbs a{color:var(--faint)}
.post-hero .crumbs a:hover{color:var(--muted)}
.post-hero h1{font-size:clamp(32px,4.4vw,58px);font-weight:700;max-width:20ch;margin:12px 0 20px;text-wrap:balance}
.post-hero .standfirst{font-size:clamp(18px,1.6vw,22px);color:var(--muted);max-width:60ch;line-height:1.55}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:24px;font:500 14px/1 var(--mono);color:var(--faint);letter-spacing:.02em}
.post-meta .sep{width:4px;height:4px;border-radius:50%;background:var(--faint)}
.post-meta .lvl{color:var(--blue)}

.post-body{padding-block:clamp(40px,6vw,72px)}
.article-body{max-width:76ch;margin:0 auto;padding-inline:var(--gutter);font-size:19px;line-height:1.75;color:var(--body)}
.article-body>h2{font-family:var(--display);font-size:clamp(24px,2.6vw,32px);color:var(--ink);margin:52px 0 16px;padding-top:8px;counter-increment:sec;position:relative}
.article-body>h2::before{content:counter(sec,decimal-leading-zero);display:block;font:600 13px/1 var(--mono);color:var(--blue);letter-spacing:.1em;margin-bottom:10px}
.article-body{counter-reset:sec}
.article-body>h3{font-family:var(--display);font-size:23px;color:var(--ink);margin:36px 0 12px}
.article-body p{margin:0 0 22px}
.article-body>p:first-of-type::first-letter,.article-body .lead+p::first-letter{}
.article-body a{color:var(--blue);text-decoration:underline;text-decoration-color:rgba(47,129,247,.4);text-underline-offset:3px}
.article-body a:hover{text-decoration-color:var(--blue)}
.article-body ul,.article-body ol{margin:0 0 22px;padding-left:24px}
.article-body li{margin:0 0 9px}

/* lead + drop cap */
.lead{font-size:clamp(20px,1.9vw,24px);line-height:1.5;color:var(--ink);font-family:var(--display);font-weight:500;margin:0 0 28px !important;letter-spacing:-.01em}
.dropcap::first-letter{float:left;font-family:var(--display);font-weight:700;font-size:4.6em;line-height:.78;padding:6px 12px 0 0;color:var(--blue)}

/* pullquote */
.pullquote{margin:38px 0;border:none;padding:0}
.pullquote p{font-family:var(--display);font-weight:500;font-size:clamp(23px,2.7vw,32px);line-height:1.28;color:var(--ink);margin:0;padding-left:24px;border-left:4px solid var(--amber);letter-spacing:-.015em}
/* blockquote (sourced) */
.blockquote{margin:32px 0;padding:20px 24px;background:var(--slate-850);border:1px solid var(--line);border-radius:var(--radius)}
.blockquote p{font-size:19px;color:var(--ink);margin:0 0 10px;font-style:italic}
.blockquote cite{font:500 14px/1 var(--mono);color:var(--blue-light);font-style:normal}

/* callout + note */
.callout{margin:32px 0;border:1px solid rgba(47,129,247,.32);background:var(--blue-dim);border-radius:var(--radius);padding:20px 24px;display:flex;gap:14px}
.callout::before{content:"";flex:0 0 auto;width:22px;height:22px;margin-top:2px;background:var(--blue);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 5a1.3 1.3 0 110 2.6A1.3 1.3 0 0112 7zm1.4 12h-2.8v-1.4h.7V12h-.7v-1.4h2.1V17.6h.7z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 5a1.3 1.3 0 110 2.6A1.3 1.3 0 0112 7zm1.4 12h-2.8v-1.4h.7V12h-.7v-1.4h2.1V17.6h.7z'/%3E%3C/svg%3E") center/contain no-repeat}
.callout p{margin:0;font-size:16.5px;color:var(--ink);line-height:1.6}
.note{margin:26px 0;border-left:3px solid var(--amber);background:var(--amber-dim);border-radius:0 8px 8px 0;padding:14px 20px;font-size:15.5px;color:var(--body);line-height:1.6}
.note::before{content:"When in doubt — ";font-weight:600;color:var(--amber);font-family:var(--display)}
.note.plain::before{content:none}

/* versus / datatable */
.versus,.datatable{width:100%;border-collapse:collapse;margin:32px 0;font-size:16px}
.versus th,.datatable th{font-family:var(--display);font-size:15px;color:var(--ink);text-align:left;padding:14px 16px;border-bottom:2px solid var(--line-strong)}
.versus td,.datatable td{padding:14px 16px;border-bottom:1px solid var(--line);color:var(--body);vertical-align:top}
.versus thead th:nth-child(2){color:var(--blue)}
.versus thead th:nth-child(3){color:var(--amber)}
.versus tbody th{font-family:var(--mono);font-weight:500;font-size:13px;color:var(--faint);text-transform:uppercase;letter-spacing:.05em;width:26%}
.datatable tbody tr:hover{background:var(--slate-850)}
.datatable caption,.versus caption{caption-side:top;text-align:left;font:600 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}

/* statblocks */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:32px 0}
.statblock{border:1px solid var(--line);border-radius:var(--radius);background:var(--slate-850);padding:20px}
.stat-num{display:block;font:700 40px/1 var(--display);color:var(--blue-light);letter-spacing:-.02em}
.stat-label{display:block;margin-top:8px;font-size:14px;color:var(--muted);line-height:1.4}

/* timeline */
.timeline{list-style:none;margin:32px 0;padding:0;border-left:2px solid var(--line-strong)}
.timeline li{position:relative;padding:0 0 22px 26px}
.timeline li::before{content:"";position:absolute;left:-7px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--slate-900);border:2px solid var(--blue)}
.timeline li:last-child{padding-bottom:0}
.t-when{display:block;font:600 13px/1.3 var(--mono);color:var(--amber);letter-spacing:.03em;margin-bottom:4px}
.t-what{display:block;font-size:16px;color:var(--body);line-height:1.5}

/* charts */
.chart{margin:34px 0}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart figcaption{margin-top:12px;font:500 13.5px/1.4 var(--mono);color:var(--faint)}
.chart .bar-rect{fill:var(--blue)}
.chart .bar-rect.amber{fill:var(--amber)}
.chart .axis{stroke:var(--line-strong);stroke-width:1}
.chart .glabel{fill:var(--muted);font:500 13px/1 var(--sans)}
.chart .gval{fill:var(--ink);font:600 13px/1 var(--mono)}
.chart .gridline{stroke:var(--line);stroke-width:1}
.chart .line-path{fill:none;stroke:var(--blue);stroke-width:2.5}
.chart .line-dot{fill:var(--blue-light)}

/* figures */
.article-figure{margin:34px 0}
.article-figure img{width:100%;border:1px solid var(--line);border-radius:var(--radius);background:var(--slate-850)}
.article-figure figcaption{margin-top:12px;font-size:14.5px;color:var(--muted);line-height:1.5;border-left:2px solid var(--blue);padding-left:12px}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:34px 0}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line);border-radius:10px}
.gallery figcaption{margin-top:8px;font-size:13.5px;color:var(--muted)}

/* map figure (frame only, no drawing) */
.map-figure{margin:34px 0}
.map-slot{aspect-ratio:16/9;border:1px dashed var(--line-strong);border-radius:var(--radius);background:
  linear-gradient(rgba(120,170,240,.06) 1px,transparent 1px),
  linear-gradient(90deg,rgba(120,170,240,.06) 1px,transparent 1px),var(--slate-850);
  background-size:24px 24px;display:grid;place-items:center;position:relative}
.map-slot::after{content:none;font:600 11px/1 var(--mono);letter-spacing:.1em;color:var(--faint)}
.map-figure figcaption{margin-top:12px;font-size:14.5px;color:var(--muted);border-left:2px solid var(--blue);padding-left:12px}

/* profile + org cards */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:34px 0}
.profile-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--slate-850);padding:20px}
.profile-card .p-photo{width:56px;height:56px;border-radius:10px;object-fit:cover;background:var(--slate-750);margin-bottom:12px}
.profile-card.no-photo .p-photo{display:none}
.profile-card h3{font-size:19px;margin-bottom:2px}
.profile-card .p-role{font:500 13px/1.3 var(--mono);color:var(--amber);text-transform:uppercase;letter-spacing:.04em;margin:0 0 10px}
.profile-card p{font-size:15px;color:var(--muted);line-height:1.55;margin:0 0 10px}
.profile-card .p-links a{font-size:14px;margin-right:12px}
.profile-card .p-attr{font-size:12.5px;color:var(--faint)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:30px 0}
.org-card{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:10px;background:var(--slate-850);padding:14px 16px}
.org-card:hover{border-color:var(--line-strong)}
.org-logo{width:38px;height:38px;border-radius:8px;object-fit:contain;background:#060b12;padding:6px;flex:0 0 auto}
.org-card.no-logo .org-logo{display:none}
.org-name{display:block;font:600 15px/1.2 var(--sans);color:var(--ink)}
.org-host{display:block;font:500 12.5px/1 var(--mono);color:var(--faint);margin-top:3px}
.entity-ref{color:var(--blue);text-decoration:underline;text-decoration-color:rgba(47,129,247,.4);text-underline-offset:2px;white-space:nowrap}

/* key-facts aside */
.keyfacts{border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--slate-850);padding:22px 24px;margin:34px 0}
.keyfacts h4{font:600 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--amber);margin-bottom:16px}
.keyfacts dl{margin:0;display:grid;gap:14px}
.keyfacts dt{font:600 15px/1.3 var(--display);color:var(--ink)}
.keyfacts dd{margin:3px 0 0;font-size:14.5px;color:var(--muted);line-height:1.5}

/* related / further */
.related{border-top:1px solid var(--line);margin-top:52px;padding-top:34px}
.related h2{font-size:24px;margin-bottom:20px}
.further-grid,.related-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.further-grid a,.related-links a{display:block;border:1px solid var(--line);border-radius:var(--radius);background:var(--slate-850);padding:18px 20px;color:var(--ink);font:600 17px/1.3 var(--display)}
.further-grid a:hover,.related-links a:hover{border-color:var(--blue);color:var(--blue-light)}
.related-links a span{display:block;font:500 12.5px/1 var(--mono);color:var(--faint);text-transform:uppercase;letter-spacing:.06em;margin-top:8px}

/* ============================================================ CATEGORY / ARCHIVE */
.cat-hero{border-bottom:1px solid var(--line);background:var(--slate-900);padding-block:clamp(44px,6vw,72px)}
.cat-hero h1{font-size:clamp(34px,4.4vw,56px);margin:14px 0 16px}
.cat-hero p{font-size:clamp(17px,1.5vw,20px);color:var(--muted);max-width:62ch;line-height:1.55}
.cat-list{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.cat-list>li{border:1px solid var(--line);border-radius:var(--radius);background:var(--slate-850);overflow:hidden;display:flex;flex-direction:column;transition:.15s}
.cat-list>li:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.cat-list a.cl-main{display:flex;flex-direction:column;flex:1;padding:22px;color:inherit}
.cat-list .cl-kind{font:600 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--amber);margin-bottom:10px}
.cat-list h3{font-size:22px;line-height:1.24;margin-bottom:10px}
.cat-list p{font-size:15px;color:var(--muted);line-height:1.55;margin:0 0 16px}
.cat-list .cl-meta{margin-top:auto;font:500 13px/1 var(--mono);color:var(--faint)}

/* ============================================================ SIMPLE PAGES (about/contact/404) */
.page-hero{border-bottom:1px solid var(--line);background:var(--slate-900);padding-block:clamp(44px,6vw,72px)}
.page-hero h1{font-size:clamp(34px,4.6vw,58px);margin:12px 0 0}
.prose{max-width:70ch;margin:0 auto;padding-block:clamp(36px,5vw,60px);font-size:18px;line-height:1.75;color:var(--body)}
.prose h2{font-size:26px;color:var(--ink);margin:38px 0 14px}
.prose p{margin:0 0 20px}
.prose a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:26px 0}
.contact-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--slate-850);padding:22px}
.contact-card svg{width:24px;height:24px;stroke:var(--blue);fill:none;margin-bottom:12px}
.contact-card h3{font-size:18px;margin-bottom:6px}
.contact-card p{font-size:15px;color:var(--muted);margin:0}
.notfound{min-height:52vh;display:grid;place-items:center;text-align:center;padding:60px var(--gutter)}
.notfound .code{font:700 clamp(72px,16vw,150px)/.9 var(--display);color:var(--blue);letter-spacing:-.03em}
.notfound h1{font-size:clamp(26px,3vw,36px);margin:14px 0 12px}
.notfound p{color:var(--muted);font-size:18px;max-width:44ch;margin:0 auto 26px}

/* styleguide scaffolding */
.sg-section{border-top:1px solid var(--line);padding-block:44px}
.sg-section>.wrap>h2{font-size:28px;margin-bottom:6px}
.sg-label{font:600 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:28px 0 12px}
.sg-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.sg-swatch{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.sg-swatch .chip-c{height:64px}
.sg-swatch .meta{padding:10px 12px;font:500 12px/1.4 var(--mono);color:var(--muted)}

/* ============================================================ RESPONSIVE */
@media(max-width:1000px){
  body{font-size:17px}
  .front-in{grid-template-columns:1fr;gap:36px}
  .front-copy{order:-1}
  .smap-grid{grid-template-columns:1fr}
  .stepper-body{grid-template-columns:1fr}
  .stepper-nav{border-right:none;border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
  .cards.c3{grid-template-columns:repeat(2,1fr)}
  .roll{grid-template-columns:repeat(4,1fr)}
  .foot-top{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .nav{display:none;position:absolute;top:70px;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--slate-900);border-bottom:1px solid var(--line);padding:12px var(--gutter);gap:2px}
  .nav.open{display:flex}
  .nav a{padding:13px 12px}
  .nav-cta{margin:6px 0 0}
  .nav-toggle{display:inline-flex}
  .brand-tag{display:none}
  .rooms{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,104px);
    grid-template-areas:'living kitchen' 'bath laundry' 'garage panel'}
  .cards.c3,.cards.c2{grid-template-columns:1fr}
  .featured{grid-template-columns:1fr}
  .roll{grid-template-columns:repeat(3,1fr)}
  .smap-static ul{grid-template-columns:1fr}
  .index-row{grid-template-columns:30px 1fr;row-gap:4px}
  .index-row .sec{grid-column:2;color:var(--muted)}
  .index-row .rt{grid-column:2;text-align:left}
  .foot-top{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .article-body{font-size:17.5px}
  .versus tbody th{width:auto}
  .post-meta{gap:8px}
}
@media(max-width:400px){
  .roll{grid-template-columns:repeat(2,1fr)}
  .rooms{grid-template-columns:1fr;grid-template-rows:repeat(6,84px);
    grid-template-areas:'living' 'kitchen' 'bath' 'laundry' 'garage' 'panel'}
}
@media(prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* sp-roll-normalize: a logo roll keeps object-fit and loses its geometry.
   It used to set width:auto, height:46px, max-width:172px and min-width:30px, which let
   every plate in the roll shrink-wrap its own artwork — evbb measured 62px next to 204px
   in the SAME ROW. The operator's rule is that the dark ground is unified whatever the
   logo's size, so the plate cannot be sized by the logo. Geometry belongs to Design. */
[class~="roll"] .sponsor img,[class*="roll-"] .sponsor img,[class*="-roll"] .sponsor img{object-fit:contain;background:transparent}

/* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.roll .sponsor.sponsor img{box-sizing:border-box!important;height:41px!important;padding:8px 12px!important}


/* sp-roll-size: the roll ran nine tiles at 178x43 in a 1128px container — too small to read a
   wordmark. Tracks widen to a 230px minimum (four or five across instead of six) and the mark
   grows with the tile. */
@media (min-width:601px){
  .roll{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))!important}
}
.roll .sponsor.sponsor img{height:54px!important;padding:10px 14px!important}

/* ⚠️ THE ROLL MARKS ARE CONTENT-SIZED, SO THEY SIT LEFT. Design writes width:100% on them, but
   the measured boxes come out 193px, 160px and 103px in a 273px tile — the width is not applying,
   so each mark is only as wide as its artwork and lands at the start of the cell. object-fit
   centring does nothing here because there is no spare room INSIDE the box to centre within.
   An auto inline margin centres the box itself, which is the actual fix (same lesson as
   davisstreettavern's featured tile: centre the element, not its contents). */
.roll .sponsor.sponsor img{display:block!important;margin-inline:auto!important}

/* op-odd-tier-lead: .roll (9 tiles) lay out two per row with an ODD tile count, so the
   block ended on a lone tile beside an empty cell. The lead tile takes the whole row instead —
   operator: "the 1st item in such rows to be 100% width, then split" — so the grid reads as
   complete. These tiers were already two-per-row, which is why the column pass never wrote the
   rule for them. Checked before writing: no new horizontal overflow, block not more than 15%
   taller. Phone widths only; desktop keeps Design's layout. */
@media (max-width:640px){
  .roll:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-article-width: the article column was capped at 754px (92 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through max-width 76ch (declared in .article-body) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  div.article-body{max-width:min(952px, 100%)!important}
}
@media (min-width:1600px){
  div.article-body{max-width:min(clamp(952px, 66.111vw, 1142px), 100%)!important}
  div.article-body > :is(p.dropcap, p:not([class])){font-size:clamp(19px,1.3194vw,22.8px)!important}
}
/* op-article-width:end */

/* op-hover-pad */
.index-row{padding-left:clamp(12px,3.5vw,22px)!important;padding-right:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--display); color: var(--ink); letter-spacing: -0.015em; line-height: 1.1; margin: 0px;}
h2.rt-h3{font-family: var(--display); color: var(--ink); letter-spacing: -0.015em; line-height: 1.1; margin: 0px;}
h3:where(.rt-h4){font-family: var(--display); color: var(--ink); letter-spacing: -0.015em; line-height: 1.1; margin: 0px;}
.stepper-panel h3:where(.rt-h4){font-size: 20px; margin-bottom: 10px;}
.foot-col h3:where(.rt-h4){font: 600 12px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px;}
.cat-list h2:where(.rt-h3){font-size: 22px; line-height: 1.24; margin-bottom: 10px;}
.contact-card h2.rt-h3{font-size: 18px; margin-bottom: 6px;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.card > span.card-fig > img,
  div.article-body > figure.article-figure > img,
  div.front-in.wrap > figure.front-fig > img,
  div.stepper > div.stepper-fig > img,
  main > section.front > img.front-bg){height:auto}
/* op-img-dims:end */
@media (min-width:721px) and (max-width:879px){.nav { display: none; position: absolute; top: 70px; left: 0px; right: 0px; flex-direction: column; align-items: stretch; background: var(--slate-900); border-bottom: 1px solid var(--line); padding: 12px var(--gutter); gap: 2px; }.nav.open { display: flex; }.nav a { padding: 13px 12px; }.nav-cta { margin: 6px 0px 0px; }.nav-toggle { display: inline-flex; }.brand-tag { display: none; }}
.featured > [data-partner] img{background:transparent!important}