/* ─── BLOG SHARED ─── */

/* Page-level blog wrapper to keep nav anchor offset working */
.blog-page section { scroll-margin-top: 86px; }

/* ─── BLOG HERO (compact) ─── */
#blog-hero {
  padding: 110px 0 30px;
  position: relative;
  overflow: hidden;
}
#blog-hero .blob-container .b1 {
  width: 320px; height: 320px; background: var(--peach2); opacity: 0.28;
  top: 30px; right: -110px;
  border-radius: 60% 40% 50% 50% / 60% 50% 50% 40%;
}
#blog-hero .blob-container .b2 {
  width: 220px; height: 220px; background: var(--rose); opacity: 0.32;
  top: 80px; left: -80px;
}
#blog-hero .inner { display: flex; flex-direction: column; gap: 20px; align-items: center; text-align: center; }
.blog-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(107,77,107,0.12); border-radius: 50px;
  padding: 6px 14px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.08em;
  color: var(--violet); text-transform: uppercase;
}
.blog-hero-eyebrow::before {
  content: ""; width: 6px; height: 6px; flex: 0 0 6px;
  border-radius: 50%; background: var(--rose-deep);
}
.blog-hero-h1 {
  font-family: 'Josefin Sans', sans-serif;
  font-size: clamp(34px, 7vw, 60px);
  font-weight: 700; line-height: 1.02;
  letter-spacing: -0.035em; color: var(--violet);
  max-width: 880px;
}
.blog-hero-h1 em { font-style: normal; color: var(--rose-deep); }
.blog-hero-sub { font-size: 16px; line-height: 1.6; color: var(--brown); opacity: 0.85; max-width: 580px; }
.blog-hero-cta { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 6px; }
.blog-hero-cta .fine-print { font-size: 12px; color: var(--brown); opacity: 0.6; }

@media (min-width: 760px) {
  #blog-hero { padding: 140px 0 36px; }
  .blog-hero-sub { font-size: 18px; }
}

/* ─── FILTER BAR ─── */
#filter-bar {
  padding: 20px 0 6px;
  position: sticky; top: 60px; z-index: 50;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 70%, rgba(250,238,232,0) 100%);
}
@media (min-width: 760px) { #filter-bar { top: 78px; } }

.filter-top-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.filter-top-row .search-wrap { flex: 1; min-width: 0; }
.filter-top-row .sort-wrap { flex-shrink: 0; }

.filter-bottom-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.filter-bottom-row .chip-strip-wrap { flex: 1; min-width: 0; }
.filter-bottom-row .chip-more-btn { flex-shrink: 0; }
.search-wrap {
  position: relative; flex: 1;
}
.search-wrap svg {
  position: absolute; left: 16px; top: 50%;
  transform: translateY(-50%);
  color: var(--violet); opacity: 0.55;
  pointer-events: none;
}
.search-input {
  width: 100%;
  min-height: 46px;
  padding: 10px 16px 10px 44px;
  font-family: 'Work Sans', sans-serif;
  font-size: 15px;
  color: var(--dark);
  background: rgba(255,255,255,0.65);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(208,184,168,0.5);
  border-radius: 50px;
  outline: none;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.search-input::placeholder { color: var(--brown); opacity: 0.6; }
.search-input:focus {
  border-color: var(--violet);
  background: rgba(255,255,255,0.85);
  box-shadow: 0 0 0 4px rgba(107,77,107,0.1);
}
.search-clear {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border: 0; background: rgba(133,88,111,0.12);
  border-radius: 50%; color: var(--violet);
  cursor: pointer; display: none;
  align-items: center; justify-content: center;
  transition: background 0.2s, transform 0.15s;
}
.search-clear:hover { background: rgba(133,88,111,0.22); transform: translateY(-50%) scale(1.05); }
.search-wrap.has-text .search-clear { display: inline-flex; }

/* ─── Chip strip with edge fades ─── */
.chip-strip-wrap {
  position: relative;
  min-width: 0;
}
.chip-strip-wrap::before,
.chip-strip-wrap::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 24px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.chip-strip-wrap::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg) 0%, rgba(250,238,232,0) 100%);
}
.chip-strip-wrap::after {
  right: 0;
  background: linear-gradient(-90deg, var(--bg) 0%, rgba(250,238,232,0) 100%);
}
.chip-strip-wrap.fade-left::before { opacity: 1; }
.chip-strip-wrap.fade-right::after { opacity: 1; }

