/* ============================================================
   Claude Design Language — warm-canvas editorial
   cream canvas · coral accent · serif display · dark navy surfaces
   Light mode first. Tokenized.
   ============================================================ */

/* ---- Tokens ---- */
:root{
  /* colors */
  --primary:#cc785c;
  --primary-active:#a9583e;
  --primary-disabled:#e6dfd8;
  --ink:#141413;
  --body-strong:#252523;
  --body:#3d3d3a;
  --muted:#6c6a64;
  --muted-soft:#8e8b82;
  --hairline:#e6dfd8;
  --hairline-soft:#ebe6df;
  --canvas:#faf9f5;
  --surface-soft:#f5f0e8;
  --surface-card:#efe9de;
  --surface-cream-strong:#e8e0d2;
  --surface-dark:#181715;
  --surface-dark-elevated:#252320;
  --surface-dark-soft:#1f1e1b;
  --on-primary:#ffffff;
  --on-dark:#faf9f5;
  --on-dark-soft:#a09d96;
  --accent-teal:#5db8a6;
  --accent-amber:#e8a55a;
  --success:#5db872;
  --error:#c64545;

  /* type */
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* radius */
  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-pill:9999px;

  /* spacing */
  --sp-2:4px; --sp-3:8px; --sp-4:12px; --sp-5:16px; --sp-6:24px; --sp-7:32px; --sp-8:48px; --sp-section:96px;

  --shadow-soft:0 1px 3px rgba(20,20,19,0.08);
  --shadow-lift:0 10px 30px rgba(20,20,19,0.10);
  --container:1200px;
  --t-fast:160ms cubic-bezier(.4,0,.2,1);
  --t-mid:320ms cubic-bezier(.4,0,.2,1);
  --t-slow:520ms cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  background:var(--canvas);
  color:var(--body);
  font-family:var(--sans);
  font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--primary);color:#fff;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;background:none;border:none;color:inherit;cursor:pointer;}
img{max-width:100%;display:block;}
.serif{font-family:var(--serif);}
.mono{font-family:var(--mono);}

.container{max-width:var(--container);margin:0 auto;padding:0 clamp(20px,4vw,48px);}
.band{padding:clamp(56px,9vw,var(--sp-section)) 0;}
.band-dark{background:var(--surface-dark);color:var(--on-dark);}
.band-dark .eyebrow{color:var(--on-dark-soft);}

/* ---- Typography helpers ---- */
.display-xl{font-family:var(--serif);font-weight:500;font-size:clamp(48px,9vw,96px);line-height:1.02;letter-spacing:-.015em;color:var(--ink);}
.display-lg{font-family:var(--serif);font-weight:500;font-size:clamp(34px,5vw,52px);line-height:1.08;letter-spacing:-.01em;color:var(--ink);}
.display-md{font-family:var(--serif);font-weight:500;font-size:clamp(28px,4vw,40px);line-height:1.12;letter-spacing:-.005em;color:var(--ink);}
.eyebrow{font-size:12px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);}
.caption-upper{letter-spacing:1.5px;text-transform:uppercase;}
.text-link{color:var(--primary);font-size:14px;font-weight:500;position:relative;}
.text-link:hover{text-decoration:underline;text-underline-offset:4px;}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:14px;font-weight:500;line-height:1;
  padding:12px 20px;height:40px;border-radius:var(--r-md);
  transition:background-color var(--t-fast),color var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);
  white-space:nowrap;
}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--primary);color:var(--on-primary);}
.btn-primary:hover{background:var(--primary-active);}
.btn-primary:active{background:var(--primary-active);}
.btn-secondary{background:var(--canvas);color:var(--ink);border:1px solid var(--hairline);}
.btn-secondary:hover{border-color:var(--ink);}
.btn-cream{background:var(--canvas);color:var(--ink);}
.btn-cream:hover{background:var(--surface-card);}
.btn-block{width:100%;}

/* ---- Badges ---- */
.badge-pill{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--surface-card);color:var(--ink);
  font-size:13px;font-weight:500;padding:5px 12px;border-radius:var(--r-pill);
}
.badge-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 0 rgba(93,184,114,.6);animation:pulse 2.4s infinite;}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(93,184,114,.5);}
  70%{box-shadow:0 0 0 8px rgba(93,184,114,0);}
  100%{box-shadow:0 0 0 0 rgba(93,184,114,0);}
}

