/* occasion.css — page-scoped styles for occasion.html only (loaded after
   pages.css; never linked from any other page). Every new class is prefixed
   oc-; the only shared selectors touched are .tl-* / .faq overrides
   scoped under an oc- ancestor or the page's s-* slot class, so nothing here
   can leak into the other skeleton pages. Palette vars come from styles.css. */

/* ---------- hero: centered display headline over the polaroid album ---------- */
.oc-hero{padding:88px 0 96px;text-align:center}
.oc-hero .eyebrow{justify-content:center}
.oc-hero .eyebrow::after{content:"";width:34px;height:1px;background:var(--gold)}
.oc-hero h1{max-width:17ch;margin-left:auto;margin-right:auto}
.oc-hero .lead{margin:0 auto 40px;max-width:52ch}
.oc-hero .hero-cta{justify-content:center}
.oc-hero .hero-note{margin-left:auto;margin-right:auto;text-align:center}

/* ---------- hero: fixed full bleed band ----------
   Integrated 2026-08-09 from the wedding-hero variants round (02 cinematic band),
   replacing the centred headline + polaroid album. The photograph is FIXED: it
   holds still while the page scrolls over it. iOS Safari renders
   background-attachment:fixed at the wrong scale, so touch devices get the same
   fallback styles.css already uses for .ed and .fixbg, a viewport-fixed pseudo
   element clipped to the section box. url() is relative to THIS stylesheet,
   which sits at the site root, so images/ resolves for the stamped page too. */
.oc-cine{position:relative;min-height:min(80vh,700px);display:flex;align-items:flex-end;overflow:hidden;
  color:#fff;background-color:#000;
  background-image:linear-gradient(88deg,rgba(24,20,17,.88) 0%,rgba(24,20,17,.62) 46%,rgba(24,20,17,.2) 100%),url(images/couple-sunlit-booth.webp);
  background-size:auto,cover;background-position:center,center 34%;background-attachment:fixed,fixed}
