/* ==========================================================================
   SOURCE — style.css
   A CV laid out on a mainboard your browser draws (js/board-art.js). The
   board is the world (js/board.js moves a camera over it); everything here
   sits on top of it.

   Two voices:
     the system  — Saira, caps, tracked: HUD labels, status, navigation, files
     the person  — Archivo, sentence case: names, headings, everything you read

   Sections: tokens · base · world · fx · intro (POST) · stage (bars, credit, targets)
   · panel · panel content · redaction · terminal · toasts · printable CV ·
   print · responsive · reduced motion
   ========================================================================== */

/* ------------------------------------------------------------------- fonts */
/* Self-hosted variable fonts (SIL OFL, see assets/fonts). Weight 100–900 and width axes in one file each. */
@font-face { font-family: "Archivo"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url("../assets/fonts/archivo-latin.woff2") format("woff2-variations"), url("../assets/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url("../assets/fonts/archivo-latin-ext.woff2") format("woff2-variations"), url("../assets/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Saira"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 50% 125%;
  src: url("../assets/fonts/saira-latin.woff2") format("woff2-variations"), url("../assets/fonts/saira-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Saira"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 50% 125%;
  src: url("../assets/fonts/saira-latin-ext.woff2") format("woff2-variations"), url("../assets/fonts/saira-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ------------------------------------------------------------------ tokens */
:root {
  --f-human: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-system: "Saira", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* the board's own colours */
  --abyss: #03070a;         --abyss-rgb: 3, 7, 10;          /* around the board, and behind everything */
  --harbor: #0b2c3d;                                         /* deep teal: the copper under the mask */
  --sonar: #6dcff0;         --sonar-rgb: 109, 207, 240;      /* the glow on the buses, the accent */
  --frost: #e8f8fd;         --frost-rgb: 232, 248, 253;      /* silkscreen white */
  --flare: #ff4d5e;         --flare-rgb: 255, 77, 94;        /* CHASSIS INTRUSION */
  --sodium: #ffb547;        --sodium-rgb: 255, 181, 71;      /* amber: LAN activity, stray packets, warnings */
  --ink: #bdd7e1;                                            /* body text */
  --ink-dim: #7d9aa7;
  --line: rgba(232, 248, 253, .15);
  --line-strong: rgba(232, 248, 253, .32);
  --glass: rgba(3, 13, 19, .78);
  --glow: 0 0 10px rgba(var(--sonar-rgb), .45);

  --top-h: 54px;
  --bot-h: 92px;
  --pad-x: clamp(16px, 2.2vw, 34px);
  --radius: 4px;                                             /* the boxes in the frame are softly rounded */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-snap: cubic-bezier(.2, .9, .25, 1.15);
}
/* the security side — the board turns to threat mode */
:root[data-side="sec"] {
  --abyss: #050203;         --abyss-rgb: 5, 2, 3;
  --harbor: #3a0b13;
  --sonar: #ff6474;         --sonar-rgb: 255, 100, 116;
  --frost: #ffe9ec;         --frost-rgb: 255, 233, 236;
  --ink: #edcbd0;
  --ink-dim: #b07c85;
  --line: rgba(255, 233, 236, .15);
  --line-strong: rgba(255, 233, 236, .32);
  --glass: rgba(17, 4, 7, .8);
}

/* ------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; background: var(--abyss); color-scheme: dark; }
body {
  margin: 0; width: 100%; height: 100dvh; overflow: hidden;
  background: var(--abyss); color: var(--ink);
  font: 400 16px/1.6 var(--f-human);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  transition: background .6s;
}
body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; }
a { color: var(--sonar); text-decoration: none; }
a:hover { color: var(--frost); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--frost); outline-offset: 3px; }
::selection { background: rgba(var(--sonar-rgb), .35); color: #fff; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; top: -100px; left: 12px; z-index: 200; padding: 10px 14px; background: var(--frost); color: var(--abyss); font: 600 14px var(--f-human); border-radius: var(--radius); }
.skip-link:focus { top: 12px; }

/* ------------------------------------------------------------------ world */
#world { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--abyss); }
/* the board's plates: canvases your browser paints (js/board-art.js) at the resolution the screen needs; their
   CSS size is the board's frame in units. Around the board they are the page colour, so they need no mask. */
.plate {
  position: absolute; left: 0; top: 0; display: block; width: 1314px; height: 555px; max-width: none;
  transform-origin: 0 0; will-change: transform; pointer-events: none; user-select: none;
}
.plate-dev { opacity: 0; transition: opacity .6s ease; }
.plate-dev.loaded { opacity: 1; }
.plate-red, .plate-green { opacity: 0; transition: opacity .9s ease; }
:root[data-side="sec"] .plate-red.loaded { opacity: 1; }
:root[data-theme="green"] .plate-green.loaded { opacity: 1; }
:root[data-theme="green"] .plate-red { opacity: 0 !important; }
#veil, #signals, #hud { position: absolute; inset: 0; display: block; pointer-events: none; }
#veil { z-index: 1; }
#signals { z-index: 2; transition: opacity .4s; }
#hud  { z-index: 3; }
.grade { position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    radial-gradient(120% 90% at 55% 50%, transparent 55%, rgba(var(--abyss-rgb), .55) 100%),
    linear-gradient(to bottom, rgba(var(--abyss-rgb), .8), transparent 11%, transparent 86%, rgba(var(--abyss-rgb), .92));
}
/* panel open: the board dims except around the locked part */
.grade::after {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease;
  background: radial-gradient(circle at var(--fx, 25%) var(--fy, 50%), transparent 0, transparent 9%, rgba(var(--abyss-rgb), .62) 30%, rgba(var(--abyss-rgb), .84) 70%);
}
body.panel-open .grade::after { opacity: 1; }

/* --------------------------------------------------------------------- fx */
#fx { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
#fx::before {            /* fine scanlines, barely there */
  content: ""; position: absolute; inset: 0; opacity: .55;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, .2) 2px 3px);
}
body.fx-off #fx, body.classic #fx, body.classic #cursor { display: none; }
#tracking { position: fixed; left: 0; right: 0; height: 16px; z-index: 51; pointer-events: none; opacity: 0; top: -20px;
  background: linear-gradient(to bottom, transparent, rgba(var(--sonar-rgb), .09), transparent); }
