:root{
  --paper:      #FFFFFF;
  --paper-2:    #FAF3E7;
  --paper-3:    #F1E1BF;
  --ink:        #33210F;
  --ink-soft:   #5C4530;
  --rust:       #B84A28;
  --rust-dark:  #7A2E1C;
  --gold:       #D69A3C;
  --gold-dark:  #A6721F;
  --line:       rgba(51,33,15,.16);
  --line-soft:  rgba(51,33,15,.10);
  --shadow-sm:  0 1px 2px rgba(51,33,15,.05), 0 6px 16px -12px rgba(51,33,15,.16);

  --radius:     18px;
  --radius-sm:  10px;
  --radius-pill:999px;

  --f-display:  'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --f-body:     'Nunito', 'Segoe UI', system-ui, sans-serif;
  --f-mono:     'Space Mono', 'SFMono-Regular', Consolas, monospace;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

img{max-width:100%;}
h1,h2,h3,h4{text-wrap:balance; margin:0; font-weight:600;}
p{margin:0;}
::selection{background:var(--rust); color:#fff;}
a{color:var(--rust-dark);}
a:focus-visible, button:focus-visible{outline:2px solid var(--rust-dark); outline-offset:3px;}

.wrap{max-width:920px; margin:0 auto; padding:0 28px 120px;}

/* ---------- nav ---------- */
.navbar{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line-soft);
}
.navbar-inner{
  max-width:920px; margin:0 auto; padding:14px 28px;
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.navbar-mark{font-family:var(--f-display); font-weight:700; font-size:1.05rem; letter-spacing:.01em; text-decoration:none; color:var(--ink);}
.navbar-nav{
  display:flex; gap:18px; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.06em;
  text-transform:uppercase;
}
.navbar-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:stretch;
  gap:5px; width:30px; height:26px; padding:0; margin:0;
  background:none; border:none; cursor:pointer;
}
.navbar-toggle span{
  display:block; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
.navbar-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.navbar-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.navbar-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media (max-width:768px){
  .navbar-toggle{display:flex;}
  .navbar-nav{
    display:none; flex-direction:column; gap:14px;
    width:100%; order:3; padding-top:6px;
  }
  .navbar-nav.is-open{display:flex;}
}
.navbar-nav a{color:var(--ink-soft); text-decoration:none; border-bottom:1px solid transparent;}
.navbar-nav a:hover, .navbar-nav a:focus-visible{color:var(--rust-dark); border-bottom-color:var(--rust);}

/* ---------- hero ---------- */
.hero{padding:76px 28px 180px; position:relative; overflow:hidden;}
.hero-inner{max-width:920px; margin:0 auto; position:relative; z-index:1;}
.eyebrow{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--rust-dark);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--rust); display:inline-block;}
.hero h1{
  font-family:var(--f-display); font-weight:900;
  font-size:clamp(3rem, 9vw, 6.4rem); line-height:.94;
  margin-top:18px; color:var(--ink);
}
.hero .position{
  font-family:var(--f-display); font-style:italic; font-weight:600;
  font-size:clamp(1.2rem, 2.6vw, 1.7rem);
  color:var(--rust-dark); margin-top:14px; max-width:34ch;
}
.hero-cta{margin-top:36px; display:flex; gap:14px; flex-wrap:wrap;}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  padding:12px 20px; border-radius:var(--radius-pill); text-decoration:none;
  border:1px solid transparent;
}
.btn-primary{background:var(--rust); color:#fff;}
.btn-primary:hover, .btn-primary:focus-visible{background:var(--rust-dark);}
.btn-outline{border-color:var(--line); color:var(--ink);}
.btn-outline:hover, .btn-outline:focus-visible{border-color:var(--rust-dark); color:var(--rust-dark);}

.hero-meta{
  margin-top:36px; display:flex; gap:28px; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:.78rem; color:var(--ink-soft);
}
.hero-meta strong{color:var(--ink); font-weight:700;}
.hero-wave{
  position:absolute; top:40px; left:50%; transform:translateX(-50%);
  width:100vw; max-width:1000px;
  z-index:0; line-height:0; pointer-events:none; opacity:.5;
}
.hero-wave svg{
  --wave-scale:1.8;
  display:block; width:100%; height:auto; overflow:hidden;
  transform:scale(var(--wave-scale)); transform-origin:center top;
}
@media (max-width:480px){
  .hero{padding-bottom:28px;}
  .hero-wave{top:10px;}
  .hero-wave svg{--wave-scale:2.2;}
}

/* ---------- section scaffolding ---------- */
.section{padding:64px 0 8px; border-bottom:1px solid var(--line-soft); scroll-margin-top:80px;}
.wrap > .section:first-child{padding-top:20px;}
.section:last-of-type{border-bottom:none;}
.section-head{display:grid; grid-template-columns:auto 1fr; gap:20px 26px; align-items:baseline; margin-bottom:34px;}
.section-num{
  font-family:var(--f-display); font-weight:600; font-style:italic;
  font-size:clamp(2.6rem, 6vw, 4.2rem); color:var(--rust); opacity:.24; line-height:1;
}
.section-title-group .kicker{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--rust-dark); display:block; margin-bottom:6px;
}
.section-title-group h2{font-family:var(--f-display); font-weight:600; font-size:clamp(1.7rem, 4vw, 2.5rem);}
.section-intro{max-width:64ch; font-size:1.05rem; color:var(--ink-soft); margin-bottom:30px;}
.section-intro strong{color:var(--ink);}

