/* ============================================================
   Deepak Raj — security research portfolio
   ------------------------------------------------------------
   Design direction: premium dark research laboratory.
   Editorial type, hairline structure, one accent that means
   "surface" and one that means "offensive". Motion is used to
   show relationships, never for decoration.

   Sheet order
     01  tokens
     02  reset & base
     03  typography primitives
     04  buttons, chips, tags
     05  shell — rail, topbar, progress
     06  section frame
     07  hero
     08  attack surface map
     09  reconnaissance
     10  attack surface inventory
     11  exploitation (case studies)
     12  privilege escalation (career chain)
     13  persistence
     14  exfiltration
     15  exit (contact)
     16  footer
     17  command palette & toasts
     18  reveal motion
     19  responsive
     20  reduced motion, forced colors, print
   ============================================================ */


/* ── 01 · tokens ─────────────────────────────────────────── */

:root {
  --bg:            #050505;
  --surface:       #0D0D0F;
  --surface-2:     #151518;
  --surface-3:     #1C1C21;

  --text:          #F4F4F5;
  --text-dim:      #A1A1AA;
  --text-faint:    #71717A;

  --cyan:          #00E5FF;
  --violet:        #8B5CF6;
  --red:           #FF3B30;

  --cyan-soft:     rgba(0, 229, 255, 0.10);
  --violet-soft:   rgba(139, 92, 246, 0.12);
  --red-soft:      rgba(255, 59, 48, 0.10);

  --line:          rgba(244, 244, 245, 0.09);
  --line-2:        rgba(244, 244, 245, 0.16);
  --line-3:        rgba(244, 244, 245, 0.28);

  --f-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  --r-sm: 4px;
  --r:    8px;
  --r-lg: 14px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --rail-w: 250px;
  --page:   1180px;
  --gutter: clamp(20px, 4vw, 64px);
}


/* ── 02 · reset & base ───────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* One fixed, almost-imperceptible field so the black reads as
     depth rather than as an empty canvas. No animation. */
  background-image:
    radial-gradient(900px circle at 78% -8%,  rgba(0, 229, 255, 0.055), transparent 62%),
    radial-gradient(700px circle at 4% 46%,   rgba(139, 92, 246, 0.045), transparent 60%);
  background-attachment: fixed;
}

img, svg { display: block; max-width: 100%; }

svg:not(.sprite) { width: 1em; height: 1em; flex: none; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

button, input, textarea { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

::selection { background: rgba(0, 229, 255, 0.22); color: #fff; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Focus: always visible, never colour-only — the ring is a shape. */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 200;
  padding: 10px 18px;
  background: var(--cyan); color: #001014;
  font-weight: 600; font-size: 0.875rem;
  border-radius: var(--r);
  transform: translateY(-200%);
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translateY(0); }


/* ── 03 · typography primitives ──────────────────────────── */

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.mono-tag {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  white-space: nowrap;
}
.mono-tag-red { color: #FF7A73; border-color: rgba(255, 59, 48, 0.32); background: var(--red-soft); }

.kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 22px;
}
.kicker i { font-style: normal; color: var(--cyan); }
.kicker span { white-space: nowrap; }
.kicker::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--line-2), transparent);
}

.sub {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-bottom: 14px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.dot {
  display: inline-block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--text-faint);
  vertical-align: middle;
  margin: 0 10px 3px;
}


/* ── 04 · buttons, chips ─────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: var(--r);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
              color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn svg { width: 1.05em; height: 1.05em; transition: transform 0.25s var(--ease); }

.btn-solid { background: var(--cyan); color: #00161B; font-weight: 600; }
.btn-solid:hover { background: #5FEFFF; transform: translateY(-1px); }
.btn-solid:hover svg { transform: translateX(3px); }

.btn-line { border-color: var(--line-2); color: var(--text); }
.btn-line:hover { border-color: var(--line-3); background: var(--surface-2); transform: translateY(-1px); }

.btn-block { width: 100%; justify-content: center; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  font-size: 0.8125rem;
  color: var(--text-dim);
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--surface);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.chips li:hover { color: var(--text); border-color: var(--line-2); }

.chips-sm li {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--r-sm);
}


/* ── 05 · shell: rail, topbar, progress ──────────────────── */

