/* =============================================================
   THE LAKEHOUSE WEDDING — tweak panel
   Change these first; almost every visual decision reads from here.
   ============================================================= */
:root {
  /* note to piper: page - color - the cream background. Matched to the cream INSIDE the
     exported graphics (the WebP encoder shifts it a hair off the Canva original). If you
     re-export the artwork and a faint vertical line appears at the edge of the florals,
     this is the culprit. */
  --cream: #FEFDF5;

  /* note to piper: text - color - dark green for headings, matches "SAVE THE DATE" */
  --green: #3D5138;
  /* note to piper: text - color - pink accent, matches the script names */
  --pink:  #C2478E;
  /* note to piper: text - color - body copy; slightly softer than the heading green */
  --ink:   #4A5546;

  /* note to piper: purple frame - color and thickness */
  --rule: #756D9F;
  --rule-weight: 2px;
  /* note to piper: purple frame - spacing - how far the frame sits inside the edge of the
     first screen. 0.5in is about half an inch on a normal display. The 6vw stops it from
     swallowing a phone screen. */
  --frame-inset: min(0.5in, 6vw);

  /* Aspect ratios of the two floral crops (width ÷ height). Only change these if you
     re-crop the artwork — the layout math below depends on them. */
  --left-ratio:  0.6511;
  --right-ratio: 0.2232;

  /* note to piper: floral panels - sizing - panels are as tall as the window, but stop
     growing once they'd eat more than ~56% of the width. This only bites on tall/square
     windows — on a normal widescreen laptop the florals still run the full height.
     Raise 64vw to let them run wider on tall screens; lower it for more text room. */
  --panel-h: min(100dvh, 64vw);

  /* note to piper: layout - spacing - breathing room between the florals and the text */
  --gutter: clamp(1rem, 2vw, 2.5rem);

  /* How wide the florals actually are, derived from the two numbers above. */
  --left-w:  calc(var(--panel-h) * var(--left-ratio));
  --right-w: calc(var(--panel-h) * var(--right-ratio));

  /* note to piper: text columns - sizing - the NARROWEST the scrolling text is allowed to
     get. Below this the florals start crossing over the text instead of squeezing it —
     a line may be partly hidden until it scrolls clear. Raise for wider text. */
  --prose-min: 35.75rem;   /* 572px — lowered 100px on 2026-08-04 so less gets covered */
  /* The save-the-date card has no minimum — it shrinks rather than let the florals cross
     over it. See the .hero rule below for why. */

  /* Share of the leftover space each side takes, so the two florals shrink proportionally
     rather than one eating the other's room. */
  --left-share:  0.747;
  --right-share: 0.253;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(1.05rem, 0.55vw + 0.95rem, 1.35rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

/* -------------------------------------------------------------
   FIXED FLORAL PANELS
   position:fixed is what pins them — the page scrolls underneath.
   Anchored to the bottom so that when the height cap kicks in on very
   tall windows, the florals stay rooted instead of floating.
   ------------------------------------------------------------- */
.panel {
  position: fixed;
  bottom: 0;
  height: var(--panel-h);
  z-index: 2;                 /* above the text and the purple frame */
  pointer-events: none;       /* never blocks a click or a text selection */
}
.panel picture, .panel img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;            /* height drives the size, not width */
}
.panel--left  { left: 0; }
.panel--right { right: 0; }

/* -------------------------------------------------------------
   FIRST SCREEN
   ------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* The card ALWAYS stays clear of the florals. Unlike the scrolling copy below, it must
     never be crossed over — it is the one thing every guest has to be able to read. On a
     narrow window it shrinks instead. */
  padding-left:  calc(var(--left-w)  + var(--gutter));
  padding-right: calc(var(--right-w) + var(--gutter));
  padding-top:    calc(var(--frame-inset) + 2rem);
  padding-bottom: calc(var(--frame-inset) + 2rem);
}

/* The purple rule, inset from the edges of the screen. Absolutely positioned, so the
   hero's own padding does not push it inward — it tracks the window, not the text. */
.hero-frame {
  position: absolute;
  inset: var(--frame-inset);
  border: var(--rule-weight) solid var(--rule);
  z-index: 0;
  pointer-events: none;
}

.hero-text {
  position: relative;
  z-index: 1;
  width: 100%;
  /* note to piper: save-the-date - sizing - the widest the card text is allowed to get. */
  max-width: 60rem;
}
.hero-text img { display: block; width: 100%; height: auto; }

/* -------------------------------------------------------------
   SCROLLING COPY
   Allowed to run wider than the gap between the florals — the artwork
   crosses over it, and a line may be partly covered until it scrolls up.
   ------------------------------------------------------------- */
.prose {
  position: relative;
  z-index: 1;
  padding-left:  max(var(--gutter), min(calc(var(--left-w)  + var(--gutter)), calc((100% - var(--prose-min)) * var(--left-share))));
  padding-right: max(var(--gutter), min(calc(var(--right-w) + var(--gutter)), calc((100% - var(--prose-min)) * var(--right-share))));
  padding-bottom: 14rem;
}
.prose > * { max-width: 42rem; margin-inline: auto; }

.prose h2 {
  /* note to piper: section headings - type - letter-spaced green caps, like "GRAND ISLE, VT" */
  font-size: clamp(1.3rem, 1vw + 1.05rem, 1.75rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  margin: 4.5rem auto 1rem;
}
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 auto 1.4rem; }

.closing {
  /* note to piper: closing line - type - the italic pink sign-off at the bottom */
  margin-top: 4rem !important;
  text-align: center;
  font-style: italic;
  font-size: 1.3em;
  color: var(--pink);
}

/* -------------------------------------------------------------
   PHONES (narrow AND upright)
   On a tall, narrow screen the florals are naturally short — the 64vw cap
   means they only reach part-way up — so they sit in the bottom two corners
   and the card runs full width ABOVE them. No fading, no separate artwork,
   no cut edges: the same florals at full strength, just smaller.

   Deliberately requires `orientation: portrait`. A short, wide window (a
   half-height desktop window, or a zoomed-in browser) keeps the normal
   side-panel layout, because there the florals ARE tall enough to collide
   with a full-width card.
   ------------------------------------------------------------- */
@media (max-width: 600px) and (orientation: portrait) {
  /* Card and copy both run the full width — the florals are below them. */
  .hero {
    padding-left:  calc(var(--frame-inset) + 1.25rem);
    padding-right: calc(var(--frame-inset) + 1.25rem);
    /* Sit above the florals rather than dead-centre in the screen. */
    align-items: flex-start;
    padding-top: calc(var(--frame-inset) + 12vh);
  }
  .prose {
    padding-left:  clamp(1.25rem, 7vw, 2.5rem);
    padding-right: clamp(1.25rem, 7vw, 2.5rem);
    padding-bottom: 10rem;
  }
}

/* Respect a reduced-motion preference for the smooth scroll. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}