/* Cloud Nine theme. Loads after styles.css. The home is the engine's big photo page (desktop.css, desktopLayout
   "hero"): a deep plum field with the lava lamp blobs drifting behind it, cream type, orange buttons, Shrikhand
   for the big words and Baloo 2 for the rest, rounded everything. This file holds the fonts, the colours, the lava
   lamp, the 21 plus door and the inner page look. Chill, not grimy. */
@font-face{font-family:"Shrikhand";font-style:normal;font-weight:400;font-display:block;src:url("../assets/fonts/shrikhand-400.woff2") format("woff2")}
@font-face{font-family:"Baloo 2";font-style:normal;font-weight:600;font-display:block;src:url("../assets/fonts/baloo2-600.woff2") format("woff2")}
@font-face{font-family:"Baloo 2";font-style:normal;font-weight:800;font-display:block;src:url("../assets/fonts/baloo2-800.woff2") format("woff2")}

:root{
  --bg:#2a1b3d;
  --panel:#3a2752;
  --panel-2:#4a3266;
  --line:rgba(255,236,210,.18);
  --text:#fff1dc;
  --muted:#c9b6d9;
  --accent:#ff8c42;
  --accent-2:#e06f2a;
  --on-accent:#2a1b3d;
  --good:#2ec4b6;
  --good-2:#1fa196;
  --bad:#ff5d8f;
  --warn:#ffd166;
  --cream:#fff1dc;
  --orange:#ff8c42;
  --magenta:#d01d5b;
  --teal:#2ec4b6;
  --lime:#c3f73a;
  --purple:#7b2cbf;
  --plum:#2a1b3d;
  --radius:22px;
  --head-font:"Shrikhand",Georgia,serif;
  --body-font:"Baloo 2","Segoe UI",Arial,sans-serif;
  --head-weight:400;
  --head-transform:none;
  --head-spacing:.01em;
}
html{background:var(--plum)}
body{background:var(--plum)}
/* lava lamp: three blurred blobs drifting slowly, behind everything, on every page */
.lava{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;filter:blur(40px);opacity:.55}
.lava i{position:absolute;border-radius:50%;mix-blend-mode:screen}
.lava i:nth-child(1){width:52vmax;height:52vmax;left:-12vmax;top:-10vmax;background:radial-gradient(circle,#ff8c42 0%,rgba(255,140,66,0) 65%);animation:drift1 22s ease-in-out infinite alternate}
.lava i:nth-child(2){width:48vmax;height:48vmax;right:-14vmax;top:30vh;background:radial-gradient(circle,#e64980 0%,rgba(230,73,128,0) 65%);animation:drift2 27s ease-in-out infinite alternate}
.lava i:nth-child(3){width:46vmax;height:46vmax;left:20vw;bottom:-18vmax;background:radial-gradient(circle,#2ec4b6 0%,rgba(46,196,182,0) 65%);animation:drift3 31s ease-in-out infinite alternate}
@keyframes drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(18vw,22vh) scale(1.2)}}
@keyframes drift2{from{transform:translate(0,0) scale(1.1)}to{transform:translate(-22vw,-18vh) scale(.9)}}
@keyframes drift3{from{transform:translate(0,0) scale(1)}to{transform:translate(14vw,-26vh) scale(1.25)}}
@media(prefers-reduced-motion:reduce){.lava i{animation:none}}
.home-wrap,.page{position:relative;z-index:2}
/* the page sits over the lava with no paint of its own, so the blobs show through between the blocks; the hero, the
   bands and the panels are solid and sit on top */
body.home:has(.desk-hero-page),html.hero-site body:not(.home),html.hero-site body:not(.home) .page{background:transparent!important}
html{background:radial-gradient(ellipse at 50% 0%,#3d2a5c 0%,var(--plum) 60%) var(--plum)!important}   /* the plum on the canvas itself; the body is see through so the lava shows */

/* ---------- the 21 plus door ---------- */
body.age-locked{overflow:hidden}
.age-door{position:fixed;inset:0;z-index:600;background:rgba(42,27,61,.92);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:24px;transition:opacity .45s ease}
.age-door.open{opacity:0;pointer-events:none}
.age-box{width:100%;max-width:400px;text-align:center;background:var(--panel);border:3px solid var(--cream);border-radius:28px;padding:28px 22px 22px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.age-box img{width:90px;height:90px;border-radius:50%;margin:0 auto 10px;border:3px solid var(--orange)}
.age-box h1{font-family:var(--head-font);font-weight:400;font-size:2.4rem;color:var(--cream);line-height:1}
.age-box p{color:var(--text);font-size:1.05rem;line-height:1.4;margin:10px 0 16px}
.age-row{display:flex;flex-direction:column;gap:8px}
.age-row .btn{justify-content:center;padding:14px;font-size:1rem;border-radius:999px}
.age-row .btn.ghost{color:var(--muted);border-color:rgba(255,236,210,.25)}
.age-box small{display:block;margin-top:14px;color:var(--muted);font-size:.72rem;line-height:1.35}

/* ---------- The big photo home (every rule carries html.hero-site body so it outranks desktop.css, which loads last): Cloud Nine's own touches on the engine's page ---------- */
html.hero-site body .desk-hero-btn,html.hero-site body .desk-book,html.hero-site body .desk-bar,html.hero-site body .desk-tile,html.hero-site body .desk-deal,html.hero-site body .desk-hours-cta,html.hero-site body .desk-about-photo,html.hero-site body .desk-gal-it{border-radius:999px}
html.hero-site body .desk-tile,html.hero-site body .desk-hours-cta,html.hero-site body .desk-about-photo,html.hero-site body .desk-gal-it{border-radius:22px}
html.hero-site body .desk-deal{border-radius:18px}
html.hero-site body .desk-hero-btn{box-shadow:4px 4px 0 rgba(0,0,0,.3)}
html.hero-site body .desk-hero-btn.ghost{box-shadow:none}
html.hero-site body .desk-marq{background:var(--lime);color:var(--plum)}
html.hero-site body .desk-marq-track{font-family:"Baloo 2","Segoe UI",Arial,sans-serif;font-weight:800;letter-spacing:.08em}
html.hero-site body .desk-steps{background:var(--teal);color:var(--plum)}
html.hero-site body .desk-steps .desk-step::before{background:rgba(42,27,61,.45)}
html.hero-site body .desk-cta-band{background:var(--orange);color:var(--plum)}
html.hero-site body .desk-cta-text .desk-h2,html.hero-site body .desk-cta-text p{color:var(--plum)}
html.hero-site body .desk-cta-text li{border-color:rgba(42,27,61,.35)}
html.hero-site body .desk-cta-band .desk-hero-btn{background:var(--plum);color:var(--cream)}
html.hero-site body .desk-hero h1 .w.mark i,html.hero-site body .desk-more,html.hero-site body .desk-hours-big span,html.hero-site body .desk-point .n,html.hero-site body .desk-kicker,html.hero-site body .desk-deal-price{color:var(--orange)}
html.hero-site body .desk-hero-btn,html.hero-site body .desk-book,html.hero-site body .desk-more,html.hero-site body .desk-kicker,html.hero-site body .desk-list-cat,html.hero-site body .desk-hours-cta b{font-family:"Baloo 2","Segoe UI",Arial,sans-serif;font-weight:800;text-transform:none;letter-spacing:.02em}
html.hero-site body .desk-hero h1,html.hero-site body .desk-h2,html.hero-site body .desk-tile h3,html.hero-site body .desk-nav-links a,html.hero-site body .desk-hours-big{letter-spacing:.01em}
html.hero-site body .desk-faq-it summary{font-family:"Baloo 2","Segoe UI",Arial,sans-serif;font-weight:800}

/* ---------- Inner pages (every rule carries html.hero-site body so it outranks the wide screen rules in desktop.css, which loads last) (the engine keeps them on the plum field; these are Cloud Nine's shapes and colours) ---------- */
html.hero-site body .page-title{font-family:var(--head-font);font-weight:400;font-size:clamp(1.9rem,7vw,2.8rem);color:var(--orange);text-shadow:2px 2px 0 var(--magenta)}
html.hero-site body .seg{background:var(--panel);border-color:rgba(255,236,210,.18)}
html.hero-site body .seg a{font-family:var(--body-font);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:.78rem}
html.hero-site body .seg a.active{background:var(--orange);color:var(--plum)}
html.hero-site body .seg a.specials{color:var(--lime)}
html.hero-site body .seg a.specials.active{background:var(--lime);color:var(--plum)}
html.hero-site body .btn{border-radius:999px}
html.hero-site body .btn.primary{background:var(--orange);color:var(--plum);box-shadow:3px 3px 0 rgba(0,0,0,.3)}
html.hero-site body .btn.good{background:var(--teal);color:var(--plum)}
html.hero-site body .chip{background:var(--panel);border-radius:999px}
html.hero-site body .chip.active{background:var(--lime);color:var(--plum)}
html.hero-site body .chip.active b{color:inherit}   /* the count on the active chip takes the chip's own text colour (a11y check) */
html.hero-site body .chip b{color:var(--orange)}
html.hero-site body .card{background:var(--panel);border:2px solid rgba(255,236,210,.2);border-radius:20px;box-shadow:4px 4px 0 rgba(0,0,0,.25)}
html.hero-site body .card .img{background:#1f1330}
html.hero-site body .card .name{font-family:var(--head-font);font-weight:400;font-size:1.25rem;color:var(--cream)}
html.hero-site body .card .price{color:var(--lime);font-family:var(--body-font);font-weight:800;font-size:1.05rem}
html.hero-site body .card.featured{border-color:var(--orange);box-shadow:4px 4px 0 var(--orange)}
html.hero-site body .card.featured .name{color:var(--orange)}
html.hero-site body .feat-tag{background:var(--orange);color:var(--plum);letter-spacing:.1em;border-radius:999px}
html.hero-site body .cat-head{font-family:var(--head-font);font-weight:400;font-size:1.6rem;color:var(--cream);border-bottom:3px solid var(--magenta)}
html.hero-site body .badge{border-radius:999px}
html.hero-site body .badge.good{background:rgba(46,196,182,.12);color:var(--teal)}
html.hero-site body .badge.accent{background:rgba(255,140,66,.22);color:var(--orange)}
html.hero-site body .viewer .v-info{background:var(--panel)}
html.hero-site body .viewer .v-name{font-family:var(--head-font);font-weight:400;font-size:1.8rem;color:var(--cream)}
html.hero-site body .viewer .v-price{color:var(--lime)}
html.hero-site body .special{border-color:rgba(195,247,58,.5);background:var(--panel);border-radius:18px}
html.hero-site body .special-price{color:var(--lime);font-family:var(--body-font);font-weight:800}
html.hero-site body .post{background:var(--panel);border-radius:20px}
html.hero-site body .post.pinned{border-color:var(--orange)}
html.hero-site body .post h3{font-family:var(--head-font);font-weight:400;font-size:1.35rem;color:var(--cream)}
html.hero-site body .rich{background:var(--panel);border-radius:20px}
html.hero-site body .rich h1,html.hero-site body .rich h2,html.hero-site body .rich h3{font-family:var(--head-font);font-weight:400;color:var(--orange)}
html.hero-site body .rich h2{font-size:1.7rem}
html.hero-site body .rich a{color:var(--lime)}
html.hero-site body .letter{color:var(--orange);font-family:var(--head-font);font-weight:400;font-size:1.6rem}
html.hero-site body .modal{background:var(--panel);border:3px solid var(--cream);border-radius:24px}
html.hero-site body .modal h2{font-family:var(--head-font);font-weight:400;font-size:1.7rem;color:var(--cream)}
html.hero-site body .field input,html.hero-site body .field select,html.hero-site body .field textarea{border-radius:14px}
html.hero-site body .toast{background:var(--lime);color:var(--plum)}
html.hero-site body .gate{background:var(--plum)}
html.hero-site body .gate h1{font-family:var(--head-font);font-weight:400;color:var(--orange);font-size:2.6rem;text-shadow:2px 2px 0 var(--magenta)}
html.hero-site body .gate p{color:var(--muted)}
html.hero-site body .gate img{border:3px solid var(--cream)}
html.hero-site body .empty{background:rgba(58,39,82,.6);border-radius:20px}

/* hours and booking */
html.hero-site body .open-now{background:var(--panel);border:3px solid var(--cream);border-radius:999px;color:var(--cream);font-family:var(--head-font);font-weight:400;font-size:1.15rem;letter-spacing:.01em}
html.hero-site body .open-now.on{color:var(--lime);border-color:var(--lime)}
html.hero-site body .open-now.on i{background:var(--lime);box-shadow:0 0 0 4px rgba(195,247,58,.25)}
html.hero-site body .open-now.off i{background:var(--magenta)}
html.hero-site body .hours-list{background:var(--panel);border:2px solid rgba(255,236,210,.2);border-radius:20px}
html.hero-site body .hours-list li{border-color:rgba(255,236,210,.12)}
html.hero-site body .hours-list .d{font-family:var(--body-font);font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--cream)}
html.hero-site body .hours-list .t{color:var(--orange);font-family:var(--body-font);font-weight:800}
html.hero-site body .hours-list li.closed .t{color:var(--muted)}
html.hero-site body .hours-list li.today{background:rgba(255,140,66,.08)}
html.hero-site body .hours-list li.today .d,html.hero-site body .hours-list li.today .d::after{color:var(--lime)}
html.hero-site body .closures-head{font-family:var(--head-font);font-weight:400;font-size:1.2rem;text-transform:none;letter-spacing:.01em;color:var(--orange)}
html.hero-site body .big-cta{font-family:var(--head-font);font-weight:400;font-size:1.4rem;letter-spacing:.01em;border-radius:999px;box-shadow:5px 5px 0 rgba(0,0,0,.3)}
html.hero-site body .book-step{color:var(--cream);font-family:var(--head-font);font-weight:400;font-size:1.4rem;text-transform:none;letter-spacing:.01em}
html.hero-site body .step-n{background:var(--lime);color:var(--plum);font-family:var(--body-font);font-weight:800}
html.hero-site body .day-chip{background:var(--panel);border:2px solid rgba(255,236,210,.2);border-radius:18px}
html.hero-site body .day-chip .dom{font-family:var(--head-font);font-weight:400;font-size:1.5rem}
html.hero-site body .day-chip.active{background:var(--orange);color:var(--plum);border-color:var(--cream)}
html.hero-site body .day-chip.active .dow,html.hero-site body .day-chip.active .mon{color:var(--plum)}
html.hero-site body .slot{background:var(--panel);border:2px solid rgba(255,236,210,.2);border-radius:999px;font-family:var(--body-font);font-weight:800;color:var(--cream)}
html.hero-site body .slot.active{background:var(--teal);color:var(--plum);border-color:var(--cream)}
html.hero-site body .slot small{color:var(--orange)}
html.hero-site body .book-form{background:var(--panel);border:2px solid rgba(255,236,210,.2);border-radius:22px}
html.hero-site body .book-done{background:rgba(46,196,182,.15);border-color:var(--teal);border-radius:20px}
html.hero-site body .book-done .tick{background:var(--teal);color:var(--plum)}
html.hero-site body .req{background:var(--panel);border-radius:18px}
html.hero-site body .req-time{color:var(--orange);font-family:var(--body-font);font-weight:800}
html.hero-site body .req.confirmed{border-color:var(--teal)}
html.hero-site body .admin-box input{background:var(--panel);border-radius:999px}
html.hero-site body .dash-link{background:var(--panel);border-radius:18px}
html.hero-site body .dash-link b{font-family:var(--head-font);font-weight:400;font-size:1.25rem;color:var(--cream)}