:root{
  --bg-deep:#10160F;
  --bg-canopy:#1B2A1D;
  --bg-card:#212F20;
  --ink:#F3F0E6;
  --ink-dim:#A9B6A6;
  --ink-faint:#6E7B6C;
  --gold:#D6A94A;
  --blue:#5C879C;
  --line: rgba(243,240,230,0.14);
  --serif: 'Fraunces', serif;
  --sans: 'IBM Plex Sans', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; color-scheme: dark;}
body{
  background:var(--bg-deep);
  color:var(--ink);
  font-family:var(--sans);
  overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}
a{color:inherit;}
img{display:block; max-width:100%;}
code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: rgba(243,240,230,0.08);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.5rem 2rem;
  mix-blend-mode:difference;
  font-size:0.9rem;
  pointer-events:none;
}
.nav-brand{
  text-decoration:none;
  font-weight:500;
  pointer-events:auto;
  white-space:nowrap;
  flex:none;
}
.nav-brand .short{ display:none; }
@media (max-width: 560px){
  .nav-brand .full{ display:none; }
  .nav-brand .short{ display:inline; }
}
.nav-links{
  display:flex; gap:1.4rem;
  pointer-events:auto;
}
.nav-links a{
  text-decoration:none;
  opacity:0.85;
  transition:opacity 0.2s ease;
}
.nav-links a:hover{ opacity:1; }
@media (max-width: 700px){
  .nav-links{ gap:0.9rem; font-size:0.8rem; }
  .nav-links a:nth-child(2){ display:none; }
}

/* ---------- hero ---------- */
.hero {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;

  background:
    radial-gradient(
      ellipse 80% 60% at 28% 18%,
      rgba(92,135,156,0.14),
      transparent 60%
    ),
    radial-gradient(
      ellipse 70% 50% at 78% 82%,
      rgba(214,169,74,0.09),
      transparent 60%
    ),
    var(--bg-deep);

  overflow: hidden;
}

.hero-inner {
  width: 100%;
  max-width: 1600px;
  padding: 0 2rem;

  opacity: 0;
  transform: translateY(16px);
  animation: heroIn 0.9s cubic-bezier(.16,.8,.3,1) 0.15s forwards;
}

.hero-inner h1 {
  width: 100%;
  max-width: calc(100vw - 1.5rem);
  margin: 0 auto;

  font-size: min(7vw, 5.2rem);
  line-height: 1.12;
  letter-spacing: -0.01em;

  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* Keep the rendered MathJax inside the heading width */
.hero-inner h1 mjx-container {
  max-width: 80%;
  font-size: 0.5em !important;
}

/* Smaller screens */
@media (max-width: 700px) {
  .hero-inner h1 {
    max-width: calc(100vw - 1.5rem);
    font-size: clamp(1rem, 6vw, 2.35rem);
    line-height: 1.18;
  }
}

@media (max-width: 700px) {
  .hero-inner h1 {
    max-width: calc(100vw - 1.5rem);
    font-size: clamp(1.15rem, 6vw, 2.35rem);
    line-height: 1.18;
  }
}
.model-note {
  margin-top: 0.4rem;
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--ink-dim);
}

.tagline {
  margin-top: 0.5rem;
}
@keyframes heroIn{ to{ opacity:1; transform:translateY(0);} }
.hero h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.4rem, 7vw, 5.2rem);
  letter-spacing:-0.01em;
  line-height:1.02;
}
.hero p.tagline{
  margin-top:1.1rem;
  font-size:clamp(1rem, 2vw, 1.25rem);
  color:var(--ink-dim);
  font-weight:300;
  max-width:36ch;
  margin-left:auto; margin-right:auto;
}
.hero-strip{
  display:grid;
  grid-template-columns:repeat(2, 104px);
  gap:1rem;
  width:max-content;
  margin:2.8rem auto 0;
}
.hero-strip img{
  width:104px; height:104px; object-fit:cover;
  border-radius:6px;
  opacity:0;
  filter:saturate(0.85) brightness(0.9);
  transition:opacity 0.5s ease;
}
@media (max-width: 700px){
  .hero-strip{ grid-template-columns:repeat(2, 84px); gap:0.8rem; }
  .hero-strip img{ width:84px; height:84px; }
}
.hero-strip img.in{ opacity:1; }

