/* ==========================================================================
   15th Singapore AIDS Conference for HIV & STI
   Design system + page styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette — sampled from the AfA artwork and mood board */
  --red:        #D9272E;
  --red-dark:   #AF1D23;
  --red-soft:   #FFEDEE;
  --ink:        #0D182A;
  --slate:      #405561;
  --muted:      #62707A;   /* 4.67:1 on --mist, 5.10:1 on white — WCAG AA */
  --mist:       #F4F5F7;
  --line:       #E2E6EA;
  --white:      #FFFFFF;

  /* Session colour coding (carried from the printed programme) */
  --tone-open:  #D9272E;
  --tone-s1:    #D9272E;
  --tone-s2:    #2F5FBF;
  --tone-s3:    #3E7F43;
  --tone-s4:    #8A63C4;
  --tone-close: #657882;   /* 4.60:1 against white header text */

  /* Type — system Helvetica stack, matching the design comps without
     shipping the licensed desktop font files. */
  --font: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;

  --fs-display: clamp(2.25rem, 1.1rem + 4.6vw, 4.25rem);
  --fs-h2:      clamp(1.6rem, 1.05rem + 1.9vw, 2.6rem);
  --fs-h3:      clamp(1.15rem, 1rem + 0.55vw, 1.45rem);
  --fs-lead:    clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;

  /* Layout */
  --container: 1200px;   /* widened at ≥1500px, see below */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(3.5rem, 6vw, 6rem);
  --radius: 14px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(13, 24, 42, .06), 0 2px 8px rgba(13, 24, 42, .05);
  --shadow-md: 0 4px 12px rgba(13, 24, 42, .08), 0 12px 32px rgba(13, 24, 42, .07);
  --shadow-lg: 0 10px 24px rgba(13, 24, 42, .10), 0 28px 60px rgba(13, 24, 42, .10);

  --header-h: 96px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 767px) {
  :root { --header-h: 130px; }   /* two rows: brand + pill, then co-organisers */
}
/* On wide monitors a 1200px column leaves broad side margins that read as
   empty space against the near-white left of the hero art. Let the column
   grow with the viewport instead of capping early. */
@media (min-width: 1500px) {
  :root { --container: min(1440px, 90vw); }
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--slate);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  color: var(--ink);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.015em;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

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

/* Sprite icons default to 24px; component rules below override where needed. */
svg { width: 24px; height: 24px; flex: none; }

a { color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--red-dark); }

ul { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Visually hidden but available to screen readers */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 999;
  background: var(--red); color: #fff; padding: .75rem 1.25rem;
  border-radius: 0 0 10px 10px; font-weight: 700; text-decoration: none;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--mist { background: var(--mist); }
.section--tight { padding-block: clamp(2.5rem, 4vw, 4rem); }

.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: .75rem;
}

.section-title { font-size: var(--fs-h2); margin-bottom: .4em; }

