/* occasion.html page styles (skeleton: hero / fits-the-night / whats-included
(case-for-the-booth + guest book deep dive, one slot across two bands) /
booths-that-fit / reviews / occasion-faq / form). Shared framework lives in
css/patterns.css (arp-). Compositions unique to this page: the poster-stack
hero (headline split around the arch), the ink-dark timeline band, the
drop-cap editorial band, and the paper-texture guest book plate. */
/* --- hero: one line over the fixed night photograph ----------------------------
The photograph is background-attachment:fixed: it holds still while the page
scrolls over it (mobile falls back to scroll, iOS mis-renders fixed+cover). */
.occ-hero{
position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;
text-align:center;padding:60px 20px;
/* Scrim deepened from the kit's .5: this photo's window wall is bright enough
that the cream kicker, corner labels and ghost button sat below WCAG AA
across it (3.2-4.3:1). .64 clears AA for all of them at every width. */
background:
linear-gradient(rgba(30,29,26,.64), rgba(30,29,26,.64)),
url('../images/hv-venue-chandelier.jpg') center / cover no-repeat fixed;
}
.occ-hero-corner{position:absolute;top:44px;font-family:var(--f-label);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(252,246,243,.8);}
.occ-hero-corner-l{left:max(56px,calc((100vw - 1200px)/2));}
.occ-hero-corner-r{right:max(110px,calc((100vw - 1200px)/2));}
.occ-hero-in{animation:occ-hero-fade 1.6s ease both;}
.occ-hero-kicker{display:block;font-family:var(--f-label);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:rgba(252,246,243,.8);margin-bottom:30px;}
.occ-hero-h1{font-family:var(--f-title);font-weight:400;font-size:clamp(58px,6.4vw,92px);line-height:1.06;color:var(--cream);}
.occ-hero-btn{display:inline-flex;align-items:center;justify-content:center;margin-top:44px;padding:17px 34px;border:1px solid rgba(252,246,243,.6);background:transparent;color:var(--cream);font-family:var(--f-label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;line-height:1.3;text-decoration:none;cursor:pointer;transition:.4s;}
.occ-hero-btn:hover{background:var(--cream);color:var(--ink);border-color:var(--cream);}
@keyframes occ-hero-fade{from{opacity:0;}to{opacity:1;}}
/* --- the night, hour by hour (ink band) ---------------------------------------- */
.occ-night .arp-kicker{color:rgba(252,246,243,.6);}
.occ-night .arp-h2{color:var(--cream);}
.occ-night .arp-lede{color:rgba(252,246,243,.78);}
.occ-rail{display:flex;border-top:1px solid rgba(252,246,243,.22);border-bottom:1px solid rgba(252,246,243,.22);margin-top:56px;}
.occ-stop{flex:1;position:relative;border:0;background:none;cursor:pointer;padding:24px 10px;text-align:center;transition:background .3s;}
.occ-stop:hover,.occ-stop.on{background:rgba(252,246,243,.06);}
.occ-stop b{display:block;font-family:var(--f-title);font-weight:400;font-size:32px;line-height:1;color:var(--cream);}
.occ-stop span{display:block;margin-top:9px;font-family:var(--f-label);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(252,246,243,.55);}
.occ-stop.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--cream);}
.occ-stage{display:grid;grid-template-columns:1fr 430px;margin-top:56px;align-items:center;}
.occ-media{position:relative;height:520px;overflow:hidden;background:#33322e;}
.occ-media img,
.occ-media video {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease;}
.occ-media img.on,
.occ-media video.on {opacity:1;}
.occ-stagecard{position:relative;background:var(--cream);padding:38px 40px;margin-left:-70px;box-shadow:0 30px 60px rgba(0,0,0,.35);}
.occ-stage-label{font-family:var(--f-label);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:rgba(30,29,26,.55);}
.occ-stagecard .occ-stage-note{display:none;margin:14px 0 0;font-size:14.5px;line-height:1.75;letter-spacing:.03em;color:rgba(30,29,26,.8);}
.occ-stagecard .occ-stage-note.on{display:block;}
.occ-stagecard .btn{margin-top:24px;}
/* --- the case for the booth (drop-cap editorial band) --------------------------- */
.occ-case{max-width:860px;margin:0 auto;text-align:center;}
.occ-case .occ-dropcap{margin:34px auto 0;max-width:760px;text-align:left;font-size:17px;line-height:1.9;letter-spacing:.04em;color:rgba(30,29,26,.82);}
.occ-dropcap::first-letter{float:left;font-family:var(--f-title);font-size:86px;line-height:.78;padding:10px 16px 0 0;color:var(--ink);}
.occ-points{display:grid;grid-template-columns:repeat(3,1fr);gap:52px;max-width:1060px;margin:52px auto 0;border-top:1px solid var(--line);padding-top:40px;}
.occ-point h3{font-family:var(--f-title);font-weight:400;font-size:22px;line-height:1.25;color:var(--ink);}
.occ-point p{margin:10px 0 0;font-size:14px;line-height:1.7;letter-spacing:.03em;color:rgba(30,29,26,.7);}
.occ-case-cta{text-align:center;margin-top:48px;}
/* --- guest book: the margin (full-viewport book page, occ-gbm-) ------------------ */
.occ-gbm{padding:0;display:flex;align-items:center;min-height:100vh;overflow:hidden;}
.occ-gbm-wrap{padding-top:64px;padding-bottom:64px;}
.occ-gbm-grid{display:grid;grid-template-columns:64px 1fr 620px;column-gap:46px;align-items:stretch;}
.occ-gbm-rail{position:relative;}
.occ-gbm-rule.reveal{opacity:1;position:absolute;inset:0 auto 0 30px;width:1px;background:rgba(30,29,26,.32);
transform:scaleY(0);transform-origin:top;transition:transform 1.2s cubic-bezier(.22,.8,.24,1);}
.occ-gbm-rule.reveal.in{transform:scaleY(1);}
.occ-gbm-kicker.reveal{position:absolute;inset:4px auto auto 14px;writing-mode:vertical-rl;margin-bottom:0;
letter-spacing:.34em;background:var(--white);padding:0 0 18px;transform:none;transition:opacity .8s ease .3s;}
.occ-gbm-main{position:relative;z-index:2;padding-top:8px;}
.occ-gbm-h2.reveal{opacity:1;transform:none;font-size:74px;line-height:1.06;}
.occ-gbm-ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em;}
.occ-gbm-ln i{display:inline-block;font-style:normal;transform:translateY(110%);transition:transform 1s cubic-bezier(.22,.8,.24,1);}
.occ-gbm-ln:nth-child(2) i{transition-delay:.12s;}
.occ-gbm-ln:nth-child(3) i{transition-delay:.24s;}
.occ-gbm-h2.in .occ-gbm-ln i{transform:none;}
.occ-gbm-lede.reveal{margin-top:30px;max-width:36ch;font-size:15px;transition-delay:.35s;}
.occ-gbm-stats.reveal{margin-top:34px;transition-delay:.45s;}
.occ-gbm-stat{display:flex;align-items:baseline;gap:18px;padding:12px 0;border-top:1px solid var(--line);}
.occ-gbm-stat:last-child{border-bottom:1px solid var(--line);}
.occ-gbm-stat b{font-family:var(--f-title);font-weight:400;font-size:36px;line-height:1;min-width:86px;}
.occ-gbm-stat > span{font-family:var(--f-label);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(30,29,26,.6);}
.occ-gbm-ghost.reveal{display:inline-block;margin-top:30px;transition-delay:.55s;}
.occ-gbm-media.reveal{opacity:1;transform:none;position:relative;z-index:1;}
/* the initial clip lives on the child, never on the observed .reveal element: a fully
self-clipped target reports zero intersection and the reveal never fires */
.occ-gbm-photo{position:relative;height:calc(100vh - 128px);min-height:560px;overflow:hidden;background:var(--taupe);
clip-path:inset(0 0 0 100%);transition:clip-path 1.1s cubic-bezier(.22,.8,.24,1) .05s;}
.occ-gbm-media.in .occ-gbm-photo{clip-path:inset(0 0 0 0);}
.occ-gbm-photo img,
.occ-gbm-photo video {width:100%;height:100%;object-fit:cover;}
.occ-gbm-plate{position:absolute;left:-26px;bottom:42px;z-index:3;background:var(--white);border:1px solid var(--line);
padding:18px 26px;box-shadow:0 20px 40px -24px rgba(30,29,26,.4);
opacity:0;transform:translateY(16px);transition:opacity .8s ease .5s,transform .8s ease .5s;}
.occ-gbm-media.in .occ-gbm-plate{opacity:1;transform:none;}
.occ-gbm-plate p{font-family:var(--f-title);font-size:20px;font-style:italic;line-height:1.4;color:rgba(30,29,26,.78);}
/* --- booths that fit (accordion listing + crossfade stage) ----------------------- */
/* .occ-sw-caption hangs right:-14px past the stage on purpose. Above 1213px the
canvas has gutters and that overhang lands in one, but at a 1200px viewport
there is no gutter left and it became 14px of horizontal PAGE scroll. Clip at
the section: nothing changes at 1214px and up, where the caption already sits
inside the viewport. */
#booths-that-fit{overflow-x:clip;}
.occ-sw-grid{display:grid;grid-template-columns:1fr 460px;gap:80px;align-items:center;}
.occ-sw-left .arp-h2{margin-bottom:40px;max-width:480px;}
.occ-sw-pick{border-top:1px solid var(--line);}
.occ-sw-opt{display:block;text-align:left;text-decoration:none;border-bottom:1px solid var(--line);
padding:26px 4px;cursor:pointer;color:inherit;position:relative;}
.occ-sw-opt.on:hover .arp-card-link{border-color:var(--ink);}
.occ-sw-top{display:flex;align-items:baseline;gap:18px;}
.occ-sw-top .arp-no{margin-bottom:0;}
.occ-sw-name{font-family:var(--f-title);font-weight:400;font-size:33px;line-height:1.1;color:var(--ink);transition:opacity .5s;}
.occ-sw-opt:not(.on) .occ-sw-name{opacity:.42;}
.occ-sw-opt:not(.on):hover .occ-sw-name{opacity:.75;}
.occ-sw-body{display:block;overflow:hidden;max-height:0;opacity:0;transition:max-height .8s cubic-bezier(.22,1,.36,1),opacity .6s;}
.occ-sw-opt.on .occ-sw-body{max-height:180px;opacity:1;}
.occ-sw-body p{padding-top:12px;margin:0;font-size:14px;line-height:1.7;letter-spacing:.03em;color:rgba(30,29,26,.72);max-width:420px;}
.occ-sw-body .arp-card-link{margin-top:14px;}
.occ-sw-bar{position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--ink);}
.occ-sw-opt.on .occ-sw-bar{animation:occSwBar 6s linear forwards;}
@keyframes occSwBar{from{width:0;}to{width:100%;}}
.occ-sw-pick.paused .occ-sw-opt.on .occ-sw-bar{animation:none;width:100%;}
.occ-sw-stage{position:relative;height:600px;}
.occ-sw-frame{position:absolute;inset:0;overflow:hidden;background:var(--taupe);}
.occ-sw-frame img,
.occ-sw-frame video {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.02);transition:opacity 1.1s;}
.occ-sw-frame img.on,
.occ-sw-frame video.on {opacity:1;animation:occSwKen 14s ease-in-out infinite alternate;}
@keyframes occSwKen{from{transform:scale(1.02);}to{transform:scale(1.09);}}
.occ-sw-caption{position:absolute;right:-14px;bottom:34px;background:var(--cream);padding:14px 20px;
font-family:var(--f-label);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:rgba(30,29,26,.6);
box-shadow:0 18px 44px rgba(30,29,26,.14);}
/* --- reviews: the shared cinematic testimonials (cin-, style.css) ---------------- */
/* --- mobile ----------------------------------------------------------------------- */
@media (max-width:900px){
/* the photo moves to a pinned ::before layer; the scrim stays on the box */
.occ-hero{clip-path:inset(0);background:none;}
.occ-hero::before{content:"";position:fixed;inset:0;z-index:0;
background:linear-gradient(rgba(30,29,26,.64), rgba(30,29,26,.64)),
url('../images/hv-venue-chandelier.jpg') center / cover no-repeat;}
.occ-hero > *{position:relative;z-index:1;}
/* ...but the corner labels are ANCHORED, not flow content: .occ-hero is a
centred flex box, so relative turns them into flex siblings of the copy
block and their left/top offsets then push them into the h1. z-index
applies to absolute boxes just the same, so re-assert it. */
.occ-hero > .occ-hero-corner{position:absolute;}
.occ-hero-corner-r{display:none;}
.occ-hero-corner-l{left:20px;top:26px;}
.occ-hero-h1{font-size:clamp(40px,10vw,54px);}
.occ-rail{flex-wrap:wrap;margin-top:40px;}
.occ-stop{flex:1 1 33%;padding:16px 6px;}
.occ-stop b{font-size:22px;}
.occ-stage{grid-template-columns:1fr;margin-top:36px;}
.occ-media{height:auto;aspect-ratio:4/3;}
.occ-stagecard{margin:-40px 16px 0;padding:24px 22px;}
.occ-dropcap{font-size:15.5px;}
.occ-dropcap::first-letter{font-size:64px;padding:8px 12px 0 0;}
.occ-points{grid-template-columns:1fr;gap:26px;padding-top:30px;}
.occ-gbm{min-height:0;display:block;}
.occ-gbm-wrap{padding-top:56px;padding-bottom:56px;}
.occ-gbm-grid{grid-template-columns:1fr;}
.occ-gbm-rule.reveal{display:none;}
.occ-gbm-kicker.reveal{position:static;writing-mode:horizontal-tb;padding:0;margin-bottom:14px;display:block;}
.occ-gbm-h2.reveal{font-size:clamp(34px,9vw,44px);}
.occ-gbm-lede.reveal{max-width:none;}
.occ-gbm-media.reveal{margin-top:36px;}
.occ-gbm-photo{height:auto;min-height:0;aspect-ratio:4/3;}
.occ-gbm-plate{left:10px;bottom:14px;padding:12px 18px;}
.occ-gbm-plate p{font-size:16px;}
.occ-sw-grid{grid-template-columns:1fr;gap:40px;}
.occ-sw-stage{height:auto;aspect-ratio:4/5;max-width:420px;margin:0 auto;width:100%;}
.occ-sw-caption{right:8px;}
.occ-sw-name{font-size:26px;}
}
/* --- reduced motion ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
.occ-hero-in{animation:none;}
.occ-gbm-rule.reveal{transform:none;transition:none;}
.occ-gbm-ln i{transform:none;transition:none;}
.occ-gbm-photo{clip-path:inset(0 0 0 0);transition:none;}
.occ-gbm-plate{opacity:1;transform:none;transition:none;}
.occ-media img,
.occ-stop,
.occ-media video {transition:none;}
.occ-sw-frame img,
.occ-sw-body,
.occ-sw-name,
.occ-sw-frame video {transition:none;}
.occ-sw-frame img.on,
.occ-sw-frame video.on {animation:none;}
.occ-sw-opt.on .occ-sw-bar{animation:none;width:100%;}
}