/* ================= NAV ================= */
.nav{
  position:sticky;top:0;z-index:80;height:64px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(20px,4vw,48px);
  background:rgba(250,249,245,.86);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hairline-soft);
  transition:box-shadow var(--t-mid);
}
.nav.scrolled{box-shadow:var(--shadow-soft);}
.nav-brand{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink);}
.spike{display:block;color:var(--ink);}
.nav-menu{display:flex;gap:32px;}
.nav-menu a{font-size:14px;font-weight:500;color:var(--body);position:relative;padding:4px 0;transition:color var(--t-fast);}
.nav-menu a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--primary);transition:width var(--t-mid);}
.nav-menu a:hover{color:var(--ink);}
.nav-menu a:hover::after{width:100%;}
.nav-actions{display:flex;align-items:center;gap:12px;}
.hamburger{display:none;flex-direction:column;gap:5px;width:36px;height:36px;align-items:center;justify-content:center;border-radius:var(--r-md);}
.hamburger span{width:18px;height:2px;background:var(--ink);transition:var(--t-fast);}
.hamburger.open span:nth-child(1){transform:translateY(3.5px) rotate(45deg);}
.hamburger.open span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg);}

/* ================= HERO ================= */
.hero{padding-top:clamp(64px,10vw,110px);}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,80px);align-items:center;}
.hero-name{margin-top:22px;cursor:default;}
.hero-role{font-size:clamp(18px,2.4vw,24px);font-style:italic;color:var(--muted);margin-top:14px;}
.hero-tagline{max-width:46ch;margin-top:18px;font-size:16px;color:var(--body-strong);}
.hero-actions{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap;}

/* code window */
.code-window{
  background:var(--surface-dark);border-radius:var(--r-xl);overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(20,20,19,.35);
  transform:translateY(0);transition:transform var(--t-slow);
}
.code-window:hover{transform:translateY(-6px);}
.cw-bar{
  display:flex;align-items:center;gap:12px;padding:12px 16px;
  background:var(--surface-dark-elevated);border-bottom:1px solid rgba(255,255,255,.06);
}
.cw-dots{display:flex;gap:6px;}
.cw-dots i{width:11px;height:11px;border-radius:50%;background:#3a3a36;}
.cw-dots i:first-child{background:var(--error);}
.cw-dots i:nth-child(2){background:var(--accent-amber);}
.cw-dots i:nth-child(3){background:var(--success);}
.cw-title{font-size:12px;color:var(--on-dark-soft);flex:1;text-align:center;}
.cw-status{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--success);}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--success);}
.cw-body{padding:22px 22px 26px;font-size:13.5px;line-height:1.8;color:#cfcac2;min-height:230px;}
.cw-body .c{color:#8a857c;}     /* comment */
.cw-body .k{color:var(--accent-teal);}  /* keyword */
.cw-body .s{color:var(--accent-amber);} /* string */
.cw-body .p{color:var(--primary);}      /* property */
.cw-body .cursor{display:inline-block;width:8px;height:15px;background:var(--primary);vertical-align:-2px;animation:blink 1s steps(1) infinite;}
@keyframes blink{0%,49%{opacity:1;}50%,100%{opacity:0;}}

/* ================= SECTION HEAD ================= */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(32px,5vw,56px);flex-wrap:wrap;}
.section-head .eyebrow{display:block;margin-bottom:10px;}
.section-head.dark{color:var(--on-dark);}
.section-head.dark .display-lg{color:var(--on-dark);}

/* ---- tabs ---- */
.tabs{display:flex;gap:8px;margin-bottom:32px;flex-wrap:wrap;}
.tab{font-size:14px;font-weight:500;padding:8px 14px;border-radius:var(--r-md);color:var(--muted);transition:var(--t-fast);}
.tab:hover{color:var(--ink);}
.tab.active{background:var(--surface-card);color:var(--ink);}

/* ================= WORK GRID ================= */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.work-card{
  background:var(--surface-card);border-radius:var(--r-lg);padding:32px;
  display:flex;flex-direction:column;gap:18px;position:relative;overflow:hidden;
  transition:transform var(--t-mid),box-shadow var(--t-mid),background-color var(--t-fast);
  transform:translateY(0);
}
.work-card::before{
  content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(204,120,92,.10),transparent 55%);
  opacity:0;transition:opacity var(--t-mid);pointer-events:none;
}
.work-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);}
.work-card:hover::before{opacity:1;}
.work-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.work-title{font-size:20px;font-weight:600;color:var(--ink);line-height:1.2;}
.work-subtitle{font-family:var(--serif);font-style:italic;color:var(--muted);margin-top:4px;font-size:15px;}
.work-year{font-family:var(--mono);font-size:12px;color:var(--muted-soft);white-space:nowrap;}
.work-abstract{font-family:var(--serif);font-size:16px;line-height:1.55;color:var(--body-strong);flex:1;}
.work-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;}
.work-tags span{background:var(--canvas);color:var(--muted);font-size:12px;padding:4px 10px;border-radius:var(--r-pill);}
.work-arrow{position:absolute;right:24px;bottom:24px;color:var(--primary);font-size:20px;opacity:0;transform:translateX(-6px);transition:var(--t-mid);}
.work-card:hover .work-arrow{opacity:1;transform:translateX(0);}

