/* ============================================================

   JUAN LANGE — PORTFOLIO / CV

   Brutalist Technical · Swiss Typographic · Data-Sheet HUD

   ============================================================ */



/* ---------- CUSTOM PROPERTIES (light + dark) ---------- */

:root {

  /* dark (native) */

  --bg:           #121212;

  --surface:      #1a1a1a;

  --fg:           #f7f8f8;

  --text:         #e5e5e5;

  --muted:        #949494;

  --grid:         #262626;

  --grid-subtle:  #1e1e1e;

  --accent:       #ffffff;

  --selection:    rgba(255,255,255,0.12);

  --tag-bg:       #1e1e1e;

  --tag-border:   #2a2a2a;

  --card:         #151515;

  --card-border:  #404040;

  --shadow-ink:   rgba(0,0,0,0.30);

  --shadow:       none;

  --font-display: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --font-body:    'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --hairline:     1px solid var(--grid);

  --hairline-subtle: 1px solid var(--grid-subtle);

  --space-xs: 4px;

  --space-sm: 8px;

  --space-md: 16px;

  --space-lg: 32px;

  --space-xl: 64px;

  --space-2xl: 128px;

  --section-pad: clamp(32px, 6vw, 128px);

  --ui-amber: rgba(235,140,40,0.8);

  --ui-amber-dim: rgba(235,140,40,0.08);

  --ui-amber-muted: rgba(235,140,40,0.35);

  --ui-gray-text: rgba(200,200,200,0.5);

  --ui-amber-solid: #e6a817;

  --bg-panel: #121212;

}



/* LIGHT MODE: eliminado — el sitio es dark-only */



/* ---------- BASE ---------- */

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

/* scroll-behavior:smooth en html entra en conflicto con ScrollTrigger

   (anima el scroll que GSAP fija durante refresh y rompe el pin). El

   scroll suave de la navegación se maneja por JS (window.scrollTo). */

html { scroll-behavior: auto; }

::selection { background: var(--selection); color: var(--fg); }

.skip-link {

  position: absolute;

  top: -100%;

  left: var(--section-pad);

  z-index: 9999;

  padding: 8px 16px;

  font-family: var(--font-mono);

  font-size: 12px;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  text-decoration: none;

  color: var(--bg);

  background: var(--fg);

}

.skip-link:focus { top: var(--space-sm); }

:focus-visible {

  outline: 2px solid var(--fg);

  outline-offset: 2px;

}

body {

  background: var(--bg);

  color: var(--text);

  font-family: var(--font-body);

  font-size: 16px;

  line-height: 1.6;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  min-height: 100vh;

}



/* ---------- GRID GUIDE (visible structural grid) ---------- */

.grid-overlay {

  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: 9999;

  display: grid;

  grid-template-columns: repeat(12, 1fr);

  gap: 0;

  opacity: 0;

  transition: opacity 0.3s;

}

.grid-overlay.show { opacity: 1; }

.grid-overlay .col {

  border-left: var(--hairline-subtle);

  border-right: var(--hairline-subtle);

  opacity: 0.35;

}



/* ---------- TYPOGRAPHY ---------- */

h1, h2, h3, h4, .display, .label, .tag, .nav-link {

  font-family: var(--font-display);

  letter-spacing: -0.02em;

  color: var(--fg);

}

h1 { font-size: clamp(64px, 12vw, 140px); line-height: 0.85; font-weight: 900; }

h2 { font-size: clamp(36px, 5vw, 72px); line-height: 0.9; font-weight: 800; }

h3 { font-size: clamp(20px, 2.5vw, 32px); line-height: 1.1; font-weight: 800; }

h4 { font-size: clamp(14px, 1.2vw, 18px); line-height: 1.3; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }

p, .body-text { font-size: clamp(14px, 1.2vw, 18px); line-height: 1.7; color: var(--text); max-width: 68ch; }

.micro {

  font-family: var(--font-mono);

  font-size: clamp(9px, 0.7vw, 11px);

  line-height: 1.4;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  color: var(--muted);

}

.data-label {

  font-family: var(--font-mono);

  font-size: clamp(8px, 0.6vw, 10px);

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: var(--muted);

}

