:root{
  --bg:#ffffff;
  --bg-soft:#f7f7f5;
  --bg-card:#ffffff;
  --ink:#121212;
  --ink-2:#4a4a4a;
  --ink-3:#8a8a8a;
  --line:#e6e6e2;
  --line-2:#d8d8d3;
  --accent:#121212;
  --accent-ink:#ffffff;
  --tag:#f2f2ef;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 12px 32px -12px rgba(0,0,0,.14);
  --radius:14px;
  --radius-sm:9px;
  --maxw:1080px;
  --serif:ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}
html[data-theme="dark"]{
  --bg:#0e0e0f;
  --bg-soft:#141416;
  --bg-card:#161618;
  --ink:#f4f4f2;
  --ink-2:#b8b8b4;
  --ink-3:#7c7c78;
  --line:#26262a;
  --line-2:#33333a;
  --accent:#f4f4f2;
  --accent-ink:#0e0e0f;
  --tag:#1e1e22;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -18px rgba(0,0,0,.8);
}

/* ============ RESET / BASE ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:86px}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16.5px; line-height:1.68;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .35s var(--ease), color .35s var(--ease);
  overflow-x:hidden;
}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
h1,h2,h3,h4{margin:0; font-weight:600; line-height:1.15; letter-spacing:-.02em}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
::selection{background:var(--ink); color:var(--bg)}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:4px}

.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============ SCROLL PROGRESS ============ */
#progress{position:fixed; inset:0 auto auto 0; height:2px; width:0%; background:var(--ink); z-index:200; transition:width .1s linear; opacity:.85}

/* ============ HEADER ============ */
header.site{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
header.site.stuck{border-bottom-color:var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--serif); font-size:19px; letter-spacing:-.01em}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--ink);flex:none}
.nav-links{display:flex; align-items:center; gap:2px}
.nav-links a{
  padding:7px 12px; border-radius:999px; font-size:14.5px; color:var(--ink-2);
  transition:color .2s var(--ease), background .2s var(--ease);
}
.nav-links a:hover{color:var(--ink); background:var(--tag)}
.nav-links a.active{color:var(--ink); background:var(--tag); font-weight:500}
.nav-right{display:flex; align-items:center; gap:8px}
.icon-btn{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line); color:var(--ink-2);
  transition:border-color .2s, color .2s, transform .2s var(--ease), background .2s;
}
.icon-btn:hover{color:var(--ink); border-color:var(--line-2); transform:translateY(-1px)}
.icon-btn svg{width:17px;height:17px}
html[data-theme="dark"] .sun{display:block}
html[data-theme="dark"] .moon{display:none}
html[data-theme="light"] .sun{display:none}
html[data-theme="light"] .moon{display:block}
#menuBtn{display:none}

/* ============ SECTION SCAFFOLD ============ */
section{padding:96px 0; position:relative}
section.tight{padding:72px 0}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:18px;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--line-2)}
.sec-title{font-family:var(--serif); font-size:clamp(30px,4.4vw,44px); letter-spacing:-.03em}
.sec-sub{color:var(--ink-2); max-width:56ch; margin-top:14px; font-size:17px}
.rule{height:1px; background:var(--line); border:0; margin:0}

/* Alternating soft-tinted band, used on the Projects and Contact sections */
.band-soft{background:var(--bg-soft)}

