*{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-x4qMaMZ8{max-width:640px;margin:0 auto;padding:0 20px}
.astro-4MkFT3g0{padding:60px 0 40px;border-bottom:1px solid #ccc;margin-bottom:48px}
.astro-4MkFT3g0 h1{font-size:24px;font-weight:400;letter-spacing:-.5px}
.astro-4MkFT3g0 p{font-size:14px;color:#777;margin-top:6px;font-style:italic}
.astro-4MkFT3g0 a{color:#2a2a2a;text-decoration:none;font-size:24px;font-weight:400;letter-spacing:-.5px}
.astro-syDp0s4e{padding:20px 0}
.astro-syDp0s4e h2{font-size:18px;font-weight:400;margin-bottom:4px}
.astro-syDp0s4e h2 a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.astro-syDp0s4e h2 a:hover{border-bottom-color:#2a2a2a}
.astro-syDp0s4e .astro-0DcISNiu{font-size:12px;color:#aaa;margin-bottom:6px}
.astro-syDp0s4e p{font-size:14px;color:#666}
.astro-f60QoQS4{color:#888;font-size:13px;text-decoration:none}
.astro-f60QoQS4:hover{color:#2a2a2a}
.astro-sNO6Y1r5{padding-bottom:60px}
.astro-sNO6Y1r5 h1{font-size:28px;font-weight:400;margin-bottom:8px}
.astro-sNO6Y1r5 .astro-0DcISNiu{font-size:12px;color:#aaa;display:block;margin-bottom:32px}
.astro-sNO6Y1r5 h2{font-size:21px;font-weight:400;margin:40px 0 12px;border-bottom:1px solid #eee;padding-bottom:6px}
.astro-sNO6Y1r5 h3{font-size:17px;margin:28px 0 8px}
.astro-sNO6Y1r5 p{margin-bottom:18px;font-size:16px}
.astro-sNO6Y1r5 ul,.astro-sNO6Y1r5 ol{margin:0 0 18px 20px}
.astro-sNO6Y1r5 a{color:#555;border-bottom:1px solid #ccc}
.astro-sNO6Y1r5 a:hover{color:#000;border-bottom-color:#000}
.astro-sNO6Y1r5 img{max-width:100%;height:auto;margin:24px 0}
.astro-MGi29fwA{border-top:1px solid #ddd;padding:20px 0;margin-top:48px;text-align:center;font-size:12px;color:#aaa}
.astro-MGi29fwA a{color:#aaa;text-decoration:none}
.astro-uBNn5A3R{padding:0 0 16px;margin-bottom:24px;font-size:12px;color:#aaa;font-style:italic;border-bottom:1px solid #eee}
.astro-tCTRWDZx{padding:16px 0 0;margin-top:32px;font-size:11px;color:#999;border-top:1px solid #eee}
.astro-jTrqAbaG{font-size:12px;color:#aaa;margin:-26px 0 32px;font-weight:300}
.astro-ewHa813r{margin:0 auto 32px;max-width:720px}
.astro-yJGU9Vhk{width:100%;height:auto}
.astro-hEXpQnlS{margin-top:40px;padding-top:20px;border-top:1px solid #eee;font-size:14px;color:#888}
.astro-hEXpQnlS em{color:#aaa}
.astro-hEXpQnlS a{color:#555;border-bottom:1px solid #ddd;text-decoration:none}
.astro-ENo7FKOA{padding:24px 0 0;border-top:1px solid #eee;margin-top:24px}
.astro-ENo7FKOA p{padding:3px 0;margin:0;font-size:15px}
.astro-ENo7FKOA a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.astro-ENo7FKOA a:hover{border-bottom-color:#2a2a2a}
/* === Theme === */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700&family=Cinzel:wght@400;700&display=swap');
body{font-family:'EB Garamond',sans-serif;color:#1A1A1A;background:#F9F7F2}
.astro-4MkFT3g0{background:#2D1B4D;color:#fff}
.astro-4MkFT3g0 h1{font-family:'Cinzel',serif;color:#fff}
.astro-4MkFT3g0 p{color:rgba(255,255,255,.75)}
.astro-4MkFT3g0 a{color:#fff;text-decoration:none}
.card h2{font-family:'Cinzel',serif}
.card h2 a{color:#2D1B4D}
.card h2 a:hover{color:#9F7AEA}
.read-more{color:#9F7AEA}
.article-content h1{font-family:'Cinzel',serif}
.article-content h2{font-family:'Cinzel',serif}
.article-content a{color:#9F7AEA}
.article-content img{border-radius:8px}
.affiliate-disclosure{border-radius:8px}
.ymyl-disclaimer{border-radius:8px}
/* === Custom === */
/* mv-vid-es — minimal template
   Ines Coronado — Yanahuara, Arequipa — cuaderno de senales
   Palette: sillar-stone slate #42545F + Arequipa clay terracotta #B5652E on warm cream #FAF6EF
   Fonts: Frank Ruhl Libre (heading) + Mulish (body)
*/

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400;1,6..72,500;1,6..72,600&family=Literata:ital,opsz,wght@0,7..72,400;0,7..72,500;0,7..72,600;0,7..72,700;1,7..72,400&family=Archivo:wght@500;600;700&display=swap');

/* ── Tokens ──────────────────────────────────────────────── */
:root {
  --color-bg:            #FAF6EF;
  --color-surface:       #F1E9DC;
  --color-text:          #2E2A24;
  --color-text-muted:    #7C7266;
  --color-primary:       #42545F;
  --color-primary-dark:  #2E3C45;
  --color-primary-light: #DDE4E6;
  --color-accent:        #B5652E;
  --color-accent-dark:   #8F4E22;
  --color-border:        #E2D6C3;
  --color-heading:       #26221D;
  --color-link:          #8F4E22;
  --color-link-hover:    #B5652E;

  --font-heading: 'Frank Ruhl Libre', Georgia, serif;
  --font-body:    'Mulish', system-ui, sans-serif;

  --size-base: 18px;
  --size-h1:   2.2rem;
  --size-h2:   1.7rem;
  --size-h3:   1.3rem;

  --lh-body:    1.75;
  --lh-heading: 1.3;

  --space:         1rem;
  --space-section: 3rem;
  --max-content:   68ch;
  --max-page:      820px;

  --radius: 10px;
}

/* ── Reset ───────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--size-base);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* ── Body ────────────────────────────────────────────────── */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: var(--lh-body);
  min-height: 100vh;
}

/* ── Headings ────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  line-height: var(--lh-heading);
  font-weight: 500;
  margin-top: calc(var(--space) * 2.25);
  margin-bottom: calc(var(--space) * 0.75);
}

h1 {
  font-size: var(--size-h1);
  letter-spacing: -0.01em;
}

h2 {
  font-size: var(--size-h2);
  letter-spacing: -0.005em;
}

h3 {
  font-size: var(--size-h3);
  color: var(--color-primary);
}

h4, h5, h6 {
  font-size: 1.1rem;
  font-weight: 700;
}

/* ── Paragraphs ──────────────────────────────────────────── */
p {
  max-width: var(--max-content);
  margin-bottom: calc(var(--space) * 1.3);
}

p + p {
  margin-top: 0;
}

/* ── Links ───────────────────────────────────────────────── */
a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--color-link) 35%, transparent);
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

a:hover,
a:focus-visible {
  color: var(--color-link-hover);
  text-decoration-color: var(--color-link-hover);
}

a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Lists ───────────────────────────────────────────────── */
ul, ol {
  max-width: var(--max-content);
  padding-left: 1.6em;
  margin-bottom: calc(var(--space) * 1.3);
}

li {
  margin-bottom: 0.45em;
  line-height: var(--lh-body);
}

li > ul,
li > ol {
  margin-top: 0.35em;
  margin-bottom: 0.35em;
}

ul li::marker { color: var(--color-accent); }
ol li::marker { color: var(--color-primary); font-family: var(--font-heading); font-weight: 700; }

/* ── Blockquote — el fragmento anotado a las 4am ─────────── */
blockquote {
  max-width: var(--max-content);
  border-left: 3px solid var(--color-accent);
  padding: calc(var(--space) * 0.9) calc(var(--space) * 1.4);
  margin: calc(var(--space) * 2) 0;
  background-color: var(--color-surface);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--color-text);
}

blockquote p {
  margin-bottom: 0;
}

blockquote cite {
  display: block;
  margin-top: 0.6em;
  font-size: 0.82rem;
  font-style: normal;
  font-family: var(--font-body);
  color: var(--color-text-muted);
  letter-spacing: 0.03em;
}

/* ── Horizontal rule ─────────────────────────────────────── */
hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-section) auto;
  max-width: 5ch;
}

/* ── Images ──────────────────────────────────────────────── */
img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
}

figure {
  margin: calc(var(--space) * 1.75) 0;
}

figcaption {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: 0.5em;
  font-style: italic;
  line-height: 1.45;
}

/* ── Code ────────────────────────────────────────────────── */
code {
  font-size: 0.875em;
  background-color: var(--color-surface);
  padding: 0.15em 0.4em;
  border-radius: 3px;
  font-family: 'Courier New', Courier, monospace;
  color: var(--color-primary-dark);
}

pre {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space);
  overflow-x: auto;
  margin-bottom: calc(var(--space) * 1.3);
}

pre code {
  background: none;
  padding: 0;
  font-size: 0.9em;
  color: var(--color-text);
}

/* ── Page layout (article/author width fallback) ─────────── */
main {
  max-width: var(--max-page);
  margin-inline: auto;
  padding-inline: calc(var(--space) * 1.5);
}

article {
  margin-bottom: var(--space-section);
}

/* ── Responsive base type ────────────────────────────────── */
@media (max-width: 640px) {
  :root {
    --size-base:     17px;
    --size-h1:       1.85rem;
    --size-h2:       1.5rem;
    --size-h3:       1.2rem;
    --space-section: 2rem;
  }
  main {
    padding-inline: var(--space);
  }
}

/* ============================================================
   v.52c451 — layout revision
   Editorial signature layer for the LIVE Astro build.
   The deployed HTML is a flat feed: <main> holds card <div>s
   directly (no wrapper, no tail). Everything below is driven by
   ELEMENT + STRUCTURAL selectors (no framework class names), so
   it survives per-build hashing. Three voices:
     Newsreader italic = display (wordmark, hero title, drop caps)
     Literata          = reading voice (body + card + article)
     Archivo tracked   = meta (dates, kickers, band labels, CTA)
   Moment colour #8B2E2E used in exactly 2 places: hero drop cap
   + article blockquote hanging quote.
   ============================================================ */

:root {
  --font-heading: 'Literata', Georgia, serif;
  --font-body:    'Literata', Georgia, serif;
  --font-display: 'Newsreader', Georgia, serif;
  --font-meta:    'Archivo', system-ui, sans-serif;
  --moment:       #8B2E2E;
  --paper:        #faf5ec;
  --ink-night:    #1D262E;
}

body {
  font-family: var(--font-body);
}

/* ── Masthead — photographic, both pages ─────────────────── */
body > header {
  position: relative;
  background:
    linear-gradient(rgba(20,24,28,.66), rgba(20,24,28,.44)),
    url("/theme-assets/cover-photo.jpg") center 42% / cover no-repeat;
  background-color: var(--ink-night);
  border-bottom: 3px solid var(--color-accent);
  padding: clamp(46px, 9vw, 92px) 24px clamp(38px, 6vw, 66px);
  margin-bottom: 64px;
  text-align: center;
  overflow: hidden;
}

body > header::before {
  content: "";
  display: block;
  width: 54px;
  height: 54px;
  margin: 0 auto 18px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2064%2064'%3E%3Ccircle%20cx='32'%20cy='32'%20r='29'%20fill='none'%20stroke='%23FAF6EF'%20stroke-width='1.4'/%3E%3Cpath%20d='M14%2046%20L27%2024%20L37%2024%20L50%2046'%20fill='none'%20stroke='%23FAF6EF'%20stroke-width='1.6'%20stroke-linejoin='round'/%3E%3Cpath%20d='M27%2024%20Q32%2029%2037%2024'%20fill='none'%20stroke='%23FAF6EF'%20stroke-width='1.1'/%3E%3Cpath%20d='M32%2010%20L32%2018%20M28.5%2014%20L35.5%2014'%20stroke='%23B5652E'%20stroke-width='1.7'%20stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .95;
}

body > header h1,
body > header > a {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2rem, 6vw, 3.3rem);
  line-height: 1.08;
  letter-spacing: .005em;
  color: #FAF6EF;
  text-decoration: none;
  display: inline-block;
  margin: 0;
}

body > header > a:hover { color: #F0DFC8; }

/* homepage manifesto (site description) */
body > header > p {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(.9rem, 2vw, 1.02rem);
  line-height: 1.6;
  color: #E7DECF;
  max-width: 56ch;
  margin: 16px auto 0;
}

/* signature line — the persona's central question */
body > header:has(h1)::after {
  content: "¿es señal, o es que la extraño?";
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: #EBD9BE;
  margin-top: 18px;
  letter-spacing: .01em;
}

/* article masthead is a slim wordmark bar */
body > header:has(> a) {
  padding: clamp(28px, 5vw, 44px) 24px clamp(24px, 4vw, 34px);
  margin-bottom: 44px;
}
body > header:has(> a)::before {
  width: 40px; height: 40px; margin-bottom: 12px;
}

/* ============================================================
   HOMEPAGE  (main has no <article> child)
   ============================================================ */
main:not(:has(> article)) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 34px;
  row-gap: 46px;
  align-items: stretch;
  max-width: 1060px;
  margin-inline: auto;
  padding: 0 24px 80px;
}

/* base card reset for every feed item */
main:not(:has(> article)) > div {
  min-width: 0;
}

/* ── HERO — the loud voice (first item, full width) ──────── */
main:not(:has(> article)) > div:first-child {
  grid-column: 1 / -1;
  position: relative;
  background: var(--color-surface);
  border: 1px solid rgba(0,0,0,.07);
  border-top: 4px solid var(--color-accent);
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  padding: clamp(30px, 4.5vw, 54px) clamp(32px, 5vw, 60px) clamp(30px, 4vw, 48px);
}

/* M2 — lead section-label band floats ABOVE the hero frame (was inside it) */
main:not(:has(> article)) > div:first-child::before {
  content: "ÚLTIMA ENTRADA — DEL CUADERNO";
  position: absolute;
  top: -30px;
  left: 0;
  right: 0;
  font-family: var(--font-meta);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--color-accent);
  padding-bottom: 9px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
}

main:not(:has(> article)) > div:first-child > p:first-child {
  font-family: var(--font-meta);
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 8px;
}

main:not(:has(> article)) > div:first-child > h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2rem, 4.6vw, 3rem);
  line-height: 1.12;
  margin: 0 0 8px;
}
main:not(:has(> article)) > div:first-child > h2 a {
  color: var(--color-heading);
  text-decoration: none;
}
main:not(:has(> article)) > div:first-child > h2 a:hover { color: var(--color-accent); }

main:not(:has(> article)) > div:first-child > p:nth-of-type(2) {
  font-family: var(--font-body);
  font-size: 1.16rem;
  line-height: 1.6;
  color: var(--color-text);
  max-width: 64ch;
  margin: 14px 0 22px;
}
main:not(:has(> article)) > div:first-child > p:nth-of-type(2)::first-letter {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 3.4em;
  line-height: .78;
  float: left;
  padding: .04em .12em 0 0;
  color: var(--moment);
}

main:not(:has(> article)) > div:first-child > a {
  display: inline-block;
  font-family: var(--font-meta);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-accent);
  border: 1.5px solid var(--color-accent);
  border-radius: 6px;
  padding: 10px 22px;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
main:not(:has(> article)) > div:first-child > a:hover {
  background: var(--color-accent);
  color: var(--color-bg);
}

/* ── EDITOR'S PICK — second gear (item 2, full width) ────── */
main:not(:has(> article)) > div:nth-child(2) {
  grid-column: 1 / -1;
  position: relative;
  margin-top: 30px;
  background: var(--paper);
  border: 1px solid rgba(0,0,0,.08);
  border-left: 4px solid var(--color-primary);
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  padding: 28px clamp(32px, 4vw, 44px) 30px;
}
main:not(:has(> article)) > div:nth-child(2)::before {
  content: "SIGUE POR AQUÍ";
  position: absolute;
  top: -26px;
  left: 0;
  right: 0;
  font-family: var(--font-meta);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--color-primary);
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 42%, transparent);
}
main:not(:has(> article)) > div:nth-child(2) > p:first-child {
  font-family: var(--font-meta);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 6px;
}
main:not(:has(> article)) > div:nth-child(2) > h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.22;
  margin: 0 0 8px;
}
main:not(:has(> article)) > div:nth-child(2) > h2 a { color: var(--color-heading); text-decoration: none; }
main:not(:has(> article)) > div:nth-child(2) > h2 a:hover { color: var(--color-primary); }
main:not(:has(> article)) > div:nth-child(2) > p:nth-of-type(2) {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  max-width: 66ch;
  margin: 0 0 14px;
}
main:not(:has(> article)) > div:nth-child(2) > a {
  font-family: var(--font-meta);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent);
  text-decoration: none;
}
main:not(:has(> article)) > div:nth-child(2) > a:hover { color: var(--color-accent-dark); text-decoration: underline; }

/* ── STRIP 1 — section break "MÁS ABAJO" ─────────────────── */
/* Lead journal entry (item 3) is full width; its ::before is the
   contained photo band separating picks from the journal. */
main:not(:has(> article)) > div:nth-child(3) {
  grid-column: 1 / -1;
  position: relative;
  margin-top: 44px;
  padding: 0;
}
main:not(:has(> article)) > div:nth-child(3)::before {
  content: "MÁS ABAJO";
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  margin: 0 0 30px;
  border-radius: 10px;
  background:
    linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.25)),
    url("/theme-assets/feature-photo.jpg") center 30% / cover no-repeat;
  color: #FAF6EF;
  font-family: var(--font-meta);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  text-shadow: 0 1px 5px rgba(0,0,0,.55);
}
main:not(:has(> article)) > div:nth-child(3) > p:first-child {
  font-family: var(--font-meta);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 6px;
}
main:not(:has(> article)) > div:nth-child(3) > h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.55rem;
  line-height: 1.2;
  margin: 0 0 8px;
}
main:not(:has(> article)) > div:nth-child(3) > h2 a { color: var(--color-heading); text-decoration: none; }
main:not(:has(> article)) > div:nth-child(3) > h2 a:hover { color: var(--color-accent); }
main:not(:has(> article)) > div:nth-child(3) > p:nth-of-type(2) {
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--color-text);
  max-width: 66ch;
  margin: 0 0 12px;
}
main:not(:has(> article)) > div:nth-child(3) > a {
  font-family: var(--font-meta);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent);
  text-decoration: none;
}
main:not(:has(> article)) > div:nth-child(3) > a:hover { color: var(--color-accent-dark); text-decoration: underline; }

/* ── THE JOURNAL — quiet 2-col grid (items 4 .. n-1) ─────── */
main:not(:has(> article)) > div:nth-child(n+4):not(:last-child) {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  padding: 28px 32px 26px;
  transition: box-shadow .18s ease, transform .18s ease;
}
main:not(:has(> article)) > div:nth-child(n+4):not(:last-child):hover {
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  transform: translateY(-2px);
}
main:not(:has(> article)) > div:nth-child(n+4):not(:last-child) > p:first-child {
  font-family: var(--font-meta);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 8px;
}
main:not(:has(> article)) > div:nth-child(n+4):not(:last-child) > h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.28;
  margin: 0 0 10px;
}
main:not(:has(> article)) > div:nth-child(n+4):not(:last-child) > h2 a {
  color: var(--color-heading);
  text-decoration: none;
}
main:not(:has(> article)) > div:nth-child(n+4):not(:last-child) > h2 a:hover { color: var(--color-accent); }
main:not(:has(> article)) > div:nth-child(n+4):not(:last-child) > p:nth-of-type(2) {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0 0 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
main:not(:has(> article)) > div:nth-child(n+4):not(:last-child) > a {
  margin-top: auto;
  font-family: var(--font-meta);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent);
  text-decoration: none;
}
main:not(:has(> article)) > div:nth-child(n+4):not(:last-child) > a:hover {
  color: var(--color-accent-dark);
  text-decoration: underline;
}

/* ── ARCHIVE TAIL — boxed cream index grid + "TODAS LAS ENTRADAS" (M7) ──
   The tail div (astro-ENo7FKOA) holds only <p><a>title</a></p> rows. Treat
   it as a first-class design zone: same paper token, border, radius, shadow
   and hover as the journal cards above, in a 3-col magazine index. */
main:not(:has(> article)) > div:last-child {
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 14px;
  align-items: stretch;
  margin-top: 40px;
  padding: 30px 0 0;
  border-top: 1px solid var(--color-border);
  text-align: left;
}
/* full-width section-label band above the index */
main:not(:has(> article)) > div:last-child::before {
  content: "EL ARCHIVO — TODO EL CUADERNO";
  grid-column: 1 / -1;
  font-family: var(--font-meta);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--color-primary);
  padding-bottom: 9px;
  margin-bottom: 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 42%, transparent);
}
/* each entry = a boxed cream cell, equal height per row via grid stretch */
main:not(:has(> article)) > div:last-child > p {
  margin: 0;
  max-width: none;
  display: flex;
  align-items: flex-start;
  background: var(--paper);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  padding: 16px 18px;
  transition: box-shadow .18s ease, transform .18s ease;
}
main:not(:has(> article)) > div:last-child > p:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  transform: translateY(-2px);
}
main:not(:has(> article)) > div:last-child > p a {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.34;
  color: var(--color-heading);
  text-decoration: none;
  border-bottom: none;
  overflow-wrap: break-word;
}
main:not(:has(> article)) > div:last-child > p a:hover { color: var(--color-accent); }
/* M6 strip 2 — photo band sits BETWEEN the journal grid and the archive tail.
   The tail div is a grid; this ::after is a grid item, so order:-1 pulls it
   ahead of the ::before label and the card cells (which stay at order 0),
   giving visual order: photo strip → "EL ARCHIVO" label → index cards. */
main:not(:has(> article)) > div:last-child::after {
  content: "TODAS LAS ENTRADAS";
  grid-column: 1 / -1;
  order: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 210px;
  margin: 0 0 10px;
  border-radius: 10px;
  background:
    linear-gradient(rgba(18,20,26,.5), rgba(18,20,26,.3)),
    url("/theme-assets/feature-photo.jpg") center 70% / cover no-repeat;
  color: #FAF6EF;
  font-family: var(--font-meta);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  text-shadow: 0 1px 5px rgba(0,0,0,.55);
}

/* ============================================================
   ARTICLE PAGE  (main has a <span> date child)
   ============================================================ */
main:has(> span) {
  max-width: 760px;
  margin-inline: auto;
}
main:has(> span) > h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.12;
  color: var(--color-heading);
  margin: 0 0 6px;
}
main:has(> span) > span {
  display: block;
  font-family: var(--font-meta);
  font-size: 12.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 30px;
}

main:has(> span) > article > p {
  font-size: 1.04rem;
  line-height: 1.8;
  max-width: 66ch;
}

main:has(> span) > article img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  margin: 30px 0;
}

/* dinkus divider above each h2 section */
main:has(> span) > article > h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  line-height: 1.28;
  color: var(--color-heading);
  margin: 2.4em 0 .5em;
}
main:has(> span) > article > h2::before {
  content: "✷  ✷  ✷";
  display: block;
  text-align: center;
  color: var(--color-accent);
  font-size: .62em;
  letter-spacing: .35em;
  margin: 0 auto 1.15em;
  opacity: .8;
}
main:has(> span) > article > h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--color-primary);
  margin: 1.9em 0 .4em;
}

/* blockquote — hanging quote in the moment colour */
main:has(> span) > article blockquote {
  position: relative;
  padding-left: 2.4rem;
}
main:has(> span) > article blockquote::before {
  content: "\201C";
  position: absolute;
  top: .06em;
  left: .35rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 3.2em;
  line-height: 1;
  color: var(--moment);
  opacity: .55;
}

/* body links */
main:has(> span) > article p a,
main:has(> span) > article li a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
  text-underline-offset: 3px;
  font-weight: 500;
}
main:has(> span) > article p a:hover,
main:has(> span) > article li a:hover {
  color: var(--color-primary-dark);
  text-decoration-color: var(--color-primary-dark);
}

