/* ---------- tokens ---------- */
:root{
  --bg:#05070b; --sky:radial-gradient(120% 90% at 75% 8%, #0c1426 0%, #070a11 48%, #030509 100%); --vig:radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(0,0,0,.6) 100%); --panel:rgba(11,16,27,.66); --panel-solid:#0b111c; --panel-2:#121a28; --line:#1d2635;
  --ink:#e7edf5; --ink-dim:#8d9bb0; --ink-faint:#6a7790;
  --cyan:#3fe0c9; --cyan-hover:#5ae9d5; --cyan-dim:#1c4a44; --cyan-soft:rgba(63,224,201,.08); --cyan-glow:rgba(63,224,201,.25);
  --on-cyan:#06120f;
  --amber:#ffb454;
  --red:#ff6467;
  --dock-bg:rgba(14,20,32,.88); --shadow:rgba(0,0,0,.7); --scrim:rgba(4,6,10,.55);
  --radius:6px;
  --mono:'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --disp:'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --body:'Inter', ui-sans-serif, system-ui, sans-serif;
  --maxw:1180px;
  --dock-h:68px;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#eef2f7; --sky:linear-gradient(180deg, #f6f9fd 0%, #e8eef6 55%, #dde6f1 100%); --vig:radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(170,190,215,.45) 100%); --panel:rgba(255,255,255,.7); --panel-solid:#ffffff; --panel-2:#e4eaf2; --line:#d3dce8;
  --ink:#0f1a2a; --ink-dim:#44536a; --ink-faint:#5d6b80;
  --cyan:#0a8a7a; --cyan-hover:#0c9e8c; --cyan-dim:#bfe6e0; --cyan-soft:rgba(10,138,122,.09); --cyan-glow:rgba(10,138,122,.22);
  --on-cyan:#ffffff;
  --amber:#a35a00;
  --red:#d6393c;
  --dock-bg:rgba(255,255,255,.9); --shadow:rgba(30,45,70,.25); --scrim:rgba(20,30,48,.35);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:24px; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--body);
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px);
  transition:background-color .35s ease, color .35s ease;
  -webkit-tap-highlight-color:transparent;
}
img{max-width:100%; display:block}
a{color:inherit}
.container{max-width:var(--maxw); margin:0 auto; padding:0 28px}
section{position:relative; padding:96px 0; border-top:1px solid var(--line)}
section:first-of-type{border-top:none}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:0.001s !important; animation-delay:0s !important; animation-iteration-count:1 !important; transition-duration:0.001s !important; scroll-behavior:auto !important}
}