.lead { font-size: var(--fs-lead); color: var(--slate); }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--red);
  --btn-fg: #fff;
  --btn-bd: var(--red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 2rem;
  min-height: 48px;
  border: 2px solid var(--btn-bd);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover {
  --btn-bg: var(--red-dark);
  --btn-bd: var(--red-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(217, 39, 46, .28);
}
.btn:active { transform: translateY(0); }

.btn--outline { --btn-bg: transparent; --btn-fg: var(--red); }
.btn--outline:hover { --btn-bg: var(--red); --btn-fg: #fff; }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line);
}
.btn--ghost:hover { --btn-bg: var(--ink); --btn-bd: var(--ink); --btn-fg: #fff; box-shadow: none; }

.btn--sm { padding: .6rem 1.4rem; min-height: 42px; font-size: var(--fs-sm); }
.btn--lg { padding: 1.05rem 2.4rem; min-height: 56px; font-size: 1.0625rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .875rem; }

/* The key-visual pills are set in caps; form and utility buttons stay sentence case. */
.header-cta .btn, .nav-drawer-cta .btn, .hero .btn {
  text-transform: uppercase;
  letter-spacing: .045em;
}

/* --------------------------------------------------------------------------
   5. Header / navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 0 var(--line), 0 6px 24px rgba(13, 24, 42, .06);
}
@supports (backdrop-filter: blur(10px)) {
  .site-header.is-scrolled { background: rgba(255, 255, 255, .82); backdrop-filter: blur(14px) saturate(1.6); }
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.brand svg, .brand img { width: auto; height: 68px; }

/* Co-organisers beside the AfA mark. The supplied 501x250 canvases carry
   their own padding, so they sit taller than the artwork looks. */
.header-logos {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-left: .5rem;
}
.header-logo { display: block; line-height: 0; border-radius: 6px; }
.header-logo img { height: 72px; width: auto; }
.header-logo:hover { background: var(--red-soft); }
@media (max-width: 1023px) { .header-logo img { height: 56px; } }
/* Phones: no room beside the Register pill, so the co-organisers drop to a
   second row under the AfA mark. The header grows to fit (see --header-h). */
@media (max-width: 767px) {
  .header-inner { flex-wrap: wrap; row-gap: .25rem; }
  .header-cta { order: 2; margin-left: auto; }
  .header-logos {
    order: 3;
    flex-basis: 100%;
    margin-left: 0;
    gap: .5rem;
    justify-content: flex-start;
  }
  .header-logo img { height: 48px; }
}
@media (max-width: 767px) { .brand svg, .brand img { height: 52px; } }

/* The register pill is the only header control, at every width. */
.header-cta { flex: 0 0 auto; margin-left: auto; }
@media (max-width: 767px) {
  .header-cta .btn { padding: .5rem 1.15rem; min-height: 38px; font-size: var(--fs-xs); }
}

/* ---- Primary nav ---------------------------------------------------------
   Retained but not rendered: the header markup was reduced to logo + register
   pill to match the key visual. Restore the <nav id="primaryNav"> block and
   the nav toggle in index.html to bring these back. ------------------------ */
.nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: clamp(.75rem, 1.9vw, 2rem); }
.nav-drawer-cta { display: none; }   /* drawer-only; revealed in the mobile query */

.nav-link {
  position: relative;
  display: block;
  padding: .5rem 0;
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s var(--ease);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transition: transform .22s var(--ease);
}
.nav-link:hover { color: var(--red); }
.nav-link:hover::after,
.nav-link[aria-current="true"]::after { transform: scaleX(1); }
.nav-link[aria-current="true"] { color: var(--red); font-weight: 700; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}
.nav-toggle-bars { display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; transition: background-color .2s var(--ease); }
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: ""; position: absolute; left: 0; width: 24px; height: 2px;
  background: var(--ink); border-radius: 2px; transition: transform .25s var(--ease), top .2s var(--ease);
}
.nav-toggle-bars::before { top: -8px; }
.nav-toggle-bars::after  { top: 8px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 1023px) {
  .nav-toggle { display: flex; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    margin: 0;
    background: #fff;
    padding: 1.5rem var(--gutter) 2.5rem;
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .3s var(--ease), visibility .3s var(--ease);
  }
  .nav.is-open { transform: translateX(0); visibility: visible; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list li { border-bottom: 1px solid var(--line); }
  .nav-link { padding: 1.1rem 0; font-size: 1.125rem; font-weight: 600; }
  .nav-link::after { display: none; }
  .nav-drawer-cta { display: block; margin-top: 1.75rem; }
}

/* Applied while the mobile drawer or the speaker dialog is open. */
body.scroll-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(600px, 92vh, 920px);
  padding-top: var(--header-h);
  padding-bottom: clamp(2rem, 5vw, 4rem);
  isolation: isolate;
  background: #FCF7F7;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
/* Desktop: the artwork is 4:3 and the hero is roughly 2:1, so "cover" has to
   throw away a third of the image's height — and anchored at the bottom that
   third is the top of the ribbon. Instead, fit the art to the hero's height,
   pin it right, and feather its left edge into the background. The whole
   ribbon and the skyline stay in frame; the left is where the copy sits. */
@media (min-width: 768px) {
  .hero-bg img {
    position: absolute;
    right: 0;
    bottom: 0;
    width: auto;
    height: 100%;
    max-width: none;
    object-fit: contain;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%);
            mask-image: linear-gradient(to right, transparent 0, #000 14%);
  }
}

/* Guarantees headline contrast whatever the crop */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, .78) 0%,
    rgba(255, 255, 255, .86) 28%,
    rgba(255, 255, 255, .48) 48%,
    rgba(255, 255, 255, 0) 66%);
}

.hero-inner { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
/* Wide enough for "15th Singapore AIDS Conference" to hold one line on desktop,
   the way the AfA key visual sets it. */
.hero-content { max-width: min(56rem, 100%); }

/* Runs inline ahead of the conference name, in red, at the title's own size */
.hero-ordinal { color: var(--red); }
.hero-ordinal sup { font-size: .5em; top: -.55em; position: relative; }

.hero-title {
  font-size: clamp(2rem, .85rem + 3.5vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  /* Sentence case and near-black, matching the key visual rather than the
     navy used for section headings elsewhere. */
  color: #1A1A1A;
  margin-bottom: .3em;
}
/* "(For HIV & STI)" always takes its own line under the conference name */
.hero-title-sub { display: block; }

.hero-tagline {
  font-size: clamp(1.125rem, .95rem + .95vw, 1.95rem);
  font-weight: 700;
  color: var(--red);
  letter-spacing: -0.01em;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.hero-facts { display: grid; gap: 1.25rem; margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }

.fact { display: flex; align-items: flex-start; gap: 1rem; }
.fact-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--red-soft);
  color: var(--red);
}
.fact-icon svg { width: 26px; height: 26px; }
.fact-label { display: block; color: var(--red); font-size: 1.0625rem; margin-bottom: .1rem; }
.fact-value { display: block; color: #1A1A1A; font-weight: 700; font-size: 1.0625rem; line-height: 1.45; }
/* Second lines inherit the bold by default (the time under the date); the
   street address is the one that steps back to regular weight. */
.fact-value span { display: block; }
.fact-value .fact-sub { font-weight: 400; }

@media (max-width: 767px) {
  .hero { min-height: 0; padding-bottom: clamp(3rem, 40vw, 12rem); }
  .fact-icon { width: 46px; height: 46px; }
  .fact-icon svg { width: 22px; height: 22px; }
  /* The portrait art carries the ribbon through the middle of the frame, which
     is exactly where the copy and buttons sit — hold the white wash longer than
     on desktop, then let the skyline come through clean at the foot. */
  .hero::before {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, .94) 0%,
      rgba(255, 255, 255, .88) 48%,
      rgba(255, 255, 255, .66) 68%,
      rgba(255, 255, 255, .18) 84%,
      rgba(255, 255, 255, 0) 93%);
  }
  /* Sits over the busiest part of the artwork, so give it a surface to sit on */
  .hero .btn--outline { --btn-bg: rgba(255, 255, 255, .9); }
  .hero .btn--outline:hover { --btn-bg: var(--red); }
  /* Centred keeps the dandelion, seed trail and skyline all in frame; biasing
     right crops the ribbon loop and loses the dandelion entirely. */
  .hero-bg img { object-position: center bottom; }
}

/* --------------------------------------------------------------------------
   7. About + stats
   -------------------------------------------------------------------------- */
.about-grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
/* Heading holds the left rail, the introduction runs down the right. */
@media (min-width: 900px) {
  .about-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .about-head { position: sticky; top: calc(var(--header-h) + 2rem); }
}
/* The right rail is one continuous passage, so a size step part-way down it
   reads as a mistake rather than as emphasis. Everything sits at one size and
   the opening paragraph is set apart by colour alone. */
.about-copy { font-size: 1.0625rem; line-height: 1.7; }
.about-copy { color: var(--ink); }
.about-copy .lead { font-size: inherit; color: var(--ink); }

.about-copy > p + p,
.about-copy #aboutBody p + p { margin-top: 1rem; }
.about-copy #aboutBody { margin-top: 1rem; }

.stats {
  display: grid;
  /* Column counts are pinned rather than auto-fit: a cell narrower than ~210px
     clips the longest label ("PARTNER ORGANISATIONS") against the overflow. */
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* Five stats is a prime count, so any layout other than 1 or 5 columns leaves a
   hole in the final row, which shows through as a grey block. This fills it. */
.stats::after { content: ""; display: none; background: var(--white); }

@media (min-width: 600px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats::after { display: block; }
}
@media (min-width: 960px) {
  .stats { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
  .stats { grid-template-columns: repeat(5, 1fr); }
  .stats::after { display: none; }
}
.stat {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: 1.5rem 1.25rem;
  background: var(--white);
}
.stat-icon {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--red-soft);
  color: var(--red);
}
.stat-icon svg { width: 22px; height: 22px; }
.stat-value { display: block; font-size: 1.5rem; font-weight: 700; color: var(--ink); line-height: 1.1; }
.stat-label { display: block; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* --------------------------------------------------------------------------
   8. Speakers
   -------------------------------------------------------------------------- */
.speaker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
/* The <li> stretches to the grid row, but the card inside is what draws the
   box — it has to stretch too, or rows of cards end up ragged. */
.speaker-grid > li { display: flex; }

.speaker-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  height: 100%;
  padding: 1.25rem;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.speaker-card:hover {
  transform: translateY(-3px);
  border-color: rgba(217, 39, 46, .35);
  box-shadow: var(--shadow-md);
}
.speaker-card[disabled] { cursor: default; }
.speaker-card[disabled]:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--line); }

.speaker-card--featured {
  flex-direction: column;
  /* Top-aligned, not centred: the cards share one height, so centring would
     shift each photo by however many lines its organisation wraps to. Pinned
     to the top, every headshot sits on the same line and text flows below. */
  justify-content: flex-start;
  text-align: center;
  padding: 1.75rem 1.25rem;
}

.avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--red-soft);
  color: var(--red);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: .02em;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.speaker-card--featured .avatar { width: 104px; height: 104px; font-size: 1.75rem; margin-bottom: .25rem; }

.speaker-text { display: block; min-width: 0; }
.speaker-name { display: block; font-size: 1.0625rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
.speaker-org  { display: block; font-size: var(--fs-sm); color: var(--muted); line-height: 1.4; }
.speaker-role {
  display: block; margin-top: .35rem;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--red);
}

.speakers-hint {
  margin-top: 1.5rem;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--slate);
}

/* Speaker names inside the programme open the profile dialog. */
.speaker-link {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(217, 39, 46, .45);
  text-underline-offset: 3px;
  cursor: pointer;
  /* Buttons default to inline-block with centred, non-wrapping text; a long
     name in a narrow column then jumps to its own centred line. Let it wrap
     like the surrounding prose instead. */
  white-space: normal;
  text-align: left;
}
.speaker-link:hover { color: var(--red); text-decoration-color: var(--red); }

/* Multi-person speaker lines: one person per row, role labels as headings */
.speaker-person { display: block; }
.speaker-role-label {
  display: block;
  margin-top: .35rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.speaker-role-label:first-child { margin-top: 0; }

.item-title a { color: inherit; text-decoration-color: rgba(217, 39, 46, .45); text-underline-offset: 3px; }
.item-title a:hover { color: var(--red); }

.speakers-more { margin-top: clamp(2rem, 4vw, 3rem); }
.session-speakers + .session-speakers { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.session-speakers { --tone: var(--red); }
.session-speakers[data-tone="s2"] { --tone: var(--tone-s2); }
.session-speakers[data-tone="s3"] { --tone: var(--tone-s3); }
.session-speakers[data-tone="s4"] { --tone: var(--tone-s4); }
.session-speakers[data-tone="close"], .session-speakers[data-tone="open"] { --tone: var(--tone-close); }
.session-speakers .speakers-more-title { border-bottom-color: var(--tone); border-bottom-width: 2px; }
.session-speakers-kicker { color: var(--tone); }
.speakers-more-title {
  font-size: var(--fs-h3);
  margin-bottom: 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   9. Programme — glance rail
   -------------------------------------------------------------------------- */
.glance { position: relative; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.glance-track {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: .5rem;
}
/* connecting line */
.glance-track::before {
  content: "";
  position: absolute;
  top: 34px;
  left: 7%;
  right: 7%;
  height: 2px;
  background: repeating-linear-gradient(to right, var(--red) 0 8px, transparent 8px 14px);
  opacity: .5;
}

.glance-stop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
  cursor: pointer;
  color: inherit;
}
.glance-icon {
  display: grid;
  place-items: center;
  width: 68px; height: 68px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--red);
  color: var(--red);
  transition: transform .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.glance-icon svg { width: 32px; height: 32px; }
.glance-stop:hover .glance-icon { background: var(--red); color: #fff; transform: translateY(-3px); }
.glance-text { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.glance-label { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); line-height: 1.25; }
.glance-time { font-size: var(--fs-xs); color: var(--muted); }

@media (max-width: 899px) {
  .glance-track {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 0;
  }
  .glance-track::before {
    top: 24px; bottom: 24px; left: 33px; right: auto;
    width: 2px; height: auto;
    background: repeating-linear-gradient(to bottom, var(--red) 0 8px, transparent 8px 14px);
  }
  .glance-stop {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    text-align: left;
    padding: .55rem 0;
  }
  .glance-icon { width: 52px; height: 52px; flex: 0 0 auto; }
  .glance-icon svg { width: 24px; height: 24px; }
  .glance-stop:hover .glance-icon { transform: none; }
  .glance-text { align-items: flex-start; }
  .glance-time { order: -1; }
}

/* --------------------------------------------------------------------------
   10. Programme — sessions
   -------------------------------------------------------------------------- */
.programme-stack { display: grid; gap: 1.25rem; }

.sessions {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 700px)  { .sessions { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .sessions { grid-template-columns: repeat(4, 1fr); } }

.session {
  --tone: var(--red);
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.session[data-tone="open"]  { --tone: var(--tone-open); }
.session[data-tone="s1"]    { --tone: var(--tone-s1); }
.session[data-tone="s2"]    { --tone: var(--tone-s2); }
.session[data-tone="s3"]    { --tone: var(--tone-s3); }
.session[data-tone="s4"]    { --tone: var(--tone-s4); }
.session[data-tone="close"] { --tone: var(--tone-close); }

.session-head {
  display: flex;
  align-items: center;
  gap: .875rem;
  width: 100%;
  padding: 1.125rem 1.25rem;
  text-align: left;
  background: var(--tone);
  color: #fff;
  border: 0;
  cursor: pointer;
}
.session-head-icon {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  color: #fff;
}
.session-head-icon svg { width: 22px; height: 22px; }
.session-head-text { flex: 1 1 auto; min-width: 0; }
.session-kicker {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .92;
}
.session-title { display: block; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; color: #fff; }
.session-time { display: block; font-size: var(--fs-sm); opacity: .92; margin-top: .15rem; }

.session-chevron {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  transition: transform .25s var(--ease);
}
.session-head[aria-expanded="true"] .session-chevron { transform: rotate(180deg); }

.session-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  border-top: 3px solid var(--tone);
}
.session-chair {
  padding: .75rem 1.25rem;
  background: color-mix(in srgb, var(--tone) 7%, #fff);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}
@supports not (background: color-mix(in srgb, red 7%, white)) {
  .session-chair { background: var(--mist); }
}

.session-items { flex: 1 1 auto; }
.session-item {
  padding: .95rem 1.25rem;
  border-bottom: 1px solid var(--line);
}
.session-item:last-child { border-bottom: 0; }
.session-item--qa {
  background: var(--mist);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--slate);
}
.item-time {
  display: inline-block;
  margin-bottom: .25rem;
  padding: .1rem .45rem;
  border-radius: 5px;
  background: color-mix(in srgb, var(--tone) 12%, #fff);
  color: color-mix(in srgb, var(--tone) 80%, #000);  /* AA on the tint above */
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .03em;
}
@supports not (background: color-mix(in srgb, red 12%, white)) {
  .item-time { background: var(--mist); color: var(--ink); }
}
.item-title { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); line-height: 1.4; }
.item-motion {
  margin-top: .4rem;
  padding-left: .75rem;
  border-left: 3px solid var(--tone);
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--slate);
}
.item-note { margin-top: .2rem; font-size: var(--fs-sm); color: var(--slate); }
.item-speaker { margin-top: .3rem; font-size: var(--fs-sm); color: var(--slate); }
.item-org { color: var(--muted); }

.session-after {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .875rem 1.25rem;
  background: var(--red-soft);
  color: var(--red);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.session-after svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* Full-width bookend rows for the ceremony blocks */
.bookend {
  display: grid;
  gap: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 5px solid var(--tone);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  --tone: var(--red);
}
.bookend[data-tone="open"]  { --tone: var(--tone-open); }
.bookend[data-tone="close"] { --tone: var(--tone-close); }

.bookend-head {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
}
.bookend-icon {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tone) 12%, #fff);
  color: var(--tone);
  flex: 0 0 auto;
}
@supports not (background: color-mix(in srgb, red 12%, white)) {
  .bookend-icon { background: var(--mist); }
}
.bookend-icon svg { width: 22px; height: 22px; }
.bookend-title { display: block; font-size: 1.0625rem; font-weight: 700; color: var(--ink); }
.bookend-time { display: block; font-size: var(--fs-sm); color: var(--muted); }
.bookend-items {
  display: grid;
  gap: 0;
}
@media (min-width: 700px) { .bookend-items { grid-template-columns: repeat(2, 1fr); } }
.bookend-items .session-item { border-bottom: 0; }
@media (min-width: 700px) {
  .bookend-items .session-item + .session-item { border-left: 1px solid var(--line); }
}

.programme-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.programme-note {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* Accordion behaviour: collapsible below 1100px, always open above */
@media (min-width: 1100px) {
  .session-head { cursor: default; pointer-events: none; }
  .session-chevron { display: none; }
  .expand-all { display: none; }
}
@media (max-width: 1099px) {
  .session-body[hidden] { display: none; }
}

/* --------------------------------------------------------------------------
   11. Register
   -------------------------------------------------------------------------- */
.register-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 980px) { .register-grid { grid-template-columns: .8fr 1.2fr; } }

.register-notes { display: grid; gap: .875rem; margin-top: 1.5rem; }
.register-note {
  display: flex; gap: .75rem;
  font-size: var(--fs-sm);
}
.register-note svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--red); margin-top: 3px; }

.form-card {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.form-grid { display: grid; gap: 1.125rem; }
@media (min-width: 620px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }

.field { display: flex; flex-direction: column; gap: .35rem; }
.field label { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.field .req { color: var(--red); }
.field .hint { font-size: var(--fs-xs); color: var(--muted); font-weight: 400; }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .75rem .875rem;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea { min-height: 96px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236B7A85' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .875rem center; background-size: 12px; padding-right: 2.25rem; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(217, 39, 46, .16);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--red); background: #FFF8F8; }

.field-error {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--red-dark);
  min-height: 0;
}
.field-error:empty { display: none; }

.checkbox {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  font-size: var(--fs-sm);
  font-weight: 400;   /* overrides the bold .field label */
  line-height: 1.5;
  cursor: pointer;
}
.checkbox input {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin: 2px 0 0;
  accent-color: var(--red);
}
.checkbox span { color: var(--slate); }

.form-status {
  margin-top: 1.25rem;
  padding: 1rem 1.125rem;
  border-radius: 12px;
  font-size: var(--fs-sm);
  border: 1px solid transparent;
}
.form-status[hidden] { display: none; }
.form-status--ok    { background: #EEF8F0; border-color: #BFE3C8; color: #1F5C2E; }
.form-status--info  { background: var(--red-soft); border-color: #F6C9CB; color: var(--red-dark); }
.form-status--error { background: #FDF0F0; border-color: #F3C4C6; color: var(--red-dark); }
.form-status strong { display: block; margin-bottom: .15rem; color: inherit; }
/* Focus is moved here on success so keyboard users are not stranded on the
   button that just disappeared. It is not reachable by tabbing, so the ring
   would only ever appear from that scripted move — and a red ring around the
   green success panel reads as an error. */
.form-status:focus { outline: none; }

.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   12. Partners
   -------------------------------------------------------------------------- */
.partner-block + .partner-block { margin-top: clamp(2.25rem, 4vw, 3.25rem); }

.partner-heading {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
}
.partner-heading::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}

.tier-label {
  margin: 1.5rem 0 1rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Every row across the whole section is the same fixed grid, so a tile is the
   same size whether its row holds four logos or one. A flex row was sizing
   tiles to how many sat in it (268px / 250px / 280px), and because the logos
   all share one 501x250 canvas, that read as the *logos* being different
   sizes rather than the boxes. */
.logo-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 600px) { .logo-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .logo-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.logo-tile {
  display: grid;
  place-items: center;
  /* Matches the supplied 501x250 canvas, so every tile is identical in both
     dimensions — including a placeholder tile with no artwork. */
  aspect-ratio: 2 / 1;
  /* Grid items default to min-height:auto, which lets the artwork push the box
     past the ratio and makes the percentage below resolve circularly. */
  min-height: 0;
  padding: .5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
a.logo-tile:hover { border-color: rgba(217, 39, 46, .3); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
/* Bounded rather than sized, so the artwork can never push the tile taller than
   its aspect-ratio: a logo supplied on a taller canvas is scaled down to sit
   with the rest instead of stretching its box out of line. */
.logo-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.logo-text {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--slate);
}

/* --------------------------------------------------------------------------
   13. Venue
   -------------------------------------------------------------------------- */
.venue-grid { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); align-items: start; }
@media (min-width: 900px) { .venue-grid { grid-template-columns: 1fr 1.15fr; } }

.venue-address {
  padding: 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 5px solid var(--red);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.5rem;
}
.venue-name { font-size: var(--fs-h3); margin-bottom: .25rem; }
/* Steps down from the venue name without jumping past the directions below it */
.venue-street { font-size: 1.0625rem; color: var(--slate); }

.directions { display: grid; gap: 1rem; }
.direction { display: flex; gap: 1rem; }
.direction-icon {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--red-soft);
  color: var(--red);
}
.direction-icon svg { width: 22px; height: 22px; }
.direction h3 { font-size: 1rem; margin-bottom: .15rem; }
.direction p { font-size: var(--fs-sm); color: var(--muted); }

.map-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  background: var(--mist);
}
.map-link { display: block; line-height: 0; }
.map-frame img { width: 100%; height: auto; }
.map-link:focus-visible { outline-offset: -4px; }
a.map-link:hover img { filter: saturate(1.06) contrast(1.02); }

.map-attribution {
  margin-top: .625rem;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.map-attribution a { color: var(--muted); }

/* --------------------------------------------------------------------------
   14. News
   -------------------------------------------------------------------------- */
.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
.news-card {
  display: flex; flex-direction: column;
  padding: 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.news-date { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--red); margin-bottom: .5rem; }
.news-card h3 { font-size: 1.125rem; }
.news-card p { font-size: var(--fs-sm); color: var(--muted); }

/* --------------------------------------------------------------------------
   15. Contact + footer
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.25rem;
}
.contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .75rem;
  padding: 1.75rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.contact-icon {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--red-soft);
  color: var(--red);
}
.contact-icon svg { width: 24px; height: 24px; }
.contact-card h3 { font-size: 1rem; margin-bottom: 0; }
.contact-card a, .contact-card p { font-size: var(--fs-sm); }
.contact-card a { font-weight: 600; word-break: break-word; }

/* Two-part address: office, then the DSC Clinic c/o line. */
.contact-address { display: grid; gap: .1rem; }
.contact-address .addr-alt {
  margin-top: .4rem;
  font-weight: 400;
  color: var(--muted);
}

.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, .75);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  font-size: var(--fs-sm);
}
.footer-top {
  display: grid;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
@media (min-width: 860px) { .footer-top { grid-template-columns: 1.2fr 1fr 1fr; } }

/* Same tile treatment as the Partners section — matching gap and padding, and
   the shared .logo-tile ratio — so the four co-organisers read at one size
   here too. The border is dropped: a grey edge that works on the white
   section would only muddy a white tile on the dark footer. */
.footer-logos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  max-width: 320px;
  margin-bottom: 1.25rem;
}
.footer-logos .logo-tile { padding: .5rem; border-color: transparent; }
.footer-logos .logo-tile:hover { border-color: rgba(217, 39, 46, .4); transform: none; }

/* The secretariat details are links; on the dark ground they need to look it. */
#footerContact a { text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 3px; }
#footerContact a:hover { text-decoration-color: #fff; }

.footer-logo {
  display: inline-block;
  padding: .625rem .875rem;
  background: #fff;
  border-radius: 12px;
  margin-bottom: 1rem;
}
.footer-logo svg, .footer-logo img { height: 54px; width: auto; }

.footer-title {
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.footer-list { display: grid; gap: .625rem; }
.footer-list a, .site-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.footer-list a:hover, .site-footer a:hover { color: #fff; text-decoration: underline; }

.social-row { display: flex; gap: .625rem; margin-top: 1.25rem; justify-content: flex-end; }
.social-link {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  transition: background-color .18s var(--ease), transform .18s var(--ease);
}
.social-link:hover { background: var(--red); transform: translateY(-2px); }
.social-link svg { width: 20px; height: 20px; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding-top: 1.5rem;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .6);
}
.footer-hashtag {
  margin-left: auto;
  color: var(--red);
  font-weight: 700;
  letter-spacing: .06em;
}

/* --------------------------------------------------------------------------
   16. Speaker modal
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(13, 24, 42, .55);
  opacity: 0;
  transition: opacity .22s var(--ease);
}
/* `display: grid` above would otherwise beat the UA's [hidden] rule. Using the
   hidden attribute alone (rather than a visibility transition) keeps the panel
   genuinely focusable the instant it is shown. */
.modal[hidden] { display: none; }
.modal.is-open { opacity: 1; }
@supports (backdrop-filter: blur(4px)) {
  .modal { backdrop-filter: blur(4px); }
}

.modal-panel {
  position: relative;
  width: min(540px, 100%);
  max-height: 85vh;
  overflow-y: auto;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transform: translateY(14px) scale(.98);
  transition: transform .22s var(--ease);
}
.modal.is-open .modal-panel { transform: none; }

.modal-close {
  position: absolute;
  top: 1rem; right: 1rem;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: var(--mist);
  cursor: pointer;
  transition: background-color .18s var(--ease);
}
.modal-close:hover { background: var(--line); }
.modal-close svg { width: 18px; height: 18px; }

.modal-head { display: flex; gap: 1.125rem; align-items: center; margin-bottom: 1.25rem; padding-right: 2.5rem; }
.modal-head .avatar { width: 76px; height: 76px; font-size: 1.375rem; }
.modal-name { font-size: 1.375rem; margin-bottom: .1rem; }
.modal-org { font-size: var(--fs-sm); color: var(--muted); }
.modal-bio { color: var(--slate); }
.modal-sessions { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.modal-sessions h4 { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .625rem; }
.modal-session-item { font-size: var(--fs-sm); padding: .5rem 0; border-bottom: 1px solid var(--line); }
.modal-session-item:last-child { border-bottom: 0; }
.modal-session-item strong { display: block; color: var(--ink); font-weight: 600; }
.modal-session-item span { color: var(--muted); }

/* --------------------------------------------------------------------------
   17. Motion / reveal
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   18. Print — the programme should print cleanly
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .hero-bg, .nav, .btn, .modal, .map-frame,
  .programme-actions, .social-row, .glance { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .hero { min-height: 0; padding-top: 0; }
  .hero::before { display: none; }
  .section { padding-block: 1rem; break-inside: avoid; }
  .sessions { grid-template-columns: repeat(2, 1fr) !important; }
  .session, .bookend { break-inside: avoid; box-shadow: none; border: 1px solid #999; }
  .session-head { background: #eee !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .session-title, .session-kicker { color: #000 !important; }
  .site-footer { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* --------------------------------------------------------------------------
   19. Header + hero width — kept LAST so it wins the cascade.
   .header-inner and .hero-inner are given max-width: var(--container) in
   sections 5 and 6; this override must come after them.
   -------------------------------------------------------------------------- */
/* The header and hero are the full-bleed, edge-to-edge parts of the page, so
   they use a wider column than the reading sections at every desktop size —
   otherwise a 1440px laptop still shows a broad blank strip left of the title. */
@media (min-width: 1024px) {
  /* No width cap here: the artwork bleeds to the right edge, so the title and
     logos sit a fixed, modest distance from the left edge to match. A capped,
     centred column would leave a wide blank strip on large monitors while the
     art touches the edge — which reads as the hero being off-centre. */
  .header-inner, .hero-inner { max-width: none; padding-inline: clamp(2rem, 5vw, 6.5rem); }
}

/* Kept after .session (section 10) so display:grid wins the cascade. */
/* Equal-height coloured headers across a row. Each card spans two rows of the
   parent grid (header, body) and inherits them via subgrid, so the tallest
   title in the row sets the header height for all of them. Browsers without
   subgrid fall back to a fixed minimum that fits a two-line title. */
@media (min-width: 700px) {
  .session { display: grid; grid-template-rows: subgrid; grid-row: span 2; }
  .session-body { min-height: 0; }
  @supports not (grid-template-rows: subgrid) {
    .session-head { min-height: 132px; }
  }
}