/* ─── TOKENS ─── */
:root {
  --bg:        #0B1710;
  --surface:   #111F14;
  --surface-2: #192A1C;
  --copper:    #C07832;
  --copper-lt: #D4975A;
  --copper-dim:#7A4A1E;
  --green-tag: #5A8A6A;
  --green-mid: #2C4830;
  --cream:     #EDE5D6;
  --cream-dim: #A09080;
  --muted:     #6A8070;
  --border:    #263828;
  --border-lt: #34503A;
  --max-w:     1200px;
  --pad-x:     4rem;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body { background:var(--bg); color:var(--cream); font-family:'Instrument Sans',sans-serif; font-weight:300; overflow-x:hidden; cursor:none }

/* ─── CURSOR ─── */
.cursor-dot { width:6px; height:6px; background:var(--copper); border-radius:50%; position:fixed; top:0; left:0; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:width .2s,height .2s,background .2s }
.cursor-dot.big { width:14px; height:14px; background:var(--copper-lt) }
#spotlight { pointer-events:none; position:fixed; inset:0; z-index:9990 }

/* ─── NAV ─── */
nav {
  position:fixed; top:0; left:0; right:0;
  z-index:200;
  background:transparent;
  padding:0 var(--pad-x);
  transition:background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}
nav.scrolled {
  background:rgba(11,23,16,.96);
  box-shadow:0 1px 0 var(--border);
  backdrop-filter:blur(12px);
}
.nav-inner {
  max-width:var(--max-w); margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.75rem 0;
  position:relative; z-index:2;
}
.nav-logo { font-family:'Fraunces',serif; font-size:1.1rem; font-weight:200; font-style:italic; color:var(--cream); text-decoration:none }
.nav-logo span { color:var(--copper) }
.nav-links { display:flex; gap:2.5rem; list-style:none }
.nav-links a { text-decoration:none; color:var(--muted); font-family:'IBM Plex Mono',monospace; font-size:.875rem; letter-spacing:.1em; text-transform:uppercase; transition:color .25s; position:relative }
.nav-links a::after { content:''; position:absolute; bottom:-3px; left:0; width:0; height:1px; background:var(--copper); transition:width .3s }
.nav-links a:hover { color:var(--copper-lt) }
.nav-links a:hover::after { width:100% }

.nav-toggle {
  display:none;
  position:relative;
  z-index:210;
  width:44px; height:44px;
  padding:0;
  border:1px solid var(--border-lt);
  background:rgba(17,31,20,.6);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  gap:5px;
  flex-direction:column;
  transition:border-color .25s,background .25s;
  touch-action:manipulation;
}
.nav-toggle:hover { border-color:var(--copper); background:var(--surface) }
.nav-toggle-bar {
  display:block;
  width:20px;
  height:1.5px;
  background:var(--cream-dim);
  transition:transform .3s ease,opacity .25s ease,background .25s;
}
#site-nav.nav-open .nav-toggle-bar:nth-child(1) { transform:translateY(6.5px) rotate(45deg); background:var(--cream) }
#site-nav.nav-open .nav-toggle-bar:nth-child(2) { opacity:0 }
#site-nav.nav-open .nav-toggle-bar:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); background:var(--cream) }

.nav-backdrop {
  position:fixed; inset:0; z-index:1;
  background:rgba(6,11,8,.65);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s ease, visibility .3s;
}
#site-nav.nav-open .nav-backdrop { opacity:1; visibility:visible; pointer-events:auto }

/* ─── HERO ─── */
.hero-wrap { background:var(--bg); position:relative }
.hero-wrap::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 70% at 65% 50%,rgba(44,72,48,.4),transparent 65%),radial-gradient(ellipse 40% 40% at 15% 80%,rgba(192,120,50,.07),transparent 60%); pointer-events:none }
.hero {
  max-width:var(--max-w); margin:0 auto;
  display:grid; grid-template-columns:1.1fr .9fr;
  padding:18rem var(--pad-x);
  gap:4rem;
  position:relative; z-index:2;
}
.hero-left { display:flex; flex-direction:column; justify-content:center }

