/* When the Waters Rise: event page. Builds on ../assets/styles.css (the hub's signage style). */
:root {
  --land: #e2dac8; --land-home: #cdc2aa; --land-edge: var(--paper);
  --arc: #CF5921; --glow: #b58f00; --focus-edge: #800000;
  /* Flood depth: blues that get stronger with depth (darker on light paper, brighter on black); checked with tools/cvd_check.py */
  --hz1: #9EB8DB; --hz2: #5A7FB5; --hz3: #233F78;
  --bld: #D8D0C0; --bld-edge: #2A2622; --road: #fff; --road-edge: #B9B09F;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --land: #262626; --land-home: #3b3b3b; --land-edge: #000;
  --arc: #e8743f; --glow: #E7B800; --focus-edge: #E7B800;
  --hz1: #2A4F86; --hz2: #4677B8; --hz3: #8DB2E3;
  --bld: #3A3A3A; --bld-edge: #E6DFD2; --road: #707070; --road-edge: #141414;
} }
:root[data-theme="dark"] {
  --land: #262626; --land-home: #3b3b3b; --land-edge: #000;
  --arc: #e8743f; --glow: #E7B800; --focus-edge: #E7B800;
  --hz1: #2A4F86; --hz2: #4677B8; --hz3: #8DB2E3;
  --bld: #3A3A3A; --bld-edge: #E6DFD2; --road: #707070; --road-edge: #141414;
}

