/* ==========================================================================
   Bloom & Borough — main.css  (token-driven)
   Cream + deep-green editorial. Antura Script + Classico (Adobe) + Aboreto.
   ========================================================================== */

/* Antura Script — self-hosted (Adobe doesn't carry it). Drop the licensed
   .woff2 into assets/fonts/antura-script.woff2 and it loads automatically. */
@font-face {
	font-family: "antura-script";
	src: url("../fonts/antura-script.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Brand — exact from live site */
	--bnb-cream: #edeae8;
	--bnb-green: #41503a;
	--bnb-green-70: rgba(65, 80, 58, 0.7);
	--bnb-green-40: rgba(65, 80, 58, 0.4);
	--bnb-line: rgba(65, 80, 58, 0.5);

	/* Fonts */
	--bnb-font-script: "antura-script", "Snell Roundhand", "Segoe Script", cursive;
	--bnb-font-display: "Aboreto", "Optima", serif;
	--bnb-font-body: "classico-urw", "Optima", "Palatino Linotype", "Palatino", sans-serif;

	/* Sticky-header background (measured) */
	--bnb-header-bg: hsla(26, 12%, 92%, 1);

	/* Type scale — exact values measured from the live site (no assumptions) */
	--bnb-fs-body: 1.26rem;        /* welcome / body copy — measured 19.68px, +~2.5% */
	--bnb-fs-eyebrow: clamp(0.75rem, 0.7rem + 0.3vw, 0.95rem);
	--bnb-fs-script: clamp(2.4rem, 1.6rem + 3.4vw, 4.6rem);
	--bnb-fs-nav: clamp(0.8rem, 0.72rem + 0.3vw, 1rem);
	--bnb-ls: 0.16em;

	/* Layout — measured/global (no assumptions) */
	--bnb-header-h: 84px;
	--bnb-max: 1200px;          /* header row width */
	--bnb-content: 1030px;      /* GLOBAL content max-width */
	--bnb-section-pad: 70px;    /* GLOBAL section top/bottom padding */
	--bnb-pad: clamp(1.25rem, 0.8rem + 2vw, 3rem);
}

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

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

body {
	margin: 0;
	background: var(--bnb-cream);
	color: var(--bnb-green);
	font-family: var(--bnb-font-body);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

.bnb-container { max-width: var(--bnb-content); margin: 0 auto; padding-inline: var(--bnb-pad); }

.bnb-skip {
	position: absolute; left: -9999px; top: 0;
	background: var(--bnb-green); color: var(--bnb-cream);
	padding: 0.6rem 1rem; z-index: 100000;
}
.bnb-skip:focus { left: 0; }

.bnb-script {
	font-family: var(--bnb-font-script);
	font-weight: 400;
	font-size: var(--bnb-fs-script);
	line-height: 1.05;
	margin: 0.2em 0;
}
.bnb-eyebrow {
	font-family: var(--bnb-font-display);
	text-transform: uppercase;
	letter-spacing: var(--bnb-ls);
	font-size: var(--bnb-fs-eyebrow);
	margin: 0 0 0.5em;
}

/* ---------- Header / nav (fixed) ---------------------------------------- */
.bnb-header {
	position: fixed; inset: 0 0 auto 0;
	z-index: 900;
	height: var(--bnb-header-h);
	display: flex; align-items: center;
	background: var(--bnb-header-bg);
}
.bnb-header__inner {
	position: relative;
	width: 100%; max-width: var(--bnb-max);
	margin: 0 auto; padding-inline: var(--bnb-pad);
	display: flex; align-items: center; justify-content: center;
}
.bnb-nav__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; gap: clamp(0.85rem, 0.35rem + 1.4vw, 1.9rem);   /* closer */
	flex-wrap: nowrap;
}
.bnb-nav__list a {
	font-family: var(--bnb-font-body);
	text-transform: uppercase;
	letter-spacing: 0.09em;                                        /* tighter */
	font-size: clamp(0.92rem, 0.82rem + 0.4vw, 1.12rem);           /* bigger */
	font-weight: 700;                                              /* bolder */
	white-space: nowrap;
	padding-block: 0.4rem;
	transition: opacity 0.2s;
}
.bnb-nav__list a:hover { opacity: 0.65; }

.bnb-rsvp {
	position: absolute; right: var(--bnb-pad); top: 50%;
	transform: translateY(-50%);
	background: var(--bnb-green); color: var(--bnb-cream);
	text-transform: uppercase; letter-spacing: var(--bnb-ls);
	font-size: var(--bnb-fs-nav);
	padding: 0.7rem 1.15rem; border-radius: 2px;
	transition: opacity 0.2s;
}
.bnb-rsvp:hover { opacity: 0.9; }

/* Burger (mobile) */
.bnb-burger {
	position: absolute; right: var(--bnb-pad); top: 50%;
	transform: translateY(-50%);
	display: none;
	width: 44px; height: 44px; padding: 0;
	border: 0; border-radius: 50%;
	background: var(--bnb-green); cursor: pointer;
	align-items: center; justify-content: center; flex-direction: column; gap: 4px;
}
.bnb-burger span { display: block; width: 18px; height: 1.8px; background: var(--bnb-cream); transition: transform 0.25s, opacity 0.2s; }
.bnb-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.8px) rotate(45deg); }
.bnb-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bnb-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.8px) rotate(-45deg); }

