/*
Theme Name: FS-NOW
Theme URI: https://fs-now.com/
Author: FS-NOW.com
Author URI: https://fs-now.com/
Description: Microsoft Flight Simulator 2020 / 2024 の最新ニュースとまとめ記事のための専用テーマ。ニュース速報性とまとめ記事の回遊性を両立させる二層構造、デベロッパー別ハブ、対応シム(MSFS 2024 / 2020)バッジ、目次・アドオンカード等の記事内パーツを内蔵しています。
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fs-now
Tags: news, magazine, blog, dark-mode, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
	/* Brand ------------------------------------------------------------- */
	/* ND(航法ディスプレイ)の配色から。ルート線のマゼンタをブランドの
	   アクセントに、ヘディングバグのシアンをMSFS 2024の識別色に使う。 */
	--fsn-accent:      #ff56a8; /* マゼンタのルート線 = ブランド */
	--fsn-accent-dark: #e63b8e;
	--fsn-cyan:        #3fc9e8; /* MSFS 2024 */
	--fsn-steel:       #93a9c9; /* MSFS 2020 = 旧世代なので彩度を落とす */
	--fsn-green:       #3ecf8e; /* 無料 */
	--fsn-red:         #ff5f6d; /* 注意・撤回 */

	/* Surfaces (dark = default) ------------------------------------------ */
	/* 近黒ではなく夜間コックピットの濃紺スレート。 */
	--fsn-bg:        #0e1622;
	--fsn-bg-alt:    #131d2c;
	--fsn-surface:   #182437;
	--fsn-surface-2: #1f2d43;
	--fsn-line:      #2b3b53;
	--fsn-line-soft: #1e2a3c;

	/* Text --------------------------------------------------------------- */
	--fsn-text:      #e9eef6;
	--fsn-text-mid:  #a6b5c9;
	--fsn-text-dim:  #7386a0;
	--fsn-on-accent: #140a10;

	/* Shape -------------------------------------------------------------- */
	--fsn-radius:    12px;
	--fsn-radius-sm: 7px;
	--fsn-radius-lg: 18px;
	--fsn-shadow:    0 1px 2px rgba(0,0,0,.35), 0 8px 24px -12px rgba(0,0,0,.6);
	--fsn-shadow-lg: 0 2px 4px rgba(0,0,0,.3), 0 24px 56px -20px rgba(0,0,0,.75);

	/* Metrics ------------------------------------------------------------ */
	--fsn-wrap:      1200px;
	--fsn-wrap-text: 760px;
	--fsn-gap:       clamp(1rem, 2.4vw, 1.75rem);
	--fsn-header-h:  62px;

	/* Type --------------------------------------------------------------- */
	--fsn-font: "Helvetica Neue", "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN",
	            "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
	--fsn-font-num: ui-monospace, "SFMono-Regular", "Roboto Mono", Consolas, monospace;

	color-scheme: dark;
}

:root[data-fsn-theme="light"] {
	--fsn-bg:        #f5f7fa;
	--fsn-bg-alt:    #ffffff;
	--fsn-surface:   #ffffff;
	--fsn-surface-2: #eaeff6;
	--fsn-line:      #d8e0ea;
	--fsn-line-soft: #e6ecf3;
	--fsn-text:      #131c29;
	--fsn-text-mid:  #4a5a6e;
	--fsn-text-dim:  #6b7c92;

	--fsn-accent:      #c2186f;
	--fsn-accent-dark: #a01259;
	--fsn-cyan:        #0a7ea3;
	--fsn-steel:       #556c8a;
	--fsn-green:       #147d55;
	--fsn-red:         #c8323f;
	--fsn-on-accent:   #ffffff;
	--fsn-shadow:    0 1px 2px rgba(16,32,48,.06), 0 8px 20px -14px rgba(16,32,48,.3);
	--fsn-shadow-lg: 0 2px 6px rgba(16,32,48,.07), 0 24px 48px -24px rgba(16,32,48,.35);

	color-scheme: light;
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--fsn-header-h) + 16px);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

body {
	margin: 0;
	background: var(--fsn-bg);
	color: var(--fsn-text);
	font-family: var(--fsn-font);
	font-size: 16px;
	line-height: 1.8;
	font-feature-settings: "palt" 1;
	overflow-wrap: anywhere;
	word-break: normal;
	line-break: strict;
}

img, svg, video, iframe { max-width: 100%; height: auto; display: block; }
img { background: var(--fsn-surface-2); }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--fsn-accent); }

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: .005em;
}

p, ul, ol, figure, table, pre, blockquote { margin: 0; }

button, input, select, textarea { font: inherit; color: inherit; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--fsn-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

.fsn-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.fsn-skip {
	position: absolute;
	left: 12px; top: -60px;
	z-index: 200;
	padding: 10px 16px;
	background: var(--fsn-accent);
	color: var(--fsn-on-accent);
	font-weight: 700;
	border-radius: 0 0 var(--fsn-radius-sm) var(--fsn-radius-sm);
	transition: top .18s ease;
}
.fsn-skip:focus { top: 0; color: var(--fsn-on-accent); }

/* ==========================================================================
   3. Layout primitives
   ========================================================================== */

.fsn-wrap {
	width: min(100% - 2 * clamp(14px, 4vw, 32px), var(--fsn-wrap));
	margin-inline: auto;
}

.fsn-main { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3rem, 7vw, 5rem); }

.fsn-cols {
	display: grid;
	gap: clamp(2rem, 4vw, 3.25rem);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1000px) {
	.fsn-cols--sidebar { grid-template-columns: minmax(0, 1fr) 312px; }
}

/* ==========================================================================
   4. Header
   ========================================================================== */

.fsn-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--fsn-bg) 88%, transparent);
	backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid var(--fsn-line);
}

.fsn-header__bar {
	height: var(--fsn-header-h);
	display: flex;
	align-items: center;
	gap: clamp(.75rem, 2vw, 1.5rem);
}

/* Logo ---------------------------------------------------------------- */

/* ND の自機シンボル(デルタ)＋ワードマーク。
   アクセント色で単語を塗り潰す箱組みは、他ブランドの意匠と紛らわしいため使わない。 */
