/* ==========================================================================
   Alma & Niko · Hochzeit auf Madeira
   Design system: Manrope (self hosted), flat colors, Tailwind type scale,
   fixed spacing tokens, custom cubic beziers, scroll reveals via IntersectionObserver.
   ========================================================================== */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@property --ink     { syntax: "<color>"; inherits: true; initial-value: #1A1915; }
@property --ink-2   { syntax: "<color>"; inherits: true; initial-value: #57524A; }
@property --line    { syntax: "<color>"; inherits: true; initial-value: rgba(26, 25, 21, 0.16); }
@property --sky-bg  { syntax: "<color>"; inherits: true; initial-value: #FBF7F1; }

:root {
  /* spacing tokens */
  --s0: 0;
  --s25: 2px;
  --s50: 4px;
  --s75: 8px;
  --s100: 12px;
  --s200: 16px;
  --s300: 24px;
  --s400: 32px;
  --s500: 40px;
  --s600: 48px;
  --s700: 64px;
  --s800: 80px;
  --s900: 96px;

  /* radius (Tailwind) */
  --r-lg: 8px;
  --r-xl: 12px;
  --r-2xl: 16px;
  --r-3xl: 24px;
  --r-full: 9999px;

  /* motion */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);

  /* color: light ("Tag") */
  --bg: #FBF7F1;
  --bg-2: #F3EAD9;
  --surface: #FFFFFF;
  --ink: #1A1915;
  --ink-2: #57524A;
  --line: rgba(26, 25, 21, 0.16);
  --cobalt: #1F3FA8;
  --coral: #D94A33;
  --orange: #F08A24;
  --sun: #F2BE2F;
  --leaf: #2F6B45;
  --clay: #E6D6BC;
  --accent: #1F3FA8;
  --accent-ink: #FFFFFF;
  --glass: rgba(251, 247, 241, 0.72);
  --scrim: rgba(255, 255, 255, 0.8);
  --h-from: #000000;
  --h-to: #666666;
  --water: #CFE3EC;
  --land: #C7DDB4;
  --shadow: 0 1px 2px rgba(26, 25, 21, 0.04), 0 24px 48px -24px rgba(26, 25, 21, 0.22);
  --sky-bg: var(--bg);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #131209;
  --bg-2: #1F1F1F;
  --surface: #272727;
  --ink: #F6F0E4;
  --ink-2: #B9B2A3;
  --line: rgba(246, 240, 228, 0.18);
  --cobalt: #7C98FF;
  --coral: #FF7C66;
  --orange: #FFA042;
  --sun: #F6CB52;
  --leaf: #6BC08A;
  --clay: #3A352B;
  --accent: #7C98FF;
  --accent-ink: #131209;
  --glass: rgba(19, 18, 9, 0.66);
  --scrim: rgba(0, 0, 0, 0.8);
  --h-from: #FFFFFF;
  --h-to: #9B9B9B;
  --water: #181818;
  --land: #2D3A2B;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 24px 48px -24px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--s900);
  background: var(--bg);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 28px;
  font-weight: 450;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-wrap: pretty;
  overflow-x: clip;
}
body.is-locked { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ol, ul, figure, dl, dd { margin: 0; padding: 0; }
ol, ul { list-style: none; }
em, i, cite, address { font-style: normal; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
b, strong { font-weight: 700; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.ic {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: currentColor;
}

.skip {
  position: fixed;
  top: var(--s200);
  left: var(--s200);
  z-index: 200;
  padding: var(--s75) var(--s200);
  border-radius: var(--r-full);
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 200ms var(--ease-out);
}
.skip:focus { transform: none; }

.wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--s200);
}
@media (min-width: 768px) { .wrap { padding-inline: var(--s400); } }

/* ----- Type ----- */
.eyebrow {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s100);
}
.eyebrow--light { color: #F2BE2F; }

.h2 {
  font-size: 36px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin-bottom: var(--s200);
}
@media (min-width: 768px) { .h2 { font-size: 48px; line-height: 1; } }

.h3 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin-bottom: var(--s75);
}

.lead {
  font-size: 20px;
  line-height: 28px;
  color: var(--ink-2);
  max-width: 680px;
}
.lead + .lead { margin-top: var(--s200); }
.lead b { color: var(--ink); }

.sec-head { max-width: 680px; margin-bottom: var(--s600); }
.sec-note {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
  margin-top: var(--s75);
}
.fineprint {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
  margin-top: var(--s300);
  max-width: 680px;
}

.section { padding-block: var(--s800); position: relative; }
@media (min-width: 768px) { .section { padding-block: var(--s900); } }
.section--alt { background: var(--bg-2); }

.link {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--line);
  transition: text-decoration-color 200ms ease, color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .link:hover { text-decoration-color: var(--accent); color: var(--accent); }
}

/* ----- Buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s75);
  min-height: 44px;
  padding: var(--s75) var(--s100);
  border: 1px solid transparent;
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out), background-color 240ms ease, color 240ms ease, border-color 240ms ease, translate 400ms var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn--sm { font-size: 14px; line-height: 20px; }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--light { background: #FBF7F1; color: #1A1915; }
.btn--outline-light {
  background: transparent;
  color: #FBF7F1;
  border-color: rgba(251, 247, 241, 0.55);
}
.btn .ic { width: 1.125em; height: 1.125em; }
.btn__chip {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-right: calc(var(--s50) * -1);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.2);
  transition: transform 400ms var(--ease);
}
:root[data-theme="dark"] .btn__chip { background: rgba(19, 18, 9, 0.18); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .btn__chip { transform: translateX(2px) rotate(-12deg); }
  .btn:not(.btn--ghost):not(.btn--light):not(.btn--outline-light):hover { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); }
  .btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
  .btn--light:hover { background: #FFFFFF; }
  .btn--outline-light:hover { background: rgba(251, 247, 241, 0.14); }
}
.btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.28);
  transform: translateX(-100%);
  animation: sweep 1.1s var(--ease-io) infinite;
}
@keyframes sweep { to { transform: translateX(100%); } }

/* ----- Intro ----- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  cursor: pointer;
}
.js:not(.no-intro) .intro { display: block; }
.intro__half {
  position: absolute;
  left: 0;
  right: 0;
  height: 50.4%;
  background-color: #1F3FA8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23F4EFE6' stroke-width='1.2' opacity='.55'%3E%3Ccircle cx='32' cy='32' r='20'/%3E%3Ccircle cx='32' cy='32' r='5'/%3E%3Cpath d='M32 6C36 20 44 28 58 32 44 36 36 44 32 58 28 44 20 36 6 32 20 28 28 20 32 6Z'/%3E%3C/g%3E%3Cg fill='%23F4EFE6' opacity='.55'%3E%3Ccircle cx='0' cy='0' r='3'/%3E%3Ccircle cx='64' cy='0' r='3'/%3E%3Ccircle cx='0' cy='64' r='3'/%3E%3Ccircle cx='64' cy='64' r='3'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 64px 64px;
  transition: transform 1100ms var(--ease);
  will-change: transform;
}
.intro__half--t { top: 0; }
.intro__half--b { bottom: 0; background-position: 0 calc(-49.6 * 1svh); }
.intro.is-open .intro__half--t { transform: translateY(-101%); }
.intro.is-open .intro__half--b { transform: translateY(101%); }
.intro__center {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s200);
  color: #FBF7F1;
  text-align: center;
  transition: opacity 500ms var(--ease), transform 500ms var(--ease), filter 500ms var(--ease);
}
.intro__center::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 280px;
  height: 360px;
  translate: -50% -50%;
  border: 1px solid rgba(251, 247, 241, 0.55);
  border-radius: 50% 50% var(--r-3xl) var(--r-3xl) / 38% 38% var(--r-3xl) var(--r-3xl);
  background: #1F3FA8;
  z-index: -1;
  animation: introArch 1100ms var(--ease) both;
}
.intro__names {
  display: grid;
  gap: var(--s50);
  font-size: 60px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
}
.intro__names span { animation: introIn 900ms var(--ease) both; }
.intro__names span:nth-child(2) { animation-delay: 120ms; font-size: 36px; line-height: 40px; color: #F2BE2F; }
.intro__names span:nth-child(3) { animation-delay: 240ms; }
.intro__date {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.85;
  animation: introIn 900ms var(--ease) 420ms both;
}
.intro.is-closing .intro__center { opacity: 0; transform: scale(0.96); filter: blur(8px); }
@keyframes introIn { from { opacity: 0; transform: translateY(24px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes introArch { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }

/* ----- Progress ----- */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 70;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
  display: none;
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .progress { display: block; animation: grow linear both; animation-timeline: scroll(root); }
  }
}
@keyframes grow { to { transform: scaleX(1); } }

