/* ==========================================================================
   The Foskey Wedding — base: tokens, palettes, typography, layout (part 1)
   ========================================================================== */

:root {
	/* Classic Noir (default palette) */
	--fw-paper: #141518;
	--fw-surface: #1b1c20;
	--fw-surface-2: #212226;
	--fw-ink: #d6d6d3;
	--fw-ink-strong: #f2f2ef;
	--fw-muted: #9b9b98;
	--fw-line: rgba( 255, 255, 255, 0.13 );
	--fw-accent: #c6c6c3;

	/* Typography */
	--font-display: 'IM Fell English SC', 'Playfair Display', Georgia, 'Times New Roman', serif;
	--font-body: 'EB Garamond', Georgia, 'Times New Roman', serif;
	--font-script: 'Great Vibes', 'Segoe Script', cursive;
	--font-size-base: 1.125rem;

	/* Rhythm */
	--fw-header-h: 4.5rem;
	--fw-max: 72rem;
	--ease: cubic-bezier( 0.22, 1, 0.36, 1 );
}

/* Midnight — deepest black */
body.fw-palette-midnight {
	--fw-paper: #0c0d0f;
	--fw-surface: #121317;
	--fw-surface-2: #191a1f;
	--fw-ink: #cdcdcd;
	--fw-ink-strong: #ededea;
	--fw-muted: #8f8f8c;
}

/* Graphite — light paper, dark ink */
body.fw-palette-graphite {
	--fw-paper: #f4f4f2;
	--fw-surface: #ffffff;
	--fw-surface-2: #ebebe9;
	--fw-ink: #29292d;
	--fw-ink-strong: #101013;
	--fw-muted: #6f6f73;
	--fw-line: rgba( 0, 0, 0, 0.15 );
	--fw-accent: #3d3d42;
}

/* Font pairs (Customizer preset -> body class) */
body.fw-font-fell     { --font-display: 'IM Fell English SC', 'Playfair Display', Georgia, serif; }
body.fw-font-pica     { --font-display: 'IM Fell DW Pica', 'Playfair Display', Georgia, serif; --font-body: 'Cormorant Garamond', Georgia, serif; --font-size-base: 1.1875rem; }
body.fw-font-playfair { --font-display: 'Playfair Display', Georgia, serif; }

/* --------------------------------------------------------------------------
   Reset & primitives
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body.fw-body {
	margin: 0;
	background: var(--fw-paper);
	color: var(--fw-ink);
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

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

a { color: var(--fw-accent); text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color 0.25s var(--ease), color 0.25s var(--ease); }
a:hover, a:focus-visible { text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--fw-accent); outline-offset: 3px; }

.fw-skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--fw-surface-2); color: var(--fw-ink-strong); padding: 0.6rem 1.2rem; }
.fw-skip:focus { left: 0.5rem; top: 0.5rem; }

.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;
}

/* --------------------------------------------------------------------------
   Header / navigation
   -------------------------------------------------------------------------- */

.fw-header {
	position: fixed; inset: 0 0 auto 0; z-index: 100;
	height: var(--fw-header-h);
	display: flex; align-items: center;
	border-bottom: 1px solid transparent;
	transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.fw-header.is-scrolled {
	background: var(--fw-paper);
	border-bottom-color: var(--fw-line);
}
.fw-header-inner {
	width: 100%; max-width: var(--fw-max); margin: 0 auto;
	padding: 0 1.5rem;
	display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}

.fw-brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--fw-ink-strong); }
.fw-brand-monogram, .fw-footer-monogram {
	font-family: var(--font-script);
	font-size: 1.9rem; line-height: 1;
	color: var(--fw-accent);
}
.fw-brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.fw-brand-names { font-family: var(--font-display); font-size: 1.02rem; letter-spacing: 0.06em; }
.fw-brand-date { font-size: 0.72rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--fw-muted); }
.fw-brand img { height: 40px; width: auto; }

.fw-nav { display: flex; align-items: center; }
.fw-menu { display: flex; gap: 1.6rem; margin: 0; padding: 0; list-style: none; }
.fw-menu a {
	color: var(--fw-ink); text-decoration: none;
	font-size: 0.7rem; letter-spacing: 0.26em; text-transform: uppercase;
	padding: 0.4rem 0; border-bottom: 1px solid transparent;
	transition: color 0.25s, border-color 0.25s;
}
.fw-menu a:hover, .fw-menu a:focus-visible { color: var(--fw-ink-strong); border-bottom-color: var(--fw-accent); }

