/* When the Waters Rise: what every page of the event site shares, on top of ../assets/styles.css (the hub's signage style).
   Term notes and the flood-history layout follow BahaWatch, so the two sites read the same. */

/* header: the event's mark, and the page links on their own row */
.brand__mark { width: 1.15em; height: 1.15em; flex: none; }

/* ---------- term notes (an underlined term opens a short note) ---------- */
.tt { display: inline; }
.tt-w { white-space: nowrap; }
.tt-b { position: relative; display: inline; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; text-align: inherit; line-height: inherit; }
.tt-b::after { content: ""; position: absolute; inset: -11px -2px; }
.tt-b:hover { text-decoration-thickness: 3px; }
.tt-b[aria-expanded="true"] { background: var(--sunk); box-shadow: 0 0 0 2px var(--sunk); border-radius: 2px; }
.tt-b:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.tt-p { position: fixed; z-index: 80; left: 0; top: 0; width: max-content; max-width: min(340px, calc(100vw - 32px)); padding: 12px 14px;
  background: var(--surface); color: var(--ink); border: 2px solid var(--ink); box-shadow: 4px 4px 0 0 var(--ink);
  font-size: var(--f1); font-weight: 400; font-style: normal; line-height: 1.45; text-align: left; white-space: normal; opacity: 0; transition: opacity 0.15s ease-out; }
.tt-p.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tt-p { transition: none; } }
#src-tip { position: fixed; z-index: 80; left: 0; top: 0; max-width: min(340px, calc(100vw - 32px)); padding: 8px 12px; background: var(--surface); color: var(--ink);
  border: 2px solid var(--ink); font-size: var(--f1); line-height: 1.4; pointer-events: none; }
