/* ==========================================================================
   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; }
}