/* ==========================================================================
   Monika & Haggai — 16 April 2027, New Orleans

   Layout notes
   ------------
   The original Canva document is a fixed 1366 x 768 canvas per section with
   every element absolutely placed. Sections marked `.canvas` below reproduce
   that placement exactly: positions and sizes are the original pixel values
   expressed as percentages, and type is sized in `cqw` (1cqw = 1% of the
   canvas width) so everything scales together as the viewport changes.

   Below 760px the canvas is dropped and its children flow in DOM order, which
   is why source order is kept as reading order throughout.
   ========================================================================== */

/* ---------- Fonts (extracted from the Canva export) ---------------------- */
@font-face {
  font-family: "Grimpt Brush";
  src: url("../fonts/GrimptBrush-REGULAR.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Moonshine";
  src: url("../fonts/Moonshine-REGULAR.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Catchy Mager";
  src: url("../fonts/CatchyMager-REGULAR.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Core Bandi Face";
  src: url("../fonts/CoreBandiFace-REGULAR.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "The Seasons";
  src: url("../fonts/TheSeasons-LIGHT.woff") format("woff");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "The Seasons";
  src: url("../fonts/TheSeasons-REGULAR.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "The Seasons";
  src: url("../fonts/TheSeasons-BOLD.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Neue Montreal";
  src: url("../fonts/NeueMontreal-REGULAR.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}

/* ---------- Tokens ------------------------------------------------------- */
:root {
  --cream:      #fff7e1;
  --olive:      #a2ac5a;
  --olive-lt:   #b6be79;
  --olive-dk:   #5d692b;
  --green:      #89a22c;
  --pale:       #edefb2;
  --sky:        #b9cef0;
  --rule:       #482117;   /* the hairline between FAQs */
  --ink:        #000000;
  --paper:      #ffffff;

  --display: "Grimpt Brush", "Brush Script MT", cursive;
  --body:    "Moonshine", "Iowan Old Style", Georgia, serif;
  --serif:   "The Seasons", "Didot", "Bodoni MT", Georgia, serif;
  --sans:    "Neue Montreal", "Helvetica Neue", Arial, sans-serif;
  --mono-caps: "Core Bandi Face", "Futura", "Century Gothic", sans-serif;
  --numeral: "Catchy Mager", "Didot", Georgia, serif;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --section-y: clamp(3.5rem, 9vw, 7rem);
  --maxw: 1366px;
}

/* ---------- Reset -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.5;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
figure { margin: 0; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: .75rem 1.25rem;
  font-family: var(--sans); font-size: .875rem;
}
.skip:focus { left: 0; }

/* ==========================================================================
   The scaled canvas
   ========================================================================== */
.canvas {
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  aspect-ratio: 1366 / 768;
}
.canvas > * { position: absolute; margin: 0; }

/* Image crops
   -----------
   Canva stores, for every photo, a rect saying where the source image sits
   inside its box — the designer's crop. `object-fit: cover` centres instead,
   which is wrong wherever that crop was nudged or zoomed. So each photo is
   positioned explicitly: the figure clips, and the img is placed inside it at
   the exact percentages taken from the original document. Every rect below
   preserves the photo's natural aspect ratio, so nothing is stretched. */
.canvas figure { overflow: hidden; }
.canvas figure > img {
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100%;
  object-fit: fill;               /* the rect is already the right shape */
}

/* Below this width the fixed canvas becomes unreadable, so it is abandoned
   and the children simply stack. */
@media (max-width: 759px) {
  .canvas {
    aspect-ratio: auto;
    display: grid;
    gap: clamp(1.25rem, 5vw, 2rem);
    padding: var(--section-y) var(--gutter);
  }
  .canvas > * {
    position: static !important;
    left: auto !important; top: auto !important;
    width: auto !important; height: auto !important;
  }
  /* The explicit crops above are tied to the desktop box shapes, so fall back
     to cover once the canvas is abandoned. */
  .canvas figure > img {
    position: static !important;
    left: auto !important; top: auto !important;
    width: 100% !important; height: auto !important;
    object-fit: cover;
  }
}

/* ---------- Nav ---------------------------------------------------------- */
/* Script face, title case, right aligned — as in the original. */
.nav { position: sticky; top: 0; z-index: 100; background: var(--cream); }
.nav__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0 var(--gutter);
  min-height: 56px;          /* the original's nav bar is exactly 56px tall;
                                a shorter one shifts every section up */
}
.nav__mark {
  font-family: var(--display);
  font-size: 1.6rem; line-height: 1; letter-spacing: .015em;
  text-decoration: none; white-space: nowrap;
}
.nav__list { list-style: none; display: flex; gap: clamp(.9rem, 2vw, 1.6rem); margin: 0; padding: 0; }
.nav__list a {
  font-family: var(--display);
  font-size: 1.35rem; line-height: 1.2;   /* matches the original's nav size */
  text-decoration: none; padding-bottom: .1rem;
  border-bottom: 1px solid transparent;
}
.nav__list a:hover,
.nav__list a:focus-visible,
.nav__list a[aria-current="page"] { border-bottom-color: currentColor; }

@media (max-width: 660px) {
  .nav__inner { flex-direction: column; align-items: center; gap: .35rem; padding-bottom: .5rem; }
  .nav__list { justify-content: center; }
}

/* ---------- Generic section shells -------------------------------------- */
.section { padding: var(--section-y) var(--gutter); }
.section > * { max-width: var(--maxw); margin-inline: auto; }
.s-cream    { background: var(--cream); }
.s-olive    { background: var(--olive); }
.s-olive-lt { background: var(--olive-lt); }
.s-olive-dk { background: var(--olive-dk); }
.s-pale     { background: var(--pale); }
.s-sky      { background: var(--sky); }
.s-paper    { background: var(--paper); }

/* Full-bleed band holding a canvas. */
.band { padding: 0; }
.band > .canvas { margin-inline: auto; }

/* ==========================================================================
   HOME
   ========================================================================== */

/* --- Hero (section 0.0) -------------------------------------------------- */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero__bg {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%;
  object-fit: cover;
  object-position: center bottom;   /* Canva anchors this photo to the bottom;
                                       centring it crops their feet off */
}
.hero .canvas { color: #fff; }
.hero__name {
  left: 4.03%; top: 20.96%; width: 32.14%; height: 39.62%;
  display: grid; align-content: center;
  font-family: var(--display); font-weight: 400;
  font-size: 10.93cqw; line-height: .85; letter-spacing: .015em;
  text-align: center; text-shadow: 0 2px 22px rgba(0,0,0,.3);
}
.hero__date, .hero__place {
  left: 55.34%; width: 44.66%; height: 10.80%;
  display: grid; align-content: center;
  font-family: var(--display);
  font-size: 5.075cqw; line-height: .97; letter-spacing: .015em;
  text-align: center; text-shadow: 0 2px 18px rgba(0,0,0,.3);
}
.hero__date  { top: 55.21%; }
.hero__place { top: 62.89%; }

@media (max-width: 759px) {
  .hero .canvas { place-content: center; min-height: 78svh; }
  .hero__name  { font-size: clamp(3rem, 15vw, 5rem); }
  .hero__date,
  .hero__place { font-size: clamp(1.6rem, 8vw, 2.6rem); }
  .hero__date  { margin-top: .4em !important; }
}

/* --- Venue illustration (section 0.1) ------------------------------------ */
.venue-art { left: 19.18%; top: 14.32%; width: 61.71%; height: 71.48%; }
.venue-art img { width: 100%; height: 100%; object-fit: contain; }

/* --- Collage (section 0.2) ----------------------------------------------- */
.c-boathouse { left: 16.47%; top: 10.03%; width: 36.09%; height: 42.84%; }
.c-dance     { left: 26.21%; top: 58.72%; width: 26.43%; height: 31.38%; }
.c-arch      { left: 55.49%; top: 22.27%; width: 27.38%; height: 67.71%; }
.c-tower     { left:  4.54%; top: 51.82%; width: 15.23%; height: 31.38%; }
.c-drinks    { left: 81.55%; top: 41.67%; width: 12.59%; height: 25.91%; }

/* crops — see "Image crops" above */
.c-boathouse img { left: -.11%; top:     0; width: 100.21%; height: 100.00%; }
.c-arch      img { left:     0; top: -7.89%; width: 100.00%; height: 107.89%; }
.c-dance     img { left: -1.16%; top: -9.45%; width: 110.25%; height: 109.45%; }
.c-tower img { width: 100%; height: 100%; object-fit: contain; }
.c-drinks { position: absolute; }
/* height:auto is required — the images carry width/height attributes, which act
   as presentational hints. Setting only width in CSS leaves the height
   attribute in force and the drawing stretches to its full pixel height. */
.c-drinks .c-bucket { position: absolute; left: 0;      top: 0;      width: 68.02%; height: auto; }
.c-drinks .c-coupe  { position: absolute; left: 68.02%; top: 58.29%; width: 31.98%; height: auto; }

@media (max-width: 759px) {
  .c-boathouse img, .c-dance img, .c-arch img { aspect-ratio: 3 / 2; }
  .c-arch img { aspect-ratio: 5 / 7; }
  .c-tower, .c-drinks { justify-self: center; width: 45% !important; }
  .c-drinks { position: relative !important; height: auto !important; }
  .c-drinks .c-bucket { position: relative !important; left: auto; top: auto; width: 70%; }
  .c-drinks .c-coupe  { position: relative !important; left: auto; top: auto;
                        width: 34%; margin-left: 64%; margin-top: -16%; }
}

/* --- Backstory (section 0.3) --------------------------------------------- */
.bs-title {
  left: 5.64%; top: 17.97%; width: 30.01%; height: 33.68%;
  display: grid; align-content: center;
  font-family: var(--display); font-weight: 400;
  font-size: 10.735cqw; line-height: .79;
  text-transform: uppercase;
}
.bs-body {
  left: 5.64%; top: 51.69%; width: 45.75%; height: 43.53%;
  display: grid; align-content: center;
  font-family: var(--body); font-size: 1.3665cqw; line-height: 1.5;
}
.bs-body p { margin: 0 0 1.35em; }
.bs-body p:last-child { margin-bottom: 0; }
.bs-map { left: 61.20%; top: 4.82%; width: 33.89%; height: 90.36%; }

@media (max-width: 759px) {
  .bs-title { font-size: clamp(2.75rem, 15vw, 5rem); }
  .bs-body  { font-size: clamp(.9rem, 3.8vw, 1.05rem); }
  .bs-map img { aspect-ratio: 2 / 3; }
}

/* --- Motto (section 0.4) -------------------------------------------------- */
.m-bike   { left:  8.78%; top:  8.72%; width: 20.50%; height: 26.82%; }
.m-heads  { left: 77.67%; top: 17.84%; width:  9.15%; height: 19.40%; }
.m-under  { left: 15.81%; top: 62.76%; width:  9.15%; height: 19.40%; }
.m-spin   { left: 65.66%; top: 60.68%; width: 14.06%; height: 30.60%; }

/* crops — every photo in this section is zoomed in well past `cover`,
   the underpass one by 1.89x. Centring them loses the couple entirely. */
.m-bike  img { left: -19.79%; top: -20.54%; width: 132.70%; height: 120.54%; }
.m-heads img { left: -16.87%; top: -54.71%; width: 126.05%; height: 159.19%; }
.m-under img { left: -120.61%; top: -71.03%; width: 335.91%; height: 188.67%; }
.m-spin  img { left:       0; top: -33.91%; width: 109.12%; height: 133.91%; }
.motto {
  left: 2.34%; top: 46.61%; width: 95.53%; height: 8.41%;
  display: grid; align-content: center;
  font-family: var(--display); font-weight: 400;
  font-size: 4.0019cqw; line-height: 1.5; letter-spacing: .211em;
  text-align: center;
}

@media (max-width: 759px) {
  .canvas--motto { grid-template-columns: 1fr 1fr; align-items: center; }
  .m-bike  { grid-column: 1; }
  .m-heads { grid-column: 2; width: 60% !important; justify-self: center; }
  .motto   { grid-column: 1 / 3; font-size: clamp(1.1rem, 5.5vw, 2rem); letter-spacing: .16em; }
  .m-under { grid-column: 1; width: 60% !important; justify-self: center; }
  .m-spin  { grid-column: 2; }
  .m-bike img, .m-heads img, .m-under img, .m-spin img { aspect-ratio: 3 / 4; }
  .m-bike img { aspect-ratio: 4 / 3; }
}

/* --- Countdown (section 0.5) ---------------------------------------------
   Positions come from the original: the date sits mid-frame, the counter and
   its label sit near the bottom. No dark overlay — the original has none; the
   photograph is dark enough under the trees to carry white type. */
.countdown { position: relative; isolation: isolate; overflow: hidden; color: #fff; }
.countdown__bg {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%;
  object-fit: cover; object-position: center bottom;
}
.countdown__date {
  left: 20.44%; top: 43.27%; width: 59.12%; height: 13.45%;
  display: grid; align-content: center;
  font-family: var(--numeral);
  font-size: 6.344cqw; line-height: 1.3; letter-spacing: .055em;
  text-align: center;
  text-shadow: 0 2px 20px rgba(0,0,0,.45);
}
.countdown__clock {
  left: 25.64%; top: 89.97%; width: 48.13%; height: 8.55%;
  display: grid; align-content: center; justify-items: center;
  text-shadow: 0 2px 20px rgba(0,0,0,.45);
}
.countdown__num {
  font-family: var(--numeral);
  font-size: 4.4cqw; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.countdown__caption {
  left: 38%; top: 97.2%; width: 24%;
  display: grid; align-content: center;
  font-family: var(--mono-caps);
  font-size: .976cqw; letter-spacing: .35em; text-transform: uppercase;
  text-align: center;
  text-shadow: 0 2px 14px rgba(0,0,0,.6);
}

@media (max-width: 759px) {
  .countdown .canvas { place-content: center; min-height: 62svh; text-align: center; }
  .countdown__date { font-size: clamp(2rem, 9vw, 3.5rem); }
  .countdown__num  { font-size: clamp(2.5rem, 13vw, 5rem); }
  .countdown__caption { font-size: clamp(.6rem, 2.6vw, .75rem); }
}

/* ==========================================================================
   TRAVEL
   ========================================================================== */
.tv-title {
  left: 23.57%; top: 13.15%; width: 55.20%; height: 18.67%;
  display: grid; align-content: center;
  font-family: var(--display); font-weight: 400;
  font-size: 8.784cqw; line-height: .93; text-align: center;
}
.tcol { top: 44.92%; text-align: center; }
.tcol--fly  { left:  9.44%; width: 21.89%; }
.tcol--stay { left: 37.85%; width: 26.72%; }
.tcol--get  { left: 69.55%; width: 22.62%; }
.tcol h2 {
  margin: 0;
  font-family: var(--display); font-weight: 400;
  font-size: 3.5139cqw; line-height: .93;
  text-transform: uppercase;
}
.tcol .dots {
  display: block; width: 52.5%; height: auto;
  margin: 4.03cqw auto 3.95cqw;
}
.tcol p {
  margin: 0;
  font-family: var(--body); font-size: .9761cqw;
  line-height: 1.5; letter-spacing: .015em;
}

@media (max-width: 759px) {
  .canvas--travel { text-align: center; }
  .tv-title { font-size: clamp(3rem, 16vw, 6rem); }
  .tcol h2  { font-size: clamp(1.75rem, 9vw, 3rem); }
  .tcol .dots { width: 150px; margin: 1.1rem auto; }
  .tcol p   { font-size: clamp(.85rem, 3.6vw, 1rem); }
}

/* "things to do" and other flow headings */
.page-head { text-align: center; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.page-head .display { margin: 0 0 .35em; }
.page-head .eyebrow { margin-top: .75rem; }
.display {
  font-family: var(--display); font-weight: 400;
  letter-spacing: .015em; line-height: .93; margin: 0;
}
.display--md { font-size: clamp(2.75rem, 8.78vw, 7.5rem); }
.eyebrow {
  font-family: var(--mono-caps);
  font-size: clamp(.7rem, 1vw, .8125rem);
  letter-spacing: .3em; text-transform: uppercase; margin: 0;
}

/* ==========================================================================
   FAQs
   ========================================================================== */
/* Canva gives each answer its own width (586–729px). One measure near the
   median keeps the line breaks close without hard-coding twelve widths. */
.faq-list { max-width: 660px; margin-inline: auto; }
.faq { text-align: center; }
.faq h2 {
  /* The original uses 300 (The Seasons Light). Real weights available here are
     300 / 400 / 700 — all genuine cuts, no synthetic bolding. */
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.35rem, 2.05vw, 1.75rem);
  line-height: 1.11; margin: 0 0 .5rem;
}
.faq p {
  font-family: var(--sans);
  font-size: clamp(.9rem, 1.17vw, 1rem);
  line-height: 1.4; margin: 0;
}
.faq--todo p { opacity: .5; font-style: italic; }
/* 57 x 1px hairline, centred — the divider used between questions. */
.faq + .faq::before {
  content: ""; display: block;
  width: 57px; height: 1px; margin: 2.9rem auto;
  background: var(--rule);
}

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gallery-grid {
  display: grid;
  gap: clamp(.5rem, 1.4vw, 1rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 22vw;
  grid-auto-flow: row dense;
}
@media (min-width: 800px) {
  .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 9vw; }
}
.gallery-grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 800px) {
  .gallery-grid--pair { grid-auto-rows: 14vw; }
  .gallery-grid--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 12vw; }
}
.gallery-grid > * { grid-row: span 2; }
.gallery-grid > .slot--wide { grid-column: span 2; grid-row: span 2; }
.gallery-grid > .slot--tall { grid-row: span 3; }
.gallery-grid figure { overflow: hidden; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; }
.slot {
  background: var(--green);
  display: grid; place-items: center;
  color: rgba(255,255,255,.75);
  font-family: var(--mono-caps); font-size: .6875rem;
  letter-spacing: .25em; text-transform: uppercase;
}

/* ==========================================================================
   SCHEDULE (draft)
   ========================================================================== */
.draft-note {
  background: #2b2b2b; color: #fff;
  font-family: var(--sans); font-size: .8125rem;
  text-align: center; padding: .65rem var(--gutter);
}
.travel-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 780px) { .travel-grid { grid-template-columns: repeat(3, 1fr); } }
.travel-col { text-align: center; }
.travel-col h2 { margin: 0 0 .5rem; font-family: var(--display); font-weight: 400;
                 font-size: clamp(1.75rem, 3.4vw, 3rem); text-transform: uppercase; }
.travel-col .dots { display: block; width: 150px; max-width: 60%; height: auto; margin: 1.1rem auto; }
.travel-col p { font-family: var(--body); font-size: clamp(.9rem, 1.15vw, 1rem);
                line-height: 1.5; letter-spacing: .015em; margin: 0; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  background: var(--olive-dk); color: var(--cream);
  padding: clamp(2.5rem, 6vw, 4rem) var(--gutter);
  text-align: center;
}
.footer__mark {
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1; margin: 0 0 .55em;
}
.footer__meta {
  font-family: var(--mono-caps); font-size: .75rem;
  letter-spacing: .3em; text-transform: uppercase; margin: 0;
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }