/* 05b Doctrine Atlas, field manual
   Two themes, both after the owner's sto pages:
   - light (native, and the no-JavaScript fallback): the Command Deck's cream field manual. Cream paper,
     deep teal ink for headings and subheads, bronze // markers and rails;
   - dark: the parent's teal-black editorial, cyan subheads, gold // markers.
   The theme lives on <html data-theme="light|dark"> (kit theme-init.js). Every colour below is a token,
   so setting the attribute alone switches the whole page.
   Contrast (WCAG, computed for the token pairs actually used):
     LIGHT ink #14262d on paper 13.5, on card 15.3 · ink-2 #34474e on paper 8.3 · ink-3 #4a5c60 on paper 6.0,
           on footer 5.0 · head #103e4a on paper 10.2 · teal #0a5f6f 6.3 and bronze #7f4e00 6.0 on paper ·
           accent text on paper >= 5.6 · cream text on accent fills >= 6.3 · ink-3 on a 14% accent tint >= 4.7
     DARK  ink #e9f2f3 on bg 17.1, on raise 13.4 · ink-2 #b9cbce on panel 10.6 · ink-3 #93abb0 on bg 8.1,
           on raise 6.3 · cyan 9.1 and gold 8.7 on raise · accent text on raise >= 6.5 ·
           dark text on accent fills >= 8.2 · ink-3 label on the selected slot tint >= 4.8
     PRINT tokens on white >= 6.4 */

:root {
  --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --text: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;

  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --colA: 400px;
  --bar-h: 62px;
  --jump-h: 44px;
  --cfg-h: 48px;
  --rail: 6px;
}

/* Light: native theme, and the no-JavaScript fallback. The Command Deck's cream field manual. */
:root:not([data-theme]),
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3eee3;
  --panel: #f8f4ea;
  --raise: #fffcf4;
  --line: #d9cfba;
  --line-2: #bfae8c;
  --ink: #14262d;
  --ink-2: #34474e;
  --ink-3: #4a5c60;
  --head: #103e4a;
  --cyan: #0a5f6f;
  --gold: #7f4e00;
  --violet: #5a3aa6;
  --on-acc: #fffbf2;
  --link-hover: #063f4a;
  --cyan-c: 10 95 111;
  --gold-c: 160 104 16;
  --violet-c: 90 58 166;
  --shadow-c: 74 56 24;
  --page-glow-1: rgba(160, 104, 16, .06);
  --page-glow-2: rgba(10, 95, 111, .035);
  --page-grid: rgba(20, 38, 45, .04);
  --bar-bg: rgba(243, 238, 227, .94);
  --card-1: #fffcf4;
  --card-2: #fbf6ea;
  --bay-1: #fbf7ee;
  --bay-2: #f5efe2;
  --atlas-1: #fbf7ee;
  --atlas-2: #f6f0e3;
  --frame-1: #fffcf4;
  --frame-2: #f8f2e5;
  --fslot-bg: #fffdf8;
  --toc-bg: #fbf7ee;
  --inset-bg: rgba(243, 238, 227, .8);
  --foot-bg: #e8e0cf;
  --fill: rgba(255, 255, 255, .6);
  --fill-hi: rgba(255, 255, 255, .85);
  --fill-lo: rgba(255, 255, 255, .45);
  --fade: #f6f0e3;
  --tile-1: #f2b84a;
  --tile-2: #dc9a2a;
  --tile-ink: #14262d;
  --tile-line: rgba(127, 78, 0, .55);
  --tile-glow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 6px -2px rgba(74, 56, 24, .35);
  --slot-tint: 11%;
  --shadow-a: .16;

  --a-cobalt: #2849a8;
  --a-violet: #6040b0;
  --a-amber: #7f4e00;
  --a-teal: #0b6a5e;
  --a-crimson: #a81e37;
  --a-orange: #9a420e;
  --a-sky: #0b5e97;
  --a-magenta: #912079;
  --a-green: #1d6a35;
}

/* Dark: the parent's teal-black editorial */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #050e11;
  --panel: #0a1a1f;
  --raise: #11292f;
  --line: #1c3a42;
  --line-2: #2b5560;
  --ink: #e9f2f3;
  --ink-2: #b9cbce;
  --ink-3: #93abb0;
  --head: #e9f2f3;
  --cyan: #67d8ec;
  --gold: #f3bb52;
  --violet: #b9a2ff;
  --on-acc: #061014;
  --link-hover: #9ae7f4;
  --cyan-c: 103 216 236;
  --gold-c: 243 187 82;
  --violet-c: 185 162 255;
  --shadow-c: 0 0 0;
  --page-glow-1: rgba(38, 140, 160, .17);
  --page-glow-2: rgba(38, 120, 140, .07);
  --page-grid: rgba(103, 216, 236, .03);
  --bar-bg: rgba(5, 14, 17, .88);
  --card-1: #0c1e24;
  --card-2: #081519;
  --bay-1: #0b1d23;
  --bay-2: #071419;
  --atlas-1: #0c1f25;
  --atlas-2: #071318;
  --frame-1: #0e242b;
  --frame-2: #071419;
  --fslot-bg: rgba(9, 24, 29, .85);
  --toc-bg: rgba(10, 26, 31, .8);
  --inset-bg: rgba(5, 14, 17, .55);
  --foot-bg: rgba(3, 9, 11, .85);
  --fill: rgba(255, 255, 255, .025);
  --fill-hi: rgba(255, 255, 255, .04);
  --fill-lo: rgba(255, 255, 255, .012);
  --fade: #081519;
  --tile-1: #0f3a42;
  --tile-2: #071d23;
  --tile-ink: #67d8ec;
  --tile-line: rgba(103, 216, 236, .55);
  --tile-glow: inset 0 0 16px rgba(103, 216, 236, .16), 0 0 14px rgba(103, 216, 236, .12);
  --slot-tint: 17%;
  --shadow-a: .9;

  --a-cobalt: #86a9ff;
  --a-violet: #b9a2ff;
  --a-amber: #f3bb52;
  --a-teal: #4fd8c4;
  --a-crimson: #ff8496;
  --a-orange: #ffa066;
  --a-sky: #74ccff;
  --a-magenta: #f58bd8;
  --a-green: #79e096;
}

[data-accent="cobalt"] { --acc: var(--a-cobalt); }
[data-accent="violet"] { --acc: var(--a-violet); }
[data-accent="amber"] { --acc: var(--a-amber); }
[data-accent="teal"] { --acc: var(--a-teal); }
[data-accent="crimson"] { --acc: var(--a-crimson); }
[data-accent="orange"] { --acc: var(--a-orange); }
[data-accent="sky"] { --acc: var(--a-sky); }
[data-accent="magenta"] { --acc: var(--a-magenta); }
[data-accent="green"] { --acc: var(--a-green); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--bar-h) + 18px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 1.0625rem/1.62 var(--text);
  color: var(--ink);
  background-color: var(--bg);
  background-image:
    radial-gradient(1100px 620px at 78% -8%, var(--page-glow-1), transparent 62%),
    radial-gradient(900px 500px at -10% 30%, var(--page-glow-2), transparent 60%),
    linear-gradient(var(--page-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--page-grid) 1px, transparent 1px);
  background-size: auto, auto, 48px 48px, 48px 48px;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; }
