/* ============================================================
   Ruhaniya Rashed — Personal Portfolio
   Palette: ink navy · porcelain · ice blue · brass
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* colour */
  --ink:        #0B1120;
  --ink-2:      #101A2E;
  --ink-3:      #18243C;
  --ink-line:   rgba(255,255,255,.10);

  --paper:      #FBFCFE;
  --paper-2:    #F1F5FA;
  --ice:        #DDE9F7;
  --ice-static: #DDE9F7;   /* never themed — for type on the always-dark sections */
  --ice-deep:   #B9D0E8;

  --gold:       #C9A24A;
  --gold-2:     #E4C77E;
  --gold-soft:  rgba(201,162,74,.14);
  --gold-ink:   #7F6318;

  --azure:      #4C7DF0;

  /* University of Virginia — Jefferson Blue and Rotunda Orange */
  --uva-blue:   #232D4B;
  --uva-orange: #E57200;
  --uva-orange-lt: #F58A1F;   /* the same hue, lifted for dark grounds */
  --uva-mark:   var(--uva-orange);
  --uva-wash:   rgba(255,255,255,.07);

  /* themed surfaces — remapped wholesale for dark mode */
  --surface:    #FFFFFF;
  --surface-2:  #F7F9FC;
  --line:       rgba(14,22,38,.075);
  --line-2:     rgba(14,22,38,.08);
  --line-3:     rgba(14,22,38,.14);
  --line-4:     rgba(14,22,38,.18);
  --shadow-soft:   rgba(14,22,38,.28);
  --shadow-mid:    rgba(14,22,38,.36);
  --shadow-strong: rgba(14,22,38,.42);
  --ice-fg:     #2C4262;
  --impact-fg:  #3A4C66;

  /* capability accents — one per category, light-mode values */
  --cap-azure: #2F5FD0;
  --cap-brass: #9A741F;
  --cap-teal:  #10685F;
  --cap-plum:  #7E3557;

  --text:       #0E1626;
  --text-mid:   #4A5769;
  --text-soft:  #6B7789;
  --on-dark:    #EEF3FA;
  --on-dark-mid:rgba(238,243,250,.68);
  --on-dark-soft:rgba(238,243,250,.44);

  /* type */
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* rhythm */
  --shell: 1240px;
  --gut: clamp(20px, 5vw, 64px);
  --sec-y: clamp(88px, 12vw, 168px);

  /* motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: .8s;

  --radius: 16px;
  --radius-lg: 24px;
}

/* ---------- 1b. Dark theme ----------
   Only the tokens change; every component keeps one set of rules. */
:root[data-theme="dark"]{
  --ink:        #05090F;
  --ink-2:      #0A111E;
  --ink-3:      #121C2E;
  --ink-line:   rgba(255,255,255,.09);

  --paper:      #0C1220;
  --paper-2:    #090F1B;
  --ice:        #17253C;
  --ice-deep:   #35516F;
  --ice-fg:     #BCD3EE;
  --impact-fg:  #A9BDD6;

  --gold-ink:   #E4C77E;
  --uva-wash:   rgba(255,255,255,.05);

  --text:       #E9EFF8;
  --text-mid:   #A6B3C6;
  --text-soft:  #7C899C;

  --surface:    #121B2C;
  --surface-2:  #0E1626;
  --line:       rgba(255,255,255,.075);
  --line-2:     rgba(255,255,255,.10);
  --line-3:     rgba(255,255,255,.16);
  --line-4:     rgba(255,255,255,.24);
  --shadow-soft:   rgba(0,0,0,.55);
  --shadow-mid:    rgba(0,0,0,.62);
  --shadow-strong: rgba(0,0,0,.7);

  --cap-azure: #6E9BFF;
  --cap-brass: #E0B45C;
  --cap-teal:  #3FC0B2;
  --cap-plum:  #E081AC;
}

/* Cross-fade between themes rather than snapping. */
.js body,
.js .section, .js .hero, .js .marquee, .js .impact, .js .footer, .js .nav,
.js .card, .js .tl__body, .js .proj, .js .skill, .js .lang, .js .ccard,
.js .tr__card, .js .chips li, .js .course, .js .tl__marker, .js .theme-toggle__track,
.js .facts li, .js .facts__note, .js .proj__top, .js .proj__metrics, .js .chips,
.js .timeline__rail, .js .dotviz__grid i, .js .proj-track__rail{
  transition-property: background-color, color, border-color, box-shadow;
  transition-duration: .45s;
  transition-timing-function: var(--ease);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--sans);
  font-size:clamp(15px,1.02vw,16.5px);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ margin:0; font-weight:400; line-height:1.05; letter-spacing:-.015em; }
p{ margin:0 0 1.1em; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
mark{ background:linear-gradient(transparent 62%, var(--gold-soft) 62%); color:inherit; padding:0 .08em; }
::selection{ background:var(--gold); color:#fff; }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut); }

.skip-link{
  position:fixed; top:-100px; left:16px; z-index:999;
  background:var(--ink); color:#fff; padding:12px 18px; border-radius:10px;
  font-size:14px; transition:top .25s var(--ease);
}
.skip-link:focus-visible{ top:16px; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }

/* ---------- 3. Ambient decor ---------- */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:80; pointer-events:none;
  background:transparent;
}
.scroll-progress i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
  box-shadow:0 0 12px rgba(201,162,74,.6);
}

/* custom cursor (desktop / fine pointer only) */
.cursor{ display:none; }
@media (pointer:fine){
  .cursor{
    display:block; position:fixed; top:0; left:0; z-index:90; pointer-events:none;
    mix-blend-mode:normal;
  }
  .cursor__dot,.cursor__ring{
    position:absolute; border-radius:50%; transform:translate(-50%,-50%);
    will-change:transform,width,height;
  }
  .cursor__dot{ width:6px; height:6px; background:var(--gold); }
  .cursor__ring{
    width:34px; height:34px; border:1px solid rgba(201,162,74,.5);
    transition:width .3s var(--ease), height .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
  }
  .cursor.is-hot .cursor__ring{ width:58px; height:58px; background:rgba(201,162,74,.12); border-color:transparent; }
  .cursor.is-hot .cursor__dot{ opacity:0; }
}

/* ---------- 4. Preloader ---------- */
/* The loading screen only exists while the engine is alive: if the head watchdog
   drops the .js class (script failed), the overlay disappears with it. */