/* ---------- cosmos layers ---------- */
html{background:var(--bg)}
body::before{content:'';position:fixed; inset:0; z-index:-1; background:var(--sky)}
#bg{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}
.vignette{position:fixed; inset:0; z-index:1; pointer-events:none; background:var(--vig)}
.grain{position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.6'/></svg>")}
:root[data-theme="light"] .grain{opacity:.02}

/* ---------- status chip (recurring structural device: every module gets a status line) ---------- */
.statusline{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--ink-faint); margin-bottom:22px}
.dot{width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 3px var(--cyan-dim); flex:none; animation:blink 2.6s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
.statusline b{color:var(--ink-dim); font-weight:500}

h1,h2,h3{font-family:var(--disp); font-weight:600; margin:0; letter-spacing:-0.01em}
.h-sec{font-size:clamp(28px,3.4vw,40px); color:var(--ink); margin-bottom:10px}
.h-sub{color:var(--ink-dim); max-width:56ch; margin-bottom:48px; font-size:16px}

/* ---------- dock: centered, app-style navigation on every screen size ---------- */
main{position:relative; z-index:2; padding-bottom:calc(var(--dock-h) + 36px + env(safe-area-inset-bottom,0px))}
#dock{
  position:fixed; left:50%; transform:translateX(-50%); z-index:50;
  bottom:calc(12px + env(safe-area-inset-bottom,0px));
  width:min(calc(100% - 24px), 440px); height:var(--dock-h);
  display:grid; grid-template-columns:repeat(5,1fr); align-items:center; gap:2px; padding:6px;
  background:var(--dock-bg); border:1px solid var(--line); border-radius:22px;
  box-shadow:0 18px 40px -14px var(--shadow);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.dk{
  appearance:none; background:none; border:0; font:inherit; text-decoration:none; cursor:pointer;
  min-height:52px; border-radius:16px; color:var(--ink-faint);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-family:var(--body); font-size:11px; font-weight:500; letter-spacing:.01em;
  transition:color .2s, background .2s;
}
.dk svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.dk:hover{color:var(--ink)}
.dk.active,.dk[aria-expanded="true"]{color:var(--cyan); background:var(--cyan-soft)}
.dk:focus-visible,#sheet a:focus-visible,.btn:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}
.i-sun{display:none}
:root[data-theme="light"] .i-sun{display:block}
:root[data-theme="light"] .i-moon{display:none}

#scrim{position:fixed; inset:0; z-index:44; background:var(--scrim); opacity:0; transition:opacity .25s ease}
#scrim.show{opacity:1}
#sheet{
  position:fixed; left:50%; z-index:48; width:min(calc(100% - 24px), 440px);
  bottom:calc(var(--dock-h) + 24px + env(safe-area-inset-bottom,0px));
  display:grid; grid-template-columns:repeat(2,1fr); gap:8px; padding:12px;
  background:var(--panel-solid); border:1px solid var(--line); border-radius:22px;
  box-shadow:0 24px 50px -16px var(--shadow);
  transform:translate(-50%,16px) scale(.97); opacity:0; transition:transform .28s cubic-bezier(.2,.9,.3,1), opacity .22s ease;
}
#sheet.show{transform:translate(-50%,0) scale(1); opacity:1}
#sheet[hidden],#scrim[hidden]{display:none}
#sheet a{
  min-height:48px; display:flex; align-items:center; padding:0 16px; border-radius:14px; text-decoration:none;
  font-family:var(--disp); font-weight:500; font-size:15px; color:var(--ink); border:1px solid var(--line);
  transition:border-color .2s, background .2s, color .2s;
}
#sheet a:hover{border-color:var(--cyan-dim)}
#sheet a.active{color:var(--cyan); border-color:var(--cyan); background:var(--cyan-soft)}