a { color: var(--cyan); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }
p { margin: 0 0 .8em; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: .005em; }
ul, ol { margin: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
[tabindex="-1"]:focus { outline: none; }
[tabindex="-1"]:focus-visible { outline: 1px dashed rgb(var(--cyan-c) / .55); outline-offset: 4px; }
main:focus { outline: none; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.gold { color: var(--gold); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.label { display: block; font: 600 .75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }

.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; background: var(--gold); color: var(--on-acc); font-weight: 700; border-radius: 6px; text-decoration: none; }
.skip:focus { top: 12px; color: var(--on-acc); }

.kicker { margin: 0; font: 600 .8125rem/1.3 var(--display); text-transform: uppercase; letter-spacing: .16em; color: var(--gold); }
.kicker--cyan { color: var(--cyan); }

/* Field-manual panels: a bronze top rail with a rounded corner, after the Command Deck's elbow rails */
.frame, .bay, .atlas__panel, .mx { border-top: var(--rail) solid var(--gold); border-radius: 22px 12px 12px 12px; }

/* ---------- Top bar ---------- */
.bar { position: sticky; top: 0; z-index: 30; background: var(--bar-bg); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.bar__in { max-width: var(--wrap); margin-inline: auto; padding: 10px var(--gutter); min-height: var(--bar-h); display: flex; align-items: center; gap: 12px 24px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; flex: none; }
.brand:hover { color: var(--ink); }
.brand__tile { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 1px solid var(--tile-line); border-radius: 12px 4px 4px 4px; background: linear-gradient(160deg, var(--tile-1), var(--tile-2)); color: var(--tile-ink); font: 700 1rem/1 var(--display); letter-spacing: .06em; box-shadow: var(--tile-glow); }
.brand__text { display: grid; line-height: 1.15; }
.brand__name { font: 700 .9375rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .12em; }
.brand__sub { font: 600 .75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.bar__nav { margin-left: auto; min-width: 0; }
.bar__nav ul { list-style: none; padding: 0; display: flex; gap: 2px; }
.bar__nav a { display: block; padding: 8px 10px; font: 600 .8125rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-2); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.bar__nav a:hover { color: var(--ink); border-bottom-color: var(--cyan); }
.bar__nav a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--gold); }
.bar__cta { flex: none; padding: 8px 14px; border: 1px solid var(--gold); border-radius: 6px; color: var(--gold); font: 700 .8125rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .1em; text-decoration: none; white-space: nowrap; }
.bar__cta:hover { background: rgb(var(--gold-c) / .12); color: var(--gold); }
.bar__tools { flex: none; display: flex; align-items: center; gap: 10px; }

/* Theme toggle: a real button; aria-pressed="true" means the dark theme is on (kit theme-init.js) */
.tgl { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; min-width: 36px; padding: 0 12px 0 10px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--fill); color: var(--ink-2); font: 600 .75rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; cursor: pointer; }
.tgl:hover { color: var(--ink); border-color: rgb(var(--gold-c) / .6); }
.tgl__icon { flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
:root[data-theme="dark"] .tgl { color: var(--ink); border-color: var(--gold); box-shadow: inset 0 0 0 1px rgb(var(--gold-c) / .5); }
:root[data-theme="dark"] .tgl__icon { fill: var(--gold); stroke: var(--gold); }
html:not([data-theme]) [data-theme-toggle] { display: none; }

/* ---------- Phone jump strip (shown at 960 px and below) ---------- */
.jump { display: none; position: sticky; top: 0; z-index: 29; background: var(--bar-bg); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.jump__list { list-style: none; padding: 0 var(--gutter); margin: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.jump__list::-webkit-scrollbar { display: none; }
.jump__list a { display: flex; align-items: center; gap: 6px; min-height: var(--jump-h); padding: 0 10px; font: 600 .8125rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.jump__n { font: 700 .75rem/1 var(--mono); color: var(--gold); }
.jump__list a:hover { color: var(--ink); border-bottom-color: var(--cyan); }
.jump__list a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--gold); }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "id frame" "text frame"; gap: 0 clamp(28px, 4vw, 56px); padding-top: clamp(28px, 4vw, 52px); padding-bottom: 28px; align-items: start; }
.hero__id { grid-area: id; }
.hero__text { grid-area: text; }
.frame { grid-area: frame; }
.hero h1 { font: 700 clamp(3.4rem, 8.4vw, 6.6rem)/.9 var(--display); letter-spacing: -.005em; margin: .7rem 0 .2rem; text-transform: none; color: var(--head); }
.hero__headline { font: 500 clamp(1.45rem, 2.5vw, 1.95rem)/1.15 var(--display); color: var(--cyan); letter-spacing: .01em; margin: .5rem 0 1.3rem; }
.hero__summary { font-size: 1.125rem; color: var(--ink-2); max-width: 64ch; }
.focusline { margin: 1.3rem 0 1.4rem; }
.focusline .label { margin-bottom: 8px; }
.focusline ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.focusline li { padding: 5px 12px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--fill); font-weight: 600; font-size: 1rem; }
.contact { list-style: none; padding: 16px 0 0; display: flex; flex-wrap: wrap; gap: 14px 30px; border-top: 1px solid var(--line); }
.contact li { min-width: 0; }
.contact a { font-weight: 600; }

/* Service frame: key facts and the concurrent roles */
.frame { position: relative; border: 1px solid var(--line-2); border-top: var(--rail) solid var(--gold); padding: 20px 20px 14px; background: linear-gradient(180deg, var(--frame-1), var(--frame-2)); box-shadow: 0 30px 70px -40px rgb(var(--shadow-c) / var(--shadow-a)); overflow: hidden; }
.frame__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; position: relative; }
.badge { font: 600 .75rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 10px; }
.frame__title { font-size: 1.75rem; line-height: 1.1; margin: .3rem 0 .35rem; position: relative; color: var(--head); }
.frame__lede { color: var(--ink-2); font-size: 1rem; position: relative; margin-bottom: 16px; }
.facts { position: relative; margin: 0 0 4px; }
.facts__row { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 2px 12px; padding: 9px 0 10px; border-top: 1px solid var(--line); }
.facts__row:first-child { border-top-color: var(--line-2); }
.facts__k { font: 600 .75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--cyan); padding-top: 4px; }
.facts__v { margin: 0; font-size: .96875rem; line-height: 1.5; color: var(--ink-2); }
.facts__strong { font-weight: 700; color: var(--ink); }
.frame__also { position: relative; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.frame__alsohead { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 4px; }
.frame__sub { font: 600 1.2rem/1.15 var(--display); letter-spacing: .01em; }
.frame__also .frame__lede { font-size: .9375rem; margin-bottom: 12px; }
.frame__slots { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; position: relative; z-index: 1; }
.fslot { display: flex; flex-direction: column; min-width: 0; }
.fslot__card { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title tag" "org org"; align-items: start; gap: 3px 10px; padding: 10px 12px 10px 14px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--fslot-bg); color: var(--ink); text-decoration: none; position: relative; }
.fslot__card::before { content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--acc); }
.fslot__card:hover { color: var(--ink); border-color: var(--acc); }
.fslot__title { grid-area: title; font: 600 1.125rem/1.15 var(--display); letter-spacing: .01em; }
.fslot__org { grid-area: org; font-size: .9375rem; line-height: 1.35; color: var(--ink-2); }
.fslot__dates { font: 600 .75rem/1.3 var(--mono); color: var(--gold); margin-left: 6px; white-space: nowrap; }
.fslot .tag--solid { grid-area: tag; justify-self: end; }
.frame__foot { position: relative; text-align: center; margin: 12px 0 0; font: 600 .75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }

.tag { display: inline-block; font: 700 .75rem/1.25 var(--display); text-transform: uppercase; letter-spacing: .09em; border-radius: 4px; padding: 3px 8px; white-space: nowrap; }
.tag--solid { align-self: flex-start; background: var(--acc); color: var(--on-acc); }
.tag--line { border: 1px solid var(--line-2); color: var(--ink-2); padding: 2px 8px; }

/* ---------- Reading aids ---------- */
.aids { display: grid; gap: 14px; padding-bottom: 8px; }
.toc details { border: 1px solid var(--line); border-radius: 8px; background: var(--toc-bg); }
.toc summary { cursor: pointer; padding: 11px 16px; font-weight: 600; color: var(--ink); }
.toc summary::marker { color: var(--cyan); }
.toc ol { list-style: none; padding: 4px 16px 16px; columns: 2 18rem; column-gap: 32px; }
.toc li { padding: 4px 0; break-inside: avoid; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.toc__n { font: 600 .75rem/1 var(--mono); color: var(--gold); margin-right: 8px; }
.standard { border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; padding: 14px 18px; background: linear-gradient(90deg, rgb(var(--gold-c) / .10), rgb(var(--gold-c) / .03)); }
.standard p { margin: 0; max-width: 92ch; }
.standard__k { color: var(--gold); }
.provenance { margin: 0; padding-left: 14px; border-left: 1px solid var(--line-2); color: var(--ink-3); font-size: 1rem; }

/* ---------- Section rhythm: numbered field-manual heads ---------- */
.sect { padding-top: clamp(52px, 6.5vw, 84px); }
.sec__head { padding-top: 22px; border-top: 1px solid var(--line-2); }
.sec__code { display: flex; align-items: baseline; gap: .5em; margin: 0 0 6px; font: 600 .8125rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--gold); }
.sec__n { font-weight: 700; }
.h2 { font: 600 clamp(2rem, 3.6vw, 2.8rem)/1.05 var(--display); color: var(--head); }
.slashes { color: var(--gold); font-size: .95em; font-style: italic; letter-spacing: -.08em; flex: none; }
.sect__lede { color: var(--ink-2); max-width: 72ch; margin: .7rem 0 1.8rem; }
.sec__head .sect__lede { margin-bottom: 1.6rem; }

/* ---------- 01 Strengths: slot bay ---------- */
.bay { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); border: 1px solid var(--line-2); border-top: var(--rail) solid var(--gold); background: linear-gradient(180deg, var(--bay-1), var(--bay-2)); box-shadow: 0 30px 80px -46px rgb(var(--shadow-c) / var(--shadow-a)); }
.bay__slots { position: relative; display: flex; flex-direction: column; padding: 24px; border-right: 1px solid var(--line); }
.slots { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; position: relative; z-index: 1; }
.slots__cell { display: flex; min-width: 0; }
.slot {
  flex: 1; min-width: 0; position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "top icon" "tag icon" "label label" "fig fig" "cta cta";
  grid-template-rows: auto auto auto 1fr auto;
  gap: 6px 8px; padding: 16px 14px 12px;
  border: 1px solid var(--line-2); border-radius: 9px;
  background: linear-gradient(180deg, var(--fill-hi), var(--fill-lo));
  color: var(--ink); text-decoration: none;
}
.slot::before { content: ""; position: absolute; left: 10px; right: 10px; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: var(--acc); }
.slot:hover { color: var(--ink); border-color: color-mix(in srgb, var(--acc) 65%, var(--line-2)); }
.slot__top { grid-area: top; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.slot__no { font: 600 .75rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.slot__icon { grid-area: icon; color: var(--acc); align-self: start; }
.slot__icon .ico { display: block; }
.slot__tag { grid-area: tag; justify-self: start; align-self: start; background: var(--acc); color: var(--on-acc); font: 700 .75rem/1 var(--display); text-transform: uppercase; letter-spacing: .1em; padding: 4px 7px 3px; border-radius: 3px; }
.slot__label { grid-area: label; font: 600 1.375rem/1.08 var(--display); letter-spacing: .005em; margin-top: 4px; }
.slot__fig { grid-area: fig; color: var(--acc); font-weight: 600; font-size: 1rem; line-height: 1.3; }
.slot__cta { grid-area: cta; display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font: 600 .75rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.slot__plus { color: var(--acc); font-size: 1rem; line-height: 1; }
.slot[aria-current="true"] { border-color: var(--acc); background: linear-gradient(180deg, color-mix(in srgb, var(--acc) var(--slot-tint), transparent), var(--fill-lo)); box-shadow: inset 0 0 0 1px var(--acc), 0 14px 34px -18px var(--acc); }
.slot[aria-current="true"] .slot__cta { color: var(--ink); }
.slot[aria-current="true"] .slot__cta-t::after { content: "ing"; }
.bay__note { position: relative; margin: 18px 0 0; text-align: center; font: 600 .75rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }

.inspector { padding: 24px 26px 28px; min-width: 0; }
.inspector__k, .loadout__k { margin: 0 0 12px; font: 600 .8125rem/1.3 var(--display); text-transform: uppercase; letter-spacing: .16em; color: var(--cyan); }
.inspector__ev { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: -4px 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.inspector__evk { font: 600 .75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.inspector__ev .vtag { display: none; }

/* ---------- Fragment styling (shared .frag__* classes) ---------- */
.fragment { --acc: var(--gold); }
.fragment[data-accent="cobalt"] { --acc: var(--a-cobalt); }
.fragment[data-accent="violet"] { --acc: var(--a-violet); }
.fragment[data-accent="amber"] { --acc: var(--a-amber); }
.fragment[data-accent="teal"] { --acc: var(--a-teal); }
.fragment[data-accent="crimson"] { --acc: var(--a-crimson); }
.fragment[data-accent="orange"] { --acc: var(--a-orange); }
.fragment[data-accent="sky"] { --acc: var(--a-sky); }
.fragment[data-accent="magenta"] { --acc: var(--a-magenta); }
.fragment[data-accent="green"] { --acc: var(--a-green); }
.frag__meta { margin: 0 0 4px; font: 600 .75rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--acc); }
.frag__title { font: 600 clamp(1.6rem, 2.4vw, 2rem)/1.08 var(--display); margin: 0 0 .7rem; color: var(--head); }
.frag__lede { color: var(--ink); }
.frag__org { color: var(--cyan); font-weight: 600; margin: 0 0 .4rem; }
.frag__points { padding-left: 1.15rem; margin: 0 0 1rem; color: var(--ink-2); }
.frag__points li { margin: .35rem 0; }
.frag__points li::marker { color: var(--acc); }
.frag__where, .frag__check { margin: 0 0 10px; padding: 10px 14px; border-left: 3px solid var(--gold); border-radius: 0 6px 6px 0; background: rgb(var(--gold-c) / .07); font-size: 1rem; color: var(--ink-2); }
.frag__check { border-left-color: var(--cyan); background: rgb(var(--cyan-c) / .06); }
.frag__k { display: block; margin-bottom: 3px; font: 600 .75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--gold); }
.frag__check .frag__k { color: var(--cyan); }
.frag__ref a { color: var(--cyan); font-weight: 600; }
.frag__url { overflow-wrap: anywhere; font-size: 1rem; }
.frag__note { color: var(--ink-3); font-size: 1rem; font-style: italic; }
.frag__status { border-left: 3px solid var(--gold); padding: 8px 12px; background: rgb(var(--gold-c) / .07); }
.frag__facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; }
.frag__facts dt { font: 600 .75rem/1.6 var(--mono); text-transform: uppercase; color: var(--cyan); }
.frag__facts dd { margin: 0; }
.load-error { padding: 12px 14px; border: 1px solid var(--a-crimson); border-radius: 6px; color: var(--ink); }

/* ---------- 02 Doctrine Atlas ---------- */
.atlas { padding-top: clamp(52px, 6.5vw, 84px); }
.atlas__panel { border: 1px solid var(--line-2); border-top: var(--rail) solid var(--gold); background: linear-gradient(180deg, var(--atlas-1), var(--atlas-2) 40%); box-shadow: 0 40px 90px -50px rgb(var(--shadow-c) / var(--shadow-a)); }
.atlas__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 24px 28px 22px; border-bottom: 1px solid var(--line); }
.atlas__title { font: 600 clamp(2rem, 3.6vw, 2.75rem)/1.05 var(--display); color: var(--head); margin: .35rem 0 .5rem; }
.atlas__lede { margin: 0; max-width: 72ch; color: var(--ink-2); }
.atlas__lede strong { color: var(--ink); }
.dataset { flex: none; font: 600 .75rem/1 var(--mono); color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 11px; white-space: nowrap; }

/* The configurator. Without JavaScript it is a plain block of controls. script.js marks it data-js (sticky),
   data-condensed (stuck: one-line summary bar) and data-open (the controls as a sheet under the bar). */
.cfg__sentinel { height: 1px; margin-top: -1px; }
.cfg { --stick-top: var(--bar-h); position: relative; z-index: 6; background: var(--atlas-1); border-bottom: 1px solid var(--line); }
.cfg[data-js] { position: sticky; top: var(--stick-top); }
.cfg__bar { display: none; align-items: center; gap: 10px 14px; min-height: var(--cfg-h); padding: 6px 28px; }
.cfg[data-condensed] { box-shadow: 0 10px 24px -18px rgb(var(--shadow-c) / .8); }
.cfg[data-condensed] .cfg__bar { display: flex; }
.cfg[data-condensed] .cfg__body { display: none; }
.cfg[data-condensed][data-open] .cfg__body { display: grid; position: absolute; left: -1px; right: -1px; top: 100%; z-index: 7; background: var(--panel); border: 1px solid var(--line-2); border-top: 1px solid var(--line); box-shadow: 0 28px 48px -24px rgb(var(--shadow-c) / .9); max-height: calc(100vh - var(--stick-top) - var(--cfg-h) - 20px); overflow: auto; overscroll-behavior: contain; }
.cfg__body { display: grid; grid-template-columns: var(--colA) minmax(0, 1fr); }
.cfg__sum { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; font: 600 .8125rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.cfg__k { color: var(--gold); }
.cfg__v { color: var(--ink); }
.cfg__v span, .showval span { display: none; }
.cfg__sep { color: var(--line-2); }
.cfg__btn { flex: none; margin-left: auto; min-height: 34px; padding: 0 12px; border: 1px solid var(--gold); border-radius: 6px; background: var(--fill); color: var(--gold); font: 700 .75rem/1 var(--display); text-transform: uppercase; letter-spacing: .1em; cursor: pointer; }
.cfg__btn:hover { background: rgb(var(--gold-c) / .12); }
.cfg__btn[aria-expanded="true"] { background: var(--gold); color: var(--on-acc); }

.focus { padding: 20px 24px; border-right: 1px solid var(--line); min-width: 0; }
.show { padding: 20px 24px; margin: 0; border: 0; min-width: 0; }
.ctl__legend { display: block; padding: 0; margin: 0 0 10px; font: 600 .75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.show > legend { float: left; width: 100%; }
.show > legend + * { clear: both; }
.ctl__legend small { font: 400 .8125rem/1 var(--text); text-transform: none; letter-spacing: 0; }
.seg { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; position: relative; }
.focus .seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seg__btn, .seg--radio label {
  display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 8px 12px;
  border: 1px solid var(--line-2); border-radius: 7px; background: var(--fill);
  color: var(--ink-2); font: 600 .9375rem/1.2 var(--text); text-decoration: none; cursor: pointer;
}
.seg__btn:hover, .seg--radio label:hover { color: var(--ink); border-color: rgb(var(--gold-c) / .6); }
.seg__btn[aria-current="true"], .seg--radio input:checked + label { color: var(--ink); border-color: var(--gold); background: rgb(var(--gold-c) / .12); box-shadow: inset 0 0 0 1px var(--gold); }
.seg__opt { position: relative; display: flex; min-width: 0; }
.seg__opt label { flex: 1; }
.seg--radio input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg__opt:hover label { color: var(--ink); border-color: rgb(var(--gold-c) / .6); }
.seg--radio input:focus-visible + label { outline: 2px solid var(--gold); outline-offset: 3px; }
.sw { flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--acc, var(--ink-3)); }

.atlas__stage { display: grid; grid-template-columns: var(--colA) minmax(0, 1fr); grid-template-areas: "loadout records"; position: relative; }
.atlas__stage::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--colA); width: 1px; background: var(--line); pointer-events: none; }
.loadout { grid-area: loadout; align-self: start; position: sticky; top: calc(var(--bar-h) + var(--cfg-h) + 14px); max-height: calc(100vh - var(--bar-h) - var(--cfg-h) - 28px); overflow: auto; overscroll-behavior: contain; padding: 20px 24px 24px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.loadout:focus-visible { outline-offset: -3px; }
.loadout::after { content: ""; position: sticky; bottom: -24px; display: block; height: 44px; margin: 0 -24px -24px; background: linear-gradient(transparent, var(--fade) 85%); pointer-events: none; }
.loadout .frag__title { font-size: 1.6rem; }
.loadout .frag__rec { position: relative; margin: 0 0 10px; padding: 12px 14px 4px 16px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--fill); }
.loadout .frag__rec::before { content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--acc); }
.loadout .frag__rec h4 { font: 600 1.15rem/1.15 var(--display); }
.loadout .frag__org { font-size: .9375rem; margin: 2px 0 6px; }
.loadout .frag__points { font-size: 1rem; margin-bottom: 8px; }

