*{margin:0;padding:0;box-sizing:border-box} body{font-family:'Segoe UI',Roboto,Oxygen,Ubuntu,sans-serif;line-height:1.75;color:#333;background:#f0f2f5} .astro-lnDchBI8{max-width:860px;margin:0 auto;padding:0 20px} .astro-oMht0top{background:#fff;padding:28px 0;margin-bottom:32px;box-shadow:0 1px 3px rgba(0,0,0,.08)} .astro-oMht0top h1{font-size:22px;font-weight:700;margin-bottom:2px} .astro-oMht0top p{font-size:14px;color:#666} .astro-oMht0top a{color:#333;text-decoration:none;font-size:18px;font-weight:700} .astro-ssEA3oBb{display:flex;flex-direction:column;gap:20px} .astro-yPfUciCi{background:#fff;border-radius:12px;box-shadow:0 1px 6px rgba(0,0,0,.06);padding:24px 28px;transition:transform .15s,box-shadow .15s} .astro-yPfUciCi:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.1)} .astro-yPfUciCi h2{font-size:19px;margin-bottom:6px} .astro-yPfUciCi h2 a{color:#1a1a1a;text-decoration:none} .astro-yPfUciCi .astro-2CeCpL9A{font-size:12px;color:#999;margin-bottom:8px} .astro-yPfUciCi p{font-size:14px;color:#555;margin-bottom:12px} .astro-ar7Ey28i{display:inline-block;background:#5865f2;color:#fff;padding:6px 16px;border-radius:20px;font-size:13px;font-weight:600;text-decoration:none} .astro-ar7Ey28i:hover{background:#4752c4} .astro-WLOQHPx8{padding-bottom:60px} .astro-WLOQHPx8 h1{font-size:30px;font-weight:700;margin-bottom:8px} .astro-WLOQHPx8 time{font-size:12px;color:#999;display:block;margin-bottom:24px} .astro-WLOQHPx8 h2{font-size:22px;margin:32px 0 12px} .astro-WLOQHPx8 h3{font-size:18px;margin:24px 0 8px} .astro-WLOQHPx8 p{margin-bottom:16px} .astro-WLOQHPx8 ul,.astro-WLOQHPx8 ol{margin:0 0 16px 24px} .astro-WLOQHPx8 a{color:#5865f2} .astro-WLOQHPx8 img{max-width:100%;height:auto;border-radius:12px;margin:16px 0} .astro-s1Dmb8x4{padding:24px 0;margin-top:40px;text-align:center;font-size:12px;color:#999} .astro-s1Dmb8x4 a{color:#999;text-decoration:none} .astro-b1fTR6Pt{background:#e8eaf0;border-radius:8px;padding:12px 16px;margin-bottom:20px;font-size:13px;color:#888;font-style:italic} .astro-l6tTqxi5{background:#fff8e1;border-radius:8px;padding:12px 16px;margin-top:24px;font-size:12px;color:#9e8600} .astro-0N1nX44e{display:inline-block;background:#f0f2f7;border-radius:12px;padding:4px 12px;margin:-18px 0 24px;font-size:12px;color:#777} .astro-AP4cMDB7{text-align:center;margin:0 0 24px} .astro-ARQ6Hd5B{max-width:100%;height:auto;border-radius:12px} .astro-EF9EEqo2{margin-top:32px;padding-top:20px;border-top:1px solid #e0e0e0} .astro-EF9EEqo2 h3{font-size:16px;font-weight:700;margin-bottom:12px} .crd-related-list{display:flex;flex-direction:column;gap:8px} .crd-related-link{display:block;background:#fff;border-radius:8px;padding:10px 14px;color:#333;text-decoration:none;box-shadow:0 1px 3px rgba(0,0,0,.06);font-size:14px} .crd-related-link:hover{box-shadow:0 2px 8px rgba(0,0,0,.1)} .astro-AoKCGo6z{display:flex;flex-direction:column;gap:8px;margin-top:20px} .astro-dCfocEe3{display:block;background:#fff;border-radius:8px;padding:10px 16px;color:#1a1a1a;text-decoration:none;box-shadow:0 1px 3px rgba(0,0,0,.05);font-size:15px} .astro-dCfocEe3:hover{box-shadow:0 2px 8px rgba(0,0,0,.1)} /* === Theme === */ :root{--primary:#3D5078;--accent:#C49060;--bg:#F2EDDC;--fg:#14181F;--border:#C4C2C8;--r:28px;--fb:'Hind';--fh:'Caudex'} /* === Custom === */ @import url('https://fonts.googleapis.com/css2?family=Caudex:ital,wght@0,400;0,700;1,400&family=Hind:wght@400;500;600;700&display=swap'); :root body { font-family: var(--fb), system-ui, -apple-system, sans-serif; color: var(--fg); background: var(--bg); line-height: 1.74; font-size: 16.5px; } ::selection { background: var(--accent); color: var(--bg); } :root hr { border: 0; border-top: 1px solid var(--border); margin: 30px 0; } :root > body > header { background: var(--primary); color: var(--bg); padding: 52px 0 32px; margin-bottom: 44px; border-bottom: 3px solid var(--accent); } :root > body > header > div { max-width: 740px; margin: 0 auto; padding: 0 24px; } :root > body > header h1 { font-family: var(--fh), Cambria, serif; font-size: 38px; font-weight: 400; color: var(--bg); line-height: 1.14; margin-bottom: 8px; letter-spacing: -0.005em; } :root > body > header p { font-family: var(--fb), system-ui, sans-serif; font-size: 14.5px; color: rgba(242, 237, 220, .82); max-width: 660px; font-style: italic; } :root > body > header a { font-family: var(--fh), Cambria, serif; font-size: 26px; color: var(--bg); text-decoration: none; font-weight: 400; } :root main { max-width: 740px; margin: 0 auto; padding: 0 24px 70px; } :root main > h1 { font-family: var(--fh), Cambria, serif; font-size: 34px; font-weight: 400; color: var(--primary); line-height: 1.18; margin: 6px 0 6px; letter-spacing: -0.005em; } :root main > time { display: block; font-family: var(--fb), system-ui, sans-serif; font-size: 12px; color: var(--accent); margin-bottom: 30px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; } :root main > article > p { margin-bottom: 1.5em; line-height: 1.8; font-size: 16.5px; } :root main > article > h2 { font-family: var(--fh), Cambria, serif; font-size: 25px; font-weight: 700; color: var(--primary); margin-top: 2.75em; margin-bottom: 0.75em; padding-bottom: 6px; border-bottom: 1px solid var(--accent); letter-spacing: -0.005em; } /* === R2 fixes (2026-06-12T17:10:05.776524+00:00) === */ /* article p: line-height + margin-bottom for narrative readability */ article p { line-height: 1.8; margin-bottom: 1.5em; } /* article h2: breathing room before section headers + strong weight */ article h2 { margin-top: 2.75em; margin-bottom: 0.6em; font-weight: 700; } /* .comparison-table: downgrade to secondary element within narrative flow */ .comparison-table { font-size: 0.88em; max-width: 85%; margin: 1.5em auto; opacity: 0.9; } /* .comparison-table th: small-caps reference style */ .comparison-table th { background-color: rgba(0,0,0,0.05); font-size: 0.82em; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.5em 0.8em; } /* .comparison-table td: subtle cell separation */ .comparison-table td { padding: 0.5em 0.8em; font-size: 0.9em; border-bottom: 1px solid rgba(0,0,0,0.07); } /* .astro-l6tTqxi5 (disclaimer): footnote-style, non-disruptive */ .astro-l6tTqxi5 { font-size: 0.78em; color: #999; background: transparent; border: none; padding: 0; margin-top: 2.5em; font-style: italic; } /* .crd-related-list: breathing room between related article links */ .crd-related-list { display: flex; flex-direction: column; gap: 0.4em; margin-top: 0.5em; } /* .crd-related-link: block style with left-border presence */ .crd-related-link { display: block; padding: 0.65em 1em; background-color: var(--paper2); border-left: 3px solid var(--accent); border-radius: 6px; text-decoration: none; font-size: 0.93em; transition: background-color 0.15s; } :root main > article ul, :root main > article ol { margin: 0 0 18px 24px; } :root main > article li { margin-bottom: 6px; font-size: 16px; } :root main > article li strong { color: var(--primary); font-weight: 700; } :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: 600; } :root main > article > p a:hover { color: var(--accent); text-decoration-color: var(--primary); } :root main > article > p a[href^="/ref/"], :root main > article > p a[href^="/try/"], :root main > article > p a[href^="/check/"], :root main > article > p a[href^="/partner/"], :root main > article > p a[href^="/go/"], :root main > article > p a[href^="/out/"], :root main > article > p a[href^="/view/"], :root main > article > p a[href^="/choice/"] { background: var(--accent); color: var(--bg); padding: 4px 14px; border-radius: var(--r); text-decoration: none; font-weight: 700; font-family: var(--fh), Cambria, serif; font-size: 14.5px; letter-spacing: .02em; } :root main > article > p a[href^="/ref/"]:hover, :root main > article > p a[href^="/try/"]:hover, :root main > article > p a[href^="/check/"]:hover, :root main > article > p a[href^="/partner/"]:hover, :root main > article > p a[href^="/go/"]:hover, :root main > article > p a[href^="/out/"]:hover, :root main > article > p a[href^="/view/"]:hover, :root main > article > p a[href^="/choice/"]:hover { background: var(--primary); color: var(--bg); } :root main > article > img, :root main > article > figure { margin: 0 0 28px; } :root main > article > img, :root main > article > figure > img { width: 100%; height: auto; display: block; border-radius: var(--r); box-shadow: 0 3px 14px rgba(20, 24, 31, .14); } /* (old flat homepage-card block removed — replaced by v.98f00c editorial grid below) */ :root footer { background: transparent; border-top: 1px solid var(--border); padding: 24px 0 36px; margin-top: 52px; text-align: center; font-family: var(--fb), system-ui, sans-serif; font-size: 12.5px; color: var(--fg); opacity: .60; letter-spacing: .03em; font-style: italic; } :root footer a { color: var(--fg); text-decoration: none; border-bottom: 1px dotted var(--border); font-style: normal; } :root footer a:hover { color: var(--primary); border-bottom-color: var(--primary); } /* === R3 fixes (2026-06-12T17:50:04.779564+00:00) === */ /* :root main > article > h3: visual presence matching H2 treatment for article-02 */ :root main > article > h3 { font-family: var(--fh), Cambria, serif; font-size: 20px; font-weight: 700; color: var(--primary); margin-top: 2.25em; margin-bottom: 0.5em; padding-bottom: 4px; border-bottom: 1px solid var(--accent); letter-spacing: -0.005em; } /* .astro-b1fTR6Pt (initial disclaimer): whisper treatment matching final disclaimer */ .astro-b1fTR6Pt { font-size: 0.78em; color: #999; background: transparent; border: none; padding: 0; margin-bottom: 1.8em; font-style: italic; } /* .astro-WLOQHPx8 article section ul: author page article list as flex column, no bullets */ .astro-WLOQHPx8 article section ul { list-style: none; padding-left: 0; margin-left: 0; display: flex; flex-direction: column; gap: 0.4em; margin-top: 0.5em; } /* .astro-WLOQHPx8 article section ul li a: block card with left-border, matches related-link style */ .astro-WLOQHPx8 article section ul li a { display: block; padding: 0.65em 1em; background-color: var(--paper2); border-left: 3px solid var(--accent); border-radius: 6px; text-decoration: none; font-size: 0.93em; transition: background-color 0.15s; } /* === R4 fixes (2026-06-12T18:30:05.571411+00:00) === */ /* .astro-EF9EEqo2 h3: navigation label style for "Artículos relacionados" — small-caps accent, not content heading */ .astro-EF9EEqo2 h3 { font-family: var(--fb), system-ui, sans-serif; font-size: 11px; color: var(--accent); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; margin-bottom: 0.75em; margin-top: 0; } /* ============================================================ v.98f00c — layout revision Editorial pass for yp-mat-es (Diario en la Esterilla). Photo masthead + Caudex-italic wordmark; homepage restructured hero -> Seleccion de Romina (picks) -> photo strip -> journal grid -> photo-band archive tail. Homepage rules scoped with main:not(:has(> article)); article page keeps its reading measure. Live assets front-image/essay-photo 404 for now -> navy/dark gradient + background-color fallback sits under every photo layer. Moment #B34F2A used x2 only: hero drop cap + picks-band rule. ============================================================ */ :root { --moment: #B34F2A; --paper: #F8F2E4; --paper2: #F3ECDA; } /* ---------- MASTHEAD (shared photo + gradient) ---------- */ :root > body > header { background-color: var(--primary); background-image: linear-gradient(150deg, rgba(35,45,74,.90), rgba(35,45,74,.66)), url("/theme-assets/front-image.jpg"); background-size: cover; background-position: center 42%; border-bottom: 3px solid var(--accent); box-shadow: none; } /* homepage masthead — full editorial block */ :root > body > header:has(h1) { padding: 0; margin-bottom: 52px; } :root > body > header:has(h1) > div { max-width: 1180px; padding: 64px 28px 54px; } :root > body > header:has(h1) h1 { font-family: var(--fh), Cambria, serif; font-style: italic; font-weight: 400; font-size: 54px; line-height: 1.03; letter-spacing: -.012em; color: #F7EFDF; margin: 0 0 12px; text-shadow: 0 2px 22px rgba(0,0,0,.32); } :root > body > header:has(h1) p { font-family: var(--fb), system-ui, sans-serif; font-style: normal; font-size: 15.5px; line-height: 1.6; color: rgba(247,239,223,.9); max-width: 640px; opacity: 1; margin: 0; } :root > body > header:has(h1) > div::after { content: "El salto de la esterilla al instructorado \2014 anotado sin gurus ni certezas."; display: block; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(196,144,96,.38); font-family: var(--fh), Cambria, serif; font-style: italic; font-weight: 400; font-size: 16px; letter-spacing: .01em; color: var(--accent); max-width: 640px; } /* article-page slim nav */ :root > body > header:has(a) { padding: 0; margin-bottom: 40px; } :root > body > header:has(a) > div { max-width: 860px; padding: 20px 28px; } :root > body > header:has(a) a { font-family: var(--fh), Cambria, serif; font-style: italic; font-weight: 400; font-size: 25px; color: #F7EFDF; text-decoration: none; letter-spacing: -.01em; } /* ================= HOMEPAGE ONLY ================= */ main:not(:has(> article)) { max-width: 1180px; padding: 0 28px 96px; } main:not(:has(> article)) > div:first-of-type { margin: 0; gap: 30px; } /* baseline journal card */ main:not(:has(> article)) > div:first-of-type > div { background: var(--paper); border: 1px solid rgba(61,80,120,.14); border-left: 1px solid rgba(61,80,120,.14); border-radius: 8px; box-shadow: 0 1px 4px rgba(61,80,120,.05); margin: 0; padding: 26px 32px 28px; display: flex; flex-direction: column; transition: transform .14s ease, box-shadow .14s ease; } main:not(:has(> article)) > div:first-of-type > div:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(61,80,120,.12); border-left-color: rgba(61,80,120,.14); } main:not(:has(> article)) > div:first-of-type > div > p:first-child { font-family: var(--fb), system-ui, sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; line-height: 1.4; } main:not(:has(> article)) > div:first-of-type > div > h2 { font-family: var(--fh), Cambria, serif; font-style: normal; font-weight: 700; font-size: 21px; line-height: 1.24; margin: 0 0 12px; border: 0; padding: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } main:not(:has(> article)) > div:first-of-type > div > h2 a { color: var(--primary); text-decoration: none; } main:not(:has(> article)) > div:first-of-type > div > h2 a:hover { color: var(--accent); } main:not(:has(> article)) > div:first-of-type > div > p:nth-of-type(2) { font-family: var(--fb), system-ui, sans-serif; font-size: 15px; line-height: 1.6; color: var(--fg); opacity: .82; margin: 0 0 18px; max-width: 62ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } main:not(:has(> article)) > div:first-of-type > div > a:last-child { margin-top: auto; align-self: flex-start; background: var(--primary); color: #F7EFDF; font-family: var(--fb), system-ui, sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding: 9px 20px; border-radius: 999px; text-decoration: none; border: 1px solid var(--primary); transition: background .14s ease, color .14s ease; } main:not(:has(> article)) > div:first-of-type > div > a:last-child:hover { background: var(--accent); color: var(--primary); border-color: var(--accent); } /* ---- HERO (card 1) ---- */ main:not(:has(> article)) > div:first-of-type > div:nth-child(1) { position: relative; overflow: hidden; background: #F7EFDF; border: 1px solid rgba(61,80,120,.18); border-radius: 12px; box-shadow: 0 4px 22px rgba(61,80,120,.10); padding: 46px 54px 48px; } main:not(:has(> article)) > div:first-of-type > div:nth-child(1)::after { content: "N.\00BA I"; position: absolute; top: 28px; right: 40px; font-family: var(--fh), Cambria, serif; font-style: italic; font-weight: 400; font-size: 44px; color: rgba(61,80,120,.13); pointer-events: none; } main:not(:has(> article)) > div:first-of-type > div:nth-child(1) > p:first-child { font-size: 12px; letter-spacing: .2em; color: var(--primary); margin-bottom: 16px; } main:not(:has(> article)) > div:first-of-type > div:nth-child(1) > p:first-child::before { content: "Ultima entrada \00B7 Por Romina Castano \00B7 "; } main:not(:has(> article)) > div:first-of-type > div:nth-child(1) > h2 { font-family: var(--fh), Cambria, serif; font-style: italic; font-weight: 400; font-size: 46px; line-height: 1.08; letter-spacing: -.01em; max-width: 16ch; margin-bottom: 18px; -webkit-line-clamp: 4; } main:not(:has(> article)) > div:first-of-type > div:nth-child(1) > p:nth-of-type(2) { font-size: 20px; line-height: 1.5; opacity: .9; max-width: 60ch; margin-bottom: 24px; -webkit-line-clamp: 4; } main:not(:has(> article)) > div:first-of-type > div:nth-child(1) > p:nth-of-type(2)::first-letter { font-family: var(--fh), Cambria, serif; font-weight: 700; font-size: 62px; line-height: .8; float: left; padding: 6px 12px 0 0; color: var(--moment); } main:not(:has(> article)) > div:first-of-type > div:nth-child(1) > a:last-child { background: transparent; color: var(--primary); border: 1.5px solid var(--primary); padding: 11px 26px; font-size: 12.5px; } main:not(:has(> article)) > div:first-of-type > div:nth-child(1) > a:last-child:hover { background: var(--primary); color: #F7EFDF; border-color: var(--primary); } /* ---- PICKS band (cards 2-4) ---- */ main:not(:has(> article)) > div:first-of-type > div:nth-child(2), main:not(:has(> article)) > div:first-of-type > div:nth-child(3), main:not(:has(> article)) > div:first-of-type > div:nth-child(4) { background: var(--paper2); border-top: 3px solid var(--accent); } main:not(:has(> article)) > div:first-of-type > div:nth-child(2)::before { content: "Seleccion de Romina \00B7 empieza por aqui"; display: block; font-family: var(--fb), system-ui, sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--primary); padding-bottom: 13px; margin: 0 0 20px; border-bottom: 2px solid var(--moment); } /* ---- STRIP 1: photo band before the journal (card 5) ---- */ main:not(:has(> article)) > div:first-of-type > div:nth-child(5)::before { content: "En orden de escritura"; display: flex; align-items: center; justify-content: center; min-height: 188px; margin: 0 0 8px; border-radius: 10px; background-color: #232d4a; background-image: linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.25)), url("/theme-assets/essay-photo.jpg"); background-size: cover; background-position: center 30%; font-family: var(--fb), system-ui, sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .32em; text-transform: uppercase; color: #F7EFDF; text-shadow: 0 1px 6px rgba(0,0,0,.55); } /* ---- ARCHIVE TAIL: photo band (strip 2) + magazine index ---- */ main:not(:has(> article)) > div:last-of-type { display: grid; grid-template-columns: 1fr; column-gap: 16px; row-gap: 14px; background: var(--paper2); border: 1px solid rgba(61,80,120,.12); border-radius: 12px; box-shadow: 0 1px 4px rgba(61,80,120,.05); padding: 0 40px 34px; margin: 88px 0 0; overflow: hidden; } main:not(:has(> article)) > div:last-of-type::before { content: "Mas entradas"; grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; min-height: 210px; margin: 0 -40px 26px; border-radius: 12px 12px 0 0; background-color: #232d4a; background-image: linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.25)), url("/theme-assets/essay-photo.jpg"); background-size: cover; background-position: center 70%; font-family: var(--fb), system-ui, sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .32em; text-transform: uppercase; color: #F7EFDF; text-shadow: 0 1px 6px rgba(0,0,0,.55); } main:not(:has(> article)) > div:last-of-type > a { display: block; background: var(--paper); border: 1px solid rgba(61,80,120,.14); border-radius: 8px; box-shadow: 0 1px 4px rgba(61,80,120,.05); padding: 18px 20px; margin: 0; break-inside: avoid; font-family: var(--fh), Cambria, serif; font-weight: 500; font-size: 15px; line-height: 1.4; color: var(--primary); text-decoration: none; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; } main:not(:has(> article)) > div:last-of-type > a:hover { color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(61,80,120,.12); border-color: rgba(61,80,120,.22); } /* ---- DESKTOP GRID (>= 880px) ---- */ @media (min-width: 880px) { main:not(:has(> article)) > div:first-of-type { display: grid; grid-template-columns: repeat(6, 1fr); column-gap: 30px; row-gap: 46px; align-items: stretch; } main:not(:has(> article)) > div:first-of-type > div:nth-child(1) { grid-column: 1 / -1; } main:not(:has(> article)) > div:first-of-type > div:nth-child(1) > h2 { font-size: 54px; } main:not(:has(> article)) > div:first-of-type > div:nth-child(2), main:not(:has(> article)) > div:first-of-type > div:nth-child(3), main:not(:has(> article)) > div:first-of-type > div:nth-child(4) { grid-column: span 2; margin-top: 74px; } main:not(:has(> article)) > div:first-of-type > div:nth-child(2) { position: relative; } main:not(:has(> article)) > div:first-of-type > div:nth-child(2)::before { position: absolute; top: -52px; left: 0; width: calc(300% + 60px); margin: 0; } main:not(:has(> article)) > div:first-of-type > div:nth-child(n+5) { grid-column: span 3; } main:not(:has(> article)) > div:first-of-type > div:nth-child(5), main:not(:has(> article)) > div:first-of-type > div:nth-child(6) { margin-top: 250px; } main:not(:has(> article)) > div:first-of-type > div:nth-child(5) { position: relative; } main:not(:has(> article)) > div:first-of-type > div:nth-child(5)::before { position: absolute; top: -232px; left: 0; width: calc(200% + 30px); min-height: 188px; margin: 0; } main:not(:has(> article)) > div:last-of-type { grid-template-columns: repeat(3, 1fr); } } /* ---- MOBILE (< 880px) ---- */ @media (max-width: 879px) { main:not(:has(> article)) > div:first-of-type > div:nth-child(1) { padding: 32px 26px 34px; } main:not(:has(> article)) > div:first-of-type > div:nth-child(1) > h2 { font-size: 32px; } main:not(:has(> article)) > div:first-of-type > div:nth-child(1) > p:nth-of-type(2) { font-size: 17px; } main:not(:has(> article)) > div:first-of-type > div:nth-child(1)::after { display: none; } } /* ================= ARTICLE PAGE refinements ================= */ main:has(> article) > h1 { font-family: var(--fh), Cambria, serif; font-style: italic; font-weight: 400; font-size: 40px; line-height: 1.12; letter-spacing: -.012em; color: var(--primary); margin: 6px 0 8px; } main:has(> article) > time { color: var(--accent); letter-spacing: .16em; } /* drop cap on opening prose paragraph (after lead image; navy keeps moment to 2 uses) */ main:has(> article) > article > [role="img"] + p::first-letter { font-family: var(--fh), Cambria, serif; font-weight: 700; font-size: 56px; line-height: .82; float: left; padding: 6px 12px 0 0; color: var(--primary); } /* dinkus dividers between sections (skip the first h2) */ main:has(> article) > article > h2 { border-bottom: 0; padding-bottom: 0; } main:has(> article) > article > h2:nth-of-type(n+2)::before { content: "\273D \273D \273D"; display: block; text-align: center; color: var(--accent); font-size: 15px; letter-spacing: .5em; font-weight: 400; margin: 12px 0 22px; } /* ---- glossary / data table: signature navy + rust treatment ---- */ main:has(> article) > article table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 28px 0 32px; font-family: var(--fb), system-ui, sans-serif; font-size: 15px; line-height: 1.55; border: 1px solid rgba(61,80,120,.16); border-radius: 10px; overflow: hidden; box-shadow: 0 1px 6px rgba(61,80,120,.06); } main:has(> article) > article table thead th { background: var(--primary); color: #F7EFDF; font-family: var(--fb), system-ui, sans-serif; font-weight: 700; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; text-align: left; padding: 13px 16px; border: 0; } main:has(> article) > article table tbody td { padding: 12px 16px; border-top: 1px solid rgba(61,80,120,.12); vertical-align: top; background: var(--paper); } main:has(> article) > article table tbody tr:nth-child(even) td { background: var(--paper2); } main:has(> article) > article table tbody td:first-child { font-family: var(--fh), Cambria, serif; font-weight: 700; color: var(--primary); white-space: nowrap; } main:has(> article) > article table tbody td strong { color: var(--primary); } main:has(> article) > article table a { color: var(--accent); text-decoration: none; font-weight: 700; } main:has(> article) > article table a:hover { color: var(--primary); } @media (max-width: 879px) { main:has(> article) > article table { font-size: 13.5px; } main:has(> article) > article table thead th, main:has(> article) > article table tbody td { padding: 9px 10px; } main:has(> article) > article table tbody td:first-child { white-space: normal; } } /* 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; } } /* === codex refix iter=1 (surgical) === */ /* M1 — related-articles link chips must be warm paper, never white. Article-02 wraps them in a plain
(main > div); the author page uses