/* =========================================================
   B1G Angeles: less fonty, more air (redesign, October 2026)
   One typeface (Archivo at its normal width) in sentence case, a warm
   off-white page with white sections, hairlines instead of heavy rules,
   soft corners, pill buttons, and a few playful touches (the yellow NEXT
   sticker, story circles, photos that tilt a little). B1G maroon
   (--brand) carries every call to action. js/site.js writes each event's
   colours into --event, --event-ink and the banner variables.
   ========================================================= */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --wall: #F7F6F2;
  --wall-2: #EFEDE8;
  --paper: #FFFFFF;
  --ink: #141414;
  --ink-2: #4A4A46;
  --ink-3: #6B6B66;
  --line: #DCDAD3;
  --line-2: #ECEAE4;
  --house: #2F4AD0;
  --brand: #5D0707;
  --brand-deep: #470404;
  --brand-ink: #FFFFFF;
  --on-brand-2: rgba(255, 255, 255, 0.82);
  --on-brand-rule: rgba(255, 255, 255, 0.3);
  --stamp: #F5C518;
  --ok: #2E6B3F;
  --event: var(--brand);
  --event-ink: #FFFFFF;
  --error: #B3261E;

  /* Topic colours (articles), one soft pastel each. */
  --t-first: #E9E3FF;
  --t-dgroups: #DCF3E5;
  --t-family: #FFE3D6;
  --t-serving: #DDEBFF;
  --t-faith: #FFF1BF;

  --rule: 1px solid var(--line);
  --hair: 1px solid var(--line);

  --r-s: 12px;
  --r-m: 18px;
  --r-l: 24px;
  --pill: 999px;
  --shadow-1: 0 1px 2px rgba(20, 20, 20, 0.05), 0 10px 28px -14px rgba(20, 20, 20, 0.22);
  --shadow-2: 0 2px 6px rgba(20, 20, 20, 0.06), 0 28px 56px -24px rgba(20, 20, 20, 0.36);

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1360px;
  --measure: 65ch;

  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4.5rem;
  --s9: 7rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

/* ---------- Base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 88px;
  scrollbar-color: #C9C7C0 transparent;
}

body {
  margin: 0;
  background-color: var(--wall);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  font-stretch: 100%;
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--brand);
}

::selection { background: var(--brand); color: var(--brand-ink); }
@media (min-width: 960px) { body { font-size: 1.0625rem; } }

img { display: block; max-width: 100%; height: auto; }

/* The hidden attribute always wins over layout styles. */
[hidden] { display: none !important; }
/* The arrow icons default to the size of the text around them; buttons and links that want another size set it themselves. */
svg.arrow { width: 1em; height: 1em; flex: none; vertical-align: -0.125em; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
  text-decoration-color: currentColor;
  transition: text-decoration-color 150ms var(--ease-out), color 150ms var(--ease-out);
}
a:hover { text-decoration-color: var(--brand); }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}

h1, h2, h3, h4 {
  margin: 0;
  font-stretch: 100%;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.25rem + 2.6vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); }
h3 { font-size: clamp(1.1875rem, 1rem + 0.5vw, 1.375rem); line-height: 1.2; letter-spacing: -0.01em; }

p { margin: 0 0 var(--s4); max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  border-radius: var(--pill);
  background: var(--brand);
  color: var(--brand-ink);
  padding: var(--s3) var(--s5);
  font-weight: 600;
}
.skip-link:focus { top: var(--s3); }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Small spaced caps, used sparingly: event dates and short group names. */
.label {
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.3;
}

.lede {
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.55;
  color: var(--ink-2);
}

/* Date marks on the type-only posters the site draws. */
.datemark {
  font-stretch: 62%;
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The sticker: only ever NEXT, TODAY, TOMORROW, THIS SATURDAY, NEW. */
.stamp {
  display: inline-block;
  background: var(--stamp);
  color: var(--ink);
  border-radius: 7px;
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.38em 0.62em 0.34em;
  transform: rotate(-4deg);
}

/* ---------- Buttons: pills ---------- */

.btn {
  --btn-bg: var(--brand);
  --btn-fg: var(--brand-ink);
  --btn-line: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 3rem;
  padding: 0.7rem 1.5rem;
  border: 1.5px solid var(--btn-line);
  border-radius: var(--pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: inherit;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0;
  text-decoration: none;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out), border-color 180ms var(--ease-out), transform 160ms var(--ease-out);
}
@media (max-width: 359px) { .btn { padding-inline: 1.1rem; } }
.btn:hover { --btn-bg: var(--brand-deep); --btn-line: var(--brand-deep); }
.btn:active { transform: scale(0.98); }
.btn[disabled],
.btn[aria-disabled="true"] {
  --btn-bg: var(--wall-2);
  --btn-fg: var(--ink-3);
  --btn-line: var(--line);
  cursor: not-allowed;
  transform: none;
}
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-line: var(--ink); }
.btn--ghost:hover { --btn-bg: var(--wall-2); --btn-line: var(--ink); }
.btn--ink { --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-line: var(--ink); }
.btn--ink:hover { --btn-bg: var(--brand); --btn-line: var(--brand); }
/* White button for maroon surfaces. */
.btn--inverse { --btn-bg: var(--brand-ink); --btn-fg: var(--brand); --btn-line: var(--brand-ink); }
.btn--inverse:hover { --btn-bg: transparent; --btn-fg: var(--brand-ink); }
.btn--block { width: 100%; }
/* White button with ink type, for event-coloured grounds. */
.btn--paper { --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-line: var(--paper); }
.btn--paper:hover { --btn-bg: var(--wall-2); --btn-line: var(--wall-2); }
.btn .arrow { width: 1.05em; height: 1.05em; flex: none; transition: transform 160ms var(--ease-out); }
.btn:hover .arrow { transform: translateX(2px); }
.btn.is-busy { cursor: progress; }
.btn.is-busy::after {
  content: "";
  width: 1em; height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn, .btn .arrow { transition: none; } .btn:active { transform: none; } }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 600;
  font-size: 0.9375rem;
  min-height: 2.75rem;
}
.textlink .arrow { width: 1em; height: 1em; transition: transform 160ms var(--ease-out); }
.textlink:hover .arrow { transform: translateX(2px); }

.linkbtn {
  padding: 0.25rem 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
  cursor: pointer;
  position: relative;
}
.linkbtn::after { content: ""; position: absolute; inset: -0.65rem -0.35rem; }
.linkbtn:hover { text-decoration-color: var(--brand); }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(247, 246, 242, 0.88);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line-2);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 64px;
}

/* The official logo. Maroon on light grounds, white on maroon. */
.brand { display: inline-flex; align-items: center; flex: none; min-height: 44px; text-decoration: none; }
.brand img { height: 26px; width: auto; }
@media (min-width: 400px) { .brand img { height: 28px; } }

/* Desktop nav: five links as quiet pills. Hover fills a soft pill behind
   the word; the page you're on keeps a thin ink ring. */
.nav { display: none; }
.nav ul { display: flex; gap: 0.125rem; list-style: none; margin: 0; padding: 0; }
.nav a {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 0.95rem;
  border-radius: var(--pill);
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color 180ms var(--ease-out);
}
.nav a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--wall-2);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 180ms var(--ease-out), transform 220ms var(--ease-out);
}
.nav a[aria-current="page"] { box-shadow: inset 0 0 0 1.5px var(--ink); font-weight: 600; }
.nav a:hover::before,
.nav a:focus-visible::before { opacity: 1; transform: scale(1); }
.nav a:active::before { background: var(--line); }
@media (prefers-reduced-motion: reduce) { .nav a, .nav a::before { transition: none; } }

.header-actions { display: flex; align-items: center; gap: var(--s2); }

/* ---------- Account: who is logged in ----------
   Neutral on purpose (white circle, ink outline, ink initial), so it never
   reads as a second maroon button next to Register. */

.avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  transition: background-color 180ms var(--ease-out);
}
.avatar svg { width: 55%; height: 55%; }
.avatar--lg { width: 3.25rem; height: 3.25rem; font-size: 1.375rem; }

/* Desktop: the initial and a down arrow, at the far right, open the account panel. */
.account { position: relative; display: none; }
@media (min-width: 960px) { .account:not([hidden]) { display: block; margin-left: var(--s1); } }
.account__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 3rem;
  padding: 0.25rem 0.625rem 0.25rem 0.25rem;
  border: 0;
  border-radius: var(--pill);
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 180ms var(--ease-out);
}
.account__btn:hover,
.account__btn[aria-expanded="true"] { background: var(--wall-2); }
.account__chev { width: 1rem; height: 1rem; flex: none; transition: transform 180ms var(--ease-out); }
.account__btn[aria-expanded="true"] .account__chev { transform: rotate(180deg); }
.account__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.75rem);
  z-index: 50;
  width: 21.5rem;
  padding: var(--s5);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-2);
}

/* The card: in the account panel, and at the top of the phone menu.
   My profile and Log out are menu rows, not buttons. */
.me-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3) var(--s4); align-items: center; }
.me-card__who { display: grid; gap: 0.125rem; min-width: 0; }
.me-card__name { font-weight: 700; font-size: 1.125rem; line-height: 1.25; overflow-wrap: anywhere; }
.me-card__sub { font-size: 0.9375rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.me-card__db { grid-column: 1 / -1; margin: 0; font-size: 0.875rem; line-height: 1.45; color: var(--ink-2); }
.me-card__links,
.me-card__confirm { grid-column: 1 / -1; }
.me-card__links { display: grid; border-top: var(--hair); }
.me-card__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  width: 100%;
  min-height: 3rem;
  padding: 0.25rem 0;
  border: 0;
  border-bottom: var(--hair);
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.me-card__link:last-child { border-bottom: 0; }
.me-card__link svg { width: 1.125rem; height: 1.125rem; flex: none; }
.me-card__link span { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; text-decoration-color: transparent; transition: text-decoration-color 150ms var(--ease-out); }
.me-card__link:hover span { text-decoration-color: var(--brand); }
.me-card__confirm { display: grid; gap: var(--s2); padding-top: var(--s3); border-top: var(--hair); }
.me-card__question { margin: 0; font-weight: 700; font-size: 1.0625rem; }
.me-card__note { margin: 0; font-size: 0.9375rem; color: var(--ink-2); }
.me-card__buttons { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.me-card__buttons .btn { min-height: 2.75rem; padding: 0.55rem 1.1rem; font-size: 0.9375rem; }
.me-card--panel .avatar { background: var(--wall); }

.header-actions .btn { min-height: 2.75rem; padding: 0.55rem 1.15rem; font-size: 0.9375rem; }

/* Phones: a round Menu button (the person's initial when logged in). */
.menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0 0.25rem;
  border: 0;
  border-radius: var(--pill);
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.menu-btn svg { width: 20px; height: 20px; flex: none; }
.menu-btn__icon { position: relative; display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1.5px solid var(--ink); border-radius: 50%; transition: background-color 180ms var(--ease-out); }
.menu-btn:hover .menu-btn__icon { background: var(--wall-2); }
.menu-btn__me { display: none; }
.menu-btn.has-me .menu-btn__icon { border: 0; width: auto; height: auto; }
.menu-btn.has-me .menu-btn__icon > svg { display: none; }
.menu-btn.has-me .menu-btn__me { display: inline-grid; position: relative; }
.menu-btn__me .avatar { width: 2.625rem; height: 2.625rem; font-size: 1rem; }
.menu-btn .avatar svg { width: 55%; height: 55%; }
.menu-btn__bars {
  position: absolute;
  right: -0.3rem;
  bottom: -0.2rem;
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--wall);
  color: var(--paper);
}
.menu-btn .menu-btn__bars svg { width: 0.7rem; height: 0.7rem; }
.menu-btn.has-me:hover .avatar { background: var(--wall-2); }
/* Phones: the round icon alone. */
.site-header .menu-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* The smallest phones (320 to 359px): a little tighter all round. */
@media (max-width: 359px) {
  .site-header .wrap, .header-actions { gap: var(--s2); }
  .brand img { height: 22px; }
  .header-actions .btn { padding-inline: 0.85rem; }
}

@media (min-width: 960px) {
  .site-header .wrap { min-height: 72px; gap: var(--s5); }
  .brand img { height: 30px; }
  .nav { display: block; }
  .header-actions .btn { min-height: 2.75rem; }
  /* Desktop keeps it to the five links, Register and (logged in) the account initial. */
  .menu-btn { display: none; }
}
@media (min-width: 960px) and (max-width: 1099px) {
  .site-header .wrap { gap: var(--s3); }
  .brand img { height: 26px; }
  .nav a { padding-inline: 0.7rem; }
}

/* Full-screen menu (phones): the page colour, big quiet links. */
.menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--wall);
  color: var(--ink);
  padding: var(--s3) var(--gutter) var(--s6);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out), visibility 0s linear 260ms;
}
.menu { overflow-y: auto; overscroll-behavior: contain; }
.menu.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .menu, .menu.is-open { transition: opacity 120ms linear, visibility 0s linear 120ms; transform: none; } }
.menu__me { margin-top: var(--s5); padding: var(--s4); border-radius: var(--r-m); background: var(--paper); }
.menu__top { display: flex; justify-content: space-between; align-items: center; min-height: 52px; }
.menu__top .menu-btn { min-height: 2.75rem; padding: 0 1.1rem; border: 1.5px solid var(--ink); }
.menu__top .menu-btn:hover { background: var(--wall-2); }
.menu ul { list-style: none; margin: var(--s5) 0 0; padding: 0; border-top: var(--hair); }
.menu li { border-bottom: var(--hair); }
.menu li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.75rem;
  padding: 0.5rem 0;
  font-weight: 600;
  font-size: clamp(1.375rem, 1rem + 2vw, 1.75rem);
  letter-spacing: -0.015em;
  line-height: 1.15;
  text-decoration: none;
}
.menu li a[aria-current="page"] { color: var(--brand); }
.menu li a[aria-current="page"]::after { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--brand); }
.menu__foot { margin-top: auto; padding-top: var(--s6); }
.menu__foot .btn { width: 100%; min-height: 3.25rem; }
.menu__foot p { margin-top: var(--s4); color: var(--ink-3); font-size: 0.9375rem; }
.menu__foot a:not(.btn) { color: var(--ink); }

/* ---------- Posters ---------- */

.poster {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  overflow: hidden;
  border-radius: var(--r-m);
  background: var(--wall-2);
}
.poster > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Type-only poster, drawn from the event's colours: a hairline row with
   B1G Angeles and the date, the title large in its own case, and a foot row. */
.poster--type {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  background: var(--p-bg, var(--house));
  color: var(--p-ink, #fff);
  /* Percent padding follows the poster's width (a container can't size itself in its own cqi). */
  padding: 6%;
}
.poster--type > * + * { margin-top: 3.5cqi; }
.poster__top,
.poster__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 4cqi;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.poster__top { font-size: max(0.625rem, 3.4cqi); border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent); padding-bottom: 2.5cqi; }
.poster__top .poster__date { font-variant-numeric: tabular-nums; }
.poster__art {
  flex: 1 1 52%;
  min-height: 0;
  overflow: hidden;
  border-radius: max(6px, 2.5cqi);
  background: rgba(0, 0, 0, 0.15);
}
.poster__art img { width: 100%; height: 100%; object-fit: cover; }
.poster__title {
  flex: 1 1 30%;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.poster--type:not(.has-art) .poster__title { flex-basis: 70%; align-items: center; }
.poster--type.has-sub .poster__title { flex: 0 1 auto; min-height: 30%; align-items: flex-end; }
.poster__sub {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  font-weight: 600;
  font-size: 7.5cqi;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.poster__title span {
  display: block;
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.025em;
  font-size: 20cqi;
  overflow-wrap: normal;
}
.poster__foot {
  font-size: max(0.625rem, 3cqi);
  border-top: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  padding-top: 2.5cqi;
  align-items: flex-start;
}
.poster__foot span:last-child { text-align: right; }
/* Thumbnail posters keep only the date and the title. */
@container (max-width: 220px) {
  .poster__foot, .poster__top > span:first-child { display: none; }
}

/* ---------- Hero: the next event ----------
   A rounded photo of B1G people beside the event (on top on phones): the
   NEXT sticker and when, the title, a short summary, where, and Register.
   An event shown by its poster gets the poster, tilted, on a soft panel
   (the Events page always does). */
.hero { padding-block: var(--s2) clamp(3rem, 7vw, 5.5rem); }
.hero__split { display: grid; gap: var(--s5); }
.hero__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 22px;
  background: var(--wall-2);
}
.hero__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
}
.hero__photo.is-loaded img { opacity: 1; }
.hero__photo.is-poster { display: grid; place-items: center; aspect-ratio: auto; padding: var(--s6) var(--s4); }
.hero__photo.is-poster .poster {
  width: min(100%, 15.5rem);
  transform: rotate(-2deg);
  box-shadow: 0 14px 30px -6px rgba(20, 20, 20, 0.2);
}
.hero__photo.is-poster .poster img { opacity: 1; }
.hero__panel { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.hero__when { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3); margin: var(--s1) 0 0; max-width: none; }
.hero__when .label { font-size: 0.75rem; letter-spacing: 0.1em; }
.hero__panel .event-title { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); line-height: 1.06; }
.hero__panel .lede { margin: 0; }
.hero__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); font-size: 0.9375rem; color: #2B2B28; }
.hero__facts li { display: flex; align-items: flex-start; gap: 0.625rem; line-height: 1.4; }
.hero__facts svg { width: 1.125rem; height: 1.125rem; flex: none; margin-top: 0.05rem; color: var(--ink-3); }
.hero__actions { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s1); }
.hero__actions .btn { width: 100%; min-height: 3.25rem; }
.hero__cal { margin-top: calc(-1 * var(--s1)); }
.hero__actions .btn--ghost[aria-expanded="true"] { background: var(--wall-2); }
.hero__invite { margin: 0; font-size: 0.875rem; color: var(--ink-3); }
.after-that {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  align-items: baseline;
  margin: 0;
  padding-top: var(--s3);
  border-top: var(--hair);
  font-size: 0.9375rem;
}
.after-that .label { font-size: 0.75rem; color: var(--ink-3); }
.event-title { font-size: clamp(1.5rem, 2.4vw, 2.125rem); line-height: 1.08; }
@media (min-width: 640px) and (max-width: 959px) {
  .hero__photo:not(.is-poster) { aspect-ratio: 16 / 10; }
}
@media (min-width: 640px) {
  .hero__actions { flex-direction: row; flex-wrap: wrap; }
  .hero__actions .btn { width: auto; padding-inline: 1.65rem; }
}
@media (min-width: 960px) {
  .hero { padding-top: var(--s5); }
  .hero__split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2.5rem, 4.5vw, 3.5rem); align-items: center; }
  .hero__photo { border-radius: 28px; }
  .hero__photo.is-poster { padding: var(--s8) var(--s6); }
  .hero__photo.is-poster .poster { width: min(100%, 27.5rem); box-shadow: 0 18px 40px -8px rgba(20, 20, 20, 0.2); }
  .hero__panel { gap: 1.25rem; }
  .hero__when .label { font-size: 0.8125rem; letter-spacing: 0.12em; }
  .hero__panel .lede { font-size: 1.1875rem; }
}
@media (prefers-reduced-motion: reduce) { .hero__photo img { transition: none; } }

