/* ==========================================================================
   Ricarda & Matthäus – 25.09.2026
   One-pager, save-the-date look: flat deep-blue background, warm white ink,
   Homemade Apple (sparse, handwritten accents) + Cormorant Garamond (copy).
   ========================================================================== */

:root {
  --color-bg: #001bb7;
  --color-fg: #fffdec;
  --color-fg-dim: rgba(255, 253, 236, 0.72);
  --color-fg-faint: rgba(255, 253, 236, 0.4);
  --color-line: rgba(255, 253, 236, 0.35);

  --font-hand: "Homemade Apple", cursive;
  /* Copy font lives behind a variable on purpose -- easy to swap later
     without touching every rule that sets type. */
  --font-copy: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-reveal: 1s;
  --duration-line: 1.1s;

  --nav-height: 56px;
  --container-width: 620px;
  --space-section: clamp(4rem, 10vw, 7rem);
}

/* ---------- Reset ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-height) + 12px);
}

/* Snap only for mouse/trackpad devices: the hero (sole snap point) gently
   locks the first viewport on desktop. On touch devices any snap point makes
   flick-scrolling feel sticky, so phones/tablets scroll completely free. */
@media (hover: hover) and (pointer: fine) {
  html {
    scroll-snap-type: y proximity;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-copy);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.7;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

strong {
  font-weight: 700;
}

/* ---------- Utilities ---------- */

.hand {
  font-family: var(--font-hand);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--color-fg);
  color: var(--color-bg);
  text-decoration: none;
  font-family: var(--font-copy);
  transition: top 0.2s var(--ease);
}

.skip-link:focus {
  top: 1rem;
}

/* ---------- Layout ---------- */

/* .section is now the FULL-WIDTH positioning context (needed so decorative
   icons can be placed in the side whitespace next to the narrow column, via
   left/right: calc(50% ± ...) -- see "Decorative background icons" below).
   The actual narrow, centered content lives in .section__content. */
.section {
  position: relative;
  width: 100%;
  padding: var(--space-section) 0;
  text-align: center;
}

.section__content {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section__heading {
  font-size: clamp(1.5rem, 4vw, 1.9rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 2.25rem;
}

.section__lead {
  color: var(--color-fg-dim);
  margin-bottom: 2rem;
}

.section__note {
  margin-top: 2.5rem;
  font-size: 0.95rem;
  color: var(--color-fg-dim);
  font-style: italic;
}

/* ---------- Nav ---------- */
/* Fixed + fully transparent so it never reads as its own surface, and kept
   out of the layout flow entirely. It stays invisible for the whole first
   viewport (the hero) and only fades in once the hero has scrolled past
   (see js/main.js, IntersectionObserver on .hero). */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}

.nav.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.nav__list {
  display: flex;
  gap: clamp(0.9rem, 4vw, 2.2rem);
  align-items: center;
}

.nav__list a {
  display: inline-block;
  padding: 0.5rem 0.1rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  color: var(--color-fg-dim);
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.nav__list a:hover,
.nav__list a:focus-visible {
  color: var(--color-fg);
  border-bottom-color: var(--color-fg);
}

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

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.5rem 4rem;
  gap: 0.4rem;
  /* The hero is the ONLY snap point on the page: leaving or returning to the
     top gently locks to the full first viewport, everything below scrolls
     freely (per feedback -- snapping mid-page felt wrong). */
  scroll-snap-align: start;
}

.hero__glasses {
  position: relative;
  width: min(72vw, 340px);
  aspect-ratio: 957.39 / 958.81;
  color: var(--color-fg);
  margin: 0 auto 1.5rem;
  /* Click/tap plays the "Prost" easter egg (see js/main.js) -- intentionally
     unlabeled, no visible affordance beyond the pointer cursor. */
  cursor: pointer;
}

/* No local overflow:hidden here on purpose: with the tightly-cropped
   viewBox, the glasses may legitimately paint slightly outside this box
   during the entrance slide and the clink tilt -- clipping locally cut off
   the sparkle marks. The flat single-color background means that's visually
   harmless, and body's global overflow-x:hidden is still the safety net
   against any actual page-level horizontal scroll. */
.hero__glasses-clip {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Two SEPARATE artwork pieces (real subpath split -- the two champagne
   flutes never overlap the horizontal midline in the source icon, so no
   clip-path halving is needed). Both share the same viewBox/frame, so at
   rest (translateX: 0) they line up exactly as in the original illustration.
   The entrance slide (translateX) lives on the outer "slot"; the independent
   clink tilt (rotate) lives on the inner "tilt" wrapper, so the two
   transforms never fight over the same element. */

.hero__glass-slot {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.hero__glass-slot--left {
  transform: translateX(-34%);
}

.hero__glass-slot--right {
  transform: translateX(34%);
}

.hero__glass-tilt {
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
  transition: transform 0.5s var(--ease);
}

.hero__glass-tilt--clink-left {
  transform: rotate(6deg);
}

.hero__glass-tilt--clink-right {
  transform: rotate(-6deg);
}

.hero__glass-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.hero__sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__spark {
  position: absolute;
  left: 50%;
  /* Roughly where the two flutes' rims touch in the new illustration. */
  top: 17%;
  width: var(--size, 6px);
  height: var(--size, 6px);
  background: var(--color-fg);
  opacity: 0;
  pointer-events: none;
  animation: spark-rise var(--duration, 1s) var(--ease) forwards;
}

@keyframes spark-rise {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(45deg) scale(0.5);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% - var(--rise, 90px)))
      rotate(calc(45deg + var(--rot, 30deg))) scale(1);
  }
}

