:root {
  --paper: #F3F5F6;      /* galvanized white */
  --card: #FFFFFF;
  --ink: #16202E;
  --ink-2: #4A5563;
  --steel: #C9D1D8;
  --plate: #DCE2E7;
  --low: #1D5BA6;        /* suction-side blue: links, tips */
  --low-bg: #E7EFF8;
  --high: #C23A2B;       /* discharge-side red: safety only */
  --high-bg: #FBECEA;
  --copper: #B4652F;
  --display: "Saira Semi Condensed", "Arial Narrow", sans-serif;
  --body: "Literata", Georgia, serif;
  --wrap: 1160px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121922; --card: #19222D; --ink: #E4E9EE; --ink-2: #A3AFBC;
    --steel: #34414F; --plate: #25303C; --low: #7FB0EA; --low-bg: #1B2B40;
    --high: #F08878; --high-bg: #3A1F1D; --copper: #D9905A;
  }
}

*, *::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.7 var(--body);
  font-optical-sizing: auto;
}
a { color: var(--low); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--low); outline-offset: 2px; border-radius: 2px; }
img, svg { display: block; max-width: 100%; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }
h1, h2, h3 { font-family: var(--display); line-height: 1.12; letter-spacing: -.005em; }

/* ---------- masthead: the equipment nameplate ---------- */
.masthead { padding-top: 22px; }
.plate {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 28px;
  padding: 22px 40px; border-radius: 10px; text-decoration: none; color: var(--ink);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #E4E9ED, #C8D0D7);
  border: 1px solid #A9B3BC;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -2px 0 rgba(0,0,0,.08), 0 1px 2px rgba(22,32,46,.12);
}
@media (prefers-color-scheme: dark) {
  .plate {
    color: #E4E9EE; border-color: #3F4C5A;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px), linear-gradient(180deg, #2C3743, #1F2832);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.4);
  }
}
.rivet {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #F4F6F8, #8E99A4 70%);
  box-shadow: 0 1px 1px rgba(0,0,0,.25);
}
.rivet:nth-child(1) { top: 10px; left: 12px; }
.rivet:nth-child(2) { top: 10px; right: 12px; }
.rivet:nth-child(3) { bottom: 10px; left: 12px; }
.rivet:nth-child(4) { bottom: 10px; right: 12px; }
.brand { display: flex; align-items: center; gap: 20px; min-width: 0; }
.logo { width: 88px; height: 88px; flex: none; filter: drop-shadow(0 1px 1px rgba(22,32,46,.3)); }
.wordmark {
  font: 800 clamp(2.4rem, 6.4vw, 4.4rem)/.9 var(--display);
  letter-spacing: .01em; white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255,255,255,.7), 0 -1px 0 rgba(0,0,0,.18);
}
@media (prefers-color-scheme: dark) { .wordmark { text-shadow: 0 -1px 0 rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.06); } }
.specs {
  margin: 0; display: grid; grid-template-columns: auto; gap: 2px 0;
  font: 500 .95rem/1.35 var(--display); border-left: 2px solid rgba(22,32,46,.25); padding-left: 18px;
}
.specs div { display: grid; grid-template-columns: 5.5em 1fr; }
.specs dt { color: var(--ink-2); }
.specs dd { margin: 0; font-weight: 700; }

.mainnav { margin-top: 14px; border-top: 1px solid var(--steel); border-bottom: 1px solid var(--steel); background: var(--card); }
.mainnav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.mainnav a {
  display: block; padding: 12px 12px; font: 600 1.02rem/1 var(--display); color: var(--ink);
  text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent;
}
.mainnav a:hover { color: var(--low); }
.mainnav a[aria-current="page"] { border-bottom-color: var(--low); color: var(--low); }

/* ---------- layout ---------- */
main.wrap { padding-top: 36px; padding-bottom: 64px; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; }

