/* Cairo FACE — interior pages (speakers, exhibition, about, agenda, abstract).
   Loaded AFTER styles.css so it inherits the landing page's tokens, nav,
   footer and buttons. Weights follow the structure doc: headings 700,
   body 400, supporting labels 500. */

.page { background: #F5EBE0; color: var(--ink); }
.page main { display: block; }

/* ---- page hero ---- */
.phero { padding: 172px 0 64px; position: relative; overflow: hidden; }
.phero--dark { background: linear-gradient(165deg, #1E1A32 0%, #141828 52%, #081B29 100%); color: #fff; }
.phero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.phero__eyebrow { letter-spacing: 0.14em; text-transform: none; }
.phero h1 { font-size: clamp(34px, 4.6vw, 60px); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; }
.phero__lede { font-size: clamp(16px, 1.5vw, 20px); font-weight: 400; line-height: 1.5; max-width: 68ch; opacity: 0.86; }
.phero__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; margin-top: 12px; }
.phero__stat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.phero__stat b { font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; line-height: 1; }
.phero__stat span { font-size: 13px; font-weight: 500; opacity: 0.7; }
.phero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px; }

/* ---- generic page section ---- */
.psection { padding-block: 72px; }
.psection--tint { background: #F5EBE0; }
.psection__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; margin-bottom: 40px; }
.psection h2 { font-size: clamp(24px, 2.8vw, 38px); font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; }
.psection__lede { font-size: 17px; font-weight: 400; color: var(--muted-light); max-width: 64ch; }

/* ---- value grids (why exhibit / why cairo face / why present) ---- */
.vgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.vgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vgrid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vcard {
  display: flex; flex-direction: column; gap: 10px; padding: 28px 24px;
  border-radius: 20px; border: 1px solid var(--hairline-light);
  background: linear-gradient(160deg, rgba(255,255,255,0.92), rgba(240,245,249,0.55));
}
.vcard h3 { font-size: 18px; font-weight: 700; line-height: 1.25; }
.vcard p { font-size: 15px; font-weight: 400; color: var(--muted-light); line-height: 1.55; }
.vcard__num { font-size: 13px; font-weight: 500; color: var(--accent-strong); }

/* A course card is a .vcard carrying a bullet list instead of a paragraph —
   the deck gives each course two or three points, and they read as a list
   rather than prose. No new card variant: same box, same padding, same radius. */
.coursecard__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.coursecard__list li {
  font-size: 15px; font-weight: 400; line-height: 1.55; color: var(--muted-light);
  padding-inline-start: 20px; position: relative;
}
/* the deck marks each point with a small rotated gold square; this is the
   same idea in the site's own accent */
.coursecard__list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 9px;
  width: 6px; height: 6px; rotate: 45deg;
  background: var(--accent-strong); opacity: 0.7;
}
@media (max-width: 860px) {
  .vgrid--2 { grid-template-columns: minmax(0, 1fr); }
}

/* ---- about: the vision statement and the founder's letter ---- */
.visionwrap { max-width: 76ch; display: flex; flex-direction: column; gap: 20px; }
.visionwrap__p { font-size: 17px; font-weight: 400; line-height: 1.65; color: var(--ink); }
.visionwrap__p + .visionwrap__p { color: var(--muted-light); font-size: 16px; }

/* A signed letter, so it keeps a letter's shape: who it is from at the top,
   the body at reading measure, the signature at the foot. */
.letter {
  max-width: 78ch;
  background: linear-gradient(160deg, rgba(255,255,255,0.94), rgba(240,245,249,0.5));
  border: 1px solid var(--hairline-light); border-radius: 20px;
  padding: 32px; display: flex; flex-direction: column; gap: 24px;
}
.letter__head { display: flex; align-items: center; gap: 16px; }
/* Square source, so no panning is needed. The leadership portraits are
   full-length 1:1.78 frames with the head about a third of the way down;
   object-fit:cover can pan but never zoom past fitting the box width, so
   cropping one to 72px square showed a 17px head adrift in a field of
   backdrop. tools/photos/avatars.py cuts real head-and-shoulders squares. */
.letter__portrait {
  width: 72px; height: 72px; flex: 0 0 auto;
  border-radius: 9999px; object-fit: cover; object-position: 50% 50%;
  border: 1px solid var(--hairline-light);
}
.letter__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.letter__role {
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-strong);
}
.letter__name { font-size: 20px; font-weight: 700; line-height: 1.25; }
.letter__title { font-size: 14px; font-weight: 400; color: var(--muted-light); }
.letter__body { display: flex; flex-direction: column; gap: 16px; }
.letter__body p { font-size: 16px; font-weight: 400; line-height: 1.65; color: var(--muted-light); }
/* the salutation lines are short and belong with the name they address */
.letter__body p:first-child, .letter__body p:nth-child(2) { color: var(--ink); font-weight: 500; }
.letter__body p:first-child { margin-bottom: -8px; }
.letter__sign {
  display: flex; flex-direction: column; gap: 2px;
  padding-top: 20px; border-top: 1px solid var(--hairline-light);
}
.letter__sign span { font-size: 14px; font-weight: 400; color: var(--muted-light); }
.letter__sign b { font-size: 16px; font-weight: 700; color: var(--ink); }
@media (max-width: 620px) {
  .letter { padding: 20px 16px; gap: 20px; }
  .letter__portrait { width: 56px; height: 56px; }
  .letter__name { font-size: 18px; }
  .visionwrap__p { font-size: 16px; }
}

/* ---- speakers page ---- */
/* The controls were one centred flex row: a fixed-width search box and two
   chipsets with an "All" in each, so the reader had two Alls and no idea
   which row mattered. Now the search spans the width with the reset beside
   it, and the two cuts are stacked rows with the main one first. */
.sfilters { display: flex; flex-direction: column; gap: 16px; margin-bottom: 36px; }
.sfilters__bar { display: flex; gap: 12px; align-items: stretch; }
.sfilters__icon {
  width: 17px; height: 17px; flex: 0 0 17px; opacity: 0.5;
  background: currentColor;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E");
}
.sfilters__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sfilters__legend {
  font-size: 12px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted-light);
  min-width: 62px;
}
/* the secondary cut reads quieter than the main one */
.sfilters__row--sub { padding-top: 2px; }
.sfilters__row--sub .sfilters__legend { opacity: 0.72; }
.sfilters__count { margin: 0; font-size: 13px; color: var(--muted-light); min-height: 18px; }
.fchip--all { flex: 0 0 auto; white-space: nowrap; }
.fchip--sm { padding-block: 8px; font-size: 13px; }

@media (max-width: 640px) {
  .sfilters__bar { flex-direction: column; }
  .fchip--all { width: 100%; }
  .sfilters__legend { min-width: 100%; }
}

/* ---- a filter change should be visible ---- */
@keyframes spk-enter {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.spk--enter {
  animation: spk-enter 0.5s var(--ease-out) backwards;
  animation-delay: calc(var(--n, 0) * 45ms);
}
@media (prefers-reduced-motion: reduce) { .spk--enter { animation: none; } }
.sfilters__search {
  /* was `max-width: 380px`, which held the field to 42% of its row — the
     search now spans the bar and the reset chip takes what it needs */
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 9999px;
  border: 1px solid var(--hairline-light); background: #fff;
}
.sfilters__search input { flex: 1; border: 0; outline: 0; background: none; font-family: inherit; font-size: 15px; color: var(--ink); }
.chipset { display: flex; gap: 8px; flex-wrap: wrap; }
.fchip {
  padding: 10px 18px; border-radius: 9999px; font-size: 14px; font-weight: 500;
  border: 1px solid var(--hairline-light); background: #fff; color: var(--muted-light);
  transition: background 0.25s var(--ease-ui), color 0.25s var(--ease-ui), border-color 0.25s var(--ease-ui);
}
.fchip:hover { border-color: var(--accent); }
.fchip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.dayband { margin-top: 48px; }
.dayband__title { font-size: 20px; font-weight: 700; margin-bottom: 20px; }
.sgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.spk {
  display: flex; flex-direction: column; gap: 12px; padding: 20px;
  border-radius: 20px; border: 1px solid var(--hairline-light); background: #fff;
  transition: transform 0.5s var(--ease-out), border-color 0.3s var(--ease-ui);
}
.spk:hover { transform: translateY(-3px); border-color: var(--accent); }
.spk__media { border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 5; background: #EADDD0; }
/* The portraits are a 9:16 plate: the subject cut out over the Cairo FACE
   watermark, head about 39% down. A 4:5 crop centred on the image shows
   roughly the middle 70% — which puts the head at 34% of the card, riding
   high, with a lot of suit beneath. Lifting the window centres the head and
   still keeps the watermark in frame, which is what the client wants kept. */
.spk__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  object-position: 50% 16%;
}
.spk__name { font-size: 18px; font-weight: 700; }
.spk__role { font-size: 13px; font-weight: 500; color: var(--accent-strong); }
.spk__block { display: flex; flex-direction: column; gap: 4px; }
.spk__label { font-size: 12px; font-weight: 500; letter-spacing: 0.1em; color: var(--muted-light); }
.spk__text { font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--muted-light); }
/* The whole card already opened the profile dialog, but nothing on it said
   so — there was no affordance at all, so the only way to find it was to
   guess. A real <button> also makes the dialog reachable by keyboard, which
   a click handler on the <article> never was. */
.spk__cta {
  align-self: flex-start; margin-top: 4px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 9999px;
  border: 1px solid var(--hairline-light); background: transparent;
  font-family: "Outfit", Arial, sans-serif;
  font-size: 13px; font-weight: 500; color: var(--accent-strong);
  white-space: nowrap; cursor: pointer;
  transition: background 0.3s var(--ease-ui), border-color 0.3s var(--ease-ui), color 0.3s var(--ease-ui);
}
.spk__cta .circle-arrow {
  background: rgba(168, 48, 32, 0.12); color: var(--accent-strong);
  transition: background 0.3s var(--ease-ui), color 0.3s var(--ease-ui);
}
.spk:hover .spk__cta, .spk__cta:hover {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.spk:hover .spk__cta .circle-arrow, .spk__cta:hover .circle-arrow {
  background: rgba(255, 255, 255, 0.22); color: #fff;
}
.spk__cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* The card is the click target; the CTA is the link that carries it. A
   stretched pseudo-element covers the card so the whole thing is clickable
   without nesting the markup in an anchor. */
.spk { cursor: pointer; position: relative; }
.spk__cta { text-decoration: none; }
.spk__cta::after { content: ""; position: absolute; inset: 0; border-radius: 20px; }

.sempty { text-align: center; color: var(--muted-light); padding: 32px 0; }

/* ---- agenda ---- */
.agtabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 16px; }
.aghalls { margin-bottom: 28px; }
.agrow {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) 180px;
  gap: 20px; align-items: baseline;
  padding: 20px 24px; border-radius: 16px;
  border: 1px solid var(--hairline-light); background: #fff; margin-bottom: 12px;
}
.agrow__time { font-size: 14px; font-weight: 500; color: var(--accent-strong); }
.agrow__name { font-size: 17px; font-weight: 700; }
.agrow__who { font-size: 14px; font-weight: 400; color: var(--muted-light); }

/* ---- abstract accordion (doc comment [e]: all questions are toggles) ---- */
.qalist { max-width: 860px; margin-inline: auto; }
.qaitem { border-bottom: 1px dashed var(--hairline-light); }
.qaitem summary {
  list-style: none; cursor: pointer; padding: 20px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font-size: 17px; font-weight: 700;
}
.qaitem summary::-webkit-details-marker { display: none; }
.qaitem summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--accent-strong); }
.qaitem[open] summary::after { content: "−"; }
.qaitem__body { padding-bottom: 20px; font-size: 15px; font-weight: 400; line-height: 1.6; color: var(--muted-light); }
.qaitem__body ul { margin: 8px 0 0 18px; display: grid; gap: 6px; }

/* ---- awards / rising star ---- */
.awards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.award { padding: 28px 24px; border-radius: 20px; border: 1px solid var(--accent); background: rgba(168, 48, 32,0.06); }
.award h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.award p { font-size: 15px; font-weight: 400; color: var(--muted-light); }

/* ---- exhibition map ---- */
.mapframe {
  border-radius: 24px; border: 1px dashed var(--hairline-light);
  background: repeating-linear-gradient(135deg, rgba(168, 48, 32,0.07) 0 14px, rgba(168, 48, 32,0) 14px 28px), #EDF3F8;
  min-height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  color: var(--muted-light);
}

/* ---- closing CTA band ---- */
.ctaband { background: linear-gradient(165deg, #1E1A32 0%, #141828 60%, #081B29 100%); color: #fff; padding-block: 80px; }
.ctaband__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.ctaband h2 { font-size: clamp(24px, 2.8vw, 38px); font-weight: 700; }
.ctaband p { max-width: 62ch; font-weight: 400; opacity: 0.84; }
.ctaband__row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 12px; }

/* ---- sticky page button (doc: "Sticky button") ---- */
.stickybar {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 31;
}

@media (max-width: 1100px) {
  .vgrid, .vgrid--3, .vgrid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .phero { padding: 132px 0 48px; }
  .psection { padding-block: 56px; }
  .vgrid, .vgrid--2, .vgrid--3, .vgrid--6, .sgrid, .awards { grid-template-columns: 1fr; }
  .agrow { grid-template-columns: 1fr; gap: 6px; padding: 16px 20px; }
  .phero__stats { gap: 12px 24px; }
}


/* ================= agenda: day picker + hall/time grid =================
   Replaces the old day-chips + hall-chips drill-down, where you had to pick a
   day AND a hall to see four rows and could never see the day as a whole. */
/* The day picker reads as a second tier of the nav: same pill language, same
   glass, tucked directly under it so the two group into one control cluster. */
.agbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 16px; margin-bottom: 24px;
  /* z-index BELOW the nav (both were 20 and the tabs, being later in the DOM,
     painted over the nav pill's bottom edge); 98px leaves a 6px gap under the
     pill so the two read as one stacked cluster rather than colliding */
  position: sticky; top: 98px; z-index: 15;
  padding: 10px 14px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 10px 30px rgba(10, 26, 40, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
/* no blur support: a solid panel beats transparent mush */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .agbar { background: #fff; }
}
/* the tabs sit on glass, so they drop their own heavy card treatment */
.agbar .agdaytab { background: rgba(255, 255, 255, 0.62); }
.agbar .agdaytab.is-on { background: #fff; }

.agdays { display: flex; flex-wrap: wrap; gap: 8px; }
.agdaytab {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 12px 16px; border-radius: 12px; text-align: left; cursor: pointer;
  font-family: inherit; background: #fff; border: 1px solid var(--hairline-light);
  transition: border-color 0.2s var(--ease-ui), box-shadow 0.2s var(--ease-ui);
}
.agdaytab:hover { border-color: var(--accent-strong); }
.agdaytab.is-on {
  border-color: var(--accent-strong);
  box-shadow: inset 0 0 0 1px var(--accent-strong), 0 8px 20px rgba(10, 26, 40, 0.08);
}
.agdaytab__day  { font-size: 15px; font-weight: 700; color: var(--ink); }
.agdaytab__date { font-size: 13px; font-weight: 500; color: var(--accent-strong); }
.agdaytab__kind { font-size: 12px; font-weight: 500; color: var(--muted-light); }

.agnote {
  font-size: 14px; font-weight: 400; line-height: 1.55; color: var(--muted-light);
  background: #fff; border: 1px solid var(--hairline-light); border-radius: 12px;
  padding: 12px 16px; margin-bottom: 24px;
}
.agnote strong { color: var(--ink); font-weight: 600; }

.agday__head { margin-bottom: 16px; }
.agday__title { font-size: 24px; font-weight: 700; line-height: 1.2; }
.agday__lede { font-size: 15px; font-weight: 400; line-height: 1.55; color: var(--muted-light); max-width: 72ch; margin-top: 8px; }
.agday__facts { display: flex; flex-wrap: wrap; gap: 12px 32px; list-style: none; margin: 16px 0 0; padding: 0; }
.agday__facts li { font-size: 14px; font-weight: 400; color: var(--muted-light); }
.agday__facts b { font-size: 20px; font-weight: 700; color: var(--ink); margin-right: 6px; }

/* the grid scrolls sideways rather than shrinking the columns to nothing */
.agridwrap {
  overflow-x: auto; background: #fff;
  border: 1px solid var(--hairline-light); border-radius: 16px;
  -webkit-overflow-scrolling: touch;
}
.agrid {
  display: grid;
  grid-template-columns: 64px repeat(var(--halls, 6), minmax(150px, 1fr));
  grid-template-rows: auto var(--track, 600px);
  min-width: 900px; padding: 0 12px 16px;
}
.agrid__corner {
  grid-column: 1; grid-row: 1;
  position: sticky; inset-inline-start: 0; z-index: 3; background: #fff;
}
.agrid__hall {
  grid-row: 1; position: sticky; top: 0; z-index: 2; background: #fff;
  font-size: 13px; font-weight: 600; color: var(--ink); text-align: center;
  padding: 14px 8px 10px; border-bottom: 1px solid var(--hairline-light);
}
/* the clock column stays put while the calendar scrolls sideways */
.agrid__gutter {
  grid-column: 1; grid-row: 2; position: sticky; inset-inline-start: 0; z-index: 2;
  background: #fff;
}
.agrid__time {
  /* centred on the hour line exactly — a fixed -7px offset left it 2px low */
  position: absolute; inset-inline-end: 12px; transform: translateY(-50%);
  font-size: 12px; font-weight: 500; color: var(--muted-light);
  line-height: 1; white-space: nowrap;
}
.agrid__track {
  grid-row: 2; position: relative;
  border-inline-start: 1px solid rgba(10, 26, 40, 0.07);
}
.agrid__rule {
  position: absolute; left: 0; right: 0;
  border-top: 1px solid rgba(10, 26, 40, 0.08); pointer-events: none;
}
.agrid__rule--half { border-top-color: rgba(10, 26, 40, 0.04); }

/* a session block is placed in pixels from its real start/end time */
.agses {
  position: absolute; z-index: 1; overflow: hidden;
  padding: 7px 9px 7px 11px;
  display: flex; flex-direction: column; gap: 2px;
  background: linear-gradient(160deg, rgba(122, 32, 16, 0.10), rgba(122, 32, 16, 0.05));
  border: 1px solid rgba(122, 32, 16, 0.16);
  border-inline-start: 3px solid var(--accent-strong);
  border-start-start-radius: 4px; border-end-start-radius: 4px;
  border-start-end-radius: 10px; border-end-end-radius: 10px;
  transition: transform 0.18s var(--ease-ui), box-shadow 0.18s var(--ease-ui),
              border-color 0.18s var(--ease-ui), background 0.18s var(--ease-ui);
}
/* concurrent sessions share the hall's width, so they need a hairline apart */
.agses + .agses { margin-left: 0; }
.agses__time { font-size: 11px; font-weight: 600; color: var(--accent-strong); }
.agses__name {
  font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.25;
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
  -webkit-line-clamp: var(--lines, 3);
}
.agses--tight .agses__who { display: none; }
.agses--tight .agses__name { font-size: 13px; }
button.agses { font: inherit; text-align: left; cursor: pointer; }
button.agses:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.agses.is-on {
  background: linear-gradient(160deg, rgba(122, 32, 16,0.22), rgba(122, 32, 16,0.12));
  border-color: var(--accent-strong);
}
.agses:hover, .agses:focus-visible {
  z-index: 3; transform: translateY(-2px);
  background: linear-gradient(160deg, rgba(122, 32, 16, 0.17), rgba(122, 32, 16, 0.09));
  border-color: rgba(122, 32, 16, 0.34);
  border-left-color: var(--accent-strong);
  box-shadow: 0 8px 20px rgba(10, 26, 40, 0.14);
}
.agses:hover .agses__name { color: var(--accent-strong); }
@media (prefers-reduced-motion: reduce) {
  .agses { transition: none; }
  .agses:hover, .agses:focus-visible { transform: none; }
}
.agses__who  { font-size: 12px; font-weight: 400; color: var(--muted-light); }

@media (max-width: 767px) {
  /* the day tabs fill the bar, but the export button hugs its label */
  .agbar { flex-direction: column; align-items: stretch; }
  .agbar .agcal { align-self: flex-start; }
  .agdays { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .agdaytab { padding: 10px 12px; }
  .agdaytab__day { font-size: 14px; }
  .agday__title { font-size: 20px; }
  .agrid { min-width: 760px; grid-template-columns: 52px repeat(var(--halls, 6), minmax(142px, 1fr)); }
}


/* ---- the talk list for a selected session block ---- */
.agdetail {
  margin-top: 20px; background: #fff; border: 1px solid var(--hairline-light);
  border-radius: 16px; padding: 20px 24px;
}
.agdetail__title { font-size: 20px; font-weight: 700; line-height: 1.25; }
.agdetail__meta { font-size: 13px; font-weight: 500; color: var(--accent-strong); margin-top: 4px; }
.agtalks { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; }
.agtalk {
  display: grid; grid-template-columns: 108px 1fr; gap: 16px;
  padding: 12px 0; border-top: 1px solid var(--hairline-light);
}
.agtalk__time { font-size: 13px; font-weight: 600; color: var(--accent-strong); white-space: nowrap; }
.agtalk__body { display: flex; flex-direction: column; gap: 2px; }
.agtalk__title { font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.agtalk__who { font-size: 13px; font-weight: 400; color: var(--muted-light); }
@media (max-width: 620px) {
  .agdetail { padding: 16px; }
  .agtalk { grid-template-columns: 1fr; gap: 4px; }
}


/* ---- session detail: who runs the session, and what each talk is tagged ----
   Moderator, chairs and panel belong to the session, not to any one talk, so
   they head the sheet instead of repeating down the list. */
.agsheet__desc {
  font-size: 14px; font-weight: 400; line-height: 1.55;
  color: var(--muted-light); margin-top: 12px; max-width: 72ch;
}
.agsheet__none { font-size: 14px; color: var(--muted-light); margin-top: 16px; }
.agpeople {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 16px; margin: 16px 0 0;
  padding-top: 16px; border-top: 1px solid var(--hairline-light);
}
.agpeople__k {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-strong); line-height: 1.5;
}
.agpeople__v { font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--ink); margin: 0; }
.agtalk__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.agbadge {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  padding: 4px 8px; border-radius: 9999px;
  color: var(--accent-strong); background: rgba(122, 32, 16, 0.10);
  border: 1px solid rgba(122, 32, 16, 0.18);
}
@media (max-width: 620px) {
  .agpeople { grid-template-columns: 1fr; gap: 4px; }
  .agpeople__v { margin-bottom: 8px; }
}


/* ---- the two fixtures that are not hall sessions ----
   The opening ceremony runs in place of the halls, and the gala closes day 2,
   so neither belongs in a hall column. Both sit outside the grid. */
.agplenary, .aggala {
  background: #fff; border: 1px solid var(--hairline-light); border-radius: 16px;
  padding: 24px 28px; margin-bottom: 24px;
}
.aggala { margin: 24px 0 0; }
.agplenary__k, .aggala__k {
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-strong);
}
.agplenary__h, .aggala__h { font-size: 20px; font-weight: 700; line-height: 1.25; margin-top: 4px; }
.agplenary__lede {
  font-size: 15px; font-weight: 400; line-height: 1.55;
  color: var(--muted-light); margin-top: 8px; max-width: 72ch;
}
.agtalks--plain .agtalk__time { color: var(--muted-light); }
.aggala__artist { font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--accent-strong); margin-top: 8px; }
.aggala__sub { font-size: 15px; font-weight: 400; color: var(--muted-light); margin-top: 4px; }
.aggala__where { font-size: 14px; font-weight: 500; color: var(--ink); margin-top: 12px; }
@media (max-width: 620px) {
  .agplenary, .aggala { padding: 20px 16px; }
  .agplenary__h, .aggala__h { font-size: 18px; }
  .aggala__artist { font-size: 20px; }
}


/* ---- a day whose programme has not been published yet ----
   Better than a grid of identical "To be announced" blocks, which invented four
   session slots in six halls that nobody has confirmed. */
.agpending {
  background: #fff; border: 1px solid var(--hairline-light); border-radius: 16px;
  padding: 24px 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
}
.agpending__lead {
  font-size: 16px; font-weight: 400; line-height: 1.55; color: var(--muted-light); max-width: 72ch;
}
.agpending__h {
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-strong);
}
.agpending__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.agpending__list li {
  font-size: 15px; font-weight: 400; line-height: 1.55; color: var(--muted-light);
  max-width: 72ch; padding-inline-start: 18px; position: relative;
}
.agpending__list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent-strong);
}
.agpending__list b { color: var(--ink); font-weight: 600; }
@media (max-width: 620px) { .agpending { padding: 20px; } }

@media (max-width: 767px) {
  .agbar { top: 74px; padding: 8px 10px; border-radius: 14px; }
}


/* ================= person pop-up ================= */
body.pmodal-open { overflow: hidden; }
.pmodal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.pmodal[hidden] { display: none; }
.pmodal__scrim { position: absolute; inset: 0; background: rgba(6, 20, 32, 0.62); backdrop-filter: blur(3px); }
.pmodal__panel {
  position: relative; z-index: 1; background: #fff; color: var(--ink, #0C1828);
  width: min(620px, 100%); max-height: min(84vh, 760px); overflow-y: auto;
  border-radius: 20px; padding: 28px; box-shadow: 0 32px 80px rgba(6, 20, 32, 0.38);
  animation: pmIn 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes pmIn { from { opacity: 0; transform: translateY(12px) scale(0.985); } to { opacity: 1; transform: none; } }
.pmodal__x {
  position: absolute; top: 14px; inset-inline-end: 14px; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(10, 26, 40, 0.14); background: #fff; cursor: pointer;
  font-size: 20px; line-height: 1; color: #0C1828; font-family: inherit;
}
.pmodal__x:hover { background: #F5EBE0; }
.pmodal__head { display: flex; gap: 18px; align-items: center; padding-inline-end: 36px; }
.pmodal__media {
  width: 96px; height: 96px; flex: 0 0 96px; border-radius: 50%; overflow: hidden;
  background: #EADDD0; box-shadow: 0 8px 20px rgba(10, 26, 40, 0.14);
}
.pmodal__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pmodal__id h2 { font-size: 25px; font-weight: 700; line-height: 1.15; }
.pmodal__role { font-size: 14px; font-weight: 500; color: #7A2010; margin-top: 4px; }
.pmodal__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pmodal__chip {
  font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 9999px;
  background: rgba(122, 32, 16, 0.09); color: #7A2010;
}
.pmodal__bio { font-size: 15px; font-weight: 400; line-height: 1.6; color: #6B6470; margin-top: 20px; }
.pmodal__note { font-size: 14px; color: #6B6470; margin-top: 20px; }
.pmodal__sessions { margin-top: 24px; }
.pmodal__sessions h3 {
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #7A2010;
}
.pmodal__sessions ol { list-style: none; margin: 12px 0 0; padding: 0; }
.pmodal__sessions li {
  display: grid; grid-template-columns: 104px 1fr; gap: 14px;
  padding: 12px 0; border-top: 1px solid rgba(10, 26, 40, 0.1);
}
.pmodal__when { font-size: 13px; font-weight: 600; color: #7A2010; white-space: nowrap; }
.pmodal__what { display: flex; flex-direction: column; gap: 3px; }
.pmodal__what b { font-size: 15px; font-weight: 500; line-height: 1.4; }
.pmodal__what span { font-size: 13px; color: #6B6470; }
@media (max-width: 560px) {
  .pmodal { padding: 14px; }
  .pmodal__panel { padding: 22px 18px; }
  .pmodal__head { flex-direction: column; align-items: flex-start; gap: 14px; padding-inline-end: 30px; }
  .pmodal__media { width: 78px; height: 78px; flex-basis: 78px; }
  .pmodal__sessions li { grid-template-columns: 1fr; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { .pmodal__panel { animation: none; } }


/* ================= abstract: live submission window ================= */
.psection--status { padding-block: 0; margin-top: -32px; position: relative; z-index: 2; }
.asub {
  background: #fff; border: 1px solid var(--hairline-light); border-radius: 20px;
  padding: 24px 28px; display: flex; flex-direction: column; gap: 20px;
  box-shadow: 0 18px 44px rgba(10, 26, 40, 0.10);
}
.asub__state { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: var(--ink); }
.asub__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted-light); flex: 0 0 9px; }
.asub[data-state="open"]   .asub__dot { background: #1FA971; box-shadow: 0 0 0 4px rgba(31, 169, 113, 0.16); }
.asub[data-state="soon"]   .asub__dot { background: #C98A1B; box-shadow: 0 0 0 4px rgba(201, 138, 27, 0.16); }
.asub[data-state="closed"] .asub__dot { background: #B4453C; box-shadow: 0 0 0 4px rgba(180, 69, 60, 0.16); }

/* ---- the submission timeline ----
   It used to stack: status, then three dates, then the button on a row of
   its own — which on a wide card left an empty band across the middle and
   stranded the button in the corner (a duplicate `align-self: flex-end`
   further down this file was pushing it there). The status and the action
   belong on the same line: they are the same sentence. */
.asub__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.asub__cta { flex: none; }

/* The three bars used to sit apart with a 16px gap, which read as three
   unrelated bars rather than one run of time. Now they butt together into a
   single rail, each milestone marked on it, and the segment the reader is
   actually inside fills as its period elapses. */
.asub__line {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
}
.asub__line li {
  position: relative; display: flex; flex-direction: column; gap: 3px;
  padding: 22px 20px 0 0;
}
/* the rail, and the part of it already behind us */
.asub__line li::before, .asub__line li::after {
  content: ""; position: absolute; top: 0; left: 0; height: 3px; border-radius: 2px;
}
/* the run of time ends at the last milestone — it used to carry on to the
   edge of the card, which read as a timeline with something still to come */
.asub__line li:last-child::before { right: auto; width: 0; }
.asub__line li::before { right: 0; background: var(--hairline-light); }
.asub__line li::after {
  width: calc(var(--prog, 0) * 100%);
  background: var(--asub-fill, var(--accent-strong));
  transition: width 1.1s var(--ease-out);
}
/* and the milestone sitting on it */
.asub__pt {
  /* Centred on the milestone in BOTH axes, derived rather than eyeballed:
     `left: 0` put the dot's left EDGE on the segment start, leaving its
     centre 6.3px to the right of the date it marks, and a content-box
     `top: -3px` left it 1.9px below the rail's centreline. Both offsets are
     now half the dot's own size, so changing --pt keeps it centred. */
  --pt: 13px;                  /* full width, white ring included */
  --rail: 3px;
  position: absolute; z-index: 1;
  top: calc((var(--rail) - var(--pt)) / 2);
  left: calc(var(--pt) / -2);
  width: var(--pt); height: var(--pt); box-sizing: border-box;
  border-radius: 50%;
  background: var(--hairline-light); border: 2px solid #fff;
}
.asub__line li b { font-size: 15px; font-weight: 700; color: var(--muted-light); }
.asub__line li span { font-size: 13px; font-weight: 400; color: var(--muted-light); }

.asub__line li.is-done { --prog: 1; }
.asub__line li.is-done b { color: var(--ink); }
.asub__line li.is-done .asub__pt { background: var(--accent-strong); }

/* the window the reader is inside right now */
.asub__line li.is-active { --asub-fill: #1FA971; }
.asub__line li.is-active b { color: var(--ink); }
.asub__line li.is-active span { color: #1FA971; font-weight: 500; }
.asub__line li.is-active .asub__pt { background: #1FA971; box-shadow: 0 0 0 3px rgba(31, 169, 113, 0.18); }

/* The milestone still ahead. The deadline was the most muted of the three,
   which is backwards: it is the only date a reader deciding whether to
   submit has to act on. */
.asub__line li.is-next b { color: var(--ink); }
.asub__line li.is-next span { color: var(--accent-strong); font-weight: 500; }
.asub__line li.is-next .asub__pt {
  background: #fff; border-color: var(--accent-strong);
  box-shadow: 0 0 0 3px rgba(168, 48, 32, 0.18);
}
/* both at once (before the window opens) reads as the live one */
.asub__line li.is-active.is-next .asub__pt {
  background: #1FA971; border-color: #fff; box-shadow: 0 0 0 3px rgba(31, 169, 113, 0.18);
}
.asub__line li.is-active.is-next span { color: #1FA971; }

@media (max-width: 700px) {
  .psection--status { margin-top: -24px; }
  .asub { padding: 20px; gap: 16px; }
  .asub__head { gap: 16px; }
  .asub__cta { width: 100%; justify-content: center; }
  /* stacked, the rail runs down the left instead of across the top */
  .asub__line { grid-template-columns: 1fr; gap: 0; }
  .asub__line li { padding: 0 0 20px 22px; }
  .asub__line li:last-child { padding-bottom: 0; }
  .asub__line li::before, .asub__line li::after {
    top: 10px; left: 4px; width: var(--rail, 3px); height: auto; bottom: 0; right: auto;
  }
  .asub__line li::after { height: calc(var(--prog, 0) * 100%); bottom: auto; transition: height 1.1s var(--ease-out); }
  .asub__line li:last-child::before, .asub__line li:last-child::after { bottom: auto; height: 0; }
  /* dot centre on the rail's centreline (4 + rail/2) and on the first text line */
  .asub__pt {
    top: calc(10px - var(--pt) / 2);
    left: calc(4px + var(--rail) / 2 - var(--pt) / 2);
  }
}


/* ================= abstract page visuals ================= */
/* the client's own submission artwork, paired with the copy */
.afeature__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px; align-items: center;
}
.afeature__media {
  margin: 0; border-radius: 18px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(10, 26, 40, 0.18);
}
.afeature__media img { display: block; width: 100%; height: auto; }
.afeature__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.afeature__copy h2 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; line-height: 1.18; }
.afeature__copy p { font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--muted-light); max-width: 52ch; }
@media (max-width: 820px) {
  .afeature__inner { grid-template-columns: 1fr; gap: 24px; }
}

/* faculty faces */
.afaces {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 24px 16px;
}
.aface a {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; text-decoration: none; color: inherit;
}
.aface img {
  width: 100%; max-width: 116px; aspect-ratio: 1; border-radius: 50%;
  object-fit: cover; background: #EADDD0; display: block;
  box-shadow: 0 8px 20px rgba(10, 26, 40, 0.12);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s;
}
.aface a:hover img { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(10, 26, 40, 0.2); }
.aface span { font-size: 14px; font-weight: 500; line-height: 1.3; text-wrap: balance; }
.aface a:hover span { color: var(--accent-strong); }
.afaces__foot { display: flex; justify-content: center; margin-top: 32px; }
@media (max-width: 520px) {
  .afaces { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 18px 12px; }
  .aface span { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .aface img { transition: none; }
  .aface a:hover img { transform: none; }
}


/* the search field itself was a 17px-tall hit area inside a 44px pill: the
   label catches the tap, but only if the thumb lands on the padding */
.sfilters__search { padding-block: 4px; }
.sfilters__search input { padding-block: 10px; min-height: 24px; }

/* the sticky CTA steps aside while the hero's own button is still on screen
   (.stickybar already carries translateX(-50%), so the hidden state has to
   restate it or the bar jumps to the right as it fades) */
.stickybar { transition: opacity 0.3s var(--ease-ui), transform 0.35s var(--ease-out); }
.stickybar.is-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(20px);
  pointer-events: none;
}


/* ================= registration page ================= */
/* the fee toggle reuses the speakers page's filter chips, so the two pages
   share one control language rather than growing a second tab component */
.regtoggle { justify-content: center; margin-bottom: 24px; }
.regpanel[hidden] { display: none; }
.regpanel .price {
  color: var(--accent-strong);
  margin-top: 4px;
}
.regpanel .vcard { gap: 8px; }
.regnote {
  margin-top: 16px; text-align: center;
  font-size: 14px; font-weight: 400; color: var(--muted-light);
}


/* ================= account screens (log in / create account) =================
   Form on one side, brand image on the other. The panel is capped so the
   fields never stretch into an unreadable line length on a wide monitor. */
.auth { padding: 148px 0 96px; position: relative; }
.auth__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: 64px; align-items: center;
}
.auth__panel {
  width: 100%; max-width: 520px;
  background: #fff; border: 1px solid var(--hairline-light);
  border-radius: 24px; padding: 40px;
  box-shadow: 0 24px 60px rgba(10, 26, 40, 0.10);
}
.auth__eyebrow { font-size: 13px; font-weight: 500; letter-spacing: 0.12em; color: var(--accent-strong); }
.auth__panel h1 { font-size: clamp(26px, 3vw, 36px); font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; margin-top: 8px; }
.auth__lede { font-size: 15px; font-weight: 400; line-height: 1.55; color: var(--muted-light); margin-top: 12px; }
.auth__form { margin-top: 28px; }

.auth__art {
  position: relative; overflow: hidden;
  border-radius: 24px; aspect-ratio: 4 / 5;
  box-shadow: 0 28px 64px rgba(10, 26, 40, 0.20);
}
.auth__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.auth__art figcaption {
  position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 2;
  padding: 16px 20px; border-radius: 16px; color: #fff;
  background: rgba(10, 26, 40, 0.44);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.20);
}
.auth__art b { display: block; font-size: 15px; font-weight: 600; }
.auth__art span { font-size: 13px; font-weight: 400; opacity: 0.8; }

/* ---- fields ---- */
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; position: relative; }
.field > label { font-size: 13px; font-weight: 500; color: var(--ink); }
.field input, .field select {
  height: 48px; padding: 0 16px; width: 100%;
  border-radius: 12px; border: 1px solid var(--hairline-light);
  background: #fff; color: var(--ink);
  font-family: inherit; font-size: 15px; font-weight: 400;
  transition: border-color 0.2s var(--ease-ui), box-shadow 0.2s var(--ease-ui);
}
.field select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent-strong) 50%),
                    linear-gradient(135deg, var(--accent-strong) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  padding-inline-end: 44px;
}
.field input:focus, .field select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(168, 48, 32, 0.20);
}
.field input::placeholder { color: rgba(10, 26, 40, 0.38); }
/* the reveal button sits inside the field, clear of the text */
.field--pw input { padding-inline-end: 76px; }
.pwtoggle {
  position: absolute; inset-inline-end: 8px; bottom: 6px;
  height: 36px; padding: 0 12px; border-radius: 9999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--accent-strong); background: rgba(168, 48, 32, 0.10);
  white-space: nowrap;
}
.pwtoggle:hover { background: rgba(168, 48, 32, 0.18); }
.field__hint { font-size: 12px; font-weight: 400; color: var(--muted-light); }
.field__err { font-size: 13px; font-weight: 500; color: #B4453C; display: none; }
.field.is-bad input, .field.is-bad select { border-color: #B4453C; }
.field.is-bad .field__err { display: block; }

.checkrow { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; }
.checkrow input { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; accent-color: var(--accent); }
.checkrow label { font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--muted-light); }
.checkrow.is-bad label { color: #B4453C; }

.authrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.authrow .checkrow { margin-bottom: 0; }
.authlink { font-size: 14px; font-weight: 500; color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.authlink:hover { color: var(--accent); }
.auth__alt { font-size: 15px; font-weight: 400; color: var(--muted-light); margin-top: 24px; }

/* the handoff notice, shown once the form validates */
.auth__notice {
  display: none; margin-top: 24px; padding: 20px;
  border-radius: 16px; border: 1px solid var(--hairline-light);
  background: rgba(168, 48, 32, 0.07);
}
.auth__notice.is-on { display: block; }
.auth__notice p { font-size: 14px; font-weight: 400; line-height: 1.55; color: var(--muted-light); }
.auth__notice .btn-pill { margin-top: 16px; }

@media (max-width: 960px) {
  .auth__inner { grid-template-columns: 1fr; gap: 32px; }
  .auth__art { order: -1; aspect-ratio: 16 / 9; }
  .auth__panel { max-width: none; }
}
@media (max-width: 600px) {
  .auth { padding: 116px 0 64px; }
  .auth__panel { padding: 24px 20px; border-radius: 20px; }
  .auth__art { border-radius: 18px; }
}

/* "Forgotten your password?" sits alone on a row, so it needs its own thumb
   height on touch — the inline links inside a sentence are exempt */
@media (pointer: coarse), (max-width: 900px) {
  .authrow .authlink { padding-block: 10px; display: inline-block; }
}


/* ================= account shell — tabbed card over the reel =================
   Sign up and sign in are one screen with a toggle, over the event reel with
   a scrim heavy enough to hold AA contrast on every frame. Same tokens as the
   rest of the site: accent #A83020, pill radii, Graphik, 4px spacing. */
.authshell {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: 116px 0 64px;
  overflow: hidden;
  background: #05111C;
}
.authshell__reel {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.42;
}
/* the colour wash the reference gets from its light streaks, rebuilt from
   our own accent rather than sampled from the screenshot */
.authshell__glow {
  position: absolute; inset: -10%; z-index: 1; pointer-events: none;
  background:
    radial-gradient(42% 38% at 14% 18%, rgba(168, 48, 32, 0.45), transparent 70%),
    radial-gradient(38% 42% at 86% 78%, rgba(122, 32, 16, 0.42), transparent 72%),
    radial-gradient(60% 50% at 50% 50%, rgba(5, 17, 28, 0.20), rgba(5, 17, 28, 0.86) 78%);
  animation: moDrift 26s ease-in-out infinite alternate;
}
.authshell__grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.14) 0.5px, transparent 0.5px);
  background-size: 3px 3px; opacity: 0.4; mix-blend-mode: overlay;
}

.authcard {
  position: relative; z-index: 2;
  width: min(560px, calc(100vw - 32px));
  padding: 32px;
  border-radius: 24px;
  background: rgba(16, 28, 40, 0.72);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
          backdrop-filter: blur(28px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55);
  color: #fff;
}
.authcard__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

/* the segmented toggle */
.authtabs {
  display: inline-flex; padding: 4px; gap: 4px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.authtab {
  padding: 10px 22px; border-radius: 9999px;
  font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.62); white-space: nowrap;
  transition: background 0.3s var(--ease-ui), color 0.3s var(--ease-ui);
}
.authtab:hover { color: #fff; }
.authtab.is-on { background: rgba(255, 255, 255, 0.14); color: #fff; }

.authcard__close {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff; font-size: 18px; line-height: 1;
  transition: background 0.25s var(--ease-ui);
}
.authcard__close:hover { background: rgba(255, 255, 255, 0.18); }

.authcard h1 { font-size: clamp(26px, 3vw, 34px); font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; margin-top: 24px; }
.authcard__lede { font-size: 15px; font-weight: 400; line-height: 1.55; color: rgba(255, 255, 255, 0.66); margin-top: 8px; }
.authcard form { margin-top: 24px; }

/* two fields on one row, as in the reference */
.fieldrow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fieldrow .field { margin-bottom: 20px; }

/* dark field treatment — same 48px height and 12px radius as the light one */
.authcard .field > label { color: rgba(255, 255, 255, 0.72); }
.authcard .field input,
.authcard .field select {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.authcard .field input::placeholder { color: rgba(255, 255, 255, 0.38); }
.authcard .field input:focus,
.authcard .field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(168, 48, 32, 0.28);
  background: rgba(255, 255, 255, 0.09);
}
.authcard .field select option { color: #0C1828; }
.authcard .field__hint { color: rgba(255, 255, 255, 0.5); }
.authcard .checkrow label { color: rgba(255, 255, 255, 0.66); }
.authcard .authlink { color: #F0D8C4; }
.authcard .authlink:hover { color: #fff; }

/* a field that carries a leading icon */
.field--icon input { padding-inline-start: 46px; }
.field__icon {
  position: absolute; inset-inline-start: 15px; bottom: 14px;
  width: 20px; height: 20px; color: rgba(255, 255, 255, 0.46);
  pointer-events: none;
}
.field__icon svg { width: 100%; height: 100%; display: block; }

/* the phone field pairs a country code with the number */
.field--phone .fieldpair { display: flex; gap: 8px; }
.field--phone select { width: 116px; flex: 0 0 116px; }
.field--phone input { flex: 1; min-width: 0; }

/* the reference's full-width primary; still 48px tall and pill-radius */
.authcard .btn-pill.authsubmit {
  width: 100%; justify-content: center;
  background: #fff; color: #0C1828;
  padding-inline: 24px;
}
.authcard .btn-pill.authsubmit:hover { background: #F5EBE0; box-shadow: 0 14px 34px rgba(0,0,0,0.4); }
.authcard .btn-pill.authsubmit .circle-arrow { background: rgba(10, 26, 40, 0.10); color: #0C1828; }
.authcard .formactions { display: block; }

.authterms {
  margin-top: 24px; text-align: center;
  font-size: 13px; font-weight: 400; line-height: 1.6; color: rgba(255, 255, 255, 0.54);
}
.authcard .auth__notice {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
}
.authcard .auth__notice p { color: rgba(255, 255, 255, 0.76); }
.authcard .auth__alt { color: rgba(255, 255, 255, 0.6); text-align: center; }

.authpanel[hidden] { display: none; }

@media (max-width: 560px) {
  .authshell { padding: 96px 0 48px; }
  .authcard { padding: 24px 20px; border-radius: 20px; }
  .fieldrow { grid-template-columns: 1fr; gap: 0; }
  .authtab { padding: 10px 16px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .authshell__glow { animation: none; }
}


/* ================= card icons + gradient accents =================
   The icon tile is the one new component. It reuses the existing 12px
   radius, the accent tokens and the card's own hover timing, so it reads
   as part of the set rather than a bolt-on. */
.vicon {
  width: 44px; height: 44px; flex: 0 0 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  color: var(--accent-strong);
  background: linear-gradient(150deg, rgba(168, 48, 32, 0.22), rgba(168, 48, 32, 0.05));
  border: 1px solid rgba(168, 48, 32, 0.22);
  transition: transform 0.5s var(--ease-out), background 0.4s var(--ease-ui),
              color 0.3s var(--ease-ui), border-color 0.3s var(--ease-ui);
}
.vicon svg { width: 22px; height: 22px; display: block; }
.vcard .vicon { margin-bottom: 4px; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .vcard:hover .vicon,
  .award:hover .vicon {
    transform: translateY(-2px);
    background: linear-gradient(150deg, var(--accent), var(--accent-strong));
    border-color: transparent;
    color: #fff;
  }
}
/* on the dark bands the tile inverts rather than disappearing */
.ctaband .vicon, .phero .vicon {
  color: #fff;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.06));
  border-color: rgba(255, 255, 255, 0.24);
}

/* ---- gradient accents ----
   Flat fills are what made the light sections read as empty. These are all
   very low contrast — they give the surface a direction without becoming
   decoration, and none of them change a box's size or spacing. */

/* the tinted section gets a gradient rather than one flat value */
.psection--tint {
  background: linear-gradient(170deg, #F5EBE0 0%, #E4EDF5 55%, #EDF3F8 100%);
}
/* a hairline that fades in from nothing at both ends, marking the seam
   between two sections without drawing a hard rule across the page */
.psection + .psection::before {
  content: "";
  position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(168, 48, 32, 0.28) 30%, rgba(168, 48, 32, 0.28) 70%, transparent);
  pointer-events: none;
}
/* the closing band picks up the same two accent lights as the heroes */
.ctaband { position: relative; overflow: hidden; isolation: isolate; }
.ctaband::before {
  content: "";
  position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 36% at 16% 20%, rgba(168, 48, 32, 0.34), transparent 70%),
    radial-gradient(36% 40% at 84% 80%, rgba(122, 32, 16, 0.30), transparent 72%);
  animation: moDrift 24s ease-in-out infinite alternate;
}
/* the value cards get a faint top-lit edge, so a grid of them has depth */
.vcard {
  background:
    linear-gradient(160deg, rgba(255,255,255,0.96), rgba(240,245,249,0.58)),
    linear-gradient(180deg, rgba(168, 48, 32,0.10), transparent 42%);
}
@media (prefers-reduced-motion: reduce) { .ctaband::before { animation: none; } }

/* On the contact cards the link IS the action — "Open WhatsApp", the two
   numbers, the address — not a link inside a sentence, so it needs a thumb's
   worth of height rather than the 15px line box it inherited. */
@media (pointer: coarse), (max-width: 900px) {
  .vcard p > .u { display: inline-block; padding-block: 12px; }
}


/* ================= agenda: phone day view =================
   Four hall columns on a 375px screen would be ~80px each, so the phone gets
   one time-ordered list instead. It used to bucket sessions under an hour
   label; that was worse than nothing — a "14:00" heading sat above sessions
   starting at 14:10, 14:20, 14:40 and 14:50, and its gutter ate 56px of title
   width. Every row now carries its own start time and length, the way a phone
   calendar does, and the hall moves into the subtitle. The desktop grid is
   untouched. */
.agmob { display: none; }
@media (max-width: 767px) {
  .agridwrap { display: none; }
  .agmob { display: block; }
}

.agcard {
  display: grid; grid-template-columns: 62px 3px minmax(0, 1fr);
  gap: 12px; align-items: stretch;
  width: 100%; text-align: start;
  padding: 16px 4px; margin: 0;
  background: none; border: 0; border-radius: 0;
  font-family: inherit;
}
.agcard + .agcard { border-top: 1px solid var(--hairline-light); }
button.agcard { cursor: pointer; }
.agcard:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: -2px; }

.agcard__when { display: flex; flex-direction: column; gap: 2px; padding-top: 1px; }
.agcard__start {
  font-size: 14px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1.25;
}
.agcard__dur { font-size: 12px; font-weight: 400; color: var(--muted-light); line-height: 1.25; }

/* the rule replaces the card outline: same left-edge accent, none of the chrome */
.agcard__rule { border-radius: 9999px; background: var(--accent-strong); }

.agcard__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.agcard__name { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.agcard__meta { font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--muted-light); }
/* with four halls running at once the hall is the row's most useful second
   fact, so it leads the subtitle in the accent rather than sitting in a chip */
.agcard__hall { font-weight: 600; color: var(--accent-strong); }

.agcard:active .agcard__name, .agcard.is-on .agcard__name { color: var(--accent-strong); }
.agcard.is-on .agcard__rule { box-shadow: 0 0 0 1px var(--accent-strong); }

/* ---- breakout rooms ----
   A room-by-hour grid, deliberately empty: the booklet's cells carry sponsor
   logos and no captions, so the cells here show the slot exists without
   claiming who runs it. */
.breakout {
  margin-top: 32px; padding: 24px 28px;
  background: #fff; border: 1px solid var(--hairline-light); border-radius: 16px;
}
.breakout__h { font-size: 20px; font-weight: 700; line-height: 1.25; }
.breakout__lede {
  font-size: 14px; font-weight: 400; line-height: 1.55;
  color: var(--muted-light); margin-top: 8px; max-width: 72ch;
}
.breakout__grid {
  display: grid; grid-template-columns: 112px repeat(var(--rooms, 4), minmax(0, 1fr));
  gap: 4px; margin-top: 20px;
}
.breakout__corner, .breakout__room {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-strong); padding: 8px 4px;
}
.breakout__corner { color: var(--muted-light); }
.breakout__room { text-align: center; }
.breakout__time {
  font-size: 13px; font-weight: 500; color: var(--ink);
  font-variant-numeric: tabular-nums; display: flex; align-items: center;
  padding-inline-end: 8px;
}
.breakout__cell {
  min-height: 40px; border-radius: 8px;
  background: rgba(122, 32, 16, 0.06);
  border: 1px solid rgba(122, 32, 16, 0.12);
}
.breakout__cell--all {
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: var(--accent-strong);
  background: rgba(122, 32, 16, 0.14); border-color: rgba(122, 32, 16, 0.24);
}
@media (max-width: 620px) {
  .breakout { padding: 20px 16px; }
  .breakout__grid { grid-template-columns: 88px repeat(var(--rooms, 4), minmax(0, 1fr)); gap: 3px; }
  /* "Malachite" does not fit a 52px column on one line, so the room labels
     wrap rather than spill over the next column */
  .breakout__room {
    font-size: 10px; letter-spacing: 0; line-height: 1.2;
    padding-inline: 0; overflow-wrap: anywhere; hyphens: auto;
  }
  .breakout__time { font-size: 12px; }
  .breakout__cell { min-height: 32px; }
}

/* the calendar glyph replaces the arrow in the export button */
.agcal__ico svg { width: 15px; height: 15px; display: block; }

/* ================= session detail — dialog on web, sheet on a phone ==== */
body.agsheet-open { overflow: hidden; }
.agsheet { position: fixed; inset: 0; z-index: 210; display: flex; }
.agsheet[hidden] { display: none; }
.agsheet__scrim { position: absolute; inset: 0; background: rgba(6, 20, 32, 0.6); backdrop-filter: blur(3px); }
.agsheet__panel {
  position: relative; z-index: 1;
  background: #fff; color: var(--ink);
  box-shadow: 0 32px 80px rgba(6, 20, 32, 0.4);
  overflow-y: auto;
}
.agsheet__grab { display: none; }
.agsheet__x {
  position: absolute; top: 14px; inset-inline-end: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--hairline-light); background: #fff;
  font-size: 20px; line-height: 1; color: var(--ink); cursor: pointer;
}
.agsheet__x:hover { background: #F5EBE0; }
.agsheet__title { font-size: 20px; font-weight: 700; line-height: 1.25; padding-inline-end: 40px; }
.agsheet__meta { font-size: 13px; font-weight: 500; color: var(--accent-strong); margin-top: 4px; }
.agsheet .agtalks { margin-top: 16px; }

/* web: a centred dialog */
@media (min-width: 768px) {
  .agsheet { align-items: center; justify-content: center; padding: 24px; }
  .agsheet__panel {
    width: min(620px, 100%); max-height: min(84vh, 760px);
    border-radius: 20px; padding: 28px;
    animation: pmIn 0.26s cubic-bezier(0.16, 1, 0.3, 1);
  }
}
/* phone: a bottom sheet that rises from the edge */
@media (max-width: 767px) {
  .agsheet { align-items: flex-end; }
  .agsheet__panel {
    width: 100%; max-height: 82svh;
    border-radius: 20px 20px 0 0;
    padding: 12px 20px calc(24px + env(safe-area-inset-bottom));
    animation: agSheetUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .agsheet__grab {
    display: block; width: 44px; height: 4px; margin: 0 auto 12px;
    border-radius: 9999px; border: 0; background: rgba(10, 26, 40, 0.18); cursor: pointer;
  }
  .agsheet__x { top: 10px; }
  .agsheet__title { font-size: 18px; }
}
@keyframes agSheetUp { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .agsheet__panel { animation: none; }
}

/* the still sits under the reel: if autoplay is refused — iOS Low Power Mode
   is the usual reason — the composition still has its image rather than a
   flat navy rectangle */
.authshell__still {
  position: absolute; inset: 0; z-index: 0;
  background: url("../img/cf-hero.jpg?v=b4") center/cover no-repeat;
  opacity: 0.34;
}


/* ================= dark section variant =================
   Abstract and exhibition read flat because every band was a light tint.
   Alternating a dark band between them gives the page a rhythm without
   changing any dimension: same padding, same grid, same card sizes — only
   the surface and the colours that sit on it. */
.psection--dark {
  background: linear-gradient(168deg, #1E1A32 0%, #141828 55%, #081B29 100%);
  color: #fff;
  overflow: hidden; isolation: isolate;
}
.psection--dark::after {
  content: "";
  position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 34% at 14% 18%, rgba(168, 48, 32, 0.30), transparent 70%),
    radial-gradient(34% 38% at 86% 82%, rgba(122, 32, 16, 0.26), transparent 72%);
  animation: moDrift 26s ease-in-out infinite alternate;
}
.psection--dark h2,
.psection--dark h3 { color: #fff; }
.psection--dark .psection__lede,
.psection--dark p { color: rgba(255, 255, 255, 0.72); }
.psection--dark .prule {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28) 18%, rgba(255,255,255,0.28) 82%, transparent);
}
/* cards invert: the glass treatment the dark bands already use elsewhere */
.psection--dark .vcard,
.psection--dark .award {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}
.psection--dark .vcard p,
.psection--dark .award p { color: rgba(255, 255, 255, 0.70); }
.psection--dark .vcard__num { color: #F0D8C4; }
.psection--dark .vicon {
  color: #fff;
  background: linear-gradient(150deg, rgba(255,255,255,0.20), rgba(255,255,255,0.05));
  border-color: rgba(255, 255, 255, 0.22);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .psection--dark .vcard:hover { border-color: rgba(255,255,255,0.34); }
  .psection--dark .vcard:hover h3 { color: #F0D8C4; }
}
/* the accordion, the faculty strip and the map frame follow the surface */
.psection--dark .qaitem { border-bottom-color: rgba(255, 255, 255, 0.16); }
.psection--dark .qaitem summary { color: #fff; }
.psection--dark .qaitem summary::after { color: #F0D8C4; }
.psection--dark .qaitem__body,
.psection--dark .qaitem__body li { color: rgba(255, 255, 255, 0.72); }
.psection--dark .aface span { color: #fff; }
.psection--dark .aface a:hover span { color: #F0D8C4; }
.psection--dark .mapframe {
  border-color: rgba(255, 255, 255, 0.2);
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 14px, rgba(255,255,255,0) 14px 28px), rgba(255,255,255,0.03);
  color: rgba(255, 255, 255, 0.7);
}
.psection--dark .pill-sm { border-color: rgba(255,255,255,0.28); color: #fff; }
.psection--dark .pill-sm:hover { border-color: #fff; }
.psection--dark .btn-ghost { border-color: rgba(255,255,255,0.3); color: #fff; }
.psection--dark .label--dim { color: rgba(255,255,255,0.7); }
/* the seam hairline would be invisible on navy */
.psection--dark + .psection::before,
.psection--dark::before { display: none; }
@media (prefers-reduced-motion: reduce) { .psection--dark::after { animation: none; } }

/* ---- all-faculty grid on the speakers page ---- */
.facultybar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 16px; margin-bottom: 32px;
}
.facultysearch { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); }
.facultysearch .label { color: rgba(255, 255, 255, 0.62); }
.facultysearch input { color: #fff; }
.facultysearch input::placeholder { color: rgba(255, 255, 255, 0.42); }
.facultycount { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.66); }
.psection--dark .afaces { gap: 28px 16px; }
.aface[hidden] { display: none; }
/* more faces per row on a phone: 92px circles fit four across at 375 */
@media (max-width: 520px) {
  .psection--dark .afaces { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 20px 10px; }
}


/* ================= action footers =================
   The primary action sits at the end of the reading direction — the right,
   in English. Ordering in the markup already puts the primary last inside
   its group; these are the three places where the group itself belongs at
   the end rather than where its container happens to sit: a form footer, a
   dialog footer and a card footer. */
.formactions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* ================= registration screen =================
   Built from the components the rest of the site already uses: .vcard for
   the passes, .field / .checkrow for the inputs, .chipset for the currency
   switch. Only the pieces that did not exist are defined here. */
.regform { max-width: 880px; margin: 0 auto; }

.regstep { border: 0; padding: 0; margin: 0 0 48px; }
.regstep__legend {
  display: flex; align-items: center; gap: 12px;
  font-size: 20px; font-weight: 600; color: var(--ink);
  margin-bottom: 20px; padding: 0;
}
.regstep__n {
  font-size: 13px; font-weight: 500; letter-spacing: 0.08em;
  color: var(--accent); font-variant-numeric: tabular-nums;
}

/* the two passes are selectable versions of the fees-page cards */
.passgrid { margin-bottom: 12px; }
.passcard {
  position: relative; display: flex; flex-direction: column;
  padding: 24px; border-radius: 16px; cursor: pointer;
  border: 1px solid var(--hairline-light);
  background: rgba(255, 255, 255, 0.62);
  transition: border-color 0.3s var(--ease-ui), background 0.3s var(--ease-ui),
              box-shadow 0.3s var(--ease-ui);
}
.passcard:hover { border-color: rgba(168, 48, 32, 0.42); }
.passcard.is-on {
  border-color: var(--accent);
  background: rgba(168, 48, 32, 0.06);
  box-shadow: 0 10px 28px rgba(10, 26, 40, 0.08);
}
/* the real checkbox stays in the tree for keyboard and screen readers */
.passcard input {
  position: absolute; opacity: 0; width: 24px; height: 24px;
  top: 20px; inset-inline-end: 20px; margin: 0; cursor: pointer;
}
.passcard__box {
  position: absolute; top: 20px; inset-inline-end: 20px;
  width: 24px; height: 24px; border-radius: 9999px;
  border: 1px solid var(--hairline-light); background: #fff;
  transition: border-color 0.3s var(--ease-ui), background 0.3s var(--ease-ui);
}
.passcard__box::after {
  content: ""; position: absolute; inset: 6px;
  border-radius: 9999px; background: #fff;
  transform: scale(0); transition: transform 0.28s var(--ease-out);
}
.passcard.is-on .passcard__box { border-color: var(--accent); background: var(--accent); }
.passcard.is-on .passcard__box::after { transform: scale(1); }
.passcard input:focus-visible ~ .passcard__box {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.passcard .vicon { margin-bottom: 16px; }
.passcard h3 { margin: 4px 0 8px; }
.passcard > p:last-child { color: var(--muted-light); }

#passErr { display: none; margin: 0 0 8px; }
#passErr.is-on { display: block; }

/* two columns of inputs on anything wider than a phone */
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.fgrid .field:nth-child(1) { grid-column: span 2; max-width: 160px; }
.field__opt { font-weight: 400; color: var(--muted-light); }

/* the running total */
.regsum {
  border: 1px solid var(--hairline-light); border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  padding: 24px; margin-bottom: 24px;
}
.regsum__h { font-size: 18px; font-weight: 600; margin: 0 0 16px; }
.regsum__list { list-style: none; margin: 0 0 16px; padding: 0; }
.regsum__list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 8px 0; font-size: 15px; color: var(--muted-light);
  border-bottom: 1px solid var(--hairline-light);
}
.regsum__list li b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.regsum__empty span { color: var(--muted-light); }
.regsum__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  margin: 0 0 12px; font-size: 15px; color: var(--muted-light);
}
.regsum__total b {
  font-size: 24px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.regsum__note { font-size: 13px; color: var(--muted-light); margin: 0; }

@media (max-width: 768px) {
  /* one column, and the title select stops being a stub of its own row */
  .fgrid { grid-template-columns: 1fr; gap: 0; }
  .fgrid .field:nth-child(1) { grid-column: auto; max-width: 100%; }
  .regstep { margin-bottom: 40px; }
  .regstep__legend { font-size: 18px; }
  .passcard { padding: 20px; }
  .regsum { padding: 20px; }
}

/* the abstract body — same shell as .field input, just taller */
.field textarea {
  width: 100%; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--hairline-light);
  background: rgba(255, 255, 255, 0.72);
  font-family: "Outfit", Arial, sans-serif; font-size: 15px;
  color: var(--ink); line-height: 1.55; resize: vertical; min-height: 180px;
  transition: border-color 0.3s var(--ease-ui), background 0.3s var(--ease-ui);
}
.field textarea:focus {
  outline: none; border-color: var(--accent); background: #fff;
  box-shadow: 0 0 0 4px rgba(168, 48, 32, 0.14);
}
.field textarea::placeholder { color: rgba(10, 26, 40, 0.38); }
.field.is-bad textarea { border-color: #B4453C; }

/* ---- speaker card ----
   Every card already carried data-scope and data-kind for the filters but
   never showed them, so after filtering there was nothing on the card to
   confirm WHY it was in the results. */
.spk__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -6px; margin-bottom: 2px; }
.spk__tag {
  font-size: 11px; font-weight: 500; letter-spacing: 0.06em;
  padding: 4px 9px; border-radius: 9999px;
  background: rgba(168, 48, 32, 0.10); color: var(--accent-strong);
  white-space: nowrap;
}
.spk__tag--national { background: rgba(31, 169, 113, 0.12); color: #178056; }
.spk__tag--international { background: rgba(168, 48, 32, 0.14); color: var(--accent-strong); }

/* the portrait leans in as the card lifts */
.spk__media img { transition: transform 0.9s var(--ease-out); }
.spk:hover .spk__media img { transform: scale(1.045); }
.spk {
  box-shadow: 0 1px 2px rgba(10, 26, 40, 0.04);
  transition: transform 0.5s var(--ease-out), border-color 0.3s var(--ease-ui),
              box-shadow 0.4s var(--ease-ui);
}
.spk:hover { box-shadow: 0 16px 38px rgba(10, 26, 40, 0.12); }

/* ---- exhibition floor plan ----
   The real plan is a white technical drawing, so it needs a light plate of
   its own rather than sitting on the section tint. */
.mapframe { margin: 0; padding: 0; border-radius: 18px; overflow: hidden; }
.mapframe__zoom {
  display: block; width: 100%; padding: 0; border: 1px solid var(--hairline-light);
  border-radius: 18px; overflow: hidden; background: #fff; cursor: zoom-in;
  position: relative; transition: border-color 0.3s var(--ease-ui), box-shadow 0.4s var(--ease-ui);
}
.mapframe__zoom:hover { border-color: var(--accent); box-shadow: 0 16px 40px rgba(10, 26, 40, 0.12); }
.mapframe__zoom img { display: block; width: 100%; height: auto; }
.mapframe__hint {
  position: absolute; right: 16px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 9999px;
  background: rgba(255, 255, 255, 0.94); color: var(--ink);
  font-size: 13px; font-weight: 500; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(10, 26, 40, 0.14);
}
@media (max-width: 560px) { .mapframe__hint { right: 10px; bottom: 10px; font-size: 12px; padding: 7px 12px; } }

/* ---- legal pages (privacy, terms) ------------------------------------
   A legal document is read top to bottom and searched with ctrl-F, so it
   is plain prose, not the faq accordion and not cards: nothing here hides
   text behind a click. The measure, colours and list marker are the ones
   .letter__body and .coursecard__list already use. */
.legal { max-width: 72ch; margin-inline: auto; display: flex; flex-direction: column; gap: 48px; }
.legal__sec { display: flex; flex-direction: column; gap: 12px; }
.legal__sec h3 { font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.legal__sec h4 { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--ink); margin-top: 8px; }
.legal__sec p { font-size: 16px; font-weight: 400; line-height: 1.65; color: var(--muted-light); }
.legal__num { font-size: 13px; font-weight: 500; color: var(--accent-strong); }
.legal__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.legal__list li {
  font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--muted-light);
  padding-inline-start: 20px; position: relative;
}
.legal__list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 10px;
  width: 6px; height: 6px; rotate: 45deg;
  background: var(--accent-strong); opacity: 0.7;
}
/* the one call-out a legal page needs: what is missing and who to ask */
.legal__note {
  max-width: 72ch; margin-inline: auto;
  border: 1px solid var(--hairline-light); border-radius: 12px;
  padding: 20px 24px; background: var(--wash);
  display: flex; flex-direction: column; gap: 8px;
}
.legal__note p { font-size: 16px; font-weight: 400; line-height: 1.65; color: var(--muted-light); }
@media (max-width: 720px) {
  .legal { gap: 40px; }
  .legal__note { padding: 16px; }
}

/* the endorsement list in the agenda file opens with one sentence; it sits
   under the section label, on the same centred measure the section already uses */
.endorse__lede { max-width: 64ch; margin: 12px auto 0; color: var(--muted-light); }

/* ---- speakers filter bar --------------------------------------------
   The chip groups used to be three stacked rows, which on a page with two
   chips per group left three near-empty bands above the grid. One wrapping
   row, with the count trailing it. */
.sfilters__rows { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; }
.sfilters__rows .chipset[hidden] { display: none; }
.sfilters__rows .sfilters__count { margin: 0 0 0 auto; }

/* abstract page: the feature block's copy must not push past the screen edge */
@media (max-width: 768px) {
  .afeature__inner { grid-template-columns: minmax(0, 1fr); }
  .afeature__copy, .afeature__copy h2, .afeature__copy p { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
}