/* =============================================================================
   BASE
   Loaded before every page stylesheet.
     1. Tokens       every colour, font, size, space, radius, shadow and timing
     2. Reset
     3. Shell        background canvases, camera container, sections, scroll region
     4. Navbar
     5. Buttons, tags, lists
     6. Node network links, node shell, sockets
     7. Expanded node (popup)
     8. Reduced motion
   Page files (landing.css … contact.css) only use the tokens defined here.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Surfaces (dark) */
  --bg: #05080d;
  --bg-raised: #091118;
  --bg-media: #0a1016;
  --bg-a55: color-mix(in srgb, var(--bg) 55%, transparent);
  --bg-a85: color-mix(in srgb, var(--bg) 85%, transparent);
  --bg-nav: color-mix(in srgb, var(--bg) 91%, transparent);

  /* Text on dark */
  --ink: #f0f1f2;
  --ink-body: #dce6ec;
  --ink-muted: #b4bec7;

  /* Brand hierarchy:
     dark background -> burgundy structure -> ivory content -> gold node points
     -> warm-red accents -> light red only for rare, subtle hover states. */
  --burgundy: #2a0f12;          /* title bars, dark foreground surfaces */
  --burgundy-line: #3a1c1d;     /* node borders, low-emphasis structure */
  --red: #8b2d2f;               /* active underline, bullets, labels, buttons, spine */
  --red-light: #d85b5b;         /* hover-only; keep rare */
  --connector: #a26a6a;         /* links between UI nodes */

  /* Gold: node ports, milestones, small icons */
  --gold: #e0b15a;
  --gold-light: #f2d08e;
  --gold-dark: #b3863a;
  --gold-a20: color-mix(in srgb, var(--gold) 22%, transparent);
  --gold-a40: color-mix(in srgb, var(--gold) 40%, transparent);
  --gold-a70: color-mix(in srgb, var(--gold) 70%, transparent);
  --gold-a80: color-mix(in srgb, var(--gold) 80%, transparent);

  /* Ivory node surface and the text on it */
  --white: #ffffff;
  --surface: rgba(247, 243, 237, .97);
  --surface-ink: #1a1816;
  --surface-ink-muted: #3e3935;
  --surface-placeholder: #9a928c;
  --line: color-mix(in srgb, var(--burgundy-line) 12%, transparent);
  --line-strong: color-mix(in srgb, var(--burgundy-line) 20%, transparent);
  --tint: color-mix(in srgb, var(--white) 60%, transparent);
  --tint-strong: color-mix(in srgb, var(--white) 85%, transparent);

  /* Text and controls on burgundy */
  --bar-ink: #f6f1e7;
  --bar-muted: rgba(240, 226, 200, .62);
  --bar-sheen: color-mix(in srgb, var(--white) 6%, transparent);
  --glass: color-mix(in srgb, var(--white) 8%, transparent);
  --glass-hover: color-mix(in srgb, var(--white) 18%, transparent);
  --glass-line: color-mix(in srgb, var(--white) 28%, transparent);

  /* Scrollbars */
  --scrollbar: rgba(218, 228, 235, .28);
  --scrollbar-light: rgba(22, 32, 39, .25);

  /* Canvas art (read by brain.js / background.js) */
  --brain-1: #18dbcd;
  --brain-2: #3a7df6;
  --brain-3: #a147e4;
  --brain-4: #ed459e;
  --brain-5: #40d771;
  --brain-6: #e6af3e;
  --field-1: #6be0d6;
  --field-2: #809aff;
  --field-3: #bb83e6;
  --field-4: #f07caa;
  --field-5: #58d294;
  --field-ripple: #9b2f3b;
  --art-highlight: #f0f4f6;

  /* Hub discs on the landing brain */
  --hub-shade: rgb(22 28 36 / 88%);
  --hub-shade-deep: rgb(12 16 22 / 82%);
  --hub-glyph: #f2ebe3;
  --hub-glyph-lit: #fffaf2;

  /* Fonts */
  --font-sans: 'IBM Plex Sans', Arial, Helvetica, sans-serif;
  --font-mono: 'IBM Plex Mono', Consolas, monospace;

  /* Font sizes */
  --text-2xs: 10.5px;
  --text-xs: 11.5px;
  --text-sm: 12px;
  --text-ui: 14px;
  --text-md: 15px;
  --text-body: 16px;
  --text-copy: 16px;
  --text-title: 15px;
  --text-lg: 18px;
  --text-xl: 23px;
  --text-logo: clamp(26px, 1.85vw, 30px);
  --logo-mark: 1.55em;
  --text-degree: clamp(19px, 1.55vw, 23px);
  --text-popup-title: clamp(24px, 2.2vw, 30px);
  --text-about-lead: clamp(19px, 1.45vw, 22px);
  --text-about-body: clamp(16px, 1.18vw, 18px);
  --text-name: clamp(48px, 5.5vw, 88px);

  /* Spacing (multiples of 4) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 56px;
  --space-12: 64px;

  /* Radii */
  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-ink: rgba(0, 0, 0, .95);
  --shadow-node: inset 0 1px 0 var(--tint), 0 24px 50px -28px var(--shadow-ink);
  --shadow-raised: inset 0 1px 0 var(--tint), 0 30px 60px -36px var(--shadow-ink);
  --shadow-soft: 0 14px 28px -14px rgba(0, 0, 0, .6);
  --shadow-button: 0 10px 24px -16px color-mix(in srgb, var(--red) 90%, transparent);

  /* Motion */
  --ease: cubic-bezier(.22, .7, .18, 1);
  --dur-fast: .2s;
  --dur: .32s;
  --dur-fade: .6s;
  --dur-flip: .7s;
  --dur-camera: 900ms;
  --dur-signal: 1.8s;

  /* Layout */
  --nav-height: 96px;
  --region-top: 116px;
  --region-side: clamp(24px, 5vw, 82px);
  --region-bottom: 30px;
  --width-column: 920px;
  --width-card: 680px;
  --width-popup: 720px;
  --width-narrow: 1180px;
  --width-content: 1240px;
  --width-wide: 1340px;
}

