:root{
  --bg:#0f1b33; --ink:#e9eef7; --muted:#a5b2c9; --line:#263a63; --soft:#172645;
  --accent:#4fc3c9; --accent-hover:#7ad3d8; --on-accent:#0a1426; --mark:#5a4d12;
  color-scheme:dark;
  --f-head:"Barlow Semi Condensed","Arial Narrow",Arial,sans-serif;
  --f-body:"Nunito Sans","Segoe UI",Arial,sans-serif;
  --fs-1:13px; --fs-2:14.5px; --fs-3:15.5px; --fs-4:16.5px; --fs-5:19px; --fs-6:21px; --fs-7:30px; --fs-8:52px;
  --lh-body:1.65; --lh-head:1.15; --track-head:-.02em;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:72px;
  --measure:860px; --side:360px; --layout:1200px;
  --bw:1px; --bw-strong:2px; --r-sm:3px; --r:6px; --r-lg:10px;
  --hit:44px;
  --dur-1:150ms; --dur-2:250ms; --dur-3:500ms; --stagger:60ms;
  --ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.2,.8,.2,1); --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --rise:16px; --reveal:105%; --lift:-2px; --press:.97; --magnet:.15; --magnet-max:6px;
  --shadow-1:0 1px 2px rgb(0 0 0 / .3); --shadow-2:0 2px 6px rgb(0 0 0 / .3),0 12px 28px -10px rgb(0 0 0 / .6);
  --edge:rgb(255 255 255 / .06); --glow:rgb(79 195 201 / .16); --grain:.045;
  --icon:18px; --stroke:1.75;
}
@media (max-width:600px){ :root{ --fs-3:15px; --fs-4:16px; --fs-5:17.5px; --fs-6:19px; --fs-7:24px; --fs-8:36px; --s-7:32px; --s-8:40px } }

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--hit)}
@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:var(--dur-2);animation-timing-function:var(--ease)}
::view-transition-group(site-name){animation-duration:var(--dur-3);animation-timing-function:var(--ease-out)}
.side h1,body:not(:has(.side)) .site-nav .name{view-transition-name:site-name}
@media (prefers-reduced-motion:reduce){:root{--rise:0px;--reveal:0%;--lift:0px;--press:1;--magnet:0;--magnet-max:0px} html{scroll-behavior:auto} @view-transition{navigation:none}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:var(--fs-4);line-height:var(--lh-body)}
.wrap{max-width:var(--measure);margin:0 auto;padding-left:max(var(--s-4),env(safe-area-inset-left,0px));padding-right:max(var(--s-4),env(safe-area-inset-right,0px))}
a{color:var(--accent);text-underline-offset:2px}
:focus-visible{outline:var(--bw-strong) solid var(--accent);outline-offset:2px}
h1,h2,h3{font-family:var(--f-head);line-height:var(--lh-head);margin:0;text-wrap:balance}
h1{font-size:var(--fs-8);font-weight:700;letter-spacing:var(--track-head)}
h2{font-size:var(--fs-7);font-weight:700;letter-spacing:var(--track-head);margin-bottom:var(--s-4)}
h3{font-size:var(--fs-5);font-weight:600}
p{margin:0 0 var(--s-3)}
ul{margin:var(--s-1) 0 var(--s-3);padding-left:var(--s-5)}
li{margin-bottom:var(--s-1)}
.skip,.toast{background:var(--accent);color:var(--on-accent);font-weight:600;padding:var(--s-2) var(--s-4);border-radius:var(--r)}
.skip{position:absolute;left:var(--s-4);top:var(--s-2);z-index:30;transform:translateY(-200%)}
.skip:focus{transform:none}
main:focus{outline:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.label{font-family:var(--f-body);font-size:var(--fs-1);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:var(--s-6) 0 0}
.label:first-of-type{margin-top:0}

.fill{color:var(--ink);background:var(--mark);padding:0 var(--s-1);border-radius:var(--r-sm)}

.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:var(--hit);min-width:var(--hit);padding:0 var(--s-4);
  font:inherit;font-size:var(--fs-3);font-weight:600;line-height:1.2;color:var(--ink);background:transparent;text-decoration:none;
  border:var(--bw) solid var(--muted);border-radius:var(--r);cursor:pointer;
  transition:background-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),transform var(--dur-2) var(--ease-spring),translate var(--dur-2) var(--ease-out)}