.records { grid-area: records; min-width: 0; padding: 0 28px 12px; }
.records__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 20px 0 12px; border-bottom: 1px solid var(--line); }
.records__title { font: 600 1.75rem/1.1 var(--display); color: var(--head); }
.showing { margin: 0; font: 600 .75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.showing .showval span { color: var(--gold); }
.atlas:has(#show-all:checked) .showval [data-v="all"],
.atlas:has(#show-current:checked) .showval [data-v="current"] { display: inline; }
.atlas:has(#show-current:checked) .rec:not([data-current]) { display: none; }
.records__also { display: none; margin: 14px 0 0; padding: 10px 14px; border: 1px dashed var(--line-2); border-radius: 8px; color: var(--ink-2); }
.atlas:has(#show-current:checked) .records__also { display: block; }
.atlas .rec:target { display: block !important; }

.rec { position: relative; padding: 24px 0 22px 24px; border-bottom: 1px solid var(--line); }
.rec:last-child { border-bottom: 0; }
.rec::before { content: ""; position: absolute; left: 0; top: 26px; bottom: 24px; width: 3px; border-radius: 2px; background: var(--acc); opacity: calc(.5 + var(--match, 0) * .5); box-shadow: 0 0 calc(var(--match, 0) * 14px) var(--acc); }
.rec__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 8px; }
.rec__dates { font: 600 .8125rem/1.3 var(--mono); color: var(--gold); }
.rec__lane { display: inline-flex; align-items: center; gap: 6px; font: 600 .75rem/1.3 var(--display); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); }
.rec__match { display: none; align-items: center; padding: 2px 8px; border: 1px solid rgb(var(--cyan-c) / .5); border-radius: 4px; background: rgb(var(--cyan-c) / .12); color: var(--cyan); font: 700 .75rem/1.25 var(--display); text-transform: uppercase; letter-spacing: .12em; }
.rec__title { font: 600 clamp(1.4rem, 2.1vw, 1.65rem)/1.12 var(--display); color: var(--head); }
.rec__org { margin: .3rem 0 0; color: var(--cyan); font-weight: 600; }
.rec__loc { color: var(--ink-3); font-weight: 400; }
.rec__loc::before { content: "· "; }
.rec__note { margin: .2rem 0 0; color: var(--ink-3); font-style: italic; }
.rec__scope { margin: .7rem 0 .5rem; color: var(--ink-2); font-style: italic; }
.rec__list { padding-left: 1.15rem; margin: 0 0 .4rem; }
.rec__list li { margin: .4rem 0; padding-left: 2px; }
.rec__list li::marker { color: var(--acc); }
.rec__detail { color: var(--ink-2); }
.rec__more { margin: .2rem 0 .3rem; }
.rec__more summary { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer; list-style: none; color: var(--cyan); font-weight: 600; }
.rec__more summary::-webkit-details-marker { display: none; }
.rec__plus { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid rgb(var(--cyan-c) / .5); border-radius: 4px; font: 700 .9375rem/1 var(--mono); }
.rec__more[open] .rec__plus { transform: rotate(45deg); }
.rec__basis { margin-left: auto; }
/* Phone-closed panels (projects, skill groups): script.js opens them on wide screens and hides the summary */
.more > summary { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer; list-style: none; color: var(--cyan); font-weight: 600; }
.more > summary::-webkit-details-marker { display: none; }
.more[open] .rec__plus { transform: rotate(45deg); }
.more.is-wide > summary { display: none; }
.rec__media { margin: .8rem 0 0; }
.atlas__foot { margin: 0; padding: 16px 28px 20px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 1rem; }
.atlas__foot strong { color: var(--ink); }

/* The record's own evidence-standard callout (round 4), after the page-level testing standard */
.recstd { margin: 12px 0 0; padding: 10px 14px 12px 16px; border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; background: linear-gradient(90deg, rgb(var(--gold-c) / .09), rgb(var(--gold-c) / .02)); font-size: 1rem; color: var(--ink-2); }
.recstd__k { display: flex; align-items: baseline; gap: .45em; margin: 0 0 5px; font: 600 .75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--gold); }
.recstd__t { margin: 0; }
.recstd .vtag { vertical-align: 2px; }
.recstd .chips { margin: 10px 0 0; }
.recstd .evbox { margin-top: 10px; background: var(--inset-bg); }

/* Verification and status tags (data vocabulary only) */
.vtag { display: inline-block; padding: 1px 7px; border: 1px solid var(--line-2); border-radius: 3px; font: 600 .75rem/1.45 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); vertical-align: 1px; white-space: nowrap; }
.vtag--public_artifact { color: var(--cyan); border-color: rgb(var(--cyan-c) / .5); background: rgb(var(--cyan-c) / .08); }
.vtag--status { color: var(--gold); border-color: rgb(var(--gold-c) / .45); }

/* Evidence chips and inspectors */
.chips { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 7px; }
.chip { display: inline-flex; align-items: center; min-height: 30px; padding: 3px 12px; border: 1px solid rgb(var(--cyan-c) / .45); border-radius: 999px; background: rgb(var(--cyan-c) / .05); color: var(--cyan); font: 600 .875rem/1.3 var(--text); text-decoration: none; white-space: nowrap; }
.chip:hover { background: rgb(var(--cyan-c) / .14); }
.chip[aria-current="true"] { background: var(--cyan); border-color: var(--cyan); color: var(--on-acc); }
.chip--wide::before { content: "+"; margin-right: 8px; font-family: var(--mono); }
.evbox { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--line-2); border-left: 3px solid var(--cyan); border-radius: 0 8px 8px 0; background: rgb(var(--cyan-c) / .04); }
.evbox .frag__title { font-size: 1.3rem; margin-bottom: .4rem; }
.evbox p:last-child { margin-bottom: 0; }
.evbox--none { border-left-color: var(--line-2); color: var(--ink-2); }
.photos { margin-top: 12px; }
.photos__note { margin: 0; color: var(--ink-3); font-size: 1rem; }
.frag__gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.frag__gallery figure { margin: 0; }
.frag__gallery img { display: block; width: 100%; height: 180px; object-fit: cover; border: 1px solid var(--line-2); border-radius: 6px; background: var(--panel); }
.frag__gallery figcaption { margin-top: 6px; font-size: .875rem; line-height: 1.4; color: var(--ink-2); }