@media (max-width: 950px) {
  :root {
    --nav-height: 78px;
    --region-top: 92px;
    --region-side: 14px;
    --region-bottom: 16px;
    --text-name: clamp(39px, 9vw, 75px);
  }
}

/* -----------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */

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

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
}

body {
  color: var(--ink-body);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-synthesis: none;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar) transparent;
}

h1, h2, h3, h4, p, ul, figure {
  margin: 0;
}

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

button,
input,
textarea {
  font: inherit;
}

[hidden] {
  display: none !important;
}

/* -----------------------------------------------------------------------------
   3. SHELL
   -------------------------------------------------------------------------- */

/* Signal beads (brain.js); rotates with each section. */
#signals {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform-origin: 50% 50%;
  transform: rotate(var(--field-angle, 0deg)) scale(var(--field-scale, 1));
  transition: transform var(--field-duration, var(--dur-camera)) var(--ease);
  will-change: transform;
}

/* Synaptic field behind interior sections (background.js). */
.engineered-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--bg);
  transition: opacity var(--dur-fade);
}

body.landing-active .engineered-bg {
  opacity: 0;
}

#gravity-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The camera: app.js translates it so the active section fills the screen. */
.container {
  position: fixed;
  inset: 0;
  transition: transform var(--dur-camera) var(--ease);
  will-change: transform;
}

section {
  position: absolute;
  width: 100vw;
  height: 100svh;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fade);
}

section.camera-active {
  opacity: 1;
  pointer-events: auto;
}

/* Snapshot of the brain canvas used during the zoom into a section. */
.brain-portal {
  position: fixed;
  inset: 0;
  z-index: 900;
  overflow: hidden;
  pointer-events: none;
}

/* Interior content area; scrolls on its own below the navbar. */
.node-scroll-region {
  position: absolute;
  top: var(--region-top);
  right: var(--region-side);
  bottom: var(--region-bottom);
  left: var(--region-side);
  z-index: 1;
  padding: var(--space-7) clamp(var(--space-4), 3vw, var(--space-10)) var(--space-12);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Fields that centre their content vertically in the scroll region. */
.network-field {
  min-height: 100%;
}

/* -----------------------------------------------------------------------------
   4. NAVBAR
   -------------------------------------------------------------------------- */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  padding: 0 4%;
  background: var(--bg-nav);
  border-bottom: 1px solid var(--glass);
  backdrop-filter: blur(12px);
}

/* Wordmark: all-caps geometric sans, wide tracking; parentheses in accent red. */
.logo {
  display: inline-flex;
  align-items: baseline;
  color: var(--ink);
  font: 500 var(--text-logo)/1 var(--font-sans);
  letter-spacing: 0.17em;
  text-decoration: none;
}

.logo-name {
  text-transform: uppercase;
}