/* Hero */
.ev-hero { padding: 40px 0 32px; }
.ev-kicker { font-weight: 700; color: var(--ink-2); }
.ev-hero h1 { font-size: clamp(2.2rem, 7vw, 3.6rem); line-height: 1.05; margin: 6px 0 14px; letter-spacing: -0.01em; }
.ev-lede { font-size: var(--f3); max-width: 38rem; }
/* The day: every session of the visit, in order, with the room each one has. Replaces the single-event facts box. */
.ev-day { margin: 28px 0 8px; max-width: 60rem; border: 2px solid var(--rule-strong); }
.ev-day__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; padding: 12px 18px; border-bottom: 2px solid var(--rule-strong); }
.ev-day__head h2 { font-size: var(--f2); margin: 0; }
.ev-day__head p { margin: 0; font-size: var(--f1); color: var(--ink-2); }
.ev-day__list { list-style: none; margin: 0; padding: 0; }
.ev-slot { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 11rem; gap: 4px 20px; padding: 14px 18px; border-bottom: 1px solid var(--rule); }
.ev-slot > * { margin: 0; min-width: 0; }
.ev-slot__time { font-weight: 700; }
.ev-slot__what h3 { font-size: var(--f2); margin: 0 0 2px; }
.ev-slot__what p { margin: 0; font-size: var(--f1); color: var(--ink-2); }
.ev-slot__room { font-size: var(--f1); color: var(--ink-2); }
.ev-slot__room b { color: var(--ink); font-size: var(--f2); }
.ev-slot.is-main { box-shadow: inset 6px 0 0 var(--rule-strong); }
.ev-slot__tag { display: inline-block; margin-left: 6px; padding: 0 8px; border: 2px solid var(--rule-strong); font-size: var(--f1); font-weight: 700; vertical-align: 2px; }
.ev-day__later { margin: 0; padding: 12px 18px; font-size: var(--f1); color: var(--ink-2); }
.ev-day__later b { color: var(--ink); }
@media (max-width: 719px) {
  .ev-slot { grid-template-columns: 1fr; gap: 2px; }
  .ev-slot__room { margin-top: 6px; }
  .ev-slot__room br { display: none; }
  .ev-slot__room b::after { content: " · "; font-weight: 400; color: var(--ink-2); }
}
.ev-actions { margin-top: 20px; }
.ev-cal__group { margin: 4px 0 2px; font-size: var(--f1); font-weight: 700; color: var(--ink-2); }
.ev-cal__group:not(:first-child) { margin-top: 12px; }
.btn--big { min-height: 56px; padding: 0 32px; font-size: var(--f3); }
.ev-welcome { margin-top: 14px; max-width: 38rem; color: var(--ink-2); }
/* A big RSVP button right under the intro, so no one has to scroll past the schedule to find it. */
.ev-hero-cta { margin: 4px 0 20px; align-items: center; }
.ev-hero-cta__note { margin: 0; font-weight: 700; color: var(--ink-2); }
.ev-cohost-hero { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 18px 0 0; font-weight: 700; color: var(--ink-2); }
.ev-cohost-hero[hidden] { display: none; }
.ev-cohost-hero a { display: inline-flex; background: #fff; border: 2px solid var(--rule-strong); padding: 6px 12px; }
.ev-cohost-hero img { height: 40px; width: auto; display: block; }

/* Map */
.ev-summary { margin: 14px 0 12px; max-width: 46rem; font-size: var(--f2); }
.ev-map { margin: 0; border: 2px solid var(--rule-strong); background: var(--surface); }
.ev-map__svg svg { display: block; width: 100%; height: auto; }
.ev-key { display: flex; flex-wrap: wrap; gap: 6px 24px; padding: 10px 16px; border-top: 1px solid var(--rule); font-size: var(--f1); color: var(--ink-2); }
.ev-key .k { display: inline-flex; align-items: center; gap: 8px; }
.ev-key svg { fill: var(--ink); }
.k-arc { display: inline-block; width: 26px; height: 0; border-top: 3px solid var(--arc); }
.k--sample { font-weight: 700; color: var(--ink); border: 2px solid var(--ink); padding: 0 8px; }
.ev-table { margin-top: 8px; }
.ev-tables { display: grid; gap: 8px 40px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .ev-tables { grid-template-columns: 1fr 1fr; } }
.ev-tbl tr { display: table-row !important; }
.ev-tbl td, .ev-tbl th { display: table-cell !important; padding: 6px 8px !important; border-bottom: 1px solid var(--rule) !important; }
.ev-tbl thead { display: table-header-group !important; }

.m .m-label { font-size: 20px; font-weight: 700; fill: var(--ink); }
.m .m-ocean { font-size: 18px; font-style: italic; fill: var(--ink-2); letter-spacing: 0.2em; }
.m .m-small, .m .m-more { font-size: 13px; fill: var(--ink-2); }
.m--v .m-label { font-size: 24px; } .m--v .m-ocean { font-size: 20px; }
.m-prov, .m-county { fill: var(--land); stroke: var(--land-edge); stroke-width: 0.8; transition: fill 0.4s, opacity 0.6s; }
.m-prov.is-home, .m-county.is-home { fill: var(--land-home); }
/* Flood hazard images: the light or dark one to match the theme */
.m-hazard image { pointer-events: none; }
.m-haz--dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .m-haz--light { display: none; } :root:not([data-theme="light"]) .m-haz--dark { display: inline; } }
:root[data-theme="dark"] .m-haz--light { display: none; }
:root[data-theme="dark"] .m-haz--dark { display: inline; }
.m-prov, .m-county { vector-effect: non-scaling-stroke; }
.m-arc { fill: none; stroke: var(--arc); stroke-linecap: round; opacity: 0.8; }
.m-gate { fill: var(--arc); }
/* A paper-coloured outline keeps each figure readable on any shade */
.m-people use { fill: var(--ink); stroke: var(--paper); stroke-width: 1.6px; paint-order: stroke; stroke-linejoin: round; }
.k-title { flex-basis: 100%; font-weight: 700; color: var(--ink); }
.k-scale { display: flex; flex-wrap: wrap; gap: 6px 16px; flex-basis: 100%; }
.sw { display: inline-block; width: 18px; height: 14px; border: 1px solid var(--ink-2); }
.sw--hz1 { background: var(--hz1); } .sw--hz2 { background: var(--hz2); } .sw--hz3 { background: var(--hz3); }
/* Buildings and streets as drawn in the town closeups (tools/flood_maps/render_closeups.py, light and THEME=dark) */
.sw--bld { background: var(--bld); border: 2px solid var(--bld-edge); }
.sw--road { background: var(--road); border: 2px solid var(--road-edge); height: 10px; }