.preloader{ display:none; }
.js .preloader{
  position:fixed; inset:0; z-index:200; background:var(--ink);
  display:grid; place-items:center;
  transition:opacity .6s var(--ease), visibility .6s;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader__inner{ text-align:center; width:min(420px,72vw); }
.preloader__name{
  font-family:var(--serif); font-size:clamp(34px,6vw,58px); color:var(--on-dark);
  display:flex; justify-content:center; gap:.01em; margin-bottom:26px;
}
.preloader__name span{
  opacity:0; transform:translateY(16px);
  animation:preIn .7s var(--ease-out) forwards;
}
.preloader__name span:nth-child(1){animation-delay:.05s}
.preloader__name span:nth-child(2){animation-delay:.10s}
.preloader__name span:nth-child(3){animation-delay:.15s}
.preloader__name span:nth-child(4){animation-delay:.20s}
.preloader__name span:nth-child(5){animation-delay:.25s}
.preloader__name span:nth-child(6){animation-delay:.30s}
.preloader__name span:nth-child(7){animation-delay:.35s}
.preloader__name span:nth-child(8){animation-delay:.40s}
@keyframes preIn{ to{ opacity:1; transform:none; } }
.preloader__bar{ height:1px; background:rgba(255,255,255,.14); overflow:hidden; }
.preloader__bar i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
  transition:width .25s linear;
}
.preloader__count{
  margin-top:14px; font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  color:var(--on-dark-soft);
}
.preloader__count small{ font-size:10px; }

/* ---------- 5. Navigation ---------- */
/* Solid by default so the light nav type always has a dark ground; the transparent
   over-hero treatment is a JS-driven enhancement. */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:70;
  background:rgba(11,17,32,.9);
  backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid var(--ink-line);
  transition:transform .5s var(--ease), background .4s var(--ease),
             backdrop-filter .4s var(--ease), border-color .4s var(--ease);
}
.nav.is-hidden{ transform:translateY(-104%); }
.js .nav:not(.is-solid){
  background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
  border-bottom-color:transparent;
}
.nav__inner{
  max-width:var(--shell); margin-inline:auto; padding:18px var(--gut);
  display:flex; align-items:center; gap:clamp(16px,3vw,40px);
}
.brand{ display:flex; align-items:center; gap:11px; margin-right:auto; }
.brand__mark{
  width:34px; height:34px; display:grid; place-items:center; flex:none;
  border:1px solid rgba(201,162,74,.55); border-radius:9px;
  font-family:var(--serif); font-size:15px; color:var(--gold);
  transition:background .35s var(--ease), color .35s var(--ease);
}
.brand:hover .brand__mark{ background:var(--gold); color:var(--ink); }
.brand__text{
  font-family:var(--serif); font-size:19px; color:var(--on-dark); letter-spacing:.005em;
}
.nav__links{ display:flex; gap:clamp(14px,2vw,28px); }
.nav__links a{
  position:relative; font-size:13.5px; letter-spacing:.01em; color:var(--on-dark-mid);
  padding:6px 0; transition:color .3s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav__links a:hover, .nav__links a.is-current{ color:var(--on-dark); }
.nav__links a:hover::after, .nav__links a.is-current::after{ transform:scaleX(1); transform-origin:left; }

.burger{ display:none; width:38px; height:38px; position:relative; }
.burger i{
  position:absolute; left:9px; width:20px; height:1.5px; background:var(--on-dark);
  transition:transform .4s var(--ease), opacity .3s;
}
.burger i:nth-child(1){ top:16px; }
.burger i:nth-child(2){ top:22px; }
.burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

/* drawer */
.drawer{
  position:fixed; inset:0; z-index:65; background:var(--ink);
  display:flex; flex-direction:column; justify-content:center;
  padding:100px var(--gut) 40px;
  opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility .45s;
}
.drawer.is-open{ opacity:1; visibility:visible; }
.drawer__links{ display:flex; flex-direction:column; gap:4px; }
.drawer__links a{
  display:flex; align-items:baseline; gap:16px;
  font-family:var(--serif); font-size:clamp(30px,9vw,46px); color:var(--on-dark);
  padding:10px 0; border-bottom:1px solid var(--ink-line);
  opacity:0; transform:translateY(22px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s;
}
.drawer.is-open .drawer__links a{ opacity:1; transform:none; }
.drawer.is-open .drawer__links a:nth-child(1){transition-delay:.06s}
.drawer.is-open .drawer__links a:nth-child(2){transition-delay:.11s}
.drawer.is-open .drawer__links a:nth-child(3){transition-delay:.16s}
.drawer.is-open .drawer__links a:nth-child(4){transition-delay:.21s}
.drawer.is-open .drawer__links a:nth-child(5){transition-delay:.26s}
.drawer.is-open .drawer__links a:nth-child(6){transition-delay:.31s}
.drawer.is-open .drawer__links a:nth-child(7){transition-delay:.36s}
.drawer__links a:hover{ color:var(--gold); }
.drawer__links em{ font-family:var(--mono); font-style:normal; font-size:12px; color:var(--gold); }
.drawer__foot{
  margin-top:36px; display:flex; flex-direction:column; gap:4px;
  font-size:14px; color:var(--on-dark-mid);
}
.drawer__foot a:hover{ color:var(--gold); }

/* ---------- 6. Buttons ---------- */
.btn{
  --bh:52px;
  position:relative; display:inline-flex; align-items:center; gap:10px;
  height:var(--bh); padding:0 26px; border-radius:100px;
  font-size:14px; font-weight:500; letter-spacing:.005em;
  overflow:hidden; isolation:isolate; white-space:nowrap;
  transition:color .35s var(--ease), border-color .35s var(--ease), transform .25s var(--ease);
}
.btn span{ position:relative; z-index:2; }
.btn svg{
  position:relative; z-index:2; width:17px; height:17px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .4s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:1; border-radius:inherit;
  transform:translateY(101%); transition:transform .45s var(--ease-out);
}
.btn:hover::before{ transform:translateY(0); }
.btn:hover svg{ transform:translateX(4px); }
.btn--sm{ --bh:40px; padding:0 18px; font-size:13px; }
.btn--lg{ --bh:60px; padding:0 34px; font-size:15px; }

.btn--gold{ background:var(--gold); color:#141B29; }
.btn--gold::before{ background:var(--ink); }
.btn--gold:hover{ color:var(--gold-2); }

.btn--ghost{ border:1px solid rgba(238,243,250,.28); color:var(--on-dark); }
.btn--ghost::before{ background:var(--on-dark); }
.btn--ghost:hover{ color:var(--ink); border-color:var(--on-dark); }

/* ---------- 7. Shared section furniture ---------- */
.section{ position:relative; padding-block:var(--sec-y); }
.section--dark{ background:var(--ink); color:var(--on-dark); }
.section--dark::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(900px 480px at 12% -10%, rgba(76,125,240,.13), transparent 62%),
    radial-gradient(700px 420px at 92% 108%, rgba(201,162,74,.10), transparent 60%);
}
.section--dark > .shell{ position:relative; z-index:1; }

.eyebrow{
  display:flex; align-items:center; gap:14px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-soft); margin:0 0 22px;
}
.eyebrow--light{ color:var(--gold); }
.eyebrow__line{
  width:clamp(28px,5vw,56px); height:1px; background:currentColor; flex:none;
  transform-origin:left; transition:transform .9s var(--ease-out) .1s;
}
.js .eyebrow__line{ transform:scaleX(0); }
.js .eyebrow.is-in .eyebrow__line{ transform:scaleX(1); }

.sec-head{ margin-bottom:clamp(44px,6vw,76px); max-width:820px; }
.sec-head--center{ margin-inline:auto; text-align:center; }
.sec-head--center .eyebrow{ justify-content:center; }
.sec-title{
  font-family:var(--serif); font-size:clamp(38px,6.4vw,80px); line-height:.98; color:var(--text);
}
.sec-title em{ font-style:italic; color:var(--gold); }
.sec-title--light{ color:var(--on-dark); }
.sec-lede{
  margin-top:22px; font-size:clamp(15px,1.25vw,17.5px); line-height:1.75;
  color:var(--text-mid); max-width:64ch;
}
.section--dark .sec-lede{ color:var(--on-dark-mid); }
.sec-head--center .sec-lede{ margin-inline:auto; }

/* line-mask headline reveal */
.line{ display:block; overflow:hidden; padding-bottom:.06em; }
.line > [data-split]{ display:block; will-change:transform; }
.word{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.word > i{
  display:inline-block; font-style:inherit; transform:translateY(105%);
  transition:transform .95s var(--ease-out);
}
.is-in .word > i{ transform:translateY(0); }

/* generic reveal — gated on .js so the page is fully readable without scripts */
.js [data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.js [data-reveal].is-in{ opacity:1; transform:none; }
[data-delay="1"]{ transition-delay:.09s; }
[data-delay="2"]{ transition-delay:.18s; }
[data-delay="3"]{ transition-delay:.27s; }
[data-delay="4"]{ transition-delay:.36s; }

/* ---------- 8. Hero ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  background:var(--ink); color:var(--on-dark);
  padding:clamp(108px,13vh,132px) 0 clamp(60px,9vh,92px); overflow:hidden;
}
.hero__glow{
  position:absolute; inset:0;
  background:
    radial-gradient(760px 560px at 78% 18%, rgba(76,125,240,.20), transparent 60%),
    radial-gradient(680px 520px at 8% 88%, rgba(201,162,74,.14), transparent 62%),
    radial-gradient(1000px 700px at 50% -20%, rgba(221,233,247,.07), transparent 70%);
  animation:drift 18s ease-in-out infinite alternate;
}
@keyframes drift{ to{ transform:translate3d(0,-2.5%,0) scale(1.06); } }
.hero__grid-lines{
  position:absolute; inset:0; max-width:var(--shell); margin-inline:auto;
  padding-inline:var(--gut); display:flex; justify-content:space-between;
}
.hero__grid-lines i{ width:1px; background:linear-gradient(180deg,transparent,rgba(255,255,255,.055) 22%,rgba(255,255,255,.055) 78%,transparent); }

.hero__shell{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.24fr .76fr; gap:clamp(32px,5vw,72px); align-items:center;
}
.hero .eyebrow{ color:var(--gold); }
.hero__title{
  font-family:var(--serif); font-size:clamp(56px,10.6vw,142px); line-height:.9;
  letter-spacing:-.025em; margin:0 0 clamp(14px,2.2vh,24px); color:#fff;
}
.hero__title .line:nth-child(2) > [data-split]{ padding-left:.06em; color:var(--ice-static); }

.hero__role{
  display:flex; align-items:center; flex-wrap:wrap; gap:12px;
  font-family:var(--mono); font-size:clamp(11.5px,1.05vw,13px);
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-2);
  margin:0 0 clamp(16px,2.6vh,26px);
}
.hero__role-sep{ width:26px; height:1px; background:rgba(201,162,74,.5); }
.rotator{ position:relative; display:inline-grid; color:var(--on-dark-mid); }
.rotator__item{
  grid-area:1/1; opacity:0; transform:translateY(8px);
  transition:opacity .3s var(--ease), transform .5s var(--ease);
}
.rotator__item.is-active{ opacity:1; transform:none; transition-delay:.3s; }

.hero__lede{
  max-width:56ch; font-size:clamp(15px,1.3vw,18px); line-height:1.78;
  color:var(--on-dark-mid); margin-bottom:clamp(20px,3.2vh,34px);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:clamp(26px,4.4vh,56px); }

.hero__stats{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2.4vw,34px);
  margin:0; padding-top:clamp(18px,2.6vh,28px); border-top:1px solid var(--ink-line); max-width:620px;
}
.stat{ display:flex; flex-direction:column; justify-content:flex-end; }
.stat dt{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-dark-soft); margin-bottom:8px;
}
.stat dd{
  margin:0; font-family:var(--serif); font-size:clamp(30px,3.4vw,44px); line-height:1; color:var(--gold-2);
}

/* portrait */
.hero__portrait{ justify-self:end; width:100%; max-width:390px; }
.portrait{ position:relative; }
.portrait__frame{
  position:relative; border-radius:200px 200px var(--radius-lg) var(--radius-lg);
  overflow:hidden; aspect-ratio:398/560;
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(201,162,74,.08);
}
.portrait__frame img{
  width:100%; height:100%; object-fit:cover; object-position:50% 22%;
  filter:saturate(1.02) contrast(1.03);
  transform:scale(1.02); transition:transform 1.2s var(--ease-out);
}
.portrait:hover .portrait__frame img{ transform:scale(1.06); }
.portrait__frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(11,17,32,0) 42%, rgba(11,17,32,.62));
}
.portrait__scan{
  position:absolute; left:0; right:0; height:34%; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(201,162,74,.16), transparent);
  animation:scan 6.5s var(--ease) infinite;
}
@keyframes scan{ 0%{top:-40%} 55%{top:110%} 100%{top:110%} }

