@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Great+Vibes&family=Montserrat:wght@300;400;500;600&display=swap");

:root {
  --paper: #f3efe8;

  --paper-deep: #f3efe8;

  --ink: #433e38;

  --muted: #766f66;

  --sage: #625d55;

  --olive: #625d55;

  --line: rgba(67, 62, 56, 0.15);

  --glass: rgba(243, 239, 232, 0.9);

  --serif: "Cormorant Garamond", Georgia, serif;

  --sans: "Montserrat", Arial, sans-serif;

  --script: "Great Vibes", "Segoe Script", cursive;

  --shadow: 0 20px 60px rgba(49, 43, 36, 0.18);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

.scroll-cue {
  font-weight: 700;
  color: #514438;
  text-shadow:
    0 1px 3px #fffaf2,
    0 0 8px #fffaf2;
}

body {
  min-width: 320px;

  margin: 0;

  color: var(--ink);

  background:
    radial-gradient(circle at 18% 18%,

      rgba(255, 255, 255, 0.88),
      transparent 32rem),
    #e9e5de;

  font-family: var(--sans);

  font-size: 14px;

  line-height: 1.75;
}

body.sheet-open {
  overflow: hidden;
}

/* ======================================================

   SUBTLE MINIMALIST INTRO BACKGROUND

   ====================================================== */

.intro-section {
  position: relative;

  isolation: isolate;

  overflow: hidden;

  background: var(--paper);
}

.intro-section .section-inner {
  position: relative;

  z-index: 2;
}

/* Organic linework lives in CSS so the HTML stays clean. */

.intro-section::before,
.intro-section::after {
  position: absolute;

  inset: auto;

  z-index: 0;

  width: clamp(220px, 64vw, 330px);

  height: clamp(300px, 82vw, 430px);

  content: "";

  background-position: center;

  background-repeat: no-repeat;

  background-size: contain;

  pointer-events: none;
}

.intro-section::before {
  top: -92px;

  right: -112px;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 380'%3E%3Cpath d='M22 35 C82 65 72 126 132 151 C183 172 157 226 205 256 C233 274 251 310 262 356' fill='none' stroke='%236a635b' stroke-opacity='.18' stroke-width='1.15' stroke-linecap='round'/%3E%3Cpath d='M65 18 C89 73 139 77 159 119 C177 157 162 189 191 211 C213 228 239 226 266 207' fill='none' stroke='%236a635b' stroke-opacity='.12' stroke-width='1' stroke-linecap='round'/%3E%3Cpath d='M105 16 C112 64 94 102 111 133 C132 172 191 164 201 201 C211 238 179 264 190 307' fill='none' stroke='%236a635b' stroke-opacity='.09' stroke-width='.9' stroke-linecap='round'/%3E%3C/svg%3E");
}

.intro-section::after {
  bottom: -112px;

  left: -104px;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 380'%3E%3Cpath d='M18 350 C61 304 131 318 119 250 C111 203 68 184 86 126 C105 64 181 88 258 21' fill='none' stroke='%236a635b' stroke-opacity='.18' stroke-width='1.15' stroke-linecap='round'/%3E%3Cpath d='M43 330 C82 288 65 247 56 213 C45 169 72 137 127 118 C168 104 193 73 202 37' fill='none' stroke='%236a635b' stroke-opacity='.12' stroke-width='1' stroke-linecap='round'/%3E%3Cpath d='M20 279 C68 250 103 262 135 242 C168 221 163 181 195 161 C218 147 239 150 265 139' fill='none' stroke='%236a635b' stroke-opacity='.09' stroke-width='.9' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Make the closing message cleaner */

.intro-note {
  max-width: 340px;

  margin: clamp(38px, 10vw, 70px) auto 0;

  padding-top: 24px;

  border-top: 1px solid rgba(73, 68, 60, 0.15);

  color: #716a61;

  text-align: center;
}

button,
input,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #5d6257;

  outline-offset: 3px;
}

/* ======================================================

   BM / EN LANGUAGE BUTTON

   ====================================================== */

.language-toggle {
  position: fixed;

  top: max(14px, env(safe-area-inset-top));

  right: max(14px, env(safe-area-inset-right));

  z-index: 99999;

  display: flex;

  align-items: center;

  justify-content: center;

  min-width: 58px;

  min-height: 38px;

  padding: 9px 12px;

  border: 1px solid rgba(67, 62, 56, 0.18);

  border-radius: 999px;

  background: rgba(243, 239, 232, 0.92);

  color: var(--ink);

  font-family: Arial, sans-serif;

  font-size: 0.7rem;

  font-weight: 700;

  line-height: 1;

  letter-spacing: 0.08em;

  box-shadow: 0 5px 18px rgba(67, 62, 56, 0.13);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  cursor: pointer;

  appearance: none;

  -webkit-appearance: none;
}

.language-toggle:hover {
  background: #ebe5dc;
}

.language-toggle:focus-visible {
  outline: 2px solid var(--ink);

  outline-offset: 3px;
}

@media (max-width: 480px) {
  .language-toggle {
    top: max(10px, env(safe-area-inset-top));

    right: max(10px, env(safe-area-inset-right));

    min-width: 52px;

    min-height: 36px;
  }
}

.page-stage {
  min-height: 100dvh;
}

.invitation {
  position: relative;

  width: min(100%, 520px);

  min-height: 100dvh;

  margin: 0 auto;

  overflow: hidden;

  background: var(--paper);

  box-shadow: 0 0 70px rgba(50, 44, 37, 0.16);
}

/* Soft floral artwork on the first page too. */

.hero {
  position: relative;

  display: grid;

  min-height: 100svh;

  place-items: center;

  overflow: hidden;

  background: var(--paper) url("./assets/new_background.png") center / cover no-repeat;
}

.hero-content {
  position: relative;

  z-index: 2;

  width: 100%;

  padding: clamp(72px, 12vh, 122px) 32px 40px;

  text-align: center;
}

.eyebrow {
  margin: 0 0 12px;

  color: var(--olive);

  font-size: 0.68rem;

  font-weight: 600;

  letter-spacing: 0.24em;

  text-transform: uppercase;
}

.couple-name {
  display: flex;

  flex-direction: column;

  align-items: center;

  margin: 0;

  color: #38342f;

  font-family: var(--script);

  font-size: clamp(4rem, 18vw, 6.25rem);

  font-weight: 400;

  line-height: 0.67;

  text-shadow: none;
}

.couple-name small {
  margin: 16px 0 22px;

  font-family: var(--serif);

  font-size: 1.4rem;

  font-style: italic;

  font-weight: 400;

  line-height: 1;
}

.hero-date {
  margin: 36px 0 0;

  font-size: 0.72rem;

  font-weight: 500;

  letter-spacing: 0.16em;

  text-transform: uppercase;
}

.scroll-cue {
  position: absolute;

  z-index: 3;

  bottom: 24px;

  left: 50%;

  display: flex;

  align-items: center;

  gap: 10px;

  margin: 0;

  color: var(--muted);

  font-size: 0.55rem;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  transform: translateX(-50%);

  white-space: nowrap;
}

.scroll-cue span {
  width: 18px;

  height: 30px;

  border: 1px solid rgba(48, 45, 41, 0.3);

  border-radius: 12px;
}

.scroll-cue span::after {
  display: block;

  width: 2px;

  height: 6px;

  margin: 6px auto;

  border-radius: 2px;

  content: "";

  background: var(--muted);

  animation: scroll-dot 1.8s ease-in-out infinite;
}

.paper-section {
  position: relative;

  background: var(--paper);
}

.paper-section::after {
  position: absolute;

  inset: 0;

  content: "";

  pointer-events: none;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

.section-inner {
  position: relative;

  z-index: 1;

  padding: 78px 30px;
}

.intro-section {
  min-height: 690px;

  display: grid;

  place-items: center;

  text-align: center;
}

.intro-section .section-inner {
  padding-top: 130px;

  padding-bottom: 130px;
}

.bismillah {
  margin: 0 0 28px;

  color: var(--olive);

  font-family: "Times New Roman", serif;

  font-size: 1.6rem;
}

.intro-copy,
.intro-note {
  max-width: 400px;

  margin: 0 auto 30px;

  color: #5e5851;

  font-family: var(--serif);

  font-size: 1.05rem;

  line-height: 1.7;
}

.intro-note {
  margin-top: 34px;

  margin-bottom: 0;

  font-size: 0.98rem;

  font-style: italic;
}

.full-name {
  max-width: 430px;

  margin: 0 auto;

  font-family: var(--serif);

  font-size: clamp(1.7rem, 7vw, 2.35rem);

  font-weight: 500;

  line-height: 1.05;

  text-transform: uppercase;
}

.ampersand {
  margin: 10px 0 8px;

  font-family: var(--script);

  font-size: 2.4rem;

  line-height: 1;
}

.section-heading {
  margin-bottom: 34px;

  text-align: center;
}

.section-heading h2,
.countdown-section h2,
.sheet-panel h2 {
  margin: 0;

  font-family: var(--serif);

  font-size: clamp(2.3rem, 10vw, 3.7rem);

  font-weight: 500;

  line-height: 1;
}

.date-time-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 12px;
}

.date-card {
  min-height: 210px;

  padding: 24px 18px;

  border: 1px solid rgba(65, 60, 54, 0.14);

  border-radius: 140px 140px 20px 20px;

  background: rgba(255, 255, 255, 0.34);

  text-align: center;

  box-shadow: inset 0 1px rgba(255, 255, 255, 0.6);
}

.card-label {
  margin: 0;

  color: var(--muted);

  font-size: 0.63rem;

  font-weight: 600;

  letter-spacing: 0.2em;

  text-transform: uppercase;
}

.date-card strong {
  display: block;

  margin: 14px 0 0;

  font-family: var(--serif);

  font-size: 4.1rem;

  font-weight: 400;

  line-height: 0.8;
}

.date-card .time-number {
  margin-top: 22px;

  font-size: 3.1rem;
}

.date-card p {
  margin: 18px 0 0;

  font-size: 0.68rem;

  font-weight: 500;

  letter-spacing: 0.04em;

  text-transform: uppercase;
}

.date-card small {
  display: block;

  margin-top: 5px;

  color: var(--muted);

  font-family: var(--serif);

  font-size: 0.88rem;

  font-style: italic;
}

.venue-grid {
  display: grid;

  gap: 14px;

  margin-top: 16px;
}

.venue-card {
  display: grid;

  grid-template-columns: 50px minmax(0, 1fr);

  gap: 18px;

  padding: 23px 22px;

  border: 1px solid var(--line);

  border-radius: 20px;

  background: rgba(255, 255, 255, 0.34);

  box-shadow: inset 0 1px rgba(255, 255, 255, 0.65);
}

.venue-date {
  display: grid;

  width: 50px;

  height: 50px;

  place-items: center;

  border: 1px solid var(--line);

  border-radius: 50%;

  color: var(--muted);

  font-family: var(--sans);

  font-size: 0.64rem;

  font-weight: 600;

  letter-spacing: 0.03em;
}

.venue-card h3 {
  margin: 5px 0 2px;

  font-family: var(--serif);

  font-size: 1.55rem;

  font-weight: 600;

  line-height: 1.1;
}

.venue-card p:not(.card-label) {
  margin: 7px 0 0;

  color: #6a625a;

  font-family: var(--serif);

  font-size: 0.95rem;

  line-height: 1.45;
}

.venue-card>a {
  grid-column: 2;

  justify-self: start;

  color: var(--ink);

  font-size: 0.64rem;

  font-weight: 600;

  letter-spacing: 0.08em;

  text-decoration: none;

  text-transform: uppercase;
}

.venue-links {
  grid-column: 2;

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 10px 20px;

  margin-top: -4px;
}

.venue-links a {
  padding-bottom: 3px;

  border-bottom: 1px solid rgba(67, 62, 56, 0.35);

  color: var(--ink);

  font-family: var(--sans);

  font-size: 0.64rem;

  font-weight: 600;

  letter-spacing: 0.08em;

  line-height: 1.4;

  text-decoration: none;

  text-transform: uppercase;

  white-space: nowrap;

  transition: 0.2s ease;
}

.venue-links a:hover {
  border-color: var(--ink);

  opacity: 0.65;
}

@media (max-width: 480px) {
  .venue-links {
    gap: 9px 16px;
  }

  .venue-links a {
    flex: none;
  }
}

/* ======================================================

   ADD TO CALENDAR

   ====================================================== */

.calendar-actions {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;

  width: 100%;

  margin-top: 24px;
}

.calendar-actions .primary-button,
.calendar-google-button {
  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 48px;

  padding: 12px 14px;

  border-radius: 999px;

  font-family: Arial, sans-serif;

  font-size: 0.72rem;

  font-weight: 700;

  line-height: 1.2;

  letter-spacing: 0.06em;

  text-align: center;

  text-decoration: none;
}

.calendar-google-button {
  border: 1px solid #373b38;

  background: transparent;

  color: #373b38;
}

.calendar-google-button:hover {
  background: #373b38;

  color: #ffffff;
}

/* ======================================================

   MINIMAL CALENDAR LINK

   ====================================================== */

.calendar-inline {
  display: flex;

  justify-content: center;

  margin: clamp(20px, 6vw, 34px) 0 clamp(38px, 10vw, 60px);
}

.calendar-inline button {
  display: inline-flex;

  align-items: center;

  gap: 9px;

  width: auto;

  min-height: auto;

  margin: 0;

  padding: 5px 0;

  border: 0;

  border-bottom: 1px solid rgba(55, 51, 46, 0.35);

  border-radius: 0;

  background: transparent;

  color: #69635b;

  font-family: Arial, sans-serif;

  font-size: clamp(0.65rem, 2.6vw, 0.76rem);

  font-weight: 600;

  letter-spacing: 0.05em;

  line-height: 1.5;

  cursor: pointer;
}

.calendar-inline button>span:first-child {
  font-family: Arial, sans-serif;

  font-size: 1rem;

  font-weight: 300;

  line-height: 1;
}

.calendar-inline button:hover {
  border-bottom-color: #37332e;

  color: #37332e;
}

.calendar-inline button:focus-visible {
  outline: 1px solid #37332e;

  outline-offset: 5px;
}

/* Small phones */

@media (max-width: 350px) {
  .calendar-save {
    gap: 14px;

    padding-inline: 10px;
  }

  .calendar-date {
    width: 62px;
  }

  .calendar-save-links {
    align-items: flex-start;

    flex-direction: column;

    gap: 7px;
  }

  .calendar-save-links>span {
    display: none;
  }
}

@media (max-width: 380px) {
  .calendar-actions {
    grid-template-columns: 1fr;
  }
}

.programme-section {
  background: var(--paper);
}

.timeline {
  display: grid;

  gap: 0;

  margin: 0;

  padding: 0;

  list-style: none;
}

.timeline li {
  display: grid;

  grid-template-columns: 72px 18px minmax(0, 1fr);

  gap: 13px;

  min-height: 94px;
}

.timeline time {
  padding-top: 3px;

  font-size: 0.62rem;

  font-weight: 600;

  letter-spacing: 0.06em;
}

.timeline li>span {
  position: relative;

  width: 1px;

  height: 100%;

  background: rgba(48, 45, 41, 0.23);
}

.timeline li>span::before {
  position: absolute;

  top: 2px;

  left: -4px;

  width: 9px;

  height: 9px;

  border: 2px solid var(--paper);

  border-radius: 50%;

  content: "";

  background: var(--olive);

  box-shadow: 0 0 0 1px var(--olive);
}

.timeline h3 {
  margin: 0;

  font-family: var(--serif);

  font-size: 1.4rem;

  font-weight: 600;

  line-height: 1;
}

.timeline p {
  margin: 7px 0 0;

  color: #71695f;

  font-family: var(--serif);

  font-size: 0.94rem;
}

.countdown-section {
  position: relative;

  display: grid;

  min-height: 550px;

  place-items: center;

  overflow: hidden;

  color: var(--ink);

  background: var(--paper);

  text-align: center;
}

.countdown-section::before,
.countdown-section::after {
  position: absolute;

  z-index: 0;

  width: clamp(210px, 60vw, 315px);

  height: clamp(270px, 76vw, 400px);

  content: "";

  background-position: center;

  background-repeat: no-repeat;

  background-size: contain;

  pointer-events: none;
}

.countdown-section::before {
  top: -86px;

  right: -108px;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 270 350'%3E%3Cpath d='M28 22 C85 42 83 102 130 126 C179 151 153 205 192 231 C222 251 240 286 252 330' fill='none' stroke='%236a635b' stroke-opacity='.18' stroke-width='1.15' stroke-linecap='round'/%3E%3Cpath d='M66 14 C86 68 128 74 151 108 C176 145 164 178 187 198 C211 220 237 219 258 206' fill='none' stroke='%236a635b' stroke-opacity='.12' stroke-width='1' stroke-linecap='round'/%3E%3Cpath d='M115 18 C120 59 103 93 119 127 C139 169 192 168 205 204 C216 235 194 266 204 316' fill='none' stroke='%236a635b' stroke-opacity='.08' stroke-width='.9' stroke-linecap='round'/%3E%3C/svg%3E");
}

.countdown-section::after {
  bottom: -104px;

  left: -96px;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 270 350'%3E%3Cpath d='M18 330 C62 294 123 301 118 244 C114 196 72 183 86 133 C104 74 169 87 248 22' fill='none' stroke='%236a635b' stroke-opacity='.18' stroke-width='1.15' stroke-linecap='round'/%3E%3Cpath d='M38 344 C88 306 71 268 63 230 C54 187 82 154 126 137 C166 121 188 88 193 50' fill='none' stroke='%236a635b' stroke-opacity='.12' stroke-width='1' stroke-linecap='round'/%3E%3Cpath d='M24 255 C73 228 106 240 138 217 C168 195 168 159 198 140 C220 126 241 128 263 116' fill='none' stroke='%236a635b' stroke-opacity='.08' stroke-width='.9' stroke-linecap='round'/%3E%3C/svg%3E");
}

.countdown-section .section-inner {
  position: relative;

  z-index: 1;
}

.countdown-section .eyebrow {
  color: var(--olive);
}

.countdown {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  margin-top: 38px;

  border-top: 1px solid rgba(67, 62, 56, 0.24);

  border-bottom: 1px solid rgba(67, 62, 56, 0.24);
}

.countdown>div {
  padding: 22px 5px 20px;

  border-right: 1px solid rgba(67, 62, 56, 0.16);
}

.countdown>div:last-child {
  border-right: 0;
}

.countdown strong {
  display: block;

  font-family: var(--serif);

  font-size: clamp(1.65rem, 8vw, 2.4rem);

  font-weight: 400;

  line-height: 1;
}

.countdown span {
  display: block;

  margin-top: 8px;

  font-size: 0.5rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}

/* ======================================================

   FULL-SCREEN AR-RUM SECTION

   ====================================================== */

.gallery-section {
  position: relative;

  display: grid;

  min-height: 100svh;

  place-items: center;

  overflow: hidden;

  background: var(--paper);
}

.gallery-section::before {
  position: absolute;

  inset: 0;

  z-index: 0;

  content: "";

  background-image: url("./assets/wedding-initials-v2.png");

  background-position: center;

  background-repeat: no-repeat;

  background-size: clamp(350px, 108vw, 540px) auto;

  filter: grayscale(1) contrast(1.15);

  mix-blend-mode: multiply;

  opacity: 0.055;

  pointer-events: none;
}

.gallery-section .ar-rum-inner {
  display: flex;

  width: 100%;

  min-height: 100svh;

  max-width: 500px;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  padding: clamp(80px, 14vh, 130px) clamp(30px, 9vw, 54px);

  text-align: center;
}

.gallery-quote {
  position: relative;

  z-index: 1;

  width: 100%;

  max-width: 390px;

  margin: 0;

  padding: 0;

  color: #575149;
}

.gallery-quote .quote-mark {
  display: block;

  margin-bottom: 24px;

  font-family: var(--serif);

  font-size: clamp(2.8rem, 10vw, 4.2rem);

  font-weight: 500;

  line-height: 0.55;
}

.gallery-quote .quote-mark-closing {
  margin: 24px 0 0;

  text-align: right;
}

.gallery-quote p {
  margin: 0;

  overflow-wrap: break-word;

  font-family: var(--serif);

  font-size: clamp(1.35rem, 5.8vw, 1.9rem);

  font-style: italic;

  line-height: 1.5;
}

.gallery-quote cite {
  display: block;

  margin-top: 28px;

  font-family: var(--sans);

  font-size: 0.55rem;

  font-style: normal;

  font-weight: 600;

  letter-spacing: 0.18em;

  text-transform: uppercase;
}

.wish-list {
  display: grid;

  gap: 12px;
}

.wish-card {
  position: relative;

  padding: 24px 23px;

  border: 1px solid var(--line);

  border-radius: 20px;

  background: rgba(255, 255, 255, 0.34);
}

.wish-card p {
  margin: 0;

  font-family: var(--serif);

  font-size: 1.08rem;

  font-style: italic;

  line-height: 1.45;
}

.wish-card span {
  display: block;

  margin-top: 12px;

  color: var(--muted);

  font-size: 0.58rem;

  font-weight: 600;

  letter-spacing: 0.1em;

  text-transform: uppercase;
}

.wish-empty {
  padding: 34px 24px;

  text-align: center;
}

.wish-empty p {
  color: var(--muted);
}

.wish-empty span {
  display: block;

  margin-top: 10px;
}

.primary-button {
  width: 100%;

  margin-top: 18px;

  padding: 15px 20px;

  border: 1px solid var(--ink);

  border-radius: 999px;

  color: #f7f3ec;

  background: var(--ink);

  cursor: pointer;

  font-size: 0.66rem;

  font-weight: 600;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  transition:
    transform 0.25s ease,
    background 0.25s ease;
}

.primary-button:hover {
  background: #4b4842;

  transform: translateY(-2px);
}

.footer {
  padding: 70px 30px 130px;

  border-top: 1px solid rgba(255, 255, 255, 0.1);

  color: var(--paper);

  background: var(--ink);

  text-align: center;
}

.script-small {
  margin: 0 0 4px;

  font-family: var(--script);

  font-size: 3.2rem;

  line-height: 1;
}

.footer p:not(.script-small),
.footer span {
  display: block;

  margin: 0;

  font-size: 0.6rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}

.footer span {
  margin-top: 15px;

  color: rgba(243, 239, 232, 0.62);
}

.youtube-player-shell {
  position: fixed;

  top: 0;

  left: -9999px;

  width: 200px;

  height: 200px;

  opacity: 0;

  pointer-events: none;
}

.seal:disabled {
  cursor: wait;

  opacity: 0.8;
}

.dock {
  position: fixed;

  z-index: 40;

  right: 50%;

  bottom: max(12px, env(safe-area-inset-bottom));

  display: grid;

  width: min(calc(100% - 24px), 496px);

  /*grid-template-columns: repeat(5, 1fr);*/

  grid-template-columns: repeat(4, 1fr);

  /*padding: 10px 6px 8px;*/

  padding: 6px 8px 8px;

  border: 1px solid rgba(255, 255, 255, 0.5);

  border-radius: 22px;

  opacity: 0;

  background: rgba(236, 232, 224, 0.84);

  box-shadow: 0 14px 42px rgba(39, 35, 30, 0.22);

  backdrop-filter: blur(18px);

  transform: translate(50%, 24px);

  transition:
    opacity 0.6s ease 0.8s,
    transform 0.6s ease 0.8s;

  pointer-events: none;

  /* Dock now contains four buttons */

  .dock {
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .dock button {
    width: 100%;

    min-width: 0;
  }
}

body.invitation-open .dock {
  opacity: 1;

  transform: translate(50%, 0);

  pointer-events: auto;
}

.dock button {
  display: grid;

  gap: 2px;

  min-width: 0;

  place-items: center;

  padding: 4px 1px;

  border: 0;

  color: var(--ink);

  background: transparent;

  cursor: pointer;
}

.dock button>span {
  display: grid;

  width: 33px;

  height: 28px;

  place-items: center;

  font-family: var(--serif);

  font-size: 1.25rem;

  transition: transform 0.25s ease;
}

.dock button:hover>span,
.dock button[aria-pressed="true"]>span {
  transform: translateY(-2px);
}

.dock small {
  overflow: hidden;

  font-size: 0.48rem;

  font-weight: 600;

  letter-spacing: 0.06em;

  text-overflow: ellipsis;

  text-transform: uppercase;
}

.cover {
  position: fixed;

  z-index: 100;

  inset: 0;

  width: min(100%, 520px);

  margin: auto;

  overflow: hidden;

  background: var(--paper);

  transition: visibility 0s linear 1.65s;
}

.cover-door {
  position: absolute;

  top: 0;

  bottom: 0;

  width: 50.2%;

  background: rgba(239, 236, 230, 0.16);

  backdrop-filter: blur(2px);

  transition: transform 1.35s cubic-bezier(0.72, 0, 0.26, 1) 0.28s;
}

.cover-door-left {
  left: 0;

  border-right: 1px solid rgba(51, 47, 42, 0.36);
}

.cover-door-right {
  right: 0;

  border-left: 1px solid rgba(255, 255, 255, 0.26);
}

.cover-seam {
  position: absolute;

  top: 0;

  bottom: 0;

  left: 50%;

  width: 1px;

  background: rgba(53, 49, 44, 0.28);

  transform: translateX(-50%);

  transition: opacity 0.4s ease;
}

.seal {
  position: absolute;

  top: 50%;

  left: 50%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  width: 150px;

  height: 150px;

  padding: 8px 8px 7px;

  gap: 0;

  border: 1px solid rgba(54, 50, 45, 0.12);

  border-radius: 50%;

  color: var(--ink);

  background: rgba(226, 222, 214, 0.93);

  box-shadow:
    0 14px 28px rgba(46, 41, 35, 0.24),
    inset 0 1px rgba(255, 255, 255, 0.75);

  cursor: pointer;

  appearance: none;

  -webkit-appearance: none;

  transform: translate(-50%, -50%);

  transition:
    opacity 0.4s ease,
    transform 0.5s ease;
}

.seal-initials {
  display: block;

  width: 112px;

  max-width: 88%;

  max-height: 98px;

  margin: -6px 0 -3px;

  object-fit: contain;

  pointer-events: none;
}

.seal small {
  display: block;

  margin: 0;

  font-size: 0.5rem;

  font-weight: 600;

  line-height: 1.2;

  letter-spacing: 0.16em;

  white-space: nowrap;

  text-transform: uppercase;
}

.seal:hover {
  transform: translate(-50%, -50%) scale(1.035);
}

body.invitation-open .cover {
  visibility: hidden;

  pointer-events: none;
}

body.invitation-open .cover-door-left {
  transform: translateX(-101%);
}

body.invitation-open .cover-door-right {
  transform: translateX(101%);
}

body.invitation-open .seal {
  opacity: 0;

  transform: translate(-50%, -50%) scale(0.88);
}

body.invitation-open .cover-seam {
  opacity: 0;
}

.sheet {
  position: fixed;

  z-index: 80;

  inset: 0;

  display: grid;

  align-items: end;

  visibility: hidden;

  opacity: 0;

  transition:
    opacity 0.3s ease,
    visibility 0s linear 0.3s;
}

.sheet.is-open {
  visibility: visible;

  opacity: 1;

  transition-delay: 0s;
}

.sheet-backdrop {
  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  border: 0;

  background: rgba(35, 32, 28, 0.38);

  cursor: pointer;

  backdrop-filter: blur(4px);
}

.sheet-panel {
  position: relative;

  z-index: 1;

  width: min(100%, 520px);

  max-height: min(78dvh, 680px);

  margin: 0 auto;

  overflow: auto;

  padding: 42px 26px max(34px, env(safe-area-inset-bottom));

  border-radius: 28px 28px 0 0;

  background:
    radial-gradient(circle at 90% 10%,

      rgba(255, 255, 255, 0.86),
      transparent 18rem),
    #ede8e0;

  box-shadow: 0 -20px 60px rgba(39, 35, 30, 0.22);

  transform: translateY(104%);

  transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sheet.is-open .sheet-panel {
  transform: translateY(0);
}

.sheet-panel-tall {
  max-height: 90dvh;
}

.sheet-close {
  position: absolute;

  top: 18px;

  right: 19px;

  display: grid;

  width: 32px;

  height: 32px;

  place-items: center;

  border: 1px solid var(--line);

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.42);

  cursor: pointer;

  font-family: var(--serif);

  font-size: 1.4rem;

  line-height: 1;
}

.sheet-panel h2 {
  margin-bottom: 26px;
}

.contact-row {
  display: grid;

  grid-template-columns: 44px minmax(0, 1fr) auto;

  gap: 14px;

  align-items: center;

  margin-top: 10px;

  padding: 16px;

  border: 1px solid var(--line);

  border-radius: 17px;

  color: inherit;

  text-decoration: none;
}

.contact-row>span {
  display: grid;

  width: 44px;

  height: 44px;

  place-items: center;

  border-radius: 50%;

  color: white;

  background: var(--olive);

  font-family: var(--serif);
}

.contact-row div {
  display: grid;
}

.contact-row strong {
  font-family: var(--serif);

  font-size: 1.15rem;

  line-height: 1;
}

.contact-row small {
  margin-top: 5px;

  color: var(--muted);

  font-size: 0.58rem;

  letter-spacing: 0.07em;
}

.contact-row b {
  font-size: 0.56rem;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

/* ======================================================

   MULTIPLE FAMILY CONTACTS

   ====================================================== */

.contact-group {
  display: grid;

  gap: 10px;

  margin-top: 24px;
}

.contact-group:first-of-type {
  margin-top: 18px;
}

.contact-group+.contact-group {
  padding-top: 22px;

  border-top: 1px solid rgba(55, 59, 56, 0.16);
}

.contact-group-title {
  margin: 0 0 4px;

  color: #777168;

  font-family: Arial, sans-serif;

  font-size: 0.7rem;

  font-weight: 700;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}

.contact-row {
  width: 100%;

  min-width: 0;
}

.contact-row>div {
  min-width: 0;
}

.contact-row strong,
.contact-row small {
  display: block;
}

.contact-row small {
  margin-top: 3px;
}

.contact-row b {
  flex-shrink: 0;

  white-space: nowrap;
}

.location-choice,
.bank-card {
  position: relative;

  margin-top: 12px;

  padding: 21px;

  overflow: hidden;

  border: 1px solid var(--line);

  border-radius: 18px;

  background: rgba(255, 255, 255, 0.32);
}

.location-choice p {
  margin: 0;

  color: var(--muted);

  font-size: 0.6rem;

  font-weight: 600;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}

.location-choice strong {
  display: block;

  margin: 5px 0 17px;

  font-family: var(--serif);

  font-size: 1.35rem;
}

.location-choice a,
.bank-card button {
  color: var(--ink);

  font-size: 0.58rem;

  font-weight: 600;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

.location-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 12px;
}

.location-actions a {
  flex: 1;

  min-width: 120px;

  text-align: center;
}

.sheet-copy {
  margin: -10px 0 22px;

  color: var(--muted);

  font-family: var(--serif);

  font-size: 1rem;
}

.bank-card {
  padding: 25px;

  color: white;

  background:
    radial-gradient(circle at 88% 12%,

      rgba(255, 255, 255, 0.14),
      transparent 130px),
    #55594f;
}

.bank-card>span {
  font-size: 0.6rem;

  font-weight: 600;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}

.bank-card strong {
  display: block;

  margin: 26px 0 8px;

  font-family: var(--serif);

  font-size: 2rem;

  font-weight: 500;

  letter-spacing: 0.06em;
}

.bank-card p {
  margin: 0 0 22px;

  color: rgba(255, 255, 255, 0.72);

  font-size: 0.65rem;

  letter-spacing: 0.04em;
}

.bank-card button {
  padding: 10px 14px;

  border: 1px solid rgba(255, 255, 255, 0.42);

  border-radius: 999px;

  color: white;

  background: transparent;

  cursor: pointer;
}

form {
  display: grid;

  gap: 17px;
}

form>label,
fieldset legend {
  font-size: 0.62rem;

  font-weight: 600;

  letter-spacing: 0.1em;

  text-transform: uppercase;
}

input[type="text"],
textarea {
  width: 100%;

  margin-top: 7px;

  padding: 14px 15px;

  border: 1px solid var(--line);

  border-radius: 13px;

  color: var(--ink);

  background: rgba(255, 255, 255, 0.42);

  font-size: 0.82rem;

  letter-spacing: 0;

  text-transform: none;
}

textarea {
  min-height: 108px;

  resize: vertical;
}

fieldset {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 8px;

  margin: 0;

  padding: 0;

  border: 0;
}

fieldset legend {
  grid-column: 1 / -1;

  margin-bottom: 8px;
}

.radio-option {
  position: relative;
}

.radio-option input {
  position: absolute;

  opacity: 0;
}

.radio-option span {
  display: block;

  padding: 12px 8px;

  border: 1px solid var(--line);

  border-radius: 12px;

  background: rgba(255, 255, 255, 0.32);

  cursor: pointer;

  font-size: 0.65rem;

  text-align: center;
}

.radio-option input:checked+span {
  border-color: var(--olive);

  color: white;

  background: var(--olive);
}

form .primary-button {
  margin-top: 0;
}

.toast {
  position: fixed;

  z-index: 120;

  right: 50%;

  bottom: 105px;

  width: max-content;

  max-width: calc(100% - 40px);

  padding: 10px 16px;

  border-radius: 999px;

  visibility: hidden;

  opacity: 0;

  color: white;

  background: rgba(47, 44, 40, 0.94);

  box-shadow: var(--shadow);

  font-size: 0.65rem;

  transform: translate(50%, 12px);

  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0s linear 0.25s;
}

.toast.is-visible {
  visibility: visible;

  opacity: 1;

  transform: translate(50%, 0);

  transition-delay: 0s;
}

.reveal {
  opacity: 0;

  transform: translateY(22px);

  transition:
    opacity 0.75s ease,
    transform 0.75s ease;
}

.reveal.is-visible,
.hero .reveal {
  opacity: 1;

  transform: none;
}

.hero .reveal:nth-child(2) {
  transition-delay: 0.14s;
}

.hero .reveal:nth-child(3) {
  transition-delay: 0.3s;
}

@keyframes scroll-dot {

  0%,
  100% {
    opacity: 0;

    transform: translateY(0);
  }

  40% {
    opacity: 1;
  }

  80% {
    opacity: 0;

    transform: translateY(10px);
  }
}

@media (min-width: 720px) {
  .page-stage {
    padding: 0 20px;
  }

  .invitation {
    box-shadow: 0 0 80px rgba(42, 37, 31, 0.22);
  }
}

@media (max-width: 390px) {
  .section-inner {
    padding-right: 21px;

    padding-left: 21px;
  }

  .date-card {
    min-height: 195px;

    padding-right: 10px;

    padding-left: 10px;
  }

  .date-card strong {
    font-size: 3.5rem;
  }

  .date-card .time-number {
    font-size: 2.55rem;
  }

  .dock {
    width: calc(100% - 16px);

    bottom: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;
  }
}

/* A lightly blurred floral layer behind the content after the first page. */

.paper-section,
.countdown-section,
.footer {
  position: relative;

  isolation: isolate;

  overflow: hidden;
}

.paper-section::before,
.countdown-section::before,
.footer::before {
  content: "";

  position: absolute;

  inset: -10px;

  width: auto;

  height: auto;

  z-index: 0;

  background-image:
    linear-gradient(rgba(243, 239, 232, 0.3), rgba(243, 239, 232, 0.3)),
    url("./assets/new_background.png");

  background-position:
    center,
    center top;

  background-size:
    100% 100%,
    100% auto;

  background-repeat: no-repeat, repeat-y;

  filter: none;

  mix-blend-mode: normal;

  opacity: 1;

  pointer-events: none;
}

.paper-section>*,
.countdown-section>*,
.footer>* {
  position: relative;

  z-index: 1;
}

/* Preserve the dark footer with a subtler version of the same image. */

.footer::before {
  background-image:
    linear-gradient(rgba(67, 62, 56, 0.74), rgba(67, 62, 56, 0.74)),
    url("./assets/new_background.png");
}

/* Keep the existing Ar-Rum monogram above the blurred flowers. */

.gallery-section::after {
  position: absolute;

  inset: 0;

  z-index: 0;

  content: "";

  background-image: url("./assets/wedding-initials-v2.png");

  background-position: center;

  background-repeat: no-repeat;

  background-size: clamp(350px, 108vw, 540px) auto;

  filter: grayscale(1) contrast(1.15);

  mix-blend-mode: multiply;

  opacity: 0.11;

  pointer-events: none;
}

/* Retire the old corner linework; ::before now carries the flowers. */

.intro-section::after,
.countdown-section::after {
  content: none;
}

.date-card,
.venue-card,
.wish-card {
  background: #f8f4ed;
  border: 1px solid rgba(83, 72, 63, 0.16);
  box-shadow: 0 8px 24px rgba(67, 53, 43, 0.08);
}

.programme-section .timeline {
  width: 100%;
  max-width: 390px;
  margin-inline: auto;
  padding: 24px 20px;
  border: 1px solid rgba(83, 72, 63, 0.16);
  border-radius: 20px;
  background: #f8f4ed;
  box-shadow: 0 8px 24px rgba(67, 53, 43, 0.08);
}

.programme-section .timeline li {
  grid-template-columns: 64px 18px minmax(0, 1fr);
  gap: 12px;
  min-height: 100px;
}

.intro-section .full-name {
  font-weight: 600;
}

.intro-section .intro-copy {
  font-weight: 500;
  color: #49433e;
}

.intro-section .intro-note {
  font-weight: 500;
  color: #575048;
}