/* ══════════════════════════════════════════
   MANTHAN SACHDEV — PORTFOLIO
   "Dossier" theme — case files, ledgers, stamps
   crimson on black · sharp edges · paper logic
   ══════════════════════════════════════════ */

*{ margin:0; padding:0; box-sizing:border-box; }

:root{
  --bg:        #0a0808;
  --bg-soft:   #0f0c0c;
  --surface:   #141010;
  --line:      rgba(242,239,233,0.12);
  --line-soft: rgba(242,239,233,0.06);

  --ink:    #f2efe9;
  --muted:  #9c9591;
  --faint:  #4a4543;

  --red:       #e0334d;
  --red-deep:  #8c0014;
  --red-glow:  rgba(224,51,77,0.45);

  --serif: 'Space Grotesk', sans-serif;
  --sans:  'DM Sans', sans-serif;
  --mono:  'JetBrains Mono', monospace;

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

  --pad: clamp(1.4rem, 5vw, 6rem);
}

html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  overflow-x:hidden;
  cursor:none;
}
@media (max-width:760px){ body{ cursor:auto; } }

::selection{ background:var(--red); color:#0a0808; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:var(--red); z-index:3000;
  box-shadow:0 0 14px var(--red-glow);
  transition:width 0.1s linear;
}

.grain{
  position:fixed; inset:-50%; z-index:2500; pointer-events:none;
  opacity:0.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-4%)} 60%{transform:translate(-3%,2%)}
  80%{transform:translate(4%,-2%)} 100%{transform:translate(0,0)}
}

/* ══ CURSOR — crosshair reticle, not a soft ring ══ */
.cursor-dot{ display:none; }
.cursor-ring{
  position:fixed; top:0; left:0; z-index:4000; pointer-events:none;
  width:22px; height:22px; margin:-11px 0 0 -11px;
  border:none;
}
.cursor-ring::before, .cursor-ring::after{
  content:""; position:absolute; background:var(--red);
}
.cursor-ring::before{ left:50%; top:0; width:1px; height:100%; transform:translateX(-50%); }
.cursor-ring::after{ top:50%; left:0; height:1px; width:100%; transform:translateY(-50%); }
.cursor-label{
  position:absolute; left:50%; top:130%; transform:translateX(-50%);
  white-space:nowrap;
  font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--red); opacity:0; transition:opacity .2s;
}
body.c-hover .cursor-ring{ width:14px; height:14px; margin:-7px 0 0 -7px; }
body.c-view .cursor-ring,
body.c-mail .cursor-ring{ width:34px; height:34px; margin:-17px 0 0 -17px; }
body.c-view .cursor-label,
body.c-mail .cursor-label{ opacity:1; }
body.c-down .cursor-ring{ opacity:0; }
@media (max-width:760px){ .cursor-dot,.cursor-ring{ display:none; } }

/* ══ NAV — FLOATING HIGH-END ARCHITECTURE ══ */

#nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.8rem var(--pad);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: 
    padding 0.5s var(--ease), 
    background-color 0.5s var(--ease), 
    backdrop-filter 0.5s var(--ease), 
    border-color 0.5s var(--ease);
}

/* Glassmorphism state on scroll */
#nav.scrolled {
  padding: 1rem var(--pad);
  background: rgba(10, 8, 8, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: rgba(242, 239, 233, 0.05);
}

/* ════ BRAND LOGO HUBS ════ */
.nav-logo {
  display: flex;
  align-items: center;
  background: rgba(15, 12, 12, 0.5);
  border: 1px solid var(--line-soft);
  transition: border-color 0.3s ease;
}

.logo-tab {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  background: var(--ink);
  color: var(--bg);
  padding: 0.45rem 0.65rem;
  font-weight: 600;
}

.logo-mark {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  padding: 0.45rem 0.8rem;
}

/* ════ CENTER LINKS NAVIGATION MATRIX ════ */
.nav-links {
  display: flex;
  list-style: none;
  background: rgba(15, 12, 12, 0.4);
  border: 1px solid var(--line-soft);
  border-radius: 40px; /* Gives it an ultra-clean floating capsule appearance */
  padding: 0.25rem 0.6rem;
  gap: 0.25rem;
}

.nav-links li {
  position: relative;
}

.nav-links a {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 0.5rem 1rem;
  position: relative;
  transition: color 0.4s var(--ease);
}

.nav-num {
  color: var(--faint);
  font-size: 0.58rem;
  transition: color 0.4s var(--ease);
}

/* Smooth custom slide line on text hover bounds */
.nav-txt {
  position: relative;
}
.nav-txt::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}

/* ════ RIGHT TELEMETRY AVAILABILITY CHIP ════ */
.nav-status {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: var(--muted);
  border: 1px solid var(--line-soft);
  background: rgba(15, 12, 12, 0.4);
  padding: 0.5rem 0.95rem;
  border-radius: 40px;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.status-dot {
  width: 5px;
  height: 5px;
  background: var(--red);
  box-shadow: 0 0 8px var(--red-glow);
  border-radius: 50%;
  animation: navPulse 2s ease-in-out infinite;
}

@keyframes navPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ════ MICRO-INTERACTION HOVER PHYSICS ════ */
@media (hover: hover) {
  .nav-logo:hover {
    border-color: var(--ink);
  }
  
  .nav-links a:hover {
    color: var(--ink);
  }
  .nav-links a:hover .nav-num {
    color: var(--red);
  }
  .nav-links a:hover .nav-txt::after {
    transform: scaleX(1);
    transform-origin: left;
  }
  
  .nav-status:hover {
    border-color: var(--red);
    color: var(--ink);
  }
}

/* ════ RESPONSIVE ADAPTABILITY STRUCTURAL COLLAPSE ════ */
@media (max-width: 960px) {
  .nav-links, .nav-status {
    display: none; /* Collapses nicely to fallback hamburger drawer system layouts */
  }
  #nav {
    padding: 1.4rem var(--pad);
  }
}
/* ══ HERO — SPATIAL FOCUS CONSOLE ══ */

#hero-spatial {
  position: relative;
  width: 100vw;
  min-height: 100svh;
  background-color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 8rem var(--pad) 5rem;
}

/* ════ ABSOLUTE CORNER NAVIGATION METADATA ════ */
.spatial-corner-text {
  position: absolute;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  z-index: 3;
  text-transform: uppercase;
  transition: transform 0.5s var(--ease), color 0.5s var(--ease);
}
.spatial-corner-text .faint-label { color: var(--faint); }

.spatial-corner-text.top-left     { top: clamp(2.2rem, 5.5vw, 5rem); left: clamp(2.2rem, 5.5vw, 5rem); }
.spatial-corner-text.top-right    { top: clamp(2.2rem, 5.5vw, 5rem); right: clamp(2.2rem, 5.5vw, 5rem); }
.spatial-corner-text.bottom-left  { bottom: clamp(2.2rem, 5.5vw, 5rem); left: clamp(2.2rem, 5.5vw, 5rem); }

/* ════ FIXED BOTTOM RIGHT TELEMETRY CONTROL PANEL ════ */
.spatial-telemetry-panel {
  position: absolute;
  bottom: clamp(2.2rem, 5.5vw, 5rem);
  right: clamp(2.2rem, 5.5vw, 5rem);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
  z-index: 3;
  max-width: 320px;
}

.spatial-telemetry-panel .static-coord {
  position: relative;
  inset: auto;
  color: var(--faint);
}

.kinetic-script-trace {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 20px;
  text-align: right;
  white-space: nowrap;
}

.trace-prompt {
  color: var(--red);
  font-weight: 500;
}

.trace-body {
  color: var(--ink);
}

.trace-cursor {
  display: inline-block;
  width: 5px;
  height: 1.1em;
  background: var(--red);
  margin-left: 1px;
  animation: traceBlink 1s steps(1) infinite;
}

@keyframes traceBlink { 50% { opacity: 0; } }

/* ════ CENTER FOCAL CORE ════ */
.spatial-center-core {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1300px;
  text-align: center;
  z-index: 2;
}

.radar-focal-circle {
  position: absolute;
  width: min(72vw, 650px);
  height: min(72vw, 650px);
  border: 1px dashed var(--line-soft);
  border-radius: 50%;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.6s var(--ease), border-color 0.6s var(--ease);
}

.radar-glow-pulse {
  width: 75%;
  height: 75%;
  background: radial-gradient(circle, rgba(224, 51, 77, 0.07) 0%, transparent 68%);
  filter: blur(40px);
  border-radius: 50%;
  animation: focalPulse 5s ease-in-out infinite alternate;
}

@keyframes focalPulse {
  0% { transform: scale(0.95); opacity: 0.6; }
  100% { transform: scale(1.05); opacity: 1; }
}

.spatial-name-canvas {
  display: flex;
  flex-direction: column;
  line-height: 0.82;
  margin-bottom: 2.2rem;
  cursor: default;
}

.spatial-word {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(3.6rem, 13vw, 13.5rem);
  letter-spacing: -0.05em;
  color: var(--ink);
  transform: translate3d(0, 0, 0);
  transition: transform 0.6s var(--ease), color 0.6s var(--ease), -webkit-text-stroke 0.6s var(--ease);
}

.spatial-word.secondary-row {
  margin-left: clamp(2.5rem, 9vw, 12rem);
  color: transparent;
  -webkit-text-stroke: 1px var(--ink);
}

.spatial-readout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.2rem;
  width: 100%;
  max-width: 520px;
  margin-top: 0.5rem;
}

.spatial-bio {
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--muted);
  transition: color 0.5s ease;
}

.spatial-actions {
  display: flex;
  gap: 2.5rem;
  align-items: center;
}

.spatial-link {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--faint);
  text-transform: uppercase;
  transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.spatial-link.main-cta {
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
}

/* ════ ADVANCED PARALLAX HOVER CONFIGURATIONS ════ */
@media (hover: hover) {
  #hero-spatial:hover .radar-focal-circle {
    transform: scale(1.04);
    border-color: rgba(224, 51, 77, 0.2);
  }

  #hero-spatial:hover .spatial-bio {
    color: var(--ink);
  }

  .spatial-name-canvas:hover .spatial-word.primary-row {
    color: transparent;
    -webkit-text-stroke: 1px var(--ink);
    transform: translate3d(-24px, 0, 0);
  }
  
  .spatial-name-canvas:hover .spatial-word.secondary-row {
    color: var(--red);
    -webkit-text-stroke: 1px var(--red);
    transform: translate3d(24px, 0, 0);
  }

  #hero-spatial:hover .spatial-corner-text.top-left     { transform: translate3d(-8px, -8px, 0); color: var(--ink); }
  #hero-spatial:hover .spatial-corner-text.top-right    { transform: translate3d(8px, -8px, 0); color: var(--ink); }
  #hero-spatial:hover .spatial-corner-text.bottom-left  { transform: translate3d(-8px, 8px, 0); color: var(--ink); }

  .spatial-link:hover {
    color: var(--red);
    transform: translate3d(0, -2px, 0);
  }
  .spatial-link.main-cta:hover {
    border-color: var(--red);
  }
}