/* ---------- thumbnails ---------- */
.thumb { width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--steel); }
.thumb .bg { fill: var(--plate); }
.thumb .glyph { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.thumb .glyph .c { stroke: var(--copper); }

/* ---------- home feature ---------- */
.feature { display: grid; grid-template-columns: 1fr; gap: 22px; padding-bottom: 36px; border-bottom: 2px solid var(--ink); }
.feature .thumb.big { aspect-ratio: 2 / 1; }
.thumb.big .glyph { stroke-width: 1.3; }
.flag { margin: 0 0 6px; font: 700 .95rem/1 var(--display); color: var(--copper); }
.feature h1 { font-size: clamp(2rem, 4.2vw, 3rem); margin: 8px 0 12px; font-weight: 700; }
.feature h1 a, .row h2 a { color: var(--ink); text-decoration: none; }
.feature h1 a:hover, .row h2 a:hover { color: var(--low); }
.feature .excerpt { font-size: 1.15rem; max-width: 62ch; }

.meta { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font: 500 .95rem/1.3 var(--display); color: var(--ink-2); }
.meta .cat { font-weight: 700; text-decoration: none; }
.excerpt { margin: 0 0 12px; color: var(--ink-2); }

.jobline { margin: 0; display: flex; align-items: center; gap: 14px; font: 600 .95rem/1 var(--display); color: var(--ink-2); }
.chip { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.chip .dial { width: 30px; height: auto; }

/* difficulty dial */
.dial path { fill: none; stroke-width: 4; }
.dial .z1 { stroke: var(--low); }
.dial .z2 { stroke: var(--steel); }
.dial .z3 { stroke: var(--high); }
.dial .needle { stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; }
.dial .hub { fill: var(--ink); }

.listhead { font-size: 1.1rem; font-weight: 700; color: var(--ink-2); margin: 32px 0 4px; }
.row { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--steel); }
.row h2 { font-size: 1.6rem; font-weight: 700; margin: 6px 0 8px; }

/* ---------- sidebar ---------- */
.sidebar { position: sticky; top: 16px; display: grid; gap: 28px; }
.widget h2 { font-size: 1.15rem; font-weight: 700; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--ink); }
.widget p { margin: 0 0 8px; font-size: .97rem; }
.widget ul { list-style: none; margin: 0; padding: 0; }
.cats li { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--steel); font: 500 1.02rem/1.2 var(--display); }
.cats span { color: var(--ink-2); }
.cats a, .recent a { text-decoration: none; }
.recent li { padding: 8px 0; border-bottom: 1px solid var(--steel); font-size: .97rem; line-height: 1.4; }
.widget.safety { background: var(--high-bg); border-left: 4px solid var(--high); padding: 14px 16px; border-radius: 0 6px 6px 0; }
.widget.safety h2 { border: 0; padding: 0; color: var(--high); }

.search { display: flex; }
.search input {
  flex: 1; min-width: 0; font: 400 1rem/1.2 var(--body); padding: 10px 12px; color: var(--ink);
  background: var(--card); border: 1px solid var(--steel); border-right: 0; border-radius: 6px 0 0 6px;
}
.search button {
  font: 700 1rem/1 var(--display); padding: 0 16px; border: 0; border-radius: 0 6px 6px 0;
  background: var(--ink); color: var(--paper); cursor: pointer;
}
.search button:hover { background: var(--low); }
.search.big { margin: 8px 0 20px; }
.search.big input { font-size: 1.1rem; padding: 14px; }

