/* ══ BEAUTIFUL OBITUARY — BLOG ═══════════════════════════════════════════
   One stylesheet for the hub and every post. A real file rather than inline
   style blocks, because this has to carry ~32 articles: an inline copy per
   post is 32 places to change a margin, and 32 chances for them to drift.

   Tokens are the site's own, copied from index.html. The blog is a separate
   page family that must not look like one. */

:root{
  --white:#ffffff; --off-white:#f8f9fc; --warm-white:#f2f4f9; --mist:#e8ecf5;
  --sapphire:#1a3a6b; --sapphire-deep:#0f2347; --sapphire-mid:#2a5298;
  --sapphire-light:#4a72b8; --silver:#b8c4d4; --silver-bright:#d4dde8;
  --charcoal:#1c2333; --slate:#3a4a5c; --muted:#7a8a9e; --light-muted:#a8b4c4;
  --border:rgba(26,58,107,0.12); --border-silver:rgba(184,196,212,0.25);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:'Jost',sans-serif; font-weight:300; background:var(--off-white);
  color:var(--charcoal); overflow-x:hidden; -webkit-font-smoothing:antialiased;
}

/* ══ NAV — identical to index.html's, so the blog is not a different site ══ */
nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:0 72px; height:76px; display:flex; align-items:center; justify-content:space-between;
  background:rgba(248,249,252,0.95);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  border-bottom:1px solid var(--border-silver);
}
.nav-logo{display:flex;align-items:center;gap:14px;text-decoration:none;}
.logo-mark{width:36px;height:36px;display:flex;align-items:center;justify-content:center;position:relative;}
.logo-mark div{position:absolute;border-radius:50%;}
.lm1{inset:0;border:1px solid var(--sapphire-light);}
.lm2{inset:-5px;border:1px solid rgba(74,114,184,0.12);}
.lm3{inset:-10px;border:1px solid rgba(74,114,184,0.05);}
.logo-mark-star{color:var(--sapphire-mid);font-size:13px;position:relative;z-index:1;filter:drop-shadow(0 0 4px rgba(42,82,152,0.4));}
.logo-text-wrap{display:flex;flex-direction:column;}
.logo-name{font-family:'Cinzel',serif;font-size:13.5px;font-weight:500;letter-spacing:0.12em;color:var(--charcoal);}
.logo-name span{color:var(--sapphire-mid);}
.logo-sub{font-size:7.5px;letter-spacing:0.42em;text-transform:uppercase;color:var(--muted);margin-top:2px;}
.nav-links{display:flex;align-items:center;gap:44px;list-style:none;}
.nav-links a{font-family:'Cinzel',serif;font-size:9.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--slate);text-decoration:none;transition:color .3s;position:relative;padding-bottom:3px;}
.nav-links a:hover{color:var(--sapphire-mid);}
.nav-links a[aria-current="page"]{color:var(--sapphire-mid);}
.nav-links a[aria-current="page"]::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(to right,var(--sapphire-mid),var(--silver));}
.nav-right{display:flex;align-items:center;gap:28px;}
.nav-login{font-family:'Cinzel',serif;font-size:9.5px;letter-spacing:0.22em;text-transform:uppercase;color:var(--sapphire);border:1px solid var(--border);padding:11px 25px;border-radius:2px;text-decoration:none;transition:all .35s;}
.nav-login:hover{border-color:var(--sapphire-mid);background:var(--off-white);transform:translateY(-1px);}
.btn-nav{font-family:'Cinzel',serif;font-size:9.5px;letter-spacing:0.22em;text-transform:uppercase;color:var(--white);background:linear-gradient(135deg,var(--sapphire-mid),var(--sapphire-deep));padding:12px 26px;text-decoration:none;border-radius:2px;transition:all .35s;}
.btn-nav:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(26,58,107,0.35);}

/* ══ SHARED CHROME ══ */
.eyebrow{font-family:'Cinzel',serif;font-size:8px;letter-spacing:0.55em;text-transform:uppercase;color:var(--sapphire-light);}
.rule{width:40px;height:1px;background:linear-gradient(to right,transparent,var(--silver),transparent);margin:26px auto;}