.fsn-logo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 800;
	font-size: 1.24rem;
	letter-spacing: -.012em;
	white-space: nowrap;
	flex: 0 0 auto;
}
.fsn-logo:hover { color: inherit; }
.fsn-logo__mark {
	width: 18px; height: 18px;
	flex: 0 0 auto;
	fill: var(--fsn-accent);
	transition: transform .25s cubic-bezier(.2,.7,.3,1);
}
.fsn-logo:hover .fsn-logo__mark { transform: translateY(-2px); }
.fsn-logo__word { color: var(--fsn-text); }
.fsn-logo__sep { color: var(--fsn-accent); margin-inline: .02em; }
.fsn-logo__tld {
	color: var(--fsn-text-dim);
	font-weight: 600;
	font-size: .72em;
	letter-spacing: 0;
}
.fsn-logo img { max-height: 38px; width: auto; }

/* Nav ----------------------------------------------------------------- */

.fsn-nav { margin-inline-end: auto; min-width: 0; }

.fsn-nav ul {
	display: flex;
	align-items: center;
	gap: clamp(.25rem, 1.4vw, 1.1rem);
	list-style: none;
	padding: 0;
	margin: 0;
}

.fsn-nav li { position: relative; }

.fsn-nav a {
	display: block;
	padding: 6px 4px;
	font-size: .93rem;
	font-weight: 600;
	color: var(--fsn-text-mid);
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}
.fsn-nav a:hover { color: var(--fsn-text); border-bottom-color: var(--fsn-accent); }

.fsn-nav .current-menu-item > a,
.fsn-nav .current-menu-parent > a,
.fsn-nav .current-menu-ancestor > a,
.fsn-nav .current_page_item > a {
	color: var(--fsn-text);
	border-bottom-color: var(--fsn-accent);
}

/* Dropdown ------------------------------------------------------------- */

.fsn-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: -12px;
	min-width: 208px;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 6px;
	background: var(--fsn-surface);
	border: 1px solid var(--fsn-line);
	border-radius: var(--fsn-radius);
	box-shadow: var(--fsn-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.fsn-nav li:hover > .sub-menu,
.fsn-nav li:focus-within > .sub-menu {
	opacity: 1; visibility: visible; transform: translateY(0);
}
.fsn-nav .sub-menu a {
	padding: 8px 10px;
	border-bottom: 0;
	border-radius: var(--fsn-radius-sm);
	font-weight: 500;
}
.fsn-nav .sub-menu a:hover { background: var(--fsn-surface-2); color: var(--fsn-text); }

/* Header actions ------------------------------------------------------- */

.fsn-header__actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

.fsn-iconbtn {
	display: grid;
	place-items: center;
	width: 36px; height: 36px;
	background: transparent;
	border: 1px solid var(--fsn-line);
	border-radius: var(--fsn-radius-sm);
	color: var(--fsn-text-mid);
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.fsn-iconbtn:hover { background: var(--fsn-surface-2); color: var(--fsn-text); border-color: var(--fsn-text-dim); }
.fsn-iconbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.fsn-iconbtn__sun { display: none; }
:root[data-fsn-theme="light"] .fsn-iconbtn__sun { display: block; }
:root[data-fsn-theme="light"] .fsn-iconbtn__moon { display: none; }

.fsn-burger { display: none; }
@media (max-width: 899px) {
	.fsn-burger { display: grid; }
	.fsn-nav {
		position: fixed;
		inset: var(--fsn-header-h) 0 auto 0;
		max-height: calc(100dvh - var(--fsn-header-h));
		overflow-y: auto;
		padding: 12px clamp(14px, 4vw, 32px) 28px;
		background: var(--fsn-bg-alt);
		border-bottom: 1px solid var(--fsn-line);
		transform: translateY(-8px);
		opacity: 0;
		visibility: hidden;
		transition: opacity .18s ease, transform .18s ease, visibility .18s;
	}
	.fsn-nav[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
	.fsn-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
	.fsn-nav a {
		padding: 12px 2px;
		font-size: 1rem;
		border-bottom: 1px solid var(--fsn-line-soft);
	}
	.fsn-nav a:hover { border-bottom-color: var(--fsn-line-soft); }
	.fsn-nav .current-menu-item > a { border-bottom-color: var(--fsn-line-soft); color: var(--fsn-accent); }
	.fsn-nav .sub-menu {
		position: static;
		opacity: 1; visibility: visible; transform: none;
		background: transparent;
		border: 0; box-shadow: none;
		padding: 0 0 0 14px;
	}
	.fsn-nav .sub-menu a { font-size: .93rem; color: var(--fsn-text-dim); }
}

/* Ticker --------------------------------------------------------------- */

.fsn-ticker {
	border-bottom: 1px solid var(--fsn-line);
	background: var(--fsn-bg-alt);
	font-size: .84rem;
}
.fsn-ticker__inner {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 38px;
	overflow: hidden;
}
.fsn-ticker__label {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 800;
	font-size: .72rem;
	letter-spacing: .1em;
	color: var(--fsn-accent);
}
.fsn-ticker__label::before {
	content: "";
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--fsn-accent);
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--fsn-accent) 60%, transparent);
	animation: fsn-pulse 2.4s ease-out infinite;
}
@keyframes fsn-pulse {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fsn-accent) 55%, transparent); }
	70%  { box-shadow: 0 0 0 9px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}
.fsn-ticker__list {
	display: flex;
	gap: 28px;
	list-style: none;
	margin: 0; padding: 0;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
	white-space: nowrap;
}
.fsn-ticker__list::-webkit-scrollbar { display: none; }
.fsn-ticker__list a { color: var(--fsn-text-mid); }
.fsn-ticker__list a:hover { color: var(--fsn-text); }
.fsn-ticker__date { color: var(--fsn-text-dim); font-family: var(--fsn-font-num); font-size: .78rem; margin-inline-end: 7px; }

/* ==========================================================================
   5. Badges & meta
   ========================================================================== */

.fsn-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: 100px;
	font-size: .69rem;
	font-weight: 800;
	letter-spacing: .04em;
	line-height: 1.7;
	white-space: nowrap;
	border: 1px solid transparent;
}