@media(hover:none){
  .oc-cine{background-image:none;clip-path:inset(0)}
  .oc-cine::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background-color:#000;
    background-image:linear-gradient(88deg,rgba(24,20,17,.9) 0%,rgba(24,20,17,.72) 50%,rgba(24,20,17,.36) 100%),url(images/couple-sunlit-booth.webp);
    background-size:auto,cover;background-position:center,center 34%}
}
.oc-cine-inner{position:relative;z-index:1;width:100%;max-width:1240px;margin:0 auto;padding:clamp(44px,7vw,92px) clamp(20px,4vw,46px)}
.oc-cine .eyebrow{color:var(--gold-pale)}
.oc-cine .eyebrow::before{background:var(--gold-pale)}
.oc-cine h1{color:#FAF6EF;font-size:clamp(2.3rem,5.2vw,4.15rem);max-width:15ch;margin-bottom:20px}
.oc-cine h1 em{color:var(--gold-pale)}
.oc-cine .lead{color:rgba(250,246,239,.85);max-width:50ch;margin-bottom:30px}
.oc-cine .hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.oc-cine .btn-ghost{color:#FAF6EF;border-color:rgba(250,246,239,.42)}
.oc-cine .btn-ghost:hover{color:var(--gold-pale);border-color:var(--gold-pale);background:transparent}
@media(prefers-reduced-motion:no-preference){
  .oc-cine .eyebrow,.oc-cine h1,.oc-cine .lead,.oc-cine .hero-cta{animation:ocfade .9s ease both}
  .oc-cine h1{animation-delay:.08s}
  .oc-cine .lead{animation-delay:.16s}
  .oc-cine .hero-cta{animation-delay:.24s}
}
@media(max-width:880px){
  /* one call to action on a phone; the run of show is still reachable by scroll */
  .oc-cine .hero-cta .cta-hide-mobile{display:none}
  .oc-cine{min-height:min(76vh,580px)}
  .oc-cine h1{font-size:clamp(1.95rem,7.4vw,2.8rem)}
  .oc-cine .lead{font-size:1.02rem}
}
/* The scrim's stops are tuned for the desktop layout, where the copy column
   stays in the dark left third and the photograph opens up to the right. Below
   880 the copy runs the FULL width of the band, so every line ends in the pale
   tail of the gradient, which on this photograph is the bride's white dress:
   measured 3.3:1 on the lead and 3.1:1 on the eyebrow at 360-440 wide, against
   6.9-10.3:1 on the kit's own photo hero (.ed). Same gradient, same 88deg,
   same three stops, only the density is held up so the last words of a line
   read like the first. Still lighter than the flat .8 scrim .ed uses. Split by
   pointer so the touch branch keeps background-image:none on the section and
   only its viewport-fixed ::before is restyled. */
@media(max-width:880px) and (hover:hover){
  .oc-cine{background-image:linear-gradient(88deg,rgba(24,20,17,.94) 0%,rgba(24,20,17,.86) 50%,rgba(24,20,17,.74) 100%),url(images/couple-sunlit-booth.webp)}
}
@media(max-width:880px) and (hover:none){
  .oc-cine::before{background-image:linear-gradient(88deg,rgba(24,20,17,.94) 0%,rgba(24,20,17,.86) 50%,rgba(24,20,17,.74) 100%),url(images/couple-sunlit-booth.webp)}
}

.oc-album{display:flex;justify-content:center;align-items:flex-start;margin-top:72px}
.oc-pol{margin:0;background:#fff;border:1px solid var(--line);padding:11px 11px 14px;box-shadow:0 26px 54px rgba(43,38,32,.18);flex:none;width:236px;position:relative;z-index:1;transition:transform .5s cubic-bezier(.2,.6,.2,1),box-shadow .5s,z-index 0s}
.oc-pol img,
.oc-pol video {display:block;width:100%;height:214px;object-fit:cover}
.oc-pol figcaption{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-style:italic;font-weight:500;font-size:1.02rem;color:var(--ink-soft);padding-top:10px}
.oc-pol:nth-child(1){transform:rotate(-4deg) translateY(18px)}
.oc-pol:nth-child(2){transform:rotate(2.5deg);z-index:2}
.oc-pol:nth-child(3){transform:rotate(-2deg) translateY(26px)}
.oc-pol:nth-child(4){transform:rotate(3.5deg) translateY(6px)}
.oc-pol+.oc-pol{margin-left:-26px}
.oc-pol:hover{transform:rotate(0) translateY(-6px);z-index:5;box-shadow:0 36px 70px rgba(43,38,32,.26)}
@media(prefers-reduced-motion:no-preference){
  .oc-hero .eyebrow,.oc-hero h1,.oc-hero .lead,.oc-hero .hero-cta,.oc-hero .hero-note{animation:ocfade .9s ease both}
  .oc-hero h1{animation-delay:.08s}
  .oc-hero .lead{animation-delay:.16s}
  .oc-hero .hero-cta{animation-delay:.24s}
  .oc-hero .hero-note{animation-delay:.3s}
  .oc-pol{animation:ocrise .9s cubic-bezier(.2,.6,.2,1) both}
  .oc-pol:nth-child(1){animation-delay:.35s}
  .oc-pol:nth-child(2){animation-delay:.47s}
  .oc-pol:nth-child(3){animation-delay:.59s}
  .oc-pol:nth-child(4){animation-delay:.71s}
}
@keyframes ocrise{from{opacity:0;translate:0 34px}to{opacity:1;translate:0 0}}
@keyframes ocfade{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@media(max-width:880px){
  .oc-hero{padding:64px 0 72px}
  .oc-album{flex-wrap:wrap;gap:18px 0;margin-top:52px}
  .oc-pol{width:42vw;max-width:236px}
  .oc-pol img,
  .oc-pol video {height:38vw;max-height:214px}
  .oc-pol+.oc-pol{margin-left:-14px}
  .oc-pol:nth-child(3){transform:rotate(-2deg) translateY(4px)}
}

/* ---------- the night, hour by hour: the page's dark band ---------- */
.oc-night{background:var(--ink);color:var(--paper);position:relative}
.oc-night::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 420px at 50% 0%,rgba(165,130,78,.14),transparent 65%);pointer-events:none}
.oc-night .wrap{position:relative}
.oc-night .sec-eyebrow{color:var(--gold-pale)}
.oc-night h2 em{color:var(--gold-pale)}
.oc-night .sec-lead{color:rgba(250,246,239,.72)}

/* the rail becomes a true timeline: one hairline, five stops on dots */
.oc-night .tl-rail{position:relative;gap:0;margin-top:64px;flex-wrap:nowrap}
.oc-night .tl-rail::before{content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:var(--line-dark)}
.oc-night .tl-stop{position:relative;border:none;background:none;padding:26px 8px 10px;min-width:0;color:rgba(250,246,239,.55)}
.oc-night .tl-stop::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:11px;height:11px;border-radius:50%;background:var(--ink);border:1px solid rgba(250,246,239,.45);transition:background .3s,border-color .3s,box-shadow .3s}
.oc-night .tl-stop b{color:rgba(250,246,239,.85);transition:color .3s}
.oc-night .tl-stop:hover{color:var(--gold-pale)}
.oc-night .tl-stop.is-live{background:none;border:none;color:var(--gold-pale)}
.oc-night .tl-stop.is-live::before{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 5px rgba(165,130,78,.25)}
.oc-night .tl-stop.is-live b{color:var(--gold-pale)}

.oc-night .tl-stage{margin-top:34px;gap:0}
.oc-night .tl-media{border:none;height:440px}
.oc-night .tl-media::after{content:"";position:absolute;inset:14px;border:1px solid rgba(216,195,154,.5);pointer-events:none;z-index:2}
.oc-night .tl-card{background:rgba(250,246,239,.05);border:1px solid var(--line-dark);color:var(--paper)}
.oc-night .tl-label{color:var(--gold-pale)}
.oc-night .tl-note{color:rgba(250,246,239,.78)}
.oc-night .tl-card .btn{background:var(--gold);color:var(--ink)}
.oc-night .tl-card .btn:hover{background:var(--gold-pale);box-shadow:0 14px 34px rgba(0,0,0,.35)}
@media(max-width:900px){
  .oc-night .tl-rail{flex-wrap:wrap;gap:2px 0}
  .oc-night .tl-rail::before{content:none}
  .oc-night .tl-stop{flex:1 1 32%;padding:14px 8px}
  .oc-night .tl-stop::before{content:none}
  .oc-night .tl-media{height:280px;border-bottom:none}
}

/* ---------- the case for the booth: portrait + hairline points ---------- */
.oc-case-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:72px;align-items:center}
.oc-case-photo{margin:0;position:relative}
.oc-case-photo img,
.oc-case-photo video {display:block;width:100%;height:560px;object-fit:cover;box-shadow:0 34px 68px rgba(43,38,32,.18)}
.oc-case-photo::after{content:"";position:absolute;inset:16px -16px -16px 16px;border:1px solid var(--gold-pale);z-index:-1}
.oc-case-photo figcaption{margin-top:26px;font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-style:italic;font-weight:500;font-size:1.05rem;color:var(--gold-deep)}
.oc-points{margin-top:14px}
.oc-point{display:grid;grid-template-columns:64px 1fr;gap:22px;padding:26px 0;border-top:1px solid var(--line)}
.oc-point:first-of-type{margin-top:34px}
.oc-point .n{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-style:italic;font-weight:500;font-size:2.4rem;color:var(--gold);line-height:1}
.oc-point h3{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-weight:600;font-size:1.42rem;margin-bottom:6px;letter-spacing:.03em}
.oc-point p{color:var(--ink-soft);font-size:.96rem;max-width:52ch}
@media(max-width:900px){
  .oc-case-grid{grid-template-columns:1fr;gap:52px}
  .oc-case-photo{margin-right:16px}
  .oc-case-photo img,
  .oc-case-photo video {height:64vw;max-height:460px}
}