/* ============ HERO ============ */
.hero{padding:78px 0 88px; min-height:calc(100svh - 64px); display:flex; align-items:center}
.hero-inner{width:100%}
.badge{
  display:inline-flex; align-items:center; gap:9px; padding:6px 14px 6px 11px;
  border:1px solid var(--line); border-radius:999px; font-size:13px; color:var(--ink-2);
  background:var(--bg-soft); margin-bottom:30px;
}
.pulse{width:7px;height:7px;border-radius:50%;background:#22c55e;position:relative;flex:none}
.pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid #22c55e;opacity:.5;animation:pulse 2.2s infinite}
@keyframes pulse{0%{transform:scale(.7);opacity:.7}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
h1.hero-title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(44px,8.4vw,92px); line-height:1.02; letter-spacing:-.04em;
  margin-bottom:26px;
}
h1.hero-title em{font-style:italic; color:var(--ink-2)}
.caret{display:inline-block; width:.06em; height:.86em; background:var(--ink); margin-left:.06em; vertical-align:-.06em; animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hero-lead{font-size:clamp(17px,2vw,19.5px); color:var(--ink-2); max-width:60ch; margin-bottom:36px}
.hero-lead b{color:var(--ink); font-weight:600}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:60px}
.btn{
  display:inline-flex; align-items:center; gap:9px; padding:13px 24px; border-radius:999px;
  font-size:15px; font-weight:500; border:1px solid transparent;
  transition:transform .22s var(--ease), background .22s, border-color .22s, box-shadow .22s, color .22s;
}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--accent); color:var(--accent-ink)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
.btn-ghost{border-color:var(--line-2); color:var(--ink)}
.btn-ghost:hover{transform:translateY(-2px); background:var(--bg-soft); border-color:var(--ink-3)}
.hero-meta{display:flex; flex-wrap:wrap; gap:34px; padding-top:28px; border-top:1px solid var(--line)}
.hero-meta div{min-width:96px}
.hero-meta .k{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:5px}
.hero-meta .v{font-size:15px; color:var(--ink); font-weight:500}
.scroll-hint{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.scroll-hint span.line{width:1px;height:34px;background:linear-gradient(var(--line-2),transparent);animation:drop 2s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ============ MARQUEE ============ */
.marquee{border-block:1px solid var(--line); padding:15px 0; overflow:hidden; background:var(--bg-soft)}
.marquee-track{display:flex; gap:44px; width:max-content; animation:slide 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{font-family:var(--mono); font-size:12.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; display:flex; align-items:center; gap:44px}
.marquee span::after{content:"✦"; color:var(--line-2); font-size:10px}
@keyframes slide{to{transform:translateX(-50%)}}

/* ============ ABOUT ============ */
.about-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:start}
.portrait{position:relative}
.portrait-frame{
  aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  background:var(--bg-soft); position:relative; box-shadow:var(--shadow);
}
.portrait-frame svg{width:100%;height:100%}
.portrait-frame img{width:100%;height:100%;object-fit:cover}
.portrait-tag{
  position:absolute; left:-14px; bottom:22px; background:var(--bg); border:1px solid var(--line);
  border-radius:999px; padding:8px 16px; font-size:13px; font-weight:500; box-shadow:var(--shadow);
}
.about-body p{color:var(--ink-2); margin-bottom:18px; font-size:17px}
.about-body p:first-of-type{font-size:19px; color:var(--ink)}
.about-body strong{color:var(--ink); font-weight:600}
.about-body .lede{margin-top:26px}
.facts{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; margin-top:32px}
.facts div{background:var(--bg-card); padding:16px 18px}
.facts .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:4px}
.facts .v{font-size:15px; font-weight:500}

/* ============ STATS ============ */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-block:1px solid var(--line)}
.stat{background:var(--bg); padding:38px 26px; text-align:left}
.stat .n{font-family:var(--serif); font-size:clamp(34px,4.6vw,50px); letter-spacing:-.03em; line-height:1}
.stat .n sup{font-size:.44em; vertical-align:super; color:var(--ink-3)}
.stat .l{font-size:13.5px; color:var(--ink-3); margin-top:10px}