/* An event's facts: label left, value right, hairlines between. */
.details {
  display: grid;
  grid-template-columns: minmax(3.75rem, auto) 1fr;
  margin: 0;
  border-top: var(--hair);
}
.details > div { display: contents; }
.details dt,
.details dd { padding: 0.625rem 0; border-bottom: var(--hair); }
.details dt {
  padding-top: 0.7rem;
  padding-right: var(--s3);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ink-3);
}
.details dd { margin: 0; font-size: 0.9375rem; line-height: 1.45; overflow-wrap: anywhere; }
.details dd small { display: block; font-size: 0.8125rem; color: var(--ink-3); }
@media (min-width: 960px) {
  .details { grid-template-columns: minmax(5.5rem, auto) 1fr; }
  .details dt { padding-right: var(--s4); font-size: 0.875rem; }
  .details dd { font-size: 1rem; }
  .details dd small { font-size: 0.875rem; }
}

/* ---------- Sections ---------- */

.section { padding-block: clamp(3rem, 7vw, 6rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.pagehead + .section { padding-top: var(--s2); }
.section__head { display: grid; gap: var(--s3); margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem); }
.section__head p { color: var(--ink-2); }
@media (min-width: 960px) {
  .section__head--split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 4.5vw, 5rem); align-items: end; }
}
/* A band's title with a short line or link on the right (wraps under on phones). */
.band-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--s1) var(--s4); }
.band-head h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); letter-spacing: -0.015em; }
.band-head p { margin: 0; font-size: 0.875rem; color: var(--ink-3); }
.band-head .textlink { min-height: 2.75rem; }
@media (max-width: 639px) { .band-head { display: grid; justify-content: start; } .band-head .textlink { justify-self: start; } }
@media (min-width: 960px) { .band-head p { font-size: 0.9375rem; } }

/* ---------- Welcome (home): "We're glad you're here." ----------
   A white band with soft top corners: centred words for first-timers, then
   four photos that lean a little, like prints on a table. */
.welcome {
  padding-block: clamp(3.5rem, 8vw, 6rem) var(--s2);
  background: var(--paper);
  border-radius: 28px 28px 0 0;
}
.welcome__text { display: grid; justify-items: center; gap: var(--s4); max-width: calc(45rem + 2 * var(--gutter)); text-align: center; }
.welcome__text h2 { font-size: clamp(1.875rem, 1.2rem + 2.6vw, 2.875rem); line-height: 1.06; letter-spacing: -0.02em; }
.welcome__text p { margin: 0; max-width: 40rem; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); line-height: 1.6; color: var(--ink-2); }
.welcome__text p a { color: var(--ink); }
.welcome__text .textlink { font-size: 1rem; }
.welcome__photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
  margin-top: var(--s5);
  padding-bottom: var(--s5);
}
.welcome__photos figure {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-m);
  background: var(--wall-2);
  box-shadow: var(--shadow-1);
}
.welcome__photos img { width: 100%; height: 100%; object-fit: cover; }
.welcome__photos figure:nth-child(1) { transform: rotate(-2deg); }
.welcome__photos figure:nth-child(2) { transform: rotate(2deg) translateY(1rem); }
.welcome__photos figure:nth-child(3) { transform: rotate(1deg); }
.welcome__photos figure:nth-child(4) { transform: rotate(-2deg) translateY(1rem); }
@media (min-width: 640px) {
  .welcome__photos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.75rem, 1.6vw, 1.25rem);
    align-items: center;
    max-width: calc(74rem + 2 * var(--gutter));
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    padding-bottom: var(--s6);
  }
  .welcome__photos figure:nth-child(1) { transform: rotate(-3deg); }
  .welcome__photos figure:nth-child(2) { aspect-ratio: 1; transform: rotate(2deg) translateY(1.75rem); }
  .welcome__photos figure:nth-child(3) { transform: rotate(-1deg); }
  .welcome__photos figure:nth-child(4) { aspect-ratio: 1; transform: rotate(3deg) translateY(-1.125rem); }
}
@media (min-width: 960px) {
  .welcome { border-radius: 40px 40px 0 0; }
  .welcome__text { gap: 1.125rem; }
  .welcome__photos figure { border-radius: 22px; }
}

/* A short list with a check in front of each line (How it works). */
.firsttime { display: block; list-style: none; margin: 0; padding: 0; border-top: var(--hair); }
.firsttime li {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: var(--s3);
  padding: var(--s4) 0;
  border-bottom: var(--hair);
  font-size: 1.0625rem;
  line-height: 1.5;
}
.firsttime li svg { width: 1.5rem; height: 1.5rem; margin-top: 0.15rem; }
.firsttime li strong { font-weight: 600; }

/* Next steps: full-width rows with hairlines, a title, a line and an arrow. */
.next { padding-block: var(--s2) clamp(3.5rem, 7vw, 6rem); }
.steps { list-style: none; margin: 0; padding: 0; border-top: var(--hair); }
.steps li { border-bottom: var(--hair); }
.steps a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.125rem var(--s4);
  align-items: center;
  padding: 1.125rem 0;
  text-decoration: none;
}
.steps__verb { font-weight: 600; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); line-height: 1.2; letter-spacing: -0.015em; }
.steps__line { grid-column: 1; color: var(--ink-3); font-size: 0.875rem; line-height: 1.45; max-width: 46ch; }
.steps__arrow { grid-column: 2; grid-row: 1 / span 2; width: 1.375rem; height: 1.375rem; transition: transform 220ms var(--ease-out); }
.steps a:hover .steps__verb { color: var(--brand); }
.steps a:hover .steps__arrow { transform: translateX(4px); color: var(--brand); }
@media (min-width: 960px) {
  .steps a { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: var(--s5); padding: 1.625rem 0; }
  .steps__line { grid-column: 2; font-size: 1.0625rem; color: var(--ink-2); }
  .steps__arrow { grid-column: 3; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) { .steps__arrow { transition: none; } }

/* ---------- Season strip ---------- */

.season {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(9.5rem, 1fr);
  gap: var(--s3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  list-style: none;
  margin: 0;
  padding: 0 0 var(--s2);
  scrollbar-width: thin;
}
.season li { scroll-snap-align: start; }
.season a {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  height: 100%;
  min-height: 9rem;
  padding: var(--s4);
  border: var(--hair);
  border-radius: var(--r-m);
  background: var(--paper);
  text-decoration: none;
  color: var(--ink-3);
}
.season .datemark { font-size: 2rem; color: var(--ink-3); }
.season__title { font-weight: 600; font-size: 0.9375rem; line-height: 1.25; }
.season__state { margin-top: auto; font-size: 0.75rem; }
.season li.is-next a { background: var(--event); color: var(--event-ink); border-color: transparent; }
.season li.is-next .datemark { color: var(--event-ink); }
.season li.is-future a { color: var(--ink); }
.season li.is-future .datemark { color: var(--ink); }
.season a:hover { border-color: var(--ink); }

/* ---------- Events page: later this season ---------- */
.later { padding-block: 0 clamp(3rem, 6vw, 4.5rem); }
.later__list { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s3); }
.later__card {
  display: grid;
  gap: 0.25rem;
  padding: var(--s4) var(--s5);
  border: var(--hair);
  border-radius: var(--r-m);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 160ms var(--ease-out);
}
a.later__card:hover { border-color: var(--ink); }
.later__when { font-size: 0.75rem; color: var(--ink-3); }
.later__title { font-weight: 600; font-size: 1.125rem; line-height: 1.3; }
.later__venue { font-size: 0.875rem; color: var(--ink-2); }
.later__state { margin-top: var(--s1); font-weight: 600; font-size: 0.875rem; color: var(--brand); }
div.later__card .later__state { color: var(--ink-3); }
@media (min-width: 720px) { .later__list { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); } }

/* ---------- The wall: every poster this season ----------
   A white band with soft top corners. Posters lean a little; under each, a
   hairline, the date and the name, and a round button. Tapping one opens its
   recap right under its row. */
.wallband {
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3.5rem, 7vw, 6rem);
  background: var(--paper);
  border-radius: 28px 28px 0 0;
}
.band-head--big h2 { font-size: clamp(1.875rem, 1.2rem + 2.6vw, 2.875rem); line-height: 1.06; letter-spacing: -0.02em; }
@media (min-width: 960px) { .wallband { border-radius: 40px 40px 0 0; } }

.wall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 0.875rem;
  list-style: none;
  margin: var(--s5) 0 0;
  padding: 0;
}
@media (min-width: 720px) { .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 1.5rem; } }
@media (min-width: 1200px) { .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.75rem 2rem; margin-top: 2.75rem; } }

.wall__item { min-width: 0; }
.wall__btn {
  display: grid;
  gap: 0.625rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wall__btn .poster { box-shadow: var(--shadow-1); transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out); }
.wall__item:nth-child(5n+1) .poster { rotate: -1.5deg; }
.wall__item:nth-child(5n+2) .poster { rotate: 1deg; }
.wall__item:nth-child(5n+3) .poster { rotate: -0.5deg; }
.wall__item:nth-child(5n+4) .poster { rotate: 1.5deg; }
.wall__item:nth-child(5n) .poster { rotate: -1deg; }
.wall__btn:hover .poster { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.wall__meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s2);
  align-items: center;
  padding-top: 0.625rem;
  border-top: var(--hair);
}
.wall__what { display: grid; min-width: 0; }
.wall__date { font-size: 0.75rem; color: var(--ink-3); }
.wall__title { font-weight: 600; font-size: 0.9375rem; line-height: 1.25; overflow-wrap: anywhere; }
.wall__toggle {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.wall__toggle svg { width: 1.125rem; height: 1.125rem; transition: transform 300ms var(--ease-out); }
.wall__btn:hover .wall__toggle { background: var(--wall-2); }
.wall__btn[aria-expanded="true"] .wall__toggle { background: var(--ink); color: var(--paper); }
.wall__btn[aria-expanded="true"] .wall__toggle svg { transform: rotate(45deg); }
.wall__btn[aria-expanded="true"] .wall__meta { border-top: 2px solid var(--brand); padding-top: calc(0.625rem - 1px); }
@media (min-width: 960px) {
  .wall__btn { gap: 0.875rem; }
  .wall__date { font-size: 0.8125rem; }
  .wall__title { font-size: 1.0625rem; }
}

/* Paste-up motion: posters settle onto the wall once, as they arrive. */
.js .wall__item.will-paste .poster { clip-path: inset(0 0 100% 0 round var(--r-m)); transform: translateY(10px); }
.js .wall__item.is-pasted .poster {
  clip-path: inset(0 0 0 0 round var(--r-m));
  transform: none;
  transition: clip-path 720ms var(--ease-out), transform 720ms var(--ease-out), box-shadow 320ms var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .js .wall__item.will-paste .poster { clip-path: none; transform: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Recap panel, inserted after the row of the opened poster */
.recap {
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms var(--ease-out);
}
.recap.is-open { grid-template-rows: 1fr; }
.recap__inner { overflow: hidden; min-height: 0; }
.recap__body {
  display: grid;
  gap: var(--s4);
  padding: 1.375rem var(--s4) 1.25rem;
  border-radius: 22px;
  background: var(--wall);
}
.recap__head { display: grid; gap: 0.25rem; }
.recap__head h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.12; }
.recap__facts { margin: 0; color: var(--ink-2); font-size: 0.875rem; }
.recap__summary { margin: 0.375rem 0 0; max-width: 46rem; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }
.recap__photos {
  display: flex;
  gap: 0.625rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  padding: 0 0 var(--s1);
  list-style: none;
  margin: 0;
  scrollbar-width: none;
}
.recap__photos::-webkit-scrollbar { display: none; }
.recap__photos li { flex: none; scroll-snap-align: start; }
.recap__photos a { display: block; border-radius: 16px; overflow: hidden; }
/* One height for every photo in the strip, so mixed shapes line up. */
.recap__photos img { height: clamp(12.5rem, 20vw, 16.25rem); width: auto; max-width: 80vw; object-fit: cover; background: var(--wall-2); transition: transform 450ms var(--ease-out); }
.recap__photos a:hover img { transform: scale(1.03); }
.recap__links { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); align-items: center; }
.pill-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0 0.875rem;
  border: 1.5px solid var(--ink);
  border-radius: var(--pill);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 160ms var(--ease-out);
}
.pill-link svg { width: 1rem; height: 1rem; }
.pill-link:hover { background: var(--paper); }
.recap__empty { margin: 0; color: var(--ink-2); font-size: 0.9375rem; }
@media (min-width: 960px) {
  .recap__body { gap: var(--s5); padding: var(--s6); border-radius: var(--r-l); }
  .recap__photos { gap: 0.75rem; }
  .recap__photos a { border-radius: var(--r-m); }
}

.year-group { margin-top: clamp(3.5rem, 7vw, 5rem); border-top: var(--hair); }
.year-group > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s4);
  padding: 1.125rem 0 0;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.year-group > summary::-webkit-details-marker { display: none; }
.year-group__year { font-weight: 600; font-size: clamp(1.875rem, 1.3rem + 2vw, 2.5rem); line-height: 1; letter-spacing: -0.02em; }
.year-group__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  transition: background-color 200ms var(--ease-out);
}
.year-group__icon svg { width: 1.125rem; height: 1.125rem; transition: transform 300ms var(--ease-out); }
.year-group > summary:hover .year-group__icon { background: var(--wall-2); }
.year-group[open] > summary .year-group__icon svg { transform: rotate(180deg); }
.year-group__wall { padding-bottom: var(--s4); }
@media (min-width: 960px) { .year-group__icon { width: 3rem; height: 3rem; } .year-group > summary { padding-top: var(--s5); } }

/* ---------- Season highlights (home) ----------
   Story circles, one per event this year, with the date and the name under
   each. A ring in the event's colour means photos you haven't seen; it turns
   gray once seen (remembered on this device). The next event has a maroon
   ring and the NEXT sticker. */
