/* Glamorama events widget.
   Scoped under #glam-events so Squarespace styles don't collide.

   THE WIDGET PINS ITS OWN SURFACE: black background, white body text, red
   display titles. Changed deliberately by Sanjiv on 2026-07-29 — read the next
   paragraph before undoing it, because it reverses what this file used to say.

   It previously inherited everything from the host Squarespace section, mixing
   every colour from `currentColor` so the widget was correct on a black section
   and a white one with no dark-mode branch. That is genuinely the more portable
   design and it is NOT what the venue wants: the ticket flow has to look the
   same for every customer regardless of which page or section it is dropped
   into, and glamoramabar.com's own sections are not uniformly black. Pinning is
   the point, not an oversight.

   WHAT THIS COSTS, so nobody rediscovers it as a bug: the widget no longer
   follows the site through a rebrand, and dropping it into a light section
   paints a black block there. Both are accepted. If the brand red moves, change
   --accent-hsl on the site AND re-check the contrast table below.

   (The one thing still inherited is --accent-hsl, so the red does track the
   site. The fallback is the current brand red.)

   ACCENT CONTRAST — the one rule not to break. The brand red (#C82727) on black
   is 3.775:1. WCAG AA wants 4.5:1 for normal text but only 3:1 for LARGE text,
   where large means >=24px, or >=18.66px when bold. So:
     - as a FILL it's fine: white on red is 5.56:1.
     - on LARGE BOLD DISPLAY TITLES the raw brand red is fine at 3.775:1, and
       that is what --glam-title is for. This only became legal when the titles
       went to weight 700 on 2026-07-29; at the old weight 500 a 21px title was
       "normal" text and the same red would have failed.
     - on anything smaller — .glam-rate-name (15px), .glam-attendee-title (17px)
       — red FAILS at 3.775:1 and those stay white. They are functional labels
       telling a buyer which ticket they are buying, not headings.
     - for small accent text use --glam-accent-text (5.85:1 on black).
   Never put raw --glam-accent on small text.
*/

#glam-events {
  --glam-accent: hsl(var(--accent-hsl, 0, 67%, 47%));

  /* MIXED FROM #fff, NOT currentColor — and this is a correctness fix, not a
     tidy-up. Custom properties substitute LAZILY: `currentColor` inside one of
     these resolves on the element that USES the var, not where it is declared.
     While every element was white that was invisible. The moment
     .glam-group-title took `color: var(--glam-title)`, its own
     `border-bottom: 1px solid var(--glam-line)` started resolving against RED,
     so the rule under "TICKETS" rendered faint red while every other separator
     stayed faint white. The since-removed toggle button had the same trap one
     step removed: its `color: var(--glam-muted)` made its border 16% of 78%
     white rather than 16% white.

     Pinning these to #fff kills the whole class. It costs nothing now that the
     surface itself is pinned (see the header) — currentColor was only ever
     there to track a host theme we no longer follow. */
  --glam-line: rgba(255, 255, 255, 0.16);
  /* Raised from 62% to 78%. 62% put body copy around 5:1 on the black section —
     technically passing AA and genuinely hard to read at 13px on a phone in a
     dark room, which is the actual reading condition for this widget. --muted
     is now for de-emphasis only (timestamps, "Sold out", field labels); it is
     no longer allowed on anything a customer has to READ to decide. */
  --glam-muted: rgba(255, 255, 255, 0.78);
  --glam-hover: rgba(255, 255, 255, 0.07);
  --glam-accent-text: color-mix(in srgb, var(--glam-accent) 72%, #fff);

  /* The pinned surface. Literal, on purpose — see the header. */
  --glam-bg: #000;
  /* Structural text that is never dimmed by the reading toggle: the rate name a
     buyer identifies their ticket by, the per-ticket fieldset legend, the date
     on a confirmation. These must not be a preference. */
  --glam-body: #fff;
  /* DESCRIPTION copy — the venue's blurb, the perks, the notes and door terms.
     Full white. This was briefly a user-toggleable setting; the toggle was
     removed on 2026-07-29 and the brighter of the two states locked in as the
     only one. Kept as its own token rather than folded into --glam-body because
     the two still mean different things: --glam-body is structural text that
     must never be dimmed, --glam-desc is the venue's prose. */
  --glam-desc: #fff;
  /* Display titles carry the brand red. Large + bold only — see the contrast
     table in the header for which classes may use this and which may not. */
  --glam-title: var(--glam-accent);

  /* zuume is the site's display face (custom.css maps h1-h4 to it); Archivo is
     the nav face. Both are already loaded by the page, so this costs nothing. */
  --glam-display: "zuume", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --glam-radius: 2px; /* the site rounds to 2px and nothing more — keep it sharp */
  --glam-gap: 22px;

  font-family: inherit;
  /* Both literal now, and `color` is the default for everything that does not
     opt into --glam-title or --glam-muted. It is no longer load-bearing for the
     tokens above — those are pinned to #fff directly, precisely so that
     recolouring an element can never move its own borders. */
  color: #fff;
  background: var(--glam-bg);
  /* No padding added with the background. On the venue's own black-bold section
     the fill is invisible, and padding would be the one visible change — an
     unexplained gap on the live page. The section supplies the spacing. */
}

