/*
 * Component styles consolidated from server-rendered partials.
 * Keeping these rules in the document head makes lazy fragments CSP-ready
 * and prevents repeated style injection.
 */

/* Source: partial/s251-global.php */
#s281Global,
#s275Global,
    .popup--s281-global {
      --popup-image-border: 0;
    }

    #s281Global :is(.media, .popup-media, img, svg, object, video),
    #s275Global :is(.media, .popup-media, img, svg, object, video),
    .popup--s281-global :is(.popup-media, img, svg, object, video) {
      border: var(--popup-image-border, 0) !important;
      outline: 0 !important;
      box-shadow: none !important;
    }

/* Source: partial/s232-vacancy.php */
#s261Vacancy .vacancy-2col {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      column-gap: 1rem;
      align-items: start;
    }

    #s261Vacancy .charts-col {
      min-width: 0;
      position: relative;
      display: flex;
      flex-direction: column;
    }

    #s261Vacancy .charts-divider {
      width: 0;
      align-self: stretch;
      border-right: 1px dotted currentColor;
      pointer-events: none;
      opacity: 0.8;
    }

    #s261Vacancy .charts-col .card,
    #s261Vacancy .charts-col .card--popup {
      margin: 0 auto var(--chart-item-gap) auto;
      border: 0 !important;
      outline: 0 !important;
      box-shadow: none !important;
      background: transparent !important;
    }

    #s261Vacancy .charts-col .media,
    #s261Vacancy .charts-col .card .media,
    #s261Vacancy .charts-col .card figure,
    #s261Vacancy .charts-col button,
    #s261Vacancy .charts-col a,
    #s261Vacancy .charts-col [data-popup],
    #s261Vacancy .charts-col [data-popup-target] {
      border: 0 !important;
      outline: 0 !important;
      box-shadow: none !important;
      background: transparent !important;
    }

    #s261Vacancy .charts-col button,
    #s261Vacancy .charts-col a,
    #s261Vacancy .charts-col [data-popup],
    #s261Vacancy .charts-col [data-popup-target] {
      display: block;
      margin-left: 0;
      margin-right: 0;
    }

    #s261Vacancy .charts-col img,
    #s261Vacancy .charts-col svg,
    #s261Vacancy .charts-col object {
      display: block;
      max-width: 100%;
      height: auto;
      box-sizing: border-box;
      margin-left: 0;
      margin-right: 0;
      border: 0 !important;
      outline: 0 !important;
      box-shadow: none !important;
      background: transparent !important;
    }

    #popup-s261-vacancy-office .popup-media,
    #popup-s261-vacancy-retail .popup-media,
    #popup-s261-vacancy-office .popup-media :is(img, svg, object, video),
    #popup-s261-vacancy-retail .popup-media :is(img, svg, object, video) {
      border: 0 !important;
      outline: 0 !important;
      box-shadow: none !important;
    }

    #s261Vacancy .charts-col .card-body {
      margin-top: 0;
      margin-bottom: var(--chart-img-title-gap);
      text-align: center;
    }

    #s261Vacancy .charts-col .card-title {
      display: block;
      text-align: left;
      text-transform: none;
      margin: 0;
      padding: 0.5rem;
      background: transparent;
      color: inherit;
    }

    #s261Vacancy .card-title .title-line,
    #s261Vacancy .popup-title .title-line,
    #s261Vacancy .popup-title-line .title-line {
      display: block;
      font: inherit;
      font-size: inherit;
      font-weight: inherit;
      line-height: inherit;
      letter-spacing: inherit;
      text-transform: inherit;
    }

    #s261Vacancy .popup-title {
      font-size: var(--chart-heading-fs);
      font-weight: var(--chart-heading-fw);
      line-height: 1.15;
      text-transform: none;
      margin: 0;
    }

    #s261Vacancy .charts-col .card-text {
      font-size: var(--card-body-fs);
      font-weight: var(--card-body-fw);
    }

    #s261Vacancy .popup-content,
    #s261Vacancy .popup-content p,
    #s261Vacancy .popup-content li {
      font-size: var(--popup-body-fs);
      font-weight: var(--popup-body-fw);
    }

    @media (max-width: 767.98px) {
      #s261Vacancy .vacancy-2col {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 0.5rem;
        row-gap: 0.5rem;
      }

      #s261Vacancy .charts-col .card-title {
        padding: var(--trigger-card-title-pad-y, 0.2rem) var(--trigger-card-title-pad-x, 2px);
      }

      #s261Vacancy .charts-divider {
        display: none;
      }
    }

