/* =========================================================================
   SuperFumetto — core styles
   Always loaded. Tokens, base, typography, layout utilities, atmospheric
   primitives, UI components (buttons, cards, forms), site chrome (nav,
   mobile drawer, skip link), animations, admin-bar compat, page.php.
   ========================================================================= */

/* Global: [hidden] must always hide, even when a utility class sets display. */
[hidden] { display: none !important; }

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */
:root {
	/* Type */
	--ff-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", serif;
	--ff-ui:      "Bricolage Grotesque", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
	--ff-mono:    "JetBrains Mono", "SFMono-Regular", ui-monospace, "Cascadia Code", Menlo, monospace;

	/* Scale (fluid) */
	--fs-eyebrow: clamp(0.72rem, 0.68rem + 0.15vw, 0.82rem);
	--fs-body:    clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	--fs-lead:    clamp(1.12rem, 1.04rem + 0.4vw, 1.35rem);
	--fs-h4:      clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
	--fs-h3:      clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
	--fs-h2:      clamp(2.2rem, 1.5rem + 3.2vw, 4.4rem);
	--fs-h1:      clamp(2.4rem, 1.5rem + 3.4vw, 5.4rem);
	--fs-display: clamp(4rem, 2rem + 9vw, 12rem);

	/* Spacing (fluid) */
	--s-1: 0.25rem;
	--s-2: 0.5rem;
	--s-3: 0.75rem;
	--s-4: 1rem;
	--s-5: 1.5rem;
	--s-6: 2rem;
	--s-7: 3rem;
	--s-8: 4rem;
	--s-9: 6rem;
	--s-10: 8rem;
	--s-section: clamp(4rem, 3rem + 6vw, 9rem);

	/* Radius */
	--r-sm: 4px;
	--r-md: 10px;
	--r-lg: 18px;
	--r-xl: 28px;
	--r-pill: 999px;

	/* Thick ink strokes */
	--stroke: 1.5px;
	--stroke-bold: 2.5px;

	/* Container */
	--container: min(100% - 2.5rem, 1320px);

	/* Transitions */
	--t-fast: 160ms cubic-bezier(.2,.6,.2,1);
	--t:      280ms cubic-bezier(.2,.6,.2,1);
	--t-slow: 520ms cubic-bezier(.2,.6,.2,1);
}

/* Color tokens (light only) */
:root {
	--c-paper:       #F5F1EA;
	--c-paper-soft:  #EEE7DA;
	--c-paper-deep:  #E8DFC9;
	--c-ink:         #141211;
	--c-ink-soft:    #3B3633;
	--c-ink-mute:    #6D6560;
	--c-line:        #2A2522;
	--c-line-soft:   #D4CBB7;

	--c-vermilion:   #FF3B1D;   /* primary accent */
	--c-sunshine:    #FFC83D;   /* secondary accent */
	--c-mint:        #2EBD7C;   /* positive */
	--c-ocean:       #0A2463;   /* adults primary */
	--c-magenta:     #FF5C97;   /* kids primary */

	--c-card:        #FFFFFF;
	--c-card-soft:   #FBF7EF;
	--c-shadow:      rgba(20, 18, 17, 0.08);
	--c-shadow-hard: rgba(20, 18, 17, 0.18);

	/* Category hooks — overridden by [data-category="..."] */
	--c-accent:          var(--c-vermilion);
	--c-accent-contrast: #FFFFFF;
	--c-accent-soft:     #FFEFEA;
}

/* Category accents */
[data-category="kids"] {
	--c-accent:          var(--c-mint);
	--c-accent-2:        var(--c-sunshine);
	--c-accent-3:        var(--c-vermilion);
	--c-accent-contrast: #FFFFFF;
	--c-accent-soft:     #DFF4E7;
}
[data-category="adults"] {
	--c-accent:          var(--c-ocean);
	--c-accent-2:        var(--c-vermilion);
	--c-accent-3:        var(--c-sunshine);
	--c-accent-contrast: #FFFFFF;
	--c-accent-soft:     #E1E8FB;
}
/* -------------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
	scroll-behavior: smooth;
	/* prevent overscroll bounce from detaching the sticky nav on iOS */
	overscroll-behavior-y: none;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html, body { margin: 0; padding: 0; }