.fsn-badge--cat {
	background: color-mix(in srgb, var(--fsn-accent) 16%, transparent);
	color: var(--fsn-accent);
	border-color: color-mix(in srgb, var(--fsn-accent) 34%, transparent);
}
.fsn-badge--sim24 {
	background: color-mix(in srgb, var(--fsn-cyan) 15%, transparent);
	color: var(--fsn-cyan);
	border-color: color-mix(in srgb, var(--fsn-cyan) 34%, transparent);
}
.fsn-badge--sim20 {
	background: color-mix(in srgb, var(--fsn-steel) 15%, transparent);
	color: var(--fsn-steel);
	border-color: color-mix(in srgb, var(--fsn-steel) 34%, transparent);
}
.fsn-badge--free {
	background: color-mix(in srgb, var(--fsn-green) 15%, transparent);
	color: var(--fsn-green);
	border-color: color-mix(in srgb, var(--fsn-green) 34%, transparent);
}
.fsn-badge--guide {
	background: var(--fsn-surface-2);
	color: var(--fsn-text-mid);
	border-color: var(--fsn-line);
}
.fsn-badge--new {
	background: var(--fsn-accent);
	color: var(--fsn-on-accent);
	border-color: transparent;
}

.fsn-badges { display: flex; flex-wrap: wrap; gap: 5px; }

.fsn-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	font-size: .78rem;
	color: var(--fsn-text-dim);
}
.fsn-meta time { font-family: var(--fsn-font-num); letter-spacing: -.01em; }
.fsn-meta__dot { opacity: .5; }

/* ==========================================================================
   6. Section headings
   ========================================================================== */

.fsn-shead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: clamp(1rem, 2vw, 1.4rem);
	padding-bottom: .6rem;
	border-bottom: 1px solid var(--fsn-line);
}
.fsn-shead__title {
	font-size: clamp(1.08rem, 2.2vw, 1.32rem);
	display: inline-flex;
	align-items: center;
	gap: 9px;
}
.fsn-shead__title::before {
	content: "";
	width: 4px;
	align-self: stretch;
	min-height: 1.1em;
	border-radius: 2px;
	background: var(--fsn-accent);
}
.fsn-shead__en {
	display: block;
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .16em;
	color: var(--fsn-text-dim);
	margin-top: 2px;
}
.fsn-shead__more {
	flex: 0 0 auto;
	font-size: .82rem;
	font-weight: 700;
	color: var(--fsn-text-mid);
}
.fsn-shead__more:hover { color: var(--fsn-accent); }
.fsn-shead__more::after { content: " →"; }

.fsn-section { margin-block: clamp(2.25rem, 5vw, 3.5rem); }
.fsn-section:first-child { margin-block-start: 0; }

/* ==========================================================================
   7. Hero (front page lead)
   ========================================================================== */

.fsn-hero {
	display: grid;
	gap: var(--fsn-gap);
	grid-template-columns: minmax(0, 1fr);
	margin-block-end: clamp(2rem, 5vw, 3.25rem);
}
@media (min-width: 860px) {
	.fsn-hero { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
}

.fsn-hero__lead {
	position: relative;
	display: block;
	border-radius: var(--fsn-radius-lg);
	overflow: hidden;
	background: var(--fsn-surface);
	border: 1px solid var(--fsn-line);
	min-height: 300px;
	isolation: isolate;
}
.fsn-hero__lead:hover { color: inherit; }
.fsn-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}
.fsn-hero__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.fsn-hero__lead:hover .fsn-hero__media img { transform: scale(1.035); }
.fsn-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(190deg,
		rgba(6,10,15,.15) 0%,
		rgba(6,10,15,.55) 45%,
		rgba(6,10,15,.93) 100%);
}
.fsn-hero__body {
	position: relative;
	padding: clamp(1.25rem, 3vw, 2rem);
	padding-top: clamp(5rem, 14vw, 8rem);
	color: #fff;
}
.fsn-hero__title {
	font-size: clamp(1.32rem, 3.1vw, 2rem);
	line-height: 1.42;
	margin-block: .55rem .5rem;
	text-shadow: 0 2px 18px rgba(0,0,0,.5);
}
.fsn-hero__excerpt {
	font-size: .9rem;
	color: rgba(255,255,255,.78);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.fsn-hero__body .fsn-meta { color: rgba(255,255,255,.65); }

.fsn-hero__side {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* Compact list row ------------------------------------------------------ */

.fsn-row {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	gap: 12px;
	padding: 11px;
	border-radius: var(--fsn-radius);
	transition: background .15s ease;
}
.fsn-row:hover { background: var(--fsn-surface); color: inherit; }
.fsn-row__thumb {
	aspect-ratio: 16 / 10;
	border-radius: var(--fsn-radius-sm);
	overflow: hidden;
	background: var(--fsn-surface-2);
}
.fsn-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.fsn-row__title {
	font-size: .88rem;
	line-height: 1.55;
	font-weight: 600;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 4px;
}
.fsn-row:hover .fsn-row__title { color: var(--fsn-accent); }

/* ==========================================================================
   8. Card grid (news)
   ========================================================================== */

.fsn-grid {
	display: grid;
	gap: var(--fsn-gap);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}
.fsn-grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }

.fsn-card {
	display: flex;
	flex-direction: column;
	background: var(--fsn-surface);
	border: 1px solid var(--fsn-line);
	border-radius: var(--fsn-radius);
	overflow: hidden;
	transition: transform .2s cubic-bezier(.2,.7,.3,1), border-color .2s ease, box-shadow .2s ease;
}
.fsn-card:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--fsn-accent) 45%, var(--fsn-line));
	box-shadow: var(--fsn-shadow);
}
.fsn-card__link { display: contents; }
.fsn-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--fsn-surface-2);
}
.fsn-card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .45s cubic-bezier(.2,.7,.3,1);
}
.fsn-card:hover .fsn-card__media img { transform: scale(1.04); }
.fsn-card__media .fsn-badges {
	position: absolute;
	left: 9px; bottom: 9px;
	z-index: 1;
}
/* Badges sitting on photography need an opaque backdrop in both themes,
   so this ground is deliberately fixed rather than token-derived. */
