:root{
  --bg-top:#ffffff; --bg-mid:#ffffff; --bg-bottom:#ffffff;
  --ink:#17181c; --ink-muted:#565b66; --ink-faint:#8d94a1;
  --rule:rgba(23,24,28,.11); --border:rgba(23,24,28,.13);
  --orange:#a85f2d; --orange-bright:#f2b47d; --orange-deep:#714226;
  --orange-wash:#f0aa72; --orange-mist:#ffe8d8; --orange-shadow:#b86a3d; --blue-mist:#dce9ff;
  --display:"Archivo", sans-serif; --body:"Manrope", sans-serif; --mono:"JetBrains Mono", monospace;
  --shell:1160px; --r:8px; --ease:cubic-bezier(.2,.7,.2,1);
  --glass-base:linear-gradient(145deg, rgba(255,255,255,.9), rgba(255,232,216,.66) 36%, rgba(255,255,255,.54) 58%, rgba(248,250,255,.74));
  --gloss:linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.36) 35%, rgba(255,255,255,0) 64%);
  --glass-blur:saturate(170%) blur(30px);
  --glass-edge:rgba(255,255,255,.72);
  --glass-depth:0 18px 48px -30px rgba(184,106,61,.5), 0 46px 96px -62px rgba(35,42,62,.44);
  --glass-shadow:0 2px 1px rgba(255,255,255,.95) inset, 0 0 0 1px rgba(255,255,255,.64) inset, 0 -1px 0 rgba(184,106,61,.14) inset, 0 20px 50px -32px rgba(35,42,62,.38);
  --glass-shadow-hi:0 2px 1px rgba(255,255,255,1) inset, 0 0 0 1px rgba(255,255,255,.78) inset, 0 32px 76px -38px rgba(35,42,62,.5), 0 0 78px -28px rgba(240,170,114,.82);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#ffffff; color:var(--ink); font-family:var(--body); font-size:1.0625rem; line-height:1.68; overflow-x:hidden; -webkit-font-smoothing:antialiased}