/* ---- Event list ---------------------------------------------------------- */

#glam-events .glam-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--glam-gap);
}

/* No card chrome. A bordered, filled box reads as a foreign object on a black
   section — and the flyer is the product, so it carries the design instead. */
#glam-events .glam-card {
  display: flex;
  flex-direction: column;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: var(--glam-radius);
}
#glam-events .glam-card:focus-visible {
  outline: 2px solid var(--glam-accent-text);
  outline-offset: 4px;
}

#glam-events .glam-card-flyer {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border-radius: var(--glam-radius);
  background: var(--glam-hover); /* holds the grid steady while flyers load */
  transition: opacity 0.25s ease;
}
#glam-events .glam-card:hover .glam-card-flyer { opacity: 0.78; }

#glam-events .glam-card-body { padding: 12px 0 0; }
#glam-events .glam-card-date {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--glam-accent-text);
}
/* Event names are not uppercased anywhere: "INFUSE ft. dozie" is cased
   deliberately by whoever booked it, and text-transform would flatten that. */
#glam-events .glam-card-name {
  margin: 0 0 6px;
  font-family: var(--glam-display);
  /* 700, not the site's h3 weight of 500. Locked in on 2026-07-29 as the only
     look — and it is load-bearing for contrast, not just taste: see the header.
     The brand red only clears WCAG AA on a 21px title BECAUSE it is bold. */
  font-weight: 700;
  font-size: 21px;
  line-height: 1.15;
  color: var(--glam-title);
  transition: opacity 0.15s ease;
}
/* Hover does not recolour the title — titles hold one colour everywhere, and
   that colour is now the brand red. The flyer already dims on hover; the title
   lifts slightly with it rather than becoming a different red. */
#glam-events .glam-card:hover .glam-card-name { opacity: 0.82; }
#glam-events .glam-card-time {
  margin: 0;
  font-size: 13px;
  color: var(--glam-muted);
}
/* Genres sit under the time, not dot-joined onto it. Same colour and size, so
   they still read as one metadata block — the gap is what separates them, not
   a change of style. Lighter than the time: the hours are the fact a customer
   is checking, the genres are the fact that persuades. */
#glam-events .glam-card-genres {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--glam-muted);
}

/* ---- Detail -------------------------------------------------------------- */

#glam-events .glam-back {
  background: none;
  border: 0;
  padding: 6px 0;
  margin-bottom: 18px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--glam-muted);
  transition: color 0.15s ease;
}
#glam-events .glam-back:hover { color: inherit; }

/* Grid, not flex, so the title can sit in a different place per breakpoint
   without being duplicated in the DOM or moved by script. The markup order is
   title -> flyer -> meta, which is the MOBILE order and the correct reading
   order for a screen reader; desktop then places the title back into the right
   column beside the flyer, exactly where it has always been. */