.data-value {

  font-family: var(--font-mono);

  font-size: clamp(12px, 1vw, 14px);

  color: var(--fg);

}

.massive-num {

  font-family: var(--font-display);

  font-size: clamp(48px, 6vw, 70px);

  font-weight: 800;

  line-height: 0.8;

  color: var(--fg);

  letter-spacing: -0.04em;

}



/* ---------- LAYOUT / GRID ---------- */

.container {

  max-width: 1440px;

  margin: 0 auto;

  padding: 0 var(--section-pad);

}

.section {

  padding: var(--section-pad) var(--section-pad);

  border-bottom: var(--hairline);

  position: relative;

}

.section:last-child { border-bottom: none; }



/* ---------- HAIRLINE BORDERS ---------- */

hr { border: none; border-top: var(--hairline); margin: var(--space-xl) 0; }



/* ---------- BLUEPRINT DECORATIVE ELEMENTS ---------- */

.blueprint-grid {

  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: 0;

  opacity: 0.10;

  background-image:

    linear-gradient(to right, var(--grid) 1px, transparent 1px),

    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);

  background-size: 39px 39px;

}

.bp-circle {

  position: absolute;

  border: 1px solid var(--grid-subtle);

  border-radius: 0;

  pointer-events: none;

  background: var(--grid-subtle);

  opacity: 0.35;

}

.bp-circle-lg {

  width: min(500px, 50vw);

  height: min(500px, 50vw);

  top: 5%;

  right: -5%;

}

.bp-circle-md {

  width: min(280px, 28vw);

  height: min(280px, 28vw);

  bottom: -5%;

  left: -3%;

}

.bp-quadrant {

  position: absolute;

  border-left: 1px solid var(--grid-subtle);

  border-top: 1px solid var(--grid-subtle);

  pointer-events: none;

}

.bp-quadrant-tr {

  top: 8%;

  right: 12%;

  width: 120px;

  height: 80px;

}

.bp-quadrant-bl {

  bottom: 10%;

  left: 8%;

  width: 90px;

  height: 120px;

}

.crosshair {

  position: absolute;

  width: 18px;

  height: 18px;

  pointer-events: none;

  z-index: 1;

}

.crosshair::before {

  content: '';

  position: absolute;

  top: 50%;

  left: 0;

  width: 100%;

  height: 1px;

  background: var(--muted);

  transform: translateY(-50%);

}

.crosshair::after {

  content: '';

  position: absolute;

  left: 50%;

  top: 0;

  width: 1px;

  height: 100%;

  background: var(--muted);

  transform: translateX(-50%);

}

.bracket {

  position: absolute;

  width: 10px;

  height: 10px;

  pointer-events: none;

  transition: border-color 0.2s;

}

.bracket-tl { top: 0; left: 0; border-top: 1px solid var(--muted); border-left: 1px solid var(--muted); }

.bracket-tr { top: 0; right: 0; border-top: 1px solid var(--muted); border-right: 1px solid var(--muted); }

.bracket-bl { bottom: 0; left: 0; border-bottom: 1px solid var(--muted); border-left: 1px solid var(--muted); }

.bracket-br { bottom: 0; right: 0; border-bottom: 1px solid var(--muted); border-right: 1px solid var(--muted); }



.hatching {

  background: repeating-linear-gradient(

    45deg,

    transparent,

    transparent 8px,

    var(--grid) 8px,

    var(--grid) 9px

  );

}

.micro-dot {

  position: absolute;

  width: 4px;

  height: 4px;

  background: var(--muted);

  pointer-events: none;

}



/* ---------- HEADER / NAV ---------- */

.header {

  position: sticky;

  top: 0;

  z-index: 100;

  background: var(--bg);

  border-bottom: var(--hairline);

  padding: var(--space-md) var(--section-pad);

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: var(--space-md);

}

.scroll-progress {

  position: absolute;

  bottom: 0;

  left: 0;

  height: 1px;

  width: 0;

  background: var(--ui-amber-solid);

  z-index: 101;

  pointer-events: none;

  transform-origin: left;

}

@supports (animation-timeline: scroll(root)) {

  .scroll-progress {

    width: 100%;

    animation: scroll-progress linear;

    animation-timeline: scroll(root);

  }

}

