:root{
    --gold:#f3b632;
    --gold-light:#ffe199;
    --ink:#fff;
    --muted:rgba(255,255,255,.76);
    --panel:rgba(12,10,10,.80);
    --line:rgba(255,255,255,.16);
    --shadow:0 18px 50px rgba(0,0,0,.38);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
body{background:#120d0a;color:var(--ink)}
a{color:inherit}
button,a{-webkit-tap-highlight-color:transparent}

.landing{
    min-height:100dvh;
    position:relative;
    isolation:isolate;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    padding:clamp(16px,2.5vw,36px);
}
.landing::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    background-position:center;
    background-size:cover;
}
.landing::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:
      radial-gradient(circle at 15% 85%,rgba(205,71,22,.22),transparent 28%),
      radial-gradient(circle at 85% 12%,rgba(250,194,69,.14),transparent 30%),
      linear-gradient(180deg,rgba(7,4,2,.14),rgba(7,4,2,.48));
}
.landing-desktop::before{background-image:url("../images/theater-desktop.jpg")}
.landing-mobile::before{background-image:url("../images/theater-mobile.jpg")}

.landing-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    width:min(1320px,100%);
    margin:0 auto;
}
.brand{
    display:inline-flex;
    align-items:center;
    gap:11px;
    text-decoration:none;
    color:var(--gold-light);
}
.brand-mark{width:46px;height:46px;display:grid;place-items:center}
.brand-mark svg{width:100%;height:100%}
.brand-text{display:flex;flex-direction:column;line-height:.98;text-transform:uppercase;letter-spacing:.11em;font-size:.78rem}
.brand-text strong{font-size:1.25rem;letter-spacing:.08em}

.header-actions{display:flex;align-items:center;gap:10px}
.login-link,.icon-button{
    min-height:44px;
    border:1px solid var(--line);
    border-radius:14px;
    background:rgba(8,7,7,.42);
    backdrop-filter:blur(14px);
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-decoration:none;
}
.login-link{padding:0 15px;font-weight:700}
.login-link svg,.icon-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.icon-button{width:46px;padding:0;cursor:pointer}

.menu-wrap{position:relative}
.site-menu{
    display:none;
    position:absolute;
    right:0;
    top:56px;
    width:min(310px,calc(100vw - 32px));
    padding:10px;
    border:1px solid var(--line);
    border-radius:18px;
    background:rgba(18,13,11,.97);
    box-shadow:var(--shadow);
    backdrop-filter:blur(22px);
    z-index:30;
}
.site-menu.open{display:grid}
.site-menu a{
    padding:12px 14px;
    border-radius:11px;
    color:#fff;
    text-decoration:none;
    font-weight:650;
}
.site-menu a:hover,.site-menu a:focus-visible{background:rgba(255,255,255,.09)}

.landing-main{
    width:min(1320px,100%);
    margin:auto;
    display:flex;
}
.hero-copy h1{
    margin:0;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(2.4rem,5vw,5.4rem);
    line-height:.98;
    letter-spacing:-.035em;
    text-shadow:0 4px 24px rgba(0,0,0,.6);
}
.eyebrow{
    margin:0 0 16px;
    color:var(--gold-light);
    text-transform:uppercase;
    letter-spacing:.15em;
    font-size:.78rem;
    font-weight:850;
}
.hero-subtitle{
    margin:18px 0 0;
    color:var(--gold-light);
    font-family:Georgia,"Times New Roman",serif;
    font-style:italic;
    font-size:clamp(1.15rem,2.1vw,1.8rem);
    text-shadow:0 3px 16px rgba(0,0,0,.65);
}
.desktop-main{
    align-items:center;
    justify-content:space-between;
    gap:clamp(42px,6vw,100px);
    padding:55px 0 35px;
}
.desktop-main .hero-copy{width:43%;max-width:610px}
.desktop-action-grid{
    width:52%;
    max-width:690px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}
.desktop-action-grid .action-continue{grid-column:1/-1;width:calc(50% - 8px);justify-self:center}

.action-card{
    min-height:112px;
    display:flex;
    align-items:center;
    gap:16px;
    padding:18px 20px;
    border:1px solid rgba(255,255,255,.24);
    border-radius:23px;
    text-decoration:none;
    box-shadow:0 12px 28px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.32);
    transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
    overflow:hidden;
    position:relative;
}
.action-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg,rgba(255,255,255,.07),transparent 38%);
    pointer-events:none;
}
.action-card:hover,.action-card:focus-visible{
    transform:translateY(-3px);
    filter:saturate(1.08) brightness(1.06);
    box-shadow:0 18px 36px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.36);
}
.action-icon{
    flex:0 0 52px;
    width:52px;height:52px;
    display:grid;place-items:center;
    border-radius:16px;
    background:rgba(255,255,255,.15);
}
.action-icon svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.action-copy{min-width:0;display:flex;flex-direction:column;gap:4px}
.action-copy strong{font-size:clamp(1.15rem,1.8vw,1.55rem);letter-spacing:-.015em}
.action-copy small{font-size:.9rem;color:rgba(255,255,255,.83);line-height:1.25}
.action-arrow{margin-left:auto;font-size:2.2rem;line-height:1;color:rgba(255,255,255,.8)}

