:root{
  --ink:#050A11;
  --midnight:#0A1826;
  --deep:#0F2A3A;
  --porcelain:#F3EFE8;
  --muted:#B9C6CE;
  --ice:#9FC2D2;
  --marigold:#E5A244;
  --rose:#C48EA4;
  --hair:rgba(159,194,210,.20);
  --hair-strong:rgba(159,194,210,.42);
  --shell:min(1200px, 100% - 2.5rem);
  /* Tells the browser to draw its own widgets — date pickers, number spinners,
     dropdown arrows, scrollbars — for a dark page. Without it they arrive in
     light mode and read as holes punched in the design. */
  color-scheme: dark;
  --display:"Bodoni Moda", Didot, "Bodoni MT", "Times New Roman", serif;
  --body:"Karla", "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--porcelain);
  font-family:var(--body); font-weight:300; font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit}
button{font:inherit}
:focus-visible{outline:2px solid var(--marigold); outline-offset:3px; border-radius:2px}

.cg-skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--marigold); color:#1A1206; padding:.7rem 1.1rem; font-weight:600}
.cg-skip:focus{left:1rem; top:1rem}

/* ---------- signature: string rail ---------- */
.cg-rail{position:fixed; left:0; top:0; width:64px; height:100vh; z-index:5; pointer-events:none; opacity:.85}
@media (max-width:1100px){ .cg-rail{display:none} }

/* ---------- shell ---------- */
.cg-wrap{width:var(--shell); margin-inline:auto}
@media (min-width:1101px){ .cg-wrap{margin-left:max(64px, calc((100% - min(1200px, 100% - 8rem))/2)); margin-right:auto} }

/* ---------- header ---------- */
.cg-head{position:sticky; top:0; z-index:40; background:rgba(5,10,17,.78); backdrop-filter:blur(14px); border-bottom:1px solid var(--hair)}
.cg-head-in{display:flex; align-items:center; gap:1.5rem; justify-content:space-between; padding:.85rem 0}
.cg-brand{display:flex; align-items:center; gap:.75rem; text-decoration:none}
.cg-brand img.cg-emblem{width:38px; height:38px; border-radius:50%}
.cg-brand img.cg-word{width:150px; height:auto}
.cg-nav{display:flex; align-items:center; gap:1.9rem}
.cg-nav a{
  text-decoration:none; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); padding:.35rem 0; position:relative; transition:color .25s
}
.cg-nav a::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--marigold); transform:scaleX(0); transform-origin:left; transition:transform .3s}
.cg-nav a:hover{color:var(--porcelain)}
.cg-nav a:hover::after, .cg-nav a[aria-current="page"]::after{transform:scaleX(1)}
.cg-nav a[aria-current="page"]{color:var(--porcelain)}
.cg-burger{display:none; background:none; border:1px solid var(--hair-strong); color:var(--porcelain); width:44px; height:40px; border-radius:2px; font-size:1.1rem; line-height:1; cursor:pointer}
@media (max-width:900px){
  .cg-nav{
    position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--midnight); border-bottom:1px solid var(--hair); padding:.5rem 0; display:none
  }
  .cg-nav.is-open{display:flex}
  .cg-nav a{padding:.95rem 1.25rem; border-bottom:1px solid rgba(159,194,210,.08); font-size:.85rem}
  .cg-nav a::after{display:none}
  .cg-burger{display:block}
  .cg-head-in{position:relative}
}

