/**
 * SciFi2Go - "Cinema & Paper" component layer.
 *
 * Direction:  D-0020  (cinema = header/hero/hub header/masthead/newsletter/footer,
 *                      paper  = every reading surface)
 * Contrast:   docs/BRAND.md §7.3 (paper) and §7.3b (cinema) - both measured.
 * Display:    Archivo (D-0021) - headings only. Body stays Roboto.
 *
 * Tokens live in brand.css (--s2g-*). Anything cinema-specific is declared in
 * the ":root" block below and nowhere else. Never hard-code a brand value here.
 */

/* -------------------------------------------------------------------------
   Display face - Archivo, variable (wght 100-900, wdth 62-125). One file, OFL.
   ------------------------------------------------------------------------- */
@font-face {
	font-family: 'Archivo';
	src: url('../fonts/archivo-latin-var.woff2') format('woff2-variations');
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
}

:root {
	/* ---- cinema surface (BRAND §7.3b) ---- */
	--s2g-c-base: #050C38;
	--s2g-c-deep: #02061A;
	--s2g-c-raised: #0B1548;
	--s2g-c-glass: rgba(5, 12, 56, .72);
	--s2g-c-scrim: rgba(5, 12, 56, .70);

	--s2g-c-text: #FFFFFF;
	--s2g-c-muted: #C3C5CF;
	--s2g-c-subtle: #A0A3B3;
	--s2g-c-link: #7FACFF;
	--s2g-c-link-hover: #AAC7FF;
	--s2g-c-accent: #B969FF;

	/* borders: #3C4164 is only 1.91:1 on navy - invisible as an edge.
	   The shortest usable border is #565E8E (3.03:1). */
	--s2g-c-border: #5F689C;
	--s2g-c-border-soft: #565E8E;

	--s2g-c-focus: #7FACFF;
	--s2g-c-grad-from: #7FACFF;
	--s2g-c-grad-to: #C17CFF;

	--s2g-r-pill: 999px;
	--s2g-wrap: 1200px;
	--s2g-gutter: 24px;
}

/* -------------------------------------------------------------------------
   Type scale

   One place where every heading size is decided. Each value comes from a token
   in brand.css, so a size changes in one place and cannot drift between files.

   h1 to h3 are fluid. h4 to h6 are fixed on purpose: they sit inside prose and
   must not outgrow the paragraph they label, which is why h5 is body size and
   h6 is smaller than body.

   Before this block existed, h2 to h6 had no size at all in the theme and fell
   through to GeneratePress defaults (42/35/29/24/20px), which is what made the
   hierarchy inconsistent.
   ------------------------------------------------------------------------- */
.s2g-display,
h1, h2, h3, h4, h5, h6 {
	font-family: var(--s2g-font-display);
	font-weight: 600;
	font-stretch: 112%;
	line-height: var(--s2g-lh-h);
}
h1 {
	font-size: var(--s2g-fs-h1);
	font-weight: 800;
	font-stretch: 125%;
	line-height: var(--s2g-lh-display);
	letter-spacing: -.014em;
}
h2 {
	font-size: var(--s2g-fs-h2);
	font-stretch: 118%;
	letter-spacing: -.008em;
}
h3 {
	font-size: var(--s2g-fs-h3);
	letter-spacing: -.004em;
}
h4 {
	font-size: var(--s2g-fs-lede);
}
h5 {
	font-size: var(--s2g-fs-body);
}
h6 {
	font-size: var(--s2g-fs-ui);
	font-weight: 700;
	letter-spacing: .01em;
}

/* -------------------------------------------------------------------------
   Element defaults

   Every element the site actually uses gets a size here, so nothing depends on
   browser or parent-theme defaults. Component classes (.s2g-*) are more
   specific than these element selectors, so this layer never fights them.
   ------------------------------------------------------------------------- */
body {
	font-family: var(--s2g-font);
	font-size: var(--s2g-fs-body);
	line-height: var(--s2g-lh-body);
}
p {
	line-height: var(--s2g-lh-body);
}
small {
	font-size: var(--s2g-fs-sm);
}
strong, b {
	font-weight: 700;
}
code, kbd, samp, pre {
	font-family: var(--s2g-font-mono);
	font-size: 0.9375em;
}
figcaption {
	font-size: var(--s2g-fs-sm);
	line-height: var(--s2g-lh-ui);
}
cite {
	font-style: normal;
}
hr {
	border: 0;
	border-top: 1px solid var(--s2g-border);
	margin: var(--s2g-space-8) 0;
}
table {
	font-size: var(--s2g-fs-ui);
}
th {
	font-weight: 700;
}