/* ════ RESPONSIVE ADAPTABILITY REALIGNMENTS ════ */
@media (max-width: 860px) {
  .spatial-corner-text { position: relative; inset: auto !important; margin-bottom: 0.6rem; }
  .spatial-telemetry-panel { position: relative; inset: auto !important; align-items: center; margin-top: 1.5rem; }
  
  #hero-spatial {
    height: auto;
    padding: 7.5rem var(--pad) 4.5rem;
    flex-direction: column;
  }
  
  .spatial-center-core {
    margin-top: 2.5rem;
  }
  
  .spatial-word.secondary-row {
    margin-left: 0;
  }
}

/* ══ FIXED BOTTOM RIGHT TELEMETRY CONTROL PANEL ══ */
.spatial-telemetry-panel {
  position: absolute;
  bottom: clamp(2.2rem, 5.5vw, 5rem);
  right: clamp(2.2rem, 5.5vw, 5rem);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
  z-index: 3;
  width: 100%;
  max-width: 460px;
}

/* ══ MINECRAFT-INSPIRED 3D VOXEL BACKGROUND ══ */

.voxel-mesh-matrix {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  perspective: 1000px;
  pointer-events: none;
  overflow: hidden;
}

/* The camera workspace rotating down onto a voxel layout plane */
.voxel-camera {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(60deg) rotateZ(-45deg) translateZ(-100px);
  animation: worldOrbit 40s linear infinite;
}

@keyframes worldOrbit {
  0% { transform: rotateX(62deg) rotateZ(0deg) translateZ(-120px); }
  100% { transform: rotateX(62deg) rotateZ(360deg) translateZ(-120px); }
}

/* ════ VOXEL CUBE ENGINE (Pure CSS 3D) ════ */
.voxel-cube {
  position: absolute;
  width: clamp(40px, 5vw, 64px);
  height: clamp(40px, 5vw, 64px);
  transform-style: preserve-3d;
  transition: transform 0.8s var(--ease);
}

/* Individual faces of each 3D voxel block */
.voxel-cube span {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(10, 8, 8, 0.95);
  border: 1px solid var(--line);
}

/* Lighting coordinates mimicking standard Minecraft block shading */
.voxel-cube .f { transform: rotateY(0deg) translateZ(calc(clamp(40px, 5vw, 64px) / 2)); border-color: var(--line-soft); }
.voxel-cube .b { transform: rotateY(180deg) translateZ(calc(clamp(40px, 5vw, 64px) / 2)); }
.voxel-cube .l { transform: rotateY(-90deg) translateZ(calc(clamp(40px, 5vw, 64px) / 2)); background: rgba(15, 12, 12, 0.95); }
.voxel-cube .r { transform: rotateY(90deg) translateZ(calc(clamp(40px, 5vw, 64px) / 2)); background: rgba(20, 16, 16, 0.95); }
.voxel-cube .t { 
  transform: rotateX(90deg) translateZ(calc(clamp(40px, 5vw, 64px) / 2)); 
  background: rgba(242, 239, 233, 0.02); 
  border-color: var(--faint);
}

/* ════ PROCEDURAL COORDINATE POSITIONS ════ */
.voxel-cube.position-a { top: 25%; left: 30%; transform: translateZ(40px); }
.voxel-cube.position-b { top: 20%; left: 65%; transform: translateZ(-20px); }
.voxel-cube.position-c { top: 70%; left: 15%; transform: translateZ(80px); }
.voxel-cube.position-d { top: 60%; left: 75%; transform: translateZ(-60px); }

/* Atmospheric voxel environment lighting */
.voxel-horizon-glow {
  position: absolute;
  inset: -50%;
  background: radial-gradient(circle at 50% 50%, var(--red-glow) 0%, transparent 60%);
  filter: blur(60px);
  transform: translateZ(-150px);
  opacity: 0.6;
}

/* ════ HOVER COUPLING INTERACTION PHYSICS ════ */
@media (hover: hover) {
  /* When hovering into the hero space, the blocks dynamically step vertical steps */
  #hero-spatial:hover .voxel-cube.position-a { transform: translateZ(90px); }
  #hero-spatial:hover .voxel-cube.position-b { transform: translateZ(30px); }
  #hero-spatial:hover .voxel-cube.position-c { transform: translateZ(140px); }
  #hero-spatial:hover .voxel-cube.position-d { transform: translateZ(10px); }
  
  #hero-spatial:hover .voxel-cube .t {
    background: rgba(224, 51, 77, 0.1);
    border-color: rgba(224, 51, 77, 0.4);
  }
}

/* ══ TERMINAL CONTAINER (Premium Matte Window) ══ */
.terminal-window-console {
  width: 100%;
  background: #0f131a; /* Dark sleek premium console slate background */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: transform 0.4s var(--ease);
}

/* Header/Title Bar Layout */
.terminal-window-header {
  background: #161b22;
  padding: 0.8rem 1.2rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.mac-action-dots {
  display: flex;
  gap: 8px;
  grid-column: 1;
}

/* macOS Window Action Buttons Color Specs */
.mac-action-dots .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}
.dot.dot-close    { background: #ff5f56; }
.dot.dot-minimize { background: #ffbd2e; }
.dot.dot-expand   { background: #27c93f; }

.terminal-window-title {
  grid-column: 2;
  font-family: var(--mono);
  font-size: 0.65rem;
  color: #8b949e;
  letter-spacing: 0.05em;
}

/* ══ TERMINAL TEXT CONTENT AREA ══ */
.terminal-window-body {
  padding: 1.8rem 1.4rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.8;
  text-align: left;
}

/* Code Token Classes for Syntax Highlighting */
.code-row {
  color: #c9d1d9; /* Default code text white style footprint */
  white-space: pre-wrap;
}

.code-row.comment {
  color: #6e7681; /* Precise dev-comment grey */
  margin-bottom: 0.2rem;
}

.token-keyword {
  color: #ff7b72; /* Premium clean crimson code keyword highlights */
}

.token-object {
  color: #79c0ff; /* Class & Object Reference structural blue */
}

.token-function {
  color: #d2a8ff; /* Operational system method purple */
}

.token-string {
  color: #a5d6ff; /* Soft string value highlights */
}

/* Dynamic Live Status/Output Formatting */
.success-output {
  color: #7ee787; /* Clean system green output */
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.token-prompt {
  color: #7ee787;
  font-weight: 600;
}

.trace-body {
  color: inherit;
}

/* Cursor Core Terminal Blink Engine */
.trace-cursor {
  display: inline-block;
  width: 6px;
  height: 1.15em;
  background: #7ee787;
  margin-left: 2px;
  vertical-align: -3px;
  animation: cleanTerminalBlink 1s steps(2) infinite;
}

@keyframes cleanTerminalBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.spatial-telemetry-panel .static-coord {
  position: relative;
  inset: auto;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--faint);
}

/* Parallax Hover System */
@media (hover: hover) {
  #hero-spatial:hover .terminal-window-console {
    transform: translateY(-4px);
    border-color: rgba(224, 51, 77, 0.2);
    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.55), 0 0 20px rgba(224, 51, 77, 0.02);
  }
}

/* Viewport Adjustments for Responsive Fallbacks */
@media (max-width: 860px) {
  .spatial-telemetry-panel { 
    position: relative; 
    inset: auto !important; 
    margin-top: 3.5rem;
    max-width: 100%;
  }
}
/* torn paper edge under hero */
.torn-edge{ position:absolute; left:0; right:0; bottom:0; width:100%; height:14px; fill:none; stroke:var(--bg); z-index:4; }
.torn-edge polyline{ fill:var(--bg-soft); stroke:var(--line); stroke-width:1; }

/* ══ MARQUEE — ticker tape ══ */
.marquee-wrap{ padding:0; overflow:hidden; background:var(--red); border-bottom:1px solid var(--line); }
.marquee-row{ display:flex; white-space:nowrap; will-change:transform; padding:.55rem 0; }
.marquee-row.alt{ margin-top:0; background:#0a0808; }
.m-item{ font-family:var(--mono); font-weight:600; font-size:clamp(.76rem,1.3vw,.9rem); letter-spacing:.1em; text-transform:uppercase; padding:0 1.6rem; color:#0a0808; display:inline-flex; align-items:center; gap:1.3rem; }
.marquee-row.alt .m-item{ color:var(--red); }
.m-dot{ width:5px; height:5px; transform:rotate(45deg); background:#0a0808; }
.marquee-row.alt .m-dot{ background:var(--red); }

/* ══ SECTION SCAFFOLD ══ */
section{ position:relative; padding:clamp(5rem,11vw,11rem) var(--pad); max-width:1700px; margin:0 auto; overflow:hidden; }
.section-watermark{
  position:absolute; top:-2rem; right:var(--pad);
  font-family:var(--serif); font-weight:700; font-size:clamp(8rem,18vw,16rem);
  line-height:1; color:transparent; -webkit-text-stroke:1px var(--line);
  pointer-events:none; z-index:0; user-select:none;
}
.section-head{ position:relative; z-index:1; display:flex; align-items:baseline; gap:1.2rem; margin-bottom:clamp(2.5rem,5vw,4.5rem); }
.section-tag{ font-family:var(--mono); font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); position:relative; padding-left:1.3rem; }
.section-tag::before{ content:""; position:absolute; left:0; top:50%; width:.75rem; height:1px; background:var(--red); transform:translateY(-50%); }
.section-count{ margin-left:auto; font-family:var(--mono); font-size:.7rem; color:var(--faint); letter-spacing:.08em; }

.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }

/* ══ ABOUT ══ */

.about-grid{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:28px 1fr;
  grid-template-rows:auto auto;
  column-gap:clamp(2rem,5vw,4rem);
  row-gap:clamp(2.5rem,5vw,4rem);
  align-items:start;
}

/* vertical ruler rail */
.about-rail{
  grid-row:1 / 3;
  grid-column:1;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-left:1px solid var(--line);
  padding-left:8px;
}
.rail-tick{
  width:8px; height:1px;
  background:var(--faint);
}
.rail-tick.major{
  width:14px;
  background:var(--red);
}

.about-main{
  grid-column:2;
  grid-row:1;
  max-width:760px;
}

.about-statement{
  position:relative;
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.6rem,3.3vw,3.1rem);
  line-height:1.22;
  letter-spacing:-.02em;
  margin-bottom:2.2rem;
}
.about-quote{
  color:var(--red);
  font-size:1.4em;
  line-height:0;
  vertical-align:-0.28em;
  margin-right:.15rem;
}
.about-statement .w{ display:inline-block; opacity:.16; transition:opacity .5s var(--ease); }
.about-statement .w.lit{ opacity:1; }

.about-p{
  color:var(--muted);
  line-height:1.85;
  font-size:1rem;
  max-width:560px;
  padding-left:1.1rem;
  border-left:1px solid var(--line);
}

/* stat ledger — full-width strip under the statement, not a sidebar */
.about-stats{
  grid-column:2;
  grid-row:2;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.stat{
  position:relative;
  padding:1.8rem 1.6rem 1.6rem;
  border-right:1px solid var(--line);
  transition:background .35s var(--ease);
}
.stat:last-child{ border-right:none; }

.stat-index{
  position:absolute;
  top:.9rem; right:1.1rem;
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.1em;
  color:var(--faint);
  transition:color .35s var(--ease);
}

.stat-num{
  display:block;
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(2.2rem,4.4vw,3.6rem);
  letter-spacing:-.03em;
  color:var(--ink);
}
.stat dd{
  margin-top:.5rem;
  font-family:var(--mono);
  font-size:.64rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--faint);
}

@media (hover:hover){
  .stat:hover{ background:var(--surface); }
  .stat:hover .stat-num{ color:var(--red); }
  .stat:hover .stat-index{ color:var(--red); }
}

/* ══ RESPONSIVE ══ */
@media (max-width:760px){
  .about-grid{
    grid-template-columns:1fr;
  }
  .about-rail{ display:none; }
  .about-main, .about-stats{ grid-column:1; }
  .about-stats{ grid-template-columns:1fr; }
  .stat{ border-right:none; border-bottom:1px solid var(--line); }
  .stat:last-child{ border-bottom:none; }
}
/* ══ LOG ══ */
/* ══ LOG — transmission feed ══ */

.now-grid{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,6vw,6rem);
  align-items:start;
}