.hero__cheers {
  position: absolute;
  left: 50%;
  top: -2.2rem;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-hand);
  font-size: clamp(1.25rem, 4.5vw, 1.6rem);
  color: var(--color-fg);
  opacity: 0;
  pointer-events: none;
}

.hero__cheers.is-active {
  animation: cheers-fade 2s var(--ease) forwards;
}

/* Reduced-motion path: a plain, timed opacity toggle instead of the animated
   fade -- driven by js/main.js with a real setTimeout so it isn't crushed by
   the blanket animation-duration override below. */
.hero__cheers.is-static {
  opacity: 1;
}

@keyframes cheers-fade {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.hero__eyebrow {
  font-family: var(--font-hand);
  font-size: clamp(1.7rem, 6vw, 2.2rem);
  line-height: 1;
  opacity: 0;
  transform: translateY(16px);
}

.hero__names {
  font-family: var(--font-hand);
  font-size: clamp(2.6rem, 11vw, 4.2rem);
  font-weight: 400;
  line-height: 1.15;
  margin: 0.35rem 0;
  opacity: 0;
  transform: translateY(18px);
}

.hero__amp {
  padding: 0 0.15em;
  opacity: 0.85;
}

.hero__meta {
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-fg-dim);
  opacity: 0;
  transform: translateY(14px);
}

.hero__scroll {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-fg-dim);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.3s var(--ease), color 0.2s var(--ease);
  animation: hero-bob 2.6s var(--ease) infinite;
}

.hero__scroll-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.hero__scroll-arrow {
  font-size: 1.1rem;
}

.hero__scroll:hover,
.hero__scroll:focus-visible {
  color: var(--color-fg);
}

@keyframes hero-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

/* Hero opening sequence -- orchestrated via animation-delay, triggered once
   by adding .hero--play on <body> (see js/main.js). */

.hero--play .hero__glass-slot--left {
  animation: glass-in-left 1.2s var(--ease) 0.05s forwards;
}

.hero--play .hero__glass-slot--right {
  animation: glass-in-right 1.2s var(--ease) 0.05s forwards;
}

.hero--play .hero__eyebrow {
  animation: rise-in var(--duration-reveal) var(--ease) 1.35s forwards;
}

.hero--play .hero__names {
  animation: rise-in var(--duration-reveal) var(--ease) 1.85s forwards;
}

.hero--play .hero__meta {
  animation: rise-in var(--duration-reveal) var(--ease) 2.35s forwards;
}

.hero--play .hero__scroll {
  animation: hero-bob 2.6s var(--ease) 3.4s infinite,
    fade-in 0.6s var(--ease) 3.2s forwards;
}

