@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --paper:#f7f7f5;
  --white:#ffffff;
  --ink:#171717;
  --muted:#686964;
  --line:#d6d7d1;
  --accent:#ff5a47;
  --highlight:#efff70;
  --mono:'IBM Plex Mono',monospace;
  --sans:'DM Sans',Arial,sans-serif;
  --page:min(1160px,calc(100% - 48px));
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:82px}
body.folio-page{margin:0;overflow-x:hidden;background:var(--paper);color:var(--ink);font:16px/1.5 var(--sans);letter-spacing:0;-webkit-font-smoothing:antialiased}
.folio-page a{color:inherit}
.folio-page button{font:inherit}
.folio-page svg{width:1em;height:1em;stroke-width:1.8}
.folio-page ::selection{background:var(--highlight);color:var(--ink)}

.folio-progress{position:fixed;inset:0 0 auto;height:2px;z-index:200;pointer-events:none}
.folio-progress span{display:block;width:0;height:100%;background:var(--accent)}

.folio-header{height:64px;padding:0 max(24px,calc((100% - 1160px)/2));display:flex;align-items:center;justify-content:space-between;gap:28px;position:sticky;top:0;z-index:100;border-bottom:1px solid var(--line);background:rgba(247,247,245,.95);backdrop-filter:blur(12px)}
.folio-brand{font-size:20px;font-weight:700;text-decoration:none}
.folio-brand span,.folio-hero h1 span,.folio-footer strong span{color:var(--accent)}
.folio-nav{display:flex;align-items:center;gap:27px;font-size:13px;font-weight:600}
.folio-nav a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;position:relative}
.folio-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .2s ease}
.folio-nav a:hover::after,.folio-nav a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.folio-nav-github{padding-left:23px;border-left:1px solid var(--line)}
.folio-menu-button{display:none;width:38px;height:38px;padding:0;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:4px;background:var(--white);color:var(--ink);cursor:pointer}

.folio-hero{width:var(--page);min-height:min(680px,calc(100svh - 96px));margin:0 auto;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:80px;align-items:center}
.folio-hero-copy{padding:70px 0}
.folio-eyebrow,.folio-section-label{margin:0;font:600 11px var(--mono);text-transform:uppercase;color:var(--muted)}
.folio-hero h1{margin:18px 0 25px;font-size:clamp(72px,9vw,124px);line-height:.84;letter-spacing:0}
.folio-hero-line{margin:0;font-size:clamp(30px,3.5vw,48px);font-weight:600;line-height:1.12}
.folio-hero-line mark{padding:0 5px;background:var(--highlight);color:var(--ink)}
.folio-intro{max-width:590px;margin:25px 0 0;color:var(--muted);font-size:17px;line-height:1.7}
.folio-hero-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:31px}
.folio-hero-links a{min-height:44px;padding:0 15px;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:4px;background:var(--white);font-size:13px;font-weight:700;text-decoration:none;transition:transform .2s ease,border-color .2s ease}
.folio-hero-links a:hover{transform:translateY(-2px);border-color:var(--ink)}
.folio-hero-links .folio-primary-link{border-color:var(--ink);background:var(--ink);color:var(--white)}

.folio-profile-index{border-top:1px solid var(--ink)}
.folio-profile-index>div{min-height:100px;display:grid;grid-template-columns:76px minmax(0,1fr) 26px;gap:18px;align-items:center;border-bottom:1px solid var(--line)}
.folio-profile-index span{font:500 10px var(--mono);text-transform:uppercase;color:var(--muted)}
.folio-profile-index strong{font-size:18px}
.folio-profile-index svg{width:20px;height:20px;color:var(--accent)}

.folio-section{padding:88px max(24px,calc((100% - 1160px)/2));border-top:1px solid var(--line)}
.folio-section-label{display:flex;gap:12px;margin-bottom:43px}
.folio-section-label span{color:var(--accent)}
.folio-section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,.75fr);gap:70px;align-items:end;margin-bottom:52px}
.folio-section-head h2,.folio-elsewhere h2{margin:0;font-size:50px;line-height:1.08;letter-spacing:0}
.folio-section-head p,.folio-elsewhere p{margin:0;color:var(--muted);font-size:16px;line-height:1.7}

.folio-focus{background:var(--white)}
.folio-focus-list{border-top:1px solid var(--ink)}
.folio-focus-row{min-height:122px;display:grid;grid-template-columns:45px 32px minmax(190px,.65fr) minmax(0,1fr);gap:22px;align-items:center;border-bottom:1px solid var(--line)}
.folio-focus-row>span{font:600 10px var(--mono);color:var(--accent)}
.folio-focus-row>svg{width:22px;height:22px}
.folio-focus-row h3{margin:0;font-size:22px}
.folio-focus-row p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}

.folio-questions{background:var(--paper)}
.folio-question-list{border-top:1px solid var(--ink)}
.folio-question{min-height:132px;padding:18px 0;display:grid;grid-template-columns:45px 34px minmax(0,1fr) minmax(190px,.48fr) 24px;gap:20px;align-items:center;border-bottom:1px solid var(--line);text-decoration:none;position:relative;transition:padding .22s ease,background .22s ease}
.folio-question:hover,.folio-question:focus-visible{padding-left:14px;padding-right:14px;background:var(--white)}
.folio-question>span{font:600 10px var(--mono);color:var(--accent)}
.folio-question>svg:nth-of-type(1){width:22px;height:22px}
.folio-question>svg:last-child{width:18px;height:18px;transition:transform .2s ease}
.folio-question:hover>svg:last-child{transform:translate(3px,-3px)}
.folio-question h3{margin:0;font-size:21px;line-height:1.3}
.folio-question small{color:var(--muted);font-size:12px;line-height:1.5}

