/* ==========================================================================
   Two Bit Game Room — mockup v2
   One theme only: body.retro (warm print). The Brand and Neon
   directions were retired in v3.2 and their rules removed.
   Brand colors are the exact hex values from the brand guide.
   ========================================================================== */
:root{
  --black2:#332F21;   /* Pantone Black 2  */
  --red:#BE3A34;      /* Pantone 180C     */
  --yellow:#F2C75C;   /* Pantone 141C     */
  --teal:#34A798;     /* Pantone 2401C    */
  --blue:#006EB3;     /* Pantone 3553     */
  --stone:#585448;    /* stripe gray from the bar artwork */
  --black6:#111418;
  --white:#FFFFFF;
  --maxw:1200px;
}

/* ---------- Direction 3: BRAND GUIDE (default) ---------- */

/* ---------- Direction 1: NEON NIGHT ---------- */

/* ---------- Direction 2: RETRO PRINT ---------- */
body.retro{
  --bg:#F3EAD7; --bg-2:#E9DCC0; --card:#FFFAF0; --line:rgba(51,47,33,.18);
  --text:#2A261B; --muted:#6B634F;
  --accent:var(--red); --accent-2:var(--teal); --accent-3:var(--yellow); --accent-4:var(--blue);
  --dark:#332F21; --dark-2:#3D3828; --on-dark:#FFFAF0; --on-dark-muted:#E3D8BF;
  --font-head:'Alfa Slab One', Georgia, serif;
  --font-body:'Work Sans', system-ui, sans-serif;
  --head-case:none; --head-track:0; --radius:6px;
  --glow:none;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:17px;line-height:1.65;overflow-x:hidden}
img,video,iframe{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--font-head);font-weight:400;text-transform:var(--head-case);letter-spacing:var(--head-track);line-height:1.08}
h2{font-size:clamp(1.9rem,4.4vw,3.2rem)}
h3{font-size:1.15rem;line-height:1.25}

p+p{margin-top:14px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.narrow{max-width:860px}
section{padding:96px 0;position:relative}
.eyebrow{display:block;font:700 .78rem/1.3 var(--font-body);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-2);margin-bottom:14px}
.lede{font-size:1.15rem;color:var(--muted);max-width:680px;margin-top:16px}
.center{text-align:center}.center .lede{margin-left:auto;margin-right:auto}
.dark{background:var(--dark);color:var(--on-dark)}
.dark .lede,.dark .muted{color:var(--on-dark-muted)}
.alt{background:var(--bg-2)}
.glow{text-shadow:var(--glow)}

@keyframes flicker{0%,19%,23%,54%,58%,100%{opacity:1}21%,56%{opacity:.6}}

/* ---------- COLOR BARS (brand element) ---------- */
.bars{height:26px;background:linear-gradient(to bottom,
  var(--teal) 0 14%,transparent 14% 21.5%,var(--stone) 21.5% 35.5%,transparent 35.5% 43%,
  var(--red) 43% 57%,transparent 57% 64.5%,var(--yellow) 64.5% 78.5%,transparent 78.5% 86%,var(--blue) 86% 100%);background-color:var(--dark)}
.bars.thin{height:14px}

.bars-v{position:absolute;top:0;bottom:0;width:78px;background:linear-gradient(to right,
  var(--teal) 0 14%,transparent 14% 21.5%,var(--stone) 21.5% 35.5%,transparent 35.5% 43%,
  var(--red) 43% 57%,transparent 57% 64.5%,var(--yellow) 64.5% 78.5%,transparent 78.5% 86%,var(--blue) 86% 100%);opacity:.9}