/* ---------- the album band: photo strip beside the count-ups ---------- */
.oc-albumgrid{display:grid;grid-template-columns:.62fr 1.38fr;gap:72px;align-items:center}
.oc-albumgrid .statband{text-align:left;gap:28px}
.oc-albumgrid .statband.cols3{grid-template-columns:repeat(3,auto);justify-content:start}
.oc-strip-note{margin-top:30px;font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-style:italic;font-weight:500;font-size:1.05rem;color:var(--gold-deep);text-align:center}
@media(max-width:900px){
  .oc-albumgrid{grid-template-columns:1fr;gap:56px}
  .oc-albumgrid .statband{text-align:center}
  .oc-albumgrid .statband.cols3{grid-template-columns:repeat(3,1fr);justify-content:stretch}
}
@media(max-width:680px){.oc-albumgrid .statband.cols3{grid-template-columns:repeat(2,1fr)}}

/* ---------- faq: answers ease open ---------- */
@media(prefers-reduced-motion:no-preference){
  .s-occasion-faq .faq details[open] p{animation:ocfaq .45s ease both}
}
@keyframes ocfaq{from{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}

/* ---------- reduced motion: kill every animation this file adds ---------- */
@media(prefers-reduced-motion:reduce){
  .oc-pol,.oc-hero .eyebrow,.oc-hero h1,.oc-hero .lead,.oc-hero .hero-cta,.oc-hero .hero-note{animation:none}
  .oc-pol{transition:none}
}