/*
 * Kasal — JR + RS
 * Modern Filipino: piña-sheer layers, calado fine-line embroidery, beige.
 * Mobile-first. Tweak the palette in :root.
 */

/* ---------------------------------------------------------------- Fonts */
@font-face {
	font-family: "Gellatio";
	src: url("../fonts/gellatio-regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
/*
 * When you get the Swash cut, drop it in assets/fonts/ and uncomment.
 * --k-font-names already prefers it.
 *
 * @font-face {
 *	font-family: "Gellatio Swash";
 *	src: url("../fonts/gellatio-swash.ttf") format("truetype");
 *	font-display: swap;
 * }
 */

/* --------------------------------------------------------------- Tokens */
:root {
	/* Palette (from the "Gayak at Kulay" swatches) */
	--k-paper: #fbf5ee;        /* ivory / piña */
	--k-beige: #f6e8dc;        /* Light Beige */
	--k-sand: #ccae8e;         /* Sand */
	--k-desert: #ac9d8e;       /* Desert Beige */
	--k-ink: #422f0a;          /* Golden Brown — body text */
	--k-ink-soft: #6e5c48;
	--k-gold: #a8895a;         /* muted gold — ornaments only, sparingly */
	--k-line: rgba(66, 47, 10, 0.16);
	--k-sheer: rgba(251, 245, 238, 0.74);
	--k-error: #660c00;        /* Burgundy */
	--k-ok: #555939;           /* Army Green */

	/* Type */
	--k-font-names: "Gellatio Swash", "Gellatio", cursive;
	--k-font-script: "Gellatio", cursive;
	--k-font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* Space */
	--k-gutter: 1.25rem;
	--k-measure: 34rem;
	--k-radius: 2px;
}

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

body.kasal {
	margin: 0;
	color: var(--k-ink);
	font: 400 1.125rem/1.65 var(--k-font-body);
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	background-color: var(--k-paper);
	/*
	 * Plain paper. (The old piña weave was two hairline grids — to bring it back:
	 * background-image: repeating-linear-gradient(0deg, rgba(66,47,10,.028) 0 1px, transparent 1px 3px),
	 *                   repeating-linear-gradient(90deg, rgba(66,47,10,.022) 0 1px, transparent 1px 4px);)
	 */
}

.k-main {
	overflow-x: clip;
}

.kasal img {
	max-width: 100%;
	height: auto;
}

.kasal a {
	color: inherit;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

.kasal p {
	margin: 0 0 1em;
}

.kasal :focus-visible {
	outline: 2px solid var(--k-ink);
	outline-offset: 3px;
}

/* --------------------------------------------------------------- Type */
.k-names {
	margin: 0.3em 0 0.1em;
	/* Gellatio's capitals are very wide: ~5.8em for "JR + RS" */
	font: 400 clamp(2.75rem, 13vw, 7rem)/1.15 var(--k-font-names);
	letter-spacing: 0.01em;
	white-space: nowrap; /* "JR + RS" must never break */
}

.k-h {
	margin: 0 0 1.25rem;
	font: 400 clamp(2.75rem, 11vw, 3.75rem)/1.25 var(--k-font-script);
	transform: rotate(-1.5deg);
	transform-origin: left center;
}

.k-h3 {
	margin: 2rem 0 0.75rem;
	font: 700 0.9rem/1.4 var(--k-font-body);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--k-ink-soft);
}

.k-sub,
.k-hero__label {
	margin: 0 0 1.5rem;
	font-size: 1.3rem;
	letter-spacing: 0.04em;
}

.k-date {
	margin: 0.25rem 0;
	font-weight: 700;
	letter-spacing: 0.18em;
}

.k-small {
	font-size: 1rem;
	color: var(--k-ink-soft);
}

.k-prose > :last-child {
	margin-bottom: 0;
}

.k-prose h4 {
	margin: 1.5rem 0 0.25rem;
	font-size: 1.1rem;
}

.k-prose ul {
	margin: 0 0 1em;
	padding-left: 1.1rem;
}

.k-prose li {
	margin-bottom: 0.45em;
}

.k-prose li::marker {
	color: var(--k-gold);
}

/*
 * Photos added with "Add Media" in your texts (Our Story, word stories…).
 * The theme's styles are switched off on these pages, so the usual
 * WordPress image classes are styled here: a printed photo with a white
 * border and a slight tilt, like the gallery.
 */
.k-prose img {
	max-width: 100%;
	height: auto;
	padding: 6px 6px 8px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(66, 47, 10, 0.12), 0 8px 18px -10px rgba(66, 47, 10, 0.35);
	transform: rotate(-1.2deg);
}

.k-prose .wp-caption {
	max-width: 100%;
	margin: 0.5rem 0 1.25rem;
}

.k-prose .wp-caption img {
	display: block;
}

.k-prose .wp-caption-text {
	margin: 0.6rem 0 0 !important;
	font-size: 0.95rem;
	color: var(--k-ink-soft);
}

.k-prose .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Side-by-side with the text on wider screens; stacked on phones. */
@media (min-width: 600px) {
	.k-prose .alignleft {
		float: left;
		margin: 0.3rem 1.5rem 1rem 0;
	}

	.k-prose .alignright {
		float: right;
		margin: 0.3rem 0 1rem 1.5rem;
		transform: rotate(1.2deg);
	}

	.k-prose::after {
		content: "";
		display: table;
		clear: both;
	}
}

/* Unfilled [PLACEHOLDER] — impossible to miss before launch */
.k-todo {
	background: #fff1b8;
	color: #5a4200;
	outline: 1px dashed #b38b00;
	padding: 0 0.2em;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 0.85em;
}

/* --------------------------------------------------- Ornaments (calado) */
.k-orn {
	display: block;
	color: var(--k-gold);
}

.k-orn--divider {
	width: 11rem;
	height: auto;
	margin: 0 auto;
	opacity: 0.8;
}

.k-orn--corner {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 2.75rem;
	height: 2.75rem;
	transform: scaleX(-1);
	opacity: 0.7;
}

.k-divider {
	padding: 0.5rem var(--k-gutter);
}

/*
 * Barong front panel: a thin column of embroidered openwork beside the
 * content. Drawn with a CSS mask so the colour follows --k-gold.
 */
.k-panel {
	position: relative;
	padding-left: calc(var(--k-gutter) + 1.5rem);
}

.k-panel::before {
	content: "";
	position: absolute;
	top: 0.5rem;
	bottom: 0.5rem;
	left: var(--k-gutter);
	width: 14px;
	background: var(--k-gold);
	opacity: 0.5;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 44'%3E%3Cg fill='none' stroke='%23000' stroke-width='.7'%3E%3Cpath d='M7 0v2.6M7 5.4V11M7 33v5.6M7 41.4V44'/%3E%3Cpath d='M7 11l5 11-5 11-5-11z'/%3E%3Cpath d='M7 16.5l2.2 5.5L7 27.5 4.8 22z'/%3E%3Ccircle cx='7' cy='4' r='1.4'/%3E%3Ccircle cx='7' cy='40' r='1.4'/%3E%3C/g%3E%3C/svg%3E") center top / 14px 44px repeat-y;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 44'%3E%3Cg fill='none' stroke='%23000' stroke-width='.7'%3E%3Cpath d='M7 0v2.6M7 5.4V11M7 33v5.6M7 41.4V44'/%3E%3Cpath d='M7 11l5 11-5 11-5-11z'/%3E%3Cpath d='M7 16.5l2.2 5.5L7 27.5 4.8 22z'/%3E%3Ccircle cx='7' cy='4' r='1.4'/%3E%3Ccircle cx='7' cy='40' r='1.4'/%3E%3C/g%3E%3C/svg%3E") center top / 14px 44px repeat-y;
}

/* Sheer piña layer */
.k-sheer {
	background: var(--k-sheer);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	border: 1px solid var(--k-line);
}

/* ------------------------------------------------- Brush-letter backdrop */
/* Echoes the save-the-date cover: huge cropped J R / R S strokes. */
.k-brush {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	font: 400 clamp(16rem, 78vw, 34rem)/1 var(--k-font-script);
	color: var(--k-sand);
	opacity: 0.32;
}

.k-brush span {
	position: absolute;
}

/*
 * --r = resting tilt, --k = depth for the invitation's scroll parallax
 * (--sy = pixels scrolled, a plain number set by kasal.js on the invitation
 * page only; 0 everywhere else).
 */
.k-brush span {
	transform: translate3d(0, calc(var(--sy, 0) * var(--k, 0) * 1px), 0) rotate(calc(var(--r, 0deg) + var(--sy, 0) * var(--k, 0) * 0.02deg));
}

.k-brush span:nth-child(1) { top: -0.28em; left: -0.12em; --r: -6deg; --k: 0.2; }
.k-brush span:nth-child(2) { top: -0.22em; right: -0.08em; --r: 4deg; --k: 0.12; }
.k-brush span:nth-child(3) { bottom: -0.38em; left: -0.02em; --r: 3deg; --k: -0.1; }
.k-brush span:nth-child(4) { bottom: -0.32em; right: -0.1em; --r: -8deg; --k: -0.16; }

/* ------------------------------------------------------------- Layout */
.k-section {
	position: relative;
	max-width: calc(var(--k-measure) + 2 * var(--k-gutter));
	margin: 0 auto;
	padding: 3.5rem var(--k-gutter);
}

.k-section.k-panel {
	padding-left: calc(var(--k-gutter) + 1.75rem);
}

.k-topbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	max-width: 60rem;
	margin: 0 auto;
	padding: 0.85rem var(--k-gutter);
	font-size: 0.95rem;
	color: var(--k-ink-soft);
	position: relative;
	z-index: 2;
}

/* "Hi, Honey Mae!" — the first thing a guest should notice */
.kasal .k-hello {
	margin: 0;
	padding-bottom: 0.3rem;
	border-bottom: 1px solid var(--k-gold);
	font-size: clamp(1.3rem, 5.5vw, 1.75rem);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0.01em;
	color: var(--k-ink);
}

/* Top-bar links ("Not you?", back link): easy to tap, still smaller than the name */
.k-topbar .k-link {
	font-size: clamp(1rem, 3.8vw, 1.15rem);
	color: var(--k-ink);
	padding: 0.5rem 0; /* ~44px tap target */
}

.k-link {
	appearance: none;
	background: none;
	border: 0;
	padding: 0.25rem 0;
	font: inherit;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

/* --------------------------------------------------------------- Hero */
.k-hero,
.k-gate {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* never wider than the phone */
	place-items: center;
	min-height: min(88svh, 52rem);
	padding: 4rem var(--k-gutter);
	text-align: center;
	margin-top: -3rem; /* sit under the top bar */
}

.k-gate {
	min-height: min(100svh, 56rem);
	margin-top: 0;
}

.k-hero__inner {
	position: relative;
}

.k-countdown {
	margin-top: 1.75rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
}

.k-countdown span {
	font-size: 1.75rem;
}

.k-countdown small {
	margin-right: 0.6rem;
	font-size: 0.95rem;
	color: var(--k-ink-soft);
}

/* "You already answered" summary under the countdown */
/* "Answer RSVP" button under the countdown */
.k-hero__cta {
	margin-top: 2rem;
}

.k-hero__cta .k-small {
	margin-top: 0.75rem;
}

.k-answered {
	width: 100%;
	max-width: 24rem;
	margin: 2.25rem auto 0;
	padding: 1.5rem 1.25rem 1.25rem;
	border-top: 1px solid var(--k-line);
	border-bottom: 1px solid var(--k-line);
	background: var(--k-sheer);
}

.k-answered__title {
	margin: 0 0 1rem;
	font: 700 0.9rem/1.4 var(--k-font-body);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--k-ink-soft);
}

.k-answered__list {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.k-answered__list li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.15rem 1rem;
	padding: 0.5rem 0;
	border-bottom: 1px dashed var(--k-line);
	text-align: left;
}

.k-answered__status {
	font-size: 1rem;
	color: var(--k-ink-soft);
}

.k-answered__status.is-yes {
	color: var(--k-ok);
	font-weight: 700;
}

.k-answered__diet {
	flex-basis: 100%;
	font-size: 0.95rem;
	color: var(--k-ink-soft);
}

.k-answered__meta {
	margin: 0 0 0.5rem;
	font-size: 1rem;
}

.k-answered__msg {
	font-style: italic;
	color: var(--k-ink-soft);
	overflow-wrap: anywhere;
}

.k-answered .k-btn {
	margin-top: 0.75rem;
}

/* "Find my table" + "Change RSVP details" side by side; stacked on narrow phones */
.k-answered__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	margin-top: 0.75rem;
}