.scroll-cue{
  position:absolute; bottom:2.6rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:0.5rem;
  color:var(--ink-faint);
  font-size:0.82rem;
}
.scroll-cue .chev{
  width:12px; height:12px;
  border-right:1.5px solid var(--ink-faint);
  border-bottom:1.5px solid var(--ink-faint);
  transform:rotate(45deg);
  opacity:0.7;
}

/* ---------- about ---------- */
.about{
  position:relative;
  min-height:150vh;
  background:var(--bg-canopy);
  display:flex;
  justify-content:center;
  gap:clamp(2rem, 6vw, 7rem);
  padding-inline:clamp(1.5rem, 6vw, 6rem);
}
.about-media{
  position:sticky; top:0; align-self:flex-start;
  height:100vh;
  flex:0 0 clamp(320px, 34vw, 560px);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.about-media img{
  width:auto; height:auto;
  max-width:100%; max-height:74vh;
  aspect-ratio:1/1; object-fit:cover;
  border-radius:50%;
  clip-path: circle(50% at 50% 50%);
  opacity:0; transform:scale(0.94);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.16,.8,.3,1);
}
.about-media img.in{ opacity:1; transform:scale(1); }

.about-copy{
  flex:0 1 640px;
  display:flex; flex-direction:column; justify-content:center;
  gap:1.5rem;
  padding-block:4rem;
  opacity:0; transform:translateY(16px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.16,.8,.3,1);
}
.about-copy.in{ opacity:1; transform:translateY(0); }
.about-copy .name{
  font-family:var(--serif);
  font-size:clamp(2rem, 3.2vw, 3rem);
  font-weight:500;
}
.about-copy .role{ color:var(--gold); font-size:clamp(1.05rem, 1.25vw, 1.2rem); font-weight:500;}
.about-copy .desc{ color:var(--ink-dim); font-size:clamp(1.05rem, 1.15vw, 1.2rem); line-height:1.65; font-weight:300; max-width:48ch;}
.about-copy .desc.small{ font-size:0.95rem; }
.about-copy .loc{ color:var(--ink-faint); font-size:1rem; }
.open-to{ margin-top:0.4rem; }
.open-to-label{
  display:block;
  font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--gold); margin-bottom:0.6rem;
}
.open-to-tags{ display:flex; flex-wrap:wrap; gap:0.6rem; }
.open-to-tags span{
  font-size:0.9rem; color:var(--ink-dim); font-weight:300;
  border:1px solid var(--gold); border-radius:999px;
  padding:0.4rem 0.9rem;
}

@media (max-width: 820px){
  .about{ flex-direction:column; min-height:auto; gap:0; padding-inline:0; }
  .about-media{ position:relative; width:100%; flex-basis:auto; height:60vh; min-height:320px; top:auto; align-self:auto; }
  .about-media img{ max-width:78%; max-height:90%; }
  .about-copy{ width:100%; flex-basis:auto; padding:3rem 6vw; }
}

