/* ==========================================================================
   MAHARASHTRA WEDDING — "Our Story" and the event schedule
   --------------------------------------------------------------------------
   Built from our-story-ui.png (1440 x 4011), measured rather than eyeballed.
   Every size and offset below is the reference's own pixel value written as a
   fraction of --sw, so the composition holds at any width.

   --sw is the design width: the viewport, capped at 1600. At 1440 it IS the
   reference, so the numbers are literal. Backgrounds stay full-bleed; only the
   composed content is bound to --sw.

   Measured constants (of 1440):

     band A height   1010 -> .7014      arch openings   x  70 / 539 / 1008
     arch width       362 -> .2514      side arch apex  y 196, bottom 1011
     garlands       x  57 / 471 / 971 / 1385,  w 20, h 265
     ornaments      x 251 / 1187,  w 149
     heading                 y 237..371        divider    w 250 -> .1736
     paragraph               y 494..861,  line step 42.5
     top border bar   35 -> .0243
     couple feet      x 312, w 1041, top 1060
     event disc       904 -> .6278      placard  668 x 337 -> .4639 x .2340
     disc 1 top      1942               disc 2 top 3025   (step 1083 -> .7521)
   ========================================================================== */

@font-face {
  font-family: "Gafiya";
  src: url("Gafiya-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

.our-story {
  --sw: min(100vw, 1600px);
  --ts: 1;                          /* type scale, stepped up on small screens */

  /* The band A ground is the colour UNDER minar-overlay.png, not the colour you
     read off the reference: the overlay is rgba(48,21,38,.302), so sampling the
     finished artwork and using that as the ground darkens it twice. Solved back
     out of the composite instead. */
  --story-brown: #833a12;           /* composites to (108,48,25)    */
  --event-brown: #8f4221;           /* band B ground   (143,66,33)  */
  --cream: #fdf1e2;
  --gold: #f0c179;

  --rail-t: calc(var(--sw) * 0.0507);   /* section-bar.png at native 73px @1440 */

  /* the arch silhouette, traced column-by-column off minar-overlay.png's own
     alpha — so a photo clipped with it sits exactly inside the drawn arch */
  /* The arch the photographs are cut to, traced from the REFERENCE'S OWN
     photograph silhouette rather than inferred from minar-overlay.png.

     That was the mistake, three times over. The overlay is a thin OUTLINE —
     alpha is 0 across its whole interior — so tracing "the opening" out of its
     alpha read stroke crossings, not the shape the photograph should take, and
     every attempt to clean that up (more points, monotonic shoulders, an inset
     box) fixed one symptom and broke another. Reading the finished artwork
     instead gives the answer directly: in the reference the photograph occupies
     x 98..402, y 252..1002, and this is the top boundary of exactly that. */
  --arch: polygon(
    0.00% 11.41%, 1.32% 11.11%, 2.63% 10.76%, 3.95% 10.52%, 5.26% 10.32%,
    6.58% 10.17%, 7.89% 10.12%, 9.21% 10.11%, 10.53% 8.32%, 11.84% 6.79%,
    13.16% 6.13%, 14.47% 5.63%, 15.79% 5.30%, 17.11% 5.03%, 18.42% 4.85%,
    19.74% 4.77%, 21.05% 4.66%, 22.37% 4.77%, 23.68% 4.82%, 25.00% 4.93%,
    26.32% 4.71%, 27.63% 3.70%, 28.95% 3.06%, 30.26% 2.61%, 31.58% 2.32%,
    32.89% 2.16%, 34.21% 2.02%, 35.53% 2.00%, 36.84% 2.05%, 38.16% 2.18%,
    39.47% 1.60%, 40.79% 0.83%, 42.11% 0.43%, 43.42% 0.08%, 44.74% 0.00%,
    46.05% 0.00%, 47.37% 0.00%, 48.68% 0.00%, 50.00% 0.00%, 51.32% 0.00%,
    52.63% 0.00%, 53.95% 0.00%, 55.26% 0.00%, 56.58% 0.08%, 57.89% 0.43%,
    59.21% 0.83%, 60.53% 1.60%, 61.84% 2.18%, 63.16% 2.05%, 64.47% 2.00%,
    65.79% 2.02%, 67.11% 2.16%, 68.42% 2.32%, 69.74% 2.61%, 71.05% 3.06%,
    72.37% 3.70%, 73.68% 4.71%, 75.00% 4.93%, 76.32% 4.82%, 77.63% 4.77%,
    78.95% 4.66%, 80.26% 4.77%, 81.58% 4.85%, 82.89% 5.03%, 84.21% 5.30%,
    85.53% 5.63%, 86.84% 6.13%, 88.16% 6.79%, 89.47% 8.32%, 90.79% 10.11%,
    92.11% 10.12%, 93.42% 10.17%, 94.74% 10.32%, 96.05% 10.52%,
    97.37% 10.76%, 98.68% 11.11%, 100.00% 11.41%, 100% 100%, 0% 100%);

  position: relative;
  width: 100%;
  background: var(--story-brown);
  color: var(--cream);
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}

/* the design column every measured fraction is relative to */
.story-wrap {
  position: relative;
  width: var(--sw);
  margin: 0 auto;
}

/* ==========================================================================
   BAND A — Our Story
   ========================================================================== */

.story-band {
  position: relative;
  background: var(--story-brown);

  /* Band A is FULL-BLEED. The minar is architecture — it has to meet both edges
     of the screen or it reads as a picture pasted on a wall. Redefining --sw
     here re-bases every measured fraction in this band on the viewport instead
     of the capped design column, so the arches always reach the edges and the
     portraits stay locked to their openings at any width. The events band below
     keeps the outer, capped --sw: its discs should not grow without limit. */
  --sw: 100vw;
}

/* 100vw includes the scrollbar, so the wrap is a hair wider than its parent.
   Centring it by hand (rather than `margin: 0 auto`, which collapses to the
   left when over-constrained) keeps the bleed even, and the section's own
   overflow clips it. */
.story-band .story-wrap {
  margin-left: 50%;
  transform: translateX(-50%);
}

/* minar-overlay.png (2586x1559) and its three openings ARE the layout: at --sw
   wide it stands .6028 tall, which IS the band's height. The wrap is given the
   artwork's own aspect so the arches always reach the floor — forcing any other
   height leaves them floating short of it while the portraits run past. */
.story-band .story-wrap {
  aspect-ratio: 2586 / 1559;   /* minar-overlay.png's own aspect: 868 tall @1440 */
}

.story-arches {
  position: absolute;
  inset: 0;
  z-index: 0;              /* below the drifting marigolds (1), which are below
                              the portraits and the story (2) */
  pointer-events: none;
}

.story-arches img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- the marigold torans hung across the top ---------------------------- */

.story-garland {
  position: absolute;
  top: 0;
  width: calc(var(--sw) * 0.01389);
  height: calc(var(--sw) * 0.184);
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}

.story-garland img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;                 /* a repeating garland strip, 36 x 635 */
}

.story-garland--1 { left: calc(var(--sw) * 0.0326); }
.story-garland--2 { left: calc(var(--sw) * 0.3202); }
.story-garland--3 { left: calc(var(--sw) * 0.6674); }
.story-garland--4 { left: calc(var(--sw) * 0.9549); }

/* ---- the carved ornament over each side arch ---------------------------- */

.story-orn {
  position: absolute;
  top: calc(var(--sw) * 0.0444);
  width: calc(var(--sw) * 0.1035);
  height: auto;
  z-index: 2;
  opacity: 0.5;
  pointer-events: none;
}

.story-orn--l { left: calc(var(--sw) * 0.1226); }
.story-orn--r { left: calc(var(--sw) * 0.7726); }

/* ---- the two portraits, each clipped into its own arch ------------------ */

/* THE BOX IS THE OPENING, EXACTLY — and it has to be, because `clip-path`
   percentages resolve against the element's own box. The arch was traced from
   an opening 363 wide by 700 tall (aspect .5179); put that polygon on a box of
   any other aspect and the arch is stretched or squashed and stops following
   the drawn one at the sides. Insetting the box to leave a visible border did
   exactly that — a 7% horizontal squash — which is why the edges no longer
   lined up. The border in the reference is the ARTWORK's own arch frame; the
   photograph belongs in the opening inside it. */
.story-portrait {
  position: absolute;
  /* the reference's own photograph box: x 98..402, y 252..1002 of a 1007-tall
     band, restated against this band's .6028 height */
  top: calc(var(--sw) * 0.1508);
  width: calc(var(--sw) * 0.2118);
  height: calc(var(--sw) * 0.4490);
  z-index: 2;
  clip-path: var(--arch);
  overflow: hidden;
}

.story-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;                        /* never distort a face */
  object-position: 50% 22%;
  transform: scale(var(--zoom, 1));
  transform-origin: 50% 18%;
}

/* Both are zoomed a little so the photograph OVERFILLS its arch. At exactly
   `cover` the source's own bottom edge — the studio floor — lands inside the
   frame and reads as a seam across the picture. Cropping, never stretching.
   The groom is taken a touch further because he is shot wider than she is, and
   without it he reads as standing further away. */
.story-portrait--bride img { --zoom: 1.10; }
.story-portrait--groom img { --zoom: 1.14; }

.story-portrait--bride { left: calc(var(--sw) * 0.0681); }
.story-portrait--groom { left: calc(var(--sw) * 0.7205); }

/* ---- the story itself, inside the taller centre arch -------------------- */

.story-copy {
  position: absolute;
  left: 50%;
  top: calc(var(--sw) * 0.1146);   /* inside the centre arch, apex y 102 */
  width: calc(var(--sw) * 0.196);       /* ref: 10 lines, max ink width 287 */
  transform: translateX(-50%);
  z-index: 2;
  text-align: center;
}

.story-title {
  margin: 0;
  font-family: "Gafiya", "Iowan Old Style", Palatino, Georgia, serif;
  /* matched on CAP HEIGHT (ref 60px), not ink width: the reference sets this
     in a narrower face than Gafiya, and the two cannot agree on both */
  font-size: calc(var(--sw) * 0.0512 * var(--ts));
  line-height: 1.06;
  font-weight: 400;
  letter-spacing: 0.012em;
  color: var(--cream);
}