/* ---------- type ---------- */
.cg-eyebrow{
  font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; color:var(--ice);
  font-weight:500; margin:0 0 1.1rem; display:flex; align-items:center; gap:.7rem
}
.cg-eyebrow::before{content:""; width:26px; height:1px; background:var(--marigold); flex:none}
h1,h2,h3{font-family:var(--display); font-weight:400; margin:0 0 1rem; line-height:1.08; letter-spacing:-.01em}
h1{font-size:clamp(2.7rem, 7vw, 5.1rem)}
h2{font-size:clamp(2rem, 4.2vw, 3.1rem)}
h3{font-size:1.4rem; line-height:1.2}
p{margin:0 0 1.15rem; max-width:64ch; color:#DCE4E9}
.cg-lede{font-size:clamp(1.05rem,1.6vw,1.22rem); color:#E7EDF1}
.cg-dim{color:var(--muted)}

/* ---------- buttons ---------- */
.cg-btn{
  display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; cursor:pointer;
  padding:.85rem 1.6rem; border:1px solid var(--marigold); background:var(--marigold); color:#180F02;
  font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; border-radius:1px;
  transition:background .25s, color .25s, transform .25s
}
.cg-btn:hover{background:transparent; color:var(--marigold); transform:translateY(-2px)}
.cg-btn-ghost{background:transparent; color:var(--porcelain); border-color:var(--hair-strong)}
.cg-btn-ghost:hover{border-color:var(--ice); color:var(--ice); background:transparent}
.cg-btn[disabled]{opacity:.45; cursor:not-allowed; transform:none}

/* ---------- routes ---------- */

/* ---------- hero ---------- */
.cg-hero{position:relative; min-height:min(88vh, 780px); display:flex; align-items:flex-end; overflow:hidden; border-bottom:1px solid var(--hair)}
.cg-hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 42%; animation:cg-drift 26s ease-in-out infinite alternate}
@keyframes cg-drift{from{transform:scale(1.02)} to{transform:scale(1.11)}}
.cg-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,10,17,.82) 0%, rgba(5,10,17,.22) 38%, rgba(5,10,17,.72) 72%, var(--ink) 100%)
}
.cg-hero-in{position:relative; z-index:2; width:100%; padding:6rem 0 3.6rem}
@media (max-width:760px){
  .cg-hero::after{background:linear-gradient(180deg, rgba(5,10,17,.78) 0%, rgba(5,10,17,.5) 26%, rgba(5,10,17,.88) 60%, var(--ink) 100%)}
  .cg-hero-in{padding:4.5rem 0 3rem}
}
.cg-hero h1{max-width:15ch; text-shadow:0 2px 40px rgba(0,0,0,.55)}
.cg-hero-actions{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem}
.cg-hero-sub{max-width:48ch}

/* ---------- now-on strip ---------- */
.cg-strip{border-bottom:1px solid var(--hair); background:linear-gradient(90deg, rgba(15,42,58,.7), rgba(5,10,17,0))}
.cg-strip-in{display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.6rem; padding:1.1rem 0; font-size:.85rem}
.cg-pill{font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; border:1px solid var(--marigold); color:var(--marigold); padding:.3rem .7rem; border-radius:999px; white-space:nowrap}
.cg-strip a{color:var(--ice); text-underline-offset:4px}

/* ---------- sections ---------- */
.cg-sec{padding:clamp(4rem, 9vw, 7.5rem) 0; border-bottom:1px solid var(--hair)}
.cg-sec-tight{padding:clamp(3rem, 6vw, 4.5rem) 0}
.cg-split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
@media (max-width:860px){ .cg-split{grid-template-columns:1fr} }
.cg-frame{position:relative; border:1px solid var(--hair); padding:.6rem; background:rgba(15,42,58,.28)}
.cg-frame img{width:100%; aspect-ratio:4/3; object-fit:cover}
.cg-frame-tall img{aspect-ratio:3/4}

/* ---------- cards ---------- */
.cg-grid{display:grid; gap:1.4rem}
.cg-g2{grid-template-columns:repeat(2,1fr)}
.cg-g3{grid-template-columns:repeat(3,1fr)}
.cg-g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){ .cg-g3,.cg-g4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .cg-g2,.cg-g3,.cg-g4{grid-template-columns:1fr} }

.cg-card{
  position:relative; display:flex; flex-direction:column; text-decoration:none;
  border:1px solid var(--hair); background:linear-gradient(180deg, rgba(15,42,58,.34), rgba(5,10,17,.2));
  overflow:hidden; transition:border-color .3s, transform .3s
}
.cg-card:hover{border-color:var(--hair-strong); transform:translateY(-3px)}
.cg-card-media{overflow:hidden; aspect-ratio:3/2}
.cg-card-media img{width:100%; height:100%; object-fit:cover; transition:transform .8s ease}
.cg-card:hover .cg-card-media img{transform:scale(1.06)}
.cg-card-body{padding:1.4rem 1.5rem 1.7rem}
.cg-card h3{margin-bottom:.5rem}
.cg-card p{font-size:.95rem; margin-bottom:0}
.cg-card-go{margin-top:1.1rem; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--marigold)}

/* class cards */
.cg-class{border:1px solid var(--hair); display:flex; flex-direction:column; background:rgba(15,42,58,.26)}
.cg-class-media{aspect-ratio:16/10; overflow:hidden}
.cg-class-media img{width:100%; height:100%; object-fit:cover}
.cg-class-body{padding:1.5rem; display:flex; flex-direction:column; flex:1}
.cg-meta{list-style:none; margin:.2rem 0 1rem; padding:0; font-size:.9rem}
.cg-meta li{display:flex; gap:.9rem; padding:.42rem 0; border-bottom:1px solid rgba(159,194,210,.09)}
.cg-meta span{flex:none; width:5.2rem; color:var(--ice); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; padding-top:.28rem}
.cg-fee{font-family:var(--display); font-size:1.7rem; color:var(--marigold)}
.cg-class .cg-btn{margin-top:auto; align-self:flex-start}

/* facts band */
.cg-facts{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair)}
@media (max-width:760px){ .cg-facts{grid-template-columns:repeat(2,1fr)} }
.cg-fact{background:var(--ink); padding:1.8rem 1.4rem}
.cg-fact b{display:block; font-family:var(--display); font-size:clamp(1.9rem,3.4vw,2.6rem); font-weight:400; color:var(--porcelain); line-height:1}
.cg-fact span{display:block; margin-top:.6rem; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ice)}

/* gallery */
.cg-tabs{display:flex; gap:.4rem; margin-bottom:1.6rem; flex-wrap:wrap}
.cg-tab{
  background:none; border:1px solid var(--hair); color:var(--muted); cursor:pointer;
  padding:.6rem 1.1rem; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; border-radius:1px
}
.cg-tab[aria-selected="true"]{border-color:var(--marigold); color:var(--marigold)}
.cg-gal{display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem}
@media (max-width:900px){ .cg-gal{grid-template-columns:repeat(2,1fr)} }
.cg-gal button{padding:0; border:0; background:none; cursor:zoom-in; overflow:hidden; aspect-ratio:3/2}
.cg-gal img{width:100%; height:100%; object-fit:cover; transition:transform .6s, opacity .3s; opacity:.92}
.cg-gal button:hover img{transform:scale(1.05); opacity:1}

/* lightbox */
.cg-lightbox{position:fixed; inset:0; z-index:120; background:rgba(3,6,11,.95); display:none; align-items:center; justify-content:center; padding:clamp(1rem,4vw,3rem)}
.cg-lightbox.is-open{display:flex}
.cg-lightbox img{max-width:100%; max-height:82vh; object-fit:contain; border:1px solid var(--hair)}
.cg-lb-close{position:absolute; top:1rem; right:1rem; background:none; border:1px solid var(--hair-strong); color:var(--porcelain); width:44px; height:44px; cursor:pointer; font-size:1.2rem}
.cg-lb-nav{position:absolute; top:50%; transform:translateY(-50%); background:none; border:1px solid var(--hair-strong); color:var(--porcelain); width:46px; height:60px; cursor:pointer; font-size:1.1rem}
.cg-lb-prev{left:1rem} .cg-lb-next{right:1rem}
.cg-lb-cap{position:absolute; bottom:1.2rem; left:0; right:0; text-align:center; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}

/* reel */
.cg-reel{display:grid; grid-template-columns:auto 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center}
@media (max-width:760px){ .cg-reel{grid-template-columns:1fr} }
.cg-reel-frame{position:relative; width:min(300px, 78vw); aspect-ratio:9/16; border:1px solid var(--hair); overflow:hidden; background:#000}
.cg-reel-frame img{width:100%; height:100%; object-fit:cover; opacity:.75}
.cg-reel-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.cg-play{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.8rem;
  background:radial-gradient(circle at 50% 55%, rgba(10,24,38,.25), rgba(5,10,17,.72)); border:0; color:var(--porcelain); cursor:pointer; width:100%
}
.cg-play-dot{width:64px; height:64px; border:1px solid var(--porcelain); border-radius:50%; display:grid; place-items:center; font-size:1rem; transition:background .3s, color .3s}
.cg-play:hover .cg-play-dot{background:var(--porcelain); color:var(--ink)}
.cg-play small{font-size:.68rem; letter-spacing:.2em; text-transform:uppercase}

/* poster + countdown */
.cg-poster{border:1px solid var(--hair); padding:.55rem; background:rgba(15,42,58,.3)}
.cg-count{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); max-width:440px; margin:1.6rem 0 2rem}
.cg-count div{background:var(--ink); padding:1rem .4rem; text-align:center}
.cg-count b{display:block; font-family:var(--display); font-size:1.9rem; font-weight:400; color:var(--marigold); line-height:1}
.cg-count span{font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ice)}

/* slots / placeholders awaiting client content */
.cg-slot{border:1px dashed rgba(196,142,164,.45); background:rgba(196,142,164,.05); padding:1.6rem; color:var(--muted); font-size:.9rem}
.cg-slot b{display:block; font-family:var(--body); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--rose); margin-bottom:.5rem; font-weight:600}
.cg-slot p{margin:0; font-size:.9rem; color:var(--muted)}

