/* ==========================================================================
   WEDDING WEBSITE — MAIN STYLES
   --------------------------------------------------------------------------
   HOW THE LAYOUT WORKS (read this before tuning)

   1. Every slide shows the same portrait artwork, scaled to the slide HEIGHT
      and centred. Narrow phones crop the sides; wide screens get cream margins.

   2. Content never gets vertically centred on the screen. It starts in the
      "safe zone" of the arch: below the lamps (≈20% of the artwork height)
      and above the bottom edge (≈96.5%). assets/layout.js measures this.

   3. All text sizes are in `em`, relative to ONE base size (--fs) that
      layout.js calculates from the screen: ~14px on small phones, up to 19px
      on tablets/desktops. So phone, tablet and desktop keep the SAME
      proportions; nothing needs a per-device override.

   4. If a slide's content does not fit inside the arch at that size (for
      example the RSVP form on a short phone), the slide becomes a little
      taller than the screen instead of shrinking the text or overlapping
      the lamps. The artwork grows with it, so the lamps stay above the text.

   QUICK TUNING
   - Colours: the block right below.
   - Overall text size: --fs-min / --fs-min-wide / --fs-max (layout.js reads these).
   - Safe zone: --safe-top / --safe-bottom (fractions of artwork height).
   - Individual element sizes: the `em` values in each slide's section.
   ========================================================================== */