.now-live{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:1.6rem;
}
.live-dot{ width:8px; height:8px; background:var(--red); box-shadow:0 0 12px var(--red-glow); animation:pulse 1.8s ease-in-out infinite; }

.now-title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.8rem,4.2vw,3.8rem); line-height:1.08; letter-spacing:-.03em;
}

.now-list{
  list-style:none;
  display:flex; flex-direction:column;
  border:1px solid var(--line);
}

.now-item{
  display:grid;
  grid-template-columns:56px 1fr auto;
  align-items:center;
  gap:1.2rem;
  padding:1.4rem 1.4rem;
  border-bottom:1px solid var(--line);
  transition:background .3s ease;
}
.now-item:last-child{ border-bottom:none; }

.now-ch{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.08em;
  color:var(--red);
}

.now-copy{ display:flex; flex-direction:column; gap:.4rem; }
.now-tag{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint);
}
.now-body{ font-size:.98rem; line-height:1.55; color:var(--muted); }

/* animated signal bars — like a transmission meter */
.now-signal{
  display:flex; align-items:flex-end; gap:3px; height:18px;
}
.now-signal span{
  width:3px; background:var(--faint);
  animation:signal 1.6s ease-in-out infinite;
}
.now-signal span:nth-child(1){ height:30%; animation-delay:0s; }
.now-signal span:nth-child(2){ height:65%; animation-delay:.18s; }
.now-signal span:nth-child(3){ height:45%; animation-delay:.36s; }
.now-signal span:nth-child(4){ height:80%; animation-delay:.54s; }
@keyframes signal{
  0%, 100%{ transform:scaleY(.4); background:var(--faint); }
  50%{ transform:scaleY(1); background:var(--red); }
}

@media (hover:hover){
  .now-item:hover{ background:var(--surface); }
}

/* ══ PROCESS — EDITORIAL WORKFLOW ══ */

.editorial-process-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(3rem, 8vw, 8rem);
  margin-top: 4rem;
  position: relative;
  z-index: 1;
}

/* Left Column Styling */
.process-editorial-left {
  position: relative;
}

.editorial-sticky-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 1.5rem;
}

.editorial-sticky-sub {
  font-family: var(--sans);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--muted);
  max-width: 460px;
}

/* Right Column Step Stack */
.process-editorial-right {
  display: flex;
  flex-direction: column;
}

.editorial-step {
  border-top: 1px solid var(--line);
  padding: 2.2rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  
  /* Smooth transform transition setups for micro-physics interactions */
  position: relative;
  transform: translate3d(0, 0, 0);
  transition: 
    border-color 0.4s var(--ease),
    padding 0.4s var(--ease),
    background-color 0.4s var(--ease);
}

.editorial-step:last-child {
  border-bottom: 1px solid var(--line);
}

/* Moving structural content layers independently to create a parallax layout shift */
.editorial-step .step-meta-row,
.editorial-step .step-heading,
.editorial-step .step-description {
  transform: translate3d(0, 0, 0);
  transition: transform 0.4s var(--ease), color 0.4s var(--ease);
}

.step-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.step-count-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
}

.step-status-indicator {
  font-family: var(--mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--faint);
}

.step-heading {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  letter-spacing: -0.01em;
  color: var(--ink);
}

.step-description {
  font-family: var(--sans);
  font-size: 0.96rem;
  line-height: 1.75;
  color: var(--muted);
  max-width: 580px;
}

/* ══ ACTIVE STATE OVERRIDES (Phase 4) ══ */
.editorial-step.active-step {
  border-top-color: rgba(224, 51, 77, 0.4);
}

.editorial-step.active-step .step-count-label {
  color: var(--red);
}

.editorial-step.active-step .step-status-indicator.active {
  color: var(--red);
  font-weight: 500;
}

.editorial-step.active-step .step-heading {
  color: var(--red);
}

/* ══ HIGH-END PREMIUM HOVER PHYSICS ══ */
@media (hover: hover) {
  
  /* Hover state for standard static rows */
  .editorial-step:not(.active-step):hover {
    border-top-color: var(--ink);
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: rgba(242, 239, 233, 0.01);
  }
  
  /* Gentle, elegant sliding trace for the main text elements */
  .editorial-step:not(.active-step):hover .step-heading {
    color: var(--red);
    transform: translate3d(12px, 0, 0);
  }

  .editorial-step:not(.active-step):hover .step-meta-row,
  .editorial-step:not(.active-step):hover .step-description {
    transform: translate3d(12px, 0, 0);
  }
  
  .editorial-step:not(.active-step):hover .step-count-label {
    color: var(--muted);
  }

  /* Distinct hover physics for the active/current row */
  .editorial-step.active-step:hover {
    border-top-color: var(--red);
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: rgba(224, 51, 77, 0.02);
  }

  .editorial-step.active-step:hover .step-heading,
  .editorial-step.active-step:hover .step-meta-row,
  .editorial-step.active-step:hover .step-description {
    transform: translate3d(12px, 0, 0);
  }
}

/* Desktop Sticky Viewport Behavior */
@media (min-width: 960px) {
  .process-editorial-left {
    position: sticky;
    top: 8rem;
    height: fit-content;
  }
}

/* Responsive Structural Collapse */
@media (max-width: 960px) {
  .editorial-process-grid {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
  
  .editorial-sticky-title {
    max-width: 680px;
  }
  
  .editorial-step {
    padding: 2rem 0;
  }
}
/* ══ WORK — manifest ledger ══ */
.ledger{ position:relative; z-index:1; border:1px solid var(--line); }
.ledger-head{
  display:grid; grid-template-columns:60px 1.5fr 1.2fr 1.6fr 90px;
  gap:1rem; padding:.85rem 1.4rem;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
}
.ledger-row{
  display:grid; grid-template-columns:60px 1.5fr 1.2fr 1.6fr 90px;
  gap:1rem; align-items:center;
  padding:1.3rem 1.4rem;
  border-bottom:1px solid var(--line);
  position:relative; transition:background .3s, padding-left .35s var(--ease);
}
.ledger-row:last-child{ border-bottom:none; }
.ledger-no{ font-family:var(--mono); font-size:.78rem; color:var(--faint); }
.ledger-name{ font-family:var(--serif); font-weight:600; font-size:clamp(1.05rem,1.6vw,1.35rem); letter-spacing:-.01em; }
.ledger-cat{ font-family:var(--mono); font-size:.72rem; color:var(--muted); }
.ledger-stack{ font-family:var(--mono); font-size:.68rem; color:var(--faint); }
.ledger-status{
  justify-self:start;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--red); border:1px solid var(--red); padding:.3rem .55rem;
}

@media (hover:hover){
  .ledger-row:hover{ background:var(--surface); padding-left:1.9rem; }
  .ledger-row:hover .ledger-name{ color:var(--red); }
}

.work-preview{ position:fixed; top:0; left:0; width:300px; height:210px; z-index:1200; pointer-events:none; opacity:0; transform:translate(-50%,-50%) scale(.85); transition:opacity .4s var(--ease), transform .4s var(--ease); overflow:hidden; }
.work-preview.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.preview-inner{ width:100%; height:100%; display:grid; place-items:center; position:relative; background:var(--surface); border:1px solid var(--line); }
.preview-inner::before{ content:""; position:absolute; inset:0; opacity:.9;
  background-image:repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 10px, transparent 10px 20px); }
.preview-label{ position:relative; font-family:var(--mono); font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); padding:.4rem .8rem; border:1px solid var(--red); background:rgba(10,8,8,.7); }

/* ══ SKILLS — redacted reveal ══ */
.skills-grid{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.5rem,3vw,3rem); }
.skill-title{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:1.6rem; padding-bottom:1rem; border-bottom:1px solid var(--red); display:inline-block; }
.skill-list{ display:flex; flex-direction:column; }
.skill-list span{
  position:relative; display:block; padding:.9rem 0; border-bottom:1px solid var(--line-soft);
  font-size:1.02rem; color:transparent; cursor:default;
  transition:color .25s ease .15s;
}
.skill-list span::before{
  content:""; position:absolute; left:0; top:18%; width:100%; height:64%;
  background:var(--red); transition:width .35s var(--ease);
}
.skill-list span:hover{ color:var(--ink); }
.skill-list span:hover::before{ width:0; }

/* ══ CONTACT ══ */
#contact{ text-align:center; padding-top:clamp(6rem,12vw,12rem); padding-bottom:clamp(6rem,12vw,12rem); overflow:hidden; }
.contact-glow{ position:absolute; left:50%; top:55%; transform:translate(-50%,-50%); width:70vw; height:50vw; max-width:900px; background:radial-gradient(circle, rgba(224,51,77,0.12), transparent 65%); filter:blur(30px); pointer-events:none; z-index:0; }
.contact-label{ position:relative; font-family:var(--mono); font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:2rem; }
.contact-headline{ position:relative; display:block; font-family:var(--serif); font-weight:700; font-size:clamp(2.8rem,11.5vw,10.5rem); line-height:.88; letter-spacing:-.04em; }
.contact-headline .line{ display:block; overflow:hidden; }
.contact-headline .accent{ color:var(--red); }
.contact-headline .char{ display:inline-block; transform:translateY(110%); }
.contact-mail{ position:relative; display:inline-block; margin-top:2.5rem; font-family:var(--mono); font-size:clamp(.9rem,2vw,1.3rem); color:var(--muted); border-bottom:1px solid var(--line); padding-bottom:.3rem; transition:color .3s, border-color .3s; }
.contact-mail:hover{ color:var(--red); border-color:var(--red); }
.contact-socials{ position:relative; display:flex; justify-content:center; gap:2rem; margin-top:3rem; font-family:var(--mono); font-size:.76rem; letter-spacing:.06em; }
.contact-socials a{ color:var(--faint); transition:color .3s; }
.contact-socials a:hover{ color:var(--ink); }

/* ══ FOOTER ══ */
footer{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding:2.2rem var(--pad); border-top:1px solid var(--line); font-family:var(--mono); font-size:.7rem; letter-spacing:.04em; color:var(--faint); }

/* ══ HAMBURGER + MOBILE MENU ══ */
.nav-hamburger{ display:none; flex-direction:column; justify-content:center; gap:5px; width:36px; height:36px; padding:4px; background:none; border:none; cursor:pointer; z-index:1600; position:relative; }
.nav-hamburger span{ display:block; width:22px; height:1.5px; background:var(--ink); transition:transform .4s var(--ease), opacity .3s, width .3s var(--ease); transform-origin:center; }
body.menu-open .nav-hamburger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
body.menu-open .nav-hamburger span:nth-child(2){ opacity:0; width:0; }
body.menu-open .nav-hamburger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.mobile-menu{ position:fixed; inset:0; z-index:1400; background:var(--bg); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:0; opacity:0; pointer-events:none; transition:opacity .4s var(--ease); }
body.menu-open .mobile-menu{ opacity:1; pointer-events:all; }
.mobile-links{ list-style:none; text-align:center; }
.mobile-links li{ overflow:hidden; }
.mobile-links a{ display:block; font-family:var(--serif); font-weight:600; font-size:clamp(2.4rem,10vw,4rem); letter-spacing:-.03em; color:var(--ink); padding:.4rem 0; transition:color .3s; }
.mobile-links a:hover{ color:var(--red); }
.mobile-cta{ margin-top:2.5rem; font-family:var(--mono); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line); padding-bottom:.3rem; transition:color .3s, border-color .3s; }
.mobile-cta:hover{ color:var(--red); border-color:var(--red); }

/* ══ RESPONSIVE ══ */
@media (max-width:960px){
  .nav-links{ display:none; }
  .nav-hamburger{ display:flex; }
  .nav-status{ display:none; }

  #hero{ padding:6rem var(--pad) 2.5rem; }
  .hero-bottom{ grid-template-columns:1fr; gap:2.2rem; }
  .terminal{ justify-self:start; max-width:100%; }

  .about-grid, .now-grid{ grid-template-columns:1fr; }
  .skills-grid{ grid-template-columns:1fr 1fr; }
  .exp-item{ grid-template-columns:1fr; gap:.7rem; }
  .exp-rail{ display:none; }

  .ledger-head, .ledger-row{ grid-template-columns:36px 1.4fr 1fr; }
  .ledger-stack, .ledger-status{ display:none; }

  .section-watermark{ font-size:clamp(5rem,22vw,8rem); top:-1rem; }
}
@media (max-width:560px){
  #hero{ padding:5.5rem var(--pad) 2rem; }
  .hero-name{ font-size:clamp(2.6rem,13vw,3.5rem); }
  .hero-desc{ font-size:1rem; }
  .hero-foot{ flex-direction:column; align-items:flex-start; }
  .hero-actions{ flex-wrap:wrap; }

  section{ padding:clamp(3.5rem,9vw,5rem) var(--pad); }

  .about-stats{ grid-template-columns:repeat(3,1fr); gap:.8rem; }
  .stat-num{ font-size:clamp(1.6rem,7vw,2.4rem); }

  .now-title{ font-size:clamp(1.6rem,7vw,2.4rem); }

  .ledger-name{ font-size:1.05rem; }

  .contact-headline{ font-size:clamp(2.2rem,10vw,3rem); }
  .contact-mail{ font-size:.78rem; word-break:break-all; }

  .skills-grid{ grid-template-columns:1fr; }
  footer{ flex-direction:column; text-align:center; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  .hero-name .char, .contact-headline .char{ transform:none; }
  .about-statement .w{ opacity:1; }
  html{ scroll-behavior:auto; }
}

/* ══ HERO — spatial focus console ══ */

#hero{
  position:relative;
  min-height:100svh;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:var(--bg);
}

/* ── improved background: dot grid + vignette ── */
#hero::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size:36px 36px;
  mask-image:radial-gradient(ellipse 75% 75% at 50% 50%, black 30%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 75% 75% at 50% 50%, black 30%, transparent 100%);
  pointer-events:none;
}

/* deep vignette so edges feel like a room, not a wall */
#hero::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(ellipse 80% 80% at 50% 50%, transparent 40%, rgba(10,8,8,0.85) 100%);
  pointer-events:none;
}

/* ── corner labels ── */
.hero-corner{
  position:absolute;
  display:flex; flex-direction:column; gap:.3rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em;
  z-index:4;
  transition:transform .5s var(--ease), color .4s ease;
}
.hero-corner.top-left  { top:2rem; left:var(--pad); }
.hero-corner.top-right { top:2rem; right:var(--pad); text-align:right; }
.hero-corner.bottom-left{ bottom:2.2rem; left:var(--pad); }
.corner-label{ color:var(--faint); text-transform:uppercase; }
.corner-val  { color:var(--muted); }

/* ── telemetry panel — bottom right ── */
.hero-telemetry{
  position:absolute;
  bottom:2.2rem; right:var(--pad);
  width:clamp(220px,26vw,320px);
  border:1px solid var(--line);
  background:rgba(10,8,8,0.75);
  backdrop-filter:blur(10px);
  z-index:4;
  transition:border-color .4s ease;
}
.tele-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:.45rem .75rem;
  border-bottom:1px solid var(--line);
  background:var(--surface);
}
.tele-label{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--red);
}
.tele-dot{
  width:6px; height:6px;
  background:var(--red);
  box-shadow:0 0 10px var(--red-glow);
  animation:pulse 1.8s ease-in-out infinite;
}
.tele-body{
  padding:.8rem .9rem 1rem;
  font-family:var(--mono); font-size:.72rem; line-height:1.85;
  color:var(--muted);
  min-height:80px;
}
.t-prompt { color:var(--red); }
.t-cmd    { color:var(--ink); }
.t-out    { color:var(--muted); }
.t-cursor {
  display:inline-block; width:7px; height:.9em;
  background:var(--red); vertical-align:-1px; margin-left:2px;
  animation:blink 1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

/* ── radial grid backdrop ── */
.hero-radial{
  position:absolute; inset:0;
  display:grid; place-items:center;
  pointer-events:none; z-index:2;
}
.radial-svg{
  width:min(76vw,76vh);
  height:min(76vw,76vh);
  opacity:.45;
  transition:transform .7s var(--ease), opacity .5s ease;
}
.radial-svg circle{
  fill:none;
  stroke:var(--line);
  stroke-width:.6px;
}
.radial-svg line{
  stroke:var(--line);
  stroke-width:.5px;
}
.radial-svg circle:first-child{
  stroke:rgba(224,51,77,0.3);
  stroke-width:1px;
  transition:stroke .5s ease;
}
.radial-svg line:nth-child(5),
.radial-svg line:nth-child(6){
  stroke:rgba(255,255,255,0.07);
}

.radial-glow{
  position:absolute;
  width:clamp(260px,32vw,420px);
  height:clamp(260px,32vw,420px);
  background:radial-gradient(circle, rgba(224,51,77,0.2), rgba(224,51,77,0.05) 50%, transparent 70%);
  filter:blur(24px);
  transition:transform .7s var(--ease);
}

/* ── centre core ── */
.hero-core{
  position:relative; z-index:3;
  display:flex; flex-direction:column;
  align-items:center; text-align:center;
  gap:1.6rem;
  padding:0 var(--pad);
  max-width:1100px; width:100%;
}

.hero-meta{
  display:flex; align-items:center; gap:.9rem;
}
.meta-line{
  width:36px; height:1px;
  background:var(--red);
}
.meta-text{
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
}

/* name */
.hero-name{
  display:flex; flex-direction:column; align-items:center;
  font-family:var(--serif); font-weight:700;
  line-height:.82; letter-spacing:-.04em;
  font-size:clamp(3.6rem,14vw,13rem);
}
.hero-word{
  display:block;
  transition:color .45s var(--ease),
             -webkit-text-stroke-color .45s var(--ease),
             transform .5s var(--ease);
  will-change:transform;
}
.primary-word{
  color:var(--ink);
  -webkit-text-stroke:1.5px transparent;
}
.outline-word{
  -webkit-text-stroke:1.5px var(--ink);
  color:transparent;
}

/* readout block */
.hero-readout{
  display:flex; flex-direction:column; align-items:center;
  gap:1.5rem; max-width:560px;
}
.hero-bio{
  font-size:clamp(.9rem,1.3vw,1.05rem);
  line-height:1.78; color:var(--muted);
  text-align:center;
  transition:color .4s ease;
}

.hero-actions{
  display:flex; gap:0;
  border:1px solid var(--line);
  transition:border-color .4s ease;
}
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.95rem 1.6rem;
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase;
  transition:background .3s, color .3s, transform .35s var(--ease);
}
.btn-primary{ background:var(--red); color:#0a0808; }
.btn-primary:hover{ background:var(--ink); }
.btn-arrow{ display:inline-block; transition:transform .3s var(--ease); }
.btn-primary:hover .btn-arrow{ transform:translate(2px,-2px); }
.btn-ghost{ color:var(--ink); border-left:1px solid var(--line); }
.btn-ghost:hover{ color:var(--red); }

.hero-socials{
  display:flex; gap:1.8rem;
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.06em; color:var(--faint);
}
.hero-socials a{
  transition:color .3s, transform .3s var(--ease);
}
.hero-socials a:hover{
  color:var(--red);
  transform:translateY(-2px);
}

/* ── scroll cue ── */
.scroll-cue{
  position:absolute; bottom:2rem; left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-family:var(--mono); font-size:.6rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--faint); z-index:4;
}
.scroll-track{
  width:1px; height:40px; background:var(--line);
  position:relative; overflow:hidden;
}
.scroll-thumb{
  position:absolute; top:0; left:0;
  width:100%; height:38%;
  background:var(--red);
  animation:scrolldown 2s var(--ease) infinite;
}
@keyframes scrolldown{
  0%  { transform:translateY(-100%); }
  100%{ transform:translateY(260%); }
}

/* ── torn bottom edge ── */
.torn-edge{
  position:absolute; left:0; right:0; bottom:0;
  width:100%; height:14px; z-index:5;
}
.torn-edge polyline{
  fill:var(--bg-soft);
  stroke:var(--line); stroke-width:1;
}

/* ══ HOVER EFFECTS ══ */
@media (hover:hover){

  /* radial grid scales up + brightens on hero hover */
  #hero:hover .radial-svg{
    transform:scale(1.04);
    opacity:.65;
  }
  #hero:hover .radial-svg circle:first-child{
    stroke:rgba(224,51,77,0.45);
  }
  #hero:hover .radial-glow{
    transform:scale(1.15);
  }

  /* name: primary word slides left + becomes outlined;
     outline word slides right + fills red */
  #hero:hover .primary-word{
    color:transparent;
    -webkit-text-stroke:1.5px var(--ink);
    transform:translate3d(-20px, 0, 0);
  }
  #hero:hover .outline-word{
    color:var(--red);
    -webkit-text-stroke:1.5px var(--red);
    transform:translate3d(20px, 0, 0);
  }

  /* bio text brightens */
  #hero:hover .hero-bio{
    color:var(--ink);
  }

  /* corner labels pull outward */
  #hero:hover .hero-corner.top-left   { transform:translate3d(-8px,-8px,0); color:var(--ink); }
  #hero:hover .hero-corner.top-right  { transform:translate3d(8px,-8px,0);  color:var(--ink); }
  #hero:hover .hero-corner.bottom-left{ transform:translate3d(-8px,8px,0);  color:var(--ink); }

  /* telemetry border lights up */
  #hero:hover .hero-telemetry{
    border-color:rgba(224,51,77,0.35);
  }
}

/* ══ RESPONSIVE ══ */
@media (max-width:760px){
  .hero-corner.top-right{ display:none; }
  .hero-telemetry{
    position:static;
    width:100%;
    border-left:none; border-right:none; border-bottom:none;
    order:10;
  }
  #hero{ display:flex; flex-direction:column; padding:5.5rem 0 0; }
  .hero-core{ padding:2rem var(--pad) 1.5rem; }
  .hero-name{ font-size:clamp(2.8rem,14vw,5rem); }
  .radial-svg{ width:95vw; height:95vw; }
  .hero-corner.bottom-left{ display:none; }
  .scroll-cue{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .primary-word{ color:var(--ink); }
  .outline-word{ color:transparent; }
}

/* ══ NAV ══ */

#nav{
  position:fixed; top:0; left:0; width:100%; z-index:1500;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.4rem var(--pad);
  border-bottom:1px solid transparent;
  transition:
    padding .4s var(--ease),
    background .4s ease,
    border-color .4s ease;
}

/* scrolled state: pill becomes a bar */
#nav.scrolled{
  padding:.85rem var(--pad);
  background:rgba(10,8,8,0.78);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-color:var(--line);
}

/* ── logo ── */
.nav-logo{
  display:inline-flex; align-items:center; gap:0;
  font-family:var(--serif); font-weight:700;
  font-size:1rem; letter-spacing:.02em;
  color:var(--ink);
  transition:color .3s;
}
.logo-bracket{
  font-family:var(--mono); font-size:.9rem;
  color:var(--red);
  transition:letter-spacing .35s var(--ease), color .3s;
}
.nav-logo:hover .logo-bracket{ letter-spacing:.12em; }
.nav-logo:hover{ color:var(--red); }

/* ── center links ── */
.nav-links{
  display:flex; align-items:center; gap:0;
  list-style:none;
  border:1px solid var(--line);
}
.nav-links li{ border-right:1px solid var(--line); }
.nav-links li:last-child{ border-right:none; }

.nav-links a{
  position:relative;
  display:flex; align-items:center; gap:.45rem;
  padding:.55rem 1.1rem;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.07em;
  color:var(--muted);
  overflow:hidden;
  transition:color .3s, background .3s;
}
.nav-num{
  font-size:.58rem; color:var(--red); line-height:1;
  transition:color .3s;
}
.nav-txt{ transition:transform .35s var(--ease); display:inline-block; }

/* underline that wipes in from left */
.nav-line{
  position:absolute; bottom:0; left:0;
  width:100%; height:1px;
  background:var(--red);
  transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav-links a:hover{ color:var(--ink); background:rgba(255,255,255,0.025); }
.nav-links a:hover .nav-line{ transform:scaleX(1); }
.nav-links a:hover .nav-txt{ transform:translateY(-1px); }

/* ── right: clock + status ── */
.nav-right{
  display:flex; align-items:center; gap:1rem;
}
.nav-time{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.06em;
  color:var(--faint);
  border-right:1px solid var(--line);
  padding-right:1rem;
}

.nav-status{
  display:flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.06em;
  color:var(--muted);
  border:1px solid var(--line);
  padding:.45rem .75rem;
  transition:border-color .3s, color .3s;
}
.nav-status:hover{ border-color:var(--red); color:var(--ink); }
.status-dot{
  width:6px; height:6px;
  background:var(--red);
  box-shadow:0 0 8px var(--red-glow);
  animation:pulse 2s ease-in-out infinite;
}
.status-text{ text-transform:uppercase; font-size:.62rem; letter-spacing:.1em; }

/* ── hamburger — 2-line version ── */
.nav-hamburger{
  display:none; flex-direction:column;
  justify-content:center; gap:6px;
  width:34px; height:34px; padding:4px;
  background:none; border:1px solid var(--line);
  cursor:pointer; z-index:1600;
  transition:border-color .3s;
}
.nav-hamburger:hover{ border-color:var(--red); }
.nav-hamburger span{
  display:block; width:100%; height:1px;
  background:var(--ink);
  transition:transform .4s var(--ease), opacity .3s, width .3s var(--ease);
  transform-origin:center;
}
body.menu-open .nav-hamburger span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
body.menu-open .nav-hamburger span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

/* ── mobile menu ── */
.mobile-menu{
  position:fixed; inset:0; z-index:1400;
  background:var(--bg);
  display:flex; flex-direction:column;
  padding:0 var(--pad) 3rem;
  opacity:0; pointer-events:none;
  transform:translateY(-12px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
body.menu-open .mobile-menu{
  opacity:1; pointer-events:all; transform:none;
}

.mobile-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:1.4rem 0;
  border-bottom:1px solid var(--line);
  margin-bottom:2rem;
}
.mobile-label{
  font-family:var(--mono); font-size:.66rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint);
}
.mobile-close{
  font-family:var(--mono); font-size:.8rem;
  color:var(--muted); cursor:pointer;
  transition:color .3s;
}
.mobile-close:hover{ color:var(--red); }

.mobile-links{ list-style:none; display:flex; flex-direction:column; gap:0; flex:1; }
.mobile-links li{ border-bottom:1px solid var(--line); }
.mobile-links a{
  display:flex; align-items:center; gap:1rem;
  font-family:var(--serif); font-weight:600;
  font-size:clamp(2rem,8vw,3.2rem); letter-spacing:-.03em;
  color:var(--ink); padding:.6rem 0;
  transition:color .3s, padding-left .35s var(--ease);
}
.mobile-links .nav-num{
  font-family:var(--mono); font-size:.72rem;
  color:var(--red); align-self:flex-end; padding-bottom:.35rem;
}
.mobile-links a:hover{ color:var(--red); padding-left:.6rem; }

.mobile-cta{
  display:inline-block; margin-top:2rem;
  font-family:var(--mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
  border-bottom:1px solid var(--line);
  padding-bottom:.3rem;
  transition:color .3s, border-color .3s;
}
.mobile-cta:hover{ color:var(--red); border-color:var(--red); }

/* ══ RESPONSIVE ══ */
@media (max-width:960px){
  .nav-links{ display:none; }
  .nav-hamburger{ display:flex; }
  .nav-time{ display:none; }
  .nav-status .status-text{ display:none; }
  .nav-status{ padding:.45rem .55rem; }
}
@media (max-width:560px){
  .nav-status{ display:none; }
}

/* ══════════════════════════════════════
   WORK — manifest ledger
   insane hover · scanline · ghost type
   ══════════════════════════════════════ */

/* ── ledger shell ── */
.ledger{
  position:relative; z-index:1;
  border:1px solid var(--line);
  overflow:hidden;
}

/* scanline sweep — plays once on section hover */
.ledger::before{
  content:"";
  position:absolute; left:0; top:-100%; width:100%; height:40%;
  background:linear-gradient(
    to bottom,
    transparent 0%,
    rgba(224,51,77,0.04) 50%,
    transparent 100%
  );
  z-index:0; pointer-events:none;
  animation:scanline 4s linear infinite;
}
@keyframes scanline{
  0%  { top:-40%; }
  100%{ top:110%; }
}

/* ── header row ── */
.ledger-head{
  display:grid;
  grid-template-columns: 56px 1.6fr 1.2fr 1.4fr 70px 100px;
  gap:1rem;
  padding:.75rem 1.6rem;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:.6rem;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--faint);
  position:relative; z-index:1;
}

/* ── each row ── */
.ledger-row{
  position:relative;
  display:grid;
  grid-template-columns: 56px 1.6fr 1.2fr 1.4fr 70px 100px;
  gap:1rem;
  align-items:center;
  padding:1.5rem 1.6rem;
  border-bottom:1px solid var(--line);
  overflow:hidden;
  transition:
    padding .45s var(--ease),
    background .35s ease;
  z-index:1;
}
.ledger-row:last-child{ border-bottom:none; }

/* red fill wipe — scaleX from left */
.ledger-row::before{
  content:"";
  position:absolute; inset:0;
  background:var(--red);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .55s var(--ease);
  z-index:0;
}

/* bottom progress bar */
.ledger-row::after{
  content:"";
  position:absolute; bottom:0; left:0;
  width:0%; height:1px;
  background:var(--red);
  transition:width .5s var(--ease);
  z-index:2;
}

/* all children sit above the fill layer */
.ledger-row > *{ position:relative; z-index:2; }

/* ── cell: number ── */
.l-no{
  font-family:var(--mono); font-size:.78rem; color:var(--faint);
  transition:color .3s, transform .45s var(--ease);
}

/* ── cell: name + ghost ── */
.l-name{
  position:relative;
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.1rem,1.8vw,1.5rem); letter-spacing:-.01em;
  transition:color .3s, transform .45s var(--ease);
  overflow:hidden;
}

/* ghost text — large faded echo behind the name */
.l-ghost{
  position:absolute;
  top:50%; left:0;
  transform:translateY(-50%) translateX(0px);
  font-size:3.2em; font-weight:700; letter-spacing:-.04em;
  color:rgba(224,51,77,0);
  white-space:nowrap;
  pointer-events:none;
  line-height:1;
  transition:
    color .5s var(--ease),
    transform .55s var(--ease);
  z-index:-1;
}

/* ── cell: category ── */
.l-cat{
  font-family:var(--mono); font-size:.72rem;
  color:var(--muted);
  transition:color .3s;
}

/* ── cell: stack pills ── */
.l-stack{
  display:flex; flex-wrap:wrap; gap:.4rem;
}
.l-pill{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.06em;
  padding:.22rem .55rem;
  border:1px solid var(--faint);
  color:var(--faint);
  transition:
    border-color .3s,
    color .3s,
    transform .4s var(--ease),
    background .3s;
}
.l-pill:nth-child(1){ transition-delay:.00s; }
.l-pill:nth-child(2){ transition-delay:.05s; }
.l-pill:nth-child(3){ transition-delay:.10s; }

/* ── cell: year ── */
.l-year{
  font-family:var(--mono); font-size:.7rem;
  color:var(--faint);
  transition:color .3s;
}

