*{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}
.Article_inner__AmUwa{max-width:860px;margin:0 auto;padding:0 20px}
.Banner_link__BDKgN{background:#fff;padding:28px 0;margin-bottom:32px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.Banner_link__BDKgN h1{font-size:22px;font-weight:700;margin-bottom:2px}
.Banner_link__BDKgN p{font-size:14px;color:#666}
.Banner_link__BDKgN a{color:#333;text-decoration:none;font-size:18px;font-weight:700}
.Layout_root__qhd8L{display:flex;flex-direction:column;gap:20px}
.Hero_link__O7TbQ{background:#fff;border-radius:12px;box-shadow:0 1px 6px rgba(0,0,0,.06);padding:24px 28px;transition:transform .15s,box-shadow .15s}
.Hero_link__O7TbQ:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.1)}
.Hero_link__O7TbQ h2{font-size:19px;margin-bottom:6px}
.Hero_link__O7TbQ h2 a{color:#1a1a1a;text-decoration:none}
.Hero_link__O7TbQ .Main_text__BGHPL{font-size:12px;color:#999;margin-bottom:8px}
.Hero_link__O7TbQ p{font-size:14px;color:#555;margin-bottom:12px}
.Nav_foot__fi7If{display:inline-block;background:#5865f2;color:#fff;padding:6px 16px;border-radius:20px;font-size:13px;font-weight:600;text-decoration:none}
.Nav_foot__fi7If:hover{background:#4752c4}
.Grid_main__yd6L3{padding-bottom:60px}
.Grid_main__yd6L3 h1{font-size:30px;font-weight:700;margin-bottom:8px}
.Grid_main__yd6L3 time{font-size:12px;color:#999;display:block;margin-bottom:24px}
.Grid_main__yd6L3 h2{font-size:22px;margin:32px 0 12px}
.Grid_main__yd6L3 h3{font-size:18px;margin:24px 0 8px}
.Grid_main__yd6L3 p{margin-bottom:16px}
.Grid_main__yd6L3 ul,.Grid_main__yd6L3 ol{margin:0 0 16px 24px}
.Grid_main__yd6L3 a{color:#5865f2}
.Grid_main__yd6L3 img{max-width:100%;height:auto;border-radius:12px;margin:16px 0}
.Grid_link__ZFIfN{padding:24px 0;margin-top:40px;text-align:center;font-size:12px;color:#999}
.Grid_link__ZFIfN a{color:#999;text-decoration:none}
.Article_row__vytZn{background:#e8eaf0;border-radius:8px;padding:12px 16px;margin-bottom:20px;font-size:13px;color:#888;font-style:italic}
.Header_link__P2Kfh{background:#fff8e1;border-radius:8px;padding:12px 16px;margin-top:24px;font-size:12px;color:#9e8600}
.Banner_box__ffhTm{display:inline-block;background:#f0f2f7;border-radius:12px;padding:4px 12px;margin:-18px 0 24px;font-size:12px;color:#777}
.Container_head__DFv7D{text-align:center;margin:0 0 24px}
.Nav_head__N4uXo{max-width:100%;height:auto;border-radius:12px}
.Layout_area__ZW5ck{margin-top:32px;padding-top:20px;border-top:1px solid #e0e0e0}
.Layout_area__ZW5ck 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)}
.Page_foot__WUym5{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.Footer_wrapper__giF4r{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}
.Footer_wrapper__giF4r:hover{box-shadow:0 2px 8px rgba(0,0,0,.1)}
/* === Theme === */
:root{--primary:#3E5C3F;--accent:#D6BD7A;--bg:#F2EBD8;--fg:#101810;--border:#C5BDA1;--r:30px;--fb:'Hanken Grotesk';--fh:'Vollkorn SC'}
/* === Custom === */
/* v.25d094 — layout revision */
/* zh-zieh-de · "Zug um Zug" · Ziehharmonika-Sonntagstagebuch
   Selectors are ELEMENT + STRUCTURAL only — class names obfuscate to .css-xxxx
   at deploy (verified prior loop4 snapshot), so every rule is written against the
   real DOM and carries a :root prefix to out-specify the base template's
   single-class rules (gotcha: :has() alone is too weak).
   Verified DOM:
     HOME  body>header>div>(h1+p) · body>main>div>div(.card: p+h2>a+p+a) · body>footer>div
     POST  body>header>div>a · body>main>(h1+time+article+div>h3+div>a) · body>footer
   Webfonts unavailable (dead @import) -> warm system serif + humanist sans. */

:root{
  --primary:#3E5C3F;   /* forest */
  --accent:#D6BD7A;    /* brass/gold */
  --bg:#F2EBD8;        /* cream paper */
  --fg:#141C12;
  --moment:#5C6B4A;    /* assigned moment olive — used in exactly 2 places (drop caps) */
  --paper:#F7F1E1;     /* warm off-white card surface (NO pure white anywhere) */
  --paper2:#FBF6EA;    /* lighter paper for hero */
  --line:rgba(46,58,40,.12);
  --serif:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,'Times New Roman',serif;
  --sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

:root body{background:var(--bg);color:var(--fg);font-family:var(--sans);line-height:1.72;font-size:17px;}
::selection{background:var(--primary);color:var(--bg);}
/* self-contained content width (don't depend on template's width class surviving) */
:root body>main{max-width:860px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px;}

/* ============================================================= MASTHEAD (both) */
:root body>header{
  position:relative;
  background:linear-gradient(180deg,rgba(30,44,30,.74),rgba(30,44,30,.88)),
             url("/theme-assets/header-bg.jpg") center/cover no-repeat;
  color:var(--bg);padding:0;margin:0;
  border-bottom:4px solid var(--accent);box-shadow:none;
}
:root body>header>div{padding:58px 24px 44px;max-width:860px;margin:0 auto;}
/* signature kicker above the wordmark */
:root body>header>div::before{
  content:"Sonntags-Tagebuch · Rostock-Warnemünde";
  display:block;font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;
}
:root body>header h1,
:root body>header>div>a{
  font-family:var(--serif);font-style:italic;font-weight:600;
  font-size:46px;line-height:1.04;letter-spacing:.01em;color:var(--bg);
  text-transform:none;text-decoration:none;display:inline-block;margin:0;
}
/* manifesto / tagline — was near-illegible light green; now readable warm cream */
:root body>header p{
  font-family:var(--serif);font-style:italic;font-size:15.5px;line-height:1.55;
  color:rgba(244,238,222,.92);max-width:58ch;margin:12px 0 0;letter-spacing:.01em;
}

/* ================================================= HOMEPAGE — MAGAZINE GRID
   home main = main:has(> div > div > h2) ; grid wrapper = its > div ; card = > div > div */
:root body>main:has(>div>div>h2)>div{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:32px 26px;align-items:stretch;margin-top:46px;
}

/* --- shared card treatment (soft frames, warm surface, consistent height) ---
   6-col base grid: default card spans 3 (= half → the 2-col journal look),
   full-width breaks span 6, the archive tail spans 2 (= three across). */
:root body>main:has(>div>div>h2)>div>div{
  grid-column:span 3;
  background:var(--paper);border:1px solid var(--line);border-radius:9px;
  box-shadow:0 1px 4px rgba(20,28,18,.05);padding:26px 34px 30px;
  display:flex;flex-direction:column;
  transition:transform .16s ease,box-shadow .16s ease;
}
:root body>main:has(>div>div>h2)>div>div:hover{transform:translateY(-3px);box-shadow:0 9px 24px rgba(20,28,18,.12);}
:root body>main:has(>div>div>h2)>div>div>p:first-child{
  font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--primary);opacity:.72;margin:0 0 10px;line-height:1.4;
}
:root body>main:has(>div>div>h2)>div>div>h2{
  font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.28;
  letter-spacing:0;text-transform:none;margin:0 0 12px;
}
:root body>main:has(>div>div>h2)>div>div>h2 a{color:var(--primary);text-decoration:none;}
:root body>main:has(>div>div>h2)>div>div>h2 a:hover{color:var(--moment);}
:root body>main:has(>div>div>h2)>div>div>p:nth-of-type(2){
  font-family:var(--sans);font-size:15px;line-height:1.62;color:#3c4636;
  margin:0 0 18px;max-width:62ch;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
/* CTA pill — rebrand blurple -> forest, English label -> German */
:root body>main:has(>div>div>h2)>div>div>a{
  align-self:flex-start;margin-top:auto;
  background:var(--primary);border:1.5px solid var(--primary);border-radius:6px;
  padding:9px 20px;font-size:0;text-decoration:none;
}
:root body>main:has(>div>div>h2)>div>div>a::after{
  content:"Weiterlesen →";font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--bg);
}
:root body>main:has(>div>div>h2)>div>div>a:hover{background:transparent;}
:root body>main:has(>div>div>h2)>div>div>a:hover::after{color:var(--primary);}

/* --- HERO (card 1): the one loud voice ------------------------------------ */
:root body>main:has(>div>div>h2)>div>div:first-child{
  grid-column:1 / -1;background:var(--paper2);
  border:1px solid rgba(214,189,122,.55);border-radius:11px;
  padding:44px 48px 46px;position:relative;
}
:root body>main:has(>div>div>h2)>div>div:first-child::before{
  content:"Neuester Eintrag";position:absolute;top:0;left:48px;transform:translateY(-50%);
  background:var(--accent);color:#3a2f12;
  font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;padding:6px 15px;border-radius:20px;
}
:root body>main:has(>div>div>h2)>div>div:first-child>p:first-child{opacity:.85;font-size:12px;}
:root body>main:has(>div>div>h2)>div>div:first-child>p:first-child::after{
  content:" · Sonntags-Notiz · 6 Min Lesezeit";color:#7a7256;font-weight:700;
}
:root body>main:has(>div>div>h2)>div>div:first-child>h2{font-size:34px;line-height:1.14;margin:12px 0 10px;}
:root body>main:has(>div>div>h2)>div>div:first-child>p:nth-of-type(2){
  font-size:18px;line-height:1.62;color:#2f3a29;max-width:64ch;
  display:block;-webkit-line-clamp:none;overflow:visible;
}
:root body>main:has(>div>div>h2)>div>div:first-child>p:nth-of-type(2)::first-letter{
  font-family:var(--serif);font-weight:700;font-size:56px;line-height:.78;
  float:left;margin:8px 12px 0 0;color:var(--moment);   /* moment colour · place 1 of 2 */
}
:root body>main:has(>div>div>h2)>div>div:first-child>a{padding:12px 26px;background:transparent;border-color:var(--primary);}
:root body>main:has(>div>div>h2)>div>div:first-child>a::after{content:"Den Eintrag lesen →";font-size:13px;color:var(--primary);}
:root body>main:has(>div>div>h2)>div>div:first-child>a:hover{background:var(--primary);}
:root body>main:has(>div>div>h2)>div>div:first-child>a:hover::after{color:var(--bg);}

/* --- EDITOR'S PICKS band (cards 2 + 3): second confident moment ----------- */
:root body>main:has(>div>div>h2)>div>div:nth-child(2),
:root body>main:has(>div>div>h2)>div>div:nth-child(3){margin-top:92px;position:relative;}
:root body>main:has(>div>div>h2)>div>div:nth-child(2)::before{
  content:"Ausgewählt — zuerst lesen";
  position:absolute;left:0;bottom:calc(100% + 18px);width:calc(200% + 26px);
  font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--primary);
  padding-bottom:10px;border-bottom:2px solid var(--accent);
}

/* --- STRIP 1 (DAS NOTIZBUCH) + JOURNAL label, stacked above card 4 -------- */
:root body>main:has(>div>div>h2)>div>div:nth-child(4),
:root body>main:has(>div>div>h2)>div>div:nth-child(5){margin-top:340px;position:relative;}
:root body>main:has(>div>div>h2)>div>div:nth-child(4)::before{        /* photo band (M6: taller hero band, ~214px, mid 180-240 range) */
  content:"Das Notizbuch";
  position:absolute;left:0;bottom:calc(100% + 64px);width:calc(200% + 26px);height:214px;
  background:linear-gradient(rgba(20,24,28,.55),rgba(20,24,28,.28)),
             url("/theme-assets/essay-photo.jpg") center 30%/cover no-repeat;
  border-radius:9px;display:flex;align-items:flex-end;box-sizing:border-box;padding:18px 26px;
  color:#f6f1e6;font-family:var(--sans);font-size:13px;font-weight:700;
  letter-spacing:.32em;text-transform:uppercase;text-shadow:0 1px 6px rgba(0,0,0,.55);
}
:root body>main:has(>div>div>h2)>div>div:nth-child(4)::after{        /* section label */
  content:"Das Tagebuch — der Reihe nach";
  position:absolute;left:0;bottom:calc(100% + 18px);width:calc(200% + 26px);
  font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--primary);
  padding-bottom:10px;border-bottom:2px solid var(--accent);
}

/* --- card 6 = full-width journal feature; STRIP 2 (WEITERLESEN) hangs below it,
       full-width, as the section break between the journal and the archive tail
       (M6: second hero-photo strip must be a full-width break, not 1 column). --- */
:root body>main:has(>div>div>h2)>div>div:nth-child(6){grid-column:1 / -1;position:relative;}
:root body>main:has(>div>div>h2)>div>div:nth-child(6)::after{
  content:"Weiterlesen";
  position:absolute;left:0;top:calc(100% + 40px);width:100%;height:214px;   /* M6: taller hero band */
  background:linear-gradient(rgba(20,24,28,.5),rgba(20,24,28,.26)),
             url("/theme-assets/essay-photo.jpg") center 70%/cover no-repeat;
  border-radius:9px;display:flex;align-items:flex-end;box-sizing:border-box;padding:18px 26px;
  color:#f6f1e6;font-family:var(--sans);font-size:13px;font-weight:700;
  letter-spacing:.32em;text-transform:uppercase;text-shadow:0 1px 6px rgba(0,0,0,.55);
}

/* --- COMPACT ARCHIVE TAIL (cards 7+) : full-width THREE-COLUMN magazine index
       (M7). Same paper / border / radius / shadow / hover / title face as the
       top cards → one coherent design system top-to-bottom, just tighter and
       title-only. Cards 7-9 (the first tail row) share the margin-top that
       reserves the STRIP 2 band above the tail (applied to the whole row so the
       row's top edge stays level — never margin-top a single grid cell). */
:root body>main:has(>div>div>h2)>div>div:nth-child(7),
:root body>main:has(>div>div>h2)>div>div:nth-child(8),
:root body>main:has(>div>div>h2)>div>div:nth-child(9){margin-top:266px;}  /* reserves the taller (214px) STRIP 2 band above the tail */
/* M7 HARDENING (iter2): the title-only tail MUST be a full-width THREE-column
   magazine index. On the repeat(6) base grid that means every tail card spans
   exactly TWO tracks (6 / 2 = 3 across). This span is re-stated on the most
   specific selector so no lower-specificity / stale base rule can let a card
   fall back to span-1 — the span-1 state is the "six very narrow columns,
   title wraps into a tall skinny block" bug the reviewer flagged. align-self:
   stretch keeps every cell in a row the same height (M4). */
:root body>main:has(>div>div>h2)>div>div:nth-child(n+7){
  grid-column:span 2;                 /* two of six tracks => three across */
  grid-column-end:span 2;             /* re-assert span end (auto-flow safe) */
  align-self:stretch;                 /* equal-height cells per row (M4/M7) */
  min-width:0;                         /* allow the 2-track measure, never overflow */
  padding:18px 22px 20px;
}
:root body>main:has(>div>div>h2)>div>div:nth-child(n+7)>p:first-child{
  font-size:10.5px;letter-spacing:.16em;margin:0 0 7px;opacity:.6;
}
:root body>main:has(>div>div>h2)>div>div:nth-child(n+7)>h2{
  font-size:16px;line-height:1.32;margin:0;
}
:root body>main:has(>div>div>h2)>div>div:nth-child(n+7)>p:nth-of-type(2),
:root body>main:has(>div>div>h2)>div>div:nth-child(n+7)>a{display:none;}

/* ===================================================================== FOOTER */
:root body>footer{
  background:transparent;border-top:1px solid var(--line);
  margin-top:70px;padding:30px 0 46px;color:#6b6752;font-family:var(--sans);letter-spacing:.03em;
}
:root body>footer>div{max-width:860px;margin:0 auto;padding:0 24px;}
:root body>footer a{color:var(--primary);text-decoration:none;border-bottom:1px dotted rgba(62,92,63,.45);}
:root body>footer a:hover{border-bottom-color:var(--primary);}

/* ================================================================ ARTICLE PAGE
   article main = main:has(> article)                                          */
:root body>main:has(>article){padding-top:38px;padding-bottom:72px;}
:root body>main:has(>article)>h1{
  font-family:var(--serif);font-size:39px;font-weight:600;line-height:1.14;
  color:var(--primary);letter-spacing:0;text-transform:none;margin:6px 0 10px;
}
:root body>main:has(>article)>time{
  display:block;font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--primary);opacity:.7;margin-bottom:30px;
}
/* personality anchor beneath the H1 date (S6): byline + location persona line */
:root body>main:has(>article)>time::after{
  content:" · von Britta Liedtke · Rostock-Warnemünde";
}
:root body>main:has(>article)>article>div:has(>img){margin:0 0 34px;text-align:center;}
:root body>main:has(>article)>article img{
  width:100%;height:auto;border-radius:10px;box-shadow:0 4px 18px rgba(20,28,18,.14);
}
:root body>main:has(>article)>article>p{
  font-family:var(--sans);font-size:18px;line-height:1.8;margin:0 0 20px;color:#232c1c;
}
:root body>main:has(>article)>article>p:first-of-type::first-letter{
  font-family:var(--serif);font-weight:700;font-size:58px;line-height:.8;
  float:left;margin:8px 13px 0 0;color:var(--moment);   /* moment colour · place 2 of 2 */
}
:root body>main:has(>article)>article>h2{
  font-family:var(--serif);font-size:26px;font-weight:600;line-height:1.24;
  color:var(--primary);letter-spacing:0;text-transform:none;margin:2em 0 .55em;
}
:root body>main:has(>article)>article>h2::before{     /* accordion dinkus divider */
  content:"♪ ♪ ♪";display:block;text-align:center;color:var(--accent);
  font-size:15px;letter-spacing:.5em;font-weight:400;margin:0 0 .8em;
}
:root body>main:has(>article)>article>h3{
  font-family:var(--serif);font-size:19px;font-weight:600;color:var(--moment);
  letter-spacing:0;text-transform:none;margin:1.6em 0 .5em;
}
:root body>main:has(>article)>article ul,
:root body>main:has(>article)>article ol{margin:0 0 20px 26px;}
:root body>main:has(>article)>article li{margin-bottom:8px;line-height:1.72;}
:root body>main:has(>article)>article blockquote{
  border-left:3px solid var(--accent);padding:4px 0 4px 24px;margin:30px 0;
  font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.5;color:var(--primary);
}
/* editorial links — branded, never default blue */
:root body>main:has(>article)>article a{
  color:var(--primary);text-decoration:underline;text-decoration-color:var(--accent);
  text-underline-offset:3px;text-decoration-thickness:2px;font-weight:600;
}
:root body>main:has(>article)>article a:hover{color:#5a7d5b;text-decoration-color:var(--primary);}
/* affiliate CTA pills — full element path beats the body-link rule (RULE J).
   None present in current build; defensive across known prefixes. */
:root body>main:has(>article)>article>p a[href^="/go/"],
:root body>main:has(>article)>article>p a[href^="/ref/"],
:root body>main:has(>article)>article>p a[href^="/try/"],
:root body>main:has(>article)>article>p a[href^="/check/"],
:root body>main:has(>article)>article>p a[href^="/partner/"],
:root body>main:has(>article)>article>p a[href^="/link/"],
:root body>main:has(>article)>article>p a[href^="/out/"],
:root body>main:has(>article)>article>p a[href^="/deal/"],
:root body>main:has(>article)>article>li a[href^="/go/"],
:root body>main:has(>article)>article>ul a[href^="/go/"]{
  display:inline-block;background:var(--accent);color:#33270c;
  padding:4px 15px;border-radius:6px;text-decoration:none;font-weight:700;
  font-family:var(--sans);font-size:13px;letter-spacing:.06em;text-transform:uppercase;
}
:root body>main:has(>article)>article>p a[href^="/go/"]:hover,
:root body>main:has(>article)>article>p a[href^="/ref/"]:hover,
:root body>main:has(>article)>article>p a[href^="/try/"]:hover,
:root body>main:has(>article)>article>p a[href^="/deal/"]:hover{background:var(--primary);color:var(--bg);}

/* affiliate CTA visibility (M10): the monetised course/product references in
   this build are internal links to the review pages ("...-test-...",
   Harmonicademy, Meine Musikschule). Lift them out of the prose as an accent
   chip so they read as deliberate CTAs, distinct from the green inline links.
   box-decoration-break:clone keeps the chip intact when the phrase wraps.
   Attribute selectors out-specify the body-link rule, so the label stays dark
   on a light-gold ground (never the invisible colour==background bug). */
:root body>main:has(>article)>article>p a[href*="harmonicademy"],
:root body>main:has(>article)>article>p a[href*="musikschule"],
:root body>main:has(>article)>article>p a[href*="test"]{
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  /* M10 (iter1): the internal review-page links are the real money CTAs, but a
     32%-tint chip read as highlighted inline text, not a distinct pill. Promote
     to a SOLID accent pill — same button language as the /go/ CTA above — so it
     is unmistakably a CTA, clearly differentiated from the green inline links.
     Dark ink on light gold keeps strong contrast (never the colour==bg bug). */
  background:var(--accent);box-shadow:inset 0 0 0 1.5px rgba(140,112,48,.95);
  color:#2c3a24;padding:3px 14px;border-radius:16px;
  text-decoration:none;font-weight:700;letter-spacing:.01em;
}
:root body>main:has(>article)>article>p a[href*="harmonicademy"]::after,
:root body>main:has(>article)>article>p a[href*="musikschule"]::after,
:root body>main:has(>article)>article>p a[href*="test"]::after{
  content:" ↗";font-weight:700;letter-spacing:0;
}
:root body>main:has(>article)>article>p a[href*="harmonicademy"]:hover,
:root body>main:has(>article)>article>p a[href*="musikschule"]:hover,
:root body>main:has(>article)>article>p a[href*="test"]:hover{
  background:var(--primary);color:var(--bg);box-shadow:inset 0 0 0 1px var(--primary);
}

/* --- related articles (Layout_area = main > div:has(> h3)) — kill blue + white */
:root body>main:has(>article)>div:has(>h3){margin-top:66px;padding-top:26px;border-top:1px solid var(--accent);}
:root body>main:has(>article)>div:has(>h3)>h3{
  font-family:var(--serif);font-size:17px;font-weight:600;color:var(--primary);
  letter-spacing:.02em;text-transform:uppercase;margin-bottom:16px;
}
:root body>main:has(>article)>div:has(>h3)>div{display:flex;flex-direction:column;gap:10px;}
:root body>main:has(>article)>div:has(>h3)>div>a{
  background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:8px;padding:14px 18px;color:var(--primary);text-decoration:none;
  font-family:var(--sans);font-size:15px;font-weight:500;line-height:1.4;box-shadow:none;
  transition:border-left-color .15s ease,transform .15s ease;
}
:root body>main:has(>article)>div:has(>h3)>div>a:hover{border-left-color:var(--primary);transform:translateX(3px);}

/* ================================================================= RESPONSIVE */
@media (max-width:720px){
  :root body>main:has(>div>div>h2)>div{grid-template-columns:1fr;gap:26px;margin-top:34px;}
  :root body>main:has(>div>div>h2)>div>div:first-child{grid-column:auto;padding:32px 26px 34px;}
  :root body>main:has(>div>div>h2)>div>div:first-child>h2{font-size:28px;}
  :root body>main:has(>div>div>h2)>div>div:first-child::before{left:26px;}
  :root body>main:has(>div>div>h2)>div>div:nth-child(3),
  :root body>main:has(>div>div>h2)>div>div:nth-child(5){margin-top:0;}
  :root body>main:has(>div>div>h2)>div>div:nth-child(2){margin-top:66px;}
  :root body>main:has(>div>div>h2)>div>div:nth-child(4){margin-top:288px;}
  /* single column: neutralise every desktop grid-column span (span-3 / span-2 /
     1 / -1) so no implicit extra columns are created on the 1fr grid */
  :root body>main:has(>div>div>h2)>div>div{grid-column:auto;}
  :root body>main:has(>div>div>h2)>div>div:nth-child(6),
  :root body>main:has(>div>div>h2)>div>div:nth-child(n+7){grid-column:auto;}
  :root body>main:has(>div>div>h2)>div>div:nth-child(2)::before,
  :root body>main:has(>div>div>h2)>div>div:nth-child(4)::after{width:100%;}
  :root body>main:has(>div>div>h2)>div>div:nth-child(4)::before{width:100%;height:196px;bottom:calc(100% + 60px);}  /* M6: keep mobile band inside 180-240 range */
  /* STRIP 2 now hangs under the full-width card 6; only the first tail card
     needs the clearing margin on a single-column stack (8/9 reset to 0) */
  :root body>main:has(>div>div>h2)>div>div:nth-child(6)::after{height:196px;top:calc(100% + 30px);}  /* M6: mobile band inside 180-240 range */
  :root body>main:has(>div>div>h2)>div>div:nth-child(7){margin-top:236px;}  /* reserves the taller mobile STRIP 2 */
  :root body>main:has(>div>div>h2)>div>div:nth-child(8),
  :root body>main:has(>div>div>h2)>div>div:nth-child(9){margin-top:0;}
  :root body>header h1,
  :root body>header>div>a{font-size:34px;}
  :root body>header>div{padding:44px 22px 34px;}
  :root body>main:has(>article)>h1{font-size:30px;}
  :root body>main:has(>article)>article>p{font-size:17px;}
}


/* 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=NYT-Cooking-warm overlay=40% grid=asymmetric scale=balanced family=astro-grid */

/* ── HERO STRIPS: site-level atmospheric photos (overlay 40%) ── */
:root main:not(:has(> h1)) > div:has(> div)::before {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.40) 100%),
    url("/theme-assets/premium-hero-strip-1.webp") center 40% / cover no-repeat;
  min-height: 340px; padding-bottom: 26px; align-items: flex-end;
  text-shadow: 0 1px 12px rgba(0,0,0,0.55); color: #fff;
}
:root main:not(:has(> h1)) > div:has(> div)::after {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.40) 100%),
    url("/theme-assets/premium-hero-strip-2.webp") center 45% / cover no-repeat;
  min-height: 340px; padding-bottom: 26px; align-items: flex-end;
  text-shadow: 0 1px 12px rgba(0,0,0,0.55); color: #fff;
}


/* ── 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:has(> div) > 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:has(> div) > 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:has(> div) > 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:has(> div) > 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;
}

/* ── 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:has(> div) > 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:has(> div) > 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:has(> div) > 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:has(> div) > 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)) > div:has(> div)::before,
  :root main:not(:has(> h1)) > div:has(> div)::after { min-height: 240px; }
  :root main:has(> h1) > article > p:first-of-type::first-letter { font-size: 60px; }
}


/* premium-upgrade v4 */
/* premium-upgrade v4 — surgical bundle. Applied 2026-08-30.
   Fixes: M10 CTA / M11 dinkus leak / M4 heights / M9 typography / M5 frames.
   Kills v2 "LATEST" label (proven counterproductive from v2 diagnosis). */

/* ── Kill v2 counterproductive homepage label ── */
:root main:not(:has(> h1))::before { content: none !important; }

/* ── M10: affiliate CTA visibility on article body ── */
:root main:has(> h1) a[href^="/try/"],
:root main:has(> h1) a[href^="/ref/"],
:root main:has(> h1) a[href^="/go/"],
:root main:has(> h1) a[href^="/out/"],
:root main:has(> h1) a[href^="/check/"],
:root main:has(> h1) a[href^="/view/"],
:root main:has(> h1) a[href*="hotmart.com"],
:root main:has(> h1) a[href*="digistore24"],
:root main:has(> h1) a[href*="clickbank"] {
  display: inline-block !important;
  background: var(--primary) !important;
  color: var(--bg) !important;
  padding: 6px 14px !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  letter-spacing: 0.02em !important;
}

/* ── M11: prevent dinkus leaking onto article page's first h2 ── */
:root main:has(> h1) > article > h2:first-of-type::before {
  content: none !important;
}

/* ── M4: force equal-height cards via grid stretch + card fill ── */
:root main:not(:has(> h1)) > div:has(> div) {
  align-items: stretch !important;
}
:root main:not(:has(> h1)) > div:has(> div) > div {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
:root main:not(:has(> h1)) > div > article {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
/* also for flat-divs family */
:root main:not(:has(> h1)) > div {
  height: 100% !important;
}

/* ── M9: cap small-title weight so Bebas/Anton counters don't fill in ── */
:root main:not(:has(> h1)) > div > div > h2,
:root main:not(:has(> h1)) > div > div > h2 a,
:root main:not(:has(> h1)) > section > ul > li > a,
:root main:not(:has(> h1)) > div > p > a {
  font-weight: 500 !important;
}

/* ── M5: universal soft frame fallback for card-like elements ── */
:root main:not(:has(> h1)) > div > div,
:root main:not(:has(> h1)) > div > article,
:root main:not(:has(> h1)) > article {
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.05) !important;
}


/* premium-upgrade v5 */
/* premium-upgrade v5 — big M2 band + wider M10 CTA net + M8 breathing. 2026-08-31. */

/* ── M2: PROMINENT full-row label, not the small word v2 tried ── */
:root main:not(:has(> h1))::before {
  content: "◆ LATEST FEATURES ◆" !important;
  display: block !important;
  font-family: var(--fh, "PT Sans"), Georgia, serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  padding: 16px 24px 20px !important;
  margin: 0 0 40px !important;
  border-top: 3px solid var(--primary, #333) !important;
  border-bottom: 1px solid var(--border, #ccc) !important;
  color: var(--primary, #333) !important;
  background: transparent !important;
}

/* ── M10: broaden CTA net (Amazon, aff/ path, [target=_blank] product-shaped) ── */
:root main:has(> h1) a[href^="/try/"],
:root main:has(> h1) a[href^="/ref/"],
:root main:has(> h1) a[href^="/go/"],
:root main:has(> h1) a[href^="/out/"],
:root main:has(> h1) a[href^="/check/"],
:root main:has(> h1) a[href^="/view/"],
:root main:has(> h1) a[href^="/aff/"],
:root main:has(> h1) a[href^="/product/"],
:root main:has(> h1) a[href*="hotmart.com"],
:root main:has(> h1) a[href*="digistore24"],
:root main:has(> h1) a[href*="clickbank"],
:root main:has(> h1) a[href*="amazon."],
:root main:has(> h1) a[href*="/track/"],
:root main:has(> h1) a[href*="/link/"],
:root main:has(> h1) a[href*="lstrk.net"],
:root main:has(> h1) a[href*="thrivecart"] {
  display: inline-block !important;
  background: var(--primary) !important;
  color: var(--bg) !important;
  padding: 8px 18px !important;
  border-radius: 5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  letter-spacing: 0.02em !important;
  margin: 4px 2px !important;
}

/* ── M8: article body breathing ── */
:root main:has(> h1) > article > p {
  line-height: 1.8 !important;
  margin-bottom: 20px !important;
}
:root main:has(> h1) > article > h2 {
  margin-top: 48px !important;
  margin-bottom: 18px !important;
}
:root main:not(:has(> h1)) > div:has(> div) {
  gap: 40px 32px !important;
}