/* 05 Doctrine Atlas
   Two themes, both after the sto-stage pages:
   - dark (native): the torpedo guide's teal-black editorial, cyan subheads, gold // markers;
   - light: the Command Deck's cream field manual, warm paper ground, teal-black ink, deep teal
     subheads and bronze // markers.
   The theme lives on <html data-theme="light|dark"> (kit theme-init.js); with JavaScript off,
   :root:not([data-theme]) gets the native dark tokens. Every colour below is a token, so setting
   the attribute alone switches the whole page.
   Contrast (WCAG, computed for the token pairs actually used):
     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
     LIGHT ink #13242b on paper 13.7, on card 15.5 · ink-2 #33464d on paper 8.5 · ink-3 #485a5e on paper 6.1,
           on footer 5.0 · 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
     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;
}

/* Dark: native theme, and the no-JavaScript fallback */
:root:not([data-theme]),
: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;
  --cyan: #67d8ec;
  --gold: #f3bb52;
  --violet: #b9a2ff;
  --on-acc: #061014;
  --link-hover: #9ae7f4;
  /* channel triplets for translucent fills: rgb(var(--cyan-c) / .1) */
  --cyan-c: 103 216 236;
  --gold-c: 243 187 82;
  --violet-c: 185 162 255;
  --shadow-c: 0 0 0;
  /* surfaces */
  --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: rgba(14, 36, 43, .92);
  --frame-2: rgba(7, 20, 25, .92);
  --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;
}

/* Light: the Command Deck's cream field manual */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f2ede2;
  --panel: #f7f2e7;
  --raise: #fffbf2;
  --line: #ddd3bf;
  --line-2: #c6b79b;
  --ink: #13242b;
  --ink-2: #33464d;
  --ink-3: #485a5e;
  --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, .07);
  --page-glow-2: rgba(10, 95, 111, .04);
  --page-grid: rgba(19, 36, 43, .045);
  --bar-bg: rgba(242, 237, 226, .93);
  --card-1: #fffbf2;
  --card-2: #fbf6ea;
  --bay-1: #fbf7ee;
  --bay-2: #f4eee1;
  --atlas-1: #fbf7ee;
  --atlas-2: #f6f0e3;
  --frame-1: #fffbf2;
  --frame-2: #f8f2e5;
  --fslot-bg: #fffdf8;
  --toc-bg: #fbf7ee;
  --inset-bg: rgba(242, 237, 226, .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: #13242b;
  --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;
}

[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); }

/* ---------- 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: 8px; 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(--display); text-transform: uppercase; letter-spacing: .14em; 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__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; }
/* the "on" look follows the theme itself, so it can never disagree with the page */
: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; }

/* ---------- Hero ---------- */
/* Round 3: name (id), key-facts frame, then summary (text). Wide screens: id and text on the left, the frame
   on the right across both rows; one column: id, frame, text. */
.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; }
.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; }

/* Current frame: the 4-slot "ship" panel */
.frame { position: relative; border: 1px solid var(--line-2); border-radius: 14px; padding: 20px 20px 14px; background: linear-gradient(180deg, var(--frame-1), var(--frame-2)); box-shadow: 0 30px 70px -40px rgb(var(--shadow-c) / calc(.9 * var(--shadow-a) / .9)); overflow: hidden; }
.frame::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 55% at 50% 100%, rgb(var(--cyan-c) / .13), transparent 70%); pointer-events: none; }
.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; }
.frame__lede { color: var(--ink-2); font-size: 1rem; position: relative; margin-bottom: 16px; }
/* Key facts (kit.facts_strip): a readout in the frame, mono cyan keys, the Disney role first. */
.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); }
/* The concurrent roles: the other current slots, under the facts. */
.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 ---------- */
.sect { padding-top: clamp(56px, 7vw, 92px); }
.h2 { display: flex; align-items: baseline; gap: .45em; padding-top: 26px; border-top: 1px solid var(--line); font: 600 clamp(2rem, 3.6vw, 2.8rem)/1.05 var(--display); }
.slashes { color: var(--gold); font-size: .72em; font-style: italic; letter-spacing: -.08em; flex: none; }
.sect__lede { color: var(--ink-2); max-width: 70ch; margin: .7rem 0 1.8rem; }

