/* ============================================================
   ITs Photobooth landing: dark stage
   Midnight canvas, one warm accent (champagne gold), Anton for the
   poster type, Figtree for reading. Real prints and the shots cut
   out of them are the only photos (prints/ = the photo layouts;
   the booth gives soft copies, not paper). Motion is one-shot or user
   driven; scroll-linked extras only for fine pointers (Mali-G52
   scroll ghosting on budget Android phones, see app.css).
   Loaded after app.css, on the landing page only.
   ============================================================ */

.page-landing {
    --lp-bg: #0a0f15;
    --lp-bg-2: #0f161e;
    --lp-bg-3: #16202a;
    --lp-line: rgba(255, 255, 255, .09);
    --lp-line-2: rgba(255, 255, 255, .18);
    --lp-text: #f4efe4;
    --lp-text-2: #aab3bd;   /* 9:1 on --lp-bg */
    --lp-text-3: #808a95;   /* 5.3:1 on --lp-bg, labels only */
    --lp-gold: #e6c77f;
    --lp-poster: "Anton", "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
    --lp-ease: cubic-bezier(.22, 1, .36, 1);
    background: var(--lp-bg);
    color: var(--lp-text-2);
}
html:has(> body.page-landing) { background: #0a0f15; color-scheme: dark; }
.page-landing h1, .page-landing h2, .page-landing h3 { color: var(--lp-text); }
.page-landing ::selection { background: rgba(230, 199, 127, .35); color: #fff; }
.page-landing :focus-visible { outline-color: var(--lp-gold); }
html.lb-open { overflow: hidden; }

/* ---------- shared chrome on the dark page ---------- */

.page-landing .topbar { background: rgba(10, 15, 21, .8); border-bottom-color: var(--lp-line); }
.page-landing .brand { color: var(--lp-text); }
.page-landing .brand__coin { box-shadow: 0 0 0 1.5px rgba(230, 199, 127, .7), 0 4px 12px -2px rgba(0, 0, 0, .6); }
.page-landing .topnav a { color: var(--lp-text-2); }
.page-landing .topnav a:hover { color: var(--lp-text); }
.page-landing .topnav a.btn--brass { color: var(--midnight); }   /* the nav link colour would win over the button's */
.page-landing .navtoggle { background: transparent; border-color: var(--lp-line-2); }
.page-landing .navtoggle span { background: var(--lp-text); }
@media (max-width: 860px) {
    .page-landing .topnav { background: var(--lp-bg-2); border-bottom-color: var(--lp-line); box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .8); }
    .page-landing .topnav a { border-bottom-color: var(--lp-line); }
}
@media (max-width: 640px) { .page-landing .topbar { background: var(--lp-bg); } }

.page-landing .foot { background: #070a0e; border-top-color: var(--lp-line); color: var(--lp-text-3); }
.page-landing .foot__brand { color: var(--lp-text); }
.page-landing .foot__brand small { color: var(--lp-text-3); }
.page-landing .foot__links a:hover { color: var(--lp-text); }

/* buttons: squared, small tracked caps */
.page-landing .btn { border-radius: 6px; font-family: var(--body); font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; }
.page-landing .btn--lg { padding: 17px 28px; font-size: .86rem; }
.page-landing .btn--sm { padding: 11px 16px; font-size: .72rem; }
.btn--line { color: var(--lp-text); background: transparent; border: 1px solid rgba(255, 255, 255, .38); }
.btn--line:hover { border-color: var(--lp-gold); color: var(--lp-gold); }

/* ---------- section scaffolding ---------- */

.lp-sec { position: relative; padding: clamp(80px, 11vw, 150px) 0; overflow: hidden; overflow: clip; }
.lp-sec + .lp-sec { border-top: 1px solid var(--lp-line); }
.lp-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 60px); }
.lp-head--center { margin-inline: auto; text-align: center; }
.lp-eyebrow { display: inline-flex; align-items: center; gap: 12px; color: var(--lp-gold); font-size: .74rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; line-height: 1; }
.lp-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.lp-head--center .lp-eyebrow::after, .book .lp-eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; }
.lp-title { margin-top: 16px; font-family: var(--lp-poster); font-weight: 400; font-synthesis: none; font-size: clamp(2.6rem, 5.6vw, 4.6rem); line-height: .95; letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; }
.lp-lede { margin-top: 18px; max-width: 52ch; color: var(--lp-text-2); font-size: 1.06rem; text-wrap: pretty; }
.lp-head--center .lp-lede { margin-inline: auto; }