@font-face{ font-family:"Lora"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/lora-latin-400-normal.woff2") format("woff2"); }
@font-face{ font-family:"Lora"; font-style:italic; font-weight:400; font-display:swap;
  src:url("fonts/lora-latin-400-italic.woff2") format("woff2"); }
@font-face{ font-family:"Lora"; font-style:normal; font-weight:600; font-display:swap;
  src:url("fonts/lora-latin-600-normal.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap;
  src:url("fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:700; font-display:swap;
  src:url("fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:800; font-display:swap;
  src:url("fonts/inter-latin-800-normal.woff2") format("woff2"); }

:root{
  /* ---------- Theme colours ---------- */
  --cream:#f4ecdf;
  --page-bg:#eee4d3;
  --navy:#6f3240;
  --green:#6d5f50;
  --gold:#b48948;
  --rust:#8c3d4a;
  --name-accent:#7d3341;
  --text:#23303c;
  --muted:#4f6170;

  /* ---------- Fonts (self-hosted, identical on every device) ---------- */
  --serif:"Lora", Georgia, "Times New Roman", serif;
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---------- Glass cards ---------- */
  --glass-bg:rgba(255,241,245,.64);
  --glass-border:rgba(125,51,65,.12);
  --glass-shadow:0 12px 26px rgba(101,62,71,.08);

  /* ---------- Layout controls (also read by layout.js) ---------- */
  --art-ratio:0.7141927083;   /* 1097 / 1536 */
  --fs-min:14;                /* base text size on the smallest phones (px) */
  --fs-max:20;                /* base text size on tablets/desktops (px) */
  --fs-min-wide:16;           /* minimum on landscape computer screens (px) */
  --safe-top:0.205;           /* just below the lamps */
  --safe-bottom:0.965;        /* just above the artwork's bottom edge */

  /* Fallbacks used for the split second before layout.js runs */
  --fs:15px;
  --content-w:min(88vw, 520px);
}

/* ==========================================================================
   1. RESET + SLIDES
   ========================================================================== */

*{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-snap-type:y mandatory;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
/* When a slide is taller than the screen (small phones), snapping is relaxed
   so people can scroll through the whole RSVP form comfortably. */
html.has-tall-slide{ scroll-snap-type:y proximity; }

body{
  margin:0;
  overflow-x:hidden;
  color:var(--text);
  background:var(--page-bg);
  font-family:var(--sans);
}

a{ color:inherit; }

.art-slide{
  position:relative;
  height:100vh;                 /* old-browser fallback */
  height:100svh;
  height:var(--slide-h, 100svh);/* set by layout.js */
  overflow:hidden;
  scroll-snap-align:start;
  background:var(--page-bg);
  font-size:var(--fs);
}

/* Artwork: always the full slide height, centred horizontally. */
.art-image{
  position:absolute;
  top:0;
  left:50%;
  z-index:0;
  height:100%;
  width:auto;
  max-width:none;
  transform:translateX(-50%);
  user-select:none;
  pointer-events:none;
}

.art-overlay{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  z-index:1;
  width:calc(var(--slide-h, 100svh) * var(--art-ratio));
  transform:translateX(-50%);
  background:linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.03) 65%,
    rgba(0,0,0,.18) 100%);
  pointer-events:none;
}

/* Content block: horizontally centred, top edge placed by layout.js inside
   the arch's safe zone. It grows downward only. */
.arch-content{
  position:absolute;
  z-index:2;
  left:50%;
  top:var(--content-top, 20.5svh);
  width:var(--content-w);
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* ==========================================================================
   2. SHARED TYPOGRAPHY + BUTTONS  (all sizes relative to --fs)
   ========================================================================== */

.eyebrow{
  margin:0 0 .55em;
  color:var(--rust);
  font-size:.74em;
  font-weight:800;
  letter-spacing:.2em;
  line-height:1.2;
  text-transform:uppercase;
}

h2{
  margin:0 0 .25em;
  color:var(--name-accent);
  font-family:var(--serif);
  font-size:2.1em;
  font-weight:400;
  line-height:1.1;
  text-wrap:balance;
  /* Keep headings inside the clear gap between the garlands. */
  max-width:calc(var(--art-w, 60vh) * .46);
}

.lede{
  max-width:23em;
  margin:0 auto 1em;
  color:#6e5660;
  font-family:var(--serif);
  font-size:1em;
  font-style:italic;
  line-height:1.42;
  text-wrap:pretty;
}

.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 1.35em;
  border:1px solid rgba(255,255,255,.72);
  border-radius:999px;
  box-shadow:0 10px 28px rgba(0,0,0,.10);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-size:.78em;
  font-weight:700;
  letter-spacing:.1em;
  text-decoration:none;
  text-transform:uppercase;
  transition:transform .15s ease;
}
.chip:hover{ transform:translateY(-1px); }
.chip.light{ background:rgba(255,255,255,.88); color:var(--navy); }
.chip.dark{ background:rgba(125,51,65,.58); color:#fff; }

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

/* ==========================================================================
   3. SLIDE 1 — INVITATION
   ========================================================================== */

#invite .actions{
  position:absolute;
  left:50%;
  bottom:max(78px, calc(env(safe-area-inset-bottom) + 70px));
  z-index:3;
  width:min(94%,560px);
  transform:translateX(-50%);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}

.swipe{
  position:absolute;
  left:50%;
  bottom:max(18px, calc(env(safe-area-inset-bottom) + 12px));
  z-index:4;
  transform:translateX(-50%);
  color:#fff;
  font-size:.74em;
  letter-spacing:.14em;
  text-align:center;
  text-decoration:none;
  text-shadow:0 2px 10px rgba(0,0,0,.4);
  text-transform:uppercase;
  white-space:nowrap;
}
.swipe span{
  display:block;
  margin-top:2px;
  font-size:2.4em;
  line-height:1;
  animation:float 1.6s ease-in-out infinite;
}

/* ==========================================================================
   4. SLIDE 2 — CELEBRATIONS
   ========================================================================== */

#events h2{ margin-bottom:.12em; }
#events .eyebrow{ margin-bottom:.9em; }

.events-list{
  width:100%;
  max-width:26em;
  display:grid;
  gap:.55em;
  margin:0 auto;
}

.event-card{
  width:100%;
  padding:.75em .85em .7em;
  border:1px solid var(--glass-border);
  border-radius:1.1em;
  background:rgba(255,243,246,.72);
  box-shadow:var(--glass-shadow);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  text-align:left;
}

.date{
  margin-bottom:.35em;
  color:var(--name-accent);
  font-size:.72em;
  font-weight:700;
  letter-spacing:.1em;
  line-height:1.2;
  text-transform:uppercase;
}

.event-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6em;
}

.event-name{
  margin:0 0 .12em;
  color:var(--green);
  font-family:var(--serif);
  font-size:1.25em;
  font-weight:400;
  line-height:1.15;
}

.place{
  margin:0;
  color:var(--muted);
  font-size:.86em;
  line-height:1.3;
}

.map-btn{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.6em;
  padding:0 1em;
  border:1px solid rgba(125,51,65,.16);
  border-radius:999px;
  background:rgba(255,248,250,.92);
  color:var(--navy);
  font-size:.7em;
  font-weight:700;
  letter-spacing:.07em;
  text-decoration:none;
  text-transform:uppercase;
  white-space:nowrap;
}

#events .jump{ margin-top:1.1em; }

/* ==========================================================================
   5. SLIDE 3 — RSVP
   ========================================================================== */

#rsvp .eyebrow{ margin-bottom:.35em; }
#rsvp h2{ margin-bottom:.22em; }
#rsvp .lede{ max-width:24em; margin-bottom:.75em; font-size:.94em; line-height:1.35; }

.form-wrap{
  width:100%;
  max-width:28em;
  margin:0 auto;
  padding:.55em .9em .6em;
  border:1px solid var(--glass-border);
  border-radius:1.3em;
  background:var(--glass-bg);
  box-shadow:var(--glass-shadow);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}

form{ width:100%; text-align:left; }

.optional{ font-weight:400; }

.field-label{
  display:block;
  margin:.55em 0 .25em;
  color:var(--navy);
  font-size:.84em;
  font-weight:700;
  letter-spacing:.02em;
}

/* Inputs are never smaller than 16px: below that, iPhone Safari zooms the
   whole page when a field is tapped, which breaks the layout. */
input[type="text"],
input[type="number"],
textarea{
  width:100%;
  min-height:2.6em;
  padding:.4em .7em;
  border:1px solid rgba(38,67,90,.14);
  border-radius:.75em;
  outline:none;
  background:rgba(255,255,255,.92);
  color:var(--text);
  font-family:inherit;
  font-size:max(16px, 1em);
}

input:focus, textarea:focus{
  border-color:rgba(38,67,90,.32);
  box-shadow:0 0 0 3px rgba(180,137,72,.12);
}

.guest-stepper{
  display:inline-flex;
  align-items:stretch;
  overflow:hidden;
  border:1px solid rgba(38,67,90,.14);
  border-radius:999px;
  background:rgba(255,255,255,.92);
}

.step-btn{
  width:2.9em;
  min-height:2.6em;
  border:0;
  background:transparent;
  color:var(--navy);
  cursor:pointer;
  font:inherit;
  font-size:1.3em;
  line-height:1;
}
.step-btn:active{ background:rgba(38,67,90,.06); }

.guest-stepper .guest-number{
  width:3.2em;
  min-height:0;
  padding:0;
  border:0;
  border-left:1px solid rgba(38,67,90,.10);
  border-right:1px solid rgba(38,67,90,.10);
  border-radius:0;
  background:transparent;
  text-align:center;
  font-weight:700;
  -moz-appearance:textfield;
  appearance:textfield;
}
.guest-number::-webkit-inner-spin-button,
.guest-number::-webkit-outer-spin-button{ margin:0; -webkit-appearance:none; }

.choices{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.4em;
}

.choice{
  display:flex;
  align-items:center;
  gap:.5em;
  min-height:2.6em;
  padding:.3em .6em;
  border:1px solid rgba(38,67,90,.10);
  border-radius:.75em;
  background:rgba(255,255,255,.90);
  cursor:pointer;
  font-size:.88em;
  line-height:1.2;
}
.choice input{
  flex:0 0 auto;
  width:1.15em;
  height:1.15em;
  margin:0;
  accent-color:var(--green);
}

#rsvp #message{
  display:block;
  height:2.6em;
  max-height:7em;
  line-height:1.3;
  resize:vertical;
}

.submit{
  width:100%;
  min-height:44px;
  margin-top:.75em;
  border:0;
  border-radius:999px;
  background:var(--navy);
  color:#fff;
  box-shadow:0 10px 20px rgba(125,51,65,.18);
  cursor:pointer;
  font-family:inherit;
  font-size:.82em;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.status{
  display:none;
  margin-top:.7em;
  padding:.6em .7em;
  border:1px solid rgba(38,67,90,.10);
  border-radius:.75em;
  background:rgba(255,248,250,.92);
  color:var(--navy);
  font-size:.86em;
  text-align:center;
}

.contact-card{
  margin-top:.65em;
  padding-top:.5em;
  border-top:1px solid rgba(38,67,90,.10);
  text-align:center;
}

.contact-title{
  margin-bottom:.2em;
  color:var(--gold);
  font-size:.72em;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.contact-row{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:center;
  gap:.1em .9em;
  color:var(--muted);
  font-size:.82em;
  line-height:1.5;
}
.contact-row .person{ white-space:nowrap; }
.contact-row b{ color:var(--green); font-weight:700; }
.contact-row a{
  color:var(--navy);
  text-decoration:none;
  border-bottom:1px solid rgba(38,67,90,.25);
}

.note{
  margin:.35em auto 0;
  color:var(--muted);
  font-size:.74em;
  line-height:1.3;
  text-align:center;
}

#events .event-next{
  display:block;
  margin:.8em auto 0;

  color:#7d3341;
  font-size:.80em;
  font-weight:800;
  letter-spacing:.14em;

  text-align:center;
  text-decoration:none;
  text-transform:uppercase;

  white-space:nowrap;
}

#events .event-next span{
  display:block;
  margin-top:3px;

  font-size:2.2em;
  font-weight:900;
  line-height:.9;

  animation:float 1.6s ease-in-out infinite;
}
.rsvp-next{
  display:block;
  margin:.8em auto 0;
  color:#fff;
  font-size:.8em;
  font-weight:800;
  letter-spacing:.14em;
  line-height:1.15;
  text-align:center;
  text-decoration:none;
  text-shadow:0 2px 5px rgba(0,0,0,.65), 0 0 10px rgba(0,0,0,.35);
  text-transform:uppercase;
  white-space:nowrap;
}
.rsvp-next span{
  display:block;
  font-size:2.2em;
  font-weight:900;
  line-height:.95;
  animation:float 1.6s ease-in-out infinite;
}

/* ==========================================================================
   6. SLIDE 4 — EXPLORE VARANASI
   ========================================================================== */

#explore .eyebrow{ margin-bottom:.35em; }
#explore h2{ margin-bottom:.25em; }
#explore .lede{ max-width:22em; margin-bottom:1em; font-size:.95em; }

.guide-cards{
  width:100%;
  max-width:24em;
  display:grid;
  gap:.7em;
  margin:0 auto;
}

.guide-card{
  padding:.9em 1em;
  border:1px solid var(--glass-border);
  border-radius:1.1em;
  background:var(--glass-bg);
  box-shadow:var(--glass-shadow);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}

.guide-card h3{
  margin:0 0 .25em;
  color:var(--navy);
  font-size:1.05em;
  font-weight:700;
}

.guide-card p{
  margin:0 0 .7em;
  color:var(--muted);
  font-size:.84em;
  line-height:1.4;
}

.guide-actions{ display:flex; justify-content:center; }

.guide-actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.7em;
  padding:0 1.1em;
  border:1px solid var(--navy);
  border-radius:999px;
  background:var(--navy);
  color:#fff;
  font-size:.8em;
  font-weight:700;
  text-decoration:none;
}

.guide-note{
  max-width:24em;
  margin:.9em auto 0;
  color:var(--muted);
  font-size:.74em;
  line-height:1.35;
}

/* ==========================================================================
   7. ONLY GENUINE LAYOUT CHANGES — no font-size overrides needed
   ========================================================================== */

/* Very narrow phones (≤ 300px): stack the Directions button under the
   venue and give the checkboxes one column. */
@media (max-width:300px){
  .choices{ grid-template-columns:1fr; }
  .event-top{ flex-direction:column; align-items:flex-start; gap:.4em; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .swipe span, .rsvp-next span{ animation:none; }
}


/* Bride-side adjustments */
.event-contact{
  width:100%;
  max-width:26em;
  margin:.85em auto 0;
  padding:.75em 1em;

  background:rgba(255,248,250,0.62);
  border:1px solid rgba(255,255,255,0.65);
  border-radius:1em;

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

  box-shadow:0 8px 20px rgba(0,0,0,0.06);

  text-align:center;
}
#explore .guide-card{ background:rgba(255,243,246,.72); }