/* ─── "More" / All-categories button + popover ─── */
.chip-more-btn {
  display: inline-flex; align-items: center; gap: 8px;
  flex-shrink: 0;
  min-height: 40px;
  padding: 8px 16px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 13px; font-weight: 600;
  color: var(--violet);
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(208,184,168,0.5);
  border-radius: 50px;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.2s, color 0.2s, transform 0.15s, border-color 0.2s;
}
.chip-more-btn:hover { background: rgba(255,255,255,0.95); transform: translateY(-1px); }
.chip-more-btn[aria-expanded="true"] {
  background: var(--violet); color: white; border-color: var(--violet);
}
.chip-popover {
  position: absolute;
  left: 20px; right: 20px;
  top: calc(100% - 4px);
  z-index: 60;
  padding: 18px;
  background: rgba(250,238,232,0.94);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  backdrop-filter: blur(18px) saturate(1.08);
  border: 1px solid rgba(133,88,111,0.16);
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(46,6,26,0.16);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.chip-popover.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.chip-popover-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.chip-popover-title {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--violet); opacity: 0.85;
}
.chip-popover-close {
  width: 28px; height: 28px;
  border: 0; background: rgba(133,88,111,0.12);
  color: var(--violet);
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.chip-popover-close:hover { background: rgba(133,88,111,0.22); }
.chip-popover-grid {
  display: flex; flex-wrap: wrap; gap: 8px;
}
@media (min-width: 600px) {
  .chip-popover { left: 32px; right: 32px; padding: 22px; }
}
@media (min-width: 760px) {
  .chip-popover {
    left: auto;
    right: 32px;
    max-width: 520px;
    min-width: 360px;
  }
}

/* ─── Sort dropdown ─── */
.sort-wrap {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(208,184,168,0.5);
  border-radius: 50px;
  padding: 4px 6px 4px 14px;
  min-height: 40px;
  flex-shrink: 0;
  transition: border-color 0.2s, background 0.2s;
}
.sort-wrap:hover { background: rgba(255,255,255,0.9); }
.sort-wrap .sort-icon { color: var(--violet); opacity: 0.85; flex-shrink: 0; }
.sort-wrap .sort-label {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--violet); opacity: 0.85;
  display: none;
}
.sort-wrap select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  font-family: 'Work Sans', sans-serif;
  font-size: 14px; color: var(--dark); font-weight: 500;
  padding: 6px 26px 6px 4px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b4d6b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
  outline: none;
  max-width: 130px;
  text-overflow: ellipsis;
}
.sort-wrap select:focus { color: var(--violet); }
.sort-wrap select option { color: var(--dark); }

.category-row {
  display: flex; gap: 8px;
  overflow-x: auto;
  padding: 4px 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: smooth;
  flex: 1;
  min-width: 0;
}
.category-row::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  flex-shrink: 0;
  min-height: 36px;
  padding: 7px 14px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 13px; font-weight: 600;
  color: var(--violet);
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(208,184,168,0.5);
  border-radius: 50px;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}
.chip::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--rose-deep);
  transition: background 0.2s, transform 0.2s;
}
.chip:hover { background: rgba(255,255,255,0.85); transform: translateY(-1px); }
.chip.active {
  background: var(--violet); color: white; border-color: var(--violet);
}
.chip.active::before { background: var(--rose); transform: scale(1.2); }
.chip .count { opacity: 0.55; font-weight: 400; }

@media (min-width: 760px) {
  .filter-top-row .search-wrap { flex: 0 1 360px; }
  .sort-wrap .sort-label { display: inline; }
}

/* ─── TILE CTA (single grid-cell card variant) ─── */
.post-card.cta-tile {
  position: relative;
  background: rgba(255,255,255,0.5);
  overflow: hidden;
}
.cta-tile-cover {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(155deg, #6b4d6b 0%, #4a2f4a 65%, #2a1b2a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18% 14%;
  text-align: center;
}
.cta-tile-badge {
  /* matches .category-badge position; override accent palette */
  color: var(--violet-deep) !important;
  background: rgba(246,196,192,0.92) !important;
  border-color: rgba(217,139,135,0.5) !important;
}
.cta-tile-badge::before {
  background: var(--violet) !important;
}
.cta-tile-badge svg {
  color: var(--rose-deep);
}
.cta-tile-blob {
  position: absolute;
  top: -90px; right: -80px;
  width: 240px; height: 240px;
  background: var(--rose);
  opacity: 0.32;
  border-radius: 60% 40% 50% 50% / 60% 50% 50% 40%;
  filter: blur(8px);
  z-index: 0;
  pointer-events: none;
}
.cta-tile-quote {
  position: relative;
  z-index: 1;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: 1.4;
  color: white;
  text-shadow: 0 2px 18px rgba(46,6,26,0.4);
}
.cta-tile-quote::before {
  content: "“";
  display: block;
  font-size: 38px;
  line-height: 0.4;
  color: var(--rose);
  opacity: 0.62;
  margin-bottom: 14px;
}
.cta-tile-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cta-tile-h em { font-style: normal; color: var(--violet); }
.cta-tile-link {
  margin-top: auto;
  padding-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--violet);
  transition: gap 0.2s;
}
.post-card.cta-tile:hover .cta-tile-link { gap: 12px; color: var(--violet-deep); }

