:root{
  --bg:#fafaf9;
  --text:#252622;
  --muted:#72736d;
  --line:#ddded7;
  --accent:#c34b29;
  --font:'IBM Plex Mono','SFMono-Regular',Consolas,monospace
}

*{
  box-sizing:border-box
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:95px
}

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

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

button{
  font:inherit
}

a,
button{
  -webkit-tap-highlight-color:transparent
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:6px
}

::selection{
  background:#f5d6c6
}

.container{
  width:min(1200px,calc(100% - 96px));
  margin-inline:auto
}


/* =========================
   HEADER
   ========================= */

.site-header{
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  background:#fafaf9f0;
  backdrop-filter:blur(16px);
  z-index:10
}

.nav{
  height:90px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}

.brand{
  display:flex;
  align-items:center;
  gap:18px;
  line-height:1.4
}

.brand-mark{
  font-size:38px;
  font-weight:600;
  letter-spacing:-4px
}

.brand-mark>span{
  color:var(--accent)
}

.brand-name{
  font-size:14px
}

.brand-name>span{
  display:block;
  color:var(--muted)
}

.header-right{
  display:flex;
  align-items:center;
  gap:38px
}

.location{
  font-size:12px;
  color:var(--muted);
  letter-spacing:.07em
}

.nav-cta{
  font-size:14px;
  border-bottom:1px solid var(--text);
  padding-block:6px
}

.nav-cta span{
  color:var(--accent);
  margin-left:16px
}


/* =========================
   HERO
   ========================= */

.hero{
  padding-top:80px
}

.hero-label{
  font-size:12px;
  letter-spacing:.1em;
  margin-bottom:32px
}

.accent{
  color:var(--accent)
}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 265px;
  gap:60px;
  align-items:center
}

h1{
  font-size:clamp(36px,4.6vw,66px);
  font-weight:500;
  letter-spacing:-.065em;
  line-height:1.17;
  margin:0
}

h1>span{
  color:var(--muted)
}

.lead{
  max-width:670px;
  color:#65665e;
  margin:30px 0;
  font-size:16px;
  line-height:1.9
}

.hero-actions{
  display:flex;
  align-items:center;
  gap:30px;
  flex-wrap:wrap
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:32px;
  padding:13px 20px;
  font-size:14px
}

.primary{
  background:var(--text);
  color:white;
  transition:background .2s,transform .2s
}

.primary:hover{
  background:var(--accent);
  transform:translateY(-2px)
}

.text-link{
  font-size:14px
}

.text-link:hover{
  color:var(--accent)
}

.profile-note{
  border-left:1px solid var(--line);
  padding-left:28px;
  margin-top:15px;
  font-size:14px
}

.note-label{
  font-size:12px;
  color:var(--accent)
}

.focus-line{
  padding:15px 0;
  border-bottom:1px solid var(--line);
  white-space:nowrap
}

.focus-line>span{
  font-size:12px;
  margin-right:14px;
  color:#96988e
}

.note-bottom{
  color:var(--muted);
  font-size:12px;
  line-height:1.8;
  margin-top:25px
}


/* =========================
   STATS
   ========================= */

.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:40px 0;
  margin-top:65px;
  border-top:1px solid var(--line)
}

.stats>div{
  display:flex;
  flex-direction:column;
  padding-left:30px;
  border-left:1px solid var(--line)
}

.stats>div:first-child{
  padding-left:0;
  border-left:0
}

.stats strong{
  font-size:28px;
  font-weight:400;
  line-height:1.5
}

.stats strong span{
  color:var(--accent)
}

.stats>div>span{
  font-size:12px;
  color:var(--muted);
  margin-top:7px
}


/* =========================
   WORKSPACE + TABS
   ========================= */

.workspace{
  margin-top:22px;
  min-height:600px;
  scroll-margin-top:110px
}

.tabbar{
  display:flex;
  border-bottom:1px solid var(--line);
  overflow-x:auto;
  scrollbar-width:thin;
  gap:24px
}

.tabbar button{
  border:0;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  position:relative;
  white-space:nowrap;
  padding:18px 0;
  font-size:14px;
  transition:color .2s
}

.tabbar button span{
  font-size:12px;
  opacity:.65;
  margin-right:8px
}

.tabbar button::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transition:transform .3s
}

.tabbar button[aria-selected=true]{
  color:var(--text)
}

.tabbar button[aria-selected=true]::after{
  transform:scaleX(1)
}

.tabbar button:hover{
  color:var(--accent)
}

.panel{
  padding:45px 0 70px
}

.panel[hidden]{
  display:none
}

.panel>.container{
  width:100%
}

.panel-enter{
  animation:enter .4s cubic-bezier(.2,.65,.3,1)
}

