/* ============================================================
   NIGHTLIFE — Couple From Phoenix
   Burlesque marquee: wine-black, neon rouge, champagne gold
   ============================================================ */

:root{
  --ink:#150810;
  --velvet:#26101d;
  --velvet-2:#1d0c17;
  --rouge:#ff2e7e;
  --rouge-dim:#c92263;
  --champagne:#f0c67f;
  --cream:#f6ecdf;
  --mauve:#a98b9c;
  --line:rgba(240,198,127,.22);
  --glow:0 0 6px rgba(255,46,126,.85), 0 0 22px rgba(255,46,126,.45), 0 0 48px rgba(255,46,126,.25);
  --maxw:1160px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ink);
  color:var(--cream);
  font-family:"Jost",system-ui,-apple-system,sans-serif;
  font-weight:300;
  line-height:1.65;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(60% 45% at 50% -5%, rgba(255,46,126,.13), transparent 70%),
    radial-gradient(45% 40% at 85% 110%, rgba(240,198,127,.06), transparent 70%);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{width:min(var(--maxw),92%);margin:0 auto;position:relative;z-index:1}

/* focus — accessibility floor */
:focus-visible{outline:2px solid var(--rouge);outline-offset:3px}

/* ---------- shared bits ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--champagne);font-weight:400;
}
.eyebrow::before,.eyebrow::after{content:"";width:26px;height:1px;background:var(--line)}

.stub{
  display:inline-block;font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);background:var(--champagne);font-weight:500;
  padding:.28rem .75rem;
  -webkit-mask:radial-gradient(circle 4px at 0 50%,transparent 96%,#000) left,
               radial-gradient(circle 4px at 100% 50%,transparent 96%,#000) right;
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.stub.pink{background:var(--rouge);color:#fff}
.stub.mauve{background:var(--mauve);color:var(--ink)}
.stub.rainbow{
  background:linear-gradient(100deg,var(--rouge),var(--champagne));
  color:var(--ink);
}

/* multiple badges stack with a gap, wrap on small screens */
.thumb-badges{position:absolute;top:.9rem;left:.9rem;right:.9rem;z-index:2;
  display:flex;gap:.4rem;flex-wrap:wrap}
.article-badges{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-bottom:1.6rem}
a.stub{transition:filter .2s}
a.stub:hover{filter:brightness(1.15)}