.k-answered__actions .k-btn {
	flex: 1 1 11rem;
	margin-top: 0;
	padding-left: 1rem;
	padding-right: 1rem;
}

/* Room for the two buttons side by side on tablets and computers */
@media (min-width: 640px) {
	.k-answered {
		max-width: 30rem;
	}
}

.k-answered .k-small {
	margin: 0.75rem 0 0;
}

/* Code-word card */
.k-gate__card {
	position: relative;
	width: 100%;
	max-width: 27rem;
	padding: 3rem 2rem 2.25rem;
	container-type: inline-size; /* lets the names size themselves to the card */
	box-shadow: 0 1px 2px rgba(66, 47, 10, 0.06), 0 18px 40px -18px rgba(66, 47, 10, 0.28);
}

/* Barong panel: a short calado strip down the left edge */
.k-gate__card::before {
	content: "";
	position: absolute;
	top: 1.25rem;
	bottom: 1.25rem;
	left: 0.7rem;
	width: 14px;
	background: var(--k-gold);
	opacity: 0.4;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 44'%3E%3Cg fill='none' stroke='%23000' stroke-width='.7'%3E%3Cpath d='M7 0v2.6M7 5.4V11M7 33v5.6M7 41.4V44'/%3E%3Cpath d='M7 11l5 11-5 11-5-11z'/%3E%3Cpath d='M7 16.5l2.2 5.5L7 27.5 4.8 22z'/%3E%3Ccircle cx='7' cy='4' r='1.4'/%3E%3Ccircle cx='7' cy='40' r='1.4'/%3E%3C/g%3E%3C/svg%3E") center top / 14px 44px repeat-y;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 44'%3E%3Cg fill='none' stroke='%23000' stroke-width='.7'%3E%3Cpath d='M7 0v2.6M7 5.4V11M7 33v5.6M7 41.4V44'/%3E%3Cpath d='M7 11l5 11-5 11-5-11z'/%3E%3Cpath d='M7 16.5l2.2 5.5L7 27.5 4.8 22z'/%3E%3Ccircle cx='7' cy='4' r='1.4'/%3E%3Ccircle cx='7' cy='40' r='1.4'/%3E%3C/g%3E%3C/svg%3E") center top / 14px 44px repeat-y;
}

/* "JR + RS" is ~5.8em wide in Gellatio: 14% of the card keeps it inside with room to breathe */
.k-gate__card .k-names {
	margin: 0;
	font-size: clamp(2.5rem, 10vw, 3.5rem);
	font-size: clamp(2.5rem, 14cqi, 4.25rem);
	line-height: 1.3;
}

.k-gate__label {
	margin: 0.25rem 0 0.2rem !important;
	font-size: 1.1rem;
	letter-spacing: 0.04em;
}

.k-gate__card .k-date {
	margin: 0;
	font-size: 0.95rem;
}

.k-gate__divider {
	margin: 1.5rem 0 0;
}

.k-gate__divider .k-orn--divider {
	width: 9rem;
}

.k-gate__intro {
	margin: 1.25rem 0 1.5rem;
	font-size: 1.05rem;
}

/* ----------------------------------------------------------- Schedule */
.k-schedule {
	display: grid;
	gap: 3.5rem;
	padding-left: 0;
	padding-right: 0;
}

.k-event {
	position: relative;
}

.k-event__sketch {
	display: block;
	width: 112%;
	max-width: none;
	margin-left: -6%;
	mix-blend-mode: multiply; /* white paper disappears into the piña */
	opacity: 0.6; /* lines were darkened + warmed once in the WebP itself */
}

.k-event__body {
	position: relative;
	width: calc(100% - 2 * var(--k-gutter));
	margin: -4.5rem auto 0 var(--k-gutter);
	padding: 1.75rem 1.5rem 1.5rem;
	background: var(--k-sheer);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	border: 1px solid var(--k-line);
	transform: rotate(-0.4deg);
}

.k-event--alt .k-event__body {
	margin: -4.5rem var(--k-gutter) 0 auto;
	transform: rotate(0.5deg);
}

.k-event .k-h {
	margin-bottom: 0.5rem;
}

.k-event__time {
	font-weight: 700;
	letter-spacing: 0.12em;
	margin-bottom: 0.75rem !important;
}

.k-event__venue {
	margin-bottom: 0.15rem !important;
	font-size: 1.3rem;
}

.k-event__addr,
.k-event__note {
	color: var(--k-ink-soft);
	font-size: 1.05rem;
	margin-bottom: 0.25rem !important;
}

.k-event .k-btn {
	margin-top: 1rem;
	margin-right: 0.5rem;
}

/* ------------------------------------------------- Popup (church guidelines) */
.k-noscroll {
	overflow: hidden;
}

.k-modal {
	width: min(36rem, calc(100vw - 2rem));
	max-height: calc(100svh - 2rem);
	padding: 0;
	border: 1px solid var(--k-line);
	background: var(--k-paper);
	color: var(--k-ink);
	box-shadow: 0 24px 60px -20px rgba(66, 47, 10, 0.45);
	overflow: auto;
}

.k-modal::backdrop {
	background: rgba(42, 30, 8, 0.55);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.k-modal[open] {
	animation: k-pop 0.18s ease-out;
}

@keyframes k-pop {
	from { opacity: 0; transform: translateY(8px); }
}

.k-modal__inner {
	position: relative;
	padding-top: 2.25rem;
	padding-right: 1.5rem;
	padding-bottom: 1.5rem;
}

.k-modal__inner .k-h {
	padding-right: 2rem;
}

.k-modal__inner .k-orn--corner {
	display: none; /* the × close button sits there */
}

.k-modal__foot {
	margin-top: 1.5rem;
	text-align: right;
}

.k-modal__x {
	position: absolute;
	top: 0.4rem;
	right: 0.5rem;
	width: 44px;
	height: 44px;
	border: 0;
	background: none;
	color: var(--k-ink-soft);
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
}

.k-modal__x:hover {
	color: var(--k-ink);
}

@media (prefers-reduced-motion: reduce) {
	.k-modal[open] {
		animation: none;
	}
}

/* ---------------------------------------------------------- Dress code */
.k-swatches {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
	gap: 1.25rem 1rem;
}

.k-swatch {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: 1rem;
}

.k-swatch__chips {
	display: flex;
}

.k-swatch__chip {
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	background: var(--c);
	border: 1px solid var(--k-line);
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.18);
}

.k-swatch__chip + .k-swatch__chip {
	margin-left: -0.9rem;
}

.k-swatch__note {
	color: var(--k-ink-soft);
	font-size: 0.9rem;
	line-height: 1.4;
}

.k-palette .k-swatches {
	margin-bottom: 0.5rem;
}

/* ----------------------------------------------------------- Entourage */
.k-entourage {
	text-align: center;
}

.k-entourage .k-h {
	transform: rotate(-1deg);
	transform-origin: center;
}

.k-ent {
	margin-bottom: 2.25rem;
}

.k-ent p {
	margin: 0 0 0.2rem;
	font-size: 1.1rem;
}

.k-ent .k-h3 {
	margin: 0 0 0.5rem;
}

.k-ent__sub {
	font-size: 0.9rem !important;
	color: var(--k-ink-soft);
	margin-top: -0.35rem !important;
	margin-bottom: 0.6rem !important;
}

.k-ent--pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem clamp(1.75rem, 9vw, 7rem); /* space between the two columns */
}

.k-ent__rows {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.15rem clamp(1.75rem, 9vw, 7rem);
}

/*
 * Only one name (e.g. Ring Bearer), or an odd number (e.g. 3 Flowermen):
 * the last name spans both columns, centred under the others.
 */
.k-ent__rows p:last-child:nth-child(odd) {
	grid-column: 1 / -1;
	justify-self: center;
}

/* ------------------------------------------------------------ Gallery */
.k-gallery {
	columns: 2 10rem;
	column-gap: 1rem;
}

.k-photo {
	break-inside: avoid;
	margin: 0 0 1rem;
	padding: 0.5rem 0.5rem 0.75rem;
	background: #fff;
	box-shadow: 0 1px 2px rgba(66, 47, 10, 0.12);
}

.k-photo--0 { transform: rotate(-1deg); }
.k-photo--1 { transform: rotate(0.8deg); }
.k-photo--2 { transform: rotate(-0.3deg); }

