/* Blog — same palette and type as the main page. */
:root{
  --green-dark:#15341E; --green:#1C4527; --green-mid:#306E3D;
  --terracotta:#C0532B; --terracotta-dark:#A6431F; --terracotta-light:#E3906B;
  --cream:#F8F6F2; --cream-warm:#EFEAE0; --paper:#F2F2F2;
  --ink:#1A1A1A; --ink-soft:#57534E; --rule:#DDD8CF;
}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);
  font-family:'Manrope',system-ui,sans-serif;letter-spacing:.005em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;transition:color .18s ease-out}
img{max-width:100%;height:auto}

/* header */
.blog-head{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;gap:14px 28px;
  align-items:center;justify-content:space-between;padding:16px clamp(20px,4vw,56px);
  background:var(--paper);border-bottom:1px solid rgba(26,26,26,.1)}
.blog-brand{display:flex;align-items:center;gap:13px;min-width:0}
.blog-brand img{height:40px;width:auto;display:block}
.blog-brand span{font:400 14px/1 'DM Serif Display',serif;letter-spacing:.1em;color:var(--ink)}
.blog-nav{display:flex;flex-wrap:wrap;gap:12px 26px;
  font:500 12px/1 'Manrope',sans-serif;letter-spacing:.09em;color:rgba(26,26,26,.68)}
.blog-nav a:hover{color:var(--terracotta)}

/* shared bits */
.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 16px;
  font:500 12px/1 'Manrope',sans-serif;letter-spacing:.16em;color:var(--terracotta)}
.eyebrow span{width:24px;height:2px;background:var(--terracotta);display:block;flex:none}
.crumbs{margin:0 0 26px;font:500 12px/1 'Manrope',sans-serif;letter-spacing:.06em;color:var(--ink-soft)}
.crumbs a:hover{color:var(--terracotta)}
.crumbs span{opacity:.5;margin:0 4px}

/* listing */
.listing{max-width:1000px;margin:0 auto;padding:clamp(48px,6vw,84px) clamp(20px,4vw,56px)}
.listing h1{margin:0 0 18px;font:400 clamp(30px,4vw,46px)/1.12 'DM Serif Display',serif;
  letter-spacing:-.015em;color:var(--green);max-width:20ch}
.listing .lede{margin:0 0 clamp(34px,4vw,52px);font:400 clamp(16px,1.5vw,18px)/1.65 'Manrope',sans-serif;
  color:var(--ink-soft);max-width:60ch}
