/* =========================================================================
   STAND FOR — Design System
   Premium editorial charity platform. Mobile-first. 8px spacing.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS — colour, type, space, radii, shadows, motion, layers
   ------------------------------------------------------------------------- */

:root {
	/* --- Brand palette --- */
	--c-ink:           #0A0E17;   /* deep midnight — authority */
	--c-ink-soft:      #161B26;
	--c-ink-muted:     #2A3242;
	--c-bone:          #FAF6F0;   /* warm off-white surface */
	--c-bone-deep:     #F2EBDF;   /* warmer cream */
	--c-paper:         #FFFFFF;
	--c-mist:          #6E7480;
	--c-mist-soft:     #B6B0A5;
	--c-line:          #E5DFD2;
	--c-line-soft:     #EEE9DD;

	/* Accent — Stand For ember: bold, hopeful, refined */
	--c-ember:         #E03E2D;
	--c-ember-deep:    #B92E1E;
	--c-ember-soft:    #F4A89F;
	--c-ember-wash:    #FCEDEA;

	/* Supporting */
	--c-gold:          #C9A86A;
	--c-sage:          #5E7A5C;
	--c-sky:           #3A6EA5;

	/* Semantic */
	--c-bg:            var(--c-bone);
	--c-bg-elev:       var(--c-paper);
	--c-text:          var(--c-ink);
	--c-text-muted:    var(--c-mist);
	--c-text-invert:   var(--c-bone);
	--c-accent:        var(--c-ember);
	--c-accent-hover:  var(--c-ember-deep);
	--c-border:        var(--c-line);
	--c-focus:         #1A6FFF;

	/* Overlays */
	--veil-ink:        rgba(10,14,23,.72);
	--veil-ink-soft:   rgba(10,14,23,.48);
	--veil-bone:       rgba(250,246,240,.92);

	/* --- Typography --- */
	--ff-display:      'Fraunces', 'Times New Roman', Georgia, serif;
	--ff-body:         'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--ff-mono:         ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Fluid type scale — clamp(min, fluid, max) */
	--fs-xs:           clamp(0.75rem, 0.71rem + 0.18vw, 0.8125rem);   /* 12-13 */
	--fs-sm:           clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);  /* 14-15 */
	--fs-base:         clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);      /* 16-17 */
	--fs-lg:           clamp(1.125rem, 1.07rem + 0.27vw, 1.25rem);    /* 18-20 */
	--fs-xl:           clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);       /* 20-24 */
	--fs-2xl:          clamp(1.5rem, 1.32rem + 0.91vw, 2rem);         /* 24-32 */
	--fs-3xl:          clamp(1.875rem, 1.55rem + 1.6vw, 2.75rem);     /* 30-44 */
	--fs-4xl:          clamp(2.25rem, 1.7rem + 2.7vw, 3.75rem);       /* 36-60 */
	--fs-5xl:          clamp(2.75rem, 1.85rem + 4.5vw, 5rem);         /* 44-80 */
	--fs-6xl:          clamp(3.25rem, 2.1rem + 5.7vw, 6.25rem);       /* 52-100 */

	--lh-tight:        1.05;
	--lh-snug:         1.18;
	--lh-base:         1.55;
	--lh-loose:        1.7;

	--ls-tight:        -0.025em;
	--ls-snug:         -0.015em;
	--ls-base:         -0.005em;
	--ls-wide:         0.08em;
	--ls-eyebrow:      0.16em;

	/* --- Spacing — 8px base --- */
	--sp-1:  4px;
	--sp-2:  8px;
	--sp-3:  12px;
	--sp-4:  16px;
	--sp-5:  20px;
	--sp-6:  24px;
	--sp-8:  32px;
	--sp-10: 40px;
	--sp-12: 48px;
	--sp-16: 64px;
	--sp-20: 80px;
	--sp-24: 96px;
	--sp-28: 112px;
	--sp-32: 128px;
	--sp-40: 160px;

	/* Fluid section padding */
	--section-y:       clamp(64px, 8vw, 144px);
	--section-y-sm:    clamp(48px, 6vw, 96px);
	--gutter:          clamp(20px, 4vw, 40px);

	/* --- Radii --- */
	--r-xs: 4px;
	--r-sm: 8px;
	--r-md: 12px;
	--r-lg: 20px;
	--r-xl: 28px;
	--r-2xl: 40px;
	--r-pill: 999px;

	/* --- Shadows --- */
	--shadow-xs:  0 1px 2px rgba(10,14,23,.05);
	--shadow-sm:  0 2px 6px rgba(10,14,23,.06), 0 1px 2px rgba(10,14,23,.04);
	--shadow-md:  0 8px 24px rgba(10,14,23,.08), 0 2px 6px rgba(10,14,23,.05);
	--shadow-lg:  0 20px 50px rgba(10,14,23,.12), 0 6px 14px rgba(10,14,23,.06);
	--shadow-xl:  0 40px 80px rgba(10,14,23,.18);
	--shadow-glow: 0 10px 40px rgba(224,62,45,.22);

	/* --- Motion --- */
	--ease-out:    cubic-bezier(.22,.61,.36,1);
	--ease-in-out: cubic-bezier(.65,0,.35,1);
	--ease-spring: cubic-bezier(.34,1.56,.64,1);
	--dur-fast:    160ms;
	--dur-base:    260ms;
	--dur-slow:    520ms;
	--dur-xslow:   900ms;

	/* --- Layout --- */
	--container:      1240px;
	--container-wide: 1440px;
	--container-tight: 920px;
	--container-prose: 720px;

	/* --- Z-index --- */
	--z-base:    1;
	--z-raise:   10;
	--z-sticky:  100;
	--z-header:  200;
	--z-overlay: 800;
	--z-modal:   900;
	--z-top:     1000;
}

/* Dark surface variant — used for hero ink sections and footer */
.theme-ink {
	--c-bg:          var(--c-ink);
	--c-bg-elev:     var(--c-ink-soft);
	--c-text:        var(--c-bone);
	--c-text-muted: #A8AEBC;
	--c-border:      rgba(255,255,255,.1);
	color: var(--c-text);
	background: var(--c-bg);
}

.theme-cream {
	--c-bg:      var(--c-bone-deep);
	--c-bg-elev: var(--c-bone);
}

/* -------------------------------------------------------------------------
   2. RESET — minimal, modern
   ------------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
	tab-size: 4;
}

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

body {
	margin: 0;
	font-family: var(--ff-body);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	color: var(--c-text);
	background: var(--c-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img, picture, svg, video, canvas {
	display: block;
	max-width: 100%;
	height: auto;
}

img { border: 0; }

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

button { cursor: pointer; background: none; border: 0; padding: 0; }

a {
	color: var(--c-accent);
	text-decoration: none;
	transition: color var(--dur-base) var(--ease-out);
}
a:hover { color: var(--c-accent-hover); }

ul, ol { padding-inline-start: 1.2em; }

hr {
	border: 0;
	border-top: 1px solid var(--c-border);
	margin: var(--sp-12) 0;
}

::selection {
	background: var(--c-ember);
	color: var(--c-bone);
}

/* -------------------------------------------------------------------------
   3. ACCESSIBILITY — focus, skip link, screen-reader text
   ------------------------------------------------------------------------- */

:focus { outline: none; }
:focus-visible {
	outline: 2px solid var(--c-focus);
	outline-offset: 3px;
	border-radius: var(--r-xs);
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--c-ink);
	color: var(--c-bone);
	padding: 12px 20px;
	z-index: var(--z-top);
	font-weight: 600;
	border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus {
	left: 0;
	color: var(--c-bone);
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background-color: var(--c-paper);
	clip: auto !important;
	clip-path: none;
	color: var(--c-ink);
	display: block;
	font-size: 14px;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: var(--z-top);
}