.portrait__badge{
  position:absolute; left:-14px; bottom:24px; z-index:3;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-radius:14px; padding:13px 17px; min-width:196px;
  box-shadow:0 20px 44px -18px rgba(0,0,0,.7);
}
.portrait__badge-label{
  display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold); margin-bottom:5px;
}
.portrait__badge strong{ display:block; font-family:var(--serif); font-size:19px; color:#fff; line-height:1.15; }
.portrait__badge > span:last-child{ font-size:11.5px; color:var(--on-dark-soft); }

.hero__scroll{
  position:absolute; right:var(--gut); bottom:26px; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--on-dark-soft); transition:color .3s;
}
.hero__scroll:hover{ color:var(--gold); }
.hero__scroll i{ width:1px; height:44px; background:rgba(255,255,255,.2); position:relative; overflow:hidden; }
.hero__scroll i::after{
  content:""; position:absolute; left:0; width:100%; height:45%;
  background:var(--gold); animation:scrollCue 2.1s var(--ease) infinite;
}
@keyframes scrollCue{ 0%{top:-50%} 70%,100%{top:110%} }

/* ---------- 9. Marquee ---------- */
.marquee{
  background:var(--ink-2); border-block:1px solid var(--ink-line);
  overflow:hidden; padding:15px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marquee__track{ display:flex; gap:26px; width:max-content; animation:slide 46s linear infinite; }
.marquee span{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-dark-soft); white-space:nowrap;
}
.marquee em{ color:var(--gold); font-style:normal; font-size:8px; align-self:center; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.marquee:hover .marquee__track{ animation-play-state:paused; }

/* ---------- 10. About ---------- */
.section--about{ background:var(--paper); }
.about__grid{
  display:grid; grid-template-columns:1.35fr .8fr; gap:clamp(34px,5vw,80px); align-items:start;
}
.about__narrative p{ font-size:clamp(16px,1.35vw,19px); line-height:1.82; color:var(--text-mid); }
.about__narrative > p:first-child::first-letter{
  float:left; font-family:var(--serif); font-size:4.1em; line-height:.82;
  padding:.06em .12em 0 0; color:var(--text);
}
/* scroll-scrubbed text */
.scrub{ color:var(--text-mid); }
.scrub .w{ transition:opacity .5s var(--ease); }
.js .scrub.is-armed .w{ opacity:.34; }
.js .scrub.is-armed .w.on{ opacity:1; }

.pull{
  margin:34px 0; padding:26px 30px; border-left:2px solid var(--gold);
  background:linear-gradient(90deg, var(--gold-soft), transparent 70%);
  border-radius:0 var(--radius) var(--radius) 0;
}
.pull p{
  margin:0; font-family:var(--serif); font-size:clamp(18px,1.7vw,23px); line-height:1.5;
  color:var(--text); font-style:italic;
}

.about__panel{ position:sticky; top:110px; }
.card{
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--radius-lg);
  padding:clamp(24px,2.6vw,34px);
  box-shadow:0 24px 60px -34px var(--shadow-soft);
}
.card__title{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-soft); margin-bottom:20px;
}
.facts li{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:11px 0; border-bottom:1px solid var(--line);
}
.facts li:last-child{ border-bottom:0; }
.facts span{ font-size:12.5px; color:var(--text-soft); flex:none; }
.facts strong{ font-weight:500; font-size:14px; text-align:right; color:var(--text); }
.facts__note{
  margin-top:18px; padding-top:18px; border-top:1px solid var(--line);
}
.facts__note p{ margin:0; font-size:13.5px; line-height:1.7; color:var(--text-soft); }

