@font-face{font-family:"Bricolage Grotesque";src:url("assets/bricolage-grotesque.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("assets/inter-variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Iosevka";src:url("assets/iosevka-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{color-scheme:light;--paper:#f3f4ef;--ink:#262b27;--strong:#121612;--muted:#525a53;--accent:#3b6347;--accent-2:#8a6416;--accent-surface:#e1e4d9;--surface:#eaece4;--rule:#c3c9b8;--display:"Bricolage Grotesque",Inter,system-ui,sans-serif;--body:Inter,system-ui,sans-serif;--mono:Iosevka,ui-monospace,"Courier New",monospace;--small:.875rem}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-color:var(--muted) var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font:1rem/1.65 var(--body);-webkit-print-color-adjust:exact;print-color-adjust:exact}
::selection{background:var(--accent);color:var(--paper)}
main{max-width:1120px;padding:80px 64px 32px;margin:auto}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.22em}
a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
p{margin:0 0 .75rem}
h1,h2,h3{margin:0;font-weight:600;color:var(--strong);text-wrap:balance}
h1{font:650 clamp(2.75rem,6vw,5rem)/1 var(--display);letter-spacing:-.035em}
h2{font:600 1.728rem/1.2 var(--display);letter-spacing:-.01em;margin-bottom:1.75rem}
h3{font-size:1.2rem;font-weight:600;line-height:1.35}
.org{font-weight:400;color:var(--muted)}
.intro{display:grid;grid-template-columns:1fr auto;column-gap:3rem}
.profession{font-size:1.44rem;font-weight:550;margin:1.25rem 0 0;color:var(--accent)}
.stack-line{font-size:var(--small);color:var(--muted);margin:.5rem 0 0}
.phone{display:none}
.contact{align-self:end;font-size:var(--small);display:flex;flex-direction:column;align-items:flex-start;gap:.4rem}
.contact p{margin:0;color:var(--muted)}
.profiles{display:flex;gap:1rem}
.download{display:flex;flex-direction:column;gap:0;margin-top:1.25rem;background:var(--accent);color:var(--paper);padding:.7rem 1.2rem;text-decoration:none;min-width:188px}
.download span{font-size:.75rem;color:var(--paper)}
.summary{grid-column:1/-1;font-size:1.25rem;line-height:1.6;max-width:70ch;margin:2.5rem 0 1.5rem}
nav{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:1.5rem;font-size:var(--small);padding-bottom:2rem}
section{border-top:1px solid var(--rule);padding-top:2rem;margin-top:2rem;scroll-margin-top:2rem}
section:target h2{color:var(--accent)}
.entry{display:grid;grid-template-columns:185px 1fr;gap:2rem;margin-bottom:2rem;break-inside:avoid}
.entry-meta{font:var(--small)/1.65 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums;padding-top:.1rem}
.entry-meta p{margin-bottom:.15rem}
.kicker{font:.6875rem/1.65 var(--body);letter-spacing:.09em;text-transform:uppercase}
.entry-meta p+.kicker{margin-top:.4rem}
.entry-body{max-width:72ch;min-width:0}
.role{color:var(--accent);margin:.2rem 0 .75rem}
ul{padding-left:1.1rem;margin:.75rem 0}
li{padding-left:.2rem;margin-bottom:.4rem}
li::marker{color:var(--muted)}
.technology{font-size:var(--small);color:var(--muted);margin-top:1rem}
.diagram{margin:1.25rem 0 0;max-width:min(600px,100%);container-type:inline-size}
/* The 600-unit SVG can shrink to 90% (540px) without changing layouts at
   the page-column breakpoint. Text steps remain the no-container-query fallback. */
.diagram-wide{display:none}
.diagram-steps{list-style:decimal;padding:0 0 0 1.5rem;margin:0}
.diagram-steps li{padding:0 0 1.5rem .5rem;margin:0}
.diagram-steps li::marker{color:var(--accent);font-weight:600}
.diagram-steps li:last-child{padding-bottom:0}
.diagram-steps span{display:block}
.diagram-steps span,.diagram-failure{font-size:var(--small);color:var(--muted)}
.diagram-failure{margin:.5rem 0 0}
@container (width >= 540px){
 .diagram-wide{display:block}
 .diagram-steps{display:none}
}
.diagram svg{display:block;width:100%;height:auto}
.dg-box{fill:var(--surface);stroke:var(--rule);stroke-width:1}
.dg-label{fill:var(--strong);font:400 14px var(--mono);text-anchor:middle}
.dg-sub{fill:var(--muted);font:400 12px var(--mono);text-anchor:middle}
.dg-note{text-anchor:start}
.dg-line{stroke:var(--accent);stroke-width:1}
.dg-head{fill:var(--accent)}
figcaption{color:var(--muted);font-size:var(--small);margin-top:.6rem;max-width:72ch}
.section-intro{color:var(--muted);margin-top:-.75rem;margin-bottom:2rem}
.project h3{margin-bottom:.5rem}
.project-link{font:var(--small) var(--mono)}
.skills{margin:0 0 2rem}
.skills>div{display:grid;grid-template-columns:185px 1fr;gap:2rem;margin:1rem 0}
dt{font-size:var(--small);font-weight:600;color:var(--strong)}
dd{margin:0;max-width:72ch}
.education .entry{margin-bottom:1.25rem}
.education h3{font-size:1rem}
.references-list{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.references-list .role,.reference-note{font-size:var(--small)}
.reference-note{color:var(--muted);margin:.5rem 0 0}
footer{border-top:1px solid var(--rule);margin-top:3rem;padding:2rem 0 0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:.4rem 1.5rem;font-size:var(--small)}
footer p{grid-column:1/-1;margin:0;max-width:70ch;font-size:1rem}footer span{color:var(--muted)}
.print-url{display:none}
.skip-link{position:absolute;left:1rem;top:0;padding:.5rem 1rem;background:var(--paper);transform:translateY(-120%)}
.skip-link:focus{transform:translateY(0)}
@media screen and (max-width:900px){
 main{padding:40px 24px 24px}.intro{grid-template-columns:minmax(0,1fr);gap:0}.contact{margin-top:1.75rem}.download{margin-top:.75rem}.summary{font-size:1.125rem;margin-top:2rem}nav{gap:1rem;flex-wrap:wrap;padding-bottom:.5rem}
 .entry,.skills>div{grid-template-columns:1fr;gap:.5rem}.references-list{grid-template-columns:1fr;gap:1rem}.entry-meta{display:flex;gap:.35rem 1rem;flex-wrap:wrap;align-items:baseline}.entry-meta p+.kicker{margin-top:0}.entry{margin-bottom:2rem}section{padding-top:1.5rem;margin-top:1.5rem}h2{font-size:1.75rem}footer{grid-template-columns:minmax(0,1fr)}footer span{margin-top:.5rem}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media screen and (max-width:700px){
 main{padding-top:24px}.profession{margin-top:.75rem}
 .contact{flex-direction:row;flex-wrap:wrap;gap:.25rem .75rem;margin-top:1rem;align-items:center}
 .contact>p{flex-basis:100%}
 .profiles{gap:.75rem;flex-wrap:wrap;flex:1 1 auto;min-width:0}.download{min-width:0;max-width:100%;margin:0;padding:.5rem .75rem;flex:0 0 auto}
 .summary{font-size:1rem;margin:1.25rem 0 .75rem}nav{gap:.75rem;padding-bottom:0}
 #experience{margin-top:1rem;padding-top:1.25rem}#experience>h2{margin-bottom:1rem}
 .profiles a,nav a,.project-link{display:inline-flex;align-items:center;min-height:44px}
}
@media screen{
 .download{position:relative;padding-right:1.75rem}
 .download::after{content:"";position:absolute;top:0;right:0;border-top:.75rem solid var(--paper);border-left:.75rem solid var(--accent-surface);pointer-events:none}
 main{overflow-wrap:anywhere}.intro>div{min-width:0}
 /* Highlight prose links only; navigation keeps its full-size focus outline. */
 .entry-body p a:focus-visible{background-color:var(--accent-surface)}
 footer>a{justify-self:start;max-width:100%}
 section:target{border-top-color:var(--accent)}
 .summary,.entry-body p,.entry-body li,dd,figcaption,footer p{text-wrap:pretty}
 .entry-body .technology{max-width:75ch;text-wrap:balance}
}
@media screen and (hover:hover){
 a:hover{text-decoration-thickness:2px}.download:hover{background:var(--ink)}
 .entry-body p a:hover{background-color:var(--accent-surface)}
}
@page{size:A4;margin:10mm 13mm}
@media print{
 :root{--paper:#fff;--ink:#202621;--strong:#121612;--muted:#48544c;--rule:#bdc5bf;--surface:#fff}
 body{font-size:8pt;line-height:1.33}main{max-width:none;margin:0;padding:0}
 .skip-link,nav,.download,.profiles,footer,.diagram,.kicker{display:none}.print-url,.phone{display:block;font-size:8pt}.stack-line{font-size:8.5pt;margin-top:1.5mm}
 .intro{display:grid;grid-template-columns:1fr auto;gap:0 12mm}h1{font-size:26pt;line-height:.98}.profession{font-size:11.5pt;margin-top:3mm}.contact{font-size:8pt;gap:1mm;margin:0;align-self:end}
 .summary{font-size:9.6pt;line-height:1.42;margin:3mm 0 0;max-width:none}
 section{padding-top:2.5mm;margin-top:3mm;scroll-margin:0}h2{font-size:14.5pt;margin-bottom:2mm}h3{font-size:9.4pt}
 .entry,.skills>div{display:grid;grid-template-columns:25mm 1fr;gap:4mm}.entry{margin-bottom:1.4mm}.entry-meta{display:block;font-size:8pt;padding-top:0}.kicker{font-size:7pt;letter-spacing:.08em}.entry-meta p+.kicker{margin-top:1.5mm}.entry-body{max-width:none}
 .role{margin:1mm 0 2mm}p{margin-bottom:1.3mm}ul{margin:1.2mm 0;padding-left:3mm}li{margin-bottom:.5mm;padding-left:.5mm}
 .technology,.project-link,dt{font-size:7.4pt}.technology{margin-top:1.2mm}.section-intro{margin:0 0 3mm;font-size:8.4pt}
 #skills{break-before:page;border-top:0}
 .project{margin-bottom:1.2mm}.project h3{margin-bottom:.8mm}
 .project .entry-body>p:last-child{margin-bottom:0}
 #projects .section-intro{margin-bottom:2mm}#skills,.education{margin-top:3mm;padding-top:3mm}
 .skills{margin:0}.skills>div{margin:1.4mm 0}.education .entry{margin-bottom:1.2mm}.education h3{font-size:8.6pt}
 a{color:var(--ink);text-decoration:none}.entry-body a{text-decoration:underline}strong{font-weight:700}
 .references{break-inside:avoid;margin-top:2.5mm;padding-top:2.5mm}.references h2{font-size:14.5pt;margin-bottom:1.5mm}.references-list p{margin-bottom:.6mm}.references-list{grid-template-columns:1fr 1fr;gap:5mm}.references-list .role,.reference-note{font-size:8pt}.reference-note{margin:2mm 0 0}
}

@media (forced-colors:active){
 .download::after{display:none}
 .dg-label,.dg-sub,.dg-head{fill:CanvasText}.dg-box,.dg-line{stroke:CanvasText}
}
/* Keep standalone links touch-sized through the tablet layout and on larger touchscreens. */
@media screen and (min-width:701px) and (max-width:900px),screen and (min-width:701px) and (any-pointer:coarse){
 .profiles a,nav a,.project-link,.contact p a,footer>a{display:inline-flex;align-items:center;min-width:44px;min-height:44px}
}
@media screen and (max-width:700px){.contact p a,footer>a{display:inline-flex;align-items:center;min-width:44px;min-height:44px}}
/* Artifact look: icon sprite, gradient dividers with medallions, mono contact links, compact download button, diagram card. */
:root{--radius:6px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:1em;height:1em;fill:currentColor;flex:none}
.email,.profiles{font-family:var(--mono)}
.profiles{flex-wrap:wrap;gap:.25rem 1rem}
.profiles a{display:inline-flex;align-items:center;gap:.4rem}
.profiles a,.email a{text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)}
.profiles .icon{color:var(--muted)}
.download{flex-direction:row;display:inline-flex;align-items:baseline;gap:.35rem;min-width:0;margin-top:.9rem;padding:.6rem 1.1rem;border-radius:var(--radius);font-weight:550}
.download span::before{content:"· "}
.download::after{display:none}
nav a{font-weight:550;white-space:nowrap}
.diagram{padding:1.25rem;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);box-sizing:border-box}
.dg-box{fill:var(--accent-surface)}
.dg-dead{stroke:var(--accent-2)}
.dg-dead-label{fill:var(--accent-2)}
@media screen{
 section{border-top:0;padding-top:0;margin-top:2.5rem}
 .ornate{display:flex;align-items:center;gap:.75rem;margin:0 0 2rem}
 .swoosh{flex:1;min-width:0;width:100%;height:16px;display:block}
 .medallion{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--accent);background:var(--surface);color:var(--accent)}
 .medallion .icon{width:1.1rem;height:1.1rem}
 section:target{border-top-color:transparent}
}
@media screen and (max-width:700px){.download{margin:0;padding:.5rem .75rem}.profiles{flex:1 1 100%}}
@media print{.ornate,.diagram,.download{display:none}}
@media (forced-colors:active){.medallion{border-color:CanvasText}.swoosh path{fill:CanvasText}.dg-dead{stroke:CanvasText}.dg-dead-label{fill:CanvasText}}
/* Links show their address as the link text so printed and OCR-read copies keep every URL. */
.project-link{display:inline-flex;align-items:baseline;gap:.4rem;margin-right:1rem;overflow-wrap:anywhere}
.project-link .icon{align-self:center;color:var(--muted)}
@media print{.project-link{margin-right:2mm}.project-link .icon{display:none}.print-url{max-width:none}}
/* Print follows the design artifact's print layout: compact header, mono section labels with brass rules, entry rail with kickers. */
@media print{
 :root{--rail:24mm}
 .intro{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:0 8mm;padding-bottom:2.5mm;border-bottom:.5pt solid var(--rule)}
 h1{font:650 20pt/1.05 var(--display);letter-spacing:-.02em}
 h1 br{display:none}
 .profession{font-size:10.5pt;font-weight:550;margin:1.5mm 0 0}
 .stack-line{font-size:7.6pt;margin:1mm 0 0}
 .contact{align-self:start;align-items:flex-end;text-align:right;font:6.6pt/1.55 var(--mono);color:var(--muted);gap:0}
 .contact p{margin:0}
 .email a,.print-url a{color:var(--accent);text-decoration:none}
 .print-url{display:block;font:inherit;max-width:none}
 .summary{font-size:8.8pt;line-height:1.4;margin:2.5mm 0 0}
 section{border-top:.5pt solid var(--accent-2);padding-top:2mm;margin-top:3.5mm}
 #experience{border-top:.5pt solid var(--accent-2)}
 #skills{break-before:page;border-top:0}
 h2{font:400 6.6pt/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 2.5mm}
 .entry{grid-template-columns:var(--rail) 1fr;gap:4mm}
 .entry-meta{font:6.6pt/1.4 var(--mono);color:var(--muted)}
 .kicker{display:block;font:6.2pt/1.35 var(--mono);letter-spacing:0;text-transform:none;margin-top:1mm}
 .project .entry-meta{display:block}
 h3{font-size:9pt}
 .technology{font:6.4pt/1.4 var(--mono);color:var(--muted)}
 .technology strong{display:none}
 dt{font-weight:400;color:var(--muted);font-size:7.6pt}
 .project-link{font:6.4pt/1.4 var(--mono);color:var(--accent);text-decoration:none}
 .entry-body a.project-link{text-decoration:none}
 .education h3{display:inline;font-size:8.2pt}.education h3::after{content:". "}
 .education .entry-body p{display:inline}
 .education .entry-body a.project-link{display:block;margin-top:.6mm}
 .references-list{grid-template-columns:1fr;gap:2mm}
 .references-list div{break-inside:avoid}
 .references h3{font-size:8.6pt}
 .section-intro{display:none}
 .references h2{font:400 6.6pt/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 2.5mm}
}