.fsn-card__media .fsn-badge,
.fsn-hero__body .fsn-badge {
	backdrop-filter: blur(6px);
	background: rgba(14,22,34,.82);
	border-color: transparent;
}
.fsn-card__media .fsn-badge--cat,
.fsn-hero__body .fsn-badge--cat { color: var(--fsn-accent); }
.fsn-card__media .fsn-badge--sim24,
.fsn-hero__body .fsn-badge--sim24 { color: var(--fsn-cyan); }
.fsn-card__media .fsn-badge--sim20,
.fsn-hero__body .fsn-badge--sim20 { color: var(--fsn-steel); }
.fsn-card__media .fsn-badge--guide,
.fsn-hero__body .fsn-badge--guide { color: #dfe7f2; }
.fsn-card__media .fsn-badge--new,
.fsn-hero__body .fsn-badge--new {
	background: var(--fsn-accent);
	color: var(--fsn-on-accent);
	backdrop-filter: none;
}

.fsn-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 15px 16px;
	flex: 1;
}
.fsn-card__title {
	font-size: 1rem;
	line-height: 1.58;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.fsn-card:hover .fsn-card__title { color: var(--fsn-accent); }
.fsn-card__excerpt {
	font-size: .82rem;
	color: var(--fsn-text-mid);
	line-height: 1.75;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.fsn-card__foot { margin-top: auto; padding-top: 4px; }

/* Guide card (まとめ) ---------------------------------------------------- */

.fsn-card--guide {
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--fsn-cyan) 7%, var(--fsn-surface)) 0%,
		var(--fsn-surface) 42%);
	border-color: color-mix(in srgb, var(--fsn-cyan) 24%, var(--fsn-line));
}
.fsn-card--guide:hover { border-color: color-mix(in srgb, var(--fsn-cyan) 55%, var(--fsn-line)); }
.fsn-card--guide:hover .fsn-card__title { color: var(--fsn-cyan); }
.fsn-card--guide .fsn-card__kicker {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .1em;
	color: var(--fsn-cyan);
}
.fsn-card--guide .fsn-card__kicker svg {
	width: 13px; height: 13px;
	fill: none; stroke: currentColor; stroke-width: 2;
	stroke-linecap: round; stroke-linejoin: round;
}

/* ==========================================================================
   9. Developer hub strip
   ========================================================================== */

.fsn-devs {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 158px), 1fr));
}
.fsn-dev {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 14px;
	background: var(--fsn-surface);
	border: 1px solid var(--fsn-line);
	border-radius: var(--fsn-radius);
	font-size: .87rem;
	font-weight: 700;
	transition: border-color .15s ease, background .15s ease;
}
.fsn-dev:hover {
	color: var(--fsn-text);
	border-color: color-mix(in srgb, var(--fsn-accent) 50%, var(--fsn-line));
	background: var(--fsn-surface-2);
}
.fsn-dev__count {
	font-family: var(--fsn-font-num);
	font-size: .72rem;
	font-weight: 600;
	color: var(--fsn-text-dim);
	background: var(--fsn-bg);
	border-radius: 100px;
	padding: 1px 8px;
	flex: 0 0 auto;
}

/* ==========================================================================
   10. Archive header
   ========================================================================== */

.fsn-archead {
	padding: clamp(1.25rem, 3vw, 2rem);
	background:
		radial-gradient(120% 130% at 100% 0%, color-mix(in srgb, var(--fsn-accent) 11%, transparent) 0%, transparent 58%),
		var(--fsn-surface);
	border: 1px solid var(--fsn-line);
	border-radius: var(--fsn-radius-lg);
	margin-block-end: clamp(1.5rem, 4vw, 2.5rem);
}
.fsn-archead__kicker {
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .14em;
	color: var(--fsn-accent);
}
.fsn-archead__title {
	font-size: clamp(1.4rem, 3.4vw, 2.05rem);
	margin-block: .3rem;
}
.fsn-archead__desc {
	font-size: .9rem;
	color: var(--fsn-text-mid);
	max-width: 68ch;
	margin-top: .4rem;
}
.fsn-archead__count {
	font-family: var(--fsn-font-num);
	font-size: .78rem;
	color: var(--fsn-text-dim);
	margin-top: .5rem;
}

/* ==========================================================================
   11. Single article
   ========================================================================== */

.fsn-article { max-width: 100%; }

.fsn-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 7px;
	font-size: .76rem;
	color: var(--fsn-text-dim);
	margin-block-end: 1rem;
	list-style: none;
	padding: 0;
}
.fsn-crumbs li { display: inline-flex; align-items: center; gap: 7px; }
.fsn-crumbs li:not(:last-child)::after { content: "/"; opacity: .45; }
.fsn-crumbs a:hover { color: var(--fsn-accent); }

.fsn-ahead { margin-block-end: clamp(1.25rem, 3vw, 1.85rem); }
.fsn-ahead__title {
	font-size: clamp(1.5rem, 3.9vw, 2.3rem);
	line-height: 1.44;
	letter-spacing: -.005em;
	margin-block: .55rem .75rem;
}
.fsn-ahead__lead {
	font-size: 1rem;
	color: var(--fsn-text-mid);
	line-height: 1.9;
	padding-inline-start: 14px;
	border-inline-start: 3px solid var(--fsn-line);
	margin-block-start: 1rem;
}
.fsn-ahead__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	padding-block: .8rem;
	border-block: 1px solid var(--fsn-line-soft);
	font-size: .8rem;
	color: var(--fsn-text-dim);
}
.fsn-ahead__updated { color: var(--fsn-accent); font-weight: 700; }

.fsn-figure { margin-block: 1.25rem; }
.fsn-figure img { width: 100%; border-radius: var(--fsn-radius); }
.fsn-figure figcaption,
.fsn-body figcaption {
	font-size: .76rem;
	color: var(--fsn-text-dim);
	margin-top: .55rem;
	line-height: 1.7;
}

/* Body typography ------------------------------------------------------- */

.fsn-body { font-size: 1.0rem; line-height: 2.0; }
.fsn-body > * + * { margin-block-start: 1.5rem; }

.fsn-body h2 {
	font-size: clamp(1.16rem, 2.6vw, 1.42rem);
	line-height: 1.5;
	margin-block-start: 2.9rem;
	padding-block-end: .55rem;
	border-block-end: 2px solid var(--fsn-line);
	position: relative;
}
.fsn-body h2::after {
	content: "";
	position: absolute;
	left: 0; bottom: -2px;
	width: 56px; height: 2px;
	background: var(--fsn-accent);
}
.fsn-body h3 {
	font-size: clamp(1.04rem, 2.2vw, 1.16rem);
	margin-block-start: 2.2rem;
	padding-inline-start: 11px;
	border-inline-start: 4px solid var(--fsn-accent);
	line-height: 1.55;
}
.fsn-body h4 {
	font-size: 1rem;
	margin-block-start: 1.8rem;
	color: var(--fsn-text-mid);
}

