/* 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-* / .revs / .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}

.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(31,74,70,.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(31,74,70,.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(176,138,69,.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(255,252,245,.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(255,252,245,.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(255,252,245,.45);transition:background .3s,border-color .3s,box-shadow .3s}
.oc-night .tl-stop b{color:rgba(255,252,245,.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(176,138,69,.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(227,204,144,.5);pointer-events:none;z-index:2}
.oc-night .tl-card{background:rgba(255,252,245,.05);border:1px solid var(--line-dark);color:var(--paper)}
.oc-night .tl-label{color:var(--gold-pale)}
.oc-night .tl-note{color:rgba(255,252,245,.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(31,74,70,.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)}}

/* ---------- reviews: staggered album pages ---------- */
.s-reviews .rev{position:relative;padding-top:44px}
.s-reviews .rev::before{content:"\201C";position:absolute;top:8px;left:26px;font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-size:4.4rem;line-height:1;color:var(--gold-pale)}
@media(min-width:821px){
  .s-reviews .rev:nth-child(2){transform:translateY(26px)}
  .s-reviews .rev:nth-child(3){transform:translateY(52px)}
  .s-reviews .revs{margin-bottom:52px}
}

/* ---------- 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}
}

/* ---------- hero: the cinematic full-bleed opener (BLACK scrim) ----------------------------
   REBUILT 2026-08-19. templates/design-05/occasion.html ships this header as
   .oc-cine / .oc-cine-inner, but the 2026-08-16 re-cut dropped the matching
   rules from occasion.css, so the hero rendered with NO layout at all: no
   gutter, no min-height, no photo, h1 running edge to edge from x=0. The kit
   still has the defect. Modelled on services.css .svc-hero, which is the same
   treatment on packages.html, so this adds no new visual language. */
.oc-cine{
  overflow:hidden;display:flex;align-items:center;
  min-height:min(830px,calc(100vh - 78px));
  color:var(--paper);background-color:#000;
  background-image:linear-gradient(100deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.74) 46%,rgba(0,0,0,.34) 100%),url(images/hero-bride-booth.webp);
  background-size:auto,cover;background-position:center,center 42%;background-attachment:fixed,fixed;
}
.oc-cine-inner{width:100%;max-width:1120px;margin:0 auto;padding:0 28px}
.oc-cine h1{font-size:clamp(2.4rem,4.4vw,3.4rem);max-width:16ch;margin:0 0 34px}
.oc-cine h1 em{display:block;color:var(--gold-pale)}
.oc-cine .eyebrow{color:var(--gold-pale)}
.oc-cine .eyebrow::before{background:var(--gold-pale)}
.oc-cine .btn-ghost{color:var(--paper);border-color:rgba(255,252,245,.4)}
.oc-cine .btn-ghost:hover{color:var(--gold-pale);border-color:var(--gold-pale);transform:none;box-shadow:none}
/* iOS gives background-attachment:fixed the VIEWPORT as its box and repaints it
   badly on scroll; same fallback services.css uses for .svc-hero. */
@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(100deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.74) 46%,rgba(0,0,0,.34) 100%),url(images/hero-bride-booth.webp);background-size:auto,cover;background-position:center,center 42%}
  .oc-cine-inner{position:relative;z-index:1}
}
@media(max-width:860px){
  .oc-cine{min-height:min(680px,calc(100vh - 70px))}
  .oc-cine h1{max-width:none}
  /* The 100deg scrim fades to .34 at its right end, which on a wide screen sits
     clear of the copy. On a phone the copy spans the full width and lands in
     that light end: measured 1.96:1 for the gold subline, under the 3:1 large
     text floor. A near-flat scrim fixes it without darkening the desktop crop. */
  .oc-cine,.oc-cine::before{
    background-image:linear-gradient(180deg,rgba(0,0,0,.90) 0%,rgba(0,0,0,.82) 100%),url(images/hero-bride-booth.webp);
  }
}