/* one-shot fade up (landing.js adds .is-in; without JS everything shows) */
html.js .page-landing [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--lp-ease), transform .9s var(--lp-ease); }
html.js .page-landing [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- hero ---------- */

.lp-hero {
    position: relative; overflow: hidden; overflow: clip;
    padding-top: clamp(24px, 4vw, 48px);
    background:
        radial-gradient(640px 520px at 76% 44%, rgba(230, 199, 127, .15), transparent 62%),
        radial-gradient(900px 600px at 0% 100%, rgba(47, 90, 140, .16), transparent 60%),
        var(--lp-bg);
}
.lp-hero__word {
    position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%);
    font-family: var(--lp-poster); font-size: clamp(6rem, 23vw, 24rem); line-height: .78; text-transform: uppercase; white-space: nowrap;
    color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .055);
    pointer-events: none; user-select: none;
}
.lp-hero__in {
    position: relative;
    display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: clamp(28px, 4vw, 64px); align-items: center;
    min-height: clamp(520px, calc(100svh - 61px - 48px - 124px), 740px);   /* topbar, top padding, stats row: all on the first screen */
    padding-bottom: clamp(36px, 5vw, 64px);
}
.lp-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--lp-line-2); color: var(--lp-text-2); font-size: .8rem; font-weight: 600; letter-spacing: .06em; }
.lp-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--lp-gold); box-shadow: 0 0 0 4px rgba(230, 199, 127, .16); }
a.lp-pill { text-decoration: none; transition: border-color .2s ease, color .2s ease; }
a.lp-pill:hover { border-color: rgba(230, 199, 127, .6); color: var(--lp-text); }
.lp-hero__title {
    margin: 24px 0 22px;
    font-family: var(--lp-poster); font-weight: 400; font-synthesis: none;
    font-size: clamp(3.2rem, 6vw, 5.6rem); line-height: .9; letter-spacing: .005em; text-transform: uppercase; text-wrap: balance;
}
.lp-hero__title em {
    font-style: normal; color: transparent;
    background: linear-gradient(100deg, #f7e6b0 0%, #dcb560 42%, #b88d37 68%, #f0d590 100%);
    -webkit-background-clip: text; background-clip: text;
}
.lp-hero__sub { max-width: 44ch; color: var(--lp-text-2); font-size: 1.1rem; text-wrap: pretty; }
.lp-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* the lens: a round window on a real shot, ring text, iris shutter */
.lens { --lens: clamp(250px, 32vw, 460px); position: relative; justify-self: center; width: calc(var(--lens) * 1.24); aspect-ratio: 1; }
.lens::before { content: ""; position: absolute; inset: -14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(230, 199, 127, .16), transparent 70%); pointer-events: none; }
.lens__body { position: absolute; inset: 0; display: grid; place-items: center; transform-style: flat; }
.lens__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lens__hair { fill: none; stroke: rgba(230, 199, 127, .38); stroke-width: .4; }
.lens__ring text { fill: rgba(230, 199, 127, .78); font-family: var(--body); font-size: 6.2px; font-weight: 700; }
.lens__glass {
    position: relative; width: var(--lens); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #05080b;
    box-shadow: 0 0 0 7px #0d141b, 0 0 0 8px rgba(230, 199, 127, .5), 0 0 0 17px rgba(13, 20, 27, .55), 0 40px 100px -24px rgba(0, 0, 0, .95);
}
.lens__glass img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; transform: scale(1.06); transition: transform 1.4s var(--lp-ease); }
.lens.is-open .lens__glass img { transform: scale(1); }
.lens__glass::after {   /* glass highlight + edge vignette */
    content: ""; position: absolute; inset: 0; z-index: 3; border-radius: 50%; pointer-events: none;
    background: radial-gradient(120% 90% at 28% 16%, rgba(255, 255, 255, .15), transparent 40%), radial-gradient(closest-side, transparent 74%, rgba(0, 0, 0, .5) 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
/* six blades: wedges from the centre; open = turn and slide out past the rim */
.lens__iris { position: absolute; inset: -1px; z-index: 2; border-radius: 50%; overflow: hidden; pointer-events: none; }
.lens__iris i {
    position: absolute; inset: 0;
    clip-path: polygon(50% 50%, 101% 13%, 101% 87%);
    background: linear-gradient(90deg, #26313d 0%, #121a22 58%, #0b1117 100%);
    transform: rotate(calc(var(--i) * 60deg));
    transition: transform .32s cubic-bezier(.5, 0, .75, 0);
}
.lens__iris i:nth-child(odd) { background: linear-gradient(90deg, #303c49 0%, #151e27 58%, #0c1218 100%); }
.lens__iris i:nth-child(1) { --i: 0; }
.lens__iris i:nth-child(2) { --i: 1; }
.lens__iris i:nth-child(3) { --i: 2; }
.lens__iris i:nth-child(4) { --i: 3; }
.lens__iris i:nth-child(5) { --i: 4; }
.lens__iris i:nth-child(6) { --i: 5; }
.lens.is-open .lens__iris i { transform: rotate(calc(var(--i) * 60deg + 40deg)) translateX(64%); transition: transform .95s cubic-bezier(.65, 0, .2, 1); }
html:not(.js) .lens__iris { display: none; }
.lens__flash { position: absolute; inset: 0; z-index: 4; border-radius: 50%; opacity: 0; pointer-events: none; background: radial-gradient(circle at 50% 45%, #fff 0%, rgba(255, 255, 255, .75) 34%, rgba(255, 255, 255, 0) 72%); }
.lens.is-flash .lens__flash { animation: lens-flash .7s ease-out .22s both; }
@keyframes lens-flash { 0% { opacity: 0; } 18% { opacity: .85; } 100% { opacity: 0; } }

.lens__chip {
    position: absolute; left: -4%; bottom: 8%; z-index: 5;
    display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px;
    border-radius: 12px; background: rgba(15, 22, 30, .86); border: 1px solid var(--lp-line-2);
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    color: var(--lp-text-2); font-size: .78rem; line-height: 1.3;
}
.lens__chip img { width: 64px; height: auto; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); }
.lens__chip b { display: block; color: var(--lp-text); font-size: .9rem; }
.lens__shots { position: absolute; right: -2%; top: 61%; z-index: 5; display: grid; gap: 10px; transform: translateY(-50%); }   /* below the end of the ring text */
.lens__shots button {
    display: block; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; overflow: hidden; cursor: pointer;
    background: var(--lp-bg-3); opacity: .62;
    box-shadow: 0 0 0 1px var(--lp-line-2), 0 10px 20px -8px rgba(0, 0, 0, .8);
    transition: opacity .2s ease, box-shadow .2s ease, transform .2s ease; -webkit-tap-highlight-color: transparent;
}
.lens__shots img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.lens__shots button:hover { opacity: .92; }
.lens__shots button:active { transform: scale(.94); }
.lens__shots button.is-on { opacity: 1; box-shadow: 0 0 0 2px var(--lp-gold), 0 10px 20px -8px rgba(0, 0, 0, .8); }
.lens__shots button:focus-visible { outline: 2px solid var(--lp-gold); outline-offset: 4px; border-radius: 50%; }

.lp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--lp-line); }
.lp-stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; padding: 24px 24px 26px 0; }
.lp-stats > div + div { padding-left: 24px; border-left: 1px solid var(--lp-line); }
.lp-stats dd { margin: 0; color: var(--lp-text); font-family: var(--lp-poster); font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1; text-transform: uppercase; }
.lp-stats dt { color: var(--lp-text-3); font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }

@media (max-width: 900px) {
    .lp-hero__in { grid-template-columns: 1fr; min-height: 0; gap: 44px; padding-top: 8px; }
    .lp-hero__title { font-size: clamp(3.3rem, 9vw, 5.2rem); }
    .lens { --lens: min(66vw, 360px); }
    .lp-hero__word { bottom: 190px; }
    .lp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-stats > div:nth-child(3) { padding-left: 0; border-left: 0; }
    .lp-stats > div:nth-child(n + 3) { border-top: 1px solid var(--lp-line); }
}
@media (max-width: 480px) {
    .lens__chip { left: -2%; bottom: 2%; padding: 8px 12px 8px 8px; }
    .lens__chip img { width: 48px; }
    .lens__shots { right: -3%; gap: 8px; }
    .lens__shots button { width: 46px; height: 46px; }
    .lp-stats > div { padding: 20px 14px 24px 0; }
    .lp-stats > div + div { padding-left: 14px; }
    .lp-stats > div:nth-child(3) { padding-left: 0; }
    .lp-stats dt { font-size: .66rem; letter-spacing: .1em; }
}

/* ---------- film strip band (decorative) ---------- */

.lp-band { position: relative; z-index: 1; padding: 52px 0; margin: -52px 0; overflow: hidden; overflow: clip; pointer-events: none; }
.filmstrip {
    position: relative; width: 112%; margin-left: -6%; padding: 24px 0;
    background: #050709; transform: rotate(-2.5deg);
    border-block: 1px solid rgba(255, 255, 255, .06); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
}
.filmstrip::before, .filmstrip::after { content: ""; position: absolute; left: 0; right: 0; height: 8px; background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(244, 239, 228, .2) 12px 26px); }
.filmstrip::before { top: 8px; }
.filmstrip::after { bottom: 8px; }
.filmstrip__track { display: flex; width: max-content; }
.filmstrip__set { display: flex; flex: none; gap: 10px; padding-right: 10px; }
.filmstrip__set img { height: clamp(120px, 15vw, 200px); width: auto; border-radius: 2px; }
/* runs on its own: every set slides one set width per loop, so the row never ends;
   landing.js plays it only while the band is on screen, and a mouse over it holds it */
@media (prefers-reduced-motion: no-preference) {
    .filmstrip__set { animation: film-run 40s linear infinite; will-change: transform; }
    html.js .filmstrip:not(.is-on) .filmstrip__set { animation-play-state: paused; }
    @media (hover: hover) and (pointer: fine) {
        .filmstrip { pointer-events: auto; }
        .filmstrip:hover .filmstrip__set { animation-play-state: paused; }
    }
}
@keyframes film-run { to { transform: translateX(-100%); } }

/* ---------- your photos (what comes with the booth) ---------- */

.lp-print { background: radial-gradient(760px 560px at 22% 50%, rgba(230, 199, 127, .08), transparent 62%), var(--lp-bg); }
.lp-band + .lp-print { border-top: 0; }
.lp-print__in { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 80px); align-items: start; }
/* the layout stays in view while the list beside it is read */
.lp-print__fig { position: sticky; top: 104px; margin: 0; }
.lp-print__copy .lp-title, .lp-key__copy .lp-title { font-size: clamp(2.6rem, 4.4vw, 3.9rem); }
/* outlined "QR" under the layout, filling the space the sticky column leaves */
.lp-print__ghost {
    position: absolute; left: -2%; top: calc(100% + 18px); z-index: 0;
    font-family: var(--lp-poster); font-size: clamp(8rem, 17vw, 16rem); line-height: .8; white-space: nowrap;
    color: transparent; -webkit-text-stroke: 1.5px rgba(230, 199, 127, .13); pointer-events: none;
}
.anat__frame { position: relative; z-index: 1; padding: 30px 30px 0 0; }
.anat__print {
    position: relative; aspect-ratio: 3 / 2; border-radius: 4px; background: var(--midnight);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 40px 80px -30px rgba(0, 0, 0, .95), 0 0 120px -30px rgba(230, 199, 127, .28);
}
.anat__print img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.anat__dim { position: absolute; display: flex; align-items: center; justify-content: center; color: var(--lp-text-3); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1; }
.anat__dim::before, .anat__dim::after { content: ""; flex: 1; background: var(--lp-line-2); }
.anat__dim span { padding: 0 10px; white-space: nowrap; }
.anat__dim--w { top: 0; left: 0; right: 30px; height: 14px; border-inline: 1px solid var(--lp-line-2); }
.anat__dim--w::before, .anat__dim--w::after { height: 1px; }
.anat__dim--h { top: 30px; bottom: 0; right: 0; width: 14px; flex-direction: column; border-block: 1px solid var(--lp-line-2); }
.anat__dim--h::before, .anat__dim--h::after { width: 1px; }
.anat__dim--h span { padding: 8px 0; writing-mode: vertical-rl; }
.anat__cap { position: relative; z-index: 1; margin-top: 16px; padding-right: 30px; color: var(--lp-text-3); font-size: .84rem; }
/* pins sit on the layout at the feature they number (percent of the 1800×1200 layout) */
.anat__pin {
    position: absolute; left: var(--x); top: var(--y);
    width: 30px; height: 30px; margin: -15px 0 0 -15px;
    display: grid; place-items: center; border-radius: 50%;
    font-family: var(--display); font-weight: 800; font-size: .86rem; line-height: 1; color: var(--midnight);
    background: var(--brass-btn);
    box-shadow: 0 0 0 2.5px rgba(255, 255, 255, .92), 0 8px 16px -6px rgba(0, 0, 0, .7);
    transition: transform .2s ease, box-shadow .2s ease;
}
.anat__pin--1 { --x: 49.9%; --y: 21%; }   /* between the two shots */
.anat__pin--2 { --x: 25.4%; --y: 85.5%; } /* event name and date */
.anat__pin--3 { --x: 9.4%; --y: 86.4%; }  /* QR tile corner */
.anat__pin.is-on { transform: scale(1.18); box-shadow: 0 0 0 2.5px #fff, 0 0 0 9px rgba(230, 199, 127, .5), 0 10px 20px -6px rgba(0, 0, 0, .7); }

.lp-print__copy .anat__list, .lp-key__copy .anat__list { margin-top: 30px; }
.anat__list { list-style: none; margin: 0; padding: 0; counter-reset: pin; }
.anat__item { display: grid; grid-template-columns: 30px 1fr; gap: 16px; align-items: start; padding: 18px 0; border-top: 1px solid var(--lp-line-2); counter-increment: pin; }
.anat__item:last-child { border-bottom: 1px solid var(--lp-line-2); }
.anat__item::before {
    content: counter(pin);
    display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
    font-family: var(--display); font-weight: 800; font-size: .86rem; line-height: 1; color: var(--midnight);
    background: var(--brass-btn); transition: transform .2s ease;
}
.anat__item h3 { margin: 4px 0; font-size: 1.1rem; transition: color .2s ease; }
.anat__item p { color: var(--lp-text-2); font-size: .96rem; text-wrap: pretty; }
.anat__item.is-on::before { transform: scale(1.12); }
.anat__item.is-on h3 { color: var(--lp-gold); }

.lp-chips { margin-top: 24px; }
.lp-chips p { margin-bottom: 10px; color: var(--lp-text-3); font-size: .7rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.lp-chips ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lp-chips li { padding: 8px 12px; border: 1px solid var(--lp-line-2); border-radius: 4px; color: var(--lp-text); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2; }

@media (max-width: 900px) {
    .lp-print__in { grid-template-columns: 1fr; }
    .lp-print__fig { position: relative; top: auto; }
    .lp-print__fig, .lp-print__copy { width: 100%; max-width: 640px; margin-inline: auto; }
    .lp-print__ghost { display: none; }   /* stacked: the copy follows straight after the print */
}
@media (max-width: 480px) {
    .anat__frame { padding: 24px 24px 0 0; }
    .anat__dim--w { right: 24px; }
    .anat__dim--h { top: 24px; }
    .anat__cap { padding-right: 24px; }
    .anat__pin { width: 26px; height: 26px; margin: -13px 0 0 -13px; font-size: .78rem; }
}

/* ---------- keychain (new in every package) ---------- */

.lp-key { background: radial-gradient(640px 540px at 74% 50%, rgba(230, 199, 127, .12), transparent 64%), var(--lp-bg); }
.lp-key__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.lp-key__note { margin-top: 22px; color: var(--lp-text-2); font-size: .96rem; }
.lp-key__note b { color: var(--lp-gold); font-weight: 700; }
/* the real ticket keychain, both ways (2 x 3 in), in clear holders on split rings; tilts with the pointer like the lens */
.keys { position: relative; justify-self: center; width: min(100%, 480px); aspect-ratio: 1 / 1.04; }
.keys__in { position: absolute; inset: 0; }
.keytag { position: absolute; transform-origin: 50% 3%; }
.keytag--tall { --ring: 30%; --hole: 8%; --pad: 5%; --tab: 15%; left: 2%; top: 0; width: 44%; transform: rotate(-9deg); }
.keytag--tall .keytag__card { filter: brightness(.82) saturate(.9); }
.keytag--wide { --ring: 18.5%; --hole: 4.9%; --pad: 3.1%; --tab: 9.2%; right: 0; top: 33%; width: 72%; transform: rotate(6deg); }
.keytag__ring {
    position: relative; z-index: 2; display: block; width: var(--ring); aspect-ratio: 1; margin: 0 auto calc(var(--ring) * -.3); border-radius: 50%;
    border: 5px solid; border-color: #eef1f4 #9aa2ab #5d656e #c5cbd2;
    box-shadow: 0 6px 12px -4px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(0, 0, 0, .25);
}
.keytag__card {   /* clear acrylic: a tab with the hole on top, the ticket inside */
    position: relative; padding: var(--tab) var(--pad) var(--pad); border-radius: 14px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .08));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 36px 60px -24px rgba(0, 0, 0, .95), 0 0 80px -24px rgba(230, 199, 127, .3);
}
.keytag__card::after {   /* acrylic sheen over the ticket */
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(120deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, .14) 100%);
}
.keytag__hole { position: absolute; top: 0; left: 50%; width: var(--hole); margin-top: calc(var(--tab) / 2 - var(--hole) / 2); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: var(--lp-bg); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .6); }
.keytag__card img { display: block; width: 100%; height: auto; }
/* one swing as the tags come into view */
@media (prefers-reduced-motion: no-preference) {
    html.js .keys.is-in .keytag--wide { animation: key-swing 1.8s var(--lp-ease) .25s both; }
    html.js .keys.is-in .keytag--tall { animation: key-swing-back 1.8s var(--lp-ease) .1s both; }
}
@keyframes key-swing { 0% { transform: rotate(20deg); } 40% { transform: rotate(0deg); } 70% { transform: rotate(8deg); } 100% { transform: rotate(6deg); } }
@keyframes key-swing-back { 0% { transform: rotate(-22deg); } 45% { transform: rotate(-4deg); } 100% { transform: rotate(-9deg); } }
@media (max-width: 900px) {
    .lp-key__in { grid-template-columns: 1fr; }
    .lp-key__copy, .keys { width: 100%; max-width: 640px; margin-inline: auto; }
    .keys { max-width: 380px; }
}

