/* ==========================================================================
   SSTGC Events — front end
   Everything is scoped to .sstgc-* so it can't leak into the theme.
   Change the six variables below to reskin the whole plugin.
   ========================================================================== */

.sstgc-ev,
.sstgc-promo,
.sstgc-announce {
	--sstgc-maroon: #8C2F1F;
	--sstgc-saffron: #E8871E;
	--sstgc-ink: #1C1108;
	--sstgc-cream: #FDF6EC;
	--sstgc-line: #E4D8C8;
	--sstgc-body: #3C4A5A;
	--sstgc-radius: 10px;
}

/* ==========================================================================
   Living inside somebody else's theme
   ========================================================================== */

/*
 * Two ways to get full width, and only one of them can apply at a time.
 *
 * 1. The plugin's own page template (body.sstgc-fullwidth). There is no
 *    container, so nothing to escape and nothing to do.
 * 2. The shortcode dropped into an ordinary page. Here the sections break out
 *    of the theme's content column with negative margins.
 *
 * These are written as mutually exclusive selectors rather than one overriding
 * the other, because :not() carries the specificity of a class — an override
 * written afterwards loses to the rule it is meant to override, silently, and
 * the page renders as though neither had been written.
 */
.sstgc-page { width: 100%; max-width: 100%; }

body:not(.sstgc-fullwidth):has(.sstgc-ev:not(.sstgc-ev--contained)),
body:not(.sstgc-fullwidth):has(.sstgc-promo--banner:not(.sstgc-promo--contained)) {
	/* 100vw includes the scrollbar, so the breakout overhangs by its width.
	   This absorbs that. It goes on the scroll container, never on .sstgc-ev
	   itself — there it would clip the very children it is meant to release. */
	overflow-x: hidden;
}

body:not(.sstgc-fullwidth) .sstgc-ev:not(.sstgc-ev--contained) > .sstgc-ev__banner,
body:not(.sstgc-fullwidth) .sstgc-ev:not(.sstgc-ev--contained) > .sstgc-ev__bar,
body:not(.sstgc-fullwidth) .sstgc-ev:not(.sstgc-ev--contained) > .sstgc-sec,
body:not(.sstgc-fullwidth) .sstgc-promo--banner:not(.sstgc-promo--contained) {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}

/*
 * No :has() support: without the body rule to absorb the scrollbar width a
 * 100vw breakout adds a horizontal scrollbar, so back off and stay boxed.
 * Plainer, never broken.
 */
@supports not selector(:has(*)) {
	body:not(.sstgc-fullwidth) .sstgc-ev > .sstgc-ev__banner,
	body:not(.sstgc-fullwidth) .sstgc-ev > .sstgc-ev__bar,
	body:not(.sstgc-fullwidth) .sstgc-ev > .sstgc-sec,
	body:not(.sstgc-fullwidth) .sstgc-promo--banner {
		margin-left: 0;
		margin-right: 0;
		width: auto;
		max-width: none;
	}
}

/*
 * Inner measure.
 *
 * The colour bands run edge to edge; their contents must not. Anything that is
 * not already a max-width grid gets centred and capped here, or on a wide
 * monitor the headings and small print stretch to 2000px.
 */
.sstgc-ev .sstgc-ev__tagline,
.sstgc-ev .sstgc-ev__body,
.sstgc-ev .sstgc-note,
.sstgc-ev .sstgc-h2,
.sstgc-ev .sstgc-ev__notes,
.sstgc-ev .sstgc-ev__when,
.sstgc-ev .sstgc-ev__where {
	max-width: 760px;
	margin-inline: auto !important;
	padding-inline: 1.25rem;
}

/*
 * Reset what the theme does to lists.
 *
 * Themes routinely set multi-column lists, bullet glyphs and left padding on
 * ol/ul inside post content. That turns the programme timeline into two
 * columns with stray bullets, and replaces the tick marks on the pass cards.
 */