.hero-eyebrow { font-family:'IBM Plex Mono',monospace; font-size:.875rem; letter-spacing:.16em; text-transform:uppercase; color:var(--copper); display:flex; align-items:center; gap:.75rem; margin-bottom:2rem; opacity:0; animation:fadeUp .8s .2s forwards }
.hero-eyebrow::before { content:''; display:block; width:2.5rem; height:1px; background:var(--copper) }

h1.hero-name { font-family:'Fraunces',serif; font-size:clamp(3.8rem,6.5vw,8rem); font-weight:200; line-height:.92; letter-spacing:-.03em; margin-bottom:2rem; opacity:0; animation:fadeUp .9s .35s forwards }
h1.hero-name em { font-style:italic; color:var(--copper-lt); display:block }

.hero-bio { font-size:1rem; line-height:1.9; color:var(--cream-dim); max-width:36ch; margin-bottom:3rem; opacity:0; animation:fadeUp .9s .5s forwards }

.hero-actions {
  display:flex;
  gap:1.5rem;
  align-items:center;
  opacity:0;
  animation:fadeUp .9s .65s forwards;
  flex-wrap:wrap;
  grid-column:1 / 2;
}
.btn-primary { display:inline-flex; align-items:center; gap:.75rem; text-decoration:none; color:var(--bg); background:var(--copper); padding:.9rem 2.25rem; font-family:'IBM Plex Mono',monospace; font-size:.875rem; letter-spacing:.08em; text-transform:uppercase; transition:background .25s,gap .25s }
.btn-primary:hover { background:var(--copper-lt); gap:1.25rem }
.btn-ghost { display:inline-flex; align-items:center; gap:.75rem; text-decoration:none; color:var(--cream-dim); font-family:'IBM Plex Mono',monospace; font-size:.875rem; letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid var(--border-lt); padding-bottom:.2rem; transition:color .25s,gap .25s,border-color .25s }
.btn-ghost:hover { color:var(--cream); gap:1.25rem; border-color:var(--copper) }

.hero-right { display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:2.5rem; opacity:0; animation:fadeIn 1s .4s forwards }
.hero-right-inner { display:flex; flex-direction:column; align-items:center; gap:2.5rem; width:max-content; max-width:100% }

.photo-frame { position:relative; width:260px; height:347px; }

.hero-stats { display:flex; gap:0; margin:-0.75rem; border:none; overflow:visible; }
.hstat { flex:1; padding:1.5rem 1.75rem; border-right:1px solid var(--border-lt); position:relative; transition:background-color .3s ease; justify-items:center; text-align:center; }
.hstat:last-child { border-right:none }
.hstat:hover { background:rgba(192,120,50,.06) }
.hstat-val { font-family:'Fraunces',serif; font-size:3rem; font-weight:200; color:var(--cream); line-height:1; display:block; letter-spacing:-.03em; }
.hstat-val span { color:var(--copper); font-size:1.6rem; vertical-align:super; line-height:0 }
.hstat-label { font-family:'IBM Plex Mono',monospace; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); display:block; margin-top:.5rem; }

@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* ─── SHARED ─── */
.section { padding:8rem var(--pad-x) }
.section-inner { max-width:var(--max-w); margin:0 auto }
.s-label { font-family:'IBM Plex Mono',monospace; font-size:.875rem; letter-spacing:.18em; text-transform:uppercase; color:var(--copper); display:flex; align-items:center; gap:.75rem; margin-bottom:.9rem }
.s-label::before { font-family:'Fraunces',serif; font-style:italic; font-size:1.1rem; font-weight:200; color:var(--border-lt); content:attr(data-n) }
h2.s-title { font-family:'Fraunces',serif; font-size:clamp(2.4rem,4vw,4.2rem); font-weight:200; line-height:1.05; letter-spacing:-.025em; margin-bottom:4rem }
h2.s-title em { font-style:italic; color:var(--copper-lt) }