.story-rule {
  display: block;
  width: calc(var(--sw) * 0.1736);
  height: auto;
  margin: calc(var(--sw) * 0.024) auto calc(var(--sw) * 0.019);
}

.story-rule--end { margin: calc(var(--sw) * 0.022) auto 0; }

.story-text {
  margin: 0;
  font-size: calc(var(--sw) * 0.0194 * var(--ts));
  line-height: 1.42;              /* ref line step 43px */
  color: var(--cream);
}

/* ==========================================================================
   BAND B — the events
   ========================================================================== */

.story-events {
  position: relative;
  background: var(--event-brown);
  padding-bottom: calc(var(--sw) * 0.06);
}

/* section-bar.png (3008 x 73) runs the full width as the top rail, and the
   same strip stands on its end down each side. Nothing is redrawn in CSS —
   the artwork is the border. */
.story-rail {
  position: relative;
  z-index: 4;
  display: block;
  width: 100%;
  height: var(--rail-t);
  background: url("../section-bar.png") repeat-x center / auto 100%;
}

/* The side rails are the SAME strip stood on its end. CSS cannot rotate a
   background image, so the strip is laid out horizontally on a pseudo-element
   and the element itself is given a quarter turn about its top-left corner —
   which leaves it hanging off to the left, hence the matching translate. It is
   made absurdly long and clipped, because the band is several viewports tall
   and a repeating pattern costs nothing. */
.story-events__frame {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--rail-t);
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}

.story-events__frame::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  /* Long enough for any band. It used to be 600vh, but the band's height has nothing to
     do with the screen's: with the events held on screen while they are scrolled through
     it grew past that on a computer, and the rails stopped short of the bottom. Clipped,
     and only the part in view is ever drawn. */
  width: max(600vh, 40000px);
  height: var(--rail-t);
  background: url("../section-bar.png") repeat-x left center / auto 100%;
  transform-origin: 0 0;
  transform: translateX(var(--rail-t)) rotate(90deg);
}

.story-events__frame--l { left: 0; }
.story-events__frame--r { right: 0; transform: scaleX(-1); }

/* Above the border rails (z 3) — NOT below them. In the reference the banana
   leaves fall ACROSS the printed border, which is what makes them read as
   plants standing in front of the frame rather than wallpaper behind it.
   Nothing else in here comes near the rails, so raising the whole layer is
   safe: the discs and the couple sit well inside them. */
.story-events__inner {
  position: relative;
  z-index: 5;
}

/* ---- the couple, and the banana palms flanking them --------------------- */

