/*
Theme Name: Diurna News
Theme URI: https://example.com
Author: Diurna News Service
Author URI: https://example.com
Description: The day, on record. A prestige, typography-led news theme covering India & the world. Restrained broadsheet design: peacock-teal accent, Newsreader serif + Archivo sans, hairline rules, no cards or shadows, optional dark mode. Google News compatible. AdSense ready. SEO baked in.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: diurna
Tags: news, blog, custom-menu, featured-images, threaded-comments, translation-ready
*/
/* =============================================================================
TABLE OF CONTENTS
01. CSS Custom Properties (Design Tokens)
02. Reset & Base
03. Typography
04. Utility Classes
05. Layout & Grid System
06. Utility Bar (Top Bar)
07. Header & Navigation
08. Breaking News Ticker
09. Hero Section
10. Section Rows & Article Cards
11. Opinion & Analysis Strip
12. Explainer Block
13. Video Section
14. Newsletter Signup
15. Sidebar
16. Footer
17. Single Article Page
18. Breadcrumb
19. Share Buttons
20. Author Bio Box
21. Related Articles
22. Source Attribution Block
23. AdSense Slots
24. Archive & Category Pages
25. Search Results Page
26. Author Archive Page
27. 404 Page
28. Static Pages
29. Cookie Consent Banner
30. Comments Section
31. Tags Display
32. Responsive — 1280px
33. Responsive — 1024px
34. Responsive — 768px
35. Responsive — 320px
36. Print Styles
============================================================================= */
/* =============================================================================
01. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
============================================================================= */
:root {
/*
* Diurna semantic tokens.
*
* These hex values are the BASELINE, read by browsers with no oklch()
* support. The @supports block after the dark-mode rules re-declares the
* same tokens in oklch for browsers that do support it.
*
* Do not hand-tweak these hexes: each is the exact sRGB conversion of the
* oklch value quoted beside it, so both paths render the same colour.
*/
--bg: #F7FAFC; /* page background = oklch(0.984 0.004 230) */
--surface: #FCFFFF; /* header/footer/panels = oklch(0.998 0.003 230) */
--ink: #151B21; /* primary text = oklch(0.22 0.015 250) */
--soft: #4D535A; /* secondary text = oklch(0.44 0.014 250) */
--faint: #7B8187; /* meta, timestamps = oklch(0.6 0.012 250) */
--line: #D4D8DB; /* hairline borders = oklch(0.88 0.006 240) */
--accent: #006C84; /* peacock teal = oklch(0.48 0.11 215) */
--gold: #AA7D2D; /* masthead dotted rule = oklch(0.62 0.11 78) */
/* Legacy aliases → Diurna tokens (keeps the whole sheet on-brand) */
--color-bg: var(--bg);
--color-text: var(--ink);
--color-accent: var(--accent);
--color-secondary: var(--ink);
--color-border: var(--line);
--color-muted: var(--faint);
--color-light-bg: var(--surface);
--color-dark-bg: var(--ink);
--color-link: var(--ink);
--color-link-hover: var(--accent);
/* Section labels collapse to the single accent teal — intentional restraint */
--color-india: var(--accent);
--color-world: var(--accent);
--color-politics: var(--accent);
--color-economy: var(--accent);
--color-technology: var(--accent);
--color-science: var(--accent);
--color-environment: var(--accent);
--color-defence: var(--accent);
--color-sports: var(--accent);
--color-entertainment:var(--accent);
--color-health: var(--accent);
--color-education: var(--accent);
--color-opinion: var(--accent);
--color-explainer: var(--accent);
/* Typography */
--font-ui: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-body: 'Newsreader', Georgia, 'Times New Roman', serif;
--font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
--font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
/* Font Sizes — fluid scale */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-md: 1.125rem; /* 18px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.5rem; /* 24px */
--text-2xl: 1.875rem; /* 30px */
--text-3xl: 2.25rem; /* 36px */
--text-4xl: 2.75rem; /* 44px */
--text-5xl: 3.25rem; /* 52px */
/* Font Weights */
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-extrabold: 800;
/* Line Heights */
--leading-tight: 1.2;
--leading-snug: 1.35;
--leading-normal: 1.6;
--leading-relaxed: 1.75;
/* Letter Spacing */
--tracking-tight: -0.025em;
--tracking-normal: 0;
--tracking-wide: 0.05em;
--tracking-wider: 0.1em;
--tracking-widest: 0.15em;
/* Spacing Scale */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
/* Layout */
--container-max: 1180px;
--container-content: 720px;
--container-wide: 1180px;
--gutter: 1.5rem;
--sidebar-width: 300px;
/* Borders */
--radius-sm: 2px;
--radius-md: 2px;
--radius-lg: 2px;
--border-thin: 1px solid var(--line);
--border-thick: 2px solid var(--ink);
--border-accent: 3px solid var(--ink);
/* Shadows — none (Diurna is flat: no box-shadows anywhere) */
--shadow-sm: none;
--shadow-md: none;
--shadow-lg: none;
--shadow-card: none;
/* Transitions */
--transition-fast: 150ms ease;
--transition-base: 250ms ease;
--transition-slow: 400ms ease;
/* Z-index Stack */
--z-base: 1;
--z-dropdown: 100;
--z-sticky: 200;
--z-overlay: 300;
--z-modal: 400;
--z-toast: 500;
/* Header */
--header-height: 64px;
--utility-bar-height: 36px;
}
/* ---- Dark mode: redefine the semantic tokens; legacy aliases inherit ---- */
/* Hex baseline, same rule as :root above — oklch equivalents in @supports below. */
[data-theme="dark"] {
--bg: #09141C; /* = oklch(0.185 0.022 240) */
--surface: #131E26; /* = oklch(0.23 0.022 240) */
--ink: #E3E9EC; /* = oklch(0.93 0.008 230) */
--soft: #9DA6AB; /* = oklch(0.72 0.012 230) */
--faint: #6E767A; /* = oklch(0.56 0.012 230) */
--line: #2A343C; /* = oklch(0.32 0.02 240) */
--accent: #30B1C4; /* = oklch(0.7 0.11 210) */
--gold: #D1AB64; /* = oklch(0.76 0.1 82) */
}
/*
* Progressive enhancement: browsers that understand oklch() use the wide-gamut
* canonical values. Everything else keeps the hex baseline declared above.
*
* This block MUST stay after both baseline blocks — it wins on source order,
* not specificity.
*
* Why it matters: custom properties accept any token at declaration time, so an
* unsupported oklch() only fails later, when var(--ink) is substituted into a
* real property. That makes the declaration invalid at computed-value time and
* the colour falls back to inherited/initial — i.e. unreadable text, not a
* graceful degradation.
*/
@supports (color: oklch(0 0 0)) {
:root {
--bg: oklch(0.984 0.004 230);
--surface: oklch(0.998 0.003 230);
--ink: oklch(0.22 0.015 250);
--soft: oklch(0.44 0.014 250);
--faint: oklch(0.6 0.012 250);
--line: oklch(0.88 0.006 240);
--accent: oklch(0.48 0.11 215);
--gold: oklch(0.62 0.11 78);
}
[data-theme="dark"] {
--bg: oklch(0.185 0.022 240);
--surface: oklch(0.23 0.022 240);
--ink: oklch(0.93 0.008 230);
--soft: oklch(0.72 0.012 230);
--faint: oklch(0.56 0.012 230);
--line: oklch(0.32 0.02 240);
--accent: oklch(0.7 0.11 210);
--gold: oklch(0.76 0.1 82);
}
}
/* =============================================================================
02. RESET & BASE
============================================================================= */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
font-family: var(--font-ui);
font-size: var(--text-base);
font-weight: var(--weight-regular);
line-height: var(--leading-normal);
color: var(--color-text);
background-color: var(--color-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
/* Smooth theme transition on surfaces when the dark-mode toggle flips */
body,
.utility-bar,
.site-masthead,
.site-nav-bar,
.site-footer,
.site-content {
transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease;
}
@media (prefers-reduced-motion: reduce) {
body,
.utility-bar,
.site-masthead,
.site-nav-bar,
.site-footer,
.site-content {
transition: none;
}
}
/* Remove list styles on nav elements */
nav ul,
nav ol {
list-style: none;
}
/* Remove default button styles */
button {
cursor: pointer;
border: none;
background: none;
font-family: inherit;
font-size: inherit;
}
/* Links */
a {
color: var(--color-link);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--color-link-hover);
}
a:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* Images */
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
img {
height: auto;
}
/* Form elements */
input,
button,
textarea,
select {
font: inherit;
}
/* Headings */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-serif);
font-weight: var(--weight-medium); /* Diurna headlines: 500, never bold-700 */
line-height: var(--leading-tight);
color: var(--ink);
letter-spacing: -0.01em;
}
/* Paragraphs */
p {
line-height: var(--leading-relaxed);
}
/* Tables */
table {
border-collapse: collapse;
width: 100%;
}
/* HR */
hr {
border: none;
border-top: var(--border-thin);
margin: var(--space-8) 0;
}
/* Blockquote base */
blockquote {
margin: 0;
padding: 0;
}
/* Code */
code, pre {
font-family: var(--font-mono);
font-size: 0.9em;
}
pre {
overflow-x: auto;
padding: var(--space-4);
background: var(--color-light-bg);
border-radius: var(--radius-md);
border: var(--border-thin);
}
/* Iframe */
iframe {
border: none;
display: block;
}
/* WordPress alignment classes */
.alignleft { float: left; margin: 0 var(--space-6) var(--space-4) 0; }
.alignright { float: right; margin: 0 0 var(--space-4) var(--space-6); }
.aligncenter { display: block; margin: var(--space-6) auto; }
.alignwide { margin-left: -60px; margin-right: -60px; max-width: calc(100% + 120px); }
.alignfull { margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); max-width: 100vw; width: 100vw; }
/* Screen reader text */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
.screen-reader-text:focus {
background-color: var(--color-bg);
clip: auto !important;
clip-path: none;
color: var(--color-text);
display: block;
font-size: var(--text-sm);
font-weight: var(--weight-bold);
height: auto;
left: var(--space-4);
line-height: normal;
padding: var(--space-3) var(--space-4);
text-decoration: none;
top: var(--space-4);
width: auto;
z-index: var(--z-toast);
}
/* Skip to content */
.skip-link {
position: absolute;
top: -100%;
left: var(--space-4);
z-index: var(--z-toast);
background: var(--color-accent);
color: #fff;
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
transition: top var(--transition-fast);
}
.skip-link:focus {
top: var(--space-4);
color: #fff;
}
/* =============================================================================
03. TYPOGRAPHY
============================================================================= */
/* Google Fonts are enqueued in functions.php (newspress_enqueue_assets); preconnect hints are added via wp_resource_hints. */
/* Article body typography */
.entry-content {
font-family: var(--font-body);
font-size: 19px;
line-height: 1.72;
color: var(--ink);
}
.entry-content p {
margin-bottom: var(--space-6);
}
/* Pull-quote — 3px accent rule, italic serif */
.entry-content blockquote {
margin: var(--space-8) 0;
padding: 0 0 0 var(--space-6);
border-left: 3px solid var(--accent);
background: none;
font-family: var(--font-serif);
font-size: 26px;
font-style: italic;
font-weight: var(--weight-regular);
line-height: 1.3;
color: var(--ink);
}
.entry-content blockquote p {
margin-bottom: var(--space-3);
font-size: inherit;
line-height: inherit;
}
.entry-content blockquote p:last-child {
margin-bottom: 0;
}
.entry-content blockquote cite {
display: block;
margin-top: var(--space-3);
font-family: var(--font-ui);
font-size: 13px;
font-style: normal;
color: var(--faint);
}
.entry-content p:first-of-type {
font-size: var(--text-lg);
font-weight: var(--weight-medium);
line-height: var(--leading-snug);
color: var(--color-text);
}
.entry-content h2 {
font-size: var(--text-xl);
font-weight: var(--weight-bold);
margin-top: var(--space-10);
margin-bottom: var(--space-4);
padding-bottom: var(--space-2);
border-bottom: var(--border-thin);
}
.entry-content h3 {
font-size: var(--text-lg);
font-weight: var(--weight-bold);
margin-top: var(--space-8);
margin-bottom: var(--space-3);
}
.entry-content h4 {
font-size: var(--text-md);
font-weight: var(--weight-semibold);
margin-top: var(--space-6);
margin-bottom: var(--space-2);
}
.entry-content ul,
.entry-content ol {
padding-left: var(--space-6);
margin-bottom: var(--space-6);
}
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li {
margin-bottom: var(--space-2);
line-height: var(--leading-relaxed);
}
.entry-content a {
color: var(--color-accent);
text-decoration: underline;
text-underline-offset: 3px;
}
.entry-content a:hover {
color: var(--color-secondary);
}
.entry-content strong,
.entry-content b {
font-weight: var(--weight-bold);
}
.entry-content em,
.entry-content i {
font-style: italic;
}
/* Pull Quote */
.pull-quote {
margin: var(--space-10) 0;
padding: var(--space-6) var(--space-8);
border-left: 4px solid var(--color-accent);
background: var(--color-light-bg);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.pull-quote p {
font-size: var(--text-xl);
font-family: var(--font-body);
font-weight: var(--weight-medium);
font-style: italic;
line-height: var(--leading-snug);
color: var(--color-secondary);
margin-bottom: 0 !important;
}
.pull-quote cite {
display: block;
margin-top: var(--space-3);
font-size: var(--text-sm);
font-family: var(--font-ui);
font-style: normal;
color: var(--color-muted);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
/* Inline Image Caption */
.wp-caption {
max-width: 100%;
margin: var(--space-6) 0;
}
.wp-caption img {
width: 100%;
border-radius: var(--radius-sm);
}
.wp-caption-text {
font-size: var(--text-xs);
color: var(--color-muted);
font-family: var(--font-ui);
margin-top: var(--space-2);
line-height: 1.4;
}
/* Table in article */
.entry-content table {
margin: var(--space-8) 0;
font-size: var(--text-sm);
font-family: var(--font-ui);
border: var(--border-thin);
border-radius: var(--radius-md);
overflow: hidden;
}
.entry-content thead {
background: var(--color-secondary);
color: #fff;
}
.entry-content th,
.entry-content td {
padding: var(--space-3) var(--space-4);
border-bottom: var(--border-thin);
text-align: left;
}
.entry-content tr:last-child td {
border-bottom: none;
}
.entry-content tr:nth-child(even) td {
background: var(--color-light-bg);
}
/* =============================================================================
04. UTILITY CLASSES
============================================================================= */
/* Containers */
.container {
width: 100%;
max-width: var(--container-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
.container--wide {
max-width: var(--container-wide);
margin-left: auto;
margin-right: auto;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
.container--content {
max-width: var(--container-content);
margin-left: auto;
margin-right: auto;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
/* Display */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
/* Flex helpers */
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-start { display: flex; align-items: center; justify-content: flex-start; }
.flex-end { display: flex; align-items: center; justify-content: flex-end; }
.flex-wrap { flex-wrap: wrap; }
.flex-gap-2 { gap: var(--space-2); }
.flex-gap-4 { gap: var(--space-4); }
.flex-gap-6 { gap: var(--space-6); }
/* Text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
/* Font sizes */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md { font-size: var(--text-md); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
/* Font weights */
.font-regular { font-weight: var(--weight-regular); }
.font-medium { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold { font-weight: var(--weight-bold); }
/* Color utilities */
.text-muted { color: var(--color-muted); }
.text-accent { color: var(--color-accent); }
.text-secondary { color: var(--color-secondary); }
.text-white { color: #fff; }
/* Spacing */
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
/* Visually hidden (accessible) */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Truncate text */
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Divider */
.divider {
border: none;
border-top: var(--border-thin);
margin: var(--space-8) 0;
}
/* Section label pill */
.section-label {
display: inline-block;
font-family: var(--font-ui);
font-size: var(--text-xs);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
color: var(--color-accent);
padding: 0;
margin-bottom: var(--space-2);
}
.section-label--badge {
background: var(--color-accent);
color: #fff;
padding: 2px var(--space-2);
border-radius: var(--radius-sm);
}
.section-label--india { color: var(--color-india); }
.section-label--world { color: var(--color-world); }
.section-label--politics { color: var(--color-politics); }
.section-label--economy { color: var(--color-economy); }
.section-label--technology { color: var(--color-technology); }
.section-label--science { color: var(--color-science); }
.section-label--environment { color: var(--color-environment); }
.section-label--defence { color: var(--color-defence); }
.section-label--sports { color: var(--color-sports); }
.section-label--entertainment{ color: var(--color-entertainment); }
.section-label--health { color: var(--color-health); }
.section-label--education { color: var(--color-education); }
.section-label--opinion { color: var(--color-opinion); }
.section-label--explainer { color: var(--color-explainer); }
/* Breaking badge */
.badge-breaking {
display: inline-block;
background: var(--color-accent);
color: #fff;
font-size: var(--text-xs);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
padding: 2px var(--space-2);
border-radius: var(--radius-sm);
margin-right: var(--space-2);
}
/* Article type label */
.article-type-label {
display: inline-block;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
padding: 2px var(--space-3);
border-radius: var(--radius-sm);
border: 1px solid currentColor;
}
.article-type-label--news { color: var(--color-secondary); }
.article-type-label--opinion { color: var(--color-opinion); }
.article-type-label--analysis { color: var(--color-politics); }
.article-type-label--explainer { color: var(--color-explainer); }
.article-type-label--breaking { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
/* Sponsored label */
.sponsored-label {
display: inline-block;
font-size: var(--text-xs);
color: var(--color-muted);
font-style: italic;
padding: 2px var(--space-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
}
/* Image wrapper with aspect ratio */
.img-wrap {
overflow: hidden;
border-radius: var(--radius-sm);
background: var(--color-light-bg);
}
.img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.img-wrap:hover img {
transform: scale(1.03);
}
.aspect-hero { aspect-ratio: 16 / 9; }
.aspect-card { aspect-ratio: 16 / 10; }
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-portrait { aspect-ratio: 3 / 4; }
.aspect-wide { aspect-ratio: 21 / 9; }
/* Read time */
.read-time {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-xs);
color: var(--color-muted);
}
.read-time::before {
content: '';
display: inline-block;
width: 12px;
height: 12px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12,6 12,12 16,14'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
}
/* Meta row (byline, date, read time) */
.entry-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
font-size: var(--text-sm);
color: var(--color-muted);
font-family: var(--font-ui);
}
.entry-meta a {
color: var(--color-secondary);
font-weight: var(--weight-semibold);
}
.entry-meta a:hover {
color: var(--color-accent);
}
.entry-meta .separator {
color: var(--color-border);
}
/* Date */
.entry-date,
.entry-date-updated {
font-size: var(--text-xs);
}
.entry-date-updated {
color: var(--color-muted);
font-style: italic;
}
/* Byline */
.byline {
font-weight: var(--weight-semibold);
color: var(--color-secondary);
font-size: var(--text-sm);
}
.byline a {
color: inherit;
}
.byline a:hover {
color: var(--color-accent);
}
/* =============================================================================
05. LAYOUT & GRID SYSTEM
============================================================================= */
/* Site wrapper */
.site {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-content {
flex: 1;
padding-top: var(--space-8);
padding-bottom: var(--space-16);
}
/* Content + Sidebar layout */
.content-sidebar-wrap {
display: grid;
grid-template-columns: 1fr var(--sidebar-width);
gap: var(--space-10);
align-items: start;
}
/* Full-width content (no sidebar) */
.content-full {
max-width: var(--container-content);
margin: 0 auto;
}
/* 3-column card grid */
.card-grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
/* 2-column grid */
.card-grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-6);
}
/* 4-column grid */
.card-grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-6);
}
/* Hero + 2-column grid */
.hero-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--space-6);
}
/* Lead story + right rail */
.hero-secondary-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--space-10);
}
.hero-secondary-grid .secondary-posts {
display: flex;
flex-direction: column;
gap: 0;
}
/* Section spacing */
.section-block {
padding: var(--space-10) 0;
border-bottom: var(--border-thin);
}
.section-block:last-child {
border-bottom: none;
}
/* Section header (label + view all) */
.section-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-4);
margin-bottom: var(--space-6);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--line);
}
.section-header__title {
font-family: var(--font-serif);
font-size: 27px;
font-weight: var(--weight-medium);
font-style: italic;
letter-spacing: -0.01em;
color: var(--ink);
text-transform: none;
}
.section-header__link {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-muted);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
text-decoration: none;
transition: color var(--transition-fast);
}
.section-header__link:hover {
color: var(--color-accent);
}
/* =============================================================================
06. UTILITY BAR (TOP BAR)
============================================================================= */
.utility-bar {
background: var(--surface);
height: var(--utility-bar-height);
border-bottom: 1px solid var(--line);
position: relative;
z-index: var(--z-sticky);
}
.utility-bar__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
}
.utility-bar__meta {
display: flex;
align-items: center;
gap: var(--space-2);
min-width: 0;
font-family: var(--font-ui);
font-size: 12px;
color: var(--soft);
}
.utility-bar__date {
letter-spacing: 0.02em;
white-space: nowrap;
}
.utility-bar__sep {
color: var(--faint);
}
.utility-bar__location {
color: var(--accent);
font-weight: 600;
letter-spacing: 0.02em;
white-space: nowrap;
}
/* Dark-mode toggle — bordered ghost button */
.theme-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--soft);
background: transparent;
border: 1px solid var(--line);
border-radius: 2px;
padding: 4px 12px;
line-height: 1;
transition: color var(--transition-fast), border-color var(--transition-fast);
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
color: var(--accent);
border-color: var(--accent);
}
/* =============================================================================
07. HEADER & NAVIGATION
============================================================================= */
/* ---- Masthead: centered wordmark block ---- */
.site-masthead {
background: var(--surface);
border-bottom: 1px solid var(--line);
text-align: center;
padding: var(--space-6) 0 var(--space-5);
}
.masthead-rule {
height: 9px;
max-width: 460px;
margin: 0 auto 16px;
background: radial-gradient(circle at center, var(--gold) 1.3px, transparent 2.2px) 0 50% / 17px 9px repeat-x;
opacity: 0.6;
}
.site-wordmark a {
display: inline-block;
line-height: 1;
color: var(--ink);
}
/*
* Masthead wordmark — "DIURNA" (Variant A: fluid).
* Scales continuously, so there are deliberately NO breakpoint overrides for
* this rule further down the sheet. Keep it in sync with critical.css, or the
* masthead visibly resizes as the main stylesheet loads over the inlined CSS.
*
* nowrap is the actual guarantee against wrapping at 320px.
* padding-left cancels the trailing gap letter-spacing adds after the final
* letter, which would otherwise push the centred wordmark left — the same
* idiom .site-tagline uses.
*/
.site-wordmark__text {
font-family: var(--font-serif);
font-size: clamp(2rem, 7vw + 0.5rem, 3.625rem);
font-weight: var(--weight-semibold);
line-height: 1;
letter-spacing: 0.12em;
padding-left: 0.12em;
text-transform: uppercase;
white-space: nowrap;
display: inline-block;
color: var(--ink);
}
.site-wordmark__img {
height: 56px;
width: auto;
margin: 0 auto;
}
.site-tagline {
margin-top: var(--space-3);
font-family: var(--font-ui);
font-size: 11px;
font-weight: var(--weight-medium);
line-height: 1;
letter-spacing: 0.44em;
text-transform: uppercase;
color: var(--soft);
padding-left: 0.44em; /* optical re-centering for the wide tracking */
}
/* ---- Sticky primary-nav bar ---- */
.site-nav-bar {
background: var(--surface);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
position: sticky;
top: 0;
z-index: var(--z-sticky);
}
.site-nav-bar__inner {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 47px;
}
/* Primary Navigation — centered, uppercase */
.primary-nav {
display: flex;
justify-content: center;
align-items: center;
}
.primary-nav__menu {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
list-style: none;
gap: 0;
}
.primary-nav__menu > li > a {
display: block;
padding: 13px var(--space-4);
font-family: var(--font-ui);
font-size: 13px;
font-weight: var(--weight-medium);
color: var(--ink);
text-transform: uppercase;
letter-spacing: 0.05em;
transition: color var(--transition-fast);
position: relative;
white-space: nowrap;
}
.primary-nav__menu > li > a::after {
content: '';
position: absolute;
bottom: -1px; /* flush to the nav bar's bottom hairline */
left: var(--space-4);
right: var(--space-4);
height: 2px;
background: var(--accent);
transform: scaleX(0);
transition: transform var(--transition-fast);
}
.primary-nav__menu > li > a:hover,
.primary-nav__menu > li.current-menu-item > a,
.primary-nav__menu > li.current-menu-ancestor > a {
color: var(--accent);
}
.primary-nav__menu > li > a:hover::after,
.primary-nav__menu > li.current-menu-item > a::after,
.primary-nav__menu > li.current-menu-ancestor > a::after {
transform: scaleX(1);
}
/* Search + mobile toggle float to the nav bar's edges */
.site-nav-bar__inner .header-search {
position: absolute;
right: var(--gutter);
top: 50%;
transform: translateY(-50%);
}
.site-nav-bar__inner .mobile-nav-toggle {
position: absolute;
left: var(--gutter);
top: 50%;
transform: translateY(-50%);
}
/* Dropdown (sub-menu) */
.primary-nav__menu .sub-menu {
position: absolute;
top: 100%;
left: 0;
background: var(--color-bg);
border: var(--border-thin);
border-top: 2px solid var(--color-accent);
min-width: 200px;
box-shadow: var(--shadow-md);
border-radius: 0 0 var(--radius-md) var(--radius-md);
opacity: 0;
visibility: hidden;
transform: translateY(4px);
transition: opacity var(--transition-fast), transform var(--transition-fast);
z-index: var(--z-dropdown);
list-style: none;
}
.primary-nav__menu li {
position: relative;
}
.primary-nav__menu li:hover > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.primary-nav__menu .sub-menu a {
display: block;
padding: var(--space-2) var(--space-4);
font-size: var(--text-sm);
color: var(--color-text);
transition: background var(--transition-fast), color var(--transition-fast);
font-weight: var(--weight-medium);
}
.primary-nav__menu .sub-menu a:hover {
background: var(--color-light-bg);
color: var(--color-accent);
}
.primary-nav__menu .sub-menu li:last-child a {
border-radius: 0 0 var(--radius-md) var(--radius-md);
}
/* Search */
.header-search {
position: relative;
display: flex;
align-items: center;
}
.header-search__toggle {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--radius-md);
color: var(--color-text);
transition: background var(--transition-fast), color var(--transition-fast);
}
.header-search__toggle:hover {
background: var(--color-light-bg);
color: var(--color-accent);
}
.header-search__toggle svg {
width: 18px;
height: 18px;
stroke: currentColor;
fill: none;
stroke-width: 2;
}
.header-search__form {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
background: var(--color-bg);
border: var(--border-thick);
border-radius: var(--radius-md);
overflow: hidden;
width: 0;
opacity: 0;
transition: width var(--transition-base), opacity var(--transition-fast);
pointer-events: none;
}
.header-search__form.is-active {
width: 280px;
opacity: 1;
pointer-events: all;
}
.header-search__input {
flex: 1;
border: none;
padding: var(--space-2) var(--space-3);
font-size: var(--text-sm);
background: transparent;
color: var(--color-text);
outline: none;
}
.header-search__input::placeholder {
color: var(--color-muted);
}
.header-search__submit {
padding: var(--space-2) var(--space-3);
background: var(--color-accent);
color: #fff;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
transition: background var(--transition-fast);
}
.header-search__submit:hover {
background: var(--color-secondary);
}
/* Mobile menu toggle */
.mobile-nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 40px;
height: 40px;
cursor: pointer;
}
.mobile-nav-toggle span {
display: block;
width: 24px;
height: 2px;
background: var(--color-text);
transition: transform var(--transition-base), opacity var(--transition-fast);
}
.mobile-nav-toggle.is-active span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.mobile-nav-toggle.is-active span:nth-child(2) {
opacity: 0;
}
.mobile-nav-toggle.is-active span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* Mobile drawer */
.mobile-nav-drawer {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: var(--z-overlay);
opacity: 0;
transition: opacity var(--transition-base);
}
.mobile-nav-drawer.is-open {
opacity: 1;
}
.mobile-nav-drawer__panel {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 100%;
background: var(--color-bg);
overflow-y: auto;
transform: translateX(-100%);
transition: transform var(--transition-base);
padding: var(--space-6);
}
.mobile-nav-drawer.is-open .mobile-nav-drawer__panel {
transform: translateX(0);
}
.mobile-nav-drawer__menu {
list-style: none;
margin-top: var(--space-8);
}
.mobile-nav-drawer__menu li a {
display: block;
padding: var(--space-3) 0;
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: var(--color-text);
border-bottom: var(--border-thin);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
}
.mobile-nav-drawer__menu li a:hover {
color: var(--color-accent);
}
.mobile-nav-close {
position: absolute;
top: var(--space-4);
right: var(--space-4);
font-size: var(--text-xl);
color: var(--color-text);
background: none;
border: none;
cursor: pointer;
line-height: 1;
}
/* =============================================================================
08. BREAKING NEWS TICKER
============================================================================= */
.breaking-ticker {
background: var(--ink);
height: 40px;
display: flex;
align-items: center;
overflow: hidden;
}
.breaking-ticker__label {
flex-shrink: 0;
background: var(--accent);
color: #fff;
font-family: var(--font-ui);
font-size: 11px;
font-weight: var(--weight-bold);
letter-spacing: 0.13em;
text-transform: uppercase;
padding: 0 16px;
height: 100%;
display: flex;
align-items: center;
white-space: nowrap;
margin-right: var(--space-6);
}
.breaking-ticker__track {
flex: 1;
overflow: hidden;
position: relative;
}
.breaking-ticker__items {
display: flex;
align-items: center;
gap: 30px;
white-space: nowrap;
animation: ticker-scroll 42s linear infinite;
}
.breaking-ticker__items:hover {
animation-play-state: paused;
}
.breaking-ticker__item {
display: inline-flex;
align-items: center;
font-family: var(--font-ui);
font-size: 13px;
color: var(--bg);
font-weight: var(--weight-regular);
}
.breaking-ticker__item a {
color: var(--bg);
text-decoration: none;
}
.breaking-ticker__item a:hover {
color: #fff;
}
@keyframes ticker-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* =============================================================================
09. HERO SECTION
============================================================================= */
.hero-section {
padding: var(--space-8) 0;
border-bottom: var(--border-thin);
}
/* Large lead story */
.hero-post {
position: relative;
}
.hero-post__img-wrap {
aspect-ratio: 16 / 9;
overflow: hidden;
border: 1px solid var(--line);
background: var(--surface);
position: relative;
}
.hero-post__img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-post__meta {
margin-top: var(--space-4);
}
.hero-post__section {
display: inline-block;
font-family: var(--font-ui);
font-size: 12px;
font-weight: var(--weight-bold);
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: var(--space-2);
}
.hero-post__title {
font-family: var(--font-serif);
font-size: 44px;
font-weight: var(--weight-medium);
line-height: 1.06;
letter-spacing: -0.01em;
color: var(--ink);
margin-bottom: var(--space-3);
}
.hero-post__title a {
color: inherit;
}
.hero-post__title a:hover {
color: var(--accent);
}
.hero-post__excerpt {
font-family: var(--font-serif);
font-size: 19px;
color: var(--soft);
line-height: 1.5;
margin-bottom: var(--space-3);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/*
* The hero now renders through the shared card-meta.php component (owner
* decision, THEME-NOTES) instead of its own hand-rolled markup, so its date
* line can never drift out of sync with every other card again. card-meta.php
* emits fixed .article-card__* class names sized for a grid card; without
* this override the homepage's main headline would shrink from 44px to 19px.
* Same pattern as .section-lead .article-card__title below, just restoring
* the hero's own type scale instead of the lead story's.
*/
.hero-post .article-card__section {
font-family: var(--font-ui);
font-size: 12px;
letter-spacing: 0.13em;
margin-bottom: var(--space-2);
}
.hero-post .article-card__title {
font-family: var(--font-serif);
font-size: 44px;
font-weight: var(--weight-medium);
line-height: 1.06;
letter-spacing: -0.01em;
margin-bottom: var(--space-3);
}
.hero-post .article-card__excerpt {
font-family: var(--font-serif);
font-size: 19px;
color: var(--soft);
line-height: 1.5;
-webkit-line-clamp: 3;
}
/* Right-rail rows: text + square thumb, hairline separated */
.hero-secondary {
display: grid;
grid-template-columns: 1fr 96px;
gap: var(--space-4);
align-items: start;
border-bottom: 1px solid var(--line);
padding: var(--space-4) 0;
}
.hero-secondary:first-child {
padding-top: 0;
}
.hero-secondary__img-wrap {
aspect-ratio: 1 / 1;
width: 96px;
overflow: hidden;
border: 1px solid var(--line);
background: var(--surface);
}
.hero-secondary__img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-secondary__section {
display: block;
font-family: var(--font-ui);
font-size: 11px;
font-weight: var(--weight-bold);
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: var(--space-1);
}
.hero-secondary__title {
font-family: var(--font-serif);
font-size: 18px;
font-weight: var(--weight-medium);
line-height: 1.2;
letter-spacing: -0.005em;
}
.hero-secondary__title a {
color: var(--ink);
}
.hero-secondary__title a:hover {
color: var(--accent);
}
/* Most Read — numbered list below the rail */
.most-read {
margin-top: var(--space-6);
border-top: 2px solid var(--ink);
padding-top: var(--space-4);
}
.most-read__title {
font-family: var(--font-serif);
font-size: 22px;
font-style: italic;
font-weight: var(--weight-medium);
color: var(--ink);
margin-bottom: var(--space-3);
}
.most-read__list {
list-style: none;
counter-reset: most-read;
}
.most-read__item {
counter-increment: most-read;
display: grid;
grid-template-columns: 36px 1fr;
gap: var(--space-3);
align-items: baseline;
padding: var(--space-3) 0;
border-bottom: 1px solid var(--line);
}
.most-read__item:last-child {
border-bottom: none;
}
.most-read__item::before {
content: counter(most-read);
font-family: var(--font-serif);
font-size: 28px;
font-weight: var(--weight-medium);
color: var(--faint);
line-height: 1;
}
.most-read__item a {
font-family: var(--font-serif);
font-size: 16px;
font-weight: var(--weight-medium);
line-height: 1.3;
color: var(--ink);
}
.most-read__item a:hover {
color: var(--accent);
}
/* =============================================================================
10. SECTION ROWS & ARTICLE CARDS
============================================================================= */
/* Article Card */
.article-card {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.article-card__img-wrap {
aspect-ratio: 16 / 10;
overflow: hidden;
border: 1px solid var(--line);
background: var(--surface);
}
.article-card__img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.article-card:hover .article-card__img-wrap img {
transform: scale(1.04);
}
.article-card__section {
font-size: var(--text-xs);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
color: var(--color-accent);
}
.article-card__title {
font-family: var(--font-serif);
font-size: 19px;
font-weight: var(--weight-medium);
line-height: 1.2;
letter-spacing: -0.005em;
color: var(--ink);
}
.article-card__title a {
color: inherit;
}
.article-card__title a:hover {
color: var(--color-accent);
}
.article-card__excerpt {
font-size: var(--text-sm);
color: var(--color-muted);
line-height: var(--leading-relaxed);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.article-card__meta {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
font-size: var(--text-xs);
color: var(--color-muted);
font-family: var(--font-ui);
}
.article-card__meta .byline {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-secondary);
}
/* List-style article card (horizontal) */
.article-card--horizontal {
flex-direction: row;
gap: var(--space-4);
}
.article-card--horizontal .article-card__img-wrap {
flex-shrink: 0;
width: 100px;
aspect-ratio: 1 / 1;
border-radius: var(--radius-sm);
}
.article-card--horizontal .article-card__body {
flex: 1;
}
.article-card--horizontal .article-card__title {
font-size: var(--text-sm);
}
/* Ad slot between cards */
.homepage-ad-slot {
margin: var(--space-8) 0;
text-align: center;
}
/* =============================================================================
11. OPINION & ANALYSIS STRIP
============================================================================= */
.opinion-section {
padding: var(--space-10) 0;
border-bottom: var(--border-thin);
}
.opinion-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-6);
}
.opinion-card {
border-top: 2px solid var(--ink);
padding-top: var(--space-4);
background: transparent;
}
.opinion-card__author {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.opinion-card__author-img {
width: 38px;
height: 38px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
background: color-mix(in oklab, var(--accent) 18%, var(--surface));
}
.opinion-card__author-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.opinion-card__author-name {
font-family: var(--font-ui);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--ink);
line-height: 1.2;
}
.opinion-card__author-name:hover {
color: var(--accent);
}
.opinion-card__author-role {
font-family: var(--font-ui);
font-size: var(--text-xs);
color: var(--faint);
margin-top: 2px;
}
.opinion-card__label {
display: inline-block;
font-family: var(--font-ui);
font-size: var(--text-xs);
font-weight: var(--weight-bold);
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.13em;
margin-bottom: var(--space-2);
}
.opinion-card__title {
font-family: var(--font-serif);
font-size: 22px;
font-style: italic;
font-weight: var(--weight-medium);
line-height: 1.22;
color: var(--ink);
margin-bottom: var(--space-2);
}
.opinion-card__title a {
color: inherit;
}
.opinion-card__title a:hover {
color: var(--accent);
}
.opinion-card__excerpt {
font-family: var(--font-serif);
font-size: var(--text-sm);
color: var(--soft);
line-height: var(--leading-relaxed);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* =============================================================================
12. EXPLAINER BLOCK
============================================================================= */
.explainer-section {
padding: var(--space-10) 0;
border-bottom: var(--border-thin);
}
.explainer-block {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border: var(--border-thin);
border-radius: var(--radius-md);
overflow: hidden;
min-height: 280px;
}
.explainer-block__media {
overflow: hidden;
position: relative;
}
.explainer-block__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.explainer-block__body {
padding: var(--space-8);
background: var(--color-secondary);
display: flex;
flex-direction: column;
justify-content: center;
}
.explainer-block__label {
font-size: var(--text-xs);
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: var(--tracking-widest);
color: rgba(255,255,255,0.6);
margin-bottom: var(--space-3);
}
.explainer-block__title {
font-size: var(--text-2xl);
font-weight: var(--weight-extrabold);
line-height: var(--leading-tight);
color: #fff;
margin-bottom: var(--space-4);
letter-spacing: var(--tracking-tight);
}
.explainer-block__title a {
color: inherit;
}
.explainer-block__title a:hover {
color: rgba(255,255,255,0.8);
}
.explainer-block__excerpt {
font-size: var(--text-sm);
color: rgba(255,255,255,0.75);
line-height: var(--leading-relaxed);
margin-bottom: var(--space-5);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.explainer-block__cta {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: #fff;
background: var(--color-accent);
padding: var(--space-2) var(--space-5);
border-radius: var(--radius-sm);
transition: opacity var(--transition-fast);
align-self: flex-start;
}
.explainer-block__cta:hover {
opacity: 0.9;
color: #fff;
}
/* =============================================================================
13. VIDEO SECTION
============================================================================= */
.video-section {
padding: var(--space-10) 0;
border-bottom: var(--border-thin);
}
.video-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
.video-card {
border-radius: var(--radius-md);
overflow: hidden;
border: var(--border-thin);
transition: box-shadow var(--transition-base);
}
.video-card:hover {
box-shadow: var(--shadow-card);
}
.video-card__embed {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
background: #000;
}
.video-card__embed iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
.video-card__body {
padding: var(--space-4);
}
.video-card__title {
font-size: var(--text-sm);
font-weight: var(--weight-bold);
line-height: var(--leading-snug);
color: var(--color-text);
margin-bottom: var(--space-2);
}
.video-card__meta {
font-size: var(--text-xs);
color: var(--color-muted);
}
/* Video placeholder */
.video-placeholder {
background: var(--color-light-bg);
border: 2px dashed var(--color-border);
border-radius: var(--radius-md);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-10);
text-align: center;
color: var(--color-muted);
font-size: var(--text-sm);
}
/* =============================================================================
14. NEWSLETTER SIGNUP
============================================================================= */
/*
* Full-width ink band: text left, signup form right.
*
* The muted tones are derived from --bg/--ink with color-mix() so they invert
* correctly in dark mode. Each is preceded by a static hex fallback for
* browsers without color-mix() support, in the same spirit as the oklch
* fallbacks in section 01.
*/
.newsletter-section {
padding: var(--space-12) 0;
background: var(--ink);
border: none;
}
.newsletter-section__inner {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--gutter);
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: var(--space-12);
align-items: center;
text-align: left;
}
.newsletter-section__label {
font-family: var(--font-ui);
font-size: 12px;
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--gold);
margin-bottom: var(--space-3);
}
.newsletter-section__title {
font-family: var(--font-serif);
font-size: 33px;
font-weight: var(--weight-medium);
line-height: 1.12;
letter-spacing: -0.01em;
color: var(--bg);
margin-bottom: var(--space-3);
}
.newsletter-section__desc {
font-family: var(--font-ui);
font-size: 15px;
color: #B4B9BD;
color: color-mix(in oklab, var(--bg) 70%, var(--ink));
margin-bottom: 0;
line-height: 1.6;
}
.newsletter-form {
display: flex;
gap: var(--space-2);
max-width: 440px;
margin: 0;
}
.newsletter-form__input {
flex: 1;
min-width: 0;
padding: 15px 16px;
border: 1px solid #5F666B;
border: 1px solid color-mix(in oklab, var(--bg) 35%, var(--ink));
border-radius: 2px;
font-family: var(--font-ui);
font-size: 14px;
color: var(--bg);
background: transparent;
outline: none;
transition: border-color var(--transition-fast);
}
.newsletter-form__input:focus {
border-color: var(--accent);
}
.newsletter-form__input::placeholder {
color: #7B7F83;
color: color-mix(in oklab, var(--bg) 45%, var(--ink));
}
.newsletter-form__btn {
flex-shrink: 0;
padding: 15px 26px;
background: var(--accent);
color: #fff;
font-family: var(--font-ui);
font-size: 14px;
font-weight: var(--weight-semibold);
letter-spacing: 0.04em;
border-radius: 2px;
transition: opacity var(--transition-fast);
white-space: nowrap;
}
.newsletter-form__btn:hover {
opacity: 0.9;
}
.newsletter-form__privacy {
margin-top: var(--space-3);
font-family: var(--font-ui);
font-size: var(--text-xs);
color: #919699;
color: color-mix(in oklab, var(--bg) 55%, var(--ink));
text-align: left;
}
.newsletter-form__privacy a {
color: #C5C9CC;
color: color-mix(in oklab, var(--bg) 78%, var(--ink));
text-decoration: underline;
}
.newsletter-form__privacy a:hover {
color: var(--accent);
}
/* =============================================================================
15. SIDEBAR
============================================================================= */
.sidebar {
position: sticky;
top: calc(var(--header-height) + var(--space-6));
}
.widget {
margin-bottom: var(--space-8);
padding-bottom: var(--space-8);
border-bottom: var(--border-thin);
}
.widget:last-child {
border-bottom: none;
}
.widget-title {
font-size: var(--text-base);
font-weight: var(--weight-extrabold);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--color-secondary);
margin-bottom: var(--space-4);
padding-bottom: var(--space-2);
border-bottom: 2px solid var(--color-accent);
display: inline-block;
}
/* Popular posts widget */
.widget-popular-posts ol {
list-style: none;
counter-reset: popular-counter;
}
.widget-popular-posts li {
counter-increment: popular-counter;
display: flex;
gap: var(--space-3);
align-items: flex-start;
padding: var(--space-3) 0;
border-bottom: var(--border-thin);
}
.widget-popular-posts li:last-child {
border-bottom: none;
}
.widget-popular-posts li::before {
content: counter(popular-counter);
font-size: var(--text-xl);
font-weight: var(--weight-extrabold);
color: var(--color-border);
line-height: 1;
flex-shrink: 0;
min-width: 24px;
}
.widget-popular-posts a {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--color-text);
line-height: var(--leading-snug);
text-decoration: none;
}
.widget-popular-posts a:hover {
color: var(--color-accent);
}
/* Ad sidebar */
.ad-sidebar {
background: var(--color-light-bg);
border: var(--border-thin);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
min-height: 250px;
position: sticky;
top: calc(var(--header-height) + var(--space-4));
}
/* =============================================================================
16. FOOTER
============================================================================= */
.site-footer {
background: var(--surface);
color: var(--soft);
border-top: 3px solid var(--ink);
padding-top: var(--space-12);
padding-bottom: 0;
}
.footer-top {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--space-8);
padding-bottom: var(--space-10);
border-bottom: 1px solid var(--line);
}
/* Footer column 1: Brand */
.footer-brand .footer-logo {
margin-bottom: var(--space-4);
}
.footer-brand .footer-logo img,
.footer-brand .footer-logo svg {
height: 34px;
width: auto;
}
.footer-brand__logo-text {
font-family: var(--font-serif);
font-size: 26px;
font-weight: var(--weight-semibold);
letter-spacing: 0.01em;
text-transform: uppercase;
color: var(--ink);
}
.footer-brand__tagline {
font-family: var(--font-ui);
font-size: 15px;
color: var(--soft);
line-height: 1.6;
margin-bottom: var(--space-5);
max-width: 320px;
}
.footer-social {
display: flex;
gap: var(--space-3);
}
.footer-social__link {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid var(--line);
color: var(--soft);
transition: color var(--transition-fast), border-color var(--transition-fast);
}
.footer-social__link:hover {
color: var(--accent);
border-color: var(--accent);
}
.footer-social__link svg {
width: 14px;
height: 14px;
fill: currentColor;
}
/* Footer columns 2 & 3: Links */
.footer-links__title {
font-family: var(--font-ui);
font-size: 11px;
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: 0.13em;
color: var(--faint);
margin-bottom: var(--space-5);
}
.footer-links__list {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.footer-links__list a {
font-family: var(--font-ui);
font-size: 13px;
color: var(--soft);
transition: color var(--transition-fast);
}
.footer-links__list a:hover {
color: var(--accent);
}
/* Footer column 4: Contact + mini newsletter */
.footer-contact__title {
font-family: var(--font-ui);
font-size: 11px;
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: 0.13em;
color: var(--faint);
margin-bottom: var(--space-5);
}
.footer-contact__info {
font-family: var(--font-ui);
font-size: 13px;
color: var(--soft);
line-height: 1.6;
margin-bottom: var(--space-5);
}
.footer-contact__info a {
color: var(--soft);
}
.footer-contact__info a:hover {
color: var(--accent);
}
.footer-newsletter {
display: flex;
gap: var(--space-2);
}
.footer-newsletter__input {
flex: 1;
min-width: 0;
padding: var(--space-2) var(--space-3);
border: 1px solid var(--line);
border-radius: 2px;
background: var(--bg);
font-family: var(--font-ui);
font-size: 13px;
color: var(--ink);
outline: none;
transition: border-color var(--transition-fast);
}
.footer-newsletter__input:focus {
border-color: var(--accent);
}
.footer-newsletter__input::placeholder {
color: var(--faint);
}
.footer-newsletter__btn {
padding: var(--space-2) var(--space-4);
background: var(--accent);
color: #fff;
font-family: var(--font-ui);
font-size: 11px;
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: 0.08em;
border-radius: 2px;
transition: opacity var(--transition-fast);
white-space: nowrap;
}
.footer-newsletter__btn:hover {
opacity: 0.88;
}
/* Footer bottom bar */
.footer-bottom {
padding: var(--space-5) 0;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-4);
}
.footer-bottom__copyright {
font-family: var(--font-ui);
font-size: var(--text-xs);
color: var(--faint);
}
.footer-bottom__links {
display: flex;
gap: var(--space-4);
flex-wrap: wrap;
}
.footer-bottom__links a {
font-family: var(--font-ui);
font-size: var(--text-xs);
color: var(--faint);
transition: color var(--transition-fast);
}
.footer-bottom__links a:hover {
color: var(--accent);
}
/* =============================================================================
17. SINGLE ARTICLE PAGE
============================================================================= */
/* Centered reading measure — sidebar stacks below on single posts */
.single-article {
max-width: var(--container-content); /* 720px */
margin: 0 auto;
padding-top: var(--space-8);
}
body.single .content-sidebar-wrap {
display: block;
}
body.single .sidebar {
max-width: var(--container-content);
margin: var(--space-12) auto 0;
}
.single-article__header {
margin-bottom: var(--space-6);
}
.single-article__section-label {
margin-bottom: var(--space-3);
}
.single-article__title {
font-family: var(--font-serif);
font-size: 44px;
font-weight: var(--weight-medium);
line-height: 1.06;
letter-spacing: -0.01em;
color: var(--ink);
margin-bottom: var(--space-4);
}
.single-article__standfirst {
font-family: var(--font-serif);
font-size: 22px;
font-style: italic;
font-weight: var(--weight-regular);
line-height: 1.4;
color: var(--soft);
margin-bottom: var(--space-5);
}
.single-article__type-label {
margin-bottom: var(--space-4);
}
.single-article__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
padding: var(--space-4) 0;
border-top: var(--border-thin);
border-bottom: var(--border-thin);
margin-bottom: var(--space-6);
}
.single-article__avatar {
width: 46px;
height: 46px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.single-article__byline {
font-family: var(--font-ui);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--ink);
}
.single-article__byline a {
color: inherit;
}
.single-article__byline a:hover {
color: var(--accent);
}
.single-article__dates {
display: flex;
flex-direction: column;
gap: 2px;
font-family: var(--font-ui);
}
.single-article__date {
font-size: var(--text-xs);
color: var(--faint);
}
.single-article__hero-img {
margin-bottom: var(--space-6);
}
.single-article__hero-img img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border: 1px solid var(--line);
}
.single-article__img-caption {
margin-top: var(--space-2);
font-size: 12px;
color: var(--faint);
display: flex;
justify-content: space-between;
gap: var(--space-4);
font-family: var(--font-ui);
}
.single-article__img-credit {
font-style: italic;
}
/* Accent drop cap on the first body paragraph */
.single-article .entry-content > p:first-of-type::first-letter {
float: left;
font-family: var(--font-serif);
font-size: 70px;
font-weight: var(--weight-semibold);
line-height: 0.82;
padding-right: 0.09em;
margin-top: 0.04em;
color: var(--accent);
}
/* Sponsored disclaimer */
.sponsored-disclaimer {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
background: #fffbeb;
border: 1px solid #f59e0b;
border-radius: var(--radius-md);
margin-bottom: var(--space-6);
font-size: var(--text-xs);
color: #92400e;
}
/* =============================================================================
18. BREADCRUMB
============================================================================= */
.breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-1);
font-size: var(--text-xs);
color: var(--color-muted);
font-family: var(--font-ui);
margin-bottom: var(--space-4);
padding: var(--space-3) 0;
border-bottom: var(--border-thin);
}
.breadcrumb__item {
display: flex;
align-items: center;
gap: var(--space-1);
}
.breadcrumb__item a {
color: var(--color-muted);
text-decoration: none;
transition: color var(--transition-fast);
}
.breadcrumb__item a:hover {
color: var(--color-accent);
}
.breadcrumb__separator {
color: var(--color-border);
font-size: 10px;
line-height: 1;
}
.breadcrumb__item--current {
color: var(--color-text);
font-weight: var(--weight-medium);
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* =============================================================================
19. SHARE BUTTONS
============================================================================= */
.share-buttons {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
.share-buttons__label {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-muted);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
margin-right: var(--space-1);
}
.share-btn {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-md);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: #fff;
transition: opacity var(--transition-fast);
text-decoration: none;
cursor: pointer;
border: none;
}
.share-btn:hover {
opacity: 0.88;
color: #fff;
}
.share-btn svg {
width: 13px;
height: 13px;
fill: currentColor;
flex-shrink: 0;
}
.share-btn--twitter { background: #000000; }
.share-btn--whatsapp { background: #25D366; }
.share-btn--facebook { background: #1877F2; }
.share-btn--copy { background: var(--color-secondary); }
.share-btn--copy.copied { background: #27ae60; }
/* =============================================================================
20. AUTHOR BIO BOX
============================================================================= */
.author-bio-box {
display: flex;
gap: var(--space-6);
align-items: flex-start;
padding: var(--space-8);
background: var(--color-light-bg);
border-radius: var(--radius-md);
border: var(--border-thin);
margin: var(--space-10) 0;
}
.author-bio-box__avatar {
flex-shrink: 0;
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
background: var(--color-border);
}
.author-bio-box__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.author-bio-box__body {
flex: 1;
}
.author-bio-box__label {
font-size: var(--text-xs);
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: var(--tracking-widest);
color: var(--color-muted);
margin-bottom: var(--space-1);
}
.author-bio-box__name {
font-size: var(--text-lg);
font-weight: var(--weight-bold);
color: var(--color-secondary);
margin-bottom: var(--space-1);
}
.author-bio-box__name a {
color: inherit;
}
.author-bio-box__name a:hover {
color: var(--color-accent);
}
.author-bio-box__role {
font-size: var(--text-sm);
color: var(--color-muted);
margin-bottom: var(--space-3);
}
.author-bio-box__bio {
font-size: var(--text-sm);
color: var(--color-text);
line-height: var(--leading-relaxed);
margin-bottom: var(--space-4);
}
.author-bio-box__socials {
display: flex;
gap: var(--space-3);
}
.author-bio-box__social-link {
display: flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-xs);
color: var(--color-secondary);
font-weight: var(--weight-medium);
text-decoration: none;
transition: color var(--transition-fast);
}
.author-bio-box__social-link:hover {
color: var(--color-accent);
}
.author-bio-box__social-link svg {
width: 14px;
height: 14px;
fill: currentColor;
}
/* =============================================================================
21. RELATED ARTICLES
============================================================================= */
.related-articles {
padding: var(--space-10) 0;
border-top: var(--border-thick);
}
.related-articles__title {
font-family: var(--font-serif);
font-size: 27px;
font-style: italic;
font-weight: var(--weight-medium);
letter-spacing: -0.01em;
color: var(--ink);
text-transform: none;
margin-bottom: var(--space-6);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--line);
display: block;
}
.related-articles__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
/* =============================================================================
22. SOURCE ATTRIBUTION BLOCK
============================================================================= */
.source-block {
margin: var(--space-8) 0;
padding: var(--space-5) var(--space-6);
background: var(--color-light-bg);
border-left: 3px solid var(--color-secondary);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.source-block__title {
font-size: var(--text-xs);
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: var(--tracking-widest);
color: var(--color-muted);
margin-bottom: var(--space-3);
}
.source-block__content {
font-size: var(--text-sm);
color: var(--color-text);
line-height: var(--leading-relaxed);
font-family: var(--font-ui);
}
.source-block__content p {
margin-bottom: var(--space-2);
}
.source-block__content p:last-child {
margin-bottom: 0;
}
/* =============================================================================
23. ADSENSE SLOTS
============================================================================= */
/* All ad slots: empty divs, ready for AdSense insertion */
[id^="ad-"] {
display: flex;
align-items: center;
justify-content: center;
background: var(--color-light-bg);
border: 1px dashed var(--color-border);
border-radius: var(--radius-sm);
font-size: var(--text-xs);
color: var(--color-muted);
font-family: var(--font-ui);
overflow: hidden;
}
/* Individual slot dimensions */
#ad-below-headline {
width: 100%;
height: 90px;
margin: var(--space-4) 0;
}
#ad-mid-article {
width: 300px;
height: 250px;
margin: var(--space-8) auto;
}
#ad-sidebar {
width: 300px;
height: 250px;
margin-bottom: var(--space-6);
}
#ad-below-article {
width: 100%;
height: 90px;
margin: var(--space-8) 0;
}
#ad-homepage-mid {
width: 100%;
height: 90px;
margin: var(--space-8) 0;
}
/* Remove dashed border when AdSense loads */
[id^="ad-"]:has(ins) {
background: transparent;
border: none;
}
/* =============================================================================
24. ARCHIVE & CATEGORY PAGES
============================================================================= */
.archive-header {
padding: var(--space-8) 0 var(--space-6);
border-bottom: var(--border-accent); /* 3px ink rule */
margin-bottom: var(--space-8);
}
.archive-header__label {
font-family: var(--font-ui);
font-size: var(--text-xs);
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: 0.13em;
color: var(--accent);
margin-bottom: var(--space-2);
}
.archive-header__title {
font-family: var(--font-serif);
font-size: 44px;
font-weight: var(--weight-medium);
font-style: normal;
color: var(--ink);
letter-spacing: -0.01em;
line-height: 1.06;
text-transform: none;
}
.archive-header__description {
font-family: var(--font-serif);
font-size: 19px;
color: var(--soft);
margin-top: var(--space-3);
max-width: 600px;
line-height: 1.5;
}
.archive-header__count {
font-family: var(--font-ui);
font-size: var(--text-sm);
color: var(--faint);
margin-top: var(--space-2);
}
.archive-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
margin-bottom: var(--space-10);
}
/* Pagination */
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-8) 0;
border-top: var(--border-thin);
}
.pagination__link,
.pagination__current {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
transition: background var(--transition-fast), color var(--transition-fast);
}
.pagination__link {
color: var(--color-text);
border: var(--border-thin);
}
.pagination__link:hover {
background: var(--color-accent);
color: #fff;
border-color: var(--color-accent);
}
.pagination__current {
background: var(--color-accent);
color: #fff;
border: 1px solid var(--color-accent);
}
.pagination__prev,
.pagination__next {
width: auto;
padding: 0 var(--space-4);
font-size: var(--text-sm);
}
/* =============================================================================
25. SEARCH RESULTS PAGE
============================================================================= */
.search-header {
padding: var(--space-8) 0 var(--space-6);
border-bottom: var(--border-thin);
margin-bottom: var(--space-8);
}
.search-header__title {
font-size: var(--text-2xl);
font-weight: var(--weight-extrabold);
color: var(--color-text);
margin-bottom: var(--space-3);
}
.search-header__term {
color: var(--color-accent);
}
.search-header__count {
font-size: var(--text-sm);
color: var(--color-muted);
}
.search-form-bar {
display: flex;
gap: 0;
max-width: 500px;
border: var(--border-thick);
border-radius: var(--radius-md);
overflow: hidden;
margin-bottom: var(--space-6);
}
.search-form-bar__input {
flex: 1;
padding: var(--space-3) var(--space-4);
border: none;
outline: none;
font-size: var(--text-base);
color: var(--color-text);
background: var(--color-bg);
}
.search-form-bar__btn {
padding: var(--space-3) var(--space-6);
background: var(--color-accent);
color: #fff;
font-size: var(--text-sm);
font-weight: var(--weight-bold);
transition: background var(--transition-fast);
}
.search-form-bar__btn:hover {
background: var(--color-secondary);
}
.search-no-results {
text-align: center;
padding: var(--space-16) 0;
color: var(--color-muted);
}
.search-no-results__title {
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
color: var(--color-text);
margin-bottom: var(--space-4);
}
/* =============================================================================
26. AUTHOR ARCHIVE PAGE
============================================================================= */
.author-header {
padding: var(--space-10) 0;
border-bottom: var(--border-thick);
margin-bottom: var(--space-8);
}
.author-header__inner {
display: flex;
gap: var(--space-8);
align-items: flex-start;
}
.author-header__avatar {
flex-shrink: 0;
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
border: 3px solid var(--color-border);
}
.author-header__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.author-header__meta {
flex: 1;
}
.author-header__label {
font-size: var(--text-xs);
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: var(--tracking-widest);
color: var(--color-accent);
margin-bottom: var(--space-1);
}
.author-header__name {
font-size: var(--text-3xl);
font-weight: var(--weight-extrabold);
color: var(--color-secondary);
letter-spacing: var(--tracking-tight);
margin-bottom: var(--space-1);
}
.author-header__role {
font-size: var(--text-base);
color: var(--color-muted);
margin-bottom: var(--space-4);
}
.author-header__bio {
font-size: var(--text-base);
color: var(--color-text);
line-height: var(--leading-relaxed);
max-width: 560px;
margin-bottom: var(--space-5);
}
.author-header__socials {
display: flex;
gap: var(--space-3);
}
/* =============================================================================
27. 404 PAGE
============================================================================= */
.error-404-page {
min-height: 60vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--space-16) var(--gutter);
}
.error-404-page__inner {
max-width: 480px;
}
.error-404-page__code {
font-size: 100px;
font-weight: var(--weight-extrabold);
color: var(--color-border);
line-height: 1;
margin-bottom: var(--space-4);
letter-spacing: var(--tracking-tight);
}
.error-404-page__title {
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
color: var(--color-text);
margin-bottom: var(--space-4);
}
.error-404-page__desc {
font-size: var(--text-base);
color: var(--color-muted);
line-height: var(--leading-relaxed);
margin-bottom: var(--space-8);
}
.error-404-page__actions {
display: flex;
gap: var(--space-4);
justify-content: center;
flex-wrap: wrap;
}
.btn-primary {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-6);
background: var(--color-accent);
color: #fff;
font-size: var(--text-sm);
font-weight: var(--weight-bold);
border-radius: var(--radius-md);
transition: background var(--transition-fast);
text-decoration: none;
}
.btn-primary:hover {
background: var(--color-secondary);
color: #fff;
}
.btn-outline {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-6);
background: transparent;
color: var(--color-secondary);
font-size: var(--text-sm);
font-weight: var(--weight-bold);
border: 2px solid var(--color-secondary);
border-radius: var(--radius-md);
transition: background var(--transition-fast), color var(--transition-fast);
text-decoration: none;
}
.btn-outline:hover {
background: var(--color-secondary);
color: #fff;
}
/* =============================================================================
28. STATIC PAGES
============================================================================= */
.static-page {
padding: var(--space-10) 0;
}
.static-page__header {
margin-bottom: var(--space-10);
padding-bottom: var(--space-6);
border-bottom: var(--border-thick);
}
.static-page__label {
font-size: var(--text-xs);
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: var(--tracking-widest);
color: var(--color-accent);
margin-bottom: var(--space-2);
}
.static-page__title {
font-size: var(--text-4xl);
font-weight: var(--weight-extrabold);
color: var(--color-secondary);
letter-spacing: var(--tracking-tight);
line-height: var(--leading-tight);
margin-bottom: var(--space-4);
}
.static-page__updated {
font-size: var(--text-sm);
color: var(--color-muted);
}
/* Policy content */
.policy-content {
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-relaxed);
color: var(--color-text);
max-width: var(--container-content);
}
.policy-content h2 {
font-family: var(--font-ui);
font-size: var(--text-xl);
font-weight: var(--weight-bold);
color: var(--color-secondary);
margin-top: var(--space-10);
margin-bottom: var(--space-4);
}
.policy-content h3 {
font-family: var(--font-ui);
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
margin-top: var(--space-6);
margin-bottom: var(--space-3);
}
.policy-content p {
margin-bottom: var(--space-5);
}
.policy-content ul {
padding-left: var(--space-6);
margin-bottom: var(--space-5);
}
.policy-content li {
margin-bottom: var(--space-2);
}
/* Contact form wrapper */
.contact-form-wrap {
max-width: 600px;
}
.contact-info-block {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-6);
margin-bottom: var(--space-10);
padding: var(--space-8);
background: var(--color-light-bg);
border-radius: var(--radius-md);
}
.contact-info-item__icon {
font-size: var(--text-xl);
margin-bottom: var(--space-2);
}
.contact-info-item__label {
font-size: var(--text-xs);
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
color: var(--color-muted);
margin-bottom: var(--space-1);
}
.contact-info-item__value {
font-size: var(--text-base);
color: var(--color-text);
font-weight: var(--weight-semibold);
}
.contact-info-item__value a {
color: var(--color-accent);
}
/* =============================================================================
29. COOKIE CONSENT BANNER
============================================================================= */
.cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: var(--z-modal);
background: var(--color-secondary);
color: #fff;
padding: var(--space-5) var(--gutter);
border-top: 3px solid var(--color-accent);
transform: translateY(100%);
transition: transform var(--transition-base);
}
.cookie-banner.is-visible {
transform: translateY(0);
}
.cookie-banner__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
max-width: var(--container-max);
margin: 0 auto;
flex-wrap: wrap;
}
.cookie-banner__text {
flex: 1;
font-size: var(--text-sm);
color: rgba(255,255,255,0.85);
line-height: var(--leading-relaxed);
min-width: 200px;
}
.cookie-banner__text a {
color: #fff;
text-decoration: underline;
}
.cookie-banner__actions {
display: flex;
gap: var(--space-3);
flex-shrink: 0;
}
.cookie-btn-accept {
padding: var(--space-2) var(--space-5);
background: var(--color-accent);
color: #fff;
font-size: var(--text-sm);
font-weight: var(--weight-bold);
border-radius: var(--radius-md);
transition: opacity var(--transition-fast);
}
.cookie-btn-accept:hover {
opacity: 0.9;
}
.cookie-btn-decline {
padding: var(--space-2) var(--space-5);
background: transparent;
color: rgba(255,255,255,0.7);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
border: 1px solid rgba(255,255,255,0.3);
border-radius: var(--radius-md);
transition: border-color var(--transition-fast), color var(--transition-fast);
}
.cookie-btn-decline:hover {
border-color: rgba(255,255,255,0.6);
color: #fff;
}
/* =============================================================================
30. COMMENTS SECTION
============================================================================= */
.comments-section {
padding: var(--space-10) 0;
border-top: var(--border-thick);
margin-top: var(--space-10);
}
.comments-section__title {
font-size: var(--text-lg);
font-weight: var(--weight-extrabold);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--color-secondary);
margin-bottom: var(--space-6);
padding-bottom: var(--space-3);
border-bottom: 2px solid var(--color-accent);
display: inline-block;
}
/* Disqus embed */
#disqus_thread {
margin-top: var(--space-4);
}
/* =============================================================================
31. TAGS DISPLAY
============================================================================= */
.tags-list {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin: var(--space-6) 0;
}
.tags-list__label {
font-family: var(--font-ui);
font-size: var(--text-xs);
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: 0.13em;
color: var(--faint);
align-self: center;
margin-right: var(--space-2);
}
.tag-item {
display: inline-block;
padding: 6px 13px;
background: transparent;
border: 1px solid var(--line);
border-radius: 2px;
font-family: var(--font-ui);
font-size: 12px;
font-weight: var(--weight-medium);
color: var(--soft);
text-decoration: none;
transition: color var(--transition-fast), border-color var(--transition-fast);
}
.tag-item:hover {
color: var(--accent);
border-color: var(--accent);
}
/* =============================================================================
31b. ARTICLE DATELINE
Wire-service opener: "New Delhi, 19 July (Diurna) —"
Sits inside .entry-content and must read as the first line of the article,
so it is floated into the opening paragraph rather than sitting as its
own block.
============================================================================= */
.article-dateline {
display: inline;
float: left;
margin: 0 0.4em 0 0;
font-family: var(--font-ui);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--soft);
/* Nudge onto the body text's baseline — the sans runs smaller than the serif. */
line-height: inherit;
}
.article-dateline__place {
color: var(--ink);
}
/* The drop cap and a floated dateline cannot share the first line. When an
article has a dateline, stand the drop cap down to a normal capital.
The class is set in single.php rather than matched with :has(), so this
still works on browsers without :has() support. Specificity is deliberately
higher than the drop-cap rule in §17 so it does not depend on source order. */
.single-article .entry-content.entry-content--has-dateline > p:first-of-type::first-letter {
float: none;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
margin: 0;
padding: 0;
color: inherit;
}
@media (max-width: 480px) {
.article-dateline {
float: none;
display: block;
margin: 0 0 0.5rem 0;
}
}
/* =============================================================================
32. RESPONSIVE — 1280px
============================================================================= */
@media (max-width: 1280px) {
:root {
--container-max: 1140px;
}
.footer-top {
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: var(--space-8);
}
.hero-post__title,
.hero-post .article-card__title {
font-size: var(--text-3xl);
}
.single-article__title {
font-size: var(--text-3xl);
}
}
/* =============================================================================
33. RESPONSIVE — 1024px
============================================================================= */
@media (max-width: 1024px) {
:root {
--container-max: 100%;
--gutter: 1.25rem;
--sidebar-width: 260px;
}
/* Navigation: fewer items visible */
.primary-nav__menu > li > a {
padding: var(--space-2);
font-size: 11px;
}
/* Content sidebar */
.content-sidebar-wrap {
grid-template-columns: 1fr 240px;
gap: var(--space-8);
}
/* Footer */
.footer-top {
grid-template-columns: 1fr 1fr;
gap: var(--space-8);
row-gap: var(--space-10);
}
/* Hero */
.hero-secondary-grid {
grid-template-columns: 2fr 1fr;
gap: var(--space-8);
}
/* Cards */
.card-grid-4 {
grid-template-columns: repeat(2, 1fr);
}
/* Opinion strip */
.opinion-strip {
grid-template-columns: repeat(2, 1fr);
}
/* Explainer */
.explainer-block {
grid-template-columns: 1fr;
}
.explainer-block__body {
padding: var(--space-6);
}
.explainer-block__title {
font-size: var(--text-xl);
}
}
/* =============================================================================
34. RESPONSIVE — 768px
============================================================================= */
@media (max-width: 768px) {
:root {
--gutter: 1rem;
--header-height: 56px;
--utility-bar-height: 32px;
}
/* Utility bar: keep location + toggle, drop the long date */
.utility-bar__date,
.utility-bar__sep {
display: none;
}
/* Header: show mobile toggle */
.primary-nav {
display: none;
}
.header-search {
display: none;
}
.mobile-nav-toggle {
display: flex;
}
.mobile-nav-drawer {
display: block;
}
/* Masthead */
.site-masthead {
padding: var(--space-5) 0 var(--space-4);
}
.site-tagline {
font-size: 9px;
letter-spacing: 0.3em;
padding-left: 0.3em;
}
.masthead-rule {
max-width: 260px;
}
/* Hero */
.hero-secondary-grid {
grid-template-columns: 1fr;
gap: var(--space-8);
}
.hero-secondary-grid .secondary-posts {
flex-direction: column;
gap: 0;
}
.hero-post__title,
.hero-post .article-card__title {
font-size: var(--text-xl);
}
/* Opinion strip */
.opinion-strip {
grid-template-columns: repeat(2, 1fr);
}
/* Grids */
.card-grid-3 {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-4);
}
.card-grid-2 {
grid-template-columns: 1fr;
}
.card-grid-4 {
grid-template-columns: repeat(2, 1fr);
}
/* Content sidebar: stack */
.content-sidebar-wrap {
grid-template-columns: 1fr;
}
.sidebar {
position: static;
border-top: var(--border-thick);
padding-top: var(--space-8);
}
/* Single article */
.single-article__title {
font-size: var(--text-2xl);
}
.single-article__meta {
flex-direction: column;
align-items: flex-start;
gap: var(--space-2);
}
/* Author bio */
.author-bio-box {
flex-direction: column;
gap: var(--space-4);
}
/* Related articles */
.related-articles__grid {
grid-template-columns: repeat(2, 1fr);
}
/* Author header */
.author-header__inner {
flex-direction: column;
gap: var(--space-4);
}
/* Footer */
.footer-top {
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
}
.footer-bottom {
flex-direction: column;
text-align: center;
}
/* Newsletter */
.newsletter-section__inner {
grid-template-columns: 1fr;
gap: var(--space-6);
}
.newsletter-section__title {
font-size: var(--text-2xl);
}
.newsletter-form {
flex-direction: column;
max-width: none;
}
/* Pull-quote */
.entry-content blockquote {
font-size: 21px;
padding-left: var(--space-4);
}
/* Contact */
.contact-info-block {
grid-template-columns: 1fr;
}
/* Archive */
.archive-grid {
grid-template-columns: repeat(2, 1fr);
}
/* Video grid */
.video-grid {
grid-template-columns: 1fr;
}
/* Static page title */
.static-page__title {
font-size: var(--text-2xl);
}
/* Archive title */
.archive-header__title {
font-size: var(--text-2xl);
}
/* Ticker */
.breaking-ticker__label {
padding: 0 var(--space-3);
font-size: 10px;
}
}
/* =============================================================================
35. RESPONSIVE — 320px (Small Mobile)
============================================================================= */
@media (max-width: 480px) {
:root {
--gutter: 0.875rem;
}
/* Grids: single column */
.card-grid-3,
.card-grid-2,
.card-grid-4,
.opinion-strip {
grid-template-columns: 1fr;
}
.hero-secondary-grid .secondary-posts {
flex-direction: column;
}
/* Rail rows: smaller square thumb */
.hero-secondary {
grid-template-columns: 1fr 72px;
}
.hero-secondary__img-wrap {
width: 72px;
}
/* Single article */
.single-article__title {
font-size: var(--text-xl);
}
/* Share buttons: wrap tightly */
.share-buttons {
gap: var(--space-1);
}
.share-btn {
padding: var(--space-1) var(--space-2);
font-size: 11px;
}
/* Author archive */
.author-header__name {
font-size: var(--text-2xl);
}
/* Footer: single column */
.footer-top {
grid-template-columns: 1fr;
gap: var(--space-8);
}
/* Related articles: single column */
.related-articles__grid {
grid-template-columns: 1fr;
}
/* Archive: single column */
.archive-grid {
grid-template-columns: 1fr;
}
/* Cookie banner */
.cookie-banner__inner {
flex-direction: column;
gap: var(--space-4);
}
.cookie-banner__actions {
width: 100%;
}
.cookie-btn-accept,
.cookie-btn-decline {
flex: 1;
text-align: center;
justify-content: center;
}
/* Newsletter */
.newsletter-form__btn {
width: 100%;
text-align: center;
}
/* Explainer */
.explainer-block__title {
font-size: var(--text-lg);
}
/* Static page */
.static-page__title {
font-size: var(--text-xl);
}
/* Error 404 */
.error-404-page__code {
font-size: 72px;
}
.error-404-page__title {
font-size: var(--text-xl);
}
}
/* =============================================================================
36. PRINT STYLES
============================================================================= */
@media print {
/* Hide non-essential elements */
.utility-bar,
.breaking-ticker,
.site-header .header-search,
.site-header .mobile-nav-toggle,
.sidebar,
.related-articles,
.share-buttons,
.newsletter-section,
.site-footer,
.cookie-banner,
.comments-section,
#ad-below-headline,
#ad-mid-article,
#ad-below-article,
#ad-sidebar,
#ad-homepage-mid {
display: none !important;
}
/* Typography for print */
body {
font-family: Georgia, serif;
font-size: 12pt;
color: #000;
background: #fff;
}
.single-article__title {
font-size: 22pt;
color: #000;
}
.entry-content {
font-family: Georgia, serif;
font-size: 11pt;
color: #000;
}
/* Show URLs for links */
a[href]::after {
content: " (" attr(href) ")";
font-size: 9pt;
color: #444;
}
a[href^="#"]::after,
a[href^="javascript:"]::after {
content: "";
}
/* Images */
img {
max-width: 100% !important;
page-break-inside: avoid;
}
/* Avoid breaks inside cards */
.article-card,
.author-bio-box,
.source-block {
page-break-inside: avoid;
}
/* Print header simplified */
.site-header {
position: static;
box-shadow: none;
border-bottom: 2px solid #000;
}
.primary-nav {
display: none;
}
/* Page margins */
@page {
margin: 1.5cm;
}
}
/* ============================================================================
THE MEDIA COMPONENT (template-parts/media.php)
----------------------------------------------------------------------------
Appended last so it wins the cascade over the older per-surface
`object-fit: cover` rules that caused the head-crop bug.
Two treatments, chosen server-side and baked into a class:
.dn-media--wide ratio >= 16:9 — fills the frame, no background layer
.dn-media--pillarbox ratio < 16:9 — blurred backdrop + uncropped subject
========================================================================== */
.dn-media-figure {
margin: 0;
}
.dn-media {
position: relative;
width: 100%;
aspect-ratio: var(--dn-ratio, 16 / 9);
overflow: hidden;
background: #0e1116; /* never a white gap if the backdrop fails to paint */
isolation: isolate; /* keeps the blur off anything painted behind */
}
/* ----------------------------------------------------------------------------
Neutralise the legacy per-surface framing.
Each surface used to impose its own aspect-ratio and force `object-fit: cover`
on any descendant ![]()
. Those selectors (e.g. `.article-card__img-wrap img`,
specificity 0,1,1) outrank `.dn-media__fg` (0,1,0), so left alone they would
re-crop the subject and stretch the backdrop back to 100%. The component owns
framing now; these wrappers become plain pass-throughs.
-------------------------------------------------------------------------- */
.hero-post__img-wrap,
.hero-secondary__img-wrap,
.article-card__img-wrap,
.article-card--horizontal .article-card__img-wrap,
.single-article__hero-img {
/* aspect-ratio: auto — the wrapper now shrinks to whatever ratio the frame
declares, instead of imposing a second, conflicting one. overflow stays
hidden so the card hover zoom is clipped to the tile. */
aspect-ratio: auto;
overflow: hidden;
}
.hero-post__img-wrap img.dn-media__fg,
.hero-post__img-wrap img.dn-media__bg,
.hero-secondary__img-wrap img.dn-media__fg,
.hero-secondary__img-wrap img.dn-media__bg,
.article-card__img-wrap img.dn-media__fg,
.article-card__img-wrap img.dn-media__bg,
.single-article__hero-img img.dn-media__fg,
.single-article__hero-img img.dn-media__bg,
.related-articles img.dn-media__fg,
.related-articles img.dn-media__bg {
transition: none;
}
.hero-post__img-wrap img.dn-media__fg,
.hero-secondary__img-wrap img.dn-media__fg,
.article-card__img-wrap img.dn-media__fg,
.single-article__hero-img img.dn-media__fg {
width: 100%;
height: 100%;
object-fit: contain;
}
.hero-post__img-wrap .dn-media--wide img.dn-media__fg,
.hero-secondary__img-wrap .dn-media--wide img.dn-media__fg,
.article-card__img-wrap .dn-media--wide img.dn-media__fg,
.single-article__hero-img .dn-media--wide img.dn-media__fg {
object-fit: cover;
}
/* The backdrop must keep its oversized inset — a 100%/100% override from a
legacy wrapper rule would expose blurred, semi-transparent edges. */
.hero-post__img-wrap img.dn-media__bg,
.hero-secondary__img-wrap img.dn-media__bg,
.article-card__img-wrap img.dn-media__bg,
.single-article__hero-img img.dn-media__bg {
width: 112%;
height: 112%;
object-fit: cover;
}
/* The card hover zoom targeted the raw ![]()
; move it to the frame so the
subject and its backdrop scale together instead of drifting apart. */
.article-card:hover .article-card__img-wrap img.dn-media__fg {
transform: none;
}
.article-card__img-wrap .dn-media {
transition: transform var(--transition-slow);
}
.article-card:hover .article-card__img-wrap .dn-media {
transform: scale(1.04);
}
.dn-media__link {
display: block;
width: 100%;
height: 100%;
}
/* The blurred backdrop. Inset negative + scale hides the soft, transparent
edge that blur() leaves behind, so the fill reaches the frame corners. */
.dn-media__bg {
position: absolute;
inset: -6%;
width: 112%;
height: 112%;
object-fit: cover;
filter: blur(28px) saturate(1.15) brightness(0.7);
transform: scale(1.06);
z-index: 0;
pointer-events: none;
}
/* The subject. `contain` is the entire point of this component — `cover` here
is what cut the heads off. Do not change it. */
.dn-media__fg {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.dn-media--focal-top .dn-media__fg { object-position: center top; }
.dn-media--focal-bottom .dn-media__fg { object-position: center bottom; }
/* Wide images have nothing to pillarbox — fill the frame. */
.dn-media--wide .dn-media__fg {
object-fit: cover;
}
/* Placeholder for posts with no featured image. */
.dn-media--placeholder {
background:
repeating-linear-gradient(
135deg,
#0e1116,
#0e1116 12px,
#161b22 12px,
#161b22 24px
);
}
/* Caption: credit and licence are a reuse condition on CC BY-SA material. */
.dn-media__caption {
margin-top: var(--space-2);
font-family: var(--font-ui);
font-size: 12px;
line-height: 1.5;
color: var(--faint, #5b6570);
}
.dn-media__caption-text { display: block; }
.dn-media__credit,
.dn-media__licence {
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 11px;
}
.dn-media__credit::after {
content: " · ";
}
.dn-media__licence:only-child::before,
.dn-media__credit:first-child::before {
content: none;
}
/* Keep the blur filter off the whole document on long card grids. The browser
skips layout and paint for off-screen cards entirely. */
.article-grid,
.section-row__grid,
.related-articles__grid {
content-visibility: auto;
contain-intrinsic-size: auto 320px;
}
@media (prefers-reduced-motion: reduce) {
.dn-media__bg { transition: none; }
}
/* ============================================================================
SECTION ARCHIVE (category.php)
========================================================================== */
.section-masthead__intro {
max-width: 68ch;
margin-top: var(--space-3);
font-size: var(--text-base);
line-height: 1.65;
color: var(--ink);
}
.section-masthead__intro p:last-child { margin-bottom: 0; }
/* Child sections, e.g. Sports -> FIFA World Cup 2026 */
.section-subnav {
margin: var(--space-5) 0 var(--space-8);
padding-bottom: var(--space-3);
border-bottom: var(--border-thin);
}
.section-subnav__list {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-5);
list-style: none;
margin: 0;
padding: 0;
}
.section-subnav__link {
font-family: var(--font-ui);
font-size: 13px;
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: 0.06em;
text-decoration: none;
color: var(--ink);
border-bottom: 2px solid transparent;
padding-bottom: 2px;
}
.section-subnav__link:hover,
.section-subnav__link:focus-visible {
border-bottom-color: var(--accent);
color: var(--accent);
}
/* Lead story */
.section-lead {
margin-bottom: var(--space-8);
padding-bottom: var(--space-8);
border-bottom: var(--border-thin);
}
.section-lead__media { margin-bottom: var(--space-5); }
.section-lead .article-card__title {
font-size: var(--text-3xl);
line-height: 1.15;
}
.section-secondary { margin-bottom: var(--space-8); }
.section-river__title {
font-family: var(--font-ui);
font-size: 13px;
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: 0.08em;
padding-bottom: var(--space-2);
margin-bottom: var(--space-5);
border-bottom: var(--border-thick);
}
/* Shared card text block */
.card-meta__labels {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
margin-bottom: var(--space-1);
}
/* Editorial flags */
.badge-flag {
font-family: var(--font-ui);
font-size: 10px;
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 2px 6px;
border-radius: var(--radius-sm);
white-space: nowrap;
}
.badge-breaking { background: #B3261E; color: #fff; }
.badge-live { background: #B3261E; color: #fff; }
.badge-exclusive { background: #1B4D8F; color: #fff; }
.badge-developing { background: #8A5A00; color: #fff; }
.badge-updated { background: var(--line); color: var(--ink); }
/* ============================================================================
AD SLOTS — reserved height at every breakpoint
----------------------------------------------------------------------------
An ad unit that expands on load is the single biggest CLS source on a news
site. Each container therefore reserves its height BEFORE anything loads, so
an unfilled or slow slot leaves a stable gap instead of shoving the article
down the page. Heights match the standard unit for each position.
========================================================================== */
.ad-slot {
display: block;
margin: var(--space-8) auto;
text-align: center;
overflow: hidden;
}
/* No ::before label here — ad-slots.php already renders its own visible
"Advertisement" placeholder, and a second one would double it up. */
/* Mobile-first reserved heights, matching the standard unit per position. */
.ad-slot--leaderboard { min-height: 114px; } /* 320x100 */
.ad-slot--in-article-1,
.ad-slot--in-article-2,
.ad-slot--mid-article,
.ad-slot--below-headline { min-height: 264px; } /* 300x250 */
.ad-slot--below-related,
.ad-slot--below-article,
.ad-slot--homepage-mid { min-height: 114px; } /* 320x100 */
.ad-slot--sidebar,
.ad-slot--sidebar-sticky { min-height: 264px; } /* 300x250 */
@media (min-width: 783px) {
.ad-slot--leaderboard,
.ad-slot--below-related,
.ad-slot--below-article,
.ad-slot--homepage-mid { min-height: 104px; } /* 728x90 / 970x90 */
.ad-slot--in-article-1,
.ad-slot--in-article-2,
.ad-slot--mid-article,
.ad-slot--below-headline { min-height: 294px; } /* 336x280 */
.ad-slot--sidebar,
.ad-slot--sidebar-sticky { min-height: 614px; } /* 300x600 */
.ad-slot--sidebar-sticky {
position: sticky;
top: var(--space-6);
}
}
/* No ads on error pages or thin archives — they have nothing to sit beside. */
.error404 .ad-slot { display: none; }