/* m-ashraf.com: one stylesheet, no build step.
   The look comes from fibre test gear: steel-grey paper and ink, like a printed OTDR
   report, with the yellow of a single-mode fibre jacket as the only signal colour.
   Light is the default; dark (the instrument screen) follows the OS or the header toggle. */

/* ---------- Fonts (self-hosted, Latin subset) ---------- */
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("../fonts/barlow-sc-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("../fonts/barlow-sc-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Red Hat Mono"; src: url("../fonts/redhat-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Red Hat Mono"; src: url("../fonts/redhat-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  --bg: #eef1f3;
  --panel: #f9fafb;
  --panel-2: #e3e8ec;
  --ink: #12161b;
  --ink-2: #39424c;
  --ink-3: #5a646e;
  --rule: #d2d9df;
  --rule-2: #aeb8c1;
  --signal: #ffc400;        /* single-mode jacket yellow: fills and lines, never text on paper */
  --signal-hover: #f2b900;
  --signal-ink: #12161b;    /* text on yellow */
  --signal-edge: #12161b;   /* outline that keeps yellow visible on pale paper */
  --signal-line: #c99300;   /* link underlines */
  --signal-text: #7a5200;   /* the accent when it has to be text */
  --key-fill: #fff3c4;
  --key-line: #a87400;
  --mark-bg: #ffd84d;
  --mark-ink: #12161b;
  --trace: #12161b;
  --grid: rgba(18, 22, 27, 0.07);
  --grid-major: rgba(18, 22, 27, 0.14);
  --focus: #12161b;
  --brand-bg: #12161b;
  --brand-edge: #12161b;
  --header-bg: rgba(238, 241, 243, 0.9);
  --shadow: 0 1px 0 rgba(18, 22, 27, 0.04), 0 12px 32px rgba(18, 22, 27, 0.08);
  /* Data colours: reference palette slots 1-3 (also fibres 1-3 of the colour code) */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  /* Status colours: always shown with a text label */
  --good: #11823b;
  --warning: #d18f00;
  --serious: #e0703a;
  --critical: #c8312b;
  --idle: #8a949e;
  /* TIA-598 fibre colour code: the work index F01-F09 is numbered like fibres in a cable */
  --fc-1: #2a78d6; --fc-2: #eb6834; --fc-3: #1baf7a; --fc-4: #8b5a2b; --fc-5: #75818d;
  --fc-6: #ffffff; --fc-7: #d03b3b; --fc-8: #12161b; --fc-9: #ffc400;
  --radius: 4px;
  --radius-sm: 2px;
  --wrap: 1160px;
  --gutter: 16px;
  --font-sans: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Barlow Semi Condensed", "Barlow", "Arial Narrow", system-ui, sans-serif;
  --font-mono: "Red Hat Mono", ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --bg: #0e1216;
    --panel: #141a1f;
    --panel-2: #1a2128;
    --ink: #e9edf0;
    --ink-2: #b5bec7;
    --ink-3: #8b959f;
    --rule: #252d35;
    --rule-2: #3a454f;
    --signal-hover: #ffd133;
    --signal-edge: #ffc400;
    --signal-line: #ffc400;
    --signal-text: #ffd24d;
    --key-fill: rgba(255, 196, 0, 0.1);
    --key-line: #ffc400;
    --mark-bg: rgba(255, 196, 0, 0.18);
    --mark-ink: #ffe08a;
    --trace: #ffc400;
    --grid: rgba(233, 237, 240, 0.06);
    --grid-major: rgba(233, 237, 240, 0.12);
    --focus: #ffc400;
    --brand-edge: #3a454f;
    --header-bg: rgba(14, 18, 22, 0.88);
    --shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 14px 36px rgba(0, 0, 0, 0.4);
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --good: #3ccf6e;
    --warning: #f0a92b;
    --serious: #f08a5d;
    --critical: #ff6b5e;
    --idle: #6b7681;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1216;
  --panel: #141a1f;
  --panel-2: #1a2128;
  --ink: #e9edf0;
  --ink-2: #b5bec7;
  --ink-3: #8b959f;
  --rule: #252d35;
  --rule-2: #3a454f;
  --signal-hover: #ffd133;
  --signal-edge: #ffc400;
  --signal-line: #ffc400;
  --signal-text: #ffd24d;
  --key-fill: rgba(255, 196, 0, 0.1);
  --key-line: #ffc400;
  --mark-bg: rgba(255, 196, 0, 0.18);
  --mark-ink: #ffe08a;
  --trace: #ffc400;
  --grid: rgba(233, 237, 240, 0.06);
  --grid-major: rgba(233, 237, 240, 0.12);
  --focus: #ffc400;
  --brand-edge: #3a454f;
  --header-bg: rgba(14, 18, 22, 0.88);
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 14px 36px rgba(0, 0, 0, 0.4);
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --good: #3ccf6e;
  --warning: #f0a92b;
  --serious: #f08a5d;
  --critical: #ff6b5e;
  --idle: #6b7681;
}