/* ---------- Strengths: slot bay ---------- */
.bay { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); border: 1px solid var(--line-2); border-radius: 14px; background: linear-gradient(180deg, var(--bay-1), var(--bay-2)); box-shadow: 0 30px 80px -46px rgb(var(--shadow-c) / calc(.9 * var(--shadow-a) / .9)); }
.bay__slots { position: relative; display: flex; flex-direction: column; padding: 24px; border-right: 1px solid var(--line); }
.bay__slots::before { content: ""; position: absolute; inset: 0; border-radius: 14px 0 0 14px; pointer-events: none;
  background:
    radial-gradient(48% 42% at 50% 104%, rgb(var(--cyan-c) / .14), transparent 72%),
    linear-gradient(90deg, transparent calc(50% - .5px), rgb(var(--cyan-c) / .10) calc(50% - .5px), rgb(var(--cyan-c) / .10) calc(50% + .5px), transparent calc(50% + .5px)); }
.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: "no 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__no { grid-area: 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__deck { position: relative; flex: 1 0 70px; min-height: 70px; }
.bay__deck::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 16px; width: 1px; background: linear-gradient(180deg, rgb(var(--cyan-c) / .5), rgb(var(--cyan-c) / 0)); }
.bay__deck span { position: absolute; left: 50%; bottom: 8px; width: 56%; height: 34px; transform: translateX(-50%); border: 1px solid rgb(var(--cyan-c) / .26); border-radius: 50%; box-shadow: 0 0 40px -6px rgb(var(--cyan-c) / .25), inset 0 0 24px -8px rgb(var(--cyan-c) / .3); }
.bay__deck span::after { content: ""; position: absolute; inset: 9px 22%; border: 1px solid rgb(var(--cyan-c) / .16); border-radius: 50%; }
.bay__note { position: relative; margin: 6px 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); }

/* ---------- 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; }
.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__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); }

/* ---------- Doctrine Atlas ---------- */
.atlas { padding-top: clamp(56px, 7vw, 92px); }
.atlas__panel { border: 1px solid var(--line-2); border-radius: 16px; background: linear-gradient(180deg, var(--atlas-1), var(--atlas-2) 40%); box-shadow: 0 40px 90px -50px rgb(var(--shadow-c) / calc(.95 * var(--shadow-a) / .9)), inset 0 1px 0 rgb(var(--cyan-c) / .08); }
.atlas__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 26px 28px 22px; border-bottom: 1px solid var(--line); }
.atlas__title { font: 600 clamp(2rem, 3.6vw, 2.75rem)/1.05 var(--display); color: var(--cyan); margin: .35rem 0 .5rem; }
.atlas__lede { margin: 0; max-width: 70ch; 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; }

.atlas__stage {
  display: grid;
  grid-template-columns: var(--colA) minmax(0, 1fr);
  grid-template-areas: "focus show" "loadout records";
  position: relative;
}
/* the column divider is a pseudo-element, so it never counts as a text background */
.atlas__stage::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--colA); width: 1px; background: var(--line); pointer-events: none; }
.focus { grid-area: focus; padding: 20px 24px; border-bottom: 1px solid var(--line); min-width: 0; }
.show { grid-area: show; padding: 20px 24px; margin: 0; border: 0; border-bottom: 1px solid var(--line); 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); }
/* Each radio sits invisibly over its own label, so the hit area is the whole label (and no 1 px target) */
.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)); }

