*{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}
.Module_section__e7XHD{max-width:640px;margin:0 auto;padding:0 20px}
.Sidebar_foot__r6H4o{padding:60px 0 40px;border-bottom:1px solid #ccc;margin-bottom:48px}
.Sidebar_foot__r6H4o h1{font-size:24px;font-weight:400;letter-spacing:-.5px}
.Sidebar_foot__r6H4o p{font-size:14px;color:#777;margin-top:6px;font-style:italic}
.Sidebar_foot__r6H4o a{color:#2a2a2a;text-decoration:none;font-size:24px;font-weight:400;letter-spacing:-.5px}
.Card_row__cgglJ{padding:20px 0}
.Card_row__cgglJ h2{font-size:18px;font-weight:400;margin-bottom:4px}
.Card_row__cgglJ h2 a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.Card_row__cgglJ h2 a:hover{border-bottom-color:#2a2a2a}
.Card_row__cgglJ .Content_text__DCYRk{font-size:12px;color:#aaa;margin-bottom:6px}
.Card_row__cgglJ p{font-size:14px;color:#666}
.Banner_item__2Y3nF{color:#888;font-size:13px;text-decoration:none}
.Banner_item__2Y3nF:hover{color:#2a2a2a}
.Module_area__bAkHk{padding-bottom:60px}
.Module_area__bAkHk h1{font-size:28px;font-weight:400;margin-bottom:8px}
.Module_area__bAkHk .Content_text__DCYRk{font-size:12px;color:#aaa;display:block;margin-bottom:32px}
.Module_area__bAkHk h2{font-size:21px;font-weight:400;margin:40px 0 12px;border-bottom:1px solid #eee;padding-bottom:6px}
.Module_area__bAkHk h3{font-size:17px;margin:28px 0 8px}
.Module_area__bAkHk p{margin-bottom:18px;font-size:16px}
.Module_area__bAkHk ul,.Module_area__bAkHk ol{margin:0 0 18px 20px}
.Module_area__bAkHk a{color:#555;border-bottom:1px solid #ccc}
.Module_area__bAkHk a:hover{color:#000;border-bottom-color:#000}
.Module_area__bAkHk img{max-width:100%;height:auto;margin:24px 0}
.Sidebar_body__AKppG{border-top:1px solid #ddd;padding:20px 0;margin-top:48px;text-align:center;font-size:12px;color:#aaa}
.Sidebar_body__AKppG a{color:#aaa;text-decoration:none}
.Hero_item__SPqu3{padding:0 0 16px;margin-bottom:24px;font-size:12px;color:#aaa;font-style:italic;border-bottom:1px solid #eee}
.Main_wrapper__boNFi{padding:16px 0 0;margin-top:32px;font-size:11px;color:#999;border-top:1px solid #eee}
.Banner_title__G4dGV{font-size:12px;color:#aaa;margin:-26px 0 32px;font-weight:300}
.Main_content__CFy8Z{margin:0 auto 32px;max-width:720px}
.Hero_main__8T5e7{width:100%;height:auto}
.Content_wrap__2r7ew{margin-top:40px;padding-top:20px;border-top:1px solid #eee;font-size:14px;color:#888}
.Content_wrap__2r7ew em{color:#aaa}
.Content_wrap__2r7ew a{color:#555;border-bottom:1px solid #ddd;text-decoration:none}
.Post_foot__TxLZ3{padding:24px 0 0;border-top:1px solid #eee;margin-top:24px}
.Post_foot__TxLZ3 p{padding:3px 0;margin:0;font-size:15px}
.Post_foot__TxLZ3 a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.Post_foot__TxLZ3 a:hover{border-bottom-color:#2a2a2a}
/* === Theme === */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Playfair+Display:wght@400;700&display=swap');
body{font-family:'Montserrat',sans-serif;color:#2D3436;background:#F9F7F2}
.Sidebar_foot__r6H4o{background:#1A2238;color:#fff}
.Sidebar_foot__r6H4o h1{font-family:'Playfair Display',serif;color:#fff}
.Sidebar_foot__r6H4o p{color:rgba(255,255,255,.75)}
.Sidebar_foot__r6H4o a{color:#fff;text-decoration:none}
.card h2{font-family:'Playfair Display',serif}
.card h2 a{color:#1A2238}
.card h2 a:hover{color:#E67E22}
.read-more{color:#E67E22}
.article-content h1{font-family:'Playfair Display',serif}
.article-content h2{font-family:'Playfair Display',serif}
.article-content a{color:#E67E22}
.article-content img{border-radius:4px}
.affiliate-disclosure{border-radius:4px}
.ymyl-disclaimer{border-radius:4px}
/* === Custom === */
/* v.6c26f5 — layout revision */

/* ── Webfonts (position-independent @font-face; the @import below is dropped
      by the pipeline once concatenated, so the real load happens here) ─────── */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Nunito:wght@300;400;600;700&display=swap');

@font-face {
  font-family: 'EB Garamond';
  font-style:  normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ebgaramond/v33/SlGUmQSNjdsmc35JDF1K5GR1SDk_YAPI.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style:  italic;
  font-weight: 400 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ebgaramond/v33/SlGWmQSNjdsmc35JDF1K5GRweDs1ZyHKpWg.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style:  normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/nunito/v32/XRXV3I6Li01BKofINeaBTMnFcQ.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── Design tokens ─────────────────────────────── */
:root {
  --color-bg:           #FAF7F3;
  --color-surface:      #F5EDE6;
  --color-surface-2:    #F0E4DE;
  --color-text:         #2A1F1A;
  --color-text-muted:   #7B6560;
  --color-heading:      #241713;
  --color-accent:       #C06070;
  --color-accent-hover: #A34F5E;
  --color-accent-light: #F0DDE0;
  --color-border:       #E4D5CD;
  --color-link:         #B4586A;
  --color-link-hover:   #8F4152;
  --color-moment:       #5E3A5C;   /* used in exactly 2 places: hero drop cap + hero kicker */

  --font-display: 'EB Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body:    'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --size-base: 17px;
  --lh-body:   1.78;

  --radius:    9px;
  --max-prose: 66ch;
  --max-home:  1120px;
  --max-read:  760px;
}

/* ── Reset / base ──────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root body {
  font-family:            var(--font-body);
  font-size:              var(--size-base);
  line-height:            var(--lh-body);
  color:                  var(--color-text);
  background-color:       var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root h1, :root h2, :root h3, :root h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.2;
  color:       var(--color-heading);
}

:root p  { margin-bottom: 1.2em; }
:root p:last-child { margin-bottom: 0; }

:root a {
  color:                 var(--color-link);
  text-decoration:       underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-accent-light);
  text-decoration-thickness: 1px;
  transition: color .18s ease, text-decoration-color .18s ease;
}
:root a:hover { color: var(--color-link-hover); text-decoration-color: var(--color-accent-hover); }

/* =====================================================================
   MASTHEAD  (shared element on both templates: <header class="Sidebar_foot…">)
   Home = <h1> + <p tagline> · Article = <a> wordmark.
   Overrides the foreign theme layer's navy #1b3a4b background.
   ===================================================================== */
:root header:first-of-type {
  max-width:       none;
  width:           100%;
  margin:          0 0 3.25rem;
  padding:         clamp(3.25rem, 8vw, 5.25rem) 1.5rem clamp(2.75rem, 6vw, 4rem);
  text-align:      center;
  border-bottom:   none;
  background:
    linear-gradient(180deg, rgba(58,26,38,.62), rgba(58,26,38,.74)),
    url("/theme-assets/cover-photo.jpg");
  background-size:     cover;
  background-position: center 58%;
  background-repeat:   no-repeat;
}

/* Wordmark — home <h1> and article <a> share the signature italic voice */
:root header:first-of-type h1,
:root header:first-of-type a {
  display:        inline-block;
  font-family:    var(--font-display);
  font-style:     italic;
  font-weight:    500;
  font-size:      clamp(2rem, 4.6vw, 3.1rem);
  letter-spacing: .01em;
  line-height:    1.08;
  color:          #FBF3EC;
  text-decoration: none;
  text-shadow:    0 1px 14px rgba(40,16,24,.45);
}
:root header:first-of-type a:hover { color: #fff; }

/* Manifesto / tagline under the wordmark (home only) */
:root header:first-of-type p {
  max-width:      44ch;
  margin:         1.05rem auto 0;
  font-family:    var(--font-display);
  font-style:     italic;
  font-size:      clamp(.98rem, 1.9vw, 1.16rem);
  font-weight:    400;
  line-height:    1.55;
  color:          rgba(251,243,236,.9);
  text-shadow:    0 1px 10px rgba(40,16,24,.4);
}
/* Signature line */
:root header:first-of-type h1::after {
  content:        "un journal\0000A0\002022\0000A0Nice";
  display:        block;
  margin-top:     .85rem;
  font-family:    var(--font-body);
  font-style:     normal;
  font-size:      12px;
  font-weight:    600;
  letter-spacing: .34em;
  text-transform: uppercase;
  color:          rgba(251,243,236,.72);
  text-shadow:    0 1px 8px rgba(40,16,24,.4);
}

/* =====================================================================
   HOMEPAGE  —  main:not(:has(> article))
   direct children: N × div.Card_row  +  final div.Post_foot (tail)
   card 1 = hero · cards 2-3 = Editor's Picks · card 4 = lead journal (Strip 1)
   cards 5+ = journal grid · last = archive tail (Strip 2)
   ===================================================================== */
:root main:nth-of-type(1):not(:has(> article)) {
  display:               grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap:            1.75rem;
  row-gap:               2.85rem;
  max-width:             var(--max-home);
  margin:                0 auto;
  padding:               1rem 2rem 4.5rem;
}

/* ---- Generic card (Editor's Picks + Journal share ONE treatment) ---- */
:root main:nth-of-type(1):not(:has(> article)) > div {
  grid-column:   span 1;
  display:       flex;
  flex-direction: column;
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius);
  padding:       26px 34px 28px;
  box-shadow:    0 1px 4px rgba(60,30,36,.05);
  transition:    box-shadow .2s ease, transform .2s ease;
}
:root main:nth-of-type(1):not(:has(> article)) > div:hover {
  box-shadow: 0 6px 22px rgba(120,60,74,.12);
  transform:  translateY(-2px);
}

/* date / meta line (cards only, never the archive tail) */
:root main:nth-of-type(1):not(:has(> article)) > div:not(:last-of-type) > p:nth-of-type(1) {
  order:          -1;
  margin:         0 0 .55rem;
  font-size:      11.5px;
  font-weight:    700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          var(--color-accent-hover);
  line-height:    1.4;
}
:root main:nth-of-type(1):not(:has(> article)) > div:not(:last-of-type) > p:nth-of-type(1)::before {
  content: "Journal\0000A0\002022\0000A0";
  color:   var(--color-text-muted);
}

/* title */
:root main:nth-of-type(1):not(:has(> article)) > div h2 {
  margin:      0 0 .6rem;
  font-size:   1.28rem;
  font-weight: 500;
  line-height: 1.24;
}
:root main:nth-of-type(1):not(:has(> article)) > div h2 a {
  color:           var(--color-heading);
  text-decoration: none;
}
:root main:nth-of-type(1):not(:has(> article)) > div h2 a:hover { color: var(--color-accent-hover); }

/* excerpt (clamped to 3 lines for equal card heights - RULE D) */
:root main:nth-of-type(1):not(:has(> article)) > div:not(:last-of-type) > p:nth-of-type(2) {
  margin:       0 0 1.15rem;
  max-width:    60ch;
  font-size:    15px;
  line-height:  1.6;
  color:        var(--color-text-muted);
  display:            -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

/* CTA - localise "read more" to French via the font-size:0 swap */
:root main:nth-of-type(1):not(:has(> article)) > div > a {
  align-self:      flex-start;
  margin-top:      auto;
  font-size:       0;
  text-decoration: none;
  color:           var(--color-accent-hover);
  border:          1px solid var(--color-accent);
  border-radius:   999px;
  padding:         .5rem 1.1rem;
  transition:      background .18s ease, color .18s ease;
}
:root main:nth-of-type(1):not(:has(> article)) > div > a::after {
  content:        "Lire la suite \002192";
  font-size:      13px;
  font-family:    var(--font-body);
  font-weight:    600;
  letter-spacing: .04em;
}
:root main:nth-of-type(1):not(:has(> article)) > div > a:hover {
  background: var(--color-accent);
  color:      #FBF3EC;
}

/* ---- HERO (card 1) - open, centered, THE loud voice ---- */
:root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(1) {
  grid-column:   1 / -1;
  background:    transparent;
  border:        none;
  box-shadow:    none;
  padding:       .5rem 1rem 1.25rem;
  text-align:    center;
  align-items:   center;
}
:root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(1):hover {
  box-shadow: none;
  transform:  none;
}
/* hero kicker (moment colour - place 1 of 2) */
:root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(1)::before {
  content:        "Le dernier récit";
  display:        block;
  margin-bottom:  1rem;
  font-family:    var(--font-body);
  font-size:      12px;
  font-weight:    700;
  letter-spacing: .34em;
  text-transform: uppercase;
  color:          var(--color-moment);
}
/* hero byline (repurpose the date line) */
:root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(1) > p:nth-of-type(1) {
  order:         0;
  margin:        1rem 0 0;
  color:         var(--color-text-muted);
  letter-spacing: .18em;
}
:root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(1) > p:nth-of-type(1)::before {
  content: "Par Sophie \0000A0\002022\0000A0";
  color:   var(--color-accent-hover);
}
:root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(1) > p:nth-of-type(1)::after {
  content: "\0000A0\002022\0000A0 Lecture ~6 min";
  color:   var(--color-text-muted);
}
/* hero title */
:root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(1) h2 {
  max-width:  15ch;
  margin:     .55rem auto .35rem;
  font-style: italic;
  font-weight: 500;
  font-size:  clamp(2.1rem, 4.6vw, 3.35rem);
  line-height: 1.1;
}
/* hero excerpt + drop cap (moment colour - place 2 of 2) */
:root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(1) > p:nth-of-type(2) {
  max-width:    58ch;
  margin:       1.1rem auto 1.6rem;
  font-size:    1.16rem;
  line-height:  1.62;
  color:        var(--color-text);
  text-align:   left;
  display:      block;
  -webkit-line-clamp: initial;
  overflow:     visible;
}
:root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(1) > p:nth-of-type(2)::first-letter {
  float:        left;
  font-family:  var(--font-display);
  font-weight:  600;
  font-size:    3.4em;
  line-height:  .82;
  padding:      .06em .12em 0 0;
  color:        var(--color-moment);
}
:root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(1) > a {
  align-self:  center;
  margin-top:  0;
  padding:     .62rem 1.5rem;
}
:root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(1) > a::after {
  content:   "Lire le récit \002192";
  font-size: 14px;
}
/* Editor's Picks section label - full-width, sits above the picks row */
:root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(1)::after {
  content:        "La sélection de Sophie\0000A0\002014\0000A0à lire d'abord";
  display:        block;
  width:          100%;
  margin:         2.6rem 0 -.4rem;
  padding-top:    1.05rem;
  border-top:     1px solid var(--color-border);
  font-family:    var(--font-body);
  font-size:      13px;
  font-weight:    700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          var(--color-text-muted);
  text-align:     left;
}

/* ---- STRIP 1 + LEAD JOURNAL (card 4) ---- */
:root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(4) {
  grid-column:  1 / -1;
  background:   transparent;
  border:       none;
  box-shadow:   none;
  padding:      0;
  text-align:   center;
  align-items:  center;
}
:root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(4):hover {
  box-shadow: none;
  transform:  none;
}
/* Strip 1 photo band */
:root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(4)::before {
  content:        "Le journal\0000A0\002014\0000A0les plus récents";
  display:        flex;
  align-items:    center;
  justify-content: center;
  width:          100%;
  height:         200px;
  margin-bottom:  2.4rem;
  border-radius:  var(--radius);
  background:
    linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.25)),
    url("/theme-assets/feature-photo.jpg");
  background-size:     cover;
  background-position: center 30%;
  background-repeat:   no-repeat;
  font-family:    var(--font-body);
  font-size:      13.5px;
  font-weight:    700;
  letter-spacing: .32em;
  text-transform: uppercase;
  color:          #FBF3EC;
  text-shadow:    0 1px 10px rgba(0,0,0,.5);
}
:root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(4) h2 {
  max-width:  20ch;
  margin:     .3rem auto .5rem;
  font-size:  clamp(1.5rem, 3vw, 2rem);
  font-weight: 500;
}
:root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(4) > p:nth-of-type(2) {
  max-width:  62ch;
  margin:     .7rem auto 1.35rem;
  font-size:  1.04rem;
  line-height: 1.62;
  color:      var(--color-text);
  text-align: center;
  display:    block;
  -webkit-line-clamp: initial;
  overflow:   visible;
}
:root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(4) > a { align-self: center; }

/* ---- STRIP 2 + ARCHIVE TAIL (last div = Post_foot) ---- */
:root main:nth-of-type(1):not(:has(> article)) > div:last-of-type {
  grid-column:  1 / -1;
  display:               grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap:            16px;
  row-gap:               10px;
  align-items:           stretch;
  background:   transparent;
  border:       none;
  box-shadow:   none;
  padding:      0;
}
:root main:nth-of-type(1):not(:has(> article)) > div:last-of-type:hover {
  box-shadow: none;
  transform:  none;
}
:root main:nth-of-type(1):not(:has(> article)) > div:last-of-type::before {
  content:        "Plus d'articles";
  display:        flex;
  align-items:    center;
  justify-content: center;
  width:          100%;
  height:         210px;
  margin-bottom:  2.2rem;
  border-radius:  var(--radius);
  background:
    linear-gradient(rgba(20,24,28,.58), rgba(20,24,28,.3)),
    url("/theme-assets/feature-photo.jpg");
  background-size:     cover;
  background-position: center 72%;
  background-repeat:   no-repeat;
  font-family:    var(--font-body);
  font-size:      13.5px;
  font-weight:    700;
  letter-spacing: .32em;
  text-transform: uppercase;
  color:          #FBF3EC;
  text-shadow:    0 1px 10px rgba(0,0,0,.5);
  grid-column:    1 / -1;
}
/* magazine-index: 3-col grid of boxed cream cards (same design system as the
   top journal cards — surface token, border, radius, shadow, hover lift) */
:root main:nth-of-type(1):not(:has(> article)) > div:last-of-type p {
  margin:        0;
  padding:       0;
  height:        100%;
}
:root main:nth-of-type(1):not(:has(> article)) > div:last-of-type p a {
  display:        flex;
  align-items:    center;
  height:         100%;
  padding:        18px 20px;
  background:     var(--color-surface);
  border:         1px solid var(--color-border);
  border-radius:  var(--radius);
  box-shadow:     0 1px 4px rgba(60,30,36,.05);
  font-family:    var(--font-display);
  font-size:      1.02rem;
  color:          var(--color-heading);
  text-decoration: none;
  line-height:    1.35;
  transition:     box-shadow .2s ease, transform .2s ease, color .18s ease;
}
:root main:nth-of-type(1):not(:has(> article)) > div:last-of-type p a:hover {
  box-shadow: 0 6px 22px rgba(120,60,74,.12);
  transform:  translateY(-2px);
  color:      var(--color-accent-hover);
}

/* =====================================================================
   ARTICLE PAGE  —  main:has(> article)
   header <a> wordmark · main > h1 + span.date + article
   ===================================================================== */
:root main:nth-of-type(1):has(> article) {
  max-width: var(--max-read);
  margin:    0 auto;
  padding:   1rem 1.5rem 4rem;
}
:root main:nth-of-type(1):has(> article) > h1 {
  margin:     .3rem 0 .6rem;
  font-size:  clamp(2rem, 5vw, 3rem);
  font-weight: 500;
  line-height: 1.14;
}
:root main:nth-of-type(1):has(> article) > span {
  display:        block;
  margin-bottom:  2.4rem;
  font-family:    var(--font-body);
  font-size:      12px;
  font-weight:    700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color:          var(--color-accent-hover);
}
:root main:nth-of-type(1):has(> article) > span::before {
  content: "Par Sophie \0000A0\002022\0000A0 ";
  color:   var(--color-text-muted);
}

:root main:nth-of-type(1):has(> article) > article > p {
  max-width:   var(--max-prose);
  margin:      0 auto 1.4em;
  font-size:   18.5px;
  line-height: 1.8;
  color:       var(--color-text);
}
/* drop cap on the opening paragraph */
:root main:nth-of-type(1):has(> article) > article > p:first-of-type::first-letter {
  float:       left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size:   3.3em;
  line-height: .82;
  padding:     .05em .12em 0 0;
  color:       var(--color-accent-hover);
}

:root main:nth-of-type(1):has(> article) > article h2 {
  max-width:   var(--max-prose);
  margin:      2.4em auto .7em;
  padding:     0;
  border:      none;
  font-size:   1.55rem;
  font-weight: 500;
  line-height: 1.25;
}
/* dinkus divider above each section heading */
:root main:nth-of-type(1):has(> article) > article h2::before {
  content:        "\002733 \002733 \002733";
  display:        block;
  margin:         0 auto .9em;
  font-size:      .82rem;
  letter-spacing: .55em;
  text-align:     center;
  color:          var(--color-accent);
}
:root main:nth-of-type(1):has(> article) > article h3 {
  max-width:   var(--max-prose);
  margin:      1.9em auto .5em;
  font-size:   1.25rem;
  font-weight: 600;
}

:root main:nth-of-type(1):has(> article) > article img {
  display:       block;
  max-width:     100%;
  height:        auto;
  margin:        2.2em auto;
  border-radius: var(--radius);
  box-shadow:    0 3px 16px rgba(60,30,36,.1);
}

/* body links inside the article */
:root main:nth-of-type(1):has(> article) > article p a {
  color:                 var(--color-link);
  text-decoration:       underline;
  text-decoration-color: var(--color-accent-light);
  text-underline-offset: 3px;
}
:root main:nth-of-type(1):has(> article) > article p a:hover {
  color:                 var(--color-link-hover);
  text-decoration-color: var(--color-accent-hover);
}

/* AFFILIATE links (/out/...) - visually distinct inline "recommendation" chip.
   Fully-pathed + attribute so it strictly out-specifies the body-link rule (RULE J). */
:root main:nth-of-type(1):has(> article) > article p a[href^="/out/"] {
  font-weight:           700;
  color:                 var(--color-accent-hover);
  background:            var(--color-accent-light);
  padding:               .06em .5em;
  border-radius:         5px;
  text-decoration:       none;
  box-decoration-break:  clone;
  -webkit-box-decoration-break: clone;
  box-shadow:            inset 0 -2px 0 rgba(163,79,94,.35);
  transition:            background .18s ease, box-shadow .18s ease;
}
:root main:nth-of-type(1):has(> article) > article p a[href^="/out/"]::after {
  content:     "\0000A0\002197";
  font-size:   .82em;
  font-weight: 700;
}
:root main:nth-of-type(1):has(> article) > article p a[href^="/out/"]:hover {
  background: #E8C9CE;
  color:      var(--color-link-hover);
  box-shadow: inset 0 -2px 0 rgba(143,65,82,.55);
}

/* blockquote - hanging quote */
:root main:nth-of-type(1):has(> article) > article blockquote {
  position:      relative;
  max-width:     var(--max-prose);
  margin:        2em auto;
  padding:       .3em 0 .3em 2.4rem;
  border-left:   3px solid var(--color-accent);
  font-family:   var(--font-display);
  font-style:    italic;
  font-size:     1.28rem;
  line-height:   1.5;
  color:         #5A3A3A;
}
:root main:nth-of-type(1):has(> article) > article blockquote::before {
  content:     "\00201C";
  position:    absolute;
  left:        .55rem;
  top:         .18em;
  font-family: var(--font-display);
  font-size:   2.4rem;
  line-height: 1;
  color:       var(--color-accent-light);
}

/* =====================================================================
   FOOTER
   ===================================================================== */
:root footer:last-of-type {
  margin-top:  0;
  padding:     2.2rem 1.5rem;
  border-top:  1px solid var(--color-border);
  background:  var(--color-surface);
  text-align:  center;
  font-size:   14px;
  color:       var(--color-text-muted);
}
:root footer:last-of-type a { color: var(--color-accent-hover); text-decoration: none; }
:root footer:last-of-type a:hover { color: var(--color-link-hover); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 900px) {
  :root main:nth-of-type(1):not(:has(> article)) {
    grid-template-columns: 1fr;
    padding: 1rem 1.25rem 3.5rem;
  }
  :root main:nth-of-type(1):not(:has(> article)) > div { grid-column: 1 / -1; }
  :root main:nth-of-type(1):not(:has(> article)) > div:last-of-type { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  :root header:first-of-type { margin-bottom: 2.25rem; }
  :root main:nth-of-type(1):not(:has(> article)) > div { padding: 22px 24px 24px; }
  :root main:nth-of-type(1):not(:has(> article)) > div:nth-of-type(4)::before,
  :root main:nth-of-type(1):not(:has(> article)) > div:last-of-type::before {
    height: 150px;
    letter-spacing: .22em;
    font-size: 12px;
  }
  :root main:nth-of-type(1):has(> article) > article > p { font-size: 17.5px; }
}


/* 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=Cereal-Nordic overlay=55% 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; }
}