/* ════════════════════════════════════════════════════════════════════
   KH//NET — desert topo × netrunner portfolio
   ────────────────────────────────────────────────────────────────────
   ✏️ QUICK TWEAKS
   • Colors ............ :root palette below (the 9 brand colors)
   • Spacing ........... --s-* scale (4/8px grid)
   • Corner cut size ... --cut
   • Easing curves ..... --ease-*
   • Fonts ............. --font-display / --font-mono
   ════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Brand palette (desert / rust dune) ── */
  --rust:     #B5562B;  /* primary accent            */
  --dune:     #D9A066;  /* secondary accent          */
  --tan:      #E8D5B0;  /* main text                 */
  --clay:     #8A5A3B;  /* mid brown                 */
  --earth:    #3E2A1E;  /* deep brown                */
  --charcoal: #1C1A17;  /* page background           */
  --stone:    #7A7670;  /* borders, decorative text  */
  --sage:     #7F8F5E;  /* "system OK" states        */
  --olive:    #4E5A36;  /* dark green                */

  /* ── Derived tones ──
     --stone-hi is a lighter stone used for small muted text, so it passes
     WCAG AA (6.4:1) on charcoal. Plain --stone (3.9:1) is kept for borders
     and large decorative labels. */
  --stone-hi: #A39C90;
  --tan-dim:  #CDBFA3;
  --panel:    rgba(26, 24, 21, .9);
  --panel-2:  rgba(36, 31, 26, .92);
  --line:     rgba(122, 118, 112, .28);
  --line-hi:  rgba(217, 160, 102, .6);

  /* ── Type ── */
  --font-display: "Chakra Petch", "Rajdhani", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* ── Spacing scale (4/8 grid) ── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* ── Layout ── */
  --wrap: 1320px;
  --gutter: clamp(16px, 4vw, 56px);
  --hud-h: 64px;
  --cut: 16px;
  /* left/right edge of the content column — header & HUD align to it */
  --edge: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));

  /* ── Motion (never linear, never default "ease") ── */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);      /* expo-out: arrivals      */
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);     /* quart-in-out: travels   */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);  /* slight overshoot        */
  --ease-snap:   cubic-bezier(.2, .9, .1, 1);
}

/* ═══════════ RESET / BASE ═══════════ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ background:var(--charcoal); -webkit-text-size-adjust:100%; text-size-adjust:100% }
body{
  min-height:100vh; background:var(--charcoal); color:var(--tan);
  font:400 15px/1.7 var(--font-mono);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; overflow-x:hidden;
}
img,svg,canvas{ display:block; max-width:100% }
ul,ol{ list-style:none }
a{ color:inherit; text-decoration:none }
button,input{ font:inherit; color:inherit }
button{ background:none; border:0; cursor:pointer }
::selection{ background:var(--rust); color:var(--tan) }
:focus{ outline:none }
:focus-visible{ outline:2px solid var(--dune); outline-offset:3px }
[hidden]{ display:none !important }
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
.muted{ color:var(--stone-hi) }
.ok{ color:var(--sage) !important }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter) }

/* Lenis smooth scroll */
html.lenis, html.lenis body{ height:auto }
.lenis.lenis-smooth{ scroll-behavior:auto !important }
.lenis.lenis-stopped{ overflow:hidden }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain }

/* Custom cursor active → hide the system cursor (fine pointers only) */
html.has-cursor, html.has-cursor *{ cursor:none !important }
html.has-cursor input, html.has-cursor textarea{ cursor:text !important }

.skip-link{
  position:fixed; left:var(--s-4); top:var(--s-4); z-index:1000;
  padding:var(--s-3) var(--s-4); background:var(--dune); color:var(--charcoal);
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  transform:translateY(-200%); transition:transform .4s var(--ease-out);
}
.skip-link:focus{ transform:none }

/* ═══════════ AMBIENT LAYERS ═══════════ */
.topo{
  position:fixed; z-index:0; pointer-events:none;
  left:-40px; top:-40px; width:calc(100% + 80px); height:calc(100% + 80px);
  will-change:transform;
}
.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 35%, transparent 35%, rgba(20,18,16,.72) 100%),
    linear-gradient(to bottom, rgba(28,26,23,.6), transparent 18%, transparent 82%, rgba(28,26,23,.75));
}
.fx{ position:fixed; pointer-events:none; z-index:90 }
.fx--scan{
  inset:0; opacity:.38;
  background:repeating-linear-gradient(to bottom, rgba(10,9,8,.22) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}
.fx--grain{
  inset:-50%; width:200%; height:200%; opacity:.07;
  background-size:180px 180px;            /* noise tile is generated in script.js */
  animation:grain 1s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 17%{transform:translate(-5%,3%)} 33%{transform:translate(4%,-6%)}
  50%{transform:translate(-7%,-2%)} 67%{transform:translate(6%,5%)} 83%{transform:translate(-2%,7%)} 100%{transform:translate(3%,-4%)}
}
main, .footer{ position:relative; z-index:2 }

/* ═══════════ SHARED ATOMS ═══════════ */
.label{
  display:flex; align-items:center; gap:var(--s-2);
  font:500 11px/1.4 var(--font-mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--stone-hi); margin-bottom:var(--s-4);
}
.label--ok{ color:var(--sage) }
.eyebrow{
  font:500 12px/1.4 var(--font-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--dune);
  display:flex; align-items:center; gap:var(--s-3);
}
.eyebrow::before{ content:""; width:32px; height:1px; background:var(--rust) }

.tag{
  display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 var(--s-2);
  font:500 10.5px/1 var(--font-mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--dune); border:1px solid rgba(217,160,102,.35); white-space:nowrap;
}
.tag--ok{ color:var(--sage); border-color:rgba(127,143,94,.45) }

.pulse-dot{
  position:relative; display:inline-block; width:6px; height:6px; flex:none;
  background:var(--sage); border-radius:50%;
}
.pulse-dot::after{
  content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--sage);
  animation:pulse 2.4s var(--ease-out) infinite;
}
@keyframes pulse{ 0%{transform:scale(.4);opacity:1} 80%,100%{transform:scale(1.6);opacity:0} }

/* Bracketed chips:  [ LangGraph ] */
.chips{ display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-3) }
.chip{
  position:relative; display:inline-flex; align-items:center; gap:2px;
  font:500 12px/1 var(--font-mono); color:var(--tan); padding:var(--s-2) 2px;
  transition:color .3s var(--ease-out);
}
.chip::before,.chip::after{
  color:var(--stone); transition:transform .4s var(--ease-spring), color .3s var(--ease-out);
}
.chip::before{ content:"["; margin-right:6px }
.chip::after{ content:"]"; margin-left:6px }
.chip:hover{ color:var(--dune) }
.chip:hover::before{ transform:translateX(-3px); color:var(--rust) }
.chip:hover::after{ transform:translateX(3px); color:var(--rust) }
.chip--ok::before,.chip--ok::after{ color:var(--sage) }
.chip--sm{ font-size:11px; padding:4px 1px }
.chip--sm::before{ margin-right:4px } .chip--sm::after{ margin-left:4px }

/* Meter / progress bar with tick marks */
.meter{ position:relative; height:6px; background:rgba(122,118,112,.18); overflow:hidden }
.meter i{
  position:absolute; inset:0; background:linear-gradient(90deg, var(--clay), var(--rust) 60%, var(--dune));
  transform-origin:left; transform:scaleX(var(--v, .5));
  box-shadow:0 0 12px rgba(181,86,43,.6);
}
.js .meter i{ transform:scaleX(0); transition:transform 1.6s var(--ease-out) .2s }
.js .meter.is-in i{ transform:scaleX(var(--v, .5)) }
.meter__ticks{
  position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--charcoal) calc(10% - 1px) 10%);
}