.k-photo figcaption {
	padding-top: 0.4rem;
	font-size: 0.9rem;
	color: var(--k-ink-soft);
}

/* --------------------------------------------------------------- CTA */
.k-cta {
	text-align: center;
	padding-top: 2rem;
}

.k-foot {
	display: flex;
	justify-content: center;
	gap: 1.25rem;
	padding: 2rem var(--k-gutter) 3rem;
	font-size: 0.9rem;
	letter-spacing: 0.14em;
	color: var(--k-ink-soft);
}

/* Site-wide footer (every page) */
.k-sitefoot {
	padding: 1.5rem var(--k-gutter) calc(2rem + env(safe-area-inset-bottom));
	text-align: center;
	font-size: 0.9rem;
	color: var(--k-ink-soft);
}

/* Privacy page */
.k-privacy .k-prose h3 {
	margin: 2rem 0 0.5rem;
	font: 700 0.9rem/1.4 var(--k-font-body);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--k-ink-soft);
}

/* ------------------------------------------------------- Forms & buttons */
.k-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.8rem 1.6rem;
	border: 1px solid var(--k-ink);
	border-radius: var(--k-radius);
	background: var(--k-ink);
	color: var(--k-paper) !important;
	font: 700 0.9rem/1 var(--k-font-body);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

.k-btn:hover {
	background: #2d2007;
}

.k-btn--ghost {
	background: transparent;
	color: var(--k-ink) !important;
}

.k-btn--ghost:hover {
	background: var(--k-beige);
}

.k-btn--big {
	min-width: 12rem;
	min-height: 56px;
	font-size: 1.05rem;
}

.k-btn[disabled],
.k-btn.is-busy {
	opacity: 0.55;
	cursor: progress;
}

.k-form {
	display: grid;
	gap: 0.5rem;
	text-align: left;
}

.k-label {
	display: grid;
	gap: 0.35rem;
	margin-top: 0.75rem;
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--k-ink-soft);
}

.k-input {
	width: 100%;
	padding: 0.8rem 0.9rem;
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius);
	background: rgba(255, 255, 255, 0.65);
	color: var(--k-ink);
	font: 400 1.1rem/1.4 var(--k-font-body); /* >= 16px: no iOS zoom */
	text-transform: none;
	letter-spacing: 0;
}

.k-input:focus {
	outline: none;
	border-color: var(--k-ink);
	background: #fff;
}

.k-input--code {
	min-height: 56px;
	text-align: center;
	font-size: 1.3rem;
	letter-spacing: 0.06em;
	border-color: var(--k-desert);
	background: #fff;
}

.k-input--code:focus {
	box-shadow: 0 0 0 3px rgba(204, 174, 142, 0.45);
}

.k-codeform .k-btn {
	min-height: 54px;
}

.k-form .k-btn {
	margin-top: 1rem;
}

.k-msg {
	min-height: 1.4em;
	margin: 0.5rem 0 0 !important;
	color: var(--k-error);
	font-size: 1rem;
}

.k-codeform .k-label {
	text-align: center;
}

/* Honeypot: off-screen, not display:none (some bots skip hidden fields) */
.k-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --------------------------------------------------------------- RSVP */
.k-greet {
	margin-bottom: 0.5rem !important;
	font-size: clamp(1.3rem, 5.5vw, 1.75rem);
	font-weight: 500;
	line-height: 1.25;
	color: var(--k-ink);
}

.k-word {
	margin: 0.5rem 0 1.5rem;
	font: 400 clamp(3.5rem, 16vw, 5.5rem)/1.35 var(--k-font-script);
	transform: rotate(-2deg);
	transform-origin: left center;
}

.k-word-story {
	margin-bottom: 2rem;
}

.k-guest {
	margin: 0 0 0.75rem;
	padding: 1rem 1rem 0.75rem;
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius);
	background: rgba(255, 255, 255, 0.4);
}

.k-guest.is-missing {
	border-color: var(--k-error);
}

.k-guest__name {
	padding: 0 0.35rem;
	font-weight: 700;
}

.k-choice {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
}

.k-choice label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	cursor: pointer;
}

.k-choice input {
	width: 1.2rem;
	height: 1.2rem;
	accent-color: var(--k-ink);
}

.k-note {
	padding: 1rem 1.25rem;
	border-left: 2px solid var(--k-gold);
	background: var(--k-sheer);
	margin-bottom: 1.5rem;
}

.k-confirm {
	outline: none;
}

.k-confirm__links {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-top: 2rem !important;
	font-size: 1rem;
}

