/*
 * base.css — structure and defaults for every rendered conference page.
 *
 * Loaded identically by all three consumers: the editor canvas iframe (Puck
 * mirrors host styles into it), the live Express-rendered page, and the static
 * export. Plain classes only — no CSS Modules, no utility framework — so all
 * three get their styles through the same mechanism.
 *
 * CASCADE: base.css -> templates/<id>/template.css -> <style> token overrides.
 * Later layers win on equal specificity by source order, so a template never
 * needs !important or deeper selectors.
 *
 * Templates restyle by overriding the tokens below, and may add any plain CSS.
 * Keep literal values out of the rules unless templates should NOT change them.
 */

/*
 * DESIGN TOKENS — the theming surface.
 *
 * A template overrides these in its own :root block, and a conference can
 * override a subset again via settings.theme_json. Anything a template should
 * be able to restyle belongs here as a token; literal values left in the rules
 * below are ones templates are not expected to change.
 */
:root {
  /* text */
  --ink: #15202b;
  --ink-soft: #4a5a68;
  --ink-faint: #7b8794;

  /* surfaces */
  --line: #dde3e8;
  --bg: #ffffff;
  --bg-tint: #f4f7f9;
  --surface: #ffffff; /* cards, dropdowns, raised panels */

  /* brand */
  --brand: #11507e;
  --brand-dark: #0d3d60;
  --brand-tint: #e7f0f7;
  --accent: #b8860b;
  --on-brand: #ffffff; /* text/icons sitting on a brand-coloured fill */

  /* footer has its own palette so a template can invert or lighten it */
  --footer-bg: var(--ink);
  --footer-ink: #c9d4de;
  --footer-ink-strong: #ffffff;
  --footer-line: rgba(255, 255, 255, 0.12);
  --footer-ink-faint: #91a1b0;

  /* highlights */
  --highlight: #fffbe9; /* poster-session rows and similar callouts */

  /* metrics */
  --radius: 6px;
  --measure: 68ch;
  --container: 1120px;
  --topbar-h: 68px;

  /*
   * Card treatment. Deliberately SEPARATE from --radius, which is also used by
   * buttons, inputs, the nav dropdown and speaker photos — moving cards must
   * not round those. Defaulting to var(--radius) means cards follow the
   * template's corner style until someone opts out, so adding these tokens
   * changes nothing on its own.
   */
  --card-radius: var(--radius);
  --card-shadow: none;

  /*
   * Hero. Height is a token so a template can set the house default and a
   * per-page modifier can still override it; 0 means "as tall as its content",
   * which is the historical behaviour.
   *
   * --hero-scrim holds SPACE-SEPARATED RGB CHANNELS, not a colour, because it
   * is consumed as rgb(var(--hero-scrim) / var(--hero-scrim-opacity)) — a
   * packed hex would make the opacity impossible to tune separately, which is
   * the whole point of having two tokens.
   */
  --hero-min-height: 0px;
  /*
   * Vertical padding is --hero-pad-lead (permanent headroom, for a template
   * whose header floats over the hero) plus --hero-pad-extra (the breathing
   * room a height modifier sets). Keeping them separate means a per-page
   * height choice cannot delete a template's header clearance.
   */
  --hero-pad-lead: 0rem;
  --hero-pad-extra: 4.5rem;
  --hero-pad-block: calc(var(--hero-pad-lead) + var(--hero-pad-extra));
  --hero-scrim: 10 30 48;
  --hero-scrim-opacity: 0.78;

  /* type */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font);
}

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

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--brand);
}

.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
  z-index: 100;
  background: var(--surface);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
}

/* ---------- top bar + nav ---------- */

.topbar {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.topbar__inner,
.section__inner,
.cta__inner,
.footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  min-height: var(--topbar-h);
}