/* ---------- capabilities ---------- */
.cap-wrap{ position:relative; height:500vh; background:var(--bg-deep); }
.cap-sticky{
  position:sticky; top:0; height:100vh; overflow:hidden;
}
.cap-panel{
  position:absolute; inset:0;
  opacity:0; pointer-events:none;
  transition:opacity 0.6s ease;
}
.cap-panel.active{ opacity:1; pointer-events:auto; }
.cap-media{
  position:absolute; inset:0;
}
.cap-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:50% 30%;
  filter:saturate(0.92) brightness(0.85);
}
.cap-scrim{
  position:absolute; top:0; right:0; bottom:0; width:50%;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(16,22,15,0.7) 12%,
    rgba(16,22,15,0.94) 32%,
    var(--bg-deep) 58%);
}
.cap-text{
  position:absolute; top:0; right:0; bottom:0; width:50%;
  z-index:2;
  display:flex; flex-direction:column; justify-content:center;
  padding:4rem 4.5vw;
}
.cap-content{ max-width:640px; }
.cap-panel h3{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.9rem, 3.4vw, 2.7rem);
  margin-bottom:0.7rem;
}
.cap-subtitle{
  color:var(--ink-dim); font-size:1.12rem; font-style:italic; font-weight:300;
  line-height:1.5; margin-bottom:1.3rem;
}
.cap-panel p{
  color:var(--ink-dim); font-size:1.18rem; line-height:1.6; font-weight:300;
  max-width:58ch;
}
.cap-chip{
  display:inline-block; margin-top:1.3rem;
  font-size:0.95rem; color:var(--bg-deep);
  background:var(--gold);
  padding:0.5rem 0.9rem; border-radius:3px;
  font-weight:500;
}
.cap-index{
  position:absolute; right:4vw; bottom:2.4rem; z-index:3;
  display:flex; gap:0.55rem;
}
.cap-index .dot-row{ display:flex; align-items:center; gap:0.5rem; }
.cap-index .num{
  font-size:0.8rem; color:var(--ink-faint); font-variant-numeric:tabular-nums;
}
.cap-index .dot{
  width:22px; height:2px; background:var(--ink-faint); opacity:0.4;
  transition:opacity 0.4s ease, background 0.4s ease;
}
.cap-index .dot-row.active .dot{ background:var(--gold); opacity:1; }
.cap-index .dot-row.active .num{ color:var(--gold); }

@media (max-width: 820px){
  .cap-wrap{ height:auto; }
  .cap-sticky{ position:relative; height:auto; }
  .cap-panel{
    position:relative; inset:auto;
    display:flex; flex-direction:column;
    opacity:1 !important; pointer-events:auto;
    margin-bottom:2.4rem; padding-bottom:2.4rem;
    border-bottom:1px solid var(--line);
  }
  .cap-panel:last-child{ margin-bottom:0; padding-bottom:0; border-bottom:none; }
  .cap-media{ position:relative; height:260px; width:100%; }
  .cap-scrim{ display:none; }
  .cap-text{
    position:relative; inset:auto; width:100%;
    background:var(--bg-deep);
    padding:1.6rem 6vw 0;
  }
  .cap-content{ max-width:100%; }
  .cap-index{ display:none; }
}

/* ---------- toolkit ---------- */
.toolkit{
  background:var(--bg-deep);
  padding:5rem 6vw 6rem;
  opacity:0; transform:translateY(16px);
  transition:opacity 0.8s ease, transform 0.8s cubic-bezier(.16,.8,.3,1);
}
.toolkit.in{ opacity:1; transform:translateY(0); }
.toolkit-label{
  font-size:0.82rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.4rem;
}
.toolkit-list{
  list-style:none; display:flex; flex-wrap:wrap; gap:0.7rem;
}
.toolkit-list li{
  font-size:0.92rem; color:var(--ink-dim);
  border:1px solid var(--line); border-radius:999px;
  padding:0.5rem 1rem;
}

/* ---------- section head (shared: resume / portfolio overlays) ---------- */
.story-head{ max-width:56ch; margin-bottom:3.2rem; }
.story-head h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.8rem, 3.6vw, 2.6rem);
  margin-bottom:0.8rem;
}
.story-head p{ color:var(--ink-dim); font-size:1.05rem; font-weight:300; line-height:1.6; }