.btn{
  display:inline-block;
  font-size:.75rem;letter-spacing:.28em;text-transform:uppercase;font-weight:500;
  padding:.95rem 2.1rem;border:1px solid var(--rouge);color:var(--rouge);
  background:transparent;cursor:pointer;transition:all .3s;
}
.btn:hover,.btn:focus-visible{background:var(--rouge);color:#fff;box-shadow:0 0 24px rgba(255,46,126,.4)}
.btn.gold{border-color:var(--champagne);color:var(--champagne)}
.btn.gold:hover,.btn.gold:focus-visible{background:var(--champagne);color:var(--ink);box-shadow:0 0 24px rgba(240,198,127,.35)}

/* ---------- nav ---------- */
.site-nav{
  position:sticky;top:0;z-index:100;
  background:rgba(21,8,16,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1rem 0}
.brand{font-family:"Bodoni Moda",Georgia,serif;font-size:1.15rem;letter-spacing:.06em;white-space:nowrap}
.brand em{color:var(--rouge);font-style:italic;text-shadow:var(--glow)}
.nav-links{display:flex;gap:1.9rem;font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;font-weight:400;list-style:none}
.nav-links a{color:var(--mauve);transition:color .25s;white-space:nowrap}
.nav-links a:hover,.nav-links a.active{color:var(--cream)}
.nav-links a.active{color:var(--rouge)}

.nav-toggle{
  display:none;background:none;border:1px solid var(--line);
  color:var(--cream);padding:.5rem .7rem;cursor:pointer;font-size:1rem;line-height:1;
}

/* ---------- hero ---------- */
.hero{padding:6.5rem 0 4.5rem;text-align:center}
.hero .eyebrow{margin-bottom:2.2rem}
.wordmark{
  font-family:"Bodoni Moda",Georgia,serif;font-weight:500;
  font-size:clamp(2.6rem,7.5vw,5.6rem);
  line-height:1.04;letter-spacing:.01em;
}
.wordmark .neon{
  display:block;font-style:italic;font-weight:600;color:var(--rouge);
  text-shadow:var(--glow);animation:flicker 9s infinite;
}
@keyframes flicker{
  0%,100%{opacity:1}
  91%{opacity:1} 92%{opacity:.55} 93%{opacity:1}
  95%{opacity:.75} 96%{opacity:1}
}
.motto{
  font-family:"Bodoni Moda",Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(1.05rem,2.2vw,1.4rem);color:var(--mauve);
  max-width:46ch;margin:2.3rem auto 0;line-height:1.75;
}
.motto strong{color:var(--champagne);font-weight:500}
.hero-cta{margin-top:2.8rem;display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap}

.bulbs{display:flex;justify-content:center;gap:14px;margin:4rem auto 0;width:min(520px,80%)}
/* base visual (size/shape/color) lives here; the lit/unlit opacity states
   and stagger timing are defined once, together, further down in the
   scroll-reveal section — avoids two rules with identical specificity
   fighting over source order, which is exactly the kind of bug that bit
   the search modal earlier tonight. */
.bulbs i{width:6px;height:6px;border-radius:50%;background:var(--champagne)}

/* ---------- sections ---------- */
.section{padding:4.5rem 0}
.sec-head{text-align:center;margin-bottom:3rem}
.sec-head h2{
  font-family:"Bodoni Moda",Georgia,serif;font-weight:500;
  font-size:clamp(1.7rem,3.4vw,2.5rem);margin-top:1rem;letter-spacing:.02em;
}

/* ---------- featured ---------- */
.feature{
  display:grid;grid-template-columns:1.2fr 1fr;
  border:1px solid var(--line);
  background:linear-gradient(160deg,var(--velvet),var(--velvet-2));
  position:relative;
}
.feature::before,.feature::after{
  content:"";position:absolute;width:8px;height:8px;border-radius:50%;
  background:var(--rouge);box-shadow:var(--glow);
}
.feature::before{top:-4px;left:-4px}
.feature::after{bottom:-4px;right:-4px}
.feature .visual{position:relative;overflow:hidden;min-height:340px;background:var(--velvet-2)}
.feature .visual img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05)}
.feature .copy{padding:3rem;display:flex;flex-direction:column;justify-content:center;gap:1.05rem;align-items:flex-start}
.feature h3{font-family:"Bodoni Moda",Georgia,serif;font-weight:500;font-size:1.9rem;line-height:1.15}
.feature h3 a:hover{color:var(--rouge)}
.feature p{color:var(--mauve);font-size:.98rem}
.byline{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--champagne)}
.readmore{font-size:.75rem;letter-spacing:.26em;text-transform:uppercase;color:var(--rouge);font-weight:500;margin-top:.3rem}
.readmore::after{content:" \2192"}

/* ---------- card grid ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.card{
  border:1px solid rgba(240,198,127,.14);background:var(--velvet-2);
  display:flex;flex-direction:column;
  transition:transform .3s,border-color .3s,box-shadow .3s;
}
.card:hover,.card:focus-within{
  transform:translateY(-5px);border-color:rgba(255,46,126,.5);
  box-shadow:0 18px 40px -18px rgba(255,46,126,.35);
}
.card .thumb{position:relative;aspect-ratio:3/2;overflow:hidden;background:#1a0b14}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .thumb img{transform:scale(1.04)}
.card .thumb .stub{position:absolute;top:.9rem;left:.9rem;z-index:2}
.card .body{padding:1.4rem 1.5rem 1.7rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.card h4{font-family:"Bodoni Moda",Georgia,serif;font-weight:500;font-size:1.18rem;line-height:1.3}
.card h4 a:hover{color:var(--rouge)}
.card p{color:var(--mauve);font-size:.88rem;flex:1}
.meta{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--champagne)}

/* ---------- article / single post ---------- */
.article-head{padding:5rem 0 2.5rem;text-align:center;border-bottom:1px solid var(--line)}
.article-head .stub{margin-bottom:1.6rem}
.article-head h1{
  font-family:"Bodoni Moda",Georgia,serif;font-weight:500;
  font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.12;max-width:22ch;margin:0 auto;
}
.article-meta{margin-top:1.6rem;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mauve)}
.article-meta .who{color:var(--champagne)}

.article-hero{
  margin:0 auto;max-width:var(--maxw);width:92%;margin-top:-1px;
  position:relative;overflow:hidden;
}
.article-hero img{width:100%;max-height:520px;object-fit:cover;display:block;border:1px solid rgba(240,198,127,.4)}

