/* occasion.html page geometry (shared flow layer lives in css/patterns.css).
   This page composes its OWN hero (occ-hero: dark editorial split + the
   run-of-show ticker on the shared .marquee machinery) instead of the
   canvas .sec-hero — page-scoped, flex/grid, nothing canvas-positioned. */

/* ---- hero -------------------------------------------------------- */
/* Window-height stage over a fixed curtain backdrop (2026-07-24 round,
   "curtain" pick): the kiss photo pins to the viewport under a deep even
   black veil, the content centers in the leftover space, and the ticker
   rides the bottom edge. BUILD: swap the backdrop photo per client along
   with the plate photo. */
.occ-hero { position: relative; background: var(--black); color: var(--cream-text); overflow: hidden;
  min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.occ-hero::before { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,10,.9) 0%, rgba(10,10,10,.76) 34%, rgba(10,10,10,.78) 70%, rgba(10,10,10,.88) 100%),
    url('../images/wedding-hero.jpg') center 24% / cover no-repeat;
  background-attachment: scroll, fixed; }
.occ-hero-wrap { position: relative; z-index: 1; flex: 1; width: 100%;
  max-width: 1200px; margin: 0 auto; padding: 130px 60px 40px;
  display: grid; grid-template-columns: 7fr 5fr; gap: 70px; align-items: center; }
.occ-kicker { margin: 0 0 26px; font-family: var(--font-mont); font-weight: 400;
  font-size: 12px; letter-spacing: .3em; text-transform: uppercase; opacity: .8; }
.occ-h1 { margin: 0; font-family: var(--font-serif); font-weight: 400;
  font-size: 74px; line-height: 1.06; }
.occ-h1 em { font-family: var(--font-italic); font-style: normal; }
.occ-lede { margin: 26px 0 0; font-family: var(--font-pop); font-weight: 300;
  font-size: 16.5px; line-height: 1.65; letter-spacing: .02em; max-width: 520px; }
.occ-cta { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 38px; }
.occ-cta .btn { padding: 15px 26px; }
.occ-btn-solid { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.occ-note { margin: 26px 0 0; font-family: var(--font-pop); font-weight: 300;
  font-size: 14px; opacity: .9; }
.occ-note a { color: inherit; }
.occ-hero-photo { margin: 0; justify-self: end; width: 100%; max-width: 420px; }
.occ-hero-photo img,
.occ-hero-photo video { display: block; width: 100%; aspect-ratio: 3 / 4;
  object-fit: cover; border: 1px solid rgba(241,243,246,.35); padding: 12px; }
.occ-hero-photo figcaption { margin-top: 14px; font-family: var(--font-italic);
  font-size: 16px; opacity: .75; }

/* run-of-show ticker on the shared .marquee/.marq-track machinery.
   BUILD: keep the ticker stops in step with the timeline walker below. */
.occ-ticker { position: relative; z-index: 1; margin-top: auto; padding: 20px 0;
  background: rgba(7,7,7,.35);
  border-top: 1px solid rgba(241,243,246,.22);
  border-bottom: 1px solid rgba(241,243,246,.22); }
.occ-tk { font-family: var(--font-serif); font-size: 19px; white-space: nowrap; }
.occ-tk em { font-family: var(--font-italic); opacity: .65; margin-right: 10px; }

/* hero load choreography */
/* opacity is .001, NOT 0, and the single character is load-bearing. Chrome
   discards any paint made at opacity:0 and records each element's paint ONCE;
   these fade in on a compositor-driven animation and never repaint on the main
   thread, so at zero every LCP candidate in the first viewport is transparent
   at the one paint Chrome looks at. PageSpeed then returns NO_LCP and NO
   performance score at all. Measured on three live client sites built from this
   kit.   .001 is below one 8-bit alpha step, so it is pixel-identical. */
.occ-hero-copy > *, .occ-hero-photo, .occ-ticker { opacity: .001;
  animation: occ-rise 1s cubic-bezier(.2,.7,.2,1) forwards; }
.occ-kicker { animation-delay: .15s; }
.occ-h1 { animation-delay: .3s; }
.occ-lede { animation-delay: .45s; }
.occ-cta { animation-delay: .6s; }
.occ-note { animation-delay: .75s; }
.occ-hero-photo { animation-delay: .5s; }
.occ-ticker { animation-delay: .9s; }
@keyframes occ-rise { from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; } }