@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }
@media (min-width: 1600px) { :root { --wrap: 1280px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-line: underline; text-decoration-color: var(--signal-line); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 1px; }
::selection { background: var(--signal); color: var(--signal-ink); }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; line-height: 1.05; letter-spacing: -0.005em; text-wrap: balance; }
p { margin: 0; }
p, li, dd { text-wrap: pretty; }
strong { font-weight: 600; color: var(--ink); }
mark { padding: 0 0.16em; border-radius: 1px; background: var(--mark-bg); color: var(--mark-ink); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
code { padding: 0.05em 0.35em; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--panel-2); font-family: var(--font-mono); font-size: 0.88em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.eyebrow { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; line-height: 1.5; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 8px 14px; border: 1px solid var(--signal-edge); border-radius: var(--radius-sm); background: var(--signal); color: var(--signal-ink); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* Fibre IDs: "F01" plus the fibre's colour, the way cables are labelled */
.fid { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; line-height: 1; letter-spacing: 0.06em; color: var(--ink-3); white-space: nowrap; }
.fc { display: inline-block; width: 10px; height: 10px; flex: none; border: 1px solid var(--rule-2); border-radius: 50%; background: var(--fc, var(--idle)); }
.fc-1 { --fc: var(--fc-1); } .fc-2 { --fc: var(--fc-2); } .fc-3 { --fc: var(--fc-3); }
.fc-4 { --fc: var(--fc-4); } .fc-5 { --fc: var(--fc-5); } .fc-6 { --fc: var(--fc-6); }
.fc-7 { --fc: var(--fc-7); } .fc-8 { --fc: var(--fc-8); } .fc-9 { --fc: var(--fc-9); }

/* "Live" and "open to work": a status dot that always comes with words */
.status { display: inline-flex; align-items: center; gap: 8px; }
.status::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--good); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--rule); background: var(--header-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: box-shadow 0.3s ease; }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07); }
.site-header .wrap { display: flex; align-items: center; gap: 10px; height: 58px; }
.brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; color: var(--ink); font-family: var(--font-mono); font-size: 0.95rem; font-weight: 500; text-decoration: none; }
.brand-mark { width: 26px; height: 26px; flex: none; }
.mark-bg { fill: var(--brand-bg); stroke: var(--brand-edge); stroke-width: 1; }
.mark-trace { fill: none; stroke: #ffc400; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a { padding: 9px 9px; border-radius: var(--radius-sm); color: var(--ink-2); font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; }
.nav a:hover { background: var(--panel-2); color: var(--ink); }
.nav a[aria-current="page"], .nav a.is-active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--signal); }
.nav a { transition: color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; }
.theme-toggle { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 1px solid var(--rule-2); border-radius: var(--radius-sm); background: transparent; color: var(--ink-2); cursor: pointer; }
.theme-toggle:hover { border-color: var(--ink); color: var(--ink); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }
}
@media (max-width: 559px) { .nav .nav-about { display: none; } }
@media (max-width: 379px) { .brand-text { display: none; } }

/* ---------- Buttons ---------- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--rule-2); border-radius: var(--radius-sm); background: transparent; color: var(--ink); font: 600 0.95rem/1.2 var(--font-sans); letter-spacing: 0.01em; text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.btn:hover { border-color: var(--ink); background: var(--panel); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn-primary { border-color: var(--signal-edge); background: var(--signal); color: var(--signal-ink); }
.btn-primary:hover { border-color: var(--signal-edge); background: var(--signal-hover); color: var(--signal-ink); }
.text-link { font-weight: 600; }

/* ---------- Home: hero ---------- */
.hero { padding-block: 30px 0; }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.hero-meta .status { color: var(--ink); }
.hero h1 { margin-top: 14px; font-size: clamp(2.85rem, 8.4vw + 0.4rem, 7rem); line-height: 0.92; letter-spacing: -0.01em; text-transform: uppercase; }
.hero-lede { max-width: 40rem; margin-top: 20px; color: var(--ink-2); font-size: clamp(1.12rem, 0.5vw + 1rem, 1.3rem); line-height: 1.55; }
.hero-lede strong { font-weight: 600; }
.hero .actions { margin-top: 26px; }
@media (min-width: 960px) { .hero { padding-block: 60px 0; } }

/* The career trace: an OTDR plot. The trace scales with the box; the flags and labels
   are HTML placed in percentages, so they stay sharp and readable at any width. */
.otdr { margin-top: 40px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--panel); }
.otdr-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; padding: 10px 14px; border-bottom: 1px solid var(--rule); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; color: var(--ink-3); }
/* units keep their case: λ, nm and dB must never be uppercased */
.otdr-head h2 { margin-right: auto; font: inherit; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.otdr-plot { padding: 36px 14px 34px; overflow: hidden; overflow: clip; }
.otdr-area { position: relative; height: clamp(150px, 24vw, 280px); container-type: inline-size; }
.otdr-area > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.otdr-grid { fill: none; stroke: var(--grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.otdr-grid-major { fill: none; stroke: var(--grid-major); stroke-width: 1; vector-effect: non-scaling-stroke; }
.otdr-trace { fill: none; stroke: var(--trace); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.otdr-flags, .otdr-x { margin: 0; padding: 0; list-style: none; }
.otdr-flags li { position: absolute; left: var(--x); top: -8px; height: calc(var(--y) + 8px); border-left: 1px dashed var(--ink-3); }
.otdr-flags span { position: absolute; top: -21px; left: -10px; display: grid; place-items: center; width: 19px; height: 19px; border: 1px solid var(--signal-edge); border-radius: 1px; background: var(--signal); color: var(--signal-ink); font: 500 0.7rem/1 var(--font-mono); }
.otdr-flags .ev1 { --x: 3.7%; --y: 18.3%; --t: 0.037; }
.otdr-flags .ev2 { --x: 25.2%; --y: 25.9%; --t: 0.252; }
.otdr-flags .ev3 { --x: 43.0%; --y: 32.9%; --t: 0.430; }
.otdr-flags .ev4 { --x: 56.5%; --y: 38.5%; --t: 0.565; }
.otdr-flags .ev5 { --x: 76.0%; --y: 45.7%; --t: 0.760; }
.otdr-flags .ev6 { --x: 85.0%; --y: 49.9%; --t: 0.850; }
.otdr-flags .ev7 { --x: 91.8%; --y: 53.1%; --t: 0.918; }
.otdr-x li { position: absolute; top: calc(100% + 9px); left: var(--x); transform: translateX(-50%); font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-3); }
.otdr-x .x2021 { --x: 4%; } .otdr-x .x2022 { --x: 19%; } .otdr-x .x2023 { --x: 34%; } .otdr-x .x2024 { --x: 49%; }
.otdr-x .x2025 { --x: 64%; } .otdr-x .x2026 { --x: 79%; } .otdr-x .x2027 { --x: 94%; }
.otdr-scan { display: none; }
.otdr-note { max-width: 76ch; padding: 0 14px 12px; color: var(--ink-3); font-size: 0.875rem; line-height: 1.5; }

/* the one orchestrated moment: the trace is acquired left to right on load */
@media (prefers-reduced-motion: no-preference) {
  .otdr-area > svg.otdr-live { animation: otdr-draw 2.4s linear 0.3s both; }
  .otdr-scan { position: absolute; top: -10px; bottom: 0; left: 0; display: block; width: 2px; margin-left: -1px; background: var(--signal); animation: otdr-scan 2.4s linear 0.3s both; pointer-events: none; }
  .otdr-flags li { animation: otdr-flag 0.4s ease-out both; animation-delay: calc(0.3s + var(--t) * 2.4s); }
}
@keyframes otdr-draw { from { clip-path: inset(-20px 100% -20px 0); } to { clip-path: inset(-20px 0 -20px 0); } }
@keyframes otdr-scan { from { transform: translateX(0); opacity: 1; } 96% { opacity: 1; } to { transform: translateX(100cqw); opacity: 0; } }
@keyframes otdr-flag { from { opacity: 0; transform: translateY(-6px); } }
/* once the trace is drawn, its last event, "now", keeps a slow pulse */
@media (prefers-reduced-motion: no-preference) {
  .otdr-flags .ev7 span { animation: flag-pulse 2.2s ease-out 3s infinite; }
}
@keyframes flag-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 196, 0, 0.6); } 80%, 100% { box-shadow: 0 0 0 8px rgba(255, 196, 0, 0); } }