.action-browse{background:linear-gradient(135deg,rgba(26,119,220,.94),rgba(16,61,149,.94))}
.action-help{background:linear-gradient(135deg,rgba(221,73,79,.96),rgba(136,35,89,.96))}
.action-surprise{background:linear-gradient(135deg,rgba(118,72,222,.96),rgba(61,58,165,.96))}
.action-new{background:linear-gradient(135deg,rgba(30,176,162,.96),rgba(16,116,139,.96))}
.action-continue{background:linear-gradient(135deg,rgba(221,101,39,.96),rgba(183,57,38,.96))}

.availability-note{
    width:min(1320px,100%);
    margin:0 auto;
    padding-top:18px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:9px;
    color:rgba(255,255,255,.74);
    font-size:.86rem;
    text-align:center;
}
.availability-note span{color:var(--gold)}

.landing-mobile{display:none}
.login-icon-only{width:46px;padding:0}

/* Placeholder destination pages */
.placeholder-page{
    min-height:100dvh;
    background:
      radial-gradient(circle at top left,rgba(180,72,22,.25),transparent 35%),
      linear-gradient(145deg,#1d130e,#080706 70%);
}
.placeholder-shell{
    min-height:100dvh;
    width:min(960px,calc(100% - 32px));
    margin:0 auto;
    padding:30px 0;
    display:flex;
    flex-direction:column;
    gap:clamp(55px,12vh,120px);
}
.placeholder-card{
    width:min(700px,100%);
    margin:0 auto;
    padding:clamp(30px,6vw,64px);
    border:1px solid var(--line);
    border-radius:28px;
    background:rgba(255,255,255,.06);
    box-shadow:var(--shadow);
    text-align:center;
}
.placeholder-card h1{
    margin:0 0 16px;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(2.3rem,7vw,4.5rem);
}
.placeholder-card p:not(.eyebrow){color:var(--muted);font-size:1.08rem;line-height:1.65}
.return-home{
    display:inline-flex;
    margin-top:18px;
    padding:13px 20px;
    border-radius:14px;
    background:linear-gradient(135deg,#f2bd4b,#b67819);
    color:#1b1208;
    font-weight:850;
    text-decoration:none;
}

/* Tablet: desktop presentation retained, but cards become one column */
@media (max-width:1050px) and (min-width:701px){
    .desktop-main{gap:35px}
    .desktop-main .hero-copy{width:42%}
    .desktop-action-grid{width:55%;grid-template-columns:1fr}
    .desktop-action-grid .action-continue{grid-column:auto;width:auto}
    .action-card{min-height:88px}
}

/* Mobile presentation */
@media (max-width:700px){
    .landing-desktop{display:none}
    .landing-mobile{display:flex;padding:18px 16px max(18px,env(safe-area-inset-bottom))}
    .landing-header{align-items:flex-start}
    .brand-mark{width:39px;height:39px}
    .brand-text{font-size:.66rem}
    .brand-text strong{font-size:1.05rem}
    .header-actions{gap:7px}
    .login-link,.icon-button{min-height:42px;border-radius:13px}
    .login-icon-only,.icon-button{width:42px}
    .mobile-main{
        flex:1;
        flex-direction:column;
        justify-content:center;
        gap:22px;
        padding:18px 0 10px;
    }
    .mobile-main .hero-copy{text-align:center;padding:0 6px}
    .hero-copy h1{font-size:clamp(2.15rem,10vw,3.15rem);line-height:1.02}
    .hero-subtitle{font-size:1.15rem;margin-top:11px}
    .mobile-action-stack{display:grid;gap:11px;width:100%}
    .action-card{
        min-height:76px;
        border-radius:19px;
        padding:12px 15px;
        gap:13px;
    }
    .action-icon{width:46px;height:46px;flex-basis:46px;border-radius:14px}
    .action-icon svg{width:32px;height:32px}
    .action-copy strong{font-size:1.14rem}
    .action-copy small{font-size:.78rem}
    .action-arrow{font-size:1.9rem}
    .availability-note{font-size:.74rem;padding-top:8px}
}
@media (max-height:740px) and (max-width:700px){
    .mobile-main{gap:12px;padding-top:8px}
    .hero-copy h1{font-size:2rem}
    .hero-subtitle{font-size:1rem}
    .mobile-action-stack{gap:8px}
    .action-card{min-height:65px;padding:9px 13px}
    .action-icon{width:40px;height:40px;flex-basis:40px}
    .action-icon svg{width:28px;height:28px}
    .action-copy strong{font-size:1.02rem}
    .availability-note{padding-top:4px}
}

/* FINAL landing page */
.brand{gap:13px} .brand-art{width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(0,0,0,.35))}
.brand-text span{color:#fff3cf} .brand-text strong{color:#f2c45b}
.landing-desktop::before{background-image:url("../images/theater-desktop.jpg");background-size:cover;background-position:center}
.landing-mobile::before{background-image:url("../images/theater-mobile.jpg");background-size:cover;background-position:center}
.landing::after{background:linear-gradient(180deg,rgba(7,4,2,.08),rgba(7,4,2,.25))}
.action-browse{background:linear-gradient(135deg,#082744,#031221)}
.action-mood{background:linear-gradient(135deg,#0b3e27,#041d12)}
.action-surprise{background:linear-gradient(135deg,#30173f,#170a21)}
.action-new{background:linear-gradient(135deg,#5b3706,#2f1b01)}
.action-continue{background:linear-gradient(135deg,#491416,#26090a)}
.action-card{
 border-radius:0;
 -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201000%20300%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%221000%22%20height%3D%22300%22%20rx%3D%2236%22%20fill%3D%22white%22/%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22150%22%20r%3D%2242%22%20fill%3D%22black%22/%3E%3Ccircle%20cx%3D%221000%22%20cy%3D%22150%22%20r%3D%2242%22%20fill%3D%22black%22/%3E%3C/svg%3E");
 mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201000%20300%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20width%3D%221000%22%20height%3D%22300%22%20rx%3D%2236%22%20fill%3D%22white%22/%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22150%22%20r%3D%2242%22%20fill%3D%22black%22/%3E%3Ccircle%20cx%3D%221000%22%20cy%3D%22150%22%20r%3D%2242%22%20fill%3D%22black%22/%3E%3C/svg%3E");
 -webkit-mask-size:100% 100%;mask-size:100% 100%;
 -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
 min-height:72px;padding:9px 16px;
}
.action-icon{flex-basis:36px;width:36px;height:36px;border-radius:10px;background:rgba(0,0,0,.12)}
.action-icon svg{width:32px;height:32px}
.action-copy strong{font-family:Georgia,"Times New Roman",serif;font-size:1rem;line-height:1.05}
.action-copy small{font-size:.72rem;line-height:1.15}
.action-arrow{font-size:1.65rem}
.desktop-main{align-items:flex-start;padding-top:clamp(130px,15vh,175px);padding-bottom:30px}
.desktop-main .hero-copy{width:44%;padding-top:0}
.desktop-action-grid{width:50%;max-width:650px;gap:12px;align-self:flex-start;margin-top:48px}
.desktop-action-grid .action-continue{width:50%}
@media(max-width:1050px) and (min-width:701px){
 .desktop-action-grid{width:53%;max-width:600px}
 .action-copy strong{font-size:.96rem}
}
@media(max-width:700px){
 .brand-art{width:50px;height:50px} .brand-text{display:none}
 .mobile-main{gap:22px;padding-top:35px}
 .mobile-action-stack{width:84%;max-width:500px;margin-inline:auto;gap:9px}
 .action-card{min-height:60px;padding:7px 13px;gap:10px}
 .action-icon{flex-basis:32px;width:32px;height:32px} .action-icon svg{width:29px;height:29px}
 .action-copy strong{font-size:.94rem} .action-copy small{font-size:.68rem}
 .hero-copy h1{font-size:clamp(2rem,9vw,2.8rem)} .hero-subtitle{font-size:1.05rem}
}
@media(max-height:740px) and (max-width:700px){
 .mobile-action-stack{width:82%;gap:7px} .action-card{min-height:54px;padding:6px 12px}
 .action-copy small{display:none}
}

/* SC landing artwork-aware header refinement — 2026-08-17 */

/* Give the branding a darker pocket and keep it clear of the lamp glow. */
.landing-header {
    padding-left: clamp(18px, 3.1vw, 46px);
    padding-right: clamp(18px, 4vw, 64px);
}
.landing-header .brand,
.landing-header .site-logo,
.landing-header .logo {
    transform: translateY(5px);
}

/* Member controls sit below the scripted "Enjoy" rather than on top of it. */
.landing-desktop .header-actions {
    transform: translateY(42px);
    gap: 10px;
}

/* Admin is a private backstage door, not part of the public header composition. */
.landing-admin-shortcut {
    position: absolute;
    right: clamp(18px, 3vw, 46px);
    bottom: 18px;
    z-index: 8;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 10px;
    background: rgba(10,8,7,.62);
    color: rgba(255,255,255,.78);
    text-decoration: none;
    font-size: .78rem;
    font-weight: 700;
    backdrop-filter: blur(4px);
}
.landing-admin-shortcut:hover {
    background: rgba(10,8,7,.82);
    color: #fff;
}
.landing-admin-shortcut svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

/* Mobile keeps its normal member controls compact; Admin stays low. */
.landing-mobile .header-actions {
    transform: none;
}
.landing-mobile .landing-admin-shortcut {
    right: 14px;
    bottom: 12px;
    padding: 6px 9px;
}

/* SC desktop hamburger menu layering fix — 2026-09-17
   Keep the existing menu design/positioning, but make the opened menu
   the foreground navigation layer above the home action cards.
   Mobile behavior is intentionally unchanged. */
@media (min-width: 701px) {
    .landing-desktop .landing-header {
        position: relative;
        z-index: 100;
    }

    .landing-desktop .site-menu {
        z-index: 110;
    }
}