*{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}
.Layout_link__3BVFG{max-width:860px;margin:0 auto;padding:0 20px}
.Section_body__BuaOL{background:#fff;padding:28px 0;margin-bottom:32px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.Section_body__BuaOL h1{font-size:22px;font-weight:700;margin-bottom:2px}
.Section_body__BuaOL p{font-size:14px;color:#666}
.Section_body__BuaOL a{color:#333;text-decoration:none;font-size:18px;font-weight:700}
.Layout_title__40T8m{display:flex;flex-direction:column;gap:20px}
.Card_section__cDQ77{background:#fff;border-radius:12px;box-shadow:0 1px 6px rgba(0,0,0,.06);padding:24px 28px;transition:transform .15s,box-shadow .15s}
.Card_section__cDQ77:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.1)}
.Card_section__cDQ77 h2{font-size:19px;margin-bottom:6px}
.Card_section__cDQ77 h2 a{color:#1a1a1a;text-decoration:none}
.Card_section__cDQ77 .Article_inner__jM8ze{font-size:12px;color:#999;margin-bottom:8px}
.Card_section__cDQ77 p{font-size:14px;color:#555;margin-bottom:12px}
.Nav_body__GFtIq{display:inline-block;background:#5865f2;color:#fff;padding:6px 16px;border-radius:20px;font-size:13px;font-weight:600;text-decoration:none}
.Nav_body__GFtIq:hover{background:#4752c4}
.Header_section__OXEcR{padding-bottom:60px}
.Header_section__OXEcR h1{font-size:30px;font-weight:700;margin-bottom:8px}
.Header_section__OXEcR time{font-size:12px;color:#999;display:block;margin-bottom:24px}
.Header_section__OXEcR h2{font-size:22px;margin:32px 0 12px}
.Header_section__OXEcR h3{font-size:18px;margin:24px 0 8px}
.Header_section__OXEcR p{margin-bottom:16px}
.Header_section__OXEcR ul,.Header_section__OXEcR ol{margin:0 0 16px 24px}
.Header_section__OXEcR a{color:#5865f2}
.Header_section__OXEcR img{max-width:100%;height:auto;border-radius:12px;margin:16px 0}
.Section_wrap__3WATj{padding:24px 0;margin-top:40px;text-align:center;font-size:12px;color:#999}
.Section_wrap__3WATj a{color:#999;text-decoration:none}
.Header_main__Cery4{background:#e8eaf0;border-radius:8px;padding:12px 16px;margin-bottom:20px;font-size:13px;color:#888;font-style:italic}
.Section_item__GJRdo{background:#fff8e1;border-radius:8px;padding:12px 16px;margin-top:24px;font-size:12px;color:#9e8600}
.Layout_main__Yb9UM{display:inline-block;background:#f0f2f7;border-radius:12px;padding:4px 12px;margin:-18px 0 24px;font-size:12px;color:#777}
.Post_box__7XwHj{text-align:center;margin:0 0 24px}
.Card_link__IhcFY{max-width:100%;height:auto;border-radius:12px}
.Sidebar_box__uabgm{margin-top:32px;padding-top:20px;border-top:1px solid #e0e0e0}
.Sidebar_box__uabgm 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)}
.Grid_body__Yfjig{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.Card_section__qGbKX{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}
.Card_section__qGbKX:hover{box-shadow:0 2px 8px rgba(0,0,0,.1)}
/* === Theme === */
:root{--primary:#1F2A5C;--accent:#D4A042;--bg:#F2EBD9;--fg:#10142A;--border:#C7B999;--r:11px;--fb:'Mukta';--fh:'EB Garamond'}
/* === Custom === */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,700;1,400;1,500&family=Mukta:wght@400;500;600;700&display=swap');

/* v.f1377f — layout revision */
/* Editorial signature pass for "Mein Gassiweg" — Julias Leinen-Tagebuch aus Berlin-Kreuzberg.
   Live template = Next.js with STABLE module classes; masthead is a <header> element, home <main>
   has TWO direct div children (card-grid + plain-link tail). Everything below is built on
   element/structural selectors so it survives class-hash churn. Moment colour #4A5C6B used in
   exactly two spots: hero drop cap + affiliate-disclosure callout. */

:root { --moment: #4A5C6B; }

: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(--primary); color: var(--bg); }
:root hr { border: 0; border-top: 1px solid var(--border); margin: 32px 0; }

/* ============================================================
   MASTHEAD — photo band + gradient + serif-italic wordmark + kicker signature
   Shared by home (h1 + tagline) and article (span > a). Old base targeted
   body > div:first-child which never matched the <header>.
   ============================================================ */
/* M1 refix — the base theme's obfuscated masthead class (.Section_body__BuaOL{background:#fff},
   specificity 0,1,0) outranked this element selector (0,0,2), so our photo/gradient lost the
   cascade and the header rendered pure white on all six shots. !important on the background
   shorthand (allowed: overriding base-theme hardcoded white) plus a solid navy floor (#1F2A5C =
   the gradient's own tone) now win and guarantee no white ever shows even if the photo 404s. */
body > header {
  background: linear-gradient(rgba(31, 42, 92, .86), rgba(31, 42, 92, .64)), #1F2A5C url("/theme-assets/hero-masthead.jpg") center / cover no-repeat !important;
  border-bottom: 3px solid var(--accent);
  margin-bottom: 52px;
}
body > header > div { padding: 60px 24px 50px; text-align: center; position: relative; }
body > header > div:has(> span) { padding-top: 30px; padding-bottom: 26px; }

body > header > div::before {
  content: "Berlin-Kreuzberg · Leinen-Tagebuch";
  display: block;
  font-family: var(--fb), sans-serif;
  font-size: 11px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 16px;
}

body > header h1 {
  font-family: var(--fh), Cambria, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 46px;
  line-height: 1.06;
  color: #F6EFDF;
  letter-spacing: .01em;
  margin: 0 0 14px;
}
body > header p {
  font-family: var(--fh), Cambria, serif;
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.5;
  color: rgba(246, 239, 223, .86);
  max-width: 54ch;
  margin: 0 auto;
}
body > header span > a {
  font-family: var(--fh), Cambria, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 27px;
  color: #F6EFDF;
  text-decoration: none;
  letter-spacing: .01em;
}
body > header span > a:hover { color: var(--accent); }

:root main { padding-bottom: 88px; }

/* ============================================================
   HOME — hero → Editor's Picks band → Journal grid → compact archive tail
   Scope: main:not(:has(> h1))  (home main has no direct <h1>; article main does).
   The 20 real cards are re-zoned with `order` inside a 6-col grid; section
   labels + photo strips are container pseudo-elements spanning the full row.
   ============================================================ */
:root main:not(:has(> h1)) > div:first-child {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 34px 30px;
  margin-top: 4px;
}

/* --- every card: consistent soft frame, warm paper, flex column for equal heights --- */
:root main:not(:has(> h1)) > div:first-child > div {
  grid-column: span 3;
  order: 5;
  display: flex;
  flex-direction: column;
  background: #FBF6EA;
  border: 1px solid rgba(31, 42, 92, .10);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(16, 20, 42, .05);
  padding: 28px 34px;
  transition: transform .15s ease, box-shadow .15s ease;
}
:root main:not(:has(> h1)) > div:first-child > div:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(16, 20, 42, .10);
}
:root main:not(:has(> h1)) > div:first-child > div > p:first-child {
  font-family: var(--fb), sans-serif;
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 12px;
}
:root main:not(:has(> h1)) > div:first-child > div > h2 {
  font-family: var(--fh), Cambria, serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.26;
  letter-spacing: 0;
  margin: 0 0 12px;
}
:root main:not(:has(> h1)) > div:first-child > div > h2 a { color: var(--primary); text-decoration: none; }
:root main:not(:has(> h1)) > div:first-child > div > h2 a:hover { color: var(--accent); }
:root main:not(:has(> h1)) > div:first-child > div > p:last-of-type {
  font-family: var(--fb), sans-serif;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(16, 20, 42, .82);
  margin: 0 0 18px;
  max-width: 64ch;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
:root main:not(:has(> h1)) > div:first-child > div > a {
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--fb), sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--primary);
  padding: 9px 18px;
  border-radius: 6px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
:root main:not(:has(> h1)) > div:first-child > div > a:hover { background: var(--accent); color: var(--fg); }

/* --- HERO (newest entry): the one loud voice --- */
:root main:not(:has(> h1)) > div:first-child > div:first-child {
  grid-column: 1 / -1;
  order: 1;
  background: #F8F1E2;
  border: 1px solid rgba(212, 160, 66, .35);
  box-shadow: 0 2px 10px rgba(16, 20, 42, .07);
  padding: 46px 52px;
}
:root main:not(:has(> h1)) > div:first-child > div:first-child > p:first-child {
  font-size: 12px;
  letter-spacing: .22em;
  color: var(--accent);
  font-weight: 700;
}
:root main:not(:has(> h1)) > div:first-child > div:first-child > p:first-child::before { content: "Neuester Eintrag — "; }
:root main:not(:has(> h1)) > div:first-child > div:first-child > h2 {
  font-size: 38px;
  line-height: 1.12;
  margin-bottom: 18px;
}
:root main:not(:has(> h1)) > div:first-child > div:first-child > p:last-of-type {
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
  font-size: 19px;
  line-height: 1.55;
  max-width: 62ch;
  margin-bottom: 24px;
}
:root main:not(:has(> h1)) > div:first-child > div:first-child > p:last-of-type::first-letter {
  font-family: var(--fh), Cambria, serif;
  font-size: 3.4em;
  line-height: .78;
  float: left;
  margin: 6px 12px 0 0;
  color: var(--moment);
  font-weight: 500;
}
:root main:not(:has(> h1)) > div:first-child > div:first-child > a {
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--primary);
  padding: 11px 26px;
  font-size: 13px;
}
:root main:not(:has(> h1)) > div:first-child > div:first-child > a:hover { background: var(--primary); color: var(--bg); }

/* --- EDITOR'S PICKS label (full-row, above the band) --- */
:root main:not(:has(> h1)) > div:first-child::before {
  content: "Editor's Picks — Zuerst lesen";
  grid-column: 1 / -1;
  order: 2;
  margin: 30px 0 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--accent);
  font-family: var(--fb), sans-serif;
  font-size: 14px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--primary);
  font-weight: 700;
}

/* --- EDITOR'S PICKS band: cards 2–4, three-up, roman-numeral kickers --- */
:root main:not(:has(> h1)) > div:first-child > div:nth-child(2),
:root main:not(:has(> h1)) > div:first-child > div:nth-child(3),
:root main:not(:has(> h1)) > div:first-child > div:nth-child(4) {
  grid-column: span 2;
  order: 3;
  border-top: 2px solid var(--accent);
}
:root main:not(:has(> h1)) > div:first-child > div:nth-child(2) > p:first-child::before { content: "N° I · "; }
:root main:not(:has(> h1)) > div:first-child > div:nth-child(3) > p:first-child::before { content: "N° II · "; }
:root main:not(:has(> h1)) > div:first-child > div:nth-child(4) > p:first-child::before { content: "N° III · "; }

/* --- STRIP 1: photo band between picks and the journal grid --- */
:root main:not(:has(> h1)) > div:first-child::after {
  content: "Das Journal — Aktuellste zuerst";
  grid-column: 1 / -1;
  order: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 190px;
  margin: 30px 0 6px;
  border-radius: 8px;
  background-image: linear-gradient(rgba(20, 24, 28, .55), rgba(20, 24, 28, .28)), url("/theme-assets/essay-photo.jpg");
  background-size: cover;
  background-position: center 30%;
  color: #F6EFDF;
  font-family: var(--fb), sans-serif;
  font-size: 14px;
  letter-spacing: .32em;
  text-transform: uppercase;
  font-weight: 600;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .55);
}

/* ============================================================
   COMPACT ARCHIVE TAIL — main's SECOND div (bare <a> links).
   Full-width two-column magazine index; STRIP 2 heads it.
   ============================================================ */
:root main:not(:has(> h1)) > div:last-child {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 16px;
  margin-top: 16px;
}
:root main:not(:has(> h1)) > div:last-child::before {
  content: "Alle Beiträge";
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 205px;
  margin-bottom: 26px;
  border-radius: 8px;
  background-image: linear-gradient(rgba(20, 24, 28, .58), rgba(20, 24, 28, .30)), url("/theme-assets/essay-photo.jpg");
  background-size: cover;
  background-position: center 70%;
  color: #F6EFDF;
  font-family: var(--fb), sans-serif;
  font-size: 14px;
  letter-spacing: .34em;
  text-transform: uppercase;
  font-weight: 600;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .55);
}
/* Design-parity tail (M7): boxed cream cards matching the top journal cards —
   same paper token (#FBF6EA), same hairline border, radius, shadow, hover lift.
   !important overrides Lambda's hardcoded white on <a> chips (M1). Grid stretch
   keeps cells equal height per row; flex+center gives clean vertical breathing. */
:root main:not(:has(> h1)) > div:last-child > a {
  display: flex;
  align-items: center;
  padding: 20px 22px;
  background: #FBF6EA !important;
  border: 1px solid rgba(31, 42, 92, .10);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(16, 20, 42, .05);
  font-family: var(--fh), Cambria, serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.32;
  color: var(--primary);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, color .15s ease;
}
:root main:not(:has(> h1)) > div:last-child > a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(16, 20, 42, .10);
  color: var(--accent);
}

/* ============================================================
   ARTICLE PAGE — big serif title, disclosure callout, /pick/ CTAs, meta, related.
   Scope: main:has(> h1).
   ============================================================ */
:root main:has(> h1) > h1 {
  font-family: var(--fh), Cambria, serif;
  font-weight: 500;
  font-size: 42px;
  line-height: 1.14;
  color: var(--primary);
  letter-spacing: 0;
  margin: 6px 0 10px;
}
:root main:has(> h1) > time {
  display: block;
  font-family: var(--fb), sans-serif;
  font-size: 12px;
  color: var(--accent);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 6px;
}
/* S6 refix — persona byline + location on the meta line (was date-only). */
:root main:has(> h1) > time::before {
  content: "Von Julia · Berlin-Kreuzberg · ";
}
:root main:has(> h1) > div:first-of-type {
  font-family: var(--fb), sans-serif;
  font-style: italic;
  font-size: 13px;
  color: rgba(16, 20, 42, .58);
  letter-spacing: .03em;
  margin: 0 0 30px;
}

/* Affiliate disclosure → distinct callout (moment colour, 2nd of two spots) */
:root main:has(> h1) > article > div:first-child {
  background: #ECE7DA;
  border-left: 3px solid var(--moment);
  border-radius: 0 8px 8px 0;
  padding: 14px 20px;
  margin: 8px 0 30px;
}
:root main:has(> h1) > article > div:first-child::before {
  content: "Hinweis";
  display: block;
  font-family: var(--fb), sans-serif;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--moment);
  margin-bottom: 5px;
}
:root main:has(> h1) > article > div:first-child em {
  font-family: var(--fb), sans-serif;
  font-style: normal;
  font-size: 13px;
  line-height: 1.6;
  color: var(--moment);
}

:root main:has(> h1) > article > p { margin-bottom: 20px; font-size: 18px; line-height: 1.8; }
:root main:has(> h1) > article > h2 {
  font-family: var(--fh), Cambria, serif;
  font-size: 27px;
  font-weight: 500;
  color: var(--primary);
  margin: 2.3em 0 .5em;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--accent);
  letter-spacing: 0;
}
:root main:has(> h1) > article > h3 {
  font-family: var(--fh), Cambria, serif;
  font-size: 21px;
  font-weight: 500;
  color: var(--accent);
  margin: 1.5em 0 .5em;
  font-style: italic;
}
:root main:has(> h1) > article ul, :root main:has(> h1) > article ol { margin: 0 0 20px 24px; }
:root main:has(> h1) > article li { margin-bottom: 8px; line-height: 1.72; }
:root main:has(> h1) > article blockquote {
  border-left: 3px solid var(--accent);
  padding: 12px 0 12px 22px;
  margin: 28px 0;
  font-style: italic;
  color: var(--primary);
  background: rgba(212, 160, 66, .07);
  border-radius: 0 var(--r) var(--r) 0;
}

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

/* affiliate CTA pills — /pick/ (this site) + legacy prefixes. Full path + attr beats body-link. */
:root main:has(> h1) > article p a[href^="/pick/"], :root main:has(> h1) > article li a[href^="/pick/"],
:root main:has(> h1) > article p a[href^="/ref/"], :root main:has(> h1) > article li a[href^="/ref/"],
:root main:has(> h1) > article p a[href^="/try/"], :root main:has(> h1) > article li a[href^="/try/"],
:root main:has(> h1) > article p a[href^="/go/"], :root main:has(> h1) > article li a[href^="/go/"] {
  background: var(--accent);
  color: var(--fg);
  padding: 3px 12px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  font-family: var(--fb), sans-serif;
  font-size: 14px;
  letter-spacing: .02em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
:root main:has(> h1) > article p a[href^="/pick/"]:hover, :root main:has(> h1) > article li a[href^="/pick/"]:hover,
:root main:has(> h1) > article p a[href^="/ref/"]:hover, :root main:has(> h1) > article li a[href^="/ref/"]:hover,
:root main:has(> h1) > article p a[href^="/try/"]:hover, :root main:has(> h1) > article li a[href^="/try/"]:hover,
:root main:has(> h1) > article p a[href^="/go/"]:hover, :root main:has(> h1) > article li a[href^="/go/"]:hover {
  background: var(--primary);
  color: var(--bg);
}

/* article inline images */
:root main:has(> h1) > article section > img { width: 100%; height: auto; display: block; border-radius: var(--r); box-shadow: 0 3px 16px rgba(16, 20, 42, .12); }

/* article tables */
:root main:has(> h1) article table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 24px 0; }
:root main:has(> h1) article th {
  background: #E8DCC2;
  color: var(--primary);
  padding: 9px 12px;
  text-align: left;
  font-weight: 700;
  font-family: var(--fb), sans-serif;
  font-size: 13px;
  letter-spacing: .04em;
  border-bottom: 2px solid var(--accent);
}
:root main:has(> h1) article td { padding: 8px 12px; border-bottom: 1px solid rgba(31, 42, 92, .14); vertical-align: top; }

/* related-articles widget (article's div after <article>) — keeps the shared accent motif */
:root main:has(> h1) > article + div {
  background: #FBF6EA;
  border: 1px solid rgba(31, 42, 92, .10);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  padding: 24px 30px;
  margin-top: 44px;
}
:root main:has(> h1) > article + div > h3 {
  font-family: var(--fh), Cambria, serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--primary);
  margin: 0 0 14px;
}
:root main:has(> h1) > article + div a {
  display: block;
  padding: 10px 0;
  border-bottom: 1px dotted rgba(31, 42, 92, .18);
  color: var(--fg);
  text-decoration: none;
  font-family: var(--fb), sans-serif;
  font-size: 14.5px;
  line-height: 1.42;
}
:root main:has(> h1) > article + div a:hover { color: var(--primary); }
:root main:has(> h1) > article + div > div > a:last-child { border-bottom: 0; }
/* M1 refix — override Lambda base-theme hardcoded white on the "Verwandte
   Artikel" container, its inner wrapper, and each link row, so they read as the
   same warm paper as the rest of the page instead of bright white rectangles. */
:root main:has(> h1) > article + div,
:root main:has(> h1) > article + div > div,
:root main:has(> h1) > article + div a {
  background: #FBF6EA !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
:root footer { background: transparent; border-top: 1px solid var(--border); padding: 26px 0 40px; margin-top: 60px; text-align: center; font-family: var(--fb), sans-serif; font-size: 12px; color: var(--fg); opacity: .60; letter-spacing: .04em; 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); }


/* 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;
  }
}


/* qa-refix iter=1 — mobile grid collapse (M3) + tail parity on mobile (M7) */
@media (max-width: 640px) {
  /* M3: the fixed 6-col home grid never collapsed, so the Editor's Picks
     (span 2) + journal (span 3) cards stayed cramped in narrow columns.
     Collapse to one column so every card gets full width + its 34px padding.
     Keeps the existing 34px row-gap (M8). */
  :root main:not(:has(> h1)) > div:first-child {
    grid-template-columns: 1fr;
  }
  :root main:not(:has(> h1)) > div:first-child > div,
  :root main:not(:has(> h1)) > div:first-child > div:nth-child(2),
  :root main:not(:has(> h1)) > div:first-child > div:nth-child(3),
  :root main:not(:has(> h1)) > div:first-child > div:nth-child(4) {
    grid-column: 1 / -1;
  }
  /* M7: compact archive tail → single-column full-width cream cards (not tight mini-cells). */
  :root main:not(:has(> h1)) > div:last-child {
    grid-template-columns: 1fr;
  }
}


/* premium-upgrade v1 */
/* premium editorial upgrade — style=Kinfolk-minimal overlay=55% grid=equal scale=balanced family=astro-grid */

/* ── HERO STRIPS: site-level atmospheric photos (overlay 55%) ── */
: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.55) 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.55) 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; }
}