/* ================= STATS ================= */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.stat{
  background:var(--surface-dark-elevated);border-radius:var(--r-lg);padding:40px 32px;
  border:1px solid rgba(255,255,255,.05);transition:transform var(--t-mid),border-color var(--t-mid);
}
.stat:hover{transform:translateY(-4px);border-color:rgba(204,120,92,.4);}
.stat-num{font-size:clamp(44px,6vw,64px);font-weight:500;color:var(--on-dark);line-height:1;}
.stat-label{font-size:13px;color:var(--on-dark-soft);margin-top:12px;letter-spacing:.3px;}

/* ================= RESEARCH ================= */
.research-list{border-top:1px solid var(--hairline);}
.research-row{
  display:grid;grid-template-columns:56px 1fr auto auto;align-items:center;gap:20px;
  padding:28px 8px;border-bottom:1px solid var(--hairline);
  transition:padding var(--t-mid),background-color var(--t-fast);
}
.research-row:hover{background:var(--surface-soft);padding-left:18px;}
.research-num{font-family:var(--mono);font-size:13px;color:var(--muted-soft);}
.research-title{font-family:var(--serif);font-size:clamp(20px,2.4vw,26px);font-weight:500;color:var(--ink);line-height:1.2;}
.research-note{font-size:12px;font-weight:500;color:var(--muted);border:1px solid var(--hairline);padding:3px 10px;border-radius:var(--r-pill);text-transform:uppercase;letter-spacing:.8px;}
.research-date{font-family:var(--mono);font-size:13px;color:var(--muted);text-align:right;}
.research-arrow{font-size:18px;color:var(--primary);opacity:0;transform:translateX(-6px);transition:var(--t-mid);}
.research-row:hover .research-arrow{opacity:1;transform:translateX(0);}

/* ================= ABOUT ================= */
.about-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(24px,5vw,72px);align-items:start;}
.about-bio{font-size:clamp(22px,3vw,30px);line-height:1.45;color:var(--ink);}
.about-bio p+p{margin-top:24px;}
.about-bio p{max-width:24em;}
.about-card{
  background:var(--surface-card);border-radius:var(--r-lg);padding:32px;
  display:flex;flex-direction:column;
}
.about-row{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--hairline-soft);}
.about-row span{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);}
.about-row b,.about-row a{font-size:15px;color:var(--ink);font-weight:500;text-align:right;}
.about-row a:hover{color:var(--primary);}
.about-socials{display:flex;gap:8px;margin-top:24px;flex-wrap:wrap;}
.about-socials a{font-size:13px;font-weight:500;padding:8px 14px;border:1px solid var(--hairline);border-radius:var(--r-md);background:var(--canvas);transition:var(--t-fast);}
.about-socials a:hover{border-color:var(--ink);transform:translateY(-2px);}

/* ================= CTA ================= */
.cta-band{
  background:var(--primary);border-radius:var(--r-xl);padding:clamp(48px,8vw,88px);
  text-align:center;color:var(--on-primary);
  position:relative;overflow:hidden;
}
.cta-band::after{
  content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%);pointer-events:none;
}
.cta-band .display-md{color:var(--on-primary);}
.cta-sub{font-size:17px;margin:16px auto 32px;max-width:38ch;color:rgba(255,255,255,.9);}
.cta-band .btn-cream{font-size:15px;height:48px;padding:14px 28px;}

/* ================= FOOTER ================= */
.footer{background:var(--surface-dark);color:var(--on-dark-soft);padding:64px 0 40px;}
.footer .container{max-width:var(--container);}
.footer-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.08);}
.nav-brand.on-dark{color:var(--on-dark);}
.nav-brand.on-dark .spike{color:var(--on-dark);}
.footer-links{display:flex;gap:24px;}
.footer-links a{font-size:14px;color:var(--on-dark-soft);transition:color var(--t-fast);}
.footer-links a:hover{color:var(--on-dark);}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:24px;font-size:13px;}

