/* occasion.html page-scoped styles. Linked ONLY on occasion.html, after
   styles.css + pages.css, so no other page can be affected. Same vocabulary:
   Editors Note caps, Sloop Script accents, Work Sans labels,
   cream/brown/ink/rose, 1px keylines. Prefix: oc-. */

/* ---------- Hero (centered monument recomposition of .hero: one column on a
   dead vertical axis; the radial layer dims the photo behind the lockup) ---------- */

.oc-hero {
  text-align: center;
  gap: 0;
  /* extra bottom padding re-centers the lockup in the VISIBLE hero area at
     load (the hero starts one sticky-header height below the viewport top).
     Top is --header-clear because this hero PINS under the opaque header once
     the page scrolls, and 5.5rem did not clear the 97px desktop header, so the
     eyebrow was sliced in half for the whole pinned window. Bottom drops by the
     same 1rem the top gained, so the lockup's visual centre does not move. */
  padding: var(--header-clear) clamp(1.5rem, 6vw, 5.5rem) 8.6rem;
  background:
    radial-gradient(ellipse 58% 52% at 50% 46%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 72%),
    linear-gradient(rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.62) 55%, rgba(0, 0, 0, 0.78) 100%),
    url("images/stock/holiday-social-model-017.jpg") center 22% / cover no-repeat #000;
}
/* The photo holds still against the viewport instead of riding the hero box.
   NOTE (2026-08-02): .hero is no longer sticky. This rule was written while it
   was, and its first version read "the hero already pins itself, fixed removes
   the last settle". The pin is gone (owner rejected the next section sliding
   over the hero, see styles.css), so background-attachment is now the ONLY
   thing holding the photograph still, not a refinement on top of a pin.
   Only the photo layer is fixed: the two dimming
   gradients stay on scroll so they keep sizing to the hero, not the viewport.

   The +65px is not a nudge, it is the correction that keeps the crop. A fixed
   layer positions against the VIEWPORT, but the hero box starts one header
   height down, so switching to fixed lifts the photo by exactly that much and
   walks the guests' faces up into the H1. The offset puts the positioning area
   back under the header. The header is fluid (61px at 1024, 63px at 1280, 69px
   from 1440 up), so 65px is the middle of that range and the worst-case error
   is 4px, inside the header's own opaque band either way.

   Desktop pointers only. iOS Safari sizes a fixed background to the viewport
   and then fails to pin it, which zooms the crop and cuts the faces out of it,
   and the sticky pin already gives phones this same held-still photo. */
@media (hover: hover) and (pointer: fine) {
  .oc-hero {
    background-attachment: scroll, scroll, fixed;
    background-position: 0% 0%, 0% 0%, center calc(22% + 65px);
  }
}
.oc-hero-main { display: grid; justify-items: center; gap: 1.2rem; max-width: 960px; }
.oc-hero-eyebrow { color: #cbb6ae; letter-spacing: 0.24em; }
/* .oc-hero prefix beats the base .hero h1 rule (styles.css), which otherwise
   wins on specificity and shrinks the monument lockup */
.oc-hero .oc-h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3rem, 6.6vw, 5.4rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.02;
}
.oc-h1 span { display: block; }
/* the script sign-off sits tight under the caps, one word only */
.oc-hero-script {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 0.9;
  color: #fff;
  margin-top: -0.25em;
}
.oc-hero .pg-hero-actions { margin-top: 0.6rem; }

/* staggered load rise: replace the generic .hero > * choreography with one
   tuned to this hero's single-column structure (keyframes live in styles.css) */
@media (prefers-reduced-motion: no-preference) {
  .oc-hero > * { animation: none; }
  .oc-hero-main > * { animation: hero-in 1s ease both; }
  .oc-hero-main > :nth-child(2) { animation-delay: 0.12s; }
  .oc-hero-main > :nth-child(3) { animation-delay: 0.24s; }
  .oc-hero-main > :nth-child(4) { animation-delay: 0.36s; }
  .oc-hero-main > :nth-child(5) { animation-delay: 0.48s; }
  .oc-hero-main > :nth-child(6) { animation-delay: 0.6s; }
}

