/* mykola.tech — one stylesheet, one design system.
 *
 * DIRECTION: INSTRUMENT, NOT ESSAY
 *
 * The page this replaced was cream paper, light-weight serif, hairline rules:
 * an editorial surface selling production systems. This one is built on the
 * characteristic artifact of the work itself — the surface you watch a running
 * system on.
 *
 *   Ground     cool light steel, not cream — daylight technical documentation
 *   Readout    one dark lit panel inset into it. That contrast IS the design;
 *              everything else stays quiet so the panel carries the page.
 *   Type       IBM Plex superfamily — drawn for a technology company, with a
 *              condensed cut for dense headings and a mono for data.
 *   Signal     instrument amber, deliberately off the warm-clay that every
 *              editorial template reaches for.
 *
 * ── Two rules this file exists to hold ──────────────────────────────────────
 *
 * 1. The dark panel is a MATERIAL, not a colour. `--dark` dresses the rail, the
 *    readout, the method pipeline and the closing block, and nothing else. A
 *    fourth dark surface means the panel has stopped being the signature.
 *
 * 2. `--amber` NEVER sets text on a light ground. Measured: #C98A00 on
 *    --ground is 2.43:1, on --panel 2.70:1, on #fff 2.95:1 — all three fail
 *    WCAG AA, and the failing token carries the whole micro-label layer. No
 *    single amber clears 4.5:1 on both grounds (darkening it to pass on light
 *    drops it below 4.5 on dark), so the direction's own logic decides it:
 *    amber stays lit on the panel, and takes a darker cut when it has to be
 *    ink. Use --amber-ink for that. Non-text amber (rules, fills, the button
 *    ground, a highlighted diagram node) keeps --amber and meets the 3:1
 *    non-text minimum.
 *
 * ── Delivery ────────────────────────────────────────────────────────────────
 *
 * No CDN, no framework, no analytics, no build step. The webfonts are served
 * from this origin because the footer states "no cookies and runs no
 * analytics", and a request to a third-party font CDN is a request to a third
 * party. IBM Plex is OFL-1.1; fonts/LICENSE.txt travels with the files.
 *
 * Each face ships as two subsets, Latin1 and Pi, with the unicode-range values
 * taken verbatim from the IBM Plex packages' own CSS. Latin1 (144KB across
 * seven faces, about what the three retired faces cost) carries the page.
 * Pi carries U+2190-2199 — which is where `→` lives, and the tagline is
 * "Your domain expertise + one engineer → production system." Without the Pi
 * subset that one glyph falls back to a system font in the middle of the
 * headline. Because a browser fetches a subset only when a glyph in its range
 * actually renders, Pi costs nothing on a page with no arrow on it.
 *
 * Every colour, spacing and type value is declared as a custom property inside
 * one :root block. No raw hex appears outside it.
 */

