/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --ink:        #0D1B24;
  --ink-2:      #142631;
  --ink-3:      #1B3441;
  --paper:      #ECEEE7;
  --paper-dim:  #DDE0D6;
  --text-dark:  #16242C;
  --text-light: #E9EEF0;
  --muted-dark: #4C5E66;
  --muted-light:#93AAB4;
  --teal:       #4FC1B8;
  --teal-dim:   #2E7A74;
  --amber:      #E8A33D;

  --serif: "Fraunces", "Georgia", serif;
  --sans:  "Inter", system-ui, -apple-system, sans-serif;
  --mono:  "JetBrains Mono", "SFMono-Regular", monospace;

  --section-pad: clamp(4rem, 9vw, 8rem);
  --edge: clamp(1.5rem, 6vw, 6rem);
  --radius: 4px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--text-dark);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.mono{ font-family:var(--mono); letter-spacing:0.02em; }

h1,h2,h3{ font-family:var(--serif); margin:0; font-weight:500; color:inherit; }

a{ color:inherit; text-decoration:none; }

img{ max-width:100%; display:block; }

::selection{ background:var(--teal); color:var(--ink); }

/* focus visibility */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
}

/* ============================================================
   AMBIENT TEXTURE
   ============================================================ */
.noise-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:500;
  opacity:0.025; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scan-line{
  position:fixed; left:0; right:0; top:0; height:2px; z-index:501; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--teal), transparent);
  opacity:0; transform:translateY(0);
}

/* ============================================================
   NAV
   ============================================================ */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem var(--edge);
  background:rgba(236,238,231,0.78);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(22,36,44,0.08);
  transition:background 0.3s ease, border-color 0.3s ease;
}
.site-nav.on-dark{
  background:rgba(13,27,36,0.6);
  border-bottom-color:rgba(233,238,240,0.1);
}
.nav-mark{
  font-family:var(--mono); font-weight:600; font-size:1rem;
  letter-spacing:0.03em;
}
.site-nav.on-dark .nav-mark{ color:var(--text-light); }
.nav-mark-sub{ color:var(--teal-dim); }
.site-nav.on-dark .nav-mark-sub{ color:var(--teal); }

.nav-links{ display:flex; gap:2.1rem; }
.nav-links a{
  position:relative; font-family:var(--mono); font-size:0.82rem; color:var(--muted-dark);
  transition:color 0.2s ease;
}
.site-nav.on-dark .nav-links a{ color:var(--muted-light); }
.nav-links a::before{
  content:attr(data-label); color:var(--amber); margin-right:0.4em; font-size:0.75em; opacity:0.85;
}
.nav-links a:hover, .nav-links a.active{ color:var(--teal-dim); }
.site-nav.on-dark .nav-links a:hover, .site-nav.on-dark .nav-links a.active{ color:var(--teal); }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:0.4rem; }
.nav-toggle span{ width:22px; height:2px; background:var(--text-dark); display:block; }
.site-nav.on-dark .nav-toggle span{ background:var(--text-light); }