/* ─── FEATURED POST ─── */
#featured { padding: 18px 0 50px; }
.featured-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--violet); opacity: 0.88;
  margin-bottom: 16px;
}
.featured-label::after {
  content: ""; height: 1px; width: 64px;
  background: linear-gradient(90deg, rgba(107,77,107,0.4), transparent);
}
.featured-card {
  position: relative;
  display: grid; grid-template-columns: 1fr; gap: 0;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(208,184,168,0.45);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(46,6,26,0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  text-decoration: none; color: inherit;
}
.featured-card:hover { transform: translateY(-4px); box-shadow: 0 24px 64px rgba(46,6,26,0.12); }
.featured-cover {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--peach) 0%, var(--rose) 60%, var(--violet) 130%);
  overflow: hidden;
}
.featured-cover svg { width: 100%; height: 100%; display: block; }
.featured-body {
  padding: 28px 24px 32px;
  display: flex; flex-direction: column; gap: 14px;
}
.featured-body .post-meta { margin-top: auto; }
.featured-title {
  font-family: 'Josefin Sans', sans-serif;
  font-size: clamp(26px, 5vw, 40px);
  line-height: 1.06; letter-spacing: -0.025em;
  font-weight: 700; color: var(--dark);
}
.featured-title em { font-style: normal; color: var(--violet); }
.featured-excerpt {
  font-size: 15px; line-height: 1.6;
  color: var(--brown); opacity: 0.85;
}

@media (min-width: 760px) {
  .featured-card { grid-template-columns: 1.1fr 1fr; }
  .featured-cover { aspect-ratio: auto; min-height: 380px; }
  .featured-body { padding: 44px 44px 40px; gap: 18px; }
}

/* ─── POST GRID & CARDS ─── */
#posts { padding: 18px 0 70px; }
.posts-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 26px; gap: 16px; flex-wrap: wrap;
}
.posts-head h2 {
  font-family: 'Josefin Sans', sans-serif;
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 700; color: var(--dark); letter-spacing: -0.02em;
}
.posts-head h2 em { font-style: normal; color: var(--violet); }
.posts-head .count-pill {
  font-size: 13px; color: var(--brown); opacity: 0.7;
}
.posts-head .count-pill strong { color: var(--violet); font-weight: 600; }

.posts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
@media (min-width: 600px) { .posts-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 980px) { .posts-grid { grid-template-columns: repeat(3, 1fr); } }

/* In-article photograph, emitted by the `photo` shortcode. Fixed 3:2 so a portrait original and a
   landscape one occupy the same block and the column never jumps; the intrinsic width/height on the
   img reserves the space before the file arrives. */
.prose figure.prose-figure { margin: 30px 0; }
.prose-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  background: rgba(208,184,168,0.22);
}
.prose-figure figcaption {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--brown);
  opacity: 0.9;
}
.prose-figure .figure-credit {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  letter-spacing: 0.01em;
  opacity: 0.6;
}
.prose-figure .figure-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Server-rendered article index inside #postsGrid. Only ever seen by a crawler that does not run
   JS, or by a human in the moment before blog-listing.js replaces the container. Styled well enough
   to be readable rather than to match the cards. */
.posts-fallback {
  grid-column: 1 / -1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
}
.posts-fallback li {
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(208,184,168,0.45);
}
.posts-fallback li:last-child { border-bottom: 0; padding-bottom: 0; }
.posts-fallback a {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 19px; line-height: 1.2; letter-spacing: -0.018em;
  font-weight: 700; color: var(--dark);
  text-decoration: none;
}
.posts-fallback a:hover { text-decoration: underline; }
.posts-fallback p { margin: 6px 0 4px; font-size: 14px; line-height: 1.55; color: var(--brown); opacity: 0.82; }
.posts-fallback span { font-size: 12px; color: var(--brown); opacity: 0.7; }

.post-card {
  display: flex; flex-direction: column;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(208,184,168,0.45);
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(46,6,26,0.1);
  border-color: rgba(208,184,168,0.7);
}
.post-cover {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--peach);
}
.post-cover svg { width: 100%; height: 100%; display: block; }
.post-body {
  padding: 20px 22px 22px;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}
.post-body .post-meta { margin-top: auto; padding-top: 4px; }
.post-title {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 19px; line-height: 1.2; letter-spacing: -0.018em;
  font-weight: 700; color: var(--dark);
}
.post-excerpt {
  font-size: 14px; line-height: 1.55;
  color: var(--brown); opacity: 0.82;
}

/* Category badge on cover */
.category-badge {
  position: absolute; top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--violet);
  background: rgba(255,255,255,0.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(208,184,168,0.4);
  border-radius: 50px;
  z-index: 2;
}
.category-badge::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--rose-deep);
}

/* Post meta row */
.post-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--brown); opacity: 0.7;
  flex-wrap: wrap;
}
.post-meta .dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; opacity: 0.6;
  display: inline-block;
}
.post-meta time { font-variant-numeric: tabular-nums; }

