/* ==========================================================================
   Recruteur Indépendant — Édition v2
   Esthétique : journal d'investigation moderne / magazine éditorial
   Typo : Instrument Serif (display) · Source Serif 4 (body) · JetBrains Mono
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
	/* Palette — papier journal + encre + signal rouge */
	--ri-paper:      #F4EFE3;          /* warm newsprint cream */
	--ri-paper-deep: #ECE5D2;          /* slightly deeper sections */
	--ri-paper-soft: #FAF6EC;          /* lightest tint */
	--ri-ink:        #0F0F12;          /* true ink */
	--ri-ink-soft:   #2A2A2F;
	--ri-muted:      #6B6862;
	--ri-line:       #2A2A2F;          /* full strength rule lines */
	--ri-line-soft:  #C8C0AC;          /* hairlines */
	--ri-accent:     #B22222;          /* signal red — newspaper masthead */
	--ri-accent-2:   #DC2626;
	--ri-highlight:  #E8B547;          /* warm yellow accent */

	/* Typo */
	--ri-display: "Instrument Serif", "Times New Roman", Georgia, serif;
	--ri-body:    "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
	--ri-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

	/* Scale */
	--ri-text-2xs: 0.6875rem;     /* 11 */
	--ri-text-xs:  0.78rem;        /* ~12.5 */
	--ri-text-sm:  0.875rem;       /* 14 */
	--ri-text-base: 1.0625rem;     /* 17 */
	--ri-text-lg:   1.1875rem;
	--ri-text-xl:   1.5rem;
	--ri-text-2xl:  2rem;
	--ri-text-3xl:  3rem;
	--ri-text-4xl:  4.5rem;
	--ri-text-5xl:  6rem;
	--ri-display-1: clamp(3rem, 9vw, 8.5rem);
	--ri-display-2: clamp(2.25rem, 6vw, 5rem);

	/* Layout */
	--ri-container: 1320px;
	--ri-narrow:    720px;
	--ri-wide:      1100px;

	--ri-ease: cubic-bezier(.2, .7, .2, 1);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 120px; }

body {
	margin: 0;
	background: var(--ri-paper);
	color: var(--ri-ink);
	font-family: var(--ri-body);
	font-size: var(--ri-text-base);
	line-height: 1.6;
	font-weight: 400;
	font-variation-settings: "opsz" 14;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Subtle noise texture for newsprint atmosphere */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	opacity: .55;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .035 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--ri-line-soft);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	transition: color .18s var(--ri-ease), text-decoration-color .18s var(--ri-ease);
}
a:hover { color: var(--ri-accent); text-decoration-color: var(--ri-accent); }

p { margin: 0 0 1.25em; }

/* Typography */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--ri-display);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.05;
	color: var(--ri-ink);
	margin: 0 0 .5em;
}
h1 { font-size: var(--ri-text-5xl); letter-spacing: -0.025em; }
h2 { font-size: var(--ri-text-4xl); letter-spacing: -0.02em; }
h3 { font-size: var(--ri-text-3xl); letter-spacing: -0.015em; }
h4 { font-size: var(--ri-text-2xl); }
h5 { font-size: var(--ri-text-xl); }

em, i { font-style: italic; }

::selection { background: var(--ri-ink); color: var(--ri-paper); }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--ri-container);
	margin: 0 auto;
	padding: 0 32px;
	position: relative;
	z-index: 1;
}
.container-narrow { max-width: var(--ri-narrow); }
.container-wide   { max-width: var(--ri-wide); }

.skip-link {
	position: absolute; left: -9999px; top: auto;
	background: var(--ri-ink); color: var(--ri-paper); padding: 12px 18px; z-index: 999;
}
.skip-link:focus { left: 16px; top: 16px; }

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--ri-mono);
	font-size: var(--ri-text-2xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .2em;
	color: var(--ri-ink);
}
.eyebrow--accent { color: var(--ri-accent); }
.eyebrow::before {
	content: "";
	width: 18px; height: 1px;
	background: currentColor;
}
.eyebrow.no-bar::before { display: none; }

/* --------------------------------------------------------------------------
   4. Masthead — top of every page (newspaper-style)
   -------------------------------------------------------------------------- */
.masthead {
	background: var(--ri-paper);
	border-bottom: 1px solid var(--ri-line);
	position: relative;
	z-index: 50;
}

.masthead-rule-top {
	height: 6px;
	background: var(--ri-ink);
	display: flex;
}
.masthead-rule-top::after {
	content: "";
	width: 33%;
	background: var(--ri-accent);
}

.masthead-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 0;
	border-bottom: 1px solid var(--ri-line-soft);
	font-family: var(--ri-mono);
	font-size: var(--ri-text-2xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--ri-ink-soft);
}
.masthead-meta a { text-decoration: none; }
.masthead-meta-left, .masthead-meta-right { display: flex; gap: 22px; align-items: center; }
.masthead-meta .pulse {
	display: inline-block;
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--ri-accent);
	margin-right: 6px;
	animation: ri-pulse 2.4s ease-in-out infinite;
}
@keyframes ri-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: .4; transform: scale(.85); }
}

.masthead-main {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 32px;
	padding: 36px 0 32px;
}

.masthead-edition {
	font-family: var(--ri-mono);
	font-size: var(--ri-text-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--ri-ink-soft);
	line-height: 1.5;
}
.masthead-edition strong { color: var(--ri-accent); font-weight: 700; }
.masthead-edition .stack { display: block; }