/* ---------- 11. Ambition / roadmap ---------- */
.roadmap{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-top:1px solid var(--ink-line); margin-top:clamp(30px,4vw,54px);
}
.roadmap__step{
  position:relative; display:flex; flex-direction:column; align-items:flex-start;
  padding:38px clamp(16px,2vw,28px) 34px;
  border-right:1px solid var(--ink-line);
}
.roadmap__step:last-child{ border-right:0; }
.js .roadmap__step{
  opacity:0; transform:translateY(30px);
  transition:opacity .85s var(--ease-out), transform .85s var(--ease-out), background .4s var(--ease);
}
.roadmap__step.is-in{ opacity:1; transform:none; }
.roadmap__step:hover{ background:rgba(255,255,255,.035); }
.roadmap__dot{
  position:absolute; top:-5px; left:clamp(16px,2vw,28px);
  width:9px; height:9px; border-radius:50%; background:var(--ink);
  border:1px solid var(--gold); transform:scale(0);
  transition:transform .6s var(--ease-out) .25s, background .4s;
}
.roadmap__step.is-in .roadmap__dot{ transform:scale(1); }
.roadmap__step:hover .roadmap__dot{ background:var(--gold); box-shadow:0 0 0 6px rgba(201,162,74,.14); }
.roadmap__index{
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  color:var(--gold); margin-bottom:16px;
}
.roadmap__step h3{
  font-family:var(--serif); font-size:clamp(21px,2vw,27px); color:var(--on-dark); margin-bottom:12px;
}
.roadmap__step p{ font-size:14px; line-height:1.72; color:var(--on-dark-mid); }
.roadmap__when{
  display:inline-block; margin-top:auto; padding-top:6px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-soft);
  border:1px solid var(--ink-line); border-radius:100px; padding:5px 11px;
}
.ambition__quote{
  margin-top:clamp(48px,6vw,84px); max-width:900px; margin-inline:auto; text-align:center;
}
.ambition__quote p{
  margin:0; font-family:var(--serif); font-size:clamp(21px,2.6vw,34px); line-height:1.42;
  color:var(--ice-static); font-style:italic;
}