.moments { padding-block: var(--s5) clamp(3.5rem, 7vw, 6rem); background: var(--paper); }
.hl {
  list-style: none;
  margin: var(--s4) calc(-1 * var(--gutter)) 0;
  padding: var(--s1) var(--gutter) var(--s2);
  display: flex;
  gap: clamp(0.25rem, 1.6vw, 1.25rem);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.hl::-webkit-scrollbar { display: none; }
.hl__item { flex: none; scroll-snap-align: start; }
.hl__btn {
  --w: clamp(4.75rem, 3.6rem + 3vw, 6rem);
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.375rem;
  width: calc(var(--w) + 1.5rem);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hl__face {
  display: block;
  flex: none;
  align-self: start;
  /* An explicit height, not aspect-ratio: Safari stretched the circle into an oval. */
  width: var(--w);
  height: var(--w);
  padding: 3px;
  border-radius: 50%;
  background: conic-gradient(from 200deg, var(--ring), color-mix(in srgb, var(--ring) 40%, #FFFFFF), var(--ring));
  transition: transform 220ms var(--ease-out);
}
.hl__face > img,
.hl__face > .poster {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 3px solid var(--paper);
  border-radius: 50%;
  object-fit: cover;
  overflow: hidden;
}
.hl__face > .poster img { height: 100%; object-fit: cover; }
/* A type-only poster in a circle keeps only its title. */
.hl__face .poster__top,
.hl__face .poster__sub,
.hl__face .poster__foot,
.hl__face .poster__art { display: none; }
.hl__face > .poster--type { display: flex; flex-direction: column; justify-content: center; padding: 16%; }
.hl__face .poster--type .poster__title { flex: 1 1 auto; min-height: 0; align-items: center; justify-content: center; text-align: center; }
.hl__item.is-seen .hl__face,
.hl__item.is-past .hl__face { background: #C9C7C0; }
.hl__item.is-future .hl__face { padding: 2px; background: var(--ink); }
.hl__item.is-future .hl__face > * { border-width: 4px; }
.hl__item.is-next .hl__face { padding: 4px; background: var(--brand); }
.hl__stamp {
  position: absolute;
  top: calc(var(--w) - 0.875rem);
  left: 50%;
  translate: -50% 0;
  rotate: -6deg;
  transform: none;
  font-size: 0.6875rem;
  padding: 0.3em 0.55em 0.26em;
}
.hl__label { display: grid; gap: 0.125rem; }
.hl__item.is-next .hl__label { margin-top: 0.375rem; }
.hl__date { font-size: 0.75rem; line-height: 1.3; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.hl__title {
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hl__btn:hover .hl__face { transform: scale(1.04); }
.hl__btn:hover .hl__title { color: var(--brand); }
.hl__btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; border-radius: var(--r-s); }
@media (min-width: 960px) {
  .hl { margin-top: var(--s6); }
  .hl__btn { gap: 0.625rem; width: 7.25rem; }
  .hl__date { font-size: 0.8125rem; }
  .hl__title { font-size: 0.875rem; line-height: 1.25; }
  .hl__stamp { font-size: 0.75rem; }
}

/* ---------- Latest photos (home): tall tiles to swipe through ----------
   The newest event with photos: its name, date and an ink "8 pics" sticker,
   then a strip of 4:5 tiles (four fit across on wide screens; arrows on
   screens with a mouse). */
.reel { display: grid; gap: var(--s4); margin-top: clamp(2rem, 4vw, 3.5rem); }
.reel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3) var(--s5); flex-wrap: wrap; }
.reel__who { display: flex; align-items: baseline; gap: var(--s1) var(--s3); flex-wrap: wrap; min-width: 0; }
.reel__title { margin: 0; font-size: clamp(1.125rem, 1rem + 0.4vw, 1.25rem); font-weight: 600; letter-spacing: -0.01em; }
.reel__date { font-size: 0.875rem; color: var(--ink-3); }
.reel__count {
  align-self: center;
  display: inline-block;
  padding: 0.3em 0.6em 0.26em;
  border-radius: 7px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.1;
  rotate: -3deg;
}
.reel__nav { display: none; gap: var(--s2); }
@media (hover: hover) and (pointer: fine) { .reel__nav { display: flex; } }
.reel__arrow {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), opacity 160ms var(--ease-out);
}
.reel__arrow svg { width: 1.125rem; height: 1.125rem; }
.reel__arrow:first-child svg { transform: rotate(180deg); }
.reel__arrow:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.reel__arrow:disabled { opacity: 0.3; cursor: default; }
.reel__strip {
  --gap: 0.625rem;
  list-style: none;
  margin: 0 calc(-1 * var(--gutter));
  padding: 0 var(--gutter) var(--s1);
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.reel__strip::-webkit-scrollbar { display: none; }
.reel__strip li { flex: none; width: min(15rem, 64vw); scroll-snap-align: start; }
.reel__tile {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 0;
  border: 0;
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--wall-2);
  cursor: zoom-in;
}
.reel__tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 450ms var(--ease-out); }
.reel__tile:hover img { transform: scale(1.04); }
.reel__tile:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
@media (min-width: 720px) {
  .reel__strip li { width: calc((100% - 2 * var(--gutter) - 2 * var(--gap)) / 3); }
}
@media (min-width: 960px) {
  .reel__strip { --gap: 0.875rem; }
  .reel__strip li { width: calc((100% - 2 * var(--gutter) - 3 * var(--gap)) / 4); }
  .reel__tile { border-radius: 20px; }
}
@media (min-width: 1408px) {
  /* The strip stops at the page's edge, so four tiles fill the wrap exactly. */
  .reel__strip { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
  .reel__strip li { width: calc((100% - 3 * var(--gap)) / 4); }
}
.moments__more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin-top: var(--s5); }
.moments__more .btn { min-height: 2.75rem; padding: 0.5rem 1.25rem; font-size: 0.9375rem; }
@media (prefers-reduced-motion: reduce) { .hl__face, .reel__tile img, .reel__arrow { transition: none; } }

/* ---------- Read (home) and article cards (home and Articles) ---------- */
.read { padding-block: clamp(3.5rem, 7vw, 6rem); }
.chips-row {
  list-style: none;
  display: flex;
  gap: var(--s2);
  margin: var(--s4) calc(-1 * var(--gutter)) 0;
  padding: 0 var(--gutter) var(--s1);
  overflow-x: auto;
  scrollbar-width: none;
}
.chips-row::-webkit-scrollbar { display: none; }
.chips-row li { flex: none; }
.chip-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 2.25rem;
  padding: 0.3rem 0.875rem;
  border-radius: var(--pill);
  background: var(--t, var(--wall-2));
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: box-shadow 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.chip-link:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.chip-link.is-on { background: var(--ink); color: var(--paper); box-shadow: none; }
@media (min-width: 720px) {
  .chips-row { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; overflow: visible; }
  .chip-link { font-size: 0.875rem; }
}

/* Article topics as app-style tabs (Liezel, 10 Oct 2026): words only, the
   picked one in ink with a maroon dot under it that glides to the next pick.
   The same dot marks a card's or an article's topic, so the dot means "topic"
   everywhere. js/site.js folds the quieter topics behind "More". */
.topictabs {
  position: relative;
  list-style: none;
  display: flex;
  gap: 1.375rem;
  margin: var(--s3) calc(-1 * var(--gutter)) 0;
  padding: 0 var(--gutter) 0.625rem;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}
.topictabs::-webkit-scrollbar { display: none; }
.topictabs > li { flex: none; }
.topictab {
  all: unset;
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  padding-block: 0.625rem 0.5rem;
  color: var(--ink-3);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: color 200ms var(--ease-out);
}
.topictab:hover, .topictab.is-on { color: var(--ink); }
.topictab:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
/* The dot: drawn under the picked tab until the script takes over and glides one dot between tabs. */
.topictab.is-on::after { content: ""; position: absolute; left: 50%; bottom: -0.25rem; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--brand); }
.topictabs.is-gliding .topictab.is-on::after { display: none; }
.topictabs__dot { position: absolute; left: 0; bottom: 0.375rem; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); opacity: 0; pointer-events: none; transition: transform 450ms cubic-bezier(0.2, 0.9, 0.25, 1.25); }
.topictabs.is-gliding .topictabs__dot { opacity: 1; }
.topictabs.is-folded [data-topic-extra] { display: none; }
.topictab--more { color: var(--ink-2); }
.topictab--more::before { content: "+ "; color: var(--brand); }
@media (min-width: 720px) {
  .topictabs { gap: 1.75rem; margin-inline: 0; padding-inline: 0; }
  .topictab { font-size: 1.0625rem; }
}
@media (prefers-reduced-motion: reduce) { .topictabs__dot, .topictab { transition: none; } }

.topic { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.8125rem; font-weight: 600; line-height: 1.35; color: var(--brand); }
.topic::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.tag {
  display: inline-block;
  padding: 0.22rem 0.6rem;
  border-radius: var(--pill);
  background: var(--t, var(--wall-2));
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.cards { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s5); }
.card { display: grid; align-content: start; gap: 0.625rem; text-decoration: none; color: var(--ink); }
.card__photo {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 20px;
  background: var(--wall-2);
}
.card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 450ms var(--ease-out); }
.card__title { font-weight: 600; font-size: 1.1875rem; line-height: 1.25; letter-spacing: -0.01em; text-wrap: pretty; }
.card__meta { font-size: 0.8125rem; color: var(--ink-3); }
.card:hover .card__photo img { transform: scale(1.03); }
.card:hover .card__title { color: var(--brand); }
.card:focus-visible { outline-offset: 4px; border-radius: var(--r-s); }
/* Phones: on the home page, the newest leads and the next two sit as rows. */
@media (max-width: 639px) {
  .cards--home { gap: var(--s4); }
  .cards--home li:not(:first-child) .card { grid-template-columns: 6rem minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 0.875rem; row-gap: 0.375rem; align-items: start; }
  .cards--home li:not(:first-child) .card__photo { grid-row: 1 / span 3; aspect-ratio: 1; border-radius: 16px; }
  .cards--home li:not(:first-child) .topic { align-self: end; font-size: 0.75rem; }
  .cards--home li:not(:first-child) .card__title { font-size: 1rem; line-height: 1.3; }
  .cards--home li:not(:first-child) .card__meta { display: none; }
  .cards--home li:first-child { margin-bottom: var(--s1); }
}
@media (min-width: 640px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s5); }
  .card__photo { aspect-ratio: 4 / 3; border-radius: 22px; }
}
@media (min-width: 960px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6) 1.75rem; margin-top: 1.75rem; }
  .card { gap: 0.75rem; }
  .card__title { font-size: 1.3125rem; }
  .card__meta { font-size: 0.875rem; }
}
@media (min-width: 640px) and (max-width: 959px) {
  /* Two across: the third card waits for the Articles page. */
  .cards--home li:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .card__photo img { transition: none; } }


/* ---------- Page heads ----------
   The page's title in sentence case with a short line under it. */

.pagehead { padding-block: clamp(1.75rem, 5vw, 3.5rem) clamp(2rem, 5vw, 3.5rem); }
.pagehead .wrap { display: grid; gap: var(--s3); }
.pagehead h1 { font-size: clamp(2.125rem, 1.3rem + 2.8vw, 3.25rem); line-height: 1.04; letter-spacing: -0.02em; }
.pagehead .lede { margin: 0; max-width: 40rem; }
@media (min-width: 960px) { .pagehead .wrap { gap: var(--s4); } .pagehead .lede { font-size: 1.125rem; } }

/* ---------- Articles ----------
   The list: topic chips (they stick under the header on phones), the newest
   as a white feature card, the rest as rows on phones and cards on wider
   screens, and an invitation to write. An article page is set for reading:
   a 42rem column, generous leading, quotes tinted with the article's topic. */
.topicbar { position: sticky; top: 64px; z-index: 5; background: rgba(247, 246, 242, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.topicbar__inner { border-bottom: var(--hair); }
.topicbar .topictabs { margin-top: 0; }
@media (min-width: 720px) {
  .topicbar { position: static; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.alist { padding-block: var(--s2) clamp(3.5rem, 8vw, 6.5rem); }
@media (min-width: 720px) { .alist { padding-top: var(--s6); } }
.feature {
  display: grid;
  gap: 0.625rem;
  padding: 0.625rem 0.625rem 1.125rem;
  border-radius: var(--r-l);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-1);
}
.feature__photo { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-m); background: var(--wall-2); }
.feature__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
.feature__text { display: grid; gap: 0.5rem; justify-items: start; padding-inline: 0.375rem; }
.feature__title { font-weight: 600; font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; }
.feature__dek { font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2); }
.feature__meta { font-size: 0.8125rem; color: var(--ink-3); }
.feature:hover .feature__photo img { transform: scale(1.03); }
.feature:hover .feature__title { color: var(--brand); }
@media (min-width: 960px) {
  .feature { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; padding: 1rem; border-radius: 28px; }
  .feature__photo { border-radius: 20px; }
  .feature__text { gap: 0.875rem; padding-right: 1.5rem; }
  .feature__title { font-size: clamp(1.875rem, 1.2rem + 1.3vw, 2.25rem); line-height: 1.1; }
  .feature__dek { font-size: 1.0625rem; }
  .feature__meta { font-size: 0.875rem; }
}
.card__dek { font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2); }
/* Phones: the list as rows, a square photo beside the tags, title and time. */
@media (max-width: 639px) {
  .cards--list { gap: 0; margin-top: var(--s4); }
  .cards--list li { border-bottom: var(--hair); }
  .cards--list .card { grid-template-columns: 6.5rem minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 0.875rem; row-gap: 0.375rem; align-items: start; padding-block: 1rem; }
  .cards--list .card__photo { grid-row: 1 / span 4; aspect-ratio: 1; border-radius: var(--r-m); }
  .cards--list .topic { align-self: end; font-size: 0.75rem; }
  .cards--list .card__title { font-size: 1.0625rem; line-height: 1.3; }
  .cards--list .card__dek { display: none; }
  .cards--list .card__meta { font-size: 0.75rem; }
}
@media (min-width: 640px) { .cards--list { margin-top: var(--s6); } }
.alist__empty { margin: var(--s5) 0 0; color: var(--ink-2); }
.writecard {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
  margin-top: var(--s6);
  padding: 1.5rem;
  border: 1.5px dashed var(--ink);
  border-radius: 22px;
  color: var(--ink);
  text-decoration: none;
  rotate: -1deg;
  transition: rotate 240ms var(--ease-out), background-color 200ms var(--ease-out);
}
.writecard__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--brand); color: var(--brand-ink); }
.writecard__icon svg { width: 1.25rem; height: 1.25rem; }
.writecard__words { display: grid; gap: 0.25rem; }
.writecard__title { font-weight: 600; font-size: 1.3125rem; line-height: 1.2; }
.writecard__text { font-size: 0.9375rem; color: var(--ink-2); }
.writecard__go { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 600; font-size: 0.9375rem; color: var(--brand); }
.writecard__go .arrow { width: 1em; height: 1em; transition: transform 160ms var(--ease-out); }
.writecard:hover { rotate: 0deg; background: var(--paper); }
.writecard:hover .writecard__go .arrow { transform: translateX(3px); }
@media (min-width: 640px) {
  .writecard { max-width: 34rem; }
  .writecard--row { max-width: none; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.125rem; padding: 1.375rem 1.625rem; rotate: 0deg; }
  .writecard--row .writecard__icon { width: 3.25rem; height: 3.25rem; }
}
@media (prefers-reduced-motion: reduce) { .feature__photo img, .writecard, .writecard__go .arrow { transition: none; } }

/* One article: a clear reading order, after Ligonier and Desiring God. The
   date and reading time, the topics, the title, the photo (edge to edge on
   phones), who wrote it, then the text in a book-style serif from the phone
   itself, so the article never blends with its title. Share comes at the end. */
.article { --read: "Iowan Old Style", "Palatino Linotype", Palatino, Charter, "Book Antiqua", Georgia, serif; }
.article__back { padding-top: var(--s2); }
.article__head { display: grid; justify-items: center; gap: 0.875rem; max-width: calc(54rem + 2 * var(--gutter)); padding-top: var(--s5); text-align: center; }
.article__meta { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.article__topic { margin: 0.125rem 0 0; }
.article__topic .topic { font-size: 0.875rem; text-decoration: none; }
.article__topic .topic:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
.article__title { max-width: 22ch; font-size: clamp(2.125rem, 1.25rem + 3.4vw, 3.75rem); line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; }
.article__cover { margin: var(--s6) auto 0; max-width: calc(65rem + 2 * var(--gutter)); }
.article__cover img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--wall-2); }
.article__author { max-width: calc(42.5rem + 2 * var(--gutter)); padding-top: 1.375rem; }
.article__author-in { display: flex; align-items: center; gap: 0.75rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line-2); }
.article__author p { margin: 0; display: grid; line-height: 1.35; }
.article__avatar { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--wall); }
.article__avatar--initial { display: grid; place-items: center; border: 1.5px solid var(--ink); font-weight: 700; }
.article__by { font-weight: 600; font-size: 0.9375rem; color: var(--ink); }
.article__by-sub { font-size: 0.8125rem; color: var(--ink-3); }
.article__body { max-width: calc(42.5rem + 2 * var(--gutter)); padding-block: 1.625rem 0; }
.article__end { max-width: calc(42.5rem + 2 * var(--gutter)); padding-top: var(--s7); }
.article__end-in { display: grid; gap: var(--s4); padding-top: 1.25rem; border-top: 1px solid var(--line-2); }
.article__actions { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.article__actions .btn--ghost svg { width: 1.125rem; height: 1.125rem; }
@media (max-width: 479px) { .article__actions .btn:last-child { flex: 1 1 auto; } }
@media (min-width: 720px) {
  .article__cover { padding-inline: var(--gutter); }
  .article__cover img { aspect-ratio: 16 / 9; border-radius: var(--r-l); }
}
@media (min-width: 960px) {
  .article__head { gap: 1.125rem; padding-top: var(--s6); }
  .article__meta { font-size: 0.8125rem; }
  .article__cover { margin-top: 3.25rem; }
  .article__author { padding-top: 2.25rem; }
  .article__author-in { gap: 0.875rem; padding-bottom: 1.625rem; }
  .article__avatar { width: 3.25rem; height: 3.25rem; }
  .article__by { font-size: 1rem; }
  .article__by-sub { font-size: 0.875rem; }
  .article__body { padding-top: 2.25rem; }
}
.prose { font-family: var(--read, var(--font)); font-size: 1.1875rem; line-height: 1.75; color: #232320; }
.prose > * + * { margin-top: 1.15em; }
.prose p,
.prose li { font-size: inherit; line-height: inherit; max-width: none; }
@media (min-width: 960px) { .prose { font-size: 1.3125rem; } }
.prose li + li { margin-top: 0.4em; }
.prose ul,
.prose ol { padding-left: 1.3em; }
.prose li::marker { color: var(--ink-3); }
.prose strong { font-weight: 700; }
.prose h2 { margin-top: 1.8em; font-family: var(--font); font-size: clamp(1.4375rem, 1.2rem + 0.9vw, 1.875rem); font-weight: 600; line-height: 1.22; letter-spacing: -0.015em; color: var(--ink); }
.prose h2 + * { margin-top: 0.65em; }
.prose blockquote { margin: 1.5em 0; padding: 0.125rem 0 0.125rem 1.125rem; border-left: 3px solid var(--ink); }
.prose blockquote p { font-style: italic; font-size: 1.1em; line-height: 1.5; color: var(--ink); }
.prose cite { display: block; margin-top: 0.75em; font-family: var(--font); font-style: normal; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.prose a { color: var(--brand); text-decoration-thickness: 1.5px; text-underline-offset: 0.18em; text-decoration-color: rgba(93, 7, 7, 0.35); }
.prose a:hover { text-decoration-color: var(--brand); }
@media (min-width: 960px) { .prose blockquote { padding-left: 1.5rem; } }
.article__more { margin-top: clamp(3.5rem, 8vw, 5.5rem); padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3.5rem, 7vw, 5.5rem); background: var(--wall); border-radius: 28px 28px 0 0; }
@media (min-width: 960px) { .article__more { border-radius: 40px 40px 0 0; } }
/* Article pages read on white, as printed pages do; Keep reading sits on the page colour. */
body:has(.article) { background-color: var(--paper); }
body:has(.article) .site-header { background: rgba(255, 255, 255, 0.9); }

/* ---------- Write for B1G ----------
   The title with a little document beside it, three numbered steps (step 2
   shows Google Docs' share buttons in miniature), then the form on a white
   card. Once it's sent, only the thank-you stays. */
.writehead { padding-block: var(--s2) var(--s6); }
.writehead__inner { display: grid; gap: 0.625rem; }
.writehead__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.writehead h1 { font-size: clamp(2.125rem, 1.2rem + 3.2vw, 3.5rem); line-height: 1.03; letter-spacing: -0.02em; }
.writehead .lede { margin: 0; max-width: 40rem; }
.docicon { display: grid; align-content: start; gap: 0.4rem; flex: none; width: 3.875rem; height: 5rem; padding: 0.75rem 0.625rem; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--paper); rotate: 6deg; box-shadow: var(--shadow-1); }
.docicon i { display: block; height: 4px; border-radius: 3px; background: var(--line); }
.docicon i:first-child { width: 70%; height: 5px; background: var(--brand); }
.docicon i:nth-child(4) { width: 80%; }
.writeband { padding-block: 0 clamp(3.5rem, 8vw, 6.5rem); }
.writeband__grid { display: grid; gap: var(--s6); }
.writeband__how h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); letter-spacing: -0.015em; }
.numsteps { list-style: none; margin: var(--s3) 0 0; padding: 0; border-top: var(--hair); }
.numsteps li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0.75rem; padding: 1rem 0; border-bottom: var(--hair); line-height: 1.55; }
.numsteps__n { font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.numsteps__body { display: grid; gap: 0.75rem; }
/* Members only (Write for B1G, Article guidelines): one white card with the
   next step, in place of the page's steps and form (Liezel, 10 Oct 2026). */
.gate { padding-block: 0 clamp(3.5rem, 8vw, 6.5rem); }
.gate__card { max-width: 40rem; padding: clamp(1.5rem, 4vw, 2.25rem); border-radius: var(--r-l); background: var(--paper); box-shadow: var(--shadow-1); }
.gate__title { margin: 0; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); line-height: 1.15; letter-spacing: -0.015em; }
.gate__text { margin: 0.625rem 0 0; color: var(--ink-2); }
.gate .form-actions { margin: 1.25rem 0 0; }
.form__as { margin: 0 0 var(--s4); padding: 0.75rem 1rem; border-radius: var(--r-s); background: var(--wall); font-size: 0.9375rem; color: var(--ink-2); }
.form__as a { color: var(--ink); font-weight: 600; }
.guide__more { grid-column: 1 / -1; margin: 0; }