/* Empty state */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--brown);
}
.empty-state h3 {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 22px; font-weight: 700; color: var(--violet);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.empty-state p { font-size: 14px; opacity: 0.8; line-height: 1.6; }
.empty-state button {
  margin-top: 18px;
}

/* ─── INLINE APP CTA (within posts grid) ─── */
.inline-app-cta {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: linear-gradient(135deg, rgba(246,196,192,0.5) 0%, rgba(244,193,164,0.4) 100%);
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(208,184,168,0.4);
}
.inline-app-cta-body {
  padding: 32px 26px 30px;
  display: flex; flex-direction: column; gap: 14px;
  align-items: flex-start;
}
.inline-app-cta h3 {
  font-family: 'Josefin Sans', sans-serif;
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 700; line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--violet);
}
.inline-app-cta h3 em { font-style: normal; color: var(--rose-deep); }
.inline-app-cta p { font-size: 15px; color: var(--brown); line-height: 1.55; max-width: 480px; }
.inline-app-cta .phone-mini {
  position: relative;
  align-self: center;
  width: clamp(150px, 35vw, 190px);
  margin-top: 4px;
  padding: 6px;
  border-radius: 13.2% / 6.3%;
  background: linear-gradient(150deg, #2a221d, #51443b);
  box-shadow: 0 16px 36px rgba(46,6,26,0.18);
}
.inline-app-cta .phone-mini-screen {
  aspect-ratio: 393 / 852;
  background:
    radial-gradient(circle at 28% 22%, rgba(246,196,192,0.7), transparent 55%),
    radial-gradient(circle at 78% 78%, rgba(107,77,107,0.5), transparent 60%),
    var(--bg);
  border-radius: 10.8% / 5.1%;
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 16% 14%;
}
.inline-app-cta .phone-mini-screen::before {
  content: ""; position: absolute;
  top: 1.35%; left: 50%; transform: translateX(-50%);
  width: 30%; height: 2.65%;
  background: #1a1410; border-radius: 50px; z-index: 2;
}
.inline-app-cta .phone-mini-quote {
  font-family: 'Playfair Display', serif;
  font-style: italic; font-weight: 700;
  font-size: clamp(12px, 2.6vw, 14px);
  line-height: 1.35; color: var(--violet-deep);
  position: relative; z-index: 1;
}
.inline-app-cta .phone-mini-quote::before {
  content: "“"; display: block;
  font-size: 36px; color: var(--rose-deep); opacity: 0.5;
  line-height: 0.4; margin-bottom: 12px;
}
.inline-app-cta-visual {
  display: flex; justify-content: center; align-items: center;
  padding: 24px 26px 32px;
}

@media (min-width: 760px) {
  .inline-app-cta { grid-template-columns: 1.2fr 1fr; }
  .inline-app-cta-body { padding: 40px 40px 40px; gap: 18px; }
  .inline-app-cta-visual { padding: 32px; }
}

/* ─── NEWSLETTER ─── */
#newsletter {
  padding: 50px 0 70px;
}
.newsletter-card {
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(208,184,168,0.45);
  border-radius: 26px;
  padding: 36px 26px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.newsletter-card::before {
  content: ""; position: absolute;
  width: 280px; height: 280px;
  top: -120px; right: -100px;
  background: var(--peach2); opacity: 0.3;
  border-radius: 60% 40% 50% 50% / 60% 50% 50% 40%;
  filter: blur(20px);
  z-index: 0;
}
.newsletter-card > * { position: relative; z-index: 1; }
.newsletter-card h3 {
  font-family: 'Josefin Sans', sans-serif;
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 700; color: var(--violet);
  letter-spacing: -0.025em;
  margin-bottom: 8px;
}
.newsletter-card h3 em { font-style: normal; color: var(--rose-deep); }
.newsletter-card p {
  font-size: 14px; line-height: 1.6;
  color: var(--brown); opacity: 0.85;
  max-width: 460px; margin: 0 auto 18px;
}
.newsletter-form {
  display: flex; flex-direction: column; gap: 10px;
  max-width: 460px; margin: 0 auto;
}
.newsletter-form input[type="email"] {
  min-height: 46px;
  padding: 10px 16px;
  font-family: 'Work Sans', sans-serif;
  font-size: 15px; color: var(--dark);
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(208,184,168,0.5);
  border-radius: 50px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.newsletter-form input[type="email"]:focus {
  border-color: var(--violet);
  box-shadow: 0 0 0 4px rgba(107,77,107,0.1);
}
.newsletter-form button {
  min-height: 46px;
  padding: 11px 24px;
  background: var(--violet); color: var(--bg);
  border: 0;
  border-radius: 50px;
  font-family: 'Work Sans', sans-serif;
  font-size: 15px; font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.newsletter-form button:hover {
  background: var(--violet-deep);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(74,47,74,0.25);
}
.newsletter-consent {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12px; color: var(--brown); opacity: 0.8;
  text-align: left;
  line-height: 1.5;
}
.newsletter-consent input {
  flex-shrink: 0;
  margin-top: 2px;
  width: 16px; height: 16px;
  accent-color: var(--violet);
  cursor: pointer;
}
.newsletter-consent a { color: var(--violet); text-decoration: underline; }
.newsletter-success {
  display: none;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 16px; font-weight: 600;
  color: var(--violet);
  padding: 16px 0;
}
.newsletter-success.show { display: block; }
.newsletter-form.hidden { display: none; }

@media (min-width: 600px) {
  .newsletter-card { padding: 48px 40px; }
  .newsletter-form { flex-direction: row; }
  .newsletter-form input[type="email"] { flex: 1; }
}

/* ─── POPULAR POSTS RAIL ─── */
#popular {
  padding: 24px 0 60px;
}
.popular-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 22px; flex-wrap: wrap; gap: 12px;
}
.popular-head h2 {
  font-family: 'Josefin Sans', sans-serif;
  font-size: clamp(22px, 4vw, 28px);
  font-weight: 700; color: var(--dark); letter-spacing: -0.02em;
}
.popular-head h2 em { font-style: normal; color: var(--violet); }
.popular-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 760px) { .popular-list { grid-template-columns: repeat(2, 1fr); } }
.popular-item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px;
  background: rgba(255,255,255,0.42);
  border: 1px solid rgba(208,184,168,0.4);
  border-radius: 18px;
  text-decoration: none; color: inherit;
  transition: background 0.2s, transform 0.2s, border-color 0.2s;
}
.popular-item:hover {
  background: rgba(255,255,255,0.75);
  transform: translateX(2px);
  border-color: rgba(208,184,168,0.7);
}
.popular-rank {
  font-family: 'Playfair Display', serif; font-style: italic; font-weight: 700;
  font-size: 32px; color: var(--violet); opacity: 0.32;
  line-height: 1; flex-shrink: 0; width: 30px; text-align: center;
}
.popular-body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.popular-body h4 {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 15px; font-weight: 600; color: var(--dark);
  line-height: 1.25; letter-spacing: -0.012em;
}
.popular-body .post-meta { font-size: 11px; }