/* ---------- The run of show (numeral stage walker) ---------- */
/* Winner of the 2026-08-02 design-variants round. The clock is gone (see the
   section comment in the page), so the DISPLAY TYPE is a chapter number and the
   moment is named under it in the serif. Class names are unchanged from the old
   layout on purpose: occasion.js drives this by class, so the swap needed no JS.
   .oc-stage-note is now a BLOCK holding numeral + moment + label + copy, not a
   bare paragraph, and the old .oc-stage-card / .oc-stop-track / .oc-stop-fill
   dwell keyline are retired with it. */

.oc-night-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.14fr);
  gap: clamp(1.6rem, 3.4vw, 3.2rem);
  align-items: start;
}

/* left rail: the five moments, the live one pulled out on a short keyline */
.oc-stops { display: grid; align-content: start; border-left: 1px solid rgba(58, 53, 49, 0.22); padding-top: 0.4rem; }
.oc-stop {
  position: relative;
  display: block;
  text-align: left;
  background: none;
  border: 0;
  font-family: var(--label);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(20, 20, 20, 0.42);
  padding: 0.85rem 0 0.85rem 1.15rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.35s, letter-spacing 0.35s;
}
.oc-stop::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 50%;
  width: 0;
  height: 1px;
  background: var(--rose);
  transform: translateY(-50%);
  transition: width 0.45s ease;
}
.oc-stop:hover { color: var(--brown); }
.oc-stop.is-live { color: var(--rose); letter-spacing: 0.2em; }
.oc-stop.is-live::before { width: 0.7rem; }

/* centre stage: only the live block is in flow, so the column does not jump */
.oc-stage { position: relative; padding-top: 0.2rem; }
.oc-stage-note { display: none; }
.oc-stage-note.is-live { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .oc-stage-note.is-live { animation: quote-in 0.5s ease; }
}
.oc-num {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  line-height: 0.82;
  font-size: clamp(4.6rem, 11vw, 9.4rem);
  letter-spacing: -0.01em;
  color: var(--rose);
}
.oc-moment {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  letter-spacing: 0.06em;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0.9rem 0 1.5rem;
}
.oc-rule { border: 0; border-top: 1px solid rgba(58, 53, 49, 0.24); margin-bottom: 1.5rem; }
.oc-stage-label {
  font-family: var(--label);
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 0.75rem;
}
/* min-height sized to the LONGEST note so the button does not walk up and down
   the page as the walker auto-advances */
.oc-note-body { font-family: 'Raleway', var(--body); font-size: 1rem; line-height: 1.8; max-width: 42ch; min-height: 7.2em; }
.oc-stage .btn { margin-top: 0.6rem; }

/* ---------- The run of show on the NAVY ground with GOLD accents ----------
   Owner request 2026-08-02. Scoped to .oc-night, never to .pg-band--cream:
   that modifier still carries cream bands elsewhere in the build. Everything
   in this section is tuned for cream (ink headings, --rose marks, 20/58-based
   hairlines), so each one is restated rather than retinted globally. Gold on
   navy measures 4.7:1, which carries the numeral, the live moment and the
   labels; body copy stays white. The photo is untouched. */