/* ---------- resume ---------- */
.resume-summary{ max-width:70ch; }
.resume-competencies{ margin:0 0 3.4rem; }
.competency-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:1.4rem 2.4rem;
  margin-top:1.2rem;
}
.competency-grid dt{
  font-family:var(--serif); font-weight:500; font-size:1rem;
  margin-bottom:0.35rem;
}
.competency-grid dd{
  margin:0; font-size:0.9rem; color:var(--ink-dim); font-weight:300; line-height:1.6;
}
@media (max-width: 720px){
  .competency-grid{ grid-template-columns:1fr; }
}
.resume-columns{
  display:grid; grid-template-columns:1fr 1fr; gap:4.5rem;
}
.resume-col-title{
  font-family:var(--serif); font-weight:500; font-size:1.2rem;
  margin:0 0 1.4rem;
  padding-bottom:0.6rem;
  border-bottom:1px solid var(--gold);
  display:inline-block;
}
.timeline{
  list-style:none;
  margin:0 0 2.8rem;
}
.timeline-item{
  position:relative;
  padding:0 0 1.7rem 1.5rem;
  border-left:1px solid var(--line);
}
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:'';
  position:absolute; left:-5px; top:4px;
  width:9px; height:9px; border-radius:50%;
  background:var(--gold);
  border:2px solid var(--bg-deep);
}
.timeline-item h4{ font-family:var(--serif); font-weight:500; font-size:1.02rem; margin-bottom:4px; }
.timeline-meta{ font-size:0.82rem; color:var(--ink-faint); margin-bottom:8px; }
.timeline-detail{ font-size:0.92rem; color:var(--ink-dim); line-height:1.6; margin-bottom:8px; font-weight:300; }
.timeline-item ul{
  margin:6px 0 0; padding-left:18px;
  font-size:0.9rem; color:var(--ink-dim); line-height:1.65; font-weight:300;
}
.timeline-item ul li{ margin-bottom:5px; }
.timeline-item a{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; }

.cert-list{
  list-style:none;
  display:grid; gap:0.6rem;
}
.cert-list li{
  font-size:0.88rem; color:var(--ink-dim); font-weight:300;
  border:1px solid var(--line); border-radius:6px;
  padding:0.7rem 1rem;
}

@media (max-width: 1000px){
  .resume-columns{ grid-template-columns:1fr; gap:0.5rem; }
}

/* ---------- portfolio ---------- */
.portfolio-section{ background:var(--bg-canopy); }

.filter-tabs{
  display:flex; flex-wrap:wrap; gap:0.6rem;
  margin-bottom:2.6rem;
}
.filter-tab{
  font:inherit; font-size:0.82rem; font-weight:500;
  background:transparent; color:var(--ink-dim);
  border:1px solid var(--line); border-radius:999px;
  padding:0.5rem 1.1rem; cursor:pointer;
  transition:border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.filter-tab:hover{ border-color:var(--gold); color:var(--ink); }
.filter-tab.active{ background:var(--gold); border-color:var(--gold); color:var(--bg-deep); }

.portfolio-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1.8rem;
}
.portfolio-card{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform 0.25s ease, border-color 0.25s ease;
}
.portfolio-card:hover{ transform:translateY(-4px); border-color:var(--gold); }
.portfolio-card.hidden{ display:none; }
.portfolio-media{ aspect-ratio:4/3; overflow:hidden; background:var(--bg-deep); }
.portfolio-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(0.92) brightness(0.96);
  transition:transform 0.35s ease;
}
.portfolio-card:hover .portfolio-media img{ transform:scale(1.05); }
.portfolio-body{ padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.portfolio-category{
  font-size:0.68rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--gold); margin-bottom:0.5rem;
}
.portfolio-body h3{ font-family:var(--serif); font-weight:500; font-size:1.08rem; margin-bottom:0.6rem; }
.portfolio-body p{ font-size:0.86rem; color:var(--ink-dim); line-height:1.55; font-weight:300; margin-bottom:1rem; flex:1; }
.portfolio-tags{ list-style:none; display:flex; flex-wrap:wrap; gap:0.4rem; margin-bottom:1rem; }
.portfolio-tags li{ font-size:0.66rem; color:var(--ink-faint); border:1px solid var(--line); border-radius:999px; padding:2px 8px; }
.portfolio-links{ display:flex; gap:0.6rem; margin-top:auto; flex-wrap:wrap; }
.portfolio-links a{
  font-size:0.78rem; font-weight:500; text-decoration:none;
  padding:0.4rem 0.85rem; border-radius:4px;
  border:1px solid var(--line); color:var(--ink-dim);
  transition:border-color 0.2s ease, color 0.2s ease;
}
.portfolio-links a:hover{ border-color:var(--gold); color:var(--gold); }
.portfolio-links a.primary{ background:var(--gold); border-color:var(--gold); color:var(--bg-deep); }
.portfolio-links a.primary:hover{ color:var(--bg-deep); }

