:root{
  /* theme */
  --bg-1:#0f0d0b;
  --bg-2:#15110e;
  --text:#f6f2ee;
  --muted:#cfc6bd;
  --line:#221c18;
  --link:#d5b98c;

  /* layout */
  --hero-w:1160px;         /* splash grid width */
  --container-w:920px;     /* page content width */
  --containerTop:132px;

  /* nav sizing (taller, squarer) */
  --nav-pad-y:12px;
  --nav-pad-x:16px;
  --nav-radius:6px;
  --nav-max-w:880px;

  /* tab sizing */
  --pill-h:44px;
  --pill-pad-x:18px;
  --pill-radius:4px;

  /* splash dot */
  --dot-size:12px;
  --dot-color:#f1ece7;
}

/* Inter everywhere */
html{
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:16px;
  -webkit-text-size-adjust:100%;
}
body{
  margin:0; color:var(--text); line-height:1.75; font-weight:100;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; letter-spacing:.005em;
  background:
    radial-gradient(1200px 700px at 20% -10%, rgba(210,170,120,.10), transparent 60%) fixed,
    radial-gradient(1000px 600px at 85% 0%, rgba(180,130,90,.08), transparent 55%) fixed,
    linear-gradient(180deg, var(--bg-2), var(--bg-1)) fixed;
}
*{box-sizing:border-box}
html,body{height:100%}

/* ===== SPLASH ===== */
.splash{
  position:fixed; inset:0; z-index:1000; overflow:hidden; cursor:none;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(1000px 700px at 80% 0%, rgba(180,130,90,.10), transparent 60%) fixed,
    linear-gradient(180deg, #17130f, #0f0d0b) fixed;
}
.splash-inner{
  max-width:var(--hero-w); margin:0 auto;
  min-height:100vh; display:grid; align-content:center;
  padding:96px 40px 72px;
}
.hero-grid{display:grid; grid-template-columns:1.25fr .75fr; gap:44px; align-items:center}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr; gap:24px}}

/* headline (no wrap on desktop) */
.big{
  margin:0 0 14px 0;
  font-weight:700;
  font-size:clamp(2.7rem, 7vw, 4.6rem);
  white-space:nowrap;
}
@media (max-width:980px){ .big{ white-space:normal } }
.faint{ color:#ddd6cf; opacity:.78; font-weight:700; margin-right:.22rem }

/* caret bundle */
.typewrap{ position:relative; display:inline-block; white-space:nowrap }
#typeTarget{ font-weight:700 }
.caret{
  position:absolute; left:100%; top:0; bottom:0; width:.08em;
  background:currentColor; margin-left:.06em; border-radius:1px; opacity:.9;
  animation:blink 1s steps(2,end) infinite
}
@keyframes blink{ 50%{opacity:0} }

.dek{ margin:0 0 12px 0; color:var(--muted); font-size:clamp(1.06rem,2.4vw,1.28rem) }
.hint{ margin:10px 0 0 0; color:#a79c93; font-size:.95rem }

.portrait img{
  width:100%; max-width:540px; aspect-ratio:4/5; object-fit:cover; display:block;
  border-radius:22px; border:1px solid var(--line); background:#0c0a09;
  filter:contrast(1.02) saturate(0.95);
}

/* splash cursor dot */
.dot{
  position:fixed; left:0; top:0; z-index:1001;
  width:var(--dot-size); height:var(--dot-size);
  margin-left:calc(var(--dot-size)/-2); margin-top:calc(var(--dot-size)/-2);
  background:var(--dot-color); border-radius:50%; pointer-events:none;
  transform:translate3d(50vw,50vh,0) scale(1);
  transform-origin:center center; /* keep grow centered */
  transition:transform .65s cubic-bezier(.22,1,.36,1), opacity .2s ease;
  will-change:transform;
}
@media (prefers-reduced-motion:reduce){ .splash{cursor:auto} .dot{display:none} }

/* ===== APP ===== */
.app[hidden]{display:none}
.container{
  max-width:var(--container-w);
  margin:0 auto;
  padding:var(--containerTop) 20px 96px;
}

/* headings */
h1,h2,h3,h4,h5{ font-weight:300; letter-spacing:.01em; margin:0 0 .35em }

/* profile */
.profile{ display:flex; align-items:center; gap:14px; margin:0 0 14px }
.avatar{ width:56px; height:56px; border-radius:999px; object-fit:cover; object-position:50% 38%; border:1px solid var(--line) }
.name{ margin:0; font-size:1.6rem; font-weight:300 }
.tag{ margin:0; color:var(--muted) }

/* ===== sticky nav — taller, squarer ===== */
.sticky-nav{
  position:sticky; top:22px; z-index:50;
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;

  max-width:var(--nav-max-w);
  margin:18px auto 24px;

  padding:var(--nav-pad-y) var(--nav-pad-x);
  background:rgba(25,20,17,.26);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--nav-radius);
  box-shadow:none;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);

  font-size:1rem;
}