/* Source: partial/s232-economics.php */
/* S6 spacing rule: accordion.css owns outside spacing. Partial wrappers stay flush. */
    #s262Economics,
    #s262Economics > .pane-full {
      margin: 0 !important;
      padding: 0 !important;
      box-sizing: border-box;
    }

    #s262Economics {
      --s6-econ-trigger-title-fs: var(--card-title-fs);
      --s6-econ-trigger-subtitle-fs: var(--card-subtitle-fs);
      --s6-econ-trigger-card-border: var(--trigger-card-border-w, 0.5px) var(--trigger-card-border-style, dotted) currentColor;
      --s6-econ-trigger-card-radius: 0;
    }

    #s262Economics .charts-3col {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: 0.75rem;
      align-items: start;
      margin: 0 !important;
      padding: 0 !important;
    }

    #s262Economics .charts-col {
      min-width: 0;
      position: relative;
      display: flex;
      flex-direction: column;
      margin: 0 !important;
      padding: 0 !important;
    }

    #s262Economics .charts-col > .card,
    #s262Economics .charts-col > .card--popup,
    #s262Economics .charts-col > button.card,
    #s262Economics .charts-col > a.card,
    #s262Economics .charts-col > [data-popup].card,
    #s262Economics .charts-col > [data-popup-target].card {
      margin: 0 !important;
      padding: 0 !important;
      border: var(--s6-econ-trigger-card-border) !important;
      border-radius: var(--s6-econ-trigger-card-radius) !important;
      background: transparent !important;
      overflow: visible !important;
      box-sizing: border-box;
      box-shadow: none !important;
      outline: 0 !important;
    }

    #s262Economics .charts-col > .card > .media,
    #s262Economics .charts-col > .card > figure,
    #s262Economics .charts-col > button.card > .media,
    #s262Economics .charts-col > button.card > figure,
    #s262Economics .charts-col > a.card > .media,
    #s262Economics .charts-col > a.card > figure,
    #s262Economics .charts-col > [data-popup].card > .media,
    #s262Economics .charts-col > [data-popup].card > figure,
    #s262Economics .charts-col > [data-popup-target].card > .media,
    #s262Economics .charts-col > [data-popup-target].card > figure {
      display: block;
      line-height: 0;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      border-bottom: var(--trigger-card-border-w, 0.5px) var(--trigger-card-border-style, dotted) currentColor !important;
      box-sizing: border-box;
    }

    #s262Economics .charts-col > .card > .media img,
    #s262Economics .charts-col > .card > .media svg,
    #s262Economics .charts-col > .card > .media object,
    #s262Economics .charts-col > .card > figure img,
    #s262Economics .charts-col > .card > figure svg,
    #s262Economics .charts-col > .card > figure object,
    #s262Economics .charts-col > button.card > .media img,
    #s262Economics .charts-col > button.card > .media svg,
    #s262Economics .charts-col > button.card > .media object,
    #s262Economics .charts-col > a.card > .media img,
    #s262Economics .charts-col > a.card > .media svg,
    #s262Economics .charts-col > a.card > .media object,
    #s262Economics .charts-col > [data-popup].card > .media img,
    #s262Economics .charts-col > [data-popup].card > .media svg,
    #s262Economics .charts-col > [data-popup].card > .media object,
    #s262Economics .charts-col > [data-popup-target].card > .media img,
    #s262Economics .charts-col > [data-popup-target].card > .media svg,
    #s262Economics .charts-col > [data-popup-target].card > .media object {
      display: block;
      width: 100%;
      max-width: 100%;
      height: auto;
      margin: 0 !important;
      border: 0 !important;
      outline: 0 !important;
      box-shadow: none !important;
      box-sizing: border-box;
    }

    #s262Economics .charts-col > .card > .card-body,
    #s262Economics .charts-col > button.card > .card-body,
    #s262Economics .charts-col > a.card > .card-body,
    #s262Economics .charts-col > [data-popup].card > .card-body,
    #s262Economics .charts-col > [data-popup-target].card > .card-body {
      margin: 0 !important;
      padding: 0 !important;
      text-align: left !important;
      background: transparent !important;
      color: inherit !important;
    }

    #s262Economics .charts-col > .card .card-title,
    #s262Economics .charts-col > button.card .card-title,
    #s262Economics .charts-col > a.card .card-title,
    #s262Economics .charts-col > [data-popup].card .card-title,
    #s262Economics .charts-col > [data-popup-target].card .card-title {
      display: block !important;
      text-align: left !important;
      margin: 0 !important;
      padding: 0.5rem !important;
      background: transparent !important;
      color: inherit !important;
      text-transform: none !important;
    }

    #s262Economics .charts-col > .card .card-intro,
    #s262Economics .charts-col > .card .card-text,
    #s262Economics .charts-col > .card .popup-intro,
    #s262Economics .charts-col > button.card .card-intro,
    #s262Economics .charts-col > button.card .card-text,
    #s262Economics .charts-col > button.card .popup-intro,
    #s262Economics .charts-col > a.card .card-intro,
    #s262Economics .charts-col > a.card .card-text,
    #s262Economics .charts-col > a.card .popup-intro,
    #s262Economics .charts-col > [data-popup].card .card-intro,
    #s262Economics .charts-col > [data-popup].card .card-text,
    #s262Economics .charts-col > [data-popup].card .popup-intro,
    #s262Economics .charts-col > [data-popup-target].card .card-intro,
    #s262Economics .charts-col > [data-popup-target].card .card-text,
    #s262Economics .charts-col > [data-popup-target].card .popup-intro {
      display: block !important;
      max-width: none !important;
      font-size: var(--s6-econ-trigger-subtitle-fs) !important;
      font-weight: var(--card-subtitle-fw);
      line-height: var(--card-subtitle-lh);
      text-align: left !important;
      margin: 0 !important;
      padding: 0 0.5rem 0.5rem 0.5rem !important;
      background: transparent !important;
      color: inherit !important;
    }

    #s262Economics .card-title .title-line,
    #s262Economics .popup-title .title-line,
    #s262Economics .popup-title-line .title-line {
      display: block;
      font: inherit;
      font-size: inherit;
      font-weight: inherit;
      line-height: inherit;
      letter-spacing: inherit;
      text-transform: inherit;
    }

    /* Safety: suppress any intro that may be emitted by shared renderer defaults. */
    #s262Economics .popup .card-intro,
    #s262Economics .popup .popup-intro,
    #s262Economics .popup-content > .card-intro,
    #s262Economics .popup-content > .popup-intro,
    .popup--s6-economics .card-intro,
    .popup--s6-economics .popup-intro,
    .popup--s6-economics .popup-content > .card-intro,
    .popup--s6-economics .popup-content > .popup-intro {
      display: none !important;
    }

    #s262Economics .popup-content,
    #s262Economics .popup-content p,
    #s262Economics .popup-content li,
    .popup--s6-economics .popup-content,
    .popup--s6-economics .popup-content p,
    .popup--s6-economics .popup-content li {
      font-family: var(--popup-body-font, var(--font-base));
      font-size: var(--popup-body-fs);
      font-weight: var(--popup-body-fw);
      line-height: var(--popup-body-lh);
    }

    @media (max-width: 767.98px) {
      #s262Economics .charts-3col {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 0.375rem;
        row-gap: var(--trigger-card-grid-gap, 0.5rem);
      }

      #s262Economics .charts-col > .card .card-title,
      #s262Economics .charts-col > button.card .card-title,
      #s262Economics .charts-col > a.card .card-title,
      #s262Economics .charts-col > [data-popup].card .card-title,
      #s262Economics .charts-col > [data-popup-target].card .card-title {
        padding: var(--trigger-card-title-pad-y, 0.2rem) var(--trigger-card-title-pad-x, 2px) !important;
      }
    }