.masthead-logo {
	font-family: var(--ri-display);
	font-size: clamp(2.25rem, 5vw, 3.5rem);
	font-weight: 400;
	font-style: italic;
	letter-spacing: -0.02em;
	color: var(--ri-ink);
	text-decoration: none;
	line-height: 1;
	white-space: nowrap;
	text-align: center;
}
.masthead-logo:hover { color: var(--ri-accent); }
.custom-logo-link img { max-height: 56px; width: auto; margin: 0 auto; }

.masthead-actions {
	display: flex;
	justify-content: flex-end;
	gap: 14px;
	align-items: center;
}
.masthead-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--ri-ink);
	color: var(--ri-paper);
	font-family: var(--ri-mono);
	font-size: var(--ri-text-2xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .14em;
	padding: 11px 18px;
	text-decoration: none;
	transition: background .2s var(--ri-ease);
	white-space: nowrap;
}
.masthead-cta:hover { background: var(--ri-accent); color: var(--ri-paper); }
.masthead-search, .masthead-toggle {
	background: none; border: 0; cursor: pointer; padding: 8px;
	color: var(--ri-ink); display: inline-flex; align-items: center;
}
.masthead-search:hover { color: var(--ri-accent); }
.masthead-toggle { display: none; }

/* Navigation strip */
.masthead-nav {
	border-top: 3px double var(--ri-line);
	border-bottom: 1px solid var(--ri-line);
	background: var(--ri-paper);
	position: sticky;
	top: 0;
	z-index: 40;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	background-color: rgba(244, 239, 227, .94);
}
.masthead-nav-inner {
	display: flex;
	align-items: center;
	gap: 32px;
	padding: 14px 0;
	overflow-x: auto;
	scrollbar-width: none;
}
.masthead-nav-inner::-webkit-scrollbar { display: none; }

.masthead-nav ul {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	gap: 28px;
	white-space: nowrap;
}
.masthead-nav a {
	font-family: var(--ri-mono);
	font-size: var(--ri-text-2xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--ri-ink);
	text-decoration: none;
	padding: 4px 0;
	position: relative;
	transition: color .18s var(--ri-ease);
}
.masthead-nav a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -16px;
	height: 2px;
	background: var(--ri-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s var(--ri-ease);
}
.masthead-nav a:hover { color: var(--ri-accent); }
.masthead-nav a:hover::after,
.masthead-nav .current-menu-item > a::after { transform: scaleX(1); }

/* Ticker */
.ticker {
	background: var(--ri-ink);
	color: var(--ri-paper);
	font-family: var(--ri-mono);
	font-size: var(--ri-text-2xs);
	text-transform: uppercase;
	letter-spacing: .12em;
	padding: 9px 0;
	overflow: hidden;
	position: relative;
}
.ticker-track {
	display: inline-flex;
	gap: 48px;
	white-space: nowrap;
	animation: ri-ticker 60s linear infinite;
	padding-left: 100%;
}
.ticker-track span { display: inline-flex; align-items: center; gap: 12px; }
.ticker-track .dot { color: var(--ri-accent); font-size: 1.2em; line-height: 1; }
@keyframes ri-ticker {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-100%); }
}
.ticker:hover .ticker-track { animation-play-state: paused; }

/* --------------------------------------------------------------------------
   5. Hero — magazine-style asymmetric feature
   -------------------------------------------------------------------------- */
.hero {
	padding: 56px 0 72px;
	border-bottom: 1px solid var(--ri-line);
	position: relative;
}
.hero--compact { padding: 44px 0 48px; }

.hero-issue {
	font-family: var(--ri-mono);
	font-size: var(--ri-text-2xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .2em;
	color: var(--ri-accent);
	margin-bottom: 32px;
	display: flex;
	align-items: center;
	gap: 14px;
}
.hero-issue::before, .hero-issue::after {
	content: ""; flex: 1 1 auto; height: 1px; background: var(--ri-line-soft); max-width: 80px;
}

.hero-grid {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: 64px;
	align-items: end;
}

.hero-feature .hero-number {
	font-family: var(--ri-display);
	font-style: italic;
	font-size: var(--ri-text-3xl);
	color: var(--ri-accent);
	line-height: 1;
	margin-bottom: 12px;
	font-weight: 400;
}
.hero-feature .hero-category {
	font-family: var(--ri-mono);
	font-size: var(--ri-text-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: var(--ri-ink);
	text-decoration: none;
	border-top: 1px solid var(--ri-ink);
	padding-top: 10px;
	display: inline-block;
	margin-bottom: 24px;
}
.hero-feature h1, .hero-feature h2 {
	font-family: var(--ri-display);
	font-size: var(--ri-display-1);
	font-weight: 400;
	font-style: italic;
	letter-spacing: -0.03em;
	line-height: 1;
	margin: 0 0 24px;
	color: var(--ri-ink);
}
.hero-feature h1 a, .hero-feature h2 a {
	text-decoration: none;
	color: inherit;
	transition: color .25s var(--ri-ease);
}
.hero-feature:hover h1 a,
.hero-feature:hover h2 a { color: var(--ri-accent); }

.hero-deck {
	font-family: var(--ri-body);
	font-size: 1.3rem;
	line-height: 1.45;
	color: var(--ri-ink-soft);
	max-width: 52ch;
	margin: 0 0 28px;
	font-weight: 400;
	font-variation-settings: "opsz" 24;
}

.hero-meta {
	display: flex;
	gap: 14px;
	font-family: var(--ri-mono);
	font-size: var(--ri-text-2xs);
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--ri-muted);
	align-items: center;
	flex-wrap: wrap;
}
.hero-meta .dot { color: var(--ri-line-soft); }
.hero-meta .by { color: var(--ri-ink); }

.hero-image-wrap {
	position: relative;
}
.hero-image {
	aspect-ratio: 4/5;
	background: var(--ri-paper-deep);
	overflow: hidden;
	display: block;
	position: relative;
	border: 1px solid var(--ri-line);
}
.hero-image img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .8s var(--ri-ease);
	filter: contrast(1.05);
}
.hero-feature:hover .hero-image img { transform: scale(1.04); }