/* ---------- 12. Experience timeline ---------- */
.section--experience{ background:var(--paper-2); }
.timeline{ position:relative; padding-left:0; }
.timeline__rail{
  position:absolute; left:calc(var(--tl-col, 190px) + 30px); top:8px; bottom:8px; width:2px;
  background:var(--line-3); border-radius:2px;
}
.timeline__fill{
  display:block; width:100%; height:0%; border-radius:2px;
  background:linear-gradient(180deg,var(--gold),var(--gold-2));
  box-shadow:0 0 14px rgba(201,162,74,.5);
}
.tl{
  position:relative; display:grid;
  grid-template-columns:var(--tl-col,190px) 62px minmax(0,1fr);
  gap:0; padding-bottom:clamp(34px,4vw,56px);
}
.tl:last-child{ padding-bottom:0; }
.tl__marker{
  grid-column:2; justify-self:center; margin-top:7px;
  width:16px; height:16px; border-radius:50%;
  background:var(--paper-2); border:2px solid var(--line-3);
  display:grid; place-items:center; z-index:2;
  transition:border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.tl__marker span{
  width:6px; height:6px; border-radius:50%; background:var(--line-4);
  transition:background .5s var(--ease), transform .5s var(--ease);
}
.tl.is-in .tl__marker{ border-color:var(--gold); box-shadow:0 0 0 6px rgba(201,162,74,.13); }
.tl.is-in .tl__marker span{ background:var(--gold); transform:scale(1.15); }

.tl__date{
  grid-column:1; text-align:right; padding-right:24px; padding-top:4px;
  display:flex; flex-direction:column; align-items:flex-end; gap:8px;
}
.js .tl__date{
  opacity:0; transform:translateX(-16px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.tl.is-in .tl__date{ opacity:1; transform:none; }
.tl__date time{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  color:var(--text-soft); white-space:nowrap;
}
.tag{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  padding:4px 9px; border-radius:100px;
}
.tag--done{
  background:var(--gold-soft); color:var(--gold-ink); border:1px solid rgba(201,162,74,.4);
}
.tag--done::before{
  content:"✓"; margin-right:6px; font-size:9px; vertical-align:middle;
}

.tl__body{
  grid-column:3; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:clamp(22px,2.4vw,32px);
  transition:box-shadow .45s var(--ease), border-color .45s var(--ease);
  box-shadow:0 18px 48px -34px var(--shadow-soft);
}
.js .tl__body{
  opacity:0; transform:translateY(26px);
  transition:opacity .85s var(--ease-out) .1s, transform .85s var(--ease-out) .1s,
             box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.tl.is-in .tl__body{ opacity:1; transform:none; }
.tl__body:hover{ box-shadow:0 30px 66px -32px var(--shadow-mid); border-color:rgba(201,162,74,.34); }
.tl__body h3{
  font-family:var(--serif); font-size:clamp(22px,2.2vw,30px); color:var(--text); margin-bottom:7px;
}
.tl__org{ margin:0 0 4px; font-size:14.5px; font-weight:500; color:var(--gold); }
.tl__meta{
  margin:0 0 18px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--text-soft);
}
.tl__points li{
  position:relative; padding-left:22px; margin-bottom:9px;
  font-size:14.5px; line-height:1.72; color:var(--text-mid);
}
.tl__points li::before{
  content:""; position:absolute; left:2px; top:.72em; width:7px; height:1px; background:var(--gold);
}
.tl__points strong{ color:var(--text); font-weight:600; }
.chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.chips li{
  font-size:11.5px; letter-spacing:.02em; padding:5px 11px; border-radius:100px;
  background:var(--ice); color:var(--ice-fg);
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.chips li:hover{ background:var(--gold); color:#141B29; transform:translateY(-2px); }

/* ---------- 13. Education track ---------- */
.track{ position:relative; max-width:1040px; }
.track__rail{
  position:absolute; left:9px; top:10px; bottom:10px; width:2px; background:rgba(255,255,255,.10);
}
.track__fill{
  display:block; width:100%; height:0%;
  background:linear-gradient(180deg,var(--gold),var(--gold-2));
  box-shadow:0 0 14px rgba(201,162,74,.55);
}
.tr{ position:relative; padding:0 0 clamp(30px,3.6vw,46px) 46px; }
.tr:last-child{ padding-bottom:0; }
.tr__node{
  position:absolute; left:3px; top:8px; width:15px; height:15px; border-radius:50%;
  background:var(--ink); border:2px solid rgba(255,255,255,.22);
  transition:border-color .5s var(--ease), box-shadow .5s var(--ease), background .5s var(--ease);
}
.tr.is-in .tr__node{ border-color:var(--gold); background:var(--gold); box-shadow:0 0 0 6px rgba(201,162,74,.16); }
.tr.is-in .tr__node--now{ box-shadow:0 0 0 6px rgba(201,162,74,.16), 0 0 22px rgba(201,162,74,.45); }

.tr__year{
  display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); margin-bottom:12px;
}
.js .tr__year{
  opacity:0; transform:translateX(-14px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.tr.is-in .tr__year{ opacity:1; transform:none; }
.tr__card{
  background:rgba(255,255,255,.045); border:1px solid var(--ink-line);
  border-radius:var(--radius-lg); padding:clamp(22px,2.4vw,32px);
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.js .tr__card{
  opacity:0; transform:translateY(28px);
  transition:opacity .85s var(--ease-out) .12s, transform .85s var(--ease-out) .12s,
             border-color .4s var(--ease), background .4s var(--ease);
}
.tr.is-in .tr__card{ opacity:1; transform:none; }
.tr__card:hover{ border-color:rgba(201,162,74,.35); background:rgba(255,255,255,.06); }
.tr__card h3{ font-family:var(--serif); font-size:clamp(22px,2.3vw,31px); color:#fff; margin-bottom:6px; }
.tr__place{ margin:0 0 14px; font-size:14px; color:var(--gold-2); }
.tr__card p{ font-size:14.5px; line-height:1.75; color:var(--on-dark-mid); margin-bottom:0; }
.tr__card p + p{ margin-top:.9em; }
.tr__card strong{ color:var(--on-dark); font-weight:600; }
.tr__card--feature{ background:rgba(255,255,255,.065); border-color:rgba(201,162,74,.25); }
.tr__badge{
  display:inline-block; margin-bottom:14px; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.18em; text-transform:uppercase; padding:5px 11px; border-radius:100px;
  background:var(--gold); color:var(--ink);
}



.coursework{ margin-top:clamp(46px,5vw,74px); padding-top:clamp(34px,4vw,48px); border-top:1px solid var(--ink-line); }
.coursework__title{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin-bottom:22px;
}
.coursework__grid{ display:flex; flex-wrap:wrap; gap:9px; }
.course{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  font-size:13px; color:var(--on-dark-mid);
  border:1px solid var(--ink-line); border-radius:100px; padding:8px 15px;
  transition:border-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease), background .35s var(--ease);
}
.course::after{
  content:attr(data-grade); font-family:var(--mono); font-size:10px; color:var(--gold);
  border-left:1px solid var(--ink-line); padding-left:10px;
}
.course:hover{ border-color:rgba(201,162,74,.45); color:var(--on-dark); transform:translateY(-2px); background:rgba(255,255,255,.04); }
.coursework__note{ margin:18px 0 0; font-size:12.5px; color:var(--on-dark-soft); }

/* ---------- 14. Skills ---------- */
.section--skills{ background:var(--paper); }
.skills__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,22px); }
.skill{
  position:relative; background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--radius-lg); padding:clamp(24px,2.4vw,32px); overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.skill::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
  transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease-out);
}
.skill:hover, .skill:focus-within{
  transform:translateY(-6px); box-shadow:0 34px 64px -36px var(--shadow-mid);
}
.skill:hover::before, .skill:focus-within::before{ transform:scaleX(1); }

.langs{
  margin-top:clamp(24px,2.6vw,34px); display:flex; flex-wrap:wrap; gap:14px;
}
.lang{
  display:flex; align-items:center; gap:14px; padding:14px 22px 14px 14px;
  background:var(--surface); border:1px solid var(--line-2); border-radius:100px;
  transition:transform .4s var(--ease), border-color .4s var(--ease);
}
.lang:hover{ transform:translateY(-3px); border-color:rgba(201,162,74,.35); }
.lang__flagless{
  width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:50%;
  background:var(--ink); color:var(--gold); font-family:var(--mono); font-size:12px; letter-spacing:.06em;
}
.lang strong{ display:block; font-weight:500; font-size:14.5px; }
.lang span{ font-size:12px; color:var(--text-soft); }

/* ---------- 15. Impact counters ---------- */
.impact{ background:var(--ice); padding-block:clamp(52px,6vw,84px); }
.impact__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,44px); }
.impact__item{ text-align:left; }
.impact__item strong{
  display:block; font-family:var(--serif); font-size:clamp(40px,5vw,66px); line-height:1;
  color:var(--text); margin-bottom:10px;
}
/* direct child only — the counter <span> lives inside <strong> and must keep its size */
.impact__item > span{ font-size:13.5px; line-height:1.6; color:var(--impact-fg); display:block; max-width:26ch; }

/* ---------- 16. Work ---------- */
.section--work{ background:var(--paper-2); }
.work__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.7vw,24px); }
.proj{
  position:relative; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(24px,2.6vw,34px); overflow:hidden;
  transform-style:preserve-3d;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.proj::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(420px 240px at var(--mx,50%) var(--my,0%), rgba(201,162,74,.10), transparent 70%);
  transition:opacity .45s var(--ease);
}
.proj:hover{ box-shadow:0 40px 80px -40px var(--shadow-strong); border-color:rgba(201,162,74,.3); }
.proj:hover::after{ opacity:1; }
.proj--wide{ grid-column:span 2; }
.proj__top{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid var(--line);
}
.proj__kicker{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--gold);
}
.proj__year{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:var(--text-soft); }
.proj h3{
  font-family:var(--serif); font-size:clamp(21px,2.1vw,29px); color:var(--text);
  margin-bottom:12px; line-height:1.14;
}
.proj p{ font-size:14.3px; line-height:1.74; color:var(--text-mid); margin-bottom:20px; }
.proj__metrics{
  margin-top:auto; display:flex; flex-wrap:wrap; gap:clamp(18px,2.4vw,32px);
  padding-top:18px; border-top:1px solid var(--line);
}
.proj__metrics strong{
  display:block; font-family:var(--serif); font-size:clamp(21px,2vw,27px); color:var(--gold);
  line-height:1.1; margin-bottom:3px;
}
.proj__metrics span{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-soft);
}

