*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;line-height:1.7;color:#111;background:#fff}
.nav-77ed12{max-width:900px;margin:0 auto;padding:0 28px}
.frame-fc7858{background:#111;color:#fff;padding:64px 0;margin-bottom:48px}
.frame-fc7858 h1{font-size:42px;font-weight:800;letter-spacing:-1px;margin-bottom:8px}
.frame-fc7858 p{font-size:18px;opacity:.7}
.frame-fc7858 a{color:#fff;text-decoration:none;font-size:22px;font-weight:800}
.widget-e39a7b{padding:0}
.main-252904{padding:32px 0;border-left:4px solid #111;padding-left:24px;margin-bottom:28px}
.main-252904 h2{font-size:24px;font-weight:700;margin-bottom:6px}
.main-252904 h2 a{color:#111;text-decoration:none}
.main-252904 h2 a:hover{text-decoration:underline}
.main-252904 .header-288f09{font-size:12px;font-weight:600;text-transform:uppercase;color:#888;letter-spacing:1px;margin-bottom:8px}
.main-252904 p{font-size:15px;color:#444;margin-bottom:10px}
.content-3ee438{display:inline-block;background:#111;color:#fff;padding:8px 20px;font-size:13px;font-weight:700;text-decoration:none;text-transform:uppercase;letter-spacing:1px}
.content-3ee438:hover{background:#333}
.block-bd52fd{padding-bottom:60px}
.block-bd52fd h1{font-size:38px;font-weight:800;letter-spacing:-1px;margin-bottom:10px}
.block-bd52fd time{font-size:12px;font-weight:600;text-transform:uppercase;color:#888;letter-spacing:1px;display:block;margin-bottom:28px}
.block-bd52fd h2{font-size:26px;font-weight:700;margin:40px 0 14px}
.block-bd52fd h3{font-size:20px;font-weight:700;margin:32px 0 10px}
.block-bd52fd p{margin-bottom:18px;font-size:17px}
.block-bd52fd ul,.block-bd52fd ol{margin:0 0 18px 24px}
.block-bd52fd a{color:#111;font-weight:600;text-decoration:underline}
.block-bd52fd img{max-width:100%;height:auto;margin:20px 0}
.module-6a84bf{background:#111;color:#888;padding:28px 0;margin-top:48px;text-align:center;font-size:12px}
.module-6a84bf a{color:#888;text-decoration:none}
.section-2d2a34{background:#222;color:#aaa;padding:14px 20px;margin-bottom:24px;font-size:13px;font-style:italic}
.region-477b4d{background:#1a1a1a;color:#888;padding:14px 20px;margin-top:32px;font-size:12px;border-top:3px solid #444}
.widget-4312c2{font-size:12px;font-weight:600;text-transform:uppercase;color:#666;letter-spacing:1px;margin:-20px 0 28px;padding-left:12px;border-left:2px solid #ccc}
.shell-85cf9f{margin:0 0 24px}
.widget-57a335{width:100%;height:auto;border-radius:0}
.content-16f3f7{border-left:4px solid #111;padding-left:24px;margin-top:48px}
.content-16f3f7 h3{font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}
.content-16f3f7 ul{list-style:none;padding:0}
.content-16f3f7 li{padding:6px 0}
.content-16f3f7 a{color:#111;text-decoration:underline;font-weight:600}
.layout-cc3043{border-left:4px solid #ddd;padding-left:24px;margin-top:36px}
.layout-cc3043 ul{list-style:none;padding:0}
.layout-cc3043 li{padding:6px 0;font-size:16px}
.layout-cc3043 a{color:#111;text-decoration:none;font-weight:600}
.layout-cc3043 a:hover{text-decoration:underline}
.layout-cc3043 .header-288f09{margin:0 0 0 8px}
/* === Theme === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@400;700&display=swap');
body{font-family:'Inter',sans-serif;color:#0F172A;background:#F8FAFC}
.frame-fc7858{background:#1E293B;color:#fff}
.frame-fc7858 h1{font-family:'Playfair Display',serif;color:#fff}
.frame-fc7858 p{color:rgba(255,255,255,.75)}
.frame-fc7858 a{color:#fff;text-decoration:none}
.card h2{font-family:'Playfair Display',serif}
.card h2 a{color:#1E293B}
.card h2 a:hover{color:#D97706}
.read-more{color:#D97706}
.article-content h1{font-family:'Playfair Display',serif}
.article-content h2{font-family:'Playfair Display',serif}
.article-content a{color:#D97706}
.article-content img{border-radius:8px}
.affiliate-disclosure{border-radius:8px}
.ymyl-disclaimer{border-radius:8px}
/* === Custom === */
/* op-orateur-fr — custom.css
   Vincent Charpentier, coordinateur logistique devenu orateur pragmatique
   Palette ardoise-navy + ambre : autorité posée, pas de pep talk */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,500;0,600;0,700;1,600&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,400;1,9..144,600;1,9..144,700&family=Karla:wght@400;500;700&display=swap');

:root {
  --primary:       #1C2B3D;
  --primary-dark:  #101A26;
  --primary-light: #E7ECF2;
  --accent:        #D97706;
  --accent-dark:   #B45F04;
  --accent-light:  #FBEBD3;
  --bg:            #FDFCFB;
  --surface:       #FFFFFF;
  --surface-alt:   #F4F1EC;
  --fg:            #1F2937;
  --fg-muted:      #5B6472;
  --heading:       #101A26;
  --border:        #E2E0DA;
  --r:             6px;
  --font-heading:  'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --font-body:     'Karla', Arial, sans-serif;
  --font-display:  'Fraunces', Georgia, 'Times New Roman', serif;
  --moment:        #B45F04;
  --max-text:      68ch;
  --max-content:   780px;
}

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

html {
  font-size: 17px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--fg);
  background-color: var(--bg);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
}

::selection {
  background-color: var(--accent-light);
  color: var(--primary-dark);
}

/* --- Headings --- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  color: var(--heading);
  margin-top: 1.6em;
  margin-bottom: 0.5em;
  letter-spacing: -0.005em;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; font-weight: 700; }

/* --- Prose --- */
p {
  margin-top: 0;
  margin-bottom: 1.25em;
  max-width: var(--max-text);
}

a {
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--accent);
}

strong,
b {
  font-weight: 700;
  color: var(--heading);
}

em,
i {
  font-style: italic;
}

ul,
ol {
  padding-left: 1.5em;
  margin-bottom: 1.25em;
  max-width: var(--max-text);
}

li {
  margin-bottom: 0.4em;
}

li::marker {
  color: var(--accent);
  font-weight: 700;
}

blockquote {
  margin: 1.75em 0;
  padding: 1em 1.5em;
  border-left: 3px solid var(--accent);
  background-color: var(--surface-alt);
  font-style: italic;
  color: var(--fg-muted);
  border-radius: 0 var(--r) var(--r) 0;
  max-width: var(--max-text);
}

blockquote p {
  margin-bottom: 0;
  max-width: none;
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2.2em auto;
  max-width: 36ch;
}

/* --- Bold template: hero banner --- */
.frame-fc7858 {
  background-color: var(--primary);
  color: #FFFFFF;
  padding: 3rem 1.5rem 2.75rem;
  text-align: center;
}

.frame-fc7858 h1 {
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-top: 0;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}

.frame-fc7858 p {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.78);
  max-width: 560px;
  margin: 0 auto;
  font-weight: 400;
}

.frame-fc7858 a {
  color: var(--accent-light);
  text-decoration: none;
  font-weight: 700;
}

.frame-fc7858 a:hover {
  color: #FFFFFF;
}

/* --- Navigation --- */
nav {
  background-color: var(--primary-dark);
  padding: 0.6rem 1.5rem;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  align-items: center;
}

nav a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}

nav a:hover {
  color: var(--accent-light);
}

/* --- Cards (listing page) --- */
.card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 8px rgba(16, 26, 38, 0.06);
  transition: box-shadow 0.2s ease;
}

.card:hover {
  box-shadow: 0 4px 16px rgba(16, 26, 38, 0.1);
}

.card h2 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--primary);
  margin-top: 0;
  margin-bottom: 0.45rem;
}

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

.card h2 a:hover {
  color: var(--accent-dark);
}

.card p {
  color: var(--fg-muted);
  font-size: 0.93rem;
  margin-bottom: 0.75rem;
  max-width: none;
}

.card time,
.card .date {
  font-size: 0.8rem;
  color: #4B5563;
  font-weight: 500;
  letter-spacing: 0.03em;
  font-family: var(--font-heading);
}

.read-more {
  color: var(--accent-dark);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--accent-dark);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.read-more:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* --- Article content --- */
.article-content {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 2.25rem 1.5rem;
}

.article-content h1 {
  font-family: var(--font-heading);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.2;
  margin-top: 0;
}

.article-content h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
  margin-top: 2.2em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--border);
}

.article-content h3 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary);
  margin-top: 1.75em;
}

.article-content p {
  font-size: 1rem;
  line-height: 1.75;
  max-width: var(--max-text);
}

.article-content a {
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article-content a:hover {
  color: var(--accent);
}

.article-content img {
  border-radius: var(--r);
  margin: 1.75em 0;
}

.article-content blockquote {
  margin: 2em 0;
  padding: 1.1em 1.5em;
  border-left: 3px solid var(--accent);
  background-color: var(--surface-alt);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--fg-muted);
  border-radius: 0 var(--r) var(--r) 0;
}

.article-content ul,
.article-content ol {
  font-size: 1rem;
  line-height: 1.75;
  max-width: var(--max-text);
}

/* --- Post meta --- */
.post-meta,
.entry-meta {
  font-size: 0.82rem;
  color: #4B5563;
  font-weight: 500;
  font-family: var(--font-heading);
  margin-bottom: 2rem;
  letter-spacing: 0.02em;
}

/* --- Footer --- */
footer {
  background-color: var(--primary-dark);
  color: rgba(255, 255, 255, 0.72);
  padding: 2rem 1.5rem;
  text-align: center;
  font-size: 0.82rem;
  margin-top: 3.5rem;
}

footer a {
  color: var(--accent-light);
  text-decoration: underline;
}

footer a:hover {
  color: #FFFFFF;
}

/* --- Responsive --- */
@media (max-width: 600px) {
  html {
    font-size: 16px;
  }

  .frame-fc7858 {
    padding: 2rem 1rem 1.75rem;
  }

  .frame-fc7858 h1 {
    font-size: 1.9rem;
  }

  .article-content {
    padding: 1.5rem 1rem;
  }

  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.4rem; }
  h3 { font-size: 1.15rem; }
}

/* === R2 fixes (2026-07-06T06:40:20.757698+00:00) === */

/* Reinforce accent color on inline links so they read as clickable
   at a glance, not just via underline (higher specificity than the
   base `a` rule so it wins regardless of surrounding context). */
.article-content p a,
.article-content li a,
p a,
li a {
  color: var(--accent-dark);
}

/* In-article table-of-contents nav is nested inside .article-content,
   so `.article-content a` (class + type) was outranking the plain
   `nav a` (type + type) rule and painting jump links in a low-contrast
   rust tone against the dark nav background. */
.article-content nav a {
  color: var(--accent-light);
}

.article-content nav a:hover {
  color: #FFFFFF;
}

/* --- Comparison tables (e.g. glossary) --- */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.75em 0;
}

th,
td {
  padding: 0.85em 1em;
  vertical-align: top;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

tr:nth-child(even) {
  background-color: var(--surface-alt);
}

/* === R3 fixes (2026-07-06T07:20:08.836116+00:00) === */

/* Bare-tag fallback: homepage publish date was still rendering neutral
   grey despite .card time/.post-meta/.entry-meta already setting
   #4B5563, suggesting the live date element isn't actually carrying
   those classes. Target the bare `time` element directly so the color
   reaches it regardless of ancestor class. */
time {
  color: #4B5563;
  font-weight: 500;
}

/* === QA round-1 fixes (2026-07-26T02:02:20+0800) === */
/* Live HTML uses obfuscated class names (frame-fc7858, main-252904, …) so
   every rule below is ELEMENT + STRUCTURAL only. Editorial system:
   Fraunces (serif italic) = display voice / wordmark / featured / article H1
   Barlow Semi Condensed  = tracked-uppercase meta + section subheads
   Karla                  = body text
   Amber (#D97706 / #B45F04) = the single "moment" colour, the surligneur
   on ce qui a réellement fonctionné. */

/* ---- Masthead: photo + gradient + wordmark + monogram (both templates) ---- */
body > div:first-child {
  background-color: var(--primary-dark);
  background-image:
    linear-gradient(rgba(16, 26, 38, 0.80), rgba(16, 26, 38, 0.93)),
    url("/theme-assets/hero-masthead.jpg");
  background-size: cover;
  background-position: center 38%;
  padding: 0;
  text-align: center;
  border-bottom: 3px solid var(--accent);
}

body > div:first-child > div {
  max-width: 1140px;
  margin: 0 auto;
  padding: 3.1rem 1.5rem 2.9rem;
  position: relative;
}

/* signature monogram — a "voix posée" level-meter inside a ring */
body > div:first-child > div::before {
  content: "";
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto 1.05rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%3E%3Ccircle%20cx='24'%20cy='24'%20r='22'%20fill='none'%20stroke='%23D97706'%20stroke-width='2'/%3E%3Crect%20x='15.5'%20y='18'%20width='3'%20height='12'%20rx='1.5'%20fill='%23D97706'/%3E%3Crect%20x='22.5'%20y='13'%20width='3'%20height='22'%20rx='1.5'%20fill='%23F1B25A'/%3E%3Crect%20x='29.5'%20y='21'%20width='3'%20height='6'%20rx='1.5'%20fill='%23D97706'/%3E%3C/svg%3E");
}

body > div:first-child h1,
body > div:first-child > div > a {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 2.9rem;
  line-height: 1.05;
  color: #FFFFFF;
  letter-spacing: -0.01em;
  margin: 0;
  text-decoration: none;
  display: inline-block;
}

body > div:first-child > div > a:hover {
  color: var(--accent-light);
}

/* homepage standfirst / manifesto line */
body > div:first-child p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.06rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  max-width: 60ch;
  margin: 0.85rem auto 0;
}

/* ================= HOMEPAGE ================= */
main:not(:has(> article)) {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.9rem 1.9rem;
  max-width: 1140px;
  margin: 0 auto;
  padding: 3rem 1.5rem 1.25rem;
  align-items: start;
}

/* base card — chronological grid (2 across) */
main:not(:has(> article)) > div {
  grid-column: span 3;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--r);
  padding: 1.5rem 1.6rem 1.5rem;
  transition: border-left-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

main:not(:has(> article)) > div:hover {
  border-left-color: var(--accent);
  box-shadow: 0 6px 22px rgba(16, 26, 38, 0.09);
  transform: translateY(-2px);
}

/* card date / kicker */
main:not(:has(> article)) > div > p:first-child {
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin: 0 0 0.5rem;
}

/* card title */
main:not(:has(> article)) > div > h2 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.5rem;
}

main:not(:has(> article)) > div > h2 a {
  color: var(--primary);
  text-decoration: none;
}

main:not(:has(> article)) > div > h2 a:hover {
  color: var(--accent-dark);
}

/* card excerpt */
main:not(:has(> article)) > div > h2 + p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--fg-muted);
  margin: 0 0 1.1rem;
  max-width: none;
}

/* card CTA — outlined pill */
main:not(:has(> article)) > div > a {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-dark);
  text-decoration: none;
  padding: 0.42em 1.05em;
  border: 1.5px solid var(--accent);
  border-radius: 100px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

main:not(:has(> article)) > div > a:hover {
  background-color: var(--accent);
  color: #FFFFFF;
}

/* ---- HERO (first card): the loud voice ---- */
main:not(:has(> article)) > div:first-child {
  grid-column: 1 / -1;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  padding: 2.9rem 2.6rem 2.75rem;
  overflow: hidden;
}

main:not(:has(> article)) > div:first-child::before {
  content: "À LA UNE — LE DERNIER";
  display: block;
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 0.9rem;
}

/* oversized ghost numeral fills the empty right side */
main:not(:has(> article)) > div:first-child::after {
  content: "N\00BA I";
  position: absolute;
  top: 1.7rem;
  right: 2.2rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 4.4rem;
  line-height: 1;
  color: var(--accent-light);
  pointer-events: none;
}

main:not(:has(> article)) > div:first-child > p:first-child {
  font-size: 0.8rem;
  color: var(--fg-muted);
}

main:not(:has(> article)) > div:first-child > p:first-child::after {
  content: " · PAR VINCENT CHARPENTIER · 6 MIN";
  color: var(--accent-dark);
}

main:not(:has(> article)) > div:first-child > h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 2.55rem;
  line-height: 1.08;
  letter-spacing: -0.015em;
  max-width: 18ch;
  margin: 0.35rem 0 0.75rem;
}

main:not(:has(> article)) > div:first-child > h2 a {
  color: var(--heading);
}

main:not(:has(> article)) > div:first-child > h2 + p {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--fg);
  max-width: 54ch;
}

/* drop cap on the hero excerpt */
main:not(:has(> article)) > div:first-child > h2 + p::first-letter {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 3.1rem;
  line-height: 0.82;
  float: left;
  margin: 0.06em 0.1em 0 0;
  color: var(--moment);
}

main:not(:has(> article)) > div:first-child > a {
  font-size: 0.82rem;
  padding: 0.55em 1.4em;
  background-color: var(--accent);
  color: #FFFFFF;
}

main:not(:has(> article)) > div:first-child > a:hover {
  background-color: var(--accent-dark);
}

/* ---- EDITOR'S PICKS band (cards 2–4): the second moment ---- */
main:not(:has(> article)) > div:nth-child(n+2):nth-child(-n+4) {
  grid-column: span 2;
  background: var(--surface-alt);
  border-left: 3px solid var(--accent);
  padding-top: 1.65rem;
}

/* section label sits in the gap above the picks band */
main:not(:has(> article)) > div:nth-child(2)::before {
  content: "SÉLECTION — À LIRE EN PREMIER";
  position: absolute;
  top: -2.3rem;
  left: 0.2rem;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
  white-space: nowrap;
}

/* roman numerals top-right of each pick */
main:not(:has(> article)) > div:nth-child(2)::after,
main:not(:has(> article)) > div:nth-child(3)::after,
main:not(:has(> article)) > div:nth-child(4)::after {
  position: absolute;
  top: 1.25rem;
  right: 1.4rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--accent);
  line-height: 1;
}
main:not(:has(> article)) > div:nth-child(2)::after { content: "N\00BA I"; }
main:not(:has(> article)) > div:nth-child(3)::after { content: "N\00BA II"; }
main:not(:has(> article)) > div:nth-child(4)::after { content: "N\00BA III"; }