#src-tip[hidden] { display: none; }
#src-tip b { display: block; font-size: 0.85em; color: var(--ink-2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- reading pages (flood history, questions, accessibility) ---------- */
.rd-head { padding: 40px 0 8px; }
.rd-head h1 { font-size: clamp(2rem, 6vw, 3rem); line-height: 1.1; margin: 4px 0 12px; }
.rd-lead { font-size: var(--f3); max-width: 42rem; }
.rd-body { display: grid; grid-template-columns: 1fr; gap: 24px; margin: 24px 0 48px; }
@media (min-width: 1000px) { .rd-body { grid-template-columns: 210px minmax(0, 1fr); gap: 48px; } }
.rd-rail { align-self: start; }
@media (min-width: 1000px) { .rd-rail { position: sticky; top: 16px; } }
.rd-rail p { font-weight: 700; font-size: var(--f1); margin: 0 0 6px; }
.rd-rail ul { list-style: none; margin: 0; padding: 0; }
.rd-rail a { display: flex; align-items: center; min-height: var(--tap); padding: 0 12px; border-left: 3px solid var(--rule); color: var(--ink-2); text-decoration: none; font-weight: 700; font-size: var(--f1); }
.rd-rail a:hover { color: var(--ink); border-left-color: var(--ink); }
.rd-main { min-width: 0; }
.rd-main > section { padding-bottom: 24px; border-bottom: 1px solid var(--rule); margin-bottom: 32px; }
.rd-main h2 { font-size: var(--f4); line-height: 1.2; margin: 0 0 12px; scroll-margin-top: 16px; }
.rd-main h2:focus { outline: none; }
.rd-main h3 { font-size: var(--f3); margin: 24px 0 8px; }
.rd-main p, .rd-main li, .rd-main dd { max-width: 42rem; }
.rd-tip { font-size: var(--f1); color: var(--ink-2); margin-top: 16px; max-width: 24ch; }
.rd-u { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* questions: each one a disclosure */
.qa { border-top: 2px solid var(--rule-strong); }
.qa details { border-bottom: 1px solid var(--rule); }
.qa summary { min-height: var(--tap); padding: 14px 0; font-weight: 700; font-size: var(--f3); cursor: pointer; display: list-item; }
.qa summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.qa .qa__a { padding: 0 0 18px; max-width: 42rem; }

/* ---------- "Made possible by": logo buttons, as on BahaWatch's home page ---------- */
.ev-logos { list-style: none; padding: 0; margin: 16px 0 8px; display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.ev-logos li { display: flex; }
.ev-logos li[hidden] { display: none; }
.ev-logos a { flex: 1; background: #fff; color: #1b1a17; border: 2px solid var(--rule-strong); box-shadow: var(--lift, 4px) var(--lift, 4px) 0 0 var(--rule-strong);
  padding: 16px 20px; display: flex; align-items: center; justify-content: center; min-height: 112px; text-decoration: none; transition: transform 0.08s; }
.ev-logos a:hover { transform: translate(-1px, -1px); }
.ev-logos a:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 0 var(--rule-strong); }
.ev-logos img { max-height: 64px; max-width: 100%; width: auto; height: auto; }
.ev-logos__wide { flex: 1 1 280px; }
/* Very wide wordmarks (about 6:1) need a wider card, or the type ends up too small to read. */
.ev-logos__xwide { flex: 1 1 440px; }
.ev-logos__xwide img { max-height: 72px; }
.ev-cohost[hidden] { display: none; }
.ev-logos__label { margin: 20px 0 0; font-weight: 700; font-size: var(--f1); color: var(--ink-2); }
.ev-logos__cohost { flex: 0 1 360px; }
.ev-logos__cohost img { max-height: 96px; }
.ev-cohost__note { margin: 4px 0 0; max-width: 40rem; }
.ev-logos__text { font-weight: 700; font-size: var(--f2); text-align: center; max-width: 16rem; }
/* A logo that is only a symbol carries its name beside it. */
.ev-logos__named { gap: 16px; }
.ev-logos__named span { font-weight: 700; font-size: var(--f2); }
@media (max-width: 600px) { .ev-logos { display: grid; grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ev-logos a { transition: none; } .ev-logos a:hover, .ev-logos a:active { transform: none; } }

/* ---------- flood history (from BahaWatch) ---------- */
:root { --fam-bar: #385F96; --miss-fig: #CF5921; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fam-bar: #9EB8DB; } }
:root[data-theme="dark"] { --fam-bar: #9EB8DB; }
.gl-warn { font-size: var(--f1); color: var(--ink-2); border-left: 4px solid var(--ink); padding-left: 12px; }
.gl-ev { margin: 0 0 40px; }
.rd-main .gl-ev h3 { font-size: var(--f4); line-height: 1.2; margin: 0 0 8px; }
.gl-yr { display: block; font-size: var(--f1); font-weight: 700; color: var(--ink-2); letter-spacing: 0.04em; }
.gl-fig { margin: 16px 0 28px; }
.gl-fig img { display: block; width: 100%; max-width: 720px; height: auto; border: 2px solid var(--rule-strong); background: var(--sunk); }
.gl-fig.gl-wide img { max-width: none; }
.gl-fig figcaption { max-width: 41rem; margin-top: 8px; }
.gl-cap { display: block; line-height: 1.45; }
.gl-credit { display: block; font-size: 0.8rem; color: var(--ink-2); margin-top: 4px; }
.gl-credit a { color: var(--ink-2); }
.gl-time { list-style: none; padding: 0; margin: 20px 0 24px 8px; border-left: 3px solid var(--ink); }
.gl-time li { position: relative; padding: 0 0 20px 22px; max-width: 41rem; }
.gl-time li::before { content: ""; position: absolute; left: -10px; top: 4px; width: 11px; height: 11px; background: var(--paper); border: 3px solid var(--ink); border-radius: 50%; }
.gl-time time { display: block; font-size: var(--f1); font-weight: 700; }
.gl-time p { margin: 4px 0 0; }
.gl-asof { font-weight: 700; }
.gl-viz { padding-bottom: 24px; border-bottom: 1px solid var(--rule); margin-bottom: 32px; }
.gl-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.gl-p-tot { font-size: var(--f3); line-height: 1.35; }
.gl-p-key { list-style: none; margin: 0 0 8px; padding: 0; font-size: var(--f1); color: var(--ink-2); }
.gl-p-key li { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.gl-p-key li > :first-child { width: 24px; display: inline-flex; justify-content: center; }
.gl-p-key svg { flex: none; }
.gl-p-list { list-style: none; margin: 16px 0; padding: 0; }
.gl-p-row { margin: 0 0 12px; padding: 10px 11px 12px; border: 1px solid var(--rule); background: var(--surface); font-size: var(--f1); line-height: 1.4; color: var(--ink); }
.gl-p-lab { font-weight: 700; }
.gl-viz .gl-yr { display: inline; margin-right: 4px; }
.gl-p-n { font-weight: 700; font-variant-numeric: tabular-nums; }
.gl-p-ppl { display: block; width: 100%; height: auto; margin: 2px 0; fill: var(--ink); }
.gl-p-full, .gl-p-pd { fill: var(--ink); }
.gl-p-miss, .gl-p-pm { fill: var(--miss-fig); }
.gl-p-fam { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.gl-p-barw { flex: none; display: inline-flex; width: 88px; }
.gl-p-bar { display: block; height: 10px; background: var(--fam-bar); }
.gl-p-barkey { width: 24px; }
.gl-p-barkey .gl-p-bar { width: 24px; }
.gl-p-note { font-size: var(--f1); color: var(--ink-2); }
.gl-figs { display: grid; gap: 24px; }
.gl-figs .gl-fig { margin: 0; }
@media (min-width: 1200px) {
  .gl-ev, .gl-split { display: grid; grid-template-columns: minmax(280px, 24rem) minmax(0, 1fr); column-gap: 40px; align-items: start; }
  .gl-ev.gl-solo { display: block; }
  .gl-pol { grid-template-columns: minmax(0, 34rem) minmax(300px, 1fr); }
  .gl-figs { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .gl-figs .gl-fig.gl-wide { grid-column: 1 / -1; }
  .gl-sticky { position: sticky; top: 16px; }
}

/* Support page: what is covered, applied for and still needed. Each status has a shape and a word, not just a colour. */
.sp-need { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 12px; max-width: var(--read); }
.sp-need__item { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; border: 2px solid var(--rule-strong); padding: 14px 16px; background: var(--surface, var(--paper)); }
.sp-need__item b { display: block; }
.sp-need__what { display: block; margin-top: 2px; }
.sp-mark { width: 22px; height: 22px; margin-top: 2px; display: inline-block; box-sizing: border-box; }
.is-open .sp-mark { border: 4px solid #CF5921; border-radius: 50%; }                                  /* ring: still needed */
.is-pending .sp-mark { border: 3px solid var(--ink); border-radius: 50%; background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); }  /* half: applied for */
.is-done .sp-mark { background: #385F96; border: 3px solid var(--ink); }                             /* filled square: covered */
.sp-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 16px; }
.sp-way { border: 2px solid var(--rule-strong); padding: 18px; box-shadow: 4px 4px 0 0 var(--rule-strong); background: var(--surface, var(--paper)); }
.sp-way h3 { font-size: var(--f3); margin: 0 0 8px; }
.sp-way p + p { margin-top: 10px; }
.sp-way__get { color: var(--ink-2); }

/* Share dialog (as on gregor-posadas.github.io) */
.sh { border: 2px solid var(--rule-strong); background: var(--surface); color: var(--ink); padding: 24px; width: min(680px, calc(100vw - 32px)); max-height: calc(100vh - 32px); box-shadow: 8px 8px 0 0 var(--rule-strong); }
.sh::backdrop { background: rgba(0, 0, 0, 0.6); }
.sh h2 { font-size: var(--f3); margin: 0 0 14px; }
.sh__body { display: grid; grid-template-columns: 216px 1fr; gap: 20px; align-items: start; }
.sh__img { display: block; width: 216px; height: auto; border: 2px solid var(--rule-strong); }
.sh__label { display: block; font-size: var(--f1); font-weight: 700; margin: 0 0 6px; }
.sh__on { margin-top: 18px; }
.sh__url { width: 100%; min-height: var(--tap); padding: 0 12px; border: 2px solid var(--rule-strong); background: var(--paper); color: var(--ink); font: inherit; font-size: var(--f1); box-sizing: border-box; }
.sh__actions { margin-top: 14px; }
.sh__actions [hidden], .sh__nets [hidden] { display: none; }
.sh__status { margin-top: 10px; font-size: var(--f1); color: var(--ink-2); min-height: 1.5em; overflow-wrap: anywhere; }
.sh__note { margin-top: 6px; font-size: var(--f1); color: var(--ink-2); }
.sh__end { margin-top: 10px; }
@media (max-width: 599px) { .sh__body { grid-template-columns: 1fr; } .sh__img { width: 120px; } .sh__actions .btn { flex: 1 1 100%; justify-content: center; } }
@media print { .sh, #share-btn { display: none !important; } }

/* Icons beside button labels */
.ico { width: 20px; height: 20px; flex: none; display: inline-block; }
.tool .ico { width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; }
.sh__post { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 2px solid var(--rule-strong); background: var(--paper); color: var(--ink); font: inherit; font-size: var(--f1); line-height: 1.45; resize: vertical; }

/* Language switch: a small tool in the header rather than a tab */
.tool--lang { gap: 8px; }
.tool--lang .ico { width: 18px; height: 18px; }
.sp-gauge { margin: 12px 0 8px; max-width: var(--read); }
.sp-h3 { font-size: var(--f3); margin: 24px 0 0; }

/* "Email address copied!" box, in the middle of the screen */
.mailbox { position: fixed; z-index: 60; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); border: 3px solid var(--rule-strong); box-shadow: 8px 8px 0 0 var(--rule-strong); padding: 20px 22px; text-align: center; }
.mailbox[hidden] { display: none; }
.mailbox__msg { margin: 0; font-size: var(--f3); line-height: 1.3; }
.mailbox__msg .ico { display: inline-block; vertical-align: -3px; margin-right: 8px; }
.mailbox__addr { margin: 8px 0 0; font-weight: 700; overflow-wrap: anywhere; }
.mailbox__acts { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
@media (prefers-reduced-motion: no-preference) { .mailbox:not([hidden]) { animation: mailbox-in 0.18s ease-out; } }
@keyframes mailbox-in { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } }

/* The RSVP tab is boxed so it reads as the thing to do; filled when you're on it */
/* RSVP in the menu is a filled button on every page, so it reads as the thing to do rather than one more tab. */
.nav a.nav__rsvp { background: #385F96; color: #fff; box-shadow: 0 0 0 2px var(--band-ink); padding-left: 18px; padding-right: 18px; font-weight: 700; margin: 6px 4px; min-height: calc(var(--tap) - 12px); border-bottom: 0; }
.nav a.nav__rsvp:hover { background: #2C4B77; box-shadow: 0 0 0 3px var(--band-ink); }
.nav a.nav__rsvp[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 3px; }

/* RSVP page: the embedded Google Form */
.rv-frame { margin-top: 12px; border: 2px solid var(--ink); background: #fff; max-width: 760px; }
.rv-frame iframe { display: block; width: 100%; height: 1500px; border: 0; }
@media (max-width: 600px) { .rv-frame iframe { height: 1800px; } }
.rv-form { margin-top: 36px; }
.rv-ask li + li { margin-top: 6px; }

/* In-person seats: a quiet line until seats run low, then bold; when full, a heavier bar and the word "Full" */
.ev-seats { margin-top: 12px; max-width: 38rem; padding-left: 12px; border-left: 4px solid var(--rule-strong); font-size: var(--f1); color: var(--ink-2); }
.ev-seats.is-few { color: var(--ink); }
.ev-seats.is-full { color: var(--ink); border-left-width: 8px; }
.ev-seats[hidden] { display: none; }
.ev-seats--lecture { margin-top: 16px; }

/* Directions: photos of Banatao Auditorium */
.ev-room__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 12px; }
@media (max-width: 760px) { .ev-room__grid { grid-template-columns: 1fr; } }
.ev-room__fig { margin: 0; }
.ev-room__fig a { display: block; border: 2px solid var(--rule-strong); background: var(--sunk); aspect-ratio: 3 / 2; overflow: hidden; }
.ev-room__fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ev-room__fig figcaption { font-size: var(--f1); color: var(--ink-2); margin-top: 6px; }
.ev-room { margin-top: 40px; }
.ev-logos__sq img { max-height: 84px; }
/* Logos printed on their own solid block of colour (Goldman) read small at the usual height, so they get more room. */
.ev-logos__block img { max-height: 84px; }
/* The seats bar: a compact version of the funding gauge */
.ev-seats__g { margin: 10px 0 0; }
.ev-seats__g .gauge__nums { gap: 2px 20px; margin-bottom: 6px; color: var(--ink); }
.ev-seats__g .gauge__nums b { font-size: var(--f3); }
.ev-seats__g .gauge__bar { height: 20px; }
.ev-seats__g .gauge__key { margin-top: 6px; color: var(--ink-2); }
.ev-seats__g .gauge__key i { width: 14px; height: 14px; }

/* The RSVP buttons: big and blue (#385F96, white text at 6.5:1), so they are the first thing to find on any screen size. */
.btn.btn--rsvp { background: #385F96; border-color: #385F96; color: #fff; min-height: 64px; padding: 0 48px; font-size: calc(var(--f3) * 1.25); box-shadow: var(--lift) var(--lift) 0 0 var(--ink); }
.btn.btn--rsvp:hover { background: #2C4B77; border-color: #2C4B77; color: #fff; }
.btn.btn--rsvp:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.btn.btn--rsvp:active, .btn.btn--rsvp.is-pressed { box-shadow: 0 0 0 0 var(--ink); }
.ev-hero-cta .btn.btn--rsvp { min-width: 260px; min-height: 72px; font-size: calc(var(--f3) * 1.45); }
/* Ask the speakers: outlined in the light blue, one step below the filled RSVP tab. */
.nav a.nav__ask { box-shadow: inset 0 0 0 2px #9EB8DB; color: var(--band-ink); padding-left: 16px; padding-right: 16px; font-weight: 700; margin: 6px 4px; min-height: calc(var(--tap) - 12px); border-bottom: 0; }
.nav a.nav__ask:hover { background: rgba(158, 184, 219, .18); }
.nav a.nav__ask[aria-current="page"] { background: rgba(158, 184, 219, .22); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 3px; }
.rv-frame--story iframe { height: 1100px; }
@media (max-width: 600px) { .rv-frame--story iframe { height: 1300px; } }
/* Share your story: bold on a light-blue tint, a step below Ask the speakers' outline. */
.nav a.nav__story { background: rgba(158, 184, 219, .24); color: var(--band-ink); padding-left: 14px; padding-right: 14px; font-weight: 700; margin: 6px 4px; min-height: calc(var(--tap) - 12px); border-bottom: 0; }
.nav a.nav__story:hover { background: rgba(158, 184, 219, .36); }
.nav a.nav__donate { box-shadow: inset 0 0 0 2px #E7B800; color: var(--band-ink); padding-left: 14px; padding-right: 14px; font-weight: 700; margin: 6px 4px; min-height: calc(var(--tap) - 12px); border-bottom: 0; }
.nav a.nav__donate:hover { background: rgba(231, 184, 0, .16); }
.nav a.nav__donate[aria-current="page"] { background: rgba(231, 184, 0, .2); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 3px; }
.nav a.nav__story[aria-current="page"] { background: rgba(158, 184, 219, .36); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 3px; }

/* ---------- Phones (Oct 14 mobile review) ---------- */
/* Header: the name and Share on one row, the menu on one scrollable row under them, so the page starts sooner.
   The right edge fades to show there is more to scroll. */
@media (max-width: 719px) {
  .ev-page .band__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 8px; padding: 12px 16px 8px; }
  .ev-page .band__inner > .brand { grid-column: 1; grid-row: 1; min-width: 0; }
  .ev-page .band__tools { grid-column: 2; grid-row: 1; align-self: start; }
  .ev-page .nav { grid-column: 1 / -1; grid-row: 2; flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin: 0 -16px; padding: 0 48px 2px 16px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
  .ev-page .nav::-webkit-scrollbar { display: none; }
  .ev-page .nav a { flex: 0 0 auto; white-space: nowrap; }
  .ev-page .brand__sub { display: none; }   /* the tagline is on the page itself */
  .ev-page .band__tools .tool { padding: 0 12px; min-width: var(--tap); justify-content: center; }
  /* Share shrinks to its icon (the word stays for screen readers). */
  .ev-page #share-btn .tool__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ev-page #share-btn .ico { margin-right: 0; }
  .ev-page .brand__name { font-size: calc(var(--f3) * .9); white-space: nowrap; }
  .ev-page .brand__mark { width: 24px; height: 24px; }
  .ev-page .nav a.nav__rsvp, .ev-page .nav a.nav__ask, .ev-page .nav a.nav__story, .ev-page .nav a.nav__donate { margin: 4px 2px; }
}

/* Speakers: a small square photo beside the name instead of a full-width face, which was blown up and cropped.
   (.ev-speakers in front to win over event.css, which loads after this file.) */
@media (max-width: 759px) {
  .ev-speakers .ev-speaker { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; padding: 16px 16px 18px; align-content: start; }
  .ev-speakers .ev-speaker > * { grid-column: 1 / -1; }
  .ev-speakers .ev-speaker > :not(.ev-speaker__photo) { margin-left: 0; margin-right: 0; }
  .ev-speakers .ev-speaker__photo { grid-column: 1; grid-row: 1 / span 2; width: 96px; height: 96px; aspect-ratio: auto; max-height: none; border: 2px solid var(--rule-strong); align-self: start; }
  .ev-speakers .ev-speaker__photo img { object-position: center 25%; }
  .ev-speakers .ev-speaker__photo.is-missing::after { font-size: 1.6rem; }
  .ev-speakers .ev-speaker h3 { grid-column: 2; grid-row: 1; margin: 0 0 4px; align-self: end; }
  .ev-speakers .ev-speaker .ev-speaker__role { grid-column: 2; grid-row: 2; align-self: start; }
}

/* Supporter logos: two to a row on phones; the co-host and the logos with names keep a full row. */
@media (max-width: 600px) {
  .ev-logos { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ev-logos > li.ev-logos__cohost, .ev-logos > li.ev-logos__xwide, .ev-logos > li:has(.ev-logos__named) { grid-column: 1 / -1; }
  .ev-logos a { min-height: 88px; padding: 12px; }
  .ev-logos img { max-height: 52px; }
  .ev-logos__block img { max-height: 64px; }
}

/* Buttons in the page body: full width and centred on phones, so labels don't wrap mid-phrase and the taps are easy. */
@media (max-width: 519px) {
  main .actions { flex-direction: column; align-items: stretch; }
  main .actions > .btn, main .actions > details, main .actions > details > summary.btn { width: 100%; box-sizing: border-box; justify-content: center; text-align: center; }
  .ev-hero-cta .btn.btn--rsvp { min-width: 0; }
  main .btn.btn--rsvp { padding: 0 20px; }
  .rd-head .btn.btn--rsvp { font-size: var(--f3); }   /* "Open the RSVP form" fits on one line */
  .ev-hero-cta__note { text-align: center; }
}
/* About: the flood history's own headings sit under "Flood history", so they're a step smaller there. */
#history .rd-main h2 { font-size: var(--f3); }

/* Bayanihan fundraiser: donate QR beside the button */
.ev-give { display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: center; margin-top: 16px; }
.ev-give img { width: 150px; height: 150px; border: 4px solid #1b1a17; background: #fff; flex: none; }
.ev-give p { margin: 0 0 12px; }

.ev-give--big img { width: 220px; height: 220px; }