/* ==========================================================================
   PODE 2027 - Sarajevo
   Design system: midnight blue + Sarajevo copper, serif display type
   ========================================================================== */

:root {
  /* colour */
  --ink:        #0a1526;
  --ink-2:      #12233d;
  --ink-3:      #1c3557;
  --paper:      #fbfaf7;
  --paper-2:    #f3f0e9;
  --line:       #e2ddd2;
  --text:       #1b2434;
  --text-soft:  #5b6678;
  --copper:     #b9662a;
  --copper-lt:  #e0a458;
  /* filled buttons use a slightly deeper copper: the brand shade gives white
     text only 4.2:1, just under the 4.5:1 that small text needs */
  --copper-btn: #ad5d23;
  --copper-btn-dk: #8f4b1a;
  --teal:       #176a6b;
  --white:      #ffffff;

  /* type */
  --display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* space + shape */
  --wrap: 1160px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 1px 2px rgba(10, 21, 38, .04), 0 12px 32px -12px rgba(10, 21, 38, .16);
  --shadow-lg: 0 2px 4px rgba(10, 21, 38, .05), 0 30px 60px -24px rgba(10, 21, 38, .28);
  --header-h: 74px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
ul  { margin: 0; padding: 0; list-style: none; }

a { color: var(--copper); text-decoration-color: rgba(185, 102, 42, .35); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

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

/* ------------------------------------------------------------- layout -- */
.wrap { width: min(100% - 48px, var(--wrap)); margin-inline: auto; }
.wrap.narrow { max-width: 760px; }
.center { text-align: center; }

.section { padding: 92px 0; }
.section.tight { padding: 62px 0; }
.section-alt { background: var(--paper-2); }
.section-dark { background: var(--ink); color: #dfe6f0; }
.section-dark h2, .section-dark h3 { color: #fff; }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--copper); margin: 0 0 14px;
}
.section-dark .eyebrow { color: var(--copper-lt); }

.h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2.4rem, 5.2vw, 3.9rem); letter-spacing: -.015em; }
.h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 3.6vw, 2.7rem); letter-spacing: -.01em; }
.h3 { font-size: 1.16rem; font-weight: 600; }

.lead { font-size: 1.16rem; color: var(--text-soft); max-width: 62ch; }
.lead.wide { max-width: none; }
.center .lead { margin-inline: auto; }

.section-head { max-width: 62ch; margin-bottom: 46px; }
.section-head.center { margin-inline: auto; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ------------------------------------------------------------ buttons -- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 26px; border-radius: 100px; border: 1px solid transparent;
  font-size: 15px; font-weight: 600; letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-accent  { background: var(--copper-btn); color: #fff; box-shadow: 0 10px 24px -12px rgba(185, 102, 42, .9); }
.btn-accent:hover { background: var(--copper-btn-dk); color: #fff; }
.btn-ghost   { border-color: rgba(255, 255, 255, .28); color: #fff; }
.btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.btn-outline { border-color: var(--line); color: var(--text); background: var(--white); }
.btn-outline:hover { border-color: var(--copper); color: var(--copper); }
.btn-sm { padding: 10px 20px; font-size: 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.center .btn-row { justify-content: center; }

/* ------------------------------------------------------------- header -- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251, 250, 247, .82);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.site-header.scrolled { border-bottom-color: var(--line); box-shadow: 0 10px 30px -24px rgba(10, 21, 38, .5); }

.header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 20px; }

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand img { flex: none; }
.brand-text strong { display: block; font-family: var(--display); font-weight: 400; font-size: 1.42rem; line-height: 1; letter-spacing: .01em; }
.brand-year { color: var(--copper); }
.brand-text small { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-soft); margin-top: 3px; }

.primary-nav { display: flex; align-items: center; gap: 26px; }
.primary-nav > ul { display: flex; align-items: center; gap: 4px; }
.primary-nav a {
  display: block; padding: 8px 12px; border-radius: 8px;
  font-size: 14.5px; font-weight: 500; color: var(--text-soft); text-decoration: none;
  transition: color .15s ease, background-color .15s ease;
}
.primary-nav a:hover { color: var(--ink); background: rgba(10, 21, 38, .05); }
.primary-nav a.active { color: var(--ink); font-weight: 600; }
.primary-nav a.active::after {
  content: ""; display: block; height: 2px; width: 18px; margin: 3px auto 0;
  background: var(--copper); border-radius: 2px;
}
/* The Register button is a link inside the nav, and ".primary-nav a" is more
   specific than ".btn-accent" - without this it would take the nav's grey on
   the copper background, which is unreadable. */
.nav-cta { flex: none; }
.primary-nav a.btn-accent { color: #fff; }
.primary-nav a.btn-accent:hover { color: #fff; background: var(--copper-btn-dk); }

.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); cursor: pointer; padding: 0; }
.nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--ink); margin: 3.5px auto; transition: transform .25s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* --------------------------------------------------------------- hero -- */
.hero {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 78% 8%, #1d3557 0%, transparent 60%), var(--ink);
  color: #e8eef7;
  padding: clamp(72px, 10vw, 120px) 0 0;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(70% 55% at 80% 0%, rgba(224, 164, 88, .20), transparent 62%),
    radial-gradient(60% 60% at 0% 100%, rgba(23, 106, 107, .28), transparent 60%);
  pointer-events: none;
}
.hero-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--copper-lt); border: 1px solid rgba(224, 164, 88, .34);
  padding: 7px 16px; border-radius: 100px; margin-bottom: 26px;
}
.hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--copper-lt); animation: pulse 2.4s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.hero h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.7rem, 6.6vw, 5.1rem); line-height: 1.02; letter-spacing: -.02em;
  color: #fff; margin-bottom: 22px;
}
.hero h1 em { font-style: italic; color: var(--copper-lt); }
.hero-sub { font-size: 1.2rem; color: #b6c4d8; max-width: 52ch; margin-bottom: 32px; }

.hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 100px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
  font-size: 13.5px; color: #dce5f2;
}
.chip svg { width: 15px; height: 15px; flex: none; opacity: .75; }