.bnb-drawer {
	position: fixed; inset: 0; z-index: 890;
	background: var(--bnb-cream);
	display: grid; place-items: center;
}
.bnb-drawer[hidden] { display: none; }
.bnb-drawer__nav { display: flex; flex-direction: column; gap: 1.4rem; text-align: center; }
.bnb-drawer__nav a {
	font-family: var(--bnb-font-body);
	text-transform: uppercase; letter-spacing: var(--bnb-ls);
	font-size: 1.4rem; color: var(--bnb-green);
}

/* ---------- Intro (video full-screen 5s → settles into hero) ------------ */
/* Hold everything except the full-screen video hidden until the reveal. */
.bnb-has-intro:not(.bnb-revealed) .bnb-header,
.bnb-has-intro:not(.bnb-revealed) .bnb-footer,
.bnb-has-intro:not(.bnb-revealed) .bnb-hero__titles,
.bnb-has-intro:not(.bnb-revealed) .bnb-welcome,
.bnb-has-intro:not(.bnb-revealed) .bnb-weekend { opacity: 0; visibility: hidden; }

.bnb-has-intro.bnb-revealed .bnb-header,
.bnb-has-intro.bnb-revealed .bnb-footer,
.bnb-has-intro.bnb-revealed .bnb-hero__titles,
.bnb-has-intro.bnb-revealed .bnb-welcome,
.bnb-has-intro.bnb-revealed .bnb-weekend {
	opacity: 1; visibility: visible;
	transition: opacity 1s ease;
}

/* First ~5s: the video fills the screen, CONTAINED so the whole animation fits
   any device (no cropping — the original mobile complaint). */
.bnb-intro-active .bnb-hero__video {
	position: fixed; inset: 0;
	width: 100vw; height: 100vh; height: 100dvh;
	object-fit: contain;
	background: var(--bnb-cream);
	z-index: 9999;
	pointer-events: none;
}

/* Whole site is locked / non-responsive during the intro — no scroll, no
   clicks — until the video settles (~5s) and the page reveals. */
.bnb-has-intro:not(.bnb-revealed) { overflow: hidden; }
.bnb-has-intro:not(.bnb-revealed) body {
	overflow: hidden; height: 100vh;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.bnb-has-intro.bnb-revealed .bnb-header,
	.bnb-has-intro.bnb-revealed .bnb-footer,
	.bnb-has-intro.bnb-revealed .bnb-hero__titles,
	.bnb-has-intro.bnb-revealed .bnb-welcome,
	.bnb-has-intro.bnb-revealed .bnb-weekend { transition: none; }
}

/* ---------- Hero -------------------------------------------------------- */
.bnb-hero { padding-top: calc(var(--bnb-header-h) + 1.5rem); text-align: center; }
.bnb-hero__titles { padding-inline: var(--bnb-pad); }
.bnb-hero__eyebrow {
	font-family: var(--bnb-font-display);
	text-transform: uppercase; letter-spacing: var(--bnb-ls);
	font-size: var(--bnb-fs-eyebrow); margin: 0 0 0.4em;
}
.bnb-hero__names { margin: 0.1em auto 0.2em; line-height: 1; }
.bnb-hero__names-img { width: min(401px, 78vw); height: auto; margin: 0 auto; display: block; }
.bnb-hero__placeholder {
	max-width: none; margin: 1rem auto 0; aspect-ratio: 16 / 9;
	border: 1px solid var(--bnb-line);
	display: grid; place-items: center; text-align: center;
	color: var(--bnb-green-70);
	font-family: var(--bnb-font-display); text-transform: uppercase;
	letter-spacing: var(--bnb-ls); font-size: var(--bnb-fs-eyebrow);
	padding: 1rem;
}
.bnb-hero__date {
	font-family: var(--bnb-font-body);
	letter-spacing: 0.12em; font-size: var(--bnb-fs-nav);
	margin: 0 0 0.6rem;
}
.bnb-hero__art { margin-top: clamp(0.5rem, 0.2rem + 1vw, 1.25rem); }
.bnb-hero__house { width: 100%; max-width: none; }   /* edge-to-edge hero art */
.bnb-hero__video { display: block; width: 100%; height: auto; }   /* settled hero (edge-to-edge) */

/* MOBILE: settled hero shows a portrait crop of the same video — the extra
   sides are cropped away and the townhouse stays centered. The full-screen
   intro keeps object-fit: contain (that rule is more specific), so the key
   animation still fits the screen. */
@media (max-width: 767px) {
	.bnb-hero__video {
		aspect-ratio: 3 / 4;
		height: auto;
		object-fit: cover;
		object-position: center;
	}
}

/* ---------- Welcome panel ---------------------------------------------- */
/* Extra top space so the crest (which overflows above the panel) clears the
   edge-to-edge hero above, instead of overlapping the video. */
