:root{
    color-scheme:light;
    --bg:#fcfbf8; --card:#ffffff;
    --ink:#16140f; --mut:#57534a; --soft:#7a766b;
    --line:#e8e4da; --hash:#dcd8cd;
    --red:#e31837; --red-hi:#c41330; --acc:#e31837;
    --gold:#ffb81c; --gold-ink:#7a5c0b; --gold-bg:rgba(255,184,28,.16); --gold-bd:rgba(176,132,20,.45);
}
html.dark{
    color-scheme:dark;
    --bg:#0d0d0f; --card:#141316;
    --ink:#f4f1ea; --mut:#a39d95; --soft:#857f76;
    --line:#262320; --hash:#2e2b27;
    --red:#e31837; --red-hi:#ff3b56; --acc:#ff3b56;
    --gold:#ffc843; --gold-ink:#ffc843; --gold-bg:rgba(255,200,67,.08); --gold-bd:rgba(255,200,67,.4);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip;background:var(--bg)}
body{
    background:var(--bg); color:var(--ink);
    font-family:'Barlow',system-ui,sans-serif;
    line-height:1.6; -webkit-font-smoothing:antialiased;
    overflow-x:clip;
    transition:background-color .25s ease,color .25s ease;
}
html.dark body::before{
    content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:
        radial-gradient(900px 480px at 82% -10%, rgba(227,24,55,.17), transparent 60%),
        radial-gradient(760px 440px at -12% 104%, rgba(255,184,28,.06), transparent 60%);
}
::selection{background:var(--red);color:#fff}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}
.cond{font-family:'Barlow Condensed',sans-serif}
.wrap{max-width:980px;margin:0 auto;
    padding-left:max(clamp(24px,6vw,40px), env(safe-area-inset-left));
    padding-right:max(clamp(24px,6vw,40px), env(safe-area-inset-right))}
section{scroll-margin-top:122px}
@media (min-width:681px){section{scroll-margin-top:96px}}

/* ---------- piping ---------- */
.pipe{height:6px;background:linear-gradient(to bottom, var(--red) 0 4px, var(--gold) 4px 6px)}

/* ---------- header ---------- */
header.site{
    position:sticky;top:0;z-index:50;
    background:rgba(252,251,248,.94);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
}
html.dark header.site{background:rgba(13,13,15,.92)}
.nav{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;padding-top:14px;padding-bottom:14px}
.brand{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:18px;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;margin-right:auto}
.brand .accent{color:var(--acc)}
.nav nav{display:flex;gap:16px;flex-wrap:wrap}
.nav nav a{font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--mut);text-decoration:none;padding:4px 0}
.nav nav a:hover{color:var(--acc)}
.toggle{
    font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
    border:1.5px solid var(--line);background:transparent;color:var(--mut);
    padding:6px 12px;border-radius:99px;cursor:pointer;
}
.toggle:hover{border-color:var(--red);color:var(--acc)}
@media (max-width:680px){
    .nav nav{flex-basis:100%;order:3}
}

/* ---------- hero ---------- */
.hero{padding-top:clamp(56px,11vw,120px);padding-bottom:clamp(40px,8vw,72px)}
.eyebrow{display:flex;align-items:center;gap:9px;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:var(--acc)}
.eyebrow::before{content:"";width:8px;height:8px;background:var(--red);flex:none}
h1{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(56px,13vw,120px);line-height:.94;letter-spacing:.01em;margin:16px 0 0}
h1 > span{display:block}
.route{position:relative;display:inline-block;max-width:100%}
.route svg{position:absolute;left:0;bottom:-14px;width:100%;height:30px;overflow:visible}
.route svg *{vector-effect:non-scaling-stroke}
.route .rt{stroke:var(--red);stroke-width:5;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 1.4s .4s ease forwards}
.route .o{stroke:var(--red);stroke-width:4;fill:none;opacity:0;animation:appear .3s .25s ease forwards}
.route .ah{stroke:var(--red);stroke-width:5;fill:none;stroke-linecap:round;opacity:0;animation:appear .25s 1.35s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes appear{to{opacity:1}}
.hero .sub{margin-top:clamp(36px,6.5vw,48px);font-size:16px;color:var(--mut);max-width:54ch}
.actions{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.btn{display:inline-block;background:var(--red);color:#fff;font-weight:600;font-size:13px;letter-spacing:.05em;text-transform:uppercase;padding:13px 22px;border-radius:6px;text-decoration:none;border:0;cursor:pointer;font-family:'Barlow',system-ui,sans-serif}
.btn:hover{background:var(--red-hi)}
.ghost{display:inline-block;border:1.5px solid var(--ink);color:var(--ink);font-weight:600;font-size:13px;letter-spacing:.05em;text-transform:uppercase;padding:12px 21px;border-radius:6px;text-decoration:none;background:transparent;cursor:pointer}
.ghost:hover{border-color:var(--red);color:var(--acc)}

/* ---------- section headers (yard lines) ---------- */
.yard{display:flex;align-items:center;gap:18px;margin:0 0 clamp(22px,4vw,30px)}
.yard h2{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(30px,5.5vw,42px);letter-spacing:.03em;text-transform:uppercase;flex:none}
.yard .hash{flex:1;height:10px;background:repeating-linear-gradient(90deg,var(--hash) 0 2px,transparent 2px 14px)}
.sect{padding-top:clamp(36px,7vw,64px);padding-bottom:clamp(36px,7vw,64px)}

/* ---------- about ---------- */
.about p{color:var(--mut);font-size:16px;max-width:62ch;white-space:pre-line}

/* ---------- currently working on ---------- */
.now-list{display:flex;flex-direction:column;gap:14px}
.now{background:var(--card);border:2px dotted rgba(227,24,55,.55);border-radius:10px;padding:18px 20px;transition:border-color .2s ease}
.now:hover{border-color:var(--red)}
html.dark .now{background:#131215;border-color:rgba(255,59,86,.5)}
html.dark .now:hover{border-color:var(--red-hi)}
.now .head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.now h3{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:21px;letter-spacing:.03em;text-transform:uppercase;line-height:1.15}
.now .status{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:14px;line-height:1.15;letter-spacing:.12em;text-transform:uppercase;padding:1px 9px;border-radius:4px;border:1.5px solid rgba(227,24,55,.55);color:var(--ink)}
html.dark .now .status{border-color:rgba(255,59,86,.5)}
.now p{font-size:14.5px;color:var(--mut);margin-top:5px}

/* ---------- skills ---------- */
.group{margin-top:6px}
.group + .group{margin-top:26px}
.group h3{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:13.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--soft);margin-bottom:13px}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{border:1.5px solid rgba(227,24,55,.55);color:var(--ink);font-size:14px;font-weight:500;padding:8px 15px;border-radius:6px;background:var(--card)}
html.dark .chip{border-color:rgba(255,59,86,.5);background:transparent}
.chip:hover{border-color:var(--red)}

/* ---------- projects ---------- */
.cards{display:grid;grid-template-columns:1fr;gap:16px}
.card{background:var(--card);border:2px dotted rgba(227,24,55,.55);border-radius:10px;padding:clamp(20px,4vw,26px);display:flex;flex-direction:column;gap:13px;transition:border-color .2s ease}
.card:hover{border-color:var(--red)}
html.dark .card{background:#131215;border-color:rgba(255,59,86,.5)}
html.dark .card:hover{border-color:var(--red-hi)}
.card .top{display:flex;align-items:baseline;gap:12px}
.card .num{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:17px;color:var(--acc)}
.card h3{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:23px;letter-spacing:.03em;text-transform:uppercase;line-height:1.15}
.card p{font-size:14.5px;color:var(--mut);white-space:pre-line}
.awards{display:flex;gap:8px;flex-wrap:wrap}
.award{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:4px;background:transparent;border:1.5px solid var(--gold);color:var(--ink)}
.tech{display:flex;gap:8px;flex-wrap:wrap}
.tag{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:4px;border:1.5px solid rgba(227,24,55,.55);color:var(--ink)}
html.dark .tag{border-color:rgba(255,59,86,.5)}
.card .go{margin-top:auto;padding-top:4px;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);text-decoration:none}
.card .go:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- resume ---------- */
.resume p{color:var(--mut);font-size:16px;max-width:56ch}
.resume .row{display:flex;align-items:center;gap:14px;margin-top:20px;flex-wrap:wrap}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn[disabled]:hover{background:var(--red)}
.quip{font-style:italic;font-size:13.5px;color:var(--soft)}

/* ---------- contact ---------- */
.contact p{color:var(--mut);font-size:16px}
.email{display:inline-block;margin-top:14px;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:clamp(22px,4.6vw,32px);letter-spacing:.03em;color:var(--acc);text-decoration:none;overflow-wrap:anywhere}
.email:hover{text-decoration:underline;text-underline-offset:5px}
.socials{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.social{display:inline-flex;align-items:center;gap:9px;border:1.5px solid var(--line);border-radius:6px;padding:9px 15px;text-decoration:none;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.social:hover{border-color:var(--red);color:var(--acc)}
.social svg{width:17px;height:17px;fill:currentColor}

/* ---------- footer ---------- */
footer .inner{padding-top:26px;padding-bottom:34px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
footer{border-top:1px solid var(--line);margin-top:clamp(28px,6vw,52px)}

@media (prefers-reduced-motion: reduce){
    *{animation:none!important;transition:none!important}
    html{scroll-behavior:auto}
    .route .rt{stroke-dashoffset:0}
    .route .o,.route .ah{opacity:1}
}