.oc-night { background: var(--brown); color: #fff; }
.oc-night .pg-head .eyebrow { color: var(--gold); }
.oc-night .pg-head h2 { color: #fff; }
.oc-night .pg-head p { color: rgba(255, 255, 255, 0.85); }
.oc-night .oc-stops { border-left-color: rgba(255, 255, 255, 0.3); }
.oc-night .oc-stop { color: rgba(255, 255, 255, 0.5); }
.oc-night .oc-stop:hover { color: #fff; }
.oc-night .oc-stop.is-live { color: var(--gold); }
.oc-night .oc-stop::before { background: var(--gold); }
.oc-night .oc-num { color: var(--gold); }
.oc-night .oc-moment { color: #fff; }
.oc-night .oc-rule { border-top-color: rgba(255, 255, 255, 0.3); }
.oc-night .oc-stage-label { color: var(--gold); }
.oc-night .oc-note-body { color: rgba(255, 255, 255, 0.9); }
.oc-night .btn-outline-dark { color: #fff; }
.oc-night .btn-outline-dark:hover { background: #fff; color: var(--brown); }

/* right plate: rides up against the head block, otherwise it sits low and
   leaves a shelf of empty cream above it (owner note, 2026-08-02) */
.oc-stage-media { display: grid; margin: -5.6rem 0 0; }
.oc-stage-media img {
  grid-area: 1 / 1;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 28%;
  opacity: 0;
  transition: opacity 0.7s ease;
}
.oc-stage-media img.is-live { opacity: 1; }

@media (max-width: 980px) {
  .oc-night-grid { grid-template-columns: auto minmax(0, 1fr); }
  .oc-stage-media { grid-column: 1 / -1; order: 3; max-width: 460px; margin-top: 0; }
}
@media (max-width: 640px) {
  .oc-night-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .oc-stops { display: flex; flex-wrap: wrap; gap: 0 1.1rem; border-left: 0; border-top: 1px solid rgba(58, 53, 49, 0.22); padding-top: 0.6rem; }
  .oc-night .oc-stops { border-top-color: rgba(255, 255, 255, 0.3); }
  .oc-stop { padding: 0.5rem 0; }
  .oc-stop::before { display: none; }
  .oc-note-body { min-height: 0; }
}

/* ---------- The case for the booth (numbered points + layered collage) ---------- */

.oc-points { list-style: none; margin: 2rem 0 2.4rem; }
.oc-points li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 1.4rem;
  align-items: baseline;
  border-bottom: 1px solid rgba(58, 53, 49, 0.2);
  padding: 1.15rem 0.1rem 1.25rem;
}
.oc-points li:first-child { border-top: 1px solid rgba(58, 53, 49, 0.2); }
.oc-point-num { font-family: var(--label); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose); }
.oc-points h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.oc-points p { grid-column: 2; font-family: 'Raleway', var(--body); font-size: 0.95rem; line-height: 1.65; opacity: 0.85; }
/* the three points reveal in sequence once the list scrolls into view */
html.js .oc-points li:nth-child(2).reveal { transition-delay: 0.14s; }
html.js .oc-points li:nth-child(3).reveal { transition-delay: 0.28s; }

.oc-collage { position: relative; justify-self: end; width: min(100%, 440px); margin: 0; }
/* small grayscale detail hangs off the frame, like the index package photos */
.oc-collage-detail {
  position: absolute;
  left: -12%;
  bottom: 10%; /* stays clear of the figcaption below the frame */
  width: 40%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  /* p20 is 3:2 landscape, so a square cover crop trims the sides and the
     vertical component does nothing. Centred keeps the whole couple in frame.
     Re-check this value if the slot ever points at a portrait or a print strip. */
  object-position: 50% 50%;
  filter: grayscale(1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.oc-collage figcaption {
  margin-top: 0.9rem;
  text-align: center;
  font-family: var(--label);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rose);
}

/* ---------- Why it looks different: the editorial spread ----------
   Winner of the 2026-08-01 design-variants round (01-editorial-spread), minus
   the magazine gutter shadow, removed by owner request. Full bleed on
   purpose: this section is NOT a .pg-band, the cream leaf is the band. The
   plate pins its img absolute on desktop so the photo fills exactly the
   leaf's height; under 800px the img returns to flow with its own aspect
   ratio, so nothing here caps a section height. */

.oc-spread { display: grid; grid-template-columns: 1fr 1fr; min-height: 100svh; background: var(--band); }
.oc-spread-copy {
  background: var(--band);
  color: #fff;
  padding: clamp(3rem, 5.5vw, 5.5rem) clamp(1.25rem, 6vw, 6rem);
  display: flex;
  flex-direction: column;
}
.oc-spread-folio {
  font-family: var(--label);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: auto;
  padding-bottom: 2rem;
}
.oc-spread-folio b { color: var(--blush); font-weight: 600; }
.oc-spread-mid { margin-bottom: auto; }
.oc-spread .eyebrow { color: var(--blush); display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.4rem; }
.oc-spread .eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--blush); }
.oc-spread h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 3.9vw, 4.2rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.oc-spread h2 .script { font-size: clamp(2.8rem, 4.5vw, 4.8rem); color: var(--blush); line-height: 0.95; }
.oc-spread-lede { max-width: 52ch; font-size: 1rem; line-height: 1.78; color: #fff; opacity: 0.92; margin-top: 1.7rem; }
.oc-spread .text-link { display: inline-block; margin-top: 2rem; color: #fff; }
.oc-spread-photo { position: relative; overflow: hidden; margin: 0; }
.oc-spread-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.oc-spread-photo::before { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(183, 154, 94, 0.55); z-index: 2; pointer-events: none; }
.oc-spread-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 25, 31, 0) 62%, rgba(22, 25, 31, 0.42) 100%); z-index: 1; }
.oc-spread-photo figcaption { position: absolute; left: 2.4rem; bottom: 2.2rem; z-index: 2; color: var(--cream); }
.oc-spread-plate {
  display: block;
  font-family: var(--label);
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(243, 241, 236, 0.66);
}
.oc-spread-cap { display: block; font-size: 2rem; margin-top: 0.35rem; }
@media (prefers-reduced-motion: no-preference) {
  .oc-spread-photo img { animation: oc-kenburns 22s ease-in-out infinite alternate; }
}
@keyframes oc-kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.07); }
}

