:root{
  --cream:#fff4df; --cream-2:#f8ead0; --paper:#fffaf0;
  --ink:#111111; --muted:#5f4e46; --line:rgba(17,17,17,.12);
  --coral:#f2473b; --coral-soft:#ffb9ad;
  --blue:#1550c9; --teal:#0c8f86;
  --lilac:#c6a2ef; --pink:#f1a7a9; --mustard:#f4b423; --sand:#f4d1a4;
  --shadow:0 24px 70px rgba(19,17,13,.16); --max:840px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink); background:var(--cream);
  background-image:
    linear-gradient(rgba(17,17,17,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,17,17,.025) 1px, transparent 1px);
  background-size:56px 56px;
  line-height:1.7; overflow-x:hidden;
}
.blob{position:absolute; border-radius:50%; filter:blur(2px); z-index:0; pointer-events:none}
.wrap{max-width:var(--max); margin:0 auto; padding:0 22px; position:relative; z-index:1}
.nav-outer{position:sticky; top:14px; z-index:50; padding:0 16px}
nav{
  max-width:1060px; margin:0 auto; background:var(--paper);
  border-radius:999px; box-shadow:0 10px 40px rgba(19,17,13,.10);
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 12px 12px 24px; gap:8px;
}
.logo{font-family:"Playfair Display",Georgia,serif; font-size:1.25rem; line-height:1; text-decoration:none; white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis}
.logo b{color:var(--coral); font-weight:800; letter-spacing:-.02em}
.logo i{color:var(--blue); font-weight:700}
.nav-links{display:flex; align-items:center; gap:20px}
.nav-links a{color:var(--ink); text-decoration:none; font-weight:500; font-size:.95rem}
.nav-links a:hover{color:var(--coral)}
.pill-btn{
  background:var(--ink); color:var(--paper)!important; border-radius:999px;
  padding:10px 22px; font-weight:700; text-decoration:none; display:inline-block; border:none; cursor:pointer; font-size:.95rem;
}
.pill-btn:hover{background:var(--coral)}
@media(max-width:640px){
  .nav-links a:not(.pill-btn){display:none}
  nav{padding:10px 10px 10px 18px}
  .logo{font-size:1.05rem}
  .nav-links .pill-btn{padding:9px 14px; font-size:.85rem; white-space:nowrap}
}
header.blog-head{position:relative; padding:70px 0 30px; overflow:hidden}
.kicker{
  display:inline-block; background:var(--mustard); border-radius:999px; padding:5px 14px;
  font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:18px;
}
h1{
  font-family:"Playfair Display",Georgia,serif; font-weight:800;
  font-size:clamp(1.9rem,4.4vw,3rem); line-height:1.12; letter-spacing:-.01em;
}
h1 em{font-style:italic; color:var(--blue)}
.byline{margin-top:16px; color:var(--muted); font-size:.95rem}
.byline b{color:var(--coral)}
article{position:relative; padding:10px 0 70px}
.prose{
  background:var(--paper); border-radius:28px; box-shadow:var(--shadow);
  padding:clamp(26px,5vw,54px);
}
.prose h2{
  font-family:"Playfair Display",Georgia,serif; font-weight:700;
  font-size:clamp(1.35rem,2.8vw,1.8rem); line-height:1.2; margin:34px 0 12px;
}
.prose h2:first-child{margin-top:0}
.prose h2 em{color:var(--coral)}
.prose p{margin-bottom:16px; color:#2a2118}
.prose p b{color:var(--ink)}
.prose ul,.prose ol{margin:0 0 16px 22px}
.prose li{margin-bottom:8px}
.prose table{width:100%; border-collapse:collapse; margin:18px 0 22px; font-size:.95rem}
.prose th{background:var(--ink); color:var(--paper); text-align:left; padding:10px 12px; font-size:.8rem; letter-spacing:.05em; text-transform:uppercase}
.prose td{border-bottom:1px solid var(--line); padding:10px 12px}
.prose .pull{
  font-family:"Playfair Display",Georgia,serif; font-style:italic; font-size:1.25rem;
  color:var(--blue); border-left:4px solid var(--coral); padding:6px 0 6px 18px; margin:24px 0;
}
.cta-box{
  background:var(--ink); color:var(--paper); border-radius:20px; padding:26px 28px; margin:30px 0 8px;
  position:relative; overflow:hidden;
}
.cta-box h3{font-family:"Playfair Display",Georgia,serif; font-size:1.3rem; margin-bottom:6px}
.cta-box h3 em{color:var(--coral-soft)}
.cta-box p{color:rgba(255,250,240,.8); font-size:.95rem; margin-bottom:16px}
.cta-box .pill-btn{background:var(--paper); color:var(--ink)!important}
.cta-box .pill-btn:hover{background:var(--coral-soft)}
.post-meta{font-size:.85rem; color:var(--muted); margin-top:20px}
/* blog index cards */
.post-card{
  display:block; background:var(--paper); border-radius:22px; box-shadow:0 10px 34px rgba(19,17,13,.10);
  padding:28px 30px; margin-bottom:22px; text-decoration:none; color:var(--ink);
  transition:transform .15s ease;
}
.post-card:hover{transform:translateY(-2px)}
.post-card .tag{display:inline-block; background:var(--cream-2); border-radius:999px; padding:3px 12px; font-size:.75rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--teal); margin-bottom:10px}
.post-card h2{font-family:"Playfair Display",Georgia,serif; font-size:1.4rem; line-height:1.25; margin-bottom:8px}
.post-card p{color:var(--muted); font-size:.97rem}
.post-card .read{color:var(--coral); font-weight:700; font-size:.9rem; margin-top:10px; display:inline-block}
footer{border-top:1px solid var(--line); padding:30px 0 44px; text-align:center; color:var(--muted); font-size:.9rem}
footer a{color:var(--muted)}