/* -------------------------------------------------------------------------
   4. TYPOGRAPHY — display, body, prose
   ------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	margin: 0 0 var(--sp-4);
	font-family: var(--ff-display);
	font-weight: 400;
	font-variation-settings: 'opsz' 144, 'SOFT' 50;
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--c-text);
	text-wrap: balance;
}

h1, .h1 {
	font-size: var(--fs-5xl);
	font-weight: 400;
	letter-spacing: var(--ls-tight);
}

h2, .h2 { font-size: var(--fs-4xl); }
h3, .h3 { font-size: var(--fs-3xl); }
h4, .h4 { font-size: var(--fs-2xl); }
h5, .h5 { font-size: var(--fs-xl); line-height: var(--lh-snug); }
h6, .h6 { font-size: var(--fs-lg); line-height: var(--lh-snug); }

.display {
	font-family: var(--ff-display);
	font-size: var(--fs-6xl);
	font-weight: 380;
	font-variation-settings: 'opsz' 144, 'SOFT' 30;
	line-height: 0.98;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-family: var(--ff-body);
	font-size: var(--fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	color: var(--c-accent);
	margin-bottom: var(--sp-4);
}
.eyebrow::before {
	content: '';
	width: 24px;
	height: 1px;
	background: currentColor;
}
.eyebrow--center { justify-content: center; }
.eyebrow--mute { color: var(--c-text-muted); }

.lede {
	font-size: var(--fs-xl);
	line-height: var(--lh-snug);
	color: var(--c-text-muted);
	font-weight: 400;
	max-width: 60ch;
	text-wrap: balance;
}

p { margin: 0 0 var(--sp-4); max-width: 70ch; }
p.lede { max-width: 60ch; }

strong, b { font-weight: 600; color: var(--c-text); }
em, i { font-style: italic; }

blockquote {
	margin: var(--sp-8) 0;
	padding: 0 0 0 var(--sp-6);
	border-left: 3px solid var(--c-accent);
	font-family: var(--ff-display);
	font-size: var(--fs-2xl);
	font-style: italic;
	line-height: var(--lh-snug);
	color: var(--c-text);
	text-wrap: balance;
}

small { font-size: var(--fs-sm); color: var(--c-text-muted); }

code, kbd, samp, pre {
	font-family: var(--ff-mono);
	font-size: 0.9em;
}

/* Prose container — for editor content and long-form pages */
.prose {
	max-width: var(--container-prose);
	font-size: var(--fs-lg);
	line-height: var(--lh-loose);
	color: var(--c-text);
}
.prose > * + * { margin-top: 1.4em; }
.prose h2 { font-size: var(--fs-3xl); margin-top: 1.6em; }
.prose h3 { font-size: var(--fs-2xl); margin-top: 1.4em; }
.prose p { max-width: none; }
.prose ul, .prose ol { padding-inline-start: 1.4em; }
.prose ul li::marker { color: var(--c-accent); }
.prose a {
	color: var(--c-text);
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 100% 1px;
	transition: color var(--dur-base) var(--ease-out), background-size var(--dur-base) var(--ease-out);
}
.prose a:hover {
	color: var(--c-accent);
	background-size: 100% 2px;
}
.prose img { border-radius: var(--r-md); margin: 1.6em 0; }

/* -------------------------------------------------------------------------
   5. LAYOUT — container, grid, section
   ------------------------------------------------------------------------- */

.container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding-inline: var(--gutter);
}
.container--wide   { max-width: var(--container-wide); }
.container--tight  { max-width: var(--container-tight); }
.container--prose  { max-width: var(--container-prose); }
.container--full   { max-width: none; }

.section {
	position: relative;
	padding-block: var(--section-y);
}
.section--sm  { padding-block: var(--section-y-sm); }
.section--top { padding-bottom: 0; }
.section--bottom { padding-top: 0; }
.section--flush { padding-block: 0; }

/* Collapse stacking padding when two adjacent sections share a background.
   Without this rule, two consecutive bg-bone sections produce ~280px of
   dead vertical space (each section's top + bottom padding stacking). */
.section.bg-bone + .section.bg-bone,
.section.bg-cream + .section.bg-cream,
.section.bg-paper + .section.bg-paper,
.section.theme-ink + .section.theme-ink {
	padding-top: 0;
}

/* Same idea for interludes butting up against same-coloured sections. */
.section.bg-bone + .interlude:not(.interlude--cream):not(.interlude--ink),
.interlude:not(.interlude--cream):not(.interlude--ink) + .section.bg-bone {
	padding-top: 0;
}
.section.bg-cream + .interlude.interlude--cream,
.interlude.interlude--cream + .section.bg-cream {
	padding-top: 0;
}