/* event table, as an OTDR prints it under the trace */
.otdr-events { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.otdr-events li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; grid-template-areas: "no meta read" "no text text"; gap: 3px 12px; padding: 11px 14px; border-bottom: 1px solid var(--rule); }
.otdr-events-head { display: none; }
.otdr-events li:last-child { border-bottom: 0; }
.ev-no { grid-area: no; display: grid; place-items: center; align-self: start; width: 19px; height: 19px; margin-top: 2px; border: 1px solid var(--signal-edge); border-radius: 1px; background: var(--signal); color: var(--signal-ink); font: 500 0.7rem/1 var(--font-mono); }
.ev-type { display: none; }
.ev-pos { grid-area: meta; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; line-height: 1.9; letter-spacing: 0.04em; color: var(--ink-3); }
.ev-text { grid-area: text; color: var(--ink-2); font-size: 0.98rem; line-height: 1.5; }
.ev-text strong { color: var(--ink); }
.ev-read { grid-area: read; justify-self: end; font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500; line-height: 1.9; white-space: nowrap; color: var(--ink-3); }
.ev-read mark { padding: 1px 6px; font-size: 0.85rem; }
.ev-read .status { color: var(--ink); }
@media (min-width: 820px) {
  .otdr-events-head { display: grid; padding: 8px 14px; border-top: 1px solid var(--rule); font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
  .otdr-events li, .otdr-events-head { grid-template-columns: 2.2rem 7.5rem 5.6rem minmax(0, 1fr) 8.5rem; grid-template-areas: none; align-items: baseline; gap: 16px; }
  .otdr-events-head > *, .otdr-events li > * { grid-area: auto; }
  .otdr-events li { padding-block: 10px; }
  .ev-no { align-self: center; margin-top: 0; }
  .ev-type { display: block; font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-3); }
  .otdr-events-head span:last-child, .ev-read { justify-self: end; text-align: right; }
}

/* with a mouse: a flag names its event, and an event row lights its flag on the trace */
@media (hover: hover) {
  /* the label takes no space until it shows, so it can never widen the page */
  .otdr-flags span::after { content: attr(data-label); position: absolute; top: -1px; left: calc(100% + 6px); z-index: 3; display: none; padding: 3px 7px; border-radius: 1px; background: var(--ink); color: var(--bg); font: 500 0.7rem/1.3 var(--font-mono); white-space: nowrap; pointer-events: none; }
  .otdr-flags .ev5 span::after, .otdr-flags .ev6 span::after, .otdr-flags .ev7 span::after { left: auto; right: calc(100% + 6px); }
  .otdr-flags span:hover::after { display: block; }
  .otdr-flags li:hover { z-index: 4; }
  /* the OTDR cursor (site.js adds it on mouse devices): a line and a date readout */
  .otdr-cursor { position: absolute; top: -8px; bottom: 0; left: 0; z-index: 2; width: 0; border-left: 1px solid var(--ink); opacity: 0; pointer-events: none; transition: opacity 0.15s ease; }
  .otdr-cursor.is-on { opacity: 1; }
  .otdr-cursor-label { position: absolute; bottom: 8px; left: 6px; padding: 2px 7px; border-radius: 1px; background: var(--ink); color: var(--bg); font: 500 0.7rem/1.4 var(--font-mono); white-space: nowrap; }
  .otdr-cursor-label.flip { left: auto; right: 6px; }
  .otdr-flags li.is-hit { border-left-style: solid; border-left-color: var(--ink); }
  .otdr-flags li.is-hit span { border-color: var(--ink); background: var(--ink); color: var(--bg); }
  .otdr-events li { transition: background-color 0.15s ease; }
  .otdr-events li:hover,
  .otdr:has(.ev1 span:hover) .otdr-events li:nth-child(1), .otdr:has(.ev2 span:hover) .otdr-events li:nth-child(2),
  .otdr:has(.ev3 span:hover) .otdr-events li:nth-child(3), .otdr:has(.ev4 span:hover) .otdr-events li:nth-child(4),
  .otdr:has(.ev5 span:hover) .otdr-events li:nth-child(5), .otdr:has(.ev6 span:hover) .otdr-events li:nth-child(6),
  .otdr:has(.ev7 span:hover) .otdr-events li:nth-child(7) { background: var(--panel-2); }
  .otdr:has(.otdr-events li:nth-child(1):hover) .otdr-flags .ev1, .otdr:has(.otdr-events li:nth-child(2):hover) .otdr-flags .ev2,
  .otdr:has(.otdr-events li:nth-child(3):hover) .otdr-flags .ev3, .otdr:has(.otdr-events li:nth-child(4):hover) .otdr-flags .ev4,
  .otdr:has(.otdr-events li:nth-child(5):hover) .otdr-flags .ev5, .otdr:has(.otdr-events li:nth-child(6):hover) .otdr-flags .ev6,
  .otdr:has(.otdr-events li:nth-child(7):hover) .otdr-flags .ev7 { border-left-style: solid; border-left-color: var(--ink); }
  .otdr-events li:hover .ev-no,
  .otdr:has(.otdr-events li:nth-child(1):hover) .otdr-flags .ev1 span, .otdr:has(.otdr-events li:nth-child(2):hover) .otdr-flags .ev2 span,
  .otdr:has(.otdr-events li:nth-child(3):hover) .otdr-flags .ev3 span, .otdr:has(.otdr-events li:nth-child(4):hover) .otdr-flags .ev4 span,
  .otdr:has(.otdr-events li:nth-child(5):hover) .otdr-flags .ev5 span, .otdr:has(.otdr-events li:nth-child(6):hover) .otdr-flags .ev6 span,
  .otdr:has(.otdr-events li:nth-child(7):hover) .otdr-flags .ev7 span { border-color: var(--ink); background: var(--ink); color: var(--bg); }
}