@keyframes scroll-progress {

  from { transform: scaleX(0); }

  to { transform: scaleX(1); }

}

.header .logo {

  font-family: var(--font-mono);

  font-size: clamp(12px, 1vw, 14px);

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: var(--fg);

  text-decoration: none;

}

.header .logo span { color: var(--muted); }

.nav { display: flex; gap: var(--space-lg); align-items: center; }

.nav a {

  font-family: var(--font-mono);

  font-size: clamp(10px, 0.7vw, 12px);

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: var(--muted);

  text-decoration: none;

  padding: var(--space-xs) 0;

  border-bottom: 1px solid transparent;

  transition: color 0.2s, border-color 0.2s;

  min-height: 44px;

  display: inline-flex;

  align-items: center;

}

.nav a:hover { color: var(--fg); border-bottom-color: var(--fg); }

.nav a.active { color: var(--ui-amber-solid); border-bottom-color: var(--ui-amber-solid); }

.hamburger {

  display: none;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  gap: 4px;

  background: none;

  border: none;

  cursor: pointer;

  padding: var(--space-md);

  min-width: 44px;

  min-height: 44px;

}

.hamburger span {

  display: block;

  width: 20px;

  height: 1.5px;

  background: var(--muted);

  transition: transform 0.2s;

}



/* ---------- HERO ---------- */

.hero {

  padding: var(--space-2xl) var(--section-pad) var(--space-xl);

  position: relative;

  min-height: 80vh;

  display: grid;

  grid-template-columns: 2fr 3fr;

}

.hero-leftandright {

  grid-column: 1 / -1;

  display: grid;

  grid-template-columns: 1fr 2fr;

  gap: 24px;

}

.hero-left { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-start; }

.hero-right { position: relative; z-index: 1; }

.hero-meta { grid-column: 1 / -1; }

.hero-right .master-bento { display:grid; grid-template-columns:2fr 1fr; gap:8px; width:100%; height:100%; box-sizing:border-box; font-family:var(--font-mono); }

.hero-right .hud-panel { background-color:var(--bg-panel); border:1px solid rgba(235,140,40,0.12); padding:12px; position:relative; box-sizing:border-box; }

.hero-right .hud-panel::before { content:''; position:absolute; top:4px; left:4px; width:6px; height:6px; border-top:1px solid var(--ui-amber-muted); border-left:1px solid var(--ui-amber-muted); }

.hero-right .hud-panel::after { content:''; position:absolute; top:4px; right:4px; width:6px; height:6px; border-top:1px solid var(--ui-amber-dim); border-right:1px solid var(--ui-amber-dim); }

.hero-right .panel-title { font-size:10px; letter-spacing:1px; color:rgba(240,240,240,0.7); margin-bottom:4px; text-transform:uppercase; }

.hero-right .left-master-col { display:flex; flex-direction:column; gap:8px; height:100%; }

.hero-right .left-master-col>.subgrid-3d { flex:1; min-height:0; }

.hero-right .left-master-col>.hud-panel:last-child { flex-shrink:0; }

.hero-right .subgrid-3d { display:grid; grid-template-columns:1fr 100px; height:100%; min-height:0; }

.hero-right .canvas-container { height:100%; position:relative; min-height:0; }

.hero-right .canvas-container canvas { position:absolute; inset:0; display:block; }

.hero-right .panel-latency canvas { contain: size; width:100%; flex:1 1 0; min-height:0; }

.hero-right .mini-right-col { display:grid; grid-template-rows:1.2fr 1fr; }

.hero-right .mini-bar-row { font-size:8px; color:var(--ui-gray-text); margin-bottom:6px; }