@keyframes enter{
  from{
    opacity:0;
    transform:translateY(10px)
  }

  to{
    opacity:1;
    transform:translateY(0)
  }
}


/* =========================
   TYPOGRAPHY
   ========================= */

h2{
  font-size:clamp(24px,3vw,34px);
  letter-spacing:-.045em;
  line-height:1.4;
  font-weight:400;
  margin:0 0 32px
}

h3{
  font-size:18px;
  line-height:1.6;
  font-weight:500;
  margin:0
}

p{
  margin:12px 0;
  color:var(--muted);
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto
}

.pub p,
.note-bottom,
.kicker{
  text-align:left
}


/* =========================
   RESEARCH
   ========================= */

.research-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line)
}

.research-card{
  padding:26px;
  min-width:0;
  display:flex;
  flex-direction:column;
  transition:background .25s
}

.research-card+.research-card{
  border-left:1px solid var(--line)
}

.research-card:hover{
  background:#f0f0eb
}

.research-card-top{
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:12px;
  color:var(--muted);
  margin-bottom:48px
}

.research-card-top>span:first-child{
  color:var(--accent)
}

.research-card-top>span:last-child{
  font-size:10px;
  letter-spacing:.025em
}

.research-card h3{
  font-size:21px;
  letter-spacing:-.045em
}

.research-card p{
  font-size:14px;
  line-height:1.9;
  margin:20px 0 35px
}

.card-arrow{
  margin-top:auto;
  color:var(--accent);
  font-size:14px;
  transition:transform .25s
}

.research-card:hover .card-arrow{
  transform:translateX(5px)
}


/* =========================
   ABOUT
   ========================= */

.about-lines{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px 60px
}

.about-line{
  border-top:1px solid var(--line);
  padding-top:22px
}

.about-line p{
  font-size:16px
}


/* =========================
   TEACHING
   ========================= */

.teaching-grid{
  display:grid;
  gap:25px
}

.teaching-card{
  border:1px solid var(--line);
  padding:28px
}

.teaching-meta{
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:var(--accent);
  font-size:12px;
  margin-bottom:22px
}

.teaching-main{
  display:flex;
  gap:30px
}

.teaching-main strong{
  font-weight:400;
  font-size:40px;
  color:var(--accent)
}


/* =========================
   EXPERIENCE
   ========================= */

.timeline-row{
  display:grid;
  grid-template-columns:210px 1fr;
  gap:30px;
  border-top:1px solid var(--line);
  padding:28px 0
}

.date{
  font-size:12px;
  color:var(--muted)
}

.org{
  font-size:14px;
  color:var(--accent)
}


/* =========================
   PUBLICATIONS
   ========================= */

.publications-title{
  display:flex;
  justify-content:space-between;
  gap:25px;
  align-items:baseline
}

.publications-title>a{
  font-size:12px;
  white-space:nowrap;
  color:var(--accent)
}

.pub{
  display:grid;
  grid-template-columns:65px 1fr 20px;
  gap:20px;
  padding:25px 0;
  border-top:1px solid var(--line);
  transition:background .2s
}

.pub:hover{
  background:#f0f0eb
}

.pub>span{
  font-size:14px;
  color:var(--muted)
}

.pub h3{
  font-size:16px
}

.pub p{
  font-size:12px
}

.pub b{
  color:var(--accent)
}


/* =========================
   EDUCATION
   ========================= */

/*
   Master's and Bachelor's entries intentionally use
   the exact same card structure.
*/

.education-card{
  width:100%
}

/*
   Space between separate degrees.
   This creates visual separation without changing
   the internal design of either degree.
*/
.education-card + .education-card{
  margin-top:75px;
  padding-top:55px;
  border-top:1px solid var(--line)
}

.education-head{
  display:flex;
  justify-content:space-between;
  gap:20px
}

.education-head h2{
  margin:12px 0
}

.education-head>div>span{
  font-size:14px;
  color:var(--accent)
}

.education-head>strong{
  font-weight:400;
  font-size:32px
}

/*
   Degree information.
   Only the TOP divider remains.
   No horizontal line appears between facts and thesis.
*/
.education-facts{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1.5fr;
  gap:20px;
  border-top:1px solid var(--line);
  border-bottom:0;
  padding:25px 0 16px;
  margin:25px 0 0
}

.education-facts div{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0
}

.education-facts span,
.thesis>span{
  font-size:12px;
  color:var(--muted)
}

.education-facts strong{
  font-size:14px;
  font-weight:400;
  overflow-wrap:anywhere
}

/*
   Thesis follows naturally beneath the degree facts.
   No divider is placed above it.
*/
.thesis{
  margin:0;
  padding-top:18px
}

.thesis p{
  margin:12px 0 0
}