.hero-figure { position: relative; }
.hero-figure svg { width: 100%; height: auto; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .45)); }

.hero-strip {
  position: relative; z-index: 2; margin-top: clamp(48px, 7vw, 86px);
  border-top: 1px solid rgba(255, 255, 255, .12);
  background: rgba(0, 0, 0, .18);
}
.hero-strip .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.hero-strip div { padding: 26px 8px 26px 0; }
.hero-strip dt { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #8ea1bd; margin-bottom: 6px; }
.hero-strip dd { margin: 0; font-size: 1.02rem; font-weight: 500; color: #fff; }

/* --------------------------------------------------------- countdown -- */
.countdown { display: flex; gap: 10px; }
.countdown div {
  min-width: 68px; padding: 10px 8px; text-align: center;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13); border-radius: 12px;
}
.countdown b { display: block; font-family: var(--display); font-size: 1.7rem; font-weight: 400; color: #fff; line-height: 1.1; }
.countdown span { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #8ea1bd; }

/* -------------------------------------------------------------- cards -- */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px; box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card.hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(185, 102, 42, .35); }
a.card { display: block; color: inherit; text-decoration: none; }
a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(185, 102, 42, .35); }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--text-soft); font-size: 15.5px; }

.card-num {
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em;
  color: var(--copper); margin-bottom: 16px; display: block;
}
.card-icon {
  width: 46px; height: 46px; border-radius: 13px; margin-bottom: 18px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, rgba(185, 102, 42, .14), rgba(224, 164, 88, .08));
  color: var(--copper);
}
.card-icon svg { width: 22px; height: 22px; }

.sight-photo {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius); margin-top: 16px;
}

/* home page "host city" slideshow - stacked slides cross-fade via opacity,
   so it needs no layout shift between slides (all sit in the same box) */
.host-city-slideshow { position: relative; width: 100%; height: 260px; border-radius: 22px; overflow: hidden; }
.host-city-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.2s ease;
}
.host-city-slide.active { opacity: 1; }
@media (max-width: 720px) { .host-city-slideshow { height: 200px; } }

/* masonry via CSS columns: each column stacks its own photos back-to-back,
   so a tall portrait shot never leaves a gap next to it the way a
   row-based (flex/grid) layout does when one item in the row is much
   taller than its neighbours - the trade-off is that with very few photos
   the used column(s) sit flush left rather than centered as a group, which
   in practice never shows once there are more than a handful of photos */
.gallery-grid { columns: 4 180px; column-gap: 14px; }
.gallery-thumb {
  display: block; width: 100%; margin: 0 0 14px; padding: 0; border: 0; background: none;
  border-radius: var(--radius); overflow: hidden; cursor: zoom-in;
  box-shadow: var(--shadow); break-inside: avoid; -webkit-column-break-inside: avoid;
  transition: transform .25s ease, box-shadow .25s ease;
}
.gallery-thumb:hover, .gallery-thumb:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.gallery-thumb.active { box-shadow: 0 0 0 3px var(--copper), var(--shadow-lg); }
.gallery-thumb img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .gallery-grid { columns: 3 150px; } }
@media (max-width: 560px) { .gallery-grid { columns: 2 120px; column-gap: 10px; } }

