:root{
  color-scheme:light;
  --bg:#f4f6f9; --surface:#fff; --ink:#16212e; --muted:#5b6878; --line:#d9dfe7;
  --accent:#123a6f; --accent-soft:#e6edf7;
  --serif:"Source Serif 4",Georgia,serif; --sans:"Public Sans",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{font-size:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:1rem/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

.page{max-width:46rem;margin:0 auto;padding:clamp(2rem,8vw,5rem) 1.25rem 4rem}
.intro h1{font:600 clamp(2.2rem,7vw,3.4rem)/1.08 var(--serif);letter-spacing:-.01em;margin:0 0 .6rem;color:var(--accent)}
.role{font-size:1.1rem;font-weight:500;margin:0 0 1.25rem}
.lead{font:1.2rem/1.65 var(--serif);max-width:38rem;margin:0 0 1.5rem}
.contact{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;color:var(--muted);font-size:.95rem;margin:0 0 3.5rem}
.ico{display:inline-flex;align-items:center;gap:.6rem}
.ico img{display:block;height:1.1rem;width:auto;flex:none}

.hint{font:500 .95rem var(--sans);color:var(--muted);margin:0 0 .75rem}
.index{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.index li{border-bottom:1px solid var(--line)}
.index button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:1fr auto;gap:.15rem 1rem;align-items:center;width:100%;padding:1.35rem .25rem;cursor:pointer;transition:background .15s,padding .15s}
.index button::after{content:"+";grid-row:1/3;grid-column:2;font:400 1.8rem/1 var(--sans);color:var(--accent);transition:transform .2s}
.index button:hover,.index button:focus-visible{background:var(--accent-soft);padding-left:1rem}
.index button:hover::after{transform:rotate(90deg)}
.name{font:600 1.45rem/1.25 var(--serif)}
.peek{color:var(--muted);font-size:.95rem}

dialog{border:0;padding:0;background:var(--surface);color:var(--ink);width:min(34rem,100%);max-width:100%;height:100%;max-height:100%;margin:0 0 0 auto;box-shadow:-8px 0 40px rgba(0,0,0,.22)}
dialog::backdrop{background:rgba(10,18,30,.5)}
dialog[open]{animation:slide .25s ease-out}
dialog[open]::backdrop{animation:fade .25s ease-out}
@keyframes slide{from{transform:translateX(2rem);opacity:0}}
@keyframes fade{from{opacity:0}}
.panel-head{position:sticky;top:0;display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1.5rem 1.5rem 1rem;background:var(--surface);border-bottom:1px solid var(--line)}
.panel-head h2{font:600 1.6rem/1.2 var(--serif);margin:0;color:var(--accent)}
.close{font:500 .9rem var(--sans);color:var(--ink);background:none;border:1px solid var(--line);border-radius:.4rem;padding:.4rem .8rem;cursor:pointer}
.close:hover{background:var(--accent-soft)}
.panel-body{padding:0 1.5rem 3rem}
.entry{padding:1.5rem 0;border-bottom:1px solid var(--line)}
.entry:last-child{border-bottom:0}
.entry h3{font:600 1.15rem/1.3 var(--serif);margin:0}
.meta{margin:.2rem 0 .75rem;color:var(--muted);font-size:.9rem}
.entry ul{margin:.5rem 0 0;padding-left:1.2rem}
.entry li{margin-bottom:.45rem}
.entry li::marker{color:var(--accent)}
.entry .tags{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}
.tags li{margin:0;padding:.25rem .7rem;background:var(--accent-soft);border-radius:2rem;font-size:.9rem}
.langs{margin:.75rem 0 0}
.langs div{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;border-bottom:1px dotted var(--line)}
.langs dt{font-weight:600}.langs dd{margin:0;color:var(--muted);text-align:right}

@media (max-width:30rem){.index button{padding-inline:0}.name{font-size:1.25rem}}
@media (prefers-reduced-motion:reduce){*,::backdrop{animation:none!important;transition:none!important}}
@media print{.hint,.index button::after{display:none}}