.progress {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  height: 2px; background: transparent;
  pointer-events: none;
}
.progress span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--violet), var(--cyan));
}

.rail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 80;
  width: var(--rail-w);
  display: flex;
  flex-direction: column;
  padding: 30px 22px 26px;
  background: rgba(5, 5, 5, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-right: 1px solid var(--line);
}

.rail-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 40px; }
.rail-mark {
  position: relative;
  width: 26px; height: 26px; flex: none;
  border: 1px solid var(--cyan);
  border-radius: 50%;
}
.rail-mark::after {
  content: '';
  position: absolute; inset: 50% auto auto 50%;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--cyan);
}
.rail-brand-text { display: flex; flex-direction: column; line-height: 1.3; }
.rail-brand-text strong { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.02em; }
.rail-brand-text span {
  font-family: var(--f-mono); font-size: 0.625rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint);
}

.rail-nav { flex: 1 1 auto; overflow-y: auto; }
.rail-nav ol { display: flex; flex-direction: column; gap: 1px; }

.rail-link {
  position: relative;
  display: grid;
  grid-template-columns: 26px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: baseline;
  padding: 9px 12px 9px 10px;
  border-radius: var(--r);
  border-left: 2px solid transparent;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.rail-link i {
  grid-row: 1 / 3;
  align-self: center;
  font-style: normal;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  color: var(--text-faint);
  transition: color 0.2s var(--ease);
}
.rail-link b {
  font-size: 0.875rem; font-weight: 500; letter-spacing: -0.01em;
  color: var(--text-dim);
  transition: color 0.2s var(--ease);
}
.rail-link span {
  font-family: var(--f-mono); font-size: 0.625rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint);
}
.rail-link:hover { background: var(--surface); }
.rail-link:hover b { color: var(--text); }

.rail-link.is-current { background: var(--surface-2); border-left-color: var(--cyan); }
.rail-link.is-current i { color: var(--cyan); }
.rail-link.is-current b { color: var(--text); }
/* Never colour alone — the current stage is also marked in text. */
.rail-link.is-current span::after { content: ' · here'; color: var(--cyan); }

.rail-foot { padding-top: 20px; border-top: 1px solid var(--line); }

.palette-trigger {
  display: none;
  width: 100%;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  font-size: 0.8125rem;
  color: var(--text-faint);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.js .palette-trigger { display: flex; }
.palette-trigger:hover { border-color: var(--line-2); color: var(--text-dim); }
.palette-trigger span { flex: 1 1 auto; text-align: left; }
.palette-trigger svg { width: 0.95em; height: 0.95em; }

kbd {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  padding: 2px 5px;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  background: var(--surface-2);
  color: var(--text-dim);
}

.rail-social { display: flex; gap: 6px; }
.rail-social a {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text-faint);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.rail-social a:hover { color: var(--cyan); border-color: rgba(0, 229, 255, 0.4); background: var(--cyan-soft); }
.rail-social svg { width: 15px; height: 15px; }

.topbar { display: none; }


/* ── 06 · section frame ──────────────────────────────────── */

#main { margin-left: var(--rail-w); }

.sec {
  max-width: var(--page);
  margin-inline: auto;
  padding: clamp(72px, 9vw, 118px) var(--gutter);
  border-top: 1px solid var(--line);
}
.sec-hero { border-top: 0; }

.sec-head { margin-bottom: clamp(38px, 5vw, 62px); }
.sec-head h2 {
  font-size: clamp(1.9rem, 3.5vw, 2.9rem);
  letter-spacing: -0.035em;
  max-width: 20ch;
}
.sec-lead {
  margin-top: 16px;
  max-width: 62ch;
  color: var(--text-dim);
  font-size: 1.0625rem;
}


/* ── 07 · hero ───────────────────────────────────────────── */

.sec-hero { padding-top: clamp(64px, 8vw, 104px); }

.hero { display: grid; gap: clamp(40px, 5vw, 64px); align-items: start; }

.hero-name {
  font-size: clamp(3rem, 8.5vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.94;
  margin-bottom: 20px;
}

.hero-role {
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 26px;
}
.hero-role .dot { background: rgba(0, 229, 255, 0.45); }

.hero-lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 52ch;
  margin-bottom: 30px;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 34px;
  font-size: 0.8125rem;
  color: var(--text-faint);
}
.hero-meta li { display: flex; align-items: center; gap: 7px; }
.hero-meta svg { width: 14px; height: 14px; color: var(--text-faint); }

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }


/* ── 08 · attack surface map ─────────────────────────────── */

.map-frame {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, var(--surface) 0%, rgba(5, 5, 5, 0.4) 100%);
  padding: 16px 16px 14px;
}

.map-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.map-hint {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.map { position: relative; padding: 18px 4px 6px; }

.map-edges, .map-hub { display: none; }

/* Graph edges. Hub spokes carry a slow dash drift so the map
   reads as something being traced rather than a static diagram;
   sibling links are flat, marking structure instead of flow. */
.edge {
  stroke: var(--line-2);
  stroke-width: 1;
  transition: stroke 0.25s var(--ease), stroke-width 0.25s var(--ease);
}
.edge-spoke {
  stroke-dasharray: 2 5;
  animation: edge-drift 9s linear infinite;
}
.edge-sibling { stroke: var(--line); }

/* An active spoke takes its cluster's tone, so the line and the
   node it leads to always read as the same thing. */
.edge.is-active { stroke: var(--cyan); stroke-width: 1.5; animation-duration: 3s; }
.edge.is-active[data-tone="violet"] { stroke: var(--violet); }
.edge.is-active[data-tone="red"]    { stroke: var(--red); }

@keyframes edge-drift {
  to { stroke-dashoffset: -70; }
}

/* Node list — default (no JS / small screens) is a plain index. */
.map-nodes { display: flex; flex-wrap: wrap; gap: 8px; }

.node {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--surface-2);
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
  transition: color 0.22s var(--ease), border-color 0.22s var(--ease),
              background 0.22s var(--ease), transform 0.22s var(--ease);
}
.node-dot {
  width: 6px; height: 6px; flex: none;
  border-radius: 50%;
  background: currentColor;
  transition: box-shadow 0.22s var(--ease);
}

/* Cluster identity. Colour is reinforced by the cluster name in
   every panel heading and in the legend, so it never carries
   meaning on its own. */
[data-cluster="surface"]    .node { --tone: var(--cyan);   --tone-soft: var(--cyan-soft);   --tone-line: rgba(0, 229, 255, 0.42); }
[data-cluster="emerging"]   .node { --tone: var(--violet); --tone-soft: var(--violet-soft); --tone-line: rgba(139, 92, 246, 0.5); }
[data-cluster="operations"] .node { --tone: var(--red);    --tone-soft: var(--red-soft);    --tone-line: rgba(255, 59, 48, 0.42); }

.node .node-dot { background: var(--tone); }

.node:hover,
.node:focus-visible {
  color: var(--text);
  border-color: var(--tone-line);
  background: var(--tone-soft);
}

.node[aria-checked="true"] {
  color: var(--text);
  border-color: var(--tone-line);
  background: var(--tone-soft);
}
.node[aria-checked="true"] .node-dot { box-shadow: 0 0 0 4px var(--tone-soft); }

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-top: 14px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.map-legend li { display: flex; align-items: center; gap: 7px; }
.sw { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.sw-cyan { background: var(--cyan); }
.sw-violet { background: var(--violet); }
.sw-red { background: var(--red); }

/* Readout */
.map-detail {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 24px clamp(20px, 3vw, 30px);
  display: grid;
  gap: 22px;
}

.map-detail-idle {
  display: none;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--text-dim);
  font-size: 0.9375rem;
  max-width: 72ch;
}
.js .map-detail-idle { display: flex; }
.map-detail.has-selection .map-detail-idle { display: none; }

.panel { display: grid; gap: 14px; }
.js .panel { display: none; }
.js .panel.is-active { display: grid; }