/* Presentation: one step at a time, on a dark screen */
body.is-presenting > .band, body.is-presenting > main, body.is-presenting > .foot, body.is-presenting > .notice { display: none; }
.ev-present[hidden] { display: none; }
.ev-present { position: fixed; inset: 0; z-index: 40; background: var(--paper); color: var(--ink); display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 0 3vw; padding: 3vh 3vw; }
.ev-present__map { grid-row: 1 / 3; display: flex; align-items: center; min-height: 0; }
.ev-present__map svg { width: 100%; height: auto; max-height: 94vh; }
.ev-present__text { align-self: center; }
.ev-present__caption { font-size: clamp(1.6rem, 2.9vw, 3rem); font-weight: 700; line-height: 1.2; }
.ev-present__caption.is-story { font-weight: 400; font-size: clamp(1.4rem, 2.4vw, 2.4rem); }
.ev-present__step { order: 2; margin-top: 18px; font-size: clamp(1rem, 1.5vw, 1.5rem); color: var(--ink-2); }
.ev-present__text { display: flex; flex-direction: column; }
.ev-present__caption { order: 1; }
.ev-present__controls { display: flex; gap: 12px; flex-wrap: wrap; align-self: end; }
/* The loop (?loop): no buttons or pointer on the screen. */
body.is-looping .ev-present__controls { display: none; }
.ev-present__legend[hidden] { display: none; }
body.is-looping .ev-present__photo img { max-height: 20vh; }
/* On a screen or window shorter than 16:9, the words shrink with the height too, so they always fit. */
body.is-looping .ev-present__caption { font-size: clamp(1.4rem, min(2.9vw, 4.6vh), 3rem); }
body.is-looping .ev-present__caption.is-story { font-size: clamp(1.2rem, min(2.4vw, 3.9vh), 2.4rem); }
body.is-looping .ev-present__text.has-photo .ev-present__caption { font-size: clamp(1.2rem, min(2.3vw, 3.7vh), 2.4rem); }
body.is-looping .ev-present__step { font-size: clamp(0.95rem, min(1.5vw, 2.4vh), 1.5rem); }
html.is-title body.is-looping .ev-present__caption { font-size: clamp(2rem, min(5vw, 8vh), 4.6rem); }
/* Provinces with no closeup map yet keep the country-wide flood layer on while zoomed in. */
.ev-present .is-zoomed.keep-haz .m-haz { opacity: 1; visibility: visible; }
.ev-present__sample { position: fixed; top: 16px; left: 24px; z-index: 3; background: var(--paper); border: 2px solid var(--ink); padding: 2px 10px; font-weight: 700; }
html.is-title .ev-present__caption { font-size: clamp(2.4rem, 5vw, 4.6rem); }
@media (max-width: 800px) { .ev-present { grid-template-columns: 1fr; grid-template-rows: auto auto auto; overflow: auto; } .ev-present__map { grid-row: auto; } }

