/* =================================================================
   blog.css · shared stylesheet for karthikonteddu.com BLOG POST pages
   (/blog/<slug>). Design system sampled straight from policy.css /
   index.html: Wispr lavender + deep green, Fraunces + Inter, paper
   grain, layered iOS-material shadows, automatic dark mode (CSS only,
   no JS toggle — follows the OS like every other page on this site).
   "Color-Field · Bold Duotone" post banner treatment lives at the
   bottom of section 1 / top of section 3.
   Keep this file in the SAME folder as the post .html files' parent
   (repo root) — post pages reference it as href="/blog.css".
   ================================================================= */

/* 1. DESIGN SYSTEM ------------------------------------------------ */
:root{
  --cream:      #FAFAF6;
  --cream-2:    #F2F0E8;
  --ink:        #2A2925;
  --ink-soft:   #6B6963;
  --ink-faint:  #A8A69C;
  --label:      #8B8980;
  --lav:        #F0D7FF;   /* exact Wispr lavender */
  --pink:       #BB8FDC;   /* deeper lavender, readable on cream */
  --green:      #045145;   /* exact Wispr deep green */
  --green-2:    #0a6b5b;   /* lighter duotone green, banner gradients */
  --accent:     #045145;   /* link + CTA colour (green in light) */
  --hairline:   rgba(42,41,37,0.09);
  --shadow-tile:   0 1px 2px rgba(42,41,37,0.05), 0 8px 20px rgba(42,41,37,0.07);
  --shadow-tile-h: 0 2px 6px rgba(42,41,37,0.07), 0 16px 34px rgba(42,41,37,0.11);
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --measure: 720px;
}

@media (prefers-color-scheme: dark){
  :root{
    --cream:    #1E1D1A;
    --cream-2:  #28261F;
    --ink:      #F2F0E8;
    --ink-soft: #C4C1B7;
    --ink-faint:#7E7B72;
    --label:    #8B8980;
    --accent:   #E7CBFF;   /* lavender reads better than green on dark */
    --hairline: rgba(242,240,232,0.12);
    --shadow-tile:   0 1px 2px rgba(0,0,0,0.40), 0 10px 24px rgba(0,0,0,0.36);
    --shadow-tile-h: 0 2px 6px rgba(0,0,0,0.46), 0 18px 38px rgba(0,0,0,0.50);
  }
}

/* 2. BASE -------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  letter-spacing:0.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

/* paper grain · degrades to nothing if CSP blocks the data URI */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:0.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark){ body::before{ opacity:0.05; } }

::selection{ background:var(--lav); color:#2A2925; }

a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px;
   text-decoration-thickness:1px; text-decoration-color:rgba(4,81,69,0.35);
   transition:text-decoration-color .15s ease, color .15s ease; }
a:hover{ text-decoration-color:currentColor; }
@media (prefers-color-scheme: dark){ a{ text-decoration-color:rgba(231,203,255,0.4); } }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* skip link (a11y, matches the main site) */
.skip{ position:absolute; left:-9999px; top:0; background:var(--green); color:#fff;
  padding:10px 16px; border-radius:0 0 10px 0; z-index:50; }
.skip:focus{ left:0; }

