:root {
  --ivory: #f2eadb;
  --paper: #fbf5e9;
  --wine: #292b20;
  --olive: #414831;
  --champagne: #d8b87d;
  --cinema-black: #171c15;
  --cinema-olive: #222a1e;
  --cinema-copy: #ddd3c2;
  --cinema-line: #d8b87d4d;
}

.hero {
  min-height: max(740px, 100svh);
  background: #20261d;
}

.hero::before {
  border-color: #f2eadb59;
  pointer-events: none;
}

.hero-botanical {
  display: none;
}

.hero-photo {
  inset: 0 0 0 auto;
  width: 75%;
  mask-image: none;
  -webkit-mask-image: none;
}

.hero-photo img {
  object-position: center 58%;
  filter: saturate(.78) sepia(.13) brightness(.94);
}

.hero-photo::before {
  display: none;
}

.hero-photo::after {
  background: linear-gradient(90deg, #20261d, #20261db3 22%, transparent 57%),
              linear-gradient(0deg, #20261d 0%, transparent 30%);
}

.hero-content {
  width: min(660px, 56%);
  padding: 130px clamp(36px, 7vw, 110px) 110px;
}

.hero h1 {
  color: var(--paper);
  font-size: clamp(82px, 11vw, 156px);
  line-height: .78;
}

.hero h1 em {
  color: var(--champagne);
}

.hero .eyebrow,
.hero .date-lockup,
.hero .hero-time,
.hero .scroll-cue {
  color: var(--champagne);
}

.hero .invitation-line {
  color: var(--paper);
}

.hero .nav {
  background: #20261dd9;
  border-color: #d8b87d52;
}

.hero .nav a,
.hero .music-toggle {
  color: var(--paper);
}

.hero .scroll-cue {
  left: clamp(90px, 14vw, 220px);
}

.welcome-gate {
  background: #20261d;
}

.welcome-gate-photo {
  background-image: linear-gradient(#141a1170, #141a11df), url('assets/wedding-gallery-3.jpg');
}

.welcome-gate-card {
  background: #20261dde;
  border-color: #d8b87d87;
}

.countdown-section {
  padding: clamp(64px, 10vw, 112px) 18px;
  background: radial-gradient(ellipse at top, #3a4330, #1c231a 75%);
  border-block: 1px solid #d8b87d80;
}

.countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(6px, 2vw, 20px);
  max-width: 600px;
  margin: auto;
}

.countdown div {
  min-width: 0;
  padding: clamp(12px, 3vw, 26px) 2px;
  border: 1px solid #d8b87d66;
  background: #f2eadb0a;
}

.countdown strong { color: var(--champagne); }
.countdown span { color: var(--paper); }

/* Carry the hero's palette through the rest of the invitation. */
body {
  color: var(--paper);
  background: var(--cinema-black);
}

main > .section {
  border-top: 1px solid var(--cinema-line);
}

.story,
.gallery {
  background: radial-gradient(ellipse at top, #30392a, var(--cinema-black) 75%);
}

.details,
.entourage {
  background: var(--cinema-black);
}

.dress-code {
  background: var(--cinema-olive);
}

.section .kicker,
.section .line-icon,
.section .text-link,
.section .asset-note,
.section .photo-caption {
  color: var(--champagne);
}

.section-heading h2,
.story-copy h2,
.dress-copy h2,
.venue-card h3,
.burgundy-card h3,
.attire-card strong {
  color: var(--paper);
}

.story-copy > p:not(.kicker),
.dress-copy > p:not(.kicker),
.venue-card p:not(.kicker),
.burgundy-card p:not(.kicker),
.attire-card small,
.palette span {
  color: var(--cinema-copy);
}

.story-copy > p.story-ending {
  color: var(--champagne) !important;
}

.story-visual {
  min-width: 0;
}

.photo-frame {
  background: #252c21;
  border-color: var(--cinema-line);
  box-shadow: 12px 14px 0 #d8b87d13;
}

.venue-grid {
  gap: 16px;
}

.venue-card,
.burgundy-card {
  min-height: 340px;
  padding: clamp(30px, 5vw, 58px) 22px;
  background: linear-gradient(155deg, #333d2c, #22291f);
  border: 1px solid var(--cinema-line);
}

.text-link {
  align-self: center;
  padding: .65rem 1rem;
  border: 1px solid var(--cinema-line);
  text-decoration: none;
  text-underline-offset: 4px;
}

.text-link:hover {
  text-decoration: underline;
  background: #d8b87d15;
}

.attire-card {
  min-width: 0;
  background: radial-gradient(ellipse at top, #3b4634, var(--cinema-black));
  border-color: var(--cinema-line);
}

.attire-figure {
  flex-shrink: 0;
}

.woman::after { background: #b07683; }
.man::after { background: #79866d; }

.gallery-photo::after {
  background: none;
  box-shadow: inset 0 0 0 1px var(--cinema-line);
}

footer {
  background: #121610;
  color: var(--cinema-copy);
  border-top: 1px solid var(--cinema-line);
}

:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: 4px;
}

@media (max-width: 520px) {
  main > .section { padding-block: 70px; }
  .section-heading { margin-bottom: 36px; }
  .attire-card { padding-inline: 8px; }
  .attire-figure { width: clamp(62px, 21vw, 92px); }
  .woman::after { width: min(110px, 26vw); }
  .man::after { width: min(95px, 24vw); }
}

@media (max-width: 820px) {
  .hero { min-height: max(740px, 100svh); }
  .hero-photo { inset: 0 0 auto; width: 100%; height: 68%; }
  .hero-photo img { object-position: center 58%; }
  .hero-photo::after {
    background: linear-gradient(180deg, #20261d99 0%, transparent 31%, transparent 50%, #20261d 100%);
  }
  .hero-content {
    width: 100%;
    min-width: 0;
    margin-top: clamp(320px, 43vh, 430px);
    padding: 36px 24px 88px;
    align-items: center;
    text-align: center;
  }
  .hero h1 { font-size: clamp(54px, 13vw, 92px); line-height: .95; }
  .hero h1 span { display: inline; }
  .hero h1 em { position: static; margin: 0 .06em; }
  .hero .scroll-cue { left: 50%; }
}