/*
Theme Name:   Fery's Journal
Theme URI:    https://www.ferysjournal.com/
Description:  Editorial child theme of Twenty Twenty-Five for Fery's Journal. Black, photography-led, built for long reading.
Author:       Fery Setiawan
Template:     twentytwentyfive
Version:      1.0.8
Requires at least: 6.7
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  fery-journal
*/

/* Every rule below targets a class used in this theme's own templates
   (prefixed fj-) or a core block inside them, so nothing leaks into
   other screens. Colours and fonts come from theme.json. */

/* ================= Base ================= */
:root {
	--fj-ink: #F2F2F0;
	--fj-soft: #D6D6D3;
	--fj-mist: #BDBDBA;
	--fj-grey: #8C8C8C;
	--fj-line: #262626;
	--fj-panel: #151515;
}
html { background: #000; }
body { -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .wp-block-post-title, .wp-block-query-title { font-stretch: 75%; }
::selection { background: var(--fj-ink); color: #000; }
:where(a, button, input, [tabindex]):focus-visible { outline: 2px solid var(--fj-ink); outline-offset: 3px; }

/* Labels and arrow links */
.fj-label,
.fj-label a,
.wp-block-post-date.fj-label,
.wp-block-post-time-to-read.fj-label {
	font-family: Archivo, sans-serif;
	font-size: 11px !important;
	line-height: 1.4;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--fj-grey);
}
.fj-label a:hover { color: var(--fj-ink); }
.fj-label .wp-block-post-terms__separator { color: var(--fj-grey); }
.fj-link { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.fj-link a { border-bottom: 1px solid var(--fj-ink); padding-bottom: 6px; }
.fj-section { border-top: 1px solid var(--fj-line); }

/* ================= Header ================= */
.fj-header { border-bottom: 1px solid var(--fj-line); }
.fj-header .alignwide { align-items: center !important; gap: 24px; }
.fj-wordmark, .fj-wordmark a {
	font-weight: 800 !important;
	font-size: 18px !important;
	letter-spacing: .22em;
	font-stretch: 112%;
	text-transform: uppercase;
	white-space: nowrap;
}
.fj-nav,
.fj-nav .wp-block-navigation-item,
.fj-nav .wp-block-navigation-item__content {
	font-size: 12px !important;
	font-weight: 500;
	line-height: 1.2 !important;
	letter-spacing: .16em;
	text-transform: uppercase;
}
.fj-nav.wp-block-navigation,
.fj-nav .wp-block-navigation__responsive-container-content,
.fj-nav .wp-block-navigation__container { flex-wrap: nowrap !important; }
.fj-nav .wp-block-navigation__container { gap: 26px !important; align-items: center; }
.fj-nav .wp-block-navigation-item__content { white-space: nowrap; }
.fj-nav .wp-block-search__button { background: transparent; color: var(--fj-ink); padding: 8px; border: 0; }
.fj-nav .wp-block-search__button svg { width: 18px; height: 18px; }
.fj-nav .wp-block-search__input { background: #000; color: var(--fj-ink); border: 1px solid var(--fj-line); }
.fj-btn-outline .wp-block-button__link {
	background: transparent !important;
	color: var(--fj-ink) !important;
	border: 1px solid var(--fj-ink) !important;
	padding: 12px 18px !important;
	font-size: 11px !important;
	white-space: nowrap;
}
.fj-btn-outline .wp-block-button__link:hover { background: var(--fj-ink) !important; color: #000 !important; }
.wp-block-navigation__responsive-container.is-menu-open { background: #000 !important; color: var(--fj-ink) !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { font-size: 28px !important; font-weight: 800; font-stretch: 80%; }
/* Phone menu links: the 12px rule above also hit the links, so size them here */
.fj-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 28px !important; font-weight: 800; font-stretch: 80%; letter-spacing: .02em; padding: 6px 0;
}
/* 44px tap targets for the menu open and close buttons */
.fj-nav .wp-block-navigation__responsive-container-open,
.fj-nav .wp-block-navigation__responsive-container-close { padding: 10px; margin: -10px; }
/* "Get updates" inside the menu: only in the phone menu (the header button covers wider screens) */
.fj-nav .fj-nav-subscribe { display: none !important; }
.fj-nav .is-menu-open .fj-nav-subscribe { display: flex !important; }

/* ================= Breadcrumbs (Rank Math) ================= */
/* The shortcode block can't carry a class, so these target Rank Math's own markup. */
.rank-math-breadcrumb p {
	margin: 0;
	font-family: Archivo, sans-serif;
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--fj-grey);
}
.rank-math-breadcrumb a { color: var(--fj-grey); }
.rank-math-breadcrumb a:hover { color: var(--fj-ink); }
.rank-math-breadcrumb .separator { font-size: 0; }
.rank-math-breadcrumb .separator::after { content: "/"; margin: 0 10px; font-size: 11px; }
/* The H1 below already names the page, so hide the last crumb and its separator. */
.rank-math-breadcrumb .last,
.rank-math-breadcrumb .last + .separator,
.rank-math-breadcrumb .separator:has(+ .last) { display: none; }

/* ================= Homepage hero ================= */
.fj-hero-title { font-size: clamp(44px, 7.5vw, 96px) !important; line-height: .9 !important; font-stretch: 75%; }
.fj-hero-intro { max-width: 560px; margin: 0; font-family: Newsreader, Georgia, serif; font-size: 20px; line-height: 1.5; color: var(--fj-mist); }

/* ================= Start here ================= */
.fj-start .wp-block-post-template { gap: 32px; }
.fj-start .wp-block-post-featured-image { margin: 0 0 18px !important; background: var(--fj-panel); }
.fj-start .wp-block-post-featured-image img { filter: grayscale(1); transition: filter .3s; }
.fj-start li:hover .wp-block-post-featured-image img { filter: none; }
.fj-start .wp-block-post-title { margin-top: 12px; font-size: 24px !important; font-weight: 700; line-height: 1.1; font-stretch: 90%; }
.fj-start .wp-block-post-excerpt { margin-top: 10px; font-size: 17px !important; }
.fj-start .wp-block-post-excerpt__more-text { display: none; }

/* ================= Story list (homepage, archives, search) ================= */
.fj-feed .wp-block-post-template { counter-reset: fj; list-style: none; margin: 0; padding: 0; }
.fj-feed .wp-block-post-template > li {
	counter-increment: fj;
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) 220px 120px;
	grid-template-areas: "num title meta thumb";
	align-items: center;
	column-gap: 24px;
	margin: 0;
	padding: 22px 0;
	border-top: 1px solid var(--fj-line);
}
.fj-feed .wp-block-post-template > li:last-child { border-bottom: 1px solid var(--fj-line); }
.fj-feed .wp-block-post-template > li::before {
	content: counter(fj, decimal-leading-zero);
	grid-area: num;
	font-size: 13px;
	letter-spacing: .1em;
	color: var(--fj-grey);
}
.fj-feed li > * { margin: 0 !important; }
.fj-feed .fj-title { grid-area: title; font-size: 26px !important; font-weight: 700; line-height: 1.15; font-stretch: 90%; }
.fj-feed .fj-meta { grid-area: meta; display: flex; flex-direction: column; gap: 6px !important; }
.fj-feed .fj-thumb { grid-area: thumb; height: 72px; overflow: hidden; background: var(--fj-panel); }
.fj-feed .fj-thumb img { width: 100% !important; height: 72px !important; aspect-ratio: auto !important; object-fit: cover; filter: grayscale(1); transition: filter .3s; }
.fj-feed li:hover .fj-thumb img { filter: none; }
.fj-feed .fj-excerpt { grid-area: excerpt; display: none; }
.fj-feed li:hover .fj-title a { color: var(--fj-grey); }
.fj-excerpt .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: 22px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--fj-ink);
	font-family: Archivo, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--fj-ink);
}