.hero-right .mini-progress-bg { height:5px; background:#1a1a1a; margin-top:2px; position:relative; }

.hero-right .mini-progress-fill { height:100%; background:var(--ui-amber-muted); }

.hero-right .mini-code-data { font-size:8px; line-height:1.5; color:rgba(235,140,40,0.4); display:flex; flex-direction:column; justify-content:center; }

.hero-right .panel-metadata-bottom { display:grid; grid-template-columns:1fr 1.2fr; gap:8px; }

.hero-right .log-list { font-size:8px; list-style:none; padding:0; margin:0; line-height:1.7; }

.hero-right .log-list li::before { content:"▪ "; color:var(--ui-amber-muted); }

.hero-right .fine-bars-container { display:flex; flex-direction:column; justify-content:space-between; }

.hero-right .fine-bar-item { display:flex; align-items:center; height:6px; background:#181818; position:relative; }

.hero-right .fine-bar-fill { height:100%; background:rgba(200,200,200,0.3); }

.hero-right .badge-footer { grid-column:span 2; border-top:1px solid rgba(235,140,40,0.08); padding-top:4px; display:flex; justify-content:space-between; font-size:8px; }

.hero-right .badge { display:inline-block; background:#1c1c1c; padding:2px 6px; border:1px solid rgba(235,140,40,0.1); color:var(--ui-amber-muted); }

.hero-right .right-master-col { display:flex; flex-direction:column; gap:8px; height:100%; }

.hero-right .right-master-col>.hud-panel { flex:1; min-height:0; }

.hero-right .panel-latency { display:flex; flex-direction:column; }

.hero-right .panel-sync { display:flex; flex-direction:column; justify-content:space-between; }

.hero-right .segment-container { display:flex; gap:2px; margin-top:4px; }

.hero-right .segment { flex:1; height:12px; background:#1a1a1a; }

.hero-right .segment.active { background:var(--ui-amber); }

.hud-switch { display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-size:9px; color:var(--ui-amber); text-transform:uppercase; letter-spacing:0.05em; position:relative; }

.hud-switch input { position:absolute; opacity:0; width:0; height:0; }

.hud-switch-track { width:24px; height:12px; background:var(--bg-panel); border:1px solid var(--ui-amber-muted); position:relative; }

.hud-switch-track::before { content:''; position:absolute; top:1px; left:1px; width:8px; height:8px; background:var(--ui-amber); transition:transform 0.15s; }

.hud-switch input:not(:checked) + .hud-switch-track::before { transform:translateX(12px); background:var(--muted); }

.hud-tooltip { position:absolute; top:calc(100% + 6px); right:0; padding:4px 8px; background:var(--bg-panel); border:1px solid var(--ui-amber-muted); color:var(--ui-amber); font-family:var(--font-mono); font-size:9px; letter-spacing:0.05em; text-transform:uppercase; white-space:nowrap; opacity:0; visibility:hidden; transition:opacity 0.15s; z-index:10; }

.hud-switch:hover .hud-tooltip { opacity:1; visibility:visible; }

.hero .grid-ref {

  position: absolute;

  inset: 0;

  display: grid;

  grid-template-columns: 1fr 1fr;

  pointer-events: none;

}

/* .hero .grid-ref .half { border-right: var(--hairline); } */

.hero .grid-ref .half:last-child { border-right: none; }

.hero-meta {

  display: flex;

  flex-wrap: wrap;

  gap: var(--space-lg) var(--space-2xl);

  margin-bottom: var(--space-lg);

  padding-bottom: var(--space-md);

  border-bottom: var(--hairline);

  min-height: 60px;

}

.hero-meta .item { display: flex; flex-direction: column; gap: var(--space-xs); }

.hero-title {

  margin: 0;

  width: 100%;

}

.hero-title h1 {

  margin: 0;

  font-size: inherit;

  font-weight: inherit;

  line-height: 1;

}

.hero-lockup {

  display: block;

  width: 100%;

  height: auto;

  color: var(--fg);

}

.hero-dek {

  max-width: 49ch;

  min-height: 120px;

  position: relative;

  border: 1px solid var(--grid);

  overflow: hidden;

  margin-top: calc(10px + var(--space-lg));

  flex: 1;

}

.hero-coords {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  gap: var(--space-lg) var(--space-2xl);

  margin-top: var(--space-xl);

  padding-top: var(--space-lg);

  border-top: var(--hairline);

  grid-column: 1 / -1;

}

.hero-coords .coord { display: flex; gap: var(--space-sm); align-items: baseline; }

.hero-coords .coord .data-value { min-width: 6ch; display: inline-block; }



/* ---------- SPECS / ABOUT ---------- */

.about-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: var(--space-xl);

  margin-bottom: var(--space-xl);

}

.about-grid > div:first-child {

  display: flex;

  flex-direction: column;

  justify-content: center;

}

.about-specs {

  border-left: var(--hairline);

  padding-left: var(--space-xl);

}

.about-specs-inner {

  display: flex;

  flex-direction: column;

  gap: var(--space-md);

}

.about-lead {

  font-size: clamp(18px, 1.8vw, 26px);

  font-weight: 700;

  color: var(--fg);

  letter-spacing: -0.02em;

  margin-bottom: var(--space-md);

}

.about-spec-value { margin-top: var(--space-xs); }

.specs-grid {

  display: grid;

  grid-template-columns: repeat(5, 1fr);

  gap: 0;

  border-top: var(--hairline);

}

.specs-grid .spec-cell {

  padding: var(--space-lg) var(--space-md);

  border-bottom: var(--hairline);

  border-right: var(--hairline);

  position: relative;

}

.specs-grid .spec-cell:last-child { border-right: none; }

.specs-grid .spec-cell .data-label { margin-bottom: var(--space-xs); }

.specs-grid .spec-cell .data-value { font-size: clamp(14px, 1.5vw, 24px); font-weight: 600; }

.specs-grid .spec-cell .note { margin-top: var(--space-sm); font-size: clamp(11px, 0.8vw, 13px); color: var(--muted); }



/* ---------- TECH STACK ---------- */

.stack-meta {

  display: flex;

  gap: var(--space-lg);

  margin-bottom: var(--space-lg);

  flex-wrap: wrap;

}

.stack-meta .data-value { margin-left: var(--space-sm); }

.stack-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));

  gap: var(--space-md);

}