/* ── Chamfered card with hairline border + square-corner brackets ── */
.card{
  --c: var(--cut);
  --chamfer: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  position:relative; isolation:isolate;
  padding:clamp(20px, 2.4vw, 32px);
  background:var(--line);               /* = border color (shows through 1px gap) */
  clip-path:var(--chamfer);
  transition:background .5s var(--ease-out);
  transform-style:preserve-3d;
}
.card::before{
  content:""; position:absolute; inset:1px; z-index:-1;
  background:var(--panel);
  clip-path:polygon(calc(var(--c) - .4px) 0, 100% 0, 100% calc(100% - var(--c) + .4px), calc(100% - var(--c) + .4px) 100%, 0 100%, 0 calc(var(--c) - .4px));
}
.card::after{  /* brackets on the two square corners */
  content:""; position:absolute; inset:7px; pointer-events:none; z-index:3;
  --b: rgba(217,160,102,.55);
  background:
    linear-gradient(var(--b),var(--b)) top right / 12px 1px no-repeat,
    linear-gradient(var(--b),var(--b)) top right / 1px 12px no-repeat,
    linear-gradient(var(--b),var(--b)) bottom left / 12px 1px no-repeat,
    linear-gradient(var(--b),var(--b)) bottom left / 1px 12px no-repeat;
  transition:inset .5s var(--ease-spring);
}
.card:hover{ background:rgba(217,160,102,.42) }
.card:hover::after{ inset:4px }
a.card:focus-visible, .card:focus-within:has(:focus-visible){ background:var(--dune) }

/* moving light glare used by tilt cards */
.glare{ position:absolute; inset:0; z-index:4; pointer-events:none; overflow:hidden; opacity:0; transition:opacity .5s var(--ease-out); mix-blend-mode:screen }
.glare::before{
  content:""; position:absolute; left:-50%; top:-50%; width:200%; height:200%;
  background:radial-gradient(circle at 50% 50%, rgba(232,213,176,.16), rgba(217,160,102,.05) 22%, transparent 42%);
  transform:translate3d(var(--gx,0), var(--gy,0), 0);
}
[data-tilt]:hover > .glare{ opacity:1 }

/* ── Buttons: chamfered, self-tracing border, directional fill, scramble text ── */
.btn{
  --c: 10px;
  --bg: rgba(122,118,112,.08);
  --fill: rgba(181,86,43,.32);
  --fg: var(--tan); --fg-hover: var(--tan);
  position:relative; isolation:isolate; display:inline-flex; align-items:center; justify-content:center; gap:var(--s-3);
  height:48px; padding:0 var(--s-5);
  font:500 12px/1 var(--font-mono); letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
  color:var(--fg); background:var(--bg);
  clip-path:polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  transition:color .35s var(--ease-out);
  user-select:none; -webkit-tap-highlight-color:transparent;
}
.btn__label, .btn__arrow, .btn__icon{ position:relative; z-index:2 }
.btn__label{ display:inline-block; min-width:var(--label-w, auto) }
.btn__arrow{ transition:transform .5s var(--ease-spring) }
.btn:hover .btn__arrow{ transform:translate(3px,-3px) }
.btn__fill{ position:absolute; inset:0; z-index:0; background:var(--fill); transform:scaleX(0); transform-origin:left center; pointer-events:none }
.btn__trace{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; overflow:visible; fill:none }
.btn__trace .base{ stroke:rgba(232,213,176,.26); stroke-width:1 }
.btn__trace .run{
  stroke:var(--dune); stroke-width:1.5;
  stroke-dasharray:var(--len, 400); stroke-dashoffset:var(--len, 400);
  transition:stroke-dashoffset .5s var(--ease-in-out);
}
.btn:hover .btn__trace .run, .btn:focus-visible .btn__trace .run{ stroke-dashoffset:0; transition-duration:.75s }
.btn:focus-visible{ outline:none }
.btn:focus-visible .btn__trace .run{ stroke-width:2.5 }
.btn:hover{ color:var(--fg-hover) }
.btn:active{ transform:translateY(1px) }

.btn--primary{ --bg:var(--dune); --fill:var(--tan); --fg:var(--charcoal); --fg-hover:var(--charcoal); font-weight:700 }
.btn--primary .btn__trace .base{ stroke:transparent }
.btn--primary .btn__trace .run{ stroke:var(--rust); stroke-width:2 }
.btn--ghost{ --bg:transparent }
.btn--sm{ height:40px; padding:0 var(--s-4); font-size:11px }
.btn--block{ width:100% }

/* Segmented filter / role buttons */
.seg{
  position:relative; display:inline-flex; align-items:center; gap:var(--s-2);
  height:34px; padding:0 var(--s-3);
  font:500 11px/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--stone-hi); border:1px solid var(--line);
  transition:color .3s var(--ease-out), border-color .3s var(--ease-out), background-color .3s var(--ease-out);
}
.seg:hover{ color:var(--tan); border-color:rgba(217,160,102,.45) }
.seg[aria-pressed="true"]{ color:var(--tan); border-color:var(--dune); background:rgba(181,86,43,.2) }
.seg[aria-pressed="true"]::before{ content:""; width:5px; height:5px; background:var(--rust); box-shadow:0 0 8px var(--rust) }
.seg__n{ color:var(--stone-hi); font-size:10px }

/* Glitch / RGB-split headings (palette colors only) */
.glitch{ position:relative; display:inline-block }
.glitch::before,.glitch::after{
  content:attr(data-text); position:absolute; left:0; top:0; width:100%; height:100%;
  pointer-events:none; opacity:0; -webkit-text-stroke:0;
}
.glitch::before{ color:var(--rust) }
.glitch::after{ color:var(--sage) }
.glitch.is-glitching{ animation:gl-main .18s steps(2,end) }
.glitch.is-glitching::before{ opacity:.95; animation:gl-a .18s steps(3,end) both }
.glitch.is-glitching::after{ opacity:.85; animation:gl-b .18s steps(3,end) both }
@keyframes gl-main{ 0%{transform:translate(0)} 50%{transform:translate(-1px,1px)} 100%{transform:translate(0)} }
@keyframes gl-a{
  0%{transform:translate(-4px,0); clip-path:inset(8% 0 58% 0)}
  50%{transform:translate(3px,-1px); clip-path:inset(62% 0 6% 0)}
  100%{transform:translate(-2px,1px); clip-path:inset(30% 0 44% 0)}
}
@keyframes gl-b{
  0%{transform:translate(4px,1px); clip-path:inset(54% 0 12% 0)}
  50%{transform:translate(-3px,0); clip-path:inset(12% 0 64% 0)}
  100%{transform:translate(2px,-1px); clip-path:inset(40% 0 30% 0)}
}

/* Duotone image treatment: shadows → deep earth, highlights → dune.
   (grayscale image screened over earth, then multiplied by dune) */
.duo{ position:relative; overflow:hidden; background:#2B1D14; isolation:isolate }
.duo img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.35) brightness(1.15);
  mix-blend-mode:screen;
  transition:transform 1.4s var(--ease-out);
}
.duo::before{ content:""; position:absolute; inset:0; background:var(--dune); mix-blend-mode:multiply; z-index:1; pointer-events:none }
.duo--dim img{ filter:grayscale(1) contrast(1.2) brightness(.62) }
.duo::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(160deg, rgba(181,86,43,.32), transparent 50%),
    repeating-linear-gradient(to bottom, rgba(20,18,16,.3) 0 1px, transparent 1px 3px),
    linear-gradient(to top, rgba(28,26,23,.8), transparent 55%);
}