@font-face{
  font-family:"IBM Plex Sans";
  src:url("/fonts/ibmplexsans-400-latin1.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face{
  font-family:"IBM Plex Sans";
  src:url("/fonts/ibmplexsans-400-pi.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0E3F, U+2000-200D, U+2015, U+2028-2029, U+202F, U+2032-2033, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+ECE0, U+EFCC, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"IBM Plex Sans";
  src:url("/fonts/ibmplexsans-500-latin1.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face{
  font-family:"IBM Plex Sans";
  src:url("/fonts/ibmplexsans-500-pi.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0E3F, U+2000-200D, U+2015, U+2028-2029, U+202F, U+2032-2033, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+ECE0, U+EFCC, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"IBM Plex Sans";
  src:url("/fonts/ibmplexsans-600-latin1.woff2") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face{
  font-family:"IBM Plex Sans";
  src:url("/fonts/ibmplexsans-600-pi.woff2") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0E3F, U+2000-200D, U+2015, U+2028-2029, U+202F, U+2032-2033, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+ECE0, U+EFCC, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"IBM Plex Sans Condensed";
  src:url("/fonts/ibmplexcond-600-latin1.woff2") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face{
  font-family:"IBM Plex Sans Condensed";
  src:url("/fonts/ibmplexcond-600-pi.woff2") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0E3F, U+2000-200D, U+2015, U+2028-2029, U+202F, U+2032-2033, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+ECE0, U+EFCC, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"IBM Plex Sans Condensed";
  src:url("/fonts/ibmplexcond-700-latin1.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face{
  font-family:"IBM Plex Sans Condensed";
  src:url("/fonts/ibmplexcond-700-pi.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0E3F, U+2000-200D, U+2015, U+2028-2029, U+202F, U+2032-2033, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+ECE0, U+EFCC, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("/fonts/ibmplexmono-400-latin1.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("/fonts/ibmplexmono-400-pi.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
  unicode-range:U+03C0, U+0E3F, U+2000-200D, U+2010-2012, U+2015, U+2028-2029, U+202F, U+2032-2033, U+203E, U+205F, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+2219-221A, U+221E, U+222B, U+2236, U+2248, U+2260, U+2264-2265, U+2400-2421, U+2500-259F, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+3000, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("/fonts/ibmplexmono-500-latin1.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("/fonts/ibmplexmono-500-pi.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
  unicode-range:U+03C0, U+0E3F, U+2000-200D, U+2010-2012, U+2015, U+2028-2029, U+202F, U+2032-2033, U+203E, U+205F, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+2219-221A, U+221E, U+222B, U+2236, U+2248, U+2260, U+2264-2265, U+2400-2421, U+2500-259F, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+3000, U+FEFF, U+FFFD;
}

:root{
  /* ── ground and panel ─────────────────────────────────────────────────── */
  --ground:#E7E9EC;
  --panel:#F4F5F7;
  --white:#FFFFFF;
  --dark:#14171C;
  --dark-2:#1D222A;

  /* ── ink ──────────────────────────────────────────────────────────────── */
  --ink:#14171C;
  --ink-2:#454C57;
  /* #767E8A in the source mockup: 3.37:1 on --ground, AA-large only, and it
     carries every 11-12px label on the page. Darkened to clear 4.5:1. */
  --ink-3:#616874;
  --on-dark:#E7E9EC;
  --on-dark-2:#8E97A3;

  /* ── rules ────────────────────────────────────────────────────────────── */
  --line:#C9CDD4;
  --line-2:#DDE0E5;
  --line-dark:#2E353F;

  /* ── signal ───────────────────────────────────────────────────────────── */
  --amber:#C98A00;      /* on --dark only, or as a non-text fill */
  --amber-ink:#8A5E00;  /* amber as ink on light: 4.69 ground, 5.23 panel */
  --live:#0E7A57;       /* on --panel: 4.89 */
  --live-lit:#1FA378;   /* the same green on --dark: 5.62 */

  /* ── type ─────────────────────────────────────────────────────────────── */
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --cond:"IBM Plex Sans Condensed","IBM Plex Sans",-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --w-reg:400; --w-mid:500; --w-semi:600; --w-bold:700;

  /* ── spacing ──────────────────────────────────────────────────────────── */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --wrap:1120px;
  --nav-h:44px;
  --hair:1px;
  --t-fast:.15s;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important}
}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s6)}

/* mono data face — tabular so columns of figures line up */
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* visually hidden, and the skip link — on every page */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-9999px;top:0;z-index:60}
.skip:focus{
  left:0;background:var(--dark);color:var(--on-dark);
  font-family:var(--mono);font-size:13px;padding:var(--s3) var(--s4);
}

/* ============ nav rail ====================================================
   Dark, slim, sticky. The same material as the readout panel, so the chrome
   reads as part of the instrument rather than as page furniture. */
.rail{
  position:sticky;top:0;z-index:50;
  background:var(--dark);
  border-bottom:var(--hair) solid var(--line-dark);
}
.rail .wrap{height:var(--nav-h);display:flex;align-items:center;gap:var(--s5)}
.rail .id{
  font-family:var(--mono);font-size:12px;font-weight:var(--w-mid);
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--on-dark);text-decoration:none;
  display:flex;align-items:center;gap:var(--s2);white-space:nowrap;
}
/* CSS-drawn, not a glyph: U+25CF is outside both shipped subsets, and a status
   lamp that falls back to a system font is a status lamp of a different size. */
.dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--live-lit);
  box-shadow:0 0 0 3px rgba(31,163,120,.22);
  flex:0 0 auto;
}
.rail nav{margin-left:auto}
.rail ul{list-style:none;margin:0;padding:0;display:flex;gap:var(--s5)}
.rail a.lnk{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--on-dark-2);text-decoration:none;
  border-bottom:var(--hair) solid transparent;padding-bottom:2px;
  transition:color var(--t-fast),border-color var(--t-fast);white-space:nowrap;
}
.rail a.lnk:hover,.rail a.lnk:focus-visible{color:var(--on-dark);border-bottom-color:var(--amber)}
.rail a.lnk[aria-current="page"]{color:var(--on-dark);border-bottom-color:var(--on-dark)}

/* ============ hero ======================================================== */
/* The bottom padding is deliberately small: every hero is followed by a
   `section.band`, which brings its own --s9 of top padding. Matching the top
   value here stacked the two and left a ~190px hole on any page whose hero
   carries no readout to fill it (fit, about, the legal pages). */
.hero{padding:var(--s9) 0 var(--s5)}
.kicker,.title{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 var(--s5);
}
h1,.tagline{
  font-family:var(--cond);font-weight:var(--w-bold);
  font-size:clamp(38px,6.2vw,76px);
  line-height:.96;letter-spacing:-.02em;
  margin:0 0 var(--s5);max-width:18ch;
}
h1 em,.tagline em{font-style:normal;color:var(--amber-ink)}
.sub,.stand{
  font-size:clamp(17px,1.6vw,20px);
  color:var(--ink-2);margin:0 0 var(--s5);max-width:56ch;
}
.thesis{color:var(--ink-2);margin:0 0 var(--s6);max-width:60ch}

/* ============ readout =====================================================
   The signature. A lit panel inset into daylight. Aggregate figures only. */
.readout{background:var(--dark);color:var(--on-dark);border-radius:3px;overflow:hidden}
.readout .head{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s5);
  border-bottom:var(--hair) solid var(--line-dark);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-dark-2);
}
.readout .head .right{
  margin-left:auto;color:var(--live-lit);
  display:flex;align-items:center;gap:var(--s2);
}
.figs{display:grid;grid-template-columns:repeat(5,1fr);margin:0;padding:0}
.figs > div{padding:var(--s5);border-right:var(--hair) solid var(--line-dark)}
.figs > div:last-child{border-right:0}
.figs .n{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:clamp(24px,3vw,34px);font-weight:var(--w-mid);
  line-height:1.05;color:var(--white);display:block;
}
.figs .n .unit{font-size:.5em;color:var(--on-dark-2);margin-left:.35em}
.figs .l{
  display:block;margin-top:var(--s2);
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--on-dark-2);
}
.readout .foot{
  padding:var(--s3) var(--s5);
  border-top:var(--hair) solid var(--line-dark);
  font-family:var(--mono);font-size:12px;color:var(--on-dark-2);
}