.hero-image-caption {
	font-family: var(--ri-mono);
	font-size: var(--ri-text-2xs);
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--ri-muted);
	margin-top: 12px;
	padding-left: 14px;
	border-left: 2px solid var(--ri-accent);
}

/* --------------------------------------------------------------------------
   6. Sections
   -------------------------------------------------------------------------- */
.section {
	padding: 80px 0;
	border-bottom: 1px solid var(--ri-line);
	position: relative;
}
.section:last-child { border-bottom: 0; }
.section--tight { padding: 48px 0 72px; }
.section--alt { background: var(--ri-paper-deep); }
.section--dark { background: var(--ri-ink); color: var(--ri-paper); border-bottom: 0; }

/* Big CTA — bottom of "derniers articles" block */
.section-cta {
	margin: 64px auto 0;
	text-align: center;
	max-width: 720px;
}
.big-cta {
	display: inline-flex;
	align-items: center;
	gap: 24px;
	background: var(--ri-ink);
	color: var(--ri-paper);
	text-decoration: none;
	padding: 26px 44px;
	transition: background .25s var(--ri-ease), transform .25s var(--ri-ease);
	border: 1px solid var(--ri-ink);
	position: relative;
}
.big-cta::before {
	content: "";
	position: absolute;
	inset: 6px;
	border: 1px solid rgba(244, 239, 227, .25);
	pointer-events: none;
	transition: border-color .25s var(--ri-ease);
}
.big-cta:hover {
	background: var(--ri-accent);
	color: var(--ri-paper);
	transform: translateY(-2px);
}
.big-cta:hover::before { border-color: rgba(244, 239, 227, .4); }
.big-cta-label {
	font-family: var(--ri-display);
	font-style: italic;
	font-size: clamp(1.5rem, 2.5vw, 2.25rem);
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 1;
}
.big-cta-arrow {
	font-family: var(--ri-display);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1;
	color: var(--ri-accent);
	transition: transform .25s var(--ri-ease);
}
.big-cta:hover .big-cta-arrow {
	transform: translateX(8px);
	color: var(--ri-paper);
}
.big-cta-sub {
	margin: 18px 0 0;
	font-family: var(--ri-mono);
	font-size: var(--ri-text-2xs);
	text-transform: uppercase;
	letter-spacing: .18em;
	color: var(--ri-muted);
}

.section-head {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: end;
	gap: 32px;
	margin-bottom: 48px;
	padding-bottom: 24px;
	border-bottom: 3px double var(--ri-line);
}
.section-number {
	font-family: var(--ri-display);
	font-style: italic;
	font-size: var(--ri-text-4xl);
	font-weight: 400;
	color: var(--ri-accent);
	line-height: 1;
	letter-spacing: -0.03em;
}
.section-title {
	font-family: var(--ri-display);
	font-size: clamp(2rem, 4vw, 3.5rem);
	font-weight: 400;
	font-style: italic;
	margin: 0;
	letter-spacing: -0.02em;
	line-height: 1;
}
.section-title-eyebrow {
	font-family: var(--ri-mono);
	font-size: var(--ri-text-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .18em;
	color: var(--ri-ink-soft);
	display: block;
	margin-bottom: 8px;
	font-style: normal;
}
.section-link {
	font-family: var(--ri-mono);
	font-size: var(--ri-text-xs);
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--ri-ink);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	padding-bottom: 6px;
}
.section-link:hover { color: var(--ri-accent); }
.section-link::after {
	content: "→";
	transition: transform .2s var(--ri-ease);
}
.section-link:hover::after { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   7. Post grid & cards
   -------------------------------------------------------------------------- */
.post-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 48px 40px;
}
.post-grid--2 { grid-template-columns: repeat(2, 1fr); }
.post-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Asymmetric grid for homepage second row */
.post-grid--mag {
	grid-template-columns: 5fr 3fr 4fr;
	gap: 40px;
}
.post-grid--mag > :first-child { grid-row: span 1; }

.post-card { display: flex; flex-direction: column; position: relative; }

.post-card .card-image {
	aspect-ratio: 4/3;
	background: var(--ri-paper-deep);
	overflow: hidden;
	margin-bottom: 18px;
	border: 1px solid var(--ri-line-soft);
	display: block;
}
.post-card .card-image img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .6s var(--ri-ease), filter .4s var(--ri-ease);
	filter: contrast(1.05);
}
.post-card:hover .card-image img { transform: scale(1.04); }

