/* ==========================================================================
   Nafis & Sumaiya — Wedding Reception
   A ribbon-tied emerald folder that unties, opens and hands you a cream card.
   Palette: emerald + satin gold + cream (the printed invitation's colours)
   Type:    Mrs Saint Delafield (script) · Cormorant Garamond (serif) · Jost
   Motion:  one orchestrated scroll sequence in the hero; everything after is quiet
   ========================================================================== */

:root {
  --green:        #1f3d2f;
  --green-deep:   #152c22;
  --green-soft:   #2a4d3d;
  --gold:         #c9a24e;
  --gold-light:   #ecd48f;
  --gold-deep:    #9a7530;
  --gold-line:    rgba(201, 162, 78, 0.55);
  --cream:        #f6f1e7;
  --cream-deep:   #ebe4d6;
  --surface:      #f1eee7;
  --ink:          #2b2620;
  --ink-soft:     #4f463c;
  --brown:        #6a4b2f;

  --font-script: "Mrs Saint Delafield", cursive;
  --font-serif:  "Playfair Display", Georgia, serif;
  --font-hand:   "Dancing Script", cursive;
  --font-body:   "Jost", system-ui, sans-serif;

  --container: 1100px;
  --nav-h: 72px;

  /* Card geometry — everything in the hero is derived from these two widths */
  --W:  clamp(210px, min(34vw, 38vh), 320px);            /* one folder panel */
  --H:  calc(var(--W) * 1.42);
  --F:  min(440px, 92vw, calc((100vh - 150px) * 0.707));  /* the cream insert at full size */
  --Fh: calc(var(--F) / 0.707);

  /* satin gold */
  --satin: linear-gradient(180deg, #a57d2c 0%, #e6c76c 16%, #f4e4a6 30%, #d9b656 48%, #b48a34 68%, #e2c56f 86%, #a57d2c 100%);
  --satin-v: linear-gradient(90deg, #a57d2c 0%, #e6c76c 18%, #f4e4a6 34%, #d9b656 52%, #b48a34 72%, #e2c56f 88%, #a57d2c 100%);
}

@supports (height: 100svh) {
  :root { --F: min(440px, 92vw, calc((100svh - 150px) * 0.707)); }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  /* Playfair Display defaults to old-style figures (5 and 9 drop below the line, 6 rises above it);
     lining figures sit on the baseline at cap height, like the capitals around them */
  font-variant-numeric: lining-nums;
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--green); color: var(--cream);
  padding: 0.75rem 1.25rem; z-index: 1000; text-decoration: none;
}
.skip-link:focus { left: 0; }

.layer { position: absolute; inset: 0; pointer-events: none; }

/* ---------- nav ---------- */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 100;
  transition: background 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease;
  border-bottom: 1px solid transparent;
}
.site-nav.is-scrolled {
  background: rgba(246, 241, 231, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--gold-line);
}
.site-nav__inner {
  max-width: var(--container); margin: 0 auto; height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.5rem;
}
.site-nav__brand {
  display: inline-block; padding: 0.6rem 0;
  font-family: var(--font-serif); font-weight: 500; font-size: 1.15rem;
  letter-spacing: 0.12em; color: var(--green); text-decoration: none;
}
.site-nav__brand span { color: var(--gold); }
.site-nav__links { list-style: none; display: flex; gap: 2rem; margin: 0; padding: 0; }
.site-nav__links a {
  text-decoration: none; color: var(--ink);
  font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase;
  position: relative; padding: 0.9rem 0.25rem; display: inline-block;
}
.site-nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.2rem; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s ease;
}
.site-nav__links a:hover::after,
.site-nav__links a:focus-visible::after { transform: scaleX(1); }

/* ==========================================================================
   HERO STAGE
   ========================================================================== */
.stage {
  position: relative;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  background: var(--surface);
}
.scene { position: absolute; inset: 0; }

