/* ============================================================
   AFTER 5 — after5rock.com
   Design system. Edit tokens here; everything else follows.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@500;700;800;900&family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Barlow+Condensed:wght@500;600;700&display=swap');

:root{
  /* --- palette: stage lighting on warm black --- */
  --ink:      #0A0908;   /* page background, warm-shifted black */
  --stage:    #14100E;   /* raised panel */
  --stage-2:  #1D1815;   /* hover / inset */
  --line:     #2E2621;   /* hairline */
  --ember:    #C81E2B;   /* primary red */
  --flare:    #FF4A3D;   /* hot red, hover + glow only */
  --brass:    #E0A526;   /* cymbal brass, the accent that earns its keep */
  --bone:     #F3EEE7;   /* primary text */
  --haze:     #A79E96;   /* secondary text */
  --dim:      #6E655E;   /* tertiary / captions */

  /* --- type --- */
  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --body:    "Barlow", system-ui, -apple-system, sans-serif;
  --util:    "Barlow Condensed", "Arial Narrow", sans-serif;

  /* --- rhythm --- */
  --gutter: clamp(18px, 4vw, 40px);
  --maxw: 1180px;
  --section-y: clamp(56px, 9vw, 112px);
  --r: 4px;              /* deliberately tight radius — poster stock, not app chrome */
}

*,*::before,*::after{box-sizing:border-box}

/* [hidden] must beat any class that sets display — the async modules rely on it. */
[hidden]{display:none!important}

html{scroll-behavior:smooth}
/* the header is sticky, so anchored sections need to clear it */
section[id],main[id]{scroll-margin-top:86px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:var(--brass);text-decoration:none}
a:hover{color:var(--flare)}

:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
  border-radius:2px;
}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}

/* ---------- type scale ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:.92;letter-spacing:-.005em;margin:0}
h1{font-size:clamp(3.2rem,11vw,7.5rem);text-transform:uppercase}
h2{font-size:clamp(2.3rem,6vw,4.2rem);text-transform:uppercase}
h3{font-size:clamp(1.5rem,3vw,2.1rem);text-transform:uppercase;letter-spacing:.005em}
p{margin:0 0 1.1em}
.lede{font-size:clamp(1.05rem,2vw,1.24rem);color:var(--haze);max-width:62ch}

/* eyebrow: the small tracked label above a heading. Always says what the
   section *is*, never decoration. */
.eyebrow{
  font-family:var(--util);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.8rem;
  color:var(--brass);
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 14px;
}
.eyebrow::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,var(--line),transparent)}

.center .eyebrow{justify-content:center}
.center .eyebrow::after{display:none}

.section-head{margin-bottom:clamp(28px,4vw,48px)}
.section-head .lede{margin-top:16px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--util);font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:.95rem;
  padding:14px 26px;border-radius:var(--r);
  border:1px solid transparent;cursor:pointer;
  transition:transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease;
  text-align:center;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ember);color:#fff;box-shadow:0 0 0 0 rgba(255,74,61,.5)}
.btn-primary:hover{background:var(--flare);color:#fff;box-shadow:0 8px 30px -8px rgba(255,74,61,.7)}
.btn-ghost{border-color:var(--line);color:var(--bone);background:transparent}
.btn-ghost:hover{border-color:var(--brass);color:var(--brass);background:rgba(224,165,38,.06)}
.btn-brass{background:var(--brass);color:#1A1206}
.btn-brass:hover{background:#F2B93B;color:#1A1206}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:80;
  background:rgba(10,9,8,.82);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;height:70px;
}
.brand{display:flex;align-items:center;gap:12px;color:var(--bone)}
.brand:hover{color:var(--bone)}
.brand-mark{
  font-family:var(--display);font-weight:900;font-size:1.85rem;
  text-transform:uppercase;letter-spacing:-.02em;line-height:1;
}
.brand-mark em{font-style:normal;color:var(--ember)}
.brand img{height:38px;width:auto}

.nav-links{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.nav-links a{
  font-family:var(--util);font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;font-size:.92rem;color:var(--haze);
  padding:9px 13px;border-radius:var(--r);display:block;
  transition:color .15s, background .15s;
}
.nav-links a:hover{color:var(--bone);background:var(--stage-2)}
.nav-links a[aria-current="page"]{color:var(--brass);background:rgba(224,165,38,.08)}

.nav-toggle{
  display:none;background:none;border:1px solid var(--line);
  border-radius:var(--r);color:var(--bone);padding:9px 12px;cursor:pointer;
  font-family:var(--util);text-transform:uppercase;letter-spacing:.12em;font-size:.88rem;
}

@media (max-width:1000px){
  .nav-toggle{display:block}
  .nav-links{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--ink);border-bottom:1px solid var(--line);
    padding:8px var(--gutter) 18px;
    display:none;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 4px;font-size:1.05rem;border-bottom:1px solid var(--line)}
}

/* ============================================================
   HERO — the signature. A par-can wash over the stage shot.
   ============================================================ */
.hero{
  position:relative;isolation:isolate;
  min-height:min(88vh,760px);
  display:flex;align-items:flex-end;
  padding:0 0 clamp(40px,7vw,86px);
  overflow:hidden;
}
/* Background image, not an <img>, so a missing file degrades to plain dark
   instead of a broken-image icon. */
.hero-media{
  position:absolute;inset:0;z-index:-3;
  background:#0A0908 center 32%/cover no-repeat;
}
/* the wash: two overlapping cones of warm light spilling from above */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(60% 78% at 22% -12%, rgba(224,165,38,.30), transparent 62%),
    radial-gradient(55% 72% at 80% -14%, rgba(200,30,43,.34), transparent 60%);
  mix-blend-mode:screen;
  pointer-events:none;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg, rgba(10,9,8,.55) 0%, rgba(10,9,8,.30) 38%, rgba(10,9,8,.96) 92%);
}
.hero-inner{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.hero h1{
  max-width:16ch;
  text-shadow:0 4px 40px rgba(0,0,0,.7);
}
.hero h1 .yr{color:var(--brass);display:inline-block}
.hero .kicker{
  font-family:var(--util);font-weight:700;text-transform:uppercase;
  letter-spacing:.3em;font-size:.86rem;color:var(--bone);
  margin:0 0 18px;opacity:.85;
}
.hero .hero-sub{margin:20px 0 30px;max-width:52ch;color:var(--bone);opacity:.9}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}

