/* Recyclers Guide, "Field Atlas" prototype. See DESIGN.md for the system. */

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  --paper: #f4f6f5;
  --plate: #ffffff;
  --sunk: #e9eeec;
  --ink: #14201d;
  --ink-2: #3d4a46;
  --ink-3: #53605c;
  --rule: #d2dad7;
  --line: #7a8783;
  --halo: #ffd43b;
  --banner-bg: #14201d;
  --banner-fg: #f4f6f5;

  --al: #0a7180;
  --fe: #b03a1c;
  --fi: #8a5f0a;
  --gl: #2e7a33;
  --fm: #6f47b0;
  --res: #77827e;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Archivo", "Helvetica Neue", Helvetica, sans-serif;

  /* type scale: ratio 1.2, base 18px */
  --fs-xs: 0.9375rem;   /* 15 */
  --fs-base: 1.125rem;  /* 18 */
  --fs-md: 1.35rem;     /* 21.6 */
  --fs-lg: 1.62rem;     /* 25.9 */
  --fs-xl: 1.944rem;    /* 31.1 */
  --fs-2xl: 2.8rem;     /* 44.8 */

  /* spacing */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  --measure: 36rem;
  --gutter: 16px;
  --r-1: 3px;
  --r-2: 6px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0f1513;
    --plate: #161f1c;
    --sunk: #1d2825;
    --ink: #e3e9e6;
    --ink-2: #b5c1bd;
    --ink-3: #97a5a0;
    --rule: #2a3532;
    --line: #6f7d79;
    --al: #3fbfd0;
    --fe: #f08262;
    --fi: #dcb04e;
    --gl: #74c17a;
    --fm: #b398ee;
    --res: #8e9a96;
    --banner-bg: #1d2825;
    --banner-fg: #e3e9e6;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0f1513;
  --plate: #161f1c;
  --sunk: #1d2825;
  --ink: #e3e9e6;
  --ink-2: #b5c1bd;
  --ink-3: #97a5a0;
  --rule: #2a3532;
  --line: #6f7d79;
  --al: #3fbfd0;
  --fe: #f08262;
  --fi: #dcb04e;
  --gl: #74c17a;
  --fm: #b398ee;
  --res: #8e9a96;
  --banner-bg: #1d2825;
  --banner-fg: #e3e9e6;
}

@media (min-width: 720px) { :root { --gutter: 32px; } }
@media (min-width: 1100px) { :root { --gutter: 48px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--s-5); }
@media (max-width: 719px) { html { scroll-padding-bottom: 88px; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--fs-base);
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; }
p, ul, ol, dl { margin: 0 0 var(--s-4); }
p, li, dd { text-wrap: pretty; }
ul, ol { padding-left: 1.25em; }
li + li { margin-top: var(--s-2); }
strong, b { font-weight: 600; }
/* <em> marks single math variables (A, w, d). No italic font is loaded, so the synthesized oblique gets a hair of space after it. */
em { padding-right: 0.1em; }

a { color: inherit; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: var(--line); }
a:hover { text-decoration-thickness: 2px; text-decoration-color: currentColor; }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 8px var(--halo);
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.wrap { max-width: calc(1200px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Skip link, prototype banner ---------- */
.skip {
  position: absolute; left: var(--s-4); top: -200px; z-index: 10;
  background: var(--ink); color: var(--paper);
  font: 600 var(--fs-xs)/1 var(--sans); padding: var(--s-3) var(--s-4); border-radius: var(--r-1); text-decoration: none;
}
.skip:focus { top: var(--s-2); }

.proto {
  background: var(--banner-bg); color: var(--banner-fg);
  font: 500 var(--fs-xs)/1.4 var(--sans);
  text-align: center; padding: 6px var(--gutter);
  border-bottom: 1px solid var(--rule);
}

/* ---------- Glyphs (material legend) ---------- */
.g { width: 14px; height: 14px; display: inline-block; flex: none; vertical-align: -1px; fill: currentColor; }
.g-lg { width: 18px; height: 18px; }
.c-al { color: var(--al); } .c-fe { color: var(--fe); } .c-fi { color: var(--fi); }
.c-gl { color: var(--gl); } .c-fm { color: var(--fm); } .c-res { color: var(--res); }
.glyphs { display: inline-flex; gap: 3px; align-items: center; }

/* ---------- Header ---------- */
.site-head { border-bottom: 1px solid var(--rule); }
.head-inner { display: flex; align-items: center; gap: var(--s-5); min-height: 72px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 var(--fs-md)/1 var(--serif); letter-spacing: -0.01em; color: var(--ink); }
.brand svg { width: 28px; height: 28px; flex: none; }
.main-nav { margin-left: auto; }
.main-nav ul { display: flex; gap: var(--s-5); list-style: none; margin: 0; padding: 0; }
.main-nav li + li { margin-top: 0; }
.main-nav a { display: inline-block; font: 500 var(--fs-xs)/1 var(--sans); color: var(--ink-2); text-decoration: none; padding: var(--s-3) 0; }
.main-nav a:hover { color: var(--ink); box-shadow: inset 0 -1px 0 var(--ink); }
.main-nav a[aria-current] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ink); }
.head-rfq { white-space: nowrap; }
/* Contact: a quiet text link set like the nav, beside the one solid button */
.head-contact { font: 500 var(--fs-xs)/1 var(--sans); color: var(--ink-2); text-decoration: none; padding: var(--s-3) 0; white-space: nowrap; }
.head-contact:hover { color: var(--ink); box-shadow: inset 0 -1px 0 var(--ink); }
.head-contact[aria-current] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ink); }
.theme-toggle {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--line); border-radius: var(--r-1); background: transparent; color: var(--ink); cursor: pointer;
}
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle:hover { background: var(--sunk); }

/* Two rows until 900px: with the Contact link, one row needs about 865px */
@media (max-width: 899px) {
  .head-inner { gap: 0 var(--s-3); padding-top: var(--s-3); }
  .brand { order: 1; }
  .head-contact { order: 2; margin-left: auto; margin-right: var(--s-2); }
  .head-rfq { order: 2; }
  .theme-toggle { order: 3; }
  .main-nav { order: 4; width: 100%; margin: var(--s-2) 0 0; }
  .main-nav ul { flex-wrap: wrap; column-gap: var(--s-5); }
}
@media (max-width: 719px) {
  .site-head .head-rfq { display: none; }
  .head-contact { margin-right: var(--s-1); }
  .main-nav ul { column-gap: var(--s-4); justify-content: space-between; }
}
@media (max-width: 359px) {
  /* Contact stays in reach: the wordmark drops to the base size to make room for it */
  .brand span { font-size: var(--fs-base); }
  .head-contact { display: inline-block; margin-left: auto; margin-right: var(--s-2); }
  .theme-toggle { margin-left: 0; }
  .main-nav ul { column-gap: var(--s-3); justify-content: flex-start; }
  .main-nav a { font-size: 0.875rem; }
}

/* Phone action bar: the site's two next steps, always in reach */
.actbar { display: none; }
@media (max-width: 719px) {
  body { padding-bottom: 72px; }
  .actbar {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
    padding: var(--s-2) var(--gutter) calc(var(--s-2) + env(safe-area-inset-bottom));
    background: var(--paper); border-top: 1px solid var(--line);
  }
  .actbar .btn { justify-content: center; padding: 0 var(--s-3); text-align: center; }
}

/* ---------- Type ---------- */
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
h1 { font-family: var(--serif); font-size: var(--fs-xl); line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; margin-bottom: var(--s-5); font-variation-settings: "opsz" 72; }
/* Home display: same sizes as an article H1 (31.1px phones, 44.8px from 720px), tighter leading */
.display { line-height: 1.04; letter-spacing: -0.02em; }
h2 { font-family: var(--serif); font-size: var(--fs-lg); line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; font-variation-settings: "opsz" 72; }
h3 { font: 600 var(--fs-base)/1.35 var(--sans); }
@media (min-width: 720px) {
  h1 { font-size: var(--fs-2xl); }
  h2 { font-size: var(--fs-xl); }
}

.kicker { display: flex; align-items: center; gap: var(--s-2); font: 600 var(--fs-xs)/1.4 var(--sans); color: var(--ink-2); margin: 0 0 var(--s-4); }
/* Dek and lede are set in the sans: the lines under a headline read as a summary, not as more prose */
.dek { font: 400 var(--fs-md)/1.5 var(--sans); color: var(--ink-2); max-width: 34rem; margin-bottom: var(--s-5); }
.lede { font: 400 var(--fs-md)/1.5 var(--sans); max-width: 34rem; }
.lede dfn { font-style: normal; font-weight: 600; }
.meta { font: 400 var(--fs-xs)/1.5 var(--sans); color: var(--ink-3); }
.meta b { color: var(--ink-2); font-weight: 600; }
.small { font: 400 var(--fs-xs)/1.5 var(--sans); color: var(--ink-2); }
.placeholder { font-family: var(--sans); font-size: 0.85em; background: var(--sunk); border: 1px dashed var(--line); border-radius: var(--r-1); padding: 0 4px; white-space: nowrap; color: var(--ink-2); }
/* Sentence-length placeholders wrap as one mark: a dashed underline on the sunk tint, not a box that splits in two */
.placeholder.ph-wrap { white-space: normal; border: 0; border-bottom: 1px dashed var(--line); border-radius: 0; padding: 0 2px; }

