/*
Theme Name: Forefront
Theme URI: https://www.forefrontmag.com/
Author: Forefront Magazine
Description: Standalone classic theme for the forefrontmag.com archive. Brief 04 (2026-09-21): recreates the Claude Design prototype — curated library, no dates, randomized home, six function colours. No parent theme, no build step.
Version: 1.0.2
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: forefront
Update URI: https://www.forefrontmag.com/no-updates/forefront
*/

/* ---------- Tokens (README § Design tokens) ---------- */
:root {
	--ff-canvas: #e9ebee;
	--ff-page: #f7f8f9;
	--ff-ink: #15181c;
	--ff-secondary: #5c6572;
	--ff-muted: #8a929c;
	--ff-rule: #dde1e5;
	--ff-rule-2: #e6e9ec;
	--ff-border: #cfd4da;
	--ff-dark: #15181c;
	--ff-dark-2: #c9d1da;
	--ff-dark-muted: #9fb4c9;
	--ff-cyan: #00b0dc;
	--ff-cyan-text: #0088ab;
	--ff-cyan-tint: #e6f7fc;
	--ff-link-hover: #2f5d8a;
	--ff-fn: #00b0dc;
	--ff-tint: #7fdcf4;
	--ff-sans: 'Instrument Sans', Helvetica, Arial, sans-serif;
	--ff-serif: 'Bodoni Moda', 'Didot', serif;
	--ff-jost: Jost, 'Century Gothic', sans-serif;
	--ff-pad: clamp(20px, 4vw, 40px);
	--ff-r-thumb: 4px;
	--ff-r-card: 6px;
	--ff-r-pill: 999px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--ff-canvas);
	color: var(--ff-ink);
	font-family: var(--ff-sans);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
a { color: var(--ff-ink); text-decoration: none; }
a:hover { color: var(--ff-link-hover); }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
p { margin: 0; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); }

.ff-frame {
	max-width: 1280px;
	margin: 0 auto;
	background: var(--ff-page);
	min-height: 100vh;
	box-shadow: 0 1px 0 #d6dade, 0 12px 40px rgba(20, 24, 28, .08);
}
.ff-main { padding: var(--ff-pad); }

.ff-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ff-fn); flex-shrink: 0; display: inline-block; }
.ff-dot-md { width: 10px; height: 10px; }
.ff-dot-lg { width: 14px; height: 14px; }

.ff-kicker { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; display: block; }
.ff-kicker-fn { color: var(--ff-fn); }
.ff-kicker-tint { color: var(--ff-tint); }
a.ff-kicker:hover { color: var(--ff-fn); text-decoration: underline; text-underline-offset: 3px; }

.ff-section-label { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ff-secondary); font-weight: 600; }
.ff-section-label-rule { margin: 56px 0 20px; border-bottom: 1px solid var(--ff-rule); padding-bottom: 10px; }
.ff-section-head { display: flex; justify-content: space-between; align-items: baseline; margin: 44px 0 16px; border-bottom: 1px solid var(--ff-rule); padding-bottom: 10px; gap: 12px; flex-wrap: wrap; }
.ff-section-count { font-size: 13px; color: var(--ff-muted); }
.ff-link { font-size: 14px; font-weight: 600; color: var(--ff-cyan-text); }
.ff-link:hover { color: var(--ff-cyan-text); text-decoration: underline; text-underline-offset: 3px; }

.ff-thumb { display: block; background: var(--ff-rule); border-radius: var(--ff-r-thumb); overflow: hidden; }
.ff-3x2 { aspect-ratio: 3 / 2; }
.ff-thumb img { width: 100%; height: 100%; object-fit: cover; }

.ff-page-title { font-size: clamp(28px, 3.5vw, 44px); letter-spacing: -.02em; line-height: 1.1; }
.ff-lede { font-size: 15px; color: var(--ff-secondary); }