/* ═══════════ BOOT ═══════════ */
.boot{
  position:fixed; inset:0; z-index:500; background:var(--charcoal);
  display:grid; place-items:center; padding:var(--gutter);
  font:500 12px/1.8 var(--font-mono); color:var(--stone-hi); letter-spacing:.06em;
}
.no-js .boot{ display:none }
.boot__inner{ width:min(520px, 100%) }
.boot__head{ display:flex; justify-content:space-between; color:var(--tan); letter-spacing:.2em; padding-bottom:var(--s-3); margin-bottom:var(--s-4); border-bottom:1px solid var(--line) }
.boot__lines{ min-height:calc(1.8em * 6); margin-bottom:var(--s-5) }
.boot__lines li{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.boot__lines .ok{ color:var(--sage) }
.boot__lines b{ color:var(--dune); font-weight:500 }
.boot__bar{ height:2px; background:rgba(122,118,112,.2); overflow:hidden }
.boot__bar i{ display:block; height:100%; background:linear-gradient(90deg, var(--clay), var(--rust), var(--dune)); transform-origin:left; transform:scaleX(0); box-shadow:0 0 10px var(--rust) }
.boot__status{ display:flex; justify-content:space-between; margin-top:var(--s-3); color:var(--tan); letter-spacing:.18em }
.boot__dots::after{ content:"…"; animation:blink 1s steps(2) infinite }
.boot__skip{ position:absolute; right:var(--gutter); bottom:var(--gutter); font-size:11px; letter-spacing:.2em; color:var(--stone-hi) }
.boot__skip kbd{ font:inherit; border:1px solid var(--line); padding:2px 6px; margin-left:6px }
@keyframes blink{ 50%{opacity:0} }

/* ═══════════ HUD HEADER ═══════════ */
.hud{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--hud-h);
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:var(--s-6);
  padding:0 var(--edge);
  background:linear-gradient(to bottom, rgba(28,26,23,.94), rgba(28,26,23,.78));
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.hud__logo{ display:inline-flex; align-items:center; gap:var(--s-3); font:600 15px/1 var(--font-display); letter-spacing:.16em }
.hud__logo svg{ width:28px; height:28px; fill:none; stroke:var(--tan); stroke-width:1.4 }
.hud__logo .hud__logo-wave{ stroke:var(--rust); stroke-width:1.8; stroke-dasharray:30; stroke-dashoffset:0; transition:stroke-dashoffset .8s var(--ease-in-out) }
.hud__logo:hover .hud__logo-wave{ stroke-dashoffset:60 }
.hud__logo em{ font-style:normal; color:var(--rust) }
.hud__sector, .hud__coords{ display:flex; align-items:center; gap:var(--s-3); font:500 11px/1 var(--font-mono); letter-spacing:.18em; color:var(--stone-hi); white-space:nowrap }
.hud__sector span{ color:var(--tan) }
.hud__sep{ color:var(--stone) }
.hud__right{ display:flex; align-items:center; gap:var(--s-4) }
.hud__sound{ display:inline-flex; align-items:center; gap:var(--s-2); height:40px; padding:0 var(--s-2); font:500 11px/1 var(--font-mono); letter-spacing:.16em; color:var(--stone-hi); transition:color .3s var(--ease-out) }
.hud__sound svg{ width:20px; height:14px; fill:currentColor }
.hud__sound svg rect{ transform-origin:center bottom; transform-box:fill-box; transform:scaleY(.3); transition:transform .4s var(--ease-spring) }
.hud__sound[aria-pressed="true"]{ color:var(--dune) }
.hud__sound[aria-pressed="true"] svg rect{ animation:eq 1s var(--ease-in-out) infinite alternate }
.hud__sound[aria-pressed="true"] svg rect:nth-child(2){ animation-delay:-.3s } .hud__sound[aria-pressed="true"] svg rect:nth-child(3){ animation-delay:-.6s }
.hud__sound[aria-pressed="true"] svg rect:nth-child(4){ animation-delay:-.15s } .hud__sound[aria-pressed="true"] svg rect:nth-child(5){ animation-delay:-.45s }
.hud__sound b{ font-weight:500; color:inherit }
.hud__sound:hover{ color:var(--tan) }
@keyframes eq{ from{transform:scaleY(.25)} to{transform:scaleY(1)} }

.btn--menu{ height:40px; padding:0 var(--s-4) 0 var(--s-5) }
.btn__icon{ display:inline-flex; flex-direction:column; gap:4px; width:16px }
.btn__icon i{ display:block; height:1.5px; background:currentColor; transition:transform .5s var(--ease-spring) }
.btn__icon i:last-child{ width:60%; margin-left:auto }
.btn--menu:hover .btn__icon i:last-child{ transform:scaleX(1.66); transform-origin:right }

/* elevation-profile scroll progress */
.progress{ position:absolute; left:0; right:0; bottom:-12px; height:24px; pointer-events:none }
.progress svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible }
.progress path{ fill:none; vector-effect:non-scaling-stroke }
.progress__base path{ stroke:rgba(122,118,112,.35); stroke-width:1 }
.progress__fill{ position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--p, 0%)) 0 0) }
.progress__fill path{ stroke:var(--rust); stroke-width:1.5; filter:drop-shadow(0 0 4px rgba(181,86,43,.8)) }
.progress__marker{
  position:absolute; left:0; top:0; width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  background:var(--dune); transform:translate3d(var(--mx,0), var(--my,12px), 0) rotate(45deg);
  box-shadow:0 0 10px var(--dune); opacity:0; transition:opacity .4s var(--ease-out);
}

/* ═══════════ HERO ═══════════ */
.hero{ position:relative; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; padding-top:calc(var(--hud-h) + var(--s-6)) }
.hero__hud{ position:absolute; top:calc(var(--hud-h) + var(--s-5)); display:flex; flex-direction:column; gap:6px; font:500 11px/1.4 var(--font-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--stone-hi) }
.hero__hud--tl{ left:var(--edge) }
.hero__hud--tr{ right:var(--edge); align-items:flex-end; text-align:right }
.hero__hud b{ color:var(--tan); font-weight:500 }
.hero__grid{ flex:1; display:grid; grid-template-columns:minmax(0, 1fr) clamp(260px, 25vw, 360px); gap:clamp(32px, 6vw, 112px); align-items:center; padding-block:var(--s-9) var(--s-7) }
.hero__title{ margin:var(--s-5) 0 var(--s-6); font:700 clamp(52px, 11.2vw, 172px)/.84 var(--font-display); letter-spacing:-.005em; text-transform:uppercase }
.hero__line{ display:block; white-space:nowrap }
.hero__line + .hero__line .glitch{ color:transparent; -webkit-text-stroke:1.5px var(--dune) }
.hero__caret{ display:inline-block; width:.09em; height:.72em; margin-left:.08em; background:var(--rust); box-shadow:0 0 18px rgba(181,86,43,.8); vertical-align:baseline; animation:blink 1.05s steps(1) infinite }
.hero__now{ display:flex; align-items:center; gap:var(--s-3); font:500 13px/1.4 var(--font-mono); letter-spacing:.06em; color:var(--tan); margin-bottom:var(--s-5); min-height:1.4em }
.hero__now-label{ color:var(--sage); letter-spacing:.18em }
.hero__lede{ max-width:60ch; color:var(--tan-dim); font-size:15px; line-height:1.75 }
.hero__lede a, .node__lede a{ color:var(--dune); background:linear-gradient(var(--rust),var(--rust)) left bottom / 100% 1px no-repeat; transition:background-size .5s var(--ease-out), color .3s }
.hero__lede a:hover{ color:var(--tan); background-size:0 1px; background-position:right bottom }
.hero__cta{ display:flex; flex-wrap:wrap; gap:var(--s-4); margin-top:var(--s-6) }