/* tabs */
.pill{
  display:inline-flex;
  align-items:center;
  height:var(--pill-h);
  padding:0 var(--pill-pad-x);
  border-radius:var(--pill-radius);
  color:rgba(255,255,255,.78);
  text-decoration:none;
  border:1px solid transparent;
  font-weight:300;
  line-height:1;
  -webkit-appearance:none;
  appearance:none;
}
.pill:hover{ color:var(--text) }
.pill.is-active{
  color:var(--text);
  background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.08);
}

/* content cards */
.card{ background:transparent; border:none; box-shadow:none; padding:8px 0 20px; margin:18px 0 }
.item{ background:transparent; border:none; box-shadow:none; padding:10px 0; margin:8px 0 }
.item h3{ margin:0 0 4px 0; font-weight:300 }
.item p{ color:#b3a79d; margin:6px 0 0 0 }

/* links */
a{ color:var(--link); text-decoration:none; border-bottom:1px solid transparent }
a:hover{ border-bottom-color:currentColor }

/* utilities */
.plain{ list-style:none; padding:0; margin:0 }
.foot{ margin-top:24px; color:#b6aca3; text-align:center }

/* views */
.view[hidden]{ display:none !important }
.view.is-visible{ animation:fade .22s ease both }
@keyframes fade{ from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none} }

/* contact grid */
.contact-grid .cols{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px 18px; margin-top:6px
}
.contact-grid h3{ margin:8px 0 2px 0; color:#cec4ba; font-weight:300; font-size:.96rem }
.contact-grid p{ margin:0 }

@media (max-width:720px){
  .contact-grid .cols{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .avatar{ width:48px; height:48px }
}

/* ===== PAPERS ===== */
.papers-note{ margin:.25rem 0 1rem; color:#cfc6bd }
.year{ margin:1.2rem 0 .5rem; font-weight:300; color:#e9e0d7 }

.papers-list{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-top:8px;
}
.paper{
  display:grid;
  grid-template-columns: 180px 1fr;
  gap:14px;
  padding:14px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  background:rgba(25,20,17,.26);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease;
}
.thumb{ margin:0; align-self:start }
.thumb img{
  display:block; width:100%; height:auto;
  aspect-ratio:4/3; object-fit:cover;
  border-radius:8px; border:1px solid rgba(255,255,255,.06);
  background:#0c0a09;
}
.paper .title{ margin:0 0 2px; font-weight:300; line-height:1.35 }
.paper .authors{ margin:.1rem 0; color:#d8cfc6; font-size:.98rem }
.paper .meta{ margin:.1rem 0 .4rem; color:#b8ada3; font-size:.95rem }
.paper .tldr{ margin:.2rem 0 .5rem; color:#cfc6bd }

.link-row{ display:flex; flex-wrap:wrap; gap:10px }
.btn-link{
  display:inline-flex; align-items:center; height:32px; padding:0 12px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:#f1e9e2; font-size:.92rem; line-height:1; text-decoration:none;
}
.btn-link:hover{ border-color:rgba(255,255,255,.18) }

.paper:hover{ border-color:rgba(255,255,255,.12) }
.paper:focus{ outline:2px solid rgba(255,255,255,.28); outline-offset:2px }

@media (max-width:720px){
  .paper{ grid-template-columns:1fr }
  .thumb img{ aspect-ratio:16/9 }
}