.sstgc-ev ul,
.sstgc-ev ol,
.sstgc-promo ul {
	/*
	 * Only the things themes genuinely break: bullet glyphs and multi-column.
	 *
	 * Margin and padding are deliberately NOT reset here. This selector is
	 * (0,1,1) and every component list is (0,1,0), so resetting spacing here
	 * silently beats each component's own layout — the timeline loses its
	 * left rail and sits flush against the page edge.
	 */
	list-style: none;
	column-count: 1;
	columns: auto;
}
.sstgc-ev .sstgc-pass__list,
.sstgc-ev .sstgc-tier__list,
.sstgc-ev .sstgc-timeline {
	margin-block: 0;
}
.sstgc-ev li::marker,
.sstgc-promo li::marker { content: none; }

/*
 * Inline emphasis must inherit.
 *
 * Themes almost always style `strong` and `em` with a heading colour. Setting
 * a colour on the parent only sets it by INHERITANCE, and inheritance loses to
 * any direct rule on the element itself — so `strong` keeps the theme's dark
 * heading colour even inside a maroon bar, while the plain text beside it goes
 * white. That is exactly what makes one half of a sentence readable and the
 * other half not.
 *
 * These selectors are (0,1,1) against the theme's (0,0,1), so `inherit` wins
 * and every surface below can set one colour on itself and be believed.
 */
.sstgc-ev strong, .sstgc-ev em, .sstgc-ev b, .sstgc-ev i, .sstgc-ev span,
.sstgc-promo strong, .sstgc-promo em, .sstgc-promo b, .sstgc-promo span,
.sstgc-announce strong, .sstgc-announce em, .sstgc-announce b, .sstgc-announce span,
.sstgc-sticky strong, .sstgc-sticky em, .sstgc-sticky b, .sstgc-sticky span {
	color: inherit;
}

/* Buttons keep their own colour — they are the one thing that must not inherit
   the surface they sit on. */
.sstgc-announce .sstgc-announce__btn,
.sstgc-announce .sstgc-announce__btn span,
.sstgc-promo .sstgc-btn,
.sstgc-promo .sstgc-btn span,
.sstgc-sticky .sstgc-btn,
.sstgc-sticky .sstgc-btn span,
.sstgc-ev .sstgc-btn,
.sstgc-ev .sstgc-btn span { color: inherit; }