/* ----- Fluid island nav ----- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  padding-top: var(--s300);
  pointer-events: none;
}
.nav__pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--s75);
  width: max-content;
  max-width: calc(100% - var(--s400));
  padding: var(--s50);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 8px 32px -12px rgba(26, 25, 21, 0.28);
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s25);
  height: 44px;
  padding-inline: var(--s200) var(--s75);
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.nav__brand span { color: var(--accent); }
.nav__now {
  display: none;
  overflow: hidden;
  min-width: 120px;
  padding-inline: var(--s75);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--ink-2);
  border-left: 1px solid var(--line);
}
.nav__now-text { display: block; padding-left: var(--s75); }
@media (min-width: 640px) { .nav__now { display: block; } }
.nav__toggle {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r-full);
  background: var(--ink);
  color: var(--bg);
  flex: none;
  transition: transform 160ms var(--ease-out);
}
.nav__toggle:active { transform: scale(0.94); }
.nav__toggle span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  margin: -1px 0 0 -9px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 700ms var(--ease);
}
.nav__toggle span:nth-child(1) { transform: translateY(-4px); }
.nav__toggle span:nth-child(2) { transform: translateY(4px); }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { transform: rotate(-45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: grid;
  align-items: center;
  padding: var(--s900) var(--s300) var(--s400);
  background: var(--scrim);
  -webkit-backdrop-filter: blur(64px);
  backdrop-filter: blur(64px);
  opacity: 0;
  visibility: hidden;
  overflow-y: auto;
  transition: opacity 700ms var(--ease), visibility 0s linear 700ms;
}
.menu[data-open] { opacity: 1; visibility: visible; transition-delay: 0s; }
.menu__inner { width: 100%; max-width: 720px; margin-inline: auto; }
.menu__list li, .menu__foot {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.menu[data-open] .menu__list li, .menu[data-open] .menu__foot {
  opacity: 1;
  transform: none;
  transition-delay: calc(100ms + var(--i, 0) * 50ms);
}
.menu__list a {
  display: flex;
  align-items: baseline;
  gap: var(--s100);
  padding-block: var(--s50);
  font-size: 36px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-decoration: none;
  transition: color 240ms ease, translate 400ms var(--ease);
}
@media (min-width: 768px) { .menu__list a { font-size: 48px; line-height: 1; padding-block: var(--s75); } }
.menu__list a small {
  min-width: 24px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink-2);
}
.menu__list a[aria-current="true"] { color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .menu__list a:hover { color: var(--accent); translate: 8px 0; }
}
.menu__foot {
  display: grid;
  gap: var(--s200);
  margin-top: var(--s500);
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-2);
}
.menu__actions { display: flex; flex-wrap: wrap; gap: var(--s75); }

/* ----- Reveal ----- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(64px);
  filter: blur(12px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease), filter 900ms var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.js [data-reveal].in { opacity: 1; transform: none; filter: none; }
[data-delay="1"] { --d: 1; } [data-delay="2"] { --d: 2; } [data-delay="3"] { --d: 3; }
[data-delay="4"] { --d: 4; } [data-delay="5"] { --d: 5; } [data-delay="6"] { --d: 6; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ----- Hero ----- */
.hero {
  position: relative;
  padding-top: var(--s900);
  padding-bottom: var(--s800);
  overflow-x: clip;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "text text" "l r";
  gap: var(--s300) var(--s200);
  align-items: center;
}
@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 680px) minmax(0, 1fr);
    grid-template-areas: "l text r";
    gap: var(--s600);
    padding-top: var(--s300);
  }
}
.hero__text { grid-area: text; text-align: center; margin-inline: auto; width: 100%; max-width: 680px; }
.hero__text .eyebrow { margin-bottom: var(--s200); }
.hero__title {
  width: fit-content;
  margin: 0 auto var(--s300);
  font-size: 72px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.045em;
  background: linear-gradient(90deg, var(--h-from), var(--h-to));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-bottom: var(--s50);
}
.hero__title span { display: block; }
@media (min-width: 768px) { .hero__title { font-size: 96px; } }
@media (min-width: 1100px) { .hero__title { font-size: 128px; } }
.hero__lead {
  max-width: 680px;
  margin: 0 auto var(--s300);
  font-size: 20px;
  line-height: 28px;
  color: var(--ink-2);
}
.hero__lead .br { display: block; }
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s75);
  margin-bottom: var(--s400);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s75);
  padding: var(--s50) var(--s100);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}