/* depth 0 — the table the card lies on */
.scene__surface {
  background: radial-gradient(120% 90% at 50% 38%, #f8f5ef 0%, #eeeae1 55%, #e3ded2 100%);
}
.scene__surface::after {
  content: ""; position: absolute; inset: 0; opacity: 0.045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* depth 1 & 2 — baby's breath, drawn in JS */
.scene__sprigs { position: absolute; top: 0; left: 0; right: 0; height: 52vh; bottom: auto; }
.scene__sprigs--soft { filter: blur(2.5px); opacity: 0.55; transform: scale(1.12); transform-origin: top center; }
.sprigs { width: 100%; height: 100%; overflow: visible; }
.sprig { transform-box: view-box; animation: sway 9s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes sway { from { transform: rotate(-0.9deg); } to { transform: rotate(0.9deg); } }

/* depth 3 — the card */
.scene__card { display: grid; place-items: center; pointer-events: auto; }
.folder { position: relative; width: var(--W); height: var(--H); will-change: transform; }

/* ---------- card stock: felt-finish green board lit from the upper left ----------
   --clx / --cly (−1…1) follow the page's light (script.js), so the soft light and the foil move a little. */
.folder { --clx: 0; --cly: 0; }
.folder__back, .cover__face, .folder__pocket {
  background:
    url("assets/paper-cardstock.webp?v=1") 0 0 / calc(var(--W) * 0.62) auto repeat,
    radial-gradient(115% 85% at calc(20% + var(--clx) * 14%) calc(12% + var(--cly) * 10%), rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0) 58%),
    radial-gradient(150% 120% at 45% 40%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.26) 100%),
    var(--green);
  background-blend-mode: overlay, normal, normal, normal;   /* overlay keeps a dark green dark (soft-light lifts it) */
}
.folder__back {
  position: absolute; inset: 0; z-index: 1; border-radius: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 1px 1px rgba(0, 0, 0, 0.35),
    0 4px 8px -2px rgba(10, 22, 16, 0.3),
    0 26px 44px -20px rgba(20, 36, 28, 0.55),
    0 60px 90px -40px rgba(0, 0, 0, 0.28);
}
.folder__back::before {
  content: ""; position: absolute; inset: 6%; pointer-events: none;
  border: 1px solid rgba(201, 162, 78, 0.32); border-radius: 2px;
}
.folder__back::after, .cover__face::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  /* the faint sheen felt stock has, sliding with the light */
  background: linear-gradient(118deg, rgba(255, 255, 255, 0) 32%, rgba(236, 244, 230, 0.06) 48%, rgba(255, 255, 255, 0) 64%) calc(50% + var(--clx) * 30%) 0 / 260% 100% no-repeat;
}

/* pocket band + hinged cover live in one 3D-perspective layer above the insert */
.folder__front { position: absolute; inset: 0; z-index: 3; perspective: 1600px; perspective-origin: 50% 50%; }
.folder__pocket {
  position: absolute; left: 0; right: 0; bottom: 0; height: 28%;
  border-top: 1px solid rgba(201, 162, 78, 0.45);
  border-radius: 0 0 3px 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 -12px 18px -10px rgba(0, 0, 0, 0.65);
}
/* the pocket sits a shade darker than the cover (an overlay, not a filter, so it costs nothing to move) */
.folder__pocket::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(0, 0, 0, 0.14); pointer-events: none; }

.cover {
  position: absolute; inset: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
  will-change: transform;
}
.cover__face {
  position: absolute; inset: 0; border-radius: 3px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  /* bevelled board edge: light catches the top and left, the bottom and right fall into shadow */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 1px 0 0 rgba(255, 255, 255, 0.06),
    inset 0 -1.5px 0 rgba(0, 0, 0, 0.4), inset -1px 0 0 rgba(0, 0, 0, 0.28),
    0 1px 1.5px rgba(0, 0, 0, 0.3),
    0 14px 30px -14px rgba(0, 0, 0, 0.5);
}
.cover__face--back { transform: rotateY(180deg); }
/* shading as the cover turns away from the light: real elements, so the turn animates opacity on the GPU */
.cover__shade {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; opacity: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1) 70%);
}
.cover__face--back .cover__shade { background: linear-gradient(270deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1) 70%); }

