:root{
  --bg:#FDFCFA; --ink:#303230; --muted:#737570; --accent:#B5A590; --accent-ink:#8C7B63;
  --rule:#E7E2DA; --link:#6F604B;
  --label:13.5rem; --gap:1.75rem;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#1B1C1A; --ink:#E4E2DD; --muted:#A09F98; --accent:#9E8F79; --accent-ink:#C9B89C;
    --rule:#33342F; --link:#D6C4A6; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#1B1C1A; --ink:#E4E2DD; --muted:#A09F98; --accent:#9E8F79; --accent-ink:#C9B89C;
  --rule:#33342F; --link:#D6C4A6; color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Carlito","Calibri","Segoe UI","Helvetica Neue",Arial,sans-serif;
  font-size:17px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:62rem; margin:0 auto; padding-inline:1.25rem}
a{color:var(--link); text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--link) 35%,transparent)}
a:hover{border-bottom-color:var(--link)}
a:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:2px}

/* navigation */
nav.top{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:5;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:1px solid var(--rule);
}
nav.top .wrap{display:flex; gap:1.4rem; overflow-x:auto; padding-block:.7rem; scrollbar-width:none}
nav.top .wrap::-webkit-scrollbar{display:none}
nav.top a{border:0; color:var(--muted); font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap}
nav.top a:hover{color:var(--ink)}
nav.top .me{color:var(--ink); margin-right:auto; letter-spacing:.04em}

/* header */
header.id{
  display:grid; grid-template-columns:var(--label) 1fr; column-gap:var(--gap);
  align-items:center; padding-block:3.2rem 2.4rem;
}
.photo{justify-self:end; width:9.5rem; height:9.5rem; border-radius:50%; overflow:hidden; background:var(--rule)}
.photo img{width:100%; height:100%; object-fit:cover; display:block}
h1{font-weight:400; font-size:2.6rem; line-height:1.05; margin:0; letter-spacing:-.005em}
.role{color:var(--accent-ink); font-size:1.35rem; margin:.25rem 0 .7rem}
.aff{margin:0; font-size:1rem}
.contact{display:flex; flex-wrap:wrap; gap:.3rem 2.2rem; margin-top:1rem; color:var(--muted); font-size:.92rem}
.contact span{display:block}
.contact .mail{user-select:all}
.updated{color:var(--muted); font-size:.85rem; margin-top:.6rem}

/* sections */
.sec{padding-block:1.4rem .4rem; scroll-margin-top:3.4rem}
.sec-head{display:grid; grid-template-columns:var(--label) 1fr; column-gap:var(--gap); align-items:center; margin-bottom:1rem}
h2{margin:0; justify-self:end; text-align:right; font-weight:400; font-size:.8rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink); text-wrap:balance}
.bar{height:10px; background:var(--accent)}
.sec-body{margin-left:calc(var(--label) + var(--gap))}
h3{font-weight:400; font-style:italic; font-size:1.02rem; color:var(--ink); margin:1.4rem 0 .6rem}
h3:first-child{margin-top:.2rem}
.prose{max-width:40rem; margin:0 0 .8rem}

.rows{list-style:none; margin:0; padding:0; display:grid; gap:.45rem}
.rows li,.rows .row{display:grid; grid-template-columns:var(--label) 1fr; column-gap:var(--gap); margin-left:calc(-1 * (var(--label) + var(--gap)))}
.rows .k{justify-self:end; text-align:right; color:var(--muted); font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}
.rows .v{margin:0; max-width:44rem; overflow-wrap:anywhere}
.rows dt,.rows dd{margin:0}
.au{}
.note{color:var(--muted); font-style:italic}
.lk{font-size:.88em; white-space:nowrap}

footer{border-top:1px solid var(--rule); margin-top:3rem; color:var(--muted); font-size:.85rem}
footer .wrap{padding-block:1.4rem 2rem; display:flex; flex-wrap:wrap; gap:.5rem 2rem; justify-content:space-between}