.chip .ic { color: var(--accent); width: 1.15em; height: 1.15em; }
.chip--live b { color: var(--accent); font-variant-numeric: tabular-nums; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s300); }

.arch {
  position: relative;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 3 / 4;
  border-radius: 50% 50% var(--r-3xl) var(--r-3xl) / 37.5% 37.5% var(--r-3xl) var(--r-3xl);
  overflow: hidden;
  background: var(--bg-2);
  box-shadow: var(--shadow);
  rotate: calc(var(--rot, 0deg) + var(--tr, 0deg));
  translate: var(--tx, 0px) var(--ty, 0px);
}
.arch__img { width: 100%; height: 100%; object-fit: cover; }
.hero__arch--l { grid-area: l; justify-self: end; }
.hero__arch--r { grid-area: r; justify-self: start; }
@media (min-width: 1024px) {
  .arch { max-width: 280px; }
  .hero__arch--l { justify-self: end; }
}

.hero__wide {
  position: relative;
  width: min(1100px, calc(100% - var(--s400)));
  margin: var(--s600) auto 0;
}
.hero__wide-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 50% 50% var(--r-3xl) var(--r-3xl) / 89% 89% var(--r-3xl) var(--r-3xl);
  background: var(--bg-2);
  box-shadow: var(--shadow);
}
.hero__wide-img {
  position: absolute;
  inset: -8% 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__wide-img { animation: parallax linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}
@keyframes parallax { from { transform: translateY(-5%); } to { transform: translateY(5%); } }
.hero__cap {
  display: flex;
  align-items: center;
  gap: var(--s75);
  justify-content: center;
  margin-top: var(--s200);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--ink-2);
}
.hero__cap .ic { color: var(--leaf); }