.sf-body {
	font-family: var(--ff-ui);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.55;
	color: var(--c-ink);
	background: var(--c-paper);
	min-height: 100vh;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* subtle paper grain */
	background-image:
		radial-gradient(circle at 17% 13%, rgba(20,18,17,0.022) 0 1.2px, transparent 1.3px),
		radial-gradient(circle at 83% 67%, rgba(20,18,17,0.018) 0 1.1px, transparent 1.2px);
	background-size: 6px 6px, 9px 9px;
	background-attachment: fixed;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; padding: 0; color: inherit; }
input, textarea { font: inherit; color: inherit; }
hr { border: 0; border-top: var(--stroke) solid var(--c-line-soft); margin: var(--s-8) 0; }

::selection { background: var(--c-accent); color: var(--c-accent-contrast); }

/* -------------------------------------------------------------------------
   3. Typography
   ------------------------------------------------------------------------- */
.sf-display,
.sf-h1, .sf-h2, .sf-h3, .sf-h4 {
	font-family: var(--ff-display);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 0.95;
	margin: 0;
	color: var(--c-ink);
	font-variation-settings: "opsz" 96;
}
.sf-display { font-size: var(--fs-display); line-height: 0.86; letter-spacing: -0.035em; }
.sf-h1      { font-size: var(--fs-h1); }
.sf-h2      { font-size: var(--fs-h2); line-height: 0.98; letter-spacing: -0.025em; }
.sf-h3      { font-size: var(--fs-h3); line-height: 1.05; letter-spacing: -0.018em; }
.sf-h4      { font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -0.01em; font-weight: 500; }

.sf-em {
	font-style: italic;
	font-variation-settings: "opsz" 144, "SOFT" 100;
	color: var(--c-accent);
}

.sf-eyebrow {
	font-family: var(--ff-mono);
	font-weight: 500;
	font-size: var(--fs-eyebrow);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-ink-mute);
	margin: 0 0 var(--s-5);
	display: inline-flex;
	align-items: center;
	gap: var(--s-3);
}
.sf-eyebrow::before {
	content: "";
	width: 26px;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
}

.sf-lead {
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: var(--c-ink-soft);
	max-width: 62ch;
}

.sf-label {
	font-family: var(--ff-mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-ink-mute);
}