/* ── cell: status ── */
.l-status{
  display:flex; align-items:center; gap:.45rem;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted);
  transition:color .3s;
}
.l-status-dot{
  width:6px; height:6px;
  background:var(--red);
  box-shadow:0 0 8px var(--red-glow);
  flex-shrink:0;
  animation:pulse 2s ease-in-out infinite;
}
.l-arrow{
  display:inline-block;
  transition:transform .4s var(--ease), opacity .3s;
  opacity:.5;
}

/* ══ HOVER STATE ══ */
@media (hover:hover){

  /* when ANY row is hovered, all OTHER rows dim */
  .ledger:has(.ledger-row:hover) .ledger-row:not(:hover){
    opacity:.35;
    filter:blur(.4px);
    transition:opacity .4s ease, filter .4s ease;
  }

  /* fill wipe triggers */
  .ledger-row:hover::before{ transform:scaleX(1); }
  .ledger-row:hover::after { width:100%; }

  /* number — push right + stays visible on dark fill */
  .ledger-row:hover .l-no{
    color:#0a0808;
    transform:translateX(6px);
  }

  /* name slides right + flips to dark on fill */
  .ledger-row:hover .l-name{
    color:#0a0808;
    transform:translateX(10px);
  }

  /* ghost erupts behind name */
  .ledger-row:hover .l-ghost{
    color:rgba(10,8,8,0.12);
    transform:translateY(-50%) translateX(12px);
  }

  /* cat, year */
  .ledger-row:hover .l-cat{ color:#0a0808; }
  .ledger-row:hover .l-year{ color:#0a0808; }

  /* pills flip to dark outlined */
  .ledger-row:hover .l-pill{
    border-color:rgba(10,8,8,0.4);
    color:#0a0808;
    transform:translateY(-2px);
  }

  /* status + arrow */
  .ledger-row:hover .l-status{ color:#0a0808; }
  .ledger-row:hover .l-arrow{
    transform:translate(4px,-4px);
    opacity:1;
  }
  .ledger-row:hover .l-status-dot{
    background:#0a0808;
    box-shadow:none;
  }
}

/* ── floating name echo — follows cursor ── */
.work-echo{
  position:fixed;
  pointer-events:none;
  z-index:1100;
  font-family:var(--serif); font-weight:700;
  font-size:clamp(2.4rem,6vw,5rem);
  letter-spacing:-.04em;
  color:transparent;
  -webkit-text-stroke:1px rgba(255, 255, 255, 0.5);
  white-space:nowrap;
  opacity:0;
  transform:translate(-50%,-50%);
  transition:opacity .35s ease;
  mix-blend-mode:screen;
}
.work-echo.visible{ opacity:1; }



/* ══ RESPONSIVE ══ */
@media (max-width:1024px){
  .ledger-head,
  .ledger-row{
    grid-template-columns: 44px 1.5fr 1fr 1.2fr 60px;
  }
  .lh-year, .l-year{ display:none; }
}
@media (max-width:760px){
  .ledger-head,
  .ledger-row{
    grid-template-columns: 36px 1fr 80px;
    gap:.6rem;
    padding:1.2rem 1rem;
  }
  .lh-cat,.lh-stack,.lh-year,.lh-status,
  .l-cat,.l-stack,.l-year{ display:none; }
  .l-status{ display:flex; }
  .l-ghost{ display:none; }
  .ledger::before{ display:none; }
}

/* ══════════════════════════════════════
   STACK — asymmetric bento grid
   large type · cell glow · item isolation
   ══════════════════════════════════════ */

.bento{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns: 1fr 1.6fr;
  grid-template-rows:    auto auto;
  gap:1px;
  background:var(--line);   /* gap color = hairline between cells */
  border:1px solid var(--line);
}

/* cell assignment */
.cell-a{ grid-column:1; grid-row:1; }
.cell-b{ grid-column:2; grid-row:1; }
.cell-c{ grid-column:1; grid-row:2; }
.cell-d{ grid-column:2; grid-row:2; }

/* ── base cell ── */
.bento-cell{
  position:relative;
  display:flex; flex-direction:column;
  justify-content:space-between;
  padding:2rem 2.2rem 1.8rem;
  background:var(--bg);
  overflow:hidden;
  min-height:280px;
  transition:background .4s ease;
}

/* corner glow bleeds from top-right on hover */
.bento-cell::before{
  content:"";
  position:absolute; top:-40%; right:-20%;
  width:60%; height:80%;
  background:radial-gradient(circle, rgba(224,51,77,0.2) 0%, transparent 70%);
  opacity:0; filter:blur(24px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
  pointer-events:none; z-index:0;
  transform:scale(.6);
}
.bento-cell:hover::before{
  opacity:1; transform:scale(1);
}

/* left-edge rule that grows up on hover */
.bento-cell::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:2px; height:0%;
  background:var(--red);
  transition:height .5s var(--ease);
  z-index:1;
}
.bento-cell:hover::after{ height:100%; }

.bento-cell > *{ position:relative; z-index:2; }

/* ── cell head ── */
.bento-cell-head{
  display:flex; align-items:center; gap:.7rem;
  margin-bottom:1.8rem;
}
.bento-index{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.1em;
  color:var(--red);
  border:1px solid var(--line);
  padding:.22rem .48rem;
  transition:background .35s, color .3s, border-color .35s;
  flex-shrink:0;
}
.bento-cell:hover .bento-index{
  background:var(--red);
  color:#0a0808;
  border-color:var(--red);
}
.bento-label{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint);
  transition:color .35s;
}
.bento-cell:hover .bento-label{ color:var(--muted); }

/* ── skill list ── */
.bento-skills{
  list-style:none;
  display:flex; flex-direction:column;
  gap:.1rem;
  flex:1;
  justify-content:center;
}

/* ── individual skill ── */
.bs{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.35rem, 2.4vw, 2rem);
  letter-spacing:-.02em;
  color:var(--muted);
  line-height:1.3;
  padding:.3rem 0;
  border-bottom:1px solid var(--line-soft);
  position:relative;
  overflow:hidden;
  cursor:default;
  transition:
    color .3s ease,
    padding-left .35s var(--ease),
    border-color .3s;
}
.bs:last-child{ border-bottom:none; }

/* underline wipe on item hover */
.bs::before{
  content:"";
  position:absolute; bottom:0; left:0;
  width:0%; height:1px;
  background:var(--red);
  transition:width .4s var(--ease);
}

/* arrow that flies in from left */
.bs::after{
  content:"→";
  position:absolute; left:-1.4rem; top:50%;
  transform:translateY(-50%);
  font-family:var(--mono); font-size:.8rem;
  color:var(--red); opacity:0;
  transition:opacity .3s, left .35s var(--ease);
}

/* ── count watermark ── */
.bento-count{
  font-family:var(--serif); font-weight:700;
  font-size:4.5rem; line-height:1;
  letter-spacing:-.04em;
  color:transparent;
  -webkit-text-stroke:1px var(--line);
  position:absolute; bottom:.8rem; right:1.4rem;
  transition:-webkit-text-stroke-color .4s ease;
  pointer-events:none; user-select:none;
}
.bento-cell:hover .bento-count{
  -webkit-text-stroke-color:rgba(224,51,77,0.2);
}

/* ══ HOVER ══ */
@media (hover:hover){

  /* grid-level: when any cell hovered, others dim */
  .bento:has(.bento-cell:hover) .bento-cell:not(:hover){
    background:#08060600;
    opacity:.45;
    transition:opacity .4s ease;
  }

  /* item hover inside a cell */
  .bs:hover{
    color:var(--red);
    padding-left:1.6rem;
    border-color:rgba(224,51,77,0.3);
  }
  .bs:hover::before{ width:100%; }
  .bs:hover::after{ opacity:1; left:.3rem; }

  /* sibling items dim when one is hovered */
  .bento-skills:has(.bs:hover) .bs:not(:hover){
    color:var(--faint);
    opacity:.45;
  }
}

/* ══ RESPONSIVE ══ */
@media (max-width:860px){
  .bento{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto;
  }
  .cell-a,.cell-b,.cell-c,.cell-d{
    grid-column:auto; grid-row:auto;
  }
  .bento-cell{ min-height:220px; }
  .bs{ font-size:clamp(1.1rem,3.5vw,1.5rem); }
}
@media (max-width:540px){
  .bento{ grid-template-columns:1fr; }
  .bento-cell{ min-height:180px; padding:1.5rem 1.4rem; }
}

/* ══ BEYOND CODE LAYOUT EXTENSIONS ══ */

.editorial-sticky-sub-stack {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 1.5rem;
}

.editorial-sticky-sub-stack .editorial-sticky-sub {
  font-family: var(--sans);
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 460px;
}

.editorial-sticky-sub-stack .target-highlight {
  color: var(--ink);
  margin-top: 0.6rem;
}

/* Card Geometry Configuration */
.beyond-card {
  border-top: 1px solid var(--line);
  padding: 2.2rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  position: relative;
  transform: translate3d(0, 0, 0);
  transition: 
    border-color 0.4s var(--ease),
    padding 0.4s var(--ease),
    background-color 0.4s var(--ease);
}

.beyond-card:last-child {
  border-bottom: 1px solid var(--line);
}

.beyond-meta-row,
.beyond-heading,
.beyond-description {
  transform: translate3d(0, 0, 0);
  transition: transform 0.4s var(--ease), color 0.4s var(--ease);
}

.beyond-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.beyond-category-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
  transition: color 0.4s var(--ease);
}