.logo-mark {
  margin-left: 0.04em;
  color: var(--red);
  font-weight: 700;
  font-size: var(--logo-mark);
  letter-spacing: 0.02em;
  transform: translateY(0.13em);
}

.nav-links,
.nav-dropdown {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-4), 2.2vw, var(--space-9));
}

.nav-link {
  position: relative;
  display: inline-block;
  padding: var(--space-3) var(--space-1);
  color: var(--ink);
  font: 500 var(--text-lg) var(--font-sans);
  opacity: .92;
  transition: color var(--dur-fast), opacity var(--dur-fast);
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-link.active {
  opacity: 1;
}

/* Underline: dark red when active; a faint light red on hover. */
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--space-1);
  height: 2px;
  background: var(--red-light);
  opacity: .55;
  transform: scaleX(0);
  transition: transform var(--dur-fast);
}

.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link.brain-target::after {
  transform: scaleX(1);
}

.nav-link.active::after {
  background: var(--red);
  opacity: 1;
  transform: scaleX(1);
}

/* Link of the brain hub under the cursor. */
.nav-link.brain-target {
  opacity: 1;
}

.hamburger-menu {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.hamburger-menu span {
  display: block;
  height: 3px;
  border-radius: 3px;
  background: var(--ink);
  transition: transform var(--dur), opacity var(--dur), background-color var(--dur);
}

.hamburger-menu:hover span,
.navbar.expanded .hamburger-menu span {
  background: var(--red);
}

.navbar.expanded .hamburger-menu span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.navbar.expanded .hamburger-menu span:nth-child(2) { opacity: 0; }
.navbar.expanded .hamburger-menu span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* Mobile menu: a panel below the navbar. */
.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-4) 0 var(--space-6);
  background: var(--bg-raised);
  border-bottom: 1px solid var(--glass);
}

.navbar.expanded .nav-dropdown {
  display: flex;
}

@media (max-width: 1150px) {
  .nav-links { gap: var(--space-4); }
  .nav-links .nav-link { font-size: var(--text-body); }
}

@media (max-width: 950px) {
  .nav-links { display: none; }
  .hamburger-menu { display: flex; }
  .logo { letter-spacing: 0.13em; }
}

/* -----------------------------------------------------------------------------
   5. BUTTONS, TAGS, LISTS
   -------------------------------------------------------------------------- */

/* Dark red filled button: contact submit, résumé downloads. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--red);
  color: var(--bar-ink);
  font: 600 var(--text-md)/1.2 var(--font-sans);
  box-shadow: var(--shadow-button);
  cursor: pointer;
  transition: background-color var(--dur-fast);
}

.btn:hover,
.btn:focus-visible {
  background: var(--red-light);
  outline: none;
}

/* Tags on ivory: near-white fill, faint burgundy outline. */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tag-list span {
  padding: var(--space-1) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--red) 28%, transparent);
  border-radius: var(--radius-xs);
  background: var(--tint-strong);
  color: var(--surface-ink);
  font: 500 var(--text-ui)/1.3 var(--font-mono);
}

.tag-list .tag-more {
  border-style: dashed;
  background: transparent;
  color: var(--surface-ink-muted);
}

/* Bulleted list with a short dark red dash. */
.dash-list {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
}

.dash-list li {
  position: relative;
  padding-left: var(--space-5);
  color: var(--surface-ink);
  font: 400 var(--text-copy)/1.65 var(--font-sans);
}

.dash-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: .72em;
  width: var(--space-2);
  height: 2px;
  background: var(--red);
}

.network-node strong,
.extra-detail-view strong {
  color: var(--surface-ink);
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
}

/* -----------------------------------------------------------------------------
   6. NODE NETWORK
   -------------------------------------------------------------------------- */

/* Links (SVG drawn by NodeNetwork) */
.node-network {
  position: relative;
  isolation: isolate;
}

.node-links {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}

/* Muted red-brown at low opacity; the links of a hovered node turn a brighter warm red. */
.node-link {
  fill: none;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .55;
  transition: opacity var(--dur) ease, stroke-width var(--dur) ease;
}

.node-link.is-lit {
  opacity: .85;
  stroke-width: 1.4;
}

.node-link.is-lit:not(.node-tendril) {
  stroke: var(--red);
  stroke-dasharray: 5 7;
  animation: node-signal var(--dur-signal) linear infinite;
}

/* Solid connector brighten, matching the career timeline (no travelling dash). */
.node-link.is-steady:not(.node-tendril) {
  opacity: 1;
  stroke: var(--red);
  stroke-width: 1.5px;
}