/* Article guidelines: one reading column, a hairline between sections. */
.rules { padding-block: 0 clamp(3.5rem, 8vw, 6.5rem); }
.rules__inner { max-width: 42rem; }
.rules__sec { padding-block: 1.5rem; border-top: var(--hair); }
.rules__sec h2 { margin: 0 0 0.75rem; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); letter-spacing: -0.01em; }
.rules__sec .guide__list li { font-size: 1rem; }
.rules__sec > p { margin: 0 0 0.75rem; color: var(--ink-2); }
.rules__topics { margin: 1rem 0 0; font-size: 0.9375rem; color: var(--ink-3); }
.rules__topics a { color: var(--ink); font-weight: 600; }
.rules .writenote { margin: 0; }
.rules__cta { margin: var(--s4) 0 0; }

/* Write for B1G: the article guidelines open from the tick box (Liezel, 10 Oct 2026). */
.linkbtn { cursor: pointer; color: var(--brand); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.18em; }
.linkbtn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; }
.guide { display: grid; gap: var(--s4); margin: calc(-1 * var(--s2)) 0 var(--s4); padding: 1rem 1.125rem; border-radius: var(--r-s); background: var(--wall); }
.guide[hidden] { display: none; }
.guide__title { margin: 0 0 0.375rem; font-size: 0.875rem; font-weight: 600; }
.guide__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.375rem; }
.guide__list li { position: relative; padding-left: 0.875rem; font-size: 0.875rem; line-height: 1.45; color: var(--ink-2); }
.guide__list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }
.guide__list--out li::before { background: var(--ink-3); }
@media (min-width: 560px) { .guide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The AI note: its own white card under the steps, with an 80/20 bar that
   shows the rule at a glance (Liezel, 10 Oct 2026). */
.writenote { margin: var(--s5) 0 0; padding: 1.125rem 1.125rem 1rem; border-radius: var(--r-m); background: var(--paper); }
.writenote__title { margin: 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.005em; }
.writenote__text { margin: 0.375rem 0 0; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }
.writenote__bar { display: flex; gap: 3px; height: 10px; margin-top: 0.875rem; border-radius: var(--pill); overflow: hidden; }
.writenote__bar span:first-child { flex: 8; background: var(--brand); }
.writenote__bar span:last-child { flex: 2; background: var(--line); }
/* Full width like the bar (paragraphs are otherwise capped at a reading width), so each label sits under its own part. */
.writenote__legend { display: flex; justify-content: space-between; gap: var(--s3); max-width: none; margin: 0.375rem 0 0; font-size: 0.75rem; font-weight: 600; color: var(--ink-3); }
.writenote__legend span:first-child { color: var(--brand); }
.gdocs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; padding: 0.75rem; border-radius: 16px; background: var(--paper); font-size: 0.8125rem; font-weight: 600; line-height: 1.2; }
.gdocs__chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.375rem 0.75rem; border-radius: var(--pill); background: var(--wall-2); }
.gdocs__chip--ink { background: var(--ink); color: var(--paper); }
.gdocs__chip--line { padding: 0.3rem 0.7rem; border: 1.5px solid var(--ink); background: var(--paper); }
.gdocs__chip svg { width: 0.875rem; height: 0.875rem; }
.form--card.form--white { background: var(--paper); }
.form__title { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem); line-height: 1.2; letter-spacing: -0.01em; }
/* A checkbox in its own soft box (consent lines). */
.check--box { grid-template-columns: 1.625rem minmax(0, 1fr); gap: 0.75rem; padding: 0.875rem; border-radius: 14px; background: var(--wall); cursor: pointer; }
.check--box input { appearance: none; -webkit-appearance: none; width: 1.625rem; height: 1.625rem; margin: 0; border: 1.5px solid var(--ink); border-radius: 8px; background: var(--paper); display: grid; place-items: center; cursor: pointer; transition: background-color 150ms var(--ease-out); }
.check--box input::after { content: ""; width: 0.95rem; height: 0.95rem; background: var(--paper); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; opacity: 0; }
.check--box input:checked { background: var(--ink); }
.check--box input:checked::after { opacity: 1; }
.check--box input:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.field.has-error .check--box input { border-color: var(--error); }
/* The thank-you that replaces a sent form. */
.thanks { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.875rem; align-items: start; padding: 1.125rem 1rem; border: 1.5px solid var(--ok); border-radius: 20px; background: var(--paper); animation: stepIn 360ms var(--ease-out); }
.thanks:focus { outline: none; }
.thanks__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--ok); color: #FFFFFF; }
.thanks__icon svg { width: 1.25rem; height: 1.25rem; }
.thanks__words { display: grid; gap: 0.125rem; }
.thanks__words strong { font-weight: 600; font-size: 1.125rem; line-height: 1.3; }
.thanks__words span { font-size: 0.9375rem; line-height: 1.45; color: var(--ink-2); }
@media (min-width: 960px) {
  .writehead { padding-bottom: var(--s7); }
  .writehead__row { justify-content: flex-start; gap: var(--s5); }
  .docicon { width: 4.5rem; height: 5.75rem; }
  .writeband__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; }
  .writeband__how { position: sticky; top: calc(72px + var(--s5)); }
  .numsteps li { padding: 1.125rem 0; font-size: 1.0625rem; }
  .thanks { padding: 1.5rem 1.375rem; }
}

/* ---------- Feedback ----------
   The event's title, one line saying what this is for, then the questions:
   the 1 to 5 scale as five big pills. */
.fbhead { padding-block: clamp(1.75rem, 4vw, 3rem) var(--s5); }
.fbhead__inner { display: grid; gap: 0.625rem; max-width: calc(40rem + 2 * var(--gutter)); }
.fbhead h1 { font-size: clamp(1.875rem, 1.3rem + 2.2vw, 2.75rem); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.fbhead .lede { margin: 0; font-size: 0.9375rem; }
.fbbody { padding-block: 0 clamp(3.5rem, 8vw, 6rem); }
.fbbody .wrap { max-width: calc(40rem + 2 * var(--gutter)); }
.form--fb { gap: 1.5rem; }
.form--fbq { gap: 1.75rem; }
.scale .chip span { min-height: 3.5rem; border-radius: var(--pill); }
@media (min-width: 640px) { .fbhead .lede { font-size: 1.0625rem; } }

/* ---------- About ----------
   Who we are beside two leaning photos and a sticker; mission and vision as
   two soft cards on a white band; the SINGLES letters as tiles; what we
   believe, with Come and see. */
.intro { padding-block: clamp(1.75rem, 4vw, 2.5rem) clamp(4rem, 8vw, 6.5rem); }
.intro__grid { display: grid; gap: var(--s5); }
.intro__text { display: grid; gap: var(--s3); align-content: start; }
.intro__text h1 { font-size: clamp(2.125rem, 1.2rem + 3.2vw, 3.5rem); line-height: 1.03; letter-spacing: -0.02em; }
.intro__text .lede { margin: 0; max-width: 34ch; }
.intro__photos { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s3); align-items: start; margin-top: var(--s3); }
.intro__photos figure { margin: 0; overflow: hidden; border-radius: var(--r-m); background: var(--wall-2); box-shadow: var(--shadow-1); }
.intro__photos img { width: 100%; height: 100%; object-fit: cover; }
.intro__a { aspect-ratio: 4 / 5; rotate: -2deg; }
.intro__b { aspect-ratio: 1; rotate: 2deg; translate: 0 1.75rem; }
.intro__sticker {
  position: absolute;
  right: 0.375rem;
  bottom: -1.375rem;
  padding: 0.3rem 0.65rem 0.28rem;
  border-radius: 7px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  rotate: -4deg;
}
@media (min-width: 960px) {
  .intro { padding-top: var(--s6); }
  .intro__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); align-items: center; }
  .intro__text { gap: 1.25rem; }
  .intro__text .lede { font-size: 1.25rem; line-height: 1.5; }
  .intro__photos { display: block; height: 28.75rem; margin: 0; }
  .intro__photos figure { position: absolute; border-radius: 22px; }
  .intro__a { left: 0; bottom: 0; width: 56%; rotate: -3deg; }
  .intro__b { right: 0; top: 0; width: 48%; rotate: 3deg; translate: none; }
  .intro__sticker { right: 1.5rem; bottom: 3.5rem; z-index: 1; padding: 0.4rem 0.75rem 0.36rem; font-size: 0.8125rem; border-radius: 8px; }
}

.mv { padding-block: clamp(3rem, 7vw, 6rem) var(--s4); background: var(--paper); border-radius: 28px 28px 0 0; }
.mv__grid { display: grid; gap: var(--s3); }
.mv__card { display: grid; gap: var(--s3); align-content: start; padding: 1.375rem 1.25rem 1.5rem; border-radius: 22px; background: var(--wall); }
.mv__label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; line-height: 1.3; text-transform: uppercase; color: var(--ink-3); }
.mv__text { margin: 0; max-width: none; font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem); line-height: 1.32; font-weight: 500; letter-spacing: -0.01em; text-wrap: pretty; }
@media (min-width: 960px) {
  .mv { border-radius: 40px 40px 0 0; padding-bottom: var(--s6); }
  .mv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; }
  .mv__card { gap: 1.25rem; padding: 2.5rem 2.75rem 2.75rem; border-radius: 28px; }
  .mv__label { font-size: 0.8125rem; }
}

.values-band { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3.5rem, 8vw, 6.5rem); background: var(--paper); }
.values-band h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.875rem); line-height: 1.06; letter-spacing: -0.02em; }
.values { list-style: none; margin: var(--s5) 0 0; padding: 0; border-top: var(--hair); }
.values li {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  align-items: center;
  gap: var(--s4);
  padding-block: 0.625rem;
  border-bottom: var(--hair);
}
.values__letter {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: var(--hair);
  border-radius: 14px;
  background: var(--wall);
  color: var(--brand);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1;
}
.values li:nth-child(odd) .values__letter { rotate: -2deg; }
.values li:nth-child(even) .values__letter { rotate: 2deg; }
.values__word { font-weight: 600; font-size: 1.125rem; line-height: 1.3; }
.readrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s4);
  margin-top: var(--s5);
  padding: 1.125rem;
  border-radius: 20px;
  background: var(--wall);
  color: var(--ink);
  text-decoration: none;
  transition: background-color 180ms var(--ease-out);
}
.readrow__text { display: grid; gap: 0.25rem; }
.readrow__title { font-weight: 600; font-size: 1.0625rem; line-height: 1.3; }
.readrow__meta { font-size: 0.8125rem; color: var(--ink-3); }
.readrow .steps__arrow { width: 1.375rem; height: 1.375rem; grid-column: auto; grid-row: auto; }
.readrow:hover { background: var(--wall-2); }
.readrow:hover .steps__arrow { transform: translateX(4px); color: var(--brand); }
@media (min-width: 960px) {
  .values { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s7); border-top: 0; }
  .values li { display: flex; flex-direction: column; align-items: stretch; gap: var(--s4); padding: 0; border-bottom: 0; }
  .values__letter { width: auto; height: auto; aspect-ratio: 1; border-radius: 20px; font-size: clamp(3.5rem, 5vw, 4.75rem); }
  .values__word { font-size: 1.0625rem; }
  .readrow { margin-top: 3.5rem; padding: var(--s5) 0; border-radius: 0; border-top: var(--hair); border-bottom: var(--hair); background: none; }
  .readrow:hover { background: none; }
  .readrow:hover .readrow__title { color: var(--brand); }
  .readrow__title { font-size: 1.5rem; line-height: 1.25; }
  .readrow__meta { font-size: 0.875rem; }
}

.believe { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.believe__grid { display: grid; gap: var(--s4); }
.believe h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.875rem); line-height: 1.06; letter-spacing: -0.02em; }
.believe__body { display: grid; gap: var(--s5); justify-items: start; }
.believe__body .lede { margin: 0; }
@media (max-width: 639px) { .believe__body .btn { width: 100%; } }
@media (min-width: 960px) {
  .believe__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); align-items: start; }
  .believe__body { gap: 1.75rem; }
  .believe__body .lede { font-size: 1.25rem; line-height: 1.5; }
}

.statement { font-weight: 500; font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem); line-height: 1.32; letter-spacing: -0.01em; max-width: 34ch; text-wrap: pretty; }
.two-col { display: grid; gap: var(--s6); }
@media (min-width: 960px) { .two-col { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 4.5vw, 5rem); } }

/* ---------- Small Groups ----------
   The title and a short line beside two leaning photos (one on phones, with
   the DGroups tag), then a white band: How it works on the left, the form in
   a soft card on the right. */
.intro__cta { justify-self: start; margin-top: var(--s2); }
@media (max-width: 639px) { .intro__cta { justify-self: stretch; } }
.dgphotos { position: relative; order: -1; margin: 0.375rem 0.25rem 0.625rem; }
.dgphotos figure { margin: 0; overflow: hidden; background: var(--wall-2); }
.dgphotos img { width: 100%; height: 100%; object-fit: cover; }
.dgphotos__a { aspect-ratio: 4 / 3; border-radius: 22px; rotate: -1.5deg; box-shadow: var(--shadow-1); }
.dgphotos__b { display: none; }
.dgphotos__tag { position: absolute; left: 0.75rem; bottom: -0.875rem; padding: 0.3rem 0.75rem; font-size: 0.8125rem; rotate: -5deg; box-shadow: 0 0 0 3px var(--wall); }
@media (min-width: 960px) {
  .intro__grid--dg { gap: 4.5rem; }
  .dgphotos { order: 0; height: 29.375rem; margin: 0; }
  .dgphotos figure { position: absolute; }
  .dgphotos__a { left: 0; top: 0; width: 64%; height: 24.375rem; aspect-ratio: auto; rotate: -3deg; }
  .dgphotos__b { display: block; right: 0; bottom: 0; width: 52%; height: 18.125rem; border: 8px solid var(--wall); border-radius: 26px; rotate: 3deg; box-shadow: var(--shadow-2); }
  .dgphotos__tag { left: 1.25rem; top: 1.25rem; bottom: auto; padding: 0.375rem 0.875rem; font-size: 0.875rem; z-index: 1; rotate: -4deg; }
}

.dgband { padding-block: clamp(3rem, 7vw, 6rem) clamp(3.5rem, 8vw, 7rem); background: var(--paper); border-radius: 28px 28px 0 0; }
.dgband__grid { display: grid; gap: var(--s7); }
.dgband__how { display: grid; gap: 1.125rem; align-content: start; }
.dgband__how h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); line-height: 1.06; letter-spacing: -0.02em; }
.dgband__how .firsttime li { grid-template-columns: 1.375rem minmax(0, 1fr); gap: 0.75rem; padding: 0.875rem 0; font-size: 1rem; }
.dgband__how .firsttime li svg { width: 1.375rem; height: 1.375rem; margin-top: 0.1rem; color: var(--ok); }
.dgband__form { display: grid; gap: var(--s4); align-content: start; scroll-margin-top: calc(72px + var(--s4)); }
@media (min-width: 960px) {
  .dgband { border-radius: 40px 40px 0 0; }
  .dgband__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 5rem; align-items: start; }
  .dgband__how { gap: var(--s5); }
  .dgband__how .firsttime li { gap: 0.875rem; padding: var(--s4) 0; font-size: 1.0625rem; }
}

/* A small card for one article: square photo, its tag, title and reading time. */
.readcard {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.875rem;
  align-items: center;
  padding: 0.625rem;
  border-radius: 20px;
  background: var(--wall);
  color: var(--ink);
  text-decoration: none;
  transition: background-color 180ms var(--ease-out);
}
.readcard__photo { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 16px; background: var(--wall-2); }
.readcard__photo img { width: 100%; height: 100%; object-fit: cover; }
.readcard__text { display: grid; gap: 0.375rem; justify-items: start; min-width: 0; }
.readcard__title { font-weight: 600; font-size: 1.0625rem; line-height: 1.25; }
.readcard__meta { font-size: 0.8125rem; color: var(--ink-3); }
.readcard:hover { background: var(--wall-2); }
.readcard:hover .readcard__title { color: var(--brand); }
@media (min-width: 960px) { .readcard { grid-template-columns: 7rem minmax(0, 1fr); gap: 1.125rem; padding: 0.75rem; border-radius: 22px; } .readcard__title { font-size: 1.1875rem; } }

/* ---------- Serve ----------
   A leaning photo with the Serving tag beside who can serve, then the
   clusters on a white band: on phones each opens to its teams; on wide screens
   the teams sit beside the cluster in two columns. Facilitator is a soft blue
   card. The form lives on its own page (serve-signup.html). */
.intro__h { margin-top: var(--s3); font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.2; letter-spacing: -0.01em; }
.intro__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); margin-top: var(--s2); }
@media (max-width: 639px) { .intro__actions { display: grid; justify-items: center; } .intro__actions .btn { width: 100%; } }
.servephoto { position: relative; margin: 0.875rem 0.25rem 0.375rem; }
.servephoto figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 22px; background: var(--wall-2); rotate: -1.5deg; box-shadow: var(--shadow-1); }
.servephoto img { width: 100%; height: 100%; object-fit: cover; }
.servephoto__tag { position: absolute; right: 0.875rem; top: -0.75rem; padding: 0.3rem 0.75rem; font-size: 0.8125rem; rotate: 5deg; box-shadow: 0 0 0 3px var(--wall); }
@media (min-width: 960px) {
  .intro__grid--serve { gap: 4.5rem; }
  .servephoto { margin: 0; }
  .servephoto figure { aspect-ratio: 5 / 6; border-radius: 28px; }
  .servephoto__tag { right: 2rem; top: -0.875rem; padding: 0.375rem 0.875rem; font-size: 0.875rem; box-shadow: 0 0 0 4px var(--wall); }
  .intro__grid--serve .intro__text { gap: var(--s4); }
}