/* Base Typographic Badges */
.beyond-status-badge {
  font-family: var(--mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  border: 1px solid var(--line-soft);
  padding: 0.2rem 0.6rem;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.beyond-heading {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  letter-spacing: -0.01em;
  color: var(--ink);
}

.beyond-description {
  font-family: var(--sans);
  font-size: 0.96rem;
  line-height: 1.75;
  color: var(--muted);
  max-width: 580px;
}

/* ════ HIGH-END REACTION HOVER PHYSICS ════ */
@media (hover: hover) {
  .beyond-card:hover {
    border-top-color: var(--ink);
    padding-top: 2.8rem;
    padding-bottom: 2.8rem;
    background-color: rgba(242, 239, 233, 0.01);
  }
  
  /* Red accent trace override on selected element boundary lines */
  .beyond-card:hover {
    border-top-color: var(--red);
  }

  /* Parallax content layer tracking */
  .beyond-card:hover .beyond-heading {
    color: var(--red);
    transform: translate3d(14px, 0, 0);
  }

  .beyond-card:hover .beyond-meta-row,
  .beyond-card:hover .beyond-description {
    transform: translate3d(14px, 0, 0);
  }

  .beyond-card:hover .beyond-category-label {
    color: var(--muted);
  }

  /* Core status glowing chips triggers */
  .beyond-card:hover .beyond-status-badge {
    color: var(--ink);
    border-color: var(--red);
    box-shadow: 0 0 12px var(--red-glow);
  }
}

/* Responsive Structural Overrides */
@media (max-width: 960px) {
  .beyond-card {
    padding: 2rem 0;
  }
}

/* ══ FEATURED CARD HIGHLIGHT STATE ══ */

.beyond-card.featured-highlight {
  border-top-color: var(--red);
  padding-top: 2.8rem;
  padding-bottom: 2.8rem;
  background-color: rgba(224, 51, 77, 0.015);
  box-shadow: inset 0 0 20px rgba(224, 51, 77, 0.02);
}

.beyond-card.featured-highlight .beyond-heading {
  color: var(--red);
}

.beyond-card.featured-highlight .beyond-category-label {
  color: var(--ink);
}

/* Hardcoded subtle glow on the active status badge */
.beyond-card.featured-highlight .beyond-status-badge {
  color: var(--ink);
  border-color: var(--red);
  box-shadow: 0 0 12px var(--red-glow);
  background-color: rgba(224, 51, 77, 0.05);
}

/* Maintains stability if a user hovers over the already highlighted card */
@media (hover: hover) {
  .beyond-card.featured-highlight:hover {
    background-color: rgba(224, 51, 77, 0.03);
    box-shadow: inset 0 0 25px rgba(224, 51, 77, 0.04);
  }
  
  .beyond-card.featured-highlight:hover .beyond-heading,
  .beyond-card.featured-highlight:hover .beyond-meta-row,
  .beyond-card.featured-highlight:hover .beyond-description {
    transform: translate3d(8px, 0, 0);
  }
}

/* ══ STICKY MANIFESTO MATRIX ══ */

.editorial-manifesto-matrix {
  display: flex;
  flex-direction: column;
  margin-top: 2.5rem;
  width: 100%;
  max-width: 440px;
}

.manifesto-row {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  padding: 0.8rem 0;
  border-bottom: 1px dashed var(--line-soft);
  transition: border-color 0.3s ease;
}

.manifesto-row:hover {
  border-bottom-color: rgba(242, 239, 233, 0.15);
}

.manifesto-index {
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--faint);
  letter-spacing: 0.05em;
  transition: color 0.3s ease;
}

.manifesto-row:hover .manifesto-index {
  color: var(--red);
}

.manifesto-phrase {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--muted);
  transition: color 0.3s ease;
}

.manifesto-row:hover .manifesto-phrase {
  color: var(--ink);
}

/* Bolded final core conclusion line styling layout rules */
.manifesto-conclusion {
  font-family: var(--sans);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
  margin-top: 2.2rem;
  position: relative;
  display: inline-block;
  padding-left: 1.2rem;
}

/* Subtle accent block tag running vertically next to your concluding statement */
.manifesto-conclusion::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 2px;
  background: var(--red);
  box-shadow: 0 0 8px var(--red-glow);
}

/* ══════════════════════════════════════
   CONTACT — split panel, premium visual
   ══════════════════════════════════════ */

#contact{
  position:relative;
  padding:clamp(5rem,11vw,11rem) var(--pad);
  max-width:1700px; margin:0 auto;
  overflow:hidden;
}

.contact-glow{
  position:absolute; left:30%; top:40%;
  transform:translate(-50%,-50%);
  width:60vw; height:50vw; max-width:700px;
  background:radial-gradient(circle, rgba(224,51,77,0.1), transparent 65%);
  filter:blur(40px); pointer-events:none; z-index:0;
}

/* ── top strip ── */
.contact-top{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:clamp(2.5rem,5vw,4rem);
  padding-bottom:1.2rem;
  border-bottom:1px solid var(--line);
}
.contact-tag{
  font-family:var(--mono); font-size:.74rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
  padding-left:1.2rem; position:relative;
}
.contact-tag::before{
  content:""; position:absolute; left:0; top:50%;
  width:.7rem; height:1px; background:var(--red);
  transform:translateY(-50%);
}
.contact-avail{
  display:flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.08em; color:var(--muted);
}
.contact-dot{
  width:7px; height:7px;
  background:var(--red);
  box-shadow:0 0 10px var(--red-glow);
  animation:pulse 2s ease-in-out infinite;
}

/* ── body grid ── */
.contact-body{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:clamp(2.5rem,5vw,5rem);
  align-items:start;
}

/* ── LEFT: headline ── */
.contact-left{
  display:flex; flex-direction:column;
  gap:2rem;
}
.contact-headline{
  font-family:var(--serif); font-weight:700;
  line-height:.84; letter-spacing:-.04em;
  font-size:clamp(3rem,10vw,9.5rem);
}
.ch-row{
  display:flex; align-items:baseline; gap:.4rem;
  overflow:hidden;
}
.ch-solid{ color:var(--ink); display:inline-block; transition:transform .5s var(--ease); }
.ch-outline{
  color:transparent; -webkit-text-stroke:1.5px var(--ink); display:inline-block;
  transition:transform .5s var(--ease), color .4s, -webkit-text-stroke-color .4s;
}
.ch-red { color:var(--red); display:inline-block; transition:transform .5s var(--ease); }
.ch-dot { color:var(--ink); opacity:.3; display:inline-block; transition:opacity .4s, transform .5s var(--ease); }

@media (hover:hover){
  .contact-headline:hover .ch-solid   { transform:translateX(-8px); }
  .contact-headline:hover .ch-outline { transform:translateX(8px); color:var(--ink); -webkit-text-stroke-color:transparent; }
  .contact-headline:hover .ch-red     { transform:translateX(-6px); }
  .contact-headline:hover .ch-dot     { opacity:1; transform:translateX(6px); }
}
.contact-vert span{
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.1em; color:var(--faint); white-space:nowrap;
}

/* ══ RIGHT: redesigned action panel ══ */
.contact-right{
  display:flex; flex-direction:column;
  gap:1.2rem;
}

/* ── CTA box — now a featured red-accent card ── */
.contact-cta{
  display:flex; flex-direction:column;
  gap:1.1rem;
  padding:2.4rem 2rem;
  background:var(--bg);
  border:1px solid var(--line);
  border-left:3px solid var(--red);       /* strong red left accent */
  position:relative; overflow:hidden;
}

/* shimmer overlay that sweeps on hover */
.contact-cta::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(224,51,77,0.08) 0%, transparent 60%);
  opacity:0;
  transition:opacity .45s ease;
  z-index:0;
}
/* bottom-fill on hover */
.contact-cta::after{
  content:"";
  position:absolute; inset:0;
  background:var(--red);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .5s var(--ease); z-index:0;
}
.contact-cta > *{ position:relative; z-index:1; }

.cta-top{
  display:flex; justify-content:space-between; align-items:flex-start;
}
.cta-label{
  font-family:var(--mono); font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--red);                         /* label now red, not faint */
  transition:color .3s;
}
.cta-arrow{
  width:32px; height:32px;
  display:grid; place-items:center;
  border:1px solid var(--line);
  color:var(--muted); font-size:.9rem;
  transition:color .3s, border-color .3s,
             background .3s, transform .4s var(--ease);
}
.cta-address{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1rem,1.6vw,1.3rem);
  color:var(--ink); letter-spacing:-.01em;
  transition:color .3s;
  line-height:1.3;
}
.cta-sub{
  font-family:var(--mono); font-size:.62rem;
  letter-spacing:.06em; color:var(--faint);
  border-top:1px solid var(--line);
  padding-top:.9rem;
  transition:color .3s, border-color .3s;
}

@media (hover:hover){
  .contact-cta:hover::before{ opacity:1; }
  .contact-cta:hover::after { transform:scaleY(1); }
  .contact-cta:hover .cta-label  { color:#0a0808; }
  .contact-cta:hover .cta-arrow  {
    color:#0a0808; border-color:transparent;
    background:rgba(10,8,8,0.15);
    transform:translate(3px,-3px);
  }
  .contact-cta:hover .cta-address{ color:#0a0808; }
  .contact-cta:hover .cta-sub    { color:rgba(10,8,8,0.55); border-color:rgba(10,8,8,0.15); }
}

/* ── social links — now three equal bordered cards in a row ── */
.contact-socials{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.csoc{
  display:flex; flex-direction:column;
  gap:.6rem;
  padding:1.4rem 1.2rem;
  background:var(--bg);
  position:relative; overflow:hidden;
  transition:padding-top .35s var(--ease);
}

/* fill wipe — bottom up */
.csoc::before{
  content:""; position:absolute; inset:0;
  background:var(--surface);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .4s var(--ease); z-index:0;
}
/* red top border that grows on hover */
.csoc::after{
  content:""; position:absolute; top:0; left:0; right:0;
  height:2px; background:var(--red);
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease); z-index:2;
}
.csoc > *{ position:relative; z-index:1; }

.csoc-num{
  font-family:var(--mono); font-size:.58rem;
  letter-spacing:.08em; color:var(--faint);
  transition:color .3s;
}
.csoc-name{
  font-family:var(--serif); font-weight:600;
  font-size:1.1rem; letter-spacing:-.01em;
  color:var(--ink); transition:color .3s;
  flex:1;
}
.csoc-tag{
  font-family:var(--mono); font-size:.58rem;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--faint); transition:color .3s;
}
.csoc-arrow{
  font-size:.8rem; color:var(--faint); opacity:.5;
  transition:color .3s, transform .35s var(--ease), opacity .3s;
  align-self:flex-end;
}

@media (hover:hover){
  .csoc:hover::before{ transform:scaleY(1); }
  .csoc:hover::after { transform:scaleX(1); }
  .csoc:hover{ padding-top:.9rem; }
  .csoc:hover .csoc-num  { color:var(--red); }
  .csoc:hover .csoc-name { color:var(--red); }
  .csoc:hover .csoc-tag  { color:var(--muted); }
  .csoc:hover .csoc-arrow{ color:var(--red); opacity:1; transform:translate(2px,-2px); }
}

/* ══ RESPONSIVE ══ */
@media (max-width:860px){
  .contact-body{ grid-template-columns:1fr; }
  .contact-headline{ font-size:clamp(2.6rem,12vw,5rem); }
  .contact-vert{ display:none; }
}
@media (max-width:560px){
  .contact-socials{ grid-template-columns:1fr; }
  .csoc{ flex-direction:row; align-items:center; padding:1.1rem 1.2rem; }
  .csoc-tag{ display:none; }
  .csoc-arrow{ align-self:center; margin-left:auto; }
}

/* ══ HERO — SPATIAL FOCUS CONSOLE ══ */

#hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--bg);
}

/* ── ENHANCED BACKGROUND: CLEAN MINI-DOT MATRIX ── */
#hero::before {
  content: "";
  position: absolute; 
  inset: 0; 
  z-index: 0;
  /* Increased scale footprint (64px) and muted transparency index to remove crowding noise */
  background-image: radial-gradient(circle, rgba(242, 239, 233, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 50%, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black 20%, transparent 80%);
  pointer-events: none;
}

/* Elegant, wide vignette framing the layout borders */
#hero::after {
  content: "";
  position: absolute; 
  inset: 0; 
  z-index: 1;
  background: radial-gradient(circle at 50% 50%, transparent 50%, rgba(10, 8, 8, 0.95) 100%);
  pointer-events: none;
}