/* ============ buttons ===================================================== */
.actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin:var(--s6) 0 0}
.btn{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-family:var(--mono);font-size:13px;letter-spacing:.04em;
  text-decoration:none;padding:11px var(--s4);border-radius:2px;
  border:var(--hair) solid var(--amber);background:var(--amber);color:var(--dark);
  font-weight:var(--w-mid);
  transition:background var(--t-fast),color var(--t-fast);
}
.btn:hover,.btn:focus-visible{background:transparent;color:var(--ink)}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--ink-2)}
.btn.ghost:hover,.btn.ghost:focus-visible{border-color:var(--ink);color:var(--ink)}
.btn.on-dark{border-color:var(--amber);background:var(--amber);color:var(--dark)}
.btn.on-dark:hover,.btn.on-dark:focus-visible{background:transparent;color:var(--amber)}

/* ============ section frame =============================================== */
section.band{padding:var(--s9) 0}
section.band + section.band{border-top:var(--hair) solid var(--line)}
.shead{
  display:flex;align-items:baseline;gap:var(--s4);
  margin:0 0 var(--s7);padding-bottom:var(--s3);
  border-bottom:2px solid var(--ink);
}
.shead .tag{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--amber-ink);flex:0 0 auto;
}
.shead h2{
  font-family:var(--cond);font-weight:var(--w-semi);
  font-size:clamp(24px,3vw,34px);line-height:1.05;letter-spacing:-.01em;margin:0;
}
.shead .note{
  margin-left:auto;font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);flex:0 0 auto;
}

