*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Georgia,'Times New Roman',serif;line-height:1.8;color:#222;background:#f4f1eb}
.astro-Z7Gu8deq{max-width:1100px;margin:0 auto;padding:0 24px}
.astro-ou7TATN1{background:linear-gradient(135deg,#2c3e50,#34495e);color:#fff;padding:48px 0;text-align:center;margin-bottom:48px}
.astro-ou7TATN1 h1{font-size:36px;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px}
.astro-ou7TATN1 p{font-size:16px;opacity:.8;font-style:italic}
.astro-ou7TATN1 .astro-uvnAM74X{color:#fff;text-decoration:none;font-size:20px;letter-spacing:1px;text-transform:uppercase}
.astro-F57mbLdK{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px}
.astro-njVxT2H8{background:#fff;border-radius:4px;box-shadow:0 2px 12px rgba(0,0,0,.08);padding:28px;transition:box-shadow .2s}
.astro-njVxT2H8:hover{box-shadow:0 4px 20px rgba(0,0,0,.14)}
.astro-njVxT2H8 h2{font-size:22px;margin-bottom:10px;line-height:1.3}
.astro-njVxT2H8 h2 a{color:#2c3e50;text-decoration:none}
.astro-njVxT2H8 .astro-nfYgMmlS{font-size:12px;color:#888;margin-bottom:10px;text-transform:uppercase;letter-spacing:1px}
.astro-njVxT2H8 p{font-size:15px;color:#555;margin-bottom:14px}
.astro-3YCJfxG0{color:#e74c3c;text-decoration:none;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.5px}
.astro-AjjoTxgT{max-width:780px;margin:0 auto;padding:0 24px 60px}
.astro-AjjoTxgT h1{font-size:36px;margin-bottom:10px;line-height:1.2}
.astro-AjjoTxgT .astro-nfYgMmlS{font-size:13px;color:#888;display:block;margin-bottom:28px;text-transform:uppercase;letter-spacing:1px}
.astro-AjjoTxgT h2{font-size:24px;margin:36px 0 14px}
.astro-AjjoTxgT h3{font-size:19px;margin:28px 0 10px}
.astro-AjjoTxgT p{margin-bottom:18px;font-size:17px}
.astro-AjjoTxgT ul,.astro-AjjoTxgT ol{margin:0 0 18px 28px}
.astro-AjjoTxgT a{color:#e74c3c}
.astro-AjjoTxgT img{max-width:100%;height:auto;border-radius:4px;margin:20px 0}
.astro-y7c2LAkW{border-top:2px solid #ddd;padding:28px 0;margin-top:48px;text-align:center;font-size:13px;color:#888}
.astro-y7c2LAkW a{color:#888}
.astro-LP2tg8mt{border-top:1px solid #ccc;border-bottom:1px solid #ccc;padding:14px 0;margin-bottom:28px;font-size:14px;color:#888;font-style:italic;text-align:center}
.astro-E1qO9Fsk{background:#f9f3e3;padding:16px 20px;margin-top:28px;font-size:13px;color:#7a6230;border-radius:4px}
.astro-orxOJHeP{font-size:11px;color:#888;margin:-22px 0 28px;text-transform:uppercase;letter-spacing:1.5px}
.astro-rtsiJUbB{margin:0 0 28px}
.astro-NRXtyg2P{width:100%;height:auto;border-radius:4px}
.astro-FsYpTOp9{border-top:2px solid #ddd;margin-top:40px;padding-top:24px}
.astro-FsYpTOp9 h4{font-size:16px;text-transform:uppercase;letter-spacing:1px;margin-bottom:16px;color:#888}
.mag-related-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mag-related-item a{color:#2c3e50;text-decoration:none;font-size:15px}
.mag-related-item a:hover{color:#e74c3c}
.astro-hu5KStZO{background:#fff;border-radius:4px;box-shadow:0 2px 12px rgba(0,0,0,.08);padding:22px 28px;margin-top:28px}
.astro-hu5KStZO p{font-size:15px;padding:4px 0;margin:0}
.astro-hu5KStZO .astro-nfYgMmlS{margin:0 8px 0 0;display:inline}
.astro-hu5KStZO a{color:#2c3e50;text-decoration:none}
.astro-hu5KStZO a:hover{color:#e74c3c}
/* === Theme === */
:root{--primary:#4A2A5C;--accent:#A8754A;--bg:#F0EAD8;--fg:#1A0F1A;--border:#C4A8B0;--r:9px;--fb:'Mada';--fh:'Lustria'}
/* === Custom === */
/* v.96f809 — layout revision */
/* Editorial rebuild for Arte de Cejas (bb-glow-es): ES powder-brow journal, first-person
   cabina narrator (Sofía Ramírez, Roma Norte CDMX, ~10 yrs microblading → efecto polvo).
   LIVE DOM (Astro, stable astro-* scoped classes — but styled via ELEMENT/STRUCTURAL selectors only):
     HOME  = <nav>(h1 wordmark + p manifesto)
             <main> > div:first-of-type  (grid wrapper) > div (card: p.date, h2>a, p.excerpt, a.more) ×18
                    > div:last-of-type   (tail wrapper) > p (span.date + a) ×11
     ART   = <nav>(a wordmark link)
             <main> > h1 + time + article(figure, p, h2, figure.inline, div.disclaimer) + aside(Related)
   Discriminator: HOME main has NO <article>; ARTICLE main HAS > article.
   Affiliate CTA prefix = /deal/. Moment colour #3D5A47 used exactly ×2 (both drop caps).
   NOTE: task-listed backdrop.jpg / story-bg.jpg 404 on this deploy; the real per-site assets
   are hero-masthead.jpg + article-hero.jpg (both 200) — using those. */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,600;0,6..96,700;1,6..96,400;1,6..96,500;1,6..96,600&family=Mada:wght@400;500;600;700&display=swap');

:root {
  --disp: 'Bodoni Moda', 'Playfair Display', Georgia, serif; /* display voice — serif italic */
  --fm: 'Mada', system-ui, sans-serif;                        /* meta voice — tracked sans */
  --moment: #3D5A47;             /* assigned moment colour — exactly ×2 (drop caps) */
  --paper: #FAF4E6;              /* warm card surface (NO pure white) */
  --paper-hi: #FCF8EE;           /* raised surface (hero) */
  --hair: rgba(40,20,45,.13);
  --hair-soft: rgba(40,20,45,.08);
}

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

/* =========================================================
   MASTHEAD  (<nav>) — photo + aubergine gradient, monogram, italic wordmark, manifesto
   ========================================================= */
:root > body > nav {
  background:
    linear-gradient(180deg, rgba(30,16,34,.72), rgba(30,16,34,.86)),
    url("/theme-assets/hero-masthead.jpg") center 38% / cover no-repeat,
    var(--primary);
  background-color: var(--primary);
  color: var(--bg);
  padding: 62px 0 46px;
  margin-bottom: 0;
  text-align: center;
  border-bottom: 3px solid var(--accent);
}
:root > body > nav > div { max-width: 860px; margin: 0 auto; padding: 0 24px; }

/* signature monogram — amber ring + cream brow stroke + soft shadow stroke */
:root > body > nav > div::before {
  content: "";
  display: block; width: 50px; height: 50px; margin: 0 auto 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><circle cx='24' cy='24' r='22' fill='none' stroke='%23A8754A' stroke-width='1.5'/><path d='M11 30 Q24 17 37 26' fill='none' stroke='%23F0EAD8' stroke-width='2.6' stroke-linecap='round'/><path d='M12 33 Q24 21 36 29' fill='none' stroke='%23D9B98A' stroke-width='1.4' stroke-linecap='round' opacity='0.7'/></svg>");
  background-size: contain; background-repeat: no-repeat;
}
/* home wordmark */
:root > body > nav h1 {
  font-family: var(--disp); font-style: italic; font-weight: 600;
  font-size: 50px; line-height: 1.04; letter-spacing: .01em; color: var(--bg);
  margin: 0 0 12px; text-transform: none;
}
/* home kicker under wordmark */
:root > body > nav h1::after {
  content: "MICROPIGMENTACIÓN · CEJAS EFECTO POLVO";
  display: block; font-family: var(--fm); font-weight: 600;
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(240,234,216,.72); margin-top: 14px;
}
/* article-page compact wordmark link */
:root > body > nav a {
  font-family: var(--disp); font-style: italic; font-weight: 600;
  font-size: 27px; color: var(--bg); text-decoration: none; letter-spacing: .01em;
}
/* manifesto (home site description) */
:root > body > nav p {
  font-family: var(--disp); font-style: italic; font-weight: 400;
  font-size: 17px; line-height: 1.55; color: rgba(240,234,216,.9);
  max-width: 600px; margin: 4px auto 0;
}

/* =========================================================
   HOMEPAGE  — scope: main:not(:has(> article))
   grid wrapper (div:first-of-type) = 6-col grid; cards are ordered grid items.
   wrapper ::before = Picks label ; wrapper ::after = Strip 1 "MÁS ABAJO".
   ========================================================= */
:root main:not(:has(> article)) { max-width: 1140px; margin: 0 auto; padding: 64px 24px 96px; }

:root main:not(:has(> article)) > div:first-of-type {
  display: grid; grid-template-columns: repeat(6, 1fr);
  column-gap: 34px; row-gap: 46px; align-items: stretch;
}

/* --- Editor's Picks band label (RULE B: full-row, above the picks) --- */
:root main:not(:has(> article)) > div:first-of-type::before {
  content: "Selección de cabina — empieza por aquí";
  order: 2; grid-column: 1 / -1;
  font-family: var(--fm); font-size: 13px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--primary);
  padding-bottom: 11px; margin: 10px 0 -8px; border-bottom: 2px solid var(--accent);
}

/* --- Strip 1 "MÁS ABAJO" (RULE F) — between picks and journal --- */
:root main:not(:has(> article)) > div:first-of-type::after {
  content: "MÁS ABAJO";
  order: 4; grid-column: 1 / -1;
  min-height: 200px; display: flex; align-items: flex-end;
  padding: 26px 34px; margin: 26px 0 8px; border-radius: 10px;
  background:
    linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.25)),
    url("/theme-assets/article-hero.jpg") center 30% / cover no-repeat,
    var(--primary);
  color: #F3ECDD; font-family: var(--fm);
  font-size: 13.5px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}

/* =========================================================
   HERO  (card 1) — full width, 1.7 / 1 split with byline rail
   ========================================================= */
:root main:not(:has(> article)) > div:first-of-type > div:first-child {
  order: 1; grid-column: 1 / -1; margin: 0;
  display: grid; grid-template-columns: 1.7fr 1fr; column-gap: 44px; align-items: center;
  background: var(--paper-hi); border: 1px solid var(--hair-soft); border-top: 3px solid var(--accent);
  border-radius: 10px; box-shadow: 0 2px 14px rgba(40,20,45,.07); padding: 46px 48px;
}
:root main:not(:has(> article)) > div:first-of-type > div:first-child > p:first-of-type {
  grid-column: 1; font-family: var(--fm); font-size: 11.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px;
}
:root main:not(:has(> article)) > div:first-of-type > div:first-child > p:first-of-type::before { content: "Último apunte · "; }
:root main:not(:has(> article)) > div:first-of-type > div:first-child > h2 {
  grid-column: 1; font-family: var(--disp); font-style: italic;
  font-size: 42px; font-weight: 600; line-height: 1.1; letter-spacing: .005em; margin: 0 0 18px;
  padding: 0; border: 0;
}
:root main:not(:has(> article)) > div:first-of-type > div:first-child > h2 a { color: var(--primary); text-decoration: none; }
:root main:not(:has(> article)) > div:first-of-type > div:first-child > p:last-of-type {
  grid-column: 1; font-family: var(--fb), system-ui, sans-serif; font-size: 20px; line-height: 1.5;
  color: var(--fg); margin: 0 0 24px; max-width: 60ch; opacity: 1;
}
:root main:not(:has(> article)) > div:first-of-type > div:first-child > p:last-of-type::first-letter {
  font-family: var(--disp); font-style: italic; font-weight: 600;
  font-size: 58px; line-height: .8; float: left; margin: 6px 12px 0 0; color: var(--moment); /* moment colour #1 */
}
:root main:not(:has(> article)) > div:first-of-type > div:first-child > a:last-child {
  grid-column: 1; justify-self: start; display: inline-block; font-family: var(--fm);
  font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--primary); text-decoration: none; padding: 12px 28px;
  border: 1.5px solid var(--primary); border-radius: 40px; background: transparent; transition: all .15s ease;
  font-size: 0;
}
:root main:not(:has(> article)) > div:first-of-type > div:first-child > a:last-child::after {
  content: "Leer el apunte completo →"; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
:root main:not(:has(> article)) > div:first-of-type > div:first-child > a:last-child:hover { background: var(--primary); color: var(--bg); }
/* byline rail fills the right column (RULE 4 balance) */
:root main:not(:has(> article)) > div:first-of-type > div:first-child::after {
  content: "POR SOFÍA RAMÍREZ\A ——\A N.º I · APUNTE DE CABINA\A 6 MIN DE LECTURA";
  white-space: pre-line; grid-column: 2; grid-row: 1 / span 4; align-self: center;
  font-family: var(--fm); font-size: 12px; line-height: 2.1;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  padding-left: 28px; border-left: 2px solid var(--border);
}

/* =========================================================
   EDITOR'S PICKS band (cards 2-4) — 3-up, N.º markers
   ========================================================= */
:root main:not(:has(> article)) > div:first-of-type > div:nth-child(2),
:root main:not(:has(> article)) > div:first-of-type > div:nth-child(3),
:root main:not(:has(> article)) > div:first-of-type > div:nth-child(4) {
  order: 3; grid-column: span 2; margin: 0;
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--hair-soft); border-top: 3px solid var(--accent);
  border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.04); padding: 28px 32px 26px;
}
:root main:not(:has(> article)) > div:first-of-type > div:nth-child(2)::before { content: "N.º I"; }
:root main:not(:has(> article)) > div:first-of-type > div:nth-child(3)::before { content: "N.º II"; }
:root main:not(:has(> article)) > div:first-of-type > div:nth-child(4)::before { content: "N.º III"; }
:root main:not(:has(> article)) > div:first-of-type > div:nth-child(2)::before,
:root main:not(:has(> article)) > div:first-of-type > div:nth-child(3)::before,
:root main:not(:has(> article)) > div:first-of-type > div:nth-child(4)::before {
  order: 0; font-family: var(--fm); font-size: 11px; font-weight: 700;
  letter-spacing: .2em; color: var(--accent); margin-bottom: 12px;
}

/* =========================================================
   JOURNAL grid (cards 5+) — 2-up chronological
   ========================================================= */
:root main:not(:has(> article)) > div:first-of-type > div:nth-child(n+5) {
  order: 5; grid-column: span 3; margin: 0;
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--hair-soft); border-left: 3px solid var(--accent);
  border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.04); padding: 30px 34px 28px;
}
/* lonely trailing journal card fills the row */
:root main:not(:has(> article)) > div:first-of-type > div:nth-child(n+5):nth-child(odd):last-child { grid-column: 1 / -1; }

/* shared card interior (picks + journal) */
:root main:not(:has(> article)) > div:first-of-type > div:nth-child(n+2) > p:first-of-type {
  order: 1; font-family: var(--fm); font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 9px;
}
:root main:not(:has(> article)) > div:first-of-type > div:nth-child(n+2) > h2 {
  order: 2; font-family: var(--disp); font-style: italic;
  font-size: 21px; font-weight: 600; line-height: 1.24; margin: 0 0 10px; padding: 0; border: 0;
}
:root main:not(:has(> article)) > div:first-of-type > div:nth-child(n+2) > h2 a { color: var(--primary); text-decoration: none; }
:root main:not(:has(> article)) > div:first-of-type > div:nth-child(n+2) > h2 a:hover { color: var(--accent); }
:root main:not(:has(> article)) > div:first-of-type > div:nth-child(n+2) > p:last-of-type {
  order: 3; font-family: var(--fb), system-ui, sans-serif; font-size: 15px; line-height: 1.58;
  color: var(--fg); margin: 0 0 16px; opacity: .9; max-width: 64ch;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
:root main:not(:has(> article)) > div:first-of-type > div:nth-child(n+2) > a:last-child {
  order: 4; margin-top: auto; font-family: var(--fm); font-size: 0;
  color: var(--primary); text-decoration: none; padding-top: 13px; border-top: 1px solid var(--hair-soft);
}
:root main:not(:has(> article)) > div:first-of-type > div:nth-child(n+2) > a:last-child::after {
  content: "Seguir leyendo →"; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
:root main:not(:has(> article)) > div:first-of-type > div:nth-child(n+2) > a:last-child:hover { color: var(--accent); }

/* =========================================================
   COMPACT ARCHIVE TAIL (RULE G) — full-width multicol index + Strip 2 "MÁS ENTRADAS"
   scope: main:not(:has(> article)) > div:last-of-type ; rows are <p>(span.date + a)
   ========================================================= */
:root main:not(:has(> article)) > div:last-of-type {
  margin-top: 76px;
  background: var(--paper); border: 1px solid var(--hair-soft); border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04); padding: 0 34px 30px;
  columns: 2; column-gap: 44px;
}
:root main:not(:has(> article)) > div:last-of-type::before {
  content: "MÁS ENTRADAS"; column-span: all; display: flex; align-items: flex-end;
  min-height: 210px; margin: 0 -34px 26px; padding: 24px 34px; border-radius: 10px 10px 0 0;
  background:
    linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.25)),
    url("/theme-assets/article-hero.jpg") center 70% / cover no-repeat,
    var(--primary);
  color: #F3ECDD; font-family: var(--fm);
  font-size: 13.5px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
:root main:not(:has(> article)) > div:last-of-type > p {
  display: block; break-inside: avoid; margin: 0; padding: 11px 0;
  border-bottom: 1px dotted rgba(40,20,45,.16); line-height: 1.45;
}
:root main:not(:has(> article)) > div:last-of-type > p > span {
  display: block; font-family: var(--fm); font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 3px;
}
:root main:not(:has(> article)) > div:last-of-type > p > a {
  font-family: var(--disp); font-style: italic; font-size: 16.5px; font-weight: 500;
  color: var(--primary); text-decoration: none; line-height: 1.32;
}
:root main:not(:has(> article)) > div:last-of-type > p > a:hover { color: var(--accent); }

/* =========================================================
   ARTICLE PAGE  — scope: main:has(> article)
   ========================================================= */
:root main:has(> article) { max-width: 760px; margin: 0 auto; padding: 44px 24px 72px; }
:root main:has(> article) > article { max-width: 720px; margin-left: auto; margin-right: auto; }

:root main:has(> article) > h1 {
  font-family: var(--disp); font-style: italic; font-weight: 600;
  font-size: 41px; line-height: 1.13; letter-spacing: .005em; color: var(--primary);
  margin: 6px auto 10px; max-width: 720px;
}
:root main:has(> article) > time {
  display: block; max-width: 720px; margin: 0 auto 32px;
  font-family: var(--fm); font-size: 12px; color: var(--accent);
  letter-spacing: .16em; text-transform: uppercase; font-weight: 700; line-height: 1.4;
}
:root main:has(> article) > time::after {
  content: " · Por Sofía Ramírez · 6 min de lectura"; color: var(--primary); opacity: .72;
}

:root main:has(> article) > article > p { margin-bottom: 20px; font-size: 18.5px; max-width: 720px; line-height: 1.78; }
:root main:has(> article) > article > p:first-of-type::first-letter {
  font-family: var(--disp); font-style: italic; font-weight: 600;
  font-size: 62px; line-height: .78; float: left; margin: 8px 12px 0 0; color: var(--moment); /* moment colour #2 */
}
:root main:has(> article) > article > h2 {
  font-family: var(--disp); font-style: italic; font-weight: 600;
  font-size: 27px; color: var(--primary); line-height: 1.2;
  margin: 1.7em 0 .55em; padding-bottom: 0; border-bottom: 0; letter-spacing: .005em; max-width: 720px;
}
/* signature dinkus between article sections */
:root main:has(> article) > article > h2:not(:first-of-type)::before {
  content: "❧ ❧ ❧"; display: block; text-align: center; color: var(--accent);
  font-size: 14px; letter-spacing: .4em; font-style: normal; margin: 6px 0 32px; text-indent: .4em;
}
:root main:has(> article) > article h3 {
  font-family: var(--disp); font-style: italic; font-weight: 600; font-size: 20px;
  color: var(--accent); margin: 1.8em 0 .4em; letter-spacing: .005em;
}
:root main:has(> article) > article ul, :root main:has(> article) > article ol { margin: 0 0 20px 26px; max-width: 720px; }
:root main:has(> article) > article li { margin-bottom: 8px; font-size: 17.5px; line-height: 1.72; }
:root main:has(> article) > article li strong, :root main:has(> article) > article > p strong { color: var(--primary); font-weight: 700; }

:root main:has(> article) > article blockquote {
  position: relative; border-left: 3px solid var(--accent); padding: 6px 0 6px 30px; margin: 28px 0;
  font-style: italic; font-size: 19px; line-height: 1.6; color: var(--primary); background: transparent; max-width: 720px;
}
:root main:has(> article) > article blockquote::before {
  content: "\201C"; position: absolute; left: 2px; top: -2px;
  font-family: var(--disp); font-size: 44px; color: var(--accent); opacity: .55; line-height: 1;
}

/* article imagery */
:root main:has(> article) > article figure { margin: 2rem 0; }
:root main:has(> article) > article figure img, :root main:has(> article) > article > img {
  width: 100%; height: auto; display: block; border-radius: var(--r);
  box-shadow: 0 4px 18px rgba(40,20,45,.14);
}

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

/* AFFILIATE CTA — inline pills (RULE J: full body-link path + attr → strictly wins) */
:root main:has(> article) > article > p a[href^="/deal/"],
:root main:has(> article) > article > p a[href^="/ref/"],
:root main:has(> article) > article > p a[href^="/go/"],
:root main:has(> article) > article > p a[href^="/out/"],
:root main:has(> article) > article > ul > li a[href^="/deal/"],
:root main:has(> article) > article > ol > li a[href^="/deal/"] {
  display: inline-block; background: var(--accent); color: var(--bg);
  padding: 2px 13px; border-radius: 6px; text-decoration: none; font-weight: 700;
  font-family: var(--fm); font-size: 15px; letter-spacing: .01em; border-bottom: 0;
  box-shadow: 0 1px 3px rgba(40,20,45,.14);
}
:root main:has(> article) > article > p a[href^="/deal/"]:hover,
:root main:has(> article) > article > p a[href^="/ref/"]:hover,
:root main:has(> article) > article > p a[href^="/go/"]:hover,
:root main:has(> article) > article > p a[href^="/out/"]:hover,
:root main:has(> article) > article > ul > li a[href^="/deal/"]:hover,
:root main:has(> article) > article > ol > li a[href^="/deal/"]:hover {
  background: var(--primary); color: var(--bg); text-decoration: none;
}

/* disclaimer box (article > div) */
:root main:has(> article) > article > div {
  background: #F6EAD6; border: 1px solid var(--hair-soft); border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0; padding: 16px 22px; margin-top: 30px;
  font-family: var(--fb), system-ui, sans-serif; font-size: 13.5px; line-height: 1.6; color: #6B5334;
}
:root main:has(> article) > article > div strong { color: var(--primary); }

/* Related articles (article page — <aside>) */
:root main:has(> article) > aside {
  max-width: 720px; margin: 48px auto 0; border-top: 1px solid var(--border); padding-top: 26px;
}
:root main:has(> article) > aside h4 {
  font-family: var(--fm); font-size: 13px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--primary); margin: 0 0 16px; padding: 0; border: 0;
}
:root main:has(> article) > aside a {
  display: block; font-family: var(--disp); font-style: italic; font-size: 18px;
  color: var(--primary); text-decoration: none; line-height: 1.35;
  padding: 11px 0; border-bottom: 1px dotted rgba(40,20,45,.16);
}
:root main:has(> article) > aside a:hover { color: var(--accent); }

/* =========================================================
   FOOTER
   ========================================================= */
:root footer {
  background: transparent; border-top: 1px solid var(--border); padding: 24px 0 34px; margin-top: 56px;
  text-align: center; font-family: var(--fm); font-size: 12px; color: var(--fg); opacity: .62;
  letter-spacing: .04em; line-height: 1.8;
}
:root footer a { color: var(--fg); text-decoration: none; border-bottom: 1px dotted var(--border); }
:root footer a:hover { color: var(--primary); border-bottom-color: var(--primary); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 860px) {
  :root > body > nav h1 { font-size: 38px; }
  :root main:not(:has(> article)) { padding: 44px 20px 70px; }
  :root main:not(:has(> article)) > div:first-of-type { grid-template-columns: 1fr; column-gap: 0; row-gap: 30px; }
  :root main:not(:has(> article)) > div:first-of-type > div:first-child { grid-template-columns: 1fr; padding: 32px 26px; }
  :root main:not(:has(> article)) > div:first-of-type > div:first-child > h2 { font-size: 31px; }
  :root main:not(:has(> article)) > div:first-of-type > div:first-child::after { display: none; }
  :root main:not(:has(> article)) > div:first-of-type > div:first-child > p:last-of-type { max-width: none; }
  :root main:not(:has(> article)) > div:first-of-type > div:nth-child(2),
  :root main:not(:has(> article)) > div:first-of-type > div:nth-child(3),
  :root main:not(:has(> article)) > div:first-of-type > div:nth-child(4),
  :root main:not(:has(> article)) > div:first-of-type > div:nth-child(n+5),
  :root main:not(:has(> article)) > div:first-of-type > div:nth-child(n+5):nth-child(odd):last-child { grid-column: 1 / -1; }
  :root main:not(:has(> article)) > div:last-of-type { columns: 1; }
  :root main:has(> article) > h1 { font-size: 33px; }
  :root main:has(> article) > article > p { font-size: 17.5px; }
  :root main:has(> article) > article > p:first-of-type::first-letter { font-size: 54px; }
}