/* occasion.html page geometry (shared flow layer lives in css/patterns.css).
This page composes its OWN hero (occ-hero: dark editorial split + the
run-of-show ticker on the shared .marquee machinery) instead of the
canvas .sec-hero — page-scoped, flex/grid, nothing canvas-positioned. */
/* ---- hero -------------------------------------------------------- */
/* Window-height stage over a fixed curtain backdrop (2026-07-24 round,
"curtain" pick): the kiss photo pins to the viewport under a deep even
black veil, the content centers in the leftover space, and the ticker
rides the bottom edge. BUILD: swap the backdrop photo per client along
with the plate photo. */
.occ-hero { position: relative; background: var(--black); color: var(--cream-text); overflow: hidden;
min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.occ-hero::before { content: ""; position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(10,10,10,.9) 0%, rgba(10,10,10,.76) 34%, rgba(10,10,10,.78) 70%, rgba(10,10,10,.88) 100%),
url("../images/uploads/stock-14.jpg") center 24% / cover no-repeat;
background-attachment: scroll, fixed; }
.occ-hero-wrap { position: relative; z-index: 1; flex: 1; width: 100%;
max-width: 1200px; margin: 0 auto; padding: 130px 60px 40px;
display: grid; grid-template-columns: 7fr 5fr; gap: 70px; align-items: center; }
.occ-kicker { margin: 0 0 26px; font-family: var(--font-mont); font-weight: 400;
font-size: 12px; letter-spacing: .3em; text-transform: uppercase; opacity: .8; }
.occ-h1 { margin: 0; font-family: var(--font-serif); font-weight: 400;
font-size: 74px; line-height: 1.06; }
.occ-h1 em { font-family: var(--font-italic); font-style: normal; }
.occ-lede { margin: 26px 0 0; font-family: var(--font-pop); font-weight: 300;
font-size: 16.5px; line-height: 1.65; letter-spacing: .02em; max-width: 520px; }
.occ-cta { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 38px; }
.occ-cta .btn { padding: 15px 26px; }
.occ-btn-solid { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.occ-note { margin: 26px 0 0; font-family: var(--font-pop); font-weight: 300;
font-size: 14px; opacity: .9; }
.occ-note a { color: inherit; }
.occ-hero-photo { margin: 0; justify-self: end; width: 100%; max-width: 420px; }
.occ-hero-photo img,
.occ-hero-photo video { display: block; width: 100%; aspect-ratio: 3 / 4;
object-fit: cover; border: 1px solid rgba(245,245,245,.35); padding: 12px; }
.occ-hero-photo figcaption { margin-top: 14px; font-family: var(--font-italic);
font-size: 16px; opacity: .75; }
/* run-of-show ticker on the shared .marquee/.marq-track machinery.
BUILD: keep the ticker stops in step with the timeline walker below. */
.occ-ticker { position: relative; z-index: 1; margin-top: auto; padding: 20px 0;
background: rgba(7,7,7,.35);
border-top: 1px solid rgba(245,245,245,.22);
border-bottom: 1px solid rgba(245,245,245,.22); }
.occ-tk { font-family: var(--font-serif); font-size: 19px; white-space: nowrap; }
.occ-tk em { font-family: var(--font-italic); opacity: .65; margin-right: 10px; }
/* hero load choreography */
/* opacity is .001, NOT 0, and the single character is load-bearing. Chrome
discards any paint made at opacity:0 and records each element's paint ONCE;
these fade in on a compositor-driven animation and never repaint on the main
thread, so at zero every LCP candidate in the first viewport is transparent
at the one paint Chrome looks at. PageSpeed then returns NO_LCP and NO
performance score at all. Measured on three live client sites built from this
kit. .001 is below one 8-bit alpha step, so it is pixel-identical. */
.occ-hero-copy > *, .occ-hero-photo, .occ-ticker { opacity: .001;
animation: occ-rise 1s cubic-bezier(.2,.7,.2,1) forwards; }
.occ-kicker { animation-delay: .15s; }
.occ-h1 { animation-delay: .3s; }
.occ-lede { animation-delay: .45s; }
.occ-cta { animation-delay: .6s; }
.occ-note { animation-delay: .75s; }
.occ-hero-photo { animation-delay: .5s; }
.occ-ticker { animation-delay: .9s; }
@keyframes occ-rise { from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: none; } }
/* ---- timeline walker garnish (hour readout + slow drift) ---------- */
.occ-hour { position: absolute; top: 22px; right: 28px; z-index: 1;
font-family: var(--font-italic); font-size: 64px; color: var(--cream-text);
/* tighter and darker than the original 0 2px 26px / .55: a 26px blur spreads
the shadow so thin over a bright photo that the hour readout washed out.
12px / .95 keeps it legible on any frame the walker lands on. */
text-shadow: 0 2px 12px rgba(0,0,0,.95); pointer-events: none; }
.gd-media img.is-on,
.gd-media video.is-on { animation: occ-kb 16s ease-out forwards; }
@keyframes occ-kb { from { transform: scale(1); } to { transform: scale(1.07); } }
/* ---- the case for the booth: rail + numbered hairline rows -------- */
.occ-case-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 26px 90px;
align-items: start; }
.occ-case-rail .fl-lede { margin-top: 24px; }
.occ-case { display: grid; grid-template-columns: 90px 1fr; gap: 26px;
padding: 28px 0; border-top: 1px solid var(--line); }
.occ-case:last-child { border-bottom: 1px solid var(--line); }
.occ-case h3 { margin: 0; font-family: var(--font-serif); font-weight: 400;
font-size: 26px; line-height: 1.2; }
.occ-case p { margin: 10px 0 0; font-family: var(--font-pop); font-weight: 300;
font-size: 15px; line-height: 1.6; }
.occ-case:nth-child(2) { transition-delay: .12s; }
.occ-case:nth-child(3) { transition-delay: .24s; }
/* ---- guest book deep dive: overlapping print stack ---------------- */
.occ-book-grid { display: grid; grid-template-columns: 5fr 6fr; gap: 80px;
margin-top: 54px; align-items: center; }
.occ-book-stack { position: relative; padding: 0 40px 56px 0; }
.occ-print { margin: 0; background: var(--cream); box-shadow: 0 18px 50px rgba(0,0,0,.4); }
.occ-print-main { padding: 14px 14px 46px; transform: rotate(-2deg); }
.occ-print-main img,
.occ-print-main video { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.occ-print-small { position: absolute; right: 0; bottom: 0; width: 46%;
padding: 10px 10px 32px; transform: rotate(3.5deg); }
.occ-print-small img,
.occ-print-small video { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.occ-book-copy p { margin: 18px 0 0; font-family: var(--font-pop);
font-weight: 300; font-size: 15.5px; line-height: 1.65; }
.occ-book-copy p:first-child { margin-top: 0; }
.occ-book-copy .ct-row { margin-top: 38px; }
.occ-book-copy .ct b { font-size: 48px; }
/* desktop: the copy rides 40px above the grid's centre line, level with the
main print rather than the whole stack (a negative top margin moves the
centred box up half as far and never grows the row) */
@media (min-width: 901px) {
.occ-book-copy { margin-top: -80px; }
}
/* ---- reveal stagger (page-scoped) ------- */
#reviews .rev-card:nth-child(2) { transition-delay: .12s; }
#reviews .rev-card:nth-child(3) { transition-delay: .24s; }
/* ---- mobile ------------------------------------------------------- */
@media (max-width: 900px) {
.occ-hero { min-height: 0; }
.occ-hero::before { background-attachment: scroll, scroll; }
.occ-hero-wrap { grid-template-columns: 1fr; gap: 44px; padding: 116px 22px 0; }
.occ-h1 { font-size: clamp(40px, 11vw, 52px); }
.occ-cta .btn { flex: 1 1 100%; max-width: 340px; height: 50px; }
.occ-hero-photo { justify-self: start; max-width: 380px; }
.occ-ticker { margin-top: 52px; }
.occ-hour { font-size: 42px; top: 14px; right: 18px; }
.occ-case-grid { grid-template-columns: 1fr; gap: 8px; }
.occ-case { grid-template-columns: 1fr; gap: 6px; padding: 22px 0; }
.occ-book-grid { grid-template-columns: 1fr; gap: 34px; margin-top: 36px; }
.occ-book-stack { padding: 0 30px 44px 0; }
.occ-book-copy .ct b { font-size: 38px; }
/* -16, not the kit's -40 (layout gate 2026-11-06): -40 against the 34px grid
gap pulled the copy under the stack, and the tilted small print's white
frame sat 10 to 12px into the first line at every phone width, washing
"every moment" out to white on white. */
.occ-book-copy { margin: -16px 0 40px; }
}
/* ---- reduced motion ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.occ-hero-copy > *, .occ-hero-photo, .occ-ticker { opacity: 1; animation: none; }
.occ-ticker .marq-track { animation: none; }
.gd-media img.is-on,
.gd-media video.is-on { animation: none; }
}
/* her accents on the occasion page's own bands (see style.css for the rule) */
.occ-kicker { color: var(--accent-lift); }
.occ-hour { color: var(--accent-lift); }
.occ-tk em { color: var(--accent-lift); opacity: 1; }
/* ---- reviews: the LOCATION page's reviews band, copied verbatim from
css/location.css (owner, 2026-10-07; that file cannot load here, its venue
guide rules would restyle this page's hour-by-hour timeline). Keep the two
copies in step. ---- */
/* ---- reviews: full-bleed fixed image, one cream card, click to cycle ---- */
.loc-rev { position: relative; min-height: 100vh; padding: 110px 60px;
background: url('../images/cb-stock-26.jpg') center 30% / cover fixed no-repeat;
display: flex; flex-direction: column; align-items: center; justify-content: center; }
.loc-rev::before { content: ""; position: absolute; inset: 0; background: rgba(19,19,19,.58); }
.loc-rev > * { position: relative; }
.lrev-kicker { margin: 0 0 16px; font-family: var(--font-pop); font-weight: 300;
font-size: 13px; letter-spacing: .24em; text-transform: uppercase;
color: var(--cream-text); opacity: .8; text-align: center; }
.lrev-title { margin: 0 0 52px; font-family: var(--font-serif); font-weight: 400;
font-size: 46px; line-height: 1.1; color: var(--cream-text); text-align: center; }
.lrev-title em { font-family: var(--font-italic); font-style: normal; }
.lrev-card { width: 640px; max-width: 100%; margin: 0; background: var(--cream);
color: var(--ink); padding: 46px 52px 40px; cursor: pointer;
box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.lrev-card:focus-visible { outline: 2px solid var(--cream-text); outline-offset: 4px; }
.lrev-stars { display: block; color: var(--accent); font-size: 15px; letter-spacing: .35em; }
.lrev-deck { display: grid; margin-top: 20px; }
.lrev-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden;
transition: opacity .35s ease, visibility .35s; }
.lrev-slide.is-on { opacity: 1; visibility: visible; }
.lrev-slide blockquote { margin: 0; font-family: var(--font-serif);
font-size: 24px; line-height: 1.45; }
.lrev-who { margin: 22px 0 0; font-family: var(--font-pop); font-weight: 300;
font-size: 13px; letter-spacing: .06em; }
.lrev-who b { font-weight: 400; }
.lrev-who span { display: block; margin-top: 4px; font-size: 11.5px;
letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.lrev-foot { margin-top: 30px; padding-top: 18px;
border-top: 1px solid rgba(22,22,22,.22); display: flex;
align-items: baseline; justify-content: space-between; }
.lrev-hint { font-family: var(--font-pop); font-weight: 300; font-size: 11.5px;
letter-spacing: .18em; text-transform: uppercase; opacity: .55; }
.lrev-count { font-family: var(--font-italic); font-size: 19px; }
/* her accent on the kicker (same rule as location.css) */
.lrev-kicker { color: var(--accent-lift); opacity: 1; }
@media (max-width: 900px) {
.loc-rev { min-height: 0; padding: 72px 22px 76px;
background-attachment: scroll; }
/* cover scales the background photo up hard at 390px, so the heading band
lands on brighter pixels than it does on desktop. Lowest scrim that keeps
the kicker >=4.5:1 and the title >=3:1 against the worst pixel measured
there: .66 (desktop still clears at .58, so it keeps the photo as visible
as legibility allows). BUILD: re-measure after swapping the photo. */
.loc-rev::before { background: rgba(19,19,19,.66); }
.lrev-title { font-size: clamp(34px, 9.5vw, 44px); margin-bottom: 36px; }
.lrev-card { padding: 34px 26px 30px; }
.lrev-slide blockquote { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
.lrev-slide { transition: none; }
}
/* Colors Booth (owner, 2026-11-08): no step word over the photo, on any step */
.occ-hour { display: none !important; }