/* ---------- Booths that fit (the register: ledger rows + preview frame) ---------- */

.oc-reg-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
.oc-reg-row {
  display: block;
  color: inherit;
  text-decoration: none;
  border-top: 1px solid var(--pk-hairline);
  padding: clamp(1.4rem, 3.4vw, 2.4rem) 0;
  position: relative;
}
.oc-reg-row:last-of-type { border-bottom: 1px solid var(--pk-hairline); }
/* The register numerals are a CSS counter, not typed text, so a row cloned in
   by price reconciliation numbers itself and the sequence never has a gap after
   a package is removed. */
.oc-reg-list { counter-reset: oc-reg; }
.oc-reg-num {
  font-family: var(--label);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rose);
}
.oc-reg-row { counter-increment: oc-reg; }
.oc-reg-num::before { content: 'No. 0' counter(oc-reg); }
/* past nine, drop the padding zero */
.oc-reg-list .oc-reg-row:nth-child(n+10) .oc-reg-num::before { content: 'No. ' counter(oc-reg); }
.oc-reg-row h3 {
  font-family: var(--serif);
  font-weight: 300;
  text-transform: uppercase;
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 1.02;
  letter-spacing: 0.02em;
  margin-top: 0.35rem;
  color: rgba(20, 20, 20, 0.42);
  transition: color 0.5s ease, transform 0.6s cubic-bezier(0.33, 1, 0.4, 1);
}
.oc-reg-row.is-live h3 { color: var(--ink); transform: translateX(10px); }
/* the description unfolds via the 0fr -> 1fr grid-row trick */
.oc-reg-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s cubic-bezier(0.33, 1, 0.4, 1); }
.oc-reg-body > div { overflow: hidden; }
.oc-reg-row.is-live .oc-reg-body { grid-template-rows: 1fr; }
.oc-reg-body p { font-family: 'Raleway', var(--body); font-size: 0.98rem; line-height: 1.7; max-width: 52ch; padding-top: 0.9rem; }
.oc-reg-link {
  display: inline-block;
  margin: 0.8rem 0 0.2rem;
  font-family: var(--label);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.25em;
}
.oc-reg-arrow {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 300;
  transform: translate(-14px, -50%);
  opacity: 0;
  transition: opacity 0.45s ease, transform 0.55s ease;
}
.oc-reg-row.is-live .oc-reg-arrow { opacity: 1; transform: translate(0, -50%); }

