*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Palatino Linotype',Palatino,'Book Antiqua',serif;line-height:1.9;color:#2a2a2a;background:#fefefe}
.astro-0tD8fPQY{max-width:640px;margin:0 auto;padding:0 20px}
.astro-bbHRQRPE{padding:60px 0 40px;border-bottom:1px solid #ccc;margin-bottom:48px}
.astro-bbHRQRPE h1{font-size:24px;font-weight:400;letter-spacing:-.5px}
.astro-bbHRQRPE p{font-size:14px;color:#777;margin-top:6px;font-style:italic}
.astro-bbHRQRPE a{color:#2a2a2a;text-decoration:none;font-size:24px;font-weight:400;letter-spacing:-.5px}
.astro-GFaWSpCi{padding:20px 0}
.astro-GFaWSpCi h2{font-size:18px;font-weight:400;margin-bottom:4px}
.astro-GFaWSpCi h2 a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.astro-GFaWSpCi h2 a:hover{border-bottom-color:#2a2a2a}
.astro-GFaWSpCi .astro-joDxjg3q{font-size:12px;color:#aaa;margin-bottom:6px}
.astro-GFaWSpCi p{font-size:14px;color:#666}
.astro-by9uhXkT{color:#888;font-size:13px;text-decoration:none}
.astro-by9uhXkT:hover{color:#2a2a2a}
.astro-xLGvlGXx{padding-bottom:60px}
.astro-xLGvlGXx h1{font-size:28px;font-weight:400;margin-bottom:8px}
.astro-xLGvlGXx .astro-joDxjg3q{font-size:12px;color:#aaa;display:block;margin-bottom:32px}
.astro-xLGvlGXx h2{font-size:21px;font-weight:400;margin:40px 0 12px;border-bottom:1px solid #eee;padding-bottom:6px}
.astro-xLGvlGXx h3{font-size:17px;margin:28px 0 8px}
.astro-xLGvlGXx p{margin-bottom:18px;font-size:16px}
.astro-xLGvlGXx ul,.astro-xLGvlGXx ol{margin:0 0 18px 20px}
.astro-xLGvlGXx a{color:#555;border-bottom:1px solid #ccc}
.astro-xLGvlGXx a:hover{color:#000;border-bottom-color:#000}
.astro-xLGvlGXx img{max-width:100%;height:auto;margin:24px 0}
.astro-CxcQR2Gq{border-top:1px solid #ddd;padding:20px 0;margin-top:48px;text-align:center;font-size:12px;color:#aaa}
.astro-CxcQR2Gq a{color:#aaa;text-decoration:none}
.astro-ntGWoJiB{padding:0 0 16px;margin-bottom:24px;font-size:12px;color:#aaa;font-style:italic;border-bottom:1px solid #eee}
.astro-sKTbUdic{padding:16px 0 0;margin-top:32px;font-size:11px;color:#999;border-top:1px solid #eee}
.astro-WGsuXZls{font-size:12px;color:#aaa;margin:-26px 0 32px;font-weight:300}
.astro-AGQIlKIY{margin:0 auto 32px;max-width:720px}
.astro-9qVvh1CW{width:100%;height:auto}
.astro-iUavpqem{margin-top:40px;padding-top:20px;border-top:1px solid #eee;font-size:14px;color:#888}
.astro-iUavpqem em{color:#aaa}
.astro-iUavpqem a{color:#555;border-bottom:1px solid #ddd;text-decoration:none}
.astro-XjMd3jOt{padding:24px 0 0;border-top:1px solid #eee;margin-top:24px}
.astro-XjMd3jOt p{padding:3px 0;margin:0;font-size:15px}
.astro-XjMd3jOt a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.astro-XjMd3jOt a:hover{border-bottom-color:#2a2a2a}
/* === Theme === */
:root{--primary:#5C4A8A;--accent:#D9A88A;--bg:#F2EDDC;--fg:#1F140C;--border:#C4B5A0;--r:11px;--fb:'Cabin';--fh:'Forum'}
/* === Custom === */
@import url('https://fonts.googleapis.com/css2?family=Forum&family=Cabin:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* =============================================================== */
/* v.37cc69 — layout revision                                      */
/* Mi Rincón Artesanal — Lucía's weekend soap + candle diary.       */
/* FLAT homepage: cards are DIRECT main > div children (no wrapper).*/
/* Grid built on <main> itself; main::before / main::after become   */
/* grid items (the two essay-photo strips). Editor's-Picks label    */
/* leaks full-width off the hero card (::after, hero is 1/-1).       */
/* order: hero(1) → picks(3) → strip1(4) → journal(5) → strip2(6)    */
/* → tail(8). Homepage scoped main:not(:has(> article)); article     */
/* with main:has(> article) so nothing bleeds onto old posts.        */
/* Moment colour #8C4A00 in exactly 2 places: hero drop-cap +        */
/* Editor's-Picks rule. Affiliate prefix on this site is /get/.      */
/* Forum (display serif) + Cabin (body/meta sans). No 4th font.      */
/* =============================================================== */

:root { --moment: #8C4A00; --paper: #faf5ec; }

:root body { font-family: var(--fb), system-ui, -apple-system, sans-serif; color: var(--fg); background: var(--bg); line-height: 1.74; font-size: 16.5px; }
::selection { background: var(--accent); color: var(--fg); }
:root hr { border: 0; border-top: 1px solid var(--border); margin: 30px 0; }

/* ---------------------------------------------------------------- */
/* MASTHEAD                                                          */
/* ---------------------------------------------------------------- */
/* Article-page compact bar (header has no h1) */
/* M6 (article): base theme pins this bar to the SAME 640px column as <main>, so the purple band
   only spanned the centred article measure — warm paper showed on both sides. Break out to viewport
   width with symmetric negative margins (identical technique to the home masthead above); html/body
   overflow-x:hidden clips the scrollbar sliver so there is no horizontal scroll. <main> stays at its
   reading measure below; only the bar goes full-bleed. */
:root > body > header:not(:has(h1)) {
  background: var(--primary); color: var(--bg); padding: 0.95rem 1.6rem; margin-bottom: 40px; border-bottom: 3px solid var(--accent);
  max-width: 100vw; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); box-sizing: border-box;
}
:root > body > header:not(:has(h1)) a { font-family: var(--fh), Cambria, serif; font-size: 1.15rem; color: var(--bg); text-decoration: none; font-weight: 400; letter-spacing: .01em; }
:root > body > header:not(:has(h1)) a:hover { color: var(--accent); }

/* Home masthead: atmospheric photo + flame monogram + serif-italic wordmark + manifesto */
:root > body > header:has(h1) {
  position: relative; text-align: center;
  /* M6 masthead full-bleed: the base theme pins <header> AND <main> to the SAME 640px class
     (.astro-0tD8fPQY{max-width:640px;margin:0 auto}). width:100% alone still measured against that
     column, so the band read as a narrow centred block. A viewport-width band with symmetric negative
     margins breaks out of ANY constrained containing block; html/body overflow-x:hidden clips the
     scrollbar sliver so there is no horizontal scroll. <main> keeps its own reading measure below. */
  max-width: 100vw; width: 100vw; margin: 0 calc(50% - 50vw); box-sizing: border-box;
  padding: 70px 24px 56px;
  background-color: #2b2447;
  background-image: linear-gradient(rgba(46,36,72,.74), rgba(46,36,72,.52)), url("/theme-assets/hero-bg.jpg");
  background-size: cover; background-position: center 42%;
  border-bottom: 3px solid var(--accent);
}
:root > body > header:has(h1)::before {
  content: ""; display: block; width: 56px; height: 56px; margin: 0 auto 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='29' fill='none' stroke='%23D9A88A' stroke-width='2'/%3E%3Cpath d='M32 13 C40 27 44 33 39 43 C36 49 27 49 24 42 C22 37 26 33 28 27 C30 31 31 33 33 35 C34 30 33 22 32 13 Z' fill='%23D9A88A'/%3E%3C/svg%3E") center/contain no-repeat;
}
:root > body > header:has(h1) > h1 {
  font-family: var(--fh), Cambria, serif; font-style: italic; font-weight: 400;
  font-size: clamp(38px, 7vw, 56px); line-height: 1.04; color: #F7F1E6;
  letter-spacing: .01em; margin: 0 auto; max-width: 20ch; text-shadow: 0 2px 16px rgba(0,0,0,.45);
}
:root > body > header:has(h1) > h1::after {
  content: "cera, aceite y tardes lentas de sábado";
  display: block; font-family: var(--fh), Cambria, serif; font-style: italic; font-weight: 400;
  font-size: 15.5px; letter-spacing: .12em; color: var(--accent);
  margin-top: 14px; text-shadow: 0 1px 8px rgba(0,0,0,.5);
}
:root > body > header:has(h1) > p {
  font-family: var(--fb), system-ui, sans-serif; font-style: italic; font-size: 14.5px; line-height: 1.55;
  color: rgba(247,241,230,.86); max-width: 58ch; margin: 16px auto 0; text-shadow: 0 1px 6px rgba(0,0,0,.45);
}

/* ---------------------------------------------------------------- */
/* MAIN — base (article width; homepage overrides to grid below)     */
/* ---------------------------------------------------------------- */
:root main { max-width: 860px; margin: 0 auto; padding: 44px 24px 72px; }

/* ================================================================ */
/* HOMEPAGE FEED — 6-col editorial grid on <main>                    */
/* ================================================================ */
:root main:not(:has(> article)) {
  display: grid; grid-template-columns: repeat(6, 1fr);
  column-gap: 30px; row-gap: 40px; align-items: stretch;
  max-width: 1090px; padding: 56px 24px 88px;
}

/* base card = journal default: warm-paper frame, never white */
:root main:not(:has(> article)) > div:has(> h2 > a) {
  order: 5; grid-column: span 3;
  display: flex; flex-direction: column; margin: 0;
  padding: 26px 34px 28px;
  background: var(--paper);
  border: 1px solid rgba(92,74,138,.15); border-radius: 9px;
  box-shadow: 0 1px 4px rgba(31,20,12,.05);
  transition: transform .15s ease, box-shadow .15s ease;
}
:root main:not(:has(> article)) > div:has(> h2 > a):hover { transform: translateY(-2px); box-shadow: 0 5px 16px rgba(31,20,12,.10); }
:root main:not(:has(> article)) > div:has(> h2 > a) > p:first-child {
  font-family: var(--fb), system-ui, sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--primary); opacity: .78; margin: 0 0 10px;
}
:root main:not(:has(> article)) > div:has(> h2 > a) > h2 {
  font-family: var(--fh), Cambria, serif; font-size: 20px; font-weight: 400; line-height: 1.24;
  margin: 0 0 12px; padding: 0; border: 0; letter-spacing: .01em;
}
:root main:not(:has(> article)) > div:has(> h2 > a) > h2 a { color: var(--primary); text-decoration: none; }
:root main:not(:has(> article)) > div:has(> h2 > a) > h2 a:hover { color: var(--accent); }
:root main:not(:has(> article)) > div:has(> h2 > a) > p:not(:first-child) {
  font-family: var(--fb), system-ui, sans-serif; font-size: 15px; line-height: 1.6; color: var(--fg);
  opacity: .86; margin: 0 0 18px; max-width: 62ch;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
:root main:not(:has(> article)) > div:has(> h2 > a) > a:last-child {
  margin-top: auto; align-self: flex-start;
  font-family: var(--fb), system-ui, sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--bg); background: var(--primary);
  padding: 8px 20px; border-radius: 999px; text-decoration: none; transition: background .15s ease;
}
:root main:not(:has(> article)) > div:has(> h2 > a) > a:last-child:hover { background: var(--accent); color: var(--fg); }

/* lone trailing journal card (odd count) fills the row so no empty half */
:root main:not(:has(> article)) > div:has(> h2 > a):last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
:root main:not(:has(> article)) > div:has(> h2 > a):last-of-type:nth-of-type(odd) > p:not(:first-child) { max-width: 70ch; }

/* ---- HERO / FEATURED (first entry) ---- */
:root main:not(:has(> article)) > div:has(> h2 > a):first-of-type {
  order: 1; grid-column: 1 / -1; padding: 42px 46px;
  position: relative; margin-bottom: 50px; /* reserve the band gap below the hero for the detached picks label */
  background: linear-gradient(180deg, #f8f2e6, #f1e8d5);
  border: 1px solid rgba(92,74,138,.22); border-radius: 12px;
  box-shadow: 0 3px 14px rgba(31,20,12,.08); overflow: visible;
}
:root main:not(:has(> article)) > div:has(> h2 > a):first-of-type:hover { transform: none; }
/* repurpose date line into badge + byline */
:root main:not(:has(> article)) > div:has(> h2 > a):first-of-type > p:first-child { order: 0; font-size: 0; margin: 0 0 14px; }
:root main:not(:has(> article)) > div:has(> h2 > a):first-of-type > p:first-child::before {
  content: "Último diario · por Lucía";
  font-family: var(--fb), system-ui, sans-serif; font-size: 11.5px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--primary);
}
:root main:not(:has(> article)) > div:has(> h2 > a):first-of-type > h2 { order: 1; margin: 0 0 16px; font-size: clamp(30px, 4.6vw, 46px); line-height: 1.08; }
:root main:not(:has(> article)) > div:has(> h2 > a):first-of-type > h2 a { font-family: var(--fh), Cambria, serif; font-style: italic; font-weight: 400; color: var(--primary); }
:root main:not(:has(> article)) > div:has(> h2 > a):first-of-type > p:not(:first-child) {
  order: 3; display: block; overflow: visible; -webkit-line-clamp: unset;
  font-size: 19.5px; line-height: 1.52; opacity: 1; max-width: 64ch; margin: 0;
}
:root main:not(:has(> article)) > div:has(> h2 > a):first-of-type > p:not(:first-child)::first-letter {
  float: left; font-family: var(--fh), Cambria, serif; font-weight: 400; font-size: 62px; line-height: .74;
  margin: 6px 12px 0 0; color: var(--moment);
}
:root main:not(:has(> article)) > div:has(> h2 > a):first-of-type > a:last-child {
  order: 4; align-self: flex-start; margin: 26px 0 0; color: var(--primary); background: none;
  border: 1.5px solid var(--primary); padding: 10px 26px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
:root main:not(:has(> article)) > div:has(> h2 > a):first-of-type > a:last-child:hover { background: var(--primary); color: var(--bg); }
/* M2: Editor's-Picks section label — full-width band ABOVE the 3-card picks row, DETACHED from the hero frame.
   Absolutely positioned into the gap below the hero so it is no longer a band inside the featured card. */
:root main:not(:has(> article)) > div:has(> h2 > a):first-of-type::after {
  content: "Selección de Lucía — empieza por aquí";
  position: absolute; left: 0; right: 0; top: calc(100% + 34px);
  margin: 0; padding: 0 2px 11px;
  font-family: var(--fb), system-ui, sans-serif; font-size: 12.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--primary);
  background: none; border: 0; border-bottom: 2px solid var(--moment); /* hairline underline (moment colour, 2nd of 2 uses) */
}

/* ---- EDITOR'S PICKS (entries 2, 3, 4) — 3-card band with N° anchor ---- */
:root main:not(:has(> article)) > div:has(> h2 > a):nth-of-type(2),
:root main:not(:has(> article)) > div:has(> h2 > a):nth-of-type(3),
:root main:not(:has(> article)) > div:has(> h2 > a):nth-of-type(4) {
  order: 3; grid-column: span 2; position: relative;
  background: #f4ecd9; border-color: rgba(217,168,138,.34);
}
:root main:not(:has(> article)) > div:has(> h2 > a):nth-of-type(2)::before,
:root main:not(:has(> article)) > div:has(> h2 > a):nth-of-type(3)::before,
:root main:not(:has(> article)) > div:has(> h2 > a):nth-of-type(4)::before {
  position: absolute; top: 15px; right: 22px;
  font-family: var(--fh), Cambria, serif; font-style: italic; font-size: 28px; line-height: 1; color: rgba(92,74,138,.42);
}
:root main:not(:has(> article)) > div:has(> h2 > a):nth-of-type(2)::before { content: "N° I"; }
:root main:not(:has(> article)) > div:has(> h2 > a):nth-of-type(3)::before { content: "N° II"; }
:root main:not(:has(> article)) > div:has(> h2 > a):nth-of-type(4)::before { content: "N° III"; }
:root main:not(:has(> article)) > div:has(> h2 > a):nth-of-type(2) > h2,
:root main:not(:has(> article)) > div:has(> h2 > a):nth-of-type(3) > h2,
:root main:not(:has(> article)) > div:has(> h2 > a):nth-of-type(4) > h2 { padding-right: 48px; }

/* ---- STRIP 1: essay-photo band between Picks and Journal ---- */
:root main:not(:has(> article))::before {
  content: "Más abajo"; order: 4; grid-column: 1 / -1;
  min-height: 210px; margin: 30px 0 6px;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px 40px;
  background-color: #241d33; /* atmospheric dark base so the band never reads as a flat washed-grey block */
  background-image: linear-gradient(rgba(28,22,42,.5), rgba(28,22,42,.62)), url("/theme-assets/essay-photo.jpg");
  background-size: cover; background-position: center 34%; border-radius: 10px;
  font-family: var(--fb), system-ui, sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .32em; text-transform: uppercase; color: #F7F1E6; text-shadow: 0 1px 10px rgba(0,0,0,.7);
}

/* ---- STRIP 2: essay-photo band between Journal and the tail ---- */
:root main:not(:has(> article))::after {
  content: "Seguir leyendo"; order: 6; grid-column: 1 / -1;
  min-height: 210px; margin: 30px 0 4px;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px 40px;
  background-color: #201a2e; /* atmospheric dark base so the band never reads as a flat washed-grey block */
  background-image: linear-gradient(rgba(24,19,36,.52), rgba(24,19,36,.64)), url("/theme-assets/essay-photo.jpg");
  background-size: cover; background-position: center 72%; border-radius: 10px;
  font-family: var(--fb), system-ui, sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .32em; text-transform: uppercase; color: #F7F1E6; text-shadow: 0 1px 10px rgba(0,0,0,.7);
}

/* ---- M7: COMPACT ARCHIVE TAIL — full-width magazine index of BOXED cards ---- */
/* wrapper is no longer a single cream panel: it becomes a 3-col grid; each item is its own boxed card */
:root main:not(:has(> article)) > div:not(:has(> h2 > a)) {
  order: 8; grid-column: 1 / -1; margin: 0; padding: 0;
  background: none; border: 0; box-shadow: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 16px; align-items: stretch;
}
/* each direct child (the tail is <div><p><a>…</a></p>…) = a boxed cream archive card, same design
   system as the top journal cards. min-height keeps single-line titles reading as cells, not thin rows. */
:root main:not(:has(> article)) > div:not(:has(> h2 > a)) > * {
  margin: 0; height: 100%; min-height: 62px; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center;
  padding: 20px 22px;
  background: var(--paper);
  border: 1px solid rgba(92,74,138,.15); border-radius: 9px;
  box-shadow: 0 1px 4px rgba(31,20,12,.05);
  transition: transform .15s ease, box-shadow .15s ease;
}
:root main:not(:has(> article)) > div:not(:has(> h2 > a)) > *:hover {
  transform: translateY(-2px); box-shadow: 0 5px 16px rgba(31,20,12,.10);
}
/* archive titles: serif, readable, no dotted rules; paper bg keeps them off any base-theme white */
:root main:not(:has(> article)) > div:not(:has(> h2 > a)) a {
  background: var(--paper); text-decoration: none;
  font-family: var(--fh), Cambria, serif; font-size: 14.5px; line-height: 1.34; letter-spacing: .01em; color: var(--primary);
}
:root main:not(:has(> article)) > div:not(:has(> h2 > a)) a:hover { color: var(--accent); }
/* hedge: if the archive titles are wrapped in a list, promote it so each <li> becomes a boxed grid card */
:root main:not(:has(> article)) > div:not(:has(> h2 > a)) > ul,
:root main:not(:has(> article)) > div:not(:has(> h2 > a)) > ol { display: contents; }
:root main:not(:has(> article)) > div:not(:has(> h2 > a)) li {
  list-style: none; margin: 0; height: 100%; min-height: 62px; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center;
  padding: 20px 22px;
  background: var(--paper);
  border: 1px solid rgba(92,74,138,.15); border-radius: 9px;
  box-shadow: 0 1px 4px rgba(31,20,12,.05);
  transition: transform .15s ease, box-shadow .15s ease;
}
:root main:not(:has(> article)) > div:not(:has(> h2 > a)) li:hover { transform: translateY(-2px); box-shadow: 0 5px 16px rgba(31,20,12,.10); }

/* safety net — any orphan/stray non-div child spans full width, warm, ordered last */
:root main:not(:has(> article)) > :not(div) {
  order: 8; grid-column: 1 / -1; margin: 0;
  background: var(--paper); border-radius: 8px;
}
:root main:not(:has(> article)) > a:not([class*="astro"]) { padding: 12px 24px; border: 1px solid rgba(92,74,138,.12); font-family: var(--fh), Cambria, serif; color: var(--primary); text-decoration: none; }

/* ================================================================ */
/* ARTICLE PAGE (praised photo rhythm + disclosure box preserved)    */
/* ================================================================ */
:root main:has(> article) { max-width: 860px; }
:root main > h1 { font-family: var(--fh), Cambria, serif; font-size: clamp(30px, 4.4vw, 42px); font-weight: 400; color: var(--primary); line-height: 1.14; margin: 8px 0 6px; letter-spacing: .01em; }
:root main > time, :root main > h1 + span { display: block; font-family: var(--fb), system-ui, sans-serif; font-size: 12px; color: var(--accent); margin-bottom: 30px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
/* S6 — persona + location anchor so the article meta is not a bare date */
:root main > time::after, :root main > h1 + span::after { content: "  ·  por Lucía  ·  Bogotá"; }

:root main > article > p { margin-bottom: 1.32em; font-size: 18px; line-height: 1.8; }
:root main > article > p:first-of-type::first-letter { float: left; font-family: var(--fh), Cambria, serif; font-weight: 400; font-size: 58px; line-height: .78; margin: 6px 12px 0 0; color: var(--primary); }
:root main > article > h2 { font-family: var(--fh), Cambria, serif; font-size: 25px; font-weight: 400; color: var(--primary); margin: 1.9em 0 .6em; padding-bottom: 6px; border-bottom: 1px solid var(--accent); letter-spacing: .01em; line-height: 1.2; }
:root main > article > h2:not(:first-of-type)::before { content: "✷ ✷ ✷"; display: block; text-align: center; border: 0; color: var(--accent); opacity: .7; font-size: 14px; letter-spacing: .5em; font-weight: 400; margin: 4px 0 28px; }
:root main > article > h3 { font-family: var(--fh), Cambria, serif; font-size: 21px; font-weight: 400; color: var(--primary); margin: 1.8em 0 .4em; letter-spacing: .01em; border-left: 4px solid var(--accent); background: rgba(92,74,138,0.045); padding: 3px 8px 3px 10px; border-radius: 0 3px 3px 0; }
:root main > article ul, :root main > article ol { margin: 0 0 18px 24px; }
:root main > article li { margin-bottom: 7px; font-size: 16.5px; line-height: 1.72; }
:root main > article li strong, :root main > article > p strong { color: var(--primary); font-weight: 700; }
:root main > article blockquote { border-left: 3px solid var(--accent); padding: 12px 4px 12px 30px; margin: 28px 0; font-family: var(--fh), Cambria, serif; font-style: italic; font-size: 20px; line-height: 1.5; color: var(--primary); position: relative; }
:root main > article blockquote::before { content: "\201C"; position: absolute; left: 10px; top: 4px; font-family: var(--fh), Cambria, serif; font-size: 50px; color: rgba(217,168,138,.55); line-height: 1; }
:root main > article blockquote p { margin: 0; }

/* disclosure / callout (praised) */
:root main > article > div:has(> em) { margin: 0 0 26px; padding: 12px 18px; background: rgba(92,74,138,0.07); border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; font-size: 13.5px; line-height: 1.55; }

/* body links */
:root main > article > p a, :root main > article > p a:visited, :root main > article li a, :root main > article li a:visited { color: var(--primary); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1.5px; font-weight: 600; }
:root main > article > p a:hover, :root main > article li a:hover { color: var(--accent); text-decoration-color: var(--primary); }

/* affiliate CTA — inline button (this site uses /get/). Full path + attr beats body-link (RULE J). */
:root main > article > p a[href^="/get/"], :root main > article > ul > li a[href^="/get/"], :root main > article > ol > li a[href^="/get/"],
:root main > article > p a[href^="/ref/"], :root main > article > p a[href^="/try/"], :root main > article > p a[href^="/check/"],
:root main > article > p a[href^="/partner/"], :root main > article > p a[href^="/go/"], :root main > article > p a[href^="/out/"] {
  display: inline-block; background: var(--primary); color: var(--bg);
  padding: 3px 14px; border-radius: var(--r); text-decoration: none; font-weight: 600;
  font-family: var(--fb), system-ui, sans-serif; font-size: 14.5px; letter-spacing: .01em; line-height: 1.5;
  box-shadow: 0 1px 3px rgba(31,20,12,.2); box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
:root main > article > p a[href^="/get/"]:hover, :root main > article > ul > li a[href^="/get/"]:hover, :root main > article > ol > li a[href^="/get/"]:hover,
:root main > article > p a[href^="/ref/"]:hover, :root main > article > p a[href^="/try/"]:hover, :root main > article > p a[href^="/check/"]:hover,
:root main > article > p a[href^="/partner/"]:hover, :root main > article > p a[href^="/go/"]:hover, :root main > article > p a[href^="/out/"]:hover { background: var(--accent); color: var(--fg); }

:root main > article > img, :root main > article > figure { margin: 0 0 30px; }
:root main > article > img, :root main > article > figure > img { width: 100%; height: auto; display: block; border-radius: var(--r); box-shadow: 0 3px 14px rgba(31, 20, 12, .12); }

:root main > nav { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 14px; font-family: var(--fb), system-ui, sans-serif; line-height: 1.7; }
:root main > nav a { color: var(--primary); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; font-weight: 600; }

/* ---------------------------------------------------------------- */
/* FOOTER                                                           */
/* ---------------------------------------------------------------- */
:root footer { background: transparent; border-top: 1px solid var(--border); padding: 24px 0 34px; margin-top: 56px; text-align: center; font-family: var(--fb), system-ui, sans-serif; font-size: 12px; color: var(--fg); opacity: .62; letter-spacing: .03em; font-style: italic; }
:root footer a { color: var(--fg); text-decoration: none; border-bottom: 1px dotted var(--border); font-style: normal; }
:root footer a:hover { color: var(--primary); border-bottom-color: var(--primary); }

/* ---------------------------------------------------------------- */
/* MOBILE                                                           */
/* ---------------------------------------------------------------- */
@media (max-width: 720px) {
  :root main:not(:has(> article)) { grid-template-columns: 1fr; row-gap: 26px; padding-top: 40px; }
  :root main:not(:has(> article)) > div:has(> h2 > a),
  :root main:not(:has(> article)) > div:has(> h2 > a):first-of-type,
  :root main:not(:has(> article)) > div:has(> h2 > a):nth-of-type(2),
  :root main:not(:has(> article)) > div:has(> h2 > a):nth-of-type(3),
  :root main:not(:has(> article)) > div:has(> h2 > a):nth-of-type(4) { grid-column: 1 / -1; }
  :root main:not(:has(> article)) > div:has(> h2 > a):first-of-type { padding: 30px 26px; margin-bottom: 46px; }
  :root main:not(:has(> article)) > div:has(> h2 > a):first-of-type::after { top: calc(100% + 26px); padding: 0 2px 10px; letter-spacing: .14em; font-size: 11.5px; }
  :root main:not(:has(> article)) > div:not(:has(> h2 > a)) { grid-template-columns: 1fr; }
  :root > body > header:has(h1) { padding: 52px 20px 42px; }
}


/* 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;
  }
}


/* premium-upgrade v1 */
/* premium editorial upgrade — style=Cup-of-Jo-personal overlay=25% grid=mixed scale=balanced family=flat-divs */


/* ── 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: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: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: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: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;
}

/* ── flat-divs family: cards 5 & 6 also get photo headers ── */
:root main:not(:has(> h1)) > div:nth-of-type(5) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-strip-1.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}
:root main:not(:has(> h1)) > div:nth-of-type(6) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-strip-2.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: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: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: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: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))::before,
  :root main:not(:has(> h1))::after { min-height: 240px; }
  :root main:has(> h1) > article > p:first-of-type::first-letter { font-size: 60px; }
}