a{color:inherit; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; transition:opacity .2s var(--ease)}
a:hover{opacity:.68}
code,pre{font-family:var(--mono)}
code{font-size:.9em; color:var(--ink)}
pre{margin:0; overflow-x:auto; white-space:pre-wrap}
h1,h2,h3{font-family:var(--display); color:var(--ink); line-height:1.04; letter-spacing:0; font-weight:700}
em{font-style:italic}
:focus-visible{outline:3px solid rgba(113,66,38,.9); outline-offset:4px; border-radius:var(--r)}
.skip-link{position:fixed; left:1rem; top:1rem; z-index:200; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; background:var(--ink); color:#fff; font-family:var(--mono); font-size:.9rem}
.skip-link:focus,.skip-link:focus-visible{width:auto; height:auto; padding:.72rem 1rem; overflow:visible; clip:auto; clip-path:none; border-radius:var(--r); box-shadow:0 18px 42px -24px rgba(23,24,28,.7)}
.bg,.grain,.bloom{position:fixed; inset:0; pointer-events:none}
.bg{display:block; z-index:-4; background:linear-gradient(135deg,#fff 0%,#fff 31%,rgba(255,232,216,.86) 48%,rgba(248,251,255,.92) 68%,#fff 100%),linear-gradient(24deg,rgba(240,170,114,.34),rgba(255,255,255,0) 42%)}
.grain{position:fixed; inset:0; z-index:-3; opacity:.12; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.bloom{position:fixed; inset:0; z-index:-2; opacity:.95; mix-blend-mode:screen; background:linear-gradient(118deg,rgba(255,255,255,0) 0 27%,rgba(240,170,114,.48) 39%,rgba(255,214,186,.4) 48%,rgba(215,232,255,.22) 60%,rgba(255,255,255,0) 74%),linear-gradient(8deg,rgba(255,255,255,0) 0 60%,rgba(255,232,216,.62) 100%)}
.shell{max-width:var(--shell); margin:0 auto; padding-inline:clamp(1.25rem,5vw,4.5rem)}
.g12{display:grid; grid-template-columns:repeat(12,1fr); column-gap:clamp(1rem,2.2vw,1.8rem)}
section{padding:clamp(3.5rem,7vw,6rem) 0; position:relative}
.glass{position:relative; background:var(--gloss), var(--glass-base); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); box-shadow:var(--glass-shadow), var(--glass-depth); border:1px solid var(--glass-edge); border-radius:var(--r)}
.glass::after{content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; padding:1.35px; background:linear-gradient(138deg,rgba(255,255,255,.95),rgba(240,170,114,.58) 25%,rgba(168,95,45,.22) 46%,rgba(148,173,210,.2) 68%,rgba(255,255,255,.62)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
.glass.sheen::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .35s var(--ease); background:radial-gradient(260px circle at var(--mx,50%) var(--my,12%), rgba(255,255,255,.6), transparent 60%)}
.glass.sheen:hover::before{opacity:1}
nav{position:sticky; top:0; z-index:100; background:rgba(255,255,255,.72); -webkit-backdrop-filter:saturate(160%) blur(18px); backdrop-filter:saturate(160%) blur(18px); border-bottom:1px solid var(--rule)}
.nav-in{max-width:var(--shell); margin:0 auto; padding:.9rem clamp(1.25rem,5vw,4.5rem); display:flex; align-items:center; justify-content:space-between; gap:1rem}
.brand{font-family:var(--display); font-weight:800; color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:.45rem}
.brand::after{content:""; width:.52rem; height:.52rem; border-radius:999px; background:radial-gradient(circle at 35% 30%,#fff 0 11%,var(--orange-bright) 25%,var(--orange-shadow) 100%); box-shadow:0 0 26px rgba(240,170,114,.62)}
.nav-links{display:flex; gap:1.25rem; font-size:.95rem; color:var(--ink-muted)}
.nav-links a{text-decoration:none}
.nav-links a:hover{color:var(--ink); opacity:1}
.hero{padding-top:clamp(3rem,5vw,5rem); padding-bottom:clamp(1.75rem,4vw,3rem); row-gap:clamp(1.25rem,2.5vw,2rem); align-items:start}
.hero .kicker{grid-column:1/-1}
.hero h1{grid-column:1/12; font-size:4.95rem; max-width:10.8ch; margin:.2rem 0 .2rem}
.hero h1 .grad{background:linear-gradient(92deg,#17181c 0%,#714226 48%,#b86a3d 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent}
.lead-wrap{grid-column:1/7; padding:1.25rem; align-self:start}
.lead{font-size:1.22rem; color:var(--ink-muted); max-width:54ch}
.cta{display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.2rem}
.stats{grid-column:8/13; display:grid; grid-template-columns:1fr 1fr; gap:.85rem; margin-top:.2rem}
.stat{padding:1.05rem 1.15rem}
.stat .n{font-family:var(--display); font-size:1.8rem; color:var(--ink); font-weight:700; line-height:1}
.stat .l{font-family:var(--mono); font-size:.72rem; color:var(--ink-muted); margin-top:.5rem; text-transform:uppercase; letter-spacing:0}
.btn{font-family:var(--mono); font-size:.9rem; font-weight:500; padding:.68rem 1.06rem; border-radius:999px; color:var(--ink); text-decoration:none; background:rgba(255,255,255,.66); border:1px solid rgba(23,24,28,.13); box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 12px 28px -22px rgba(35,42,62,.45); -webkit-backdrop-filter:saturate(150%) blur(16px); backdrop-filter:saturate(150%) blur(16px); transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease)}
.btn:hover{transform:translateY(-2px); box-shadow:var(--glass-shadow),0 0 36px -20px rgba(240,170,114,.86); opacity:1; background:rgba(255,255,255,.84)}
.btn.solid{background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(255,232,216,.72)); border-color:rgba(184,106,61,.18)}
.kicker{font-family:var(--mono); font-size:.82rem; color:var(--ink-muted); letter-spacing:0; margin:0 0 1.2rem; display:flex; align-items:center; gap:.8rem}
.kicker::before{content:""; width:3rem; height:1px; background:linear-gradient(90deg,rgba(23,24,28,.25),rgba(168,95,45,.66))}
.sec-head{margin-bottom:2.8rem}
.sec-head h2{font-size:3.05rem; max-width:14ch; margin-top:.7rem}
.chips{display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1rem}
.chip{font-family:var(--mono); font-size:.78rem; font-weight:500; padding:.36rem .7rem; border-radius:999px; background:rgba(255,255,255,.56); color:var(--ink-muted); border:1px solid rgba(23,24,28,.10); box-shadow:0 1px 0 rgba(255,255,255,.7) inset; -webkit-backdrop-filter:saturate(140%) blur(12px); backdrop-filter:saturate(140%) blur(12px)}
.tags{margin-top:1rem; font-size:.9rem; color:var(--ink-faint)}
.links{margin-top:1.2rem; display:flex; flex-wrap:wrap; gap:1.05rem; font-family:var(--mono); font-size:.88rem; position:relative; z-index:1}
.feats{align-items:start; margin-bottom:2.3rem}
.feat{padding:clamp(1.35rem,2.4vw,2rem); position:relative; overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.feat:hover,.stat:hover,.wrow.glass:hover,.xp.glass:hover{transform:translateY(-3px); box-shadow:var(--glass-shadow-hi)}
.feat.a{grid-column:1/8}
.feat.b{grid-column:8/13; margin-top:4rem}
.feat .idx{position:absolute; top:.6rem; right:1rem; font-family:var(--display); font-weight:800; font-size:3.6rem; line-height:1; color:rgba(23,24,28,.07)}
.feat .role,.wrow .role{font-family:var(--mono); font-size:.78rem; color:var(--ink-muted); letter-spacing:0; margin-bottom:.65rem}
.feat h3{font-size:2rem; margin-bottom:.95rem; padding-bottom:.9rem; border-bottom:1px solid var(--rule)}
.feat p,.wrow .wd,.xp p,.band .res-b,.approach .body p{color:var(--ink-muted)}
.worklist{border-bottom:0; display:grid; gap:.8rem; margin-top:2.4rem}
.wrow{display:grid; grid-template-columns:3.5rem minmax(0,2.35fr) minmax(0,4.5fr) auto; column-gap:clamp(1.1rem,2.4vw,2.4rem); align-items:baseline; padding:1.55rem; transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease)}
.wrow.glass{background:linear-gradient(145deg, rgba(255,255,255,.8), rgba(255,232,216,.52) 45%, rgba(250,252,255,.58)); border:1px solid var(--glass-edge)}
.wrow.glass:hover{background:linear-gradient(145deg, rgba(255,255,255,.9), rgba(255,232,216,.68) 42%, rgba(248,250,255,.72))}
.wrow .idx{font-family:var(--mono); font-weight:700; font-size:.9rem; color:var(--orange-deep)}
.wrow .wt h3{font-size:1.28rem}
.wrow .wt .role{margin-top:.35rem}
.wrow .wd{font-size:1.02rem}
.wrow .wd .tags{margin-top:.55rem}
.wrow .lk{font-family:var(--mono); font-size:.84rem; white-space:nowrap; align-self:center; color:var(--ink-muted)}
.wrow .lk span{color:var(--ink-faint)}
.subname{font-family:var(--mono); font-weight:500; font-size:.58em; color:var(--ink-faint)}
.band{background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,232,216,.5), rgba(248,250,255,.72)); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); -webkit-backdrop-filter:saturate(130%) blur(10px); backdrop-filter:saturate(130%) blur(10px)}
.band-kicker{grid-column:1/-1; margin-bottom:1.35rem}
.band .res-q{grid-column:1/9; font-family:var(--display); font-weight:700; font-size:2.25rem; line-height:1.16; color:var(--ink)}
.band .res-b{grid-column:1/8; margin-top:1.35rem}
.approach .body{grid-column:1/7; padding:1.55rem}
.approach .pull{grid-column:8/13; align-self:center; font-family:var(--display); font-weight:700; font-size:2rem; line-height:1.18; color:var(--ink); padding:1.55rem}
.approach .body p{max-width:58ch; margin-bottom:1.1rem}
.approach .body p:last-child{margin-bottom:0}
.xp{display:grid; grid-template-columns:10rem 1fr; gap:2rem; padding:1.55rem; margin-bottom:.8rem; max-width:1000px; transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.xp .when{font-family:var(--mono); font-size:.8rem; color:var(--orange-deep); font-weight:500; line-height:1.5}
.xp h3{font-size:1.18rem; margin-bottom:.35rem}
.xp p{font-size:1.02rem; max-width:62ch}
.skills{display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.6rem; max-width:980px}
.skills span{font-family:var(--mono); font-size:.88rem; padding:.5rem .92rem; border-radius:var(--r); background:rgba(255,255,255,.56); color:var(--ink-muted); border:1px solid rgba(23,24,28,.10); box-shadow:0 1px 0 rgba(255,255,255,.7) inset; -webkit-backdrop-filter:saturate(140%) blur(12px); backdrop-filter:saturate(140%) blur(12px)}
footer{padding:clamp(4rem,9vw,7rem) 0 clamp(3rem,6vw,5rem)}
.foot-big{font-family:var(--display); font-weight:800; font-size:3.7rem; color:var(--ink); line-height:1; max-width:14ch; margin-bottom:2rem}
.foot-cta{display:flex; flex-wrap:wrap; gap:.8rem}
.muted{color:var(--ink-faint); font-size:.9rem; margin-top:2.6rem; font-family:var(--mono); letter-spacing:0}
@media(max-width:940px){
  .hero h1{grid-column:1/-1; font-size:3.55rem; max-width:11ch}
  .lead-wrap,.stats{grid-column:1/-1}
  .feat.a,.feat.b,.band .res-q,.band .res-b,.approach .body,.approach .pull{grid-column:1/-1; margin-top:0}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .wrow{grid-template-columns:2.4rem 1fr; row-gap:.55rem; padding:1.25rem}
  .wrow .wd,.wrow .lk{grid-column:2}
}
@media(max-width:640px){
  .nav-links{display:none}
  .hero{padding-top:1.35rem; padding-bottom:.4rem; row-gap:.8rem}
  .hero h1{font-size:2.42rem}
  .lead-wrap{padding:.9rem}
  .lead{font-size:1.05rem}
  .stats{grid-template-columns:repeat(2,1fr); gap:.55rem}
  .stat{padding:.72rem}
  .stat .n{font-size:1.55rem}
  .stat .l{font-size:.64rem}
  .cta{display:grid; grid-template-columns:1fr 1fr; gap:.5rem}
  .btn{font-size:.82rem; padding:.58rem .5rem; text-align:center}
  .sec-head h2{font-size:2.25rem}
  .feat h3{font-size:1.55rem}
  .band .res-q,.approach .pull{font-size:1.55rem}
  .xp{grid-template-columns:1fr; gap:.5rem; padding:1.25rem}
  .foot-big{font-size:2.55rem}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important; scroll-behavior:auto!important}.glass.sheen::before{display:none!important}}