.prose{
  width:min(760px,92%);margin:3.5rem auto 0;
  font-size:1.06rem;line-height:1.85;color:rgba(246,236,223,.9);
}
.prose > *+*{margin-top:1.5rem}
.prose h2{
  font-family:"Bodoni Moda",Georgia,serif;font-weight:500;color:var(--cream);
  font-size:1.85rem;margin-top:3.2rem;line-height:1.25;
  padding-bottom:.7rem;border-bottom:1px solid var(--line);
}
.prose h3{font-family:"Bodoni Moda",Georgia,serif;font-weight:500;color:var(--champagne);font-size:1.4rem;margin-top:2.4rem}
.prose h4{font-size:1.1rem;color:var(--champagne);letter-spacing:.04em;margin-top:2rem}
.prose a{color:var(--rouge);border-bottom:1px solid rgba(255,46,126,.35);transition:border-color .2s}
.prose a:hover{border-bottom-color:var(--rouge)}
.prose strong{color:var(--cream);font-weight:500}
.prose em{color:var(--champagne)}
.prose img{
  margin:2.6rem auto 0;border:1px solid var(--line);
  box-shadow:0 20px 50px -25px rgba(0,0,0,.9);
}
/* italic line directly after an image = caption */
.prose img + em,
.prose p > img + em{
  display:block;text-align:center;font-size:.85rem;color:var(--mauve);
  margin-top:.9rem;font-style:italic;letter-spacing:.02em;
}
.prose blockquote{
  border-left:2px solid var(--rouge);padding:.4rem 0 .4rem 1.6rem;
  color:var(--champagne);font-family:"Bodoni Moda",Georgia,serif;font-style:italic;font-size:1.2rem;
}
.prose ul,.prose ol{padding-left:1.3rem}
.prose li{margin-top:.5rem}
.prose li::marker{color:var(--rouge)}
.prose hr{border:0;height:1px;background:var(--line);margin:3rem 0}

/* tags + share footer on a post */
.article-foot{width:min(760px,92%);margin:4rem auto 0;padding-top:2rem;border-top:1px solid var(--line)}
.tags{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.tags .lbl{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mauve);margin-right:.4rem}
.tag{
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--line);padding:.3rem .8rem;color:var(--mauve);transition:all .25s;
}
.tag:hover{border-color:var(--rouge);color:var(--rouge)}

/* prev / next */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;width:min(760px,92%);margin:3rem auto 0}
.pager a{
  border:1px solid var(--line);padding:1.4rem 1.6rem;transition:border-color .25s,background .25s;
  display:flex;flex-direction:column;gap:.5rem;
}
.pager a:hover{border-color:var(--rouge);background:var(--velvet-2)}
.pager .dir{font-size:.65rem;letter-spacing:.26em;text-transform:uppercase;color:var(--rouge)}
.pager .t{font-family:"Bodoni Moda",Georgia,serif;font-size:1.05rem;line-height:1.3}
.pager .next{text-align:right;align-items:flex-end}

/* ---------- coming attractions ---------- */
.attractions{border-block:1px solid var(--line);background:linear-gradient(180deg,rgba(38,16,29,.6),transparent)}
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.date-card{border:1px dashed rgba(240,198,127,.3);padding:1.7rem;text-align:center;transition:border-color .3s}
.date-card:hover{border-color:var(--rouge)}
.date-card .d{font-family:"Bodoni Moda",Georgia,serif;font-size:2rem;color:var(--champagne);line-height:1}
.date-card .m{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--mauve);margin-top:.4rem}
.date-card h5{font-family:"Bodoni Moda",Georgia,serif;font-weight:500;font-size:1.05rem;margin:.9rem 0 .3rem}
.date-card p{font-size:.82rem;color:var(--mauve)}
.date-card .where{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rouge);margin-top:.7rem}
.soon{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--rouge);text-align:center;margin-top:2.2rem}

/* ---------- paid placement ---------- */
.placement{
  border:1px dashed rgba(255,46,126,.4);padding:2.2rem;text-align:center;
  color:var(--mauve);font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;
}
.placement b{color:var(--rouge);font-weight:500}
.placement.filled{border-style:solid;border-color:var(--line);padding:0;overflow:hidden}
.placement.filled img{width:100%}

