:root{
    --bg:#f2f5f7;
    --ink:#13212c;
    --mute:#53636f;
    --line:#d3dce2;
    --accent:#07850e;
    --hot:#c27803
}

:root[data-theme=dark]{
    --bg:#000000;
    --ink:#e6edf1;
    --mute:#93a4b0;
    --line:#25363f;
    --accent:#31cf53;
    --hot:#f0b34a
}

@media 
(prefers-color-scheme:dark)
{:root:not([data-theme]){
    --bg:#0f1a22;--ink:#e6edf1;
    --mute:#93a4b0;
    --line:#25363f;
    --accent:#58c212;
    --hot:#f0b34a}
}

*{box-sizing:border-box}

body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font:400 1.05rem/1.65 "IBM Plex Sans",system-ui,sans-serif
}

a{
    color:var(--accent)
}

:focus-visible{
    outline:2px solid var(--hot);
    outline-offset:3px
}

h1,h2,h3{
    font-family:"Bricolage Grotesque",system-ui,sans-serif;
    line-height:1.15;
    margin:0
}

.wrap{
    max-width:60rem;
    margin:0 auto;
    padding:0 1.25rem
}

nav{
    display:flex;
    gap:1.25rem;
    flex-wrap:wrap;
    align-items:center;
    padding:1.1rem 0;
    border-bottom:1px solid var(--line)
}

nav .brand{
    font:700 1.15rem "Bricolage Grotesque",sans-serif;
    color:var(--ink);
    text-decoration:none;
    margin-right:auto
}

nav a{
    color:var(--mute);
    text-decoration:none
}

nav a:hover,nav a[aria-current=page]{
    color:var(--accent)
}

nav a[aria-current=page]{
    border-bottom:2px solid var(--accent)
}

#theme{
    font:inherit;
    font-size:.9rem;
    color:var(--ink);
    background:none;
    border:1px solid var(--line);
    border-radius:6px;padding:.25rem .7rem;
    cursor:pointer
}

#theme:hover{
    border-color:var(--accent)
}

main{
    padding:2.5rem 0 3rem
}

h1{
    font-size:clamp(2.4rem,7vw,4rem)
}

h2{
    font-size:1.7rem;margin-bottom:.5rem
}

.lead{
    color:var(--mute);max-width:36rem
}

.hero{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:2.5rem;
    align-items:center
}

.hero img{
    width:100%;
    aspect-ratio:4/5;
    object-fit:cover;
    border-radius:8px;
    border:1px solid var(--line);
    background:var(--line)
}

.role{
    color:var(--accent);
    font-weight:500;
    margin:.6rem 0 1rem
}

.btns{
    display:flex;
    gap:.8rem;
    flex-wrap:wrap;
    margin:1.5rem 0
}

.btn{
    padding:.6rem 1.1rem;
    border:1.5px solid var(--accent);
    border-radius:6px;
    text-decoration:none;
    font-weight:500
}

.btn.main{
    background:var(--accent);
    color:var(--bg)
}

.focus{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
    gap:1.5rem;
    margin-top:3rem;
    padding-top:2rem;
    border-top:1px solid var(--line)
}

.focus p,.row p{
    color:var(--mute);
    margin:.3rem 0
}

details{
    border-top:1px solid var(--line)
}

details:last-of-type{
    border-bottom:1px solid var(--line)
}

summary{
    display:flex;
    justify-content:space-between;
    gap:1rem;padding:1.1rem 0;
    cursor:pointer;
    list-style:none;
    font:700 1.2rem "Bricolage Grotesque",sans-serif
}

summary::-webkit-details-marker{
    display:none
}

summary::after{
    content:"+";
    color:var(--accent);
    font-size:1.5rem;
    line-height:1
}

details[open] summary::after{
    content:"\2212"
}

summary small{
    display:block;
    font:400 .95rem "IBM Plex Sans",sans-serif;
    color:var(--mute)
}

.more{
    padding:0 0 1.4rem;
    max-width:42rem
}

.more h3{
    font-size:1rem;
    margin:1rem 0 .2rem
}

.tags{
    display:flex;
    flex-wrap:wrap;
    gap:.4rem;
    padding:0;
    list-style:none
}

.tags li{
    font-size:.85rem;
    padding:.1rem .6rem;
    border:1px solid var(--line);
    border-radius:99px;
    color:var(--mute)
}

.row{
    display:grid;
    grid-template-columns:10rem 1fr;
    gap:1.5rem;
    padding:1rem 0;
    border-top:1px solid var(--line)
}

.row h3{
    font-size:1.15rem
}

.when{
    color:var(--mute);
    font-size:.95rem
}

.pdf{
    width:100%;
    height:80vh;
    border:1px solid var(--line);
    border-radius:6px;
    margin:1rem 0 2rem;
    background:var(--line)
}

footer{
    padding:1.5rem 0 3rem;
    border-top:1px solid var(--line);
    color:var(--mute);
    font-size:.95rem
}

@media (max-width:700px){
    .hero{grid-template-columns:1fr}
    .hero img{max-height:24rem}
    .row{grid-template-columns:1fr;gap:.2rem}}