/* team */
.cg-team{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
@media (max-width:980px){ .cg-team{grid-template-columns:repeat(2,1fr)} }
.cg-member{border:1px solid var(--hair); aspect-ratio:3/4; display:grid; place-items:center; text-align:center; padding:1rem; background:rgba(15,42,58,.2)}
.cg-member p{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(185,198,206,.6); margin:0}

/* form */
.cg-form{display:grid; gap:1.1rem; max-width:640px}
.cg-field{display:grid; gap:.45rem}
.cg-field label{font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ice)}
.cg-field input, .cg-field textarea, .cg-field select{
  background:rgba(15,42,58,.35); border:1px solid var(--hair); color:var(--porcelain);
  padding:.85rem 1rem; font-family:var(--body); font-size:1rem; border-radius:1px; width:100%
}
.cg-field textarea{min-height:150px; resize:vertical}
.cg-field input:focus, .cg-field textarea:focus, .cg-field select:focus{border-color:var(--ice); outline:none}
.cg-row{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem}
@media (max-width:620px){ .cg-row{grid-template-columns:1fr} }
.cg-note{font-size:.82rem; color:var(--muted)}
.cg-ok{border:1px solid var(--marigold); background:rgba(229,162,68,.09); padding:1.1rem 1.3rem; color:var(--porcelain); font-size:.95rem}
.cg-err{color:var(--rose); font-size:.78rem}

/* contact detail list */
.cg-contacts{list-style:none; padding:0; margin:0; display:grid; gap:1.3rem}
.cg-contacts li{border-top:1px solid var(--hair); padding-top:1rem}
.cg-contacts span{display:block; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ice); margin-bottom:.35rem}
.cg-contacts a{font-family:var(--display); font-size:1.25rem; text-decoration:none; color:var(--porcelain)}
.cg-contacts a:hover{color:var(--marigold)}
.cg-contacts a.cg-sans{font-family:var(--body); font-size:1.02rem; letter-spacing:.01em}

/* footer */
.cg-foot{padding:3.5rem 0 2.5rem; font-size:.88rem}
.cg-foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; padding-bottom:2.5rem; border-bottom:1px solid var(--hair)}
@media (max-width:760px){ .cg-foot-grid{grid-template-columns:1fr; gap:2rem} }
.cg-foot-h{font-family:var(--body); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ice); margin:0 0 1rem; font-weight:600}
.cg-foot ul{list-style:none; padding:0; margin:0; display:grid; gap:.55rem}
.cg-foot a{text-decoration:none; color:var(--muted)}
.cg-foot a:hover{color:var(--porcelain)}
.cg-colophon{display:flex; flex-wrap:wrap; gap:.8rem 2rem; justify-content:space-between; padding-top:1.6rem; font-size:.76rem; color:rgba(185,198,206,.6)}


/* reveal */
.cg-rise{opacity:0; transform:translateY(20px)}
.cg-rise.is-in{opacity:1; transform:none; transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .cg-hero-img{animation:none}
  .cg-rise{opacity:1; transform:none}
  .cg-card:hover{transform:none}
  .cg-btn:hover{transform:none}
}

/* ---------- validation + page transitions ---------- */
.cg-field .field-validation-error, .cg-err{color:var(--rose); font-size:.78rem}
.cg-field input.input-validation-error, .cg-field textarea.input-validation-error{border-color:var(--rose)}
.validation-summary-errors{border:1px solid var(--rose); background:rgba(196,142,164,.08); padding:1rem 1.2rem; font-size:.9rem}
.validation-summary-errors ul{margin:0; padding-left:1.1rem}
/* The summary tag helper renders its box whether or not there is anything in
   it, so every form opened with an empty red rectangle above the first field.
   jQuery validation toggles these two classes as errors come and go, so hiding
   the valid state is the whole fix — the box returns the moment it has
   something to say. The empty <li> it leaves behind gets the same treatment. */
.validation-summary-valid{display:none}
.validation-summary-errors li:empty{display:none}
.cg-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

@view-transition{ navigation:auto }

/* ---------- admin ---------- */
.ad-body{background:var(--ink); color:var(--porcelain); min-height:100vh}
.ad-wrap{width:min(1180px, 100% - 2.5rem); margin-inline:auto}
.ad-head{border-bottom:1px solid var(--hair); background:rgba(10,24,38,.65); position:sticky; top:0; z-index:20; backdrop-filter:blur(10px)}
.ad-head-in{display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; padding:.9rem 0}
.ad-brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--porcelain)}
.ad-nav{display:flex; flex-wrap:wrap; gap:1.3rem; margin-right:auto}
.ad-nav a{text-decoration:none; color:var(--muted); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase}
.ad-nav a:hover, .ad-nav a.is-on{color:var(--marigold)}
.ad-main{padding:2.5rem 0 4rem}
.ad-main h1{font-family:var(--display); font-size:clamp(1.8rem,3.4vw,2.5rem); margin:0 0 .6rem}
.ad-main h2{font-family:var(--display); font-size:1.4rem; margin:0 0 .5rem}
.ad-sub{color:var(--muted); margin-bottom:2rem}
.ad-dim{color:rgba(185,198,206,.65); font-size:.8rem}
.ad-title-row{display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; margin-bottom:2rem}
.ad-title-row h1{margin:0}
.ad-link{background:none; border:0; color:var(--ice); cursor:pointer; font-size:.8rem; text-decoration:none; padding:.2rem .5rem}
.ad-link:hover{color:var(--marigold)}
.ad-danger{color:var(--rose)}
.ad-flash{border:1px solid var(--marigold); background:rgba(229,162,68,.1); padding:.9rem 1.2rem; margin-bottom:1.6rem; font-size:.9rem}
.ad-flash-bad{border-color:var(--rose); background:rgba(196,142,164,.1)}