/* ---------- gallery ---------- */

.lp-gal { background: var(--lp-bg-2); }
.gal__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: -16px 0 clamp(28px, 4vw, 44px); }
.gal__tabs button {
    min-height: 44px; padding: 0 18px; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
    color: var(--lp-text-3); font-family: var(--body); font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    transition: color .2s ease, border-color .2s ease;
}
.gal__tabs button:hover { color: var(--lp-text); }
.gal__tabs button[aria-pressed="true"] { color: var(--lp-text); border-bottom-color: var(--lp-gold); }
.gal { column-count: 3; column-gap: 14px; }
.gal__item {
    position: relative; display: block; width: 100%; margin: 0 0 14px; padding: 0; border: 0; border-radius: 6px; overflow: hidden;
    background: var(--lp-bg-3); cursor: zoom-in; break-inside: avoid; -webkit-tap-highlight-color: transparent;
}
.gal__item img { width: 100%; height: auto; transition: transform .7s var(--lp-ease); }
.gal__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5, 8, 11, .7), transparent 50%); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.gal__tag { position: absolute; left: 12px; bottom: 12px; z-index: 1; padding: 6px 10px; border-radius: 4px; background: rgba(10, 15, 21, .72); color: var(--lp-text); font-size: .66rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; line-height: 1; }
.gal__item:hover img { transform: scale(1.045); }
.gal__item:hover::after, .gal__item:focus-visible::after { opacity: 1; }
.gal__item:focus-visible { outline: 2px solid var(--lp-gold); outline-offset: 3px; }
@media (max-width: 700px) {
    .gal { column-count: 2; column-gap: 10px; }
    .gal__item { margin-bottom: 10px; }
    .gal__tag { left: 8px; bottom: 8px; padding: 5px 8px; font-size: .58rem; }
}