/* a lone trailing chrono card fills the full row instead of hanging left */
main:not(:has(> article)) > div:nth-child(n+5):nth-child(odd):last-child {
  grid-column: 1 / -1;
}

/* ================= ARTICLE PAGE ================= */
main:has(> article) {
  max-width: 800px;
  margin: 0 auto;
  padding: 2.75rem 1.5rem 1rem;
}

main:has(> article) > hgroup {
  margin-bottom: 2rem;
}

main:has(> article) > hgroup > h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 2.9rem;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--heading);
  margin: 0 0 0.7rem;
}

main:has(> article) > hgroup > time {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-dark);
}

main:has(> article) > article > img,
main:has(> article) > article section img {
  border-radius: var(--r);
}

/* drop cap opens the article */
main:has(> article) > article > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 3.4rem;
  line-height: 0.8;
  float: left;
  margin: 0.05em 0.11em 0 0;
  color: var(--moment);
}

/* section subheads with a dinkus divider */
main:has(> article) > article > h2 {
  font-family: var(--font-heading);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--primary);
  margin-top: 2.4em;
}

main:has(> article) > article > h2::before {
  content: "\2737 \2737 \2737";
  display: block;
  text-align: center;
  color: var(--accent);
  font-size: 0.85rem;
  letter-spacing: 0.55em;
  margin: 0 0 1.15em;
  font-weight: 400;
}