/* ---------- 03 Matrix: skills by employer lane ---------- */
.mx { border: 1px solid var(--line-2); border-top: var(--rail) solid var(--gold); background: var(--card-1); padding: 20px 24px 18px; box-shadow: 0 30px 80px -46px rgb(var(--shadow-c) / var(--shadow-a)); }
.mx__scroll { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.mx__scroll:focus-visible { outline-offset: 2px; }
.mx__table { width: 100%; min-width: 720px; border-collapse: collapse; }
.mx__cap { text-align: left; caption-side: top; padding: 0 0 14px; color: var(--ink-2); font-size: 1rem; max-width: 80ch; }
.mx__table th, .mx__table td { border-bottom: 1px solid var(--line); vertical-align: middle; }
.mx__table thead th { vertical-align: bottom; padding: 0 6px 10px; text-align: center; font: 600 .8125rem/1.15 var(--display); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); border-bottom: 2px solid var(--line-2); width: 9%; }
.mx__table thead th.mx__skill { text-align: left; width: auto; padding-left: 0; }
.mx__hl { display: block; }
.mx__table thead th .sw { display: block; margin: 7px auto 0; width: 24px; height: 4px; border-radius: 2px; }
.mx__table th[scope="rowgroup"] { padding: 18px 0 6px; text-align: left; font: 600 1.1rem/1.2 var(--display); color: var(--acc); border-bottom: 1px solid var(--line-2); }
.mx__gn { font: 600 .75rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--acc); margin-right: 8px; }
.mx__table th[scope="row"] { padding: 8px 12px 8px 0; text-align: left; font: 400 .9375rem/1.4 var(--text); color: var(--ink); position: sticky; left: 0; background: var(--card-1); }
.mx__c { text-align: center; padding: 6px; }
.mx__c--on { background: color-mix(in srgb, var(--acc) 9%, transparent); }
.mx__dot { display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: var(--acc); border: 1px solid rgb(var(--shadow-c) / .25); vertical-align: middle; }
.mx__table td:focus, .mx__table th:focus { outline: none; }
.mx__table td:focus-visible, .mx__table th:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: 0; }
.mx__table th[scope="row"]:focus-visible { z-index: 1; }
.mx__readout { margin: 14px 0 0; padding: 10px 14px; border-left: 3px solid var(--cyan); border-radius: 0 6px 6px 0; background: rgb(var(--cyan-c) / .06); font-size: 1rem; color: var(--ink-2); }
.mx__readout[hidden] { display: none; }
.mx__readout strong { color: var(--ink); }
.mx__hint { margin: 12px 0 0; font: 600 .75rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.mxlist { display: none; }
.mxlist__group { border: 1px solid var(--line-2); border-radius: 8px; background: var(--fill); }
.mxlist__group summary { padding: 11px 14px; cursor: pointer; font: 600 1.05rem/1.2 var(--display); color: var(--ink); }
.mxlist__group summary::marker { color: var(--acc); }
.mxlist ul { list-style: none; padding: 0 14px 10px; margin: 0; }
.mxlist li { display: grid; gap: 6px; padding: 9px 0; border-top: 1px solid var(--line); }
.mxlist__term { font-weight: 600; font-size: .9375rem; line-height: 1.35; }
.mxlist__lanes { display: flex; flex-wrap: wrap; gap: 6px; }
.mxlist__lane { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border: 1px solid var(--line-2); border-radius: 4px; font: 600 .75rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .03em; color: var(--ink-2); }

/* ---------- 04 Projects ---------- */
.dossier { position: relative; margin-bottom: 22px; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--line-2); border-radius: 14px; background: linear-gradient(180deg, var(--card-1), var(--card-2)); }
.dossier::before { content: ""; position: absolute; left: 18px; right: 18px; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--acc), transparent 75%); }
.dossier__no { color: var(--acc); }
.dossier__title { font: 600 clamp(1.65rem, 2.8vw, 2.2rem)/1.08 var(--display); margin: .4rem 0 .5rem; color: var(--head); }
.dossier__role { color: var(--ink-2); margin: 0; max-width: 90ch; }
.dossier__role strong { color: var(--ink); }
.dossier__role a { overflow-wrap: anywhere; }
.terms { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.terms li { padding: 2px 8px; border: 1px solid var(--line-2); border-radius: 4px; font: 600 .75rem/1.4 var(--display); text-transform: uppercase; letter-spacing: .09em; color: var(--ink-2); }
.terms--lg li { font-size: .9375rem; padding: 4px 10px; color: var(--ink); }
.status { margin: 20px 0 22px; padding: 12px 16px; border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; background: rgb(var(--gold-c) / .08); }
.status strong { color: var(--gold); }
.dossier__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 390px); gap: 28px; align-items: start; }
.dfacts { margin: 0; display: grid; gap: 0; }
.dfacts > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.dfacts dt { font: 600 .75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--cyan); padding-top: 5px; }
.dfacts dd { margin: 0; color: var(--ink-2); }
.dossier__ev { padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--inset-bg); }
.dossier__ev .ctl__legend { display: flex; align-items: center; gap: 8px; }