/* affiliate CTA — pill (full path + attribute beats body-link rule) */
main:has(> span) > article p a[href^="/get/"],
main:has(> span) > article li a[href^="/get/"] {
  display: inline-block;
  background: var(--color-accent);
  color: #FAF6EF;
  font-family: var(--font-meta);
  font-size: .9em;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
  text-decoration: none;
  padding: 3px 13px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.14);
  transition: background .18s ease;
}
main:has(> span) > article p a[href^="/get/"]:hover,
main:has(> span) > article li a[href^="/get/"]:hover {
  background: var(--color-accent-dark);
  color: #FAF6EF;
  text-decoration: none;
}

/* affiliate disclaimer note blocks */
main:has(> span) > article > div {
  background: var(--color-surface);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 8px 8px 0;
  padding: 14px 20px;
  margin: 28px 0;
  font-family: var(--font-body);
  font-size: .9rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  font-style: italic;
}
main:has(> span) > article > div em {
  font-style: normal;
  font-weight: 600;
  color: var(--color-primary);
}

/* related-articles nav */
main:has(> span) > nav {
  margin-top: 48px;
  padding-top: 22px;
  border-top: 2px solid var(--color-border);
  font-size: .95rem;
  line-height: 1.7;
}
main:has(> span) > nav p em {
  display: block;
  font-family: var(--font-meta);
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 10px;
}
main:has(> span) > nav a { color: var(--color-link); }
main:has(> span) > nav a:hover { color: var(--color-accent); }