.node-tendril { opacity: .85; }
.node-tendril.is-lit,
.node-tendril.is-steady { opacity: 1; }
.node-junction { opacity: .8; }

@keyframes node-signal {
  to { stroke-dashoffset: -24; }
}

/* Node shell: ivory body under a burgundy title bar. */
.network-node {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--burgundy-line);
  border-radius: var(--radius-lg);
  color: var(--surface-ink);
  font-family: var(--font-sans);
  font-weight: 400;
  box-shadow: var(--shadow-node);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) ease, border-color var(--dur) ease;
}

.network-node:hover,
.network-node:focus-within {
  border-color: var(--red);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 var(--tint),
    0 0 28px -14px color-mix(in srgb, var(--red) 60%, transparent),
    0 28px 54px -28px var(--shadow-ink);
}

.network-node:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: var(--space-1);
}

.network-node.is-expanded-origin {
  border-color: var(--red);
}

.network-node :is(h1, h2, h3, h4) {
  color: var(--surface-ink);
  font-family: var(--font-sans);
}

.node-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 54px;
  margin: -1px -1px 0;
  padding: var(--space-3) var(--space-5);
  background: var(--burgundy);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: inset 0 -1px 0 var(--red);
  color: var(--bar-muted);
  font: 500 var(--text-xs)/1.2 var(--font-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.node-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(130% 160% at 100% 0, var(--bar-sheen), transparent 55%);
  pointer-events: none;
}

.node-bar > * {
  position: relative;
  z-index: 1;
}

.node-bar-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  color: var(--bar-ink);
  font: 600 var(--text-title)/1.35 var(--font-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.node-bar-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  white-space: nowrap;
}

.node-body {
  display: block;
  padding: var(--space-5) var(--space-6) var(--space-6);
}

/* The one socket every node connects through: left edge, centred on the title bar. */
.node-port {
  position: absolute;
  z-index: 4;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--gold-light), var(--gold) 55%, var(--gold-dark));
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4.5px var(--gold-a40), 0 0 12px var(--gold-a40);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: box-shadow var(--dur);
}

.network-node:hover .node-port,
.network-node:focus-within .node-port {
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4.5px var(--gold-a80), 0 0 18px var(--gold-a80);
}

/* Round icon-only button on a title bar (popup close). */
.bar-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--glass-line);
  border-radius: 50%;
  background: var(--glass);
  color: var(--bar-ink);
  font-size: var(--text-body);
  cursor: pointer;
  transition: background-color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}

.bar-button:hover,
.bar-button:focus-visible {
  border-color: var(--gold);
  background: var(--glass-hover);
  outline: none;
}

@media (max-width: 700px) {
  .node-bar { padding: var(--space-2) var(--space-4); }
}

/* -----------------------------------------------------------------------------
   7. EXPANDED NODE
   A node that grows out of its source into a popup (used by projects).
   -------------------------------------------------------------------------- */

.node-expand-layer {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 950;
}

.node-expand-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 45%, var(--bg-a55) 0%, var(--bg-a85) 100%);
  opacity: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity var(--dur) ease;
}

.node-expand-layer.is-open .node-expand-backdrop { opacity: 1; }
.node-expand-layer.is-swapped .node-expand-backdrop { transition: none; }

.node-expand-links {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* Dashed outline left at the source while it is expanded. */
.node-expand-ghost {
  position: absolute;
  z-index: 1;
  border: 1px dashed color-mix(in srgb, var(--red) 70%, transparent);
  border-radius: var(--radius-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) ease var(--dur-fast);
}

.node-expand-ghost.is-visible { opacity: .7; }

.expanded-node {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  transform-origin: 0 0;
}

.expanded-node:hover,
.expanded-node:focus-within {
  transform: none;
  box-shadow: inset 0 1px 0 var(--tint), 0 40px 90px -40px var(--shadow-ink);
}

.expanded-node-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-light) transparent;
}

.expanded-node-close:hover,
.expanded-node-close:focus-visible {
  transform: rotate(90deg);
}

/* -----------------------------------------------------------------------------
   8. REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .container,
  section,
  #signals,
  .engineered-bg,
  .network-node,
  .node-link,
  .node-port,
  .node-expand-backdrop,
  .node-expand-ghost {
    transition: none !important;
  }

  #signals { transform: none !important; }
  .node-link.is-lit { animation: none; }
  .network-node:hover,
  .network-node:focus-within { transform: none; }
}