:root {
  --bg: #050807;
  --bg-soft: #09100d;
  --panel: rgba(11, 19, 16, 0.7);
  --panel-strong: rgba(12, 22, 18, 0.9);
  --text: #eef8f1;
  --muted: #8fa39a;
  --line: rgba(167, 219, 190, 0.15);
  --jade: #57e6a7;
  --jade-bright: #8fffd0;
  --gold: #e8c979;
  --red: #d8574f;
  --shadow: 0 24px 80px rgba(0,0,0,.42);
  --max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; color: var(--text); font-family: "DM Sans", system-ui, sans-serif; background: var(--bg); overflow-x: hidden; }
body::before { content:""; position: fixed; inset:0; pointer-events:none; z-index:2; background:
  radial-gradient(ellipse 55% 40% at 72% 38%, rgba(120,80,200,.07) 0%, transparent 70%),
  radial-gradient(ellipse 40% 35% at 68% 42%, rgba(255,210,120,.05) 0%, transparent 55%),
  radial-gradient(circle at 50% 0%, transparent 0 24%, rgba(5,8,7,.22) 58%, rgba(5,8,7,.76) 100%); }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { background: rgba(87,230,167,.25); color:#fff; }
#cosmos { position: fixed; inset: 0; width:100%; height:100%; z-index:0; pointer-events:none; }
.nebula { position: fixed; width: 46vw; height: 46vw; border-radius: 50%; filter: blur(100px); pointer-events:none; z-index:0; opacity:.32; will-change:translate; }
.nebula-a { right:-14vw; top:2vh; background:radial-gradient(circle, #7b3ff2 0%, #4a2596 55%, transparent 72%); animation: driftA 18s ease-in-out infinite alternate; }
.nebula-b { left:-18vw; bottom:-15vw; background:radial-gradient(circle, #2f56d6 0%, #17296e 55%, transparent 72%); animation: driftB 22s ease-in-out infinite alternate; }
.grain { position:fixed; inset:0; z-index:3; opacity:.035; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
@keyframes driftA { to { transform: translate(-7vw,8vh) scale(1.1); } }
@keyframes driftB { to { transform: translate(9vw,-6vh) scale(.9); } }
.site-header { position:fixed; top:0; left:0; right:0; height:76px; z-index:30; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 max(24px, calc((100vw - var(--max))/2)); border-bottom:1px solid transparent; transition:.35s ease; }
.site-header.scrolled { background:rgba(5,8,7,.74); backdrop-filter:blur(20px); border-color:var(--line); }
.brand { justify-self:start; display:flex; align-items:center; gap:11px; font-weight:700; letter-spacing:-.02em; }
.brand-seal { width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(232,201,121,.45); color:var(--gold); font:700 11px/1 "JetBrains Mono",monospace; letter-spacing:-.04em; transform:rotate(-4deg); box-shadow:inset 0 0 18px rgba(232,201,121,.08); }
.brand-text { font-size:15px; }
.desktop-nav { display:flex; gap:30px; font:500 12px/1 "JetBrains Mono",monospace; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
.desktop-nav a { position:relative; transition:.25s; }
.desktop-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-8px; height:1px; background:var(--jade); transition:.25s; }
.desktop-nav a:hover,.desktop-nav a.active { color:var(--text); }
.desktop-nav a:hover::after,.desktop-nav a.active::after { right:0; }
.resume-chip { justify-self:end; border:1px solid var(--line); background:rgba(255,255,255,.025); border-radius:999px; padding:10px 14px; font:500 12px/1 "JetBrains Mono",monospace; transition:.25s; }
.resume-chip:hover { border-color:rgba(87,230,167,.55); transform:translateY(-2px); box-shadow:0 8px 30px rgba(87,230,167,.08); }
.menu-button { display:none; justify-self:end; width:42px; height:42px; border:1px solid var(--line); background:rgba(255,255,255,.03); border-radius:50%; padding:0; }
.menu-button span { display:block; width:16px; height:1px; background:var(--text); margin:5px auto; transition:.25s; }
.mobile-menu { position:fixed; inset:76px 0 auto; z-index:29; background:rgba(5,8,7,.95); backdrop-filter:blur(20px); padding:20px 24px 30px; transform:translateY(-130%); transition:.35s; display:grid; gap:18px; border-bottom:1px solid var(--line); }
.mobile-menu.open { transform:translateY(0); }
.mobile-menu a { font-size:28px; font-weight:600; }
main { position:relative; z-index:4; }
.section { width:min(var(--max), calc(100% - 48px)); margin:0 auto; position:relative; }
.hero { min-height:100svh; display:grid; grid-template-columns:minmax(0,1.04fr) minmax(300px,0.96fr); align-items:center; gap:clamp(40px,5vw,70px); padding:130px 0 90px; }
.hero-copy { max-width:690px; min-width:0; overflow:visible; }
.eyebrow { margin:0 0 19px; font:500 12px/1.4 "JetBrains Mono",monospace; text-transform:uppercase; letter-spacing:.14em; color:var(--jade); }
.status-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--jade); margin-right:9px; box-shadow:0 0 0 0 rgba(87,230,167,.5); animation:statusPulse 2.2s infinite; }
@keyframes statusPulse { 70% { box-shadow:0 0 0 10px rgba(87,230,167,0); } 100% { box-shadow:0 0 0 0 rgba(87,230,167,0); } }
h1 { font-size:clamp(58px,7vw,104px); line-height:.92; letter-spacing:-.065em; margin:0; font-weight:600; }
h1 .muted { color:#78867e; font-weight:400; }
.hero-role { margin:26px 0 6px; font-size:clamp(22px,2.3vw,34px); letter-spacing:-.035em; }
.hero-role-line { margin:0 0 18px; font-size:clamp(22px,2.3vw,34px); letter-spacing:-.035em; overflow:visible; }
.type-line { position:relative; display:inline-grid; vertical-align:bottom; }
.type-sizer { grid-area:1/1; visibility:hidden; white-space:nowrap; pointer-events:none; user-select:none; font:inherit; letter-spacing:inherit; }
.type-target { grid-area:1/1; color:var(--jade-bright); white-space:nowrap; align-self:start; justify-self:start; }
.type-target::after { content:""; display:inline-block; width:2px; height:.85em; background:var(--jade); margin-left:5px; vertical-align:-.08em; animation:blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
.hero-summary { max-width:620px; color:#a8b7af; font-size:18px; line-height:1.72; margin:0; }
.hero-actions,.contact-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:34px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:49px; padding:0 20px; border-radius:3px; font-weight:600; font-size:14px; transition:.28s; border:1px solid var(--line); }
.button.primary { color:#04100b; background:var(--jade); border-color:var(--jade); }
.button.primary:hover { background:var(--jade-bright); transform:translateY(-3px); box-shadow:0 16px 40px rgba(87,230,167,.19); }
.button.secondary { background:rgba(255,255,255,.025); }
.button.secondary:hover { border-color:rgba(87,230,167,.55); transform:translateY(-3px); }
.hero-meta { display:flex; flex-wrap:wrap; gap:14px 28px; margin-top:42px; color:#75877e; font:400 11px/1.4 "JetBrains Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }
.hero-meta span { position:relative; }
.hero-meta span:not(:last-child)::after { content:"·"; position:absolute; right:-17px; color:var(--jade); }
/* The emblem is a 3D-transformed (perspective + preserve-3d) subtree. Keep it
   and all its decorative children pointer-transparent so hover events reliably
   reach the .hero container — Safari otherwise drops pointermove to the ancestor
   once the cursor is over this 3D context, which broke continuous tracking. */
.cosmic-emblem, .galaxy-stage, #galaxy-canvas, .galaxy-halo, .galaxy-label { pointer-events:none; }
.cosmic-emblem { min-height:580px; display:grid; place-items:center; perspective:1000px; min-width:300px; }
.galaxy-stage { position:relative; width:min(100%,520px); aspect-ratio:1; transform-style:preserve-3d; transition:transform .22s ease-out, opacity .4s ease; isolation:isolate; will-change:transform, opacity; }
.galaxy-stage.pointer-driven { transition:opacity .4s ease; }
.galaxy-stage::before { content:""; position:absolute; inset:0; border-radius:50%; z-index:0; background:
  radial-gradient(circle at 50% 50%, rgba(255,240,210,.22) 0%, rgba(255,200,120,.1) 8%, rgba(130,90,210,.08) 22%, rgba(40,30,80,.04) 45%, transparent 68%); }
#galaxy-canvas { position:absolute; inset:0; width:100%; height:100%; border-radius:50%; z-index:1; display:block; }
.galaxy-halo { position:absolute; inset:-12%; border-radius:50%; pointer-events:none; z-index:0; background:
  radial-gradient(circle at 50% 50%, rgba(255,230,180,.22) 0%, rgba(255,180,80,.1) 14%, rgba(140,100,220,.07) 30%, transparent 65%);
  animation:galaxyHaloPulse 5s ease-in-out infinite; filter:blur(4px); }
@keyframes galaxyHaloPulse { 50% { opacity:.75; transform:scale(1.03); } }
.galaxy-label { position:absolute; padding:7px 10px; border:1px solid rgba(167,180,255,.14); background:rgba(5,8,7,.62); color:#8a9ab8; font:500 8px/1 "JetBrains Mono",monospace; letter-spacing:.12em; backdrop-filter:blur(6px); z-index:2; will-change:translate; }
.label-a { left:-4%; top:16%; }.label-b { right:-4%; top:34%; }.label-c { right:4%; bottom:12%; }.label-d { left:2%; bottom:26%; }
.scroll-cue { position:absolute; left:0; bottom:28px; display:flex; align-items:center; gap:12px; color:#708077; font:500 9px/1 "JetBrains Mono",monospace; text-transform:uppercase; letter-spacing:.18em; writing-mode:vertical-rl; }
.scroll-cue span { width:1px; height:50px; background:linear-gradient(var(--jade),transparent); animation:scrollCue 2s ease-in-out infinite; }
@keyframes scrollCue { 50% { transform:scaleY(.55); transform-origin:top; } }
.content-section { padding:145px 0; border-top:1px solid var(--line); }
.section-index { position:absolute; top:148px; right:0; color:#617168; font:500 10px/1 "JetBrains Mono",monospace; letter-spacing:.15em; transition:color .5s ease, text-shadow .5s ease; }
/* Section highlight when scrolled into view */
.content-section::after { content:""; position:absolute; top:-1px; left:0; width:0; height:2px; background:linear-gradient(90deg,var(--jade),transparent); box-shadow:0 0 12px rgba(87,230,167,.45); transition:width .8s cubic-bezier(.2,.8,.2,1); pointer-events:none; }
.content-section.in-view::after { width:140px; }
.content-section.in-view .section-index { color:var(--jade); text-shadow:0 0 14px rgba(87,230,167,.55); }
.section-heading { max-width:820px; margin-bottom:72px; }
h2 { margin:0; font-size:clamp(38px,5vw,70px); line-height:1.04; letter-spacing:-.055em; font-weight:550; }
h3 { margin:0; font-size:24px; letter-spacing:-.025em; }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; }
.about-copy p { color:#94a79d; line-height:1.8; font-size:17px; margin:0 0 22px; }
.about-copy .lead { color:#dfe9e3; font-size:23px; line-height:1.55; letter-spacing:-.02em; }
.signal-panel { border:1px solid var(--line); background:linear-gradient(145deg,rgba(10,18,15,.86),rgba(5,9,7,.68)); box-shadow:var(--shadow); overflow:hidden; }
.signal-top { height:44px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 16px; color:#74867c; font:500 10px/1 "JetBrains Mono",monospace; }
.window-dots { color:#415048; letter-spacing:5px; }
pre { margin:0; padding:28px 28px 14px; overflow:auto; font:400 13px/1.8 "JetBrains Mono",monospace; color:#b6c6bd; }
.code-key { color:#c48bdd; }.code-prop { color:#74d2ee; }.code-string { color:#8fe1a4; }
.metric-row { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.metric-row div { padding:21px 18px; border-right:1px solid var(--line); }
.metric-row div:last-child { border:0; }
.metric-row strong { display:block; font-size:20px; color:var(--jade-bright); }
.metric-row span { display:block; margin-top:5px; color:#708178; font:400 9px/1.4 "JetBrains Mono",monospace; text-transform:uppercase; }
.skills-marquee { margin-top:80px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.marquee-track { display:flex; width:max-content; animation:marquee 34s linear infinite; }
.marquee-track span { padding:18px 25px; color:#8da098; font:500 11px/1 "JetBrains Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }
.marquee-track span::before { content:"✦"; color:var(--jade); margin-right:25px; }
@keyframes marquee { to { transform:translateX(-50%); } }
.education-card { display:grid; grid-template-columns:130px 1fr; gap:34px; padding:36px; border:1px solid var(--line); background:rgba(10,18,15,.62); box-shadow:var(--shadow); transform-style:preserve-3d; }
.school-mark { min-height:130px; display:grid; place-items:center; border:1px solid rgba(232,201,121,.25); background:radial-gradient(circle,rgba(232,201,121,.1),transparent 65%); }
.school-mark span { font:700 62px/1 Georgia,serif; color:var(--gold); text-shadow:0 0 35px rgba(232,201,121,.16); }
.education-title-row,.role-row,.project-top { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }
.education-title-row p,.timeline-content .role-row p { margin:6px 0 0; color:var(--jade); }
.education-title-row time { color:#7d8d84; font:400 11px/1.5 "JetBrains Mono",monospace; white-space:nowrap; }
.education-main > p { color:#91a29a; line-height:1.65; }
.tag-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.tag-row span { border:1px solid var(--line); padding:7px 9px; color:#82968b; font:500 9px/1 "JetBrains Mono",monospace; text-transform:uppercase; letter-spacing:.05em; background:rgba(255,255,255,.018); }
.timeline { position:relative; }
.timeline::before { content:""; position:absolute; left:13px; top:0; bottom:0; width:1px; background:linear-gradient(var(--jade),var(--line) 18%,var(--line) 82%,transparent); }
/* Columns: [dot/line 28px] [fixed date 165px] [flexible content]. HTML order is
   marker → meta → content, so these auto-place into cols 1/2/3 correctly. */
.timeline-item { display:grid; grid-template-columns:28px 165px minmax(0,1fr); column-gap:24px; align-items:start; position:relative; padding-bottom:82px; }
.timeline-marker { grid-column:1; position:relative; display:grid; place-items:start center; z-index:1; }
.timeline-marker span { width:11px; height:11px; margin-top:3px; border-radius:50%; background:var(--bg); border:2px solid var(--jade); box-shadow:0 0 0 8px rgba(87,230,167,.07),0 0 20px rgba(87,230,167,.25); }
.timeline-meta { grid-column:2; position:static; width:auto; min-width:0; margin:0; padding-top:2px; text-align:left; color:#718077; font:400 10px/1.45 "JetBrains Mono",monospace; text-transform:uppercase; }
/* Date range stays on ONE horizontal line; never break characters/words. */
.timeline-date { display:block; white-space:nowrap; word-break:normal; overflow-wrap:normal; writing-mode:horizontal-tb; }
.timeline-date time { white-space:nowrap; }
.timeline-location { display:block; margin-top:6px; }
.timeline-content { grid-column:3; position:static; min-width:0; width:auto; margin:0; padding:0; max-width:760px; }
.role-row { align-items:center; }
.role-row h3 { line-height:1.2; }
.role-badge { color:#07100c; background:var(--jade); padding:6px 8px; font:600 8px/1 "JetBrains Mono",monospace; letter-spacing:.08em; }
.timeline-content > p { color:#a1b2a9; line-height:1.75; font-size:16px; }
.timeline-content ul { margin:18px 0 0; padding:0; list-style:none; color:#899c92; line-height:1.7; }
.timeline-content li { position:relative; padding-left:20px; margin:8px 0; }
.timeline-content li::before { content:"↳"; position:absolute; left:0; color:var(--jade); }
.projects-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.project-card { position:relative; min-height:440px; padding:30px; overflow:hidden; border:1px solid var(--line); background:linear-gradient(145deg,rgba(12,21,17,.84),rgba(7,11,9,.75)); box-shadow:var(--shadow); transform-style:preserve-3d; display:flex; flex-direction:column; justify-content:space-between; }
.project-card.featured { grid-column:1/-1; min-height:525px; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:50px; }
.project-card::after { content:""; position:absolute; inset:auto -20% -55% 20%; height:60%; background:radial-gradient(ellipse,rgba(87,230,167,.1),transparent 65%); pointer-events:none; }
.project-top { color:#718279; font:500 9px/1 "JetBrains Mono",monospace; letter-spacing:.1em; text-transform:uppercase; }
.project-copy h3 { margin-top:26px; font-size:clamp(25px,3vw,40px); max-width:650px; }
.project-copy > p { color:#93a69c; line-height:1.72; font-size:15px; max-width:690px; }
.project-number { position:absolute; right:24px; top:20px; font:500 70px/1 "JetBrains Mono",monospace; color:rgba(255,255,255,.035); }
.project-visual { position:relative; min-height:390px; border:1px solid rgba(87,230,167,.12); background:radial-gradient(circle at 50% 50%,rgba(87,230,167,.08),transparent 55%),linear-gradient(rgba(87,230,167,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(87,230,167,.025) 1px,transparent 1px); background-size:auto,28px 28px,28px 28px; overflow:hidden; }
.agent-node { position:absolute; border:1px solid rgba(143,255,208,.35); background:rgba(5,13,9,.88); padding:10px 13px; color:#bde9d4; font:500 9px/1 "JetBrains Mono",monospace; z-index:2; box-shadow:0 0 30px rgba(87,230,167,.06); }
.node-input{left:7%;top:46%}.node-research{left:26%;top:20%}.node-build{left:47%;top:49%}.node-test{left:65%;top:22%}.node-pr{right:6%;top:53%;border-color:rgba(232,201,121,.5);color:var(--gold)}
.agent-line { position:absolute; height:1px; background:linear-gradient(90deg,var(--jade),rgba(87,230,167,.12)); transform-origin:left; opacity:.65; }
.l1{width:28%;left:14%;top:47%;transform:rotate(-31deg)}.l2{width:27%;left:34%;top:28%;transform:rotate(29deg)}.l3{width:24%;left:55%;top:50%;transform:rotate(-31deg)}.l4{width:25%;left:73%;top:30%;transform:rotate(32deg)}
.pulse { position:absolute; width:7px; height:7px; border-radius:50%; background:var(--jade-bright); box-shadow:0 0 16px var(--jade); animation:nodePulse 2.4s infinite; }
.p1{left:37%;top:33%}.p2{left:59%;top:41%;animation-delay:.7s}.p3{left:79%;top:38%;animation-delay:1.3s}
@keyframes nodePulse { 0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:1;transform:scale(1.4)} }
.mini-ui,.terminal-visual,.chat-visual,.tetris-visual,.lru-visual,.mock-visual { margin-top:40px; border:1px solid var(--line); background:rgba(2,7,5,.66); padding:16px; position:relative; z-index:1; }
.tetris-visual { display:flex; justify-content:center; align-items:center; }
.tetris-board { display:block; border:1px solid rgba(87,230,167,.12); background:rgba(3,8,6,.6); border-radius:2px; }
.lru-visual { display:flex; justify-content:center; align-items:center; }
.lru-board,.mock-visual canvas { display:block; width:100%; }
.mini-search { border:1px solid var(--line); color:#65766d; padding:10px; font:400 9px/1 "JetBrains Mono",monospace; }
.mini-result { display:flex; justify-content:space-between; padding:12px 4px; border-bottom:1px solid var(--line); color:#8da097; font-size:12px; }
.mini-result b { color:var(--jade); }
.terminal-visual { display:grid; gap:10px; font:400 10px/1.4 "JetBrains Mono",monospace; color:#71827a; }
.terminal-visual .ok { color:#80dba9; }.cursor { color:var(--jade); animation:blink 1s infinite; }
.chat-visual { display:grid; gap:14px; }
.chat-a,.chat-b { max-width:82%; padding:12px; font-size:11px; line-height:1.45; }
.chat-a { justify-self:end; background:rgba(87,230,167,.12); border:1px solid rgba(87,230,167,.2); }
.chat-b { background:rgba(255,255,255,.035); border:1px solid var(--line); color:#93a49b; }
.contact-section { min-height:85vh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.contact-copy { position:relative; z-index:2; max-width:850px; }
.contact-copy p:not(.eyebrow) { max-width:650px; color:#8fa299; font-size:18px; line-height:1.7; }
.contact-orbit { position:absolute; width:620px; height:620px; right:-160px; top:50%; transform:translateY(-50%); border:1px solid rgba(87,230,167,.1); border-radius:50%; animation:contactSpin 40s linear infinite; }
.contact-orbit::before,.contact-orbit::after { content:""; position:absolute; border-radius:50%; border:1px dashed rgba(232,201,121,.1); inset:16%; }.contact-orbit::after{inset:33%;border-style:solid;border-color:rgba(87,230,167,.08)}
.contact-orbit span { position:absolute; width:8px; height:8px; border-radius:50%; background:rgba(232,201,121,.45); box-shadow:0 0 14px rgba(232,201,121,.25); }
.contact-orbit span:nth-child(1){left:48%;top:-4px}.contact-orbit span:nth-child(2){right:-4px;top:48%}.contact-orbit span:nth-child(3){left:48%;bottom:-4px}.contact-orbit span:nth-child(4){left:-4px;top:48%}
@keyframes contactSpin { to { transform:translateY(-50%) rotate(360deg); } }
footer { position:absolute; bottom:28px; left:0; right:0; display:flex; justify-content:space-between; gap:20px; color:#62736a; font:400 9px/1.4 "JetBrains Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.visible { opacity:1; transform:none; }
.tilt-card { transition:transform .18s ease-out,border-color .25s,box-shadow .25s; }
.tilt-card:hover { border-color:rgba(87,230,167,.32); box-shadow:0 30px 90px rgba(0,0,0,.5),0 0 50px rgba(87,230,167,.05); }
@media (max-width: 980px) {
  .site-header { grid-template-columns:1fr auto; }
  .desktop-nav,.resume-chip { display:none; }
  .menu-button { display:block; }
  .hero { grid-template-columns:1fr; padding-top:130px; gap:10px; }
  .cosmic-emblem { min-height:460px; order:-1; margin-top:-20px; }
  .galaxy-stage { width:min(82vw,460px); }
  .hero-copy { text-align:center; margin:0 auto; }
  .hero-summary { margin-inline:auto; }
  .hero-actions,.hero-meta { justify-content:center; }
  .scroll-cue { display:none; }
  .about-grid { grid-template-columns:1fr; }
  .project-card.featured { grid-template-columns:1fr; }
  .project-visual { min-height:330px; }
  .contact-orbit { opacity:.55; }
}
@media (max-width: 720px) {
  .section { width:min(100% - 32px,var(--max)); }
  .site-header { padding:0 16px; }
  .brand-text { display:none; }
  .hero { min-height:auto; padding:110px 0 80px; }
  h1 { font-size:clamp(52px,17vw,76px); }
  .hero-role,.hero-role-line { font-size:22px; }
  .cosmic-emblem { min-height:340px; }
  .galaxy-label { display:none; }
  .content-section { padding:100px 0; }
  .section-index { top:103px; }
  .section-heading { margin-bottom:50px; padding-right:40px; }
  h2 { font-size:42px; }
  .metric-row { grid-template-columns:1fr; }
  .metric-row div { border-right:0; border-bottom:1px solid var(--line); }
  .education-card { grid-template-columns:1fr; padding:22px; }
  .school-mark { min-height:90px; }
  .education-title-row,.role-row { flex-direction:column; }
  .timeline::before { left:13px; }
  .timeline-item { grid-template-columns:28px minmax(0,1fr); column-gap:16px; }
  .timeline-marker { grid-column:1; grid-row:1/3; }
  .timeline-meta { grid-column:2; grid-row:1; text-align:left; width:auto; margin-bottom:10px; padding:0; }
  .timeline-content { grid-column:2; grid-row:2; padding:0; }
  .projects-grid { grid-template-columns:1fr; }
  .project-card.featured { grid-column:auto; min-height:auto; }
  .project-card { min-height:420px; padding:22px; }
  .project-visual { min-height:280px; }
  .agent-node { padding:8px; font-size:7px; }
  .contact-section { min-height:760px; }
  .contact-orbit { width:460px; height:460px; right:-260px; top:35%; }
  footer { flex-direction:column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal { opacity:1; transform:none; }
}