.prose > p, .prose > ul, .prose > ol, .prose > dl,
.prose section > p, .prose section > ul, .prose section > ol, .prose section > h3, .prose section > dl { max-width: var(--measure); }

/* ---------- Breadcrumbs ---------- */
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); list-style: none; padding: 0; margin: 0 0 var(--s-6); font: 400 var(--fs-xs)/1.4 var(--sans); color: var(--ink-3); }
.crumbs li + li { margin-top: 0; }
.crumbs li + li::before { content: "\203A"; margin-right: var(--s-2); color: var(--ink-3); }
.crumbs a { color: var(--ink-2); }
@media (max-width: 719px) {
  .crumbs ol { margin-bottom: var(--s-4); }
  .crumbs li:not(:nth-last-child(2)) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .crumbs li:nth-last-child(2)::before { content: "\2039"; margin-right: 6px; color: var(--ink-2); }
  .crumbs li:nth-last-child(2) a { display: inline-block; padding-block: 3px; }
}

/* ---------- Buttons, tags ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 48px; padding: 0 var(--s-5);
  font: 600 var(--fs-xs)/1.2 var(--sans); text-decoration: none; border-radius: var(--r-1);
  border: 1.5px solid var(--ink); cursor: pointer;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn-secondary { background: transparent; color: var(--ink); }
.btn-secondary:hover { background: var(--sunk); }
.btn[disabled] { background: var(--sunk); color: var(--ink-3); border-color: var(--line); cursor: not-allowed; }
.btn .arr { font-family: var(--sans); }
.btn-sm { min-height: 40px; padding: 0 var(--s-4); }
.btn[aria-disabled="true"] { background: var(--sunk); color: var(--ink-2); border-color: var(--line); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-5) 0; }

.tag { display: inline-flex; align-items: center; gap: 6px; font: 600 var(--fs-xs)/1 var(--sans); padding: 6px 10px; border-radius: var(--r-1); white-space: nowrap; }
.tag-live { background: var(--ink); color: var(--paper); }
.tag-soon { border: 1px dashed var(--line); color: var(--ink-2); font-weight: 500; }
.tag-sample { border: 1px dashed var(--ink-2); color: var(--ink-2); }
.tag-preview { border: 1.5px solid var(--ink); color: var(--ink); }
.tag-wrap { white-space: normal; line-height: 1.4; }
.tag-supply { border: 1.5px solid var(--ink-2); color: var(--ink); }  /* a real listing that supplies the publisher's affiliate */
.listing .tag { align-self: flex-start; }

/* ---------- Sections ---------- */
.section { padding-block: var(--s-8); }
@media (min-width: 960px) { .section { padding-block: var(--s-9); } }
.section + .section { border-top: 1px solid var(--rule); }
.section-head { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); max-width: 44rem; }
.section-head p { color: var(--ink-2); margin: 0; }

/* ---------- Home hero ---------- */
/* Markup order is the phone order: H1, dek, buttons, Figure 1 (the stream map), then the problem list. From 960px grid
   areas put the figure in the right column beside both, so reading and focus order never jump. */
.hero { padding-block: var(--s-6) var(--s-8); }
.hero-grid { display: grid; gap: var(--s-6); }
@media (min-width: 960px) {
  .hero { padding-block: var(--s-7) var(--s-9); }
  .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr; grid-template-areas: "intro fig" "probs fig"; gap: 0 var(--s-8); align-items: start; }
  .hero-intro { grid-area: intro; }
  .hero-fig { grid-area: fig; }
  .hero-problems { grid-area: probs; }
}
.audience { font: 400 var(--fs-xs)/1.5 var(--sans); color: var(--ink-2); margin: var(--s-5) 0 0; max-width: 34rem; }
.hero-actions { margin: 0; }
@media (min-width: 960px) { .hero-actions { margin-bottom: var(--s-7); } }
@media (max-width: 599px) {
  .lede { font-size: var(--fs-base); }
  .dek { font-size: var(--fs-base); margin-bottom: var(--s-4); }
  .hero-actions .btn { flex: 1 1 100%; justify-content: center; }
}
.audience b { color: var(--ink); }

.problems-label { font: 600 var(--fs-xs)/1.4 var(--sans); color: var(--ink); margin: 0 0 var(--s-3); }
.problems { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--ink); }
.problems li { margin: 0; border-bottom: 1px solid var(--rule); }
.prob { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: var(--s-1) var(--s-3); align-items: baseline; padding: var(--s-4) var(--s-2) var(--s-4) 0; text-decoration: none; color: var(--ink); }
.prob .g { width: 16px; height: 16px; align-self: center; grid-row: 1; }
.prob-title { font: 500 var(--fs-md)/1.25 var(--serif); }
.prob-desc { grid-column: 2 / 4; font: 400 var(--fs-xs)/1.5 var(--sans); color: var(--ink-2); }
.prob .tag { align-self: center; }
a.prob { position: relative; }
a.prob::before { content: ""; position: absolute; left: -12px; top: 0; bottom: 0; width: 4px; background: var(--al); }
a.prob:hover { background: color-mix(in srgb, var(--al) 7%, transparent); }
a.prob:hover .prob-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.prob.soon .prob-title { color: var(--ink-2); }
.problems-sub { font: 600 var(--fs-xs)/1.4 var(--sans); color: var(--ink-2); margin: var(--s-5) 0 0; padding-bottom: var(--s-2); }
.problems-soon { border-top-width: 1px; border-top-color: var(--rule); }
.problems-soon .prob { grid-template-columns: 24px minmax(0, 1fr); padding-block: var(--s-3); }
.problems-soon .prob-title { font-size: var(--fs-base); }
.problems-soon .prob-desc { grid-column: 2; }
@media (max-width: 719px) {
  a.prob::before { left: -8px; }
  .prob { grid-template-columns: 24px minmax(0, 1fr); }
  .prob-desc { grid-column: 2; }
  .prob .tag { grid-column: 2; grid-row: 3; justify-self: start; margin-top: var(--s-1); }
}

/* ---------- Plates (figures) ---------- */
.plate { margin: var(--s-7) 0; background: var(--plate); border: 1px solid var(--rule); border-radius: var(--r-2); padding: var(--s-5); }
.plate.flush { margin: 0; }
.plate figcaption { font: 400 var(--fs-xs)/1.5 var(--sans); color: var(--ink-2); margin-top: var(--s-4); max-width: 48rem; }
.plate figcaption b { color: var(--ink); font-weight: 600; }
@media (max-width: 719px) { .plate { padding: var(--s-4); } }

.fig { display: block; width: 100%; height: auto; overflow: visible; }
.fig text { font-family: var(--sans); fill: var(--ink-2); font-size: 15px; }
.fig .t-b { fill: var(--ink); font-weight: 600; }
.fig .t-s { font-size: 13px; fill: var(--ink-3); }
.fig-map .t-s { font-size: 15px; }
.fig-map .map-link text { text-decoration: underline; text-decoration-thickness: 1px; }
.fig-map .map-link .hit { fill: transparent; }
.fig-map .map-link:hover .hit { fill: var(--sunk); }
.fig-map .map-link:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.fig .edge { stroke: var(--ink); stroke-width: 2; fill: none; }
.fig .edge-1 { stroke: var(--ink); stroke-width: 1.25; fill: none; }
.fig .ldr { stroke: var(--ink-3); stroke-width: 1; fill: none; }
.fig .dash { stroke-dasharray: 4 4; }
.fig .well { fill: var(--sunk); }
.fig .bg { fill: var(--plate); }
.fig .ink { fill: var(--ink); }
.fig .ink2 { fill: var(--ink-2); }
.fig .f-al { fill: var(--al); } .fig .f-fe { fill: var(--fe); } .fig .f-fi { fill: var(--fi); }
.fig .f-gl { fill: var(--gl); } .fig .f-fm { fill: var(--fm); }
.fig .f-res { fill: none; stroke: var(--res); stroke-width: 1.5; }
.fig .s-al { stroke: var(--al); } .fig .s-fe { stroke: var(--fe); } .fig .s-fi { stroke: var(--fi); }
.fig .s-gl { stroke: var(--gl); } .fig .s-fm { stroke: var(--fm); } .fig .s-res { stroke: var(--res); }
.fig .thread { fill: none; stroke-width: 5; stroke-linecap: round; }
.fig .path { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.fig .mag-n { fill: var(--ink-2); }
.fig .mag-s { fill: var(--sunk); stroke: var(--ink-2); stroke-width: 1; }
.fig .mag-n-t { fill: var(--plate); font-size: 12px; font-weight: 700; }
.fig .mag-s-t { fill: var(--ink); font-size: 12px; font-weight: 700; }
.fig .mk circle { fill: var(--ink); }
.fig .mk text { fill: var(--plate); font-size: 13px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
/* Rotor and line figures exist twice: .fig-lg for wide columns, .fig-sm redrawn for phones */
.fig.fig-sm { display: none; }
@media (max-width: 599px) {
  .fig.fig-lg { display: none; }
  .fig.fig-sm { display: block; }
}
.fig .arrowhead { fill: var(--ink); }

/* Numbered key under a figure: markers in the drawing, words in HTML, so nothing shrinks on phones */
.fig-key { display: grid; gap: var(--s-2) var(--s-6); list-style: none; padding: var(--s-4) 0 0; margin: var(--s-4) 0 0; border-top: 1px solid var(--rule); font: 400 var(--fs-xs)/1.5 var(--sans); color: var(--ink-2); }
@media (min-width: 720px) { .fig-key { grid-template-columns: 1fr 1fr; } }
.fig-key li { display: grid; grid-template-columns: 24px 1fr; gap: var(--s-2); margin: 0; }
.fig-key li b { color: var(--ink); font-weight: 600; }
.fig-key .n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--paper); font: 700 var(--fs-xs)/1 var(--sans); }
@media (max-width: 719px) {
  .fig .lbl { display: none; }
  .fig-lg .mk circle { r: 21px; }
  .fig-lg .mk text { font-size: 21px; }
  .fig .big { font-size: 20px; }
}