.stack-item {

  padding: var(--space-md);

  background: var(--card);

  border: 1px solid var(--card-border);

  box-shadow: -8px 8px 0 var(--shadow-ink);

  display: flex;

  flex-direction: column;

  gap: var(--space-xs);

  aspect-ratio: 1;

  position: relative;

}

.stack-item::after {

  content: '';

  position: absolute;

  bottom: -1px;

  right: -1px;

  width: 9px;

  height: 9px;

  background:

    linear-gradient(to top left, transparent calc(50% - 0.5px), var(--card-border) calc(50% - 0.5px), var(--card-border) calc(50% + 0.5px), transparent calc(50% + 0.5px)),

    linear-gradient(to top left, var(--bg) 50%, transparent 50%);

  pointer-events: none;

  z-index: 1;

}

.stack-item .name { font-weight: 700; font-size: clamp(14px, 1vw, 18px); color: var(--fg); }

.stack-item .cat { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

.card-footer { display: flex; align-items: center; gap: var(--space-sm); margin-top: auto; }

.card-footer .num { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--muted); }

.card-footer .num-bar { flex: 1; height: 1em; background: repeating-linear-gradient(-45deg,transparent,transparent 5px,var(--muted) 5px,var(--muted) 10px); font-size: 10px; border: 1px solid var(--muted); opacity: 0.3;}

.card-logo { width: 16px; height: 16px; color: var(--muted); }

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

.stack-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: var(--space-lg); flex-wrap: wrap; gap: var(--space-md); }

.stack-filters { display: flex; gap: var(--space-md); position: relative; }

.stack-filter {
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.7vw, 12px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: none;
  padding: var(--space-xs) 0;
  cursor: pointer;
  transition: color 0.2s;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.stack-filter:hover { color: var(--fg); }

.stack-filter.active { color: var(--ui-amber); }

.stack-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--ui-amber);
  will-change: transform, width;
}

.stack-filter:focus-visible { outline: 2px solid var(--ui-amber); outline-offset: 2px; }



/* ---------- PROJECTS ---------- */

.project-card {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 0;

  border-top: var(--hairline);

  border-bottom: var(--hairline);

  margin-bottom: var(--space-lg);

  position: relative;

}

.project-card:last-child { margin-bottom: 0; border-bottom: none; }

.project-card:nth-child(even) .proj-meta { order: 1; border-right: none; border-left: var(--hairline); }

.project-card:nth-child(even) .proj-visual { order: 0; }

