*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',Roboto,Oxygen,Ubuntu,sans-serif;line-height:1.75;color:#333;background:#f0f2f5}
.css-v8vwt19{max-width:860px;margin:0 auto;padding:0 20px}
.css-rmr2usj{background:#fff;padding:28px 0;margin-bottom:32px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.css-rmr2usj h1{font-size:22px;font-weight:700;margin-bottom:2px}
.css-rmr2usj p{font-size:14px;color:#666}
.css-rmr2usj a{color:#333;text-decoration:none;font-size:18px;font-weight:700}
.css-ep13cjr{display:flex;flex-direction:column;gap:20px}
.css-4oe34p1{background:#fff;border-radius:12px;box-shadow:0 1px 6px rgba(0,0,0,.06);padding:24px 28px;transition:transform .15s,box-shadow .15s}
.css-4oe34p1:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.1)}
.css-4oe34p1 h2{font-size:19px;margin-bottom:6px}
.css-4oe34p1 h2 a{color:#1a1a1a;text-decoration:none}
.css-4oe34p1 .css-gwp8jb3{font-size:12px;color:#999;margin-bottom:8px}
.css-4oe34p1 p{font-size:14px;color:#555;margin-bottom:12px}
.css-crmule8{display:inline-block;background:#5865f2;color:#fff;padding:6px 16px;border-radius:20px;font-size:13px;font-weight:600;text-decoration:none}
.css-crmule8:hover{background:#4752c4}
.css-rwe68js{padding-bottom:60px}
.css-rwe68js h1{font-size:30px;font-weight:700;margin-bottom:8px}
.css-rwe68js time{font-size:12px;color:#999;display:block;margin-bottom:24px}
.css-rwe68js h2{font-size:22px;margin:32px 0 12px}
.css-rwe68js h3{font-size:18px;margin:24px 0 8px}
.css-rwe68js p{margin-bottom:16px}
.css-rwe68js ul,.css-rwe68js ol{margin:0 0 16px 24px}
.css-rwe68js a{color:#5865f2}
.css-rwe68js img{max-width:100%;height:auto;border-radius:12px;margin:16px 0}
.css-zpketyd{padding:24px 0;margin-top:40px;text-align:center;font-size:12px;color:#999}
.css-zpketyd a{color:#999;text-decoration:none}
.css-2enmhql{background:#e8eaf0;border-radius:8px;padding:12px 16px;margin-bottom:20px;font-size:13px;color:#888;font-style:italic}
.css-ycdy2im{background:#fff8e1;border-radius:8px;padding:12px 16px;margin-top:24px;font-size:12px;color:#9e8600}
.css-9zbvdve{display:inline-block;background:#f0f2f7;border-radius:12px;padding:4px 12px;margin:-18px 0 24px;font-size:12px;color:#777}
.css-nzypo3v{text-align:center;margin:0 0 24px}
.css-ymwowjx{max-width:100%;height:auto;border-radius:12px}
.css-uwr2wxj{margin-top:32px;padding-top:20px;border-top:1px solid #e0e0e0}
.css-uwr2wxj h3{font-size:16px;font-weight:700;margin-bottom:12px}
.crd-related-list{display:flex;flex-direction:column;gap:8px}
.crd-related-link{display:block;background:#fff;border-radius:8px;padding:10px 14px;color:#333;text-decoration:none;box-shadow:0 1px 3px rgba(0,0,0,.06);font-size:14px}
.crd-related-link:hover{box-shadow:0 2px 8px rgba(0,0,0,.1)}
.css-qu1itfm{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.css-yk51l1w{display:block;background:#fff;border-radius:8px;padding:10px 16px;color:#1a1a1a;text-decoration:none;box-shadow:0 1px 3px rgba(0,0,0,.05);font-size:15px}
.css-yk51l1w:hover{box-shadow:0 2px 8px rgba(0,0,0,.1)}
/* === Theme === */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&family=Cormorant+Garamond:wght@400;700&display=swap');
body{font-family:'Lora',sans-serif;color:#333333;background:#FAF9F6}
.css-rmr2usj{background:#2D2926;color:#fff}
.css-rmr2usj h1{font-family:'Cormorant Garamond',serif;color:#fff}
.css-rmr2usj p{color:rgba(255,255,255,.75)}
.css-rmr2usj a{color:#fff;text-decoration:none}
.card h2{font-family:'Cormorant Garamond',serif}
.card h2 a{color:#2D2926}
.card h2 a:hover{color:#D4A373}
.read-more{color:#D4A373}
.article-content h1{font-family:'Cormorant Garamond',serif}
.article-content h2{font-family:'Cormorant Garamond',serif}
.article-content a{color:#D4A373}
.article-content img{border-radius:4px}
.affiliate-disclosure{border-radius:4px}
.ymyl-disclaimer{border-radius:4px}
/* === Custom === */
/* v.5d3c41 — layout revision */
/*
 * rt-retrato-es — Diario de Retratos
 * Editorial pass: a Saturday photo-diary read as a warm print magazine.
 * Type   : Newsreader (serif display + serif body) · system-sans, tracked (meta/kicker voice)
 * Palette: cream #FBF3E9 · ink #23150E · terracota #C15D42 (accent, used once loud on home)
 *          · olive #5C6B4A (moment colour — exactly twice: masthead monogram + hero drop cap)
 * DOM (verified against the live layout.css / rendered HTML, not source class names):
 *   home  main:not(:has(>article)) > div.flex  > div ×13   [p.date, h2>a, p.excerpt, a.cta]
 *   post  main:has(>article) > h1 + time + article + div(>h3 + .crd-related-list)
 * The @import below is intentionally paired with @font-face: the deploy concatenates
 * custom.css last, so a leading @import is dropped by the parser — @font-face is not.
 */

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

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/newsreader/v26/cY9AfjOCX1hbuyalUrK4397yjIJFJpc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/newsreader/v26/cY9CfjOCX1hbuyalUrK439vCjohCBJWxZA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─── Design tokens ─────────────────────────────────────────── */
:root {
  --color-bg:              #FBF3E9;
  --color-surface:         #F7EEDD;
  --color-surface-alt:     #F4EAD8;
  --color-text:            #362519;
  --color-text-muted:      #8B7663;
  --color-heading:         #2B1B10;
  --color-ink:             #23150E;
  --color-accent:          #C15D42;
  --color-accent-hover:    #9C4732;
  --color-accent-light:    #E5A98C;
  --color-accent-secondary:#B8862E;
  --moment:                #5C6B4A;
  --color-border:          #E3CDAE;
  --color-link:            #C15D42;
  --color-link-hover:      #9C4732;

  --font-heading: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body:    'Newsreader', Georgia, 'Times New Roman', serif;
  --font-meta:    ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --font-size-base:      18px;
  --line-height-body:    1.72;
  --line-height-heading: 1.2;
  --cgap:                1.6rem;
  --max-width-layout:    880px;
}

/* ─── Base ──────────────────────────────────────────────────── */
html,
:root body {
  background-color: var(--color-bg);
}
:root body {
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root main {
  max-width: var(--max-width-layout);
  margin-inline: auto;
  padding-inline: 1.5rem;
  background-color: var(--color-bg);
}

/* ─── Headings / paragraphs / links (site-wide defaults) ────── */
:root h1, :root h2, :root h3, :root h4 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  line-height: var(--line-height-heading);
  margin-top: 0;
  margin-bottom: 0.55em;
}

:root a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: var(--color-accent-light);
  text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease, background-color .2s ease;
}
:root a:hover {
  color: var(--color-link-hover);
  text-decoration-color: var(--color-accent-hover);
}

:root ul li::marker { color: var(--color-accent-secondary); }

:root blockquote {
  max-width: 62ch;
  margin: 1.9rem 0;
  padding: 1.1rem 1.6rem;
  border-left: 3px solid var(--color-accent-secondary);
  background-color: var(--color-surface-alt);
  border-radius: 0 8px 8px 0;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.15rem;
}
:root blockquote p { margin-bottom: 0; max-width: none; }

/* ══════════════════════════════════════════════════════════════
   MASTHEAD  (body > header — a full-bleed ink band)
   ══════════════════════════════════════════════════════════════ */
:root body > header {
  background:
    radial-gradient(120% 150% at 50% -25%, rgba(193,93,66,.24), transparent 62%),
    var(--color-ink);
  color: #FBF3E9;
  text-align: center;
  padding: 3rem 1.5rem 3.1rem;
  margin-bottom: 0;
  border-bottom: 3px solid var(--color-accent-secondary);
}
:root body > header > div { max-width: 700px; }

/* Signature monogram — viewfinder brackets + focus ring (olive · moment #1) */
:root body > header > div::before {
  content: "";
  display: block;
  width: 46px;
  height: 46px;
  margin: 0 auto 1rem;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2056%2056'%20fill='none'%20stroke='%235C6B4A'%20stroke-width='2.4'%20stroke-linecap='round'%3E%3Cpath%20d='M7%2018V7h11'/%3E%3Cpath%20d='M38%207h11v11'/%3E%3Cpath%20d='M49%2038v11h-11'/%3E%3Cpath%20d='M18%2049H7V38'/%3E%3Ccircle%20cx='28'%20cy='28'%20r='10.5'/%3E%3Ccircle%20cx='28'%20cy='28'%20r='2.4'%20fill='%235C6B4A'%20stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
}
:root body > header h1 {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 2.7rem);
  color: #FBF3E9;
  letter-spacing: .01em;
  margin: 0 0 .55rem;
}
:root body > header p {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.55;
  color: rgba(251,243,233,.82);
  max-width: 56ch;
  margin: 0 auto;
}

/* ══════════════════════════════════════════════════════════════
   HOME FEED  — one 6-col grid: hero → picks band → journal → archive
   Scope: main:not(:has(> article))  (article main HAS > article)
   ══════════════════════════════════════════════════════════════ */
:root main:not(:has(> article)) > div {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: var(--cgap);
  row-gap: 2.4rem;
  margin-block: 3rem 4rem;
}

/* card base (picks + journal); hero/archive override the span below */
:root main:not(:has(> article)) > div > div {
  grid-column: span 3;                /* default: 2-across journal */
  position: relative;
  background: var(--color-surface);
  border: 1px solid rgba(43,27,16,.09);
  border-radius: 9px;
  box-shadow: 0 1px 4px rgba(43,27,16,.05);
  padding: 26px 30px 28px;
  transition: transform .15s ease, box-shadow .15s ease;
}
:root main:not(:has(> article)) > div > div:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(43,27,16,.10);
}

/* card date → kicker */
:root main:not(:has(> article)) > div > div > p:first-of-type {
  font-family: var(--font-meta);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 .55rem;
}
/* card title */
:root main:not(:has(> article)) > div > div > h2 {
  font-family: var(--font-heading);
  font-size: 1.24rem;
  font-weight: 600;
  line-height: 1.24;
  margin: .1rem 0 .5rem;
}
:root main:not(:has(> article)) > div > div > h2 a {
  color: var(--color-heading);
  text-decoration: none;
}
:root main:not(:has(> article)) > div > div > h2 a:hover { color: var(--color-accent); }
/* card excerpt (line-clamped so row heights match — RULE D) */
:root main:not(:has(> article)) > div > div > p:last-of-type {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text);
  max-width: 64ch;
  margin: 0 0 1.05rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* card CTA → quiet terracota text link (kills the blue/rust pill on every card) */
:root main:not(:has(> article)) > div > div > a {
  display: inline-block;
  background: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  font-size: 0;                       /* hide English "Read Article" */
  text-decoration: none;
}
:root main:not(:has(> article)) > div > div > a::after {
  content: "Leer la entrada \002192";
  font-family: var(--font-meta);
  font-size: 12.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-accent);
}
:root main:not(:has(> article)) > div > div > a:hover::after { color: var(--color-accent-hover); }

/* ─── HERO (card 1) — the one loud voice ─────────────────────── */
:root main:not(:has(> article)) > div > div:nth-child(1) {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr minmax(190px, 240px);
  column-gap: 3rem;
  row-gap: .35rem;
  align-items: start;
  padding: 42px 46px 46px;
  background: #F8F0E0;
  border-color: rgba(193,93,66,.26);
}
:root main:not(:has(> article)) > div > div:nth-child(1) > p:first-of-type {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-meta);
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--color-accent-secondary);
  margin: 0;
}
:root main:not(:has(> article)) > div > div:nth-child(1) > p:first-of-type::before {
  content: "Último cuaderno \0000B7\0000A0";
}
:root main:not(:has(> article)) > div > div:nth-child(1) > h2 {
  grid-column: 1;
  grid-row: 2;
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.08;
  font-weight: 500;
  margin: .2rem 0 .1rem;
}
:root main:not(:has(> article)) > div > div:nth-child(1) > h2 a {
  color: var(--color-heading);
  font-style: italic;
  text-decoration: none;
}
:root main:not(:has(> article)) > div > div:nth-child(1) > p:last-of-type {
  grid-column: 1;
  grid-row: 3;
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
  font-family: var(--font-heading);
  font-size: 1.28rem;
  line-height: 1.5;
  color: var(--color-text);
  max-width: 42ch;
  margin: .7rem 0 1.4rem;
}
/* drop cap (olive · moment #2) */
:root main:not(:has(> article)) > div > div:nth-child(1) > p:last-of-type::first-letter {
  float: left;
  font-size: 3.3em;
  line-height: .82;
  padding: .04em .12em 0 0;
  color: var(--moment);
  font-weight: 500;
}
/* hero CTA → the single prominent terracota pill */
:root main:not(:has(> article)) > div > div:nth-child(1) > a {
  grid-column: 1;
  grid-row: 4;
  justify-self: start;
  background: var(--color-accent);
  padding: 12px 26px;
  border-radius: 24px;
  box-shadow: 0 2px 10px rgba(193,93,66,.28);
}
:root main:not(:has(> article)) > div > div:nth-child(1) > a::after {
  content: "Leer el cuaderno \002192";
  color: #FBF3E9;
  font-size: 13.5px;
  letter-spacing: .1em;
}
:root main:not(:has(> article)) > div > div:nth-child(1) > a:hover { background: var(--color-accent-hover); }
/* hero right rail — byline block fills the second column (RULE 4) */
:root main:not(:has(> article)) > div > div:nth-child(1)::before {
  content: "Por Juliana \A Barrio Abajo, tarde \A Lectura \0000B7\0000A06 min";
  grid-column: 2;
  grid-row: 1 / span 4;
  align-self: center;
  white-space: pre-line;
  font-family: var(--font-meta);
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 2.5;
  color: var(--color-text-muted);
  border-left: 2px solid var(--color-accent-secondary);
  padding-left: 1.4rem;
}

/* ─── EDITOR'S PICKS band (cards 2–4, 3-across) ──────────────── */
:root main:not(:has(> article)) > div > div:nth-child(n+2):nth-child(-n+4) {
  grid-column: span 2;
  margin-top: 3.6rem;                 /* room for the band label above */
}
/* full-row label anchored to the first pick (RULE B — spans all three) */
:root main:not(:has(> article)) > div > div:nth-child(2)::before {
  content: "Selección de Juliana \0000B7\0000A0Para empezar";
  position: absolute;
  left: 0;
  bottom: calc(100% + .55rem);
  width: calc(300% + 2 * var(--cgap));
  padding-bottom: .55rem;
  border-bottom: 1px solid rgba(43,27,16,.22);
  font-family: var(--font-meta);
  font-size: 13px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--color-heading);
  white-space: nowrap;
}

/* ─── SECTION STRIP 1 · EL DIARIO (before the journal) ───────── */
:root main:not(:has(> article)) > div > div:nth-child(5),
:root main:not(:has(> article)) > div > div:nth-child(6) {
  margin-top: 6rem;                   /* room for the ink strip */
}
:root main:not(:has(> article)) > div > div:nth-child(5)::before {
  content: "El diario\0000A0\002014\0000A0Más recientes";
  position: absolute;
  left: 0;
  bottom: calc(100% + 1.2rem);
  width: calc(200% + var(--cgap));
  box-sizing: border-box;
  padding: 24px 30px;
  border-radius: 8px;
  background: linear-gradient(115deg, #23150E, #3A2417 72%);
  box-shadow: 0 3px 14px rgba(35,21,14,.22);
  font-family: var(--font-meta);
  font-size: 13px;
  letter-spacing: .3em;
  text-transform: uppercase;
  text-align: center;
  color: #F3E4CE;
}

/* ─── SECTION STRIP 2 · EL ARCHIVO + closing full-width card ──── */
:root main:not(:has(> article)) > div > div:last-child {
  grid-column: 1 / -1;
  margin-top: 6rem;
  background: var(--color-surface-alt);
}
:root main:not(:has(> article)) > div > div:last-child::before {
  content: "El archivo";
  position: absolute;
  left: 0;
  bottom: calc(100% + 1.2rem);
  width: 100%;
  box-sizing: border-box;
  padding: 24px 30px;
  border-radius: 8px;
  background: linear-gradient(115deg, #3A2417, #23150E 72%);
  box-shadow: 0 3px 14px rgba(35,21,14,.22);
  font-family: var(--font-meta);
  font-size: 13px;
  letter-spacing: .3em;
  text-transform: uppercase;
  text-align: center;
  color: #F3E4CE;
}

/* ══════════════════════════════════════════════════════════════
   ARTICLE PAGE   Scope: main:has(> article)
   ══════════════════════════════════════════════════════════════ */
:root main:has(> article) > h1 {
  font-size: clamp(2rem, 4.6vw, 2.95rem);
  line-height: 1.12;
  font-weight: 500;
  color: var(--color-heading);
  max-width: 22ch;
  margin: 1.5rem 0 .35rem;
}
:root main:has(> article) > time {
  display: block;
  font-family: var(--font-meta);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--color-accent-secondary);
  margin-bottom: 2.2rem;
}
:root main:has(> article) > article > p {
  font-size: 18.5px;
  line-height: 1.78;
  color: var(--color-text);
  max-width: 66ch;
  margin: 0 0 1.3rem;
}
:root main:has(> article) > article > h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  font-weight: 600;
  color: var(--color-heading);
  margin: 2.6rem 0 .9rem;
}
/* dinkus between sections (RULE — editorial rhythm) */
:root main:has(> article) > article > h2:not(:first-of-type)::before {
  content: "\002726\0000A0\002726\0000A0\002726";
  display: block;
  text-align: center;
  color: var(--color-accent-secondary);
  font-size: .9rem;
  letter-spacing: .3em;
  opacity: .8;
  margin: 1.4rem 0 2.1rem;
}
:root main:has(> article) > article img { border-radius: 9px; max-width: 100%; height: auto; }
/* hanging quote */
:root main:has(> article) > article > blockquote { position: relative; }
:root main:has(> article) > article > blockquote::before {
  content: "\00201C";
  position: absolute;
  left: .35rem;
  top: -.35rem;
  font-family: var(--font-heading);
  font-size: 3.4rem;
  line-height: 1;
  color: var(--color-accent-light);
  opacity: .7;
}
/* affiliate CTA — full path + attribute out-specifies body links (RULE J) */
:root main:has(> article) article a[href^="/visit/"] {
  display: inline-block;
  background: var(--color-accent);
  color: #FBF3E9;
  padding: 11px 22px;
  border-radius: 22px;
  font-family: var(--font-meta);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(193,93,66,.25);
}
:root main:has(> article) article a[href^="/visit/"]:hover { background: var(--color-accent-hover); }

/* affiliate-disclosure aside (obfuscated hook is stable) */
:root .css-2enmhql {
  background: none;
  border-left: 3px solid var(--color-accent-secondary);
  border-radius: 0;
  padding: .4rem 0 .4rem 1rem;
  margin: 1.6rem 0;
  font-size: .85rem;
  font-style: italic;
  color: var(--color-text-muted);
}

/* related list (pass-through class names) — warm index, no white cards */
:root main:has(> article) > div:has(> h3) {
  margin-top: 3.4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}
:root main:has(> article) > div:has(> h3) > h3 {
  font-family: var(--font-meta);
  font-size: 13px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 1.1rem;
}
:root .crd-related-list { list-style: none; padding: 0; columns: 2; column-gap: 2rem; }
:root .crd-related-link {
  display: block;
  background: none;
  box-shadow: none;
  padding: .55rem 0;
  border-bottom: 1px dotted rgba(43,27,16,.18);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 15px;
  line-height: 1.35;
  text-decoration: none;
  break-inside: avoid;
}
:root .crd-related-link:hover { color: var(--color-accent); }

/* ─── Footer ─────────────────────────────────────────────────── */
:root body > footer {
  border-top: 1px solid var(--color-border);
  margin-top: 4rem;
  padding-block: 2.4rem;
  color: var(--color-text-muted);
}
:root body > footer a { color: var(--color-text-muted); text-decoration: none; }
:root body > footer a:hover { color: var(--color-accent); }

/* ══════════════════════════════════════════════════════════════
   MOBILE  (≤720px)  — collapse the grid; reset spans (span N keeps
   implicit tracks otherwise); return band labels to single-column.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  :root main:not(:has(> article)) > div { grid-template-columns: 1fr; row-gap: 2rem; }
  :root main:not(:has(> article)) > div > div { grid-column: 1 / -1; }

  /* hero → single column, hide the right rail */
  :root main:not(:has(> article)) > div > div:nth-child(1) {
    grid-template-columns: 1fr;
    padding: 28px 24px 30px;
  }
  :root main:not(:has(> article)) > div > div:nth-child(1)::before { display: none; }

  /* picks: drop to full width, keep only the label's breathing room */
  :root main:not(:has(> article)) > div > div:nth-child(n+2):nth-child(-n+4) {
    grid-column: 1 / -1;
    margin-top: 0;
  }
  :root main:not(:has(> article)) > div > div:nth-child(2) { margin-top: 3.2rem; }
  :root main:not(:has(> article)) > div > div:nth-child(2)::before {
    width: 100%;
    white-space: normal;
  }

  /* strips span the single column */
  :root main:not(:has(> article)) > div > div:nth-child(5) { margin-top: 5rem; }
  :root main:not(:has(> article)) > div > div:nth-child(6) { margin-top: 0; }
  :root main:not(:has(> article)) > div > div:nth-child(5)::before { width: 100%; }
  :root main:not(:has(> article)) > div > div:last-child { margin-top: 5rem; }

  :root .crd-related-list { columns: 1; }
  :root body > header { padding: 2.2rem 1.2rem 2.4rem; }
}