/* ─── ABOUT ─── */
#about { background:var(--surface) }
.about-wrap { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start }
.about-quote { font-family:'Fraunces',serif; font-size:clamp(1.4rem,2.2vw,1.9rem); font-weight:200; font-style:italic; line-height:1.55; color:var(--cream); margin-bottom:2.5rem; letter-spacing:-.01em; position:relative; padding-left:2rem }
.about-quote::before { content:'"'; position:absolute; left:0; top:-.3rem; font-size:3.5rem; line-height:1; color:var(--copper); font-weight:200 }
.about-body p { font-size:1rem; line-height:1.9; color:var(--cream-dim); margin-bottom:1.25rem }
.hobbies-row { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2.5rem }
.hobby { font-family:'IBM Plex Mono',monospace; font-size:.875rem; letter-spacing:.08em; text-transform:uppercase; padding:.4rem 1rem; background:var(--bg); border:1px solid var(--border-lt); color:var(--muted) }
.about-right { display:flex; flex-direction:column; gap:1px; background:var(--border) }
.af { background:var(--surface); display:grid; grid-template-columns:1fr 1.4fr; gap:1rem; padding:1.25rem 2rem; align-items:start; transition:background .3s }
.af:hover { background:var(--surface-2) }
.af-key { font-family:'IBM Plex Mono',monospace; font-size:.875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--copper); padding-top:.1rem }
.af-val { font-family:'Instrument Sans',sans-serif; font-size:1rem; color:var(--cream); line-height:1.65 }

/* ─── SKILLS ─── */
#skills { background:var(--bg) }
.skills-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border) }
.skill-card { background:var(--bg); padding:2.5rem 2.5rem 3rem; position:relative; overflow:hidden; transition:background .3s }
.skill-card:hover { background:var(--surface) }
.skill-card:hover .sk-num { opacity:.07 }
.sk-num { position:absolute; top:1.25rem; right:1.75rem; font-family:'Fraunces',serif; font-size:5rem; font-weight:200; font-style:italic; color:var(--cream); opacity:.03; line-height:1; transition:opacity .4s; user-select:none }
.sk-icon { width:38px; height:38px; border:1px solid var(--border-lt); display:flex; align-items:center; justify-content:center; margin-bottom:1.5rem; color:var(--copper); flex-shrink:0 }
.sk-icon svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }
.sk-name { font-family:'Fraunces',serif; font-size:1.45rem; font-weight:300; color:var(--cream); margin-bottom:.25rem; letter-spacing:-.01em; line-height:1.2 }
.sk-sub { font-family:'IBM Plex Mono',monospace; font-size:.875rem; color:var(--muted); letter-spacing:.06em; margin-bottom:1.5rem }
.sk-tags { display:flex; flex-wrap:wrap; gap:.4rem }
.sk-tag { font-family:'IBM Plex Mono',monospace; font-size:.875rem; letter-spacing:.06em; text-transform:uppercase; padding:.25rem .65rem; border:1px solid var(--border-lt); color:var(--green-tag); transition:border-color .25s,color .25s }
.skill-card:hover .sk-tag { border-color:var(--copper-dim); color:var(--copper-lt) }

/* ─── EXPERIENCE ─── */
#experience { background:var(--surface) }
.exp-grid { display:grid; grid-template-columns:210px 1fr; gap:0 4rem; position:relative }
.exp-grid::before { content:''; position:absolute; left:210px; top:0; bottom:0; width:1px; background:var(--border) }
.exp-year { font-family:'Fraunces',serif; font-size:1rem; font-weight:200; font-style:italic; color:var(--muted); text-align:right; padding-top:.35rem; padding-right:2.5rem; line-height:1.4 }
.exp-year-tag { display:block; font-family:'IBM Plex Mono',monospace; font-size:.875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--copper); font-style:normal; margin-bottom:.2rem }
.exp-body { padding-top:1.25rem; padding-bottom:4rem; border-bottom:1px solid var(--border); margin-bottom:4rem; position:relative }
.exp-body::before { content:''; position:absolute; left:-2.55rem; top:1.8rem; width:7px; height:7px; border:1.5px solid var(--copper); background:var(--surface); border-radius:50%; transform:translateX(-50%) }
.exp-body:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0 }
.exp-company { font-family:'IBM Plex Mono',monospace; font-size:.875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--copper); margin-bottom:.4rem }
.exp-role { font-family:'Fraunces',serif; font-size:1.5rem; font-weight:300; color:var(--cream); letter-spacing:-.01em; margin-bottom:.25rem }
.exp-loc { font-family:'IBM Plex Mono',monospace; font-size:.875rem; color:var(--muted); letter-spacing:.06em; margin-bottom:1.5rem; display:flex; align-items:center; gap:.5rem }
.exp-loc::before { content:'↳'; color:var(--border-lt) }
.exp-pts { list-style:none; display:flex; flex-direction:column; gap:.6rem; width:100% }
.exp-pts li { font-size:1rem; line-height:1.8; color:var(--cream-dim); display:flex; flex-direction:row; align-items:flex-start; gap:.75rem; width:100% }
.exp-pts li::before { content:'◦'; color:var(--copper); flex-shrink:0; line-height:1.8 }