/* ---------- 05 Skills inventory ---------- */
.groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.group { position: relative; padding: 22px 24px 14px; border: 1px solid var(--line-2); border-radius: 12px; background: linear-gradient(180deg, var(--card-1), var(--card-2)); }
.group::before { content: ""; position: absolute; left: 16px; right: 16px; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: var(--acc); }
.group__no { font-family: var(--mono); font-size: .75rem; color: var(--acc); letter-spacing: .08em; }
.group__title { font-size: 1.65rem; line-height: 1.1; margin: .3rem 0 .7rem; color: var(--head); }
.group__items { list-style: none; padding: 0; }
.group__items li { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--line); }
.group__term { font-weight: 600; }
.group__meta { font-size: 1rem; color: var(--ink-3); }
.group__meta .vtag { margin-right: 6px; }

/* ---------- 06 Credentials ---------- */
.creds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: 10px; }
.creds__col { min-width: 0; }
.creds__col > section + section { margin-top: 26px; }
.sub { font: 600 1.4rem/1.15 var(--display); color: var(--cyan); margin: 0 0 10px; }
.cred { padding: 12px 0; border-top: 1px solid var(--line); }
.cred__name { margin: 0; font-weight: 600; }
.cred__body { margin: .2rem 0 .3rem; color: var(--ink-2); }
.cred__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: .3rem 0 0; font: 600 .8125rem/1.4 var(--mono); color: var(--ink-3); }
.cred__dim { color: var(--ink-3); font-weight: 400; }
.certs { list-style: none; padding: 0; }
.certs li { display: grid; gap: 3px; padding: 10px 0; border-top: 1px solid var(--line); }
.cert__name { font-weight: 600; }
.cert__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--ink-2); font-size: 1rem; }