#glam-events .glam-detail-head {
  display: grid;
  grid-template-columns: 300px minmax(280px, 1fr);
  grid-template-rows: auto 1fr;
  gap: 0 30px;
  margin-bottom: 36px;
  /* Grid stretches items to their row by default and an <img> obeys — a long
     description stretched the flyer vertically and distorted the artwork.
     Align to the start and the image keeps its own shape. */
  align-items: start;
}
/* Desktop placement: flyer down the left across both rows, title top-right,
   details beneath it. Identical to the pre-existing flex layout. */
#glam-events .glam-detail-name { grid-column: 2; grid-row: 1; }
#glam-events .glam-detail-flyer { grid-column: 1; grid-row: 1 / span 2; }
#glam-events .glam-detail-meta { grid-column: 2; grid-row: 2; }
/* An event with no artwork collapses to one column at every width. */
#glam-events .glam-detail-head-noflyer { grid-template-columns: 1fr; }
#glam-events .glam-detail-head-noflyer .glam-detail-name,
#glam-events .glam-detail-head-noflyer .glam-detail-meta { grid-column: 1; }
#glam-events .glam-detail-flyer {
  width: 300px;
  max-width: 100%;
  /* Belt and braces with align-items above: never let a layout rule dictate
     this image's height. Flyers are artwork and must stay at their true ratio. */
  height: auto;
  border-radius: var(--glam-radius);
  display: block;
}
#glam-events .glam-detail-name {
  margin: 0 0 10px;
  font-family: var(--glam-display);
  font-weight: 700;
  color: var(--glam-title);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1;
}
#glam-events .glam-detail-when {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--glam-accent-text);
}
#glam-events .glam-detail-sub {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--glam-muted);
}
#glam-events .glam-detail-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--glam-desc);
  max-width: 62ch;
  /* The venue writes the description in Fourvenues with real paragraph breaks
     between the blurb, the guest-list line and the acknowledgement of country.
     HTML collapses those, which ran three separate statements into one wall of
     text. Honour the breaks the author typed. */
  white-space: pre-line;
  /* Clamped so the rates stay in view; the toggle below opens the rest. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
}
#glam-events .glam-detail-desc.is-open {
  display: block;
  -webkit-line-clamp: none;
  line-clamp: none;
  overflow: visible;
}

#glam-events .glam-desc-toggle {
  align-self: flex-start;
  margin-top: 8px;
  padding: 4px 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--glam-accent-text);
}
#glam-events .glam-desc-toggle:hover { color: inherit; }
#glam-events .glam-desc-toggle:focus-visible {
  outline: 2px solid var(--glam-accent-text);
  outline-offset: 2px;
}

/* Share plus however many [LINK] buttons the event carries. Wraps rather than
   scrolls: this sits in a narrow column beside the flyer, and a row of four
   socials has to fall onto a second line rather than push the layout wide. */
#glam-events .glam-detail-actions {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#glam-events .glam-share {
  /* border-box so a percentage flex-basis means what it says. Under content-box
     the 40px of horizontal padding sits OUTSIDE the basis, so two "50%" buttons
     measure wider than their row and wrap to one per line. */
  box-sizing: border-box;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: none;
  color: inherit;
  border: 1px solid var(--glam-line);
  border-radius: var(--glam-radius);
  padding: 11px 20px;
  min-height: 44px; /* thumb-sized: this button is mostly used on a phone */
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
#glam-events .glam-share:hover:not(:disabled) {
  border-color: currentColor;
  background: var(--glam-hover);
}
#glam-events .glam-share:disabled {
  color: var(--glam-muted);
  cursor: default;
}
/* The link buttons are <a>, so they need the bits <button> gave us for free. */
/* Every link label centres, however many there are. The outward-aligned pair
   tried on 30 Jul was rejected on sight: it made the two halves read as two
   different kinds of control. Centring is also the one rule that survives a
   third or fourth link without anyone having to think about it again — which
   matters, because these come from [LINK] markers a venue manager types. */
#glam-events .glam-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* ---- Rate groups --------------------------------------------------------- */

#glam-events .glam-group { margin-bottom: 44px; }