/* ─── TOOLS ─── */
#tools { background:var(--bg) }
.tools-cats { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border); border:1px solid var(--border) }
.tcat { background:var(--bg); padding:2.5rem 3rem; transition:background .3s }
.tcat:hover { background:var(--surface) }
.tcat-head { display:flex; align-items:center; gap:1rem; margin-bottom:1.75rem; padding-bottom:1.25rem; border-bottom:1px solid var(--border) }
.tcat-icon { width:32px; height:32px; background:var(--surface); border:1px solid var(--border-lt); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--copper) }
.tcat-icon svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }
.tcat-title { font-family:'Fraunces',serif; font-size:1.1rem; font-weight:300; color:var(--cream); letter-spacing:-.01em }
.tcat-items { display:flex; flex-wrap:wrap; gap:.5rem }
.titem { font-family:'IBM Plex Mono',monospace; font-size:.875rem; letter-spacing:.06em; text-transform:uppercase; padding:.35rem .9rem; border:1px solid var(--border-lt); color:var(--green-tag); transition:border-color .25s,color .25s }
.tcat:hover .titem { border-color:var(--copper-dim); color:var(--copper-lt) }

/* ─── CONTACT ─── */
#contact { background:var(--bg) }
.contact-layout { display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:start }
.contact-intro p { font-size:1rem; line-height:1.9; color:var(--cream-dim); margin-bottom:2rem }
.contact-tagline { font-size:1rem; line-height:1.9; color:var(--cream-dim); max-width:44ch; margin:0 0 4rem }
.contact-cards { display:flex; flex-direction:column; gap:1px; background:var(--border); border:1px solid var(--border) }
.cc { background:var(--bg); padding:1.5rem 2rem; text-decoration:none; transition:background .3s; display:flex; align-items:center; gap:1.5rem }
.cc:hover { background:var(--surface) }
.cc-icon { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid var(--border-lt); color:var(--copper); transition:border-color .25s; flex-shrink:0 }
.cc:hover .cc-icon { border-color:var(--copper) }
.cc-icon svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }
.cc-text { display:flex; flex-direction:column; gap:.2rem }
.cc-label { font-family:'IBM Plex Mono',monospace; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted) }
.cc-val { font-family:'Instrument Sans',sans-serif; font-size:1rem; color:var(--cream) }

/* ─── PHOTO ─── */
.photo-bracket { position:absolute; width:20px; height:20px; border-color:var(--copper); border-style:solid; border-width:0; }
.photo-bracket.tl { top:0; left:0; border-top-width:2px; border-left-width:2px }
.photo-bracket.tr { top:0; right:0; border-top-width:2px; border-right-width:2px }
.photo-bracket.bl { bottom:0; left:0; border-bottom-width:2px; border-left-width:2px }
.photo-bracket.br { bottom:0; right:0; border-bottom-width:2px; border-right-width:2px }
.photo-inner-rect { position:absolute; inset:8px; background:linear-gradient(160deg,var(--surface-2) 0%,var(--green-mid) 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.75rem; overflow:hidden; }
.photo-inner-rect::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:linear-gradient(to right, var(--copper-dim), var(--copper), var(--copper-dim)); }

/* ─── KV FLOW ─── */
.kv-flow { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-bottom:1.5rem; padding:.75rem 1rem; background:var(--surface); border-left:2px solid var(--copper) }
.kv-step { display:flex; align-items:center; gap:.4rem; font-family:'IBM Plex Mono',monospace; font-size:.875rem; color:var(--cream-dim) }
.kv-dot { width:5px; height:5px; border-radius:50%; background:var(--copper); flex-shrink:0 }
.kv-arrow { color:var(--copper); font-size:.875rem; opacity:.7 }