/* ---------- 07 Community ---------- */
.com { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding-top: 10px; }
.com__card { --acc: var(--a-magenta); position: relative; padding: 20px 22px 14px 24px; border: 1px solid var(--line-2); border-radius: 12px; background: linear-gradient(180deg, var(--card-1), var(--card-2)); }
.com__card::before { content: ""; position: absolute; left: -1px; top: 16px; bottom: 16px; width: 3px; border-radius: 2px; background: var(--acc); }
.com__card--lead { grid-column: 1 / -1; }
.com__card--lead .com__title { font-size: 1.9rem; }
.com__title { font-size: 1.45rem; line-height: 1.12; color: var(--head); }
.com__ev { margin: .4rem 0 0; padding: 8px 12px; border-left: 3px solid var(--cyan); border-radius: 0 6px 6px 0; background: rgb(var(--cyan-c) / .06); font-size: 1rem; }
.com__ev .frag__k { color: var(--cyan); }
.sub--also { margin-top: 30px; color: var(--ink-2); }
.com__also { list-style: none; padding: 0; }
.com__also > li { padding: 12px 0; border-top: 1px solid var(--line); }
.com__also-h { margin: 0; }
.com__also ul { margin: .3rem 0 0; padding-left: 1.15rem; color: var(--ink-2); }