/* UI, captions and form controls stay in Roboto: never the display face. */
.s2g-ui, figcaption, .s2g-eyebrow, button, input, select, textarea {
	font-family: var(--s2g-font);
}

.s2g-eyebrow {
	font-size: var(--s2g-fs-micro);
	line-height: var(--s2g-lh-ui);
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	margin: 0 0 12px;
}

/* -------------------------------------------------------------------------
   Layout
   ------------------------------------------------------------------------- */
.s2g-wrap {
	width: 100%;
	max-width: var(--s2g-wrap);
	margin-inline: auto;
	padding-inline: var(--s2g-gutter);
}

/* -------------------------------------------------------------------------
   Buttons
   A brand-blue fill with a white label is 4.17:1 and FAILS AA, so the cinema
   primary is white fill + navy text (18.81:1). See BRAND §7.3b rule 2.
   ------------------------------------------------------------------------- */
.s2g-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 24px;
	border-radius: var(--s2g-r-pill);
	border: 1px solid transparent;
	font-family: 'Roboto', Arial, sans-serif;
	font-size: var(--s2g-fs-ui);
	line-height: var(--s2g-lh-h);
	font-weight: 700;
	letter-spacing: .02em;
	text-decoration: none;
	cursor: pointer;
}
.s2g-btn--cinema { background: #fff; color: var(--s2g-c-base); }
.s2g-btn--cinema:hover,
.s2g-btn--cinema:focus { background: #E8ECFF; color: var(--s2g-c-base); }
.s2g-btn--ghost-cinema {
	background: transparent; color: #fff; border-color: var(--s2g-c-link);
}
.s2g-btn--ghost-cinema:hover,
.s2g-btn--ghost-cinema:focus {
	background: rgba(127, 172, 255, .12);
	border-color: var(--s2g-c-link-hover);
	color: #fff;
}
.s2g-btn--paper { background: var(--s2g-blue-600); color: #fff; }
.s2g-btn--paper:hover,
.s2g-btn--paper:focus { background: var(--s2g-blue-700); color: #fff; }
.s2g-btn--sm { padding: 10px 18px; font-size: var(--s2g-fs-ui); }

/* -------------------------------------------------------------------------
   Header (cinema)
   ------------------------------------------------------------------------- */
.s2g-header {
	background: var(--s2g-c-base);
	color: #fff;
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid var(--s2g-c-border-soft);
}
.s2g-header__bar {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 74px;
	justify-content: space-between;
}
.s2g-header .custom-logo-link img,
.s2g-header img.s2g-logo { width: 162px; height: auto; }

.s2g-nav { display: flex; align-items: center; gap: 24px; }
.s2g-nav a {
	color: #fff;
	text-decoration: none;
	font-family: 'Roboto', Arial, sans-serif;
	font-size: var(--s2g-fs-micro);
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	opacity: .88;
	padding: 6px 0;
}
.s2g-nav a:hover,
.s2g-nav a:focus,
.s2g-nav .current-menu-item > a,
.s2g-nav .current_page_item > a,
.s2g-nav a[aria-current] {
	opacity: 1;
	color: #fff;
	box-shadow: 0 2px 0 0 var(--s2g-c-link);
}
/* wp_nav_menu() emits a <ul>, so the row has to be built on the list itself -
   styling only .s2g-nav leaves the <li>s stacking vertically. */
.s2g-nav ul {
	display: flex;
	align-items: center;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.s2g-nav li { margin: 0; }
.s2g-nav .sub-menu {
	position: absolute;
	background: var(--s2g-c-raised);
	border: 1px solid var(--s2g-c-border);
	border-radius: 6px;
	padding: 8px;
	min-width: 220px;
}
.s2g-nav .sub-menu a { text-transform: none; letter-spacing: 0; font-size: var(--s2g-fs-ui); }

.s2g-header__actions { display: flex; align-items: center; gap: 12px; }
.s2g-icon-btn {
	width: 40px; height: 40px;
	display: grid; place-items: center;
	background: transparent;
	border: 1px solid var(--s2g-c-border);
	border-radius: 6px;
	color: #fff;
	cursor: pointer;
}
.s2g-icon-btn:hover,
.s2g-icon-btn:focus {
	border-color: var(--s2g-c-link);
	background: rgba(127, 172, 255, .12);
}
.s2g-nav-toggle { display: none; }

@media (max-width: 1023px) {
	.s2g-nav { display: none; }
	.s2g-nav-toggle { display: grid; }
	.s2g-nav.is-open ul {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
	.s2g-nav.is-open {
		display: block;
		position: absolute;
		left: 0; right: 0; top: 100%;
		background: var(--s2g-c-raised);
		border-block: 1px solid var(--s2g-c-border);
		padding: 16px 24px;
	}
}
@media (max-width: 479px) {
	.s2g-header img.s2g-logo { width: 132px; }
	.s2g-header__actions .s2g-btn { display: none; }
}

/* focus visibility on dark - the default blue ring is too weak on navy */
.s2g-header :focus-visible,
.s2g-footer :focus-visible,
.s2g-band :focus-visible { outline: 2px solid var(--s2g-c-focus); outline-offset: 2px; }

/* -------------------------------------------------------------------------
   Footer (cinema)
   ------------------------------------------------------------------------- */
.s2g-footer { background: var(--s2g-c-deep); color: var(--s2g-c-muted); padding: 64px 0 32px; }
.s2g-footer__grid { display: grid; gap: 32px; }
@media (min-width: 768px) { .s2g-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.s2g-footer h4,
.s2g-footer .widget-title {
	color: #fff;
	font-family: 'Roboto', Arial, sans-serif;
	font-size: var(--s2g-fs-micro);
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	margin-bottom: 12px;
}
.s2g-footer ul { list-style: none; margin: 0; padding: 0; }
.s2g-footer li { margin-bottom: 8px; }
.s2g-footer a { color: var(--s2g-c-muted); text-decoration: none; font-size: var(--s2g-fs-ui); }
.s2g-footer a:hover,
.s2g-footer a:focus { color: #fff; text-decoration: underline; }
.s2g-footer__brand img { width: 162px; margin-bottom: 16px; }
.s2g-footer__brand p {
	color: var(--s2g-c-subtle);
	font-size: var(--s2g-fs-sm);
	line-height: var(--s2g-lh-body);
	max-width: 34ch;
}
/* Social row. The circle is 40px because the glyph inside is small and the tap
   target still has to clear the 44px guidance on touch, which the 10px gap pads
   out. `currentColor` on the path means one rule covers hover, and the colour
   inverts to navy-on-white rather than white-on-white. */
.s2g-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
}
.s2g-footer__social li { margin: 0; }
/* The `a` in these selectors is load-bearing. `.s2g-footer a:hover` above is
   (0,2,1) and therefore beats a bare `.s2g-footer__social-link:hover` at (0,2,0),
   which repainted the glyph white while the circle was already white - an
   invisible icon on hover. Matching on `.s2g-footer a.…:hover` (0,3,1) wins. */
.s2g-footer a.s2g-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--s2g-c-border);
	border-radius: var(--s2g-r-pill);
	color: var(--s2g-c-muted);
	text-decoration: none;
	transition: color var(--s2g-dur) var(--s2g-ease),
		background-color var(--s2g-dur) var(--s2g-ease),
		border-color var(--s2g-dur) var(--s2g-ease);
}
.s2g-footer a.s2g-footer__social-link:hover,
.s2g-footer a.s2g-footer__social-link:focus {
	color: var(--s2g-c-base);
	background: #fff;
	border-color: #fff;
	text-decoration: none;
}
.s2g-footer__social-icon { display: block; width: 20px; height: 20px; }
.s2g-footer__bottom {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--s2g-c-border-soft);
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	color: var(--s2g-c-subtle);
	font-size: var(--s2g-fs-sm);
	line-height: var(--s2g-lh-ui);
}

/* -------------------------------------------------------------------------
   Cinema bands: hero, hub header, article masthead, newsletter
   ------------------------------------------------------------------------- */
.s2g-band { position: relative; color: var(--s2g-c-text); isolation: isolate; background: var(--s2g-c-base); }
.s2g-band__in { position: relative; z-index: 1; }
.s2g-band h1, .s2g-band h2 { color: #fff; }
.s2g-band p { color: var(--s2g-c-muted); }
.s2g-band .s2g-eyebrow { color: var(--s2g-c-link); }

/* gradient headline - the lifted pair is AA at any size; #2A74FF → #A744FF is not */
.s2g-grad-text {
	background: linear-gradient(96deg, var(--s2g-c-grad-from) 0%, var(--s2g-c-grad-to) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.s2g-grad-text { color: #fff; }
}

/* full-bleed artwork + scrim */
.s2g-band--art { background-size: cover; background-position: center right; background-repeat: no-repeat; }
.s2g-band--art::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(90deg,
		rgba(5, 12, 56, .94) 0%, rgba(5, 12, 56, .86) 34%,
		rgba(5, 12, 56, .58) 58%, rgba(5, 12, 56, .22) 78%, rgba(5, 12, 56, .08) 100%);
}
.s2g-band--art.s2g-band--tall::before {
	background: linear-gradient(180deg,
		rgba(5, 12, 56, .60) 0%, rgba(5, 12, 56, .68) 48%, rgba(5, 12, 56, .93) 100%);
}

.s2g-hero { padding: 96px 0 48px; }
.s2g-hero__lede { color: var(--s2g-c-muted); font-size: var(--s2g-fs-lede); line-height: var(--s2g-lh-ui); max-width: 52ch; }
.s2g-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.s2g-hero__meta {
	display: flex; flex-wrap: wrap; gap: 24px;
	margin-top: 48px; padding-top: 24px;
	border-top: 1px solid var(--s2g-c-border-soft);
	color: var(--s2g-c-subtle);
	font-size: var(--s2g-fs-sm);
}
.s2g-hero__meta strong {
	display: block;
	color: #fff;
	font-family: var(--s2g-font-display);
	font-weight: 600;
	font-stretch: 118%;
	font-size: var(--s2g-fs-h3);
	line-height: 30px;
}
@media (min-width: 1024px) { .s2g-hero { padding: 96px 0 56px; } }

/* glass panel (editor's pick, featured) */
.s2g-glass {
	background: var(--s2g-c-glass);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--s2g-c-border);
	border-radius: 12px;
	padding: 16px;
}

/* hub header / masthead */
.s2g-masthead { padding: 64px 0 48px; }
.s2g-masthead .s2g-crumbs { margin-bottom: 24px; }

.s2g-crumbs {
	display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
	list-style: none; margin: 0; padding: 0;
	font-size: var(--s2g-fs-micro); letter-spacing: .1em; text-transform: uppercase;
	color: var(--s2g-c-subtle);
}
.s2g-crumbs a { color: var(--s2g-c-link); text-decoration: none; }
.s2g-crumbs a:hover, .s2g-crumbs a:focus { color: var(--s2g-c-link-hover); text-decoration: underline; }
.s2g-crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--s2g-c-border); }

.s2g-tag {
	display: inline-block; padding: 5px 12px; border-radius: var(--s2g-r-pill);
	margin-bottom: 16px; border: 1px solid var(--s2g-c-link); color: var(--s2g-c-link);
	font-family: 'Roboto', Arial, sans-serif;
	font-size: var(--s2g-fs-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.s2g-byline {
	display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center;
	padding-top: 24px; margin-top: 24px;
	border-top: 1px solid var(--s2g-c-border-soft);
	color: var(--s2g-c-subtle); font-size: var(--s2g-fs-sm);
}
.s2g-byline b { color: #fff; font-weight: 500; }

/* subcategory chip strip */
.s2g-subcats { background: var(--s2g-c-deep); border-bottom: 1px solid var(--s2g-c-border-soft); padding: 16px 0; }
.s2g-subcats__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.s2g-subcats__label {
	font-family: 'Roboto', Arial, sans-serif;
	font-size: var(--s2g-fs-micro); letter-spacing: .18em; text-transform: uppercase;
	color: var(--s2g-c-subtle); margin-right: 8px;
}
.s2g-chip {
	display: inline-block; padding: 7px 14px; border-radius: var(--s2g-r-pill);
	border: 1px solid var(--s2g-c-border); color: #fff; text-decoration: none;
	font-family: 'Roboto', Arial, sans-serif; font-size: var(--s2g-fs-sm); font-weight: 500;
}
.s2g-chip:hover, .s2g-chip:focus { border-color: var(--s2g-c-link); background: rgba(127, 172, 255, .12); color: #fff; }
.s2g-chip[aria-current] { background: var(--s2g-c-link); border-color: var(--s2g-c-link); color: var(--s2g-c-base); font-weight: 700; }

/* newsletter band */
.s2g-newsletter { position: relative; color: #fff; padding: 64px 0; background: var(--s2g-c-base); isolation: isolate; }
.s2g-newsletter::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background: radial-gradient(760px 360px at 88% 0%, rgba(167, 68, 255, .34), transparent 62%),
	            radial-gradient(680px 340px at 4% 100%, rgba(42, 116, 255, .28), transparent 64%);
}
.s2g-newsletter > * { position: relative; z-index: 1; }
.s2g-newsletter .s2g-eyebrow { color: var(--s2g-c-accent); }
.s2g-newsletter p { color: var(--s2g-c-muted); }

/* -------------------------------------------------------------------------
   Article furniture (paper)
   ------------------------------------------------------------------------- */
.s2g-figure { margin: 48px 0; }
.s2g-figure img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--s2g-navy-100); }
.s2g-figure figcaption { margin-top: 12px; font-size: var(--s2g-fs-sm); line-height: var(--s2g-lh-ui); color: var(--s2g-navy-400); }

/* video facade - no third-party iframe until the reader clicks */
.s2g-video { margin: 48px 0; }
.s2g-video__frame {
	position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
	background: #000; border: 1px solid var(--s2g-navy-100);
}
.s2g-video__facade {
	position: absolute; inset: 0; width: 100%; height: 100%;
	border: 0; padding: 0; cursor: pointer; background: none;
	display: grid; place-items: center;
}
.s2g-video__facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .7; }
.s2g-video__facade:hover img { opacity: .85; }
.s2g-video__play {
	position: relative; display: grid; place-items: center;
	width: 74px; height: 74px; border-radius: var(--s2g-r-pill);
	background: #fff; color: var(--s2g-c-base);
}
.s2g-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.s2g-video figcaption { margin-top: 12px; font-size: var(--s2g-fs-sm); line-height: var(--s2g-lh-ui); color: var(--s2g-navy-400); }

/* Amazon Kindle preview - wrapper reserves 350x600 so the widget cannot shift layout */
.s2g-preview { border: 1px solid var(--s2g-navy-200); border-radius: 12px; padding: 16px; background: #F7F8FA; }
.s2g-preview__label {
	margin: 0 0 12px; font-family: 'Roboto', Arial, sans-serif;
	font-size: var(--s2g-fs-micro); font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
	color: var(--s2g-navy-400);
}
.s2g-preview__frame {
	position: relative; width: 100%; max-width: 350px; aspect-ratio: 350 / 600;
	margin-inline: auto; background: #fff; border-radius: 6px; overflow: hidden;
}
.s2g-preview__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.s2g-preview__note { margin: 12px 0 0; font-size: var(--s2g-fs-sm); line-height: var(--s2g-lh-ui); color: var(--s2g-navy-500); }
.s2g-outline-grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) {
	.s2g-outline-grid { grid-template-columns: minmax(0, 1fr) 350px; gap: 48px; }
	.s2g-outline-grid .s2g-preview { position: sticky; top: 96px; }
}

/* verdict, quick facts, excerpt, pull quote, FAQ - paper */
.s2g-verdict {
	background: var(--s2g-blue-50); border: 1px solid var(--s2g-blue-100);
	border-left: 4px solid var(--s2g-blue-600); border-radius: 12px;
	padding: 24px; margin: 0 0 32px;
}
.s2g-verdict .s2g-eyebrow { color: var(--s2g-blue-700); }
.s2g-quickfacts { border: 1px solid var(--s2g-navy-100); border-radius: 12px; padding: 24px; margin: 0 0 32px; }
.s2g-quickfacts dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 24px; margin: 0; }
.s2g-quickfacts dt { color: var(--s2g-navy-400); font-size: var(--s2g-fs-ui); }
.s2g-quickfacts dd { margin: 0; font-size: var(--s2g-fs-ui); font-weight: 500; }
.s2g-excerpt {
	margin: 0 0 32px; padding: 24px;
	border-left: 3px solid var(--s2g-blue-600);
	background: #F7F8FA; border-radius: 0 12px 12px 0;
}
.s2g-excerpt p {
	font-family: var(--s2g-font-display); font-weight: 600; font-stretch: 112%;
	font-size: var(--s2g-fs-h3); line-height: 1.36; margin: 0 0 12px;
}
.s2g-excerpt cite { font-style: normal; font-size: var(--s2g-fs-sm); color: var(--s2g-navy-400); }
.s2g-pullquote { margin: 48px 0; padding-left: 24px; border-left: 3px solid var(--s2g-violet-400); }
.s2g-pullquote p {
	font-family: var(--s2g-font-display); font-weight: 600; font-stretch: 112%;
	font-size: var(--s2g-fs-h3); line-height: 1.34; margin: 0;
}
.s2g-pullquote cite { display: block; margin-top: 12px; font-style: normal; font-size: var(--s2g-fs-sm); color: var(--s2g-navy-400); }

/* -------------------------------------------------------------------------
   Cards / listing
   ------------------------------------------------------------------------- */
.s2g-card {
	background: #fff; border: 1px solid var(--s2g-navy-100); border-radius: 12px;
	overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit;
}
.s2g-card:hover { border-color: var(--s2g-blue-100); }
.s2g-card:hover h3, .s2g-card:hover h4 { color: var(--s2g-blue-800); }
/* the image is out of flow: a plain aspect-ratio box does NOT constrain a
   replaced child, so a portrait upload would make its card taller than its row */
.s2g-card__media { position: relative; flex: none; aspect-ratio: 16 / 9; overflow: hidden; background: var(--s2g-c-base); }
.s2g-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s2g-card__body { padding: 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.s2g-card__body h3, .s2g-card__body h4 { margin: 0; }
.s2g-card__body p { margin: 0; color: var(--s2g-navy-500); font-size: var(--s2g-fs-ui); line-height: var(--s2g-lh-ui); }
.s2g-card__foot {
	margin-top: auto; padding-top: 12px;
	display: flex; justify-content: space-between; gap: 12px;
	color: var(--s2g-navy-400); font-size: var(--s2g-fs-sm); line-height: var(--s2g-lh-ui);
}
.s2g-pill {
	display: inline-block; align-self: flex-start; padding: 4px 10px; border-radius: var(--s2g-r-pill);
	background: var(--s2g-blue-50); color: var(--s2g-blue-800);
	font-family: 'Roboto', Arial, sans-serif;
	font-size: var(--s2g-fs-micro); line-height: var(--s2g-lh-ui); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.s2g-pill--violet { background: var(--s2g-violet-50); color: var(--s2g-violet-700); }

.s2g-grid-3 { display: grid; gap: 32px; }
@media (min-width: 600px) { .s2g-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .s2g-grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* hub tiles */
.s2g-hubs { display: grid; gap: 24px; }
@media (min-width: 768px) { .s2g-hubs { grid-template-columns: repeat(3, 1fr); } }
.s2g-hub {
	position: relative; display: block; overflow: hidden; border-radius: 12px;
	border: 1px solid var(--s2g-c-border-soft); min-height: 230px; color: #fff;
	text-decoration: none; background: var(--s2g-c-base);
}
.s2g-hub img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .62; }
.s2g-hub::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(5, 12, 56, .10), rgba(5, 12, 56, .94));
}
.s2g-hub__inner {
	position: relative; z-index: 1; padding: 24px; height: 100%;
	display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
}
.s2g-hub__inner h3 { color: #fff; margin: 0; }
.s2g-hub__inner p { margin: 0; color: var(--s2g-c-muted); font-size: var(--s2g-fs-ui); line-height: var(--s2g-lh-ui); }
.s2g-hub__count {
	color: var(--s2g-c-link); font-family: 'Roboto', Arial, sans-serif;
	font-size: var(--s2g-fs-micro); font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.s2g-hub:hover { border-color: var(--s2g-c-link); }

/* pagination */
/* `the_posts_pagination()` puts the numbers inside a `.nav-links` wrapper, so the
   flex row has to be applied there, not on the outer nav. Setting the links
   themselves to a block-level display stacked them one per line on mobile. */
.s2g-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 48px; list-style: none; padding: 0; }
.s2g-pager .nav-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.s2g-pager a, .s2g-pager span {
	display: inline-flex; justify-content: center; align-items: center;
	min-width: 42px; height: 42px; padding: 0 12px;
	border: 1px solid var(--s2g-navy-200); border-radius: 6px;
	text-decoration: none; color: var(--s2g-navy-500); font-size: var(--s2g-fs-ui);
}
@media (max-width: 400px) {
	.s2g-pager, .s2g-pager .nav-links { gap: 6px; }
	.s2g-pager a, .s2g-pager span { min-width: 38px; height: 38px; padding: 0 8px; }
}
.s2g-pager a:hover { border-color: var(--s2g-blue-700); color: var(--s2g-blue-800); }
.s2g-pager .current { background: var(--s2g-c-base); border-color: var(--s2g-c-base); color: #fff; font-weight: 700; }

/* disclosure strip */
.s2g-disclosure { background: var(--s2g-blue-50); border-block: 1px solid var(--s2g-blue-100); padding: 24px 0; }
.s2g-disclosure p { margin: 0; color: var(--s2g-navy-500); font-size: var(--s2g-fs-sm); line-height: var(--s2g-lh-body); }

/* -------------------------------------------------------------------------
   Home (front page) sections - built to Pages/00-home/design/home.html (04.11)
   ------------------------------------------------------------------------- */
.s2g-section { padding: 64px 0; }
.s2g-section--sunken { background: var(--s2g-surface-sunken); }
.s2g-section__head {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 24px; margin-bottom: 32px;
}
.s2g-section__head h2 { max-width: 22ch; }
.s2g-section__head .s2g-eyebrow { color: var(--s2g-blue-700); }
.s2g-section__head p { margin: 8px 0 0; color: var(--s2g-text-secondary); }

.s2g-hero__grid { display: grid; gap: 48px; align-items: end; }
@media (min-width: 1024px) {
	.s2g-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}

/* glass panel (hero editor's pick) */
.s2g-pick {
	display: flex; gap: 16px; align-items: center; max-width: 420px;
	padding: 16px; background: var(--s2g-c-glass);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--s2g-c-border); border-radius: 12px;
	text-decoration: none; color: #fff;
}
.s2g-pick:hover { border-color: var(--s2g-c-link); }
.s2g-pick__thumb { flex: 0 0 62px; aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; background: var(--s2g-c-raised); }
.s2g-pick__thumb img { width: 100%; height: 100%; object-fit: cover; }
.s2g-pick__text { min-width: 0; }
.s2g-pick .s2g-eyebrow { display: block; margin: 0 0 6px; color: var(--s2g-c-accent); font-size: 11px; }
.s2g-pick__title {
	display: block; font-family: var(--s2g-font-display); font-weight: 600; font-stretch: 112%;
	font-size: 16px; line-height: 22px; color: #fff; margin: 0 0 4px;
}
.s2g-pick__note { display: block; margin: 0; color: var(--s2g-c-muted); font-size: 13px; line-height: 19px; }

/* value strip (paper) */
.s2g-strip { background: var(--s2g-surface-sunken); border-bottom: 1px solid var(--s2g-border); padding: 48px 0; }
.s2g-strip__grid { display: grid; gap: 32px; }
@media (min-width: 768px) { .s2g-strip__grid { grid-template-columns: repeat(3, 1fr); } }
.s2g-strip__item { display: flex; gap: 16px; align-items: flex-start; }
.s2g-strip__icon {
	flex: 0 0 40px; width: 40px; height: 40px; border-radius: 6px;
	background: var(--s2g-blue-50); color: var(--s2g-blue-700);
	display: grid; place-items: center; border: 1px solid var(--s2g-blue-100);
}
.s2g-strip__item h4 { margin: 0 0 4px; }
.s2g-strip__item p { margin: 0; color: var(--s2g-text-secondary); font-size: 15px; line-height: 23px; }

/* featured (1 lead + stacked side cards) */
.s2g-featured { display: grid; gap: 32px; align-items: start; }
.s2g-featured__side { display: grid; gap: 32px; }
@media (min-width: 768px) and (max-width: 1023px) { .s2g-featured__side { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .s2g-featured { grid-template-columns: 1.05fr .95fr; gap: 48px; } }
.s2g-featured__lead .s2g-card__body h3 { font-size: clamp(22px, 2.6vw, 30px); }
.s2g-card--row { flex-direction: row; }
.s2g-card--row .s2g-card__media { flex: 0 0 132px; aspect-ratio: 4 / 3; }
.s2g-card--row .s2g-card__body { padding: 16px 24px; }

/* paper ghost button (section-head link) */
.s2g-btn--ghost { background: transparent; color: var(--s2g-link); border-color: var(--s2g-border-strong); }
.s2g-btn--ghost:hover, .s2g-btn--ghost:focus { border-color: var(--s2g-blue-700); color: var(--s2g-link-hover); }

/* -------------------------------------------------------------------------
   Reduced motion + print
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.s2g-btn, .s2g-card, .s2g-hub, .s2g-icon-btn { transition: none !important; }
}