@media (width > 767px) {

  .news-page {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: none;
    height: auto;
    background-color: #F5E7CD;
  }

  .news-header {
    flex-shrink: 0;
    z-index: 0;
    width: 100%;
    max-width: none;
    height: auto;
    position: relative;
  }

  .news__hero {
    align-self: stretch;
    flex-shrink: 0;
    z-index: 1;
    width: 100%;
    max-width: none;
    height: auto;
    position: relative;
    background-color: #F5E7CD;
    text-align: left;
    font-weight: 400;
    letter-spacing: 0rem;
  }

  .news__hero-inner {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: 1440.0px;
    display: flex;
    flex-direction: column;
    gap: min(24px, 1.66667vw);
    align-items: flex-start;
    padding-left: 6.25rem;
    padding-right: 6.25rem;
    padding-top: 3.5625rem;
    padding-bottom: 5rem;
    height: auto;
  }

  .news-hero__title {
    display: block;
    flex-shrink: 0;
    z-index: 0;
    width: max-content;
    height: auto;
    position: relative;
    color: #0B889B;
    font-family: "Archivo";
    line-height: 1.4;
    font-size: min(1.25rem, 1.38889vw);
  }

  .news-hero__description {
    display: block;
    z-index: 1;
    width: 51.3889vw;
    max-width: 740.0px;
    height: auto;
    position: relative;
    color: #16181B;
    font-family: "txc-pearl";
    font-size: 3.875rem;
    text-transform: uppercase;
    line-height: 1.1;
  }

  .news__filter-bar {
    align-self: stretch;
    z-index: 2;
    width: 100%;
    max-width: none;
    height: auto;
    position: relative;
    text-align: left;
    color: #FFFFFF;
    font-family: "Archivo";
    font-weight: 500;
    letter-spacing: min(0.065625rem, 0.0729167vw);
    text-transform: uppercase;
    line-height: 1.1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    font-size: min(0.9375rem, 1.04167vw);
  }

  .news__filter-bar-body {
    grid-column: 1;
    grid-row: 1;
    min-width: 0px;
    min-height: 0px;
    align-self: stretch;
    justify-self: stretch;
    z-index: 0;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: 1440.0px;
    display: flex;
    flex-direction: row;
    gap: min(22px, 1.52778vw);
    align-items: flex-start;
    padding-left: min(100px, 6.94444vw);
    padding-right: min(100px, 6.94444vw);
    padding-top: min(40px, 2.77778vw);
    padding-bottom: min(40px, 2.77778vw);
    height: auto;
  }

  .news-filter-all {
    border-radius: 40.0px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    z-index: 0;
    width: max-content;
    height: auto;
    position: relative;
    background-color: #16181B;
  }

  .news-filter-all__label {
    display: block;
    flex-shrink: 0;
    z-index: 0;
    width: max-content;
    height: auto;
    position: relative;
  }

  .news-filter-events {
    border-radius: 40.0px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    z-index: 1;
    width: max-content;
    height: auto;
    position: relative;
    background-color: #0B889B;
  }

  .news-filter-events__label {
    display: block;
    flex-shrink: 0;
    z-index: 0;
    width: max-content;
    height: auto;
    position: relative;
  }

  .news-filter-press {
    border-radius: 40.0px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    z-index: 2;
    width: max-content;
    height: auto;
    position: relative;
    background-color: #0B889B;
  }

  .news-filter-press__label {
    display: block;
    flex-shrink: 0;
    z-index: 0;
    width: max-content;
    height: auto;
    position: relative;
  }

  .news-filter-source {
    border-radius: 40.0px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    z-index: 3;
    width: max-content;
    height: auto;
    position: relative;
    background-color: #0B889B;
  }

  .news-filter-source__label {
    display: block;
    flex-shrink: 0;
    z-index: 0;
    width: max-content;
    height: auto;
    position: relative;
  }

  .news__filter-bar-text {
    border-bottom: min(1px, 0.0694444vw) solid #C9B599;
    grid-column: 1;
    grid-row: 1;
    contain: size;
    align-self: stretch;
    justify-self: stretch;
    min-width: 0px;
    min-height: 0px;
    pointer-events: none;
    z-index: 1;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
  }

  .news-list {
    align-self: stretch;
    flex-shrink: 0;
    z-index: 3;
    width: 100%;
    max-width: none;
    height: auto;
    position: relative;
  }

  .news-list__inner {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: 1440.0px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: min(100px, 6.94444vw);
    padding-right: min(100px, 6.94444vw);
    padding-top: min(65px, 4.51389vw);
    padding-bottom: min(80px, 5.55556vw);
    height: auto;
  }

  .news-cards-grid {
    display: grid;
    grid-template-columns: repeat(1, max-content) auto;
    grid-auto-flow: column;
    align-items: start;
    align-self: stretch;
    flex-shrink: 0;
    z-index: 0;
    width: 86.1111vw;
    max-width: 1240.0px;
    height: auto;
    position: relative;
    min-height: min(968px, 67.2222vw);
  }

  .news-list-card {
    margin-left: 0px;
    margin-top: 0px;
    border-radius: 8.0px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 0;
    width: 41.6667vw;
    max-width: 600.0px;
    height: auto;
    position: relative;
    background-color: #FFFCF7;
    min-height: min(449px, 31.1806vw);
  }

  .news-list-card__media {
    transform: rotate(0.0006456475081653869deg);
    align-self: stretch;
    flex-shrink: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: min(0.003381px, 0.000234792vw);
    margin-bottom: min(0.003381px, 0.000234792vw);
    z-index: 0;
    width: 41.6667vw;
    max-width: 600.0px;
    height: 16.7434vw;
    max-height: 241.10494995117188px;
    position: relative;
    object-fit: cover;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .news-list-card__image-layer {
    grid-column: 1;
    grid-row: 1;
    min-width: 0px;
    min-height: 0px;
    align-self: stretch;
    justify-self: stretch;
    contain: size;
    overflow: hidden;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    pointer-events: none;
  }

  .news-list-card__image {
    grid-column: 1;
    grid-row: 1;
    min-width: 0px;
    min-height: 0px;
    align-self: stretch;
    justify-self: stretch;
    contain: size;
    pointer-events: none;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    filter: var(--image-filter, none);
    --image-exposure: 0;
    --image-contrast: 0;
    --image-saturation: 0;
    --image-temperature: 0;
    --image-tint: 0;
    --image-highlights: 0;
    --image-shadows: 0;
    opacity: 1;
  }

  .news-list-card__body {
    display: flex;
    flex-direction: column;
    gap: min(24px, 1.66667vw);
    align-items: flex-start;
    padding-left: min(32px, 2.22222vw);
    padding-right: min(32px, 2.22222vw);
    padding-top: min(32px, 2.22222vw);
    padding-bottom: min(32px, 2.22222vw);
    align-self: stretch;
    flex-shrink: 0;
    z-index: 1;
    width: 41.6667vw;
    max-width: 600.0px;
    height: auto;
    position: relative;
    text-align: left;
    min-height: min(208px, 14.4444vw);
  }

  .news-list-card__content {
    display: flex;
    flex-direction: column;
    gap: min(30px, 2.08333vw);
    align-items: flex-start;
    align-self: stretch;
    z-index: 0;
    width: 37.2222vw;
    max-width: 536.0px;
    height: auto;
    position: relative;
  }

  .news-list-card__meta {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    z-index: 0;
    width: 37.2222vw;
    max-width: 536.0px;
    height: auto;
    position: relative;
    font-family: "Archivo";
    line-height: 1;
  }

  .news-list-card__tag {
    background-image: linear-gradient(rgba(243, 127, 60, 0.2), rgba(243, 127, 60, 0.2));
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    background-blend-mode: normal;
    border-radius: 4.0px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding-left: 1.0625rem;
    padding-right: 1.0625rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    z-index: 0;
    width: max-content;
    height: auto;
    position: relative;
    color: #F37F3C;
    font-weight: 600;
    letter-spacing: min(0.0375rem, 0.0416667vw);
    text-transform: uppercase;
    line-height: 1.1;
    font-size: min(0.75rem, 0.833333vw);
  }

  .news-list-card__tag-label {
    display: block;
    flex-shrink: 0;
    z-index: 0;
    width: max-content;
    height: auto;
    position: relative;
  }

  .news-list-card__date {
    display: block;
    flex-shrink: 0;
    z-index: 1;
    width: max-content;
    height: auto;
    position: relative;
    color: #887D6F;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 1.1;
    font-size: min(0.875rem, 0.972222vw);
  }

  .news-list-card__title {
    display: block;
    align-self: stretch;
    z-index: 1;
    width: 37.2222vw;
    max-width: 536.0px;
    height: auto;
    position: relative;
    color: #16181B;
    font-family: "txc-pearl";
    font-weight: 400;
    font-size: 1.875rem;
    letter-spacing: 0rem;
    text-transform: uppercase;
    line-height: 1.2;
  }

  .news__pagination {
    overflow: hidden;
    flex-shrink: 0;
    z-index: 4;
    width: 100%;
    max-width: none;
    height: auto;
    position: relative;
    background-color: #F5E7CD;
  }

  .news__pagination-inner {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: 1440.0px;
    display: flex;
    flex-direction: row;
    gap: min(8px, 0.555556vw);
    justify-content: center;
    align-items: center;
    height: auto;
  }


}

@media (max-width: 767px) {
.news-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  background: var(--color-cream);
  color: var(--color-dark);
  font-family: "Archivo";
}

.news-hero__eyebrow {
  color: var(--color-teal);
}

.news-filter {
  display: flex;
  align-items: center;
  gap: 1.46667vw;
  width: 100%;
  height: max-content;
  min-height: 6.4vw;
  padding: 0 var(--page-padding-x) 1.86667vw;
  border-bottom: 1px solid rgba(22, 24, 27, 0.12);
  background: transparent;
}

.news-filter__option--active {
  background: var(--color-teal);
  color: var(--color-white);
}

@media (prefers-reduced-motion: no-preference) {
  .news-card:hover, .news-card:active { transform: scale(0.98); }
}


.news-card[hidden] { display: none; }

.news-pagination[hidden] { display: none; }


  .news-image-container {
    width: 100%;
    aspect-ratio: 390 / 180;
    overflow: hidden;
  }

  .news-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: max-content;
    align-items: flex-start;
    gap: 2vw;
    min-height: 42vw;
    padding: 11vw 6.4vw 5vw;
    text-align: left;
  }

  .news-hero__eyebrow {
    font-weight: 600;
    font-size: 1.25rem;
  }

  .news-hero__heading {
    font-family: "txc-pearl";
    font-weight: 400;
    line-height: 1.05;
    text-transform: uppercase;
    font-size: var(--mobile-heading);
  }

  .news-page--mobile > .site-main > .news-filter--mobile {
    display: flex;
  }

  .news-filter--mobile {
    display: none;
    align-items: stretch;
    padding: 3vw 6.4vw 7vw;
    background: var(--color-cream);
    border: none;
  }

  /* One flush card: the pill and the option list share a single white,
     rounded, shadowed container (matching the Figma frame) with the list
     sitting directly beneath the pill in normal flow, no gap. Only the
     container's BOTTOM corners ease between closed (rounded, matching the
     pill) and open (flatter card) -- the top corners are asserted as the
     same literal value in both states (not just the same rendered result),
     so there's nothing for the browser to interpolate there at all. A
     shorthand `border-radius: 999px -> 5.64vw 5.64vw 4.1vw 4.1vw` looks
     equal at rest, but animating it means the top corners' *raw* value is
     still sliding from 999 toward 5.64vw every frame, and the border-radius
     overlap-clamping algorithm recomputes off that raw pairing each frame --
     so the top corners visibly reshape mid-transition even though the two
     endpoints match. */
  .news-filter__dropdown {
    /* .news-filter--mobile is align-items:stretch, which would otherwise
       stretch this to the section's own (taller) min-height, leaving a
       sliver of the section's box below the pill's true content height --
       inside the rounded/clipped shape, that sliver shows through as a
       visible curve poking out past the pill's bottom edge. */
    align-self: flex-start;
    position: relative;
    width: 87.1795vw;
    overflow: hidden;
    border-top-left-radius: 5.6410vw;
    border-top-right-radius: 5.6410vw;
    border-bottom-left-radius: 5.6410vw;
    border-bottom-right-radius: 5.6410vw;
    /* The trigger's own border-radius rounds all four of its corners, not
       just the top two -- while closed, the container clips at the exact
       same radius so that never shows. Once open, the container's bottom
       corners flatten out while the trigger's stay pill-rounded, exposing a
       sliver at the trigger's bottom corners. Backing the whole card in the
       same white the menu uses means that sliver reveals white underneath
       instead of the page behind it, so the seam disappears either way. */
    background: var(--color-white);
    box-shadow: 0 0.5128vw 1.5385vw rgba(0, 0, 0, 0.03);
    transition: border-bottom-left-radius 0.25s ease, border-bottom-right-radius 0.25s ease;
  }

  .news-filter__dropdown:has(.news-filter__menu[data-open="true"]) {
    border-bottom-left-radius: 4.1026vw;
    border-bottom-right-radius: 4.1026vw;
  }

    .news-filter__dropdown:has(.news-filter__menu[data-open="true"]) .news-filter__dropdown-icon{
    rotate: 180deg;
  }

  .news-filter__dropdown-trigger {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 2.5641vw;
    min-height: 11.2821vw;
    padding: 2.5641vw 6.4103vw;
    border-radius: 999px;
    background: var(--color-teal);
    cursor: pointer;
  }

  .news-filter__dropdown-label {
    flex: 1;
    font-family: "Archivo";
    font-weight: 500;
    font-size: 0.8125rem;
    line-height: 0.875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-white);
    text-align: left;
  }

  .news-filter__dropdown-icon {
    flex: none;
    width: 4.6154vw;
    height: 4.6154vw;
    transition: rotate 0.25s ease;
  }

  /* grid-template-rows 0fr -> 1fr animates height smoothly to whatever the
     content's real height is (unlike a max-height transition, which has to
     pick an arbitrary large target and so reaches full visible height almost
     instantly -- reading as a jump rather than a reveal).

     This element is also a [data-accordion-panel] (global.css), which
     toggles its own opacity/visibility/max-height (including a hard
     max-height:0 clamp) based on [data-open]. Declaring `transition:` here
     wins the transition-property cascade outright (same specificity as the
     global rule, later in source order), so only grid-template-rows ends up
     animated -- the global rule's opacity/max-height changes still apply,
     just instantly. On open that's invisible (grid-rows growing from 0
     already reveals nothing early on), but on close it means the content
     snaps invisible/height-0 immediately while the outer card shape is
     still mid-transition, so only *closing* reads as a jump. Neutralizing
     all three here (never conditional on [data-open]) makes the collapse
     depend purely on grid-template-rows, symmetrically either direction. */
  .news-filter__menu {
    display: grid;
    grid-template-rows: 0fr;
    min-height: 0;
    max-height: none;
    opacity: 1;
    visibility: visible;
    width: 100%;
    background: var(--color-white);
    transition: grid-template-rows 0.25s ease;
  }

  .news-filter__menu[data-open="true"] {
    grid-template-rows: 1fr;
  }

  .news-filter__menu-inner {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
  }

  .news-filter__menu button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 12.3077vw;
    padding: 0 6.1538vw;
    font-family: "Archivo";
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 0.9375rem;
    letter-spacing: 0.05em;
    color: var(--color-dark);
    text-align: left;
  }

  .news-filter__menu button[hidden] {
    display: none;
  }

  .news-filter__menu button:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 4.1026vw;
    right: 4.1026vw;
    bottom: 0;
    height: 1px;
    background: #ebebeb;
  }

  /* The currently-selected option is hidden from the list (it's shown at
     the top, in the trigger, instead) -- but [hidden] doesn't have to be the
     DOM-last button, so the divider has to follow whichever button is last
     *visible*, not just :last-child. */
  .news-filter__menu button:not([hidden]):not(:has(~ button:not([hidden])))::after {
    content: none;
  }

  .news-list {
    width: 100%;
    height: max-content;
    padding: 0 6.4vw 10vw;
  }

  .news-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7.2vw;
  }

  .news-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 33.3333vw;
    overflow: hidden;
    background: var(--color-white);
    transition: transform 0.1s ease-out;
    border-radius: 3.1vw;
  }

  .news-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    min-height: 52vw;
  }

  .news-card__content {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 6vw;
    padding: 5.1vw;
  }

  .news-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color-muted-grey);
    gap: 2.6vw;
    font-size: 0.72rem;
  }

  .news-card__tag {
    display: flex;
    align-items: flex-start;
    background: rgba(243, 127, 60, 0.2);
    color: var(--color-orange);
    font-family: "Archivo", sans-serif;
    font-weight: 600;
    line-height: 1.0833;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2.6vw 4.4vw;
    border-radius: 1vw;
    font-size: 0.65rem;
  }

  .news-card__meta time {
    font-family: "Archivo", sans-serif;
    font-weight: 400;
    line-height: 1.0714;
    color: var(--color-muted-tan);
    font-size: 0.75rem;
  }

  .news-card__title {
    width: 76vw;
    max-width: 35em;
    font-family: "txc-pearl";
    font-size: clamp(1.75rem, calc(1.2rem + 3vw), 2.5rem);
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .news-pagination {
    display: flex;
    justify-content: center;
    width: 100%;
    height: max-content;
    min-height: 31vw;
    padding: 2vw 6.4vw 12vw;
  }


}

@media (width > 767px) {
/* News listing controls and data-driven cards. */
[data-news-pagination][hidden] { display: none !important; }
[data-news-card] { color: inherit; text-decoration: none; }
[data-news-filter] { border: 0; cursor: pointer; font: inherit; }
[data-news-filter][aria-pressed="true"] { background-color: #16181b; }
[data-news-filter][aria-pressed="false"] { background-color: #0b889b; }
[data-news-select] { border: 0; background: transparent; color: inherit; font: inherit; width: 100%; cursor: pointer; }
[data-news-select] option { color: #16181b; background: #fffcf7; }
[data-news-more] { cursor: pointer; }
[data-news-card]:focus-visible, [data-news-filter]:focus-visible, [data-news-select]:focus-visible { outline: 3px solid #0b889b; outline-offset: 4px; }
[data-news-status] { font-family: "Archivo", sans-serif; margin: 1rem 0; }
  .news-cards-grid[data-news-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; align-items: stretch; gap: min(40px, 2.77778vw); min-height: 0; }
  [data-news-grid] > [data-news-card] { align-self: stretch; }


}