.section-header {
	max-width: 760px;
	margin: 0 0 var(--sp-12);
}
.section-header--center {
	margin-inline: auto;
	text-align: center;
}
.section-header__title {
	margin-bottom: var(--sp-5);
}
.section-header__lede {
	font-size: var(--fs-lg);
	color: var(--c-text-muted);
	max-width: 60ch;
	line-height: var(--lh-base);
}
.section-header--center .section-header__lede {
	margin-inline: auto;
}

/* Grid utilities */
.grid { display: grid; gap: var(--sp-6); }
.grid--2  { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3  { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4  { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid--6  { gap: var(--sp-6); }
.grid--8  { gap: var(--sp-8); }
.grid--10 { gap: var(--sp-10); }
.grid--12 { gap: var(--sp-12); }

@media (min-width: 768px) {
	.grid-md-2 { grid-template-columns: repeat(2, 1fr); }
	.grid-md-3 { grid-template-columns: repeat(3, 1fr); }
	.grid-md-4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
	.grid-lg-2 { grid-template-columns: repeat(2, 1fr); }
	.grid-lg-3 { grid-template-columns: repeat(3, 1fr); }
	.grid-lg-4 { grid-template-columns: repeat(4, 1fr); }
	.grid-lg-5 { grid-template-columns: repeat(5, 1fr); }
	.grid-lg-6 { grid-template-columns: repeat(6, 1fr); }
}

/* Two-column with sidebar */
.cols-2 {
	display: grid;
	gap: var(--sp-10);
}
@media (min-width: 900px) {
	.cols-2 { grid-template-columns: 1fr 1fr; align-items: start; }
	.cols-2--7-5 { grid-template-columns: 7fr 5fr; }
	.cols-2--5-7 { grid-template-columns: 5fr 7fr; }
	.cols-2--gap-lg { gap: clamp(40px, 6vw, 96px); }
}

/* Flex helpers */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); }
.gap-8 { gap: var(--sp-8); }

/* Utility spacing */
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mt-10 { margin-top: var(--sp-10); }
.mt-12 { margin-top: var(--sp-12); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-8 { margin-bottom: var(--sp-8); }
.mb-12 { margin-bottom: var(--sp-12); }

/* Text alignment */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }

/* Colour helpers */
.t-muted   { color: var(--c-text-muted); }
.t-accent  { color: var(--c-accent); }
.t-invert  { color: var(--c-bone); }
.bg-bone   { background: var(--c-bone); }
.bg-cream  { background: var(--c-bone-deep); }
.bg-ink    { background: var(--c-ink); color: var(--c-bone); }
.bg-paper  { background: var(--c-paper); }

/* -------------------------------------------------------------------------
   6. ANIMATIONS — keyframes and reveal classes
   ------------------------------------------------------------------------- */

@keyframes rise-in {
	from { opacity: 0; transform: translateY(28px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes scale-in {
	from { opacity: 0; transform: scale(.96); }
	to   { opacity: 1; transform: scale(1); }
}
@keyframes shimmer {
	0% { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}
@keyframes marquee-x {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Reveal-on-scroll — JS toggles .is-visible */
.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity var(--dur-slow) var(--ease-out),
		transform var(--dur-slow) var(--ease-out);
	will-change: opacity, transform;
}
.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.reveal-stagger > * {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity var(--dur-slow) var(--ease-out),
		transform var(--dur-slow) var(--ease-out);
}
.reveal-stagger.is-visible > * {
	opacity: 1;
	transform: translateY(0);
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 480ms; }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 560ms; }

@media (prefers-reduced-motion: reduce) {
	.reveal, .reveal-stagger > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   7. WORDPRESS CORE — alignment, captions, gallery, comments
   ------------------------------------------------------------------------- */

.alignleft  { float: left;  margin: 0 var(--sp-6) var(--sp-4) 0; }
.alignright { float: right; margin: 0 0 var(--sp-4) var(--sp-6); }
.aligncenter { display: block; margin-inline: auto; }
.alignwide   { max-width: var(--container); margin-inline: auto; }
.alignfull   { width: 100vw; margin-left: calc(50% - 50vw); }

.wp-caption,
.wp-block-image figcaption {
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
	margin-top: var(--sp-2);
}

.sticky { display: block; }
.bypostauthor { display: block; }