/* ============================================================
   Project 4 — Blog styles
   Dark hero / nav / CTA + light reading body, to break the page
   up the way the original articles did. Palette + Manrope from
   the main site (style.css). Layout/structure preserved.
   ============================================================ */

:root{
  /* --- light zone (reading body) --- */
  --bg:     #ffffff;                 /* page / reading background */
  --paper:  #f6f8f4;                 /* code / inset surfaces     */
  --line:   #e6e8e3;                 /* hairline borders          */
  --ink:    #15181c;                 /* primary text              */
  --muted:  #5b636d;                 /* secondary text            */
  --green-ink:#15803d;               /* accent legible on white   */

  /* --- dark zone (hero / nav / CTA) --- */
  --bg-dark:#07111f;
  --dark1:  #0b1a2e;                 /* hero gradient top         */
  --dark2:  #07111f;                 /* hero gradient bottom      */
  --green:  #6ee76a;                 /* bright accent on dark     */
  --green-soft:#a7f37b;
  --ink-dark:#f8fafc;                /* text on dark              */
  --muted-dark:#94a3b8;             /* secondary text on dark    */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:'Manrope',system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:20px;line-height:1.75;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wrap{max-width:800px;margin:0 auto;padding:0 24px}
a{color:var(--green-ink);text-decoration:none;border-bottom:1px solid rgba(21,128,61,.35)}
a:hover{border-bottom-color:var(--green-ink)}
img,video{max-width:100%;height:auto;display:block}

/* ---------- BLOG TOP BAR (dark, shared) ---------- */
.blog-nav{position:sticky;top:0;z-index:10;border-bottom:1px solid rgba(255,255,255,.10);
  background:#07111f}
.blog-nav-inner{display:flex;align-items:center;justify-content:space-between;
  height:64px;font-family:'Manrope',system-ui,sans-serif}
.blog-logo{display:inline-flex;align-items:center;gap:.6rem;border:0;color:var(--ink-dark);
  font-weight:700;font-size:16px;letter-spacing:-.01em}
.blog-logo:hover{border:0}
.blog-logo-mark{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:8px;
  background:var(--green);color:#07111f;font-weight:800;font-size:14px;letter-spacing:0}
.blog-back{border:0;color:var(--muted-dark);font-weight:600;font-size:14px;letter-spacing:.01em}
.blog-back:hover{border:0;color:var(--green)}

/* ---------- HERO (dark) ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--dark1),var(--dark2));
  color:var(--ink-dark);padding:84px 0 72px}
.hero .caret{position:absolute;right:-40px;top:50%;transform:translateY(-50%);
  font-family:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;font-size:420px;line-height:.7;
  color:rgba(110,231,106,.08);font-weight:700;pointer-events:none;user-select:none}
.eyebrow{font-family:'Manrope',system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:700;
  font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--green);margin:0 0 22px}
.eyebrow .bar{display:inline-block;width:30px;height:3px;background:var(--green);
  vertical-align:middle;margin-right:14px;border-radius:2px}
h1{font-family:'Manrope',system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:800;
  font-size:50px;line-height:1.06;letter-spacing:-.02em;margin:0 0 24px;color:#fff}
.dek{font-size:21px;line-height:1.55;color:var(--muted-dark);margin:0}
.hero .wrap{position:relative;z-index:1}

/* ---------- BODY (light) ---------- */
article{padding:56px 0 8px}
article p{margin:0 0 26px}
article h2{font-family:'Manrope',system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:700;
  font-size:28px;line-height:1.2;letter-spacing:-.01em;color:var(--ink);margin:52px 0 18px}
article h2::before{content:">";color:var(--green-ink);font-weight:700;margin-right:.45em;opacity:.9}
article strong{font-weight:700}
article em{font-style:italic}
code{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:.86em;
  background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:.08em .4em}
.lede{font-size:22px;line-height:1.7}

/* ---------- BOOK CTA (dark) ---------- */
.book{margin:48px 0 8px;
  border-radius:16px;padding:30px;text-align:center}
.book a.shot{display:block;border:0;border-radius:10px;overflow:hidden;line-height:0;
  box-shadow:0 18px 40px rgba(0,0,0,.5)}
.book a.shot:hover{border:0}
.book img{width:100%;height:auto;display:block}
.book .btn{display:inline-block;margin:26px 0 6px;font-family:'Manrope',system-ui,sans-serif;font-weight:700;
  font-size:16px;letter-spacing:.01em;color:#07111f;background:var(--green);border:0;
  padding:14px 30px;border-radius:9px}
.book .btn:hover{background:var(--green-soft);border:0}
.book .sub{margin:14px 0 0;font-family:'Manrope',system-ui,sans-serif;font-size:13.5px;
  color:var(--muted-dark);font-style:normal}

/* ---------- SERIES (light) ---------- */
.series{margin:40px 0 0;padding:30px 0 0;border-top:1px solid var(--line)}
.series h3{font-family:'Manrope',system-ui,sans-serif;font-weight:700;font-size:14px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0 0 18px}
.series ol{list-style:none;margin:0;padding:0;counter-reset:s}
.series li{position:relative;padding:11px 0 11px 34px;font-size:18px;border-bottom:1px solid var(--line)}
.series li:last-child{border-bottom:0}
.series li::before{content:">";position:absolute;left:6px;top:11px;color:var(--green-ink);
  font-family:ui-monospace,monospace;font-weight:700}
.series li.here{color:var(--muted)}
.series li.here strong{color:var(--ink);font-family:'Manrope',system-ui,sans-serif;font-weight:700;font-style:normal}
.series .tag{font-family:'Manrope',system-ui,sans-serif;font-size:12px;color:var(--green-ink);
  letter-spacing:.04em;margin-left:8px}

/* ---------- FOOTER (light) ---------- */
footer{margin:56px 0 80px;padding-top:26px;border-top:1px solid var(--line);
  font-family:'Manrope',system-ui,sans-serif;font-size:14px;color:var(--muted)}
footer a{color:var(--muted);border-bottom-color:var(--line)}
footer a:hover{color:var(--green-ink)}

/* ============================================================
   BLOG INDEX (landing page) — light card grid
   ============================================================ */
.blog-index{padding:64px 0 96px}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:8px}
.post-card{position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:28px;box-shadow:0 1px 2px rgba(15,24,28,.04);
  transition:transform .25s cubic-bezier(.4,0,.2,1),border-color .25s,box-shadow .25s}
.post-card:hover{transform:translateY(-4px);border-color:rgba(21,128,61,.4);
  box-shadow:0 18px 40px rgba(15,24,28,.12)}
.post-card .tag{display:inline-block;align-self:flex-start;font-family:'Manrope',system-ui,sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green-ink);
  background:rgba(21,128,61,.08);border:1px solid rgba(21,128,61,.2);
  padding:5px 12px;border-radius:999px;margin-bottom:18px}
.post-card h2{font-family:'Manrope',system-ui,sans-serif;font-weight:700;font-size:22px;line-height:1.25;
  letter-spacing:-.01em;color:var(--ink);margin:0 0 12px}
.post-card p{font-size:16px;line-height:1.6;color:var(--muted);margin:0 0 22px;flex:1}
.post-card .read{display:inline-flex;align-items:center;gap:.5rem;border:0;align-self:flex-start;
  font-family:'Manrope',system-ui,sans-serif;font-weight:700;font-size:15px;color:var(--green-ink)}
.post-card .read svg{transition:transform .25s}
.post-card:hover .read svg{transform:translateX(4px)}
.post-card a.card-link{position:absolute;inset:0;border:0;z-index:1}

/* ---------- LANDING PAGE: dark theme override ---------- */
body.blog-home{background:var(--bg-dark);color:var(--ink-dark)}
body.blog-home .wrap{max-width:1200px}   /* match the main site container */
body.blog-home a{color:var(--green);border-bottom-color:rgba(110,231,106,.35)}
body.blog-home a:hover{border-bottom-color:var(--green)}
body.blog-home footer{border-top-color:rgba(255,255,255,.10);color:var(--muted-dark)}
body.blog-home footer a{color:var(--muted-dark);border-bottom-color:rgba(255,255,255,.15)}
body.blog-home footer a:hover{color:var(--green)}
body.blog-home .post-card{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.10);
  box-shadow:none}
body.blog-home .post-card::before{content:"";position:absolute;inset:0;border-radius:16px;padding:1px;
  background:linear-gradient(135deg,rgba(110,231,106,.5),transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .25s}
body.blog-home .post-card:hover{border-color:rgba(110,231,106,.35);
  box-shadow:0 18px 40px rgba(0,0,0,.4)}
body.blog-home .post-card:hover::before{opacity:1}
body.blog-home .post-card .tag{color:var(--green);
  background:rgba(110,231,106,.1);border-color:rgba(110,231,106,.25)}
body.blog-home .post-card h2{color:var(--ink-dark)}
body.blog-home .post-card p{color:var(--muted-dark)}
body.blog-home .post-card .read{color:var(--green)}

@media (max-width:640px){
  body{font-size:18px}
  .hero{padding:60px 0 50px}
  h1{font-size:34px}
  .dek{font-size:18px}
  .hero .caret{font-size:260px;right:-30px}
  article h2{font-size:24px}
  .book{padding:18px}
  .blog-index{padding:44px 0 64px}
}
@media (prefers-reduced-motion:no-preference){
  .hero .wrap>*{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
  .eyebrow{animation-delay:.02s}.dek{animation-delay:.12s}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}