/* ---- timeline walker garnish (hour readout + slow drift) ---------- */
.occ-hour { position: absolute; top: 22px; right: 28px; z-index: 1;
  font-family: var(--font-italic); font-size: 64px; color: var(--cream-text);
  /* tighter and darker than the original 0 2px 26px / .55: a 26px blur spreads
     the shadow so thin over a bright photo that the hour readout washed out.
     12px / .95 keeps it legible on any frame the walker lands on. */
  text-shadow: 0 2px 12px rgba(0,0,0,.95); pointer-events: none; }
.gd-media img.is-on,
.gd-media video.is-on { animation: occ-kb 16s ease-out forwards; }
@keyframes occ-kb { from { transform: scale(1); } to { transform: scale(1.07); } }

/* ---- the case for the booth: rail + numbered hairline rows -------- */
.occ-case-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 26px 90px;
  align-items: start; }
.occ-case-rail .fl-lede { margin-top: 24px; }
.occ-case { display: grid; grid-template-columns: 90px 1fr; gap: 26px;
  padding: 28px 0; border-top: 1px solid var(--line); }
.occ-case:last-child { border-bottom: 1px solid var(--line); }
.occ-case h3 { margin: 0; font-family: var(--font-serif); font-weight: 400;
  font-size: 26px; line-height: 1.2; }
.occ-case p { margin: 10px 0 0; font-family: var(--font-pop); font-weight: 300;
  font-size: 15px; line-height: 1.6; }
.occ-case:nth-child(2) { transition-delay: .12s; }
.occ-case:nth-child(3) { transition-delay: .24s; }

/* ---- guest book deep dive: overlapping print stack ---------------- */
.occ-book-grid { display: grid; grid-template-columns: 5fr 6fr; gap: 80px;
  margin-top: 54px; align-items: center; }