#tracking.run { animation: trackband 1.4s linear; }
@keyframes trackband { 0% { top: -20px; opacity: 0 } 10% { opacity: 1 } 90% { opacity: .8 } 100% { top: 100%; opacity: 0 } }
#flash { position: fixed; inset: 0; z-index: 55; pointer-events: none; background: var(--frost); opacity: 0; }
#flash.go { animation: flash .55s ease-out; }
@keyframes flash { 0% { opacity: .55 } 100% { opacity: 0 } }
#flash.red { background: radial-gradient(ellipse at 45% 42%, rgba(var(--flare-rgb), .35), rgba(var(--flare-rgb), .12) 70%); }
#flash.red.go { animation: flashred .9s ease-out; }
@keyframes flashred { 0% { opacity: 1 } 18% { opacity: .2 } 32% { opacity: .9 } 100% { opacity: 0 } }

#cursor { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; width: 24px; height: 24px; margin: -12px 0 0 -12px; opacity: 0; transition: opacity .25s, transform .18s var(--ease-out); }
#cursor::before, #cursor::after { content: ""; position: absolute; background: var(--frost); }
#cursor::before { left: 50%; top: 0; width: 1px; height: 100%; }
#cursor::after { top: 50%; left: 0; height: 1px; width: 100%; }
#cursor i { position: absolute; inset: 7px; border: 1px solid var(--sonar); border-radius: 50%; transition: inset .18s var(--ease-out); }
body.has-cursor #cursor { opacity: .9; }
body.lens-live #cursor { opacity: 0; }
#cursor.hot { transform: rotate(45deg) scale(1.2); }
#cursor.hot i { inset: 3px; }
#cursor.down { transform: scale(.75); }
#cursor.text { opacity: .25 !important; }

/* ------------------------------------------------------------------ intro */
/* the POST log, typed in the corner while the board powers on behind it */
#boot { position: fixed; inset: 0; z-index: 20; pointer-events: auto; transition: opacity .6s; }
#boot.leaving { opacity: 0; pointer-events: none; }
#boot::before {            /* keeps the log legible once the parts behind it light up */
  content: ""; position: absolute; left: 0; top: 0; width: min(720px, 100vw); height: min(420px, 60vh); pointer-events: none;
  background: radial-gradient(120% 100% at 0 0, rgba(var(--abyss-rgb), .92), rgba(var(--abyss-rgb), .72) 50%, transparent 82%);
}
.boot-out {
  position: absolute; left: var(--pad-x); top: calc(var(--top-h) + 4px); max-width: min(560px, 80vw);
  font: 400 12px/1.75 var(--f-mono); color: var(--sonar); white-space: pre-wrap;
  text-shadow: 0 0 6px rgba(var(--sonar-rgb), .5), 0 1px 2px rgba(0, 0, 0, .9);
}
.boot-line { min-height: 1.75em; }
.boot-line .ok { color: var(--frost); }
.boot-line .warn { color: #ff8a95; text-shadow: 0 0 8px rgba(var(--flare-rgb), .7), 0 1px 2px #000, 0 0 1px #000; }
.boot-line .hot { color: #fff; }
.boot-line .bar { display: inline-block; width: 120px; height: 7px; margin-left: 10px; vertical-align: 0; border: 1px solid rgba(var(--sonar-rgb), .6); position: relative; }
.boot-line .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--sonar); transition: width .15s linear; }
.caret::after { content: "_"; margin-left: 2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0 } }
.boot-skip {
  position: absolute; right: var(--pad-x); bottom: 20px; padding: 8px 12px;
  font: 500 11px/1 var(--f-system); font-stretch: 112%; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-dim); border: 1px solid var(--line); border-radius: var(--radius); background: rgba(var(--abyss-rgb), .5);
}
.boot-skip:hover { color: var(--frost); border-color: var(--line-strong); }

/* ------------------------------------------------------------------ stage */
#stage { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#stage .topbar, #stage .credit, #stage .bottombar, #stage .target { pointer-events: auto; }
.flow { display: contents; }

.topbar {
  position: absolute; left: 0; right: 0; top: 0; height: var(--top-h);
  display: flex; align-items: center; gap: 18px; padding: 0 var(--pad-x);
  font: 500 11.5px/1 var(--f-system); font-stretch: 112%; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim);
  transition: opacity .6s, transform .8s var(--ease-out);
}
.brand { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; user-select: none; }
.brand b { color: var(--frost); font-weight: 600; letter-spacing: .34em; }
.brand .file { text-transform: none; letter-spacing: .02em; font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-dim); }
.progress { white-space: nowrap; }
.progress b { color: var(--sonar); font-weight: 600; }
#hint { flex: 1; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .3s;
  font: 400 13px/1 var(--f-human); letter-spacing: 0; text-transform: none; color: var(--ink-dim); }