.post-card .card-number {
	font-family: var(--ri-mono);
	font-size: var(--ri-text-2xs);
	color: var(--ri-accent);
	font-weight: 500;
	letter-spacing: .14em;
	margin-bottom: 6px;
}
.post-card .card-category {
	font-family: var(--ri-mono);
	font-size: var(--ri-text-2xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: var(--ri-ink);
	text-decoration: none;
	display: inline-block;
	margin-bottom: 12px;
	padding-top: 8px;
	border-top: 1px solid var(--ri-ink);
}
.post-card h2, .post-card h3 {
	font-family: var(--ri-display);
	font-size: 1.875rem;
	font-weight: 400;
	font-style: italic;
	line-height: 1.05;
	margin: 0 0 14px;
	letter-spacing: -0.02em;
}
.post-grid--4 .post-card h2,
.post-grid--4 .post-card h3 { font-size: 1.5rem; }

.post-card h2 a, .post-card h3 a {
	text-decoration: none;
	color: var(--ri-ink);
	transition: color .2s var(--ri-ease);
}
.post-card:hover h2 a, .post-card:hover h3 a { color: var(--ri-accent); }

.post-card .card-excerpt {
	color: var(--ri-ink-soft);
	font-size: var(--ri-text-base);
	line-height: 1.55;
	margin: 0 0 14px;
	max-width: 38ch;
}
.post-card .card-meta {
	font-family: var(--ri-mono);
	font-size: var(--ri-text-2xs);
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--ri-muted);
	margin-top: auto;
	display: flex;
	gap: 12px;
	align-items: center;
}
.post-card .card-meta .dot { color: var(--ri-line-soft); }

/* "Most read" or list-style block */
.list-block { display: flex; flex-direction: column; gap: 0; }
.list-block-item {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 18px;
	padding: 22px 0;
	border-bottom: 1px solid var(--ri-line-soft);
	text-decoration: none;
	color: inherit;
	transition: padding-left .2s var(--ri-ease);
}
.list-block-item:first-child { border-top: 1px solid var(--ri-line); padding-top: 22px; }
.list-block-item:hover { padding-left: 8px; }
.list-block-item:hover h4 { color: var(--ri-accent); }
.list-block-num {
	font-family: var(--ri-display);
	font-style: italic;
	font-size: 2.5rem;
	font-weight: 400;
	color: var(--ri-accent);
	line-height: 1;
}
.list-block-item h4 {
	font-family: var(--ri-display);
	font-style: italic;
	font-size: 1.4rem;
	font-weight: 400;
	margin: 0 0 6px;
	line-height: 1.15;
	transition: color .2s var(--ri-ease);
}
.list-block-item .meta {
	font-family: var(--ri-mono);
	font-size: var(--ri-text-2xs);
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--ri-muted);
}

/* --------------------------------------------------------------------------
   8. Newsletter band
   -------------------------------------------------------------------------- */
.newsletter-band {
	background: var(--ri-ink);
	color: var(--ri-paper);
	padding: 96px 0;
	position: relative;
	overflow: hidden;
	border-bottom: 0;
}
.newsletter-band::before {
	content: "№";
	position: absolute;
	top: -40px; right: -20px;
	font-family: var(--ri-display);
	font-style: italic;
	font-size: 28rem;
	line-height: 1;
	color: var(--ri-accent);
	opacity: .15;
	pointer-events: none;
	font-weight: 400;
}

.newsletter-grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 80px;
	align-items: end;
	position: relative;
}
.newsletter-band .eyebrow {
	color: var(--ri-highlight);
	margin-bottom: 24px;
}
.newsletter-band h2 {
	font-family: var(--ri-display);
	font-size: clamp(2.5rem, 5vw, 4.5rem);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.025em;
	line-height: 1;
	color: var(--ri-paper);
	margin-bottom: 24px;
}
.newsletter-band p {
	color: rgba(244, 239, 227, .7);
	font-family: var(--ri-body);
	font-size: 1.2rem;
	max-width: 48ch;
	line-height: 1.5;
}

.newsletter-form {
	display: flex;
	gap: 0;
	border-bottom: 2px solid var(--ri-paper);
	padding-bottom: 8px;
}
.newsletter-form input[type="email"] {
	flex: 1;
	border: 0;
	background: transparent;
	font-family: var(--ri-body);
	font-size: 1.25rem;
	padding: 10px 0;
	color: var(--ri-paper);
	outline: none;
}
.newsletter-form input[type="email"]::placeholder { color: rgba(244, 239, 227, .45); }
.newsletter-form button {
	background: var(--ri-accent);
	color: var(--ri-paper);
	border: 0;
	font-family: var(--ri-mono);
	font-size: var(--ri-text-2xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .16em;
	padding: 10px 22px;
	cursor: pointer;
	transition: background .2s var(--ri-ease);
}
.newsletter-form button:hover { background: var(--ri-paper); color: var(--ri-ink); }
.newsletter-mini {
	margin-top: 16px;
	font-family: var(--ri-mono);
	font-size: var(--ri-text-2xs);
	text-transform: uppercase;
	letter-spacing: .14em;
	color: rgba(244, 239, 227, .5);
}

/* --------------------------------------------------------------------------
   9. Single article
   -------------------------------------------------------------------------- */
.article-header {
	padding: 64px 0 48px;
	max-width: 920px;
	margin: 0 auto;
	text-align: center;
}

.article-eyebrow {
	font-family: var(--ri-mono);
	font-size: var(--ri-text-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .18em;
	margin-bottom: 32px;
	display: inline-flex;
	align-items: center;
	gap: 14px;
}
.article-eyebrow a { color: var(--ri-accent); text-decoration: none; }
.article-eyebrow::before, .article-eyebrow::after {
	content: ""; width: 36px; height: 1px; background: var(--ri-line-soft); display: inline-block;
}

.article-title {
	font-family: var(--ri-display);
	font-size: clamp(2.5rem, 6vw, 5.5rem);
	font-weight: 400;
	font-style: italic;
	letter-spacing: -0.03em;
	line-height: 1;
	margin: 0 0 28px;
}

.article-deck {
	font-family: var(--ri-body);
	font-size: 1.4rem;
	font-style: normal;
	color: var(--ri-ink-soft);
	font-weight: 400;
	line-height: 1.45;
	max-width: 56ch;
	margin: 0 auto 40px;
	font-variation-settings: "opsz" 28;
}

.article-byline {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding: 24px 0 0;
	border-top: 1px solid var(--ri-line);
}
.byline-avatar {
	width: 48px; height: 48px;
	border-radius: 50%;
	background: var(--ri-paper-deep);
	overflow: hidden;
	flex-shrink: 0;
	border: 1px solid var(--ri-line-soft);
}
.byline-avatar img { width: 100%; height: 100%; object-fit: cover; }
.byline-meta { display: flex; flex-direction: column; gap: 3px; line-height: 1.3; text-align: left; }
.byline-name {
	font-family: var(--ri-mono);
	font-weight: 500;
	font-size: var(--ri-text-xs);
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--ri-ink);
}
.byline-name a { text-decoration: none; color: inherit; }
.byline-info {
	font-family: var(--ri-mono);
	font-size: var(--ri-text-2xs);
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--ri-muted);
	display: flex; gap: 10px;
}