.sstgc-ev .sstgc-btn--primary,
.sstgc-promo .sstgc-btn--primary,
.sstgc-sticky .sstgc-btn--primary { color: var(--sstgc-ink) !important; }
.sstgc-ev .sstgc-btn--buy { color: #fff !important; }
.sstgc-ev .sstgc-btn--ghost { color: var(--sstgc-maroon) !important; }

/* Chips and badges set their own foreground against their own background. */
.sstgc-ev .sstgc-pass__flag,
.sstgc-ev .sstgc-pass__status { color: inherit; }
.sstgc-ev .sstgc-pass__flag { color: var(--sstgc-ink) !important; }

/* And to text colour — the theme's link and body colours bleed into ours. */
.sstgc-ev,
.sstgc-ev p,
.sstgc-ev li { color: var(--sstgc-body, #3C4A5A); }
.sstgc-ev .sstgc-h2,
.sstgc-ev .sstgc-pass__name,
.sstgc-ev .sstgc-artist__name { color: var(--sstgc-ink); }
.sstgc-ev__tagline,
.sstgc-ev__body p { color: var(--sstgc-body); }
.sstgc-sec--dark,
.sstgc-sec--dark p,
.sstgc-sec--dark li { color: #F1E6D8; }

/* ---------- Buttons ---------- */
.sstgc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	font-weight: 700;
	font-size: .95rem;
	line-height: 1.2;
	padding: .75rem 1.5rem;
	border-radius: 6px;
	border: 2px solid transparent;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
}
.sstgc-btn--primary { background: var(--sstgc-saffron); color: var(--sstgc-ink) !important; }
.sstgc-btn--primary:hover { background: #d0760f; }
.sstgc-btn--buy { background: var(--sstgc-maroon); color: #fff !important; width: 100%; margin-top: auto; }
.sstgc-btn--buy:hover { background: #6f2418; }
.sstgc-btn--ghost { border-color: currentColor; color: var(--sstgc-maroon) !important; }
.sstgc-btn--ghost:hover { background: rgba(140, 47, 31, .08); }

/* ---------- Sections ---------- */
.sstgc-sec { padding-block: clamp(2.5rem, 6vw, 4rem); scroll-margin-top: 90px; }
.sstgc-sec--tint { background: var(--sstgc-cream); }
.sstgc-sec--dark { background: var(--sstgc-ink); color: #F1E6D8; }
.sstgc-sec--dark a { color: var(--sstgc-saffron); }
.sstgc-ev .sstgc-h2,
.sstgc-h2 {
	text-align: center !important;
	font-size: clamp(1.6rem, 3.2vw, 2.3rem);
	/* Longhand, not `margin: 0 0 2rem`. The shorthand would reset
	   margin-inline to 0 and drag the whole heading box to the left edge —
	   where its centred text then centres inside a left-hand box. */
	margin-block: 0 2rem;
}
.sstgc-sec--dark .sstgc-h2 { color: #fff; }
.sstgc-h2::after {
	content: "";
	display: block;
	width: 54px;
	height: 3px;
	background: var(--sstgc-saffron);
	border-radius: 2px;
	margin: .85rem auto 0;
}
.sstgc-ev .sstgc-note { text-align: center !important; font-size: .9rem; opacity: .8; margin-top: 1.8rem; }
.sstgc-ev .sstgc-ev__notes { text-align: center !important; }
.sstgc-ev .sstgc-artist,
.sstgc-ev .sstgc-contacts { text-align: center !important; }

/* ---------- Banner ---------- */
.sstgc-banner { display: block; width: 100%; }
.sstgc-banner img { width: 100%; height: auto; display: block; }
.sstgc-banner__link { display: block; }
.sstgc-ev__banner { margin-bottom: 0; }

/* ---------- Event bar under the banner ---------- */
.sstgc-ev .sstgc-ev__bar,
.sstgc-ev__bar {
	background: var(--sstgc-cream);
	border-bottom: 1px solid var(--sstgc-line);
	text-align: center !important;
	padding: 1.5rem 1.25rem;
}
.sstgc-ev__when { font-size: 1.05rem; margin-block: 0 .3rem; }
.sstgc-ev__where { font-size: .95rem; opacity: .8; margin-block: 0 1.2rem; }
.sstgc-ev__actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
/* The tagline.
 *
 * Was 1.2rem — barely above body size, so "A spectacular evening of live
 * music" read as another line of detail rather than as the line that sells the
 * evening. It is the one piece of copy on the page written to be felt rather
 * than consulted.
 *
 * The doubled .sstgc-ev .sstgc-ev is deliberate and was already here: it
 * outranks the colour rules further up the file. Changing the size here rather
 * than adding a fifth tagline rule keeps that in one place. */
.sstgc-ev .sstgc-ev .sstgc-ev__tagline {
	text-align: center !important;
	font-size: clamp(1.45rem, 1.15rem + 1.4vw, 2.1rem);
	font-weight: 300;
	max-width: 24ch;
	margin: 2rem auto 0;
	line-height: 1.3;
	letter-spacing: -0.015em;
	text-wrap: balance;
}
.sstgc-ev .sstgc-ev__body { max-width: 720px; margin-block: 2rem 0; padding-inline: 1.25rem; }
.sstgc-ev__notes { font-size: .85rem; opacity: .7; padding-block: 2rem; }

/* ---------- Sticky pass bar ---------- */
.sstgc-sticky {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 999;
	background: var(--sstgc-ink);
	color: #fff;
	transform: translateY(110%);
	transition: transform .25s ease;
	box-shadow: 0 -6px 24px rgba(0,0,0,.18);
}
.sstgc-sticky.is-visible { transform: translateY(0); }
.sstgc-sticky__inner {
	max-width: 1180px;
	margin-inline: auto;
	padding: .7rem 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.sstgc-sticky__meta { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.sstgc-sticky__meta strong { font-size: .95rem; color: #fff; }
.sstgc-sticky__meta span { font-size: .8rem; opacity: .75; }
.sstgc-sticky .sstgc-btn { padding: .55rem 1.2rem; white-space: nowrap; }
@media (max-width: 480px) { .sstgc-sticky__meta span { display: none; } }

/* ---------- Pass cards ---------- */
.sstgc-passes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1.5rem;
	max-width: 1100px;
	margin-inline: auto;
	padding-inline: 1.25rem;
	align-items: stretch;
}
.sstgc-pass {
	position: relative;
	background: #fff;
	border: 1px solid var(--sstgc-line);
	border-radius: var(--sstgc-radius);
	padding: 1.9rem 1.6rem 1.6rem;
	display: flex;
	flex-direction: column;
	box-shadow: 0 2px 10px rgba(28,17,8,.05);
}
.sstgc-pass.is-highlight {
	border: 2px solid var(--sstgc-saffron);
	box-shadow: 0 12px 34px rgba(140,47,31,.14);
}
.sstgc-pass__flag {
	position: absolute;
	top: -.85rem; left: 1.6rem;
	background: var(--sstgc-saffron);
	color: var(--sstgc-ink);
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	padding: .3rem .8rem;
	border-radius: 999px;
}
.sstgc-pass__name { font-size: 1.15rem; margin: 0 0 .2rem; }
.sstgc-pass__price {
	font-size: 2.4rem;
	font-weight: 800;
	color: var(--sstgc-maroon);
	line-height: 1;
	margin: 0 0 1.1rem;
}
.sstgc-pass__list { list-style: none; padding: 0; margin: 0 0 1.5rem; font-size: .93rem; }
.sstgc-pass__list li { padding-left: 1.5rem; position: relative; margin-bottom: .5rem; }
.sstgc-pass__list li::before {
	content: "\2713" !important;
	position: absolute;
	left: 0;
	color: var(--sstgc-saffron);
	font-weight: 800;
	font-size: 1em;
	line-height: inherit;
}
.sstgc-pass__nolink { margin-top: auto; font-size: .9rem; opacity: .75; }

/* ---------- QR ---------- */
.sstgc-qr {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1.5rem;
	max-width: 760px;
	margin: 1.5rem auto 0;
}
.sstgc-qr figure { margin: 0; text-align: center; }
.sstgc-qr img { max-width: 200px; margin-inline: auto; height: auto; }
.sstgc-qr figcaption { font-weight: 600; font-size: .88rem; margin-top: .5rem; }

/* ---------- Artists ---------- */
.sstgc-artists {
	display: grid;
	/* Explicit counts rather than auto-fit: four artists in an auto-fit grid
	   land 3 + 1, leaving an orphan hanging under the first column. */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.8rem;
	max-width: 1100px;
	margin-inline: auto;
	padding-inline: 1.25rem;
}
@media (max-width: 900px) { .sstgc-artists { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .sstgc-artists { grid-template-columns: 1fr; } }
/* The card is a column so the "Read more" line sits at the same height on
   every card whatever the length of the name and role above it. Previously a
   two-line name pushed its toggle down and the row of toggles was ragged. */
.sstgc-artist {
	text-align: center;
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* 4:5, not a square.
 *
 * These are portrait photographs — a performer standing at a microphone, a
 * musician seated with a veena. Cropped square they lose the top of the head
 * and the bottom of the instrument, which is most of what the photograph was
 * of. A portrait frame fits the subject, and the crop is anchored high because
 * that is where the face is. */
/* The whole photograph, never cropped.
 *
 * `cover` fills the frame by cutting whatever does not fit, which on a
 * full-length shot of a performer takes the feet and sometimes the top of the
 * head. These are photographs the artists supplied; showing three quarters of
 * one is worse than showing all of it with a little space at the sides.
 *
 * The frame keeps a fixed ratio so the four cards still share a baseline —
 * the photograph sits inside it rather than being cut to fit it. */
.sstgc-artist__photo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}
.sstgc-artist__photo {
	max-width: 200px;
	margin-inline: auto;
	aspect-ratio: 4 / 5;
	border-radius: 12px;
	overflow: hidden;
	/* A tint behind the letterbox, so the bands read as a frame rather than as
	   the photograph having failed to load. */
	background: var(--sstgc-tint, #fdf6ef);
	display: flex;
	align-items: center;
	justify-content: center;
}
.sstgc-artist__initials {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 12px;
	background: linear-gradient(140deg, var(--sstgc-maroon), #b8543f);
	color: #fff;
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	font-weight: 800;
	letter-spacing: .04em;
}
.sstgc-artist__name { font-size: 1.05rem; margin: .9rem 0 .1rem; }
.sstgc-artist__role {
	font-size: .84rem;
	color: var(--sstgc-maroon);
	font-weight: 600;
	margin: 0 0 .6rem;
}
/* ── Event logo ────────────────────────────────────────────────────────────
   The fundraiser's own mark. Optional — the section disappears when no logo
   is uploaded, rather than leaving a gap where one might have been.        */

.sstgc-ev__logo {
  display: flex;
  justify-content: center;
  margin: 0 0 1.25rem;
}
.sstgc-ev__logo img {
  max-height: 110px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.sstgc-sticky__logo {
  height: 34px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  margin-right: .75rem;
}

@media (max-width: 640px) {
  .sstgc-ev__logo img { max-height: 72px; }
  /* The sticky bar has a title, a date and a button to fit. On a phone the
     logo is the thing that can go. */
  .sstgc-sticky__logo { display: none; }
}

@media (max-width: 640px) {
  /* Matches the specificity of the rule it overrides — a single-class version
     loses to .sstgc-ev .sstgc-ev .sstgc-ev__tagline further up. */
  .sstgc-ev .sstgc-ev .sstgc-ev__tagline { max-width: none; margin-top: 1.25rem; }
}

/* ── Artist bio dialog ─────────────────────────────────────────────────────
   A bio is prose, and prose needs a measure. Inline in a 200px card it ran to
   forty lines and pushed the row of cards apart; here it gets the width of the
   page and the cards stay where they are.                                    */

.sstgc-artist__more {
  margin-top: auto;
  padding: .5rem 0 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  color: var(--sstgc-brand, #b85a00);
  cursor: pointer;
  text-align: center;
  width: 100%;
}
.sstgc-artist__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.sstgc-artist__more:focus-visible { outline: 2px solid var(--sstgc-brand, #b85a00); outline-offset: 3px; border-radius: 4px; }

.sstgc-bio {
  /* Centred explicitly.
   *
   * A <dialog> centres itself with `margin: auto` against `inset: 0` — but
   * only while both are untouched. Something in the theme's reset sets a
   * margin on dialog, which pinned it to the top-left corner. Stating all
   * four is the only version that cannot be knocked out of place.  */
  position: fixed;
  inset: 0;
  margin: auto;

  width: min(620px, calc(100vw - 2rem));
  max-height: min(80vh, 720px);
  padding: 0;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 24px 60px -12px rgba(24, 24, 27, .35);
  overflow: hidden;
  color: var(--sstgc-ink, #18181b);
  background: #fff;

  /* The event page centres its text; a bio is prose and reads left. */
  text-align: left;
}
.sstgc-bio::backdrop {
  background: rgba(24, 24, 27, .55);
  backdrop-filter: blur(3px);
}

.sstgc-bio__inner {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 1.5rem;
  padding: 1.75rem;
  max-height: inherit;
  overflow-y: auto;
}

.sstgc-bio__photo img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}

.sstgc-bio__name { margin: 0 0 .25rem; font-size: 1.3rem; font-weight: 700; text-align: left; }
.sstgc-bio__role {
  text-align: left;
  margin: 0 0 1rem;
  font-size: .92rem;
  font-weight: 600;
  color: var(--sstgc-brand, #b85a00);
}
.sstgc-bio__text {
  text-align: left;
  margin: 0;
  font-size: .97rem;
  /* A readable measure. The whole point of moving out of the card. */
  line-height: 1.75;
  color: var(--sstgc-body, #4a4945);
}

.sstgc-bio__close-form { position: absolute; top: .5rem; right: .5rem; z-index: 2; }
.sstgc-bio__close {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 1px 6px rgba(24, 24, 27, .2);
  font-size: 22px;
  line-height: 1;
  color: var(--sstgc-ink, #18181b);
  cursor: pointer;
}
.sstgc-bio__close:hover { background: #fff; }

@media (max-width: 560px) {
  /* One column on a phone — 190px of photo beside text leaves neither enough. */
  .sstgc-bio__inner { grid-template-columns: 1fr; gap: 1rem; padding: 1.25rem; }
  .sstgc-bio__photo { max-width: 160px; margin-inline: auto; }
}

/* Without JavaScript a <dialog> never opens, so the button would do nothing.
   Hide it and show the bio inline instead — long, but readable. */
.sstgc-ev.no-js .sstgc-artist__more { display: none; }
.sstgc-ev.no-js .sstgc-bio {
  display: block;
  position: static;
  width: auto;
  max-height: none;
  box-shadow: none;
  border-top: 1px solid var(--sstgc-line, #e4ded8);
  border-radius: 0;
  margin-top: .75rem;
}
.sstgc-ev.no-js .sstgc-bio__close-form { display: none; }
.sstgc-ev.no-js .sstgc-bio__inner { padding: .75rem 0; grid-template-columns: 1fr; }
.sstgc-ev.no-js .sstgc-bio__photo { display: none; }

/* ── Site-wide announcement bar ────────────────────────────────────────────
   The strip above the site header on every page.

   This had no styling at all — the block near the top of this file that names
   .sstgc-announce only declares the colour variables, so the markup rendered
   as unstyled inline text and looked like a broken page. It was never a
   caching or enqueue problem; the rules did not exist.                      */

.sstgc-announce {
  position: relative;
  z-index: 90;
  background: var(--sstgc-maroon);
  color: #fff;
  font-size: .92rem;
  line-height: 1.4;
}

.sstgc-announce__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding: .6rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.sstgc-announce__text {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.sstgc-announce__text strong { font-weight: 600; color: #fff; }
.sstgc-announce__date { opacity: .85; font-size: .88rem; }

.sstgc-announce__btn {
  display: inline-block;
  padding: .38rem 1rem;
  border-radius: 999px;
  background: var(--sstgc-saffron);
  color: var(--sstgc-ink) !important;
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background .15s ease, transform .15s ease;
}
.sstgc-announce__btn:hover { background: #fff; transform: translateY(-1px); }
.sstgc-announce__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.sstgc-announce__close {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, .75);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.sstgc-announce__close:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.sstgc-announce__close:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

@media (max-width: 640px) {
  /* The close button sits over the right edge, so the row needs room for it. */
  .sstgc-announce__inner { padding: .55rem 3rem .55rem 1rem; gap: .6rem; font-size: .86rem; }
  .sstgc-announce__btn { padding: .32rem .85rem; font-size: .8rem; }
  .sstgc-announce__close { right: .5rem; }
}

/* ── Programme timeline ────────────────────────────────────────────────────
   A medallion per entry, a rail down the middle, the time beside it and the
   description on a tinted panel.

   Grid was tried and abandoned: forcing a pseudo-element dot into a named
   column left auto-placement to put the time in the wrong track and push the
   description onto a second row. Everything here is absolutely positioned
   against a flex row, so nothing can land in a cell it was not meant for.

   The colours alternate saffron and maroon down the list. That is not
   decoration — it makes the entries countable at a glance, which a single
   colour does not.                                                          */

.sstgc-ev .sstgc-timeline {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 620px;
  position: relative;
  text-align: left;
}

/* The rail, behind the medallions and running only between them. */
.sstgc-ev .sstgc-timeline::before {
  content: '';
  position: absolute;
  left: 33px;
  top: 34px;
  bottom: 34px;
  width: 2px;
  background: var(--sstgc-maroon);
  opacity: .35;
}

.sstgc-ev .sstgc-timeline li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 0 0 84px;
  min-height: 68px;
  margin-bottom: .75rem;
}
.sstgc-ev .sstgc-timeline li:last-child { margin-bottom: 0; }

/* The medallion. */
.sstgc-ev .sstgc-timeline__icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--sstgc-saffron);
  box-shadow: 0 2px 8px rgba(28, 17, 8, .18);
  z-index: 1;
}
.sstgc-ev .sstgc-timeline li:nth-child(even) .sstgc-timeline__icon {
  background: var(--sstgc-maroon);
}

/* No separate dot.
   It was drawn at the row's own top edge rather than on the rail, so it
   floated above each entry looking like a stray bullet. The medallion already
   sits on the rail and marks the point — a second marker beside it was never
   adding anything. */

.sstgc-ev .sstgc-timeline__time {
  flex: 0 0 5.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--sstgc-saffron);
  white-space: nowrap;
  /* A hairline between the time and what happens at it, as on the poster. */
  border-right: 1px solid rgba(140, 47, 31, .2);
  padding-right: 1rem;
}
.sstgc-ev .sstgc-timeline li:nth-child(even) .sstgc-timeline__time { color: var(--sstgc-maroon); }

.sstgc-ev .sstgc-timeline__what {
  flex: 1;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--sstgc-ink);
}

/* The tinted panel behind the row. */
.sstgc-ev .sstgc-timeline li > .sstgc-timeline__time,
.sstgc-ev .sstgc-timeline li > .sstgc-timeline__what { position: relative; z-index: 1; }
.sstgc-ev .sstgc-timeline li::after {
  content: '';
  position: absolute;
  left: 68px;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(140, 47, 31, .04);
  border-radius: 10px;
  z-index: 0;
}

@media (max-width: 560px) {
  .sstgc-ev .sstgc-timeline li { padding-left: 62px; min-height: 56px; gap: .6rem; }
  .sstgc-ev .sstgc-timeline__icon { width: 46px; height: 46px; }
    .sstgc-ev .sstgc-timeline::before { left: 25px; }
  .sstgc-ev .sstgc-timeline li::after { left: 52px; }
  .sstgc-ev .sstgc-timeline__time { flex: 0 0 4.4rem; font-size: .92rem; padding-right: .6rem; }
  .sstgc-ev .sstgc-timeline__what { font-size: .92rem; }
}

/* ── Timeline medallions ───────────────────────────────────────────────────
   Numbered, not iconed.

   Two attempts at icons failed for the same underlying reason: I was choosing
   a picture without being able to see it rendered. Hand-written SVG paths
   looked hand-written. Font glyphs — ♫ ⏸ ❝ ✦ — are not in Poppins, so the
   browser substituted whatever it had and produced garbage.

   A number is in every font, needs no asset, and does the job the poster's
   icons were doing: it makes the evening read as a sequence you can count
   through.                                                                   */

.sstgc-ev .sstgc-timeline { counter-reset: sstgc-step; }
.sstgc-ev .sstgc-timeline li { counter-increment: sstgc-step; }

.sstgc-ev .sstgc-timeline__icon::before {
  content: counter(sstgc-step);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

@media (max-width: 560px) {
  .sstgc-ev .sstgc-timeline__icon::before { font-size: 17px; }
}

/* ── Questions ─────────────────────────────────────────────────────────────
   An accordion, not a bulleted list.

   It rendered as nine lines against the left edge with the browser's default
   disclosure triangle — so it read as a list of links rather than as questions
   anyone could open. The answers were there all along, one click away, and
   nothing said so.                                                           */

.sstgc-ev .sstgc-faq {
  max-width: 720px;
  margin-inline: auto;
  text-align: left;
  border: 1px solid var(--sstgc-line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.sstgc-ev .sstgc-faq .sstgc-details { border: 0; border-radius: 0; margin: 0; }
.sstgc-ev .sstgc-faq .sstgc-details + .sstgc-details {
  border-top: 1px solid var(--sstgc-line);
}

.sstgc-ev .sstgc-faq summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--sstgc-ink);
  cursor: pointer;
  list-style: none;
  transition: background .15s ease, color .15s ease;
}
/* The browser's own triangle, removed in both engines. */
.sstgc-ev .sstgc-faq summary::-webkit-details-marker { display: none; }
.sstgc-ev .sstgc-faq summary::marker { content: ''; }

.sstgc-ev .sstgc-faq summary:hover { background: var(--sstgc-cream); color: var(--sstgc-maroon); }
.sstgc-ev .sstgc-faq summary:focus-visible {
  outline: 2px solid var(--sstgc-saffron);
  outline-offset: -2px;
}

/* A plus that becomes a minus. Drawn from two rules rather than a glyph, so
   there is nothing for a font to substitute — the last two attempts at an icon
   both failed that way. */
.sstgc-ev .sstgc-faq summary::after {
  content: '';
  margin-left: auto;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  position: relative;
  background:
    linear-gradient(var(--sstgc-saffron), var(--sstgc-saffron)) center / 100% 2px no-repeat,
    linear-gradient(var(--sstgc-saffron), var(--sstgc-saffron)) center / 2px 100% no-repeat;
  transition: transform .2s ease;
}
.sstgc-ev .sstgc-faq .sstgc-details[open] summary::after {
  /* The vertical stroke rotates away, leaving the horizontal one. */
  background:
    linear-gradient(var(--sstgc-maroon), var(--sstgc-maroon)) center / 100% 2px no-repeat;
  transform: rotate(180deg);
}
.sstgc-ev .sstgc-faq .sstgc-details[open] summary {
  background: var(--sstgc-cream);
  color: var(--sstgc-maroon);
}

.sstgc-ev .sstgc-faq .sstgc-details p {
  margin: 0;
  padding: 0 1.25rem 1.25rem;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--sstgc-body);
  background: var(--sstgc-cream);
}

@media (max-width: 560px) {
  .sstgc-ev .sstgc-faq summary { padding: .9rem 1rem; font-size: .95rem; gap: .75rem; }
  .sstgc-ev .sstgc-faq .sstgc-details p { padding: 0 1rem 1rem; }
}

/* ── Get in touch ──────────────────────────────────────────────────────────
   Two groups, side by side, each a card.

   It rendered as centred lines with the phone number run into the name after
   a dash — so on a phone, where these numbers are meant to be tapped, the tap
   target was a few characters at the end of a sentence.

   Name and number on separate lines, the number set as the larger of the two,
   and the whole row tappable.                                                */

.sstgc-ev .sstgc-contacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1.25rem;
  max-width: 720px;
  margin-inline: auto;
  text-align: left;
}

.sstgc-ev .sstgc-contacts__group {
  background: #fff;
  border: 1px solid var(--sstgc-line);
  border-radius: 12px;
  padding: 1.25rem 1.4rem;
}

.sstgc-ev .sstgc-contacts__group h3 {
  margin: 0 0 .9rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--sstgc-line);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--sstgc-maroon);
}

.sstgc-ev .sstgc-contacts__group p {
  margin: 0;
  padding: .75rem 0;
  display: flex;
  flex-direction: column;
  gap: 3px;

  /* The name.
   *
   * It was set at .92rem in the body colour, so it read as smaller and fainter
   * than the number below it — as though the person mattered less than their
   * phone. These are volunteers giving out their own numbers; the name should
   * carry the same weight as the digits. */
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--sstgc-ink);
}
.sstgc-ev .sstgc-contacts__group p + p { border-top: 1px dashed var(--sstgc-line); }

/* The number leads — it is the thing being looked for. */
.sstgc-ev .sstgc-contacts__group a {
  /* Slightly below the name in size — a phone number is read once and dialled,
     the name is what identifies who you are calling. */
  font-size: .98rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sstgc-maroon) !important;
  text-decoration: none !important;
  /* A comfortable tap target on a phone, where these get used. */
  padding: 2px 0;
}
.sstgc-ev .sstgc-contacts__group a:hover { text-decoration: underline !important; }

/* The em dash separating name from number is redundant once they are on
   separate lines. */
.sstgc-ev .sstgc-contacts__group p { text-indent: 0; }

@media (max-width: 560px) {
  .sstgc-ev .sstgc-contacts { max-width: none; }
  .sstgc-ev .sstgc-contacts__group a { font-size: 1.1rem; padding: 4px 0; }
}