@font-face{font-family:Barlow;src:url("assets/barlow-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url("assets/barlow-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Oswald;src:url("assets/oswald.woff2") format("woff2");font-weight:200 700;font-display:swap}
:root{
  color-scheme:light;--blue:#00637b;--red:#b62c22;--wordmark-red:var(--red);
  --ink:#14211e;--muted:#42534e;--line:#ccd8d3;--surface:#ffffff;
  --page:linear-gradient(#eaf4ef,#f6f8f7 660px);
  --topbar:#fffffff2;--hero:radial-gradient(ellipse at 88% 48%,#d3eee1,transparent 60%),linear-gradient(112deg,#fafffc,#edf6f1);
  --stripe:#13634812;--strip:#e9f2ee;--soft:#f1f6f3;--portrait-line:#abc8ba;
  --primary:#00637b;--primary-ink:#fff;--primary-hover:#004b5e;
  --heading:Oswald,"Arial Narrow",sans-serif;--body:Barlow,system-ui,sans-serif;
}
:root[data-dark]{
  color-scheme:dark;--blue:#2bc8f0;--red:#e63c2f;--wordmark-red:#ff6256;
  --ink:#f0f0f0;--muted:#aeb7b8;--line:#ffffff24;--surface:#ffffff08;
  --page:radial-gradient(ellipse 65% 660px at 57% 0%,#0d332075,transparent 90%),linear-gradient(#0f0f0f,#080808 660px);
  --topbar:#0d100fee;--hero:radial-gradient(ellipse at 88% 48%,#14362a 0%,transparent 52%),linear-gradient(112deg,#111816,#0a0d0c);
  --stripe:#8fffd508;--strip:#101513;--soft:#ffffff0a;--portrait-line:#92d9c147;
  --primary:#2bc8f0;--primary-ink:#081214;--primary-hover:#85e9ff;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:92px}
body{margin:0;background:var(--page);color:var(--ink);font:400 1rem/1.55 var(--body)}
a{color:inherit;text-decoration:none}
a:hover{color:var(--blue)}
:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
img{display:block;max-width:100%}
h1,h2,h3,p,ul,dl,dd{margin:0}
h1,h2,h3{font-family:var(--heading);text-transform:uppercase;line-height:1.13}
.wrap{width:min(1160px,calc(100% - 64px));margin-inline:auto}
.skip{position:fixed;z-index:4;left:12px;top:8px;background:var(--primary);color:var(--primary-ink);padding:10px;transform:translateY(-150%)}
.skip:focus{transform:none}
.topbar{position:sticky;top:0;z-index:3;background:var(--topbar);border-bottom:1px solid var(--line);backdrop-filter:blur(18px)}
.nav-inner,.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav-inner{min-height:68px}
.wordmark,.nav-contact,.nav-actions,.topbar nav{display:flex;align-items:center}
.wordmark{font:700 1.15rem var(--heading);letter-spacing:.06em;white-space:nowrap}
.wordmark img{margin-right:10px}
.wordmark span{color:var(--wordmark-red);margin-left:3px}
.topbar nav{gap:28px}
.topbar nav a,.nav-contact{color:var(--muted);font-weight:600;font-size:.88rem}
.topbar nav a:hover,.nav-contact:hover{color:var(--blue)}
.nav-contact{gap:8px}
.nav-actions{gap:14px}
.theme-toggle{min-height:34px;padding:4px 9px;border:1px solid var(--line);border-radius:6px;background:var(--soft);color:var(--ink);font:600 .82rem var(--body);white-space:nowrap;cursor:pointer}
.theme-toggle:hover,.theme-toggle[aria-pressed="true"]{border-color:var(--blue);color:var(--blue)}
.hero{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,32%);
  align-items:center;gap:32px;margin-top:30px;padding:clamp(24px,5vw,60px);
  border:1px solid var(--line);border-radius:12px 12px 0 0;overflow:hidden;
  background:var(--hero);
}
.hero::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(132deg,transparent 0 15px,var(--stripe) 15px 16px);mask-image:linear-gradient(90deg,transparent 20%,#000);pointer-events:none}
.hero>*{position:relative}
.eyebrow,.section-count,.focus-strip,.format,.date{font-size:.75rem;letter-spacing:.105em;font-weight:600;text-transform:uppercase}
.eyebrow{display:flex;align-items:center;gap:9px;color:var(--blue)}
.eyebrow span{display:block;width:14px;height:2px;background:var(--blue)}
.hero h1{font-size:clamp(3.75rem,8.25vw,7.5rem);font-weight:700;line-height:.98;margin:.16em 0 .2em;letter-spacing:-.035em}
.hero h1 em{color:var(--red);font-style:normal}
.headline{font-size:clamp(1.25rem,2.4vw,1.8rem);font-weight:600;line-height:1.2}
.intro{color:var(--muted);font-size:1.125rem;max-width:51ch;margin-top:12px}
.location{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.9rem;margin-top:15px}
.location svg{color:var(--blue)}
.actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 12px;border:1px solid var(--line);border-radius:6px;background:var(--soft);font-weight:600;font-size:.9rem;min-height:43px}
.button:hover{border-color:var(--blue)}
.button.primary{background:var(--primary);color:var(--primary-ink);border-color:transparent}
.button.primary:hover{background:var(--primary-hover)}
.button.primary svg:last-child{width:13px}
.format{font-size:.6rem;color:var(--muted)}
.portrait-frame{min-width:0;aspect-ratio:1;overflow:hidden;border:1px solid var(--portrait-line);border-radius:9px}
.portrait{height:100%;width:100%;object-fit:cover}
.focus-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));color:var(--muted);background:var(--strip);border:1px solid var(--line);border-top:2px solid var(--red);border-radius:0 0 10px 10px}
.focus-strip span{padding:11px 6px;text-align:center}
.focus-strip span+span{border-left:1px solid var(--line)}
.work-section{margin-top:52px}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:16px;padding-bottom:13px;border-bottom:1px solid var(--line)}
.section-head h2{font-size:clamp(1.75rem,3.5vw,2.65rem);margin-top:5px}
.section-count{color:var(--muted);white-space:nowrap}
.card-grid,.skills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;align-items:start}
.card{display:flex;flex-direction:column;min-width:0;min-height:100%;padding:19px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.card:focus-within,.card:hover{border-color:var(--blue)}
.card-head{display:flex;gap:12px;align-items:center;min-width:0}
.card-icon{width:48px;height:48px;display:grid;place-items:center;flex:none;border-radius:8px;border:1px solid var(--line);background:var(--soft);color:var(--blue);font:600 1rem var(--heading)}
.card-icon img{width:38px;height:38px;object-fit:contain}
#alpine .card-icon{background:#fff}
.card h3{font-size:1.27rem;overflow-wrap:anywhere}
:is(#inside-spin,#airremote,#digitalpool,#tradesmark) h3{text-transform:none}
.external{display:inline-flex;vertical-align:baseline;color:var(--blue)}
.external svg{width:13px;height:13px}
.role{font-size:.94rem;color:var(--muted);line-height:1.3;margin-top:4px}
.date{color:var(--blue);font-size:.69rem;margin-top:14px}
.card-description{margin-top:12px}
details{margin-top:10px;font-size:.95rem}
summary{width:fit-content;cursor:pointer;color:var(--blue);font-weight:600}
summary:hover{text-decoration:underline}
details ul{color:var(--muted);padding-left:20px;margin-top:8px}
details li a{color:var(--blue);text-decoration:underline}
details li+li{margin-top:7px}
.card-technologies{margin-top:14px}
.card-technologies h4{margin:0 0 6px;font-size:.85rem;font-weight:600;color:var(--ink)}
.tags{display:flex;flex-wrap:wrap;gap:5px;padding:0;list-style:none}
.tags li{padding:2px 7px;border-radius:4px;background:var(--soft);border:1px solid var(--line);color:var(--muted);font-size:.75rem;line-height:1.4}
.skills>div,.education{padding:17px 19px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.skills dt{font-weight:600;color:var(--blue);margin-bottom:5px}
.skills dd,.education strong{color:var(--ink)}
.education{margin-top:13px;color:var(--muted)}
.education p+p{margin-top:5px}
footer{margin-top:52px;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
.footer-inner{min-height:76px}
.footer-inner>div{display:flex;flex-wrap:wrap;gap:16px}
.footer-inner p span{color:var(--blue)}
@media(max-width:950px){.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){
  html{scroll-padding-top:112px}
  .wrap{width:calc(100% - 32px)}
  .nav-inner{display:grid;grid-template-columns:1fr auto;gap:0;padding-block:9px}
  .topbar nav{grid-row:2;grid-column:1/-1;gap:18px;padding-top:7px}
  .nav-actions{grid-row:1;grid-column:2}
  .hero{grid-template-columns:1fr;gap:18px;margin-top:16px}
  .portrait-frame{grid-row:1;width:min(48%,165px)}
  .hero h1{font-size:clamp(3.05rem,12vw,5.2rem)}
  .intro{font-size:1rem}
  .focus-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .focus-strip span:nth-child(3){border-left:0}
  .focus-strip span:nth-child(n+3){border-top:1px solid var(--line)}
  .work-section{margin-top:36px}
  .card-grid,.skills{grid-template-columns:1fr}
  .footer-inner{align-items:start;flex-direction:column;gap:6px;padding-block:16px}
}
@media print{
  :root,:root[data-dark]{color-scheme:light;--ink:#111;--muted:#444;--line:#ddd;--blue:#005967;--red:#b62c22;--surface:#fff;--soft:#fff}
  body,.hero,.focus-strip{background:white;color:#111}
  .wrap{width:100%}
  .topbar,.portrait-frame,.focus-strip,footer,.actions,.hero::before{display:none}
  .hero{display:block;margin:0;padding:0 0 12px;border:0}
  .hero h1{font-size:42pt}
  .work-section{margin-top:15pt}
  .card-grid,.skills{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card,.skills>div,.education{break-inside:avoid}
}
