/* ==========================================================================
   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; }
.canvas figure { overflow: hidden; }
.canvas figure > img { width: 100%; height: 100%; object-fit: cover; }

/* 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;
  }
  .canvas figure > img { height: auto; }
}

/* ---------- 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: baseline; justify-content: space-between;
  gap: 1rem; padding: .55rem var(--gutter);
}
.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; }
.hero .canvas { color: #fff; }
.hero__name {
  left: 4.03%; top: 20.96%; width: 32.14%;
  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%;
  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%; }
.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%;
  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%;
  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%; }
.motto {
  left: 2.34%; top: 46.61%; width: 95.53%;
  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) --------------------------------------------- */
.countdown {
  position: relative; isolation: isolate;
  min-height: min(70svh, 640px);
  display: grid; place-content: center; gap: clamp(1.5rem, 4vw, 2.5rem);
  padding: var(--section-y) var(--gutter);
  text-align: center; color: #fff;
}
.countdown__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.countdown::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0,0,0,.42); }
.countdown__date {
  font-family: var(--numeral);
  font-size: clamp(2.5rem, 6.35vw, 5.42rem);
  letter-spacing: .055em; line-height: 1.3; margin: 0;
}
.countdown__clock { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.25rem, 5vw, 3.5rem); }
.countdown__unit { display: grid; gap: .35rem; min-width: 4.5rem; }
.countdown__num {
  font-family: var(--numeral);
  font-size: clamp(2rem, 5.5vw, 3.75rem); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.countdown__label,
.countdown__caption {
  font-family: var(--mono-caps);
  font-size: clamp(.625rem, 1vw, .75rem);
  letter-spacing: .35em; text-transform: uppercase;
}
.countdown__caption { margin: 0; }

/* ==========================================================================
   TRAVEL
   ========================================================================== */
.tv-title {
  left: 23.57%; top: 13.15%; width: 55.20%;
  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; } }