.fsn-body a {
	color: var(--fsn-cyan);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, var(--fsn-cyan) 45%, transparent);
}
.fsn-body a:hover { color: var(--fsn-accent); text-decoration-color: currentColor; }
.fsn-body a[target="_blank"]::after {
	content: "";
	display: inline-block;
	width: .62em; height: .62em;
	margin-inline-start: .3em;
	vertical-align: -.02em;
	background: currentColor;
	-webkit-mask: var(--fsn-ext-icon) center / contain no-repeat;
	mask: var(--fsn-ext-icon) center / contain no-repeat;
	opacity: .7;
}
:root {
	--fsn-ext-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>');
}

.fsn-body ul, .fsn-body ol { padding-inline-start: 1.5em; }
.fsn-body li + li { margin-block-start: .5rem; }
.fsn-body ul > li::marker { color: var(--fsn-accent); }
.fsn-body ol > li::marker { color: var(--fsn-accent); font-weight: 700; }

.fsn-body strong { font-weight: 700; color: var(--fsn-text); }
.fsn-body mark {
	background: color-mix(in srgb, var(--fsn-accent) 26%, transparent);
	color: inherit;
	padding: .08em .25em;
	border-radius: 3px;
}

.fsn-body blockquote {
	padding: 1rem 1.25rem;
	background: var(--fsn-surface);
	border-inline-start: 4px solid var(--fsn-text-dim);
	border-radius: 0 var(--fsn-radius-sm) var(--fsn-radius-sm) 0;
	color: var(--fsn-text-mid);
	font-size: .94rem;
}
.fsn-body blockquote cite {
	display: block;
	margin-top: .6rem;
	font-size: .78rem;
	font-style: normal;
	color: var(--fsn-text-dim);
}

.fsn-body hr {
	border: 0;
	border-block-start: 1px solid var(--fsn-line);
	margin-block: 2.5rem;
}

.fsn-body code {
	font-family: var(--fsn-font-num);
	font-size: .88em;
	background: var(--fsn-surface-2);
	padding: .12em .4em;
	border-radius: 4px;
}
.fsn-body pre {
	background: var(--fsn-bg-alt);
	border: 1px solid var(--fsn-line);
	border-radius: var(--fsn-radius);
	padding: 1rem 1.1rem;
	overflow-x: auto;
	font-size: .84rem;
	line-height: 1.7;
}
.fsn-body pre code { background: none; padding: 0; }

/* Tables ---------------------------------------------------------------- */

.fsn-body .fsn-tablewrap,
.fsn-body figure.wp-block-table { overflow-x: auto; }

.fsn-body table {
	width: 100%;
	min-width: 460px;
	border-collapse: collapse;
	font-size: .87rem;
	line-height: 1.7;
	background: var(--fsn-surface);
	border-radius: var(--fsn-radius);
	overflow: hidden;
}
.fsn-body th, .fsn-body td {
	padding: 11px 13px;
	border: 1px solid var(--fsn-line);
	text-align: start;
	vertical-align: top;
}
.fsn-body thead th {
	background: var(--fsn-surface-2);
	font-size: .8rem;
	letter-spacing: .02em;
	white-space: nowrap;
}
.fsn-body tbody tr:hover { background: color-mix(in srgb, var(--fsn-accent) 5%, transparent); }

/* ==========================================================================
   12. Article components (まとめ記事向け)
   ========================================================================== */

/* Table of contents ----------------------------------------------------- */

.fsn-toc {
	background: var(--fsn-surface);
	border: 1px solid var(--fsn-line);
	border-radius: var(--fsn-radius);
	padding: 1rem 1.15rem;
	font-size: .88rem;
}
.fsn-toc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-weight: 800;
	font-size: .82rem;
	letter-spacing: .06em;
	color: var(--fsn-text);
	cursor: pointer;
	list-style: none;
}
.fsn-toc__head::-webkit-details-marker { display: none; }
.fsn-toc__head::after {
	content: "";
	width: 9px; height: 9px;
	border-inline-end: 2px solid var(--fsn-text-dim);
	border-block-end: 2px solid var(--fsn-text-dim);
	transform: rotate(45deg) translateY(-2px);
	transition: transform .2s ease;
	flex: 0 0 auto;
}
.fsn-toc[open] .fsn-toc__head::after { transform: rotate(-135deg) translateY(-2px); }
.fsn-toc ol {
	list-style: none;
	margin: .9rem 0 0;
	padding: 0;
	counter-reset: fsn-toc;
}
.fsn-toc li { margin-block-start: .4rem; }
.fsn-toc__lv2 > a {
	display: flex;
	gap: 9px;
	font-weight: 600;
	line-height: 1.6;
	color: var(--fsn-text-mid);
}
.fsn-toc__lv2 > a::before {
	counter-increment: fsn-toc;
	content: counter(fsn-toc, decimal-leading-zero);
	font-family: var(--fsn-font-num);
	font-size: .78em;
	color: var(--fsn-accent);
	flex: 0 0 auto;
	padding-top: .15em;
}
.fsn-toc__lv3 {
	padding-inline-start: 26px;
	font-size: .84rem;
}
.fsn-toc__lv3 > a { color: var(--fsn-text-dim); }
.fsn-toc a:hover { color: var(--fsn-accent); }

/* Addon card ------------------------------------------------------------ */

.fsn-addon {
	display: grid;
	gap: 0;
	background: var(--fsn-surface);
	border: 1px solid var(--fsn-line);
	border-radius: var(--fsn-radius);
	overflow: hidden;
}
@media (min-width: 640px) {
	.fsn-addon--media { grid-template-columns: 224px minmax(0, 1fr); }
}
.fsn-addon__media { background: var(--fsn-surface-2); }
.fsn-addon__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/10; }
.fsn-addon__body { padding: 1rem 1.15rem 1.15rem; }
.fsn-addon__name {
	font-size: 1.06rem;
	font-weight: 800;
	line-height: 1.5;
	margin-block: .35rem .1rem;
}
.fsn-addon__dev {
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--fsn-accent);
}
.fsn-addon__desc {
	font-size: .88rem;
	color: var(--fsn-text-mid);
	line-height: 1.85;
	margin-block-start: .55rem;
}
/* Flex, not grid: `auto-fit` leaves zero-width phantom tracks whose gaps
   still paint, so a 3-item spec row grew stray hairlines on its right edge.
   Flex only ever creates tracks for items that exist. */
