*{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}
.sc-cJOQip{max-width:860px;margin:0 auto;padding:0 20px}
.sc-aGpcfy{background:#fff;padding:28px 0;margin-bottom:32px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.sc-aGpcfy h1{font-size:22px;font-weight:700;margin-bottom:2px}
.sc-aGpcfy p{font-size:14px;color:#666}
.sc-aGpcfy a{color:#333;text-decoration:none;font-size:18px;font-weight:700}
.sc-MLPQej{display:flex;flex-direction:column;gap:20px}
.sc-GGyCOv{background:#fff;border-radius:12px;box-shadow:0 1px 6px rgba(0,0,0,.06);padding:24px 28px;transition:transform .15s,box-shadow .15s}
.sc-GGyCOv:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.1)}
.sc-GGyCOv h2{font-size:19px;margin-bottom:6px}
.sc-GGyCOv h2 a{color:#1a1a1a;text-decoration:none}
.sc-GGyCOv .sc-fwdrrt{font-size:12px;color:#999;margin-bottom:8px}
.sc-GGyCOv p{font-size:14px;color:#555;margin-bottom:12px}
.sc-XTASWf{display:inline-block;background:#5865f2;color:#fff;padding:6px 16px;border-radius:20px;font-size:13px;font-weight:600;text-decoration:none}
.sc-XTASWf:hover{background:#4752c4}
.sc-FDOLEE{padding-bottom:60px}
.sc-FDOLEE h1{font-size:30px;font-weight:700;margin-bottom:8px}
.sc-FDOLEE time{font-size:12px;color:#999;display:block;margin-bottom:24px}
.sc-FDOLEE h2{font-size:22px;margin:32px 0 12px}
.sc-FDOLEE h3{font-size:18px;margin:24px 0 8px}
.sc-FDOLEE p{margin-bottom:16px}
.sc-FDOLEE ul,.sc-FDOLEE ol{margin:0 0 16px 24px}
.sc-FDOLEE a{color:#5865f2}
.sc-FDOLEE img{max-width:100%;height:auto;border-radius:12px;margin:16px 0}
.sc-BvsUzw{padding:24px 0;margin-top:40px;text-align:center;font-size:12px;color:#999}
.sc-BvsUzw a{color:#999;text-decoration:none}
.sc-tgMsbQ{background:#e8eaf0;border-radius:8px;padding:12px 16px;margin-bottom:20px;font-size:13px;color:#888;font-style:italic}
.sc-aEoJLU{background:#fff8e1;border-radius:8px;padding:12px 16px;margin-top:24px;font-size:12px;color:#9e8600}
.sc-FMiuGF{display:inline-block;background:#f0f2f7;border-radius:12px;padding:4px 12px;margin:-18px 0 24px;font-size:12px;color:#777}
.sc-pSxImb{text-align:center;margin:0 0 24px}
.sc-curpiS{max-width:100%;height:auto;border-radius:12px}
.sc-ZyvPds{margin-top:32px;padding-top:20px;border-top:1px solid #e0e0e0}
.sc-ZyvPds 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)}
.sc-cjDmiu{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.sc-tWffRu{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}
.sc-tWffRu:hover{box-shadow:0 2px 8px rgba(0,0,0,.1)}
/* === Theme === */
:root{--primary:#D4A017;--accent:#1C1C1C;--bg:#F0EDE6;--fg:#1C1C1C;--border:#2A2A2A;--r:0px;--fb:'Barlow';--fh:'Barlow Condensed'}
/* === Custom === */
/* v.4606d8 — layout revision */
/*
 * guardiacalle.com — ap-callejero-es
 * Damián Quintero, Tijuana — reseñas de defensa personal callejera.
 * Editorial signature: industrial poster caps (Barlow Condensed) as the loud
 * display voice, a sturdy slab serif (Bitter) as the reading voice, tracked
 * Barlow as the meta voice. Gold #D4A017 is reserved for ONE confident moment
 * (masthead hazard stripe + hero). Moment colour plum #5E3A5C used in exactly
 * two places: the hero drop cap and the article intro drop cap.
 *
 * Live template is the styled-components (sc-*) build: classes are obfuscated
 * and inert to author selectors, so everything below is element+structural,
 * with [class]/:root boosts to out-specify the base pass. Home <main> has two
 * <div> children (card grid + tail); article <main> has > article, so home
 * rules are scoped main:not(:has(> article)) and article rules main:has(> article).
 */

/* ── Fonts: @font-face (a top @import is dropped after the concat) ─────────── */

@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600;
  src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxwL3I-JCGChYJ8VI-L6OO_au7B4873z3bWuQ.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700;
  src: url(https://fonts.gstatic.com/s/barlowcondensed/v13/HTxwL3I-JCGChYJ8VI-L6OO_au7B46r2z3bWuQ.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400;
  src: url(https://fonts.gstatic.com/s/barlow/v13/7cHpv4kjgoGqM7E_DMs5.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600;
  src: url(https://fonts.gstatic.com/s/barlow/v13/7cHqv4kjgoGqM7E30-8s51os.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700;
  src: url(https://fonts.gstatic.com/s/barlow/v13/7cHqv4kjgoGqM7E3t-4s51os.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Bitter'; font-style: normal; font-weight: 400 700;
  src: url(https://fonts.gstatic.com/s/bitter/v42/rax8HiqOu8IVPmn7f4xp.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Bitter'; font-style: italic; font-weight: 500 600;
  src: url(https://fonts.gstatic.com/s/bitter/v42/rax-HiqOu8IVPmn7erxrJD0.woff2) format('woff2'); font-display: swap; }

/* ── Tokens ───────────────────────────────────────────────────────────────── */

:root {
  --disp: 'Barlow Condensed', 'Arial Narrow', sans-serif;   /* display / poster caps */
  --serif: 'Bitter', Georgia, serif;                        /* reading voice        */
  --meta: 'Barlow', system-ui, sans-serif;                  /* meta / kickers       */
  --moment: #5E3A5C;                                        /* plum — 2 uses only   */
  --paper: #F5EFE1;                                         /* raised warm surface  */
  --paper-2: #FAF5EC;                                       /* lighter warm surface */
  --ink-soft: #3A362F;
  --hair: rgba(28, 28, 28, 0.12);
}

* { box-sizing: border-box; }

:root body {
  font-family: var(--serif);
  color: var(--fg);
  background: var(--bg);
  line-height: 1.75;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

::selection { background: var(--primary); color: var(--accent); }

h1, h2, h3, h4 { font-family: var(--disp); font-weight: 700; line-height: 1.06; color: var(--fg); }
strong { font-weight: 700; }
img { max-width: 100%; height: auto; }

/* ═══ MASTHEAD — photo + gradient + hazard stripe + wordmark + manifesto ═════ */

:root body > header[class] {
  position: relative;
  max-width: none;
  padding: 0;
  margin: 0 0 4.5rem;
  border: 0;
  background-color: #14120f;
  background-image:
    linear-gradient(180deg, rgba(18, 16, 14, 0.72), rgba(18, 16, 14, 0.90)),
    url("/theme-assets/hero-masthead.jpg");
  background-size: cover;
  background-position: center;
  box-shadow: none;
}

:root body > header[class] > div {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding: 3rem 20px 3.2rem;
}

/* warning-triangle monogram — the persona's signature mark */
:root body > header[class] > div::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 3rem;
  width: 52px;
  height: 48px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 92'%3E%3Cpath d='M50 6 L96 86 L4 86 Z' fill='none' stroke='%23D4A017' stroke-width='7' stroke-linejoin='round'/%3E%3Crect x='46' y='34' width='8' height='26' rx='2' fill='%23D4A017'/%3E%3Crect x='46' y='66' width='8' height='9' rx='2' fill='%23D4A017'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.95;
}

/* caution-tape hazard stripe — the one loud amber gesture */
:root body > header[class]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 8px;
  background: repeating-linear-gradient(45deg, var(--primary) 0 18px, #14120f 18px 36px);
}

:root body > header[class] h1 {
  font-family: var(--disp);
  font-size: clamp(2.3rem, 6.4vw, 3.5rem);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #F3EFE7;
  margin: 0 0 0.55rem;
}

:root body > header[class] h1 a,
:root body > header[class] span a {
  color: #F3EFE7;
  text-decoration: none;
}

/* article masthead: wordmark is a <span><a> */
:root body > header[class] span a {
  font-family: var(--disp);
  font-size: 1.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* manifesto — serif italic, the reading voice arriving early */
:root body > header[class] p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(0.98rem, 2.1vw, 1.12rem);
  line-height: 1.55;
  letter-spacing: 0;
  color: rgba(240, 237, 230, 0.80);
  max-width: 60ch;
  margin: 0.2rem 0 0;
  padding-right: 66px;
}

/* ═══ HOMEPAGE ══════════════════════════════════════════════════════════════ */

:root main:not(:has(> article)) {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 20px 3rem;
}

/* card grid — 2 columns, generous rhythm */
:root main:not(:has(> article)) > div:first-of-type {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.9rem;
  align-items: stretch;
}

/* every card: warm paper surface, soft frame (kills the base #fff box) */
:root main:not(:has(> article)) > div:first-of-type > div[class] {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  padding: 26px 32px 28px;
  margin: 0;
  transform: none;
}
:root main:not(:has(> article)) > div:first-of-type > div[class]:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transform: none;
}

/* card kicker (the date <p>) — neutral meta, NOT gold (gold stays reserved) */
:root main:not(:has(> article)) > div:first-of-type > div[class] > p[class]:first-child {
  font-family: var(--meta);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8A8375;
  background: none;
  padding: 0;
  margin: 0 0 0.7rem;
}

/* card title */
:root main:not(:has(> article)) > div:first-of-type > div[class] > h2 {
  font-family: var(--disp);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}
:root main:not(:has(> article)) > div:first-of-type > div[class] > h2 a {
  color: var(--accent);
  text-decoration: none;
}
:root main:not(:has(> article)) > div:first-of-type > div[class] > h2 a:hover { color: #7A5C15; }

/* card excerpt — serif, clamped to keep row heights even */
:root main:not(:has(> article)) > div:first-of-type > div[class] > h2 + p {
  font-family: var(--serif);
  font-size: 0.98rem;
  line-height: 1.62;
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
  max-width: 62ch;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* card CTA — kill the indigo pill; quiet underlined meta link */
:root main:not(:has(> article)) > div:first-of-type > div[class] > a {
  margin-top: auto;
  align-self: flex-start;
  display: inline-block;
  font-family: var(--meta);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background: none;
  border: 0;
  border-bottom: 2px solid var(--primary);
  border-radius: 0;
  padding: 0 0 3px;
  text-decoration: none;
}
:root main:not(:has(> article)) > div:first-of-type > div[class] > a:hover { color: #7A5C15; }

/* ── THE HERO — card 1, full width, THE loud voice ────────────────────────── */

:root main:not(:has(> article)) > div:first-of-type > div[class]:first-child {
  grid-column: 1 / -1;
  background: var(--paper-2);
  border: 1px solid var(--hair);
  border-top: 4px solid var(--primary);
  border-radius: 8px;
  padding: 2.4rem 2.6rem 2.6rem;
}

/* "ÚLTIMO ANÁLISIS" badge */
:root main:not(:has(> article)) > div:first-of-type > div[class]:first-child::before {
  content: "Último análisis";
  display: inline-block;
  font-family: var(--meta);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--primary);
  padding: 4px 12px;
  border-radius: 3px;
  margin-bottom: 1.1rem;
}

/* hero byline — fills the meta role, credits Damián */
:root main:not(:has(> article)) > div:first-of-type > div[class]:first-child > p[class]:first-child {
  font-family: var(--meta);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6E6656;
  margin: 0 0 1rem;
}
:root main:not(:has(> article)) > div:first-of-type > div[class]:first-child > p[class]:first-child::before {
  content: "Por Damián Quintero · ";
  color: var(--accent);
}

/* hero title — big display, no clamp */
:root main:not(:has(> article)) > div:first-of-type > div[class]:first-child > h2 {
  font-size: clamp(2.1rem, 5.4vw, 3.1rem);
  font-weight: 700;
  line-height: 0.98;
  margin: 0 0 0.9rem;
  max-width: 20ch;
}

/* hero excerpt — serif, larger, plum drop cap (MOMENT COLOUR #1 of 2) */
:root main:not(:has(> article)) > div:first-of-type > div[class]:first-child > h2 + p {
  font-family: var(--serif);
  font-size: 1.18rem;
  line-height: 1.55;
  color: #2A2620;
  max-width: 60ch;
  margin: 0 0 1.6rem;
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
}
:root main:not(:has(> article)) > div:first-of-type > div[class]:first-child > h2 + p::first-letter {
  float: left;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 3.6rem;
  line-height: 0.72;
  padding: 0.06em 0.16em 0 0;
  color: var(--moment);
}

/* hero CTA — outlined gold pill, the one confident amber moment */
:root main:not(:has(> article)) > div:first-of-type > div[class]:first-child > a {
  margin-top: 0;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  color: var(--accent);
  background: transparent;
  border: 2px solid var(--primary);
  border-radius: 3px;
  padding: 0.65rem 1.5rem;
  transition: background 0.14s, color 0.14s;
}
:root main:not(:has(> article)) > div:first-of-type > div[class]:first-child > a:hover {
  background: var(--primary);
  color: var(--accent);
}

/* full-width label BELOW the hero, ABOVE the picks row */
:root main:not(:has(> article)) > div:first-of-type > div[class]:first-child::after {
  content: "Selección de Damián — léelos primero";
  grid-column: 1 / -1;
  display: block;
  margin: 2.4rem -2.6rem -0.4rem;
  padding: 0 2.6rem 0.9rem;
  border-bottom: 1px solid var(--hair);
  font-family: var(--meta);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ── EDITOR'S PICKS band — cards 2 & 3, paired feature (the 2nd gear) ─────── */

:root main:not(:has(> article)) > div:first-of-type > div[class]:nth-child(2),
:root main:not(:has(> article)) > div:first-of-type > div[class]:nth-child(3) {
  background: var(--paper-2);
  border-top: 3px solid var(--primary);
  padding: 28px 32px 30px;
}
:root main:not(:has(> article)) > div:first-of-type > div[class]:nth-child(2) > h2,
:root main:not(:has(> article)) > div:first-of-type > div[class]:nth-child(3) > h2 {
  font-size: 1.42rem;
}

/* ── LEAD JOURNAL card (card 4) — full width, cover strip = SECTION BREAK 1 ── */

:root main:not(:has(> article)) > div:first-of-type > div[class]:nth-child(4) {
  grid-column: 1 / -1;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-top: 1.2rem;
}
:root main:not(:has(> article)) > div:first-of-type > div[class]:nth-child(4):hover { box-shadow: none; }

/* STRIP 1 — photo band with "MÁS ABAJO" overlay (between picks and journal) */
:root main:not(:has(> article)) > div:first-of-type > div[class]:nth-child(4)::before {
  content: "Más abajo";
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 200px;
  margin: 0 0 1.8rem;
  border-radius: 8px;
  background-image:
    linear-gradient(rgba(20, 24, 28, 0.55), rgba(20, 24, 28, 0.30)),
    url("/theme-assets/article-hero.jpg");
  background-size: cover;
  background-position: center 30%;
  font-family: var(--meta);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #F3EFE7;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  padding-bottom: 1.4rem;
}
/* lead card content: full-width, larger title, 2-line excerpt */
:root main:not(:has(> article)) > div:first-of-type > div[class]:nth-child(4) > h2 {
  font-size: clamp(1.6rem, 3.6vw, 2.1rem);
  max-width: 24ch;
}
:root main:not(:has(> article)) > div:first-of-type > div[class]:nth-child(4) > h2 + p {
  -webkit-line-clamp: 2;
  font-size: 1.05rem;
}

/* ── SECTION BREAK 2 + COMPACT TAIL (2nd div of main) ─────────────────────── */

:root main:not(:has(> article)) > div:not(:first-of-type) {
  grid-column: 1 / -1;
  max-width: none;
  margin: 4.5rem 0 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: 0;
  display: block;
}

/* STRIP 2 — photo band with "MÁS ENTRADAS" (between journal grid and tail) */
:root main:not(:has(> article)) > div:not(:first-of-type)::before {
  content: "Más entradas";
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 210px;
  margin: 0 0 2.2rem;
  border-radius: 8px;
  background-image:
    linear-gradient(rgba(28, 22, 30, 0.58), rgba(28, 22, 30, 0.30)),
    url("/theme-assets/article-hero.jpg");
  background-size: cover;
  background-position: center 72%;
  font-family: var(--meta);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #F3EFE7;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  padding-bottom: 1.5rem;
}

/* tail rows as a magazine index */
:root main:not(:has(> article)) > div:not(:first-of-type) > a[class] {
  display: block;
  break-inside: avoid;
  background: var(--paper);
  border: 0;
  border-bottom: 1px dotted rgba(28, 28, 28, 0.22);
  border-radius: 0;
  box-shadow: none;
  padding: 14px 12px;
  font-family: var(--disp);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}
:root main:not(:has(> article)) > div:not(:first-of-type) > a[class]:hover {
  color: #7A5C15;
  background: var(--paper-2);
}

/* ═══ ARTICLE PAGE ══════════════════════════════════════════════════════════ */

:root main[class]:has(> article) {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px 4rem;
}

/* massive poster-caps title */
:root main[class]:has(> article) > h1 {
  font-family: var(--disp);
  font-size: clamp(2.1rem, 6vw, 3.2rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 4px solid var(--primary);
  padding-bottom: 0.3em;
  margin: 0.3em 0 0.5em;
}

/* dateline */
:root main[class]:has(> article) > time {
  display: block;
  font-family: var(--meta);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8A8375;
  margin: 0 0 2rem;
}

/* top hero image — soft frame */
:root main[class]:has(> article) > article > div[class]:first-of-type {
  margin: 0 0 2rem;
}
:root main[class]:has(> article) > article > div[class]:first-of-type img {
  border-radius: 8px;
}

/* body copy — serif, editorial measure */
:root main[class]:has(> article) > article > p {
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.78;
  color: #26241F;
  max-width: 66ch;
  margin: 0 0 1.35em;
}

/* intro drop cap (MOMENT COLOUR #2 of 2) */
:root main[class]:has(> article) > article > p:first-of-type::first-letter {
  float: left;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 3.8rem;
  line-height: 0.72;
  padding: 0.05em 0.16em 0 0;
  color: var(--moment);
}

/* section heads — gold left rule + dinkus above */
:root main[class]:has(> article) > article h2 {
  font-family: var(--disp);
  font-size: clamp(1.5rem, 3.6vw, 1.9rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--accent);
  border-left: 5px solid var(--primary);
  padding-left: 0.7em;
  margin: 2.4em 0 0.6em;
}
:root main[class]:has(> article) > article h2::before {
  content: "✷ ✷ ✷";
  display: block;
  margin: 0 0 0.9em -0.7em;
  font-family: var(--meta);
  font-size: 0.8rem;
  letter-spacing: 0.5em;
  color: var(--primary);
  opacity: 0.75;
}

:root main[class]:has(> article) > article h3 {
  font-family: var(--disp);
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--accent);
  margin: 1.9em 0 0.4em;
}

:root main[class]:has(> article) > article ul,
:root main[class]:has(> article) > article ol {
  max-width: 66ch;
  margin: 0 0 1.35em;
  padding-left: 1.4em;
}
:root main[class]:has(> article) > article li {
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.7;
  color: #26241F;
  margin-bottom: 0.5em;
}

/* blockquote — hanging quote */
:root main[class]:has(> article) > article blockquote {
  position: relative;
  font-family: var(--serif);
  font-style: italic;
  border-left: 5px solid var(--primary);
  background: rgba(212, 160, 23, 0.08);
  border-radius: 0 8px 8px 0;
  margin: 2em 0;
  padding: 1em 1.3em 1em 1.6em;
  max-width: 66ch;
}
:root main[class]:has(> article) > article blockquote::before {
  content: "“";
  position: absolute;
  left: 0.24em; top: 0.12em;
  font-family: var(--serif);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--primary);
  opacity: 0.5;
}
:root main[class]:has(> article) > article blockquote p { margin: 0; }

/* body links — warm, gold-underlined (full element path so a CTA rule can beat it) */
:root main[class]:has(> article) > article p a,
:root main[class]:has(> article) > article li a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--primary);
  text-underline-offset: 3px;
  font-weight: 600;
}
:root main[class]:has(> article) > article p a:hover,
:root main[class]:has(> article) > article li a:hover { color: #7A5C15; }

/* disclosure callout (last div in article) — warm, framed */
:root main[class]:has(> article) > article > div[class]:last-of-type {
  background: var(--paper-2);
  border: 1px solid var(--hair);
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  padding: 1rem 1.3rem;
  margin: 2.5em 0 0;
  font-family: var(--meta);
  font-size: 0.86rem;
  line-height: 1.6;
  color: #6E6656;
}

/* related block */
:root main[class]:has(> article) > div:last-of-type {
  margin-top: 3.5rem;
  padding-top: 1.6rem;
  border-top: 2px solid var(--primary);
}
:root main[class]:has(> article) > div:last-of-type h3 {
  font-family: var(--meta);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin: 0 0 1.1rem;
}
:root main[class]:has(> article) > div:last-of-type a[class] {
  display: block;
  background: var(--paper);
  border: 0;
  border-bottom: 1px dotted rgba(28, 28, 28, 0.2);
  border-radius: 0;
  box-shadow: none;
  padding: 0.75rem 0.6rem;
  font-family: var(--disp);
  font-size: 1.08rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}
:root main[class]:has(> article) > div:last-of-type a[class]:hover {
  color: #7A5C15;
  background: var(--paper-2);
}

/* ═══ FOOTER ════════════════════════════════════════════════════════════════ */

:root body > footer[class] {
  background: var(--accent);
  color: #9A9284;
  border-top: 3px solid var(--primary);
  margin-top: 4rem;
}
:root body > footer[class] a { color: #CFC7B8; text-decoration: none; }
:root body > footer[class] a:hover { color: var(--primary); }

/* ═══ RESPONSIVE ════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  :root main:not(:has(> article)) > div:first-of-type {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  :root body > header[class] > div::after { display: none; }
  :root body > header[class] p { padding-right: 0; }
  :root main:not(:has(> article)) > div:first-of-type > div[class]:first-child { padding: 1.8rem 1.5rem 2rem; }
  :root main:not(:has(> article)) > div:first-of-type > div[class]:first-child::after {
    margin: 2rem -1.5rem -0.4rem;
    padding: 0 1.5rem 0.9rem;
  }
}