@keyframes glass-in-left {
  from {
    opacity: 0;
    transform: translateX(-34%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes glass-in-right {
  from {
    opacity: 0;
    transform: translateX(34%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ---------- Divider ---------- */

.divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 2.5rem;
}

.divider__line {
  flex: 1;
  height: 1px;
  background: var(--color-line);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--duration-line) var(--ease);
}

.divider__diamond {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--color-line);
  transform: rotate(45deg) scale(0);
  transition: transform 0.4s var(--ease) 0.75s;
}

.divider__diamond--start {
  left: 2.5rem;
}

.divider__diamond--end {
  right: 2.5rem;
}

.divider.is-visible .divider__line {
  transform: scaleX(1);
}

.divider.is-visible .divider__diamond {
  transform: rotate(45deg) scale(1);
}

/* ---------- Scroll reveals ---------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-reveal) var(--ease),
    transform var(--duration-reveal) var(--ease);
  transition-delay: calc(var(--stagger, 0) * 90ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Welcome (Hero -> Ablauf bridge) ---------- */

.welcome__text {
  font-size: clamp(1.05rem, 3vw, 1.25rem);
  max-width: 42ch;
  margin: 0 auto;
}

/* ---------- Timeline (Ablauf) ---------- */

.timeline {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  text-align: left;
}

.timeline__item {
  padding-left: 1.1rem;
  border-left: 1px solid var(--color-line);
}

.timeline__time {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-fg-dim);
  margin-bottom: 0.2rem;
}

.timeline__title {
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.timeline__place {
  display: inline-block;
  font-size: 0.95rem;
  color: var(--color-fg-dim);
  text-decoration: underline;
  text-decoration-color: var(--color-fg-faint);
  text-underline-offset: 3px;
}

.timeline__place:hover,
.timeline__place:focus-visible {
  color: var(--color-fg);
  text-decoration-color: var(--color-fg);
}

/* ---------- Parking ---------- */

.parking {
  text-align: left;
  margin-bottom: 1.75rem;
}

.parking:last-of-type {
  margin-bottom: 0;
}

.parking__label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-fg-dim);
  margin-bottom: 0.3rem;
}

.parking a {
  text-decoration: underline;
  text-decoration-color: var(--color-fg-faint);
  text-underline-offset: 3px;
}

.parking a:hover,
.parking a:focus-visible {
  text-decoration-color: var(--color-fg);
}

/* ---------- Menu ---------- */

.menu-course {
  text-align: left;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(255, 253, 236, 0.16);
}

.menu-course:first-of-type {
  border-top: none;
}

.menu-course__label {
  display: block;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-fg-dim);
  margin-bottom: 0.75rem;
}

.menu-course__options {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.menu-course__options strong,
.menu-course p strong {
  font-weight: 700;
}

.menu-kids-note {
  margin-top: 2rem;
  font-size: 0.95rem;
  color: var(--color-fg-dim);
  font-style: italic;
}

/* ---------- RSVP form ---------- */

.rsvp {
  margin-top: 3rem;
  text-align: left;
  border-top: 1px solid rgba(255, 253, 236, 0.16);
  padding-top: 2.5rem;
}

.rsvp__intro {
  text-align: center;
}

.rsvp__deadline {
  margin-bottom: 1.25rem;
  font-size: 1rem;
}

.rsvp__intro .rsvp__deadline {
  text-align: center;
}

.rsvp__form .rsvp__deadline {
  text-align: left;
}

.persons {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.person {
  border: 1px solid rgba(255, 253, 236, 0.22);
  border-radius: 6px;
  padding: 1.25rem;
  margin: 0;
}

.person__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.person__legend {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-fg-dim);
  padding: 0;
}

.person__remove {
  background: none;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.person__remove:hover,
.person__remove:focus-visible {
  border-color: var(--color-fg);
}

.person__remove[hidden] {
  display: none;
}

.field {
  display: block;
  margin-bottom: 1.1rem;
}

.field__label {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
  color: var(--color-fg-dim);
}

.field__optional {
  font-style: italic;
  opacity: 0.8;
}

.field__input {
  width: 100%;
  padding: 0.7rem 0.8rem;
  background: rgba(255, 253, 236, 0.06);
  border: 1px solid var(--color-line);
  border-radius: 4px;
  color: var(--color-fg);
  font-family: var(--font-copy);
  font-size: 1.05rem;
  min-height: 44px;
}

.field__input:focus-visible {
  outline: 2px solid var(--color-fg);
  outline-offset: 1px;
}

.field-group {
  border: none;
  padding: 0;
  margin: 0 0 1.1rem;
}

.field-group legend {
  padding: 0;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  color: var(--color-fg-dim);
}

.radio {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.55rem 0.1rem;
  min-height: 44px;
  cursor: pointer;
  line-height: 1.4;
}

.radio input {
  margin-top: 0.2rem;
  width: 1.1rem;
  height: 1.1rem;
  min-width: 18px;
  min-height: 18px;
  accent-color: var(--color-fg);
}

.person__conditional[hidden],
.person__adult-fields[hidden],
.person__child-note[hidden] {
  display: none;
}

.person__error {
  margin-top: 0.75rem;
  font-size: 0.88rem;
  color: #ffb4b4;
}

.person__error[hidden] {
  display: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.85rem 1.6rem;
  background: var(--color-fg);
  color: var(--color-bg);
  border: 1px solid var(--color-fg);
  border-radius: 999px;
  font-family: var(--font-copy);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
    opacity 0.25s var(--ease);
}

.btn:hover,
.btn:focus-visible {
  background: transparent;
  color: var(--color-fg);
}

.btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.btn--ghost {
  background: transparent;
  color: var(--color-fg);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--color-fg);
  color: var(--color-bg);
}

.rsvp__form[hidden],
.rsvp__thanks[hidden],
.rsvp__intro[hidden] {
  display: none;
}

#addPersonBtn {
  display: flex;
  width: 100%;
}