.cover__names {
  --shine: 0;
  position: absolute; right: 9%; bottom: 8%; margin: 0;
  font-family: var(--font-script); font-size: calc(var(--W) * 0.19); line-height: 0.92;
  text-align: right; white-space: nowrap;
  /* hot-foil stamping: a metallic gradient whose bright band follows the light, the stock's grain pressed
     through it, a hairline deboss where the die pushed the foil into the board, and one specular pass (--shine)
     once the card settles */
  background:
    url("assets/paper-cardstock.webp?v=1") 0 0 / calc(var(--W) * 0.3) auto repeat,
    linear-gradient(108deg, rgba(255, 250, 230, 0) 40%, rgba(255, 249, 226, 0.95) 49%, rgba(255, 244, 205, 0.6) 51%, rgba(255, 250, 230, 0) 60%) calc(100% - var(--shine) * 100%) 50% / 300% 100% no-repeat,
    linear-gradient(110deg, #8a6a26 0%, #c29a48 20%, #f4e4a8 calc(40% + var(--clx) * 9%), #d3ae5d calc(52% + var(--clx) * 9%), #9f792e 72%, #e6cc86 87%, #8a6a26 100%);
  background-blend-mode: overlay, normal, normal;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 -0.6px 0 rgba(0, 0, 0, 0.5)) drop-shadow(0 0.7px 0 rgba(255, 238, 196, 0.14));
}
.cover__line { display: block; }
.cover__amp { font-size: 0.72em; }

.inner-left {
  position: absolute; inset: 0; padding: 14% 12%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--W) * 0.03);
  text-align: center; color: var(--gold-light);
}
.inner-left__sprig { width: calc(var(--W) * 0.1); color: var(--gold); margin-bottom: calc(var(--W) * 0.02); }
.inner-left__lead { margin: 0; font-family: var(--font-script); font-size: calc(var(--W) * 0.1); line-height: 1; color: var(--gold-light); }
.inner-left__text { margin: 0; font-family: var(--font-serif); font-size: calc(var(--W) * 0.052); line-height: 1.5; font-style: italic; color: rgba(236, 212, 143, 0.9); }
.inner-left__rsvp { margin: calc(var(--W) * 0.04) 0 0; font-family: var(--font-body); font-weight: 400; font-size: calc(var(--W) * 0.034); letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.8; color: var(--gold); }

/* ---------- the ribbon (satin: layered sheen, creases, cast shadows) ---------- */
.ribbon { --lx: 0; position: absolute; left: 0; right: 0; top: 43%; height: calc(var(--W) * 0.08); z-index: 4; will-change: transform; }
.ribbon__cast {
  position: absolute; left: 1%; right: 1%; top: 30%; height: 120%; border-radius: 40%;
  background: rgba(10, 20, 14, 0.55); filter: blur(5px); z-index: 0;
}
.ribbon__band {
  position: absolute; inset: 0; z-index: 1;
  /* a soft highlight that follows the light (--lx is driven by the script), over the satin */
  background:
    radial-gradient(70% 170% at calc(50% + var(--lx) * 38%) 42%, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 62%),
    var(--satin);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(90, 60, 10, 0.55),
    inset 12px 0 12px -8px rgba(0, 0, 0, 0.45),
    inset -12px 0 12px -8px rgba(0, 0, 0, 0.45),
    0 2px 3px rgba(0, 0, 0, 0.3);
}
.ribbon__band::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.5) 12%, transparent 24%);
  background-size: 220% 100%; background-repeat: no-repeat; background-position: -120% 0;
  animation: sheen 7.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.ribbon__band::after {
  content: ""; position: absolute; inset: 0; opacity: 0.1;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 1px, transparent 1px 3px);
}
@keyframes sheen { 0%, 55% { background-position: -120% 0; } 100% { background-position: 220% 0; } }