.folio-elsewhere{background:var(--ink);color:var(--white)}
.folio-elsewhere .folio-section-label{color:#999}
.folio-elsewhere .folio-section-label span{color:var(--accent)}
.folio-elsewhere-layout{display:grid;grid-template-columns:minmax(0,.75fr) minmax(430px,1.25fr);gap:90px;align-items:end}
.folio-elsewhere p{margin-top:20px;color:#aaa}
.folio-github-link{min-height:132px;padding:0 26px;display:grid;grid-template-columns:44px minmax(0,1fr) 24px;gap:20px;align-items:center;border-top:1px solid #666;border-bottom:1px solid #666;text-decoration:none;transition:border-color .2s ease,color .2s ease}
.folio-github-link:hover{border-color:var(--highlight);color:var(--highlight)}
.folio-github-link>svg:first-child{width:30px;height:30px}
.folio-github-link>svg:last-child{width:20px;height:20px}
.folio-github-link small{display:block;margin-bottom:4px;font:500 10px var(--mono);text-transform:uppercase;color:#999}
.folio-github-link strong{font-size:24px}

.folio-footer{min-height:160px;padding:38px max(24px,calc((100% - 1160px)/2));display:grid;grid-template-columns:auto 1fr auto;gap:30px;align-items:end;background:var(--white);border-top:1px solid var(--line)}
.folio-footer strong{font-size:25px}
.folio-footer p{margin:0;color:var(--muted);font-size:13px}
.folio-footer a{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;text-underline-offset:5px}

.motion-ready .folio-load{opacity:0;transform:translateY(14px);animation:folio-load-in .55s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--delay,0ms)}
.motion-ready .folio-reveal{transform:translateY(14px);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.motion-ready .folio-reveal.is-visible{transform:none}
@keyframes folio-load-in{to{opacity:1;transform:none}}

@media (max-width:900px){
  html{scroll-padding-top:72px}
  .folio-header{height:62px;padding:0 20px}
  .folio-menu-button{display:inline-flex}
  .folio-nav{position:absolute;top:61px;left:0;right:0;padding:10px 20px 18px;display:none;align-items:stretch;flex-direction:column;gap:0;border-bottom:1px solid var(--line);background:var(--paper)}
  .folio-nav.is-open{display:flex}
  .folio-nav a{min-height:43px;border-bottom:1px solid var(--line)}
  .folio-nav a::after{display:none}
  .folio-nav-github{padding-left:0;border-left:0}
  .folio-hero{min-height:0;padding:64px 0 70px;grid-template-columns:1fr;gap:55px}
  .folio-hero-copy{padding:0}
  .folio-hero h1{font-size:86px}
  .folio-profile-index{max-width:610px}
  .folio-section{padding-top:72px;padding-bottom:72px}
  .folio-section-head{grid-template-columns:1fr;gap:23px;margin-bottom:42px}
  .folio-elsewhere-layout{grid-template-columns:1fr;gap:45px}
}

@media (max-width:600px){
  :root{--page:calc(100% - 36px)}
  .folio-hero{padding:51px 0 58px;gap:45px}
  .folio-hero h1{margin:14px 0 22px;font-size:64px}
  .folio-hero-line{font-size:29px}
  .folio-intro{font-size:15px;line-height:1.65}
  .folio-hero-links{margin-top:25px}
  .folio-hero-links a{min-height:41px;padding:0 12px;font-size:12px}
  .folio-profile-index>div{min-height:79px;grid-template-columns:64px minmax(0,1fr) 22px;gap:12px}
  .folio-profile-index strong{font-size:15px}
  .folio-section{padding:58px 18px}
  .folio-section-label{margin-bottom:32px}
  .folio-section-head h2,.folio-elsewhere h2{font-size:37px}
  .folio-section-head p,.folio-elsewhere p{font-size:14px}
  .folio-focus-row{min-height:132px;padding:20px 0;grid-template-columns:28px 25px minmax(0,1fr);gap:9px 12px}
  .folio-focus-row h3{font-size:19px}
  .folio-focus-row p{grid-column:3;font-size:12px}
  .folio-question{min-height:148px;padding:19px 0;grid-template-columns:28px 25px minmax(0,1fr) 18px;gap:9px}
  .folio-question h3{font-size:18px}
  .folio-question small{grid-column:3;font-size:11px}
  .folio-question>svg:last-child{grid-column:4;grid-row:1 / 3}
  .folio-question:hover,.folio-question:focus-visible{padding-left:8px;padding-right:8px}
  .folio-elsewhere-layout{gap:34px}
  .folio-github-link{min-height:112px;padding:0 12px;grid-template-columns:36px minmax(0,1fr) 20px;gap:13px}
  .folio-github-link strong{font-size:21px}
  .folio-footer{min-height:170px;padding:32px 18px;grid-template-columns:1fr auto;gap:12px}
  .folio-footer p{grid-column:1 / 3;grid-row:2}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .motion-ready .folio-load,.motion-ready .folio-reveal{opacity:1;transform:none;animation:none;transition:none}
  .folio-page *{scroll-behavior:auto!important}
}