/* ── CORNER LABELS ── */
.hero-corner {
  position: absolute;
  display: flex; 
  flex-direction: column; 
  gap: 0.3rem;
  font-family: var(--mono); 
  font-size: 0.66rem; 
  letter-spacing: 0.1em;
  z-index: 4;
  transition: transform 0.6s var(--ease), color 0.4s ease;
}
.hero-corner.top-left   { top: 2.5rem; left: var(--pad); }
.hero-corner.top-right  { top: 2.5rem; right: var(--pad); text-align: right; }
.hero-corner.bottom-left { bottom: 2.5rem; left: var(--pad); }
.corner-label { color: var(--faint); text-transform: uppercase; }
.corner-val   { color: var(--muted); }

/* ── TELEMETRY PANEL — BOTTOM RIGHT ── */
.hero-telemetry {
  position: absolute;
  bottom: 2.5rem; 
  right: var(--pad);
  width: clamp(240px, 26vw, 340px);
  border: 1px solid var(--line);
  background: rgba(10, 8, 8, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 4;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.tele-bar {
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.tele-label {
  font-family: var(--mono); 
  font-size: 0.6rem; 
  letter-spacing: 0.14em;
  text-transform: uppercase; 
  color: var(--red);
}
.tele-dot {
  width: 5px; 
  height: 5px;
  background: var(--red);
  box-shadow: 0 0 10px var(--red-glow);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}
.tele-body {
  padding: 1rem;
  font-family: var(--mono); 
  font-size: 0.72rem; 
  line-height: 1.8;
  color: var(--muted);
  min-height: 80px;
}
.t-prompt { color: var(--red); }
.t-cmd    { color: var(--ink); }
.t-out    { color: var(--muted); }
.t-cursor {
  display: inline-block; 
  width: 6px; 
  height: 1em;
  background: var(--red); 
  vertical-align: -2px; 
  margin-left: 2px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ── CLEAN RADIAL CONSOLE BACKDROP ── */
.hero-radial {
  position: absolute; 
  inset: 0;
  display: grid; 
  place-items: center;
  pointer-events: none; 
  z-index: 2;
}
.radial-svg {
  width: min(72vw, 72vh);
  height: min(72vw, 72vh);
  opacity: 0.25; /* Muted standard presence to remove grid overcrowding */
  transition: transform 0.8s var(--ease), opacity 0.5s ease;
}
.radial-svg circle {
  fill: none;
  stroke: var(--line-soft);
  stroke-width: 0.8px;
}
/* Removed standard intersecting lines entirely, keeping clean target track nodes */
.radial-svg circle:first-child {
  stroke: rgba(224, 51, 77, 0.2);
  stroke-width: 1px;
  transition: stroke 0.5s ease;
}

.radial-glow {
  position: absolute;
  width: clamp(300px, 35vw, 500px);
  height: clamp(300px, 35vw, 500px);
  background: radial-gradient(circle, rgba(224, 51, 77, 0.12) 0%, rgba(224, 51, 77, 0.02) 50%, transparent 70%);
  filter: blur(40px);
  transition: transform 0.8s var(--ease), opacity 0.5s ease;
}

/* ── CENTER CORE CONTENT ── */
.hero-core {
  position: relative; 
  z-index: 3;
  display: flex; 
  flex-direction: column;
  align-items: center; 
  text-align: center;
  gap: 1.8rem;
  padding: 0 var(--pad);
  max-width: 1100px; 
  width: 100%;
}

.hero-meta {
  display: flex; 
  align-items: center; 
  gap: 0.9rem;
}
.meta-line {
  width: 36px; 
  height: 1px;
  background: var(--red);
}
.meta-text {
  font-family: var(--mono); 
  font-size: 0.72rem;
  letter-spacing: 0.12em; 
  text-transform: uppercase;
  color: var(--muted);
}

.hero-name {
  display: flex; 
  flex-direction: column; 
  align-items: center;
  font-family: var(--serif); 
  font-weight: 700;
  line-height: 0.85; 
  letter-spacing: -0.04em;
  font-size: clamp(3.6rem, 13vw, 12.5rem);
}
.hero-word {
  display: block;
  transition: color 0.5s var(--ease),
              -webkit-text-stroke-color 0.5s var(--ease),
              transform 0.6s var(--ease);
  will-change: transform;
}
.primary-word {
  color: var(--ink);
  -webkit-text-stroke: 1.5px transparent;
}
.outline-word {
  -webkit-text-stroke: 1.5px var(--ink);
  color: transparent;
}

.hero-readout {
  display: flex; 
  flex-direction: column; 
  align-items: center;
  gap: 1.8rem; 
  max-width: 580px;
}
.hero-bio {
  font-size: clamp(0.95rem, 1.4vw, 1.08rem);
  line-height: 1.75; 
  color: var(--muted);
  transition: color 0.4s ease;
}

.hero-actions {
  display: flex; 
  gap: 0;
  border: 1px solid var(--line);
  transition: border-color 0.4s ease;
}
.btn {
  display: inline-flex; 
  align-items: center; 
  gap: 0.6rem;
  padding: 1rem 1.8rem;
  font-family: var(--mono); 
  font-size: 0.72rem;
  letter-spacing: 0.08em; 
  text-transform: uppercase;
  transition: background 0.3s, color 0.3s, transform 0.4s var(--ease);
}
.btn-primary { background: var(--red); color: #0a0808; font-weight: 500; }
.btn-primary:hover { background: var(--ink); }
.btn-arrow { display: inline-block; transition: transform 0.3s var(--ease); }
.btn-primary:hover .btn-arrow { transform: translate(3px, -3px); }
.btn-ghost { color: var(--ink); border-left: 1px solid var(--line); }
.btn-ghost:hover { color: var(--red); }

.hero-socials {
  display: flex; 
  gap: 2rem;
  font-family: var(--mono); 
  font-size: 0.7rem;
  letter-spacing: 0.06em; 
  color: var(--faint);
}
.hero-socials a {
  transition: color 0.3s, transform 0.3s var(--ease);
}
.hero-socials a:hover {
  color: var(--red);
  transform: translate3d(0, -2px, 0);
}

/* ── SCROLL CUE ── */
.scroll-cue {
  position: absolute; 
  bottom: 2.2rem; 
  left: 50%;
  transform: translateX(-50%);
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 0.6rem;
  font-family: var(--mono); 
  font-size: 0.6rem;
  letter-spacing: 0.18em; 
  text-transform: uppercase;
  color: var(--faint); 
  z-index: 4;
}
.scroll-track {
  width: 1px; 
  height: 40px; 
  background: var(--line);
  position: relative; 
  overflow: hidden;
}
.scroll-thumb {
  position: absolute; 
  top: 0; 
  left: 0;
  width: 100%; 
  height: 38%;
  background: var(--red);
  animation: scrolldown 2.2s var(--ease) infinite;
}
@keyframes scrolldown {
  0%   { transform: translate3d(0, -100%, 0); }
  100% { transform: translate3d(0, 260%, 0); }
}

.torn-edge {
  position: absolute; 
  left: 0; 
  right: 0; 
  bottom: 0;
  width: 100%; 
  height: 14px; 
  z-index: 5;
}
.torn-edge polyline {
  fill: var(--bg-soft);
  stroke: var(--line); 
  stroke-width: 1;
}

/* ══ PREMIUM HOVER KINETICS ══ */
@media (hover: hover) {
  #hero:hover .radial-svg {
    transform: scale(1.02);
    opacity: 0.45; /* Prevents background lines blinding structural layout titles */
  }
  #hero:hover .radial-svg circle:first-child {
    stroke: rgba(224, 51, 77, 0.4);
  }
  #hero:hover .radial-glow {
    transform: scale(1.1);
    opacity: 0.8;
  }

  #hero:hover .primary-word {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--ink);
    transform: translate3d(-15px, 0, 0);
  }
  #hero:hover .outline-word {
    color: var(--red);
    -webkit-text-stroke: 1.5px var(--red);
    transform: translate3d(15px, 0, 0);
  }

  #hero:hover .hero-bio {
    color: var(--ink);
  }

  #hero:hover .hero-corner.top-left   { transform: translate3d(-6px, -6px, 0); color: var(--ink); }
  #hero:hover .hero-corner.top-right  { transform: translate3d(6px, -6px, 0);  color: var(--ink); }
  #hero:hover .hero-corner.bottom-left{ transform: translate3d(-6px, 6px, 0);  color: var(--ink); }

  #hero:hover .hero-telemetry {
    border-color: rgba(224, 51, 77, 0.25);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  }
}

/* ══ RESPONSIVE REALIGNMENTS ══ */
@media (max-width: 760px) {
  .hero-corner.top-right { display: none; }
  .hero-telemetry {
    position: static;
    width: 100%;
    border-left: none; 
    border-right: none; 
    border-bottom: none;
    order: 10;
  }
  #hero { display: flex; flex-direction: column; padding: 6rem 0 0; }
  .hero-core { padding: 3rem var(--pad) 2rem; gap: 1.5rem; }
  .hero-name { font-size: clamp(2.8rem, 13vw, 5rem); }
  .radial-svg { width: 90vw; height: 90vw; }
  .hero-corner.bottom-left { display: none; }
  .scroll-cue { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .primary-word { color: var(--ink); }
  .outline-word { color: transparent; }
}

.hero-canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* Locked underneath typography cores and telemetries */
  pointer-events: none;
  mix-blend-mode: screen;
}


/* ── REMOVE BACKGROUND RADAR COMPONENT CONSOLE ── */
.hero-radial, 
.radial-svg, 
.radial-glow {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.mobile-menu{

position:fixed;

inset:0;

background:#090707;

display:flex;

flex-direction:column;

padding:2rem;

z-index:999;

}

.mobile-header{

display:flex;

justify-content:space-between;

align-items:center;

padding-bottom:1.5rem;

border-bottom:1px solid rgba(255,255,255,.08);

}

.mobile-label{

font-size:.7rem;

letter-spacing:.25em;

color:#777;

}

.mobile-close{

font-size:1.2rem;

cursor:pointer;

}

.mobile-links{

list-style:none;

padding:0;

margin:3rem auto 0;

width:100%;

max-width:320px;

}

.mobile-links li{

border-bottom:1px solid rgba(255,255,255,.08);

}

.mobile-links a{

display:flex;

align-items:flex-end;

gap:1rem;

padding:1.1rem 0;

text-decoration:none;

}

.nav-num{

width:32px;

font-size:.72rem;

color:#d6405b;

letter-spacing:.18em;

flex-shrink:0;

}

.nav-title{

font-size:2.2rem;

font-weight:700;

color:white;

line-height:1;

}

.mobile-footer{

margin-top:auto;

width:100%;

max-width:320px;

margin-inline:auto;

}

.mobile-socials{

display:flex;

gap:2rem;

margin-bottom:2rem;

}

.mobile-socials a{

font-size:.78rem;

letter-spacing:.12em;

text-transform:uppercase;

color:#8b8b8b;

text-decoration:none;

}

.mobile-cta{

display:inline-flex;

align-items:center;

gap:.5rem;

font-size:.82rem;

letter-spacing:.16em;

text-transform:uppercase;

color:white;

text-decoration:none;

padding-top:1rem;

border-top:1px solid rgba(255,255,255,.08);

width:100%;

}