.ad-login{max-width:420px; margin:12vh auto; text-align:left}
.ad-login img{margin-bottom:2rem}
.ad-login h1{font-size:1.6rem; margin-bottom:1.6rem}

.ad-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); margin-bottom:2.5rem}
@media (max-width:760px){ .ad-stats{grid-template-columns:repeat(2,1fr)} }
.ad-stat{background:var(--ink); padding:1.4rem; text-decoration:none; color:inherit}
.ad-stat:hover{background:rgba(15,42,58,.4)}
.ad-stat b{display:block; font-family:var(--display); font-size:2rem; font-weight:400}
.ad-stat span{font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ice)}

.ad-card-row{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem}
@media (max-width:860px){ .ad-card-row{grid-template-columns:1fr} }
.ad-card{border:1px solid var(--hair); padding:1.5rem; text-decoration:none; color:inherit; background:rgba(15,42,58,.22)}
.ad-card:hover{border-color:var(--hair-strong)}
.ad-card p{font-size:.9rem; margin:0; color:var(--muted)}

.ad-table{width:100%; border-collapse:collapse; font-size:.9rem}
.ad-table th{text-align:left; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ice); font-weight:600; padding:.7rem .8rem; border-bottom:1px solid var(--hair-strong)}
.ad-table td{padding:.9rem .8rem; border-bottom:1px solid var(--hair); vertical-align:top}
.ad-table a{color:var(--porcelain)}
.ad-right{text-align:right; white-space:nowrap}
.ad-message{max-width:34ch; color:var(--muted); font-size:.85rem}
.ad-done{opacity:.5}

.ad-form{max-width:820px}
.ad-form .cg-field label{color:var(--ice)}
.ad-check{display:flex; align-items:center; gap:.6rem; font-size:.9rem}
.ad-check input{width:auto}
.ad-thumb{width:180px; border:1px solid var(--hair); margin-bottom:.6rem}
.ad-section{margin-top:3.5rem; border-top:1px solid var(--hair); padding-top:2rem}
.ad-upload{display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; margin:1.2rem 0 2rem}
.ad-upload input[type=text]{background:rgba(15,42,58,.35); border:1px solid var(--hair); color:var(--porcelain); padding:.7rem .9rem; font-family:var(--body)}
.ad-photos{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:1.2rem}
.ad-photo{border:1px solid var(--hair); padding:.7rem; display:grid; gap:.4rem}
.ad-photo img{width:100%; aspect-ratio:3/2; object-fit:cover}
.ad-photo label{font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ice); display:grid; gap:.25rem}
.ad-photo input{background:rgba(15,42,58,.35); border:1px solid var(--hair); color:var(--porcelain); padding:.45rem .6rem; font-family:var(--body); font-size:.85rem; width:100%}
.ad-photos > button{grid-column:1/-1; justify-self:start}
.ad-photo-delete{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem}

/* ---------- seat map + tickets ---------- */
.tk-legend{display:flex; flex-wrap:wrap; gap:1.2rem; margin:2.4rem 0 1.6rem; font-size:.8rem}
.tk-key{display:flex; align-items:center; gap:.5rem; color:var(--muted)}
.tk-key i{width:14px; height:14px; border-radius:2px; display:block; border:1px solid rgba(0,0,0,.35)}
.tk-key-taken{background:#2A3540 !important; border-color:var(--hair) !important}
.tk-key-chosen{background:var(--porcelain) !important}

.tk-stage{
  margin:0 auto 1.8rem; max-width:520px; text-align:center; padding:.6rem;
  border:1px solid var(--hair-strong); border-radius:0 0 60% 60%/0 0 30px 30px;
  font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ice)
}