/* "TICKETS" and "GUEST LIST" are the page's section headings, not captions.
   At 11px muted they read as fine print and disappeared against the rate names
   under them. Full contrast, the display face, and enough size to anchor the
   section — the tracking still says "label", the scale now says "heading". */
#glam-events .glam-group-title {
  margin: 0 0 4px;
  font-family: var(--glam-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--glam-title);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--glam-line);
}

#glam-events .glam-rate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--glam-line);
}
#glam-events .glam-rate:last-child { border-bottom: 0; }
#glam-events .glam-rate-main { min-width: 0; }
/* Stays white. 15px bold is "normal" text to WCAG, where the brand red is
   3.775:1 against 4.5:1 required — and this line is how a buyer identifies the
   ticket they are about to pay for. See the contrast table in the header. */
#glam-events .glam-rate-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--glam-body);
  line-height: 1.3;
}
#glam-events .glam-rate-detail {
  font-size: 13px;
  color: var(--glam-muted);
  margin-top: 4px;
  line-height: 1.45;
}
#glam-events .glam-rate-side {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  /* Prices sit at the end of the row, so they read as a right-hand column down
     the page instead of drifting with each rate name's length. */
  text-align: end;
}
#glam-events .glam-rate-price {
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  /* Full-contrast, not accent: at this size the brand red would be 3.77:1. */
}

/* Flat, not embossed. Browsers give a <button> a default border, background
   gradient and inset highlight; left partly in place they read as a raised
   system control rather than as the site's own type. Everything is reset
   explicitly and the shape carries the brand: a hard 2px corner, an accent
   fill, and letter-spaced caps. Nothing raised, nothing beveled. */
#glam-events .glam-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  min-height: 44px;
  border: 0;
  box-shadow: none;
  text-shadow: none;
  border-radius: var(--glam-radius);
  background: var(--glam-accent);
  background-image: none;
  /* Deliberately literal: this is text ON the accent fill, so it must not
     follow the section theme — white on #C82727 is 5.57:1 on any background. */
  color: #fff;
  text-decoration: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  /* Darken toward the page rather than brighten: `filter: brightness()` on a
     saturated red washes it toward pink and reads as a highlight effect. */
  transition: background 0.15s ease;
}
#glam-events .glam-btn:hover {
  background: color-mix(in srgb, var(--glam-accent) 82%, #000);
}
#glam-events .glam-btn:active {
  background: color-mix(in srgb, var(--glam-accent) 70%, #000);
}
#glam-events .glam-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

#glam-events .glam-loading,
#glam-events .glam-empty,
#glam-events .glam-error {
  color: var(--glam-muted);
  font-size: 14px;
  padding: 24px 0;
}

/* ---- Guest-list signup --------------------------------------------------- */

#glam-events .glam-rate-includes {
  /* The venue's sell copy — drink cards, VIP line, arrival window. This is the
     offer, not a caption; it reads at full strength. */
  color: var(--glam-desc);
  font-size: 13px;
  line-height: 1.5;
  margin-top: 6px;
  /* The venue writes `includes` as a newline-separated list of perks in the
     Fourvenues dashboard. Honour those breaks rather than collapsing them into
     one run-on sentence. */
  white-space: pre-line;
}

#glam-events .glam-sold-out {
  color: var(--glam-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#glam-events .glam-form-head { margin: 20px 0 24px; }

#glam-events .glam-form-title {
  font-family: var(--glam-display);
  font-weight: 700;
  color: var(--glam-title);
  font-size: 26px;
  line-height: 1.1;
  margin: 0 0 6px;
}

#glam-events .glam-form-sub,
#glam-events .glam-form-price {
  color: var(--glam-muted);
  font-size: 14px;
  margin: 0 0 4px;
}

/* The form fills the widget's column rather than sitting in a fixed 420px
   gutter on the left of a wide screen. Capped at 42rem so the fields scale with
   the window without a single-line input running the full width of a desktop,
   which is harder to scan, not easier. */
#glam-events .glam-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 42rem;
}

