/* ===== Tokens ===== */
:root{
  --ink: #101B33;
  --ink-soft: #1B2C52;
  --paper: #F5F2EA;
  --paper-warm: #ECE6D6;
  --gold: #B98A2E;
  --gold-light: #D9B060;
  --text-dim: #5B6272;
  --line: rgba(16,27,51,0.12);
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

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

/* ===== Progress rail ===== */
.progress-rail{ position:fixed; top:0; left:0; width:100%; height:3px; z-index:200; background:transparent; }
.progress-fill{ height:100%; width:0%; background:linear-gradient(90deg, var(--gold), var(--gold-light)); transition:width .1s linear; }

/* ===== Cursor glow ===== */
.cursor-glow{
  position:fixed; top:0; left:0; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(185,138,46,0.10), transparent 70%);
  pointer-events:none; z-index:1; transform:translate(-50%,-50%);
  opacity:0; transition:opacity .4s ease;
}
@media (max-width:860px){ .cursor-glow{ display:none; } }

/* ===== Nav ===== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(20px,5vw,64px);
  background:rgba(245,242,234,0);
  transition:background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.nav.scrolled{
  background:rgba(245,242,234,0.92);
  backdrop-filter:blur(10px);
  padding:14px clamp(20px,5vw,64px);
  box-shadow:0 1px 0 var(--line);
}
.nav-mark{
  font-family:var(--serif); font-weight:600; font-size:1.3rem;
  color:var(--ink); letter-spacing:0.02em;
}
.nav-links{ display:flex; align-items:center; gap:clamp(18px,3vw,36px); font-size:0.92rem; }
.nav-links a{
  position:relative; color:var(--ink-soft); padding:4px 0;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--gold); transition:width .3s var(--ease);
}
.nav-links a:hover::after{ width:100%; }

.lang-switch{
  display:flex; align-items:center; gap:2px;
  border:1px solid var(--line); border-radius:999px; padding:3px;
}
.lang-btn{
  border:none; background:transparent; cursor:pointer;
  font-family:var(--sans); font-size:0.76rem; font-weight:600;
  letter-spacing:0.03em; color:var(--text-dim);
  padding:6px 12px; border-radius:999px;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.lang-btn:hover{ color:var(--ink); }
.lang-btn.active{ background:var(--ink); color:var(--paper); }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; z-index:110; }
.nav-toggle span{ width:24px; height:2px; background:var(--ink); transition:transform .3s var(--ease), opacity .3s var(--ease); }

/* ===== Hero ===== */
.hero{
  position:relative;
  min-height:100vh;
  padding:120px clamp(20px,5vw,64px) 60px;
  display:flex; flex-direction:column; justify-content:center;
  background:var(--paper);
  overflow:hidden;
}
.hero-blob{
  position:absolute; top:-10%; right:-8%; width:52vw; height:52vw; max-width:720px; max-height:720px;
  border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle, rgba(185,138,46,0.16), rgba(185,138,46,0.03) 60%, transparent 72%);
  animation:blobDrift 14s ease-in-out infinite;
}
@keyframes blobDrift{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-3%, 4%) scale(1.08); }
}
.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:clamp(30px,6vw,80px);
  align-items:center; max-width:1240px; margin:0 auto; width:100%;
}
.hero-kicker{
  font-size:0.9rem; color:var(--gold); font-weight:600;
  letter-spacing:0.04em; margin-bottom:18px;
  opacity:0; animation:riseIn .7s var(--ease) forwards; animation-delay:.1s;
}
.hero-title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(2.6rem, 6vw, 4.6rem);
  line-height:1.04; letter-spacing:-0.01em; color:var(--ink);
}
.hero-title .line{
  display:block; overflow:hidden; position:relative;
}
.hero-title .line span, .hero-title .line{ }
.hero-title .line{
  opacity:0; transform:translateY(100%);
  animation:riseIn .8s var(--ease) forwards;
}
.hero-title .line:nth-child(1){ animation-delay:.22s; }
.hero-title .line:nth-child(2){ animation-delay:.36s; color:var(--gold); }