/* ID card */
.idcard{ --c:20px; position:relative; padding:var(--s-4); background:var(--line); clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c)); isolation:isolate; transform-style:preserve-3d }
.idcard::before{ content:""; position:absolute; inset:1px; z-index:-1; background:var(--panel-2); clip-path:inherit }
.idcard__top{ display:flex; justify-content:space-between; align-items:center; font:500 10.5px/1 var(--font-mono); letter-spacing:.18em; color:var(--stone-hi); margin-bottom:var(--s-3) }
.idcard__portrait{ position:relative; aspect-ratio:1; overflow:hidden; background:var(--charcoal) }
.idcard__portrait canvas, .idcard__portrait img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.idcard__portrait::after{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(to bottom, rgba(10,9,8,.25) 0 1px, transparent 1px 3px), radial-gradient(circle at 50% 45%, transparent 40%, rgba(28,26,23,.7)); pointer-events:none }
.idcard__mono{ position:absolute; left:var(--s-4); bottom:var(--s-2); z-index:2; font:700 clamp(56px, 6vw, 88px)/1 var(--font-display); color:var(--tan); letter-spacing:-.02em; text-shadow:0 0 30px rgba(28,26,23,.8) }
.idcard__scan{ position:absolute; left:0; right:0; top:0; height:30%; z-index:1; background:linear-gradient(to bottom, transparent, rgba(217,160,102,.14) 85%, rgba(217,160,102,.5)); transform:translateY(-100%); animation:scan 4.5s var(--ease-in-out) infinite }
@keyframes scan{ 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(340%)} }
.idcard__meta{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3) var(--s-4); margin-top:var(--s-4); font:500 12px/1.3 var(--font-mono); color:var(--tan) }
.idcard__meta b{ display:block; font-weight:500; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--stone-hi); margin-bottom:4px }
.idcard__meta em{ font-style:normal }

/* stats */
.stats{ display:grid; grid-template-columns:repeat(4, 1fr); margin-bottom:var(--s-7); background:linear-gradient(var(--line), var(--line)) top / 100% 1px no-repeat; background-origin:content-box; background-clip:content-box }
.stat{ position:relative; padding:var(--s-5) var(--s-5) 0 0 }
.stat + .stat{ padding-left:var(--s-5); border-left:1px solid var(--line) }
.stat::before{ content:""; position:absolute; top:-1px; left:0; width:24px; height:1px; background:var(--rust) }
.stat + .stat::before{ left:var(--s-5) }
.stat dt{ font:500 11px/1.4 var(--font-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--stone-hi) }
.stat dd{ font:600 clamp(36px, 4.6vw, 68px)/1.1 var(--font-display); color:var(--tan); font-variant-numeric:tabular-nums; margin-top:var(--s-2) }

/* faint data ticker */
.ticker-strip{ position:relative; border-block:1px solid var(--line); height:36px; overflow:hidden; font:500 10.5px/36px var(--font-mono); letter-spacing:.2em; color:var(--stone); white-space:nowrap; -webkit-mask:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent) }
.ticker-strip__track{ display:inline-block; animation:marquee 80s linear infinite; will-change:transform }
.ticker-strip__track span{ margin-right:var(--s-7) }
.ticker-strip__track span b{ color:var(--clay); font-weight:500 }
@keyframes marquee{ to{ transform:translate3d(-50%,0,0) } }

/* ═══════════ SECTION / NODE ═══════════ */
.node{ position:relative; padding-block:clamp(72px, 10vw, 144px) }
.node__head{ margin-bottom:clamp(40px, 5vw, 72px) }
.node__meta{ display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); font:500 11px/1.4 var(--font-mono); letter-spacing:.18em; color:var(--stone-hi); margin-bottom:var(--s-4) }
.node__meta span:first-child{ color:var(--rust) }
.node__title{ font:700 clamp(48px, 8.4vw, 132px)/.88 var(--font-display); text-transform:uppercase; letter-spacing:-.005em; color:var(--tan) }
.node__lede{ max-width:62ch; margin-top:var(--s-5); color:var(--tan-dim) }
.subhead{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--s-3); margin:clamp(56px, 7vw, 96px) 0 var(--s-5); padding-bottom:var(--s-3); border-bottom:1px solid var(--line) }
.subhead__title{ font:600 clamp(22px, 2.4vw, 30px)/1.1 var(--font-display); text-transform:uppercase; letter-spacing:.02em }
.subhead .muted{ font-size:11px; letter-spacing:.14em; text-transform:uppercase }

/* elevation-profile divider */
.divider{ position:relative; z-index:2; height:96px; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter) }
.divider svg{ width:100%; height:100%; overflow:visible }
.divider .d-base{ stroke:rgba(122,118,112,.3); stroke-dasharray:2 6 }
.divider .d-line{ fill:none; stroke:var(--stone); stroke-width:1; vector-effect:non-scaling-stroke }
.divider .d-area{ fill:url(#none); fill:rgba(138,90,59,.08) }
.divider .d-peak{ fill:var(--rust) }
.divider .d-tick{ stroke:rgba(122,118,112,.5) }
.divider text{ font:500 10px var(--font-mono); letter-spacing:.16em; fill:var(--stone-hi) }

.divider__svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible }
.js .divider__svg{ clip-path:inset(0 100% 0 0); transition:clip-path 1.8s var(--ease-in-out) }
.js .divider__svg.is-in{ clip-path:inset(0 0 0 0) }
.divider__lbl{ position:absolute; margin-top:6px; font:500 10px/1 var(--font-mono); letter-spacing:.18em; color:var(--stone-hi); white-space:nowrap }
.divider__lbl--peak{ margin:-26px 0 0; transform:translateX(-50%); color:var(--dune) }
.divider__peak{ position:absolute; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; background:var(--rust); transform:rotate(45deg); box-shadow:0 0 10px var(--rust) }
section[id], main{ scroll-margin-top:var(--hud-h) }

/* ═══════════ ABOUT ═══════════ */
.about{ display:grid; grid-template-columns:repeat(12, 1fr); gap:var(--s-5) }
.about__bio{ grid-column:span 7; display:flex; flex-direction:column }
.loadout{ grid-column:span 5 }
.stack{ grid-column:span 12 }
.about__learning{ margin-top:var(--s-6) }
.about__learning .chip{ font-size:13px }
.about__text{ font-size:clamp(15px, 1.25vw, 17px); line-height:1.8; color:var(--tan) }
.level{ margin-top:auto; padding-top:var(--s-6) }
.level__row{ display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-4); align-items:center; justify-content:space-between; font-size:12px; margin-bottom:var(--s-3) }

.loadout__head{ display:flex; flex-direction:column; gap:0 }
.loadout__boost{ font-size:12px; min-height:1.5em; margin:-8px 0 var(--s-4) }
.loadout__boost b{ color:var(--dune); font-weight:500 }
.loadout__roles{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin-bottom:var(--s-5) }
.skills{ display:flex; flex-direction:column; gap:var(--s-2) }
.skill{ display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:var(--s-4); padding:var(--s-3); border:1px solid transparent; transition:border-color .4s var(--ease-out), background-color .4s var(--ease-out) }
.skill__ic{ display:grid; place-items:center; width:44px; height:44px; font:700 13px/1 var(--font-display); letter-spacing:.04em; color:var(--stone-hi); border:1px solid var(--line); transition:color .4s, border-color .4s, box-shadow .4s }
.skill__name{ font:600 17px/1.2 var(--font-display); letter-spacing:.02em }
.skill__state{ display:block; font:500 10px/1.4 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--stone-hi); margin-top:2px }
.skill__pips{ display:flex; gap:3px; align-items:center }
.skill__pips i{ width:6px; height:14px; background:rgba(122,118,112,.25); transition:background-color .4s var(--ease-out), box-shadow .4s }
.skill__pips i.on{ background:var(--stone) }
.skill__lv{ font:500 10px/1 var(--font-mono); letter-spacing:.14em; color:var(--stone-hi); margin-left:var(--s-2) }
.skill.is-equipped{ border-color:rgba(217,160,102,.35); background:rgba(181,86,43,.08) }
.skill.is-equipped .skill__ic{ color:var(--dune); border-color:var(--dune); box-shadow:inset 0 0 12px rgba(181,86,43,.35) }
.skill.is-equipped .skill__state{ color:var(--sage) }
.skill.is-equipped .skill__pips i.on{ background:var(--dune); box-shadow:0 0 6px rgba(217,160,102,.6) }