/* Inputs are block-level and fill their field, so widening the form widens
   them — the old fixed width left them stranded at the left edge. */
#glam-events .glam-input { width: 100%; box-sizing: border-box; }

#glam-events .glam-form-head { max-width: 42rem; }

#glam-events .glam-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#glam-events .glam-field-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#glam-events .glam-input {
  padding: 12px 14px;
  /* 16px stops iOS Safari zooming the page on focus, which on a phone reads as
     the widget breaking rather than as a helpful zoom. */
  font-size: 16px;
  font-family: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid var(--glam-line);
  border-radius: var(--glam-radius);
  min-height: 44px;
}

#glam-events .glam-input:focus-visible {
  outline: 2px solid var(--glam-accent-text);
  outline-offset: 1px;
  border-color: transparent;
}

#glam-events .glam-btn-primary { width: 100%; }

#glam-events .glam-btn:disabled {
  opacity: 0.55;
  cursor: default;
  filter: none;
}

#glam-events .glam-form-error {
  /* Accent as TEXT, so mix toward the page's text colour — the raw brand red
     fails AA at this size. */
  color: var(--glam-accent-text);
  font-size: 14px;
  margin: 0;
}

#glam-events .glam-form-note {
  color: var(--glam-desc);
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
}

/* The gap between the three door-term statements. A block span rather than a
   <br> so it can carry height at all — <br> takes no margin. 14px is a hair
   over one line of 13px/1.55 leading, which is enough to part the statements
   without letting them drift into three unrelated notices. */
#glam-events .glam-terms-break {
  display: block;
  height: 14px;
}

/* The door terms and the group-minimum note. Longer than a one-line note, so
   they get paragraph leading, a reading measure, and air above — a wall of
   13px terms set to note spacing is what stops people reading terms at all. */
#glam-events .glam-form-terms {
  margin-top: 14px;
  max-width: 62ch;
  /* Generous, and deliberately more than the 1.55 of an ordinary note. This is
     the block carrying the capacity, dress-code and refusal-of-entry terms —
     the text a customer is least inclined to read and most likely to be held
     to. The <br>s inside it separate three distinct statements, and at tighter
     leading they read as one paragraph that happened to wrap. */
  line-height: 2;
}

/* Links inside body copy. Underlined rather than colour-only: the accent is
   already carrying state elsewhere, and an underline survives being read on a
   phone at an angle in a dark room. */
#glam-events .glam-inline-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  word-break: break-word;
}
#glam-events .glam-inline-link:hover { color: var(--glam-accent-text); }
#glam-events .glam-inline-link:focus-visible {
  outline: 2px solid var(--glam-accent-text);
  outline-offset: 2px;
}

#glam-events .glam-confirm {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 28px 0;
  max-width: 460px;
}

#glam-events .glam-confirm-title {
  font-family: var(--glam-display);
  font-weight: 700;
  color: var(--glam-title);
  font-size: 30px;
  line-height: 1.05;
  margin: 0;
}

#glam-events .glam-confirm-sub { font-size: 15px; margin: 0; }

/* The date/door line is structural — never dimmed. The note below it is
   description copy and follows the toggle. */
#glam-events .glam-confirm-when {
  color: var(--glam-body);
  font-size: 14px;
  margin: 0;
}
#glam-events .glam-confirm-note {
  color: var(--glam-desc);
  font-size: 14px;
  margin: 0;
}

#glam-events .glam-confirm-code {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 8px 0;
  padding: 14px 18px;
  border: 1px solid var(--glam-line);
  border-radius: var(--glam-radius);
}

#glam-events .glam-confirm-code-label {
  color: var(--glam-muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#glam-events .glam-confirm-code-value {
  font-family: var(--glam-display);
  font-size: 22px;
  letter-spacing: 0.1em;
}

/* ---- Mobile -------------------------------------------------------------- */