.clusterband { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3.5rem, 8vw, 6.5rem); background: var(--paper); border-radius: 28px 28px 0 0; }
.clusterband h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); line-height: 1.06; letter-spacing: -0.02em; }
.clusters__nav { margin-top: var(--s4); }
.clusters__nav .chip-link { min-height: 2.75rem; padding-inline: 1rem; font-size: 0.875rem; }
.clusters { list-style: none; margin: var(--s4) 0 0; padding: 0; border-top: var(--hair); }
.cluster { display: grid; gap: 0.75rem; padding-block: 1.75rem; border-bottom: var(--hair); scroll-margin-top: calc(72px + var(--s4)); }
.cluster__head { display: grid; gap: 0.75rem; align-content: start; }
.cluster__head p { margin: 0; }
.cluster__name { font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem); line-height: 1.08; letter-spacing: -0.015em; }
.cluster__count { display: none; }
.cluster__ask { font-size: 1.0625rem; line-height: 1.45; }
.cluster__about { font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }
.cluster__more { margin-top: var(--s1); }
.cluster__more > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding: 0.625rem 0.875rem;
  border-radius: 16px;
  background: var(--wall);
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cluster__more > summary::-webkit-details-marker { display: none; }
.cluster__sum { display: grid; gap: 0.125rem; min-width: 0; }
.cluster__sum strong { font-weight: 600; font-size: 0.9375rem; }
.cluster__sum span { font-size: 0.8125rem; line-height: 1.4; color: var(--ink-3); }
.cluster__chev svg { display: block; width: 1.25rem; height: 1.25rem; transition: transform 240ms var(--ease-out); }
.cluster__more[open] .cluster__chev svg { transform: rotate(180deg); }
.cluster__more > summary:hover { background: var(--wall-2); }
.cluster__teams { margin: 0; display: grid; }
.cluster__teams > div { padding: 0.75rem 0; border-bottom: var(--hair); }
.cluster__teams > div:last-child { border-bottom: 0; }
.cluster__teams dt { font-weight: 600; font-size: 1rem; line-height: 1.3; }
.cluster__teams dd { margin: 0.125rem 0 0; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2); }
.cluster__more .cluster__teams { padding: 0.25rem 0.875rem 0; }
.cluster__teams--wide { display: none; }
.cluster--card { margin-top: 1.75rem; padding: 1.5rem 1.25rem; border: 0; border-radius: var(--r-l); background: var(--t-serving); }
.cluster--card .cluster__about { color: #2B2B28; font-size: 1rem; line-height: 1.6; }
@media (min-width: 960px) {
  .clusterband { border-radius: 40px 40px 0 0; }
  .clusters { margin-top: var(--s5); }
  .cluster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; padding-block: 2.75rem; }
  .cluster__name { font-size: 2.125rem; }
  .cluster__count {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.28rem 0.6rem 0.24rem;
    border-radius: 8px;
    background: var(--t-serving);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0;
    vertical-align: 0.45em;
    rotate: -4deg;
  }
  .cluster__ask { font-size: 1.125rem; }
  .cluster__about { font-size: 1rem; }
  .cluster__more { display: none; }
  .cluster__teams--wide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; align-content: start; }
  .cluster__teams--wide > div { padding: 0 0 1.25rem; border-bottom: 0; }
  .cluster__teams--wide dt { font-size: 1.0625rem; }
  .cluster--card { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; margin-top: var(--s7); padding: 2.75rem; border-radius: 28px; }
  .cluster--card .cluster__about { font-size: 1.0625rem; }
}

.servecta { padding-block: clamp(3.5rem, 8vw, 7rem); }
.servecta__inner { display: grid; gap: var(--s3); justify-items: start; max-width: calc(55rem + 2 * var(--gutter)); }
.servecta h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); line-height: 1.06; letter-spacing: -0.02em; }
.servecta .lede { margin: 0; }
.servecta .btn { margin-top: var(--s2); }
@media (max-width: 639px) { .servecta .btn { width: 100%; } }
@media (min-width: 960px) { .servecta__inner { justify-items: center; text-align: center; gap: 1.125rem; } }

/* Serve sign-up page: back to Serve, the title and three lines, then the form
   on white (a white card beside them on wide screens). */
.signup { padding-block: var(--s4) 0; }
.signup__grid { display: grid; gap: var(--s6); }
.signup__intro { display: grid; gap: var(--s3); align-content: start; }
.signup__intro h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); line-height: 1.05; letter-spacing: -0.02em; }
.signup__intro .firsttime { margin-top: var(--s2); }
.signup__intro .firsttime li { grid-template-columns: 1.375rem minmax(0, 1fr); gap: 0.75rem; padding: 0.875rem 0; font-size: 1rem; }
.signup__intro .firsttime li svg { width: 1.375rem; height: 1.375rem; margin-top: 0.1rem; color: var(--ok); }
.backlink { display: inline-flex; align-items: center; gap: 0.5rem; justify-self: start; min-height: 2.75rem; font-weight: 600; font-size: 0.9375rem; text-decoration: none; }
button.backlink { padding: 0; border: 0; background: none; color: inherit; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.backlink svg { width: 1.125rem; height: 1.125rem; transition: transform 160ms var(--ease-out); }
.backlink:hover { color: var(--brand); }
.backlink:hover svg { transform: translateX(-3px); }
.signup__card { margin-inline: calc(-1 * var(--gutter)); padding: 2rem var(--gutter) clamp(3rem, 7vw, 5rem); background: var(--paper); border-radius: 28px 28px 0 0; scroll-margin-top: 72px; }
.form--signup { gap: 1.375rem; }
@media (min-width: 960px) {
  .signup { padding-block: var(--s5) clamp(4rem, 8vw, 6.5rem); }
  .signup__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; }
  .signup__intro { position: sticky; top: calc(72px + var(--s5)); gap: var(--s4); }
  .signup__intro .firsttime li { gap: 0.875rem; padding: 1rem 0; font-size: 1.0625rem; }
  .signup__card { margin: 0; padding: 2.5rem; border-radius: 28px; box-shadow: var(--shadow-1); }
}
/* Phones: Send stays in reach at the bottom while you pick your teams. */
@media (max-width: 959px) {
  .form--signup .step[data-step="serve"] > .form-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-inline: calc(-1 * var(--gutter));
    padding: 0.75rem var(--gutter) calc(1rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: var(--hair);
  }
}

/* Serve form: teams grouped by cluster */
.teams { display: grid; gap: var(--s4); }
.teams__group { display: grid; gap: var(--s2); }
.teams__cluster { font-weight: 600; font-size: 0.75rem; letter-spacing: 0.12em; line-height: 1.3; text-transform: uppercase; color: var(--ink-3); }
.teams .chip span { min-height: 2.5rem; padding-inline: 0.875rem; font-size: 0.9375rem; }
@media (min-width: 960px) { .teams .chip span { min-height: 2.75rem; padding-inline: 1rem; } }

/* ---------- B1G's link page (/ig, /fb): warm white #F9F7F2, the logo, the
   next event on a white card, then pill buttons. Every link opens in a new
   tab so the link page stays open. ---------- */
/* Backstage > Link pages sets --lp-* on <body> (colours, font, button shape); without them, the look above. */
.linkpage-body { background-color: var(--lp-page, #F9F7F2); color: var(--lp-text, var(--ink)); font-family: var(--lp-font, var(--font)); }
.linkpage { width: 100%; max-width: 30rem; margin: 0 auto; padding: clamp(1.75rem, 6vw, 3.5rem) var(--gutter) var(--s7); display: grid; gap: var(--s4); }
.linkpage__logo { justify-self: center; display: inline-flex; min-height: 44px; align-items: center; }
.linkpage__logo img { height: 34px; width: auto; }
.linkpage__lede { margin: 0 auto; max-width: 30ch; text-align: center; font-size: 0.9375rem; line-height: 1.5; color: var(--lp-muted, var(--ink-2)); }
.linkpage__next { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 0.875rem; align-items: start; margin-top: var(--s1); padding: 0.875rem; border-radius: var(--r-l); background: var(--paper); box-shadow: var(--shadow-1); }
.linkpage__next .poster { width: 6rem; border-radius: 14px; }
.linkpage__event { display: grid; gap: 0.5rem; justify-items: start; min-width: 0; }
.linkpage__event .stamp { margin-top: 0.125rem; }
.linkpage__event h2 { font-size: 1.125rem; line-height: 1.22; letter-spacing: -0.01em; }
.linkpage__event p { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: var(--ink-2); }
.linkpage__next .btn { grid-column: 1 / -1; width: 100%; min-height: 3.5rem; }
.linkpage__list { list-style: none; margin: var(--s1) 0 0; padding: 0; display: grid; gap: 0.625rem; }
.linkpill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 3.25rem;
  padding: 0.5rem 1.25rem;
  border: 1.5px solid var(--lp-text, var(--ink));
  border-radius: var(--lp-radius, var(--pill));
  color: var(--lp-text, var(--ink));
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.linkpill:hover { background: rgba(20, 20, 20, 0.05); }
.linkpill:active { transform: scale(0.98); }
.linkpill--first { border-color: transparent; background: var(--lp-first, var(--t-first)); color: var(--lp-first-text, var(--ink)); }
.linkpill:has(.linkpill__sub) { flex-direction: column; gap: 0.125rem; }
.linkpill__sub { display: block; font-size: 0.75rem; font-weight: 400; opacity: 0.8; }
.linkpill--first:hover { background: #DDD4FF; }
.linkpill .arrow { width: 0.95em; height: 0.95em; }
.linkpage__social { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.linkpill--small { min-height: 3rem; padding-inline: 0.5rem; font-size: 0.8125rem; }
.linkpill--small { white-space: nowrap; }
@media (max-width: 419px) { .linkpill--small .arrow { display: none; } }
@media (max-width: 359px) { .linkpage__social { grid-template-columns: 1fr; } }
.linkpage :focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.linkpage__foot { margin: 0; text-align: center; font-size: 0.8125rem; color: var(--lp-faint, var(--ink-3)); }
.linkpage__foot a { display: inline-flex; align-items: center; min-height: 2.75rem; color: inherit; }
@media (prefers-reduced-motion: reduce) { .linkpill { transition: none; } .linkpill:active { transform: none; } }

/* Make a link (team tool) */
.linkmaker__out { display: grid; gap: var(--s3); align-content: start; justify-items: start; padding: 1.25rem; border-radius: 22px; background: var(--paper); box-shadow: var(--shadow-1); }
@media (min-width: 640px) { .linkmaker__out { padding: 2rem; } }
.linkmaker__url a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.linkmaker__url { margin: 0; font-weight: 600; font-size: clamp(1.125rem, 2.4vw, 1.5rem); overflow-wrap: anywhere; }
.linkmaker__qr { width: min(100%, 18rem); height: auto; border: var(--hair); border-radius: var(--r-s); background: #FFFFFF; }

/* ---------- FAQ ----------
   Phones: the title, then the questions. Wide screens: the title, a line and
   a leaning photo on the left, the questions on the right. Each question opens
   with a round button (a plus that turns into a cross). */
.faqband { padding-block: clamp(1.75rem, 4vw, 2.5rem) clamp(3.5rem, 8vw, 7rem); }
.faqband__grid { display: grid; gap: var(--s5); }
.faqband__intro { display: grid; gap: var(--s3); align-content: start; }
.faqband__intro h1 { font-size: clamp(2.125rem, 1.2rem + 3.2vw, 3.5rem); line-height: 1.03; letter-spacing: -0.02em; }
.faqband__intro .lede { margin: 0; }
.faqband__photo { display: none; margin: var(--s4) 0 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 22px; background: var(--wall-2); rotate: -2deg; box-shadow: var(--shadow-1); }
.faqband__photo img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 960px) {
  .faqband__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s8); align-items: start; }
  .faqband__intro { gap: 1.25rem; position: sticky; top: calc(72px + var(--s5)); }
  .faqband__intro .lede { font-size: 1.1875rem; line-height: 1.5; }
  .faqband__photo { display: block; }
}

.faq { border-top: var(--hair); }
.faq details { border-bottom: var(--hair); }
.faq summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s4);
  align-items: center;
  min-height: 4rem;
  padding: 0.875rem 0;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.3;
  -webkit-tap-highlight-color: transparent;
}
.faq summary::-webkit-details-marker { display: none; }
.faq__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.faq__icon svg { width: 1.125rem; height: 1.125rem; transition: transform 300ms var(--ease-out); }
.faq summary:hover .faq__icon { background: var(--wall-2); }
.faq details[open] .faq__icon { background: var(--ink); color: var(--paper); }
.faq details[open] .faq__icon svg { transform: rotate(45deg); }
.faq summary:hover > span:first-child { color: var(--brand); }
.faq .answer { display: grid; gap: var(--s3); padding: 0 3.5rem var(--s5) 0; max-width: 46rem; color: var(--ink-2); }
.faq .answer p { margin: 0; color: inherit; }
.faq .answer .textlink { min-height: 2.5rem; color: var(--ink); }
@media (min-width: 960px) {
  .faq summary { min-height: 5rem; padding: 1.375rem 0; font-size: 1.375rem; gap: var(--s5); }
  .faq__icon { width: 2.75rem; height: 2.75rem; }
  .faq .answer { padding-bottom: 1.75rem; font-size: 1.0625rem; }
}

.confirm-tag {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0.1rem 0.45rem;
  border: 1px dashed var(--error);
  border-radius: 6px;
  color: var(--error);
  font-weight: 600;
  font-size: 0.75rem;
  vertical-align: middle;
}

/* Get in touch: a white band, the words on the left and the form in a soft card. */
.connect { padding-block: clamp(3.5rem, 7vw, 6rem) 0; background: var(--paper); border-radius: 28px 28px 0 0; }
.connect__grid { display: grid; gap: var(--s6); }
.connect__intro { display: grid; gap: var(--s3); align-content: start; }
.connect__intro h2 { font-size: clamp(1.875rem, 1.2rem + 2.6vw, 2.875rem); line-height: 1.06; letter-spacing: -0.02em; }
.connect__intro p { margin: 0; }
@media (min-width: 960px) {
  .connect { border-radius: 40px 40px 0 0; }
  .connect__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); align-items: start; }
  .connect__intro { gap: 1.125rem; }
  .connect__intro .lede { font-size: 1.1875rem; }
}
.privacy { padding-block: clamp(3.5rem, 8vw, 6.5rem); background: var(--paper); }
.privacy__grid { display: grid; gap: var(--s4); padding-top: clamp(2.5rem, 5vw, 4rem); border-top: var(--hair); }
.privacy h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); letter-spacing: -0.015em; }
.privacy__text { display: grid; gap: var(--s4); color: var(--ink-2); line-height: 1.65; }
.privacy__text p { margin: 0; }
@media (min-width: 960px) { .privacy__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); } }

/* ---------- Forms ----------
   Labels in sentence case, 12px rounded boxes with a 1.5px ink border, choice
   pills that fill ink with a check when picked, the maroon Send. */

.formwrap { max-width: 44rem; }
.form { display: grid; gap: 1.25rem; align-content: start; }
.form--card { padding: 1.5rem 1rem; border-radius: var(--r-l); background: var(--wall); }
@media (min-width: 640px) { .form--card { padding: 2rem; } }
@media (min-width: 960px) { .form--card { gap: 1.5rem; padding: 2.25rem; border-radius: 28px; } }
.form__inset { padding: 1rem 1.125rem; border: var(--hair); border-radius: var(--r-m); background: var(--paper); }
.form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s5); min-width: 0; }
.form legend {
  padding: 0;
  margin-bottom: var(--s4);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.field { display: grid; gap: 0.375rem; min-width: 0; align-content: start; }
.field > label,
.field > .field__label {
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.35;
}
.field__hint { font-size: 0.8125rem; line-height: 1.4; color: var(--ink-3); margin: 0; }
.email-assist { display: grid; justify-items: start; gap: var(--s1); }
.field__req { color: var(--ink-3); font-weight: 400; }
.row-2 { display: grid; gap: 1.25rem; }
@media (min-width: 640px) {
  .row-2 { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto); column-gap: var(--s4); row-gap: 0; }
  /* Labels, hints and boxes line up across the two columns, even when only one has a hint. */
  .row-2 > .field { grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
  .row-2 > .field > :is(label, .field__label) { grid-row: 1; margin-bottom: 0.375rem; }
  .row-2 > .field > .field__hint { grid-row: 2; margin-bottom: 0.375rem; }
  .row-2 > .field > :is(.input, .select, .textarea, .choices, .scale) { grid-row: 3; }
  .row-2 > .field > :is(.other, .email-assist) { grid-row: 4; margin-top: var(--s2); }
  .row-2 > .field > .field__error { grid-row: 5; margin-top: var(--s2); }
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: 3.125rem;
  padding: 0.625rem 0.875rem;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-s);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1.35;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
.textarea { min-height: 9.375rem; padding-block: 0.75rem; line-height: 1.5; resize: vertical; }
/* Dropdowns: an 18px chevron 14px from the right edge. */
.select {
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 1.125rem;
  text-overflow: ellipsis;
}
.input::placeholder,
.textarea::placeholder { color: #8A8984; }
.input:hover,
.select:hover,
.textarea:hover { box-shadow: 0 0 0 3px var(--wall-2); }
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible { outline: 3px solid var(--brand); outline-offset: 1px; box-shadow: none; }
.input:disabled,
.select:disabled,
.textarea:disabled { border-color: var(--line); background: var(--wall-2); color: var(--ink-3); cursor: not-allowed; }
.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea { border-color: var(--error); box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.12); }
.field.has-error .chip span { border-color: var(--error); }
.field__error { display: flex; align-items: flex-start; gap: 0.375rem; color: var(--error); font-size: 0.875rem; font-weight: 600; line-height: 1.4; margin: 0; }
.input--big {
  font-weight: 600;
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
  letter-spacing: 0.01em;
  min-height: 3.5rem;
  font-variant-numeric: tabular-nums;
}

/* Choice pills (radio and checkbox): ink outline; picked fills ink with a check. */
.choices { display: flex; flex-wrap: wrap; gap: 0.5rem; border: 0; padding: 0; margin: 0; }
.choices--stack { flex-direction: column; }
.chip { position: relative; display: inline-flex; min-width: 0; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 1.5px solid var(--ink);
  border-radius: var(--pill);
  background: var(--paper);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.25;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out);
}
.chip span::before {
  content: "";
  display: none;
  flex: none;
  width: 1rem;
  height: 1rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.choices--stack .chip span { width: 100%; border-radius: var(--r-m); min-height: 3rem; padding-inline: 1.125rem; }
.chip span:hover { background: var(--wall-2); }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip input:checked + span::before { display: block; }
.chip input:focus-visible + span { outline: 3px solid var(--brand); outline-offset: 2px; }
.chip input:disabled + span { border-color: var(--line); color: var(--ink-3); cursor: not-allowed; background: var(--wall-2); }
@media (min-width: 960px) { .chip span { min-height: 3rem; padding-inline: 1.25rem; font-size: 1rem; } }

.scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s2); }
.scale .chip span { justify-content: center; width: 100%; padding-inline: 0; border-radius: var(--r-s); font-weight: 700; font-size: 1.125rem; min-height: 3rem; font-variant-numeric: tabular-nums; }
.scale .chip span::before { display: none !important; }
.scale__ends { display: flex; justify-content: space-between; font-size: 0.8125rem; color: var(--ink-3); }