.lb { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: clamp(16px, 4vw, 48px); border: 0; background: rgba(5, 8, 11, .95); color: var(--lp-text); }
.lb[open] { display: grid; place-items: center; }
.lb::backdrop { background: rgba(0, 0, 0, .6); }
.lb__fig { display: grid; justify-items: center; gap: 14px; max-width: min(1200px, 100%); margin: 0; }
.lb__img { width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 150px); border-radius: 4px; box-shadow: 0 30px 80px -20px #000; opacity: 0; transition: opacity .25s ease; }
.lb__img.is-in { opacity: 1; }
.lb__cap { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; color: var(--lp-text-2); font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.lb__count { color: var(--lp-text-3); font-variant-numeric: tabular-nums; }
.lb__btn {
    position: fixed; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%; cursor: pointer;
    border: 1px solid var(--lp-line-2); background: rgba(15, 22, 30, .85); color: var(--lp-text);
    transition: border-color .2s ease, color .2s ease;
}
.lb__btn svg { width: 20px; height: 20px; }
.lb__btn:hover { border-color: var(--lp-gold); color: var(--lp-gold); }
.lb__btn--prev { left: clamp(10px, 3vw, 32px); top: 50%; transform: translateY(-50%); }
.lb__btn--next { right: clamp(10px, 3vw, 32px); top: 50%; transform: translateY(-50%); }
.lb__btn--close { top: clamp(10px, 3vw, 28px); right: clamp(10px, 3vw, 28px); }
@media (max-width: 700px) {
    .lb__btn--prev, .lb__btn--next { top: auto; bottom: 20px; transform: none; }
    .lb__btn--prev { left: calc(50% - 60px); }
    .lb__btn--next { right: calc(50% - 60px); }
    .lb__img { max-height: calc(100dvh - 190px); }
}

/* ---------- packages ---------- */

.lp-pack { background: var(--lp-bg); }
.lp-pack::before {   /* a real shot as a faint stage light behind the cards */
    content: ""; position: absolute; inset: 0 0 auto; height: 72%; pointer-events: none;
    background: url("/images/shots/shot-3b-800.webp") center 28% / cover no-repeat;
    opacity: .12; filter: grayscale(.35);
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent);
}
.lp-pack .wrap { position: relative; }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: end; }
.tier { position: relative; display: flex; flex-direction: column; padding: 32px 28px 28px; border-radius: 10px; background: rgba(10, 15, 21, .88); border: 1px solid var(--lp-line-2); transition: transform .35s var(--lp-ease), border-color .35s ease; }
.tier--raised {
    padding-top: 42px; padding-bottom: 38px; transform: translateY(-14px);
    background: linear-gradient(180deg, rgba(230, 199, 127, .12), rgba(10, 15, 21, .94) 42%);
    border-color: rgba(230, 199, 127, .7); box-shadow: 0 30px 80px -30px rgba(230, 199, 127, .35);
}
@media (hover: hover) {
    .tier:hover { transform: translateY(-6px); border-color: rgba(230, 199, 127, .5); }
    .tier--raised:hover { transform: translateY(-20px); }
}
.tier__tag { position: absolute; top: -13px; left: 28px; padding: 7px 12px; border-radius: 4px; background: var(--brass-btn); color: var(--midnight); font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; line-height: 1; }
.tier__name { font-family: var(--lp-poster); font-weight: 400; font-synthesis: none; font-size: 2.3rem; line-height: 1; letter-spacing: .01em; text-transform: uppercase; }
.tier__price { margin-top: 18px; color: var(--lp-text); font-family: var(--lp-poster); font-size: clamp(2.6rem, 3.6vw, 3.2rem); line-height: 1; letter-spacing: .01em; font-variant-numeric: lining-nums; }
.tier__price span { margin-right: .08em; color: var(--lp-gold); font-size: .6em; vertical-align: .56em; }   /* Anton has the peso sign; Figtree doesn't */
.tier__hours { margin: 10px 0 22px; color: var(--lp-gold); font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.tier__list { flex: 1; display: grid; align-content: start; gap: 12px; margin: 0 0 26px; padding: 0; list-style: none; }
.tier__list li { position: relative; padding-left: 26px; color: var(--lp-text-2); font-size: .96rem; }
.tier__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 13px; height: 7px; border-left: 2px solid var(--lp-gold); border-bottom: 2px solid var(--lp-gold); transform: rotate(-45deg) translateY(-2px); }
.tier__list b { color: var(--lp-text); font-weight: 600; }
.tiers__note { margin-top: 30px; text-align: center; color: var(--lp-text-3); font-size: .92rem; }
@media (max-width: 900px) {
    .tiers { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
    .tier--raised { transform: none; }
    .tier:hover, .tier--raised:hover { transform: none; }
}

/* ---------- how to book ---------- */

.lp-how { background: var(--lp-bg-2); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 44px); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.step { position: relative; padding-top: 22px; border-top: 1px solid var(--lp-line-2); counter-increment: step; }
.step::after { content: ""; position: absolute; top: -1px; left: 0; width: 64px; height: 2px; background: var(--lp-gold); }
.step::before {
    content: counter(step, decimal-leading-zero); display: block; margin-bottom: 18px;
    font-family: var(--lp-poster); font-size: clamp(4.4rem, 7.5vw, 6.6rem); line-height: .9;
    color: transparent; -webkit-text-stroke: 1.5px rgba(230, 199, 127, .72); transition: color .35s ease;
}
.step h3 { margin-bottom: 8px; font-size: 1.22rem; }
.step p { color: var(--lp-text-2); font-size: .97rem; text-wrap: pretty; }
@media (hover: hover) { .step:hover::before { color: rgba(230, 199, 127, .14); } }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } }

/* ---------- faq ---------- */

.lp-faq__in { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.lp-faq__head { position: sticky; top: 100px; }
.lp-faq__head .btn { margin-top: 28px; }
.faq { border-top: 1px solid var(--lp-line-2); }
.faq__item { border-bottom: 1px solid var(--lp-line-2); }
.faq__item summary {
    display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 4px;
    list-style: none; cursor: pointer; color: var(--lp-text); font-family: var(--display); font-size: 1.12rem; font-weight: 700;
    transition: color .2s ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; flex: none; color: var(--lp-gold); font-family: var(--body); font-size: 1.6rem; font-weight: 400; line-height: 1; transition: transform .25s ease; }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item summary:hover { color: var(--lp-gold); }
.faq__item p { padding: 0 44px 24px 4px; color: var(--lp-text-2); }
@media (max-width: 900px) {
    .lp-faq__in { grid-template-columns: 1fr; }
    .lp-faq__head { position: static; }
}

/* ---------- terms ---------- */

.terms__lead { max-width: 760px; margin: -12px auto 34px; text-align: center; color: var(--lp-text-2); text-wrap: pretty; }
.terms__lead b { color: var(--lp-text); font-weight: 600; }
.terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.terms > .term:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* an odd last card spans the row, no hole */
.term { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 24px; border-radius: 10px; background: var(--lp-bg-2); border: 1px solid var(--lp-line); }
.term__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: rgba(230, 199, 127, .08); border: 1px solid rgba(230, 199, 127, .25); color: var(--lp-gold); }
.term__ic svg { width: 21px; height: 21px; }
.term h3 { margin: 2px 0 6px; font-size: 1.05rem; }
.term p { color: var(--lp-text-2); font-size: .94rem; text-wrap: pretty; }
.terms__fine { max-width: 760px; margin: 24px auto 0; text-align: center; color: var(--lp-text-3); font-size: .85rem; }
@media (max-width: 720px) { .terms { grid-template-columns: 1fr; } }

