/* =============================================================
   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);

  /* note to piper: floral panels - sizing - the florals are ALWAYS the full height of the
     window, edge to edge, exactly like the original save-the-date card. (Portrait phones
     override this below — there they become short bottom-corner accents.) */
  --panel-h: 100dvh;

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

  /* How much of each floral is DENSE artwork (the "trunk"), as a fraction of its height —
     measured from the exports (columns more than half covered). The scrolling text keeps
     clear of this dense zone; the sparse outer branches are allowed to cross over it.
     Only change these if you re-crop or redraw the artwork. */
  --left-dense:  0.322;
  --right-dense: 0.140;

  /* note to piper: save-the-date - sizing - how much space is kept clear of the card on
     each side, as a fraction of the window height. Left is bigger than right because the
     left floral is much wider — this keeps the artwork OFF the card text and pushes the
     card toward the right floral, like the original. Lower --card-right-clear to hug the
     right florals tighter. */
  --card-left-clear:  0.34;
  --card-right-clear: 0.22;
  /* The card image's width ÷ height. Used to stop the first screen overflowing vertically.
     Only change if the card is re-cropped. */
  --card-aspect: 1.276;

  /* 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 disappear behind the
     dense artwork. Sparse branches may brush its edges, as in the original card. */

  /* 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-card is the portrait-only static replica of the printed
   save-the-date (see the portrait media query at the bottom).
   ------------------------------------------------------------- */
.hero-card { display: none; }

.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  /* The card hangs toward the RIGHT floral (like the right-leaning text in the original
     card): flex-end + a small right clearance. The left clearance is bigger than the left
     floral's dense mass, so the artwork never sits on the card text. */
  justify-content: flex-end;
  padding-left:  max(var(--gutter), calc(var(--panel-h) * var(--card-left-clear)));
  padding-right: max(var(--gutter), calc(var(--panel-h) * var(--card-right-clear)));
  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;
  /* note to piper: save-the-date - sizing - the widest the card text is allowed to get.
     60rem is the flat cap; the dvh term stops the card growing so tall that the first
     screen overflows the window (width limited by the height left inside the purple
     frame, via the card's own aspect ratio); the 100% keeps it inside the padding at
     every window size and in every browser (Safari's flex sizing needs it explicit). */
  width: 100%;
  min-width: 0;
  max-width: min(100%, 60rem, calc((100dvh - 2 * (var(--frame-inset) + 2rem)) * var(--card-aspect)));
}
.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(--panel-h) * var(--left-dense)  + var(--gutter)), calc((100% - var(--prose-min)) * var(--left-share))));
  padding-right: max(var(--gutter), min(calc(var(--panel-h) * var(--right-dense) + 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);
}

/* -------------------------------------------------------------
   UPRIGHT SCREENS (any window taller than it is wide)
   The side-panel composition cannot fit a portrait screen, so the first
   screen becomes a STATIC replica of the printed save-the-date instead:
   one image with both floral borders fully visible, at the original
   card's proportions. Nothing is pinned to the viewport and nothing uses
   the dynamic viewport height, so the browser-chrome collapse on phones
   can't make the layout jitter — the card simply scrolls away and the
   rest of the page follows.

   Deliberately requires `orientation: portrait`. A short, wide window (a
   half-height desktop window, or a zoomed-in browser) keeps the normal
   full-height side-panel layout.
   ------------------------------------------------------------- */
@media (orientation: portrait) {
  .panel { display: none; }
  .hero  { display: none; }

  .hero-card {
    display: flex;
    align-items: center;
    /* note to piper: mobile card - sizing - the card sits centred on the first screen
       (100svh = the screen height with the browser bars visible, which never changes
       while scrolling). Change to `min-height: auto` if you'd rather the page content
       start right under the card instead. */
    min-height: 100svh;
  }
  .hero-card img { display: block; width: 100%; height: auto; }

  .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; }
}