/* page hero for interior pages — shorter, no photo required */
.page-head{
  position:relative;padding:clamp(48px,8vw,92px) 0 clamp(30px,5vw,52px);
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(70% 130% at 12% 0%, rgba(200,30,43,.14), transparent 58%),
    radial-gradient(60% 120% at 88% 0%, rgba(224,165,38,.10), transparent 60%);
}
.page-head h1{font-size:clamp(2.6rem,8vw,5.2rem)}
.page-head .lede{margin-top:18px}

/* ============================================================
   MARQUEE STRIP — next show, styled like a venue letterboard
   ============================================================ */
.marquee{
  border-block:1px solid var(--line);
  background:var(--stage);
  overflow:hidden;
}
.marquee-inner{
  display:flex;align-items:center;gap:26px;
  padding:16px var(--gutter);
  max-width:var(--maxw);margin-inline:auto;
  flex-wrap:wrap;
}
.marquee-tag{
  font-family:var(--util);font-weight:700;text-transform:uppercase;
  letter-spacing:.2em;font-size:.78rem;color:#1A1206;
  background:var(--brass);padding:5px 11px;border-radius:2px;white-space:nowrap;
}
.marquee-body{
  font-family:var(--display);font-weight:700;font-size:clamp(1.2rem,2.6vw,1.7rem);
  text-transform:uppercase;letter-spacing:.01em;line-height:1.1;
  flex:1;min-width:220px;
}
.marquee-body .dot{color:var(--ember);margin-inline:10px}
.marquee.is-empty{display:none}

/* ============================================================
   GENERIC CARD / GRID
   ============================================================ */
.grid{display:grid;gap:clamp(14px,2vw,22px)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.grid-form{grid-template-columns:minmax(0,1fr)}
@media(min-width:880px){.grid-form{grid-template-columns:minmax(0,1.45fr) minmax(260px,1fr);gap:clamp(28px,4vw,56px)}}

.card{
  background:var(--stage);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  transition:border-color .18s ease, transform .18s ease;
}
.card:hover{border-color:#463A31;transform:translateY(-2px)}
.card-body{padding:18px 20px 22px}
.card h3{font-size:1.25rem;margin-bottom:8px}
.card p{color:var(--haze);font-size:.95rem;margin:0}

/* ---------- states shared by every async module ---------- */
.state{
  text-align:center;padding:60px 20px;color:var(--haze);
  font-family:var(--util);text-transform:uppercase;letter-spacing:.16em;font-size:.95rem;
}
.state strong{display:block;font-family:var(--display);font-size:1.6rem;letter-spacing:0;color:var(--bone);margin-bottom:10px;text-transform:uppercase}
.state p{font-family:var(--body);text-transform:none;letter-spacing:0;font-size:1rem;max-width:46ch;margin:0 auto 18px}
.spinner{
  width:34px;height:34px;margin:0 auto 18px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--ember);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- filter pills (social + gallery + shows) ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.pill{
  font-family:var(--util);font-weight:600;text-transform:uppercase;letter-spacing:.13em;
  font-size:.86rem;padding:9px 17px;border-radius:100px;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--haze);
  transition:all .15s ease;
}
.pill:hover{color:var(--bone);border-color:#463A31}
.pill[aria-pressed="true"]{background:var(--bone);border-color:var(--bone);color:var(--ink)}

/* ============================================================
   LIGHTBOX — shared by videos, social, gallery
   ============================================================ */
.lb{
  position:fixed;inset:0;z-index:200;display:none;
  background:rgba(6,5,5,.94);
  padding:clamp(14px,4vw,44px);
  overflow-y:auto;
}
.lb.open{display:grid;place-items:center}
.lb-panel{
  position:relative;width:100%;max-width:1000px;
  background:var(--stage);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.7);
}
.lb-close{
  position:absolute;top:10px;right:10px;z-index:5;
  width:40px;height:40px;border-radius:50%;cursor:pointer;
  background:rgba(10,9,8,.8);border:1px solid var(--line);color:var(--bone);
  font-size:1.2rem;line-height:1;display:grid;place-items:center;
}
.lb-close:hover{background:var(--ember);border-color:var(--ember);color:#fff}
.lb-media{background:#000;display:grid;place-items:center}
.lb-media img{max-height:74vh;width:auto;object-fit:contain}
.lb-media .ratio{position:relative;width:100%;padding-top:56.25%}
.lb-media .ratio iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lb-meta{padding:18px 22px 22px;border-top:1px solid var(--line)}
.lb-meta h3{font-size:1.4rem;margin-bottom:8px}
.lb-meta .when{font-family:var(--util);text-transform:uppercase;letter-spacing:.15em;font-size:.8rem;color:var(--dim)}
.lb-meta .text{color:var(--haze);margin:10px 0 0;white-space:pre-wrap;font-size:.96rem}
.lb-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{border-top:1px solid var(--line);background:var(--stage);margin-top:0}
.footer-grid{
  display:grid;gap:clamp(28px,5vw,56px);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  padding-block:clamp(44px,6vw,72px);
}
.footer-grid h4{
  font-family:var(--util);font-weight:700;text-transform:uppercase;letter-spacing:.2em;
  font-size:.82rem;color:var(--brass);margin-bottom:16px;
}
.footer-grid p,.footer-grid li{color:var(--haze);font-size:.94rem}
.footer-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.footer-grid ul a{color:var(--haze)}
.footer-grid ul a:hover{color:var(--brass)}
.foot-brand .brand-mark{font-size:2.4rem;margin-bottom:12px}
.social-row{display:flex;gap:10px;margin-top:6px}
.social-row a{
  width:42px;height:42px;display:grid;place-items:center;border-radius:var(--r);
  border:1px solid var(--line);color:var(--haze);transition:all .15s;
}
.social-row a:hover{border-color:var(--brass);color:var(--brass);background:rgba(224,165,38,.06)}
.social-row svg{width:19px;height:19px;fill:currentColor}
.colophon{
  border-top:1px solid var(--line);padding-block:20px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-size:.82rem;color:var(--dim);
}

/* ============================================================
   FORMS (contact + booking)
   ============================================================ */
.field{display:grid;gap:7px;margin-bottom:18px}
.field label{
  font-family:var(--util);font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:.8rem;color:var(--haze);
}
.field input,.field select,.field textarea{
  background:var(--ink);border:1px solid var(--line);border-radius:var(--r);
  color:var(--bone);font-family:var(--body);font-size:1rem;padding:12px 14px;
  width:100%;transition:border-color .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brass);outline:none}
.field textarea{min-height:150px;resize:vertical}
.field-row{display:grid;gap:0 18px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.form-note{font-size:.85rem;color:var(--dim);margin-top:-6px}
.form-status{margin-top:14px;font-family:var(--util);text-transform:uppercase;letter-spacing:.14em;font-size:.9rem}
.form-status.ok{color:var(--brass)}
.form-status.err{color:var(--flare)}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}

/* ============================================================
   UTILITIES
   ============================================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.center{text-align:center}
.mt-l{margin-top:clamp(28px,4vw,48px)}
.skip{
  position:absolute;left:-999px;top:0;z-index:300;background:var(--brass);color:#1A1206;
  padding:10px 16px;font-family:var(--util);text-transform:uppercase;letter-spacing:.14em;
}
.skip:focus{left:10px;top:10px}

/* ============================================================
   MODULE: VIDEO WALL
   ============================================================ */
.vid-card .vid-thumb{
  display:block;width:100%;padding:0;border:0;cursor:pointer;
  position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;
}
.vid-card .vid-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease,opacity .2s}
.vid-card:hover .vid-thumb img{transform:scale(1.045);opacity:.8}
.vid-play{
  position:absolute;inset:0;margin:auto;width:60px;height:60px;border-radius:50%;
  background:rgba(200,30,43,.92);display:grid;place-items:center;
  transition:transform .18s ease, background .18s ease;
}
.vid-play::after{
  content:"";border-left:17px solid #fff;border-top:11px solid transparent;
  border-bottom:11px solid transparent;margin-left:5px;
}
.vid-card:hover .vid-play{transform:scale(1.1);background:var(--flare)}
.vid-when{font-family:var(--util);text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;color:var(--dim)}
.vid-card h3{font-size:1.12rem;line-height:1.05}

.tool-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:26px}
.tool-row input[type="search"]{
  background:var(--stage);border:1px solid var(--line);border-radius:100px;
  color:var(--bone);font-family:var(--body);padding:11px 20px;min-width:min(320px,100%);
}
.tool-row input[type="search"]:focus{border-color:var(--brass);outline:none}