.rsvp__privacy {
  margin: 1.5rem 0 1.25rem;
  font-size: 0.86rem;
  color: var(--color-fg-dim);
}

.rsvp__error {
  margin-bottom: 1.25rem;
  font-size: 0.92rem;
  color: #ffb4b4;
}

.rsvp__error[hidden] {
  display: none;
}

#rsvpSubmitBtn {
  width: 100%;
}

.rsvp__thanks {
  text-align: center;
}

.rsvp__thanks-text {
  font-size: clamp(1.6rem, 5vw, 2rem);
  margin-bottom: 1.5rem;
}

/* ---------- Footer ---------- */

/* Same full-width-context / narrow-inner-column split as .section (see
   above) so the wedding-gift icon can live in the side whitespace. */
.footer {
  position: relative;
  width: 100%;
  padding: var(--space-section) 0 calc(var(--space-section) + 1rem);
  text-align: center;
}

.footer__content {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.footer__gift {
  font-size: 1rem;
  color: var(--color-fg-dim);
  max-width: 36ch;
  margin: 0 auto 2rem;
}

.footer__signature {
  font-size: 1.6rem;
}

.footer__meta {
  margin-top: 1.25rem;
  font-size: 0.8rem;
  opacity: 0.6;
}

.footer__meta a {
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
}

.footer__meta a:hover,
.footer__meta a:focus-visible {
  opacity: 1;
}

/* ---------- Imprint page ---------- */

.imprint {
  text-align: left;
}

.imprint__heading {
  font-size: clamp(2.2rem, 8vw, 3rem);
  font-weight: 400;
  margin: 1.5rem 0 2.5rem;
}

.imprint__block {
  margin-bottom: 2rem;
}

.imprint__label {
  display: block;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-fg-dim);
  margin-bottom: 0.5rem;
}

.imprint a {
  text-decoration: underline;
  text-decoration-color: var(--color-fg-faint);
  text-underline-offset: 3px;
}

.imprint a:hover,
.imprint a:focus-visible {
  text-decoration-color: var(--color-fg);
}

.imprint__back {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--color-fg-dim);
}

.imprint__back--bottom {
  margin-top: 1rem;
}

/* ---------- Decorative background icons ---------- */
/* One full-color icon per section, in the SIDE WHITESPACE next to the 620px
   content column -- never behind/over text, never clipped.
   Mobile-first default: small, in-flow, centered above the section content
   (no room for side margins yet). Each icon only switches to absolute
   side-margin placement at its OWN breakpoint -- the exact viewport width
   where (content column + icon + gap) provably fits on both sides, so it can
   never appear until there's genuinely room, guaranteeing zero clipping.
   Uses the same IntersectionObserver/.is-visible convention as .reveal. */

.bg-icon {
  display: block;
  margin: 0 auto 1.5rem;
  width: clamp(72px, 24vw, 120px);
  color: var(--color-fg);
  pointer-events: none;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}

.bg-icon.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.bg-icon svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Column half-width (310px) + a fixed gap (40px) define the side margin
   math: left icons end 40px before the column's left edge, right icons
   start 40px after the column's right edge. */

@media (min-width: 1100px) {
  .bg-icon--hearts-arrow,
  .bg-icon--wedding-gift {
    position: absolute;
    margin: 0;
    width: 190px;
  }

  .bg-icon--hearts-arrow {
    top: 3rem;
    left: calc(50% - 310px - 40px - 190px);
  }

  .bg-icon--wedding-gift {
    top: 3rem;
    left: calc(50% + 310px + 40px);
  }
}

@media (min-width: 1140px) {
  .bg-icon--cloche {
    position: absolute;
    margin: 0;
    width: 210px;
    top: 2rem;
    left: calc(50% - 310px - 40px - 210px);
  }
}

@media (min-width: 1200px) {
  .bg-icon--doves {
    position: absolute;
    margin: 0;
    width: 240px;
    top: 3rem;
    left: calc(50% + 310px + 40px);
  }
}

/* ---------- Responsive ---------- */

@media (min-width: 640px) {
  body {
    font-size: 19px;
  }

  .nav__list {
    gap: 2.5rem;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .hero__eyebrow,
  .hero__names,
  .hero__meta,
  .hero__scroll,
  .reveal {
    opacity: 1;
    transform: none;
  }

  .hero__glass-slot--left,
  .hero__glass-slot--right {
    opacity: 1;
    transform: none;
  }

  .hero__spark {
    display: none;
  }

  .bg-icon {
    opacity: 1;
    transform: none;
  }

  .divider__line {
    transform: scaleX(1);
  }

  .divider__diamond {
    transform: rotate(45deg) scale(1);
  }
}