@media (max-width:840px){
  .nav-links{
    position:fixed; inset:0 0 0 auto; top:0; height:100vh; width:min(78vw,320px);
    background:var(--ink); flex-direction:column; justify-content:center; gap:1.6rem;
    padding:2rem; transform:translateX(100%); transition:transform 0.35s ease;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ color:var(--muted-light); font-size:1rem; }
  .nav-toggle{ display:flex; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100vh; overflow:hidden;
  background:radial-gradient(ellipse at 20% 0%, var(--ink-3), var(--ink) 65%);
  color:var(--text-light);
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--section-pad) + 4rem) var(--edge) 2rem;
}
.hero-grid{
  position:absolute; inset:0; opacity:0.5;
  background-image:
    linear-gradient(rgba(233,238,240,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233,238,240,0.05) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(to bottom, black, transparent 85%);
}
.hero-inner{ position:relative; z-index:2; max-width:760px; }
.eyebrow{ color:var(--teal); font-size:0.82rem; margin:0 0 1rem; text-transform:lowercase; }
.hero-title{
  font-size:clamp(2.6rem, 7vw, 5.4rem); line-height:1.02; font-weight:500;
  margin-bottom:1.4rem;
}
.hero-title-accent{ color:var(--teal); font-style:italic; font-weight:400; }
.hero-sub{
  max-width:540px; color:var(--muted-light); font-size:1.05rem; margin:0 0 2.2rem;
}
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2rem; }
.btn{
  font-family:var(--mono); font-size:0.85rem; padding:0.85rem 1.6rem; border-radius:var(--radius);
  border:1px solid transparent; transition:all 0.2s ease; display:inline-block;
}
.btn-primary{ background:var(--teal); color:var(--ink); }
.btn-primary:hover{ background:#65D2C9; }
.btn-ghost{ border-color:rgba(233,238,240,0.3); color:var(--text-light); }
.btn-ghost:hover{ border-color:var(--teal); color:var(--teal); }

.hero-meta{ display:flex; flex-wrap:wrap; gap:0.6rem; color:var(--muted-light); font-size:0.8rem; }
.hero-meta .dot{ color:var(--teal-dim); }

.spectrum-wrap{
  position:relative; z-index:2; margin-top:auto; padding-top:2rem;
}
.spectrum-svg{ width:100%; height:clamp(120px,22vw,220px); display:block; }
.spectrum-line{ stroke:var(--teal); stroke-width:2; }
.spectrum-fill{ opacity:0.9; }
.spectrum-cursor{ stroke:var(--amber); stroke-width:1; opacity:0.85; }
.spectrum-axis{
  display:flex; justify-content:space-between; color:var(--muted-light);
  font-size:0.72rem; padding:0.6rem 0.2rem 0; border-top:1px solid rgba(233,238,240,0.12);
}
.scroll-cue{
  position:absolute; bottom:1.4rem; right:var(--edge); z-index:2;
  color:var(--muted-light); font-size:0.75rem; opacity:0.8;
}

/* ============================================================
   SECTIONS — SHARED
   ============================================================ */
.section{ padding:var(--section-pad) var(--edge); }
.section-head{ max-width:760px; margin-bottom:clamp(2.5rem,6vw,4.5rem); }
.section-title{
  font-size:clamp(1.9rem, 4vw, 3rem); line-height:1.12; margin-top:0.6rem;
}
.section .eyebrow{ color:var(--teal-dim); }

/* ============================================================
   ABOUT
   ============================================================ */
.about-body{ display:grid; grid-template-columns:260px 1fr; gap:clamp(2rem,6vw,5rem); align-items:start; }
.about-photo{ position:relative; }
.about-photo img{
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius);
  filter:grayscale(0.15) contrast(1.03);
  border:1px solid rgba(22,36,44,0.1);
}
.photo-tag{
  position:absolute; bottom:-0.8rem; left:0.8rem; background:var(--ink); color:var(--teal);
  font-size:0.7rem; padding:0.3rem 0.6rem; border-radius:2px;
}
.about-text p{ color:var(--muted-dark); max-width:620px; }
.about-text strong{ color:var(--text-dark); font-weight:600; }
.about-stats{ display:flex; gap:clamp(1.5rem,4vw,3rem); margin-top:2rem; flex-wrap:wrap; }
.stat{ display:flex; flex-direction:column; }
.stat-num{ font-family:var(--serif); font-size:2.1rem; color:var(--teal-dim); }
.stat-label{ font-size:0.72rem; color:var(--muted-dark); margin-top:0.2rem; }

@media (max-width:720px){
  .about-body{ grid-template-columns:1fr; }
  .about-photo{ max-width:220px; }
}

/* ============================================================
   EDUCATION / TIMELINE
   ============================================================ */
.timeline{ position:relative; }
.timeline-curve{ width:100%; height:100px; margin-bottom:1rem; }
.curve-path{ stroke:var(--amber); stroke-width:2; opacity:0.6; }

.timeline-item{
  display:grid; grid-template-columns:160px 1fr; gap:2rem;
  padding:2rem 0; border-top:1px solid rgba(22,36,44,0.12);
}
.timeline-item:first-of-type{ border-top:1px solid rgba(22,36,44,0.12); }
.timeline-marker{ color:var(--teal-dim); font-size:0.85rem; padding-top:0.2rem; }
.timeline-content h3{ font-size:1.4rem; margin-bottom:0.3rem; }
.timeline-org{ color:var(--muted-dark); font-size:0.9rem; margin:0 0 0.9rem; }
.timeline-content p{ color:var(--muted-dark); max-width:680px; }
.timeline-tags{ display:flex; gap:0.6rem; flex-wrap:wrap; margin-top:1rem; }
.timeline-tags span{
  font-size:0.72rem; padding:0.3rem 0.6rem; border:1px solid rgba(22,36,44,0.18); border-radius:2px;
  color:var(--muted-dark);
}

@media (max-width:640px){
  .timeline-item{ grid-template-columns:1fr; gap:0.6rem; }
}

/* ============================================================
   EXPERIENCE
   ============================================================ */