/* sidebar-ish inline slot inside a post */
.slot-inline{
  width:min(760px,92%);margin:3rem auto 0;
  border:1px dashed rgba(240,198,127,.28);padding:1.6rem;text-align:center;
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mauve);
}

/* ---------- pagination ---------- */
.pagination{display:flex;gap:.5rem;justify-content:center;margin-top:3.5rem;list-style:none;flex-wrap:wrap}
.pagination a,.pagination span{
  display:block;min-width:42px;text-align:center;padding:.6rem .8rem;
  border:1px solid var(--line);font-size:.8rem;color:var(--mauve);transition:all .25s;
}
.pagination a:hover{border-color:var(--rouge);color:var(--rouge)}
.pagination .active span{background:var(--rouge);border-color:var(--rouge);color:#fff}
.pagination .disabled span{opacity:.3}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);padding:3.5rem 0 2.5rem;text-align:center;margin-top:5rem}
.site-foot .brand{font-size:1.4rem;display:inline-block}
.site-foot .motto{font-size:.95rem;margin-top:1.1rem}
.reach-out{
  display:inline-block;margin-top:2.2rem;
  font-family:"Bodoni Moda",Georgia,serif;font-style:italic;font-weight:500;
  font-size:1.3rem;color:var(--champagne);border-bottom:1px solid rgba(240,198,127,.4);
  padding-bottom:.2rem;transition:color .25s,border-color .25s;
}
.reach-out:hover{color:var(--rouge);border-color:var(--rouge)}
.fine{margin-top:2.2rem;font-size:.68rem;color:rgba(169,139,156,.6);letter-spacing:.08em}
.fine a{color:var(--mauve);border-bottom:1px solid var(--line)}

/* ---------- taxonomy header ---------- */
.tax-head{padding:5rem 0 1rem;text-align:center}
.tax-head h1{font-family:"Bodoni Moda",Georgia,serif;font-weight:500;font-size:clamp(2rem,4.5vw,3rem);margin-top:1rem}
.tax-head p{color:var(--mauve);margin-top:1rem;font-size:.95rem}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .grid,.timeline{grid-template-columns:repeat(2,1fr)}
  .feature{grid-template-columns:1fr}
  .feature .visual{min-height:230px}
  .feature .copy{padding:2.2rem}
  .nav-toggle{display:block}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;background:var(--ink);
    border-bottom:1px solid var(--line);padding:1rem 0;
  }
  .nav-links.open{display:flex}
  .nav-links li{padding:.85rem 4%}
    .pager{grid-template-columns:1fr}
}
@media(max-width:560px){
  .grid,.timeline{grid-template-columns:1fr}
  .hero{padding:4rem 0 3rem}
  .section{padding:3.2rem 0}
  .prose{font-size:1rem}
  .socials{gap:1.2rem}
}

/* ---------- other hub ---------- */
.other-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.other-tile{
  border:1px solid var(--line);background:var(--velvet-2);
  padding:2.4rem 1.6rem;text-align:center;transition:all .3s;
}
.other-tile:hover{border-color:var(--rouge);transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(255,46,126,.3)}
.other-tile h3{font-family:"Bodoni Moda",Georgia,serif;font-weight:500;font-size:1.3rem}
.other-tile .count{display:block;margin-top:.6rem;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mauve)}
@media(max-width:900px){.other-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.other-grid{grid-template-columns:1fr}}

/* ---------- nav icons ---------- */
.nav-icons{display:flex;align-items:center;gap:.6rem}
.icon-btn{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;color:var(--mauve);background:none;border:1px solid transparent;
  cursor:pointer;transition:color .25s,border-color .25s;
}
.icon-btn:hover,.icon-btn:focus-visible{color:var(--rouge);border-color:var(--line)}

/* ---------- Other disclosure (nav) ---------- */
.nav-other{position:relative}
.nav-other summary{
  cursor:pointer;list-style:none;color:var(--mauve);
  display:flex;align-items:center;gap:.35rem;
}
.nav-other summary::-webkit-details-marker{display:none}
.nav-other summary::after{content:"\25BE";font-size:.6rem;color:var(--champagne)}
.nav-other[open] summary{color:var(--cream)}
.nav-other ul{list-style:none}