/* 3. LAYOUT -------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--measure); margin:0 auto; padding:0 22px; }
.wrap-wide{ width:100%; max-width:900px; margin:0 auto; padding:0 22px; }

/* 4. HEADER (matches contact.html / policy.css exactly) ----------- */
.site-head{
  border-bottom:1px solid var(--hairline);
  background:color-mix(in srgb, var(--cream) 86%, transparent);
  backdrop-filter:saturate(140%) blur(8px);
  position:sticky; top:0; z-index:20;
}
.site-head .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; min-height:62px; flex-wrap:wrap;
}
.wordmark{
  font-family:var(--serif); font-weight:600; font-size:1.45rem;
  color:var(--ink); text-decoration:none; letter-spacing:-0.01em;
}
.wordmark .dot{ color:var(--pink); }
.nav{ display:flex; gap:4px; flex-wrap:wrap; }
.nav a{
  font-size:0.86rem; font-weight:500; color:var(--ink-soft);
  text-decoration:none; padding:6px 11px; border-radius:9px; line-height:1;
  transition:background .15s ease, color .15s ease;
}
.nav a:hover{ background:var(--cream-2); color:var(--ink); }
.nav a[aria-current="page"]{ background:var(--lav); color:#3A2A47; font-weight:600; }
@media (prefers-color-scheme: dark){
  .nav a[aria-current="page"]{ background:rgba(240,215,255,0.16); color:var(--lav); }
}

main{ padding:40px 0 28px; }

/* 5. POST BANNER · "Color-Field · Bold Duotone" -------------------- */
.post-banner{
  position:relative; border-radius:20px; overflow:hidden;
  background:
    radial-gradient(80% 130% at 88% 100%, rgba(187,143,220,.85), rgba(187,143,220,0) 55%),
    linear-gradient(125deg,#0a6b5b 0%,#045145 42%,#3a2b57 100%);
  min-height:380px; display:flex; flex-direction:column; justify-content:flex-end;
  padding:48px;
}
.post-banner .grain{
  position:absolute; inset:0; pointer-events:none;
  mix-blend-mode:overlay; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.018 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.post-banner .rule{
  position:relative; width:44px; height:3px; border-radius:2px;
  background:rgba(255,255,255,.6); margin-bottom:18px;
}
.post-banner .kick{
  position:relative;
  text-transform:uppercase; letter-spacing:.18em; font-size:12px; font-weight:600;
  color:rgba(255,255,255,.78); margin:0 0 14px;
}
.post-banner h1.post-title{
  position:relative;
  font-family:var(--serif); font-weight:600;
  font-size:clamp(32px,5vw,56px); line-height:1.02; letter-spacing:-.02em;
  color:#fff; max-width:19ch; margin:0;
}
.post-banner .byline{
  position:relative;
  font-size:14px; color:rgba(255,255,255,.75); margin-top:20px;
}

/* 6. READING BODY · reuses the essay feel -------------------------- */
.article{ max-width:660px; margin:40px auto 80px; }
.article p{
  font-family:var(--serif); font-size:19px; line-height:1.72;
  color:#332f2a; font-weight:380; margin:0 0 22px;
}
.article p:first-of-type::first-letter{
  font-family:var(--serif); font-weight:600; float:left;
  font-size:70px; line-height:.8; padding:6px 12px 0 0; color:var(--green);
}
.article h2{
  font-family:var(--serif); font-weight:600; font-size:1.5rem; line-height:1.25;
  letter-spacing:-0.01em; margin:44px 0 14px; color:var(--ink);
}
.article h3{
  font-family:var(--serif); font-weight:600; font-size:1.15rem; line-height:1.3;
  margin:32px 0 10px; color:var(--ink);
}
.article a{ color:var(--green); text-decoration:underline; text-underline-offset:3px; }
@media (prefers-color-scheme: dark){ .article a{ color:var(--accent); } }
.article ul, .article ol{ margin:0 0 22px; padding-left:1.4em; font-size:17px; color:var(--ink); }
.article li{ margin:0 0 10px; }
.article blockquote{
  margin:26px 0; padding:4px 0 4px 20px; border-left:3px solid var(--pink);
  color:var(--ink-soft); font-style:italic; font-size:18px;
}
.article img{ max-width:100%; height:auto; border-radius:10px; margin:8px 0 22px; display:block; }

@media (prefers-color-scheme: dark){
  .article p{ color:var(--ink-soft); }
}

/* back-link + post footer ------------------------------------------ */
.back-link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:0.86rem; font-weight:500; color:var(--ink-soft);
  text-decoration:none; margin:26px 0 0;
}
.back-link:hover{ color:var(--pink); text-decoration:none; }

.post-foot{
  max-width:660px; margin:0 auto 20px; padding-top:26px;
  border-top:1px solid var(--hairline);
  font-size:0.88rem; color:var(--ink-soft);
}
.post-foot .share-hint{ margin:0 0 10px; }
.post-foot .post-back{ margin:0; }

/* 7. FOOTER (matches contact.html / policy.css exactly) ------------ */
.site-foot{
  border-top:1px solid var(--hairline); margin-top:40px;
  padding:30px 0 46px; color:var(--ink-soft); font-size:0.88rem;
}
.foot-links{ display:flex; flex-wrap:wrap; gap:6px 4px; margin-bottom:14px; }
.foot-links a{
  color:var(--ink-soft); text-decoration:none; padding:5px 10px;
  border-radius:8px; transition:background .15s ease, color .15s ease;
}
.foot-links a:hover{ background:var(--cream-2); color:var(--ink); }
.foot-fine{ margin:0; line-height:1.6; }
.foot-fine .sep{ color:var(--ink-faint); margin:0 7px; }

/* 7b. ASK AI ABOUT ME · matches the block on the home page --------- */
.ask-ai{
  display:flex; flex-direction:column; align-items:center; gap:11px;
  text-align:center; margin:0 0 24px; padding-bottom:22px;
  border-bottom:1px solid var(--hairline);
}
.ask-ai-label{
  margin:0; font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--label); font-weight:600;
}
.ask-ai-label .spk{ color:var(--pink); }
.ask-ai-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:9px; }
.ai-pill{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--cream); border:1px solid var(--hairline); border-radius:999px;
  font-family:var(--sans); font-size:0.82rem; font-weight:500; color:var(--ink-soft);
  padding:8px 16px; text-decoration:none; cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease, transform .15s ease;
}
.ai-pill:hover{
  color:#2A2925; background:var(--lav); border-color:#2A2925;
  transform:translateY(-2px); text-decoration:none;
}