/* ---------- Header (§ 1) ---------- */
.ff-header { border-bottom: 1px solid var(--ff-rule); padding: 0 clamp(16px, 4vw, 40px); }
.ff-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; flex-wrap: wrap; padding: 12px 0; }
.ff-logo { display: block; margin-right: auto; line-height: 0; }
.ff-logo img { width: auto; height: 50px; } /* 600×161 wordmark → 38px cap height for "Forefront" */
.ff-menu-btn { display: none; align-items: center; gap: 8px; border: 1px solid var(--ff-border); background: #fff; border-radius: var(--ff-r-pill); padding: 9px 14px; font-size: 14px; font-weight: 500; color: var(--ff-ink); cursor: pointer; min-height: 44px; }
.ff-nav { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 14px; font-weight: 500; }
.ff-nav-item { display: flex; align-items: center; gap: 8px; color: var(--ff-secondary); padding: 7px 12px 7px 10px; border-radius: var(--ff-r-pill); transition: background .15s, color .15s; }
.ff-nav-fn:hover, .ff-nav-fn.is-active { background: color-mix(in srgb, var(--ff-tint) 40%, transparent); color: var(--ff-ink); }
.ff-nav-item:not(.ff-nav-fn) { padding: 7px 12px; }
.ff-nav-item:not(.ff-nav-fn):hover, .ff-nav-item:not(.ff-nav-fn).is-active { background: var(--ff-cyan-tint); color: var(--ff-cyan-text); }
.ff-nav-foresight { font-family: var(--ff-serif); font-style: italic; font-size: 16px; }
.ff-nav-divider { width: 1px; height: 18px; background: var(--ff-border); margin: 0 6px; }

@media (max-width: 699px) {
	.ff-menu-btn { display: flex; }
	.ff-nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding: 8px 0 4px; }
	.ff-nav.is-open { display: flex; }
	.ff-nav-item { font-size: 17px; padding: 12px 14px; border-radius: 6px; }
	.ff-nav-item:not(.ff-nav-fn) { padding: 12px 14px; }
	.ff-nav-foresight { font-size: 19px; }
	.ff-nav-divider { width: 100%; height: 1px; margin: 8px 0; }
}

/* ---------- Footer (§ 7) ---------- */
.ff-footer { border-top: 1px solid var(--ff-rule); padding: clamp(24px, 4vw, 40px); }
.ff-footer-inner { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; font-size: 13px; color: var(--ff-secondary); align-items: center; }
.ff-footer-logo img { height: 22px; width: auto; }
.ff-footer-nav { display: flex; gap: 18px; flex-wrap: wrap; }
.ff-footer-nav a { color: var(--ff-secondary); }
.ff-footer-nav a:hover { color: var(--ff-cyan-text); }