/* desktop: floats as a dropdown panel */
@media(min-width:901px){
  .nav-other{padding:0}
  .nav-other ul{
    position:absolute;top:100%;left:0;margin-top:.9rem;min-width:190px;
    background:var(--velvet-2);border:1px solid var(--line);
    padding:.6rem 0;box-shadow:0 20px 40px -20px rgba(0,0,0,.7);z-index:20;
  }
  .nav-other ul li{padding:0}
  .nav-other ul a{display:block;padding:.6rem 1.2rem;font-size:.72rem;letter-spacing:.16em;color:var(--mauve)}
  .nav-other ul a:hover{color:var(--rouge);background:rgba(255,46,126,.06)}
}

/* mobile: expands inline, indented */
@media(max-width:900px){
  .nav-links li.nav-other{padding:0}
  .nav-other summary{padding:.85rem 4%}
  .nav-other ul{padding-left:8%;padding-bottom:.4rem}
  .nav-other ul a{display:block;padding:.6rem 0;font-size:.72rem;color:var(--mauve)}
}

/* ---------- search modal ---------- */
.search-modal{
  position:fixed;inset:0;z-index:200;background:rgba(21,8,16,.94);
  backdrop-filter:blur(8px);display:flex;align-items:flex-start;justify-content:center;
  padding:8vh 1.2rem 2rem;overflow-y:auto;
}
/* The [hidden] attribute and a plain class selector carry the SAME CSS
   specificity — so .search-modal{display:flex} above was silently
   overriding the browser's own [hidden]{display:none} default every
   time, since author CSS always loads after the browser's built-in
   rules and ties go to whichever comes later. This combined selector
   is more specific than either alone, so it wins unambiguously. */
.search-modal[hidden]{display:none}
.search-panel{width:min(680px,100%)}
.search-head{
  display:flex;align-items:center;gap:1rem;
  border-bottom:2px solid var(--rouge);padding-bottom:1rem;margin-bottom:1.6rem;
}
.search-input{
  flex:1;background:none;border:none;color:var(--cream);
  font-family:"Bodoni Moda",Georgia,serif;font-size:1.6rem;font-style:italic;
  outline:none;
}
.search-input::placeholder{color:var(--mauve)}
.search-hint{color:var(--mauve);font-size:.9rem;text-align:center;padding:2rem 0}
.search-result{
  display:block;padding:1.2rem 0;border-bottom:1px solid var(--line);
}
.search-result:hover .sr-cats,
.search-result:hover h4{color:var(--rouge)}
.sr-cats{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--champagne)}
.search-result h4{
  font-family:"Bodoni Moda",Georgia,serif;font-weight:500;font-size:1.15rem;
  margin-top:.4rem;transition:color .2s;
}
.search-result p{color:var(--mauve);font-size:.88rem;margin-top:.4rem}
.search-result mark{background:none;color:var(--rouge);font-weight:600}

/* ---------- upcoming events ---------- */
.events-timeline{display:flex;flex-direction:column;gap:3rem}
.event-day{display:grid;grid-template-columns:110px 1fr;gap:1.8rem;align-items:start}
.event-day-head{text-align:center;padding-top:.3rem;position:sticky;top:90px}
.event-day-num{display:block;font-family:"Bodoni Moda",Georgia,serif;font-size:2.6rem;color:var(--champagne);line-height:1}
.event-day-month{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mauve);margin-top:.3rem}

.event-day-row{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.2rem;
  border-left:1px dashed var(--line);padding-left:1.8rem;align-items:start;
}
.event-tile{
  display:flex;flex-direction:column;border:1px solid var(--line);background:var(--velvet-2);
  transition:border-color .25s;overflow:hidden;
}
.event-tile:hover{border-color:var(--rouge)}
.event-tile-embed{
  display:flex;justify-content:center;background:#1a0b14;
  /* Instagram's widget brings its own card chrome (white background,
     its own padding/border) — this just centers it and gives it room
     to render at its natural size instead of being squeezed. */
}
.event-tile-embed .instagram-media{margin:0 !important}
/* Shrinking to 75% with `zoom` rather than `transform:scale` on purpose —
   scale only changes how something LOOKS, not the space it occupies, which
   would leave exactly the empty gap this is meant to remove. zoom shrinks
   both at once, since Instagram's widget is its own iframe we can't reach
   inside of to resize normally. zoom isn't in the official CSS spec, but
   it's supported by every browser engine in real use today (Chrome, Edge,
   Safari, and Firefox since 2020), so this is a pragmatic fit for exactly
   this situation rather than a real compatibility risk. */