/* ══ HUB ══
   Three background layers, painted back to front:
     3. a sapphire gradient  — the floor. If the photograph is missing or slow,
        the hero is still a deliberate sapphire panel rather than a white gap,
        and the white text on it stays readable either way.
     2. the photograph
     1. a scrim over it      — the photo runs bright at the horizon and dark at
        the base, so a flat overlay would either wash out the sky or bury the
        flowers. This is stronger top and bottom, lighter through the middle,
        which holds the headline without flattening the sunset behind it.

   The url() is relative to blog.css, not to the page including it, so the same
   path resolves from blog.html at the root and from blog/*.html alike. */
.blog-hero{
  padding:172px 24px 92px; text-align:center; position:relative; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(15,35,71,0.74) 0%, rgba(15,35,71,0.46) 42%, rgba(15,35,71,0.82) 100%),
    url('images/blog-hero-cornflowers.jpg') center 62% / cover no-repeat,
    linear-gradient(160deg, var(--sapphire-deep) 0%, var(--sapphire) 55%, var(--sapphire-mid) 100%);
}
.blog-hero-inner{position:relative;z-index:1;max-width:720px;margin:0 auto;}
.blog-hero .eyebrow{color:rgba(255,255,255,0.66);}
.blog-hero h1{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(34px,6vw,54px);line-height:1.15;margin:14px 0 0;color:var(--white);text-shadow:0 2px 24px rgba(4,12,28,0.4);}
.blog-hero h1 em{font-style:italic;color:var(--silver-bright);}
.blog-hero p{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:17px;line-height:1.8;color:rgba(255,255,255,0.8);margin-top:18px;text-shadow:0 1px 16px rgba(4,12,28,0.45);}

.blog-wrap{max-width:1080px;margin:0 auto;padding:64px 24px 96px;}
.cluster{margin-bottom:64px;}
.cluster-head{margin-bottom:26px;}
.cluster-head h2{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(24px,3.4vw,32px);color:var(--charcoal);margin-top:10px;}
.cluster-head p{font-size:14px;color:var(--muted);line-height:1.75;margin-top:8px;max-width:640px;}

.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;}
.post-card{
  display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--border-silver);border-radius:3px;padding:26px 28px;
  text-decoration:none;transition:all .35s;position:relative;
}
.post-card:hover{transform:translateY(-3px);box-shadow:0 16px 44px rgba(26,58,107,0.09);border-color:rgba(74,114,184,0.3);}
.post-card h3{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:21px;line-height:1.3;color:var(--charcoal);margin-bottom:9px;}
.post-card p{font-size:13.5px;line-height:1.7;color:var(--muted);flex:1;}
.post-meta{display:flex;gap:10px;align-items:center;margin-top:16px;font-family:'Cinzel',serif;font-size:7.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--light-muted);}
.post-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--silver);}

/* ══ ARTICLE ══ */
.article-head{padding:132px 24px 0;max-width:760px;margin:0 auto;text-align:center;}
.breadcrumb{font-family:'Cinzel',serif;font-size:8px;letter-spacing:0.2em;text-transform:uppercase;color:var(--light-muted);margin-bottom:18px;}
.breadcrumb a{color:var(--muted);text-decoration:none;}
.breadcrumb a:hover{color:var(--sapphire-mid);}
.article-head h1{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(30px,5.4vw,46px);line-height:1.18;color:var(--charcoal);margin-bottom:18px;}
.article-standfirst{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:18px;line-height:1.8;color:var(--muted);}
.byline{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:26px;font-family:'Cinzel',serif;font-size:8px;letter-spacing:0.2em;text-transform:uppercase;color:var(--light-muted);flex-wrap:wrap;}
.byline .dot{width:3px;height:3px;border-radius:50%;background:var(--silver);}