.check { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start; font-size: 0.9375rem; line-height: 1.45; }
.check input { width: 1.375rem; height: 1.375rem; margin: 0.1rem 0 0; accent-color: var(--brand); }

.consent {
  padding: var(--s4);
  border: var(--hair);
  border-radius: var(--r-s);
  background: var(--paper);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-2);
  max-height: 12rem;
  overflow: auto;
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Step progress: "Step 1 of 4" over one bar per step (the bar is cut into
   --n segments with a mask; js/forms.js sets --n and the filled share --p). */
.progress { display: grid; gap: 0.5rem; }
.progress__text { order: -1; font-weight: 600; font-size: 0.8125rem; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.progress__bar {
  --seg: calc((100% - (var(--n, 4) - 1) * 6px) / var(--n, 4));
  position: relative;
  height: 6px;
  overflow: hidden;
  background: var(--line);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 var(--seg), transparent var(--seg) calc(var(--seg) + 6px));
  mask: repeating-linear-gradient(90deg, #000 0 var(--seg), transparent var(--seg) calc(var(--seg) + 6px));
  border-radius: 3px;
}
.progress__bar i { position: absolute; inset: 0; background: var(--brand); transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform 360ms var(--ease-out); }

.form-actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; padding-top: var(--s1); }
.form-actions .btn { flex: 1 1 auto; min-height: 3.25rem; }
@media (min-width: 640px) { .form-actions .btn { flex: 0 0 auto; padding-inline: 1.875rem; } }
.form .field__hint a,
.form p a { text-decoration-color: var(--line); }
.form .field__hint a:hover,
.form p a:hover { text-decoration-color: var(--brand); }

.notice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: center;
  padding: 0.875rem 1rem;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-m);
  background: var(--paper);
  font-size: 0.9375rem;
  line-height: 1.45;
  animation: stepIn 320ms var(--ease-out);
}
.notice > svg { width: 1.375rem; height: 1.375rem; }
.notice__ok { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--ok); color: #FFFFFF; }
.notice__ok svg { width: 1.125rem; height: 1.125rem; }
.notice--error { border-color: var(--error); color: var(--error); background: #FDF4F3; }
.notice--ok { border-color: var(--ok); }
.notice--draft { border-style: dashed; border-color: var(--error); }
.notice--draft strong { color: var(--error); }

.step[hidden] { display: none !important; }
/* Headings get focus when a step opens, for screen readers. No ring needed. */
.step :is(h2, h3, legend)[tabindex="-1"]:focus { outline: none; }
[data-event-questions] { display: grid; gap: var(--s5); }
[data-event-questions]:empty { display: none; }
.step { display: grid; gap: var(--s5); animation: stepIn 380ms var(--ease-out); }
@keyframes stepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Register ----------
   One box first (mobile number or email), sized to sit above the fold on an
   iPhone SE; then "already in", the short "Last bit", or the profile. Back
   sits at the top of each step and the main button stays in reach at the
   bottom on phones. Wide screens put the poster beside the form. */
.reg { display: grid; gap: var(--s6); padding-block: var(--s4) clamp(3rem, 7vw, 6rem); }
.form--reg { position: relative; gap: 1.25rem; max-width: 36rem; }
.form--reg > .progress { position: absolute; top: 0.5rem; right: 0; width: 9.5rem; }
.form--reg .step { gap: 1.25rem; }
.form--reg .step > h2 { font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.125rem); line-height: 1.12; letter-spacing: -0.02em; }
.form--reg .backlink { min-height: 2.75rem; margin-bottom: -0.5rem; }
.reg__title { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); line-height: 1.08; letter-spacing: -0.02em; }
.form--reg #contact { font-size: 1.25rem; font-weight: 500; letter-spacing: 0; }
.regchip { display: flex; align-items: center; gap: 0.75rem; min-height: 3.5rem; }
.regchip .poster { width: 2.75rem; flex: none; border-radius: 8px; box-shadow: var(--shadow-1); }
.regchip__text { display: grid; gap: 0.0625rem; min-width: 0; line-height: 1.25; }
.regchip__text strong { font-weight: 700; font-size: 0.9375rem; }
.regchip__text span { font-size: 0.8125rem; color: var(--ink-3); }
.form--reg [data-step="start"] .form-actions .btn { width: 100%; }
.reg__safe { display: flex; align-items: center; gap: 0.5rem; margin: -0.25rem 0 0; font-size: 0.8125rem; color: var(--ink-3); }
.reg__safe svg { width: 1rem; height: 1rem; flex: none; }
.regnote { display: grid; gap: 0.375rem; padding: 0.875rem 1rem; border-radius: var(--r-m); background: var(--paper); border: var(--hair); font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2); }
.regnote strong { color: var(--ink); font-weight: 600; font-size: 1rem; }
.reg__event { display: none; }
.reg__evtitle { margin: 0; font-weight: 600; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
/* Phones: the main button stays in reach while you answer. */
@media (max-width: 959px) {
  .form--reg .step:not([data-step="start"]):not([data-step="done"]) > .form-actions {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin-inline: calc(-1 * var(--gutter));
    padding: 0.75rem var(--gutter) calc(0.875rem + env(safe-area-inset-bottom, 0px));
    background: rgba(247, 246, 242, 0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: var(--hair);
  }
  .form--reg .step > .form-actions .btn { width: 100%; }
}
@media (max-height: 600px) and (max-width: 959px) { .regchip { min-height: 3rem; } .regchip .poster { width: 2.375rem; } }
@media (min-width: 960px) {
  .reg { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4.5rem; align-items: start; padding-top: var(--s6); }
  .form--reg { grid-column: 2; grid-row: 1; max-width: none; }
  .reg__event { grid-column: 1; grid-row: 1; position: sticky; top: calc(72px + var(--s5)); display: grid; gap: var(--s5); padding: var(--s7) var(--s6); border-radius: 28px; background: var(--wall-2); }
  .reg__event .poster { width: min(100%, 22rem); justify-self: center; rotate: -2deg; box-shadow: 0 18px 40px -8px rgba(20, 20, 20, 0.22); }
  .reg__event > div { display: grid; gap: 0.375rem; }
  .reg__event p { margin: 0; font-size: 0.9375rem; color: var(--ink-2); }
  .regchip { display: none; }
}

/* Done: the check, the words, the calendar, then Invite a friend and My profile. */
.done { display: grid; gap: var(--s5); }
.me-line { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2); }
.me-line strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.me-line .linkbtn { font-size: inherit; }
.done .calendar { padding-top: var(--s5); }
.done__more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); padding-top: var(--s5); border-top: var(--hair); }
.done__more .btn svg { width: 1.125rem; height: 1.125rem; }
@media (max-width: 479px) { .done__more .btn { flex: 1 1 100%; } }
.cal__otherbtn { min-height: 3rem; }
@media (min-width: 640px) { .cal--sheet .cal__otherbtn { justify-self: start; min-width: 21rem; } }
/* On the Register page the header's own Register would point back here. */
body:has([data-register-app]) .header-actions > [data-header-register] { display: none; }

/* Other calendars: a sheet from the bottom on phones, a small card on laptops. */
.calsheet {
  width: 100%;
  max-width: 100%;
  margin: auto 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-l) var(--r-l) 0 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-2);
}
.calsheet::backdrop { background: rgba(20, 20, 20, 0.45); }
.calsheet[open] { animation: sheetUp 320ms var(--ease-out); }
/* "Other calendars" on browsers without <dialog> (iOS before 15.4). */
.calsheet--plain[open] { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: block; margin: 0 auto; box-shadow: 0 0 0 100vmax rgba(20, 20, 20, 0.45); }
@keyframes sheetUp { from { transform: translateY(24px); opacity: 0; } }
.calsheet__inner { display: grid; gap: var(--s3); padding: 0.625rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
.calsheet__grip { justify-self: center; width: 2.5rem; height: 4px; border-radius: 2px; background: var(--line); }
.calsheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.calsheet__head h2 { font-size: 1.125rem; letter-spacing: -0.01em; }
.calsheet__close { min-height: 2.75rem; padding: 0 1rem; border: 0; border-radius: var(--pill); background: var(--wall-2); font: inherit; font-weight: 600; font-size: 0.875rem; color: var(--ink); cursor: pointer; }
.calsheet__close:hover { background: var(--line); }
.calsheet__list { display: grid; border-radius: var(--r-m); background: var(--wall); overflow: hidden; }
.calsheet__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; min-height: 3.75rem; padding: 0.5rem 0.875rem; color: var(--ink); font-weight: 600; text-decoration: none; }
.calsheet__row + .calsheet__row { border-top: 1px solid var(--line-2); }
.calsheet__row:hover { background: var(--wall-2); }
.calsheet__icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--paper); }
.calsheet__icon svg { width: 1.125rem; height: 1.125rem; }
.calsheet__row > .arrow { width: 1rem; height: 1rem; color: var(--ink-3); }
@media (min-width: 640px) {
  .calsheet { width: min(26rem, calc(100% - 2rem)); margin: auto; border-radius: var(--r-l); }
  .calsheet__inner { padding: 1rem 1.25rem 1.25rem; }
  .calsheet__grip { display: none; }
}
@media (prefers-reduced-motion: reduce) { .calsheet[open] { animation: none; } }
.calendar { display: grid; gap: var(--s3); padding-top: var(--s5); border-top: var(--hair); }
.calendar__title { margin: 0; font-weight: 600; font-size: 0.9375rem; }
.calendar__links { display: grid; }

/* Add to calendar: one clear pill for this device's calendar, the others as
   smaller pills (or links), all in sentence case. */
.cal { display: grid; gap: var(--s2); container-type: inline-size; }
.cal__main {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 3rem;
  padding: 0.6rem 1.25rem;
  border: 1.5px solid var(--ink);
  border-radius: var(--pill);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.25;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.cal__main span { flex: 1; min-width: 0; }
.cal__main svg { width: 1.25rem; height: 1.25rem; flex: none; }
.cal__main .arrow { transition: transform 160ms var(--ease-out); }
.cal__main:hover { background: var(--wall-2); }
.cal__main:hover .arrow { transform: translateX(3px); }
.cal__main:active { transform: scale(0.98); }
.cal__more { margin: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s4); font-size: 0.9375rem; color: var(--ink-2); }
.cal__more a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
.cal__more a:hover, .cal__copy:hover { color: var(--brand); }
/* Inside the Facebook, Messenger or Instagram browser: the plain link as a way out. */
.cal__note { margin: 0; font-size: 0.875rem; line-height: 1.45; color: var(--ink-2); }
.cal__copy {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
@media (min-width: 640px) { .cal__main { justify-self: start; min-width: 21rem; } }
/* Narrow spots (a 320px phone, the profile ticket): keep the button on one line
   and give "Another calendar?" its own line so the links sit together. */
@container (max-width: 22rem) { .cal__more > span { flex-basis: 100%; } }
@container (max-width: 19rem) {
  .cal__main { gap: var(--s2); padding-inline: 1rem; font-size: 0.9375rem; }
  .cal__main .arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cal__main, .cal__main .arrow { transition: none; } }

/* My profile */
.profile { display: grid; gap: clamp(2rem, 5vw, 4rem); }
.profile__side { display: grid; gap: var(--s4); align-content: start; justify-items: start; }
.profile__initial {
  display: grid;
  place-items: center;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1;
}
.profile__name { font-size: clamp(2rem, 4vw, 3rem); overflow-wrap: anywhere; }
.profile__nick { margin: 0; color: var(--ink-2); }
.profile__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s2); }
.profile__main { display: grid; gap: var(--s6); min-width: 0; }
.profile__block { display: grid; gap: var(--s3); }
.profile__block h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
.profile__block dd { overflow-wrap: anywhere; }
/* One label width for every section, so the answers line up down the page. */
.profile__block .details { grid-template-columns: 9rem minmax(0, 1fr); }
@media (min-width: 640px) { .profile__block .details { grid-template-columns: 12rem minmax(0, 1fr); } }
.profile__events { list-style: none; margin: 0; padding: 0; border-top: var(--rule); }
.profile__events li { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s3); align-items: baseline; padding: var(--s3) 0; border-bottom: var(--hair); }
.profile__events .datemark { font-size: 1.5rem; }
.profile__event-title { font-weight: 700; min-width: 0; }
.profile__help { color: var(--ink-2); font-size: 0.9375rem; }
.profile__empty { display: grid; gap: var(--s4); }
@media (min-width: 960px) {
  .profile { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
  .profile__side { position: sticky; top: calc(76px + 2rem); }
}
.done__mark { display: flex; align-items: center; gap: var(--s4); }
.done__mark > svg { box-sizing: content-box; width: 1.5rem; height: 1.5rem; flex: none; padding: 0.75rem; border-radius: 50%; background: var(--ok); color: #FFFFFF; }
.done h2, .done h3 { font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem); line-height: 1.1; letter-spacing: -0.02em; }

.demo-banner {
  position: relative;
  z-index: 70;
  background: var(--ink);
  color: var(--wall);
  text-align: center;
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.45rem var(--gutter);
  border-bottom: 2px solid var(--ink);
}

/* ---------- Footer ----------
   White, with a hairline on top: the logo, one line about B1G, the four
   ways to reach us in round buttons, and two short link lists. Phones put
   the two lists side by side; from 720px the three blocks share a row. */
.site-footer { background: var(--paper); border-top: var(--hair); color: var(--ink); }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s6) var(--s4);
  padding-block: clamp(2.5rem, 5vw, 4rem) var(--s6);
}
.footer-church { grid-column: 1 / -1; display: grid; gap: var(--s4); align-content: start; justify-items: start; }
.footer-church .brand img { height: 28px; }
.footer-church p { margin: 0; max-width: 34ch; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }
.footer-church p a { text-decoration-color: var(--line); }
.footer-church p a:hover { text-decoration-color: var(--brand); }
.footer-nav__title { margin-bottom: var(--s2); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; line-height: 1.3; text-transform: uppercase; color: var(--ink-3); }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.125rem; }
.footer-nav li a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration-color: transparent;
}
.footer-nav li a:hover { text-decoration-color: var(--brand); }
/* Connect: the four icons, each in a round outline that fills on hover. */
.social { display: flex; flex-wrap: wrap; gap: 0.625rem; list-style: none; margin: var(--s1) 0 0; padding: 0; }
.social a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.social a:hover { background: var(--ink); color: var(--paper); }
.social svg { width: 1.125rem; height: 1.125rem; }
.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0 var(--s5);
  padding-block: var(--s2) var(--s4);
  border-top: var(--hair);
  font-size: 0.8125rem;
  color: var(--ink-3);
}
.footer-base__links { display: flex; flex-wrap: wrap; column-gap: var(--s5); }
.footer-base a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration-color: transparent; }
.footer-base a:hover { color: var(--ink); text-decoration-color: var(--brand); }
@media (max-width: 719px) {
  /* Phones: the two lists sit side by side without their small titles. */
  .footer-nav__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7) var(--s6); padding-bottom: var(--s7); }
  .footer-church { grid-column: auto; }
  .footer-church .brand img { height: 30px; }
  .footer-nav li a { min-height: 2.25rem; }
}
@media (prefers-reduced-motion: reduce) { .social a { transition: none; } }

/* ---------- Shared bits the update page still uses (the desk has css/desk.css) ---------- */
.people__group {
  padding: var(--s5) 0 var(--s2);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: var(--hair);
}
.pin { letter-spacing: 0.5em; text-align: center; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(5rem + env(safe-area-inset-bottom));
  z-index: 80;
  transform: translate(-50%, 20px);
  opacity: 0;
  background: var(--ink);
  color: var(--wall);
  padding: 0.75rem 1.125rem;
  border-radius: var(--pill);
  box-shadow: var(--shadow-2);
  font-weight: 600;
  font-size: 0.9375rem;
  display: flex;
  gap: var(--s4);
  align-items: center;
  width: max-content;
  max-width: calc(100% - 2 * var(--gutter));
  transition: opacity 200ms var(--ease-out), transform 260ms var(--ease-out);
  pointer-events: none;
}
.toast.is-shown { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast button { background: none; border: 0; color: var(--wall); font: inherit; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; cursor: pointer; padding: 0.25rem; }

.empty { padding: var(--s7) var(--gutter); text-align: center; color: var(--ink-2); }

/* ---------- Photos page: the photo dump ----------
   Event bubbles under the page title, like story highlights, then the picked
   event's photos on a white band as a mixed-size grid. js/site.js (bento)
   gives every tile its spot at 2, 3 and 4 columns, so the grid never shows a
   hole. */

/* A tighter page head, so the bubbles and photos come up sooner. */
.pagehead--photos { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 3.5vw, 3.5rem); }
.pagehead--photos .wrap { row-gap: var(--s3); }