.event-tile-embed{zoom:.75}
.event-tile-info{display:flex;flex-direction:column;gap:.4rem;padding:1rem 1.1rem 1.2rem}
.event-tile-title{font-family:"Bodoni Moda",Georgia,serif;font-weight:500;font-size:1.05rem;line-height:1.3;color:var(--cream)}
.event-tile-loc{font-size:.78rem;color:var(--mauve)}
.event-tile-time{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--rouge)}
.event-tile-link{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mauve);
  margin-top:.5rem;transition:color .2s;
}
.event-tile-link:hover{color:var(--rouge)}

@media(max-width:700px){
  .event-day{grid-template-columns:1fr}
  .event-day-head{
    position:static;display:flex;align-items:baseline;gap:.7rem;text-align:left;
    padding-bottom:.6rem;border-bottom:1px solid var(--line);margin-bottom:1rem;
  }
  .event-day-row{border-left:none;padding-left:0;grid-template-columns:1fr}
  /* Full Instagram cards take real vertical space on a narrow screen —
     this is the direct tradeoff of showing the whole post rather than
     just the photo. Shrinking further here (55% vs 75% on desktop)
     trims scroll length while staying readable; it's a dial, not a fix —
     turn it up or down by changing this one number if it's still too
     much or feels too small to read comfortably. */
  .event-tile-embed{zoom:.55}
}

/* ---------- meet us bios ---------- */
.bio-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:1rem}
.bio-card{
  border:1px solid var(--line);background:var(--velvet-2);
  padding:2.4rem 2rem;text-align:center;
}
/* server-cropped to 480x480 by Grav; this just fixes the display size + shape */
.bio-avatar{
  width:160px;height:160px;
  border-radius:50%;object-fit:cover;
  margin:0 auto;border:2px solid var(--champagne);
  display:block;
}
.bio-card h3{font-family:"Bodoni Moda",Georgia,serif;font-weight:500;font-size:1.4rem;margin-top:1.2rem}
.bio-card p{color:var(--mauve);font-size:.92rem;margin-top:1rem;text-align:left}
.bio-email{
  display:inline-block;margin-top:1.4rem;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--rouge);border-bottom:1px solid rgba(255,46,126,.35);
}
@media(max-width:700px){.bio-grid{grid-template-columns:1fr}}

/* ---------- admin quick-links bar ---------- */
/* Only rendered at all when this session has unlocked /add-event -- see
   admin-bar.html.twig. Regular visitors never see this in the markup,
   let alone the CSS having any effect for them. */
.admin-bar{
  position:sticky;top:0;z-index:110;height:34px;
  background:#000;border-bottom:1px solid rgba(255,46,126,.4);
}
.admin-bar-inner{
  max-width:1160px;margin:0 auto;height:100%;padding:0 4%;
  display:flex;align-items:center;gap:1.4rem;
}
.admin-bar-label{
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--rouge);font-weight:600;
}
.admin-bar a{
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(246,236,223,.75);transition:color .2s;
}
.admin-bar a:hover{color:var(--champagne)}
/* nav sits sticky at top:0 for everyone else -- push it down exactly the
   admin bar's height so the two stack instead of overlapping, but only
   when the admin bar is actually present */
.has-admin-bar .site-nav{top:34px}

/* ============================================================
   SCROLL REVEAL — fires once per element via IntersectionObserver
   (see nightlife.js). Targets elements that already exist across the
   site by their current selectors — no template edits needed anywhere.

   Every hiding rule below is scoped under html.js-reveal, a class added
   by a tiny synchronous script in <head> the instant JS starts running.
   If JS is blocked, fails, or never loads for any reason, that class
   never appears — and none of these rules ever hide anything. Content
   just displays normally, as if this whole feature didn't exist, rather
   than risk leaving things invisible forever. Progressive enhancement,
   not a hard dependency.
   ============================================================ */