/* ─── PAGINATION ─── */
#pagination { padding: 12px 0 48px; }
.pagination-wrap {
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.page-btn {
  min-width: 42px; min-height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 12px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 14px; font-weight: 600;
  color: var(--brown);
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(208,184,168,0.4);
  border-radius: 50px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.page-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.85);
  color: var(--violet);
  transform: translateY(-1px);
}
.page-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.page-btn.active {
  background: var(--violet); color: white; border-color: var(--violet);
}

/* ─── BLOG DETAIL ─── */
#article-head {
  padding: 110px 0 28px;
  position: relative;
  overflow: hidden;
}
#article-head .blob-container .b1 {
  width: 280px; height: 280px; background: var(--peach2); opacity: 0.25;
  top: 40px; right: -100px;
  border-radius: 60% 40% 50% 50% / 60% 50% 50% 40%;
}
#article-head .blob-container .b2 {
  width: 180px; height: 180px; background: var(--rose); opacity: 0.3;
  top: 140px; left: -60px;
}

.breadcrumbs {
  position: static;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  padding: 0;
  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
  font-size: 12px; color: var(--brown); opacity: 0.75;
  margin-bottom: 18px;
  min-width: 0;
  justify-content: flex-start;
}
.breadcrumbs a {
  color: var(--violet); text-decoration: none; opacity: 0.85;
  flex-shrink: 0;
}
.breadcrumbs a:hover { opacity: 1; text-decoration: underline; }
.breadcrumbs svg { color: var(--brown); opacity: 0.55; flex-shrink: 0; }
.breadcrumbs .current {
  color: var(--dark);
  opacity: 0.8;
  display: inline-block;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  min-width: 0;
}
@media (min-width: 760px) {
  .breadcrumbs .current { max-width: 280px; }
}

.article-category {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--violet);
  background: rgba(107,77,107,0.12);
  border-radius: 50px;
  margin-bottom: 18px;
}
.article-category::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--rose-deep);
}

.article-h1 {
  font-family: 'Josefin Sans', sans-serif;
  font-size: clamp(30px, 5.5vw, 52px);
  font-weight: 700; line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--violet);
  margin-bottom: 22px;
  max-width: 880px;
}
.article-h1 em { font-style: normal; color: var(--rose-deep); }

.article-meta-row {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
  font-size: 13px; color: var(--brown);
  margin-bottom: 30px;
}
.article-meta-row .author {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 500;
}
.article-meta-row .author-name { color: var(--dark); font-weight: 600; }
.article-meta-row .dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; opacity: 0.5;
}
.article-meta-row .meta-item { display: inline-flex; align-items: center; gap: 6px; opacity: 0.78; }
.article-meta-row .meta-item svg { color: var(--violet); opacity: 0.7; }