.sf-sr {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* -------------------------------------------------------------------------
   4. Layout utilities
   ------------------------------------------------------------------------- */
.sf-container { width: var(--container); margin-inline: auto; }
.sf-container--wide { width: min(100% - 2rem, 1560px); margin-inline: auto; }
.sf-section { padding-block: var(--s-section); position: relative; }
.sf-section--tight { padding-block: clamp(3rem, 2rem + 3vw, 5rem); }
.sf-py-24 { padding-block: 6rem; }

.sf-grid { display: grid; gap: var(--s-6); }
.sf-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-grid--cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.sf-rule {
	height: var(--stroke);
	background: var(--c-line);
	width: 100%;
	opacity: 0.9;
}
.sf-rule--thick { height: var(--stroke-bold); }

/* -------------------------------------------------------------------------
   5. Atmospheric primitives
   ------------------------------------------------------------------------- */

/* Registration marks (CMYK corners) */
.sf-reg {
	position: absolute;
	width: 40px; height: 40px;
	color: var(--c-ink);
	opacity: 0.35;
	pointer-events: none;
	mix-blend-mode: multiply;
}
.sf-reg--tl { top: 14px;    left: 14px; }
.sf-reg--tr { top: 14px;    right: 14px; transform: scaleX(-1); }
.sf-reg--bl { bottom: 14px; left: 14px; transform: scaleY(-1); }
.sf-reg--br { bottom: 14px; right: 14px; transform: scale(-1,-1); }

/* Halftone dot field */
.sf-halftone {
	position: absolute; inset: 0;
	background-image: radial-gradient(var(--c-ink) 1px, transparent 1.4px);
	background-size: 10px 10px;
	opacity: 0.08;
	pointer-events: none;
	mask-image: linear-gradient(135deg, #000 0%, transparent 80%);
	-webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 80%);
}
.sf-halftone--accent { background-image: radial-gradient(var(--c-accent) 1.2px, transparent 1.6px); opacity: 0.28; }

/* Burst star — comic action */
.sf-burst {
	position: absolute;
	display: inline-grid;
	place-items: center;
	font-family: var(--ff-display);
	font-weight: 800;
	font-style: italic;
	font-size: 0.95rem;
	color: var(--c-ink);
	background: var(--c-sunshine);
	width: 86px; height: 86px;
	clip-path: polygon(50% 0%, 61% 18%, 82% 12%, 76% 32%, 98% 38%, 82% 50%, 98% 62%, 76% 68%, 82% 88%, 61% 82%, 50% 100%, 39% 82%, 18% 88%, 24% 68%, 2% 62%, 18% 50%, 2% 38%, 24% 32%, 18% 12%, 39% 18%);
	line-height: 1;
	text-align: center;
	letter-spacing: -0.02em;
	border: 0;
	z-index: 2;
}

/* Speech bubble */
.sf-bubble {
	position: absolute;
	background: var(--c-paper);
	color: var(--c-ink);
	font-family: var(--ff-display);
	font-style: italic;
	font-weight: 600;
	font-size: clamp(0.95rem, 0.8rem + 0.6vw, 1.2rem);
	padding: 0.6rem 1rem;
	border: var(--stroke-bold) solid var(--c-line);
	border-radius: 18px 18px 18px 4px;
	box-shadow: 5px 5px 0 var(--c-line);
	white-space: nowrap;
}
.sf-bubble::after {
	content: "";
	position: absolute;
	bottom: -14px; left: 28px;
	width: 0; height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 14px solid var(--c-line);
}
.sf-bubble::before {
	content: "";
	position: absolute;
	bottom: -10px; left: 30px;
	width: 0; height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 11px solid var(--c-paper);
	z-index: 1;
}

/* -------------------------------------------------------------------------
   6. UI components
   ------------------------------------------------------------------------- */

/* Buttons */
.sf-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--s-3);
	padding: 0.95rem 1.5rem;
	font-family: var(--ff-ui);
	font-weight: 600;
	font-size: 0.98rem;
	letter-spacing: -0.005em;
	line-height: 1;
	border-radius: var(--r-pill);
	background: var(--c-ink);
	color: var(--c-paper);
	border: var(--stroke-bold) solid var(--c-line);
	box-shadow: 4px 4px 0 var(--c-line);
	transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast);
	will-change: transform;
}
.sf-btn:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--c-line);
}
.sf-btn:active {
	transform: translate(2px, 2px);
	box-shadow: 0 0 0 var(--c-line);
}

.sf-btn--accent {
	background: var(--c-accent);
	color: var(--c-accent-contrast);
}
.sf-btn--ghost {
	background: transparent;
	color: var(--c-ink);
	box-shadow: 4px 4px 0 var(--c-line);
}
.sf-btn--ghost:hover {
	background: var(--c-accent-soft);
}
.sf-btn--lg { padding: 1.15rem 1.8rem; font-size: 1.05rem; }
.sf-btn--sm { padding: 0.6rem 1rem; font-size: 0.88rem; box-shadow: 3px 3px 0 var(--c-line); }

.sf-btn svg { width: 18px; height: 18px; }

/* Icon button (circle) */
.sf-iconbtn {
	width: 40px; height: 40px;
	display: inline-grid; place-items: center;
	border-radius: 50%;
	background: transparent;
	border: var(--stroke-bold) solid var(--c-line);
	color: var(--c-ink);
	transition: background var(--t-fast), transform var(--t-fast);
}
.sf-iconbtn:hover { background: var(--c-accent-soft); transform: rotate(-8deg); }
.sf-iconbtn svg { width: 18px; height: 18px; }

