:root{
  --bg:#f7f4ec; --card:#fffdf8; --ink:#243028; --muted:#667061;
  --line:#e4ddd0; --moss:#3f7a52; --moss2:#2f5d3e; --sand:#efe6d4; --sun:#f4ead3;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:fade .22s ease both}
  ::view-transition-new(root){animation:rise .34s ease both}
}
@keyframes fade{to{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Palatino,"Palatino Linotype",Georgia,serif;line-height:1.65}
a{color:var(--moss2);text-decoration:none}
a:hover{color:var(--moss)}
.wrap{width:min(1140px,92vw);margin:0 auto}
header{position:sticky;top:0;z-index:30;background:rgba(247,244,236,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 0}
.logo{letter-spacing:.14em;text-transform:uppercase;font-size:.84rem;font-weight:700;color:var(--ink)}
nav{display:flex;gap:1.25rem}
nav a{color:var(--muted);font-size:.95rem}
nav a[aria-current="page"]{color:var(--ink);border-bottom:1px solid var(--moss)}
.burger{display:none;background:none;border:0;font:inherit;cursor:pointer}
.hero{display:grid;grid-template-columns:1fr 1.05fr;gap:2.4rem;align-items:center;padding:4.5rem 0 3rem}
.hero img{width:100%;height:min(62vh,520px);object-fit:cover;border-radius:2px;display:block;background:var(--sand)}
.kicker{letter-spacing:.16em;text-transform:uppercase;font-size:.72rem;color:var(--moss);margin:0 0 .8rem}
h1{font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.12;font-weight:500;margin:0 0 .9rem}
.lead{font-size:1.12rem;color:var(--muted);max-width:36rem}
.cta{display:inline-block;margin-top:1.1rem;background:var(--moss);color:#fff;padding:.55rem 1rem;border-radius:2px}
.cta:hover{background:var(--moss2);color:#fff}
.grid3,.grid2{display:grid;gap:1.2rem}
.grid3{grid-template-columns:repeat(3,1fr);padding:0 0 4rem}
.grid2{grid-template-columns:1fr 1fr}
.card,.proj,.note{background:var(--card);border:1px solid var(--line);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.card{padding:1.3rem}
.card:hover,.proj:hover,.note:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(36,48,40,.07)}
.meta{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.proj img,.note img,.wide img{width:100%;height:220px;object-fit:cover;display:block;background:var(--sand)}
.wide img{height:min(48vh,420px)}
.pad{padding:1rem 1.1rem 1.2rem}
.section{padding:1.2rem 0 4rem}
.prose{max-width:44rem}
.prose p,.prose li{margin:0 0 1rem;color:#334038}
.prose h1,.prose h2,.prose h3{font-weight:500}
.row{display:grid;grid-template-columns:8rem 1fr;gap:1rem;padding:1.05rem 0;border-top:1px solid var(--line)}
.band{background:var(--sun);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:2.5rem 0;margin:0 0 3rem}
footer{border-top:1px solid var(--line);padding:2rem 0 3rem;color:var(--muted);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
footer a{margin-right:.7rem}
@media (max-width:860px){
  .hero,.grid3,.grid2,.row{grid-template-columns:1fr}
  nav{display:none}
  nav.open{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;background:var(--bg);padding:1rem 4vw 1.3rem;border-bottom:1px solid var(--line)}
  .burger{display:block}
  .hero img{height:42vh}
}