/* Reading this as: the public front page for Loverboi LA (and the ticket page
   that shares this file), for gay men in LA deciding whether to come, in the
   wine-and-roses evening-invitation language of the November ads.
   Dials: ENERGY 1 / RHYTHM 2 / MOTION 1.

   Color: deep wine ground and a lighter wine sheet, both lifted straight from
   the ads so the site and the posts read as one campaign. Cream is the text
   color (high contrast on wine). Hot pink is the single accent, used where the
   ads use it: the kicker line, the rose line art, numerals and the one filled
   button. The logo keeps its own teal and violet; nothing else does.
   Typography: Cormorant Garamond italic for headings, the same romantic serif
   the ads set their headlines in; Jost for body copy, a clean geometric sans
   that stays readable on a dark ground at small sizes.
   Motif: the Loverboi line rose (the same drawing the old pattern used),
   recolored pink. It tiles faintly behind the sheet, sits beside the hero
   name, and replaces the ring on every section divider.
   The background color stays admin-editable (--front-bg, wine fallback). */

:root{
  --front-bg: #1A0610;
  --wine: #2B0B1D;
  --wine-top: #3A1028;
  --panel: #1F0815;
  --ink: #F6E9EE;
  --ink-soft: #D8BFCB;
  --muted: #A99099;
  --pink: #F2558C;
  --pink-hover: #F77AA6;
  --on-pink: #2A0716;
  --sold: #FF9DBF;
  --hair: rgba(246,233,238,0.16);
  --pink-line: rgba(242,85,140,0.45);
  /* paper-ticket card for the Forbidden Tickets embed, which only renders well on white */
  --paper: #FFFFFF;
  --paper-ink: #2A2140;
  --paper-soft: #5A4A5C;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Jost',-apple-system,sans-serif; font-size:17px; line-height:1.6;
  color:var(--ink); -webkit-font-smoothing:antialiased;
  /* the rose pattern is the brand; at this strength it reads as texture, never behind copy */
  background-color:var(--front-bg);
  background-image:url('/rose-tile.png');
  background-repeat:repeat;
}
h1,h2{ font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:500; margin:0; color:var(--ink); }
a{ color:inherit; }
img{ max-width:100%; display:block; }

a:focus-visible, button:focus-visible{ outline:2.5px solid var(--pink); outline-offset:3px; border-radius:4px; }

/* one wine sheet holds the content, with the ads' thin inset frame so it reads
   like the posters. It stays wine whatever monthly color the admin picks, so
   cream text always keeps AA contrast; the admin color only frames it. */
#app{
  max-width:820px; margin:28px auto 60px; padding:0 44px 40px;
  background:linear-gradient(180deg, var(--wine-top) 0%, var(--wine) 420px);
  border:1px solid var(--hair);
  outline:1px solid var(--pink-line); outline-offset:-14px;
}

.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:26px 0 18px; border-bottom:1px solid var(--hair);
}
.wordmark-logo{ height:38px; width:auto; }
/* outlined, not filled: it's for returning guests, so it shouldn't compete with the register button */
.update-link{
  display:inline-flex; align-items:center; min-height:44px; padding:0 18px;
  border:1px solid var(--pink-line); color:var(--ink); text-decoration:none;
  font-weight:500; font-size:0.85rem; letter-spacing:0.06em; text-transform:uppercase;
}
.update-link:hover{ border-color:var(--pink); color:#fff; }

.hero{ display:grid; grid-template-columns:1.25fr 1fr; gap:36px; align-items:center; padding:44px 0 36px; }
.hero-main{ text-align:center; position:relative; }
/* the big rose sits beside the name, the way the ads pair it with the headline */
.hero-rose{
  position:absolute; right:-14px; top:34px; width:112px; height:auto;
  pointer-events:none; transform:rotate(-8deg);
}
.hero-main > *:not(.hero-rose){ position:relative; }
/* the right half is the one action most visitors came for, so it gets the only filled button */
.next-session{ border:1px solid var(--pink-line); background:var(--panel); padding:26px 26px 22px; }
.next-label{ font-size:0.78rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--pink); margin:0 0 8px; }
.next-title{ font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-size:2.1rem; font-weight:500; line-height:1.1; color:var(--ink); margin:0 0 6px; }
.next-when{ font-weight:500; margin:0; }
.next-where, .next-then, .next-none{ font-size:0.9rem; color:var(--ink-soft); margin:2px 0 0; }
.next-left{ font-size:0.9rem; color:var(--sold); font-weight:500; margin:6px 0 0; }
.next-cta{
  display:flex; align-items:center; justify-content:center; min-height:48px; margin:18px 0 12px; padding:0 18px;
  background:var(--pink); color:var(--on-pink); text-decoration:none; font-weight:600; text-align:center;
}
.next-cta:hover{ background:var(--pink-hover); }
.next-then a{ color:var(--ink); text-decoration-color:var(--pink); }
.hero-logo{ width:170px; height:auto; margin:0 auto 18px; }
/* pink kicker, same treatment as the ads' top line */
.hero-eyebrow{ font-size:0.78rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--pink); margin:0 0 10px; }
.hero h1{ font-size:3.4rem; line-height:1.05; }
.hero-tag{
  font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:500;
  font-size:1.35rem; line-height:1.4; color:var(--ink-soft); max-width:480px; margin:14px auto 0;
}