.stack__grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line) }
.stack__grid li{ display:flex; align-items:baseline; gap:var(--s-3); padding:var(--s-3) var(--s-4); border-right:1px solid var(--line); border-bottom:1px solid var(--line); font-size:13px; transition:background-color .35s var(--ease-out), color .35s }
.stack__grid li span{ font-size:10px; color:var(--stone); letter-spacing:.1em; transition:color .35s }
.stack__grid li:hover{ background:rgba(181,86,43,.12); color:var(--dune) }
.stack__grid li:hover span{ color:var(--rust) }

/* ═══════════ PROJECTS ═══════════ */
.op{ display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); padding:0; margin-bottom:var(--s-7) }
.op__art{ position:relative; display:block; min-height:340px; text-align:left }
.op__art img{ position:absolute; inset:0 }
.op__art:hover img{ transform:scale(1.045) }
.op__art-title{ position:absolute; z-index:3; left:var(--s-5); bottom:var(--s-4); font:700 clamp(28px, 3vw, 44px)/1 var(--font-display); text-transform:uppercase; color:var(--tan) }
.op__info{ display:flex; flex-direction:column; align-items:flex-start; padding:clamp(24px, 3vw, 40px) }
.op__title{ font:700 clamp(30px, 3.2vw, 48px)/1 var(--font-display); text-transform:uppercase; margin-bottom:var(--s-4) }
.op__desc{ color:var(--tan-dim); margin-bottom:var(--s-5) }
.op__meter{ width:100%; margin:auto 0 var(--s-5) }
.op__meter-lbl{ display:flex; justify-content:space-between; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--stone-hi); margin-bottom:var(--s-2) }
.op__meter-lbl span:last-child{ color:var(--dune) }

.filters{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:var(--s-4) }
.filters__cats{ display:flex; flex-wrap:wrap; gap:var(--s-2) }
.filters__count{ margin:var(--s-4) 0 var(--s-5); font-size:11px; letter-spacing:.14em; text-transform:uppercase }
.search{ position:relative; display:flex; align-items:center; gap:var(--s-3); min-width:min(320px, 100%); height:40px; border-bottom:1px solid var(--line); transition:border-color .3s var(--ease-out) }
.search:focus-within{ border-color:var(--dune) }
.search__prompt{ color:var(--rust); font-size:12px; letter-spacing:.08em; white-space:nowrap }
.search input{ flex:1; min-width:0; height:100%; background:transparent; border:0; outline:0; font-size:13px; color:var(--tan); caret-color:var(--rust) }
.search input::placeholder{ color:var(--stone-hi); opacity:.8 }
.search input::-webkit-search-cancel-button{ -webkit-appearance:none }
.search--wide{ flex:1 }

.projects{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap:var(--s-5) }
.pcard{ display:flex; flex-direction:column; padding:0 }
.pcard__cover{ position:relative; aspect-ratio:16/9 }
.pcard__cover img{ position:absolute; inset:0 }
.pcard:hover .pcard__cover img{ transform:scale(1.05) }
.pcard__cover svg.gen{ position:absolute; inset:0; width:100%; height:100%; z-index:1 }
.gen-cover{ position:relative; overflow:hidden; background:#221E1A }
.gen-cover::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:repeating-linear-gradient(to bottom, rgba(20,18,16,.28) 0 1px, transparent 1px 3px), linear-gradient(to top, rgba(28,26,23,.7), transparent 55%) }
.gen-cover svg.gen{ transition:transform 1.4s var(--ease-out) }
.pcard:hover .gen-cover svg.gen{ transform:scale(1.05) }
.gen-cover__jet{ position:absolute; z-index:1; left:12%; right:12%; top:16%; bottom:10%; transition:transform 1.2s var(--ease-out) }
.gen-cover__jet svg{ width:100%; height:100% }
.pcard:hover .gen-cover__jet{ transform:translate(10px,-6px) }
.gen-cover__eye{ position:absolute; z-index:1; left:50%; top:50%; width:22%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; border:1.5px solid var(--dune); box-shadow:0 0 0 10px rgba(28,26,23,.6), 0 0 0 11px rgba(181,86,43,.7), 0 0 30px rgba(181,86,43,.5); background:radial-gradient(circle, #1C1A17 30%, rgba(181,86,43,.35) 31%, rgba(28,26,23,.8) 70%) }
.pcard__badge{ position:absolute; z-index:3; top:var(--s-3); right:var(--s-3) }
.pcard__badge .tag{ background:rgba(28,26,23,.85) }
.pcard__body{ display:flex; flex-direction:column; flex:1; padding:var(--s-5) }
.pcard__meta{ display:flex; gap:var(--s-3); font:500 10.5px/1.4 var(--font-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--stone-hi); margin-bottom:var(--s-2) }
.pcard__meta span:first-child{ color:var(--rust) }
.pcard__title{ font:600 clamp(20px, 1.7vw, 24px)/1.15 var(--font-display); letter-spacing:.01em; margin-bottom:var(--s-4) }
.readout{ font:400 12px/1.8 var(--font-mono); color:var(--stone-hi); margin-bottom:var(--s-4); border-left:1px solid var(--line); padding-left:var(--s-3) }
.readout div{ display:grid; grid-template-columns:68px 1fr; gap:var(--s-2) }
.readout dt::before{ content:"> "; color:var(--rust) }
.readout dd{ color:var(--tan); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.pcard .chips{ margin-top:auto; padding-top:var(--s-2) }
.pcard__go{ display:flex; justify-content:space-between; align-items:center; margin-top:var(--s-4); padding-top:var(--s-3); border-top:1px solid var(--line); font:500 11px/1 var(--font-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--stone-hi); transition:color .35s }
.pcard__go i{ font-style:normal; transition:transform .5s var(--ease-spring) }
.pcard:hover .pcard__go{ color:var(--dune) }
.pcard:hover .pcard__go i{ transform:translate(4px,-4px) }
.pcard__hit{ position:absolute; inset:0; z-index:5 }
.pcard__hit:focus-visible{ outline:2px solid var(--dune); outline-offset:-6px }
.projects__empty{ grid-column:1/-1; padding:var(--s-9) 0; text-align:center; color:var(--stone-hi); font-size:13px; letter-spacing:.08em }

/* ═══════════ MODAL ═══════════ */
.modal{
  --c:22px;
  margin:auto; padding:0; border:0; background:transparent; color:var(--tan);
  width:min(960px, calc(100% - 32px)); max-height:calc(100svh - 48px);
  overflow:visible;
}
.modal::backdrop{ background:rgba(16,14,12,.82); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px) }
.modal__frame{
  position:relative; max-height:calc(100svh - 48px); overflow:auto; overscroll-behavior:contain;
  background:var(--line); clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));
}
.modal__body{ margin:1px; padding:clamp(20px, 4vw, 44px); background:#211E1A; clip-path:polygon(calc(var(--c) - .4px) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 calc(var(--c) - .4px)) }
.modal__close{ position:absolute; top:var(--s-4); right:var(--s-4); z-index:3; display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--line); background:rgba(28,26,23,.9); transition:border-color .3s, transform .5s var(--ease-spring) }
.modal__close svg{ width:14px; height:14px; stroke:var(--tan); stroke-width:1.5 }
.modal__close:hover{ border-color:var(--dune); transform:rotate(90deg) }
.modal__meta{ display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-4); font:500 11px/1.4 var(--font-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--stone-hi); margin-bottom:var(--s-3); padding-right:56px }
.modal__meta span:first-child{ color:var(--rust) }
.modal__title{ font:700 clamp(30px, 4.4vw, 56px)/.95 var(--font-display); text-transform:uppercase; margin-bottom:var(--s-5); padding-right:56px }
.gallery__stage{ position:relative; aspect-ratio:16/9; background:#151311; border:1px solid var(--line); overflow:hidden }
.gallery__stage > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain }
.gallery__thumbs{ display:flex; gap:var(--s-2); margin-top:var(--s-2); overflow-x:auto; padding-bottom:4px }
.gallery__thumb{ position:relative; flex:none; width:112px; aspect-ratio:16/10; border:1px solid var(--line); overflow:hidden; background:#151311; transition:border-color .3s }
.gallery__thumb img{ width:100%; height:100%; object-fit:cover; opacity:.6; transition:opacity .3s }
.gallery__thumb span{ display:grid; place-items:center; height:100%; padding:var(--s-2); font:500 9.5px/1.3 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--stone-hi); text-align:center }
.gallery__thumb[aria-pressed="true"]{ border-color:var(--dune) }
.gallery__thumb[aria-pressed="true"] img, .gallery__thumb:hover img{ opacity:1 }
.gen-shot{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:var(--s-5) }
.gen-shot svg{ position:absolute; inset:0; width:100%; height:100%; opacity:.7 }
.gen-shot__txt{ position:relative; z-index:1 }
.gen-shot__txt small{ display:block; font:500 11px/1.4 var(--font-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--dune); margin-bottom:var(--s-2) }
.gen-shot__txt b{ font:700 clamp(22px, 3vw, 36px)/1 var(--font-display); text-transform:uppercase }
.modal__desc{ margin:var(--s-5) 0; color:var(--tan-dim); line-height:1.8 }
.modal__actions{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-5) }