/* ─── PROJECTS ─── */
#projects { background:var(--surface) }
.projects-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; align-items:stretch }
.proj-card { background:var(--surface); border:1px solid var(--border-lt); display:flex; flex-direction:column; height:100%; min-height:0; cursor:pointer; transition:border-color .3s, transform .3s, box-shadow .3s; }
.proj-card:hover { border-color:var(--copper); transform:translateY(-3px); box-shadow:0 12px 40px rgba(0,0,0,.35); }
.proj-img { width:100%; aspect-ratio:16/10; overflow:hidden; flex-shrink:0; background:var(--surface-2) }
.proj-img img { width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .5s ease; display:block }
.proj-card:hover .proj-img img { transform:scale(1.05) }
.proj-body { padding:1.5rem 1.75rem 1rem; flex:1; display:flex; flex-direction:column; gap:.5rem }
.proj-type { font-family:'IBM Plex Mono',monospace; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--copper) }
.proj-name { font-family:'Fraunces',serif; font-size:1.35rem; font-weight:300; color:var(--cream); letter-spacing:-.01em; line-height:1.2 }
.proj-desc { font-size:.9rem; line-height:1.75; color:var(--cream-dim); flex:1; margin-top:.15rem }
.proj-palette { display:flex; gap:.45rem; margin-top:.35rem; align-items:center }
.proj-swatch { width:14px; height:14px; border-radius:50%; border:1px solid rgba(255,255,255,.1); flex-shrink:0 }
.proj-tags { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.1rem }
.proj-tag { font-family:'IBM Plex Mono',monospace; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; padding:.2rem .6rem; border:1px solid var(--border-lt); color:var(--green-tag) }
.proj-foot { padding:.9rem 1.75rem 1.25rem; border-top:1px solid var(--border); margin-top:auto; display:flex; justify-content:space-between; align-items:center; flex-shrink:0 }
.proj-btn { font-family:'IBM Plex Mono',monospace; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--copper); display:inline-flex; align-items:center; gap:.5rem; transition:gap .25s; background:none; border:none; cursor:pointer; padding:0; }
.proj-card:hover .proj-btn { gap:.85rem }
.proj-badge { font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:.3rem; }
.proj-badge svg { width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.proj-card-more { background:transparent; border:1px dashed var(--border-lt); display:flex; align-items:center; justify-content:center; min-height:280px; cursor:none; text-decoration:none; color:inherit; transition:border-color .3s; }
.proj-card-more:hover { border-color:var(--copper) }
.proj-card-more:hover .pcm-arrow { color:var(--copper-lt) }
.pcm-inner { text-align:center; padding:2rem }
.pcm-arrow { font-family:'Fraunces',serif; font-size:2.8rem; font-weight:200; color:var(--border-lt); display:block; margin-bottom:.75rem; transition:color .3s }
.pcm-label { font-family:'Fraunces',serif; font-size:1.15rem; font-weight:300; color:var(--muted); display:block; margin-bottom:.35rem }

footer { border-top:1px solid var(--border); padding:0 var(--pad-x) }
.footer-inner { max-width:var(--max-w); margin:0 auto; padding:2rem 0; display:flex; justify-content:space-between; align-items:center }
.foot-logo { font-family:'Fraunces',serif; font-size:1rem; font-weight:200; font-style:italic; color:var(--cream); text-decoration:none }
.foot-copy { font-family:'IBM Plex Mono',monospace; font-size:.875rem; color:var(--muted); letter-spacing:.06em }

/* ─── REVEAL ─── */
.rev { opacity:0; transform:translateY(22px); transition:opacity .8s ease,transform .8s ease }
.rev.in { opacity:1; transform:translateY(0) }
.rev-l { opacity:0; transform:translateX(-18px); transition:opacity .8s ease,transform .8s ease }
.rev-l.in { opacity:1; transform:translateX(0) }

/* ─── BREAKPOINTS ─── */
@media (hover:none),(pointer:coarse) {
  body { cursor:auto }
  .cursor-dot { display:none !important }
  #spotlight { display:none !important }
  .proj-card-more { cursor:default }
}
@media(max-width:1100px) {
  .hero { grid-template-columns:1fr; gap:2rem }
  .hero-right {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    margin-top:.5rem;
    opacity:0;
    animation:fadeUp .9s .58s forwards;
  }
  .hero-right-inner { width:100%; max-width:520px; align-items:center }
  .photo-frame { width:240px; height:320px }
  .hero-stats {
    width:100%;
    max-width:520px;
    margin:0;
    overflow:hidden;
    background:rgba(11,23,16,.35);
    backdrop-filter:blur(10px);
  }
  .hstat { padding:1.15rem 1.25rem }
  .hero-actions { grid-column:auto }
  .skills-grid { grid-template-columns:repeat(2,1fr) }
  .tools-cats { grid-template-columns:1fr }
  .projects-grid { grid-template-columns:repeat(2,1fr) }
}
@media(max-width:900px) {
  /* backdrop-filter auf nav erzeugt einen Containing Block → position:fixed bei .nav-links
     wird auf die Leistenhöhe begrenzt (nur 1 Link sichtbar). Auf Mobile ohne Backdrop-Blur. */
  nav.scrolled { backdrop-filter:none }
  .nav-toggle { display:flex }
  .hero { padding:12rem var(--pad-x) 6rem }
  .nav-links {
    position:fixed; top:0; right:0; bottom:0;
    width:min(300px,88vw);
    margin:0; padding:5.25rem 1.5rem 2rem;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(11,23,16,.98);
    backdrop-filter:blur(14px);
    border-left:1px solid var(--border);
    box-shadow:-12px 0 48px rgba(0,0,0,.5);
    transform:translateX(100%);
    transition:transform .35s cubic-bezier(.25,.8,.25,1);
    z-index:3;
    list-style:none;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  #site-nav.nav-open .nav-links { transform:translateX(0) }
  .nav-links li { border-bottom:1px solid var(--border) }
  .nav-links li:last-child { border-bottom:none }
  .nav-links a { display:block; padding:1rem 0 }
  .nav-links a::after { display:none }
}
@media(max-width:768px) {
  :root { --pad-x:1.5rem }
  nav { padding:0 1.5rem }
  .nav-inner { padding:1.25rem 0; gap:1rem }
  .hero { padding:9rem var(--pad-x) 4rem }
  h1.hero-name { font-size:clamp(3rem,12vw,5rem) }
  .hero-bio { max-width:none; margin-bottom:1.25rem }
  .photo-frame { width:200px; height:267px }
  .section { padding:5rem 1.5rem }
  h2.s-title { font-size:clamp(1.65rem,6vw,2rem); margin-bottom:2.5rem }
  .exp-grid { grid-template-columns:1fr; gap:0 }
  .exp-grid::before { display:none }
  .exp-year { text-align:left; padding:0 }
  .exp-year br { display:none }
  .exp-body::before { display:none }
  .exp-body { padding-bottom:3rem; margin-bottom:3rem }
  .about-wrap { grid-template-columns:1fr; gap:3rem }
  .about-quote { padding-left:1.5rem }
  .af { grid-template-columns:1fr; gap:.35rem; padding:1.25rem 1.35rem }
  .kv-flow { flex-direction:column; align-items:flex-start; gap:.65rem }
  .kv-arrow { display:none }
  .contact-layout { grid-template-columns:1fr; gap:3rem }
  .contact-cards { flex-direction:column }
  .cc-val { word-break:break-word }
  .footer-inner { flex-direction:column; gap:.75rem; text-align:center }
  .skills-grid { grid-template-columns:1fr }
  .projects-grid { grid-template-columns:1fr }
  .proj-foot { flex-wrap:wrap; gap:.75rem; align-items:flex-start }
}
@media(max-width:480px) {
  .hero-actions { flex-direction:column; align-items:stretch; gap:1rem }
  .btn-primary,.btn-ghost { width:100%; justify-content:center }
  .tcat { padding:1.75rem 1.25rem }
  .skill-card { padding:2rem 1.35rem 2.25rem }
  .proj-card-more { min-height:220px }
}