/* ============================================================
   MODULE: SOCIAL WALL
   ============================================================ */
.so-tile{position:relative;border-radius:var(--r);overflow:hidden;background:var(--stage);border:1px solid var(--line)}
.so-hit{
  display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;
  position:relative;aspect-ratio:1/1;overflow:hidden;
}
.so-hit img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.so-tile:hover .so-hit img{transform:scale(1.06)}
.so-textonly{
  width:100%;height:100%;display:grid;place-items:center;padding:24px;
  font-family:var(--display);font-size:1.3rem;line-height:1.15;text-transform:uppercase;
  color:var(--bone);background:linear-gradient(150deg,var(--stage-2),var(--ink));text-align:center;
}
.so-badge{
  position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;
  background:rgba(10,9,8,.78);display:grid;place-items:center;color:var(--bone);
  backdrop-filter:blur(4px);
}
.so-ic{width:15px;height:15px;fill:currentColor;vertical-align:-2px}
.so-vid{
  position:absolute;left:10px;top:10px;width:0;height:0;
  border-left:13px solid var(--bone);border-top:9px solid transparent;border-bottom:9px solid transparent;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.8));
}
/* The caption and counts used to live in a hover overlay, which meant they
   were invisible on a phone and invisible until you moused over on a
   desktop. They sit under the image now, always readable. */
.so-tile{display:flex;flex-direction:column}
.so-body{
  display:flex;flex-direction:column;gap:10px;
  padding:13px 15px 14px;flex:1 1 auto;text-align:left;
  border-top:1px solid var(--line);
}
.so-cap{
  margin:0;font-size:.9rem;line-height:1.45;color:var(--bone);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
/* a post with no message at all — say what it is instead of nothing */
.so-cap-none{
  color:var(--dim);font-family:var(--util);text-transform:uppercase;
  letter-spacing:.14em;font-size:.78rem;
}
.so-meta{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  margin-top:auto;padding-top:2px;
}
.so-counts{display:flex;gap:14px;font-family:var(--util);font-size:.84rem;letter-spacing:.06em;color:var(--haze)}
.so-counts span{display:inline-flex;align-items:center;gap:5px}
.so-tile:hover .so-counts{color:var(--bone)}
.so-when{font-family:var(--util);text-transform:uppercase;letter-spacing:.13em;font-size:.72rem;color:var(--dim);white-space:nowrap}

/* counts inside the lightbox, under the full caption */
.so-lb-counts{
  display:flex;gap:20px;margin-top:14px;
  font-family:var(--util);letter-spacing:.08em;font-size:.9rem;color:var(--haze);
}
.so-lb-counts span{display:inline-flex;align-items:center;gap:7px}

.social-fallback{display:grid;gap:32px;grid-template-columns:minmax(0,1fr);align-items:start}
@media(min-width:860px){.social-fallback{grid-template-columns:520px minmax(0,1fr)}}
.fb-embed{background:var(--stage);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;min-height:560px}
.fb-embed iframe{width:100%;height:700px;border:0;display:block}

/* ============================================================
   MODULE: PRESS GALLERY
   ============================================================ */
.ga-sec + .ga-sec{margin-top:clamp(44px,6vw,76px)}
.ga-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin-bottom:22px}
.ga-head h2{font-size:clamp(1.7rem,4vw,2.6rem)}
.ga-head [data-count]{font-family:var(--util);text-transform:uppercase;letter-spacing:.16em;font-size:.8rem;color:var(--dim)}