.perspective{position:absolute;top:0;bottom:0;right:-8%;width:62%;z-index:0;pointer-events:none;opacity:.55;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 45%);mask-image:linear-gradient(to right,transparent 0%,#000 45%)}
.book .perspective{right:auto;left:-12%;width:60%;opacity:.35;-webkit-mask-image:linear-gradient(to left,transparent 0%,#000 55%);mask-image:linear-gradient(to left,transparent 0%,#000 55%)}
.perspective svg{width:100%;height:100%}

body.retro .perspective{opacity:.4}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;border:2px solid transparent;font:700 1rem var(--font-body);text-decoration:none;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{box-shadow:0 8px 24px rgba(190,58,52,.35)}

.btn-ghost{border-color:currentColor;background:transparent;color:inherit}
.btn-teal{background:var(--teal);color:#fff}
body.retro .btn{border-radius:4px;box-shadow:4px 4px 0 var(--black2)}
body.retro .btn-ghost{background:var(--card);color:var(--text)}
.btn-sm{padding:10px 18px;font-size:.9rem}

/* ---------- HEADER ---------- */
header.site{position:fixed;inset:0 0 auto 0;z-index:60;padding:14px 0;transition:background .3s,padding .3s,box-shadow .3s}
header.site.solid,header.site.scrolled{background:color-mix(in srgb,var(--dark) 94%,transparent);backdrop-filter:blur(10px);padding:8px 0;box-shadow:0 1px 0 rgba(255,255,255,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brandmark img{width:72px;height:72px;transition:width .3s,height .3s;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
header.scrolled .brandmark img,header.solid .brandmark img{width:52px;height:52px}
.nav ul{display:flex;gap:26px;list-style:none}
.nav ul a{color:#fff;text-decoration:none;font-weight:600;font-size:.95rem;opacity:.92}
.nav ul a:hover,.nav ul a[aria-current]{color:var(--yellow);opacity:1}
.menu-btn{display:none;background:none;border:0;color:#fff;font-size:1.9rem;cursor:pointer}

/* ---------- HERO ---------- */
.hero{min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;padding:130px 0 70px;color:#fff;overflow:hidden}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,18,12,.6) 0%,rgba(20,18,12,.12) 38%,rgba(20,18,12,.9) 100%)}
.hero h1 .big{max-width:14ch}
.hero h1 .kicker{display:block;font:700 .82rem/1.4 var(--font-body);letter-spacing:.18em;text-transform:uppercase;color:var(--yellow);margin-bottom:16px;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.hero h1 .big{display:block;font-size:clamp(2.6rem,7.5vw,6rem)}
.hero p.sub{max-width:600px;font-size:clamp(1.05rem,1.8vw,1.3rem);margin:20px 0 28px;color:rgba(255,255,255,.9)}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero .ctas .btn-ghost{color:#fff}
.infoline{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.92rem;color:rgba(255,255,255,.88)}
.infoline b{color:#fff}
.price-tag{position:absolute;right:6%;bottom:140px;width:160px;height:160px;border-radius:50%;display:grid;place-content:center;text-align:center;background:var(--yellow);color:var(--black2);font-weight:700;line-height:1.15;transform:rotate(-8deg);border:4px solid var(--black2);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.price-tag b{font-family:var(--font-head);font-size:2.7rem;display:block;line-height:1}

.pause-btn{position:absolute;left:20px;bottom:18px;z-index:2;background:rgba(0,0,0,.55);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:8px 14px;font:600 .8rem var(--font-body);cursor:pointer}

/* ---------- AS SEEN ON ---------- */
.seen{background:var(--dark-2);color:var(--on-dark);padding:22px 0}
.seen .wrap{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 38px}
.seen span.lbl{font:700 .72rem var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-muted)}
.seen a{font:800 1.05rem var(--font-body);text-decoration:none;letter-spacing:.04em;opacity:.9}
.seen a:hover{color:var(--yellow)}

/* ---------- STATS ---------- */
.stats{padding:0;background:var(--bg-2)}
.stats .grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:40px 18px;text-align:center;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--font-head);font-size:clamp(2rem,3.6vw,3rem);line-height:1}
.stat:nth-child(1) b{color:var(--accent)}.stat:nth-child(2) b{color:var(--accent-2)}.stat:nth-child(3) b{color:#C89A2B}.stat:nth-child(4) b{color:var(--accent-4)}

.stat span{color:var(--muted);font-size:.95rem}

/* ---------- SPLIT / INTRO ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.stack{position:relative;aspect-ratio:1/1}
.stack figure{position:absolute;margin:0}
.stack figure:nth-child(1){width:78%;height:68%;top:0;right:0}
.stack figure:nth-child(2){width:58%;height:50%;bottom:0;left:0}
.stack figure img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius);box-shadow:0 24px 50px rgba(0,0,0,.28)}
.stack figure:nth-child(2) img{border:6px solid var(--bg)}
.pill-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.pill-list span{padding:7px 14px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:.88rem;font-weight:600}
.callout{margin-top:26px;padding:18px 20px;border-left:5px solid var(--teal);background:var(--card);border-radius:0 var(--radius) var(--radius) 0}
.callout strong{display:block;margin-bottom:4px}

/* ---------- PLACEHOLDER PHOTO TAG ---------- */
.ph{position:relative}
.ph .tag{position:absolute;left:10px;top:10px;z-index:3;max-width:calc(100% - 20px);background:rgba(17,20,24,.86);color:#fff;border:1px dashed var(--yellow);border-radius:8px;padding:6px 10px;font:600 .72rem/1.35 var(--font-body)}
.ph .tag::before{content:"PLACEHOLDER · ";color:var(--yellow);font-weight:800;letter-spacing:.06em}

/* ---------- STEPS ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.step .num{font-family:var(--font-head);font-size:2.4rem;color:var(--accent);line-height:1}
.step h3{margin:12px 0 6px}
.step p{color:var(--muted)}
body.retro .step{border:2px solid var(--black2);box-shadow:5px 5px 0 var(--black2)}

/* ---------- PHOTO GRID (replaces sideways scroller) ---------- */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:230px;gap:14px;margin-top:40px}
.pgrid figure{margin:0;border-radius:var(--radius);overflow:hidden;position:relative}
.pgrid figure.w2{grid-column:span 2}.pgrid figure.h2{grid-row:span 2}
.pgrid img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 6s ease}
.pgrid figure.in-view img{transform:scale(1.09)}
.pgrid figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 14px;background:linear-gradient(transparent,rgba(0,0,0,.8));color:#fff;font-weight:700;font-size:.95rem}
body.retro .pgrid figure{border:3px solid var(--black2)}

/* ---------- GAMES ---------- */
.games-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px;margin-top:30px}
.game{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;transition:transform .2s,box-shadow .2s}
.game:hover{transform:translateY(-5px);box-shadow:0 14px 30px rgba(0,0,0,.18)}

.game .img{aspect-ratio:3/4;background:#fff;display:grid;place-items:center}
.game .img img{width:100%;height:100%;object-fit:contain}
.game .meta{padding:12px 14px 14px;display:flex;flex-direction:column;gap:2px;flex:1}
.game .meta b{font-size:.98rem;line-height:1.25}
.game .meta small{color:var(--muted);font-size:.8rem}
.game .rent{margin-top:auto;padding-top:8px;font-size:.76rem;font-weight:700;color:var(--accent-2)}
.game .rent.only{color:var(--accent)}
.badge{position:absolute;top:10px;left:10px;z-index:2;display:flex;align-items:center;gap:5px;background:var(--black2);color:#fff;border-radius:999px;padding:4px 9px 4px 4px;font:700 .64rem var(--font-body);letter-spacing:.06em;text-transform:uppercase}
.badge img{width:18px;height:18px}
body.retro .game{border:2px solid var(--black2)}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:28px}
.chip{padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--text);font:600 .88rem var(--font-body);cursor:pointer}
.chip.on{background:var(--black2);border-color:var(--black2);color:#fff}

.filters select,.filters input{padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--text);font:500 .9rem var(--font-body)}
.filters input{min-width:220px}
.count{margin-top:18px;color:var(--muted);font-size:.9rem}
.note{margin-top:22px;font-size:.88rem;color:var(--muted);border:1px dashed var(--line);border-radius:12px;padding:12px 16px}

/* ---------- VIDEO ---------- */
.video{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#000;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video.placeholder{display:grid;place-content:center;text-align:center;color:#fff;background:repeating-linear-gradient(135deg,#1c1a14 0 14px,#24211a 14px 28px);padding:20px}
.video.placeholder b{font-family:var(--font-head);font-size:1.3rem;display:block;margin-bottom:6px}
.feature-video{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center}

/* ---------- CARDS ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.card h3{margin:10px 0 8px}
.card p{color:var(--muted)}
.card .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--teal) 16%,transparent);color:var(--teal);font-weight:800}
body.retro .card{border:2px solid var(--black2)}

/* ---------- PANELS ---------- */
.panels{display:grid;grid-template-columns:1.2fr .8fr;gap:22px}
.panel{position:relative;border-radius:var(--radius);overflow:hidden;min-height:540px;display:flex;align-items:flex-end;color:#fff;padding:34px}
.panel>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%}
.panel::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 25%,rgba(0,0,0,.88) 78%)}
.panel>div{position:relative;z-index:2;max-width:560px}
.panel h3{font-family:var(--font-head);font-size:clamp(1.5rem,3vw,2.2rem);text-transform:var(--head-case);font-weight:400;margin-bottom:10px;line-height:1.1}
.panel .titles{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.panel .titles span{font-size:.75rem;font-weight:700;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25)}
.panel .btn{margin-top:14px}
.jonesy-strip{position:absolute;right:18px;top:18px;z-index:3;width:120px;height:120px;border-radius:50%;overflow:hidden;border:4px solid var(--yellow)}
.jonesy-strip img{width:100%;height:100%;object-fit:cover}

/* ---------- PRICE CARD ---------- */
.price-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;margin:26px 0}
.price-card .big{font-family:var(--font-head);font-size:3rem;color:var(--accent);line-height:1}
.price-card ul{list-style:none;margin-top:14px;display:grid;gap:8px}
.price-card li{padding-left:18px;position:relative}
.price-card li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:2px;background:var(--teal)}
body.retro .price-card{border:2px solid var(--black2)}
.dark .price-card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}

/* ---------- BOOKING ---------- */
.book{overflow:hidden}
.book .wrap{position:relative;z-index:1}
.book-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px}
.hours{margin-top:26px;border-top:1px solid rgba(255,255,255,.14)}
.hours div{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.14)}
form.form{background:var(--card);color:var(--text);border-radius:var(--radius);padding:32px;display:grid;grid-template-columns:1fr 1fr;gap:16px;box-shadow:0 30px 70px rgba(0,0,0,.35)}

body.retro form.form{border:3px solid var(--black2);box-shadow:10px 10px 0 var(--teal)}
form.form .full{grid-column:1/-1}
form.form label{display:block;font-size:.82rem;font-weight:700;margin-bottom:6px}
form.form input,form.form select,form.form textarea{width:100%;padding:12px 13px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit;font-size:1rem}
form.form input:focus,form.form select:focus,form.form textarea:focus{outline:2px solid var(--teal);outline-offset:1px}
.form-ok{display:none;grid-column:1/-1;padding:14px;border-radius:10px;background:color-mix(in srgb,var(--teal) 18%,transparent)}
.rules{margin-top:28px}
.rules .friendly{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin:10px 0 18px;list-style:none;counter-reset:r}
.rules .friendly li{counter-increment:r;font-weight:700}
.rules .friendly li::before{content:counter(r) ". ";color:var(--yellow)}
.fine{font-size:.88rem;list-style:disc;padding-left:18px;display:grid;gap:4px}
.fine-title{font:800 .74rem var(--font-body);letter-spacing:.16em;text-transform:uppercase;margin-top:6px}
.dark .fine{color:var(--on-dark-muted)}

/* ---------- FAQ ---------- */
.faq-list{display:grid;gap:12px;margin-top:30px}
details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:0 22px}
body.retro details{border:2px solid var(--black2);border-radius:4px}
summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:700;display:flex;justify-content:space-between;gap:20px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--accent);font-size:1.4rem;line-height:1;transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{padding-bottom:18px;color:var(--muted)}
.faq-full h2{font-size:clamp(1.5rem,3vw,2.2rem);margin:56px 0 10px;padding-top:10px}
.faq-full article{padding:22px 0;border-bottom:1px solid var(--line)}
.faq-full article h3{font-size:1.15rem;margin-bottom:8px}
.faq-full article p{color:var(--muted)}
.jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.jump a{padding:9px 16px;border-radius:999px;background:var(--card);border:1px solid var(--line);text-decoration:none;font-weight:600;font-size:.9rem}
.draft{display:inline-block;margin-left:8px;vertical-align:middle;font:800 .62rem var(--font-body);letter-spacing:.1em;text-transform:uppercase;background:var(--yellow);color:var(--black2);padding:3px 8px;border-radius:999px}

/* ---------- NEWS ---------- */
.news-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:40px}
.news-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.news-card .body{padding:22px 24px 26px}
.news-card .outlet{font:800 .74rem var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2)}
.news-card h3{margin:6px 0 8px}
.news-card p{color:var(--muted);font-size:.96rem}
.news-card .video{border-radius:0;box-shadow:none}
.links-list{list-style:none;display:grid;gap:12px;margin-top:22px}
.links-list li{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.links-list .outlet{font:800 .72rem var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);display:block}

/* ---------- PAGE HERO (inner pages) ---------- */
.page-hero{padding:170px 0 80px;background:var(--dark);color:var(--on-dark);overflow:hidden}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{font-size:clamp(2.2rem,6vw,4.4rem)}
.page-hero h1 .kicker{display:block;font:700 .8rem var(--font-body);letter-spacing:.18em;text-transform:uppercase;color:var(--yellow);margin-bottom:14px}
.page-hero .lede{color:var(--on-dark-muted)}

/* ---------- VISIT ---------- */
.visit-grid{display:grid;grid-template-columns:1fr 1fr;min-height:520px}
.visit-img{position:relative}
.visit-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.visit-info{padding:72px 56px;background:var(--red);color:#fff}

.visit-info h2{margin-bottom:20px}
.visit-info p{margin-bottom:14px}
.visit-info a{font-weight:700}

/* ---------- FOOTER ---------- */
footer.site{background:var(--dark);color:var(--on-dark-muted);padding:56px 0 110px;font-size:.92rem}
.foot{display:grid;grid-template-columns:auto 1fr auto;gap:36px;align-items:start}
.foot img{width:92px}
.foot nav{display:grid;grid-template-columns:repeat(3,auto);gap:8px 30px;justify-content:start}
.foot a{text-decoration:none}.foot a:hover{color:var(--yellow)}
.est{font-family:var(--font-head);letter-spacing:.2em;color:var(--on-dark);font-size:1.1rem}
.rma{display:block;margin-top:10px;color:var(--yellow)!important;font-weight:700}

/* ---------- MOBILE BOOK BAR ---------- */
.mbar{display:none}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}*{animation:none!important;transition:none!important}}