/* ---------- single post ---------- */
.crumbs { font: 500 .95rem/1.3 var(--display); color: var(--ink-2); margin: 0 0 12px; }
.crumbs a { color: var(--ink-2); }
.posthead h1 { font-size: clamp(2.1rem, 4.6vw, 3.2rem); font-weight: 700; margin: 0 0 14px; max-width: 22ch; }
.archivehead { padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.archivehead h1 { font-size: clamp(2.1rem, 4.6vw, 3rem); margin: 0 0 4px; }
.archivehead p:last-child { margin: 0; font: 500 1rem var(--display); color: var(--ink-2); }

/* job card: the work order */
.jobcard {
  margin: 28px 0 32px; display: grid; grid-template-columns: auto auto 1fr; gap: 20px 36px; align-items: start;
  background: var(--card); border: 1px solid var(--steel); border-top: 4px solid var(--ink);
  border-radius: 0 0 8px 8px; padding: 18px 22px; font-family: var(--display);
}
.jobcard p { margin: 0; }
.jc-k { display: block; font: 500 .9rem/1.2 var(--display); color: var(--ink-2); }
.jc-v { display: block; font: 700 1.3rem/1.2 var(--display); }
.jc-dial { display: flex; gap: 10px; align-items: center; }
.jc-dial .dial { width: 54px; }
.jc-tools ul { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.jc-tools li { font: 600 .95rem/1 var(--display); padding: 6px 9px; border: 1px solid var(--steel); border-radius: 4px; background: var(--paper); }
.jc-tools p { font: 600 1rem var(--display); }

.entry { max-width: 68ch; }
.entry h2 { font-size: 1.65rem; font-weight: 700; margin: 2em 0 .4em; }
.entry p, .entry ul, .entry ol { margin: 0 0 1.1em; }
.entry li { margin-bottom: .4em; }
.entry ol li::marker { font-family: var(--display); font-weight: 700; }
.entry table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: .95rem; line-height: 1.45; display: block; overflow-x: auto; }
.entry th { font: 700 1rem var(--display); text-align: left; border-bottom: 2px solid var(--ink); padding: 8px 10px; }
.entry td { border-bottom: 1px solid var(--steel); padding: 9px 10px; vertical-align: top; }
.entry td:first-child { font-family: var(--display); font-weight: 700; white-space: nowrap; }
.note { margin: 1.4em 0; padding: 14px 18px; border-left: 4px solid; border-radius: 0 6px 6px 0; }
.note p { margin: 0; }
.note strong { font-family: var(--display); font-size: 1.08em; }
.note.warn { background: var(--high-bg); border-color: var(--high); }
.note.warn strong { color: var(--high); }
.note.tip { background: var(--low-bg); border-color: var(--low); }
.note.tip strong { color: var(--low); }

.authorbox { display: flex; gap: 16px; align-items: flex-start; margin: 44px 0 0; padding: 20px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--steel); }
.authorbox p { margin: 0; font-size: .97rem; color: var(--ink-2); }
.authorbox .ab-name { font: 700 1.15rem var(--display); color: var(--ink); margin-bottom: 2px; }
.avatar { width: 48px; flex: none; }
.avatar rect { fill: var(--plate); }
.avatar path { stroke: var(--copper); stroke-width: 2.5; stroke-linecap: round; fill: none; }

.postnav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--steel); }
.postnav a { text-decoration: none; font: 600 1.1rem/1.25 var(--display); color: var(--ink); }
.postnav a:hover { color: var(--low); }
.postnav span { display: block; font-weight: 500; font-size: .92rem; color: var(--ink-2); margin-bottom: 4px; }
.postnav .newer { text-align: right; }

.related h2 { font-size: 1.3rem; margin: 32px 0 14px; }
.related ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.related a { text-decoration: none; color: var(--ink); font: 600 1.05rem/1.25 var(--display); display: grid; gap: 8px; }
.related a:hover span { color: var(--low); }

/* ---------- footer ---------- */
.foot { background: var(--ink); color: #C5CED8; padding: 44px 0 24px; font-size: .95rem; }
@media (prefers-color-scheme: dark) { .foot { background: #0C1117; } }
.foot a { color: #E4E9EE; text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.footgrid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.footname { font: 800 1.6rem/1 var(--display); color: #fff; margin: 0 0 8px; }
.foothead { font: 700 1.05rem var(--display); color: #fff; margin: 0 0 10px; }
.copy { margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.15); font-size: .88rem; color: #93A0AE; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .layout { grid-template-columns: 1fr; gap: 48px; }
  .sidebar { position: static; }
  .specs { display: none; }
  .plate { justify-content: center; }
}
@media (max-width: 640px) {
  .plate { padding: 18px 26px; }
  .brand { gap: 12px; }
  .logo { width: 56px; height: 56px; }
  .wordmark { font-size: clamp(1.9rem, 9vw, 2.4rem); }
  .row { grid-template-columns: 96px 1fr; gap: 14px; }
  .row h2 { font-size: 1.3rem; }
  .row .excerpt { display: none; }
  .jobcard { grid-template-columns: 1fr 1fr; }
  .jc-tools { grid-column: 1 / -1; }
  .related ul { grid-template-columns: 1fr; }
  .related a { grid-template-columns: 96px 1fr; align-items: center; }
  .postnav { grid-template-columns: 1fr; }
  .postnav .newer { text-align: left; }
  .footgrid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
@media (max-width: 760px) {
  .mainnav ul { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 40px; }
}
.footcontact { font-style: normal; margin-top: 14px; line-height: 1.7; }
.entry table.contact { display: table; max-width: 32rem; font-size: 1rem; }
.entry table.contact th { border-bottom: 1px solid var(--steel); width: 6rem; vertical-align: top; padding: 10px; }