/* Design read: local community-events front page for LA gay singles,
   refined retro-social-club language pulled from the existing Loverboi
   logo (teal + violet, one coral accent), Playfair Display headings for
   a more serious brand feel per Tangle's note, Inter for body copy.
   Dial: ENERGY 2, RHYTHM 2, MOTION 1. Palette held to 2 core colors
   (teal, violet) + 1 accent (coral); cream/ink are neutrals and don't
   count against that. Background color is admin-editable (monthly),
   applied as --front-bg with --cream as the fallback. */

:root{
  --cream: #FBF3E2;
  --front-bg: var(--cream);
  --ink: #2A2140;
  --ink-soft: #5B5270;
  --teal: #3EA5AB;
  --teal-dark: #297579;
  --teal-darker: #1F5A5D;
  --violet: #7B5CFA;
  --violet-text: #6B3FE0;
  --violet-soft: #EDE8FF;
  --coral: #E8935A;
  --border: rgba(42,33,64,0.14);
  --shadow: rgba(42,33,64,0.12);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Inter',-apple-system,sans-serif;
  background-color:var(--front-bg);
  background-image:url('/flower-pattern.png');
  background-repeat:repeat;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
h1,h2{ font-family:'Playfair Display',Georgia,serif; margin:0; }
a{ color:inherit; }
img{ max-width:100%; display:block; }

/* One consistent, on-brand focus ring everywhere on this page - nothing
   here removes the default outline without this replacing it. */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2.5px solid var(--teal-dark); outline-offset:2px; border-radius:4px;
}

#app{ max-width:900px; margin:0 auto; padding:0 20px 60px; }

.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 0; flex-wrap:wrap;
}
.wordmark-logo{ height:42px; width:auto; }
.update-link{
  font-size:0.82rem; font-weight:600; text-decoration:none; color:var(--teal-dark);
  background:#fff; border:1.5px solid var(--border); border-radius:10px; padding:8px 16px;
}
.update-link:hover{ border-color:var(--teal-dark); }

.hero{ text-align:center; padding:34px 0 26px; }
/* Fixed aspect ratio (auto height, fixed width) so the logo can never be
   squeezed into a squarer box than its real artwork. */
.hero-logo{ width:190px; height:auto; margin:0 auto 16px; }
.hero h1{ font-size:2.3rem; font-weight:700; letter-spacing:-0.01em; color:var(--violet); }
.hero-tag{ margin:12px auto 0; max-width:440px; color:var(--ink-soft); font-size:0.95rem; line-height:1.55; }

.section{ padding:32px 0; border-top:1.5px dashed var(--border); }
.section h2{
  font-size:1.3rem; font-weight:700; color:var(--ink); margin-bottom:14px;
  display:flex; align-items:center; gap:10px;
}
/* Identity motif: one small solid teal dot repeated before every section
   title - a plain, deliberate callback to the logo's circle, used once
   per section and nowhere else. */
.section h2::before{ content:''; width:9px; height:9px; border-radius:50%; background:var(--teal); flex:none; }

.about-copy p{ color:var(--ink-soft); line-height:1.7; font-size:0.98rem; margin:0 0 12px; }
.about-copy p:last-child{ margin-bottom:0; }

/* ---- Upcoming sessions: one real card per posted event, not a single
   decorative "calendar" graphic - the content is what fills this section. */
.events-list{ display:flex; flex-direction:column; gap:10px; }
.event-card{
  display:flex; align-items:center; gap:16px; text-decoration:none; color:inherit;
  background:#fff; border:1.5px solid var(--border); border-radius:12px; padding:16px 18px;
}
.event-card:hover{ border-color:var(--teal); }
.event-card-date{
  flex:none; font-weight:700; font-size:0.82rem; color:var(--teal-darker);
  background:var(--violet-soft); border-radius:8px; padding:6px 10px; white-space:nowrap;
}
.event-card-title{ flex:1; font-weight:700; font-size:0.98rem; }
.event-card-cta{ flex:none; font-size:0.82rem; font-weight:700; color:var(--violet-text); }
.all-sessions-link{
  display:inline-block; margin-top:14px; font-size:0.85rem; font-weight:700;
  color:var(--violet-text); text-decoration:none; border-bottom:1.5px solid var(--violet-soft);
  padding-bottom:2px;
}
.all-sessions-link:hover{ border-color:var(--violet-text); }

/* ---- Gallery: real photos only. Empty/loading/error states are plain
   text, never decorative filler standing in for content that isn't there. */
/* Masonry via CSS columns: every photo keeps its own aspect ratio (no
   square crop), tiles flow top-to-bottom within each column. */
.gallery-grid{ columns:3; column-gap:10px; }
.gallery-tile{ break-inside:avoid; margin:0 0 10px; border-radius:10px; overflow:hidden; background:var(--violet-soft); cursor:zoom-in; }
.gallery-tile img{ width:100%; height:auto; display:block; }

.state-msg{
  grid-column:1/-1; color:var(--ink-soft); font-size:0.9rem; padding:18px 0;
}

@media (max-width:560px){
  .gallery-grid{ columns:2; }
  .hero h1{ font-size:1.85rem; }
  .event-card{ flex-wrap:wrap; }
}

.site-footer{ text-align:center; padding:36px 0 10px; margin-top:10px; }
.signin-link{
  font-size:0.8rem; color:var(--ink-soft); text-decoration:none; border-bottom:1px dashed var(--border);
  padding-bottom:2px;
}
.signin-link:hover{ color:var(--ink); border-color:var(--ink-soft); }

/* sold out / tickets left */
.event-card.sold-out{ opacity:0.62; cursor:default; }
.event-card.sold-out:hover{ border-color:inherit; }
.event-card-cta.sold-out-tag{ color:#8A2E55; text-transform:uppercase; letter-spacing:0.05em; }
.event-card-left{ display:inline-block; margin-left:10px; font-size:0.78rem; font-weight:700; color:#8A2E55; background:#FBE9F0; border-radius:100px; padding:2px 9px; vertical-align:2px; }

/* gallery tiles are buttons now (click to open full size) */
button.gallery-tile{ display:block; width:100%; padding:0; border:0; font:inherit; }

/* gallery lightbox */
.lightbox{
  position:fixed; inset:0; z-index:100; background:rgba(20,16,32,0.92);
  display:flex; align-items:center; justify-content:center; padding:48px 64px;
}
.lb-figure{ margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column; align-items:center; gap:10px; }
.lb-img{ max-width:100%; max-height:calc(100vh - 140px); width:auto; height:auto; border-radius:8px; }
.lb-cap{ color:#fff; font-size:0.9rem; text-align:center; }
.lb-cap:empty{ display:none; }
.lb-btn{
  position:absolute; background:rgba(255,255,255,0.12); color:#fff; border:0; border-radius:50%;
  width:44px; height:44px; font-size:1.8rem; line-height:1; cursor:pointer;
}
.lb-btn:hover{ background:rgba(255,255,255,0.24); }
.lb-close{ top:14px; right:14px; }
.lb-prev{ left:12px; top:50%; transform:translateY(-50%); }
.lb-next{ right:12px; top:50%; transform:translateY(-50%); }
.lb-count{ position:absolute; bottom:14px; left:0; right:0; text-align:center; color:rgba(255,255,255,0.7); font-size:0.8rem; }
@media (max-width:560px){ .lightbox{ padding:56px 10px; } .lb-prev,.lb-next{ top:auto; bottom:8px; transform:none; } }