/* ==========================================================================
   MAHARASHTRA WEDDING — Beautiful Memories, and the RSVP
   --------------------------------------------------------------------------
   Built from beautiful-memory-ui.png (1440 x 5045). Every size below is that
   reference's own pixel value written as a fraction of --mw, so the layout
   holds at any width.

   Measured (px at 1440 -> fraction):

     cornice      kaman-upper-side.png, 2872 x 107, full width, own aspect
     columns      kaman-side-*.png, 235 x 1884, .07 wide, tiled down the side
     heading      cap 74 -> .0715      line step 96 -> .0667
     frame        416 wide -> .289     column gap .094   row gap .074
     row 1 top    461 -> .320          row 2 top 1103 -> .766
     rule         400 wide -> .278     (divider-for-memory-section, 400 x 86)
     "Presence"   cap 69 -> .0667      line step 94 -> .0653
     body         47 -> .0326          line step 61 -> .0424
     footer       last-footer-image.png, full width, its own aspect
   ========================================================================== */

.memories {
  --mw: min(100vw, 1500px);
  --ts: 1;

  --ground: #8e4221;          /* the reference's own (142,66,33) */
  --ink: #fdf1e2;
  --gold: #f0c179;
  --frame: #ded4c4;           /* the cream arch behind each photograph */
  --border: calc(var(--mw) * 0.008);   /* the cream showing round the picture */

  /* the arch each photograph is cut to, traced column-by-column off
     frame-new-section.png's alpha and mirrored so it is exactly symmetric */
  --memory-arch: polygon(
    0.00% 30.02%, 2.50% 26.53%, 5.00% 25.09%, 7.50% 24.06%, 10.00% 19.47%,
    12.50% 17.26%, 15.00% 15.90%, 17.50% 14.88%, 20.00% 14.54%,
    22.50% 13.44%, 25.00% 11.22%, 27.50% 9.52%, 30.00% 8.08%, 32.50% 6.89%,
    35.00% 6.04%, 37.50% 5.36%, 40.00% 4.76%, 42.50% 4.00%, 45.00% 3.06%,
    47.50% 1.79%, 50.00% 2.04%, 52.50% 1.79%, 55.00% 3.06%, 57.50% 4.00%,
    60.00% 4.76%, 62.50% 5.36%, 65.00% 6.04%, 67.50% 6.89%, 70.00% 8.08%,
    72.50% 9.52%, 75.00% 11.22%, 77.50% 13.44%, 80.00% 14.54%, 82.50% 14.88%,
    85.00% 15.90%, 87.50% 17.26%, 90.00% 19.47%, 92.50% 24.06%,
    95.00% 25.09%, 97.50% 26.53%, 100.00% 30.02%, 100% 100%, 0% 100%);

  position: relative;
  width: 100%;
  overflow: hidden;

  background: var(--ground);
  color: var(--ink);
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
  padding-bottom: 0;
}

/* ---- the carved frame: cornice across the top, a column down each side --- */

.memories__cornice {
  position: relative;
  z-index: 4;
  display: block;
  width: 100%;
  height: calc(var(--mw) * 0.0373);      /* 2872 x 107 at its own aspect */
  background: url("../kaman-upper-side.png") repeat-x center / auto 100%;
}

/* The columns TILE rather than stretch. kaman-side is 235 x 1884 — tall, but
   nothing like the height of this section — so it is laid in as a repeating
   background at its natural width-to-height ratio. Stretching it would smear
   the carving. */
.memories__column {
  position: absolute;
  top: calc(var(--mw) * 0.0373);
  bottom: 0;
  width: calc(var(--mw) * 0.07);
  z-index: 3;
  pointer-events: none;
  background-size: 100% auto;
  background-repeat: repeat-y;
}

.memories__column--l { left: 0;  background-image: url("../kaman-side-1.png"); }
.memories__column--r { right: 0; background-image: url("../kaman-side-2.png"); }

/* beautiful-memory-hero-bg.png is a colonnade washed almost flat in the same
   rust — mean (140,64,31), standard deviation about 5 — so it reads as
   architecture faintly present rather than as a picture.

   It stops where the photographs do. Painted as the section's background it ran
   the whole way down, and the reference's own texture ends at about y 1669 of
   1440 wide with plain ground below — so it gets its own box, ending with the
   grid; setting the
   height on a background instead would squash the colonnade by about 14%. */
.memories__top { position: relative; }