.occ-book-stack { position: relative; padding: 0 40px 56px 0; }
.occ-print { margin: 0; background: var(--cream); box-shadow: 0 18px 50px rgba(0,0,0,.4); }
.occ-print-main { padding: 14px 14px 46px; transform: rotate(-2deg); }
.occ-print-main img,
.occ-print-main video { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.occ-print-small { position: absolute; right: 0; bottom: 0; width: 46%;
  padding: 10px 10px 32px; transform: rotate(3.5deg); }
.occ-print-small img,
.occ-print-small video { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.occ-book-copy p { margin: 18px 0 0; font-family: var(--font-pop);
  font-weight: 300; font-size: 15.5px; line-height: 1.65; }
.occ-book-copy p:first-child { margin-top: 0; }
.occ-book-copy .ct-row { margin-top: 38px; }
.occ-book-copy .ct b { font-size: 48px; }
/* desktop: the copy rides 40px above the grid's centre line, level with the
   main print rather than the whole stack (a negative top margin moves the
   centred box up half as far and never grows the row).
   From 1200 only, not the kit's 901 (Corre Memories layout gate, 2026-10-17):
   between 901 and 1199 the title wraps to two lines and the two paragraph
   copy stands as tall as the print stack, so the pull ran the copy's first
   line level with the heading's second line, 26px inside its box at 901 and
   960 wide and 11px at 1024. With no pull the centred copy, taller than the
   stack there, sits on the grid's top edge and clears the heading by 54px
   from 901 to 1100 (108px at 1180); from 1200 the title is one line and the
   pull keeps 74px of clearance. */
@media (min-width: 1200px) {
  .occ-book-copy { margin-top: -80px; }
}

/* ---- reveal stagger (page-scoped) ------- */
#reviews .rev-card:nth-child(2) { transition-delay: .12s; }
#reviews .rev-card:nth-child(3) { transition-delay: .24s; }

/* ---- mobile ------------------------------------------------------- */
@media (max-width: 900px) {
  .occ-hero { min-height: 0; }
  .occ-hero::before { background-attachment: scroll, scroll; }
  .occ-hero-wrap { grid-template-columns: 1fr; gap: 44px; padding: 116px 22px 0; }
  .occ-h1 { font-size: clamp(40px, 11vw, 52px); }
  .occ-cta .btn { flex: 1 1 100%; max-width: 340px; height: 50px; }
  .occ-hero-photo { justify-self: start; max-width: 380px; }
  .occ-ticker { margin-top: 52px; }
  .occ-hour { font-size: 42px; top: 14px; right: 18px; }
  .occ-case-grid { grid-template-columns: 1fr; gap: 8px; }
  .occ-case { grid-template-columns: 1fr; gap: 6px; padding: 22px 0; }
  .occ-book-grid { grid-template-columns: 1fr; gap: 34px; margin-top: 36px; }
  .occ-book-stack { padding: 0 30px 44px 0; }
  .occ-book-copy .ct b { font-size: 38px; }
  /* -24, not the kit's -40 (Corre Memories layout gate, 2026-10-15). The
     stack reserves 44px under the main print and the small print sits on
     that reserve's bottom edge, rotated 3.5deg, so its lower corner hangs
     4-5px below the stack. A -40px pull ran the copy's first line 10-11px
     into the print at 360, 390, 430 and 440 wide: white Poppins on a white
     polaroid, the tops of "with Damian," sheared off. -24 keeps a 20px tuck
     and clears the print by 6-8px at every width. */
  .occ-book-copy { margin: -24px 0 40px; }
}

/* ---- reduced motion ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .occ-hero-copy > *, .occ-hero-photo, .occ-ticker { opacity: 1; animation: none; }
  .occ-ticker .marq-track { animation: none; }
  .gd-media img.is-on,
  .gd-media video.is-on { animation: none; }
}

/* her accents on the occasion page's own bands (see style.css for the rule) */
.occ-kicker { color: var(--accent-lift); }
.occ-hour { color: var(--accent-lift); }
.occ-tk em { color: var(--accent-lift); opacity: 1; }

/* ---- reviews: the LOCATION page's reviews band, copied verbatim from
   css/location.css (owner, 2026-10-07; that file cannot load here, its venue
   guide rules would restyle this page's hour-by-hour timeline). Keep the two
   copies in step. ---- */
/* ---- reviews: full-bleed fixed image, one cream card, click to cycle ---- */
.loc-rev { position: relative; min-height: 100vh; padding: 110px 60px;
  background: url('../images/reviews-band.jpg') center 30% / cover fixed no-repeat;
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.loc-rev::before { content: ""; position: absolute; inset: 0; background: rgba(19,19,19,.58); }
.loc-rev > * { position: relative; }
.lrev-kicker { margin: 0 0 16px; font-family: var(--font-pop); font-weight: 300;
  font-size: 13px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--cream-text); opacity: .8; text-align: center; }
.lrev-title { margin: 0 0 52px; font-family: var(--font-serif); font-weight: 400;
  font-size: 46px; line-height: 1.1; color: var(--cream-text); text-align: center; }
.lrev-title em { font-family: var(--font-italic); font-style: normal; }
.lrev-card { width: 640px; max-width: 100%; margin: 0; background: var(--cream);
  color: var(--ink); padding: 46px 52px 40px; cursor: pointer;
  box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.lrev-card:focus-visible { outline: 2px solid var(--cream-text); outline-offset: 4px; }
.lrev-stars { display: block; color: var(--accent); font-size: 15px; letter-spacing: .35em; }
.lrev-deck { display: grid; margin-top: 20px; }
.lrev-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility .35s; }
.lrev-slide.is-on { opacity: 1; visibility: visible; }
.lrev-slide blockquote { margin: 0; font-family: var(--font-serif);
  font-size: 24px; line-height: 1.45; }
.lrev-who { margin: 22px 0 0; font-family: var(--font-pop); font-weight: 300;
  font-size: 13px; letter-spacing: .06em; }
.lrev-who b { font-weight: 400; }
.lrev-who span { display: block; margin-top: 4px; font-size: 11.5px;
  letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.lrev-foot { margin-top: 30px; padding-top: 18px;
  border-top: 1px solid rgba(17,17,17,.22); display: flex;
  align-items: baseline; justify-content: space-between; }
.lrev-hint { font-family: var(--font-pop); font-weight: 300; font-size: 11.5px;
  letter-spacing: .18em; text-transform: uppercase; opacity: .55; }
.lrev-count { font-family: var(--font-italic); font-size: 19px; }
/* her accent on the kicker (same rule as location.css) */
.lrev-kicker { color: var(--accent-lift); opacity: 1; }
@media (max-width: 900px) {
  .loc-rev { min-height: 0; padding: 72px 22px 76px;
    background-attachment: scroll; }
  /* cover scales the background photo up hard at 390px, so the heading band
     lands on brighter pixels than it does on desktop. Lowest scrim that keeps
     the kicker >=4.5:1 and the title >=3:1 against the worst pixel measured
     there: .66 (desktop still clears at .58, so it keeps the photo as visible
     as legibility allows). BUILD: re-measure after swapping the photo. */
  .loc-rev::before { background: rgba(19,19,19,.66); }
  .lrev-title { font-size: clamp(34px, 9.5vw, 44px); margin-bottom: 36px; }
  .lrev-card { padding: 34px 26px 30px; }
  .lrev-slide blockquote { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .lrev-slide { transition: none; }
}