@media (max-width: 600px) {
  #glam-events { --glam-gap: 14px; }
  #glam-events .glam-form { max-width: none; }

  /* Two fixed columns rather than auto-fill: at 375px, minmax(150px,1fr) leaves
     flyers too small to read a lineup off, and auto-fill can drop to one
     enormous column on the way. Two is the honest answer at phone width. */
  #glam-events .glam-grid { grid-template-columns: 1fr 1fr; }
  #glam-events .glam-card-name { font-size: 16px; }
  #glam-events .glam-card-date { font-size: 10px; }
  #glam-events .glam-card-time { font-size: 12px; }

  /* One column, and every item back to source order — which puts the title
     above the flyer. Below 600px the flyer is full-bleed, so a title beneath it
     opened the page on artwork with no words and the customer had to scroll to
     learn which event they had tapped. */
  #glam-events .glam-detail-head {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 28px;
  }
  #glam-events .glam-detail-name {
    grid-column: 1;
    grid-row: auto;
    /* The 20px grid gap does the separating now — keep the 10px too and the
       title floats away from its own flyer. */
    margin-bottom: 0;
  }
  #glam-events .glam-detail-flyer {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
  }
  #glam-events .glam-detail-meta { grid-column: 1; grid-row: auto; }
  /* Share keeps the full column — it is the action that grows the audience and
     the one worth a whole row. The link buttons go two-up beneath it, so four
     socials is two tidy rows rather than a tower of full-width buttons.
     Both rules need the #glam-events prefix: without it the ID in the base
     `#glam-events .glam-share` rule outranks them and nothing changes. */
  #glam-events .glam-share { flex: 1 1 100%; }
  /* 40%, not calc(50% - 4px): that basis is exactly half the row, so sub-pixel
     rounding tips the pair over the line and each one wraps to full width —
     the opposite of what it asks for. A basis under half leaves the grow to
     do the fitting, which is what it is for. */
  #glam-events .glam-link { flex: 1 1 40%; }

  /* Stack the row, then let price and CTA share the last line. */
  #glam-events .glam-rate {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  #glam-events .glam-rate-side {
    width: 100%;
    justify-content: space-between;
    /* The row now starts at the left edge, so the price leads the line rather
       than hugging a right margin that no longer exists. */
    text-align: start;
  }

  /* Ticket rows keep price over fee, but spread across the full width so the
     button still lands under the buyer's thumb on the right. */
  #glam-events .glam-rate-side:has(.glam-rate-fee) {
    grid-template-columns: 1fr auto;
  }

  #glam-events .glam-group-title { font-size: 17px; }
  #glam-events .glam-form-title { font-size: 22px; }
  #glam-events .glam-detail-desc { font-size: 14px; }

  /* Full-width primary actions: easier to hit, and they read as the end of the
     form rather than as a small control floating under it. */
  #glam-events .glam-btn-primary { width: 100%; }

  /* The per-ticket rule and its indent cost real width on a 375px screen. */
  #glam-events .glam-attendee { padding-left: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  #glam-events * { transition: none !important; }
}

/* ---- Tickets ------------------------------------------------------------- */

/* The booking fee sits under the price on the rate row so it is disclosed
   before the buyer enters the flow, not first seen on the payment page. Muted
   and small: it's a qualifier on the price, not a second price. */
#glam-events .glam-rate-fee {
  color: var(--glam-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The rate side stacks price over fee, so it can no longer be a single row. */
#glam-events .glam-rate-side:has(.glam-rate-fee) {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "price cta" "fee cta";
  align-items: center;
  column-gap: 16px;
  row-gap: 2px;
}
#glam-events .glam-rate-side:has(.glam-rate-fee) .glam-rate-price { grid-area: price; }
#glam-events .glam-rate-side:has(.glam-rate-fee) .glam-rate-fee { grid-area: fee; }
#glam-events .glam-rate-side:has(.glam-rate-fee) .glam-btn,
#glam-events .glam-rate-side:has(.glam-rate-fee) .glam-sold-out { grid-area: cta; }

#glam-events .glam-attendees {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* A fieldset per ticket. Bordered on the inline-start edge only — a full box
   per attendee stacks into a wall of frames on a phone at four tickets. */
#glam-events .glam-attendee {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0 0 0 16px;
  border: 0;
  border-inline-start: 1px solid var(--glam-line);
}