.loadout { grid-area: loadout; align-self: start; position: sticky; top: calc(var(--bar-h) + 14px); max-height: calc(100vh - var(--bar-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); }
.showing { margin: 0; font: 600 .75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.showing span { display: none; color: var(--gold); }
.atlas:has(#show-all:checked) .showing [data-v="all"],
.atlas:has(#show-current:checked) .showing [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); }
.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; }
.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); }

/* 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; }
.chips--inline { display: inline-flex; margin: 0 0 0 4px; vertical-align: middle; }
.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); }

/* ---------- 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; }
.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; }

/* ---------- 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; }
.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; }

/* ---------- 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; }

/* ---------- 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; }
.com__ev { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 1rem; }
.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); }

/* ---------- Contact closing box ---------- */
.closing { margin-top: 10px; padding: clamp(22px, 4vw, 40px); border: 1px solid rgb(var(--violet-c) / .3); border-left: 4px solid var(--violet); border-radius: 0 14px 14px 0; background: linear-gradient(90deg, rgb(var(--violet-c) / .10), rgb(var(--violet-c) / .02)); }
/* light: a cream doctrine box with the violet rule, after the Command Deck's quote box */
:root[data-theme="light"] .closing { border-color: var(--line-2); border-left-color: var(--violet); background: linear-gradient(90deg, rgb(var(--violet-c) / .07), rgb(var(--violet-c) / 0) 70%), var(--raise); }
.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 { 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: full bar, two-column 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.
   768-960: the bar becomes two rows (brand and tools, then a scrolling section strip) and stops
   sticking; atlas stacks Focus, Loadout, Show, Experience; skills and community stay two-up.
   Phones: two-up slots, one-column cards; 280-359 px hides the brand words (the SM tile keeps
   its label) and stacks the Focus control. Landscape phones (height <= 500 px) get nothing
   sticky and no nested scroll. */
@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); }
  .bay__slots::before { border-radius: 14px 14px 0 0; }
  .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; }
  html { scroll-padding-top: 12px; }
  .bar__in { flex-wrap: wrap; padding-bottom: 0; }
  .bar__nav { order: 3; flex: 1 0 100%; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--line);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .bar__nav::-webkit-scrollbar { display: none; }
  .bar__nav a { padding-block: 11px; }
  .bar__tools { margin-left: auto; }
  .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; }
  .atlas__stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "focus" "loadout" "show" "records"; }
  .atlas__stage::before { display: none; }
  .loadout { position: relative; top: 0; max-height: 72vh; border-bottom: 1px solid var(--line); }
  .focus { border-bottom: 0; }
  .show { 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; }
  .bay__deck { flex-basis: 54px; min-height: 54px; }
  .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; }
  .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; }
  .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; }
  /* Show: an even two-up grid instead of a ragged wrap; long lane names take a full row */
  .seg--radio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seg--radio label { min-height: 44px; }
}
@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 no" "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; }
}
/* Landscape phones and short windows: nothing sticks, nothing scrolls inside the page */
@media (max-height: 500px) {
  .bar { position: static; }
  html { scroll-padding-top: 12px; }
  .loadout { position: relative; top: 0; max-height: none; overflow: visible; }
  .loadout::after { display: none; }
}

/* ---------- Print: light, linear, complete ---------- */
@media print {
  /* Print is always light, whatever the screen theme */
  :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;
    --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; }
  .skip, .bar, .toc, .frame__ship, .bay__deck, .loadout::after, .frame__foot, .bay__note, .focus, .show, .loadout, .showing, .records__also, .rec__match, .slot__cta, .slot__no, .rec__media, .photos, .rec__more summary, .foot__prov a { 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; }
  .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, .dossier, .group, .com__card, .closing, .dossier__ev, .evbox, .slot, .fslot__card, .standard, .status, .frag__where, .frag__check { background: none !important; box-shadow: none !important; }
  .bay, .atlas__panel { border: 0; }
  .bay { grid-template-columns: 1fr; }
  .bay__slots { padding: 0; border: 0; }
  .bay__slots::before, .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; }
  .chips--inline { display: inline !important; }
  .chips--inline .chip + .chip::before { content: "; "; }
  .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; }
  .dossier__body { grid-template-columns: 1fr; }
  .groups, .com { grid-template-columns: 1fr 1fr; }
  .sect, .atlas { padding-top: 16pt; }
  .h2 { font-size: 18pt; padding-top: 8pt; break-after: avoid; }
  .foot { margin-top: 16pt; background: none; }
  .foot__in { grid-template-columns: 1fr 1fr; padding-block: 10pt; }
}