/* 7c. SUBSCRIBE · newsletter capture (plain-POST Formspree form, zero JS) -- */
.subscribe{
  max-width:660px; margin:0 auto 34px;
  background:var(--cream-2); border:1px solid var(--hairline); border-radius:18px;
  padding:32px 34px; box-shadow:var(--shadow-tile);
}
.sub-kick{
  margin:0 0 10px; font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--label); font-weight:600;
}
.sub-title{
  font-family:var(--serif); font-weight:600; font-size:1.5rem; line-height:1.25;
  letter-spacing:-0.01em; color:var(--ink); margin:0 0 8px;
}
.sub-copy{ font-size:14.5px; color:var(--ink-soft); margin:0 0 20px; max-width:52ch; }
.sub-form{ display:flex; gap:10px; }
.sub-input{
  flex:1; min-width:0; font-family:var(--sans); font-size:14px; color:var(--ink);
  background:var(--cream); border:1px solid var(--hairline);
  border-radius:10px; padding:13px 16px;
  transition:border-color .15s ease;
}
.sub-input:focus{ outline:2px solid var(--green); outline-offset:2px; border-color:var(--green); }
.sub-input::placeholder{ color:var(--ink-faint); }
.sub-btn{
  flex-shrink:0; font-family:var(--sans); font-size:14px; font-weight:600;
  color:#fff; background:var(--green); border:none; border-radius:10px;
  padding:13px 22px; cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.sub-btn:hover{ background:var(--green-2); transform:translateY(-1px); }

/* 7d. READ NEXT · understated nav to more posts ---------------------- */
.read-next{
  max-width:660px; margin:0 auto 34px; padding-top:22px;
  border-top:1px solid var(--hairline);
}
.rn-kick{
  margin:0 0 10px; font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--label); font-weight:600;
}
.rn-link{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--sans); font-size:0.95rem; font-weight:500; color:var(--ink);
  text-decoration:none;
}
.rn-link:hover{ color:var(--pink); text-decoration:none; }

/* 8. RESPONSIVE ------------------------------------------------------ */
@media (max-width:560px){
  body{ font-size:16px; }
  main{ padding:28px 0 22px; }
  .post-banner{ padding:30px; min-height:300px; border-radius:16px; }
  .article p{ font-size:17.5px; }
  .article p:first-of-type::first-letter{ font-size:54px; padding:4px 8px 0 0; }
  .nav a{ padding:6px 9px; }
  .subscribe{ padding:24px 22px; }
  .sub-form{ flex-direction:column; }
  .sub-btn{ width:100%; }
}