/*
   Keeps empty Master's fields visually consistent
   without requiring "N/A" or placeholder text.
*/
.education-facts strong:empty::after,
.thesis p:empty::after,
.education-head>strong:empty::after{
  content:"\00a0"
}


/* =========================
   CONTACT
   ========================= */

.contact{
  border-top:1px solid var(--line);
  padding:65px 0;
  background:#efefea;
  scroll-margin-top:90px
}

.contact-grid{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:90px
}

.kicker{
  color:var(--accent);
  font-size:12px;
  letter-spacing:.08em;
  margin:0 0 20px
}

.contact h2{
  max-width:650px;
  margin-bottom:20px
}

.contact p:not(.kicker){
  max-width:650px
}

.contact-links a{
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid #d0d1c8;
  padding:15px 0;
  font-size:14px
}

.contact-links a:hover{
  color:var(--accent)
}

.contact-links b{
  font-weight:400;
  color:var(--accent)
}


/* =========================
   FOOTER
   ========================= */

.footer{
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:12px;
  color:var(--muted);
  padding-block:26px
}

.skip{
  position:fixed;
  top:-100px;
  left:20px;
  background:var(--text);
  color:white;
  padding:12px;
  z-index:100
}

.skip:focus{
  top:15px
}


/* =========================
   DESKTOP / TABLET
   ========================= */

@media(min-width:901px){

  .hero-label,
  .hero-grid{
    animation:enter .65s both
  }

  .hero-grid{
    animation-delay:.08s
  }
}


@media(max-width:1000px){

  .container{
    width:calc(100% - 56px)
  }

  .hero-grid{
    gap:30px;
    grid-template-columns:minmax(0,1fr) 245px
  }

  .research-card{
    padding:20px
  }

  .tabbar{
    gap:23px
  }

  .tabbar button span{
    display:none
  }

  .research-card-top>span:last-child{
    display:none
  }
}


/* =========================
   MOBILE
   ========================= */

@media(max-width:760px){

  .container{
    width:calc(100% - 36px)
  }

  .nav{
    height:76px
  }

  .location{
    display:none
  }

  .brand-name{
    font-size:12px
  }

  .brand{
    gap:12px
  }

  .nav-cta{
    font-size:12px
  }

  .nav-cta span{
    margin-left:6px
  }

  .hero{
    padding-top:48px
  }

  .hero-grid{
    grid-template-columns:1fr
  }

  .hero-label{
    font-size:10px;
    letter-spacing:.03em
  }

  .profile-note{
    display:none
  }

  h1{
    font-size:clamp(32px,7.2vw,54px)
  }

  .lead{
    font-size:16px
  }

  .hero-actions{
    gap:22px
  }

  .stats{
    grid-template-columns:1fr 1fr;
    row-gap:25px;
    margin-top:42px;
    padding:28px 0
  }

  .stats>div:nth-child(3){
    padding-left:0;
    border-left:0
  }

  .stats strong{
    font-size:24px
  }

  .stats>div>span{
    font-size:11px
  }

  .tabbar{
    gap:25px
  }

  .panel{
    padding-top:30px
  }

  .research-cards{
    grid-template-columns:1fr
  }

  .research-card+.research-card{
    border-left:0;
    border-top:1px solid var(--line)
  }

  .research-card{
    padding:24px
  }

  .research-card-top{
    margin-bottom:24px
  }

  .research-card-top>span:last-child{
    display:block
  }

  .research-card h3 br{
    display:none
  }

  .research-card p{
    margin-bottom:20px
  }

  .about-lines{
    grid-template-columns:1fr
  }

  .timeline-row{
    grid-template-columns:1fr;
    gap:10px
  }

  .teaching-main{
    flex-direction:column;
    gap:10px
  }

  .teaching-main strong{
    font-size:30px
  }

  .teaching-meta{
    flex-wrap:wrap
  }

  .pub{
    grid-template-columns:44px 1fr;
    gap:12px
  }

  .pub>b{
    display:none
  }

  .publications-title{
    display:block
  }

  .publications-title h2{
    margin-bottom:14px
  }

  .publications-title{
    margin-bottom:25px
  }

  /* Education */
  .education-facts{
    grid-template-columns:1fr 1fr;
    gap:24px 18px
  }

  .education-head{
    flex-direction:column
  }

  .education-head>strong{
    font-size:26px
  }

  .education-card + .education-card{
    margin-top:55px;
    padding-top:42px
  }

  .thesis{
    padding-top:20px
  }

  .contact-grid{
    grid-template-columns:1fr;
    gap:25px
  }

  .contact{
    padding:45px 0
  }

  .footer{
    flex-direction:column;
    gap:8px
  }
}


/* =========================
   REDUCED MOTION
   ========================= */