/* ---------- Sections ---------- */
.section { padding-top: 80px; }
.section-head { display: grid; gap: 12px; max-width: 48rem; }
.section-head h2 { font-size: clamp(2rem, 2.6vw + 1.2rem, 3.1rem); }
.section-head p:not(.eyebrow) { max-width: 42rem; color: var(--ink-2); font-size: 1.08rem; }
.sub-title { margin-bottom: 14px; font-size: 1.35rem; }
.sub-label { margin-bottom: 12px; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
@media (min-width: 960px) { .section { padding-top: 120px; } }

/* ---------- Home: work as spec sheets ---------- */
.spec { display: grid; gap: 20px; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--rule-2); }
.spec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.spec-head h3 { flex: 1 1 auto; font-size: clamp(2rem, 2.4vw + 1.25rem, 2.9rem); }
.spec-head h3 a { text-decoration: none; }
.spec-head h3 a:hover { text-decoration: underline; text-decoration-color: var(--signal-line); text-decoration-thickness: 3px; }
.spec-head .fid, .spec-kicker { flex-basis: 100%; }
.spec-kicker { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; line-height: 1.5; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.spec-media { position: relative; align-self: start; min-width: 0; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--panel-2); }
.spec-media .topo { max-height: 270px; }
.spec-media > img, .spec-media > video, .spec-media > svg { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.spec-media > .media-tag { position: absolute; left: 10px; bottom: 10px; padding: 4px 8px; border-radius: var(--radius-sm); background: rgba(14, 18, 22, 0.82); color: #e9edf0; font: 500 0.7rem/1.3 var(--font-mono); letter-spacing: 0.04em; }
.spec-body { display: grid; align-content: start; gap: 18px; min-width: 0; }
.spec-body > p { max-width: 38rem; color: var(--ink-2); }
.spec-table { margin: 0; border-top: 1px solid var(--rule); }
.spec-table div { display: grid; grid-template-columns: 7.6rem minmax(0, 1fr); gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.spec-table dt { padding-top: 2px; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; line-height: 1.6; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.spec-table dd { margin: 0; color: var(--ink); font-size: 0.98rem; line-height: 1.45; }
.spec-table .val { font-family: var(--font-mono); font-size: 0.95rem; font-weight: 500; }
.spec-note { color: var(--ink-3); font-size: 0.875rem; }
@media (min-width: 960px) {
  .spec { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 22px 44px; margin-top: 64px; }
  .spec-head { grid-column: 1 / -1; }
  .spec-head .fid { flex-basis: auto; align-self: center; }
  .spec-head h3 { flex: 0 1 auto; }
  .spec-kicker { flex-basis: auto; margin-left: auto; }
}

/* field work: photographs with figure numbers, like a site survey report */
.field-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.field-strip img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--panel-2); }
.field-strip figcaption { margin-top: 8px; color: var(--ink-2); font-size: 0.9rem; line-height: 1.45; }
.field-strip figcaption b { display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
@media (min-width: 820px) { .field-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
.spec.field .field-strip, .spec.field .spec-body { grid-column: 1 / -1; }
.spec.field .spec-body > p { max-width: 46rem; }

/* everything else, as an index of rows */
.index-title { margin: 72px 0 12px; }
.index-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-2); }
.index-list li { position: relative; display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: 4px 14px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.index-list .fid { grid-column: 1; grid-row: 1 / span 4; align-self: start; padding-top: 8px; }
.index-list h4 { grid-column: 2; font-size: 1.4rem; font-weight: 700; }
.index-list h4 a { text-decoration: none; }
.index-list h4 a::after { content: ""; position: absolute; inset: 0; }
.index-list li:hover h4 a { text-decoration: underline; text-decoration-color: var(--signal-line); }
.index-list .meta { grid-column: 2; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.04em; color: var(--ink-3); }
.index-list .desc { grid-column: 2; color: var(--ink-2); font-size: 0.98rem; }
.index-list .go { grid-column: 2; font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500; color: var(--ink); }
@media (min-width: 820px) {
  .index-list li { grid-template-columns: 3.6rem minmax(0, 15rem) minmax(0, 1fr) 8rem; gap: 4px 24px; }
  .index-list .fid { grid-row: 1; padding-top: 9px; }
  .index-list h4 { grid-row: 1; }
  .index-list .meta { grid-row: 2; }
  .index-list .desc { grid-column: 3; grid-row: 1 / span 2; padding-top: 4px; }
  .index-list .go { grid-column: 4; grid-row: 1; justify-self: end; padding-top: 7px; }
}

/* ---------- Home: about ----------
   A career "fibre": as you scroll, light runs down it (site.js sets --fill), each step
   lights up when the light reaches it, and the layers that step touched light up in the
   stack beside it. Without JavaScript, or with reduced motion, everything shows lit. */
.about-grid { display: grid; gap: 52px; margin-top: 40px; }
@media (min-width: 960px) {
  .about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
  .stack-col { position: sticky; top: 84px; }
}
.journey { position: relative; margin: 0; padding: 0 0 0 32px; list-style: none; }
.journey::before, .journey::after { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 2px; border-radius: 1px; }
.journey::before { background: var(--rule-2); }
.journey::after { background: var(--signal); transform: scaleY(var(--fill, 1)); transform-origin: 50% 0; }
.journey > li { position: relative; display: grid; gap: 3px; padding-bottom: 32px; }
.journey > li:last-child { padding-bottom: 0; }
.journey > li::before { content: ""; position: absolute; left: -32px; top: 4px; width: 14px; height: 14px; border: 2px solid var(--rule-2); border-radius: 2px; background: var(--bg); transition: background-color 0.3s ease, border-color 0.3s ease; }
.j-when { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; line-height: 1.7; letter-spacing: 0.04em; color: var(--ink-3); }
.j-what { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; line-height: 1.2; }
.j-where { color: var(--ink-2); font-size: 0.97rem; }
.j-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.j-tag { padding: 2px 7px; border: 1px solid var(--rule-2); border-radius: 2px; color: var(--ink-3); font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; line-height: 1.4; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; }
.about:not(.is-live) .journey > li::before, .journey > li.is-reached::before { border-color: var(--signal-edge); background: var(--signal); }
.about:not(.is-live) .j-tag, .journey > li.is-reached .j-tag { border-color: var(--signal-edge); background: var(--signal); color: var(--signal-ink); }
.journey > li.is-now::before { animation: node-pulse 1.8s ease-out infinite; }
@keyframes node-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 196, 0, 0.6); } 80%, 100% { box-shadow: 0 0 0 9px rgba(255, 196, 0, 0); } }