.fsn-addon__specs {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	margin-block-start: .9rem;
	background: var(--fsn-line);
	border: 1px solid var(--fsn-line);
	border-radius: var(--fsn-radius-sm);
	overflow: hidden;
}
.fsn-addon__spec {
	flex: 1 1 118px;
	min-width: 0;
	background: var(--fsn-surface);
	padding: 8px 10px;
}
.fsn-addon__spec dt {
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--fsn-text-dim);
}
.fsn-addon__spec dd {
	margin: 2px 0 0;
	font-size: .88rem;
	font-weight: 700;
	font-family: var(--fsn-font-num);
}
.fsn-addon__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-start: .95rem;
}

.fsn-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 15px;
	border-radius: 100px;
	font-size: .82rem;
	font-weight: 700;
	border: 1px solid var(--fsn-line);
	background: var(--fsn-surface-2);
	color: var(--fsn-text);
	transition: background .15s ease, border-color .15s ease, color .15s ease;
	text-decoration: none !important;
}
.fsn-btn:hover { background: var(--fsn-line); color: var(--fsn-text); }
.fsn-btn--primary {
	background: var(--fsn-accent);
	border-color: var(--fsn-accent);
	color: var(--fsn-on-accent);
}
.fsn-btn--primary:hover { background: var(--fsn-accent-dark); border-color: var(--fsn-accent-dark); color: var(--fsn-on-accent); }
.fsn-body .fsn-btn::after { display: none !important; }

/* Callout --------------------------------------------------------------- */

.fsn-note {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 12px;
	padding: 1rem 1.15rem;
	border-radius: var(--fsn-radius);
	border: 1px solid var(--fsn-line);
	background: var(--fsn-surface);
	font-size: .89rem;
	line-height: 1.85;
}
.fsn-note__icon {
	width: 22px; height: 22px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: .74rem;
	font-weight: 800;
	flex: 0 0 auto;
	margin-top: .18em;
}
.fsn-note__title { font-weight: 800; margin-bottom: .2rem; display: block; }
.fsn-note > div > * + * { margin-block-start: .5rem; }

.fsn-note--tip { border-color: color-mix(in srgb, var(--fsn-green) 34%, var(--fsn-line)); }
.fsn-note--tip .fsn-note__icon { background: var(--fsn-green); color: #06120c; }
.fsn-note--warn { border-color: color-mix(in srgb, var(--fsn-red) 34%, var(--fsn-line)); }
.fsn-note--warn .fsn-note__icon { background: var(--fsn-red); color: #1a0606; }
.fsn-note--info { border-color: color-mix(in srgb, var(--fsn-cyan) 34%, var(--fsn-line)); }
.fsn-note--info .fsn-note__icon { background: var(--fsn-cyan); color: #04141b; }

/* Verdict / summary box -------------------------------------------------- */

.fsn-verdict {
	padding: 1.15rem 1.25rem;
	border-radius: var(--fsn-radius);
	border: 1px solid color-mix(in srgb, var(--fsn-accent) 32%, var(--fsn-line));
	background:
		radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--fsn-accent) 9%, transparent) 0%, transparent 60%),
		var(--fsn-surface);
}
.fsn-verdict__title {
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .12em;
	color: var(--fsn-accent);
	margin-bottom: .6rem;
}
.fsn-verdict ul { margin: 0; padding-inline-start: 1.3em; }

/* Update log ------------------------------------------------------------- */

.fsn-updatelog {
	font-size: .82rem;
	color: var(--fsn-text-dim);
	background: var(--fsn-bg-alt);
	border: 1px dashed var(--fsn-line);
	border-radius: var(--fsn-radius-sm);
	padding: .85rem 1rem;
}
.fsn-updatelog dt { font-weight: 700; color: var(--fsn-text-mid); font-family: var(--fsn-font-num); }
.fsn-updatelog dd { margin: 0 0 .5rem; }
.fsn-updatelog dd:last-child { margin-bottom: 0; }

/* ==========================================================================
   13. Article footer / related / share
   ========================================================================== */

.fsn-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.fsn-tag {
	display: inline-block;
	padding: 4px 11px;
	font-size: .78rem;
	font-weight: 600;
	color: var(--fsn-text-mid);
	background: var(--fsn-surface);
	border: 1px solid var(--fsn-line);
	border-radius: 100px;
}
.fsn-tag:hover { color: var(--fsn-accent); border-color: var(--fsn-accent); }
.fsn-tag::before { content: "#"; opacity: .55; margin-inline-end: 2px; }