.btn:active{transform:scale(var(--press));transition-duration:var(--dur-1),var(--dur-1),var(--dur-1),var(--dur-1),var(--dur-2);transition-timing-function:var(--ease)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;background:radial-gradient(circle at var(--px,50%) var(--py,50%),rgb(255 255 255 / .45),transparent 70%);transition:opacity var(--dur-1) var(--ease)}
.magnetic{translate:var(--mx,0px) var(--my,0px)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--soft);transform:translateY(var(--lift));box-shadow:var(--shadow-1)}
  .btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
  .btn.primary:hover::before{opacity:1}
  .btn:active{transform:scale(var(--press))}
}
.icon{width:var(--icon);height:var(--icon);flex:none;fill:none;stroke:currentColor;stroke-width:var(--stroke);stroke-linecap:round;stroke-linejoin:round}
.swap{position:relative;display:inline-grid;width:var(--icon);height:var(--icon)}
.swap .icon{grid-area:1/1;transition:transform var(--dur-2) var(--ease-spring),opacity var(--dur-1) var(--ease)}
.swap .icon+.icon{transform:scale(.4) rotate(-45deg);opacity:0}
.done .swap .icon:first-child{transform:scale(.4) rotate(45deg);opacity:0}
.done .swap .icon+.icon{transform:none;opacity:1;color:var(--accent)}
.u{position:relative;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)}
.u::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:var(--bw-strong);background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform var(--dur-2) var(--ease-out)}
@media (hover:hover){.u:hover::after{transform:none;transform-origin:left}}
.u:focus-visible::after{transform:none}
.actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-5)}

.page-head .wrap{padding-block:var(--s-8) var(--s-7)}
.lead{font-size:var(--fs-6);color:var(--muted);line-height:1.5;max-width:46ch;margin:var(--s-3) 0 0}
.meta{color:var(--muted);font-size:var(--fs-2);margin:var(--s-3) 0 0}

.panel{position:relative;isolation:isolate;border:var(--bw) solid var(--line);border-radius:var(--r-lg);padding:var(--s-4) var(--s-5);box-shadow:inset 0 1px 0 var(--edge);
  transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)}
.panel::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;background:radial-gradient(420px circle at var(--px,50%) var(--py,0%),var(--glow),transparent 60%);transition:opacity var(--dur-2) var(--ease)}
@media (hover:hover) and (pointer:fine){
  .panel:hover{transform:translateY(var(--lift));border-color:color-mix(in srgb,var(--accent) 35%,var(--line));box-shadow:inset 0 1px 0 var(--edge),var(--shadow-2)}
  .panel:hover::before{opacity:1}
}
.panel+.panel{margin-top:var(--s-3)}

.toast{position:fixed;left:50%;bottom:var(--s-5);z-index:20;display:flex;align-items:center;gap:var(--s-2);box-shadow:var(--shadow-2);transform:translate(-50%,calc(var(--rise) * 2));opacity:0;pointer-events:none;
  transition:transform var(--dur-1) var(--ease),opacity var(--dur-1) var(--ease)}
.toast.on{transform:translate(-50%,0);opacity:1;transition-duration:var(--dur-2)}

body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
.site-nav{position:sticky;top:env(safe-area-inset-top,0px);background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(var(--s-2));border-bottom:var(--bw) solid var(--line);z-index:5}
.site-nav .wrap{display:flex;gap:var(--s-1);align-items:center;overflow-x:auto}
.site-nav a{position:relative;display:flex;align-items:center;min-height:var(--hit);padding:0 var(--s-2);text-decoration:none;white-space:nowrap}
.site-nav .name{font-family:var(--f-head);font-weight:700;font-size:var(--fs-5);color:var(--ink);margin-right:auto;padding-left:0}
.site-nav a.l{color:var(--muted);font-size:var(--fs-3);transition:color var(--dur-1) var(--ease)}
.site-nav a.l[aria-current]{color:var(--ink)}
.site-nav .name{transition:color var(--dur-1) var(--ease)}
@media (hover:hover){.site-nav a.l:hover{color:var(--ink)} .site-nav .name:hover{color:var(--accent)}}
.site-nav a.l::after{content:"";position:absolute;left:var(--s-2);right:var(--s-2);bottom:0;height:var(--bw-strong);background:var(--accent);transform:scaleX(0);transition:transform var(--dur-1) var(--ease)}
.site-nav a.l[aria-current]::after{transform:none}


section{border-top:var(--bw) solid var(--line);padding-block:var(--s-6) var(--s-7)}

.entry{display:grid;grid-template-columns:150px 1fr;gap:var(--s-1) var(--s-5);padding-block:var(--s-3);border-bottom:var(--bw) dashed var(--line)}
.entry:last-child{border-bottom:0}
.entry .date{color:var(--muted);font-size:var(--fs-3);font-variant-numeric:tabular-nums}
.entry .what{min-width:0}
.entry .place{color:var(--muted)}

.skills{display:grid;grid-template-columns:170px 1fr;gap:var(--s-2) var(--s-5);margin:0}
.skills dt{font-weight:700}
.skills dd{margin:0}


.tbl{position:relative;overflow-x:auto;margin-top:var(--s-2)}
table{border-collapse:collapse;width:100%;min-width:700px;font-size:var(--fs-2)}
th,td{border:var(--bw) solid var(--line);padding:var(--s-2) var(--s-3);text-align:left;vertical-align:top}
th{background:var(--soft);font-weight:700;line-height:1.3}
td.c{text-align:center}