/* the stack: L1 at the bottom on wide screens, like a protocol stack sitting on the fibre */
.stack { display: flex; flex-direction: column; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }
.stack::before { content: "Medium · single-mode fibre"; padding-top: 7px; border-top: 3px solid var(--signal); color: var(--ink-3); font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
@media (min-width: 960px) {
  .stack { flex-direction: column-reverse; }
  .stack::before { padding-top: 7px; }
}
.layer { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: 3px 14px; padding: 13px 14px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--panel); transition: border-color 0.4s ease, box-shadow 0.4s ease; }
.layer-id { grid-row: span 2; display: grid; place-items: center; align-self: start; height: 28px; border: 1px solid var(--rule-2); border-radius: 2px; color: var(--ink-3); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease; }
.layer-name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; line-height: 1.2; }
.layer-skills { color: var(--ink-2); font-size: 0.95rem; line-height: 1.55; }
.about:not(.is-live) .layer, .layer.is-lit { border-color: var(--rule-2); box-shadow: var(--shadow); }
.about:not(.is-live) .layer-id, .layer.is-lit .layer-id { border-color: var(--signal-edge); background: var(--signal); color: var(--signal-ink); }
.layers { margin: 0; border-top: 1px solid var(--rule-2); }
.layers div { display: grid; grid-template-columns: 8.4rem minmax(0, 1fr); gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.layers dt { padding-top: 3px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; line-height: 1.5; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.layers dd { margin: 0; color: var(--ink-2); font-size: 0.98rem; }
@media (max-width: 519px) {
  .layers div { grid-template-columns: minmax(0, 1fr); }
  .layer { grid-template-columns: 3rem minmax(0, 1fr); padding: 12px; }
}

/* ---------- Home: contact ---------- */
/* the underline is a background, so it can draw itself in as the section scrolls up */
.contact-email { display: inline-block; max-width: 100%; margin-top: 14px; padding-bottom: 8px; background: linear-gradient(var(--signal-line), var(--signal-line)) 0 100% / 100% 3px no-repeat; font-family: var(--font-display); font-size: clamp(1.6rem, 5.6vw + 0.4rem, 4.6rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; overflow-wrap: anywhere; text-decoration: none; }
.contact-email:hover { background-image: linear-gradient(currentColor, currentColor); }
.contact-lede { max-width: 40rem; margin-top: 18px; color: var(--ink-2); font-size: 1.08rem; }
.contact .actions { margin-top: 24px; }
.contact-note { margin-top: 12px; }
.contact-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0 24px; margin: 36px 0 0; border-top: 1px solid var(--rule-2); }
.contact-meta div { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.contact-meta dt { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.contact-meta dd { margin: 4px 0 0; color: var(--ink); }

/* ---------- Footer ---------- */
.site-footer { margin-top: 112px; padding-block: 22px 40px; border-top: 1px solid var(--rule-2); color: var(--ink-3); font-family: var(--font-mono); font-size: 0.78rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; }
.to-top { white-space: nowrap; }

/* ---------- Failover replay (NetShield-E on the home page) ---------- */
.replay { margin: 0; background: var(--panel); font-family: var(--font-mono); font-size: 0.8125rem; }
.replay-bar { display: flex; align-items: baseline; gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--rule); color: var(--ink-3); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.replay-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.replay-clock { color: var(--ink); font-size: 1.05rem; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.topo { display: block; width: 100%; height: auto; padding: 12px 14px 4px; border-bottom: 1px solid var(--rule); font-family: var(--font-mono); }
.topo .t-link { stroke: var(--rule-2); stroke-width: 1.5; transition: stroke 0.3s ease; }
.topo .t-probe { stroke: var(--rule-2); stroke-width: 1.25; stroke-dasharray: 3 4; transition: stroke 0.3s ease; }
.topo[data-route="vm1"] .l-vm1 { stroke: var(--ink-2); stroke-width: 2; }
.topo[data-route="dead"] .l-vm1 { stroke: var(--critical); stroke-dasharray: 4 4; }
.topo[data-route="pi4"] .l-pi4 { stroke: var(--good); stroke-width: 2; }
.topo .p-pi4.ssh { stroke: var(--key-line); stroke-width: 2.5; stroke-dasharray: none; }
.topo .t-hub { fill: var(--panel-2); stroke: var(--ink-3); stroke-width: 1.25; }
.topo .t-hub-dot { fill: var(--ink-3); }
.topo .t-node rect { rx: 2px; fill: var(--panel-2); stroke: var(--rule-2); stroke-width: 1.25; transition: stroke 0.3s ease, fill 0.3s ease; }
.topo .t-dot { fill: var(--idle); transition: fill 0.3s ease; }
.topo .t-label { fill: var(--ink); font-size: 12px; font-weight: 500; }
.topo .t-status { fill: var(--ink-3); font-size: 10px; }
.topo[data-vm1="good"] .n-vm1 .t-dot, .topo[data-pi4="good"] .n-pi4 .t-dot, .topo[data-ctl="good"] .n-ctl .t-dot { fill: var(--good); }
.topo[data-vm1="critical"] .n-vm1 .t-dot { fill: var(--critical); }
.topo[data-vm1="critical"] .n-vm1 rect { stroke: var(--critical); fill: color-mix(in srgb, var(--critical) 9%, var(--panel-2)); }
.topo[data-pi4="warning"] .n-pi4 .t-dot, .topo[data-ctl="warning"] .n-ctl .t-dot { fill: var(--warning); }
.topo[data-pi4="warning"] .n-pi4 rect, .topo[data-ctl="warning"] .n-ctl rect { stroke: var(--warning); }
.topo[data-ctl="serious"] .n-ctl .t-dot { fill: var(--serious); }
.topo[data-ctl="serious"] .n-ctl rect { stroke: var(--serious); }
.topo[data-pi4="good"] .n-pi4 rect { stroke: var(--good); fill: color-mix(in srgb, var(--good) 8%, var(--panel-2)); }
.topo .pk { fill: var(--ink-2); }
.topo .pk.ok { fill: var(--good); }
.topo .pk.bad, .topo .pk.probe.bad { fill: var(--critical); }
.topo .pk.probe { fill: var(--ink-3); }
.replay-log { display: grid; gap: 5px; margin: 0; padding: 12px 14px 14px; list-style: none; }
.replay-log li { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); gap: 10px; color: var(--ink-2); }
.replay-log time { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.replay-log .ok { color: var(--ink); font-weight: 500; }
.replay.is-live .replay-log li { opacity: 0.28; transition: opacity 0.35s ease; }
.replay.is-live .replay-log li.on { opacity: 1; }
.replay figcaption { margin: 0; padding: 11px 14px 13px; border-top: 1px solid var(--rule); color: var(--ink-3); font-family: var(--font-sans); font-size: 0.85rem; line-height: 1.5; }

/* chat illustration (AI Mohammed) and rack illustration (Lab 01) */
.card-art { width: 100%; height: 100%; }
.art-unit { rx: 2px; fill: var(--panel); stroke: var(--rule-2); stroke-width: 1.5; }
.art-led { fill: var(--good); }
.art-led-dim { fill: var(--rule-2); }
.art-led-bad { fill: var(--critical); }
.art-vent { stroke: var(--rule-2); stroke-width: 2.5; stroke-linecap: round; }
.art-url { rx: 2px; fill: var(--key-fill); stroke: var(--key-line); stroke-width: 1.25; }
.art-url-text { fill: var(--ink); font-family: var(--font-mono); font-size: 11.5px; }
.art-txt { fill: var(--ink); font-family: var(--font-mono); font-size: 11px; font-weight: 500; }
/* AI Mohammed: the bot's real reply to /start, beside its ladder of AI providers */
.chat-visitor { rx: 3px; fill: var(--panel); stroke: var(--rule-2); stroke-width: 1.25; }
.chat-bot { rx: 3px; fill: var(--key-fill); stroke: var(--key-line); stroke-width: 1.25; }
.chat-txt { fill: var(--ink); font-family: var(--font-mono); font-size: 9.5px; }
.chat-sub { fill: var(--ink-3); font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.02em; }
.art-arrow { fill: none; stroke: var(--ink-3); stroke-width: 1.5; }
.art-frame { rx: 4px; fill: none; stroke: var(--rule-2); }
.art-wave { fill: none; stroke: var(--key-line); stroke-width: 2.5; stroke-linecap: round; }
.art-play { fill: var(--key-line); }
.hero-art .art-unit, .hero-art .art-frame { stroke-width: 1.5; }

/* ---------- Case studies and labs ---------- */
.page-head { padding-block: 28px 4px; }
.crumb { display: inline-block; color: var(--ink-3); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; }
.crumb:hover { color: var(--ink); }
.page-head .eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 24px; }
.page-head h1 { margin-top: 10px; font-size: clamp(2.6rem, 5.4vw + 0.8rem, 4.8rem); line-height: 0.98; }
.lede { max-width: 44rem; margin-top: 16px; color: var(--ink-2); font-size: clamp(1.1rem, 0.5vw + 1rem, 1.28rem); line-height: 1.55; }
.page-head .actions { margin-top: 24px; }
@media (min-width: 960px) { .page-head { padding-block: 52px 8px; } }

.page-hero-media { position: relative; margin: 28px 0 0; overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--panel-2); }
.page-hero-media > img, .page-hero-media > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.page-hero-media > svg { display: block; width: 100%; height: 100%; }
.page-hero-media.top > img { object-position: 50% 4%; }
@media (min-width: 960px) { .page-hero-media { aspect-ratio: 21 / 9; } }
.hero-caption { margin-top: 10px; color: var(--ink-3); font-size: 0.875rem; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 0 24px; margin: 28px 0 0; border-top: 1px solid var(--rule-2); }
.facts div { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.facts dt { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.facts dd { margin: 5px 0 0; color: var(--ink); font-size: 0.97rem; line-height: 1.45; }

/* readouts: measured numbers, shown the way an instrument shows them */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; overflow: hidden; list-style: none; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--rule); }
.stat { padding: 14px 16px 15px; background: var(--panel); }
.stat-label { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.stat-value { margin-top: 8px; font-family: var(--font-mono); font-size: clamp(1.6rem, 2.2vw + 0.8rem, 2.35rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; color: var(--ink); }
.stat-note { margin-top: 6px; color: var(--ink-3); font-size: 0.82rem; line-height: 1.4; }
@media (min-width: 820px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.block { margin-top: 64px; }
.block > h2, .prose h2 { font-size: clamp(1.6rem, 1.5vw + 1.1rem, 2.15rem); }
.prose > * { max-width: 44rem; }
.prose > * + * { margin-top: 16px; }
.prose > h2 { margin-top: 64px; }
.prose > h3 { margin-top: 32px; font-size: 1.3rem; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul { display: grid; gap: 8px; padding-left: 1.25em; }
.prose li::marker { color: var(--ink-3); }
.lead-in { max-width: 44rem; margin-top: 12px; color: var(--ink-2); }
.tight { margin-top: 24px; }

.steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: step; border-top: 1px solid var(--rule-2); }
.steps li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); counter-increment: step; }
.steps li::before { content: counter(step, decimal-leading-zero); padding-top: 3px; color: var(--ink); font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500; }
.steps strong { display: block; margin-bottom: 2px; font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; }

.split { display: grid; gap: 28px; align-items: start; margin-top: 24px; }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 48px; }
  .split .sticky { position: sticky; top: 84px; }
}

figure { margin: 0; }
figcaption { margin-top: 10px; color: var(--ink-3); font-size: 0.875rem; line-height: 1.5; }
.figure { margin-top: 24px; }
.figure img { width: 100%; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--panel-2); }
.gallery { display: grid; gap: 16px; margin-top: 24px; }
@media (min-width: 720px) { .gallery.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gallery .figure { margin-top: 0; }
.gallery .span-2 { grid-column: 1 / -1; }
.photo-fit img { aspect-ratio: 4 / 3; object-fit: cover; }
.photo-tall img { aspect-ratio: 3 / 4; object-fit: cover; object-position: top; }
.pos-low img { object-position: 50% 80%; }
.figure.narrow { max-width: 520px; }
.on-white img { background: #ffffff; }

.callout { padding: 16px 18px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--panel-2); color: var(--ink-2); }
.callout strong { color: var(--ink); }

.problem-list { display: grid; gap: 22px 32px; margin: 22px 0 0; padding: 0; list-style: none; }
.problem-list li { padding-top: 14px; border-top: 2px solid var(--ink); color: var(--ink-2); }
.problem-list h3 { margin-bottom: 6px; color: var(--ink); font-size: 1.3rem; }
@media (min-width: 820px) { .problem-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.phase-grid { display: grid; gap: 22px 32px; margin-top: 22px; }
.phase { padding-top: 14px; border-top: 2px solid var(--ink); }
.phase h3 { font-size: 1.3rem; }
.phase p { margin-top: 6px; color: var(--ink-2); font-size: 0.98rem; }
@media (min-width: 820px) { .phase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .phase-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* end-of-page call to action: the live demo */
.cta-band { display: grid; gap: 18px; align-items: center; padding: 24px 20px; border: 1px solid var(--rule-2); border-radius: var(--radius); background: var(--panel); }
.cta-band .eyebrow { color: var(--ink); }
.cta-band h2 { margin-top: 6px; font-size: clamp(1.6rem, 1.4vw + 1.1rem, 2.15rem); }
.cta-band p:not(.eyebrow) { max-width: 40rem; margin-top: 6px; color: var(--ink-2); }
.cta-band .logins { max-width: 40rem; margin-top: 16px; }
@media (min-width: 820px) { .cta-band { grid-template-columns: minmax(0, 1fr) auto; padding: 28px 32px; } }

.next { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--rule-2); }
.next a { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; text-decoration: none; }
.next a:hover { text-decoration: underline; text-decoration-color: var(--signal-line); }
.next small { display: block; margin-bottom: 2px; color: var(--ink-3); font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }

.lab-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-2); }
.lab-list li { position: relative; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.lab-list a { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; text-decoration: none; }
.lab-list a::after { content: ""; position: absolute; inset: 0; }
.lab-list li:hover a { text-decoration: underline; text-decoration-color: var(--signal-line); }
.lab-list .meta .fid { margin-right: 10px; vertical-align: -1px; }
.lab-list p { margin-top: 6px; color: var(--ink-2); }
.lab-list .meta { margin-top: 0; margin-bottom: 4px; color: var(--ink-3); font-family: var(--font-mono); font-size: 0.72rem; }

/* ---------- Diagrams (inline SVG, themed through classes) ---------- */
.diagram { padding: 14px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--panel); }
.dg { width: 100%; height: auto; font-family: var(--font-mono); }
.dg rect { rx: 3px; }
.dg .box { fill: var(--panel-2); stroke: var(--rule-2); stroke-width: 1.25; }
.dg .box-key { fill: var(--key-fill); stroke: var(--key-line); stroke-width: 1.5; }
.dg .box-ghost { fill: none; stroke: var(--rule-2); stroke-width: 1.25; stroke-dasharray: 5 5; }
.dg .t { fill: var(--ink); font-size: 13px; font-weight: 500; }
.dg .s { fill: var(--ink-3); font-size: 11px; }
.dg .lbl { fill: var(--ink-2); font-size: 10.5px; }
.dg .lbl-key { fill: var(--signal-text); font-size: 10.5px; font-weight: 500; }
.dg .wire { fill: none; stroke: var(--ink-3); stroke-width: 1.5; }
.dg .wire-dash { stroke-dasharray: 4 4; }
.dg .wire-key { fill: none; stroke: var(--key-line); stroke-width: 2.25; }
.dg .head { fill: var(--ink-3); }
.dg .head-key { fill: var(--key-line); }
.dg .dot-good { fill: var(--good); }
.dg .dot-idle { fill: var(--idle); }

/* ---------- Segmented bar: where the 14 seconds go ---------- */
.segbar-card { container-type: inline-size; overflow: hidden; padding: 18px 16px 16px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--panel); }
.segbar-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 40px; }
.segbar-total .label { color: var(--ink-2); font-size: 0.9rem; }
.segbar-total .value { color: var(--ink); font-family: var(--font-mono); font-size: 2rem; font-weight: 500; line-height: 1; letter-spacing: -0.03em; }
.segbar { display: flex; gap: 2px; height: 26px; }
.seg { position: relative; min-width: 0; border-radius: 1px; cursor: default; }
.seg-val { position: absolute; bottom: calc(100% + 6px); left: 0; color: var(--ink); font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; white-space: nowrap; }
.seg-1 { flex: 6.7 1 0; background: var(--series-1); }
.seg-2 { flex: 6 1 0; background: var(--series-2); }
.seg-3 { flex: 1.3 1 0; background: var(--series-3); }
.seg-3 .seg-val { left: auto; right: 0; }
.seg::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 0; z-index: 2; width: max-content; max-width: 240px; padding: 6px 9px; border-radius: var(--radius-sm); background: var(--ink); color: var(--bg); font-size: 0.78rem; font-weight: 500; line-height: 1.35; white-space: normal; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity 0.15s ease, transform 0.15s ease; }
.seg-2::after, .seg-3::after { left: auto; right: 0; }
.seg:hover::after, .seg:focus-visible::after { opacity: 1; transform: none; }
.segbar-axis { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; color: var(--ink-3); font-family: var(--font-mono); font-size: 0.72rem; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 0; padding: 0; list-style: none; color: var(--ink-2); font-size: 0.875rem; }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 10px; height: 10px; flex: none; border-radius: 1px; }
.legend .k1 { background: var(--series-1); }
.legend .k2 { background: var(--series-2); }
.legend .k3 { background: var(--series-3); }
.table-view { margin-top: 14px; font-size: 0.875rem; }
.table-view summary { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--signal-line); text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; }
.table-view table { width: 100%; margin-top: 10px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table-view th, .table-view td { padding: 7px 8px; border-bottom: 1px solid var(--rule); color: var(--ink-2); text-align: left; }
.table-view th { color: var(--ink); font-weight: 600; }
.table-view .num { font-family: var(--font-mono); text-align: right; }

/* ---------- Video ---------- */
.video { margin-top: 20px; }
.video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 1px solid var(--rule); border-radius: var(--radius); background: #000000; }
.video-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 10px; }
.video-bar figcaption { margin-top: 0; }
.switch { display: inline-flex; padding: 2px; border: 1px solid var(--rule-2); border-radius: var(--radius-sm); background: var(--panel); }
.switch button { padding: 6px 12px; border: 0; border-radius: 1px; background: transparent; color: var(--ink-2); font: 600 0.85rem/1.2 var(--font-sans); cursor: pointer; }
.switch button[aria-pressed="true"] { background: var(--signal); color: var(--signal-ink); }