.memories__backdrop {
  position: absolute;
  /* up past the wrap's own top padding and the cornice, to the section's edge */
  top: calc(var(--mw) * -0.1473);
  bottom: calc(var(--mw) * -0.015);
  /* full-bleed: the wrap is capped at --mw, the colonnade is not */
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* AT ITS OWN SIZE — 571 x 773, tiled. Stretched to the full width it was
   upscaled two and a half times and read as a blurred, stretched photograph
   instead of a texture. At natural size there is no upscaling at all, and
   because the drawing is so nearly flat (standard deviation about 5) the tiling
   does not read as a repeat — it reads as faint architecture in the wall. */
.memories__backdrop {
  /* ONE image, full width, its own aspect. No repeat. */
  background: url("../beautiful-memory-hero-bg.png") no-repeat top center;
  background-size: 100% auto;

  /* THE TWO BACKGROUNDS DID NOT MATCH, and the join announced itself. Measured,
     the colonnade averages (139.9, 63.7, 31.2) and the paper it sits on
     (127.0, 57.2, 29.2) — about 13 levels of red apart, which is plenty to read
     as two different pictures butted together. brightness(.913) is the single
     factor that best maps one onto the other: it lands within ONE level on
     every channel, so the two are the same tone.

     Tone alone still leaves an edge where the image stops, so it is also
     feathered out over its last third. Between the two there is nothing to see:
     no line, no step in colour. */
  filter: brightness(0.913);
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}

/* ---- the drifting flowers get their own layer, above the ground ---------- */

.memories__air {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

/* ---- the centred column everything is measured against ------------------- */

/* NO z-index here. It used to carry `z-index: 2`, which made it a stacking
   context — and the colonnade backdrop lives inside it, so the backdrop was
   lifted above the flower layer and hid every blossom across the whole top of
   the section. Without it the backdrop (z 0), the blossoms (z 1) and the words
   and photographs (z 2, set individually below) sort correctly against the
   section itself. */
.memories__wrap {
  position: relative;
  width: var(--mw);
  margin: 0 auto;
  text-align: center;
  padding: calc(var(--mw) * 0.11) 0 0;
}

/* the content sits above the drifting blossoms; the backdrop sits below them */
.memories__title,
.memories__grid,
.memories__rule,
.memories__ask,
.memories__note,
.rsvp {
  position: relative;
  z-index: 2;
}

.memories__title {
  margin: 0;
  font-family: "Gafiya", "Iowan Old Style", Palatino, Georgia, serif;
  font-size: calc(var(--mw) * 0.0616 * var(--ts));   /* ref ink 350 / 412 */
  line-height: 0.93;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* ---- the four photographs ------------------------------------------------ */

.memories__grid {
  display: grid;
  /* measured: frames 455px wide at 1440, x 214..669 and 770..1225, rows at
     y 469 and 1127 — so .3167 wide with a .0701 column gap and .0597 row gap */
  grid-template-columns: repeat(2, calc(var(--mw) * 0.3167));
  justify-content: center;
  column-gap: calc(var(--mw) * 0.0701);
  row-gap: calc(var(--mw) * 0.0597);
  margin-top: calc(var(--mw) * 0.075);
}

/* the cream arch, and the photograph cut to the same arch just inside it */
.memories__photo {
  position: relative;
  margin: 0;                             /* <figure> carries 40px each side */
  /* `start`, not the grid default `stretch`: stretched, the row's height is
     imposed on the item and `aspect-ratio` then derives the WIDTH from it —
     which had 456px columns rendering 376px frames. */
  align-self: start;
  aspect-ratio: 457 / 588;               /* frame-new-section.png's own */
  background: var(--frame);
  clip-path: var(--memory-arch);
  filter: drop-shadow(0 calc(var(--mw) * 0.006) calc(var(--mw) * 0.012)
                      rgba(60, 20, 6, 0.45));
}

/* The width and height are SET, not left to the insets. An absolutely
   positioned replaced element — an <img> — with `width: auto` uses its own
   intrinsic width and ignores left/right, so insets alone left a 1200px
   photograph sitting unscaled behind the arch and nothing legible showed. */
.memories__photo img {
  position: absolute;
  top: var(--border);
  left: var(--border);
  width: calc(100% - var(--border) * 2);
  height: calc(100% - var(--border) * 2);
  clip-path: var(--memory-arch);
  object-fit: cover;
  object-position: 50% 28%;
}

/* ---- the invitation to reply -------------------------------------------- */

.memories__rule {
  display: block;
  width: calc(var(--mw) * 0.278);
  height: auto;
  margin: calc(var(--mw) * 0.10) auto calc(var(--mw) * 0.055);
}

.memories__rule--end { margin: calc(var(--mw) * 0.055) auto calc(var(--mw) * 0.06); }

.memories__ask {
  margin: 0;
  font-family: "Gafiya", "Iowan Old Style", Palatino, Georgia, serif;
  font-size: calc(var(--mw) * 0.0600 * var(--ts));   /* ref ink 662 / 680 */
  line-height: 0.98;
  font-weight: 400;
}

.memories__note {
  margin: calc(var(--mw) * 0.038) auto 0;
  max-width: calc(var(--mw) * 0.60);   /* ref's longest line is .4715 wide */
  font-size: calc(var(--mw) * 0.0302 * var(--ts));   /* ref ink 680 / 571 / 679 */
  line-height: 1.3;
}

.memories__note + .memories__note { margin-top: calc(var(--mw) * 0.032); }

/* ==========================================================================
   THE RSVP
   --------------------------------------------------------------------------
   Held in the space the reference leaves between the second rule and the
   mandap. Nothing here is a new colour: the fields are the ground darkened,
   the borders the gold already used for every divider on the site, and the
   button the same gold filled in.
   ========================================================================== */

.rsvp {
  width: min(calc(var(--mw) * 0.62), 620px);
  margin: 0 auto;
  text-align: left;
}

.rsvp__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--mw) * 0.018);
}