.hero-sub{
  margin-top:26px; max-width:46ch; font-size:1.08rem; color:var(--text-dim);
}
.hero-sub .word{
  display:inline-block; opacity:0; transform:translateY(10px);
  animation:wordIn .5s var(--ease) forwards;
}
@keyframes wordIn{ to{ opacity:1; transform:translateY(0); } }
.hero-actions{
  margin-top:34px; display:flex; gap:16px; flex-wrap:wrap;
  opacity:0; animation:riseIn .7s var(--ease) forwards; animation-delay:.62s;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 30px; border-radius:2px; font-size:0.95rem; font-weight:600;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
  border:1px solid transparent; cursor:pointer;
}
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ background:var(--gold); transform:translateY(-2px); box-shadow:0 10px 24px rgba(185,138,46,0.3); }
.btn-ghost{ border-color:var(--ink); color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); transform:translateY(-2px); }
.btn-large{ padding:17px 40px; font-size:1rem; }

.hero-stats{
  margin-top:56px; display:flex; gap:clamp(24px,4vw,48px);
  opacity:0; animation:riseIn .7s var(--ease) forwards; animation-delay:.74s;
}
.stat{ display:flex; flex-direction:column; }
.stat-num{
  font-family:var(--serif); font-size:2.2rem; font-weight:600; color:var(--ink);
}
.stat-label{ font-size:0.78rem; color:var(--text-dim); margin-top:4px; max-width:12ch; }

/* Portrait */
.hero-portrait{
  position:relative; display:flex; flex-direction:column; align-items:center;
  justify-self:center; align-self:center;
  opacity:0; animation:portraitIn 1s var(--ease) forwards; animation-delay:.3s;
  perspective:900px;
}
.portrait-frame{
  width:min(340px, 78vw); aspect-ratio:3/4; border-radius:18px; overflow:hidden;
  border:1px solid var(--line); position:relative; z-index:2;
  box-shadow:0 30px 60px -20px rgba(16,27,51,0.35);
  transition:transform .25s var(--ease), box-shadow .35s var(--ease);
  transform-style:preserve-3d; will-change:transform;
  animation:floatYFrame 6s ease-in-out infinite;
}
.portrait-frame:hover{ box-shadow:0 36px 70px -18px rgba(16,27,51,0.42); }
.portrait-img{ width:100%; height:100%; object-fit:cover; }
.portrait-ring{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  width:calc(min(340px, 78vw) + 28px); aspect-ratio:3/4; z-index:1; pointer-events:none;
  animation:floatY 6s ease-in-out infinite;
}
.portrait-ring rect{
  fill:none; stroke:var(--gold); stroke-width:1; stroke-dasharray:4 10; stroke-linecap:round;
  transform-origin:center;
}
@keyframes floatY{
  0%,100%{ transform:translateY(0) translateX(-50%); }
  50%{ transform:translateY(-10px) translateX(-50%); }
}
@keyframes floatYFrame{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}
.portrait-dot{
  position:absolute; width:8px; height:8px; border-radius:50%; background:var(--gold);
  z-index:3; opacity:.8;
}
.dot-a{ top:6%; right:2%; animation:dotFloat 5s ease-in-out infinite; }
.dot-b{ bottom:12%; left:-2%; width:6px; height:6px; background:var(--ink); animation:dotFloat 7s ease-in-out infinite .5s; }
.dot-c{ top:44%; right:-4%; width:5px; height:5px; animation:dotFloat 6s ease-in-out infinite 1s; }
@keyframes dotFloat{
  0%,100%{ transform:translate(0,0); opacity:.8; }
  50%{ transform:translate(4px,-10px); opacity:1; }
}
.portrait-caption{
  margin-top:24px; font-size:0.82rem; color:var(--text-dim); letter-spacing:0.03em;
}

.hero-map{ display:none; }

@keyframes riseIn{ to{ opacity:1; transform:translateY(0); } }
@keyframes portraitIn{ from{ opacity:0; transform:scale(.92); } to{ opacity:1; transform:scale(1); } }
@keyframes spinRing{ to{ transform:rotate(360deg); } }

/* ===== Sections shared ===== */
.section{ padding:120px clamp(20px,5vw,64px); }
.section-inner{ max-width:1100px; margin:0 auto; }
.section-title{
  font-family:var(--serif); font-weight:600; font-size:clamp(1.9rem,3.4vw,2.6rem);
  margin-bottom:48px; color:var(--ink);
}
.section-title.light{ color:var(--paper); }