.project-card .proj-meta {

  padding: var(--space-lg) var(--space-lg);

  border-right: var(--hairline);

  display: flex;

  flex-direction: column;

  gap: var(--space-md);

}

.project-card .proj-visual {

  padding: var(--space-lg);

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  background: var(--surface);

  min-height: 200px;

  position: relative;

  overflow: hidden;

  margin: 32px;

}

.project-card .proj-visual .placeholder-box {

  border: 2px solid var(--grid);

  width: 100%;

  max-width: 500px;

  aspect-ratio: 16 / 10;

  position: relative;

  overflow: hidden;

  background-color: var(--surface);

}

.project-card .proj-visual .placeholder-box img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  filter: grayscale(1) contrast(1.1);

  transition: filter 0.5s ease;

}

.project-card:hover .proj-visual .placeholder-box img {

  filter: grayscale(0) contrast(1);

}

.project-card:hover .placeholder-box .bracket { border-color: var(--ui-amber-solid); }

.project-card .proj-tags {

  display: flex;

  flex-wrap: wrap;

  gap: var(--space-xs);

}

.project-card .proj-tags .tag {

  font-family: var(--font-mono);

  font-size: 10px;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  padding: 2px 8px;

  border: 1px solid var(--grid);

  color: var(--muted);

  background: var(--tag-bg);

}

.project-card .proj-title {

  font-size: clamp(24px, 2.5vw, 42px);

  font-weight: 700;

  line-height: 0.95;

  color: var(--fg);

  letter-spacing: -0.02em;

}

.project-card .proj-desc {

  font-size: clamp(13px, 0.9vw, 15px);

  color: var(--muted);

  max-width: 50ch;

}

.project-card .proj-stats {

  display: flex;

  gap: var(--space-lg);

  margin-top: auto;

  padding-top: var(--space-md);

  border-top: var(--hairline-subtle);

}

.project-card .proj-stats .stat { display: flex; flex-direction: column; gap: 2px; }

.proj-link {

  display: inline-block;

  position: relative;

  margin-top: var(--space-md);

  padding: 6px 12px;

  font-family: var(--font-mono);

  font-size: 10px;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  text-decoration: none;

  color: var(--accent);

  border: 1px solid var(--muted);

  transition: background 0.2s, color 0.2s;

}

.proj-link::after {

  content: '';

  position: absolute;

  bottom: -1px;

  right: -1px;

  width: 9px;

  height: 9px;

  background:

    linear-gradient(to top left, transparent calc(50% - 0.5px), var(--muted) calc(50% - 0.5px), var(--muted) calc(50% + 0.5px), transparent calc(50% + 0.5px)),

    linear-gradient(to top left, var(--bg) 50%, transparent 50%);

  pointer-events: none;

}

.proj-link:hover {

  background: var(--muted);

  color: var(--bg);

}



/* ---------- EXPERIENCE (timeline) ---------- */

.timeline {

  position: relative;

  overflow: hidden;

  height: clamp(400px, 80svh, 700px);

  background: linear-gradient(to right, transparent 7.5px, var(--grid) 7.5px, var(--grid) 8.5px, transparent 8.5px);

}

.timeline-fade {

  position: absolute;

  left: 0;

  width: 100%;

  height: 40px;

  pointer-events: none;

  z-index: 2;

}

.timeline-fade--top {

  top: 0;

  background: linear-gradient(to bottom, var(--bg), transparent);

}

.timeline-fade--bottom {

  bottom: 0;

  background: linear-gradient(to top, var(--bg), transparent);

}

.timeline-entry {

  padding: var(--space-lg) 0 var(--space-lg) var(--space-2xl);

  position: relative;

  transition: filter 0.3s;

}

.timeline-entry::before {

  content: '';

  position: absolute;

  left: 3px;

  top: 37px;

  width: 9px;

  height: 9px;

  background: var(--bg);

  border: 1.5px solid var(--fg);

  border-radius: 0;

  transition: background 0.3s, border-color 0.3s;

  z-index: 1;

}

.timeline-entry:hover::before {

  background: var(--ui-amber-solid);

  border-color: var(--ui-amber-solid);

}