.ga-tile{margin:0;background:var(--stage);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .18s}
.ga-tile:hover{border-color:#463A31}
.ga-hit{
  display:block;width:100%;padding:0;border:0;cursor:pointer;
  aspect-ratio:4/3;background:var(--ink);overflow:hidden;
}
.ga-hit img{width:100%;height:100%;object-fit:cover}
/* logos need a light checkerboard so transparency is legible */
.ga-tile.is-logo .ga-hit{
  background-color:#EDE8E1;
  background-image:
    linear-gradient(45deg,#D8D1C8 25%,transparent 25%,transparent 75%,#D8D1C8 75%),
    linear-gradient(45deg,#D8D1C8 25%,transparent 25%,transparent 75%,#D8D1C8 75%);
  background-size:18px 18px;background-position:0 0,9px 9px;
}
.ga-tile.is-logo .ga-hit img{object-fit:contain;padding:16px}
.ga-cap{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px}
.ga-name{font-family:var(--util);text-transform:uppercase;letter-spacing:.1em;font-size:.82rem;color:var(--haze);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ga-dl{
  font-family:var(--util);text-transform:uppercase;letter-spacing:.1em;font-size:.74rem;
  color:var(--brass);border:1px solid var(--line);border-radius:100px;padding:4px 11px;white-space:nowrap;
}
.ga-dl:hover{border-color:var(--brass);background:rgba(224,165,38,.08)}

/* ============================================================
   MODULE: SHOWS
   ============================================================ */
.gig{
  display:grid;gap:18px;align-items:center;
  grid-template-columns:74px auto 1fr auto;
  padding:20px 22px;
  background:var(--stage);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .18s, background .18s;
}
.gig + .gig{margin-top:12px}
.gig:hover{border-color:#463A31;background:var(--stage-2)}
.gig-date{
  text-align:center;border-right:1px solid var(--line);padding-right:16px;
  display:grid;gap:1px;
}
.gig-mo{font-family:var(--util);text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;color:var(--ember)}
.gig-day{font-family:var(--display);font-weight:800;font-size:2.5rem;line-height:.85}
.gig-dow{font-family:var(--util);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--dim)}
.gig-logo{width:64px;height:64px;display:grid;place-items:center;background:#fff;border-radius:var(--r);overflow:hidden}
.gig-logo img{max-width:100%;max-height:100%;object-fit:contain;padding:6px}
.gig-main h3{font-size:1.5rem;margin-bottom:6px}
.gig-meta{display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--haze);font-size:.92rem}
.gig-tag{
  display:inline-block;margin-top:9px;
  font-family:var(--util);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;
  color:var(--brass);border:1px solid rgba(224,165,38,.35);border-radius:100px;padding:3px 11px;
}
@media(max-width:760px){
  .gig{grid-template-columns:64px 1fr;row-gap:14px;padding:16px}
  .gig-logo{grid-column:2;width:52px;height:52px}
  .gig-main{grid-column:1 / -1}
  .gig-act{grid-column:1 / -1}
}

/* ============================================================
   MODULE: SONGS
   ============================================================ */
.sl-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  padding-bottom:24px;margin-bottom:26px;
  border-bottom:1px solid var(--line);
}
.sl-search{position:relative;flex:1 1 260px;max-width:420px}
.sl-search input{
  width:100%;background:var(--stage);border:1px solid var(--line);border-radius:var(--r);
  color:var(--bone);font-family:var(--body);font-size:1rem;padding:12px 14px 12px 40px;
}
.sl-search input:focus{border-color:var(--brass);outline:none}
.sl-search input::placeholder{color:var(--dim)}
.sl-search svg{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;fill:none;stroke:var(--dim);stroke-width:2;pointer-events:none;
}
.sl-count{font-family:var(--util);text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;color:var(--brass)}

/* one A-Z list, balanced into columns by the browser */
.sl-list{
  list-style:none;margin:0;padding:0;
  columns:3 260px;column-gap:clamp(24px,4vw,44px);
}
.sl-song{
  break-inside:avoid;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 9px;
  padding:9px 0;border-bottom:1px solid rgba(46,38,33,.55);
}
.sl-title{color:var(--bone);font-weight:600;font-size:1rem;line-height:1.25}
.sl-artist{color:var(--haze);font-size:.9rem}
.sl-artist::before{content:"— ";color:var(--dim)}


/* ============================================================
   MODULE: BRAND LOGO + PHOTOGRAPHY
   ============================================================ */
/* scoped under .brand so these beat the older `.brand img` rule above,
   which is more specific than a bare .brand-logo class would be */
.brand .brand-logo{height:38px;width:auto;display:block}
.foot-brand .foot-logo{height:50px;width:auto;display:block;margin-bottom:14px}
@media(max-width:560px){ .brand .brand-logo{height:30px} }

/* photo on top of a feature card */
.card-media{
  aspect-ratio:16/10;overflow:hidden;background:#000;
  border-bottom:1px solid var(--line);
}
.card-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease;
}
.card:hover .card-media img{transform:scale(1.045)}

/* stage-photo mosaic */
/* fixed row height rather than per-tile aspect-ratio: wide frames span two
   columns and still line up with their neighbours instead of leaving gaps */
.pstrip{
  display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  grid-auto-rows:clamp(148px,17vw,215px);
}
.pshot{
  margin:0;position:relative;overflow:hidden;border-radius:var(--r);
  border:1px solid var(--line);background:#000;height:100%;
  cursor:zoom-in;
}
.pshot img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease, opacity .3s;
}
.pshot:hover img{transform:scale(1.06)}
.pshot:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
/* let the two full-band frames run wide on roomy screens */
@media(min-width:900px){
  .pshot.is-wide{grid-column:span 2}
}

/* photographic page-head for interior pages */
.page-head.has-photo{
  isolation:isolate;overflow:hidden;
  border-bottom:1px solid var(--line);
}
.page-head.has-photo .ph-media{
  position:absolute;inset:0;z-index:-2;
  background:#0A0908 center 38%/cover no-repeat;
  opacity:.32;
}
.page-head.has-photo::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg, rgba(10,9,8,.62) 0%, rgba(10,9,8,.80) 70%, var(--ink) 100%);
}