.rsvp__field { margin-bottom: calc(var(--mw) * 0.018); }

.rsvp__label {
  display: block;
  margin-bottom: calc(var(--mw) * 0.007);
  font-size: calc(var(--mw) * 0.0165 * var(--ts));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}

.rsvp__input,
.rsvp__select,
.rsvp__textarea {
  width: 100%;
  padding: calc(var(--mw) * 0.014) calc(var(--mw) * 0.016);
  border: 1px solid rgba(240, 193, 121, 0.45);
  border-radius: calc(var(--mw) * 0.004);
  background: rgba(74, 30, 12, 0.35);
  color: var(--ink);
  font-family: inherit;
  font-size: calc(var(--mw) * 0.0195 * var(--ts));
  line-height: 1.35;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.rsvp__textarea { min-height: calc(var(--mw) * 0.075); resize: vertical; }

.rsvp__input::placeholder,
.rsvp__textarea::placeholder { color: rgba(253, 241, 226, 0.45); }

.rsvp__input:focus,
.rsvp__select:focus,
.rsvp__textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(74, 30, 12, 0.5);
}

/* the arrow is drawn rather than left to the platform, so the control matches
   the text fields on every browser */
.rsvp__select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--gold) 50%),
    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position:
    right calc(var(--mw) * 0.022) center,
    right calc(var(--mw) * 0.016) center;
  background-size: calc(var(--mw) * 0.006) calc(var(--mw) * 0.006);
  background-repeat: no-repeat;
  background-color: rgba(74, 30, 12, 0.35);
}

.rsvp__select option { background: #6b2c12; color: var(--ink); }

.rsvp__send {
  display: block;
  width: 100%;
  margin-top: calc(var(--mw) * 0.01);
  padding: calc(var(--mw) * 0.016);
  border: 0;
  border-radius: calc(var(--mw) * 0.004);
  background: var(--gold);
  color: #5a2a10;
  font-family: "Gafiya", "Iowan Old Style", Palatino, Georgia, serif;
  font-size: calc(var(--mw) * 0.026 * var(--ts));
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.rsvp__send:hover,
.rsvp__send:focus-visible { filter: brightness(1.07); transform: translateY(-2px); }

.rsvp__thanks {
  margin: calc(var(--mw) * 0.02) 0 0;
  font-size: calc(var(--mw) * 0.0195 * var(--ts));
  text-align: center;
  color: var(--gold);
}

.rsvp__thanks[hidden] { display: none; }

/* ---- the mandap, closing the page --------------------------------------- */

/* Shown WHOLE. The reference crops it — last-footer-image.png is 1086 x 1448,
   and its layout shows only the top .999 of the full-width image, which puts
   the cut across the couple at about waist height. Matching that faithfully
   looked like a mistake rather than a decision, so the picture is given its own
   aspect and the section simply grows to hold it. */
.memories__footer {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  margin-top: calc(var(--mw) * 0.07);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1100px) { .memories { --ts: 1.06; } }

@media (max-width: 860px) {
  .memories { --ts: 1.14; }
  .memories__wrap { width: calc(var(--mw) * 0.86); }
  .memories__grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: calc(var(--mw) * 0.05);
    row-gap: calc(var(--mw) * 0.05);
  }
  .rsvp { width: 100%; }
}

@media (max-width: 620px) {
  .memories { --ts: 1.2; }
  .memories__wrap { width: calc(var(--mw) * 0.82); padding-top: calc(var(--mw) * 0.16); }
  .memories__title { font-size: calc(var(--mw) * 0.115 * var(--ts)); }
  .memories__ask   { font-size: calc(var(--mw) * 0.095 * var(--ts)); }
  .memories__note  { font-size: calc(var(--mw) * 0.042 * var(--ts)); max-width: none; }
  .memories__rule  { width: calc(var(--mw) * 0.46); }
  .memories__column { width: calc(var(--mw) * 0.055); }

  /* the fields need the whole width to stay tappable */
  .rsvp__row { grid-template-columns: 1fr; gap: 0; }
  .rsvp__label { font-size: calc(var(--mw) * 0.026 * var(--ts)); }
  .rsvp__input,
  .rsvp__select,
  .rsvp__textarea { font-size: calc(var(--mw) * 0.034 * var(--ts)); padding: calc(var(--mw) * 0.026); }
  .rsvp__send { font-size: calc(var(--mw) * 0.045 * var(--ts)); padding: calc(var(--mw) * 0.03); }
  .rsvp__field { margin-bottom: calc(var(--mw) * 0.03); }
}

@media (max-width: 430px) {
  /* two arches side by side stop being photographs and become thumbnails */
  .memories__grid { grid-template-columns: 1fr; row-gap: calc(var(--mw) * 0.06); }
}

@media (prefers-reduced-motion: reduce) {
  .memories * { animation: none !important; transition: none !important; }
}