.article-featured {
	max-width: var(--ri-wide);
	margin: 0 auto 56px;
}
.article-featured img {
	width: 100%;
	border: 1px solid var(--ri-line);
	filter: contrast(1.05);
}
.article-featured figcaption {
	font-family: var(--ri-mono);
	font-size: var(--ri-text-2xs);
	color: var(--ri-muted);
	margin-top: 14px;
	text-transform: uppercase;
	letter-spacing: .12em;
	text-align: left;
	padding-left: 14px;
	border-left: 2px solid var(--ri-accent);
}

/* Article body — centered serif column */
.article-body {
	max-width: var(--ri-narrow);
	margin: 0 auto;
	padding-bottom: 64px;
	font-family: var(--ri-body);
	font-size: 1.1875rem;
	line-height: 1.7;
	color: var(--ri-ink);
	font-variation-settings: "opsz" 19;
}

.article-body > p:first-of-type::first-letter {
	font-family: var(--ri-display);
	font-style: italic;
	font-size: 5.5rem;
	font-weight: 400;
	float: left;
	line-height: .85;
	padding: 8px 14px 0 0;
	color: var(--ri-accent);
}

.article-body h2 {
	font-family: var(--ri-display);
	font-style: italic;
	font-size: 2.5rem;
	margin-top: 2.5em;
	margin-bottom: .5em;
	font-weight: 400;
	letter-spacing: -0.02em;
}
.article-body h3 {
	font-family: var(--ri-display);
	font-style: italic;
	font-size: 1.875rem;
	margin-top: 2em;
}
.article-body figure { margin: 2.5em 0; }
.article-body figure.alignwide {
	max-width: var(--ri-wide);
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 0 24px;
}
.article-body figure img {
	border: 1px solid var(--ri-line);
	filter: contrast(1.05);
}
.article-body figcaption {
	font-family: var(--ri-mono);
	font-size: var(--ri-text-2xs);
	color: var(--ri-muted);
	text-transform: uppercase;
	letter-spacing: .12em;
	margin-top: 12px;
	text-align: left;
	padding-left: 12px;
	border-left: 2px solid var(--ri-accent);
}

.article-body a {
	color: var(--ri-ink);
	text-decoration-color: var(--ri-accent);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}
.article-body a:hover { color: var(--ri-accent); }

.article-body ul, .article-body ol { margin: 0 0 1.5em; padding-left: 1.5em; }
.article-body ul li::marker { color: var(--ri-accent); content: "— "; }
.article-body ol li::marker { color: var(--ri-accent); font-family: var(--ri-mono); font-weight: 500; }

/* Pull quote — breaks the column */
.article-body blockquote,
.article-body .wp-block-pullquote,
.pullquote {
	font-family: var(--ri-display);
	font-style: italic;
	font-size: clamp(2rem, 4vw, 3.5rem);
	font-weight: 400;
	line-height: 1.05;
	color: var(--ri-ink);
	letter-spacing: -0.02em;
	text-align: left;
	margin: 2.5em -10% 2.5em -10%;
	padding: 0;
	border: 0;
	position: relative;
}
.article-body blockquote::before,
.pullquote::before {
	content: "❝";
	font-style: normal;
	color: var(--ri-accent);
	font-size: .5em;
	display: block;
	line-height: 1;
	margin-bottom: 12px;
}
.article-body blockquote cite,
.pullquote cite {
	display: block;
	font-family: var(--ri-mono);
	font-style: normal;
	font-size: var(--ri-text-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--ri-muted);
	margin-top: 16px;
}

/* Author box */
.author-box {
	max-width: var(--ri-narrow);
	margin: 64px auto 32px;
	padding: 36px 0;
	border-top: 3px double var(--ri-line);
	border-bottom: 1px solid var(--ri-line-soft);
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 24px;
	align-items: start;
}
.author-box .avatar {
	width: 80px; height: 80px;
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid var(--ri-line);
}
.author-box .avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-box .label {
	font-family: var(--ri-mono);
	font-size: var(--ri-text-2xs);
	text-transform: uppercase;
	letter-spacing: .16em;
	color: var(--ri-muted);
	margin-bottom: 4px;
}
.author-box h3 {
	font-family: var(--ri-display);
	font-style: italic;
	font-size: 1.75rem;
	margin: 0 0 10px;
	font-weight: 400;
}
.author-box p {
	font-size: var(--ri-text-base);
	color: var(--ri-ink-soft);
	margin: 0;
	line-height: 1.55;
}

.related-posts {
	max-width: var(--ri-wide);
	margin: 64px auto 0;
	padding-top: 56px;
	border-top: 3px double var(--ri-line);
}

/* --------------------------------------------------------------------------
   10. Affiliate components
   -------------------------------------------------------------------------- */