@media (max-width: 980px){ .portfolio-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 620px){ .portfolio-grid{ grid-template-columns:1fr; } }

/* ---------- overlay panels (resume / portfolio) ---------- */
.overlay-panel{
  position:fixed; inset:0; z-index:150;
  background:var(--bg-deep);
  overflow-y:auto;
  padding:0 6vw 5rem;
  opacity:0; visibility:hidden; transform:translateY(24px);
  transition:opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0.4s;
}
.overlay-panel.open{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity 0.4s ease, transform 0.4s ease;
}
.overlay-panel > *:not(.overlay-topbar){
  max-width:1180px;
  margin-inline:auto;
}
.overlay-topbar{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; gap:1rem;
  margin:0 -6vw 2.6rem;
  padding:1.1rem 6vw;
  background:var(--bg-deep);
  border-bottom:1px solid var(--line);
}
.overlay-topbar-label{
  font-size:0.82rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-faint);
}
.overlay-back{
  font:inherit; font-size:0.88rem; font-weight:500;
  background:var(--bg-canopy); color:var(--ink);
  border:1px solid var(--line); border-radius:999px;
  padding:0.5rem 1.1rem; cursor:pointer;
  transition:border-color 0.2s ease;
}
.overlay-back:hover{ border-color:var(--gold); color:var(--gold); }
body.overlay-open{ overflow:hidden; }
body.overlay-open .nav{ display:none; }

/* ---------- final CTA ---------- */
.finale{
  min-height:100vh;
  background:var(--bg-deep);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:6rem 1.5rem;
  gap:3rem;
  opacity:0; transform:translateY(16px);
  transition:opacity 0.8s ease, transform 0.8s cubic-bezier(.16,.8,.3,1);
}
.finale.in{ opacity:1; transform:translateY(0); }
.finale h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2rem, 5vw, 3.4rem);
  max-width:22ch;
}
.finale-actions{ display:flex; gap:1.2rem; flex-wrap:wrap; justify-content:center; }
.finale-btn{
  display:block; text-decoration:none;
  padding:1.4rem 2.4rem;
  border:1px solid var(--line);
  border-radius:4px;
  min-width:220px;
  transition:border-color 0.3s ease, background 0.3s ease;
}
.finale-btn .label{ font-size:1.08rem; font-weight:500; }
.finale-btn .sub{ display:block; margin-top:0.35rem; font-size:0.85rem; color:var(--ink-faint); }
.finale-btn.primary{ background:var(--gold); border-color:var(--gold); }
.finale-btn.primary .label,.finale-btn.primary .sub{ color:var(--bg-deep); }
.finale-btn:hover{ border-color:var(--gold); }
.finale-btn.primary:hover{ background:#e2b65b; }

.finale-contact{ color:var(--ink-dim); font-size:0.98rem; line-height:2; }
.finale-contact a{ color:var(--ink); border-bottom:1px solid var(--line); padding-bottom:1px; }
.finale-contact a:hover{ border-color:var(--gold); color:var(--gold); }
.finale-contact .closing{ margin-top:1.4rem; color:var(--ink-faint); font-size:0.92rem; }

footer{
  text-align:center; padding:2rem; color:var(--ink-faint); font-size:0.82rem;
  background:var(--bg-deep);
  display:flex; flex-direction:column; align-items:center; gap:1rem;
}
.visitor-counter{ opacity:0.9; }
.visitor-counter img{ display:block; }

@media (prefers-reduced-motion: reduce){
  .hero-inner{ opacity:1 !important; transform:none !important; animation:none !important; }
  .about-media img, .about-copy, .toolkit, .finale{
    opacity:1 !important; transform:none !important;
  }
  .cap-panel{ display:block !important; opacity:1 !important; }
  .overlay-panel.open{ transform:none !important; }
}