.oc-reg-frame { position: relative; margin: 0; }
.oc-reg-media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; width: 100%; }
.oc-reg-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.75s ease, transform 1.3s ease;
}
.oc-reg-media img.is-live { opacity: 1; transform: scale(1); }
/* rose keyline offset behind the frame, echoing the collage frames */
.oc-reg-frame::after {
  content: "";
  position: absolute;
  inset: 1.1rem -1.1rem -1.1rem 1.1rem;
  border: 1px solid var(--rose);
  z-index: -1;
}
.oc-reg-caption {
  position: absolute;
  left: 1.2rem;
  bottom: 1.1rem;
  z-index: 2;
  background: var(--cream);
  padding: 0.55em 1.1em;
  font-family: var(--script);
  font-size: 1.35rem;
  color: var(--ink);
}

/* ---------- FAQ open animation (page-scoped garnish) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .faq details[open] p { animation: oc-faq-in 0.45s ease; }
}
@keyframes oc-faq-in {
  from { opacity: 0; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}

/* ---------- Small screens ---------- */

@media (max-width: 800px) {
  .oc-hero { padding: var(--header-clear) 1.25rem 2.5rem; }
  .oc-spread { grid-template-columns: 1fr; min-height: 0; }
  .oc-spread-photo { order: -1; }
  .oc-spread-photo img { position: static; height: auto; aspect-ratio: 4 / 3; display: block; }
  .oc-spread-folio { margin-bottom: 1.8rem; padding-bottom: 0; }
  .oc-hero .oc-h1 { font-family: 'Made Mirage', var(--serif); font-size: 11vw; letter-spacing: normal; line-height: 1; }
  .oc-hero-script { font-size: 8.4vw; }
  .oc-night-grid { grid-template-columns: 1fr; }
  .oc-stage-media { width: 100%; }
  .oc-collage { justify-self: center; }
  .oc-collage-detail { display: none; }
  .oc-reg-grid { grid-template-columns: 1fr; }
  .oc-reg-frame { display: none; }
  .oc-reg-row h3 { color: var(--ink); }
  .oc-reg-body { grid-template-rows: 1fr; }
}

/* ---------- Reduced motion: every page-scoped animation off ---------- */

@media (prefers-reduced-motion: reduce) {
  .oc-stop, .oc-stop::before { transition: none; }
  .oc-stage-media img { transition: none; }
  .oc-reg-row h3, .oc-reg-body, .oc-reg-media img, .oc-reg-arrow { transition: none; }
}

/* ---------- Testimonials backdrop: this page only ----------
   styles.css ships one shared backdrop behind every .testimonials section, and it is
   a class reunion. The "Class Reunion" prop sign and the guests' name badges read
   straight through the scrim, which contradicts this section's own heading ("From
   real weddings") and its three wedding quotes, so the wedding page carries its own.
   p23 is the same kind of frame (four guests, light backdrop, already black and white,
   so the scrim and the white type behave exactly as before) and the prop a reader can
   make out says "Team BRIDE". Both tiers are overridden because styles.css swaps to a
   separate mobile file at max-width 800. Nothing else on the page is affected. */

.testimonials::before {
  background:
    linear-gradient(rgba(20, 20, 20, 0.72), rgba(20, 20, 20, 0.72)),
    url('images/tpb/p23-lg.webp') center / cover no-repeat var(--ink);
}

@media (max-width: 800px) {
  .testimonials::before {
    background:
      linear-gradient(rgba(20, 20, 20, 0.72), rgba(20, 20, 20, 0.72)),
      url('images/tpb/p23-md.webp') center / cover no-repeat var(--ink);
  }
}

/* ==========================================================================
   MOBILE PASS 2026-08-02 — additive, phone-only (see styles.css for the note
   on !important and visual-editor inline styles).
   ========================================================================== */
@media (max-width: 800px) {
  /* "We make sure your photo booth feels polished..." carries an inline
     height of 16px from the visual editor. That is one desktop line; at
     390px the sentence takes three, and the overflow landed on top of
     "No. 01 You Choose the Backdrop". */
  .pg-head p[style*="min-height"] { height: auto !important; min-height: 0 !important; }

  /* The first point was nudged up 36px to close a gap that only exists in the
     two-column desktop layout. Stacked on a phone it just pulls the list into
     the paragraph above it. */
  .oc-points li[style*="translate"] { transform: none !important; }
}