/* Lead story: first item on homepage page 1 only */
body.home:not(.paged) .fj-lead .wp-block-post-template > li:first-child {
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
	grid-template-rows: 1fr auto auto auto;
	grid-template-areas: "thumb ." "thumb meta" "thumb title" "thumb excerpt";
	column-gap: 48px;
	row-gap: 22px;
	align-items: end;
	padding: 0 0 120px;
	border-top: 0;
}
body.home:not(.paged) .fj-lead .wp-block-post-template > li:first-child::before { content: none; }
body.home:not(.paged) .fj-lead li:first-child .fj-thumb { height: auto; align-self: stretch; }
body.home:not(.paged) .fj-lead li:first-child .fj-thumb img { height: 100% !important; aspect-ratio: 3 / 2 !important; filter: none; }
body.home:not(.paged) .fj-lead li:first-child .fj-meta { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 10px 18px !important; }
body.home:not(.paged) .fj-lead li:first-child .fj-title { font-size: clamp(32px, 3.2vw, 44px) !important; font-weight: 800; line-height: 1.02; font-stretch: 85%; }
body.home:not(.paged) .fj-lead li:first-child .fj-excerpt { display: block; }
body.home:not(.paged) .fj-lead li:nth-child(2) { position: relative; margin-top: 150px; }
body.home:not(.paged) .fj-lead li:nth-child(2)::after {
	content: "Stories";
	position: absolute;
	top: -118px;
	left: 0;
	font-size: 72px;
	font-weight: 900;
	font-stretch: 75%;
	line-height: 1;
	text-transform: uppercase;
	color: var(--fj-ink);
}

