/* ==============================================
   twin.css — isaacodoma.com/twin
   Loaded only on the twin announcement page.
   Everything is scoped under .twin so it can't
   affect the rest of the site.
   ============================================== */

.twin {
	--tw-cream:      #FAF6EE;
	--tw-paper:      #FFFDF8;
	--tw-frame:      #F3E8D6;
	--tw-line:       #E8DCC6;
	--tw-ink:        #2E2116;
	--tw-brown:      #5C3D1E;
	--tw-muted:      #6B5A48;
	--tw-amber:      #9E7220;
	--tw-terracotta: #A65428;
	--tw-serif: 'Cormorant Garamond', Georgia, serif;
	--tw-sans:  'Source Sans 3', system-ui, sans-serif;

	background: var(--tw-cream);
	color: var(--tw-ink);
	font-family: var(--tw-sans);
}

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

.twin h1,
.twin h2,
.twin p,
.twin figure,
.twin dl,
.twin dd { margin: 0; }

.twin img { display: block; max-width: 100%; height: auto; }

.twin a { text-decoration: none; }

.twin-wrap {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 24px 80px;
}

/* ── Opening ─────────────────────────────── */

.twin-hero {
	max-width: 820px;
	margin: 0 auto;
	padding: 88px 24px 56px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
}

.twin-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--tw-amber);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.twin-rule {
	width: 28px;
	height: 1px;
	background: var(--tw-terracotta);
}

.twin-title {
	font-family: var(--tw-serif);
	font-weight: 500;
	font-size: clamp(44px, 7vw, 76px);
	line-height: 1.05;
	color: var(--tw-ink);
}

.twin-title em {
	color: var(--tw-terracotta);
	font-weight: 600;
}

.twin-date {
	font-size: 19px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--tw-brown);
}

/* Buttons */
.twin-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	margin-top: 8px;
	padding: 0 28px;
	border-radius: 999px;
	background: var(--tw-terracotta);
	color: #FFF8EE;
	font-size: 17px;
	font-weight: 600;
	box-shadow: 0 6px 18px rgba(166, 84, 40, 0.25);
	transition: transform 0.15s ease, background 0.15s ease;
}

.twin .twin-btn:hover,
.twin .twin-btn:focus-visible {
	background: #8E4520;
	color: #FFF8EE;
	transform: translateY(-1px);
}

.twin-btn--light {
	min-height: 56px;
	margin-top: 0;
	padding: 0 32px;
	background: #FFF8EE;
	color: #7A3A18;
	font-size: 18px;
	box-shadow: none;
}

.twin .twin-btn--light:hover,
.twin .twin-btn--light:focus-visible {
	background: #FFFFFF;
	color: #7A3A18;
}

/* Hero illustration */
.twin-hero-figure {
	width: 100%;
	max-width: 560px;
	margin-top: 24px !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.twin-hero-frame {
	width: 100%;
	padding: 12px;
	background: var(--tw-frame);
	border: 1px solid #E3D3B8;
	border-radius: 28px;
}

.twin-hero-frame img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 18px;
}

.twin-names {
	font-family: var(--tw-serif);
	font-weight: 600;
	font-size: clamp(40px, 6vw, 56px);
	line-height: 1;
	color: var(--tw-ink);
}

.twin-names em {
	color: var(--tw-terracotta);
}

.twin-quote {
	max-width: 560px;
	margin-top: 16px !important;
	font-family: var(--tw-serif);
	font-style: italic;
	font-size: 26px;
	line-height: 1.45;
	color: var(--tw-brown);
}

/* ── Baby cards ──────────────────────────── */

.twin-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 32px;
}

.twin-card {
	background: var(--tw-paper);
	border: 1px solid var(--tw-line);
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.twin-card-img {
	aspect-ratio: 4 / 3;
	background: #FDF3E4;
}

.twin-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.twin-card-body {
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.twin-card-head {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.twin-card-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tw-amber);
}

.twin-card-name {
	font-family: var(--tw-serif);
	font-weight: 600;
	font-size: 48px;
	line-height: 1;
	color: var(--tw-ink);
}

.twin-card-full {
	font-size: 17px;
	color: var(--tw-muted);
}

.twin-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	padding-top: 24px;
	border-top: 1px solid var(--tw-line);
}

.twin-stat {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--tw-brown);
}

.twin-stat svg { flex-shrink: 0; }

.twin-stat dt {
	font-size: 12px;
	color: var(--tw-muted);
}

.twin-stat dd {
	font-size: 18px;
	font-weight: 600;
	color: var(--tw-ink);
}

/* ── Wishlist ────────────────────────────── */

.twin-wishlist {
	background: var(--tw-terracotta);
	color: #FFF8EE;
	border-radius: 24px;
	padding: 48px 40px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
}

.twin-wishlist-text {
	flex: 1 1 380px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.twin-wishlist-eyebrow {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #F5D9B8;
}

.twin-wishlist h2 {
	font-family: var(--tw-serif);
	font-weight: 500;
	font-size: clamp(34px, 4.5vw, 46px);
	line-height: 1.1;
	color: #FFF8EE;
}

.twin-wishlist p {
	max-width: 520px;
	font-size: 17px;
	line-height: 1.6;
	color: #FBEBD8;
}

/* ── Journey photos ──────────────────────── */

.twin-journey {
	background: var(--tw-brown);
	color: var(--tw-cream);
}

.twin-journey-inner {
	max-width: 1120px;
	margin: 0 auto;
	padding: 80px 24px;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.twin-journey-head {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: center;
}

.twin-journey-eyebrow,
.twin-journey figcaption {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #E8C27A;
}

.twin-journey h2 {
	font-family: var(--tw-serif);
	font-weight: 500;
	font-size: clamp(36px, 5vw, 52px);
	color: var(--tw-cream);
}

.twin-journey h2 em { color: #E8C27A; }

.twin-journey-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 20px;
}

.twin-journey figure {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.twin-journey img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 16px;
}

/* ── Closing ─────────────────────────────── */

.twin-closing {
	max-width: 720px;
	margin: 0 auto;
	padding: 96px 24px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.twin-heart { color: var(--tw-terracotta); }

.twin-thanks {
	font-size: 18px;
	line-height: 1.6;
	color: var(--tw-brown);
}

.twin .twin-thanks a {
	color: var(--tw-terracotta);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.twin-signoff {
	font-family: var(--tw-serif);
	font-style: italic;
	font-size: 34px;
	color: var(--tw-ink);
}

/* ── Small screens ───────────────────────── */

@media (max-width: 600px) {
	.twin-hero         { padding-top: 56px; }
	.twin-quote        { font-size: 22px; }
	.twin-card-body    { padding: 24px; }
	.twin-card-name    { font-size: 42px; }
	.twin-wishlist     { padding: 36px 24px; }
	.twin-btn--light   { width: 100%; justify-content: center; }
	.twin-journey-inner{ padding: 56px 24px; }
	.twin-closing      { padding: 72px 24px; }
	.twin-signoff      { font-size: 30px; }
}