/* Shared styles for blog pages. Brand palette: #ffffff #f1ede2 #d8d0ca #7b6f5f #473427 #29201b, green #646b2f */
:root{
  --bg:#ffffff; --fg:#29201b; --muted:#7b6f5f; --line:#d8d0ca;
  --accent:#473427; --accent-ink:#ffffff; --green:#646b2f;
  --display:"Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --body:"Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){:root{
  --bg:#29201b; --fg:#f1ede2; --muted:#d8d0ca; --line:rgba(216,208,202,.24);
  --accent:#f1ede2; --accent-ink:#29201b; --green:#8f975a; color-scheme:dark }}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--fg); font:400 16px/1.75 var(--body);
  padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}
img{max-width:100%}
a{color:inherit}
.wrap{max-width:1040px; margin:0 auto}
.top{display:flex; justify-content:space-between; align-items:center; gap:16px; padding-block:20px; flex-wrap:wrap; border-bottom:1px solid var(--line)}
.brand{font-family:var(--display); font-size:1.5rem; text-decoration:none}
.top nav{display:flex; gap:20px; flex-wrap:wrap; font-size:.95rem}
.top nav a{text-decoration:none; color:var(--muted)}
.top nav a:hover,.top nav a[aria-current]{color:var(--fg)}
h1,h2{font-family:var(--display); font-weight:300; line-height:1.1; text-wrap:balance; margin:0}
.label{font:500 .72rem/1.2 var(--body); letter-spacing:.32em; text-transform:uppercase; color:var(--muted); margin:0}
.rule{width:48px; height:2px; background:var(--green); border:0; margin:0}
.btn{display:inline-flex; padding:1em 1.8em; background:var(--accent); color:var(--accent-ink); text-decoration:none;
  font:500 .8rem/1 var(--body); letter-spacing:.2em; text-transform:uppercase}
a:focus-visible{outline:2px solid var(--green); outline-offset:3px}

/* blog index */
.intro{padding-block:56px 24px; display:grid; gap:16px; max-width:640px}
.intro h1{font-size:clamp(2.6rem,6vw,4rem)}
.intro p{color:var(--muted)}
.posts{list-style:none; padding:0; margin:0 0 72px; border-top:1px solid var(--line)}
.posts li{border-bottom:1px solid var(--line)}
.posts a{display:grid; gap:8px; padding-block:28px; text-decoration:none; max-width:720px}
.posts h2{font-size:clamp(1.7rem,3.5vw,2.2rem)}
.posts p{color:var(--muted); margin:0}
.posts a:hover h2{text-decoration:underline; text-decoration-color:var(--green); text-underline-offset:6px; text-decoration-thickness:1px}

/* article */
article{max-width:680px; margin:0 auto; padding-block:56px 72px; display:grid; gap:22px}
article h1{font-size:clamp(2.4rem,6vw,3.6rem)}
article .meta{color:var(--muted); font-size:.9rem; margin:0}
article p{margin:0}
article h2{font-size:1.9rem; margin-top:12px}
article ul{margin:0; padding-left:1.2em; display:grid; gap:.4em}
.cta-box{margin-top:20px; padding:32px; border:1px solid var(--line); display:grid; gap:14px; justify-items:start}
.cta-box p{color:var(--muted)}

footer{padding-block:32px; border-top:1px solid var(--line); color:var(--muted); font-size:.85rem; display:grid; gap:6px}
footer p{margin:0}