*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;line-height:1.7;color:#111;background:#fff}
.sc-mQqSRu{max-width:900px;margin:0 auto;padding:0 28px}
.sc-heyOMI{background:#111;color:#fff;padding:64px 0;margin-bottom:48px}
.sc-heyOMI h1{font-size:42px;font-weight:800;letter-spacing:-1px;margin-bottom:8px}
.sc-heyOMI p{font-size:18px;opacity:.7}
.sc-heyOMI a{color:#fff;text-decoration:none;font-size:22px;font-weight:800}
.sc-TTiLZI{padding:0}
.sc-QCPONq{padding:32px 0;border-left:4px solid #111;padding-left:24px;margin-bottom:28px}
.sc-QCPONq h2{font-size:24px;font-weight:700;margin-bottom:6px}
.sc-QCPONq h2 a{color:#111;text-decoration:none}
.sc-QCPONq h2 a:hover{text-decoration:underline}
.sc-QCPONq .sc-bUXbTK{font-size:12px;font-weight:600;text-transform:uppercase;color:#888;letter-spacing:1px;margin-bottom:8px}
.sc-QCPONq p{font-size:15px;color:#444;margin-bottom:10px}
.sc-MjNsOJ{display:inline-block;background:#111;color:#fff;padding:8px 20px;font-size:13px;font-weight:700;text-decoration:none;text-transform:uppercase;letter-spacing:1px}
.sc-MjNsOJ:hover{background:#333}
.sc-bdSFRC{padding-bottom:60px}
.sc-bdSFRC h1{font-size:38px;font-weight:800;letter-spacing:-1px;margin-bottom:10px}
.sc-bdSFRC time{font-size:12px;font-weight:600;text-transform:uppercase;color:#888;letter-spacing:1px;display:block;margin-bottom:28px}
.sc-bdSFRC h2{font-size:26px;font-weight:700;margin:40px 0 14px}
.sc-bdSFRC h3{font-size:20px;font-weight:700;margin:32px 0 10px}
.sc-bdSFRC p{margin-bottom:18px;font-size:17px}
.sc-bdSFRC ul,.sc-bdSFRC ol{margin:0 0 18px 24px}
.sc-bdSFRC a{color:#111;font-weight:600;text-decoration:underline}
.sc-bdSFRC img{max-width:100%;height:auto;margin:20px 0}
.sc-KmrOQU{background:#111;color:#888;padding:28px 0;margin-top:48px;text-align:center;font-size:12px}
.sc-KmrOQU a{color:#888;text-decoration:none}
.sc-vNJiUd{background:#222;color:#aaa;padding:14px 20px;margin-bottom:24px;font-size:13px;font-style:italic}
.sc-wUIwxY{background:#1a1a1a;color:#888;padding:14px 20px;margin-top:32px;font-size:12px;border-top:3px solid #444}
.sc-KpjNPO{font-size:12px;font-weight:600;text-transform:uppercase;color:#666;letter-spacing:1px;margin:-20px 0 28px;padding-left:12px;border-left:2px solid #ccc}
.sc-JBoLuW{margin:0 0 24px}
.sc-gASeoN{width:100%;height:auto;border-radius:0}
.sc-fvwJZi{border-left:4px solid #111;padding-left:24px;margin-top:48px}
.sc-fvwJZi h3{font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}
.sc-fvwJZi ul{list-style:none;padding:0}
.sc-fvwJZi li{padding:6px 0}
.sc-fvwJZi a{color:#111;text-decoration:underline;font-weight:600}
.sc-VJJIzM{border-left:4px solid #ddd;padding-left:24px;margin-top:36px}
.sc-VJJIzM ul{list-style:none;padding:0}
.sc-VJJIzM li{padding:6px 0;font-size:16px}
.sc-VJJIzM a{color:#111;text-decoration:none;font-weight:600}
.sc-VJJIzM a:hover{text-decoration:underline}
.sc-VJJIzM .sc-bUXbTK{margin:0 0 0 8px}
/* === Theme === */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&family=Playfair+Display:wght@400;700&display=swap');
body{font-family:'Lora',sans-serif;color:#1A1A1A;background:#FDFBF7}
.sc-heyOMI{background:#2D0912;color:#fff}
.sc-heyOMI h1{font-family:'Playfair Display',serif;color:#fff}
.sc-heyOMI p{color:rgba(255,255,255,.75)}
.sc-heyOMI a{color:#fff;text-decoration:none}
.card h2{font-family:'Playfair Display',serif}
.card h2 a{color:#2D0912}
.card h2 a:hover{color:#D4AF37}
.read-more{color:#D4AF37}
.article-content h1{font-family:'Playfair Display',serif}
.article-content h2{font-family:'Playfair Display',serif}
.article-content a{color:#D4AF37}
.article-content img{border-radius:8px}
.affiliate-disclosure{border-radius:8px}
.ymyl-disclaimer{border-radius:8px}
/* === Custom === */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500;1,9..144,600&family=Mulish:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  --color-primary:       #532239;
  --color-primary-dark:  #33172A;
  --color-accent:        #7E8F5C;
  --color-accent-dark:   #5F6E45;
  --color-bg:            #FAF4EC;
  --color-surface:       #F1E8DA;
  --color-text:          #2B211F;
  --color-muted:         #6B5850;
  --color-border:        #E3D3C2;
  --color-link:          #5F6E45;
  --color-link-hover:    #7E8F5C;
  --color-header-bg:     #33172A;
  --color-header-text:   #F5EDE2;
  --color-footer-bg:     #21101B;
  --color-footer-text:   #D9C9BE;
  --color-moment:        #B34F2A;
  --paper-2:             #F4EBD8;
  --paper-3:             #EFE5D1;
  --font-heading:        'Fraunces', Georgia, serif;
  --font-body:           'Mulish', system-ui, -apple-system, sans-serif;
  --font-size-base:      17px;
  --font-size-sm:        15px;
  --font-size-lg:        19px;
  --line-height-body:    1.7;
  --line-height-heading: 1.25;
  --border-radius:       10px;
  --sp:                  8px;
  --max-w:               700px;
  --max-w-wide:          920px;
}

/* ── Reset / base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

:root body {
  margin: 0; padding: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

:root img { max-width: 100%; height: auto; border-radius: var(--border-radius); }
:root ::selection { background-color: rgba(126, 143, 92, 0.25); color: var(--color-text); }

/* ── Typography ───────────────────────────────────────────── */
:root h1, :root h2, :root h3, :root h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--line-height-heading);
  color: var(--color-primary);
  margin: 1.5em 0 0.5em;
}

:root h1 { font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 700; margin-top: 0; }
:root h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); margin-top: 1.8em; }
:root h3 { font-size: clamp(1.15rem, 2.5vw, 1.4rem); font-weight: 600; }
:root h4 { font-size: 1.05rem; font-weight: 600; font-style: italic; }

:root p { max-width: 68ch; margin: 0 0 1.3em; font-size: var(--font-size-base); }

:root a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.2s ease;
}
:root a:hover { color: var(--color-link-hover); }

:root strong { color: var(--color-primary); font-weight: 700; }
:root em { font-style: italic; }

/* ── Lists ────────────────────────────────────────────────── */
:root ul, :root ol { padding-left: 1.5em; margin: 0 0 1.3em; max-width: 66ch; }
:root li { margin-bottom: 0.55em; line-height: var(--line-height-body); }
:root li::marker { color: var(--color-accent-dark); }
:root li:last-child { margin-bottom: 0; }

/* ── Blockquote (nota al margen del cuaderno) ────────────── */
:root blockquote {
  border-left: 3px solid var(--color-accent);
  padding: 1.1em 1.6em;
  margin: 2em 0;
  background-color: var(--color-surface);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  max-width: 66ch;
  font-style: italic;
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  color: var(--color-primary);
}
:root blockquote p { margin-bottom: 0; max-width: none; }

:root hr { border: none; border-top: 1px solid var(--color-border); margin: 2.5em auto; max-width: 36ch; }

/* ── Header ───────────────────────────────────────────────── */
:root header {
  background-color: var(--color-header-bg);
  color: var(--color-header-text);
  padding: 2.75rem 1.5rem 2.25rem;
  text-align: center;
}
:root header h1 { font-family: var(--font-heading); font-size: clamp(1.6rem, 4vw, 2.3rem); color: var(--color-header-text); margin: 0 0 0.5rem; }
:root header h1 a { color: var(--color-header-text); text-decoration: none; }
:root header p { color: rgba(245, 237, 226, 0.78); font-size: var(--font-size-sm); font-style: italic; max-width: 560px; margin: 0 auto; }
:root header a { color: var(--color-header-text); }
:root header a:hover { color: var(--color-accent); }

/* ── Navigation ───────────────────────────────────────────── */
:root nav {
  background-color: rgba(51, 23, 42, 0.94);
  padding: 0.65rem 1.5rem;
  display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center;
}
:root nav a { color: rgba(245, 237, 226, 0.85); text-decoration: none; font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: 500; letter-spacing: 0.02em; }
:root nav a:hover { color: #FFFFFF; }

/* ── Layout containers ────────────────────────────────────── */
:root .container { max-width: var(--max-w-wide); margin: 0 auto; padding: 0 1.5rem; }
:root main { max-width: var(--max-w-wide); margin: 0 auto; padding: 2.5rem 0; }

/* ── Bold template hero (homepage) ───────────────────────── */
:root .sc-heyOMI { background-color: var(--color-primary); color: #FFFFFF; padding: 3rem 1.5rem 2.75rem; text-align: center; }
:root .sc-heyOMI h1 { font-family: var(--font-heading); font-size: clamp(1.9rem, 4vw, 2.4rem); color: #FFFFFF; margin: 0 0 0.5rem; }
:root .sc-heyOMI p { font-size: 1.05rem; color: rgba(255, 255, 255, 0.82); max-width: 560px; margin: 0 auto; font-style: italic; }
:root .sc-heyOMI a { color: #FFFFFF; text-decoration: none; }

/* ── Article content ──────────────────────────────────────── */
:root .article-content { max-width: var(--max-w); margin: 0 auto; }
:root .article-content h1, :root .article-content h2, :root .article-content h3 { color: var(--color-primary); }
:root .article-content h2 { padding-bottom: 0.3em; border-bottom: 1px solid var(--color-border); }
:root .article-content a { color: var(--color-link); font-weight: 500; }
:root .article-content a:hover { color: var(--color-link-hover); }
:root .article-content img { border-radius: var(--border-radius); display: block; margin: 1.8em auto; }

/* In-article table-of-contents nav (distinto del nav de cabecera del sitio) */
:root .article-content nav { background-color: var(--color-surface); border-left: 3px solid var(--color-accent); border-radius: 0; padding: 1.2rem 1.6rem; display: block; }
:root .article-content nav a { color: var(--color-link); font-weight: 400; display: inline-block; }
:root .article-content nav a:hover { color: var(--color-link-hover); }

/* ── Card grid (listados) ──────────────────────────────────── */
:root .card {
  background-color: var(--paper-2);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 1.6rem;
  box-shadow: 0 2px 10px rgba(83, 34, 57, 0.06);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
:root .card:hover { border-color: var(--color-accent); box-shadow: 0 4px 16px rgba(83, 34, 57, 0.10); }
:root .card h2 { font-family: var(--font-heading); font-size: 1.3rem; margin: 0 0 0.5rem; }
:root .card h2 a { color: var(--color-primary); text-decoration: none; }
:root .card h2 a:hover { color: var(--color-accent-dark); }
:root .card p { color: var(--color-muted); font-size: var(--font-size-sm); margin-bottom: 0.75rem; max-width: none; }

:root .read-more {
  color: var(--color-accent-dark);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent-dark);
  padding-bottom: 1px;
}
:root .read-more:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* ── Post meta / tables ───────────────────────────────────── */
:root .post-meta { font-size: var(--font-size-sm); color: var(--color-muted); font-style: italic; margin-bottom: 2rem; }
:root table { width: 100%; border-collapse: collapse; margin: 2.2em 0; }
:root th, :root td { padding: 0.75em 0.6em; text-align: left; border-bottom: 1px solid var(--color-border); }
:root th { font-family: var(--font-heading); color: var(--color-primary); }
:root tr:nth-child(even) { background-color: var(--color-surface); }

/* ── Footer ───────────────────────────────────────────────── */
:root footer { background-color: var(--color-footer-bg); color: var(--color-footer-text); padding: 2.5rem 1.5rem; text-align: center; font-size: var(--font-size-sm); margin-top: 3.5rem; }
:root footer a { color: var(--color-accent); text-decoration: underline; }
:root footer a:hover { color: #FFFFFF; }
:root footer p { max-width: none; margin-bottom: 0.5rem; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 600px) {
  :root body { font-size: 16px; }
  :root main { padding: 1.5rem 0; }
  :root header { padding: 2rem 1.25rem 1.75rem; }
  :root .sc-heyOMI { padding: 2rem 1rem 1.75rem; }
  :root .article-content { padding: 0 0.25rem; }
  :root blockquote { padding: 0.9em 1.2em; }
}

/* ════════════════════════════════════════════════════════════
   v.ac4639 — layout revision
   Editorial rebuild of "Diario de Copas" (styled-components build;
   real class names are sc-*, but every rule below is driven off
   element + structural selectors so a hash change can't break it).
   Homepage = hero → paired Editor's Picks → EL CUADERNO photo band →
   journal grid → SEGUIR LEYENDO photo band. Live assets that resolve
   200 on THIS site: /theme-assets/hero-masthead.jpg (masthead) and
   /theme-assets/article-hero.jpg (bands + article top).
   ════════════════════════════════════════════════════════════ */

/* ── @font-face safety net (top @import is dropped when concatenated) */
@font-face { font-family: 'FrauncesFB'; src: local('Georgia'); }

/* ── MASTHEAD (home) — real photo + wine overlay + italic wordmark ── */
:root body > div:first-child:has(h1) {
  position: relative;
  background-image:
    linear-gradient(180deg, rgba(43,20,33,.62), rgba(43,20,33,.78)),
    url("/theme-assets/hero-masthead.jpg");
  background-size: cover;
  background-position: center 60%;
  padding: 5.5rem 1.5rem 4.25rem;
  text-align: center;
  border-bottom: 3px solid var(--color-primary-dark);
}
:root body > div:first-child:has(h1) > div { max-width: 760px; margin: 0 auto; position: relative; }

/* signature ❦ hedera — moment colour use #1 of 2 */
:root body > div:first-child:has(h1) > div::before {
  content: "❦";
  display: block;
  color: var(--color-moment);
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: 1rem;
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
}
:root body > div:first-child:has(h1) h1 {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.3rem, 6vw, 3.5rem);
  letter-spacing: .005em;
  color: #FAF4EC;
  margin: 0 0 .65rem;
  text-shadow: 0 2px 14px rgba(20,10,16,.45);
}
:root body > div:first-child:has(h1) p {
  color: rgba(250,244,236,.9);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.06rem;
  line-height: 1.7;
  max-width: 600px;
  margin: 0 auto;
  text-shadow: 0 1px 8px rgba(20,10,16,.4);
}

/* ── MASTHEAD (article) — compact wine bar, italic wordmark ── */
:root body > div:first-child:not(:has(h1)) {
  background-color: var(--color-header-bg);
  text-align: center;
  padding: 1.15rem 1.5rem;
  border-bottom: 1px solid rgba(179,79,42,.35);
}
:root body > div:first-child:not(:has(h1)) a {
  color: var(--color-header-text);
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: .01em;
  text-decoration: none;
}
:root body > div:first-child:not(:has(h1)) a:hover { color: var(--color-accent); }

/* ══════════════════ HOMEPAGE EDITORIAL GRID ══════════════════ */
:root main:not(:has(> article)) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 32px;
  align-items: stretch;
  max-width: 1060px;
  width: 100%;
  margin: 0 auto;
  padding: 84px 24px 0;
  box-sizing: border-box;
}

/* every homepage entry: shared quiet card shell (soft frame, warm paper) */
:root main:not(:has(> article)) > div {
  background-color: var(--paper-2);
  border: 1px solid var(--color-border);
  border-radius: 9px;
  padding: 26px 32px;
  margin: 0;
  box-shadow: 0 1px 4px rgba(83,34,57,.05);
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
  display: flex;
  flex-direction: column;
}
:root main:not(:has(> article)) > div:hover {
  border-color: var(--color-accent);
  box-shadow: 0 6px 20px rgba(83,34,57,.10);
}

/* date line → tracked sans kicker (secondary olive accent, visible everywhere) */
:root main:not(:has(> article)) > div > p:first-child {
  order: -1;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin: 0 0 .55rem;
  max-width: none;
}
:root main:not(:has(> article)) > div > h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.18rem;
  line-height: 1.28;
  margin: 0 0 .55rem;
}
:root main:not(:has(> article)) > div > h2 a {
  color: var(--color-primary);
  text-decoration: none;
}
:root main:not(:has(> article)) > div > h2 a:hover { color: var(--color-accent-dark); }
:root main:not(:has(> article)) > div > p {
  color: var(--color-muted);
  font-size: 15.5px;
  line-height: 1.62;
  margin: 0 0 1.1rem;
  max-width: 64ch;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* CTA pill (last <a> of each entry) — wine fill, cream text, ES label */
:root main:not(:has(> article)) > div > a:last-child {
  margin-top: auto;
  align-self: flex-start;
  display: inline-block;
  background-color: var(--color-primary);
  color: #FAF4EC;
  text-decoration: none;
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  padding: 11px 22px;
  font-size: 0;
  line-height: 1;
}
:root main:not(:has(> article)) > div > a:last-child::after {
  content: "Leer la entrada \2192";
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #FAF4EC;
}
:root main:not(:has(> article)) > div > a:last-child:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* ── HERO (entry 1) — THE loud voice, full width ── */
:root main:not(:has(> article)) > div:nth-child(1) {
  grid-column: 1 / -1;
  background-color: var(--paper-2);
  border-color: rgba(83,34,57,.22);
  padding: 46px 52px 44px;
  position: relative;
  margin-bottom: 4px;       /* row-gap + picks margin-top carry the section break */
  box-shadow: 0 3px 18px rgba(83,34,57,.08);
}
:root main:not(:has(> article)) > div:nth-child(1) > p:first-child::before {
  content: "Última entrada del cuaderno · ";
}
:root main:not(:has(> article)) > div:nth-child(1) > p:first-child {
  color: var(--color-accent-dark);
  font-size: 12.5px;
  letter-spacing: .22em;
}
:root main:not(:has(> article)) > div:nth-child(1) > h2 {
  font-size: clamp(2rem, 5vw, 3.15rem);
  line-height: 1.12;
  font-weight: 600;
  margin: 0 0 .2rem;
  max-width: 20ch;
}
:root main:not(:has(> article)) > div:nth-child(1) > p:nth-of-type(2) {
  font-family: var(--font-heading);
  color: var(--color-text);
  font-size: 1.28rem;
  line-height: 1.5;
  max-width: 60ch;
  -webkit-line-clamp: 4;
  margin-top: .9rem;
}
/* drop cap — moment colour use #2 of 2 */
:root main:not(:has(> article)) > div:nth-child(1) > p:nth-of-type(2)::first-letter {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 3.6em;
  line-height: .74;
  float: left;
  margin: .06em .12em 0 0;
  color: var(--color-moment);
}
:root main:not(:has(> article)) > div:nth-child(1) > a:last-child {
  background-color: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
  padding: 13px 30px;
}
:root main:not(:has(> article)) > div:nth-child(1) > a:last-child::after {
  content: "Leer la última entrada \2192";
  color: var(--color-primary);
}
:root main:not(:has(> article)) > div:nth-child(1) > a:last-child:hover {
  background-color: var(--color-primary);
}
:root main:not(:has(> article)) > div:nth-child(1) > a:last-child:hover::after { color: #FAF4EC; }

/* ── EDITOR'S PICKS band (entries 2–3) — paired feature ── */
:root main:not(:has(> article)) > div:nth-child(2),
:root main:not(:has(> article)) > div:nth-child(3) {
  margin-top: 54px;                 /* drop the row to clear the section label */
  border-top: 3px solid var(--color-accent);
  background-color: var(--paper-3);
}
/* full-row section label, above the row, outside the frames (RULE B) */
:root main:not(:has(> article)) > div:nth-child(2) { position: relative; }
:root main:not(:has(> article)) > div:nth-child(2)::before {
  content: "Selección — lo que leería primero";
  position: absolute;
  left: 0;
  bottom: calc(100% + 20px);
  width: calc(200% + 32px);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-primary);
  padding-bottom: 10px;
  /* RULE M2 fix: hairline must clearly read as a full-row section band, not a
     faint near-invisible line (pale border on pale paper). Wine-tinted rule. */
  border-bottom: 1.5px solid rgba(83, 34, 57, 0.32);
}

/* ── STRIP 1 "EL CUADERNO" — photo band on the full-width lead entry ── */
:root main:not(:has(> article)) > div:nth-child(4) {
  grid-column: 1 / -1;
  position: relative;
  margin-top: 32px;                 /* + 40px row-gap ≈ 72px section break */
  padding-top: 232px;
  padding-bottom: 34px;
}
:root main:not(:has(> article)) > div:nth-child(4)::before {
  content: "El Cuaderno";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 200px;
  border-radius: 9px 9px 0 0;
  background-image:
    linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.25)),
    url("/theme-assets/article-hero.jpg");
  background-size: cover;
  background-position: center 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #FAF4EC;
  text-shadow: 0 1px 8px rgba(0,0,0,.55);
}
:root main:not(:has(> article)) > div:nth-child(4) > h2 { font-size: 1.5rem; max-width: 24ch; }
:root main:not(:has(> article)) > div:nth-child(4) > p { max-width: 66ch; -webkit-line-clamp: 2; }

/* ── STRIP 2 "SEGUIR LEYENDO" — fallback closing band (only when the homepage
   has NO archive tail). When a <div><ul> archive tail exists, RULE M6 wants the
   position-2 strip BETWEEN the journal grid and that tail, so it is attached to
   the archive tail's ::before below instead (this ::after is then suppressed). ── */
:root main:not(:has(> article)):not(:has(> div > ul))::after {
  content: "Seguir leyendo";
  grid-column: 1 / -1;
  margin-top: 32px;
  height: 210px;
  border-radius: 9px;
  background-image:
    linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.25)),
    url("/theme-assets/article-hero.jpg");
  background-size: cover;
  background-position: center 70%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #FAF4EC;
  text-shadow: 0 1px 8px rgba(0,0,0,.55);
}

/* ══════════════ ARCHIVE TAIL — "entradas anteriores" index (RULE M7) ══════════════
   The base theme appends older posts as   main > div > ul > li > a + span.sc-*.
   The class hash rotates on redeploy, so target it STRUCTURALLY as the homepage
   child <div> that holds a <ul> (feature cards hold h2/p/a, never a <ul>).
   Goal: a full-width magazine index of boxed cream cards with the SAME design
   system as the top-of-page journal cards (paper token, hairline border, 9px
   radius, soft shadow, hover lift) — never a plain narrow link list. */
:root main:not(:has(> article)) > div:has(> ul) {
  grid-column: 1 / -1;              /* escape the 2-col grid → full width */
  background-color: transparent;    /* it is a SECTION, the <li>s are the cards */
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  display: block;
}
:root main:not(:has(> article)) > div:has(> ul):hover {
  box-shadow: none;                 /* neutralise the generic card hover shadow */
}

/* position-2 hero-photo strip — now sits BETWEEN the journal grid and the
   archive tail, the position RULE M6 requires. Same asset + overlay label. */
:root main:not(:has(> article)) > div:has(> ul)::before {
  content: "Seguir leyendo";
  display: flex;
  align-items: center;
  justify-content: center;
  height: 210px;
  margin-bottom: 34px;
  border-radius: 9px;
  background-image:
    linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.25)),
    url("/theme-assets/article-hero.jpg");
  background-size: cover;
  background-position: center 70%;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #FAF4EC;
  text-shadow: 0 1px 8px rgba(0,0,0,.55);
}

/* the <ul> becomes the boxed-card magazine grid */
:root main:not(:has(> article)) > div:has(> ul) > ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 16px;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}
:root main:not(:has(> article)) > div:has(> ul) > ul > li {
  margin: 0;
  min-width: 0;                     /* let 1fr cells shrink; never force overflow */
  background-color: var(--paper-2);
  border: 1px solid var(--color-border);
  border-radius: 9px;
  box-shadow: 0 1px 4px rgba(83,34,57,.05);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
:root main:not(:has(> article)) > div:has(> ul) > ul > li:hover {
  border-color: var(--color-accent);
  box-shadow: 0 6px 20px rgba(83,34,57,.10);
  transform: translateY(-2px);
}
/* title — open serif at readable weight (RULE M9: small titles ≤ 600 weight) */
:root main:not(:has(> article)) > div:has(> ul) > ul > li > a {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--color-primary);
  text-decoration: none;
  overflow-wrap: break-word;        /* long titles wrap, never overflow the cell */
}
:root main:not(:has(> article)) > div:has(> ul) > ul > li > a:hover { color: var(--color-accent-dark); }
/* date span → tracked olive kicker, pinned above the title */
:root main:not(:has(> article)) > div:has(> ul) > ul > li > span {
  order: -1;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
}
/* archive grid density steps down before the mobile 1-col collapse (≤640) */
@media (max-width: 860px) {
  :root main:not(:has(> article)) > div:has(> ul) > ul {
    grid-template-columns: repeat(2, 1fr);
  }
  :root main:not(:has(> article)) > div:has(> ul)::before { height: 168px; }
}

/* ══════════════════ ARTICLE PAGE polish ══════════════════ */
:root main:has(> article) {
  max-width: 760px;
  padding: 2.5rem 1.5rem 4rem;
}
:root main:has(> article) > hgroup { margin-bottom: 2.2rem; }
:root main:has(> article) > hgroup h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.14;
  color: var(--color-primary);
  margin: 0 0 .6rem;
}
:root main:has(> article) > hgroup time {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
}
/* NOTE S6: bare date-only meta → add the persona byline + location line so the
   article carries a personality anchor (Eliana Marchetti, Pocitos, Montevideo). */
:root main:has(> article) > hgroup time::after {
  content: " · Por Eliana Marchetti · Pocitos";
  color: var(--color-muted);
  font-weight: 500;
}
:root main:has(> article) > article > section img,
:root main:has(> article) > article > section > img {
  width: 100%;
  border-radius: var(--border-radius);
  margin: .4em auto 1.6em;
  display: block;
}
:root main:has(> article) > article > p { font-size: 18.5px; line-height: 1.78; }
/* opening drop cap (wine — not the moment colour) */
:root main:has(> article) > article > p:first-of-type::first-letter {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 3.3em;
  line-height: .78;
  float: left;
  margin: .04em .1em 0 0;
  color: var(--color-primary);
}
/* dinkus between sections (matches reference target) */
:root main:has(> article) > article h2 {
  border: none;
  padding: 0;
  font-size: clamp(1.4rem, 3.2vw, 1.9rem);
}
:root main:has(> article) > article h2::before {
  content: "✷ ✷ ✷";
  display: block;
  text-align: center;
  color: var(--color-accent);
  letter-spacing: .5em;
  font-size: .82rem;
  margin: 1.9em 0 1em;
}
/* hanging quote on blockquotes */
:root main:has(> article) > article blockquote { position: relative; }
:root main:has(> article) > article blockquote::before {
  content: "\201C";
  position: absolute;
  top: -.12em; left: .28em;
  font-family: var(--font-heading);
  font-size: 3.2rem;
  line-height: 1;
  color: rgba(126,143,92,.42);
}
:root main:has(> article) > article blockquote p { padding-left: 1.4em; }

/* affiliate CTA (/out/…) → inline wine pill; full path + attr beats body-link (RULE J) */
:root main:has(> article) > article a[href^="/out/"],
:root main:has(> article) > article p a[href^="/out/"],
:root main:has(> article) > article li a[href^="/out/"],
:root main:has(> article) > article ul a[href^="/out/"] {
  display: inline-block;
  background-color: var(--color-primary);
  color: #FAF4EC;
  padding: .5em 1.15em;
  margin: .15em 0;
  border-radius: 8px;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .015em;
}
:root main:has(> article) > article a[href^="/out/"]:hover,
:root main:has(> article) > article p a[href^="/out/"]:hover,
:root main:has(> article) > article li a[href^="/out/"]:hover,
:root main:has(> article) > article ul a[href^="/out/"]:hover {
  background-color: var(--color-primary-dark);
  color: #FAF4EC;
}

/* "Nota" margin box (last <div> of the article) — Eliana's own aside, wine */
:root main:has(> article) > article > div {
  background-color: var(--color-primary-dark);
  color: var(--color-header-text);
  border-radius: var(--border-radius);
  padding: 1.2rem 1.5rem;
  margin: 2.4em 0 0;
}
:root main:has(> article) > article > div a { color: var(--color-accent); }
:root main:has(> article) > article > div em { color: var(--color-header-text); }

/* Disclosure / Nota boxes by their build class (belt-and-suspenders w/ current hashes) */
.sc-vNJiUd, .sc-wUIwxY {
  background-color: var(--color-primary-dark);
  color: var(--color-header-text);
  border-radius: var(--border-radius);
  padding: 1rem 1.4rem;
}
.sc-vNJiUd em, .sc-wUIwxY em { color: var(--color-header-text); }

/* ── Responsive: collapse the editorial grid to one column ── */
@media (max-width: 760px) {
  :root main:not(:has(> article)) {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 40px 18px 0;
  }
  :root main:not(:has(> article)) > div,
  :root main:not(:has(> article)) > div:nth-child(1),
  :root main:not(:has(> article)) > div:nth-child(4) { grid-column: 1 / -1; }
  :root main:not(:has(> article)) > div:nth-child(1) { padding: 34px 26px; margin-bottom: 30px; }
  :root main:not(:has(> article)) > div:nth-child(2),
  :root main:not(:has(> article)) > div:nth-child(3) { margin-top: 0; }
  :root main:not(:has(> article)) > div:nth-child(2) { margin-top: 46px; }
  :root main:not(:has(> article)) > div:nth-child(2)::before { width: 100%; }
  :root main:not(:has(> article)) > div:nth-child(4) { padding-top: 190px; margin-top: 8px; }
  :root main:not(:has(> article)) > div:nth-child(4)::before { height: 158px; }
  :root main:not(:has(> article))::after { height: 168px; }
  :root main:not(:has(> article)) > div:nth-child(1) > h2 { max-width: none; }
}

/* ── Touch tap targets (eval: READ NOW / author list too thin) ── */
@media (max-width: 1024px) {
  :root main:not(:has(> article)) > div > a:last-child { padding: 14px 24px; }
  :root main:has(> article) > article ul li { margin-bottom: .2em; }
  :root main:has(> article) > article ul li a { display: block; padding: .5em 0; }
}


/* 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=Monocle-Swiss overlay=40% grid=asymmetric scale=dramatic 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; }
}


/* premium-upgrade v4 */
/* premium-upgrade v4 — surgical bundle. Applied 2026-08-30.
   Fixes: M10 CTA / M11 dinkus leak / M4 heights / M9 typography / M5 frames.
   Kills v2 "LATEST" label (proven counterproductive from v2 diagnosis). */

/* ── Kill v2 counterproductive homepage label ── */
:root main:not(:has(> h1))::before { content: none !important; }

/* ── M10: affiliate CTA visibility on article body ── */
:root main:has(> h1) a[href^="/try/"],
:root main:has(> h1) a[href^="/ref/"],
:root main:has(> h1) a[href^="/go/"],
:root main:has(> h1) a[href^="/out/"],
:root main:has(> h1) a[href^="/check/"],
:root main:has(> h1) a[href^="/view/"],
:root main:has(> h1) a[href*="hotmart.com"],
:root main:has(> h1) a[href*="digistore24"],
:root main:has(> h1) a[href*="clickbank"] {
  display: inline-block !important;
  background: var(--primary) !important;
  color: var(--bg) !important;
  padding: 6px 14px !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  letter-spacing: 0.02em !important;
}

/* ── M11: prevent dinkus leaking onto article page's first h2 ── */
:root main:has(> h1) > article > h2:first-of-type::before {
  content: none !important;
}

/* ── M4: force equal-height cards via grid stretch + card fill ── */
:root main:not(:has(> h1)) > div:has(> div) {
  align-items: stretch !important;
}
:root main:not(:has(> h1)) > div:has(> div) > div {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
:root main:not(:has(> h1)) > div > article {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
/* also for flat-divs family */
:root main:not(:has(> h1)) > div {
  height: 100% !important;
}

/* ── M9: cap small-title weight so Bebas/Anton counters don't fill in ── */
:root main:not(:has(> h1)) > div > div > h2,
:root main:not(:has(> h1)) > div > div > h2 a,
:root main:not(:has(> h1)) > section > ul > li > a,
:root main:not(:has(> h1)) > div > p > a {
  font-weight: 500 !important;
}

/* ── M5: universal soft frame fallback for card-like elements ── */
:root main:not(:has(> h1)) > div > div,
:root main:not(:has(> h1)) > div > article,
:root main:not(:has(> h1)) > article {
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.05) !important;
}