/* ---------- Legend ---------- */
.legend { list-style: none; padding: 0; margin: 0; font: 400 var(--fs-xs)/1.4 var(--sans); color: var(--ink); }
.legend li { display: flex; align-items: center; gap: var(--s-2); margin: 0; }
.legend li + li { margin-top: var(--s-2); }
.legend-inline { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.legend-inline li + li { margin-top: 0; }

/* ---------- Tables ---------- */
.table-plate { background: var(--plate); border: 1px solid var(--rule); border-radius: var(--r-2); padding: var(--s-2) var(--s-5) var(--s-3); margin: var(--s-6) 0; }
table { width: 100%; border-collapse: collapse; font: 400 var(--fs-xs)/1.5 var(--sans); color: var(--ink-2); }
caption { text-align: left; font: 600 var(--fs-xs)/1.4 var(--sans); color: var(--ink); padding: var(--s-3) 0; caption-side: top; }
caption span { font-weight: 400; color: var(--ink-3); }
caption .cap-note { display: block; margin-top: 2px; color: var(--ink-2); }
thead th { font-weight: 600; color: var(--ink); text-align: left; vertical-align: bottom; padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 2px solid var(--ink); }
tbody th { text-align: left; font-weight: 600; color: var(--ink); vertical-align: top; padding: var(--s-3) var(--s-4) var(--s-3) 0; }
td { vertical-align: top; padding: var(--s-3) var(--s-4) var(--s-3) 0; }
tbody tr + tr > * { border-top: 1px solid var(--rule); }
tbody th .g { margin-right: 6px; }
td:last-child, th:last-child { padding-right: 0; }
.cell-name { display: flex; gap: var(--s-2); align-items: baseline; }
.cell-name .g { flex: none; position: relative; top: 2px; }

@media (max-width: 719px) {
  .table-plate { padding: var(--s-2) var(--s-4); }
  .stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .stack tr { display: block; padding: var(--s-3) 0; }
  .stack tbody tr + tr { border-top: 1px solid var(--rule); }
  .stack tbody tr + tr > * { border-top: 0; }
  .stack th, .stack td { display: block; padding: 2px 0; }
  .stack tbody th { font-size: var(--fs-base); padding-bottom: var(--s-1); }
  .stack td[data-label]::before { content: attr(data-label); display: block; font-weight: 600; color: var(--ink-3); margin-top: var(--s-2); }
}

/* response meter (qualitative) */
.meter { display: inline-flex; gap: 3px; vertical-align: middle; margin-right: 6px; }
.meter i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--ink-2); display: block; }
.meter i.on { background: var(--ink-2); }
.meter i.half { background: linear-gradient(90deg, var(--ink-2) 50%, transparent 50%); }
.meter-x { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 3px; background: var(--fe); color: var(--plate); font: 700 var(--fs-xs)/1 var(--sans); margin-right: 6px; vertical-align: middle; }
.resp { white-space: nowrap; color: var(--ink); font-weight: 600; }
td[data-label="Response"] { white-space: nowrap; }

/* ---------- Callouts ---------- */
.callout { background: var(--sunk); border-left: 4px solid var(--ink); border-radius: 0 var(--r-2) var(--r-2) 0; padding: var(--s-4) var(--s-5); margin: var(--s-6) 0; max-width: calc(var(--measure) + 48px); }
.callout.fe { border-left-color: var(--fe); }
.callout.al { border-left-color: var(--al); }
.callout-label { display: flex; align-items: center; gap: var(--s-2); font: 600 var(--fs-xs)/1.4 var(--sans); color: var(--ink); margin: 0 0 var(--s-2); }
.callout p:last-child { margin-bottom: 0; }

/* ---------- Publisher line ---------- */
.publine { border-top: 1px solid var(--ink); padding-top: var(--s-3); margin: var(--s-5) 0 0; font: 400 var(--fs-xs)/1.5 var(--sans); color: var(--ink-2); max-width: 48rem; }
.publine b { color: var(--ink); font-weight: 600; margin-right: 4px; }
.table-note { font: 400 var(--fs-xs)/1.5 var(--sans); color: var(--ink-2); margin: var(--s-3) 0 0; }
.table-plate .publine, .plate .publine, .calc-out .publine, .callout .publine, .rfq .publine { max-width: none; }
.callout .publine { margin-top: var(--s-4); }
#wd-rule { white-space: nowrap; }

/* ---------- Article layout (problem hub, technology) ---------- */
.doc-head { padding-block: var(--s-6) var(--s-7); border-bottom: 1px solid var(--rule); }
@media (min-width: 960px) { .doc-head { padding-block: var(--s-7) var(--s-8); } }
.doc-head .lede { margin-bottom: var(--s-5); }
.doc { display: grid; gap: var(--s-6); padding-block: var(--s-7) var(--s-9); }
.rail { font: 400 var(--fs-xs)/1.4 var(--sans); }
.rail-block + .rail-block { margin-top: var(--s-6); }
.rail-title { font: 600 var(--fs-xs)/1.4 var(--sans); color: var(--ink); margin: 0 0 var(--s-3); }
.toc { list-style: none; padding: 0; margin: 0; counter-reset: none; }
.toc li { margin: 0; }
.toc a { display: grid; grid-template-columns: 22px 1fr; gap: var(--s-1); padding: 6px 0 6px 10px; text-decoration: none; color: var(--ink-2); box-shadow: inset 2px 0 0 var(--rule); }
.toc a[aria-current] { color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--ink); }
.toc a[aria-current] .n { color: var(--ink); }
.toc a:hover { color: var(--ink); text-decoration: underline; }
.toc .n { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rail details { border: 1px solid var(--rule); border-radius: var(--r-2); background: var(--plate); padding: 0 var(--s-4); }
.rail summary { cursor: pointer; font: 600 var(--fs-xs)/1 var(--sans); padding: var(--s-4) 0; list-style: none; display: flex; justify-content: space-between; }
.rail summary::-webkit-details-marker { display: none; }
.rail summary::after { content: "+"; font-weight: 400; }
.rail details[open] summary::after { content: "\2212"; }
.rail details[open] { padding-bottom: var(--s-3); }
.rail .desk-only { display: none; }
@media (min-width: 1100px) {
  .doc { grid-template-columns: 13rem minmax(0, 1fr); gap: var(--s-8); }
  .rail-inner { position: sticky; top: var(--s-5); max-height: calc(100vh - 2 * var(--s-5)); overflow-y: auto; overscroll-behavior: contain; }  /* a rail taller than the window scrolls on its own */
  .rail details { display: none; }
  .rail .desk-only { display: block; }
}
.doc-main > section { padding-top: var(--s-7); }
.doc-main > section:first-child { padding-top: 0; }
.doc-main h2 { margin-bottom: var(--s-4); display: flex; gap: var(--s-3); align-items: baseline; }
.doc-main h2 .n { font: 600 var(--fs-xs)/1 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; min-width: 1.5em; position: relative; top: -0.2em; }
.doc-main h3 { margin: var(--s-6) 0 var(--s-2); max-width: var(--measure); }
.doc-main h3 .letter { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--paper); font: 700 var(--fs-xs)/1 var(--sans); margin-right: var(--s-2); vertical-align: 1px; }
.mobile-legend { margin: 0 0 var(--s-5); }
@media (min-width: 1100px) { .mobile-legend { display: none; } }

/* definitions */
.defs { display: grid; gap: var(--s-4); margin: var(--s-5) 0; max-width: var(--measure); }
.defs div { border-left: 2px solid var(--ink); padding-left: var(--s-4); }
.defs dt { font: 600 var(--fs-xs)/1.4 var(--sans); color: var(--ink); }
.defs dd { margin: 0; }

/* recovery vs purity pictogram (HTML, reflows) */
.rp { display: grid; gap: var(--s-5); }
@media (min-width: 720px) { .rp { grid-template-columns: 1.3fr 1fr 1fr; align-items: stretch; } }
.rp-box { border: 1px solid var(--rule); border-radius: var(--r-2); padding: var(--s-4); background: var(--paper); }
.rp-h { font: 600 var(--fs-xs)/1.4 var(--sans); margin: 0 0 var(--s-3); color: var(--ink); }
.rp-dots { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-dots .g { width: 16px; height: 16px; }
.rp-eq { margin-top: var(--s-5); display: grid; gap: var(--s-3); font: 400 var(--fs-xs)/1.5 var(--sans); color: var(--ink-2); }
@media (min-width: 720px) { .rp-eq { grid-template-columns: 1fr 1fr; gap: var(--s-5); } }
.rp-eq div { border-top: 2px solid var(--ink); padding-top: var(--s-2); }
.rp-eq b { display: block; color: var(--ink); font-size: var(--fs-base); margin-bottom: 2px; }

/* Figure 3: the drawing, its key, then the lettered settings in the same plate */
.fig-plate > figure { margin: 0; }
.settings { display: grid; gap: var(--s-5) var(--s-6); margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--rule); }
@media (min-width: 1024px) { .settings { grid-template-columns: 1fr 1fr; } }
.doc-main .settings h3 { margin: 0 0 var(--s-2); }
.settings p { margin: 0; }