/* ============================================================
   AUTHOR PAGE  (main has <article> but no date <span>)
   ============================================================ */
main:has(> article):not(:has(> span)) {
  max-width: 760px;
  margin-inline: auto;
}
main:has(> article):not(:has(> span)) > article > h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.9rem, 4.5vw, 2.7rem);
  line-height: 1.14;
  color: var(--color-heading);
  margin: 0 0 4px;
}
main:has(> article):not(:has(> span)) > article > p em {
  color: var(--color-text-muted);
}
main:has(> article):not(:has(> span)) > article > section {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--color-border);
}
main:has(> article):not(:has(> span)) > article > section > h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--color-primary);
  margin: 0 0 14px;
}
main:has(> article):not(:has(> span)) > article > section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
main:has(> article):not(:has(> span)) > article > section li {
  padding: 10px 0;
  border-bottom: 1px dotted var(--color-border);
  margin: 0;
}
main:has(> article):not(:has(> span)) > article > section li:last-child { border-bottom: 0; }
main:has(> article):not(:has(> span)) > article > section li a {
  color: var(--color-heading);
  text-decoration: none;
  font-size: 1rem;
}
main:has(> article):not(:has(> span)) > article > section li a:hover { color: var(--color-accent); }

/* ── Footer polish ───────────────────────────────────────── */
body > footer {
  border-top: 1px solid var(--color-border);
  padding: 30px 24px;
  margin-top: 72px;
  text-align: center;
  font-family: var(--font-meta);
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--color-text-muted);
}
body > footer a { color: var(--color-text-muted); text-decoration: none; }
body > footer a:hover { color: var(--color-accent); }