.contact dl{display:grid;grid-template-columns:max-content 1fr;gap:var(--s-2) var(--s-5);align-items:center;margin:0}
.contact dt{color:var(--muted)}
.contact dd{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3)}
.mail{user-select:all;font-weight:600}

footer{border-top:var(--bw) solid var(--line);padding-block:var(--s-5);color:var(--muted);font-size:var(--fs-2)}

@media (max-width:600px){
  .entry,.skills,.contact dl{grid-template-columns:1fr}
  .entry{gap:0}
  .skills dd,.contact dd{margin-bottom:var(--s-2)}
}

.toc ul{list-style:none;padding:0;margin:var(--s-2) 0 var(--s-6)}
.toc li{margin:0}
.toc a{display:inline-flex;align-items:center;min-height:var(--hit)}
.doc{border-top:var(--bw) solid var(--line)}
.doc .wrap{padding-block:var(--s-2) var(--s-7)}
.doc h2{margin:var(--s-7) 0 var(--s-3)}
.doc h3{margin:var(--s-5) 0 var(--s-2)}
.doc p,.doc li{max-width:68ch}

@media (min-width:1024px){
  .layout{display:grid;grid-template-columns:var(--side) minmax(0,1fr);column-gap:var(--s-8);max-width:var(--layout);margin:0 auto;padding-inline:var(--s-6)}
  .layout .wrap{max-width:none;padding-inline:0}
  .side{position:sticky;top:0;align-self:start;max-height:100vh;overflow-y:auto;display:flex;flex-direction:column;gap:var(--s-6);padding-block:var(--s-8) var(--s-6)}
  .side .page-head .wrap{padding:0}
  .side .lead{font-size:var(--fs-5)}
  .layout main,.layout footer{grid-column:2}
  .layout main{padding-top:var(--s-8)}
  .layout section:first-child{border-top:0;padding-top:0}
  .side .site-nav{position:static;border:0;background:none}
  .side .site-nav .wrap{flex-direction:column;align-items:flex-start;overflow:visible;gap:0}
  .side .site-nav .name{display:none}
  .side .site-nav a.l{gap:var(--s-3);padding-left:0;font-size:var(--fs-1);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
  .side .site-nav a.l::before{content:"";width:var(--s-8);height:var(--bw);background:currentColor;transform-origin:left;transform:scaleX(.45);transition:transform var(--dur-1) var(--ease)}
  .side .site-nav a.l span{display:inline-block;transform:translateX(calc(var(--s-8) * -.55));transition:transform var(--dur-1) var(--ease)}
  .side .site-nav a.l[aria-current]::before,.side .site-nav a.l[aria-current] span{transform:none}
  @media (hover:hover){.side .site-nav a.l:hover::before,.side .site-nav a.l:hover span{transform:none}}
  .side .site-nav a.l::after{display:none}
  .side .site-nav a.l[aria-current]::before{background:var(--accent);box-shadow:0 0 var(--s-3) var(--glow)}
}

html::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:url(grain.svg);opacity:var(--grain)}

@keyframes rise{from{opacity:0;transform:translateY(var(--rise))}}
@keyframes word{from{opacity:0;transform:translateY(var(--reveal))}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.page-head h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
.page-head h1 .w>span{display:inline-block;animation:word var(--dur-3) var(--ease-out) backwards}
.page-head h1 .w+.w>span{animation-delay:var(--stagger)}
.page-head h1:not(:has(.w)),.page-head .lead,.page-head .meta,.page-head .actions,.side .site-nav,.toc{animation:rise var(--dur-3) var(--ease-out) backwards}
.page-head .lead{animation-delay:calc(var(--stagger) * 2)}
.page-head .meta{animation-delay:calc(var(--stagger) * 3)}
.page-head .actions,.toc{animation-delay:calc(var(--stagger) * 4)}
.side .site-nav{animation-delay:calc(var(--stagger) * 5)}

.js section:not(.in) .wrap>*{opacity:0}
.js section.in .wrap>*{animation:rise var(--dur-3) var(--ease-out) backwards}
.js section.in .wrap>:nth-child(2){animation-delay:var(--stagger)}
.js section.in .wrap>:nth-child(3){animation-delay:calc(var(--stagger) * 2)}
.js section.in .wrap>:nth-child(4){animation-delay:calc(var(--stagger) * 3)}
.js section.in .wrap>:nth-child(n+5){animation-delay:calc(var(--stagger) * 4)}

.progress{display:none}
@supports (animation-timeline:scroll()){
  .progress{display:block;position:fixed;inset:0 0 auto;z-index:40;height:var(--bw-strong);background:var(--accent);transform-origin:left;animation:grow linear both;animation-timeline:scroll(root)}
}