/* end of an article: dates and a way to report an error on the page */
.page-end { margin-top: var(--s-8); padding-top: var(--s-3); border-top: 2px solid var(--ink); font: 400 var(--fs-xs)/1.5 var(--sans); color: var(--ink-2); max-width: var(--measure); }
.page-end p { margin: 0; }
.page-end p + p { margin-top: var(--s-1); }
.prose section > p.report { font: 400 var(--fs-xs)/1.5 var(--sans); color: var(--ink-2); margin-top: var(--s-5); }
.report .mail { color: var(--ink); }

/* method page Figure 1: an inert outline of what the directory prints for the worked example */
.shot { display: grid; gap: var(--s-2); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-1); padding: var(--s-4); font: 400 var(--fs-xs)/1.5 var(--sans); color: var(--ink); }
.shot p { margin: 0; }
.shot .shot-tier { font: 600 var(--fs-base)/1.3 var(--sans); border-top: 2px solid var(--ink); padding-top: var(--s-2); margin-top: var(--s-2); }
.shot .shot-tier:first-child { margin-top: 0; }
.shot-item { background: var(--plate); border: 1px solid var(--rule); border-radius: var(--r-2); padding: var(--s-3) var(--s-4); }
.shot .shot-name { font: 500 var(--fs-md)/1.25 var(--serif); margin-bottom: var(--s-1); }
.shot-no { color: var(--ink-2); }
.shot-rest { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-2); padding-top: var(--s-2); border-top: 2px solid var(--ink); font: 600 var(--fs-base)/1.3 var(--sans); }
.shot-pill { font: 600 var(--fs-xs)/1 var(--sans); border: 1.5px solid var(--ink); border-radius: var(--r-1); padding: 8px var(--s-3); }

/* checklists */
.checklist { list-style: none; padding: 0; max-width: var(--measure); }
.checklist li { margin: 0; border-top: 1px solid var(--rule); }
.checklist li:last-child { border-bottom: 1px solid var(--rule); }
.checklist label { display: grid; grid-template-columns: 24px 1fr; gap: var(--s-3); padding: var(--s-3) 0; cursor: pointer; font-size: var(--fs-base); line-height: 1.5; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--ink); }

/* FAQ */
.faq { border-top: 2px solid var(--ink); max-width: calc(var(--measure) + 4rem); margin-top: var(--s-4); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: 1fr 24px; gap: var(--s-4); padding: var(--s-4) 0; font: 500 var(--fs-md)/1.35 var(--serif); }
.faq summary h3 { font: inherit; margin: 0; max-width: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 var(--fs-lg)/1 var(--sans); color: var(--ink-2); text-align: center; }
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 0 var(--s-5); max-width: var(--measure); }
.faq details > div p:last-child { margin-bottom: 0; }

/* two-column fit lists */
.fit { display: grid; gap: var(--s-5); margin: var(--s-5) 0; }
@media (min-width: 720px) { .fit { grid-template-columns: 1fr 1fr; align-items: start; } }
.fit > div { background: var(--plate); border: 1px solid var(--rule); border-radius: var(--r-2); padding: var(--s-5); }
.fit h3 { margin: 0 0 var(--s-3); }
.fit ul { margin: 0; padding-left: 1.1em; font-size: var(--fs-base); }

/* maturity badge */
.badges { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin: 0 0 var(--s-5); }
.maturity { display: inline-flex; align-items: center; gap: var(--s-2); border: 1px solid var(--ink); border-radius: var(--r-1); padding: 6px 10px; font: 400 var(--fs-xs)/1 var(--sans); color: var(--ink-2); }
.maturity b { color: var(--ink); }
.pips { display: inline-flex; gap: 3px; }
.pips i { width: 8px; height: 14px; border: 1.5px solid var(--ink); border-radius: 1px; display: block; }
.pips i.on { background: var(--ink); }

/* interactive figure controls */
.ctrl { display: grid; gap: var(--s-2); margin-top: var(--s-4); font: 400 var(--fs-xs)/1.4 var(--sans); max-width: 30rem; }
.ctrl label { font-weight: 600; color: var(--ink); }
.ctrl-row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-3); align-items: center; color: var(--ink-2); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; margin: 0; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--line); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: var(--ink); border: 3px solid var(--plate); box-shadow: 0 0 0 1.5px var(--ink); }
input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 3px solid var(--plate); box-shadow: 0 0 0 1.5px var(--ink); }
.readout { font: 400 var(--fs-xs)/1.5 var(--sans); color: var(--ink); margin: var(--s-3) 0 0; min-height: 3em; }
.illus { display: inline-block; font: 600 var(--fs-xs)/1 var(--sans); border: 1px dashed var(--ink-2); color: var(--ink-2); border-radius: var(--r-1); padding: 5px 8px; margin-bottom: var(--s-3); }
.fig-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); list-style: none; padding: 0; margin: var(--s-3) 0 0; font: 400 var(--fs-xs)/1.4 var(--sans); color: var(--ink-2); }
.fig-legend li { margin: 0; display: flex; align-items: center; gap: var(--s-2); }
.fig-legend svg { width: 28px; height: 10px; }
@media (min-width: 1024px) {
  .throw { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-6); align-items: center; }
  .throw-side { border-left: 1px solid var(--rule); padding-left: var(--s-6); }
  .throw-side .fig-legend { flex-direction: column; margin-top: 0; }
  .throw-side .ctrl { margin-top: var(--s-5); }
}

/* ---------- Cards (tools, compare) ---------- */
.cards { display: grid; gap: var(--s-5); }
@media (min-width: 720px) { .cards-2 { grid-template-columns: 1fr 1fr; } }
.card { background: var(--plate); border: 1px solid var(--rule); border-radius: var(--r-2); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.card h3 { font: 500 var(--fs-lg)/1.2 var(--serif); }
.card p { margin: 0; color: var(--ink-2); font-size: var(--fs-base); }
.card .actions { margin: auto 0 0; padding-top: var(--s-3); }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.card-top .small { margin: 0; }
/* the tool's own output on its card, at card text size */
.card-out { background: var(--sunk); border-radius: var(--r-1); padding: var(--s-3) var(--s-4); font: 400 var(--fs-base)/1.5 var(--sans); font-variant-numeric: tabular-nums; }
.card .card-out p { color: var(--ink); font: inherit; }
.card .card-out .card-out-l { font: 600 var(--fs-xs)/1.4 var(--sans); color: var(--ink-2); margin-bottom: var(--s-1); }
.card-out-l span { font-weight: 400; color: var(--ink-3); }
.card .card-out .card-out-f { color: var(--ink-2); margin-top: var(--s-1); }
.card-list { margin: 0; padding-left: 1.1em; font-size: var(--fs-base); color: var(--ink-2); }
.card-list li + li { margin-top: 2px; }
.nw { white-space: nowrap; }

/* standards: four claims, each linked to the place on the site that shows it */
.standards { list-style: none; padding: 0; margin: 0; max-width: 48rem; border-top: 2px solid var(--ink); }
.standards li { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px var(--s-5); padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
.standards a { font: 500 var(--fs-md)/1.35 var(--serif); }
.standards span { font: 400 var(--fs-xs)/1.5 var(--sans); color: var(--ink-3); }

/* split section (home) */
.split { display: grid; gap: var(--s-6); }
@media (min-width: 960px) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); } }
/* Home "Who makes it": one sample listing as the directory prints it, inert, in the method page's Figure 1 outline
   (plate, paper well, card), full width under the panel. The card keeps the page's type, not the well's caption type.
   On phones the plate and well drop away so the card keeps the directory's phone width. */