/* ----- Marquee ----- */
.marquee {
  overflow: hidden;
  background: #1F3FA8;
  color: #FBF7F1;
  padding-block: var(--s200);
}
.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: var(--s400);
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  padding-right: var(--s400);
  animation: marquee 48s linear infinite;
}
.marquee__track i { display: grid; color: #F2BE2F; }
.marquee__track i .ic { width: 20px; height: 20px; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ----- Welcome ----- */
.welcome { display: grid; gap: var(--s600); align-items: center; }
@media (min-width: 1024px) { .welcome { grid-template-columns: 1fr 1fr; gap: var(--s700); } }
.sign {
  margin-top: var(--s300);
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3xl);
  box-shadow: var(--shadow);
}
.cd { padding: var(--s200); }
.cd__title {
  display: flex;
  align-items: center;
  gap: var(--s75);
  padding: var(--s75) var(--s75) var(--s200);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.cd__title .ic { color: var(--accent); }
.cd__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s75); }
.cd__cell {
  display: grid;
  justify-items: center;
  gap: var(--s25);
  padding: var(--s200) var(--s50);
  border-radius: var(--r-lg);
  background: var(--bg-2);
}
.cd__num {
  display: block;
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.cd__lab { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-2); }
@media (min-width: 768px) { .cd__num { font-size: 48px; line-height: 1; } .cd__cell { padding-block: var(--s300); } }
.cd__done { padding: var(--s300) var(--s100); font-size: 24px; line-height: 32px; font-weight: 700; text-align: center; }
.cd__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s75); margin-top: var(--s75); }
.cd__stats li {
  display: grid;
  gap: var(--s25);
  padding: var(--s200);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.cd__stats b { font-size: 24px; line-height: 32px; letter-spacing: -0.02em; color: var(--accent); font-variant-numeric: tabular-nums; }
.cd__stats span { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.num-tick { display: inline-block; animation: tick 220ms var(--ease-out); }
@keyframes tick { from { opacity: 0.35; transform: translateY(6px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }

/* ----- Tagline reveal ----- */
.tagline { padding-block: var(--s900); }
.tagline__text {
  max-width: 680px;
  margin-inline: auto;
  font-size: 36px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -0.035em;
  text-wrap: balance;
  text-align: center;
}
@media (min-width: 768px) { .tagline__text { font-size: 48px; line-height: 1; } }
@media (min-width: 1100px) { .tagline { padding-block: var(--s900); } }
.tagline .w {
  color: color-mix(in srgb, var(--ink) 30%, transparent);
  transition: color 700ms var(--ease);
}
.tagline .w.on { color: var(--ink); }
.no-js .tagline .w, html:not(.js) .tagline .w { color: var(--ink); }

/* ----- Story (sticky stage) ----- */
.story { display: grid; gap: var(--s400); }
.story__stage { display: none; }
@media (min-width: 1024px) {
  .story { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s800); align-items: start; }
  .story__stage { display: block; position: sticky; top: var(--s900); height: calc(100svh - 128px); max-height: 700px; }
}
.stage-arch {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50% 50% var(--r-3xl) var(--r-3xl) / 36% 36% var(--r-3xl) var(--r-3xl);
  background: var(--bg-2);
  box-shadow: var(--shadow);
}
.stage-arch--sm { aspect-ratio: 4 / 5; height: auto; max-width: 440px; max-height: calc(100svh - 360px); margin-inline: auto; border-radius: 50% 50% var(--r-3xl) var(--r-3xl) / 40% 40% var(--r-3xl) var(--r-3xl); }
.stage-img {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 100% 0);
  transition: none;
}
.stage-img.is-below { clip-path: inset(0); z-index: 1; }
.stage-img.is-active { clip-path: inset(0); z-index: 2; transition: clip-path 900ms var(--ease-io); }
.stage-img__el { width: 100%; height: 100%; object-fit: cover; }
.stage-img__el--zoom { transform: scale(1.5); transform-origin: 80% 45%; }
.stage-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--s300);
  z-index: 3;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.stage-cap span {
  padding: var(--s75) var(--s200);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--ink);
}

.story__steps { display: grid; gap: var(--s600); }
.step, .day__step {
  display: grid;
  align-content: center;
  gap: var(--s200);
}
.step p, .day__step p { font-size: 20px; line-height: 28px; max-width: 56ch; color: var(--ink-2); }
.step .step__tag, .day__step .step__tag, .step__tag {
  display: flex;
  align-items: center;
  gap: var(--s75);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.step .step__tag, .day__step .step__tag { font-size: 12px; line-height: 16px; color: var(--accent); max-width: none; }
.step__tag .ic { width: 1.4em; height: 1.4em; }
.step__fig {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-3xl);
  background: var(--bg-2);
}
.step__img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) {
  .step__fig { display: none; }
  .story__steps { gap: 0; }
  .step { min-height: 72svh; opacity: 0.3; transition: opacity 600ms var(--ease); }
  .step.is-active { opacity: 1; }
}
.hl {
  background: none;
  color: inherit;
  font-weight: 700;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: inset 0 -0.45em 0 transparent;
  transition: box-shadow 1200ms var(--ease) 300ms;
}
.step.is-active .hl, .step:last-child .hl { box-shadow: inset 0 -0.45em 0 color-mix(in srgb, var(--sun) 60%, transparent); }
@media (min-width: 1024px) { .step:last-child:not(.is-active) .hl { box-shadow: inset 0 -0.45em 0 transparent; } }

/* ----- Timeline + bowl ----- */
.tl-layout { display: grid; gap: var(--s600); }
@media (min-width: 1024px) { .tl-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s800); align-items: start; } }
.tl { position: relative; display: grid; gap: var(--s600); padding-left: var(--s700); }
.tl__line { position: absolute; left: 15px; top: var(--s75); bottom: var(--s75); width: 2px; background: var(--line); border-radius: 2px; }
.tl__fill { position: absolute; inset: 0; background: var(--accent); border-radius: 2px; transform-origin: top; transform: scaleY(var(--p, 0)); transition: transform 900ms var(--ease); }
.tl__item { position: relative; opacity: 0.38; transition: opacity 600ms var(--ease); }
.tl__item.is-on { opacity: 1; }
.tl__dot {
  position: absolute;
  left: calc(var(--s600) * -1);
  top: var(--s25);
  width: 16px;
  height: 16px;
  border: 2px solid var(--accent);
  border-radius: var(--r-full);
  background: var(--bg-2);
  transition: background-color 400ms var(--ease), transform 600ms var(--ease);
}
.tl__item.is-on .tl__dot { background: var(--accent); transform: scale(1.25); }
.tl__date {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s75);
}
.tl__item .h3 { margin-bottom: var(--s75); }
.tl__item p:last-child { color: var(--ink-2); max-width: 52ch; }

.bowl-card {
  position: sticky;
  top: var(--s900);
  padding: var(--s400) var(--s300);
  border: 1px solid var(--line);
  border-radius: var(--r-3xl);
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: center;
}
@media (max-width: 1023px) { .bowl-card { position: static; order: -1; } }
.bowl { width: 100%; max-width: 340px; margin-inline: auto; overflow: visible; }
.bowl__shadow { fill: rgba(26, 25, 21, 0.12); }
.bowl__body { fill: var(--clay); stroke: var(--ink); stroke-width: 1.5; stroke-opacity: 0.35; }
.bowl__glaze { fill: var(--cobalt); transform: translateY(calc((1 - var(--fill, 0)) * 196px)); transition: transform 1100ms var(--ease); }
.bowl__rim { fill: var(--clay); stroke: var(--ink); stroke-width: 1.5; stroke-opacity: 0.35; }
.bowl__in { fill: var(--cobalt); opacity: calc(var(--fill, 0) * 1.4); transition: opacity 1100ms var(--ease); }
.bowl__in { filter: brightness(0.82); }
.bowl__rings { fill: none; stroke: var(--sun); stroke-width: 3.5; opacity: var(--rings, 0); transform: translateY(calc((1 - var(--rings, 0)) * -18px)); transition: opacity 800ms var(--ease), transform 800ms var(--ease); }
.bowl__cap { margin-top: var(--s200); font-size: 16px; line-height: 24px; color: var(--ink-2); text-wrap: balance; }