/* Event bubbles. The selected one gets a maroon ring and maroon words. */
.bubbles {
  --ring: 5rem;
  position: relative;
  grid-column: 1 / -1;
  min-width: 0;
  margin: var(--s2) calc(-1 * var(--gutter)) 0;
}
.bubbles__list {
  /* Positioned, so the screen-reader text in each bubble scrolls and clips with the row. */
  position: relative;
  display: flex;
  gap: var(--s3);
  min-height: calc(var(--ring) + 3.5rem);
  margin: 0;
  padding: var(--s2) var(--gutter);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.bubbles__list::-webkit-scrollbar { display: none; }
.bubbles__list > li { flex: none; scroll-snap-align: start; }
.bubbles.is-scrollable .bubbles__list {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
}
.bubble {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  width: calc(var(--ring) + 1rem);
  padding-top: 0.25rem;
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.bubble__ring {
  display: block;
  width: var(--ring);
  height: var(--ring);
  padding: 3px;
  border-radius: 50%;
  background: #C9C7C0;
  transition: background-color 200ms var(--ease-out), padding 200ms var(--ease-out), transform 300ms var(--ease-out);
}
.bubble__ring img { width: 100%; height: 100%; border: 3px solid var(--wall); border-radius: 50%; object-fit: cover; background: var(--wall-2); transition: transform 300ms var(--ease-out); }
.bubble__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-width: 100%;
  /* Always two lines tall, so every date sits on the same line whatever the title's length. */
  min-height: 2.4em;
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.bubble__date { font-size: 0.75rem; color: var(--ink-3); }
.bubble:hover .bubble__ring { background: var(--ink); }
.bubble[aria-current="true"] .bubble__ring { padding: 4px; background: var(--brand); }
.bubble[aria-current="true"] .bubble__name { font-weight: 700; color: var(--brand); }
.bubble[aria-current="true"] .bubble__date { color: var(--brand); }
.bubble:focus-visible { outline: none; }
.bubble:focus-visible .bubble__ring { outline: 3px solid var(--brand); outline-offset: 3px; }
/* Mouse screens: arrows when the row runs past the edge. */
.bubbles__arrow { display: none; }
@media (hover: hover) and (pointer: fine) {
  .bubbles.is-scrollable .bubbles__arrow:not([hidden]) {
    position: absolute;
    top: calc(var(--s2) + 0.25rem + var(--ring) / 2 - 1.375rem);
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1.5px solid var(--ink);
    border-radius: 50%;
    background: var(--paper);
    color: var(--ink);
    box-shadow: var(--shadow-1);
    cursor: pointer;
    transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out);
  }
  .bubbles__arrow svg { width: 1.125rem; height: 1.125rem; }
  .bubbles__arrow:hover { background: var(--ink); color: var(--paper); }
  .bubbles__arrow--back { left: max(0.25rem, calc(var(--gutter) - 1.375rem)); }
  .bubbles__arrow--fwd { right: max(0.25rem, calc(var(--gutter) - 1.375rem)); }
}
@media (max-width: 359px) { .bubbles__list { gap: var(--s2); } }
@media (min-width: 960px) {
  .bubbles { --ring: 6.5rem; margin-top: var(--s4); }
  .bubbles__list { gap: var(--s6); }
  .bubble { gap: 0.5rem; }
  .bubble__name { min-height: 2.5em; font-size: 0.9375rem; line-height: 1.25; }
  .bubble__date { font-size: 0.8125rem; }
}

/* The album, on a white band: an ink count sticker, a big title, the date,
   then Shuffle and Tag yourself. */
.dump {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 6rem);
  background: var(--paper);
  border-radius: 28px 28px 0 0;
}
.dump__head { display: grid; justify-items: start; gap: 0.625rem; margin-bottom: clamp(1.75rem, 3vw, 2rem); }
.dump__count {
  display: inline-block;
  padding: 0.32em 0.65em 0.28em;
  border-radius: 7px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1.1;
  white-space: nowrap;
  rotate: -3deg;
  animation: stickerOn 520ms var(--ease-out) 160ms backwards;
}
@keyframes stickerOn { from { opacity: 0; transform: rotate(-14deg) scale(1.4); } }
.dump__title {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.dump__title:focus { outline: none; }
.dump__facts { margin: 0; color: var(--ink-2); font-size: 0.9375rem; }
.dump__summary { margin: 0; max-width: 34rem; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }
.dump__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: 0.375rem; }
.dump__shuffle { gap: 0.4rem; min-height: 2.75rem; padding: 0 0.875rem; font-size: 0.875rem; }
.dump__shuffle svg { width: 1rem; height: 1rem; flex: none; }
.dump__shuffle.is-spun svg { animation: shuffleSpin 560ms var(--ease-out); }
@keyframes shuffleSpin { from { transform: rotate(-270deg) scale(0.5); } }
@media (min-width: 960px) {
  .dump { border-radius: 40px 40px 0 0; }
  .dump__head { gap: 0.875rem; }
  .dump__count { font-size: 0.8125rem; }
  .dump__facts { font-size: 1.0625rem; }
}
/* Wide screens: the head stays in view beside the photos. */
@media (min-width: 1100px) {
  .dump__layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 3.5rem; align-items: start; }
  .dump__head { position: sticky; top: calc(72px + var(--s5)); margin-bottom: 0; }
  .dump__more { grid-column: 1 / -1; }
}

/* The grid: rows are half a column tall, so a square tile is 1 by 2. */
.dump__wall { container-type: inline-size; }
.dump__grid {
  --cols: 2;
  --gap: 6px;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-auto-rows: 22vw;
  grid-auto-rows: calc((100cqi - (var(--cols) - 1) * var(--gap)) / var(--cols) / 2 - var(--gap) / 2);
  grid-auto-flow: dense;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.dump__tile {
  --tilt: -1.5deg;
  --tilt-in: -3deg;
  position: relative;
  min-width: 0;
  grid-column: var(--c2);
  grid-row: var(--r2);
  animation: tileIn 560ms var(--ease-out) backwards;
  animation-delay: calc(min(var(--i, 0), 12) * 45ms);
}
.dump__tile:nth-child(even) { --tilt: 1.25deg; --tilt-in: 3deg; }
@keyframes tileIn { from { opacity: 0; transform: translateY(18px) scale(0.92) rotate(var(--tilt-in)); } }
@container (min-width: 560px) {
  .dump__grid { --cols: 3; --gap: 10px; }
  .dump__tile { grid-column: var(--c3); grid-row: var(--r3); }
}
@container (min-width: 900px) {
  .dump__grid { --cols: 4; --gap: 10px; }
  .dump__tile { grid-column: var(--c4); grid-row: var(--r4); }
}
.dump__photo {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: var(--wall-2);
  overflow: hidden;
  cursor: zoom-in;
  transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
}
.dump__photo img { width: 100%; height: 100%; object-fit: cover; }
.dump__tile:hover,
.dump__tile:focus-within { z-index: 2; }
@media (hover: hover) {
  .dump__photo:hover { transform: translateY(-4px) rotate(var(--tilt)); box-shadow: 0 14px 30px -6px rgba(20, 20, 20, 0.3); }
}
.dump__photo:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; transform: translateY(-4px) rotate(var(--tilt)); }
.dump__photo:active { transform: scale(0.98); }
@container (min-width: 560px) { .dump__photo { border-radius: var(--r-m); } }

