*{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}
.css-yapwyjc{max-width:640px;margin:0 auto;padding:0 20px}
.css-gah8wht{padding:60px 0 40px;border-bottom:1px solid #ccc;margin-bottom:48px}
.css-gah8wht h1{font-size:24px;font-weight:400;letter-spacing:-.5px}
.css-gah8wht p{font-size:14px;color:#777;margin-top:6px;font-style:italic}
.css-gah8wht a{color:#2a2a2a;text-decoration:none;font-size:24px;font-weight:400;letter-spacing:-.5px}
.css-h2bizhn{padding:20px 0}
.css-h2bizhn h2{font-size:18px;font-weight:400;margin-bottom:4px}
.css-h2bizhn h2 a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.css-h2bizhn h2 a:hover{border-bottom-color:#2a2a2a}
.css-h2bizhn .css-om008xn{font-size:12px;color:#aaa;margin-bottom:6px}
.css-h2bizhn p{font-size:14px;color:#666}
.css-biwczql{color:#888;font-size:13px;text-decoration:none}
.css-biwczql:hover{color:#2a2a2a}
.css-4om4xwd{padding-bottom:60px}
.css-4om4xwd h1{font-size:28px;font-weight:400;margin-bottom:8px}
.css-4om4xwd .css-om008xn{font-size:12px;color:#aaa;display:block;margin-bottom:32px}
.css-4om4xwd h2{font-size:21px;font-weight:400;margin:40px 0 12px;border-bottom:1px solid #eee;padding-bottom:6px}
.css-4om4xwd h3{font-size:17px;margin:28px 0 8px}
.css-4om4xwd p{margin-bottom:18px;font-size:16px}
.css-4om4xwd ul,.css-4om4xwd ol{margin:0 0 18px 20px}
.css-4om4xwd a{color:#555;border-bottom:1px solid #ccc}
.css-4om4xwd a:hover{color:#000;border-bottom-color:#000}
.css-4om4xwd img{max-width:100%;height:auto;margin:24px 0}
.css-foypzif{border-top:1px solid #ddd;padding:20px 0;margin-top:48px;text-align:center;font-size:12px;color:#aaa}
.css-foypzif a{color:#aaa;text-decoration:none}
.css-106iuex{padding:0 0 16px;margin-bottom:24px;font-size:12px;color:#aaa;font-style:italic;border-bottom:1px solid #eee}
.css-3gmn4rz{padding:16px 0 0;margin-top:32px;font-size:11px;color:#999;border-top:1px solid #eee}
.css-7oelm3o{font-size:12px;color:#aaa;margin:-26px 0 32px;font-weight:300}
.css-573lyfd{margin:0 auto 32px;max-width:720px}
.css-sjgxr4y{width:100%;height:auto}
.css-a82mi19{margin-top:40px;padding-top:20px;border-top:1px solid #eee;font-size:14px;color:#888}
.css-a82mi19 em{color:#aaa}
.css-a82mi19 a{color:#555;border-bottom:1px solid #ddd;text-decoration:none}
.css-nkrym6y{padding:24px 0 0;border-top:1px solid #eee;margin-top:24px}
.css-nkrym6y p{padding:3px 0;margin:0;font-size:15px}
.css-nkrym6y a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.css-nkrym6y a:hover{border-bottom-color:#2a2a2a}
/* === Theme === */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;500;600;700&family=Playfair+Display:wght@400;700&display=swap');
body{font-family:'Source Sans Pro',sans-serif;color:#2C2C2C;background:#F9F7F2}
.css-gah8wht{background:#2D3A27;color:#fff}
.css-gah8wht h1{font-family:'Playfair Display',serif;color:#fff}
.css-gah8wht p{color:rgba(255,255,255,.75)}
.css-gah8wht a{color:#fff;text-decoration:none}
.card h2{font-family:'Playfair Display',serif}
.card h2 a{color:#2D3A27}
.card h2 a:hover{color:#C05746}
.read-more{color:#C05746}
.article-content h1{font-family:'Playfair Display',serif}
.article-content h2{font-family:'Playfair Display',serif}
.article-content a{color:#C05746}
.article-content img{border-radius:8px}
.affiliate-disclosure{border-radius:8px}
.ymyl-disclaimer{border-radius:8px}
/* === Custom === */
@import url('https://fonts.googleapis.com/css2?family=Cardo:ital,wght@0,400;0,700;1,400&family=Jost:wght@400;500;600&display=swap');

/* Design tokens */
:root {
  --color-bg:          #F0F2EE;
  --color-text:        #1C2118;
  --color-heading:     #253028;
  --color-primary:     #7A6130;
  --color-accent:      #5A7A5E;
  --color-secondary:   #A08048;
  --color-surface:     #E4E8E2;
  --color-border:      #C4CAC0;
  --color-muted:       #596058;
  --color-link:        #7A6130;
  --color-link-hover:  #5A4520;
  --color-header-bg:   #253028;
  --color-header-text: #E8EDE6;
  --color-footer-bg:   #1A221C;
  --color-footer-text: #A8B4A8;
  --font-heading: 'Cardo', Georgia, serif;
  --font-body:    'Jost', system-ui, sans-serif;
  --size-base: 17px;
  --lh-body:    1.76;
  --lh-heading: 1.2;
  --max-prose:  68ch;
  --radius:      4px;
  --radius-card: 8px;
  --spacing:     3rem;
  --shadow-card: 0 2px 8px rgba(28, 33, 24, 0.08);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: var(--size-base);
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: var(--lh-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* Headings */
:root h1,
:root h2,
:root h3,
:root h4 {
  font-family: var(--font-heading);
  line-height: var(--lh-heading);
  color: var(--color-heading);
  margin-top: 0;
  font-weight: 700;
}

:root h1 { font-size: 2.4rem;  margin-bottom: 0.9rem; }
:root h2 { font-size: 1.75rem; margin-bottom: 0.75rem; }
:root h3 { font-size: 1.3rem;  margin-bottom: 0.6rem; }
:root h4 { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.5rem; }

/* Body text */
:root p {
  margin-top: 0;
  margin-bottom: 1.1rem;
  max-width: var(--max-prose);
}

:root ul,
:root ol {
  margin-top: 0;
  margin-bottom: 1.1rem;
  padding-left: 1.5rem;
  max-width: var(--max-prose);
}

:root li { margin-bottom: 0.45rem; }

:root blockquote {
  margin: 1.75rem 0;
  padding: 1rem 1.5rem;
  border-left: 3px solid var(--color-accent);
  background: var(--color-surface);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--color-muted);
  font-style: italic;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  max-width: var(--max-prose);
}

:root blockquote p { margin-bottom: 0; }

/* Links */
:root a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.18s ease;
}

:root a:hover { color: var(--color-link-hover); }

/* Images */
:root img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
}

/* Header */
:root .mag-header {
  background-color: var(--color-header-bg);
  color: var(--color-header-text);
  padding: 2rem 1.5rem 1.75rem;
}

:root .mag-header h1 {
  font-family: var(--font-heading);
  color: var(--color-header-text);
  font-size: 1.95rem;
  margin-bottom: 0.4rem;
  letter-spacing: 0.01em;
  font-weight: 700;
}

:root .mag-header p {
  color: rgba(232, 237, 230, 0.68);
  font-size: 0.95rem;
  margin-bottom: 0;
  max-width: none;
}

:root .mag-header a { color: var(--color-header-text); text-decoration: none; }
:root .mag-header a:hover { color: var(--color-secondary); }

/* Navigation */
:root .mag-nav,
:root nav {
  background-color: var(--color-accent);
  padding: 0.6rem 1.5rem;
}

:root .mag-nav a,
:root nav a {
  color: #fff;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius);
  transition: background 0.18s ease;
}

:root .mag-nav a:hover,
:root nav a:hover {
  background-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* Article content */
:root .article-content {
  font-size: 1.06rem;
  line-height: var(--lh-body);
}

:root .article-content h1,
:root .article-content h2,
:root .article-content h3 {
  font-family: var(--font-heading);
  color: var(--color-heading);
}

:root .article-content h2 {
  margin-top: 2.2em;
  margin-bottom: 0.6em;
}

:root .article-content a { color: var(--color-link); font-weight: 500; }
:root .article-content a:hover { color: var(--color-link-hover); }

:root .article-content img {
  border-radius: var(--radius-card);
  margin: 1.5rem 0;
}

/* Cards */
:root .card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

:root .card:hover {
  box-shadow: 0 5px 18px rgba(28, 33, 24, 0.13);
  transform: translateY(-2px);
}

:root .card h2 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1.25;
  margin-bottom: 0.4rem;
}

:root .card h2 a { color: var(--color-heading); text-decoration: none; }
:root .card h2 a:hover { color: var(--color-primary); }

:root .card .card-meta,
:root .card .card-date {
  font-size: 0.8rem;
  color: var(--color-muted);
  letter-spacing: 0.02em;
  margin-bottom: 0.5rem;
}

:root .card p { font-size: 0.95rem; color: var(--color-text); margin-bottom: 0.75rem; }

:root .card .read-more {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}

:root .card .read-more:hover { color: var(--color-link-hover); text-decoration: underline; }

/* Related articles aside */
:root main aside {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--color-border);
}

:root main aside h4 {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-muted);
  margin-bottom: 0.6rem;
  font-weight: 600;
  font-family: var(--font-body);
}

.mag-related-grid {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.mag-related-item a {
  display: block;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  font-weight: 500;
  color: var(--color-heading);
}

.mag-related-item a:hover { color: var(--color-primary); }

/* HR */
:root hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--spacing) 0;
}

/* Footer */
:root footer,
:root .mag-footer {
  background-color: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding: 2rem 1.5rem;
  font-size: 0.88rem;
}

:root footer a,
:root .mag-footer a {
  color: var(--color-footer-text);
  text-decoration: underline;
  text-decoration-color: rgba(168, 180, 168, 0.4);
}

:root footer a:hover,
:root .mag-footer a:hover {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.55);
}

/* Utility */
:root .text-muted { color: var(--color-muted); }

/* Responsive */
@media (max-width: 600px) {
  :root h1 { font-size: 1.85rem; }
  :root h2 { font-size: 1.4rem; }
  :root h3 { font-size: 1.15rem; }
  :root .mag-header { padding: 1.4rem 1rem 1.2rem; }
  :root .mag-header h1 { font-size: 1.5rem; }
}

/* === R2 fixes (2026-07-01T15:40:08.289541+00:00) === */

/* Fix 1 + Fix 5: Header contrast & breathing room */
:root .mag-header {
  padding: 2.5em 2em;
}

:root .mag-header h1 {
  color: #F5F2EC;
  font-size: 2.3rem;
}

:root .mag-header a {
  color: #F5F2EC;
}

/* Fix 2 + Fix 6: Article paragraph readability & inter-section breathing */
:root .article-content p {
  line-height: 1.8;
  margin-bottom: 1.2em;
}

/* Fix 3: Article section headings — stronger landmark spacing */
:root .article-content h2 {
  margin-top: 2.5em;
  margin-bottom: 0.5em;
}

/* Fix 4: Related articles block — soft tinted card instead of dark banner */
:root main nav,
:root main aside {
  background-color: #E8EDE5;
  color: #3A4A38;
  border-top: none;
  border-left: 3px solid #5A7A5E;
  padding: 1em 1.4em;
  border-radius: 4px;
  margin-top: 2.5rem;
}

/* === R3 fixes (2026-07-01T16:20:09.362984+00:00) === */

/* Fix R3-1: Hero h1 visibility — ensure site name reads clearly on dark header */
header h1 {
  color: #F5F2EC;
  font-size: 1.9em;
  letter-spacing: 0.01em;
}

/* Fix R3-2: Scrollable wide tables in article content */
.bld-content table {
  display: block;
  overflow-x: auto;
  font-size: 0.82em;
  border-collapse: collapse;
}

.bld-content th,
.bld-content td {
  min-width: 90px;
  padding: 0.45em 0.6em;
  vertical-align: top;
}

/* Fix R3-3: Tagline/subtitle legibility in hero header */
header p,
header .tagline {
  color: rgba(245, 242, 236, 0.82);
  font-size: 0.95em;
  font-style: italic;
  margin-top: 0.6em;
  line-height: 1.5;
}

header {
  padding-top: 2.8em;
  padding-bottom: 2.8em;
}

/* Fix R3-4: List item size parity with body text */
.bld-content ul li,
.bld-content ol li {
  font-size: 1em;
  line-height: 1.75;
  margin-bottom: 0.25em;
}

/* === R4 fixes (2026-07-01T18:30:28.888737+00:00) === */

/* Fix R4-1: Header h1 — specificity (0,1,2) beats :root h1 (0,1,1), garantit la couleur crème sur fond sombre */
:root header h1 {
  color: #F5F2EC;
  font-size: 2.1rem;
  letter-spacing: 0.02em;
}

:root header h1 a,
:root header h1 a:visited {
  color: #F5F2EC;
  text-decoration: none;
}

/* Fix R4-2: Tables dans <article> — overflow horizontal avec bon sélecteur */
article table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 0.82em;
  border-collapse: collapse;
  max-width: 100%;
}

article th,
article td {
  min-width: 100px;
  padding: 0.4em 0.6em;
  vertical-align: top;
}

article td:last-child {
  white-space: normal;
  min-width: 140px;
}

/* Fix R4-3: Listes dans <article> — taille et interligne normalisés */
article ul li,
article ol li {
  font-size: 1rem;
  line-height: 1.78;
  margin-bottom: 0.3em;
}

/* === QA round-1 fixes (2026-07-29T21:43:44+0800) === */
/* Editorial signature pass for "Patience au Jardin" — Helene's bonsai diary.
   The top-of-file @import is dead (concatenated after rules), so fonts are
   declared as position-independent @font-face here. Theme /theme-assets are
   404, so the masthead stays a full-bleed moss panel, no photo.
   Live structure: home = header(h1+tagline) > main > div.card ×N > footer;
   article = header(a) > main > h1 + article + nav(related) > footer.
   Moment colour = warm rust #B34F2A, used in exactly TWO places:
   the masthead hairline and the hero drop cap. */

@font-face { font-family:'Cardo'; font-style:normal; font-weight:400; font-display:swap;
  src:url(https://fonts.gstatic.com/s/cardo/v21/wlp_gwjKBV1pqhv23IEp2A.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:'Cardo'; font-style:normal; font-weight:400; font-display:swap;
  src:url(https://fonts.gstatic.com/s/cardo/v21/wlp_gwjKBV1pqhvM3IEp2A.woff2) format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Cardo'; font-style:normal; font-weight:700; font-display:swap;
  src:url(https://fonts.gstatic.com/s/cardo/v21/wlpygwjKBV1pqhND-ZQY-WN3aQ.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:'Cardo'; font-style:normal; font-weight:700; font-display:swap;
  src:url(https://fonts.gstatic.com/s/cardo/v21/wlpygwjKBV1pqhND-ZQi-WN3aQ.woff2) format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Cardo'; font-style:italic; font-weight:400; font-display:swap;
  src:url(https://fonts.gstatic.com/s/cardo/v21/wlpxgwjKBV1pqhv97IMx3A.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:'Cardo'; font-style:italic; font-weight:400; font-display:swap;
  src:url(https://fonts.gstatic.com/s/cardo/v21/wlpxgwjKBV1pqhv97I0x3F5O.woff2) format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Jost'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url(https://fonts.gstatic.com/s/jost/v20/92zatBhPNqw73oTd4g.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:'Jost'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url(https://fonts.gstatic.com/s/jost/v20/92zatBhPNqw73ord4iYl.woff2) format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --color-rust: #B34F2A;
  --moss-1: #253028;
  --moss-2: #313f33;
}

/* ---- Masthead: full-bleed moss panel, serif-italic wordmark, rust hairline,
   leaf signature mark. Shared across home + article so the two pages read as
   one publication. The width class (max-width:640) is dropped here. ---- */
:root header {
  max-width: none;
  background: linear-gradient(158deg, var(--moss-2) 0%, var(--moss-1) 100%);
  color: #F2EFE7;
  padding: 3.8rem 1.5rem 0;
  margin-bottom: 3rem;
  border-bottom: 3px solid var(--color-rust);
  text-align: center;
}
:root header::before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  margin: 0 auto 1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9C3AC' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M12 22V9'/%3E%3Cpath d='M12 13c0-4 1.6-7 6-9-.4 4.4-2 7.6-6 9z'/%3E%3Cpath d='M12 16C7.5 14 6 10.5 6 6c4 1.6 6 5.4 6 10z'/%3E%3C/svg%3E") center/contain no-repeat;
}
:root header::after {
  content: "un arbre, une semaine, sans se presser";
  display: block;
  font-family: 'Cardo', Georgia, serif;
  font-style: italic;
  font-size: 0.9rem;
  color: rgba(242, 239, 231, 0.6);
  letter-spacing: 0.02em;
  padding: 1.1rem 0 1.6rem;
}
/* Home wordmark (h1) */
:root header h1 {
  font-family: 'Cardo', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: #F5F2EC;
  font-size: 2.85rem;
  letter-spacing: 0.005em;
  line-height: 1.05;
  margin: 0 auto 0;
  max-width: 22ch;
}
/* Article wordmark (a) — matches the home h1 voice */
:root header a {
  font-family: 'Cardo', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: #F5F2EC;
  font-size: 2.1rem;
  letter-spacing: 0.005em;
  text-decoration: none;
  border-bottom: none;
}
:root header a:hover { color: #F5F2EC; }
/* Home tagline / manifesto */
:root header p {
  font-family: 'Cardo', Georgia, serif;
  font-style: italic;
  color: rgba(242, 239, 231, 0.78);
  font-size: 1.02rem;
  line-height: 1.55;
  max-width: 46ch;
  margin: 0.9rem auto 0;
}
/* When there is no tagline (article), tighten the manifesto ::after gap */
:root header:has(> a)::after { padding-top: 0.85rem; }

/* ---- HOME layout: hero → picks band → chronological grid.
   Scoped to the home <main> via :has(> div > h2) (article <main> has no such
   child), with :root + :nth-of-type carrying enough weight to beat the
   template's .css-yapwyjc / .css-h2bizhn descendant rules. ---- */
:root main:nth-of-type(1):has(> div > h2) {
  max-width: 1120px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2.4rem 2.2rem;
  padding: 0 1.5rem 1rem;
}

/* Base card treatment (home only — article <main> has no direct <div>) */
:root main > div {
  background: #FBFCFA;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 1.5rem 1.5rem 1.6rem;
  margin: 0;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
:root main > div:hover {
  box-shadow: 0 6px 20px rgba(28, 33, 24, 0.1);
  transform: translateY(-2px);
  border-color: #AEBAA8;
}
:root main > div > p:first-child {           /* date → tracked kicker */
  font-family: 'Jost', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.66rem;
  font-weight: 500;
  color: var(--color-accent);
  margin: 0 0 0.55rem;
}
:root main > div > h2 {
  font-family: 'Cardo', Georgia, serif;
  font-weight: 700;
  font-size: 1.28rem;
  line-height: 1.22;
  margin: 0 0 0.5rem;
}
:root main > div > h2 a {
  color: var(--color-heading);
  text-decoration: none;
  border-bottom: none;
}
:root main > div > h2 a:hover { color: var(--color-primary); }
:root main > div > p {
  font-size: 0.92rem;
  line-height: 1.62;
  color: #4A5148;
  margin: 0 0 0.9rem;
  max-width: none;
}
:root main > div > a {                        /* read-more */
  display: inline-block;
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid rgba(122, 97, 48, 0.35);
  padding-bottom: 1px;
}
:root main > div > a:hover {
  color: var(--color-link-hover);
  border-bottom-color: var(--color-link-hover);
}

/* --- HERO (card 1): full-width tinted panel, big display title, byline
   kicker, rust drop cap, outlined pill CTA, ghost botanical watermark
   filling the right side so the row is never lopsided. --- */
:root main > div:first-child {
  grid-column: 1 / -1;
  position: relative;
  overflow: hidden;
  background: linear-gradient(152deg, #EBF0E8 0%, #E0E7DE 100%);
  border: 1px solid #C0C9BB;
  padding: 3rem 3rem 3.1rem;
}
:root main > div:first-child::before {        /* ghost mark, fills right column */
  content: "\002766";
  position: absolute;
  top: -1.5rem;
  right: 1rem;
  font-family: 'Cardo', Georgia, serif;
  font-size: 13rem;
  line-height: 1;
  color: rgba(90, 122, 94, 0.11);
  pointer-events: none;
}
:root main > div:first-child > * { position: relative; max-width: 34rem; }
:root main > div:first-child > p:first-child { /* byline kicker */
  color: var(--color-primary);
  font-size: 0.7rem;
}
:root main > div:first-child > p:first-child::before { content: "Dernier carnet\0000A0\0000B7\0000A0"; }
:root main > div:first-child > p:first-child::after  { content: "\0000A0\0000B7\0000A0par Hélène"; }
:root main > div:first-child > h2 {
  font-size: 2.5rem;
  line-height: 1.08;
  margin-bottom: 0.7rem;
}
:root main > div:first-child > p:nth-of-type(2) {  /* excerpt with drop cap */
  font-size: 1.05rem;
  line-height: 1.66;
  color: #3C4339;
}
:root main > div:first-child > p:nth-of-type(2)::first-letter {
  font-family: 'Cardo', Georgia, serif;
  float: left;
  font-size: 3.5rem;
  line-height: 0.8;
  padding: 0.28rem 0.5rem 0 0;
  color: var(--color-rust);
}
:root main > div:first-child > a {             /* pill CTA */
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  padding: 0.55rem 1.3rem;
  margin-top: 0.4rem;
}
:root main > div:first-child > a:hover {
  background: var(--color-primary);
  color: #FBFCFA;
  border-color: var(--color-primary);
}

/* --- PICKS band (cards 2–4): three across, roman-numeral kickers, sage top
   rule, a labelled band that gives the "second moment". --- */
:root main > div:nth-child(n+2):nth-child(-n+4) {
  grid-column: span 2;
  margin-top: 4rem;
  background: transparent;
  border: none;
  border-top: 2px solid var(--color-accent);
  border-radius: 0;
  padding: 1.1rem 0 0.4rem;
}
:root main > div:nth-child(n+2):nth-child(-n+4):hover {
  box-shadow: none;
  transform: none;
}
:root main > div:nth-child(n+2):nth-child(-n+4) > h2 { font-size: 1.14rem; }
/* roman numeral prefixed onto the date kicker */
:root main > div:nth-child(2) > p:first-child::before { content: "N\0000BA I\0000A0\0000B7\0000A0"; color: var(--color-primary); }
:root main > div:nth-child(3) > p:first-child::before { content: "N\0000BA II\0000A0\0000B7\0000A0"; color: var(--color-primary); }
:root main > div:nth-child(4) > p:first-child::before { content: "N\0000BA III\0000A0\0000B7\0000A0"; color: var(--color-primary); }
/* band label, anchored above card 2, growing upward */
:root main > div:nth-child(2) { position: relative; }
:root main > div:nth-child(2)::before {
  content: "Les choix d'Hélène\0000A0\0000B7\0000A0à lire en premier";
  position: absolute;
  left: 0;
  bottom: calc(100% + 1.1rem);
  font-family: 'Jost', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-heading);
  white-space: nowrap;
}

/* --- CHRONOLOGICAL grid (cards 5+): two per row, consistent treatment. --- */
:root main > div:nth-child(n+5) {
  grid-column: span 3;
}

/* ---- ARTICLE page polish: massive serif title, dinkus dividers between
   sections, drop cap on the intro, and a legible related block. ---- */
:root main:nth-of-type(1):has(> article) {
  max-width: 720px;
}
:root main:nth-of-type(1):has(> article) > h1 {
  font-family: 'Cardo', Georgia, serif;
  font-size: 2.6rem;
  line-height: 1.1;
  font-weight: 700;
  margin: 0.4rem 0 0.4rem;
}
:root main:nth-of-type(1):has(> article) article > p:first-of-type::first-letter {
  font-family: 'Cardo', Georgia, serif;
  float: left;
  font-size: 3.4rem;
  line-height: 0.82;
  padding: 0.3rem 0.5rem 0 0;
  color: var(--color-rust);
}
:root main:nth-of-type(1):has(> article) article > h2 {
  font-family: 'Cardo', Georgia, serif;
  font-size: 1.55rem;
  font-weight: 700;
  border-bottom: none;
  padding-bottom: 0;
  margin: 2.4rem 0 0.7rem;
}
:root main:nth-of-type(1):has(> article) article > h2:not(:first-of-type)::before {
  content: "\002733\0000A0\0000A0\002733\0000A0\0000A0\002733";
  display: block;
  text-align: center;
  color: var(--color-accent);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  margin: 2.2rem 0 1.9rem;
}

/* Related block ("Articles connexes") — high-contrast, tinted panel.
   Beats template .css-a82mi19 a (0,2,0) via :root + :nth-of-type (0,2,3). */
:root main:nth-of-type(1) > nav {
  background: #E7ECE3;
  border: none;
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 1.2rem 1.5rem;
  margin-top: 3rem;
  color: var(--color-text);
}
:root main:nth-of-type(1) > nav em {
  display: block;
  font-style: normal;
  font-family: 'Jost', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 0.6rem;
}
:root main:nth-of-type(1) > nav a {
  color: var(--color-heading);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(122, 97, 48, 0.35);
}
:root main:nth-of-type(1) > nav a:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* ---- Responsive: collapse the 6-col home grid. Spans create implicit
   tracks, so every band is reset to a single column at each breakpoint
   (matching the desktop rule's specificity). ---- */
@media (max-width: 900px) {
  :root main:nth-of-type(1):has(> div > h2) {
    grid-template-columns: 1fr 1fr;
    gap: 2rem 1.6rem;
  }
  :root main > div:first-child { grid-column: 1 / -1; }
  :root main > div:nth-child(n+2):nth-child(-n+4) { grid-column: span 2; margin-top: 3.4rem; }
  :root main > div:nth-child(n+5) { grid-column: span 1; }
  :root main > div:first-child > h2 { font-size: 2rem; }
  :root main > div:first-child::before { font-size: 9rem; }
}

@media (max-width: 600px) {
  :root header { padding-top: 2.6rem; }
  :root header h1 { font-size: 2rem; }
  :root header a { font-size: 1.6rem; }
  :root main:nth-of-type(1):has(> div > h2) {
    grid-template-columns: 1fr;
    padding: 0 1.1rem 1rem;
  }
  :root main > div:first-child { grid-column: 1 / -1; padding: 2rem 1.4rem; }
  :root main > div:nth-child(n+2):nth-child(-n+4) { grid-column: 1 / -1; margin-top: 3.2rem; }
  :root main > div:nth-child(n+5) { grid-column: 1 / -1; }
  :root main > div:nth-child(2)::before { white-space: normal; }
  :root main > div:first-child > h2 { font-size: 1.75rem; }
  :root main:nth-of-type(1):has(> article) > h1 { font-size: 2rem; }
}


/* === QA tail polish (2026-07-30T01:56:15.206085+00:00) — style Lambda [SB-20] compact tail across templates === */
/* The tail wrapper is always the LAST block child of <main> on the homepage,
   containing title-only rows of older articles. Various templates use different
   inner structures (ul>li / p / direct <a>) — this handles all three. */

:root main > *:last-child:not(:has(h2)):not(:has(h1)):not(:has(article)) {
  grid-column: 1 / -1;
  max-width: min(720px, 92vw);
  margin: 88px auto 0;
  padding: 40px 0 32px;
  border-top: 2px double rgba(0, 0, 0, .16);
  background: transparent;
  box-shadow: none;
}

:root main > *:last-child:not(:has(h2)):not(:has(h1)):not(:has(article))::before {
  content: "\2014  MORE FROM THE ARCHIVE  \2014";
  display: block;
  text-align: center;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  opacity: .5;
  margin-bottom: 36px;
}

/* Any list / paragraph rows: 2-col on desktop, single on mobile */
:root main > *:last-child ul {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: 48px;
}
@media (max-width: 899px) {
  :root main > *:last-child ul { columns: 1; }
}

:root main > *:last-child li,
:root main > *:last-child > p,
:root main > *:last-child > a {
  padding: 10px 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px;
  line-height: 1.4;
  border-bottom: 1px dotted rgba(0, 0, 0, .12);
  break-inside: avoid;
  display: block;
}

:root main > *:last-child li a,
:root main > *:last-child p a,
:root main > *:last-child > a {
  text-decoration: none;
  font-weight: 600;
}

:root main > *:last-child li a:hover,
:root main > *:last-child p a:hover,
:root main > *:last-child > a:hover {
  text-decoration: underline;
}

/* dates (first inline child of li/p) — subtle mono */
:root main > *:last-child p > :first-child,
:root main > *:last-child li > :first-child:not(a) {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 11px;
  letter-spacing: .1em;
  opacity: .5;
  margin-right: 10px;
}