/* the enlarged photo, shown below the grid once a thumbnail is clicked */
.gallery-preview {
  position: relative; margin: 32px auto 0; padding: 20px; text-align: center;
  background: var(--ink); border-radius: var(--radius-lg); max-width: fit-content;
  animation: gallery-fade-in .25s ease;
}
.gallery-preview img { display: block; max-width: 100%; max-height: 74vh; margin: 0 auto; border-radius: var(--radius); }
.gallery-preview-close {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%;
  border: none; background: rgba(255, 255, 255, .14); color: #fff; font-size: 22px; line-height: 1;
  cursor: pointer; display: grid; place-items: center; transition: background .2s ease;
}
.gallery-preview-close:hover { background: rgba(255, 255, 255, .28); }
@keyframes gallery-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.gallery-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; align-items: center; margin-top: 24px; }
.gallery-pager-num, .gallery-pager-btn {
  display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px;
  padding: 0 14px; border-radius: 100px; border: 1px solid var(--line); background: var(--white);
  color: var(--text); font-size: 14px; text-decoration: none; transition: border-color .2s ease, color .2s ease;
}
.gallery-pager-num:hover, .gallery-pager-btn:hover { border-color: var(--copper); color: var(--copper); }
.gallery-pager-num.active {
  background: var(--copper-btn); border-color: var(--copper-btn); color: #fff; font-weight: 600;
}

.section-dark .card { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); box-shadow: none; }
.section-dark .card p { color: #a9b8ce; }

/* --------------------------------------------------------------- prose */
.prose h2 { font-family: var(--display); font-weight: 400; font-size: 1.9rem; margin: 2em 0 .6em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.1rem; margin: 1.8em 0 .5em; }
.prose ul.bullets { margin: 0 0 1.2em; padding-left: 0; }
.prose ul.bullets li { position: relative; padding-left: 26px; margin-bottom: 9px; color: var(--text-soft); }
.prose ul.bullets li::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--copper-lt); transform: rotate(45deg);
}
.prose strong { color: var(--text); }

.pull {
  border-left: 3px solid var(--copper); padding: 4px 0 4px 24px; margin: 30px 0;
  font-family: var(--display); font-size: 1.4rem; line-height: 1.4; color: var(--ink);
}

/* ----------------------------------------------------------- timeline -- */
.timeline { position: relative; padding-left: 30px; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.timeline li { position: relative; padding-bottom: 28px; }
.timeline li::before {
  content: ""; position: absolute; left: -29px; top: 7px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--copper);
}
.timeline li.done::before { background: var(--copper); }
.timeline .t-date { font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; color: var(--copper); display: block; margin-bottom: 3px; }
.timeline .t-title { font-weight: 600; }
.timeline .t-note { color: var(--text-soft); font-size: 15px; }

/* the vertical "Important dates" timeline (.timeline, above), laid out
   sideways instead: one horizontal line running through a row of dots,
   each dot's label above it and its date below. */
.fact-row {
  position: relative; display: flex; list-style: none;
  padding: 6px 10px 0; margin: 28px 0 40px;
}
.fact-row::before {
  content: ""; position: absolute; left: 10px; right: 10px; top: 41px;
  height: 1px; background: var(--line);
}
.fact-row li {
  position: relative; flex: 1; display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 8px; padding: 0 6px;
}
.fact-row .fact-value {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; color: var(--copper);
}
.fact-row .dot {
  width: 13px; height: 13px; border-radius: 50%; flex: none;
  background: var(--white); border: 2px solid var(--copper);
  position: relative; z-index: 1;
}
.fact-row .dot.done { background: var(--copper); }
.fact-row .fact-label { font-weight: 600; color: var(--ink); font-size: 14px; line-height: 1.3; }
@media (max-width: 640px) {
  /* the same vertical line-and-dots shape as .timeline (above) - just
     built on this component's own markup instead of switching to it */
  .fact-row {
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 0 8px 30px; position: relative;
  }
  .fact-row::before { left: 5px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; }
  .fact-row li {
    flex-direction: row; align-items: baseline; justify-content: flex-start;
    text-align: left; gap: 10px; padding: 0 0 24px; position: relative;
  }
  .fact-row li:last-child { padding-bottom: 0; }
  .fact-row .dot { position: absolute; left: -30px; top: 3px; }
  .fact-row .fact-value { width: 108px; flex: none; }
}