.ev-present .m-people--bay, .ev-present .m-people--ph { opacity: 0; transition: opacity 0.9s ease-out; }
.ev-present .m-arc { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s ease-in-out, stroke 0.8s, opacity 0.6s; }
.ev-present .show-bay .m-people--bay { opacity: 1; }
.ev-present .show-arcs .m-arc { stroke-dashoffset: 0; }
.ev-present .show-ph .m-people--ph { opacity: 1; transition-delay: 1.8s; }
/* In the reveal the flood map fades in on its step; province maps and town closeups fade in when the camera arrives */
.ev-present .m-haz { opacity: 0; visibility: hidden; transition: opacity 1.2s ease-in, visibility 0s linear 1.2s; }
.ev-present .show-water:not(.is-zoomed) .m-haz { visibility: visible; transition: opacity 1.6s ease-in, visibility 0s; }
/* Province and town images fade out quickly and then drop out of drawing altogether, so the camera isn't dragging huge hidden images along */
.ev-present .m-hazp, .ev-present .m-town { opacity: 0; visibility: hidden; transition: opacity 0.5s ease-out, visibility 0s linear 0.5s; }
.ev-present .show-water .m-hazp.is-on, .ev-present .m-town.is-on { visibility: visible; transition: opacity 1.6s ease-in, visibility 0s; }
.ev-present .show-water .m-haz { opacity: 1; }
.ev-present .is-zoomed .m-haz { opacity: 0; }
.ev-present__text.has-photo .ev-present__caption { font-size: clamp(1.4rem, 2.3vw, 2.4rem); }
.ev-present .show-water .m-hazp.is-on { opacity: 1; transition-delay: 0.6s; }
.ev-present .m-town.is-on { opacity: 1; transition-delay: 1.2s; }
.ev-present .has-focus .m-prov:not(.is-focus) { opacity: 0.35; }
/* zoomed in: people, lines and labels step aside so the land and the water speak */
.ev-present .m-people, .ev-present .m-label, .ev-present .m-ocean, .ev-present .m-small, .ev-present .m-gate { transition: opacity 0.6s; }
.ev-present .is-zoomed .m-people, .ev-present .is-zoomed .m-arc, .ev-present .is-zoomed .m-label, .ev-present .is-zoomed .m-ocean, .ev-present .is-zoomed .m-small, .ev-present .is-zoomed .m-gate, .ev-present .is-zoomed .m-more { opacity: 0 !important; transition-delay: 0s; }
.ev-present .is-zoomed.has-focus .m-prov:not(.is-focus) { opacity: 1; }
.ev-present .is-town .m-prov { stroke: none; }
.ev-place { position: absolute; left: 3vw; bottom: 3vh; margin: 0; display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: clamp(1rem, 1.4vw, 1.4rem); color: var(--ink); background: var(--paper); border: 2px solid var(--rule-strong); padding: 10px 14px; z-index: 2; }
.ev-place__bar { display: inline-flex; align-items: center; gap: 10px; font-weight: 400; font-size: 0.85em; }
.ev-place__bar i { display: inline-block; height: 8px; border: 2px solid var(--ink); border-top: 0; }
.ev-present__photo { order: 0; margin: 0 0 18px; }
.ev-present__photo img { display: block; width: 100%; max-height: 28vh; object-fit: cover; border: 2px solid var(--rule-strong); }
.ev-present__photo figcaption { margin-top: 6px; font-size: clamp(0.8rem, 0.95vw, 1rem); color: var(--ink-2); }
.ev-present__legend { order: 3; margin-top: 22px; padding: 0; border: 0; font-size: clamp(0.9rem, 1.1vw, 1.1rem); }
.ev-present .has-focus .m-arc:not(.is-focus) { opacity: 0.2; }
.ev-present .has-focus .m-people--ph:not(.is-focus) { opacity: 0.45; }
.ev-present .m-prov.is-focus { stroke: var(--focus-edge); stroke-width: 2.5; }
.ev-present .show-glow .m-arc { stroke: var(--glow); opacity: 1; }
.ev-present .show-water .m-arc { opacity: 0.4; }
.ev-present .show-water.has-focus .m-arc.is-focus { opacity: 1; }
.ev-present .m .m-label { font-size: 22px; }
@media (prefers-reduced-motion: reduce) {
  .ev-present .m-people--bay, .ev-present .m-people--ph, .ev-present .m-arc, .m-prov, .ev-present .m-prov, .ev-present .m-haz, .ev-present .m-hazp, .ev-present .m-town { transition: none !important; }
}