/* ---------- hero ---------- */
#hero{min-height:100vh; min-height:100svh; display:flex; align-items:center; border-top:none; padding:72px 0 56px}
.hero-grid{display:grid; grid-template-columns:1.25fr .85fr; gap:56px; align-items:center; width:100%}
.boot{font-family:var(--mono); font-size:13px; color:var(--cyan); margin-bottom:18px; min-height:18px}
.boot .caret{display:inline-block; width:7px; height:14px; background:var(--cyan); margin-left:2px; animation:blink 1s steps(1) infinite; vertical-align:-2px}
.hero-name{font-size:clamp(40px,6vw,76px); line-height:1.04; letter-spacing:-0.02em}
/* name animation: letters rise out of a blur one by one, then a cyan wave keeps passing through them */
.hero-name .w{display:inline-block; white-space:nowrap}
.hero-name .ch{
  display:inline-block; opacity:0; transform:translateY(.55em) rotateX(-70deg); filter:blur(10px); transform-origin:50% 100%;
  animation:chIn .75s cubic-bezier(.2,.9,.25,1) forwards, chWave 5.5s ease-in-out infinite;
  animation-delay:calc(var(--i)*55ms + 150ms), calc(var(--i)*90ms + 2.6s);
}
@keyframes chIn{to{opacity:1; transform:none; filter:blur(0)}}
@keyframes chWave{0%,22%,100%{color:var(--ink); text-shadow:none}10%{color:var(--cyan); text-shadow:0 0 22px var(--cyan-glow)}}
.hero-name .sp{display:inline-block; width:.28em}
.hero-role,.hero-tag,.hero-cta{opacity:0; animation:fadeUp .7s ease forwards}
.hero-role{animation-delay:1s} .hero-tag{animation-delay:1.15s} .hero-cta{animation-delay:1.3s}
@keyframes fadeUp{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
.hero-role{font-family:var(--mono); font-size:clamp(14px,1.6vw,18px); color:var(--amber); margin-top:18px}
.hero-tag{max-width:46ch; color:var(--ink-dim); font-size:18px; margin-top:18px}
.hero-cta{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap}
.btn{font-family:var(--mono); font-size:13px; min-height:46px; padding:12px 20px; border-radius:var(--radius); border:1px solid var(--line); color:var(--ink); text-decoration:none; transition:transform .25s, border-color .25s, background .25s; display:inline-flex; align-items:center; gap:8px}
.btn:hover{transform:translateY(-2px); border-color:var(--cyan)}
.btn.primary{background:var(--cyan); color:var(--on-cyan); border-color:var(--cyan); font-weight:600}
.btn.primary:hover{background:var(--cyan-hover)}

.card3d{perspective:1200px}
.photo-frame{
  position:relative; border:1px solid var(--line); border-radius:6px; overflow:hidden;
  background:var(--panel); transform-style:preserve-3d; transition:transform .12s ease-out;
  box-shadow:0 30px 70px -30px var(--shadow);
}
.photo-frame .bar{display:flex; gap:6px; padding:10px 12px; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:10px; color:var(--ink-faint)}
.photo-frame .bar i{width:8px; height:8px; border-radius:50%; background:var(--line)}
.photo-frame img{width:100%; height:420px; object-fit:cover; object-position:top center; filter:grayscale(.15) contrast(1.05)}
.photo-frame .scan{position:absolute; left:0; right:0; height:40%; top:-40%;
  background:linear-gradient(180deg, transparent 0%, var(--cyan-glow) 50%, transparent 100%);
  animation:scan 5s linear infinite; pointer-events:none}
@keyframes scan{0%{top:-40%}100%{top:110%}}
.photo-frame .cap{padding:10px 14px; font-family:var(--mono); font-size:11px; color:var(--ink-faint); display:flex; justify-content:space-between; border-top:1px solid var(--line)}
.photo-frame .cap b{color:var(--cyan)}
@media(hover:none){.photo-frame{animation:floaty 7s ease-in-out infinite}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ---------- about ---------- */
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px}
.about-grid p{color:var(--ink-dim); font-size:17px}
.about-grid p b{color:var(--ink); font-weight:600}

/* ---------- timeline ---------- */
.tl{position:relative; margin-top:10px}
.tl::before{content:'';position:absolute; left:84px; top:8px; bottom:8px; width:1px; background:var(--line)}
.tl-item{position:relative; display:grid; grid-template-columns:84px 1fr; gap:28px; padding:28px 0; opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease}
.tl-item.in{opacity:1; transform:none}
.tl-yr{font-family:var(--mono); color:var(--ink-faint); font-size:13px; padding-top:4px}
.tl-dot{position:absolute; left:80px; top:32px; width:9px; height:9px; border-radius:50%; background:var(--bg); border:2px solid var(--cyan)}
.tl-card{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:24px 26px}
.tl-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:6px}
.tl-role{font-family:var(--disp); font-size:19px; color:var(--ink)}
.tl-org{font-family:var(--mono); font-size:12px; color:var(--amber)}
.tl-when{font-family:var(--mono); font-size:12px; color:var(--ink-faint)}
.tl-card ul{margin:14px 0 0; padding-left:18px; color:var(--ink-dim); font-size:15px}
.tl-card li{margin-bottom:8px}
.tl-stack{display:flex; flex-wrap:wrap; gap:7px; margin-top:16px}
.chip{font-family:var(--mono); font-size:11px; padding:4px 9px; border:1px solid var(--line); border-radius:20px; color:var(--ink-dim)}

/* ---------- projects ---------- */
.proj-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
#personal-grid{
  grid-auto-flow:column; grid-auto-columns:minmax(280px,360px); grid-template-columns:none;
  overflow-x:auto; overflow-y:hidden; padding:4px 4px 18px; scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain; scrollbar-color:var(--cyan-dim) var(--panel);
}
#personal-grid:focus-visible{outline:2px solid var(--cyan); outline-offset:4px}
#personal-grid .proj{scroll-snap-align:start}
.proj{
  background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:26px; transform-style:preserve-3d;
  transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease; opacity:0; translate:0 24px;
}
.proj.in{opacity:1; translate:0 0; transition:opacity .6s ease, translate .6s ease, transform .35s ease, border-color .35s ease, box-shadow .35s ease}
.proj:hover{border-color:var(--cyan-dim); box-shadow:0 24px 50px -24px var(--cyan-glow)}
.proj .pk{font-family:var(--mono); font-size:11px; color:var(--ink-faint); margin-bottom:14px}
.proj h3{font-size:21px; color:var(--ink)}
.proj .sub{font-family:var(--mono); font-size:12px; color:var(--amber); margin-top:4px}
.proj .what{color:var(--ink-dim); font-size:14.5px; margin:14px 0}
.proj ul{margin:0; padding-left:16px; color:var(--ink-dim); font-size:13.5px}
.proj li{margin-bottom:6px}
.proj .tl-stack{margin-top:16px}
@media(max-width:420px){
  #personal-grid{grid-auto-columns:min(86vw,360px)}
}

