child (the "last updated" time wrapper). */
:root main:has(> div > h2 > a) > div:not(:has(> h2)) {
grid-column: 1 / -1; position: relative;
margin-top: 92px; padding: 0; border: 0;
counter-reset: arch;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 16px; align-items: stretch;
}
:root main:has(> div > h2 > a) > div:not(:has(> h2))::before {
content: 'TODAS LAS ENTRADAS';
grid-column: 1 / -1; display: flex; align-items: center; justify-content: center;
height: 200px; margin: 0 0 34px; border-radius: 8px;
background-color: #1b232e;
background-image: linear-gradient(rgba(20, 24, 28, .55), rgba(20, 24, 28, .25)), url("/theme-assets/article-hero.jpg");
background-size: cover, cover; background-position: center, center 70%;
box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
font-family: var(--fm), system-ui, sans-serif; font-size: 13px; font-weight: 700;
letter-spacing: .32em; text-transform: uppercase; color: #F7F1E6; text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}
:root main:has(> div > h2 > a) > div:not(:has(> h2)) > p {
counter-increment: arch; position: relative; margin: 0;
background: var(--panel); border: 1px solid var(--hair); border-radius: 8px;
box-shadow: 0 1px 4px rgba(34, 27, 18, .05);
padding: 20px 22px;
font-family: var(--fb), Georgia, serif; font-size: 15px; line-height: 1.46;
transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
:root main:has(> div > h2 > a) > div:not(:has(> h2)) > p:hover {
box-shadow: 0 5px 16px rgba(34, 27, 18, .10); transform: translateY(-2px); border-color: var(--accent);
}
:root main:has(> div > h2 > a) > div:not(:has(> h2)) > p::before {
content: counter(arch, decimal-leading-zero); display: block; margin: 0 0 8px;
font-family: var(--fm), system-ui, sans-serif; font-size: 10px; font-weight: 700;
letter-spacing: .1em; color: var(--accent);
}
:root main:has(> div > h2 > a) > div:not(:has(> h2)) > p > a { color: var(--primary); text-decoration: none; border: 0; }
:root main:has(> div > h2 > a) > div:not(:has(> h2)) > p > a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); }
/* ---------- article page ---------- */
:root main:has(> article) { max-width: 726px; padding: 0 26px 76px; }
:root main:has(> article) > h1 {
font-family: var(--fh), Georgia, serif; font-weight: 400;
font-size: clamp(32px, 5vw, 48px); line-height: 1.04; letter-spacing: -.018em;
color: var(--primary); margin: 8px 0 18px;
}
:root main:nth-of-type(1):has(> article) > h1 + span {
display: block; margin: 0 0 36px; padding-bottom: 22px;
border-bottom: 1px solid var(--hair);
font-family: var(--fm), system-ui, sans-serif; font-size: 10.5px; font-weight: 700;
letter-spacing: .2em; text-transform: uppercase; color: var(--accent);
}
:root main:nth-of-type(1):has(> article) > h1 + span::before { content: 'Entrada del diario · '; color: var(--primary); }
:root main:nth-of-type(1):has(> article) > h1 + span::after { content: ' · por Daniela Mariño · Santiago'; color: var(--primary); opacity: .78; }
:root main:has(> article) > article > p {
font-family: var(--fb), Georgia, serif; font-size: 17.5px; line-height: 1.78; margin: 0 0 22px;
}
:root main:has(> article) > article > p:nth-of-type(1) {
font-size: 20px; line-height: 1.62; color: var(--primary); margin-bottom: 26px;
}
:root main:has(> article) > article > h2 {
font-family: var(--fh), Georgia, serif; font-weight: 400; font-size: 30px;
line-height: 1.12; letter-spacing: -.012em; color: var(--primary);
margin: 6px 0 14px; padding: 0; border: 0;
}
:root main:has(> article) > article > h2::before {
content: '✷ ✷ ✷'; display: block; text-align: center;
font-family: var(--fm), system-ui, sans-serif; font-weight: 400;
font-size: 15px; letter-spacing: .5em; text-indent: .5em; color: var(--accent);
margin: 52px 0 34px; line-height: 1;
}
:root main:has(> article) > article > h3 {
font-family: var(--fh), Georgia, serif; font-weight: 400; font-size: 22px;
line-height: 1.2; color: var(--primary); margin: 30px 0 8px; letter-spacing: -.006em;
}
:root main:has(> article) > article ul, :root main:has(> article) > article ol { margin: 0 0 24px 22px; }
:root main:has(> article) > article li { margin-bottom: 9px; font-size: 16.5px; line-height: 1.66; }
:root main:has(> article) > article li::marker { color: var(--accent); }
:root main:has(> article) > article strong { color: var(--primary); font-weight: 700; }
:root main:has(> article) > article img {
width: 100%; height: auto; display: block; border-radius: var(--r);
margin: 34px 0; box-shadow: 0 2px 18px rgba(34, 27, 18, .13);
}
:root main:has(> article) > article > blockquote {
position: relative; margin: 32px 0; padding: 4px 0 4px 34px;
border-left: 2px solid var(--accent);
font-family: var(--fb), Georgia, serif; font-style: italic; font-size: 20px; line-height: 1.56;
color: var(--primary);
}
:root main:has(> article) > article > blockquote::before {
content: '“'; position: absolute; left: -14px; top: 6px;
font-family: var(--fh), Georgia, serif; font-size: 54px; line-height: 1; color: var(--accent); opacity: .55;
}
:root main:has(> article) > article > p a, :root main:has(> article) > article li a {
color: var(--primary); text-decoration: underline; text-decoration-color: var(--accent);
text-underline-offset: 3px; text-decoration-thickness: 1.5px; border: 0; font-weight: 600;
}
:root main:has(> article) > article > p a:hover, :root main:has(> article) > article li a:hover { color: var(--accent); text-decoration-color: var(--primary); }
/* affiliate CTAs (/find/) — RULE M10: render as a distinct accent pill/button, clearly set apart
from inline prose links, so an unmistakable CTA is visible in the article body (incl. the
materials list two-thirds down). Full body-link path + attribute so it strictly out-specifies
the body-link colour rule above (RULE J) — cream text on accent fill, never text==background. */
:root main:has(> article) > article > p a[href^="/find/"],
:root main:has(> article) > article li a[href^="/find/"],
:root main:has(> article) > article ul a[href^="/find/"],
:root main:has(> article) > article ol a[href^="/find/"] {
display: inline-block; vertical-align: baseline;
background: var(--accent); color: #F7F1E6;
padding: 5px 18px; border-radius: 999px; border: 1px solid var(--accent);
text-decoration: none; font-family: var(--fm), system-ui, sans-serif;
font-weight: 700; font-size: 13px; letter-spacing: .04em; line-height: 1.5;
box-shadow: 0 1px 4px rgba(34, 27, 18, .12);
transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
:root main:has(> article) > article > p a[href^="/find/"]:hover,
:root main:has(> article) > article li a[href^="/find/"]:hover,
:root main:has(> article) > article ul a[href^="/find/"]:hover,
:root main:has(> article) > article ol a[href^="/find/"]:hover {
background: var(--primary); border-color: var(--primary); color: #F7F1E6;
box-shadow: 0 3px 10px rgba(34, 27, 18, .18); transform: translateY(-1px);
}
/* disclaimers stay footnote-quiet */
:root main > article > aside, :root main:has(> article) > article > aside {
display: block; margin: 38px 0 0; padding: 14px 0 0; background: transparent;
border: 0; border-top: 1px solid var(--hair);
font-family: var(--fb), Georgia, serif; font-style: italic;
font-size: 13px; line-height: 1.6; color: var(--fg); opacity: .55;
}
:root main > article > aside b { font-weight: 600; font-style: normal; }
/* related articles */
:root main:has(> article) > nav {
margin-top: 46px; padding: 26px 34px 30px; background: var(--panel);
border: 1px solid var(--hair); border-top: 2px solid var(--primary); border-radius: 10px;
box-shadow: 0 3px 16px rgba(34, 27, 18, .10);
font-size: 15px; color: var(--fg);
}
:root main:has(> article) > nav p { margin: 0; line-height: 1.8; }
:root main:has(> article) > nav em {
display: block; margin-bottom: 10px; font-style: normal;
font-family: var(--fm), system-ui, sans-serif; font-size: 10.5px; font-weight: 700;
letter-spacing: .22em; text-transform: uppercase; color: var(--primary);
}
:root main:has(> article) > nav a {
color: var(--primary); text-decoration: none; border-bottom: 1px solid var(--hair);
font-family: var(--fb), Georgia, serif;
}
:root main:has(> article) > nav a:hover { border-bottom-color: var(--accent); }
/* ---------- footer ---------- */
:root > body > footer {
background: transparent; border-top: 1px solid var(--hair);
margin-top: 66px; padding: 34px 26px 48px; text-align: center;
font-family: var(--fm), system-ui, sans-serif; font-size: 10.5px; font-weight: 700;
letter-spacing: .18em; text-transform: uppercase; color: var(--fg); opacity: .58;
}
:root > body > footer::before {
content: ''; display: block; width: 26px; height: 26px; margin: 0 auto 16px; opacity: .8;
background: url("data:image/svg+xml,") no-repeat center / contain;
}
:root > body > footer a { color: var(--primary); text-decoration: none; border-bottom: 1px solid var(--hair); }
:root > body > footer a:hover { border-bottom-color: var(--accent); }
/* ---------- responsive ---------- */
@media (max-width: 1040px) {
:root main > div:nth-child(1):has(> h2 > a) { column-gap: 34px; padding: 34px 32px 32px; }
}
@media (max-width: 860px) {
:root main:has(> div > h2 > a) { grid-template-columns: 1fr; column-gap: 0; padding-bottom: 56px; }
/* `span N` keeps minting implicit tracks — reset every band explicitly */
:root main > div:nth-child(1):has(> h2 > a),
:root main > div:nth-child(2):has(> h2 > a),
:root main > div:nth-child(3):has(> h2 > a),
:root main > div:nth-child(4):has(> h2 > a),
:root main > div:nth-child(n+5):has(> h2 > a),
:root main:has(> div > h2 > a) > div:not(:has(> h2)) { grid-column: 1 / -1; }
:root main > div:nth-child(1):has(> h2 > a) {
grid-template-columns: 1fr; padding: 28px 24px 30px; margin-bottom: 52px;
}
:root main > div:nth-child(1):has(> h2 > a)::before { grid-column: 1; grid-row: auto; }
:root main > div:nth-child(1) > h2,
:root main > div:nth-child(1) > p:last-of-type,
:root main > div:nth-child(1) > a:last-child { grid-column: 1; grid-row: auto; }
:root main > div:nth-child(1) > p:first-of-type {
grid-column: 1; grid-row: auto; order: 9; align-self: start;
border-left: 0; border-top: 1px solid var(--hair); padding: 20px 0 0; margin-top: 28px;
}
:root main > div:nth-child(1) > p:last-of-type::first-letter { font-size: 54px; padding-right: 10px; }
:root main > div:nth-child(2):has(> h2 > a),
:root main > div:nth-child(3):has(> h2 > a),
:root main > div:nth-child(4):has(> h2 > a) { margin-bottom: 18px; padding: 24px 26px 22px; border-top-width: 1px; }
:root main > div:nth-child(2):has(> h2 > a) { border-top-width: 2px; margin-top: 6px; }
:root main > div:nth-child(4):has(> h2 > a) { margin-bottom: 56px; }
:root main > div:nth-child(2):has(> h2 > a)::before { width: 100%; top: -30px; }
/* Strip 1: shrink the reserved gap + band on mobile; card 6 no longer needs the gap */
:root main > div:nth-child(5):has(> h2 > a) { margin-top: 178px; }
:root main > div:nth-child(6):has(> h2 > a) { margin-top: 0; }
:root main > div:nth-child(5):has(> h2 > a)::before { width: 100%; top: -162px; height: 134px; }
:root main > div:nth-child(6):has(> h2 > a) { border-top-width: 1px; }
/* Strip 2 + archive */
:root main:has(> div > h2 > a) > div:not(:has(> h2)) { grid-template-columns: repeat(2, 1fr); margin-top: 64px; }
:root main:has(> div > h2 > a) > div:not(:has(> h2))::before { height: 150px; }
:root > body > header:has(> h1) { padding-top: 56px; padding-bottom: 38px; }
:root main:has(> article) > article > h2 { font-size: 26px; }
:root main:has(> article) > article > p:nth-of-type(1) { font-size: 18.5px; }
}
/* related-articles-nav-fix v1 */
:root main > nav p,
:root main > section p {
line-height: 1.85;
margin: 0;
}
:root main > nav a,
:root main > section a {
display: inline-block;
margin: 0 4px;
padding: 0 2px;
}
/* mobile-overflow-fix v1 */
:root html, :root body { overflow-x: hidden; max-width: 100%; }
@media (max-width: 920px) {
:root main > * { max-width: 100%; }
:root main { overflow-x: hidden; }
}
/* mobile-overflow-fix v2 */
@media (max-width: 640px) {
:root main,
:root main > article,
:root main > div,
:root main > section,
:root main > nav {
box-sizing: border-box;
max-width: 100%;
width: 100%;
}
:root main > article > *,
:root main > div > *,
:root main > section > *,
:root main > nav > * {
max-width: 100%;
}
:root main h1,
:root main h2,
:root main h3,
:root main h4 {
overflow-wrap: break-word;
word-break: normal;
}
/* Any 3+ col grid inside main → 1 col on mobile */
:root main :is(ul, ol, section, div, nav)[style*="grid-template-columns"],
:root main > section > ul,
:root main > nav > ul,
:root main > div > ul {
grid-template-columns: 1fr !important;
}
/* Any CSS multi-column layout → 1 col on mobile */
:root main :is(ul, ol, section, div, p) {
columns: 1;
}
/* Article body images stay inside viewport */
:root main img,
:root main figure {
max-width: 100%;
height: auto;
}
}
/* mobile-padding-fix v1 */
@media (max-width: 640px) {
:root main {
padding-left: 20px;
padding-right: 20px;
}
}
/* archive-tail-cards: single-column cream cards on phones (M7) */
@media (max-width: 560px) {
:root main:has(> div > h2 > a) > div:not(:has(> h2)) { grid-template-columns: 1fr; }
}
/* premium-upgrade v1 */
/* premium editorial upgrade — style=The-Sill-botanical overlay=25% grid=mixed scale=balanced family=flat-divs */
/* ── CARD 1: featured full-row with 300px photo header (via card-own background, NOT ::before —
leaves ::before free for existing site's M2 label / meta content). ── */
:root main:not(:has(> h1)) > div:nth-of-type(1) {
grid-column: 1 / -1;
position: relative; /* anchor for existing site's ::before label if it uses absolute */
overflow: visible; /* let above-card labels render without clipping */
padding: 320px 44px 40px !important;
border-radius: 8px;
background:
url("/theme-assets/premium-hero-card-1.webp") no-repeat center top / 100% 300px,
var(--bg) !important;
margin-top: 60px !important; /* room for above-card M2 label (existing site convention) */
}
/* ── CARDS 2-4: medium with 180px photo header (background technique, ::before untouched) ── */
:root main:not(:has(> h1)) > div:nth-of-type(2) {
padding: 200px 32px 32px !important;
border-radius: 8px;
background:
url("/theme-assets/premium-hero-card-2.webp") no-repeat center top / 100% 180px,
var(--bg) !important;
}
:root main:not(:has(> h1)) > div:nth-of-type(3) {
padding: 200px 32px 32px !important;
border-radius: 8px;
background:
url("/theme-assets/premium-hero-card-3.webp") no-repeat center top / 100% 180px,
var(--bg) !important;
}
:root main:not(:has(> h1)) > div:nth-of-type(4) {
padding: 200px 32px 32px !important;
border-radius: 8px;
background:
url("/theme-assets/premium-hero-card-4.webp") no-repeat center top / 100% 180px,
var(--bg) !important;
}
/* ── flat-divs family: cards 5 & 6 also get photo headers ── */
:root main:not(:has(> h1)) > div:nth-of-type(5) {
padding: 200px 32px 32px !important;
border-radius: 8px;
background:
url("/theme-assets/premium-hero-strip-1.webp") no-repeat center top / 100% 180px,
var(--bg) !important;
}
:root main:not(:has(> h1)) > div:nth-of-type(6) {
padding: 200px 32px 32px !important;
border-radius: 8px;
background:
url("/theme-assets/premium-hero-strip-2.webp") no-repeat center top / 100% 180px,
var(--bg) !important;
}
/* ── Article page: drop cap + dinkus dividers ── */
:root main:has(> h1) > article > p:first-of-type::first-letter {
font-family: var(--fh), Georgia, serif;
font-size: 76px; line-height: 0.9; color: var(--primary);
float: left; margin: 6px 12px 0 0; padding: 0; font-weight: 400;
}
:root main:has(> h1) > article > h2 + p ~ h2::before {
content: "✦ ✦ ✦";
display: block; text-align: center; color: var(--accent);
font-size: 12px; letter-spacing: 0.3em; margin-bottom: 24px;
font-weight: 400;
}
/* ── Mobile responsive: adjust photo heights via background-size on the card itself ── */
@media (max-width: 720px) {
:root main:not(:has(> h1)) > div:nth-of-type(1) {
padding: 240px 22px 28px !important;
background:
url("/theme-assets/premium-hero-card-1.webp") no-repeat center top / 100% 220px,
var(--bg) !important;
}
:root main:not(:has(> h1)) > div:nth-of-type(2) {
padding: 180px 22px 26px !important;
background:
url("/theme-assets/premium-hero-card-2.webp") no-repeat center top / 100% 160px,
var(--bg) !important;
}
:root main:not(:has(> h1)) > div:nth-of-type(3) {
padding: 180px 22px 26px !important;
background:
url("/theme-assets/premium-hero-card-3.webp") no-repeat center top / 100% 160px,
var(--bg) !important;
}
:root main:not(:has(> h1)) > div:nth-of-type(4) {
padding: 180px 22px 26px !important;
background:
url("/theme-assets/premium-hero-card-4.webp") no-repeat center top / 100% 160px,
var(--bg) !important;
}
:root main:not(:has(> h1))::before,
:root main:not(:has(> h1))::after { min-height: 240px; }
:root main:has(> h1) > article > p:first-of-type::first-letter { font-size: 60px; }
}