.brand {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--brand-dark);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.nav__list,
.nav__sub {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.nav__item {
  position: relative;
}

.nav__link,
.nav__sublink {
  display: block;
  padding: 0.5rem 0.7rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: var(--radius);
  white-space: nowrap;
}

.nav__link:hover,
.nav__sublink:hover {
  background: var(--bg-tint);
  color: var(--brand-dark);
}

.nav__link--active,
.nav__sublink--active {
  color: var(--brand-dark);
  font-weight: 600;
}

.nav__caret {
  display: inline-block;
  margin-left: 0.35em;
  border: 0.28em solid transparent;
  border-top-color: currentColor;
  transform: translateY(0.14em);
}

/* CSS-only dropdown: no client JS anywhere on the public site. */
.nav__sub {
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 230px;
  padding: 0.3rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(21, 32, 43, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-3px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms;
  z-index: 50;
}

.nav__item--has-children:hover .nav__sub,
.nav__item--has-children:focus-within .nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ---------- sections ---------- */

.main {
  flex: 1 0 auto;
}

.section {
  padding: 3.25rem 0;
}
.section--tint {
  background: var(--bg-tint);
}
.section--narrow .section__inner {
  max-width: 760px;
}
.section--wide .section__inner {
  max-width: 1320px;
}

.section__heading {
  margin: 0 0 1.5rem;
  font-family: var(--font-heading);
  font-size: clamp(1.45rem, 1.1rem + 1.3vw, 1.95rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--brand-dark);
}

.prose {
  max-width: var(--measure);
}
.prose-p {
  margin: 0 0 1rem;
}
.prose-p:last-child {
  margin-bottom: 0;
}

/* ---------- hero ---------- */

.hero {
  padding: var(--hero-pad-block) 1.25rem;
  min-height: var(--hero-min-height);
  background: linear-gradient(170deg, var(--brand-tint), var(--surface));
  border-bottom: 1px solid var(--line);
}

/*
 * Height modifiers declare NOTHING but custom properties — same discipline as
 * the .cards--* modifiers below. That is what keeps them free of a specificity
 * contest with a template, and it is why the absence of a modifier means
 * "inherit" rather than needing a fallback rule.
 *
 * They set --hero-pad-extra rather than --hero-pad-block, so a template that
 * needs permanent headroom (one with a floating header, say) can set
 * --hero-pad-lead once and keep it at every height. Overriding the whole
 * padding here would discard that clearance and drop the title behind the
 * header the moment someone picked "Compact".
 */
.hero--h-compact {
  --hero-min-height: 0px;
  --hero-pad-extra: 2.5rem;
}
.hero--h-standard {
  --hero-min-height: 0px;
  --hero-pad-extra: 4.5rem;
}
.hero--h-tall {
  --hero-min-height: 70svh;
  --hero-pad-extra: 5.5rem;
}
.hero--h-full {
  --hero-min-height: 100svh;
  --hero-pad-extra: 6rem;
}

/* Once there is spare vertical space, centre the content in it. */
.hero--h-tall,
.hero--h-full {
  display: grid;
  place-items: center;
}
/* …but a left-aligned hero must stay left-aligned horizontally. */
.hero--h-tall.hero--left,
.hero--h-full.hero--left {
  justify-items: start;
}

.hero--center {
  text-align: center;
}
.hero--center .hero__inner {
  margin-inline: auto;
}
.hero--image {
  background-size: cover;
  background-position: center;
  color: var(--on-brand);
  position: relative;
}

/*
 * Focal point for a cover-cropped photo. Only meaningful alongside
 * .hero--image, which is the only state that sets a background image.
 */
.hero--focal-center {
  background-position: center;
}
.hero--focal-top {
  background-position: top center;
}
.hero--focal-bottom {
  background-position: bottom center;
}
.hero--focal-left {
  background-position: center left;
}
.hero--focal-right {
  background-position: center right;
}
.hero--focal-top-left {
  background-position: top left;
}
.hero--focal-top-right {
  background-position: top right;
}
.hero--focal-bottom-left {
  background-position: bottom left;
}
.hero--focal-bottom-right {
  background-position: bottom right;
}

.hero--image::before {
  content: "";
  position: absolute;
  inset: 0;
  /*
   * Two declarations deliberately. A token can hold anything isSafeTokenValue
   * allows, including a non-colour like "banana", which would make the
   * rgb() invalid — and an invalid scrim means white hero text on a bright
   * photo. The browser discards only the second declaration in that case, so
   * the first keeps today's exact appearance as the floor. It is also what
   * renders when no scrim tokens are set at all.
   */
  background: linear-gradient(170deg, rgba(10, 30, 48, 0.78), rgba(10, 30, 48, 0.55));
  background: linear-gradient(
    170deg,
    rgb(var(--hero-scrim) / var(--hero-scrim-opacity)),
    rgb(var(--hero-scrim) / calc(var(--hero-scrim-opacity) * 0.72))
  );
}
/*
 * The content sits above the scrim. max-width and centring are the base, so a
 * hero with NO align modifier reads as left-aligned — which is what pages
 * published before `align` existed must fall back to.
 */
.hero__inner {
  position: relative;
  margin-inline: auto;
  max-width: var(--container);
}
.hero--center .hero__inner {
  max-width: 820px;
}
.hero__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 1.2rem + 3vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.hero:not(.hero--image) .hero__title {
  color: var(--brand-dark);
}
.hero__subtitle {
  margin: 0.9rem 0 0;
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem);
  color: inherit;
  opacity: 0.9;
}
.hero__meta {
  margin: 1.1rem 0 0;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.hero__cta {
  margin: 1.8rem 0 0;
}

.btn {
  display: inline-block;
  padding: 0.7rem 1.35rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid transparent;
}
.btn--primary {
  background: var(--brand);
  color: var(--on-brand);
}
.btn--primary:hover {
  background: var(--brand-dark);
}

/* ---------- card surfaces ---------- */

/*
 * The card-like surfaces share one corner + shadow treatment, driven by
 * --card-radius / --card-shadow.
 *
 * Those resolve from :root by default (the site-wide Appearance setting), or
 * from a `cards--<style>` modifier on an ancestor container (a per-block
 * override). CSS custom-property inheritance IS the "inherit" mechanism, which
 * is why a block with no override needs no fallback logic and why already
 * published pages — which have no card-style prop stored at all — keep
 * rendering exactly as before.
 *
 * Adding a card means adding its selector here.
 */
.card,
.sponsor,
.contact,
.speaker,
.member,
.cta--panel .cta__inner {
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}

/*
 * Per-block overrides. These declare NOTHING but custom properties, so they
 * re-point the tokens for their subtree and the rule above picks them up —
 * no extra selectors, no !important, no specificity contest.
 *
 * `cards--*` is a shared vocabulary used on ANY card container (.cards,
 * .speakers, .committee, .contacts, .tier__logos, .cta), not only .cards.
 * Omitting the class entirely means "inherit the site-wide setting".
 */
.cards--flat {
  --card-radius: 0px;
  --card-shadow: none;
}
.cards--soft {
  --card-radius: 10px;
  --card-shadow: none;
}
.cards--raised {
  --card-radius: var(--radius);
  --card-shadow: 0 1px 2px rgba(21, 32, 43, 0.06), 0 6px 16px rgba(21, 32, 43, 0.08);
}
.cards--raised-soft {
  --card-radius: 10px;
  --card-shadow: 0 1px 2px rgba(21, 32, 43, 0.06), 0 6px 16px rgba(21, 32, 43, 0.08);
}

/* ---------- speakers ---------- */

.speakers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}
.speakers--cols-2 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.speakers--cols-3 {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.speakers--cols-4 {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

/* A real card, so the shared corner/shadow treatment has something to sit on. */
.speaker {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  border: 1px solid var(--line);
  background: var(--surface);
}

.speaker__photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--bg-tint);
}
.speaker__photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ink-faint);
  border: 1px dashed var(--line);
}
.speaker__name {
  margin: 0.85rem 0 0;
  font-size: 1.05rem;
  color: var(--brand-dark);
}
.speaker__title,
.speaker__affiliation {
  margin: 0.15rem 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.speaker__talk {
  margin: 0.5rem 0 0;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--ink);
}
.speaker__bio {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* ---------- sponsors ---------- */

.tier + .tier {
  margin-top: 2.25rem;
}
.tier__name {
  margin: 0 0 1rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}
.tier__logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
}
.sponsor {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tier__logos--small .sponsor {
  min-width: 130px;
  min-height: 64px;
}
.tier__logos--medium .sponsor {
  min-width: 180px;
  min-height: 86px;
}
.tier__logos--large .sponsor {
  min-width: 240px;
  min-height: 112px;
}
.sponsor__logo {
  max-height: 72px;
  object-fit: contain;
}
.sponsor__name {
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
}

/* ---------- agenda ---------- */

.agenda-day + .agenda-day {
  margin-top: 2.5rem;
}
.agenda-day__title {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
  color: var(--brand-dark);
}
.agenda-day__date {
  font-weight: 400;
  color: var(--ink-soft);
}

.table-scroll {
  overflow-x: auto;
}

.agenda,
.pricing {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.agenda__row {
  border-top: 1px solid var(--line);
}
.agenda__time {
  width: 7.5rem;
  padding: 0.75rem 0.75rem 0.75rem 0;
  text-align: left;
  vertical-align: top;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  font-weight: 600;
}
.agenda__detail {
  padding: 0.75rem;
  vertical-align: top;
}
.agenda__title {
  display: block;
  font-weight: 600;
}
.agenda__speaker {
  display: block;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.agenda__room {
  padding: 0.75rem 0 0.75rem 0.75rem;
  vertical-align: top;
  text-align: right;
  color: var(--ink-faint);
  font-size: 0.88rem;
  white-space: nowrap;
}
.agenda__row--keynote .agenda__title {
  color: var(--brand-dark);
}
.agenda__row--keynote {
  background: var(--brand-tint);
}
.agenda__row--break,
.agenda__row--social {
  color: var(--ink-soft);
  font-style: italic;
}
.agenda__row--poster {
  background: var(--highlight);
}

/* ---------- committee ---------- */

.committee-group + .committee-group {
  margin-top: 2rem;
}
.committee-group__name {
  margin: 0 0 0.85rem;
  font-size: 1.05rem;
  color: var(--brand-dark);
}
.committee {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.member {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.85rem;
  border: 1px solid var(--line);
  background: var(--surface);
}
.member__photo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--bg-tint);
}
.member__photo--placeholder {
  border: 1px dashed var(--line);
}
.member__name {
  display: block;
  font-weight: 600;
}
.member__role,
.member__affiliation {
  display: block;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

/* ---------- key dates ---------- */

.keydates {
  margin: 0;
}
.keydate {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}
.keydate__label {
  font-weight: 600;
  margin: 0;
}
.keydate__value {
  margin: 0;
  text-align: right;
}
.keydate__date {
  display: block;
  font-variant-numeric: tabular-nums;
}
.keydate__note {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-faint);
}
.keydate--passed {
  color: var(--ink-faint);
}
.keydate--passed .keydate__date {
  text-decoration: line-through;
}
.keydate__badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7a4e00;
  background: #ffeec2;
  border-radius: 999px;
  vertical-align: 0.1em;
}

/* ---------- CTA ---------- */

.cta {
  padding: 2.5rem 0;
}
.cta--banner {
  background: var(--brand-dark);
  color: var(--on-brand);
}
.cta--banner .btn--primary {
  background: var(--surface);
  color: var(--brand-dark);
}
.cta--banner .btn--primary:hover {
  background: var(--brand-tint);
}
.cta--panel .cta__inner {
  background: var(--bg-tint);
  border: 1px solid var(--line);
  padding: 1.75rem;
}
.cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.cta__heading {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.4rem;
  letter-spacing: -0.015em;
}
.cta--panel .cta__heading {
  color: var(--brand-dark);
}
.cta__body {
  margin-top: 0.35rem;
  opacity: 0.92;
}

/* ---------- info cards ---------- */

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}
.cards--cols-2 {
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.cards--cols-3 {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.card {
  border: 1px solid var(--line);
  padding: 1.5rem;
  background: var(--surface);
  display: flex;
  flex-direction: column;
}
.card__icon {
  font-size: 1.6rem;
  line-height: 1;
}
.card__title {
  margin: 0.6rem 0 0;
  font-size: 1.08rem;
  color: var(--brand-dark);
}
.card__body {
  margin-top: 0.45rem;
  font-size: 0.94rem;
  color: var(--ink-soft);
  flex: 1;
}
.card__link {
  margin-top: 0.9rem;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  align-self: start;
}
.card__link:hover {
  text-decoration: underline;
}

/* ---------- pricing ---------- */

.pricing th,
.pricing td {
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.pricing thead th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
  border-bottom-width: 2px;
}
.pricing tbody td {
  font-variant-numeric: tabular-nums;
}
.pricing__note {
  margin-top: 1rem;
  font-size: 0.88rem;
  color: var(--ink-faint);
}

/* ---------- FAQ ---------- */

.faq__item {
  border-bottom: 1px solid var(--line);
}
.faq__q {
  padding: 0.95rem 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.faq__q::-webkit-details-marker {
  display: none;
}
.faq__q::after {
  content: "+";
  color: var(--brand);
  font-size: 1.15rem;
  line-height: 1;
  flex: none;
}
.faq__item[open] .faq__q::after {
  content: "–";
}
.faq__a {
  padding: 0 0 1.1rem;
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* ---------- contacts ---------- */

.contacts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.contact {
  border: 1px solid var(--line);
  padding: 1.1rem;
}
.contact__name {
  display: block;
  font-weight: 600;
}
.contact__role {
  display: block;
  font-size: 0.88rem;
  color: var(--ink-faint);
  margin-bottom: 0.35rem;
}
.contact__email,
.contact__phone {
  display: block;
  font-size: 0.92rem;
}
.contacts__address {
  margin-top: 1.25rem;
  font-style: normal;
  color: var(--ink-soft);
}

/* ---------- footer ---------- */

.footer {
  margin-top: 3rem;
  padding: 2.5rem 0 1.5rem;
  background: var(--footer-bg);
  color: var(--footer-ink);
}
.footer__inner {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.footer__title {
  margin: 0 0 0.6rem;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--footer-ink-strong);
}
.footer__line {
  margin: 0;
  font-size: 0.9rem;
}
.footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.footer__links a {
  color: var(--footer-ink);
  text-decoration: none;
  font-size: 0.9rem;
}
.footer__links a:hover {
  color: var(--footer-ink-strong);
  text-decoration: underline;
}
.footer__legal {
  max-width: var(--container);
  margin: 2rem auto 0;
  padding: 1.25rem 1.25rem 0;
  border-top: 1px solid var(--footer-line);
  font-size: 0.82rem;
  color: var(--footer-ink-faint);
}


@media (max-width: 720px) {
  .topbar__inner {
    align-items: flex-start;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  /* Nested nav flattens on small screens — hover dropdowns don't work on touch. */
  .nav__sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    padding: 0 0 0 0.7rem;
    min-width: 0;
  }
  .nav__caret {
    display: none;
  }
  .keydate__value {
    text-align: left;
  }
}
:where(.photo-carousel) { overflow-x: auto; scroll-snap-type: x mandatory; padding-block: 1rem; }
.photo-carousel:focus-visible, .speaker__bio-trigger:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
.photo-carousel__track { display: flex; gap: 1rem; list-style: none; padding: 0; margin: 0; }
.photo-carousel__slide { flex: 0 0 85%; scroll-snap-align: start; }
.photo-carousel__slide figure { margin: 0; }
.photo-carousel__slide img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }
.photo-carousel__slide figcaption { padding-block: .75rem; }
.photo-carousel__hint { font-size: .9rem; }
.speaker__bio-trigger { border: 0; background: transparent; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.speaker__bio-close { display: none; }
@supports selector(:popover-open) {
  .speaker__bio[popover] { max-width: min(38rem, 90vw); max-height: 80vh; overflow: auto; padding: 1.5rem; border: 1px solid var(--brand); border-radius: var(--radius); background: white; color: #18202a; }
  .speaker__bio[popover]::backdrop { background: rgb(0 0 0 / .35); }
  .speaker__bio-close { display: block; margin-bottom: 1rem; }
}
.countdown__date { display: block; }
.countdown__remaining { font-size: clamp(1.5rem, 4vw, 3rem); font-variant-numeric: tabular-nums; font-weight: 700; }