/*
Theme Name: Fact Hub Myanmar
Theme URI: https://facthubmm.org
Author: Fact Hub Myanmar
Description: Professional editorial science publication theme for Fact Hub Myanmar. Features Yati Sans Burmese typography, drag-reorderable homepage sections, built-in Fact Check post type with verdict system, full Theme Options panel, and live Customizer preview. Upload-safe and conflict-free.
Version: 4.2.3
Requires at least: 5.9
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: facthub
Tags: news, magazine, science, burmese, editorial, custom-colors, custom-logo, custom-menu, featured-images
*/
/* ═══════════════════════════════════════════
YATI SANS — BURMESE FONT (self-hosted)
Loaded via @font-face in wp_head from functions.php
These declarations are here as documentation
═══════════════════════════════════════════ */
/*
@font-face {
font-family: 'Yati Sans';
src: url('assets/fonts/YatiSans-Regular.woff2') format('woff2'),
url('assets/fonts/YatiSans-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+1000-109F, U+A9E0-A9FF, U+AA60-AA7F, U+200C, U+25CC;
}
@font-face {
font-family: 'Yati Sans';
src: url('assets/fonts/YatiSans-Bold.woff2') format('woff2'),
url('assets/fonts/YatiSans-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
unicode-range: U+1000-109F, U+A9E0-A9FF, U+AA60-AA7F, U+200C, U+25CC;
}
*/
/* ═══════════════════════════════════════════
DESIGN TOKENS
═══════════════════════════════════════════ */
:root {
/* Brand — overridden by Customizer via inline CSS */
--fh-accent: #D95F0E;
--fh-accent-hover: #C05008;
--fh-accent-light: #F5830A;
--fh-accent-pale: #FEF3E8;
--fh-accent-border: #F5C894;
/* Surfaces */
--fh-bg: #F8F6F2;
--fh-bg-alt: #F0EDE6;
--fh-white: #FFFFFF;
--fh-charcoal: #181818;
--fh-ink: #252525;
--fh-mid: #525252;
--fh-quiet: #888888;
--fh-rule: #E0DBD4;
--fh-rule-strong: #C5BEB5;
/* Category palette */
--fh-health: #0A6B6B;
--fh-earth: #2A6038;
--fh-physics: #4A35A0;
--fh-space: #18356A;
--fh-biology: #0A6B6B;
--fh-tech: #18356A;
--fh-history: #5C3018;
--fh-psych: #8A1050;
/* Verdict colors */
--fh-false: #B52020;
--fh-mislead: #C07810;
--fh-true: #187830;
--fh-unverified:#444444;
/* Typography */
--fh-serif: 'Crimson Pro', 'Yati Sans', 'Noto Serif Myanmar', Georgia, serif;
--fh-sans: 'DM Sans', 'Yati Sans', 'Noto Sans Myanmar', system-ui, sans-serif;
--fh-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Yati Sans applied to Burmese text elements via specific selectors */
/* Layout */
--fh-max-w: 1200px;
--fh-article-w: 720px;
--fh-gap: 28px;
--fh-radius: 5px;
--fh-radius-lg: 10px;
--fh-radius-xl: 16px;
/* Shadows */
--fh-shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
--fh-shadow-sm: 0 2px 8px rgba(0,0,0,0.07);
--fh-shadow-md: 0 4px 20px rgba(0,0,0,0.09);
--fh-shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
--fh-shadow-xl: 0 16px 60px rgba(0,0,0,0.14);
/* Transitions */
--fh-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--fh-t-fast: 0.15s;
--fh-t-base: 0.22s;
--fh-t-slow: 0.38s;
}
/* ═══════════════════════════════════════════
NUCLEAR LINK COLOR RESET
WordPress core, plugins, and old themes all
set `a { color: #0073aa }` or similar at
high specificity. We override everything here
using body-scoped selectors + !important.
═══════════════════════════════════════════ */
body a { color: inherit; text-decoration: none; }
body a:link { color: inherit; }
body a:visited { color: inherit; }
/* Every heading — never blue */
body h1 a, body h1 a:link, body h1 a:visited,
body h2 a, body h2 a:link, body h2 a:visited,
body h3 a, body h3 a:link, body h3 a:visited,
body h4 a, body h4 a:link, body h4 a:visited { color: inherit !important; text-decoration: none !important; }
/* Every Fact Hub text element — belt + suspenders */
body .fh-hero-headline a,
body .fh-hero-headline a:link,
body .fh-hero-headline a:visited { color: var(--fh-charcoal) !important; text-decoration: none !important; }
body .fh-hero-headline a:hover { color: var(--fh-accent) !important; }
body .fh-card-title a,
body .fh-card-title a:link,
body .fh-card-title a:visited { color: var(--fh-charcoal) !important; text-decoration: none !important; }
body .fh-card:hover .fh-card-title a { color: var(--fh-accent) !important; }
body .fh-secondary-title a,
body .fh-secondary-title a:link,
body .fh-secondary-title a:visited { color: var(--fh-charcoal) !important; text-decoration: none !important; }
body .fh-art-headline a,
body .fh-art-headline a:link,
body .fh-art-headline a:visited { color: var(--fh-charcoal) !important; text-decoration: none !important; }
body .fh-trending-title { color: var(--fh-charcoal) !important; }
body .fh-archive-title { color: var(--fh-charcoal) !important; }
body .fh-fc-claim { color: rgba(255,255,255,0.92) !important; }
body .fh-fc-card * { color: rgba(255,255,255,0.92); }
body .fh-fc-card:hover * { color: #fff; }
/* ═══════════════════════════════════════════
RESET & BASE
═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
background: var(--fh-bg);
color: var(--fh-ink);
font-family: var(--fh-sans);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
table { border-collapse: collapse; }
/* Yati Sans on all Burmese-language elements.
Also applies via font-stack fallback in --fh-serif / --fh-sans for any
element whose text contains Burmese Unicode (U+1000–U+109F).
The :lang(my) and .fh-mm selectors are EXTRA specificity for explicit Burmese elements. */
:lang(my),
.fh-burmese,
.fh-mm {
font-family: 'Yati Sans', 'Noto Sans Myanmar', sans-serif !important;
line-height: 1.85;
}
h1:lang(my), h2:lang(my), h3:lang(my),
.fh-mm-heading,
.fh-hero-headline.fh-mm,
.fh-art-headline.fh-mm {
font-family: 'Yati Sans', 'Noto Serif Myanmar', serif !important;
font-weight: 700;
line-height: 1.55;
}
/* ═══════════════════════════════════════════
LAYOUT UTILITIES
═══════════════════════════════════════════ */
.fh-wrap { max-width: var(--fh-max-w); margin: 0 auto; padding: 0 24px; }
.fh-wrap--slim { max-width: calc(var(--fh-article-w) + 48px); margin: 0 auto; padding: 0 24px; }
.fh-wrap--wide { max-width: 1400px; margin: 0 auto; padding: 0 32px; }
.fh-section { padding: 56px 0; }
.fh-section--sm { padding: 36px 0; }
.fh-section--lg { padding: 80px 0; }
.fh-bg-white { background: var(--fh-white); }
.fh-bg-alt { background: var(--fh-bg-alt); }
.fh-bg-dark { background: var(--fh-charcoal); }
.fh-bg-ink { background: #111; }
/* Grid system */
.fh-grid { display: grid; gap: var(--fh-gap); }
.fh-grid--2 { grid-template-columns: repeat(2, 1fr); }
.fh-grid--3 { grid-template-columns: repeat(3, 1fr); }
.fh-grid--4 { grid-template-columns: repeat(4, 1fr); }
.fh-grid--2-1 { grid-template-columns: 2fr 1fr; }
.fh-grid--3-1 { grid-template-columns: 3fr 1fr; }
/* ═══════════════════════════════════════════
TYPOGRAPHY SCALE
═══════════════════════════════════════════ */
.fh-display { font-family: var(--fh-serif); font-size: clamp(32px, 5vw, 52px); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; color: var(--fh-charcoal); }
.fh-h1 { font-family: var(--fh-serif); font-size: clamp(26px, 4vw, 42px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.fh-h2 { font-family: var(--fh-serif); font-size: clamp(22px, 3vw, 30px); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; }
.fh-h3 { font-family: var(--fh-serif); font-size: clamp(18px, 2.5vw, 22px); font-weight: 700; line-height: 1.25; }
.fh-body-lg { font-family: var(--fh-serif); font-size: 19px; line-height: 1.75; }
.fh-body { font-family: var(--fh-serif); font-size: 17px; line-height: 1.72; }
.fh-small { font-size: 13px; line-height: 1.5; }
.fh-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
/* ═══════════════════════════════════════════
BADGES & VERDICTS
═══════════════════════════════════════════ */
.fh-badge {
display: inline-flex; align-items: center;
align-self: flex-start; /* prevent stretching inside flex containers */
width: fit-content; /* never grow wider than content */
font-family: var(--fh-sans); font-size: 10.5px;
font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
padding: 4px 10px; border-radius: 3px; white-space: nowrap;
line-height: 1.4; transition: opacity var(--fh-t-fast);
}
.fh-badge:hover { opacity: 0.85; }
.fh-badge--accent { background: var(--fh-accent); color: #fff; }
.fh-badge--health { background: var(--fh-health); color: #fff; }
.fh-badge--earth { background: var(--fh-earth); color: #fff; }
.fh-badge--physics { background: var(--fh-physics); color: #fff; }
.fh-badge--space { background: var(--fh-space); color: #fff; }
.fh-badge--history { background: var(--fh-history); color: #fff; }
.fh-badge--psych { background: var(--fh-psych); color: #fff; }
.fh-badge--dark { background: var(--fh-charcoal); color: #fff; }
.fh-badge--outline { background: transparent; color: var(--fh-accent); border: 1.5px solid var(--fh-accent); }
.fh-badge--ghost { background: rgba(0,0,0,0.06); color: var(--fh-mid); }
/* Verdict badges */
.fh-verdict { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 3px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.fh-verdict--false { background: var(--fh-false); color: #fff; }
.fh-verdict--mislead { background: var(--fh-mislead); color: #fff; }
.fh-verdict--mixed { background: var(--fh-mislead); color: #fff; }
.fh-verdict--true { background: var(--fh-true); color: #fff; }
.fh-verdict--unverified { background: var(--fh-unverified); color: #fff; }
.fh-format-tag { font-family: var(--fh-sans); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fh-quiet); }
/* ═══════════════════════════════════════════
SECTION HEADERS
═══════════════════════════════════════════ */
.fh-section-head {
display: flex; align-items: center; gap: 14px;
padding-bottom: 18px; margin-bottom: 32px;
border-bottom: 2px solid var(--fh-charcoal);
}
.fh-section-head--light { border-bottom-color: rgba(255,255,255,0.15); }
.fh-section-dot {
width: 10px; height: 10px; border-radius: 50%;
background: var(--fh-accent); flex-shrink: 0;
}
.fh-section-name {
font-family: var(--fh-serif); font-size: 21px;
font-weight: 700; color: var(--fh-charcoal); letter-spacing: -0.01em;
}
.fh-section-name--light { color: #fff; }
.fh-section-sub { font-size: 12px; color: var(--fh-quiet); }
.fh-section-sub--light { color: rgba(255,255,255,0.4); }
.fh-section-more {
margin-left: auto; font-size: 12px; font-weight: 600;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--fh-accent); display: flex; align-items: center; gap: 5px;
white-space: nowrap; transition: gap var(--fh-t-base);
}
.fh-section-more:hover { gap: 8px; }
.fh-section-more--light { color: rgba(255,255,255,0.6); }
.fh-section-more--light:hover { color: #fff; }
/* ═══════════════════════════════════════════
BREAKING NEWS TICKER
═══════════════════════════════════════════ */
#fh-ticker {
background: var(--fh-accent); overflow: hidden;
height: 36px; display: flex; align-items: center;
}
.fh-ticker-label {
background: var(--fh-charcoal); color: #fff;
font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
text-transform: uppercase; padding: 0 18px; height: 100%;
display: flex; align-items: center; flex-shrink: 0; white-space: nowrap;
}
.fh-ticker-track {
flex: 1; overflow: hidden; position: relative; height: 100%;
}
.fh-ticker-inner {
display: flex; align-items: center; height: 100%;
white-space: nowrap;
animation: fh-ticker 30s linear infinite;
}
.fh-ticker-inner:hover { animation-play-state: paused; }
.fh-ticker-item {
font-size: 13px; font-weight: 500; color: #fff;
padding: 0 40px 0 0; display: inline-flex; align-items: center; gap: 8px;
}
.fh-ticker-sep { color: rgba(255,255,255,0.4); }
@keyframes fh-ticker {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* ═══════════════════════════════════════════
TOP BAR
═══════════════════════════════════════════ */
#fh-topbar {
background: var(--fh-charcoal); padding: 7px 0;
font-size: 11.5px; color: rgba(255,255,255,0.5);
}
#fh-topbar .fh-wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.fh-topbar-l { display: flex; gap: 20px; align-items: center; }
.fh-topbar-r { display: flex; gap: 12px; align-items: center; }
#fh-topbar a { color: rgba(255,255,255,0.6); transition: color var(--fh-t-fast); }
#fh-topbar a:hover { color: var(--fh-accent-light); }
.fh-topbar-divider { color: rgba(255,255,255,0.2); }
/* Topbar nav menu (when assigned via Appearance → Menus) */
.fh-topbar-menu { list-style: none; display: flex; align-items: center; gap: 16px; }
.fh-topbar-menu li { margin: 0; }
.fh-topbar-menu a { font-size: 11.5px; color: rgba(255,255,255,0.6); transition: color var(--fh-t-fast); }
.fh-topbar-menu a:hover { color: var(--fh-accent-light); }
.fh-social-icons { display: flex; gap: 6px; }
.fh-social-icon {
width: 26px; height: 26px; border-radius: 50%;
background: rgba(255,255,255,0.08); display: flex;
align-items: center; justify-content: center;
color: rgba(255,255,255,0.6); transition: all var(--fh-t-base);
}
.fh-social-icon:hover { background: var(--fh-accent); color: #fff; }
.fh-social-icon svg { width: 13px; height: 13px; fill: currentColor; }
/* ═══════════════════════════════════════════
MAIN HEADER
═══════════════════════════════════════════ */
#fh-header {
background: var(--fh-white);
border-bottom: 2.5px solid var(--fh-charcoal);
position: sticky; top: 0; z-index: 200;
transition: box-shadow var(--fh-t-base);
}
#fh-header.fh-scrolled { box-shadow: var(--fh-shadow-md); }
.fh-header-inner {
display: flex; align-items: center; gap: 20px;
height: 70px; padding: 0 24px;
max-width: var(--fh-max-w); margin: 0 auto;
}
/* Logo */
.fh-logo { display: flex; flex-direction: column; line-height: 1; flex-shrink: 0; text-decoration: none; }
.fh-logo-mark {
font-family: var(--fh-serif); font-size: 27px; font-weight: 700;
color: var(--fh-charcoal); letter-spacing: -0.02em;
}
.fh-logo-mark em { color: var(--fh-accent); font-style: normal; }
.fh-logo-sub {
font-family: 'Yati Sans', 'Noto Sans Myanmar', sans-serif;
font-size: 10px; color: var(--fh-quiet); margin-top: 3px; letter-spacing: 0.03em;
}
.fh-logo-img { max-height: 50px; width: auto; }
/* Primary nav */
#fh-nav { flex: 1; }
#fh-nav ul { display: flex; gap: 2px; align-items: center; list-style: none; }
#fh-nav a {
display: block; padding: 8px 13px;
font-family: var(--fh-sans); font-size: 13.5px; font-weight: 500;
color: var(--fh-ink); border-radius: var(--fh-radius);
transition: all var(--fh-t-fast); white-space: nowrap;
position: relative;
}
#fh-nav a:hover,
#fh-nav .current-menu-item > a,
#fh-nav .current-menu-ancestor > a { color: var(--fh-accent); background: var(--fh-accent-pale); }
/* Dropdown */
#fh-nav li.menu-item-has-children { position: relative; }
#fh-nav li.menu-item-has-children > a::after { content: '▾'; font-size: 10px; margin-left: 4px; opacity: 0.5; }
#fh-nav .sub-menu {
display: none; position: absolute; top: 100%; left: 0;
background: var(--fh-white); min-width: 220px;
border: 1px solid var(--fh-rule); border-top: 2px solid var(--fh-accent);
border-radius: 0 0 var(--fh-radius-lg) var(--fh-radius-lg);
box-shadow: var(--fh-shadow-lg); z-index: 300;
padding: 6px 0;
/* Bridge: invisible top padding so mouse can travel from parent to submenu
without the hover state dropping — no more slipping */
margin-top: 0;
}
/* Invisible hover bridge — fills the gap between nav item and dropdown */
#fh-nav li.menu-item-has-children::after {
content: ''; position: absolute;
top: 100%; left: 0; right: 0; height: 8px;
background: transparent;
}
#fh-nav li.menu-item-has-children:hover .sub-menu { display: block; }
#fh-nav li.menu-item-has-children:hover > a::after,
#fh-nav li.menu-item-has-children:focus-within > a::after { opacity: 1; }
/* Also keep open on focus-within for keyboard nav */
#fh-nav li.menu-item-has-children:focus-within .sub-menu { display: block; }
#fh-nav .sub-menu a {
padding: 10px 18px; border-radius: 0;
font-size: 13px; display: block;
}
#fh-nav .sub-menu a:hover { background: var(--fh-accent-pale); color: var(--fh-accent); }
/* Header actions */
.fh-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* ── Language Toggle ── */
.fh-lang-toggle {
display: flex; align-items: center;
border: 1.5px solid var(--fh-rule-strong);
border-radius: 20px; overflow: hidden;
flex-shrink: 0;
}
.fh-lang-pill {
font-family: var(--fh-sans); font-size: 11px; font-weight: 700;
letter-spacing: .05em; text-transform: uppercase;
padding: 5px 11px; text-decoration: none;
color: var(--fh-quiet);
background: transparent;
transition: background var(--fh-t-fast), color var(--fh-t-fast);
white-space: nowrap;
}
.fh-lang-pill:hover { color: var(--fh-charcoal); }
.fh-lang-pill--active {
background: var(--fh-charcoal);
color: #fff !important;
}
/* EN active pill gets accent colour */
.fh-lang-pill[lang="en"].fh-lang-pill--active {
background: #1a56a0;
}
/* Dim the inactive pill on English posts */
body.fh-lang-en .fh-lang-pill[lang="my"] { opacity: .55; }
@media (max-width: 480px) {
.fh-lang-pill { padding: 4px 9px; font-size: 10px; }
}
.fh-btn-icon {
width: 38px; height: 38px; display: flex; align-items: center;
justify-content: center; border-radius: var(--fh-radius);
color: var(--fh-mid); transition: all var(--fh-t-fast);
}
.fh-btn-icon:hover { background: var(--fh-bg); color: var(--fh-accent); }
.fh-btn-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.fh-btn-cta {
background: var(--fh-accent); color: #fff;
padding: 9px 20px; border-radius: var(--fh-radius);
font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
transition: all var(--fh-t-base); white-space: nowrap;
}
.fh-btn-cta:hover { background: var(--fh-accent-hover); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(217,95,14,.4); }
.fh-hamburger {
display: none; flex-direction: column; gap: 5px;
width: 38px; height: 38px; align-items: center; justify-content: center;
border-radius: var(--fh-radius); cursor: pointer;
}
.fh-hamburger span { display: block; width: 20px; height: 2px; background: var(--fh-ink); border-radius: 2px; transition: all 0.3s; }
.fh-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.fh-hamburger.open span:nth-child(2) { opacity: 0; }
.fh-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Search overlay */
.fh-search-overlay {
display: none; position: fixed; inset: 0;
background: rgba(20,20,20,0.85); backdrop-filter: blur(4px);
z-index: 500; align-items: flex-start; justify-content: center;
padding-top: 15vh;
}
.fh-search-overlay.open { display: flex; }
.fh-search-panel {
background: var(--fh-white); border-radius: var(--fh-radius-xl);
padding: 36px 40px; width: min(640px, 94vw);
box-shadow: var(--fh-shadow-xl);
animation: fh-slide-down 0.2s var(--fh-ease) both;
}
@keyframes fh-slide-down {
from { opacity: 0; transform: translateY(-16px); }
to { opacity: 1; transform: translateY(0); }
}
.fh-search-panel label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fh-quiet); margin-bottom: 12px; }
.fh-search-row { display: flex; }
.fh-search-row input {
flex: 1; padding: 14px 18px; font-size: 18px;
border: 2px solid var(--fh-rule); border-right: none;
border-radius: var(--fh-radius) 0 0 var(--fh-radius); outline: none;
transition: border-color var(--fh-t-fast);
font-family: var(--fh-serif);
}
.fh-search-row input:focus { border-color: var(--fh-accent); }
.fh-search-row button {
background: var(--fh-accent); color: #fff; padding: 14px 22px;
border-radius: 0 var(--fh-radius) var(--fh-radius) 0;
font-size: 14px; font-weight: 600;
}
.fh-search-close-btn {
display: flex; width: 100%; justify-content: flex-end;
margin-bottom: 20px; font-size: 12px; color: var(--fh-quiet);
cursor: pointer; align-items: center; gap: 5px;
}
.fh-search-close-btn:hover { color: var(--fh-ink); }
/* Progress bar */
#fh-progress {
position: fixed; top: 0; left: 0; height: 3px;
background: linear-gradient(90deg, var(--fh-accent), var(--fh-accent-light));
width: 0%; z-index: 9999; transition: width 0.1s;
box-shadow: 0 0 8px rgba(217,95,14,0.5);
}
/* ═══════════════════════════════════════════
HERO SECTION
═══════════════════════════════════════════ */
#fh-hero { background: var(--fh-white); border-bottom: 1px solid var(--fh-rule); }
.fh-hero-grid { display: grid; grid-template-columns: 1fr 440px; min-height: 520px; }
.fh-hero-copy {
padding: 56px 48px 56px 0;
display: flex; flex-direction: column; justify-content: center;
}
.fh-hero-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.fh-hero-kicker-line { width: 32px; height: 2px; background: var(--fh-accent); flex-shrink: 0; }
.fh-hero-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fh-accent); }
.fh-hero-headline { font-family: var(--fh-serif); font-size: clamp(24px, 3.2vw, 44px); font-weight: 700; line-height: 1.14; color: var(--fh-charcoal); letter-spacing: -0.02em; margin-bottom: 18px; overflow-wrap: break-word; word-break: break-word; }
.fh-hero-headline a, .fh-hero-headline a:link, .fh-hero-headline a:visited { color: var(--fh-charcoal) !important; text-decoration: none !important; }
.fh-hero-headline a:hover { color: var(--fh-accent) !important; }
/* Burmese headline: larger line-height, smaller size to prevent overflow */
.fh-hero-headline.fh-mm { font-family: 'Crimson Pro', 'Yati Sans', 'Noto Serif Myanmar', serif !important; font-size: clamp(20px, 2.6vw, 32px); line-height: 1.6; letter-spacing: 0; font-weight: 700; }
/* Auto-detect mixed Burmese+Latin titles - applies when no .fh-mm class is set */
.fh-hero-headline { overflow: hidden; }
.fh-hero-lede { font-family: var(--fh-serif); font-size: 18.5px; line-height: 1.68; color: var(--fh-mid); margin-bottom: 28px; max-width: 520px; }
.fh-hero-lede.fh-mm { font-family: 'Yati Sans', sans-serif; font-size: 16px; line-height: 1.9; }
.fh-hero-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; color: var(--fh-accent); transition: gap var(--fh-t-base); margin-bottom: 28px; }
.fh-hero-link:hover { gap: 14px; }
.fh-hero-meta { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--fh-quiet); border-top: 1px solid var(--fh-rule); padding-top: 18px; flex-wrap: wrap; }
.fh-hero-author { font-weight: 600; color: var(--fh-ink); }
.fh-hero-image { position: relative; overflow: hidden; background: transparent; }
.fh-hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--fh-ease); }
.fh-hero-image:hover img { transform: scale(1.03); }
.fh-hero-image-placeholder { width: 100%; height: 100%; min-height: 500px; background: linear-gradient(150deg, #18356A 0%, #0D1E40 60%, #181818 100%); display: flex; align-items: center; justify-content: center; font-size: 80px; opacity: 0.6; }
/* Secondary strip */
.fh-secondary-bar { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--fh-white); border-top: 1px solid var(--fh-rule); }
.fh-secondary-item {
padding: 22px 26px; border-right: 1px solid var(--fh-rule);
transition: background var(--fh-t-fast); display: block;
}
.fh-secondary-item:last-child { border-right: none; }
.fh-secondary-item:hover { background: var(--fh-bg); }
.fh-secondary-badge { margin-bottom: 10px; display: block; width: fit-content; }
.fh-secondary-title { font-family: var(--fh-serif); font-size: 16px; font-weight: 700; line-height: 1.38; color: var(--fh-charcoal); margin-bottom: 8px; }
.fh-secondary-title.fh-mm { font-family: 'Yati Sans', sans-serif; font-size: 14px; line-height: 1.7; }
.fh-secondary-meta { font-size: 11.5px; color: var(--fh-quiet); }
/* ═══════════════════════════════════════════
ARTICLE CARDS
═══════════════════════════════════════════ */
.fh-card {
background: var(--fh-white); border-radius: var(--fh-radius-lg);
overflow: hidden; display: flex; flex-direction: column;
box-shadow: var(--fh-shadow-xs); transition: all var(--fh-t-base);
border: 1px solid var(--fh-rule);
}
.fh-card:hover { transform: translateY(-4px); box-shadow: var(--fh-shadow-lg); border-color: transparent; }
.fh-card-thumb { position: relative; overflow: hidden; aspect-ratio: 16/9; background: var(--fh-bg-alt); }
.fh-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--fh-ease); }
.fh-card:hover .fh-card-thumb img { transform: scale(1.05); }
.fh-card-thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 40px; color: var(--fh-rule-strong); }
.fh-card-body { padding: 20px 22px; flex: 1; display: flex; flex-direction: column; }
.fh-card-meta-top { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.fh-card-title { font-family: var(--fh-serif); font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--fh-charcoal); margin-bottom: 10px; transition: color var(--fh-t-fast); }
.fh-card-title a, .fh-card-title a:link, .fh-card-title a:visited { color: inherit !important; text-decoration: none !important; }
.fh-card-title.fh-mm { font-family: 'Yati Sans', sans-serif; font-size: 15px; line-height: 1.72; }
.fh-card:hover .fh-card-title { color: var(--fh-accent); }
.fh-card-excerpt { font-family: var(--fh-serif); font-size: 14.5px; line-height: 1.62; color: var(--fh-mid); margin-bottom: 16px; flex: 1; }
.fh-card-foot { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fh-quiet); border-top: 1px solid var(--fh-rule); padding-top: 14px; margin-top: auto; flex-wrap: wrap; }
.fh-card-author { font-weight: 600; color: var(--fh-ink); }
.fh-dot { color: var(--fh-rule-strong); }
/* Card size variants */
.fh-card--lg .fh-card-title { font-size: 24px; }
.fh-card--lg .fh-card-excerpt { font-size: 16px; }
.fh-card--lg .fh-card-body { padding: 26px 30px; }
.fh-card--compact { flex-direction: row; border-radius: var(--fh-radius); }
.fh-card--compact .fh-card-thumb { width: 96px; min-width: 96px; aspect-ratio: 1/1; }
.fh-card--compact .fh-card-body { padding: 12px 14px; }
.fh-card--compact .fh-card-title { font-size: 14px; margin-bottom: 6px; }
.fh-card--compact .fh-card-excerpt { display: none; }
.fh-card--compact .fh-card-foot { border-top: none; padding-top: 0; margin-top: 6px; }
/* Featured 2-column card */
.fh-card--feature { flex-direction: row; }
.fh-card--feature .fh-card-thumb { width: 50%; min-height: 240px; aspect-ratio: auto; }
.fh-card--feature .fh-card-body { padding: 28px 32px; }
.fh-card--feature .fh-card-title { font-size: 24px; }
/* Fact check card */
.fh-fc-card {
background: rgba(255,255,255,0.05); border-radius: var(--fh-radius-lg);
padding: 26px; cursor: pointer;
border: 1px solid rgba(255,255,255,0.08);
transition: all var(--fh-t-base); display: flex; flex-direction: column;
}
.fh-fc-card:hover { background: rgba(255,255,255,0.10); transform: translateY(-2px); }
.fh-fc-claim { font-family: var(--fh-serif); font-size: 18px; font-weight: 700; line-height: 1.38; color: rgba(255,255,255,0.92); margin: 14px 0 12px; }
.fh-fc-claim.fh-mm { font-family: 'Yati Sans', sans-serif; font-size: 15px; line-height: 1.72; }
.fh-fc-summary { font-size: 13.5px; line-height: 1.62; color: rgba(255,255,255,0.5); flex: 1; margin-bottom: 16px; }
.fh-fc-foot { font-size: 11.5px; color: rgba(255,255,255,0.3); }
/* Infographic card */
.fh-ig-card {
border-radius: var(--fh-radius-lg); overflow: hidden; position: relative;
cursor: pointer; transition: all var(--fh-t-base);
background: var(--fh-charcoal);
}
.fh-ig-card:hover { transform: translateY(-5px); box-shadow: var(--fh-shadow-xl); }
.fh-ig-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--fh-ease); }
.fh-ig-card:hover img { transform: scale(1.04); }
.fh-ig-placeholder {
display: flex; flex-direction: column; align-items: center;
justify-content: center; padding: 32px; min-height: 200px;
}
.fh-ig-card--featured .fh-ig-placeholder { min-height: 440px; }
.fh-ig-icon { font-size: 52px; opacity: 0.75; margin-bottom: 16px; }
.fh-ig-label { font-family: var(--fh-serif); font-size: 18px; font-weight: 700; color: rgba(255,255,255,0.92); text-align: center; margin-bottom: 6px; line-height: 1.32; }
.fh-ig-label.fh-mm { font-family: 'Yati Sans', sans-serif; font-size: 15px; line-height: 1.7; }
.fh-ig-cat-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.4); text-align: center; }
.fh-ig-overlay {
position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 50%);
display: flex; flex-direction: column; justify-content: flex-end; padding: 20px;
opacity: 0; transition: opacity var(--fh-t-base);
}
.fh-ig-card--featured .fh-ig-overlay { opacity: 1; }
.fh-ig-card:hover .fh-ig-overlay { opacity: 1; }
.fh-ig-overlay-title { font-family: var(--fh-serif); font-size: 18px; font-weight: 700; color: #fff; margin: 8px 0 5px; }
.fh-ig-overlay-title.fh-mm { font-family: 'Yati Sans', sans-serif; font-size: 15px; }
.fh-ig-view { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.65); }
/* ═══════════════════════════════════════════
SECTION: FACT CHECKS (dark)
═══════════════════════════════════════════ */
#fh-factchecks { background: var(--fh-charcoal); padding: 56px 0; }
.fh-fc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
/* ═══════════════════════════════════════════
SECTION: INFOGRAPHICS
═══════════════════════════════════════════ */
#fh-infographics { background: var(--fh-bg-alt); padding: 56px 0; }
.fh-ig-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-auto-rows: 210px;
gap: 14px;
}
.fh-ig-card--featured { grid-row: span 2; }
.fh-ig-grid .fh-ig-card { height: 210px; }
.fh-ig-grid .fh-ig-card--featured { height: auto; }
/* ════════════════════════════════════════
/* ═══════════════════════════════════════════
TRENDING SECTION
═══════════════════════════════════════════ */
.fh-trending { background: var(--fh-white); padding: 36px 0; border-top: 1px solid var(--fh-rule); border-bottom: 1px solid var(--fh-rule); }
.fh-trending-inner { display: flex; gap: 28px; align-items: flex-start; }
.fh-trending-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fh-accent); writing-mode: vertical-rl; transform: rotate(180deg); flex-shrink: 0; padding-top: 4px; }
.fh-trending-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; flex: 1; }
.fh-trending-item { display: flex; gap: 14px; align-items: flex-start; }
.fh-trending-num { font-family: var(--fh-serif); font-size: 36px; font-weight: 700; color: var(--fh-rule); line-height: 1; flex-shrink: 0; }
.fh-trending-title { font-family: var(--fh-serif); font-size: 15px; font-weight: 700; color: var(--fh-charcoal); line-height: 1.35; transition: color var(--fh-t-fast); }
.fh-trending-title.fh-mm { font-family: 'Yati Sans', sans-serif; font-size: 13px; line-height: 1.7; }
.fh-trending-item:hover .fh-trending-title { color: var(--fh-accent); }
.fh-trending-meta { font-size: 11.5px; color: var(--fh-quiet); margin-top: 5px; }
/* ═══════════════════════════════════════════
FOOTER
═══════════════════════════════════════════ */
#fh-footer { background: #111; color: rgba(255,255,255,0.6); }
.fh-footer-top { padding: 60px 0 44px; }
.fh-footer-grid { display: grid; grid-template-columns: 280px repeat(3, 1fr); gap: 48px; }
.fh-footer-brand .fh-logo-mark { color: #fff; font-size: 26px; }
.fh-footer-tagline { font-size: 13.5px; line-height: 1.65; color: rgba(255,255,255,0.4); margin-top: 14px; max-width: 260px; }
.fh-footer-tagline.fh-mm { font-family: 'Yati Sans', sans-serif; font-size: 13px; line-height: 1.85; }
.fh-footer-social { display: flex; gap: 8px; margin-top: 22px; }
.fh-footer-social .fh-social-icon { width: 36px; height: 36px; }
.fh-footer-col-title { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.3); margin-bottom: 18px; }
.fh-footer-links { list-style: none; }
.fh-footer-links li { margin-bottom: 10px; }
/* 2-column only for topics list */
.fh-footer-topics-links { columns: 2; column-gap: 16px; }
.fh-footer-topics-links li { break-inside: avoid; }
.fh-footer-links a { font-size: 13.5px; color: rgba(255,255,255,0.58); transition: color var(--fh-t-fast); }
.fh-footer-links a:hover { color: var(--fh-accent-light); }
.fh-footer-bottom-bar { background: #080604; border-top: 1px solid rgba(255,255,255,0.08); }
.fh-footer-bottom {
padding: 20px 0;
display: flex; justify-content: space-between; align-items: center;
font-size: 12px; color: rgba(255,255,255,0.3); flex-wrap: wrap; gap: 12px;
}
.fh-footer-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.fh-footer-legal a { color: rgba(255,255,255,0.3); transition: color var(--fh-t-fast); }
.fh-footer-legal a:hover { color: rgba(255,255,255,0.65); }
/* ═══════════════════════════════════════════
SINGLE / ARTICLE PAGE
═══════════════════════════════════════════ */
.fh-art-header { background: var(--fh-white); border-bottom: 1px solid var(--fh-rule); padding: 52px 0 40px; }
/* Translation availability notice */
.fh-translation-notice {
display: inline-flex; align-items: center; gap: 7px;
background: #eef4fb; border: 1px solid #b8d0f8;
border-radius: 20px; padding: 5px 14px 5px 10px;
margin-bottom: 18px;
font-family: var(--fh-sans); font-size: 12px; font-weight: 600;
}
.fh-translation-notice svg { width: 13px; height: 13px; stroke: #1a56a0; flex-shrink: 0; }
.fh-translation-notice a { color: #1a56a0; text-decoration: none; }
.fh-translation-notice a:hover { text-decoration: underline; }
/* Burmese-original notice uses accent colour */
body:not(.fh-lang-en) .fh-translation-notice {
background: var(--fh-accent-pale);
border-color: var(--fh-accent-border);
}
body:not(.fh-lang-en) .fh-translation-notice svg { stroke: var(--fh-accent); }
body:not(.fh-lang-en) .fh-translation-notice a { color: var(--fh-accent); }
.fh-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fh-quiet); margin-bottom: 24px; flex-wrap: wrap; }
.fh-breadcrumb a:hover { color: var(--fh-accent); }
.fh-breadcrumb-sep { color: var(--fh-rule-strong); }
.fh-art-cat-row { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.fh-art-headline { font-family: var(--fh-serif); font-size: clamp(26px, 4vw, 44px); font-weight: 700; line-height: 1.14; color: var(--fh-charcoal); letter-spacing: -0.02em; margin-bottom: 20px; max-width: 820px; }
.fh-art-headline.fh-mm { font-family: 'Yati Sans', sans-serif; font-size: clamp(22px, 3vw, 34px); line-height: 1.5; }
.fh-art-lede { font-family: var(--fh-serif); font-size: 19.5px; line-height: 1.68; color: var(--fh-mid); max-width: var(--fh-article-w); margin-bottom: 28px; }
.fh-art-lede.fh-mm { font-family: 'Yati Sans', sans-serif; font-size: 16px; line-height: 1.9; }
.fh-byline { display: flex; align-items: center; gap: 14px; padding: 18px 0; border-top: 1px solid var(--fh-rule); max-width: var(--fh-article-w); flex-wrap: wrap; }
.fh-byline-avatar { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: linear-gradient(135deg, var(--fh-accent), var(--fh-accent-light)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; color: #fff; }
.fh-byline-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fh-byline-name { font-weight: 600; font-size: 14px; color: var(--fh-charcoal); }
.fh-byline-role { font-size: 12px; color: var(--fh-quiet); margin-top: 2px; }
.fh-byline-dates { font-size: 12px; color: var(--fh-quiet); line-height: 1.65; margin-left: auto; text-align: right; }
.fh-art-featured-img { max-height: 540px; overflow: hidden; background: var(--fh-bg-alt); }
.fh-art-featured-img img { width: 100%; object-fit: cover; max-height: 540px; }
.fh-img-caption { max-width: calc(var(--fh-article-w) + 48px); margin: 10px auto 0; padding: 0 24px; font-size: 12px; color: var(--fh-quiet); font-style: italic; }
/* Article body */
.fh-art-body { max-width: calc(var(--fh-article-w) + 48px); margin: 0 auto; padding: 48px 24px 24px; }
.fh-art-body p { font-family: var(--fh-serif); font-size: 19px; line-height: 1.78; color: var(--fh-ink); margin-bottom: 28px; }
.fh-art-body p.fh-mm { font-family: 'Yati Sans', sans-serif; font-size: 17px; line-height: 2.0; }
.fh-art-body h2 { font-family: var(--fh-serif); font-size: 28px; font-weight: 700; color: var(--fh-charcoal); margin: 44px 0 18px; line-height: 1.28; }
.fh-art-body h3 { font-family: var(--fh-serif); font-size: 22px; font-weight: 700; color: var(--fh-charcoal); margin: 32px 0 14px; }
.fh-art-body a { color: var(--fh-accent); text-decoration: underline; text-underline-offset: 3px; }
.fh-art-body a:hover { color: var(--fh-accent-hover); }
.fh-art-body ul, .fh-art-body ol { margin: 0 0 28px 24px; }
.fh-art-body li { font-family: var(--fh-serif); font-size: 18px; line-height: 1.72; margin-bottom: 8px; color: var(--fh-ink); }
.fh-art-body ul li { list-style: disc; }
.fh-art-body ol li { list-style: decimal; }
.fh-art-body blockquote { border-left: 3px solid var(--fh-accent); margin: 36px 0; padding: 6px 0 6px 28px; }
.fh-art-body blockquote p { font-size: 22px; font-style: italic; color: var(--fh-mid); margin-bottom: 10px; }
.fh-art-body blockquote cite { font-size: 13px; color: var(--fh-quiet); font-style: normal; display: block; }
.fh-art-body img { margin: 32px auto; border-radius: var(--fh-radius); box-shadow: var(--fh-shadow-md); }
.fh-art-body table { width: 100%; margin-bottom: 28px; }
.fh-art-body th { background: var(--fh-bg); padding: 10px 14px; border: 1px solid var(--fh-rule); font-weight: 600; font-size: 14px; text-align: left; }
.fh-art-body td { padding: 10px 14px; border: 1px solid var(--fh-rule); font-size: 15px; }
/* Sources box */
.fh-sources { border: 1px solid var(--fh-rule); border-radius: var(--fh-radius-lg); padding: 28px 32px; margin-top: 48px; background: var(--fh-bg); }
.fh-sources-title { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fh-quiet); margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--fh-rule); }
.fh-sources-list li { font-size: 13.5px; color: var(--fh-mid); display: flex; gap: 10px; margin-bottom: 10px; }
.fh-source-num { color: var(--fh-accent); font-weight: 700; flex-shrink: 0; }
.fh-sources-list a { color: var(--fh-accent); text-decoration: underline; }
/* Fact check verdict box */
.fh-verdict-box { border-radius: var(--fh-radius-lg); padding: 28px 32px; margin-bottom: 36px; border-left: 4px solid; }
.fh-verdict-box--false { background: #FFF5F5; border-left-color: var(--fh-false); }
.fh-verdict-box--mislead { background: #FFFBF0; border-left-color: var(--fh-mislead); }
.fh-verdict-box--true { background: #F2FFF5; border-left-color: var(--fh-true); }
.fh-verdict-box-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fh-quiet); margin-bottom: 10px; }
.fh-verdict-box-claim { font-family: var(--fh-serif); font-size: 19px; font-weight: 700; color: var(--fh-charcoal); margin-bottom: 10px; line-height: 1.32; }
.fh-verdict-box-claim.fh-mm { font-family: 'Yati Sans', sans-serif; font-size: 17px; line-height: 1.7; }
/* Share bar */
.fh-share { display: flex; align-items: center; gap: 10px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--fh-rule); flex-wrap: wrap; }
.fh-share-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fh-quiet); }
.fh-share-btn { display: flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: var(--fh-radius); font-size: 13px; font-weight: 500; border: 1px solid var(--fh-rule); transition: all var(--fh-t-fast); }
.fh-share-btn:hover { border-color: var(--fh-accent); color: var(--fh-accent); background: var(--fh-accent-pale); }
.fh-share-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }
/* Tags */
.fh-art-tags { display: flex; align-items: center; gap: 8px; margin-top: 32px; flex-wrap: wrap; }
.fh-art-tags-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fh-quiet); }
.fh-tag { font-size: 12px; padding: 5px 13px; border-radius: 50px; background: var(--fh-bg-alt); color: var(--fh-mid); border: 1px solid var(--fh-rule); transition: all var(--fh-t-fast); }
.fh-tag:hover { background: var(--fh-accent-pale); color: var(--fh-accent); border-color: var(--fh-accent-border); }
/* Author bio */
.fh-author-box { border-top: 2.5px solid var(--fh-charcoal); padding-top: 36px; margin-top: 48px; display: flex; gap: 22px; }
.fh-author-avatar { width: 74px; height: 74px; border-radius: 50%; flex-shrink: 0; overflow: hidden; background: linear-gradient(135deg, var(--fh-accent), var(--fh-accent-light)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 28px; color: #fff; }
.fh-author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fh-author-name { font-size: 17px; font-weight: 700; margin-bottom: 3px; }
.fh-author-title { font-size: 12.5px; color: var(--fh-quiet); margin-bottom: 12px; }
.fh-author-bio { font-size: 14px; line-height: 1.68; color: var(--fh-mid); }
/* Related */
.fh-related { background: var(--fh-bg); border-top: 1px solid var(--fh-rule); padding: 56px 0; }
/* ═══════════════════════════════════════════
ARCHIVE & SEARCH PAGES
═══════════════════════════════════════════ */
.fh-archive-hd { background: var(--fh-white); border-bottom: 2.5px solid var(--fh-charcoal); padding: 44px 0; }
.fh-archive-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fh-accent); margin-bottom: 8px; }
.fh-archive-title { font-family: var(--fh-serif); font-size: clamp(28px, 5vw, 42px); font-weight: 700; color: var(--fh-charcoal); letter-spacing: -0.02em; }
.fh-archive-desc { font-size: 15px; color: var(--fh-mid); margin-top: 10px; max-width: 560px; line-height: 1.62; }
.fh-archive-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fh-gap); padding: 52px 0; }
.fh-pagination { display: flex; justify-content: center; gap: 6px; padding: 48px 0 0; }
.fh-pagination a, .fh-pagination span { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--fh-radius); font-size: 14px; font-weight: 500; border: 1.5px solid var(--fh-rule); transition: all var(--fh-t-fast); }
.fh-pagination .current { background: var(--fh-accent); color: #fff; border-color: var(--fh-accent); }
.fh-pagination a:hover { border-color: var(--fh-accent); color: var(--fh-accent); }
/* 404 */
.fh-404 { text-align: center; padding: 120px 24px; }
.fh-404-num { font-family: var(--fh-serif); font-size: 140px; font-weight: 700; color: var(--fh-rule); line-height: 1; }
.fh-404-title { font-family: var(--fh-serif); font-size: 36px; font-weight: 700; color: var(--fh-charcoal); margin-bottom: 16px; }
.fh-404-desc { font-size: 16px; color: var(--fh-mid); max-width: 420px; margin: 0 auto 32px; line-height: 1.65; }
/* ═══════════════════════════════════════════
STATIC PAGES
═══════════════════════════════════════════ */
.fh-page-hd { background: var(--fh-white); border-bottom: 2.5px solid var(--fh-charcoal); padding: 52px 0; }
.fh-page-title { font-family: var(--fh-serif); font-size: clamp(28px, 4vw, 44px); font-weight: 700; color: var(--fh-charcoal); letter-spacing: -0.02em; }
.fh-page-body { max-width: calc(var(--fh-article-w) + 48px); margin: 0 auto; padding: 52px 24px; }
.fh-page-body p { font-family: var(--fh-serif); font-size: 18.5px; line-height: 1.78; color: var(--fh-ink); margin-bottom: 26px; }
.fh-page-body h2 { font-family: var(--fh-serif); font-size: 26px; font-weight: 700; color: var(--fh-charcoal); margin: 40px 0 18px; }
.fh-page-body ul { margin: 0 0 26px 24px; }
.fh-page-body li { font-family: var(--fh-serif); font-size: 17px; list-style: disc; margin-bottom: 8px; line-height: 1.7; color: var(--fh-ink); }
.fh-page-body a { color: var(--fh-accent); text-decoration: underline; }
/* Comments */
.fh-comments { max-width: calc(var(--fh-article-w) + 48px); margin: 0 auto; padding: 0 24px 52px; }
.fh-comments-title { font-family: var(--fh-serif); font-size: 24px; font-weight: 700; color: var(--fh-charcoal); margin-bottom: 28px; padding-bottom: 14px; border-bottom: 2.5px solid var(--fh-charcoal); }
.comment-body { border-bottom: 1px solid var(--fh-rule); padding: 22px 0; }
.comment-author-name { font-weight: 600; font-size: 14px; }
.comment-metadata { font-size: 12px; color: var(--fh-quiet); margin-top: 3px; }
.comment-content p { font-size: 15px; line-height: 1.68; margin-top: 10px; }
.comment-form input, .comment-form textarea { width: 100%; padding: 11px 15px; border: 2px solid var(--fh-rule); border-radius: var(--fh-radius); font-size: 14px; margin-bottom: 12px; transition: border-color var(--fh-t-fast); }
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--fh-accent); }
.comment-form .submit { background: var(--fh-accent); color: #fff; padding: 11px 24px; border-radius: var(--fh-radius); font-size: 14px; font-weight: 600; cursor: pointer; transition: background var(--fh-t-fast); }
.comment-form .submit:hover { background: var(--fh-accent-hover); }
/* WP core helpers */
.alignleft { float: left; margin: 0 24px 16px 0; }
.alignright { float: right; margin: 0 0 16px 24px; }
.aligncenter { margin: 0 auto 16px; display: block; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; clip: rect(0,0,0,0); overflow: hidden; white-space: nowrap; }
.wp-caption-text { font-size: 12px; color: var(--fh-quiet); font-style: italic; text-align: center; margin-top: 6px; }
/* ═══════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
.fh-hero-grid { grid-template-columns: 1fr; }
.fh-hero-copy { padding: 44px 0 32px; }
.fh-hero-image { min-height: 320px; }
.fh-hero-image-placeholder { min-height: 320px; }
.fh-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
.fh-ig-grid { grid-template-columns: 1fr 1fr; }
.fh-ig-card--featured { grid-row: span 1; height: 240px; }
.fh-fc-grid { grid-template-columns: 1fr; gap: 2px; }
.fh-trending-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.fh-grid--3, .fh-archive-posts { grid-template-columns: 1fr 1fr; }
.fh-grid--2, .fh-grid--2-1 { grid-template-columns: 1fr; }
.fh-card--feature { flex-direction: column; }
.fh-card--feature .fh-card-thumb { width: 100%; min-height: auto; aspect-ratio: 16/9; }
#fh-nav { display: none; }
#fh-nav.fh-open { display: flex; flex-direction: column; position: absolute; top: 70px; left: 0; right: 0; background: var(--fh-white); padding: 12px 24px 20px; border-bottom: 2px solid var(--fh-charcoal); box-shadow: var(--fh-shadow-lg); z-index: 300; }
#fh-nav.fh-open ul { flex-direction: column; }
.fh-hamburger { display: flex; }
.fh-secondary-bar { grid-template-columns: 1fr; }
.fh-art-headline { font-size: 26px; }
.fh-footer-grid { grid-template-columns: 1fr; gap: 24px; }
.fh-ig-grid { grid-template-columns: 1fr; }
.fh-trending-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.fh-grid--3, .fh-archive-posts, .fh-grid--4 { grid-template-columns: 1fr; }
.fh-hero-headline { font-size: 24px; }
.fh-art-headline { font-size: 22px; }
.fh-art-body p { font-size: 17px; }
.fh-trending-list { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════════════════
CUSTOM POST TYPE TEMPLATES
in-depth · sciterm · quote · shortfact · article
═══════════════════════════════════════════════════════════════ */
/* ── Shared CPT variables ── */
:root {
--cpt-purple: #667eea;
--cpt-purple-dark: #764ba2;
--cpt-bg: #f7fafc;
--cpt-text: #2d3748;
--cpt-meta: #666666;
--cpt-border: #e2e8f0;
--cpt-radius: 8px;
}
/* ══════════════════════════════════════
TEMPLATE 1 — IN-DEPTH ARTICLE
══════════════════════════════════════ */
.fh-indepth-wrap { background: var(--fh-bg); }
.fh-id-inner { max-width: 820px; margin: 0 auto; padding: 0 24px; }
.fh-id-header { padding: 48px 0 32px; }
.fh-id-title {
font-family: var(--fh-serif);
font-size: clamp(28px, 4vw, 46px);
font-weight: 700;
line-height: 1.12;
color: var(--fh-charcoal);
letter-spacing: -0.02em;
margin: 12px 0 18px;
}
.fh-id-meta {
display: flex; flex-wrap: wrap; gap: 18px;
color: var(--cpt-meta); font-size: 14px;
}
.fh-id-hero-img { margin: 0 0 36px; }
.fh-id-feat-img {
width: 100%; max-height: 440px;
object-fit: cover; border-radius: var(--cpt-radius);
display: block;
}
/* Table of Contents */
.fh-toc {
background: var(--cpt-bg);
border-left: 4px solid var(--cpt-purple);
border-radius: var(--cpt-radius);
padding: 24px 28px; margin: 32px 0;
}
.fh-toc-title { font-size: 15px; font-weight: 700; color: var(--cpt-text); margin-bottom: 14px; }
.fh-toc-list { list-style: none; counter-reset: toc; }
.fh-toc-item { padding: 8px 0; border-bottom: 1px solid var(--cpt-border); font-size: 14px; }
.fh-toc-item:last-child { border-bottom: none; }
.fh-toc-item a { color: var(--cpt-purple); text-decoration: none; }
.fh-toc-item a:hover { text-decoration: underline; }
.fh-toc-h3 { padding-left: 16px; font-size: 13px; }
/* Content body */
.fh-id-body { font-size: 18px; line-height: 1.8; color: var(--cpt-text); }
.fh-id-body p { margin-bottom: 20px; }
.fh-id-body h2 { font-family: var(--fh-serif); font-size: 26px; font-weight: 700; color: var(--fh-charcoal); margin: 40px 0 16px; }
.fh-id-body h3 { font-family: var(--fh-serif); font-size: 21px; font-weight: 700; color: var(--fh-charcoal); margin: 32px 0 12px; }
.fh-id-body img { border-radius: 6px; max-width: 100%; margin: 24px 0; }
.fh-id-content-wrap { padding-bottom: 80px; }
/* ══════════════════════════════════════
TEMPLATE 2 — SCI-TERM EXPLANATION
══════════════════════════════════════ */
.fh-sciterm-wrap { background: var(--fh-bg); }
.fh-st-inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
/* Definition box */
.fh-st-defbox {
background: linear-gradient(135deg, var(--cpt-purple) 0%, var(--cpt-purple-dark) 100%);
padding: 48px 0;
margin-bottom: 0;
}
.fh-st-term { font-family: var(--fh-serif); font-size: clamp(28px, 4vw, 42px); font-weight: 700; color: #fff; margin-bottom: 10px; }
.fh-st-pronunciation { font-style: italic; color: rgba(255,255,255,0.85); font-size: 17px; margin-bottom: 16px; }
.fh-st-definition { color: rgba(255,255,255,0.9); font-size: 16px; line-height: 1.7; max-width: 760px; }
/* 2-col layout */
.fh-st-layout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 36px;
padding: 40px 0 80px;
align-items: start;
}
.fh-st-meta { display: flex; flex-wrap: wrap; gap: 16px; color: var(--cpt-meta); font-size: 14px; margin-bottom: 24px; }
.fh-st-img { border-radius: var(--cpt-radius); overflow: hidden; margin-bottom: 24px; }
.fh-st-img img { width: 100%; display: block; }
.fh-st-body { font-size: 17px; line-height: 1.8; color: var(--cpt-text); }
.fh-st-body p { margin-bottom: 18px; }
.fh-st-body h2, .fh-st-body h3 { font-family: var(--fh-serif); color: var(--fh-charcoal); margin: 28px 0 12px; }
/* Sidebar */
.fh-st-sidebar { position: sticky; top: 100px; }
.fh-st-sbox {
background: var(--cpt-bg);
border-radius: var(--cpt-radius);
padding: 20px 22px;
margin-bottom: 16px;
}
.fh-st-sbox-title { font-size: 14px; font-weight: 700; color: var(--cpt-text); margin-bottom: 12px; }
.fh-st-sbox-text { font-size: 14px; color: var(--cpt-meta); line-height: 1.6; }
.fh-st-related { list-style: none; }
.fh-st-related li { padding: 9px 0; border-bottom: 1px solid var(--cpt-border); font-size: 14px; }
.fh-st-related li:last-child { border-bottom: none; }
.fh-st-related a { color: var(--cpt-purple); text-decoration: none; }
.fh-st-related a:hover { text-decoration: underline; }
/* ══════════════════════════════════════
TEMPLATE 3 — QUOTE
══════════════════════════════════════ */
.fh-quote-wrap { background: var(--fh-bg); }
.fh-q-inner { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.fh-q-hero {
background: #fff;
text-align: center;
padding: 72px 0 56px;
border-bottom: 1px solid var(--cpt-border);
}
.fh-q-mark {
font-family: Georgia, serif;
font-size: 100px;
color: var(--cpt-purple);
line-height: 0.7;
display: block;
margin-bottom: 28px;
opacity: 0.7;
}
.fh-q-text {
font-family: var(--fh-serif);
font-size: clamp(22px, 3.5vw, 34px);
font-style: italic;
color: var(--cpt-text);
line-height: 1.45;
margin: 0 0 32px;
font-weight: 400;
border: none;
padding: 0;
}
.fh-q-attribution { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.fh-q-author { font-size: 18px; font-weight: 600; color: var(--fh-charcoal); }
.fh-q-title { font-size: 14px; color: var(--cpt-meta); }
.fh-q-role { font-size: 13px; color: #aaa; }
.fh-q-context { padding: 48px 0 80px; }
.fh-q-meta { display: flex; flex-wrap: wrap; gap: 16px; color: var(--cpt-meta); font-size: 14px; margin-bottom: 28px; align-items: center; }
.fh-q-body { font-size: 17px; line-height: 1.8; color: var(--cpt-text); }
.fh-q-body p { margin-bottom: 18px; }
.fh-q-body h2, .fh-q-body h3 { font-family: var(--fh-serif); color: var(--fh-charcoal); margin: 28px 0 12px; }
/* ══════════════════════════════════════
TEMPLATE 4 — SHORT FACTS
══════════════════════════════════════ */
.fh-shortfact-wrap { background: var(--fh-bg); }
.fh-sf-inner { max-width: 1100px; margin: 0 auto; padding: 48px 24px 80px; }
.fh-sf-header { margin-bottom: 32px; }
.fh-sf-title {
font-family: var(--fh-serif);
font-size: clamp(26px, 3.5vw, 40px);
font-weight: 700;
color: var(--fh-charcoal);
margin: 10px 0 14px;
}
.fh-sf-meta { display: flex; flex-wrap: wrap; gap: 16px; color: var(--cpt-meta); font-size: 14px; }
.fh-sf-intro { font-size: 17px; line-height: 1.7; color: var(--cpt-text); max-width: 760px; margin-bottom: 36px; }
/* Fact Cards Grid */
.fh-sf-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 40px;
}
.fh-sf-card {
background: var(--cpt-bg);
border-radius: var(--cpt-radius);
border-left: 4px solid var(--cpt-purple);
padding: 24px;
transition: transform 0.2s, box-shadow 0.2s;
}
.fh-sf-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,0.10);
}
.fh-sf-icon {
width: 52px; height: 52px;
background: var(--cpt-purple);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 26px;
margin-bottom: 16px;
}
.fh-sf-card-title { font-weight: 700; font-size: 16px; color: var(--cpt-text); margin-bottom: 10px; }
.fh-sf-card-desc { font-size: 14px; color: var(--cpt-meta); line-height: 1.65; }
.fh-sf-empty { background: var(--cpt-bg); border-radius: var(--cpt-radius); padding: 32px; color: var(--cpt-meta); font-style: italic; }
/* ══════════════════════════════════════
TEMPLATE 5 — STANDARD ARTICLE
══════════════════════════════════════ */
.fh-article-wrap { background: var(--fh-bg); }
.fh-art-inner { max-width: 800px; margin: 0 auto; padding: 48px 24px 80px; }
.fh-art-header { margin-bottom: 28px; }
.fh-art-feat { margin: 0 0 32px; }
.fh-art-feat img { width: 100%; border-radius: var(--cpt-radius); display: block; }
.fh-art-content.fh-art-body { font-size: 17px; line-height: 1.8; color: var(--cpt-text); }
.fh-art-content.fh-art-body p { margin-bottom: 18px; }
.fh-art-content.fh-art-body h2 { font-family: var(--fh-serif); font-size: 24px; color: var(--fh-charcoal); margin: 36px 0 14px; }
.fh-art-content.fh-art-body h3 { font-family: var(--fh-serif); font-size: 20px; color: var(--fh-charcoal); margin: 28px 0 10px; }
.fh-art-content.fh-art-body img { border-radius: 6px; max-width: 100%; margin: 20px 0; }
/* ══════════════════════════════════════
RESPONSIVE — CPT TEMPLATES
══════════════════════════════════════ */
@media (max-width: 1024px) {
.fh-st-layout { grid-template-columns: 3fr 2fr; gap: 24px; }
.fh-sf-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.fh-st-layout { grid-template-columns: 1fr; }
.fh-st-sidebar { position: static; }
.fh-sf-grid { grid-template-columns: 1fr; }
.fh-id-title { font-size: 26px; }
.fh-q-text { font-size: 20px; }
.fh-q-mark { font-size: 72px; }
.fh-sf-title { font-size: 22px; }
.fh-id-meta,
.fh-sf-meta,
.fh-st-meta,
.fh-q-meta { gap: 10px; font-size: 13px; }
}
/* ── Verdict Panel (prominent, full-width) ── */
.fh-verdict-panel {
border: 2px solid var(--vb-border);
border-radius: 10px;
overflow: hidden;
margin-bottom: 36px;
background: var(--vb-bg);
}
.fh-vp-banner {
background: var(--vb-banner);
display: flex;
align-items: center;
gap: 18px;
padding: 20px 28px;
}
.fh-vp-icon {
font-size: 28px;
line-height: 1;
color: #fff;
flex-shrink: 0;
width: 56px; height: 56px;
border-radius: 50%;
background: rgba(255,255,255,0.18);
display: flex; align-items: center; justify-content: center;
}
.fh-vp-banner-text { display: flex; flex-direction: column; gap: 2px; }
.fh-vp-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.75); }
.fh-vp-verdict { font-size: 28px; font-weight: 800; color: #fff; letter-spacing: -0.01em; line-height: 1.1; }
.fh-vp-body { padding: 20px 28px 4px; border-top: 1px solid rgba(0,0,0,0.06); }
.fh-vp-claim-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #888; margin-bottom: 8px; }
.fh-vp-claim { font-family: var(--fh-serif); font-size: 18px; font-weight: 700; color: var(--fh-charcoal); line-height: 1.4; }
.fh-vp-claim.fh-mm { font-family: 'Yati Sans', sans-serif; font-size: 16px; line-height: 1.7; }
.fh-vp-desc { padding: 12px 28px 20px; font-size: 14px; color: #666; font-style: italic; }
/* ═══════════════════════════════════════════════════════════════
HOMEPAGE SECTIONS — Complete CSS v3.0
Quanta Magazine aesthetic: clean, scientific, visual, elegant
═══════════════════════════════════════════════════════════════ */
/* ── Section Header (fh-sh-*) ─────────────────────────────── */
.fh-sh-left { display: flex; align-items: center; gap: 14px; }
.fh-sh-rule { width: 28px; height: 3px; background: var(--fh-accent); flex-shrink: 0; border-radius: 2px; }
.fh-sh-title { font-family: var(--fh-sans); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fh-charcoal); }
.fh-sh-link { font-size: 12px; font-weight: 600; color: var(--fh-accent); letter-spacing: 0.04em; transition: gap 0.2s; display: flex; align-items: center; gap: 4px; }
.fh-sh-link:hover { gap: 8px; }
/* ── Type Badges ──────────────────────────────────────────── */
.fh-type-badge {
display: inline-flex; align-items: center;
font-family: var(--fh-sans); font-size: 10px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
padding: 3px 8px; border-radius: 3px;
background: rgba(0,0,0,0.06); color: var(--fh-mid);
}
.fh-type--news { background: #E8F4FD; color: #1A5C8A; }
.fh-type--featured { background: #FFF3CD; color: #856404; }
.fh-type--explainer { background: #E8F5E9; color: #1B5E20; }
.fh-type--indepth { background: #EDE7F6; color: #4527A0; }
.fh-type--fact-check { background: #FCE4EC; color: #880E4F; }
.fh-type--sciterm { background: #E0F2F1; color: #004D40; }
.fh-type--quote { background: #FFF8E1; color: #E65100; }
.fh-type--shortfact { background: #E3F2FD; color: #0D47A1; }
.fh-type--article { background: #F3E5F5; color: #4A148C; }
.fh-type--post { background: rgba(0,0,0,0.06); color: var(--fh-mid); }
/* ── Magazine Card (fh_magazine_card) ─────────────────────── */
.fh-card {
display: flex; flex-direction: column;
background: var(--fh-white); border: 1px solid var(--fh-rule);
border-radius: var(--fh-radius-lg); overflow: hidden;
transition: transform 0.25s var(--fh-ease), box-shadow 0.25s var(--fh-ease);
}
.fh-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,0.09); border-color: transparent; }
.fh-card-img-link { display: block; overflow: hidden; aspect-ratio: 16/9; }
.fh-card-img {
width: 100%; height: 100%;
background-size: cover; background-position: center;
background-color: var(--fh-bg-alt);
transition: transform 0.5s var(--fh-ease);
}
.fh-card:hover .fh-card-img { transform: scale(1.04); }
.fh-card-img--placeholder { display: flex; align-items: center; justify-content: center; font-size: 36px; opacity: 0.4; }
.fh-card-body { padding: 20px 22px 22px; flex: 1; display: flex; flex-direction: column; }
.fh-card-meta-top { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; flex-wrap: wrap; }
.fh-card-title {
font-family: var(--fh-serif); font-size: 18px; font-weight: 700;
line-height: 1.3; color: var(--fh-charcoal); margin-bottom: 10px;
transition: color 0.15s;
}
.fh-card-title a, .fh-card-title a:link, .fh-card-title a:visited { color: inherit !important; text-decoration: none !important; }
.fh-card:hover .fh-card-title { color: var(--fh-accent); }
.fh-card-title.fh-mm { font-family: 'Yati Sans', sans-serif; font-size: 15px; line-height: 1.72; }
.fh-card-excerpt { font-size: 14px; line-height: 1.65; color: var(--fh-mid); margin-bottom: 16px; flex: 1; }
.fh-card-excerpt.fh-mm { font-family: 'Yati Sans', sans-serif; font-size: 13px; line-height: 1.85; }
.fh-card-meta-bot { display: flex; gap: 8px; font-size: 12px; color: var(--fh-quiet); border-top: 1px solid var(--fh-rule); padding-top: 12px; margin-top: auto; flex-wrap: wrap; }
/* Card size variants */
.fh-card--large .fh-card-title { font-size: 24px; line-height: 1.2; }
.fh-card--large .fh-card-excerpt { font-size: 15.5px; }
.fh-card--large .fh-card-body { padding: 24px 28px 28px; }
.fh-card--small .fh-card-excerpt { display: none; }
.fh-card--small .fh-card-title { font-size: 15px; }
.fh-card--small .fh-card-body { padding: 14px 16px 16px; }
.fh-card--scroll .fh-card-title { font-size: 16px; }
.fh-card--scroll .fh-card-excerpt { font-size: 13px; }
.fh-card--id-lead .fh-card-title { font-size: 22px; }
.fh-card--id-lead .fh-card-excerpt { font-size: 15px; }
.fh-card--id-small .fh-card-excerpt { display: none; }
.fh-card--id-small .fh-card-title { font-size: 15px; line-height: 1.35; }
.fh-card--id-small .fh-card-body { padding: 14px 16px 16px; }
/* ═══════════════════════════════════════════
SECTION 1 — HERO (fullbleed + centered)
═══════════════════════════════════════════ */
/* Fullbleed hero */
.fh-hero--fullbleed {
position: relative; min-height: 580px;
background-image: var(--hero-bg); background-size: cover; background-position: center;
display: flex; align-items: flex-end;
}
.fh-hero-fb-overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.1) 100%);
}
.fh-hero-fb-inner {
position: relative; z-index: 1;
max-width: 840px; padding: 64px 48px;
}
.fh-hero-headline--fb {
font-family: var(--fh-serif); font-size: clamp(28px, 4.5vw, 54px);
font-weight: 700; line-height: 1.1; color: #fff;
letter-spacing: -0.02em; margin-bottom: 16px;
}
.fh-hero-headline--fb a, .fh-hero-headline--fb a:link, .fh-hero-headline--fb a:visited { color: #fff !important; text-decoration: none !important; }
.fh-hero-lede--fb { color: rgba(255,255,255,0.85); font-size: 18px; line-height: 1.6; margin-bottom: 24px; max-width: 600px; }
.fh-hero-cta {
display: inline-flex; align-items: center; gap: 8px;
background: var(--fh-accent); color: #fff; font-weight: 700; font-size: 13px;
padding: 11px 22px; border-radius: 4px; letter-spacing: 0.03em;
transition: background 0.2s, gap 0.2s;
}
.fh-hero-cta:hover { background: var(--fh-accent-dk); gap: 12px; }
.fh-hero-meta--fb { color: rgba(255,255,255,0.6); font-size: 12.5px; margin-top: 24px; border-top: 1px solid rgba(255,255,255,0.15); padding-top: 16px; }
/* Centered hero */
.fh-hero--centered { background: var(--fh-white); padding-bottom: 56px; }
.fh-hero-cent-img { width: 100%; max-height: 420px; overflow: hidden; }
.fh-hero-cent-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fh-hero-cent-body { max-width: 720px; margin: 0 auto; padding: 40px 24px 0; text-align: center; }
.fh-hero-cent-body .fh-hero-headline { font-size: clamp(26px,4vw,46px); }
.fh-hero-cent-body .fh-hero-eyebrow { justify-content: center; margin-bottom: 20px; }
.fh-hero-cent-body .fh-hero-lede { margin: 0 auto 24px; }
.fh-hero-cent-body .fh-hero-link { justify-content: center; }
/* ═══════════════════════════════════════════
SECTION 2 — FEATURED TAKEOVER
═══════════════════════════════════════════ */
.fh-featured-takeover {
position: relative; min-height: 500px;
background: var(--fh-charcoal);
display: flex; align-items: center;
overflow: hidden;
}
.fh-ft-bg {
position: absolute; inset: 0;
background-image: var(--ft-bg); background-size: cover; background-position: center;
transform: scale(1.04);
transition: transform 8s ease;
}
.fh-featured-takeover:hover .fh-ft-bg { transform: scale(1.0); }
.fh-ft-overlay {
position: absolute; inset: 0;
background: linear-gradient(105deg, rgba(15,20,40,0.92) 0%, rgba(15,20,40,0.7) 55%, rgba(15,20,40,0.25) 100%);
}
.fh-ft-inner {
position: relative; z-index: 1;
max-width: 680px; padding: 72px var(--fh-side-pad);
}
.fh-ft-kicker {
display: flex; align-items: center; gap: 10px;
font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--fh-accent);
margin-bottom: 20px;
}
.fh-ft-kicker-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fh-accent); flex-shrink: 0; }
.fh-ft-cat { color: rgba(255,255,255,0.65); font-weight: 600; }
.fh-ft-title {
font-family: var(--fh-serif);
font-size: clamp(26px, 3.8vw, 48px);
font-weight: 700; line-height: 1.12; color: #fff;
letter-spacing: -0.02em; margin-bottom: 18px;
}
.fh-ft-title a, .fh-ft-title a:link, .fh-ft-title a:visited { color: #fff !important; text-decoration: none !important; }
.fh-ft-title.fh-mm { font-family: 'Yati Sans', sans-serif; font-size: clamp(20px, 3vw, 36px); line-height: 1.55; letter-spacing: 0; }
.fh-ft-subtitle { color: rgba(255,255,255,0.72); font-size: 17px; line-height: 1.65; margin-bottom: 32px; max-width: 560px; }
.fh-ft-footer { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.fh-ft-cta {
display: inline-flex; align-items: center; gap: 8px;
border: 2px solid rgba(255,255,255,0.5); color: #fff;
padding: 11px 24px; font-weight: 700; font-size: 13px; letter-spacing: 0.04em;
border-radius: 4px; transition: background 0.2s, border-color 0.2s, gap 0.2s;
}
.fh-ft-cta:hover { background: rgba(255,255,255,0.12); border-color: #fff; gap: 12px; }
.fh-ft-byline { color: rgba(255,255,255,0.5); font-size: 12.5px; }
/* ═══════════════════════════════════════════
SECTION 3 — EDITOR'S CHOICE
Layout: 1 large + 3 small beside/below
═══════════════════════════════════════════ */
.fh-editors-choice { background: var(--fh-white); }
.fh-ec-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
gap: 24px;
}
.fh-ec-grid .fh-card:first-child {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
.fh-ec-grid .fh-card:first-child .fh-card-img-link { aspect-ratio: 3/2; }
/* ═══════════════════════════════════════════
SECTION 4 — YOU MAY LIKE (horizontal scroll)
═══════════════════════════════════════════ */
.fh-you-may-like { background: var(--fh-bg); }
.fh-yml-scroll {
display: flex; gap: 20px;
overflow-x: auto; padding-bottom: 12px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin; scrollbar-color: var(--fh-rule-strong) transparent;
}
.fh-yml-scroll::-webkit-scrollbar { height: 4px; }
.fh-yml-scroll::-webkit-scrollbar-track { background: transparent; }
.fh-yml-scroll::-webkit-scrollbar-thumb { background: var(--fh-rule-strong); border-radius: 2px; }
.fh-yml-scroll .fh-card {
min-width: 280px; max-width: 280px;
scroll-snap-align: start; flex-shrink: 0;
}
.fh-yml-scroll .fh-card .fh-card-img-link { aspect-ratio: 4/3; }
/* ═══════════════════════════════════════════
SECTION 5 — TOP SCIENCE (numbered list)
═══════════════════════════════════════════ */
.fh-top-science { background: var(--fh-white); }
.fh-ts-list { display: flex; flex-direction: column; gap: 0; }
.fh-ts-item {
display: grid;
grid-template-columns: 64px 1fr auto;
gap: 0 20px;
align-items: start;
padding: 24px 0;
border-bottom: 1px solid var(--fh-rule);
transition: background 0.15s;
}
.fh-ts-item:last-child { border-bottom: none; }
.fh-ts-item:hover { background: var(--fh-bg); margin: 0 -24px; padding-left: 24px; padding-right: 24px; }
.fh-ts-num {
font-family: var(--fh-serif); font-size: 42px; font-weight: 700;
color: var(--fh-rule-strong); line-height: 1; text-align: right;
padding-top: 4px; transition: color 0.15s;
}
.fh-ts-item:hover .fh-ts-num { color: var(--fh-accent); }
.fh-ts-meta-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.fh-ts-title {
font-family: var(--fh-serif); font-size: 20px; font-weight: 700;
line-height: 1.28; color: var(--fh-charcoal); margin-bottom: 8px;
}
.fh-ts-title a, .fh-ts-title a:link, .fh-ts-title a:visited { color: inherit !important; text-decoration: none !important; }
.fh-ts-item:hover .fh-ts-title { color: var(--fh-accent); }
.fh-ts-title.fh-mm { font-family: 'Yati Sans', sans-serif; font-size: 16px; line-height: 1.65; }
.fh-ts-excerpt { font-size: 14px; color: var(--fh-mid); line-height: 1.6; margin-bottom: 8px; }
.fh-ts-excerpt.fh-mm { font-family: 'Yati Sans', sans-serif; font-size: 13px; }
.fh-ts-date { font-size: 12px; color: var(--fh-quiet); }
.fh-ts-img-link { display: block; width: 100px; flex-shrink: 0; }
.fh-ts-img {
width: 100px; height: 80px;
background-size: cover; background-position: center;
border-radius: 6px;
}
/* ═══════════════════════════════════════════
SECTION 6 — EXPLAINER ROW (magazine rows, image left)
═══════════════════════════════════════════ */
.fh-explainer-row { background: var(--fh-bg); }
.fh-er-list { display: flex; flex-direction: column; gap: 0; }
.fh-er-item {
display: grid;
grid-template-columns: 320px 1fr;
gap: 36px;
align-items: center;
padding: 40px 0;
border-bottom: 1px solid var(--fh-rule);
}
.fh-er-item:last-child { border-bottom: none; }
.fh-er-img-link { display: block; border-radius: var(--fh-radius-lg); overflow: hidden; }
.fh-er-img {
width: 100%; aspect-ratio: 4/3;
background-size: cover; background-position: center;
background-color: var(--fh-bg-alt);
transition: transform 0.5s var(--fh-ease);
}
.fh-er-item:hover .fh-er-img { transform: scale(1.03); }
.fh-er-img--placeholder { display: flex; align-items: center; justify-content: center; font-size: 48px; opacity: 0.35; }
.fh-er-kicker { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.fh-er-title {
font-family: var(--fh-serif); font-size: 26px; font-weight: 700;
line-height: 1.24; color: var(--fh-charcoal); margin-bottom: 12px;
transition: color 0.15s;
}
.fh-er-title a, .fh-er-title a:link, .fh-er-title a:visited { color: inherit !important; text-decoration: none !important; }
.fh-er-item:hover .fh-er-title { color: var(--fh-accent); }
.fh-er-title.fh-mm { font-family: 'Yati Sans', sans-serif; font-size: 20px; line-height: 1.65; }
.fh-er-excerpt { font-size: 15.5px; line-height: 1.7; color: var(--fh-mid); margin-bottom: 16px; }
.fh-er-excerpt.fh-mm { font-family: 'Yati Sans', sans-serif; font-size: 14px; line-height: 1.85; }
.fh-er-meta { font-size: 12.5px; color: var(--fh-quiet); display: flex; gap: 8px; flex-wrap: wrap; }
/* ═══════════════════════════════════════════
SECTION 7 — IN-DEPTH GRID (2-col editorial)
═══════════════════════════════════════════ */
.fh-indepth-section { background: var(--fh-white); }
.fh-id-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.fh-id-grid .fh-card--id-lead {
grid-column: 1 / 2;
grid-row: 1 / 3;
}
.fh-id-grid .fh-card--id-lead .fh-card-img-link { aspect-ratio: 3/2; }
.fh-id-grid .fh-card--id-small {
display: flex; flex-direction: row;
align-items: stretch;
}
.fh-id-grid .fh-card--id-small .fh-card-img-link {
width: 120px; min-width: 120px; flex-shrink: 0;
aspect-ratio: auto; height: auto;
}
.fh-id-grid .fh-card--id-small .fh-card-img {
height: 100%; aspect-ratio: auto;
}
.fh-id-grid .fh-card--id-small .fh-card-body { padding: 16px 18px; }
/* ═══════════════════════════════════════════
SECTION 8 — LATEST NEWS
═══════════════════════════════════════════ */
.fh-latest-news { background: var(--fh-bg); }
.fh-news-list { display: flex; flex-direction: column; gap: 0; }
.fh-news-item {
display: flex; align-items: flex-start; gap: 20px;
padding: 22px 0;
border-bottom: 1px solid var(--fh-rule);
transition: background 0.15s;
}
.fh-news-item:last-child { border-bottom: none; }
.fh-news-item--breaking { border-left: 3px solid #C0392B; padding-left: 16px; margin-left: -19px; }
.fh-news-body { flex: 1; min-width: 0; }
.fh-news-meta-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.fh-breaking-badge {
display: inline-flex; align-items: center; gap: 5px;
background: #C0392B; color: #fff;
font-size: 9.5px; font-weight: 800; letter-spacing: 0.14em;
text-transform: uppercase; padding: 3px 8px; border-radius: 3px;
animation: fh-pulse 2s infinite;
}
.fh-breaking-badge::before { content: '●'; font-size: 6px; }
@keyframes fh-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.75; }
}
.fh-news-title {
font-family: var(--fh-serif); font-size: 18px; font-weight: 700;
line-height: 1.3; color: var(--fh-charcoal); margin-bottom: 7px;
transition: color 0.15s;
}
.fh-news-title a, .fh-news-title a:link, .fh-news-title a:visited { color: inherit !important; text-decoration: none !important; }
.fh-news-item:hover .fh-news-title { color: var(--fh-accent); }
.fh-news-title.fh-mm { font-family: 'Yati Sans', sans-serif; font-size: 15px; line-height: 1.65; }
.fh-news-excerpt { font-size: 14px; line-height: 1.6; color: var(--fh-mid); margin-bottom: 10px; }
.fh-news-excerpt.fh-mm { font-family: 'Yati Sans', sans-serif; font-size: 13px; }
.fh-news-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fh-news-time { font-size: 12px; color: var(--fh-quiet); font-weight: 600; }
.fh-news-source { font-size: 12px; color: var(--fh-accent); font-weight: 600; }
.fh-news-source:hover { text-decoration: underline; }
.fh-news-img-link { display: block; flex-shrink: 0; }
.fh-news-img {
width: 110px; height: 88px;
background-size: cover; background-position: center;
border-radius: 6px;
}
/* ─── Alternating section backgrounds ─── */
.fh-section:nth-child(even) { background: var(--fh-bg); }
.fh-section:nth-child(odd) { background: var(--fh-white); }
/* ═══════════════════════════════════════════
RESPONSIVE — Homepage Sections
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
.fh-ec-grid { grid-template-columns: 1fr 1fr; }
.fh-ec-grid .fh-card:first-child { grid-column: 1 / 3; }
.fh-er-item { grid-template-columns: 260px 1fr; gap: 24px; }
.fh-id-grid { gap: 16px; }
}
@media (max-width: 768px) {
.fh-featured-takeover { min-height: 400px; }
.fh-ft-inner { padding: 48px 20px; }
.fh-ft-title { font-size: 24px; }
.fh-ft-subtitle { font-size: 15px; }
.fh-ec-grid { grid-template-columns: 1fr; }
.fh-ec-grid .fh-card:first-child { grid-column: 1; }
.fh-er-item { grid-template-columns: 1fr; gap: 16px; }
.fh-er-title { font-size: 20px; }
.fh-id-grid { grid-template-columns: 1fr; }
.fh-id-grid .fh-card--id-lead { grid-column: 1; grid-row: auto; }
.fh-id-grid .fh-card--id-small { flex-direction: column; }
.fh-id-grid .fh-card--id-small .fh-card-img-link { width: 100%; height: auto; aspect-ratio: 16/9; }
.fh-ts-item { grid-template-columns: 48px 1fr; }
.fh-ts-img-link { display: none; }
.fh-ts-num { font-size: 32px; }
.fh-news-img { width: 80px; height: 64px; }
.fh-yml-scroll .fh-card { min-width: 240px; max-width: 240px; }
.fh-hero--fullbleed { min-height: 420px; }
.fh-hero-fb-inner { padding: 40px 20px; }
}
/* ═══════════════════════════════════════════════════════════════
/* ═══════════════════════════════════════════════════════════════
FACT HUB v3.2 — Full Visual & Reading Experience Overhaul
─────────────────────────────────────────────────────────────
Covers:
· Cormorant Garant display font
· Hero split alignment fix
· Category badge F76700 brand spectrum
· Master article layout (sticky TOC, cinematic hero)
· Premium reading typography
· Author card, share bar, mobile TOC
· Responsive at 1024 / 768 / 480px
═══════════════════════════════════════════════════════════════ */
/* ── New design tokens ──────────────────────────────────────── */
:root {
--fh-display: 'Crimson Pro', 'Yati Sans', Georgia, serif;
--fh-accent: #F76700;
--fh-accent-h: #D95500;
--fh-accent-lt: #FF8820;
--fh-accent-pale:#FFF3E8;
--fh-rule: #E8E3DC;
--fh-rule-light: #F0EBE4;
--fh-toc-line: #E2DDD6;
}
/* ── Hero split — alignment + redesign ─────────────────────── */
.fh-hero--split { background: var(--fh-white); border-bottom: 1px solid var(--fh-rule); overflow: hidden; }
.fh-hero-split-inner {
max-width: var(--fh-max-w);
margin: 0 auto;
}
.fh-hero--split .fh-hero-grid {
display: grid;
grid-template-columns: 1fr 480px;
min-height: 600px;
}
.fh-hero-copy {
padding: 72px 56px 72px 24px;
display: flex; flex-direction: column; justify-content: center;
}
.fh-hero-headline {
font-family: var(--fh-display) !important;
font-size: clamp(30px, 3.8vw, 54px) !important;
font-weight: 700 !important;
line-height: 1.07 !important;
letter-spacing: -0.025em !important;
color: var(--fh-charcoal) !important;
margin: 16px 0 20px !important;
}
.fh-hero-headline.fh-mm {
font-family: 'Yati Sans','Noto Serif Myanmar',serif !important;
font-size: clamp(22px, 2.8vw, 36px) !important;
line-height: 1.55 !important;
letter-spacing: 0 !important;
}
.fh-hero-lede { font-family: var(--fh-serif); font-size: 18px; line-height: 1.72; color: var(--fh-mid); margin-bottom: 32px; }
.fh-hero-link { font-family: var(--fh-sans); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--fh-accent); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 28px; transition: gap .18s; }
.fh-hero-link:hover { gap: 12px; }
.fh-hero-meta { display: none !important; } /* replaced by byline strip */
.fh-hero-byline-strip { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--fh-quiet); border-top: 1px solid var(--fh-rule); padding-top: 18px; }
.fh-hero-byline-name { font-weight: 600; color: var(--fh-ink); font-family: var(--fh-sans); }
.fh-dot { color: var(--fh-rule-strong); }
.fh-hero-image-placeholder {
width: 100%; height: 100%; min-height: 600px;
background: linear-gradient(135deg, #F76700 0%, #C04400 50%, #1A0E00 100%);
position: relative; overflow: hidden;
}
.fh-hero-image-placeholder::after {
content: ''; position: absolute; inset: 0;
background-image: repeating-linear-gradient(
-55deg, transparent 0 28px, rgba(255,255,255,0.035) 28px 30px
);
}
/* ── Category badges — F76700 brand spectrum ────────────────── */
.fh-badge {
font-family: var(--fh-sans);
font-size: 10px; font-weight: 800;
letter-spacing: 0.09em; text-transform: uppercase;
padding: 4px 9px; border-radius: 3px;
display: inline-flex; align-items: center;
width: fit-content; white-space: nowrap;
transition: opacity .15s;
background: rgba(247,103,0,0.10);
color: #A83800;
border: 1px solid rgba(247,103,0,0.20);
}
.fh-badge:hover { opacity: 0.82; }
.fh-badge--health { background:#FEF0E6; color:#B83000; border-color:#F7B48A; }
.fh-badge--environment { background:#EAF5E0; color:#256010; border-color:#90C870; }
.fh-badge--physics { background:#EEEAF8; color:#42189A; border-color:#A892D8; }
.fh-badge--space { background:#E6ECF8; color:#182E78; border-color:#8098D0; }
.fh-badge--biology { background:#E4F5F0; color:#0A5848; border-color:#70C0A8; }
.fh-badge--neuroscience { background:#F8E8F2; color:#861050; border-color:#D070A8; }
.fh-badge--climate { background:#FEF4DC; color:#784200; border-color:#E8B840; }
.fh-badge--technology { background:#E6EEF8; color:#183C70; border-color:#80A0D0; }
.fh-badge--history { background:#F4EDE0; color:#582A0A; border-color:#C09868; }
.fh-badge--dark { background:var(--fh-charcoal); color:#fff; border-color:transparent; }
.fh-badge--accent { background:var(--fh-accent); color:#fff; border-color:transparent; }
.fh-badge--outline { background:transparent; color:var(--fh-accent); border:1.5px solid var(--fh-accent); }
.fh-badge--uncategorized{ background:rgba(247,103,0,0.07); color:#903800; border-color:rgba(247,103,0,0.15); }
/* Badges on dark hero backgrounds */
.fh-badge--on-dark { background:rgba(255,255,255,0.15) !important; color:#fff !important; border-color:rgba(255,255,255,0.25) !important; }
.fh-type--on-dark { background:rgba(247,103,0,0.25) !important; color:#FFD0A0 !important; border-color:rgba(247,103,0,0.4) !important; }
/* Hide archive + category widgets on homepage */
body.home .widget_archive,
body.home .widget_categories { display: none !important; }
/* ═══════════════════════════════════════════════════════════
MASTER ARTICLE LAYOUT v2
Used by: In-Depth, Explainer, Article, Featured
═══════════════════════════════════════════════════════════ */
.fh-master { background: var(--fh-bg); }
/* ── Hero ── */
.fh-master-hero {
position: relative;
overflow: hidden;
}
.fh-mh--image {
min-height: 520px;
display: flex; align-items: flex-end;
}
.fh-mh--text {
background: var(--fh-white);
border-bottom: 1px solid var(--fh-rule);
padding: 80px 0 56px;
}
.fh-mh--text .fh-mh-inner {
max-width: 760px;
margin: 0 auto;
padding: 0 24px;
}
/* Background image + veil */
.fh-mh-bg-wrap {
position: absolute; inset: 0;
margin: 0; padding: 0;
}
.fh-mh-bg-img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center 25%;
display: block;
}
.fh-mh-veil {
position: absolute; inset: 0;
background: linear-gradient(
to top,
rgba(8,5,2,0.96) 0%,
rgba(8,5,2,0.78) 35%,
rgba(8,5,2,0.40) 65%,
rgba(8,5,2,0.08) 100%
);
}
/* Hero inner — sits above veil */
.fh-mh--image .fh-mh-inner {
position: relative; z-index: 2;
max-width: 860px;
padding: 48px 48px 60px;
width: 100%;
}
.fh-mh--text .fh-mh-inner { max-width: 760px; margin: 0 auto; padding: 0 24px; }
/* Kicker */
.fh-mh-kicker {
display: flex; align-items: center; gap: 8px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.fh-mh-kicker-text {
font-family: var(--fh-sans);
font-size: 10.5px; font-weight: 800;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--fh-accent);
}
.fh-mh-kicker-text--light { color: var(--fh-accent-lt); }
/* Title */
.fh-mh-title {
font-family: var(--fh-display);
font-size: clamp(30px, 5vw, 58px);
font-weight: 700;
line-height: 1.06;
letter-spacing: -0.03em;
color: var(--fh-charcoal);
margin: 0 0 20px;
max-width: 780px;
}
.fh-mh-title--light { color: #FFFFFF; }
.fh-mh-title.fh-mm {
font-family: 'Yati Sans','Noto Serif Myanmar',serif;
font-size: clamp(24px, 3.8vw, 42px);
line-height: 1.48; letter-spacing: 0;
}
/* Deck */
.fh-mh-deck {
font-family: var(--fh-serif);
font-size: 19.5px; line-height: 1.65;
color: var(--fh-mid);
max-width: 660px;
margin: 0;
}
.fh-mh-deck--light { color: rgba(255,255,255,0.72); }
.fh-mh-deck.fh-mm { font-family: 'Yati Sans',sans-serif; font-size: 16px; line-height: 1.9; }
/* Image caption */
.fh-mh-caption-bar { background: var(--fh-white); border-bottom: 1px solid var(--fh-rule); padding: 10px 0; }
.fh-mh-caption-inner { max-width: 860px; padding: 0 48px; }
.fh-mh-caption-text { font-size: 12px; color: var(--fh-quiet); font-style: italic; font-family: var(--fh-serif); }
/* ── Byline bar ── */
.fh-master-byline-bar {
background: var(--fh-white);
border-bottom: 1px solid var(--fh-rule);
}
/* ── Centered byline wrapper (master articles) ── */
.fh-mbl-center-wrap {
max-width: var(--fh-article-w, 720px);
margin: 0 auto;
padding: 0 24px;
}
.fh-mbl-center-wrap .fh-byline-center {
border-top: none;
border-bottom: none;
margin: 0;
}
/* Legacy horizontal layout (backwards-compat) */
.fh-mbl-inner {
max-width: 1060px;
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
min-height: 64px;
}
.fh-mbl-left { display: flex; align-items: center; gap: 12px; }
.fh-mbl-right { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--fh-quiet); }
.fh-mbl-avatar {
width: 38px; height: 38px; border-radius: 50%;
overflow: hidden; flex-shrink: 0;
background: linear-gradient(135deg, var(--fh-accent) 0%, var(--fh-accent-lt) 100%);
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 15px; color: #fff;
}
.fh-mbl-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fh-mbl-name { display: block; font-size: 13.5px; font-weight: 600; color: var(--fh-charcoal); text-decoration: none; font-family: var(--fh-sans); }
.fh-mbl-name:hover { color: var(--fh-accent); }
.fh-mbl-role { font-size: 11.5px; color: var(--fh-quiet); margin-top: 1px; }
.fh-mbl-date { font-weight: 500; color: var(--fh-mid); }
.fh-mbl-updated { font-size: 11px; }
.fh-mbl-sep { color: var(--fh-rule-strong); }
.fh-mbl-read { white-space: nowrap; }
/* ── Body layout ── */
.fh-master-body { padding: 64px 0 100px; }
.fh-mb-grid {
max-width: 1100px;
margin: 0 auto;
padding: 0 24px;
display: grid;
gap: 72px;
align-items: start;
}
/* With TOC: content + sidebar, content centred in remaining space */
.fh-mb-grid--toc {
grid-template-columns: minmax(0, 720px) 240px;
justify-content: center;
}
/* Without TOC: single centred column */
.fh-mb-grid--notoc {
grid-template-columns: minmax(0, 720px);
justify-content: center;
}
/* ── Article typography ── */
.fh-article-body {
font-family: var(--fh-serif);
font-size: 19.5px;
line-height: 1.84;
color: var(--fh-ink);
-webkit-font-smoothing: antialiased;
word-spacing: 0.01em;
}
.fh-article-body.fh-mm {
font-family: 'Yati Sans','Noto Serif Myanmar',serif;
font-size: 16.5px; line-height: 2.05;
}
.fh-article-body > p { margin: 0 0 1.55em; }
.fh-article-body > p:last-child { margin-bottom: 0; }
/* Headings inside content */
.fh-article-body h2 {
font-family: var(--fh-display);
font-size: 29px; font-weight: 700;
line-height: 1.18; letter-spacing: -0.02em;
color: var(--fh-charcoal);
margin: 2.4em 0 0.75em;
padding-bottom: 0.3em;
border-bottom: 2px solid var(--fh-accent);
display: table; /* shrink to content width */
}
.fh-article-body h3 {
font-family: var(--fh-display);
font-size: 22px; font-weight: 600;
line-height: 1.25; color: var(--fh-charcoal);
margin: 2em 0 0.65em;
}
.fh-article-body h4 {
font-family: var(--fh-sans);
font-size: 11.5px; font-weight: 800;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--fh-accent);
margin: 1.8em 0 0.55em;
}
.fh-article-body h2:first-child,
.fh-article-body h3:first-child { margin-top: 0; }
/* Blockquote */
.fh-article-body blockquote {
margin: 2.2em 0;
padding: 0 0 0 28px;
border-left: 3px solid var(--fh-accent);
font-size: 22px; line-height: 1.58; font-style: italic;
color: var(--fh-mid);
}
.fh-article-body blockquote cite {
display: block; margin-top: 12px;
font-size: 13px; font-style: normal; font-weight: 600;
color: var(--fh-quiet); letter-spacing: 0.04em;
text-transform: uppercase;
}
/* Lists */
.fh-article-body ul, .fh-article-body ol { margin: 0 0 1.55em 1.4em; }
.fh-article-body li { margin-bottom: 0.45em; }
.fh-article-body ul li::marker { color: var(--fh-accent); font-size: 0.9em; }
.fh-article-body ol { list-style-type: decimal; }
.fh-article-body ol li::marker { font-weight: 700; color: var(--fh-accent); font-family: var(--fh-sans); font-size: 0.8em; }
/* Links */
.fh-article-body a {
color: var(--fh-accent);
text-decoration: underline;
text-decoration-color: rgba(247,103,0,0.30);
text-underline-offset: 3px;
text-decoration-thickness: 1px;
transition: text-decoration-color .15s;
}
.fh-article-body a:hover { text-decoration-color: var(--fh-accent); }
/* Images */
.fh-article-body img {
max-width: 100%; height: auto;
border-radius: 6px;
margin: 2em 0;
display: block;
box-shadow: 0 4px 24px rgba(0,0,0,0.09);
}
.fh-article-body figure { margin: 2.2em 0; }
.fh-article-body figcaption {
font-size: 12.5px; line-height: 1.6;
color: var(--fh-quiet); font-style: italic;
padding-top: 8px; border-top: 1px solid var(--fh-rule);
font-family: var(--fh-sans);
}
/* Code */
.fh-article-body code {
font-family: var(--fh-mono);
font-size: 0.85em;
background: var(--fh-bg-alt);
padding: 2px 6px; border-radius: 3px;
color: var(--fh-charcoal);
}
.fh-article-body pre {
background: var(--fh-charcoal); color: #E8E0D0;
padding: 24px 28px; border-radius: 8px;
overflow-x: auto; margin: 2em 0;
font-size: 14px; line-height: 1.7;
}
.fh-article-body pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
/* ── HR & Gutenberg Separator Block ─────────────────── */
/* Plain
*/
.fh-article-body hr {
border: none;
border-top: 1.5px solid var(--fh-rule);
margin: 2.5em auto;
max-width: 120px;
height: 0;
}
/* Gutenberg separator — default style (thin rule) */
.fh-article-body .wp-block-separator {
border: none;
border-top: 1.5px solid var(--fh-rule);
margin: 2.5em auto;
max-width: 120px;
height: 0 !important;
padding: 0 !important;
background: none !important;
}
/* Gutenberg separator — wide style */
.fh-article-body .wp-block-separator.is-style-wide {
max-width: 100%;
border-top-width: 1px;
}
/* Gutenberg separator — dots style (· · ·) */
.fh-article-body .wp-block-separator.is-style-dots {
border: none;
height: auto !important;
text-align: center;
max-width: none;
}
.fh-article-body .wp-block-separator.is-style-dots::before {
content: '· · ·';
font-size: 22px; letter-spacing: 0.4em;
color: var(--fh-rule-strong);
font-family: var(--fh-serif);
display: block;
}
/* Drop cap */
.fh-drop-cap > .fh-article-body > p:first-of-type::first-letter,
.fh-drop-cap > p:first-of-type::first-letter {
font-family: var(--fh-display);
font-size: 4.8em; font-weight: 700;
float: left; line-height: 0.82;
padding: 6px 10px 0 0;
color: var(--fh-accent);
letter-spacing: -0.03em;
shape-outside: margin-box;
}
/* Article footer (tags) */
.fh-article-footer {
margin-top: 48px;
padding-top: 28px;
border-top: 1px solid var(--fh-rule);
}
.fh-article-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fh-article-tags-label {
font-family: var(--fh-sans);
font-size: 10px; font-weight: 800;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--fh-quiet); margin-right: 4px;
}
.fh-tag {
font-family: var(--fh-sans); font-size: 11.5px; font-weight: 600;
color: var(--fh-mid); text-decoration: none;
background: var(--fh-bg-alt);
padding: 4px 11px; border-radius: 20px;
border: 1px solid var(--fh-rule);
transition: background .15s, color .15s;
}
.fh-tag:hover { background: var(--fh-accent-pale); color: var(--fh-accent); border-color: rgba(247,103,0,0.25); }
/* ── Author card ── */
.fh-author-card {
display: flex; gap: 20px;
margin-top: 48px; padding: 28px 32px;
background: var(--fh-white);
border: 1px solid var(--fh-rule);
border-radius: 10px;
align-items: flex-start;
}
.fh-ac-avatar {
width: 64px; height: 64px; border-radius: 50%;
flex-shrink: 0; overflow: hidden;
background: linear-gradient(135deg, var(--fh-accent), var(--fh-accent-lt));
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 22px; color: #fff;
}
.fh-ac-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fh-ac-label { font-family: var(--fh-sans); font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fh-quiet); margin-bottom: 4px; }
.fh-ac-name { font-weight: 700; font-size: 15px; color: var(--fh-charcoal); text-decoration: none; display: block; }
.fh-ac-name:hover { color: var(--fh-accent); }
.fh-ac-role { font-size: 12px; color: var(--fh-quiet); margin-top: 2px; margin-bottom: 10px; }
.fh-ac-bio { font-size: 14px; line-height: 1.68; color: var(--fh-mid); margin: 8px 0 0; font-family: var(--fh-sans); }
/* ── Mobile TOC (collapsible) ── */
.fh-toc-mobile {
margin-bottom: 36px;
display: none; /* shown only on tablet/mobile via media query */
}
.fh-toc-mobile-toggle {
display: flex; align-items: center; justify-content: space-between;
cursor: pointer; list-style: none;
font-family: var(--fh-sans); font-size: 11px;
font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--fh-quiet);
padding: 14px 0; border-top: 1px solid var(--fh-rule); border-bottom: 1px solid var(--fh-rule);
}
.fh-toc-mobile-toggle::-webkit-details-marker { display: none; }
details[open] .fh-toc-mobile-toggle svg { transform: rotate(180deg); }
.fh-toc-mobile-nav { padding: 12px 0 16px; display: flex; flex-direction: column; gap: 0; }
.fh-toc-mobile-item {
display: flex; align-items: baseline; gap: 10px;
font-size: 13.5px; color: var(--fh-mid); text-decoration: none;
padding: 7px 0;
border-bottom: 1px solid var(--fh-rule-light);
font-family: var(--fh-serif);
transition: color .15s;
}
.fh-toc-mobile-item:hover { color: var(--fh-charcoal); }
.fh-toc-mobile-h3 { padding-left: 18px; font-size: 12.5px; }
.fh-toc-mobile-n { font-family: var(--fh-sans); font-size: 10.5px; font-weight: 700; color: var(--fh-rule-strong); width: 18px; flex-shrink: 0; }
/* ── Sticky TOC sidebar ── */
.fh-mb-toc { }
.fh-toc-sticky {
position: sticky;
top: 88px;
}
.fh-toc-heading {
font-family: var(--fh-sans);
font-size: 10px; font-weight: 800;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--fh-quiet);
margin: 0 0 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--fh-toc-line);
}
.fh-toc-nav { display: flex; flex-direction: column; gap: 0; }
.fh-toc-link {
display: flex; align-items: baseline; gap: 10px;
padding: 7px 0;
font-size: 12.5px; line-height: 1.4;
color: var(--fh-quiet);
text-decoration: none;
border-left: 2px solid transparent;
padding-left: 12px;
margin-left: -12px;
transition: color .15s, border-color .15s;
}
.fh-toc-link:hover { color: var(--fh-charcoal); border-left-color: var(--fh-rule-strong); }
.fh-toc-link.fh-toc-active {
color: var(--fh-charcoal); font-weight: 600;
border-left-color: var(--fh-accent);
}
.fh-toc-h3 { padding-left: 24px; margin-left: -24px; font-size: 11.5px; }
.fh-toc-n {
font-family: var(--fh-sans); font-size: 10px; font-weight: 700;
color: var(--fh-rule-strong); flex-shrink: 0; width: 18px;
transition: color .15s;
}
.fh-toc-link.fh-toc-active .fh-toc-n { color: var(--fh-accent); }
.fh-toc-t { flex: 1; line-height: 1.4; }
.fh-toc-t.fh-mm { font-family: 'Yati Sans',sans-serif; font-size: 11px; }
/* TOC read progress bar */
.fh-toc-read-bar {
height: 2px; background: var(--fh-rule);
border-radius: 1px; margin-top: 20px; overflow: hidden;
}
.fh-toc-read-fill {
height: 100%; width: 0%;
background: var(--fh-accent);
border-radius: 1px;
transition: width .15s linear;
}
/* Top-of-page reading progress */
#fh-progress {
position: fixed; top: 0; left: 0; z-index: 9999;
height: 2px; width: 0%;
background: linear-gradient(90deg, var(--fh-accent), var(--fh-accent-lt));
transition: width .12s linear;
pointer-events: none;
}
/* ── Responsive — master layout ── */
@media (max-width: 1060px) {
/* TOC sidebar collapses — handled by 768px mobile rule below */
.fh-toc-sticky { position: static; }
.fh-toc-heading, .fh-toc-nav, .fh-toc-read-bar { display: none; }
.fh-toc-mobile { display: block; }
}
@media (max-width: 768px) {
.fh-mh--image { min-height: 380px; }
.fh-mh--image .fh-mh-inner { padding: 32px 20px 48px; }
.fh-mh--text { padding: 52px 0 40px; }
.fh-mh-title { font-size: clamp(26px, 7vw, 38px); }
.fh-mh-deck { font-size: 17px; }
.fh-master-body { padding: 40px 0 72px; }
.fh-mb-grid { padding: 0 16px; gap: 0; }
/* Collapse 2-col TOC grid to single centered column on mobile */
/* TOC grid collapses — see dedicated mobile block below */
.fh-article-body { font-size: 17.5px; line-height: 1.78; }
.fh-article-body h2 { font-size: 24px; }
.fh-article-body h3 { font-size: 20px; }
.fh-article-body blockquote { font-size: 19px; padding-left: 20px; }
.fh-drop-cap > .fh-article-body > p:first-of-type::first-letter,
.fh-drop-cap > p:first-of-type::first-letter { font-size: 3.8em; }
.fh-author-card { flex-direction: column; gap: 14px; padding: 20px; }
/* Hero split responsive */
.fh-hero--split .fh-hero-grid { grid-template-columns: 1fr; }
.fh-hero-copy { padding: 48px 20px 36px; }
.fh-hero-image { min-height: 260px; }
.fh-hero-image img { height: 260px; object-fit: cover; }
.fh-mh-caption-inner { padding: 0 20px; }
.fh-mbl-inner { min-height: 56px; }
.fh-mbl-right { flex-wrap: wrap; row-gap: 2px; }
}
@media (max-width: 480px) {
.fh-mh-title { font-size: 26px; }
.fh-mbl-inner { flex-direction: column; align-items: flex-start; padding: 12px 16px; }
.fh-mbl-right { gap: 6px; }
}
/* ═══════════════════════════════════════════════════════════
v3.3 PATCH — Badges unified, Hero CTA fix,
Podcast + Magazine sections,
Archives/Categories cleanup
═══════════════════════════════════════════════════════════ */
/* ── UNIFIED BADGES — single neutral style for all categories ──
No more per-category rainbow. All badges use a single
flat treatment: cream background, charcoal text, subtle border.
Type badges (In-Depth, Explainer) stay as accent-tinted pills.
─────────────────────────────────────────────────────────── */
/* Override ALL .fh-badge variants to a single clean style */
.fh-badge,
.fh-badge--health,
.fh-badge--environment,
.fh-badge--physics,
.fh-badge--space,
.fh-badge--biology,
.fh-badge--neuroscience,
.fh-badge--climate,
.fh-badge--technology,
.fh-badge--history,
.fh-badge--uncategorized,
.fh-badge--earth,
.fh-badge--psych {
background: transparent !important;
color: var(--fh-mid) !important;
border: 1px solid var(--fh-rule-strong) !important;
font-family: var(--fh-sans) !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
padding: 3px 9px !important;
border-radius: 2px !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
transition: color .15s, border-color .15s !important;
}
.fh-badge:hover,
.fh-badge--health:hover,
.fh-badge--environment:hover,
.fh-badge--physics:hover,
.fh-badge--space:hover,
.fh-badge--biology:hover,
.fh-badge--neuroscience:hover,
.fh-badge--climate:hover,
.fh-badge--technology:hover,
.fh-badge--history:hover,
.fh-badge--uncategorized:hover {
color: var(--fh-charcoal) !important;
border-color: var(--fh-charcoal) !important;
opacity: 1 !important;
}
/* Exceptions: accent + dark badges keep their fill */
.fh-badge--accent { background: var(--fh-accent) !important; color: #fff !important; border-color: transparent !important; }
.fh-badge--dark { background: var(--fh-charcoal) !important; color: #fff !important; border-color: transparent !important; }
.fh-badge--outline { background: transparent !important; color: var(--fh-accent) !important; border-color: var(--fh-accent) !important; }
/* On dark hero backgrounds */
.fh-badge--on-dark { background: transparent !important; color: rgba(255,255,255,0.75) !important; border-color: rgba(255,255,255,0.35) !important; }
/* Type badges (In-Depth, Explainer etc) — accent-tinted pills */
.fh-type-badge {
background: var(--fh-accent-pale) !important;
color: var(--fh-accent-h) !important;
border: none !important;
font-family: var(--fh-sans) !important;
font-size: 10px !important; font-weight: 800 !important;
letter-spacing: 0.1em !important; text-transform: uppercase !important;
padding: 3px 9px !important; border-radius: 2px !important;
}
.fh-type--on-dark { background: rgba(247,103,0,0.22) !important; color: #FFD0A0 !important; }
/* ── HERO CTA fix — proper button visible on dark background ── */
.fh-hero-cta {
display: inline-flex !important; align-items: center !important; gap: 8px !important;
background: rgba(255,255,255,0.12) !important;
color: #fff !important;
border: 1.5px solid rgba(255,255,255,0.5) !important;
font-family: var(--fh-sans) !important;
font-weight: 700 !important; font-size: 13px !important;
letter-spacing: 0.04em !important;
padding: 10px 22px !important; border-radius: 3px !important;
text-decoration: none !important;
transition: background .18s, border-color .18s !important;
margin-bottom: 28px !important;
}
.fh-hero-cta:hover { background: rgba(255,255,255,0.22) !important; border-color: rgba(255,255,255,0.8) !important; }
/* Hero link on split / light hero */
.fh-hero-link {
color: var(--fh-accent) !important; font-weight: 700 !important;
font-size: 13px !important; letter-spacing: 0.04em !important;
text-decoration: none !important; display: inline-flex !important;
align-items: center !important; gap: 6px !important; margin-bottom: 28px !important;
transition: gap .18s !important;
}
.fh-hero-link:hover { gap: 12px !important; }
/* ── Hero section inner padding — fix "too close to border" ── */
.fh-hero-fb-inner { padding: 72px 56px !important; }
.fh-hero--split .fh-hero-copy { padding: 80px 64px 80px 0 !important; }
/* ── Section header shared style ── */
.fh-sh { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.fh-sh-rule { width: 28px; height: 2px; background: var(--fh-accent); flex-shrink: 0; }
.fh-sh-title {
font-family: var(--fh-sans); font-size: 11px; font-weight: 800;
letter-spacing: 0.13em; text-transform: uppercase; color: var(--fh-charcoal);
display: flex; align-items: center; gap: 8px; flex: 1;
}
.fh-sh-more {
font-family: var(--fh-sans); font-size: 11.5px; font-weight: 600;
color: var(--fh-accent); text-decoration: none; white-space: nowrap;
margin-left: auto; transition: gap .15s;
}
.fh-sh-more:hover { opacity: 0.8; }
.fh-sh--light .fh-sh-title { color: #fff; }
.fh-sh--light .fh-sh-more { color: rgba(255,255,255,0.75); }
.fh-sh--light .fh-sh-rule { background: rgba(255,255,255,0.4); }
/* Section icon sizing */
.fh-podcast-icon, .fh-mag-icon { width: 16px; height: 16px; flex-shrink: 0; }
/* ══════════════════════════════════════
PODCAST STRIP
══════════════════════════════════════ */
.fh-podcast-strip {
background: #0E0C0A;
padding: 56px 0 64px;
border-top: 1px solid #222;
border-bottom: 1px solid #222;
}
.fh-podcast-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.fh-podcast-card {
background: #181614;
border: 1px solid #2A2825;
border-radius: 8px;
display: flex; gap: 0;
flex-direction: column;
overflow: hidden;
transition: border-color .2s, box-shadow .2s;
}
.fh-podcast-card:hover { border-color: rgba(247,103,0,0.4); box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
/* Lead card spans 1 col but has slightly different treatment */
.fh-podcast-card--lead { border-color: #383432; }
/* Art */
.fh-pc-art-link { display: block; aspect-ratio: 1/1; overflow: hidden; width: 100%; }
.fh-pc-art { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.fh-podcast-card:hover .fh-pc-art { transform: scale(1.04); }
.fh-pc-art-placeholder {
width: 100%; height: 100%; aspect-ratio: 1/1;
background: linear-gradient(135deg, #1E1C18 0%, #0E0C0A 100%);
display: flex; align-items: center; justify-content: center;
}
.fh-pc-art-placeholder svg { width: 40px; height: 40px; stroke: rgba(247,103,0,0.4); }
/* Body */
.fh-pc-body { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.fh-pc-meta-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.fh-pc-ep-num {
font-family: var(--fh-sans); font-size: 10px; font-weight: 800;
letter-spacing: 0.12em; text-transform: uppercase; color: var(--fh-accent);
}
.fh-pc-cat {
font-family: var(--fh-sans); font-size: 10px; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase;
color: rgba(255,255,255,0.35);
}
.fh-pc-title {
font-family: var(--fh-display); font-size: 19px; font-weight: 700;
line-height: 1.2; letter-spacing: -0.01em;
color: #F0EBE3; margin: 0 0 10px;
}
.fh-pc-title a { color: inherit; text-decoration: none; }
.fh-pc-title a:hover { color: #fff; }
.fh-pc-title.fh-mm { font-family: 'Yati Sans',sans-serif; font-size: 15px; line-height: 1.6; }
.fh-pc-excerpt { font-size: 13px; line-height: 1.62; color: rgba(255,255,255,0.45); margin: 0 0 16px; flex: 1; font-family: var(--fh-serif); }
.fh-pc-excerpt.fh-mm { font-family: 'Yati Sans',sans-serif; font-size: 12px; line-height: 1.8; }
.fh-pc-footer { margin-top: auto; }
.fh-pc-info { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: rgba(255,255,255,0.3); margin-bottom: 12px; font-family: var(--fh-sans); }
.fh-pc-dot { color: rgba(255,255,255,0.2); }
.fh-pc-listen { display: flex; flex-wrap: wrap; gap: 6px; }
/* Platform listen buttons */
.fh-pc-btn {
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--fh-sans); font-size: 11px; font-weight: 700;
padding: 5px 11px; border-radius: 20px;
border: 1px solid rgba(255,255,255,0.14);
color: rgba(255,255,255,0.6); text-decoration: none;
transition: background .15s, color .15s, border-color .15s;
}
.fh-pc-btn svg { width: 12px; height: 12px; flex-shrink: 0; }
.fh-pc-btn:hover { color: #fff; border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.06); }
.fh-pc-btn--spotify:hover { background: rgba(30,215,96,0.12); border-color: rgba(30,215,96,0.4); color: #1ED760; }
.fh-pc-btn--apple:hover { background: rgba(252,70,251,0.1); border-color: rgba(252,70,251,0.35); color: #FC46FB; }
.fh-pc-btn--yt:hover { background: rgba(255,0,0,0.1); border-color: rgba(255,0,0,0.35); color: #FF4040; }
@media (max-width: 900px) { .fh-podcast-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .fh-podcast-grid { grid-template-columns: 1fr; } }
/* ══════════════════════════════════════
MAGAZINE SHELF
══════════════════════════════════════ */
.fh-magazine-shelf { background: var(--fh-bg-alt); padding: 56px 0 64px; border-top: 1px solid var(--fh-rule); }
.fh-mag-shelf-grid {
display: grid;
grid-template-columns: 360px 1fr;
gap: 48px;
align-items: start;
}
/* Featured issue */
.fh-mag-featured { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: start; }
/* Cover */
.fh-mag-cover-wrap { position: relative; }
.fh-mag-cover {
width: 100%; display: block;
border-radius: 4px;
box-shadow: 6px 8px 28px rgba(0,0,0,0.22), 2px 2px 0 rgba(0,0,0,0.06);
transition: transform .3s, box-shadow .3s;
}
.fh-mag-cover-wrap:hover .fh-mag-cover { transform: translateY(-4px) rotate(-0.5deg); box-shadow: 10px 14px 36px rgba(0,0,0,0.28), 2px 2px 0 rgba(0,0,0,0.06); }
.fh-mag-cover-placeholder {
width: 100%; aspect-ratio: 3/4;
background: linear-gradient(155deg, var(--fh-charcoal) 0%, #3A2A1A 100%);
border-radius: 4px; display: flex; align-items: center; justify-content: center;
padding: 20px;
}
.fh-mag-cover-title { font-family: var(--fh-display); font-size: 18px; color: rgba(255,255,255,0.6); text-align: center; line-height: 1.3; }
/* Badges on cover */
.fh-mag-free-badge, .fh-mag-latest-badge {
position: absolute; top: -8px; right: -8px;
font-family: var(--fh-sans); font-size: 9px; font-weight: 800;
letter-spacing: 0.1em; text-transform: uppercase;
padding: 4px 8px; border-radius: 2px;
}
.fh-mag-free-badge { background: var(--fh-accent); color: #fff; }
.fh-mag-latest-badge { background: var(--fh-charcoal); color: #fff; }
.fh-mag-free-badge--sm { position: static; margin-left: 4px; font-size: 8px; padding: 2px 6px; }
/* Magazine info */
.fh-mag-issue-label {
font-family: var(--fh-sans); font-size: 10.5px; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--fh-accent);
margin-bottom: 8px;
}
.fh-mag-title { font-family: var(--fh-display); font-size: 22px; font-weight: 700; line-height: 1.18; letter-spacing: -0.01em; color: var(--fh-charcoal); margin: 0 0 10px; }
.fh-mag-title a { color: inherit; text-decoration: none; }
.fh-mag-title a:hover { color: var(--fh-accent); }
.fh-mag-desc { font-family: var(--fh-serif); font-size: 15px; line-height: 1.62; color: var(--fh-mid); margin: 0 0 14px; }
/* Highlights list */
.fh-mag-highlights {
list-style: none; margin: 0 0 20px; padding: 0;
border-top: 1px solid var(--fh-rule); padding-top: 14px;
}
.fh-mag-highlights li {
font-family: var(--fh-sans); font-size: 12.5px; color: var(--fh-mid);
padding: 5px 0; border-bottom: 1px solid var(--fh-rule-light);
display: flex; gap: 8px;
}
.fh-mag-highlights li::before { content: '→'; color: var(--fh-accent); font-size: 11px; flex-shrink: 0; margin-top: 1px; }
/* Action buttons */
.fh-mag-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.fh-mag-btn {
display: inline-flex; align-items: center; gap: 7px;
font-family: var(--fh-sans); font-size: 12.5px; font-weight: 700;
padding: 9px 18px; border-radius: 3px; text-decoration: none;
transition: background .15s, color .15s;
}
.fh-mag-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.fh-mag-btn--primary { background: var(--fh-charcoal); color: #fff; }
.fh-mag-btn--primary:hover { background: var(--fh-accent); }
.fh-mag-btn--secondary { background: transparent; color: var(--fh-charcoal); border: 1.5px solid var(--fh-rule-strong); }
.fh-mag-btn--secondary:hover { border-color: var(--fh-charcoal); }
/* Back issues column */
.fh-mag-back-issues { border-left: 1px solid var(--fh-rule); padding-left: 40px; }
.fh-mag-back-label {
font-family: var(--fh-sans); font-size: 10px; font-weight: 800;
letter-spacing: 0.12em; text-transform: uppercase; color: var(--fh-quiet);
margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--fh-rule);
}
.fh-mag-back-item {
display: flex; align-items: center; gap: 14px;
padding: 14px 0; border-bottom: 1px solid var(--fh-rule-light);
text-decoration: none; transition: background .15s;
}
.fh-mag-back-item:last-child { border-bottom: none; }
.fh-mag-back-item:hover .fh-mag-back-issue { color: var(--fh-accent); }
.fh-mag-back-thumb {
width: 48px; height: 62px; object-fit: cover;
border-radius: 2px; flex-shrink: 0;
box-shadow: 2px 3px 8px rgba(0,0,0,0.14);
}
.fh-mag-back-thumb--placeholder { background: var(--fh-bg-alt); border: 1px solid var(--fh-rule); }
.fh-mag-back-issue { font-family: var(--fh-sans); font-size: 13px; font-weight: 700; color: var(--fh-charcoal); display: block; transition: color .15s; }
.fh-mag-back-date { font-family: var(--fh-sans); font-size: 11.5px; color: var(--fh-quiet); margin-top: 2px; }
.fh-mag-back-dl { width: 14px; height: 14px; stroke: var(--fh-quiet); margin-left: auto; flex-shrink: 0; transition: stroke .15s; }
.fh-mag-back-item:hover .fh-mag-back-dl { stroke: var(--fh-accent); }
@media (max-width: 960px) {
.fh-mag-shelf-grid { grid-template-columns: 1fr; }
.fh-mag-back-issues { border-left: none; padding-left: 0; border-top: 1px solid var(--fh-rule); padding-top: 28px; margin-top: 8px; }
}
@media (max-width: 600px) {
.fh-mag-featured { grid-template-columns: 140px 1fr; gap: 18px; }
}
/* ── Hide Archives + Categories widgets EVERYWHERE in sidebar ──
They belong in the footer nav, not floating around in content areas.
─────────────────────────────────────────────────────────── */
.widget_archive,
.widget_categories { display: none !important; }
/* ── Podcast single template ──────────────────────────────── */
.fh-podcast-single .fh-pc-player-bar {
background: var(--fh-white); border: 1px solid var(--fh-rule);
border-radius: 8px; padding: 20px 24px;
display: flex; align-items: center; gap: 16px;
margin: 32px 0; flex-wrap: wrap;
}
.fh-pc-player-bar .fh-pc-listen { gap: 8px; }
/* ═══════════════════════════════════════════════════════════
v3.4 PATCH — Wire news format, centered article body,
author bio redesign, references box redesign,
archives/categories hidden everywhere
═══════════════════════════════════════════════════════════ */
/* ── Hide archives and categories EVERYWHERE — not just homepage ── */
.widget_archive,
.widget_categories,
.sidebar .widget_archive,
.sidebar .widget_categories,
#secondary .widget_archive,
#secondary .widget_categories,
.fh-sidebar .widget_archive,
.fh-sidebar .widget_categories { display: none !important; }
/* ══════════════════════════════════════
NEWS WIRE — Reuters / BBC format
══════════════════════════════════════ */
.fh-wire-main { background: var(--fh-white); }
.fh-wire-breaking-bar {
background: #C0392B; color: #fff;
font-family: var(--fh-sans); font-size: 12px; font-weight: 800;
letter-spacing: 0.08em; padding: 9px 24px;
display: flex; align-items: center; gap: 10px;
}
.fh-wire-breaking-dot {
width: 7px; height: 7px; border-radius: 50%; background: #fff;
flex-shrink: 0; animation: fh-pulse 1.6s infinite;
}
.fh-wire-breaking-headline { font-weight: 400; opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fh-wire-wrap {
max-width: 720px;
margin: 0 auto;
padding: 52px 24px 80px;
}
/* Section kicker: BIOLOGY / NEWS */
.fh-wire-kicker {
display: flex; align-items: center; gap: 10px;
margin-bottom: 18px;
border-top: 3px solid var(--fh-charcoal);
padding-top: 10px;
}
.fh-wire-cat {
font-family: var(--fh-sans); font-size: 11px; font-weight: 800;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--fh-charcoal); text-decoration: none;
transition: color .15s;
}
.fh-wire-cat:hover { color: var(--fh-accent); }
.fh-wire-kicker-div {
width: 1px; height: 12px;
background: var(--fh-rule-strong);
}
.fh-wire-type {
font-family: var(--fh-sans); font-size: 11px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--fh-accent);
}
/* Headline */
.fh-wire-headline {
font-family: var(--fh-serif);
font-size: clamp(26px, 3.8vw, 38px);
font-weight: 700; line-height: 1.18;
letter-spacing: -0.02em; color: var(--fh-charcoal);
margin: 0 0 18px;
}
.fh-wire-headline.fh-mm { font-family: 'Yati Sans',serif; letter-spacing: 0; font-size: clamp(22px,3.4vw,32px); }
/* Standfirst */
.fh-wire-standfirst {
font-family: var(--fh-serif);
font-size: 20px; line-height: 1.55;
color: var(--fh-mid);
margin: 0 0 24px;
border-left: 3px solid var(--fh-rule-strong);
padding-left: 16px;
}
.fh-wire-standfirst.fh-mm { font-family: 'Yati Sans',serif; font-size: 17px; line-height: 1.85; }
/* Dateline strip */
.fh-wire-dateline {
display: flex; align-items: center; gap: 16px;
flex-wrap: wrap;
padding: 14px 0;
border-top: 1px solid var(--fh-rule);
border-bottom: 1px solid var(--fh-rule);
margin-bottom: 32px;
}
.fh-wire-dl-left { display: flex; align-items: center; gap: 10px; }
.fh-wire-dl-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.fh-wire-dl-avatar {
width: 34px; height: 34px; border-radius: 50%;
overflow: hidden; flex-shrink: 0;
background: linear-gradient(135deg, var(--fh-accent), var(--fh-accent-lt));
display: flex; align-items: center; justify-content: center;
font-family: var(--fh-sans); font-weight: 700; font-size: 14px; color: #fff;
}
.fh-wire-dl-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fh-wire-dl-author {
font-family: var(--fh-sans); font-size: 13px; font-weight: 600;
color: var(--fh-charcoal); text-decoration: none; display: block;
}
.fh-wire-dl-author:hover { color: var(--fh-accent); }
.fh-wire-dl-role { font-family: var(--fh-sans); font-size: 11px; color: var(--fh-quiet); margin-top: 1px; }
.fh-wire-dl-time { font-family: var(--fh-sans); font-size: 12.5px; color: var(--fh-mid); font-weight: 500; }
.fh-wire-dl-ago { font-family: var(--fh-sans); font-size: 11.5px; color: var(--fh-quiet); }
.fh-wire-dl-sep { color: var(--fh-rule-strong); }
.fh-wire-dl-source-label { font-family: var(--fh-sans); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fh-quiet); }
.fh-wire-dl-source {
font-family: var(--fh-sans); font-size: 12.5px; font-weight: 600;
color: var(--fh-accent); text-decoration: none;
}
.fh-wire-dl-source:hover { text-decoration: underline; }
/* Featured image */
.fh-wire-figure { margin: 0 0 36px; }
.fh-wire-img { width: 100%; display: block; border-radius: 3px; }
.fh-wire-figcaption {
font-family: var(--fh-sans); font-size: 12px; color: var(--fh-quiet);
border-top: 1px solid var(--fh-rule); padding-top: 8px; margin-top: 8px;
line-height: 1.5;
}
/* Wire body — classic wire service typography */
.fh-wire-body p {
font-family: var(--fh-serif);
font-size: 18.5px; line-height: 1.76;
color: var(--fh-ink);
margin-bottom: 1.4em;
}
.fh-wire-body p:first-of-type::first-letter {
font-family: var(--fh-display);
font-size: 4.2em; font-weight: 700;
float: left; line-height: 0.78;
margin: 6px 10px 0 0;
color: var(--fh-accent);
}
.fh-wire-body h2 {
font-family: var(--fh-sans); font-size: 12px; font-weight: 800;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--fh-quiet); margin: 2.8em 0 0.8em;
border: none; padding: 0;
}
.fh-wire-body h3 { font-family: var(--fh-serif); font-size: 20px; font-weight: 700; margin: 2em 0 0.6em; }
.fh-wire-body blockquote {
border-left: 3px solid var(--fh-charcoal);
padding-left: 20px; margin: 2em 0;
}
.fh-wire-body blockquote p { font-size: 20px; font-style: italic; color: var(--fh-mid); }
.fh-wire-body a { color: var(--fh-accent); text-decoration: underline; text-underline-offset: 3px; }
/* Reporting line */
.fh-wire-reporting-line {
font-family: var(--fh-sans); font-size: 12.5px; color: var(--fh-quiet);
font-style: italic; border-top: 1px solid var(--fh-rule); padding-top: 14px;
margin-top: 32px;
}
.fh-wire-reporting-line a { color: var(--fh-accent); text-decoration: none; }
.fh-wire-reporting-line a:hover { text-decoration: underline; }
/* ══════════════════════════════════════
ARTICLE BODY — centered layout
Desktop: narrow column centered, TOC sidebar right.
Mobile: single full-width column, always centered.
══════════════════════════════════════ */
/* Wider wrap to accommodate TOC */
.fh-mb-grid { max-width: 1080px !important; }
/* Article body text */
.fh-article-body { font-size: 18.5px !important; line-height: 1.82 !important; }
/* Desktop: centered columns */
@media (min-width: 769px) {
.fh-mb-grid--notoc {
grid-template-columns: minmax(0, 680px) !important;
justify-content: center !important;
}
.fh-mb-grid--toc {
grid-template-columns: minmax(0, 680px) 240px !important;
justify-content: center !important;
}
}
/* Mobile: ALWAYS single centered column, no sidebar */
@media (max-width: 768px) {
.fh-mb-grid--toc,
.fh-mb-grid--notoc {
grid-template-columns: 1fr !important;
justify-content: stretch !important;
gap: 0 !important;
}
.fh-toc-sticky { display: none !important; }
}
/* ══════════════════════════════════════
REFERENCES BOX — academic footnote style
══════════════════════════════════════ */
.fh-refs {
margin-top: 48px;
padding-top: 28px;
border-top: 2px solid var(--fh-charcoal);
}
.fh-refs-header {
display: flex; align-items: center; gap: 10px;
margin-bottom: 20px;
}
.fh-refs-icon {
width: 16px; height: 16px; flex-shrink: 0;
stroke: var(--fh-quiet);
}
.fh-refs-title {
font-family: var(--fh-sans); font-size: 10.5px; font-weight: 800;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--fh-charcoal); flex: 1;
margin: 0;
}
.fh-refs-count {
font-family: var(--fh-sans); font-size: 11px; font-weight: 700;
background: var(--fh-bg-alt); color: var(--fh-mid);
padding: 2px 8px; border-radius: 10px;
border: 1px solid var(--fh-rule);
}
.fh-refs-list {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 0;
}
.fh-refs-item {
display: flex; align-items: baseline; gap: 14px;
padding: 12px 0;
border-bottom: 1px solid var(--fh-rule-light);
transition: background .12s;
}
.fh-refs-item:last-child { border-bottom: none; }
.fh-refs-num {
font-family: var(--fh-sans); font-size: 11px; font-weight: 800;
color: var(--fh-accent); min-width: 20px; flex-shrink: 0;
text-align: right; line-height: 1.6;
}
.fh-refs-body {
font-family: var(--fh-sans); font-size: 13px; line-height: 1.62;
color: var(--fh-mid); flex: 1;
}
.fh-refs-link {
color: var(--fh-charcoal); text-decoration: none;
display: inline-flex; align-items: baseline; gap: 4px;
transition: color .15s;
}
.fh-refs-link:hover { color: var(--fh-accent); }
.fh-refs-ext {
width: 10px; height: 10px; flex-shrink: 0;
stroke: currentColor; margin-bottom: -1px;
}
/* ══════════════════════════════════════
AUTHOR BIO — elegant editorial card
══════════════════════════════════════ */
.fh-author-bio {
margin-top: 52px;
}
.fh-ab-rule {
height: 2px;
background: linear-gradient(to right, var(--fh-charcoal) 40px, var(--fh-rule) 40px);
margin-bottom: 28px;
}
.fh-ab-inner {
display: flex; gap: 24px; align-items: flex-start;
}
.fh-ab-left { flex-shrink: 0; }
.fh-ab-avatar-link { display: block; }
.fh-ab-avatar {
width: 72px; height: 72px; border-radius: 50%;
object-fit: cover; display: block;
border: 2px solid var(--fh-white);
box-shadow: 0 0 0 1px var(--fh-rule);
transition: box-shadow .2s;
}
.fh-ab-avatar-link:hover .fh-ab-avatar { box-shadow: 0 0 0 2px var(--fh-accent); }
.fh-ab-avatar--init {
background: linear-gradient(135deg, var(--fh-charcoal), #3A3A3A);
display: flex; align-items: center; justify-content: center;
font-family: var(--fh-display); font-size: 26px; font-weight: 700; color: #fff;
}
.fh-ab-right { flex: 1; min-width: 0; }
.fh-ab-meta {
display: flex; align-items: center; gap: 10px;
margin-bottom: 6px;
}
.fh-ab-label {
font-family: var(--fh-sans); font-size: 10px; font-weight: 800;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--fh-quiet);
}
.fh-ab-post-count {
font-family: var(--fh-sans); font-size: 11px; color: var(--fh-quiet);
text-decoration: none; border: 1px solid var(--fh-rule);
padding: 1px 7px; border-radius: 10px; transition: border-color .15s, color .15s;
}
.fh-ab-post-count:hover { border-color: var(--fh-accent); color: var(--fh-accent); }
.fh-ab-name {
display: block; font-family: var(--fh-display);
font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
color: var(--fh-charcoal); text-decoration: none; line-height: 1.1;
margin-bottom: 4px; transition: color .15s;
}
.fh-ab-name:hover { color: var(--fh-accent); }
.fh-ab-role {
font-family: var(--fh-sans); font-size: 12px; font-weight: 500;
color: var(--fh-quiet); text-transform: uppercase; letter-spacing: 0.06em;
margin-bottom: 10px;
}
.fh-ab-bio {
font-family: var(--fh-serif); font-size: 15px; line-height: 1.7;
color: var(--fh-mid); margin: 0;
}
@media (max-width: 560px) {
.fh-ab-inner { flex-direction: column; gap: 16px; }
.fh-ab-avatar { width: 56px; height: 56px; }
.fh-ab-name { font-size: 18px; }
}
/* ── Keep old .fh-author-card from master-article until fully replaced ── */
.fh-author-card { display: none; }
/* ═══════════════════════════════════════════════════════════
v3.5 — Editor's Choice redesign, Podcast redesign,
Magazine portrait covers, Hero centering + CTA,
Author lower-third (Science News style)
═══════════════════════════════════════════════════════════ */
/* ── Hero fullbleed — centered content block ── */
.fh-hero--centered-block { align-items: center; }
.fh-hero-fb-inner--center {
text-align: center;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
.fh-hero-eyebrow--center { justify-content: center; }
.fh-hero-headline--center { margin-left: auto; margin-right: auto; }
.fh-hero-lede--center { margin-left: auto; margin-right: auto; }
.fh-hero-meta--center { justify-content: center; }
/* Hero CTA — solid orange accent */
.fh-hero-cta--orange,
.fh-hero-cta {
background: var(--fh-accent) !important;
color: #fff !important;
border: none !important;
font-family: var(--fh-sans) !important;
font-size: 13.5px !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
padding: 12px 28px !important;
border-radius: 3px !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
text-decoration: none !important;
transition: background .15s !important;
margin-bottom: 28px !important;
}
.fh-hero-cta--orange:hover,
.fh-hero-cta:hover { background: var(--fh-accent-dk) !important; }
/* ══════════════════════════════════════
EDITOR'S CHOICE — Redesigned
Lead: tall portrait card with overlay
Stack: 2 horizontal editorial cards
══════════════════════════════════════ */
.fh-ec-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3px;
border-radius: 10px;
overflow: hidden;
background: var(--fh-rule);
}
/* Lead card — full left column, portrait */
.fh-ec-lead {
position: relative;
display: block;
text-decoration: none;
min-height: 560px;
overflow: hidden;
background: var(--fh-charcoal);
}
.fh-ec-lead-img {
position: absolute; inset: 0;
background-image: var(--ec-img);
background-size: cover;
background-position: center top;
transition: transform .6s ease;
}
.fh-ec-lead:hover .fh-ec-lead-img { transform: scale(1.04); }
.fh-ec-lead-img--empty {
background: linear-gradient(160deg, #2A2218 0%, #181410 100%);
}
.fh-ec-lead-veil {
position: absolute; inset: 0;
background: linear-gradient(to top,
rgba(8,6,4,0.96) 0%,
rgba(8,6,4,0.65) 35%,
rgba(8,6,4,0.15) 65%,
rgba(8,6,4,0.0) 100%);
}
.fh-ec-lead-body {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 36px 32px;
z-index: 1;
}
.fh-ec-lead-badges { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.fh-ec-lead-title {
font-family: var(--fh-display);
font-size: clamp(22px, 2.4vw, 32px);
font-weight: 700; line-height: 1.15;
letter-spacing: -0.02em;
color: #fff; margin: 0 0 12px;
}
.fh-ec-lead-title.fh-mm { font-family: 'Yati Sans',serif; font-size: clamp(18px,2vw,26px); line-height: 1.6; letter-spacing: 0; }
.fh-ec-lead-exc {
font-family: var(--fh-serif);
font-size: 15px; line-height: 1.6;
color: rgba(255,255,255,0.65);
margin: 0 0 16px;
}
.fh-ec-lead-exc.fh-mm { font-family: 'Yati Sans',serif; font-size: 13px; line-height: 1.8; }
.fh-ec-lead-meta {
display: flex; align-items: center; gap: 7px;
font-family: var(--fh-sans); font-size: 12px;
color: rgba(255,255,255,0.45);
}
/* Side stack */
.fh-ec-stack {
display: flex; flex-direction: column; gap: 3px;
}
/* Side cards — horizontal */
.fh-ec-card {
display: flex;
text-decoration: none;
background: var(--fh-white);
flex: 1;
min-height: 0;
overflow: hidden;
transition: background .15s;
}
.fh-ec-card:hover { background: var(--fh-bg-alt); }
.fh-ec-card-img-wrap {
width: 200px; min-width: 200px;
flex-shrink: 0; overflow: hidden;
position: relative;
}
.fh-ec-card-img {
position: absolute; inset: 0;
background-image: var(--ec-img);
background-size: cover; background-position: center;
transition: transform .5s ease;
}
.fh-ec-card:hover .fh-ec-card-img { transform: scale(1.05); }
.fh-ec-card-img--empty {
position: absolute; inset: 0;
background: linear-gradient(135deg, var(--fh-bg-alt) 0%, #E8E4DC 100%);
display: flex; align-items: center; justify-content: center;
}
.fh-ec-card-body {
flex: 1; padding: 24px 24px 22px;
display: flex; flex-direction: column;
justify-content: center;
}
.fh-ec-card-badges { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 11px; }
.fh-ec-card-title {
font-family: var(--fh-display);
font-size: clamp(17px, 1.5vw, 22px);
font-weight: 700; line-height: 1.22;
letter-spacing: -0.01em;
color: var(--fh-charcoal); margin: 0 0 8px;
transition: color .15s;
}
.fh-ec-card:hover .fh-ec-card-title { color: var(--fh-accent); }
.fh-ec-card-title.fh-mm { font-family: 'Yati Sans',serif; font-size: clamp(14px,1.3vw,18px); line-height: 1.65; letter-spacing: 0; }
.fh-ec-card-exc {
font-family: var(--fh-serif); font-size: 13.5px;
line-height: 1.6; color: var(--fh-mid);
margin: 0 0 14px; flex: 1;
}
.fh-ec-card-exc.fh-mm { font-family: 'Yati Sans',serif; font-size: 12px; line-height: 1.8; }
.fh-ec-card-meta {
display: flex; align-items: center; gap: 6px;
font-family: var(--fh-sans); font-size: 11.5px;
color: var(--fh-quiet); margin-top: auto;
}
@media (max-width: 880px) {
.fh-ec-layout { grid-template-columns: 1fr; }
.fh-ec-lead { min-height: 400px; }
.fh-ec-card-img-wrap { width: 130px; min-width: 130px; }
}
@media (max-width: 560px) {
.fh-ec-card { flex-direction: column; }
.fh-ec-card-img-wrap { width: 100%; height: 180px; position: relative; }
}
/* ══════════════════════════════════════
PODCAST — App + editorial hybrid
Featured: large horizontal card
List: compact Spotify-style rows
══════════════════════════════════════ */
.fh-podcast-strip {
background: #0A0908;
padding: 56px 0 64px;
}
.fh-pc-layout {
display: grid;
grid-template-columns: 1fr 360px;
gap: 2px;
border-radius: 10px;
overflow: hidden;
background: #1C1916;
}
/* Featured episode */
.fh-pc-featured {
display: flex;
gap: 0;
background: #131110;
}
.fh-pc-feat-art {
display: block;
width: 220px; min-width: 220px;
position: relative;
overflow: hidden;
flex-shrink: 0;
background: #0A0908;
text-decoration: none;
}
.fh-pc-feat-art img {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform .5s;
}
.fh-pc-featured:hover .fh-pc-feat-art img { transform: scale(1.05); }
.fh-pc-feat-art-placeholder {
width: 100%; height: 100%;
background: linear-gradient(160deg, #251F18 0%, #0A0908 100%);
display: flex; align-items: center; justify-content: center;
}
.fh-pc-feat-art-placeholder svg { width: 48px; height: 48px; stroke: rgba(247,103,0,0.35); }
.fh-pc-feat-dur {
position: absolute; bottom: 10px; right: 10px;
background: rgba(0,0,0,0.75);
color: rgba(255,255,255,0.8);
font-family: var(--fh-sans); font-size: 10.5px; font-weight: 700;
padding: 3px 8px; border-radius: 3px; letter-spacing: 0.04em;
}
.fh-pc-feat-new-badge {
position: absolute; top: 10px; left: 10px;
background: var(--fh-accent);
color: #fff;
font-family: var(--fh-sans); font-size: 9px; font-weight: 800;
letter-spacing: 0.14em; text-transform: uppercase;
padding: 3px 7px; border-radius: 2px;
}
.fh-pc-feat-body {
flex: 1; padding: 28px 28px 28px 24px;
display: flex; flex-direction: column;
}
.fh-pc-feat-ep {
font-family: var(--fh-sans); font-size: 10.5px; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--fh-accent); margin-bottom: 12px;
}
.fh-pc-feat-title {
font-family: var(--fh-display);
font-size: clamp(18px, 1.8vw, 26px);
font-weight: 700; line-height: 1.18; letter-spacing: -0.01em;
color: #F0EBE3; margin: 0 0 12px;
}
.fh-pc-feat-title a { color: inherit; text-decoration: none; }
.fh-pc-feat-title a:hover { color: #fff; }
.fh-pc-feat-title.fh-mm { font-family: 'Yati Sans',serif; font-size: clamp(15px,1.6vw,21px); letter-spacing: 0; line-height: 1.65; }
.fh-pc-feat-exc {
font-family: var(--fh-serif); font-size: 14px; line-height: 1.65;
color: rgba(255,255,255,0.45); margin: 0 0 14px; flex: 1;
}
.fh-pc-feat-date {
font-family: var(--fh-sans); font-size: 11.5px;
color: rgba(255,255,255,0.25); margin-bottom: 20px;
}
.fh-pc-feat-btns { display: flex; flex-wrap: wrap; gap: 8px; }
/* Platform buttons */
.fh-pc-plat {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--fh-sans); font-size: 12px; font-weight: 700;
padding: 7px 14px; border-radius: 20px;
text-decoration: none; transition: .15s;
}
.fh-pc-plat svg { width: 14px; height: 14px; flex-shrink: 0; }
.fh-pc-plat--spotify { background: #1ED760; color: #000; }
.fh-pc-plat--spotify:hover { background: #1FE870; }
.fh-pc-plat--apple { background: #FC3C44; color: #fff; }
.fh-pc-plat--apple:hover { background: #FF4D55; }
.fh-pc-plat--yt { background: #FF0000; color: #fff; }
.fh-pc-plat--yt:hover { opacity: 0.88; }
.fh-pc-plat--listen { background: rgba(247,103,0,0.15); color: var(--fh-accent); border: 1px solid rgba(247,103,0,0.3); }
.fh-pc-plat--listen:hover { background: var(--fh-accent); color: #fff; }
/* Episode list (right column) */
.fh-pc-list {
display: flex; flex-direction: column;
background: #0E0C0B;
}
.fh-pc-list-header {
font-family: var(--fh-sans); font-size: 9.5px; font-weight: 800;
letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(255,255,255,0.25);
padding: 18px 20px 12px;
border-bottom: 1px solid #1C1916;
}
.fh-pc-row {
display: flex; align-items: center; gap: 14px;
padding: 14px 20px;
border-bottom: 1px solid #161311;
text-decoration: none;
transition: background .12s;
flex: 1;
}
.fh-pc-row:last-child { border-bottom: none; }
.fh-pc-row:hover { background: #181513; }
.fh-pc-row-art {
width: 48px; height: 48px; border-radius: 4px;
overflow: hidden; flex-shrink: 0;
background: #251F18;
}
.fh-pc-row-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fh-pc-row-art-ph { width: 100%; height: 100%; background: linear-gradient(135deg,#251F18,#0E0C0B); }
.fh-pc-row-info { flex: 1; min-width: 0; }
.fh-pc-row-ep {
font-family: var(--fh-sans); font-size: 10px; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--fh-accent); margin-bottom: 4px;
}
.fh-pc-row-title {
font-family: var(--fh-sans); font-size: 13px; font-weight: 600;
color: rgba(255,255,255,0.75); line-height: 1.3;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
transition: color .12s;
}
.fh-pc-row:hover .fh-pc-row-title { color: #fff; }
.fh-pc-row-title.fh-mm { font-family: 'Yati Sans',sans-serif; font-size: 12px; white-space: normal; line-height: 1.5; }
.fh-pc-row-right {
display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.fh-pc-row-dur {
font-family: var(--fh-sans); font-size: 11px;
color: rgba(255,255,255,0.3); white-space: nowrap;
}
.fh-pc-row-dot { color: rgba(255,255,255,0.15); }
.fh-pc-row-plat { width: 14px; height: 14px; }
.fh-pc-row-plat--spotify { color: #1ED760; }
.fh-pc-row-plat--apple { color: #FC3C44; }
.fh-pc-row-arrow {
width: 14px; height: 14px;
stroke: rgba(255,255,255,0.2);
transition: stroke .12s;
}
.fh-pc-row:hover .fh-pc-row-arrow { stroke: rgba(255,255,255,0.6); }
@media (max-width: 960px) {
.fh-pc-layout { grid-template-columns: 1fr; }
.fh-pc-feat-art { width: 160px; min-width: 160px; }
}
@media (max-width: 600px) {
.fh-pc-featured { flex-direction: column; }
.fh-pc-feat-art { width: 100%; height: 220px; min-width: 0; }
}
/* ══════════════════════════════════════
MAGAZINE COVERS — Portrait (A4-ish)
Override cover display to portrait ratio
══════════════════════════════════════ */
.fh-mag-cover-wrap {
position: relative;
/* A4-ish portrait ratio: width 200px, height 283px → 1:1.414 */
width: 200px;
flex-shrink: 0;
}
.fh-mag-cover {
width: 100%;
aspect-ratio: 3 / 4.24; /* ≈ A4 ratio */
object-fit: cover;
display: block;
border-radius: 3px 4px 4px 3px; /* subtle left-binding edge */
box-shadow:
-2px 0 4px rgba(0,0,0,0.15), /* spine shadow */
4px 6px 20px rgba(0,0,0,0.22), /* drop shadow */
1px 1px 0 rgba(255,255,255,0.06) inset;
transition: transform .3s, box-shadow .3s;
}
.fh-mag-cover-wrap:hover .fh-mag-cover {
transform: translateY(-5px) rotate(-0.8deg);
box-shadow: -3px 2px 6px rgba(0,0,0,0.2), 8px 14px 32px rgba(0,0,0,0.3);
}
.fh-mag-cover-placeholder {
width: 100%;
aspect-ratio: 3 / 4.24;
background: linear-gradient(155deg, var(--fh-charcoal) 0%, #3A2A1A 100%);
border-radius: 3px 4px 4px 3px;
display: flex; align-items: center; justify-content: center;
padding: 20px;
}
/* Back issue thumbs also portrait */
.fh-mag-back-thumb {
width: 44px;
height: 62px; /* A4 ratio */
object-fit: cover;
border-radius: 2px;
flex-shrink: 0;
box-shadow: 1px 2px 6px rgba(0,0,0,0.2);
}
/* ══════════════════════════════════════
AUTHOR LOWER-THIRD — Science News style
Avatar left, Name + Role inline, bio below
══════════════════════════════════════ */
.fh-author-lt {
margin-top: 48px;
padding-top: 20px;
border-top: 1.5px solid var(--fh-rule);
}
.fh-alt-inner {
display: flex;
gap: 16px;
align-items: flex-start;
background: var(--fh-white);
border: 1px solid var(--fh-rule);
border-radius: 8px;
padding: 20px 24px;
}
/* Avatar */
.fh-alt-avatar-wrap { flex-shrink: 0; display: block; text-decoration: none; }
.fh-alt-avatar {
width: 52px; height: 52px; border-radius: 50%;
object-fit: cover; display: block;
border: 2px solid var(--fh-white);
box-shadow: 0 0 0 1.5px var(--fh-rule);
transition: box-shadow .2s;
}
.fh-alt-avatar-wrap:hover .fh-alt-avatar { box-shadow: 0 0 0 2px var(--fh-accent); }
.fh-alt-avatar--init {
width: 52px; height: 52px; border-radius: 50%;
background: linear-gradient(135deg, var(--fh-charcoal), #3A3A3A);
display: flex; align-items: center; justify-content: center;
font-family: var(--fh-display); font-size: 20px; font-weight: 700; color: #fff;
}
/* Body */
.fh-alt-body { flex: 1; min-width: 0; }
.fh-alt-headline {
display: flex; align-items: baseline;
gap: 8px; flex-wrap: wrap; margin-bottom: 4px;
}
.fh-alt-name {
font-family: var(--fh-sans); font-size: 14.5px; font-weight: 700;
color: var(--fh-charcoal); text-decoration: none;
transition: color .15s;
}
.fh-alt-name:hover { color: var(--fh-accent); }
.fh-alt-role {
font-family: var(--fh-sans); font-size: 13px; font-weight: 400;
color: var(--fh-quiet);
}
.fh-alt-count {
font-family: var(--fh-sans); font-size: 11px; font-weight: 600;
color: var(--fh-quiet); text-decoration: none;
border: 1px solid var(--fh-rule); padding: 1px 7px; border-radius: 10px;
transition: border-color .15s, color .15s; margin-left: auto;
}
.fh-alt-count:hover { border-color: var(--fh-accent); color: var(--fh-accent); }
/* Social icons */
.fh-alt-social {
display: flex; gap: 6px; margin-bottom: 10px;
}
.fh-alt-soc {
width: 26px; height: 26px; border-radius: 50%;
background: var(--fh-bg-alt); border: 1px solid var(--fh-rule);
display: flex; align-items: center; justify-content: center;
color: var(--fh-mid); text-decoration: none;
transition: background .15s, color .15s;
}
.fh-alt-soc svg { width: 13px; height: 13px; }
.fh-alt-soc:hover { background: var(--fh-charcoal); color: #fff; border-color: var(--fh-charcoal); }
/* Bio */
.fh-alt-bio {
font-family: var(--fh-serif); font-size: 14.5px; line-height: 1.68;
color: var(--fh-mid); margin: 0;
}
@media (max-width: 480px) {
.fh-alt-inner { flex-direction: row; gap: 12px; }
.fh-alt-count { display: none; }
}
/* Hide old author card class */
.fh-author-bio, .fh-author-card { display: none; }
/* ═══════════════════════════════════════════════════
v3.5.1 — Button visibility hotfix
Force solid backgrounds on all CTA buttons
regardless of container/variable context
═══════════════════════════════════════════════════ */
/* Magazine "View Issue / Download" — solid orange */
.fh-magazine-shelf .fh-mag-btn--primary,
.fh-mag-btn--primary {
background: var(--fh-accent, #F76700) !important;
color: #fff !important;
border: none !important;
opacity: 1 !important;
}
.fh-magazine-shelf .fh-mag-btn--primary:hover,
.fh-mag-btn--primary:hover {
background: #D95500 !important;
color: #fff !important;
}
/* Magazine "Read Online" — charcoal outline, always visible */
.fh-magazine-shelf .fh-mag-btn--secondary,
.fh-mag-btn--secondary {
background: transparent !important;
color: var(--fh-charcoal, #181818) !important;
border: 1.5px solid var(--fh-charcoal, #181818) !important;
opacity: 1 !important;
}
.fh-magazine-shelf .fh-mag-btn--secondary:hover,
.fh-mag-btn--secondary:hover {
background: var(--fh-charcoal, #181818) !important;
color: #fff !important;
}
/* Podcast "Listen Now" — solid orange, always visible on dark bg */
.fh-podcast-strip .fh-pc-plat--listen,
.fh-pc-plat--listen {
background: var(--fh-accent, #F76700) !important;
color: #fff !important;
border: none !important;
opacity: 1 !important;
}
.fh-podcast-strip .fh-pc-plat--listen:hover,
.fh-pc-plat--listen:hover {
background: #D95500 !important;
color: #fff !important;
border: none !important;
}
/* All hero CTAs — always solid orange */
.fh-hero-cta,
.fh-hero-cta--orange {
background: var(--fh-accent, #F76700) !important;
color: #fff !important;
border: none !important;
opacity: 1 !important;
}
.fh-hero-cta:hover,
.fh-hero-cta--orange:hover {
background: #D95500 !important;
}
/* ═══════════════════════════════════════════════════
v3.5.2 — Featured Takeover: centered block + orange CTA
═══════════════════════════════════════════════════ */
/* Center the content block within the full-bleed section */
.fh-featured-takeover {
justify-content: center !important;
}
.fh-ft-inner {
max-width: 780px !important;
width: 100% !important;
text-align: center !important;
padding: 72px 40px !important;
margin: 0 auto !important;
}
.fh-ft-kicker {
justify-content: center !important;
}
.fh-ft-subtitle {
margin-left: auto !important;
margin-right: auto !important;
}
.fh-ft-footer {
justify-content: center !important;
}
/* CTA — solid orange, always visible */
.fh-ft-cta {
background: var(--fh-accent, #F76700) !important;
color: #fff !important;
border: none !important;
padding: 12px 28px !important;
border-radius: 3px !important;
font-weight: 700 !important;
font-size: 13.5px !important;
letter-spacing: 0.04em !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
text-decoration: none !important;
transition: background .15s, gap .15s !important;
opacity: 1 !important;
}
.fh-ft-cta:hover {
background: #D95500 !important;
border: none !important;
gap: 13px !important;
}
/* ═══════════════════════════════════════════════════
v3.5.4 — Categories dropdown (topbar)
Archives accordion (footer)
═══════════════════════════════════════════════════ */
/* ── Topbar layout fix — room for cats dropdown ── */
#fh-topbar .fh-wrap { position: relative; }
.fh-topbar-r {
display: flex;
align-items: center;
gap: 16px;
}
/* ── Categories dropdown — anchored to .fh-wrap so it spans full width ── */
.fh-topbar-cats { position: static; }
.fh-topbar-cats-btn {
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--fh-sans); font-size: 11.5px; font-weight: 700;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--fh-charcoal);
background: none; border: none; cursor: pointer; padding: 4px 0;
transition: color .15s;
}
.fh-topbar-cats-btn:hover { color: var(--fh-accent); }
.fh-topbar-cats-btn svg {
width: 13px; height: 13px; flex-shrink: 0;
transition: transform .2s ease;
}
.fh-topbar-cats.fh-cats--open .fh-topbar-cats-btn { color: var(--fh-accent); }
.fh-topbar-cats.fh-cats--open .fh-topbar-cats-btn svg { transform: rotate(180deg); }
/* Hidden by default — JS adds/removes class fh-cats--open to show/hide */
.fh-cats-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
width: 100%;
background: #fff;
border: none;
border-top: 2px solid var(--fh-rule);
border-bottom: 3px solid var(--fh-accent);
border-radius: 0;
box-shadow: 0 16px 40px rgba(0,0,0,0.13);
z-index: 9999;
padding: 24px;
display: none;
grid-template-columns: repeat(3, 1fr);
gap: 2px 16px;
animation: fh-dd-in .15s ease;
}
.fh-cats--open .fh-cats-dropdown {
display: grid;
}
@keyframes fh-dd-in {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.fh-cats-dd-item {
display: flex; align-items: center; justify-content: space-between;
gap: 8px;
padding: 7px 10px;
font-family: var(--fh-sans); font-size: 12.5px; color: var(--fh-charcoal);
text-decoration: none;
border-left: 2px solid transparent;
transition: background .1s, color .1s, border-color .1s;
}
.fh-cats-dd-item:hover {
background: var(--fh-bg-alt);
color: var(--fh-accent);
border-left-color: var(--fh-accent);
}
.fh-cats-dd-name {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fh-cats-dd-count {
font-size: 10px; font-weight: 600;
color: var(--fh-quiet);
background: var(--fh-bg-alt);
border-radius: 10px; padding: 1px 6px;
flex-shrink: 0;
transition: background .1s, color .1s;
}
.fh-cats-dd-item:hover .fh-cats-dd-count {
background: rgba(217,95,14,0.1);
color: var(--fh-accent);
}
/* ── Archives accordion (footer) ── */
.fh-footer-grid {
grid-template-columns: 2fr 1fr 1fr 1fr 1fr !important;
}
.fh-arch-toggle {
display: flex; align-items: center; justify-content: space-between;
width: 100%;
background: none; border: none; cursor: pointer; padding: 0;
font-family: var(--fh-sans); font-size: 11px; font-weight: 800;
letter-spacing: 0.12em; text-transform: uppercase;
color: #fff; margin-bottom: 16px;
transition: color .15s;
}
.fh-arch-toggle:hover { color: var(--fh-accent); }
.fh-arch-chevron {
width: 14px; height: 14px;
transition: transform .2s ease;
}
.fh-arch-toggle.fh-arch--open .fh-arch-chevron { transform: rotate(180deg); }
.fh-arch-list {
list-style: none; padding: 0; margin: 0;
animation: fh-arch-in .18s ease;
}
@keyframes fh-arch-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.fh-arch-list li { margin-bottom: 0; }
.fh-arch-list li a,
.fh-arch-list a {
display: flex; align-items: center; justify-content: space-between;
font-family: var(--fh-sans); font-size: 12.5px;
color: rgba(255,255,255,0.55);
padding: 5px 0;
border-bottom: 1px solid rgba(255,255,255,0.06);
text-decoration: none; transition: color .12s;
}
.fh-arch-list li:last-child a { border-bottom: none; }
.fh-arch-list li a:hover,
.fh-arch-list a:hover { color: #fff; }
/* post count from wp_get_archives */
.fh-arch-list li a .post-count,
.fh-arch-list a .post-count { /* WordPress adds this */
font-size: 10px;
color: rgba(255,255,255,0.28);
}
@media (max-width: 960px) {
.fh-footer-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 560px) {
.fh-footer-grid { grid-template-columns: 1fr !important; }
.fh-cats--open .fh-cats-dropdown { grid-template-columns: repeat(2, 1fr); }
}
/* ═══════════════════════════════════════════════════
v3.5.5 — Logo sizing fix + footer logo
═══════════════════════════════════════════════════ */
/* Header logo image — size controlled via customizer CSS variable */
.fh-header-inner .fh-logo-img {
display: block;
max-height: 44px; /* default; overridden by customizer */
height: auto !important;
width: auto !important;
max-width: 240px; /* prevent ultra-wide logos overflowing */
object-fit: contain;
flex-shrink: 0;
}
/* Remove WordPress custom-logo wrapper constraints */
.fh-header-inner .custom-logo-link,
.fh-header-inner .custom-logo-link img {
max-height: inherit;
width: auto;
height: auto;
}
/* Footer logo image */
.fh-footer-logo-img {
display: block;
max-height: 40px; /* default; overridden by customizer */
height: auto !important;
width: auto !important;
max-width: 200px;
object-fit: contain;
margin-bottom: 12px;
}
/* Footer brand block layout */
.fh-footer-brand .fh-logo {
display: inline-flex;
flex-direction: column;
margin-bottom: 14px;
}
/* White wordmark fallback in footer */
.fh-footer-brand .fh-logo-mark {
color: #fff !important;
}
/* ═══════════════════════════════════════════════════════
v3.6 — Full feature CSS
Dark mode · Font adjuster · Correction banner
Peer review badge · Series navigator
OTD widget · Inline newsletter · Donation banner
Related articles grid · Header icons
═══════════════════════════════════════════════════════ */
/* ── Dark mode icon state ── */
--fh-bg: #111009;
--fh-bg-alt: #1A1814;
--fh-white: #1E1C18;
--fh-charcoal: #F0EBE3;
--fh-ink: #E8E3DB;
--fh-mid: #A8A098;
--fh-quiet: #706860;
--fh-rule: rgba(255,255,255,0.07);
--fh-rule-strong: rgba(255,255,255,0.14);
}
FONT SIZE ADJUSTER
.fh-font-adjuster {
display: flex; align-items: center; gap: 4px;
margin-bottom: 20px;
padding: 8px 14px;
background: var(--fh-bg-alt);
border-radius: 6px;
width: fit-content;
}
.fh-fa-label {
font-family: var(--fh-sans); font-size: 11px; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--fh-quiet); margin-right: 4px;
}
.fh-fa-btn {
width: 32px; height: 28px; border-radius: 4px;
background: var(--fh-white); border: 1px solid var(--fh-rule);
font-family: var(--fh-sans); font-size: 12px; font-weight: 700;
color: var(--fh-mid); cursor: pointer;
transition: background .12s, color .12s, border-color .12s;
display: flex; align-items: center; justify-content: center;
}
.fh-fa-btn:hover:not(:disabled) { background: var(--fh-charcoal); color: #fff; border-color: var(--fh-charcoal); }
.fh-fa-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.fh-fa-reset--active { color: var(--fh-accent) !important; border-color: var(--fh-accent) !important; }
CORRECTION BANNER
.fh-series-nav {
border: 1.5px solid var(--fh-rule-strong);
border-radius: 8px; overflow: hidden;
margin-bottom: 28px;
background: var(--fh-bg-alt);
}
.fh-sn-header {
display: flex; align-items: center; gap: 10px;
padding: 14px 20px;
background: var(--fh-charcoal);
border-bottom: 1px solid var(--fh-rule);
}
.fh-sn-eyebrow {
font-family: var(--fh-sans); font-size: 9.5px; font-weight: 800;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--fh-accent);
}
.fh-sn-title {
font-family: var(--fh-sans); font-size: 13.5px; font-weight: 700;
color: var(--fh-ink); margin: 0;
}
.fh-sn-count {
font-family: var(--fh-sans); font-size: 10.5px; color: var(--fh-quiet);
margin-left: auto; white-space: nowrap;
}
.fh-sn-list {
list-style: none; padding: 0; margin: 0;
}
.fh-sn-item {
display: flex; align-items: center; gap: 14px;
padding: 11px 20px;
border-bottom: 1px solid var(--fh-rule);
}
.fh-sn-item:last-child { border-bottom: none; }
.fh-sn-item--active { background: rgba(247,103,0,0.05); }
.fh-sn-num {
font-family: var(--fh-display); font-size: 15px; font-weight: 700;
color: var(--fh-accent); min-width: 22px; flex-shrink: 0;
}
.fh-sn-name {
font-family: var(--fh-sans); font-size: 13px; color: var(--fh-mid);
text-decoration: none; transition: color .12s; flex: 1;
}
.fh-sn-name:hover { color: var(--fh-accent); }
.fh-sn-item--active .fh-sn-name { color: var(--fh-charcoal); font-weight: 600; }
.fh-sn-curr {
font-family: var(--fh-sans); font-size: 10px; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--fh-accent); background: rgba(247,103,0,0.12);
padding: 2px 8px; border-radius: 10px; flex-shrink: 0;
}
ON THIS DAY WIDGET
.fh-otd-widget {
margin-top: 24px;
background: var(--fh-bg);
border: 1.5px solid var(--fh-rule);
border-radius: 8px; overflow: hidden;
}
.fh-otd-header {
background: var(--fh-charcoal);
padding: 14px 18px;
border-bottom: 1px solid var(--fh-rule);
}
.fh-otd-date {
display: block; font-family: var(--fh-sans); font-size: 9.5px; font-weight: 800;
letter-spacing: 0.16em; text-transform: uppercase; color: var(--fh-accent);
margin-bottom: 4px;
}
.fh-otd-title {
font-family: var(--fh-sans); font-size: 12px; font-weight: 700;
color: var(--fh-ink); margin: 0;
}
.fh-otd-list { padding: 6px 0; }
.fh-otd-item {
display: flex; gap: 12px; padding: 10px 18px;
border-bottom: 1px solid var(--fh-rule);
}
.fh-otd-item:last-child { border-bottom: none; }
.fh-otd-img {
width: 44px; height: 44px; border-radius: 4px; flex-shrink: 0;
background-size: cover; background-position: center;
background-color: var(--fh-bg-alt);
}
.fh-otd-body { flex: 1; }
.fh-otd-year {
font-family: var(--fh-display); font-size: 18px; font-weight: 700;
color: var(--fh-accent); display: block; line-height: 1; margin-bottom: 3px;
}
.fh-otd-text {
font-family: var(--fh-sans); font-size: 12.5px; line-height: 1.5;
color: var(--fh-mid); margin: 0 0 4px;
}
.fh-otd-more {
font-family: var(--fh-sans); font-size: 11px; font-weight: 600;
color: var(--fh-accent); text-decoration: none;
}
.fh-otd-more:hover { text-decoration: underline; }
INLINE NEWSLETTER
.fh-inline-nl {
margin: 40px 0;
border-radius: 10px;
overflow: hidden;
background: linear-gradient(135deg, var(--fh-charcoal) 0%, #2A2010 100%);
padding: 32px 36px;
}
.fh-inl-inner {
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: center;
}
.fh-inl-eyebrow {
display: block; font-family: var(--fh-sans); font-size: 9.5px; font-weight: 800;
letter-spacing: 0.2em; text-transform: uppercase; color: var(--fh-accent);
margin-bottom: 8px;
}
.fh-inl-headline {
font-family: 'Yati Sans', var(--fh-display); font-size: clamp(16px,2vw,22px);
font-weight: 700; line-height: 1.3; color: #F0EBE3;
margin: 0 0 6px;
}
.fh-inl-sub {
font-family: var(--fh-sans); font-size: 13px; color: rgba(255,255,255,0.5);
margin: 0;
}
.fh-inl-form { flex-shrink: 0; }
.fh-inl-fields {
display: flex; gap: 0; border-radius: 4px; overflow: hidden;
border: 1px solid rgba(255,255,255,0.15);
}
.fh-inl-fields input {
flex: 1; padding: 11px 16px;
background: rgba(255,255,255,0.08); border: none;
font-family: var(--fh-sans); font-size: 13px; color: #fff;
outline: none; min-width: 200px;
}
.fh-inl-fields input::placeholder { color: rgba(255,255,255,0.35); }
.fh-inl-fields button {
padding: 11px 20px; background: var(--fh-accent); border: none;
font-family: var(--fh-sans); font-size: 13px; font-weight: 700;
color: #fff; cursor: pointer; white-space: nowrap;
transition: background .15s;
}
.fh-inl-fields button:hover { background: var(--fh-accent-dk, #D95500); }
@media (max-width: 660px) {
.fh-inl-inner { grid-template-columns: 1fr; }
.fh-inl-fields input { min-width: 0; }
.fh-inline-nl { padding: 24px 20px; }
}
DONATION BANNER
.fh-donation-banner {
background: var(--fh-charcoal, #181818);
padding: 14px 0;
position: relative;
overflow: hidden;
}
.fh-dn-inner {
display: flex; align-items: center; gap: 18px;
}
.fh-dn-icon {
width: 22px; height: 22px; flex-shrink: 0;
stroke: var(--fh-accent); fill: rgba(247,103,0,0.12);
}
.fh-dn-text {
flex: 1; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.fh-dn-text strong {
font-family: var(--fh-sans); font-size: 14px; font-weight: 700; color: #fff;
}
.fh-dn-text span {
font-family: var(--fh-sans); font-size: 13px; color: rgba(255,255,255,0.55);
}
.fh-dn-btn {
flex-shrink: 0;
display: inline-flex; align-items: center;
background: var(--fh-accent); color: #fff;
font-family: var(--fh-sans); font-size: 12.5px; font-weight: 700;
padding: 8px 20px; border-radius: 3px;
text-decoration: none; transition: background .15s; white-space: nowrap;
}
.fh-dn-btn:hover { background: #D95500; color: #fff; }
.fh-dn-close {
width: 28px; height: 28px; flex-shrink: 0;
background: none; border: none; cursor: pointer;
color: rgba(255,255,255,0.35); transition: color .12s;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
}
.fh-dn-close svg { width: 14px; height: 14px; }
.fh-dn-close:hover { color: #fff; background: rgba(255,255,255,0.08); }
@media (max-width: 640px) {
.fh-dn-text { flex-direction: column; gap: 2px; }
}
RELATED ARTICLES GRID
.fh-related-section { background: var(--fh-bg-alt) !important; }
.fh-related-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
@media (max-width: 960px) { .fh-related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fh-related-grid { grid-template-columns: 1fr; } }
PROGRESS BAR — enforce visibility
#fh-progress {
position: fixed; top: 0; left: 0; z-index: 99999;
height: 3px; width: 0%;
background: linear-gradient(90deg, var(--fh-accent), #FF8820);
transition: width .1s linear;
pointer-events: none;
display: block !important;
box-shadow: 0 0 8px rgba(247,103,0,0.45);
}
/* ═══════════════════════════════════════════════════════════════
v3.6 — Dark Mode · Reading Progress · Font Adjuster ·
Read Time on Cards · Correction Banner ·
Peer Review Badge · Series Nav · Inline Newsletter ·
Donation Banner · On This Day · Related (smart) ·
COMPREHENSIVE MOBILE RESPONSIVE
═══════════════════════════════════════════════════════════════ */
/* ── Font Size Adjuster ─────────────────────────────────────── */
.fh-font-adjuster {
display: flex; align-items: center; gap: 4px;
margin-bottom: 20px;
}
.fh-fa-label {
font-family: var(--fh-sans); font-size: 11px; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--fh-quiet); margin-right: 6px;
}
.fh-fa-btn {
background: var(--fh-bg-alt); border: 1px solid var(--fh-rule-strong);
color: var(--fh-mid); cursor: pointer;
width: 30px; height: 30px; border-radius: 4px;
font-family: var(--fh-sans); font-size: 12px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
transition: background .12s, color .12s;
}
.fh-fa-btn:hover { background: var(--fh-charcoal); color: #fff; }
.fh-fa-reset { font-size: 11px; }
/* Font size classes applied to article body */
.fh-article-body.fh-fs-sm { font-size: 16px !important; }
.fh-article-body.fh-fs-md { font-size: 18.5px !important; } /* default */
.fh-article-body.fh-fs-lg { font-size: 21px !important; }
.fh-article-body.fh-fs-xl { font-size: 24px !important; }
/* ── Read Time badge on cards ───────────────────────────────── */
.fh-card-meta-bot .fh-read-time {
display: inline-flex; align-items: center; gap: 3px;
font-size: 11px; color: var(--fh-quiet);
}
/* ── Peer Review Badge ──────────────────────────────────────── */
.fh-review-badge {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(24,120,48,0.07);
border: 1px solid rgba(24,120,48,0.25);
border-radius: 20px;
padding: 5px 12px 5px 8px;
margin-bottom: 16px;
font-family: var(--fh-sans); font-size: 12px; font-weight: 700;
color: #187830; letter-spacing: 0.02em;
cursor: default;
}
.fh-review-badge svg { width: 13px; height: 13px; stroke: currentColor; }
/* ── Series Navigator ───────────────────────────────────────── */
.fh-series-nav {
margin: 32px 0;
border: 1.5px solid var(--fh-rule-strong);
border-radius: 8px;
overflow: hidden;
}
.fh-series-header {
display: flex; align-items: center; gap: 10px;
background: var(--fh-bg-alt); padding: 12px 18px;
border-bottom: 1px solid var(--fh-rule);
}
.fh-series-label {
font-family: var(--fh-sans); font-size: 9.5px; font-weight: 800;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--fh-accent); background: rgba(247,103,0,0.1);
padding: 2px 8px; border-radius: 10px;
}
.fh-series-name {
font-family: var(--fh-sans); font-size: 13.5px; font-weight: 700;
color: var(--fh-charcoal); flex: 1;
}
.fh-series-count {
font-family: var(--fh-sans); font-size: 11px; color: var(--fh-quiet);
}
.fh-series-links { display: flex; flex-direction: column; }
.fh-series-link {
display: flex; align-items: center; gap: 12px;
padding: 13px 18px; border-bottom: 1px solid var(--fh-rule);
text-decoration: none; transition: background .12s;
}
.fh-series-link:last-child { border-bottom: none; }
.fh-series-link:hover { background: var(--fh-bg-alt); }
.fh-series-link-pt {
font-family: var(--fh-sans); font-size: 10.5px; font-weight: 700;
letter-spacing: 0.08em; color: var(--fh-accent);
min-width: 46px; flex-shrink: 0;
}
.fh-series-link-title {
font-family: var(--fh-serif); font-size: 14px;
color: var(--fh-charcoal); flex: 1; line-height: 1.4;
}
.fh-series-link-title.fh-mm { font-family: 'Yati Sans',sans-serif; font-size: 13px; line-height: 1.6; }
.fh-series-link svg { width: 14px; height: 14px; flex-shrink: 0; stroke: var(--fh-quiet); }
/* ── Inline Newsletter ──────────────────────────────────────── */
.fh-inl-nl {
margin: 32px 0;
background: var(--fh-bg-alt);
border: 1.5px solid var(--fh-rule-strong);
border-radius: 8px;
padding: 20px 22px;
}
.fh-inl-nl-inner {
display: flex; align-items: center; gap: 16px;
}
.fh-inl-nl-icon { width: 28px; height: 28px; flex-shrink: 0; stroke: var(--fh-accent); }
.fh-inl-nl-body { flex: 1; min-width: 0; }
.fh-inl-nl-hed {
font-family: 'Yati Sans',sans-serif; font-size: 14px; line-height: 1.6;
color: var(--fh-charcoal); margin: 0 0 10px; font-weight: 600;
}
.fh-inl-nl-form {
display: flex; gap: 8px; flex-wrap: wrap;
}
.fh-inl-nl-form input {
flex: 1; min-width: 180px; padding: 8px 12px;
border: 1px solid var(--fh-rule-strong); border-radius: 4px;
font-family: var(--fh-sans); font-size: 13px; background: var(--fh-white);
color: var(--fh-ink);
}
.fh-inl-nl-form button {
background: var(--fh-accent); color: #fff; border: none;
padding: 8px 18px; border-radius: 4px; cursor: pointer;
font-family: var(--fh-sans); font-size: 13px; font-weight: 700;
transition: background .15s; white-space: nowrap;
}
.fh-inl-nl-form button:hover { background: var(--fh-accent-dk); }
@media (max-width: 520px) {
.fh-inl-nl-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
.fh-inl-nl-form { flex-direction: column; }
.fh-inl-nl-form input { min-width: 0; width: 100%; }
.fh-inl-nl-form button { width: 100%; }
}
/* old donate banner block removed — see v3.7.1 */
/* Inline donation strip (end of article) */
.fh-donate-inline {
margin: 28px 0;
background: var(--fh-bg-alt);
border-radius: 8px; padding: 16px 20px;
display: flex; align-items: center; gap: 14px;
border: 1px solid var(--fh-rule-strong);
}
.fh-di-heart { width: 18px; height: 18px; color: var(--fh-accent); flex-shrink: 0; }
.fh-di-msg {
flex: 1; font-family: var(--fh-sans); font-size: 13px;
color: var(--fh-mid); margin: 0; line-height: 1.55;
}
.fh-di-btn {
background: var(--fh-accent); color: #fff;
font-family: var(--fh-sans); font-size: 12px; font-weight: 700;
padding: 7px 16px; border-radius: 3px; text-decoration: none;
white-space: nowrap; flex-shrink: 0; transition: background .15s;
}
.fh-di-btn:hover { background: #D95500; }
@media (max-width: 520px) {
.fh-donate-inline { flex-direction: column; align-items: flex-start; gap: 10px; }
.fh-di-btn { width: 100%; text-align: center; }
}
/* ── On This Day Widget ─────────────────────────────────────── */
.fh-otd {
border: 1px solid var(--fh-rule);
border-radius: 8px; overflow: hidden; margin: 20px 0;
}
.fh-otd-header {
display: flex; align-items: center; gap: 8px;
background: var(--fh-charcoal); color: var(--fh-white);
padding: 10px 14px;
font-family: var(--fh-sans); font-size: 11.5px; font-weight: 700;
letter-spacing: 0.06em;
}
.fh-otd-header svg { width: 14px; height: 14px; stroke: currentColor; }
.fh-otd-list { display: flex; flex-direction: column; }
.fh-otd-item {
display: flex; align-items: center; gap: 12px;
padding: 10px 14px; border-bottom: 1px solid var(--fh-rule);
text-decoration: none; transition: background .1s;
}
.fh-otd-item:last-child { border-bottom: none; }
.fh-otd-item:hover { background: var(--fh-bg-alt); }
.fh-otd-thumb {
width: 48px; height: 48px; border-radius: 4px;
object-fit: cover; flex-shrink: 0;
}
.fh-otd-info { flex: 1; min-width: 0; }
.fh-otd-year {
display: block; font-family: var(--fh-sans); font-size: 10px;
font-weight: 800; color: var(--fh-accent); letter-spacing: 0.08em;
margin-bottom: 2px;
}
.fh-otd-title {
font-family: var(--fh-sans); font-size: 13px; color: var(--fh-charcoal);
line-height: 1.3; display: block;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fh-otd-title.fh-mm { font-family: 'Yati Sans',sans-serif; font-size: 12px; line-height: 1.6; white-space: normal; }
/* ── Related Articles (smart redesign) ─────────────────────── */
.fh-related { margin-top: 40px; padding-top: 24px; border-top: 1.5px solid var(--fh-rule); }
.fh-related-header {
display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
}
.fh-related-header span {
font-family: var(--fh-sans); font-size: 10px; font-weight: 800;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--fh-quiet);
}
.fh-related-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.fh-related-card {
display: flex; flex-direction: column;
text-decoration: none; border-radius: 6px; overflow: hidden;
background: var(--fh-white); border: 1px solid var(--fh-rule);
transition: box-shadow .2s, transform .2s;
}
.fh-related-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.1); transform: translateY(-2px); }
.fh-related-img {
aspect-ratio: 16/9; background-image: var(--rel-img);
background-size: cover; background-position: center;
transition: transform .4s;
}
.fh-related-img--empty { background: var(--fh-bg-alt); }
.fh-related-card:hover .fh-related-img { transform: scale(1.03); }
.fh-related-body { padding: 14px; flex: 1; display: flex; flex-direction: column; }
.fh-related-cat {
font-family: var(--fh-sans); font-size: 10px; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--fh-accent); margin-bottom: 6px; display: block;
}
.fh-related-title {
font-family: var(--fh-serif); font-size: 15px; font-weight: 700;
line-height: 1.3; color: var(--fh-charcoal); margin: 0 0 8px; flex: 1;
}
.fh-related-title.fh-mm { font-family: 'Yati Sans',sans-serif; font-size: 13px; line-height: 1.65; }
.fh-related-date {
font-family: var(--fh-sans); font-size: 11px; color: var(--fh-quiet);
}
@media (max-width: 768px) { .fh-related-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .fh-related-grid { grid-template-columns: 1fr; } }
/* ═══════════════════════════════════════════════════════════════
COMPREHENSIVE MOBILE RESPONSIVE
Targeting all breakpoints systematically
═══════════════════════════════════════════════════════════════ */
/* ── Base spacing variables on mobile ── */
@media (max-width: 768px) {
:root { --fh-side-pad: 16px; }
.fh-wrap { padding: 0 var(--fh-side-pad); }
.fh-section { padding: 32px 0; }
}
/* ── Topbar ── */
@media (max-width: 768px) {
#fh-topbar .fh-wrap { padding: 0 14px; }
#fh-topbar .fh-topbar-l { display: none; }
.fh-topbar-r { width: 100%; justify-content: flex-end; }
.fh-topbar-cats-btn { font-size: 10.5px; }
}
/* ── Header & Nav ── */
@media (max-width: 768px) {
.fh-header-inner { height: 58px !important; padding: 0 14px; gap: 12px; }
.fh-logo-img { max-height: 36px !important; }
.fh-logo-mark { font-size: 21px; }
.fh-logo-sub { display: none; }
.fh-btn-cta { padding: 7px 14px; font-size: 12px; }
/* Mobile nav drawer */
#fh-nav.fh-open {
top: 58px;
padding: 16px 16px 24px;
max-height: calc(100vh - 58px);
overflow-y: auto;
}
#fh-nav.fh-open ul { gap: 0; }
#fh-nav.fh-open li a { padding: 12px 8px; font-size: 15px; border-bottom: 1px solid var(--fh-rule); }
}
@media (max-width: 480px) {
.fh-btn-cta { display: none; } /* hide CTA on tiny screens, save space */
.fh-hamburger { width: 32px; height: 32px; }
}
/* ── Hero sections ── */
@media (max-width: 768px) {
.fh-hero--fullbleed { min-height: 400px; }
.fh-hero-fb-inner--center { padding: 40px 20px; }
.fh-hero-headline--fb { font-size: clamp(24px, 6vw, 36px); }
.fh-hero-lede--fb { font-size: 15px; }
.fh-hero--split .fh-hero-grid { grid-template-columns: 1fr; }
.fh-hero-copy { padding: 36px 20px 28px; }
.fh-hero-image { min-height: 220px; }
}
@media (max-width: 480px) {
.fh-hero--fullbleed { min-height: 320px; }
.fh-featured-takeover { min-height: 380px; }
.fh-ft-inner { padding: 40px 20px !important; }
.fh-ft-title { font-size: clamp(22px, 6vw, 32px); }
.fh-ft-subtitle { font-size: 14px; }
.fh-ft-footer { flex-direction: column; align-items: center; gap: 12px; }
}
/* ── Section headers ── */
@media (max-width: 600px) {
.fh-section-head { flex-direction: column; align-items: flex-start; gap: 8px; }
.fh-sh-title { font-size: 18px; }
}
/* ── Editor's Choice ── */
@media (max-width: 768px) {
.fh-ec-layout { grid-template-columns: 1fr; }
.fh-ec-lead { min-height: 380px; }
.fh-ec-lead-title { font-size: clamp(20px, 5vw, 28px); }
.fh-ec-lead-body { padding: 24px 20px; }
}
@media (max-width: 560px) {
.fh-ec-card { flex-direction: column; }
.fh-ec-card-img-wrap { width: 100%; height: 180px; position: relative; }
.fh-ec-card-img { height: 100%; }
.fh-ec-card-body { padding: 16px; }
}
/* ── You May Like (scroll) ── */
@media (max-width: 600px) {
.fh-yml-scroll .fh-card { min-width: 240px; max-width: 240px; }
}
/* ── Podcast ── */
@media (max-width: 768px) {
.fh-pc-layout { grid-template-columns: 1fr; border-radius: 6px; }
.fh-pc-featured { flex-direction: row; }
.fh-pc-feat-art { width: 140px; min-width: 140px; height: auto; }
.fh-pc-feat-body { padding: 16px; }
.fh-pc-feat-title { font-size: 17px; }
.fh-pc-feat-exc { display: none; }
.fh-pc-list-header { padding: 12px 16px 8px; }
.fh-pc-row { padding: 10px 14px; }
}
@media (max-width: 480px) {
.fh-pc-featured { flex-direction: column; }
.fh-pc-feat-art { width: 100%; height: 200px; min-width: 0; }
.fh-pc-feat-body { padding: 16px 16px 20px; }
}
/* ── Magazine shelf ── */
@media (max-width: 768px) {
.fh-mag-shelf-grid { grid-template-columns: 1fr; }
.fh-mag-featured { grid-template-columns: 120px 1fr; gap: 16px; }
.fh-mag-cover-wrap { width: 120px; }
.fh-mag-back-issues { display: none; } /* hide back issues on mobile */
}
@media (max-width: 480px) {
.fh-mag-featured { grid-template-columns: 100px 1fr; gap: 12px; }
.fh-mag-cover-wrap { width: 100px; }
}
/* ── In-Depth / Master article ── */
@media (max-width: 768px) {
.fh-mh--image { min-height: 300px; }
.fh-mh--image .fh-mh-inner { padding: 28px 16px 40px; }
.fh-mh-title { font-size: clamp(22px, 6vw, 34px) !important; }
.fh-mh-deck { font-size: 16px; }
.fh-mbl-inner { padding: 10px 16px; flex-wrap: wrap; gap: 8px; }
.fh-master-body { padding: 24px 0 56px; }
.fh-mb-grid { padding: 0 16px !important; }
.fh-article-body { font-size: 17px !important; }
.fh-article-body h2 { font-size: 22px; }
.fh-article-body h3 { font-size: 19px; }
.fh-font-adjuster { margin-bottom: 16px; }
.fh-series-nav { margin: 20px 0; }
}
@media (max-width: 480px) {
.fh-mh-title { font-size: 22px !important; }
.fh-mb-grid { padding: 0 12px !important; }
.fh-toc-mobile summary { font-size: 13px; padding: 10px 14px; }
.fh-fa-btn { width: 28px; height: 28px; font-size: 11px; }
}
/* ── Author lower-third ── */
@media (max-width: 600px) {
.fh-alt-inner { padding: 14px 16px; gap: 12px; }
.fh-alt-avatar, .fh-alt-avatar--init { width: 42px; height: 42px; }
.fh-alt-name { font-size: 13.5px; }
.fh-alt-bio { font-size: 13.5px; }
}
/* ── Footer ── */
@media (max-width: 960px) {
.fh-footer-grid { grid-template-columns: 1fr 1fr 1fr !important; }
}
@media (max-width: 768px) {
.fh-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px; }
.fh-footer-brand { grid-column: 1 / -1; }
.fh-footer-social { margin-top: 12px; }
}
@media (max-width: 480px) {
.fh-footer-grid { grid-template-columns: 1fr !important; gap: 24px; }
.fh-footer-top { padding: 36px 0 28px; }
.fh-footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
.fh-footer-legal { flex-wrap: wrap; justify-content: center; gap: 10px; }
}
/* ── Categories dropdown on mobile ── */
@media (max-width: 480px) {
.fh-cats--open .fh-cats-dropdown {
position: fixed;
top: auto; right: 0; left: 0; bottom: 0;
width: 100%;
border-radius: 16px 16px 0 0;
max-height: 70vh; overflow-y: auto;
box-shadow: 0 -8px 40px rgba(0,0,0,0.15);
grid-template-columns: 1fr 1fr;
padding: 16px;
}
}
/* ── General card grids ── */
@media (max-width: 768px) {
.fh-id-grid { grid-template-columns: 1fr !important; }
.fh-explainer-grid { grid-template-columns: 1fr !important; }
.fh-ts-item { padding: 12px 0; }
.fh-ts-body { gap: 6px; }
}
/* ── Search overlay ── */
@media (max-width: 600px) {
.fh-search-panel { padding: 20px 16px; }
.fh-search-panel label { font-size: 20px; }
.fh-search-row { flex-direction: column; }
.fh-search-row button { width: 100%; }
}
/* ── Newsletter banner ── */
@media (max-width: 600px) {
.fh-inl-fields { flex-direction: column; }
.fh-inl-fields input, .fh-inl-fields button { width: 100%; }
}
/* ── Topbar categories dropdown bottom sheet on mobile ── */
@media (max-width: 480px) {
.fh-topbar-cats { position: static; }
.fh-cats--open .fh-cats-dropdown {
position: fixed; inset: auto 0 0 0;
border-radius: 16px 16px 0 0;
animation: fh-sheet-in .2s ease;
z-index: 9999;
}
@keyframes fh-sheet-in {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
}
/* ── Fact check verdict box on mobile ── */
@media (max-width: 600px) {
.fh-verdict-box { padding: 16px; }
.fh-verdict-status { font-size: 20px; }
}
/* ── Wire / News single ── */
@media (max-width: 600px) {
.fh-wire-wrap { padding: 0 14px; }
.fh-wire-headline { font-size: clamp(22px, 6vw, 32px); }
.fh-wire-standfirst { font-size: 15px; padding-left: 12px; }
.fh-wire-dateline { flex-wrap: wrap; gap: 8px; }
}
/* ═══════════════════════════════════════════════════════════
All missing elements: logo, topbar, footer, forms,
hero sections, cards, article templates, badges
═══════════════════════════════════════════════════════════ */
/* ── Topbar ── */
background: #0D0B08 !important;
border-bottom-color: rgba(255,255,255,0.05) !important;
color: rgba(255,255,255,0.45) !important;
}
/* ── Logo — invert the dark header logo to show on dark bg ── */
filter: brightness(0) invert(1);
}
/* If a separate footer logo is set it already targets dark bg, leave it alone */
filter: none;
}
/* Text logo fallback */
/* ── Header actions ── */
/* ── Hero sections ── */
/* ── Front page sections ── */
/* ── Cards ── */
/* ── Badges ── */
/* ── TOC / Article sidebar ── */
/* ── Article templates ── */
/* ── Article body text & elements ── */
border-left-color: var(--fh-accent) !important;
background: rgba(247,103,0,0.05) !important;
color: #C8C0B4 !important;
}
/* ── Tags / footer of article ── */
/* ── Related articles ── */
/* ── Author lower-third ── */
/* ── Series nav ── */
/* ── Newsletter inline ── */
/* ── Donation inline ── */
/* ── Footer ── */
/* ── Podcast strip ── */
/* ── Verdict box (fact checks) ── */
/* ── Sci-Term / Short Fact CPTs ── */
/* ── 404 / Page ── */
/* ── Wire/News single ── */
/* ═══════════════════════════════════════════════════════
ARTICLE CREDITS / ATTRIBUTION (v3.6.4)
═══════════════════════════════════════════════════════ */
/* Separator dot between credit rows */
@media (max-width: 600px) {
}
/* ═══════════════════════════════════════════════════════════════
CORRECTION BOX — Newspaper-style (v3.6.7)
═══════════════════════════════════════════════════════════════ */
.fh-cbox {
margin: 0 0 32px;
border: 2px solid #1A1A1A;
border-radius: 2px;
overflow: hidden;
font-family: var(--fh-sans);
}
.fh-cbox-header {
display: flex;
align-items: center;
gap: 10px;
background: #1A1A1A;
color: #FFFFFF;
padding: 10px 16px;
}
.fh-cbox-header svg {
width: 14px; height: 14px;
stroke: #FFFFFF;
flex-shrink: 0;
opacity: 0.85;
}
.fh-cbox-word {
font-size: 11px;
font-weight: 900;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.fh-cbox-date {
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.06em;
opacity: 0.6;
margin-left: auto;
}
.fh-cbox-text {
margin: 0;
padding: 14px 18px 16px;
font-family: var(--fh-serif);
font-size: 15px;
line-height: 1.65;
font-style: italic;
color: #1A1A1A;
background: #F9F9F7;
border-top: none;
}
/* Dark mode */
[data-theme="dark"] .fh-cbox { border-color: rgba(255,255,255,0.25); }
[data-theme="dark"] .fh-cbox-header { background: #2A2820; }
[data-theme="dark"] .fh-cbox-text { background: #1A1814; color: var(--fh-ink); }
/* ═══════════════════════════════════════════════════════════════
PEER REVIEW BAR — Full-width green banner (v3.6.7)
═══════════════════════════════════════════════════════════════ */
.fh-prbar {
width: 100%;
margin: 0 0 28px;
border-radius: 3px;
overflow: hidden;
}
.fh-prbar-inner {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
padding: 12px 18px;
font-family: var(--fh-sans);
font-size: 13px;
}
/* Green for reviewed/expert */
.fh-prbar--reviewed .fh-prbar-inner,
.fh-prbar--expert .fh-prbar-inner {
background: #1A6B3A;
color: #FFFFFF;
}
/* Blue-green for editorial */
.fh-prbar--editorial .fh-prbar-inner {
background: #1A5A6B;
color: #FFFFFF;
}
/* Amber for pending */
.fh-prbar--pending .fh-prbar-inner {
background: #7A5A00;
color: #FFFFFF;
}
.fh-prbar-icon {
width: 16px; height: 16px;
stroke: rgba(255,255,255,0.9);
flex-shrink: 0;
}
.fh-prbar-label {
font-weight: 800;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.fh-prbar-sep {
opacity: 0.4;
font-size: 14px;
}
.fh-prbar-reviewer {
font-weight: 600;
font-size: 13px;
}
.fh-prbar-date {
opacity: 0.65;
font-size: 12px;
margin-left: auto;
}
/* Full-bleed: break out of article column width */
.fh-article-body .fh-prbar,
.fh-art-body .fh-prbar {
margin-left: -24px;
margin-right: -24px;
border-radius: 0;
width: calc(100% + 48px);
}
@media (max-width: 600px) {
.fh-article-body .fh-prbar,
.fh-art-body .fh-prbar {
margin-left: -16px;
margin-right: -16px;
width: calc(100% + 32px);
}
.fh-prbar-date { display: none; }
}
/* ═══════════════════════════════════════════════════════════════
ARTICLE CREDITS — Film-credits block below author bio (v3.6.7)
═══════════════════════════════════════════════════════════════ */
.fh-credits {
margin: 32px 0 0;
padding: 28px 0 0;
border-top: 1.5px solid var(--fh-rule);
font-family: var(--fh-sans);
}
.fh-credits-heading {
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--fh-quiet);
margin: 0 0 16px;
}
.fh-credits-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 16px 24px;
}
.fh-credit-item {
display: flex;
flex-direction: column;
gap: 3px;
}
.fh-credit-role {
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--fh-quiet);
}
.fh-credit-name {
font-size: 13.5px;
font-weight: 600;
color: var(--fh-charcoal);
line-height: 1.3;
}
@media (max-width: 480px) {
.fh-credits-grid {
grid-template-columns: 1fr 1fr;
gap: 14px 16px;
}
}
/* ═══════════════════════════════════════════════════════════
AUTHOR ARCHIVE PAGE (v3.6.7)
═══════════════════════════════════════════════════════════ */
.fh-author-page-hd {
background: var(--fh-bg-alt);
border-bottom: 1px solid var(--fh-rule);
padding: 52px 0 44px;
}
.fh-author-page-inner {
display: flex;
align-items: flex-start;
gap: 32px;
}
.fh-author-page-avatar img,
.fh-author-page-initials {
width: 100px; height: 100px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
border: 3px solid var(--fh-rule);
}
.fh-author-page-initials {
display: flex; align-items: center; justify-content: center;
background: var(--fh-accent);
color: #fff;
font-family: var(--fh-display);
font-size: 40px; font-weight: 700;
}
.fh-author-page-info { flex: 1; min-width: 0; }
.fh-author-page-name {
font-family: var(--fh-display);
font-size: clamp(24px, 4vw, 36px);
font-weight: 700;
color: var(--fh-charcoal);
margin: 0 0 4px;
line-height: 1.2;
}
.fh-author-page-role {
font-family: var(--fh-sans);
font-size: 13px; font-weight: 600;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--fh-accent);
margin: 0 0 14px;
}
.fh-author-page-bio {
font-family: var(--fh-serif);
font-size: 15.5px; line-height: 1.7;
color: var(--fh-mid);
margin: 0 0 18px;
max-width: 600px;
}
.fh-author-page-meta {
display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.fh-author-page-count {
font-family: var(--fh-sans);
font-size: 12.5px; font-weight: 600;
color: var(--fh-quiet);
padding: 4px 10px;
background: var(--fh-bg);
border: 1px solid var(--fh-rule);
border-radius: 20px;
}
.fh-author-page-socials { display: flex; gap: 8px; }
.fh-author-page-social {
display: flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
border-radius: 50%;
border: 1px solid var(--fh-rule);
color: var(--fh-mid);
transition: border-color .15s, color .15s, background .15s;
}
.fh-author-page-social:hover {
border-color: var(--fh-accent);
color: var(--fh-accent);
background: rgba(247,103,0,.06);
}
.fh-author-page-social svg { width: 14px; height: 14px; }
/* Content type pills */
.fh-author-page-types {
border-bottom: 1px solid var(--fh-rule);
padding: 14px 0;
background: var(--fh-bg);
}
.fh-author-type-list {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.fh-author-type-label {
font-family: var(--fh-sans);
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--fh-quiet);
margin-right: 4px;
}
.fh-author-type-pill {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 12px;
border: 1px solid var(--fh-rule);
border-radius: 20px;
font-family: var(--fh-sans);
font-size: 12px; font-weight: 500;
color: var(--fh-mid);
background: var(--fh-bg-alt);
}
.fh-author-type-pill em {
font-style: normal; font-weight: 700;
color: var(--fh-accent);
font-size: 11px;
}
/* Posts grid */
.fh-author-page-posts { padding: 40px 0 60px; }
.fh-empty-state {
padding: 80px 0; text-align: center;
color: var(--fh-quiet); font-size: 17px;
}
@media (max-width: 640px) {
.fh-author-page-inner { flex-direction: column; gap: 20px; }
.fh-author-page-hd { padding: 32px 0 28px; }
.fh-author-page-avatar img,
.fh-author-page-initials { width: 72px; height: 72px; }
}
/* ═══════════════════════════════════════════════════════════
CENTERED BYLINE (v3.7.0)
═══════════════════════════════════════════════════════════ */
.fh-byline-center {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 24px 0 28px;
border-top: 1px solid var(--fh-rule);
border-bottom: 1px solid var(--fh-rule);
margin: 20px 0 0;
gap: 6px;
}
.fh-byline-center__avatar {
width: 56px; height: 56px;
border-radius: 50%;
overflow: hidden;
border: 2px solid var(--fh-rule);
margin-bottom: 8px;
flex-shrink: 0;
background: linear-gradient(135deg, var(--fh-accent), var(--fh-accent-light));
display: flex; align-items: center; justify-content: center;
}
.fh-byline-center__avatar img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.fh-byline-center__avatar span {
font-family: var(--fh-display);
font-size: 22px; font-weight: 700; color: #fff;
}
.fh-byline-center__author {
font-family: var(--fh-sans);
font-size: 15px; font-weight: 700;
letter-spacing: 0.01em;
}
.fh-byline-center__author a {
color: var(--fh-charcoal);
text-decoration: none;
border-bottom: 1.5px solid transparent;
transition: border-color .15s, color .15s;
}
.fh-byline-center__author a:hover {
color: var(--fh-accent);
border-bottom-color: var(--fh-accent);
}
.fh-byline-center__role {
font-family: var(--fh-sans);
font-size: 11.5px; font-weight: 500;
color: var(--fh-quiet);
letter-spacing: 0.02em;
}
.fh-byline-center__meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
margin-top: 6px;
font-family: var(--fh-sans);
font-size: 12.5px;
color: var(--fh-quiet);
}
.fh-byline-center__sep {
color: var(--fh-rule-strong);
font-size: 14px;
line-height: 1;
}
.fh-byline-center__date {
color: var(--fh-mid);
font-weight: 500;
}
.fh-byline-center__rt {
display: inline-flex; align-items: center; gap: 4px;
color: var(--fh-quiet);
font-weight: 500;
}
.fh-byline-center__rt svg {
width: 13px; height: 13px; flex-shrink: 0;
stroke: var(--fh-quiet);
}
.fh-byline-center__updated {
font-style: italic;
color: var(--fh-quiet);
}
@media (max-width: 600px) {
.fh-byline-center { padding: 18px 0 20px; }
.fh-byline-center__meta { gap: 6px; font-size: 12px; }
}
/* ═══════════════════════════════════════════════════════════
DONATION / SUPPORT BANNER (v3.7.0)
═══════════════════════════════════════════════════════════ */
.fh-donate-bar {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
padding: 11px 20px;
background: var(--fh-accent);
color: #fff;
font-family: var(--fh-sans);
font-size: 13.5px;
position: relative;
z-index: 100;
}
.fh-donate-msg {
font-weight: 500;
opacity: .95;
}
.fh-donate-btn {
display: inline-block;
padding: 5px 16px;
background: #fff;
color: var(--fh-accent);
font-weight: 700;
font-size: 12.5px;
border-radius: 20px;
text-decoration: none;
white-space: nowrap;
transition: background .15s, transform .1s;
flex-shrink: 0;
}
.fh-donate-btn:hover { background: #fff3ec; transform: scale(1.03); }
.fh-donate-close {
position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
background: none; border: none; color: rgba(255,255,255,.75);
font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px;
transition: color .1s;
}
.fh-donate-close:hover { color: #fff; }
/* Inline donation block (end of article) */
.fh-donate-inline {
display: flex; align-items: center; gap: 18px;
padding: 22px 24px;
background: #FFF5EE;
border: 1.5px solid #F7D0B0;
border-radius: 8px;
margin: 40px 0;
}
.fh-di-heart {
width: 28px; height: 28px;
color: var(--fh-accent);
flex-shrink: 0;
}
.fh-di-msg {
flex: 1; margin: 0;
font-family: var(--fh-sans);
font-size: 14px; line-height: 1.6;
color: var(--fh-charcoal);
}
.fh-di-btn {
display: inline-block;
padding: 8px 20px;
background: var(--fh-accent);
color: #fff;
font-family: var(--fh-sans);
font-weight: 700; font-size: 13px;
border-radius: 6px;
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
transition: background .15s;
}
.fh-di-btn:hover { background: var(--fh-accent-dark); }
@media (max-width: 600px) {
.fh-donate-bar { flex-wrap: wrap; gap: 10px; padding: 12px 40px 12px 16px; justify-content: flex-start; }
.fh-donate-inline { flex-direction: column; text-align: center; gap: 12px; }
}
/* ═══════════════════════════════════════════════════════════
PLAYFUL SECTIONS (v3.7.2)
Tone: Bold · Big type · Color pops · Unexpected layouts
═══════════════════════════════════════════════════════════ */
/* ── SCIENCE STATS ───────────────────────────────────────── */
.fh-stats-section {
position: relative;
background: #0D0D0D;
padding: 72px 0 64px;
overflow: hidden;
}
.fh-stats-bg-text {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
font-family: var(--fh-display);
font-size: clamp(80px, 18vw, 220px);
font-weight: 900;
letter-spacing: -0.04em;
color: rgba(255,255,255,0.025);
white-space: nowrap;
pointer-events: none;
user-select: none;
line-height: 1;
}
.fh-stats-kicker {
font-family: var(--fh-sans);
font-size: 11px; font-weight: 800;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--fh-accent);
margin-bottom: 40px;
display: flex; align-items: center; gap: 12px;
}
.fh-stats-kicker::after {
content: '';
flex: 1; height: 1px;
background: rgba(255,255,255,0.1);
}
.fh-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
}
.fh-stat-item {
padding: 28px 32px 28px 0;
border-right: 1px solid rgba(255,255,255,0.07);
position: relative;
}
.fh-stat-item:nth-child(3n) { border-right: none; }
.fh-stat-item:nth-child(n+4) { border-top: 1px solid rgba(255,255,255,0.07); }
.fh-stat-number {
display: flex; align-items: baseline; gap: 2px;
line-height: 1;
margin-bottom: 10px;
}
.fh-stat-count {
font-family: var(--fh-display);
font-size: clamp(42px, 6vw, 72px);
font-weight: 900;
letter-spacing: -0.03em;
color: var(--stat-color, #F76700);
font-variant-numeric: tabular-nums;
transition: color .3s;
}
.fh-stat-suffix {
font-family: var(--fh-display);
font-size: clamp(24px, 3vw, 40px);
font-weight: 700;
color: var(--stat-color, #F76700);
opacity: 0.8;
}
.fh-stat-label {
font-family: var(--fh-sans);
font-size: 12.5px; font-weight: 500;
color: rgba(255,255,255,0.5);
letter-spacing: 0.02em;
text-transform: uppercase;
font-size: 11px;
margin-bottom: 14px;
}
.fh-stat-bar {
height: 2px; background: rgba(255,255,255,0.07);
border-radius: 2px; overflow: hidden;
}
.fh-stat-bar-fill {
height: 100%; width: 0;
background: var(--stat-color, #F76700);
border-radius: 2px;
transition: width 1.2s cubic-bezier(.16,1,.3,1);
}
.fh-stat-item.counted .fh-stat-bar-fill { width: 100%; }
@media (max-width: 768px) {
.fh-stats-grid { grid-template-columns: repeat(2,1fr); }
.fh-stat-item:nth-child(2n) { border-right: none; }
.fh-stat-item:nth-child(3n) { border-right: 1px solid rgba(255,255,255,0.07); }
.fh-stat-item:nth-child(2n) { border-right: none; }
.fh-stat-item:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.07); }
}
@media (max-width: 480px) {
.fh-stats-grid { grid-template-columns: 1fr 1fr; }
.fh-stat-item { padding: 20px 16px 20px 0; }
}
/* ── DID YOU KNOW ────────────────────────────────────────── */
.fh-dyk-section {
background: var(--fh-accent);
padding: 0;
overflow: hidden;
}
.fh-dyk-inner {
display: flex;
align-items: stretch;
min-height: 88px;
}
.fh-dyk-badge {
display: flex; align-items: center; gap: 8px;
padding: 20px 28px;
background: rgba(0,0,0,0.18);
font-family: var(--fh-sans);
font-size: 12px; font-weight: 800;
letter-spacing: 0.1em; text-transform: uppercase;
color: rgba(255,255,255,0.9);
white-space: nowrap;
flex-shrink: 0;
}
.fh-dyk-bulb { font-size: 20px; }
.fh-dyk-stage {
flex: 1;
display: flex; align-items: center;
padding: 16px 24px;
overflow: hidden;
}
.fh-dyk-fact {
font-family: var(--fh-display);
font-size: clamp(16px, 2.2vw, 22px);
font-weight: 600;
color: #fff;
margin: 0;
line-height: 1.35;
letter-spacing: -0.01em;
transition: none;
}
.fh-dyk-next {
display: flex; align-items: center; justify-content: center;
width: 60px;
background: rgba(0,0,0,0.15);
border: none; cursor: pointer;
color: rgba(255,255,255,0.85);
transition: background .15s, color .15s;
flex-shrink: 0;
}
.fh-dyk-next:hover { background: rgba(0,0,0,0.3); color: #fff; }
.fh-dyk-next svg { width: 20px; height: 20px; }
@media (max-width: 600px) {
.fh-dyk-inner { flex-wrap: wrap; }
.fh-dyk-badge { width: 100%; padding: 12px 16px; }
.fh-dyk-stage { padding: 12px 16px; }
.fh-dyk-fact { font-size: 15px; }
.fh-dyk-next { width: 48px; }
}
/* ── STAFF PICKS ─────────────────────────────────────────── */
.fh-picks-section {
padding: 64px 0 0;
background: var(--fh-bg);
overflow: hidden;
}
.fh-picks-header {
display: flex; align-items: flex-end;
justify-content: space-between;
margin-bottom: 36px;
gap: 20px;
}
.fh-picks-eyebrow {
display: block;
font-family: var(--fh-sans);
font-size: 11px; font-weight: 800;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--fh-accent);
margin-bottom: 6px;
}
.fh-picks-title {
font-family: var(--fh-display);
font-size: clamp(28px, 4vw, 44px);
font-weight: 800;
letter-spacing: -0.025em;
color: var(--fh-charcoal);
margin: 0; line-height: 1.1;
}
.fh-picks-star {
color: var(--fh-accent);
display: inline-block;
animation: fh-star-spin 4s linear infinite;
}
@keyframes fh-star-spin {
0% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(180deg) scale(1.3); }
100% { transform: rotate(360deg) scale(1); }
}
.fh-picks-nav { display: flex; gap: 8px; flex-shrink: 0; }
.fh-picks-prev, .fh-picks-next-btn {
width: 40px; height: 40px;
border: 1.5px solid var(--fh-rule);
background: var(--fh-bg);
border-radius: 50%; cursor: pointer;
font-size: 22px; line-height: 1;
color: var(--fh-charcoal);
display: flex; align-items: center; justify-content: center;
transition: border-color .15s, background .15s, color .15s;
}
.fh-picks-prev:hover, .fh-picks-next-btn:hover {
border-color: var(--fh-accent);
background: var(--fh-accent);
color: #fff;
}
.fh-picks-track-wrap {
overflow: hidden;
padding: 0 0 48px;
-webkit-mask-image: linear-gradient(90deg, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
}
.fh-picks-track {
display: flex;
gap: 24px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding: 0 40px;
}
.fh-picks-track::-webkit-scrollbar { display: none; }
.fh-pick-card {
flex: 0 0 300px;
scroll-snap-align: start;
border: 1.5px solid var(--fh-rule);
border-radius: 12px;
overflow: hidden;
background: var(--fh-bg);
transition: transform .2s, box-shadow .2s;
position: relative;
}
.fh-pick-card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0;
height: 3px;
background: var(--pick-color, #F76700);
transform: scaleX(0);
transform-origin: left;
transition: transform .3s ease;
}
.fh-pick-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.1); }
.fh-pick-card:hover::before { transform: scaleX(1); }
.fh-pick-img-wrap {
position: relative;
aspect-ratio: 16/9;
overflow: hidden;
background: var(--fh-bg-alt);
}
.fh-pick-img-wrap img {
width: 100%; height: 100%; object-fit: cover;
transition: transform .4s ease;
}
.fh-pick-card:hover .fh-pick-img-wrap img { transform: scale(1.04); }
.fh-pick-img-placeholder {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
}
.fh-pick-cat-pill {
position: absolute; top: 10px; left: 10px;
background: var(--pick-color, #F76700);
color: #fff;
font-family: var(--fh-sans);
font-size: 10px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
padding: 3px 10px; border-radius: 20px;
}
.fh-pick-body { padding: 18px 20px 20px; }
.fh-pick-quote {
font-family: var(--fh-serif);
font-size: 14px; line-height: 1.65;
color: var(--fh-mid);
margin: 0 0 14px;
font-style: italic;
}
.fh-pick-open-q {
font-family: var(--fh-display);
font-size: 28px; line-height: 0;
color: var(--pick-color, #F76700);
vertical-align: -0.3em;
margin-right: 2px;
}
.fh-pick-title {
font-family: var(--fh-display);
font-size: 17px; font-weight: 700;
line-height: 1.3; letter-spacing: -0.01em;
color: var(--fh-charcoal);
margin: 0 0 12px;
}
.fh-pick-title a { color: inherit; text-decoration: none; }
.fh-pick-title a:hover { color: var(--pick-color, var(--fh-accent)); }
.fh-pick-picker {
display: flex; align-items: center; gap: 8px;
font-family: var(--fh-sans);
font-size: 12px; color: var(--fh-quiet);
}
.fh-pick-picker-dot {
width: 8px; height: 8px; border-radius: 50%;
flex-shrink: 0;
}
.fh-pick-picker strong { color: var(--fh-charcoal); font-weight: 600; }
@media (max-width: 640px) {
.fh-pick-card { flex: 0 0 80vw; }
.fh-picks-header { flex-direction: column; align-items: flex-start; }
}
/* ═══════════════════════════════════════════════════════════
FUN FEATURES CSS (v3.8)
═══════════════════════════════════════════════════════════ */
/* ── READING PROGRESS ROCKET ─────────────────────────────── */
.fh-rocket-wrap {
position: fixed;
right: 20px; top: 50%;
transform: translateY(-50%);
z-index: 999;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
opacity: 0;
pointer-events: none;
transition: opacity .4s;
}
.fh-rocket-wrap.fh-rocket-active {
opacity: 1;
pointer-events: auto;
}
.fh-rocket-track {
width: 4px;
height: 160px;
background: rgba(0,0,0,0.08);
border-radius: 4px;
position: relative;
overflow: visible;
}
.fh-rocket-fill {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 0;
background: linear-gradient(to top, var(--fh-accent), #FF8820);
border-radius: 4px;
transition: height .15s ease-out;
}
.fh-rocket-char {
position: absolute;
left: 50%;
transform: translateX(-50%) rotate(-90deg);
font-size: 20px;
bottom: -16px;
transition: bottom .15s ease-out;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
line-height: 1;
}
.fh-rocket-wrap.fh-rocket-done .fh-rocket-char {
animation: fh-rocket-celebrate .5s ease forwards;
}
@keyframes fh-rocket-celebrate {
0% { transform: translateX(-50%) rotate(-90deg) scale(1); }
50% { transform: translateX(-50%) rotate(-90deg) scale(1.5); }
100% { transform: translateX(-50%) rotate(-90deg) scale(1); }
}
.fh-rocket-pct {
font-family: var(--fh-sans);
font-size: 10px;
font-weight: 700;
color: var(--fh-quiet);
letter-spacing: 0.04em;
}
@media (max-width: 900px) {
.fh-rocket-wrap { right: 8px; }
.fh-rocket-track { height: 100px; }
}
@media (max-width: 600px) { .fh-rocket-wrap { display: none; } }
/* ── KEY TERMS ───────────────────────────────────────────── */
/* ── KEY TERM HOVER CARDS ──────────────────────────────────
Pure CSS — no JS dependency. Card is a child
that appears on hover/focus via visibility + opacity.
─────────────────────────────────────────────────────────── */
.fh-keyterm {
position: relative;
display: inline-block;
border-bottom: 1.5px dotted var(--fh-accent);
color: inherit;
cursor: help;
}
.fh-keyterm:hover,
.fh-keyterm:focus { color: var(--fh-accent); outline: none; }
/* Card — hidden by default, MUST be display:none so it's out of flow */
.fh-kt-card {
display: none;
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
width: 260px;
background: #18120A;
border: 1px solid rgba(247,103,0,0.25);
border-radius: 10px;
box-shadow: 0 12px 36px rgba(0,0,0,0.3);
padding: 14px 16px 12px;
z-index: 9999;
white-space: normal;
text-align: left;
font-style: normal;
font-size: 13px;
line-height: 1.5;
}
.fh-kt-card::after {
content: '';
position: absolute;
top: 100%; left: 50%;
transform: translateX(-50%);
border: 7px solid transparent;
border-top-color: #18120A;
}
/* Show on hover / focus */
.fh-keyterm:hover .fh-kt-card,
.fh-keyterm:focus .fh-kt-card {
display: block;
}
.fh-kt-card-term {
display: block;
font-family: var(--fh-sans);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--fh-accent);
margin-bottom: 6px;
}
.fh-kt-card-def {
display: block;
font-family: var(--fh-serif);
font-size: 13.5px;
line-height: 1.6;
color: rgba(255,255,255,0.82);
margin-bottom: 8px;
}
.fh-kt-card-link {
display: inline-block;
font-family: var(--fh-sans);
font-size: 11px;
font-weight: 700;
color: var(--fh-accent);
text-decoration: none;
letter-spacing: 0.02em;
}
.fh-kt-card-link:hover { text-decoration: underline; }
/* ── TOC PER-SECTION PROGRESS ────────────────────────────── */
.fh-toc-link {
position: relative;
overflow: hidden;
}
.fh-toc-sec-fill {
position: absolute;
bottom: 0; left: 0;
height: 2px;
width: 0;
background: var(--fh-accent);
border-radius: 2px;
transition: width .12s linear;
}
.fh-toc-link.fh-toc-active {
color: var(--fh-accent);
background: rgba(247,103,0,0.07);
}
.fh-toc-link.fh-toc-active .fh-toc-n {
background: var(--fh-accent);
color: #fff;
}
.fh-toc-link.fh-toc-passed {
opacity: 0.5;
}
.fh-toc-link.fh-toc-passed .fh-toc-n {
background: var(--fh-accent);
color: #fff;
opacity: 0.5;
}
/* ── TOPIC BUBBLES ───────────────────────────────────────── */
.fh-bubbles-section {
padding: 64px 0;
background: var(--fh-bg);
overflow: hidden;
}
.fh-bubbles-header {
text-align: center;
margin-bottom: 48px;
}
.fh-bubbles-eyebrow {
display: block;
font-family: var(--fh-sans);
font-size: 11px; font-weight: 800;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--fh-accent);
margin-bottom: 8px;
}
.fh-bubbles-title {
font-family: var(--fh-display);
font-size: clamp(24px, 3.5vw, 40px);
font-weight: 800; letter-spacing: -0.02em;
color: var(--fh-charcoal);
margin: 0;
}
.fh-bubbles-stage {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 16px;
padding: 0 40px;
}
.fh-bubble {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 50%;
background: color-mix(in srgb, var(--bcolor) 12%, transparent);
border: 2px solid color-mix(in srgb, var(--bcolor) 30%, transparent);
color: var(--bcolor);
text-decoration: none;
animation: fh-bubble-float var(--bdur, 6s) ease-in-out infinite alternate;
animation-delay: var(--bdelay, 0s);
transition: transform .2s, box-shadow .2s, background .2s;
position: relative;
overflow: hidden;
}
.fh-bubble::before {
content: '';
position: absolute; inset: 0; border-radius: 50%;
background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.4), transparent 60%);
pointer-events: none;
}
.fh-bubble:hover {
background: color-mix(in srgb, var(--bcolor) 22%, transparent);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--bcolor) 20%, transparent),
0 8px 32px color-mix(in srgb, var(--bcolor) 30%, transparent);
transform: scale(1.08);
animation-play-state: paused;
}
/* Sizes */
.fh-bubble--xl { width: 120px; height: 120px; }
.fh-bubble--lg { width: 96px; height: 96px; }
.fh-bubble--md { width: 76px; height: 76px; }
.fh-bubble--sm { width: 60px; height: 60px; }
.fh-bubble-name {
font-family: var(--fh-sans);
font-weight: 700;
font-size: clamp(9px, 1.2vw, 13px);
text-align: center;
line-height: 1.2;
padding: 0 8px;
}
.fh-bubble--xl .fh-bubble-name { font-size: 13px; }
.fh-bubble--lg .fh-bubble-name { font-size: 12px; }
.fh-bubble--md .fh-bubble-name { font-size: 11px; }
.fh-bubble--sm .fh-bubble-name { font-size: 9px; }
.fh-bubble-count {
font-family: var(--fh-sans);
font-size: 10px; font-weight: 500;
opacity: 0.6; margin-top: 2px;
}
@keyframes fh-bubble-float {
0% { transform: translateY(0); }
100% { transform: translateY(-12px); }
}
/* ── WORD CLOUD CONSTELLATION ────────────────────────────── */
.fh-wc-section {
padding: 80px 0;
background: #0A0A12;
position: relative;
overflow: hidden;
}
.fh-wc-bg-grid {
position: absolute; inset: 0;
background-image:
radial-gradient(circle, rgba(247,103,0,0.06) 1px, transparent 1px),
radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 40px 40px, 13px 13px;
pointer-events: none;
}
.fh-wc-header {
text-align: center;
margin-bottom: 52px;
}
.fh-wc-eyebrow {
display: block;
font-family: var(--fh-sans);
font-size: 11px; font-weight: 800;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--fh-accent);
margin-bottom: 8px;
}
.fh-wc-title {
font-family: var(--fh-display);
font-size: clamp(28px, 4vw, 48px);
font-weight: 800; letter-spacing: -0.03em;
color: #fff;
margin: 0 0 10px;
}
.fh-wc-sub {
font-family: var(--fh-sans);
font-size: 13px;
color: rgba(255,255,255,0.35);
margin: 0;
}
.fh-wc-cloud {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px 16px;
line-height: 1;
padding: 0 20px;
}
.fh-wc-word {
font-family: var(--fh-display);
font-size: var(--wsize, 16px);
color: var(--wcolor, #F76700);
opacity: var(--wop, 0.6);
font-weight: 700;
letter-spacing: -0.02em;
cursor: default;
transition: opacity .2s, transform .2s, text-shadow .2s;
animation: fh-wc-appear .6s ease both;
animation-delay: var(--wdelay, 0s);
user-select: none;
position: relative;
}
.fh-wc-word::after {
content: attr(data-count);
position: absolute;
bottom: calc(100% + 4px);
left: 50%; transform: translateX(-50%);
font-family: var(--fh-sans);
font-size: 10px; font-weight: 600;
color: rgba(255,255,255,0.5);
background: rgba(0,0,0,0.6);
padding: 2px 6px; border-radius: 4px;
white-space: nowrap;
opacity: 0; pointer-events: none;
transition: opacity .15s;
}
.fh-wc-word:hover {
opacity: 1 !important;
transform: scale(1.15);
text-shadow: 0 0 20px var(--wcolor), 0 0 40px var(--wcolor);
}
.fh-wc-word:hover::after { opacity: 1; }
@keyframes fh-wc-appear {
from { opacity: 0; transform: scale(0.6) translateY(10px); }
to { opacity: var(--wop, 0.6); transform: scale(1) translateY(0); }
}
/* ── ILLUSTRATED EMPTY STATES ────────────────────────────── */
.fh-empty-state-wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
color: var(--fh-quiet);
}
.fh-empty-state-art {
width: 120px; height: auto;
margin-bottom: 16px;
opacity: 0.5;
}
.fh-empty-state-art svg { width: 100%; height: auto; }
.fh-empty-state-msg {
font-family: var(--fh-sans);
font-size: 13px;
color: var(--fh-quiet);
margin: 0;
}
/* ═══════════════════════════════════════════════════════════
PLAYFUL UI — v3.8.0
Rocket · Key terms · Empty states · Visual TOC ·
Word cloud · Topic bubbles · Typewriter
═══════════════════════════════════════════════════════════ */
/* ── READING PROGRESS ROCKET ────────────────────────────── */
.fh-rocket-track {
position: fixed;
right: 18px; top: 80px; bottom: 24px;
width: 32px;
z-index: 999;
display: flex; flex-direction: column; align-items: center;
pointer-events: none;
opacity: 0;
transition: opacity .4s ease;
}
.fh-rocket-track.visible { opacity: 1; }
@media (max-width: 900px) { .fh-rocket-track { display: none; } }
.fh-rocket-path {
flex: 1;
width: 2px;
background: rgba(247,103,0,0.12);
border-radius: 2px;
position: relative;
overflow: hidden;
margin-bottom: 4px;
}
.fh-rocket-fill {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 0%;
background: linear-gradient(to top, #F76700, #FF8820);
border-radius: 2px;
transition: height .1s linear;
}
.fh-rocket-ship {
position: absolute;
bottom: 0; left: 50%;
transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center;
gap: 2px;
transition: bottom .1s linear;
}
.fh-rocket-svg {
width: 28px; height: 42px;
filter: drop-shadow(0 2px 6px rgba(247,103,0,.4));
animation: fh-rocket-wobble 2s ease-in-out infinite;
}
@keyframes fh-rocket-wobble {
0%,100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
@keyframes fh-rocket-flame-pulse {
0%,100% { opacity: 0.7; transform: scaleY(1); }
50% { opacity: 1; transform: scaleY(1.3); }
}
.fh-rocket-flame { animation: fh-rocket-flame-pulse .4s ease-in-out infinite; }
.fh-rocket-flame--2 { animation: fh-rocket-flame-pulse .4s ease-in-out infinite .2s; }
.fh-rocket-pct {
font-family: var(--fh-sans);
font-size: 9px; font-weight: 800;
color: var(--fh-accent);
letter-spacing: 0.02em;
line-height: 1;
}
.fh-rocket-stars { position: absolute; inset: 0; pointer-events: none; }
.fh-rocket-star {
position: absolute;
width: 3px; height: 3px;
border-radius: 50%;
background: var(--fh-accent);
opacity: 0;
animation: fh-star-twinkle 2s ease-in-out infinite;
}
@keyframes fh-star-twinkle {
0%,100%{opacity:0;transform:scale(.5)} 50%{opacity:.8;transform:scale(1)}
}
/* ── KEY TERM HOVER CARDS ───────────────────────────────── */
/* old keyterm CSS removed v3.7.7 */
/* ── ILLUSTRATED EMPTY STATES ───────────────────────────── */
.fh-empty-state {
padding: 48px 24px;
text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.fh-empty-illo svg {
width: 120px; height: 80px;
opacity: 0.8;
}
.fh-empty-msg {
font-family: var(--fh-serif);
font-size: 14.5px; color: var(--fh-quiet);
font-style: italic; margin: 0;
}
/* ── ARTICLE LAYOUT WITH VISUAL TOC SIDEBAR ─────────────── */
.fh-art-layout {
display: grid;
grid-template-columns: 220px 1fr;
gap: 48px;
align-items: start;
max-width: 1100px;
margin: 0 auto;
padding: 0 24px;
}
.fh-art-layout--notoc {
grid-template-columns: 1fr;
max-width: calc(var(--fh-article-w) + 48px);
}
.fh-art-toc-sidebar {
position: sticky;
top: 96px;
max-height: calc(100vh - 120px);
overflow-y: auto;
scrollbar-width: none;
}
.fh-art-toc-sidebar::-webkit-scrollbar { display: none; }
@media (max-width: 960px) {
.fh-art-layout { grid-template-columns: 1fr; }
.fh-art-toc-sidebar { display: none; }
}
/* Visual TOC */
.fh-vtoc { }
.fh-vtoc-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 18px;
padding-bottom: 12px;
border-bottom: 1px solid var(--fh-rule);
}
.fh-vtoc-label {
font-family: var(--fh-sans);
font-size: 10px; font-weight: 800;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--fh-quiet);
}
/* Progress ring */
.fh-vtoc-progress-ring {
position: relative;
width: 36px; height: 36px;
flex-shrink: 0;
}
.fh-vtoc-progress-ring svg {
width: 36px; height: 36px;
transform: rotate(-90deg);
}
.fh-vtoc-ring-bg {
fill: none;
stroke: var(--fh-rule);
stroke-width: 2.5;
}
.fh-vtoc-ring-fill {
fill: none;
stroke: var(--fh-accent);
stroke-width: 2.5;
stroke-linecap: round;
stroke-dasharray: 100 100;
stroke-dashoffset: 100;
transition: stroke-dashoffset .3s ease;
}
.fh-vtoc-ring-pct {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-family: var(--fh-sans);
font-size: 8px; font-weight: 800;
color: var(--fh-accent);
}
/* TOC list */
.fh-vtoc-list {
list-style: none;
margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 2px;
}
.fh-vtoc-item { }
.fh-vtoc-link {
display: flex; align-items: flex-start; gap: 8px;
padding: 5px 8px 5px 0;
text-decoration: none;
border-left: 2px solid transparent;
padding-left: 10px; margin-left: -10px;
transition: border-color .15s, color .15s;
position: relative;
}
.fh-vtoc-link:hover { border-left-color: var(--fh-rule-strong); }
.fh-vtoc-link.active { border-left-color: var(--fh-accent); }
.fh-vtoc-num {
font-family: var(--fh-sans);
font-size: 9.5px; font-weight: 800;
color: var(--fh-rule-strong);
flex-shrink: 0; margin-top: 2px;
transition: color .15s;
min-width: 22px;
}
.fh-vtoc-link.active .fh-vtoc-num { color: var(--fh-accent); }
.fh-vtoc-dash {
font-size: 10px; color: var(--fh-rule-strong);
flex-shrink: 0; margin-top: 2px;
min-width: 22px;
}
.fh-vtoc-text {
font-family: var(--fh-serif);
font-size: 12.5px; line-height: 1.4;
color: var(--fh-quiet);
transition: color .15s;
}
.fh-vtoc-link.active .fh-vtoc-text,
.fh-vtoc-link:hover .fh-vtoc-text { color: var(--fh-charcoal); }
.fh-vtoc-h3 .fh-vtoc-link { padding-left: 26px; margin-left: -26px; }
.fh-vtoc-h3 .fh-vtoc-text { font-size: 11.5px; }
/* Per-section progress bar */
.fh-vtoc-seg-bar {
height: 1.5px;
background: var(--fh-rule-light);
border-radius: 2px;
overflow: hidden;
margin: 2px 0 6px 10px;
}
.fh-vtoc-seg-fill {
height: 100%; width: 0;
background: var(--fh-accent);
transition: width .15s linear;
border-radius: 2px;
}
/* ── WORD CLOUD SECTION ──────────────────────────────────── */
.fh-cloud-section {
padding: 72px 0 64px;
background: #FDFBF8;
position: relative;
overflow: hidden;
}
.fh-cloud-bg-orb {
position: absolute;
border-radius: 50%;
filter: blur(60px);
pointer-events: none;
}
.fh-cloud-bg-orb--1 {
width: 400px; height: 400px;
background: rgba(247,103,0,.06);
top: -80px; left: -80px;
}
.fh-cloud-bg-orb--2 {
width: 300px; height: 300px;
background: rgba(46,134,171,.05);
bottom: -60px; right: 10%;
}
.fh-cloud-bg-orb--3 {
width: 250px; height: 250px;
background: rgba(40,167,69,.04);
top: 40%; left: 40%;
}
.fh-cloud-header {
text-align: center;
margin-bottom: 44px;
}
.fh-cloud-eyebrow {
display: block;
font-family: var(--fh-sans);
font-size: 11px; font-weight: 800;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--fh-accent);
margin-bottom: 8px;
}
.fh-cloud-title {
font-family: var(--fh-display);
font-size: clamp(26px, 4vw, 42px);
font-weight: 800;
letter-spacing: -0.025em;
color: var(--fh-charcoal);
margin: 0;
}
.fh-cloud-canvas {
display: flex;
flex-wrap: wrap;
gap: 10px 16px;
justify-content: center;
align-items: center;
padding: 8px 0 16px;
min-height: 180px;
}
.fh-cloud-word {
font-family: var(--fh-display);
font-weight: 600;
color: var(--fh-charcoal);
text-decoration: none;
letter-spacing: -0.01em;
line-height: 1.2;
transition: color .18s, transform .18s, opacity .18s;
animation: fh-word-drift ease-in-out infinite alternate;
display: inline-block;
}
.fh-cloud-word--term {
color: var(--fh-accent);
font-style: italic;
}
.fh-cloud-word:hover {
color: var(--fh-accent) !important;
transform: scale(1.12) !important;
opacity: 1 !important;
}
@keyframes fh-word-drift {
0% { transform: translateY(0px); }
100% { transform: translateY(-6px); }
}
.fh-cloud-note {
text-align: center;
font-family: var(--fh-sans);
font-size: 11px; color: var(--fh-quiet);
margin: 20px 0 0;
display: flex; align-items: center; justify-content: center; gap: 6px;
}
.fh-cloud-legend-dot {
width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}
.fh-cloud-legend-dot--tag { background: var(--fh-charcoal); }
.fh-cloud-legend-dot--term { background: var(--fh-accent); }
/* ── TOPIC BUBBLES SECTION ───────────────────────────────── */
.fh-bubbles-section {
padding: 72px 0 56px;
background: var(--fh-bg);
overflow: hidden;
}
.fh-bubbles-header {
text-align: center;
margin-bottom: 48px;
}
.fh-bubbles-eyebrow {
display: block;
font-family: var(--fh-sans);
font-size: 11px; font-weight: 800;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--fh-accent);
margin-bottom: 8px;
}
.fh-bubbles-title {
font-family: var(--fh-display);
font-size: clamp(26px, 4vw, 42px);
font-weight: 800;
letter-spacing: -0.025em;
color: var(--fh-charcoal);
margin: 0;
}
.fh-bubbles-stage {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
align-items: center;
padding: 0 24px;
}
.fh-bubble {
display: flex;
flex-direction: column;
align-items: center; justify-content: center;
border-radius: 50%;
background: color-mix(in srgb, var(--bubble-color) 10%, white);
border: 2px solid color-mix(in srgb, var(--bubble-color) 25%, transparent);
color: var(--bubble-color);
text-decoration: none;
position: relative;
transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s, background .2s;
animation: fh-bubble-float ease-in-out infinite alternate;
cursor: pointer;
}
.fh-bubble::before {
content: '';
position: absolute; inset: -6px;
border-radius: 50%;
background: radial-gradient(circle, color-mix(in srgb, var(--bubble-color) 15%, transparent), transparent 70%);
opacity: 0;
transition: opacity .3s;
}
.fh-bubble:hover { transform: scale(1.12) !important; box-shadow: 0 8px 28px color-mix(in srgb, var(--bubble-color) 30%, transparent); }
.fh-bubble:hover::before { opacity: 1; }
.fh-bubble:hover .fh-bubble-label { color: var(--bubble-color); }
@keyframes fh-bubble-float {
0% { transform: translateY(0) rotate(0deg); }
100% { transform: translateY(-10px) rotate(2deg); }
}
.fh-bubble--sm { width: 90px; height: 90px; }
.fh-bubble--md { width: 115px; height: 115px; }
.fh-bubble--lg { width: 140px; height: 140px; }
.fh-bubble--xl { width: 170px; height: 170px; }
.fh-bubble-icon {
font-size: clamp(20px, 3vw, 30px);
line-height: 1;
margin-bottom: 4px;
}
.fh-bubble-label {
font-family: var(--fh-sans);
font-size: clamp(10px, 1.2vw, 13px);
font-weight: 700;
text-align: center;
color: var(--fh-charcoal);
transition: color .2s;
padding: 0 8px;
line-height: 1.2;
}
.fh-bubble-count {
font-family: var(--fh-sans);
font-size: 9px; font-weight: 800;
color: var(--bubble-color);
opacity: 0.7;
margin-top: 2px;
}
@media (max-width: 640px) {
.fh-bubble--xl { width: 130px; height: 130px; }
.fh-bubble--lg { width: 110px; height: 110px; }
}
/* ═══════════════════════════════════════════════════════════
NEWSLETTER STRIP (v3.8.3 — grainy bold orange poster)
═══════════════════════════════════════════════════════════ */
.fh-newsletter-strip {
position: relative;
/* Bold orange base with dark contrast corners */
background:
radial-gradient(ellipse at 30% 50%, #C44A00 0%, transparent 60%),
radial-gradient(ellipse at 80% 20%, #F76700 0%, transparent 50%),
radial-gradient(ellipse at 70% 80%, #A33800 0%, transparent 55%),
#1A0800;
padding: 80px 0;
overflow: hidden;
isolation: isolate;
}
/* Geometric science shapes background */
.fh-newsletter-strip::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='400' viewBox='0 0 800 400'%3E%3Cdefs%3E%3Cstyle%3E.s%7Bfill:none;stroke:rgba(255,160,60,0.18);stroke-width:1%7D.d%7Bfill:rgba(255,160,60,0.25)%7D%3C/style%3E%3C/defs%3E%3C!-- Hexagon grid top-right --%3E%3Cpolygon class='s' points='620,20 640,8 660,20 660,44 640,56 620,44'/%3E%3Cpolygon class='s' points='660,20 680,8 700,20 700,44 680,56 660,44'/%3E%3Cpolygon class='s' points='700,20 720,8 740,20 740,44 720,56 700,44'/%3E%3Cpolygon class='s' points='740,20 760,8 780,20 780,44 760,56 740,44'/%3E%3Cpolygon class='s' points='640,56 660,44 680,56 680,80 660,92 640,80'/%3E%3Cpolygon class='s' points='680,56 700,44 720,56 720,80 700,92 680,80'/%3E%3Cpolygon class='s' points='720,56 740,44 760,56 760,80 740,92 720,80'/%3E%3Cpolygon class='s' points='620,92 640,80 660,92 660,116 640,128 620,116'/%3E%3Cpolygon class='s' points='660,92 680,80 700,92 700,116 680,128 660,116'/%3E%3Cpolygon class='s' points='700,92 720,80 740,92 740,116 720,128 700,116'/%3E%3C!-- Atom: center nucleus + 3 orbits --%3E%3Ccircle cx='130' cy='200' r='6' fill='rgba(255,140,40,0.5)'/%3E%3Cellipse cx='130' cy='200' rx='60' ry='22' class='s' transform='rotate(0 130 200)'/%3E%3Cellipse cx='130' cy='200' rx='60' ry='22' class='s' transform='rotate(60 130 200)'/%3E%3Cellipse cx='130' cy='200' rx='60' ry='22' class='s' transform='rotate(120 130 200)'/%3E%3Ccircle cx='190' cy='200' r='4' fill='rgba(255,140,40,0.4)'/%3E%3Ccircle cx='100' cy='238' r='4' fill='rgba(255,140,40,0.4)'/%3E%3Ccircle cx='100' cy='162' r='4' fill='rgba(255,140,40,0.4)'/%3E%3C!-- Geometric triangles bottom-left --%3E%3Cpolygon class='s' points='20,380 60,310 100,380'/%3E%3Cpolygon class='s' points='60,380 100,310 140,380'/%3E%3Cpolygon class='s' points='40,310 80,240 120,310'/%3E%3C!-- Dot matrix right-center --%3E%3Ccircle class='d' cx='500' cy='120' r='2'/%3E%3Ccircle class='d' cx='520' cy='120' r='2'/%3E%3Ccircle class='d' cx='540' cy='120' r='2'/%3E%3Ccircle class='d' cx='560' cy='120' r='2'/%3E%3Ccircle class='d' cx='580' cy='120' r='2'/%3E%3Ccircle class='d' cx='500' cy='140' r='2'/%3E%3Ccircle class='d' cx='520' cy='140' r='2'/%3E%3Ccircle class='d' cx='540' cy='140' r='2'/%3E%3Ccircle class='d' cx='560' cy='140' r='2'/%3E%3Ccircle class='d' cx='580' cy='140' r='2'/%3E%3Ccircle class='d' cx='500' cy='160' r='2'/%3E%3Ccircle class='d' cx='520' cy='160' r='2'/%3E%3Ccircle class='d' cx='540' cy='160' r='2'/%3E%3Ccircle class='d' cx='560' cy='160' r='2'/%3E%3Ccircle class='d' cx='580' cy='160' r='2'/%3E%3Ccircle class='d' cx='500' cy='180' r='2'/%3E%3Ccircle class='d' cx='520' cy='180' r='2'/%3E%3Ccircle class='d' cx='540' cy='180' r='2'/%3E%3Ccircle class='d' cx='560' cy='180' r='2'/%3E%3Ccircle class='d' cx='580' cy='180' r='2'/%3E%3C!-- DNA helix suggestion: two sine waves --%3E%3Cpath class='s' d='M300,60 Q320,80 340,60 Q360,40 380,60 Q400,80 420,60 Q440,40 460,60 Q480,80 500,60'/%3E%3Cpath class='s' d='M300,80 Q320,60 340,80 Q360,100 380,80 Q400,60 420,80 Q440,100 460,80 Q480,60 500,80'/%3E%3Cline class='s' x1='320' y1='80' x2='320' y2='60'/%3E%3Cline class='s' x1='360' y1='40' x2='360' y2='100'/%3E%3Cline class='s' x1='400' y1='80' x2='400' y2='60'/%3E%3Cline class='s' x1='440' y1='40' x2='440' y2='100'/%3E%3Cline class='s' x1='480' y1='80' x2='480' y2='60'/%3E%3C!-- Molecule bottom-right --%3E%3Ccircle cx='650' cy='330' r='8' fill='rgba(255,140,40,0.3)' stroke='rgba(255,140,40,0.4)' stroke-width='1'/%3E%3Ccircle cx='690' cy='310' r='6' fill='rgba(255,140,40,0.2)' stroke='rgba(255,140,40,0.35)' stroke-width='1'/%3E%3Ccircle cx='700' cy='355' r='5' fill='rgba(255,140,40,0.2)' stroke='rgba(255,140,40,0.35)' stroke-width='1'/%3E%3Ccircle cx='620' cy='355' r='5' fill='rgba(255,140,40,0.2)' stroke='rgba(255,140,40,0.35)' stroke-width='1'/%3E%3Ccircle cx='625' cy='305' r='5' fill='rgba(255,140,40,0.2)' stroke='rgba(255,140,40,0.35)' stroke-width='1'/%3E%3Cline x1='650' y1='330' x2='690' y2='310' stroke='rgba(255,140,40,0.3)' stroke-width='1.5'/%3E%3Cline x1='650' y1='330' x2='700' y2='355' stroke='rgba(255,140,40,0.3)' stroke-width='1.5'/%3E%3Cline x1='650' y1='330' x2='620' y2='355' stroke='rgba(255,140,40,0.3)' stroke-width='1.5'/%3E%3Cline x1='650' y1='330' x2='625' y2='305' stroke='rgba(255,140,40,0.3)' stroke-width='1.5'/%3E%3C!-- Large faint circle --%3E%3Ccircle cx='400' cy='200' r='180' fill='none' stroke='rgba(255,140,40,0.06)' stroke-width='1'/%3E%3Ccircle cx='400' cy='200' r='130' fill='none' stroke='rgba(255,140,40,0.05)' stroke-width='1'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
opacity: 1;
pointer-events: none;
z-index: 1;
}
/* Dark vignette on edges to ground the section */
.fh-newsletter-strip::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.55) 100%);
pointer-events: none;
z-index: 1;
}
.fh-newsletter-strip .fh-wrap {
position: relative;
z-index: 2;
}
.fh-newsletter-strip .fh-nl-bg-word { display: none; }
.fh-newsletter-strip .fh-nl-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 72px;
align-items: center;
position: relative;
}
.fh-newsletter-strip .fh-nl-icon {
font-size: 36px;
margin-bottom: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px; height: 64px;
background: rgba(0,0,0,0.3);
border: 1.5px solid rgba(255,255,255,0.2);
border-radius: 16px;
line-height: 1;
backdrop-filter: blur(4px);
}
.fh-newsletter-strip .fh-nl-headline {
font-family: var(--fh-display);
font-size: clamp(28px, 4vw, 50px);
font-weight: 900;
letter-spacing: -0.03em;
line-height: 1.05;
color: #fff;
margin: 0 0 16px;
text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}
.fh-newsletter-strip .fh-nl-sub {
font-family: var(--fh-serif);
font-size: 16px;
line-height: 1.7;
color: rgba(255,255,255,0.75);
margin: 0;
}
.fh-newsletter-strip .fh-nl-right {
display: flex;
flex-direction: column;
}
.fh-newsletter-strip .fh-nl-form {
display: flex;
flex-direction: row;
gap: 0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 0 0 1.5px rgba(255,255,255,0.2), 0 8px 32px rgba(0,0,0,0.3);
margin-bottom: 14px;
transition: box-shadow .2s;
}
.fh-newsletter-strip .fh-nl-form:focus-within {
box-shadow: 0 0 0 2px #fff, 0 8px 32px rgba(0,0,0,0.3);
}
.fh-newsletter-strip .fh-nl-input {
flex: 1;
min-width: 0;
padding: 16px 18px;
background: rgba(0,0,0,0.35);
border: none;
color: #fff;
font-family: var(--fh-sans);
font-size: 14px;
outline: none;
backdrop-filter: blur(8px);
}
.fh-newsletter-strip .fh-nl-input::placeholder {
color: rgba(255,255,255,0.35);
}
.fh-newsletter-strip .fh-nl-btn {
flex-shrink: 0;
padding: 16px 24px;
background: #fff;
color: #1A0800;
border: none;
font-family: var(--fh-sans);
font-size: 12.5px;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
transition: background .15s, color .15s;
}
.fh-newsletter-strip .fh-nl-btn:hover {
background: #FFE8D6;
color: #A33800;
}
.fh-newsletter-strip .fh-nl-note {
font-family: var(--fh-sans);
font-size: 11.5px;
color: rgba(255,255,255,0.45);
margin: 0;
display: flex;
align-items: center;
gap: 6px;
}
.fh-newsletter-strip .fh-nl-note::before {
content: '';
display: inline-block;
width: 5px; height: 5px;
border-radius: 50%;
background: rgba(255,255,255,0.45);
flex-shrink: 0;
}
@media (max-width: 860px) {
.fh-newsletter-strip .fh-nl-inner { grid-template-columns: 1fr; gap: 36px; }
.fh-newsletter-strip { padding: 60px 0; }
}
@media (max-width: 460px) {
.fh-newsletter-strip .fh-nl-form { flex-direction: column; border-radius: 8px; overflow: visible; box-shadow: none; }
.fh-newsletter-strip .fh-nl-input { border-radius: 8px; margin-bottom: 8px; box-shadow: 0 0 0 1.5px rgba(255,255,255,0.2); }
.fh-newsletter-strip .fh-nl-btn { border-radius: 8px; padding: 15px; width: 100%; }
}