/* Newer and older events, so people keep browsing. */
.dump__more { display: grid; gap: var(--s3); margin-top: clamp(2rem, 5vw, 4rem); padding-top: clamp(1.5rem, 3vw, 2rem); border-top: var(--hair); }
@media (min-width: 640px) {
  .dump__more { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
  .dump__next--older:only-child { grid-column: 2; }
}
.dump__next {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.875rem;
  min-height: 5.5rem;
  padding: 0.75rem 0.875rem 0.75rem 0.75rem;
  border-radius: 20px;
  background: var(--wall);
  color: inherit;
  text-decoration: none;
  transition: background-color 200ms var(--ease-out);
}
.dump__next--newer { grid-template-columns: auto auto minmax(0, 1fr); padding: 0.75rem 0.75rem 0.75rem 0.875rem; }
.dump__next:hover { background: var(--wall-2); }
.dump__next-thumb { display: block; width: 4rem; height: 4rem; border-radius: 14px; overflow: hidden; }
.dump__next-thumb img { width: 100%; height: 100%; object-fit: cover; background: var(--wall-2); }
.dump__next-text { display: grid; gap: 0.125rem; min-width: 0; }
.dump__next-text .label { font-size: 0.6875rem; letter-spacing: 0.12em; color: var(--ink-3); }
.dump__next-title { font-weight: 600; font-size: 1.0625rem; line-height: 1.2; overflow-wrap: anywhere; }
.dump__next-meta { font-size: 0.8125rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.dump__next-arrow {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.dump__next-arrow .arrow { width: 1.125rem; height: 1.125rem; transition: transform 200ms var(--ease-out); }
.dump__next--newer .dump__next-arrow .arrow { transform: scaleX(-1); }
.dump__next:hover .dump__next-arrow { background: var(--ink); color: var(--paper); }
@media (min-width: 960px) {
  .dump__next { min-height: 6rem; padding: 0.75rem 1.25rem 0.75rem 0.75rem; border-radius: 22px; }
  .dump__next--newer { padding: 0.75rem 0.75rem 0.75rem 1.25rem; }
  .dump__next-thumb { width: 4.5rem; height: 4.5rem; }
  .dump__next-title { font-size: 1.25rem; }
  .dump__next-meta { font-size: 0.875rem; }
}
@media (prefers-reduced-motion: reduce) { .bubble__ring, .bubble__ring img, .dump__photo, .dump__next, .dump__next-arrow, .dump__next-arrow .arrow { transition: none; } }

/* ---------- The photo viewer: full screen, story style ----------
   The photo sits in an absolutely placed frame with object-fit: contain,
   so it always fits the visible screen, whatever its shape. */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  height: 100vh;
  height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: #0E0B0B;
  color: #FFFFFF;
  overscroll-behavior: contain;
  animation: viewerIn 220ms var(--ease-out);
}
@keyframes viewerIn { from { opacity: 0; } }
.lightbox :focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }
.lightbox__top { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); padding: var(--s2) var(--s3) var(--s1); }
.lightbox__bars { display: flex; gap: 4px; }
.lightbox__seg { flex: 1 1 0; min-width: 0; height: 3px; overflow: hidden; background: rgba(255, 255, 255, 0.3); }
.lightbox__seg i { display: block; height: 100%; background: #FFFFFF; transform: scaleX(0); transform-origin: left center; }
.lightbox__seg.is-done i,
.lightbox__seg.is-on i { transform: none; }
.lightbox__seg.is-on i { animation: segFill 420ms var(--ease-out); }
.lightbox__bars.is-long .lightbox__seg i { transition: transform 320ms var(--ease-out); }
@keyframes segFill { from { transform: scaleX(0); } }
.lightbox__head { display: flex; align-items: center; gap: var(--s2); min-height: 2.75rem; }
.lightbox__title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 0.9375rem; }
.lightbox__count { flex: none; padding-right: var(--s2); font-weight: 700; font-size: 0.9375rem; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.78); }
.lightbox__btn { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #FFFFFF; cursor: pointer; transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out); }
.lightbox__btn svg { width: 1.375rem; height: 1.375rem; }
.lightbox__btn:hover { background: #FFFFFF; color: var(--ink); }
.lightbox__note {
  position: absolute;
  top: 100%;
  right: var(--s3);
  z-index: 3;
  padding: 0.55rem 0.9rem 0.5rem;
  border-radius: var(--pill);
  background: #FFFFFF;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.875rem;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 180ms var(--ease-out), transform 240ms var(--ease-out);
}
.lightbox__note.is-shown { opacity: 1; transform: none; }
.lightbox__stage { position: relative; min-height: 0; overflow: hidden; touch-action: pan-y pinch-zoom; -webkit-user-select: none; user-select: none; }
.lightbox__frame { position: absolute; inset: var(--s1) 0 var(--s3); }
.lightbox__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; -webkit-user-select: none; user-select: none; transition: filter 220ms var(--ease-out); }
.lightbox__img.is-soft { filter: blur(4px); }
/* Phones: the left and right thirds are invisible buttons, as in stories. */
.lightbox__nav { position: absolute; top: 0; bottom: 0; z-index: 2; width: 33.34%; padding: 0; border: 0; border-radius: 0; background: transparent; color: #FFFFFF; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lightbox__nav svg { display: none; }
.lightbox__nav:focus-visible { outline-offset: -6px; }
.lightbox__prev { left: 0; }
.lightbox__next { right: 0; }
/* Wider screens: arrows beside the photo. */
@media (min-width: 720px) {
  .lightbox__top { padding: var(--s3) var(--s5) var(--s2); }
  .lightbox__frame { inset: var(--s2) 5.5rem var(--s5); }
  .lightbox__nav { top: 50%; bottom: auto; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; background: rgba(255, 255, 255, 0.14); transform: translateY(-50%); transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), opacity 160ms var(--ease-out); }
  .lightbox__nav svg { display: block; width: 1.5rem; height: 1.5rem; }
  .lightbox__nav:focus-visible { outline-offset: 3px; }
  .lightbox__prev { left: var(--s4); }
  .lightbox__next { right: var(--s4); }
  .lightbox__nav:hover { background: #FFFFFF; color: var(--ink); }
  .lightbox__nav[aria-disabled="true"] { opacity: 0.3; cursor: default; }
  .lightbox__nav[aria-disabled="true"]:hover { background: rgba(255, 255, 255, 0.14); color: #FFFFFF; }
}
/* Short screens, like a phone held sideways: less air around the photo. */
@media (max-height: 520px) {
  .lightbox__top { gap: var(--s1); padding-block: var(--s1) 0; }
  .lightbox__frame { inset-block: 0 var(--s2); }
}
@media (prefers-reduced-motion: reduce) {
  .dump__tile, .dump__count, .dump__shuffle.is-spun svg, .lightbox, .lightbox__seg.is-on i { animation: none; }
  .bubble__ring, .bubble__ring img, .dump__photo, .dump__next, .dump__next-arrow .arrow, .lightbox__img, .lightbox__note, .lightbox__bars.is-long .lightbox__seg i { transition: none; }
  .bubble:hover .bubble__ring img, .bubble[aria-current="true"] .bubble__ring { transform: none; }
  .dump__photo:hover, .dump__photo:focus-visible, .dump__photo:active, .dump__next:hover { transform: none; }
}

/* ---------- My profile ----------
   Calm: the initial in a maroon ring, the name and masked number, then Next
   up as a white card with the poster, every event as quiet rows, and Your
   details and Backstage as rows that open. The log in and first-name screens
   are one white card each. */
.mp { padding-block: var(--s5) clamp(3rem, 7vw, 5rem); }
.mp .wrap { display: grid; gap: var(--s6); max-width: calc(40rem + 2 * var(--gutter)); }
.mp-h { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); line-height: 1.2; letter-spacing: -0.01em; }
.mp-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.875rem; align-items: center; }
.mp-head__ring { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; padding: 3px; border-radius: 50%; background: conic-gradient(from 200deg, var(--brand), #E9A2A2, var(--brand)); }
.mp-head__ring span { display: grid; place-items: center; width: 100%; height: 100%; border: 3px solid var(--wall); border-radius: 50%; background: var(--paper); color: var(--brand); font-weight: 700; font-size: 1.25rem; }
.mp-head__who { display: grid; gap: 0.0625rem; min-width: 0; }
.mp-head__who p { margin: 0; }
.mp-head__name { font-weight: 600; font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.mp-head__sub { font-size: 0.875rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.mp-head__count { font-size: 0.8125rem; color: var(--ink-3); }
.mp-section { display: grid; gap: var(--s3); }
.mp-next { display: grid; gap: var(--s4); padding: 0.875rem; border-radius: var(--r-l); background: var(--paper); box-shadow: var(--shadow-1); }
.mp-next__art { position: relative; }
.mp-next__art .poster { border-radius: var(--r-m); }
.mp-next__stamp { position: absolute; left: 0.75rem; top: 0.75rem; }
.mp-next__body { display: grid; gap: 0.625rem; align-content: start; padding: 0 0.25rem 0.25rem; min-width: 0; }
.mp-reg { justify-self: start; display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.3rem 0.75rem 0.3rem 0.5625rem; border-radius: var(--pill); background: #DCF3E5; color: var(--ok); font-size: 0.8125rem; font-weight: 600; }
.mp-reg svg { width: 0.875rem; height: 0.875rem; }
.mp-next__title { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.625rem); line-height: 1.15; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.mp-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.375rem; font-size: 0.9375rem; color: #2B2B28; }
.mp-facts li { display: flex; align-items: flex-start; gap: 0.625rem; line-height: 1.4; }
.mp-facts svg { width: 1.125rem; height: 1.125rem; flex: none; margin-top: 0.05rem; color: var(--ink-3); }
.mp-next__cal { margin-top: var(--s2); }
.mp-next .cal__main, .mp-next .cal__otherbtn { min-width: 0; width: 100%; justify-self: stretch; }
.mp-invite { justify-self: center; gap: 0.5rem; border: 0; background: none; font: inherit; font-weight: 600; font-size: 0.9375rem; color: var(--ink); cursor: pointer; }
.mp-invite svg { width: 1.125rem; height: 1.125rem; }
.mp-next .btn--block { margin-top: var(--s2); }
@media (min-width: 640px) {
  .mp-next { grid-template-columns: 11rem minmax(0, 1fr); gap: var(--s5); padding: 1rem; }
  .mp-next__body { padding: 0.25rem 0.5rem 0.25rem 0; }
  .mp-invite { justify-self: start; }
}
.mp-list { list-style: none; margin: 0; padding: 0; border-top: var(--hair); }
.mp-row { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0.75rem; align-items: start; padding: 0.875rem 0; border-bottom: var(--hair); }
.mp-row__mark { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; margin-top: 0.0625rem; border: 1.5px solid var(--line); border-radius: 50%; }
.mp-row__mark.is-done { border-color: var(--ok); background: var(--ok); color: #FFFFFF; }
.mp-row__mark svg { width: 0.9375rem; height: 0.9375rem; }
.mp-row__text { display: grid; gap: 0.125rem; min-width: 0; }
.mp-row__title { font-weight: 600; font-size: 0.9375rem; line-height: 1.3; overflow-wrap: anywhere; }
.mp-row__meta { font-size: 0.8125rem; line-height: 1.5; color: var(--ink-3); }
.mp-row__meta a { position: relative; color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.mp-row__meta a::after { content: ""; position: absolute; inset: -0.75rem -0.375rem; }
.mp-empty { margin: 0; color: var(--ink-2); }
.mp-mores { display: grid; border-radius: var(--r-m); background: var(--paper); overflow: hidden; }
.mp-more + .mp-more { border-top: var(--hair); }
.mp-more > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 3.5rem; padding: 0 1rem; font-weight: 600; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.mp-more > summary::-webkit-details-marker { display: none; }
.mp-more > summary:hover { background: var(--wall); }
.mp-chev { width: 1.125rem; height: 1.125rem; flex: none; transition: transform 240ms var(--ease-out); }
.mp-more[open] .mp-chev { transform: rotate(180deg); }
.mp-more__body { display: grid; gap: var(--s4); padding: 0.25rem 1rem 1.25rem; }
.mp-more__body p { margin: 0; }
.mp-details__block { display: grid; gap: var(--s2); }
.mp-details__block h3 { font-size: 0.875rem; font-weight: 600; letter-spacing: 0; }
.mp-details .details { grid-template-columns: 9rem minmax(0, 1fr); }
@media (min-width: 640px) { .mp-details .details { grid-template-columns: 12rem minmax(0, 1fr); } }
.mp-details dd { overflow-wrap: anywhere; }
.mp-help { margin: 0; color: var(--ink-3); font-size: 0.875rem; line-height: 1.5; }
.mp-help a { color: var(--ink); font-weight: 600; }
.mp-out { margin: calc(-1 * var(--s4)) 0 0; }
.mp-logout { color: var(--ink-3); min-height: 2.75rem; }
.mp-box { display: grid; gap: var(--s4); max-width: 32rem; padding: 1.375rem 1.125rem; border: var(--hair); border-radius: 22px; background: var(--paper); }
.mp-box__title { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2rem); line-height: 1.1; letter-spacing: -0.02em; }
.mp-box__title--sm { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.625rem); line-height: 1.2; }
.mp-box__lede { margin: 0; color: var(--ink-2); font-size: 0.9375rem; }
.mp-box__foot { margin: 0; padding-top: var(--s4); border-top: var(--hair); font-size: 0.875rem; line-height: 1.5; color: var(--ink-2); }
.mp-box__foot .textlink { min-height: 0; white-space: nowrap; }
@media (min-width: 640px) { .mp-box { padding: 2rem; } }

/* ---------- Update the website (team page) ---------- */

.upd { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); display: grid; gap: var(--s5); }
.upd--narrow { max-width: 30rem; }
.upd h1 { font-size: clamp(2.125rem, 1.3rem + 2.8vw, 3.25rem); line-height: 1.04; letter-spacing: -0.02em; }
.upd h2 { font-size: 1.5rem; }
.upd__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s4); }
.upd__head .btn svg { width: 1.1em; height: 1.1em; }
.upd__events { list-style: none; margin: 0; padding: 0; display: grid; }
.upd__event { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: var(--s4); align-items: center; padding: var(--s3) 0; border-bottom: var(--hair); }
.upd__thumb { width: 3.5rem; aspect-ratio: 4 / 5; overflow: hidden; display: block; }
.upd__thumb img { width: 100%; height: 100%; object-fit: cover; }
.upd__text { display: grid; gap: 0.15rem; min-width: 0; }
.upd__text .datemark { font-size: 1.25rem; color: var(--brand); }
.upd__title { font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.upd__meta { font-size: 0.875rem; color: var(--ink-2); }
.upd__event .btn { min-height: 2.75rem; padding: 0.5rem 1rem; font-size: 0.875rem; }
.upd__job { display: grid; gap: var(--s2); padding: var(--s4); background: var(--paper); border: var(--hair); }
.upd__settings { border-top: var(--rule); padding-top: var(--s4); }
.upd__settings summary { cursor: pointer; font-weight: 600; font-size: 1.25rem; min-height: 2.75rem; display: flex; align-items: center; }
.upd__settings .form { margin-top: var(--s5); padding-bottom: var(--s5); border-bottom: var(--hair); max-width: 36rem; }
.upd__connected { margin: 0 0 var(--s4); padding: 0.75rem 1rem; border-radius: var(--r-s); background: color-mix(in srgb, var(--ok) 10%, var(--paper)); color: var(--ok); font-weight: 600; }
.upd__steps { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--s2); }
.upd__grid { display: grid; gap: var(--s6); align-items: start; }
@media (min-width: 1100px) { .upd__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } .upd__side { position: sticky; top: calc(76px + 1rem); } }
.upd__form { max-width: 44rem; }
.upd__side { display: grid; gap: var(--s2); min-width: 0; }
.upd__frame { border: var(--rule); overflow: hidden; }
.upd__hero { pointer-events: none; transform-origin: 0 0; }
.upd__hero.hero { margin: 0; }
.upd__drop {
  display: grid;
  gap: var(--s1);
  place-items: center;
  text-align: center;
  min-height: 9rem;
  padding: var(--s5);
  border: 2px dashed var(--ink-3);
  background: var(--paper);
  cursor: pointer;
  transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.upd__drop b { font-size: 1.125rem; }
.upd__drop span { color: var(--ink-2); font-size: 0.9375rem; }
.upd__drop:hover, .upd__drop.is-over { border-color: var(--brand); background: var(--wall-2); }
#upd-poster:focus-visible + .field__hint, .upd__drop:focus-within { outline: 3px solid var(--brand); outline-offset: 3px; }
.upd__questions { display: grid; gap: var(--s3); }
.upd__q { display: grid; gap: var(--s2); padding: var(--s3); border: var(--hair); background: var(--paper); }
@media (min-width: 720px) { .upd__q { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: center; } .upd__q .input[id^="upd-qo"] { grid-column: 1 / -1; } }
.upd__colours summary { cursor: pointer; font-weight: 700; min-height: 2.75rem; display: flex; align-items: center; }
.upd__colours input[type="color"] { height: 3rem; padding: 0.25rem; }
.upd__actions { position: sticky; bottom: 0; background: var(--wall); padding: var(--s3) 0; border-top: var(--hair); flex-wrap: wrap; }
.upd__status { flex: 1 1 100%; order: -1; }
.upd__status:empty { display: none; }
.upd__status .notice { margin: 0; }

@media print {
  .site-header, .site-footer, .menu { display: none !important; }
  body { background: #fff; }
}

/* ---------- Small Groups: where someone already stands ---------- */
.dgstate { display: grid; gap: var(--s3); align-content: start; padding: clamp(1.5rem, 4vw, 2.25rem); border-radius: var(--r-l); background: var(--wall); }
.dgstate__title { margin: 0; font-weight: 600; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.12; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.dgstate__text { margin: 0; color: var(--ink-2); }
.dgstate__actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
@media (max-width: 479px) { .dgstate__actions .btn { flex: 1 1 100%; } }
.dgstate__other { margin: 0; padding-top: var(--s3); border-top: var(--hair); }

/* ---------- Backstage: in My profile, the profile panel and the phone menu ---------- */
.mp-team__tools { list-style: none; margin: 0; padding: 0; display: grid; border-top: var(--hair); }
.mp-team__tools a { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); min-height: 3rem; padding: var(--s2) 0; border-bottom: var(--hair); font-weight: 600; text-decoration: none; color: inherit; }
.mp-team__tools a:hover { color: var(--brand); }
.mp-team__tools svg { width: 1.125rem; height: 1.125rem; flex: none; }
.mp-addname__form { display: flex; flex-wrap: wrap; gap: var(--s2); }
.mp-addname__form .input { flex: 1 1 10rem; }
.me-card__tools { display: grid; border-bottom: var(--hair); }
.me-card__label { margin: 0; padding: var(--s3) 0 var(--s1); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.me-card__link--tool { min-height: 2.75rem; font-weight: 600; }
/* A logged-in DGroup member sees where they stand first, before "How it works". */
.dgstate { order: -1; }

/* Update page: the home banner photo choice. */
.upd__ready { display: flex; align-items: center; gap: var(--s4); padding: var(--s3); border: var(--rule); background: var(--paper); }
.upd__ready .check { flex: 1; }
.upd__ready-thumb { flex: none; width: 5.5rem; aspect-ratio: 4 / 3; object-fit: cover; background: var(--wall-2); }
.upd__banner-own { display: grid; gap: var(--s2); margin-top: var(--s3); }
.upd__own { display: flex; align-items: center; gap: var(--s3); margin: 0; }
.upd__own:empty { display: none; }

/* Story viewer: an event's poster as a slide (season circles on the home page),
   and an optional button under the story, like a link sticker. */
.lightbox.has-cta { grid-template-rows: auto minmax(0, 1fr) auto; }
.lightbox__frame { container-type: size; }
.lightbox__poster { position: absolute; inset: 0; display: grid; place-items: center; }
.lightbox__poster .poster { width: min(100cqw, 80cqh); }
.lightbox__poster .poster > img { opacity: 1; }
.lightbox__cta { display: flex; justify-content: center; padding: var(--s2) var(--s4) var(--s4); }
.lightbox__cta .btn { width: min(100%, 24rem); }


/* Add to calendar, stacked: the others as two buttons and the copy-the-link help
   on its own line (an event's link page). */
.cal--stack { gap: var(--s2); }
.cal--stack .cal__main { justify-self: stretch; min-width: 0; }
.cal__others { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--s2); }
.cal__alt {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 var(--s3);
  border: 1.5px solid var(--line);
  border-radius: var(--pill);
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9375rem;
  text-align: center;
  text-decoration: none;
  transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.cal__alt:hover { border-color: var(--ink); }
.cal__help { display: grid; gap: var(--s1); justify-items: start; margin-top: var(--s1); }
.cal__help .cal__copy { padding: 0 var(--s4); border-radius: var(--pill); background: var(--wall-2); text-decoration: none; }

/* ---------- An event's link page (wonder.html): B1G's logo in a circle, both
   registrations, then the other links. Warm white #F9F7F2, pill buttons. ---------- */
.evlink-body { background: var(--lp-page, #F9F7F2); color: var(--lp-text, var(--ink)); font-family: var(--lp-font, var(--font)); }
.evlink { width: 100%; max-width: 32rem; margin: 0 auto; padding: clamp(1.5rem, 7vw, 4.5rem) var(--gutter) var(--s7); display: grid; gap: var(--s4); font-stretch: 100%; }
.evlink__top { display: grid; justify-items: center; gap: var(--s2); text-align: center; }
.evlink__title { margin: var(--s2) 0 0; font-size: clamp(2.5rem, 5vw + 1.25rem, 3.75rem); line-height: 1; font-weight: 700; letter-spacing: -0.01em; }
.evlink__sub { margin: 0; font-size: 1.0625rem; line-height: 1.35; color: var(--lp-muted, var(--ink-2)); }
.evlink__register, .evlink__list { display: grid; gap: var(--s3); }
.evlink__list { list-style: none; margin: 0; padding: 0; }
.evlink__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 3.25rem; padding: var(--s2) var(--s5); border: 1.5px solid var(--lp-text, var(--ink)); border-radius: var(--lp-radius, 999px); background: transparent; color: var(--lp-text, var(--ink)); font: inherit; font-size: 1rem; font-weight: 600; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), transform 160ms var(--ease-out); }
.evlink__btn:hover { background: rgba(17, 17, 17, 0.05); }
.evlink__btn:active { transform: scale(0.98); }
.evlink__btn[aria-expanded="true"] { background: var(--lp-text, var(--ink)); color: var(--lp-page, #FFFFFF); }
.evlink__btn--solid { min-height: 3.75rem; border-color: var(--lp-btn, var(--brand)); background: var(--lp-btn, var(--brand)); color: var(--lp-btn-text, #FFFFFF); }
.evlink__btn--solid:hover { background: #470404; background: color-mix(in srgb, var(--lp-btn, var(--brand)) 82%, #000000); }
.evlink__btn--solid strong { font-size: 1rem; font-weight: 700; }
.evlink__btn--solid span { font-size: 0.8125rem; font-weight: 400; opacity: 0.85; }
.evlink__cal { margin-top: var(--s3); padding: var(--s4); border-radius: 1.25rem; background: #FFFFFF; color: var(--ink); }
.evlink__ask { margin-top: var(--s3); padding-top: var(--s5); border-top: 1px solid var(--lp-line, #DCDAD3); display: grid; gap: var(--s3); }
.evlink__ask h2 { margin: 0; font-size: 1.125rem; text-align: center; }
.evlink__foot { margin: var(--s2) 0 0; text-align: center; font-size: 0.8125rem; color: var(--lp-faint, var(--ink-3)); }
.evlink__foot a { display: inline-flex; align-items: center; min-height: 2.75rem; color: inherit; }
.evlink :focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .evlink__btn { transition: none; } .evlink__btn:active { transform: none; } }
.evlink h1, .evlink h2 { font-stretch: 100%; letter-spacing: -0.01em; text-transform: none; }
.cal__help .cal__note { text-wrap: balance; }
.evlink__hosts { display: flex; align-items: center; justify-content: center; gap: var(--s3); padding-top: var(--s2); }
.evlink__host { display: block; flex: none; width: 5rem; height: 5rem; border-radius: 50%; box-shadow: 0 10px 24px -14px rgba(17, 17, 17, 0.45); }
.evlink__with { width: 1.125rem; height: 1.125rem; flex: none; color: var(--lp-faint, var(--ink-3)); }
.evlink__host--elevate, .evlink__host--fill { display: flex; align-items: center; justify-content: center; background: #000000; overflow: hidden; }
.evlink__host--elevate img, .evlink__host--fill img { display: block; width: 72%; height: auto; }
.evlink__host--name b { font-size: 2rem; font-weight: 700; color: #FFFFFF; }
.evlink__facts { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; justify-items: center; gap: var(--s1); font-size: 0.9375rem; line-height: 1.4; color: var(--lp-muted, var(--ink-2)); }
.evlink__facts li { display: inline-flex; align-items: center; gap: var(--s2); }
.evlink__facts svg { width: 1rem; height: 1rem; flex: none; }
@media (min-width: 48rem) { .evlink__host { width: 6rem; height: 6rem; } }
.evlink__contacts { list-style: none; margin: 0; padding: 0; border-radius: 1.25rem; background: #FFFFFF; overflow: hidden; }
.evlink__contacts li + li { border-top: 1px solid #ECEAE4; }
.evlink__contacts a { display: flex; align-items: center; gap: var(--s3); min-height: 3.75rem; padding: var(--s3) var(--s4); color: var(--ink); text-decoration: none; transition: background-color 160ms var(--ease-out); }
.evlink__contacts a:hover { background: rgba(17, 17, 17, 0.04); }
.evlink__contacts a > svg { width: 1.375rem; height: 1.375rem; flex: none; }
.evlink__contacts a > svg.arrow { width: 1rem; height: 1rem; color: var(--ink-3); }
.evlink__contacts span { flex: 1; min-width: 0; display: grid; gap: 0.125rem; text-align: left; }
.evlink__contacts strong { font-size: 1rem; font-weight: 600; line-height: 1.3; }
.evlink__contacts small { font-size: 0.8125rem; line-height: 1.35; color: var(--ink-3); overflow-wrap: anywhere; }
.evlink__btn strong, .evlink__btn span, .evlink__sub, .evlink__facts li { text-wrap: balance; }

/* ---------- Sections changed or added in Backstage > Website editor (js/site-content.js) ---------- */
.cs { padding-block: clamp(3rem, 6vw, 5rem); }
.cs h2 { margin: 0 0 var(--s4); font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.375rem); line-height: 1.1; letter-spacing: -0.02em; }
.cs-bg-white { background: var(--paper); }
.cs-bg-sage { background: #E4ECE1; }
.cs-bg-maroon { background: var(--brand); color: #FFFFFF; }
.cs-bg-maroon :is(h1, h2, h3, p, a, cite, .lede, .steps__line, .steps__verb, .mv__label, .mv__text) { color: #FFFFFF; }
.cs-bg-maroon .btn { --btn-bg: #FFFFFF; --btn-fg: var(--brand); --btn-line: #FFFFFF; }
.cs-bg-maroon .btn--ghost { --btn-bg: transparent; --btn-fg: #FFFFFF; --btn-line: #FFFFFF; }
.cs-bg-maroon .steps, .cs-bg-maroon .steps li { border-color: rgba(255, 255, 255, 0.35); }
.cs-space-less { padding-block: clamp(1.5rem, 3vw, 2.5rem) !important; }
.cs-space-more { padding-block: clamp(4.5rem, 9vw, 8rem) !important; }
.cs-text { display: grid; justify-items: center; gap: var(--s4); max-width: calc(45rem + 2 * var(--gutter)); text-align: center; }
.cs-text h2 { margin: 0; }
.cs-text p { margin: 0; max-width: 40rem; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); line-height: 1.6; color: var(--ink-2); }
.cs-quote blockquote { margin: 0 auto; max-width: 44rem; text-align: center; }
.cs-quote p { margin: 0; font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; text-wrap: balance; }
.cs-quote cite { display: block; margin-top: var(--s3); font-style: normal; font-weight: 600; color: var(--ink-3); }
.cs-photos__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
@media (min-width: 640px) { .cs-photos__row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cs-photos figure { margin: 0; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: var(--wall-2); }
.cs-photos img { width: 100%; height: 100%; object-fit: cover; }
.cs-buttons { text-align: center; }
.cs-buttons__row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); }
.cs-faq { max-width: calc(48rem + 2 * var(--gutter)); }
/* The editor's preview: hover shows the sections, the picked one is outlined. */
.cs-editing #main > [data-section] { cursor: pointer; }
.cs-editing #main > [data-section]:hover { outline: 2px dashed rgba(93, 7, 7, 0.45); outline-offset: -2px; }
.cs-editing #main > [data-section].cs-selected { outline: 3px solid var(--brand); outline-offset: -3px; }

/* ---------- Short links (go.html): shown only while opening, or when a link is wrong ---------- */
.go-body { background: var(--wall); }
.go { display: grid; place-content: center; justify-items: center; gap: var(--s3); min-height: 100dvh; padding: var(--gutter); text-align: center; }
.go h1 { margin: 0; font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); }
.go p { margin: 0; color: var(--ink-2); }
.go__wait { color: var(--ink-3); }

/* ---------- Make a link (make-link.html), from the approved board ---------- */
.lm-form { display: grid; gap: var(--s5); align-content: start; padding: 1.25rem; border-radius: 22px; background: var(--paper); }
@media (min-width: 640px) { .lm-form { padding: 1.75rem; } }
.lm-form .lm-dest { background: var(--paper); }
.lm-form .lm-dest--url.is-on { background: var(--wall); }
.lm-dests { display: grid; gap: 0.625rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.lm-dests legend { margin-bottom: 0.5rem; }
.lm-dest { display: block; border: 1.5px solid var(--line); border-radius: 16px; background: var(--paper); transition: border-color 150ms var(--ease-out); }
.lm-dest > span, .lm-dest__head span { font-weight: 500; }
label.lm-dest, .lm-dest__head { display: flex; align-items: center; gap: 0.875rem; min-height: 3.25rem; padding: 0.5rem 1rem; cursor: pointer; }
.lm-dest input[type="radio"] { flex: none; width: 1.375rem; height: 1.375rem; margin: 0; accent-color: var(--ink); }
.lm-dest.is-on { border: 2px solid var(--ink); }
.lm-dest--url.is-on { background: var(--wall); }
.lm-dest.is-on > span, .lm-dest.is-on .lm-dest__head span { font-weight: 700; }
.lm-dest:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 2px; }
.lm-dest__more { display: grid; gap: 0.5rem; padding: 0 1rem 1rem; }
.lm-dest__more label { font-weight: 600; font-size: 0.9375rem; }
.linkmaker__out { justify-items: stretch; }
.linkmaker__url a { color: var(--brand); font-weight: 700; }
.lm-state { margin: 0; font-size: 0.9375rem; color: var(--ink-3); }
.lm-state.is-ok { color: var(--ok); font-weight: 600; }
.lm-state.is-warn { color: var(--error); font-weight: 600; }
.lm-qr { justify-self: center; padding: 1rem; border: 1px solid var(--line); border-radius: 18px; background: #FFFFFF; }
.lm-qr .linkmaker__qr { display: block; width: min(13rem, 60vw); border: 0; }
.btn.is-off, a.btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.lm-note { margin: 0; }