/* ---------- stack / platform ---------- */
.stack-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:6px; overflow:hidden}
.stack-col{background:var(--panel); padding:24px 22px}
.stack-col h4{font-family:var(--mono); font-size:12px; color:var(--cyan); letter-spacing:.03em; margin-bottom:18px; padding-bottom:12px; border-bottom:1px solid var(--line)}
.stack-row{margin-bottom:16px}
.stack-row b{display:block; font-size:14.5px; color:var(--ink)}
.stack-row span{display:block; font-size:12px; color:var(--ink-faint); margin-top:2px}

/* ---------- proof ---------- */
.proof-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.proof-card{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:22px}
.proof-k{font-family:var(--mono); font-size:11px; color:var(--amber)}
.proof-card h4{font-size:16.5px; margin-top:8px; color:var(--ink)}
.proof-card .org{font-family:var(--mono); font-size:12px; color:var(--ink-faint); margin-top:4px}
.proof-card p{font-size:13.5px; color:var(--ink-dim); margin-top:10px}

/* ---------- contact ---------- */
#contact{padding-bottom:140px}
.contact-links{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
footer{font-family:var(--mono); font-size:12px; color:var(--ink-faint); text-align:center; padding:30px 0 50px}

/* ---------- glass panels: let the 3D flythrough show through ---------- */
.tl-card, .proj, .skill-card, .about-card, .ai-card, .proof-card, .contact-box, .contact-side, .photo-frame, .edu-card, .hobby{
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
}
@media(max-width:720px){
  /* backdrop-filter is expensive on low-end mobile GPUs; drop to a solid panel there */
  .tl-card, .proj, .skill-card, .about-card, .ai-card, .proof-card, .contact-box, .contact-side, .photo-frame, .edu-card, .hobby{
    background:var(--panel-solid); -webkit-backdrop-filter:none; backdrop-filter:none;
  }
}

/* ---------- education ---------- */
.edu-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.edu-card{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:22px 24px}
.edu-when{font-family:var(--mono); font-size:11px; color:var(--amber)}
.edu-card h4{font-size:16.5px; margin-top:8px; color:var(--ink)}
.edu-deg{font-size:13.5px; color:var(--ink-dim); margin-top:6px}

/* ---------- skill meters ---------- */
.meters{margin-top:36px; display:grid; grid-template-columns:repeat(2,1fr); gap:14px 40px}
.meter-top{display:flex; justify-content:space-between; font-family:var(--mono); font-size:12.5px; color:var(--ink-dim); margin-bottom:6px}
.meter-top b{color:var(--cyan); font-weight:500}
.meter-track{height:6px; border-radius:4px; background:var(--panel-2); border:1px solid var(--line); overflow:hidden}
.meter-fill{height:100%; width:0; background:linear-gradient(90deg, var(--cyan), var(--cyan-hover)); border-radius:4px; transition:width 1.1s cubic-bezier(.2,.8,.2,1)}

/* ---------- hobbies ---------- */
.h-hobby{font-family:var(--disp); font-weight:500; font-size:18px; color:var(--ink-dim); margin:56px 0 24px; max-width:50ch}
.hobby-row{display:flex; flex-wrap:wrap; gap:12px}
.hobby{background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:10px 18px; display:flex; gap:8px; align-items:baseline; font-size:13.5px}
.hobby b{font-family:var(--disp); color:var(--ink)}
.hobby span{color:var(--ink-faint); font-size:12px}

/* ---------- reveal + floating-in-gravity depth ---------- */
.reveal{opacity:0; translate:0 22px; transition:opacity .8s ease, translate .8s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1; translate:0 0}
.fl{transform:perspective(1100px) translate3d(0,var(--fy,0px),0) rotateX(var(--frx,0deg)) rotateY(var(--fry,0deg)); will-change:transform}
.tl-item{position:relative; display:grid; grid-template-columns:84px 1fr; gap:28px; padding:22px 0}
.proj.fl,.proj{transition:opacity .8s ease, translate .8s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .35s ease}
.proj,.tl-card,.about-card,.skill-card,.ai-card,.edu-card,.proof-card,.hobby,.contact-box,.contact-side,.photo-frame{
  box-shadow:0 30px 60px -34px var(--shadow), inset 0 1px 0 rgba(255,255,255,.04)}
.tl::before{background:linear-gradient(180deg, transparent, var(--cyan-dim) 8%, var(--cyan-dim) 92%, transparent)}

/* ---------- new sections ---------- */
.about-grid{gap:22px}
.about-card{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:26px 28px}
.about-card p{color:var(--ink-dim); font-size:16px; margin:0 0 14px}
.about-card p:last-child{margin-bottom:0}
.h-sec-2{margin-top:72px}
.proj .note{font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); margin:16px 0 0}
.skill-grid{display:grid; grid-template-columns:1fr; gap:18px}
.skill-card{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:22px 24px}
.skill-card h4{font-family:var(--mono); font-size:12px; color:var(--cyan); letter-spacing:.03em; padding-bottom:12px; margin-bottom:14px; border-bottom:1px solid var(--line)}
.skill-card .meter{margin-bottom:14px}
.skill-card .meter:last-child{margin-bottom:0}
.skill-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:26px}
.ai-card{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:30px 26px}
.ai-card .h-sec{font-size:clamp(22px,4.6vw,32px); margin-bottom:18px}
.ai-card p{color:var(--ink-dim); font-size:16px; margin:0 0 14px; max-width:78ch}
.ai-grid{display:grid; grid-template-columns:1fr; gap:12px; margin-top:22px}
.ai-pill{border:1px solid var(--line); border-radius:8px; padding:16px 18px; background:var(--cyan-soft)}
.ai-pill b{display:block; font-family:var(--disp); color:var(--ink); margin-bottom:4px}
.ai-pill span{font-size:13.5px; color:var(--ink-dim)}
.hobby-quote{font-family:var(--disp); font-size:clamp(17px,3.4vw,22px); color:var(--ink); max-width:44ch; margin:0 0 26px}
.hobby{align-items:center; flex-wrap:wrap}
.hobby.fav{border-color:var(--cyan-dim)}
.hobby em{font-style:normal; font-family:var(--mono); font-size:10px; color:var(--cyan); letter-spacing:.04em; text-transform:uppercase}
.hero-links{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:26px; opacity:0; animation:fadeUp .7s ease 1.45s forwards}
.hero-links a{font-family:var(--mono); font-size:12.5px; color:var(--ink-dim); text-decoration:none; border-bottom:1px solid var(--line); padding:6px 0; transition:color .2s,border-color .2s}
.hero-links a:hover{color:var(--cyan); border-color:var(--cyan)}

/* contact (same fields and Formspree behaviour as the previous portfolio) */
.contact-grid{display:grid; grid-template-columns:1fr; gap:22px}
.contact-box,.contact-side{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:30px 24px; text-align:left}
.contact-box h3,.contact-side h3{font-size:22px; color:var(--ink)}
.c-sub{color:var(--ink-dim); font-size:15px; margin:10px 0 24px; max-width:none}
.field{margin-bottom:16px}
.field label{display:block; font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); margin-bottom:6px}
.field input,.field textarea{width:100%; font:inherit; font-size:16px; color:var(--ink); background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:12px 14px; min-height:46px; transition:border-color .2s, box-shadow .2s; resize:vertical}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px var(--cyan-soft)}
.contact-box .btn{width:100%; justify-content:center; cursor:pointer}
.contact-box .btn[disabled]{opacity:.6; cursor:wait}
.contact-status{display:none; margin-top:14px; font-size:14px; color:var(--cyan)}
.contact-status.error{color:var(--red)}
.contact-status a{color:inherit; text-decoration:underline}
.c-list{list-style:none; margin:0; padding:0}
.c-list li{padding:14px 0; border-top:1px solid var(--line)}
.c-list small{display:block; font-family:var(--mono); font-size:11px; color:var(--ink-faint); margin-bottom:3px}
.c-list a,.c-list span{color:var(--ink); text-decoration:none; word-break:break-word}
.c-list a:hover{color:var(--cyan)}
.no-webgl body::before,body.no-webgl::before{background:var(--sky)}

/* ---------- responsive: phone first, then tablet, then desktop ---------- */
.proj-grid,.proof-grid,.edu-grid,.about-grid{grid-template-columns:1fr}
.container{padding:0 20px}
section{padding:64px 0}
.h-sec{font-size:clamp(26px,7vw,40px)}
.h-sub{margin-bottom:32px}
.hero-grid{grid-template-columns:1fr; gap:36px}
.card3d{max-width:320px; width:100%; margin:0 auto}
.photo-frame img{height:380px}
.tl::before{left:58px}
.tl-item{grid-template-columns:58px 1fr; gap:16px}
.tl-dot{left:54px}
.tl-card{padding:20px 18px}
.hero-cta .btn{flex:1 1 150px; justify-content:center}

/* small tablets & large phones: profile moves to the right of the intro */
@media(min-width:620px){
  .container{padding:0 28px}
  section{padding:80px 0}
  .hero-grid{grid-template-columns:1.2fr .8fr; gap:32px}
  .card3d{max-width:none; margin:0}
  .photo-frame img{height:400px}
  .hero-cta .btn{flex:0 0 auto}
  .proj-grid,.edu-grid,.proof-grid,.skill-grid{grid-template-columns:repeat(2,1fr)}
  .ai-grid{grid-template-columns:repeat(3,1fr)}
  .ai-card{padding:36px 34px}
  .contact-box,.contact-side{padding:36px 32px}
  .about-grid{gap:28px}
  .tl::before{left:84px}
  .tl-item{grid-template-columns:84px 1fr; gap:28px}
  .tl-dot{left:80px}
  .tl-card{padding:24px 26px}
  #sheet{grid-template-columns:repeat(4,1fr); width:min(calc(100% - 24px), 520px)}
  #dock{width:min(calc(100% - 24px), 480px)}
}
@media(min-width:860px){
  .hero-grid{grid-template-columns:1.25fr .85fr; gap:56px}
  .photo-frame img{height:420px}
  .about-grid{grid-template-columns:1fr 1fr; gap:60px}
  .contact-grid{grid-template-columns:1.25fr 1fr}
}
@media(min-width:1020px){
  section{padding:96px 0}
  .proj-grid{grid-template-columns:repeat(3,1fr)}
  .proof-grid{grid-template-columns:repeat(3,1fr)}
  .skill-grid{grid-template-columns:repeat(3,1fr)}
}
/* backdrop blur is costly on phones: solid panels there */
@media(max-width:720px){
  #dock{-webkit-backdrop-filter:none; backdrop-filter:none; background:var(--panel-solid)}
}
/* short landscape phones: don't force a full-height hero */
@media(max-height:560px){ #hero{min-height:auto} }

/* ---------- lens flare ghosts, and the fallback when WebGL is unavailable ---------- */
.fg{position:fixed; left:0; top:0; z-index:1; pointer-events:none; border-radius:50%; mix-blend-mode:screen; opacity:0; will-change:transform,opacity}
:root[data-theme="light"] .fg{display:none}
body.no-webgl::after{
  content:''; position:fixed; z-index:0; pointer-events:none; width:72vmin; height:72vmin; right:-16vmin; bottom:-20vmin; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.12), transparent 50%), url(../assets/earth/day_1k.jpg) 30% 50%/220% auto no-repeat, #05070b;
  box-shadow:inset -9vmin -6vmin 12vmin rgba(0,0,0,.92), 0 0 7vmin rgba(90,150,255,.28);
}
#bg{display:block}
body.no-webgl #bg{display:none}
/* older browsers without the inset shorthand */
@supports not (inset:0){
  body::before,.vignette,.grain,#scrim{top:0; right:0; bottom:0; left:0}
}
@media (prefers-reduced-motion: reduce){ .fg{display:none} .fl{transform:none !important} }