.timeline-entry .date-range {

  font-family: var(--font-mono);

  font-size: clamp(10px, 0.7vw, 12px);

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: var(--muted);

  margin-bottom: var(--space-xs);

}

.timeline-entry .role-title {

  font-size: clamp(18px, 1.8vw, 28px);

  font-weight: 700;

  color: var(--fg);

  margin-bottom: var(--space-xs);

}

.timeline-entry .company { color: var(--muted); font-size: clamp(13px, 0.9vw, 16px); margin-bottom: var(--space-sm); }

.timeline-entry .summary { font-size: clamp(12px, 0.8vw, 14px); color: var(--muted); max-width: 60ch; }



/* ---------- BUILD ---------- */

.build-section {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl) var(--section-pad);
  overflow: hidden;
  border-top: var(--hairline);
  border-bottom: var(--hairline);
}

.build-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: clamp(2rem, 4vw, 4rem) clamp(2rem, 4vw, 4rem);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 70%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 70%, transparent 100%);
  opacity: 0.18;
  pointer-events: none;
}

.build-heading {
  font-family: var(--font-display);
  font-size: clamp(48px, 11vw, 140px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  text-align: center;
  position: relative;
  z-index: 1;
}

.build-line {
  display: block;
  will-change: opacity, transform, filter;
}

.build-line--accent {
  color: var(--fg);
}

.build-dot {
  color: var(--ui-amber);
  display: inline-block;
  will-change: opacity, transform;
}

/* ---------- CONTACT ---------- */

.contact-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  gap: 0;

  border-top: var(--hairline);

  border-left: var(--hairline);

}

.contact-cell {

  padding: var(--space-lg) var(--space-md);

  border-right: var(--hairline);

  border-bottom: var(--hairline);

  display: flex;

  flex-direction: column;

  gap: var(--space-xs);

}

.contact-cell .data-label { margin-bottom: var(--space-xs); }

.contact-cell a {

  color: var(--fg);

  text-decoration: none;

  font-size: clamp(14px, 1.2vw, 20px);

  font-weight: 500;

  border-bottom: 1px solid transparent;

  transition: border-color 0.2s;

}

.contact-cell a:hover { border-bottom-color: var(--fg); }

.contact-cell .data-value {

  font-family: var(--font-display);

  color: var(--fg);

  font-size: clamp(14px, 1.2vw, 20px);

  font-weight: 500;

  word-break: break-all;

}



/* ---------- FOOTER ---------- */

.footer {

  border-top: var(--hairline);

  padding: var(--space-lg) var(--section-pad);

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-wrap: wrap;

  gap: var(--space-md);

}

.footer .micro { color: var(--muted); }



/* ---------- SECTION LABELS (HUD style) ---------- */

.section-label {

  display: flex;

  align-items: center;

  gap: var(--space-sm);

  margin-bottom: var(--space-lg);

  font-family: var(--font-mono);

  font-size: clamp(10px, 0.7vw, 12px);

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: var(--muted);

}

.section-label::after {

  content: '';

  flex: 1;

  height: 1px;

  background: var(--grid);

}



/* ---------- HUD ANNOTATIONS ---------- */

.annotation {

  position: absolute;

  font-family: var(--font-mono);

  font-size: 8px;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: var(--muted);

  line-height: 1.2;

  pointer-events: none;

}

.annotation .line {

  display: block;

  width: 24px;

  height: 1px;

  background: var(--muted);

  margin: 2px 0;

}



/* ---------- RESPONSIVE ---------- */

