/* Empire Cinema Club full site r1: the inner pages. Loaded after r10's site.css, which is unchanged.
   The inner pages keep the live source's own content markup byte for byte (pageHero, pageStats, contentSection, contentCards …),
   so this file dresses those classes in r10's tokens and components. It follows the section patterns of the established Acqua,
   Nero's and Partners inner pages (SECTION-COMPARISON.md): hero with small label, main title, lead and actions; a four-cell facts
   strip; banded sections, each with a small label over its title; card grids; a "plan your visit" call to action; the VIP email box
   at the foot of every page, email first. Every rule is scoped to body.inner, except the production email-form rules at the end,
   which the production home page also needs. */
body.inner{--pad:clamp(18px,4vw,48px)}
.inner .pageHero,.inner .contentSection,.inner .pageCta,.inner .discountChannels,.inner .biphoriaPromo{padding-inline:max(var(--pad),calc((100% - var(--max))/2 + var(--pad)))}

/* Hero: r10's stage colour, with r10's projected light (the Films artwork's beams) drawn behind the words. No photograph. */
.inner .pageHero{position:relative;isolation:isolate;overflow:hidden;padding-top:112px;padding-bottom:calc(var(--gap) + 6px);background:radial-gradient(120% 80% at 50% 0%,#3a060d 0%,#160307 52%,var(--ink) 100%)}
.inner .pageHero::before,.inner .pageHero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:screen;transform-origin:92% -20%;filter:blur(3px)}
.inner .pageHero::before{background:conic-gradient(from 180deg at 92% -20%,transparent 0 22deg,rgba(155,61,255,.55) 29deg,rgba(201,166,255,.28) 37deg,transparent 44deg),conic-gradient(from 180deg at 92% -20%,transparent 0 40deg,rgba(111,155,255,.42) 47deg,rgba(37,87,232,.24) 55deg,transparent 62deg);animation:beamA 11s ease-in-out infinite alternate}
.inner .pageHero::after{background:conic-gradient(from 180deg at 92% -20%,transparent 0 58deg,rgba(255,107,125,.34) 64deg,rgba(232,52,74,.2) 71deg,transparent 78deg),radial-gradient(40% 60% at 12% 110%,rgba(122,0,223,.35),transparent 70%);animation:beamB 13s ease-in-out infinite alternate}
.inner .pageHero>div{position:relative;max-width:860px}
.inner .pageHero h1{font:700 clamp(2.1rem,7vw,3.7rem)/1.03 var(--display);letter-spacing:-.035em;text-wrap:balance}
.inner .pageHero h1,.inner .pageHero .eyebrow,.inner .pageHero p{text-shadow:0 2px 18px rgba(7,6,15,.9)}
.inner .pageHero h1+p{color:var(--mist);font-size:1.0625rem;line-height:1.6;margin-top:16px;max-width:62ch}
.inner .pageHero h1+h2{font-size:clamp(1.4rem,3.4vw,2.1rem);color:var(--mist);margin-top:12px}
@media (min-width:700px){.inner .pageHero{padding-top:124px}}

/* Action links, as r10 buttons: the first is the main one, the rest are outlined. */
.inner .pageActions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.inner .pageActions a{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 22px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--fg);font:700 .9375rem/1.1 var(--body);text-decoration:none;transition:background .2s,box-shadow .2s}
.inner .pageActions a:hover{background:rgba(201,166,255,.08)}
.inner .pageActions a:first-child{background:var(--violet);border-color:transparent;color:#fff}
.inner .pageActions a:first-child:hover{background:#8d17f5;box-shadow:0 0 0 4px rgba(122,0,223,.25),0 10px 30px -10px rgba(155,61,255,.8)}

/* Facts strip, as r10's hero stats */
.inner .pageStats{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;width:calc(min(var(--max),100%) - 2*var(--pad));margin:0 auto var(--gap);background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.inner .pageStats>div{display:grid;align-content:start;gap:4px;padding:14px 12px;background:rgba(10,8,24,.86)}
@media (min-width:430px){.inner .pageStats>div{padding:14px 16px}}
/* Empire's values are longer than the home's ("Pass-outs", "7 private rooms"), so the size follows the cell and words break only if one cannot fit. */
.inner .pageStats strong{font:800 clamp(1rem,4.1vw,1.5rem)/1.08 var(--display);letter-spacing:-.02em;background:linear-gradient(90deg,#c08bff,#8fb1ff);-webkit-background-clip:text;background-clip:text;color:transparent;overflow-wrap:break-word}
.inner .pageStats span{font-size:.78rem;line-height:1.35;letter-spacing:.1em;text-transform:uppercase;color:var(--mist)}
@media (min-width:700px){.inner .pageStats{grid-template-columns:repeat(4,minmax(0,1fr))}.inner .pageStats strong{font-size:clamp(1.1rem,2.3vw,1.75rem)}}

/* Sections: a small label over the title, like r10's eyebrow. Plain and .alt bands alternate. */
.inner .contentSection{padding-block:var(--gap)}
.inner .contentSection.alt{background:var(--ink-2)}
.inner .kicker{font:700 .78rem/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--red-2);margin-bottom:14px}
.inner .contentSection>p:not(.kicker),.inner .contentSection>h3+p{color:var(--mist);margin-top:14px;max-width:68ch}
.inner .contentSection>p+p{margin-top:12px}
.inner .contentSection>h3{margin-top:28px}
.inner .contentSection>h3+p{margin-top:8px}
.inner #details>.pageStats+.contentSection{padding-top:0}
/* Wide screens: a section of words only (no card grid or table) puts its label and title on the left and its text on the right,
   as the references' split sections do, so the right half of the screen is not left empty. */
@media (min-width:1000px){
  .inner .contentSection:not(:has(.contentCards,.scheduleGrid,.venueCards,.hoursTable)){display:flow-root}
  .inner .contentSection:not(:has(.contentCards,.scheduleGrid,.venueCards,.hoursTable))>:is(.kicker,h2){float:left;clear:left;width:calc(41.6% - 24px)}
  .inner .contentSection:not(:has(.contentCards,.scheduleGrid,.venueCards,.hoursTable))>:not(.kicker):not(h2){margin-left:41.6%}
  .inner .contentSection:not(:has(.contentCards,.scheduleGrid,.venueCards,.hoursTable))>:not(.kicker):not(h2):nth-child(3){margin-top:0}
  .inner .contentSection:not(:has(.contentCards,.scheduleGrid,.venueCards,.hoursTable))>h2{font-size:clamp(2rem,3.4vw,3rem)}
}

/* Card grids: one column on phones, two from 700px, three from 1000px; four or five cards share rows evenly, so no row ends with a gap. */
.inner .contentCards,.inner .scheduleGrid,.inner .venueCards{display:grid;gap:12px;margin-top:24px}
.inner .contentCards>article,.inner .scheduleGrid>article,.inner .venueCards>*{padding:20px;border-radius:18px;background:var(--glass);border:1px solid var(--line)}
.inner .contentCards h3,.inner .venueCards h3{margin-bottom:6px}
.inner .contentCards p,.inner .venueCards p{color:var(--mist);font-size:.9375rem}
@media (min-width:700px){
  .inner .contentCards,.inner .scheduleGrid,.inner .venueCards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inner .contentCards>:last-child:nth-child(odd),.inner .scheduleGrid>:last-child:nth-child(odd),.inner .venueCards>:last-child:nth-child(odd){grid-column:1/-1}
}
@media (min-width:1000px){
  .inner .contentCards,.inner .scheduleGrid,.inner .venueCards{grid-template-columns:repeat(6,minmax(0,1fr))}
  .inner .contentCards>*,.inner .scheduleGrid>*,.inner .venueCards>*{grid-column:span 2}
  .inner .contentCards>:last-child:nth-child(odd),.inner .scheduleGrid>:last-child:nth-child(odd),.inner .venueCards>:last-child:nth-child(odd){grid-column:span 2}
  .inner :is(.contentCards,.scheduleGrid,.venueCards):has(>:nth-child(2):last-child)>*{grid-column:span 3}
  .inner :is(.contentCards,.scheduleGrid,.venueCards):has(>:nth-child(4):last-child)>*{grid-column:span 3}
  .inner :is(.contentCards,.scheduleGrid,.venueCards):has(>:nth-child(5):last-child)>:nth-child(n+4){grid-column:span 3}
}
@media (min-width:1180px){.inner :is(.contentCards,.scheduleGrid,.venueCards):has(>:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}.inner :is(.contentCards,.scheduleGrid,.venueCards):has(>:nth-child(4):last-child)>*{grid-column:auto}}

/* Link cards (Our venues, More), as r10's venue tiles */
.inner .venueCards>a{display:block;text-decoration:none;transition:border-color .2s,transform .2s}
.inner .venueCards>a:hover{border-color:var(--line-2);transform:translateY(-2px)}
.inner .venueCards>article{border-color:rgba(155,61,255,.5);background:linear-gradient(160deg,rgba(122,0,223,.22),rgba(12,10,26,.9) 70%)}

/* Monthly listings: films and performers by date */
.inner .scheduleGrid h3{font-size:1.125rem;color:var(--violet-3);margin-bottom:8px}
.inner .scheduleGrid li{padding:10px 0;border-top:1px solid var(--line);font-weight:600;overflow-wrap:anywhere}
.inner .scheduleNote{margin-top:18px;max-width:70ch;padding:16px 18px;border-radius:18px;border:1px solid rgba(232,52,74,.35);background:linear-gradient(160deg,rgba(232,52,74,.12),transparent 70%);color:var(--mist)}
.inner .scheduleNote strong{color:var(--fg)}
.inner .scheduleNote a,.inner .contentSection a:not([class]){color:var(--fg)}

/* Opening hours, as r10's hours rows in a panel */
.inner .hoursTable{margin-top:22px;max-width:760px;padding:4px 22px;border-radius:var(--r);background:var(--glass);border:1px solid var(--line)}
.inner .hoursTable>div{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 16px;padding:14px 0;border-bottom:1px solid var(--line)}
.inner .hoursTable>div:last-child{border-bottom:0}
.inner .hoursTable b{font-weight:600;color:var(--mist)}
.inner .hoursTable span{font-weight:700}
/* Phones: every row stacks the same way, day then time (the r9 lesson on the home's hours rows). */
@media (max-width:519px){.inner .hoursTable>div{flex-direction:column;align-items:flex-start;gap:2px}}

/* Lists */
.inner .featureList{display:grid;gap:10px;margin-top:18px;max-width:72ch}
.inner .featureList li{position:relative;padding-left:30px;color:var(--mist)}
.inner ul.featureList li::before{content:"";position:absolute;left:6px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--violet-2);box-shadow:0 0 10px var(--violet-2)}
.inner ol.featureList{counter-reset:fl}
.inner ol.featureList li{counter-increment:fl;padding-left:40px}
.inner ol.featureList li::before{content:counter(fl,decimal-leading-zero);position:absolute;left:0;top:0;font:800 .95rem/1.55 var(--display);color:var(--violet-3)}

/* Plan your visit, as the references' "Before travelling" band */
.inner .pageCta{padding-block:var(--gap);background:radial-gradient(60% 100% at 100% 0%,rgba(122,0,223,.28),transparent 62%),var(--ink-2);border-top:1px solid var(--line)}
.inner .pageCta>p:not(.kicker){color:var(--mist);margin-top:14px;max-width:60ch}
@media (min-width:1000px){
  .inner .pageCta{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(28px,3vw,48px);align-items:end}
  .inner .pageCta>.kicker,.inner .pageCta>h2{grid-column:1}
  .inner .pageCta>p:not(.kicker){grid-column:2;grid-row:1/3;margin:0}
  .inner .pageCta>.pageActions{grid-column:2;grid-row:3;margin-top:20px}
}

/* Biphoria: the poster beside r10's Biphoria card */
/* It always follows the facts strip, whose bottom margin is the section gap. */
.inner .biphoriaPromo{padding-block:0 var(--gap);display:grid;gap:24px}
.inner .biphoriaPoster img{width:100%;height:auto;border-radius:var(--r);box-shadow:0 0 0 1px rgba(201,166,255,.25),0 30px 80px -40px rgba(214,2,112,.85)}
.inner .biphoriaFacts{position:relative;overflow:hidden;padding:24px;border-radius:var(--r);border:1px solid rgba(201,166,255,.35);background:linear-gradient(125deg,rgba(214,2,112,.34),rgba(122,0,223,.38) 45%,rgba(0,56,168,.42));background-size:200% 200%;animation:drift 14s ease-in-out infinite alternate}
.inner .biphoriaFacts .kicker{color:#ffd0e2}
.inner .biphoriaFacts h2{font-size:clamp(1.9rem,4.4vw,3rem)}
.inner .biphoriaTime{display:grid;gap:4px;margin-top:18px}
.inner .biphoriaTime strong{font:800 clamp(2rem,6vw,2.8rem)/1 var(--display);letter-spacing:-.03em}
.inner .biphoriaTime span{color:#e8defa}
.inner .biphoriaGuests{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.inner .biphoriaGuests li{padding:6px 12px;border-radius:999px;background:rgba(7,6,15,.45);border:1px solid rgba(255,255,255,.2);font-size:.875rem}
.inner .biphoriaPrices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:18px;background:rgba(255,255,255,.18);border-radius:16px;overflow:hidden}
.inner .biphoriaPrices>div{display:grid;gap:2px;padding:12px 14px;background:rgba(7,6,15,.55)}
.inner .biphoriaPrices strong{font:800 1.35rem/1.2 var(--body)}
.inner .biphoriaPrices span{font-size:.8125rem;color:#e8defa}
.inner .biphoriaShows{margin-top:18px}
.inner .biphoriaShows .kicker{margin-bottom:6px}
.inner .biphoriaShows strong{font:700 1.3rem/1.3 var(--display)}
.inner .biphoriaLinks{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.inner .biphoriaLinks a{display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:0 22px;border-radius:999px;background:#fff;color:#1a0b33;font:700 .9375rem/1.1 var(--body);text-decoration:none}
.inner .biphoriaLinks a:hover{background:#efe6ff}
.inner .biphoriaLinks a.secondary{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}
@media (min-width:761px){.inner .biphoriaPromo{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(24px,3vw,48px);align-items:start}.inner .biphoriaFacts{padding:32px}}

/* Deals page: the two update channels, as r10's VIP cards, email first */
.inner .discountChannels{padding-block:var(--gap);background:radial-gradient(60% 80% at 0% 0%,rgba(122,0,223,.22),transparent 60%),var(--ink-2)}
.inner .discountChannelsIntro{display:grid;gap:14px;margin-bottom:26px}
.inner .discountChannelsIntro>p{color:var(--mist);max-width:60ch}
.inner .discountChannelGrid{display:grid;gap:16px}
.inner .discountChannel{padding:22px;border-radius:var(--r);background:var(--glass);border:1px solid var(--line)}
.inner .emailChannel{border-color:rgba(155,61,255,.5);box-shadow:inset 0 1px 0 rgba(201,166,255,.15),0 30px 60px -40px rgba(122,0,223,.9)}
.inner .whatsappChannel{border-color:rgba(111,155,255,.35)}
.inner .channelLabel{display:flex;align-items:center;gap:10px;font:700 .78rem/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--violet-3);margin-bottom:10px}
.inner .whatsappChannel .channelLabel{color:var(--blue-2)}
.inner .channelLabel span{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid currentColor;font-size:.72rem;letter-spacing:0}
.inner .discountChannel h3{font-size:1.375rem;margin-bottom:8px}
.inner .discountChannel>p{color:var(--mist);font-size:.9375rem}
.inner .whatsappJoin{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;margin-top:18px;padding:0 22px;border-radius:999px;background:var(--blue);color:#fff;font:700 .9375rem/1.1 var(--body);text-decoration:none}
.inner .whatsappJoin:hover{background:#2f63f5}
.inner .whatsappPerks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:16px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.inner .whatsappPerks>div{display:grid;align-content:start;gap:4px;padding:12px 14px;background:rgba(10,8,24,.86)}
.inner .whatsappPerks b{font-size:.9375rem}
.inner .whatsappPerks span{font-size:.8125rem;color:var(--mist)}
.inner .discountChannel>p.channelNote{margin-top:14px;font-size:.875rem;color:var(--mist-2)}
@media (min-width:1000px){
  .inner .discountChannelsIntro{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(28px,3vw,48px);align-items:end}
  .inner .discountChannelGrid{grid-template-columns:1fr 1fr;align-items:start}
}

/* Current page in the navigation (the source marks it with aria-current) */
.inner .nav>a[aria-current=page]{color:#fff;background:rgba(201,166,255,.14)}
.inner .more-list a[aria-current=page]{color:#fff;background:rgba(201,166,255,.1)}
.inner .m-list a[aria-current=page]{background:rgba(122,0,223,.24)}

/* The source's email form (Deals page), drawn like r10's form, in both builds */
.emailForm{display:grid;gap:10px;margin-top:16px}
.emailForm>p{color:var(--mist);font-size:.9rem;line-height:1.5}
.emailForm>p strong{color:var(--fg)}
.emailForm label:not(.consent){display:grid;gap:6px}
.emailForm label:not(.consent)>span{font-size:.875rem;font-weight:600;color:var(--mist)}
.emailForm input[type=email]{height:52px;padding:0 16px;border-radius:14px;border:1px solid var(--line-2);background:rgba(4,3,10,.6);color:var(--fg);font-size:1rem}
.emailForm input[type=email]:focus{border-color:var(--violet-3)}
.emailForm .consent{display:flex;align-items:flex-start;gap:10px;font-size:.9rem;color:var(--mist);cursor:pointer}
.emailForm .consent input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--violet-2);flex:none}
.emailForm button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;margin-top:6px;padding:0 22px;border-radius:999px;border:0;background:var(--violet);color:#fff;font:700 .9375rem/1.1 var(--body);cursor:pointer}
.emailForm button:hover{background:#8d17f5}
.emailForm button:disabled{opacity:.6;cursor:not-allowed}

/* Production only: r10's forms with the source endpoint, the source's error line and thank-you block */
form[data-email-form]{display:grid;gap:10px;margin-top:16px}
form[data-email-form] label[for^=em]{font-size:.875rem;font-weight:600;color:var(--mist)}
form[data-email-form] input[type=email]{height:52px;padding:0 16px;border-radius:14px;border:1px solid var(--line-2);background:rgba(4,3,10,.6);color:var(--fg);font-size:1rem}
form[data-email-form] input[type=email]:focus{border-color:var(--violet-3)}
form[data-email-form] .btn{margin-top:6px;width:100%}
.emailFormError{color:#ffb3bd;font-size:.9rem}
.emailFormSuccess{margin-top:16px;padding:14px 16px;border-radius:12px;background:rgba(122,0,223,.16);border:1px solid rgba(155,61,255,.45);font-size:.9375rem;color:var(--mist)}
.emailFormSuccess h3{color:var(--fg);margin-bottom:6px}
.emailFormSuccess p+p{margin-top:6px}
.emailFormSuccess strong{color:var(--fg)}

/* r4, MENU-07: the group privacy-policy link under every page email form, in Partners' markup (<p class="small form-note">), with the
   same 44px tap target and underline as the r3 phone menu's "Privacy policy". */
.form-note{margin-top:6px}
.form-note a{display:flex;width:fit-content;align-items:center;min-height:44px;color:var(--fg);text-decoration:underline;text-underline-offset:3px}
.discountChannel .form-note{color:var(--mist)}

/* r5: the page VIP block as one compact, email-first box, like Acqua's and Nero's live VIP: 'VIP deals & discounts' directly above the
   lead and the form at every width; field, consent, button, confirmation note, privacy link, then one WhatsApp link. No 01/02 cards.
   The photo follows the block on phones and tablets, and stays beside it from 1000px, where r10's grid already places it. */
.vip .vip-ways.vip-one{grid-template-columns:minmax(0,1fr)}
.vip .vip-one .way-mail form{margin-top:0}
.vip .form-help{margin-top:2px;color:var(--mist);font-size:.875rem}
.vip .vip-go{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:8px;color:var(--fg);font-weight:700;text-decoration:none}
.vip .vip-go svg.i{color:var(--blue-2)}
.vip .vip-go:hover{color:var(--violet-3)}
.vip .vip-wa-note{color:var(--mist-2);font-size:.8125rem}
.discountChannel .form-help{color:var(--mist);font-size:.875rem}
@media (max-width:999px){
  .vip .vip-grid{grid-template-columns:minmax(0,1fr)}
  .vip .vip-grid>.vip-head,.vip .vip-grid>.vip-ways,.vip .vip-grid>.ph{grid-column:1;grid-row:auto}
  .vip .vip-grid>.ph{width:100%;max-width:420px;margin-inline:auto}
  .vip .vip-grid>.ph .frame{flex:none;aspect-ratio:4/5;min-height:0}
}
@media (min-width:1000px){.vip .vip-ways.vip-one{max-width:620px}}
/* r7, photo first (src/hero-r7.js): until WebGL has really drawn the stage, the real photo and the HTML EMPIRE stay on screen. */
.hero:not(.gl-on) .wm-fallback{display:block}
.hero-art img{transition:opacity .5s ease}

/* r12, preview only: Mark's First Visit image ("Couple. Number 2", 8 Nov 2026) is a full photograph, not the r7 transparent cut-out of
   four customers that .rcust contains with a little room inside the frame. A photo fills its frame like every other photo on the page
   (.ph:not(.hero-art) .frame img in site.css), anchored at the foot so the couple and the seat backs stay in view. */
section.first .rcust .frame img{object-fit:cover;object-position:50% 100%;padding:0}

/* r13, preview only: Mark's three home clips (8 Nov 2026, "Videos for sections on homepage. Add them."), on the Partners/Acqua player
   (src/home-video.js). Each fills its picture frame as the still did; the still stays in <noscript>. The clips are portrait (9:16) and
   keep the camera still. The crop sits just below the top, as on Partners the top is kept: the stage lights stay in view, and in the
   squarer phone frames the couple's heads and shoulders and the stage floor's glow are not cut off (checked at 390 and 1440). */
.ph .frame video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 15%}
html:not(.js) .ph .frame video{display:none}