/* Design tokens · single source of truth */
:root{
  --color-void:      #000000;
  --color-surface:   #0a0a0a;
  --color-ghost:     rgba(255,255,255,.07);
  --color-ghost-hi:  rgba(255,255,255,.14);
  --color-muted:     #4a4a4a;
  --color-secondary: #8a8a8a;
  --color-primary:   #e8e8e8;
  --color-accent:    #ffffff;

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Fraunces', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  --text-2xs: .625rem;  --text-xs: .6875rem; --text-sm: .8125rem;
  --text-base:.9375rem; --text-lg: 1.125rem; --text-xl: 1.5rem;
  --text-2xl: 2rem;     --text-3xl: 2.75rem; --text-4xl: 4.25rem;

  --tracking-tight: -.015em; --tracking-normal: 0em; --tracking-wide: .06em;
  --tracking-wider: .14em;   --tracking-widest: .22em;

  --leading-tight: 1.08; --leading-snug: 1.3; --leading-normal: 1.55; --leading-relaxed: 1.75;

  --weight-thin: 100; --weight-light: 300; --weight-regular: 400;
  --weight-medium: 500; --weight-semibold: 600;

  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;
  --space-32: 8rem;

  --header-height: 4.5rem;
  --max-wide: 68rem;
  --gallery-gap: .25rem;

  --ease-out-expo: cubic-bezier(.19,1,.22,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
  --duration-fast: 140ms; --duration-base: 260ms; --duration-slow: 480ms; --duration-reveal: 900ms;

  --cursor-size: .5rem; --cursor-ring: 2.25rem;
}
@media (prefers-reduced-motion: reduce){
  :root{ --duration-fast:0ms; --duration-base:0ms; --duration-slow:0ms; --duration-reveal:0ms; }
}

/* Type roles · every text element uses one of these */
.t-display{ font-size:clamp(var(--text-3xl),9vw,var(--text-4xl)); font-weight:var(--weight-thin);
  letter-spacing:var(--tracking-widest); line-height:var(--leading-tight); text-transform:uppercase; }
.t-heading{ font-size:clamp(var(--text-2xl),4.4vw,var(--text-3xl)); font-weight:var(--weight-light);
  letter-spacing:var(--tracking-tight); line-height:1.18; color:var(--color-primary); }
.t-brand{ font-size:var(--text-xs); font-weight:var(--weight-medium); letter-spacing:var(--tracking-widest);
  text-transform:uppercase; color:var(--color-accent); }
.t-nav{ font-size:var(--text-xs); font-weight:var(--weight-regular); letter-spacing:var(--tracking-wider);
  text-transform:uppercase; color:var(--color-secondary); transition:color var(--duration-fast) var(--ease-in-out); }
.t-nav:hover, .t-nav.active { color:var(--color-primary); }
.t-label{ font-size:var(--text-2xs); font-weight:var(--weight-medium); letter-spacing:var(--tracking-widest);
  text-transform:uppercase; color:var(--color-secondary); }
.t-caption{ font-size:var(--text-sm); font-weight:var(--weight-light); letter-spacing:var(--tracking-normal);
  line-height:var(--leading-snug); color:var(--color-accent); }
.t-body{ font-size:var(--text-base); font-weight:var(--weight-light); letter-spacing:var(--tracking-normal);
  line-height:var(--leading-relaxed); color:var(--color-secondary); }
.t-meta{ font-family:var(--font-mono); font-size:var(--text-2xs); font-weight:var(--weight-regular);
  letter-spacing:var(--tracking-wide); color:var(--color-muted); }
.accent{ color:var(--color-accent); font-weight:var(--weight-regular); }

/* Reset + base */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ background:var(--color-void); color:var(--color-primary); font-family:var(--font-sans);
  font-size:16px; line-height:var(--leading-normal); scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; scrollbar-gutter:stable; cursor:none; }
body{ min-height:100dvh; background:var(--color-void); overflow-x:hidden; position:relative; }
@media (hover:none){ html{ cursor:auto; } }