@media (max-width: 1024px) {

  .hero-title { margin-top: 0; }

  .hero { grid-template-columns: 1fr; padding: var(--space-xl) var(--section-pad) var(--space-xl); row-gap: var(--space-xl); }

  .hero-leftandright { grid-template-columns: 1fr 1fr; }

  .hero-meta { gap: 0; justify-content: space-between; }

  .hero-coords .coord:nth-child(1),

  .hero-coords .coord:nth-child(2) { display: none; }

  .hero-coords { justify-content: space-between; }

  .hero-left { justify-content: flex-start; }

  .hero-left .hero-dek { flex: 1; }

  .hero-right { height: 100%; }

  .hero-right .master-bento { grid-template-columns: 1fr; height: 100%; }

  .hero-right .subgrid-3d { display: none; }

  .hero-right .right-master-col { height: 100%; }

  .hero-right .right-master-col > .hud-panel { flex: 1; min-height: 0; }

  .hero-right .panel-latency canvas { flex: none; height: 120px; }

  .hero-right .panel-metadata-bottom { grid-template-columns: 1fr; }

  .hero-right .log-list li { word-break: break-all; }

  .nav { gap: var(--space-md); }

  .nav a { font-size: 10px; }

  .hero .grid-ref .half { border-right: none; }

  .about-grid { grid-template-columns: 1fr; }

  .about-specs { border-left: none; padding-left: 0; padding-top: var(--space-xl); border-top: var(--hairline); }

  .project-card { grid-template-columns: 1fr; }

  .project-card .proj-meta { order: 1; border-right: none; border-left: none; }

  .project-card .proj-visual { order: 0; }

  .project-card:nth-child(even) .proj-meta { border-left: none; }

  .specs-grid { grid-template-columns: repeat(2, 1fr); border-left: var(--hairline); }

  .specs-grid .spec-cell:last-child { border-right: var(--hairline); }

  .timeline { height: 60svh; }

}

@media (max-width: 768px) {

  .header { flex-wrap: wrap; padding: var(--space-sm) var(--section-pad); }

  .hero { padding: var(--space-lg) var(--section-pad) var(--space-lg); min-height: auto; row-gap: var(--space-lg); }

  .hero-leftandright { grid-template-columns: 1fr; }

  .hero-right .left-master-col { display: none; }

  .hero-meta .item:nth-child(3),

  .hero-meta .item:nth-child(4) { display: none; }

  .footer { padding: var(--space-lg) var(--section-pad); flex-direction: column; gap: var(--space-sm); }

  h1 { font-size: clamp(48px, 15vw, 140px); }

  h2 { font-size: clamp(28px, 8vw, 48px); }

  .specs-grid { grid-template-columns: 1fr; }

  .stack-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: var(--space-md); padding: 0 0 var(--space-sm) 0; }

  .stack-item { flex: 0 0 150px; scroll-snap-align: start; }

  .stack-filters { overflow-x: auto; -webkit-overflow-scrolling: touch; gap: var(--space-sm); padding-bottom: var(--space-xs); }

  #stack .section-label::after { content: '→ scroll →'; flex: 0; margin-left: var(--space-lg); font-weight: 400; color: var(--muted); }

  .timeline-entry { padding-left: var(--space-lg); }

  .timeline { height: auto; min-height: 400px; }

  .contact-grid { grid-template-columns: 1fr; }

  .hamburger { display: flex; }

  .nav { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg); border-bottom: var(--hairline); padding: var(--space-md) var(--section-pad); gap: var(--space-sm); z-index: 99; }

  .nav.open { display: flex; }

}

@media (max-width: 480px) {

  .nav a { font-size: clamp(10px, 3.5vw, 12px); }

  .section { padding: var(--space-lg) var(--space-md); }

  .hero { padding: var(--space-lg) var(--space-md) var(--space-md); row-gap: var(--space-lg); }

}



/* ---------- PRINT ---------- */

@media print {

  body { background: #fff !important; color: #000 !important; }

  .header { position: static; border-bottom: 1px solid #000; }

  .grid-overlay { display: none !important; }

  .hero { min-height: auto; }

  .section { page-break-inside: avoid; }

}



@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after {

    animation-duration: 0.001ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.001ms !important;

  }

  .scroll-progress { display: none; }

}

/* ---------- PRELOADER ---------- */

.preloader {

  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  transition: opacity 0.5s ease, visibility 0.5s ease;

}

.preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

.preloader-top,
.preloader-bottom {

  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);

}

.preloader-top { top: 0; }

.preloader-bottom { bottom: 0; }

.preloader-num {

  font-family: var(--font-display);
  font-size: clamp(80px, 20vw, 180px);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: var(--fg);

}

.preloader-progress {

  width: clamp(180px, 30vw, 360px);
  height: 1px;
  background: var(--grid);
  overflow: hidden;
  position: relative;

}

.preloader-progress span {

  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--ui-amber-solid);

}