/* body copy inside a band */
.lede{margin:0 0 var(--s6);max-width:66ch;color:var(--ink-2)}
.prose{max-width:66ch}
.prose p{margin:0 0 var(--s4);color:var(--ink-2)}
.prose p:last-child{margin-bottom:0}
.prose h3{
  font-family:var(--cond);font-weight:var(--w-semi);font-size:19px;
  line-height:1.15;margin:var(--s6) 0 var(--s3);color:var(--ink);
}

/* ============ systems =====================================================
   Each card carries a schematic of the shape the tacit knowledge became.
   The diagram is the evidence; the prose is the caption. */
.sysgrid{display:grid;gap:var(--s5);grid-template-columns:repeat(2,1fr)}
.card{
  background:var(--panel);
  border:var(--hair) solid var(--line);
  border-radius:3px;display:flex;flex-direction:column;
}
.card.span2{grid-column:1 / -1}
.card .top{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s4) var(--s5);
  border-bottom:var(--hair) solid var(--line);
}
.card .name{font-family:var(--cond);font-weight:var(--w-semi);font-size:19px;letter-spacing:-.01em}
.card .name a{text-decoration:none;border-bottom:var(--hair) solid var(--line)}
.card .name a:hover,.card .name a:focus-visible{border-bottom-color:var(--amber-ink);color:var(--amber-ink)}
.card .domain{
  margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);
}
.card .fig{padding:var(--s5);background:var(--white);border-bottom:var(--hair) solid var(--line)}
.card .fig svg{display:block;width:100%;height:auto}
.card .body{padding:var(--s4) var(--s5);display:flex;flex-direction:column;gap:var(--s2)}
.card .src{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.card .src b{
  color:var(--ink-3);font-weight:var(--w-reg);letter-spacing:.06em;
  text-transform:uppercase;font-size:11px;display:block;margin-bottom:2px;
}
.card .shape{font-size:14px;color:var(--ink-2);margin:0}

/* svg diagram primitives — schematic only, never a real topology */
.d-box{fill:var(--white);stroke:var(--ink);stroke-width:1.25}
.d-box-fill{fill:var(--ground);stroke:var(--ink);stroke-width:1.25}
.d-box-hi{fill:var(--amber);stroke:var(--ink);stroke-width:1.25}
.d-t{font-family:var(--mono);font-size:9.5px;fill:var(--ink)}
.d-t-s{font-family:var(--mono);font-size:8px;fill:var(--ink-3)}
.d-line{stroke:var(--ink);stroke-width:1.25;fill:none}
.d-dash{stroke:var(--ink-3);stroke-width:1;fill:none;stroke-dasharray:3 3}

/* ============ method pipeline ============================================= */
.pipe{background:var(--dark);border-radius:3px;padding:var(--s6) var(--s5);margin-bottom:var(--s7)}
.pipe svg{display:block;width:100%;height:auto}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s5)}
.step .no{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--amber-ink);display:block;margin-bottom:var(--s2);
}
.step h3{
  font-family:var(--cond);font-weight:var(--w-semi);font-size:17px;
  line-height:1.15;margin:0 0 var(--s2);
}
.step p{margin:0 0 var(--s3);font-size:14px;color:var(--ink-2)}
.step .cut{
  font-family:var(--mono);font-size:11px;color:var(--ink-3);
  padding-top:var(--s3);border-top:var(--hair) solid var(--line);margin:0;
}
.step .cut b{color:var(--amber-ink);font-weight:var(--w-mid)}