/* ================= REVEAL ANIMATION ================= */
.reveal{opacity:0;transform:translateY(24px);}
.reveal.in{opacity:1;transform:translateY(0);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);}
.delay-1.in{transition-delay:.12s;}
.delay-2.in{transition-delay:.24s;}
.delay-3.in{transition-delay:.36s;}

/* stagger cards */
.stagger .reveal-item{opacity:0;transform:translateY(20px);}
.stagger.in .reveal-item{opacity:1;transform:translateY(0);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);}

/* ================= MODAL ================= */
.modal-scrim,.drawer-scrim{position:fixed;inset:0;background:rgba(20,20,19,.45);z-index:90;opacity:0;pointer-events:none;transition:opacity var(--t-mid);}
.modal-scrim.open,.drawer-scrim.open{opacity:1;pointer-events:auto;}
.modal{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity var(--t-mid);}
.modal.open{opacity:1;pointer-events:auto;}
.modal-card{
  background:var(--canvas);border-radius:var(--r-xl);padding:40px;width:min(420px,100%);
  box-shadow:0 30px 80px rgba(20,20,19,.3);
  transform:translateY(16px) scale(.97);transition:transform var(--t-mid) var(--ease-out);
}
.modal.open .modal-card{transform:translateY(0) scale(1);}
.modal-title{font-family:var(--serif);font-weight:500;font-size:30px;color:var(--ink);margin:12px 0 6px;}
.modal-note{font-size:14px;color:var(--muted);margin-bottom:20px;}
.modal-actions{display:flex;gap:10px;margin-top:16px;}
.modal-actions .btn{flex:1;}
.modal-err{color:var(--error);font-size:13px;margin-top:12px;min-height:16px;}

/* ---- text input ---- */
.text-input{
  width:100%;background:var(--canvas);border:1px solid var(--hairline);color:var(--ink);
  font-family:var(--sans);font-size:15px;padding:10px 14px;height:40px;border-radius:var(--r-md);
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
textarea.text-input{height:auto;resize:vertical;line-height:1.5;min-height:80px;}
.text-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(204,120,92,.16);}
.text-input.mono{font-family:var(--mono);font-size:13px;}

/* ================= DRAWER ================= */
.drawer{
  position:fixed;top:0;right:0;height:100%;width:min(560px,100%);
  background:var(--canvas);z-index:100;transform:translateX(100%);
  transition:transform var(--t-slow) var(--ease-out);
  overflow-y:auto;padding:28px 32px 60px;border-left:1px solid var(--hairline);
}
.drawer.open{transform:translateX(0);}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--hairline);margin-bottom:24px;}
.icon-btn{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--muted);border:1px solid var(--hairline);transition:var(--t-fast);}
.icon-btn:hover{color:var(--ink);border-color:var(--ink);transform:rotate(90deg);}
.drawer-form .field{margin-bottom:16px;}
.drawer-form label{display:block;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.field-group{border-top:1px solid var(--hairline-soft);padding-top:20px;margin:22px 0;}
.group-title{font-size:12px;font-weight:600;margin-bottom:14px;color:var(--body-strong);}
.row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.drawer-msg{font-size:13px;margin-top:14px;min-height:16px;}
.drawer-msg.ok{color:var(--success);}
.drawer-msg.err{color:var(--error);}

/* ================= RESPONSIVE ================= */
@media(max-width:1024px){
  .work-grid{grid-template-columns:repeat(2,1fr);}
  .about-grid{grid-template-columns:1fr;}
  .stats{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:768px){
  .nav-menu{display:none;}
  .hamburger{display:flex;}
  .hero-grid{grid-template-columns:1fr;}
  .work-grid{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr;}
  .research-row{grid-template-columns:44px 1fr auto;gap:12px;}
  .research-note{display:none;}
  .research-date{grid-column:2;text-align:left;margin-top:-6px;}
  .nav-cta{display:none;}
}
/* mobile menu sheet */
.mobile-menu{
  position:fixed;inset:0;z-index:85;background:var(--canvas);
  display:flex;flex-direction:column;justify-content:center;gap:8px;padding:40px;
  transform:translateY(-100%);transition:transform var(--t-mid) var(--ease-out);
}
.mobile-menu.open{transform:translateY(0);}
.mobile-menu a{font-family:var(--serif);font-size:34px;font-weight:500;color:var(--ink);padding:10px 0;border-bottom:1px solid var(--hairline-soft);}