.topbar-right { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.switch { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.switch button { padding: 7px 12px; color: var(--ink-dim); letter-spacing: .2em; transition: background .25s, color .25s; }
.switch button[aria-pressed="true"] { background: var(--sonar); color: var(--abyss); font-weight: 600; }
.switch button:not([aria-pressed="true"]):hover { color: var(--frost); }
.status { display: inline-flex; align-items: center; gap: 9px; color: var(--frost); white-space: nowrap; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sonar); box-shadow: var(--glow); animation: pulse 2.4s infinite; flex: none; }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

/* --- the credit: the name on the board's quiet plate --- */
.credit {
  position: absolute; left: 0; top: 0; will-change: transform;   /* placed by app.js with a transform: no layout per frame */
  max-width: calc(100vw - var(--cx, 50vw) - var(--pad-x));
  transition: opacity .6s;
}
.credit-role {
  margin: 0 0 clamp(8px, calc(var(--s, 1.4) * 8px), 18px);
  font: 700 clamp(10px, calc(var(--s, 1.4) * 9.2px), 19px)/1 var(--f-human); font-stretch: 125%;
  letter-spacing: .62em; text-transform: uppercase; color: var(--frost); white-space: nowrap;
}
.credit-name {
  margin: 0; cursor: pointer;
  font: 800 clamp(34px, calc(var(--s, 1.4) * 40px), 112px)/.92 var(--f-human); font-stretch: 112%;
  letter-spacing: .07em; text-transform: uppercase; color: #fff; white-space: nowrap;
  text-shadow: 0 0 calc(var(--s, 1.4) * 7px) rgba(var(--sonar-rgb), .4), 0 2px 18px rgba(0, 0, 0, .55);
}
.credit-name:hover .ch { text-shadow: 0 0 14px rgba(var(--sonar-rgb), .7); }
.credit .ch.scramble { color: var(--sonar); }
.credit-intro {
  max-width: 30em; margin: clamp(12px, calc(var(--s, 1.4) * 13px), 26px) 0 clamp(14px, calc(var(--s, 1.4) * 14px), 28px);
  font: 400 clamp(15px, calc(var(--s, 1.4) * 10.2px), 20px)/1.5 var(--f-human); color: var(--frost);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 22px rgba(var(--abyss-rgb), .95);
  transition: opacity .7s, transform .9s var(--ease-out);
}
.credit-actions { display: flex; flex-wrap: wrap; gap: 10px; transition: opacity .7s .12s, transform .9s .12s var(--ease-out); }
/* the reveal: letters arrive out of order, like a film's title card */
body.is-intro .credit .ch { opacity: 0; }
body.is-intro .credit .ch.on { opacity: 1; }
.credit .ch.on { animation: flick .26s steps(1) both; }
@keyframes flick { 0% { opacity: .9 } 25% { opacity: .15 } 50% { opacity: 1 } 70% { opacity: .5 } 100% { opacity: 1 } }
body.is-intro .credit-intro, body.is-intro .credit-actions { opacity: 0; transform: translateY(8px); }
body.is-intro .credit.shown .credit-intro, body.is-intro .credit.shown .credit-actions { opacity: 1; transform: none; }
body.is-intro .topbar { opacity: 0; transform: translateY(-10px); }
body.is-intro .bottombar { opacity: 0; transform: translateY(12px); }
body.is-intro .targets { opacity: 0; }
body.panel-open .credit { opacity: 0; pointer-events: none; }

/* buttons — the person's voice */
.btn {
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; min-height: 42px;
  font: 600 14px/1.1 var(--f-human); color: var(--frost); text-decoration: none;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: rgba(var(--abyss-rgb), .72);
  transition: background .2s, color .2s, border-color .2s;
}
.btn:hover { border-color: var(--frost); color: #fff; background: rgba(var(--sonar-rgb), .14); }
.btn.primary { background: var(--sonar); border-color: var(--sonar); color: var(--abyss); }
.btn.primary:hover { background: var(--frost); border-color: var(--frost); color: var(--abyss); }
.btn.is-done { background: var(--frost); color: var(--abyss); }
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn svg { width: 15px; height: 15px; flex: none; }

/* --- targets: every sector is a part on the board; the label names the part, then what it holds --- */
.targets { position: absolute; inset: 0; transition: opacity .8s; }
.target { position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: var(--radius); will-change: transform; }
.target:focus-visible { outline-offset: 6px; }
.t-label {
  position: absolute; left: 0; top: 0; display: grid; gap: 3px; padding: 5px 8px 6px; white-space: nowrap; text-align: left;
  background: rgba(var(--abyss-rgb), .62); border-left: 2px solid var(--sonar); border-radius: 0 3px 3px 0;
  transition: background .2s, border-color .2s;
}
.t-label[data-align="r"] { transform: translateX(-100%); text-align: right; border-left: 0; border-right: 2px solid var(--sonar); border-radius: 3px 0 0 3px; }
.t-label[data-align="c"] { transform: translateX(-50%); text-align: center; border-left: 0; border-bottom: 2px solid var(--sonar); border-radius: 3px 3px 0 0; }
.t-label b { font: 600 12px/1 var(--f-system); font-stretch: 112%; letter-spacing: .18em; text-transform: uppercase; color: var(--frost); }
.t-label b i { font-style: normal; color: var(--sonar); margin-right: 4px; letter-spacing: .1em; }
.t-label small { font: 400 11.5px/1.2 var(--f-system); letter-spacing: .03em; color: var(--ink); }
.target.hot .t-label { background: rgba(var(--abyss-rgb), .86); }
.target.hot .t-label b { color: #fff; }
.target .g.scramble { color: var(--sonar); }
.target.seen .t-label b::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 9px; border-radius: 50%; background: var(--sonar); vertical-align: 2px; }
.target.is-new { animation: emerge 1.4s var(--ease-out) both; }
@keyframes emerge { 0% { opacity: 0 } 100% { opacity: 1 } }
body.panel-open .target .t-label { opacity: 0; transition: opacity .3s; }
body.panel-open .target.is-open .t-label, body.panel-open .target:hover .t-label { opacity: 1; }

/* --- bottom bar: sector index + status --- */
.bottombar {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 0 var(--pad-x) 12px;
  display: grid; gap: 6px; transition: opacity .6s, transform .8s var(--ease-out);
}
.sectors { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 -10px; }
.sectors button {
  padding: 9px 10px; border-radius: 3px; border: 1px solid transparent;
  font: 500 12px/1 var(--f-system); font-stretch: 112%; letter-spacing: .15em; text-transform: uppercase; color: var(--ink);
  transition: color .2s, border-color .2s, background .2s;
}
.sectors button i { font-style: normal; color: var(--sonar); margin-right: 9px; }
.sectors button:hover { color: #fff; border-color: var(--line); background: rgba(var(--abyss-rgb), .55); }
.sectors button.seen::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 9px; border-radius: 50%; background: var(--sonar); vertical-align: 2px; }
.sectors button.on { color: #fff; border-color: var(--line-strong); }
.sectors .root-btn { color: var(--sodium); }
.statusline {
  display: flex; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 9px;
  font: 500 11px/1 var(--f-system); font-stretch: 112%; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-dim);
}
.statusline > * { padding: 3px 12px; border-right: 1px solid var(--line); white-space: nowrap; }
.statusline > :first-child { padding-left: 0; }
.statusline > :last-child { border-right: 0; padding-right: 0; }
.statusline b { color: var(--frost); font-weight: 500; }
.statusline .spacer { flex: 1; border-right: 0; padding: 0; }
.statusline button { letter-spacing: inherit; text-transform: inherit; color: var(--ink-dim); transition: color .2s; }
.statusline button:hover { color: #fff; }
.statusline button.term { color: var(--sonar); }
.meter { display: inline-flex; gap: 3px; margin-left: 8px; vertical-align: -1px; }
.meter i { width: 6px; height: 9px; border: 1px solid var(--line-strong); border-radius: 1px; }
.meter i.on { background: var(--sonar); border-color: var(--sonar); box-shadow: var(--glow); }

/* ------------------------------------------------------------------ panel */
#panel { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
.panel-frame {
  position: absolute; top: calc(var(--top-h) + 6px); bottom: calc(var(--bot-h) + 6px); right: var(--pad-x);
  width: clamp(500px, 47vw, 860px); display: flex; flex-direction: column; pointer-events: auto;
  background: var(--glass); backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15);
  border: 1px solid var(--line-strong); border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 30px 90px rgba(0, 0, 0, .65), 0 0 60px rgba(var(--sonar-rgb), .06);
  clip-path: inset(0 0 100% 0 round 6px);
  transition: clip-path .75s var(--ease-out);
}
#panel.show .panel-frame { clip-path: inset(0 0 0 0 round 6px); }
#panel.hide .panel-frame { clip-path: inset(0 0 100% 0 round 6px); transition-duration: .42s; transition-timing-function: cubic-bezier(.6, 0, .9, .4); }
/* "+" crosshairs on the panel's corners, like the fiducials on the board */
.panel-frame::before, .panel-frame::after, .panel-foot::before, .panel-foot::after {
  content: "+"; position: absolute; font: 300 15px/1 var(--f-system); color: var(--frost); opacity: .7; pointer-events: none;
}
.panel-frame::before { left: 7px; top: 5px; }
.panel-frame::after { right: 7px; top: 5px; }
.panel-foot::before { left: 7px; bottom: 5px; }
.panel-foot::after { right: 7px; bottom: 5px; }
.panel-scan { position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 3; pointer-events: none; opacity: 0;
  background: var(--frost); box-shadow: 0 0 12px 1px rgba(var(--sonar-rgb), .9); }
#panel.show .panel-scan { animation: pscan .75s var(--ease-out) both; }
.panel-frame.swap .panel-scan { animation: pscan .55s var(--ease-out) both; }
@keyframes pscan { 0% { top: 0; opacity: 1 } 85% { opacity: 1 } 100% { top: 100%; opacity: 0 } }

.panel-bar {
  display: flex; align-items: center; gap: 14px; padding: 13px 18px 12px 26px; border-bottom: 1px solid var(--line);
  font: 500 11.5px/1 var(--f-system); font-stretch: 112%; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim);
}
.panel-idx { color: var(--sonar); border: 1px solid rgba(var(--sonar-rgb), .55); border-radius: 3px; padding: 4px 6px 3px; letter-spacing: .08em; }
.panel-title { color: var(--frost); font-size: 13.5px; font-weight: 600; letter-spacing: .2em; }
.panel-file { font: 400 11.5px/1 var(--f-mono); text-transform: none; letter-spacing: 0; color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.panel-state { margin-left: auto; color: var(--sonar); white-space: nowrap; }
.panel-state::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 8px; vertical-align: 1px; animation: blink 1.1s steps(1) infinite; }
.panel-state.done::before { animation: none; }
.panel-close { width: 32px; height: 32px; margin: -6px -6px -6px 0; display: grid; place-items: center; font: 300 22px/1 var(--f-system); color: var(--ink); border-radius: var(--radius); transition: color .2s, background .2s; }
.panel-close:hover { color: #fff; background: rgba(var(--flare-rgb), .25); }

.panel-tabs { display: flex; gap: 2px; padding: 7px 14px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.panel-tabs::-webkit-scrollbar { display: none; }
.panel-tabs button {
  flex: none; padding: 8px 10px; border-radius: 3px;
  font: 500 11px/1 var(--f-system); font-stretch: 112%; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-dim);
  transition: color .2s, background .2s;
}
.panel-tabs button i { font-style: normal; margin-right: 7px; color: var(--sonar); }
.panel-tabs button:hover { color: #fff; background: rgba(var(--frost-rgb), .06); }
.panel-tabs button.seen { color: var(--ink); }
.panel-tabs button[aria-current="page"] { background: var(--sonar); color: var(--abyss); font-weight: 600; }
.panel-tabs button[aria-current="page"] i { color: var(--abyss); }

.panel-body { flex: 1; min-height: 0; overflow: auto; padding: 28px 30px 36px; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(var(--frost-rgb), .25) transparent; transition: opacity .16s; }
.panel-body::-webkit-scrollbar { width: 8px; }
.panel-body::-webkit-scrollbar-thumb { background: rgba(var(--frost-rgb), .2); border-radius: 4px; }
.panel-body.fading { opacity: 0; }
.panel-body:focus { outline: none; }

.panel-foot {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px 12px;
  border-top: 1px solid var(--line); font: 500 11px/1 var(--f-system); font-stretch: 112%; letter-spacing: .15em; text-transform: uppercase;
}
.panel-foot button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; color: var(--ink); border-radius: 3px; transition: color .2s, background .2s; max-width: 42%; }
.panel-foot button:hover { color: #fff; background: rgba(var(--frost-rgb), .07); }
.panel-foot button .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-foot .arr { font-size: 15px; color: var(--sonar); }
.dots { display: flex; gap: 7px; }
.dots i { width: 7px; height: 7px; border: 1px solid var(--line-strong); transform: rotate(45deg); transition: background .3s; }
.dots i.seen { background: rgba(var(--sonar-rgb), .35); border-color: rgba(var(--sonar-rgb), .5); }
.dots i.on { background: var(--sonar); border-color: var(--sonar); box-shadow: var(--glow); }

/* ------------------------------------------------------- panel content */
.p-head { margin-bottom: 22px; }
.p-head h2 { margin: 0; font: 700 clamp(26px, 2.3vw, 34px)/1.12 var(--f-human); font-stretch: 106%; color: #fff; letter-spacing: -.005em; }
.p-head p { margin: 8px 0 0; color: var(--ink-dim); font-size: 15px; }
.lead { margin: 0 0 18px; max-width: 34em; font: 400 clamp(17px, 1.35vw, 20px)/1.5 var(--f-human); color: var(--frost); }
.panel-body p { max-width: 66ch; }
.panel-body h3 { margin: 0; font: 600 18px/1.3 var(--f-human); color: #fff; }
.k { font: 500 10.5px/1.2 var(--f-system); font-stretch: 112%; letter-spacing: .17em; text-transform: uppercase; color: var(--ink-dim); }
.block { margin-top: 30px; }
.block > .k { display: block; margin-bottom: 12px; }
.panel-body .block > h3 { margin: 0 0 12px; font: 600 15px/1.3 var(--f-human); letter-spacing: 0; text-transform: none; color: var(--ink-dim); }
.cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; }
.muted { color: var(--ink-dim); }
.small { font-size: 13.5px; }

.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.facts > div { background: rgba(var(--abyss-rgb), .55); padding: 11px 14px 12px; }
.facts dt { margin-bottom: 4px; }
.facts dd { margin: 0; color: var(--frost); font-size: 15px; line-height: 1.35; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: baseline; gap: 7px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 3px;
  font: 500 12.5px/1.2 var(--f-system); letter-spacing: .02em; color: var(--ink); background: rgba(var(--abyss-rgb), .35);
  transition: color .15s, border-color .15s, background .15s, opacity .2s;
}
button.chip:hover, .chip.lit { border-color: var(--sonar); color: #fff; }
.chip.pick { background: var(--sonar); border-color: var(--sonar); color: var(--abyss); }
.chip.dim { opacity: .35; }
.chip.sec { border-color: rgba(var(--flare-rgb), .45); color: #ff9aa6; }
:root[data-side="sec"] .chip.sec { color: var(--frost); }
.chip .lvl { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }

/* identity */
.id-grid { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 30px; align-items: start; }
.portrait { margin: 0; display: grid; gap: 10px; }
.portrait .frame { position: relative; aspect-ratio: 1; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; background: #000; }
.portrait canvas, .portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.portrait img { filter: grayscale(1) contrast(1.1) brightness(.95); }
.portrait .frame::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, .3) 2px 3px); pointer-events: none; }
.portrait figcaption { display: grid; gap: 6px; }
.portrait .tag { position: absolute; left: 8px; bottom: 8px; z-index: 1; padding: 3px 6px; background: rgba(var(--abyss-rgb), .8); border-radius: 2px; }
.status-pill { display: inline-flex; align-items: center; gap: 9px; color: var(--frost); font-size: 14px; }

/* experience */
.tl { position: relative; margin: 6px 0 40px; }
.tl-track { position: relative; height: 46px; border-bottom: 1px solid var(--line-strong); }
.tl-seg {
  position: absolute; top: 6px; height: 32px; min-width: 18px; padding: 0 8px; display: flex; align-items: center; gap: 8px; overflow: hidden;
  border: 1px solid var(--line-strong); border-radius: 3px; background: rgba(var(--sonar-rgb), .07);
  font: 500 11px/1 var(--f-system); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s;
}
.tl-seg:hover, .tl-seg.on { background: rgba(var(--sonar-rgb), .22); border-color: var(--sonar); color: #fff; }
.tl-seg.trace { outline: 1px dashed var(--frost); outline-offset: 2px; }
.tl-seg .slot { font-weight: 600; color: var(--sonar); letter-spacing: .06em; }
.tl-seg:hover .slot, .tl-seg.on .slot { color: var(--frost); }
/* a link that sits in running text ("slot B2 is still free") */
.inline-link { color: var(--sonar); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(var(--sonar-rgb), .45); }
.inline-link:hover { color: var(--frost); }
.tl-years { position: absolute; left: 0; right: 0; top: 52px; height: 14px; }
.tl-years span { position: absolute; transform: translateX(-50%); font: 500 10.5px/1 var(--f-system); letter-spacing: .08em; color: var(--ink-dim); }
.tl-years span::before { content: ""; position: absolute; left: 50%; top: -9px; width: 1px; height: 5px; background: var(--line-strong); }
.roles { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.role { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 22px; padding: 20px 0 22px; border-top: 1px solid var(--line); transition: background .3s; }
.role:first-child { border-top: 0; padding-top: 4px; }
.role.on .role-when b { color: var(--sonar); }
.role-when { display: grid; gap: 6px; align-content: start; }
.role-when b { font: 500 12px/1.3 var(--f-system); letter-spacing: .08em; color: var(--frost); }
.role h3 { margin-bottom: 4px; }
.role .co { color: var(--sonar); font-weight: 500; }
.role ul { margin: 12px 0 14px; padding-left: 18px; }
.role li { margin: 5px 0; }
.role li::marker { color: var(--sonar); }

/* stack */
.modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.module { position: relative; padding: 14px 15px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(var(--abyss-rgb), .35); }
.module::after { content: "+"; position: absolute; right: 8px; top: 5px; font: 300 14px/1 var(--f-system); color: var(--frost); opacity: .55; }
.module header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; padding-right: 14px; }
.module h3 { font-size: 16px; }
.module.sec { border-color: rgba(var(--flare-rgb), .32); }
.trace {
  margin-top: 16px; padding: 13px 15px; min-height: 52px; border: 1px dashed var(--line-strong); border-radius: var(--radius);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 14.5px;
}
.trace .hit { color: var(--sonar); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(var(--sonar-rgb), .4); }
.trace .hit:hover { color: #fff; }

/* security */
.mode-pair { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; font: 600 12px/1 var(--f-system); letter-spacing: .2em; }
.mode-pair .d { color: #6dcff0; }
.mode-pair .s { color: #ff6474; }
.mode-pair .a { color: var(--ink-dim); animation: nudge 1.6s infinite; }
@keyframes nudge { 0%, 100% { transform: none; opacity: .5 } 50% { transform: translateX(4px); opacity: 1 } }
.bridge { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.bridge > div { display: grid; gap: 4px; padding: 12px 14px; background: rgba(var(--abyss-rgb), .55); }
.bridge .from { font: 500 12.5px/1.3 var(--f-system); letter-spacing: .04em; color: var(--sonar); }
.bridge .to { font-size: 14.5px; color: var(--ink); }
.tracks { display: grid; gap: 14px; }
.track { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; }
.track .nm { color: #fff; font-weight: 600; font-size: 15px; }
.track .pct { font: 500 12px/1 var(--f-system); letter-spacing: .1em; color: var(--sonar); }
.track .dt { grid-column: 1 / -1; font-size: 13.5px; color: var(--ink-dim); }
.track .bar { grid-column: 1 / -1; height: 6px; border: 1px solid var(--line-strong); border-radius: 2px; overflow: hidden; }
.track .bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--sonar) 0 6px, transparent 6px 8px); transition: width 1.2s var(--ease-out); }
.log { display: grid; gap: 0; }
.log > div { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.log .d { font: 500 12px/1.4 var(--f-system); letter-spacing: .06em; color: var(--sonar); }
.log b { display: block; color: #fff; font-weight: 600; font-size: 15px; }
.log span { color: var(--ink-dim); font-size: 14px; }
.scanbox {
  margin: 0; padding: 12px 14px; min-height: 130px; max-height: 280px; overflow: auto;
  font: 400 12px/1.6 var(--f-mono); white-space: pre; color: var(--ink);
  background: rgba(0, 0, 0, .5); border: 1px solid var(--line); border-radius: var(--radius);
}
.scanbox .o { color: #fff; }
.scanbox .f { color: var(--sodium); }
.scanbox .c { color: var(--ink-dim); }
.scanbox .cmd { color: var(--sonar); }
.scanbox.live::after { content: "_"; animation: blink 1s steps(1) infinite; color: var(--sonar); }
.roe { margin-top: 26px; padding: 12px 14px; border-left: 2px solid var(--sodium); background: rgba(var(--sodium-rgb), .06); border-radius: 0 var(--radius) var(--radius) 0; font-size: 14.5px; color: var(--ink); }
.roe .k { display: block; color: var(--sodium); margin-bottom: 4px; }

/* projects */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 15px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(var(--abyss-rgb), .35); transition: border-color .2s; }
.card:hover { border-color: var(--line-strong); }
.card header { display: grid; gap: 5px; }
.card p { margin: 0; font-size: 15px; }
.card .links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: auto; padding-top: 4px; font-size: 14px; font-weight: 600; }
.card .links .off { color: var(--ink-dim); font-weight: 400; }
.here { color: var(--sodium); }

/* education */
.degree { position: relative; padding: 18px 18px 20px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: rgba(var(--abyss-rgb), .35); }
.degree h3 { font-size: 20px; padding-right: 130px; }
.degree p { margin: 6px 0 0; }
.stamp {
  position: absolute; right: 18px; top: 18px; padding: 6px 10px; border: 2px solid var(--sonar); border-radius: 3px; color: var(--sonar);
  font: 600 12px/1 var(--f-system); letter-spacing: .3em; transform: rotate(-7deg); opacity: 0; animation: stamp .6s var(--ease-snap) 1s forwards;
}
@keyframes stamp { 0% { opacity: 0; transform: rotate(-7deg) scale(2.2) } 100% { opacity: 1; transform: rotate(-7deg) scale(1) } }
.chip.rel { border-color: rgba(var(--flare-rgb), .5); color: #ff9aa6; }

/* contact */
.mail { display: block; margin: 6px 0 4px; font: 600 clamp(19px, 1.7vw, 28px)/1.2 var(--f-human); color: #fff; overflow-wrap: anywhere; }
.mail:hover { color: var(--sonar); }
.channels { display: grid; }
.channels a, .channels span { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--line); font-size: 15px; color: var(--frost); }
.channels a:hover { color: var(--sonar); }
.channels small { color: var(--ink-dim); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compose { display: grid; gap: 10px; }
.compose label { display: grid; gap: 6px; }
.compose input, .compose textarea {
  width: 100%; padding: 10px 12px; font: 400 15px/1.45 var(--f-human); color: #fff;
  background: rgba(0, 0, 0, .4); border: 1px solid var(--line); border-radius: var(--radius);
}
.compose textarea { min-height: 96px; resize: vertical; }
.compose input:focus, .compose textarea:focus { outline: none; border-color: var(--sonar); box-shadow: 0 0 0 3px rgba(var(--sonar-rgb), .15); }

/* root */
.root-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: ln; }
.root-lines li { position: relative; padding-left: 40px; font-size: 17px; color: var(--frost); }
.root-lines li::before { counter-increment: ln; content: counter(ln, decimal-leading-zero); position: absolute; left: 0; top: 3px; font: 500 12px/1 var(--f-system); letter-spacing: .14em; color: var(--sodium); }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.ach { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 13.5px; }
.ach b { display: block; color: #fff; font-weight: 600; font-size: 14px; }
.ach span { color: var(--ink-dim); }
.ach.locked { opacity: .45; }

/* ------------------------------------------------------------- redaction */
/* text still in [brackets] in data.js: shown as classified until it is filled in */
.redact {
  color: transparent !important; border-radius: 2px; user-select: none; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: repeating-linear-gradient(90deg, rgba(var(--frost-rgb), .2) 0 3px, rgba(var(--frost-rgb), .13) 3px 6px);
  text-shadow: none; transition: color .25s;
}
.redact:hover { color: rgba(var(--frost-rgb), .55) !important; }
.credit .redact, .t-label .redact { background: rgba(var(--frost-rgb), .22); }

/* --------------------------------------------------------------- terminal */
#terminal {
  position: fixed; left: 0; right: 0; bottom: 0; height: min(48vh, 440px); z-index: 40;
  display: flex; flex-direction: column; font: 400 13px/1.55 var(--f-mono);
  background: rgba(1, 5, 8, .94); border-top: 1px solid var(--line-strong);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 -20px 60px rgba(0, 0, 0, .6);
  transform: translateY(102%); transition: transform .38s var(--ease-out);
}
#terminal.open { transform: none; }
.term-bar { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--line); font: 500 11px/1 var(--f-system); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); }
.lights { display: flex; gap: 6px; }
.lights i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.lights i:first-child { background: var(--flare); }
.lights i:nth-child(2) { background: var(--sodium); }
.lights i:nth-child(3) { background: var(--sonar); }
.term-bar button { margin-left: auto; letter-spacing: inherit; text-transform: inherit; color: var(--ink-dim); }
.term-bar button:hover { color: #fff; }
.term-out { flex: 1; overflow: auto; padding: 10px 16px; white-space: pre-wrap; word-break: break-word; color: var(--ink); scrollbar-width: thin; }
.term-out .in { color: #fff; }
.term-out .ps { color: var(--sonar); }
.term-out .err { color: var(--flare); }
.term-out .ok { color: var(--frost); }
.term-out .dim { color: var(--ink-dim); }
.term-out .hl { color: var(--sodium); }
.term-out a { text-decoration: underline; text-underline-offset: 3px; }
.term-in { display: flex; align-items: center; gap: 8px; padding: 9px 16px 12px; border-top: 1px solid var(--line); }
.term-in .ps { color: var(--sonar); white-space: nowrap; }
.term-in input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: #fff; font: inherit; caret-color: var(--sonar); }

/* ----------------------------------------------------------------- toasts */
/* --toast-b is set by app.js on the stage so the stack sits above the credit instead of over the name */
#toasts { position: fixed; right: var(--pad-x); bottom: var(--toast-b, calc(var(--bot-h) + 10px)); z-index: 60; display: flex; flex-direction: column; gap: 8px; pointer-events: none; transition: bottom .35s var(--ease-out); }
body.panel-open #toasts { right: auto; left: var(--pad-x); bottom: calc(var(--bot-h) + 10px); }
body.term-open #toasts { bottom: calc(min(48vh, 440px) + 14px); }
.toast {
  width: min(330px, calc(100vw - 32px)); padding: 11px 14px 12px; border: 1px solid var(--line-strong); border-left: 2px solid var(--sonar); border-radius: var(--radius);
  background: rgba(var(--abyss-rgb), .94); box-shadow: 0 12px 34px rgba(0, 0, 0, .6); animation: toastIn .4s var(--ease-snap) both;
}
.toast.out { animation: toastOut .35s ease-in forwards; }
.toast .t-k { color: var(--sonar); }
.toast .t-t { margin-top: 3px; color: #fff; font-weight: 600; font-size: 15px; }
.toast .t-d { margin-top: 2px; color: var(--ink); font-size: 13.5px; line-height: 1.45; }
.toast.is-sys { border-left-color: var(--sodium); }
.toast.is-sys .t-k { color: var(--sodium); }
@keyframes toastIn { from { opacity: 0; transform: translateX(24px) } to { opacity: 1; transform: none } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px) } }

/* --------------------------------------------------------- printable CV */
#classic { position: fixed; inset: 0; z-index: 70; overflow: auto; background: #0c1216; color: #d8e3ea; opacity: 0; transition: opacity .5s; }
#classic.live { opacity: 1; }
.classic-bar { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; padding: 12px var(--pad-x); background: rgba(12, 18, 22, .92); border-bottom: 1px solid rgba(232, 248, 253, .12); backdrop-filter: blur(6px); }
.classic-bar .k { color: #8fb1c0; }
.classic-bar div { display: flex; gap: 10px; flex-wrap: wrap; }
.paper { max-width: 820px; margin: 28px auto 64px; padding: 52px 58px 40px; background: #fff; color: #1b232b; font: 400 13.5px/1.55 var(--f-human); border-radius: 2px; box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
.paper header { display: grid; gap: 4px; padding-bottom: 18px; border-bottom: 2px solid #0e1b25; }
.paper h1 { margin: 0; font: 800 32px/1.05 var(--f-human); font-stretch: 112%; letter-spacing: .04em; text-transform: uppercase; color: #0e1b25; }
.paper .title { font-weight: 600; font-size: 15px; color: #0f6f93; }
.paper .quest { color: #b3122a; font-size: 13px; }
.paper .contact { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; font-size: 12.5px; color: #4b5a66; }
.paper .contact a { color: #0f6f93; }
.paper h2 { margin: 26px 0 10px; padding-bottom: 5px; border-bottom: 1px solid #dbe4ea; font: 600 11px/1 var(--f-system); font-stretch: 112%; letter-spacing: .24em; text-transform: uppercase; color: #0f6f93; }
.paper p { margin: 0 0 8px; }
.paper .job { margin-bottom: 14px; break-inside: avoid; }
.paper .job-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.paper .job-h b { color: #0e1b25; font-size: 14px; }
.paper .job-h .co { color: #334450; }
.paper .job-h .dt { margin-left: auto; font: 500 11.5px/1 var(--f-system); letter-spacing: .06em; color: #56646f; }
.paper ul { margin: 6px 0; padding-left: 18px; }
.paper li { margin: 2px 0; }
.paper .tags { font-size: 12px; color: #56646f; }
.paper .skills { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 26px; }
.paper .skills b { display: block; font-size: 12.5px; color: #0e1b25; }
.paper .sec-note { padding: 8px 12px; border-left: 3px solid #b3122a; background: #fff5f6; color: #3c2328; font-size: 12.5px; }
.paper .sec-note b { color: #b3122a; }
.paper .foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-top: 30px; padding-top: 10px; border-top: 1px solid #e3e9ee; font-size: 11px; color: #8796a2; }
.paper .redact { background: #e4eaee; }
.paper .redact:hover { color: #8796a2 !important; }

/* --------------------------------------------------------------- noscript */
.noscript-cv { position: fixed; inset: 0; z-index: 300; overflow: auto; padding: 40px var(--pad-x); background: var(--abyss); color: var(--ink); font: 400 16px/1.6 var(--f-human); }
.noscript-cv h1 { margin: 0 0 6px; font: 800 40px/1 var(--f-human); text-transform: uppercase; letter-spacing: .06em; color: #fff; }

/* ------------------------------------------------------------------ print */
@media print {
  @page { margin: 14mm; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html, body { height: auto; overflow: visible; background: #fff !important; }
  #world, #fx, #tracking, #flash, #cursor, #boot, #stage, #panel, #terminal, #toasts, .classic-bar, .skip-link { display: none !important; }
  #classic { position: static; opacity: 1; overflow: visible; background: #fff; }
  .paper { margin: 0; padding: 0; max-width: none; box-shadow: none; font-size: 10.5pt; }
  .paper a { color: #0f6f93; }
  .paper .redact { -webkit-print-color-adjust: exact; print-color-adjust: exact; }   /* placeholders print as grey bars */
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 1240px) {
  .topbar .progress, #hint { display: none; }
  .id-grid { grid-template-columns: minmax(0, 1fr) 170px; gap: 22px; }
}
@media (max-width: 1100px) {
  .cols { grid-template-columns: 1fr; }
  .panel-frame { width: min(620px, 58vw); }
  .role { grid-template-columns: 1fr; gap: 6px; }
}
/* narrow, portrait or square: the panel becomes a sheet under a strip of the map (app.js: narrow()) */
@media (max-width: 900px), (max-aspect-ratio: 21/20) {
  .panel-frame { left: 0; right: 0; top: 25vh; bottom: 0; width: auto; border-radius: 12px 12px 0 0; border-bottom: 0; }
  #panel.show .panel-frame, #panel.hide .panel-frame { clip-path: none; }
  .panel-frame { clip-path: none; transform: translateY(105%); transition: transform .55s var(--ease-out); }
  #panel.show .panel-frame { transform: none; }
  #panel.hide .panel-frame { transform: translateY(105%); transition-duration: .35s; }
  body.panel-open .topbar, body.panel-open .bottombar, body.panel-open .targets { opacity: 0; pointer-events: none; }
  .panel-body { padding: 22px 20px 30px; }
  .panel-bar { padding-left: 20px; }
  .panel-file { display: none; }
  .id-grid { grid-template-columns: 1fr; }
  .portrait { max-width: 220px; }
  body.panel-open #toasts { top: 12px; bottom: auto; left: 12px; right: 12px; }
  body.panel-open .toast { width: auto; }
}
/* compact: the frame on top, the CV below — phones, and any portrait or square window, where the frame is
   too narrow for the title spot (app.js: phone()) */
@media (max-width: 760px), (max-aspect-ratio: 21/20) {
  :root { --top-h: 50px; }
  .topbar { gap: 10px; background: linear-gradient(to bottom, rgba(var(--abyss-rgb), .9), transparent); }
  .flow {
    display: flex; flex-direction: column; justify-content: flex-end; position: absolute; inset: 0; overflow-y: auto; pointer-events: auto;
    padding: calc(var(--top-h) + 38vh) var(--pad-x) 14px; -webkit-overflow-scrolling: touch;
  }
  .credit { position: relative; left: auto; top: auto; max-width: none; padding: 14px 0 6px; transform: none !important; will-change: auto; }
  .credit::before { content: ""; position: absolute; inset: -60px calc(var(--pad-x) * -1) -10px; z-index: -1; pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgba(var(--abyss-rgb), .82) 60px, rgba(var(--abyss-rgb), .92)); }
  .credit-role { font-size: 10.5px; letter-spacing: .45em; margin-bottom: 10px; }
  .credit-name { font-size: clamp(34px, 11vw, 54px); letter-spacing: .05em; white-space: normal; }
  .credit-intro { font-size: 16px; margin: 14px 0 16px; }
  .bottombar { position: relative; margin: 0 calc(var(--pad-x) * -1) -14px; padding: 14px var(--pad-x) 14px; background: rgba(var(--abyss-rgb), .92); }
  .sectors { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; }
  .sectors button { padding: 13px 12px; border-color: var(--line); background: rgba(var(--abyss-rgb), .6); text-align: left; }
  .statusline { margin-top: 10px; row-gap: 10px; }
  .panel-frame { top: 23vh; }
  #toasts { left: 12px; right: 12px; bottom: 14px; }
  .toast { width: auto; }
}
/* phones only: smaller type, single columns */
@media (max-width: 760px) {
  :root { --pad-x: 16px; }
  body { font-size: 15.5px; }
  .brand .file, .status { display: none; }
  .statusline .hide-s { display: none; }
  .t-label small { display: none; }
  .t-label b { font-size: 11px; }
  .facts { grid-template-columns: 1fr; }
  .tl-years span:nth-child(even) { display: none; }
  .degree h3 { padding-right: 0; }
  .stamp { position: static; display: inline-block; margin-top: 12px; }
  .log > div { grid-template-columns: 1fr; gap: 4px; }
  .paper { padding: 28px 22px; margin: 12px; }
  .paper .skills { grid-template-columns: 1fr; }
  #terminal { height: 66vh; font-size: 12.5px; }
}
/* tablets held upright (and tall windows): the compact layout, with room to breathe */
@media (min-width: 761px) and (max-aspect-ratio: 21/20) {
  .credit-role { font-size: 12.5px; }
  .credit-name { font-size: clamp(54px, 8.2vw, 88px); }
  .credit-intro { max-width: 32em; font-size: 18px; }
  .sectors { grid-template-columns: repeat(4, 1fr); }
  #toasts { left: auto; right: var(--pad-x); top: calc(var(--top-h) + 10px); bottom: auto; }   /* the CV and the sectors are at the bottom */
  .toast { width: 360px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  :root { --top-h: 44px; --bot-h: 74px; }
  .credit-intro { display: none; }
  .statusline .hide-s { display: none; }
  .sectors button { padding: 7px 9px; }
  .panel-frame { top: 8px; bottom: 8px; }
}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .stamp { opacity: 1; }
  #panel .panel-frame { transition: none !important; }
}