.tk-map{display:grid; gap:.4rem; overflow-x:auto; padding-bottom:.6rem}
.tk-row{display:flex; align-items:center; gap:.3rem; justify-content:center; min-width:max-content}
.tk-row-label{width:1.4rem; flex:none; font-size:.7rem; color:var(--ice); text-align:center}
.tk-seat{position:relative; cursor:pointer}
.tk-seat input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer}
.tk-seat > span[aria-hidden]{
  display:grid; place-items:center; width:26px; height:26px; border-radius:3px;
  background:color-mix(in srgb, var(--seat) 26%, transparent);
  border:1px solid color-mix(in srgb, var(--seat) 60%, transparent);
  font-size:.62rem; color:var(--porcelain); transition:background .15s, transform .15s
}
.tk-seat:hover > span[aria-hidden]{background:color-mix(in srgb, var(--seat) 55%, transparent); transform:translateY(-2px)}
.tk-seat input:checked + span[aria-hidden]{background:var(--porcelain); color:var(--ink); border-color:var(--porcelain); font-weight:600}
.tk-seat input:focus-visible + span[aria-hidden]{outline:2px solid var(--marigold); outline-offset:2px}
.tk-seat.is-out > span[aria-hidden], .tk-seat input:disabled + span[aria-hidden]{
  background:#222B34; border-color:var(--hair); color:rgba(185,198,206,.4); cursor:not-allowed
}
.tk-seat.is-out{cursor:not-allowed}
.tk-seat.is-out:hover > span[aria-hidden]{transform:none; background:#222B34}
.tk-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.tk-summary{
  margin-top:2.4rem; border:1px solid var(--hair); background:rgba(15,42,58,.3);
  padding:1.3rem 1.5rem; max-width:34rem
}
.tk-chosen{margin:0 0 .6rem; font-size:.95rem}
.tk-total{display:flex; justify-content:space-between; align-items:baseline; margin:0 0 .6rem; border-top:1px solid var(--hair); padding-top:.7rem}
.tk-total span{font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ice)}
.tk-total b{font-family:var(--display); font-size:1.8rem; font-weight:400; color:var(--marigold)}

.tk-tickets{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:1rem; margin-top:1.4rem}
.tk-ticket{border:1px solid var(--hair); background:rgba(15,42,58,.3); padding:1.2rem}
.tk-ticket-seat{font-family:var(--display); font-size:1.25rem; margin:0 0 .3rem}
.tk-ticket-tier{font-size:.8rem; color:var(--ice); margin:0 0 .9rem; letter-spacing:.06em}
.tk-ticket-code{font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:1rem; letter-spacing:.12em; margin:0; color:var(--marigold)}