.panel-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 1.375rem;
  letter-spacing: -0.025em;
}
.panel-cluster {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
[data-cluster="surface"]    > .panel-title .panel-cluster { color: #7FE9FB; border-color: rgba(0, 229, 255, 0.3); }
[data-cluster="emerging"]   > .panel-title .panel-cluster { color: #C4B0FA; border-color: rgba(139, 92, 246, 0.4); }
[data-cluster="operations"] > .panel-title .panel-cluster { color: #FF8B85; border-color: rgba(255, 59, 48, 0.34); }

.panel-summary { color: var(--text-dim); max-width: 68ch; }

.panel-skills { display: flex; flex-wrap: wrap; gap: 7px; }
.panel-skills li {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}

.panel-evidence { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 16px; }
.panel-evidence li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 20px;
  align-items: baseline;
  font-size: 0.9375rem;
  color: var(--text-dim);
}
.panel-evidence li::before {
  content: '';
  grid-row: 1;
  grid-column: 1;
  width: 0;
}
.panel-evidence span { position: relative; padding-left: 18px; }
.panel-evidence span::before {
  content: '';
  position: absolute; left: 0; top: 0.62em;
  width: 9px; height: 1px;
  background: var(--line-3);
}
.panel-evidence cite {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-style: normal;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  white-space: nowrap;
}

.panel-jump {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cyan);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease);
}
.panel-jump svg { width: 1em; height: 1em; transition: transform 0.2s var(--ease); }
.panel-jump:hover { border-bottom-color: currentColor; }
.panel-jump:hover svg { transform: translateX(3px); }


/* ── 09 · reconnaissance ─────────────────────────────────── */

.recon-grid { display: grid; gap: clamp(34px, 4vw, 56px); }

.prose { max-width: 66ch; }
.prose p { margin-bottom: 20px; color: var(--text-dim); }
.prose strong { color: var(--text); font-weight: 600; }
.prose-lead {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.4;
  letter-spacing: -0.025em;
  color: var(--text) !important;
  margin-bottom: 26px !important;
  text-wrap: balance;
}

.social-row { display: grid; gap: 1px; margin-top: 32px; border-top: 1px solid var(--line); }
.social-row a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: padding-left 0.22s var(--ease), color 0.2s var(--ease);
}
.social-row svg { width: 16px; height: 16px; color: var(--text-faint); transition: color 0.2s var(--ease); }
.social-row span {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-faint);
}
.social-row a:hover { padding-left: 12px; }
.social-row a:hover svg { color: var(--cyan); }