.ev-speakers { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .ev-speakers { grid-template-columns: repeat(3, 1fr); } }
.ev-speaker { border: 2px solid var(--rule-strong); padding: 0 0 18px; background: var(--surface); display: flex; flex-direction: column; }
.ev-speaker > :not(.ev-speaker__photo) { margin-left: 20px; margin-right: 20px; }
.ev-speaker h3 { font-size: var(--f3); margin: 16px 20px 4px; }
.ev-speaker__photo { position: relative; aspect-ratio: 1 / 1; max-height: 340px; background: var(--sunk); border-bottom: 2px solid var(--rule-strong); overflow: hidden; }
.ev-speaker__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
/* The photo links to the speaker's university profile. */
.ev-speaker__photo > a { display: block; width: 100%; height: 100%; }
.ev-speaker__photo > a:focus-visible { outline: 3px solid var(--focus, #385F96); outline-offset: -3px; }
.ev-speaker__photo > a img { transition: transform .2s ease; }
.ev-speaker__photo > a:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .ev-speaker__photo > a img { transition: none; } .ev-speaker__photo > a:hover img { transform: none; } }
.ev-speaker__photo.is-missing img { display: none; }
.ev-speaker__photo.is-missing::after { content: attr(data-initials); position: absolute; inset: 0; display: grid; place-items: center; font-size: 3rem; font-weight: 700; color: var(--ink-2); }
.ev-speaker__role { font-weight: 700; color: var(--ink-2); font-size: var(--f1); margin-bottom: 10px; }
.ev-speaker p { margin-bottom: 10px; }
.ev-speaker__more { font-weight: 700; margin: 6px 0 4px; }
.ev-speaker__links { margin-top: 0; padding-left: 1.2em; font-size: var(--f1); }
.ev-speaker__links li { margin-bottom: 6px; }
.ev-speaker cite { font-style: italic; }

.ev-speaker__email { font-size: var(--f1); margin: 0 0 10px; overflow-wrap: anywhere; }
.ev-h3 { font-size: var(--f3); margin: 20px 0 8px; }
.ev-sources a { overflow-wrap: anywhere; }
.ev-subtitle { font-size: var(--f3); font-weight: 700; color: var(--ink-2); margin: -6px 0 14px; }
.ev-place[hidden] { display: none; }

/* Why this conversation */
.ev-why__body { max-width: var(--read); }
.ev-why__body p { margin: 12px 0 0; }
.ev-why__lead { font-size: var(--f3); }
.ev-why__fields { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 12px; }
.ev-why__fields li { border-left: 4px solid var(--rule-strong); padding: 4px 0 4px 14px; }

/* Presentation layers: province and town images in HTML over the map SVG, outlines on top (see rasterLayer in event.js) */
.ev-present__map { position: relative; }
.m-raster { position: absolute; overflow: hidden; pointer-events: none; contain: strict; }
.m-raster img { position: absolute; display: block; max-width: none; max-height: none; user-select: none; }
.ev-present__map .m-top { position: absolute; pointer-events: none; max-height: none; overflow: hidden; }
.m-edge { fill: none; stroke: none; vector-effect: non-scaling-stroke; }
.ev-present .is-zoomed:not(.is-town) .m-edge.is-focus { stroke: var(--focus-edge); stroke-width: 2.5; }
.ev-present .is-flying .m-top .m-people, .ev-present .is-flying .m-top .m-arcs, .ev-present .is-flying .m-top text { opacity: 0 !important; transition: opacity 0.25s; }
/* Nov 6: nothing pops in. After a zoom flight the people and labels fade back in, and the lines draw themselves
   again from the Bay Area instead of appearing all at once (e.g. the "These lines carry worry" step after Ormoc). */
.ev-present .m-top .m-people, .ev-present .m-top .m-arcs, .ev-present .m-top text { transition: opacity 0.8s ease-out; }
.ev-present .is-flying .m-arc { stroke-dashoffset: 1 !important; transition: none !important; }
.ev-place { animation: ev-fade-in 0.6s ease-out; }
@keyframes ev-fade-in { from { opacity: 0; } to { opacity: 1; } }
.ev-present__map { transition: opacity 0.7s ease-in-out; }
.ev-present__map.is-restarting { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .ev-present .m-top .m-people, .ev-present .m-top .m-arcs, .ev-present .m-top text, .ev-present__map { transition: none; } .ev-place { animation: none; } }
/* Presentation words: fade out, change, fade in */
.ev-present__text { transition: opacity 0.45s ease-out; }
.ev-present__text.is-fading { opacity: 0; transition: opacity 0.24s ease-in; }
@media (prefers-reduced-motion: reduce) { .ev-present__text, .ev-present__text.is-fading { transition: none; } }

/* Add to calendar */
.ev-cal { position: relative; }
.ev-cal > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; }
.ev-cal > summary::-webkit-details-marker { display: none; }
.ev-cal > summary::after { content: ""; display: inline-block; margin-left: 10px; border: 6px solid transparent; border-top-color: currentColor; transform: translateY(3px); }
.ev-cal[open] > summary::after { transform: translateY(-3px) rotate(180deg); }
.ev-cal__menu { position: absolute; z-index: 5; top: calc(100% + 10px); left: 0; display: grid; gap: 10px; padding: 14px; min-width: 280px; background: var(--surface); border: 2px solid var(--rule-strong); box-shadow: 6px 6px 0 0 var(--rule-strong); }
.ev-cal__menu .btn { justify-content: flex-start; }
.ev-cal__note { font-size: var(--f1); color: var(--ink-2); margin: 0; }
@media (max-width: 600px) { .ev-cal { flex: 1 1 100%; } .ev-cal__menu { position: static; margin-top: 10px; min-width: 0; } }

