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

/* ---------- 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 ----------------------------
   ADDED 2026-08-19. occasion.html has always shipped this header as
   .oc-cine / .oc-cine-inner, but no stylesheet defined either class, so the
   hero rendered with NO layout at all: no gutter, no min-height, no photo, the
   h1 running edge to edge from x=0. Found when the Sister Lining build (design
   05) shipped it and the owner compared it against the live donor site, whose
   wedding page opens on a full-bleed photo with the copy over a scrim.
   Only .oc-hero existed, which is a different, centred treatment the HTML does
   not use. These rules are modelled on services.css .svc-hero, the same
   treatment on packages.html, so they introduce 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:#211B14;
  background-image:linear-gradient(100deg,rgba(33,27,20,.92) 0%,rgba(33,27,20,.74) 46%,rgba(33,27,20,.34) 100%),url(images/hero-bg.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(250,246,239,.4)}
.oc-cine .btn-ghost:hover{color:var(--gold-pale);border-color:var(--gold-pale);transform:none;box-shadow:none}
/* iOS resolves background-attachment:fixed against the VIEWPORT 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:#211B14;background-image:linear-gradient(100deg,rgba(33,27,20,.92) 0%,rgba(33,27,20,.74) 46%,rgba(33,27,20,.34) 100%),url(images/hero-bg.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 clears the copy on a
     wide screen but sits directly under it on a phone. Measured on the Sister
     Lining build: the gold subline fell to 1.96:1, under the 3:1 large-text
     floor. A near-flat scrim fixes it without touching the desktop crop.
     A build that swaps in a brighter photo should re-measure. */
  .oc-cine,.oc-cine::before{
    background-image:linear-gradient(180deg,rgba(33,27,20,.90) 0%,rgba(33,27,20,.82) 100%),url(images/hero-bg.webp);
  }
}

/* ============================================================================
   PHONES: THE "THROUGH THE EVENING" TIMELINE IS A POSTER
   Chosen from five variants, 2026-09-24 (staging/sacredseasonsco/variants/
   night-timeline-variants, archived after this landed).

   The problem it solves: .tl-rail is a wrapping flex of five buttons with
   min-width:150px, so at 390px it laid out 2 + 2 + 1 and each button's
   uppercase sub-label wrapped to two or three lines at different heights. The
   result was a ragged grid of orphaned words with a stranded fifth button.

   The poster instead leads with the photograph (full bleed, 4:5), rides the
   note on a blurred glass panel over its lower third, and puts the five stops
   underneath as a quiet running order with a tick that fills on the live row.

   DESKTOP IS UNTOUCHED AND MUST STAY THAT WAY. Everything below is inside one
   max-width:900px block, it changes no markup, and it was proven by pixel diff
   at 1440, 1280, 1024 and 901: zero differing pixels at every one of them.
   If you edit this, re-run that diff rather than trusting that a rule "looks
   mobile only".

   One ordering dependency: the block above turns the desktop dot off at this
   width with .tl-stop::before{content:none}. This block brings it back at the
   same specificity, so it only wins by coming LATER in the file. Do not move
   it above that block. */
@media (max-width:900px){

  .oc-night .tl{display:flex;flex-direction:column}
  .oc-night .tl-stage{display:contents}

  /* --- the poster --------------------------------------------------------- */
  .oc-night .tl-media{
    order:1;height:auto;aspect-ratio:4/5;margin:38px -28px 0;
  }
  .oc-night .tl-media::after{inset:14px;border-color:rgba(216,195,154,.42)}
  .oc-night .tl-media::before{
    content:"";position:absolute;inset:auto 0 0 0;height:62%;z-index:1;
    background:linear-gradient(180deg,rgba(20,16,12,0),rgba(20,16,12,.86));
    pointer-events:none;
  }

  /* --- the note, on glass, riding the bottom of the poster ---------------- */
  .oc-night .tl-card{
    order:2;position:relative;z-index:3;
    margin:-158px 14px 0;padding:22px 22px 26px;
    background:rgba(20,16,12,.62);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border:1px solid rgba(216,195,154,.34);
  }
  .oc-night .tl-note{font-size:1rem;line-height:1.6}
  .oc-night .tl-card .btn{width:100%;text-align:center;padding:16px 24px;margin-top:20px}

  /* --- the running order -------------------------------------------------- */
  .oc-night .tl-rail{
    order:3;display:block;position:relative;margin:34px 0 0;padding:0;
  }
  .oc-night .tl-stop{
    display:block;width:100%;text-align:left;
    min-height:60px;padding:15px 0 15px 26px;
    border-top:1px solid rgba(250,246,239,.12);border-radius:0;
    transition:color .3s,padding-left .3s;
  }
  .oc-night .tl-stop:last-of-type{border-bottom:1px solid rgba(250,246,239,.12)}
  .oc-night .tl-stop b{
    font-family:"DM Sans",system-ui,sans-serif;font-weight:500;
    font-size:.95rem;letter-spacing:.02em;line-height:1.3;text-transform:none;
  }
  .oc-night .tl-stop span{
    display:block;font-size:.575rem;letter-spacing:.16em;line-height:1.5;
    color:rgba(250,246,239,.42);transition:color .3s;
  }
  /* the marker. occasion.css turns the desktop dot off at this width; here it
     comes back as a small left-hand tick that fills on the live row. */
  .oc-night .tl-stop::before{
    content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:9px;height:9px;border-radius:50%;
    background:transparent;border:1px solid rgba(250,246,239,.34);
    transition:background .3s,border-color .3s,box-shadow .3s;
  }
  .oc-night .tl-stop.is-live{padding-left:32px}
  .oc-night .tl-stop.is-live b{
    font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
    font-weight:600;font-size:1.36rem;letter-spacing:.04em;
  }
  .oc-night .tl-stop.is-live span{color:var(--gold-pale)}
  .oc-night .tl-stop.is-live::before{
    background:var(--gold);border-color:var(--gold);
    box-shadow:0 0 0 4px rgba(165,130,78,.24);
  }
}