/* ---------- skills ---------- */
.skills-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px;}
.skill-pill{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.03em;
  color:var(--ink-soft); background:var(--paper-2); border:1px solid var(--line-soft);
  padding:6px 13px; border-radius:var(--radius-pill);
}

/* ---------- experience timeline ---------- */
.timeline{display:flex; flex-direction:column; gap:0;}
.role{
  padding:26px 0; border-top:1px solid var(--line-soft);
  display:grid; grid-template-columns:160px 1fr; gap:24px;
}
.role:first-child{border-top:none;}
.role-when{font-family:var(--f-mono); font-size:.74rem; color:var(--ink-soft); letter-spacing:.03em; padding-top:2px;}
.role-title{font-family:var(--f-display); font-weight:600; font-size:1.25rem; color:var(--ink);}
.role-org{font-family:var(--f-mono); font-size:.74rem; letter-spacing:.04em; text-transform:uppercase; color:var(--rust-dark); margin-top:2px;}
.role-desc{color:var(--ink-soft); font-size:.98rem; margin-top:10px; max-width:60ch;}
.role-todo{
  display:inline-block; margin-top:12px; font-family:var(--f-mono); font-size:.68rem;
  letter-spacing:.04em; text-transform:uppercase; color:var(--gold-dark);
  background:var(--paper-3); padding:5px 11px; border-radius:var(--radius-pill);
}
@media (max-width:640px){ .role{grid-template-columns:1fr; gap:6px;} }

/* ---------- work grid ---------- */
.workgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
.workcard{
  border:1px solid var(--line-soft); background:var(--paper-2); border-radius:var(--radius);
  padding:26px; display:flex; flex-direction:column; gap:10px; min-height:180px;
}
.workcard h3{font-family:var(--f-display); font-size:1.2rem; font-weight:600;}
.workcard p{color:var(--ink-soft); font-size:.92rem;}
.workcard .role-todo{margin-top:auto; align-self:flex-start;}
@media (max-width:640px){ .workgrid{grid-template-columns:1fr;} }

/* ---------- about pillars ---------- */
.pillars{display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; margin-bottom:8px;}
.pillar{background:var(--paper-2); padding:24px; border-radius:var(--radius); border:1px solid var(--line-soft);}
.pillar-num{font-family:var(--f-mono); font-size:.72rem; color:var(--rust-dark); letter-spacing:.08em;}
.pillar h3{font-family:var(--f-display); font-size:1.3rem; margin:8px 0 8px; font-weight:600;}
.pillar p{color:var(--ink-soft); font-size:.95rem;}
@media (max-width:640px){ .pillars{grid-template-columns:1fr;} }

/* ---------- contact ---------- */
.contact-card{
  background:var(--ink); color:#fff; border-radius:var(--radius);
  padding:44px 36px; display:flex; flex-direction:column; gap:18px;
}
.contact-card h2{font-family:var(--f-display); font-weight:600; font-size:clamp(1.6rem, 4vw, 2.2rem); color:#fff;}
.contact-card p{color:var(--paper-3); max-width:52ch;}
.contact-links{display:flex; gap:14px; flex-wrap:wrap; margin-top:8px;}
.contact-links .btn-primary{background:var(--rust);}
.contact-links .btn-outline{border-color:rgba(255,255,255,.3); color:#fff;}
.contact-links .btn-outline:hover, .contact-links .btn-outline:focus-visible{border-color:var(--gold); color:var(--gold);}

/* ---------- footer ---------- */
.colophon{
  padding:40px 0 0; margin-top:40px;
  font-family:var(--f-mono); font-size:.72rem; color:var(--ink-soft);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.colophon a{color:var(--ink-soft);}