/* Category toggle (pill with 2 options) */
.sf-catpill {
	display: inline-flex;
	border: var(--stroke-bold) solid var(--c-line);
	border-radius: var(--r-pill);
	padding: 4px;
	background: var(--c-paper);
	position: relative;
	isolation: isolate;
}
.sf-catpill__btn {
	padding: 0.5rem 0.95rem;
	font-family: var(--ff-mono);
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-radius: var(--r-pill);
	color: var(--c-ink-mute);
	transition: color var(--t-fast);
	position: relative; z-index: 2;
}
.sf-catpill__btn[aria-pressed="true"] { color: var(--c-accent-contrast); }
.sf-catpill__thumb {
	position: absolute;
	top: 4px; left: 4px;
	height: calc(100% - 8px);
	width: calc(50% - 4px);
	background: var(--c-accent);
	border-radius: var(--r-pill);
	transition: transform var(--t);
	z-index: 1;
}
[data-category="adults"] .sf-catpill__thumb { transform: translateX(100%); }

/* Card */
.sf-card {
	background: var(--c-card);
	border: var(--stroke-bold) solid var(--c-line);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: transform var(--t), box-shadow var(--t);
	position: relative;
}
.sf-card:hover {
	transform: translate(-3px, -3px);
	box-shadow: 10px 10px 0 var(--c-line);
}
.sf-card__media { display: block; overflow: hidden; aspect-ratio: 4/3; }
.sf-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.sf-card:hover .sf-card__media img { transform: scale(1.04) rotate(-0.4deg); }
.sf-card__body { padding: var(--s-5) var(--s-5) var(--s-6); }
.sf-card__title { font-family: var(--ff-display); font-size: clamp(1.4rem, 1.1rem + 0.8vw, 1.8rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 var(--s-3); font-weight: 600; }
.sf-card__excerpt { color: var(--c-ink-soft); margin: 0; }

/* Tag / chip */
.sf-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.7rem;
	font-family: var(--ff-mono);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border: var(--stroke) solid var(--c-line);
	border-radius: var(--r-pill);
	color: var(--c-ink);
	background: var(--c-paper);
}
.sf-tag--solid { background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink); }
.sf-tag--accent { background: var(--c-accent); color: var(--c-accent-contrast); border-color: var(--c-accent); }

/* Ratings */
.sf-stars { display: inline-flex; gap: 2px; color: var(--c-sunshine); }
.sf-stars svg { width: 16px; height: 16px; fill: currentColor; stroke: var(--c-line); stroke-width: 1px; }

/* Verified badge */
.sf-verified {
	display: inline-flex; align-items: center; gap: 0.35rem;
	font-family: var(--ff-mono); font-size: 0.7rem;
	letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--c-mint);
}

/* -------------------------------------------------------------------------
   7. Site chrome
   ------------------------------------------------------------------------- */
.sf-skip {
	position: absolute; top: -60px; left: 10px;
	padding: 0.5rem 1rem;
	background: var(--c-ink); color: var(--c-paper);
	border-radius: var(--r-md); z-index: 9999;
	transition: top var(--t-fast);
}
.sf-skip:focus { top: 10px; }

/* Nav */
.sf-nav {
	position: sticky;
	top: 0; z-index: 50;
	backdrop-filter: blur(14px) saturate(1.2);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	background: color-mix(in srgb, var(--c-paper) 86%, transparent);
	border-bottom: var(--stroke) solid var(--c-line-soft);
	transition: background var(--t);

	/* iOS Safari fixes:
	   1. Own compositing layer — stops jitter/flicker of sticky + backdrop-filter
	   2. Respect Dynamic Island / notch in portrait and especially landscape */
	will-change: transform;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	padding-top:   env(safe-area-inset-top, 0);
	padding-left:  env(safe-area-inset-left, 0);
	padding-right: env(safe-area-inset-right, 0);
}
.sf-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	padding: 0.9rem 0;
}
.sf-nav__brand {
	display: flex; align-items: baseline; gap: var(--s-2);
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: 1.35rem;
	letter-spacing: -0.02em;
	color: var(--c-ink);
}
.sf-nav__brand b { font-weight: 700; color: var(--c-accent); }
.sf-nav__brand small {
	font-family: var(--ff-mono);
	font-size: 0.65rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-ink-mute);
	font-weight: 500;
}
.sf-nav__links {
	display: flex; gap: var(--s-6); align-items: center;
}
.sf-nav__links a {
	font-size: 0.94rem; font-weight: 500;
	color: var(--c-ink-soft);
	position: relative;
	padding: 0.4rem 0;
	transition: color var(--t-fast);
}
.sf-nav__links a::after {
	content: "";
	position: absolute; bottom: 0; left: 0;
	width: 0; height: 2px;
	background: var(--c-accent);
	transition: width var(--t);
}
.sf-nav__links a:hover { color: var(--c-ink); }
.sf-nav__links a:hover::after { width: 100%; }
.sf-nav__actions { display: flex; align-items: center; gap: var(--s-3); }

