*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Georgia,'Times New Roman',serif;line-height:1.8;color:#222;background:#f4f1eb}
.inner-ebc81a{max-width:1100px;margin:0 auto;padding:0 24px}
.panel-1cac9d{background:linear-gradient(135deg,#2c3e50,#34495e);color:#fff;padding:48px 0;text-align:center;margin-bottom:48px}
.panel-1cac9d h1{font-size:36px;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px}
.panel-1cac9d p{font-size:16px;opacity:.8;font-style:italic}
.panel-1cac9d .header-005f11{color:#fff;text-decoration:none;font-size:20px;letter-spacing:1px;text-transform:uppercase}
.section-7da9c6{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px}
.inner-d76a5f{background:#fff;border-radius:4px;box-shadow:0 2px 12px rgba(0,0,0,.08);padding:28px;transition:box-shadow .2s}
.inner-d76a5f:hover{box-shadow:0 4px 20px rgba(0,0,0,.14)}
.inner-d76a5f h2{font-size:22px;margin-bottom:10px;line-height:1.3}
.inner-d76a5f h2 a{color:#2c3e50;text-decoration:none}
.inner-d76a5f .nav-63f01e{font-size:12px;color:#888;margin-bottom:10px;text-transform:uppercase;letter-spacing:1px}
.inner-d76a5f p{font-size:15px;color:#555;margin-bottom:14px}
.wrapper-f3c6ab{color:#e74c3c;text-decoration:none;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.5px}
.shell-71a6fd{max-width:780px;margin:0 auto;padding:0 24px 60px}
.shell-71a6fd h1{font-size:36px;margin-bottom:10px;line-height:1.2}
.shell-71a6fd .nav-63f01e{font-size:13px;color:#888;display:block;margin-bottom:28px;text-transform:uppercase;letter-spacing:1px}
.shell-71a6fd h2{font-size:24px;margin:36px 0 14px}
.shell-71a6fd h3{font-size:19px;margin:28px 0 10px}
.shell-71a6fd p{margin-bottom:18px;font-size:17px}
.shell-71a6fd ul,.shell-71a6fd ol{margin:0 0 18px 28px}
.shell-71a6fd a{color:#e74c3c}
.shell-71a6fd img{max-width:100%;height:auto;border-radius:4px;margin:20px 0}
.content-8e4be3{border-top:2px solid #ddd;padding:28px 0;margin-top:48px;text-align:center;font-size:13px;color:#888}
.content-8e4be3 a{color:#888}
.section-f5e60a{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}
.page-724a5b{background:#f9f3e3;padding:16px 20px;margin-top:28px;font-size:13px;color:#7a6230;border-radius:4px}
.footer-b50a72{font-size:11px;color:#888;margin:-22px 0 28px;text-transform:uppercase;letter-spacing:1.5px}
.sidebar-c61912{margin:0 0 28px}
.content-0238ab{width:100%;height:auto;border-radius:4px}
.outer-886011{border-top:2px solid #ddd;margin-top:40px;padding-top:24px}
.outer-886011 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}
.block-1d4503{background:#fff;border-radius:4px;box-shadow:0 2px 12px rgba(0,0,0,.08);padding:22px 28px;margin-top:28px}
.block-1d4503 p{font-size:15px;padding:4px 0;margin:0}
.block-1d4503 .nav-63f01e{margin:0 8px 0 0;display:inline}
.block-1d4503 a{color:#2c3e50;text-decoration:none}
.block-1d4503 a:hover{color:#e74c3c}
/* === Theme === */
:root{--primary:#C4174A;--accent:#F0A500;--cobalt:#1B4D8F;--ink:#171326;--bg:#F8F5F0;--fg:#171326;--paper:#FFFFFF;--border:#E2D9CC;--muted:#6B6478;--r:2px;--fb:'Outfit';--fh:'Syne';--fm:'Space Mono'}
/* === Custom === */
/* === QA round-1 fixes (2026-07-21T21:54:49+0800) === */
/*
  Paleta en Casa — Sofía Navarro, diseñadora gráfica en Gràcia.
  Reference: 1980s–90s Barcelona graphic-design explosion (Mariscal, Peret, La Luna
  de Madrid), Pantone swatch fans, Barcelona '92 primary/secondary play, mid-century
  European cosmetics packaging — FLAT colour, hard edges, no soft gradients.
  Signature: the "tira de muestras", a hard-stop carmín/ámbar/cobalto swatch bar,
  used exactly twice (masthead foot + featured-entry rail). Cobalto #1B4D8F is the
  one added moment colour and appears nowhere else.
  Voices: Syne (display) / Outfit (text) / Space Mono (meta, reads as swatch codes).
  NOTE: the old top-of-file @import was dead — it is concatenated after rules, so
  Chromium dropped it and the site rendered in system fallbacks. Replaced with
  position-independent @font-face. Selectors are element/structural only, because
  the deploy pipeline rewrites class names.
  The theme photo assets are deliberately unused: a soft-focus photo masthead is the
  one thing this persona would reject. Flat poster colour instead.
*/

/* === FONTS (position-independent) === */

@font-face{font-family:'Syne';font-style:normal;font-weight:600 800;font-display:swap;
  src:url(https://fonts.gstatic.com/s/syne/v24/8vIH7w4qzmVxm2BL9G78HEY.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Syne';font-style:normal;font-weight:600 800;font-display:swap;
  src:url(https://fonts.gstatic.com/s/syne/v24/8vIH7w4qzmVxm25L9G78HEZnMg.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Outfit';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJuktqUYLkn8BJ.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(https://fonts.gstatic.com/s/spacemono/v17/i7dPIFZifjKcF5UAWdDRYEF8RXi4EwQ.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;
  src:url(https://fonts.gstatic.com/s/spacemono/v17/i7dMIFZifjKcF5UAWdDRaPpZUFWaHi6WZ3Q.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;
  src:url(https://fonts.gstatic.com/s/spacemono/v17/i7dMIFZifjKcF5UAWdDRaPpZUFuaHi6WZ3S_Yg.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}

/* === TOKENS === */

:root {
  --primary: #C4174A;   /* carmín */
  --accent:  #F0A500;   /* ámbar  */
  --cobalt:  #1B4D8F;   /* moment colour — the two swatch bars only */
  --ink:     #171326;
  --bg:      #F8F5F0;
  --fg:      #171326;
  --paper:   #FFFFFF;
  --border:  #E2D9CC;
  --muted:   #6B6478;
  --r:       2px;
  --fb:      'Outfit';
  --fh:      'Syne';
  --fm:      'Space Mono';
  --swatch:  linear-gradient(90deg,#C4174A 0 33.34%,#F0A500 0 66.67%,#1B4D8F 0 100%);
  --dinkus:  linear-gradient(90deg,#C4174A 0 50%,#F0A500 0 100%);
}

/* === BASE === */

body {
  font-family: var(--fb), system-ui, -apple-system, sans-serif;
  color: var(--fg);
  background: var(--bg);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fh), system-ui, sans-serif;
  color: var(--ink);
  line-height: 1.16;
  letter-spacing: -0.01em;
  margin-top: 1.6em;
  margin-bottom: 0.5em;
}

h1 { font-size: 2.2rem; font-weight: 800; }
h2 { font-size: 1.55rem; font-weight: 700; }
h3 { font-size: 1.2rem;  font-weight: 700; color: var(--primary); }
h4 { font-size: 1.02rem; font-weight: 700; }
h5, h6 {
  font-family: var(--fm), ui-monospace, monospace;
  font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--muted);
}

p { margin: 0 0 1.2em; }

a {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .15s, background-color .15s;
}
a:hover { color: var(--ink); }

blockquote {
  margin: 2em 0;
  padding: .2em 0 .2em 1.6em;
  border-left: 4px solid var(--accent);
  background: transparent;
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.42;
  color: var(--ink);
  font-style: normal;
}
blockquote p { margin: 0; }

ul, ol { padding-left: 1.4em; margin: 0 0 1.2em; }
li { margin-bottom: .35em; }
ul li::marker { color: var(--accent); }
ol li::marker { color: var(--primary); font-weight: 700; }

hr { border: none; height: 8px; background: var(--swatch); margin: 2.4em 0; }
img { max-width: 100%; height: auto; }


/* ==========================================================================
   MASTHEAD — flat poster band + the swatch bar (signature, 1 of 2)
   ========================================================================== */

:root body>nav:first-of-type {
  background: var(--ink);
  color: #fff;
  max-width: none;
  padding: 2.9rem 0 0;
  margin: 0 0 3.2rem;
  text-align: left;
  border: none;
  position: relative;
}
:root body>nav:first-of-type::after {
  content: "";
  display: block;
  height: 12px;
  margin-top: 2.4rem;
  background: var(--swatch);
}
:root body>nav:first-of-type>div::before {
  content: "GR\0000C0CIA, BARCELONA\0000A0\0000B7\0000A0CUADERNO DE COLOR";
  display: block;
  font-family: var(--fm), ui-monospace, monospace;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .26em;
  color: var(--accent);
  margin-bottom: 1.1rem;
}
:root body>nav:first-of-type>div>h1 {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: clamp(2.6rem, 7.4vw, 4.7rem);
  font-weight: 800;
  line-height: .94;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 1.1rem;
}
/* manifesto */
:root body>nav:first-of-type>div>p {
  font-family: var(--fb), sans-serif;
  font-size: .96rem;
  font-style: normal;
  font-weight: 300;
  line-height: 1.62;
  color: rgba(255,255,255,.68);
  max-width: 54ch;
  opacity: 1;
  margin: 0;
  padding-left: 1rem;
  border-left: 3px solid var(--primary);
}
/* interior pages: wordmark is a link, band is shorter, aligned to the text column */
:root body>nav:first-of-type:has(>div>a) { padding-top: 1.9rem; }
:root body>nav:first-of-type:has(>div>a)::after { margin-top: 1.6rem; }
:root body>nav:first-of-type:has(>div>a)>div { max-width: 780px; }
:root body>nav:first-of-type>div>a {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}
:root body>nav:first-of-type>div>a:hover { color: var(--accent); }


/* ==========================================================================
   HOME — hero → "tres para empezar" band → chronological grid → archive index
   ========================================================================== */

:root main:has(>div>div>h2)>div:first-of-type {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 28px;
  row-gap: 2.2rem;
}

/* shared card */
:root main:has(>div>div>h2)>div:first-of-type>div {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  padding: 1.5rem 1.5rem 1.6rem;
  transition: border-color .15s, box-shadow .15s;
}
:root main:has(>div>div>h2)>div:first-of-type>div>h2 {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -.012em;
  margin: 0 0 .55rem;
}
:root main:has(>div>div>h2)>div:first-of-type>div>h2>a { color: var(--ink); text-decoration: none; }
:root main:has(>div>div>h2)>div:first-of-type>div>h2>a:hover { color: var(--primary); }
:root main:has(>div>div>h2)>div:first-of-type>div>p:first-of-type {
  font-family: var(--fm), ui-monospace, monospace;
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .7rem;
}
:root main:has(>div>div>h2)>div:first-of-type>div>p:last-of-type {
  font-size: .92rem;
  line-height: 1.62;
  color: #55506A;
  margin: 0 0 1.2rem;
}
/* CTA — template ships English "Continue Reading" on a Spanish site; relabel */
:root main:has(>div>div>h2)>div:first-of-type>div>a:last-of-type {
  align-self: flex-start;
  margin-top: auto;
  font-size: 0;
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}
:root main:has(>div>div>h2)>div:first-of-type>div>a:last-of-type::after {
  content: "LEER LA ENTRADA\0000A0\002192";
  font-family: var(--fm), ui-monospace, monospace;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--primary);
}
:root main:has(>div>div>h2)>div:first-of-type>div>a:last-of-type:hover { border-bottom-color: var(--primary); }

/* --- 1. HERO — the one loud voice --------------------------------------- */

:root main:has(>div>div>h2)>div:first-of-type>div:first-of-type {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 44px;
  border-top: 10px solid var(--primary);
  padding: 2.2rem 2rem 2.4rem;
}
:root main:has(>div>div>h2)>div:first-of-type>div:first-of-type>p:first-of-type {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--muted);
  margin: 0 0 1rem;
}
:root main:has(>div>div>h2)>div:first-of-type>div:first-of-type>p:first-of-type::before {
  content: "\0000DALTIMO EXPERIMENTO\0000A0\0000B7\0000A0";
  color: var(--primary);
}
:root main:has(>div>div>h2)>div:first-of-type>div:first-of-type>h2 {
  font-size: clamp(1.9rem, 3.7vw, 2.8rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.032em;
  margin: 0 0 1.1rem;
}
:root main:has(>div>div>h2)>div:first-of-type>div:first-of-type>p:last-of-type {
  font-size: 1.06rem;
  line-height: 1.66;
  color: #423D55;
  max-width: 52ch;
  margin: 0 0 1.7rem;
}
/* typographic anchor */
:root main:has(>div>div>h2)>div:first-of-type>div:first-of-type>p:last-of-type::first-letter {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 3.3em;
  font-weight: 800;
  line-height: .8;
  color: var(--primary);
  float: left;
  margin: .04em .1em 0 0;
}
/* outlined pill CTA */
:root main:has(>div>div>h2)>div:first-of-type>div:first-of-type>a:last-of-type {
  justify-self: start;
  align-self: end;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: .6rem 1.4rem;
  background: transparent;
}
:root main:has(>div>div>h2)>div:first-of-type>div:first-of-type>a:last-of-type::after {
  content: "LEER EL EXPERIMENTO\0000A0\002192";
  font-size: .7rem;
  color: var(--ink);
}
:root main:has(>div>div>h2)>div:first-of-type>div:first-of-type>a:last-of-type:hover {
  background: var(--ink);
  border-color: var(--ink);
}
:root main:has(>div>div>h2)>div:first-of-type>div:first-of-type>a:last-of-type:hover::after { color: var(--accent); }
/* metadata rail — fills the right column so the hero row is never lopsided.
   Second and last appearance of the swatch bar / cobalto. */
:root main:has(>div>div>h2)>div:first-of-type>div:first-of-type::after {
  content: "N.\0000BA\0000A001\00000A\00000ACUADERNO DE COLOR\00000AGR\0000C0CIA, BCN\00000A\00000APALETA\00000AC4174A\0000A0CARM\0000CDN\00000AF0A500\0000A0\0000C1MBAR\00000A1B4D8F\0000A0COBALTO";
  white-space: pre;
  font-family: var(--fm), ui-monospace, monospace;
  font-size: .62rem;
  line-height: 1.9;
  letter-spacing: .06em;
  color: var(--muted);
  background-image: var(--swatch);
  background-size: 9px 100%;
  background-repeat: no-repeat;
  background-position: left top;
  padding-left: 22px;
  margin-top: 1.8rem;
}

/* --- 2. "TRES PARA EMPEZAR" band (cards 2–4): the change of gear --------- */

:root main:has(>div>div>h2)>div:first-of-type>div:nth-of-type(n+2):nth-of-type(-n+4) {
  background: var(--ink);
  border: none;
  border-top: 6px solid var(--accent);
  padding: 1.55rem 1.5rem 1.7rem;
}
:root main:has(>div>div>h2)>div:first-of-type>div:nth-of-type(n+2):nth-of-type(-n+4)>h2>a { color: #fff; }
:root main:has(>div>div>h2)>div:first-of-type>div:nth-of-type(n+2):nth-of-type(-n+4)>h2>a:hover { color: var(--accent); }
:root main:has(>div>div>h2)>div:first-of-type>div:nth-of-type(n+2):nth-of-type(-n+4)>p:first-of-type { color: var(--accent); }
:root main:has(>div>div>h2)>div:first-of-type>div:nth-of-type(n+2):nth-of-type(-n+4)>p:last-of-type { color: rgba(255,255,255,.62); }
:root main:has(>div>div>h2)>div:first-of-type>div:nth-of-type(n+2):nth-of-type(-n+4)>a:last-of-type::after {
  content: "LEER\0000A0\002192";
  color: var(--accent);
}
:root main:has(>div>div>h2)>div:first-of-type>div:nth-of-type(2) { margin-top: 3.6rem; }
:root main:has(>div>div>h2)>div:first-of-type>div:nth-of-type(2)::before {
  content: "TRES PARA EMPEZAR\0000A0\002014\0000A0SI ACABAS DE LLEGAR";
  position: absolute;
  left: 0;
  bottom: calc(100% + .95rem);
  white-space: nowrap;
  font-family: var(--fm), ui-monospace, monospace;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--primary);
}
/* roman serials */
:root main:has(>div>div>h2)>div:first-of-type>div:nth-of-type(2)>p:first-of-type::before { content: "I\0000A0/\0000A0"; color: #fff; }
:root main:has(>div>div>h2)>div:first-of-type>div:nth-of-type(3)>p:first-of-type::before { content: "II\0000A0/\0000A0"; color: #fff; }
:root main:has(>div>div>h2)>div:first-of-type>div:nth-of-type(4)>p:first-of-type::before { content: "III\0000A0/\0000A0"; color: #fff; }

/* --- 3. CHRONOLOGICAL GRID (cards 5+): quiet, consistent ---------------- */

:root main:has(>div>div>h2)>div:first-of-type>div:nth-of-type(5) { margin-top: 3.6rem; }
:root main:has(>div>div>h2)>div:first-of-type>div:nth-of-type(5)::before {
  content: "TODO EL CUADERNO\0000A0\002014\0000A0POR FECHA";
  position: absolute;
  left: 0;
  bottom: calc(100% + .95rem);
  white-space: nowrap;
  font-family: var(--fm), ui-monospace, monospace;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--muted);
}
:root main:has(>div>div>h2)>div:first-of-type>div:nth-of-type(n+5):hover {
  border-color: var(--ink);
  box-shadow: 6px 6px 0 var(--accent);
}

/* --- 4. ARCHIVE INDEX --------------------------------------------------- */

:root main:has(>div>div>h2)>div:last-of-type {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  border-top: 3px solid var(--ink);
  padding: 2.6rem 0 0;
  margin-top: 4.4rem;
  position: relative;
  columns: 1;
}
:root main:has(>div>div>h2)>div:last-of-type::before {
  content: "ARCHIVO\0000A0\002014\0000A0ENTRADAS ANTERIORES";
  position: absolute;
  top: .8rem;
  left: 0;
  font-family: var(--fm), ui-monospace, monospace;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--primary);
}
:root main:has(>div>div>h2)>div:last-of-type>p {
  display: grid;
  grid-template-columns: 6.4rem minmax(0, 1fr);
  gap: 0 1rem;
  align-items: baseline;
  break-inside: avoid;
  padding: .72rem 0;
  margin: 0;
  border-bottom: 1px solid var(--border);
  font-size: 1rem;
}
:root main:has(>div>div>h2)>div:last-of-type>p>span {
  display: block;
  margin: 0;
  font-family: var(--fm), ui-monospace, monospace;
  font-size: .66rem;
  letter-spacing: .12em;
  color: var(--muted);
}
:root main:has(>div>div>h2)>div:last-of-type>p>a {
  font-size: .98rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  text-decoration: none;
}
:root main:has(>div>div>h2)>div:last-of-type>p>a:hover {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
}

/* --- desktop geometry: 12-col grid, balanced rows ----------------------- */

@media (min-width: 821px) {
  :root main:has(>div>div>h2)>div:first-of-type {
    grid-template-columns: repeat(12, 1fr);
    row-gap: 2.6rem;
  }
  :root main:has(>div>div>h2)>div:first-of-type>div { grid-column: span 4; }
  :root main:has(>div>div>h2)>div:first-of-type>div:first-of-type {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) 200px;
    grid-template-rows: auto auto auto 1fr;
    padding: 2.6rem 2.8rem 2.8rem;
  }
  :root main:has(>div>div>h2)>div:first-of-type>div:first-of-type>p:first-of-type { grid-column: 1; grid-row: 1; }
  :root main:has(>div>div>h2)>div:first-of-type>div:first-of-type>h2 { grid-column: 1; grid-row: 2; }
  :root main:has(>div>div>h2)>div:first-of-type>div:first-of-type>p:last-of-type { grid-column: 1; grid-row: 3; }
  :root main:has(>div>div>h2)>div:first-of-type>div:first-of-type>a:last-of-type { grid-column: 1; grid-row: 4; }
  :root main:has(>div>div>h2)>div:first-of-type>div:first-of-type::after {
    grid-column: 2;
    grid-row: 1 / -1;
    margin-top: .3rem;
  }
  :root main:has(>div>div>h2)>div:first-of-type>div:nth-of-type(n+2):nth-of-type(-n+4),
  :root main:has(>div>div>h2)>div:first-of-type>div:nth-of-type(n+5):nth-of-type(-n+7) { margin-top: 3.6rem; }

  /* balance guards: never strand a lone card in a 3-up row */
  :root main:has(>div>div>h2)>div:first-of-type>div:nth-of-type(n+5):nth-of-type(3n+2):last-of-type { grid-column: 1 / -1; }
  :root main:has(>div>div>h2)>div:first-of-type>div:nth-of-type(n+5):nth-of-type(3n+2):nth-last-of-type(2),
  :root main:has(>div>div>h2)>div:first-of-type>div:nth-of-type(n+5):nth-of-type(3n):last-of-type { grid-column: span 6; }

  :root main:has(>div>div>h2)>div:last-of-type { columns: 2; column-gap: 3.4rem; }
}


/* ==========================================================================
   ARTICLE
   ========================================================================== */

:root main:nth-of-type(1):has(>h1+time) { padding-top: .4rem; }
:root main:nth-of-type(1):has(>h1+time)>h1 {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: clamp(2.05rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.032em;
  color: var(--ink);
  margin: 0 0 1.1rem;
}
:root main:nth-of-type(1):has(>h1+time)>h1::before {
  content: "DEL CUADERNO DE SOF\0000CDA";
  display: block;
  font-family: var(--fm), ui-monospace, monospace;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .24em;
  color: var(--primary);
  margin-bottom: 1.15rem;
}
:root main:nth-of-type(1):has(>h1+time)>time {
  display: block;
  font-family: var(--fm), ui-monospace, monospace;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .3rem;
}
:root main:nth-of-type(1):has(>h1+time)>div:first-of-type {
  font-family: var(--fm), ui-monospace, monospace;
  font-size: .62rem;
  letter-spacing: .16em;
  color: var(--muted);
  margin: 0 0 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 8px solid var(--ink);
}
:root main:nth-of-type(1):has(>h1+time)>article>p {
  font-size: 1.055rem;
  line-height: 1.8;
  color: #2E2A40;
  margin: 0 0 1.25em;
}
:root main:nth-of-type(1):has(>h1+time)>article>p:first-of-type::first-letter {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 3.5em;
  font-weight: 800;
  line-height: .8;
  color: var(--primary);
  float: left;
  margin: .04em .11em 0 0;
}
:root main:nth-of-type(1):has(>h1+time)>article>h2 {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 3.2rem 0 1rem;
}
/* dinkus: two-chip swatch mark between sections */
:root main:nth-of-type(1):has(>h1+time)>article>h2::before {
  content: "";
  display: block;
  width: 64px;
  height: 8px;
  margin-bottom: 1.15rem;
  background: var(--dinkus);
}
:root main:nth-of-type(1):has(>h1+time)>article>h3 {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 1.16rem;
  font-weight: 700;
  color: var(--primary);
  margin: 2.1rem 0 .6rem;
}
:root main:nth-of-type(1):has(>h1+time)>article>figure { margin: 2rem 0; }
:root main:nth-of-type(1):has(>h1+time)>article>figure:first-of-type { margin: 0 0 2.4rem; }
:root main:nth-of-type(1):has(>h1+time)>article img {
  display: block;
  width: 100%;
  border-radius: 0;
  margin: 0;
}
/* in-text links: quiet */
:root main:nth-of-type(1):has(>h1+time)>article a:not([href*="/link/"]) {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
:root main:nth-of-type(1):has(>h1+time)>article a:not([href*="/link/"]):hover { color: var(--primary); }
/* affiliate CTA: flat ámbar sticker with a hard carmín offset — unmistakable */
:root main:nth-of-type(1):has(>h1+time)>article a[href*="/link/"] {
  display: inline-block;
  background: var(--accent);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  padding: .06em .48em .12em;
  margin: 0 .16em;
  box-shadow: 3px 3px 0 var(--primary);
  line-height: 1.35;
}
:root main:nth-of-type(1):has(>h1+time)>article a[href*="/link/"]::after {
  content: "\0000A0\002192";
  font-family: var(--fm), ui-monospace, monospace;
  font-size: .8em;
}
:root main:nth-of-type(1):has(>h1+time)>article a[href*="/link/"]:hover {
  background: var(--primary);
  color: #fff;
  box-shadow: 3px 3px 0 var(--ink);
}
:root main:nth-of-type(1):has(>h1+time)>article>blockquote {
  position: relative;
  border-left: none;
  padding: .4rem 0 .4rem 3.1rem;
  margin: 2.4rem 0;
}
:root main:nth-of-type(1):has(>h1+time)>article>blockquote::before {
  content: "\0000AB";
  position: absolute;
  left: 0;
  top: -.14em;
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
}
/* YMYL notice — Sofía's aside, not a legal block */
:root main:nth-of-type(1):has(>h1+time)>article>section:first-of-type {
  display: block;
  background: transparent;
  border-left: 4px solid var(--primary);
  border-radius: 0;
  padding: .1em 0 .1em 1.1rem;
  margin: 2.8rem 0 0;
  font-size: .86rem;
  line-height: 1.65;
  color: var(--muted);
}
/* generic financial/legal boilerplate duplicate — off-topic for a hair-dye diary */
:root main:nth-of-type(1):has(>h1+time)>article>section+section { display: none; }

:root main:nth-of-type(1):has(>h1+time)>aside {
  border-top: 8px solid var(--ink);
  margin-top: 3.4rem;
  padding-top: 1.5rem;
}
:root main:nth-of-type(1):has(>h1+time)>aside>h4 {
  font-family: var(--fm), ui-monospace, monospace;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 1rem;
}
:root main:nth-of-type(1):has(>h1+time)>aside>div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 2.6rem;
}
:root main:nth-of-type(1):has(>h1+time)>aside>div>div {
  border-bottom: 1px solid var(--border);
  padding: .68rem 0;
}
:root main:nth-of-type(1):has(>h1+time)>aside>div>div>a {
  display: block;
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  text-decoration: none;
}
:root main:nth-of-type(1):has(>h1+time)>aside>div>div>a:hover { color: var(--primary); }

@media (min-width: 721px) {
  :root main:nth-of-type(1):has(>h1+time)>aside>div { grid-template-columns: 1fr 1fr; }
}


/* ==========================================================================
   AUTHOR / ABOUT
   ========================================================================== */

:root main:nth-of-type(1):has(>article>h1)>article>h1 {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: clamp(2rem, 5vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ink);
  margin: .4rem 0 .5rem;
}
:root main:nth-of-type(1):has(>article>h1)>article>p:first-of-type {
  font-family: var(--fm), ui-monospace, monospace;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--primary);
  padding-bottom: 1.4rem;
  margin-bottom: 0;
  border-bottom: 8px solid var(--ink);
}
:root main:nth-of-type(1):has(>article>h1)>article>p:first-of-type>em { font-style: normal; }
:root main:nth-of-type(1):has(>article>h1)>article>section { margin-top: 2.6rem; }
:root main:nth-of-type(1):has(>article>h1)>article>section>h2 {
  font-family: var(--fh), system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 1rem;
}
:root main:nth-of-type(1):has(>article>h1)>article>section>h2::before {
  content: "";
  display: block;
  width: 64px;
  height: 8px;
  margin-bottom: 1.1rem;
  background: var(--dinkus);
}
:root main:nth-of-type(1):has(>article>h1)>article>section>ul { list-style: none; padding: 0; margin-left: 0; }
:root main:nth-of-type(1):has(>article>h1)>article>section>ul>li {
  border-bottom: 1px solid var(--border);
  padding: .62rem 0;
  margin: 0;
}
:root main:nth-of-type(1):has(>article>h1)>article>section>ul>li>a {
  color: var(--ink);
  font-size: .98rem;
  font-weight: 500;
  text-decoration: none;
}
:root main:nth-of-type(1):has(>article>h1)>article>section>ul>li>a:hover { color: var(--primary); }


/* ==========================================================================
   FOOTER
   ========================================================================== */

:root body>footer:last-of-type {
  background: var(--ink);
  color: rgba(255,255,255,.6);
  font-family: var(--fm), ui-monospace, monospace;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 2.2rem 0;
  margin-top: 4.4rem;
  border-top: 6px solid var(--primary);
  text-align: center;
}
:root body>footer:last-of-type>p { margin: 0; }
:root body>footer:last-of-type a {
  color: rgba(255,255,255,.82);
  text-decoration: none;
  border-bottom: 1px solid rgba(240,165,0,.6);
}
:root body>footer:last-of-type a:hover { color: var(--accent); border-bottom-color: var(--accent); }


/* ==========================================================================
   SMALL SCREENS
   ========================================================================== */

@media (max-width: 560px) {
  :root body>nav:first-of-type>div>p { font-size: .9rem; padding-left: .8rem; }
  :root main:has(>div>div>h2)>div:first-of-type>div:first-of-type { padding: 1.8rem 1.3rem 2rem; }
  :root main:has(>div>div>h2)>div:last-of-type>p { grid-template-columns: 1fr; gap: .2rem; }
  /* band labels must wrap rather than push the page sideways */
  :root main:has(>div>div>h2)>div:first-of-type>div:nth-of-type(2)::before,
  :root main:has(>div>div>h2)>div:first-of-type>div:nth-of-type(5)::before {
    white-space: normal;
    font-size: .6rem;
    letter-spacing: .14em;
    line-height: 1.5;
  }
  :root main:nth-of-type(1):has(>h1+time)>article>p { font-size: 1rem; }
}


/* === QA tail polish (2026-07-24T15:39:44.753523+00:00) — style Lambda [SB-20] compact tail across templates === */
/* The tail wrapper is always the LAST block child of <main> on the homepage,
   containing title-only rows of older articles. Various templates use different
   inner structures (ul>li / p / direct <a>) — this handles all three. */

:root main > *:last-child:not(:has(h2)):not(:has(h1)):not(:has(article)) {
  grid-column: 1 / -1;
  max-width: min(720px, 92vw);
  margin: 88px auto 0;
  padding: 40px 0 32px;
  border-top: 2px double rgba(0, 0, 0, .16);
  background: transparent;
  box-shadow: none;
}

:root main > *:last-child:not(:has(h2)):not(:has(h1)):not(:has(article))::before {
  content: "\2014  MORE FROM THE ARCHIVE  \2014";
  display: block;
  text-align: center;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  opacity: .5;
  margin-bottom: 36px;
}

/* Any list / paragraph rows: 2-col on desktop, single on mobile */
:root main > *:last-child ul {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: 48px;
}
@media (max-width: 899px) {
  :root main > *:last-child ul { columns: 1; }
}

:root main > *:last-child li,
:root main > *:last-child > p,
:root main > *:last-child > a {
  padding: 10px 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px;
  line-height: 1.4;
  border-bottom: 1px dotted rgba(0, 0, 0, .12);
  break-inside: avoid;
  display: block;
}

:root main > *:last-child li a,
:root main > *:last-child p a,
:root main > *:last-child > a {
  text-decoration: none;
  font-weight: 600;
}

:root main > *:last-child li a:hover,
:root main > *:last-child p a:hover,
:root main > *:last-child > a:hover {
  text-decoration: underline;
}

/* dates (first inline child of li/p) — subtle mono */
:root main > *:last-child p > :first-child,
:root main > *:last-child li > :first-child:not(a) {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 11px;
  letter-spacing: .1em;
  opacity: .5;
  margin-right: 10px;
}