.bnb-welcome { padding: 130px 0 clamp(2.5rem, 1.5rem + 4vw, 5rem); text-align: center; }
.bnb-panel {
	position: relative;
	max-width: var(--bnb-content); margin: 0 auto;      /* 1010px — global content width */
	padding: 72px clamp(2rem, 1rem + 4vw, 5rem) 70px;   /* ~70px top/bottom (top clears the crest) */
}
.bnb-frame {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	pointer-events: none; overflow: visible;
}
.bnb-frame__path {
	fill: none;
	stroke: var(--bnb-green);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}
/* Crest sits centered on the top rule — the border passes through its middle. */
.bnb-panel__crest {
	position: absolute; z-index: 2;
	top: 0; left: 50%;
	transform: translate(-50%, -54%);
	width: clamp(112px, 12vw, 132px);
	color: var(--bnb-green);
}
.bnb-panel__crest svg, .bnb-panel__crest img { width: 100%; height: auto; display: block; }
.bnb-panel__inner { position: relative; z-index: 1; }

/* Welcome panel type — exact values measured from the live site. */
.bnb-welcome .bnb-eyebrow { font-size: 24.52px; letter-spacing: 0.6px; line-height: 39.232px; margin-top: 40px; }
.bnb-welcome .bnb-script { font-size: 27.4px; letter-spacing: normal; line-height: 55.2384px; }
.bnb-panel .bnb-script { color: var(--bnb-green); }
.bnb-welcome__body p,
.bnb-page__body p { margin: 0.6em 0; font-size: var(--bnb-fs-body); }

/* ---------- The Weekend + events --------------------------------------- */
.bnb-weekend { padding-block: clamp(3rem, 2rem + 4vw, 6.5rem); text-align: center; }
.bnb-weekend__head { margin-bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.bnb-weekend__title { font-size: 2.1rem; margin: 0 0 0.6rem; }
.bnb-weekend__sub {
	font-family: var(--bnb-font-display);
	text-transform: uppercase; letter-spacing: var(--bnb-ls);
	font-size: var(--bnb-fs-eyebrow); line-height: 2;
}
.bnb-event {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 0.5rem + 4vw, 4rem);
	align-items: center;
	margin-bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}
.bnb-event__art { display: flex; justify-content: center; }
.bnb-event__art img { width: 100%; max-width: 420px; height: auto; }
.bnb-event__info { text-align: left; }
.bnb-event__name { font-size: 1.8rem; font-weight: 600; margin: 0 0 1rem; }
.bnb-event__when, .bnb-event__where {
	font-family: var(--bnb-font-body);
	text-transform: uppercase; letter-spacing: 0.09em;
	font-size: 1.2rem; line-height: 1.75; margin: 0.6rem 0;
}
.bnb-event__desc {
	grid-column: 1 / -1;
	max-width: 760px; margin: clamp(1rem, 0.5rem + 2vw, 2.5rem) auto 0;
	font-size: var(--bnb-fs-body); line-height: 1.6;
}
@media (max-width: 720px) {
	.bnb-event { grid-template-columns: 1fr; }
	.bnb-event__info { text-align: center; }
}

/* ---------- Footer (green band + framed panel) ------------------------- */
.bnb-footer {
	background: var(--bnb-green); color: var(--bnb-cream);
	padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(2rem, 1rem + 3vw, 3.5rem);
	text-align: center;
}
.bnb-panel--footer { background: var(--bnb-cream); color: var(--bnb-green); }
/* Footer uses bnb_frame_wide() — the live site's exact 1200x293 frame, whose
   corner notches are drawn for this wide ratio (no distortion). */
.bnb-footer__eyebrow {
	font-family: var(--bnb-font-display);
	text-transform: uppercase; letter-spacing: var(--bnb-ls);
	font-size: var(--bnb-fs-eyebrow); margin: 0 0 1.1rem;
}
.bnb-footer__flourish { width: clamp(90px, 12vw, 150px); margin: 0 auto 1.1rem; }
.bnb-footer__note { margin: 0 0 0.35rem; }
.bnb-footer__email a { text-decoration: underline; text-underline-offset: 3px; }
.bnb-footer__credit { margin-top: clamp(1.75rem, 1rem + 2vw, 2.75rem); }
.bnb-footer__credit p { margin: 0.25rem 0; font-size: 0.85rem; letter-spacing: 0.04em; }
.bnb-footer__credit a { text-decoration: underline; text-underline-offset: 2px; }

/* Generic inner page (fallback) */
.bnb-page { padding-block: clamp(3rem, var(--bnb-header-h) + 1rem, 8rem) 3rem; padding-top: calc(var(--bnb-header-h) + 3rem); text-align: center; }

/* ---------- Responsive -------------------------------------------------- */
@media (max-width: 860px) {
	.bnb-nav, .bnb-rsvp { display: none; }
	.bnb-burger { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
	.bnb-intro, .bnb-has-intro .bnb-main,
	.bnb-has-intro .bnb-header, .bnb-has-intro .bnb-footer { transition: none !important; }
}