.ri-product-card {
	background: var(--ri-paper-soft);
	border: 1px solid var(--ri-line);
	padding: 32px 32px 28px;
	margin: 40px 0;
	display: grid;
	grid-template-columns: 88px 1fr auto;
	gap: 24px;
	align-items: center;
	position: relative;
	transition: border-color .2s var(--ri-ease), background .2s var(--ri-ease);
}
.ri-product-card::before {
	content: "Sélection éditoriale";
	position: absolute;
	top: -1px; left: -1px;
	background: var(--ri-ink);
	color: var(--ri-paper);
	font-family: var(--ri-mono);
	font-size: 10px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .16em;
	padding: 6px 14px;
}
.ri-product-card:hover {
	border-color: var(--ri-ink);
	background: var(--ri-paper-deep);
}

.ri-product-logo {
	width: 88px; height: 88px;
	background: var(--ri-paper);
	border: 1px solid var(--ri-line-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.ri-product-logo img { max-width: 70%; height: auto; }

.ri-product-info h4 {
	margin: 0 0 6px;
	font-family: var(--ri-display);
	font-style: italic;
	font-size: 1.625rem;
	font-weight: 400;
	letter-spacing: -0.01em;
}
.ri-product-info .meta {
	font-family: var(--ri-mono);
	font-size: var(--ri-text-2xs);
	color: var(--ri-muted);
	text-transform: uppercase;
	letter-spacing: .14em;
	margin-bottom: 8px;
}
.ri-product-info p {
	margin: 0; color: var(--ri-ink-soft);
	font-size: var(--ri-text-base);
	font-family: var(--ri-body);
	line-height: 1.5;
}

.ri-product-cta {
	background: var(--ri-ink);
	color: var(--ri-paper);
	font-family: var(--ri-mono);
	font-size: var(--ri-text-2xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .16em;
	padding: 14px 22px;
	text-decoration: none;
	white-space: nowrap;
	transition: background .2s var(--ri-ease);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.ri-product-cta:hover { background: var(--ri-accent); color: var(--ri-paper); }
.ri-product-cta::after { content: "→"; }

.ri-rating {
	color: var(--ri-accent);
	font-family: var(--ri-mono);
	font-size: var(--ri-text-sm);
	font-weight: 700;
	margin-right: 10px;
}

/* CTA block */
.ri-cta-block {
	background: var(--ri-ink);
	color: var(--ri-paper);
	padding: 36px 40px;
	margin: 40px 0;
	position: relative;
	overflow: hidden;
}
.ri-cta-block::before {
	content: "";
	position: absolute;
	top: 0; left: 0; bottom: 0;
	width: 6px;
	background: var(--ri-accent);
}
.ri-cta-block .meta {
	font-family: var(--ri-mono);
	font-size: var(--ri-text-2xs);
	text-transform: uppercase;
	letter-spacing: .18em;
	color: var(--ri-highlight);
	margin-bottom: 10px;
}
.ri-cta-block h4 {
	margin: 0 0 12px;
	font-family: var(--ri-display);
	font-style: italic;
	font-size: 2rem;
	font-weight: 400;
	color: var(--ri-paper);
	letter-spacing: -0.01em;
}
.ri-cta-block p {
	margin: 0 0 24px;
	color: rgba(244, 239, 227, .75);
	font-family: var(--ri-body);
	font-size: 1.125rem;
}
.ri-cta-block .button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--ri-paper);
	color: var(--ri-ink);
	font-family: var(--ri-mono);
	font-size: var(--ri-text-2xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .16em;
	padding: 14px 22px;
	text-decoration: none;
	transition: background .2s var(--ri-ease);
}
.ri-cta-block .button:hover { background: var(--ri-accent); color: var(--ri-paper); }
.ri-cta-block .button::after { content: "→"; }

/* Pros / Cons */
.ri-proscons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	margin: 40px 0;
	border: 1px solid var(--ri-line);
}
.ri-proscons > div { padding: 28px; }
.ri-proscons > div + div { border-left: 1px solid var(--ri-line); }
.ri-proscons h5 {
	font-family: var(--ri-mono);
	font-size: var(--ri-text-2xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .18em;
	margin: 0 0 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid currentColor;
	display: flex;
	align-items: center;
	gap: 10px;
}
.ri-pros h5 { color: var(--ri-ink); }
.ri-cons h5 { color: var(--ri-accent); }
.ri-pros h5::before { content: "+"; font-size: 1.4em; line-height: 0; }
.ri-cons h5::before { content: "−"; font-size: 1.4em; line-height: 0; }
.ri-proscons ul { margin: 0; padding-left: 1.2em; font-size: var(--ri-text-base); font-family: var(--ri-body); }
.ri-proscons li { margin-bottom: 10px; }

/* TOC */
.ri-toc {
	background: var(--ri-paper-deep);
	padding: 28px 32px;
	margin: 40px 0;
	border-left: 4px solid var(--ri-ink);
}
.ri-toc-title {
	font-family: var(--ri-mono);
	font-size: var(--ri-text-2xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .18em;
	color: var(--ri-ink);
	margin: 0 0 14px;
}
.ri-toc ol {
	margin: 0;
	padding-left: 1.6em;
	counter-reset: toc;
	list-style: none;
}
.ri-toc li {
	margin-bottom: 8px;
	font-size: var(--ri-text-base);
	font-family: var(--ri-body);
	counter-increment: toc;
	position: relative;
}
.ri-toc li::before {
	content: counter(toc, decimal-leading-zero);
	position: absolute;
	left: -1.8em;
	font-family: var(--ri-mono);
	font-size: var(--ri-text-xs);
	color: var(--ri-accent);
	font-weight: 500;
}
.ri-toc a { text-decoration: none; }
.ri-toc a:hover { color: var(--ri-accent); }

/* --------------------------------------------------------------------------
   11. Archives & search
   -------------------------------------------------------------------------- */
.archive-header {
	padding: 80px 0 56px;
	border-bottom: 3px double var(--ri-line);
	margin-bottom: 64px;
	text-align: center;
}
.archive-eyebrow {
	font-family: var(--ri-mono);
	font-size: var(--ri-text-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .18em;
	color: var(--ri-accent);
	margin-bottom: 24px;
	display: inline-flex;
	align-items: center;
	gap: 14px;
}
.archive-eyebrow::before, .archive-eyebrow::after {
	content: ""; width: 40px; height: 1px; background: var(--ri-line-soft);
}
.archive-title {
	font-family: var(--ri-display);
	font-size: clamp(3rem, 7vw, 6rem);
	font-weight: 400;
	font-style: italic;
	letter-spacing: -0.03em;
	margin: 0 0 24px;
	line-height: 1;
}
.archive-description {
	max-width: 56ch;
	margin: 0 auto;
	color: var(--ri-ink-soft);
	font-family: var(--ri-body);
	font-size: 1.25rem;
	line-height: 1.45;
}

/* Pagination */
.pagination {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin: 80px 0;
}
.pagination a, .pagination span {
	font-family: var(--ri-mono);
	font-size: var(--ri-text-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .12em;
	padding: 12px 18px;
	border: 1px solid var(--ri-line);
	text-decoration: none;
	color: var(--ri-ink);
	transition: all .2s var(--ri-ease);
}
.pagination a:hover { background: var(--ri-ink); color: var(--ri-paper); border-color: var(--ri-ink); }
.pagination .current {
	background: var(--ri-accent);
	color: var(--ri-paper);
	border-color: var(--ri-accent);
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.site-footer {
	background: var(--ri-ink);
	color: rgba(244, 239, 227, .7);
	padding: 96px 0 32px;
	font-size: var(--ri-text-sm);
	position: relative;
	border-top: 6px solid var(--ri-accent);
}

.footer-masthead {
	text-align: center;
	padding-bottom: 56px;
	border-bottom: 1px solid rgba(244, 239, 227, .15);
	margin-bottom: 56px;
}
.footer-masthead .logo {
	font-family: var(--ri-display);
	font-style: italic;
	font-size: clamp(3rem, 6vw, 5rem);
	font-weight: 400;
	letter-spacing: -0.02em;
	color: var(--ri-paper);
	text-decoration: none;
	display: inline-block;
	line-height: 1;
}
.footer-masthead p {
	font-family: var(--ri-body);
	font-size: 1.125rem;
	color: rgba(244, 239, 227, .65);
	max-width: 52ch;
	margin: 18px auto 0;
	line-height: 1.5;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1.4fr;
	gap: 48px;
	padding-bottom: 56px;
	border-bottom: 1px solid rgba(244, 239, 227, .15);
}
.site-footer h4 {
	color: var(--ri-paper);
	font-family: var(--ri-mono);
	font-size: var(--ri-text-2xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .18em;
	margin: 0 0 24px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(244, 239, 227, .25);
}
.site-footer a { color: rgba(244, 239, 227, .7); text-decoration: none; }
.site-footer a:hover { color: var(--ri-highlight); }

.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 12px; font-family: var(--ri-body); }

.footer-partner {
	background: rgba(244, 239, 227, .04);
	border: 1px solid rgba(244, 239, 227, .15);
	padding: 24px;
	position: relative;
}
.footer-partner::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0; height: 3px;
	background: var(--ri-accent);
}
.footer-partner h5 {
	color: var(--ri-highlight);
	font-family: var(--ri-mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .18em;
	margin: 0 0 10px;
	font-weight: 500;
}
.footer-partner p {
	font-family: var(--ri-body);
	font-size: var(--ri-text-base);
	margin: 0 0 14px;
	color: rgba(244, 239, 227, .85);
	line-height: 1.5;
}
.footer-partner a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--ri-highlight);
	font-family: var(--ri-mono);
	font-size: var(--ri-text-2xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .14em;
}
.footer-partner a:hover { color: var(--ri-paper); }

.footer-bottom {
	padding-top: 32px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	font-family: var(--ri-mono);
	font-size: var(--ri-text-2xs);
	text-transform: uppercase;
	letter-spacing: .12em;
	color: rgba(244, 239, 227, .45);
}
.footer-bottom a { color: rgba(244, 239, 227, .55); }

/* --------------------------------------------------------------------------
   13. Comments
   -------------------------------------------------------------------------- */
.comments-area {
	max-width: var(--ri-narrow);
	margin: 80px auto;
	padding: 0 24px;
}
.comments-title {
	font-family: var(--ri-display);
	font-style: italic;
	font-size: 2.25rem;
	font-weight: 400;
	margin-bottom: 32px;
}
.comments-area .comment {
	border-bottom: 1px solid var(--ri-line-soft);
	padding: 28px 0;
}
.comments-area .comment-meta {
	font-family: var(--ri-mono);
	font-size: var(--ri-text-2xs);
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--ri-muted);
	margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   14. Forms
   -------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea {
	font-family: var(--ri-body);
	font-size: var(--ri-text-base);
	padding: 14px 16px;
	border: 1px solid var(--ri-line);
	background: var(--ri-paper-soft);
	color: var(--ri-ink);
	width: 100%;
	transition: border-color .2s var(--ri-ease);
}
input:focus, textarea:focus {
	outline: none;
	border-color: var(--ri-ink);
	background: var(--ri-paper);
}

button:not(.newsletter-form button), .button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--ri-ink);
	color: var(--ri-paper);
	font-family: var(--ri-mono);
	font-size: var(--ri-text-2xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .16em;
	padding: 14px 22px;
	border: 0;
	cursor: pointer;
	text-decoration: none;
	transition: background .2s var(--ri-ease);
}
button:not(.newsletter-form button):hover, .button:hover { background: var(--ri-accent); color: var(--ri-paper); }

/* --------------------------------------------------------------------------
   15. Search overlay
   -------------------------------------------------------------------------- */
.search-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 15, 18, .96);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	display: none;
	align-items: flex-start;
	justify-content: center;
	padding-top: 18vh;
	z-index: 200;
}
.search-overlay.is-open { display: flex; }
.search-overlay-form {
	width: 100%;
	max-width: 700px;
	padding: 0 32px;
}
.search-overlay-form .label {
	font-family: var(--ri-mono);
	font-size: var(--ri-text-2xs);
	text-transform: uppercase;
	letter-spacing: .2em;
	color: var(--ri-highlight);
	margin-bottom: 14px;
	display: block;
}
.search-overlay-form input {
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 2px solid var(--ri-paper);
	color: var(--ri-paper);
	font-family: var(--ri-display);
	font-style: italic;
	font-size: clamp(2rem, 4vw, 3.5rem);
	font-weight: 400;
	padding: 12px 0;
	outline: none;
	letter-spacing: -0.02em;
}
.search-overlay-form input::placeholder { color: rgba(244, 239, 227, .35); }
.search-overlay-close {
	position: absolute;
	top: 32px; right: 32px;
	background: none;
	border: 0;
	color: var(--ri-paper);
	font-family: var(--ri-mono);
	font-size: var(--ri-text-xs);
	text-transform: uppercase;
	letter-spacing: .16em;
	cursor: pointer;
	padding: 8px 14px;
	border: 1px solid rgba(244, 239, 227, .3);
}
.search-overlay-close:hover { background: var(--ri-paper); color: var(--ri-ink); }

/* --------------------------------------------------------------------------
   16. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.hero-grid { grid-template-columns: 1fr; gap: 48px; }
	.hero-image { aspect-ratio: 16/10; }
	.post-grid--mag { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 920px) {
	.masthead-main { grid-template-columns: 1fr auto 1fr; gap: 16px; padding: 24px 0; }
	.masthead-edition .stack { display: inline; margin-right: 8px; }
	.masthead-edition .stack:last-child { display: none; }
	.post-grid, .post-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.newsletter-grid { grid-template-columns: 1fr; gap: 40px; align-items: start; }
	.footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
	.section-head { grid-template-columns: 1fr; gap: 16px; }
	.section-link { justify-self: start; }
	.article-body blockquote, .pullquote { margin-left: 0; margin-right: 0; }
}

@media (max-width: 700px) {
	:root {
		--ri-text-3xl: 2.25rem;
		--ri-text-4xl: 3rem;
		--ri-text-5xl: 3.75rem;
	}
	.container { padding: 0 20px; }
	.masthead-meta { font-size: 9px; padding: 10px 0; }
	.masthead-meta-left, .masthead-meta-right { gap: 12px; }
	.masthead-meta-right span:first-child { display: none; }
	.masthead-main { grid-template-columns: auto 1fr auto; padding: 18px 0; }
	.masthead-edition { display: none; }
	.masthead-cta { display: none; }
	.masthead-nav { display: none; }
	.masthead-nav.is-open {
		display: block;
		position: fixed;
		inset: 0;
		background: var(--ri-paper);
		padding: 100px 24px 24px;
		z-index: 90;
		overflow-y: auto;
		border: 0;
	}
	.masthead-nav.is-open .masthead-nav-inner {
		flex-direction: column;
		align-items: flex-start;
		padding: 0;
	}
	.masthead-nav.is-open ul {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}
	.masthead-nav.is-open a {
		font-family: var(--ri-display);
		font-style: italic;
		font-size: 2rem;
		text-transform: none;
		letter-spacing: -0.01em;
	}
	.masthead-toggle { display: inline-flex; }
	.section { padding: 56px 0; }
	.hero { padding: 40px 0 56px; }
	.post-grid, .post-grid--2, .post-grid--4, .post-grid--mag { grid-template-columns: 1fr; }
	.article-body > p:first-of-type::first-letter { font-size: 4rem; }
	.author-box { grid-template-columns: 64px 1fr; gap: 18px; padding: 28px 0; }
	.author-box .avatar { width: 64px; height: 64px; }
	.ri-product-card { grid-template-columns: 56px 1fr; gap: 16px; padding: 24px; }
	.ri-product-card .ri-product-cta { grid-column: 1 / -1; justify-content: center; }
	.ri-proscons { grid-template-columns: 1fr; }
	.ri-proscons > div + div { border-left: 0; border-top: 1px solid var(--ri-line); }
	.footer-grid { grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; }
	.newsletter-form { flex-direction: column; gap: 16px; border: 0; }
	.newsletter-form input[type="email"] { border-bottom: 2px solid var(--ri-paper); padding: 12px 0; }
	.newsletter-form button { padding: 14px 22px; }
	.big-cta { padding: 22px 28px; gap: 16px; width: 100%; justify-content: center; }
	.section-cta { margin-top: 48px; }
}

/* --------------------------------------------------------------------------
   17. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.ticker-track { animation: none; padding-left: 0; }
}