/* Stays white for the same reason as .glam-rate-name — 17px is under the
   18.66px bold threshold that makes the red legal. */
#glam-events .glam-attendee-title {
  font-family: var(--glam-display);
  font-weight: 700;
  color: var(--glam-body);
  font-size: 17px;
  padding: 0;
  margin: 0 0 2px;
}

#glam-events .glam-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--glam-muted);
  cursor: pointer;
}
/* 44px is the touch target; the box itself stays visually small. */
#glam-events .glam-check input {
  width: 18px;
  height: 18px;
  min-height: 18px;
  accent-color: var(--glam-accent);
  flex-shrink: 0;
}

#glam-events .glam-order-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0;
  border-top: 1px solid var(--glam-line);
}

#glam-events .glam-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  color: var(--glam-muted);
  font-variant-numeric: tabular-nums;
}

/* The total is the number the buyer is agreeing to, so it carries full
   contrast while the components stay muted. */
#glam-events .glam-summary-total {
  color: inherit;
  font-size: 16px;
  font-weight: 600;
  padding-top: 8px;
  border-top: 1px solid var(--glam-line);
}

/* A saving is not the number being agreed to, so it stays muted like the other
   components — only the total gets full contrast. Not coloured green: the
   palette is drawn from `currentColor` plus one accent, and a lone semantic
   green here would be the only hue on the page that means something. */
#glam-events .glam-summary-discount {
  color: var(--glam-accent-text);
}

#glam-events .glam-summary-note {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--glam-muted);
}

/* ---- Discount code ------------------------------------------------------ */

#glam-events .glam-discount {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
}

#glam-events .glam-discount-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

#glam-events .glam-discount-input {
  flex: 1 1 auto;
  min-width: 0;
  text-transform: uppercase;
}
#glam-events .glam-discount-input:disabled {
  opacity: 0.7;
  cursor: default;
}

/* Secondary to "Continue to payment" — applying a code is a step on the way to
   the order, not the order itself. Outlined rather than filled so there is only
   ever one accent-filled button on the form. */
#glam-events .glam-btn-quiet {
  flex: 0 0 auto;
  padding: 12px 18px;
  background: transparent;
  color: var(--glam-accent-text);
  border: 1px solid var(--glam-line);
}
#glam-events .glam-btn-quiet:hover {
  background: transparent;
  border-color: var(--glam-accent-text);
}
#glam-events .glam-btn-quiet:active {
  background: color-mix(in srgb, var(--glam-accent) 10%, transparent);
}
#glam-events .glam-btn-quiet:disabled {
  opacity: 0.6;
  cursor: default;
}

#glam-events .glam-discount-msg {
  margin: 0;
  font-size: 13px;
}
#glam-events .glam-discount-good { color: var(--glam-accent-text); }
#glam-events .glam-discount-bad { color: var(--glam-muted); }

/* Returning from a failed payment. Accent as a left rule, never as text. */
#glam-events .glam-banner-error {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0 16px 16px;
  margin-bottom: 20px;
  border-inline-start: 3px solid var(--glam-accent);
}


/* ---- Removed: the reading toggle ----------------------------------------
   A "Standard / Increase Visibility" button briefly let the reader choose how
   bright the description copy was. Removed on 2026-07-29: the brighter of the
   two states is now simply the design, and a control offering a dimmer, less
   legible alternative was not worth a permanent piece of UI on a page whose job
   is to sell a ticket. --glam-desc is white unconditionally, and every title is
   700 unconditionally. Nothing about the widget's appearance is now a stored
   per-visitor preference.

   If it ever comes back, note what made it work: the state lived as a class on
   #glam-events ITSELF, because every view clears the root's children on
   navigation and a class on a child would not have survived.
*/

#glam-events .glam-link-strong {
  color: var(--glam-accent-text);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 2px;
}
#glam-events .glam-link-strong:hover { color: #fff; }

#glam-events .glam-link-strong {
  color: var(--glam-accent-text);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 2px;
}
#glam-events .glam-link-strong:hover { color: #fff; }