*{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} .block-95cae8{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 .container-aab2db{color:#fff;text-decoration:none;font-size:18px;font-weight:600} .nav-b380c8{border-bottom:1px solid #eee;padding:24px 0} .nav-b380c8 h2{font-size:20px;margin-bottom:8px} .nav-b380c8 h2 a{color:#1a1a2e;text-decoration:none} .nav-b380c8 h2 a:hover{color:#e94560} .nav-b380c8 .date{font-size:13px;color:#999;margin-bottom:8px} .page-fe8cd6{color:#e94560;text-decoration:none;font-size:14px;font-weight:600} .section-9198d4{padding-bottom:60px} .section-9198d4 h1{font-size:32px;margin-bottom:8px} .section-9198d4 time{font-size:13px;color:#999;display:block;margin-bottom:24px} .section-9198d4 h2{font-size:22px;margin:32px 0 12px} .section-9198d4 h3{font-size:18px;margin:24px 0 8px} .section-9198d4 p{margin-bottom:16px} .section-9198d4 ul,.section-9198d4 ol{margin:0 0 16px 24px} .section-9198d4 a{color:#e94560} .section-9198d4 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} .shell-85d6b7{background:#f5f5f5;border-left:3px solid #999;padding:10px 14px;margin-bottom:20px;font-size:13px;color:#777;font-style:italic} .outer-9c4b4d{background:#fef9e7;border:1px solid #f0c36d;padding:10px 14px;margin-top:20px;font-size:12px;color:#8a6d3b} .panel-bcd899{font-size:13px;color:#999;margin:-16px 0 24px;font-style:italic} .container-0a37f3{text-align:center;margin:0 0 20px} .frame-d404ae{max-width:100%;height:auto;border-radius:6px} .footer-3db259{margin-top:40px;padding-top:24px;border-top:1px solid #eee} .footer-3db259 h3{font-size:18px;margin-bottom:12px} .footer-3db259 ul{list-style:none;padding:0} .footer-3db259 li{padding:4px 0} .footer-3db259 a{color:#e94560;text-decoration:none} .page-fe4c2f{padding:20px 0} .page-fe4c2f ul{list-style:none;padding:0} .page-fe4c2f li{padding:5px 0;font-size:15px} .page-fe4c2f a{color:#1a1a2e;text-decoration:none} .page-fe4c2f a:hover{color:#e94560} /* === Theme === */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Playfair+Display:wght@400;700&display=swap'); body{font-family:'Montserrat',sans-serif;color:#1A1A1A;background:#FAF7F2} header{background:#2D1B2D;color:#fff} header h1{font-family:'Playfair Display',serif;color:#fff} header p{color:rgba(255,255,255,.75)} header a{color:#fff;text-decoration:none} .nav-b380c8 h2{font-family:'Playfair Display',serif} .nav-b380c8 h2 a{color:#2D1B2D} .nav-b380c8 h2 a:hover{color:#D4AF37} .page-fe8cd6{color:#D4AF37} .section-9198d4 h1{font-family:'Playfair Display',serif} .section-9198d4 h2{font-family:'Playfair Display',serif} .section-9198d4 a{color:#D4AF37} .section-9198d4 img{border-radius:4px} .affiliate-disclosure{border-radius:4px} .ymyl-disclaimer{border-radius:4px} /* === Custom === */ /* v.d7be1e — layout revision */ /* ms-art-es — Cuaderno de Paleta — maquillaje editorial Hollywood (minimal static engine) */ /* Live DOM: home main =
×N +
archive; reading main:has(h1). */ /* Baked theme accent is #FF0055 — overridden below via :root-boosted specificity. */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400;1,600;1,700&family=Montserrat:wght@300;400;500;600;700&display=swap'); /* ── Tokens ── */ :root { --plum: #2D1B2D; --plum-2: #241A24; --gold: #C5A059; --gold-soft: #D8BE8A; --red: #8B2E2E; /* moment colour — drop-cap motif only */ --paper: #F4EDDF; /* warm ivory page */ --card: #FBF6EC; /* lighter ivory card */ --ink: #241A24; --muted: #6B5068; --line: rgba(45,27,45,.12); --cream: #F3ECDD; --font-heading:'Playfair Display', Georgia, serif; --font-body: 'Montserrat', system-ui, sans-serif; } /* ── Base ── */ :root *, :root *::before, :root *::after { box-sizing: border-box; } :root body { font-family: var(--font-body); font-size: 17px; line-height: 1.75; font-weight: 400; color: var(--ink); background-color: var(--paper); margin: 0; padding: 0; -webkit-font-smoothing: antialiased; } :root a { color: var(--plum); text-decoration: none; border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease, background-color .2s ease; } :root a:hover, :root a:focus { color: var(--gold); outline: none; } :root p { max-width: 68ch; margin: 0 0 1.4em; } :root ul, :root ol { max-width: 68ch; } :root hr { border: none; border-top: 1px solid var(--line); margin: 2rem 0; } :root code { font-size: .9em; background: #efe6d6; padding: .15em .4em; border-radius: 4px; } /* ══════════════════════════════════════════════════════════════ MASTHEAD (full-bleed photo band + gradient italic wordmark) ══════════════════════════════════════════════════════════════ */ :root header { background-color: var(--plum); background-image: linear-gradient(rgba(30,18,30,.76), rgba(30,18,30,.84)), url("/theme-assets/hero-masthead.jpg"); background-size: cover; background-position: center; padding: 62px 0 54px; margin-bottom: 0; border-bottom: 3px solid var(--gold); } :root header > div { text-align: center; } :root header > div::before { content: "Diario de maquillaje editorial · Valparaíso"; display: block; font-family: var(--font-body); text-transform: uppercase; letter-spacing: .3em; font-size: 11px; font-weight: 600; color: var(--gold); margin-bottom: 16px; } :root header h1 { font-family: var(--font-heading); font-style: italic; font-weight: 700; font-size: 46px; line-height: 1.05; letter-spacing: .01em; margin: 0; color: var(--gold); background: linear-gradient(92deg, #E7D2A0 0%, #C5A059 52%, #B98BA8 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* article/static masthead wordmark is a link */ :root header a { font-family: var(--font-heading); font-style: italic; font-weight: 700; color: var(--gold); border-bottom: none; } :root header a:hover { color: var(--gold-soft); } /* home manifesto line */ :root header > div > p { font-family: var(--font-heading); font-style: italic; font-weight: 400; font-size: 16px; line-height: 1.55; color: rgba(243,236,221,.86); max-width: 60ch; margin: 15px auto 0; } /* ══════════════════════════════════════════════════════════════ HOMEPAGE — main:not(:has(h1)) = no

anywhere (cards use h2) 6-col editorial grid, arranged with order: 1 hero · 2 EP label · 3 EP cards · 4 journal lead (+EL CUADERNO strip) 5 journal grid · 6 VER MÁS strip · 7 archive tail ══════════════════════════════════════════════════════════════ */ :root main:not(:has(h1)) { max-width: 1080px; margin: 0 auto 40px; padding: 66px 24px 0; display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 34px 30px; align-items: stretch; } /* — base card (defaults to journal grid: span 3, order 5) — */ :root main:not(:has(h1)) > article { grid-column: span 3; order: 5; margin: 0; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 1px 4px rgba(45,27,45,.05); padding: 26px 32px 28px; } :root main:not(:has(h1)) > article > p:first-of-type { /* date/kicker */ font-family: var(--font-body); text-transform: uppercase; letter-spacing: .16em; font-size: 11.5px; line-height: 1.4; color: var(--muted); margin: 0 0 10px; } :root main:not(:has(h1)) > article > h2 { font-family: var(--font-heading); font-weight: 700; font-size: 22px; line-height: 1.18; margin: 0 0 12px; letter-spacing: 0; } :root main:not(:has(h1)) > article > h2 a { color: var(--plum); border-bottom: none; } :root main:not(:has(h1)) > article:hover > h2 a { color: var(--gold); } :root main:not(:has(h1)) > article > p:nth-of-type(2) { /* excerpt */ font-size: 15.5px; line-height: 1.62; color: var(--ink); margin: 0 0 18px; max-width: 64ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } :root main:not(:has(h1)) > article > a:last-child { /* read-more → pill/kicker */ margin-top: auto; align-self: flex-start; font-size: 0; color: var(--plum); border-bottom: none; } :root main:not(:has(h1)) > article > a:last-child::after { content: "Leer la entrada →"; font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: 11.5px; } :root main:not(:has(h1)) > article > a:last-child:hover { color: var(--gold); } /* — HERO (article 1) — */ :root main:not(:has(h1)) > article:nth-of-type(1) { grid-column: 1 / -1; order: 1; padding: 44px 52px 46px; border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 10px; } :root main:not(:has(h1)) > article:nth-of-type(1)::before { content: "Último ensayo"; display: block; font-family: var(--font-body); text-transform: uppercase; letter-spacing: .28em; font-size: 11px; font-weight: 600; color: var(--gold); margin-bottom: 16px; } :root main:not(:has(h1)) > article:nth-of-type(1) > p:first-of-type { font-size: 12px; letter-spacing: .2em; margin-bottom: 18px; } :root main:not(:has(h1)) > article:nth-of-type(1) > p:first-of-type::before { content: "Por Lorena · Valparaíso · "; color: var(--plum); } :root main:not(:has(h1)) > article:nth-of-type(1) > h2 { font-style: italic; font-weight: 700; font-size: 46px; line-height: 1.08; max-width: 20ch; margin-bottom: 20px; } :root main:not(:has(h1)) > article:nth-of-type(1) > p:nth-of-type(2) { font-size: 20px; line-height: 1.5; max-width: 60ch; margin-bottom: 26px; -webkit-line-clamp: 4; } :root main:not(:has(h1)) > article:nth-of-type(1) > p:nth-of-type(2)::first-letter { font-family: var(--font-heading); font-style: italic; font-size: 3.4em; line-height: .8; float: left; margin: .02em .1em 0 0; color: var(--red); } :root main:not(:has(h1)) > article:nth-of-type(1) > a:last-child { align-self: flex-start; margin-top: 0; padding: 13px 27px; border: 1.5px solid var(--plum); border-radius: 999px; color: var(--plum); } :root main:not(:has(h1)) > article:nth-of-type(1) > a:last-child::after { content: "Leer el ensayo completo →"; font-size: 12.5px; } :root main:not(:has(h1)) > article:nth-of-type(1) > a:last-child:hover { background: var(--plum); } :root main:not(:has(h1)) > article:nth-of-type(1) > a:last-child:hover::after { color: var(--cream); } /* — EDITOR'S PICKS label (container ::before, full row) — */ :root main:not(:has(h1))::before { content: "Selección de Lorena — empieza por aquí"; order: 2; grid-column: 1 / -1; font-family: var(--font-body); text-transform: uppercase; letter-spacing: .24em; font-size: 13px; font-weight: 600; color: var(--muted); padding-bottom: 12px; border-bottom: 1px solid var(--gold); margin: 58px 0 0; } /* — EP cards (2–4): 3 across, gold top rule — */ :root main:not(:has(h1)) > article:nth-of-type(2), :root main:not(:has(h1)) > article:nth-of-type(3), :root main:not(:has(h1)) > article:nth-of-type(4) { grid-column: span 2; order: 3; border-top: 3px solid var(--gold); } :root main:not(:has(h1)) > article:nth-of-type(2) > h2, :root main:not(:has(h1)) > article:nth-of-type(3) > h2, :root main:not(:has(h1)) > article:nth-of-type(4) > h2 { font-size: 19px; } /* — JOURNAL LEAD (article 5) full-width, EL CUADERNO photo strip as its ::before — */ :root main:not(:has(h1)) > article:nth-of-type(5) { grid-column: 1 / -1; order: 4; overflow: hidden; padding: 0 40px 34px; margin-top: 66px; } :root main:not(:has(h1)) > article:nth-of-type(5)::before { content: "El Cuaderno"; margin: 0 -40px 30px; min-height: 210px; background-image: linear-gradient(rgba(20,16,20,.55), rgba(20,16,20,.28)), url("/theme-assets/article-hero.jpg"); background-size: cover; background-position: center 30%; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 24px; color: var(--cream); font-family: var(--font-body); text-transform: uppercase; letter-spacing: .32em; font-size: 13px; text-shadow: 0 1px 3px rgba(0,0,0,.5); } :root main:not(:has(h1)) > article:nth-of-type(5) > h2 { font-style: italic; font-size: 30px; max-width: 24ch; } :root main:not(:has(h1)) > article:nth-of-type(5) > p:nth-of-type(2) { font-size: 17px; max-width: 68ch; } /* — VER MÁS photo strip (container ::after) — */ :root main:not(:has(h1))::after { content: "Ver más"; order: 6; grid-column: 1 / -1; min-height: 210px; margin-top: 66px; border-radius: 8px; background-image: linear-gradient(rgba(20,16,20,.55), rgba(20,16,20,.28)), url("/theme-assets/article-hero.jpg"); background-size: cover; background-position: center 70%; display: flex; align-items: center; justify-content: center; color: var(--cream); font-family: var(--font-body); text-transform: uppercase; letter-spacing: .32em; font-size: 13px; text-shadow: 0 1px 3px rgba(0,0,0,.5); } /* — ARCHIVE TAIL (
) full-width magazine index — boxed cream cards, design parity w/ top journal cards (M7) — */ :root main:not(:has(h1)) > section { grid-column: 1 / -1; order: 7; margin-top: 46px; background: transparent; border: none; border-radius: 0; box-shadow: none; padding: 0; } :root main:not(:has(h1)) > section::before { content: "El archivo completo"; display: block; font-family: var(--font-body); text-transform: uppercase; letter-spacing: .24em; font-size: 12.5px; font-weight: 600; color: var(--muted); padding-bottom: 12px; margin-bottom: 20px; border-bottom: 1px solid var(--gold); } :root main:not(:has(h1)) > section ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 16px; align-items: stretch; } :root main:not(:has(h1)) > section li { margin: 0; break-inside: avoid; display: flex; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 1px 4px rgba(45,27,45,.05); padding: 20px 22px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } :root main:not(:has(h1)) > section li:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(45,27,45,.09); border-color: var(--gold-soft); } :root main:not(:has(h1)) > section li a { font-family: var(--font-heading); font-style: italic; font-size: 15.5px; line-height: 1.4; color: var(--plum); border-bottom: none; } :root main:not(:has(h1)) > section li a:hover { color: var(--gold); } /* ══════════════════════════════════════════════════════════════ READING PAGES — main:has(h1) (article + static; static h1 sits in article) ══════════════════════════════════════════════════════════════ */ :root main:has(h1) h1 { font-family: var(--font-heading); font-style: italic; font-weight: 700; font-size: 42px; line-height: 1.12; color: var(--plum); margin: 0 0 .3em; } :root main:has(h1) h1::after { content: ""; display: block; width: 64px; height: 3px; background: var(--gold); margin: .5em 0 0; } :root main:has(h1) > time { font-family: var(--font-body); text-transform: uppercase; letter-spacing: .18em; font-size: 12.5px; color: var(--muted); display: block; margin: 1.1em 0 2em; } /* article byline / persona anchor before the date (S6) */ :root main:has(h1) > time::before { content: "Por Lorena Cifuentes · Valparaíso · "; color: var(--plum); } :root main:has(h1) article > p { font-size: 18.5px; line-height: 1.78; margin: 0 0 1.35em; max-width: 68ch; color: var(--ink); } :root main:has(h1) article > p:first-of-type::first-letter { font-family: var(--font-heading); font-style: italic; font-size: 3.2em; line-height: .8; float: left; margin: .04em .12em 0 0; color: var(--red); } :root main:has(h1) article > h2 { font-family: var(--font-heading); font-weight: 700; font-size: 27px; line-height: 1.2; color: var(--plum); margin: 2.3em 0 .5em; } :root main:has(h1) article > h2::before { content: "✦ ✦ ✦"; display: block; color: var(--gold); font-size: 13px; letter-spacing: .3em; margin-bottom: .7em; } :root main:has(h1) article > h3 { font-family: var(--font-heading); font-style: italic; font-weight: 600; font-size: 20px; color: var(--plum); margin: 1.8em 0 .4em; } :root main:has(h1) article > ul, :root main:has(h1) article > ol { margin: 0 0 1.4em 1.4em; max-width: 68ch; } :root main:has(h1) article > ul li, :root main:has(h1) article > ol li { margin-bottom: .5em; line-height: 1.7; } :root main:has(h1) article > ul li::marker { color: var(--gold); } /* in-article Table-of-Contents