/* ---------- 08 Contact closing box ---------- */
.closing { margin-top: 10px; padding: clamp(22px, 4vw, 40px); border: 1px solid var(--line-2); border-left: 4px solid var(--violet); border-radius: 0 14px 14px 0; background: linear-gradient(90deg, rgb(var(--violet-c) / .07), rgb(var(--violet-c) / 0) 70%), var(--raise); }
:root[data-theme="dark"] .closing { border-color: rgb(var(--violet-c) / .3); border-left-color: var(--violet); background: linear-gradient(90deg, rgb(var(--violet-c) / .10), rgb(var(--violet-c) / .02)); }
.closing__mail { margin: 0 0 18px; font: 600 clamp(1.7rem, 4.4vw, 2.8rem)/1.1 var(--display); overflow-wrap: anywhere; }
.closing__mail a { color: var(--ink); text-decoration-color: var(--violet); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.closing__list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 36px; }
.closing__list li { min-width: 0; overflow-wrap: anywhere; }

/* ---------- Footer ---------- */
.foot { margin-top: clamp(56px, 8vw, 96px); border-top: 1px solid var(--line); background: var(--foot-bg); }
.foot__in { display: grid; grid-template-columns: 1.1fr 1.5fr 1fr; gap: 28px; padding-block: 36px 48px; align-items: start; }
.foot__brand { display: flex; gap: 14px; align-items: flex-start; }
.foot__brand p { margin: 0; color: var(--ink-2); }
.foot__brand strong { color: var(--ink); font-family: var(--display); font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase; }
.foot__data .label { margin-bottom: 8px; }
.data-links { list-style: none; padding: 0; display: grid; gap: 6px; color: var(--ink-2); font-size: 1rem; }
.foot__prov { margin: 0; font: 600 .8125rem/1.7 var(--mono); color: var(--ink-3); }

/* ---------- Motion (only when allowed) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .slot, .fslot__card, .seg__btn, .seg--radio label, .chip, .cfg__btn { transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease, color .16s ease; }
  .slot:hover { transform: translateY(-2px); }
  .rec__plus { transition: transform .16s ease; }
}

/* ---------- Responsive ----------
   1920 / 1280: sticky top bar with the section nav; two-column configurator and atlas with a sticky loadout.
   1024: same, with the toggle as an icon and a short résumé label so the one-row bar fits.
   960 and below: the bar is static (brand and tools); the numbered jump strip sticks at the top; the
   configurator sticks under it; atlas stacks loadout then records; the matrix scrolls inside its region.
   760 and below: two-up slots, one-column cards, the matrix becomes the per-skill list.
   280-359 px hides the brand words (the SM tile keeps its label) and stacks the controls.
   Landscape phones (height <= 500 px): only the jump strip sticks; no condensing, no nested scroll. */
/* Eight section links: below 1560 px the toggle is an icon and the résumé label is short, so the one-row bar
   never overlaps; the nav itself can scroll sideways if a narrow desktop still runs out of room. */
