/* ==========================================================================
   Avika & Anthony — wedding site
   Design basis: 1410px-wide frame. Every measurement below is expressed in
   design pixels via --u (1 design px). On desktop --u scales with the
   viewport (capped), so the page is a proportional rendering of the design.
   Below 1024px a separate mobile layout takes over with its own --u basis.
   ========================================================================== */

/* ---------- Fonts (self-hosted) ---------- */
@font-face { font-family: 'Regola Neue'; src: url('/fonts/RegolaNeue-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Regola Neue'; src: url('/fonts/RegolaNeue-RegularItalic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Regola Neue'; src: url('/fonts/RegolaNeue-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Regola Neue'; src: url('/fonts/RegolaNeue-Semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Regola Neue'; src: url('/fonts/RegolaNeue-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --cream: #FDF9EE;
  --ink: #000000;
  --font: 'Regola Neue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* The design uses tight tracking throughout (tighter on caps and display sizes). */
  --track: -0.05em;
  --track-caps: -0.06em;
  --track-display: -0.065em;
  --track-italic: -0.04em;
  /* 1 design px. 1410px viewport = 1:1. Shrinks on smaller laptops, grows a little on big screens. */
  --u: clamp(0.726px, calc(100vw / 1410), 1.15px);
  /* Reel unit: same as --u on desktop, scaled down on mobile. */
  --ru: var(--u);
  --fade-duration: 0.9s;
}

/* ---------- Base ---------- */
html { background: var(--cream); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: var(--track);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/* letter-spacing in em must be set per element (inherited values are fixed px) */
*, *::before, *::after { letter-spacing: var(--track); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure { margin: 0; }
em, i { font-style: italic; letter-spacing: var(--track-italic); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Centered design frame (1410 design px wide) */
.frame { width: calc(1410 * var(--u)); margin: 0 auto; position: relative; }

/* ---------- Fade-in on approach ---------- */
.fade { opacity: 0; transform: translate3d(0, calc(18 * var(--u)), 0); transition: opacity var(--fade-duration) cubic-bezier(0.2, 0.6, 0.2, 1), transform var(--fade-duration) cubic-bezier(0.2, 0.6, 0.2, 1); will-change: opacity, transform; }
.fade.is-in { opacity: 1; transform: none; }
.no-js .fade { opacity: 1; transform: none; }

/* ---------- Header ---------- */
.site-header { position: relative; height: calc(253 * var(--u)); }
.site-header__logo { position: absolute; left: calc(147 * var(--u)); top: calc(75.5 * var(--u)); width: calc(144.5 * var(--u)); }
.site-header__logo img { width: 100%; }
.site-header__meta {
  position: absolute; left: calc(295.75 * var(--u)); top: calc(121.2 * var(--u));
  font-size: calc(20 * var(--u)); line-height: 1.125; text-transform: uppercase; white-space: nowrap; letter-spacing: var(--track-caps);
}
.site-header__meta strong { font-weight: 700; }
.site-header__nav { position: absolute; right: calc(133.5 * var(--u)); top: calc(125.7 * var(--u)); } /* vertically centred on the date/location block */

.btn {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  height: calc(36 * var(--u)); padding: 0 calc(14.5 * var(--u));
  background: var(--ink); color: var(--cream);
  font-family: var(--font); font-weight: 700; font-size: calc(20 * var(--u)); letter-spacing: var(--track); line-height: 1;
  text-decoration: none; white-space: nowrap; border: 0; border-radius: calc(2 * var(--u)); cursor: pointer;
  transition: opacity 0.2s ease;
}
.btn:hover { opacity: 0.85; }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.btn[disabled] { opacity: 0.6; cursor: default; }

/* ---------- Names lockup ---------- */
.names { position: relative; z-index: 2; width: calc(1083 * var(--u)); margin: 0 0 calc(-13.5 * var(--u)) calc(162.5 * var(--u)); }
.names img { width: 100%; }
.names__mobile { display: none; }
.names--static { margin-bottom: 0; }   /* travel page: no hero to overlap */

/* ---------- Hero ---------- */
.hero { position: relative; z-index: 1; width: 100%; height: calc(500 * var(--u)); overflow: hidden; }
.hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }

/* ---------- Weekend events + address form ---------- */
.events-form {
  display: grid; grid-template-columns: calc(670.75 * var(--u)) calc(460 * var(--u));
  padding: calc(111.75 * var(--u)) 0 0 calc(127 * var(--u));
  align-items: start;
}
.section-title { font-size: calc(50 * var(--u)); line-height: 1; font-weight: 500; text-transform: uppercase; letter-spacing: var(--track-display); }
.events .section-title { margin-left: calc(5 * var(--u)); margin-bottom: calc(38.75 * var(--u)); }

.event { display: grid; grid-template-columns: calc(270 * var(--u)) 1fr; column-gap: calc(21 * var(--u)); align-items: start; }
.event + .event { margin-top: calc(64.75 * var(--u)); }
.event__art { width: 100%; }
.event__art--diner { width: calc(270 * var(--u)); }
.event__art--estate { width: calc(199.5 * var(--u)); margin: 0 auto; }
.event__body { padding-top: calc(6 * var(--u)); }
.event__date { height: auto; }
.event__date--aug20 { width: calc(211.5 * var(--u)); }
.event__date--aug21 { width: calc(222 * var(--u)); }
.event__title { margin: calc(3.5 * var(--u)) 0 0 calc(28 * var(--u)); font-size: calc(18 * var(--u)); line-height: 1; font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-caps); }
.event__addr { margin: calc(10.25 * var(--u)) 0 0 calc(28 * var(--u)); font-size: calc(18 * var(--u)); line-height: 0.861; font-weight: 500; text-transform: uppercase; letter-spacing: var(--track-caps); }
.event__addr a { letter-spacing: inherit; }
.event__addr a { text-decoration: none; }
.event__addr a:hover { text-decoration: underline; text-underline-offset: 0.15em; }

.rsvp { padding-top: calc(7.45 * var(--u)); }
.rsvp__intro { margin-bottom: calc(30.3 * var(--u)); font-size: calc(20 * var(--u)); line-height: 1.2; font-weight: 600; letter-spacing: -0.037em; }
.rsvp label { display: block; margin-bottom: calc(5.75 * var(--u)); font-size: calc(18 * var(--u)); line-height: 1; font-weight: 600; }
.rsvp input {
  display: block; width: 100%; box-sizing: border-box;
  height: calc(38 * var(--u)); margin-bottom: calc(24 * var(--u)); padding: 0 calc(12 * var(--u));
  border: max(1px, calc(1 * var(--u))) solid var(--ink); border-radius: calc(5 * var(--u));
  background: transparent; color: var(--ink);
  font-family: var(--font); font-size: calc(18 * var(--u)); letter-spacing: var(--track);
  outline: none; transition: box-shadow 0.15s ease;
}
.rsvp input:focus { box-shadow: 0 0 0 max(1px, calc(1 * var(--u))) var(--ink); }
.rsvp__address { position: relative; margin-bottom: calc(40.25 * var(--u)); }
.rsvp__address input { margin-bottom: 0; }
/* address suggestions dropdown */
.ac { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; margin: 0; padding: calc(4 * var(--u)) 0; list-style: none; background: var(--cream); border: max(1px, calc(1 * var(--u))) solid var(--ink); border-radius: calc(5 * var(--u)); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10); max-height: calc(260 * var(--u)); overflow-y: auto; }
.ac[hidden] { display: none; }
.ac__item { padding: calc(8 * var(--u)) calc(12 * var(--u)); font-size: calc(17 * var(--u)); line-height: 1.25; cursor: pointer; }
.ac__item:hover, .ac__item.is-active { background: rgba(0, 0, 0, 0.07); }
.ac__credit { padding: calc(4 * var(--u)) calc(12 * var(--u)) calc(2 * var(--u)); font-size: calc(11 * var(--u)); line-height: 1.2; opacity: 0.55; }
.rsvp__submit { display: flex; width: calc(383 * var(--u)); height: calc(38 * var(--u)); margin: 0 auto; font-size: calc(18 * var(--u)); border-radius: calc(5 * var(--u)); } /* same radius as the fields */
.rsvp__status { min-height: 1em; margin-top: calc(18 * var(--u)); font-size: calc(18 * var(--u)); line-height: 1.2; font-weight: 600; text-align: center; }
.rsvp__status:empty { display: none; }
.rsvp.is-sent .rsvp__fields { display: none; }
.rsvp.is-sent .rsvp__status { margin-top: 0; text-align: left; font-size: calc(20 * var(--u)); }
.rsvp__note { margin-top: calc(48.2 * var(--u)); font-style: italic; font-size: calc(20 * var(--u)); line-height: 1.05; letter-spacing: var(--track-italic); }
.rsvp__note * { letter-spacing: inherit; }
.rsvp.is-sent .rsvp__note { margin-top: calc(30 * var(--u)); }
/* honeypot: hidden from people, visible to bots */
.rsvp__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- Photo reel ---------- */
.reel { position: relative; width: 100%; height: calc(544.25 * var(--ru)); margin-top: calc(74 * var(--u)); overflow: hidden; }
.reel__track { position: absolute; left: 0; top: 0; height: 100%; width: calc(2060 * var(--ru)); will-change: transform; }
.reel__item { position: absolute; overflow: hidden; background: rgba(0, 0, 0, 0.04); }
.reel__item img { width: 100%; height: 100%; object-fit: cover; }
/* positions as measured in the design (first five); the two extras follow the same rhythm */
.reel__item:nth-child(1) { left: calc(-37 * var(--ru));    top: calc(51.5 * var(--ru));  width: calc(285 * var(--ru));    height: calc(382 * var(--ru)); }
.reel__item:nth-child(2) { left: calc(269.75 * var(--ru)); top: calc(169.25 * var(--ru)); width: calc(270.75 * var(--ru)); height: calc(372.75 * var(--ru)); }
.reel__item:nth-child(3) { left: calc(565.75 * var(--ru)); top: 0;                        width: calc(351.5 * var(--ru));  height: calc(513 * var(--ru)); }
.reel__item:nth-child(4) { left: calc(946.25 * var(--ru)); top: calc(60.5 * var(--ru));  width: calc(250.75 * var(--ru)); height: calc(373 * var(--ru)); }
.reel__item:nth-child(5) { left: calc(1221 * var(--ru));   top: calc(235 * var(--ru));   width: calc(232 * var(--ru));    height: calc(309.25 * var(--ru)); }
.reel__item:nth-child(6) { left: calc(1477 * var(--ru));   top: calc(40 * var(--ru));    width: calc(274 * var(--ru));    height: calc(400 * var(--ru)); }
.reel__item:nth-child(7) { left: calc(1775 * var(--ru));   top: calc(120 * var(--ru));   width: calc(285 * var(--ru));    height: calc(380 * var(--ru)); }

/* ---------- Outro ---------- */
.outro { position: relative; height: calc(588.75 * var(--u)); }
.outro__title { position: absolute; left: calc(132 * var(--u)); top: calc(96.5 * var(--u)); font-size: calc(50 * var(--u)); line-height: 0.88; font-weight: 500; text-transform: uppercase; letter-spacing: var(--track-display); }
.outro__bottom { display: contents; }
.outro__candle { position: absolute; left: calc(101.75 * var(--u)); top: calc(195.25 * var(--u)); width: calc(174 * var(--u)); }
.outro__xo { position: absolute; left: calc(688.25 * var(--u)); top: calc(138.75 * var(--u)); width: calc(425 * var(--u)); }
.outro__note { position: absolute; left: calc(312.5 * var(--u)); top: calc(342.85 * var(--u)); width: calc(458 * var(--u)); font-style: italic; font-size: calc(20 * var(--u)); line-height: 1.0625; letter-spacing: var(--track-italic); }
.outro__note * { letter-spacing: inherit; }

/* ---------- Travel page ---------- */
.travel { padding: calc(100 * var(--u)) calc(132 * var(--u)) 0; }
.travel .section-title { margin-bottom: calc(46 * var(--u)); }
.travel-grid { display: grid; grid-template-columns: calc(690 * var(--u)) calc(400 * var(--u)); column-gap: calc(56 * var(--u)); align-items: start; }
.travel-grid + .travel-grid { margin-top: calc(96 * var(--u)); }
.travel-grid--b { grid-template-columns: calc(400 * var(--u)) calc(690 * var(--u)); }
.travel-photo { overflow: hidden; }
.travel-photo img { width: 100%; height: calc(600 * var(--u)); object-fit: cover; }
.travel-photo--lawn img { object-position: 50% 60%; }
.travel-photo--wallpaper img { object-position: 45% 50%; }
.travel-text section + section { margin-top: calc(44 * var(--u)); }
.travel-text h3 { margin-bottom: calc(12 * var(--u)); font-size: calc(18 * var(--u)); line-height: 1; font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-caps); }
.travel-text p, .travel-text li { font-size: calc(18 * var(--u)); line-height: 1.3; }
.travel-text p + p { margin-top: calc(12 * var(--u)); }
.travel-text ul { list-style: none; padding: 0; margin: 0; }
.travel-text li + li { margin-top: calc(6 * var(--u)); }
.travel-text ul + p, .travel-text p + ul { margin-top: calc(12 * var(--u)); }
.travel-text a { text-decoration: underline; text-underline-offset: 0.14em; text-decoration-thickness: max(1px, calc(1 * var(--u))); }
.travel-text a:hover { text-decoration-thickness: max(2px, calc(2 * var(--u))); }
.travel-text strong { font-weight: 700; }
.travel-text .note, .travel-text .note * { font-style: italic; letter-spacing: var(--track-italic); }
.travel-text .muted { font-weight: 400; }
.travel .outro { margin-top: calc(40 * var(--u)); }

/* ==========================================================================
   Mobile & tablet (< 1024px)
   Basis: 430px-wide design; --u scales with viewport between 320 and ~560.
   ========================================================================== */
@media (max-width: 1023px) {
  :root { --u: clamp(0.74px, calc(100vw / 430), 1.3px); --ru: calc(var(--u) * 0.64); }
  .frame { width: auto; margin: 0; }

  .site-header { height: auto; display: grid; grid-template-columns: auto 1fr; column-gap: calc(12 * var(--u)); align-items: center; padding: calc(22 * var(--u)) calc(20 * var(--u)) 0; }
  .site-header__logo { position: static; width: calc(82 * var(--u)); }
  .site-header__meta { position: static; font-size: calc(15 * var(--u)); line-height: 1.12; }
  .site-header__nav { position: static; grid-column: 1 / -1; justify-self: start; margin-top: calc(18 * var(--u)); }
  .btn { height: calc(34 * var(--u)); padding: 0 calc(12 * var(--u)); font-size: calc(15 * var(--u)); border-radius: calc(2 * var(--u)); }

  .names { width: auto; margin: calc(22 * var(--u)) calc(20 * var(--u)) calc(-8 * var(--u)); }
  .names--static { margin-bottom: 0; }
  .names__desktop { display: none; }
  .names__mobile { display: block; width: 100%; }

  /* Hero: crop in, but keep the couple (they stand left of centre) in frame */
  .hero { height: auto; aspect-ratio: 4 / 5; }
  .hero img { object-position: 30% 68%; }

  .events-form { display: block; padding: calc(56 * var(--u)) calc(20 * var(--u)) 0; }
  .section-title { font-size: calc(34 * var(--u)); }
  .events .section-title { margin: 0 0 calc(26 * var(--u)); }
  .event { grid-template-columns: 40% 1fr; column-gap: calc(12 * var(--u)); margin-left: calc(-6 * var(--u)); }
  .event + .event { margin-top: calc(36 * var(--u)); }
  .event__art--diner, .event__art--estate { width: 100%; margin: 0; }
  .event__art--estate { width: 82%; margin: calc(6 * var(--u)) auto 0; }
  .event__body { padding-top: calc(2 * var(--u)); }
  .event__date--aug20, .event__date--aug21 { width: 100%; max-width: calc(200 * var(--u)); }
  .event__title { margin: calc(4 * var(--u)) 0 0 calc(8 * var(--u)); font-size: calc(15 * var(--u)); }
  .event__addr { margin: calc(8 * var(--u)) 0 0 calc(8 * var(--u)); font-size: calc(15 * var(--u)); line-height: 0.9; }

  .rsvp { padding-top: calc(48 * var(--u)); }
  /* Labels and typed text share one size. 16px is the floor because iPhones zoom
     the page when focusing a field whose text is smaller than that. */
  .rsvp__intro { margin-bottom: calc(22 * var(--u)); font-size: max(17px, calc(17 * var(--u))); }
  .rsvp label { margin-bottom: calc(6 * var(--u)); font-size: max(16px, calc(15 * var(--u))); }
  .rsvp input { height: calc(44 * var(--u)); margin-bottom: calc(20 * var(--u)); border-radius: calc(6 * var(--u)); padding: 0 calc(12 * var(--u)); font-size: max(16px, calc(15 * var(--u))); }
  .rsvp__address { margin-bottom: calc(28 * var(--u)); }
  .ac__item { font-size: max(16px, calc(15 * var(--u))); padding: calc(10 * var(--u)) calc(12 * var(--u)); }
  .ac__credit { font-size: 11px; }
  .rsvp__submit { width: 100%; height: calc(44 * var(--u)); font-size: calc(16 * var(--u)); border-radius: calc(6 * var(--u)); }
  .rsvp__status { font-size: calc(15 * var(--u)); }
  .rsvp.is-sent .rsvp__status { font-size: calc(17 * var(--u)); }
  .rsvp__note { margin-top: calc(28 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.12; }

  .reel { margin-top: calc(64 * var(--u)); }

  .outro { height: auto; padding: calc(64 * var(--u)) calc(20 * var(--u)) calc(90 * var(--u)); }
  .outro__title { position: static; font-size: calc(34 * var(--u)); line-height: 0.92; }
  .outro__title br { display: none; }
  .outro__bottom { display: grid; grid-template-columns: calc(96 * var(--u)) 1fr; column-gap: calc(18 * var(--u)); align-items: end; margin-top: calc(30 * var(--u)); }
  .outro__candle { position: static; width: 100%; }
  .outro__xo { position: static; width: calc(230 * var(--u)); margin: calc(24 * var(--u)) 0 0 auto; }
  .outro__note { position: static; width: auto; font-size: calc(16 * var(--u)); line-height: 1.12; padding-bottom: calc(6 * var(--u)); }

  .travel { padding: calc(44 * var(--u)) calc(20 * var(--u)) 0; }
  .travel .section-title { margin-bottom: calc(26 * var(--u)); }
  .travel-grid, .travel-grid--b { display: flex; flex-direction: column; }
  .travel-grid + .travel-grid { margin-top: calc(40 * var(--u)); }
  .travel-photo { margin: calc(36 * var(--u)) 0 0; }
  .travel-grid--b .travel-photo { order: 2; }   /* photo follows its text on small screens */
  .travel-photo img { height: auto; aspect-ratio: 4 / 5; }
  .travel-text section + section { margin-top: calc(32 * var(--u)); }
  .travel-text h3 { font-size: calc(15 * var(--u)); margin-bottom: calc(10 * var(--u)); }
  .travel-text p, .travel-text li { font-size: calc(16 * var(--u)); line-height: 1.32; }
  .travel .outro { margin-top: 0; }
}

/* Tablet refinements */
@media (min-width: 600px) and (max-width: 1023px) {
  .site-header { grid-template-columns: auto 1fr auto; }
  .site-header__nav { grid-column: auto; justify-self: end; margin-top: 0; }
  .hero { aspect-ratio: 3 / 2; }
  .event { grid-template-columns: 32% 1fr; }
  .travel-photo img { aspect-ratio: 3 / 2; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .fade { opacity: 1; transform: none; transition: none; }
  .reel { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  .reel__track { position: relative; transform: none !important; }
}

/* ---------- Print ---------- */
@media print {
  .reel, .rsvp { display: none; }
}