main:has(> article) > article > h3 {
  font-family: var(--font-heading);
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--primary);
}

/* affiliate / deal links: distinct highlighted button, not bare underline */
main:has(> article) article a[href^="/deal/"] {
  display: inline;
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--primary-dark);
  text-decoration: none;
  background-color: var(--accent-light);
  box-shadow: inset 0 -0.62em 0 var(--accent-light);
  border-bottom: 2px solid var(--accent);
  padding: 0.08em 0.4em;
  border-radius: 3px;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

main:has(> article) article a[href^="/deal/"]:hover {
  background-color: var(--accent);
  border-color: var(--accent-dark);
  color: #FFFFFF;
}

/* hanging quote on blockquotes */
main:has(> article) article blockquote {
  position: relative;
  border-left: 3px solid var(--accent);
  padding-left: 2.4rem;
}

main:has(> article) article blockquote::before {
  content: "\201C";
  position: absolute;
  left: 0.55rem;
  top: -0.15em;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2.8rem;
  line-height: 1;
  color: var(--accent);
}

/* ---- Related articles: distinct aside/callout, not a repeat of card list ---- */
main:has(> article) > div {
  margin-top: 3rem;
  padding: 1.75rem 1.9rem 1.6rem;
  background: var(--surface-alt);
  border-top: 3px solid var(--accent);
  border-radius: 0 0 var(--r) var(--r);
}