/* ---------- door scanner ---------- */
.dr-verdict{border:2px solid var(--hair-strong); padding:1.3rem 1.5rem; margin:1.5rem 0; text-align:center; transition:background .15s}
.dr-verdict b{display:block; font-family:var(--display); font-size:2rem; font-weight:400; letter-spacing:.04em}
.dr-verdict span{display:block; margin-top:.4rem; font-size:.95rem; color:var(--muted)}
.dr-verdict.is-ok{background:rgba(46,160,90,.22); border-color:#3FBF77}
.dr-verdict.is-ok b{color:#8FE9B4}
.dr-verdict.is-used{background:rgba(229,162,68,.2); border-color:var(--marigold)}
.dr-verdict.is-used b{color:var(--marigold)}
.dr-verdict.is-invalid{background:rgba(200,70,90,.24); border-color:#E0687F}
.dr-verdict.is-invalid b{color:#FF9DAE}
.dr-verdict.is-undone{background:rgba(159,194,210,.16)}
.dr-camera{max-width:460px; margin:0 auto; border:1px solid var(--hair); background:#000; aspect-ratio:4/3; overflow:hidden}
.dr-camera video{width:100%; height:100%; object-fit:cover}
.dr-manual{max-width:460px; margin:1.4rem auto 0}
.dr-manual label{display:block; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ice); margin-bottom:.5rem}
.dr-manual div{display:flex; gap:.6rem}
.dr-manual input{flex:1; background:rgba(15,42,58,.35); border:1px solid var(--hair); color:var(--porcelain); padding:.85rem 1rem; font-family:var(--body); font-size:1.05rem; letter-spacing:.1em; text-transform:uppercase; min-width:0}
.ad-role{background:none; border:1px solid var(--hair); color:var(--muted); cursor:pointer; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; padding:.3rem .6rem; border-radius:2px}
.ad-role:hover:not(:disabled){border-color:var(--ice); color:var(--porcelain)}
.ad-role.is-on{background:var(--marigold); border-color:var(--marigold); color:#180F02; font-weight:600}
.ad-role:disabled{opacity:.35; cursor:not-allowed}
.tk-qr{background:#fff; padding:8px; width:150px; height:150px; margin:0 0 .8rem}

/* ---------- badges + reviews ---------- */
.bd{display:inline-flex; align-items:center; gap:.3rem; border:1px solid var(--bd,#E5A244); color:var(--bd,#E5A244); border-radius:999px; padding:.2rem .6rem; font-size:.72rem; margin:0 .3rem .3rem 0}
.bd-x{background:none; border:0; color:inherit; cursor:pointer; font-size:.9rem; line-height:1; padding:0 0 0 .2rem; opacity:.6}
.bd-x:hover{opacity:1}
.cg-review{border:1px solid var(--hair); background:rgba(15,42,58,.28); padding:1.3rem 1.5rem}
.cg-review-stars{color:var(--marigold); letter-spacing:.15em; margin:0 0 .5rem}
.cg-review-body{margin:0 0 .8rem; font-size:.95rem}
.cg-review-by{margin:0; font-size:.8rem; color:var(--ice)}

/* ================= events, general admission, check-in ================= */

/* ---------- event cards ---------- */
.cg-pill-row{display:flex; flex-wrap:wrap; gap:.4rem; align-items:center}
.cg-pill-quiet{border-color:var(--hair-strong); color:var(--ice)}

/* ---------- ticket types: the general-admission equivalent of a seat map ---------- */
.tk-types{display:grid; gap:.7rem; max-width:44rem}
.tk-type{
  display:grid; grid-template-columns:1fr auto; gap:.8rem 1.2rem; align-items:center;
  border:1px solid var(--hair); background:rgba(15,42,58,.28); padding:1rem 1.2rem;
}
.tk-types-buy .tk-type{grid-template-columns:1fr auto auto}
.tk-type b{display:block; font-size:1.02rem}
.tk-type .cg-dim{display:block; font-size:.82rem; color:rgba(185,198,206,.75)}
.tk-type-price{font-family:var(--display); font-size:1.4rem; color:var(--marigold); white-space:nowrap; text-align:right}
.tk-type-flag{
  display:inline-block; margin-top:.25rem; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--marigold); border:1px solid var(--marigold); border-radius:999px; padding:.14rem .55rem;
}
.tk-type.is-out{opacity:.45}
.tk-type.is-out .tk-type-price{color:var(--muted)}
.tk-type-link{text-decoration:none; color:inherit; transition:border-color .15s, background .15s}
.tk-type-link:hover{border-color:var(--hair-strong); background:rgba(15,42,58,.45)}
.tk-type-link.is-out{pointer-events:none}
.tk-qty input{
  width:4.6rem; background:rgba(5,10,17,.6); border:1px solid var(--hair-strong); color:var(--porcelain);
  padding:.6rem .5rem; font-family:var(--body); font-size:1.15rem; text-align:center;
}
.tk-qty input:disabled{opacity:.4; cursor:not-allowed}
@media (max-width:620px){
  .tk-type, .tk-types-buy .tk-type{grid-template-columns:1fr auto}
  .tk-qty{grid-column:1/-1; justify-self:start}
}

/* ---------- the online joining link, only ever shown on a paid booking ---------- */
.tk-join{
  border:1px solid var(--marigold); background:rgba(229,162,68,.09);
  padding:1.4rem 1.6rem; margin-top:2.2rem; max-width:44rem;
}
.tk-join-label{margin:0 0 .5rem; font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--marigold)}
.tk-join-link{margin:0 0 .7rem; font-size:1.02rem; word-break:break-all}
.tk-join-link a{color:var(--porcelain)}

/* ---------- naming the guests on a multi-ticket booking ---------- */
.tk-ticket-day{font-size:.76rem; color:var(--muted); margin:0 0 .7rem; letter-spacing:.04em}
.tk-names{margin-top:2rem; border:1px solid var(--hair); padding:1.1rem 1.4rem; max-width:44rem}
.tk-names summary{cursor:pointer; font-size:.9rem; color:var(--ice)}
.tk-name-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:.9rem; margin:1.1rem 0 1.2rem}
.tk-name-grid label{display:grid; gap:.3rem; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ice)}
.tk-name-grid input[type=text]{
  background:rgba(15,42,58,.35); border:1px solid var(--hair); color:var(--porcelain);
  padding:.6rem .8rem; font-family:var(--body); font-size:.95rem; text-transform:none; letter-spacing:normal;
}

/* ---------- check-in dashboard ---------- */
.ck-scroll{overflow-x:auto}
.ck-table{min-width:48rem}
.ck-table code{font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:.85rem; letter-spacing:.08em; color:var(--marigold)}
.ck-bar{margin-top:.4rem; height:4px; background:var(--hair); width:5.5rem; border-radius:2px; overflow:hidden}
.ck-bar i{display:block; height:100%; background:#3FBF77}
.ck-outstanding{color:var(--marigold); font-weight:600}
.ck-in{color:#8FE9B4; font-size:.85rem}
.ck-out{color:rgba(185,198,206,.7); font-size:.85rem}

.ad-release{display:flex; flex-wrap:wrap; gap:1.2rem; margin-top:1.6rem; align-items:center}
.ad-release form{display:flex; gap:.5rem; align-items:center; font-size:.85rem; border:1px solid var(--hair); padding:.5rem .8rem}
.ad-release input[type=number]{background:rgba(15,42,58,.35); border:1px solid var(--hair); color:var(--porcelain); padding:.35rem .5rem; font-family:var(--body)}

/* ---------- door: the wrong-day verdict ---------- */
/* Amber says "already in tonight"; this blue says "real ticket, wrong night" —
   a different conversation, so it must not look like the same refusal. */
.dr-verdict.is-wrongday{background:rgba(159,194,210,.2); border-color:var(--ice)}
.dr-verdict.is-wrongday b{color:var(--ice)}
.dr-note{display:block; margin-top:.3rem; font-size:.8rem; color:var(--ice)}
.dr-tonight{border-color:var(--marigold)}

/* ================= admin form controls ================= */
/* mrx: one rule for every control in the admin, instead of the handful of
   per-page patches that were here before (.ad-upload input[type=text],
   .ad-photo input, …). Anything that wasn't inside a .cg-field — which is
   every input in every table, and every dropdown on every page — fell back to
   the browser's default white box on a near-black page. */

.ad-body input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),
.ad-body select,
.ad-body textarea{
  background:rgba(15,42,58,.45); border:1px solid var(--hair); color:var(--porcelain);
  font-family:var(--body); font-size:.88rem; line-height:1.35;
  padding:.5rem .65rem; border-radius:2px; max-width:100%;
}
.ad-body textarea{resize:vertical}
.ad-body input::placeholder, .ad-body textarea::placeholder{color:rgba(185,198,206,.45)}

.ad-body input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):focus,
.ad-body select:focus,
.ad-body textarea:focus{
  border-color:var(--ice); outline:none; background:rgba(15,42,58,.75);
  box-shadow:0 0 0 2px rgba(159,194,210,.14);
}
.ad-body input:disabled, .ad-body select:disabled, .ad-body textarea:disabled{opacity:.5; cursor:not-allowed}
.ad-body input[readonly]{opacity:.65; cursor:default}

/* Own arrow, because the native one is drawn in the browser's chrome colour and
   sits on the wrong background even with color-scheme set. */
.ad-body select{
  appearance:none; -webkit-appearance:none; padding-right:1.9rem; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%239FC2D2' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .7rem center;
}
.ad-body select option{background:var(--midnight); color:var(--porcelain)}

/* A colour picker is a swatch, not a text field — size it like one. */
.ad-body input[type=color]{
  width:3rem; height:2.1rem; padding:2px; background:rgba(15,42,58,.45);
  border:1px solid var(--hair); border-radius:2px; cursor:pointer;
}
.ad-body input[type=color]:hover{border-color:var(--hair-strong)}

.ad-body input[type=file]{font-size:.85rem; color:var(--muted); max-width:100%}
.ad-body input[type=file]::file-selector-button{
  background:rgba(159,194,210,.12); border:1px solid var(--hair); color:var(--porcelain);
  font-family:var(--body); font-size:.8rem; letter-spacing:.06em;
  padding:.45rem .9rem; margin-right:.8rem; border-radius:2px; cursor:pointer;
}
.ad-body input[type=file]::file-selector-button:hover{background:rgba(159,194,210,.2); border-color:var(--hair-strong)}

.ad-body input[type=checkbox], .ad-body input[type=radio]{accent-color:var(--marigold); width:1rem; height:1rem; cursor:pointer}

/* In a table a field should fill its cell; the roomier .cg-field sizing used by
   the big edit forms is re-asserted below so the two don't fight. */
.ad-table input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),
.ad-table select,
.ad-table textarea{width:100%}
.ad-table td > input + input, .ad-table td > select + select{margin-top:.35rem}
/* Filling the cell is right, but a cell is only as wide as its content wants to
   be — so a name field in a crowded table collapsed to about three characters.
   A floor on the text fields sets what the column has to make room for. */
.ad-table input[type=text], .ad-table input[type=email], .ad-table input[type=url]{min-width:8rem}
.ad-table input[type=datetime-local], .ad-table input[type=date]{min-width:11rem}
/* A table with ten columns of controls does not fit a laptop. Scrolling it is
   honest; squeezing every field to nothing is not. */
.ad-scroll{overflow-x:auto; margin-inline:-.2rem; padding-inline:.2rem}
.ad-scroll > .ad-table{min-width:64rem}

.ad-body .cg-field input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),
.ad-body .cg-field select,
.ad-body .cg-field textarea{padding:.8rem 1rem; font-size:.95rem; width:100%}
.ad-body .cg-field select{padding-right:2.2rem}
.ad-body .cg-field textarea{min-height:120px}

/* The filter/upload strips are flex rows, so their controls keep their own width. */
.ad-upload input, .ad-upload select{width:auto; min-width:0}

/* .cg-form is a grid, so a bare submit button stretches the full column width
   and reads like a banner. The public forms each hand-patch this with an inline
   justify-self; the admin gets it once, here. */
.ad-body .cg-form > button, .ad-body .cg-form > .cg-btn{justify-self:start}