/* ---------- MOCKUP-ONLY SWITCHER ---------- */
.switcher{position:fixed;right:16px;bottom:16px;z-index:100;display:flex;align-items:center;gap:3px;background:#111;color:#fff;border-radius:999px;padding:5px;font:600 .8rem 'Montserrat',sans-serif;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.switcher span{padding:0 8px 0 10px;opacity:.6}
.switcher button{border:0;border-radius:999px;background:transparent;color:#fff;padding:8px 13px;font:inherit;cursor:pointer}
.switcher button.on{background:#fff;color:#111}

/* ---------- RESPONSIVE ---------- */
@media (max-width:960px){
  section{padding:72px 0}
  .nav ul,.nav>.btn{display:none}
  .menu-btn{display:block}
  .nav.open ul{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--dark);padding:22px 24px;gap:16px}
  .stats .grid{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .split,.book-grid,.visit-grid,.panels,.feature-video{grid-template-columns:1fr}
  .steps,.cards,.news-grid{grid-template-columns:1fr}
  .pgrid{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
  .pgrid figure.w2{grid-column:span 2}
  .price-tag{display:none}
  .perspective,.book .perspective{opacity:.22;width:100%;left:0;right:0}
  form.form{grid-template-columns:1fr;padding:22px}
  .rules .friendly{grid-template-columns:1fr}
  .visit-info{padding:56px 22px}.visit-img{min-height:300px}
  .games{grid-template-columns:repeat(2,1fr);gap:12px}
  .foot{grid-template-columns:1fr}.foot nav{grid-template-columns:repeat(2,auto)}
  .mbar{display:grid;grid-template-columns:1.4fr 1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--dark);border-top:1px solid rgba(255,255,255,.12);padding:8px 10px calc(8px + env(safe-area-inset-bottom));gap:8px}
  .mbar a{display:flex;justify-content:center;align-items:center;padding:12px 8px;border-radius:10px;text-decoration:none;font-weight:700;font-size:.9rem;color:#fff;background:rgba(255,255,255,.1)}
  .mbar a.primary{background:var(--red)}
  .switcher{bottom:78px;right:10px}
  .filters input{min-width:0;flex:1 1 100%}
}
body .panel h3{font-family:var(--font-head);font-weight:400;text-transform:var(--head-case);font-size:clamp(1.5rem,3vw,2.2rem);letter-spacing:var(--head-track)}

/* ---------- v2.1 fixes ---------- */
/* 1. Home page: logo twice as large until the visitor scrolls */
header.site.home:not(.scrolled) .brandmark img{width:144px;height:144px}
body .hero{padding-top:200px}
@media (max-width:960px){header.site.home:not(.scrolled) .brandmark img{width:104px;height:104px}body .hero{padding-top:150px}}

/* 2. Button/link contrast */
body.retro .btn-ghost{background:var(--card);color:var(--text)!important;border-color:var(--black2)}
.page-hero .jump a{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.3);color:var(--on-dark)}
.page-hero .jump a:hover{background:var(--yellow);border-color:var(--yellow);color:var(--black2)}

/* 4. Text-message disclaimer under phone fields */
.sms-note{font-size:.84rem;line-height:1.5;color:var(--muted);margin-top:-6px}

/* 6. House rules / fine print: full-size, full-contrast text */
.fine{font-size:1rem;gap:8px}
.dark .fine{color:var(--on-dark)}
.fine li{font-weight:500}
.fine-title{font-size:.8rem;color:var(--yellow)}
body.retro .fine-title{color:var(--yellow)}
/* keep the stripe art away from the text column in booking sections */
.book .perspective{left:auto;right:-10%;width:58%;opacity:.4;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 50%);mask-image:linear-gradient(to right,transparent 0%,#000 50%)}
@media (max-width:960px){.book .perspective{opacity:.15;width:100%;right:0}}
/* form helper text sits on a light card, even inside dark sections */
form.form .muted,.dark form.form .muted{color:var(--muted)}
/* start-time picker: hour / minutes / a.m.-p.m. */
.timepick{border:0;display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
.timepick legend{font-size:.82rem;font-weight:700;margin-bottom:6px;padding:0}
form.form .timepick select{width:auto;min-width:84px}
.timepick span{font-weight:700;padding-bottom:12px}
.field-note{font-size:.84rem;color:var(--muted);margin-top:6px}
.price-tag{font-size:.92rem}

/* ---------- v3 ---------- */
/* hours + address moved out of the hero into their own strip */
.visitbar{background:var(--bg-2);border-bottom:1px solid var(--line);padding:20px 0}
.visitbar .wrap{display:grid;grid-template-columns:1fr 1.6fr 1fr;gap:18px 32px;align-items:center}
.visitbar .lbl{display:block;font:800 .72rem var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2);margin-bottom:2px}
.visitbar .hrs{display:flex;flex-wrap:wrap;gap:4px 22px;justify-content:center}
.visitbar a{text-decoration:none}.visitbar a:hover b{color:var(--accent)}
.visitbar .wrap>div:last-child{text-align:right}
/* games teaser photo */
.floor-photo{margin:0;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;box-shadow:0 24px 50px rgba(0,0,0,.28)}
.floor-photo img{width:100%;height:100%;object-fit:cover}
body.retro .floor-photo{border:3px solid var(--black2)}
@media (max-width:960px){
  .visitbar .wrap{grid-template-columns:1fr;text-align:center}
  .visitbar .wrap>div:last-child{text-align:center}
  .visitbar .hrs{flex-direction:column;align-items:center}
}
.visitbar .hrs{flex-direction:column;align-items:center;gap:2px}
/* v3.1 hero: shorter, content sits higher, clear of the pause button and $18 badge */
body .hero{min-height:0;height:auto;padding:190px 0 120px}
@supports (height:1svh){body .hero{min-height:min(78svh,760px)}}
.hero .wrap{width:100%}
.hero .wrap>*{max-width:min(640px,62%)}
.hero h1 .big{font-size:clamp(2.6rem,5.6vw,5rem);max-width:none}
.price-tag{top:auto;bottom:120px;right:max(24px,6%)}
.pause-btn{bottom:24px}
@media (max-width:960px){
  body .hero{padding:140px 0 96px;min-height:0}
  .hero .wrap>*{max-width:100%}
}
.hero .wrap>h1{max-width:none}
.hero h1 .big{max-width:min(760px,64vw)}
@media (max-width:960px){.hero h1 .big{max-width:100%}}
/* v3.2 translucent panel behind hero text for contrast */
.hero .wrap>*{max-width:none}
.hero-panel{display:inline-block;max-width:min(720px,66%);background:rgba(20,18,12,.66);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:30px 34px 32px}
body.retro .hero-panel{background:rgba(51,47,33,.78);border:2px solid rgba(255,250,240,.25)}
.hero-panel p.sub{margin:16px 0 24px;color:#fff}
.hero-panel h1 .kicker{text-shadow:none}
.hero h1 .big{max-width:none}
/* visit strip: hours under "Open by appointment", address on the right */
.visitbar .wrap{grid-template-columns:1fr 1fr}
.visitbar .hrs{align-items:flex-start;justify-content:flex-start}
@media (max-width:960px){
  .hero-panel{max-width:100%;padding:22px 20px 24px}
  .visitbar .wrap{grid-template-columns:1fr}
  .visitbar .hrs{align-items:center}
}
.hero .wrap>.hero-panel{max-width:min(720px,66%)}
@media (max-width:960px){.hero .wrap>.hero-panel{max-width:100%}}
/* v3.3 hours on one line */
.visitbar .wrap{grid-template-columns:1fr auto}
.hrs-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:1rem}
.hrs-line b{font-weight:800}
.hrs-line .sep{color:var(--muted);opacity:.7}
@media (max-width:960px){
  .visitbar .wrap{grid-template-columns:1fr}
  .hrs-line{flex-direction:column;align-items:center;gap:2px}
  .hrs-line .sep{display:none}
}
@media (min-width:961px) and (max-width:1200px){
  .visitbar .wrap{grid-template-columns:1fr;gap:10px}
  .visitbar .wrap>div:last-child{text-align:left}
}
.steps-title{margin-top:80px;font-size:clamp(1.6rem,3.2vw,2.4rem)}
.steps-title+.steps{margin-top:26px}

/* ---------- v3.4 ---------- */
/* hours inside the hero panel */
.hero-hours{margin:-6px 0 24px;padding:12px 16px;border-left:4px solid var(--yellow);background:rgba(0,0,0,.25);border-radius:0 10px 10px 0;line-height:1.7;color:#fff;font-size:.98rem}
.hero-hours b:first-child{color:var(--yellow)}
body .hero{padding:170px 0 100px}

/* brand-color section backgrounds (Brand Guide + Retro directions) */
body:not(.neon) .seen{background:var(--blue);color:#fff}
body:not(.neon) .seen span.lbl{color:rgba(255,255,255,.8)}
body:not(.neon) .seen a:hover{color:var(--yellow)}

body:not(.neon) .book{background:var(--teal);color:var(--black2)}
body:not(.neon) .book .perspective{display:none}
body:not(.neon) .book .lede,body:not(.neon) .book .fine{color:var(--black2)}
body:not(.neon) .book .eyebrow{color:var(--black2);opacity:.8}
body:not(.neon) .book .glow{color:#fff;text-shadow:none}
body:not(.neon) .book .fine-title{color:var(--black2)}
body:not(.neon) .book .hours{border-top-color:rgba(51,47,33,.25)}
body:not(.neon) .book .hours div{border-bottom-color:rgba(51,47,33,.25)}
body:not(.neon) .book a{color:var(--black2)}

/* oversized logo as a background design element */
.book::before{content:"";position:absolute;z-index:0;left:-140px;bottom:-160px;width:620px;height:620px;
  background:url(../assets/logo.png) center/contain no-repeat;filter:brightness(0) invert(1);opacity:.1;pointer-events:none}

.stats{position:relative;overflow:hidden}
@media (max-width:960px){.book::before{width:380px;height:380px;left:-120px;bottom:-120px}}
.book::before{width:760px;height:760px;left:-200px;bottom:-220px;opacity:.14}
/* confirmation page */
.thanks-list{margin-top:14px;padding-left:22px;display:grid;gap:12px;font-size:1.05rem}
.thanks-list li::marker{color:var(--red)}
/* required-field markers */
.req{color:var(--red);font-weight:800;margin-left:3px}
.req-note{font-size:.82rem;color:var(--muted);margin:-4px 0 -4px}
.req-note .req{margin:0 2px 0 0}
select:invalid{color:var(--muted)}
/* spam trap field: hidden from people, visible to bots */
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}

/* ---------- v3.5 label system ---------- */
/* page-top wayfinding label (menu name), now outside the H1 */
.page-hero .kicker{display:block;font:700 .8rem var(--font-body);letter-spacing:.18em;text-transform:uppercase;color:var(--yellow);margin-bottom:14px}
/* source / format / date lines on media items */
.src-label{display:block;font:800 .74rem/1.4 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2);margin-bottom:10px}
/* House Rules is now an h3; keep the small label look */
h3.fine-title{font:800 .8rem var(--font-body);letter-spacing:.16em;text-transform:uppercase;margin-top:6px}

/* ================= v3.1 ================= */
/* fonts from version 1: Retro (Alfa Slab One + Work Sans) for Brand Guide and Retro; Neon keeps Bungee + Inter */

body.retro{--font-head:'Alfa Slab One', Georgia, serif;--font-body:'Work Sans', system-ui, sans-serif}

/* hero: no box, v1 layout and contrast */
.hero .wrap>*{max-width:none}
body .hero{min-height:100vh;min-height:100svh;padding:180px 0 90px;align-items:flex-end}
.hero::after{background:
  linear-gradient(90deg,rgba(14,12,8,.72) 0%,rgba(14,12,8,.45) 45%,rgba(14,12,8,0) 75%),
  linear-gradient(180deg,rgba(14,12,8,.55) 0%,rgba(14,12,8,.12) 35%,rgba(14,12,8,.88) 100%)}
body.retro .hero::after{background:
  linear-gradient(90deg,rgba(51,47,33,.75) 0%,rgba(51,47,33,.45) 45%,rgba(51,47,33,0) 75%),
  linear-gradient(180deg,rgba(51,47,33,.55) 0%,rgba(51,47,33,.1) 35%,rgba(51,47,33,.9) 100%)}
.hero h1 .kicker{text-shadow:0 1px 8px rgba(0,0,0,.85)}
.hero h1 .big{font-size:clamp(2.8rem,8vw,6.6rem);max-width:12ch;line-height:1.02}
.hero p.sub{font-size:clamp(1.1rem,2vw,1.35rem);max-width:580px;margin:22px 0 22px;color:rgba(255,255,255,.92);text-shadow:0 1px 10px rgba(0,0,0,.7)}
.hero .hero-hours{max-width:420px;margin:0 0 28px;background:rgba(0,0,0,.35)}
.hero .ctas .btn-ghost{color:#fff}
body.retro .hero .ctas .btn-ghost{color:var(--text)}

/* v1 title treatments: the two halves of the headline read differently */
body.retro .hero h1 .glow{color:var(--yellow);text-shadow:none;animation:none}

@keyframes flicker{0%,18%,22%,25%,53%,57%,100%{opacity:1}20%,24%,55%{opacity:.55}}

/* v1 price circle */
.price-tag{position:absolute;right:6%;bottom:110px;top:auto;width:170px;height:170px;border-radius:50%;display:grid;place-content:center;text-align:center;
  background:var(--yellow);color:#1a1510;border:0;transform:rotate(-10deg);font-weight:700;line-height:1.1;font-size:1rem;box-shadow:none;animation:bob 4s ease-in-out infinite}
.price-tag b{font-family:var(--font-head);font-size:3rem;display:block;line-height:1}

body.retro .price-tag{border:3px solid var(--black2);box-shadow:6px 6px 0 var(--black2)}
@keyframes bob{50%{transform:rotate(-6deg) translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.price-tag,.hero h1 .glow{animation:none}}
@media (max-width:960px){
  body .hero{padding:140px 0 90px}
  .price-tag{display:grid;width:110px;height:110px;right:16px;top:100px;bottom:auto}
  .price-tag b{font-size:1.9rem}.price-tag{font-size:.78rem}
}
/* v3.1 fixes: each half of the headline on its own line, tighter hero */
.hero h1 .big{max-width:none;font-size:clamp(2.6rem,6.4vw,5.6rem)}
.hero h1 .glow{display:block}
body .hero{padding-top:150px}
@media (max-width:960px){
  body .hero{padding-top:215px}
  .hero h1 .big{font-size:clamp(2.3rem,10vw,3.4rem)}
  .price-tag{top:96px;right:16px}
}
@media (min-width:961px) and (max-height:800px){
  body .hero{padding-top:120px;padding-bottom:60px}
  .hero h1 .big{font-size:clamp(2.4rem,5.2vw,4.4rem)}
  .hero p.sub{margin:14px 0 14px;font-size:1.1rem}
  .hero .hero-hours{margin-bottom:18px;line-height:1.55}
}
/* v3.1b: hero title + body copy match version 1 exactly */
.hero h1 .big{font-size:clamp(2.8rem,8.5vw,7rem);max-width:12ch;line-height:1.05;letter-spacing:.01em}
.hero h1 .glow{display:inline}
.hero p.sub{font-size:clamp(1.1rem,2vw,1.4rem);max-width:560px;line-height:1.6;margin:22px 0 32px;color:rgba(255,255,255,.88)}
@media (min-width:961px) and (max-height:800px){
  .hero h1 .big{font-size:clamp(2.8rem,8.5vw,7rem)}
  .hero p.sub{font-size:clamp(1.1rem,2vw,1.4rem);margin:22px 0 32px}
}
@media (max-width:960px){.hero h1 .big{font-size:clamp(2.8rem,8.5vw,7rem)}}
.hero .wrap{width:auto;max-width:1200px;margin:0 auto}
.hero .hero-hours{font-size:18px}
@media (min-width:961px) and (max-height:800px){.hero .hero-hours{font-size:18px}}
/* v3.1c: clear the logo above the eyebrow; $18 circle 25% larger */
body .hero{padding-top:205px}
.price-tag{width:212px;height:212px;font-size:20px}
.price-tag b{font-size:60px}
@media (min-width:961px) and (max-height:800px){body .hero{padding-top:200px}}
@media (max-width:960px){
  body .hero{padding-top:260px}
  .price-tag{width:138px;height:138px;font-size:15.6px;top:96px;right:16px}
  .price-tag b{font-size:38px}
}
@media (min-width:961px){.price-tag{bottom:180px}}
@media (max-width:960px){.price-tag{font-size:14px}}
.hero h1 .glow{display:block}
/* v3.1d: combined tour section + Rent My Arcade band */
#visit .tour-intro{text-align:center}
#visit .tour-intro .lede{margin-left:auto;margin-right:auto}
#visit .steps-title{text-align:center}
#visit .pgrid{grid-auto-flow:dense}
#visit .steps-title{margin-top:72px}
/* rma-band uses the standard wrap width, like "Built for every player"; the lede keeps its own 680px measure */
.rma-band .lede{margin-left:auto;margin-right:auto}
/* v3.1e: panel photos sit above the text instead of under it */
.panel{background:#15120c;min-height:600px}
.panel>img{height:66%;bottom:auto}
.panel>img.pimg-jonesy{object-position:center 22%}
.panel>img.pimg-card{object-position:center 30%}
.panel::after{background:linear-gradient(transparent 46%,#15120c 66%)}
@media (max-width:960px){.panel{min-height:0;flex-direction:column;align-items:stretch;padding:0 22px 28px}.panel>img{position:relative;inset:auto;height:300px;width:calc(100% + 44px);max-width:none;margin:0 -22px 22px}.panel::after{display:none}.jonesy-strip{width:90px;height:90px;right:12px;top:12px}}
/* v3.1f: equal space above and below the hours box */
.hero p.sub{margin-bottom:28px}
.hero .hero-hours{margin-top:0;margin-bottom:28px}
.hero p.sub b{color:#fff;font-weight:700}
@media (min-width:961px) and (max-height:800px){.hero p.sub{margin-bottom:28px}.hero .hero-hours{margin-bottom:28px}}
.rma-band .rma-logo{display:block;width:500px;max-width:90%;margin:0 auto 28px}
.rma-band .rma-logo img{display:block;width:100%;height:auto}
/* v3.1g: wordmark next to the header logo */
.brandmark{display:flex;align-items:center;gap:16px;text-decoration:none}
.brandmark .wordmark{font-family:var(--font-head);font-weight:400;text-transform:uppercase;color:#fff;font-size:1.25rem;line-height:1.02;letter-spacing:.02em;text-shadow:0 2px 8px rgba(0,0,0,.45);white-space:nowrap;transition:font-size .3s}
header.site.home:not(.scrolled) .brandmark .wordmark{font-size:2.1rem}
header.scrolled .brandmark .wordmark,header.solid .brandmark .wordmark{font-size:1.05rem}
@media (max-width:960px){header.site.home:not(.scrolled) .brandmark .wordmark{font-size:1.5rem}.brandmark{gap:12px}}
@media (max-width:360px){.brandmark .wordmark{display:none}}
/* v3.1h: mobile quick-action bar: Book (red) / Private event (yellow) / Directions (outline) */
@media (max-width:960px){
  .mbar{grid-template-columns:1fr 1.15fr 1fr;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
  .mbar a{min-height:50px;padding:6px 8px;font-size:.88rem;line-height:1.15;text-align:center;border-radius:8px}
  .mbar a.primary{background:var(--red);color:#fff}
  .mbar a.event{background:var(--yellow);color:var(--black2)}
  .mbar a.ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.55)}
  
  
}
@media (max-width:380px){.mbar{gap:6px;padding-left:8px;padding-right:8px}.mbar a{font-size:.8rem;padding:6px 6px}}
/* v3.1i: oversized TBGR coin logo behind the booking section */
.book::before{background:url(../assets/tbgr-coin-white.svg) center/contain no-repeat;filter:none;width:920px;height:920px;left:-230px;bottom:-300px;opacity:.13;transform:rotate(-12deg)}

@media (max-width:960px){.book::before{width:460px;height:460px;left:-140px;bottom:-140px;opacity:.12}}
@media (max-width:960px){.book::before{left:auto;right:-150px;bottom:auto;top:-60px;width:420px;height:420px}}
/* v3.1j: hero-style hours box in the booking section */
.book .book-hours{max-width:440px;margin:26px 0 30px;padding:18px 24px;font-size:18px;line-height:1.6;color:#fff;background:rgba(20,18,12,.78);border-left:4px solid var(--yellow);border-radius:0 10px 10px 0}
.book .book-hours b{color:#fff}
.book .book-hours b:first-child{color:var(--yellow)}
@media (max-width:960px){.book .book-hours{font-size:16px;padding:14px 18px}}
.form .type-note{margin-top:-6px}
.book .book-note{margin-top:14px}
.book .book-note{margin-top:0}
.book .rules{margin-top:48px}
/* v3.1k: on mobile, House Rules move below the booking form */
@media (max-width:960px){
  .book .book-grid{row-gap:0}
  .book .book-grid>div:first-child{display:contents}
  .book .book-grid form{order:1;margin-top:28px}
  .book .book-grid .rules{order:2;margin-top:40px}
}
/* v3.1l: footer social icons; hide $18 circle on mobile */
.foot .social{display:flex;gap:10px;margin-top:16px;justify-content:flex-end}
.foot .social a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);color:#fff;transition:background .2s,color .2s,border-color .2s}
.foot .social a:hover{background:var(--yellow);border-color:var(--yellow);color:var(--black2)}
.foot .social svg{width:18px;height:18px}
@media (max-width:960px){.foot .social{justify-content:flex-start}.price-tag{display:none !important}}
@media (max-width:960px){body .hero{padding-top:180px}}
/* hanging opening quote so the "I" lines up with the text below */
.hero h1 .hq{margin-left:-.4em}
/* v3.1m: trial three-column row (games / Jonesy / gift cards) */
.trio{margin-top:0;align-items:stretch}
.trio-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.trio-img{display:block;aspect-ratio:4/3;overflow:hidden}
.trio-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
a.trio-img:hover img{transform:scale(1.04)}
.trio-body{padding:24px 26px 28px;display:flex;flex-direction:column;flex:1}
.trio-body h3{margin:0 0 10px;font-family:var(--font-head);font-weight:400;font-size:1.6rem;line-height:1.15;text-transform:var(--head-case)}
.trio-note{font-size:.88rem;margin-top:12px}
.trio-cta{margin-top:auto;padding-top:20px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
body.retro .trio-card .trio-img{border-bottom:2px solid var(--black2)}
@media (max-width:960px){.trio{grid-template-columns:1fr}}
/* v3.1n: trial blue copy of "Built for every player" */
.built-blue{background:var(--blue);color:#fff}
.built-blue h2,.built-blue .lede{color:#fff}
.built-blue .lede{opacity:.9}
.built-blue .card{background:#fff;color:var(--black2);border-color:transparent}
.built-blue .card h3{color:var(--black2)}
.built-blue .card p{color:#585448}
.built-blue .card .ico{background:color-mix(in srgb,var(--blue) 14%,transparent);color:var(--blue)}
body.retro .built-blue .card{border:2px solid var(--black2);box-shadow:6px 6px 0 var(--black2)}

.trio-section{padding-top:90px}
/* Neon: very dark blue, matching the dark-red treatment of the location panel */

/* v3.1o: zoom Jonesy and the Free Play Card to fill their frames */
.trio-img img.zoom-jonesy{transform:scale(1.4);transform-origin:50% 48%}
.trio-img img.zoom-card{transform:scale(1.35);transform-origin:60% 40%}
/* v3.1p: trial photo carousel for "Explore the Game Room" */
.tour-carousel{padding-bottom:70px}
.tc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.tc-head>div:first-child{max-width:720px}
.tc-nav{display:flex;align-items:center;gap:12px;flex-shrink:0}
.tc-nav button{width:48px;height:48px;border-radius:50%;border:2px solid var(--black2);background:transparent;color:var(--black2);font-size:1.9rem;line-height:1;cursor:pointer;display:grid;place-items:center;padding-bottom:4px;transition:background .2s,color .2s}
.tc-nav button:hover:not(:disabled){background:var(--black2);color:#fff}
.tc-nav button:disabled{opacity:.3;cursor:default}
.tc-count{font-weight:700;font-size:.9rem;min-width:56px;text-align:center;color:var(--muted)}
.tc-viewport{margin-top:34px}
.tc-track{list-style:none;margin:0;padding:0 0 6px;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2*18px)/2.4);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;outline:none}
.tc-track::-webkit-scrollbar{display:none}
.tc-slide{scroll-snap-align:start}
.tc-slide figure{margin:0;position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:#000}
.tc-slide img{width:100%;height:100%;object-fit:cover;display:block}
.tc-slide figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 18px 16px;background:linear-gradient(transparent,rgba(0,0,0,.85) 55%);color:#fff;line-height:1.35}
.tc-slide figcaption b{display:block;font-size:1.05rem;margin-bottom:3px}
.tc-slide figcaption span{display:block;font-size:.88rem;color:rgba(255,255,255,.85)}
body.retro .tc-slide figure{border:3px solid var(--black2)}

@media (max-width:960px){
  .tc-head{flex-direction:column;align-items:flex-start;gap:18px}
  .tc-track{grid-auto-columns:86%;gap:12px}
}
.tour-carousel .steps-title{margin-top:64px;text-align:center}
/* v3.1q: compact two-column FAQ quick answers */
.faq-quick-head{text-align:center}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
.faq-q{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px 26px}
.faq-q h3{font-family:var(--font-body);font-weight:800;font-size:1.05rem;line-height:1.35;margin:0 0 8px;text-transform:none;letter-spacing:0}
.faq-q p{color:var(--muted);margin:0}
body.retro .faq-q{border:2px solid var(--black2)}
.faq-quick-more{text-align:center;margin-top:28px}
@media (max-width:960px){.faq-grid{grid-template-columns:1fr;gap:12px}.faq-q{padding:18px 20px}}
section.faq-quick{padding-top:64px;padding-bottom:64px}
.faq-quick .faq-grid{margin-top:26px}
/* v3.1r: events page booking section on brand yellow (Retro and Brand Guide) */
body:not(.neon) .book.book-yellow{background:#F2C75C}
body:not(.neon) .book.book-yellow .glow{color:var(--red)}
body:not(.neon) .book.book-yellow::before{opacity:.22}
/* v3.1s: single vertical event photo with brand-color offset shadow */
.event-photo{margin:0;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;align-self:center;max-width:520px;width:100%;justify-self:end}
.event-photo img{width:100%;height:100%;object-fit:cover;display:block}
body.retro .event-photo{border:3px solid var(--black2);box-shadow:12px 12px 0 var(--red)}

@media (max-width:960px){.event-photo{justify-self:start;max-width:none;margin-right:12px}}
/* event photo: ~500px tall on desktop, horizontal crop on mobile */
.event-photo{height:500px;width:auto;max-width:none;aspect-ratio:4/5}
.event-photo picture{display:block;width:100%;height:100%}
@media (max-width:960px){.event-photo{height:auto;width:auto;aspect-ratio:4/3;margin-right:12px}}

/* ===== v3.1t: brand-color accents (Retro + Brand Guide = offset shadows; Neon = soft glows) ===== */
/* Home: private events photo stack — red */
body.retro .stack figure img{border:3px solid var(--black2);box-shadow:10px 10px 0 var(--red)}
body.retro .stack figure:nth-child(2) img{border:3px solid var(--black2);box-shadow:10px 10px 0 var(--blue)}

/* Home: Games / Jonesy / Gift card row — teal, yellow, red */
body.retro .trio-card{border:2px solid var(--black2)}
body.retro .trio-card:nth-child(1){box-shadow:8px 8px 0 var(--teal)}
body.retro .trio-card:nth-child(2){box-shadow:8px 8px 0 var(--yellow)}
body.retro .trio-card:nth-child(3){box-shadow:8px 8px 0 var(--red)}

/* Home: photo carousel — yellow (track padded so shadows aren't clipped) */
.tc-track{padding:0 10px 14px 0}
body.retro .tc-slide figure{border:3px solid var(--black2);box-shadow:8px 8px 0 var(--yellow)}

/* Home: Book a visit form — red on the teal section */
body.retro #book form.form{border:3px solid var(--black2);box-shadow:10px 10px 0 var(--red)}

/* Home: FAQ quick answers — colored top border per card */
.faq-q{border-top-width:6px !important}
.faq-q:nth-child(1){border-top-color:var(--teal) !important}
.faq-q:nth-child(2){border-top-color:var(--yellow) !important}
.faq-q:nth-child(3){border-top-color:var(--red) !important}
.faq-q:nth-child(4){border-top-color:var(--blue) !important}

/* Price cards (home + events) — yellow */
body.retro .price-card{border:2px solid var(--black2);box-shadow:8px 8px 0 var(--yellow)}

/* Games page — teal shadow on hover */
body.retro .game:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--teal)}

/* News page — blue on video cards */
body.retro .news-card{border:2px solid var(--black2);box-shadow:8px 8px 0 var(--blue)}

@media (max-width:960px){
  body.retro .trio-card,body.retro .news-card,body.retro .price-card{margin-right:8px}
}
.cards.cards-2x2{grid-template-columns:repeat(2,1fr);max-width:900px;margin-left:auto;margin-right:auto}
@media (max-width:960px){.cards.cards-2x2{grid-template-columns:1fr}}
/* thanks page: body text matches standard body copy (cards, FAQ answers) */
.thanks-list{font-size:17px;line-height:1.65;color:var(--muted)}
.thanks-note{font-size:17px;line-height:1.65;color:var(--muted);margin-top:36px}
/* FAQ quick answers: all teal */
.faq-q:nth-child(n){border-top-color:var(--teal) !important}
/* Home private events: price card + both photos blue */
body.retro #visit ~ section .stack figure img{box-shadow:10px 10px 0 var(--blue)}
body.retro #visit ~ section .price-card{box-shadow:8px 8px 0 var(--blue)}

/* ===================== v3.2: tablet breakpoints =====================
   Desktop ............ 1200px and up (unchanged)
   Tablet landscape ... 961–1199px  (desktop layout, tightened)
   Tablet portrait .... 641–960px   (mobile nav + bottom bar, two-column grids)
   Phone .............. 640px and below (single column, unchanged)
   ==================================================================== */

/* ---- Tablet landscape: 961–1199px ---- */
@media (min-width:961px) and (max-width:1199px){
  .nav{gap:14px}
  .nav ul{gap:18px}
  .nav ul a{font-size:.88rem}
  .nav>.btn{padding:10px 14px;font-size:.88rem}
  header.site.home:not(.scrolled) .brandmark .wordmark{font-size:1.6rem}
  .brandmark .wordmark{font-size:1.05rem}
  .split{gap:40px}
  .book-grid{gap:36px}
  .feature-video{gap:32px}
  .cards,.trio{gap:16px}
  .card{padding:22px}
  .trio-body{padding:20px 20px 24px}
  .trio-body h3{font-size:1.4rem}
  .tc-track{grid-auto-columns:calc((100% - 18px)/2.1)}
  .games{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
  form.form{padding:26px}
}

/* ---- Tablet portrait: 641–960px ---- */
@media (min-width:641px) and (max-width:960px){
  /* card rows: two columns; an odd last card spans the full row */
  .cards,.steps{grid-template-columns:repeat(2,1fr)}
  .cards>.card:last-child:nth-child(odd),.steps>.step:last-child:nth-child(odd){grid-column:1/-1}
  .cards.cards-2x2{grid-template-columns:repeat(2,1fr)}
  /* Games / Jonesy / Gift: two cards, then the third full width with photo beside text */
  .trio{grid-template-columns:repeat(2,1fr)}
  .trio>.trio-card:nth-child(3){grid-column:1/-1;flex-direction:row}
  .trio>.trio-card:nth-child(3) .trio-img{width:45%;aspect-ratio:auto;flex-shrink:0}
  body.retro .trio>.trio-card:nth-child(3) .trio-img{border-bottom:0;border-right:2px solid var(--black2)}
  .faq-grid{grid-template-columns:1fr 1fr;gap:14px}
  .news-grid{grid-template-columns:repeat(2,1fr);gap:20px}
  .games{grid-template-columns:repeat(3,1fr);gap:14px}
  .stats .grid{grid-template-columns:repeat(4,1fr)}
  /* carousel: about 1.6 photos visible */
  .tc-head{flex-direction:row;align-items:flex-end}
  .tc-track{grid-auto-columns:calc((100% - 14px)/1.6);gap:14px}
  /* forms go back to two columns */
  form.form{grid-template-columns:1fr 1fr;padding:28px}
  /* event photo: horizontal crop, capped width */
  .event-photo{max-width:640px}
  /* footer: logo beside the text, three-column links */
  .foot{grid-template-columns:auto 1fr;gap:28px}
  .foot nav{grid-template-columns:repeat(3,auto)}
  .foot .est{grid-column:2}
}
/* tablet landscape: keep the $18 circle clear of the hero text */
@media (min-width:961px) and (max-width:1199px){
  .price-tag{width:150px !important;height:150px !important;font-size:15px !important;right:24px !important}
  .price-tag b{font-size:44px !important}
  .hero p.sub{max-width:500px}
  .trio-cta .btn{white-space:nowrap;padding-left:18px;padding-right:18px}
}

/* ===================== v3.2b: content keeps its size; layout steps down gradually ===================== */

/* --- Games grid: 5 → 4 → 3 → 2 columns (cards stay ~220–235px, matching the source images) --- */
.games{grid-template-columns:repeat(5,1fr)}
@media (min-width:961px) and (max-width:1199px){.games{grid-template-columns:repeat(4,1fr)}}
@media (min-width:641px) and (max-width:960px){.games{grid-template-columns:repeat(3,1fr);gap:16px}}
@media (max-width:640px){.games{grid-template-columns:repeat(2,1fr);gap:12px}}

/* --- Photo carousel: fixed slide width; narrower screens just show fewer slides --- */
.tc-track{grid-auto-columns:460px !important}
@media (max-width:640px){.tc-track{grid-auto-columns:85% !important}}

/* --- Tablet portrait (641–960): keep side-by-side layouts --- */
@media (min-width:641px) and (max-width:960px){
  .split{grid-template-columns:1fr 1fr;gap:32px;align-items:center}
  .split>.stack{width:100%}
  .visit-grid{grid-template-columns:1fr 1fr;min-height:420px}
  .visit-grid .visit-img img{height:100%;object-fit:cover}
  /* three-up cards stay three-up (short text) */
  .cards,.steps{grid-template-columns:repeat(3,1fr)}
  .cards>.card:last-child:nth-child(odd),.steps>.step:last-child:nth-child(odd){grid-column:auto}
  .cards.cards-2x2{grid-template-columns:repeat(2,1fr)}
  .card{padding:18px}
  /* event photo beside the text, smaller */
  .event-photo{height:400px;width:320px;max-width:100%;justify-self:end;margin-right:12px}
  /* stacked blocks keep a readable, capped width */
  .book-grid form.form{max-width:680px}
  .feature-video .video{max-width:640px}
}

/* --- Phone (≤640): stack, but never blow small images up to full width --- */
@media (max-width:640px){
  .stack{max-width:420px;width:100%;margin:0 auto}
  .trio{grid-template-columns:1fr}
  .trio>.trio-card{max-width:480px;width:100%;margin-left:auto;margin-right:auto}
  .trio>.trio-card:nth-child(3){flex-direction:column}
  .trio>.trio-card:nth-child(3) .trio-img{width:auto;aspect-ratio:4/3}
  .event-photo{max-width:480px;width:100%;height:auto;aspect-ratio:4/3;justify-self:center;margin-right:0}
  .visit-img{max-height:300px;overflow:hidden}
  .news-grid{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .stats .grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:641px) and (max-width:960px){
  .cards.trio{grid-template-columns:repeat(2,1fr)}
  .cards.trio>.trio-card:nth-child(3){grid-column:1/-1}
}
/* Games grid: cards never wider than 210px; extra width becomes side margin */
.games{grid-template-columns:repeat(5,minmax(0,210px));justify-content:center}
@media (min-width:961px) and (max-width:1199px){.games{grid-template-columns:repeat(4,minmax(0,210px))}}
@media (min-width:641px) and (max-width:960px){.games{grid-template-columns:repeat(3,minmax(0,210px))}}
@media (max-width:640px){.games{grid-template-columns:repeat(2,minmax(0,210px))}}
/* events 1985 photo: centered in its column, top-aligned with the title */
.event-photo{justify-self:center !important;align-self:start !important}
.split:has(> .event-photo){align-items:start}

/* ===== v3.2: events photo mosaic + lightbox ===== */
.party-intro{align-items:center}
.party-intro .callout{margin:0}
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;gap:14px;margin-top:44px;grid-auto-flow:dense}
.mosaic-item{display:block;position:relative;overflow:hidden;border-radius:var(--radius);cursor:zoom-in;background:#000}
.mosaic-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.mosaic-item:hover img{transform:scale(1.04)}
.mosaic-item.big{grid-column:span 2;grid-row:span 2}
.mosaic-item.wide{grid-column:span 2}
body.retro .mosaic-item{border:3px solid var(--black2)}
.mosaic-hint{margin-top:12px;font-size:.84rem;color:var(--muted);text-align:center}
@media (min-width:641px) and (max-width:960px){.mosaic{grid-template-columns:repeat(3,1fr);grid-auto-rows:170px;gap:12px}}
@media (max-width:640px){.mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:130px;gap:10px;margin-top:30px}.party-intro{gap:24px}}
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(10,9,6,.92);display:flex;align-items:center;justify-content:center;padding:56px 70px}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center}
.lightbox img{max-width:min(1400px,100%);max-height:calc(100vh - 150px);width:auto;height:auto;object-fit:contain;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox figcaption{color:rgba(255,255,255,.85);font-size:.92rem;margin-top:12px;text-align:center;max-width:800px}
.lightbox button{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:0;width:48px;height:48px;border-radius:50%;font-size:2rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.lightbox button:hover{background:var(--yellow);color:var(--black2)}
.lb-close{top:16px;right:16px}
.lb-prev{left:14px;top:50%;transform:translateY(-50%)}
.lb-next{right:14px;top:50%;transform:translateY(-50%)}
@media (max-width:640px){.lightbox{padding:60px 12px}.lb-prev,.lb-next{top:auto;bottom:16px;transform:none}.lb-prev{left:calc(50% - 60px)}.lb-next{right:calc(50% - 60px)}}

/* ===== v3.2: announcements (bar / hero tag / teaser card) ===== */
.ann-tag{display:inline-block;font:800 .7rem/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;padding:5px 9px;border-radius:999px;background:rgba(0,0,0,.18);margin-right:10px;white-space:nowrap}
/* 1. top bar */
.announce-bar{position:relative;z-index:70;font-size:.95rem}
.announce-bar .wrap{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding-top:8px;padding-bottom:8px;text-align:center}
.announce-bar p{margin:0}
.announce-bar.ann-alert{background:var(--red);color:#fff}
.announce-bar.ann-news{background:var(--teal);color:var(--black2)}
.announce-bar.ann-event{background:var(--yellow);color:var(--black2)}
.announce-bar .ann-close{margin-left:auto;flex-shrink:0}
.ann-close{background:transparent;border:0;color:inherit;font-size:1.5rem;line-height:1;cursor:pointer;padding:4px 8px;opacity:.8}
.ann-close:hover{opacity:1}
/* 2. hero tag */
.hero-pill{display:inline-flex;align-items:center;margin-bottom:18px;padding:7px 14px 7px 7px;border-radius:999px;background:var(--yellow);color:var(--black2);font-weight:700;font-size:.92rem;text-decoration:none;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.hero-pill .ann-tag{background:var(--black2);color:var(--yellow)}
.hero-pill .arr{margin-left:10px;font-size:1.2rem}
.hero-pill:hover{background:#fff}

/* 3. teaser card */
.ann-teaser{padding:34px 0;background:var(--bg-2,var(--bg))}
.ann-teaser .wrap{position:relative}
.ann-card{display:grid;grid-template-columns:200px 1fr auto;gap:26px;align-items:center;background:var(--card);border-radius:var(--radius);padding:16px 26px 16px 16px;text-decoration:none;color:inherit;max-width:980px;margin:0 auto}
.ann-card img{width:200px;aspect-ratio:16/9;object-fit:cover;border-radius:8px;display:block}
.ann-card h3{margin:8px 0 4px;font-size:1.25rem}
.ann-card p{margin:0;color:var(--muted)}
.ann-card .ann-tag{background:var(--teal);color:#fff}
body.retro .ann-card{border:2px solid var(--black2);box-shadow:8px 8px 0 var(--teal)}

.ann-teaser .ann-close{position:absolute;top:-6px;right:max(12px,calc(50% - 506px))}
@media (max-width:760px){
  .ann-card{grid-template-columns:110px 1fr;gap:14px;padding:12px}
  .ann-card img{width:110px}
  .ann-card .btn{grid-column:1/-1;justify-self:start}
  .announce-bar{font-size:.86rem}
  .announce-bar .ann-tag{display:none}
}
/* mockup-only switcher */
.ann-switch{position:fixed;left:16px;bottom:16px;z-index:95;display:flex;gap:4px;align-items:center;background:#111;color:#fff;border-radius:999px;padding:5px 6px 5px 14px;font:600 .78rem system-ui,sans-serif;box-shadow:0 6px 20px rgba(0,0,0,.3)}
.ann-switch span{opacity:.7;margin-right:6px}
.ann-switch button{background:transparent;color:#fff;border:0;border-radius:999px;padding:6px 10px;font:inherit;cursor:pointer}
.ann-switch button.on{background:#fff;color:#111}
@media (max-width:960px){.ann-switch{bottom:84px}}
[data-announce][hidden]{display:none !important}
.ann-teaser .ann-close{top:-14px;right:max(4px,calc(50% - 520px))}
@media (max-width:640px){
  .hero-pill{border-radius:14px;font-size:.82rem;padding:7px 12px 7px 7px;margin-bottom:14px}
  .hero-pill .ann-tag{font-size:.62rem;padding:4px 7px;margin-right:8px}
}
@media (max-width:960px){.ann-switch{bottom:136px;left:50%;transform:translateX(-50%)}}
/* announcements: renderer tweaks */
.announce-bar .ann-msg{margin:0;color:inherit}
.announce-bar a.ann-msg{text-decoration:underline;text-underline-offset:3px}
.ann-card.ann-alert .ann-tag{background:var(--red);color:#fff}
.ann-card.ann-event .ann-tag{background:var(--yellow);color:var(--black2)}
.ann-card.ann-news .ann-tag{background:var(--teal);color:#fff}
.ann-card.ann-alert{box-shadow:8px 8px 0 var(--red) !important}
.ann-card.ann-event{box-shadow:8px 8px 0 var(--yellow) !important}
.ann-card img{width:200px;height:auto;aspect-ratio:16/9;object-fit:cover}
.ann-card.no-img{grid-template-columns:1fr auto;padding-left:26px}
div.ann-card{cursor:default}
@media (max-width:760px){.ann-card.no-img{grid-template-columns:1fr}.ann-card img{width:110px}}
/* top bar is in the page from first paint; header sits below it until you scroll */
.has-ann-bar header.site{top:var(--ann-bar-h,0px)}

/* ===== v3.2: "In print and online" article cards ===== */
.press-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:34px}
.press-card{background:var(--card);border:2px solid var(--black2);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.press-img{display:block;aspect-ratio:16/9;overflow:hidden;border-bottom:2px solid var(--black2)}
.press-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.press-card:hover .press-img img{transform:scale(1.04)}
.press-body{padding:20px 24px 24px;display:flex;flex-direction:column;flex:1}
.press-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.press-badge{font:800 .7rem/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;border-radius:999px;color:#fff}
.press-date{font:700 .78rem var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.press-card h3{font-family:var(--font-head);font-weight:400;font-size:1.45rem;line-height:1.2;margin:0 0 12px}
.press-card blockquote{margin:0 0 20px;padding-left:14px;border-left:3px solid var(--line);font-style:italic;color:var(--muted);font-size:1rem;line-height:1.55}
.press-cta{margin-top:auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.press-pdf{font-size:.88rem;color:var(--muted)}
.press-replay{box-shadow:8px 8px 0 var(--red)}   .press-replay .press-badge{background:var(--red)}
.press-cbs{box-shadow:8px 8px 0 var(--blue)}     .press-cbs .press-badge{background:var(--blue)}
.press-tokencrow{box-shadow:8px 8px 0 var(--teal)} .press-tokencrow .press-badge{background:var(--teal)}
.press-pioneer{box-shadow:8px 8px 0 var(--yellow)} .press-pioneer .press-badge{background:var(--yellow);color:var(--black2)}
@media (max-width:760px){.press-grid{grid-template-columns:1fr;gap:22px}.press-card{max-width:520px;width:100%;margin:0 auto 0 0}.press-card h3{font-size:1.25rem}}
/* press cards: all yellow */
.press-card.press-replay,.press-card.press-cbs,.press-card.press-tokencrow,.press-card.press-pioneer{box-shadow:8px 8px 0 var(--yellow)}
/* video cards: same badge / title / description treatment as the press cards */
.news-card .body{display:flex;flex-direction:column}
.news-card .press-badge{background:var(--blue);color:#fff}
.news-card h3{font-family:var(--font-head);font-weight:400;font-size:1.45rem;line-height:1.2;margin:0 0 10px}
.news-card p:not(.press-meta){color:var(--muted);font-size:1rem;line-height:1.55;margin:0}
@media (max-width:760px){.news-card h3{font-size:1.25rem}}
/* press cards: all badges yellow; 3 cards in a row on desktop */
.press-card .press-badge{background:var(--yellow) !important;color:var(--black2) !important}
@media (min-width:961px){.press-grid{grid-template-columns:repeat(3,1fr);gap:24px}.press-card h3{font-size:1.3rem}}
/* two press cards: two columns, capped width */
@media (min-width:961px){.press-grid{grid-template-columns:repeat(2,1fr);max-width:980px;margin-left:auto;margin-right:auto}.press-card h3{font-size:1.45rem}}
/* podcast moved into "In print and online": three cards across */
.press-video{position:relative}
.press-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.press-desc{color:var(--muted);font-size:1rem;line-height:1.55;margin:0}
@media (min-width:961px){.press-grid{grid-template-columns:repeat(3,1fr);max-width:none;gap:24px}.press-card h3{font-size:1.3rem}}
/* video section now has three cards */
@media (min-width:961px){.news-grid{grid-template-columns:repeat(3,1fr);gap:24px}.news-card h3{font-size:1.3rem}}
.press-card.press-podcast{box-shadow:8px 8px 0 var(--yellow)}
.press-video{background:#000}
/* location section: labeled blocks */
.visit-addr{margin-bottom:22px}
.visit-details{display:grid;grid-template-columns:1fr 1fr;gap:20px 28px;margin:0 0 26px}
.visit-details>div:nth-child(3){grid-column:1/-1}
.visit-label{font:800 .74rem var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);margin:0 0 6px}
.visit-details p:not(.visit-label){margin:0;line-height:1.55}
@media (max-width:640px){.visit-details{grid-template-columns:1fr;gap:18px}}
.visit-info .visit-addr{margin-bottom:26px !important}
.visit-info .visit-label{margin:0 0 4px !important}
.visit-info .visit-details p{margin-top:0 !important}
.visit-info .visit-details{margin-bottom:30px}
/* location: 2x2 grid */
.visit-details>div:nth-child(3){grid-column:auto}
.visit-info .visit-details{gap:24px 32px;margin-top:8px}
.visit-info .visit-details{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.visit-details a{overflow-wrap:anywhere}
@media (min-width:641px) and (max-width:960px){.visit-info .visit-details{gap:20px 22px}}
@media (max-width:640px){.visit-info .visit-details{grid-template-columns:1fr}}
@media (max-width:960px){.visit-info .visit-details{grid-template-columns:1fr;gap:18px}}
.card .ico svg{width:24px;height:24px;display:block}
#contact{scroll-margin-top:110px}

/* v3.2: phones: carousel shows slide titles only (descriptions hidden so the photo stays visible) */
@media (max-width:640px){
  .tc-slide figcaption{padding:36px 14px 12px}
  .tc-slide figcaption b{margin-bottom:0}
  .tc-slide figcaption span{display:none}
}

/* v3.2: home hero kicker is a paragraph above the H1 (the H1 is the big headline only) */
.hero .hero-kicker{display:block;font:700 .82rem/1.4 var(--font-body);letter-spacing:.18em;text-transform:uppercase;color:var(--yellow);margin-bottom:16px;text-shadow:0 1px 8px rgba(0,0,0,.85)}

/* ==========================================================================
   v3.2 punch list (Oct 2026)
   ========================================================================== */
:root{color-scheme:light}

/* Utility classes (replace inline styles). Spacing scale: 16 / 24 / 32 / 48 px */
.mt-0{margin-top:0 !important}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-48{margin-top:48px}
.pt-32{padding-top:32px}.p-0{padding:0}
.text-left{text-align:left}.align-start{align-items:start}
.img-cover{width:100%;height:100%;object-fit:cover}
.measure{max-width:680px;margin-left:auto;margin-right:auto}
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:pre;border:0}

/* Images: width/height attributes reserve space but never force a height */
:where(img){height:auto}

/* Skip link: hidden until a keyboard user tabs to it */
.sr-skip{position:absolute;left:-999px;top:12px;z-index:200;background:var(--black2);color:#fff;padding:10px 16px;border-radius:var(--radius);font-weight:700;text-decoration:none}
.sr-skip:focus{left:12px;outline:3px solid var(--yellow);outline-offset:2px}

/* Carousel: visible keyboard focus */
.tc-track:focus-visible{outline:3px solid var(--blue);outline-offset:6px}

/* Older browsers without color-mix(): solid fallbacks first */
header.site.solid,header.site.scrolled{background:rgba(51,47,33,.94);background:color-mix(in srgb,var(--dark) 94%,transparent);-webkit-backdrop-filter:blur(10px)}
.card .ico{background:rgba(52,167,152,.16);background:color-mix(in srgb,var(--teal) 16%,transparent)}
.built-blue .card .ico{background:rgba(0,110,179,.14);background:color-mix(in srgb,var(--blue) 14%,transparent)}
.form-ok{background:rgba(52,167,152,.18);background:color-mix(in srgb,var(--teal) 18%,transparent)}

/* #9 Section titles: 51 px sections, 32 px sub-sections */
.steps-title,.faq-full h2,h2.h2-sub{font-size:clamp(1.6rem,3vw,2rem)}

/* #10 Small uppercase labels: 13 px */
.eyebrow,.seen span.lbl,.src-label,.press-badge,.visit-label,.page-hero .kicker,.page-hero h1 .kicker,.hero .hero-kicker{font-size:.8125rem}

/* #11 News card text matches body copy (17 px) */
.press-desc,.news-card p:not(.press-meta){font-size:1.0625rem}

/* #12 Home FAQ cards use the heading font, like the FAQ page */
.faq-quick h3{font-family:var(--font-head);font-weight:400;font-size:1.15rem;line-height:1.25}

/* #16 Section spacing */
.tour-carousel{padding-bottom:96px}
.trio-section{padding-top:96px}

/* #20 / #21 / stats labels: contrast */
.stat:nth-child(2) b{color:#176A5F}
.stat:nth-child(3) b{color:#8C6A14}
.stat span{color:var(--stone)}
.src-label{color:#176A5F}

/* RMA logo never distorts */
.rma-band .rma-logo img{object-fit:contain}

/* Card icon text (P, 13+, 15): darker teal on the teal tint for contrast */
.card .ico{color:#176A5F}

/* News: TV videos in two columns on desktop; a third (odd) card centers on its own row */
@media (min-width:961px){.news-grid{grid-template-columns:repeat(2,1fr);gap:28px}.news-card h3{font-size:1.45rem}}
@media (min-width:761px){.news-grid>.news-card:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 14px)}}

/* Title highlighting rule: yellow highlight in each interior page's big title (H1);
   the two booking headings keep their own colors (white on teal, red on yellow). Other headings are plain. */
.page-hero h1 .glow{color:var(--yellow)}

/* 404 page: Jonesy photo grid (4 across desktop, 2 across phones) */
.jonesy-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.jonesy-grid figure{margin:0 8px 8px 0;aspect-ratio:1;border:3px solid var(--black2);border-radius:var(--radius);overflow:hidden;box-shadow:8px 8px 0 var(--yellow)}
.jonesy-grid img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:960px){.jonesy-grid{grid-template-columns:repeat(2,1fr);gap:16px}}

/* "Love a game? Take it home": text left, RMA truck photo right; on phones the photo follows the button */
.rma-band .rma-split{text-align:left}
.rma-band .rma-split .lede{margin-left:0;margin-right:0}
.rma-band .rma-split .rma-logo{width:320px;max-width:80%;margin:0 0 24px}
.rma-photo{margin:0 10px 10px 0;border:3px solid var(--black2);border-radius:var(--radius);overflow:hidden;box-shadow:10px 10px 0 var(--blue);aspect-ratio:4/3}
.rma-photo img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:640px){.rma-band .rma-split{grid-template-columns:1fr;gap:32px}}
.rma-band .rma-split .rma-logo{margin-left:auto;margin-right:auto}
.rma-band .rma-split .rma-copy{text-align:center}

/* Phones/small tablets (<=640px): single-column cards and photos cap at 480px and sit centered */
@media (max-width:640px){
  body.retro .trio>.trio-card{margin-left:auto;margin-right:auto}
  .press-card{max-width:480px;margin:0 auto}
  .rma-band .rma-photo{max-width:480px;width:100%;margin:0 auto}
}
@media (min-width:641px) and (max-width:760px){.press-card{margin:0 auto}}

/* Footer logo links home */
.foot-logo{display:block;align-self:start;width:max-content}
.foot-logo img{display:block}

/* News: TV grid sits at the top of its section (its heading is screen-reader-only) */
.sr-only + .news-grid{margin-top:0}

/* Privacy policy page */
/* headings sit 16px above their text, the same gap as section titles and intros elsewhere */
.policy h2{margin-bottom:16px}
.policy h2 + .thanks-list{margin-top:16px}
.policy .thanks-list li{color:var(--text)}

/* Thanks page: confirmation callout + two-column event rules / reminders */
.thanks-wrap{max-width:1080px}
.confirm-alert{background:var(--yellow);border:3px solid var(--black2);border-radius:var(--radius);box-shadow:8px 8px 0 var(--red);padding:22px 26px;margin-right:8px;color:var(--black2)}
.confirm-alert p{margin:0;font-size:1.05rem;line-height:1.55}
.confirm-alert .confirm-title{font-family:var(--font-head);font-size:clamp(1.3rem,2.6vw,1.6rem);line-height:1.2;margin-bottom:6px}
.thanks-cols{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
@media (max-width:760px){.thanks-cols{grid-template-columns:1fr;gap:48px}}
.thanks-cta{margin-top:64px;padding-top:48px;border-top:1px solid var(--line)}
.thanks-cta .thanks-note{margin-top:16px}

/* Events form: start time and event duration share a row */
.time-duration{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 28px}
.time-duration .field-note{flex-basis:100%;margin-top:0}
.time-duration .duration{min-width:150px}
form.form .time-duration .duration input{width:120px}

/* Small note on its own line under a list item (events "What's included"); matches other disclaimers: smaller, muted, not italic */
.li-note{display:block;margin-top:2px;font-size:.88em;color:var(--muted)}