/* ============ SKILLS ============ */
.skills-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:20px; margin-top:46px}
.skill-card{
  border:1px solid var(--line); border-radius:var(--radius); padding:26px; background:var(--bg-card);
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.skill-card:hover{transform:translateY(-4px); border-color:var(--line-2); box-shadow:var(--shadow)}
.skill-card h3{font-size:16.5px; margin-bottom:6px; display:flex; align-items:center; gap:10px}
.skill-card h3 .ic{width:30px;height:30px;border-radius:8px;background:var(--tag);display:grid;place-items:center;flex:none}
.skill-card h3 .ic svg{width:16px;height:16px}
.skill-card .note{font-size:13.5px; color:var(--ink-3); margin-bottom:20px}
.skill-row{margin-bottom:15px}
.skill-row:last-child{margin-bottom:0}
.skill-row .top{display:flex; justify-content:space-between; font-size:14px; margin-bottom:7px}
.skill-row .top .lvl{font-family:var(--mono); font-size:11.5px; color:var(--ink-3)}
.bar{height:4px; border-radius:99px; background:var(--tag); overflow:hidden}
.bar i{display:block; height:100%; width:0; border-radius:99px; background:var(--ink); transition:width 1.1s var(--ease)}
.toolbelt{margin-top:40px; display:flex; flex-wrap:wrap; gap:9px}
.chip{
  font-family:var(--mono); font-size:12px; padding:7px 13px; border-radius:999px;
  border:1px solid var(--line); color:var(--ink-2); background:var(--bg-card);
  transition:border-color .2s, color .2s, transform .2s var(--ease);
}
.chip:hover{border-color:var(--ink); color:var(--ink); transform:translateY(-2px)}

/* ============ PROJECTS ============ */
.filters{display:flex; flex-wrap:wrap; gap:8px; margin:34px 0 30px}
.filters button{
  padding:8px 16px; border-radius:999px; border:1px solid var(--line); font-size:13.5px;
  color:var(--ink-2); transition:all .22s var(--ease);
}
.filters button:hover{border-color:var(--line-2); color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.projects{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:22px}
.card{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--bg-card);
  display:flex; flex-direction:column;
  transition:transform .34s var(--ease), box-shadow .34s var(--ease), border-color .34s, opacity .3s;
}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--line-2)}
.card.hide{display:none}
.thumb{aspect-ratio:16/10; border-bottom:1px solid var(--line); background:var(--bg-soft); position:relative; overflow:hidden}
.thumb svg,.thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.card:hover .thumb svg,.card:hover .thumb img{transform:scale(1.045)}
.card-body{padding:22px 22px 20px; display:flex; flex-direction:column; flex:1}
.card-body .yr{font-family:var(--mono); font-size:11px; letter-spacing:.13em; color:var(--ink-3); text-transform:uppercase}
.card-body h3{font-size:19px; margin:9px 0 8px; letter-spacing:-.015em}
.card-body p{font-size:14.8px; color:var(--ink-2); flex:1}
.stack{display:flex; flex-wrap:wrap; gap:6px; margin-top:16px}
.stack span{font-family:var(--mono); font-size:11px; padding:4px 9px; border-radius:6px; background:var(--tag); color:var(--ink-2)}
.card-links{display:flex; gap:16px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font-size:13.5px}
.card-links a{color:var(--ink-2); display:inline-flex; align-items:center; gap:6px; transition:color .2s, gap .2s var(--ease)}
.card-links a:hover{color:var(--ink); gap:9px}
.card-links svg{width:13px;height:13px}
.pin{position:absolute; top:12px; right:12px; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; background:var(--bg); border:1px solid var(--line); padding:4px 9px; border-radius:999px; color:var(--ink-2)}
.more-link{margin-top:34px; font-size:15px; color:var(--ink-3)}
.more-link a{color:var(--ink); border-bottom:1px solid var(--line-2)}

/* ============ EXPERIENCE TIMELINE ============ */
.tl{margin-top:46px; position:relative}
.tl::before{content:""; position:absolute; left:7px; top:8px; bottom:8px; width:1px; background:var(--line)}
.tl-item{position:relative; padding:0 0 40px 40px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:""; position:absolute; left:2px; top:7px; width:11px; height:11px; border-radius:50%;
  background:var(--bg); border:2px solid var(--line-2); transition:border-color .3s, background .3s;
}
.tl-item:hover::before{border-color:var(--ink); background:var(--ink)}
.tl-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; margin-bottom:6px}
.tl-head h3{font-size:18px}
.tl-head .org{color:var(--ink-2); font-size:15px}
.tl-date{margin-left:auto; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap}
.tl-item p{color:var(--ink-2); font-size:15.5px; max-width:66ch}
.tl-item ul{margin-top:10px; display:grid; gap:6px}
.tl-item ul li{position:relative; padding-left:16px; color:var(--ink-2); font-size:15px}
.tl-item ul li::before{content:"–"; position:absolute; left:0; color:var(--ink-3)}
.tl-kind{display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; padding:3px 8px; border:1px solid var(--line); border-radius:999px; color:var(--ink-3); margin-bottom:10px}