/* ---------- 17. Contact ---------- */
.section--contact{ padding-bottom:clamp(70px,8vw,110px); }
.contact__head{ max-width:760px; margin-bottom:clamp(40px,5vw,64px); }
.contact__title{
  font-family:var(--serif); font-size:clamp(40px,7vw,88px); line-height:.98; color:#fff;
}
.contact__title .line:nth-child(2) > [data-split]{ color:var(--gold-2); font-style:italic; }
.contact__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.4vw,18px); }
.ccard{
  position:relative; display:flex; flex-direction:column; gap:6px;
  padding:clamp(22px,2.3vw,30px); border-radius:var(--radius-lg);
  background:rgba(255,255,255,.045); border:1px solid var(--ink-line); overflow:hidden;
  transition:background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
a.ccard:hover{ background:rgba(255,255,255,.08); border-color:rgba(201,162,74,.4); transform:translateY(-4px); }
.ccard__label{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
}
.ccard strong{ font-weight:500; font-size:clamp(14px,1.15vw,16px); color:#fff; word-break:break-word; }
.ccard__sub{ font-size:12.5px; color:var(--on-dark-soft); }
.ccard__arrow{
  position:absolute; top:20px; right:22px; font-size:15px; color:var(--on-dark-soft);
  transition:transform .4s var(--ease), color .4s var(--ease);
}
a.ccard:hover .ccard__arrow{ transform:translate(3px,-3px); color:var(--gold); }
.contact__cta{ margin-top:clamp(34px,4vw,52px); }

/* ---------- 18. Footer ---------- */
.footer{ background:var(--ink); color:var(--on-dark); border-top:1px solid var(--ink-line); padding-block:34px; }
.footer__inner{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.footer__name{ margin:0; font-family:var(--serif); font-size:21px; }
.footer__note{ margin:0; font-size:13px; color:var(--on-dark-soft); }
.footer__meta{ margin:0 0 0 auto; font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--on-dark-soft); }
.footer__top{
  width:42px; height:42px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--ink-line); color:var(--gold);
  transition:background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.footer__top:hover{ background:var(--gold); color:var(--ink); transform:translateY(-3px); }


/* ---------- 18b. Theme toggle ---------- */
.svg-sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* the control only works with the engine running — hide the dead button otherwise */
.theme-toggle{ display:none; }
.js .theme-toggle{
  display:block; flex:none; padding:4px; border-radius:100px; line-height:0;
  transition:transform .3s var(--ease);
}
.theme-toggle:hover{ transform:translateY(-1px); }
.theme-toggle__track{
  display:block; position:relative; width:58px; height:30px; border-radius:100px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
}
.theme-toggle__thumb{
  position:absolute; top:2px; left:2px; width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; background:var(--gold); color:#141B29;
  transition:transform .45s var(--ease-out), background .45s var(--ease);
}
:root[data-theme="dark"] .theme-toggle__thumb{ transform:translateX(28px); background:var(--ice-static); color:#0B1120; }
.theme-toggle svg{
  position:absolute; width:14px; height:14px; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
  transition:opacity .3s var(--ease), transform .45s var(--ease-out);
}
.theme-toggle__moon{ opacity:0; transform:rotate(-40deg) scale(.7); }
:root[data-theme="dark"] .theme-toggle__sun{ opacity:0; transform:rotate(40deg) scale(.7); }
:root[data-theme="dark"] .theme-toggle__moon{ opacity:1; transform:none; }

/* ---------- 18c. University of Virginia mark ---------- */
.uva-mark{
  flex:none; width:22px; height:18px; display:block; color:var(--uva-orange-lt);
}
.uva-mark svg{ width:100%; height:100%; display:block; }

/* the low-opacity emblem sitting inside the card, not on top of it */
.uva-wash{
  display:block;
  position:absolute; right:-14px; bottom:-16px; width:108px; height:83px;
  color:var(--uva-wash); pointer-events:none; z-index:0;
  -webkit-mask-image:linear-gradient(200deg, #000 25%, transparent 88%);
          mask-image:linear-gradient(200deg, #000 25%, transparent 88%);
}
.uva-wash svg{ width:100%; height:100%; display:block; }
.uva-wash--card{ right:24px; bottom:auto; top:22px; width:132px; height:101px; opacity:.85; }

.portrait__badge{
  position:absolute; overflow:hidden;
  background:rgba(8,13,24,.68); border-color:rgba(255,255,255,.15);
}
.portrait__badge > :not(.uva-wash){ position:relative; z-index:1; }
.portrait__badge-row{ display:flex; align-items:center; gap:9px; }
.portrait__badge-sub{ display:block; font-size:11.5px; color:var(--on-dark-soft); }
.portrait__badge-label{ color:var(--uva-orange-lt); margin-bottom:7px; }

.tr__card--uva{ position:relative; overflow:hidden; }
.tr__card--uva > :not(.uva-wash){ position:relative; z-index:1; }
.tr__card--uva .tr__badge{ background:var(--uva-orange); color:#160D02; }
.tr__card--uva .uva-mark{ color:var(--uva-orange-lt); }

/* the "you are here" step in the trajectory */
.roadmap__step--now{ background:rgba(255,255,255,.045); }
.roadmap__step--now .roadmap__index{ color:var(--uva-orange); }
.roadmap__step--now .roadmap__when{
  border-color:rgba(229,114,0,.45); color:var(--gold-2);
}

/* ---------- 18d. Capability cards ---------- */
.skill{ --cap:var(--gold); }
.skill--azure{ --cap:var(--cap-azure); }
.skill--brass{ --cap:var(--cap-brass); }
.skill--teal { --cap:var(--cap-teal); }
.skill--plum { --cap:var(--cap-plum); }

.skill::before{ background:#dce8f6; }

/* the colour wash that fills the card on hover */
.skill__fill{
  position:absolute; inset:0; z-index:0; background:#dce8f6;
  transform:translateY(101%); border-radius:inherit;
  transition:transform .55s var(--ease-out);
}
.skill > :not(.skill__fill){ position:relative; z-index:1; }
.skill:hover, .skill:focus-within{ border-color:#dce8f6; }
.skill:hover .skill__fill, .skill:focus-within .skill__fill{ transform:translateY(0); }

.skill__title{ margin:0; }
.skill__head{
  display:block; width:100%; text-align:left; padding:0; cursor:default;
  color:inherit; font:inherit;
}
.skill__num{
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  color:var(--cap); margin-bottom:14px; transition:color .4s var(--ease);
}
.skill__name{
  display:block; font-family:var(--serif); font-weight:400; letter-spacing:-.015em;
  font-size:clamp(20px,1.9vw,25px); line-height:1.05; color:var(--text);
  margin-bottom:16px; transition:color .4s var(--ease);
}
.skill__chev{ display:none; }
.skill__panel{ overflow:hidden; }
.skill ul{ display:grid; gap:9px; }
.skill li{
  position:relative; padding-left:17px; font-size:13.8px; color:var(--text-mid); line-height:1.5;
  transition:color .4s var(--ease);
}
.skill li::before{
  content:""; position:absolute; left:0; top:.6em; width:5px; height:5px; border-radius:50%;
  background:var(--ice-deep); transition:background .4s var(--ease);
}
/* on hover the whole card flips to the accent, so every text layer lifts to white */
.skill:hover .skill__num, .skill:focus-within .skill__num,
.skill:hover .skill__name, .skill:focus-within .skill__name,
.skill:hover li, .skill:focus-within li{ color:#000; }
.skill:hover li::before, .skill:focus-within li::before{ background:rgba(0,0,0,.45); }
:root[data-theme="dark"] .skill:hover .skill__num,
:root[data-theme="dark"] .skill:focus-within .skill__num,
:root[data-theme="dark"] .skill:hover .skill__name,
:root[data-theme="dark"] .skill:focus-within .skill__name,
:root[data-theme="dark"] .skill:hover li,
:root[data-theme="dark"] .skill:focus-within li{ color:#000; }
:root[data-theme="dark"] .skill:hover li::before,
:root[data-theme="dark"] .skill:focus-within li::before{ background:rgba(0,0,0,.45); }

/* ---------- 18e. Project impact visuals ---------- */
.proj-track{ margin:4px 0 20px; }
.proj-track__label{
  display:block; font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); margin-bottom:14px;
}
.proj-track__steps{
  position:relative; display:flex; justify-content:space-between; gap:6px;
  padding-top:4px;
}
.proj-track__rail{
  position:absolute; left:4px; right:4px; top:8px; height:2px;
  background:var(--line-3); border-radius:2px; overflow:hidden;
}
.proj-track__rail i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
  transition:width 1.25s var(--ease-out) .15s;
}
.proj-track[data-track-fill].is-in .proj-track__rail i{ width:100%; }
.proj-track__steps li{
  position:relative; flex:1 1 0; min-width:0; text-align:center;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-soft); padding-top:18px;
}
.track-dot{
  position:absolute; top:2px; left:50%; transform:translateX(-50%) scale(.4);
  width:14px; height:14px; border-radius:50%;
  background:var(--surface); border:2px solid var(--line-3);
  transition:transform .5s var(--ease-out), border-color .5s var(--ease), background .5s var(--ease);
}
.proj-track[data-track-fill].is-in .track-dot{
  transform:translateX(-50%) scale(1); border-color:var(--gold); background:var(--gold);
}
.proj-track__steps li:nth-child(2) .track-dot{ transition-delay:.18s; }
.proj-track__steps li:nth-child(3) .track-dot{ transition-delay:.34s; }
.proj-track__steps li:nth-child(4) .track-dot{ transition-delay:.5s; }
.proj-track__steps li:nth-child(5) .track-dot{ transition-delay:.66s; }
.proj-track__steps li:nth-child(6) .track-dot{ transition-delay:.82s; }
.proj-track__outcome{
  margin:16px 0 0; font-size:13px; line-height:1.6; color:var(--text-mid);
  padding-left:13px; border-left:2px solid var(--gold);
}

/* three-across cards are too narrow for five inline labels — stack them there */
.proj:not(.proj--wide) .proj-track__steps{
  flex-direction:column; gap:11px; padding-left:22px;
}
.proj:not(.proj--wide) .proj-track__steps li{ text-align:left; padding-top:0; font-size:10px; }
.proj:not(.proj--wide) .proj-track__rail{
  left:6px; right:auto; top:4px; bottom:4px; width:2px; height:auto;
}
.proj:not(.proj--wide) .proj-track__rail i{ width:100%; height:0; transition:height 1.25s var(--ease-out) .15s; }
.proj:not(.proj--wide) .proj-track[data-track-fill].is-in .proj-track__rail i{ height:100%; }
.proj:not(.proj--wide) .track-dot{ top:50%; left:-22px; transform:translateY(-50%) scale(.4); }
.proj:not(.proj--wide) .proj-track[data-track-fill].is-in .track-dot{ transform:translateY(-50%) scale(1); }

/* the 140 marks are one per real data point, not decoration */
.dotviz{ margin:2px 0 22px; }
.dotviz__grid{
  display:grid; grid-template-columns:repeat(35,1fr); gap:4px; margin-bottom:14px;
}
.dotviz__grid i{
  display:block; aspect-ratio:1; border-radius:50%; background:var(--ice-deep);
  opacity:0; transform:scale(.3);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out), background .45s var(--ease);
}
.dotviz.is-in .dotviz__grid i{ opacity:1; transform:none; }
.proj:hover .dotviz__grid i{ background:var(--gold); }
.dotviz__caption{
  display:flex; align-items:flex-start; gap:8px; margin:0;
  font-size:11.5px; line-height:1.55; color:var(--text-soft);
}
.dotviz__key{
  flex:none; width:7px; height:7px; border-radius:50%; background:var(--ice-deep); margin-top:.42em;
}

/* ---------- 19. Responsive ---------- */
@media (max-width:1180px){
  .roadmap{ grid-template-columns:repeat(2,1fr); }
  .roadmap__step:nth-child(2){ border-right:0; }
  .roadmap__step:nth-child(3),
  .roadmap__step:nth-child(4){ border-top:1px solid var(--ink-line); }
  .roadmap__step:nth-child(3) .roadmap__dot,
  .roadmap__step:nth-child(4) .roadmap__dot{ top:-5px; }
  .skills__grid{ grid-template-columns:repeat(2,1fr); }
  .work__grid{ grid-template-columns:repeat(2,1fr); }
  .contact__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:1024px){
  .nav__links{ display:none; }
  .burger{ display:block; }
  .nav__cta{ display:none; }
  .theme-toggle{ margin-left:auto; }
  .hero__shell{ grid-template-columns:1.1fr .9fr; gap:clamp(24px,4vw,44px); }
  .hero__portrait{ max-width:320px; }
  .about__grid{ grid-template-columns:1fr; }
  .about__panel{ position:static; }
  .impact__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  .hero__shell{ grid-template-columns:1fr; gap:40px; }
  .hero__portrait{ justify-self:start; max-width:280px; order:-1; }
  .portrait__frame{ aspect-ratio:398/440; border-radius:150px 150px var(--radius-lg) var(--radius-lg); }
  .portrait__badge{ left:0; }
}
@media (max-width:768px){
  :root{ --tl-col:0px; }
  .hero{ min-height:auto; padding-top:118px; }
  .hero__stats{ grid-template-columns:1fr; gap:16px; }
  .stat{ flex-direction:row; align-items:baseline; justify-content:space-between; gap:16px;
         border-bottom:1px solid var(--ink-line); padding-bottom:12px; }
  .stat dt{ margin:0; }
  .stat dd{ font-size:30px; }
  .hero__scroll{ display:none; }

  /* Phones: the hero portrait fills the content width, is centred, and stands about 60%
     of the screen tall. The UVA card inside it keeps its existing size and position. */
  .hero__portrait{ justify-self:center; width:100%; max-width:420px; }
  .portrait__frame{ aspect-ratio:auto; height:60vh; height:60svh; }

  .timeline__rail{ left:7px; }
  .tl{ grid-template-columns:34px minmax(0,1fr); }
  .tl__marker{ grid-column:1; grid-row:1/3; justify-self:start; }
  .tl__date{ grid-column:2; grid-row:1; text-align:left; align-items:flex-start;
             padding:0 0 12px; flex-direction:row; gap:10px; }
  .tl__body{ grid-column:2; grid-row:2; }

  .roadmap{ grid-template-columns:1fr; }
  .roadmap__step{ border-right:0; border-top:1px solid var(--ink-line); }
  .roadmap__step:first-child{ border-top:0; }

  .skills__grid,.work__grid,.contact__grid,.impact__grid{ grid-template-columns:1fr; }

  /* Capabilities become a compact accordion: headers only until tapped. */
  .skills__grid{ gap:10px; }
  .js .skill--collapsible{ padding:0; }
  .js .skill--collapsible:hover, .js .skill--collapsible:focus-within{ transform:none; box-shadow:none; }
  .js .skill--collapsible:hover .skill__fill, .js .skill--collapsible:focus-within .skill__fill{ transform:translateY(101%); }
  .js .skill--collapsible .skill__head{
    display:flex; align-items:center; gap:12px; cursor:pointer;
    padding:16px clamp(16px,4vw,22px); min-height:56px;
  }
  .js .skill--collapsible .skill__num{ margin:0; font-size:10px; }
  .js .skill--collapsible .skill__name{
    margin:0; flex:1 1 auto; font-size:19px; line-height:1.2;
  }
  .js .skill--collapsible .skill__chev{
    display:block; flex:none; width:11px; height:11px; margin-right:2px;
    border-right:1.6px solid var(--cap); border-bottom:1.6px solid var(--cap);
    transform:rotate(45deg) translate(-2px,-2px);
    transition:transform .4s var(--ease), border-color .4s var(--ease);
  }
  .js .skill--collapsible.is-open .skill__chev{
    transform:rotate(225deg) translate(-2px,-2px);
  }
  .js .skill--collapsible .skill__panel{
    height:0; opacity:0; overflow:hidden;
    transition:height .42s var(--ease-out), opacity .3s var(--ease);
  }
  .js .skill--collapsible.is-open .skill__panel{ opacity:1; }
  .js .skill__panel > ul{ padding:2px clamp(16px,4vw,22px) 20px; }

  /* the open card takes the accent, so the tap target reads as active */
  .js .skill--collapsible.is-open .skill__fill{ transform:translateY(0); }
  .js .skill--collapsible.is-open{ border-color:#dce8f6; }
  .js .skill--collapsible.is-open .skill__num,
  .js .skill--collapsible.is-open .skill__name,
  .js .skill--collapsible.is-open li{ color:#000; }
  .js .skill--collapsible.is-open .skill__chev{ border-color:#000; }
  .js .skill--collapsible.is-open li::before{ background:rgba(0,0,0,.45); }
  :root[data-theme="dark"] .js .skill--collapsible.is-open .skill__num,
  :root[data-theme="dark"] .js .skill--collapsible.is-open .skill__name,
  :root[data-theme="dark"] .js .skill--collapsible.is-open li{ color:#000; }
  :root[data-theme="dark"] .js .skill--collapsible.is-open .skill__chev{ border-color:#000; }
  :root[data-theme="dark"] .js .skill--collapsible.is-open li::before{ background:rgba(0,0,0,.45); }

  /* impact tracks stack so the labels stay legible on a narrow column */
  .proj-track__steps{ flex-direction:column; gap:11px; padding-left:22px; }
  .proj-track__steps li{ text-align:left; padding-top:0; font-size:10.5px; }
  .proj-track__rail{ left:6px; right:auto; top:4px; bottom:4px; width:2px; height:auto; }
  .proj-track__rail i{ width:100%; height:0; transition:height 1.25s var(--ease-out) .15s; }
  .proj-track[data-track-fill].is-in .proj-track__rail i{ width:100%; height:100%; }
  .track-dot{ top:50%; left:-22px; transform:translateY(-50%) scale(.4); }
  .proj-track[data-track-fill].is-in .track-dot{ transform:translateY(-50%) scale(1); }
  .dotviz__grid{ grid-template-columns:repeat(20,1fr); gap:3px; }
  .proj--wide{ grid-column:span 1; }
  .about__narrative p:first-child::first-letter{ font-size:3.2em; }
  .footer__inner{ flex-direction:column; align-items:flex-start; }
  .footer__meta{ margin-left:0; }
  .footer__top{ position:absolute; right:var(--gut); margin-top:-56px; }
  .footer{ position:relative; }
}
@media (max-width:520px){
  .pull{ padding:20px 22px; }
  .hero__actions .btn{ width:100%; justify-content:center; }
}

/* ---------- 20. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  [data-reveal],.tl__body,.tl__date,.tr__card,.tr__year,.roadmap__step,.eyebrow__line{ opacity:1 !important; transform:none !important; }
  .word > i{ transform:none !important; }
  .scrub .w{ opacity:1 !important; }
  .cursor{ display:none !important; }
  .preloader{ display:none !important; }
}

/* ---------- 21. Print ---------- */
@media print{
  .nav,.drawer,.cursor,.grain,.scroll-progress,.preloader,.hero__scroll,.marquee,.footer__top{ display:none !important; }
  body{ background:#fff; color:#000; }
  .section,.hero{ padding-block:24px; page-break-inside:avoid; }
  .section--dark,.hero{ background:#fff !important; color:#000 !important; }
  .section--dark *,.hero *{ color:#000 !important; }
  [data-reveal],.tl__body,.tr__card{ opacity:1 !important; transform:none !important; }
}