article{max-width:680px;margin:0 auto;padding:0 24px 40px;}
article h2{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(24px,3.4vw,31px);line-height:1.3;color:var(--charcoal);margin:48px 0 14px;}
article h3{font-family:'Cinzel',serif;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--sapphire-mid);margin:34px 0 12px;}
article p{font-size:16px;line-height:1.85;color:var(--slate);margin-bottom:18px;}
article a{color:var(--sapphire-mid);text-decoration:none;border-bottom:1px solid rgba(42,82,152,0.3);transition:border-color .3s;}
article a:hover{border-bottom-color:var(--sapphire-mid);}
article ul,article ol{margin:0 0 20px 22px;}
article li{font-size:16px;line-height:1.85;color:var(--slate);margin-bottom:9px;}
article strong{font-weight:400;color:var(--charcoal);}

/* A quiet aside, for the "what families actually do" notes that make these
   posts worth reading rather than skimmable. */
.note{background:var(--warm-white);border-left:2px solid var(--sapphire-light);padding:18px 22px;margin:26px 0;border-radius:0 3px 3px 0;}
.note p{font-size:15px;margin-bottom:0;color:var(--slate);}
.note p + p{margin-top:12px;}

/* Anything touching sudden death, suicide or crisis routes here rather than
   trying to be comprehensive. Deliberately visually distinct from .note. */
.support-box{background:#fdf6f0;border:1px solid rgba(160,106,42,0.25);padding:20px 24px;margin:30px 0;border-radius:3px;}
.support-box p{font-size:14.5px;line-height:1.75;color:var(--slate);margin-bottom:0;}
.support-box strong{color:#8a5a20;}

blockquote{margin:32px 0;padding-left:24px;border-left:2px solid var(--silver);}
blockquote p{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:20px;line-height:1.7;color:var(--charcoal);margin-bottom:0;}

/* The conversion block. Every post ends in one; the tone stays quiet because
   the reader is usually four days from a funeral, not shopping. */
.cta{background:linear-gradient(160deg,var(--sapphire-deep),var(--sapphire) 60%,var(--sapphire-mid));border-radius:4px;padding:40px 38px;margin:48px 0 8px;text-align:center;}
.cta h2{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:27px;color:var(--white);margin:0 0 10px;}
.cta p{font-size:14.5px;line-height:1.75;color:rgba(255,255,255,0.72);margin-bottom:22px;}
.cta a{
  display:inline-block;font-family:'Cinzel',serif;font-size:9.5px;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--sapphire-deep);background:var(--white);
  padding:14px 32px;border-radius:2px;text-decoration:none;border:none;transition:all .35s;
}
.cta a:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(0,0,0,0.22);}

.related{max-width:680px;margin:0 auto;padding:10px 24px 90px;}
.related h2{font-family:'Cinzel',serif;font-size:9px;letter-spacing:0.4em;text-transform:uppercase;color:var(--sapphire-light);margin-bottom:18px;}
.related ul{list-style:none;margin:0;}
.related li{margin-bottom:12px;}
.related a{font-family:'Cormorant Garamond',serif;font-size:18px;color:var(--charcoal);text-decoration:none;border-bottom:1px solid transparent;transition:all .3s;}
.related a:hover{color:var(--sapphire-mid);border-bottom-color:var(--silver);}

/* ══ FOOTER ══ */
.blog-foot{background:var(--sapphire-deep);padding:44px 24px;text-align:center;}
.blog-foot p{font-size:12.5px;color:rgba(255,255,255,0.5);line-height:1.8;}
.blog-foot a{color:rgba(255,255,255,0.8);text-decoration:none;border-bottom:1px solid rgba(255,255,255,0.2);}
.blog-foot a:hover{color:#fff;}

/* ══ MOBILE — same 760px breakpoint the rest of the site uses ══ */
@media (max-width:760px){
  nav{padding:0 16px;}
  .nav-links{display:none;}
  .logo-sub{display:none;}
  .logo-name{font-size:12px;}
  .nav-right{gap:8px;}
  .nav-login,.btn-nav{font-size:8.5px;letter-spacing:0.12em;padding:10px 13px;}
  .blog-hero{padding:110px 20px 46px;}
  .blog-wrap{padding:44px 18px 64px;}
  .post-grid{grid-template-columns:1fr;}
  .article-head{padding:104px 20px 0;}
  article,.related{padding-left:20px;padding-right:20px;}
  article p,article li{font-size:15.5px;}
  .cta{padding:32px 22px;}
}