/* ==========================================================================
   Genset Digest, chstatck.com
   Class vocabulary: switchboard and engine hall
   (busbar, tap, riser, nameplate, louvre, vane, manifold, feeder, line,
    duct, gauge, spool, derate, shunt, bay, plenum, breaker, stack)
   Every rule below is local. No font file, no CDN, no remote asset.
   ========================================================================== */

:root {
  /* palette : machine grey ground, steel blue signal, amber warning */
  --deck:        #e8ebe6;   /* page ground, cold machine grey */
  --plate:       #f5f7f3;   /* raised panels, cards, tables */
  --recess:      #dde2dc;   /* sunk strips, table heads, rail */
  --iron:        #20272b;   /* body ink, hero ground, footer */
  --iron-soft:   #4d585c;   /* secondary ink, captions */
  --steel:       #1f5878;   /* links, headings accent */
  --steel-lit:   #2c7ba6;   /* hover of steel */
  --amber:       #c9761c;   /* signal accent, dates, numbers */
  --oxide:       #8f3f22;   /* tags, category marks */
  --rule:        #c3cac3;   /* hairlines */
  --rule-strong: #9aa49c;   /* structural lines */
  --focus:       #2c7ba6;

  /* faces */
  --face-title: "Helvetica Neue", "Nimbus Sans", Helvetica, "Liberation Sans", Arial, sans-serif;
  --face-read:  "Noto Serif", "Droid Serif", "PT Serif", "Liberation Serif", Georgia, serif;
  --face-data:  "PT Mono", "Andale Mono", "Roboto Mono", ui-monospace, "Courier New", monospace;

  /* metrics */
  --plenum: 74rem;
  --measure: 40rem;
  --gap: clamp(1.1rem, 2.4vw, 2rem);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--deck);
  color: var(--iron);
  font-family: var(--face-read);
  font-size: 17px;
  line-height: 1.68;
}

img { max-width: 100%; display: block; }

a { color: var(--steel); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--steel-lit); }
a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

h1, h2, h3, h4 {
  font-family: var(--face-title);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.18;
  color: var(--iron);
  margin: 0 0 .6rem;
}

.swb-skip {
  position: absolute; left: -9999px;
  background: var(--iron); color: #fff; padding: .6rem 1rem;
}
.swb-skip:focus { left: .6rem; top: .6rem; z-index: 50; }

.swb-plenum { width: 100%; max-width: var(--plenum); margin: 0 auto; padding: 0 1.1rem; }
.swb-plenum--narrow { max-width: 56rem; }

/* ---------- busbar (site header) ---------- */