/* ---------- 404 ---------- */
.notfound { padding-block: 80px 20px; }
.notfound h1 { margin-top: 12px; font-size: clamp(2.4rem, 5vw + 0.8rem, 4rem); }
.notfound p:not(.eyebrow) { margin-top: 14px; color: var(--ink-2); }
.notfound .actions { margin-top: 24px; }
/* the 404 page's own trace: the fibre breaks 404 m in */
.otdr-404 { max-width: 760px; margin-top: 44px; }
.otdr-404 .otdr-area { height: clamp(140px, 22vw, 210px); }
.otdr-flags .ev-break { --x: 40.4%; --y: 31.5%; --t: 0.404; }
.otdr-flags .ev-break span { left: 0; width: auto; padding: 0 5px; transform: translateX(-50%); }

/* ---------- Page to page: the work picture grows into the case study's header ---------- */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: 0.45s; animation-timing-function: cubic-bezier(0.2, 0.65, 0.2, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.25s; }
::view-transition-old(vt-netshield), ::view-transition-new(vt-netshield),
::view-transition-old(vt-wain), ::view-transition-new(vt-wain),
::view-transition-old(vt-clinichub), ::view-transition-new(vt-clinichub),
::view-transition-old(vt-ai), ::view-transition-new(vt-ai),
::view-transition-old(vt-handson), ::view-transition-new(vt-handson),
::view-transition-old(vt-lab), ::view-transition-new(vt-lab),
::view-transition-old(vt-garage), ::view-transition-new(vt-garage) { height: 100%; object-fit: cover; }
.site-header { view-transition-name: site-header; }
.vt-netshield { view-transition-name: vt-netshield; }
.vt-wain { view-transition-name: vt-wain; }
.vt-clinichub { view-transition-name: vt-clinichub; }
.vt-ai { view-transition-name: vt-ai; }
.vt-handson { view-transition-name: vt-handson; }
.vt-lab { view-transition-name: vt-lab; }
.vt-garage { view-transition-name: vt-garage; }