/* narrow screens: single column, labels above */
@media (max-width:720px){
  :root{--label:0rem; --gap:0rem}
  body{font-size:16px}
  header.id{grid-template-columns:1fr; row-gap:1.2rem; padding-block:2rem 1.4rem}
  .photo{justify-self:start; width:7.5rem; height:7.5rem}
  h1{font-size:2.1rem}
  .sec-head{grid-template-columns:auto 1fr; column-gap:.9rem}
  h2{justify-self:start; text-align:left}
  .sec-body{margin-left:0}
  .rows li,.rows .row{grid-template-columns:5.9rem 1fr; column-gap:.7rem; margin-left:0}
  .rows .k{justify-self:start; text-align:left; white-space:nowrap; font-size:.86rem}
}

nav.top a.on{color:var(--ink); border-bottom:2px solid var(--accent); padding-bottom:.15rem}
.pagehead{display:grid; grid-template-columns:var(--label) 1fr; column-gap:var(--gap); padding-block:2.6rem 1rem}
.pagehead h1{grid-column:2; font-size:2.1rem}
.pagehead .role{grid-column:2; font-size:1.05rem; margin:.3rem 0 0}
@media (max-width:720px){.pagehead{grid-template-columns:1fr; padding-block:1.8rem .6rem}.pagehead h1,.pagehead .role{grid-column:1}}

/* home */
:root{--bgimg:url(bg-light.jpg)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bgimg:url(bg-dark.jpg)}}
:root[data-theme="dark"]{--bgimg:url(bg-dark.jpg)}
.home{min-height:100vh; display:flex; flex-direction:column; background:var(--bg) var(--bgimg) center/cover no-repeat}
.home nav.top{background:color-mix(in srgb,var(--bg) 70%,transparent)}
.home footer{margin-top:0; border-top-color:color-mix(in srgb,var(--rule) 60%,transparent); background:color-mix(in srgb,var(--bg) 70%,transparent)}
.hero{flex:1; position:relative; display:flex; align-items:center}
.hero::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 88%,transparent) 42%,color-mix(in srgb,var(--bg) 30%,transparent) 100%)}
.hero-in{position:relative; width:100%; display:grid; grid-template-columns:var(--label) 1fr; column-gap:var(--gap); align-items:start; padding-block:4rem}
.hero .photo{margin-top:.3rem}
.hero-text{max-width:34rem}
.hero .role{margin:.3rem 0 1rem}
.hero .rule{display:block; width:5.5rem; height:6px; background:var(--accent); margin-bottom:1.1rem}
.lede{margin:1rem 0 0; color:var(--ink)}
@media (max-width:720px){
  .hero-in{grid-template-columns:1fr; row-gap:1.4rem; padding-block:2.4rem}
  .hero::before{background:color-mix(in srgb,var(--bg) 82%,transparent)}
}

/* home photo: square corners, height matches the text block */
.hero-in{align-items:stretch}
.hero .hero-photo{justify-self:end; width:100%; max-width:var(--label); height:auto; min-height:15rem; border-radius:14px; margin-top:0; box-shadow:0 1px 2px rgba(0,0,0,.06),0 8px 24px -12px rgba(48,50,48,.28)}
.hero .hero-photo img{height:100%; object-fit:cover; object-position:50% 25%}
@media (max-width:720px){
  .hero .hero-photo{justify-self:start; width:11rem; max-width:100%; height:13.4rem; min-height:0}
}

.hero-in{column-gap:calc(2 * var(--gap))}

.cvlink{margin:1.1rem 0 0; font-size:.92rem}

/* align photo top with the cap height of the name */
.hero .hero-photo{margin-top:.44rem}
@media (max-width:720px){.hero .hero-photo{margin-top:0}}

/* small name in the menu: right-aligned on the photo / section-label column */
nav.top .me{flex:0 0 var(--label); margin-right:0; text-align:right}
nav.top .me + a{margin-left:auto}
@media (max-width:720px){nav.top .me{flex:0 0 auto; text-align:left; margin-right:auto}}

/* menu items start on the text column */
nav.top .me + a{margin-left:calc(var(--gap) - 1.4rem)}
.home nav.top .me + a{margin-left:calc(2 * var(--gap) - 1.4rem)}
@media (max-width:720px){nav.top .me + a, .home nav.top .me + a{margin-left:0}}