/* ── Mobile — collapse to one column ─────────────────────── */
@media (max-width: 720px) {
  main:not(:has(> article)) {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 30px;
    padding: 0 16px 56px;
  }
  main:not(:has(> article)) > div:nth-child(3)::before,
  main:not(:has(> article)) > div:last-child::after {
    min-height: 150px;
    letter-spacing: .26em;
  }
  main:not(:has(> article)) > div:first-child > p:nth-of-type(2) { font-size: 1.06rem; }
  body > header { margin-bottom: 44px; }
}


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


/* ============================================================
   QA REPAIR iter=1 — surgical fixes (M2 / M6 / M7 / S6)
   Note: the base theme constrains BOTH <header> and <main> with a single
   class (.astro-x4qMaMZ8 { max-width:640px; margin:0 auto; padding:0 20px }).
   Plain element/:not/:has selectors (<= 0,0,2) lose to it, so these
   overrides add [class]/:root to clear (0,1,0) — obfuscation-safe because
   they test class PRESENCE, not any specific rotating hash.
   ============================================================ */

/* M2 — reserve top room on the homepage so the lead section band can float
   above the hero without being clipped by the mobile main{overflow-x:hidden}
   safety rule (the band then sits inside main's padding box). */
main:not(:has(> article))[class] {
  padding-top: 42px;
}

/* M6 — masthead full-bleed on home AND article. Escape the 640px reading
   column so the purple band fills the viewport; <main> keeps its measure.
   Vertical padding stays from the base class; only add side padding + width. */
:root body > header[class] {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 24px;
  padding-right: 24px;
}

/* S6 — article personality anchor: byline + location ahead of the date */
main:has(> span) > span::before {
  content: "POR INÉS CORONADO · AREQUIPA · ";
  color: var(--color-accent);
}

/* M7 — archive index collapses to 2 columns on narrow screens */
@media (max-width: 720px) {
  main:not(:has(> article)) > div:last-child {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}


/* premium-upgrade v1 */
/* premium editorial upgrade — style=NYT-Cooking-warm overlay=25% grid=equal 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; }
}