/* ----- Day (sky stage) ----- */
.day {
  --sky-bg: var(--bg);
  background: var(--sky-bg);
  transition: --sky-bg 1000ms var(--ease), --ink 1000ms var(--ease), --ink-2 1000ms var(--ease), --line 1000ms var(--ease);
}
.day[data-sky="gold"] { --sky-bg: #F7E3C4; --ink: #1A1915; --ink-2: #57524A; --line: rgba(26, 25, 21, 0.18); }
.day[data-sky="dusk"] { --sky-bg: #313131; --ink: #F6F0E4; --ink-2: #C9C1B1; --line: rgba(246, 240, 228, 0.22); }
.day[data-sky="night"] { --sky-bg: #131209; --ink: #F6F0E4; --ink-2: #C9C1B1; --line: rgba(246, 240, 228, 0.22); }
:root[data-theme="dark"] .day[data-sky="day"] { --sky-bg: #1F1F1F; }
:root[data-theme="dark"] .day[data-sky="gold"] { --sky-bg: #272727; --ink: #F6F0E4; --ink-2: #C9C1B1; --line: rgba(246, 240, 228, 0.22); }
.day { color: var(--ink); }
.day .step__tag { color: var(--orange); }
.day[data-sky="night"] .step__tag, .day[data-sky="dusk"] .step__tag { color: var(--sun); }

.day__layout { display: grid; gap: var(--s400); }
.day .sec-head { margin-bottom: 0; }
.day__stage { position: sticky; top: 0; z-index: 4; background: var(--sky-bg); padding: var(--s800) var(--s200) var(--s100); margin-inline: calc(var(--s200) * -1); }
@media (min-width: 768px) { .day__stage { margin-inline: calc(var(--s400) * -1); padding-inline: var(--s400); } }
@media (min-width: 1024px) { .day .sec-head { margin-bottom: var(--s600); } }
.day__photo { display: none; }
.sky { display: grid; justify-items: center; }
.sky__arc { width: 100%; max-width: 420px; overflow: visible; }
.sky__path { fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 3 7; stroke-linecap: round; opacity: 0.8; }
.sky__horizon { stroke: var(--line); stroke-width: 1.5; }
.sky__tick { fill: var(--line); transition: fill 400ms ease, r 400ms var(--ease); }
.sky__tick.is-on { fill: var(--orange); }
.sky__body { transform: translate(var(--sx, 24px), var(--sy, 200px)); transition: transform 1000ms var(--ease); }
.sky__sun { fill: var(--orange); filter: drop-shadow(0 0 14px color-mix(in srgb, var(--orange) 70%, transparent)); transition: opacity 600ms var(--ease), fill 600ms var(--ease); }
.sky__moon { fill: #F6F0E4; opacity: 0; transition: opacity 600ms var(--ease); }
.sky__moon-cut { fill: var(--sky-bg); opacity: 0; transition: opacity 600ms var(--ease); }
.day[data-sky="night"] .sky__sun, .day[data-sky="dusk"] .sky__sun { opacity: 0; }
.day[data-sky="night"] .sky__moon, .day[data-sky="dusk"] .sky__moon, .day[data-sky="night"] .sky__moon-cut, .day[data-sky="dusk"] .sky__moon-cut { opacity: 1; }
.sky__time {
  display: flex;
  align-items: baseline;
  gap: var(--s75);
  margin-top: 0;
  font-size: 48px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.sky__time small { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0; color: var(--ink-2); }
.day__steps { display: grid; gap: var(--s600); padding-bottom: var(--s400); }
@media (max-width: 1023px) { .day__step { min-height: 0; } .day__steps { margin-top: var(--s200); } }
@media (min-width: 1024px) {
  .day__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s800); align-items: start; }
  .day__stage { top: var(--s900); margin: 0; padding: 0; background: none; align-self: start; display: grid; gap: var(--s300); }
  .sky__arc { max-width: 460px; }
  .sky__time { font-size: 72px; margin-top: 0; }
  .day__photo { display: block; }
  .day__step .step__fig { display: none; }
  .day__step { min-height: 64svh; opacity: 0.3; transition: opacity 600ms var(--ease); }
  .day__step.is-active { opacity: 1; }
  .day__steps { padding-bottom: 0; gap: 0; }
}
@media (max-width: 1023px) { .day__step .step__fig { aspect-ratio: 16 / 10; } }

/* ----- Place + map ----- */
.place { display: grid; gap: var(--s400); }
@media (min-width: 1024px) { .place { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--s400); align-items: start; } }
.place__frame {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 50% 50% var(--r-3xl) var(--r-3xl) / 66% 66% var(--r-3xl) var(--r-3xl);
  background: var(--bg-2);
  box-shadow: var(--shadow);
}
.place__img { width: 100%; height: 100%; object-fit: cover; }
.place__photo figcaption { margin-top: var(--s200); font-size: 14px; line-height: 20px; color: var(--ink-2); max-width: 52ch; }

.map { padding: var(--s200); }
@media (min-width: 768px) { .map { padding: var(--s200); } }
.map__stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 600 / 340;
  border-radius: var(--r-lg);
  background: var(--water);
}
.map__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__island { fill: var(--land); stroke: var(--leaf); stroke-width: 2; stroke-linejoin: round; }
.map__ridge { stroke: var(--leaf); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; opacity: 0.7; }
.map__waves path { fill: none; stroke: var(--ink); stroke-width: 1.5; opacity: 0.12; stroke-linecap: round; }
.map__route { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; animation: dash 18s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -200; } }
@media (prefers-reduced-motion: reduce) { .map__route { animation: none; } }
.map__label {
  position: absolute;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.45;
  pointer-events: none;
}
.pin {
  position: absolute;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  translate: -50% -50%;
}
.pin__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 4px 12px -4px rgba(26, 25, 21, 0.4);
  transition: transform 300ms var(--ease), background-color 240ms ease, color 240ms ease;
}
.pin__dot .ic { width: 16px; height: 16px; }
.pin:active .pin__dot { transform: scale(0.94); }
.pin.is-active .pin__dot { background: var(--accent); color: var(--accent-ink); transform: scale(1.18); }
.pin.is-active .pin__dot::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 2px solid var(--accent);
  border-radius: var(--r-full);
  animation: ping 2s var(--ease-out) infinite;
}
@keyframes ping { from { transform: scale(1); opacity: 0.7; } to { transform: scale(2.1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pin.is-active .pin__dot::after { animation: none; } }
@media (hover: hover) and (pointer: fine) { .pin:hover .pin__dot { transform: scale(1.12); } }
.map__info { padding: var(--s200) var(--s75) 0; min-height: 112px; }
.map__info .h3 { font-size: 20px; line-height: 28px; margin-bottom: var(--s50); }
.map__info p { font-size: 16px; line-height: 24px; color: var(--ink-2); }
.map__note { padding: var(--s100) var(--s75) var(--s75); font-size: 12px; line-height: 16px; color: var(--ink-2); }
.map__info.swap { animation: tick 360ms var(--ease-out); }

.tiles { display: grid; gap: var(--s200); margin-top: var(--s600); }
@media (min-width: 768px) { .tiles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .tiles:not(.tiles--two) { grid-template-columns: repeat(4, 1fr); } }
.tile {
  padding: var(--s300);
  border: 1px solid var(--line);
  border-radius: var(--r-3xl);
  background: var(--surface);
}
.tile__ic {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--s200);
  border-radius: var(--r-full);
  background: var(--bg-2);
  color: var(--accent);
}
.tile .h3 { font-size: 20px; line-height: 28px; }
.tile p { font-size: 16px; line-height: 24px; color: var(--ink-2); }

/* ----- Swatches ----- */
.swatches { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s200); }
@media (min-width: 768px) { .swatches { grid-template-columns: repeat(4, 1fr); } }
.swatch {
  display: grid;
  gap: var(--s100);
  padding: var(--s75);
  border: 1px solid var(--line);
  border-radius: var(--r-3xl);
  background: var(--surface);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: transform 300ms var(--ease), border-color 240ms ease, box-shadow 300ms var(--ease);
}
.swatch:active { transform: scale(0.98); }
.swatch__arch {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 50% 50% var(--r-2xl) var(--r-2xl) / 37.5% 37.5% var(--r-2xl) var(--r-2xl);
  background: var(--bg-2);
}
.swatch__img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.swatch__body { display: flex; align-items: center; gap: var(--s100); padding: 0 var(--s75) var(--s75); font-size: 16px; line-height: 24px; }
.swatch__body i { width: 20px; height: 20px; border-radius: var(--r-full); border: 1px solid var(--line); }
.swatch.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .swatch:hover { transform: translateY(-4px); }
  .swatch:hover .swatch__img { transform: scale(1.05); }
}
.swatch__note { margin-top: var(--s300); font-size: 18px; line-height: 28px; font-weight: 600; text-align: center; min-height: 28px; color: var(--ink); }