.posts{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:clamp(18px,2.4vw,26px)}
.posts li a{display:flex;flex-direction:column;gap:10px;height:100%;padding:clamp(24px,3vw,32px);
  background:#fff;border:1px solid rgba(26,26,26,.12);border-radius:10px;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.posts li a:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(18,45,26,.16);border-color:rgba(26,26,26,.2)}
.posts .cat{font:500 11px/1 'Manrope',sans-serif;letter-spacing:.14em;color:var(--terracotta)}
.posts h2{margin:0;font:400 clamp(20px,2vw,24px)/1.25 'DM Serif Display',serif;
  letter-spacing:-.008em;color:var(--green)}
.posts p{margin:0;font:400 15px/1.6 'Manrope',sans-serif;color:var(--ink-soft);flex:1}
.posts .meta{font:500 12px/1 'Manrope',sans-serif;color:rgba(26,26,26,.5)}

/* post */
.post{max-width:760px;margin:0 auto;padding:clamp(40px,5vw,72px) clamp(20px,4vw,56px)}
.post h1{margin:0 0 14px;font:400 clamp(28px,3.8vw,42px)/1.15 'DM Serif Display',serif;
  letter-spacing:-.015em;color:var(--green);text-wrap:pretty}
.post .meta{margin:0 0 clamp(30px,3.6vw,42px);padding-bottom:22px;border-bottom:1px solid var(--rule);
  font:500 13px/1 'Manrope',sans-serif;color:rgba(26,26,26,.55)}

.prose{font:400 17px/1.75 'Manrope',sans-serif;color:#33302C}
.prose h2{margin:2em 0 .6em;font:400 clamp(22px,2.4vw,28px)/1.25 'DM Serif Display',serif;
  letter-spacing:-.01em;color:var(--green)}
.prose h3{margin:1.8em 0 .5em;font:600 clamp(17px,1.7vw,19px)/1.35 'Manrope',sans-serif;color:var(--ink)}
.prose p{margin:0 0 1.15em;text-wrap:pretty}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.3em}
.prose li{margin-bottom:.5em}
.prose li::marker{color:var(--terracotta)}
.prose a{color:var(--terracotta);border-bottom:1px solid rgba(192,83,43,.35);padding-bottom:1px}
.prose a:hover{color:var(--terracotta-dark);border-color:var(--terracotta-dark)}
.prose strong{font-weight:600;color:var(--ink)}
.prose code{font:500 .88em/1.4 'IBM Plex Mono',ui-monospace,monospace;
  background:var(--cream-warm);padding:.15em .45em;border-radius:3px}
.prose blockquote{margin:1.6em 0;padding:4px 0 4px 22px;border-left:3px solid var(--terracotta)}
.prose blockquote p{margin:0;color:var(--ink-soft);font-style:italic}
.prose hr{margin:2.4em 0;border:0;border-top:1px solid var(--rule)}
.prose img{display:block;margin:1.8em 0;border-radius:8px}
.prose table{width:100%;border-collapse:collapse;margin:1.6em 0;
  font:400 15px/1.5 'Manrope',sans-serif}
.prose th{text-align:left;padding:11px 14px;background:var(--green-mid);color:var(--cream);
  font-weight:500;font-size:13px;letter-spacing:.04em}
.prose td{padding:11px 14px;border-bottom:1px solid var(--rule)}
.prose tbody tr:nth-child(even){background:rgba(239,234,224,.45)}

/* post CTA */
.cta{margin-top:clamp(40px,5vw,64px);padding:clamp(28px,3.4vw,40px);
  background:var(--green);border-radius:12px;color:var(--cream)}
.cta h2{margin:0 0 10px;font:400 clamp(21px,2.2vw,26px)/1.2 'DM Serif Display',serif;color:var(--cream)}
.cta p{margin:0 0 20px;font:400 16px/1.6 'Manrope',sans-serif;color:rgba(242,239,233,.8)}
.btn{display:inline-flex;align-items:center;height:50px;padding:0 26px;background:var(--terracotta);
  color:#fff;border-radius:999px;font:500 15px/1 'Manrope',sans-serif;transition:background .18s ease-out}
.btn:hover{background:var(--terracotta-dark);color:#fff}

/* footer */
.blog-foot{background:var(--green-dark);color:rgba(242,239,233,.62);
  padding:clamp(36px,4vw,52px) clamp(20px,4vw,56px);
  font:400 14px/1.7 'Manrope',sans-serif;text-align:center}
.blog-foot p{margin:0 0 8px}
.blog-foot a{color:var(--terracotta-light)}
.blog-foot a:hover{color:#fff}

a:focus-visible,button:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}
}

/* ------------------------------------------------------------- pictures */
.cover{margin:0 0 clamp(28px,3.4vw,40px)}
.cover img{display:block;width:100%;height:auto;border-radius:10px;
  aspect-ratio:4/3;object-fit:cover;background:var(--cream-warm)}
figcaption{margin-top:10px;font:400 13px/1.5 'Manrope',sans-serif;color:rgba(26,26,26,.55)}
.prose figure{margin:1.8em 0}

.gallery{max-width:1000px;margin:clamp(44px,5vw,72px) auto 0;
  padding:clamp(36px,4.5vw,60px) clamp(20px,4vw,56px) 0;border-top:1px solid var(--rule)}
.gallery h2{margin:0 0 clamp(24px,3vw,34px);
  font:400 clamp(22px,2.6vw,30px)/1.2 'DM Serif Display',serif;
  letter-spacing:-.01em;color:var(--green)}
.gallery .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:clamp(16px,2.2vw,24px)}
.gallery figure{margin:0}
.gallery img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:8px;background:var(--cream-warm)}

/* listing thumbnails */
.posts .thumb{display:block;margin:calc(-1 * clamp(24px,3vw,32px)) calc(-1 * clamp(24px,3vw,32px)) 4px;
  border-radius:10px 10px 0 0;overflow:hidden;background:var(--cream-warm)}
.posts .thumb img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