.home-shot { grid-column: 1 / -1; }
.home-shot .shot { font: inherit; }
@media (max-width: 719px) {
  .home-shot.plate, .home-shot .shot { padding: 0; border: 0; background: none; }
}

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--s-5); }
.field { display: grid; gap: 6px; align-content: start; }
.field > label, .form legend { font: 600 var(--fs-xs)/1.4 var(--sans); color: var(--ink); }
.hint { font: 400 var(--fs-xs)/1.5 var(--sans); color: var(--ink-3); margin: 0; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea {
  font: 400 var(--fs-base)/1.4 var(--sans); color: var(--ink); background: var(--plate);
  border: 1.5px solid var(--line); border-radius: var(--r-1); padding: 10px 12px; min-height: 48px; width: 100%;
}
select { height: 48px; padding-block: 0; font-size: var(--fs-base); line-height: 1.4; }
textarea { min-height: 112px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--ink-2); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.form legend { padding: 0; margin-bottom: var(--s-2); }
.opts { display: grid; gap: var(--s-2); font: 400 var(--fs-xs)/1.5 var(--sans); color: var(--ink); }
.opts label { display: grid; grid-template-columns: 22px 1fr; gap: var(--s-2); align-items: start; cursor: pointer; }
.opts label span small { display: block; color: var(--ink-3); font-size: var(--fs-xs); }
/* one-word radio rows: a full touch target each, so the rows need no gap between them */
@media (max-width: 719px) { .opts:has(> label > input[type="radio"]) { gap: 0; } .opts label:has(input[type="radio"]) { min-height: 44px; align-items: center; } }
.row-2 { display: grid; gap: var(--s-5); }
@media (min-width: 720px) { .row-2 { grid-template-columns: 1fr 1fr; } }

.recipients { border: 1.5px solid var(--ink); border-radius: var(--r-2); padding: var(--s-5); background: var(--plate); }
.recipients legend { float: left; width: 100%; font-size: var(--fs-base); }
.recipients legend + * { clear: both; }
.rcp-disclose { font: 400 var(--fs-xs)/1.5 var(--sans); color: var(--ink); margin: 0 0 var(--s-3); padding-left: var(--s-3); border-left: 3px solid var(--ink); }
.rcp-groups { display: grid; gap: var(--s-5); margin-top: var(--s-4); }
@media (min-width: 720px) { .rcp-groups { grid-template-columns: 1fr 1fr; } }
.recipients .rcp-group legend { font-size: var(--fs-xs); margin-bottom: 2px; }
.rcp-group .hint { margin-bottom: var(--s-3); }
.recipients-out { font: 400 var(--fs-xs)/1.5 var(--sans); color: var(--ink); background: var(--sunk); border-radius: var(--r-1); padding: var(--s-3) var(--s-4); margin-top: var(--s-4); }
.recipients-out b { font-weight: 600; }
.form-status { font: 600 var(--fs-xs)/1.5 var(--sans); color: var(--ink); margin: 0; }
.form-status:empty { display: none; }

/* RFQ block */
.rfq { background: var(--plate); border: 1px solid var(--rule); border-radius: var(--r-2); padding: var(--s-6) var(--s-5); margin-top: var(--s-5); }
@media (min-width: 720px) { .rfq { padding: var(--s-7); } }

/* ---------- Contact: ask an engineer (answered at Remcon) vs request quotes (the RFQ) ---------- */
.form[hidden], .ask-done[hidden] { display: none; }
.mail { overflow-wrap: anywhere; }
/* "Questions about your line?" on the guide and technology pages */
.ask { margin-top: var(--s-7); padding-top: var(--s-4); border-top: 2px solid var(--ink); }
.doc-main .ask h3 { margin: 0 0 var(--s-4); }
.ask-grid { display: grid; gap: var(--s-4); }
@media (min-width: 720px) { .ask-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: stretch; } }
.ask-card { background: var(--plate); border: 1px solid var(--rule); border-radius: var(--r-2); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
@media (max-width: 719px) { .ask-card { padding: var(--s-4); } }
.ask-card h4 { font: 500 var(--fs-md)/1.25 var(--serif); }
.ask-card p { margin: 0; color: var(--ink-2); }
.ask-card .publine { margin: var(--s-1) 0 0; }
.ask-card .ask-if { font: 600 var(--fs-xs)/1.4 var(--sans); color: var(--ink); margin-top: var(--s-1); }
.ask-ifs { margin: 0; padding-left: 1.1em; font: 400 var(--fs-xs)/1.5 var(--sans); color: var(--ink-2); }
.ask-ifs li + li { margin-top: var(--s-1); }
.ask-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-3); font: 400 var(--fs-xs)/1.5 var(--sans); }
.ask-line .lab { flex: none; width: 3rem; font-weight: 600; color: var(--ink-3); }
.ask-line .tel { display: inline-flex; align-items: center; min-height: 44px; font: 600 var(--fs-base)/1.2 var(--sans); color: var(--ink); }
.ask-line .mail { font-weight: 600; color: var(--ink); }
@media (max-width: 719px) { .ask-line .mail { display: inline-flex; align-items: center; min-height: 44px; } }  /* as tall as the phone link beside it */
.ask-hours { color: var(--ink-2); }
/* pinned to the card bottom, so both buttons line up (beats .ask-card p { margin: 0 }) */
.ask-card .ask-act { padding-top: var(--s-1); margin-top: auto; }
/* Under the calculator result, and on the directory */
.calc-out .to-ask { margin: 0; }
/* Contact page */
.who p { margin: 0 0 var(--s-3); font: 400 var(--fs-base)/1.5 var(--sans); color: var(--ink); }
.who p + p { color: var(--ink-2); }
.who p:last-child { margin-bottom: 0; }
.who .who-ways { border-top: 1px solid var(--rule); padding-top: var(--s-2); margin-top: var(--s-3); }
.who .ask-line { font: 400 var(--fs-xs)/1.5 var(--sans); color: var(--ink-2); margin: 0; }
.contact-ways { padding-block: var(--s-7) var(--s-8); }
.contact-ways > h2, .contact-other > h2 { margin-bottom: var(--s-5); }
.ways { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
@media (min-width: 960px) { .ways { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.ways-quick { display: grid; gap: var(--s-5); }
@media (min-width: 960px) { .ways-quick { position: sticky; top: var(--s-5); } }
@media (min-width: 720px) and (max-width: 959px) { .ways-quick { grid-template-columns: 1fr 1fr; } }
.way { background: var(--plate); border: 1px solid var(--rule); border-radius: var(--r-2); padding: var(--s-5); }
@media (min-width: 720px) { .way { padding: var(--s-6); } }
.way h3 { font: 500 var(--fs-lg)/1.2 var(--serif); margin: 0 0 var(--s-2); }
/* the card's own lines only, so form hints and errors keep their styles */
.way > p { margin: 0 0 var(--s-3); color: var(--ink-2); }
.way > p:last-child { margin-bottom: 0; }
.way-main { margin: 0; }
.way-main .tel { display: inline-flex; align-items: center; min-height: 48px; font: 600 var(--fs-md)/1.2 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.way-main .mail { display: inline-block; padding-block: var(--s-2); font: 600 var(--fs-md)/1.3 var(--sans); color: var(--ink); }
.way .way-meta { font: 400 var(--fs-xs)/1.5 var(--sans); color: var(--ink-2); }
.way .way-note { font: 400 var(--fs-xs)/1.5 var(--sans); color: var(--ink); background: var(--sunk); border-radius: var(--r-1); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-5); }
.ask-form { max-width: 40rem; }
.ask-form .publine { margin: 0; max-width: none; }
.ask-form [aria-invalid="true"] { border-color: var(--fe); }
.field-error { font: 600 var(--fs-xs)/1.5 var(--sans); color: var(--fe); margin: 0; }
.field-error:empty { display: none; }
.ask-done { display: grid; gap: var(--s-3); max-width: 40rem; }
.ask-done h4 { font: 600 var(--fs-md)/1.3 var(--sans); padding-bottom: var(--s-3); border-bottom: 2px solid var(--ink); }
.ask-done p { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.ask-done .ask-echo-l { font: 600 var(--fs-xs)/1.4 var(--sans); color: var(--ink-2); }
.ask-done .ask-echo { font: 400 var(--fs-base)/1.5 var(--sans); background: var(--sunk); border-left: 3px solid var(--ink); border-radius: 0 var(--r-1) var(--r-1) 0; padding: var(--s-3) var(--s-4); white-space: pre-wrap; overflow-wrap: anywhere; }
.ask-done .btn { justify-self: start; }
.contact-other { border-top: 1px solid var(--rule); padding-block: var(--s-7) var(--s-8); }
.other { display: grid; gap: var(--s-5) var(--s-7); margin: 0; }
@media (min-width: 960px) { .other { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.other div { border-top: 2px solid var(--ink); padding-top: var(--s-3); }
.other dt { font: 600 var(--fs-base)/1.35 var(--sans); color: var(--ink); margin-bottom: var(--s-1); }
.other dd { margin: 0; color: var(--ink-2); }

/* ---------- Calculator ---------- */
.calc { display: grid; gap: 0; background: var(--plate); border: 1px solid var(--rule); border-radius: var(--r-2); overflow: hidden; }
@media (min-width: 960px) { .calc { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.calc-in { padding: var(--s-5); display: grid; gap: var(--s-5); align-content: start; }
.calc-out { padding: var(--s-5); background: var(--sunk); display: grid; gap: var(--s-4); align-content: start; }
@media (min-width: 720px) { .calc-in, .calc-out { padding: var(--s-6); } }
.seg { display: inline-grid; grid-template-columns: 1fr 1fr; border: 1.5px solid var(--ink); border-radius: var(--r-1); overflow: hidden; }
.seg label { position: relative; display: block; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.seg span { display: block; padding: 12px var(--s-4); font: 600 var(--fs-xs)/1.2 var(--sans); text-align: center; color: var(--ink); }
.seg input:checked + span { background: var(--ink); color: var(--paper); }
.seg input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: -6px; box-shadow: inset 0 0 0 6px var(--halo); }
.unit-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; }
.unit-input input { border-radius: var(--r-1) 0 0 var(--r-1); font-variant-numeric: tabular-nums; }
.unit-input .unit { display: grid; place-items: center; min-width: 76px; padding: 0 var(--s-3); border: 1.5px solid var(--line); border-left: 0; border-radius: 0 var(--r-1) var(--r-1) 0; font: 500 var(--fs-xs)/1 var(--sans); color: var(--ink-2); background: var(--sunk); }
.result-label { font: 600 var(--fs-xs)/1.4 var(--sans); color: var(--ink-2); margin: 0; }
.result-num { font: 500 var(--fs-2xl)/1.05 var(--serif); letter-spacing: -0.02em; margin: 0; font-variant-numeric: lining-nums tabular-nums; }
.result-num small { font: 500 var(--fs-base)/1 var(--sans); color: var(--ink-2); letter-spacing: 0; margin-left: 6px; }
.result-sub { font: 400 var(--fs-xs)/1.4 var(--sans); color: var(--ink-2); margin: 4px 0 0; }
.working { font: 400 var(--fs-xs)/1.7 var(--sans); color: var(--ink); background: var(--plate); border-radius: var(--r-1); padding: var(--s-3) var(--s-4); margin: 0; font-variant-numeric: tabular-nums; }
.working div + div { margin-top: var(--s-2); }
.working .lab { display: block; color: var(--ink-3); font-weight: 600; }
.calc-error { font: 600 var(--fs-xs)/1.5 var(--sans); color: var(--fe); margin: 0; min-height: 0; }
.calc-out .publine { margin-top: var(--s-2); }
.calc-in .load { display: grid; gap: var(--s-3); }
.calc-in .load legend { font: 600 var(--fs-xs)/1.4 var(--sans); color: var(--ink); padding: 0; margin-bottom: var(--s-2); }
.row-tight { gap: var(--s-3); }
@media (min-width: 720px) and (max-width: 959px), (min-width: 1100px) { .row-tight { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) and (max-width: 1099px) { .row-tight { grid-template-columns: 1fr; } }
.opt { font-weight: 400; color: var(--ink-3); margin-left: 4px; }
.to-rfq { margin: 0; }
.to-rfq a[hidden] { display: none; }
.calc-section { padding-top: var(--s-7); }
@media (max-width: 719px) {
  .calc-head { padding-bottom: var(--s-5); }
  .calc-section { padding-top: var(--s-4); }
  .lede-more { display: none; }
}
/* C05: Figure 1 sits in the input column, above the fields it defines; the fields carry its letters */
.calc-fig { margin: 0; padding-bottom: var(--s-2); }
.calc-fig .fig-section { max-width: 520px; margin: 0; }
.calc-fig figcaption { font: 400 var(--fs-xs)/1.5 var(--sans); color: var(--ink-2); margin-top: var(--s-2); }
.calc-fig figcaption b { color: var(--ink); font-weight: 600; }
em.var { font-family: var(--serif); font-size: 1.15em; font-weight: 500; color: var(--ink); }

.formula { font: 400 var(--fs-base)/1.6 var(--sans); background: var(--plate); border: 1px solid var(--rule); border-radius: var(--r-2); padding: var(--s-4) var(--s-5); margin: var(--s-4) 0; max-width: var(--measure); }
.formula div + div { margin-top: var(--s-2); }
.formula .sys { display: block; font: 600 var(--fs-xs)/1.4 var(--sans); color: var(--ink-3); }
.steps { font-family: var(--sans); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

/* ---------- Directory ---------- */
/* Header: tighter than an article, so the first listing starts on the first screen; the scope plate fills the right half */
.dir-head { padding-block: var(--s-4) var(--s-5); }
.dir-head .crumbs ol { margin-bottom: var(--s-4); }
.dir-head .kicker { margin-bottom: var(--s-2); }
.dir-head h1 { margin-bottom: var(--s-3); }
.dir-head .lede { margin-bottom: var(--s-3); }
@media (min-width: 960px) {
  .dir-head { padding-block: var(--s-6) var(--s-6); }
  .dir-head .crumbs ol { margin-bottom: var(--s-5); }
  .dir-head .kicker { margin-bottom: var(--s-3); }
  .dir-head h1 { margin-bottom: var(--s-4); }
}
.dir-scope { background: var(--plate); border: 1px solid var(--rule); border-radius: var(--r-2); padding: var(--s-4) var(--s-5); font: 400 var(--fs-xs)/1.5 var(--sans); color: var(--ink-2); }
.dir-scope p { margin: 0; }
.dir-scope .tag { margin-bottom: var(--s-3); }
.dir-scope .scope-line + .scope-line { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--rule); }
/* Phones: results come first. The kicker and lede (both restated by the summary line and the results line) drop out, and
   the plate keeps only the prototype chip: the results line links the method and every listing shows its read date. */
/* The "‹ Home" back link drops too: on this top-level page the wordmark and the current "Directory" nav item already
   give both, and without it a pre-filtered link shows the first listing's tag and name above the action bar. */
@media (max-width: 719px) {
  .doc-head.dir-head { padding-block: var(--s-3) var(--s-2); }
  .dir-head .crumbs { display: none; }
  .dir-head .kicker, .dir-head .lede { display: none; }
  .dir-head h1 { margin-bottom: var(--s-2); }
  .dir-head .doc-head-grid { gap: var(--s-2); }
  .dir-head .dir-disclose { margin-bottom: 0; }
  .dir-scope { background: none; border: 0; padding: 0; }
  .dir-scope .tag { margin: 0; }
  .dir-scope .scope-line { display: none; }
}
.dir { display: grid; gap: var(--s-3); padding-block: var(--s-2) var(--s-9); }
@media (min-width: 720px) { .dir { gap: var(--s-6); padding-top: var(--s-6); } }
@media (min-width: 960px) { .dir { grid-template-columns: 16rem minmax(0, 1fr); gap: var(--s-7); } }
/* The filter panel sits in a details element: one summary line on phones, always open (summary hidden) from 720px */
.filter-panel { align-self: start; min-width: 0; }
.filter-sum { display: none; }
@media (max-width: 719px) {
  .filter-sum {
    display: block; position: relative; cursor: pointer; list-style: none;
    font: 400 var(--fs-xs)/1.5 var(--sans); color: var(--ink); padding: var(--s-3) 44px var(--s-3) var(--s-4); min-height: 48px;
    background: var(--plate); border: 1px solid var(--line); border-radius: var(--r-2);
  }
  .filter-sum::-webkit-details-marker { display: none; }
  .filter-sum .filter-edit { font-weight: 600; text-decoration: underline; text-underline-offset: 0.18em; white-space: nowrap; }
  .filter-sum::after { content: "+"; position: absolute; right: var(--s-4); top: 50%; transform: translateY(-50%); font: 400 var(--fs-lg)/1 var(--sans); color: var(--ink-2); }
  .filter-panel[open] > .filter-sum { border-radius: var(--r-2) var(--r-2) 0 0; border-bottom-color: var(--rule); }
  .filter-panel[open] > .filter-sum::after { content: "\2212"; }
  .filter-panel[open] > .filters { border-top: 0; border-radius: 0; border-color: var(--line); }
  /* the Order and strict controls, moved in by the page script, close the panel */
  .filter-panel > .order-controls { background: var(--plate); border: 1px solid var(--line); border-top: 1px solid var(--rule); border-radius: 0 0 var(--r-2) var(--r-2); padding: var(--s-3) var(--s-4); font: 400 var(--fs-xs)/1.5 var(--sans); }
  .dir .tier { margin-top: var(--s-5); padding-top: var(--s-2); margin-bottom: var(--s-2); }
  .dir .results-bar { margin-bottom: var(--s-2); }
  .dir { gap: var(--s-2); padding-top: 0; }
}
.filters { background: var(--plate); border: 1px solid var(--rule); border-radius: var(--r-2); padding: var(--s-5); align-self: start; }
@media (min-width: 960px) { .filter-panel { position: sticky; top: var(--s-5); max-height: calc(100vh - 48px); overflow-y: auto; } }
/* Shorter windows would clip the panel (about 980px tall) inside an inner scroll with no visible scrollbar */
@media (min-width: 960px) and (max-height: 1040px) { .filter-panel { position: static; max-height: none; overflow: visible; } }
.filters h2 { font: 600 var(--fs-base)/1.3 var(--sans); margin: 0 0 var(--s-4); }
.filters fieldset + fieldset { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.filters legend { float: left; width: 100%; }
.filters legend + .opts { clear: both; }
@media (max-width: 959px) {
  .filters { padding: var(--s-4); }
  .filters h2 { margin-bottom: var(--s-3); }
  .filters fieldset + fieldset { margin-top: var(--s-3); padding-top: var(--s-3); }
  .filters legend { margin-bottom: var(--s-2); }
  .filters .opts { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .filters .opts label { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 8px; border: 1px solid var(--line); border-radius: var(--r-1); background: var(--plate); line-height: 1.3; }
  .filters .opts label:has(input:checked) { border-color: var(--ink); background: var(--sunk); box-shadow: inset 0 0 0 1px var(--ink); }
  .filters .opts input { margin: 0; }
  .filters .btn { margin-top: var(--s-4); }
}
.filters .opts .g { margin-right: 6px; }
.more-filters { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.more-filters > summary { display: none; }
@media (max-width: 959px) {
  .more-filters { margin-top: var(--s-3); border-top: 1px solid var(--rule); padding-top: var(--s-3); }
  .more-filters > summary {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s-2); cursor: pointer; list-style: none;
    font: 600 var(--fs-xs)/1.4 var(--sans); color: var(--ink); padding: var(--s-2) 0;
  }
  .more-filters > summary::-webkit-details-marker { display: none; }
  .more-filters > summary span { font-weight: 400; color: var(--ink-3); }
  .more-filters > summary::after { content: "+"; margin-left: auto; font: 400 var(--fs-lg)/1 var(--sans); color: var(--ink-2); }
  .more-filters[open] > summary::after { content: "\2212"; }
  .more-filters[open] > summary { margin-bottom: var(--s-2); }
}
.filters .btn { width: 100%; justify-content: center; margin-top: var(--s-5); min-height: 44px; }
.results-bar { display: grid; gap: var(--s-3); margin: 0 0 var(--s-5); font: 400 var(--fs-xs)/1.5 var(--sans); color: var(--ink-2); }
.results-bar b { color: var(--ink); }
.count-line { margin: 0; max-width: var(--measure); }
.order-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--rule); color: var(--ink); }
.order-field { display: flex; align-items: center; gap: var(--s-2); }
.order-field label { font-weight: 600; }
.order-field select { width: auto; min-height: 44px; height: 44px; font-size: var(--fs-xs); }
.strict { display: grid; grid-template-columns: 22px 1fr; gap: var(--s-2); align-items: start; cursor: pointer; }
/* Directory disclosure: one sentence, body size, above every listing */
.dir-disclose { font-size: var(--fs-base); color: var(--ink); max-width: var(--measure); margin: 0 0 var(--s-4); }
/* Ordered groups: tier headings, then the collapsed group of listings that fail the gate */
.tier { font: 600 var(--fs-base)/1.3 var(--sans); color: var(--ink); margin: var(--s-6) 0 var(--s-3); padding-top: var(--s-3); border-top: 2px solid var(--ink); }
#results > .tier:first-child { margin-top: 0; }
.rest { margin-top: var(--s-6); border-top: 2px solid var(--ink); }
.rest > summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); padding: var(--s-3) 0; cursor: pointer; list-style: none; }
.rest > summary::-webkit-details-marker { display: none; }
.rest-h { font: 600 var(--fs-base)/1.3 var(--sans); color: var(--ink); margin: 0; flex: 1 1 14rem; }
.rest-act { font: 600 var(--fs-xs)/1 var(--sans); color: var(--ink); border: 1.5px solid var(--ink); border-radius: var(--r-1); padding: 10px var(--s-4); }
.rest > summary:hover .rest-act { background: var(--sunk); }
.rest .hide, .rest[open] .show { display: none; }
.rest[open] .hide { display: inline; }
.rest[open] > summary { margin-bottom: var(--s-3); }
.rest .listing { background: var(--sunk); border-style: dashed; border-color: var(--line); }
.rest .listing .match { background: var(--plate); }
/* Listings are full-width rows. They stack (name, description, spec rows, actions) until the results column is about
   720px wide; from a 1180px window, name and description sit left, spec rows right, and the actions run underneath. */
.listings { display: grid; gap: var(--s-4); }
.listing { background: var(--plate); border: 1px solid var(--rule); border-radius: var(--r-2); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
@media (max-width: 719px) { .listing { padding: var(--s-4); } }  /* phone card padding, as on plates and cards */
.listing h4 { font: 500 var(--fs-lg)/1.2 var(--serif); }
.listing .listing-name { font: 500 var(--fs-lg)/1.2 var(--serif); color: var(--ink); }  /* the home picture's name: no heading */
/* Match line: what the listing lists first, then the ticked filters not found */
.listing .match { display: grid; gap: var(--s-1); font: 400 var(--fs-xs)/1.5 var(--sans); padding: var(--s-3) var(--s-4); background: var(--sunk); border-radius: var(--r-1); }
.listing .match[hidden] { display: none; }
.listing .match p { font: inherit; color: var(--ink); }
.listing .match p.no { color: var(--ink-2); }
.listing .match b { font-weight: 600; }
.listing p { margin: 0; color: var(--ink-2); font-size: var(--fs-base); }
.listing dl { display: grid; grid-template-columns: 7.5rem 1fr; align-content: start; gap: var(--s-2) var(--s-3); margin: 0; font: 400 var(--fs-xs)/1.5 var(--sans); padding-top: var(--s-3); border-top: 1px solid var(--rule); }
.listing dt { color: var(--ink-3); font-weight: 600; }
.listing dd { margin: 0; color: var(--ink); }
.listing dd .streams { display: flex; flex-wrap: wrap; gap: 2px var(--s-3); }
.listing dd .streams span { display: inline-flex; align-items: center; gap: 5px; }
/* The pages a real listing was compiled from: folded under its spec rows. */
.pages-read { font: 400 var(--fs-xs)/1.5 var(--sans); }
.pages-read summary { cursor: pointer; color: var(--ink-2); width: fit-content; min-height: 24px; }
.pages-read ul { margin: var(--s-2) 0 0; padding-left: 1.25em; display: grid; gap: var(--s-1); }
.pages-read a { color: var(--ink); overflow-wrap: anywhere; }
.listing-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); font: 500 var(--fs-xs)/1.5 var(--sans); margin-top: auto; padding-top: var(--s-2); }
.listing-links .quiet { color: var(--ink-2); font-weight: 400; }
@media (max-width: 719px) { .listing-links .quiet { display: inline-flex; align-items: center; min-height: 44px; } }  /* a per-listing action: a full touch target */
.rfq-inc { flex: 1 1 100%; display: grid; gap: var(--s-2); justify-items: start; }
.listing .rfq-note { font: 400 var(--fs-xs)/1.5 var(--sans); color: var(--ink-2); max-width: 30rem; }
.listing .rfq-role { font: 400 var(--fs-xs)/1.5 var(--sans); color: var(--ink); max-width: 30rem; }
.listing .rfq-role b { font-weight: 600; }
@media (min-width: 1180px) {
  .listing {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--s-6); row-gap: var(--s-2);
    grid-template-rows: auto auto auto auto auto 1fr auto; padding: var(--s-4) var(--s-5);
    grid-template-areas: "tag spec" "name spec" "desc spec" "role spec" "match spec" ". spec" "links links";
  }
  .listing > .tag { grid-area: tag; justify-self: start; }
  .listing > h4, .listing > .listing-name { grid-area: name; }
  .listing > .listing-desc { grid-area: desc; }
  .listing > .rfq-role { grid-area: role; }
  .listing > .match { grid-area: match; margin-top: var(--s-1); }
  .listing > dl { grid-area: spec; border-top: 0; padding-top: 0; }
  .listing > .listing-links { grid-area: links; margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--rule); align-items: flex-end; justify-content: space-between; }
  .listing-links .rfq-inc { flex: 0 1 42rem; }
  .listing .rfq-note { max-width: none; }
}
.compiled { border-top: 1px solid var(--rule); padding-block: var(--s-7) var(--s-8); }
.compiled .section-head { margin-bottom: var(--s-4); }
.empty { font: 400 var(--fs-base)/1.5 var(--sans); color: var(--ink-2); background: var(--plate); border: 1px dashed var(--line); border-radius: var(--r-2); padding: var(--s-6); }
.compile { display: grid; gap: var(--s-5); }
@media (min-width: 960px) { .compile { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); align-items: start; } }
.compile .callout { margin: 0; max-width: none; }
.split .callout { align-self: start; margin: 0; }
.split .section-head { align-self: start; }  /* stretched to the panel's height, it inflated the button to fill the row */
.hero + .section { border-top: 1px solid var(--rule); }

/* ---------- Footer ---------- */
.site-foot { border-top: 2px solid var(--ink); padding-block: var(--s-7) var(--s-6); font: 400 var(--fs-xs)/1.5 var(--sans); color: var(--ink-2); }
.foot-grid { display: grid; gap: var(--s-6); }
@media (min-width: 960px) { .foot-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-8); } }
.foot-brand p { margin: var(--s-3) 0 0; max-width: 22rem; }
.foot-nav { display: grid; gap: var(--s-5); }
@media (min-width: 720px) { .foot-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.foot-nav h2 { font: 600 var(--fs-xs)/1.4 var(--sans); color: var(--ink); margin: 0 0 var(--s-2); }
.foot-nav ul { list-style: none; padding: 0; margin: 0; }
.foot-nav li + li { margin-top: 6px; }
.foot-nav .soon { color: var(--ink-3); }
/* Phones: each footer link is a 44px row; At a glance links sit in running text, so they grow by padding only
   (inline padding widens the touch area to about 26px without moving any line). */
@media (max-width: 719px) {
  .foot-nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot-nav li + li { margin-top: 0; }
  .glance dd a { padding-block: 5px; }
}
.foot-legal { margin-top: var(--s-7); }
.foot-legal .publine { margin-top: 0; }
.foot-legal p { margin: var(--s-3) 0 0; }

/* figure sizing */
.fig-section { max-width: 600px; margin-inline: auto; }
.fig-throw { max-width: 680px; }

/* article header with an at-a-glance panel */
.doc-head-grid { display: grid; gap: var(--s-6); }
@media (min-width: 960px) { .doc-head-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: start; } }
.doc-head-grid .meta { margin-bottom: 0; }
.doc-head .meta:last-child { margin-bottom: 0; }
@media (min-width: 960px) {
  .doc-head-grid.dh-3 { grid-template-rows: auto 1fr; grid-template-areas: "main glance" "meta glance"; row-gap: 0; }
  .dh-3 > .dh-main { grid-area: main; }
  .dh-3 > .glance { grid-area: glance; }
  .dh-3 > .dh-meta { grid-area: meta; }
}
@media (max-width: 959px) { .doc-head-grid.dh-3 { gap: var(--s-5); } .dh-3 .lede, .dh-3 .badges { margin-bottom: 0; } .dh-3 .badges { margin-top: var(--s-3); } }
@media (max-width: 719px) { .doc-head { padding-top: var(--s-4); } }
.glance { background: var(--plate); border: 1px solid var(--rule); border-radius: var(--r-2); padding: var(--s-5); }
@media (max-width: 719px) { .glance { padding: var(--s-4); } }
.glance-title { display: flex; align-items: center; gap: var(--s-2); font: 600 var(--fs-xs)/1.4 var(--sans); color: var(--ink); margin: 0 0 var(--s-3); padding-bottom: var(--s-3); border-bottom: 2px solid var(--ink); }
.glance dl { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--s-2) var(--s-4); margin: 0; font: 400 var(--fs-xs)/1.5 var(--sans); }
.glance dt { color: var(--ink-3); font-weight: 600; }
.glance dd { margin: 0; color: var(--ink); }
.glance dl > :nth-child(n+3) { border-top: 1px solid var(--rule); padding-top: var(--s-2); }
@media (max-width: 479px) { .glance dl { grid-template-columns: 1fr; gap: 0; } .glance dl > dt { padding-top: var(--s-2); } .glance dl > dt:first-child { padding-top: 0; } .glance dl > dd:nth-child(n) { padding-top: 0; border-top: 0; margin-bottom: var(--s-2); } }

