:root{
  --bg:#f6f4ef; --surface:#ffffff; --ink:#1e241f; --muted:#5b625c;
  --line:#d9d4c8; --accent:#8a5a2b; --accent-ink:#ffffff; --accent-soft:#efe4d3;
  --link:#2b5c86; --link-hover:#163c5c; --focus:#0a4da0;
  --maxw:1080px; --radius:10px;
  --shadow:0 1px 3px rgba(30,36,31,.08),0 6px 18px rgba(30,36,31,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6; font-size:17px; -webkit-font-smoothing:antialiased;
}
a{color:var(--link); text-underline-offset:2px}
a:hover{color:var(--link-hover)}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:4px}
.skip{position:absolute; left:-999px; top:0; background:var(--surface); padding:.6rem 1rem; z-index:50}
.skip:focus{left:.5rem; top:.5rem}
.container{max-width:var(--maxw); margin:0 auto; padding:0 1.25rem}
header.site{border-bottom:1px solid var(--line); background:var(--surface)}
.brand{display:flex; align-items:center; gap:.6rem; padding:1rem 0}
.brand .mark{font-weight:800; font-size:1.05rem; color:var(--ink); text-decoration:none; line-height:1.2}
.brand .mark small{display:block; font-weight:500; color:var(--muted); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase}
nav.main{display:flex; flex-wrap:wrap; gap:.2rem; padding-bottom:.7rem}
nav.main a{color:var(--ink); text-decoration:none; padding:.45rem .7rem; border-radius:8px; font-weight:600; font-size:.95rem}
nav.main a:hover{background:var(--accent-soft)}
nav.main a[aria-current]{background:var(--accent); color:var(--accent-ink)}
main{padding:2.2rem 0 3rem}
.hero{position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); margin-bottom:2rem; background:#cfc6b4}
.hero img{display:block; width:100%; height:auto; max-height:520px; object-fit:cover}
.hero .overlay{position:absolute; inset:0; display:flex; align-items:flex-end; padding:1.5rem;
  background:linear-gradient(0deg, rgba(20,16,12,.72), rgba(20,16,12,0) 62%)}
.hero .overlay h1{color:#fff; margin:0; font-size:clamp(1.6rem,4vw,2.6rem); line-height:1.15; max-width:26ch; text-shadow:0 1px 6px rgba(0,0,0,.35)}
h1{font-size:clamp(1.7rem,4vw,2.3rem); line-height:1.2; margin:0 0 .6rem}
h2{font-size:clamp(1.25rem,3vw,1.6rem); margin:2rem 0 .6rem; line-height:1.25}
h3{font-size:1.1rem; margin:1.4rem 0 .4rem}
p{margin:.6rem 0}
.lede{font-size:1.12rem; color:var(--muted)}
.grid{display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); margin:1.4rem 0}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem 1.3rem; box-shadow:var(--shadow)}
.card h3{margin-top:0}
.card img{width:100%; height:auto; border-radius:6px; margin-bottom:.7rem}
.note{background:var(--accent-soft); border-left:4px solid var(--accent); padding:.8rem 1rem; border-radius:0 8px 8px 0; margin:1rem 0}
.warn{background:#fdeee7; border-left:4px solid #b3401a; padding:.8rem 1rem; border-radius:0 8px 8px 0; margin:1rem 0}
table{width:100%; border-collapse:collapse; margin:1rem 0; background:var(--surface); font-size:.95rem}
th,td{border:1px solid var(--line); padding:.6rem .7rem; text-align:left; vertical-align:top}
th{background:var(--accent-soft); font-weight:700}
.checklist li{margin:.5rem 0}
input[type=checkbox]{width:1.15rem; height:1.15rem; accent-color:var(--accent); vertical-align:-2px}
.cmp input,.cmp textarea{width:100%; padding:.5rem .6rem; border:1px solid var(--line); border-radius:8px; font:inherit; background:#fff}
.cmp .row{display:grid; gap:.6rem; grid-template-columns:1fr 1.2fr 1.2fr; align-items:end; margin-bottom:.6rem}
.btn{display:inline-block; background:var(--accent); color:var(--accent-ink); border:none; border-radius:8px;
  padding:.6rem 1rem; font:inherit; font-weight:600; cursor:pointer}
.btn:hover{background:#74491f; color:#fff}
footer.site{border-top:1px solid var(--line); background:var(--surface); padding:2rem 0; margin-top:2rem; color:var(--muted); font-size:.92rem}
footer.site .cols{display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
footer.site h3{font-size:.95rem; color:var(--ink); margin:0 0 .4rem}
footer.site ul{list-style:none; margin:0; padding:0}
footer.site li{margin:.3rem 0}
footer.site .legal{margin-top:1.6rem; border-top:1px solid var(--line); padding-top:1rem; font-size:.85rem}
.breadcrumb{font-size:.85rem; color:var(--muted); margin-bottom:1rem}
.breadcrumb a{color:var(--muted)}
dl dt{font-weight:700; margin-top:1rem}
dl dd{margin:.25rem 0 .6rem}
.tag{display:inline-block; background:var(--accent-soft); color:var(--accent); font-size:.72rem; font-weight:700;
  border-radius:999px; padding:.18rem .6rem; letter-spacing:.03em; text-transform:uppercase}
@media (max-width:640px){
  body{font-size:16px}
  .hero .overlay{padding:1rem}
  nav.main a{padding:.4rem .5rem; font-size:.88rem}
  .cmp .row{grid-template-columns:1fr}
}