.fsn-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fsn-share__label { font-size: .76rem; font-weight: 700; color: var(--fsn-text-dim); letter-spacing: .06em; }
.fsn-share a, .fsn-share button {
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	border-radius: 50%;
	border: 1px solid var(--fsn-line);
	background: var(--fsn-surface);
	color: var(--fsn-text-mid);
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.fsn-share a:hover, .fsn-share button:hover {
	background: var(--fsn-accent); color: var(--fsn-on-accent); border-color: var(--fsn-accent);
}
.fsn-share svg { width: 16px; height: 16px; }

.fsn-prevnext {
	display: grid;
	gap: 10px;
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 700px) { .fsn-prevnext { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fsn-prevnext__item {
	padding: 13px 15px;
	background: var(--fsn-surface);
	border: 1px solid var(--fsn-line);
	border-radius: var(--fsn-radius);
	transition: border-color .15s ease;
}
.fsn-prevnext__item:hover { border-color: var(--fsn-accent); color: inherit; }
.fsn-prevnext__dir { font-size: .68rem; font-weight: 800; letter-spacing: .12em; color: var(--fsn-text-dim); }
.fsn-prevnext__title {
	font-size: .89rem; font-weight: 600; line-height: 1.6; margin-top: 4px;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fsn-prevnext__item--next { text-align: end; }

/* ==========================================================================
   14. Sidebar
   ========================================================================== */

.fsn-side { display: flex; flex-direction: column; gap: clamp(1.25rem, 3vw, 1.85rem); }
@media (min-width: 1000px) {
	.fsn-side__sticky { position: sticky; top: calc(var(--fsn-header-h) + 20px); }
}

.fsn-widget {
	background: var(--fsn-surface);
	border: 1px solid var(--fsn-line);
	border-radius: var(--fsn-radius);
	padding: 1rem 1.1rem 1.15rem;
}
.fsn-widget__title,
.fsn-widget .widget-title,
.fsn-widget .wp-block-heading {
	font-size: .8rem;
	font-weight: 800;
	letter-spacing: .1em;
	color: var(--fsn-text);
	padding-bottom: .6rem;
	margin-bottom: .85rem;
	border-bottom: 1px solid var(--fsn-line);
	display: flex;
	align-items: center;
	gap: 8px;
}
.fsn-widget__title::before,
.fsn-widget .widget-title::before {
	content: "";
	width: 3px; height: 13px;
	background: var(--fsn-accent);
	border-radius: 2px;
}
.fsn-widget ul { list-style: none; margin: 0; padding: 0; font-size: .87rem; }
.fsn-widget li + li { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--fsn-line-soft); }
.fsn-widget a:hover { color: var(--fsn-accent); }

/* Rows that pair a label with a count. */
.fsn-widget li:has(> .fsn-dev__count) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.fsn-widget .fsn-dev__count { background: var(--fsn-surface-2); }

.fsn-ranklist { counter-reset: fsn-rank; list-style: none; margin: 0; padding: 0; }
.fsn-ranklist li { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px; }
.fsn-ranklist li::before {
	counter-increment: fsn-rank;
	content: counter(fsn-rank);
	font-family: var(--fsn-font-num);
	font-size: .82rem;
	font-weight: 800;
	color: var(--fsn-text-dim);
	width: 21px; height: 21px;
	display: grid; place-items: center;
	background: var(--fsn-surface-2);
	border-radius: 5px;
	flex: 0 0 auto;
	margin-top: .1em;
}
.fsn-ranklist li:nth-child(-n+3)::before { background: var(--fsn-accent); color: var(--fsn-on-accent); }
.fsn-ranklist__title { font-size: .86rem; line-height: 1.6; font-weight: 600; }

/* ==========================================================================
   15. Search form / pagination / 404
   ========================================================================== */

.fsn-searchform { display: flex; gap: 7px; }
.fsn-searchform input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 9px 13px;
	background: var(--fsn-bg);
	border: 1px solid var(--fsn-line);
	border-radius: var(--fsn-radius-sm);
	font-size: .88rem;
}
.fsn-searchform input[type="search"]::placeholder { color: var(--fsn-text-dim); }
.fsn-searchform button {
	padding: 9px 16px;
	background: var(--fsn-accent);
	color: var(--fsn-on-accent);
	border: 0;
	border-radius: var(--fsn-radius-sm);
	font-weight: 700;
	font-size: .85rem;
	cursor: pointer;
}
.fsn-searchform button:hover { background: var(--fsn-accent-dark); }

.fsn-pagination { margin-block-start: clamp(2rem, 5vw, 3rem); }
.fsn-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 7px;
}
.fsn-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 38px; height: 38px;
	padding-inline: 11px;
	background: var(--fsn-surface);
	border: 1px solid var(--fsn-line);
	border-radius: var(--fsn-radius-sm);
	font-size: .87rem;
	font-weight: 700;
	font-family: var(--fsn-font-num);
	transition: border-color .15s ease, color .15s ease;
}
.fsn-pagination .page-numbers:hover { border-color: var(--fsn-accent); color: var(--fsn-accent); }
.fsn-pagination .page-numbers.current {
	background: var(--fsn-accent);
	border-color: var(--fsn-accent);
	color: var(--fsn-on-accent);
}
.fsn-pagination .page-numbers.dots { border-color: transparent; background: none; }

.fsn-empty {
	text-align: center;
	padding: clamp(3rem, 9vw, 5.5rem) 1rem;
}
.fsn-empty__code {
	font-family: var(--fsn-font-num);
	font-size: clamp(3.5rem, 14vw, 7rem);
	font-weight: 800;
	line-height: 1;
	color: var(--fsn-line);
	letter-spacing: -.03em;
}
.fsn-empty__title { font-size: clamp(1.15rem, 3vw, 1.5rem); margin-block: .9rem .6rem; }
.fsn-empty__text { color: var(--fsn-text-mid); font-size: .92rem; max-width: 46ch; margin-inline: auto; }
.fsn-empty .fsn-searchform { max-width: 420px; margin: 1.6rem auto 0; }

/* ==========================================================================
   16. Footer
   ========================================================================== */

