*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,system-ui,sans-serif;line-height:1.7;color:#333;background:#fff}
.Section_main__9zRCb{max-width:780px;margin:0 auto;padding:0 20px}
header{background:#1a1a2e;color:#fff;padding:32px 0;margin-bottom:40px}
header h1{font-size:28px;margin-bottom:4px}
header p{opacity:.7;font-size:15px}
header .Post_main__ZnYEp{color:#fff;text-decoration:none;font-size:18px;font-weight:600}
.Section_inner__ZyTLu{border-bottom:1px solid #eee;padding:24px 0}
.Section_inner__ZyTLu h2{font-size:20px;margin-bottom:8px}
.Section_inner__ZyTLu h2 a{color:#1a1a2e;text-decoration:none}
.Section_inner__ZyTLu h2 a:hover{color:#e94560}
.Section_inner__ZyTLu .date{font-size:13px;color:#999;margin-bottom:8px}
.Footer_wrapper__JhFT3{color:#e94560;text-decoration:none;font-size:14px;font-weight:600}
.Content_content__KU5Dc{padding-bottom:60px}
.Content_content__KU5Dc h1{font-size:32px;margin-bottom:8px}
.Content_content__KU5Dc time{font-size:13px;color:#999;display:block;margin-bottom:24px}
.Content_content__KU5Dc h2{font-size:22px;margin:32px 0 12px}
.Content_content__KU5Dc h3{font-size:18px;margin:24px 0 8px}
.Content_content__KU5Dc p{margin-bottom:16px}
.Content_content__KU5Dc ul,.Content_content__KU5Dc ol{margin:0 0 16px 24px}
.Content_content__KU5Dc a{color:#e94560}
.Content_content__KU5Dc img{max-width:100%;height:auto;border-radius:8px;margin:16px 0}
footer{border-top:1px solid #eee;padding:24px 0;margin-top:40px;text-align:center;font-size:13px;color:#999}
footer a{color:#999}
.Content_box__KyzHP{background:#f5f5f5;border-left:3px solid #999;padding:10px 14px;margin-bottom:20px;font-size:13px;color:#777;font-style:italic}
.Nav_main__y8dMO{background:#fef9e7;border:1px solid #f0c36d;padding:10px 14px;margin-top:20px;font-size:12px;color:#8a6d3b}
.Banner_main__gXSfy{font-size:13px;color:#999;margin:-16px 0 24px;font-style:italic}
.Header_wrapper__6XqfN{text-align:center;margin:0 0 20px}
.Sidebar_root__rbyrW{max-width:100%;height:auto;border-radius:6px}
.Footer_area__BS2xQ{margin-top:40px;padding-top:24px;border-top:1px solid #eee}
.Footer_area__BS2xQ h3{font-size:18px;margin-bottom:12px}
.Footer_area__BS2xQ ul{list-style:none;padding:0}
.Footer_area__BS2xQ li{padding:4px 0}
.Footer_area__BS2xQ a{color:#e94560;text-decoration:none}
.Content_box__Ymzg8{padding:20px 0}
.Content_box__Ymzg8 ul{list-style:none;padding:0}
.Content_box__Ymzg8 li{padding:5px 0;font-size:15px}
.Content_box__Ymzg8 a{color:#1a1a2e;text-decoration:none}
.Content_box__Ymzg8 a:hover{color:#e94560}
/* === Theme === */
:root{--primary:#65196F;--accent:#B8854D;--bg:#FBF5E8;--fg:#1F0F22;--border:#D9C5C8;--r:24px;--fb:'Manrope';--fh:'Fraunces'}
/* === Custom === */
/* v.c9bbda — layout revision */
/* --- Fonts: @font-face (top-of-file @import is dropped by the concat pipeline) --- */
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:400; font-display:swap; src:url(https://fonts.gstatic.com/s/fraunces/v38/6NUh8FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0K7iN7hzFUPJH58nib1603gg7S2nfgRYIctxujDg.ttf) format('truetype'); }
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:600; font-display:swap; src:url(https://fonts.gstatic.com/s/fraunces/v38/6NUh8FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0K7iN7hzFUPJH58nib1603gg7S2nfgRYIcaRyjDg.ttf) format('truetype'); }
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:700; font-display:swap; src:url(https://fonts.gstatic.com/s/fraunces/v38/6NUh8FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0K7iN7hzFUPJH58nib1603gg7S2nfgRYIcUByjDg.ttf) format('truetype'); }
@font-face { font-family:'Fraunces'; font-style:italic; font-weight:400; font-display:swap; src:url(https://fonts.gstatic.com/s/fraunces/v38/6NVf8FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChJdt9vIVYX9G37lvd9sPEKsxx664UJf1hLTf7W.ttf) format('truetype'); }
@font-face { font-family:'Fraunces'; font-style:italic; font-weight:600; font-display:swap; src:url(https://fonts.gstatic.com/s/fraunces/v38/6NVf8FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChJdt9vIVYX9G37lvd9sPEKsxx664UJf1iVSv7W.ttf) format('truetype'); }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:500; font-display:swap; src:url(https://fonts.gstatic.com/s/manrope/v20/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk7PFO_F.ttf) format('truetype'); }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:600; font-display:swap; src:url(https://fonts.gstatic.com/s/manrope/v20/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk4jE-_F.ttf) format('truetype'); }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:700; font-display:swap; src:url(https://fonts.gstatic.com/s/manrope/v20/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk4aE-_F.ttf) format('truetype'); }
:root { --rust:#B34F2A; --paper:#FAF5EA; --paper2:#F6EFDD; --hair:rgba(101,25,111,.13); }
:root body { font-family: var(--fb), system-ui, -apple-system, sans-serif; color: var(--fg); background: var(--bg); line-height: 1.72; font-size: 16.5px; }
::selection { background: var(--accent); color: var(--bg); }
:root hr { border: 0; border-top: 1px solid var(--border); margin: 30px 0; }
/* ============================================================ MASTHEAD */
:root > body > header { background: linear-gradient(168deg, #56144f 0%, #65196F 62%, #7a2a44 100%); color: var(--bg); padding: 54px 0 40px; margin-bottom: 56px; border-bottom: 4px solid var(--accent); }
:root > body > header > div { max-width: 960px; margin: 0 auto; padding: 0 24px; text-align: center; }
/* homepage masthead: monogram + italic wordmark + manifesto line */
:root > body > header:has(h1) > div::before { content: ''; display: block; width: 44px; height: 52px; margin: 0 auto 14px; background: url("data:image/svg+xml,") no-repeat center / contain; }
:root > body > header h1 { font-family: var(--fh), Cambria, serif; font-size: 46px; font-style: italic; font-weight: 600; color: var(--bg); line-height: 1.08; margin-bottom: 12px; letter-spacing: -0.015em; }
:root > body > header p { font-family: var(--fb), system-ui, sans-serif; font-size: 14.5px; line-height: 1.6; color: rgba(251, 245, 232, .82); max-width: 620px; margin: 0 auto; }
:root > body > header:has(h1) > div::after { content: 'Un cuaderno de sábados — no un negocio, no una escuela.'; display: block; margin-top: 18px; font-family: var(--fh), Cambria, serif; font-style: italic; font-size: 15px; color: rgba(184, 133, 77, .95); letter-spacing: .01em; }
/* article masthead wordmark link */
:root > body > header a { font-family: var(--fh), Cambria, serif; font-style: italic; font-size: 24px; color: var(--bg); text-decoration: none; font-weight: 600; }
/* ============================================================ HOMEPAGE GRID */
:root main:has(> article.Section_inner__ZyTLu) { max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: repeat(6, 1fr); column-gap: 26px; row-gap: 32px; align-items: stretch; padding: 0 24px 96px; }
/* base card */
:root main > article.Section_inner__ZyTLu { grid-column: span 3; order: 5; display: flex; flex-direction: column; margin: 0; padding: 28px 34px; background: var(--paper); border: 1px solid var(--hair); border-radius: 9px; box-shadow: 0 1px 4px rgba(31, 15, 34, .05); min-height: 196px; transition: box-shadow .14s ease, transform .14s ease; }
:root main > article.Section_inner__ZyTLu:hover { box-shadow: 0 6px 18px rgba(31, 15, 34, .10); transform: translateY(-2px); }
:root main > article.Section_inner__ZyTLu > h2 { font-family: var(--fh), Cambria, serif; font-size: 21px; font-weight: 600; line-height: 1.24; margin: 0 0 9px; padding: 0; border: 0; letter-spacing: -0.005em; }
:root main > article.Section_inner__ZyTLu > h2 a { color: var(--primary); text-decoration: none; }
:root main > article.Section_inner__ZyTLu > h2 a:hover { color: var(--accent); }
:root main > article.Section_inner__ZyTLu > p.date { order: -1; font-family: var(--fb), system-ui, sans-serif; font-size: 11px; font-weight: 700; color: var(--accent); letter-spacing: .18em; text-transform: uppercase; line-height: 1.4; margin: 0 0 10px; }
:root main > article.Section_inner__ZyTLu > p:not(.date) { font-family: var(--fb), system-ui, sans-serif; font-size: 15px; line-height: 1.6; color: var(--fg); opacity: .82; margin: 0 0 16px; max-width: 64ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
:root main > article.Section_inner__ZyTLu > a.Footer_wrapper__JhFT3 { margin-top: auto; font-size: 0; text-decoration: none; }
:root main > article.Section_inner__ZyTLu > a.Footer_wrapper__JhFT3::after { content: 'Leer la nota →'; font-family: var(--fb), system-ui, sans-serif; font-size: 12px; font-weight: 700; color: var(--primary); letter-spacing: .12em; text-transform: uppercase; }
:root main > article.Section_inner__ZyTLu > a.Footer_wrapper__JhFT3:hover::after { color: var(--accent); }
/* HERO — the loud voice (first entry) */
:root main > article.Section_inner__ZyTLu:first-of-type { grid-column: 1 / -1; order: 1; background: var(--paper2); border: 1px solid var(--hair); border-top: 4px solid var(--rust); border-radius: 9px; padding: 44px 52px 42px; min-height: 0; }
:root main > article.Section_inner__ZyTLu:first-of-type::before { content: 'Última entrada'; font-family: var(--fb), system-ui, sans-serif; font-size: 11.5px; font-weight: 700; color: var(--rust); letter-spacing: .24em; text-transform: uppercase; margin-bottom: 14px; }
:root main > article.Section_inner__ZyTLu:first-of-type > h2 { font-family: var(--fh), Cambria, serif; font-size: 40px; font-style: italic; font-weight: 600; line-height: 1.1; margin: 0 0 16px; letter-spacing: -0.015em; }
:root main > article.Section_inner__ZyTLu:first-of-type > p.date { color: var(--accent); }
:root main > article.Section_inner__ZyTLu:first-of-type > p.date::before { content: 'Por Renata · '; }
:root main > article.Section_inner__ZyTLu:first-of-type > p:not(.date) { font-size: 19px; line-height: 1.5; max-width: 62ch; -webkit-line-clamp: 4; opacity: .9; }
:root main > article.Section_inner__ZyTLu:first-of-type > p:not(.date)::first-letter { font-family: var(--fh), Cambria, serif; font-size: 3.4em; line-height: .82; font-weight: 700; color: var(--rust); float: left; margin: 6px 12px 0 0; }
:root main > article.Section_inner__ZyTLu:first-of-type > a.Footer_wrapper__JhFT3::after { font-size: 13px; }
/* EDITOR'S PICKS band label (grid-container ::before spans full row) */
:root main:has(> article.Section_inner__ZyTLu)::before { content: 'Selección de Renata — empieza por aquí'; order: 2; grid-column: 1 / -1; font-family: var(--fb), system-ui, sans-serif; font-size: 14px; font-weight: 700; color: var(--primary); letter-spacing: .2em; text-transform: uppercase; border-bottom: 1px solid rgba(101, 25, 111, .22); padding-bottom: 10px; margin: 22px 0 2px; }
/* the two picks */
:root main > article.Section_inner__ZyTLu:nth-of-type(2), :root main > article.Section_inner__ZyTLu:nth-of-type(3) { order: 3; border-top: 3px solid var(--accent); background: var(--paper2); }
/* STRIP 1 — hero-photo section break before the journal (dark overlay + label) */
:root main:has(> article.Section_inner__ZyTLu)::after { content: 'El diario — más recientes'; order: 4; grid-column: 1 / -1; min-height: 204px; display: flex; align-items: center; justify-content: center; text-align: center; background: linear-gradient(135deg, rgba(74,17,82,.74) 0%, rgba(101,25,111,.6) 55%, rgba(122,42,68,.74) 100%), url("/theme-assets/hero-masthead.jpg") center / cover no-repeat; border-top: 3px solid var(--accent); border-radius: 9px; margin: 30px 0 4px; color: #FBF5E8; font-family: var(--fb), system-ui, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
/* journal cards keep the base card treatment (order 5, span 3) */
:root main > article.Section_inner__ZyTLu:nth-of-type(n+4) { order: 5; }
/* TAIL — compact archive, full width, magazine index */
:root main > section.Content_box__Ymzg8 { order: 6; grid-column: 1 / -1; padding: 0; margin: 0; background: transparent; }
:root main > section.Content_box__Ymzg8::before { content: 'Seguir leyendo'; display: flex; align-items: center; justify-content: center; min-height: 204px; text-align: center; background: linear-gradient(135deg, rgba(122,42,68,.74) 0%, rgba(101,25,111,.6) 50%, rgba(74,17,82,.74) 100%), url("/theme-assets/article-hero.jpg") center / cover no-repeat; border-top: 3px solid var(--accent); border-radius: 9px; margin: 30px 0 26px; color: #FBF5E8; font-family: var(--fb), system-ui, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
/* tail = boxed cream cards, 3-col magazine index — same paper/border/radius/shadow/hover as journal cards (M7 design parity) */
:root main > section.Content_box__Ymzg8 ul { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 16px; align-items: stretch; padding: 0; margin: 0; }
:root main > section.Content_box__Ymzg8 li { display: flex; padding: 18px 20px; background: var(--paper); border: 1px solid var(--hair); border-radius: 9px; box-shadow: 0 1px 4px rgba(31, 15, 34, .05); line-height: 1.32; transition: box-shadow .14s ease, transform .14s ease; }
:root main > section.Content_box__Ymzg8 li:hover { box-shadow: 0 6px 18px rgba(31, 15, 34, .10); transform: translateY(-2px); }
:root main > section.Content_box__Ymzg8 a { width: 100%; color: var(--primary); text-decoration: none; font-family: var(--fh), Cambria, serif; font-size: 15px; font-weight: 600; line-height: 1.32; }
:root main > section.Content_box__Ymzg8 a:hover { color: var(--accent); }
/* ============================================================ ARTICLE PAGE */
:root main { max-width: 760px; margin: 0 auto; padding: 0 24px 70px; }
:root main.Content_content__KU5Dc > h1 { font-family: var(--fh), Cambria, serif; font-size: 40px; font-style: italic; font-weight: 600; color: var(--primary); line-height: 1.12; margin: 8px 0 6px; letter-spacing: -0.015em; }
:root main.Content_content__KU5Dc > time { display: block; font-family: var(--fb), system-ui, sans-serif; font-size: 12px; color: var(--accent); margin-bottom: 34px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
/* S6 — persona/location byline anchor before the date */
:root main.Content_content__KU5Dc > time::before { content: 'Por Renata · Lima · '; }
:root main > article > p { margin-bottom: 1.4em; font-size: 17.5px; line-height: 1.8; }
:root main > article > h2 { font-family: var(--fh), Cambria, serif; font-size: 27px; font-weight: 600; color: var(--primary); margin: 2.4em 0 0.6em; padding-bottom: 6px; border-bottom: 1px solid var(--accent); letter-spacing: -0.005em; }
:root main > article > h2:not(:first-of-type)::before { content: '✷ ✷ ✷'; display: block; text-align: center; color: var(--accent); font-size: 15px; letter-spacing: .5em; font-weight: 400; border: 0; margin: 0 0 1.1em; padding-right: .5em; }
:root main > article > h3 { font-family: var(--fh), Cambria, serif; font-size: 20px; font-weight: 500; color: var(--accent); margin: 24px 0 10px; }
:root main > article ul, :root main > article ol { margin: 0 0 18px 26px; }
:root main > article li { margin-bottom: 6px; font-size: 16.5px; line-height: 1.65; }
:root main > article li strong { color: var(--primary); font-weight: 700; }
:root main > article blockquote { position: relative; border-left: 3px solid var(--accent); padding: 12px 0 12px 30px; margin: 28px 0; font-family: var(--fh), Cambria, serif; font-style: italic; font-size: 19px; color: var(--primary); }
:root main > article blockquote::before { content: '\201C'; position: absolute; left: 8px; top: -6px; font-family: var(--fh), Cambria, serif; font-size: 44px; line-height: 1; color: var(--accent); opacity: .5; }
:root main > article > p strong { color: var(--primary); font-weight: 700; }
:root main > article > p a, :root main > article > p a:visited { color: var(--primary); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1.5px; font-weight: 700; }
:root main > article > p a:hover { color: var(--accent); text-decoration-color: var(--primary); }
/* affiliate pills — descendant combinator (not `> p`) so the CTA renders as a pill whether
the anchor sits in article>p or article>div/section>p; attribute selector keeps it above the
prose-link rule on specificity (RULE J, M10) */
:root main article a[href^="/ref/"], :root main article a[href^="/try/"], :root main article a[href^="/get/"], :root main article a[href^="/go/"], :root main article a[href^="/out/"], :root main article a[href^="/view/"], :root main article a[href^="/choice/"], :root main article a[href^="/deal/"] { display: inline-block; background: var(--accent); color: var(--bg); padding: 4px 16px; border-radius: 6px; text-decoration: none; font-weight: 700; font-family: var(--fh), Cambria, serif; font-size: 14.5px; letter-spacing: .02em; }
:root main article a[href^="/ref/"]:hover, :root main article a[href^="/try/"]:hover, :root main article a[href^="/get/"]:hover, :root main article a[href^="/go/"]:hover, :root main article a[href^="/out/"]:hover, :root main article a[href^="/view/"]:hover, :root main article a[href^="/choice/"]:hover, :root main article a[href^="/deal/"]:hover { background: var(--primary); color: var(--bg); }
:root main > article img, :root main > article figure { margin: 0 0 30px; }
:root main > article img { width: 100%; height: auto; display: block; border-radius: 10px; box-shadow: 0 4px 18px rgba(31, 15, 34, .14); }
:root main > article .Header_wrapper__6XqfN { margin: 0 0 30px; }
:root main > article .inline-wrap { margin: 8px 0 26px; }
:root main > article table { width: 100%; border-collapse: collapse; margin: 26px 0; font-family: var(--fb), system-ui, sans-serif; font-size: 14.5px; background: #FBF6EA; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
:root main > article table th { background: var(--primary); color: var(--bg); padding: 10px 14px; text-align: left; font-family: var(--fh), Cambria, serif; font-weight: 600; font-size: 13.5px; letter-spacing: .02em; }
:root main > article table td { padding: 9px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
/* "Importante" aside / affiliate-note callout */
:root main > article .Nav_main__y8dMO { background: var(--paper2); border: 1px solid var(--hair); border-left: 4px solid var(--accent); border-radius: 0 8px 8px 0; padding: 16px 22px; margin: 32px 0; font-family: var(--fb), system-ui, sans-serif; font-size: 14.5px; line-height: 1.6; color: var(--fg); }
:root main > article .Nav_main__y8dMO strong { color: var(--primary); }
/* related section on article pages */
:root main > section.Footer_area__BS2xQ { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border); }
:root main > section.Footer_area__BS2xQ h3 { font-family: var(--fh), Cambria, serif; font-size: 15px; font-weight: 600; color: var(--primary); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 12px; }
:root main > section.Footer_area__BS2xQ ul { list-style: none; padding: 0; margin: 0; }
:root main > section.Footer_area__BS2xQ li { padding: 8px 0; border-bottom: 1px dotted rgba(101, 25, 111, .2); }
:root main > section.Footer_area__BS2xQ a { color: var(--primary); text-decoration: none; font-size: 15px; }
:root main > section.Footer_area__BS2xQ a:hover { color: var(--accent); }
/* ============================================================ FOOTER */
:root > body > footer > div { max-width: 960px; }
:root footer { background: transparent; border-top: 1px solid var(--border); padding: 26px 0 40px; margin-top: 60px; text-align: center; font-family: var(--fb), system-ui, sans-serif; font-size: 12.5px; color: var(--fg); opacity: .62; letter-spacing: .03em; }
:root footer a { color: var(--fg); text-decoration: none; border-bottom: 1px dotted var(--border); }
:root footer a:hover { color: var(--primary); border-bottom-color: var(--primary); }
/* ============================================================ RESPONSIVE */
@media (max-width: 720px) {
:root main:has(> article.Section_inner__ZyTLu) { grid-template-columns: 1fr; row-gap: 22px; padding-bottom: 64px; }
:root main > article.Section_inner__ZyTLu { grid-column: 1 / -1; padding: 24px 26px; min-height: 0; }
:root main > article.Section_inner__ZyTLu:first-of-type { padding: 32px 28px; }
:root main > article.Section_inner__ZyTLu:first-of-type > h2 { font-size: 30px; }
:root main > section.Content_box__Ymzg8 ul { columns: 1; }
:root > body > header h1 { font-size: 36px; }
:root main.Content_content__KU5Dc > h1 { font-size: 32px; }
}
/* 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=Substack-modern overlay=55% grid=asymmetric scale=dramatic family=articles-section */
/* ── Archive strip above tail (overlay 55%) ── */
: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.55) 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; }
}