@media (max-width: 1560px) {
  .bar__nav { flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; }
  .bar__nav::-webkit-scrollbar { display: none; }
  .bar__nav ul { justify-content: flex-end; }
  .bar__nav a { padding-inline: 8px; letter-spacing: .09em; }
  .brand__sub { display: none; }
  .bar__cta-x { display: none; }
  .tgl { width: 36px; padding: 0; justify-content: center; }
  .tgl__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 1180px) {
  :root { --colA: 340px; }
  .bar__nav a { padding-inline: 7px; letter-spacing: .08em; }
  .bar__cta-x { display: none; }
  .tgl { width: 36px; padding: 0; justify-content: center; }
  .tgl__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 1080px) {
  .bay { grid-template-columns: 1fr; }
  .bay__slots { border-right: 0; border-bottom: 1px solid var(--line); }
  .creds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creds__col:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .creds__col:last-child > section + section { margin-top: 0; }
  .dossier__body { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .bar { position: static; }
  .bar__nav { display: none; }
  .brand__sub { display: block; }
  .jump { display: block; }
  html { scroll-padding-top: calc(var(--jump-h) + 12px); }
  .bar__cta-x { display: inline; }
  .tgl { width: auto; padding: 0 12px 0 10px; }
  .tgl__label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "id" "frame" "text"; }
  .frame { margin: 22px 0 26px; }
  .cfg { --stick-top: var(--jump-h); }
  .cfg__body { grid-template-columns: minmax(0, 1fr); }
  .focus { border-right: 0; border-bottom: 1px solid var(--line); }
  .atlas__stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "loadout" "records"; }
  .atlas__stage::before { display: none; }
  .loadout { position: relative; top: 0; max-height: 60vh; border-bottom: 1px solid var(--line); }
  .foot__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .foot__prov { grid-column: 1; }
}
@media (max-width: 760px) {
  .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .slots__cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .bay__slots { padding: 16px; }
  .inspector { padding: 20px 18px 22px; }
  .slot { padding: 14px 11px 10px; }
  .slot__label { font-size: 1.2rem; }
  .slot__fig { font-size: .9375rem; }
  .atlas__head { flex-direction: column; padding: 22px 18px 18px; }
  .cfg__bar { padding-inline: 18px; }
  .focus, .show, .loadout { padding-inline: 18px; }
  .loadout::after { margin-inline: -18px; }
  .records { padding: 0 18px 8px; }
  .atlas__foot { padding-inline: 18px; }
  .rec { padding-left: 18px; }
  .rec__loc { display: block; }
  .rec__loc::before { content: none; }
  .recstd { padding: 8px 12px 9px 13px; font-size: .9375rem; }
  .recstd__k { margin-bottom: 3px; }
  .rec { padding-top: 18px; padding-bottom: 16px; }
  .rec__scope { margin: .5rem 0 .4rem; }
  .mx { padding: 16px 14px 14px; }
  .mx__scroll, .mx__readout, .mx__hint { display: none; }
  .mxlist { display: grid; gap: 10px; }
  .creds, .creds__col:last-child { grid-template-columns: minmax(0, 1fr); }
  .dfacts > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .frag__gallery img { height: 130px; }
  .toc ol { columns: 1; }
}
@media (max-width: 700px) {
  .groups, .com { grid-template-columns: minmax(0, 1fr); }
  .foot__in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .bar__cta-x { display: none; }
  .tgl { width: 36px; padding: 0; justify-content: center; }
  .tgl__label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 520px) {
  .frame { padding: 16px 14px 12px; }
  .facts__row { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 8px 0 9px; }
  .facts__k { padding-top: 0; }
  .fslot__card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "org" "tag"; }
  .fslot .tag--solid { justify-self: start; margin-top: 4px; }
  .frame__slots { gap: 12px 8px; }
  .fslot__card { padding: 10px 9px 10px 11px; }
  .fslot__title { font-size: 1.05rem; }
  .fslot__org { font-size: .875rem; }
  .brand__sub { display: none; }
  .contact { gap: 12px 22px; }
  .seg__btn, .seg--radio label { font-size: .875rem; padding: 7px 10px; gap: 7px; }
  .seg--radio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seg--radio label { min-height: 44px; }
  .cfg__sum { font-size: .75rem; }
  .cfg__sep { display: none; }
}
@media (max-width: 420px) {
  .bar__in { gap: 10px 14px; }
  .brand { gap: 10px; }
  .brand__name { font-size: .875rem; letter-spacing: .06em; }
  .bar__tools { gap: 8px; }
}
@media (max-width: 359px) {
  .brand__text { display: none; }
  .frame__slots, .focus .seg { grid-template-columns: minmax(0, 1fr); }
  .seg--radio { grid-template-columns: minmax(0, 1fr); }
  .slots { grid-template-columns: minmax(0, 1fr); }
  .slot { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon top" "icon tag" "icon label" "icon fig" "cta cta"; column-gap: 12px; }
  .bar__cta { padding-inline: 10px; }
  .frag__gallery { grid-template-columns: minmax(0, 1fr); }
  .frag__gallery img { height: auto; }
  .hero h1 { font-size: 3.1rem; }
  .closing__mail { font-size: 1.45rem; }
  .cfg__bar { flex-wrap: wrap; }
  .cfg__btn { margin-left: 0; }
}
/* Landscape phones and short windows: only the jump strip sticks; nothing scrolls inside the page */
@media (max-height: 500px) {
  .bar { position: static; }
  html { scroll-padding-top: 12px; }
  .cfg[data-js] { position: static; margin-bottom: 0 !important; }
  .cfg[data-condensed] .cfg__bar { display: none; }
  .cfg[data-condensed] .cfg__body { display: grid; position: static; box-shadow: none; border: 0; max-height: none; }
  .loadout { position: relative; top: 0; max-height: none; overflow: visible; }
  .loadout::after { display: none; }
}

/* ---------- Print: light, linear, complete ---------- */
@media print {
  :root:not([data-theme]), :root[data-theme="dark"], :root[data-theme="light"] {
    color-scheme: light;
    --bg: #fff; --panel: #fff; --raise: #fff;
    --line: #c9d1d3; --line-2: #b4bec1;
    --ink: #111; --ink-2: #2a2f31; --ink-3: #4a5356; --head: #111;
    --cyan: #0b5566; --gold: #7a4d00; --violet: #4b2d9c; --on-acc: #fff;
    --cyan-c: 11 85 102; --gold-c: 122 77 0; --violet-c: 75 45 156;
    --card-1: #fff; --card-2: #fff; --bay-1: #fff; --bay-2: #fff; --atlas-1: #fff; --atlas-2: #fff;
    --frame-1: #fff; --frame-2: #fff; --fslot-bg: #fff; --toc-bg: #fff; --inset-bg: #fff; --foot-bg: #fff;
    --fill: transparent; --fill-hi: transparent; --fill-lo: transparent;
    --tile-1: #fff; --tile-2: #fff; --tile-ink: #111; --tile-line: #111; --tile-glow: none;
    --a-cobalt: #2446a8; --a-violet: #5a3bb0; --a-amber: #7a4d00; --a-teal: #0d6b5f;
    --a-crimson: #a3182f; --a-orange: #9a4210; --a-sky: #0b5a8a; --a-magenta: #8f1f74; --a-green: #1e6b34;
  }
  @page { margin: 16mm 14mm; }
  body { background: #fff; color: #111; font-size: 10.5pt; line-height: 1.45; }
  a { color: #111; }
  .more > summary, .skip, .bar, .jump, .toc, .loadout::after, .frame__foot, .bay__note, .cfg, .loadout, .showing, .records__also, .rec__match, .slot__cta, .slot__no, .rec__media, .photos, .rec__more summary, .foot__prov a, .mx__readout, .mx__hint, .mxlist, .inspector__ev { display: none !important; }
  .atlas .rec { display: block !important; }
  .rec__more > :not(summary) { display: block; }
  details::details-content { content-visibility: visible; display: contents; }
  .hero { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "id" "frame" "text"; padding-top: 0; }
  .hero h1 { font-size: 30pt; }
  .frame { margin: 8pt 0 10pt; padding: 8pt 10pt; border-radius: 4px; border-top-width: 1px; }
  .frame__head { display: none; }
  .frame__title { font-size: 13pt; }
  .facts__row { grid-template-columns: 7.5rem minmax(0, 1fr); padding: 3pt 0; break-inside: avoid; }
  .facts__v { font-size: 10pt; }
  .frame__slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fslot__card { display: block; padding: 4pt 6pt; break-inside: avoid; }
  .fslot__card > span { display: block; }
  .fslot .tag--solid { margin-top: 2pt; display: inline-block; }
  .frame, .bay, .atlas__panel, .mx, .dossier, .group, .com__card, .closing, .dossier__ev, .evbox, .slot, .fslot__card, .standard, .status, .frag__where, .frag__check, .recstd, .com__ev { background: none !important; box-shadow: none !important; }
  .bay, .atlas__panel, .mx { border: 0; border-radius: 0; }
  .bay { grid-template-columns: 1fr; }
  .bay__slots { padding: 0; border: 0; }
  .frame::before, body::before { display: none; }
  .slots { grid-template-columns: repeat(3, 1fr); gap: 6pt; }
  .slot { break-inside: avoid; padding: 6pt; transform: none !important; }
  .slot__tag, .tag--solid { background: none; color: var(--acc); border: 1px solid var(--acc); }
  .inspector { padding: 10pt 0 0; }
  .atlas__stage { display: block; }
  .atlas__stage::before { display: none; }
  .atlas__head, .records, .atlas__foot { padding-inline: 0; }
  .rec, .dossier, .group, .com__card, .cred, .certs li { break-inside: avoid; }
  .chip { display: inline; border: 0; padding: 0; min-height: 0; color: #111; white-space: normal; font-size: 9.5pt; }
  .evbox:not(.evbox--none), .atlas__head, #strengths .sect__lede, .inspector__k { display: none !important; }
  .records__title { font-size: 18pt; }
  .chip::after { content: " (" attr(data-url) ")"; font-size: 8.5pt; color: #444; overflow-wrap: anywhere; }
  .chip[aria-current="true"] { background: none; color: #111; }
  .chips { display: block; }
  .chips li { margin: 0 0 2pt; }
  .recstd { padding: 4pt 8pt; font-size: 9.5pt; }
  .mx { padding: 0; }
  .mx__scroll { overflow: visible; }
  .mx__table { min-width: 0; font-size: 8.5pt; }
  .mx__table thead th { font-size: 7.5pt; padding: 0 2pt 4pt; }
  .mx__table th[scope="row"] { position: static; font-size: 8.5pt; padding: 3pt 4pt 3pt 0; }
  .mx__table th[scope="rowgroup"] { padding: 8pt 0 3pt; font-size: 10pt; }
  .mx__c { padding: 2pt; }
  .mx__dot { width: 9pt; height: 9pt; border: 2px solid var(--acc); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .dossier__body { grid-template-columns: 1fr; }
  .groups, .com { grid-template-columns: 1fr 1fr; }
  .sect, .atlas { padding-top: 16pt; }
  .sec__head { padding-top: 6pt; break-after: avoid; }
  .h2 { font-size: 18pt; }
  .foot { margin-top: 16pt; background: none; }
  .foot__in { grid-template-columns: 1fr 1fr; padding-block: 10pt; }
}