"volver al inicio" tambien es :last-child y no tiene h1/h2/
article, asi que heredaba "MORE FROM THE ARCHIVE". Ahora la cola va acotada a la
portada (main:not(:has(>h1))>section, que solo existe alli), en espanol, con la
segunda franja de foto sobre el indice a dos columnas. */
:root:root:root main:not(:has(>h1))>section{
grid-column:1/-1;margin:5.4rem 0 0;padding:0;border:none;background:transparent;
}
/* tira 2 — misma foto que la tira 1, posicion 70% para que no sea un calco */
:root:root:root main:not(:has(>h1))>section::before{
content:"LEER M\0000C1S";display:flex;align-items:center;justify-content:center;
height:210px;margin:0 0 2.6rem;border-radius:4px;
background-image:linear-gradient(rgba(20,24,28,.55),rgba(20,24,28,.25)),url("/theme-assets/article-hero.jpg");
background-size:cover;background-position:center 70%;background-repeat:no-repeat;
font:700 13px/1 var(--fm);letter-spacing:.34em;color:var(--cream);text-shadow:0 1px 3px rgba(0,0,0,.55);
}
/* M7: el
heredaba max-width:66ch de la regla base `:root ul`, lo que encogia
el indice a tres columnas estrechas y dejaba un carril vacio a la derecha.
Se libera a ancho completo para que el indice ocupe toda la seccion. */
:root:root:root main:not(:has(>h1))>section>ul{
list-style:none;padding:0;margin:0;max-width:none;width:100%;
display:grid;grid-template-columns:repeat(3,1fr);gap:12px 16px;
}
:root:root:root main:not(:has(>h1))>section>ul>li{
margin:0;padding:20px 22px;background:var(--cream);
border:1px solid var(--rule);border-radius:8px;
box-shadow:0 1px 4px rgba(59,52,80,.05);
transition:box-shadow .18s ease,transform .18s ease;
}
:root:root:root main:not(:has(>h1))>section>ul>li:hover{
box-shadow:0 4px 12px rgba(59,52,80,.09);transform:translateY(-2px);
}
:root:root:root main:not(:has(>h1))>section>ul>li>a{
font:400 1.02rem/1.4 var(--fd);color:var(--plum-d);border-bottom:none;text-decoration:none;
}
:root:root:root main:not(:has(>h1))>section>ul>li>a:hover{color:var(--terra-d)}
@media (max-width:900px){
:root:root:root main:not(:has(>h1))>section{margin-top:3.6rem}
:root:root:root main:not(:has(>h1))>section::before{height:150px;margin-bottom:1.8rem}
:root:root:root main:not(:has(>h1))>section>ul{grid-template-columns:repeat(2,1fr)}
}
/* 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;
}
}
/* premium-upgrade v1 */
/* premium editorial upgrade — style=Racquet-moody overlay=25% grid=asymmetric scale=balanced family=articles-section */
/* ── Archive strip above tail (overlay 25%) ── */
:root main:not(:has(> h1)) > section {
position: relative;
padding-top: 260px;
grid-column: 1 / -1;
}
:root main:not(:has(> h1)) > section::before {
content: ""; position: absolute; top: 0; left: 0; right: 0;
height: 240px;
background:
linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.25) 100%),
url("/theme-assets/premium-hero-strip-2.webp") center 45% / cover no-repeat;
border-radius: 8px;
}
/* ── 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)) > article: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)) > article: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)) > article: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)) > article: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;
}
/* ── 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)) > article: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)) > article: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)) > article: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)) > article: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; }
}