/* ==========================================================================
   WELLUNEX — INVITATION WEBSITE, EDITORIAL LAYER
   Loaded after website-invitation.css and love-story.css. It gives every
   theme its own art direction (body[data-concept]: palette, gold foil,
   typography) and restyles the website layout into numbered sections:
   story, schedule, venue, RSVP, gift, photo wall, song requests.
   ========================================================================== */

/* --- Concepts -------------------------------------------------------------
   Each concept only sets tokens; every component below reads them.        */

body[data-concept] {
  --web-bg: #F4F1E8;
  --web-card-bg: #FFFFFF;
  --web-sand: #ECE6D8;
  --web-dark-sand: #E2DACA;
  --web-dark-green: #253328;
  --web-forest: #1C261F;
  --web-gold: #C9A24B;
  --web-gold-light: #E8D390;
  --web-gold-dark: #8C6D1F;
  --web-text: #2C302E;
  --web-text-muted: #6B736C;
  --web-border: rgba(37, 51, 40, 0.12);
  --wx-on-primary: #F4F1E8;
  --wx-foil: linear-gradient(112deg, #4D3A10 0%, #876620 38%, #BE9C52 52%, #7C5E1E 68%, #45330C 100%);
  --wx-display: 'Cormorant Garamond', Georgia, serif;
  --wx-script: 'Alex Brush', cursive;
  --wx-caps: 'Cinzel', Georgia, serif;
  --wx-body: 'Montserrat', system-ui, sans-serif;
  --wx-veil: linear-gradient(180deg, rgba(244, 241, 232, 0.12) 0%, rgba(244, 241, 232, 0.5) 42%, rgba(244, 241, 232, 0.9) 80%, #F4F1E8 100%);
  --wx-input-bg: #FFFFFF;
  --wx-input-border: #E2DCCF;
  --wx-shadow: rgba(37, 51, 40, 0.14);
}

body[data-concept="saray"] {
  --web-bg: #FBF7EE;
  --web-card-bg: #FFFEFA;
  --web-sand: #F3EBDA;
  --web-dark-sand: #E9DDC4;
  --web-dark-green: #6E1F24;
  --web-forest: #2A1A12;
  --web-gold: #C9A24B;
  --web-gold-light: #F1DE9F;
  --web-gold-dark: #8F6A1E;
  --web-text: #3B2E26;
  --web-text-muted: #7A6A5E;
  --web-border: rgba(110, 31, 36, 0.14);
  --wx-on-primary: #FBF7EE;
  --wx-foil: linear-gradient(112deg, #5A3F0C 0%, #8F6A1E 38%, #C7A355 52%, #82601A 68%, #4E360A 100%);
  --wx-script: 'Great Vibes', cursive;
  --wx-veil: linear-gradient(180deg, rgba(251, 247, 238, 0.12) 0%, rgba(251, 247, 238, 0.5) 42%, rgba(251, 247, 238, 0.9) 80%, #FBF7EE 100%);
  --wx-input-border: #E8DDC8;
  --wx-shadow: rgba(110, 31, 36, 0.14);
}

body[data-concept="kadife"] {
  --web-bg: #FBF4F2;
  --web-card-bg: #FFFFFF;
  --web-sand: #F4E6E4;
  --web-dark-sand: #EAD5D2;
  --web-dark-green: #800F2F;
  --web-forest: #3A0D17;
  --web-gold: #C7877A;
  --web-gold-light: #F2C7B5;
  --web-gold-dark: #8C4A3F;
  --web-text: #3E2A2E;
  --web-text-muted: #86666C;
  --web-border: rgba(128, 15, 47, 0.14);
  --wx-on-primary: #FBF4F2;
  --wx-foil: linear-gradient(112deg, #5C2A22 0%, #8C4A3F 38%, #C38676 52%, #7E4238 68%, #4E221B 100%);
  --wx-script: 'Great Vibes', cursive;
  --wx-veil: linear-gradient(180deg, rgba(251, 244, 242, 0.12) 0%, rgba(251, 244, 242, 0.5) 42%, rgba(251, 244, 242, 0.9) 80%, #FBF4F2 100%);
  --wx-input-border: #EBD9D6;
  --wx-shadow: rgba(128, 15, 47, 0.14);
}

body[data-concept="gece"] {
  --web-bg: #0E1628;
  --web-card-bg: #152038;
  --web-sand: #121C33;
  --web-dark-sand: #1A2744;
  --web-dark-green: #D9BD7A;
  --web-forest: #F4ECD8;
  --web-gold: #D9BD7A;
  --web-gold-light: #F2E3B8;
  --web-gold-dark: #D9BD7A;
  --web-text: #D6DBE6;
  --web-text-muted: #9AA4BA;
  --web-border: rgba(217, 189, 122, 0.2);
  --wx-on-primary: #0E1628;
  --wx-foil: linear-gradient(112deg, #B8995A 0%, #F7EBC9 42%, #D8BD80 66%, #9E8246 100%);
  --wx-script: 'Great Vibes', cursive;
  --wx-veil: linear-gradient(180deg, rgba(14, 22, 40, 0.12) 0%, rgba(14, 22, 40, 0.5) 42%, rgba(14, 22, 40, 0.9) 80%, #0E1628 100%);
  --wx-input-bg: #0F192E;
  --wx-input-border: rgba(217, 189, 122, 0.28);
  --wx-shadow: rgba(0, 0, 0, 0.5);
}

body[data-concept="pudra"] {
  --web-bg: #FCF3F5;
  --web-card-bg: #FFFFFF;
  --web-sand: #F6E6EA;
  --web-dark-sand: #EDD5DC;
  --web-dark-green: #A34862;
  --web-forest: #4A1F2E;
  --web-gold: #D2A57C;
  --web-gold-light: #F6DCC0;
  --web-gold-dark: #9A6A44;
  --web-text: #4A3940;
  --web-text-muted: #8C6B75;
  --web-border: rgba(163, 72, 98, 0.14);
  --wx-on-primary: #FFF8F9;
  --wx-foil: linear-gradient(112deg, #6A452B 0%, #8E6242 38%, #C2946E 52%, #80573A 68%, #5A3923 100%);
  --wx-veil: linear-gradient(180deg, rgba(252, 243, 245, 0.12) 0%, rgba(252, 243, 245, 0.5) 42%, rgba(252, 243, 245, 0.9) 80%, #FCF3F5 100%);
  --wx-input-border: #EFDCE1;
  --wx-shadow: rgba(163, 72, 98, 0.14);
}

body[data-concept="bohem"] {
  --web-bg: #F7F0E6;
  --web-card-bg: #FFFBF6;
  --web-sand: #EFE3D3;
  --web-dark-sand: #E5D3BE;
  --web-dark-green: #B2533E;
  --web-forest: #3E2418;
  --web-gold: #C07C52;
  --web-gold-light: #F0C9A4;
  --web-gold-dark: #8E4F2E;
  --web-text: #4A362B;
  --web-text-muted: #87705F;
  --web-border: rgba(178, 83, 62, 0.15);
  --wx-on-primary: #FFF8F1;
  --wx-foil: linear-gradient(112deg, #5E3018 0%, #8E4F2E 38%, #C27F55 52%, #804628 68%, #502813 100%);
  --wx-veil: linear-gradient(180deg, rgba(247, 240, 230, 0.12) 0%, rgba(247, 240, 230, 0.5) 42%, rgba(247, 240, 230, 0.9) 80%, #F7F0E6 100%);
  --wx-input-bg: #FFFDF9;
  --wx-input-border: #E7D8C6;
  --wx-shadow: rgba(178, 83, 62, 0.15);
}

body[data-concept="noir"] {
  --web-bg: #F5F5F4;
  --web-card-bg: #FFFFFF;
  --web-sand: #EBEBEA;
  --web-dark-sand: #DEDEDC;
  --web-dark-green: #111111;
  --web-forest: #111111;
  --web-gold: #6B6B6B;
  --web-gold-light: #BDBDBD;
  --web-gold-dark: #2B2B2B;
  --web-text: #222222;
  --web-text-muted: #6B6B6B;
  --web-border: rgba(17, 17, 17, 0.14);
  --wx-on-primary: #FFFFFF;
  --wx-foil: linear-gradient(112deg, #000000 0%, #2E2E2E 40%, #6E6E6E 52%, #262626 64%, #000000 100%);
  --wx-display: 'Bodoni Moda', Georgia, serif;
  --wx-script: 'Bodoni Moda', Georgia, serif;
  --wx-caps: 'Montserrat', system-ui, sans-serif;
  --wx-veil: linear-gradient(180deg, rgba(245, 245, 244, 0.12) 0%, rgba(245, 245, 244, 0.5) 42%, rgba(245, 245, 244, 0.9) 80%, #F5F5F4 100%);
  --wx-input-border: #DDDDDB;
  --wx-shadow: rgba(17, 17, 17, 0.14);
}

body[data-concept="toskana"] {
  --web-bg: #F6F1E7;
  --web-card-bg: #FFFDF8;
  --web-sand: #EEE5D3;
  --web-dark-sand: #E3D7C0;
  --web-dark-green: #5B5134;
  --web-forest: #2F2A20;
  --web-gold: #B08A45;
  --web-gold-light: #E6CF94;
  --web-gold-dark: #7A5A22;
  --web-text: #3A342A;
  --web-text-muted: #7C7462;
  --web-border: rgba(91, 81, 52, 0.14);
  --wx-on-primary: #F6F1E7;
  --wx-foil: linear-gradient(112deg, #45300C 0%, #7A5A22 38%, #B28C48 52%, #6E511E 68%, #3C2A0A 100%);
  --wx-script: 'Pinyon Script', cursive;
  --wx-veil: linear-gradient(180deg, rgba(246, 241, 231, 0.12) 0%, rgba(246, 241, 231, 0.5) 42%, rgba(246, 241, 231, 0.9) 80%, #F6F1E7 100%);
  --wx-input-border: #E4DAC6;
  --wx-shadow: rgba(91, 81, 52, 0.14);
}

body[data-concept="akdeniz"] {
  --web-bg: #FBF8EF;
  --web-card-bg: #FFFFFF;
  --web-sand: #F2ECD8;
  --web-dark-sand: #E7DEC2;
  --web-dark-green: #1F4E79;
  --web-forest: #16324A;
  --web-gold: #D4A72C;
  --web-gold-light: #F6E27A;
  --web-gold-dark: #9A6F12;
  --web-text: #2A3A48;
  --web-text-muted: #5E7285;
  --web-border: rgba(31, 78, 121, 0.14);
  --wx-on-primary: #FBF8EF;
  --wx-foil: linear-gradient(112deg, #5A400A 0%, #8A6410 38%, #C49A2C 52%, #7C5A0E 68%, #4E3808 100%);
  --wx-script: 'Great Vibes', cursive;
  --wx-veil: linear-gradient(180deg, rgba(251, 248, 239, 0.12) 0%, rgba(251, 248, 239, 0.5) 42%, rgba(251, 248, 239, 0.9) 80%, #FBF8EF 100%);
  --wx-input-border: #E6E0CC;
  --wx-shadow: rgba(31, 78, 121, 0.14);
}

/* --- Gold foil -------------------------------------------------------------
   Metallic gradient clipped to the letters. Browsers that cannot clip keep
   the plain accent colour.                                                  */

.wx-head__title,
.wx-closing__names,
.wx-program__time,
.wx-site .web-countdown-num,
.love-story--website .ls-title,
.wx-head__num,
.ls-num {
  color: var(--web-gold-dark);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .wx-head__title,
  .wx-closing__names,
  .wx-program__time,
    .wx-site .web-countdown-num,
  .love-story--website .ls-title,
  .wx-head__num,
  .ls-num {
    background-image: var(--wx-foil);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* --- Page, top bar, hero ----------------------------------------------------- */

body[data-layout-mode="website"] {
  background-color: var(--web-bg);
  color: var(--web-text);
}

.wx-site .web-topbar {
  background: var(--web-bg);
  background: color-mix(in srgb, var(--web-bg) 88%, transparent);
  border-bottom-color: var(--web-border);
}

.wx-site .web-topbar-brand,
.wx-site .web-brand-title {
  color: var(--web-forest);
}

.wx-site .web-brand-badge,
.wx-site .lang-btn.active {
  background: var(--web-dark-green);
  color: var(--wx-on-primary);
}

.wx-site .web-lang-switcher {
  background: var(--web-card-bg);
  border-color: var(--web-border);
}

.wx-site .lang-btn {
  color: var(--web-text-muted);
}

/* The body is a flex container (core.css): without this the site grows to its
   widest line, such as a long venue name in the top bar, instead of the screen. */
.wx-site {
  width: 100%;
  min-width: 0;
}

.wx-site .web-topbar {
  gap: 12px;
  padding: 10px 16px;
}

.wx-site .web-topbar-brand {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.wx-site .web-lang-switcher {
  flex: none;
}

.wx-site .web-brand-badge {
  flex: none;
  font-size: 0.64rem;
  letter-spacing: -0.02em;
}

.wx-site .web-brand-title {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.wx-site .web-hero::before {
  background: var(--wx-veil);
}

.wx-site .web-hero-kicker {
  font-family: var(--wx-caps);
  color: var(--web-gold-dark);
}

.wx-site .web-hero-names {
  font-family: var(--wx-display);
  font-weight: 400;
  color: var(--web-forest);
  letter-spacing: -0.01em;
}

.wx-site .web-hero-names em {
  font-family: var(--wx-script);
  font-size: 0.78em;
  color: var(--web-gold-dark);
}

body[data-concept="noir"] .wx-site .web-hero-names em {
  font-style: italic;
}

.wx-site .web-hero-quote {
  font-family: var(--wx-display);
  color: var(--web-text);
}

.wx-hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  margin: 0 0 34px;
  font-family: var(--wx-caps);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--web-dark-green);
}

.wx-hero__meta span[aria-hidden] {
  color: var(--web-gold);
}

.wx-site .web-scroll-indicator {
  font-family: var(--wx-caps);
  color: var(--web-text-muted);
}

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

.wx-countdown {
  padding: clamp(34px, 6vw, 56px) 20px;
  border-block: 1px solid var(--web-border);
  background: var(--web-sand);
  text-align: center;
}

.wx-countdown__label {
  margin: 0 0 16px;
  font-family: var(--wx-caps);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--web-gold-dark);
}

.wx-site .web-countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  max-width: 560px;
  margin: 0 auto;
}

.wx-site .web-countdown-card {
  padding: 4px 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.wx-site .web-countdown-card + .web-countdown-card {
  border-left: 1px solid var(--web-border);
}

.wx-site .web-countdown-card:hover {
  transform: none;
}

.wx-site .web-countdown-num {
  font-family: var(--wx-display);
  font-size: clamp(2.1rem, 8vw, 3.2rem);
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
}

.wx-site .web-countdown-label {
  font-family: var(--wx-caps);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--web-text-muted);
}

/* --- Sections and their numbered headings ----------------------------------- */

.wx-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(64px, 10vw, 118px) 20px;
  box-sizing: border-box;
}

.wx-section + .wx-section {
  border-top: 1px solid var(--web-border);
}

.wx-head {
  max-width: 680px;
  margin: 0 auto clamp(32px, 6vw, 56px);
  text-align: center;
}

.wx-head__eyebrow {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
}

.wx-head__num {
  font-family: var(--wx-display);
  font-size: 1.9rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1;
}

.wx-head__label {
  font-family: var(--wx-caps);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--web-text-muted);
}

.wx-head__title {
  margin: 14px 0 0;
  font-family: var(--wx-display);
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

body[data-concept="noir"] .wx-head__title {
  font-weight: 600;
  letter-spacing: -0.02em;
}

.wx-head__lead {
  max-width: 540px;
  margin: 16px auto 0;
  font-family: var(--wx-display);
  font-size: clamp(1.08rem, 2.2vw, 1.28rem);
  font-style: italic;
  line-height: 1.6;
  color: var(--web-text);
}

.wx-head__rule {
  display: block;
  width: 64px;
  height: 1px;
  margin: 24px auto 0;
  background: var(--wx-foil);
}

/* --- Buttons ------------------------------------------------------------------ */

.wx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--wx-body);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.wx-btn--primary {
  background: var(--web-dark-green);
  color: var(--wx-on-primary);
}

.wx-btn--primary:hover {
  transform: translateY(-1px);
  color: var(--wx-on-primary);
}

.wx-btn--ghost {
  border-color: var(--web-border);
  background: var(--web-card-bg);
  color: var(--web-forest);
}

.wx-btn--ghost:hover {
  border-color: var(--web-gold);
}

.wx-btn--block {
  width: 100%;
}

.wx-btn:focus-visible,
.wx-map-toggle:focus-visible {
  outline: 2px solid var(--web-gold);
  outline-offset: 3px;
}

/* --- 01 Story (love-story.css, re-toned) ---------------------------------------- */

.love-story--website {
  --ls-paper: var(--web-card-bg);
  --ls-ring: var(--web-bg);
  --ls-line: var(--web-border);
  --ls-display: var(--wx-display, 'Cormorant Garamond', Georgia, serif);
  --ls-prose: var(--wx-display, 'Cormorant Garamond', Georgia, serif);
  --ls-caps: var(--wx-caps, 'Cinzel', Georgia, serif);
  background: var(--web-sand);
}

.love-story--website .ls-card {
  border-color: var(--web-border);
}

.ls-kicker .ls-num {
  font-family: var(--ls-display);
  font-size: 1.9rem;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
}

.ls-kicker:has(.ls-num)::before,
.ls-kicker:has(.ls-num)::after {
  display: none;
}

/* Photos sit in the card like a print with a torn, deckled edge. */
.love-story .ls-photo {
  margin: 12px 12px 0;
  background: transparent;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20400%20300%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%201.8L8%203.7L16%201.1L25%201.4L31%202.9L37%202.7L45%200.9L54%200.1L62%204.2L70%203.4L80%203.4L90%203.5L98%202.3L107%204.9L112%204.5L121%202.8L130%203.8L135%202.8L142%201.2L150%201.1L157%201.7L162%201.4L172%204.6L179%200.1L186%201.7L195%203.4L204%200.8L211%200L217%200.5L224%201.5L230%204.2L240%200.9L246%203.6L255%200.3L265%201.4L271%200.7L280%203.9L285%201.6L293%203L300%204.8L306%200.7L315%203L325%203.6L333%201.9L338%202.7L343%203.3L351%202.7L360%201.7L369%201.4L374%202.2L384%201.9L394%201.2L398.1%200L398%207L398.4%2016L398.5%2025L398.5%2035L397.3%2040L399.5%2050L399.9%2060L399%2068L398.4%2076L397.6%2082L396.7%2090L396.9%2096L398.1%20103L397.6%20112L398.2%20120L395.2%20127L397%20132L398%20137L397.3%20144L395.7%20149L398%20156L398.9%20165L398.8%20174L396.5%20181L396.2%20190L397.9%20200L397.1%20209L399.9%20217L396.3%20226L396.8%20234L399.9%20239L398.7%20248L399.3%20255L397.2%20265L397.9%20270L395%20275L400%20281L399.7%20286L396.1%20294L395.4%20299L400%20295.5L391%20296.6L381%20297.9L376%20299.9L366%20297.2L357%20296L351%20299L342%20299.9L333%20296.9L327%20299.5L317%20296.9L312%20297.6L304%20298L298%20297.2L292%20296.7L286%20295L277%20299.6L272%20297.2L263%20296.4L256%20297.7L246%20298.1L239%20299.7L231%20299.2L225%20295.4L220%20299.7L212%20297.7L207%20297.2L202%20299.6L196%20298.8L188%20299.3L179%20298.5L172%20296.6L166%20299.8L159%20299.8L152%20300L146%20296.3L137%20299.6L127%20297.9L118%20295.1L112%20298.6L103%20299.8L97%20299.2L87%20295.8L78%20299.5L70%20296.4L62%20299.1L54%20295.2L48%20298.2L40%20299.2L30%20297.1L25%20296L20%20296L14%20296.9L9%20295.3L0.1%20300L4.1%20290L1.3%20282L1.4%20274L3%20267L2.9%20259L4.7%20249L1.1%20239L4%20229L2.2%20223L4.4%20218L0.1%20212L0.7%20203L2%20193L4.7%20188L4%20183L0.5%20177L0.5%20172L3.2%20163L0.4%20154L3.3%20145L4.8%20139L2%20131L0.7%20123L4.5%20116L0.9%20111L2%20101L1.4%2093L1.1%2087L2.5%2080L2.4%2072L4.3%2064L4.7%2058L1%2052L0.9%2043L1.6%2037L4.4%2028L1.1%2022L3%2015L2.8%209L1.1%202Z%27%20fill%3D%27black%27%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20400%20300%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%201.8L8%203.7L16%201.1L25%201.4L31%202.9L37%202.7L45%200.9L54%200.1L62%204.2L70%203.4L80%203.4L90%203.5L98%202.3L107%204.9L112%204.5L121%202.8L130%203.8L135%202.8L142%201.2L150%201.1L157%201.7L162%201.4L172%204.6L179%200.1L186%201.7L195%203.4L204%200.8L211%200L217%200.5L224%201.5L230%204.2L240%200.9L246%203.6L255%200.3L265%201.4L271%200.7L280%203.9L285%201.6L293%203L300%204.8L306%200.7L315%203L325%203.6L333%201.9L338%202.7L343%203.3L351%202.7L360%201.7L369%201.4L374%202.2L384%201.9L394%201.2L398.1%200L398%207L398.4%2016L398.5%2025L398.5%2035L397.3%2040L399.5%2050L399.9%2060L399%2068L398.4%2076L397.6%2082L396.7%2090L396.9%2096L398.1%20103L397.6%20112L398.2%20120L395.2%20127L397%20132L398%20137L397.3%20144L395.7%20149L398%20156L398.9%20165L398.8%20174L396.5%20181L396.2%20190L397.9%20200L397.1%20209L399.9%20217L396.3%20226L396.8%20234L399.9%20239L398.7%20248L399.3%20255L397.2%20265L397.9%20270L395%20275L400%20281L399.7%20286L396.1%20294L395.4%20299L400%20295.5L391%20296.6L381%20297.9L376%20299.9L366%20297.2L357%20296L351%20299L342%20299.9L333%20296.9L327%20299.5L317%20296.9L312%20297.6L304%20298L298%20297.2L292%20296.7L286%20295L277%20299.6L272%20297.2L263%20296.4L256%20297.7L246%20298.1L239%20299.7L231%20299.2L225%20295.4L220%20299.7L212%20297.7L207%20297.2L202%20299.6L196%20298.8L188%20299.3L179%20298.5L172%20296.6L166%20299.8L159%20299.8L152%20300L146%20296.3L137%20299.6L127%20297.9L118%20295.1L112%20298.6L103%20299.8L97%20299.2L87%20295.8L78%20299.5L70%20296.4L62%20299.1L54%20295.2L48%20298.2L40%20299.2L30%20297.1L25%20296L20%20296L14%20296.9L9%20295.3L0.1%20300L4.1%20290L1.3%20282L1.4%20274L3%20267L2.9%20259L4.7%20249L1.1%20239L4%20229L2.2%20223L4.4%20218L0.1%20212L0.7%20203L2%20193L4.7%20188L4%20183L0.5%20177L0.5%20172L3.2%20163L0.4%20154L3.3%20145L4.8%20139L2%20131L0.7%20123L4.5%20116L0.9%20111L2%20101L1.4%2093L1.1%2087L2.5%2080L2.4%2072L4.3%2064L4.7%2058L1%2052L0.9%2043L1.6%2037L4.4%2028L1.1%2022L3%2015L2.8%209L1.1%202Z%27%20fill%3D%27black%27%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat;
}

.love-story--envelope .ls-photo {
  margin: 10px 10px 0;
}

/* --- 02 Schedule ------------------------------------------------------------------ */

.wx-program__list {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.wx-program__list::before {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 96px;
  width: 1px;
  background: var(--web-border);
}

.wx-program__stop {
  position: relative;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  column-gap: 34px;
  align-items: baseline;
  padding: 14px 0;
}

.wx-program__stop::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 92px;
  width: 9px;
  height: 9px;
  border: 1px solid var(--web-gold);
  border-radius: 50%;
  background: var(--web-bg);
  transform: translateY(-50%);
}

.wx-program__time {
  font-family: var(--wx-display);
  font-size: 1.6rem;
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  text-align: right;
}

.wx-program__title {
  font-family: var(--wx-display);
  font-size: clamp(1.18rem, 2.6vw, 1.4rem);
  line-height: 1.35;
  color: var(--web-forest);
}

/* --- 03 Venue --------------------------------------------------------------------- */

.wx-venue .web-venue-card {
  max-width: 760px;
  padding: clamp(22px, 5vw, 38px);
  border: 1px solid var(--web-border);
  border-radius: 22px;
  background: var(--web-card-bg);
  box-shadow: 0 30px 60px -44px var(--wx-shadow);
}

.wx-venue__when {
  margin: 0 0 18px;
  text-align: center;
  font-family: var(--wx-caps);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--web-dark-green);
}

.wx-venue__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.wx-venue__nav .wx-btn--ghost {
  min-height: 40px;
  padding: 0 16px;
  font-size: 0.8rem;
}

.wx-venue__notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0 24px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.wx-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-top: 1px solid var(--web-border);
}

.wx-note__icon {
  flex: none;
  width: 24px;
  font-size: 1.05rem;
  line-height: 1.4;
  text-align: center;
}

.wx-note__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--web-text-muted);
}

.wx-note__body strong {
  font-family: var(--wx-caps);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--web-forest);
}

.wx-venue .web-map-frame-wrap {
  height: auto;
  margin-top: 22px;
  border: 1px solid var(--web-border);
  border-radius: 16px;
  box-shadow: none;
}

.wx-venue .web-map-frame-wrap.is-loaded {
  height: clamp(240px, 45vw, 340px);
}

.wx-map-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 96px;
  padding: 18px;
  border: 0;
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, var(--web-border) 14px 15px),
    var(--web-sand);
  color: var(--web-forest);
  cursor: pointer;
}

.wx-map-toggle__label {
  font-family: var(--wx-caps);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.wx-map-toggle__hint {
  font-size: 0.74rem;
  color: var(--web-text-muted);
}

/* --- 04 RSVP ---------------------------------------------------------------------- */

.wx-rsvp .web-rsvp-split-card {
  display: block;
  max-width: 720px;
  padding: clamp(20px, 5vw, 40px);
  border: 1px solid var(--web-border);
  border-radius: 22px;
  background: var(--web-card-bg);
  box-shadow: 0 30px 60px -44px var(--wx-shadow);
}

/* Each choice as wide as its label; they wrap to a second row only when a
   translation is too long for one. */
.wx-rsvp .rsvp-pills-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.wx-rsvp .rsvp-pill-label {
  flex: 1 1 auto;
  width: auto;
  white-space: nowrap;
  font-weight: 600;
  cursor: pointer;
  min-height: 46px;
  padding: 8px 6px;
  border: 1px solid var(--wx-input-border);
  border-radius: 12px;
  background: var(--wx-input-bg);
  color: var(--web-text);
  font-family: var(--wx-body);
  font-size: 0.82rem;
  line-height: 1.2;
  text-align: center;
}

.wx-rsvp .rsvp-pill-label.active-attending {
  border-color: var(--web-dark-green);
  background: var(--web-dark-green);
  color: var(--wx-on-primary);
  box-shadow: none;
}

.wx-rsvp .rsvp-form-row-2 {
  gap: 12px;
  margin-bottom: 0;
}

.wx-rsvp .web-field-group {
  margin-bottom: 14px;
}

.wx-rsvp .web-field-label,
.wx-rsvp legend.web-field-label {
  margin-bottom: 5px;
  font-family: var(--wx-caps);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  color: var(--web-text-muted);
}

.wx-rsvp .web-input,
.wx-dj .web-input {
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--wx-input-border);
  border-radius: 12px;
  background: var(--wx-input-bg);
  color: var(--web-text);
  font-family: var(--wx-body);
  font-size: 0.92rem;
}

.wx-rsvp textarea.web-input {
  min-height: 70px;
}

.wx-rsvp .web-input:focus,
.wx-dj .web-input:focus {
  border-color: var(--web-dark-green);
  box-shadow: 0 0 0 3px var(--web-border);
}

.wx-rsvp__consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 4px 0 16px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--web-text-muted);
}

.wx-rsvp__consent a {
  color: inherit;
  text-decoration: underline;
}

.wx-rsvp__consent input {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  accent-color: var(--web-dark-green);
}

.wx-rsvp .btn-rsvp-submit {
  margin-top: 0;
  border-radius: 999px;
  background: var(--web-dark-green);
  color: var(--wx-on-primary);
  font-family: var(--wx-caps);
  box-shadow: none;
}

.wx-rsvp .btn-rsvp-submit:hover {
  background: var(--web-dark-green);
  box-shadow: 0 16px 30px -18px var(--wx-shadow);
}

/* --- 05 Gift ---------------------------------------------------------------------- */

.wx-gift__card {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  padding: 44px clamp(20px, 6vw, 44px) clamp(26px, 5vw, 36px);
  border: 1px solid var(--web-border);
  border-radius: 20px;
  background: var(--web-card-bg);
  box-shadow: inset 0 0 0 7px var(--web-card-bg), inset 0 0 0 8px var(--web-border), 0 30px 60px -44px var(--wx-shadow);
  text-align: center;
}

.wx-gift__seal {
  position: absolute;
  top: -26px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--web-gold-light), var(--web-gold-dark));
  color: var(--wx-on-primary);
  font-family: var(--wx-display);
  font-size: 1rem;
  font-weight: 600;
  box-shadow: 0 10px 22px -10px var(--wx-shadow);
  transform: translateX(-50%);
}

.wx-gift__holder {
  margin: 0;
  font-family: var(--wx-display);
  font-size: 1.5rem;
  color: var(--web-forest);
}

.wx-gift__bank {
  margin: 4px 0 0;
  font-family: var(--wx-caps);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--web-text-muted);
}

.wx-gift__iban {
  margin: 18px 0 20px;
}

.wx-gift__iban code {
  display: inline-block;
  max-width: 100%;
  padding: 12px 16px;
  border: 1px dashed var(--web-border);
  border-radius: 12px;
  background: var(--web-bg);
  color: var(--web-forest);
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  font-size: clamp(0.86rem, 3.4vw, 1.05rem);
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
}

/* --- Photo wall and song requests -------------------------------------------------- */

.wx-extra__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.wx-dj__form {
  max-width: 640px;
  margin: 0 auto;
}

.wx-dj__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

/* --- Closing ---------------------------------------------------------------------- */

.wx-closing {
  padding: clamp(64px, 10vw, 110px) 20px clamp(40px, 6vw, 60px);
  border-top: 1px solid var(--web-border);
  background: var(--web-sand);
  text-align: center;
}

.wx-closing__kicker {
  margin: 0 0 12px;
  font-family: var(--wx-caps);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--web-text-muted);
}

.wx-closing__names {
  margin: 0;
  font-family: var(--wx-display);
  font-size: clamp(2.6rem, 8vw, 4.4rem);
  font-weight: 400;
  line-height: 1.05;
}

.wx-closing__names em {
  font-family: var(--wx-script);
  font-style: normal;
  font-size: 0.7em;
}

.wx-closing__meta {
  margin: 14px 0 28px;
  font-family: var(--wx-caps);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--web-dark-green);
}

.wx-closing__brand {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--web-text-muted);
}

.wx-closing__brand a {
  color: inherit;
}

/* --- Phones ----------------------------------------------------------------------- */

@media (max-width: 600px) {
  .wx-site .lang-btn {
    padding: 5px 9px;
  }

  .wx-section {
    padding: 56px 16px;
  }

  .wx-head {
    margin-bottom: 28px;
  }

  .wx-program__list::before {
    left: 72px;
  }

  .wx-program__stop {
    grid-template-columns: 58px minmax(0, 1fr);
    column-gap: 28px;
    padding: 11px 0;
  }

  .wx-program__stop::before {
    left: 68px;
  }

  .wx-program__time {
    font-size: 1.3rem;
  }

  /* Three choices on one row on a 390px phone in Turkish. */
  .wx-rsvp .web-rsvp-split-card {
    padding: 18px 16px;
  }

  .wx-rsvp .rsvp-pill-label {
    padding: 8px 6px;
    font-size: 0.7rem;
    letter-spacing: -0.01em;
  }

  /* Party size stays side by side; name and e-mail stack. */
  .wx-rsvp #web-rsvp-extra-fields .rsvp-form-row-2 {
    grid-template-columns: 1fr 1fr;
  }

  .wx-dj__grid {
    grid-template-columns: 1fr;
  }

  .wx-venue__notes {
    grid-template-columns: 1fr;
  }

  /* Directions first, the other map apps as one row beneath it. */
  .wx-venue__nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .wx-venue__nav .wx-btn--primary {
    grid-column: 1 / -1;
  }

  .wx-venue__nav .wx-btn--ghost {
    padding: 0 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wx-btn,
  .wx-btn--primary:hover {
    transition: none;
    transform: none;
  }
}