/* Hamburger hidden on desktop, shown under 900 */
.sf-nav__menu { display: none; }

/* Mid: hide inline nav links */
@media (max-width: 1040px) {
	.sf-nav__links { display: none; }
}
/* Mobile: hide inline CTA but keep catpill switch visible in the bar */
@media (max-width: 900px) {
	.sf-nav__cta     { display: none !important; }
	.sf-nav__menu    { display: inline-grid; place-items: center; width: 44px; height: 44px; border: var(--stroke-bold) solid var(--c-line); border-radius: 50%; }
	.sf-nav__inner   { gap: var(--s-3); }
	.sf-nav__actions { gap: var(--s-2); }

	/* Compact catpill on mobile */
	.sf-nav__catpill                   { padding: 3px; }
	.sf-nav__catpill .sf-catpill__btn  { padding: 0.4rem 0.7rem; font-size: 0.7rem; letter-spacing: 0.1em; }
}
/* Default: full brand shown, short hidden (drawer always shows full) */
.sf-nav__brand-short { display: none; }

/* Mobile topbar only: swap to "Sf." — drawer version keeps the full logo */
@media (max-width: 560px) {
	.sf-nav__inner .sf-nav__brand .sf-nav__brand-full  { display: none; }
	.sf-nav__inner .sf-nav__brand .sf-nav__brand-short { display: inline; }
}

/* Very small phones: tighter brand, even more compact catpill */
@media (max-width: 420px) {
	.sf-nav__brand small              { display: none; }
	.sf-nav__inner                    { padding: 0.7rem 0; }
	.sf-nav__catpill .sf-catpill__btn { padding: 0.35rem 0.55rem; font-size: 0.64rem; }
	.sf-nav__menu                     { width: 40px; height: 40px; }
}
@media (max-width: 360px) {
	.sf-nav__catpill .sf-catpill__btn { padding: 0.3rem 0.45rem; font-size: 0.58rem; }
}

/* ---- Off-canvas mobile drawer ---- */
.sf-mnav {
	position: fixed; inset: 0;
	background: var(--c-paper);
	z-index: 60;
	display: flex; flex-direction: column;
	padding:
		calc(var(--s-5) + env(safe-area-inset-top, 0))
		calc(var(--s-5) + env(safe-area-inset-right, 0))
		calc(var(--s-6) + env(safe-area-inset-bottom, 0))
		calc(var(--s-5) + env(safe-area-inset-left, 0));
	gap: var(--s-5);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	transform: translateY(-100%);
	transition: transform var(--t);
	visibility: hidden;
}
.sf-mnav[data-open="true"] {
	transform: translateY(0);
	visibility: visible;
}
.sf-mnav__head {
	display: flex; justify-content: space-between; align-items: center;
	padding-bottom: var(--s-4);
	border-bottom: var(--stroke) solid var(--c-line-soft);
}
.sf-mnav__brand {
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: 1.3rem;
	letter-spacing: -0.02em;
	color: var(--c-ink);
	display: inline-flex;
	align-items: baseline;
}
.sf-mnav__brand b { font-weight: 700; color: var(--c-accent); }
.sf-mnav__links { display: flex; flex-direction: column; gap: var(--s-3); }
.sf-mnav__links a {
	font-family: var(--ff-display);
	font-weight: 500;
	font-size: clamp(1.6rem, 1.2rem + 2.5vw, 2.4rem);
	line-height: 1;
	letter-spacing: -0.02em;
	padding: 0.2rem 0;
	transition: color var(--t-fast), transform var(--t-fast);
}
.sf-mnav__links a:hover,
.sf-mnav__links a:focus-visible { color: var(--c-accent); font-style: italic; transform: translateX(4px); }