/* -------------------------------------------------------------- table -- */
.table-search { max-width: 360px; margin-bottom: 16px; position: relative; }
.table-search-input { padding-left: 42px; }
.table-search::before {
  content: ""; position: absolute; left: 15px; top: 50%; width: 16px; height: 16px;
  margin-top: -8px; pointer-events: none; opacity: .5;
  background: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6678' stroke-width='2'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>");
}
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); }
.table-empty { padding: 22px 20px; color: var(--text-soft); font-size: 15px; }
.table-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; }
.table-pagination-info { font-family: var(--mono); font-size: 12.5px; color: var(--text-soft); white-space: nowrap; }
table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
th, td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-soft); background: var(--paper-2);
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(224, 164, 88, .06); }
td.time { font-family: var(--mono); font-size: 13.5px; color: var(--copper); white-space: nowrap; }
td.rownum { font-family: var(--mono); font-size: 12.5px; color: var(--copper); }
td .who { display: block; color: var(--text-soft); font-size: 14px; margin-top: 2px; }

/* ------------------------------------------------- reviewer row-table -- */
.rtable { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); overflow: hidden; }
.rtable-head, .rtable-row > summary, .rtable-row-plain {
  display: grid; grid-template-columns: 34px 1fr 210px 140px 110px; gap: 16px; align-items: center;
  padding: 13px 20px;
}
.rtable-head {
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-soft); background: var(--paper-2); border-bottom: 1px solid var(--line);
}
.rtable-row, .rtable-row-plain { border-bottom: 1px solid var(--line); }
.rtable-row:last-of-type, .rtable-row-plain:last-of-type { border-bottom: 0; }
.rtable-row > summary { cursor: pointer; list-style: none; position: relative; padding-right: 44px; }
.rtable-row > summary::-webkit-details-marker { display: none; }
.rtable-row > summary::after {
  content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 17px; color: var(--text-soft);
}
.rtable-row[open] > summary::after { content: "\2212"; }
.rtable-row > summary:hover { background: rgba(224, 164, 88, .08); }
.rtable-row[open] > summary { background: var(--paper-2); }
.rtable-c-num { font-family: var(--mono); font-size: 12.5px; color: var(--copper); }
.rtable-c-title { font-weight: 500; }
.rtable-c-who small { display: block; color: var(--text-soft); font-size: 13px; font-weight: 400; }
.rtable-c-date { font-family: var(--mono); font-size: 12.5px; color: var(--text-soft); }
.rtable-detail { padding: 4px 20px 22px; }
@media (max-width: 700px) {
  .rtable-head { display: none; }
  .rtable-row > summary, .rtable-row-plain {
    grid-template-columns: 22px 1fr; row-gap: 3px; padding-right: 40px;
  }
  .rtable-c-num { grid-row: 1 / 5; }
  .rtable-c-title, .rtable-c-who, .rtable-c-type, .rtable-c-date { grid-column: 2; }
  .rtable-c-type, .rtable-c-date { font-size: 12.5px; color: var(--text-soft); }
}
.abstract-code {
  background: var(--ink); color: #e7e2d6; font-family: var(--mono); font-size: 13px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word; padding: 16px 18px; border-radius: 10px; margin-top: 8px;
}

.day-head {
  display: flex; align-items: baseline; gap: 14px; margin: 54px 0 18px;
}
.day-head:first-of-type { margin-top: 0; }
.day-head h3 { font-family: var(--display); font-weight: 400; font-size: 1.7rem; }
.day-head span { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-soft); }

.tag {
  display: inline-block; padding: 3px 10px; border-radius: 100px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
}
.tag-plenary { background: rgba(185, 102, 42, .12); color: var(--copper); }
.tag-social  { background: rgba(23, 106, 107, .12); color: var(--teal); }
.tag-break   { background: rgba(10, 21, 38, .07); color: var(--text-soft); }