::-webkit-scrollbar{ width:2px; background:var(--color-void); }
::-webkit-scrollbar-thumb{ background:var(--color-muted); }
img,picture{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ border:0; font:inherit; background:none; color:inherit; cursor:none; }
@media (hover:none){ button{ cursor:pointer; } }
:focus-visible{ outline:1px solid var(--color-primary); outline-offset:3px; }
::selection{ background:var(--color-primary); color:var(--color-void); }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link{ position:fixed; top:var(--space-4); left:var(--space-4); z-index:200;
  padding:var(--space-2) var(--space-4); background:var(--color-accent); color:var(--color-void);
  font-size:var(--text-xs); font-weight:var(--weight-medium); letter-spacing:var(--tracking-wide);
  text-transform:uppercase; transform:translateY(-200%); transition:transform var(--duration-fast); }
.skip-link:focus{ transform:translateY(0); }

/* Film grain · a texture, not a decoration; keeps flat black from banding */
.grain{ position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(10px);
  transition:opacity var(--duration-reveal) var(--ease-out-expo),
             transform var(--duration-reveal) var(--ease-out-expo); }
.reveal.is-visible{ opacity:1; transform:none; }

/* Custom cursor */
.cursor{ position:fixed; top:0; left:0; z-index:150; pointer-events:none; opacity:0;
  transition:opacity var(--duration-base) var(--ease-in-out); }
.cursor.on{ opacity:1; }
.cursor-dot{ position:fixed; top:0; left:0; width:var(--cursor-size); height:var(--cursor-size);
  border-radius:50%; background:var(--color-accent); transform:translate(-50%,-50%); z-index:151; }
.cursor-ring{ position:fixed; top:0; left:0; width:var(--cursor-ring); height:var(--cursor-ring);
  border-radius:50%; border:1px solid var(--color-ghost-hi); transform:translate(-50%,-50%);
  transition:width var(--duration-base) var(--ease-out-expo), height var(--duration-base) var(--ease-out-expo),
             border-color var(--duration-base); z-index:150; }
.cursor-ring.active{ width:3.6rem; height:3.6rem; border-color:var(--color-primary); }
@media (hover:none){ .cursor,.cursor-dot,.cursor-ring{ display:none; } }

/* Header */
.site-header{ position:fixed; top:0; left:0; right:0; z-index:60; height:var(--header-height);
  display:flex; align-items:center; justify-content:space-between; padding:0 var(--space-6);
  border-bottom:1px solid transparent; transition:border-color var(--duration-base), background var(--duration-base); }
.site-header.solid{ border-color:var(--color-ghost); background:rgba(0,0,0,.72); backdrop-filter:blur(6px); }
.site-nav{ display:flex; gap:var(--space-8); list-style:none; }

/* Hero */
.hero{ min-height:100dvh; display:grid; grid-template-columns:1.15fr 1fr; align-items:center;
  gap:var(--space-8); padding:calc(var(--header-height) + var(--space-8)) var(--space-6) var(--space-16); }
.hero-col{ max-width:34rem; }
.hero-label{ margin-bottom:var(--space-6); }
.hero-name{ color:var(--color-accent); margin-bottom:var(--space-8);
  font-family:var(--font-serif); font-weight:var(--weight-regular);
  font-size:clamp(2.5rem,9vw,5.25rem); letter-spacing:-.01em; line-height:1.04; }
.hero-name span{ display:block; white-space:nowrap; }
.hero-tag{ max-width:30rem; margin-bottom:var(--space-8); }
.hero-meta{ margin-bottom:var(--space-10); display:flex; flex-wrap:wrap; gap:0 var(--space-4); }
.hero-meta span{ display:flex; align-items:center; gap:var(--space-4); }
.hero-meta span+span::before{ content:''; width:3px; height:3px; border-radius:50%; background:var(--color-muted); }
.hero-cta{ display:flex; flex-wrap:wrap; gap:var(--space-3); }

.btn{ display:inline-flex; align-items:center; gap:var(--space-2); padding:.85rem 1.4rem;
  font-family:var(--font-mono); font-size:var(--text-2xs); font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-wider); text-transform:uppercase;
  border:1px solid var(--color-ghost-hi); transition:all var(--duration-base) var(--ease-out-expo); }
.btn-solid{ background:var(--color-accent); color:var(--color-void); border-color:var(--color-accent); }
.btn-solid:hover{ background:var(--color-primary); transform:translateY(-2px); }
.btn-line{ color:var(--color-secondary); }
.btn-line:hover{ border-color:var(--color-primary); color:var(--color-primary); transform:translateY(-2px); }
.entry-foot{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:var(--space-3); margin-top:var(--space-4); }
.entry-foot .chips{ margin-top:0; }
.chip-link{ font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:var(--tracking-wide);
  color:var(--color-secondary); border:1px solid var(--color-ghost); padding:.35em .75em;
  white-space:nowrap; transition:all var(--duration-base); }