.story-feet {
  position: relative;
  z-index: 2;
  display: block;
  width: calc(var(--sw) * 0.7229);
  height: auto;
  margin-left: calc(var(--sw) * 0.2167);
  padding-top: 0;                           /* ref: flush under the rail, at 1080 */
}

/* The palms are positioned by where their LEAVES fall, not by the image box:
   tree.png carries its foliage between 7.4% and 75.8% of its own height and
   its trunk below that, so each is sized and pushed off the edge until only
   the leaf fan shows, exactly as the reference has it. The two differ in size
   there — the right-hand palm is the larger — and that is kept. */
/* The wrapper holds the position and the MIRROR; the image inside holds the
   artwork and is the only thing animated. Keeping those apart matters: when
   GSAP wrote transforms onto the same element that carried `scaleX(-1)`, a
   ScrollTrigger refresh could re-read the CSS matrix and flip it — the left
   palm blinked — and a mirrored `transform-origin` made its lean-in swing the
   opposite way from its twin. Nothing now writes a transform to the wrapper,
   and both images animate with identical values. */
.story-tree {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.story-tree img {
  display: block;
  width: 100%;
  height: auto;
  /* the reference shows leaves only, never a trunk. tree.png's foliage stops
     at 75.8% of its height, so that is exactly where it is cut. */
  clip-path: inset(0 0 24.2% 0);
}

/* Both palms are the same size — .46 of the width — and most of each is off
   the frame; only the upper leaves reach in. Fitted by compositing candidates
   against the reference and taking the least-error placement, because the
   visible bounding box alone does not pin the scale: a bigger palm pushed
   further out leaves the same footprint. */
/* Anchored to the section's own edges (their parent is the full-width
   `.story-events__inner`, not the centred column), so on a wide screen they
   stand against the border instead of floating inside it.

   THE TWO ARE ONE PLANT, MIRRORED. Same width, same offset, same height; the
   left one is flipped. Because both are pushed off by the same amount, each
   shows the same 250px of frond — so whatever leaf falls across the left rail
   falls across the right one too, reflected. (The reference actually draws them
   at two different sizes; matching them was asked for, and reads better.)

   The size is derived, not guessed. tree.png carries its foliage between 7.4%
   and 75.8% of its height, so a visible frond mass of H px needs an image
   H / 0.684 tall; 472px of frond gives the .3835 below. Going bigger — .50 was
   tried — is what puts the plants' lower stems on screen, because a bigger
   plant clipped at the same fraction shows more of its base. */
.story-tree--l,
.story-tree--r {
  width: calc(var(--sw) * 0.3835);
  top: calc(var(--sw) * 0.0569);
}

.story-tree--l {
  left: calc(var(--sw) * -0.2097);
  transform: scaleX(-1);            /* static, and never touched by GSAP */
}

.story-tree--r { right: calc(var(--sw) * -0.2097); }

/* ---- one event ---------------------------------------------------------- */

/* The disc, and a container the words are measured against. Sizing the type in
   `cqw` — percentages of THIS box — means the whole card scales as one: change
   the width below and the name, date, rule and time all follow, at any screen
   size. The --sw values on each are the fallback for browsers without container
   queries, and are kept in step with the cqw figures. */
.story-event {
  position: relative;
  z-index: 2;
  width: calc(var(--sw) * 0.46);            /* was .6278 — the reference's own
                                               disc, which read far too large */
  margin: 0 auto;
  container-type: inline-size;
}

/* the step from one disc's top to the next, measured off the reference */
.story-event + .story-event { margin-top: calc(var(--sw) * 0.075); }

.story-event:first-of-type { margin-top: calc(var(--sw) * 0.1076); }  /* ref disc 1 top = 1942 */

.story-event__disc {
  display: block;
  width: 100%;
  height: auto;
}

/* the cream placard rides the top of the disc, standing .0243 above it */
.story-event__placard {
  position: absolute;
  left: 50%;
  top: calc(var(--sw) * -0.0243);
  width: 73.9%;                             /* .4639 of --sw, of a .6278 box */
  height: auto;
  transform: translateX(-50%);
  z-index: 2;
}

.story-event__body {
  position: absolute;
  left: 0;
  right: 0;
  top: 41%;                                 /* the name's own top in the disc */
  z-index: 3;
  text-align: center;
}

.story-event__name {
  margin: 0;
  font-family: "Gafiya", "Iowan Old Style", Palatino, Georgia, serif;
  font-size: calc(var(--sw) * 0.0534 * var(--ts));
  font-size: calc(11.61cqw * var(--ts));
  line-height: 1;
  font-weight: 400;
  color: var(--cream);
}

.story-event__date {
  margin: 4.46cqw 0 0;
  font-family: "Gafiya", "Iowan Old Style", Palatino, Georgia, serif;
  font-size: calc(var(--sw) * 0.0341 * var(--ts));
  font-size: calc(7.41cqw * var(--ts));
  line-height: 1;
  color: var(--cream);
}

.story-event__rule {
  display: block;
  width: 27.65cqw;
  height: auto;
  margin: 3.42cqw auto;
}

.story-event__time {
  margin: 0;
  font-family: "Gafiya", "Iowan Old Style", Palatino, Georgia, serif;
  font-size: calc(var(--sw) * 0.0312 * var(--ts));
  font-size: calc(6.79cqw * var(--ts));
  line-height: 1;
  color: var(--cream);
}

/* ==========================================================================
   RESPONSIVE
   --------------------------------------------------------------------------
   The reference is drawn for a wide poster. Three arches side by side stop
   working long before a phone: at 620px each opening is 156px, which is too
   narrow for the story to read. Below that the band re-flows — the two
   portraits keep their arches and sit side by side, the story goes underneath
   at full width — and the type steps up so it stays legible.
   ========================================================================== */

@media (max-width: 1100px) {
  .our-story { --ts: 1.08; }
}

@media (max-width: 860px) {
  .our-story { --ts: 1.16; }

  /* the band stops being a fixed-aspect picture and becomes a stack */
  .story-band .story-wrap { aspect-ratio: auto; padding-bottom: calc(var(--sw) * 0.06); }
  .story-arches { display: none; }         /* its openings no longer align */
  .story-orn { display: none; }

  .story-garland { height: calc(var(--sw) * 0.30); }
  .story-garland--2 { left: calc(var(--sw) * 0.28); }
  .story-garland--3 { left: calc(var(--sw) * 0.70); }

  .story-portraits {
    display: flex;
    justify-content: center;
    gap: calc(var(--sw) * 0.04);
    padding: calc(var(--sw) * 0.10) calc(var(--sw) * 0.06) 0;
  }

  .story-portrait {
    position: relative;
    top: auto;
    left: auto !important;
    width: calc(var(--sw) * 0.40);
    height: calc(var(--sw) * 0.62);
  }

  .story-copy {
    position: relative;
    left: auto;
    top: auto;
    width: calc(var(--sw) * 0.78);
    margin: calc(var(--sw) * 0.07) auto 0;
    transform: none;
  }

  .story-title { font-size: calc(var(--sw) * 0.10 * var(--ts)); }
  .story-text  { font-size: calc(var(--sw) * 0.036 * var(--ts)); }
  .story-rule  { width: calc(var(--sw) * 0.30); }

  /* the event discs grow into the width they now have */
  /* only the box changes — the words are cqw of it, so they follow */
  .story-event { width: calc(var(--sw) * 0.64); }

  /* same proportions as the desktop palms — only the vertical placement moves,
     because the band above them is shorter here */
  .story-tree--l,
  .story-tree--r { top: calc(var(--sw) * 0.04); }
}

@media (max-width: 560px) {
  .our-story { --ts: 1.24; }

  .story-portraits { gap: calc(var(--sw) * 0.03); padding-inline: calc(var(--sw) * 0.04); }
  .story-portrait { width: calc(var(--sw) * 0.44); height: calc(var(--sw) * 0.68); }

  .story-copy { width: calc(var(--sw) * 0.84); }
  .story-title { font-size: calc(var(--sw) * 0.125 * var(--ts)); }
  .story-text  { font-size: calc(var(--sw) * 0.042 * var(--ts)); }

  .story-event { width: calc(var(--sw) * 0.74); }

  /* the palms would swamp a phone; they stay, but further out of the way */
  /* a little larger on a phone so the plants still read as plants */
  .story-tree--l,
  .story-tree--r {
    width: calc(var(--sw) * 0.44);
    top: calc(var(--sw) * 0.03);
  }
  .story-tree--l { left: calc(var(--sw) * -0.24); }
  .story-tree--r { right: calc(var(--sw) * -0.24); }
}

/* ==========================================================================
   REDUCED MOTION — the composition stands, nothing moves
   ========================================================================== */

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