main:has(> article) > div > h3 {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin: 0 0 1rem;
}

main:has(> article) > div > ul {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: 2rem;
}

main:has(> article) > div > ul li {
  margin: 0 0 0.75rem;
  padding-left: 1rem;
  position: relative;
  break-inside: avoid;
  font-family: var(--font-display);
  font-size: 0.98rem;
  line-height: 1.35;
}

main:has(> article) > div > ul li::before {
  content: "\203A";
  position: absolute;
  left: 0;
  top: -0.05em;
  color: var(--accent);
  font-weight: 700;
}

main:has(> article) > div > ul a {
  color: var(--primary);
  text-decoration: none;
}

main:has(> article) > div > ul a:hover {
  color: var(--accent-dark);
}

/* ================= RESPONSIVE ================= */
@media (max-width: 820px) {
  main:not(:has(> article)) {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  main:not(:has(> article)) > div,
  main:not(:has(> article)) > div:first-child,
  main:not(:has(> article)) > div:nth-child(n+2):nth-child(-n+4),
  main:not(:has(> article)) > div:nth-child(n+5):nth-child(odd):last-child {
    grid-column: 1 / -1;
  }
  main:not(:has(> article)) > div:first-child::after {
    display: none;
  }
  main:not(:has(> article)) > div:nth-child(2)::before {
    position: static;
    display: block;
    margin-bottom: 0.6rem;
    white-space: normal;
  }
  main:not(:has(> article)) > div:first-child > h2 {
    font-size: 2rem;
    max-width: none;
  }
  main:has(> article) > div > ul {
    columns: 1;
  }
}

@media (max-width: 600px) {
  body > div:first-child h1,
  body > div:first-child > div > a {
    font-size: 2.2rem;
  }
  main:has(> article) > hgroup > h1 {
    font-size: 2.05rem;
  }
}


/* === QA tail polish (2026-07-28T16:14:24.272543+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;
}