.article-hero-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--peach) 0%, var(--rose) 60%, var(--violet) 130%);
  overflow: hidden;
  position: relative;
  margin: 6px 0 0;
  border: 1px solid rgba(208,184,168,0.4);
}
.article-hero-image svg,
.article-hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The credit sits under the hero, not over it. Overlaid white text was legible on the two dark
   covers and failed contrast on the pale ones, and no single overlay colour works across a set that
   runs from a night sky to pale peach. Below the image it reads on every one of them and matches the
   in-body figure credit. */
.article-hero-image.has-photo { aspect-ratio: auto; overflow: visible; border: 0; border-radius: 0; background: none; }
.article-hero-image.has-photo img {
  border-radius: 22px;
  border: 1px solid rgba(208,184,168,0.4);
  aspect-ratio: 16 / 9;
}
.hero-credit {
  display: block;
  margin-top: 7px;
  font-size: 11.5px; letter-spacing: 0.01em;
  color: var(--brown); opacity: 0.6;
  text-align: right;
}
.hero-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.hero-credit a:hover { opacity: 1; }

/* Photographic card cover. Sources are 16:9; .post-cover and .featured-cover are 16:10, so the
   crop happens here rather than in nine separate files. */
.post-cover img.cover-photo,
.featured-cover img.cover-photo { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (min-width: 760px) {
  #article-head { padding: 140px 0 36px; }
}

/* ─── ARTICLE BODY + TOC ─── */
#article-body {
  padding: 36px 0 50px;
}
.article-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
@media (min-width: 980px) {
  .article-layout {
    grid-template-columns: 220px 1fr;
    gap: 56px;
  }
}

.toc {
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
}
@media (min-width: 980px) {
  .toc {
    position: sticky; top: 100px;
    align-self: start;
    padding: 18px;
    background: rgba(255,255,255,0.4);
    border: 1px solid rgba(208,184,168,0.4);
    border-radius: 18px;
  }
}
.toc-label {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--violet); opacity: 0.85;
  margin-bottom: 12px;
}
.toc ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.toc li.h3 { padding-left: 12px; }
.toc a {
  display: block;
  padding: 7px 10px;
  border-radius: 10px;
  color: var(--brown); opacity: 0.78;
  text-decoration: none;
  font-size: 13.5px;
  line-height: 1.4;
  transition: background 0.2s, color 0.2s, opacity 0.2s;
  border-left: 2px solid transparent;
}
.toc a:hover { background: rgba(255,255,255,0.6); opacity: 1; color: var(--violet); }
.toc a.active {
  background: rgba(107,77,107,0.1);
  color: var(--violet);
  opacity: 1;
  font-weight: 500;
  border-left-color: var(--violet);
}
.toc-mobile-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 14px 18px;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(208,184,168,0.4);
  border-radius: 16px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 14px; font-weight: 600; color: var(--violet);
  letter-spacing: 0.04em;
  cursor: pointer;
  text-transform: uppercase;
}
.toc-mobile-toggle .chev {
  transition: transform 0.25s;
}
.toc.open .toc-mobile-toggle .chev { transform: rotate(180deg); }
.toc-mobile-list {
  margin-top: 10px;
  padding: 14px;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(208,184,168,0.4);
  border-radius: 16px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.25s ease, margin-top 0.25s ease, padding 0.25s ease;
}
.toc.open .toc-mobile-list { max-height: 600px; opacity: 1; }
@media (min-width: 980px) {
  .toc-mobile-toggle { display: none; }
  .toc-mobile-list { display: block; max-height: none; opacity: 1; padding: 0; background: transparent; border: 0; margin: 0; }
}