.ribbon__bow { position: absolute; left: 63%; top: 50%; width: 0; height: 0; z-index: 2; }
.bow-cast {
  position: absolute; z-index: 0;
  left: calc(var(--W) * -0.26); top: calc(var(--W) * -0.04);
  width: calc(var(--W) * 0.54); height: calc(var(--W) * 0.2); border-radius: 50%;
  background: rgba(10, 20, 14, 0.5); filter: blur(7px);
}

.bow {
  position: absolute; overflow: visible; max-width: none;
  width: calc(var(--W) * 0.7); height: calc(var(--W) * 0.578);   /* viewBox 460 × 380, knot at the origin */
  left: calc(var(--W) * -0.35); top: calc(var(--W) * -0.228);
  filter: drop-shadow(0 7px 7px rgba(0, 0, 0, 0.36));
}
.bow__tail, .bow__knot, .bow__sway, .bow__body { transform-box: fill-box; }

/* WebGL ribbon (ribbon3d.js): a canvas around the card; the CSS/SVG ribbon hides once it has drawn */
.ribbon__gl {
  position: absolute; z-index: 3; pointer-events: none;
  left: calc(var(--W) * -0.1); width: calc(var(--W) * 1.2);
  top: calc(50% - var(--W) * 0.42); height: calc(var(--W) * 1.02);
}
.ribbon__gl canvas { display: block; width: 100%; height: 100%; }
.ribbon.is-3d .ribbon__band,
.ribbon.is-3d .ribbon__cast,
.ribbon.is-3d .ribbon__bow { visibility: hidden; }

/* photographic ribbon: a real satin ribbon photo, cut into band / tails / loops / knot.
   The container is the photo's canvas (1000 × 451 at card width); the band's centre sits 168.8 px from its top. */
.ribbon__photo {
  position: absolute; left: 0; width: 100%; z-index: 3; pointer-events: none;
  height: calc(var(--W) * 0.451);
  top: calc(50% - var(--W) * 0.1688);
}
.rp { position: absolute; display: block; max-width: none; will-change: transform; user-select: none; }
.rp--band { filter: drop-shadow(0 1px 1.2px rgba(8, 20, 14, 0.45)); }
.rp--tail-l, .rp--tail-r { filter: drop-shadow(0 2px 2.5px rgba(8, 20, 14, 0.42)); }
.rp--loop-l, .rp--loop-r { filter: drop-shadow(0 3px 3.5px rgba(8, 20, 14, 0.45)); }
.rp--knot { filter: drop-shadow(0 1.5px 2px rgba(8, 20, 14, 0.5)); }
/* living light: a soft band of sheen that follows the light, clipped to the ribbon's own silhouette */
.rp-sheen {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url("assets/ribbon/rest-mask.webp?v=3") 0 0 / 100% 100% no-repeat;
          mask: url("assets/ribbon/rest-mask.webp?v=3") 0 0 / 100% 100% no-repeat;
  background: linear-gradient(112deg, rgba(255, 244, 205, 0) 38%, rgba(255, 244, 205, 0.55) 50%, rgba(255, 244, 205, 0) 62%);
  background-size: 260% 100%; background-repeat: no-repeat;
  background-position: calc(50% + var(--sheen, 0) * 42%) 0;
  mix-blend-mode: soft-light;
}
/* rendered untie (HyperFrames frames): same box as the photo ribbon, 1000 × 560 at card width */
.ribbon__seq {
  position: absolute; left: 0; width: 100%; z-index: 3; pointer-events: none; display: none;
  height: calc(var(--W) * 0.56);
  top: calc(50% - var(--W) * 0.1688);
}
.ribbon.is-seq .ribbon__seq { display: block; }
.ribbon.is-seq .rp { display: none; }   /* frees their GPU layers once the rendered frames take over */
.ribbon.is-photo .ribbon__band,
.ribbon.is-photo .ribbon__cast,
.ribbon.is-photo .ribbon__bow,
.ribbon.is-photo .ribbon__gl { visibility: hidden; }