/* Source: partial/s233-people.php */
#s233-people {
      --people-card-border: var(--trigger-card-border-w, 0.5px) var(--trigger-card-border-style, dotted) currentColor;
      --people-card-radius: 0;
      --people-card-title-fs: var(--card-title-fs);
      --people-card-subtitle-fs: var(--card-subtitle-fs);
    }

    /* Trigger card shell: one clean border around media + text. */
    #s233-people .people-card,
    #s233-people .subgrid-4 > .card--popup,
    #s233-people .subgrid-4 > button.card,
    #s233-people .subgrid-4 > a.card,
    #s233-people .subgrid-4 > [data-popup].card,
    #s233-people .subgrid-4 > [data-popup-target].card {
      padding: 0 !important;
      border: var(--people-card-border) !important;
      border-radius: var(--people-card-radius) !important;
      background: transparent !important;
      overflow: visible !important;
      box-sizing: border-box;
      box-shadow: none !important;
      outline: 0 !important;
    }

    /* Trigger media: no image border; only a bottom divider. */
    #s233-people .people-card-media,
    #s233-people .people-card .media,
    #s233-people .people-card figure,
    #s233-people .subgrid-4 > .card--popup > .media,
    #s233-people .subgrid-4 > .card--popup > figure {
      display: block;
      line-height: 0;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      border-bottom: var(--trigger-card-border-w, 0.5px) var(--trigger-card-border-style, dotted) currentColor !important;
      box-sizing: border-box;
    }

    #s233-people .people-card-media img,
    #s233-people .people-card-media svg,
    #s233-people .people-card-media object,
    #s233-people .people-card-media video,
    #s233-people .people-card .media img,
    #s233-people .people-card .media svg,
    #s233-people .people-card .media object,
    #s233-people .people-card .media video,
    #s233-people .subgrid-4 > .card--popup > .media img,
    #s233-people .subgrid-4 > .card--popup > .media svg,
    #s233-people .subgrid-4 > .card--popup > .media object,
    #s233-people .subgrid-4 > .card--popup > .media video {
      display: block;
      width: 100%;
      max-width: 100%;
      height: auto;
      margin: 0 !important;
      border: 0 !important;
      outline: 0 !important;
      box-shadow: none !important;
      box-sizing: border-box;
    }

    /* Trigger text block: title + location share the same .5rem padding and left edge. */
    #s233-people .people-card-body,
    #s233-people .subgrid-4 > .card--popup > .card-body {
      margin: 0 !important;
      padding: 0.5rem !important;
      text-align: left !important;
      background: transparent !important;
      color: inherit !important;
    }

    #s233-people .people-card-title,
    #s233-people .subgrid-4 > .card--popup .card-title {
      display: block !important;
      text-align: left !important;
      margin: 0 !important;
      padding: 0 !important;
      background: transparent !important;
      color: inherit !important;
      text-transform: none !important;
    }

    /* The renderer uses card text / intro for the data field named sub-title. */
    #s233-people .people-card .card-text,
    #s233-people .people-card .card-intro,
    #s233-people .subgrid-4 > .card--popup .card-text,
    #s233-people .subgrid-4 > .card--popup .card-intro {
      display: block !important;
      max-width: none;
      margin: 0 !important;
      padding: 0 !important;
      background: transparent !important;
      color: inherit !important;
      font-size: var(--people-card-subtitle-fs) !important;
      font-weight: var(--card-subtitle-fw);
      line-height: 1.25;
      text-align: left !important;
    }

    #s233-people .popup-title {
      display: block !important;
      margin: 0 !important;
      padding: 0 !important;
      background: transparent !important;
      color: inherit !important;
      font-family: var(--popup-title-font, var(--font-ui));
      font-size: var(--popup-title-fs) !important;
      font-weight: var(--popup-title-fw);
      line-height: var(--popup-title-lh);
      letter-spacing: var(--popup-title-ls);
      text-align: left !important;
      text-transform: none !important;
    }

    #s233-people .title-line,
    #s233-people .value-line,
    #s233-people .popup-title-line,
    #s233-people .popup-value-line {
      display: block !important;
      margin: 0 !important;
      padding: 0 !important;
      background: transparent !important;
      color: inherit !important;
      font: inherit;
      font-size: inherit !important;
      font-weight: inherit;
      line-height: inherit;
      letter-spacing: inherit;
      text-align: inherit !important;
      text-transform: inherit;
    }

    #s233-people .popup-value-line {
      font-family: var(--popup-subtitle-font);
      font-size: var(--popup-subtitle-fs);
      font-weight: var(--popup-subtitle-fw);
      line-height: var(--popup-subtitle-lh);
      letter-spacing: var(--popup-subtitle-ls);
      text-transform: var(--popup-value-transform);
    }

    #s233-people .popup-content,
    #s233-people .popup-content p,
    #s233-people .popup-content li,
    #s233-people .popup-content table,
    #s233-people .popup-content .table,
    #s233-people .popup-content td,
    #s233-people .popup-content th {
      font-family: var(--popup-body-font, var(--font-base));
      font-size: var(--popup-body-fs);
      font-weight: var(--popup-body-fw);
      line-height: var(--popup-body-lh);
    }
  
    /* =========================================================
       Trigger card standard — full card border + media divider
       Applies only to visible trigger cards.
    ========================================================= */
    #s233-people {
      --people-card-title-fs: var(--card-title-fs);
      --people-card-subtitle-fs: var(--card-subtitle-fs);
      --people-card-border: var(--trigger-card-border-w, 0.5px) var(--trigger-card-border-style, dotted) currentColor;
      --people-card-radius: 0;
    }

    #s233-people .people-card,
    #s233-people .subgrid-4 > .card--popup,
    #s233-people .subgrid-4 > button.card,
    #s233-people .subgrid-4 > a.card,
    #s233-people .subgrid-4 > [data-popup].card,
    #s233-people .subgrid-4 > [data-popup-target].card {
      padding: 0 !important;
      border: var(--people-card-border) !important;
      border-radius: var(--people-card-radius) !important;
      background: transparent !important;
      overflow: visible !important;
      box-sizing: border-box;
      box-shadow: none !important;
      outline: 0 !important;
    }

    #s233-people .people-card-media,
    #s233-people .people-card .media,
    #s233-people .people-card figure,
    #s233-people .subgrid-4 > .card--popup > .media,
    #s233-people .subgrid-4 > .card--popup > figure {
      display: block;
      line-height: 0;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      border-bottom: var(--trigger-card-border-w, 0.5px) var(--trigger-card-border-style, dotted) currentColor !important;
      box-sizing: border-box;
    }

    #s233-people .people-card-media img,
    #s233-people .people-card-media svg,
    #s233-people .people-card-media object,
    #s233-people .people-card-media video,
    #s233-people .people-card .media img,
    #s233-people .people-card .media svg,
    #s233-people .people-card .media object,
    #s233-people .people-card .media video,
    #s233-people .subgrid-4 > .card--popup > .media img,
    #s233-people .subgrid-4 > .card--popup > .media svg,
    #s233-people .subgrid-4 > .card--popup > .media object,
    #s233-people .subgrid-4 > .card--popup > .media video {
      display: block;
      width: 100%;
      max-width: 100%;
      height: auto;
      margin: 0 !important;
      border: 0 !important;
      outline: 0 !important;
      box-shadow: none !important;
      box-sizing: border-box;
    }

    #s233-people .people-card-body,
    #s233-people .subgrid-4 > .card--popup > .card-body {
      display: block !important;
      margin: 0 !important;
      padding: 0.5rem !important;
      text-align: left !important;
      background: transparent !important;
      color: inherit !important;
    }

    #s233-people .people-card-title,
    #s233-people .subgrid-4 > .card--popup .card-title {
      display: block !important;
      text-align: left !important;
      margin: 0 !important;
      padding: 0 !important;
      background: transparent !important;
      color: inherit !important;
      text-transform: none !important;
    }

    #s233-people .people-card-title,
    #s233-people .people-card .card-intro,
    #s233-people .people-card .title-line,
    #s233-people .people-card .intro-line,
    #s233-people .popup-title,
    #s233-people .popup-title-line,
    #s233-people .popup-title .title-line {
      border: 0 !important;
      box-shadow: none !important;
      background: transparent !important;
      padding: 0 !important;
      color: inherit !important;
    }

    #s233-people .people-card .card-text,
    #s233-people .people-card .card-intro,
    #s233-people .subgrid-4 > .card--popup .card-text,
    #s233-people .subgrid-4 > .card--popup .card-intro {
      display: block !important;
      max-width: none !important;
      margin: 0 !important;
      padding: 0 !important;
      background: transparent !important;
      color: inherit !important;
      font-size: var(--people-card-subtitle-fs) !important;
      font-weight: var(--card-subtitle-fw);
      line-height: 1.25;
      text-align: left !important;
    }

    #s233-people .people-card .card-intro::before,
    #s233-people .subgrid-4 > .card--popup .card-intro::before {
      content: none !important;
    }

    #s233-people .people-card .card-intro .intro-line,
    #s233-people .subgrid-4 > .card--popup .card-intro .intro-line {
      display: block !important;
    }

    #s233-people .people-card,
    #s233-people .people-card > .media,
    #s233-people .people-card .people-card-media,
    #s233-people .people-card .people-card-title,
    #s233-people .people-card .card-intro,
    #s233-people .people-card .title-line,
    #s233-people .people-card .intro-line,
    #s233-people .people-card img,
    #s233-people .people-card video {
      margin: 0 !important;
      padding: 0 !important;
    }
      
      
    #s233-people > .pane-full.subgrid-4 {
      width: 100%;
      margin: var(--trigger-card-grid-gap, 0.5rem) 0 0 0;
      padding-left: 0;
      padding-right: 0;
      outline: 0px solid blue;
      outline-offset: 0;
      box-sizing: border-box;
    }

    /* END trigger card standard */

/* Source: partial/s242-venue.php */
#s263-venue .card-body {
      margin-top: var(--chart-img-title-gap);
      margin-bottom: 0.5rem;
      padding: var(--card-body-padding, 0);
      text-align: center;
    }

    #s263-venue .card-title {
      display: block !important;
      text-align: center !important;
      margin: 0 !important;
      padding: 0 !important;
      background: transparent !important;
      color: inherit !important;
      text-transform: none !important;
    }

    #s263-venue .card-text {
      display: block !important;
      align-self: center;
      max-width: 30ch;
      margin: 0.4rem auto 0 auto !important;
      padding: 0 !important;
      background: transparent !important;
      color: inherit !important;
      font-size: var(--card-subtitle-fs) !important;
      font-weight: var(--card-subtitle-fw);
      line-height: 1.35;
      text-align: center !important;
    }

    #s263-venue .popup-title {
      display: block !important;
      margin: 0 !important;
      padding: 0 !important;
      background: transparent !important;
      color: inherit !important;
      font-family: var(--popup-title-font, var(--font-ui));
      font-size: var(--popup-title-fs) !important;
      font-weight: var(--popup-title-fw);
      line-height: var(--popup-title-lh);
      letter-spacing: var(--popup-title-ls);
      text-align: left !important;
      text-transform: none !important;
    }

    #s263-venue .title-line,
    #s263-venue .value-line,
    #s263-venue .popup-title-line,
    #s263-venue .popup-value-line {
      display: block !important;
      margin: 0 !important;
      padding: 0 !important;
      background: transparent !important;
      color: inherit !important;
      font: inherit;
      font-size: inherit !important;
      font-weight: inherit;
      line-height: inherit;
      letter-spacing: inherit;
      text-align: inherit !important;
      text-transform: inherit;
    }

	    #s263-venue .popup-value-line {
	      font-family: var(--popup-subtitle-font);
	      font-size: var(--popup-subtitle-fs);
	      font-weight: var(--popup-subtitle-fw);
	      line-height: var(--popup-subtitle-lh);
	      letter-spacing: var(--popup-subtitle-ls);
	      text-transform: var(--popup-value-transform);
	    }

	    #s263-venue .popup-title--with-value .popup-title-line,
	    #s263-venue .popup-title--with-value .popup-value-line {
	      display: block !important;
	    }

	    #s263-venue .popup-title--with-value .popup-value-line {
	      margin-left: 0 !important;
	    }

	    #s263-venue .popup-content,
	    #s263-venue .popup-content p,
	    #s263-venue .popup-content li,
    #s263-venue .popup-content table,
    #s263-venue .popup-content .table,
    #s263-venue .popup-content td,
    #s263-venue .popup-content th {
      font-family: var(--popup-body-font, var(--font-base));
      font-size: var(--popup-body-fs);
      font-weight: var(--popup-body-fw);
	      line-height: var(--popup-body-lh);
	    }

	    /* =========================================================
	       Trigger card standard — full card border + media divider
	       Applies only to visible trigger cards.
	    ========================================================= */
	    #s263-venue {
	      --existing-trigger-title-fs: var(--card-title-trigger-fs);
	      --existing-trigger-subtitle-fs: var(--card-subtitle-fs);
	      --existing-trigger-card-border: var(--trigger-card-border-w, 0.5px) var(--trigger-card-border-style, dotted) currentColor;
	      --existing-trigger-card-radius: 0;
	    }

	    #s263-venue .subgrid-4 > .card,
	    #s263-venue .subgrid-4 > .card--popup,
	    #s263-venue .subgrid-4 > button.card,
	    #s263-venue .subgrid-4 > a.card,
	    #s263-venue .subgrid-4 > [data-popup].card,
	    #s263-venue .subgrid-4 > [data-popup-target].card {
	      padding: 0 !important;
	      border: var(--existing-trigger-card-border) !important;
	      border-radius: var(--existing-trigger-card-radius) !important;
	      background: transparent !important;
	      overflow: hidden !important;
	      box-sizing: border-box;
	      box-shadow: none !important;
	      outline: 0 !important;
	    }

	    #s263-venue .subgrid-4 > .card > .media,
	    #s263-venue .subgrid-4 > .card > figure,
	    #s263-venue .subgrid-4 > button.card > .media,
	    #s263-venue .subgrid-4 > button.card > figure,
	    #s263-venue .subgrid-4 > a.card > .media,
	    #s263-venue .subgrid-4 > a.card > figure,
	    #s263-venue .subgrid-4 > [data-popup].card > .media,
	    #s263-venue .subgrid-4 > [data-popup].card > figure,
	    #s263-venue .subgrid-4 > [data-popup-target].card > .media,
	    #s263-venue .subgrid-4 > [data-popup-target].card > figure {
	      display: block;
	      line-height: 0;
	      margin: 0 !important;
	      padding: 0 !important;
	      border: 0 !important;
	      border-bottom: var(--existing-trigger-card-border) !important;
	      box-sizing: border-box;
	    }

	    #s263-venue .subgrid-4 > .card > .media img,
	    #s263-venue .subgrid-4 > .card > .media svg,
	    #s263-venue .subgrid-4 > .card > .media object,
	    #s263-venue .subgrid-4 > button.card > .media img,
	    #s263-venue .subgrid-4 > button.card > .media svg,
	    #s263-venue .subgrid-4 > button.card > .media object,
	    #s263-venue .subgrid-4 > a.card > .media img,
	    #s263-venue .subgrid-4 > a.card > .media svg,
	    #s263-venue .subgrid-4 > a.card > .media object,
	    #s263-venue .subgrid-4 > [data-popup].card > .media img,
	    #s263-venue .subgrid-4 > [data-popup].card > .media svg,
	    #s263-venue .subgrid-4 > [data-popup].card > .media object,
	    #s263-venue .subgrid-4 > [data-popup-target].card > .media img,
	    #s263-venue .subgrid-4 > [data-popup-target].card > .media svg,
	    #s263-venue .subgrid-4 > [data-popup-target].card > .media object {
	      display: block;
	      width: 100%;
	      max-width: 100%;
	      height: auto;
	      margin: 0 !important;
	      border: 0 !important;
	      outline: 0 !important;
	      box-shadow: none !important;
	      box-sizing: border-box;
	    }

	    #s263-venue .subgrid-4 > .card > .card-body,
	    #s263-venue .subgrid-4 > button.card > .card-body,
	    #s263-venue .subgrid-4 > a.card > .card-body,
	    #s263-venue .subgrid-4 > [data-popup].card > .card-body,
	    #s263-venue .subgrid-4 > [data-popup-target].card > .card-body {
	      margin: 0 !important;
	      padding: 0 !important;
	      border: 0 !important;
	      outline: 0 !important;
	      box-shadow: none !important;
	      text-align: left !important;
	      background: transparent !important;
	      color: inherit !important;
	    }

	    #s263-venue .subgrid-4 > .card .card-title,
	    #s263-venue .subgrid-4 > button.card .card-title,
	    #s263-venue .subgrid-4 > a.card .card-title,
	    #s263-venue .subgrid-4 > [data-popup].card .card-title,
	    #s263-venue .subgrid-4 > [data-popup-target].card .card-title {
	      display: block !important;
	      text-align: left !important;
	      margin: 0 !important;
	      padding: 0.5rem !important;
	      border: 0 !important;
	      outline: 0 !important;
	      box-shadow: none !important;
	      background: transparent !important;
	      color: inherit !important;
	      text-transform: none !important;
	    }

	    #s263-venue .subgrid-4 > .card .card-title :is(.title-line, .value-line),
	    #s263-venue .subgrid-4 > button.card .card-title :is(.title-line, .value-line),
	    #s263-venue .subgrid-4 > a.card .card-title :is(.title-line, .value-line),
	    #s263-venue .subgrid-4 > [data-popup].card .card-title :is(.title-line, .value-line),
	    #s263-venue .subgrid-4 > [data-popup-target].card .card-title :is(.title-line, .value-line) {
	      border: 0 !important;
	      outline: 0 !important;
	      box-shadow: none !important;
	    }

	    #s263-venue .subgrid-4 > .card .card-text,
	    #s263-venue .subgrid-4 > .card .card-intro,
	    #s263-venue .subgrid-4 > button.card .card-text,
	    #s263-venue .subgrid-4 > button.card .card-intro,
	    #s263-venue .subgrid-4 > a.card .card-text,
	    #s263-venue .subgrid-4 > a.card .card-intro,
	    #s263-venue .subgrid-4 > [data-popup].card .card-text,
	    #s263-venue .subgrid-4 > [data-popup].card .card-intro,
	    #s263-venue .subgrid-4 > [data-popup-target].card .card-text,
	    #s263-venue .subgrid-4 > [data-popup-target].card .card-intro {
	      display: block !important;
	      max-width: none !important;
	      margin: 0 !important;
	      padding: 0 0.5rem 0.5rem 0.5rem !important;
	      background: transparent !important;
	      color: inherit !important;
	      font-size: var(--existing-trigger-subtitle-fs) !important;
	      font-weight: var(--card-subtitle-fw);
	      line-height: var(--card-subtitle-lh);
	      text-align: left !important;
	    }

	    /* Container spacing uses the shared partial-card gap without side margins. */
	    #s263-venue > .pane-full.subgrid-4 {
	      width: 100%;
      margin: var(--trigger-card-grid-gap, 0.5rem) 0 0 0;
      padding-left: 0;
      padding-right: 0;
      outline: 0px solid blue;
      outline-offset: 0;
      box-sizing: border-box;
    }

/* Source: partial/s232-robotics.php */
/* Robotics trigger cards follow the same card-title standard as S6 hubs. */
    #robotics,
    #robotics > .pane-full {
      margin: 0 !important;
      padding: 0 !important;
      box-sizing: border-box;
    }

    #robotics {
      --robotics-card-title-fs: var(--card-title-fs);
      --robotics-card-subtitle-fs: var(--card-subtitle-fs);
      --robotics-card-border: var(--trigger-card-border-w, 0.5px) var(--trigger-card-border-style, dotted) currentColor;
      --robotics-card-radius: 0;
    }

    #robotics .robotics-card,
    #robotics .subgrid-3 > .card--popup,
    #robotics .subgrid-3 > button.card,
    #robotics .subgrid-3 > a.card,
    #robotics .subgrid-3 > [data-popup].card,
    #robotics .subgrid-3 > [data-popup-target].card {
      margin: 0 !important;
      padding: 0 !important;
      border: var(--robotics-card-border) !important;
      border-radius: var(--robotics-card-radius) !important;
      background: transparent !important;
      overflow: visible !important;
      box-sizing: border-box;
      box-shadow: none !important;
      outline: 0 !important;
    }

    #robotics .robotics-card-media,
    #robotics .robotics-card .media,
    #robotics .robotics-card figure,
    #robotics .subgrid-3 > .card--popup > .media,
    #robotics .subgrid-3 > .card--popup > figure {
      display: block;
      line-height: 0;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      border-bottom: var(--trigger-card-border-w, 0.5px) var(--trigger-card-border-style, dotted) currentColor !important;
      box-sizing: border-box;
    }

    #robotics .robotics-card-media img,
    #robotics .robotics-card-media svg,
    #robotics .robotics-card-media object,
    #robotics .robotics-card .media img,
    #robotics .robotics-card .media svg,
    #robotics .robotics-card .media object,
    #robotics .subgrid-3 > .card--popup > .media img,
    #robotics .subgrid-3 > .card--popup > .media svg,
    #robotics .subgrid-3 > .card--popup > .media object {
      display: block;
      width: 100%;
      max-width: 100%;
      height: auto;
      margin: 0 !important;
      border: 0 !important;
      outline: 0 !important;
      box-shadow: none !important;
      box-sizing: border-box;
    }

    #robotics .robotics-card-body,
    #robotics .subgrid-3 > .card--popup > .card-body {
      margin: 0 !important;
      padding: 0 !important;
      text-align: left !important;
      background: transparent !important;
      color: inherit !important;
    }

    #robotics .robotics-card-title,
    #robotics .subgrid-3 > .card--popup .card-title {
      display: block !important;
      text-align: left !important;
      margin: 0 !important;
      padding: 0.5rem !important;
      background: transparent !important;
      color: inherit !important;
      text-transform: none !important;
    }

    #robotics .robotics-card .card-intro,
    #robotics .robotics-card .card-text,
    #robotics .subgrid-3 > .card--popup .card-intro,
    #robotics .subgrid-3 > .card--popup .card-text {
      display: block !important;
      max-width: none !important;
      font-size: var(--robotics-card-subtitle-fs) !important;
      font-weight: var(--card-subtitle-fw);
      line-height: 1.25;
      text-align: left !important;
      margin: 0 !important;
      padding: 0 0.5rem 0.5rem 0.5rem !important;
      background: transparent !important;
      color: inherit !important;
    }

    #robotics .robotics-card-title .title-line,
    #robotics .card-title .title-line,
    .popup--robotics .popup-title .title-line,
    .popup--robotics .popup-title-line .title-line {
      display: block;
      font: inherit;
      font-size: inherit;
      font-weight: inherit;
      line-height: inherit;
      letter-spacing: inherit;
      text-transform: inherit;
    }

/* Solid photo-card borders: 2.1.3, 2.2.4, and the photographic
   venue cards in 2.4.2. SVG diagrams in 2.4.2 keep their own rules. */
#s233-people .subgrid-4 > .people-card.people-card,
:is(#s213-industries .subgrid-4, #s313-exhibit-grid) > .industry-card.industry-card,
#s263-venue .subgrid-4 > .card.card--popup {
  border-style: solid !important;
}

#s233-people .subgrid-4 > .people-card > .people-card-media,
#s263-venue .subgrid-4 > .card.card--popup > :is(.media, figure) {
  border-bottom-style: solid !important;
}
/* FiDi trigger titles use the same H5 title-box treatment as 2.1 cards. */
#fidi .fidi-card-body,
#fidi .fidi-popup-trigger > .card-body,
.forces-diagram-card > .forces-diagram-card__body {
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  text-align: center !important;
}

#fidi .fidi-card-title,
#fidi .fidi-popup-trigger .card-title,
.forces-diagram-card .forces-diagram-card__title {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  /* Same text-block padding as the 2.2.0 mart cards. */
  padding: var(--trigger-card-body-pad, 0.35rem) !important;
  color: var(--h5-color, orange) !important;
  text-align: center !important;
}

/* 2.4.2 economics and venue triggers use the shared H5 title box. */
#s262Economics .charts-col > .card.card--popup > .card-body.content,
#s263-venue .subgrid-4 > .card.card--popup > .card-body.content {
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  text-align: center !important;
}

#s262Economics .charts-col > .card.card--popup h5.card-title,
#s263-venue .subgrid-4 > .card.card--popup h5.card-title {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0.5rem !important;
  color: var(--h5-color, orange) !important;
  text-align: center !important;
}

/* 2.2.4 industry triggers use the same H5 title box. */
:is(#s213-industries, #s313-exhibit-grid) .industry-card > .industry-card-body {
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  text-align: center !important;
}

:is(#s213-industries, #s313-exhibit-grid) .industry-card .industry-card-title {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0.5rem !important;
  color: var(--h5-color, orange) !important;
  text-align: center !important;
}

/* 2.1.4 people cards: H5 names with city/year at 80% of H5. */
#s233-people .subgrid-4 > .people-card.card--popup h5.people-card-title {
  color: var(--h5-color, orange) !important;
}

#s233-people .subgrid-4 > .people-card.card--popup .card-intro {
  font-family: var(--h5-font, var(--font-base)) !important;
  font-size: var(--fs-2xs) !important;
  line-height: var(--h5-lh, 1.2) !important;
  font-weight: 400 !important;
  color: var(--h5-color, orange) !important;
}

/* Canonical trigger-card text treatment.
   2.1.3 is the model: a left-aligned .5rem text block, an H5 title at
   weight 600, and (where present) a smaller location at weight 400. */
#s233-people .people-card > .people-card-body,
#s222-mart-grid .mart-card > .mart-card-body,
:is(#s213-industries, #s313-exhibit-grid) .industry-card > .industry-card-body {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  /* Was a flat 0.5rem. Tightened so the text block sits closer to the rule
     under the image; tighter again on a phone, where the cards are half the
     width and the padding was eating the line. Values in variables.css. */
  padding: var(--trigger-card-body-pad, 0.35rem) !important;
  text-align: left !important;
  background: transparent !important;
  color: inherit !important;
}

#s233-people .people-card h5.people-card-title,
#s222-mart-grid .mart-card h5.mart-card-title,
:is(#s213-industries, #s313-exhibit-grid) .industry-card h5.industry-card-title {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-variation-settings: "wght" 600 !important;
  font-synthesis: weight;
  color: var(--h5-color, orange) !important;
  text-align: left !important;
  text-transform: none !important;
}

#s233-people .people-card :is(.card-intro, .card-text),
#s222-mart-grid .mart-card .mart-card-location {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--h5-font, var(--font-base)) !important;
  font-size: calc(var(--h5-fs, 0.8rem) * 0.8) !important;
  line-height: var(--h5-lh, 1.2) !important;
  font-weight: 400 !important;
  color: var(--h5-color, orange) !important;
  text-align: left !important;
}