/* --------------------------------------------------------------- Seat */
.k-seatcard {
	margin-bottom: 2rem;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

.k-seatcard__names {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.k-map {
	margin: 2rem 0 0;
	padding: 1rem;
	border: 1px solid var(--k-line);
	background: var(--k-sheer);
}

.k-map svg {
	display: block;
	width: 100%;
	height: auto;
}

.k-map figcaption {
	margin-top: 0.5rem;
	text-align: center;
}

/* Table top + chairs. Size comes from capacity (see templates/seat.php). */
.k-map__top {
	fill: #fff;
	stroke: var(--k-desert);
	stroke-width: 1;
}

.k-map__chair {
	fill: var(--k-beige);
	stroke: var(--k-desert);
	stroke-width: 0.8;
}

.k-map__t text {
	font-family: var(--k-font-body);
	text-anchor: middle;
}

.k-map__label {
	font-size: 13px;
	font-weight: 700;
	fill: var(--k-ink-soft);
}

.k-map__halo {
	fill: rgba(204, 174, 142, 0.18);
	stroke: var(--k-gold);
	stroke-width: 1.4;
	stroke-dasharray: 4 3;
}

/* Their own table */
.k-map__t.is-mine .k-map__top {
	fill: var(--k-sand);
	stroke: var(--k-ink);
	stroke-width: 1.6;
}

.k-map__t.is-mine .k-map__chair {
	fill: var(--k-ink);
	stroke: var(--k-ink);
}

/* "You are here" arrow: gently nudges towards the table */
.k-map__arrow path {
	fill: none;
	stroke: var(--k-ink);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.k-map__here text {
	font-family: var(--k-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	fill: var(--k-ink);
	paint-order: stroke;
	stroke: var(--k-paper);
	stroke-width: 3px;
}

.k-map__arrow {
	animation: k-nudge 1.4s ease-in-out infinite;
}

@keyframes k-nudge {
	50% { transform: translate(calc(var(--nx) * -1), calc(var(--ny) * -1)); }
}

.k-map__halo {
	animation: k-glow 1.8s ease-in-out infinite;
}

@keyframes k-glow {
	50% { stroke-opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
	.k-map__arrow,
	.k-map__halo {
		animation: none;
	}
}

.k-map__t.is-mine .k-map__label {
	fill: var(--k-ink);
	font-size: 14px;
}

/* ------------------------------------------------------- Usher check-in */
/* Utility screen: contrast and tap size over decoration. */
.k-checkin {
	max-width: 40rem;
	margin: 0 auto;
	padding: 0 0.75rem 6rem;
}

.k-ci__bar {
	position: sticky;
	top: 0;
	z-index: 5;
	padding: 0.75rem 0;
	background: var(--k-paper);
	border-bottom: 1px solid var(--k-line);
}

/* Arrival counter + progress bar */
.k-ci__progress {
	margin: 0 0 0.75rem;
}

.k-ci__count {
	display: flex;
	align-items: baseline;
	gap: 0.45rem;
	margin: 0 0 0.4rem !important;
	font-size: 1rem;
	color: var(--k-ink-soft);
	font-variant-numeric: tabular-nums;
}

.k-ci__count b {
	font-size: 1.9rem;
	line-height: 1;
	color: var(--k-ink);
}

.k-ci__meter {
	height: 6px;
	border-radius: 3px;
	background: var(--k-beige);
	overflow: hidden;
}

.k-ci__meter span {
	display: block;
	width: 0;
	height: 100%;
	border-radius: 3px;
	background: var(--k-ok);
	transition: width 0.3s ease;
}

.k-ci__net {
	margin: 0 0 0.5rem !important;
	padding: 0.35rem 0.6rem;
	background: #fff1b8;
	font-size: 0.85rem;
}

.k-ci__search {
	font-size: 1.15rem;
	padding: 0.9rem;
}

.k-ci__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.k-ci__row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.8rem 0.25rem;
	border-bottom: 1px solid var(--k-line);
}

.k-ci__row.is-in {
	background: rgba(85, 89, 57, 0.08);
}

.k-ci__row.is-pending .k-ci__time::after {
	content: " ⋯";
}

.k-ci__info {
	flex: 1;
	min-width: 0;
}

/* Avatar: arrival photo (tap to enlarge) or initials */
.k-ci__ph {
	flex: none;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 2px solid var(--k-ok);
	border-radius: 50%;
	background: var(--k-beige);
	overflow: hidden;
	cursor: zoom-in;
}

.k-ci__ph img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.k-ci__ph--initials {
	border: 1px solid var(--k-line);
	color: var(--k-ink-soft);
	font: 700 1rem/1 var(--k-font-body);
	letter-spacing: 0.04em;
	cursor: default;
}

.k-ci__ph--initials.is-in {
	border: 2px solid var(--k-ok);
	background: rgba(85, 89, 57, 0.12);
	color: var(--k-ok);
}

/* Full-size arrival photo */
.k-ci__lightbox {
	position: fixed;
	inset: 0;
	z-index: 20;
	display: grid;
	place-items: center;
	align-content: center;
	gap: 0.75rem;
	padding: 1rem;
	background: rgba(20, 14, 4, 0.88);
	cursor: zoom-out;
}

.k-ci__lightbox img {
	max-width: min(92vw, 34rem);
	max-height: 75vh;
	border: 4px solid #fff;
	border-radius: 4px;
	object-fit: contain;
	background: #fff;
}

.k-ci__lightbox p {
	margin: 0 !important;
	color: #fff;
	font-weight: 700;
	text-align: center;
}

.k-ci__name {
	display: block;
	font-weight: 700;
	font-size: 1.05rem;
}

.k-ci__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.6rem;
	font-size: 0.8rem;
	color: var(--k-ink-soft);
}

.k-ci__code {
	font-style: italic;
}

.k-ci__rsvp--1 { color: var(--k-ok); font-weight: 700; }
.k-ci__rsvp--0 { color: var(--k-error); font-weight: 700; }
.k-ci__rsvp--p { color: #8a6d00; }

.k-ci__table {
	font-weight: 700;
	color: var(--k-ink);
}

/* Seat button: "📍 ninong 1" — shows the table on the floor map */
.k-ci__seat {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	min-height: 30px;
	padding: 0 0.7rem 0 0.55rem;
	border: 1px solid var(--k-desert);
	border-radius: 999px;
	background: #fff;
	color: var(--k-ink);
	font: 700 0.8rem/1 var(--k-font-body);
	cursor: pointer;
}

.k-ci__seat::before {
	content: "";
	width: 0.6rem;
	height: 0.6rem;
	border: 2px solid currentColor;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
}

.k-ci__seat:hover,
.k-ci__seat:focus-visible {
	border-color: var(--k-ink);
	background: var(--k-beige);
}

.k-ci__noseat {
	font-style: italic;
}

/* "On map" pin in a table's header */
.k-ci__seat--head {
	order: 3;
	background: transparent;
}

/* Floor map in the usher Tables view */
.k-ci__mapwrap {
	margin: 0.9rem 0 0;
	border: 1px solid var(--k-line);
	background: var(--k-sheer);
	scroll-margin-top: 13rem; /* stay clear of the sticky header */
}

.k-ci__mapwrap[hidden] {
	display: none;
}

.k-ci__mapwrap summary {
	padding: 0.7rem 0.85rem;
	font-weight: 700;
	cursor: pointer;
}

.k-ci__mapwrap summary small {
	font-weight: 400;
	color: var(--k-ink-soft);
}

.k-ci__map {
	padding: 0 0.5rem 0.75rem;
}

.k-ci__map svg {
	display: block;
	width: 100%;
	height: auto;
	max-height: 60vh;
}

.k-ci__mt {
	cursor: pointer;
	outline: none;
}

.k-ci__mtop {
	fill: #fff;
	stroke: var(--k-desert);
	stroke-width: 1;
}

.k-ci__mchair {
	fill: var(--k-beige);
	stroke: var(--k-desert);
	stroke-width: 0.8;
}

.k-ci__mchair.is-in {
	fill: var(--k-ok);
	stroke: var(--k-ok);
}

.k-ci__mlabel,
.k-ci__mcount {
	font-family: var(--k-font-body);
	text-anchor: middle;
}

.k-ci__mlabel {
	font-size: 13px;
	font-weight: 700;
	fill: var(--k-ink-soft);
}

.k-ci__mcount {
	font-size: 11px;
	fill: var(--k-ink-soft);
}

.k-ci__mt.is-full .k-ci__mtop {
	stroke: var(--k-ok);
	stroke-width: 1.6;
}

.k-ci__mt:hover .k-ci__mtop,
.k-ci__mt:focus-visible .k-ci__mtop {
	stroke: var(--k-ink);
}

/* Selected table (tapped, searched, or from a seat button) */
.k-ci__mt.is-on .k-ci__mtop {
	fill: var(--k-sand);
	stroke: var(--k-ink);
	stroke-width: 2;
	animation: k-glow 1.8s ease-in-out infinite;
}

.k-ci__mt.is-on .k-ci__mlabel {
	fill: var(--k-ink);
	font-size: 15px;
}

.k-ci__btn {
	min-width: 6.5rem;
	margin: 0 !important;
}

.k-ci__done {
	display: grid;
	justify-items: end;
	font-size: 0.85rem;
	color: var(--k-ok);
	font-weight: 700;
}

.k-ci__undo {
	min-height: 40px;
	padding: 0 0.5rem;
	border: 0;
	background: none;
	color: var(--k-ink-soft);
	text-decoration: underline;
	font: inherit;
	font-weight: 400;
	cursor: pointer;
}

.k-ci__hint {
	padding: 2rem 0;
	text-align: center;
	color: var(--k-ink-soft);
}

.k-ci__toast {
	position: fixed;
	left: 0.75rem;
	right: 0.75rem;
	bottom: max(0.75rem, env(safe-area-inset-bottom));
	z-index: 10;
	max-width: 38rem;
	margin: 0 auto;
	padding: 1rem 1.25rem;
	background: var(--k-ok);
	color: #fff;
	font-size: 1rem;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
}

.k-ci__toast b {
	display: block;
	font-size: 2rem;
	line-height: 1.1;
}

.k-ci__toast.is-warn {
	background: var(--k-error);
}

/* Header row: view tabs on the left, Log out on the right */
.k-ci__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.6rem;
}

/* Segmented switch: fills the row so each half is an easy thumb target */
.k-ci__tabs {
	display: flex;
	flex: 1;
	max-width: 22rem;
	padding: 3px;
	border-radius: 999px;
	background: var(--k-beige);
	box-shadow: inset 0 0 0 1px var(--k-line);
}

.k-ci__tab {
	flex: 1;
	min-height: 42px;
	padding: 0 1rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--k-ink-soft);
	font: 700 0.95rem/1 var(--k-font-body);
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

.k-ci__tab[aria-selected="true"] {
	background: var(--k-ink);
	color: var(--k-paper);
	box-shadow: 0 1px 3px rgba(66, 47, 10, 0.25);
}

.k-ci__logout {
	flex: none;
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding: 0 1rem;
	border: 1px solid var(--k-line);
	border-radius: 999px;
	color: var(--k-ink-soft) !important;
	font-size: 0.9rem;
	text-decoration: none !important;
}

.k-ci__logout:hover {
	border-color: var(--k-ink);
	color: var(--k-ink) !important;
}

/* Tables view: "By table" / "A–Z" switch */
.k-ci__sort {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.9rem 0 0;
	font-size: 0.9rem;
	color: var(--k-ink-soft);
}

.k-ci__sort[hidden] {
	display: none;
}

/* All / Not yet arrived / Arrived — lives in the sticky header */
.k-ci__filter {
	display: flex;
	gap: 0.4rem;
	margin-top: 0.6rem;
	overflow-x: auto;
	scrollbar-width: none;
}

.k-ci__filter button {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 38px;
	padding: 0 0.85rem;
	border: 1px solid var(--k-line);
	border-radius: 999px;
	background: #fff;
	color: var(--k-ink-soft);
	font: 700 0.875rem/1 var(--k-font-body);
	white-space: nowrap;
	cursor: pointer;
}

.k-ci__filter button span {
	min-width: 1.5em;
	padding: 0.15rem 0.4rem;
	border-radius: 999px;
	background: var(--k-beige);
	color: var(--k-ink);
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
}

.k-ci__filter button[aria-pressed="true"] {
	border-color: var(--k-ink);
	background: var(--k-ink);
	color: var(--k-paper);
}

.k-ci__filter button[aria-pressed="true"] span {
	background: rgba(255, 255, 255, 0.2);
	color: var(--k-paper);
}

.k-ci__filter button[data-filter="in"][aria-pressed="true"] {
	border-color: var(--k-ok);
	background: var(--k-ok);
}

.k-ci__sort button {
	min-height: 38px;
	padding: 0 0.95rem;
	border: 1px solid var(--k-line);
	border-radius: 999px;
	background: transparent;
	color: var(--k-ink-soft);
	font: 700 0.875rem/1 var(--k-font-body);
	cursor: pointer;
}

.k-ci__sort button[aria-pressed="true"] {
	border-color: var(--k-ink);
	background: var(--k-ink);
	color: var(--k-paper);
}

.k-ci__tbl--alpha .k-ci__tblhead {
	padding-top: 0.4rem;
	padding-bottom: 0.4rem;
}

/* Tables view */
.k-ci__tbl {
	margin: 1rem 0 0;
	border: 1px solid var(--k-line);
	background: rgba(255, 255, 255, 0.5);
}

.k-ci__tbl.is-full {
	border-color: var(--k-ok);
}

.k-ci__tblhead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	padding: 0.7rem 0.75rem;
	background: var(--k-beige);
}

.k-ci__tblname {
	margin: 0;
	font: 700 1.2rem/1.2 var(--k-font-body);
}

.k-ci__tblcount {
	font-size: 0.9rem;
	color: var(--k-ink-soft);
	font-variant-numeric: tabular-nums;
}

.k-ci__tbl.is-full .k-ci__tblcount {
	color: var(--k-ok);
	font-weight: 700;
}

.k-ci__tbl .k-ci__row {
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}

.k-ci__tbl .k-ci__row:last-child {
	border-bottom: 0;
}

.k-ci__empty {
	padding: 0.8rem 0.75rem;
	color: var(--k-ink-soft);
	font-size: 0.9rem;
}

.k-ci-login {
	margin-top: 3rem;
}

.k-ci-login input[type="text"],
.k-ci-login input[type="password"] {
	width: 100%;
	padding: 0.8rem;
	font-size: 1rem;
	border: 1px solid var(--k-line);
}

.k-ci-login .button {
	min-height: 48px;
	padding: 0 1.5rem;
	border: 0;
	background: var(--k-ink);
	color: var(--k-paper);
	font-weight: 700;
}

/* ------------------------------------------------------ Wider screens */
@media (min-width: 760px) {
	:root {
		--k-gutter: 2rem;
	}

	.k-schedule {
		max-width: 60rem;
		gap: 5rem;
	}

	.k-event {
		display: grid;
		grid-template-columns: 7fr 5fr;
		align-items: center;
	}

	.k-event__sketch {
		width: 100%;
		margin: 0;
	}

	.k-event__body,
	.k-event--alt .k-event__body {
		width: auto;
		margin: 0 0 0 -4rem;
	}

	.k-event--alt {
		grid-template-columns: 5fr 7fr;
	}

	.k-event--alt .k-event__sketch {
		order: 2;
	}

	.k-event--alt .k-event__body {
		margin: 0 -4rem 0 0;
		z-index: 1;
	}

	.k-gallery {
		max-width: 56rem;
		columns: 3 14rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		scroll-behavior: auto !important;
		transition: none !important;
	}
}

/* "Arrived" modal: arrival photo (or a ticked skip box) before check-in */
.k-ci__modal {
	width: min(32rem, calc(100vw - 2rem));
	max-height: calc(100dvh - 2rem);
	padding: 0;
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius);
	background: var(--k-paper);
	color: var(--k-ink);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.k-ci__modal::backdrop {
	background: rgba(30, 22, 6, 0.55);
}

.k-ci__mform {
	display: grid;
	gap: 0.85rem;
	padding: 1.1rem;
}

.k-ci__mname {
	margin: 0;
	font: 700 1.3rem/1.25 var(--k-font-body);
}

.k-ci__mmeta {
	margin: -0.5rem 0 0;
	font-size: 0.95rem;
	color: var(--k-ink-soft);
}

.k-ci__cam {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #1e1606;
}

.k-ci__cam video,
.k-ci__cam img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.k-ci__cam [hidden] {
	display: none;
}

.k-ci__cam video.is-mirror {
	transform: scaleX(-1);
}

.k-ci__camhint {
	margin: 0;
	padding: 1rem;
	text-align: center;
	color: var(--k-paper);
	font-size: 0.95rem;
}

.k-ci__camrow,
.k-ci__mactions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.k-ci__camrow .k-btn,
.k-ci__mactions .k-btn {
	flex: 1 1 8rem;
	margin: 0 !important;
	padding-inline: 0.8rem;
}

.k-ci__camrow [hidden] {
	display: none;
}

.k-ci__camrow label.k-btn {
	cursor: pointer;
}

.k-ci__skip {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 48px;
	padding: 0 0.75rem;
	border: 1px dashed var(--k-desert);
	font-size: 0.95rem;
	cursor: pointer;
}

.k-ci__skip input {
	width: 1.3rem;
	height: 1.3rem;
	accent-color: var(--k-ink);
	flex: none;
}

.k-ci__mactions {
	padding-top: 0.25rem;
	border-top: 1px solid var(--k-line);
}

.k-ci__mactions .k-btn[disabled] {
	cursor: not-allowed;
}

/* ======================================================================
 * 3D scroll animation — invitation page only.
 * kasal.js adds .k-3d to <html> only when the invitation hero is on the
 * page and the guest hasn't asked their phone to reduce motion; without
 * that class nothing below applies and everything is simply visible.
 * Only transform + opacity move, so it stays smooth on phones.
 * ==================================================================== */
.k-3d .k-main {
	perspective: 1200px;
	perspective-origin: 50% 30%;
}

/* Hero: the names lift towards you and tilt back as you scroll away */
.k-3d .k-hero {
	perspective: 900px;
}

.k-3d .k-hero__inner {
	transform: translate3d(0, calc(var(--sy, 0) * 0.15px), calc(var(--sy, 0) * -0.25px)) rotateX(calc(var(--sy, 0) * 0.01deg));
	opacity: calc(1 - var(--sy, 0) / 1600);
	will-change: transform, opacity;
}

/* Sections and cards rise up from depth when they reach the screen */
.k-3d .k-rv {
	opacity: 0;
	transform: translate3d(0, 24px, -40px) rotateX(6deg);
	transform-origin: 50% 0;
	transition:
		opacity 0.7s ease-out,
		transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: calc(var(--i, 0) * 70ms);
}

/* Venue sketch and its card come in from opposite sides, like pages turning */
.k-3d .k-rv.k-event__sketch {
	transform: translate3d(-14px, 12px, -50px) rotateY(6deg);
	transform-origin: 0 50%;
}

.k-3d .k-rv.k-event__body {
	transform: translate3d(14px, 12px, -30px) rotateY(-5deg);
	transform-origin: 100% 50%;
}

.k-3d .k-event--alt .k-rv.k-event__sketch {
	transform: translate3d(14px, 12px, -50px) rotateY(-6deg);
	transform-origin: 100% 50%;
}

.k-3d .k-event--alt .k-rv.k-event__body {
	transform: translate3d(-14px, 12px, -30px) rotateY(5deg);
	transform-origin: 0 50%;
}

/* Colour swatches flip up one after another */
.k-3d .k-rv.k-swatch {
	transform: translate3d(0, 10px, 0) rotateX(35deg) scale(0.96);
}

/* Gallery prints drop onto the table */
.k-3d .k-rv.k-photo {
	transform: translate3d(0, 16px, 40px) rotate(2deg) scale(1.03);
}

.k-3d .k-rv.is-in {
	opacity: 1;
	transform: none;
}

/* Keep the gallery prints' and event cards' resting tilt once they land */
.k-3d .k-rv.is-in.k-photo--0 { transform: rotate(-1deg); }
.k-3d .k-rv.is-in.k-photo--1 { transform: rotate(0.8deg); }
.k-3d .k-rv.is-in.k-photo--2 { transform: rotate(-0.3deg); }
.k-3d .k-rv.is-in.k-event__body { transform: rotate(-0.4deg); }
.k-3d .k-event--alt .k-rv.is-in.k-event__body { transform: rotate(0.5deg); }

@media (min-width: 760px) {
	.k-3d .k-rv.is-in.k-event__body,
	.k-3d .k-event--alt .k-rv.is-in.k-event__body {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.k-3d .k-rv,
	.k-3d .k-rv.is-in {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.k-3d .k-hero__inner {
		transform: none;
		opacity: 1;
	}
}

/* ======================================================================
 * Full-screen panels on the invitation: hero, Our Story, each event,
 * Gayak at Kulay (guidelines + two palettes), Entourage (two screens)
 * and the photos. Each is at least one phone-screen tall with its
 * content centred; longer content (e.g. the dress code) simply runs on.
 * ==================================================================== */
.k-hero {
	min-height: 100svh;
}

.k-screen {
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: 4rem;
	padding-bottom: 4rem;
}

/* Events: the schedule wrapper no longer spaces them — each is a screen. */
.k-schedule {
	gap: 0;
	padding-top: 0;
	padding-bottom: 0;
}

@media (min-width: 760px) {
	.k-event.k-screen {
		display: grid;
		align-content: center;
	}
}

/* The gallery is a multi-column layout, not a flex column. */
.k-gallery.k-screen {
	display: block;
	padding-top: 5rem;
}

/* Small label on the palette screens so they read as part of Gayak at Kulay. */
.k-screen__kicker {
	margin: 0 0 0.25rem !important;
	font: 700 0.85rem/1.4 var(--k-font-body);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--k-gold);
}

.k-dress .k-palette .k-h3:first-child {
	margin-top: 0.25rem;
	font-size: 1.05rem;
	color: var(--k-ink);
}

/* Entourage screens: heading near the top, names centred below. */
.k-entourage.k-screen .k-h {
	margin-bottom: 2rem;
}

/* ======================================================================
 * Kasalan / Merienda / Handaan: the venue sketch fills the whole screen
 * as a background, with the details card floating on top.
 * ==================================================================== */
.k-schedule {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.k-event.k-screen {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	padding: 4rem var(--k-gutter);
	isolation: isolate;
}

.k-event.k-screen .k-event__sketch {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	object-position: center;
	opacity: 0.75;
	mix-blend-mode: multiply;
}

/* Soft fade at the top and bottom so screens blend into each other. */
.k-event.k-screen::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(var(--k-paper), transparent 14%, transparent 86%, var(--k-paper));
}

.k-event.k-screen .k-event__body,
.k-event.k-screen.k-event--alt .k-event__body {
	width: 100%;
	max-width: 26rem;
	margin: 0;
	background: rgba(251, 245, 238, 0.86);
	box-shadow: 0 18px 40px -22px rgba(66, 47, 10, 0.45);
}

/* Bigger screens: cards alternate left / right over the sketch. */
@media (min-width: 760px) {
	.k-event.k-screen {
		display: flex;
		align-items: flex-start;
		padding-left: max(2rem, 8vw);
		padding-right: max(2rem, 8vw);
	}

	.k-event.k-screen.k-event--alt {
		align-items: flex-end;
	}

	.k-event.k-screen .k-event__sketch {
		order: 0;
	}
}

/* 3D entrance for the full-screen sketch: it settles from slightly zoomed in. */
.k-3d .k-event.k-screen .k-rv.k-event__sketch,
.k-3d .k-event.k-screen.k-event--alt .k-rv.k-event__sketch {
	opacity: 0;
	transform: scale(1.1);
	transform-origin: 50% 50%;
	transition: opacity 1.1s ease-out, transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.k-3d .k-event.k-screen .k-rv.is-in.k-event__sketch {
	opacity: 0.75;
	transform: none;
}

/* The sketch's white paper blends into this colour (multiply needs something to blend with). */
.k-event.k-screen {
	background: var(--k-paper);
}

/* The sketches have a thin drawn frame; zoom just enough to push it off-screen. */
.k-event.k-screen .k-event__sketch,
.k-3d .k-event.k-screen .k-rv.is-in.k-event__sketch {
	transform: scale(1.06);
}

/* ======================================================================
 * Panel 3D (invitation only): each full-screen panel swings up flat as it
 * arrives from below and tilts away / sinks back as you scroll past it.
 * kasal.js sets --p (-1 leaving … 0 flat … 1 arriving) and --a = |--p|.
 * The hinge is the panel's top edge while arriving and its bottom edge
 * while leaving, so the panels fold past like pages of a book.
 * ==================================================================== */
.k-3d .k-p3d {
	transform-origin: 50% 0;
	transform: perspective(1400px) rotateX(calc(var(--p, 0) * -7deg)) scale(calc(1 - var(--a, 0) * 0.04));
	opacity: calc(1 - var(--a, 0) * 0.3);
	will-change: transform, opacity;
	backface-visibility: hidden;
}

.k-3d .k-p3d.is-leaving {
	transform-origin: 50% 100%;
}

/* Event panels carry their sketch; a soft edge shadow sells the depth. */
.k-3d .k-event.k-p3d {
	box-shadow: 0 30px 60px -40px rgba(66, 47, 10, calc(var(--a, 0) * 0.35));
}

/* ======================================================================
 * Wider panels on tablets / computers (phones are unchanged).
 * ==================================================================== */
@media (min-width: 900px) {
	.k-section.k-screen:not(.k-event) {
		max-width: min(64rem, 92vw);
	}

	/* Palette screens: swatches spread out, Ginoo / Binibini side by side. */
	.k-palette .k-swatches {
		grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
		gap: 1.75rem 1.5rem;
	}

	.k-palette .k-swatch__chip {
		width: 4rem;
		height: 4rem;
	}

	.k-attire {
		columns: 2;
		column-gap: 3rem;
		margin-top: 1.5rem;
	}

	.k-attire h4 {
		break-after: avoid;
	}

	.k-attire ul {
		break-inside: avoid;
	}

	/* Long reading text keeps a comfortable line length inside the wider panel. */
	.k-dress > .k-prose,
	.k-story > .k-prose {
		max-width: 46rem;
	}

	.k-entourage.k-screen .k-ent {
		max-width: 58rem;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ======================================================================
 * Photo gallery collage: prints scattered on a table — mixed sizes by
 * photo shape (big feature, tall portraits, wide landscapes), slight
 * overlap and tilt. Tap a print to open it full size.
 * ==================================================================== */
.k-gallery,
.k-gallery.k-screen {
	columns: auto;
	max-width: min(64rem, 100%);
}

.k-collage {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: clamp(4.5rem, 21vw, 8rem);
	grid-auto-flow: dense;
	gap: 0.5rem;
	padding: 0.5rem 0.25rem 1.5rem;
}

.k-collage .k-photo {
	position: relative;
	z-index: var(--z, 1);
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	margin: -0.55rem; /* prints overlap a little */
	padding: 6px 6px 8px;
	background: #fff;
	box-shadow: 0 2px 4px rgba(66, 47, 10, 0.12), 0 14px 28px -14px rgba(66, 47, 10, 0.45);
	transform: rotate(var(--rot, 0deg));
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.k-collage .k-photo:hover,
.k-collage .k-photo:focus-within {
	z-index: 20;
	transform: rotate(0deg) scale(1.04);
	box-shadow: 0 4px 8px rgba(66, 47, 10, 0.15), 0 24px 40px -16px rgba(66, 47, 10, 0.55);
}

/* Phones (4 columns): portraits 2×3, feature 4×3, landscapes in pairs 2×2, leftover full width. */
.k-photo--big  { grid-column: span 4; grid-row: span 3; }
.k-photo--tall { grid-column: span 2; grid-row: span 3; }
.k-photo--wide { grid-column: 1 / -1; grid-row: span 2; }
.k-photo--land { grid-column: span 2; grid-row: span 2; }

.k-photo__open {
	flex: 1;
	min-height: 0;
	display: block;
	padding: 0;
	border: 0;
	background: #eee;
	cursor: zoom-in;
}

.k-photo__open img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.k-collage .k-photo figcaption {
	padding: 0.35rem 0.15rem 0;
	font-size: 0.8rem;
	line-height: 1.3;
	color: var(--k-ink-soft);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (min-width: 900px) {
	.k-collage {
		grid-template-columns: repeat(6, 1fr);
		grid-auto-rows: 6.5rem;
		gap: 0.75rem;
	}

	/* Computers (6 columns): portraits 2×4, feature 4×4, landscapes 2×2 fill around them. */
	.k-photo--big  { grid-column: span 4; grid-row: span 4; }
	.k-photo--tall { grid-column: span 2; grid-row: span 4; }
	.k-photo--wide { grid-column: 2 / span 4; grid-row: span 3; }
	.k-photo--land { grid-column: span 2; grid-row: span 2; }

	.k-collage .k-photo figcaption {
		font-size: 0.9rem;
	}
}

/* Full-size photo */
.k-lightbox {
	width: auto;
	max-width: min(92vw, 70rem);
	padding: 8px 8px 0;
	background: #fff;
}

.k-lightbox figure {
	margin: 0;
}

.k-lightbox img {
	display: block;
	max-width: 100%;
	max-height: 80svh;
	margin: 0 auto;
}

.k-lightbox figcaption {
	padding: 0.6rem 2.5rem 0.75rem 0.25rem;
	font-size: 0.95rem;
	color: var(--k-ink-soft);
}

.k-lightbox .k-modal__x {
	top: auto;
	bottom: 0.1rem;
	right: 0.1rem;
}

@media (prefers-reduced-motion: reduce) {
	.k-collage .k-photo {
		transition: none;
	}
}

/* ------------------------------------------------------------ Envelope */
/*
 * Sealed envelope over the invitation. Tap: the seal lifts, the flap swings
 * open in 3D, the card slides out, then the whole envelope flies toward the
 * guest and fades, revealing the page. Timings are on .is-opening below.
 */
.k-env {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	place-items: center;
	padding: 1rem;
	background-color: var(--k-paper);
	background-image: repeating-linear-gradient(-45deg, rgba(66, 47, 10, 0.02) 0 1px, transparent 1px 7px);
	text-align: center;
	overflow: hidden;
}

.k-env__stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	perspective: 1100px;
}

.k-env .k-env__to,
.k-env .k-env__hint,
.k-env .k-env__foot {
	margin: 0;
	font: 700 0.75rem/1.5 var(--k-font-body);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--k-ink-soft);
}

.k-env .k-env__title {
	margin: 1rem 0 1.75rem;
	font: 400 clamp(2rem, 8vw, 2.6rem)/1.2 var(--k-font-script);
	color: var(--k-ink);
}

.k-env .k-env__hint {
	margin-top: 2.75rem;
	animation: k-env-hint 2.4s ease-in-out infinite;
}

.k-env .k-env__foot {
	position: absolute;
	left: 0;
	right: 0;
	bottom: max(1.25rem, env(safe-area-inset-bottom));
	font-size: 0.65rem;
}

.k-env__btn {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transform-style: preserve-3d;
	animation: k-env-float 5s ease-in-out infinite;
}

.k-env__btn:focus-visible {
	outline: 2px solid var(--k-ink);
	outline-offset: 8px;
}

.k-env__body {
	position: relative;
	display: block;
	width: min(78vw, 22rem);
	aspect-ratio: 3 / 2;
	perspective: 900px; /* flat stacking, so z-index decides what's in front */
	filter: drop-shadow(0 22px 28px rgba(66, 47, 10, 0.16));
}

.k-env__back,
.k-env__pocket,
.k-env__flap,
.k-env__letter {
	position: absolute;
	display: block;
}

.k-env__back {
	inset: 0;
	background: #efe2d2;
	border: 1px solid var(--k-line);
}

.k-env__letter {
	left: 6%;
	right: 6%;
	top: 6%;
	height: 88%;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.2rem;
	background: var(--k-paper);
	border: 1px solid var(--k-line);
	box-shadow: 0 1px 3px rgba(66, 47, 10, 0.08);
}

.k-env__letter-names {
	font: 400 clamp(1.6rem, 7vw, 2.2rem)/1.1 var(--k-font-names);
	color: var(--k-ink);
	white-space: nowrap;
}

.k-env__letter-date {
	font: 700 0.65rem/1 var(--k-font-body);
	letter-spacing: 0.22em;
	color: var(--k-ink-soft);
}

.k-env__pocket {
	inset: 0;
	z-index: 2;
	background:
		linear-gradient(to top right, transparent calc(50% - 0.5px), var(--k-line) 50%, transparent calc(50% + 0.5px)) left bottom / 50% 100% no-repeat,
		linear-gradient(to top left, transparent calc(50% - 0.5px), var(--k-line) 50%, transparent calc(50% + 0.5px)) right bottom / 50% 100% no-repeat,
		var(--k-beige);
	clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%);
}

.k-env__flap {
	left: 0;
	right: 0;
	top: 0;
	height: 58%;
	z-index: 3;
	transform-origin: 50% 0;
	transform-style: preserve-3d;
	transform: rotateX(0deg);
}

.k-env__flap::before,
.k-env__flap-in {
	content: "";
	position: absolute;
	inset: 0;
	display: block;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	backface-visibility: hidden;
}

.k-env__flap::before {
	background: linear-gradient(to bottom, #f9efe4, var(--k-beige));
}

/* Inside of the flap, seen once it has swung past 90°. */
.k-env__flap-in {
	background: #e9d9c6;
	transform: rotateX(180deg);
	/* Its own flip turns it upside down, so cut the triangle the other way
	   round: once the flap is open its base sits on the hinge, tip up. */
	clip-path: polygon(0 100%, 100% 100%, 50% 0);
}

.k-env__seal {
	position: absolute;
	left: 50%;
	top: 58%;
	z-index: 4;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin: -1.5rem 0 0 -1.5rem;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #8a8f62, var(--k-ok) 70%);
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.14), 0 3px 6px rgba(66, 47, 10, 0.25);
	color: var(--k-paper);
	font: 400 1.6rem/1 var(--k-font-script);
}

/* ---- Opening sequence ---- */
.k-env.is-opening .k-env__btn {
	animation: none;
	cursor: default;
}

.k-env.is-opening .k-env__hint,
.k-env.is-opening .k-env__to,
.k-env.is-opening .k-env__title,
.k-env.is-opening .k-env__foot {
	animation: k-env-hide 0.4s ease forwards;
}

.k-env.is-opening .k-env__seal {
	animation: k-env-seal 0.4s ease-in forwards;
}

.k-env.is-opening .k-env__flap {
	animation: k-env-flap 0.75s cubic-bezier(0.45, 0, 0.25, 1) 0.3s forwards;
}

.k-env.is-opening .k-env__letter {
	animation: k-env-letter 0.8s cubic-bezier(0.3, 0, 0.2, 1) 1s forwards;
}

.k-env.is-opening .k-env__body {
	animation: k-env-fly 0.9s cubic-bezier(0.5, 0, 0.75, 0) 1.95s forwards;
}

.k-env.is-opening {
	animation: k-env-out 0.6s ease 2.35s forwards;
}

@keyframes k-env-float {
	0%, 100% { transform: rotateX(5deg) rotateY(-5deg) translateY(0); }
	50% { transform: rotateX(2deg) rotateY(5deg) translateY(-6px); }
}

@keyframes k-env-hint {
	0%, 100% { opacity: 0.55; }
	50% { opacity: 1; }
}

@keyframes k-env-seal {
	40% { transform: scale(1.12); }
	to { transform: scale(0.2) translateZ(40px); opacity: 0; }
}

/* z-index drops halfway so the open flap tucks behind the card. */
@keyframes k-env-flap {
	0% { transform: rotateX(0deg); z-index: 3; }
	49% { z-index: 3; }
	50% { z-index: 0; }
	100% { transform: rotateX(180deg); z-index: 0; }
}

@keyframes k-env-letter {
	to { transform: translateY(-62%); }
}

@keyframes k-env-fly {
	0% { transform: rotateX(0deg) scale(1); opacity: 1; }
	100% { transform: rotateX(-14deg) translateZ(520px) scale(1.6); opacity: 0; }
}

@keyframes k-env-hide {
	to { opacity: 0; }
}

@keyframes k-env-out {
	to { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
	.k-env .k-env__btn,
	.k-env .k-env__hint {
		animation: none;
	}

	.k-env.is-opening .k-env__seal,
	.k-env.is-opening .k-env__flap,
	.k-env.is-opening .k-env__letter,
	.k-env.is-opening .k-env__body {
		animation: none;
	}

	.k-env.is-opening {
		animation: k-env-out 0.35s ease forwards;
	}
}

/* --------------------------------------------------------- Cover photo */
/* First screen of the invitation: a full-bleed photo of the couple. */
.k-cover {
	position: relative;
	height: 100svh;
	min-height: 28rem;
	overflow: hidden;
	background: var(--k-beige);
}

.k-cover__pic,
.k-cover__img {
	display: block;
	width: 100%;
	height: 100%;
}

.kasal .k-cover__img {
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: 50% 35%;
	animation: k-cover-in 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* Soft shade top and bottom so the greeting and arrow read on any photo. */
.k-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(to bottom, rgba(42, 30, 8, 0.45), rgba(42, 30, 8, 0) 22%),
		linear-gradient(to top, rgba(42, 30, 8, 0.35), rgba(42, 30, 8, 0) 20%);
}

.k-topbar--over {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
}

.kasal .k-topbar--over .k-hello,
.k-topbar--over .k-link {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.7);
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.k-cover__next {
	position: absolute;
	left: 50%;
	bottom: max(1.25rem, env(safe-area-inset-bottom));
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-left: -22px;
	animation: k-cover-bob 2.2s ease-in-out infinite;
}

.k-cover__next span {
	width: 14px;
	height: 14px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: translateY(-4px) rotate(45deg);
}

/* The names screen now follows the photo instead of the top bar. */
.k-hero--after-cover {
	margin-top: 0;
}

@keyframes k-cover-in {
	from { transform: scale(1.08); }
}

@keyframes k-cover-bob {
	0%, 100% { transform: translateY(0); opacity: 0.7; }
	50% { transform: translateY(6px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.kasal .k-cover__img,
	.k-cover__next {
		animation: none;
	}
}

/* "Together with our families" — small line above the names. */
.kasal .k-hero__above {
	margin: 0 0 clamp(1rem, 3vw, 1.75rem);
	font-size: clamp(1rem, 3.6vw, 1.2rem);
	letter-spacing: 0.08em;
	color: var(--k-ink-soft);
}

/* ----------------------------------------------------- RSVP form look */
/* "Will you be / joining us?" heading, big yes/no buttons, roomy fields. */
.k-section.k-rsvp {
	max-width: calc(46rem + 2 * var(--k-gutter));
}

.k-rsvp__h {
	margin: 0 0 1rem;
	font: 400 clamp(2.4rem, 9vw, 3.4rem)/1.05 Georgia, "Times New Roman", serif;
	color: var(--k-ink);
}

.k-rsvp__h span,
.k-rsvp__h em {
	display: block;
}

.k-rsvp__h em {
	font-style: italic;
	color: var(--k-ok);
}

.kasal .k-rsvp__by {
	margin-bottom: 2rem;
	font: 400 1.15rem/1.5 Georgia, "Times New Roman", serif;
	color: var(--k-ink-soft);
}

.k-rsvp .k-note {
	border-left-color: var(--k-ok);
	background: none;
	font-family: Georgia, "Times New Roman", serif;
}

.k-rsvp .k-form {
	gap: 0.4rem;
}

.k-rsvp .k-label,
.k-rsvp .k-guest__name {
	margin-top: 1.25rem;
	font: 700 0.78rem/1.4 var(--k-font-body);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--k-ink-soft);
}

.k-rsvp .k-input {
	padding: 0.9rem 1rem;
	border-color: rgba(66, 47, 10, 0.22);
	background: #fff;
}

.k-rsvp .k-input:focus {
	border-color: var(--k-ok);
	box-shadow: 0 0 0 3px rgba(85, 89, 57, 0.15);
}

.k-rsvp textarea.k-input {
	min-height: 6.5rem;
}

/* One guest = their name as a label, then the two buttons. */
.k-rsvp .k-guest {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.k-rsvp .k-guest__name {
	display: block;
	margin-bottom: 0.5rem;
	padding: 0;
}

.k-rsvp .k-choice {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

.k-rsvp .k-choice label {
	position: relative;
	display: block;
	min-height: 0;
}

/* The radio stays in place for keyboards and screen readers, just invisible. */
.k-rsvp .k-choice input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.k-rsvp .k-choice span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.75rem 0.5rem;
	border: 1px solid rgba(66, 47, 10, 0.22);
	border-radius: var(--k-radius);
	background: rgba(255, 255, 255, 0.55);
	font: 700 0.8rem/1.2 var(--k-font-body);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-align: center;
	color: var(--k-ink-soft);
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.k-rsvp .k-choice label:hover span {
	border-color: var(--k-ok);
}

.k-rsvp .k-choice input:checked + span {
	border-color: var(--k-ok);
	background: var(--k-ok);
	color: #fff;
}

.k-rsvp .k-choice input:focus-visible + span {
	outline: 2px solid var(--k-ink);
	outline-offset: 2px;
}

.k-rsvp .k-guest.is-missing .k-choice span {
	border-color: var(--k-error);
}

.k-rsvp .k-diet {
	margin-top: 0.9rem;
}

.k-rsvp .k-form .k-btn {
	width: 100%;
	min-height: 54px;
	margin-top: 1.75rem;
	border-color: var(--k-ok);
	background: var(--k-ok);
	letter-spacing: 0.24em;
}

.k-rsvp .k-form .k-btn:hover {
	background: #44482d;
}

/* Gellatio's swashes reach past the line box: give the names room above and below. */
.k-hero__inner .k-names {
	margin-bottom: clamp(0.6rem, 2vw, 1.1rem);
}

.k-hero__inner .k-hero__above + .k-names {
	margin-top: 0.6em;
}

/* Countdown: big numbers, readable units. */
.k-hero .k-countdown {
	margin-top: 2.25rem;
}

.k-hero .k-countdown span {
	font-size: clamp(2.6rem, 10vw, 3.75rem);
	line-height: 1;
}

.k-hero .k-countdown small {
	margin: 0 0.9rem 0 0.25rem;
	font-size: clamp(1rem, 3.6vw, 1.25rem);
	letter-spacing: 0.06em;
}

.k-hero .k-countdown small:last-child {
	margin-right: 0;
}

/* Hero date: weekday above, bigger date. */
.kasal .k-hero__date {
	margin: 0.75rem 0 0.25rem;
	font-size: clamp(1.6rem, 6vw, 2.25rem);
	letter-spacing: 0.2em;
	line-height: 1.2;
}

.k-hero__day {
	display: block;
	margin-bottom: 0.2rem;
	font-size: 0.55em;
	font-weight: 700;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--k-ink-soft);
}

/* ------------------------------------------------------------ Top nav */
/*
 * Fixed bar: monogram, jump links, RSVP. See-through with white text while
 * the cover photo is under it (.is-over), solid paper once you scroll on.
 * Phones get a "Menu" button that drops the links down.
 */
.k-nav {
	--k-nav-h: 64px;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	gap: 1.75rem;
	height: var(--k-nav-h);
	padding: 0 max(var(--k-gutter), 2vw);
	background: rgba(251, 245, 238, 0.94);
	border-bottom: 1px solid var(--k-line);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font: 700 0.75rem/1 var(--k-font-body);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--k-ink);
	transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.k-nav a {
	color: inherit;
	text-decoration: none;
}

.k-nav__brand {
	flex: none;
	font-size: 0.8rem;
	letter-spacing: 0.18em;
	white-space: nowrap;
}

.k-nav__links {
	display: flex;
	gap: clamp(1rem, 1.4vw, 1.6rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.k-nav__links a {
	display: block;
	padding: 0.6rem 0;
	color: var(--k-ink-soft);
	white-space: nowrap;
	letter-spacing: 0.16em;
	transition: color 0.15s;
}

.k-nav__links a:hover,
.k-nav__links a.is-current {
	color: var(--k-ink);
}

.k-nav__rsvp {
	flex: none;
	padding: 0.85rem 1.2rem;
	border: 1px solid currentColor;
	border-radius: var(--k-radius);
	transition: background-color 0.15s, color 0.15s;
}

.k-nav__rsvp:hover {
	background: var(--k-ink);
	border-color: var(--k-ink);
	color: var(--k-paper) !important;
}

.k-nav__toggle {
	display: none;
}

/* Over the photo */
.k-nav.is-over {
	background: transparent;
	border-bottom-color: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	color: #fff;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

.k-nav.is-over .k-nav__links a {
	color: rgba(255, 255, 255, 0.85);
}

.k-nav.is-over .k-nav__links a:hover {
	color: #fff;
}

/* Greeting on the photo drops below the bar; anchors stop below it too. */
.k-has-nav .k-topbar--over {
	top: 64px;
}

.k-has-nav [id^="k-"] {
	scroll-margin-top: 64px;
}

/* Phones and small tablets: Menu button + drop-down list */
@media (max-width: 1279px) {
	.k-nav {
		gap: 0.75rem;
	}

	.k-nav__toggle {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		order: 3;
		min-height: 44px;
		padding: 0 0.25rem;
		border: 0;
		background: none;
		color: inherit;
		font: inherit;
		letter-spacing: inherit;
		text-transform: inherit;
		cursor: pointer;
	}

	.k-nav__bars,
	.k-nav__bars::before,
	.k-nav__bars::after {
		display: block;
		width: 18px;
		height: 1.5px;
		background: currentColor;
		transition: transform 0.2s, opacity 0.2s;
	}

	.k-nav__bars {
		position: relative;
	}

	.k-nav__bars::before,
	.k-nav__bars::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.k-nav__bars::before { top: -6px; }
	.k-nav__bars::after { top: 6px; }

	.k-nav.is-open .k-nav__bars { background: transparent; }
	.k-nav.is-open .k-nav__bars::before { transform: translateY(6px) rotate(45deg); }
	.k-nav.is-open .k-nav__bars::after { transform: translateY(-6px) rotate(-45deg); }

	.k-nav__rsvp {
		order: 2;
		padding: 0.7rem 0.9rem;
	}

	.k-nav__links {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		flex-direction: column;
		gap: 0;
		padding: 0.5rem var(--k-gutter) 1rem;
		background: var(--k-paper);
		border-bottom: 1px solid var(--k-line);
		box-shadow: 0 18px 30px -20px rgba(66, 47, 10, 0.35);
		text-shadow: none;
	}

	.k-nav.is-open .k-nav__links {
		display: flex;
	}

	.k-nav__links a,
	.k-nav.is-over .k-nav__links a {
		padding: 0.95rem 0;
		border-bottom: 1px solid var(--k-line);
		color: var(--k-ink);
	}

	.k-nav__links li:last-child a {
		border-bottom: 0;
	}

	/* An open menu always gets the solid bar. */
	.k-nav.is-open {
		background: var(--k-paper);
		border-bottom-color: var(--k-line);
		color: var(--k-ink);
		text-shadow: none;
	}

	.k-nav__toggle-txt {
		display: none;
	}
}

@media (max-width: 380px) {
	.k-nav__brand {
		letter-spacing: 0.1em;
	}
}

/* ---------------------------------------------------------- Itinerary */
/* The day step by step: time on the left, a timeline, then the details. */
.k-itin__list {
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
}

.k-itin__item {
	position: relative;
	display: grid;
	grid-template-columns: 6.5rem 1fr;
	padding-bottom: 2rem;
}

/* The line joining the dots */
.k-itin__item:not(:last-child)::after {
	content: "";
	position: absolute;
	left: calc(6.5rem + 5px);
	top: 1.4rem;
	bottom: 0.35rem;
	width: 1px;
	background: var(--k-sand);
}

.kasal .k-itin__time {
	margin: 0;
	padding-top: 0.2rem;
	padding-right: 0.75rem;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.3;
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
}

.k-itin__what {
	position: relative;
	padding-left: 1.75rem;
}

/* The dot */
.k-itin__what::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.4rem;
	width: 11px;
	height: 11px;
	border: 1.5px solid var(--k-ink);
	border-radius: 50%;
	background: var(--k-paper);
}

.k-itin__title {
	margin: 0 0 0.35rem;
	font: 400 clamp(1.9rem, 7vw, 2.4rem)/1.3 var(--k-font-script);
}

.kasal .k-itin__details {
	margin: 0 0 0.6rem;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--k-ink-soft);
}

.kasal .k-itin__venue {
	margin: 0;
	font-weight: 700;
	font-size: 1.05rem;
}

.kasal .k-itin__address {
	margin: 0.1rem 0 0;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--k-ink-soft);
}

.k-itin__map {
	display: inline-block;
	margin-top: 0.5rem;
	padding: 0.35rem 0;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

@media (max-width: 420px) {
	.k-itin__item {
		grid-template-columns: 5.2rem 1fr;
	}

	.k-itin__item:not(:last-child)::after {
		left: calc(5.2rem + 5px);
	}

	.k-itin__what {
		padding-left: 1.4rem;
	}
}

/* Greeting + "Not you?" live in the top bar, on the right before RSVP. */
.k-has-nav .k-hero {
	margin-top: 0;
}

.kasal .k-nav__hello {
	flex: 0 1 auto;
	min-width: 0;
	margin: 0 0 0 auto;
	overflow: hidden;
	font: 500 1.05rem/1.2 var(--k-font-body);
	letter-spacing: 0.01em;
	text-transform: none;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.k-nav__notyou {
	flex: none;
	min-height: 44px;
	margin-left: -0.75rem;
	padding: 0 0.25rem;
	border: 0;
	background: none;
	color: inherit;
	font: 400 0.9rem/1 var(--k-font-body);
	letter-spacing: 0;
	text-transform: none;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	opacity: 0.85;
	cursor: pointer;
}

.k-nav__notyou:hover {
	opacity: 1;
}

@media (max-width: 1279px) {
	.k-nav__hello { order: 1; }
	.k-nav__notyou { order: 1; margin-left: -0.25rem; }
}

/* Phones: the greeting takes the monogram's place. */
@media (max-width: 599px) {
	.k-nav__brand {
		display: none;
	}

	.kasal .k-nav__hello {
		margin-left: 0;
		margin-right: auto;
		font-size: 1rem;
	}

	.k-nav__notyou {
		font-size: 0.8rem;
	}
}

/* ------------------------------------------- Gayak at Kulay: 2 screens */
/* Screen 1 = dress code; screen 2 = entourage and guest palettes side by side. */
.k-palettes {
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 900px) {
	.k-section.k-dress--palettes {
		max-width: min(78rem, 94vw);
	}

	.k-palettes {
		grid-template-columns: 1fr 1fr;
		gap: 4rem;
		align-items: start;
	}

	/* A divider line between the two halves */
	.k-palettes .k-palette + .k-palette {
		position: relative;
	}

	.k-palettes .k-palette + .k-palette::before {
		content: "";
		position: absolute;
		left: -2rem;
		top: 0;
		bottom: 0;
		width: 1px;
		background: var(--k-line);
	}

	.k-palettes .k-palette .k-swatches {
		grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
		gap: 1.25rem 1rem;
	}

	.k-palettes .k-palette .k-swatch__chip {
		width: 3.25rem;
		height: 3.25rem;
	}

	/* Each half is already a column: Ginoo then Binibini, one after the other. */
	.k-palettes .k-attire {
		columns: auto;
	}
}

/* Envelope: the guest's name, big enough to spot right away. */
.k-env .k-env__to {
	font-size: clamp(1.15rem, 4.5vw, 1.5rem);
	letter-spacing: 0.18em;
	color: var(--k-ink);
}

/* "Mga Larawan" heading over the photo collage */
.k-gallery .k-gallery__h {
	margin-bottom: 1.5rem;
	text-align: center;
	transform: rotate(-1deg);
	transform-origin: center;
}

/* RSVP answer on the invitation: just the answer, big. */
.k-answered .k-answered__big {
	display: block;
	margin: 0 0 0.5rem;
	font: 400 clamp(2rem, 8vw, 2.75rem)/1.25 var(--k-font-script);
	color: var(--k-ink);
}

.k-answered .k-answered__big.is-yes {
	color: var(--k-ok);
}

.k-answered__people {
	margin: 0 0 0.5rem;
	padding: 0;
	list-style: none;
}

.k-answered__people li {
	padding: 0.4rem 0;
}

.k-answered__people .k-answered__name {
	display: block;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--k-ink-soft);
}

.k-answered__people .k-answered__big {
	margin: 0;
	font-size: clamp(1.7rem, 6.5vw, 2.2rem);
}

.k-hero .k-answered {
	max-width: 32rem;
}

/* -------------------------------------------- Invitation footer: photo | details */
.k-foot.k-foot--photo,
.k-foot {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	padding: 0;
	margin-top: 3rem;
	border-top: 1px solid var(--k-line);
	background: var(--k-beige);
	letter-spacing: normal;
	color: var(--k-ink);
	font-size: 1rem;
}

.k-foot__pic {
	position: relative;
	min-height: 18rem;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.kasal .k-foot__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 35%;
}

.k-foot__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 3rem var(--k-gutter) calc(3rem + env(safe-area-inset-bottom));
	text-align: center;
}

.kasal .k-foot__names {
	margin: 0;
	font: 400 clamp(2.6rem, 10vw, 4rem)/1.2 var(--k-font-names);
	white-space: nowrap;
}

.kasal .k-foot__date {
	margin: 0.25rem 0 2rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	color: var(--k-ink-soft);
}

.k-foot__h {
	margin: 0 0 0.75rem;
	font: 700 0.8rem/1.4 var(--k-font-body);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--k-ink-soft);
}

.k-foot__contacts {
	display: grid;
	gap: 0.6rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.k-foot__contacts li {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.15rem 0.6rem;
	font-size: 1.1rem;
}

.k-foot__who {
	font-weight: 700;
}

.k-foot__how {
	color: var(--k-ink);
}

.kasal .k-foot__privacy {
	margin: 0;
	font-size: 0.9rem;
	color: var(--k-ink-soft);
}

/* The page-wide privacy link is already in this footer. */
.k-has-nav .k-sitefoot {
	display: none;
}

@media (min-width: 760px) {
	.k-foot.k-foot--photo {
		grid-template-columns: 1fr 1fr;
		min-height: 30rem;
	}

	.k-foot__pic {
		aspect-ratio: auto;
		min-height: 100%;
	}
}

/* ------------------------------------- Full-width photo after the events */
.k-band {
	position: relative;
	height: 50svh;
	min-height: 16rem;
	margin: 0;
	overflow: hidden;
	background: var(--k-beige);
}

.kasal .k-band__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 40%;
}

/* ---------------------------- Merienda + Handaan: one screen, half each */
@media (min-width: 760px) {
	.k-event-pair {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.k-event.k-screen.k-event--half,
	.k-event.k-screen.k-event--half.k-event--alt {
		align-items: center;
		padding-left: max(1.5rem, 3vw);
		padding-right: max(1.5rem, 3vw);
	}

	/* A hairline between the two halves */
	.k-event-pair .k-event--half + .k-event--half {
		border-left: 1px solid var(--k-line);
	}

	.k-event.k-screen.k-event--half .k-event__body {
		max-width: 24rem;
	}
}

/* ---------------------------------- Full-width panels, no side column */
/* The barong openwork column beside each panel is switched off everywhere. */
.k-panel::before {
	display: none;
}

.k-panel,
.k-section.k-panel {
	padding-left: var(--k-gutter);
}

/* Invitation screens use the whole width, with just a small edge margin. */
.k-section.k-screen:not(.k-event),
.k-section.k-dress--palettes {
	max-width: none;
	padding-left: clamp(1.25rem, 4vw, 4rem);
	padding-right: clamp(1.25rem, 4vw, 4rem);
}

.k-dress > .k-prose,
.k-story > .k-prose {
	max-width: none;
}

/* ------------------------------ Mga Abay: one screen, two halves + centre line */
.k-ent-halves {
	display: grid;
	gap: 2.5rem;
}

/* Phones: the halves stack, a short line between them. */
.k-ent-halves--two .k-ent-half + .k-ent-half {
	padding-top: 2.5rem;
	border-top: 1px solid var(--k-line);
}

@media (min-width: 900px) {
	.k-ent-halves--two {
		grid-template-columns: 1fr 1fr;
		gap: 0;
		align-items: start;
	}

	.k-ent-halves--two .k-ent-half {
		padding: 0 clamp(1.5rem, 3vw, 3.5rem);
	}

	/* The line down the centre */
	.k-ent-halves--two .k-ent-half + .k-ent-half {
		padding-top: 0;
		border-top: 0;
		border-left: 1px solid var(--k-sand);
	}

	/* Names sit closer together inside a half. */
	.k-ent-halves--two .k-ent--pair,
	.k-ent-halves--two .k-ent__rows {
		column-gap: clamp(1.25rem, 3vw, 3rem);
	}

	.k-ent-halves--two .k-ent {
		margin-bottom: 1.75rem;
	}

	.k-ent-halves--two .k-ent p {
		font-size: 1.02rem;
	}
}