@layer page {
  /* ---------- Page heads: on the band, and plain ---------- */
  .page-band {
    padding-block: var(--space-12) var(--space-10);
  }

  .page-band__inner {
    display: grid;
    justify-items: start;
    gap: var(--space-3);
  }

  .page-band__kicker {
    color: var(--band-highlight);
    font: 600 15px / 20px var(--font-body);
  }

  .page-band__title {
    max-width: 24ch;
    color: var(--band-text);
    font: var(--type-page-title);
  }

  .page-band__intro {
    max-width: 60ch;
    color: var(--band-text-2);
    font: var(--type-body-large);
  }

  .crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font: 500 14px / 20px var(--font-body);
  }

  .crumbs li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;

    & .icon {
      width: 14px;
      height: 14px;
      color: var(--text-3);
    }
  }

  .crumbs a {
    font-weight: 600;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  .crumbs [aria-current="page"] {
    color: var(--text-3);
  }

  .band .crumbs {
    & .icon,
    & [aria-current="page"] {
      color: var(--band-text-2);
    }

    & a {
      font-weight: 500;
    }
  }

  .content-head {
    padding-block: var(--space-12) var(--space-10);
  }

  .content-head__inner {
    display: grid;
    justify-items: start;
    gap: var(--space-3);
  }

  .content-head__kicker {
    color: var(--accent-text);
    font: 600 14px / 20px var(--font-body);

    & a {
      text-decoration: none;
    }
  }

  .content-head__title {
    font: var(--type-page-title);
  }

  .content-head__intro {
    max-width: 60ch;
    color: var(--text-2);
    font: var(--type-body-large);
  }

  .content-head__chips ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
  }

  .content-head__chips .chip {
    min-height: var(--target-public);
    padding-inline: var(--space-4);
  }

  .page-band + .section {
    padding-top: var(--space-14);
  }

  .section > .container > .section__title + *,
  .related .section__title + * {
    margin-top: var(--space-5);
  }

  /* ---------- Article list ---------- */
  .content-body {
    display: grid;
    gap: var(--space-6);
    padding-bottom: var(--section-space);
  }

  .article-feature {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
    gap: var(--space-6) var(--space-12);
    padding: var(--space-12);
    border-radius: var(--radius-dialog);
    background: var(--wash);
    color: var(--text-1);
    text-decoration: none;

    &:hover {
      text-decoration: none;

      & .article-feature__title {
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 0.12em;
      }
    }
  }

  .article-feature__head {
    display: grid;
    gap: var(--space-4);
  }

  .article-feature__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    color: var(--text-2);
    font: var(--type-label);
  }

  .article-feature__flag {
    color: var(--accent-text);
  }

  .article-feature__title {
    max-width: 22ch;
    font: 600 32px / 40px var(--font-display);
  }

  .article-feature__aside {
    display: grid;
    gap: var(--space-4);
  }

  .article-feature__excerpt {
    color: var(--text-2);
    font: 400 17px / 26px var(--font-body);
  }

  .article-feature__date {
    color: var(--text-2);
    font: var(--type-label);
    font-weight: 500;
  }

  .article-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);

    & > li {
      display: grid;
    }
  }

  .article-card {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: var(--space-2);
    padding: var(--space-6);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface);
    color: var(--text-1);
    text-decoration: none;
    transition: border-color 120ms ease-out;

    &:hover {
      border-color: var(--accent-text);
      text-decoration: none;
    }
  }

  .article-card__category {
    color: var(--accent-text);
    font: var(--type-label);
  }

  .article-card__title {
    font: var(--type-subsection);
  }

  .article-card__excerpt {
    color: var(--text-2);
    font: 400 15px / 23px var(--font-body);
  }

  .article-card__meta {
    padding-top: var(--space-2);
    color: var(--text-3);
    font: var(--type-micro);
  }

  /* ---------- Article ---------- */
  .article__head {
    padding-bottom: var(--space-6);
  }

  .article__head .content-head__inner {
    gap: var(--space-4);
  }

  .article__title {
    max-width: 26ch;
    font: 600 44px / 52px var(--font-display);
  }

  .article__lede {
    max-width: 60ch;
    color: var(--text-2);
    font: 400 20px / 30px var(--font-body);
  }

  .article__meta {
    color: var(--text-3);
    font: var(--type-label);
    font-weight: 500;
  }

  .article__body {
    display: grid;
    grid-template-columns: minmax(0, 680px) 284px;
    justify-content: space-between;
    align-items: start;
    gap: var(--space-14);
    padding-block: var(--space-6) var(--space-18);
  }

  .article__body--toc {
    grid-template-columns: 220px minmax(0, 680px) 284px;
  }

  .toc {
    position: sticky;
    top: var(--space-6);
    display: grid;
    gap: var(--space-2);
    padding-top: var(--space-2);

    & ol {
      display: grid;
    }
  }

  .toc__title {
    color: var(--text-2);
    font: var(--type-label);
  }

  .toc__item a {
    display: block;
    padding: var(--space-2) 0 var(--space-2) var(--space-3);
    border-left: 2px solid var(--line);
    color: var(--text-2);
    font: var(--type-interface);
    text-decoration: none;

    &:hover {
      border-left-color: var(--accent-text);
      color: var(--accent-text);
    }
  }

  .toc__item--h3 a {
    padding-left: var(--space-6);
    font-weight: 400;
  }

  .article__aside {
    position: sticky;
    top: var(--space-6);
    padding-top: var(--space-2);
  }

  .help-card {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-6);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface);
  }

  .help-card__title {
    font: 600 17px / 24px var(--font-body);
  }

  .help-card__body {
    color: var(--text-2);
    font: 400 15px / 23px var(--font-body);
  }

  .help-card .btn {
    margin-top: var(--space-1);
  }

  .related {
    padding-block: var(--space-14) var(--section-space);
    border-top: 1px solid var(--line);
    background: var(--surface);

    & .article-card {
      background: var(--page);
      border-color: transparent;

      &:hover {
        border-color: var(--accent-text);
      }
    }
  }

  /* ---------- Long-form text written in the panel ---------- */
  .prose {
    min-width: 0;
    max-width: var(--measure);
    font: 400 18px / 29px var(--font-body);
    overflow-wrap: break-word;

    & > * + * {
      margin-top: var(--space-5);
    }

    & h2 {
      margin-top: var(--space-10);
      font: 600 26px / 34px var(--font-display);
    }

    & h3 {
      margin-top: var(--space-8);
      font: 600 20px / 28px var(--font-body);
    }

    & h4,
    & h5,
    & h6 {
      margin-top: var(--space-6);
      font: var(--type-subsection);
    }

    & > :first-child {
      margin-top: 0;
    }

    & h2,
    & h3 {
      scroll-margin-top: var(--space-6);
    }

    & h2 + *,
    & h3 + *,
    & h4 + * {
      margin-top: var(--space-3);
    }

    & ul,
    & ol {
      padding-left: 1.25em;
    }

    & li + li {
      margin-top: var(--space-2);
    }

    & li::marker {
      color: var(--text-3);
    }

    & blockquote {
      padding: var(--space-5) var(--space-6);
      border-radius: var(--radius-card);
      background: var(--wash);
      color: var(--text-1);
      font-size: 17px;
      line-height: 27px;
    }

    & blockquote > * + * {
      margin-top: var(--space-3);
    }

    & table {
      display: block;
      max-width: 100%;
      overflow-x: auto;
      border: 1px solid var(--line);
      border-radius: var(--radius-card);
      background: var(--surface);
      font: var(--type-interface);
      font-weight: 400;
      font-variant-numeric: tabular-nums;
    }

    & th,
    & td {
      padding: var(--space-3) var(--space-4);
      border-bottom: 1px solid var(--line);
      text-align: left;
      vertical-align: top;
    }

    & th {
      background: var(--surface-sunk);
      font-weight: 600;
    }

    & tr:last-child td {
      border-bottom: 0;
    }

    & code {
      padding: 1px var(--space-1);
      border-radius: var(--radius-note);
      background: var(--surface-sunk);
    }

    & pre {
      overflow-x: auto;
      padding: var(--space-4);
      border-radius: var(--radius-card);
      background: var(--surface-sunk);
      font-size: 15px;
      line-height: 22px;

      & code {
        padding: 0;
        background: none;
      }
    }

    & hr {
      margin-block: var(--space-10);
    }
  }

  /* ---------- Facts with an icon: when, where, how to reach us ---------- */
  .facts {
    display: grid;
    gap: var(--space-3);

    & > li {
      display: grid;
      grid-template-columns: 20px minmax(0, 1fr);
      align-items: start;
      gap: var(--space-3);
    }

    & .icon {
      width: 20px;
      height: 20px;
      margin-top: 2px;
      color: var(--text-2);
    }
  }

  .facts__main {
    display: block;
    color: var(--text-1);
    font: 600 16px / 24px var(--font-body);
    font-style: normal;
  }

  .facts__sub {
    display: block;
    color: var(--text-2);
    font: 500 14px / 20px var(--font-body);
  }

  .facts--office {
    & .icon {
      width: 18px;
      height: 18px;
    }

    & .facts__main {
      font-weight: 400;
      font-size: 15px;
      line-height: 22px;
    }
  }

  .facts__link {
    font: 600 15px / 22px var(--font-body);
    overflow-wrap: anywhere;
  }

  /* ---------- Events ---------- */
  .next-stop {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-dialog);
    background: var(--surface);
  }

  .next-stop__date {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--space-2);
    padding: var(--space-12);
    background: var(--wash);
    text-align: center;
  }

  .next-stop__weekday {
    color: var(--text-2);
    font: 600 16px / 24px var(--font-body);
  }

  .next-stop__day {
    font: 600 120px / 1 var(--font-display);
    font-variant-numeric: tabular-nums;
  }

  .next-stop__month {
    color: var(--text-2);
    font: 600 22px / 28px var(--font-display);
  }

  .next-stop__details {
    display: grid;
    align-content: center;
    justify-items: start;
    gap: var(--space-5);
    padding: var(--space-12);
  }

  .next-stop__city {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--accent-text);
    font: 600 15px / 20px var(--font-body);
  }

  .next-stop__title {
    font: 600 32px / 40px var(--font-display);

    & a {
      color: inherit;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
        text-decoration-thickness: 2px;
      }
    }
  }

  .next-stop__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    margin-top: var(--space-3);
  }

  .event-list {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface);
  }

  .event-row {
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-5) var(--space-6);
    transition: background-color 120ms ease-out;

    & + & {
      border-top: 1px solid var(--line);
    }

    &:hover {
      background: var(--surface-sunk);
    }

    &:has(.event-row__title a:focus-visible) {
      outline: 2px solid var(--accent-text);
      outline-offset: -2px;
    }
  }

  .event-row__action {
    position: relative;
    z-index: 1;
  }

  .date-badge {
    display: grid;
    place-content: center;
    justify-items: center;
    height: 64px;
    border-radius: 8px;
    background: var(--surface-sunk);
  }

  .date-badge__day {
    font: 600 24px / 28px var(--font-display);
    font-variant-numeric: tabular-nums;
  }

  .date-badge__month {
    color: var(--text-2);
    font: var(--type-label);
  }

  .event-row__text {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
  }

  .event-row__city {
    color: var(--accent-text);
    font: var(--type-label);
  }

  .event-row__title {
    font: 600 17px / 24px var(--font-body);

    & a {
      color: inherit;
      text-decoration: none;

      &::after {
        position: absolute;
        inset: 0;
        content: "";
      }

      &:focus-visible {
        outline: none;
      }
    }
  }

  .event-row__venue {
    color: var(--text-2);
    font: 500 14px / 20px var(--font-body);
  }

  .event-row__time {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-2);
    font: 500 14px / 20px var(--font-body);

    & .icon {
      width: 16px;
      height: 16px;
      color: var(--text-3);
    }
  }

  .past-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);

    & > li {
      display: grid;
    }
  }

  .past-card {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: var(--space-2);
    padding: var(--space-6);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface);
    color: var(--text-1);
    text-decoration: none;
    transition: border-color 120ms ease-out;

    &:hover {
      border-color: var(--accent-text);
      text-decoration: none;
    }
  }

  .past-card__date {
    color: var(--text-3);
    font: var(--type-label);
  }

  .past-card__title {
    font: var(--type-subsection);
  }

  .past-card__recap {
    color: var(--text-2);
    font: 400 15px / 23px var(--font-body);
  }

  .past-card__link {
    display: inline-flex;
    align-self: end;
    align-items: center;
    gap: 6px;
    padding-top: var(--space-2);
    color: var(--accent-text);
    font: 600 14px / 20px var(--font-body);

    & .icon {
      width: 16px;
      height: 16px;
    }
  }

  .event-body {
    display: grid;
    grid-template-columns: minmax(0, 680px) 320px;
    justify-content: space-between;
    align-items: start;
    gap: var(--space-14);
    padding-block: var(--space-14) var(--section-space);
  }

  .event-facts {
    position: sticky;
    top: var(--space-6);
    display: grid;
    gap: var(--space-5);
    padding: var(--space-6);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface);
  }

  .event-facts__ended {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--grey-fg);
    font: var(--type-label);
  }

  .event-facts__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-self: start;
    font: 600 14px / 20px var(--font-body);
    text-decoration: none;

    & .icon {
      width: 16px;
      height: 16px;
    }

    &:hover {
      text-decoration: underline;
    }
  }

  /* ---------- Offices ---------- */
  .jump {
    border-bottom: 1px solid var(--line);
    background: var(--surface);
  }

  .jump__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-6);
    padding-block: var(--space-4);

    & ul {
      display: flex;
      flex-wrap: wrap;
      gap: 0 var(--space-6);
    }

    & a {
      display: inline-flex;
      align-items: center;
      min-height: var(--target-public);
      font: 600 15px / 20px var(--font-body);
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  .jump__label {
    color: var(--text-2);
    font: 600 14px / 20px var(--font-body);
  }

  .offices {
    display: grid;
    gap: var(--space-8);
    padding-block: var(--space-12) var(--section-space);
  }

  .country {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    align-items: start;
    gap: var(--space-6) var(--space-12);
    padding-top: var(--space-8);
    border-top: 1px solid var(--line);
    scroll-margin-top: var(--space-6);

    &:first-child {
      padding-top: 0;
      border-top: 0;
    }
  }

  .country__head {
    display: grid;
    gap: 6px;
  }

  .country__name {
    font: 600 26px / 32px var(--font-display);
  }

  .country__count {
    color: var(--text-3);
    font: 500 14px / 20px var(--font-body);
  }

  .country__offices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);

    & > li {
      display: grid;
    }
  }

  .office {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: var(--space-4);
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface);
  }

  .office__name {
    font: 600 20px / 28px var(--font-body);
  }

  .office__maps {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-self: start;
    min-height: var(--target-public);
    font: 600 15px / 20px var(--font-body);
    text-decoration: none;

    & .icon {
      width: 16px;
      height: 16px;
    }

    &:hover {
      text-decoration: underline;
    }
  }

  /* ---------- Fixed pages ---------- */
  .page-body__inner--aside {
    display: grid;
    grid-template-columns: minmax(0, 680px) minmax(0, 480px);
    justify-content: space-between;
    align-items: start;
    gap: var(--space-12) var(--space-18);
  }

  .page-body__soon {
    max-width: var(--measure);
    padding: var(--space-6);
    border-radius: var(--radius-card);
    background: var(--wash);
    color: var(--text-2);
    font: var(--type-body-large);
  }

  .numbers {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-dialog);
    background: var(--surface);

    & > li {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: subgrid;
      align-items: baseline;
      gap: var(--space-1) var(--space-8);
      padding: 22px 28px;
    }

    & > li + li {
      border-top: 1px solid var(--line);
    }
  }

  .numbers__value {
    font: 600 32px / 40px var(--font-display);
  }

  .numbers__label {
    color: var(--text-2);
    font: 500 16px / 24px var(--font-body);
  }

  .where__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-6) var(--space-8);
    padding: 28px var(--space-8);
    border: 1px solid var(--line);
    border-radius: var(--radius-dialog);
    background: var(--surface);
  }

  .where__text {
    display: grid;
    gap: var(--space-1);
    flex: 0 1 240px;
  }

  .where__title {
    font: 600 20px / 28px var(--font-body);
  }

  .where__body {
    color: var(--text-2);
    font: 400 15px / 21px var(--font-body);
  }

  .where__cities {
    display: flex;
    flex: 1 1 360px;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-8);
  }

  .where__city {
    display: block;
    font: 600 16px / 22px var(--font-body);
  }

  .where__country {
    display: block;
    color: var(--text-3);
    font: 500 13px / 16px var(--font-body);
  }

  .where__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--target-public);
    font: 600 15px / 20px var(--font-body);
    text-decoration: none;

    & .icon {
      width: 16px;
      height: 16px;
      transition: transform 120ms ease-out;
    }

    &:hover {
      text-decoration: underline;

      & .icon {
        transform: translateX(2px);
      }
    }
  }

  .about-stories__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4) var(--space-8);
    margin-bottom: 28px;
  }

  /* Uneven quotes stack in columns, so a three-word quote never leaves a tall empty card. */
  .stories {
    column-count: 3;
    column-gap: var(--space-6);

    & > li {
      break-inside: avoid;
      margin-bottom: var(--space-6);
    }
  }

  .stories--row {
    display: grid;
    column-count: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);

    & > li {
      display: grid;
      margin-bottom: 0;
    }
  }

  .story {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: var(--space-4);
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface);

    & > .icon {
      width: 24px;
      height: 24px;
      color: var(--brand-periwinkle);
    }
  }

  .story__quote p {
    font: 400 17px / 27px var(--font-body);
  }

  .story__by {
    display: grid;
    gap: 2px;
    padding-top: var(--space-1);
  }

  .story__name {
    font: 600 15px / 20px var(--font-body);
  }

  .story__origin {
    color: var(--text-2);
    font: 500 13px / 18px var(--font-body);
  }

  .counsellor-strip__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-8) var(--space-10);
    border-radius: var(--radius-dialog);
    background: var(--wash);
  }

  .counsellor-strip__title {
    font: 600 24px / 32px var(--font-display);
  }

  .counsellor-strip__body {
    max-width: 60ch;
    margin-top: 6px;
    color: var(--text-2);
  }

  /* ---------- Narrower screens ---------- */
  @media (max-width: 1199px) {
    .article__body,
    .article__body--toc {
      grid-template-columns: minmax(0, 1fr) 260px;
      gap: var(--space-10);
    }

    .article__body--toc .toc {
      position: static;
      grid-column: 1 / -1;
      max-width: var(--measure);
    }
  }

  @media (max-width: 1023px) {
    .article-grid,
    .past-grid,
    .stories--row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stories {
      column-count: 2;
    }

    .country {
      grid-template-columns: minmax(0, 1fr);
    }

    .page-body__inner--aside,
    .event-body {
      grid-template-columns: minmax(0, 1fr);
    }

    .event-facts {
      position: static;
      max-width: var(--measure);
    }
  }

  @media (max-width: 899px) {
    .page-band,
    .content-head {
      padding-block: var(--space-8);
    }

    .article__title {
      font: var(--type-page-title);
    }

    .article__lede {
      font: var(--type-body-large);
    }

    .article__body,
    .article__body--toc {
      grid-template-columns: minmax(0, 1fr);
      padding-bottom: var(--section-space);
    }

    .article__aside {
      position: static;
    }

    .prose {
      font-size: 17px;
      line-height: 27px;

      & h2 {
        font-size: 22px;
        line-height: 30px;
      }
    }

    .article-feature {
      grid-template-columns: minmax(0, 1fr);
      padding: 28px;
    }

    .article-feature__title {
      font: 600 26px / 34px var(--font-display);
    }

    .next-stop {
      grid-template-columns: minmax(0, 1fr);
    }

    .next-stop__date {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: flex-start;
      gap: var(--space-2) var(--space-3);
      padding: var(--space-5) var(--space-6);
      text-align: left;
    }

    .next-stop__day {
      font-size: 40px;
    }

    .next-stop__details {
      padding: var(--space-6);
    }

    .next-stop__title {
      font: 600 24px / 32px var(--font-display);
    }

    .next-stop__actions .btn--outline {
      width: 100%;
    }

    .event-row {
      grid-template-columns: 56px minmax(0, 1fr);
      gap: var(--space-2) var(--space-4);
      padding: var(--space-4);
    }

    .event-row__time,
    .event-row__action {
      grid-column: 2;
      justify-self: start;
    }

    .counsellor-strip__inner {
      padding: var(--space-6);

      & .btn {
        width: 100%;
      }
    }
  }

  @media (max-width: 599px) {
    .article-grid,
    .past-grid,
    .stories--row,
    .country__offices {
      grid-template-columns: minmax(0, 1fr);
    }

    .stories {
      column-count: 1;
    }

    .office {
      padding: var(--space-5);
    }

    .where__inner {
      padding: var(--space-6);
    }
  }
}