.exp-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.5rem; }
.exp-card{
  background:var(--ink); color:var(--text-light);
  padding:1.8rem; border-radius:var(--radius);
  border:1px solid rgba(233,238,240,0.08);
  transition:transform 0.25s ease, border-color 0.25s ease;
}
.exp-card:hover{ transform:translateY(-4px); border-color:var(--teal-dim); }
.exp-date{ color:var(--amber); font-size:0.75rem; margin-bottom:0.6rem; }
.exp-card h3{ font-size:1.2rem; margin-bottom:0.25rem; }
.exp-org{ color:var(--muted-light); font-size:0.85rem; margin:0 0 0.9rem; }
.exp-card p{ font-size:0.92rem; color:#C7D6DA; }
.exp-instruments{
  margin-top:1rem; padding-top:1rem; border-top:1px solid rgba(233,238,240,0.1);
  font-size:0.7rem; color:var(--teal); line-height:1.7;
}

/* ============================================================
   SKILLS
   ============================================================ */
.skills-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:clamp(2rem,4vw,3rem); }
.skill-group h3{
  font-size:0.85rem; color:var(--teal-dim); margin-bottom:1.1rem; text-transform:lowercase;
  padding-bottom:0.6rem; border-bottom:1px solid rgba(22,36,44,0.15);
}
.skill-group ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.55rem; }
.skill-group li{
  font-size:0.92rem; color:var(--muted-dark); position:relative; padding-left:1rem;
}
.skill-group li::before{
  content:"◦"; position:absolute; left:0; color:var(--amber);
}
.lang-bars{ display:flex; flex-direction:column; gap:0.9rem; }
.lang-row{ display:grid; grid-template-columns:70px 1fr 46px; align-items:center; gap:0.7rem; }
.lang-name{ font-size:0.9rem; color:var(--text-dark); }
.bar{ height:5px; background:rgba(22,36,44,0.12); border-radius:3px; overflow:hidden; }
.bar span{ display:block; height:100%; background:var(--teal-dim); border-radius:3px; }
.lang-level{ font-size:0.72rem; color:var(--muted-dark); text-align:right; }

/* ============================================================
   WORK / CREDENTIALS
   ============================================================ */
.work-columns, .cred-columns{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(2rem,4vw,3rem);
}
.work-col h3, .cred-col h3{
  font-size:0.85rem; color:var(--teal-dim); margin-bottom:1.2rem; text-transform:lowercase;
}
.work-col h3 span{ color:var(--amber); }
.work-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.4rem; }
.work-title{ font-family:var(--serif); font-size:1.05rem; margin:0 0 0.25rem; }
.work-meta{ font-size:0.72rem; color:var(--teal-dim); margin:0 0 0.4rem; }
.work-meta a:hover{ color:var(--teal); }
.work-list p:not(.work-title):not(.work-meta){ color:var(--muted-dark); font-size:0.92rem; margin:0; }

.cred-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.9rem; }
.cred-list li{
  display:flex; justify-content:space-between; gap:1rem; font-size:0.92rem; color:var(--muted-dark);
  padding-bottom:0.9rem; border-bottom:1px solid rgba(22,36,44,0.1);
}
.cred-list li span:last-child{ color:var(--muted-dark); font-size:0.75rem; white-space:nowrap; }

.rec{ margin:0 0 1.4rem; padding-left:1rem; border-left:2px solid var(--amber); }
.rec p{ margin:0 0 0.5rem; color:var(--muted-dark); font-style:italic; font-family:var(--serif); font-size:1.02rem; }
.rec cite{ font-style:normal; font-size:0.75rem; color:var(--muted-dark); font-family:var(--mono); }
.cred-member{ font-size:0.78rem; color:var(--teal-dim); margin-top:1rem; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{
  background:var(--ink); color:var(--text-light);
  display:flex; flex-direction:column; justify-content:space-between; min-height:80vh;
}
.contact-title{ color:var(--text-light); }
.contact-sub{ color:var(--muted-light); max-width:520px; margin:1.2rem 0 3rem; }
.contact-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px; background:rgba(233,238,240,0.1); }
.contact-item{
  background:var(--ink); padding:1.5rem; display:flex; flex-direction:column; gap:0.4rem;
  transition:background 0.2s ease;
}
a.contact-item:hover{ background:var(--ink-2); }
.contact-item.static{ cursor:default; }
.contact-label{ font-size:0.7rem; color:var(--teal-dim); }
.contact-value{ font-size:0.95rem; color:var(--text-light); }

.site-footer{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.6rem;
  padding:2rem 0 0; margin-top:3rem; border-top:1px solid rgba(233,238,240,0.1);
  color:var(--muted-light); font-size:0.72rem;
}

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }