/* ============================================================
   PIZZAZZ BLOG · stylesheet
   ------------------------------------------------------------
   Carries the Pizzazz design tokens (warm · loving · premium)
   out of index.html so /blog and every future /blog/<slug> post
   share one source of truth. Tokens are copied from the v1
   system in index.html — see docs/PIZZAZZ_DESIGN_SYSTEM.md.
   Keep them in sync if the core palette moves.

   Post pages should reuse .post-body for article copy; the
   index uses .post-list. Both inherit the same rhythm.
   ============================================================ */

:root{
  /* == Surfaces (warm neutrals) == */
  --pz-canvas:#FBF6EE;
  --pz-canvas-2:#F6EEE1;
  --pz-surface:#FFFDF9;
  --pz-surface-sunk:#F4EBDD;

  /* == Ink (warm, never pure black) == */
  --pz-ink:#2A211B;
  --pz-ink-2:#6A5F55;
  --pz-ink-3:#7D7164;

  /* == Hairlines == */
  --pz-line:#EDE3D3;
  --pz-line-strong:#E0D3BE;

  /* == Brand spark (persimmon → gold sunset) == */
  --pz-brand:#E85D3D;
  --pz-brand-deep:#D0472A;
  --pz-gold:#F2A93C;
  --pz-gold-deep:#D98A1E;
  --pz-brand-soft:#FBEBE3;
  --pz-gold-soft:#FCF1DC;
  --pz-spark:linear-gradient(135deg,#FF7A4D 0%,#F2A93C 100%);
  --pz-spark-ink:#3A1B0E;

  /* == Type == */
  --pz-font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --pz-font-sans:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;

  /* == Elevation == */
  --pz-shadow-sm:0 1px 2px rgba(42,33,27,0.05),0 1px 1px rgba(42,33,27,0.04);
  --pz-shadow-md:0 4px 16px rgba(42,33,27,0.07),0 1px 3px rgba(42,33,27,0.05);

  --pz-radius:14px;
  --pz-maxw:44rem;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100vh}
html{-webkit-text-size-adjust:100%}

body{
  font-family:var(--pz-font-sans);
  background:var(--pz-canvas);
  color:var(--pz-ink);
  line-height:1.65;
  font-feature-settings:"cv02","cv03","cv04","cv11";
  -webkit-font-smoothing:antialiased;
}

a{color:var(--pz-brand-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;text-decoration-color:rgba(208,71,42,0.32);transition:text-decoration-color .15s,color .15s}
a:hover{text-decoration-color:var(--pz-brand-deep)}

/* ---------- Warm wash behind the masthead ---------- */
.bg{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60rem 30rem at 50% -10rem,rgba(242,169,60,0.16),transparent 65%),
    radial-gradient(48rem 26rem at 88% 4rem,rgba(232,93,61,0.09),transparent 70%);
}

/* ---------- Masthead ---------- */
.nav{border-bottom:1px solid var(--pz-line);background:rgba(251,246,238,0.86);backdrop-filter:saturate(1.4) blur(8px);position:sticky;top:0;z-index:10}
.nav-inner{max-width:var(--pz-maxw);margin:0 auto;padding:0.9rem 1.5rem;display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.brand{font-family:var(--pz-font-display);font-weight:700;font-size:1.15rem;letter-spacing:-0.015em;color:var(--pz-ink);text-decoration:none}
.brand:hover{color:var(--pz-ink)}
.brand .spark{background:var(--pz-spark);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-meta{font-size:0.78rem;letter-spacing:0.02em;color:var(--pz-ink-3)}

/* ---------- Page shell ---------- */
.page{max-width:var(--pz-maxw);margin:0 auto;padding:3.5rem 1.5rem 5rem}

.eyebrow{font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--pz-brand-deep);font-weight:600;margin-bottom:0.9rem}

h1{font-family:var(--pz-font-display);font-size:2.75rem;font-weight:700;letter-spacing:-0.025em;line-height:1.06;color:var(--pz-ink);margin-bottom:0.85rem}
h1 em{font-style:italic;color:var(--pz-brand)}

.lede{font-size:1.1rem;color:var(--pz-ink-2);max-width:36rem;margin-bottom:2.5rem}

h2{font-family:var(--pz-font-display);font-size:1.5rem;font-weight:700;letter-spacing:-0.018em;color:var(--pz-ink);margin:2.75rem 0 0.85rem}
h3{font-size:1.05rem;font-weight:600;letter-spacing:-0.01em;color:var(--pz-ink);margin:2rem 0 0.6rem}

p{color:var(--pz-ink-2);margin-bottom:1.05rem}
strong,b{color:var(--pz-ink);font-weight:600}

ul,ol{color:var(--pz-ink-2);margin:0 0 1.05rem 1.25rem}
li{margin-bottom:0.45rem}

hr{border:0;border-top:1px solid var(--pz-line);margin:2.5rem 0}

blockquote{border-left:3px solid var(--pz-gold);background:var(--pz-gold-soft);padding:0.9rem 1.15rem;border-radius:0 8px 8px 0;margin:1.5rem 0;color:var(--pz-ink-2)}
blockquote p:last-child{margin-bottom:0}

/* ---------- Post list (index) ---------- */
.post-list{list-style:none;margin:0;padding:0}
.post-list li{margin-bottom:0.9rem}
.post-card{display:block;background:var(--pz-surface);border:1px solid var(--pz-line);border-radius:var(--pz-radius);padding:1.35rem 1.5rem;box-shadow:var(--pz-shadow-sm);text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.post-card:hover{border-color:var(--pz-line-strong);box-shadow:var(--pz-shadow-md);transform:translateY(-1px)}
.post-card .post-title{font-family:var(--pz-font-display);font-size:1.2rem;font-weight:700;letter-spacing:-0.015em;color:var(--pz-ink);margin-bottom:0.3rem}
.post-card .post-dek{font-size:0.93rem;color:var(--pz-ink-2);margin:0}
.post-card .post-date{display:block;margin-top:0.6rem;font-size:0.74rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--pz-ink-3)}

/* ---------- Empty state (no posts published yet) ---------- */
.empty{background:var(--pz-surface);border:1px solid var(--pz-line);border-radius:var(--pz-radius);padding:2.25rem 1.75rem;text-align:center;box-shadow:var(--pz-shadow-sm)}
.empty .spark{font-size:1.6rem;background:var(--pz-spark);-webkit-background-clip:text;background-clip:text;color:transparent;display:block;margin-bottom:0.75rem}
.empty h2{font-size:1.25rem;margin:0 0 0.5rem}
.empty p{max-width:28rem;margin:0 auto 1.25rem}

/* ---------- CTA ---------- */
.cta{display:inline-block;background:var(--pz-spark);color:var(--pz-spark-ink);font-weight:600;font-size:0.95rem;padding:0.75rem 1.5rem;border-radius:999px;text-decoration:none;box-shadow:var(--pz-shadow-sm);transition:transform .15s,box-shadow .15s}
.cta:hover{color:var(--pz-spark-ink);transform:translateY(-1px);box-shadow:var(--pz-shadow-md)}

/* ---------- Article body (future /blog/<slug> posts) ---------- */
.post-body{font-size:1.02rem}
.post-body > p:first-of-type{font-size:1.1rem;color:var(--pz-ink-2)}
.post-meta{font-size:0.78rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--pz-ink-3);margin-bottom:2rem}

/* ---------- Footer ---------- */
footer{max-width:var(--pz-maxw);margin:0 auto;padding:1.75rem 1.5rem 3rem;border-top:1px solid var(--pz-line);text-align:center;font-size:0.8rem;color:var(--pz-ink-3)}
footer a{color:var(--pz-ink-3);text-decoration:none;margin:0 0.45rem}
footer a:hover{color:var(--pz-brand-deep)}
footer .sep{color:var(--pz-line-strong)}
footer .ent{display:block;margin-top:0.65rem;font-size:0.74rem;color:var(--pz-ink-3)}

@media (max-width:34rem){
  h1{font-size:2.1rem}
  .page{padding:2.5rem 1.15rem 4rem}
}