.swb-busbar {
  background: var(--iron);
  color: #eef1ee;
  border-bottom: 3px solid var(--amber);
}
.swb-busbar__inner {
  max-width: var(--plenum); margin: 0 auto; padding: .7rem 1.1rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem;
}
.swb-mark { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: inherit; }
.swb-mark__glyph { flex: none; }
.swb-mark__name {
  display: block; font-family: var(--face-title); font-weight: 700;
  font-size: 1.22rem; letter-spacing: .01em; color: #fff;
}
.swb-mark__sub {
  display: block; font-family: var(--face-data); font-size: .66rem;
  letter-spacing: .17em; text-transform: uppercase; color: #b9c4bd;
}
.swb-taps { margin-left: auto; display: flex; flex-wrap: wrap; gap: .15rem .35rem; }
.swb-tap {
  font-family: var(--face-title); font-size: .82rem; letter-spacing: .01em;
  color: #d6ded8; text-decoration: none; padding: .3rem .5rem;
  border-bottom: 2px solid transparent;
}
.swb-tap:hover, .swb-tap:focus-visible { color: #fff; border-bottom-color: var(--amber); }
.swb-tap--live { color: #fff; border-bottom-color: var(--amber); }

/* ---------- riser (hero) ---------- */

.swb-riser { position: relative; overflow: hidden; background: var(--iron); }
.swb-riser__photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 50%;
}
.swb-riser__veil {
  position: absolute; inset: 0;
  background: linear-gradient(178deg, rgba(23,29,32,.86) 0%, rgba(23,29,32,.78) 42%, rgba(23,29,32,.9) 100%);
}
.swb-riser__core {
  position: relative;
  max-width: var(--plenum); margin: 0 auto;
  padding: clamp(2.8rem, 7vw, 5.2rem) 1.1rem clamp(2.4rem, 5vw, 3.8rem);
}
.swb-riser__plate {
  font-family: var(--face-data); font-size: .72rem; letter-spacing: .22em;
  text-transform: uppercase; color: #e6a457; margin: 0 0 1rem;
  border-left: 3px solid var(--amber); padding-left: .7rem;
}
.swb-riser h1 {
  color: #fff; font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  max-width: 22ch; margin-bottom: 1rem;
}
.swb-riser__lead {
  color: #dbe2dd; max-width: 60ch; font-size: clamp(1rem, .95rem + .32vw, 1.12rem);
  margin: 0 0 1rem;
}
.swb-riser__lead a { color: #9fd0e8; }
.swb-riser__acts { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }

.swb-cta {
  display: inline-block; font-family: var(--face-title); font-weight: 700;
  font-size: .88rem; letter-spacing: .02em; text-decoration: none;
  padding: .62rem 1.25rem; background: var(--amber); color: #1b2124;
  border: 1px solid #a35d10;
}
.swb-cta:hover { background: #dd8526; color: #14181a; }
.swb-cta--ghost {
  background: transparent; color: #e8ede9; border-color: #6b7a72;
}
.swb-cta--ghost:hover { background: rgba(255,255,255,.09); color: #fff; }

/* ---------- nameplate (data plate strip) ---------- */

.swb-nameplate {
  background: var(--recess);
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
}
.swb-nameplate__row {
  max-width: var(--plenum); margin: 0 auto; padding: .2rem 1.1rem;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.swb-nameplate__cell { padding: .8rem .9rem .8rem 0; }
.swb-nameplate__cell + .swb-nameplate__cell {
  border-left: 1px solid var(--rule-strong); padding-left: .9rem;
}
.swb-nameplate__key {
  display: block; font-family: var(--face-data); font-size: .64rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--iron-soft);
}
.swb-nameplate__val {
  display: block; font-family: var(--face-title); font-weight: 700;
  font-size: .95rem; color: var(--iron); margin-top: .15rem;
}

/* ---------- bays (sections) ---------- */

.swb-bay { padding: clamp(2.2rem, 5vw, 3.4rem) 0; }
.swb-bay--sunk { background: var(--recess); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.swb-bay__head { margin-bottom: 1.6rem; }
.swb-bay__title { font-size: clamp(1.35rem, 2.6vw, 1.85rem); margin: 0 0 .35rem; }
.swb-bay__note { margin: 0; color: var(--iron-soft); max-width: 68ch; }
.swb-breaker {
  height: 6px; border: 0; margin: 0;
  background: repeating-linear-gradient(115deg, var(--amber) 0 10px, var(--iron) 10px 20px);
  opacity: .8;
}

/* ---------- louvre (category grid) ---------- */

.swb-louvre {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
}
.swb-vane {
  background: var(--plate); border: 1px solid var(--rule);
  display: flex; flex-direction: column;
}
.swb-vane__frame { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--recess); }
.swb-vane__photo { width: 100%; height: 100%; object-fit: cover; }
.swb-vane__mark {
  position: absolute; left: 0; bottom: 0;
  font-family: var(--face-data); font-size: .63rem; letter-spacing: .15em;
  text-transform: uppercase; background: var(--oxide); color: #fff; padding: .25rem .55rem;
}
.swb-vane__body { padding: .95rem 1rem 1.1rem; display: flex; flex-direction: column; flex: 1; }
.swb-vane__title { font-size: 1.06rem; margin: 0 0 .4rem; }
.swb-vane__title a { text-decoration: none; color: var(--iron); }
.swb-vane__title a:hover { color: var(--steel); text-decoration: underline; }
.swb-vane__text { margin: 0 0 .8rem; font-size: .95rem; color: var(--iron-soft); }
.swb-terminal {
  margin-top: auto; font-family: var(--face-title); font-weight: 700;
  font-size: .8rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--steel); text-decoration: none;
}
.swb-terminal::after { content: " \203A"; }
.swb-terminal:hover { color: var(--steel-lit); text-decoration: underline; }

/* ---------- manifold (feed + duct rail) ---------- */

.swb-manifold { display: grid; gap: clamp(1.6rem, 3.4vw, 2.6rem); grid-template-columns: 1fr; }
@media (min-width: 62rem) {
  .swb-manifold { grid-template-columns: minmax(0, 1fr) 19.5rem; }
}

.swb-feeder { border-top: 2px solid var(--iron); }
.swb-line {
  display: grid; gap: 1rem; grid-template-columns: 9.5rem minmax(0, 1fr);
  padding: 1.15rem 0; border-bottom: 1px solid var(--rule);
}
.swb-line__spool { aspect-ratio: 4 / 3; overflow: hidden; background: var(--recess); border: 1px solid var(--rule); }
.swb-line__photo { width: 100%; height: 100%; object-fit: cover; }
.swb-line__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin-bottom: .3rem;
}
.swb-stamp {
  font-family: var(--face-data); font-size: .74rem; letter-spacing: .06em;
  color: var(--amber); font-weight: 700;
}
.swb-tagplate {
  font-family: var(--face-data); font-size: .64rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--iron-soft);
  border: 1px solid var(--rule-strong); padding: .1rem .45rem;
}
.swb-tagplate a { color: inherit; text-decoration: none; }
.swb-tagplate a:hover { color: var(--steel); }
.swb-line__title { font-size: 1.14rem; margin: 0 0 .35rem; }
.swb-line__title a { text-decoration: none; color: var(--iron); }
.swb-line__title a:hover { color: var(--steel); text-decoration: underline; }
.swb-line__lede { margin: 0; font-size: .96rem; color: var(--iron-soft); }

@media (max-width: 34rem) {
  .swb-line { grid-template-columns: 1fr; }
  .swb-line__spool { aspect-ratio: 16 / 9; }
}

/* ---------- duct (side rail) ---------- */

.swb-duct__block {
  background: var(--plate); border: 1px solid var(--rule);
  border-top: 3px solid var(--steel); padding: 1rem 1rem 1.1rem; margin-bottom: 1.4rem;
}
.swb-duct__title {
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  font-family: var(--face-data); font-weight: 700; color: var(--iron-soft); margin: 0 0 .7rem;
}
.swb-index { list-style: none; margin: 0; padding: 0; counter-reset: file; }
.swb-index__item {
  display: flex; gap: .6rem; padding: .42rem 0; border-bottom: 1px dotted var(--rule);
  font-size: .93rem;
}
.swb-index__item:last-child { border-bottom: 0; }
.swb-index__item::before {
  counter-increment: file; content: counter(file, decimal-leading-zero);
  font-family: var(--face-data); font-size: .78rem; color: var(--amber); flex: none; padding-top: .12rem;
}
.swb-index__item a { text-decoration: none; }
.swb-index__item a:hover { text-decoration: underline; }

.swb-gauge { display: flex; align-items: baseline; gap: .6rem; padding: .35rem 0; }
.swb-gauge__num { font-family: var(--face-title); font-weight: 700; font-size: 1.5rem; color: var(--steel); }
.swb-gauge__label { font-size: .88rem; color: var(--iron-soft); }

.swb-duct__photo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--rule); margin-bottom: .7rem; }
.swb-duct__text { margin: 0 0 .7rem; font-size: .93rem; color: var(--iron-soft); }