/* Article prose */
.prose {
  max-width: 720px;
  color: var(--dark);
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
}
.prose .lede {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(19px, 3vw, 22px);
  line-height: 1.5;
  color: var(--mauve);
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(133,88,111,0.18);
}
.prose p { margin-bottom: 22px; color: var(--darkest); opacity: 0.92; }
.prose p:last-child { margin-bottom: 0; }
.prose h2 {
  font-family: 'Josefin Sans', sans-serif;
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 700; line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--violet);
  margin-top: 48px; margin-bottom: 16px;
  scroll-margin-top: 100px;
}
.prose h2:first-child { margin-top: 0; }
.prose h2 em { font-style: normal; color: var(--rose-deep); }
.prose h3 {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 22px;
  font-weight: 600; line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--dark);
  margin-top: 36px; margin-bottom: 12px;
  scroll-margin-top: 100px;
}
.prose ul, .prose ol {
  margin: 0 0 22px;
  padding-left: 0;
  list-style: none;
}
.prose ul li, .prose ol li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  line-height: 1.6;
  color: var(--darkest);
  opacity: 0.92;
}
.prose ul li::before {
  content: "";
  position: absolute; left: 4px; top: 11px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rose-deep);
}
.prose ol { counter-reset: ol-counter; }
.prose ol li { counter-increment: ol-counter; }
.prose ol li::before {
  content: counter(ol-counter);
  position: absolute; left: 0; top: 0;
  width: 22px; height: 22px;
  background: rgba(107,77,107,0.14);
  color: var(--violet);
  border-radius: 50%;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.prose blockquote {
  position: relative;
  margin: 32px 0;
  padding: 26px 30px 26px 56px;
  background: rgba(255,255,255,0.5);
  border-radius: 20px;
  border: 1px solid rgba(208,184,168,0.45);
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.45;
  color: var(--violet-deep);
}
.prose blockquote::before {
  content: "“";
  position: absolute;
  top: 8px; left: 18px;
  font-family: 'Playfair Display', serif;
  font-size: 64px;
  font-weight: 700;
  color: var(--rose-deep);
  opacity: 0.45;
  line-height: 1;
}
.prose blockquote cite {
  display: block;
  font-family: 'Work Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  color: var(--brown);
  opacity: 0.8;
  margin-top: 14px;
  letter-spacing: 0.04em;
}
.prose blockquote cite::before { content: "— "; }
.prose .figure {
  margin: 32px 0;
}
.prose .figure-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--peach), var(--rose));
  border: 1px solid rgba(208,184,168,0.4);
}
.prose .figure-caption {
  margin-top: 10px;
  font-family: 'Work Sans', sans-serif;
  font-size: 13px;
  color: var(--brown);
  opacity: 0.7;
  text-align: center;
  font-style: italic;
}

/* Inline CTA blocks within prose */
.prose-cta {
  margin: 36px 0;
  padding: 26px 24px;
  background: linear-gradient(135deg, rgba(246,196,192,0.45) 0%, rgba(244,193,164,0.35) 100%);
  border: 1px solid rgba(208,184,168,0.4);
  border-radius: 22px;
  display: flex; flex-direction: column; gap: 14px;
  align-items: flex-start;
}
.prose-cta h4 {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--violet);
  line-height: 1.2;
}
.prose-cta h4 em { font-style: normal; color: var(--rose-deep); }
.prose-cta p {
  font-size: 14px; line-height: 1.55;
  color: var(--brown);
  margin: 0;
  opacity: 0.9;
}
.prose-cta .gp-badge { width: clamp(160px, 40vw, 190px); margin: 0; }

.prose-cta-visual {
  margin: 36px 0;
  padding: 28px 24px;
  background: linear-gradient(135deg, var(--violet) 0%, var(--mauve) 100%);
  color: white;
  border-radius: 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  overflow: hidden;
  position: relative;
}
.prose-cta-visual::before {
  content: ""; position: absolute;
  width: 280px; height: 280px;
  background: var(--rose); opacity: 0.32;
  top: -120px; right: -100px;
  border-radius: 60% 40% 50% 50% / 60% 50% 50% 40%;
  filter: blur(10px);
  pointer-events: none;
}
.prose-cta-visual > * { position: relative; }
.prose-cta-visual h4 {
  font-family: 'Josefin Sans', sans-serif;
  font-size: clamp(22px, 4vw, 28px);
  font-weight: 700; line-height: 1.15;
  letter-spacing: -0.022em;
  color: white;
}
.prose-cta-visual h4 em { font-style: normal; color: var(--rose); }
.prose-cta-visual p { font-size: 14px; line-height: 1.6; opacity: 0.88; color: white; margin: 0; }
.prose-cta-visual .gp-badge { width: clamp(160px, 40vw, 190px); margin: 0; }
.prose-cta-visual-text {
  display: flex; flex-direction: column; gap: 14px;
  align-items: flex-start;
}
.prose-cta-visual .phone-mini {
  align-self: center;
  width: clamp(140px, 32vw, 170px);
  padding: 5px;
  border-radius: 13.2% / 6.3%;
  background: linear-gradient(150deg, #2a221d, #51443b);
  box-shadow: 0 16px 36px rgba(0,0,0,0.28);
}
.prose-cta-visual .phone-mini-screen {
  aspect-ratio: 393 / 852;
  background:
    radial-gradient(circle at 26% 22%, rgba(246,196,192,0.7), transparent 55%),
    radial-gradient(circle at 78% 80%, rgba(107,77,107,0.55), transparent 60%),
    var(--bg);
  border-radius: 10.8% / 5.1%;
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 16% 12%;
}
.prose-cta-visual .phone-mini-screen::before {
  content: ""; position: absolute;
  top: 1.35%; left: 50%; transform: translateX(-50%);
  width: 30%; height: 2.65%;
  background: #1a1410; border-radius: 50px; z-index: 2;
}
.prose-cta-visual .phone-mini-quote {
  font-family: 'Playfair Display', serif;
  font-style: italic; font-weight: 700;
  font-size: 13px; line-height: 1.4;
  color: var(--violet-deep);
}
@media (min-width: 600px) {
  .prose-cta-visual { grid-template-columns: 1.3fr 1fr; padding: 36px 32px; gap: 28px; }
  .prose-cta { flex-direction: row; align-items: center; padding: 28px 32px; gap: 24px; }
  .prose-cta .gp-badge { margin-left: auto; flex-shrink: 0; }
}

/* ─── FAQ in article ─── */
.article-faq {
  margin: 50px 0 0;
}
.article-faq-head h2 {
  font-family: 'Josefin Sans', sans-serif;
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 700; color: var(--violet);
  letter-spacing: -0.025em;
  margin-bottom: 18px;
}
.article-faq-head h2 em { font-style: normal; color: var(--rose-deep); }

/* Standalone content pages (/editorial-standards/) reuse the article styles but have no table of
   contents column, so without this the text hugs the left edge of the 1180px container. */
.page-narrow { max-width: 720px; margin: 0 auto; }

/* ─── TABLES IN PROSE ─── */
/* Wide content scrolls inside its own container rather than clipping. Without the wrapper a
   four-column table loses its last column entirely at 390px, which is where most of this
   traffic reads. Wrap any prose table in <div class="table-scroll">. */
/* Grid items default to min-width:auto, so without this the table widens .prose past the column
   and the scroll container never engages. */
.article-layout > * { min-width: 0; }
.prose { min-width: 0; }
.prose .table-scroll {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  margin: 26px 0;
  border: 1px solid rgba(208,184,168,0.45);
  border-radius: 14px;
  background: rgba(255,255,255,0.45);
}
.prose table {
  border-collapse: collapse;
  width: 100%;
  min-width: 560px;
  font-size: 15px;
  line-height: 1.55;
}
.prose thead th {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--violet);
  text-align: left;
  vertical-align: bottom;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(208,184,168,0.55);
}
.prose tbody th,
.prose tbody td {
  padding: 13px 16px;
  vertical-align: top;
  border-bottom: 1px solid rgba(208,184,168,0.3);
}
.prose tbody tr:last-child th,
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody td:first-child,
.prose tbody th:first-child { color: var(--dark); font-weight: 500; }