/* HondaJet illustration (recolored to palette) */
.jet{ position:absolute; inset:0; display:grid; grid-template-rows:1fr auto; padding:var(--s-5); background:radial-gradient(circle at 75% 25%, rgba(217,160,102,.18), transparent 40%), linear-gradient(135deg, #1f1b17, #2c2219 60%, #3E2A1E) }
.jet svg{ width:100%; height:100%; max-height:260px; margin:auto }
.jet__ui{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s-2) }
.jet__ui div{ padding:var(--s-2) var(--s-3); border:1px solid var(--line); background:rgba(28,26,23,.7); font-size:11px; line-height:1.4; color:var(--stone-hi) }
.jet__ui b{ display:block; color:var(--tan); font:600 13px/1.3 var(--font-display) }

/* ═══════════ EXPERIENCE ═══════════ */
.exp{ display:grid; grid-template-columns:minmax(0, 1.7fr) minmax(0, 1fr); gap:clamp(32px, 4vw, 64px); align-items:start }
.timeline{ position:relative; padding-left:var(--s-6) }
.timeline::before{ content:""; position:absolute; left:6px; top:8px; bottom:8px; width:1px; background:linear-gradient(to bottom, var(--rust), var(--line) 30%, var(--line) 85%, transparent) }
.timeline__item{ position:relative; display:grid; grid-template-columns:180px 1fr; gap:var(--s-5); padding-bottom:var(--s-7) }
.timeline__item:last-child{ padding-bottom:0 }
.timeline__item::before{ content:""; position:absolute; left:calc(-1 * var(--s-6) + 2px); top:7px; width:9px; height:9px; background:var(--charcoal); border:1px solid var(--dune); transform:rotate(45deg); transition:background-color .4s, box-shadow .4s }
.timeline__item:hover::before{ background:var(--rust); box-shadow:0 0 12px var(--rust) }
.timeline__when{ display:flex; flex-direction:column; gap:2px; font:500 11px/1.5 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--dune) }
.timeline__body h3{ font:600 clamp(18px, 1.6vw, 22px)/1.25 var(--font-display); letter-spacing:.01em; margin-bottom:var(--s-2) }
.timeline__body p{ color:var(--tan-dim); font-size:14px; line-height:1.75 }

.term{ padding:0; position:sticky; top:calc(var(--hud-h) + var(--s-6)) }
.term__bar{ display:flex; align-items:center; gap:6px; padding:var(--s-3) var(--s-4); border-bottom:1px solid var(--line); font:500 10.5px/1 var(--font-mono); letter-spacing:.14em; color:var(--stone-hi) }
.term__bar i{ width:8px; height:8px; background:var(--stone) } .term__bar i:nth-child(2){ background:var(--clay) } .term__bar i:nth-child(3){ background:var(--rust) }
.term__bar span{ margin-left:var(--s-2) }
.term__body{ padding:var(--s-4) var(--s-5) var(--s-5); font-size:12.5px; line-height:1.75; color:var(--tan-dim) }
.term__body li + li{ margin-top:var(--s-3) }
.term__body b{ color:var(--tan); font-weight:500 }
.term__ts{ color:var(--sage); margin-right:6px }
.term__prompt{ color:var(--dune) }
.term__caret{ display:inline-block; width:8px; height:14px; background:var(--dune); vertical-align:-2px; animation:blink 1s steps(1) infinite }

.achievements{ display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--s-4) }
.ach{ --tier:var(--dune); display:flex; flex-direction:column; gap:var(--s-4) }
.ach > div:nth-child(2){ flex:1 }
.ach--legendary{ grid-column:span 2; grid-row:span 2; justify-content:flex-end; background:rgba(181,86,43,.45) }
.ach--legendary::before{ background:radial-gradient(120% 90% at 85% 10%, rgba(181,86,43,.22), transparent 60%), var(--panel) }
.ach--legendary .ach__ic{ width:72px; height:72px }
.ach--legendary .ach__ic svg{ width:34px; height:34px }
.ach--legendary h4{ font-size:clamp(26px, 2.6vw, 38px); line-height:1.05; max-width:14ch }
.ach--legendary p{ font-size:14px }
.ach--legendary .ach__rarity b{ font-size:28px }
.ach__ic{ display:grid; place-items:center; width:52px; height:52px; border:1px solid var(--tier); color:var(--tier); clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); background:color-mix(in srgb, var(--tier) 12%, transparent) }
.ach__ic svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5 }
.ach h4{ font:600 17px/1.25 var(--font-display); margin-bottom:4px }
.ach p{ font-size:12.5px; line-height:1.6; color:var(--tan-dim) }
.ach__when{ margin-top:var(--s-2); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--tier) }
.ach__rarity{ display:flex; align-items:center; gap:var(--s-3); padding-top:var(--s-3); border-top:1px solid var(--line); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--stone-hi) }
.ach__rarity b{ font:600 18px/1 var(--font-display); color:var(--tier); letter-spacing:0 }
.ach__rarity .meter{ flex:1; height:3px }
.ach__rarity .meter i{ background:var(--tier); box-shadow:none }
.ach--legendary{ --tier:var(--rust) }
.ach--legendary .ach__ic{ animation:legend 3s var(--ease-in-out) infinite; color:var(--dune) }
.ach--legendary .ach__when, .ach--legendary .ach__rarity b{ color:var(--dune) }
@keyframes legend{ 50%{ box-shadow:inset 0 0 18px rgba(181,86,43,.55) } }

/* ═══════════ TRAILS ═══════════ */
.trails{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap:var(--s-5) }
.trail{ display:flex; flex-direction:column; gap:var(--s-4) }
.trail__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s-3) }
.trail__code{ font:500 10.5px/1.4 var(--font-mono); letter-spacing:.16em; color:var(--rust) }
.trail__name{ font:600 clamp(20px, 1.9vw, 26px)/1.15 var(--font-display); text-transform:uppercase; letter-spacing:.01em }
.trail__region{ font-size:12px; color:var(--stone-hi) }
.trail__profile{ height:88px; margin:0 calc(-1 * clamp(20px, 2.4vw, 32px)); border-block:1px solid var(--line); background:linear-gradient(to bottom, transparent, rgba(138,90,59,.06)) }
.trail__profile svg{ width:100%; height:100%; overflow:visible }
.trail__profile .t-line{ fill:none; stroke:var(--dune); stroke-width:1.5; vector-effect:non-scaling-stroke }
.trail__profile .t-area{ fill:rgba(181,86,43,.12) }
.trail__profile .t-grid{ stroke:rgba(122,118,112,.18); vector-effect:non-scaling-stroke }
.trail__stats{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s-3) }
.trail__stats dt{ font:500 10px/1.4 var(--font-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--stone-hi) }
.trail__stats dd{ font:600 24px/1.2 var(--font-display); color:var(--tan); font-variant-numeric:tabular-nums }
.trail__stats dd small{ font:500 11px var(--font-mono); color:var(--stone-hi); margin-left:3px }
.trail__foot{ display:flex; justify-content:space-between; gap:var(--s-3); font-size:11px; letter-spacing:.12em; color:var(--stone-hi); text-transform:uppercase }
.trail__foot span:last-child{ color:var(--sage) }