/* ---------- Home (§ 2) ---------- */
.ff-home-intro { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.ff-mission { font-size: 14px; color: var(--ff-secondary); max-width: 60ch; text-wrap: pretty; }
.ff-shuffle { border: 1px solid var(--ff-cyan); background: #fff; border-radius: var(--ff-r-pill); padding: 8px 14px; font-size: 13px; font-weight: 500; cursor: pointer; color: var(--ff-cyan-text); }
.ff-shuffle:hover { background: var(--ff-cyan-tint); }

.ff-featured { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); background: var(--ff-dark); color: #fff; border-radius: var(--ff-r-card); overflow: hidden; }
.ff-featured:hover { color: #fff; }
.ff-featured-img { display: block; aspect-ratio: 3 / 2; min-height: 260px; background: #2a2f36; }
.ff-featured-img img { width: 100%; height: 100%; object-fit: cover; }
.ff-featured-body { padding: clamp(24px, 4vw, 48px); display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; }
.ff-featured-title { display: block; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.1; font-weight: 600; letter-spacing: -.02em; text-wrap: pretty; }
.ff-featured-dek { display: block; font-size: 16px; line-height: 1.5; color: var(--ff-dark-2); text-wrap: pretty; }
.ff-featured-meta { display: block; font-size: 14px; color: var(--ff-dark-muted); }
.ff-featured-meta:empty { display: none; }

.ff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 28px 24px; }
.ff-card { display: flex; flex-direction: column; gap: 10px; }
.ff-card-title { display: block; font-size: 18px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; text-wrap: pretty; }
.ff-card-dek { display: block; font-size: 14px; line-height: 1.45; color: var(--ff-secondary); text-wrap: pretty; }
.ff-card-meta { display: block; font-size: 13px; color: var(--ff-muted); }
.ff-card-meta:empty { display: none; }
.ff-card .ff-kicker { font-size: 11px; }
.ff-card-compact { gap: 8px; }
.ff-card-compact .ff-card-title { font-size: 16px; line-height: 1.3; letter-spacing: 0; }

.ff-foresight { margin-top: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 32px 48px; padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 40px); background: #fff; border: 1px solid var(--ff-rule); border-radius: var(--ff-r-card); }
.ff-foresight-intro { display: flex; flex-direction: column; gap: 12px; max-width: 34ch; }
.ff-foresight-title { font-family: var(--ff-serif); font-style: italic; font-weight: 400; font-size: clamp(30px, 3vw, 40px); letter-spacing: -.01em; }
.ff-foresight-intro p { font-size: 15px; line-height: 1.5; color: var(--ff-secondary); text-wrap: pretty; }
.ff-foresight-intro .ff-link { margin-top: 6px; }
.ff-foresight-list { display: flex; flex-direction: column; min-width: 0; }
.ff-fs-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px 0; border-top: 1px solid var(--ff-rule-2); }
.ff-fs-thumb { display: block; aspect-ratio: 1; border-radius: var(--ff-r-thumb); overflow: hidden; background: var(--ff-rule); }
.ff-fs-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ff-fs-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ff-fs-title { font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; text-wrap: pretty; }
.ff-fs-dek { font-size: 14px; line-height: 1.45; color: var(--ff-secondary); text-wrap: pretty; }
.ff-fs-by { font-size: 12px; color: var(--ff-muted); }

.ff-tiles { margin-top: 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.ff-tile { border: 1px solid var(--ff-rule); border-radius: var(--ff-r-card); padding: 18px 20px; background: #fff; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ff-tile:hover { border-color: var(--ff-cyan); color: var(--ff-ink); }
.ff-tile-name { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.ff-tile-count { font-size: 13px; color: var(--ff-muted); white-space: nowrap; }

/* ---------- Article (§ 3) ---------- */
.ff-article-head { max-width: 1040px; margin: 0 auto; }
.ff-article-title { margin: 14px 0 16px; font-size: clamp(30px, 4.2vw, 52px); line-height: 1.05; letter-spacing: -.025em; max-width: 22ch; text-wrap: pretty; }
.ff-article-dek { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.45; color: var(--ff-secondary); max-width: 60ch; text-wrap: pretty; }
.ff-article-meta { display: flex; gap: 6px 20px; flex-wrap: wrap; font-size: 14px; color: var(--ff-muted); margin: 22px 0 28px; padding-top: 14px; border-top: 1px solid var(--ff-rule); }
.ff-article-meta a { color: var(--ff-ink); font-weight: 500; }
.ff-hero { aspect-ratio: 16 / 9; background: var(--ff-rule); border-radius: var(--ff-r-card); overflow: hidden; }
.ff-hero img { width: 100%; height: 100%; object-fit: cover; }
.ff-hero-caption { font-size: 13px; color: var(--ff-muted); margin-top: 10px; }

.ff-body { max-width: 680px; margin: 40px auto 0; font-size: 18px; line-height: 1.65; display: flow-root; overflow-wrap: anywhere; }
.ff-body > :first-child { margin-top: 0; }
.ff-body p { margin: 0 0 22px; text-wrap: pretty; }
.ff-body h2, .ff-body h3 { margin: 34px 0 16px; font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.ff-body h4, .ff-body h5 { margin: 28px 0 12px; font-size: 18px; font-weight: 600; }
.ff-body ul, .ff-body ol { margin: 0 0 22px; padding-left: 1.4em; }
.ff-body li { margin: 0 0 .4em; }
.ff-body a { color: var(--ff-cyan-text); text-decoration: underline; text-decoration-color: #c9d3dc; text-underline-offset: 3px; }
.ff-body a:hover { text-decoration-color: currentColor; }
.ff-body img { border-radius: var(--ff-r-thumb); }
.ff-body iframe { max-width: 100%; }
.ff-body hr { border: 0; border-top: 1px solid var(--ff-rule); margin: 32px 0; }
.ff-body .clear { clear: both; }

/* WordPress alignment classes, as the editors used them */
.ff-body .alignright, .ff-body img.alignright, .ff-body a img.alignright { float: right; margin: 6px 0 18px 28px; max-width: min(50%, 400px); }
.ff-body .alignleft, .ff-body img.alignleft, .ff-body a img.alignleft { float: left; margin: 6px 28px 18px 0; max-width: min(50%, 400px); }
.ff-body .aligncenter, .ff-body img.aligncenter { display: block; margin: 32px auto; }
.ff-body .alignnone, .ff-body img.alignnone { margin: 32px 0; }
.ff-body .alignnone.size-full, .ff-body img.size-large { width: 100%; }
.ff-body a > img { display: inline-block; }
@media (max-width: 599px) {
	.ff-body .alignright, .ff-body .alignleft, .ff-body img.alignright, .ff-body img.alignleft, .ff-body a img.alignright, .ff-body a img.alignleft { float: none; margin: 24px auto; max-width: 100%; }
}

/* Pull quote */
.ff-body blockquote { margin: 32px 0; clear: both; padding: 0 0 0 22px; border-left: 3px solid var(--ff-fn); font-size: 24px; line-height: 1.35; font-weight: 500; letter-spacing: -.01em; color: var(--ff-ink); text-wrap: pretty; }
.ff-body blockquote p { margin: 0 0 .5em; }
.ff-body blockquote cite { display: block; margin-top: 8px; font-size: 14px; font-weight: 400; font-style: normal; color: var(--ff-muted); }

/* Figures / captions */
.ff-body figure, .ff-body .wp-caption { margin: 32px 0; clear: both; max-width: 100%; }
.ff-body .wp-caption.alignright, .ff-body .wp-caption.alignleft { clear: none; }
.ff-body .wp-caption img { margin: 0; }
.ff-body figcaption, .ff-body .wp-caption-text { font-size: 13px; color: var(--ff-muted); margin-top: 8px; line-height: 1.45; }

/* Two-column interview layout (Brief 02 [columns]) */
.ff-body .columns { display: flex; flex-wrap: wrap; gap: 0 2em; }
.ff-body .columns .column { flex: 1 1 18em; min-width: 0; }

/* Q&A */
.ff-q { display: block; font-weight: 600; color: var(--ff-ink); font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.ff-q-label { color: var(--ff-fn); }
.ff-q-label::after { content: '\00a0'; }
.ff-a-label { color: var(--ff-secondary); font-weight: 700; }

/* Inline sponsor image → Sponsored box */
.ff-ad { display: flex; flex-direction: column; gap: 6px; margin: 32px auto; clear: both; max-width: 400px; padding: 16px; background: #fff; border: 1px solid var(--ff-rule-2); border-radius: var(--ff-r-card); }
.ff-ad-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ff-muted); }
.ff-ad img { width: 100%; height: auto; border-radius: 3px; float: none; margin: 0; max-width: 100%; }
.ff-ad a { display: block; line-height: 0; }

/* House "Subscribe" banner (attachment 396, subscribe-ad1.jpg, 81 posts): hidden at render time per George's ruling 3 (Brief 05).
   Content untouched. Match by attachment class and by filename; also hide the enclosing <a>/<p> when the banner is their only child so no empty gap remains. */
img.wp-image-396, img[src*="subscribe-ad1"] { display: none; }
a:has(> img.wp-image-396:only-child), a:has(> img[src*="subscribe-ad1"]:only-child) { display: none; }
p:has(> img.wp-image-396:only-child), p:has(> img[src*="subscribe-ad1"]:only-child),
p:has(> a:only-child > img.wp-image-396:only-child), p:has(> a:only-child > img[src*="subscribe-ad1"]:only-child) { display: none; }

/* Print sidebars transcribed to live text */
.ff-sidebar { margin: 32px 0 22px; clear: both; background: #fff; border: 1px solid var(--ff-rule); border-radius: var(--ff-r-card); padding: 28px; display: flex; flex-direction: column; gap: 14px; font-size: 16px; line-height: 1.55; }
.ff-sidebar h3, .ff-sidebar .ff-sidebar-title { margin: 0; font-family: var(--ff-serif); font-style: italic; font-weight: 400; font-size: 28px; letter-spacing: -.01em; text-wrap: pretty; line-height: 1.15; }
.ff-sidebar p { margin: 0; }
.ff-sidebar ul { margin: 0; padding-left: 1.2em; }
.ff-sidebar-dark { background: var(--ff-dark); color: #fff; border-color: var(--ff-dark); gap: 16px; }
.ff-sidebar-dark h3, .ff-sidebar-dark .ff-sidebar-title { font-size: 30px; }
.ff-sidebar-dark p strong, .ff-sidebar-dark dt { color: var(--ff-tint); }
.ff-sidebar-dark a { color: #fff; }
.ff-sidebar dl { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ff-sidebar dt { font-weight: 700; }
.ff-sidebar dd { margin: 2px 0 0; }
.ff-sidebar-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ff-muted); }
.ff-sidebar-dark .ff-sidebar-label { color: var(--ff-dark-muted); }

/* Key Partners → pills */
.ff-partners { margin-top: 28px; clear: both; padding-top: 22px; border-top: 1px solid var(--ff-rule); display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 1.5; }
.ff-partners-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ff-muted); }
.ff-partner-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ff-partner { border: 1px solid var(--ff-rule); background: #fff; border-radius: var(--ff-r-pill); padding: 6px 14px; color: var(--ff-ink); font-weight: 500; display: inline-block; line-height: 1.4; max-width: 100%; text-decoration: none; }
a.ff-partner:hover { border-color: var(--ff-cyan); color: var(--ff-ink); text-decoration: none; }
.ff-partner-desc { color: var(--ff-muted); font-weight: 400; }
.ff-partners-plain ul { margin: 0; padding-left: 1.2em; }
.ff-partners-plain a { color: var(--ff-cyan-text); }

/* More in {Function} */
.ff-more { max-width: 1040px; margin: 64px auto 0; border-top: 1px solid var(--ff-rule); padding-top: 28px; }
.ff-more .ff-section-label { margin-bottom: 16px; }
.ff-grid-more { gap: 24px; }

/* ---------- Archive list (§ 4) ---------- */
.ff-archive-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--ff-rule); padding-bottom: 20px; margin-bottom: 28px; }
.ff-archive-title { font-size: clamp(28px, 3.5vw, 44px); letter-spacing: -.02em; display: flex; align-items: center; gap: 14px; line-height: 1.1; }
.ff-archive-count { font-size: 14px; color: var(--ff-muted); white-space: nowrap; }
.ff-rows { display: flex; flex-direction: column; }
.ff-row { display: grid; grid-template-columns: minmax(120px, 240px) 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--ff-rule-2); align-items: start; }
.ff-row-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ff-row-title { font-size: clamp(18px, 2vw, 24px); line-height: 1.25; letter-spacing: -.01em; text-wrap: pretty; }
.ff-row-dek { font-size: 15px; line-height: 1.45; color: var(--ff-secondary); text-wrap: pretty; }
.ff-row-meta { font-size: 13px; color: var(--ff-muted); }
.ff-empty { color: var(--ff-secondary); }
.ff-search-again { margin: -8px 0 24px; }

.pagination, .navigation.pagination { margin-top: 32px; }
.nav-links { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 14px; font-weight: 500; }
.nav-links .page-numbers { padding: 7px 12px; border-radius: var(--ff-r-pill); border: 1px solid var(--ff-rule); background: #fff; color: var(--ff-secondary); }
.nav-links .page-numbers.current { background: var(--ff-cyan-tint); color: var(--ff-cyan-text); border-color: var(--ff-cyan-tint); }
.nav-links .page-numbers.dots { border: 0; background: none; }
.nav-links a.page-numbers:hover { border-color: var(--ff-cyan); color: var(--ff-ink); }

/* ---------- Search form ---------- */
.ff-searchform { display: flex; gap: 8px; max-width: 480px; margin: 20px 0 28px; }
.ff-searchform input { flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 10px 14px; border: 1px solid var(--ff-border); border-radius: var(--ff-r-pill); background: #fff; color: var(--ff-ink); }
.ff-searchform input:focus { outline: 2px solid var(--ff-cyan); outline-offset: 1px; }
.ff-searchform button { border: 1px solid var(--ff-cyan); background: #fff; border-radius: var(--ff-r-pill); padding: 8px 16px; font-size: 14px; font-weight: 500; color: var(--ff-cyan-text); cursor: pointer; }
.ff-searchform button:hover { background: var(--ff-cyan-tint); }
.ff-404 .ff-lede { margin-top: 12px; }
.ff-404 .ff-tiles { margin-top: 8px; }

/* ---------- Plain pages ---------- */
.ff-page .ff-page-title { margin-bottom: 8px; }
.ff-page-body { margin-top: 24px; margin-left: 0; }
.ff-page-body iframe { width: 100%; }

/* ---------- Issues (§ 5) ---------- */
.ff-issues-head { border-bottom: 1px solid var(--ff-rule); padding-bottom: 20px; margin-bottom: 28px; }
.ff-issues-head .ff-page-title { margin-bottom: 8px; }
.ff-issue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 28px 20px; }
.ff-issue { display: flex; flex-direction: column; gap: 10px; }
.ff-cover { display: block; aspect-ratio: 3 / 4; border-radius: 3px; box-shadow: 0 1px 3px rgba(20, 24, 28, .15); background: repeating-linear-gradient(135deg, #e3e6ea 0 8px, #eceef1 8px 16px); border-top: 6px solid var(--ff-fn); overflow: hidden; }
.ff-cover img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.ff-issue-name { font-size: 14px; font-weight: 600; }
.ff-issue-count { font-size: 13px; color: var(--ff-muted); margin-top: -6px; }

/* ---------- About (§ 6) ---------- */
.ff-about-intro { max-width: 680px; }
.ff-about-intro .ff-page-title { margin-bottom: 24px; }
.ff-about-text { font-size: 18px; line-height: 1.6; display: flex; flex-direction: column; gap: 18px; }
.ff-about-text p { text-wrap: pretty; }
.ff-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 24px; }
.ff-member { display: flex; flex-direction: column; gap: 10px; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ff-ink); transition: opacity .15s; border-radius: var(--ff-r-card); }
.ff-member:focus-visible { outline: 2px solid var(--ff-cyan); outline-offset: 4px; }
.ff-team.has-open .ff-member:not(.is-open) { opacity: .55; }
.ff-headshot { display: flex; aspect-ratio: 1; border-radius: var(--ff-r-card); overflow: hidden; background: var(--ff-rule); align-items: center; justify-content: center; position: relative; }
.ff-headshot img { width: 100%; height: 100%; object-fit: cover; object-position: center top; position: absolute; inset: 0; }
.ff-initials { font-size: 28px; font-weight: 600; color: var(--ff-muted); }
.ff-member.is-open .ff-headshot { box-shadow: 0 0 0 3px var(--ff-cyan); }
.ff-member-name { font-size: 15px; font-weight: 600; display: flex; justify-content: space-between; gap: 8px; }
.ff-chev { color: var(--ff-muted); font-weight: 400; }
.ff-member.is-open .ff-chev { color: var(--ff-cyan-text); }
.ff-member-role { font-size: 13px; color: var(--ff-muted); margin-top: -6px; }
.ff-bio { grid-column: 1 / -1; background: #fff; border: 1px solid var(--ff-rule); border-radius: var(--ff-r-card); padding: clamp(20px, 3vw, 32px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 20px 40px; }
.ff-bio[hidden] { display: none; }
.ff-bio-side { display: flex; flex-direction: column; gap: 6px; max-width: 260px; }
.ff-bio-name { font-size: 22px; letter-spacing: -.01em; }
.ff-bio-role { font-size: 14px; color: var(--ff-secondary); }
.ff-bio-side .ff-link { margin-top: 8px; }
.ff-bio-close { align-self: flex-start; margin-top: 12px; border: 1px solid var(--ff-border); background: #fff; border-radius: var(--ff-r-pill); padding: 6px 12px; font-size: 13px; color: var(--ff-secondary); cursor: pointer; }
.ff-bio-close:hover { border-color: var(--ff-cyan); color: var(--ff-ink); }
.ff-bio-text { display: flex; flex-direction: column; gap: 14px; font-size: 16px; line-height: 1.6; grid-column: span 2; min-width: 0; }
@media (max-width: 519px) { .ff-bio-text { grid-column: auto; } }
.ff-bio-text p { text-wrap: pretty; }
.ff-writers { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 15px; line-height: 1.7; max-width: 70ch; }
.ff-writer { display: flex; gap: 10px; }
.ff-writer a { color: #1d2229; font-weight: 500; text-decoration: underline; text-decoration-color: #c9d3dc; text-underline-offset: 3px; }
.ff-writer a:hover { color: var(--ff-cyan-text); text-decoration-color: var(--ff-cyan-text); }
.ff-writer-sep { color: var(--ff-muted); }

/* ---------- Admin bar offset ---------- */
body.admin-bar .ff-frame { min-height: calc(100vh - 32px); }

/* A sponsor image the editors placed inside a floated caption block: the box wins, the caption stays under it */
.ff-body .wp-caption:has(.ff-ad) { float: none; margin: 32px auto; max-width: 400px; width: auto !important; }
.ff-body .wp-caption:has(.ff-ad) .ff-ad { margin: 0; }

/* Sidebar internals (transcribed print sidebars, step 7c) */
.ff-sidebar h4 { margin: 8px 0 -6px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--ff-secondary); }
.ff-sidebar-dark h4 { color: var(--ff-tint); }
.ff-sidebar-intro { color: var(--ff-secondary); }
.ff-sidebar-dark .ff-sidebar-intro { color: var(--ff-dark-2); }
.ff-stat { display: flex; align-items: baseline; gap: 10px; }
.ff-stat strong { font-size: 28px; line-height: 1; letter-spacing: -.02em; color: var(--ff-fn); font-family: var(--ff-serif); font-style: italic; font-weight: 400; }
.ff-sidebar-dark .ff-stat strong { color: var(--ff-tint); }
.ff-stat span { color: var(--ff-secondary); }
.ff-sidebar-dark .ff-stat span { color: var(--ff-dark-2); }
.ff-body .ff-sidebar-quote { margin: 0; padding: 0 0 0 16px; border-left: 3px solid var(--ff-fn); font-size: 18px; line-height: 1.45; font-weight: 500; }
.ff-sidebar-dark .ff-sidebar-quote { border-color: var(--ff-tint); color: #fff; }
.ff-sidebar-dark .ff-sidebar-quote cite { color: var(--ff-dark-muted); }

/* Portrait featured images: keep the face — anchor the 16:9 crop to the top of the photo */
/* Portrait featured images (Brief 06 step 4b, George 2026-09-24): show the whole image instead of a 16:9 crop.
   The box keeps its width, is capped at 70vh / 640px, the image is contained and centred at its natural ratio, and a
   blurred, darkened copy of the same image (--ff-hero-src, set on the div in single.php) fills the box behind it.
   Landscape heroes keep the 16:9 + cover rule above. No JS. */
.ff-hero-portrait { position: relative; isolation: isolate; aspect-ratio: auto; height: min(70vh, 640px); max-height: 70vh; }
.ff-hero-portrait::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ff-hero-src) center / cover no-repeat var(--ff-rule); filter: blur(24px) brightness(.6); transform: scale(1.1); }
.ff-hero-portrait img { position: relative; width: 100%; height: 100%; object-fit: contain; object-position: center; }
@media (max-width: 640px) { .ff-hero-portrait { height: min(80vh, 640px); max-height: 80vh; } }