/* ============================================================
   MODULE: THE JOURNEY — "We take you there."
   Three decades, three identities, taken from the band's own
   poster: seventies desert amber, eighties neon, nineties acid
   green. Kept abstract on purpose — genres, not track listings.
   ============================================================ */
/* the poster leads the section */
.jrn-poster{
  margin:0 0 clamp(30px,4.5vw,48px);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:#000;
}
.jrn-poster img{width:100%;height:auto;display:block}

.jrn-title{
  font-size:clamp(2.2rem,6vw,3.8rem);line-height:.95;margin:0 0 14px;
  background:linear-gradient(92deg,#F0A32B 0%,#FF5C7A 38%,#B96CFF 66%,#59C8F0 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* the gradient is decoration; make sure it still reads if clip is unsupported */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .jrn-title{background:none;color:var(--bone)}
}
.jrn-lede{margin:0 0 clamp(32px,5vw,50px)}

.eras{
  display:grid;gap:clamp(16px,2.4vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
}
.era{
  position:relative;isolation:isolate;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,3vw,34px) clamp(20px,2.6vw,30px) clamp(26px,3vw,34px);
  background:var(--stage);
}
/* the decade's own light, thrown from the top corner */
.era::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 90% at 12% -18%, var(--glow, rgba(224,165,38,.30)), transparent 64%);
}
.era::after{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--d),var(--d2,var(--d)));
}
.era-num{
  font-family:var(--display);font-weight:900;line-height:.82;
  font-size:clamp(3.4rem,9vw,5rem);letter-spacing:-.02em;margin:0 0 4px;
  background:linear-gradient(180deg,var(--d2,var(--d)),var(--d));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 34px var(--glow, rgba(224,165,38,.4));
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .era-num{background:none;color:var(--d)}
}
.era-genres{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:5px}
.era-genres li{
  font-family:var(--util);font-weight:700;text-transform:uppercase;letter-spacing:.16em;
  font-size:.94rem;color:var(--bone);
}
.era-note{color:var(--haze);font-size:.95rem;margin:0;max-width:34ch}

/* the closing lines off the poster */
.jrn-close{
  margin-top:clamp(34px,5vw,52px);padding-top:clamp(26px,4vw,36px);
  border-top:1px solid var(--line);
}
.jrn-real{
  font-family:var(--util);font-weight:700;text-transform:uppercase;letter-spacing:.2em;
  font-size:clamp(.9rem,2.2vw,1.15rem);color:var(--bone);margin:0 0 10px;
}
.jrn-timeless{
  font-family:var(--util);text-transform:uppercase;letter-spacing:.22em;
  font-size:.84rem;color:var(--dim);margin:0 0 26px;
}