/* a date moved under Important dates: the mark next to it, the old date, and the announcement */
.date-tag {
  display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 100px; vertical-align: 1px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  background: var(--copper); color: var(--white);
}
.hero-strip .date-tag { background: var(--copper-lt); color: var(--ink); }
.hero-strip .strip-was { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; color: #8ea1bd; }
.fact-row .fact-change { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12.5px; color: var(--text-soft); }
.fact-row .fact-change .date-tag { margin-left: 0; }
.date-notice-bar { background: var(--copper-btn); color: var(--white); font-size: 15px; line-height: 1.5; text-align: center; padding: 12px 20px; }
.date-notice-bar strong { font-weight: 600; }
.date-notice { margin-bottom: 22px; }

/* ------------------------------------------------------------ people --- */
.person { display: flex; gap: 18px; align-items: flex-start; }
.avatar {
  flex: none; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--ink-3), var(--ink));
  color: #fff; font-family: var(--display); font-size: 1.25rem; letter-spacing: .02em;
}
.avatar.copper { background: linear-gradient(145deg, var(--copper-lt), var(--copper)); }
.person h3 { font-size: 1.05rem; margin-bottom: 2px; }
.person .role { font-size: 14px; color: var(--copper); font-weight: 500; }
.person .org { font-size: 14.5px; color: var(--text-soft); }
.slide { font-size: 14px; margin-top: 6px; }
.slide a { font-weight: 500; }
.slide span { font-size: 13px; }
td .slide { margin-top: 4px; }

.people-list li { display: grid; grid-template-columns: 0.8fr 1.3fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.people-list li:last-child { border-bottom: 0; }
.people-list .p-name { font-weight: 500; }
.people-list .p-org { color: var(--text-soft); font-size: 15px; }

/* ---------------------------------------------------------- auspices -- */
.auspice-band { border-top: 1px solid var(--line); padding-top: 38px; }
.auspice-band .eyebrow { margin-bottom: 26px; }
.auspice-strip {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end;
  gap: var(--auspice-gap, 48px);
}
.auspice-strip-item {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  max-width: calc(var(--auspice-h, 132px) * 1.97); text-align: center; text-decoration: none;
}
.auspice-strip-item img {
  height: var(--auspice-h, 132px); width: calc(var(--auspice-h, 132px) * 1.97);
  object-fit: contain;
}
.auspice-placeholder {
  display: grid; place-items: center;
  width: calc(var(--auspice-h, 132px) * 1.59); height: var(--auspice-h, 132px);
  border: 1px dashed var(--line); border-radius: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-soft);
}
a.auspice-strip-item:hover .auspice-placeholder { border-color: var(--copper); color: var(--copper); }

/* ------------------------------------------------------------ history -- */
.history { display: flex; flex-wrap: wrap; gap: 8px; }
.history li {
  font-family: var(--mono); font-size: 12.5px;
  padding: 8px 14px; border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, .14); color: #b6c4d8;
}
.history li.now { background: var(--copper); border-color: var(--copper); color: #fff; font-weight: 500; }

/* ------------------------------------------ the author's own page ------ */
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 24px; margin: 14px 0 0; }
.facts dt { font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
            text-transform: uppercase; color: var(--text-soft); margin-bottom: 3px; }
.facts dd { margin: 0; font-size: 15px; font-weight: 500; }
@media (max-width: 640px) { .facts { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- cookie notice -- */
.cookie-notice {
  position: fixed; inset: auto 16px 16px; z-index: 60;
  background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 18px 50px rgba(20, 24, 33, .18);
  padding: 18px 20px; max-width: 760px; margin: 0 auto;
}
.cookie-inner { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.cookie-inner p { margin: 0; flex: 1 1 340px; font-size: 14px; line-height: 1.55; }
.cookie-inner form { display: flex; gap: 10px; flex-wrap: wrap; }

.map-blocked {
  display: grid; gap: 14px; place-content: center; text-align: center;
  padding: 34px 26px; background: rgba(20, 24, 33, .03);
  border-bottom: 1px solid var(--line); min-height: 260px;
}
.map-blocked p { margin: 0; font-size: 14.5px; color: var(--text-soft); max-width: 42ch; }
.map-blocked form { display: flex; justify-content: center; }

@media (max-width: 540px) {
  .cookie-notice { inset: auto 10px 10px; padding: 16px; }
  .cookie-inner form .btn { flex: 1 1 auto; justify-content: center; }
}

/* --------------------------------------------------------------- form -- */
.form { display: grid; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: grid; gap: 7px; }
.field[hidden] { display: none; }
.field label { font-size: 14px; font-weight: 600; }
.field .hint { font-size: 13px; color: var(--text-soft); }
.field .req { color: var(--copper); }

/* the form is read in blocks: who you are, what you bring, fee, consent */
.form-group { border: 0; padding: 0; margin: 0; }
.form-group + .form-group { border-top: 1px solid var(--line); padding-top: 0; }
/* The heading belongs to the block under it, not to the line above it: the air
   goes between the rule and the heading, and the heading sits close to the
   fields it names. */
.form-group > legend {
  font-family: var(--mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--copper); padding: 30px 0 0; margin: 0;
}
.form-group > * + * { margin-top: 20px; }
.form-group > legend + * { margin-top: 14px; }
.form-group > .hint { display: block; font-size: 13px; color: var(--text-soft); }
.form-group > .hint + .hint { margin-top: 8px; }

.check { display: grid; grid-template-columns: 21px 1fr; gap: 12px; align-items: start; }
.check input[type=checkbox] {
  width: 21px; height: 21px; margin: 1px 0 0; padding: 0;
  accent-color: var(--copper); border-radius: 6px;
}
.check label { font-size: 14.5px; font-weight: 400; line-height: 1.5; }

.subfields {
  display: grid; gap: 18px;
  padding: 20px; border: 1px solid var(--line); border-radius: 14px;
  background: rgba(20, 24, 33, .018);
}
.subfields[hidden] { display: none; }

textarea.code-edit {
  background: #0f1d31; color: #d7e2f0; border: none;
  font-family: var(--mono); font-size: 13px; line-height: 1.55;
  min-height: 300px; white-space: pre-wrap; word-break: break-word;
}
textarea.code-edit:focus { outline: 2px solid var(--copper); outline-offset: 2px; }
input, select, textarea {
  font: inherit; font-size: 15.5px; color: var(--text);
  padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--white); width: 100%;
  transition: border-color .18s ease, box-shadow .18s ease;
}
textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--copper);
  box-shadow: 0 0 0 4px rgba(185, 102, 42, .12);
}
/* a field the visitor cannot change here (identity, fee category, ...) looks
   the part - without this it reads as an ordinary editable box, and typing
   into it only to watch nothing happen is a worse signal than none at all */
input[readonly] {
  background: var(--paper-2); color: var(--text-soft); cursor: default;
}
input[readonly]:focus { box-shadow: none; border-color: var(--line); }
select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6678' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 42px; }

.flash { padding: 18px 22px; border-radius: 14px; margin-bottom: 28px; font-size: 15.5px; }
.flash-ok { background: rgba(23, 106, 107, .1); border: 1px solid rgba(23, 106, 107, .3); color: #0f4d4e; }
.flash-error { background: rgba(185, 102, 42, .09); border: 1px solid rgba(185, 102, 42, .32); color: #8c4a19; }
.flash ul { margin: 8px 0 0; padding-left: 18px; list-style: disc; }

.fee-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; }
.fee-card.featured { border-color: var(--copper); box-shadow: var(--shadow-lg); position: relative; }
.fee-card.featured::after {
  content: "Early bird"; position: absolute; top: -11px; left: 30px;
  background: var(--copper); color: #fff; font-family: var(--mono);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 4px 12px; border-radius: 100px;
}
.fee-price { font-family: var(--display); font-size: 2.6rem; line-height: 1; margin: 10px 0 4px; }
.fee-price small { font-size: 1rem; color: var(--text-soft); font-family: var(--sans); }

/* --------------------------------------------------------------- misc -- */
.page-hero {
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  color: #fff; padding: 74px 0 66px; position: relative; overflow: hidden;
}
.page-hero::after {
  content: ""; position: absolute; right: -80px; top: -60px; width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(224, 164, 88, .18), transparent 65%);
}
.page-hero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 4.6vw, 3.3rem); color: #fff; margin-bottom: 14px; }
.page-hero p { color: #adbdd4; max-width: 60ch; font-size: 1.08rem; }
.page-hero .wrap { position: relative; z-index: 2; }

.breadcrumb { font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--copper-lt); margin-bottom: 16px; }
.breadcrumb a { color: inherit; text-decoration: none; opacity: .8; }
.breadcrumb a:hover { opacity: 1; }

.cta-band { background: linear-gradient(135deg, var(--ink) 0%, var(--ink-3) 100%); color: #fff; border-radius: var(--radius-lg); padding: 52px; text-align: center; position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 100% at 50% 0%, rgba(224, 164, 88, .2), transparent 70%); }
.cta-band > * { position: relative; }
.cta-band h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin-bottom: 12px; }
.cta-band p { color: #b6c4d8; max-width: 52ch; margin-inline: auto; margin-bottom: 26px; }

.map-card { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--white); }
.map-card iframe { width: 100%; height: 340px; border: 0; display: block; }
.map-note { padding: 16px 22px; font-size: 14.5px; color: var(--text-soft); border-top: 1px solid var(--line); }

.figure-card { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--ink); }
.figure-card svg { width: 100%; height: auto; display: block; }
.figure-card figcaption { padding: 14px 20px; font-size: 14px; color: var(--text-soft); background: var(--white); }

.muted { color: var(--text-soft); }
.small { font-size: 14.5px; }
.mt-l { margin-top: 44px; }
.mb-l { margin-bottom: 44px; }

/* ------------------------------------------------------------- footer -- */
.site-footer { background: var(--ink); color: #9fb0c8; padding: 72px 0 32px; font-size: 15px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 46px; }
.footer-brand img { margin-bottom: 16px; }
.footer-title { font-family: var(--display); font-size: 1.35rem; color: #fff; margin-bottom: 6px; }
.footer-sub { color: #8496b1; font-size: 14.5px; }
.site-footer h3 { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #6d7f9b; margin-bottom: 16px; font-weight: 500; }
.footer-links li { margin-bottom: 9px; line-height: 1.5; }
.footer-links a { color: #c3d0e2; text-decoration: none; }
.footer-links a:hover { color: var(--copper-lt); }

.sponsors { border-top: 1px solid rgba(255, 255, 255, .1); padding: 28px 0; display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
.sponsors-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #6d7f9b; }
.sponsors ul { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.sponsors li { font-size: 14px; color: #a9b8ce; }

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 13.5px; color: #6d7f9b; }
.footer-bottom p { margin: 0; }

/* ----------------------------------------------------------- reveal --- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------- responsive -- */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-figure { max-width: 460px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .hero-strip .wrap { grid-template-columns: repeat(2, 1fr); }
}

/* The menu and the Register button stop fitting on one line well before the
   tablet breakpoint, so the header switches to the hamburger earlier than the
   rest of the layout changes. */
@media (max-width: 1080px) {
  .primary-nav { gap: 14px; }
  .primary-nav > ul { gap: 0; }
  .primary-nav a { padding: 8px 9px; font-size: 14px; }
}

@media (max-width: 1000px) {
  .nav-toggle { display: block; }
  .primary-nav {
    position: fixed; inset: var(--header-h) 0 auto; z-index: 99;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 12px 24px 24px; box-shadow: var(--shadow-lg);
    display: none;
    /* on a short screen the panel must scroll, or its last item - the
       Register button - cannot be reached at all */
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .primary-nav.open { display: flex; }
  .primary-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav a { padding: 13px 4px; font-size: 16px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .primary-nav a.active::after { display: none; }
  .nav-cta { margin-top: 16px; justify-content: center; }
}

@media (max-width: 860px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .people-list li { grid-template-columns: 1fr; gap: 2px; }
  .section { padding: 68px 0; }
  .cta-band { padding: 38px 26px; }
}

@media (max-width: 540px) {
  body { font-size: 16px; }
  .wrap { width: calc(100% - 32px); }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-strip .wrap { grid-template-columns: 1fr; }
  .hero-strip div { padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .countdown div { min-width: 0; flex: 1; }
  .card { padding: 24px; }
}

/* ---------------------------------------------------------- file input -- */
.file-input {
  padding: 11px 14px;
  background: var(--paper-2);
  border-style: dashed;
  cursor: pointer;
}
.file-input::file-selector-button {
  font: inherit; font-size: 14px; font-weight: 600;
  margin-right: 14px; padding: 8px 16px;
  border: 0; border-radius: 100px;
  background: var(--ink); color: #fff; cursor: pointer;
}
.file-input::file-selector-button:hover { background: var(--copper); }
.field .muted { font-weight: 400; color: var(--text-soft); }

/* ----------------------------------------------------------- fee table -- */
.fee-table td:first-child { max-width: 420px; }
.fee-amount {
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--ink);
  white-space: nowrap;
}
.fee-featured { background: rgba(224, 164, 88, .09); }
.fee-featured .fee-amount { color: var(--copper); }
.fee-amount-note {
  display: block; white-space: nowrap; font-family: var(--sans);
  font-size: 11px; font-weight: 400; color: var(--text-soft); margin-top: 2px;
}
thead th .th-note {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-soft);
  margin-top: 3px;
}

/* the Register button doubles as the menu item for that page */
.nav-cta.is-current { box-shadow: 0 0 0 3px rgba(185, 102, 42, .3); }

/* hidden from people, visible to bots */
.no-humans {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* what stands where a form used to be, once submissions are closed */
.closed-notice { border-style: dashed; }
.closed-notice .eyebrow { margin-bottom: 8px; }

/* ---------------------------------------------------------- one list -- */
/* Every enumeration on the site looks like this: a number, a heading, and
   the rest of it only when somebody asks for it. <details> does the opening,
   so it works without JavaScript and the keyboard behaves like the mouse. */
.numbered {
  list-style: none;
  margin: 14px 0 1.2em;
  padding: 0;
  counter-reset: none;
  border-top: 1px solid var(--line);
}
.numbered > li {
  border-bottom: 1px solid var(--line);
}
.numbered .n {
  flex: none;
  width: 2.1em;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--copper);
  padding-top: 2px;
}
.numbered .t { flex: 1; font-weight: 600; font-size: 15.5px; }
.numbered .d {
  padding: 0 0 14px 2.1em;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.6;
}
.numbered li.plain {
  display: flex;
  gap: 4px;
  padding: 11px 0;
  align-items: flex-start;
}
.numbered li.plain .t { font-weight: 400; color: var(--text-soft); }

.numbered summary {
  display: flex;
  gap: 4px;
  align-items: flex-start;
  padding: 11px 26px 11px 0;
  cursor: pointer;
  position: relative;
  list-style: none;
  transition: color .15s ease;
}
.numbered summary::-webkit-details-marker { display: none; }
.numbered summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 17px;
  width: 8px;
  height: 8px;
  border-right: 1.8px solid var(--text-soft);
  border-bottom: 1.8px solid var(--text-soft);
  transform: rotate(45deg);
  transition: transform .2s ease, border-color .2s ease;
}
.numbered summary:hover { color: var(--copper); }
.numbered summary:hover::after { border-color: var(--copper); }
.numbered details[open] summary::after { transform: rotate(-135deg); top: 21px; }
.numbered details[open] summary { color: var(--ink); }

/* on a dark section the same list, in the other direction */
.section-dark .numbered, .section-dark .numbered > li { border-color: rgba(255,255,255,.12); }
.section-dark .numbered .t { color: #fff; }
.section-dark .numbered .d, .section-dark .numbered li.plain .t { color: #a9b8ce; }
.section-dark .numbered summary::after { border-color: #8ea1bd; }

/* ------------------------------------------------------ one day, one line -- */
.day {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  margin-bottom: 14px;
  overflow: hidden;
}
.day > summary {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding: 20px 52px 20px 24px;
  cursor: pointer;
  position: relative;
  list-style: none;
}
.day > summary::-webkit-details-marker { display: none; }
.day > summary::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 26px;
  width: 9px; height: 9px;
  border-right: 2px solid var(--text-soft);
  border-bottom: 2px solid var(--text-soft);
  transform: rotate(45deg);
  transition: transform .2s ease, border-color .2s ease;
}
.day[open] > summary::after { transform: rotate(-135deg); top: 31px; }
.day > summary:hover::after { border-color: var(--copper); }
.day-n {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--copper);
}
.day-name { font-family: var(--display); font-size: 1.5rem; line-height: 1.1; }
.day-note { font-size: 14px; color: var(--text-soft); }
.day-count {
  margin-left: auto; font-family: var(--mono); font-size: 11.5px;
  color: var(--text-soft); white-space: nowrap;
}
.day .table-wrap { border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.day[open] > summary { border-bottom: 0; }
@media (max-width: 540px) {
  .day > summary { padding: 16px 44px 16px 18px; }
  .day-count { margin-left: 0; width: 100%; }
}

/* ------------------------------------------------------- talks toggle -- */
.talks-toggle summary {
  cursor: pointer; list-style: none; position: relative;
  padding-right: 26px; display: block;
}
.talks-toggle summary::-webkit-details-marker { display: none; }
.talks-toggle summary::after {
  content: ""; position: absolute; right: 4px; top: 4px;
  width: 8px; height: 8px;
  border-right: 1.8px solid var(--text-soft); border-bottom: 1.8px solid var(--text-soft);
  transform: rotate(45deg); transition: transform .2s ease, border-color .2s ease;
}
.talks-toggle[open] summary::after { transform: rotate(-135deg); top: 8px; }
.talks-toggle summary:hover::after { border-color: var(--copper); }
.talks-count {
  margin-left: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--copper);
}
.talks-list { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); }
.talks-list li { display: flex; gap: 14px; padding: 8px 0; font-size: 14.5px; }
.talks-list li:first-child { padding-top: 0; }
.talks-list .time {
  flex: none; width: 56px; font-family: var(--mono); font-size: 12.5px; color: var(--copper); padding-top: 1px;
}
.talks-list .slide { font-size: 13px; margin-top: 2px; }

/* a block or field of the author page switched off under Registration form blocks / fields */
.form [hidden] { display: none !important; }