/* ─── SHARE BUTTONS ─── */
#share {
  padding: 24px 0 8px;
}
.share-row {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
}
.share-row .label {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--violet); opacity: 0.85;
}
.share-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px;
  padding: 9px 18px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(208,184,168,0.5);
  border-radius: 50px;
  font-family: 'Work Sans', sans-serif;
  font-size: 14px; font-weight: 500;
  color: var(--violet);
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, color 0.2s;
}
.share-btn:hover {
  background: var(--violet); color: white;
  transform: translateY(-1px);
}
.share-btn svg { transition: transform 0.2s; }
.share-btn:hover svg { transform: scale(1.08); }
.share-btn.copied {
  background: var(--rose);
  color: var(--violet-deep);
  border-color: var(--rose-deep);
}

/* ─── RELATED POSTS ─── */
#related {
  padding: 50px 0 30px;
}
.related-head {
  text-align: center;
  margin-bottom: 28px;
}
.related-head .section-label { display: inline-block; }
.related-head h2 {
  font-family: 'Josefin Sans', sans-serif;
  font-size: clamp(26px, 4.5vw, 36px);
  font-weight: 700; color: var(--dark); letter-spacing: -0.025em;
  margin-top: 8px;
}
.related-head h2 em { font-style: normal; color: var(--violet); }
.related-grid {
  display: grid; grid-template-columns: 1fr; gap: 22px;
}
@media (min-width: 760px) { .related-grid { grid-template-columns: repeat(3, 1fr); } }

/* ─── FINAL CTA on detail (shared with landing #cta but variant) ─── */
#article-final-cta {
  padding: 70px 0 80px;
  position: relative;
  overflow: hidden;
}
#article-final-cta .blob-container .b1 {
  width: 380px; height: 380px;
  background: var(--rose); opacity: 0.22;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  filter: blur(20px);
}
#article-final-cta .inner {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 18px;
  position: relative; z-index: 1;
}
#article-final-cta h2 {
  font-family: 'Josefin Sans', sans-serif;
  font-size: clamp(30px, 6vw, 50px);
  font-weight: 700; line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--violet);
}
#article-final-cta h2 em { font-style: normal; color: var(--rose-deep); }
#article-final-cta p {
  max-width: 520px;
  font-size: 16px; line-height: 1.6;
  color: var(--brown); opacity: 0.85;
}

/* ─── READING PROGRESS BAR ─── */
.reading-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--rose-deep), var(--violet));
  width: 0%;
  z-index: 200;
  transition: width 0.1s linear;
  pointer-events: none;
}

/* ─── TOAST ─── */
.toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 12px 20px;
  background: var(--violet);
  color: white;
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  border-radius: 50px;
  box-shadow: 0 12px 32px rgba(74,47,74,0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 300;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}