.dossier {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 22px;
  align-self: start;
}
.dossier-head { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.dossier dl { display: grid; gap: 1px; }
.dossier dl > div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.dossier dt {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 6px;
}
.dossier dd { font-size: 0.9375rem; font-weight: 500; line-height: 1.45; }
.dossier dd span { font-weight: 400; color: var(--text-dim); }

.dossier-marks { display: grid; gap: 14px; padding-top: 20px; }
.dossier-marks li { display: grid; gap: 2px; padding-left: 14px; border-left: 2px solid var(--cyan); }
.dossier-marks li:nth-child(2) { border-left-color: var(--violet); }
.dossier-marks li:nth-child(3) { border-left-color: var(--red); }
.dossier-marks b { font-size: 0.875rem; font-weight: 600; }
.dossier-marks span { font-size: 0.8125rem; color: var(--text-dim); line-height: 1.4; }


/* ── 10 · attack surface inventory ───────────────────────── */

.domains {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.domain {
  background: var(--bg);
  padding: 26px clamp(20px, 2.5vw, 30px) 28px;
  transition: background 0.25s var(--ease);
}
.domain:hover { background: var(--surface); }
.domain h3 { font-size: 1.125rem; margin-bottom: 6px; }
.domain-note {
  font-size: 0.8125rem;
  color: var(--text-faint);
  margin-bottom: 18px;
}


/* ── 11 · exploitation ───────────────────────────────────── */

.cases { display: grid; gap: 14px; }

.case {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.25s var(--ease);
}
.case:hover { border-color: var(--line-2); }
.case[open] { border-color: var(--line-2); background: var(--surface-2); }

.case > summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px 20px;
  padding: 22px clamp(18px, 2.5vw, 28px);
  cursor: pointer;
  list-style: none;
}
.case > summary::-webkit-details-marker { display: none; }
.case > summary::marker { content: ''; }

.case-idx {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  color: var(--text-faint);
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.case[open] .case-idx { color: var(--cyan); border-color: rgba(0, 229, 255, 0.35); }

.case-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.case-name { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.025em; }
.case-kind {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.case-tagline {
  grid-column: 2;
  font-size: 0.9375rem;
  color: var(--text-dim);
  max-width: 62ch;
}

.case-chevron {
  position: relative;
  grid-row: 1 / 3;
  grid-column: 3;
  width: 26px; height: 26px;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: border-color 0.25s var(--ease), transform 0.3s var(--ease);
}
.case-chevron::before,
.case-chevron::after {
  content: '';
  position: absolute; inset: 50% auto auto 50%;
  background: var(--text-dim);
  transition: opacity 0.25s var(--ease), background 0.25s var(--ease);
}
.case-chevron::before { width: 10px; height: 1px; margin: 0 0 0 -5px; }
.case-chevron::after  { width: 1px; height: 10px; margin: -5px 0 0 0; }
/* Plus rotates a quarter turn while the horizontal stroke fades,
   so it resolves into a minus rather than an upright bar. */
.case[open] .case-chevron { border-color: rgba(0, 229, 255, 0.35); transform: rotate(90deg); }
.case[open] .case-chevron::before { opacity: 0; }
.case[open] .case-chevron::after { background: var(--cyan); }
.case > summary:hover .case-chevron { border-color: var(--line-3); }

.case-body {
  padding: 4px clamp(18px, 2.5vw, 28px) 26px;
  display: grid;
  gap: 20px;
}

.case-fields { display: grid; gap: 1px; border-top: 1px solid var(--line); }
.case-fields > div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 6px 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.case-fields dt {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-top: 3px;
}
.case-fields dd { color: var(--text-dim); font-size: 0.9375rem; max-width: 68ch; }
.case-fields dd strong { color: var(--text); font-weight: 500; }

.case-link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  font-size: 0.875rem;
  font-weight: 500;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}
.case-link svg { width: 1em; height: 1em; }
.case-link:hover { border-color: rgba(0, 229, 255, 0.45); background: var(--cyan-soft); color: var(--cyan); }


/* ── 12 · privilege escalation ───────────────────────────── */

.chain { display: grid; }

.chain-item { display: grid; grid-template-columns: 34px 1fr; gap: 0 clamp(16px, 2.5vw, 28px); }

.chain-rail { position: relative; display: flex; justify-content: center; }
.chain-rail::before {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 1px;
  margin-left: -0.5px;
  background: var(--line);
}
.chain-item:first-child .chain-rail::before { top: 12px; }
.chain-item:last-child  .chain-rail::before { bottom: auto; height: 12px; }

.chain-node {
  position: relative;
  z-index: 1;
  width: 9px; height: 9px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line-3);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
.chain-item:first-child .chain-node {
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px var(--cyan-soft);
}
.chain-item:hover .chain-node { border-color: var(--cyan); }

.chain-body { padding-bottom: 42px; }

.chain-when {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 8px;
}
.chain-item:first-child .chain-when { color: var(--cyan); }

.chain-role { font-size: 1.375rem; letter-spacing: -0.03em; }
.chain-org {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 16px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-dim);
}
.chain-org span {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.chain-points { display: grid; gap: 7px; margin-bottom: 16px; }
.chain-points li {
  position: relative;
  padding-left: 20px;
  font-size: 0.9375rem;
  color: var(--text-dim);
  max-width: 72ch;
}
.chain-points li::before {
  content: '';
  position: absolute; left: 0; top: 0.68em;
  width: 10px; height: 1px;
  background: var(--line-3);
}


/* ── 13 · persistence ────────────────────────────────────── */

.persist-grid { display: grid; gap: clamp(38px, 5vw, 64px); }

.certs { display: grid; gap: 1px; }
.certs li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 8px 20px;
  padding: 15px 2px;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.22s var(--ease);
}
.certs li:first-child { border-top: 1px solid var(--line); }
.certs li:hover { padding-left: 10px; }
.certs b {
  font-family: var(--f-mono);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.certs span { font-size: 0.8125rem; color: var(--text-faint); text-align: right; }

.marks { display: grid; gap: 14px; }
.marks li {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 20px 22px;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.marks li:hover { border-color: var(--line-2); background: var(--surface-2); }
.mark-label { margin-bottom: 12px; }
.marks h4 { font-size: 1.0625rem; margin-bottom: 6px; }
.marks p { font-size: 0.9375rem; color: var(--text-dim); }


/* ── 14 · exfiltration ───────────────────────────────────── */

.output {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.out-card {
  background: var(--bg);
  padding: 26px clamp(20px, 2.5vw, 28px);
  display: grid;
  align-content: start;
  gap: 8px;
  transition: background 0.25s var(--ease);
}
.out-card:hover { background: var(--surface); }
.out-card h3 { font-size: 1.0625rem; }
.out-card p { font-size: 0.9375rem; color: var(--text-dim); }
.out-card a {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  color: var(--cyan);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease);
}
.out-card a svg { width: 0.95em; height: 0.95em; }
.out-card a:hover { border-bottom-color: currentColor; }


/* ── 15 · exit ───────────────────────────────────────────── */

.exit-grid { display: grid; gap: clamp(34px, 4vw, 54px); align-items: start; }

.exit-primary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px 16px;
  padding: 22px 24px;
  margin-bottom: 26px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color 0.22s var(--ease), background 0.22s var(--ease);
}
.exit-primary .mono-tag { grid-column: 1; justify-self: start; background: none; }
.exit-primary-value {
  grid-column: 1;
  font-size: clamp(1rem, 2.2vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  word-break: break-word;
}
.exit-primary svg { grid-row: 1 / 3; grid-column: 2; width: 20px; height: 20px; color: var(--cyan); transition: transform 0.22s var(--ease); }
.exit-primary:hover { border-color: rgba(0, 229, 255, 0.45); background: var(--cyan-soft); }
.exit-primary:hover svg { transform: translateX(4px); }

.exit-list { display: grid; gap: 1px; }
.exit-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 2px;
  border-bottom: 1px solid var(--line);
}
.exit-list li:first-child { border-top: 1px solid var(--line); }
.exit-list > li > svg { width: 16px; height: 16px; margin-top: 4px; color: var(--text-faint); }
.exit-list span { display: grid; gap: 2px; font-size: 0.9375rem; }
.exit-list b {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.exit-list a { color: var(--text); border-bottom: 1px solid var(--line-2); transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
.exit-list a:hover { color: var(--cyan); border-bottom-color: var(--cyan); }

/* Form needs JS to compose the mail draft, so it is only shown
   when JS is running — no dead submit button otherwise. */
.exit-form { display: none; }
.js .exit-form {
  display: grid;
  gap: 16px;
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.form-note { font-size: 0.8125rem; color: var(--text-faint); }

.field { display: grid; gap: 7px; }
.field label {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.field input, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
  font-size: 0.9375rem;
  resize: vertical;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.field input:hover, .field textarea:hover { border-color: var(--line-2); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--cyan); background: var(--surface-2); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.field :is(input, textarea):user-invalid { border-color: var(--red); }


/* ── 16 · footer ─────────────────────────────────────────── */

.foot {
  margin-left: var(--rail-w);
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.foot-inner {
  max-width: var(--page);
  margin-inline: auto;
  padding: 34px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
}
.foot-name { font-size: 0.9375rem; }
.foot-meta { font-size: 0.8125rem; color: var(--text-faint); }
.foot-meta a { border-bottom: 1px solid var(--line-2); }
.foot-meta a:hover { color: var(--cyan); }
.foot-social { display: flex; gap: 8px; margin-left: auto; }
.foot-social a {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text-faint);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.foot-social a:hover { color: var(--cyan); border-color: rgba(0, 229, 255, 0.4); }
.foot-social svg { width: 14px; height: 14px; }
.foot-top {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 0.6875rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-faint);
  transition: color 0.2s var(--ease);
}
.foot-top:hover { color: var(--cyan); }
.foot-top svg { width: 13px; height: 13px; }


/* ── 17 · command palette & toasts ───────────────────────── */

.palette-backdrop {
  position: fixed; inset: 0; z-index: 150;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: clamp(60px, 12vh, 130px) 20px 20px;
  background: rgba(3, 3, 4, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.palette-backdrop[hidden] { display: none; }

.palette {
  width: min(560px, 100%);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  animation: palette-in 0.18s var(--ease-out);
}
@keyframes palette-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.palette-input {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--line);
}
.palette-input > svg { width: 17px; height: 17px; color: var(--text-faint); }
.palette-input input {
  flex: 1 1 auto;
  border: 0;
  background: none;
  font-size: 0.9375rem;
  outline: none;
}
.palette-input input::placeholder { color: var(--text-faint); }
.palette-close {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: var(--r-sm);
  color: var(--text-faint);
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.palette-close:hover { color: var(--text); background: var(--surface-3); }
.palette-close svg { width: 14px; height: 14px; }

.palette-list { max-height: min(46vh, 380px); overflow-y: auto; padding: 6px; }
.palette-list li { border-radius: var(--r); }
.palette-list button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--r);
  text-align: left;
  font-size: 0.9375rem;
  color: var(--text-dim);
}
.palette-list button .p-idx {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  color: var(--text-faint);
  width: 22px; flex: none;
}
.palette-list button .p-label { flex: 1 1 auto; color: var(--text); }
.palette-list button .p-kind {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.palette-list li.is-active button,
.palette-list button:hover { background: var(--surface-3); }
.palette-list li.is-active button { box-shadow: inset 2px 0 0 var(--cyan); }

.palette-empty { padding: 22px 14px; text-align: center; font-size: 0.875rem; color: var(--text-faint); }
.palette-empty code {
  font-family: var(--f-mono); font-size: 0.8125rem; color: var(--text-dim);
}

.palette-foot {
  display: flex;
  gap: 18px;
  padding: 11px 16px;
  border-top: 1px solid var(--line);
  font-size: 0.6875rem;
  color: var(--text-faint);
}
.palette-foot span { display: inline-flex; align-items: center; gap: 5px; }

.toast-stack {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 160;
  display: grid;
  gap: 10px;
  justify-items: end;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(400px, calc(100vw - 40px));
  padding: 13px 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--surface-2);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  font-size: 0.875rem;
  animation: toast-in 0.26s var(--ease-out);
}
.toast-accent { border-left: 2px solid var(--cyan); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.toast.is-out { opacity: 0; transform: translateY(6px); transition: opacity 0.24s, transform 0.24s; }


/* ── 18 · reveal motion ──────────────────────────────────── */

/* .reveal is applied by script.js, so nothing is hidden when
   JavaScript is unavailable. */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}


/* ── 19 · responsive ─────────────────────────────────────── */

/* Desktop: the map becomes a positioned graph. */
@media (min-width: 900px) {
  .js .map {
    aspect-ratio: 1 / 0.86;
    padding: 0;
    margin: 8px 0 4px;
  }
  .js .map-edges {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    overflow: visible;
  }
  .js .map-hub {
    display: grid;
    place-items: center;
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
  }
  .js .hub-ring {
    grid-area: 1 / 1;
    width: 64px; height: 64px;
    border: 1px solid rgba(0, 229, 255, 0.28);
    border-radius: 50%;
  }
  .js .hub-core {
    grid-area: 1 / 1;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 0 6px rgba(0, 229, 255, 0.10);
  }
  .js .hub-label {
    grid-area: 1 / 1;
    align-self: end;
    transform: translateY(30px);
    font-family: var(--f-mono);
    font-size: 0.625rem;
    letter-spacing: 0.2em;
    color: var(--text-faint);
    white-space: nowrap;
  }

  .js .map-nodes { display: block; }
  .js .map-nodes li {
    position: absolute;
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%);
  }
  .js .map-nodes li[hidden] { display: none; }
  .js .map .node { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45); }
  .js .map .node:hover { transform: scale(1.05); }

  /* Cursor-reactive sweep: a soft field that follows the pointer
     inside the map only, so scanning the graph feels physical. */
  .js .map::before {
    content: '';
    position: absolute;
    inset: -10%;
    pointer-events: none;
    background: radial-gradient(190px circle at var(--px, 50%) var(--py, 50%),
                rgba(0, 229, 255, 0.09), transparent 70%);
    opacity: 0;
    transition: opacity 0.4s var(--ease);
  }
  .js .map.is-live::before { opacity: 1; }
}

/* Two-column hero once there is room for the graph. */
@media (min-width: 1080px) {
  .hero {
    grid-template-columns: minmax(320px, 0.9fr) minmax(460px, 1.05fr);
    column-gap: clamp(40px, 4vw, 68px);
  }
  .map-detail { grid-column: 1 / -1; }
  .recon-grid { grid-template-columns: 1fr 340px; }
  .exit-grid  { grid-template-columns: 1fr 1fr; }
  .persist-grid { grid-template-columns: 1fr 1.15fr; }
  .domains { grid-template-columns: repeat(3, 1fr); }
  .output  { grid-template-columns: repeat(3, 1fr); }
  .out-card-wide { grid-column: span 1; }
}

@media (min-width: 700px) and (max-width: 1079px) {
  .domains { grid-template-columns: repeat(2, 1fr); }
  .output  { grid-template-columns: repeat(2, 1fr); }
  .exit-grid { grid-template-columns: 1fr; }
}

/* Tablet / phone: rail collapses into a top bar + drawer. */
@media (max-width: 1079px) {
  #main, .foot { margin-left: 0; }

  html { scroll-padding-top: 78px; }

  .topbar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 85;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 60px;
    padding: 0 clamp(14px, 4vw, 24px);
    background: rgba(5, 5, 5, 0.9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
  }
  .topbar-brand {
    display: flex; align-items: center; gap: 11px;
    margin-right: auto;
    font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.02em;
  }
  .topbar-brand .rail-mark { width: 22px; height: 22px; }
  .topbar-brand .rail-mark::after { width: 6px; height: 6px; margin: -3px 0 0 -3px; }

  .topbar-btn {
    display: none;
    place-items: center;
    width: 38px; height: 38px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    color: var(--text-dim);
  }
  .js .topbar-btn { display: grid; }
  .topbar-btn svg { width: 17px; height: 17px; }
  .topbar-btn .ic-close { display: none; }
  .topbar-btn[aria-expanded="true"] .ic-menu { display: none; }
  .topbar-btn[aria-expanded="true"] .ic-close { display: block; }

  body { padding-top: 60px; }

  .js .rail {
    top: 60px;
    width: min(320px, 86vw);
    transform: translateX(-101%);
    transition: transform 0.3s var(--ease);
    box-shadow: 24px 0 60px rgba(0, 0, 0, 0.5);
  }
  .js .rail.is-open { transform: none; }
  .js .rail-brand { display: none; }

  /* Without JS the drawer cannot be opened, so the stage list is
     rendered inline instead of being trapped off-canvas. */
  html:not(.js) .topbar { display: none; }
  html:not(.js) body { padding-top: 0; }
  html:not(.js) .rail {
    position: static;
    width: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 22px var(--gutter);
  }
  html:not(.js) .rail-nav ol { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  html:not(.js) .rail-link { border-left: 0; border: 1px solid var(--line); }
  html:not(.js) .rail-link span { display: none; }
  html:not(.js) .rail-foot { border-top: 0; padding-top: 16px; }
}

@media (max-width: 899px) {
  .map-title { flex-wrap: wrap; }
  .panel-evidence li { grid-template-columns: 1fr; }
  .panel-evidence cite { padding-left: 18px; white-space: normal; }
}

@media (max-width: 639px) {
  .sec { padding-inline: 20px; }
  .case > summary { grid-template-columns: auto 1fr; row-gap: 10px; }
  .case-chevron { grid-row: 1; grid-column: 2; justify-self: end; }
  .case-tagline { grid-column: 1 / -1; }
  .case-fields > div { grid-template-columns: 1fr; }
  .chain-item { grid-template-columns: 22px 1fr; }
  .certs li { grid-template-columns: 1fr; }
  .certs span { text-align: left; }
  .exit-primary { grid-template-columns: 1fr; }
  .exit-primary svg { grid-row: auto; grid-column: 1; justify-self: start; }
  .foot-inner { flex-direction: column; align-items: flex-start; }
  .foot-social { margin-left: 0; }
  .toast-stack { left: 16px; right: 16px; justify-items: stretch; }
}


/* ── 20 · reduced motion, forced colors, print ───────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .js .map::before { display: none; }
  .edge-spoke { animation: none; stroke-dasharray: none; }
}

@media (forced-colors: active) {
  .node, .btn, .case, .marks li, .dossier, .map-frame, .map-detail { border: 1px solid CanvasText; }
  .node[aria-checked="true"] { forced-color-adjust: none; outline: 2px solid Highlight; }
}

@media print {
  .rail, .topbar, .progress, .palette-backdrop, .toast-stack,
  .map-edges, .map-hub, .map-legend, .foot-top, .exit-form { display: none !important; }
  #main, .foot { margin-left: 0; }
  body { background: #fff; color: #000; }
  .sec { padding: 24px 0; page-break-inside: avoid; }
  .js .panel { display: grid !important; }
  .case-body { display: block !important; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 0.75em; color: #555; }
}