/* ---------- October 19 industrial preview: home + eddy-current reference ---------- */
/* Scoped until the two-page design review; the other pages keep their existing contract. */
:root.industrial {
  --paper: #f6f7f4; --plate: #ffffff; --sunk: #e9edef;
  --ink: #101316; --ink-2: #3f4a54; --ink-3: #56616b;
  --rule: #d2d9dd; --line: #71808b;
  --accent: #477bff; --action: #2b5ce0; --link: #2b5ce0;
  --serif: "Space Grotesk", "Helvetica Neue", sans-serif;
  --sans: "Inter", "Helvetica Neue", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}
@media (prefers-color-scheme: dark) {
  :root.industrial:not([data-theme="light"]) {
    --paper: #101316; --plate: #232a30; --sunk: #1a2026;
    --ink: #f6f7f4; --ink-2: #c1c8ce; --ink-3: #9ca8b2;
    --rule: #3a444e; --line: #84919c; --link: #91b0ff;
  }
}
:root.industrial[data-theme="dark"],
.industrial :is(.site-head, .site-foot, .hero, .doc-head) {
  --paper: #101316; --plate: #232a30; --sunk: #1a2026;
  --ink: #f6f7f4; --ink-2: #c1c8ce; --ink-3: #9ca8b2;
  --rule: #3a444e; --line: #84919c; --link: #91b0ff;
  --al: #3fbfd0; --fe: #f08262; --fi: #dcb04e;
  --gl: #74c17a; --fm: #b398ee; --res: #8e9a96;
}
.industrial body { font-family: var(--sans); }
.industrial :is(h1, h2, h3, h4) { font-family: var(--serif); font-weight: 700; font-variation-settings: normal; }
.industrial :is(.site-head, .site-foot, .hero, .doc-head) { background: var(--paper); color: var(--ink); }
.industrial .proto { background: #1a2026; color: #c1c8ce; }
.industrial .brand { font: 700 21px/1 var(--serif); letter-spacing: -0.06em; text-transform: uppercase; gap: 10px; }
.industrial .brand svg { width: 34px; height: 34px; }
.industrial .brand-guide { color: var(--accent); }
.industrial .head-inner { gap: 20px; }
.industrial .main-nav ul { gap: 20px; }
.industrial .main-nav a[aria-current] { box-shadow: inset 0 -2px 0 var(--accent); }
.industrial .btn-primary { background: var(--action); border-color: var(--action); color: #f6f7f4; }
.industrial .btn-primary:hover { background: #2451c9; border-color: #2451c9; }
.industrial .btn-secondary { border-color: var(--line); }
.industrial .btn-secondary:hover { border-color: var(--link); }
.industrial .btn { transition: background-color 150ms, border-color 150ms; }
.industrial .kicker { font: 500 13px/1.5 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.industrial .hero .kicker { margin-bottom: 20px; }
.industrial .display { font-size: 36px; font-weight: 700; line-height: 1.05; letter-spacing: -0.045em; text-transform: uppercase; text-wrap: initial; }
.industrial .display span { color: var(--accent); }
.industrial .hero .dek { font-size: 18px; line-height: 1.6; max-width: 35rem; }
.industrial .hero-fig { min-width: 0; }
.industrial .hero-fig .plate { border-top: 2px solid var(--accent); background: var(--sunk); }
.industrial .plant-photo { margin-bottom: 24px; }
.industrial .plant-photo img { display: block; width: 100%; height: auto; }
.industrial .hero-fig figcaption { padding-top: 16px; border-top: 1px solid var(--rule); }
.industrial .problems-label { font: 500 14px/1.4 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.industrial .prob-title { font-family: var(--serif); font-weight: 700; }
.industrial .hero .tag-live { background: transparent; color: var(--link); border: 1px solid var(--line); border-radius: 30px; }
.industrial .home-page .section-head h2 { text-transform: uppercase; font-size: 32px; letter-spacing: -0.03em; }
.industrial .section-head { max-width: 52rem; }
.industrial .card { border-radius: 4px; }
.industrial .card h3 { font-weight: 700; }
.industrial .card-out { border-left: 2px solid var(--link); }
.industrial .card-out-f { font-family: var(--mono); }
.industrial .site-foot { border-top: 1px solid var(--rule); }
.industrial .foot-nav h2 { font-family: var(--mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; }
.industrial .doc-head {
  /* Extend the dark band across the viewport without changing the article container. */
  box-shadow: 0 0 0 100vmax var(--paper);
  clip-path: inset(0 -100vmax);
}
.industrial .doc-head h1 { letter-spacing: -0.035em; }
.industrial .doc-head .lede { font-size: 18px; line-height: 1.6; }
.industrial .glance { border-radius: 4px; border-top: 2px solid var(--accent); }
.industrial .glance-title { font-family: var(--mono); font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--line); }
.industrial .glance dt { font-family: var(--mono); font-size: 13px; font-weight: 500; }
.industrial .glance dd a { color: var(--link); }
.industrial .rail-title { font-family: var(--mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; }
.industrial .toc a { grid-template-columns: 28px 1fr; gap: 8px; padding-block: 10px; }
.industrial .toc .n { font-family: var(--mono); border: 1px solid var(--line); border-radius: 50%; width: 24px; height: 24px; display: grid; place-items: center; font-size: 12px; }
.industrial .toc a[aria-current] { box-shadow: inset 3px 0 0 var(--link); }
.industrial .toc a[aria-current] .n { background: var(--action); color: #f6f7f4; border-color: var(--action); }
.industrial .doc-main h2 .n { font-family: var(--mono); color: var(--link); }
.industrial .fit > div { border-top: 2px solid var(--link); }
.industrial .fit > div + div { border-top-color: var(--line); }
.industrial .plate { border-radius: 4px; }
.industrial .table-plate { border-radius: 4px; }
.industrial .prose > section > p a { text-decoration-color: var(--link); }

/* Equipment photos and conceptual illustrations carry individual provenance labels. */
.industrial .tech-cards { display: grid; gap: 16px; margin-bottom: 32px; }
.industrial .tech-card { display: flex; flex-direction: column; text-decoration: none; border: 1px solid var(--rule); background: var(--plate); border-radius: 4px; overflow: hidden; }
.industrial .tech-card:hover { border-color: var(--link); }
.industrial .tech-art { display: block; background: #101316; padding: 24px; border-bottom: 1px solid var(--rule); }
.industrial .tech-art svg { display: block; width: 100%; height: 120px; }
.industrial .tech-photo { padding: 0; }
.industrial .tech-photo img { display: block; width: 100%; height: 168px; object-fit: cover; }
.industrial .tech-photo img[src*="eddy-current"] { object-fit: contain; }
.industrial .image-credit { padding: 10px 20px 0; font: 400 13px/1.5 var(--sans); color: var(--ink-3); }
.industrial .tech-card-copy { padding: 20px; display: grid; grid-template-columns: 1fr 32px; gap: 12px; }
.industrial .tech-card h3 { font-size: 21px; line-height: 1.15; }
.industrial .tech-card p { font: 400 15px/1.5 var(--sans); color: var(--ink-2); margin: 0; grid-column: 1 / -1; }
.industrial .tech-arrow { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; font-size: 18px; }
.industrial .tech-card:hover .tech-arrow { background: var(--action); border-color: var(--action); color: #f6f7f4; }
.industrial .tech-note { font: 400 13px/1.5 var(--mono); color: var(--ink-3); }
@media (min-width: 720px) {
  .industrial .display { font-size: 56px; }
  .industrial .tech-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .industrial .tech-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .industrial .hero-grid { column-gap: 48px; }
}
@media (max-width: 959px) {
  .industrial .head-inner { gap: 0 12px; }
  .industrial .brand { font-size: 18px; }
}
@media (max-width: 719px) {
  .industrial .brand { font-size: 17px; gap: 7px; }
  .industrial .brand svg { width: 28px; height: 28px; }
  .industrial .brand span { font-size: inherit; }
  .industrial .main-nav ul { gap: 12px; }
  .industrial .hero { padding-top: 24px; }
  .industrial .hero .kicker { font-size: 12px; letter-spacing: 0.02em; margin-bottom: 16px; }
  .industrial .hero .glyphs { display: none; }
  .industrial .hero-grid { gap: 24px; }
  .industrial .home-page .section-head h2 { font-size: 28px; }
  .industrial .doc-head h1 { font-size: 30px; margin-bottom: 16px; }
  .industrial .doc-head .lede { line-height: 1.5; }
  .industrial .doc-head-grid.dh-3 { gap: 16px; }
}
@media (max-width: 359px) {
  .industrial .brand { font-size: 14px; gap: 6px; }
  .industrial .head-inner { column-gap: 8px; }
  .industrial .main-nav a { font-size: 14px; }
  .industrial .display { font-size: 32px; }
}