/* ==========================================================================
   The Foskey Wedding — sections: hero, countdown, story, events (part 1)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section shell
   -------------------------------------------------------------------------- */

.fw-section { padding: 6.5rem 1.5rem; border-top: 1px solid var(--fw-line); }
.fw-section-inner { max-width: var(--fw-max); margin: 0 auto; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.fw-hero {
	position: relative;
	min-height: 100vh;
	display: flex; align-items: center; justify-content: center;
	background-position: center; background-size: cover; background-color: var(--fw-paper);
	padding: calc( var(--fw-header-h) + 2rem ) 1.5rem 4rem;
	text-align: center;
}
.fw-hero-veil {
	position: absolute; inset: 0;
	background:
		radial-gradient( 120% 90% at 50% 10%, rgba( 8, 8, 10, 0 ) 30%, rgba( 8, 8, 10, 0.55 ) 100% ),
		linear-gradient( 180deg, rgba( 8, 8, 10, 0.35 ), rgba( 8, 8, 10, 0.15 ) 40%, rgba( 8, 8, 10, 0.55 ) );
}
.fw-hero-inner { position: relative; max-width: 62rem; }
.fw-hero .fw-kicker { color: rgba( 226, 226, 223, 0.72 ); }

.fw-hero-names {
	font-family: var(--font-script);
	font-weight: 400;
	font-size: clamp( 3.4rem, 9vw, 6.8rem );
	line-height: 1.05;
	color: var(--fw-ink-strong);
	margin: 0;
	display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 0 1.2rem;
}
.fw-hero-amp {
	font-family: var(--font-display);
	font-style: italic;
	font-size: clamp( 1.8rem, 4vw, 3rem );
	color: var(--fw-accent);
	transform: translateY( -1.2em );
}
.fw-hero-rule { color: var(--fw-accent); letter-spacing: 0.5em; margin: 1.6rem 0 1rem; font-size: 0.8rem; }
.fw-hero-date {
	font-family: var(--font-display);
	font-size: clamp( 1.15rem, 2.4vw, 1.6rem );
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--fw-ink-strong);
	margin: 0 0 0.5rem;
}
.fw-hero-location { color: var(--fw-ink); margin: 0 0 2.4rem; font-size: 1.05rem; }
.fw-hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Countdown
   -------------------------------------------------------------------------- */

.fw-section-countdown { text-align: center; }
.fw-countdown {
	display: flex; justify-content: center; gap: clamp( 1rem, 4vw, 3rem );
	margin: 2.5rem 0 1rem; flex-wrap: wrap;
}
.fw-count-unit { min-width: 5.2rem; }
.fw-count-num {
	display: block;
	font-family: var(--font-display);
	font-size: clamp( 2.6rem, 6vw, 4.4rem );
	line-height: 1;
	color: var(--fw-ink-strong);
	font-variant-numeric: tabular-nums;
}
.fw-count-label {
	margin-top: 0.55rem;
	font-size: 0.66rem; letter-spacing: 0.32em; text-transform: uppercase;
	color: var(--fw-muted);
}
.fw-count-done { color: var(--fw-muted); font-style: italic; margin-top: 1rem; }

/* --------------------------------------------------------------------------
   Story
   -------------------------------------------------------------------------- */

.fw-section-story .fw-heading { text-align: center; }
.fw-section-story .fw-kicker { text-align: center; }
.fw-story-grid {
	display: grid; grid-template-columns: minmax( 260px, 34rem ) minmax( 0, 42rem );
	gap: clamp( 2rem, 5vw, 4.5rem );
	align-items: center; justify-content: center;
	margin-top: 2rem;
}
.fw-story-figure { margin: 0; }
.fw-story-figure img { width: 100%; border: 1px solid var(--fw-line); padding: 0.55rem; background: var(--fw-surface); }

/* --------------------------------------------------------------------------
   Events — timeline
   -------------------------------------------------------------------------- */