/* Pagination */
.fj-pager { margin-top: 48px !important; gap: 20px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.fj-pager .page-numbers { padding: 10px 14px; border: 1px solid var(--fj-line); }
.fj-pager .page-numbers.current { background: var(--fj-ink); color: #000; }

/* ================= Topic (pillar) cards ================= */
.fj-cats .wp-block-term-template {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 0 !important;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--fj-line);
	border-left: 1px solid var(--fj-line);
}
.fj-cats .wp-block-term-template > li {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0 0 24px;
	border-right: 1px solid var(--fj-line);
	border-bottom: 1px solid var(--fj-line);
}
.fj-cats .wp-block-term-template > li::before {
	content: "";
	display: block;
	aspect-ratio: 4 / 5;
	margin-bottom: 14px;
	background: var(--fj-panel) center / cover no-repeat;
	filter: brightness(.82);
	transition: filter .3s;
}
/* Full colour; the photo brightens and the topic name underlines on hover. */
.fj-cats .wp-block-term-template > li:hover::before,
.fj-cats .wp-block-term-template > li:focus-within::before { filter: none; }
.fj-cats li:hover .fj-catname a, .fj-cats li:focus-within .fj-catname a { text-decoration: underline; text-underline-offset: 4px; }
/* One photo per pillar (category IDs on this site). Swap the image URLs here.
   768px versions: about 1 MB for all four instead of 3.7 MB. */
.fj-cats li.term-129::before { background-image: url("/wp-content/uploads/2019/07/18_Bukit_Mencol_Seraya_Timur-768x402.png"); }
.fj-cats li.term-130::before { background-image: url("/wp-content/uploads/2026/06/Wordpress-Blog-Images-768x402.jpg"); }
.fj-cats li.term-132::before { background-image: url("/wp-content/uploads/2026/08/sunrise-photo-by-ferysjournal-768x402.png"); }
.fj-cats li.term-192::before { background-image: url("/wp-content/uploads/2026/10/LUSA-Bistro-Lounge-768x432.jpg"); }
.fj-cats li > * { margin: 0 24px !important; }
.fj-cats .fj-count { font-size: 40px; font-weight: 900; font-stretch: 75%; line-height: 1; }
.fj-cats .fj-catname { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; overflow-wrap: anywhere; }
.fj-cats .fj-catdesc, .fj-cats .fj-catdesc p { margin: 0; font-family: Newsreader, Georgia, serif; font-size: 16px; line-height: 1.45; color: var(--fj-mist); }

/* ================= Cards (Start here, archive slider, related) ================= */
.fj-cards .wp-block-post-featured-image { margin-bottom: 18px; background: var(--fj-panel); }
.fj-cards .wp-block-post-featured-image img { filter: grayscale(1); transition: filter .3s; }
.fj-cards li:hover .wp-block-post-featured-image img { filter: none; }
.fj-cards .wp-block-post-title { font-size: 24px !important; font-weight: 800; line-height: 1.1; font-stretch: 90%; }

/* Archive slider */
.fj-slider-head { margin-bottom: 28px !important; }
.fj-slider-head .fj-label { margin: 0; }
.fj-slider-nav { display: flex; gap: 8px; }
.fj-slider-nav button {
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--fj-line);
	border-radius: 0;
	background: #000;
	color: var(--fj-ink);
	font: 400 18px/1 Archivo, sans-serif;
	cursor: pointer;
}
.fj-slider-nav button:hover:not(:disabled) { border-color: var(--fj-ink); }
.fj-slider-nav button:disabled { opacity: .3; cursor: default; }
.fj-slider .wp-block-post-template {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 24px !important;
	margin: 0 !important;
	padding: 0 0 20px !important;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: #3a3a3a transparent;
}
.fj-slider .wp-block-post-template::-webkit-scrollbar { height: 4px; }
.fj-slider .wp-block-post-template::-webkit-scrollbar-thumb { background: #3a3a3a; }
.fj-slider .wp-block-post-template > li { flex: 0 0 clamp(240px, 26vw, 360px); min-width: 0; margin: 0 !important; scroll-snap-align: start; }
.fj-slider .wp-block-post-template:focus-visible { outline: 1px solid var(--fj-ink); outline-offset: 8px; }
.fj-slider .wp-block-post-featured-image { margin: 0 0 18px !important; }
.fj-slider .wp-block-post-title { font-size: 22px !important; }

/* ================= Newsletter ================= */
.fj-subscribe, .fj-subscribe h2, .fj-subscribe p { color: #000 !important; }
.fj-subscribe h2 { flex: 1 1 420px !important; min-width: 0; max-width: 720px; }
.fj-subscribe .fj-mc-wrap { flex: 1 1 320px; min-width: 0; max-width: 520px; }
.fj-mc { display: flex; flex-wrap: wrap; }
.fj-mc label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.fj-mc input[type=email] {
	flex: 1 1 260px;
	min-width: 0;
	height: 56px;
	padding: 0 18px;
	border: 1px solid #000;
	border-radius: 0;
	background: transparent;
	color: #000;
	font: 400 16px Archivo, sans-serif;
}
.fj-mc input[type=email]::placeholder { color: #555; }
.fj-mc button {
	height: 56px;
	padding: 0 28px;
	border: 1px solid #000;
	border-radius: 0;
	background: #000;
	color: var(--fj-ink);
	font: 600 12px Archivo, sans-serif;
	letter-spacing: .18em;
	text-transform: uppercase;
	cursor: pointer;
}
.fj-mc button:hover { background: #333; }
.fj-mc button:disabled { opacity: .6; cursor: progress; }
.fj-mc-status { margin: 14px 0 0; font-family: Newsreader, Georgia, serif; font-size: 18px; }
.fj-mc-status.is-error { font-weight: 600; }
.fj-mc-privacy { margin: 14px 0 0 !important; font-size: 13px; line-height: 1.5; }
.fj-mc-privacy a { text-decoration: underline; }
/* Same form on dark backgrounds (Get Updates page, About page) */
.fj-mc-dark input[type=email] { border-color: var(--fj-ink); color: var(--fj-ink); }
.fj-mc-dark input[type=email]::placeholder { color: var(--fj-grey); }
.fj-mc-dark button { background: var(--fj-ink); color: #000; border-color: var(--fj-ink); }
.fj-mc-dark ~ .fj-mc-status, .fj-mc-dark ~ .fj-mc-privacy { color: var(--fj-mist); }

/* ================= Footer ================= */
.fj-giant, .fj-giant a {
	font-size: clamp(56px, 13vw, 200px) !important;
	font-weight: 900 !important;
	font-stretch: 75%;
	line-height: .85 !important;
	letter-spacing: -.01em;
	text-transform: uppercase;
}
.fj-footer-row { border-top: 1px solid var(--fj-line); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--fj-grey); }
.fj-footer-row a { color: var(--fj-grey); }
.fj-footer-row a:hover { color: var(--fj-ink); }
.fj-footer-row p a { margin-right: 22px; }
.fj-footer-row p a:last-child { margin-right: 0; }

/* ================= Article ================= */
.fj-post-title { font-size: clamp(44px, 7vw, 112px) !important; line-height: .92 !important; }
.is-layout-constrained > .wp-block-post-featured-image.fj-hero-image.alignwide { max-width: 1120px; }
.wp-block-post-content a { border-bottom: 1px solid var(--fj-grey); }
.wp-block-post-content a:hover { color: var(--fj-ink); border-color: var(--fj-ink); }
.wp-block-post-content > p:first-of-type { font-size: 24px; line-height: 1.45; color: var(--fj-ink); }
.wp-block-post-content h2 { margin-top: 2.4em; font-size: 32px !important; font-weight: 800; font-stretch: 85%; line-height: 1.1; scroll-margin-top: 24px; }
.wp-block-post-content h3 { margin-top: 2em; font-size: 24px !important; }
.wp-block-post-content blockquote,
.wp-block-post-content .wp-block-quote {
	margin: 56px 0;
	padding: 0;
	border-left: 0;
	font-family: Archivo, sans-serif;
	font-size: 36px;
	font-weight: 800;
	font-stretch: 80%;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--fj-ink);
}
.wp-block-post-content p:empty { display: none; }
.wp-block-post-content figure img { height: auto; }
.wp-block-post-content figcaption { color: var(--fj-mist); font-style: italic; font-size: 15px; }

/* Fixed text sizes. theme.json sizes are fluid, which shrank body text to ~14px on phones. */
body { font-size: 17px; }
.wp-block-post-content { font-size: 20px !important; }
.wp-block-post-excerpt { font-size: 20px !important; }

/* Embeds never wider than the reading column */
.wp-block-post-content iframe { max-width: min(100%, var(--wp--style--global--content-size, 720px)); }
/* Map and YouTube players pasted as raw HTML (fixed pixel sizes) */
.wp-block-post-content :not(.wp-block-embed__wrapper) > iframe[src*="youtube.com/embed"],
.wp-block-post-content :not(.wp-block-embed__wrapper) > iframe[data-src*="youtube.com/embed"] {
	width: 100%; height: auto; aspect-ratio: 16 / 9;
}
.wp-block-post-content iframe[src*="google.com/maps"],
.wp-block-post-content iframe[data-src*="google.com/maps"] {
	width: 100%; height: auto; aspect-ratio: 4 / 3;
}
/* Raw embeds are inline elements: make them blocks so the column centres them */
.wp-block-post-content iframe[src*="google.com/maps"],
.wp-block-post-content iframe[data-src*="google.com/maps"],
.wp-block-post-content :not(.wp-block-embed__wrapper) > iframe[src*="youtube.com/embed"],
.wp-block-post-content :not(.wp-block-embed__wrapper) > iframe[data-src*="youtube.com/embed"] { display: block; margin-left: auto; margin-right: auto; }
/* Vertical videos (YouTube Shorts): phone-sized and centred */
.wp-block-post-content .wp-block-embed.wp-embed-aspect-9-16 { max-width: 405px; margin-left: auto; margin-right: auto; }

/* Tall portrait photos fit on a laptop screen */
@media (min-width: 782px) {
	.wp-block-post-content > .wp-block-image img { max-height: 85vh; width: auto; margin-left: auto; margin-right: auto; display: block; }
}

/* Contents list ("In this story") */
.fj-toc { margin: 40px 0; padding: 24px 0; border-top: 1px solid var(--fj-line); border-bottom: 1px solid var(--fj-line); }
.fj-toc ol { margin: 12px 0 0; padding-left: 1.4em; font-family: Archivo, sans-serif; font-size: 15px; line-height: 1.8; }
.fj-toc a { border-bottom: 0 !important; color: var(--fj-ink); }
.fj-toc a:hover { color: var(--fj-grey); }
.fj-toc .fj-toc-sub { list-style: none; margin-left: 1.1em; font-size: 14px; }
.fj-toc .fj-toc-sub a { color: var(--fj-mist); }

/* Quick Info box (pattern "Quick Info") */
.fj-quickinfo { margin: 40px 0 !important; padding: 28px 32px !important; background: var(--fj-panel); border-top: 1px solid var(--fj-line); }
.fj-quickinfo ul { margin: 12px 0 0; padding: 0; list-style: none; font-family: Archivo, sans-serif; font-size: 15px; line-height: 1.5; }
.fj-quickinfo li { position: relative; margin: 0 0 10px; padding-left: 130px; }
.fj-quickinfo li strong { position: absolute; top: 3px; left: 0; width: 120px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--fj-grey); }
.fj-quickinfo .fj-quickinfo-checked { margin: 16px 0 0 !important; font-size: 13px; color: var(--fj-grey); }

/* Disclosure line */
.fj-disclosure { margin-top: 40px !important; font-size: 16px !important; font-style: italic; color: var(--fj-mist) !important; }

/* Series box */
.fj-series { margin: 0 0 8px; padding: 24px 0; border-top: 1px solid var(--fj-line); border-bottom: 1px solid var(--fj-line); }
.fj-series-list { margin: 12px 0 0; padding-left: 1.4em; font-family: Archivo, sans-serif; font-size: 15px; line-height: 1.8; }
.fj-series-list [aria-current="page"] { color: var(--fj-grey); }

/* Tags, author, previous/next */
.fj-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.fj-tags a { display: inline-block; padding: 10px 14px; border: 1px solid var(--fj-line); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.fj-tags .wp-block-post-terms__separator { display: none; }
.fj-author { gap: 28px !important; align-items: center !important; }
.fj-author-avatar { flex: 0 0 auto; margin: 0; }
.fj-author-avatar img { display: block; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.fj-author-text { flex: 1 1 auto; min-width: 0; gap: 10px !important; }
.fj-author-text > * { margin: 0 !important; }
.fj-author-name { font-family: Archivo, sans-serif; font-size: 16px !important; font-weight: 700; line-height: 1.2; letter-spacing: .16em; text-transform: uppercase; color: var(--fj-ink); }
.fj-author-bio { max-width: 560px; font-family: Newsreader, Georgia, serif; font-size: 18px !important; line-height: 1.55; color: var(--fj-mist); }
.fj-author-links { display: flex; flex-wrap: wrap; gap: 10px 24px; padding-top: 6px; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.fj-author-links a { padding-bottom: 4px; border-bottom: 1px solid var(--fj-ink); }
.fj-postnav a { font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; font-stretch: 85%; line-height: 1.05; text-transform: uppercase; }
.fj-postnav .post-navigation-link-previous::before,
.fj-postnav .post-navigation-link-next::before {
	display: block;
	margin-bottom: 12px;
	font-size: 11px;
	font-weight: 500;
	font-stretch: 100%;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--fj-grey);
}
.fj-postnav .post-navigation-link-previous::before { content: "\2190  Previous"; }
.fj-postnav .post-navigation-link-next::before { content: "Next  \2192"; }

/* Archive footer prompt */
.fj-more-topics p { margin: 0; }
.fj-more-topics a { margin-right: 24px; }

/* Forms elsewhere (comments, Mailchimp's own embed if still present) */
.fj-comments input, .fj-comments textarea { background: #000; color: var(--fj-ink); border: 1px solid var(--fj-line); border-radius: 0; }
#mc_embed_signup { background: transparent !important; width: auto !important; color: var(--fj-ink); font-family: Archivo, sans-serif !important; }
#mc_embed_signup input.email, #mc_embed_signup input.text { background: #000 !important; color: var(--fj-ink) !important; border: 1px solid var(--fj-line) !important; border-radius: 0 !important; }
#mc_embed_signup .button { background: var(--fj-ink) !important; color: #000 !important; border-radius: 0 !important; letter-spacing: .18em; text-transform: uppercase; }

/* ================= Responsive ================= */
@media (max-width: 1199px) {
	.fj-cats .wp-block-term-template { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 782px) and (max-width: 1180px) {
	.fj-nav,
	.fj-nav .wp-block-navigation-item,
	.fj-nav .wp-block-navigation-item__content { font-size: 11px !important; letter-spacing: .1em; }
	.fj-nav .wp-block-navigation__container { gap: 16px !important; }
	.fj-wordmark, .fj-wordmark a { font-size: 15px !important; letter-spacing: .16em; }
}
@media (min-width: 782px) and (max-width: 1100px) {
	.fj-feed .wp-block-post-template > li { grid-template-columns: 48px minmax(0, 1fr) 170px 96px; column-gap: 18px; }
	.fj-feed .fj-title { font-size: 22px !important; }
}
@media (max-width: 999px) {
	/* Menu collapses to the ☰ button below 1000px */
	.fj-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
	.fj-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; }
}
@media (max-width: 960px) {
	body.home:not(.paged) .fj-lead .wp-block-post-template > li:first-child {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		grid-template-areas: "thumb" "meta" "title" "excerpt";
		row-gap: 18px;
		padding-bottom: 72px;
	}
}
@media (max-width: 781px) {
	.fj-header .fj-btn-outline { display: none; }
	.fj-wordmark, .fj-wordmark a { font-size: 15px !important; }
	.fj-feed .wp-block-post-template > li { grid-template-columns: 36px minmax(0, 1fr); grid-template-areas: "num title" "num meta"; row-gap: 8px; align-items: start; }
	.fj-feed .fj-thumb { display: none; }
	.fj-feed .fj-title { font-size: 20px !important; }
	.fj-feed .fj-meta { flex-direction: row; flex-wrap: wrap; }
	body.home:not(.paged) .fj-lead li:first-child .fj-thumb { display: block; }
	body.home:not(.paged) .fj-lead li:nth-child(2) { margin-top: 110px; }
	body.home:not(.paged) .fj-lead li:nth-child(2)::after { top: -86px; font-size: 52px; }
	.fj-slider .wp-block-post-template > li { flex-basis: 78%; }
	.fj-slider-nav button { width: 44px; height: 44px; }
	.fj-post-title { font-size: clamp(34px, 9.5vw, 64px) !important; }
	.wp-block-post-content > p:first-of-type { font-size: 21px; }
	.wp-block-post-content { font-size: 18px !important; }
	.wp-block-post-excerpt { font-size: 18px !important; }
	.wp-block-post-content h2 { font-size: 26px !important; }
	.wp-block-post-content h3 { font-size: 21px !important; }
	.fj-postnav .wp-block-post-navigation-link { flex-basis: 100% !important; text-align: left !important; }
	.fj-pager { flex-wrap: wrap; gap: 10px; }
	.fj-pager .page-numbers { padding: 8px 11px; }
	.fj-quickinfo { padding: 22px 20px !important; }
	.fj-quickinfo li { padding-left: 0; }
	.fj-quickinfo li strong { position: static; display: block; width: auto; }
}
@media (max-width: 599px) {
	.fj-cats li > * { margin: 0 16px !important; }
	.fj-cats .fj-count { font-size: 32px; }
	.fj-cats .fj-catdesc { display: none; }
	.fj-author { flex-direction: column !important; align-items: flex-start !important; gap: 18px !important; }
	.fj-author-avatar img { width: 72px; height: 72px; }
	.fj-author-bio { font-size: 17px !important; }
}
@media (prefers-reduced-motion: reduce) {
	.fj-feed .fj-thumb img, .fj-cards img, .fj-start img, .fj-cats li::before { transition: none; }
}

/* ================= Newsletter band: links and focus (Phase 5 QA) =================
   The band is off-white, so links and the keyboard focus outline must be black here. */
.fj-subscribe a,
.fj-subscribe a:visited { color: #000 !important; text-decoration: underline; text-underline-offset: 3px; }
.fj-subscribe a:hover { color: #262626 !important; }
.fj-subscribe :focus-visible { outline: 2px solid #000 !important; outline-offset: 3px; }

/* ================= Homepage hero video (v1.0.4) =================
   Core Cover block with a muted looping video behind the hero text.
   The poster sits underneath as a background, so it shows while the
   video loads and stays put for visitors who prefer reduced motion. */
.fj-hero-video {
	padding: 0 var(--wp--style--root--padding-right, 24px) 0 var(--wp--style--root--padding-left, 24px) !important;
	background: #000 url("/wp-content/uploads/2026/10/fj-hero-poster.jpg") center / cover no-repeat;
	border-bottom: 1px solid var(--fj-line);
	color: var(--fj-ink);
}
.fj-hero-video .wp-block-cover__background {
	/* Darker towards the text at the bottom left, lighter at the top. */
	background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.30) 100%) !important;
	opacity: 1 !important;
}
.fj-hero-video .wp-block-cover__inner-container { width: 100%; }
.fj-hero-video .fj-hero { padding-bottom: 64px !important; }
.fj-hero-video .fj-hero-intro { color: var(--fj-soft); }
.fj-hero-video .fj-label { color: var(--fj-mist); }
.fj-hero-video.is-paused-static video { display: none; }

.fj-video-toggle {
	position: absolute; right: var(--wp--style--root--padding-right, 24px); bottom: 24px; z-index: 2;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 12px; margin: 0;
	background: rgba(0,0,0,.55); color: var(--fj-ink);
	border: 1px solid rgba(242,242,240,.4); border-radius: 0; cursor: pointer;
	font-family: Archivo, Arial, sans-serif; font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
}
.fj-video-toggle:hover { background: var(--fj-ink); color: #000; border-color: var(--fj-ink); }
.fj-video-toggle svg { width: 10px; height: 10px; fill: currentColor; }

@media (max-width: 781px) {
	.fj-hero-video { min-height: 72vh !important; }
	.fj-hero-video .wp-block-cover__background { background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.72) 55%, rgba(0,0,0,.4) 100%) !important; }
	.fj-hero-video .fj-hero { padding-top: 64px !important; padding-bottom: 80px !important; }
	.fj-video-toggle { bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
	.fj-hero-video video { display: none; }
}

/* ================= Homepage tweaks (v1.0.5) ================= */
/* Start here: four across on desktop, two on tablet, one on phones.
   The gap must stay at 24px: WordPress sizes the grid columns assuming it,
   and the old 32px pushed one card onto a second row. */
.fj-start .wp-block-post-template { gap: 24px !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 1000px) { .fj-start .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 560px) { .fj-start .wp-block-post-template { grid-template-columns: minmax(0, 1fr) !important; } }
.fj-start .wp-block-post-title { font-size: 20px !important; }
/* Archive slider: autoplay pause button and the "More from the archive" link. */
.fj-slider-nav .fj-autoplay { font-size: 11px; letter-spacing: -.1em; }
.fj-archive-more { justify-content: flex-start; }
/* Continuous drift (set by slider.js): no snapping, or the cards jump when it pauses. */
.fj-slider .wp-block-post-template.is-drifting { scroll-snap-type: none !important; scroll-behavior: auto !important; }

/* ================= Less repetitive homepage (v1.0.8) ================= */
/* "Start reading" jumps down to Start Here. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
#start-here { scroll-margin-top: 0; }
/* Latest stories label: page 1 says "Latest stories", later pages "More stories". */
.fj-feed-label .fj-on-paged { display: none; }
body.paged .fj-feed-label .fj-on-first { display: none; }
body.paged .fj-feed-label .fj-on-paged { display: inline; }
/* Older / newer links only, no page numbers. */
.fj-pager { justify-content: space-between !important; }
.fj-pager a { display: inline-block; padding: 12px 18px; border: 1px solid var(--fj-ink); color: var(--fj-ink); }
.fj-pager a:hover { background: var(--fj-ink); color: #000; }
.fj-pager .wp-block-query-pagination-next { margin-left: auto; }
/* Homepage page 2 and up: just the list (and the newsletter), not the whole homepage again. */
body.home.paged main > .fj-section:not(.fj-subscribe) { display: none; }
body.home.paged .fj-lead { padding-top: 48px !important; }
@media (max-width: 600px) {
	.fj-pager a { padding: 12px 14px; font-size: 11px; }
}