:root{
  --bg:#fbfaf8;
  --surface:#ffffff;
  --ink:#1c1b19;
  --muted:#5f5c56;
  --line:#e2ddd4;
  --accent:#8a5a2b;
  --accent-soft:#f3ece2;
  --radius:14px;
  --max:1080px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 17px/1.65 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-feature-settings:"kern" 1;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:22px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:22px;top:12px;background:var(--surface);padding:10px 14px;border-radius:8px;z-index:10}

/* ---------- masthead ---------- */

.masthead{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  padding-block:clamp(34px,6vw,58px);
}

.masthead .wrap{
  display:flex;
  gap:clamp(20px,4vw,38px);
  align-items:center;
  flex-wrap:wrap;
}

.avatar{
  width:132px;height:132px;
  object-fit:cover;
  border-radius:50%;
  border:3px solid var(--accent-soft);
  box-shadow:0 2px 18px rgba(28,27,25,.09);
  flex:0 0 auto;
}

.intro{flex:1 1 320px;min-width:0}

h1{
  font-size:clamp(1.9rem,4.4vw,2.7rem);
  line-height:1.12;
  letter-spacing:-.022em;
  margin:0 0 .28rem;
  font-weight:700;
}

.tagline{
  margin:0 0 .9rem;
  color:var(--muted);
  font-size:1.06rem;
  max-width:44ch;
}

.links{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:.4rem 1.4rem;
  margin:0;
  padding:0;
  font-size:.94rem;
  font-weight:500;
}

.links a{border-bottom:1px solid transparent}
.links a:hover{border-bottom-color:currentColor;text-decoration:none}

/* ---------- layout ---------- */

.layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:clamp(30px,5vw,58px);
  padding-block:clamp(40px,6vw,66px);
  align-items:start;
}

@media (max-width:860px){
  .layout{grid-template-columns:1fr}
}

.primary>*+*{margin-top:clamp(38px,5vw,54px)}

h2{
  font-size:clamp(1.28rem,2.4vw,1.6rem);
  line-height:1.25;
  letter-spacing:-.012em;
  margin:0 0 1rem;
  font-weight:650;
  padding-bottom:.55rem;
  border-bottom:2px solid var(--accent-soft);
}

h3{
  font-size:1.08rem;
  line-height:1.35;
  margin:0 0 .55rem;
  font-weight:650;
  letter-spacing:-.005em;
}

p{margin:0 0 1rem}
p:last-child{margin-bottom:0}

.lead{font-size:1.1rem}

/* ---------- project cards ---------- */

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  margin-bottom:22px;
  transition:box-shadow .18s ease,border-color .18s ease;
}

.card:hover{
  border-color:#d4ccbf;
  box-shadow:0 6px 22px rgba(28,27,25,.07);
}

.card img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  background:var(--accent-soft);
}

.card-body{padding:clamp(18px,3vw,26px)}

.ribbon{
  display:inline-block;
  margin:0 0 .6rem;
  padding:.16rem .6rem;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--accent);
  background:var(--accent-soft);
  border-radius:5px;
}

/* ---------- entries ---------- */

.entry{
  padding-block:20px;
  border-bottom:1px solid var(--line);
}
.entry:last-child{border-bottom:0;padding-bottom:0}
.entry p{margin-bottom:.7rem}

.org{color:var(--muted);font-weight:500}
.org::before{content:" · "}

.years{
  display:inline-block;
  color:var(--muted);
  font-weight:400;
  font-size:.86rem;
  white-space:nowrap;
}
h3 .years::before{content:" "}

/* ---------- tags ---------- */

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

.tags li{
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--muted);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:999px;
  padding:.16rem .58rem;
}

/* ---------- callout ---------- */

.callout{
  background:var(--accent-soft);
  border:1px solid #e6dbca;
  border-radius:var(--radius);
  padding:clamp(22px,3.6vw,32px);
}
.callout h2{border-bottom-color:#dccdb6}
.callout p{margin-bottom:0}

/* ---------- sidebar ---------- */

.secondary>*+*{margin-top:26px}

.secondary section{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px 22px;
}

.secondary h2{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.11em;
  color:var(--muted);
  border-bottom:0;
  padding-bottom:0;
  margin-bottom:.85rem;
  font-weight:700;
}

.plain{list-style:none;margin:0;padding:0;font-size:.93rem}
.plain li{padding-block:.42rem;border-bottom:1px solid var(--line);line-height:1.5}
.plain li:last-child{border-bottom:0;padding-bottom:0}
.plain li:first-child{padding-top:0}
.plain .k{
  display:block;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:var(--muted);
  font-weight:700;
}
.tight li{display:flex;gap:.5rem;align-items:baseline}
.tight li::before{content:"—";color:var(--accent);flex:0 0 auto}

.small{font-size:.9rem;color:var(--muted)}

/* ---------- skills ---------- */

.skills{list-style:none;margin:0;padding:0;font-size:.92rem}
.skills li+li{margin-top:.72rem}
.skills .name{display:block;margin-bottom:.3rem;font-weight:500}
.skills .lvl{
  display:block;
  position:relative;
  height:7px;
  border-radius:99px;
  background:var(--accent-soft);
  font-size:0;
  overflow:hidden;
}
.skills .lvl::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:var(--p,50%);
  background:linear-gradient(90deg,var(--accent),#b07a44);
  border-radius:99px;
}

/* ---------- footer ---------- */

.site-footer{
  border-top:1px solid var(--line);
  padding-block:26px;
  color:var(--muted);
  font-size:.86rem;
}
.site-footer p{margin:0}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--accent)}

/* ---------- print ---------- */

@media print{
  .masthead,.site-footer{background:none}
  .card,.secondary section{break-inside:avoid;box-shadow:none}
  .layout{grid-template-columns:1fr}
  a{color:var(--ink);text-decoration:none}
  .skip{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}