.fsn-footer {
	background: var(--fsn-bg-alt);
	border-top: 1px solid var(--fsn-line);
	padding-block: clamp(2.25rem, 5vw, 3.25rem) 1.5rem;
	font-size: .87rem;
}
.fsn-footer__grid {
	display: grid;
	gap: clamp(1.5rem, 4vw, 2.5rem);
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 720px) {
	.fsn-footer__grid { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
}
.fsn-footer__about { color: var(--fsn-text-mid); line-height: 1.9; font-size: .84rem; max-width: 42ch; margin-top: .8rem; }
.fsn-footer__title {
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .12em;
	color: var(--fsn-text-dim);
	margin-bottom: .8rem;
}
.fsn-footer ul { list-style: none; margin: 0; padding: 0; }
.fsn-footer li + li { margin-top: .5rem; }
.fsn-footer a { color: var(--fsn-text-mid); }
.fsn-footer a:hover { color: var(--fsn-accent); }

.fsn-footer__bottom {
	margin-top: clamp(1.75rem, 4vw, 2.5rem);
	padding-top: 1.15rem;
	border-top: 1px solid var(--fsn-line);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px;
	font-size: .76rem;
	color: var(--fsn-text-dim);
}
.fsn-footer__disclaimer {
	margin-top: 1rem;
	font-size: .72rem;
	line-height: 1.8;
	color: var(--fsn-text-dim);
	max-width: 90ch;
}

/* ==========================================================================
   17. Comments
   ========================================================================== */

.fsn-comments { margin-block-start: clamp(2.5rem, 6vw, 4rem); }
.fsn-comments ol { list-style: none; margin: 0; padding: 0; }
.fsn-comments .children { padding-inline-start: clamp(14px, 4vw, 32px); }
.fsn-comments .comment-body {
	padding: 1rem 1.15rem;
	background: var(--fsn-surface);
	border: 1px solid var(--fsn-line);
	border-radius: var(--fsn-radius);
	margin-block-end: 10px;
	font-size: .9rem;
}
.fsn-comments .comment-author { font-weight: 700; font-size: .88rem; }
.fsn-comments .comment-author img { border-radius: 50%; display: inline-block; vertical-align: middle; margin-inline-end: 8px; }
.fsn-comments .comment-metadata { font-size: .74rem; color: var(--fsn-text-dim); margin-block: 3px .7rem; }
.fsn-comments .reply { margin-top: .6rem; font-size: .8rem; font-weight: 700; }
.fsn-comments .comment-reply-link { color: var(--fsn-accent); }

.fsn-comments .comment-form { display: grid; gap: .9rem; }
.fsn-comments .comment-form input:not([type="submit"]):not([type="checkbox"]),
.fsn-comments .comment-form textarea {
	width: 100%;
	padding: 10px 13px;
	background: var(--fsn-bg);
	border: 1px solid var(--fsn-line);
	border-radius: var(--fsn-radius-sm);
	font-size: .9rem;
}
.fsn-comments .comment-form label { font-size: .8rem; font-weight: 700; color: var(--fsn-text-mid); display: block; margin-bottom: 4px; }
.fsn-comments .form-submit input[type="submit"] {
	padding: 10px 24px;
	background: var(--fsn-accent);
	color: var(--fsn-on-accent);
	border: 0;
	border-radius: 100px;
	font-weight: 700;
	cursor: pointer;
}
.fsn-comments .comment-notes, .fsn-comments .comment-form-cookies-consent { font-size: .78rem; color: var(--fsn-text-dim); }

/* ==========================================================================
   18. WordPress core alignment classes
   ========================================================================== */

.alignleft  { float: left;  margin: .4rem 1.5rem 1rem 0; }
.alignright { float: right; margin: .4rem 0 1rem 1.5rem; }
.aligncenter { margin-inline: auto; }
.alignwide, .alignfull { margin-inline: 0; }
.fsn-body .alignfull { width: 100%; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .gallery-caption { font-size: .76rem; color: var(--fsn-text-dim); }
.sticky .fsn-card { border-color: var(--fsn-accent); }
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}
@media (max-width: 599px) {
	.alignleft, .alignright { float: none; margin-inline: 0; }
}

/* ==========================================================================
   19. Print
   ========================================================================== */

@media print {
	.fsn-header, .fsn-ticker, .fsn-side, .fsn-footer, .fsn-share, .fsn-prevnext, .fsn-comments { display: none !important; }
	body { background: #fff; color: #000; }
	.fsn-body a { color: #000; text-decoration: underline; }
	.fsn-body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; word-break: break-all; }
}

/* ==========================================================================
   20. Search panel & back-to-top
   ========================================================================== */

.fsn-searchpanel {
	border-top: 1px solid var(--fsn-line-soft);
	background: var(--fsn-bg-alt);
	animation: fsn-slide .2s ease;
}
@keyframes fsn-slide {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.fsn-totop {
	position: fixed;
	right: clamp(12px, 3vw, 26px);
	bottom: clamp(12px, 3vw, 26px);
	z-index: 90;
	width: 42px; height: 42px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--fsn-line);
	background: color-mix(in srgb, var(--fsn-surface) 92%, transparent);
	backdrop-filter: blur(8px);
	color: var(--fsn-text-mid);
	cursor: pointer;
	box-shadow: var(--fsn-shadow);
	transition: opacity .2s ease, transform .2s ease, color .15s ease, border-color .15s ease;
}
.fsn-totop:hover { color: var(--fsn-accent); border-color: var(--fsn-accent); transform: translateY(-2px); }
.fsn-totop svg { width: 19px; height: 19px; }

/* Placeholder artwork -------------------------------------------------- */

.fsn-ph { width: 100%; height: 100%; object-fit: cover; display: block; }
.fsn-card__media .fsn-ph,
.fsn-row__thumb .fsn-ph,
.fsn-hero__media .fsn-ph { width: 100%; height: 100%; }

/* ==========================================================================
   21. TOC active state & toast
   ========================================================================== */

.fsn-toc a[aria-current="true"] {
	color: var(--fsn-accent);
	font-weight: 700;
}

.fsn-flash {
	position: fixed;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%);
	z-index: 300;
	padding: 10px 20px;
	border-radius: 100px;
	background: var(--fsn-text);
	color: var(--fsn-bg);
	font-size: .84rem;
	font-weight: 700;
	box-shadow: var(--fsn-shadow-lg);
	animation: fsn-toast .25s cubic-bezier(.2,.8,.3,1);
}
@keyframes fsn-toast {
	from { opacity: 0; transform: translate(-50%, 10px); }
	to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ==========================================================================
   22. Component headings inside the article body
   --------------------------------------------------------------------------
   Headings inside an addon card / callout / verdict box are labels, not
   document structure, so they must not inherit the section rhythm from
   `.fsn-body h2|h3` (top margin, accent rule, accent bar). `:is()` here
   raises specificity above `.fsn-body h3` so the reset actually lands.
   ========================================================================== */

.fsn-body :is(.fsn-addon, .fsn-note, .fsn-verdict, .fsn-widget, .fsn-toc) :is(h2, h3, h4) {
	margin-block-start: 0;
	padding-inline-start: 0;
	padding-block-end: 0;
	border-inline-start: 0;
	border-block-end: 0;
}
.fsn-body :is(.fsn-addon, .fsn-note, .fsn-verdict, .fsn-widget, .fsn-toc) :is(h2, h3)::after {
	content: none;
}

.fsn-body .fsn-addon .fsn-addon__name {
	font-size: 1.06rem;
	margin-block: .35rem .1rem;
}
.fsn-body .fsn-widget .fsn-widget__title {
	font-size: .8rem;
	padding-block-end: .6rem;
	margin-block-end: .85rem;
	border-block-end: 1px solid var(--fsn-line);
}