/* ═══════════ SIGNALS (comments) ═══════════ */
.signals{ max-width:880px }
.signal{ display:grid; grid-template-columns:40px 1fr; gap:var(--s-4); padding:var(--s-4) 0; border-bottom:1px solid var(--line) }
.signal:first-child{ padding-top:0 }
.signal__av{ display:grid; place-items:center; width:40px; height:40px; font:700 13px/1 var(--font-display); color:var(--charcoal); background:var(--dune); clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px) }
.signal:nth-child(3n+2) .signal__av{ background:var(--sage) }
.signal:nth-child(3n) .signal__av{ background:var(--clay); color:var(--tan) }
.signal__who{ font-size:13px; color:var(--dune); margin-bottom:2px }
.signal__who span{ margin-left:var(--s-3); font-size:11px; color:var(--stone-hi); letter-spacing:.08em }
.signal p:last-child{ font-size:14px; color:var(--tan); overflow-wrap:anywhere }
.signal.is-new{ animation:sigIn .7s var(--ease-out) both }
@keyframes sigIn{ 0%{opacity:0; transform:translateY(8px)} 30%{opacity:.4} 45%{opacity:.1} 100%{opacity:1; transform:none} }
.signals__form{ display:flex; gap:var(--s-4); align-items:center; margin-top:var(--s-5) }
.signals__note{ font-size:11.5px; margin-top:var(--s-3) }

/* ═══════════ CONTACT ═══════════ */
.contact{ display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr); gap:var(--s-5); align-items:start }
.contact__links{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-5) }
.link-card{ display:flex; flex-direction:column; min-height:200px }
.link-card__icon{ display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--line); margin-bottom:auto; transition:border-color .4s, color .4s }
.link-card__icon svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }
.link-card__k{ margin-top:var(--s-6); font:500 11px/1.4 var(--font-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--stone-hi) }
.link-card__v{ font:600 clamp(16px, 1.5vw, 20px)/1.3 var(--font-display); overflow-wrap:anywhere; margin-top:4px }
.link-card__go{ position:absolute; top:clamp(20px, 2.4vw, 32px); right:clamp(20px, 2.4vw, 32px); font-size:18px; color:var(--stone-hi); transition:transform .5s var(--ease-spring), color .3s }
.link-card:hover .link-card__go{ transform:translate(4px,-4px); color:var(--dune) }
.link-card:hover .link-card__icon{ border-color:var(--dune); color:var(--dune) }

.hire{ position:sticky; top:calc(var(--hud-h) + var(--s-6)) }
.hire__rows > div, .sysreq dl > div{ display:flex; justify-content:space-between; gap:var(--s-4); padding:var(--s-3) 0; border-bottom:1px solid var(--line); font-size:13px }
.hire__rows dt, .sysreq dt{ color:var(--stone-hi) }
.hire__rows dd{ font:600 15px/1.4 var(--font-display); text-align:right }
.hire__actions{ display:flex; flex-direction:column; gap:var(--s-3); margin:var(--s-5) 0 var(--s-6) }
.sysreq dl > div{ font-size:12px }
.sysreq dd{ text-align:right }

/* ═══════════ FOOTER ═══════════ */
.footer{ display:grid; grid-template-columns:1fr auto; gap:var(--s-6) var(--s-7); padding-block:var(--s-9) var(--s-6); border-top:1px solid var(--line); margin-top:var(--s-7) }
.footer__sig{ display:flex; flex-direction:column; gap:var(--s-3) }
.footer__big{ font:700 clamp(56px, 10vw, 152px)/.85 var(--font-display); letter-spacing:-.01em; color:transparent; -webkit-text-stroke:1px rgba(232,213,176,.4) }
.footer__big em{ font-style:normal; -webkit-text-stroke:1px var(--rust) }
.footer__sig .muted{ font-size:12px }
.footer__nav{ display:flex; flex-direction:column; gap:var(--s-2); font-size:13px; letter-spacing:.12em; text-transform:uppercase }
.footer__nav a{ color:var(--tan-dim); transition:color .3s, transform .5s var(--ease-spring) }
.footer__nav a::before{ content:"› "; color:var(--rust); opacity:0; transition:opacity .3s }
.footer__nav a:hover{ color:var(--dune); transform:translateX(4px) }
.footer__nav a:hover::before{ opacity:1 }
.footer__end{ grid-column:1/-1; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:var(--s-4); padding-top:var(--s-5); border-top:1px solid var(--line); font-size:11px; letter-spacing:.16em }

/* ═══════════ NETSPACE MENU ═══════════ */
.netspace{ position:fixed; inset:0; z-index:200; background:var(--charcoal); overflow:hidden }
.netspace__gl{ position:absolute; inset:0; width:100%; height:100%; display:none }
.netspace.is-3d .netspace__gl{ display:block }
.netspace__wall{ position:absolute; inset:0; display:none; overflow:hidden }
.netspace.is-2d .netspace__wall{ display:block }
.netspace__hud{ position:absolute; inset:0; pointer-events:none; z-index:2; font:500 11px/1.6 var(--font-mono); letter-spacing:.18em; color:var(--stone-hi); text-transform:uppercase }
.netspace__hud > div{ position:absolute }
.netspace__hud-tl{ left:var(--gutter); top:var(--s-5) }
.netspace__hud-tl b{ color:var(--tan); font-weight:500 }
.netspace__hud-bl{ left:var(--gutter); bottom:var(--s-5) }
.netspace__hud-br{ right:var(--gutter); bottom:var(--s-5); color:var(--dune) }
.kbd{ border:1px solid var(--line); padding:1px 6px; color:var(--tan) }
.netspace__close{ position:absolute; right:var(--gutter); top:var(--s-4); z-index:4 }

/* 3D mode: real <a> links are laid exactly over the projected 3D panels */
.netspace.is-3d .netspace__nav{ position:absolute; inset:0; z-index:3 }
.netspace.is-3d .net-link{
  position:absolute; left:0; top:0; display:block;
  width:var(--w, 0); height:var(--h, 0); transform:translate3d(var(--x, -999px), var(--y, -999px), 0);
  color:transparent; overflow:hidden; font-size:1px;
}
.netspace.is-3d .net-link:focus-visible{ outline:2px solid var(--dune); outline-offset:4px }

/* 2D mode (mobile / low-power / reduced motion): pixel-wall overlay menu */
.netspace.is-2d .netspace__nav{ position:absolute; inset:0; z-index:3; display:flex; align-items:center; padding:calc(var(--s-9)) var(--gutter) var(--s-9) }
.netspace.is-2d #netNav{ width:100%; max-width:var(--wrap); margin-inline:auto; counter-reset:n }
.netspace.is-2d .net-link{
  position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:var(--s-4);
  padding:var(--s-3) 0; border-bottom:1px solid var(--line);
  font:700 clamp(36px, 8.5vw, 96px)/1 var(--font-display); text-transform:uppercase; color:var(--tan);
  transition:color .35s var(--ease-out);
}
.netspace.is-2d .net-link::before{ content:attr(data-code); font:500 12px/1 var(--font-mono); letter-spacing:.16em; color:var(--rust); align-self:start; padding-top:.6em }
.netspace.is-2d .net-link::after{ content:attr(data-sub); font:500 10.5px/1 var(--font-mono); letter-spacing:.16em; color:var(--stone-hi); text-align:right }
.netspace.is-2d .net-link > span{ display:inline-block; transition:transform .6s var(--ease-out) }
.netspace.is-2d .net-link:hover, .netspace.is-2d .net-link:focus-visible{ color:var(--dune); outline:none }
.netspace.is-2d .net-link:hover > span, .netspace.is-2d .net-link:focus-visible > span{ transform:translateX(var(--s-4)) }