/* ----- RSVP ----- */
.rsvp-wrap { display: grid; gap: var(--s500); }
@media (min-width: 1024px) { .rsvp-wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s700); align-items: start; } .rsvp-wrap .sec-head { margin-bottom: 0; position: sticky; top: var(--s900); } }
.deadline {
  display: inline-flex;
  align-items: center;
  gap: var(--s75);
  margin-top: var(--s300);
  padding: var(--s75) var(--s200);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
}
.deadline .ic { color: var(--accent); }

.rsvp { padding: var(--s200); overflow: hidden; }
@media (min-width: 768px) { .rsvp { padding: var(--s400); } }
.rsvp__progress { display: flex; align-items: center; justify-content: space-between; gap: var(--s75); margin-bottom: var(--s400); padding-inline: var(--s75); }
.rsvp__progress li {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}
.rsvp__progress li:last-child { flex: none; }
.rsvp__progress li span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: var(--ink-2);
  background: var(--surface);
  transition: background-color 400ms var(--ease), color 400ms var(--ease), border-color 400ms var(--ease), transform 500ms var(--ease);
}
.rsvp__progress li:not(:last-child)::after {
  content: "";
  flex: 1;
  height: 2px;
  margin-inline: var(--s75);
  border-radius: 2px;
  background: var(--line);
  transition: background-color 600ms var(--ease);
}
.rsvp__progress li.is-done span { border-color: var(--accent); color: var(--accent); }
.rsvp__progress li.is-done::after { background: var(--accent); }
.rsvp__progress li.is-current span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); transform: scale(1.12); }