.fw-section-events .fw-heading, .fw-section-events .fw-kicker { text-align: center; }
.fw-timeline {
	list-style: none; margin: 3rem auto 0; padding: 0;
	position: relative; max-width: 46rem;
}
.fw-timeline::before {
	content: ""; position: absolute; top: 0; bottom: 0; left: 13px;
	border-left: 1px solid var(--fw-line);
}
.fw-event { position: relative; padding: 0 0 2.6rem 3.2rem; margin: 0; }
.fw-event:last-child { padding-bottom: 0.5rem; }
.fw-event-dot {
	position: absolute; top: 0.4rem; left: 6px;
	width: 15px; height: 15px;
	background: var(--fw-paper);
	border: 1px solid var(--fw-accent);
	transform: rotate( 45deg );
}
.fw-event-card {
	background: var(--fw-surface);
	border: 1px solid var(--fw-line);
	padding: 1.6rem 1.8rem;
}
.fw-event-title { font-family: var(--font-display); font-weight: 400; color: var(--fw-ink-strong); margin: 0 0 0.4rem; font-size: 1.45rem; }
.fw-event-when { font-size: 0.74rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--fw-accent); margin: 0 0 0.3rem; }
.fw-event-venue { margin: 0 0 0.2rem; color: var(--fw-ink-strong); }
.fw-event-address, .fw-event-dress { color: var(--fw-muted); font-size: 0.95rem; margin: 0.15rem 0; }
.fw-event-desc { margin-top: 0.7rem; }
.fw-event-desc p { margin: 0 0 0.5rem; }

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */

.fw-section-gallery .fw-heading, .fw-section-gallery .fw-kicker { text-align: center; }
.fw-gallery {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat( 4, 1fr ); gap: 1.1rem;
}
.fw-gallery-item { position: relative; margin: 0; }
.fw-gallery-trigger {
	position: relative; display: block; width: 100%; padding: 0;
	background: none; border: 1px solid var(--fw-line); cursor: zoom-in;
	overflow: hidden; aspect-ratio: 4 / 3;
}
.fw-gallery-trigger img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease), filter 0.6s var(--ease); filter: grayscale( 12% ); }
.fw-gallery-trigger:hover img, .fw-gallery-trigger:focus-visible img { transform: scale( 1.04 ); filter: none; }
.fw-play { position: absolute; }
.fw-gallery-caption {
	display: block; text-align: center;
	font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--fw-muted); margin-top: 0.55rem;
}
.fw-item-video .fw-gallery-trigger { background: var(--fw-surface); }

/* --------------------------------------------------------------------------
   Registry
   -------------------------------------------------------------------------- */

.fw-section-registry .fw-heading, .fw-section-registry .fw-kicker { text-align: center; }
.fw-registry-intro { text-align: center; margin: 0 auto; }

/* --------------------------------------------------------------------------
   FAQ accordion
   -------------------------------------------------------------------------- */

.fw-section-faq .fw-heading, .fw-section-faq .fw-kicker { text-align: center; }
.fw-faq-list { max-width: 46rem; margin: 0 auto; border-top: 1px solid var(--fw-line); }
.fw-faq-item { border-bottom: 1px solid var(--fw-line); }
.fw-faq-item summary {
	cursor: pointer; list-style: none;
	display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
	padding: 1.3rem 0.4rem;
	font-family: var(--font-display);
	font-size: 1.22rem; color: var(--fw-ink-strong);
}
.fw-faq-item summary::-webkit-details-marker { display: none; }
.fw-faq-sign { position: relative; flex: 0 0 14px; height: 14px; }
.fw-faq-sign::before, .fw-faq-sign::after {
	content: ""; position: absolute; background: var(--fw-accent);
	transition: transform 0.3s var(--ease);
}
.fw-faq-sign::before { top: 50%; left: 0; right: 0; height: 1px; }
.fw-faq-sign::after  { left: 50%; top: 0; bottom: 0; width: 1px; }
.fw-faq-item[open] .fw-faq-sign::after { transform: scaleY( 0 ); }
.fw-faq-item .fw-prose { max-width: none; padding: 0 0.4rem 1.4rem; }

/* --------------------------------------------------------------------------
   RSVP & Contact
   -------------------------------------------------------------------------- */

.fw-section-rsvp .fw-heading, .fw-section-rsvp .fw-kicker,
.fw-section-contact .fw-heading, .fw-section-contact .fw-kicker { text-align: center; }

/* --------------------------------------------------------------------------
   Finishing touches
   -------------------------------------------------------------------------- */

.fw-section-countdown { background: var(--fw-surface); }
.fw-hero .fw-btn { min-width: 12rem; }
::selection { background: var(--fw-accent); color: #141518; }