.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* About */
.about{ border-top:1px solid var(--line); }
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); }
.about-lead{
  font-family:var(--serif); font-size:clamp(1.3rem,2.2vw,1.6rem); line-height:1.4; color:var(--ink);
}
.about-body p{ margin-bottom:18px; color:var(--text-dim); font-size:1.02rem; }
.about-body p:last-child{ margin-bottom:0; }

/* Expertise */
.expertise{ background:var(--paper-warm); }
.expertise-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.exp-card{
  background:var(--paper-warm); padding:32px 24px; position:relative; overflow:hidden;
  transition:background .35s var(--ease);
}
.exp-card::before{
  content:''; position:absolute; left:0; top:0; height:2px; width:0; background:var(--gold);
  transition:width .4s var(--ease);
}
.exp-card:hover::before{ width:100%; }
.exp-card:hover{ background:var(--paper); }
.exp-mark{
  display:inline-block; font-family:var(--serif); font-size:0.78rem; font-weight:600;
  color:var(--gold); letter-spacing:0.05em; margin-bottom:14px;
}
.exp-card h3{ font-family:var(--serif); font-size:1.08rem; margin-bottom:8px; line-height:1.3; }
.exp-card p{ font-size:0.88rem; color:var(--text-dim); }

/* Philosophy */
.philosophy{ background:var(--ink); color:var(--paper); position:relative; overflow:hidden; }
.philosophy::before{
  content:'"'; position:absolute; font-family:var(--serif); font-size:32rem; line-height:1;
  color:rgba(217,176,96,0.06); top:-4rem; left:-2rem; pointer-events:none;
}
.philosophy-inner{ position:relative; z-index:1; }
.philosophy-quote{
  font-family:var(--serif); font-weight:500; font-size:clamp(1.6rem,3.4vw,2.4rem);
  line-height:1.35; max-width:22ch; color:var(--paper);
  border-left:2px solid var(--gold); padding-left:28px;
}
.philosophy-note{ margin-top:32px; max-width:52ch; color:rgba(245,242,234,0.7); font-size:1.02rem; }

/* Research */
.research-lead{ font-size:1.08rem; color:var(--text-dim); margin-bottom:24px; }
.research-tags{ display:flex; flex-wrap:wrap; gap:12px; }
.research-tags span{
  padding:10px 20px; border:1px solid var(--line); border-radius:999px;
  font-size:0.88rem; color:var(--ink-soft);
  transition:border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.research-tags span:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }

/* Timeline */
.journey{ border-top:1px solid var(--line); }
.timeline{ position:relative; padding-left:28px; }
.timeline::before{
  content:''; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:var(--line);
}
.tl-item{ position:relative; padding-bottom:44px; }
.tl-item:last-child{ padding-bottom:0; }
.tl-marker{
  position:absolute; left:-28px; top:4px; width:11px; height:11px; border-radius:50%;
  background:var(--paper); border:2px solid var(--gold);
}
.tl-content h3{ font-family:var(--serif); font-size:1.15rem; margin-bottom:6px; }
.tl-content p{ color:var(--text-dim); font-size:0.95rem; }

/* Contact */
.contact{ text-align:center; background:var(--paper-warm); }
.contact-inner{ display:flex; flex-direction:column; align-items:center; }
.contact-text{ color:var(--text-dim); margin-bottom:32px; font-size:1.05rem; }

/* Footer */
.footer{ padding:36px clamp(20px,5vw,64px); text-align:center; font-size:0.82rem; color:var(--text-dim); border-top:1px solid var(--line); }

/* ===== Responsive ===== */
@media (max-width: 860px){
  .hero-grid{ grid-template-columns:1fr; text-align:left; }
  .hero-portrait{ justify-self:start; margin-top:20px; }
  .hero-stats{ flex-wrap:wrap; row-gap:20px; }
  .about-grid{ grid-template-columns:1fr; }
  .expertise-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 640px){
  .nav-links{
    position:fixed; top:0; right:0; height:100vh; width:min(280px,80vw);
    background:var(--paper); flex-direction:column; align-items:flex-start; padding:100px 32px;
    transform:translateX(100%); transition:transform .4s var(--ease);
    box-shadow:-10px 0 30px rgba(0,0,0,0.08);
  }
  .nav-links .lang-switch{ margin-top:12px; }
  .nav-links.open{ transform:translateX(0); }
  .nav-toggle{ display:flex; }
  .nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .expertise-grid{ grid-template-columns:1fr; }
  .section{ padding:80px 20px; }
}