/*
 * Archive additions on top of the live theme.
 *
 * `theme.css` and `custom.css` are the site's own compiled build, taken from
 * tmp.zakworldoffacades.com and not edited. This file holds only what the live
 * site has no page for — the venue and media listings, the archive's own
 * filter strip — written in the same vocabulary so it reads as one site.
 */

/* ---- Reveal animations ------------------------------------------------- */
/*
 * The theme parks elements off-screen and the site's bundle reveals them on
 * scroll. That bundle is not shipped here, so anything marked for reveal is
 * shown outright rather than left invisible.
 */
[class*="js-reveal--"] {
  opacity: 1 !important;
  transform: none !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
}

/* ---- Events filter: search inside the dropdowns ------------------------ */
/*
 * Fifty-odd countries and nearly a hundred cities are more than anyone
 * scrolls. The search box sticks to the top of its dropdown and the options
 * scroll under it.
 */

.events-filter__search {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; background: #181818;
  border-bottom: 1px solid hsla(0, 0%, 100%, .14);
}
.events-filter__search-icon { display: flex; color: hsla(0, 0%, 100%, .5) }
.events-filter__search-input {
  flex: 1; min-width: 0; height: 26px; padding: 0; border: 0; background: transparent;
  color: #fff; font: inherit; font-size: 14px; letter-spacing: -.0325em;
}
.events-filter__search-input::placeholder { color: hsla(0, 0%, 100%, .45) }
.events-filter__search-input:focus { outline: none }
.events-filter__search-clear {
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0; border: 0; cursor: pointer;
  background: #ec3013; color: #fff;
}
.events-filter__search-clear[hidden] { display: none }
.events-filter__search-clear:hover { background: #c8280f }

.events-filter__search-empty {
  padding: 10px 16px 14px; margin: 0;
  color: hsla(0, 0%, 100%, .6); font-size: 14px;
}
.events-filter__search-empty[hidden] { display: none }

/* A city belongs to a country; say which, since every city is listed. */
.events-filter__city-group[hidden] { display: none }
.events-filter__group-label {
  margin: 14px 16px 6px; font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: hsla(0, 0%, 100%, .45);
}
.events-filter__city-group:first-child .events-filter__group-label { margin-top: 4px }

/* The lists scroll under the sticky search box rather than the menu growing. */
.js-main-events__filter-country-menu .main-events__filter-location-menu-rows,
.main-events__filter-location-menu--city .js-events-filter-list-cities {
  max-height: min(52vh, 460px); overflow-y: auto;
}
.event-filter__input-wrapper[hidden] { display: none }
.main-events__filter-location-menu-row[hidden] { display: none }

/* ---- Listing pages ----------------------------------------------------- */
/*
 * The live site has a Speakers and a Partners listing but no Events, Venues or
 * Media one. These give the missing pages the same heading, filter strip and
 * card rhythm the two that exist already use.
 */

.listing-heading { padding: calc(var(--header-height) + clamp(40px, 6vw, 104px)) var(--offset-x) 0 }
.listing-heading__wrapper { display: flex; align-items: flex-start; gap: 16px }
.listing-heading__title { margin: 0 }
.listing-heading__amount { margin: 0; opacity: .4 }

.listing-controls { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center;
                    padding-inline: var(--offset-x); margin-top: clamp(26px, 3vw, 48px) }
.listing-controls__chips { display: flex; flex-wrap: wrap; gap: 8px;
                           padding-inline: var(--offset-x); margin-top: 14px }
.listing-controls .listing-controls__chips { padding-inline: 0; margin-top: 0 }
.listing-controls__chips--years { margin-bottom: 6px }
.listing-select {
  height: 46px; padding: 0 16px; font: inherit; font-size: 13.5px; cursor: pointer;
  color: inherit; background: transparent; border: 1px solid rgba(24, 24, 24, .3);
  border-radius: 999px; max-width: min(360px, 100%);
}
.listing-results { margin-top: clamp(26px, 3vw, 44px) }
/* Deepan - `.listing-editbar` is gone: it held the one "Edit this partner"
   button on a public page, and editing belongs to the panel. */

/* The live search field: a rule under the input, nothing else.
 *
 * Deepan - scoped to `.listing-controls`, which is the editions wall — the one
 * page that wants this look. It used to be written on the bare class, and this
 * file loads after `overrides.css`, so it also landed on the speakers and
 * partners rows, where the component is the live site's bordered box with an
 * icon and a reset. Those rows got both designs at once: a 46px underlined
 * field inside a 32px bordered box, 15px larger than every control beside it,
 * and `order: -1` threw it to the front of the row ahead of the dropdowns.
 * A `flex-basis` of 380px also beat the mobile `width: 100%`, so on a phone it
 * neither filled its line nor shrank sensibly.
 *
 * The box design lives in `overrides.css` and is now the only thing styling
 * those two rows. This one styles the editions wall and nothing else.
 */
.listing-controls .speakers-search { flex: 0 1 380px; order: -1 }
.listing-controls .speakers-search__input {
  width: 100%; height: 46px; padding: 0 4px; font: inherit; font-size: 15px;
  color: inherit; background: transparent;
  border: 0; border-bottom: 1px solid rgba(24, 24, 24, .3); border-radius: 0;
}
.listing-controls .speakers-search__input::placeholder { color: currentColor; opacity: .42 }
.listing-controls .speakers-search__input:focus { outline: none; border-bottom-color: #e1251b }

/*
 * Events wall — only the grid. The card itself is the theme's `main-events__card`
 * and is left entirely alone: image on top at 5/3 with its scrim, then the text
 * block below behind a red rule. Overriding any of that is how it stopped
 * looking like the real thing the first time.
 */
.events-wall { display: grid; gap: 2px; padding-inline: var(--offset-x);
               grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) }
.events-wall--dark { padding-block: clamp(30px, 4vw, 56px) }
/* A card with no photograph would otherwise collapse to just its caption. */
.events-wall .main-events__card picture:empty { display: block; aspect-ratio: 5 / 3;
                                                background: #23262c }

/* Partner logo wall on a listing page. */
.partners-list__item-blank { display: flex; align-items: center; justify-content: center;
  height: 100%; padding: 12px; font-size: 12px; text-align: center; opacity: .5 }

/* Partner detail — the speaker layout, with a logo plate instead of a portrait. */
.partner-contacts__card { align-items: flex-start }
.partner-contacts__logo { width: 230px; height: 155px; flex: 0 0 230px; background: #fff;
  display: flex; align-items: center; justify-content: center; padding: 22px;
  border: 1px solid rgba(24, 24, 24, .12) }
.partner-contacts__logo img { max-width: 100%; max-height: 100%; object-fit: contain }
.partner-contacts__tiers { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 0 }
@media screen and (max-width: 767px) {
  .partner-contacts__logo { width: 180px; height: 120px; flex-basis: 180px }
}

.speaker-contacts__links, .speaker-contacts__socials { display: flex; flex-wrap: wrap;
  gap: 8px 18px; margin: 14px 0 0 }
.speaker-talks { margin-top: clamp(40px, 5vw, 74px) }
.speaker-talks__event { margin-top: 22px }
.speaker-talks__event-name { margin: 0 0 6px; font-weight: 600; letter-spacing: -.0325em }
.speaker-talks__row { display: flex; gap: 18px; padding: 9px 0;
                      border-top: 1px solid rgba(128, 128, 128, .26); font-size: 14px }
.speaker-talks__time { flex: 0 0 clamp(80px, 8vw, 120px); font-weight: 600; opacity: .6;
                       font-variant-numeric: tabular-nums }

/* ---- Home -------------------------------------------------------------- */

.home-intro { padding: calc(var(--header-height) + clamp(46px, 7vw, 120px)) var(--offset-x) 0 }
.home-intro__inner { max-width: 62ch }
.home-intro__rule { display: block; width: 44px; height: 2px; background: #e1251b; margin-bottom: 18px }
.home-intro__eyebrow { margin: 0 0 18px; opacity: .55 }
.home-intro__lead { margin: 0 }

.home-stats { padding: clamp(56px, 7vw, 120px) var(--offset-x) 0 }
.home-stats__grid { display: grid; gap: 0;
                    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) }
.home-stat { display: block; color: inherit; padding: 26px 24px 30px;
             border: 1px solid rgba(24, 24, 24, .16); margin: -.5px;
             transition: background-color .25s ease, color .25s ease }
a.home-stat:hover { background: #181818; color: #fff }
.home-stat__n { margin: 0; font-size: clamp(28px, 10px + 2vw, 46px); font-weight: 600;
                letter-spacing: -.045em; line-height: 1.12 }
.home-stat__k { margin: 8px 0 0; font-size: 11.5px; font-weight: 600; letter-spacing: .09em;
                text-transform: uppercase; opacity: .55 }

.home-section { padding-top: clamp(60px, 8vw, 130px) }
.home-section--dark { background: #181818; color: #fff;
                      padding-bottom: clamp(50px, 6vw, 100px); margin-top: clamp(60px, 8vw, 130px) }
.home-section__heading { display: flex; flex-wrap: wrap; gap: 16px; align-items: baseline;
  justify-content: space-between; padding-inline: var(--offset-x);
  margin-bottom: clamp(26px, 3.5vw, 52px) }
.home-section--dark .home-section__heading { padding-top: clamp(50px, 6vw, 100px) }

.home-partners { display: grid; gap: clamp(24px, 3vw, 52px);
                 grid-template-columns: minmax(0, 1fr); padding-inline: var(--offset-x) }
.home-partners__desc { margin: 0; max-width: 60ch; opacity: .62;
                       font-size: clamp(14px, 10px + .3125vw, 17px) }
.home-partners__wall { padding-inline: 0 }
@media screen and (min-width: 1200px) {
  .home-partners { grid-template-columns: minmax(0, 320px) minmax(0, 1fr) }
}

.home-cities__list { display: flex; flex-wrap: wrap; gap: 8px; padding-inline: var(--offset-x) }
.home-cities__list .chip { text-decoration: none }

/* ---- Page ground ------------------------------------------------------- */

.archive-page { padding-top: calc(var(--header-height) + clamp(40px, 6vw, 110px)) }
.archive-head { padding-inline: var(--offset-x); margin-bottom: clamp(28px, 4vw, 56px) }
.archive-head__title { margin-bottom: 14px }
.archive-head__sub { max-width: 62ch; opacity: .68 }
.archive-body { padding-inline: var(--offset-x) }

/* Dark pages keep the theme's ink; the header switches with them. */
.archive-page--dark { background: #181818; color: #fff; padding-bottom: clamp(60px, 8vw, 140px) }
.archive-page--dark .archive-head__sub { opacity: .7 }

/* ---- Filters ----------------------------------------------------------- */

.archive-filters { display: flex; flex-direction: column; gap: 14px;
                   padding-inline: var(--offset-x); margin-bottom: clamp(26px, 3vw, 44px) }
.archive-filters__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.archive-filters__label { width: 100%; font-size: 11px; font-weight: 600; letter-spacing: .08em;
                          text-transform: uppercase; opacity: .55 }
.archive-search {
  width: min(430px, 100%); height: 48px; padding: 0 18px; font: inherit; font-size: 15px;
  color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 0;
}
.archive-search::placeholder { color: currentColor; opacity: .45 }
.archive-search:focus { outline: none; border-color: #e1251b }

.chip {
  padding: 9px 17px; cursor: pointer; background: transparent; color: inherit;
  border: 1px solid currentColor; border-radius: 999px;
  font-size: clamp(12px, 8px + .3125vw, 14px); font-weight: 600; letter-spacing: -.0325em;
  text-transform: uppercase; opacity: .55; transition: opacity .2s ease, background-color .2s ease;
}
.chip:hover { opacity: 1 }
.chip.on, .chip.is-on { opacity: 1; background: #181818; color: #fff; border-color: #181818 }
.archive-page--dark .chip.on, .archive-page--dark .chip.is-on,
.section--ink .chip.on { background: #fff; color: #181818; border-color: #fff }
.chip-n, .chip__n { opacity: .6; margin-left: 5px; font-size: 11px }

.select {
  height: 44px; padding: 0 14px; font: inherit; font-size: 13.5px; cursor: pointer;
  color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 999px;
  max-width: min(340px, 100%);
}
.select option { color: #181818 }

.result-meta, .result-count { font-size: 13px; opacity: .6; margin-bottom: 20px;
                              padding-inline: var(--offset-x) }
.archive-body .result-meta, .archive-body .result-count { padding-inline: 0 }
[data-results] { transition: opacity .12s } [data-results].is-loading { opacity: .4 }
.empty, .card.empty { padding: 60px 0; text-align: center; opacity: .6 }
.more-wrap { display: flex; justify-content: center; margin-top: clamp(32px, 4vw, 60px) }

/* ---- Cards ------------------------------------------------------------- */
/* Built to sit beside the theme's own event cards, not to replace them. */

.a-grid { display: grid; gap: clamp(16px, 1.6vw, 26px);
        grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) }
.a-grid.people { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) }
.a-grid.tiles  { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px }

.a-card { display: flex; flex-direction: column; color: inherit; background: transparent;
          border: 1px solid currentColor; transition: background-color .25s ease, color .25s ease }
.a-card:hover { background: #181818; color: #fff }
.archive-page--dark .a-card:hover { background: #fff; color: #181818 }
.a-card__shot { aspect-ratio: 16 / 10; overflow: hidden; background: rgba(24, 24, 24, .07) }
.a-card__shot img { width: 100%; height: 100%; object-fit: cover; display: block;
                    transition: transform .5s cubic-bezier(.25,.25,0,1) }
.a-card:hover .a-card__shot img { transform: scale(1.04) }
.a-card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1 }
.a-card__kicker { font-size: 11px; font-weight: 600; letter-spacing: .08em;
                  text-transform: uppercase; color: #e1251b }
.a-card:hover .a-card__kicker { color: #e1251b }
.a-card__title { font-size: clamp(17px, 14px + .35vw, 22px); font-weight: 600;
                 letter-spacing: -.0325em; line-height: 1.15; text-transform: uppercase }
.a-card__meta { font-size: 13.5px; opacity: .62; margin-top: auto; line-height: 1.5 }

.a-grid.people .a-card__shot { aspect-ratio: 3 / 4 }
.a-grid.people .a-card__body { padding: 14px 16px 18px }
.a-grid.people .a-card__title { font-size: 15.5px }

/* ---- Old markup carried over ------------------------------------------- */
/*
 * The listing templates predate this theme. Their markup is sound and already
 * wired to the AJAX loader, so their class names are mapped here rather than
 * eight templates being rewritten and their working filters put at risk.
 */
.page-head { padding: calc(var(--header-height) + clamp(40px, 6vw, 110px)) var(--offset-x) 0 }
.page-head h1 { margin: 0 0 14px; font-size: clamp(35px, -12px + 4vw, 64px); font-weight: 600;
                letter-spacing: -.05em; line-height: 1; text-transform: uppercase }
.page-head .sub { margin: 0; max-width: 62ch; opacity: .68;
                  font-size: clamp(14px, 10px + .3125vw, 17px) }
.page-head ~ .filters { padding-inline: var(--offset-x); margin: 34px 0 30px;
                        display: flex; flex-direction: column; gap: 14px }
.filters input[type=search] {
  width: min(430px, 100%); height: 48px; padding: 0 18px; font: inherit; font-size: 15px;
  color: inherit; background: transparent; border: 1px solid currentColor;
}
.filters input[type=search]:focus { outline: none; border-color: #e1251b }
.chips-row { display: flex; flex-wrap: wrap; gap: 8px }
.filter-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center }
.filter-group { display: flex; flex-direction: column; gap: 9px }
.filter-label { font-size: 11px; font-weight: 600; letter-spacing: .08em;
                text-transform: uppercase; opacity: .55 }
[data-results]:not(.archive-body [data-results]) { padding-inline: var(--offset-x) }

.sub { opacity: .68 } .m { opacity: .62; font-size: 13.5px }
.t { font-weight: 600; letter-spacing: -.0325em }
.card { display: flex; flex-direction: column; color: inherit; border: 1px solid currentColor;
        padding: 18px 20px; gap: 6px }
.card.pad0 { padding: 0 }
.card .body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 5px }
a.card:hover { background: #181818; color: #fff }
.archive-page--dark a.card:hover { background: #fff; color: #181818 }
.avatar { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block;
          background: rgba(24, 24, 24, .07) }
.a-grid.tiles .avatar { aspect-ratio: 3 / 2; border: 0 !important; border-radius: 0 !important }

.pill { display: inline-block; padding: 4px 12px; border: 1px solid currentColor; border-radius: 999px;
        font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
        opacity: .62; white-space: nowrap }
.pill.warn { color: #e1251b; opacity: 1 }

.panel { border: 1px solid currentColor; padding: 20px 22px }
.panel-head { font-weight: 600; letter-spacing: -.0325em; margin-bottom: 3px }
.panel-sub { opacity: .6; font-size: 13px; margin-bottom: 14px }

.wrap { overflow-x: auto; border: 1px solid currentColor }
.wrap table { border-collapse: collapse; width: 100%; font-size: 14px }
.wrap th { text-align: left; padding: 13px 16px; font-size: 11px; font-weight: 600;
           letter-spacing: .08em; text-transform: uppercase; opacity: .55;
           border-bottom: 1px solid currentColor; white-space: nowrap }
.wrap td { padding: 13px 16px; border-bottom: 1px solid rgba(128, 128, 128, .22) }
.wrap tr:last-child td { border-bottom: 0 }

.profile { display: flex; gap: clamp(20px, 3vw, 48px); align-items: flex-start; flex-wrap: wrap;
           padding: calc(var(--header-height) + clamp(40px, 6vw, 110px)) var(--offset-x) 0 }
.profile h1 { margin: 0 0 10px; font-size: clamp(30px, -12px + 3.4vw, 52px); font-weight: 600;
              letter-spacing: -.05em; line-height: 1; text-transform: uppercase }
.profile-photo { width: 210px; height: 210px; flex: 0 0 210px; object-fit: cover }
.profile-logo { width: 230px; height: 155px; flex: 0 0 230px; display: flex; align-items: center;
                justify-content: center; padding: 20px; background: #fff;
                border: 1px solid rgba(24, 24, 24, .14) }
.profile-logo img { max-width: 100%; max-height: 100%; object-fit: contain }

.prose { max-width: 68ch; font-size: clamp(15px, 13px + .25vw, 17px); line-height: 1.65 }
.prose p { margin: 0 0 1em }
.prose a { color: #e1251b; text-decoration: underline; text-underline-offset: 3px }
.prose img { height: auto; margin: 1.4em 0; max-width: 100% }
.prose ul, .prose ol { margin: 0 0 1em; padding-left: 1.25em }
/* Gutenberg leftovers: without this the button anchors inherit red text on a
   red plate and disappear. */
.prose .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.4em 0 }
.prose .wp-block-button__link, .prose .wp-element-button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 0 28px; color: #fff; background: #e1251b; border-radius: 0; text-decoration: none;
  font-size: clamp(12px, 8px + .3125vw, 14px); font-weight: 600; letter-spacing: -.0325em;
  text-transform: uppercase; transition: background-color .2s ease;
}
.prose .wp-block-button__link:hover, .prose .wp-element-button:hover { background: #181818 }
.prose .wp-block-spacer { height: 24px !important }

/* Logo comparison grid on a partner page. */
.logo-grid { display: grid; gap: 2px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) }
.logo-cell { display: block; width: 100%; padding: 0; text-align: left; cursor: pointer;
             background: #fff; color: #181818; border: 1px solid rgba(24, 24, 24, .14) }
.logo-cell:hover { border-color: #181818 }
.logo-cell[disabled] { cursor: default; opacity: .65 }
.logo-cell .shot { position: relative; height: 118px; display: flex; align-items: center;
                   justify-content: center; padding: 16px }
.logo-cell .shot.none { background: #f1ede4; opacity: .7; font-size: 12px }
.logo-cell .shot img { max-width: 100%; max-height: 100%; object-fit: contain }
.logo-cell .ver { position: absolute; top: 7px; right: 8px; background: #181818; color: #fff;
                  font-size: 10.5px; font-weight: 600; padding: 2px 7px }
.logo-cell .cap { padding: 12px 14px 15px; border-top: 1px solid rgba(24, 24, 24, .12) }
.logo-cell .cap .tier { color: #e1251b; font-size: 11px; margin-top: 5px; font-weight: 600;
                        text-transform: uppercase; letter-spacing: .06em }
.viewtog { margin-left: auto }
.viewtog .chip { display: inline-flex; align-items: center; gap: 6px }
.viewtog .chip svg { width: 14px; height: 14px }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: #e1251b; cursor: pointer;
           text-decoration: underline; text-underline-offset: 3px }

/* Agenda, in the theme's rhythm. */
.agenda-group { margin-bottom: 10px }
.agenda-head { padding: 20px 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .08em;
               text-transform: uppercase; color: #e1251b; border-top: 1px solid currentColor }
.agenda-row { display: flex; gap: clamp(16px, 3vw, 56px); padding: 22px 0;
              border-top: 1px solid rgba(128, 128, 128, .28) }
.agenda-time { flex: 0 0 clamp(84px, 9vw, 132px); font-weight: 600; font-variant-numeric: tabular-nums }
.agenda-main { min-width: 0; flex: 1 }
.agenda-speakers { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 13px }
.who { display: inline-flex; align-items: center; gap: 9px; padding: 4px 15px 4px 4px;
       border: 1px solid currentColor; border-radius: 999px; font-size: 13px; color: inherit }
.who img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: 0 0 28px }
@media screen and (max-width: 767px) { .agenda-row { flex-direction: column; gap: 6px } }

/*
 * Deepan - the staff strip is gone, and so is the rule that moved the header.
 *
 * `body:has(.staff-bar) .header { top: 38px }` is the part worth noticing: the
 * theme fixes its header at the top of the window, so the strip had to push it
 * down. Leaving that rule behind with nothing to match would be harmless today
 * and confusing the next time somebody wonders why the header has a `top`.
 */

/*
 * Deepan - there is no `.partner-info { margin-top: … }` any more.
 *
 * The sponsor page had its first 96px behind the fixed header — the site's own
 * mark drawn across the top of Albond's logo — because it was the one page
 * with no breadcrumbs, and `.breadcrumbs` is what carries
 * `margin-top: var(--header-height)` everywhere else. It had a margin of its
 * own for a while. It has breadcrumbs now, the component that draws them
 * having been fixed, so the theme's own arrangement does the job and a
 * one-page exception is not needed.
 */

/* ---- What a sponsor does, and what it makes ---------------------------- */

/*
 * These were the speaker page's `speaker-bio__*`, which are written for one
 * block on a page: the eyebrow has no margin above it, the text has 64px
 * above it. Stacked, that put "Products & solutions" hard against the end of
 * the description and dropped its own text a screen away from it — a heading
 * attached to the wrong paragraph. Hence a pair of their own.
 */
.partner-about { display: flex; flex-direction: column; gap: 44px;
                 max-width: 760px; margin: 56px 0 0 }

.partner-about__eyebrow { display: inline-block; margin: 0 0 18px;
                          padding-bottom: 9px; border-bottom: 2px solid #e1251b;
                          color: #e1251b; font-size: 13px; font-weight: 600;
                          letter-spacing: .08em; text-transform: uppercase }

.partner-about__text { margin: 0; font-size: 17px; line-height: 1.55;
                       white-space: pre-wrap }

/*
 * The products as separate things, because that is what they are. Two columns
 * where there is room: six items down a single 760px column leaves the right
 * half of the page empty and reads like a paragraph that lost its commas.
 */
.partner-about__products { display: grid; grid-template-columns: repeat(2, 1fr);
                           gap: 10px 32px; margin: 0; padding: 0; list-style: none }

.partner-about__products li { position: relative; padding-left: 16px;
                              font-size: 16px; line-height: 1.45 }

.partner-about__products li::before { content: ''; position: absolute;
                                      left: 0; top: .62em; width: 6px; height: 6px;
                                      background: #e1251b }

@media screen and (max-width: 900px) {
  .partner-about { gap: 34px; margin-top: 40px }
  .partner-about__products { grid-template-columns: 1fr }
  .partner-about__text { font-size: 16px }
}

kbd { display: none }

/* ---- What an edition was about ----------------------------------------- */

/*
 * Deepan - 293 of the 299 have written this and no page has ever shown it.
 *
 * Held to a reading width. The imported HTML is paragraphs and lists, and a
 * paragraph that runs the full width of a 1440px page is one nobody finishes.
 */
.event-about { padding-top: clamp(64px, 8vw, 120px); width: 100% }

.event-about__inner { display: flex; flex-direction: column;
                      gap: clamp(20px, 2.5vw, 36px);
                      padding-inline: var(--offset-x); width: 100% }

.event-about__body { max-width: 820px; font-size: 17px; line-height: 1.6 }
.event-about__body :where(p, ul, ol) { margin: 0 0 1em }
.event-about__body :where(p, ul, ol):last-child { margin-bottom: 0 }
.event-about__body :where(ul, ol) { padding-left: 1.2em }
.event-about__body li { margin-bottom: .45em }
.event-about__body a { text-decoration: underline; text-underline-offset: 3px }
.event-about__body :where(img, iframe) { max-width: 100%; border-radius: 6px }

@media screen and (max-width: 900px) {
  .event-about__body { font-size: 16px }
}



/* ---- The agenda's day tabs ---------------------------------------------- */

/*
 * Deepan - shown only when a conference ran over more than one day, which so
 * far is Dubai 2024 alone. The chips are the theme's own — the same 1px rule,
 * square corner and uppercase as the year filter on the events listing — so a
 * reader who has used one has used the other.
 */
.event-agenda__days {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-inline: var(--offset-x);
  margin-bottom: clamp(20px, 2.5vw, 34px);
}

.event-agenda__day {
  appearance: none;
  padding: 10px 22px;
  border: 1px solid rgba(24, 24, 24, .22);
  border-radius: 0;
  background: transparent;
  color: #181818;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.event-agenda__day:hover { border-color: #181818 }

.event-agenda__day--on {
  background: #e1251b;
  border-color: #e1251b;
  color: #fff;
}

.event-agenda__day:focus-visible { outline: 2px solid #e1251b; outline-offset: 2px }

@media screen and (max-width: 460px) {
  .event-agenda__day { flex: 1 1 auto; padding-inline: 14px; text-align: center }
}


/* ---- The session recording, over the page ------------------------------- */

/*
 * Deepan - "Watch this session" used to push a player into the bottom of the
 * detail panel, under the people and the topic. That panel is sticky, so the
 * player arrived below the fold on something that will not scroll past its
 * own top, and you had to hunt for it. A recording somebody asked to watch
 * gets the window instead.
 *
 * Sized to fit whichever way round the window is: 92% of the width, and never
 * taller than 82% of the height once the 16:9 is worked out.
 */
.watch-box {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(12, 12, 12, .92);
  animation: watch-box-in .18s ease-out;
}

@keyframes watch-box-in { from { opacity: 0 } to { opacity: 1 } }

.watch-box__inner {
  position: relative;
  width: min(92vw, 146vh);
}

.watch-box__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.watch-box__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.watch-box__close {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}

.watch-box__close:hover { background: rgba(255, 255, 255, .12); border-color: #fff }
.watch-box__close:focus-visible { outline: 2px solid #e1251b; outline-offset: 2px }

@media screen and (max-width: 560px) {
  .watch-box { padding: 12px }
  .watch-box__close { width: 34px; height: 34px; font-size: 20px; bottom: calc(100% + 8px) }
}

@media (prefers-reduced-motion: reduce) {
  .watch-box { animation: none }
}


/* ---- A sponsor block sized by its tier's own number ---------------------- */

/*
 * Deepan - `partner_logo_sizes.width_px` finally does something.
 *
 * It is on the Logo sizes screen, cast on the model, read into
 * PartnerTier::$widths and fetched by PartnerLogoSize::widthFor(), and until
 * now no template asked for it: the widths lived in the theme's stylesheet, so
 * setting Large to 100 changed nothing at all.
 *
 * One row per tier, wrapping, and each logo as wide as its size says. That
 * replaces the theme's three fixed treatments — a grid of five or six columns
 * cannot honour a number, because its cells are a share of the page rather
 * than a width.
 */
.event-partners__list.event-partners__list--sized {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 1.8vw, 34px);
  grid-template-columns: none;
  padding-inline: var(--offset-x);
  width: 100%;
}

.event-partners__list--sized .event-partners__item {
  width: var(--logo-width, 140px);
  /* The theme's own proportion, so a logo keeps the room it had to breathe. */
  aspect-ratio: 1.5533980583;
  padding: clamp(8px, 1vw, 18px);
}

/*
 * A very narrow phone cannot give a 260px logo 260px, so the width becomes a
 * ceiling there rather than a promise.
 */
@media screen and (max-width: 560px) {
  .event-partners__list--sized .event-partners__item {
    width: min(var(--logo-width, 140px), 42vw);
  }
}

/* ---- The enquiry form on an event page --------------------------------- */

/*
 * Deepan - on the page's own ground, not on a slab of its own.
 *
 * This was dark to begin with, on the reasoning that an invitation should
 * read differently from the archive around it. That reasoning held while the
 * form was the last thing on the page. It stopped holding the moment the form
 * moved up between About and the speakers, both of which are light: a black
 * band across the middle of a cream page reads as a different website, not as
 * a different section.
 *
 * So: no ground of its own, the ink the rest of the page uses, and a hairline
 * above it to say where it starts — which is how every other section on an
 * event page marks itself out.
 */
.event-contact { margin-top: clamp(56px, 7vw, 104px); padding-top: clamp(48px, 6vw, 88px);
                 padding-bottom: clamp(8px, 1vw, 16px);
                 border-top: 1px solid rgba(24, 24, 24, .14); width: 100% }

/*
 * The heading beside the form once there is room for both.
 *
 * Stacked, the form inherited the full width of the page: on a 1440px screen
 * a two-column grid gave every field a 392px rule to write a name on, and on
 * a 1990px screen 900px — wider than a paragraph of a book. A column of its
 * own spends that width on something worth reading and leaves the form at a
 * width a form should be.
 */
.event-contact__inner { display: grid; grid-template-columns: minmax(0, 1fr);
                        gap: clamp(28px, 4vw, 48px);
                        padding-inline: var(--offset-x); width: 100% }

.event-contact__heading { display: flex; flex-direction: column; gap: 12px }
.event-contact__intro { margin: 0; max-width: 46ch; color: rgba(24, 24, 24, .64);
                        font-size: 16px; line-height: 1.55 }

/*
 * The rhythm inside the form.
 *
 * This was the real fault in the first draft: the gap lived on __inner, the
 * form was one child of it, and inside the form the fields, the consents and
 * the button had no spacing between them at all. The button came up hard
 * against the second checkbox as though it belonged to it.
 */
.event-contact__form { display: flex; flex-direction: column;
                       gap: clamp(30px, 3.5vw, 44px); width: 100%; max-width: 820px }

/* Two fields to a row, the message across both. Rows sit closer than columns:
   one gap for both left a hand's width between a label and the field above. */
.event-contact__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                       column-gap: clamp(24px, 2.5vw, 40px); row-gap: 26px }
.event-contact__field--wide { grid-column: 1 / -1 }

.event-contact__field { display: flex; flex-direction: column; gap: 8px; min-width: 0 }

.event-contact__field label { color: rgba(24, 24, 24, .52); font-size: 12px;
                              font-weight: 600; letter-spacing: .07em;
                              text-transform: uppercase }
.event-contact__field label span { color: #e1251b }

/*
 * A rule under the field and nothing else, which is the theme's own way with
 * a form. A box would sit on the page like a dialog; a line says write here
 * and then gets out of the way.
 *
 * Deepan - written out rather than wrapped in :where(), and that is the whole
 * point of it.
 *
 * :where() contributes no specificity, so `.event-contact :where(input...)`
 * scores 0,1,0 — and base/reset.css line 364 says `input[type=text], textarea
 * { color:#fff; caret-color:#fff }`, which scores 0,1,1 and therefore won.
 * Every field on this form was drawing white text; on the dark ground it had
 * to begin with, that happened to be what was wanted, so nothing showed. On
 * the page's own cream it is white on cream: contrast 1.17, which is nothing
 * at all. Naming the elements takes it to 0,2,1 and settles it.
 *
 * The reset makes the same claim on the caret and on what Chrome fills in, so
 * both are answered here too.
 */
.event-contact input[type=text],
.event-contact input[type=email],
.event-contact input[type=tel],
.event-contact textarea,
.event-contact select {
  appearance: none; width: 100%; padding: 9px 0;
  border: 0; border-bottom: 1px solid rgba(24, 24, 24, .24);
  background: transparent; color: #181818; caret-color: #181818;
  font: inherit; font-size: 16px; border-radius: 0;
  transition: border-color .2s ease;
}

.event-contact input:focus,
.event-contact textarea:focus,
.event-contact select:focus {
  outline: none; border-bottom-color: #e1251b;
}

/* What the browser fills in, in the colour the rest of the field is. */
.event-contact input:-webkit-autofill,
.event-contact input:-webkit-autofill:focus,
.event-contact input:-webkit-autofill:hover,
.event-contact select:-webkit-autofill,
.event-contact textarea:-webkit-autofill {
  -webkit-text-fill-color: #181818; caret-color: #181818; color: #181818;
}

.event-contact ::placeholder { color: rgba(24, 24, 24, .38); opacity: 1 }

.event-contact textarea { min-height: 96px; resize: vertical; line-height: 1.5 }

/* The dial code in front of the number, sized to its own text; the number
   takes the rest and may shrink, so a long code cannot push it out of line. */
.event-contact__phone { display: flex; align-items: flex-end; gap: 12px; min-width: 0 }
.event-contact__code { flex: 0 0 auto; width: auto; max-width: 42%; cursor: pointer }
.event-contact__phone input { flex: 1 1 auto; min-width: 0 }

/* The country picker -------------------------------------------------------

   A native dropdown cannot show a flag, cannot be styled, and makes 246
   countries a scroll. The select is still what posts; the script hides it and
   puts this in its place, in the page's own type and rule-under-the-field.
   Until the script runs, `.dial` is just the select and looks as it always
   did — which is why the select is only hidden once `.dial--ready` is set. */

.dial { position: relative; flex: 0 0 auto; min-width: 0 }
.dial--ready .js-dial-code { display: none }

.dial__button {
  display: flex; align-items: center; gap: 8px;
  width: auto; padding: 9px 0; border: 0;
  border-bottom: 1px solid rgba(24, 24, 24, .24);
  background: transparent; color: #181818;
  font: inherit; font-size: 16px; line-height: 1.2; cursor: pointer;
  transition: border-color .2s ease;
}

.dial__button:hover { border-bottom-color: rgba(24, 24, 24, .5) }
.dial--open .dial__button,
.dial__button:focus-visible { outline: none; border-bottom-color: #e1251b }

.dial__flag {
  width: 24px; height: 16px; object-fit: contain; border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, .12); background: #fff;
}

.dial__code { font-variant-numeric: tabular-nums }

.dial__caret {
  width: 15px; height: 15px; margin-left: 2px;
  color: rgba(24, 24, 24, .5); transition: transform .18s ease;
}

.dial--open .dial__caret { transform: rotate(180deg) }

/* The panel. Wider than the button so a long country name fits, and pinned
   left so it cannot push the number field about. */
/* Fixed, and on the body rather than inside the form: the script places it
   under the button each time it opens. Out of the form because Chrome's
   address autofill will put its own saved-address list over a field it thinks
   asks for a country, and a field no form contains is not one it offers. */
.dial__panel {
  position: fixed; z-index: 60; top: 0; left: 0;
  width: min(320px, 78vw);
  background: #fff; border: 1px solid rgba(24, 24, 24, .12); border-radius: 4px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .16);
  overflow: hidden;
}

.dial__search {
  display: block; width: 100%; padding: 11px 14px;
  border: 0; border-bottom: 1px solid rgba(24, 24, 24, .1);
  font: inherit; font-size: 14.5px; color: #181818; background: transparent;
}

.dial__search:focus { outline: none; border-bottom-color: #e1251b }

.dial__list {
  max-height: 264px; overflow-y: auto; margin: 0; padding: 4px 0; list-style: none;
  overscroll-behavior: contain;
}

.dial__option {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 14px; cursor: pointer; font-size: 14.5px; line-height: 1.3;
}

.dial__option:hover,
.dial__option--on { background: rgba(24, 24, 24, .05) }
.dial__option[aria-selected="true"] { background: rgba(225, 37, 27, .08) }

.dial__option-flag {
  flex: 0 0 auto; width: 22px; height: 15px; object-fit: contain;
  border: 1px solid rgba(0, 0, 0, .1); border-radius: 2px; background: #fff;
}

/* A country with no flag keeps its row the same width as the rest. */
.dial__option--noflag { padding-left: 46px }

.dial__option-code {
  flex: 0 0 auto; min-width: 48px;
  color: rgba(24, 24, 24, .62); font-variant-numeric: tabular-nums;
}

.dial__option-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

.dial__none { margin: 0; padding: 14px; color: rgba(24, 24, 24, .55); font-size: 14px }

.event-contact__consents { display: flex; flex-direction: column; gap: 12px }

.event-contact__consent { display: flex; align-items: flex-start; gap: 12px;
                          color: rgba(24, 24, 24, .8); font-size: 15px;
                          line-height: 1.45; cursor: pointer }

.event-contact__consent input {
  appearance: none; flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px;
  border: 1px solid rgba(24, 24, 24, .35); border-radius: 3px;
  background: transparent; cursor: pointer;
}

.event-contact__consent input:checked { border-color: #e1251b; background: #e1251b }
.event-contact__consent input:checked::after {
  content: ''; display: block; width: 10px; height: 5px; margin: 3px auto 0;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}
.event-contact__consent input:focus-visible { outline: 2px solid #e1251b; outline-offset: 2px }
.event-contact__consent a { color: inherit; text-decoration: underline; text-underline-offset: 3px }
.event-contact__consent span span { color: #e1251b }

.event-contact__actions { display: flex; flex-wrap: wrap; align-items: center;
                          gap: 16px 24px }

/* 48px tall and a square corner, which is what every other button on the
   site is; ink on cream rather than cream on ink, because this is the one
   thing on the section a reader is meant to press. */
.event-contact__submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-width: 168px; height: 48px; padding: 0 30px;
  border: 1px solid #181818; border-radius: 0;
  background: #181818; color: #f1ede4;
  font: inherit; font-size: 13px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; cursor: pointer;
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.event-contact__submit:hover { background: transparent; color: #181818 }
.event-contact__submit[disabled] { opacity: .5; cursor: default }
.event-contact__submit[disabled]:hover { background: #181818; color: #f1ede4 }
.event-contact__submit svg { width: 16px; height: 16px }

/* A field that failed, said on the field rather than in a summary at the top
   that reads 3 problems and leaves you hunting for them. */
.event-contact__error { margin: 0; color: #c0201a; font-size: 13px; line-height: 1.35 }
.event-contact__error:empty { display: none }

.event-contact input.is-bad,
.event-contact textarea.is-bad,
.event-contact select.is-bad { border-bottom-color: #c0201a }

.event-contact__result { margin: 0; font-size: 15px; line-height: 1.4;
                         color: rgba(24, 24, 24, .8) }
.event-contact__result.is-bad { color: #c0201a }
.event-contact__result.is-good { color: #1d7a45 }

/*
 * The honeypot. Off-screen rather than display:none: a bot that skips what is
 * not rendered still fills what is, and this is rendered.
 */
.event-contact__trap { position: absolute; left: -9999px; width: 1px; height: 1px;
                       overflow: hidden }

/* Wide enough for the heading to sit beside the form rather than above it. */
@media screen and (min-width: 1080px) {
  .event-contact__inner { grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
                          gap: clamp(48px, 5vw, 96px); align-items: start }
}

/* One field to a row. Two 240px columns come out narrower than the labels
   standing over them, which is worse than the scroll one column costs. */
@media screen and (max-width: 720px) {
  .event-contact__grid { grid-template-columns: minmax(0, 1fr); row-gap: 22px }
  .event-contact__form { gap: 28px }
}

/*
 * On a phone the dial code takes its own line: side by side it left the
 * number about eleven characters wide, and a phone number does not fit in
 * eleven characters.
 */
@media screen and (max-width: 460px) {
  .event-contact__phone { flex-wrap: wrap; gap: 14px }
  .event-contact__code { max-width: none; width: 100% }
  .event-contact__submit { width: 100%; min-width: 0 }
  .event-contact__intro { font-size: 15px }
}