/* ============ services spec sheet ========================================= */
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.spec{
  border:var(--hair) solid var(--line);border-radius:3px;
  background:var(--panel);display:flex;flex-direction:column;
}
.spec h3{
  font-family:var(--cond);font-weight:var(--w-semi);font-size:19px;line-height:1.15;
  margin:0;padding:var(--s4) var(--s5);border-bottom:var(--hair) solid var(--line);
}
.spec .txt{padding:var(--s4) var(--s5);flex:1}
.spec p{margin:0 0 var(--s3);font-size:14px;color:var(--ink-2)}
.spec p:last-child{margin-bottom:0}
.spec .ev{
  margin:0;padding:var(--s4) var(--s5);
  border-top:var(--hair) solid var(--line);background:var(--white);
  font-family:var(--mono);font-size:12px;color:var(--ink-2);
}
.spec .ev b{
  display:block;color:var(--amber-ink);font-weight:var(--w-mid);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:var(--s2);
}
.terms{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  margin-top:var(--s5);border:var(--hair) solid var(--line);
  border-radius:3px;background:var(--white);
}
.terms div{padding:var(--s4) var(--s5);border-right:var(--hair) solid var(--line)}
.terms div:last-child{border-right:0}
.terms dt{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 var(--s2);
}
.terms dd{margin:0;font-size:14px;font-weight:var(--w-mid)}
.excl{
  margin-top:var(--s5);padding:var(--s4) var(--s5);
  border-left:3px solid var(--ink);background:var(--panel);
}
.excl .hd{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 var(--s3);
}
.excl ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.excl li{font-size:14px;color:var(--ink-2)}
.excl li b{
  display:block;font-family:var(--mono);font-size:12px;
  color:var(--ink);font-weight:var(--w-mid);margin-bottom:2px;
}

/* ============ fit checklist =============================================== */
.fitgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.fitcol{border:var(--hair) solid var(--line);border-radius:3px;background:var(--panel)}
.fitcol .hd{
  padding:var(--s3) var(--s5);border-bottom:var(--hair) solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  display:flex;align-items:center;gap:var(--s2);margin:0;
}
.fitcol.yes .hd{color:var(--live)}
.fitcol.no .hd{color:var(--ink-3)}
.fitcol.yes .hd .dot{background:var(--live);box-shadow:0 0 0 3px rgba(14,122,87,.18)}
.fitcol ul{margin:0;padding:var(--s4) var(--s5);list-style:none;display:flex;flex-direction:column;gap:var(--s4)}
.fitcol li{font-size:15px;color:var(--ink-2);display:flex;gap:var(--s3);align-items:flex-start}
.fitcol li .mk{font-family:var(--mono);font-size:13px;flex:0 0 auto;line-height:1.5}
.fitcol.yes li .mk{color:var(--live)}
.fitcol.no li .mk{color:var(--ink-3)}

/* ============ tables (the Pattern, and any spec-sheet table) ============== */
.dtable{width:100%;border-collapse:collapse;font-size:14px}
.dtable th,.dtable td{
  text-align:left;padding:var(--s3) var(--s4) var(--s3) 0;
  vertical-align:top;border-bottom:var(--hair) solid var(--line);
}
.dtable thead th{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);font-weight:var(--w-reg);
}
.dtable tbody th{font-weight:var(--w-mid);color:var(--ink)}
.fence{
  margin:var(--s5) 0 0;padding:var(--s4) var(--s5);
  font-size:14px;color:var(--ink-2);
  border-left:3px solid var(--line);background:var(--panel);
}