/* ---------- sheet (article page) ---------- */

.swb-sheet { padding: clamp(1.6rem, 4vw, 2.6rem) 0 1rem; }
.swb-trail {
  font-family: var(--face-data); font-size: .74rem; letter-spacing: .07em;
  color: var(--iron-soft); margin: 0 0 1rem;
}
.swb-trail a { color: var(--iron-soft); }
.swb-sheet__head { border-bottom: 2px solid var(--iron); padding-bottom: 1.1rem; margin-bottom: 1.4rem; }
.swb-sheet__head h1 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); max-width: 26ch; }
.swb-sheet__meta { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; margin-bottom: .8rem; }
.swb-sheet__lead { font-size: 1.08rem; color: var(--iron-soft); margin: .9rem 0 0; max-width: 66ch; }

.swb-runline { max-width: var(--measure); }
.swb-runline > * { max-width: 100%; }
.swb-runline p { margin: 0 0 1.05rem; }
.swb-runline h2 {
  font-size: 1.32rem; margin: 2rem 0 .6rem; padding-top: .7rem;
  border-top: 1px solid var(--rule-strong);
}
.swb-runline h3 { font-size: 1.06rem; margin: 1.5rem 0 .4rem; color: var(--steel); }
.swb-runline ul, .swb-runline ol { margin: 0 0 1.05rem; padding-left: 1.25rem; }
.swb-runline li { margin-bottom: .4rem; }
.swb-runline strong { color: var(--iron); }