/* ---------- book ---------- */

.lp-book { padding-block: clamp(110px, 15vw, 200px); background: radial-gradient(700px 440px at 50% 50%, rgba(230, 199, 127, .13), transparent 66%), var(--lp-bg); }
.lp-book__words {
    /* first and last word sit in the section's top and bottom padding, the middle one runs behind the card */
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    padding-block: clamp(14px, 2.4vw, 34px);
    font-family: var(--lp-poster); font-size: clamp(4.2rem, 11vw, 10rem); line-height: .86; text-transform: uppercase; white-space: nowrap;
    pointer-events: none; user-select: none;
}
.lp-book__words span { display: block; }
.lp-book__words span:nth-child(odd) { color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .1); }
.lp-book__words span:nth-child(2) { position: absolute; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, .045); }
.book {
    position: relative; max-width: 860px; margin: 0 auto; padding: clamp(40px, 6vw, 64px) clamp(22px, 5vw, 56px); text-align: center;
    border-radius: 14px; background: rgba(10, 15, 21, .74); border: 1px solid rgba(230, 199, 127, .35);
    box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .95); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.book__coin { width: 76px; height: 76px; margin: 0 auto 22px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 2px rgba(230, 199, 127, .8), 0 16px 34px -12px #000; }
.book__coin img { width: 100%; height: 100%; object-fit: cover; }
.book__text { max-width: 52ch; margin: 16px auto 30px; color: var(--lp-text-2); text-wrap: pretty; }
.book__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@media (max-width: 640px) {
    .book { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(10, 15, 21, .92); }
    .book__actions .btn { width: 100%; padding-inline: 16px; letter-spacing: .08em; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    html.js .page-landing [data-reveal] { opacity: 1; transform: none; transition: none; }
    .lens__iris, .lens__flash { display: none; }
    .lens__glass img, .gal__item img, .tier, .step::before, .anat__pin, .anat__item::before, .anat__item h3, .lb__img, .lens__shots button { transition: none !important; }
}