*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Georgia,'Times New Roman',serif;line-height:1.8;color:#222;background:#f4f1eb}
.sc-GOSBtg{max-width:1100px;margin:0 auto;padding:0 24px}
.sc-mIRGxO{background:linear-gradient(135deg,#2c3e50,#34495e);color:#fff;padding:48px 0;text-align:center;margin-bottom:48px}
.sc-mIRGxO h1{font-size:36px;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px}
.sc-mIRGxO p{font-size:16px;opacity:.8;font-style:italic}
.sc-mIRGxO .sc-ougTEG{color:#fff;text-decoration:none;font-size:20px;letter-spacing:1px;text-transform:uppercase}
.sc-YKZVNq{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px}
.sc-CyetaV{background:#fff;border-radius:4px;box-shadow:0 2px 12px rgba(0,0,0,.08);padding:28px;transition:box-shadow .2s}
.sc-CyetaV:hover{box-shadow:0 4px 20px rgba(0,0,0,.14)}
.sc-CyetaV h2{font-size:22px;margin-bottom:10px;line-height:1.3}
.sc-CyetaV h2 a{color:#2c3e50;text-decoration:none}
.sc-CyetaV .sc-YslCzo{font-size:12px;color:#888;margin-bottom:10px;text-transform:uppercase;letter-spacing:1px}
.sc-CyetaV p{font-size:15px;color:#555;margin-bottom:14px}
.sc-vzIrwX{color:#e74c3c;text-decoration:none;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.5px}
.sc-SEOYVz{max-width:780px;margin:0 auto;padding:0 24px 60px}
.sc-SEOYVz h1{font-size:36px;margin-bottom:10px;line-height:1.2}
.sc-SEOYVz .sc-YslCzo{font-size:13px;color:#888;display:block;margin-bottom:28px;text-transform:uppercase;letter-spacing:1px}
.sc-SEOYVz h2{font-size:24px;margin:36px 0 14px}
.sc-SEOYVz h3{font-size:19px;margin:28px 0 10px}
.sc-SEOYVz p{margin-bottom:18px;font-size:17px}
.sc-SEOYVz ul,.sc-SEOYVz ol{margin:0 0 18px 28px}
.sc-SEOYVz a{color:#e74c3c}
.sc-SEOYVz img{max-width:100%;height:auto;border-radius:4px;margin:20px 0}
.sc-ayiQvT{border-top:2px solid #ddd;padding:28px 0;margin-top:48px;text-align:center;font-size:13px;color:#888}
.sc-ayiQvT a{color:#888}
.sc-RVYQWq{border-top:1px solid #ccc;border-bottom:1px solid #ccc;padding:14px 0;margin-bottom:28px;font-size:14px;color:#888;font-style:italic;text-align:center}
.sc-jeMtmH{background:#f9f3e3;padding:16px 20px;margin-top:28px;font-size:13px;color:#7a6230;border-radius:4px}
.sc-vSkxjt{font-size:11px;color:#888;margin:-22px 0 28px;text-transform:uppercase;letter-spacing:1.5px}
.sc-oOsnqp{margin:0 0 28px}
.sc-fZusVD{width:100%;height:auto;border-radius:4px}
.sc-ualIHE{border-top:2px solid #ddd;margin-top:40px;padding-top:24px}
.sc-ualIHE h4{font-size:16px;text-transform:uppercase;letter-spacing:1px;margin-bottom:16px;color:#888}
.mag-related-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mag-related-item a{color:#2c3e50;text-decoration:none;font-size:15px}
.mag-related-item a:hover{color:#e74c3c}
.sc-SGCjOI{background:#fff;border-radius:4px;box-shadow:0 2px 12px rgba(0,0,0,.08);padding:22px 28px;margin-top:28px}
.sc-SGCjOI p{font-size:15px;padding:4px 0;margin:0}
.sc-SGCjOI .sc-YslCzo{margin:0 8px 0 0;display:inline}
.sc-SGCjOI a{color:#2c3e50;text-decoration:none}
.sc-SGCjOI a:hover{color:#e74c3c}
/* === Theme === */
:root{--primary:#B25A65;--accent:#3A4C66;--bg:#ECE0C2;--fg:#2C2622;--border:#D8C5B9;--r:14px;--fb:'Spectral';--fh:'Bricolage Grotesque'}
/* === Custom === */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700&family=Spectral:ital,wght@0,400;0,600;1,400&display=swap');

:root body {
  font-family: var(--fb), Cambria, 'Times New Roman', serif;
  color: var(--fg);
  background: var(--bg);
  line-height: 1.78;
  font-size: 17px;
}
::selection { background: var(--primary); color: var(--bg); }
:root hr { border: 0; border-top: 1px solid var(--border); margin: 32px 0; }

:root nav {
  background: var(--primary);
  color: var(--bg);
  padding: 56px 24px 44px;
  text-align: center;
  margin-bottom: 56px;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .08);
}
:root nav h1 {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--bg);
  letter-spacing: -.01em;
  margin-bottom: 8px;
  line-height: 1.15;
  text-transform: none;
}
:root nav h1 + p {
  font-family: var(--fb), Cambria, serif;
  font-size: 15px;
  color: rgba(236, 224, 194, .85);
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
}
:root nav a {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 22px;
  color: var(--bg);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: none;
}

:root main { padding-bottom: 80px; }

:root main > h1 {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 38px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.18;
  margin: 12px 0 8px;
  letter-spacing: -.01em;
}
:root main > time {
  display: block;
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 12px;
  color: var(--accent);
  margin-bottom: 32px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

:root main > article > p { margin-bottom: 18px; font-size: 17px; }
:root main > article > h2 {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--primary);
  margin: 40px 0 14px;
  letter-spacing: -.005em;
}
:root main > article > h3 {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--fg);
  margin: 26px 0 10px;
}
:root main > article ul,
:root main > article ol { margin: 0 0 18px 26px; }
:root main > article li { margin-bottom: 8px; }
:root main > article blockquote {
  border-left: 4px solid var(--primary);
  padding: 10px 0 10px 20px;
  margin: 28px 0;
  font-style: italic;
  color: var(--fg);
  background: rgba(178, 90, 101, .06);
  border-radius: 0 var(--r) var(--r) 0;
}

:root main > article > p a,
:root main > article > p a:visited {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
:root main > article > p a:hover {
  color: var(--accent);
  text-decoration-color: var(--primary);
}

:root main > article > p a[href^="/ref/"] {
  background: rgba(178, 90, 101, .10);
  color: var(--primary);
  padding: 2px 10px;
  border-radius: var(--r);
  text-decoration: none;
  font-weight: 600;
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 15px;
}
:root main > article > p a[href^="/ref/"]:hover {
  background: var(--primary);
  color: var(--bg);
}

:root main > article > figure {
  margin: 0 0 32px;
}
:root main > article > figure > img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r);
  box-shadow: 0 4px 18px rgba(44, 38, 34, .14);
}

:root main > article > div {
  background: rgba(58, 76, 102, .07);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 14px 20px;
  margin: 36px 0 0;
  font-size: 14px;
  color: var(--fg);
  font-family: var(--fb), Cambria, serif;
  font-style: italic;
  line-height: 1.65;
}
:root main > article > div strong {
  font-family: var(--fh), system-ui, sans-serif;
  font-style: normal;
  color: var(--accent);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .14em;
  display: inline-block;
  margin-right: 8px;
  font-weight: 700;
}

:root main > div > div {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 24px 26px;
  box-shadow: 0 2px 10px rgba(44, 38, 34, .06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
:root main > div > div:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 18px rgba(178, 90, 101, .14);
  border-color: var(--primary);
}
:root main > div > div > p:first-child {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 11px;
  color: var(--accent);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
:root main > div > div > h2 {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 21px;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.28;
  letter-spacing: -.005em;
}
:root main > div > div > h2 a {
  color: var(--fg);
  text-decoration: none;
}
:root main > div > div > h2 a:hover { color: var(--primary); }
:root main > div > div > p:not(:first-child) {
  font-family: var(--fb), Cambria, serif;
  font-size: 14.5px;
  color: var(--fg);
  opacity: .82;
  margin-bottom: 14px;
}
:root main > div > div > a:last-child {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 12px;
  color: var(--primary);
  text-decoration: none;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  display: inline-block;
  border-bottom: 1px solid var(--primary);
  padding-bottom: 1px;
}
:root main > div > div > a:last-child:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

:root main > aside {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
:root main > aside h4 {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 14px;
  color: var(--accent);
  margin-bottom: 18px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 700;
}
:root .mag-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
:root .mag-related-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
  transition: border-color .15s ease, background .15s ease;
}
:root .mag-related-item:hover {
  border-color: var(--primary);
  background: rgba(178, 90, 101, .04);
}
:root .mag-related-item a {
  color: var(--fg);
  text-decoration: none;
  font-family: var(--fb), Cambria, serif;
  font-size: 14.5px;
  line-height: 1.4;
  display: block;
}

:root footer {
  background: transparent;
  border-top: 1px solid var(--border);
  padding: 28px 0 36px;
  margin-top: 48px;
  text-align: center;
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 12px;
  color: var(--fg);
  opacity: .58;
  letter-spacing: .04em;
}
:root footer a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px dotted var(--border);
}
:root footer a:hover {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* === R2 fixes (2026-05-31T11:20:10.146662+00:00) === */

.bld-content p,
.entry-content p,
.post-content p {
  line-height: 1.78;
  font-size: 17px;
}

.bld-content h2,
.entry-content h2,
.post-content h2 {
  margin-top: 2.4em;
  margin-bottom: 0.55em;
  font-weight: 700;
}

.inline-card,
.product-recommendation,
.affiliate-block,
.cta-card {
  background-color: #e4d5be;
  border: 1px solid #c8ae90;
  border-radius: 5px;
}

/* === R3 fixes (2026-05-31T12:00:09.555574+00:00) === */

/* Fix 1: Reduce category label visual weight — headline should command first look */
:root main > div > div > p:first-child {
  font-size: 10px;
  color: var(--fg);
  opacity: 0.42;
  letter-spacing: .08em;
  margin-bottom: 8px;
}

/* Fix 2: Full-width 16/9 card image header — warm home photography as trust signal */
:root main > div > div img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--r) var(--r) 0 0;
  display: block;
  margin-bottom: 16px;
}

/* Fix 3: Article visual break — chapter-like pause in long text runs */
:root main > article hr {
  margin: 40px 0;
  border-top: 1px solid var(--border);
}

/* Fix 4: Related article links — invitation weight, not footnote */
:root .mag-related-item a {
  font-size: 15.5px;
  line-height: 1.5;
}

/* Fix 5: Card padding — image bleeds to card edge, children retain side spacing */
:root main > div > div {
  padding: 0 0 20px 0;
}
:root main > div > div > p,
:root main > div > div > h2,
:root main > div > div > a {
  padding-left: 20px;
  padding-right: 20px;
}

/* === R4 fixes (2026-05-31T12:40:09.929168+00:00) === */

/* Fix 1: Restore card top padding — date label and title have breathing room */
:root main > div > div {
  padding: 20px 0 20px 0;
}

/* Fix 2: Continue Reading — invitation weight, not fine print */
:root main > div > div > a:last-child {
  font-size: 13.5px;
  letter-spacing: .06em;
  text-transform: none;
}

/* Fix 3: H3 sub-headers in primary color — one-second article orientation */
:root main > article > h3 {
  color: var(--primary);
  margin: 32px 0 10px;
}

/* Fix 4: Disclosure box — friendly footnote in Mia's palette, not caution notice */
:root main > article > div {
  background: rgba(178, 90, 101, .05);
  border-left: 4px solid var(--primary);
  font-style: normal;
  font-size: 13.5px;
  color: var(--fg);
  opacity: 0.75;
}

/* Fix 5: Affiliate pill links at body text size — recommendation at same volume */
:root main > article > p a[href^="/r/"],
:root main > article > p a[href^="/ref/"] {
  font-size: 17px;
  padding: 2px 8px;
}

/* v.67cdab — layout revision */
/* Editorial signature pass for da-home-en (Smile Without the Chair / Mia Torres).
   Three voices: Spectral italic (display), Spectral (body), Bricolage tracked-caps (meta).
   Homepage recomposed hero → Editor's Picks → photo break → Journal → photo break → index tail.
   Moment colour --moment #B34F2A used in EXACTLY two spots: featured drop cap + article opener drop cap. */
:root { --paper: #F6F0E1; --moment: #B34F2A; }

/* ---- Masthead: real photo + plum→navy overlay, serif-italic wordmark, smile-arc mark ---- */
:root nav {
  background:
    linear-gradient(158deg, rgba(120, 58, 72, .82), rgba(58, 76, 102, .86)),
    url("/theme-assets/hero-masthead.jpg") center 40% / cover no-repeat;
  padding: 92px 24px 74px;
  margin-bottom: 68px;
  box-shadow: inset 0 -3px 0 rgba(178, 90, 101, .55);
}
:root nav h1 {
  font-family: var(--fb), Cambria, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(34px, 5.4vw, 54px);
  letter-spacing: -.012em;
  color: var(--bg);
  line-height: 1.04;
  margin-bottom: 0;
  text-transform: none;
}
:root nav h1::after {
  content: "";
  display: block;
  width: 62px;
  height: 24px;
  margin: 16px auto 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='62' height='24' viewBox='0 0 62 24'%3E%3Cpath d='M6 7 Q31 25 56 7' fill='none' stroke='%23ECE0C2' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='6' cy='7' r='2.3' fill='%23ECE0C2'/%3E%3Ccircle cx='56' cy='7' r='2.3' fill='%23ECE0C2'/%3E%3C/svg%3E") center / contain no-repeat;
}
:root nav h1 + p {
  font-family: var(--fb), Cambria, serif;
  font-style: italic;
  font-size: clamp(15px, 2.1vw, 18px);
  color: rgba(236, 224, 194, .9);
  letter-spacing: 0;
  line-height: 1.5;
  max-width: 46ch;
  margin: 0 auto;
  text-transform: none;
}
:root nav a {
  font-family: var(--fb), Cambria, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -.01em;
  text-transform: none;
}

/* ================= HOMEPAGE GRID ================= */
:root main > div:first-child {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 30px;
  row-gap: 48px;
  align-items: stretch;
  margin-top: 4px;
}

/* Base card (journal 2-col default) — kills template #fff, warm paper, soft frame */
:root main > div:first-child > div {
  grid-column: span 3;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 28px 32px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
:root main > div:first-child > div:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(178, 90, 101, .14);
  border-color: var(--primary);
}
/* reset the R3/R4 inner side-padding — spacing now lives on the card */
:root main > div:first-child > div > p,
:root main > div:first-child > div > h2,
:root main > div:first-child > div > a {
  padding-left: 0;
  padding-right: 0;
}
:root main > div:first-child > div > p:first-child {
  font: 700 11px/1.4 var(--fh), system-ui, sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: .72;
  margin: 0 0 12px;
}
:root main > div:first-child > div > h2 {
  font-family: var(--fb), Cambria, serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.28;
  letter-spacing: -.005em;
  margin: 0 0 12px;
}
:root main > div:first-child > div > h2 a { color: var(--fg); text-decoration: none; }
:root main > div:first-child > div > h2 a:hover { color: var(--primary); }
:root main > div:first-child > div > p:not(:first-child) {
  font-family: var(--fb), Cambria, serif;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--fg);
  opacity: .82;
  margin: 0 0 16px;
  max-width: 64ch;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
:root main > div:first-child > div > a:last-child {
  font: 700 12px var(--fh), system-ui, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid var(--primary);
  padding-bottom: 1px;
  display: inline-block;
}
:root main > div:first-child > div > a:last-child:hover { color: var(--accent); border-color: var(--accent); }

/* ---- FEATURED HERO (card 1): unboxed, loud serif-italic, drop cap, byline, pill CTA ---- */
:root main > div:first-child > div:nth-child(1) {
  grid-column: 1 / -1;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 8px 0 0;
}
:root main > div:first-child > div:nth-child(1):hover { transform: none; box-shadow: none; border-color: transparent; }
:root main > div:first-child > div:nth-child(1)::before {
  content: "Latest Essay";
  display: inline-block;
  font: 700 11px var(--fh), system-ui, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 999px;
  padding: 5px 15px;
  margin-bottom: 20px;
}
:root main > div:first-child > div:nth-child(1) > p:first-child {
  font: 700 12.5px/1.4 var(--fh), system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 1;
  margin: 0 0 18px;
}
:root main > div:first-child > div:nth-child(1) > p:first-child::before { content: "By Mia Torres — "; }
:root main > div:first-child > div:nth-child(1) > p:first-child::after { content: " · 6 Min Read"; color: var(--primary); }
:root main > div:first-child > div:nth-child(1) > h2 {
  font-style: italic;
  font-weight: 600;
  font-size: clamp(34px, 5.2vw, 52px);
  line-height: 1.06;
  letter-spacing: -.015em;
  margin: 0 0 20px;
  max-width: 20ch;
}
:root main > div:first-child > div:nth-child(1) > p:not(:first-child) {
  font-size: 20px;
  line-height: 1.5;
  opacity: .86;
  max-width: 60ch;
  margin: 0 0 26px;
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
:root main > div:first-child > div:nth-child(1) > p:not(:first-child)::first-letter {
  font-family: var(--fb), Cambria, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 62px;
  line-height: .78;
  float: left;
  margin: 7px 12px 0 0;
  color: var(--moment);
}
:root main > div:first-child > div:nth-child(1) > a:last-child {
  border: 1.5px solid var(--primary);
  border-radius: 999px;
  padding: 11px 26px;
  letter-spacing: .14em;
  font-size: 13px;
}
:root main > div:first-child > div:nth-child(1) > a:last-child:hover {
  background: var(--primary);
  color: var(--bg);
}
/* Full-width section label introducing the picks row (RULE B: full row, outside a frame) */
:root main > div:first-child > div:nth-child(1)::after {
  content: "Editor’s Picks — Read These First";
  display: block;
  margin: 42px 0 2px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  font: 700 14px var(--fh), system-ui, sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---- EDITOR'S PICKS (cards 2–4): 3-across band, accent top rule, clamped for equal height ---- */
:root main > div:first-child > div:nth-child(2),
:root main > div:first-child > div:nth-child(3),
:root main > div:first-child > div:nth-child(4) {
  grid-column: span 2;
  border-top: 3px solid var(--accent);
  padding-top: 24px;
}
:root main > div:first-child > div:nth-child(2) > h2,
:root main > div:first-child > div:nth-child(3) > h2,
:root main > div:first-child > div:nth-child(4) > h2 { font-size: 18.5px; }

/* ---- PHOTO BREAK 1 + JOURNAL LEAD (card 5): full-width, unboxed, band on top ---- */
:root main > div:first-child > div:nth-child(5) {
  grid-column: 1 / -1;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-top: 20px;
}
:root main > div:first-child > div:nth-child(5):hover { transform: none; box-shadow: none; border-color: transparent; }
:root main > div:first-child > div:nth-child(5)::before {
  content: "More Essays Below";
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 200px;
  margin: 0 0 38px;
  border-radius: 10px;
  background:
    linear-gradient(rgba(20, 24, 28, .55), rgba(20, 24, 28, .25)),
    url("/theme-assets/article-hero.jpg") center 30% / cover no-repeat;
  color: #F6F0E1;
  font: 700 13px var(--fh), system-ui, sans-serif;
  letter-spacing: .32em;
  text-transform: uppercase;
  padding-bottom: 22px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}
:root main > div:first-child > div:nth-child(5) > h2 {
  font-style: italic;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin-bottom: 14px;
  max-width: 24ch;
}
:root main > div:first-child > div:nth-child(5) > p:not(:first-child) {
  font-size: 18px;
  line-height: 1.55;
  max-width: 66ch;
  -webkit-line-clamp: 2;
}

/* ---- PHOTO BREAK 2 + COMPACT INDEX TAIL: full-width, two-column magazine index ---- */
:root main > div:last-child {
  position: relative;
  margin-top: 84px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 34px 26px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
  overflow: hidden;
  columns: 2;
  column-gap: 48px;
}
:root main > div:last-child::before {
  content: "See More Essays";
  column-span: all;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 210px;
  margin: 0 -34px 26px;
  background:
    linear-gradient(rgba(20, 24, 28, .55), rgba(20, 24, 28, .25)),
    url("/theme-assets/article-hero.jpg") center 70% / cover no-repeat;
  color: #F6F0E1;
  font: 700 13px var(--fh), system-ui, sans-serif;
  letter-spacing: .32em;
  text-transform: uppercase;
  padding-bottom: 22px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}
:root main > div:last-child > p {
  break-inside: avoid;
  margin: 0;
  padding: 11px 0;
  border-bottom: 1px dotted rgba(0, 0, 0, .14);
  font-family: var(--fb), Cambria, serif;
  font-size: 14.5px;
  line-height: 1.5;
}
:root main > div:last-child > p > span {
  display: block;
  font: 700 10px var(--fh), system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: .7;
  margin: 0 0 3px;
}
:root main > div:last-child a {
  color: var(--fg);
  text-decoration: none;
  font-family: var(--fb), Cambria, serif;
}
:root main > div:last-child a:hover { color: var(--primary); }

/* ================= ARTICLE PAGE signature touches ================= */
/* Opening drop cap — moment colour, second and final use */
:root main > article > p:first-of-type::first-letter {
  font-family: var(--fb), Cambria, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 58px;
  line-height: .78;
  float: left;
  margin: 8px 12px 0 0;
  color: var(--moment);
}
/* Smile-arc dinkus between h2 sections */
:root main > article > h2::before {
  content: "";
  display: block;
  width: 54px;
  height: 22px;
  margin: 6px 0 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='22' viewBox='0 0 54 22'%3E%3Cpath d='M6 7 Q27 23 48 7' fill='none' stroke='%23B25A65' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='6' cy='7' r='2.2' fill='%23B25A65'/%3E%3Ccircle cx='48' cy='7' r='2.2' fill='%23B25A65'/%3E%3C/svg%3E") left center / contain no-repeat;
}
/* Hanging quote on blockquotes */
:root main > article > blockquote {
  position: relative;
  padding-left: 30px;
}
:root main > article > blockquote::before {
  content: "\201C";
  position: absolute;
  left: 7px;
  top: 4px;
  font-family: var(--fb), Cambria, serif;
  font-size: 44px;
  line-height: 1;
  color: var(--primary);
  opacity: .45;
}

/* ================= MOBILE ================= */
@media (max-width: 760px) {
  :root nav { padding: 68px 22px 54px; margin-bottom: 48px; }
  :root main > div:first-child { grid-template-columns: 1fr; row-gap: 36px; }
  :root main > div:first-child > div,
  :root main > div:first-child > div:nth-child(2),
  :root main > div:first-child > div:nth-child(3),
  :root main > div:first-child > div:nth-child(4),
  :root main > div:first-child > div:nth-child(5) { grid-column: 1 / -1; }
  :root main > div:first-child > div:nth-child(1) > h2 { font-size: 32px; }
  :root main > div:first-child > div:nth-child(1)::after { margin-top: 34px; }
  :root main > div:last-child { columns: 1; padding: 0 24px 22px; }
  :root main > div:last-child::before { margin: 0 -24px 24px; height: 170px; }
}


/* related-articles-nav-fix v1 */
:root main > nav p,
:root main > section p {
  line-height: 1.85;
  margin: 0;
}
:root main > nav a,
:root main > section a {
  display: inline-block;
  margin: 0 4px;
  padding: 0 2px;
}


/* mobile-overflow-fix v1 */
:root html, :root body { overflow-x: hidden; max-width: 100%; }
@media (max-width: 920px) {
  :root main > * { max-width: 100%; }
  :root main { overflow-x: hidden; }
}


/* mobile-overflow-fix v2 */
@media (max-width: 640px) {
  :root main,
  :root main > article,
  :root main > div,
  :root main > section,
  :root main > nav {
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
  }
  :root main > article > *,
  :root main > div > *,
  :root main > section > *,
  :root main > nav > * {
    max-width: 100%;
  }
  :root main h1,
  :root main h2,
  :root main h3,
  :root main h4 {
    overflow-wrap: break-word;
    word-break: normal;
  }
  /* Any 3+ col grid inside main → 1 col on mobile */
  :root main :is(ul, ol, section, div, nav)[style*="grid-template-columns"],
  :root main > section > ul,
  :root main > nav > ul,
  :root main > div > ul {
    grid-template-columns: 1fr !important;
  }
  /* Any CSS multi-column layout → 1 col on mobile */
  :root main :is(ul, ol, section, div, p) {
    columns: 1;
  }
  /* Article body images stay inside viewport */
  :root main img,
  :root main figure {
    max-width: 100%;
    height: auto;
  }
}


/* mobile-padding-fix v1 */
@media (max-width: 640px) {
  :root main {
    padding-left: 20px;
    padding-right: 20px;
  }
}


/* refix iter1: carded archive tail + visible article affiliate CTAs */
:root main:not(:has(> h1)) > div:last-child:has(> p) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 16px;
  align-items: stretch;
  columns: auto;
  column-gap: normal;
  padding: 0 34px 30px;
  background: rgba(246, 240, 225, .62);
}
:root main:not(:has(> h1)) > div:last-child:has(> p)::before {
  grid-column: 1 / -1;
  column-span: none;
  margin-bottom: 10px;
}
:root main:not(:has(> h1)) > div:last-child:has(> p) > p {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  min-height: 92px;
  box-sizing: border-box;
  margin: 0;
  padding: 20px 22px;
  break-inside: auto;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
:root main:not(:has(> h1)) > div:last-child:has(> p) > p:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: 0 6px 18px rgba(178, 90, 101, .14);
}
:root main:not(:has(> h1)) > div:last-child:has(> p) > p > span {
  margin-bottom: 7px;
}
:root main:not(:has(> h1)) > div:last-child:has(> p) > p > a {
  display: block;
  color: var(--fg);
  font-family: var(--fb), Cambria, serif;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
}
:root main:not(:has(> h1)) > div:last-child:has(> p) > p:hover > a,
:root main:not(:has(> h1)) > div:last-child:has(> p) > p > a:hover {
  color: var(--primary);
}

:root main:has(> h1) > article :is(a[href^="/r/"], a[href^="/ref/"], a[href^="/try/"], a[href^="/go/"], a[href^="/out/"]),
:root main:has(> h1) > article :is(a[href^="/r/"], a[href^="/ref/"], a[href^="/try/"], a[href^="/go/"], a[href^="/out/"]):visited {
  display: inline-block;
  max-width: 100%;
  margin: 0 2px;
  padding: 5px 13px;
  border: 1px solid rgba(178, 90, 101, .34);
  border-radius: 999px;
  background: rgba(178, 90, 101, .12);
  box-shadow: 0 1px 4px rgba(44, 38, 34, .07);
  color: var(--primary);
  font-family: var(--fh), system-ui, sans-serif;
  font-size: .9em;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  vertical-align: baseline;
}
:root main:has(> h1) > article :is(a[href^="/r/"], a[href^="/ref/"], a[href^="/try/"], a[href^="/go/"], a[href^="/out/"]):hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--bg);
  text-decoration: none;
}
:root main:has(> h1) > time::after {
  content: " · By Mia Torres · 6 Min Read";
  color: var(--primary);
}

@media (max-width: 640px) {
  :root main:not(:has(> h1)) > div:last-child:has(> p) {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0 20px 24px;
  }
  :root main:not(:has(> h1)) > div:last-child:has(> p)::before {
    margin-left: -20px;
    margin-right: -20px;
  }
  :root main:not(:has(> h1)) > div:last-child:has(> p) > p {
    min-height: auto;
    padding: 19px 20px;
  }
}

/* refix iter2: make article affiliate/product links read as visible CTAs */
:root main > article a:is([href^="/r/"], [href^="/ref/"], [href^="/try/"], [href^="/go/"], [href^="/out/"]),
:root main > article a:is([href^="/r/"], [href^="/ref/"], [href^="/try/"], [href^="/go/"], [href^="/out/"]):visited,
:root main > article :is(p, li, div) a:is([href^="/r/"], [href^="/ref/"], [href^="/try/"], [href^="/go/"], [href^="/out/"]),
:root main > article :is(p, li, div) a:is([href^="/r/"], [href^="/ref/"], [href^="/try/"], [href^="/go/"], [href^="/out/"]):visited {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin: 3px 4px;
  padding: 7px 15px 8px;
  border: 1px solid rgba(178, 90, 101, .5);
  border-radius: 999px;
  background: rgba(178, 90, 101, .2);
  box-shadow: 0 1px 4px rgba(44, 38, 34, .08);
  color: var(--primary);
  font-family: var(--fh), system-ui, sans-serif;
  font-size: .95em;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  text-decoration-color: transparent;
  vertical-align: baseline;
}
:root main > article a:is([href^="/r/"], [href^="/ref/"], [href^="/try/"], [href^="/go/"], [href^="/out/"]):hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--bg);
  text-decoration: none;
}

@media (max-width: 640px) {
  :root main > article a:is([href^="/r/"], [href^="/ref/"], [href^="/try/"], [href^="/go/"], [href^="/out/"]) {
    margin-top: 4px;
    margin-bottom: 4px;
    padding: 7px 13px;
    line-height: 1.25;
  }
}


/* premium-upgrade v1 */
/* premium editorial upgrade — style=The-Sill-botanical overlay=25% grid=mixed scale=dramatic family=astro-grid */

/* ── HERO STRIPS: site-level atmospheric photos (overlay 25%) ── */
:root main:not(:has(> h1)) > div:has(> div)::before {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.25) 100%),
    url("/theme-assets/premium-hero-strip-1.webp") center 40% / cover no-repeat;
  min-height: 340px; padding-bottom: 26px; align-items: flex-end;
  text-shadow: 0 1px 12px rgba(0,0,0,0.55); color: #fff;
}
:root main:not(:has(> h1)) > div:has(> div)::after {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.25) 100%),
    url("/theme-assets/premium-hero-strip-2.webp") center 45% / cover no-repeat;
  min-height: 340px; padding-bottom: 26px; align-items: flex-end;
  text-shadow: 0 1px 12px rgba(0,0,0,0.55); color: #fff;
}


/* ── CARD 1: featured full-row with 300px photo header (via card-own background, NOT ::before —
    leaves ::before free for existing site's M2 label / meta content). ── */
:root main:not(:has(> h1)) > div:has(> div) > div:nth-of-type(1) {
  grid-column: 1 / -1;
  position: relative;      /* anchor for existing site's ::before label if it uses absolute */
  overflow: visible;       /* let above-card labels render without clipping */
  padding: 320px 44px 40px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-card-1.webp") no-repeat center top / 100% 300px,
    var(--bg) !important;
  margin-top: 60px !important;  /* room for above-card M2 label (existing site convention) */
}

/* ── CARDS 2-4: medium with 180px photo header (background technique, ::before untouched) ── */
:root main:not(:has(> h1)) > div:has(> div) > div:nth-of-type(2) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-card-2.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}
:root main:not(:has(> h1)) > div:has(> div) > div:nth-of-type(3) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-card-3.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}
:root main:not(:has(> h1)) > div:has(> div) > div:nth-of-type(4) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-card-4.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}

/* ── Article page: drop cap + dinkus dividers ── */
:root main:has(> h1) > article > p:first-of-type::first-letter {
  font-family: var(--fh), Georgia, serif;
  font-size: 76px; line-height: 0.9; color: var(--primary);
  float: left; margin: 6px 12px 0 0; padding: 0; font-weight: 400;
}
:root main:has(> h1) > article > h2 + p ~ h2::before {
  content: "✦ ✦ ✦";
  display: block; text-align: center; color: var(--accent);
  font-size: 12px; letter-spacing: 0.3em; margin-bottom: 24px;
  font-weight: 400;
}

/* ── Mobile responsive: adjust photo heights via background-size on the card itself ── */
@media (max-width: 720px) {
  :root main:not(:has(> h1)) > div:has(> div) > div:nth-of-type(1) {
    padding: 240px 22px 28px !important;
    background:
      url("/theme-assets/premium-hero-card-1.webp") no-repeat center top / 100% 220px,
      var(--bg) !important;
  }
  :root main:not(:has(> h1)) > div:has(> div) > div:nth-of-type(2) {
    padding: 180px 22px 26px !important;
    background:
      url("/theme-assets/premium-hero-card-2.webp") no-repeat center top / 100% 160px,
      var(--bg) !important;
  }
  :root main:not(:has(> h1)) > div:has(> div) > div:nth-of-type(3) {
    padding: 180px 22px 26px !important;
    background:
      url("/theme-assets/premium-hero-card-3.webp") no-repeat center top / 100% 160px,
      var(--bg) !important;
  }
  :root main:not(:has(> h1)) > div:has(> div) > div:nth-of-type(4) {
    padding: 180px 22px 26px !important;
    background:
      url("/theme-assets/premium-hero-card-4.webp") no-repeat center top / 100% 160px,
      var(--bg) !important;
  }
  :root main:not(:has(> h1)) > div:has(> div)::before,
  :root main:not(:has(> h1)) > div:has(> div)::after { min-height: 240px; }
  :root main:has(> h1) > article > p:first-of-type::first-letter { font-size: 60px; }
}