#s222-mart-grid .mart-card,
:is(#s213-industries, #s313-exhibit-grid) .industry-card,
.forces-diagram-card {
  border: var(--card-border) !important;
}

/* Restore the original image treatment: no partial border around the media,
   only the single divider between the image and its title block. */
#s222-mart-grid .mart-card > .mart-card-media,
:is(#s213-industries, #s313-exhibit-grid) .industry-card > .industry-card-media,
.forces-diagram-card > .forces-diagram-card__media {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: var(--card-border) !important;
  outline: 0 !important;
  box-shadow: none !important;
}

#s222-mart-grid .mart-card > .mart-card-media > :is(img, svg, object, video),
:is(#s213-industries, #s313-exhibit-grid) .industry-card > .industry-card-media > :is(img, svg, object, video),
.forces-diagram-card > .forces-diagram-card__media > :is(img, svg, object, video) {
  margin: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* 2.2.2 alternative: three-column newspaper masonry. */
.p222b-masonry {
  column-count: 3;
  column-gap: var(--trigger-card-grid-gap, 1rem);
  width: 100%;
}

.p222b-masonry__item {
  --p222b-paper: #f6f2e9;
  --p222b-rule: currentColor;
  display: block;
  width: 100%;
  margin: 0 0 var(--trigger-card-grid-gap, 1rem);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

.p222b-masonry__media {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: var(--p222b-paper);
  border: var(--hairline, 1px) solid var(--p222b-rule);
}

.p222b-masonry__image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border: 0;
  mix-blend-mode: multiply;
}

/* Give every future-city paper its own physical/editorial character. */
.p222b-masonry__item--birmingham {
  --p222b-paper: #f2eadb;
  --p222b-rule: #6f291f;
  width: 96%;
}

.p222b-masonry__item--birmingham .p222b-masonry__media,
.p222b-masonry__item--kinshasa .p222b-masonry__media,
.p222b-masonry__item--lagos .p222b-masonry__media {
  aspect-ratio: 0.72;
}

.p222b-masonry__item--birmingham .p222b-masonry__image,
.p222b-masonry__item--kinshasa .p222b-masonry__image,
.p222b-masonry__item--lagos .p222b-masonry__image {
  height: 100%;
  object-fit: cover;
}

.p222b-masonry__item--dhaka {
  --p222b-paper: #fff1e5;
  --p222b-rule: #8c2633;
  width: 92%;
  margin-left: auto;
}

.p222b-masonry__item--dhaka .p222b-masonry__media {
  padding: 0.3rem;
  box-shadow: inset 0 0 0 1px rgb(140 38 51 / 28%);
}

.p222b-masonry__item--kinshasa {
  --p222b-paper: #f0eee7;
  --p222b-rule: #161616;
}

.p222b-masonry__item--kinshasa .p222b-masonry__media {
  border-width: 2px;
}

.p222b-masonry__item--kyiv {
  --p222b-paper: #f3f6f7;
  --p222b-rule: #27466d;
  width: 95%;
  margin-left: auto;
}

.p222b-masonry__item--kyiv .p222b-masonry__media {
  padding: 0.18rem 0.18rem 0.45rem;
}

.p222b-masonry__item--lagos {
  --p222b-paper: #edf3e7;
  --p222b-rule: #234d36;
  width: 97%;
}

.p222b-masonry__item--lagos .p222b-masonry__media {
  box-shadow: inset 0 0 0 3px rgb(35 77 54 / 12%);
}

.p222b-masonry__item--london {
  --p222b-paper: #f0f0ed;
  --p222b-rule: #4d4d4d;
  width: 94%;
  margin-left: auto;
}

/* Remove the upper motto strip while retaining the London masthead. */
.p222b-masonry__item--london .p222b-masonry__media {
  aspect-ratio: 1103 / 1388;
}

.p222b-masonry__item--london .p222b-masonry__image {
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.p222b-masonry__item--moscow {
  --p222b-paper: #e9e9e6;
  --p222b-rule: #292929;
  width: 98%;
}

.p222b-masonry__item--moscow .p222b-masonry__image {
  filter: saturate(0.7) contrast(1.08);
}

.p222b-masonry__item--ogallala {
  --p222b-paper: #efe3cc;
  --p222b-rule: #76552c;
  width: 91%;
  margin-left: auto;
}

.p222b-masonry__item--ogallala .p222b-masonry__media {
  padding: 0.42rem;
  box-shadow: 0.28rem 0.28rem 0 rgb(118 85 44 / 18%);
}

.p222b-masonry__item--paris {
  --p222b-paper: #fff1e5;
  --p222b-rule: #5f2938;
  width: 96%;
}

.p222b-masonry__item--paris .p222b-masonry__media {
  padding: 0.2rem 0.2rem 0.55rem;
  border-width: 2px;
}

/* The revised papers already carry their own proportions and visual identity.
   Show every complete front page and use the same popup trigger as Mission. */
.p222b-masonry__media,
.p222b-masonry__item--birmingham .p222b-masonry__media,
.p222b-masonry__item--kinshasa .p222b-masonry__media,
.p222b-masonry__item--lagos .p222b-masonry__media,
.p222b-masonry__item--london .p222b-masonry__media {
  aspect-ratio: auto !important;
  overflow: visible;
  padding: 0 !important;
}

.p222b-masonry__trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: zoom-in;
}

.p222b-masonry__image,
.p222b-masonry__item--birmingham .p222b-masonry__image,
.p222b-masonry__item--kinshasa .p222b-masonry__image,
.p222b-masonry__item--lagos .p222b-masonry__image,
.p222b-masonry__item--london .p222b-masonry__image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* =========================================================
   2.1.1 FORCES GRID — four columns, one per market-forces
   group. Small type, bulleted, tightened leading.

   ONE GAP, BOTH AXES. The horizontal gap came from
   column-gap (a clamp resolving to ~1.75rem on a desktop)
   while the vertical gap came from the card's own
   margin-bottom (1rem), so the grid read as wider across
   than down. Both now consume --forces-grid-gap, and the
   card margin below consumes it too — change the token in
   variables.css and the grid stays square.
========================================================= */
.forces-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  column-gap: var(--forces-grid-gap);
  row-gap: var(--forces-grid-gap);
  align-items: start;
}

.forces-col {
  min-width: 0;
}

/* No rule under the group title. The cards below already carry their own
   borders, so the divider read as a third horizontal line stacked above
   them. Applies to all four columns. */
.forces-col__title {
  margin: 0 0 0.5rem;
  padding-bottom: 0.35rem;
  font-family: var(--h6-font);
  font-size: var(--h6-fs);
  line-height: var(--h6-lh);
  font-weight: var(--h6-fw);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}

.forces-list {
  margin: 0;
  padding-left: 0.9rem;
  list-style: disc;
}

.forces-list li {
  margin: 0 0 0.45rem;
  font-family: var(--p-font);
  font-size: var(--copy-sm-fs, 0.9rem);
  line-height: 1.35;
  font-weight: 400;
}

.forces-list li::marker {
  font-size: 0.8em;
}

.forces-list strong {
  font-weight: 600;
}

@media (max-width: 575.98px) {
  .forces-grid {
    column-gap: var(--forces-grid-gap);
    row-gap: var(--forces-grid-gap);
  }

  .forces-col__title {
    font-size: 0.7rem;
    letter-spacing: 0.02em;
  }

  .forces-diagram-card {
    margin-bottom: var(--forces-grid-gap) !important;
  }
}
/* =========================================================
   2.1.1 MARKET-FORCE CARDS
   ---------------------------------------------------------
   These take the canonical trigger-card treatment — card border and
   the divider under the image come from the mart/industry block, and
   the TITLE now comes from the 2.2.1 FiDi block above: centred, with
   the padding on the title and none on the body. 2.1.1 and 2.2.1 are
   deliberately identical.

   Everything that used to sit here has gone, because it was working
   against that treatment rather than with it:

     border: 0 !important          the card drew no frame at all, and
     + a (0,4,1) override          a second rule existed only to beat
                                   cards.css back off the article

     outline on __media            the frame was faked as an outline
                                   on the image instead of a border on
                                   the card, so it read differently at
                                   every zoom level

   The one genuinely local thing is the help cursor: these images are
   tooltip triggers, which the other card families are not.
   ========================================================= */
.forces-diagram-card {
  /* This IS the vertical gap between cards in a column, so it must match
     the grid's column-gap. Both read --forces-grid-gap. */
  margin-bottom: var(--forces-grid-gap) !important;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.forces-diagram-card__media {
  display: block;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.forces-diagram-card__image {
  display: block;
  width: 100%;
  height: auto;
  cursor: help;
}

/* The asterisk after a card title opens that card's data-and-sources
   offcanvas. It sits inside the <h6>, straight after the title text, and
   is a real <button> so it is reachable by keyboard.

   It does NOT fight the card's own popup: the delegated popup listener
   early-returns on isBootstrapIntent(), which is true for anything inside
   [data-bs-toggle] — so a click on the asterisk opens only the panel, and
   a click anywhere else on the card still opens the popup. */
.forces-diagram-card__note {
  vertical-align: super;
  margin-left: 0.1em;
  padding: 0 0.15em;
  border: 0;
  background: none;
  color: inherit;
  font-size: 0.75em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.forces-diagram-card__note:is(:hover, :focus-visible) {
  text-decoration: underline;
}

/* The same data-and-sources panel, reachable from inside the popup as well
   as from the card's asterisk. Sits under the popup's intro copy. */
.driver-popup-content .popup-oc-link {
  margin: 0.75rem 0 0;
}


/* =========================================================
   CHART CARD  (.s210-chart-card)
   Image, then title, then a source line. Used by 2.3.0
   (partial/s230.php) and 3.3.0 (partial/s330.php); the original
   2.1.0 host and the #s222-magnitude panel it borrowed its source
   line from are both gone. The border comes from card--flat, which
   reads --card-border-* in variables.css, so this block sets no
   colours of its own — the card inherits the field ink.
========================================================= */
.s210-chart-card {
  width: 100%;
}

/* Narrows to 75% ONLY inside the old 50/50 .subgrid-2--intro pane, where
   a full-width card was too wide to read against the prose. Cards that sit
   in the 2/3–1/3 model (.subgrid-2B) already have a narrow column, so they
   stay at 100% and fill it — 2.3.0's map card is the case in point.

   Scoping this to the layout rather than to a section means it self-corrects
   if 2.1.0 is moved onto .subgrid-2B later.

   A media query adds no specificity, so this only works from a file that
   loads after cards.css — which is why the same rule placed there had no
   effect. */
@media (min-width: 901px) {
  .subgrid-2--intro .s210-chart-card {
    width: 75%;
  }
}

.s210-chart-card__media,
.s210-chart-card__image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
}

/* Rule under the image, separating it from the title/source block.

   cards.css carries `.card .media { border-bottom: 0 }` at (0,2), which
   beats a bare `.s210-chart-card__media` at (0,1) no matter that this
   file loads later — specificity is settled before source order. The
   selector below is (0,2) and later, so it wins.

   The value is --trigger-card-border, the exact token .card--flat uses
   for the card's outer border, so the rule and the frame always share
   weight, style, and colour. */
.s210-chart-card .s210-chart-card__media {
  border-bottom: var(--trigger-card-border,
    var(--trigger-card-border-w, 1px)
    var(--trigger-card-border-style, solid)
    var(--trigger-card-border-color, currentColor));
}

/* Same text-block padding as every other card — the mart cards in 2.2.0
   and the FiDi map cards in 2.2.1 both read this token. The top stays
   flush so the title sits directly under the rule. */
.s210-chart-card__body {
  padding: 0 var(--trigger-card-body-pad, 0.35rem) var(--trigger-card-body-pad, 0.35rem);
}

/* NO font declarations here. The element carries .card-title in the markup,
   so it is typed by the one card-title rule — see the note beside the tokens
   in variables.css. The `font-weight: 700` that used to sit here existed only
   because --card-title-trigger-fw aliased --h5-fw (400); the weight is now
   declared on the token itself at 600, so every card title agrees.
   Shared by the 2.1.0, 2.3.0 and 3.3.0 cards, which all use this class. */
.s210-chart-card__title {
  /* h5 in typography.css carries padding-top/bottom of 1rem. This class only
     set margin, so that 1rem came through and left the map and chart titles
     floating well clear of the rule above and the description below. Every
     other card title on the site already zeroes it — the mart and people
     titles do it explicitly — so the inset comes from __body alone, which
     reads the shared --trigger-card-body-pad. */
  padding: 0;
  margin: 0.25rem 0 0.35rem;
}

/* Secondary text. Runs on --card-subtitle-fs, the same token as the location
   line on the 2.2.0 mart cards, so the card family reads at one scale. Every
   .card-text inside one of these cards picks it up, which is why none of the
   three partials needs an extra class. */
.s210-chart-card .card-text,
.s210-chart-card__source {
  font-family: var(--card-subtitle-font);
  font-size: var(--card-subtitle-fs);
  font-weight: var(--card-subtitle-fw);
  line-height: var(--card-subtitle-lh);
  letter-spacing: var(--card-subtitle-ls);
}

/* Links take the card's ink rather than a browser blue, and rely on
   the underline alone — matching .on-black a elsewhere. */
.s210-chart-card .card-text a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.s210-chart-card .card-text a:hover,
.s210-chart-card .card-text a:focus-visible {
  text-decoration-thickness: 2px;
}


/* =========================================================
   SQUARE POPULATION BAR CHART  (.city-population-square)
   Used by 2.1.3 (partial/s213-people.php) and by the
   "Developing Markets" card + popup in 2.1.1 (partial/s211.php).
   The host element carries .city-population-square; everything
   below is scoped to it rather than to one section, so a second
   instance only has to add the class.
   ---------------------------------------------------------
   2.1.3 POPULATION BAR CHART  (partial/s213-people.php)
   Restored from the old 2.1.2. Two things this block has to
   undo, both inherited rather than intended:

   1. SIZING. Every .driver-trigger rule in cards.css is scoped
      to a .driver-card-grid ancestor, which this standalone
      trigger does not have — so it received no width at all and
      collapsed to its content. Sizing is restated here.

   2. CLIPPING. ui.css carries
        .pane-right, .pane-right *, .pane-left * … { overflow: visible }
      to stop scaled cards being clipped. That universal descendant
      selector also reaches .city-population-bars__bar, cancelling the
      overflow:hidden that keeps each city label inside its bar — which
      is why the labels spilled onto the white field and read as
      left-truncated. .city-population-graphic .…__bar is (0,2,0) and
      beats .pane-right * at (0,1,0), and works for the popup copy too,
      which gets relocated to <body> and so leaves .pane-right entirely.
========================================================= */

/* The wrapper used to be a button, whose content box shrink-wrapped in
   WebKit and left everything at half width regardless of width:100%.
   It is a plain block container now, so ordinary block layout applies
   and no width override is needed. */
/* Fills its column. The pane is now the 1fr track of a .subgrid-2B, the
   same structure as 2.1.1 and 2.1.2, so the chart sizes from the grid
   rather than carrying its own 75% inset. Was `width: 75%; margin: 0 auto`,
   which left it floating small inside an already-narrow column. */
.s213-population-chart {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  text-align: left;
  box-sizing: border-box;
}

.s213-population-chart > .driver-trigger-media {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* .city-population-graphic is rendered as a <span> here, and maps.css
   gives it width:100% but never a display. On an inline box width is
   ignored, so it shrank to its content — about half the column. The only
   place it worked before was inside .layout-market-frame, which happens
   to set display:flex on it. Stating the display is the whole fix. */
/* The diagram is square. aspect-ratio drives the height off the column
   width, so it stays square as the 50% cell resizes. Flex column so the
   bars can claim whatever height is left inside the padding. */
.city-population-square .city-population-graphic {
  display: flex;
  flex-direction: column;
  aspect-ratio: 1 / 1;
  width: 100%;
  min-width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  box-sizing: border-box;
  overflow: hidden;
  /* Full bleed. maps.css pads the graphic 0.55rem all round; the padding is
     dropped entirely so the first bar sits on the top edge, the last on the
     bottom edge, and every bar starts at the left edge. */
  padding: 0;
}

/* Same reason: the bars element is a <span> in the trigger. maps.css
   sets display:flex on the class, but restate it so the column layout
   cannot be lost to a later inline default. */
.city-population-square .city-population-bars {
  display: flex;
  flex-direction: column;
  /* flex-basis 0 + min-height 0: the bars take exactly the height the square
     leaves them and never push it taller, so aspect-ratio always wins. */
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  min-width: 100%;
  /* maps.css caps this at min(28rem, 74vh); inside a square that cap would
     leave dead space below the bars. */
  max-height: none;
  height: auto;
  overflow: hidden;
  box-sizing: border-box;
}

/* 22 rows divide the square's height between them. min-height:0 releases
   the 1.06rem floor maps.css sets, so a narrower column still fits without
   overflowing instead of scrolling. */
.city-population-square .city-population-bars__row {
  flex: 1 1 0;
  min-height: 0;
}

.city-population-square .city-population-bars__track,
.city-population-square .city-population-bars__bar {
  height: 100%;
  min-height: 0;
}

.city-population-square .city-population-bars__row,
.city-population-square .city-population-bars__track {
  width: 100%;
  min-width: 100%;
  box-sizing: border-box;
}

.s213-population-chart > .driver-trigger-title {
  display: block;
  width: 100%;
  margin: 0;
  padding: var(--trigger-card-title-pad-y, 0.2rem) var(--trigger-card-title-pad-x, 2px);
}

/* Keeps each label inside its bar, in both the trigger and the popup. */
.city-population-graphic .city-population-bars__bar {
  overflow: hidden;
}

.city-population-graphic .city-population-bars__track {
  overflow: hidden;
}


/* --- play control + year readout ---------------------------------
   Both live inside the graphic: updatePopulationChartYear() locates the
   year via chart.closest("[data-population-chart-graphic]"), and there is
   no foot row below the square any more. The pair is pinned to the
   bottom-right corner as an absolutely positioned stack — out of flow, so
   it cannot steal height from the bars or break the 1:1 ratio — with the
   Expanding Cities control directly above the year. */
.city-population-square .city-population-graphic {
  position: relative;
}

.city-population-square__hud {
  position: absolute;
  right: 0.55rem;
  bottom: 0.4rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  text-align: right;
}

.city-population-square__year {
  display: block;
  font-family: var(--font-ui, var(--font-base));
  font-size: var(--fs-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  pointer-events: none;
}

.city-population-square__action {
  flex: 0 0 auto;
  white-space: nowrap;
  pointer-events: auto;
}


/* --- city name over the bar ---------------------------------------
   renderPopulationBars() writes "<city> <value>" into
   .city-population-bars__label, which sits INSIDE .…__bar. The bar has
   overflow:hidden, so the name is painted on the black bar and clipped
   where the bar ends — it reads as a label on top of the bar rather
   than as text running onto the white field.

   --ink-on-dark is the same light grey the rest of the site uses on a
   black ground, so this stays on the token system. maps.css sets the
   bar's colour to --city-map-light (#fff) at (0,1,0); this is (0,2,0)
   and wins. */
.city-population-square .city-population-bars__label {
  color: var(--ink-on-dark);
  padding-left: 0.1rem;
  font-weight: 600;
}

/* --- highlighted cities -------------------------------------------
   Four cities are called out in colour; every other bar keeps the
   default black. renderPopulationBars() stamps each row with
   data-city-key, a lower-cased, punctuation-stripped form of the city
   name — but the map's labels carry trailing notes ("Tokyo - top-10
   today", "Lagos / Accra - 2100 top-10: Lagos"), so the key is matched
   on a substring rather than exactly.

   Green is the site's existing --chart-accent (#00a651); the other
   three are its flat primaries. White labels, not --ink-on-dark, since
   light grey on orange does not carry. */
.city-population-square {
  --pop-bar-red: #ed1c24;
  --pop-bar-green: #00a651;
  --pop-bar-blue: #0072ce;
  --pop-bar-orange: #f7941e;
}

.city-population-square .city-population-bars__row[data-city-key*="tokyo"] .city-population-bars__bar {
  background: var(--pop-bar-red);
}

.city-population-square .city-population-bars__row[data-city-key*="mexico city"] .city-population-bars__bar {
  background: var(--pop-bar-green);
}

.city-population-square .city-population-bars__row[data-city-key*="new york"] .city-population-bars__bar {
  background: var(--pop-bar-blue);
}

.city-population-square .city-population-bars__row[data-city-key*="lagos"] .city-population-bars__bar {
  background: var(--pop-bar-orange);
}

.city-population-square .city-population-bars__row:is(
    [data-city-key*="tokyo"],
    [data-city-key*="mexico city"],
    [data-city-key*="new york"],
    [data-city-key*="lagos"]
  ) .city-population-bars__label {
  color: #fff;
}

/* The 2.1.1 card copy is roughly half the width of the 2.1.3 chart, so the
   city labels are stepped down one size to stop them being truncated inside
   the shorter bars. The popup copy keeps the full-size type. */
.forces-diagram-card__media.city-population-square .city-population-bars {
  font-size: var(--fs-3xs);
}

@media (max-width: 767.98px) {
  .s213-population-chart {
    width: 100%;
  }
}


/* =========================================================
   3.1.1 ROUNDTABLE EVENTS GRID  (partial/s311-events-grid.php)
   The 20 posters from 6. EVENTS, five across. Poster-only
   triggers: all text is routed to the popup by the partial, so
   there is no trigger type to style here.
========================================================= */
.s311-events-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  /* One value on both axes. column-gap read --trigger-card-grid-gap (1rem)
     while row-gap was a literal 0.5rem, so the grid was twice as wide
     across as it was down. */
  column-gap: var(--trigger-card-grid-gap, 0.5rem);
  row-gap: var(--trigger-card-grid-gap, 0.5rem);
  align-items: start;
  width: 100%;
}

.s311-event-card {
  width: 100%;
  margin: 0;
  border: 0;
}

.s311-event-card__media,
.s311-event-card__image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
}

/* Belt and braces: if a text node ever reaches a trigger, it stays hidden
   rather than breaking the five-across rhythm. */
.s311-event-card > .card-body {
  display: none;
}

/* Phone: five 20%-wide posters would be unreadable. */
@media (max-width: 767.98px) {
  .s311-events-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* =========================================================
   2.1.3 + 2.3.2 TRIGGER IMAGERY — MONO UNTIL ENGAGED
   ---------------------------------------------------------
   Trigger cards in "Identify Industries Building Cities" and
   "Put Existing FiDi Space to Work" read as black and white,
   and come to colour on hover, keyboard focus, or press.

   Popups are deliberately untouched and stay in full colour.
   openPopup() relocates every .popup to <body> on init, so an
   open popup is outside these containers at runtime; the
   :not() guard covers the moment before that relocation and
   any popup markup that never gets moved.

   Scoped to the two accordion bodies by id rather than to card
   classes, so it reaches every card family in those sections —
   photo cards and SVG chart cards alike — and nothing outside
   them. The lazy fragments load into these same containers, so
   late-arriving cards inherit it with no extra work.
========================================================= */
:is(#collapse-industries-cities, #collapse-fidi-existing-space)
  .card--popup:not(.popup, .popup *) .media :is(img, svg, video, object) {
  filter: grayscale(1);
  transition: filter 240ms ease;
}

:is(#collapse-industries-cities, #collapse-fidi-existing-space)
  .card--popup:not(.popup, .popup *):is(:hover, :focus, :focus-within, :active)
  .media :is(img, svg, video, object) {
  filter: none;
}

/* Full colour everywhere a popup lands, wherever it has been moved to. */
.popup .popup-media :is(img, svg, video, object) {
  filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  :is(#collapse-industries-cities, #collapse-fidi-existing-space)
    .card--popup .media :is(img, svg, video, object) {
    transition: none;
  }
}