.fw-nav-toggle { display: none; background: none; border: 1px solid var(--fw-line); padding: 0.65rem 0.7rem; cursor: pointer; }
.fw-nav-toggle-bar { display: block; width: 1.35rem; height: 1px; background: var(--fw-ink-strong); margin: 5px 0; transition: transform 0.3s var(--ease); }
.fw-nav-toggle.is-open .fw-nav-toggle-bar:first-child { transform: translateY(3px) rotate(45deg); }
.fw-nav-toggle.is-open .fw-nav-toggle-bar:last-child  { transform: translateY(-3px) rotate(-45deg); }

.fw-main { min-height: 60vh; }

/* --------------------------------------------------------------------------
   Typography shared
   -------------------------------------------------------------------------- */

.fw-kicker {
	font-size: 0.72rem; letter-spacing: 0.34em; text-transform: uppercase;
	color: var(--fw-muted); margin: 0 0 0.9rem;
}

.fw-heading {
	font-family: var(--font-display);
	font-weight: 400; line-height: 1.15;
	color: var(--fw-ink-strong);
	margin: 0 0 1.4rem;
	letter-spacing: 0.02em;
}
h2.fw-heading { font-size: clamp( 1.9rem, 3.6vw, 2.9rem ); }

.fw-prose { max-width: 46rem; margin: 0 auto; }
.fw-prose p { margin: 0 0 1.1rem; }
.fw-prose a { text-decoration: underline; }

.fw-link {
	display: inline-block; color: var(--fw-accent);
	font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase;
	text-decoration: underline; text-underline-offset: 4px;
}

.fw-label { display: inline-block; font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--fw-muted); margin-right: 0.6rem; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.fw-btn {
	display: inline-block; cursor: pointer;
	font-family: var(--font-body);
	font-size: 0.74rem; letter-spacing: 0.3em; text-transform: uppercase;
	color: var(--fw-ink-strong);
	background: transparent;
	border: 1px solid var(--fw-accent);
	padding: 0.95rem 2.2rem;
	text-decoration: none;
	transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.fw-btn:hover, .fw-btn:focus-visible { background: var(--fw-accent); color: #101013; }
body.fw-palette-graphite .fw-btn:hover, body.fw-palette-graphite .fw-btn:focus-visible { color: #f4f4f2; }
.fw-btn-ghost { border-color: var(--fw-line); color: var(--fw-ink); }
.fw-btn[disabled] { opacity: 0.55; cursor: wait; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.fw-footer {
	border-top: 1px solid var(--fw-line);
	background: var(--fw-surface);
	padding: 4.5rem 0 3rem;
	text-align: center;
	color: var(--fw-muted);
}
.fw-footer-monogram { font-size: 3rem; margin: 0 0 1rem; }
.fw-footer-hashtag { font-family: var(--font-display); font-size: 1.15rem; color: var(--fw-ink-strong); letter-spacing: 0.08em; margin: 0 0 0.8rem; }
.fw-footer-contact, .fw-footer-note, .fw-footer-copyright { font-size: 0.85rem; margin: 0 0 0.5rem; }
.fw-footer-copyright { letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.72rem; }

/* --------------------------------------------------------------------------
   Page fallback (page.php / index.php)
   -------------------------------------------------------------------------- */

.fw-page, .fw-prose-wrap { max-width: var(--fw-max); margin: 0 auto; padding: calc( var(--fw-header-h) + 4rem ) 1.5rem 4rem; }
.fw-page-head { text-align: center; margin-bottom: 2rem; }

/* --------------------------------------------------------------------------
   Reveal-on-scroll (progressive enhancement)
   -------------------------------------------------------------------------- */

.fw-reveal { opacity: 0; transform: translateY( 18px ); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.fw-reveal.is-visible { opacity: 1; transform: none; }
@media ( prefers-reduced-motion: reduce ) {
	html { scroll-behavior: auto; }
	.fw-reveal { opacity: 1; transform: none; transition: none; }
}