/* blog.css — layout for individual post pages */
@import url("https://api.fontshare.com/v2/css?f[]=zodiak@400,401,700,701&f[]=satoshi@400,500,700&display=swap");

:root{
  --paper:#ece3cf;--paper-2:#e1d5ba;--dark:#0f2129;
  --ink:#16272d;--ink-soft:#5c6d6c;--rule:#c4b393;
  --accent:#1f6f6b;--accent-soft:#46a195;
  --max:700px;--ease:cubic-bezier(.19,1,.22,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{background:var(--paper);color:var(--ink);font-family:"Satoshi",system-ui,sans-serif;
  font-size:clamp(15px,.55vw+13px,18px);line-height:1.72;overflow-x:hidden}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:var(--paper)}

/* Grain */
.grain{position:fixed;inset:0;z-index:120;pointer-events:none;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}

/* Post nav */
.post-nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  gap:2rem;padding:1.2rem clamp(1.5rem,5vw,4rem);
  background:var(--paper);border-bottom:1px solid var(--rule)}
.post-nav-brand{font-family:"Zodiak",serif;font-weight:700;font-size:1.1rem;
  letter-spacing:-.01em;display:flex;align-items:center;gap:.5rem}
.post-nav-back{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  display:flex;align-items:center;gap:.45rem;opacity:.65;transition:opacity .3s var(--ease)}
.post-nav-back:hover{opacity:1;color:var(--accent)}
.post-nav-back svg{flex:none}

/* Hero */
.post-hero{position:relative;height:clamp(340px,55vw,680px);background:var(--dark);overflow:hidden}
.post-hero img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.22) brightness(.62) contrast(1.05) saturate(.85)}
.post-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 40%,rgba(15,33,41,.72))}
.post-hero-caption{position:absolute;bottom:clamp(2rem,5vw,3.5rem);
  left:clamp(1.5rem,5vw,4rem);right:clamp(1.5rem,5vw,4rem);
  color:var(--paper);z-index:2}
.post-hero-caption .post-cat{font-size:.72rem;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent-soft);margin-bottom:.9rem;display:block}
.post-hero-caption h1{font-family:"Zodiak",serif;font-weight:700;line-height:.96;
  letter-spacing:-.018em;font-size:clamp(2.2rem,6vw,5rem)}
.post-hero-caption h1 em{font-style:italic;font-weight:400;color:var(--accent-soft)}

/* Article wrapper */
.post-wrap{max-width:var(--max);margin:0 auto;padding:clamp(3rem,7vw,6rem) clamp(1.5rem,5vw,2rem)}

/* Meta row */
.post-byline{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem 1.4rem;
  font-size:.78rem;font-weight:500;color:var(--ink-soft);
  border-bottom:1px solid var(--rule);padding-bottom:1.6rem;margin-bottom:2.8rem}
.post-byline strong{color:var(--ink)}
.post-byline .sep{opacity:.3}

/* Body typography */
.post-body{font-size:clamp(1rem,.4vw+15px,1.13rem);line-height:1.78}
.post-body h2{font-family:"Zodiak",serif;font-weight:700;font-size:clamp(1.55rem,2.4vw,2.1rem);
  line-height:1.06;letter-spacing:-.014em;margin:3rem 0 1.1rem;color:var(--ink)}
.post-body p{margin-bottom:1.4rem;color:var(--ink)}
.post-body p:last-child{margin-bottom:0}
.post-body strong{font-weight:600;color:var(--ink)}

/* Pull quote */
.post-pull{margin:3.2rem 0;padding:2rem 2.2rem;border-left:3px solid var(--accent);
  background:var(--paper-2)}
.post-pull p{font-family:"Zodiak",serif;font-style:italic;font-size:clamp(1.2rem,1.8vw,1.55rem);
  line-height:1.36;color:var(--dark);margin:0}

/* Author box */
.post-author{display:flex;align-items:center;gap:1.4rem;
  margin-top:3.5rem;padding-top:2rem;border-top:1px solid var(--rule)}
.post-author-avatar{width:52px;height:52px;border-radius:50%;background:var(--dark);
  flex:none;overflow:hidden;display:grid;place-items:center;
  font-family:"Zodiak",serif;font-style:italic;color:var(--paper);font-size:1.2rem}
.post-author-info strong{display:block;font-weight:600;font-size:.92rem}
.post-author-info span{font-size:.8rem;color:var(--ink-soft)}

/* CTA band */
.post-cta{background:var(--dark);color:var(--paper);
  padding:clamp(3rem,8vw,6rem) clamp(1.5rem,5vw,4rem);text-align:center}
.post-cta .post-cat{font-size:.72rem;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent-soft);margin-bottom:1rem;display:block}
.post-cta h2{font-family:"Zodiak",serif;font-weight:700;font-size:clamp(1.8rem,4vw,3.2rem);
  line-height:1.04;letter-spacing:-.016em;margin-bottom:1.4rem}
.post-cta h2 em{font-style:italic;font-weight:400;color:var(--accent-soft)}
.post-cta p{max-width:44ch;margin:0 auto 2.2rem;color:rgba(236,227,207,.72)}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--paper);
  color:var(--ink);font-weight:600;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;
  padding:1.05rem 2.4rem;border:none;cursor:pointer;
  transition:background .5s var(--ease),color .5s var(--ease)}
.btn:hover{background:var(--accent);color:var(--paper)}

/* Post footer */
.post-footer{background:var(--paper-2);padding:clamp(1.5rem,4vw,2.5rem) clamp(1.5rem,5vw,4rem);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  border-top:1px solid var(--rule)}
.post-footer-brand{font-family:"Zodiak",serif;font-weight:700;font-size:1rem;
  display:flex;align-items:center;gap:.45rem}
.post-footer p{font-size:.78rem;color:var(--ink-soft)}
.post-footer a{color:var(--accent)}

@media(max-width:640px){
  .post-hero-caption h1{font-size:clamp(1.8rem,7vw,2.8rem)}
  .post-pull{padding:1.4rem 1.5rem}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}