/* ============ CONTACT ============ */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start}
.contact-intro{margin-bottom:34px}
.big-mail{
  font-family:var(--serif); font-size:clamp(22px,3.2vw,32px); letter-spacing:-.02em;
  display:inline-flex; align-items:center; gap:12px; border-bottom:1px solid var(--line-2);
  padding-bottom:5px; word-break:break-all; transition:border-color .25s, opacity .25s;
}
.big-mail:hover{border-color:var(--ink); opacity:.75}
.copy-mail{margin-left:14px; padding:9px 16px; font-size:13.5px}
.contact-list{margin-top:38px; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden}
.contact-list a{display:flex; align-items:center; gap:14px; padding:15px 18px; background:var(--bg-card); transition:background .22s, padding-left .22s var(--ease)}
.contact-list a:hover{background:var(--bg-soft); padding-left:24px}
.contact-list .ic{width:32px;height:32px;border-radius:8px;background:var(--tag);display:grid;place-items:center;flex:none}
.contact-list .ic svg{width:16px;height:16px}
.contact-list .lbl{font-size:14.8px; font-weight:500}
.contact-list .val{font-size:13px; color:var(--ink-3); font-family:var(--mono)}
.contact-list .go{margin-left:auto; color:var(--ink-3)}
form.contact{display:grid; gap:16px}
.field{display:grid; gap:7px}
.field label{font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3)}
.field input,.field textarea{
  font:inherit; font-size:15.5px; color:var(--ink); background:var(--bg-card);
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:13px 15px; width:100%;
  transition:border-color .22s, box-shadow .22s; resize:vertical;
}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--ink); box-shadow:0 0 0 3px color-mix(in srgb, var(--ink) 10%, transparent)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3); opacity:.7}
.two{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.submit-btn{justify-content:center}
.form-note{font-size:13px; color:var(--ink-3); display:flex; gap:8px; align-items:flex-start; line-height:1.5}
.form-note svg{width:15px;height:15px;flex:none;margin-top:2px}
.form-note code{font-family:var(--mono); font-size:12px}

/* ============ FOOTER ============ */
footer.site{border-top:1px solid var(--line); padding:44px 0 34px; background:var(--bg-soft)}
.foot{display:flex; flex-wrap:wrap; gap:22px; justify-content:space-between; align-items:center}
.foot p{font-size:13.5px; color:var(--ink-3)}
.foot nav{display:flex; gap:20px; font-size:13.5px}
.foot nav a{color:var(--ink-3); transition:color .2s}
.foot nav a:hover{color:var(--ink)}
.totop{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-3); transition:color .2s, gap .2s var(--ease)}
.totop:hover{color:var(--ink); gap:11px}
.totop svg{width:14px;height:14px}

/* ============ TOAST ============ */
#toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px);
  background:var(--ink); color:var(--bg); padding:11px 20px; border-radius:999px;
  font-size:14px; opacity:0; pointer-events:none; transition:all .35s var(--ease); z-index:300;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.5); white-space:nowrap;
}
#toast.show{opacity:1; transform:translate(-50%,0)}

/* ============ REVEAL ANIMATION ============ */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in{opacity:1; transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}
}

/* ============ MOBILE NAV ============ */
#mobileNav{
  position:fixed; inset:64px 0 auto 0; z-index:99; background:var(--bg);
  border-bottom:1px solid var(--line); padding:14px 24px 26px;
  transform:translateY(-120%); transition:transform .4s var(--ease); box-shadow:var(--shadow);
}
#mobileNav.open{transform:none}
#mobileNav a{display:block; padding:13px 0; border-bottom:1px solid var(--line); font-size:17px; font-family:var(--serif)}
#mobileNav a:last-of-type{border-bottom:0}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .about-grid,.contact-grid{grid-template-columns:1fr; gap:40px}
  .portrait{max-width:330px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{padding:30px 22px}
  section{padding:74px 0}
}
@media (max-width:720px){
  .nav-links{display:none}
  #menuBtn{display:grid}
  .two{grid-template-columns:1fr}
  .tl-date{margin-left:0; width:100%}
  .hero{min-height:auto; padding:52px 0 70px}
  .hero-meta{gap:24px}
  .scroll-hint{display:none}
  .facts{grid-template-columns:1fr}
  .big-mail{font-size:20px}
  .copy-mail{margin-left:0; margin-top:14px}
}
@media (max-width:420px){
  .wrap{padding-inline:18px}
  .stats{grid-template-columns:1fr}
}

/* ============ PRINT ============ */
@media print{
  header.site,.marquee,.scroll-hint,#toast,#progress,#mobileNav,.filters,.hero-cta,.icon-btn{display:none !important}
  body{background:#fff; color:#000; font-size:11pt}
  section{padding:16pt 0; page-break-inside:avoid}
  .reveal{opacity:1 !important; transform:none !important}
  .card,.skill-card,.facts,.contact-list{box-shadow:none !important; break-inside:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:9pt; color:#555}
}