.rsvp__step { display: none; min-width: 0; margin: 0; padding: 0; border: 0; }
.rsvp__step.is-current { display: grid; gap: var(--s300); animation: stepIn 420ms var(--ease-out) both; }
.rsvp__step.is-current.back { animation-name: stepBack; }
@keyframes stepIn { from { opacity: 0; transform: translateX(24px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes stepBack { from { opacity: 0; transform: translateX(-24px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.rsvp__step legend { padding: 0; margin-bottom: var(--s300); width: 100%; }
.rsvp__step legend:focus { outline: none; }
.field { display: grid; gap: var(--s75); }
.field__label { font-size: 14px; line-height: 20px; font-weight: 700; }
.field__label em { font-weight: 500; color: var(--ink-2); margin-left: var(--s50); }
.field__hint { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.field__error { min-height: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--coral); }
.field__error:empty { display: none; }
.input {
  width: 100%;
  min-height: 48px;
  padding: var(--s100) var(--s200);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 24px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
@media (min-width: 768px) { .input { border-radius: var(--r-xl); } }
.input::placeholder { color: color-mix(in srgb, var(--ink-2) 75%, transparent); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent); }
.input[aria-invalid="true"] { border-color: var(--coral); }
.input--area { resize: vertical; min-height: 112px; }

.choice { display: grid; gap: var(--s100); }
.choice__item { position: relative; display: block; cursor: pointer; }
.choice__item input, .chipbox input, .check input { position: absolute; opacity: 0; pointer-events: none; }
.choice__card {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--s200);
  row-gap: var(--s25);
  align-items: center;
  padding: var(--s200);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  transition: border-color 240ms ease, background-color 240ms ease, transform 160ms var(--ease-out);
}
@media (min-width: 768px) { .choice__card { border-radius: var(--r-xl); } }
.choice__card .ic { grid-row: span 2; width: 28px; height: 28px; color: var(--accent); }
.choice__card b { font-size: 18px; line-height: 28px; }
.choice__card small { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.choice__item:active .choice__card { transform: scale(0.98); }
.choice__item input:checked + .choice__card { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg)); box-shadow: 0 0 0 1px var(--accent); }
.choice__item input:focus-visible + .choice__card, .chipbox input:focus-visible + span, .check input:focus-visible + span::before { outline: 2px solid var(--accent); outline-offset: 3px; }

.chips { display: flex; flex-wrap: wrap; gap: var(--s75); }
.chipbox { position: relative; cursor: pointer; }
.chipbox span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: var(--s75) var(--s200);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  background: var(--bg);
  transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease, transform 160ms var(--ease-out);
}
.chipbox:active span { transform: scale(0.96); }
.chipbox input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.check { position: relative; display: flex; align-items: flex-start; gap: var(--s100); cursor: pointer; font-size: 16px; line-height: 24px; }
.check span::before {
  content: "";
  display: inline-block;
  vertical-align: -5px;
  width: 22px;
  height: 22px;
  margin-right: var(--s100);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.check input:checked + span::before {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 4px var(--bg);
}

.stepper { display: inline-flex; align-items: center; gap: var(--s100); width: fit-content; padding: var(--s50); border: 1px solid var(--line); border-radius: var(--r-full); background: var(--bg); }
.stepper__btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--r-full); background: var(--bg-2); transition: transform 160ms var(--ease-out), background-color 200ms ease; }
.stepper__btn:active { transform: scale(0.92); }
.stepper__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.stepper__val { min-width: 32px; text-align: center; font-size: 20px; line-height: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }

.summary { display: grid; gap: var(--s75); padding: var(--s200); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg); font-size: 14px; line-height: 20px; }
.summary div { display: flex; justify-content: space-between; gap: var(--s200); }
.summary dt { color: var(--ink-2); }
.summary dd { font-weight: 600; text-align: right; }

.rsvp__fail { margin-top: var(--s200); padding: var(--s100) var(--s200); border: 1px solid var(--coral); border-radius: var(--r-lg); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--coral); }
.rsvp__nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s100); margin-top: var(--s400); }
.rsvp__nav .btn:last-child { margin-left: auto; }
.rsvp__done { display: grid; justify-items: center; gap: var(--s200); padding: var(--s400) var(--s100); text-align: center; }
.rsvp__done:not([hidden]) { animation: stepIn 600ms var(--ease-out) both; }
.rsvp__done-ic { display: grid; place-items: center; width: 72px; height: 72px; border-radius: var(--r-full); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.rsvp__done-ic .ic { width: 40px; height: 40px; }
.rsvp__done p { color: var(--ink-2); max-width: 44ch; }
.rsvp__done-actions, .rsvp__fallback-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s100); margin-top: var(--s100); }
.rsvp__fallback { display: grid; gap: var(--s100); width: 100%; text-align: left; padding: var(--s200); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg); }
.rsvp__fallback p { font-size: 14px; line-height: 20px; }