.chip-link:hover{ border-color:var(--color-ghost-hi); color:var(--color-primary); }

.hero-visual{ position:relative; display:flex; align-items:center; justify-content:center; }
.lens-ring{ position:absolute; border-radius:50%; pointer-events:none; border:1px solid var(--color-ghost); }
.lens-ring:nth-child(1){ width:78%; height:78%; }
.lens-ring:nth-child(2){ width:64%; height:64%; border-color:var(--color-ghost-hi); }
.lens-ring:nth-child(3){ width:50%; height:50%; }
#nodeCanvas{ position:relative; z-index:1; width:100%; max-width:520px; height:520px; display:block; }

/* Section rhythm */
.band{ padding:var(--space-24) var(--space-6); max-width:var(--max-wide); margin:0 auto;
  border-top:1px solid var(--color-ghost); }
.band:first-of-type{ border-top:0; }
.band-head{ display:grid; grid-template-columns:5rem 1fr; gap:var(--space-6); margin-bottom:var(--space-16); }
.band-num{ padding-top:.2em; }
.band-head h2{ margin-top:var(--space-3); }
.band-head .t-body{ margin-top:var(--space-5); max-width:36rem; }

/* Entry list · shared by Research, Projects, Experience */
.entry-list{ display:flex; flex-direction:column; }
.entry{ display:grid; grid-template-columns:5rem 1fr; gap:var(--space-6); padding:var(--space-8) var(--space-4);
  margin:0 calc(var(--space-4) * -1); border-top:1px solid var(--color-ghost); position:relative;
  transition:background var(--duration-slow) var(--ease-out-expo),
             box-shadow var(--duration-slow) var(--ease-out-expo),
             transform var(--duration-slow) var(--ease-out-expo); }
.entry::before{ content:''; position:absolute; left:var(--space-4); top:-1px; width:0; height:1px;
  background:var(--color-primary); transition:width var(--duration-slow) var(--ease-out-expo); }
.entry:hover{ background:rgba(255,255,255,.02); transform:translateY(-2px);
  box-shadow:0 30px 60px rgba(0,0,0,.5); }
.entry:hover::before{ width:calc(100% - var(--space-8)); }
.entry-num{ padding-top:.2em; }
.entry-body h3{ font-size:var(--text-lg); font-weight:var(--weight-regular); color:var(--color-primary);
  letter-spacing:var(--tracking-tight); }
.entry-role{ margin-top:var(--space-1); }
.entry-body .t-body{ margin-top:var(--space-3); max-width:38rem; }
.chips{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-4); }
.chips span{ font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:var(--tracking-wide);
  color:var(--color-secondary); border:1px solid var(--color-ghost); padding:.28em .6em; }

/* Record · honors + toolkit */
.honors{ display:flex; flex-direction:column; }
.honor-row{ display:grid; grid-template-columns:5rem 1fr auto; gap:var(--space-6); align-items:baseline;
  padding:var(--space-4) var(--space-4); margin:0 calc(var(--space-4) * -1);
  border-top:1px solid var(--color-ghost); transition:background var(--duration-base); }
.honor-row:hover{ background:rgba(255,255,255,.02); }
.honor-row h4{ font-size:var(--text-base); font-weight:var(--weight-regular); color:var(--color-primary); }

.kit{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-10); margin-top:var(--space-16); }
.kit h4{ margin-bottom:var(--space-4); padding-bottom:var(--space-3); border-bottom:1px solid var(--color-ghost); }
.kit ul{ list-style:none; display:flex; flex-wrap:wrap; gap:var(--space-2); }
.kit li{ font-size:var(--text-sm); font-weight:var(--weight-light); color:var(--color-secondary);
  border:1px solid var(--color-ghost); padding:.35em .75em; transition:all var(--duration-base); }
.kit li:hover{ border-color:var(--color-ghost-hi); color:var(--color-primary); transform:translateY(-1px); }