@keyframes wallStream{ to{ transform:translate3d(0,-50%,0) } }

/* pixel-dissolve canvas */
.dissolve{ position:fixed; inset:0; z-index:300; width:100%; height:100%; pointer-events:none; display:none }
.dissolve.is-on{ display:block }

/* ═══════════ CURSOR ═══════════ */
.cursor{ position:fixed; left:0; top:0; z-index:400; pointer-events:none; display:none }
html.has-cursor .cursor{ display:block }
.cursor__ring, .cursor__dot, .cursor__label{ position:absolute; left:0; top:0; will-change:transform }
.cursor__ring{ width:40px; height:40px; margin:-20px 0 0 -20px }
.cursor__ring svg{ width:100%; height:100%; fill:none; stroke:var(--tan); stroke-width:1; opacity:.75; transition:stroke .3s, opacity .3s, transform .5s var(--ease-spring) }
.cursor__ring svg path{ stroke:var(--dune) }
.cursor__dot{ width:4px; height:4px; margin:-2px 0 0 -2px; background:var(--rust); box-shadow:0 0 8px var(--rust) }
.cursor__label{ margin:18px 0 0 18px; padding:3px 6px; font:500 9.5px/1 var(--font-mono); letter-spacing:.2em; color:var(--charcoal); background:var(--dune); white-space:nowrap; opacity:0; transform-origin:left top; transition:opacity .25s var(--ease-out) }
.cursor.is-link .cursor__ring svg{ transform:scale(1.55) rotate(45deg); stroke:var(--dune); opacity:1 }
.cursor.is-label .cursor__label{ opacity:1 }
.cursor.is-down .cursor__ring svg{ transform:scale(.7) }
.cursor.is-link.is-down .cursor__ring svg{ transform:scale(1.2) rotate(45deg) }
.cursor.is-hidden{ opacity:0 }
.cursor-pulse{ position:fixed; z-index:399; left:0; top:0; width:40px; height:40px; margin:-20px 0 0 -20px; border:1px solid var(--dune); border-radius:50%; pointer-events:none }
.px-burst{ position:fixed; z-index:399; left:0; top:0; width:4px; height:4px; pointer-events:none; background:var(--rust) }

/* ═══════════ TOAST ═══════════ */
.toast{ position:fixed; left:var(--gutter); bottom:var(--s-5); z-index:250; max-width:min(380px, calc(100% - 32px)); padding:var(--s-3) var(--s-4) var(--s-3) var(--s-5); background:var(--panel-2); border:1px solid var(--line); font-size:12.5px; line-height:1.5; color:var(--tan); transform:translateY(calc(100% + 40px)); opacity:0; transition:transform .6s var(--ease-out), opacity .4s var(--ease-out); pointer-events:none }
.toast::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--rust); box-shadow:0 0 10px var(--rust) }
.toast.is-on{ transform:none; opacity:1 }
.toast b{ display:block; font:600 14px/1.3 var(--font-display); letter-spacing:.06em; text-transform:uppercase; color:var(--dune) }
.toast small{ display:block; font-size:10px; letter-spacing:.2em; color:var(--sage); text-transform:uppercase; margin-bottom:2px }

/* ═══════════ REVEALS (JS adds motion; content stays visible without JS) ═══════════ */
.js.gsap-ready [data-reveal]{ opacity:0; visibility:hidden }
.js.gsap-ready [data-hero-in]{ opacity:0 }

/* pause idle loops while the tab is hidden */
.is-hidden-tab *, .is-hidden-tab *::before, .is-hidden-tab *::after{ animation-play-state:paused !important }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 1180px){
  .hud__coords{ display:none }
  .hud{ grid-template-columns:auto 1fr auto }
}
@media (max-width: 1024px){
  .op__art-title{ display:none }
  .achievements{ grid-template-columns:1fr 1fr }
  .stack__grid{ grid-template-columns:repeat(4, 1fr) }
  .about__bio, .loadout{ grid-column:span 12 }
  .exp{ grid-template-columns:1fr }
  .term{ position:relative; top:0 }
  .contact{ grid-template-columns:1fr }
  .hire{ position:relative; top:0 }
  .op{ grid-template-columns:1fr }
  .op__art{ min-height:0; aspect-ratio:16/9 }
}
@media (max-width: 860px){
  :root{ --hud-h:56px }
  .hud__sector{ display:none }
  .hud{ grid-template-columns:1fr auto }
  .hero__grid{ grid-template-columns:1fr; padding-top:var(--s-8); gap:var(--s-7) }
  .hero__title{ font-size:clamp(52px, 15.5vw, 132px) }
  .idcard{ max-width:340px; width:100%; display:grid; grid-template-columns:120px 1fr; gap:var(--s-3) var(--s-4); align-items:start }
  .idcard__top{ grid-column:1/-1; margin:0 }
  .idcard__meta{ margin:0; align-self:center }
  .idcard__mono{ font-size:44px; left:var(--s-2); bottom:2px }
  .idcard__meta{ grid-template-columns:1fr; gap:6px; font-size:11.5px }
  .idcard__meta span{ display:flex; justify-content:space-between; gap:8px; border-bottom:1px solid var(--line); padding-bottom:4px }
  .idcard__meta b{ margin:0 }
  .stats{ grid-template-columns:1fr 1fr }
  .stat:nth-child(3){ padding-left:0; border-left:0 }
  .stat:nth-child(3)::before{ left:0 }
  .stat:nth-child(n+3){ border-top:1px solid var(--line); padding-bottom:var(--s-2); margin-top:var(--s-5) }
  .timeline__item{ grid-template-columns:1fr; gap:var(--s-2) }
  .netspace__hud-bl{ display:none }
  .hero__hud--tr{ display:none }
}
@media (max-width: 600px){
  body{ font-size:14px }
  .eyebrow{ font-size:11px; letter-spacing:.14em }
  .eyebrow::before{ width:20px }
  .netspace__hud-tl{ display:none }
  .idcard{ grid-template-columns:104px 1fr }
  .achievements{ grid-template-columns:1fr }
  .ach--legendary{ grid-column:auto; grid-row:auto }
  .stack__grid{ grid-template-columns:1fr 1fr }
  .hide-sm{ display:none }
  .hud__sound-label{ display:none }
  .hero__title{ font-size:clamp(52px, 17vw, 96px) }
  .hero__hud--tl span:nth-child(3){ display:none }
  .hero__cta .btn{ flex:1 }
  .contact__links{ grid-template-columns:1fr }
  .link-card{ min-height:160px }
  .signals__form{ flex-direction:column; align-items:stretch }
  .footer{ grid-template-columns:1fr }
  .footer__nav{ flex-direction:row; flex-wrap:wrap; gap:var(--s-2) var(--s-4) }
  .trail__stats dd{ font-size:20px }
  .jet__ui{ grid-template-columns:1fr }
  .jet__ui div:nth-child(n+2){ display:none }
  .node__title{ font-size:clamp(44px, 14vw, 72px) }
  .modal{ width:calc(100% - 16px); max-height:calc(100svh - 16px) }
  .modal__frame{ max-height:calc(100svh - 16px) }
}

/* ═══════════ REDUCED MOTION ═══════════ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important }
  .fx--grain, .idcard__scan, .ticker-strip__track{ animation:none !important }
  .js.gsap-ready [data-reveal], .js.gsap-ready [data-hero-in]{ opacity:1; visibility:visible }
  .js .meter i{ transform:scaleX(var(--v, .5)) }
}