/* ---------- the cream insert (mirrors the printed invitation, 1 : 1.414) ----------
   Blocks are placed at the print's measured positions as fractions of the card width (--F). */
.insert {
  position: absolute; z-index: 2;
  left: calc(50% - var(--F) / 2); top: calc(50% - var(--Fh) / 2);
  width: var(--F); height: var(--Fh);
  background: #fbf7ee;
  border-radius: 2px;
  box-shadow: 0 34px 56px -26px rgba(20, 30, 25, 0.5), 0 6px 12px -6px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  text-align: center;
  color: #4a3018;
  font-family: var(--font-serif);
  transform-origin: center;
  will-change: transform;
}
.insert::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.insert > * { position: absolute; left: 0; right: 0; margin: 0; }
.insert__frame { top: 0; bottom: 0; pointer-events: none; }
.insert__arch { position: absolute; top: 0; left: 0; width: calc(var(--F) * 1.0); height: calc(var(--F) * 0.62); }
.insert__side { position: absolute; top: calc(var(--F) * 0.022); bottom: calc(var(--F) * 0.022); width: 1px; background: #d0ad5f; opacity: 0.85; }
.insert__side--l { left: calc(var(--F) * 0.022); } .insert__side--r { right: calc(var(--F) * 0.022); }
.insert__foot { position: absolute; left: calc(var(--F) * 0.17); right: calc(var(--F) * 0.17); height: 1px; background: #d0ad5f; }
.insert__foot--1 { bottom: calc(var(--F) * 0.0335); } .insert__foot--2 { bottom: calc(var(--F) * 0.0425); }
.insert__corner { position: absolute; width: calc(var(--F) * 0.08); height: calc(var(--F) * 0.13); color: #d0ad5f; opacity: 0.45; }
.insert__corner--l { left: calc(var(--F) * 0.08); bottom: calc(var(--F) * 0.08); }
.insert__corner--r { right: calc(var(--F) * 0.08); bottom: calc(var(--F) * 0.08); transform: scaleX(-1); }
.insert__sparkle { position: absolute; top: calc(var(--F) * 0.524); width: calc(var(--F) * 0.03); height: calc(var(--F) * 0.03); color: #d0ad5f; }
.insert__sparkle--l { left: calc(var(--F) * 0.105); } .insert__sparkle--r { right: calc(var(--F) * 0.105); }
.insert__leaf { position: absolute; width: calc(var(--F) * 0.09); height: calc(var(--F) * 0.22); }
.insert__leaf--l { left: calc(var(--F) * 0.026); top: calc(var(--F) * 0.57); }
.insert__leaf--r { right: calc(var(--F) * 0.026); top: calc(var(--F) * 0.585); transform: scaleX(-1); }

.insert__bismillah { top: calc(var(--F) * 0.149); left: calc(var(--F) * 0.33); width: calc(var(--F) * 0.34); height: auto; filter: sepia(0.5) saturate(0.6) brightness(0.45); }
.insert__eyebrow { top: calc(var(--F) * 0.2495); font-size: calc(var(--F) * 0.037); line-height: 1; font-weight: 400; }

.insert__names { top: 0; bottom: 0; font-weight: 400; }
.insert__names > span { position: absolute; left: 0; right: 0; line-height: 1; }
.insert__name {
  font-size: calc(var(--F) * 0.066); color: #5a3a1c; letter-spacing: 0.01em;
  /* the printed names catch the light once as the card lands (--ishine on .insert); at rest only the ink colour shows */
  background: linear-gradient(105deg, #5a3a1c 0%, #5a3a1c 42%, #b8894a 46.5%, #f2dca0 50%, #b8894a 53.5%, #5a3a1c 58%, #5a3a1c 100%) calc(100% - var(--ishine, 0) * 100%) 50% / 300% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.insert__name--groom { top: calc(var(--F) * 0.308); }
.insert__name--bride { top: calc(var(--F) * 0.506); }
.insert__parents { font-family: var(--font-hand); font-weight: 400; font-size: calc(var(--F) * 0.033); color: #6a4b2f; }
.insert__parents--groom { top: calc(var(--F) * 0.3925); }
.insert__parents--bride { top: calc(var(--F) * 0.5895); }
.insert__amp { top: calc(var(--F) * 0.439); font-size: calc(var(--F) * 0.052); color: #5a3a1c; font-style: italic; }

.insert__date { top: calc(var(--F) * 0.644); height: calc(var(--F) * 0.2); }
.insert__month, .insert__year { position: absolute; left: 0; right: 0; line-height: 1; text-transform: uppercase; }
.insert__month { top: 0; font-size: calc(var(--F) * 0.038); letter-spacing: 0.04em; }
.insert__day { position: absolute; top: calc(var(--F) * 0.0415); left: 0; right: 0; height: calc(var(--F) * 0.095); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: calc(var(--F) * 0.03); padding: 0 calc(var(--F) * 0.22); }
.insert__day-side { display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: calc(var(--F) * 0.095); }
.insert__day-label { font-size: calc(var(--F) * 0.035); line-height: 1; text-transform: uppercase; letter-spacing: 0.04em; }
.insert__orn { width: 100%; height: calc(var(--F) * 0.018); color: #c9a24e; }
.insert__orn--flip { transform: scaleY(-1); }
.insert__day-num { font-size: calc(var(--F) * 0.076); line-height: 1; font-weight: 700; color: #6a4b2f; padding: 0 calc(var(--F) * 0.006); }
.insert__year { top: calc(var(--F) * 0.15); font-size: calc(var(--F) * 0.034); letter-spacing: 0.02em; }

.insert__venue { top: calc(var(--F) * 0.852); }
.insert__venue-name, .insert__venue-addr { display: block; line-height: 1; }
.insert__venue-name { font-size: calc(var(--F) * 0.037); text-transform: uppercase; letter-spacing: 0.04em; }
.insert__venue-addr { margin-top: calc(var(--F) * 0.022); font-size: calc(var(--F) * 0.032); }

.insert__couple { left: 50%; right: auto; bottom: calc(var(--F) * 0.002); height: calc(var(--F) * 0.34); width: auto; transform: translateX(-50%); }

/* scroll cue */
.scene__cue { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1.6rem; pointer-events: none; }
.cue {
  pointer-events: auto; cursor: pointer;
  background: none; border: 0; padding: 0.5rem 1rem; color: var(--ink-soft);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.cue__label { font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 400; }
.cue__line { position: relative; width: 1px; height: 34px; background: rgba(43, 38, 32, 0.18); overflow: hidden; }
.cue__line span { position: absolute; left: 0; top: -100%; width: 100%; height: 100%; background: var(--gold); animation: cue-drop 1.9s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes cue-drop { 0% { top: -100%; } 60%, 100% { top: 100%; } }

/* light leak (HyperFrames organic-light-leak-overlay, warm golds only, no blur filters so phones stay smooth) */
.scene__leak { inset: -20%; opacity: 0; visibility: hidden; mix-blend-mode: screen; overflow: hidden; }
.scene__leak i { position: absolute; inset: -10%; display: block; will-change: transform; }
.leak__amber {
  background:
    radial-gradient(ellipse 46% 95% at 12% 56%, rgba(255, 241, 204, 0.8), rgba(255, 241, 204, 0) 52%),
    radial-gradient(ellipse 70% 115% at 26% 52%, rgba(255, 168, 92, 0.42), rgba(255, 168, 92, 0) 68%);
}
.leak__gold {
  background: linear-gradient(104deg, rgba(255, 190, 110, 0) 26%, rgba(255, 190, 110, 0.2) 40%, rgba(255, 246, 214, 0.55) 51%, rgba(255, 190, 110, 0.16) 62%, rgba(255, 190, 110, 0) 78%);
}


/* No-JS / reduced-motion / GSAP-missing: show the finished card, nothing to untie */
.stage.is-static .ribbon,
.stage.is-static .folder__back,
.stage.is-static .folder__front,
.stage.is-static .scene__cue,
.stage.is-static .scene__sprigs { display: none; }
.stage.is-static .insert { transform: none !important; z-index: 6; }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section { position: relative; padding: clamp(4rem, 9vw, 7rem) 1.5rem; }
.section__inner { max-width: var(--container); margin: 0 auto; }
.section--green { background: var(--green); color: var(--cream); }
.section--cream { background: var(--cream); color: var(--ink); }

.section-head { text-align: center; max-width: 640px; margin: 0 auto clamp(2.5rem, 6vw, 4rem); }
.section-head__eyebrow { font-size: 0.75rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin: 0 0 0.75rem; font-weight: 400; }
.section-head__title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2.2rem, 4.4vw, 3.1rem); line-height: 1.1; margin: 0; }
.section--green .section-head__title { color: var(--cream); }
.section--cream .section-head__title { color: var(--green); }
.section-head__sub { margin-top: 1rem; font-size: 1rem; }
.section-head__sub strong { font-weight: 500; }

/* details: one row, gold hairlines between columns (no cards) */
.details__row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin: 0; padding: 0; max-width: 960px; margin-inline: auto;
  border-top: 1px solid var(--gold-line); border-bottom: 1px solid var(--gold-line);
}
.details__item { padding: clamp(2rem, 4vw, 3rem) 1.5rem; text-align: center; }
.details__item + .details__item { border-left: 1px solid var(--gold-line); }
.details__icon { width: 36px; height: 36px; margin: 0 auto 1rem; color: var(--gold); }
.details__item dt { font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); font-weight: 400; margin-bottom: 0.6rem; }
.details__item dd { margin: 0; font-family: var(--font-serif); font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.35; color: var(--cream); }

/* dress code: what the bride wears, and a gentle request */
.dress { max-width: 520px; margin: clamp(2.25rem, 5vw, 3rem) auto 0; text-align: center; }
.dress__label { margin: 0 0 0.9rem; font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); }
.dress__bride {
  display: inline-flex; align-items: center; gap: 0.55rem; margin: 0;
  font-family: var(--font-serif); font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.3; color: var(--cream);
}
.dress__role { font-style: italic; color: var(--gold-light); }
.dress__role::after { content: "\00B7"; margin-left: 0.55rem; font-style: normal; color: var(--gold); }
.dress__swatch {
  flex: none; width: 1rem; height: 1rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d8454a, #9c1b23 72%);
  box-shadow: 0 0 0 2px var(--green), 0 0 0 3px var(--gold-line);
}
.dress__ask { margin: 0.75rem 0 0; font-family: var(--font-serif); font-style: italic; font-size: clamp(1rem, 1.6vw, 1.1rem); line-height: 1.5; color: rgba(246, 241, 231, 0.82); }

.details__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 0.85rem 2.2rem; border-radius: 999px;
  font-family: var(--font-body); font-weight: 400; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn--gold { background: var(--gold); color: var(--green-deep); border-color: var(--gold); }
.btn--gold:hover { background: var(--gold-light); border-color: var(--gold-light); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--cream); border-color: var(--gold-line); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-light); transform: translateY(-2px); }

/* rsvp */
.rsvp__form-wrap { max-width: 760px; margin: 0 auto; }
/* Crops the Google Forms footer strip so the embed reads as part of the site;
   the direct link below restores access to those links. */
.rsvp__frame { position: relative; max-height: 1042px; overflow: hidden; border-radius: 20px; border: 1px solid var(--gold-line); background: var(--cream-deep); }
.rsvp__frame iframe { display: block; width: 100%; height: 1260px; border: none; }
/* a soft foot so a partially cropped footer line dissolves rather than being sliced */
.rsvp__frame::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; pointer-events: none; background: linear-gradient(180deg, rgba(235, 228, 214, 0), var(--cream-deep)); }
/* Google Forms grows taller as the frame narrows (its header text re-wraps). Measured bottom of the
   Submit button, in form px, by frame width (re-measured 2026-09-14 after the dress code lines were removed
   from the form description): 758→1022 · 658→1032 · 438–440→1116 · 372–400→1136 · 340–371→1160 ·
   338–339→1200 · 329–336→1222 · 312–327→1244 · 298→1306 · 278→1328.
   Frame width ≈ viewport − 42px on phones (− 50px above 480px). Each band's crop is the band's tallest
   Submit bottom + 20px, so Submit is always fully visible and most of Google's footer stays hidden. */
@media (max-width: 700px) { .rsvp__frame { max-height: 1142px; } .rsvp__frame iframe { height: 1340px; } }
@media (max-width: 480px) { .rsvp__frame { max-height: 1156px; } .rsvp__frame iframe { height: 1340px; } }
@media (max-width: 413px) { .rsvp__frame { max-height: 1180px; } .rsvp__frame iframe { height: 1400px; } }
@media (max-width: 381px) { .rsvp__frame { max-height: 1242px; } .rsvp__frame iframe { height: 1460px; } }
@media (max-width: 369px) { .rsvp__frame { max-height: 1264px; } .rsvp__frame iframe { height: 1480px; } }
@media (max-width: 340px) { .rsvp__frame { max-height: 1348px; } .rsvp__frame iframe { height: 1560px; } }
.rsvp__disclaimer { text-align: center; font-size: 0.8rem; color: var(--ink-soft); margin: 0.9rem 0 0; }
.rsvp__disclaimer a { color: var(--green); }

/* footer */
.site-footer { text-align: center; padding: 3.5rem 1.5rem 3rem; background: var(--green-deep); color: var(--cream); }
.site-footer__rule { display: block; width: 48px; height: 1px; background: var(--gold); margin: 0 auto 1.25rem; }
.site-footer__names { font-family: var(--font-script); color: var(--gold-light); font-size: 2.6rem; margin: 0 0 0.35rem; line-height: 1; }
.site-footer__date { margin: 0; font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.8; }

/* reveal-up */
.reveal-up { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: calc(var(--reveal-delay, 0) * 90ms); }
.reveal-up.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .details__row { grid-template-columns: 1fr; }
  .details__item + .details__item { border-left: 0; border-top: 1px solid var(--gold-line); }
  .site-nav__links { gap: 1.25rem; }
  .scene__sprigs { height: 40vh; }
}

@media (max-width: 480px) {
  /* the smallest card text steps up a little for phone reading */
  .insert__eyebrow { font-size: calc(var(--F) * 0.04); }
  .insert__parents { font-size: calc(var(--F) * 0.037); }
  .insert__day-label, .insert__year { font-size: calc(var(--F) * 0.037); }
  .insert__venue-addr { font-size: calc(var(--F) * 0.036); }
  .btn { width: 100%; max-width: 320px; }
  .details__actions { flex-direction: column; align-items: center; }
  .section { padding-left: 1.25rem; padding-right: 1.25rem; }
}

@media (pointer: coarse) {
  /* phones and tablets: keep every frame of the scroll cheap —
     no blurred second sprig layer or per-sprig sway, no blend modes or filters that force extra drawing passes,
     no resting sheen (the rendered idle loop carries its own light) */
  .scene__sprigs--soft { display: none; }
  .sprig { animation: none; }
  .rp-sheen { display: none; }
  .cover__names { filter: none; }
  .scene__surface::after { mix-blend-mode: normal; opacity: 0.03; }
  .scene__leak { mix-blend-mode: normal; }
  .leak__amber, .leak__gold { opacity: 0.55; }
}
.scene__sprigs { will-change: transform, opacity; }   /* the sprigs are hundreds of SVG paths: move them as one layer */

/* ---------- accessibility & performance ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-up { opacity: 1; transform: none; }
}