/* Observations · the pano gets its own full-width row */
.gallery{ display:flex; flex-direction:column; gap:var(--gallery-gap); }
.g-row{ display:grid; gap:var(--gallery-gap); }
.g-row-split{ grid-template-columns:1fr 1fr; }
.g-row-wide{ grid-template-columns:1fr; }
.g-note{ display:flex; align-items:flex-end; padding:var(--space-4); }
.g-note p{ font-size:var(--text-lg); font-weight:var(--weight-light); color:var(--color-secondary);
  line-height:var(--leading-relaxed); }

.band-foot{ margin-top:var(--space-6); }

.g-item{ position:relative; overflow:hidden; cursor:none; background:var(--color-surface);
  transition:box-shadow var(--duration-slow) var(--ease-out-expo), transform var(--duration-slow) var(--ease-out-expo); }
@media (hover:none){ .g-item{ cursor:pointer; } }
.g-item img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--duration-slow) var(--ease-out-expo); }
.g-item:hover{ box-shadow:0 34px 70px rgba(0,0,0,.55); transform:translateY(-3px); }
.g-item:hover img{ transform:scale(1.025); }
.g-cap{ position:absolute; inset:auto 0 0 0; padding:var(--space-5) var(--space-4) var(--space-4);
  background:linear-gradient(to top,rgba(0,0,0,.82),transparent);
  opacity:0; transition:opacity var(--duration-base) var(--ease-in-out); }
.g-item:hover .g-cap,.g-item:focus-visible .g-cap{ opacity:1; }
.g-cap .t-meta{ display:block; margin-top:var(--space-1); color:var(--color-secondary); }

.lb{ position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center;
  flex-direction:column; gap:var(--space-5); padding:var(--space-20) var(--space-6) var(--space-8);
  background:rgba(0,0,0,.96); opacity:0; transition:opacity var(--duration-base); cursor:none; }
@media (hover:none){ .lb{ cursor:auto; } }
.lb.on{ display:flex; } .lb.vis{ opacity:1; }
.lb img{ max-width:100%; max-height:72vh; object-fit:contain; }
.lb-cap{ text-align:center; }
.lb-cap .t-meta{ display:block; margin-top:var(--space-2); }
.lb-btn{ position:absolute; width:2.75rem; height:2.75rem; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--color-ghost-hi); border-radius:50%; color:var(--color-secondary);
  transition:all var(--duration-base); }
.lb-btn:hover{ border-color:var(--color-primary); color:var(--color-primary); }
.lb-x{ top:var(--space-6); right:var(--space-6); }
.lb-p{ left:var(--space-6); top:50%; margin-top:-1.4rem; }
.lb-n{ right:var(--space-6); top:50%; margin-top:-1.4rem; }

/* Contact + footer */
.contact-inner{ text-align:left; max-width:32rem; }
.contact-inner .t-body{ margin-top:var(--space-5); }
.mailto{ display:inline-block; margin-top:var(--space-10); font-size:clamp(1.3rem,3.4vw,2rem);
  font-weight:var(--weight-light); color:var(--color-accent); border-bottom:1px solid var(--color-ghost-hi);
  padding-bottom:var(--space-2); transition:border-color var(--duration-base); }
.mailto:hover{ border-color:var(--color-accent); }
.contact-links{ margin-top:var(--space-10); display:flex; flex-wrap:wrap; gap:var(--space-3); }

.site-footer{ padding:var(--space-8) var(--space-6); border-top:1px solid var(--color-ghost);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-3); }

/* Responsive */
@media (max-width:960px){
  .hero{ grid-template-columns:1fr; padding-top:calc(var(--header-height) + var(--space-6)); }
  .hero-visual{ order:-1; margin-bottom:var(--space-4); }
  #nodeCanvas{ max-width:320px; height:320px; }
  .kit{ grid-template-columns:1fr; gap:var(--space-8); }
}
@media (max-width:720px){
  .site-nav{ display:none; }
  .band{ padding:var(--space-16) var(--space-5); }
  .band-head,.entry,.honor-row{ grid-template-columns:1fr; gap:var(--space-2); }
  .entry-num,.band-num{ display:none; }
  .entry,.honor-row{ margin:0; padding-left:0; padding-right:0; }
  .g-row-split{ grid-template-columns:1fr; }
  .g-note{ order:-1; padding:0 0 var(--space-2); }
  .lb-p{ left:var(--space-3); } .lb-n{ right:var(--space-3); }
  .lb{ padding:var(--space-16) var(--space-3) var(--space-6); }
}
@media (max-width:380px){
  .hero-name{ font-size:2.1rem; }
}
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}