/* Every button in the hero row is the same height, whatever its width */
.ev-actions { align-items: stretch; }
.ev-actions > .btn, .ev-actions .ev-cal > summary { min-height: 56px; box-sizing: border-box; }

/* Countdown: a flood gauge beside the title (desktop), under the lede (phone) */
@media (min-width: 900px) {
  /* The words and the gauge sit side by side in one row, so a longer title or subtitle (Filipino) never shifts the rest */
  .ev-hero { display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: 40px; align-items: stretch; }
  .ev-hero > * { grid-column: 1 / -1; }
  .ev-hero > .ev-hero__text { grid-column: 1; grid-row: 1; }
  .ev-hero > .ev-gauge { grid-column: 2; grid-row: 1; min-height: 340px; margin-top: 0; }
}
.ev-gauge { position: relative; overflow: hidden; border: 3px solid var(--rule-strong); box-shadow: 8px 8px 0 0 var(--rule-strong); background: var(--surface); min-height: 300px; margin-top: 20px; display: flex; flex-direction: column; justify-content: flex-start; padding: 18px 18px 18px 52px; }
.ev-gauge[hidden] { display: none; }
.ev-gauge__water { position: absolute; left: 0; right: 0; bottom: 0; background: var(--hz2); transition: height 1.2s ease-out; }
.ev-gauge__wave { position: absolute; left: 0; top: -15px; width: 200%; height: 16px; fill: var(--hz2); animation: ev-wave 6s linear infinite; }
@keyframes ev-wave { to { transform: translateX(-50%); } }
.ev-gauge__water::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--hz3), transparent 75%); opacity: 0.55; }
.ev-gauge__scale { position: absolute; left: 0; top: 0; bottom: 0; width: 40px; border-right: 2px solid var(--rule-strong); background: var(--paper); z-index: 1; }
.ev-gauge__scale i { position: absolute; right: 0; width: 12px; height: 2px; background: var(--ink); }
.ev-gauge__top, .ev-gauge__bottom, .ev-gauge__today { position: absolute; left: 4px; font-size: 11px; font-weight: 700; line-height: 1; color: var(--ink); }
.ev-gauge__top { top: 6px; } .ev-gauge__bottom { bottom: 6px; }
.ev-gauge__today { transform: translateY(50%); background: #E7B800; color: #1b1a17; padding: 2px 3px; left: 2px; }
.ev-gauge__panel { position: relative; z-index: 1; background: var(--surface); border: 2px solid var(--rule-strong); padding: 12px 14px 14px; }
.ev-gauge__h { margin: 0; font-weight: 700; font-size: var(--f1); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); }
.ev-gauge__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.ev-gauge__tile { min-width: 0; display: flex; flex-direction: column; align-items: center; border: 2px solid var(--rule-strong); background: var(--paper); padding: 6px 2px; }
.ev-gauge__tile b { font-size: 1.7rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ev-gauge__tile small { font-size: 0.7rem; max-width: 100%; overflow: hidden; text-overflow: clip; color: var(--ink-2); }
.ev-gauge__when { margin: 10px 0 0; font-weight: 700; }
.ev-gauge.is-done .ev-gauge__h { font-size: var(--f3); color: var(--ink); text-transform: none; letter-spacing: 0; }
@media (prefers-reduced-motion: reduce) { .ev-gauge__wave { animation: none; } .ev-gauge__water { transition: none; } }
/* "Want to be featured here?" under the supporters */
.ev-feature { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 18px 20px; border: 2px dashed var(--rule-strong); max-width: var(--wrap); }
.ev-feature p { margin: 0; max-width: 40rem; }
.ev-feature .btn { margin: 0; }

/* How to get there */
.ev-there__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 24px 40px; margin-top: 16px; align-items: start; }
.ev-there__addr { border: 2px solid var(--rule-strong); box-shadow: 6px 6px 0 0 var(--rule-strong); background: var(--surface); padding: 18px 20px; }
.ev-there__place { margin: 0; line-height: 1.6; }
.ev-there__place b { font-size: var(--f3); }
.ev-there__ways { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.ev-there__ways li { border-left: 4px solid var(--rule-strong); padding: 2px 0 2px 14px; }
.ev-there__ways b { display: block; }
@media (max-width: 800px) { .ev-there__grid { grid-template-columns: 1fr; } }

section[id], .ev-hero { scroll-margin-top: 16px; }

/* Campus map: Banatao Auditorium and B100 Blum Hall (campus-map.js). Number + shape + word, never color alone. */
.cm { display: grid; gap: 20px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; margin-top: 16px; }
@media (max-width: 760px) { .cm { grid-template-columns: 1fr; } }
.cm-map { position: relative; z-index: 0; isolation: isolate; height: 380px; background: var(--sunk); border: 2px solid var(--rule-strong); box-shadow: var(--lift, 4px) var(--lift, 4px) 0 0 var(--rule-strong); }
@media (max-width: 600px) { .cm-map { height: 300px; } }
.cm-map .leaflet-container, .cm-map.leaflet-container { font: inherit; }
.cm-map.is-dark .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(0.9); }
.cm-map:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cm-pin { display: inline-grid; place-items: center; box-sizing: border-box; width: 30px; height: 30px; font-weight: 700; font-size: 15px; line-height: 1; border: 2px solid #fff; box-shadow: 0 0 0 2px #1b1a17; }
.cm-pin--circle { border-radius: 50%; }
.cm-pin--square { border-radius: 3px; }
/* Leaflet's own CSS loads later and sets markers to display: block, which would push the number into a corner */
.cm-map .leaflet-marker-icon.cm-pin { display: grid; place-items: center; }
.cm-pin > span { display: block; line-height: 1; }
.cm-pin.is-talk { background: #385F96; color: #fff; }
.cm-pin.is-reception { background: #CF5921; color: #1b1a17; }
.cm-label, .cm-map .leaflet-tooltip.cm-label { font: inherit; font-weight: 700; font-size: 13px; color: #1b1a17; background: #fff; border: 2px solid #1b1a17; border-radius: 0; box-shadow: none; padding: 3px 7px; }
.cm-label::before, .cm-map .leaflet-tooltip.cm-label::before { display: none; }
.cm-key { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.cm-key li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
.cm-key b { display: block; }
.cm-side { display: grid; gap: 16px; align-content: start; }
.cm-credit { font-size: var(--f1); color: var(--ink-2); margin: -8px 0 0; }
.cm-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 20px; }
@media (max-width: 760px) { .cm-photos { grid-template-columns: 1fr; } }
.cm-side .ev-room__fig a, .cm-photos .ev-room__fig a { aspect-ratio: 57 / 28; }

/* Connect: cards from people working on Philippine projects */
.cn-lead { max-width: 40rem; margin: 8px 0 0; font-size: var(--f2, 1.1rem); }
.btn.is-disabled { cursor: default; border-style: dashed; box-shadow: none; color: var(--ink-2); background: var(--paper); }
.cn-sample { margin: 16px 0 0; padding: 10px 14px; border-left: 4px solid #E7B800; background: var(--surface); max-width: 40rem; }
.cn-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }
.cn-chip { min-height: var(--tap, 44px); padding: 6px 14px; border: 2px solid var(--rule-strong); background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.cn-chip::before { content: "○"; font-weight: 400; }
.cn-chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.cn-chip[aria-pressed="true"]::before { content: "●"; }
.cn-chip__n { font-weight: 400; font-size: 0.9em; }
.cn-chip:focus-visible { outline: 3px solid #E7B800; outline-offset: 2px; }
.cn-count { margin: 16px 0 0; font-weight: 700; color: var(--ink-2); }
.cn-cards { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.cn-card { position: relative; border: 2px solid var(--rule-strong); background: var(--surface); box-shadow: 4px 4px 0 0 var(--rule-strong); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cn-card h3 { margin: 0; font-size: 1.15rem; overflow-wrap: anywhere; }
.cn-card p { margin: 0; overflow-wrap: anywhere; }
.cn-card__meta { color: var(--ink-2); font-size: var(--f1); }
.cn-card__seek { font-size: var(--f1); }
.cn-card__sample { position: absolute; top: 10px; right: 10px; font-size: 0.75rem; font-weight: 700; padding: 2px 6px; background: #E7B800; color: #1b1a17; }
.cn-tags { list-style: none; padding: 0; margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cn-tags li { font-size: 0.85rem; padding: 2px 8px; border: 1px solid var(--rule-strong); }
.cn-card__foot { margin-top: auto !important; padding-top: 4px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--f1); color: var(--ink-2); }
.cn-card__foot a { color: var(--ink); }
#cn-more-wrap[hidden], .cn-filter[hidden] { display: none; }
.cn-chip { text-align: left; justify-content: flex-start; }
.cn-first { margin-top: 8px; padding-top: 0; border-top: 0; }
.cn-first .cn-filter { margin-top: 4px; }
.cn-filter { align-items: center; gap: 8px 12px; font-weight: 700; }
.cn-filter select { min-height: var(--tap, 48px); padding: 6px 12px; border: 2px solid var(--rule-strong); background: var(--surface); color: var(--ink); font: inherit; font-weight: 400; max-width: 100%; }
.cn-filter select:focus-visible { outline: 3px solid #E7B800; outline-offset: 2px; }
.cn-filter select { width: auto; }

/* Ask the speakers (Oct 14): one question box. The bot trap sits off screen and out of the tab order. */
.ask-form { display: grid; gap: 16px; max-width: 40rem; }
.ask-form textarea { min-height: 140px; }
.ask-err { margin: 0; color: var(--st-late); font-weight: 700; }
.ask-done { margin: 0; font-weight: 700; }
.ask-done:empty { display: none; }
.ask-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Watch online: the YouTube livestream, 16:9 at any width, no wider than the reading column. */
.ev-live__frame { position: relative; max-width: 60rem; aspect-ratio: 16 / 9; margin: 16px 0; border: 2px solid var(--rule-strong); background: #000; }
.ev-live__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }