*{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}
.page-d6cfc0{max-width:640px;margin:0 auto;padding:0 20px}
.footer-b5b09a{padding:60px 0 40px;border-bottom:1px solid #ccc;margin-bottom:48px}
.footer-b5b09a h1{font-size:24px;font-weight:400;letter-spacing:-.5px}
.footer-b5b09a p{font-size:14px;color:#777;margin-top:6px;font-style:italic}
.footer-b5b09a a{color:#2a2a2a;text-decoration:none;font-size:24px;font-weight:400;letter-spacing:-.5px}
.content-a2ee63{padding:20px 0}
.content-a2ee63 h2{font-size:18px;font-weight:400;margin-bottom:4px}
.content-a2ee63 h2 a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.content-a2ee63 h2 a:hover{border-bottom-color:#2a2a2a}
.content-a2ee63 .content-3e4022{font-size:12px;color:#aaa;margin-bottom:6px}
.content-a2ee63 p{font-size:14px;color:#666}
.sidebar-62c628{color:#888;font-size:13px;text-decoration:none}
.sidebar-62c628:hover{color:#2a2a2a}
.widget-7f6d34{padding-bottom:60px}
.widget-7f6d34 h1{font-size:28px;font-weight:400;margin-bottom:8px}
.widget-7f6d34 .content-3e4022{font-size:12px;color:#aaa;display:block;margin-bottom:32px}
.widget-7f6d34 h2{font-size:21px;font-weight:400;margin:40px 0 12px;border-bottom:1px solid #eee;padding-bottom:6px}
.widget-7f6d34 h3{font-size:17px;margin:28px 0 8px}
.widget-7f6d34 p{margin-bottom:18px;font-size:16px}
.widget-7f6d34 ul,.widget-7f6d34 ol{margin:0 0 18px 20px}
.widget-7f6d34 a{color:#555;border-bottom:1px solid #ccc}
.widget-7f6d34 a:hover{color:#000;border-bottom-color:#000}
.widget-7f6d34 img{max-width:100%;height:auto;margin:24px 0}
.header-647b57{border-top:1px solid #ddd;padding:20px 0;margin-top:48px;text-align:center;font-size:12px;color:#aaa}
.header-647b57 a{color:#aaa;text-decoration:none}
.main-4d5fe1{padding:0 0 16px;margin-bottom:24px;font-size:12px;color:#aaa;font-style:italic;border-bottom:1px solid #eee}
.block-a95e1d{padding:16px 0 0;margin-top:32px;font-size:11px;color:#999;border-top:1px solid #eee}
.nav-b333e7{font-size:12px;color:#aaa;margin:-26px 0 32px;font-weight:300}
.section-cdd91e{margin:0 auto 32px;max-width:720px}
.frame-fc8d59{width:100%;height:auto}
.content-f26632{margin-top:40px;padding-top:20px;border-top:1px solid #eee;font-size:14px;color:#888}
.content-f26632 em{color:#aaa}
.content-f26632 a{color:#555;border-bottom:1px solid #ddd;text-decoration:none}
.nav-ef7e8a{padding:24px 0 0;border-top:1px solid #eee;margin-top:24px}
.nav-ef7e8a p{padding:3px 0;margin:0;font-size:15px}
.nav-ef7e8a a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.nav-ef7e8a a:hover{border-bottom-color:#2a2a2a}
/* === Theme === */
:root{--primary:#3D5C70;--accent:#D49A60;--bg:#F5EDD8;--fg:#0F1820;--border:#C0B89C;--r:7px;--fb:'Rubik';--fh:'Caudex'}
/* === Custom === */
/* v.76eae2 — layout revision */

/* ---- Fonts declared as @font-face (pipeline drops a leading @import) ---- */
@font-face { font-family: 'Caudex'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/caudex/v19/esDQ311QOP6BJUr4zfKB.woff2) format('woff2'); }
@font-face { font-family: 'Caudex'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/caudex/v19/esDT311QOP6BJUrwdteUkp8D.woff2) format('woff2'); }
@font-face { font-family: 'Caudex'; font-style: italic; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/caudex/v19/esDS311QOP6BJUr4yMKDtbo.woff2) format('woff2'); }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(https://fonts.gstatic.com/s/rubik/v31/iJWKBXyIfDnIV7nBrXw.woff2) format('woff2'); }

/* ============================================================= *
 *  Landratte Logbuch — sf-see-de
 *  navy #3D5C70 · honey #D49A60 · parchment #F5EDD8 · moment #8B6B47
 * ============================================================= */

: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; }

/* ---- compass-rose signature (shared data-URI) ---- */

/* ============================================================= *
 *  MASTHEAD  (shared: home = h1+p, article = single <a>)
 * ============================================================= */
:root > body > header { max-width: none; margin: 0 0 56px; padding: 66px 24px 58px; position: relative; overflow: hidden; text-align: center; border-bottom: 3px solid var(--accent); background: linear-gradient(rgba(28,40,52,.74), rgba(28,40,52,.52)), url("/theme-assets/top-image.jpg") center 42%/cover no-repeat; }
:root > body > header::after { content: ""; position: absolute; top: 20px; right: 26px; width: 62px; height: 62px; opacity: .8; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='47' fill='none' stroke='%23D49A60' stroke-width='1.6'/%3E%3Ccircle cx='50' cy='50' r='36' fill='none' stroke='%23D49A60' stroke-width='.8' opacity='.7'/%3E%3Cpolygon points='50,7 57,43 93,50 57,57 50,93 43,57 7,50 43,43' fill='%23F5EDD8'/%3E%3Cpolygon points='50,7 53,47 50,50 47,47' fill='%23D49A60'/%3E%3Ccircle cx='50' cy='50' r='3' fill='%23D49A60'/%3E%3C/svg%3E") center/contain no-repeat; }

:root > body > header > h1, :root > body > header h1 { max-width: 860px; margin: 0 auto 12px; padding: 0; font-family: var(--fh), Cambria, serif; font-style: italic; font-size: 44px; font-weight: 700; color: var(--bg); line-height: 1.1; letter-spacing: .01em; text-shadow: 0 2px 14px rgba(12,18,26,.45); }
:root > body > header > p, :root > body > header p { max-width: 620px; margin: 0 auto; padding: 0; font-family: var(--fb), system-ui, sans-serif; font-size: 14.5px; color: rgba(245,237,216,.9); font-style: italic; line-height: 1.6; text-shadow: 0 1px 8px rgba(12,18,26,.4); }
:root > body > header > a { display: inline-block; max-width: none; margin: 0 auto; padding: 0; font-family: var(--fh), Cambria, serif; font-style: italic; font-size: 27px; color: var(--bg); text-decoration: none; font-weight: 700; text-shadow: 0 2px 12px rgba(12,18,26,.45); }
:root > body > header > a:hover { color: var(--accent); }

/* ============================================================= *
 *  HOMEPAGE LAYOUT
 *  scope: main = the single <main>, and NOT an article page
 * ============================================================= */
:root main:nth-of-type(1):not(:has(> article)) { max-width: 1120px; margin: 0 auto; padding: 0 28px 84px; display: grid; grid-template-columns: repeat(6, 1fr); column-gap: 24px; row-gap: 46px; position: relative; }

/* ---- shared card look (hero, picks, journal — every div with h2>a) ---- */
:root main:nth-of-type(1):not(:has(> article)) > div:has(> h2 > a) { grid-column: span 3; display: flex; flex-direction: column; background: #FBF6EA; border: 1px solid rgba(61,92,112,.16); border-radius: 9px; padding: 28px 32px; box-shadow: 0 1px 5px rgba(15,24,32,.05); transition: box-shadow .16s ease, transform .12s ease; }
:root main:nth-of-type(1):not(:has(> article)) > div:has(> h2 > a):hover { box-shadow: 0 6px 20px rgba(15,24,32,.1); transform: translateY(-2px); }

:root main:nth-of-type(1):not(:has(> article)) > div:has(> h2 > a) > p:first-of-type { order: -1; font-family: var(--fb), system-ui, sans-serif; font-size: 11.5px; color: var(--accent); letter-spacing: .18em; text-transform: uppercase; font-weight: 600; margin: 0 0 12px; line-height: 1.4; }
:root main:nth-of-type(1):not(:has(> article)) > div:has(> h2 > a) > h2 { font-family: var(--fh), Cambria, serif; font-size: 21px; font-weight: 700; line-height: 1.24; margin: 0 0 12px; padding: 0; border: 0; }
:root main:nth-of-type(1):not(:has(> article)) > div:has(> h2 > a) > h2 a { color: var(--primary); text-decoration: none; }
:root main:nth-of-type(1):not(:has(> article)) > div:has(> h2 > a) > h2 a:hover { color: var(--accent); }
:root main:nth-of-type(1):not(:has(> article)) > div:has(> h2 > a) > p:nth-of-type(2) { font-family: var(--fb), system-ui, sans-serif; font-size: 15px; line-height: 1.62; color: rgba(15,24,32,.82); margin: 0 0 18px; max-width: 62ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
:root main:nth-of-type(1):not(:has(> article)) > div:has(> h2 > a) > a:last-of-type { margin-top: auto; align-self: flex-start; font-family: var(--fb), system-ui, sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--primary); background: transparent; padding: 0; text-decoration: none; border-bottom: 1.5px solid var(--accent); }
:root main:nth-of-type(1):not(:has(> article)) > div:has(> h2 > a) > a:last-of-type:hover { color: var(--accent); border-bottom-color: var(--primary); }

/* ---- HERO (card 1): the loud voice ---- */
:root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(1) { grid-column: 1 / -1; position: relative; padding: 44px 220px 44px 46px; border: 1px solid rgba(61,92,112,.18); border-left: 5px solid #8B6B47; background: #FBF6EA; box-shadow: 0 2px 12px rgba(15,24,32,.07); }
:root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(1)::before { content: "NEUESTER LOGBUCH-EINTRAG"; display: inline-block; align-self: flex-start; margin: 0 0 18px; padding: 5px 13px; background: var(--accent); color: var(--bg); font-family: var(--fb), system-ui, sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: .2em; border-radius: 20px; }
:root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(1)::after { content: ""; position: absolute; top: 50%; right: 46px; width: 148px; height: 148px; transform: translateY(-50%); opacity: .12; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='47' fill='none' stroke='%233D5C70' stroke-width='1.6'/%3E%3Ccircle cx='50' cy='50' r='36' fill='none' stroke='%233D5C70' stroke-width='.8'/%3E%3Cpolygon points='50,7 57,43 93,50 57,57 50,93 43,57 7,50 43,43' fill='%233D5C70'/%3E%3C/svg%3E") center/contain no-repeat; }
:root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(1) > p:first-of-type { font-size: 12px; color: var(--accent); letter-spacing: .16em; margin: 0 0 16px; }
:root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(1) > p:first-of-type::after { content: " · DANIEL FUCHS, KÖLN-SÜLZ · KW 19"; color: rgba(15,24,32,.5); }
:root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(1) > h2 { font-size: 42px; line-height: 1.12; margin: 0 0 18px; max-width: 15ch; }
:root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(1) > p:nth-of-type(2) { font-size: 19px; line-height: 1.55; color: rgba(15,24,32,.86); max-width: 46ch; -webkit-line-clamp: 4; }
:root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(1) > p:nth-of-type(2)::first-letter { font-family: var(--fh), Cambria, serif; font-weight: 700; color: #8B6B47; font-size: 58px; line-height: .8; float: left; margin: 6px 12px 0 0; }
:root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(1) > a:last-of-type { margin-top: 6px; padding: 10px 22px; border: 1.5px solid var(--primary); border-radius: 24px; font-size: 13px; letter-spacing: .06em; }
:root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(1) > a:last-of-type:hover { background: var(--primary); color: var(--bg); border-color: var(--primary); }

/* ---- EDITOR'S PICKS band (cards 2-4): 3-up + full-row label ---- */
:root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(2),
:root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(3),
:root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(4) { grid-column: span 2; margin-top: 58px; position: relative; }
:root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(2)::before { content: "STEUERKURS — DIESE DREI ZUERST"; position: absolute; left: 0; bottom: calc(100% + 14px); width: calc(300% + 48px); font-family: var(--fb), system-ui, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .2em; color: var(--primary); text-transform: uppercase; padding-bottom: 10px; border-bottom: 1px solid rgba(61,92,112,.28); }

/* ---- JOURNAL LEAD (card 5): full-width + Strip 1 photo band ---- */
:root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(5) { grid-column: 1 / -1; padding: 0 34px 32px; overflow: hidden; }
:root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(5)::before { content: "DAS JOURNAL — AKTUELLSTE ZUERST"; display: flex; align-items: center; justify-content: center; height: 196px; margin: 0 -34px 28px; background: linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.25)), url("/theme-assets/story-cover.jpg") center 30%/cover no-repeat; color: #F5EDD8; font-family: var(--fb), system-ui, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
:root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(5) > h2 { font-size: 27px; max-width: 22ch; }
:root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(5) > p:nth-of-type(2) { font-size: 16.5px; max-width: 70ch; -webkit-line-clamp: 3; }

/* ---- JOURNAL grid (cards 6+): 2-up (span 3 in 6-col) — default card look applies ---- */
/* fill the trailing lone card so no half-empty full-width row remains */
:root main:nth-of-type(1):not(:has(> article)) > div:has(> h2 > a):nth-last-of-type(2):nth-of-type(even) { grid-column: 1 / -1; position: relative; padding-right: 210px; }
:root main:nth-of-type(1):not(:has(> article)) > div:has(> h2 > a):nth-last-of-type(2):nth-of-type(even)::after { content: ""; position: absolute; top: 50%; right: 44px; width: 128px; height: 128px; transform: translateY(-50%); opacity: .1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='47' fill='none' stroke='%233D5C70' stroke-width='1.6'/%3E%3Ccircle cx='50' cy='50' r='36' fill='none' stroke='%233D5C70' stroke-width='.8'/%3E%3Cpolygon points='50,7 57,43 93,50 57,57 50,93 43,57 7,50 43,43' fill='%233D5C70'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ============================================================= *
 *  COMPACT ARCHIVE TAIL (last div, no h2) + Strip 2
 * ============================================================= */
:root main:nth-of-type(1):not(:has(> article)) > div:not(:has(> h2)) { grid-column: 1 / -1; margin-top: 8px; padding: 0 34px 34px; overflow: hidden; background: var(--bg); border: 1px solid rgba(61,92,112,.16); border-radius: 9px; box-shadow: 0 1px 5px rgba(15,24,32,.05); display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 16px; align-items: stretch; }
:root main:nth-of-type(1):not(:has(> article)) > div:not(:has(> h2))::before { content: "DAS ARCHIV"; grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; height: 208px; margin: 0 -34px 30px; background: linear-gradient(rgba(20,24,28,.6), rgba(20,24,28,.3)), url("/theme-assets/story-cover.jpg") center 70%/cover no-repeat; color: #F5EDD8; font-family: var(--fb), system-ui, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
/* boxed cream archive cards — same paper/border/radius/shadow/hover as the journal cards above */
:root main:nth-of-type(1):not(:has(> article)) > div:not(:has(> h2)) > p { margin: 0; display: flex; align-items: center; background: #FBF6EA; border: 1px solid rgba(61,92,112,.16); border-radius: 8px; box-shadow: 0 1px 4px rgba(15,24,32,.05); padding: 18px 20px; transition: box-shadow .16s ease, transform .12s ease; }
:root main:nth-of-type(1):not(:has(> article)) > div:not(:has(> h2)) > p:hover { box-shadow: 0 6px 18px rgba(15,24,32,.1); transform: translateY(-2px); }
:root main:nth-of-type(1):not(:has(> article)) > div:not(:has(> h2)) a { color: var(--primary); text-decoration: none; border-bottom: 0; font-family: var(--fh), Cambria, serif; font-size: 14.5px; font-weight: 600; line-height: 1.42; letter-spacing: 0; }
:root main:nth-of-type(1):not(:has(> article)) > div:not(:has(> h2)) a:hover { color: var(--accent); }

/* ============================================================= *
 *  ARTICLE PAGE  (main with a direct <article>)
 * ============================================================= */
:root main:has(> article) { max-width: 760px; margin: 0 auto; padding: 0 24px 72px; }
:root main:has(> article) > h1 { font-family: var(--fh), Cambria, serif; font-size: 39px; font-weight: 700; color: var(--primary); line-height: 1.16; margin: 8px 0 10px; }
:root main:has(> article) > span, :root main:has(> article) > time { display: block; font-family: var(--fb), system-ui, sans-serif; font-size: 12px; color: var(--accent); margin-bottom: 34px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
:root main:has(> article) > span::after { content: " · LOGBUCH VON DANIEL FUCHS"; color: rgba(15,24,32,.45); }

:root main:has(> article) > article > p { margin-bottom: 20px; font-size: 18.5px; line-height: 1.78; }
:root main:has(> article) > article > p:first-of-type::first-letter { font-family: var(--fh), Cambria, serif; font-weight: 700; color: #8B6B47; font-size: 62px; line-height: .8; float: left; margin: 7px 12px 0 0; }
:root main:has(> article) > article > h2 { font-family: var(--fh), Cambria, serif; font-size: 27px; font-weight: 700; color: var(--primary); margin: 1.7em 0 .5em; padding: 0; border: 0; text-align: center; }
:root main:has(> article) > article > h2::before { content: "✦ ✦ ✦"; display: block; margin: 0 auto .7em; color: var(--accent); font-size: 15px; letter-spacing: .5em; font-weight: 400; }
:root main:has(> article) > article > h2:first-of-type { margin-top: .6em; }
:root main:has(> article) > article > h2:first-of-type::before { content: none; }
:root main:has(> article) > article > h3 { font-family: var(--fh), Cambria, serif; font-size: 18px; font-weight: 600; color: var(--primary); margin: 26px 0 10px; }
:root main:has(> article) > article ul, :root main:has(> article) > article ol { margin: 0 0 20px 24px; }
:root main:has(> article) > article li { margin-bottom: 8px; font-size: 17px; line-height: 1.7; }
:root main:has(> article) > article li strong, :root main:has(> article) > article > p strong { color: var(--primary); font-weight: 600; }
:root main:has(> article) > article blockquote { position: relative; border-left: 3px solid var(--accent); padding: 8px 0 8px 40px; margin: 26px 0; font-style: italic; font-size: 19px; color: var(--primary); }
:root main:has(> article) > article blockquote::before { content: "\201C"; position: absolute; left: 6px; top: -6px; font-family: var(--fh), Cambria, serif; font-size: 52px; color: var(--accent); line-height: 1; }

:root main:has(> article) > article > img { width: 100%; height: auto; display: block; border-radius: var(--r); box-shadow: 0 3px 14px rgba(15,24,32,.12); margin: 0 0 30px; }

/* disclaimer / aside block */
:root main:has(> article) > article > div:has(> em) { background: rgba(139,107,71,.09); border-left: 3px solid #8B6B47; border-radius: 0 var(--r) var(--r) 0; padding: 14px 20px; margin: 26px 0; font-size: 14px; line-height: 1.6; color: rgba(15,24,32,.85); font-family: var(--fb), system-ui, sans-serif; }
:root main:has(> article) > article > div:has(> em) em { color: #8B6B47; font-weight: 600; font-style: normal; }

/* body links */
:root main:has(> article) > article > p a, :root main:has(> article) > article > p a:visited, :root main:has(> article) > article li a { color: var(--primary); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; text-decoration-thickness: 1px; font-weight: 400; }
:root main:has(> article) > article > p a:hover { color: var(--accent); }

/* affiliate CTA — full element path + attr so it out-specifies the body-link rule */
:root main:has(> article) > article > p a[href^="/to/"], :root main:has(> article) > article > p a[href^="/ref/"], :root main:has(> article) > article > p a[href^="/try/"], :root main:has(> article) > article > p a[href^="/check/"], :root main:has(> article) > article > p a[href^="/partner/"], :root main:has(> article) > article > p a[href^="/go/"], :root main:has(> article) > article > p a[href^="/view/"], :root main:has(> article) > article > li a[href^="/to/"], :root main:has(> article) > article li a[href^="/to/"] { background: var(--accent); color: var(--bg); padding: 2px 11px; border-radius: var(--r); text-decoration: none; font-weight: 600; font-family: var(--fh), Cambria, serif; font-size: 15px; letter-spacing: .02em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
:root main:has(> article) > article > p a[href^="/to/"]:hover, :root main:has(> article) > article > p a[href^="/ref/"]:hover, :root main:has(> article) > article > p a[href^="/try/"]:hover, :root main:has(> article) > article > p a[href^="/check/"]:hover, :root main:has(> article) > article > p a[href^="/partner/"]:hover, :root main:has(> article) > article > p a[href^="/go/"]:hover, :root main:has(> article) > article > p a[href^="/view/"]:hover, :root main:has(> article) > article li a[href^="/to/"]:hover { background: var(--primary); color: var(--bg); }

/* related-articles nav (was an unstyled link run) */
:root main:has(> article) > nav { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--border); font-family: var(--fb), system-ui, sans-serif; font-size: 14.5px; }
:root main:has(> article) > nav em { color: var(--accent); font-style: normal; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 600; }
:root main:has(> article) > nav a { color: var(--primary); text-decoration: none; border-bottom: 1px solid var(--border); }
:root main:has(> article) > nav a:hover { border-bottom-color: var(--primary); }

/* ============================================================= *
 *  FOOTER
 * ============================================================= */
:root footer { background: transparent; border-top: 1px solid var(--border); padding: 24px 24px 36px; margin-top: 56px; text-align: center; font-family: var(--fb), system-ui, sans-serif; font-size: 12px; color: var(--fg); opacity: .6; letter-spacing: .04em; }
: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: 680px) {
  :root main:nth-of-type(1):not(:has(> article)) { grid-template-columns: 1fr; row-gap: 34px; padding: 0 18px 60px; }
  :root main:nth-of-type(1):not(:has(> article)) > div:has(> h2 > a) { grid-column: 1 / -1; }
  :root main:nth-of-type(1):not(:has(> article)) > div:has(> h2 > a):nth-last-of-type(2):nth-of-type(even) { padding-right: 32px; }
  :root main:nth-of-type(1):not(:has(> article)) > div:has(> h2 > a):nth-last-of-type(2):nth-of-type(even)::after { display: none; }
  :root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(1) { padding: 34px 26px; }
  :root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(1)::after { display: none; }
  :root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(1) > h2 { font-size: 31px; max-width: none; }
  :root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(1) > p:nth-of-type(2) { font-size: 17px; max-width: none; }
  :root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(2),
  :root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(3),
  :root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(4) { grid-column: 1 / -1; margin-top: 0; }
  :root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(2)::before { position: static; width: auto; display: block; margin-bottom: 16px; }
  :root main:nth-of-type(1):not(:has(> article)) > div:not(:has(> h2)) { grid-template-columns: 1fr; padding: 0 18px 22px; }
  :root main:nth-of-type(1):not(:has(> article)) > div:not(:has(> h2))::before { margin: 0 -18px 22px; height: 150px; }
  :root > body > header { padding: 48px 20px 42px; }
  :root > body > header > h1, :root > body > header h1 { font-size: 32px; }
  :root main:has(> article) > h1 { font-size: 31px; }
  :root main:has(> article) > article > p { font-size: 17.5px; }
}

@media (min-width: 681px) and (max-width: 940px) {
  :root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(1) { padding-right: 46px; }
  :root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(1)::after { right: 20px; width: 110px; height: 110px; }
  :root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(1) > h2 { font-size: 34px; max-width: none; }
}


/* 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=40% grid=mixed scale=balanced 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; }
}