.sf-mnav__cta {
	width: 100%;
	justify-content: center;
	margin-top: auto;
}

/* Lock body scroll when drawer open (set by JS via doc.style.overflow) */
.sf-mnav[data-open="true"] ~ * { /* no-op, placeholder to keep selector section clean */ }

/* -------------------------------------------------------------------------
   8a. Section — Ticker
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   9. Animations
   ------------------------------------------------------------------------- */
@keyframes sf-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@keyframes sf-wobble {
	0%, 100% { transform: rotate(var(--r, 12deg)) translate(0, 0); }
	50%      { transform: rotate(calc(var(--r, 12deg) + 4deg)) translate(-4px, -4px); }
}
@keyframes sf-rise {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes sf-inklines {
	from { stroke-dashoffset: 1200; }
	to   { stroke-dashoffset: 0; }
}

[data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 700ms cubic-bezier(.2,.6,.2,1), transform 700ms cubic-bezier(.2,.6,.2,1);
}
[data-reveal].is-in { opacity: 1; transform: translateY(0); }
[data-reveal][data-delay="1"].is-in { transition-delay: 60ms; }
[data-reveal][data-delay="2"].is-in { transition-delay: 120ms; }
[data-reveal][data-delay="3"].is-in { transition-delay: 180ms; }
[data-reveal][data-delay="4"].is-in { transition-delay: 240ms; }
[data-reveal][data-delay="5"].is-in { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
	.sf-ticker__track,
	.sf-press__marquee,
	.sf-hero__burst,
	.sf-finalcta__burst,
	.sf-finalcta__burst-2 { animation: none !important; }
	[data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* -------------------------------------------------------------------------
   11. WordPress admin bar compatibility
   Logged-in users get the fixed admin bar (32px desktop, 46px when ≤782px).
   WP adds margin-top to <html> but sticky/fixed elements are viewport-anchored,
   so they'd slide under the bar — offset them manually.
   ------------------------------------------------------------------------- */
body.admin-bar .sf-nav         { top: 32px; }
body.admin-bar .sf-mnav        { top: 32px; }
body.admin-bar .sf-faq__aside  { top: 122px; }
body.admin-bar .sf-skip:focus  { top: 42px; }

@media screen and (max-width: 782px) {
	body.admin-bar .sf-nav        { top: 46px; }
	body.admin-bar .sf-mnav       { top: 46px; }
	body.admin-bar .sf-faq__aside { top: 136px; }
	body.admin-bar .sf-skip:focus { top: 56px; }
}

/* Some mobile browsers momentarily make the admin bar position: absolute during scroll.
   Keep our sticky nav anchored to the bar height to avoid a visible jump. */
@media screen and (max-width: 600px) {
	body.admin-bar .sf-nav { position: sticky; }
}

/* =========================================================================
   11.5 Default page template (page.php)
   ========================================================================= */

.sf-page-main { padding-top: var(--s-7); padding-bottom: var(--s-9); }
.sf-page { padding: var(--s-5) 0 var(--s-8); }
.sf-page__head {
	max-width: 780px;
	margin: 0 auto var(--s-6);
	text-align: center;
}
.sf-page__title { margin: 0; }
.sf-page__body {
	max-width: 720px;
	margin: 0 auto;
	font-size: var(--fs-body);
	line-height: 1.7;
	color: var(--c-ink-soft);
}
.sf-prose h2 { font-family: var(--ff-display); font-weight: 600; font-size: 1.8rem; letter-spacing: -0.01em; margin: var(--s-6) 0 var(--s-3); color: var(--c-ink); }
.sf-prose h3 { font-family: var(--ff-display); font-weight: 600; font-size: 1.35rem; margin: var(--s-5) 0 var(--s-3); color: var(--c-ink); }
.sf-prose p  { margin: 0 0 var(--s-4); }
.sf-prose a  { color: var(--c-ink); border-bottom: 1px solid var(--c-accent); transition: color var(--t); }
.sf-prose a:hover { color: var(--c-accent); }
.sf-prose ul, .sf-prose ol { margin: 0 0 var(--s-4) var(--s-5); padding: 0; }
.sf-prose li { margin-bottom: var(--s-2); }
.sf-prose blockquote {
	margin: var(--s-5) 0;
	padding: var(--s-4) var(--s-5);
	border-left: 3px solid var(--c-accent);
	background: var(--c-card-soft);
	font-style: italic;
	font-size: 1.05rem;
}


/* -------------------------------------------------------------------------
   Footer — rendered by get_footer() on every template, so lives in core.
   ------------------------------------------------------------------------- */
.sf-footer {
	background: var(--c-paper-soft);
	border-top: var(--stroke-bold) solid var(--c-line);
	padding-block: var(--s-8) var(--s-6);
	position: relative;
}
.sf-footer__grid {
	display: grid;
	grid-template-columns: 1.5fr repeat(3, 1fr) 1.4fr;
	gap: var(--s-6);
	padding-bottom: var(--s-7);
	border-bottom: var(--stroke) solid var(--c-line-soft);
}
.sf-footer__brand .sf-footer__logo {
	font-family: var(--ff-display); font-weight: 700;
	font-size: clamp(2rem, 1.5rem + 1.5vw, 3rem);
	line-height: 1; letter-spacing: -0.03em;
	margin: 0 0 var(--s-3);
}
.sf-footer__brand .sf-footer__logo span { color: var(--c-accent); font-style: italic; }
.sf-footer__tagline { margin: 0 0 var(--s-4); color: var(--c-ink-soft); }
.sf-footer__addr { margin: 0; font-family: var(--ff-mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--c-ink-mute); text-transform: uppercase; }
.sf-footer__col { display: flex; flex-direction: column; gap: var(--s-3); }
.sf-footer__heading {
	font-family: var(--ff-mono); font-size: 0.74rem;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--c-ink-mute);
	margin: 0 0 var(--s-2);
}
.sf-footer__col a { font-size: 0.98rem; color: var(--c-ink); transition: color var(--t-fast); }
.sf-footer__col a:hover { color: var(--c-accent); }
.sf-footer__news-desc { margin: 0 0 var(--s-4); color: var(--c-ink-soft); font-size: 0.94rem; }

.sf-newsletter { display: flex; align-items: center; gap: var(--s-2); border: var(--stroke-bold) solid var(--c-line); border-radius: var(--r-pill); padding: 4px; background: var(--c-card); }
.sf-newsletter input { flex: 1; border: 0; outline: 0; padding: 0.7rem 1rem; background: transparent; font-size: 0.95rem; }
.sf-newsletter button { width: 40px; height: 40px; border-radius: 50%; background: var(--c-ink); color: var(--c-paper); display: grid; place-items: center; transition: background var(--t-fast), transform var(--t-fast); }
.sf-newsletter button:hover { background: var(--c-accent); color: var(--c-accent-contrast); transform: rotate(-12deg); }
.sf-newsletter__ok { margin: var(--s-3) 0 0; color: var(--c-mint); font-size: 0.9rem; }

.sf-footer__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding-top: var(--s-5); }
.sf-footer__copy { margin: 0; font-family: var(--ff-mono); font-size: 0.78rem; letter-spacing: 0.08em; color: var(--c-ink-mute); text-transform: uppercase; }
.sf-footer__pay { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.sf-footer__pay span {
	font-family: var(--ff-mono); font-size: 0.72rem; letter-spacing: 0.08em;
	padding: 0.3rem 0.6rem; border: var(--stroke) solid var(--c-line-soft); border-radius: 4px;
	color: var(--c-ink-mute); text-transform: uppercase;
}

@media (max-width: 780px) {
	.sf-footer__grid { grid-template-columns: 1fr 1fr; }
	.sf-footer__news { grid-column: 1 / -1; }
	.sf-footer__bar { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
	.sf-footer__grid { grid-template-columns: 1fr; }
}