/* reading progress on case studies (added by site.js) */
.read-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--signal); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

/* ---------- Scroll motion: light travels along the fibre as you go down ----------
   Linked to the scroll position, never to a timer, so nothing can be left hidden. Where
   the browser can't link animation to scrolling, or motion is reduced, it's all in place. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* a pulse of light runs along each top rule as it scrolls into view */
    .spec, .index-list, .contact-meta, .facts, .steps, .lab-list, .next, .problem-list > li, .phase { position: relative; }
    :is(.spec, .index-list, .contact-meta, .facts, .steps, .lab-list, .next, .problem-list > li, .phase)::before {
      content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; pointer-events: none;
      background: linear-gradient(90deg, transparent 0 38%, var(--signal) 50%, transparent 62% 100%) 100% 0 / 300% 100% no-repeat;
      animation: fibre-pulse linear both; animation-timeline: view(); animation-range: entry 0% cover 50%;
    }
    :is(.problem-list > li, .phase)::before { top: -2px; }

    /* things arrive with a short rise as they scroll in */
    .section-head, .spec-media, .spec-body, .field-strip > li, .index-list > li, .journey > li,
    .figure, .diagram, .segbar-card, .video, .cta-band, .problem-list > li, .phase, .lab-list > li {
      animation: arrive linear both; animation-timeline: view(); animation-range: entry 0% entry 70%;
    }
    .spec-body { animation-range: entry 8% entry 78%; }
    .field-strip > li:nth-child(2) { animation-range: entry 6% entry 76%; }
    .field-strip > li:nth-child(3) { animation-range: entry 12% entry 82%; }
    .field-strip > li:nth-child(4) { animation-range: entry 18% entry 88%; }

    /* the email's underline draws itself in */
    .contact-email { animation: underline-draw linear both; animation-timeline: view(); animation-range: entry 30% cover 45%; }
  }
}
/* on narrow screens the layer stack scrolls with the page, so its layers arrive too */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (max-width: 959px) {
    .layer { animation: arrive linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
}
@keyframes fibre-pulse { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@keyframes arrive { from { opacity: 0.25; transform: translateY(40px); } }
@keyframes underline-draw { from { background-size: 0% 3px; } }

/* ---------- Any device ---------- */
a, button, summary { -webkit-tap-highlight-color: rgba(255, 196, 0, 0.28); }
/* fingers need bigger targets than a mouse pointer */
@media (pointer: coarse) {
  .nav a { padding-block: 13px; }
  .theme-toggle { width: 42px; height: 42px; }
}
/* short landscape phones: the header scrolls away and the name shrinks to fit */
@media (max-height: 520px) and (orientation: landscape) {
  .site-header { position: static; }
  .hero h1 { font-size: clamp(2.6rem, 6vw, 4rem); }
}
/* asked for more contrast: secondary text and hairlines get darker */
@media (prefers-contrast: more) {
  :root, :root[data-theme] { --ink-3: var(--ink-2); --rule: var(--rule-2); }
}

/* ---------- Motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .btn:active { transform: none; }
}
@media print {
  .site-header, .skip, .theme-toggle, .actions, .replay, .otdr-scan { display: none !important; }
  body { background: #ffffff; color: #000000; }
  .spec, .stat, .phase, .problem-list li { break-inside: avoid; }
  /* paper gets the finished page: no motion states, the whole career fibre lit */
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .journey::after { transform: none !important; }
  .about .journey > li::before, .about .j-tag, .about .layer-id { border-color: #12161b; background: #ffc400; color: #12161b; }
}