/* ============ about ======================================================= */
.about{display:grid;grid-template-columns:280px 1fr;gap:var(--s7);align-items:start}
.about img{
  display:block;width:100%;height:auto;border-radius:3px;
  border:var(--hair) solid var(--line);filter:grayscale(1) contrast(1.05);
}
.about p{margin:0 0 var(--s4);color:var(--ink-2);max-width:66ch}
.about p:last-child{margin-bottom:0}

/* ============ close ======================================================= */
.close{background:var(--dark);color:var(--on-dark);border-radius:3px;padding:var(--s8) var(--s7)}
.close h2{
  font-family:var(--cond);font-weight:var(--w-bold);
  font-size:clamp(28px,4vw,44px);line-height:1;margin:0 0 var(--s4);max-width:18ch;
}
.close p{color:var(--on-dark-2);margin:0 0 var(--s5);max-width:56ch}
.close .hand{
  margin:var(--s6) 0 0;padding-top:var(--s5);
  border-top:var(--hair) solid var(--line-dark);
  font-family:var(--mono);font-size:13px;color:var(--on-dark-2);max-width:70ch;
}
.close .hand a{color:var(--amber);text-decoration:none;border-bottom:var(--hair) solid transparent}
.close .hand a:hover,.close .hand a:focus-visible{border-bottom-color:var(--amber)}

/* ============ footer ====================================================== */
footer{padding:var(--s7) 0 var(--s8);border-top:var(--hair) solid var(--line);margin-top:var(--s9)}
footer p{margin:0 0 var(--s2);font-family:var(--mono);font-size:12px;color:var(--ink-3)}
footer .legal a{
  color:var(--ink-2);text-decoration:none;margin-right:var(--s4);
  border-bottom:var(--hair) solid var(--line-2);
}
footer .legal a:hover,footer .legal a:focus-visible{border-bottom-color:var(--ink)}

/* ============ narrow ====================================================== */
@media (max-width:960px){
  .wrap{padding:0 var(--s5)}
  .figs{grid-template-columns:repeat(2,1fr)}
  .figs > div{border-bottom:var(--hair) solid var(--line-dark)}
  .figs > div:nth-child(2n){border-right:0}
  .sysgrid{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .specs{grid-template-columns:1fr}
  .terms{grid-template-columns:repeat(2,1fr)}
  .terms div:nth-child(2n){border-right:0}
  .terms div{border-bottom:var(--hair) solid var(--line)}
  .excl ul{grid-template-columns:1fr}
  .fitgrid{grid-template-columns:1fr}
  .about{grid-template-columns:1fr;gap:var(--s5)}
  .about img{max-width:240px}
  /* The rail scrolls sideways instead of pushing the page wider. min-width:0
     is the load-bearing bit — without it the flex item refuses to shrink below
     its content and the whole document gains a horizontal scrollbar. */
  .rail .id{flex:0 0 auto}
  .rail nav{margin-left:auto;flex:1 1 auto;min-width:0}
  .rail ul{gap:var(--s4);flex-wrap:nowrap;justify-content:flex-end;overflow-x:auto;scrollbar-width:none}
  .rail ul::-webkit-scrollbar{display:none}
  .rail li{flex:0 0 auto}
  .close{padding:var(--s7) var(--s5)}
  section.band{padding:var(--s7) 0}
  .hero{padding:var(--s7) 0 var(--s6)}
  .shead{flex-wrap:wrap;gap:var(--s2) var(--s4)}
  .shead .note{margin-left:0;width:100%}
  .dtable{font-size:13px}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr}
  .figs{grid-template-columns:1fr}
  .figs > div:nth-child(n){border-right:0}
  .terms{grid-template-columns:1fr}
}