.swb-spool { margin: 1.5rem 0; border: 1px solid var(--rule); background: var(--plate); }
.swb-spool img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.swb-spool__cap {
  font-family: var(--face-data); font-size: .76rem; color: var(--iron-soft);
  padding: .55rem .8rem; border-top: 1px solid var(--rule);
}
.swb-spool--wide { max-width: none; }

.swb-derate {
  background: var(--recess); border-left: 4px solid var(--amber);
  padding: .9rem 1rem; margin: 1.5rem 0;
}
.swb-derate p { margin: 0 0 .5rem; font-size: .96rem; }
.swb-derate p:last-child { margin-bottom: 0; }
.swb-derate__key {
  display: block; font-family: var(--face-data); font-size: .66rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--oxide); margin-bottom: .3rem;
}

.swb-abacus { overflow-x: auto; margin: 1.5rem 0; border: 1px solid var(--rule); }
.swb-chart { border-collapse: collapse; width: 100%; min-width: 32rem; background: var(--plate); font-size: .93rem; }
.swb-chart th, .swb-chart td { padding: .55rem .7rem; text-align: left; border-bottom: 1px solid var(--rule); }
.swb-chart thead th {
  background: var(--recess); font-family: var(--face-data); font-size: .7rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--iron);
}
.swb-chart tbody tr:last-child td { border-bottom: 0; }

.swb-shunt {
  border: 1px solid var(--rule); border-top: 3px solid var(--oxide);
  background: var(--plate); padding: 1rem 1.1rem 1.15rem; margin: 2rem 0 0;
}
.swb-shunt__title {
  font-family: var(--face-data); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--iron-soft); margin: 0 0 .6rem;
}
.swb-shunt p { margin: 0 0 .6rem; font-size: .96rem; }
.swb-shunt p:last-child { margin-bottom: 0; }

/* ---------- stack (footer) ---------- */

.swb-stack { background: var(--iron); color: #c9d2cc; margin-top: 2.5rem; border-top: 3px solid var(--amber); }
.swb-stack__grid {
  max-width: var(--plenum); margin: 0 auto; padding: 2.1rem 1.1rem 1.4rem;
  display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.swb-stack__title {
  font-family: var(--face-data); font-size: .7rem; letter-spacing: .17em;
  text-transform: uppercase; color: #e6a457; margin: 0 0 .6rem;
}
.swb-stack ul { list-style: none; margin: 0; padding: 0; }
.swb-stack li { margin-bottom: .35rem; font-size: .92rem; }
.swb-stack a { color: #d6ded8; text-decoration: none; }
.swb-stack a:hover { color: #fff; text-decoration: underline; }
.swb-stack p { font-size: .92rem; margin: 0 0 .6rem; }
.swb-colophon {
  border-top: 1px solid #38423f; padding: .9rem 1.1rem 1.6rem;
  max-width: var(--plenum); margin: 0 auto;
  font-family: var(--face-data); font-size: .72rem; letter-spacing: .04em; color: #8e9b94;
}

/* ---------- responsive tuning ---------- */

@media (max-width: 48rem) {
  .swb-nameplate__row { grid-template-columns: repeat(2, 1fr); }
  .swb-nameplate__cell:nth-child(3) { border-left: 0; padding-left: 0; }
  .swb-nameplate__cell:nth-child(3), .swb-nameplate__cell:nth-child(4) { border-top: 1px solid var(--rule-strong); }
  .swb-taps { margin-left: 0; width: 100%; }
}

@media print {
  .swb-busbar, .swb-taps, .swb-duct, .swb-stack, .swb-riser__acts { display: none; }
  body { background: #fff; font-size: 12pt; }
}