/* section divider: hairlines meeting at a small pink rose (the identity motif) */
.rule{ display:flex; align-items:center; gap:16px; margin:8px 0 26px; }
.rule::before, .rule::after{ content:''; flex:1; border-top:1px solid var(--hair); }
.rule span{ width:44px; height:27px; background:url('/rose-line.png') center/contain no-repeat; }

.section{ padding:0 0 34px; }
.section h2{ font-size:2.2rem; text-align:center; margin-bottom:14px; }

.about-copy p{ color:var(--ink-soft); margin:0 auto 14px; max-width:62ch; }
.about-copy p:last-child{ margin-bottom:0; }

/* ---- Sessions: one row per real posted event ---- */
.events-list{ border-top:1px solid var(--hair); }
.event-card{
  display:grid; grid-template-columns:110px 1fr auto; align-items:center; gap:18px;
  padding:18px 4px; border-bottom:1px solid var(--hair); text-decoration:none; color:inherit;
}
/* the date is what people scan for, so it gets the size, set like the ads' pink italic numerals */
.event-card-date{ font-family:'Cormorant Garamond',Georgia,serif; text-align:center; line-height:1; }
.event-card-date b{ display:block; font-size:2.6rem; font-style:italic; font-weight:500; color:var(--pink); }
.event-card-date small{ font-family:'Jost',sans-serif; font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-soft); }
.event-card-title{ font-weight:500; }
.event-card-meta{ font-size:0.88rem; color:var(--ink-soft); }
.event-card-left{ color:var(--sold); font-weight:500; }
.event-card-cta{
  font-size:0.8rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--pink);
  border-bottom:1.5px solid transparent; padding-bottom:2px; white-space:nowrap;
}
a.event-card:hover{ background:rgba(242,85,140,0.06); }
a.event-card:hover .event-card-cta{ border-color:var(--pink); }
/* sold out reads quieter through color, not opacity, so its text keeps AA contrast */
.event-card.sold-out{ cursor:default; }
.event-card.sold-out .event-card-date b{ color:var(--ink-soft); }
.event-card.sold-out .event-card-title{ color:var(--ink-soft); }
.event-card-cta.sold-out-tag{ color:var(--sold); }
/* past sessions: a darker fill and muted text (not opacity), so the row clearly
   reads as history while every word keeps AA contrast */
.event-card.past{ cursor:default; background:rgba(0,0,0,0.18); }
.event-card.past .event-card-date b,
.event-card.past .event-card-date small,
.event-card.past .event-card-title,
.event-card.past .event-card-meta,
.event-card-cta.past-tag{ color:var(--muted); }

/* ---- Gallery: real photos only, each keeping its own aspect ratio, framed in the ads' pink hairline ---- */
.gallery-grid{ columns:3; column-gap:10px; }
.gallery-tile{ break-inside:avoid; margin:0 0 10px; overflow:hidden; background:var(--panel); cursor:zoom-in; border:1px solid var(--pink-line); }
.gallery-tile img{ width:100%; height:auto; display:block; }
button.gallery-tile{ display:block; width:100%; padding:0; font:inherit; }
button.gallery-tile:hover{ border-color:var(--pink); }

.state-msg{ color:var(--ink-soft); font-size:0.95rem; padding:18px 0; text-align:center; }

.site-footer{ text-align:center; padding:28px 0 0; }
.site-footer .reporting-line{ margin:22px 0 0; padding-top:16px; border-top:1px solid var(--hair); }
.signin-link{ display:inline-flex; align-items:center; min-height:44px; font-size:0.85rem; color:var(--ink-soft); text-decoration:none; border-bottom:1px dashed var(--hair); }
.signin-link:hover{ color:var(--ink); border-color:var(--ink-soft); }

@media (max-width:600px){
  #app{ margin:10px; padding:0 22px 30px; outline-offset:-8px; }
  .hero{ grid-template-columns:1fr; gap:22px; padding-top:30px; }
  .hero h1{ font-size:2.6rem; }
  .hero-rose{ width:80px; right:-4px; top:24px; }
  .event-card{ grid-template-columns:78px 1fr; gap:6px 12px; }
  .event-card-date small{ letter-spacing:0.08em; white-space:nowrap; }
  .event-card-cta{ grid-column:2; justify-self:start; }
  .gallery-grid{ columns:2; }
}

/* gallery lightbox */
.lightbox{
  position:fixed; inset:0; z-index:100; background:rgba(20,4,12,0.94);
  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; }
.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.75); font-size:0.8rem; }
@media (max-width:600px){ .lightbox{ padding:56px 10px; } .lb-prev,.lb-next{ top:auto; bottom:8px; transform:none; } }
/* consent reporting line under the sessions list */
.reporting-line{ margin:14px 0 0; font-size:0.85rem; color:var(--ink-soft); overflow-wrap:anywhere; }
.reporting-line a{ color:var(--pink); display:inline-block; min-height:44px; line-height:44px; }