@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto
  }

  *,
  *::before,
  *::after{
    animation:none!important;
    transition:none!important
  }
}


/* =========================
   FRAMELESS PORTRAIT
   ========================= */

/* Frameless portrait: image stays visible without animation or JavaScript. */

.hero{
  padding-top:54px
}

.hero-grid{
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:56px;
  align-items:center
}

.hero-profile{
  min-width:0
}

.portrait-card{
  position:relative;
  isolation:isolate;
  width:85%;
  margin:0 auto;
  background:transparent;
  border:0;
  box-shadow:none
}

.hero-portrait{
  position:relative;
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1;
  object-fit:cover;
  z-index:1;
  opacity:1;
  mix-blend-mode:normal;
  clip-path:inset(1%);
  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 1%,
      #000 14%,
      #000 86%,
      transparent 99%
    ),
    linear-gradient(
      to bottom,
      transparent 1%,
      #000 10%,
      #000 70%,
      transparent 98%
    );
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(
      to right,
      transparent 1%,
      #000 14%,
      #000 86%,
      transparent 99%
    ),
    linear-gradient(
      to bottom,
      transparent 1%,
      #000 10%,
      #000 70%,
      transparent 98%
    );
  mask-composite:intersect
}

.binary-field{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  -webkit-mask-image:
    radial-gradient(
      ellipse at center,
      #000 35%,
      transparent 73%
    );
  mask-image:
    radial-gradient(
      ellipse at center,
      #000 35%,
      transparent 73%
    )
}

/* Exclude the full person, including faded shoulders and clothing, from the animation. */

.binary-field--back{
  z-index:0;
  inset:-4% -18% 0;
  clip-path:polygon(
    0 0,
    100% 0,
    100% 70%,
    80% 65%,
    74% 58%,
    74% 3%,
    26% 3%,
    26% 58%,
    20% 65%,
    0 70%
  );
  -webkit-mask-image:
    linear-gradient(
      transparent,
      #000 12%,
      #000 75%,
      transparent
    );
  mask-image:
    linear-gradient(
      transparent,
      #000 12%,
      #000 75%,
      transparent
    )
}

.binary-field span{
  position:absolute;
  top:0;
  left:calc(var(--i) * 6.6%);
  width:1ch;
  word-break:break-all;
  white-space:normal;
  line-height:1.85;
  font-size:16px;
  font-weight:500;
  color:#945035;
  opacity:.85;
  animation:binary-fall var(--speed) linear infinite;
  animation-delay:var(--delay)
}

.hero-profile .profile-note{
  display:block;
  border-left:0;
  padding:22px 0 0;
  margin:0
}

.hero-profile .focus-line{
  display:inline-block;
  padding:6px 10px 6px 0;
  margin-right:7px;
  border:0;
  font-size:12px;
  white-space:normal
}

.hero-profile .focus-line>span{
  margin-right:5px
}

.hero-profile .note-label{
  display:block
}

.hero-profile .note-bottom{
  display:none
}

@keyframes binary-fall{

  from{
    transform:translateY(-50%)
  }

  to{
    transform:translateY(0)
  }
}


@media(max-width:1000px){

  .hero-grid{
    gap:32px;
    grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)
  }
}


@media(max-width:760px){

  .hero{
    padding-top:38px
  }

  .hero-grid{
    grid-template-columns:1fr;
    gap:34px
  }

  .hero-profile{
    width:min(100%,440px);
    margin-inline:auto
  }

  .hero-profile .profile-note{
    padding-top:20px
  }

  .hero-label{
    margin-bottom:24px
  }

  .hero-profile .focus-line{
    font-size:13px
  }
}


@media(prefers-reduced-motion:reduce){

  .binary-field span{
    animation:none;
    transform:translateY(-25%)
  }
}


/* =========================
   TA PAGE
   ========================= */

.ta-page{
  max-width:900px;
  padding-block:56px 80px
}

.ta-page h1{
  font-size:clamp(30px,5vw,52px);
  margin-bottom:16px
}

.ta-intro{
  margin-bottom:44px
}

.ta-semester{
  border-top:1px solid var(--line);
  padding:26px 0
}

.ta-semester h2{
  font-size:22px;
  margin:0 0 18px;
  letter-spacing:-.03em
}

.ta-semester ul{
  margin:0;
  padding-left:22px
}

.ta-semester li{
  padding:6px 0;
  overflow-wrap:anywhere
}

.ta-semester li::marker{
  color:var(--accent)
}

.ta-semester strong{
  font-weight:500;
  color:var(--accent)
}


/* Softer binary texture behind the portrait. */

.binary-field--back span{
  opacity:.14;
  color:#b88f7d;
  font-weight:400
}