html.js-reveal .sec-head,
html.js-reveal .grid .card,
html.js-reveal .other-grid .other-tile,
html.js-reveal .timeline .date-card,
html.js-reveal .bio-grid .bio-card,
html.js-reveal .events-timeline .event-tile,
html.js-reveal .prose img{
  opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.25,.7,.3,1), transform .7s cubic-bezier(.25,.7,.3,1);
}
/*
  BUG FIXED HERE: these .is-visible rules previously had LOWER
  specificity than the hiding rules above (three classes vs the hiding
  rules' three classes PLUS the "html" type selector). That meant
  opacity:0 won the cascade unconditionally, no matter what class JS
  successfully added — every element using this system was stuck
  invisible forever, regardless of whether the JS worked perfectly.
  Confirmed by exact specificity count, not guessed: (0,3,1) beats
  (0,3,0) every time. Adding the same html.js-reveal prefix here
  restores equal specificity, so source order (these rules come after
  the hiding rules) correctly makes reveal win once .is-visible exists.
*/
html.js-reveal .sec-head.is-visible,
html.js-reveal .grid .card.is-visible,
html.js-reveal .other-grid .other-tile.is-visible,
html.js-reveal .timeline .date-card.is-visible,
html.js-reveal .bio-grid .bio-card.is-visible,
html.js-reveal .events-timeline .event-tile.is-visible,
html.js-reveal .prose img.is-visible{opacity:1;transform:translateY(0)}

/* staggered cascade for grids of cards/tiles — each item a beat behind
   the last, rather than the whole row appearing simultaneously */
.grid .card:nth-child(1),.other-grid .other-tile:nth-child(1),.bio-grid .bio-card:nth-child(1),.timeline .date-card:nth-child(1){transition-delay:0ms}
.grid .card:nth-child(2),.other-grid .other-tile:nth-child(2),.bio-grid .bio-card:nth-child(2),.timeline .date-card:nth-child(2){transition-delay:90ms}
.grid .card:nth-child(3),.other-grid .other-tile:nth-child(3),.bio-grid .bio-card:nth-child(3),.timeline .date-card:nth-child(3){transition-delay:180ms}
.grid .card:nth-child(4),.other-grid .other-tile:nth-child(4){transition-delay:270ms}
.grid .card:nth-child(5),.other-grid .other-tile:nth-child(5){transition-delay:360ms}
.grid .card:nth-child(6),.other-grid .other-tile:nth-child(6){transition-delay:450ms}
.grid .card:nth-child(7){transition-delay:540ms}
.grid .card:nth-child(8){transition-delay:630ms}
.grid .card:nth-child(9){transition-delay:720ms}

/* ---------- marquee bulbs: light up left to right ---------- */
html.js-reveal .bulbs i{
  transition:opacity .5s ease, box-shadow .5s ease;
  opacity:.15;box-shadow:none;
}
html.js-reveal .bulbs.is-visible i{opacity:.9;box-shadow:0 0 8px rgba(240,198,127,.9)}
html.js-reveal .bulbs.is-visible i:nth-child(even){opacity:.35}
.bulbs i:nth-child(1){transition-delay:0ms}
.bulbs i:nth-child(2){transition-delay:60ms}
.bulbs i:nth-child(3){transition-delay:120ms}
.bulbs i:nth-child(4){transition-delay:180ms}
.bulbs i:nth-child(5){transition-delay:240ms}
.bulbs i:nth-child(6){transition-delay:300ms}
.bulbs i:nth-child(7){transition-delay:360ms}
.bulbs i:nth-child(8){transition-delay:420ms}
.bulbs i:nth-child(9){transition-delay:480ms}
.bulbs i:nth-child(10){transition-delay:540ms}
.bulbs i:nth-child(11){transition-delay:600ms}
.bulbs i:nth-child(12){transition-delay:660ms}
.bulbs i:nth-child(13){transition-delay:720ms}

/* ---------- featured/hero images: curtain parting ----------
   Covers both the homepage's featured-review teaser (.feature .visual)
   and each review's own top image (.article-hero) — same effect,
   same rules, just two places it applies. position:relative +
   overflow:hidden already set on both elsewhere in this file. */
html.js-reveal .feature .visual::before,
html.js-reveal .feature .visual::after,
html.js-reveal .article-hero::before,
html.js-reveal .article-hero::after{
  content:"";position:absolute;top:0;bottom:0;width:52%;
  background:linear-gradient(160deg,var(--velvet),var(--velvet-2));
  z-index:2;transition:transform 1.1s cubic-bezier(.65,0,.35,1);
}
.feature .visual::before,.article-hero::before{left:0;transform:translateX(0)}
.feature .visual::after,.article-hero::after{right:0;transform:translateX(0)}
html.js-reveal .feature .visual.is-visible::before,
html.js-reveal .article-hero.is-visible::before{transform:translateX(-100%)}
html.js-reveal .feature .visual.is-visible::after,
html.js-reveal .article-hero.is-visible::after{transform:translateX(100%)}