/* ----- Gift ----- */
.gift { display: grid; gap: var(--s600); align-items: center; }
@media (min-width: 1024px) { .gift { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s800); } }
.gift__art { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-3xl); background: #F8E6C8; box-shadow: var(--shadow); }
.beach { width: 100%; height: auto; }
.beach__sky { fill: #F8E6C8; }
.beach__sun { fill: #F2A93B; animation: float 8s var(--ease-io) infinite alternate; }
.beach__sunrays { stroke: #F2A93B; stroke-width: 4; stroke-linecap: round; fill: none; animation: spin 40s linear infinite; transform-origin: 340px 120px; }
.beach__water { fill: #1F3FA8; }
.beach__wave { fill: none; stroke-width: 6; stroke-linecap: round; }
.beach__wave--a { stroke: #5C80E0; animation: waves 7s var(--ease-io) infinite alternate; }
.beach__wave--b { stroke: #3C62CF; animation: waves 9s var(--ease-io) infinite alternate-reverse; }
.beach__wave--c { stroke: #5C80E0; animation: waves 11s var(--ease-io) infinite alternate; }
.beach__umb path:first-child { stroke: #6B4E2E; stroke-width: 5; fill: none; stroke-linecap: round; }
.beach__umb path:nth-child(2) { fill: #D94A33; }
.beach__pole { stroke: #6B4E2E; stroke-width: 5; }
.beach__sand { fill: #EBD3A5; }
@keyframes waves { from { transform: translateX(0); } to { transform: translateX(-60px); } }
@keyframes float { to { transform: translateY(-10px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .beach * { animation: none !important; } }
.gift__cap { padding: var(--s200) var(--s300) var(--s300); font-size: 14px; line-height: 20px; color: #57524A; background: #F8E6C8; }

/* ----- FAQ ----- */
.faq-wrap { display: grid; gap: var(--s500); }
@media (min-width: 1024px) { .faq-wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s700); align-items: start; } .faq-wrap .sec-head { margin-bottom: 0; position: sticky; top: var(--s900); } }
.faq { display: grid; gap: var(--s75); }
.faq__item { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-2xl); background: var(--surface); transition: border-color 300ms ease; }
.faq__item.is-open { border-color: var(--accent); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s200);
  width: 100%;
  padding: var(--s200) var(--s300);
  border: 0;
  background: none;
  text-align: left;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.faq__q:focus-visible { outline-offset: -3px; border-radius: var(--r-2xl); }
.faq__q .ic { width: 24px; height: 24px; color: var(--accent); transition: transform 500ms var(--ease); }
.faq__item.is-open .faq__q .ic { transform: rotate(135deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 500ms var(--ease); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; min-height: 0; }
.faq__a p { padding: 0 var(--s300) var(--s300); color: var(--ink-2); max-width: 60ch; }

/* ----- Finale ----- */
.finale { position: relative; overflow: hidden; background: #131209; color: #FBF7F1; padding-block: var(--s900); text-align: center; }
.finale__photo { position: absolute; inset: 0; }
.finale__photo::after { content: ""; position: absolute; inset: 0; background: rgba(19, 18, 9, 0.62); }
.finale__img { width: 100%; height: 100%; object-fit: cover; }
.finale__inner { position: relative; z-index: 1; display: grid; justify-items: center; }
.finale__title { max-width: 680px; font-size: 48px; line-height: 1; font-weight: 700; letter-spacing: -0.04em; text-wrap: balance; margin-bottom: var(--s300); }
@media (min-width: 768px) { .finale__title { font-size: 72px; } }
.finale__text { max-width: 560px; font-size: 20px; line-height: 28px; color: rgba(251, 247, 241, 0.85); margin-bottom: var(--s400); }
.finale__sign { font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: var(--s500); }
.finale__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s100); }

.footer { padding: var(--s400) 0 calc(var(--s400) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font-size: 14px; line-height: 20px; color: var(--ink-2); }
.footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s200); align-items: center; }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--s300); align-items: center; }
.footer a, .footer__btn { display: inline-flex; align-items: center; gap: var(--s50); border: 0; background: none; padding: var(--s50) 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .footer a:hover, .footer__btn:hover { color: var(--accent); } }

/* ----- Sheet + toast + canvas ----- */
.sheet { position: fixed; inset: 0; z-index: 90; display: grid; place-items: end center; padding: var(--s200); }
.sheet[hidden] { display: none; }
.sheet__scrim { position: absolute; inset: 0; background: rgba(19, 18, 9, 0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity 400ms var(--ease); }
.sheet__panel {
  position: relative;
  width: min(480px, 100%);
  display: grid;
  gap: var(--s200);
  padding: var(--s300);
  border: 1px solid var(--line);
  border-radius: var(--r-3xl);
  background: var(--surface);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(32px) scale(0.98);
  transition: opacity 400ms var(--ease), transform 500ms var(--ease);
}
.sheet__panel p { color: var(--ink-2); font-size: 16px; line-height: 24px; }
.sheet__actions { display: grid; gap: var(--s75); margin-top: var(--s75); }
.sheet.is-open .sheet__scrim { opacity: 1; }
.sheet.is-open .sheet__panel { opacity: 1; transform: none; }
@media (min-width: 640px) { .sheet { place-items: center; } }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--s300) + env(safe-area-inset-bottom));
  z-index: 95;
  max-width: calc(100% - var(--s400));
  padding: var(--s100) var(--s300);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  text-align: center;
  translate: -50% 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms var(--ease), translate 400ms var(--ease);
}
.toast.is-on { opacity: 1; translate: -50% 0; }
.petals { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 96; }

html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color 500ms var(--ease), color 500ms var(--ease), border-color 500ms var(--ease), fill 500ms var(--ease), stroke 500ms var(--ease) !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .stage-img.is-active { transition-duration: 200ms; }
}

/* ----- Simple pages (404, Impressum, Datenschutz) ----- */
.page { min-height: 100svh; display: grid; align-content: center; padding: var(--s900) var(--s200); }
.page__inner { width: min(720px, 100%); margin-inline: auto; }
.page h1 { font-size: 48px; line-height: 1; font-weight: 700; letter-spacing: -0.04em; margin-bottom: var(--s300); text-wrap: balance; }
.page h2 { font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.015em; margin: var(--s400) 0 var(--s100); }
.page p, .page li { color: var(--ink-2); margin-bottom: var(--s100); }
.page ul { padding-left: var(--s300); list-style: disc; }
.page .btn { margin-top: var(--s300); }
.page .arch { margin-bottom: var(--s400); max-width: 160px; }