*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Palatino Linotype',Palatino,'Book Antiqua',serif;line-height:1.9;color:#2a2a2a;background:#fefefe}
.sc-sWuZUk{max-width:640px;margin:0 auto;padding:0 20px}
.sc-RWNLUD{padding:60px 0 40px;border-bottom:1px solid #ccc;margin-bottom:48px}
.sc-RWNLUD h1{font-size:24px;font-weight:400;letter-spacing:-.5px}
.sc-RWNLUD p{font-size:14px;color:#777;margin-top:6px;font-style:italic}
.sc-RWNLUD a{color:#2a2a2a;text-decoration:none;font-size:24px;font-weight:400;letter-spacing:-.5px}
.sc-pDcAcS{padding:20px 0}
.sc-pDcAcS h2{font-size:18px;font-weight:400;margin-bottom:4px}
.sc-pDcAcS h2 a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.sc-pDcAcS h2 a:hover{border-bottom-color:#2a2a2a}
.sc-pDcAcS .sc-NYhfit{font-size:12px;color:#aaa;margin-bottom:6px}
.sc-pDcAcS p{font-size:14px;color:#666}
.sc-VSCkiC{color:#888;font-size:13px;text-decoration:none}
.sc-VSCkiC:hover{color:#2a2a2a}
.sc-fUSlqO{padding-bottom:60px}
.sc-fUSlqO h1{font-size:28px;font-weight:400;margin-bottom:8px}
.sc-fUSlqO .sc-NYhfit{font-size:12px;color:#aaa;display:block;margin-bottom:32px}
.sc-fUSlqO h2{font-size:21px;font-weight:400;margin:40px 0 12px;border-bottom:1px solid #eee;padding-bottom:6px}
.sc-fUSlqO h3{font-size:17px;margin:28px 0 8px}
.sc-fUSlqO p{margin-bottom:18px;font-size:16px}
.sc-fUSlqO ul,.sc-fUSlqO ol{margin:0 0 18px 20px}
.sc-fUSlqO a{color:#555;border-bottom:1px solid #ccc}
.sc-fUSlqO a:hover{color:#000;border-bottom-color:#000}
.sc-fUSlqO img{max-width:100%;height:auto;margin:24px 0}
.sc-OHAxWa{border-top:1px solid #ddd;padding:20px 0;margin-top:48px;text-align:center;font-size:12px;color:#aaa}
.sc-OHAxWa a{color:#aaa;text-decoration:none}
.sc-pfwyEg{padding:0 0 16px;margin-bottom:24px;font-size:12px;color:#aaa;font-style:italic;border-bottom:1px solid #eee}
.sc-WHcayd{padding:16px 0 0;margin-top:32px;font-size:11px;color:#999;border-top:1px solid #eee}
.sc-INpfSc{font-size:12px;color:#aaa;margin:-26px 0 32px;font-weight:300}
.sc-nCKfcl{margin:0 auto 32px;max-width:720px}
.sc-alBrXQ{width:100%;height:auto}
.sc-btptWQ{margin-top:40px;padding-top:20px;border-top:1px solid #eee;font-size:14px;color:#888}
.sc-btptWQ em{color:#aaa}
.sc-btptWQ a{color:#555;border-bottom:1px solid #ddd;text-decoration:none}
.sc-VoAexE{padding:24px 0 0;border-top:1px solid #eee;margin-top:24px}
.sc-VoAexE p{padding:3px 0;margin:0;font-size:15px}
.sc-VoAexE a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.sc-VoAexE a:hover{border-bottom-color:#2a2a2a}
/* === Theme === */
:root{--primary:#28231A;--accent:#B56B0A;--bg:#EDEBE3;--fg:#28231A;--border:#C8C5BB;--r:3px;--fb:'Spectral';--fh:'Archivo'}
/* === Custom === */
/* v.ebd6a5 — layout revision */
/* Croquis y Trazos — Marina Quesada · estudiante de arquitectura, Sevilla.
Editorial signature pass. Live DOM = styled-components with STABLE sc-* hashes
(masthead .sc-RWNLUD, home card .sc-pDcAcS, date .sc-NYhfit, read-more .sc-VSCkiC,
home tail .sc-VoAexE, article main .sc-fUSlqO, related-nav .sc-btptWQ, footer .sc-OHAxWa).
Page type: home = main:not(:has(> article)); article = main:has(> article).
Voices: Spectral italic = display · Spectral roman = body · Archivo tracked = meta.
Moment colour --moment (#4A5C6B slate) appears in EXACTLY two places: the two drop caps. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Spectral:ital,wght@0,400;0,500;0,600;1,400;1,600&display=swap');
:root {
--moment: #4A5C6B;
--ink-soft: #6A6660;
--amber-deep: #8B550F;
--paper: #FAF6EC;
--paper-2: #F5EFE1;
--hair: rgba(40, 35, 26, 0.10);
}
/* ─────────────────────────────────────────────────────────
BASE
───────────────────────────────────────────────────────── */
:root body {
font-family: var(--fb), Georgia, 'Times New Roman', serif;
color: var(--fg);
background: var(--bg);
line-height: 1.76;
font-size: 17px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--accent); color: var(--bg); }
hr { border: 0; border-top: 1px solid var(--border); margin: 36px 0; }
a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; transition: color .15s ease; }
a:hover { color: var(--primary); }
/* ─────────────────────────────────────────────────────────
MASTHEAD — full-bleed dark band, photo + gradient, italic wordmark
───────────────────────────────────────────────────────── */
:root body > header.sc-sWuZUk {
max-width: none;
width: 100%;
background: #221B12;
border-bottom: 2px solid var(--accent);
padding: 1.6rem 1.5rem;
text-align: center;
}
body > header > * {
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
/* homepage masthead (wordmark + manifesto
) → atmospheric photo */
:root body > header.sc-sWuZUk:has(> h1) {
background:
linear-gradient(180deg, rgba(24,20,15,.60) 0%, rgba(24,20,15,.88) 100%),
url("/theme-assets/header-bg.jpg") center 42% / cover no-repeat,
#221B12;
padding: 3.4rem 1.5rem 2.8rem;
text-align: left;
}
body > header:has(> h1) > h1 {
font-family: var(--fb), Georgia, serif;
font-style: italic;
font-weight: 600;
font-size: clamp(2.1rem, 5vw, 3.1rem);
line-height: 1.04;
letter-spacing: -0.015em;
color: #F4F1E9;
margin: 0 0 0.5rem;
}
body > header:has(> h1) > h1::before {
content: "CUADERNO DE TALLER · SEVILLA";
display: block;
font-family: var(--fh), system-ui, sans-serif;
font-style: normal;
font-weight: 600;
font-size: 0.64rem;
letter-spacing: 0.26em;
color: var(--accent);
margin-bottom: 0.85rem;
}
body > header:has(> h1) > p {
font-family: var(--fb), Georgia, serif;
font-style: italic;
font-size: 1.02rem;
line-height: 1.55;
color: #CFCABE;
max-width: 58ch;
margin: 0;
padding-top: 0.8rem;
border-top: 1px solid rgba(181,107,10,0.45);
}
/* article / author masthead (just the wordmark link) */
body > header:not(:has(> h1)) > a {
font-family: var(--fb), Georgia, serif;
font-style: italic;
font-weight: 600;
font-size: 1.4rem;
letter-spacing: -0.01em;
color: #F4F1E9;
text-decoration: none;
}
body > header:not(:has(> h1)) > a:hover { color: var(--accent); }
/* ─────────────────────────────────────────────────────────
HOMEPAGE — hero → Editor's Picks → strip → journal grid → strip → archive
main::before (EL CUADERNO) & main::after (EL ARCHIVO) are grid items,
sequenced with `order`.
───────────────────────────────────────────────────────── */
main:not(:has(> article)) {
max-width: 1120px;
margin: 0 auto;
padding: 3.2rem 1.5rem 4.5rem;
display: grid;
grid-template-columns: repeat(6, 1fr);
column-gap: 2.2rem;
row-gap: 2.2rem;
align-items: stretch;
}
/* shared card chrome for Picks + Journal */
main:not(:has(> article)) > .sc-pDcAcS:not(:first-child) {
background: var(--paper);
border: 1px solid var(--hair);
border-radius: 8px;
box-shadow: 0 1px 4px rgba(40,35,26,.05);
margin: 0;
padding: 1.7rem 1.9rem 1.6rem;
display: flex;
flex-direction: column;
}
/* date / kicker */
main:not(:has(> article)) > .sc-pDcAcS > .sc-NYhfit {
font-family: var(--fh), system-ui, sans-serif;
font-size: 0.67rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--amber-deep);
margin: 0 0 0.5rem;
}
/* card title (Archivo — structural voice) */
main:not(:has(> article)) > .sc-pDcAcS:not(:first-child) > h2 {
font-family: var(--fh), system-ui, sans-serif;
font-size: 1.08rem;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.015em;
margin: 0 0 0.55rem;
}
main:not(:has(> article)) > .sc-pDcAcS:not(:first-child) > h2 a { color: var(--primary); text-decoration: none; }
main:not(:has(> article)) > .sc-pDcAcS:not(:first-child) > h2 a:hover { color: var(--accent); }
/* excerpt — clamp to 3 lines so row heights match (RULE D) */
main:not(:has(> article)) > .sc-pDcAcS:not(:first-child) > p:last-of-type {
font-size: 0.94rem;
line-height: 1.6;
color: var(--ink-soft);
margin: 0 0 1.05rem;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* read-more → Spanish label, pushed to card bottom */
main:not(:has(> article)) > .sc-pDcAcS > a {
display: inline-block;
margin-top: auto;
font-size: 0;
text-decoration: none;
}
main:not(:has(> article)) > .sc-pDcAcS > a::before {
content: "Leer entrada →";
font-family: var(--fh), system-ui, sans-serif;
font-size: 0.69rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
}
main:not(:has(> article)) > .sc-pDcAcS > a:hover::before { color: var(--primary); }
/* ── HERO (card 1) — the loud voice, frameless full-bleed row ── */
main:not(:has(> article)) > .sc-pDcAcS:first-child {
order: 1;
grid-column: 1 / -1;
position: relative;
background: none;
border: none;
border-radius: 0;
box-shadow: none;
margin: 0;
padding: 0 0 0.4rem;
}
/* editorial folio, fills the right of the wide hero row */
main:not(:has(> article)) > .sc-pDcAcS:first-child::before {
content: "N.º 01";
position: absolute;
top: 0.15rem;
right: 0;
font-family: var(--fb), Georgia, serif;
font-style: italic;
font-size: 1rem;
letter-spacing: 0.08em;
color: var(--amber-deep);
}
main:not(:has(> article)) > .sc-pDcAcS:first-child > .sc-NYhfit {
font-size: 0.68rem;
margin-bottom: 0.4rem;
}
main:not(:has(> article)) > .sc-pDcAcS:first-child > .sc-NYhfit::before { content: "Última entrada — "; }
main:not(:has(> article)) > .sc-pDcAcS:first-child > .sc-NYhfit::after { content: " · Marina Quesada · 6 min de lectura"; }
main:not(:has(> article)) > .sc-pDcAcS:first-child > h2 {
font-family: var(--fb), Georgia, serif;
font-style: italic;
font-weight: 600;
font-size: clamp(2rem, 4.2vw, 3rem);
line-height: 1.06;
letter-spacing: -0.02em;
margin: 0.3rem 0 0.9rem;
max-width: 22ch;
}
main:not(:has(> article)) > .sc-pDcAcS:first-child > h2 a { color: var(--primary); text-decoration: none; }
main:not(:has(> article)) > .sc-pDcAcS:first-child > h2 a:hover { color: var(--accent); }
main:not(:has(> article)) > .sc-pDcAcS:first-child > p:last-of-type {
font-size: 1.12rem;
line-height: 1.55;
color: var(--fg);
max-width: 60ch;
margin: 0 0 1.4rem;
}
/* drop cap — slate MOMENT #1 */
main:not(:has(> article)) > .sc-pDcAcS:first-child > p:last-of-type::first-letter {
font-family: var(--fb), Georgia, serif;
font-style: italic;
font-weight: 600;
font-size: 3.4em;
line-height: 0.78;
float: left;
margin: 0.06em 0.12em -0.06em 0;
color: var(--moment);
}
/* hero CTA → outlined pill */
main:not(:has(> article)) > .sc-pDcAcS:first-child > a {
clear: left;
border: 1px solid var(--primary);
border-radius: 3px;
padding: 0.7rem 1.45rem;
}
main:not(:has(> article)) > .sc-pDcAcS:first-child > a::before {
font-size: 0.71rem;
letter-spacing: 0.14em;
color: var(--primary);
}
main:not(:has(> article)) > .sc-pDcAcS:first-child > a:hover { background: var(--primary); }
main:not(:has(> article)) > .sc-pDcAcS:first-child > a:hover::before { color: var(--bg); }
/* full-width section label under the hero, above the Picks band (RULE B) */
main:not(:has(> article)) > .sc-pDcAcS:first-child::after {
content: "SELECCIÓN — EMPIEZA POR AQUÍ";
display: block;
font-family: var(--fh), system-ui, sans-serif;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.2em;
color: var(--amber-deep);
margin-top: 2.6rem;
padding-top: 1.2rem;
border-top: 1px solid var(--border);
}
/* ── EDITOR'S PICKS band (cards 2-4) — 3-up, warm paper, amber top-rule ── */
main:not(:has(> article)) > .sc-pDcAcS:nth-child(2),
main:not(:has(> article)) > .sc-pDcAcS:nth-child(3),
main:not(:has(> article)) > .sc-pDcAcS:nth-child(4) {
order: 2;
grid-column: span 2;
background: var(--paper-2);
border-top: 2px solid var(--accent);
}
/* ── STRIP 1 · EL CUADERNO — between Picks and Journal (RULE F) ── */
main:not(:has(> article))::before {
content: "EL CUADERNO";
order: 3;
grid-column: 1 / -1;
min-height: 200px;
margin: 1.4rem 0 0.6rem;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
padding: 1.4rem;
text-align: center;
background:
linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.28)),
url("/theme-assets/feature-photo.jpg") center 30% / cover no-repeat,
#2A3138;
font-family: var(--fh), system-ui, sans-serif;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
color: #F4F1E9;
text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
/* ── JOURNAL grid (cards 5-12) — 2-up chronological ── */
main:not(:has(> article)) > .sc-pDcAcS:nth-child(n+5) {
order: 4;
grid-column: span 3;
}
/* ── STRIP 2 · EL ARCHIVO — between Journal and archive tail (RULE F) ── */
main:not(:has(> article))::after {
content: "EL ARCHIVO";
order: 5;
grid-column: 1 / -1;
min-height: 210px;
margin: 1.6rem 0 0.4rem;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
padding: 1.4rem;
text-align: center;
background:
linear-gradient(rgba(28,22,18,.58), rgba(28,22,18,.30)),
url("/theme-assets/feature-photo.jpg") center 70% / cover no-repeat,
#2C2620;
font-family: var(--fh), system-ui, sans-serif;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
color: #F4F1E9;
text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
/* ── ARCHIVE tail (.sc-VoAexE) — full-width magazine index, boxed cream cards (RULE M7) ──
Same design system as the top journal cards: paper token, hair border, 8px radius,
soft shadow, generous padding, hover lift. Grid stretch equalises cell heights per row. */
main:not(:has(> article)) > .sc-VoAexE {
order: 6;
grid-column: 1 / -1;
margin: 0.4rem 0 0;
padding: 0;
border-top: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px 16px;
align-items: stretch;
}
main:not(:has(> article)) > .sc-VoAexE > p {
margin: 0;
padding: 20px 22px;
background: var(--paper);
border: 1px solid var(--hair);
border-radius: 8px;
box-shadow: 0 1px 4px rgba(40,35,26,.05);
font-size: 0;
transition: box-shadow .15s ease, transform .15s ease;
}
main:not(:has(> article)) > .sc-VoAexE > p:hover {
box-shadow: 0 4px 12px rgba(40,35,26,.10);
transform: translateY(-2px);
}
main:not(:has(> article)) > .sc-VoAexE > p a {
font-family: var(--fb), Georgia, serif;
font-size: 0.98rem;
line-height: 1.45;
color: var(--primary);
text-decoration: none;
border-bottom: none;
}
main:not(:has(> article)) > .sc-VoAexE > p a:hover { color: var(--accent); }
/* ─────────────────────────────────────────────────────────
ARTICLE — massive serif title, drop cap, dinkus, pull-quote
───────────────────────────────────────────────────────── */
main:has(> article) { max-width: 720px; }
main:has(> article) > h1 {
font-family: var(--fb), Georgia, serif;
font-style: italic;
font-weight: 600;
font-size: clamp(2rem, 4.5vw, 2.7rem);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--primary);
margin: 1.4rem 0 0.5rem;
}
main:has(> article) > .sc-NYhfit {
display: block;
font-family: var(--fh), system-ui, sans-serif;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--amber-deep);
margin: 0 0 1.9rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border);
}
main:has(> article) > .sc-NYhfit::before { content: "Por Marina Quesada · "; }
main:has(> article) > article {
font-size: 18px;
line-height: 1.78;
color: var(--fg);
}
main:has(> article) > article > p { margin: 0 0 1.4em; }
/* drop cap on first body paragraph — slate MOMENT #2 */
main:has(> article) > article > p:first-of-type::first-letter {
font-family: var(--fb), Georgia, serif;
font-style: italic;
font-weight: 600;
font-size: 3.6em;
line-height: 0.76;
float: left;
margin: 0.06em 0.12em -0.06em 0;
color: var(--moment);
}
/* section break: dinkus above each h2 */
main:has(> article) > article > h2 {
font-family: var(--fh), system-ui, sans-serif;
font-size: 1.4rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--primary);
border-bottom: none;
padding-bottom: 0;
margin-top: 2.6em;
margin-bottom: 0.55em;
}
main:has(> article) > article > h2::before {
content: "✷ ✷ ✷";
display: block;
text-align: center;
font-size: 0.8rem;
letter-spacing: 0.55em;
color: var(--accent);
opacity: 0.75;
margin: 0 0 1.3em;
}
main:has(> article) > article > h3 {
font-family: var(--fh), system-ui, sans-serif;
font-size: 1.12rem;
font-weight: 600;
color: var(--primary);
margin: 1.9em 0 0.5em;
}
/* pull-quote with hanging quotation mark */
main:has(> article) > article > blockquote {
position: relative;
border-left: none;
margin: 2.6em 0;
padding: 0.3em 0 0.3em 3rem;
font-family: var(--fb), Georgia, serif;
font-style: italic;
font-size: 1.3rem;
line-height: 1.45;
color: var(--primary);
}
main:has(> article) > article > blockquote::before {
content: "\201C";
position: absolute;
left: -0.15rem;
top: 0.05em;
font-family: var(--fb), Georgia, serif;
font-size: 4rem;
line-height: 1;
color: var(--accent);
}
main:has(> article) > article > blockquote p { margin: 0; color: var(--primary); }
main:has(> article) > article a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
main:has(> article) > article a:hover { color: var(--primary); }
main:has(> article) > article img {
max-width: 100%;
height: auto;
border-radius: 6px;
display: block;
margin: 2.2em auto;
border: 1px solid var(--border);
}
main:has(> article) > article ul,
main:has(> article) > article ol { padding-left: 1.6em; margin: 0 0 1.4em; }
main:has(> article) > article li { margin-bottom: 0.5em; line-height: 1.72; }
main:has(> article) > article strong { font-weight: 600; color: var(--primary); }
/* related-articles nav → quiet editorial footer block */
main:has(> article) > nav {
background: none;
border-top: 1px solid var(--border);
margin-top: 3rem;
padding: 1.5rem 0 0;
}
main:has(> article) > nav p {
font-family: var(--fb), Georgia, serif;
font-size: 0.94rem;
line-height: 1.65;
color: var(--ink-soft);
}
main:has(> article) > nav em {
display: block;
font-family: var(--fh), system-ui, sans-serif;
font-style: normal;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--amber-deep);
margin-bottom: 0.5rem;
}
main:has(> article) > nav a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
main:has(> article) > nav a:hover { color: var(--primary); }
/* ─────────────────────────────────────────────────────────
FOOTER
───────────────────────────────────────────────────────── */
footer.sc-OHAxWa {
border-top: 1px solid var(--border);
margin-top: 3.5rem;
padding: 1.6rem 1.5rem;
text-align: center;
font-family: var(--fh), system-ui, sans-serif;
font-size: 0.74rem;
letter-spacing: 0.05em;
color: #817D74;
}
footer.sc-OHAxWa a { color: #817D74; text-decoration: none; }
footer.sc-OHAxWa a:hover { color: var(--accent); }
/* ─────────────────────────────────────────────────────────
RESPONSIVE
───────────────────────────────────────────────────────── */
@media (max-width: 860px) {
main:not(:has(> article)) > .sc-pDcAcS:nth-child(2),
main:not(:has(> article)) > .sc-pDcAcS:nth-child(3),
main:not(:has(> article)) > .sc-pDcAcS:nth-child(4) { grid-column: span 3; }
}
@media (max-width: 640px) {
:root body { font-size: 16px; }
main:not(:has(> article)) {
grid-template-columns: 1fr;
max-width: 640px;
column-gap: 0;
}
main:not(:has(> article)) > .sc-pDcAcS,
main:not(:has(> article)) > .sc-pDcAcS:nth-child(2),
main:not(:has(> article)) > .sc-pDcAcS:nth-child(3),
main:not(:has(> article)) > .sc-pDcAcS:nth-child(4),
main:not(:has(> article)) > .sc-pDcAcS:nth-child(n+5) { grid-column: 1 / -1; }
main:not(:has(> article)) > .sc-pDcAcS:first-child::before { display: none; }
main:not(:has(> article)) > .sc-VoAexE { grid-template-columns: repeat(2, 1fr); gap: 10px; }
main:not(:has(> article))::before,
main:not(:has(> article))::after { min-height: 150px; }
body > header:has(> h1) { padding: 2.4rem 1.15rem 2rem; }
}
/* 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=Cup-of-Jo-personal overlay=55% grid=mixed scale=dramatic 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; }
}