/* Douwe Korff — scholarly standalone site (no family branding) */
:root{
  --paper:#f4f1e8; --ink:#26221c; --muted:#6b6357; --line:#e2dccd; --soft:#efece1;
  --accent:#6f2b2f;              /* oxblood */
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",system-ui,sans-serif;
}
:root[data-theme="dark"]{
  --paper:#181510; --ink:#ebe4d6; --muted:#a69d8b; --line:#302a20; --soft:#201c16;
  --accent:#d09079;             /* warm clay for dark */
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#181510; --ink:#ebe4d6; --muted:#a69d8b; --line:#302a20; --soft:#201c16; --accent:#d09079;
  }
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:18px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
  transition:background .5s ease, color .5s ease;
}
.wrap{max-width:720px; margin:0 auto; padding:0 24px}
a{color:var(--accent); text-underline-offset:2px; text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--ink)}
a:focus-visible,.toggle:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}

/* header */
header{padding:72px 0 12px; text-align:center}
.eyebrow{font-family:var(--sans); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin:0 0 14px; line-height:1.5}
h1.name{font-family:var(--serif); font-weight:500; font-size:clamp(40px,8vw,64px);
  letter-spacing:.005em; line-height:1.02; margin:0}
.portrait{
  margin:34px auto 0; width:clamp(180px,42vw,236px); display:block;
  border:1px solid var(--line); border-radius:6px; padding:8px; background:var(--soft);
}
.portrait img{display:block; width:100%; height:auto; border-radius:3px; filter:saturate(.96)}
.cta{display:inline-flex; align-items:center; gap:9px; margin:30px 0 0;
  font-family:var(--sans); font-size:15px; text-decoration:none; color:#fff; background:var(--accent);
  padding:12px 22px; border-radius:999px; transition:opacity .2s ease, transform .2s ease}
:root[data-theme="dark"] .cta{color:#1a1510}
.cta:hover{opacity:.92; transform:translateY(-1px)}

/* sections */
main{padding:8px 0 40px}
.section{padding:34px 0 0; border-top:1px solid var(--line); margin-top:44px}
.section:first-of-type{border-top:0; margin-top:26px}
h2{font-family:var(--sans); font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin:0 0 20px}
.bio p{margin:0 0 18px; max-width:64ch}
.bio p:last-child{margin-bottom:0}

/* associations / links list */
.assoc{list-style:none; margin:0; padding:0}
.assoc li{margin:0 0 22px; padding:0}
.assoc .role{display:block; font-size:17px; line-height:1.5}
.assoc .role b{font-weight:600}
.assoc .chips{margin-top:7px; display:flex; flex-wrap:wrap; gap:8px}
.chip{font-family:var(--sans); font-size:12.5px; letter-spacing:.01em; text-decoration:none;
  color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:5px 13px;
  display:inline-flex; align-items:center; gap:6px; transition:border-color .2s, color .2s}
.chip:hover{border-color:var(--accent); color:var(--accent)}
.chip .ext{font-size:11px; opacity:.8}

.linklist{list-style:none; margin:0; padding:0}
.linklist li{margin:0 0 13px; font-size:16.5px}
.linklist .lbl{font-family:var(--sans); font-size:12.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); margin-right:6px}
.muted{color:var(--muted)}
.contact a{font-weight:500}

/* publications */
.lede{color:var(--muted); font-size:17px; max-width:60ch; margin:0 0 8px}
.yearnav{display:flex; flex-wrap:wrap; gap:7px 9px; margin:24px 0 8px; padding:18px 0 0; border-top:1px solid var(--line)}
.yearnav a{font-family:var(--sans); font-size:12.5px; color:var(--muted); text-decoration:none;
  border:1px solid var(--line); border-radius:6px; padding:4px 10px; transition:border-color .2s,color .2s}
.yearnav a:hover{border-color:var(--accent); color:var(--accent)}
.yeargroup{margin-top:40px}
.yeargroup h3{font-family:var(--serif); font-weight:600; font-size:26px; color:var(--accent);
  margin:0 0 4px; padding-top:10px; scroll-margin-top:16px}
.yeargroup h3 .count{font-family:var(--sans); font-size:12px; letter-spacing:.05em; color:var(--muted); font-weight:400}
.pub{padding:18px 0; border-top:1px solid var(--line)}
.pub-title{margin:0; font-size:17.5px; line-height:1.55}
.pub-note{margin:8px 0 0; font-size:15px; line-height:1.55; color:var(--muted); max-width:66ch}
.pub-links{margin:11px 0 0; display:flex; flex-wrap:wrap; gap:8px}

footer{border-top:1px solid var(--line); padding:30px 0 44px; text-align:center;
  font-family:var(--sans); font-size:12.5px; letter-spacing:.08em; color:var(--muted)}
footer a{color:var(--muted)}

/* theme toggle */
.toggle{position:fixed; top:16px; right:16px; z-index:5; width:38px; height:38px; border-radius:50%;
  cursor:pointer; background:var(--paper); border:1px solid var(--line); color:var(--muted);
  display:grid; place-items:center; transition:border-color .2s,color .2s}
.toggle:hover{border-color:var(--accent); color:var(--accent)}
.toggle svg{width:17px; height:17px}

@media (prefers-reduced-motion:no-preference){
  header,main>.section,.yeargroup{animation:d-rise .7s ease both}
  @keyframes d-rise{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
}
@media (max-width:560px){
  body{font-size:17px}
  header{padding:56px 0 8px}
}