/* the keyless video wall is YouTube's own playlist player */
.video-embed{
  position:relative;width:100%;padding-top:56.25%;
  background:#000;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- event shares ---------- */
.so-ev-name{
  margin:0;font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:1.05rem;line-height:1.1;color:var(--bone);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.so-ev{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;
  font-family:var(--util);text-transform:uppercase;letter-spacing:.12em;font-size:.76rem;
}
.so-ev-when{color:var(--brass);font-weight:600}
.so-ev-where{color:var(--haze)}
.so-ev.is-off .so-ev-when{color:var(--dim);text-decoration:line-through}
.so-ev-off{
  color:var(--ember);font-weight:700;border:1px solid rgba(200,30,43,.4);
  border-radius:100px;padding:1px 8px;
}

/* event detail inside the lightbox */
.so-ev-detail{margin:14px 0 0;display:grid;gap:9px}
.so-ev-detail div{display:grid;grid-template-columns:74px minmax(0,1fr);gap:12px;align-items:baseline}
.so-ev-detail dt{
  font-family:var(--util);text-transform:uppercase;letter-spacing:.16em;
  font-size:.72rem;color:var(--dim);
}
.so-ev-detail dd{margin:0;color:var(--bone);font-size:.96rem}

/* facebook's own player, kept 16:9 */
.so-video{position:relative;width:100%;padding-top:56.25%;background:#000}
.so-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.so-video video{position:absolute;inset:0;width:100%;height:100%;background:#000;display:block}

/* the venue under an event name, when the two differ */
.gig-venue{
  font-family:var(--util);font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:.82rem;color:var(--haze);
  margin-top:4px;
}
.lb-meta .gig-venue{margin:2px 0 8px}

/* ---------- row actions ----------
   Details used to be a full-size .btn, which made a wide bar that
   outweighed the show name beside it and dwarfed the calendar pills
   underneath. Everything here is now the same small pill family, with
   Details carrying a little more weight than the rest. */
.gig-act{
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  white-space:nowrap;
}
.gig-details{
  font-family:var(--util);font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:.78rem;line-height:1;
  color:var(--bone);background:var(--stage-2);
  border:1px solid var(--line);border-radius:100px;
  padding:9px 20px;cursor:pointer;
  transition:color .15s, border-color .15s, background .15s;
}
.gig-details:hover{color:var(--brass);border-color:var(--brass);background:rgba(224,165,38,.07)}

.gig-cal{display:flex;flex-wrap:wrap;align-items:center;gap:6px;justify-content:flex-end}
.gig-cal-label{
  font-family:var(--util);text-transform:uppercase;letter-spacing:.16em;
  font-size:.66rem;color:var(--dim);margin-right:2px;
}
.gig-cal-btn{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--util);font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  font-size:.7rem;line-height:1;
  color:var(--haze);background:transparent;
  border:1px solid var(--line);border-radius:100px;
  padding:6px 10px;cursor:pointer;
  transition:color .15s, border-color .15s, background .15s;
}
.gig-cal-btn:hover{color:var(--brass);border-color:var(--brass);background:rgba(224,165,38,.06)}
.cal-ic{width:12px;height:12px;flex:none}

@media(max-width:760px){
  .gig-act{align-items:stretch;gap:10px}
  .gig-details{width:100%;padding:12px 20px}
  .gig-cal{justify-content:flex-start;white-space:normal}
}


/* ============================================================
   MODULE: AVAILABILITY
   Ported from the standalone availability page. Every rule is
   scoped under .avail, and the module's :root variables land on
   .avail too — it shipped its own --ember, --ink and --line, plus
   .state, .spinner, .grid, .dot and .eyebrow, all of which
   already mean something else on this site. Its Anton/Oswald
   type is mapped onto the site's own fonts.
   ============================================================ */
.avail{
    --crimson:#b01217;
    --ember:#ff342b;
    --gold:#e3b24a;
    --ink:#0b0b0e;
    --ink-2:#15151a;
    --panel:#1c1c22;
    --panel-2:#23232b;
    --line:rgba(255,255,255,.08);
    --txt:#f3f3f5;
    --muted:#9a9aa4;

    /* status colors */
    --open:#34c759;          /* open weekend - bookable */
    --open-bg:rgba(52,199,89,.13);
    --open-line:rgba(52,199,89,.45);
    --booked:#ff342b;        /* gig already booked */
    --booked-bg:rgba(255,52,43,.13);
    --booked-line:rgba(255,52,43,.4);
    --blocked:#8a8a93;       /* member unavailable */
    --blocked-bg:rgba(138,138,147,.12);
    --holiday:#e3b24a;       /* holiday accent */
    --holiday-bg:rgba(227,178,74,.14);
    --holiday-line:rgba(227,178,74,.5);
  }
.avail /* ---------- HEADER ---------- */
  .top{
    text-align:center;padding:40px 20px 26px;border-bottom:1px solid var(--line);
    background:radial-gradient(ellipse at 50% -20%, rgba(176,18,23,.3), transparent 60%),var(--ink);
  }
.avail .wordmark{
    font-family:var(--display);font-weight:400;
    font-size:clamp(2.4rem,8vw,4rem);line-height:.9;
    letter-spacing:.02em;text-transform:uppercase;
    background:linear-gradient(180deg,#ff342b 0%,#e3b24a 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 4px 14px rgba(255,52,43,.35));
    margin-bottom:6px;
  }
.avail .eyebrow{
    font-weight:600;text-transform:uppercase;letter-spacing:.4em;
    color:var(--gold);font-size:.68rem;margin-left:.4em;
  }
.avail h1{
    font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,6vw,3rem);
    text-transform:uppercase;letter-spacing:.01em;line-height:.98;margin:6px 0 6px;
  }
.avail .sub{color:var(--muted);font-size:.96rem;max-width:540px;margin:0 auto}
.avail .internal{
    display:inline-block;margin-top:12px;font-weight:600;font-size:.68rem;
    text-transform:uppercase;letter-spacing:.16em;color:var(--ember);
    border:1px solid var(--booked-line);border-radius:999px;padding:5px 14px;
  }
.avail /* ---------- CONTROLS / LEGEND ---------- */
  .controls{
    position:sticky;top:0;z-index:20;
    background:rgba(11,11,14,.92);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    padding:14px 18px;
  }
.avail .controls-inner{
    max-width:1080px;margin:0 auto;
    display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  }
.avail .legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.78rem;font-weight:400}
.avail .legend span{display:inline-flex;align-items:center;gap:7px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.avail .dot{width:13px;height:13px;border-radius:4px;display:inline-block;flex:none}
.avail .dot.open{background:var(--open-bg);border:1.5px solid var(--open-line)}
.avail .dot.booked{background:var(--booked-bg);border:1.5px solid var(--booked-line)}
.avail .dot.blocked{background:var(--blocked-bg);border:1.5px solid var(--line)}
.avail .dot.holiday{background:var(--holiday-bg);border:1.5px solid var(--holiday-line)}
.avail .filter{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px;gap:2px}
.avail .filter button{
    font-family:var(--body);font-weight:500;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;
    color:var(--muted);background:transparent;border:0;cursor:pointer;padding:7px 14px;border-radius:999px;transition:.16s;white-space:nowrap;
  }
.avail .filter button[aria-pressed="true"]{background:linear-gradient(135deg,var(--ember),var(--crimson));color:#fff}
.avail .ctrl-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.avail .pager{display:inline-flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px}
.avail .pager button{
    font-family:var(--body);font-weight:600;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;
    color:var(--txt);background:transparent;border:0;cursor:pointer;padding:7px 12px;border-radius:999px;transition:.16s;white-space:nowrap;
  }
.avail .pager button:hover:not(:disabled){background:var(--panel-2);color:var(--gold)}
.avail .pager button:disabled{color:var(--muted);opacity:.4;cursor:default}
.avail .p-label{font-family:var(--body);font-weight:500;font-size:.74rem;letter-spacing:.04em;color:var(--gold);min-width:118px;text-align:center;white-space:nowrap}
.avail .pager[hidden]{display:none}
.avail .pager-bottom{display:flex;width:max-content;margin:22px auto 6px;justify-content:center}
.avail /* ---------- OPEN-DATES QUICK LIST ---------- */
  .summary{max-width:1080px;margin:26px auto 0;padding:0 18px}
.avail .summary h2{
    font-family:var(--body);font-weight:600;text-transform:uppercase;letter-spacing:.12em;
    font-size:.82rem;color:var(--gold);margin-bottom:12px;display:flex;align-items:center;gap:10px;
  }
.avail .summary h2::after{content:"";flex:1;height:1px;background:var(--line)}
.avail .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.avail .chip{
    display:inline-flex;flex-direction:column;align-items:flex-start;
    background:var(--open-bg);border:1px solid var(--open-line);border-radius:10px;
    padding:7px 12px;min-width:96px;
  }
.avail .chip .d{font-family:var(--body);font-weight:600;font-size:.92rem;color:var(--txt)}
.avail .chip .w{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--open)}
.avail .chip.holi{background:var(--holiday-bg);border-color:var(--holiday-line)}
.avail .chip.holi .w{color:var(--holiday)}
.avail .chip .h{font-size:.66rem;color:var(--holiday);margin-top:1px}
.avail /* ---------- CALENDAR GRID ---------- */
  main{max-width:1080px;margin:0 auto;padding:30px 18px 20px}
.avail .month{margin-bottom:34px}
.avail .month-h{
    font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.02em;
    font-size:1.35rem;margin-bottom:12px;display:flex;align-items:baseline;gap:12px;
  }
.avail .month-h .yr{font-family:var(--body);font-weight:300;color:var(--muted);font-size:.9rem;letter-spacing:.1em}
.avail .month-h .openct{
    margin-left:auto;font-family:var(--body);font-weight:500;font-size:.74rem;
    text-transform:uppercase;letter-spacing:.06em;color:var(--open);
    background:var(--open-bg);border:1px solid var(--open-line);border-radius:999px;padding:3px 11px;
  }
.avail .grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.avail .dow{
    text-align:center;font-weight:600;font-size:.66rem;text-transform:uppercase;
    letter-spacing:.1em;color:var(--muted);padding:4px 0;
  }
.avail .dow.we{color:var(--gold)}
.avail .cell{
    position:relative;min-height:70px;border-radius:10px;padding:6px 7px;
    border:1px solid var(--line);background:var(--ink-2);
    display:flex;flex-direction:column;
  }
.avail .cell.empty{background:transparent;border:0}
.avail .cell .num{font-family:var(--body);font-weight:500;font-size:.82rem;color:var(--muted);line-height:1}
.avail .cell .tag{margin-top:auto;font-size:.66rem;font-weight:500;text-transform:uppercase;letter-spacing:.03em;line-height:1.15}
.avail .cell .venue{font-size:.72rem;font-weight:500;color:var(--txt);line-height:1.12;margin-top:3px;word-break:break-word}
.avail /* weekday non-weekend, .avail nothing special: muted */
  .cell.weekday{opacity:.42}
.avail /* OPEN weekend/holiday - the money cells */
  .cell.open{background:var(--open-bg);border-color:var(--open-line)}
.avail .cell.open .num{color:var(--open);font-weight:700}
.avail .cell.open .tag{color:var(--open)}
.avail /* clickable open dates -> request form */
  .cell.clickable{cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.avail .cell.clickable:hover{transform:translateY(-2px);background:rgba(52,199,89,.24);box-shadow:0 8px 22px rgba(52,199,89,.26)}
.avail .cell.clickable:focus-visible{outline:2px solid var(--open);outline-offset:2px}
.avail /* A genuine filled button — unmistakably clickable */
  .bookbtn{
    margin-top:auto;background:var(--open);color:#04220e;
    font-family:var(--body);font-weight:700;font-size:.63rem;
    text-transform:uppercase;letter-spacing:.05em;text-align:center;
    border-radius:999px;padding:4px 6px;line-height:1.25;
    box-shadow:0 2px 8px rgba(52,199,89,.45);
    animation:bkpulse 2.6s ease-in-out infinite;
  }
.avail .bk-mini{display:none}
@keyframes bkpulse{
    0%,100%{box-shadow:0 2px 8px rgba(52,199,89,.45)}
    50%{box-shadow:0 2px 14px rgba(52,199,89,.85)}
  }
.avail .cell.clickable:hover .bookbtn{
    background:#fff;color:#04220e;animation:none;
    box-shadow:0 3px 14px rgba(255,255,255,.4);
  }
.avail /* hint banner above the calendar */
  .bookhint{
    display:flex;align-items:center;justify-content:center;gap:9px;
    max-width:1080px;margin:18px auto 0;padding:11px 16px;
    background:var(--open-bg);border:1px solid var(--open-line);border-radius:12px;
    font-family:var(--body);font-weight:400;font-size:.86rem;color:var(--txt);text-align:center;
  }
.avail .bookhint b{color:var(--open);font-weight:600}
.avail .bookhint .plus{
    flex:none;font-size:1.05rem;line-height:1;
  }
.avail /* BOOKED gig */
  .cell.booked{background:var(--booked-bg);border-color:var(--booked-line)}
.avail .cell.booked .num{color:var(--ember);font-weight:700}
.avail .cell.booked .tag{color:var(--ember)}
.avail /* BLOCKED member unavailable */
  .cell.blocked{background:var(--blocked-bg)}
.avail .cell.blocked .num{color:var(--txt)}
.avail .cell.blocked .tag{color:var(--muted)}
.avail /* HOLIDAY marker - gold top stripe + label, .avail layers on top of open/booked */
  .cell.holiday{box-shadow:inset 0 3px 0 var(--holiday)}
.avail .cell.holiday.weekday{opacity:1;background:var(--holiday-bg);border-color:var(--holiday-line)}
.avail .cell.holiday.weekday .num{color:var(--holiday);font-weight:700}
.avail .holi-label{
    font-size:.62rem;font-weight:600;color:var(--holiday);text-transform:uppercase;
    letter-spacing:.03em;line-height:1.1;margin-top:2px;
  }
.avail /* a holiday that's also open = strongest call-to-action: green fill + gold stripe */
  .cell.open.holiday{background:var(--open-bg);box-shadow:inset 0 3px 0 var(--holiday)}
.avail .past{opacity:.32 !important}
.avail /* ---------- STATES ---------- */
  .state{text-align:center;padding:54px 20px;color:var(--muted)}
.avail .state .big{font-family:var(--display);font-size:1.5rem;color:var(--txt);text-transform:uppercase;margin-bottom:8px}
.avail .spinner{width:34px;height:34px;border-radius:50%;margin:0 auto 16px;border:3px solid rgba(255,255,255,.12);border-top-color:var(--ember);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.avail .state a{color:var(--gold)}
.avail /* ---------- REQUEST MODAL ---------- */
  /* Positioned ABSOLUTE (not fixed): inside an auto-height iframe there is no
     independent viewport, .avail so we anchor the card near the clicked date to
     guarantee it's on screen. */
  .rq{position:absolute;inset:0;z-index:200;display:none}
.avail .rq.open{display:block}
.avail .rq-back{position:absolute;inset:0;background:rgba(0,0,0,.74)}
.avail .rq-card{
    position:absolute;left:50%;transform:translateX(-50%);
    width:min(560px,calc(100% - 28px));
    background:var(--panel);border:1px solid var(--line);border-radius:18px;
    box-shadow:0 30px 80px rgba(0,0,0,.65);padding:24px 22px 22px;
    scrollbar-width:thin;scrollbar-color:var(--gold) transparent;
  }
.avail .rq-card::-webkit-scrollbar{width:8px}
.avail .rq-card::-webkit-scrollbar-track{background:transparent;margin:12px 0}
.avail .rq-card::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,var(--ember),var(--gold));
    border-radius:999px;border:2px solid var(--panel);background-clip:padding-box;
  }
.avail .rq-close{
    position:absolute;top:12px;right:14px;width:32px;height:32px;border-radius:50%;
    background:var(--panel-2);border:1px solid var(--line);color:var(--txt);
    font-size:1.3rem;line-height:1;cursor:pointer;transition:.15s;
  }
.avail .rq-close:hover{background:var(--ember);border-color:var(--ember);color:#fff}
.avail .rq-eyebrow{font-family:var(--body);font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:.66rem;color:var(--gold)}
.avail .rq-date{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.5rem;line-height:1.1;margin:4px 0 2px}
.avail .rq-sub{color:var(--muted);font-size:.86rem;margin-bottom:16px}
.avail .rq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.avail .rq-f{display:flex;flex-direction:column;gap:5px}
.avail .rq-f.full{grid-column:1 / -1}
.avail .rq-f label{font-family:var(--body);font-weight:500;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.avail .rq-f label .req{color:var(--ember)}
.avail .rq-f input, .avail .rq-f select, .avail .rq-f textarea{
    font-family:var(--body);font-weight:300;font-size:.92rem;color:var(--txt);
    background:var(--ink-2);border:1px solid var(--line);border-radius:9px;padding:10px 11px;width:100%;
  }
.avail .rq-f input:focus, .avail .rq-f select:focus, .avail .rq-f textarea:focus{outline:none;border-color:var(--gold)}
.avail .rq-f textarea{resize:vertical;min-height:74px}
.avail .rq-f select{cursor:pointer}
.avail .rq-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.avail .rq-btn{
    flex:1;min-width:150px;font-family:var(--body);font-weight:600;font-size:.82rem;
    text-transform:uppercase;letter-spacing:.05em;padding:13px 16px;border-radius:999px;cursor:pointer;
    border:0;transition:.15s;text-align:center;
  }
.avail .rq-send{background:linear-gradient(135deg,var(--ember),var(--crimson));color:#fff}
.avail .rq-send:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 22px rgba(255,52,43,.36)}
.avail .rq-send:disabled{opacity:.55;cursor:default}
.avail .rq-cancel{background:transparent;color:var(--txt);border:1px solid var(--line)}
.avail .rq-cancel:hover{border-color:var(--gold);color:var(--gold)}
.avail .rq-msg{margin-top:14px;font-size:.86rem;padding:11px 13px;border-radius:10px;display:none}
.avail .rq-msg.show{display:block}
.avail .rq-msg.ok{background:var(--open-bg);border:1px solid var(--open-line);color:var(--open)}
.avail .rq-msg.err{background:var(--booked-bg);border:1px solid var(--booked-line);color:var(--ember)}
.avail .rq-done{text-align:center;padding:14px 0 4px}
.avail .rq-done .big{font-family:var(--display);font-size:1.5rem;text-transform:uppercase;color:var(--open);margin-bottom:8px}
.avail .rq-done p{color:var(--muted);font-size:.9rem}
@media(max-width:560px){.avail .rq-grid{grid-template-columns:1fr}}
.avail /* ---------- FOOTER ---------- */

  footer{text-align:center;padding:32px 20px 48px;border-top:1px solid var(--line);margin-top:20px;color:var(--muted)}
.avail footer .foot-wordmark{
    font-family:var(--display);font-weight:400;text-transform:uppercase;
    font-size:1.4rem;letter-spacing:.06em;color:var(--gold);
    opacity:.85;margin-bottom:10px;
  }
.avail .copy{font-size:.72rem;opacity:.6;margin-top:8px}
.avail .dl-link{
    display:inline-flex;align-items:center;gap:8px;
    font-family:var(--body);font-weight:600;text-transform:uppercase;
    letter-spacing:.08em;font-size:.78rem;color:var(--ink);background:var(--gold);
    padding:11px 22px;border-radius:999px;text-decoration:none;margin-bottom:6px;
    transition:transform .16s ease,box-shadow .16s ease;
  }
.avail .dl-link:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(227,178,74,.34)}
@media(max-width:720px){.avail .cell{min-height:58px;padding:5px}.avail .cell .venue{font-size:.64rem}.avail .legend{font-size:.72rem;gap:11px;width:100%;order:2;justify-content:center}.avail .filter{order:1;margin:0 auto}.avail .controls-inner{justify-content:center}}
@media(max-width:480px){.avail .grid{gap:3px}.avail .cell{min-height:54px;border-radius:7px}.avail .cell .tag, .avail .cell .venue, .avail .holi-label{display:none}.avail .cell .num{font-size:.78rem}.avail /* keep the button visible on phones, .avail just show "+" instead of text */
    .bookbtn{font-size:.78rem;padding:1px 4px;letter-spacing:0}.avail .bk-full{display:none}.avail .bk-mini{display:inline}}
@media(prefers-reduced-motion:reduce){.avail .spinner{animation:none}.avail .bookbtn{animation:none}}
/* The dialog was built to live in an auto-height iframe, where it had to be
   absolutely positioned against the document and measured in JS. As a real
   page it just needs fixed, centred and scrollable. */
.avail .rq{position:fixed;inset:0;z-index:200;display:none;height:auto}
.avail .rq.open{display:grid;place-items:center;padding:14px}
.avail .rq-card{
  position:relative;left:auto;top:auto;transform:none;
  max-height:calc(100vh - 28px);overflow-y:auto;
}
.avail .rq-back{position:fixed;inset:0}