:root {
  --header-height-global: 72px;
  --header-shrink-height-global: 48px;
  --header-z-index-global: var(--z-index-900);
  --header-decorative-bar-height-global: 5px
}

.stuff-web-header {
  --_stuff-header-additional-info-display: flex;
  --_stuff-header-supporter-button-display: none;
  box-shadow: var(--stuff-header-box-shadow);
  font: var(--stuff-header-text-font);
  z-index: var(--header-z-index-global)
}

.stuff-web-header .stuff-header-ads-container {
  height: auto;
  top: 0
}

.stuff-web-header .stuff-logo {
  --stuff-logo-color: var(--stuff-header-text-color);
  --stuff-logo-hover-color: var(--stuff-header-text-color-hover)
}

.stuff-web-header .header-decorative-bar {
  background-color: var(--stuff-header-splash-color);
  height: var(--header-decorative-bar-height-global)
}

* {
  -webkit-touch-callout: default !important;
  overflow-wrap: break-word
}

:root {
  --ion-font-family: "Stuff Display", "Sans-Serif", "Arial", sans-serif;
  --ion-font-family-text: "Stuff Text", "Sans-Serif", "Arial", sans-serif;
  --ion-font-family-sans: "Stuff Sans", "Sans-Serif", "Arial", sans-serif;
  --font-family-sans-wide: "Stuff Sans Wide", "Sans-Serif", "Arial", sans-serif;
  --font-family-sans-condensed: "Stuff Sans Condensed", "Sans-Serif", "Arial", sans-serif;
  --header-text-1: 34px;
  --header-text-2: 26px;
  --font-size-10: 0.625rem;
  --font-size-12: 0.75rem;
  --font-size-13: 0.8125rem;
  --font-size-14: 0.875rem;
  --font-size-16: 1rem;
  --font-size-18: 1.125rem;
  --font-size-20: 1.25rem;
  --font-size-22: 1.375rem;
  --font-size-23: 1.4375rem;
  --font-size-24: 1.5125rem;
  --font-size-26: 1.625rem;
  --font-size-28: 1.75rem;
  --font-size-32: 2rem;
  --font-size-34: 2.125rem;
  --font-size-40: 2.5rem;
  --font-size-42: 2.625rem;
  --font-size-50: 3.125rem;
  --font-size-60: 3.75rem;
  --uira-trim-color: var(--ion-color-tertiary);
  --uira-color-impact: darkred;
  --uira-color-dark: red;
  --uira-color-dark-120: #900000;
  --uira-color-dark-contrast: #fff;
  --uira-color-light: #90ee90;
  --uira-color-light-120: #c2fbc2;
  --uira-color-auxiliary: orange;
  --uira-color-grey-light: #e2e2e2;
  --uira-color-grey-light-rgb: 226, 226, 226;
  --uira-color-black-100: #000;
  --uira-color-black-95: #0d0d0d;
  --uira-color-black-95-rgb: 13, 13, 13;
  --uira-color-black-90: #1a1a1a;
  --uira-color-black-90-rgb: 32, 32, 32;
  --uira-color-black-80: #333;
  --uira-color-black-80-rgb: 51, 51, 51;
  --uira-color-black-10: #e5e5e5;
  --uira-color-black-10-rgb: 229, 229, 229;
  --ion-color-bookends: var(--uira-color-black-95);
  --ion-color-bookends-rgb: var(--uira-color-black-95-rgb);
  --ion-color-bookends-filter: invert(21%) sepia(99%) saturate(2362%) hue-rotate(190deg) brightness(95%) contrast(101%);
  --ion-color-bookends-contrast: #fff;
  --ion-color-bookends-contrast-rgb: 255, 255, 255;
  --ion-color-bookends-shade: #3d3d3d;
  --ion-color-bookends-tint: #a8a8a8
}

:focus {
  outline: none
}

.masthead {
  font-family: var(--ion-font-family)
}

.stuff {
  font-family: var(--ff-sans)
}

::-moz-selection {
  background: var(--uira-color-light)
}

::selection {
  background: var(--uira-color-light)
}

body {
  overflow-y: auto !important;
  position: unset !important;
  transform: unset !important
}

.ion-page {
  --_stuff-ion-page-overflow: unset;
  contain: unset !important;
  overflow: var(--_stuff-ion-page-overflow) !important
}

.ion-page.not-scrollable {
  --_stuff-ion-page-overflow: hidden
}

ion-card {
  contain: unset !important
}

.show-menu {
  position: fixed;
  z-index: 9999999 !important
}

a {
  text-underline-offset: 4px
}

ion-toolbar {
  --padding-bottom: 0;
  --padding-end: 0;
  --padding-start: 0;
  --padding-top: 0;
  --min-height: 38px !important;
  z-index: -1
}

ion-button {
  --border-radius: 0;
  --border-style: solid;
  --border-width: 1px;
  --box-shadow: none;
  --ripple-color: none;
  --padding-top: 0;
  --padding-bottom: 0;
  text-transform: none
}

ion-item {
  --padding-start: 0
}

ion-button.sf-btn-clear,
ion-button.sf-btn-icon {
  --background: none;
  --background-hover: none;
  --background-activated: none;
  --background-focused: none;
  --border-width: 0
}

ion-button.sf-btn-icon {
  --border-radius: 50px
}

ion-content {
  --ion-background-color: #000
}

ion-content::part(scroll) {
  --background: var(--ion-background-color);
  background-color: var(--ion-background-color)
}

ion-menu {
  --width: 100%;
  --background: var(--uira-color-impact)
}

ion-router-outlet {
  transition: height 3s
}

.header-md:after {
  all: unset
}

ion-alert {
  font-family: var(--ion-font-family-sans) !important
}

.ptr-home-ptr,
.ptr-section-ptr {
  display: flex;
  height: 0;
  left: 0;
  overflow: hidden;
  position: relative !important;
  right: 0;
  top: calc(var(--ion-safe-area-top) + 56px) !important;
  z-index: 90 !important
}

@media screen and (min-width: 576px) {
  :root {
    --header-text-1: 42px
  }
}

@media screen and (min-width: 768px) {
  ion-menu {
    --width: 204px
  }
}

@media screen and (min-width: 1024px) {
  ion-menu {
    --width: 267px
  }
}

.ion-color-bookends {
  --ion-color-base: var(--ion-color-bookends);
  --ion-color-base-rgb: var(--ion-color-bookends-rgb);
  --ion-color-filter: var(--ion-color-bookends-filter);
  --ion-color-contrast: var(--ion-color-bookends-contrast);
  --ion-color-contrast-rgb: var(--ion-color-bookends-contrast-rgb);
  --ion-color-shade: var(--ion-color-bookends-shade);
  --ion-color-tint: var(--ion-color-bookends-tint);
  --ion-text-color: var(--ion-color-bookends-contrast)
}

.ion-color-content {
  --ion-color-base: var(--ion-color-content);
  --ion-color-base-rgb: var(--ion-color-content-rgb);
  --ion-color-contrast: var(--ion-color-content-contrast);
  --ion-color-contrast-rgb: var(--ion-color-content-contrast-rgb);
  --ion-color-shade: var(--ion-color-content-shade);
  --ion-color-tint: var(--ion-color-content-tint);
  --ion-text-color: var(--ion-color-content-contrast)
}

:root {
  --ion-background-color: #f5f5f5;
  --ion-background-color-rgb: 255, 255, 255;
  --ion-color-base: #fff;
  --ion-story-card-byline-color: #565656;
  --ion-story-card-byline-color-rgb: #565656;
  --ion-text-color: var(--uira-color-black-95);
  --ion-color-content: #fff;
  --ion-color-content-rgb: 255, 255, 255;
  --ion-color-content-contrast: var(--uira-color-black-95);
  --ion-color-content-contrast-rgb: var(--uira-color-black-95-rgb);
  --ion-color-content-shade: #333;
  --ion-color-content-tint: #565656;
  --ion-color-primary: #3880ff;
  --ion-color-primary-tint: #4c8dff;
  --ion-color-secondary: #3dc2ff;
  --ion-color-secondary-tint: #50c8ff;
  --ion-color-tertiary: #5260ff;
  --ion-color-tertiary-rgb: 82, 96, 255;
  --ion-color-tertiary-contrast: #fff;
  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
  --ion-color-tertiary-shade: #4854e0;
  --ion-color-tertiary-tint: #6370ff;
  --ion-color-light: #f2f8fb;
  --ion-color-light-rgb: 242, 248, 251;
  --ion-color-light-shade: #d5dadd;
  --ion-color-light-tint: #f3f9fb;
  --ion-color-primary: #0071aa;
  --ion-color-primary-filter: invert(28%) sepia(31%) saturate(4307%) hue-rotate(178deg) brightness(97%) contrast(101%);
  --ion-color-primary-rgb: 56, 128, 255;
  --ion-color-primary-contrast: #fff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #3171e0;
  --ion-color-primary-tint: #cce3ee;
  --ion-color-secondary: #046;
  --ion-color-secondary-rgb: 61, 194, 255;
  --ion-color-secondary-contrast: #fff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #36abe0;
  --ion-color-secondary-tint: #cce3ee;
  --ion-color-tertiary: #cce3ee;
  --ion-color-tertiary-rgb: 204, 227, 238;
  --ion-color-tertiary-contrast: #000;
  --ion-color-tertiary-contrast-rgb: 0, 0, 0;
  --ion-color-tertiary-shade: #b4c8d1;
  --ion-color-tertiary-tint: #d1e6f0;
  --uira-color-impact: #ae0035;
  --uira-color-impact-light: #e2c7fd;
  --uira-color-dark: #0f1e54;
  --uira-color-dark-120: #0c1843;
  --uira-color-light: #e2c7fd;
  --uira-color-light-120: #fdf9ff;
  --uira-color-auxiliary: #ff911a;
  --ion-color-light: #e6f1f6;
  --ion-color-light-rgb: 244, 245, 248;
  --ion-color-light-contrast: #000;
  --ion-color-light-contrast-rgb: 0, 0, 0;
  --ion-color-light-shade: #d7d8da;
  --ion-color-light-tint: #f5f6f9;
  --ion-color-primary-medium: #d1a3ff;
  --stuff-color-breaking-news-bar-bg-color: #e61716;
  --stuff-color-text-color-reverse: #fff;
  --stuff-color-breaking-news-bar-link-color-hover: #fad1d0;
  --stuff-color-defcon-defcon-dividerlines: #737373;
  --theme-color-primary-lighter: #b2a1d5;
  --theme-colour-primary-medium: #d1a3ff;
  --theme-color-primary: #6443ab;
  --theme-color-primary-darker: #503689;
  --theme-color-secondary: #c6f7e2;
  --theme-color-primary-translucent: rgba(100, 67, 171, .08);
  --theme-color-secondary-lighter: #e2fbf1;
  --theme-color-secondary-translucent: #c6f7e240;
  --color-defcon-defcon-splash: #e61716;
  --color-defcon-defcon-bg: #ebebeb;
  --stuff-article-subtext-color: #737373;
  --color-text-color-default: #0d0d0d;
  --colors-elements-text-heading-color-hover: #6443ab;
  --colors-elements-text-heading-color-active: #6443ab;
  --colors-elements-text-heading-color-visited: #737373;
  --colors-base-colours-theme-color-primary: #6443ab;
  --colors-theme-color-secondary-default: #0d0d0d;
  --colors-theme-color-primary-default: #d1a3ff;
  --stuff-text-heading-color: var(--color-text-color-default);
  --stuff-text-body-color: var(--color-text-color-default);
  --functional-black: #000;
  --text-link-color-default: #6443ab;
  --functional-greys-05: #f2f2f2;
  --colors-elements-device-device-topbar-bg: var(--gray-950);
  --colors-elements-header-footer-footer-topband-bg: var(--gray-950);
  --colors-elements-header-footer-headerfooter-splash-colour: var(--theme-colour-primary-medium);
  --colors-elements-header-footer-footer-bg-color: #fff;
  --colors-elements-button-button1-bg: var(--custom-purple-500);
  --colors-elements-button-button1-text: var(--clr-neutral-950);
  --colors-elements-button-button2-bg: var(--clr-neutral-950);
  --colors-elements-button-button2-text: var(--clr-neutral-white);
  --colors-elements-button-button2-secondary-text: var(--clr-neutral-950);
  --colors-elements-button-button2-secondary-border: var(--clr-neutral-950);
  --colors-elements-link-color-default: var(--custom-purple-500);
  --colors-elements-link-color-hover: var(--custom-purple-900);
  --colors-elements-dividerlines-primary-default: var(--custom-purple-500);
  --system-message-green: var(--mint-500);
  --color-brand-dark-green-100-dark-green-default: var(--dark-green-100);
  --text-color-default: var(--clr-neutral-950);
  --text-color-reverse: var(--clr-neutral-white);
  --color-functional-grey-950: var(--gray-950);
  --watch-page-bg: var(--mauve-950);
  --elements-text-color-default: #e5e5e5;
  --elements-text-timestamp-default: var(--gray-550);
  --color-functional-white-white: var(--clr-neutral-white);
  --divider-lines-dividerlines-generic-light: var(--gray-200);
  --action-bar-icon: var(--custom-purple-500);
  --label-sponsored-bg: var(--gray-100);
  --label-text-default: var(--gray-950);
  --corner-radius-small: 4px;
  --elements-text-color-reversed: var(--clr-neutral-white);
  --share-popup-bg: #404040;
  --stuff-font-weight-normal: 400;
  --stuff-font-weight-medium: 500;
  --stuff-font-weight-semi-bold: 600;
  --stuff-font-weight-bold: 700;
  --stuff-font-weight-bolder: 900;
  --stuff-font-style-normal: normal;
  --stuff-font-style-italic: italic;
  --stuff-text-heading-sans-xl-wide-font-family: var(--font-family-sans-wide);
  --stuff-text-heading-sans-xl-wide-font-weight: var(--stuff-font-weight-semi-bold);
  --stuff-text-heading-sans-xl-wide-font-size: 2.5rem;
  --stuff-text-heading-sans-xl-wide-line-height: 2.2rem;
  --stuff-text-heading-sans-l-wide-font-family: var(--font-family-sans-wide);
  --stuff-text-heading-sans-l-wide-font-weight: var(--stuff-font-weight-semi-bold);
  --stuff-text-heading-sans-l-wide-font-size: 2.5rem;
  --stuff-text-heading-sans-l-wide-line-height: 130%;
  --stuff-text-heading-sans-m-wide-font-family: var(--font-family-sans-wide);
  --stuff-text-heading-sans-m-wide-font-weight: var(--stuff-font-weight-semi-bold);
  --stuff-text-heading-sans-m-wide-font-size: 2rem;
  --stuff-text-heading-sans-m-wide-line-height: 130%;
  --stuff-text-heading-sans-xs-wide-font-family: var(--font-family-sans-wide);
  --stuff-text-heading-sans-xs-wide-font-weight: var(--stuff-font-weight-medium);
  --stuff-text-heading-sans-xs-wide-font-size: 2rem;
  --stuff-text-heading-sans-xs-wide-line-height: 1.35rem;
  --stuff-text-heading-sans-xxxl-font-family: var(--ion-font-family-sans);
  --stuff-text-heading-sans-xxxl-font-weight: var(--stuff-font-weight-semi-bold);
  --stuff-text-heading-sans-xxxl-font-size: 2.5rem;
  --stuff-text-heading-sans-xxxl-line-height: 4.125rem;
  --stuff-text-heading-sans-xxl-font-family: var(--ion-font-family-sans);
  --stuff-text-heading-sans-xxl-font-weight: var(--stuff-font-weight-semi-bold);
  --stuff-text-heading-sans-xxl-font-size: 2.5rem;
  --stuff-text-heading-sans-xxl-line-height: 3.3rem;
  --stuff-text-heading-sans-xl-font-family: var(--ion-font-family-sans);
  --stuff-text-heading-sans-xl-font-weight: var(--stuff-font-weight-semi-bold);
  --stuff-text-heading-sans-xl-font-size: 2.5rem;
  --stuff-text-heading-sans-xl-line-height: 2.2rem;
  --stuff-text-heading-sans-l-font-family: var(--ion-font-family-sans);
  --stuff-text-heading-sans-l-font-weight: var(--stuff-font-weight-semi-bold);
  --stuff-text-heading-sans-l-font-size: 2.5rem;
  --stuff-text-heading-sans-l-line-height: 1.925rem;
  --stuff-text-heading-sans-m-font-family: var(--ion-font-family-sans);
  --stuff-text-heading-sans-m-font-weight: var(--stuff-font-weight-semi-bold);
  --stuff-text-heading-sans-m-font-size: 2rem;
  --stuff-text-heading-sans-m-line-height: 1.869rem;
  --stuff-text-heading-sans-s-font-family: var(--ion-font-family-sans);
  --stuff-text-heading-sans-s-font-weight: var(--stuff-font-weight-semi-bold);
  --stuff-text-heading-sans-s-font-size: 2rem;
  --stuff-text-heading-sans-s-line-height: 1.375rem;
  --stuff-text-heading-sans-xs-font-family: var(--ion-font-family-sans);
  --stuff-text-heading-sans-xs-font-weight: var(--stuff-font-weight-medium);
  --stuff-text-heading-sans-xs-font-size: 2rem;
  --stuff-text-heading-sans-xs-line-height: 1.35rem;
  --stuff-intro-text-body-font-family: var(--ion-font-family-sans);
  --stuff-intro-text-body-font-weight: var(--stuff-font-weight-normal);
  --stuff-intro-text-body-font-size: 1rem;
  --stuff-intro-text-body-line-height: 150%;
  --stuff-article-text-body-font-family: var(--ion-font-family-sans);
  --stuff-article-text-body-font-weight: var(--stuff-font-weight-normal);
  --stuff-article-text-body-font-size: 1.125rem;
  --stuff-article-text-body-line-height: 150%;
  --stuff-functional-large-text-font-family: var(--ion-font-family-sans);
  --stuff-functional-large-text-font-weight: var(--stuff-font-weight-semi-bold);
  --stuff-functional-large-text-font-size: 1rem;
  --stuff-functional-large-text-line-height: 135%;
  --stuff-functional-regular-text-font-family: var(--ion-font-family-sans);
  --stuff-functional-regular-text-font-weight: var(--stuff-font-weight-normal);
  --stuff-functional-regular-text-font-size: 0.875rem;
  --stuff-functional-regular-text-line-height: 135%;
  --stuff-functional-small-text-font-family: var(--ion-font-family-sans);
  --stuff-functional-small-text-font-weight: var(--stuff-font-weight-normal);
  --stuff-functional-small-text-font-size: 0.75rem;
  --stuff-functional-small-text-line-height: 135%;
  --stuff-breaking-news-text-font-family: var(--ion-font-family-sans);
  --stuff-breaking-news-text-font-weight: var(--stuff-font-weight-medium);
  --stuff-breaking-news-text-font-size: 1rem;
  --stuff-breaking-news-text-line-height: 110%;
  --stuff-hamburger-menu-close-font-family: var(--font-family-sans-condensed);
  --stuff-hamburger-menu-close-font-weight: var(--stuff-font-weight-semi-bold);
  --stuff-hamburger-menu-close-font-size: 2rem;
  --stuff-hamburger-menu-close-line-height: 105%;
  --stuff-hamburger-menu-parent-font-family: var(--ion-font-family-sans);
  --stuff-hamburger-menu-parent-font-weight: var(--stuff-font-weight-medium);
  --stuff-hamburger-menu-parent-line-height: 110%;
  --stuff-hamburger-menu-parent-font-size: 1.75rem;
  --stuff-hamburger-menu-child-font-size: 1.25rem
}

/*  !**/
/*  !**/
/*  !**/
@media screen and (min-width: 1024px) {
  :root {
    --stuff-breaking-news-text-line-height: 150%
  }
}

.stuff-heading-sans-xl-wide {
  --stuff-heading-font-family: var(--stuff-heading-sans-xl-wide-font-family);
  --stuff-heading-font-weight: var(--stuff-heading-sans-xl-wide-font-weight);
  --stuff-heading-font-size: var(--stuff-heading-sans-xl-wide-font-size);
  --stuff-heading-line-height: var(--stuff-heading-sans-xl-wide-line-height)
}

.stuff-text-heading-sans-xl-wide {
  --stuff-text-heading-font-family: var(--stuff-text-heading-sans-xl-wide-font-family);
  --stuff-text-heading-font-weight: var(--stuff-text-heading-sans-xl-wide-font-weight);
  --stuff-text-heading-font-size: var(--stuff-text-heading-sans-xl-wide-font-size);
  --stuff-text-heading-line-height: var(--stuff-text-heading-sans-xl-wide-line-height)
}

.stuff-text-heading-sans-l-wide {
  --stuff-text-heading-font-family: var(--stuff-text-heading-sans-l-wide-font-family);
  --stuff-text-heading-font-weight: var(--stuff-text-heading-sans-l-wide-font-weight);
  --stuff-text-heading-font-size: var(--stuff-text-heading-sans-l-wide-font-size);
  --stuff-text-heading-line-height: var(--stuff-text-heading-sans-l-wide-line-height)
}

.stuff-text-heading-sans-m-wide {
  --stuff-text-heading-font-family: var(--stuff-text-heading-sans-m-wide-font-family);
  --stuff-text-heading-font-weight: var(--stuff-text-heading-sans-m-wide-font-weight);
  --stuff-text-heading-font-size: var(--stuff-text-heading-sans-m-wide-font-size);
  --stuff-text-heading-line-height: var(--stuff-text-heading-sans-m-wide-line-height)
}

.stuff-text-heading-sans-xs-wide {
  --stuff-text-heading-font-family: var(--stuff-text-heading-sans-xs-wide-font-family);
  --stuff-text-heading-font-weight: var(--stuff-text-heading-sans-xs-wide-font-weight);
  --stuff-text-heading-font-size: var(--stuff-text-heading-sans-xs-wide-font-size);
  --stuff-text-heading-line-height: var(--stuff-text-heading-sans-xs-wide-line-height)
}

.stuff-text-heading-sans-xxxl {
  --stuff-text-heading-font-family: var(--stuff-text-heading-sans-xxxl-font-family);
  --stuff-text-heading-font-weight: var(--stuff-text-heading-sans-xxxl-font-weight);
  --stuff-text-heading-font-size: var(--stuff-text-heading-sans-xxxl-font-size);
  --stuff-text-heading-line-height: var(--stuff-text-heading-sans-xxxl-line-height)
}

.stuff-text-heading-sans-xxl {
  --stuff-text-heading-font-family: var(--stuff-text-heading-sans-xxl-font-family);
  --stuff-text-heading-font-weight: var(--stuff-text-heading-sans-xxl-font-weight);
  --stuff-text-heading-font-size: var(--stuff-text-heading-sans-xxl-font-size);
  --stuff-text-heading-line-height: var(--stuff-text-heading-sans-xxl-line-height)
}

.stuff-text-heading-sans-xl {
  --stuff-text-heading-font-family: var(--stuff-text-heading-sans-xl-font-family);
  --stuff-text-heading-font-weight: var(--stuff-text-heading-sans-xl-font-weight);
  --stuff-text-heading-font-size: var(--stuff-text-heading-sans-xl-font-size);
  --stuff-text-heading-line-height: var(--stuff-text-heading-sans-xl-line-height)
}

.stuff-text-heading-sans-l {
  --stuff-text-heading-font-family: var(--stuff-text-heading-sans-l-font-family);
  --stuff-text-heading-font-weight: var(--stuff-text-heading-sans-l-font-weight);
  --stuff-text-heading-font-size: var(--stuff-text-heading-sans-l-font-size);
  --stuff-text-heading-line-height: var(--stuff-text-heading-sans-l-line-height)
}

.stuff-text-heading-sans-m {
  --stuff-text-heading-font-family: var(--stuff-text-heading-sans-m-font-family);
  --stuff-text-heading-font-weight: var(--stuff-text-heading-sans-m-font-weight);
  --stuff-text-heading-font-size: var(--stuff-text-heading-sans-m-font-size);
  --stuff-text-heading-line-height: var(--stuff-text-heading-sans-m-line-height)
}

.stuff-text-heading-sans-s {
  --stuff-text-heading-font-family: var(--stuff-text-heading-sans-s-font-family);
  --stuff-text-heading-font-weight: var(--stuff-text-heading-sans-s-font-weight);
  --stuff-text-heading-font-size: var(--stuff-text-heading-sans-s-font-size);
  --stuff-text-heading-line-height: var(--stuff-text-heading-sans-s-line-height)
}

.stuff-text-heading-sans-xs {
  --stuff-text-heading-font-family: var(--stuff-text-heading-sans-xs-font-family);
  --stuff-text-heading-font-weight: var(--stuff-text-heading-sans-xs-font-weight);
  --stuff-text-heading-font-size: var(--stuff-text-heading-sans-xs-font-size);
  --stuff-text-heading-line-height: var(--stuff-text-heading-sans-xs-line-height)
}

.stuff-intro-text-body {
  --stuff-text-body-font-family: var(--stuff-intro-text-body-font-family);
  --stuff-text-body-font-weight: var(--stuff-font-weight-normal);
  --stuff-text-body-font-size: var(--stuff-intro-text-body-font-size);
  --stuff-text-body-line-height: var(--stuff-intro-text-body-line-height)
}

.stuff-article-text-body {
  --stuff-text-body-font-family: var(--stuff-article-text-body-font-family);
  --stuff-text-body-font-weight: var(--stuff-font-weight-normal);
  --stuff-text-body-font-size: var(--stuff-article-text-body-font-size);
  --stuff-text-body-line-height: var(--stuff-article-text-body-line-height)
}

.stuff-text-body-weight-normal {
  --stuff-text-body-font-weight: var(--stuff-font-weight-normal)
}

.stuff-text-body-weight-medium {
  --stuff-text-body-font-weight: var(--stuff-font-weight-medium)
}

.stuff-text-body-weight-semi-bold {
  --stuff-text-body-font-weight: var(--stuff-font-weight-semi-bold)
}

.stuff-text-body-weight-bold {
  --stuff-text-body-font-weight: var(--stuff-font-weight-bold)
}

.stuff-text-body-style-normal {
  --stuff-text-body-font-style: var(--stuff-font-style-normal)
}

.stuff-text-body-style-italic {
  --stuff-text-body-font-style: var(--stuff-font-style-italic)
}

:root {
  --stuff-spacing-1: 1px;
  --stuff-spacing-2: 2px;
  --stuff-spacing-3: 3px;
  --stuff-spacing-4: 4px;
  --stuff-spacing-6: 6px;
  --stuff-spacing-8: 8px;
  --stuff-spacing-10: 10px;
  --stuff-spacing-12: 12px;
  --stuff-spacing-16: 16px;
  --stuff-spacing-20: 20px;
  --stuff-spacing-24: 24px;
  --stuff-spacing-28: 28px;
  --stuff-spacing-32: 32px;
  --stuff-spacing-36: 36px;
  --stuff-spacing-48: 48px;
  --stuff-spacing-54: 54px;
  --stuff-spacing-64: 64px;
  --stuff-loader-size: 54px;
  --stuff-measure-gaps-card-row-gap: 0.75rem;
  --stuff-measure-gaps-card-column-gap: 1.5rem;
  --measure-gaps-card-text-row-gap: 0.5rem;
  --measure-gaps-card-padding-bottom: 0px;
  --stuff-measure-label-label-padding-x: 0.5rem;
  --stuff-measure-label-label-padding-y: 0.25rem;
  --measure-headerfooter-link-padding-y: 0.125rem;
  --measure-headerfooter-link-padding-x: 0.25rem;
  --measure-gaps-body-column-gap: 0;
  --measure-gaps-body-row-gap: 1.5rem;
  --measure-gaps-grid-row-gap: 0.75rem;
  --measure-gaps-module-row-gap: 0.75rem;
  --measure-gaps-module-padding: 1.5rem;
  --measure-gaps-module-defcon-padding-bottom: 1.5rem;
  --measure-box-padding-box-padding: 0;
  --measure-gaps-body-side-padding: 0.75rem;
  --measure-gaps-breakingnewsbar-text-row-gap: 0.25rem;
  --measure-box-padding-defcon-box-padding: 0.75rem;
  --stuff-list-item-padding: 0.75rem;
  --measure-tap-area-minimum-taparea: 3rem;
  --measure-tap-area-minimum-tap-area: 3rem;
  --measure-focustabbed-padding-x: 0.25rem;
  --measure-focustabbed-padding-y: 0.125rem
}

@media screen and (min-width: 768px) {
  :root {
    --measure-gaps-body-column-gap: 1rem;
    --measure-gaps-grid-row-gap: 1rem;
    --measure-gaps-body-side-padding: 1rem;
    --stuff-list-item-padding: 1rem;
    --measure-box-padding-defcon-box-padding: 1rem;
    --stuff-loader-size: 108px
  }
}

@media screen and (min-width: 1024px) {
  :root {
    --measure-gaps-body-column-gap: 1.5rem;
    --measure-gaps-body-row-gap: 2rem;
    --measure-gaps-grid-row-gap: 1.5rem;
    --measure-gaps-body-side-padding: 2rem;
    --stuff-list-item-padding: 1.5rem;
    --measure-box-padding-defcon-box-padding: 1.5rem;
    --measure-box-padding-box-padding: 1rem
  }
}

body {
  font-size: 16px
}

:root {
  --ff: "Stuff Display", "Sans-Serif", "Arial", sans-serif;
  --ff-text: "Stuff Text", "Sans-Serif", "Arial", sans-serif;
  --ff-sans: "Stuff Sans", "Sans-Serif", "Arial", sans-serif;
  --ff-sans-wide: "Stuff Sans Wide", "Sans-Serif", "Arial", sans-serif;
  --ff-sans-condensed: "Stuff Sans Condensed", "Sans-Serif", "Arial", sans-serif;
  --ff-fjalla-one: "fjalla_oneregular", "Sans-Serif", "Arial", sans-serif;
  --fs-10: 10px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-23: 23px;
  --fs-24: 24.2px;
  --fs-26: 26px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-34: 34px;
  --fs-36: 36px;
  --fs-38: 38px;
  --fs-40: 40px;
  --fs-42: 42px;
  --fs-48: 48px;
  --fs-50: 50px;
  --fs-60: 60px;
  --fs-62: 62px;
  --fs-77: 77.504px;
  --fs-accessibility-5: 5px;
  --fs-accessibility-6: 6px;
  --fs-accessibility-7: 7px;
  --fs-accessibility-8: 8px;
  --fs-accessibility-9: 9px;
  --fs-accessibility-10: 10px;
  --fs-accessibility-11: 11px;
  --fs-accessibility-12: 12px;
  --fs-accessibility-13: 13px;
  --fs-accessibility-14: 14px;
  --fs-accessibility-16: 16px;
  --fs-accessibility-20: 20px;
  --fs-accessibility-24: 24px;
  --fs-accessibility-28: 28px;
  --fs-accessibility-32: 32px;
  --fw-200: 200;
  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;
  --fw-900: 900;
  --lh-100: 1;
  --lh-105: 1.05;
  --lh-110: 1.1;
  --lh-120: 1.2;
  --lh-125: 1.25;
  --lh-130: 1.3;
  --lh-135: 1.35;
  --lh-140: 1.4;
  --lh-150: 1.5;
  --lh-160: 1.6;
  --lh-170: 1.7;
  --lh-180: 1.8;
  --lh-190: 1.9;
  --fst-normal: normal;
  --fst-italic: italic;
  --purple-100: #dccaff;
  --purple-300: #b2a1d5;
  --purple-400: #6443ab;
  --purple-800: #503689;
  --purple-translucent-10: rgba(100, 67, 171, .08);
  --purple-translucent-80: rgba(100, 67, 171, .8);
  --custom-purple-350: #dfbfff;
  --custom-purple-500: #d1a3ff;
  --custom-purple-700: #7d6299;
  --custom-purple-900: #8911ff;
  --mauve-250: #e8d1ff;
  --mauve-950: #151019;
  --mint-200: #e2fbf1;
  --mint-400: #c6f7e2;
  --mint-500: #42feaf;
  --mint-800: #637c71;
  --mint-translucent-10: rgba(198, 247, 226, .1);
  --mint-translucent-20: rgba(198, 247, 226, .251);
  --white: #fff;
  --gray-50: #f2f2f2;
  --gray-80: #ebebeb;
  --gray-100: #e5e5e5;
  --gray-200: #ccc;
  --gray-300: #b3b3b3;
  --gray-400: #999;
  --gray-450: #8c8c8c;
  --gray-500: grey;
  --gray-550: #737373;
  --gray-600: #666;
  --gray-700: #4c4c4c;
  --gray-800: #333;
  --gray-850: #262626;
  --gray-900: #1a1a1a;
  --gray-950: #0d0d0d;
  --black: #000;
  --black-translucent-95: rgba(0, 0, 0, .95);
  --red-100: #fad1d0;
  --red-400: #e61716;
  --orange-400: #ff911a;
  --yellow-400: #fff160;
  --cyan-50: #e9fbfe;
  --cyan-250: #91edfa;
  --sand-250: #fef5eb;
  --sand-550: #e4d4c2;
  --dark-red-05: #fbf2f5;
  --dark-red-100: #efccd7;
  --blue-violet-500: #8911ff;
  --dark-green-100: #0a563b;
  --maroon-05: #fbf2f5;
  --maroon-50: #d6809a;
  --maroon-100: #ae0035;
  --opacity-0: 0;
  --opacity-10: 0.1;
  --opacity-50: 0.5;
  --opacity-80: 0.8;
  --spacing-0: 0;
  --spacing-2: 2px;
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-4: 4px;
  --border-dotted-purple-x: linear-gradient(90deg, var(--purple-400) 35%, transparent 35%, transparent 100%) repeat top center /3px 1px;
  --border-dotted-purple-y: linear-gradient(180deg, var(--purple-400) 35%, transparent 35%, transparent) repeat-y top center /1px 3px;
  --border-dotted-purple-translucent-x: linear-gradient(90deg, var(--purple-translucent-80) 35%, transparent 35%, transparent 100%) repeat top center /3px 1px;
  --border-dotted-purple-translucent-y: linear-gradient(180deg, var(--purple-translucent-80) 35%, transparent 35%, transparent) repeat-y top center /1px 3px;
  --border-dotted-gray-x: linear-gradient(90deg, var(--gray-400) 35%, transparent 35%, transparent 100%) repeat top center /3px 1px;
  --border-dotted-gray-y: linear-gradient(180deg, var(--gray-400) 35%, transparent 35%, transparent) repeat-y top center /1px 3px;
  --border-radius-50: 50%;
  --z-index-0: 0;
  --z-index-10: 10;
  --z-index-20: 20;
  --z-index-100: 100;
  --z-index-200: 200;
  --z-index-300: 300;
  --z-index-400: 400;
  --z-index-500: 500;
  --z-index-600: 600;
  --z-index-700: 700;
  --z-index-800: 800;
  --z-index-900: 900;
  --z-index-950: 950;
  --page-margin-x: var(--spacing-12);
  --page-margin-y: var(--spacing-12);
  --grid-row-gap: var(--spacing-12);
  --grid-column-gap: var(--spacing-12);
  --break-point-1440: 1440px;
  --border-dotted-primary-horizontal: var(--border-dotted-purple-x);
  --border-dotted-primary-vertical: var(--border-dotted-purple-y);
  --border-dotted-primary-translucent-horizontal: var(--border-dotted-purple-translucent-x);
  --border-dotted-primary-translucent-vertical: var(--border-dotted-purple-translucent-y);
  --border-dotted-horizontal: var(--border-dotted-gray-x);
  --border-dotted-vertical: var(--border-dotted-gray-y);
  font-family: Stuff Display, "Sans-Serif", Arial, sans-serif
}

@media screen and (min-width: 768px) {
  :root {
    --page-margin-x: var(--spacing-16);
    --page-margin-y: var(--spacing-16);
    --grid-row-gap: var(--spacing-16);
    --grid-column-gap: var(--spacing-16)
  }
}

@media screen and (min-width: 1024px) {
  :root {
    --page-margin-x: var(--spacing-32);
    --page-margin-y: var(--spacing-32);
    --grid-row-gap: var(--spacing-24);
    --grid-column-gap: var(--spacing-24)
  }
}

:root {
  --clr-primary: var(--purple-400);
  --clr-primary-darker: var(--purple-800);
  --clr-primary-lighter: var(--purple-300);
  --clr-primary-translucent-10: var(--purple-translucent-10);
  --clr-primary-text: var(--clr-primary);
  --clr-primary-text-inverse: var(--white);
  --clr-primary-surface: var(--clr-primary-lighter);
  --clr-primary-surface-inverse: var(--clr-primary-darker);
  --clr-secondary: var(--mint-400);
  --clr-secondary-darker: var(--mint-800);
  --clr-secondary-lighter: var(--mint-200);
  --clr-secondary-translucent-10: var(--mint-translucent-10);
  --clr-secondary-translucent-20: var(--mint-translucent-20);
  --clr-secondary-text: var(--clr-secondary);
  --clr-secondary-text-inverse: var(--white);
  --clr-secondary-surface: var(--clr-secondary);
  --clr-secondary-translucent-20-surface: var(--clr-secondary-translucent-20);
  --clr-secondary-surface-inverse: var(--clr-secondary-darker);
  --clr-alert: var(--red-400);
  --clr-alert-text: var(--white);
  --clr-alert-text-inverse: var(--white);
  --clr-alert-text-hover: var(--red-100);
  --clr-alert-surface: var(--red-400);
  --clr-alert-surface-inverse: var(--red-400);
  --clr-warning: var(--orange-400);
  --clr-warning-text: var(--white);
  --clr-warning-text-inverse: var(--white);
  --clr-warning-surface: var(--orange-400);
  --clr-warning-surface-inverse: var(--orange-400);
  --clr-neutral-white: var(--white);
  --clr-neutral-50: var(--gray-50);
  --clr-neutral-80: var(--gray-80);
  --clr-neutral-100: var(--gray-100);
  --clr-neutral-200: var(--gray-200);
  --clr-neutral-300: var(--gray-300);
  --clr-neutral-400: var(--gray-400);
  --clr-neutral-450: var(--gray-450);
  --clr-neutral-500: var(--gray-500);
  --clr-neutral-550: var(--gray-550);
  --clr-neutral-600: var(--gray-600);
  --clr-neutral-700: var(--gray-700);
  --clr-neutral-800: var(--gray-800);
  --clr-neutral-850: var(--gray-850);
  --clr-neutral-900: var(--gray-900);
  --clr-neutral-950: var(--gray-950);
  --clr-neutral-black: var(--black);
  --clr-neutral: var(--clr-neutral-400);
  --clr-neutral-black-translucent-95: var(--black-translucent-95);
  --clr-brand-yellow: var(--yellow-400);
  --clr-text: var(--gray-900);
  --clr-text-lighter: var(--gray-400);
  --clr-text-inverse: var(--white);
  --clr-text-alert: var(--red-400);
  --clr-button-primary-new-text: var(--gray-950);
  --clr-button-primary-new-text-hover: var(--gray-950);
  --clr-button-primary-new-text-disabled: var(--gray-400);
  --clr-button-primary-new-icon: var(--gray-950);
  --clr-button-primary-new-icon-hover: var(--gray-950);
  --clr-button-primary-new-surface: var(--theme-colour-primary-medium);
  --clr-button-primary-new-surface-hover: var(--custom-purple-350);
  --clr-button-primary-new-surface-active: var(--custom-purple-350);
  --clr-button-primary-new-surface-disabled: var(--gray-100);
  --clr-button-primary-new-border: transparent;
  --clr-button-primary-new-border-hover: var(--purple-800);
  --clr-button-primary-new-border-active: var(--purple-800);
  --clr-button-primary-new-border-disabled: var(--gray-400);
  --clr-button-primary-new-border-focused: var(--purple-800);
  --clr-button-primary-dark-text: var(--white);
  --clr-button-primary-dark-text-hover: var(--white);
  --clr-button-primary-dark-text-disabled: var(--gray-500);
  --clr-button-primary-dark-icon: var(--white);
  --clr-button-primary-dark-icon-hover: var(--gray-700);
  --clr-button-primary-dark-surface: var(--black);
  --clr-button-primary-dark-surface-hover: var(--gray-700);
  --clr-button-primary-dark-surface-active: var(--gray-700);
  --clr-button-primary-dark-surface-disabled: var(--gray-100);
  --clr-button-primary-dark-border: var(--purple-400);
  --clr-button-primary-dark-border-hover: var(--purple-800);
  --clr-button-primary-dark-border-active: var(--purple-800);
  --clr-button-primary-dark-border-disabled: var(--gray-400);
  --clr-button-primary-dark-border-focused: var(--custom-purple-700);
  --clr-button-text: var(--white);
  --clr-button-surface: var(--black);
  --clr-button-primary-text: var(--white);
  --clr-button-primary-text-hover: var(--white);
  --clr-button-primary-text-disabled: var(--gray-400);
  --clr-button-primary-icon: var(--white);
  --clr-button-primary-icon-hover: var(--white);
  --clr-button-primary-surface: var(--purple-400);
  --clr-button-primary-surface-hover: var(--purple-800);
  --clr-button-primary-surface-active: var(--purple-800);
  --clr-button-primary-surface-disabled: var(--gray-400);
  --clr-button-primary-border: var(--purple-400);
  --clr-button-primary-border-hover: var(--purple-800);
  --clr-button-primary-border-active: var(--purple-800);
  --clr-button-primary-border-disabled: var(--gray-400);
  --clr-button-primary-border-focused: var(--purple-800);
  --clr-button-primary-light-text: var(--clr-primary);
  --clr-button-primary-light-text-hover: var(--clr-primary);
  --clr-button-primary-light-text-disabled: var(--gray-400);
  --clr-button-primary-light-icon: var(--clr-primary);
  --clr-button-primary-light-icon-hover: var(--clr-primary);
  --clr-button-primary-light-surface: var(--mint-400);
  --clr-button-primary-light-surface-hover: var(--mint-200);
  --clr-button-primary-light-surface-active: var(--mint-200);
  --clr-button-primary-light-surface-disabled: var(--gray-100);
  --clr-button-primary-light-surface-focused: var(--mint-400);
  --clr-button-primary-light-border: var(--mint-400);
  --clr-button-primary-light-border-hover: var(--mint-200);
  --clr-button-primary-light-border-active: var(--mint-200);
  --clr-button-primary-light-border-disabled: var(--gray-100);
  --clr-button-primary-light-border-focused: var(--mint-400);
  --clr-button-secondary-text: var(--clr-primary);
  --clr-button-secondary-text-hover: var(--clr-primary);
  --clr-button-secondary-text-disabled: var(--gray-400);
  --clr-button-secondary-icon: var(--clr-primary);
  --clr-button-secondary-icon-hover: var(--clr-primary);
  --clr-button-secondary-surface: transparent;
  --clr-button-secondary-surface-hover: var(--purple-translucent-10);
  --clr-button-secondary-surface-active: var(--purple-translucent-10);
  --clr-button-secondary-surface-disabled: var(--gray-400);
  --clr-button-secondary-border: var(--purple-400);
  --clr-button-secondary-border-hover: var(--purple-800);
  --clr-button-secondary-border-active: var(--purple-800);
  --clr-button-secondary-border-disabled: var(--gray-400);
  --clr-button-secondary-border-focused: var(--purple-800);
  --clr-button-secondary-light-text: var(--clr-secondary);
  --clr-button-secondary-light-text-hover: var(--clr-secondary);
  --clr-button-secondary-light-text-disabled: var(--gray-400);
  --clr-button-secondary-light-icon: var(--clr-secondary);
  --clr-button-secondary-light-icon-hover: var(--clr-secondary);
  --clr-button-secondary-light-surface: transparent;
  --clr-button-secondary-light-surface-hover: var(--mint-translucent-10);
  --clr-button-secondary-light-surface-active: var(--mint-translucent-10);
  --clr-button-secondary-light-surface-disabled: var(--gray-400);
  --clr-button-secondary-light-surface-focused: var(--mint-translucent-10);
  --clr-button-secondary-light-border: var(--clr-secondary);
  --clr-button-secondary-light-border-hover: var(--mint-800);
  --clr-button-secondary-light-border-active: var(--mint-800);
  --clr-button-secondary-light-border-disabled: var(--gray-400);
  --clr-button-secondary-light-border-focused: var(--mint-800);
  --clr-button-danger-text: var(--white);
  --clr-button-danger-text-hover: var(--red-100);
  --clr-button-danger-text-disabled: var(--gray-400);
  --clr-button-danger-icon: var(--white);
  --clr-button-danger-icon-hover: var(--red-100);
  --clr-button-danger-surface: transparent;
  --clr-button-danger-surface-hover: transparent;
  --clr-button-danger-surface-active: transparent;
  --clr-button-danger-surface-disabled: var(--gray-400);
  --clr-button-danger-border: transparent;
  --clr-button-danger-border-hover: transparent;
  --clr-button-danger-border-active: transparent;
  --clr-button-danger-border-disabled: transparent;
  --clr-button-danger-border-focused: var(--white);
  --clr-button-brand-text: var(--purple-400);
  --clr-button-brand-text-hover: var(--purple-800);
  --clr-button-brand-text-disabled: var(--gray-400);
  --clr-button-brand-icon: var(--purple-400);
  --clr-button-brand-icon-hover: var(--purple-400);
  --clr-button-brand-surface: transparent;
  --clr-button-brand-surface-hover: transparent;
  --clr-button-brand-surface-active: transparent;
  --clr-button-brand-surface-disabled: var(--gray-400);
  --clr-button-brand-border: transparent;
  --clr-button-brand-border-hover: transparent;
  --clr-button-brand-border-active: transparent;
  --clr-button-brand-border-disabled: transparent;
  --clr-button-brand-border-focused: var(--purple-800);
  --clr-link-text-primary: var(--black);
  --clr-link-text-primary-hover: var(--purple-800);
  --clr-link-text-primary-active: var(--purple-800);
  --clr-link-text-primary-disabled: var(--gray-400);
  --clr-link-text-primary-focused: var(--black);
  --clr-link-text-primary-visited: var(--gray-550);
  --clr-link-text-primary-border-focused: var(--purple-400);
  --clr-link-text-secondary: var(--clr-neutral-950);
  --clr-link-text-secondary-hover: var(--purple-400);
  --clr-link-text-secondary-active: var(--purple-400);
  --clr-link-text-secondary-disabled: var(--gray-400);
  --clr-link-text-secondary-focused: var(--clr-neutral-950);
  --clr-link-text-secondary-visited: var(--gray-550);
  --clr-link-text-secondary-border-focused: var(--purple-400);
  --clr-link-icon-primary: var(--red-400);
  --clr-link-icon-primary-hover: var(--purple-800);
  --clr-link-icon-primary-active: var(--purple-800);
  --clr-link-icon-primary-disabled: var(--gray-400);
  --clr-link-icon-primary-focused: var(--purple-400);
  --clr-header-splash: var(--colors-elements-header-footer-headerfooter-splash-colour);
  --clr-header-surface: var(--colors-elements-header-footer-footer-bg-color);
  --clr-header-primary: var(--clr-neutral-950);
  --clr-logo: var(--clr-neutral-950);
  --clr-logo-hover: var(--custom-purple-700);
  --clr-methodology-bg: var(--cyan-50);
  --clr-methodology-border: var(--cyan-250);
  --clr-disclaimer-bg: var(--sand-250);
  --clr-disclaimer-border: var(--sand-550);
  --clr-correction-bg: var(--dark-red-05);
  --clr-correction-border: var(--dark-red-100);
  --clr-summary-bullets: var(--blue-violet-500);
  --fw-base: var(--fw-400);
  --font-xxl: var(--fw-base) var(--fs-24) /var(--lh-150) var(--ff-sans);
  --font-xl: var(--fw-base) var(--fs-20) /var(--lh-150) var(--ff-sans);
  --font-l: var(--fw-base) var(--fs-18) /var(--lh-150) var(--ff-sans);
  --font-base: var(--fw-base) var(--fs-16) /var(--lh-150) var(--ff-sans);
  --font-s: var(--fw-base) var(--fs-14) /var(--lh-130) var(--ff-sans);
  --font-xs: var(--fw-base) var(--fs-12) /var(--lh-130) var(--ff-sans);
  --font-xxs: var(--fw-600) var(--fs-10) /var(--lh-140) var(--ff-sans);
  --font-base-bold: var(--fw-600) var(--fs-16) /var(--lh-150) var(--ff-sans);
  --font-condensed: var(--fw-base) var(--fs-32) /var(--lh-100) var(--ff-sans-condensed);
  --font-condensed-bold: var(--fw-600) var(--fs-32) /var(--lh-100) var(--ff-sans-condensed);
  --font-condensed-s: var(--fw-base) var(--fs-14) /var(--lh-130) var(--ff-sans-condensed);
  --font-condensed-xs: var(--fw-base) var(--fs-12) /var(--lh-110) var(--ff-sans-condensed);
  --heading-font-h1: var(--fw-600) var(--fs-60) /var(--lh-140) var(--ff-sans);
  --heading-font-h2: var(--fw-600) var(--fs-48) /var(--lh-140) var(--ff-sans);
  --heading-font-h3: var(--fw-600) var(--fs-32) /var(--lh-140) var(--ff-sans);
  --heading-font-h4: var(--fw-600) var(--fs-28) /var(--lh-140) var(--ff-sans);
  --heading-font-h5: var(--fw-600) var(--fs-23) /var(--lh-140) var(--ff-sans);
  --heading-font-h6: var(--fw-500) var(--fs-20) /var(--lh-140) var(--ff-sans);
  --heading-font-wide-xxl: var(--fw-700) var(--fs-48) /var(--lh-110) var(--ff-sans-wide);
  --heading-font-wide-xl: var(--fw-700) var(--fs-32) /var(--lh-110) var(--ff-sans-wide);
  --heading-font-wide-l: var(--fw-600) var(--fs-32) /var(--lh-110) var(--ff-sans-wide);
  --heading-font-wide-m: var(--fw-600) var(--fs-28) /var(--lh-130) var(--ff-sans-wide);
  --heading-font-wide-s: var(--fw-600) var(--fs-23) /var(--lh-130) var(--ff-sans-wide);
  --heading-font-normal-l: var(--heading-font-h4);
  --heading-font-normal-s: var(--fw-600) var(--fs-20) /var(--lh-140) var(--ff-sans);
  --heading-font-normal-xs: var(--fw-500) var(--fs-18) /var(--lh-140) var(--ff-sans);
  --body-font: var(--fw-base) var(--fs-16) /var(--lh-150) var(--ff-sans);
  --body-font-bold: var(--fw-600) var(--fs-16) /var(--lh-150) var(--ff-sans);
  --body-font-s: var(--fw-base) var(--fs-14) /var(--lh-130) var(--ff-sans);
  --body-font-xs: var(--fw-base) var(--fs-12) /var(--lh-130) var(--ff-sans);
  --hero-heading-font-xxl: var(--fw-900) var(--fs-60) /var(--lh-100) var(--ff-sans);
  --hero-heading-font-xl: var(--fw-900) var(--fs-42) /var(--lh-100) var(--ff-sans);
  --hero-heading-font-l: var(--fw-900) var(--fs-32) /var(--lh-100) var(--ff-sans)
}

.stuff-header {
  --stuff-header-surface-color: var(--colors-elements-header-footer-footer-bg-color);
  --stuff-header-splash-color: var(--colors-elements-header-footer-headerfooter-splash-colour);
  --stuff-header-app-status-bar-surface-color: var(--colors-elements-device-device-topbar-bg);
  --stuff-header-text-color: var(--clr-link-text-secondary);
  --stuff-header-text-color-active: var(--clr-link-text-secondary-active);
  --stuff-header-text-color-hover: var(--clr-link-text-secondary-hover);
  --stuff-header-box-shadow: 0px 1px 15px 0px rgba(0, 0, 0, .1);
  --stuff-header-item-focus-outline: 2px dashed var(--stuff-header-text-color-active);
  --stuff-header-max-width: var(--break-point-1440);
  --stuff-header-icon-size: 2rem
}

.stuff-web-header .stuff-header-date-time {
  align-items: center;
  display: var(--_stuff-header-additional-info-display);
  gap: var(--spacing-8)
}

.stuff-web-header .stuff-header-date-time img {
  height: var(--spacing-16);
  width: var(--spacing-16)
}

.stuff-web-header-bar-wrapper {
  height: calc(var(--header-height-global) + var(--stuff-top-nav-bar-height) + var(--stuff-inview-header-bar-and-gap-height));
  position: relative
}

.stuff-web-header .logo-svg:hover {
  cursor: pointer
}

.stuff-web-header .stuff-header-supporter-button {
  display: var(--_stuff-header-supporter-button-display)
}

.stuff-web-header .headerInview .stuff-header-supporter-button:not(.upScrolled) {
  display: none
}

@media screen and (min-width: 768px) {
  :root {
    --header-height-global: 79px;
    --header-decorative-bar-height-global: 10px
  }
}

@media screen and (min-width: 1024px) {
  .stuff-web-header {
    --_stuff-header-supporter-button-display: flex
  }
}

.stuff .breaking-news-container {
  --_background-color: var(--clr-alert-surface);
  --_item-color: var(--clr-alert-text);
  --_item-hover-color: var(--clr-alert-text-hover);
  --_close-size: var(--stuff-spacing-48);
  background: var(--_background-color);
  width: 100%
}

.stuff .breaking-news-container.hide {
  display: none
}

.stuff .breaking-news-bar {
  align-items: center;
  color: var(--_item-color);
  display: flex;
  height: 100%;
  justify-content: space-between;
  margin: 0 auto;
  max-width: var(--break-point-1440);
  padding: var(--stuff-spacing-8) var(--measure-gaps-body-side-padding);
  width: 100%
}

.stuff .breaking-news-text {
  font-family: var(--stuff-breaking-news-text-font-family);
  font-size: var(--stuff-breaking-news-text-font-size);
  font-weight: var(--stuff-breaking-news-text-font-weight);
  line-height: var(--stuff-breaking-news-text-line-height);
  margin: 0;
  padding: 0
}

.stuff .breaking-news-text a {
  color: var(--_item-color);
  text-decoration: none
}

.stuff .breaking-news-text.read-more {
  color: var(--_item-color);
  margin-left: var(--stuff-spacing-8);
  text-decoration: underline;
  text-underline-offset: auto
}

.stuff .breaking-news-text.read-more:active,
.stuff .breaking-news-text.read-more:hover {
  color: var(--_item-hover-color)
}

.stuff .breaking-news-close {
  align-items: center;
  align-self: center;
  cursor: pointer;
  display: flex;
  flex: var(--_close-size) 0 0;
  height: var(--_close-size);
  justify-content: flex-end;
  max-width: var(--break-point-1440)
}

.stuff .breaking-news-close:focus-visible,
.stuff .breaking-news-text.read-more:focus-visible {
  border: var(--stuff-spacing-2) dashed var(--_item-color);
  outline: none
}

.stuff .breaking-news-close svg {
  fill: var(--_item-color)
}

.stuff .breaking-news-close svg:focus {
  outline: none
}

.stuff .breaking-news-close svg:active,
.stuff .breaking-news-close svg:hover {
  fill: var(--_item-hover-color)
}

@media screen and (min-width: 1024px) {
  .stuff .breaking-news-container {
    --_close-size: var(--stuff-spacing-20)
  }
}

svg.icon {
  --icon-width: var(--given-icon-width);
  --icon-height: var(--given-icon-height);
  --icon-color: var(--given-icon-color);
  fill: var(--icon-color);
  height: var(--icon-height);
  width: var(--icon-width)
}

.frame-container-heading-link {
  --_link-colour-default: var(--stuff-frame-heading-color);
  --_link-colour-hover: var(--stuff-frame-heading-color);
  --_link-colour-on-click: var(--stuff-frame-heading-color);
  --_link-colour-visited: var(--stuff-frame-heading-color);
  --_link-colour-focus: var(--stuff-frame-heading-color);
  --_link-border-style: dashed;
  --_link-border-colour: transparent;
  --_link-border-size: 2px;
  align-items: center;
  border: var(--_link-border-style) var(--_link-border-size) var(--_link-border-colour);
  display: inline-flex;
  gap: 10px;
  position: relative;
  text-decoration: none
}

.frame-container-heading-link-span {
  color: var(--_link-colour-default)
}

.frame-container-heading-link:focus-visible {
  border-color: var(--clr-primary);
  color: var(--_link-colour-focus);
  gap: 10px
}

.frame-container-heading-link-span:hover {
  color: var(--_link-colour-hover)
}

.frame-container-heading-link-span:active {
  color: var(--_link-colour-on-click)
}

.frame-container-heading-link-span:visited {
  color: var(--_link-colour-visited)
}

.frame-container-heading-link:hover svg.icon {
  --icon-color: var(--_link-colour-hover)
}

.frame-container-heading-link:after {
  --_border-thickness: 4px;
  --_gap-between-border-and-link: 4px;
  border-bottom: var(--_border-thickness) solid transparent;
  bottom: calc((var(--_border-thickness) + var(--_gap-between-border-and-link))*-1);
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  right: 0;
  transition: border-color .1s ease
}

.frame-container-heading-link:hover:after {
  border-color: var(--colors-theme-color-primary-default)
}

button.sf-btn {
  align-items: center;
  border-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  font-family: var(--ion-font-family-sans);
  font-size: var(--font-size-16);
  font-weight: 600;
  gap: 8px;
  height: 42px;
  justify-content: center;
  line-height: 140%;
  outline: none;
  padding: 10px 2rem
}

button.sf-btn-primary {
  background-color: var(--uira-color-dark);
  color: var(--uira-color-dark-contrast)
}

button.sf-btn-primary:hover {
  background-color: var(--uira-color-dark-120)
}

button.sf-btn-primary.ion-focused,
button.sf-btn-primary:focus-visible {
  background-color: var(--uira-color-dark);
  border: 1px solid var(--uira-color-black-95)
}

button.sf-btn-secondary {
  background-color: green
}

button.sf-btn-secondary:after {
  background-color: green;
  content: "Needs Styling"
}

.common-error-display {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 32px;
  height: 100%;
  justify-content: center;
  min-height: 232px
}

.common-error-display h2 {
  color: var(--ion-color-contrast);
  font-size: var(--font-size-28);
  font-weight: 700;
  line-height: 110%;
  margin: 0;
  text-align: center
}

.common-error-display p {
  font-family: var(--ion-font-family-text);
  line-height: 140%;
  margin: 0
}

.common-error-display ion-button ion-icon {
  margin-left: 8px
}

@media screen and (min-width: 1024px) {
  .common-error-display h2 {
    font-size: var(--font-size-42);
    line-height: 110%
  }
}

ion-skeleton-text {
  border-radius: 0
}

.top-info-wrapper {
  display: grid;
  gap: 1rem;
  margin: 0 auto;
  padding: 48px 0;
  width: 80%
}

.info-top {
  align-items: center;
  color: var(--ion-color-light);
  display: flex;
  font-size: var(--font-size-14);
  font-weight: 400
}

.info-middle ion-skeleton-text {
  height: 30px
}

.info-middle>* {
  margin: 10px 0
}

.info-bottom {
  align-items: center;
  display: flex;
  gap: 1rem
}

.hero-iamge {
  background-color: var(--ion-color-light);
  height: 642px;
  width: 100%
}

.hero-image-caption {
  margin: 0 auto;
  padding-top: 10px;
  width: 90%
}

.article-content-wrapper {
  margin: 0 auto;
  padding-top: 50px;
  width: 70%
}

.article-content {
  padding-bottom: 20px
}

.article-image-wrapper {
  margin: 0 auto;
  width: 80%
}

.article-image {
  background-color: var(--ion-color-light);
  min-height: 378px;
  width: 100%
}

.article-image-caption {
  align-items: center;
  padding-top: 10px
}

.bottom-info-wrapper {
  align-items: center;
  display: flex;
  max-width: 672px;
  padding: 10px 0 60px
}

.bottom-info-wrapper>* {
  align-items: center;
  margin-right: 10px
}

.article-image ion-skeleton-text,
.hero-iamge ion-skeleton-text {
  border-radius: 0
}

@media screen and (min-width: 1024px) {
  .info-middle ion-skeleton-text {
    height: 57px
  }

  .bottom-info-wrapper>* {
    margin-right: 27px
  }
}

.loading-story-list-medium,
.loading-top-stories {
  display: grid;
  grid-template-columns: 1fr
}

.loading-story-list-medium {
  flex-direction: column;
  gap: 1rem
}

.loading-section-wrapper.home .story-blob {
  border-radius: 0;
  margin-bottom: 1rem
}

@media screen and (min-width: 576px) {
  .loading-story-list-medium {
    grid-template-columns: 1fr 1fr
  }
}

@media screen and (min-width: 768px) {
  .loading-top-stories {
    display: grid;
    grid-template-columns: 2fr 1.5fr
  }

  .p1 {
    grid-row: 1/3
  }

  .p2 {
    padding-bottom: 20px
  }

  .loading-column-2 {
    padding-left: 1rem
  }
}

@media screen and (min-width: 1024px) {
  .loading-section-wrapper {
    gap: 2rem;
    padding: 2rem
  }

  .loading-story-list-medium {
    gap: 2rem;
    grid-template-columns: repeat(3, 1fr)
  }

  .loading-column-2 {
    padding-left: 2rem
  }
}

:root {
  --page-container-max-width: 100%
}

.page-container.fixed {
  --page-container-max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--page-container-max-width)
}

.page-container.fixed:has(iframe.brightcove-top-carousel) {
  --page-container-max-width: 100%
}

ion-skeleton-text {
  --border-radius: 0;
  background-color: var(--uira-color-grey-light)
}

.loading-section-wrapper {
  display: grid;
  gap: 1rem;
  padding: 1rem
}

.loading-story-list-medium,
.loading-story-list-small {
  display: grid;
  flex-direction: column;
  gap: 1rem;
  grid-template-columns: 1fr
}

.loading-section-wrapper.section .story-blob {
  border-radius: 0;
  margin-bottom: 1rem
}

@media screen and (min-width: 576px) {
  .loading-story-list-medium {
    grid-template-columns: 1fr 1fr
  }

  .loading-story-list-small {
    grid-template-columns: repeat(3, 1fr)
  }
}

@media screen and (min-width: 1024px) {
  .loading-section-wrapper {
    gap: 2rem;
    padding: 2rem
  }

  .loading-story-list-medium {
    gap: 2rem;
    grid-template-columns: repeat(3, 1fr)
  }

  .loading-story-list-small {
    grid-template-columns: repeat(4, 1fr)
  }
}

.arrow-forward {
  width: 16px
}

:root {
  --ads-padding-vertical: var(--spacing-24);
  --ads-padding-horizontal: var(--spacing-48);
  --masthead-header-offset: 85px;
  --ads-sticky-top: calc(var(--header-height-global, var(--masthead-header-offset)) + var(--spacing-16, 16px));
  --ads-story-list-medium-frame-padding-vertical: var(--spacing-64)
}

.ad-label {
  padding-bottom: 8px
}

.horizontal {
  display: block
}

.ads-sponsor {
  font-style: italic;
  padding-top: 8px
}

.ad-label,
.adFooter,
.adHeader,
.ads-sponsor {
  font-family: var(--ion-font-family-sans);
  text-align: center
}

.ad-label,
.adFooter,
.adHeader {
  color: var(--ion-story-card-byline-color);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  padding: .5rem;
  text-decoration: none;
  text-transform: uppercase
}

.ad-container.left,
.ad-container.right {
  position: sticky;
  top: var(--ads-sticky-top)
}

.ads-visible.ads-panel-left:after,
.ads-visible.ads-panel-right:before {
  background-color: var(--ion-color-contrast);
  content: "";
  height: calc(100% - var(--ads-padding-vertical));
  position: relative;
  width: 1px
}

.stuff .ads-visible.ads-panel-right:before {
  background-color: transparent;
  height: 0;
  left: 0;
  width: 0
}

.ads-visible.ads-panel-left:after {
  right: 24px
}

.ads-visible.ads-panel-right:before {
  left: 24px
}

.ad-container.ads-visible {
  padding: 1rem 0
}

.story-list-medium-frame .ads-visible.ads-panel-left:after,
.story-list-medium-frame .ads-visible.ads-panel-right:before {
  height: calc(100% - var(--ads-story-list-medium-frame-padding-vertical))
}

.story-list-small-frame .ads-visible.ads-panel-left:after,
.story-list-small-frame .ads-visible.ads-panel-right:before {
  height: 100%
}

@media screen and (min-width: 768px) {
  .ad-container.ads-visible {
    padding: 0
  }

  .ads-visible>.story-list-frame-left-fixed-ad,
  .ads-visible>.story-list-frame-left-fluid-ad,
  .ads-visible>.story-list-medium-frame-left-fixed-ad,
  .ads-visible>.story-list-medium-frame-left-fluid-ad,
  .ads-visible>.story-list-small-frame-left-fixed-ad,
  .ads-visible>.story-list-small-frame-left-fluid-ad,
  .ads-visible>.top-stories-left-fixed-ad,
  .ads-visible>.top-stories-left-fluid-ad,
  .ads-visible>.top-story-frame-left-fixed-ad,
  .ads-visible>.top-story-frame-left-fluid-ad {
    padding-bottom: var(--ads-padding-vertical);
    padding-right: var(--ads-padding-horizontal)
  }

  .ads-visible>.story-list-frame-right-fixed-ad,
  .ads-visible>.story-list-frame-right-fluid-ad,
  .ads-visible>.story-list-medium-frame-right-fixed-ad,
  .ads-visible>.story-list-medium-frame-right-fluid-ad,
  .ads-visible>.story-list-small-frame-right-fixed-ad,
  .ads-visible>.story-list-small-frame-right-fluid-ad,
  .ads-visible>.top-stories-right-fixed-ad,
  .ads-visible>.top-stories-right-fluid-ad,
  .ads-visible>.top-story-frame-right-fixed-ad,
  .ads-visible>.top-story-frame-right-fluid-ad {
    padding-bottom: var(--ads-padding-vertical);
    padding-left: var(--ads-padding-horizontal)
  }

  .stuff .ads-visible>.top-stories-right-fixed-ad {
    background-color: transparent;
    padding-bottom: 0;
    padding-left: 0
  }

  .ads-visible>.story-list-medium-frame-left-fixed-ad,
  .ads-visible>.story-list-medium-frame-left-fluid-ad,
  .ads-visible>.story-list-medium-frame-right-fixed-ad,
  .ads-visible>.story-list-medium-frame-right-fluid-ad {
    padding-bottom: var(--ads-story-list-medium-frame-padding-vertical)
  }

  .masthead .main-content .ads-panel-right .ad-container.ads-visible {
    padding-left: 3rem
  }

  .masthead .main-content .ads-panel-left .ad-container.ads-visible {
    padding-right: 3rem
  }
}

div.ads-visible {
  width: 100%
}

.ads-visible .default-content-fluid-ad,
.ads-visible .small-story-grid-content-fluid-ad,
.ads-visible .story-list-content-fluid-ad,
.ads-visible .stuff-grid,
.ads-visible .top-stories-content-fluid-ad,
.stuff-top-stories-frame .ads-visible {
  background-color: var(--clr-neutral-white);
  width: 100%
}

.small-story-grid-content-fluid-ad .ad-container.ads-visible,
.stuff-carousel-frame .ad-container.ads-visible {
  padding: 0
}

.ad-container.ads-visible .between-frames-fluid-ad {
  padding: 0 .5rem;
  width: 100%
}

.ad-slot {
  --ad-slot-open-50: 50px;
  --ad-slot-open-90: 90px;
  --ad-slot-open-160: 160px;
  --ad-slot-open-250: 250px;
  --ad-slot-open-325: 325px;
  --ad-slot-open-size: 0
}

.ad-container {
  --_ad-slot-surface-color: var(--clr-neutral-50)
}

.ad-slot.horizontal {
  min-height: var(--_ad-slot-height, auto)
}

.ad-slot.vertical {
  height: 100%;
  min-width: var(--_ad-slot-width, auto)
}

.ad-slot.card {
  min-height: var(--_ad-slot-height, auto)
}

.ad-container:has(.ad-slot.open) {
  width: 100%
}

.ad-container:has(.ad-slot.open:empty) {
  height: 100%
}

.ad-slot.horizontal.open {
  --_ad-slot-height: var(--ad-slot-open-size)
}

.ad-slot.vertical.open {
  --_ad-slot-width: var(--ad-slot-open-160)
}

.ad-slot.card.open {
  --_ad-slot-height: var(--ad-slot-open-size)
}

.ad-slot.horizontal.topbanner.open {
  --_ad-slot-height: var(--ad-slot-open-50)
}

.ad-container.ads-visible:not(:has(.ad-slot.vertical)):not(:has(.ad-slot.card)) {
  background-color: var(--_ad-slot-surface-color)
}

@media screen and (min-width: 768px) {
  .ad-slot.horizontal.topbanner.open {
    --_ad-slot-height: var(--ad-slot-open-90)
  }
}

@media screen and (min-width: 1024px) {
  .ad-slot.vertical.open {
    --_ad-slot-width: var(--ad-slot-open-325)
  }

  .ad-slot.horizontal.topbanner.open {
    --_ad-slot-height: var(--ad-slot-open-250)
  }
}

:root {
  --top-ad-z-index: calc(var(--app-header-z-index) - 1)
}

.header-ads-block {
  align-items: center;
  background-color: var(--ion-background-color);
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
  transition: height 3s;
  z-index: var(--top-ad-z-index)
}

.header-ads-block:has(.adHeader) {
  padding: 1rem
}

@media screen and (min-width: 768px) {
  .header-ads-block:not(.native .header-ads-block) {
    position: sticky;
    top: 0;
    z-index: var(--header-z-index-global)
  }
}

.footer-ads-block {
  align-items: center;
  background-color: var(--ion-background-color);
  display: flex;
  justify-content: center;
  overflow: hidden;
  transition: .3s;
  width: 100% !important
}

.footer-ads-block.native {
  overflow: visible
}

.footer-ads-block:has(iframe) {
  padding: 1rem
}

.common-tag-base {
  background: var(--uira-color-light);
  border-left: 4px solid var(--uira-color-impact);
  color: var(--ion-text-color);
  display: inline-block;
  font-family: var(--ion-font-family-sans);
  font-size: var(--font-size-14);
  font-weight: 500;
  padding: 4px 8px
}

:root {
  --stuff-text-heading-color: var(--clr-text)
}

.stuff-text-heading {
  --stuff-text-heading-order: 0;
  color: var(--stuff-text-heading-color);
  font-family: var(--stuff-text-heading-font-family);
  font-size: var(--stuff-text-heading-font-size);
  font-weight: var(--stuff-text-heading-font-weight);
  line-height: var(--stuff-text-heading-line-height);
  margin: 0;
  order: var(--stuff-text-heading-order);
  padding: 0
}

.error-fallback-image {
  --_stuff-svg-background-color: var(--gray-100)
}

.error-fallback-image .error-fallback-svg {
  background-color: var(--_stuff-svg-background-color);
  height: 145px;
  -webkit-mask-image: url(error-fallback.svg);
  mask-image: url(error-fallback.svg);
  width: 106px
}

.error-fallback {
  --_background-color: var(--white);
  align-items: center;
  background-color: var(--_background-color);
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100vh;
  justify-content: center
}

.error-fallback .error-fallback-image {
  margin-bottom: 24px
}

.error-fallback .error {
  font: var(--fw-700) var(--fs-16) /var(--lh-100) var(--ff-sans-wide);
  letter-spacing: 2px;
  text-transform: uppercase
}

.error-fallback .error-message {
  font: var(--fw-400) var(--fs-18) /var(--lh-150) var(--ff-sans)
}

.hamburger-menu-item-title {
  align-items: center;
  align-self: stretch;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  min-height: var(--measure-tap-area-minimum-taparea)
}

.stuff-hamburger-menu {
  --_subnav-list-padding-bottom: var(--measure-box-padding-box-padding);
  --_subnav-list-gap: var(--measure-gaps-card-padding-bottom);
  --_subnav-list-ion-menu-toggle-font-size: var(--stuff-hamburger-menu-child-font-size);
  --_subnav-list-ion-menu-toggle-min-height: var(--measure-tap-area-minimum-taparea);
  --_subnav-list-ion-menu-toggle-color: var(--clr-secondary);
  --_subnav-list-ion-menu-item-focused: 2px dashed var(--clr-secondary);
  --_subnav-list-ion-menu-item-arrow-url: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' fill='none' viewBox='0 0 8 8'%3E%3Cpath fill='%23C6F7E2' fill-rule='evenodd' d='m2 8-.734-.734L4.532 4 1.266.734 2 0l4 4z' clip-rule='evenodd'/%3E%3Cpath fill='%23C6F7E2' fill-rule='evenodd' d='m2 8-.734-.734L4.532 4 1.266.734 2 0l4 4z' clip-rule='evenodd'/%3E%3C/svg%3E");
  --_subnav-list-ion-menu-item-arrow-line-height: var(--lh-130);
  --_subnav-list-ion-menu-item-arrow-width: 8px;
  --_subnav-list-ion-menu-item-arrow-margin-right: var(--spacing-16)
}

.masthead-hamburger-menu {
  --_subnav-list-padding-bottom: 1rem;
  --_subnav-list-gap: 0;
  --_subnav-list-ion-menu-toggle-font-size: 1.25rem;
  --_subnav-list-ion-menu-toggle-min-height: unset;
  --_subnav-list-ion-menu-toggle-color: var(--ion-color-primary-contrast);
  --_subnav-list-ion-menu-item-focused: 1px solid var(--ion-color-primary-contrast);
  --_subnav-list-ion-menu-item-arrow-url: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' fill='none' viewBox='0 0 8 8'%3E%3Cpath fill='%23C6F7E2' fill-rule='evenodd' d='m2 8-.734-.734L4.532 4 1.266.734 2 0l4 4z' clip-rule='evenodd'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='m2 8-.734-.734L4.532 4 1.266.734 2 0l4 4z' clip-rule='evenodd'/%3E%3C/svg%3E");
  --_subnav-list-ion-menu-item-arrow-line-height: 17px;
  --_subnav-list-ion-menu-item-arrow-width: 8px;
  --_subnav-list-ion-menu-item-arrow-margin-right: 1rem
}

.has-submenu .subnav-list {
  display: none
}

.has-submenu .submenu-open.subnav-list {
  display: flex
}

.subnav-list {
  align-items: flex-start;
  align-self: stretch;
  flex-direction: column;
  gap: var(--_subnav-list-gap);
  justify-content: center;
  padding-bottom: var(--_subnav-list-padding-bottom)
}

.subnav-list ion-menu-toggle {
  align-self: stretch;
  display: flex;
  font-size: var(--_subnav-list-ion-menu-toggle-font-size);
  min-height: var(--_subnav-list-ion-menu-toggle-min-height)
}

.subnav-list ion-menu-toggle a {
  color: var(--_subnav-list-ion-menu-toggle-color);
  display: flex;
  flex-grow: 1;
  text-decoration: none
}

.hamburger-menu-wrapper .hamburger-menu-item-title:focus-visible,
.hamburger-menu-wrapper .subnav-list ion-menu-toggle a:focus-visible {
  border: var(--_subnav-list-ion-menu-item-focused);
  outline: none
}

.anchor-wrapper .subnav-item:before {
  content: var(--_subnav-list-ion-menu-item-arrow-url);
  line-height: var(--_subnav-list-ion-menu-item-arrow-line-height);
  margin-right: var(--_subnav-list-ion-menu-item-arrow-margin-right);
  width: var(--_subnav-list-ion-menu-item-arrow-width)
}

.stuff-hamburger-menu {
  --_ion-menu-toggle-svg-height: 1.55rem;
  --_ion-menu-toggle-svg-width: 1.55rem;
  --_ion-menu-toggle-svg-padding: 0;
  --_menu-close-padding: var(--stuff-spacing-8) var(--stuff-spacing-4) var(--stuff-spacing-8) var(--measure-gaps-body-side-padding);
  --_menu-close-font-family: var(--stuff-hamburger-menu-close-font-family);
  --_menu-close-font-weight: var(--stuff-hamburger-menu-close-font-weight);
  --_menu-close-font-size: var(--stuff-hamburger-menu-close-font-size);
  --_menu-close-line-height: var(--stuff-hamburger-menu-close-line-height);
  --_menu-close-gap: 0
}

.masthead-hamburger-menu {
  --_ion-menu-toggle-svg-height: 2.813rem;
  --_ion-menu-toggle-svg-width: 2.625rem;
  --_ion-menu-toggle-svg-padding: 0.5rem;
  --_menu-close-padding: 1.81rem 1.5rem
}

.menu-close {
  display: flex;
  font-family: var(--_menu-close-font-family);
  font-size: var(--_menu-close-font-size);
  font-weight: var(--_menu-close-font-weight);
  gap: var(--_menu-close-gap);
  justify-content: flex-start;
  line-height: var(--_menu-close-line-height);
  padding: var(--_menu-close-padding);
  text-transform: uppercase
}

.menu-close ion-menu-toggle {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: var(--spacing-12);
  height: var(--measure-tap-area-minimum-taparea)
}

.menu-close ion-menu-toggle span {
  padding: var(--spacing-0) var(--spacing-8)
}

.menu-close ion-menu-toggle svg {
  height: var(--_ion-menu-toggle-svg-height);
  padding: var(--_ion-menu-toggle-svg-padding);
  width: var(--_ion-menu-toggle-svg-width)
}

@media screen and (min-width: 1024px) {
  .stuff-hamburger-menu {
    --_menu-close-padding: var(--measure-gaps-body-side-padding) 1.25rem var(--stuff-spacing-8) var(--measure-gaps-body-side-padding);
    --_menu-close-gap: var(--measure-gaps-card-padding-bottom)
  }

  .menu-close ion-menu-toggle span {
    padding: var(--measure-gaps-card-padding-bottom) var(--stuff-spacing-24)
  }
}

.hamburger-dismiss-bar {
  align-items: center;
  display: flex;
  justify-content: space-between
}

.hamburger-menu-list::-webkit-scrollbar {
  width: .375rem
}

.hamburger-menu-wrapper {
  margin-top: var(--ion-safe-area-top)
}

.hamburger-menu-list,
.hamburger-menu-wrapper {
  display: flex;
  flex: 1 0 0;
  flex-direction: column
}

.hamburger-menu-list {
  align-items: flex-start;
  overflow-y: scroll
}

.hamburger-menu-item {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.no-submenu ion-menu-toggle a {
  flex-grow: 1;
  text-decoration: none
}

.anchor-wrapper {
  align-items: center;
  display: flex;
  flex-grow: 1
}

.hamburger-menu-item.home-item a,
.hamburger-menu-item.settings-item a {
  align-items: center;
  display: flex;
  justify-content: space-between
}

:root {
  --page-scroll-indicator-padding-top: 0
}

.page-scroll-indicator,
ion-router-outlet {
  background-color: var(--ion-color-base);
  position: relative
}

.page-scroll-indicator {
  padding-top: var(--page-scroll-indicator-padding-top)
}

.native.android .page-scroll-indicator {
  overflow-x: hidden
}

.native.android.masthead .page-scroll-indicator,
.native.ios.masthead .page-scroll-indicator {
  --page-scroll-indicator-padding-top: calc(var(--app-header-upper-header-height) + var(--app-header-lower-header-height) + var(--ion-safe-area-top))
}

.native.android.masthead .page-scroll-indicator.no-lower-header,
.native.ios.masthead .page-scroll-indicator.no-lower-header {
  --page-scroll-indicator-padding-top: calc(var(--app-header-upper-header-height) + var(--ion-safe-area-top))
}

.native.android.stuff .page-scroll-indicator,
.native.ios.stuff .page-scroll-indicator {
  --page-scroll-indicator-padding-top: calc(var(--header-height-global) + var(--ion-safe-area-top))
}

.native.android.masthead .page-scroll-indicator.login-page,
.native.ios.masthead .page-scroll-indicator.login-page {
  --page-scroll-indicator-padding-top: var(--ion-safe-area-top);
  background-color: var(--login-page-background-color)
}

.native.android.stuff .page-scroll-indicator.no-top-nav-bar,
.native.ios.stuff .page-scroll-indicator.no-top-nav-bar {
  --page-scroll-indicator-padding-top: calc(var(--header-height-global) + var(--ion-safe-area-top))
}

.page-content {
  --_page-content-surface-color: var(--ion-color-base);
  background: var(--_page-content-surface-color);
  margin: 0 auto;
  transition: min-height .5s ease
}

.masthead.native .page-content {
  min-height: calc(100vh - var(--app-header-upper-header-height) - var(--app-header-lower-header-height) - var(--ion-safe-area-top))
}

.stuff.native .page-content {
  min-height: calc(100vh - var(--header-height-global) - var(--ion-safe-area-top))
}

.page-content.bg-grey {
  --_page-content-surface-color: var(--ion-color-content-contrast)
}

.page-content.bg-black {
  --_page-content-surface-color: var(--ion-color-tertiary-contrast)
}

.common-error-display,
.sf-auth-page {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: calc(100vh - var(--header-height-global) - var(--navtop-height) - var(--footer-height));
  padding: 5rem 0;
  width: 100%
}

.sf-auth-page div.auth-copy-container {
  align-items: center;
  display: flex;
  flex-direction: column
}

.page-content.subscription-page {
  --_page-content-surface-color: var(--ion-color-base);
  padding: 42px 0
}

.stuff .page-content.watch {
  --_page-content-surface-color: var(--watch-page-bg)
}

.ratio-16x9,
.ratio-1x1,
.ratio-4x3 {
  --ratio-height: calc(var(--aspect-h)/var(--aspect-w)*100%)
}

.ratio-16x9 {
  --aspect-w: 16;
  --aspect-h: 9
}

.ratio-4x3 {
  --aspect-w: 4;
  --aspect-h: 3
}

.ratio-1x1 {
  --aspect-w: 1;
  --aspect-h: 1
}

.video-ratio {
  display: block;
  height: 0;
  padding-top: var(--ratio-height);
  position: relative
}

.video-ratio .video-element>* {
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%
}

.video-ratio.hidden {
  display: none
}

.video-ratio .video-js {
  --_timestamp-bg-color: var(--color-functional-grey-950);
  --_timestamp-color: var(--text-color-reverse)
}

.video-container {
  width: 100%
}

.video-js .bc-video-duration-overlay {
  background-color: var(--_timestamp-bg-color);
  border-radius: 8px;
  bottom: 12px;
  color: var(--_timestamp-color);
  font: 600 var(--font-size-12)/135% var(--ff-sans);
  padding: 4px 8px;
  position: absolute;
  right: 12px
}

.play-button {
  --hover-color: hsla(0, 0%, 100%, .8);
  --rest-color: hsla(0, 0%, 100%, .4);
  --border-color: var(--rest-color);
  --border-size: 4px;
  --surface-color: var(--color-functional-white-white);
  --button-size: 46px;
  --icon-size: 22px;
  --icon-offset-x: 1px;
  --icon-offset-y: 1px;
  background: var(--poster-path) center /cover no-repeat;
  border-radius: var(--corner-radius-default);
  cursor: pointer;
  height: 100%;
  margin: var(--border-size);
  width: 100%
}

.play-button svg.icon {
  --icon-height: var(--icon-size);
  --icon-width: var(--icon-size);
  margin: 0;
  transform: translate(var(--icon-offset-x), var(--icon-offset-y))
}

.play-button {
  background: var(--surface-color);
  border-radius: 50%;
  box-shadow: 0 0 0 var(--border-size) var(--border-color);
  box-sizing: content-box;
  height: var(--button-size);
  width: var(--button-size)
}

.play-button:hover {
  --border-color: var(--hover-color)
}

.fake-player {
  --button-offset: 8px;
  background: var(--poster-path) center /cover no-repeat;
  border-radius: var(--corner-radius-default);
  cursor: pointer;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%
}

.fake-player .play-button {
  bottom: var(--button-offset);
  left: var(--button-offset);
  position: absolute
}

.fake-player:hover .play-button {
  --border-color: var(--hover-color)
}

.fake-player {
  container-type: size
}

@container (max-width: 270px) {
  .fake-player .play-button {
    --icon-size: 12px;
    --button-size: 28px;
    --border-size: 2px;
    --button-offset: 4px
  }

  .square-picture .fake-player .play-button {
    --button-offset: 50%;
    transform: translate(-50%, 50%)
  }
}

.video-destination {
  margin: 0 auto;
  overflow: hidden;
  width: 100%
}

.video-destination:has(.video-container) .video-placeholder {
  display: none
}

.video-placeholder {
  --poster-path: ""
}

#global-video-player-container {
  display: none
}

.global-video-player {
  gap: 12px;
  width: 100%
}

.global-video-player,
.video-info {
  display: flex;
  flex-direction: column
}

.video-info {
  --_title-color: var(--gray-950);
  --_credit-color: var(--gray-550);
  align-items: center;
  gap: 8px;
  text-align: center
}

.video-info .video-title {
  color: var(--_title-color);
  font: var(--fw-400) var(--font-size-16)/var(--lh-130) var(--ff-fjalla-one)
}

.video-info .video-credit {
  color: var(--_credit-color);
  font: var(--fw-600) var(--font-size-10)/var(--lh-130) var(--ff-sans);
  letter-spacing: 1px;
  text-transform: uppercase
}

.sticky-player {
  --_background-color: var(--ion-color-primary-contrast);
  --_close-btn-bg-color: var(--color-text-color-default);
  --_sticky-player-border: 5px solid var(--colors-theme-color-primary-default);
  --_sticky-player-width: 100%;
  display: flex;
  flex-direction: column;
  transition: all .2s ease-in-out;
  width: var(--_sticky-player-width);
  z-index: var(--z-index-900)
}

.sticky-player.web {
  position: sticky;
  top: calc(var(--header-height-global) + var(--stuff-inview-header-bar-and-gap-height) - var(--header-decorative-bar-height-global))
}

.sticky-header .sticky-player.web {
  position: fixed
}

.sticky-player.native {
  position: fixed;
  top: calc(var(--ion-safe-area-top, 0) + var(--header-height-global))
}

.sticky-player-close-btn {
  background-color: var(--_close-btn-bg-color);
  border-radius: 100%;
  cursor: pointer;
  line-height: 10px;
  padding: 10px;
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: var(--z-index-950)
}

.sticky-player .video-info {
  display: none
}

.sticky-player .video-js {
  border-radius: 0
}

@media screen and (min-width: 1024px) {
  .sticky-player .global-video-player .video-container {
    border: var(--_sticky-player-border);
    border-bottom: none;
    border-radius: 10px 10px 0 0
  }

  .sticky-player.web {
    --_sticky-player-width: 500px;
    background-color: var(--_background-color);
    border-radius: 15px 15px 0 0;
    bottom: 0;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, .25);
    position: fixed;
    right: 32px;
    top: auto
  }

  .sticky-player .video-js {
    border-radius: 5px 5px 0 0
  }

  .sticky-player .video-info {
    align-items: flex-start;
    display: flex;
    padding: 12px
  }
}

.video-mini-launcher {
  --highlight-color: var(--theme-colour-primary-medium);
  --highlight-color-secondary: var(--mauve-250);
  --text-color: var(--stuff-text-heading-color);
  align-items: center;
  color: var(--text-color);
  cursor: pointer;
  display: var(--mini-launcher-display, flex);
  gap: 8px
}

.video-mini-launcher .details {
  align-items: center;
  display: flex;
  gap: 4px
}

.video-mini-launcher :is(.play-text, .timestamp, .dot-bullet) {
  font-family: var(--ion-font-family-sans);
  font-style: normal;
  line-height: 130%
}

.video-mini-launcher :is(.timestamp, .dot-bullet) {
  color: var(--story-card-label-text-color)
}

.video-mini-launcher .play-text {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase
}

.video-mini-launcher .timestamp {
  font-size: 12px;
  font-weight: 400
}

.video-mini-launcher .dot-bullet {
  font-size: 14px;
  font-weight: 500
}

.video-mini-launcher .play-button {
  --border-size: 2px;
  --border-color: var(--highlight-color-secondary);
  --surface-color: var(--highlight-color);
  --icon-size: 8px;
  --button-size: 20px;
  --icon-offset-x: 0;
  --icon-offset-y: 0
}

.video-mini-launcher:hover .play-button {
  --border-color: var(--stuff-text-body-color)
}

.video-mini-launcher:hover {
  --text-color: var(--highlight-color)
}

:root {
  --gaps-grid-row-gap: 24px
}

.article-bottom-content-container>.content>* {
  width: var(--stuff-article-text-max-width)
}

.video-bottom-content-container.align-with-article {
  --_video-bottom-vertical-padding: var(--gaps-body-vertical-padding);
  display: flex;
  flex-direction: column;
  gap: var(--gaps-grid-row-gap);
  margin: 0 auto;
  max-width: 1440px;
  padding: var(--_video-bottom-vertical-padding) var(--video-content-side-padding);
  position: relative
}

.video-bottom .video-bottom-content-container.align-with-article:before {
  --_divider-line-color: var(--colors-theme-color-secondary-default);
  background-color: var(--_divider-line-color);
  content: "";
  display: block;
  height: 1px;
  width: 100%;
  z-index: var(--z-index-10)
}

.article-read-more {
  margin-left: 1rem;
  margin-right: 1rem;
  margin-top: 2rem
}

@media screen and (min-width: 576px) {
  .article-read-more {
    margin: 2rem 48px 0
  }
}

@media screen and (min-width: 768px) {
  .article-read-more {
    margin: 2rem 0 0
  }
}

@media screen and (min-width: 1024px) {
  .article-read-more {
    margin: 2rem 80px 0
  }
}

@media screen and (min-width: 1200px) {
  .article-read-more {
    margin: 2rem 168px 0
  }
}

ion-button.share-article-button {
  --background: transparent;
  --background-activated: var(--uira-color-light);
  --border-style: none;
  color: var(--uira-color-black-95);
  display: inline-block;
  font-family: var(--ion-font-family-sans);
  font-weight: 400;
  height: 100%
}

ion-button.share-article-button::part(native) {
  padding-inline-end: 0;
  padding-inline-start: 0
}

ion-button.share-article-button svg {
  margin-right: .5rem
}

.article-navigation-button,
.article-tooltip {
  display: none
}

@media screen and (min-width: 1024px) {

  .article-navigation-button,
  .article-tooltip {
    --_article-navigation-z-index: var(--z-index-20, 20);
    --_article-navigation-top-position: 200px;
    --_article-navigation-button-height: 200px;
    --_article-navigation-button-width: 100px;
    --_article-navigation-button-color: var(--uira-color-light-50);
    --_article-navigation-button-highlight-color: var(--ion-color-primary);
    --_article-navigation-button-button-shadow: 0 4px rgba(0, 0, 0, .05);
    --_article-navigation-button-tooltip-shadow: #d6d6d6 0em 0em 3px 0px;
    --_article-navigation-button-tooltip-border: 7px solid var(--uira-color-light);
    --_article-navigation-button-tooltip-background-color: var(--uira-color-light-120)
  }

  .footer-visible .article-navigation-button,
  .footer-visible .article-tooltip,
  .pageScrolled .article-navigation-button,
  .pageScrolled .article-tooltip {
    bottom: unset;
    position: fixed
  }

  .article-navigation-left,
  .article-navigation-right {
    display: grid;
    position: absolute;
    top: var(--_article-navigation-top-position);
    z-index: var(--_article-navigation-z-index)
  }

  .article-navigation-left {
    left: 0
  }

  .article-navigation-right {
    right: 0
  }

  .article-navigation-left button,
  .article-navigation-right button {
    background-color: var(--_article-navigation-button-color);
    height: var(--_article-navigation-button-height);
    position: absolute;
    top: 0;
    width: var(--_article-navigation-button-width)
  }

  .article-navigation-left button:hover,
  .article-navigation-right button:hover {
    background-color: transparent;
    transition: background .3s ease
  }

  .article-navigation-left button {
    border-radius: 0 10rem 10rem 0;
    left: 0
  }

  .article-navigation-right button {
    border-radius: 10rem 0 0 10rem;
    right: 0
  }

  .article-navigation-button button[disabled] {
    display: none
  }

  .article-navigation-left button svg,
  .article-navigation-right button svg {
    fill: var(--ion-color-light-contrast);
    height: 100px;
    position: relative;
    top: var(--_button-arrow-vertical-position-from-top-of-button);
    width: 60px
  }

  .article-navigation-left button svg {
    left: -16px;
    position: relative;
    top: 0;
    transform: rotate(90deg)
  }

  .article-navigation-right button svg {
    left: 16px;
    right: 5px;
    top: 0;
    transform: rotate(-90deg)
  }

  .article-tooltip {
    background-color: var(--_article-navigation-button-tooltip-background-color);
    box-shadow: var(--_article-navigation-button-tooltip-shadow);
    color: var(--ion-text-color);
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: var(--_article-navigation-button-height);
    justify-content: center;
    max-width: 600px;
    min-width: 400px;
    overflow: hidden;
    padding: 20px;
    position: absolute;
    top: var(--_article-navigation-top-position);
    width: 100%;
    z-index: 19
  }

  .article-tooltip h2 {
    font-size: var(--font-size-26);
    font-weight: 600
  }

  .article-tooltip.tooltip-of-prev {
    animation: slide-right .5s;
    border-right: var(--_article-navigation-button-tooltip-border);
    left: 0;
    padding-left: 110px
  }

  .article-tooltip.tooltip-of-next {
    animation: slide-left .5s;
    border-left: var(--_article-navigation-button-tooltip-border);
    padding-right: 110px;
    right: 0
  }

  .article-tooltip * {
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    margin-bottom: 0;
    margin-top: 0;
    overflow: hidden;
    padding-bottom: 0;
    padding-top: 0
  }

  .article-tooltip p {
    line-height: 150%
  }
}

@keyframes slide-right {
  0% {
    margin-left: -600px
  }

  to {
    margin-left: 0
  }
}

@keyframes slide-left {
  0% {
    margin-right: -600px
  }

  to {
    margin-right: 0
  }
}

#swipe-hint-container {
  bottom: 0;
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
  z-index: 10
}

#swipe-hint-container .swipe-hint {
  align-items: center;
  background-color: rgba(0, 0, 0, .8);
  border-radius: 500px 500px 0 0;
  bottom: 0;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 16px;
  left: auto;
  padding-bottom: var(--stuff-spacing-32);
  padding-top: var(--stuff-spacing-36);
  position: fixed;
  right: auto;
  width: 100vw;
  z-index: 12
}

@media (min-width: 500px) {
  #swipe-hint-container .swipe-hint {
    width: 393px
  }
}

.swipe-hint-text {
  font: 400 1rem/140% var(--ion-font-family-sans);
  padding: 0 var(--stuff-spacing-32);
  text-align: center;
  width: 100%
}

.swipe-hint button {
  --_hint-close-button-background-color: var(--custom-purple-500);
  align-items: center;
  background-color: var(--_hint-close-button-background-color);
  border-radius: 8px;
  display: flex;
  gap: var(--stuff-spacing-8);
  justify-content: center;
  padding: var(--stuff-spacing-8) var(--stuff-spacing-16)
}

.swipe-hint-button-text {
  color: var(--gray-950);
  font: 600 .625rem/135% var(--ion-font-family-sans);
  letter-spacing: 1.5px;
  text-transform: uppercase
}

#swipe-hint-container.closed .swipe-hint {
  bottom: -320px;
  transition: bottom .5s;
  transition-timing-function: ease
}

#swipe-hint-container.close,
button.swiper-button-next.mobile,
button.swiper-button-prev.mobile {
  display: none
}

.avatar-container img {
  background-color: var(--ion-color-base)
}

.summary-list-collapsed {
  --collapsed-height: 10rem;
  height: var(--collapsed-height);
  overflow: hidden;
  transition: max-height .3s ease-in-out
}

.stuff-article-summary .summary-list li {
  font-size: var(--fs-16);
  font-weight: var(--fw-500);
  margin-bottom: var(--spacing-12)
}

.stuff-article-summary .summary-list li::marker {
  color: var(--clr-summary-bullets)
}

.summary-list .block-type-summary {
  padding-left: var(--stuff-spacing-20)
}

.summary-list .summary-heading {
  display: flex;
  font-family: var(--ff-fjalla-one);
  font-size: var(--fs-18);
  font-style: normal;
  font-weight: var(--fw-400);
  gap: var(--spacing-8);
  letter-spacing: 1.85px;
  line-height: normal;
  margin-bottom: var(--spacing-12);
  text-transform: uppercase
}

.summary-list .summary-heading svg {
  fill: var(--clr-summary-bullets);
  align-self: center
}

.summary-toggle-btn {
  cursor: pointer;
  display: flex;
  justify-content: center;
  position: relative
}

.summary-toggle-btn:after {
  background: var(--clr-neutral-200);
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  top: 50%
}

.summary-toggle-btn .primary-dark {
  --stuff-button-icon-fill-hover: var(--clr-neutral-white)
}

.summary-list-collapsed~.summary-toggle-btn:before {
  background: linear-gradient(180deg, hsla(0, 0%, 100%, 0), #fff 85%);
  content: "";
  height: 80px;
  left: 0;
  position: absolute;
  right: 0;
  top: -50px;
  z-index: 0
}

.summary-toggle-btn .icon {
  transition: transform .3s ease-in-out
}

.summary-toggle-btn .icon.rotated {
  transform: rotate(180deg)
}

.body-video.old {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.body-video .video-destination {
  --video-destination-width: var(--article-content-width)
}

.body-video .video-element .vjs-big-play-button .vjs-icon-placeholder:before {
  align-items: center;
  display: flex;
  justify-content: center
}

html.ios {
  --ion-default-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif
}

h
/*tml.md {
    --ion-default-font: "Roboto","Helvetica Neue",sans-serif
}

html {
    --ion-default-dynamic-font: -apple-system-body;
    --ion-font-family: var(--ion-default-font)
}

body {
    background: var(--ion-background-color)
}

body.backdrop-no-scroll {
    overflow: hidden
}

html.ios ion-modal ion-footer ion-toolbar:first-of-type,html.ios ion-modal.modal-card ion-header ion-toolbar:first-of-type,html.ios ion-modal.modal-sheet ion-header ion-toolbar:first-of-type {
    padding-top: 6px
}

html.ios ion-modal.modal-card ion-header ion-toolbar:last-of-type,html.ios ion-modal.modal-sheet ion-header ion-toolbar:last-of-type {
    padding-bottom: 6px
}

html.ios ion-modal ion-toolbar {
    padding-left: calc(var(--ion-safe-area-left) + 8px);
    padding-right: calc(var(--ion-safe-area-right) + 8px)
}

@media screen and (min-width: 768px) {
    html.ios ion-modal.modal-card:first-of-type {
        --backdrop-opacity:0.18
    }
}*/

ion-modal.modal-default.show-modal~ion-modal.modal-default {
  --backdrop-opacity: 0;
  --box-shadow: none
}

html.ios ion-modal.modal-card .ion-page {
  border-top-left-radius: var(--border-radius)
}

.ion-color-primary {
  --ion-color-base: var(--ion-color-primary, #3880ff) !important;
  --ion-color-base-rgb: var(--ion-color-primary-rgb, 56, 128, 255) !important;
  --ion-color-contrast: var(--ion-color-primary-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-primary-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-primary-shade, #3171e0) !important;
  --ion-color-tint: var(--ion-color-primary-tint, #4c8dff) !important
}

.ion-color-secondary {
  --ion-color-base: var(--ion-color-secondary, #3dc2ff) !important;
  --ion-color-base-rgb: var(--ion-color-secondary-rgb, 61, 194, 255) !important;
  --ion-color-contrast: var(--ion-color-secondary-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-secondary-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-secondary-shade, #36abe0) !important;
  --ion-color-tint: var(--ion-color-secondary-tint, #50c8ff) !important
}

.ion-color-tertiary {
  --ion-color-base: var(--ion-color-tertiary, #5260ff) !important;
  --ion-color-base-rgb: var(--ion-color-tertiary-rgb, 82, 96, 255) !important;
  --ion-color-contrast: var(--ion-color-tertiary-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-tertiary-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-tertiary-shade, #4854e0) !important;
  --ion-color-tint: var(--ion-color-tertiary-tint, #6370ff) !important
}

.ion-color-success {
  --ion-color-base: var(--ion-color-success, #2dd36f) !important;
  --ion-color-base-rgb: var(--ion-color-success-rgb, 45, 211, 111) !important;
  --ion-color-contrast: var(--ion-color-success-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-success-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-success-shade, #28ba62) !important;
  --ion-color-tint: var(--ion-color-success-tint, #42d77d) !important
}

.ion-color-warning {
  --ion-color-base: var(--ion-color-warning, #ffc409) !important;
  --ion-color-base-rgb: var(--ion-color-warning-rgb, 255, 196, 9) !important;
  --ion-color-contrast: var(--ion-color-warning-contrast, #000) !important;
  --ion-color-contrast-rgb: var(--ion-color-warning-contrast-rgb, 0, 0, 0) !important;
  --ion-color-shade: var(--ion-color-warning-shade, #e0ac08) !important;
  --ion-color-tint: var(--ion-color-warning-tint, #ffca22) !important
}

.ion-color-danger {
  --ion-color-base: var(--ion-color-danger, #eb445a) !important;
  --ion-color-base-rgb: var(--ion-color-danger-rgb, 235, 68, 90) !important;
  --ion-color-contrast: var(--ion-color-danger-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-danger-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-danger-shade, #cf3c4f) !important;
  --ion-color-tint: var(--ion-color-danger-tint, #ed576b) !important
}

.ion-color-light {
  --ion-color-base: var(--ion-color-light, #f4f5f8) !important;
  --ion-color-base-rgb: var(--ion-color-light-rgb, 244, 245, 248) !important;
  --ion-color-contrast: var(--ion-color-light-contrast, #000) !important;
  --ion-color-contrast-rgb: var(--ion-color-light-contrast-rgb, 0, 0, 0) !important;
  --ion-color-shade: var(--ion-color-light-shade, #d7d8da) !important;
  --ion-color-tint: var(--ion-color-light-tint, #f5f6f9) !important
}

.ion-color-medium {
  --ion-color-base: var(--ion-color-medium, #92949c) !important;
  --ion-color-base-rgb: var(--ion-color-medium-rgb, 146, 148, 156) !important;
  --ion-color-contrast: var(--ion-color-medium-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-medium-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-medium-shade, #808289) !important;
  --ion-color-tint: var(--ion-color-medium-tint, #9d9fa6) !important
}

.ion-color-dark {
  --ion-color-base: var(--ion-color-dark, #222428) !important;
  --ion-color-base-rgb: var(--ion-color-dark-rgb, 34, 36, 40) !important;
  --ion-color-contrast: var(--ion-color-dark-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-dark-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-dark-shade, #1e2023) !important;
  --ion-color-tint: var(--ion-color-dark-tint, #383a3e) !important
}

.ion-page {
  bottom: 0;
  contain: layout size style;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0
}

ion-modal>.ion-page {
  contain: layout style;
  height: 100%;
  position: relative
}

.split-pane-visible>.ion-page.split-pane-main {
  position: relative
}

.ion-page-hidden,
ion-action-sheet-controller,
ion-alert-controller,
ion-loading-controller,
ion-menu-controller,
ion-modal-controller,
ion-nav-controller,
ion-picker-controller,
ion-popover-controller,
ion-route,
ion-route-redirect,
ion-router,
ion-select-option,
ion-toast-controller {
  display: none !important
}

.ion-page-invisible {
  opacity: 0
}

.can-go-back>ion-header ion-back-button {
  display: block
}

html.plt-ios.plt-hybrid,
html.plt-ios.plt-pwa {
  --ion-statusbar-padding: 20px
}

@supports (padding-top: 20px) {
  html {
    --ion-safe-area-top: var(--ion-statusbar-padding)
  }
}

@supports (padding-top: env(safe-area-inset-top)) {
  html {
    --ion-safe-area-top: env(safe-area-inset-top);
    --ion-safe-area-bottom: env(safe-area-inset-bottom);
    --ion-safe-area-left: env(safe-area-inset-left);
    --ion-safe-area-right: env(safe-area-inset-right)
  }
}

ion-card-header.ion-color .ion-inherit-color,
ion-card.ion-color .ion-inherit-color {
  color: inherit
}

.menu-content {
  transform: translateZ(0)
}

.menu-content-open {
  cursor: pointer;
  pointer-events: none;
  touch-action: manipulation
}

.ios .menu-content-reveal {
  box-shadow: -8px 0 42px rgba(0, 0, 0, .08)
}

[dir=rtl].ios .menu-content-reveal {
  box-shadow: 8px 0 42px rgba(0, 0, 0, .08)
}

.md .menu-content-push,
.md .menu-content-reveal {
  box-shadow: 4px 0 16px rgba(0, 0, 0, .18)
}

ion-accordion-group.accordion-group-expand-inset>ion-accordion:first-of-type {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px
}

ion-accordion-group.accordion-group-expand-inset>ion-accordion:last-of-type {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px
}

ion-accordion-group>ion-accordion:last-of-type ion-item[slot=header] {
  --border-width: 0px
}

ion-accordion.accordion-animated>[slot=header] .ion-accordion-toggle-icon {
  transition: transform .3s cubic-bezier(.25, .8, .5, 1)
}

@media (prefers-reduced-motion:reduce) {
  ion-accordion .ion-accordion-toggle-icon {
    transition: none !important
  }
}

ion-accordion.accordion-expanded>[slot=header] .ion-accordion-toggle-icon,
ion-accordion.accordion-expanding>[slot=header] .ion-accordion-toggle-icon {
  transform: rotate(180deg)
}

ion-accordion-group.accordion-group-expand-inset.md>ion-accordion.accordion-previous ion-item[slot=header] {
  --border-width: 0px;
  --inner-border-width: 0px
}

ion-accordion-group.accordion-group-expand-inset.md>ion-accordion.accordion-expanded:first-of-type,
ion-accordion-group.accordion-group-expand-inset.md>ion-accordion.accordion-expanding:first-of-type {
  margin-top: 0
}

ion-input input::-webkit-date-and-time-value {
  text-align: start
}

.ion-datetime-button-overlay {
  --width: fit-content;
  --height: fit-content
}

.ion-datetime-button-overlay ion-datetime.datetime-grid {
  min-height: 320px;
  width: 320px
}

audio,
canvas,
progress,
video {
  vertical-align: baseline
}

audio:not([controls]) {
  display: none;
  height: 0
}

b,
strong {
  font-weight: 700
}

img {
  max-width: 100%
}

hr {
  border-width: 0;
  box-sizing: content-box;
  height: 1px
}

pre {
  overflow: auto
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em
}

input,
label,
select,
textarea {
  font-family: inherit;
  line-height: normal
}

textarea {
  color: inherit;
  font: inherit;
  height: auto;
  overflow: auto
}

textarea::-moz-placeholder {
  padding-left: 2px
}

textarea::placeholder {
  padding-left: 2px
}

form,
input,
optgroup,
select {
  color: inherit;
  font: inherit;
  margin: 0
}

html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer
}

.ion-tappable,
[tappable],
[tappable] div,
[tappable] ion-icon,
[tappable] ion-label,
[tappable] span,
a,
a div,
a ion-icon,
a ion-label,
a span,
button,
button div,
button ion-icon,
button ion-label,
button span,
input,
textarea {
  touch-action: manipulation
}

a ion-label,
button ion-label {
  pointer-events: none
}

button {
  -webkit-appearance: button;
  border: 0;
  border-radius: 0;
  font-family: inherit;
  font-style: inherit;
  font-variant: inherit;
  line-height: 1;
  padding: 0;
  text-transform: none
}

[tappable],
button {
  cursor: pointer
}

a[disabled],
button[disabled],
html input[disabled] {
  cursor: default
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  height: auto
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

td,
th {
  padding: 0
}

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  box-sizing: border-box
}

/*
html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    height: 100%;
    width: 100%
}*/

/*html:not(.hydrated) body {
    display: none
}

html.ion-ce body {
    display: block
}

html.plt-pwa {
    height: 100vh
}*/
/*
body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-user-drag: none;
    -ms-content-zooming: none;
    word-wrap: break-word;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    text-size-adjust: none;
    height: 100%;
    margin: 0;
    max-height: 100%;
    max-width: 100%;
    overflow: hidden;
    overscroll-behavior-y: none;
    padding: 0;
    position: fixed;
    text-rendering: optimizeLegibility;
    touch-action: manipulation;
    transform: translateZ(0);
    width: 100%
}*/

/*html {
    font-family: var(--ion-font-family)
}*/

/*@supports (-webkit-touch-callout:none) {
    html {
        font: var(--ion-dynamic-font,16px var(--ion-font-family))
    }
}

a {
    background-color: transparent;
    color: var(--ion-color-primary,#3880ff)
}

h1,h2,h3,h4,h5,h6 {
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 10px;
    margin-top: 16px
}

h1 {
    font-size: 1.625rem;
    margin-top: 20px
}

h2 {
    font-size: 1.5rem;
    margin-top: 18px
}

h3 {
    font-size: 1.375rem
}

h4 {
    font-size: 1.25rem
}

h5 {
    font-size: 1.125rem
}

h6 {
    font-size: 1rem
}

small,sub,sup {
    font-size: 75%
}

sub,sup {
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}*/

.ion-no-padding {
  --padding-start: 0;
  --padding-end: 0;
  --padding-top: 0;
  --padding-bottom: 0;
  padding: 0
}

.ion-padding {
  --padding-start: var(--ion-padding, 16px);
  --padding-end: var(--ion-padding, 16px);
  --padding-top: var(--ion-padding, 16px);
  --padding-bottom: var(--ion-padding, 16px);
  padding-inline-end: var(--ion-padding, 16px);
  padding-bottom: var(--ion-padding, 16px);
  padding-inline-start: var(--ion-padding, 16px)
}

.ion-padding,
.ion-padding-top {
  padding-top: var(--ion-padding, 16px)
}

.ion-padding-top {
  --padding-top: var(--ion-padding, 16px)
}

.ion-padding-start {
  --padding-start: var(--ion-padding, 16px);
  padding-inline-start: var(--ion-padding, 16px)
}

.ion-padding-end {
  --padding-end: var(--ion-padding, 16px);
  padding-inline-end: var(--ion-padding, 16px)
}

.ion-padding-bottom {
  --padding-bottom: var(--ion-padding, 16px);
  padding-bottom: var(--ion-padding, 16px)
}

.ion-padding-vertical {
  --padding-top: var(--ion-padding, 16px);
  --padding-bottom: var(--ion-padding, 16px);
  padding-bottom: var(--ion-padding, 16px);
  padding-top: var(--ion-padding, 16px)
}

.ion-padding-horizontal {
  --padding-start: var(--ion-padding, 16px);
  --padding-end: var(--ion-padding, 16px);
  padding-inline-end: var(--ion-padding, 16px);
  padding-inline-start: var(--ion-padding, 16px)
}

.ion-no-margin {
  --margin-start: 0;
  --margin-end: 0;
  --margin-top: 0;
  --margin-bottom: 0;
  margin: 0
}

.ion-margin {
  --margin-start: var(--ion-margin, 16px);
  --margin-end: var(--ion-margin, 16px);
  --margin-top: var(--ion-margin, 16px);
  --margin-bottom: var(--ion-margin, 16px);
  margin-inline-end: var(--ion-margin, 16px);
  margin-inline-start: var(--ion-margin, 16px);
  margin-bottom: var(--ion-margin, 16px)
}

.ion-margin,
.ion-margin-top {
  margin-top: var(--ion-margin, 16px)
}

.ion-margin-top {
  --margin-top: var(--ion-margin, 16px)
}

.ion-margin-start {
  --margin-start: var(--ion-margin, 16px);
  margin-inline-start: var(--ion-margin, 16px)
}

.ion-margin-end {
  --margin-end: var(--ion-margin, 16px);
  margin-inline-end: var(--ion-margin, 16px)
}

.ion-margin-bottom {
  --margin-bottom: var(--ion-margin, 16px);
  margin-bottom: var(--ion-margin, 16px)
}

.ion-margin-vertical {
  --margin-top: var(--ion-margin, 16px);
  --margin-bottom: var(--ion-margin, 16px);
  margin-bottom: var(--ion-margin, 16px);
  margin-top: var(--ion-margin, 16px)
}

.ion-margin-horizontal {
  --margin-start: var(--ion-margin, 16px);
  --margin-end: var(--ion-margin, 16px);
  margin-inline-end: var(--ion-margin, 16px);
  margin-inline-start: var(--ion-margin, 16px)
}

.ion-float-left {
  float: left !important
}

.ion-float-right {
  float: right !important
}

.ion-float-start {
  float: left !important
}

:host-context([dir=rtl]) .ion-float-start {
  float: right !important
}

[dir=rtl] .ion-float-start {
  float: right !important
}

@supports selector(:dir(rtl)) {
  .ion-float-start:dir(rtl) {
    float: right !important
  }
}

.ion-float-end {
  float: right !important
}

:host-context([dir=rtl]) .ion-float-end {
  float: left !important
}

[dir=rtl] .ion-float-end {
  float: left !important
}

@supports selector(:dir(rtl)) {
  .ion-float-end:dir(rtl) {
    float: left !important
  }
}

@media (min-width: 576px) {
  .ion-float-sm-left {
    float: left !important
  }

  .ion-float-sm-right {
    float: right !important
  }

  .ion-float-sm-start {
    float: left !important
  }

  :host-context([dir=rtl]) .ion-float-sm-start {
    float: right !important
  }

  [dir=rtl] .ion-float-sm-start {
    float: right !important
  }

  @supports selector(:dir(rtl)) {
    .ion-float-sm-start:dir(rtl) {
      float: right !important
    }
  }

  .ion-float-sm-end {
    float: right !important
  }

  :host-context([dir=rtl]) .ion-float-sm-end {
    float: left !important
  }

  [dir=rtl] .ion-float-sm-end {
    float: left !important
  }

  @supports selector(:dir(rtl)) {
    .ion-float-sm-end:dir(rtl) {
      float: left !important
    }
  }
}

@media (min-width: 768px) {
  .ion-float-md-left {
    float: left !important
  }

  .ion-float-md-right {
    float: right !important
  }

  .ion-float-md-start {
    float: left !important
  }

  :host-context([dir=rtl]) .ion-float-md-start {
    float: right !important
  }

  [dir=rtl] .ion-float-md-start {
    float: right !important
  }

  @supports selector(:dir(rtl)) {
    .ion-float-md-start:dir(rtl) {
      float: right !important
    }
  }

  .ion-float-md-end {
    float: right !important
  }

  :host-context([dir=rtl]) .ion-float-md-end {
    float: left !important
  }

  [dir=rtl] .ion-float-md-end {
    float: left !important
  }

  @supports selector(:dir(rtl)) {
    .ion-float-md-end:dir(rtl) {
      float: left !important
    }
  }
}

@media (min-width: 992px) {
  .ion-float-lg-left {
    float: left !important
  }

  .ion-float-lg-right {
    float: right !important
  }

  .ion-float-lg-start {
    float: left !important
  }

  :host-context([dir=rtl]) .ion-float-lg-start {
    float: right !important
  }

  [dir=rtl] .ion-float-lg-start {
    float: right !important
  }

  @supports selector(:dir(rtl)) {
    .ion-float-lg-start:dir(rtl) {
      float: right !important
    }
  }

  .ion-float-lg-end {
    float: right !important
  }

  :host-context([dir=rtl]) .ion-float-lg-end {
    float: left !important
  }

  [dir=rtl] .ion-float-lg-end {
    float: left !important
  }

  @supports selector(:dir(rtl)) {
    .ion-float-lg-end:dir(rtl) {
      float: left !important
    }
  }
}

@media (min-width: 1200px) {
  .ion-float-xl-left {
    float: left !important
  }

  .ion-float-xl-right {
    float: right !important
  }

  .ion-float-xl-start {
    float: left !important
  }

  :host-context([dir=rtl]) .ion-float-xl-start {
    float: right !important
  }

  [dir=rtl] .ion-float-xl-start {
    float: right !important
  }

  @supports selector(:dir(rtl)) {
    .ion-float-xl-start:dir(rtl) {
      float: right !important
    }
  }

  .ion-float-xl-end {
    float: right !important
  }

  :host-context([dir=rtl]) .ion-float-xl-end {
    float: left !important
  }

  [dir=rtl] .ion-float-xl-end {
    float: left !important
  }

  @supports selector(:dir(rtl)) {
    .ion-float-xl-end:dir(rtl) {
      float: left !important
    }
  }
}

.ion-text-center {
  text-align: center !important
}

.ion-text-justify {
  text-align: justify !important
}

.ion-text-start {
  text-align: start !important
}

.ion-text-end {
  text-align: end !important
}

.ion-text-left {
  text-align: left !important
}

.ion-text-right {
  text-align: right !important
}

.ion-text-nowrap {
  white-space: nowrap !important
}

.ion-text-wrap {
  white-space: normal !important
}

@media (min-width: 576px) {
  .ion-text-sm-center {
    text-align: center !important
  }

  .ion-text-sm-justify {
    text-align: justify !important
  }

  .ion-text-sm-start {
    text-align: start !important
  }

  .ion-text-sm-end {
    text-align: end !important
  }

  .ion-text-sm-left {
    text-align: left !important
  }

  .ion-text-sm-right {
    text-align: right !important
  }

  .ion-text-sm-nowrap {
    white-space: nowrap !important
  }

  .ion-text-sm-wrap {
    white-space: normal !important
  }
}

@media (min-width: 768px) {
  .ion-text-md-center {
    text-align: center !important
  }

  .ion-text-md-justify {
    text-align: justify !important
  }

  .ion-text-md-start {
    text-align: start !important
  }

  .ion-text-md-end {
    text-align: end !important
  }

  .ion-text-md-left {
    text-align: left !important
  }

  .ion-text-md-right {
    text-align: right !important
  }

  .ion-text-md-nowrap {
    white-space: nowrap !important
  }

  .ion-text-md-wrap {
    white-space: normal !important
  }
}

@media (min-width: 992px) {
  .ion-text-lg-center {
    text-align: center !important
  }

  .ion-text-lg-justify {
    text-align: justify !important
  }

  .ion-text-lg-start {
    text-align: start !important
  }

  .ion-text-lg-end {
    text-align: end !important
  }

  .ion-text-lg-left {
    text-align: left !important
  }

  .ion-text-lg-right {
    text-align: right !important
  }

  .ion-text-lg-nowrap {
    white-space: nowrap !important
  }

  .ion-text-lg-wrap {
    white-space: normal !important
  }
}

@media (min-width: 1200px) {
  .ion-text-xl-center {
    text-align: center !important
  }

  .ion-text-xl-justify {
    text-align: justify !important
  }

  .ion-text-xl-start {
    text-align: start !important
  }

  .ion-text-xl-end {
    text-align: end !important
  }

  .ion-text-xl-left {
    text-align: left !important
  }

  .ion-text-xl-right {
    text-align: right !important
  }

  .ion-text-xl-nowrap {
    white-space: nowrap !important
  }

  .ion-text-xl-wrap {
    white-space: normal !important
  }
}

.ion-text-uppercase {
  text-transform: uppercase !important
}

.ion-text-lowercase {
  text-transform: lowercase !important
}

.ion-text-capitalize {
  text-transform: capitalize !important
}

@media (min-width: 576px) {
  .ion-text-sm-uppercase {
    text-transform: uppercase !important
  }

  .ion-text-sm-lowercase {
    text-transform: lowercase !important
  }

  .ion-text-sm-capitalize {
    text-transform: capitalize !important
  }
}

@media (min-width: 768px) {
  .ion-text-md-uppercase {
    text-transform: uppercase !important
  }

  .ion-text-md-lowercase {
    text-transform: lowercase !important
  }

  .ion-text-md-capitalize {
    text-transform: capitalize !important
  }
}

@media (min-width: 992px) {
  .ion-text-lg-uppercase {
    text-transform: uppercase !important
  }

  .ion-text-lg-lowercase {
    text-transform: lowercase !important
  }

  .ion-text-lg-capitalize {
    text-transform: capitalize !important
  }
}

@media (min-width: 1200px) {
  .ion-text-xl-uppercase {
    text-transform: uppercase !important
  }

  .ion-text-xl-lowercase {
    text-transform: lowercase !important
  }

  .ion-text-xl-capitalize {
    text-transform: capitalize !important
  }
}

.ion-align-self-start {
  align-self: flex-start !important
}

.ion-align-self-end {
  align-self: flex-end !important
}

.ion-align-self-center {
  align-self: center !important
}

.ion-align-self-stretch {
  align-self: stretch !important
}

.ion-align-self-baseline {
  align-self: baseline !important
}

.ion-align-self-auto {
  align-self: auto !important
}

.ion-wrap {
  flex-wrap: wrap !important
}

.ion-nowrap {
  flex-wrap: nowrap !important
}

.ion-wrap-reverse {
  flex-wrap: wrap-reverse !important
}

.ion-justify-content-start {
  justify-content: flex-start !important
}

.ion-justify-content-center {
  justify-content: center !important
}

.ion-justify-content-end {
  justify-content: flex-end !important
}

.ion-justify-content-around {
  justify-content: space-around !important
}

.ion-justify-content-between {
  justify-content: space-between !important
}

.ion-justify-content-evenly {
  justify-content: space-evenly !important
}

.ion-align-items-start {
  align-items: flex-start !important
}

.ion-align-items-center {
  align-items: center !important
}

.ion-align-items-end {
  align-items: flex-end !important
}

.ion-align-items-stretch {
  align-items: stretch !important
}

.ion-align-items-baseline {
  align-items: baseline !important
}

.ion-hide,
.ion-hide-down,
.ion-hide-up {
  display: none !important
}

@media (min-width: 576px) {
  .ion-hide-sm-up {
    display: none !important
  }
}

@media (max-width: 575.98px) {
  .ion-hide-sm-down {
    display: none !important
  }
}

@media (min-width: 768px) {
  .ion-hide-md-up {
    display: none !important
  }
}

@media (max-width: 767.98px) {
  .ion-hide-md-down {
    display: none !important
  }
}

@media (min-width: 992px) {
  .ion-hide-lg-up {
    display: none !important
  }
}

@media (max-width: 991.98px) {
  .ion-hide-lg-down {
    display: none !important
  }
}

@media (min-width: 1200px) {
  .ion-hide-xl-up {
    display: none !important
  }
}

@media (max-width: 1199.98px) {
  .ion-hide-xl-down {
    display: none !important
  }
}

ion-app.stuff.sticky-header {
  --header-height-global: var(--header-shrink-height-global)
}

.common-comments {
  margin: 50px auto
}

:root {
  --button-md-icon-size: 1rem;
  --stuff-button-padding: 8px 16px;
  --stuff-button-margin: 0;
  --stuff-button-font: var(--font-base);
  --stuff-button-icon-fill: var(--clr-button-primary-icon);
  --stuff-button-icon-fill-hover: var(--clr-button-primary-icon-hover);
  --stuff-button-background-color: var(--clr-button-surface);
  --stuff-button-border-focused: transparent;
  --stuff-button-border-type: solid;
  --stuff-button-icon-width: 1rem;
  --stuff-button-icon-height: 1rem;
  --stuff-button-gap: 0
}

.stuff-button {
  --_button-md-icon-character-size: 2rem;
  --stuff-button-text-letter-spacing: 0;
  --stuff-button-text-color: var(--clr-button-text);
  --stuff-button-text-color-hover: var(--clr-button-text);
  --stuff-button-background-color-active: transparent;
  --stuff-_button-background-color-disabled: transparent;
  --stuff-button-background-color-hover: transparent;
  --stuff-button-hover-mint: var(--mint-500);
  --stuff-button-border: transparent;
  --stuff-button-border-radius: 4px;
  --stuff-button-outline-width: 1px;
  align-items: center;
  align-self: center;
  background-color: var(--stuff-button-background-color);
  border: none;
  border-radius: var(--stuff-button-border-radius);
  color: var(--stuff-button-text-color);
  cursor: pointer;
  display: inline-flex;
  font: var(--stuff-button-font);
  gap: var(--stuff-button-gap);
  justify-content: center;
  letter-spacing: var(--stuff-button-text-letter-spacing);
  margin: var(--stuff-button-margin);
  outline: var(--stuff-button-outline-width) solid var(--stuff-button-border);
  outline-offset: -1px;
  padding: var(--stuff-button-padding);
  text-align: center;
  transition: background-color .3s
}

.stuff-button:hover {
  background-color: var(--stuff-button-background-color-hover);
  color: var(--stuff-button-text-color-hover)
}

.stuff-button.primary-small:hover {
  background-color: var(--stuff-button-hover-mint)
}

.stuff-button svg.icon {
  --icon-color: var(--stuff-button-icon-fill);
  --icon-width: var(--stuff-button-icon-width);
  --icon-height: var(--stuff-button-icon-height);
  min-height: var(--stuff-button-icon-height);
  min-width: var(--stuff-button-icon-width)
}

.stuff-button:hover svg.icon {
  --icon-color: var(--stuff-button-icon-fill-hover)
}

.stuff-button:active {
  background-color: var(--stuff-button-background-color-active)
}

.stuff-button:focus-visible {
  outline: var(--stuff-button-outline-width) var(--stuff-button-border-type) var(--stuff-button-border-focused);
  outline-offset: -1px
}

.stuff-button.primary-dark:focus-visible,
.stuff-button.primary-new:focus-visible {
  --stuff-button-outline-width: var(--border-width-2);
  --stuff-button-border-focused: var(--clr-button-primary-dark-border-focused);
  --stuff-button-border-type: solid
}

.stuff-button:disabled {
  background-color: var(--stuff-_button-background-color-disabled)
}

.stuff-button.icon-end {
  flex-direction: row-reverse
}

.stuff-button.md svg {
  --stuff-button-icon-width: var(--button-md-icon-size);
  --stuff-button-icon-height: var(--button-md-icon-size)
}

.stuff-button.primary {
  --stuff-button-icon-fill: var(--clr-button-primary-icon);
  --stuff-button-icon-fill-hover: var(--clr-button-primary-icon-hover);
  --stuff-button-text-color: var(--clr-button-primary-text);
  --stuff-button-text-color-hover: var(--clr-button-primary-text-hover);
  --stuff-button-background-color: var(--clr-button-primary-surface);
  --stuff-button-background-color-hover: var(--clr-button-primary-surface-hover);
  --stuff-button-background-color-active: var(--clr-button-primary-surface-active);
  --stuff-_button-background-color-disabled: var(--clr-button-primary-surface-disabled);
  --stuff-button-border-focused: var(--clr-button-primary-border-focused);
  --stuff-button-border: var(--clr-button-primary-border);
  --stuff-button-border-type: dashed
}

.stuff-button.primary-new {
  --stuff-button-icon-fill: var(--clr-button-primary-new-icon);
  --stuff-button-icon-fill-hover: var(--clr-button-primary-new-icon-hover);
  --stuff-button-text-color: var(--clr-button-primary-new-text);
  --stuff-button-text-color-hover: var(--clr-button-primary-new-text-hover);
  --stuff-button-background-color: var(--clr-button-primary-new-surface);
  --stuff-button-background-color-hover: var(--stuff-button-hover-mint);
  --stuff-button-background-color-active: var(--clr-button-primary-new-surface-active);
  --stuff-_button-background-color-disabled: var(--clr-button-primary-new-surface-disabled);
  --stuff-button-border-focused: var(--clr-button-primary-new-border-focused);
  --stuff-button-border-radius: 8px;
  --stuff-button-font: var(--font-xxs);
  --stuff-button-outline-width: 0px;
  --stuff-button-text-letter-spacing: 2px
}

.stuff-button.primary-small {
  --stuff-button-icon-fill: var(--clr-button-primary-new-icon);
  --stuff-button-icon-fill-hover: var(--clr-button-primary-new-icon-hover);
  --stuff-button-text-color: var(--clr-button-primary-new-text);
  --stuff-button-text-color-hover: var(--clr-button-primary-new-text-hover);
  --stuff-button-background-color: var(--clr-button-primary-new-surface);
  --stuff-button-background-color-hover: var(--clr-button-primary-new-surface-hover);
  --stuff-button-background-color-active: var(--clr-button-primary-new-surface-active);
  --stuff-_button-background-color-disabled: var(--clr-button-primary-new-surface-disabled);
  --stuff-button-border-focused: var(--clr-button-primary-new-border-focused);
  --stuff-button-border-radius: 8px;
  --stuff-button-font: var(--fs-14);
  --stuff-button-outline-width: 0
}

.stuff-button.primary-dark {
  --stuff-button-icon-fill: var(--clr-button-primary-dark-icon);
  --stuff-button-icon-fill-hover: var(--clr-button-primary-dark-icon-hover);
  --stuff-button-text-color: var(--clr-button-primary-dark-text);
  --stuff-button-text-color-hover: var(--clr-button-primary-dark-text-hover);
  --stuff-button-background-color: var(--clr-button-primary-dark-surface);
  --stuff-button-background-color-hover: var(--clr-button-primary-dark-surface-hover);
  --stuff-button-background-color-active: var(--clr-button-primary-dark-surface-active);
  --stuff-_button-background-color-disabled: var(--clr-button-primary-dark-surface-disabled);
  --stuff-button-border-focused: var(--clr-button-primary-dark-border-focused);
  --stuff-button-border-radius: 8px;
  --stuff-button-font: var(--font-xxs);
  --stuff-button-text-letter-spacing: 2px;
  border-radius: var(--stuff-button-border-radius)
}

.stuff-button.primary-light {
  --stuff-button-icon-fill: var(--clr-button-primary-light-icon);
  --stuff-button-icon-fill-hover: var(--clr-button-primary-light-icon-hover);
  --stuff-button-text-color: var(--clr-button-primary-light-text);
  --stuff-button-text-color-hover: var(--clr-button-primary-light-text-hover);
  --stuff-button-background-color: var(--clr-button-primary-light-surface);
  --stuff-button-background-color-hover: var(--clr-button-primary-light-surface-hover);
  --stuff-button-background-color-active: var(--clr-button-primary-light-surface-active);
  --stuff-_button-background-color-disabled: var(--clr-button-primary-light-surface-disabled);
  --stuff-button-background-color-focused: var(--clr-button-primary-light-surface-focused);
  --stuff-button-border-focused: var(--clr-button-primary-light-border-focused);
  --stuff-button-border: var(--clr-button-primary-light-border);
  --stuff-button-border-type: dashed
}

.stuff-button.secondary {
  --stuff-button-icon-fill: var(--clr-button-secondary-icon);
  --stuff-button-icon-fill-hover: var(--clr-button-secondary-icon-hover);
  --stuff-button-text-color: var(--clr-button-secondary-text);
  --stuff-button-text-color-hover: var(--clr-button-secondary-text-hover);
  --stuff-button-background-color: var(--clr-button-secondary-surface);
  --stuff-button-background-color-hover: var(--clr-button-secondary-surface-hover);
  --stuff-button-background-color-active: var(--clr-button-secondary-surface-active);
  --stuff-_button-background-color-disabled: var(--clr-button-secondary-surface-disabled);
  --stuff-button-border-focused: var(--clr-button-secondary-border-focused);
  --stuff-button-border: var(--clr-button-secondary-border);
  --stuff-button-border-type: dashed
}

.stuff-button.secondary-light {
  --stuff-button-icon-fill: var(--clr-button-secondary-light-icon);
  --stuff-button-icon-fill-hover: var(--clr-button-secondary-light-icon-hover);
  --stuff-button-text-color: var(--clr-button-secondary-light-text);
  --stuff-button-text-color-hover: var(--clr-button-secondary-light-text-hover);
  --stuff-button-background-color: var(--clr-button-secondary-light-surface);
  --stuff-button-background-color-hover: var(--clr-button-secondary-light-surface-hover);
  --stuff-button-background-color-active: var(--clr-button-secondary-light-surface-active);
  --stuff-_button-background-color-disabled: var(--clr-button-secondary-light-surface-disabled);
  --stuff-button-background-color-focused: var(--clr-button-secondary-light-surface-focused);
  --stuff-button-border-focused: var(--clr-button-secondary-light-border-focused);
  --stuff-button-border: var(--clr-button-secondary-light-border);
  --stuff-button-border-type: dashed
}

.stuff-button.brand {
  --stuff-button-icon-fill: var(--clr-button-brand-icon);
  --stuff-button-icon-fill-hover: var(--clr-button-brand-icon-hover);
  --stuff-button-font: var(--font-condensed-bold);
  --stuff-button-text-color: var(--clr-button-brand-text);
  --stuff-button-text-color-hover: var(--clr-button-brand-text-hover);
  --stuff-button-background-color: var(--clr-button-brand-surface);
  --stuff-button-background-color-hover: var(--clr-button-brand-surface-hover);
  --stuff-button-background-color-active: var(--clr-button-brand-surface-active);
  --stuff-_button-background-color-disabled: var(--clr-button-brand-surface-disabled);
  --stuff-button-border-focused: var(--clr-button-brand-border-focused);
  --stuff-button-border: var(--clr-button-brand-border);
  --stuff-button-padding: 2px 4px;
  --stuff-button-border-type: dashed;
  text-transform: uppercase
}

.stuff-button.small-caps {
  font-size: var(--fs-10);
  text-transform: uppercase
}

.stuff-button.small,
.stuff-button.small-caps {
  --stuff-button-padding: 8px 16px;
  font-weight: var(--fw-600)
}

.stuff-button.small {
  font-size: var(--fs-14);
  line-height: 19px
}

.stuff-button.md {
  --stuff-button-padding: 4px 8px
}

.stuff-button.circle.md-new {
  --stuff-button-padding: 0 0;
  font-size: 13px;
  height: 32px;
  letter-spacing: 0;
  margin: 0;
  width: 32px
}

.stuff-button.brand.md {
  --stuff-button-padding: 2px 0
}

.stuff-button.circle {
  border-radius: 50%
}

.stuff-button.md.character,
.stuff-button.md.icon {
  --stuff-button-padding: 2px;
  aspect-ratio: 1/1;
  min-height: var(--_button-md-icon-character-size);
  min-width: var(--_button-md-icon-character-size)
}

.stuff-button.md.icon svg {
  min-height: var(--button-md-icon-size);
  min-width: var(--button-md-icon-size)
}

.stuff-auth-btn {
  --stuff-button-padding: var(--spacing-8) var(--spacing-12);
  --stuff-button-font: var(--font-s)
}

.stuff-auth-block .stuff-auth-btn:focus-visible {
  --stuff-button-border-type: solid
}

.stuff-auth-block .stuff-auth-btn.secondary:focus-visible {
  --stuff-button-background-color-focused: transparent;
  outline: var(--border-width-2) solid var(--stuff-button-border-focused)
}

.stuff-auth-block .stuff-auth-btn.primary:focus-visible {
  outline: var(--border-width-2) solid var(--stuff-button-border-focused)
}

:root {
  --stuff-divider-thickness: 1px;
  --stuff-divider-background-color: var(--clr-primary-lighter);
  --stuff-divider-height: var(--stuff-divider-thickness);
  --stuff-divider-width: 100%;
  --stuff-divider-margin: 0;
  --stuff-divider-dotted-line: var(--border-dotted-primary-horizontal)
}

.stuff-divider {
  background-color: var(--stuff-divider-background-color);
  height: var(--stuff-divider-height);
  margin: var(--stuff-divider-margin);
  width: var(--stuff-divider-width)
}

@media screen and (min-width: 768px) {
  .stuff-divider.vertical {
    --stuff-divider-height: 100%;
    --stuff-divider-width: var(--stuff-divider-thickness)
  }
}

.stuff-divider.dotted {
  --stuff-divider-background-color: transparent;
  background: var(--stuff-divider-dotted-line)
}

.stuff-divider.slanted {
  transform: skew(-18deg)
}

.stuff-divider.dotted.vertical {
  --stuff-divider-dotted-line: var(--border-dotted-primary-vertical)
}

:root {
  --stuff-column-gap: var(--grid-column-gap)
}

.stuff-column {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--stuff-column-gap)
}

.stuff-credentials {
  --_svg-color: var(--stuff-footer-text-color);
  --_svg-hover-color: var(--stuff-footer-text-active-color);
  align-items: center;
  display: flex;
  gap: 4px;
  justify-content: center
}

.stuff-credentials>.credential-container {
  height: 3.5rem;
  line-height: 3.5rem;
  padding: 2px 4px
}

.stuff-web-header-bar {
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  /* Настройте параметры тени по желанию */
}

.stuff-web-header {
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  /* Тень под всей шапкой */
}

:root {
  --stuff-logo-color: black;
  /* Пример значения */
  --stuff-logo-height: 50px;
  --stuff-logo-width: 150px;
}

.stuff-logo .logo-svg {
  background-image: url(../index/stuff-logo.svg);
  background-repeat: no-repeat;
  background-size: contain;
  /* или auto, в зависимости от требуемого поведения */
}

.stuff-credentials .logo-svg {
  background-color: var(--_svg-color);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat
}

.stuff-credentials .pou-tiaki .logo-svg {
  height: 20px;
  -webkit-mask-image: url(../index/pou-tiaki.svg);
  mask-image: url(../index/pou-tiaki.svg);
  width: 50px
}

.stuff-credentials .pou-tiaki .logo-svg {
  height: 20px;
  width: 50px;
  background-image: url(../index/pou-tiaki.svg);
  background-repeat: no-repeat;
  background-size: contain;
  /* Масштабирование SVG по контейнеру */
}

.pou-tiaki .logo-svg {
  height: 20px;
  width: 50px;
  -webkit-mask-image: url(../index/pou-tiaki.svg);
  mask-image: url(../index/pou-tiaki.svg);
}


.stuff-credentials .certified-corporation .logo-svg {
  height: 48px;
  -webkit-mask-image: url(../index/certified-corporation.svg);
  mask-image: url(../index/certified-corporation.svg);
  width: 32px
}

.stuff-credentials .certified-corporation .logo-svg {
  height: 48px;
  width: 32px;
  background-image: url(../index/certified-corporation.svg);
  background-repeat: no-repeat;
  background-size: contain;
  /* или cover, в зависимости от нужного результата */
}

.certified-corporation .logo-svg {
  height: 48px;
  width: 32px;
  -webkit-mask-image: url(../index/certified-corporation.svg);
  mask-image: url(../index/certified-corporation.svg);
}


.stuff-credentials .logo-svg:hover {
  background-color: var(--_svg-hover-color);
  cursor: pointer
}

.certified-corporation:focus-visible,
.pou-tiaki:focus-visible {
  outline: var(--stuff-footer-focus-outline)
}

@media only screen and (min-width: 576px) {
  .stuff-credentials {
    gap: 8px
  }
}

@media only screen and (min-width: 768px) {
  .stuff-credentials {
    gap: 24px
  }
}

@media only screen and (min-width: 1024px) {
  .stuff-credentials {
    align-items: center
  }
}

.footer-logo-credentials {
  align-items: center;
  display: flex;
  grid-column: 1/span 2;
  justify-content: center;
  margin: 1.5rem 0
}

.stuff-footer-body .stuff-logo {
  --stuff-logo-hover-color: var(--stuff-footer-text-active-color);
  --stuff-logo-width: 115px;
  --stuff-logo-height: 40px
}

.stuff-footer-body .stuff-logo a {
  --stuff-logo-padding: 0.25rem
}

.stuff-footer-body .stuff-logo a:focus-visible {
  outline: var(--stuff-footer-focus-outline)
}

.stuff-footer-body .stuff-divider.vertical {
  --stuff-divider-height: 2.5rem;
  --stuff-divider-width: 1px;
  --stuff-divider-margin: 0 1.5rem;
  display: block
}

.stuff-divider.vertical~.vertical {
  display: none
}

@media screen and (min-width: 768px) {
  .stuff-footer-body .stuff-divider.vertical {
    --stuff-divider-margin: 0 1rem
  }
}

@media screen and (min-width: 1024px) {
  .stuff-divider.vertical~.vertical {
    display: block
  }

  .stuff-footer-body .stuff-divider.vertical {
    --stuff-divider-margin: 0 1.5rem
  }
}

.stuff-footer-body .footer-nav-links {
  --_body-links-gap: 1rem;
  --_links-flex-direction: row;
  display: flex;
  flex-direction: var(--_links-flex-direction);
  gap: var(--_body-links-gap);
  grid-column: 1/span 2;
  justify-content: center
}

.stuff-footer-body .footer-nav-links a {
  align-items: center;
  color: var(--stuff-footer-text-color);
  display: flex;
  font: var(--font-s);
  min-height: 44px;
  padding: .125rem;
  text-decoration: none
}

.stuff-footer-body .footer-nav-links a:focus-visible {
  outline: var(--stuff-footer-focus-outline)
}

.stuff-footer-body .footer-nav-links a:active,
.stuff-footer-body .footer-nav-links a:hover {
  color: var(--stuff-footer-text-active-color)
}

@media only screen and (min-width: 768px) {
  .stuff-footer-body .footer-nav-links {
    --_body-links-gap: 0;
    --_links-flex-direction: column;
    margin: 0
  }

  .stuff-footer-body .footer-nav-links a {
    min-height: auto
  }
}

@media only screen and (min-width: 1440px) {
  .stuff-footer-body .footer-nav-links {
    --_body-links-gap: 1.5rem;
    --_links-flex-direction: row
  }
}

.footer-send-stories {
  align-self: center;
  text-align: right
}

.footer-send-stories .description {
  display: block
}

.footer-send-stories .news-tip-link {
  color: var(--stuff-footer-text-color);
  font-weight: var(--fw-600)
}

.footer-send-stories .news-tip-link:hover {
  color: var(--stuff-footer-text-active-color)
}

@media only screen and (min-width: 768px) {
  .footer-send-stories {
    text-align: left
  }
}

@media only screen and (min-width: 1200px) {
  .footer-send-stories .description {
    display: inline
  }
}

.social-links {
  --stuff-button-icon-fill: var(--stuff-footer-text-color);
  --stuff-button-icon-fill-hover: var(--stuff-footer-text-active-color);
  --stuff-button-padding: 0.75rem;
  --stuff-button-background-color: transparent;
  --stuff-button-icon-width: 24px;
  --stuff-button-icon-height: 24px;
  display: flex;
  gap: 0;
  justify-content: left;
  margin-left: 1rem
}

.social-links .stuff-button {
  cursor: pointer
}

.social-links button:focus-visible svg {
  border-radius: 50%;
  outline: var(--stuff-footer-focus-outline);
  outline-offset: -1px
}

.social-links button svg:focus {
  outline: none
}

@media only screen and (min-width: 768px) {
  .social-links {
    justify-content: right;
    margin-left: 0
  }
}

@media only screen and (min-width: 1024px) {
  .social-links {
    --stuff-button-padding: 0;
    gap: 1.5rem
  }
}

.stuff-footer-body {
  font: var(--fw-400) var(--fs-14) /var(--lh-130) var(--ff-sans)
}

.stuff-footer-body .container {
  --_container-padding: 0.75rem;
  --_container-flex-direction: row;
  --_container-wrap: wrap;
  display: grid;
  flex-direction: var(--_container-flex-direction);
  grid-template-columns: 1fr 1fr;
  padding: var(--_container-padding)
}

@media only screen and (min-width: 768px) {
  .stuff-footer-body .container {
    --_container-padding: 1rem 0.5rem 1rem 0.625rem;
    align-items: center;
    display: flex;
    flex-wrap: var(--_container-wrap);
    gap: 1rem;
    justify-content: space-between;
    max-width: var(--break-point-1440)
  }
}

@media only screen and (min-width: 1024px) {
  .stuff-footer-body .container {
    --_container-padding: 2rem 2rem 2rem 1.625rem;
    --_container-wrap: nowrap
  }
}

@media only screen and (min-width: 1200px) {
  .stuff-footer-body .container {
    --_container-padding: 2rem 2rem 2rem 1.75rem;
    margin: auto
  }
}

.stuff-footer-bottom {
  --_container-padding: calc(0.75rem - var(--_splash-size)) 0.75rem 0.75rem 0.75rem;
  --_container-flex-direction: column;
  --_container-gap: 0.5rem;
  --_links-max-width: 15.625rem;
  --_links-justify-content: center;
  --_shielded-icon-svg-height: 24px;
  --_shielded-icon-svg-width: 24px;
  --_copyright-right-margin: 0;
  --_splash-size: var(--fs-accessibility-5);
  border-top: var(--_splash-size) solid var(--stuff-footer-splash-color);
  width: 100%
}

.stuff-footer-bottom .container {
  align-items: center;
  display: flex;
  flex-direction: var(--_container-flex-direction);
  gap: var(--_container-gap);
  max-width: var(--break-point-1440);
  padding: var(--_container-padding)
}

.stuff-footer-bottom .links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  justify-content: var(--_links-justify-content);
  max-width: var(--_links-max-width)
}

.stuff-footer-bottom .links a {
  padding: .125rem .25rem;
  text-decoration: none
}

.stuff-footer-bottom .copyright,
.stuff-footer-bottom .links a {
  color: var(--stuff-footer-text-color);
  font: var(--font-xs)
}

.stuff-footer-bottom .copyright {
  margin-right: var(--_copyright-right-margin)
}

.stuff-footer-bottom .links a:active,
.stuff-footer-bottom .links a:hover {
  color: var(--stuff-footer-text-active-color)
}

.stuff-footer-bottom .links a:focus-visible {
  outline: var(--stuff-footer-focus-outline)
}

.stuff-footer-bottom .shield-icon {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: center
}

.stuff-footer-bottom .shield-icon,
.stuff-footer-bottom .shield-icon * {
  height: var(--_shielded-icon-svg-height);
  width: var(--_shielded-icon-svg-width)
}

.stuff-footer-bottom .shield-icon button:focus {
  outline: none
}

.stuff-footer-bottom .shield-icon button:focus-visible svg {
  border-radius: 50%;
  outline: var(--stuff-footer-focus-outline);
  outline-offset: -.5px
}

@media only screen and (min-width: 768px) {
  .stuff-footer-bottom {
    --_links-max-width: none;
    --_container-flex-direction: row;
    --_container-gap: 0;
    --_links-justify-content: flex-start;
    --_splash-size: var(--fs-accessibility-10)
  }

  .stuff-footer-bottom .container {
    --_container-padding: calc(1.375rem - var(--_splash-size)) 1.25rem 0.75rem 0.75rem
  }

  .stuff-footer-bottom .links {
    flex: 1
  }

  .stuff-footer-bottom .shield-icon {
    margin-right: -.25rem
  }

  .stuff-footer-bottom .copyright {
    --_copyright-right-margin: 1.5rem
  }
}

@media only screen and (min-width: 1024px) {
  .stuff-footer-bottom .container {
    --_container-padding: calc(1.375rem - var(--_splash-size)) 2rem 0.75rem 1.75rem
  }
}

@media only screen and (min-width: 1440px) {
  .stuff-footer-bottom .container {
    margin: auto
  }
}

.stuff-masthead-logos {
  --_logo-width: 0;
  --_logo-height: 0;
  --_logo-gap: 4px;
  align-items: flex-end;
  display: flex;
  gap: var(--_logo-gap);
  justify-content: center;
  margin-top: 12px
}

.stuff-masthead-logos .logo-container {
  height: 1.188rem;
  padding: 2px 4px
}

.stuff-masthead-logos svg.icon {
  --icon-width: var(--_logo-width);
  --icon-height: var(--_logo-height)
}

.stuff-masthead-logos svg:focus-within {
  outline: none
}

.stuff-masthead-logos .logo-container:focus-visible {
  outline: var(--stuff-footer-focus-outline)
}

.stuff-masthead-logos .the-post svg {
  margin-left: -5px
}

.stuff-masthead-logos .the-post {
  --_logo-width: 80px;
  --_logo-height: 15px
}

.stuff-masthead-logos .the-press {
  --_logo-width: 98px;
  --_logo-height: 13px
}

.stuff-masthead-logos .the-waikato-times {
  --_logo-width: 140px;
  --_logo-height: 12px
}

@media only screen and (min-width: 576px) {
  .stuff-masthead-logos {
    --_logo-gap: 16px
  }

  .stuff-masthead-logos .the-post svg {
    margin-top: -4px
  }

  .stuff-masthead-logos .the-press svg,
  .stuff-masthead-logos .the-waikato-times svg {
    margin-top: -2px
  }
}

@media only screen and (min-width: 768px) {
  .stuff-masthead-logos {
    --_logo-gap: 24px
  }

  .stuff-masthead-logos .the-post {
    --_logo-width: 76px;
    --_logo-height: 18px
  }

  .stuff-masthead-logos .the-press {
    --_logo-width: 98px;
    --_logo-height: 16px
  }

  .stuff-masthead-logos .the-waikato-times {
    --_logo-width: 140px;
    --_logo-height: 16px
  }
}

@media only screen and (min-width: 1024px) {
  .stuff-masthead-logos {
    align-items: center;
    margin-top: 0
  }
}

@media only screen and (min-width: 1200px) {
  .stuff-masthead-logos .the-post {
    --_logo-width: 100px
  }

  .stuff-masthead-logos .the-press {
    --_logo-width: 125px
  }

  .stuff-masthead-logos .the-waikato-times {
    --_logo-width: 175px
  }
}

.stuff-subscribe-donate {
  --_container-padding: 16px 12px;
  --_container-flex-direction: column;
  --_heading-width: auto;
  --_heading-font-size: var(--fs-16);
  --_divider-margin: 12px 0;
  --_divider-height: 1px;
  --_divider-width: 100%;
  --_button-width: 100%;
  --_subscribe-arrow-display: none;
  background-color: var(--stuff-footer-subscribe-donate-surface-color);
  color: var(--stuff-footer-subscribe-donate-contrast-color)
}

.stuff-subscribe-donate .container {
  display: flex;
  flex-direction: var(--_container-flex-direction);
  gap: 16px;
  max-width: var(--break-point-1440);
  padding: var(--_container-padding)
}

.stuff-subscribe-donate .subscribe-arrow {
  display: var(--_subscribe-arrow-display)
}

.stuff-subscribe-donate .stuff-divider {
  height: var(--_divider-height);
  margin: var(--_divider-margin);
  width: var(--_divider-width)
}

.stuff-subscribe-donate .stuff-button {
  --stuff-button-font: var(--fw-base) var(--fs-16) /var(--lh-130) var(--ff-sans);
  --stuff-button-gap: 8px;
  --stuff-button-border-type: solid;
  --stuff-button-icon-width: 12px;
  --stuff-button-icon-height: 12px;
  width: var(--_button-width)
}

.stuff-subscribe-donate .heading {
  font: var(--fw-600) var(--_heading-font-size) /var(--lh-130) var(--ff-sans-wide);
  text-align: center
}

@media only screen and (min-width: 576px) {
  .stuff-subscribe-donate .container {
    justify-content: space-between
  }
}

@media only screen and (min-width: 768px) {
  .stuff-subscribe-donate {
    --_container-padding: 16px 16px 16px 12px;
    --_divider-height: 3.063rem;
    --_divider-width: 1px;
    --_divider-margin: 0 auto;
    --_button-width: fit-content;
    --_container-flex-direction: row
  }

  .stuff-subscribe-donate .subscribe {
    align-items: flex-start;
    display: flex;
    flex-direction: column
  }

  .stuff-subscribe-donate .stuff-button {
    margin-top: 0
  }
}

@media only screen and (min-width: 1024px) {
  .stuff-subscribe-donate {
    --_container-padding: 16px 32px;
    --_divider-margin: 0 24px 0 auto;
    --_divider-height: 2.75rem;
    --_subscribe-arrow-display: block
  }

  .stuff-subscribe-donate .subscribe {
    align-items: center;
    flex-direction: row;
    gap: 16px;
    height: 35px
  }
}

@media only screen and (min-width: 1200px) {
  .stuff-subscribe-donate {
    --_heading-width: auto;
    --_divider-height: 2.375rem;
    --_heading-font-size: var(--fs-20)
  }
}

@media only screen and (min-width: 1440px) {
  .stuff-subscribe-donate .container {
    margin: auto
  }
}

.stuff-footer {
  --stuff-footer-subscribe-donate-surface-color: var(--colors-elements-header-footer-footer-topband-bg);
  --stuff-footer-subscribe-donate-contrast-color: #fff;
  --stuff-footer-surface-color: var(--colors-elements-header-footer-footer-bg-color);
  --stuff-footer-splash-color: var(--colors-elements-header-footer-headerfooter-splash-colour);
  --stuff-footer-text-color: var(--clr-link-text-secondary);
  --stuff-footer-text-active-color: var(--clr-link-text-secondary-active);
  --stuff-footer-focus-outline: 2px dashed var(--stuff-footer-text-active-color);
  background-color: var(--stuff-footer-surface-color);
  margin-top: auto;
  width: 100%;
  z-index: -1
}

:root {
  --stuff-row-gap: var(--grid-column-gap)
}

.stuff-row {
  align-items: stretch;
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: var(--stuff-row-gap)
}

@media screen and (min-width: 768px) {
  .stuff-row {
    --stuff-row-gap: var(--grid-row-gap);
    align-self: stretch;
    flex-direction: row
  }
}

.footer-voyager-awards {
  --_voyager-flex-direction: column;
  --_voyager-padding: 24px 0 16px 0;
  --_voyager-flex: 0 0 100%;
  align-items: center;
  display: flex;
  flex: var(--_voyager-flex);
  flex-direction: var(--_voyager-flex-direction);
  gap: 8px;
  grid-column: 1/span 2;
  padding: var(--_voyager-padding)
}

.voyager-credentials {
  display: none
}

.footer-voyager-awards .award-text {
  color: var(--stuff-footer-text-color);
  line-height: 135%
}

@media only screen and (min-width: 768px) {
  .footer-voyager-awards {
    --_voyager-flex-direction: row;
    --_voyager-padding: 0 0 16px 0;
    gap: 12px;
    justify-content: center
  }
}

@media screen and (min-width: 1024px) {
  .footer-voyager-awards {
    --_voyager-padding: 0;
    --_voyager-flex: 0 1 auto
  }

  .voyager-footer-body {
    display: none
  }

  .voyager-credentials {
    display: flex
  }

  .footer-voyager-awards .award-text {
    max-width: 141px
  }
}

.hamburger-voyager-awards {
  --_text-color: var(--elements-text-color-reversed);
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: flex-start;
  margin-top: auto;
  padding-top: var(--spacing-32)
}

.hamburger-voyager-awards .award-text {
  color: var(--_text-color)
}

.stuff-hamburger-menu .hamburger-menu-list::-webkit-scrollbar-thumb {
  background: var(--theme-color-secondary-translucent);
  border-radius: 6.25rem
}

ion-menu.stuff-hamburger-menu {
  --background: var(--theme-color-primary);
  --_stuff-hamburger-menu-color: var(--theme-color-secondary);
  --_stuff-hamburger-menu-interactive-color: var(--theme-color-secondary-lighter)
}

.stuff-hamburger-menu .hamburger-menu-wrapper {
  color: var(--_stuff-hamburger-menu-color);
  margin-top: var(--ion-safe-area-top)
}

.stuff-hamburger-menu .hamburger-menu-list {
  border-radius: var(--measure-gaps-card-padding-bottom);
  padding: var(--measure-gaps-card-padding-bottom) var(--measure-gaps-body-side-padding) var(--measure-gaps-body-side-padding) var(--measure-gaps-body-side-padding)
}

.stuff-hamburger-menu .hamburger-menu-item {
  padding: var(--spacing-8) 0
}

.stuff-hamburger-menu .hamburger-menu-item:not(:nth-last-of-type(-n+2)) {
  border-bottom: 1px solid var(--theme-color-secondary-translucent)
}

.stuff-hamburger-menu .hamburger-menu-item,
.stuff-hamburger-menu .hamburger-menu-item-title a {
  color: var(--_stuff-hamburger-menu-color);
  font-family: var(--stuff-hamburger-menu-parent-font-family);
  font-size: var(--stuff-hamburger-menu-parent-font-size);
  font-weight: var(--stuff-hamburger-menu-parent-font-weight);
  line-height: var(--stuff-hamburger-menu-parent-line-height);
  text-decoration: none
}

.stuff-hamburger-menu .anchor-wrapper {
  gap: var(--spacing-8);
  padding-left: var(--spacing-8)
}

.stuff-hamburger-menu .has-submenu .hamburger-menu-item-title svg,
.stuff-hamburger-menu .menu-close ion-menu-toggle svg,
.stuff-hamburger-menu .no-submenu .hamburger-menu-item-title svg,
.stuff-hamburger-menu .subnav-list ion-menu-toggle svg {
  fill: var(--theme-color-secondary)
}

.stuff-hamburger-menu .hamburger-menu-item-title:active,
.stuff-hamburger-menu .hamburger-menu-item-title:active a,
.stuff-hamburger-menu .hamburger-menu-item-title:hover,
.stuff-hamburger-menu .hamburger-menu-item-title:hover a,
.stuff-hamburger-menu .has-submenu .hamburger-menu-item-title:hover svg,
.stuff-hamburger-menu .menu-close ion-menu-toggle:active,
.stuff-hamburger-menu .menu-close ion-menu-toggle:hover,
.stuff-hamburger-menu .menu-close ion-menu-toggle:hover svg,
.stuff-hamburger-menu .subnav-list ion-menu-toggle:active a,
.stuff-hamburger-menu .subnav-list ion-menu-toggle:hover a,
.stuff-hamburger-menu .subnav-list ion-menu-toggle:hover svg {
  color: var(--_stuff-hamburger-menu-interactive-color)
}

.stuff-hamburger-menu .has-submenu .hamburger-menu-item-title:active svg,
.stuff-hamburger-menu .menu-close ion-menu-toggle:active svg,
.stuff-hamburger-menu .subnav-list ion-menu-toggle:active svg {
  fill: var(--_stuff-hamburger-menu-interactive-color)
}

.stuff-hamburger-menu .hamburger-auth-container {
  margin-top: var(--spacing-32)
}

@media screen and (min-width: 768px) {
  .stuff-hamburger-menu {
    --width: 376px
  }
}

@media screen and (min-width: 1024px) {
  .stuff-hamburger-menu {
    --width: 401px
  }
}

.stuff-app-header-container {
  --stuff-header-container-padding: var(--spacing-4) var(--spacing-4)
}

@media screen and (min-width: 768px) {
  .stuff-app-header-container {
    --stuff-header-container-padding: var(--spacing-4) var(--spacing-8)
  }
}

@media screen and (min-width: 1024px) {
  .stuff-app-header-container {
    --stuff-header-container-padding: var(--spacing-8) var(--spacing-24)
  }
}

.stuff-app-header-bar {
  align-items: center;
  background-color: var(--stuff-header-surface-color);
  border-top: 5px solid var(--stuff-header-splash-color);
  color: var(--stuff-header-text-color);
  display: flex;
  font: var(--stuff-header-text-font);
  height: var(--header-height-global);
  justify-content: center;
  width: 100%;
  z-index: 20
}

.stuff-app-header-container {
  justify-content: space-between;
  max-width: var(--stuff-header-max-width);
  padding: var(--stuff-header-container-padding);
  width: 100%
}

.stuff-app-header-bar .stuff-header-inner-container,
.stuff-app-header-container {
  align-items: center;
  display: flex
}

.stuff-app-header-bar .left-container {
  flex: 1 0 0;
  justify-content: flex-start
}

.stuff-app-header-bar .stuff-header-go-back-btn {
  align-items: center;
  display: flex;
  height: 48px;
  padding: 0 var(--spacing-8);
  width: 48px
}

.stuff-app-header-bar .stuff-header-go-back-btn svg {
  fill: var(--stuff-header-text-color);
  height: 32px;
  width: 32px
}

.stuff-app-header-bar ion-menu-toggle {
  fill: var(--stuff-header-text-color);
  align-items: center;
  cursor: pointer;
  display: flex;
  height: inherit;
  justify-content: center;
  padding: var(--spacing-0) var(--spacing-8)
}

.stuff-app-header-bar ion-menu-toggle svg {
  height: var(--stuff-header-icon-size);
  width: var(--stuff-header-icon-size)
}

.stuff-app-header-bar ion-menu-toggle:active {
  fill: var(--stuff-header-text-color-active);
  color: var(--stuff-header-text-color-hover)
}

.stuff-app-header .centre-container {
  justify-content: center
}

.stuff-app-header-bar .section-title {
  --_section-title-font-size: var(--fs-13);
  --font-wide-bold: var(--fw-700) var(--_section-title-font-size) /var(--lh-100) var(--ff-sans-wide);
  font: var(--font-wide-bold);
  letter-spacing: 1.85px;
  margin: 0;
  text-align: center;
  width: auto
}

.stuff-app-header-bar .right-container {
  flex: 1 0 0;
  justify-content: flex-end
}

.stuff-app-header-bar button.stuff-button {
  align-self: flex-end
}

.stuff-app-header-bar .stuff-avatar-button {
  --stuff-button-border-type: solid;
  --stuff-button-font-family: var(--ion-font-family-sans);
  --stuff-button-font-size: var(--font-size-13);
  --stuff-button-icon-width: var(--button-md-icon-size);
  --stuff-button-icon-height: var(--button-md-icon-size);
  --stuff-button-margin: var(--spacing-8);
  align-self: center
}

.native .native-text-zoom-s .stuff-app-header-bar .section-title,
.native .native-text-zoom-s .stuff-app-header-bar .stuff-avatar-button {
  font-size: var(--fs-accessibility-13)
}

.native .native-text-zoom-s .stuff-app-header-bar .stuff-login-button {
  font-size: var(--fs-accessibility-8)
}

.native .native-text-zoom-m .stuff-app-header-bar .section-title,
.native .native-text-zoom-m .stuff-app-header-bar .stuff-avatar-button {
  font-size: var(--fs-accessibility-12)
}

.native .native-text-zoom-m .stuff-app-header-bar .stuff-login-button {
  font-size: var(--fs-accessibility-8)
}

.native .native-text-zoom-l .stuff-app-header-bar .section-title,
.native .native-text-zoom-l .stuff-app-header-bar .stuff-avatar-button {
  font-size: var(--fs-accessibility-10)
}

.native .native-text-zoom-l .stuff-app-header-bar .stuff-login-button,
.native .native-text-zoom-xl .stuff-app-header-bar .stuff-login-button {
  font-size: var(--fs-accessibility-6)
}

.native .native-text-zoom-xl .stuff-app-header-bar .section-title,
.native .native-text-zoom-xl .stuff-app-header-bar .stuff-avatar-button {
  font-size: var(--fs-accessibility-9)
}

.stuff-logo {
  --stuff-logo-color: var(--clr-logo);
  --stuff-logo-hover-color: var(--clr-logo-hover);
  --stuff-logo-padding: var(--stuff-spacing-3) var(--stuff-spacing-4);
  --stuff-logo-width: 79px;
  --stuff-logo-height: 27px
}

.stuff-logo a {
  display: flex;
  padding: var(--stuff-logo-padding)
}

.fa-bars-staggered:before,
.fa-reorder:before,
.fa-stream:before {
  font-size: 30px;
}

.logo-svg1 {
  width: auto;
}

.stuff-logo .logo-svg {
  background-color: var(--stuff-logo-color);
  height: var(--stuff-logo-height);
  -webkit-mask-image: url(../index/stuff-logo.svg);
  mask-image: url(../index/stuff-logo.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  width: var(--stuff-logo-width)
}

.stuff-logo a:active .logo-svg,
.stuff-logo a:hover .logo-svg {
  background-color: var(--stuff-logo-hover-color)
}

:root {
  --stuff-inview-header-upper-bar-height: 5px;
  --stuff-inview-header-bar-and-gap-height: calc(var(--stuff-inview-header-upper-bar-height) + var(--spacing-4))
}

.stuff-web-header-bar {
  --stuff-header-container-padding: var(--spacing-0) var(--spacing-12) var(--spacing-0) var(--spacing-4);
  --stuff-header-text-font: var(--fw-600) var(--fs-12) /1.35 var(--ff-sans);
  --stuff-top-nav-bar-box-shadow-offset: 33px;
  --inview-header-bar-border: var(--stuff-inview-header-upper-bar-height) solid var(--stuff-header-splash-color)
}

@media screen and (min-width: 576px) {
  .stuff-web-header-bar {
    --stuff-header-container-padding: var(--spacing-6) var(--spacing-12) var(--spacing-0) var(--spacing-4)
  }

  .sticky .stuff-web-header-container {
    --stuff-header-container-padding: var(--spacing-4) var(--spacing-12) var(--spacing-4) var(--spacing-4)
  }
}

@media screen and (min-width: 768px) {
  .stuff-web-header-bar {
    --stuff-header-container-padding: var(--spacing-6) var(--spacing-16) var(--spacing-4) var(--spacing-8)
  }

  .sticky .stuff-web-header-container {
    --stuff-header-container-padding: var(--spacing-4) var(--spacing-16) var(--spacing-4) var(--spacing-8)
  }
}

@media screen and (min-width: 1024px) {
  .stuff-web-header-bar {
    --stuff-header-container-padding: var(--spacing-6) var(--spacing-32) var(--spacing-4) var(--spacing-24)
  }

  .sticky .stuff-web-header-container {
    --stuff-header-container-padding: var(--spacing-4) var(--spacing-32) var(--spacing-4) var(--spacing-24)
  }
}

.stuff-web-header-bar {
  align-items: center;
  background-color: var(--stuff-header-surface-color);
  color: var(--stuff-header-text-color);
  display: flex;
  flex-wrap: wrap;
  font: var(--stuff-header-text-font);
  height: calc(var(--header-height-global) + var(--stuff-top-nav-bar-height) + var(--stuff-inview-header-bar-and-gap-height));
  justify-content: center;
  width: 100%
}

.stuff-web-header-bar div,
.stuff-web-header-bar span {
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

@keyframes stickyChange {
  0% {
    position: static
  }

  to {
    position: fixed
  }
}

.stuff-web-header-bar.sticky {
  --_stuff-header-additional-info-display: none;
  --stuff-top-nav-bar-height: 0px;
  animation-delay: .3s;
  animation-duration: 0s;
  animation-fill-mode: backwards;
  animation-iteration-count: 1;
  animation-name: stickyChange;
  animation-timing-function: unset;
  height: calc(var(--header-height-global) + var(--stuff-top-nav-bar-height) + var(--stuff-inview-header-upper-bar-height));
  left: 0;
  position: fixed;
  right: 0;
  top: calc(var(--header-height-global)*-1);
  z-index: 20
}

.stuff-web-header-bar.headerInview {
  --_stuff-header-additional-info-display: none;
  border-top: var(--inview-header-bar-border);
  box-shadow: var(--stuff-header-box-shadow);
  top: 0;
  transform: translate(0);
  transition: all .3s .3s;
  transition-timing-function: ease
}

.stuff-web-header-bar.headerInview.upScrolled {
  box-shadow: 0 var(--stuff-top-nav-bar-box-shadow-offset) 15px 0 #000
}

.stuff-web-header-bar .stuff-web-header-container {
  align-items: stretch;
  display: flex;
  height: var(--header-height-global);
  justify-content: space-between;
  max-width: var(--stuff-header-max-width);
  padding: var(--stuff-header-container-padding);
  width: 100%
}

.stuff-web-header-bar .stuff-header-inner-container {
  display: flex;
  flex-direction: column;
  justify-content: center
}

.stuff-web-header-container .stuff-header-button-container {
  display: flex;
  gap: var(--spacing-8);
  justify-content: flex-end
}

.stuff-web-header-bar .left-container {
  align-items: flex-start;
  flex: 1 0 0
}

.stuff-web-header-bar ion-menu-toggle {
  fill: var(--stuff-header-text-color);
  align-items: center;
  cursor: pointer;
  display: flex;
  height: var(--measure-tap-area-minimum-taparea);
  justify-content: center;
  padding: var(--spacing-0) var(--spacing-8)
}

.stuff-web-header-bar ion-menu-toggle svg {
  height: var(--stuff-header-icon-size);
  width: var(--stuff-header-icon-size)
}

.stuff-web-header-bar .stuff-header-date-time {
  padding-left: var(--spacing-8)
}

.stuff-web-header-bar ion-menu-toggle:active,
.stuff-web-header-bar ion-menu-toggle:hover {
  fill: var(--stuff-header-text-color-hover);
  color: var(--stuff-header-text-color-hover)
}

.stuff-web-header-bar .right-container {
  flex: 1 0 0;
  gap: var(--spacing-8);
  justify-content: flex-start
}

.sticky .right-container {
  justify-content: center
}

.stuff-web-header-bar.headerInview,
.stuff-web-header-bar.sticky {
  --header-height-global: var(--header-shrink-height-global)
}

.stuff-web-header-bar .greeting-text {
  align-self: flex-end;
  display: var(--_stuff-header-additional-info-display)
}

.stuff-web-header-bar .stuff-button {
  align-self: center
}

.stuff-web-header-bar .stuff-avatar-button {
  --stuff-button-border-type: solid;
  --stuff-button-font-family: var(--ion-font-family-sans);
  --stuff-button-font-size: var(--font-size-13);
  --stuff-button-icon-width: var(--button-md-icon-size);
  --stuff-button-icon-height: var(--button-md-icon-size);
  --stuff-button-margin: var(--spacing-8);
  align-self: flex-end
}

.stuff-web-header-bar .stuff-logo a:focus,
.stuff-web-header-bar ion-menu-toggle svg:focus {
  outline: none
}

.stuff-web-header-bar .stuff-logo a:focus-visible,
.stuff-web-header-bar ion-menu-toggle:focus-visible {
  outline: var(--stuff-header-item-focus-outline)
}

@media screen and (min-width: 576px) {
  .stuff-web-header-bar .stuff-logo {
    --stuff-logo-width: 104px;
    --stuff-logo-height: 36px
  }

  .stuff-web-header-bar {
    --stuff-top-nav-bar-box-shadow-offset: 42px
  }

  .stuff-web-header-bar.headerInview .stuff-logo,
  .stuff-web-header-bar.sticky .stuff-logo {
    --stuff-logo-width: 79px;
    --stuff-logo-height: 27px
  }
}

@media screen and (min-width: 768px) {
  .stuff-web-header-bar .stuff-logo {
    --stuff-logo-width: 130px;
    --stuff-logo-height: 45px
  }
}

@media screen and (min-width: 1024px) {
  .stuff-header-supporter-button {
    display: flex
  }
}

.stuff-oli-ad-container {
  --_stuff-oli-ads-surface-color: var(--clr-primary);
  --_stuff-oli-ads-active-surface-color: var(--clr-neutral-black-translucent-95);
  --_stuff-oli-ads-logo-color: var(--clr-neutral-white);
  --_stuff-oli-ads-logo-spacing: var(--stuff-spacing-32);
  --_stuff-oli-ads-logo-width: var(--stuff-spacing-64);
  --_stuff-oli-ads-logo-height: var(--stuff-spacing-24);
  --_stuff-oli-ads-close-btn-width: var(--stuff-spacing-48);
  --_stuff-oli-ads-close-btn-height: var(--stuff-spacing-48);
  --_stuff-oli-ads-close-btn-text-display: none;
  --_stuff-oli-ads-close-btn-top-position: -48px;
  --_stuff-oli-ads-close-btn-text-color: var(--clr-neutral-white);
  --_stuff-oli-ads-close-btn-icon-size: var(--stuff-spacing-24);
  --_stuff-oli-ads-container-surface-color: var(--clr-neutral-white);
  --_stuff-oli-ads-container-min-size: 200px;
  --_stuff-oli-ads-loader-size: var(--stuff-loader-size);
  align-items: center;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: var(--z-index-950)
}

.stuff-oli-ad-container:not(.active) {
  display: none
}

@media screen and (min-width: 768px) {
  .stuff-oli-ad-container {
    --_stuff-oli-ads-logo-spacing: var(--stuff-spacing-32)
  }
}

@media screen and (min-width: 1024px) {
  .stuff-oli-ad-container {
    --_stuff-oli-ads-logo-spacing: var(--stuff-spacing-48)
  }
}

@media screen and (min-width: 1200px) {
  .stuff-oli-ad-container {
    --_stuff-oli-ads-close-btn-width: auto;
    --_stuff-oli-ads-close-btn-height: var(--stuff-spacing-24);
    --_stuff-oli-ads-close-btn-text-display: inline-block;
    --_stuff-oli-ads-close-btn-top-position: calc(var(--spacing-24)*-1);
    --_stuff-oli-ads-close-btn-icon-size: var(--stuff-spacing-8)
  }
}

.stuff-oli-ad-container.active {
  background-color: var(--_stuff-oli-ads-active-surface-color)
}

.stuff-oli-ad-container .stuff-logo {
  bottom: var(--_stuff-oli-ads-logo-spacing);
  display: none;
  margin: auto;
  position: fixed
}

.stuff-oli-ad-close-btn {
  background-color: var(--_stuff-oli-ads-surface-color);
  color: var(--_stuff-oli-ads-logo-color);
  display: none;
  height: var(--_stuff-oli-ads-close-btn-height);
  padding: var(--stuff-spacing-4) var(--stuff-spacing-8);
  position: absolute;
  right: 0;
  top: var(--_stuff-oli-ads-close-btn-top-position);
  width: var(--_stuff-oli-ads-close-btn-width)
}

.stuff-oli-ad-close-btn * {
  fill: var(--_stuff-oli-ads-close-btn-text-color);
  color: var(--_stuff-oli-ads-close-btn-text-color)
}

.stuff-oli-ad-container.active .stuff-logo .logo-svg {
  background-color: var(--_stuff-oli-ads-logo-color);
  height: var(--_stuff-oli-ads-logo-height);
  width: var(--_stuff-oli-ads-logo-width)
}

.stuff-oli-ad-container.active .stuff-logo {
  display: block
}

.stuff-oli-ad-container.active .stuff-oli-ad-close-btn {
  align-items: center;
  display: flex;
  gap: var(--stuff-spacing-8);
  justify-content: center
}

.stuff-oli-ad-container.active .stuff-oli-ad-close-btn span {
  display: var(--_stuff-oli-ads-close-btn-text-display)
}

.stuff-oli-ad-container.active .stuff-oli-ad-close-btn svg {
  height: var(--_stuff-oli-ads-close-btn-icon-size);
  width: var(--_stuff-oli-ads-close-btn-icon-size)
}

.stuff-oli-ad-container.active .ad-loading {
  display: none
}

.stuff-oli-ad-container .ad-loading {
  width: var(--_stuff-oli-ads-loader-size)
}

.stuff-oli-ad-container .ad-container {
  background-color: transparent
}

.stuff-oli-ad-container.active .ad-container {
  all: unset;
  background-color: var(--_stuff-oli-ads-container-surface-color);
  height: var(--_stuff-oli-ads-container-min-size);
  min-width: var(--_stuff-oli-ads-container-min-size)
}

.stuff-oli-ad-wrapper {
  position: relative
}

.oli-ad-container {
  background-color: transparent
}

:root {
  --stuff-piano-home-page-banner-height: 17rem;
  --stuff-piano-home-page-banner-bottom: 0.75rem;
  --stuff-piano-home-page-banner-animation-bottom: calc((var(--stuff-piano-home-page-banner-height) + var(--stuff-piano-home-page-banner-bottom))*-1);
  --stuff-piano-home-page-banner-margin-inline: 0.75rem
}

#piano-homepage-bottom-rego,
#piano-homepage-bottom-supporter {
  --support-animation-curve: forwards cubic-bezier(0.3, 0.15, 0.07, 1.01);
  --piano-animation: slide-in-mobile 0.5s var(--support-animation-curve);
  --piano-animation-delay: 1s;
  --piano-left: 0;
  --piano-visibility: hidden;
  --_piano-z-index: calc(var(--header-z-index-global) + 1);
  z-index: var(--_piano-z-index)
}

.native.ios #piano-homepage-bottom-rego,
.native.ios #piano-homepage-bottom-supporter {
  margin-bottom: 1rem
}

#piano-homepage-bottom-rego,
#piano-homepage-bottom-supporter {
  animation: var(--piano-animation);
  animation-delay: var(--piano-animation-delay);
  left: var(--piano-left);
  margin-inline: var(--stuff-piano-home-page-banner-margin-inline);
  position: fixed;
  right: 0;
  visibility: var(--piano-visibility)
}

@keyframes slide-in-mobile {
  0% {
    bottom: var(--stuff-piano-home-page-banner-animation-bottom);
    visibility: visible
  }

  to {
    bottom: var(--stuff-piano-home-page-banner-bottom);
    visibility: visible
  }
}

#piano-homepage-bottom-rego.close,
#piano-homepage-bottom-supporter.close {
  --piano-animation: slide-out-mobile 0.6s var(--support-animation-curve);
  --piano-visibility: visible;
  --piano-animation-delay: unset
}

@keyframes slide-out-mobile {
  0% {
    bottom: var(--stuff-piano-home-page-banner-bottom)
  }

  to {
    bottom: var(--stuff-piano-home-page-banner-animation-bottom)
  }
}

@media screen and (min-width: 576px) {
  :root {
    --stuff-piano-home-page-banner-bottom: 0.875rem
  }
}

@media screen and (min-width: 768px) {
  :root {
    --stuff-piano-home-page-banner-bottom: 1rem;
    --stuff-piano-home-page-banner-margin-inline: 0;
    --stuff-piano-home-page-banner-right: 1rem;
    --stuff-piano-home-page-banner-width: 25rem;
    --stuff-piano-home-page-banner-animation-right: calc((var(--stuff-piano-home-page-banner-width) + var(--stuff-piano-home-page-banner-right))*-1)
  }

  #piano-homepage-bottom-rego,
  #piano-homepage-bottom-supporter {
    --piano-left: auto;
    --piano-animation: slide-in-desktop 0.6s var(--support-animation-curve);
    bottom: var(--stuff-piano-home-page-banner-bottom);
    left: var(--piano-left);
    right: var(--stuff-piano-home-page-banner-animation-right);
    width: var(--stuff-piano-home-page-banner-width)
  }

  @keyframes slide-in-desktop {
    0% {
      right: var(--stuff-piano-home-page-banner-animation-right);
      visibility: visible
    }

    to {
      right: var(--stuff-piano-home-page-banner-right);
      visibility: visible
    }
  }

  #piano-homepage-bottom-rego.close,
  #piano-homepage-bottom-supporter.close {
    --piano-animation: slide-out-desktop 0.6s var(--support-animation-curve) !important
  }

  @keyframes slide-out-desktop {
    0% {
      right: var(--stuff-piano-home-page-banner-right)
    }

    to {
      right: var(--stuff-piano-home-page-banner-animation-right)
    }
  }
}

@media screen and (min-width: 1024px) {
  :root {
    --stuff-piano-home-page-banner-bottom: 1.5rem;
    --stuff-piano-home-page-banner-right: 1.5rem
  }
}

.storifyme-widget {
  --_surface-color: var(--clr-brand-yellow);
  --_title-font: var(--fw-700) 2.5rem /var(--lh-120) var(--ff-sans-wide);
  --_title-font-color: var(--clr-brand-yellow);
  --_title-surface-color: var(--clr-primary);
  --_container-padding: 12px;
  --_container-gap: 12px
}

.article.storifyme-widget {
  background-color: var(--_surface-color)
}

.article.storifyme-widget .container {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: var(--_container-gap);
  margin: 0 auto;
  max-width: var(--break-point-1440);
  padding: var(--_container-padding)
}

.article.storifyme-widget .title {
  background: var(--_title-surface-color);
  color: var(--_title-font-color);
  font: var(--_title-font);
  padding: 4px 16px;
  text-transform: uppercase
}

.landing.storifyme-widget .container {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 18px
}

@media screen and (min-width: 768px) {
  .storifyme-widget {
    --_container-padding: 16px;
    --_container-gap: 16px
  }
}

@media screen and (min-width: 1024px) {
  .storifyme-widget {
    --_container-padding: 32px;
    --_container-gap: 24px
  }
}

.stuff-timestamp {
  --stuff-timestamp-order: initial;
  --stuff-timestamp-text-color: var(--story-card-label-text-color);
  color: var(--stuff-timestamp-text-color);
  font-family: var(--stuff-functional-small-text-font-family);
  font-size: var(--stuff-functional-small-text-font-size);
  font-weight: var(--stuff-font-weight-normal);
  line-height: var(--stuff-functional-small-text-line-height);
  order: var(--stuff-timestamp-order)
}

:root {
  --stuff-story-card-container-gap-global: 12px;
  --stuff-story-card-body-gap-global: 8px;
  --story-card-gradient-top-color: #220043;
  --story-card-gradient-bottom-color: #09000f;
  --corner-radius-default: 8px
}

.story-card {
  --story-card-list-number-color: var(--clr-primary);
  --story-card-surface: transparent;
  --story-card-text-visited-color: var(--clr-link-text-primary-visited);
  --story-card-text-hover-color: var(--clr-primary-text);
  --story-card-text-active-color: var(--clr-primary-text);
  --story-card-focus-visible-outline: 2px dashed var(--clr-link-text-primary-border-focused);
  --story-card-label-text-color: var(--gray-550);
  --story-card-label-surface-color: var(--gray-100);
  --elements-video-card-padding: 12px;
  --_image-row-gap: 16px;
  --story-card-image-width: 5rem;
  --story-card-image-height: 5rem;
  --_container-gap: var(--stuff-story-card-container-gap-global);
  color: inherit;
  width: 100%
}

.story-card .surface {
  background: var(--story-card-surface);
  overflow: hidden
}

.story-card :is(.surface, .content-link) {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--_container-gap);
  text-decoration: none
}

.story-card .stuff-text-heading {
  --stuff-text-heading-font-weight: var(--fw-400);
  --stuff-text-heading-line-height: var(--lh-130);
  --stuff-text-heading-font-family: var(--ff-fjalla-one)
}

.story-card .heading-prefix {
  color: var(--stuff-text-heading-prefix-color)
}

.story-card:is(.new-senary, .new-text) .stuff-text-heading {
  --stuff-text-heading-font-size: var(--fs-16)
}

.story-card:is(.new-quaternary, .new-quinary, .new-quinary-square, .new-quinary-text) .stuff-text-heading {
  --stuff-text-heading-font-size: var(--fs-18)
}

.story-card:is(.new-tertiary-text, .new-tertiary-square, .new-tertiary) .stuff-text-heading {
  --stuff-text-heading-font-size: var(--fs-20)
}

.story-card:is(.tertiary-square, .tertiary-wide, .new-secondary, .new-secondary-square) .stuff-text-heading {
  --stuff-text-heading-font-size: var(--fs-22)
}

.story-card:is(.secondary, .secondary-square) .stuff-text-heading {
  --stuff-text-heading-font-size: var(--fs-24)
}

.story-card.new-lead .stuff-text-heading {
  --stuff-text-heading-font-size: var(--fs-26)
}

.story-card.lead .stuff-text-heading {
  --stuff-text-heading-font-size: var(--fs-32)
}

.story-card.text :is(.heading-text, .stuff-text-heading) {
  --stuff-text-heading-font-size: var(--fs-18);
  --stuff-text-heading-line-height: var(--lh-140);
  --stuff-text-heading-font-family: var(--ff-sans)
}

.story-card-link:visited .stuff-text-heading {
  color: var(--story-card-text-visited-color)
}

.story-card-link:hover .stuff-text-heading {
  color: var(--story-card-text-hover-color)
}

.story-card-link:active .stuff-text-heading {
  color: var(--story-card-text-active-color)
}

.story-card-link:focus-visible {
  outline: var(--story-card-focus-visible-outline)
}

.story-card.secondary :is(.sf-story-image-container, img) {
  align-self: stretch;
  display: flex;
  flex-direction: column
}

.story-card.tertiary-wide {
  --story-card-image-width: 7rem;
  --story-card-image-height: initial
}

.story-card.tertiary-wide :is(.surface, .content-link) {
  --_container-gap: var(--_image-row-gap);
  flex-direction: row
}

.story-card.tertiary-square :is(.surface, .content-link) {
  --_container-gap: var(--_image-row-gap);
  flex-direction: row-reverse;
  justify-content: space-between;
  width: 100%
}

.story-card:is(.tertiary-square, .tertiary-wide) .sf-story-image-container {
  align-items: flex-start;
  display: flex;
  min-width: var(--story-card-image-width);
  padding: 4px 0 8px;
  width: var(--story-card-image-width)
}

.story-card.tertiary-square .sf-story-image-container {
  float: right;
  margin-left: var(--_image-row-gap)
}

.story-card:is(.tertiary-square, .tertiary-wide) img {
  display: inline-block;
  flex: 1 0 0;
  min-height: var(--story-card-image-height);
  min-width: var(--story-card-image-width);
  -o-object-fit: cover;
  object-fit: cover
}

.card-body {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--stuff-story-card-body-gap-global);
  padding: 0
}

.story-card.text.ordered-list .card-body {
  --_number-text-gap: 16px;
  align-items: center;
  flex-direction: row;
  gap: var(--_number-text-gap)
}

.card-body .heading-text {
  display: inline;
  -webkit-hyphens: manual;
  hyphens: manual;
  margin-right: .5rem
}

.story-card.text :is(.sf-story-image-container, .stuff-intro-text-body) {
  display: none
}

.story-card.text .list-number {
  color: var(--story-card-list-number-color);
  font: var(--fw-700) var(--fs-40) /var(--lh-100) var(--ff-sans-condensed)
}

.story-card[class*=new-] .stuff-intro-text-body {
  display: none
}

.story-card[class*=new-] .sf-story-image-container,
.story-card[class*=new-] .sf-story-image-container img {
  min-width: 100%
}

.story-card:is(.new-lead, .new-secondary-square, .new-secondary) .stuff-intro-text-body {
  display: block
}

.story-card.new-tertiary-square {
  --story-card-image-width: 226px;
  --story-card-image-height: 226px
}

.story-card.new-tertiary {
  --story-card-image-width: 185px;
  --story-card-image-height: inherit
}

.story-card:is(.new-tertiary, .new-tertiary-square) .sf-story-image-container {
  min-height: var(--story-card-image-height);
  min-width: var(--story-card-image-width)
}

.story-card:is(.new-senary, .new-quinary-square, .new-quinary) :is(.surface, .content-link) {
  --_container-gap: var(--_image-row-gap);
  align-items: center;
  flex-direction: row
}

.story-card:is(.new-senary, .new-quinary-square, .new-quinary) .stuff-timestamp {
  display: none
}

.story-card:is(.new-senary, .new-quinary-square, .new-quinary) .card-body {
  justify-content: center
}

.story-card.new-quinary {
  --story-card-image-width: 208px;
  --story-card-image-height: initial
}

.story-card:is(.new-senary, .new-quinary-square) {
  --story-card-image-width: 110px;
  --story-card-image-height: 110px
}

.story-card:is(.new-senary, .new-quinary-square, .new-quinary) .sf-story-image-container {
  display: flex;
  height: var(--story-card-image-height);
  min-width: var(--story-card-image-width);
  width: var(--story-card-image-width)
}

.story-card:is(.new-senary, .new-quinary-square, .new-quinary) img {
  display: inline-block;
  flex: 1 0 0;
  height: var(--story-card-image-height);
  min-width: var(--story-card-image-width);
  -o-object-fit: cover;
  object-fit: cover;
  width: var(--story-card-image-width)
}

.story-card:is(.new-tertiary-text, .new-quinary-text, .new-text) .sf-story-image-container {
  display: none
}

@media screen and (min-width: 576px) {
  .story-card {
    --story-card-image-width: 8rem;
    --story-card-image-height: 8rem
  }

  .story-card.tertiary-wide {
    --story-card-image-width: 10rem;
    --story-card-image-height: initial
  }
}

@media screen and (min-width: 768px) {
  .story-card.new-lead .stuff-text-heading {
    --stuff-text-heading-font-size: var(--fs-26)
  }

  .story-card:is(.new-secondary, .new-secondary-square) .stuff-text-heading {
    --stuff-text-heading-font-size: var(--fs-24)
  }
}

@media screen and (min-width: 1024px) {
  .story-card {
    --_image-row-gap: 24px
  }

  .story-card.new-lead .stuff-text-heading {
    --stuff-text-heading-font-size: var(--fs-34)
  }

  .text.ordered-list .card-body {
    --_number-text-gap: 24px
  }

  .story-card.new-tertiary {
    --story-card-image-width: 169px;
    --story-card-image-height: inherit
  }
}

@media screen and (min-width: 1200px) {
  .story-card.new-tertiary-square {
    --story-card-image-width: 166px;
    --story-card-image-height: 166px
  }

  .story-card.new-lead {
    --story-card-image-width: 382px;
    --story-card-image-height: inherit
  }

  .story-card.new-lead .sf-story-image-container {
    height: var(--story-card-image-height);
    min-width: var(--story-card-image-width);
    width: 100%
  }
}

@media screen and (min-width: 1440px) {
  .story-card.new-tertiary-square {
    --story-card-image-width: 226px;
    --story-card-image-height: 226px
  }

  .story-card.new-lead {
    --story-card-image-width: 503px;
    --story-card-image-height: inherit
  }
}

.story-card.video {
  --story-card-surface: linear-gradient(to bottom, var(--story-card-gradient-top-color) 5%, var(--story-card-gradient-bottom-color) 100%);
  --story-card-text-visited-color: var(--ion-color-primary-contrast);
  --stuff-text-heading-color: var(--ion-color-primary-contrast);
  --story-card-text-hover-color: var(--theme-colour-primary-medium);
  --stuff-text-heading-prefix-color: var(--theme-colour-primary-medium);
  --stuff-text-body-color: #fff;
  --mini-launcher-display: none;
  --_pad: var(--elements-video-card-padding);
  --_rad: var(--corner-radius-default)
}

.story-card.video .surface {
  border-radius: var(--_rad)
}

.story-card.top-to-bottom.video .surface {
  padding: var(--_pad) 0
}

.story-card.top-to-bottom.video .surface>* {
  padding: 0 var(--_pad)
}

.story-card:is(.left-to-right, .right-to-left).video .surface,
.story-card:is(.left-to-right, .right-to-left).video .surface>* {
  padding: 0
}

.story-card.left-to-right.video .surface .content-link {
  padding: var(--_pad) 0
}

.story-card.right-to-left.video .surface .content-link {
  padding: var(--_pad) 0 var(--_pad) var(--_pad)
}

.story-card.right-to-left.video :is(.surface, .content-link) {
  width: unset
}

.story-card.right-to-left .sf-story-image-container {
  float: none;
  margin: 0
}

.story-card:is(.left-to-right, .right-to-left).video .fake-player {
  border-radius: 0
}

.story-card:is(.left-to-right).video .card-body {
  padding-right: var(--elements-video-card-padding)
}

.story-card.video .video-info {
  display: none
}

.stuff-frame-container.defcon-frame .story-card.lead.video .card-body {
  padding-left: 0
}

.story-card.video:is(.new-text, .text) {
  --mini-launcher-display: inherit
}

.stuff-new-latest-headlines-frame .story-card.video {
  --_pad: 0;
  --story-card-surface: transparent;
  --stuff-text-heading-color: var(--color-text-color-default);
  --stuff-text-heading-prefix-color: var(--color-text-color-default);
  --story-card-text-visited-color: var(--color-text-color-default);
  --story-card-text-hover-color: var(--clr-primary-text)
}

.stuff-label {
  --stuff-label-order: initial;
  align-items: flex-start;
  background: var(--story-card-label-surface-color);
  color: var(--story-card-label-text-color);
  display: flex;
  font-family: var(--stuff-functional-small-text-font-family);
  font-size: var(--stuff-functional-small-text-font-size);
  font-weight: var(--stuff-font-weight-medium);
  justify-content: space-between;
  line-height: var(--stuff-functional-small-text-line-height);
  max-width: -moz-fit-content;
  max-width: fit-content;
  mix-blend-mode: multiply;
  order: var(--stuff-label-order);
  padding: var(--stuff-measure-label-label-padding-y) var(--stuff-measure-label-label-padding-x);
  text-transform: uppercase
}

.stuff-label.inline {
  display: inline-flex
}

.stuff-video-body .stuff-text-heading {
  --stuff-text-heading-font-family: var(--ff-fjalla-one);
  --stuff-text-heading-font-size: 12px;
  --_font-size: 36px;
  --stuff-text-heading-color: var(--ion-color-primary-contrast);
  --stuff-text-heading-font-size: var(--_font-size);
  --stuff-text-heading-font-weight: var(--fw-400);
  --stuff-text-heading-line-height: 125%;
  --stuff-text-heading-prefix-color: var(--theme-colour-primary-medium);
  color: var(--stuff-text-heading-color)
}

.stuff-video-body .stuff-text-heading .heading-prefix {
  color: var(--stuff-text-heading-prefix-color)
}

@media screen and (min-width: 1200px) {
  .stuff-video-body .stuff-text-heading {
    --_font-size: 62px
  }
}

.stuff-app-update-popup .dismiss-button {
  --stuff-button-background-color: var(--dismiss-button-surface-color);
  --stuff-button-font: var(--dismiss-button-font);
  --stuff-button-text-color: var(--dismiss-button-text-color);
  --stuff-button-border: var(--dismiss-button-border);
  --stuff-button-border-radius: var(--dismiss-button-border-radius);
  --stuff-button-text-letter-spacing: var(--dismiss-button-text-letter-spacing);
  -webkit-text-decoration: var(--dismiss-button-text-decoration);
  text-decoration: var(--dismiss-button-text-decoration);
  text-transform: var(--dismiss-button-text-transform)
}

.stuff-app-update-popup .popup-message {
  align-self: stretch;
  color: var(--app-update-popup-text-color);
  font: var(--app-update-popup-message-font);
  text-align: var(--app-update-popup-message-text-algin)
}

.stuff-app-update-popup .popup-message span {
  display: var(--app-update-popup-message-display)
}

.stuff-app-update-popup .popup-title {
  color: var(--app-update-popup-text-color);
  font: var(--app-update-popup-title-font);
  letter-spacing: var(--app-update-popup-title-letter-spacing);
  text-transform: var(--app-update-popup-title-text-transform)
}

.stuff-app-update-popup .text-container {
  align-items: var(--app-update-popup-text-container-horizontal-position);
  display: flex;
  flex-direction: column;
  gap: var(--app-update-popup-text-container-gap)
}

.stuff-app-update-popup .stuff-button.update-now-button {
  --_text-letter-spacing: 2px;
  --stuff-button-border-radius: 8px;
  --stuff-button-background-color: var(--update-now-button-surface-color);
  --stuff-button-gap: 8px;
  --stuff-button-text-color: var(--update-now-button-text-color);
  --stuff-button-text-letter-spacing: var(--_text-letter-spacing);
  --stuff-button-font: var(--update-now-button-font);
  --stuff-button-icon-width: var(--update-now-button-icon-width);
  --stuff-button-icon-height: var(--update-now-button-icon-height);
  --stuff-button-background-color-active: var(--update-now-button-surface-color);
  --stuff-button-background-color-hover: var(--update-now-button-surface-color);
  text-transform: uppercase;
  width: var(--update-now-button-width)
}

.stuff-app-update-popup .stuff-button.update-now-button svg {
  display: var(--update-now-button-icon-display);
  order: 2
}

.stuff-app-update-popup.full-screen {
  --app-update-popup-surface-color: var(--color-brand-dark-green-100-dark-green-default);
  --app-update-popup-height: 100vh;
  --app-update-popup-text-color: var(--text-color-reverse);
  --app-update-popup-border-top: var(--header-decorative-bar-height-global) solid var(--colors-elements-header-footer-headerfooter-splash-colour);
  --app-update-popup-container-max-width: 300px;
  --app-update-popup-container-gap: 24px;
  --app-update-popup-container-margin: auto;
  --app-update-popup-text-container-gap: 8px;
  --app-update-popup-text-container-horizontal-position: center;
  --app-update-popup-title-font: var(--fw-700) var(--fs-16) /normal var(--ff-sans-wide);
  --app-update-popup-title-text-transform: uppercase;
  --app-update-popup-title-letter-spacing: 2px;
  --app-update-popup-message-font: var(--fw-base) var(--fs-16) /var(--lh-150) var(--ff-sans);
  --app-update-popup-message-text-algin: center;
  --app-update-popup-message-display: block;
  --update-now-button-width: 100%;
  --update-now-button-icon-width: 12px;
  --update-now-button-icon-height: 12px;
  --update-now-button-icon-display: initial;
  --update-now-button-surface-color: var(--colors-elements-button-button1-bg);
  --update-now-button-font: var(--fw-600) var(--fs-10) /var(--lh-140) var(--ff-sans);
  --update-now-button-text-color: var(--colors-elements-button-button1-text);
  --dismiss-button-surface-color: transparent;
  --dismiss-button-font: var(--fw-base) var(--fs-12) /var(--lh-140) var(--ff-sans);
  --dismiss-button-text-color: var(--text-color-reverse);
  --dismiss-button-text-decoration: underline
}

.stuff-app-update-popup.full-screen .popup-icon {
  --icon-width: 210px;
  --icon-height: 178px
}

@media only screen and (min-width: 1200px) {
  .stuff-app-update-popup.full-screen {
    --app-update-popup-container-max-width: 600px;
    --update-now-button-width: initial
  }
}

.stuff-app-update-popup.system-messaging .icon-title-container {
  --_icon-title-container-gap: 8px;
  align-items: center;
  display: flex;
  gap: var(--_icon-title-container-gap)
}

.stuff-app-update-popup.system-messaging .button-container {
  --_button-container-gap: 8px;
  display: flex;
  gap: var(--_button-container-gap)
}

.stuff-app-update-popup .text-button-container {
  --_text-button-container-gap: 12px;
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: var(--_text-button-container-gap)
}

.stuff-app-update-popup.system-messaging {
  --app-update-popup-surface-color: var(--system-message-green);
  --app-update-popup-border-top: none;
  --app-update-popup-container-gap: 12px;
  --app-update-popup-container-padding: 16px 12px;
  --app-update-popup-container-horizontal-position: flex-start;
  --app-update-popup-text-color: var(--text-color-default);
  --app-update-popup-title-font: var(--fw-600) var(--fs-16) /var(--lh-140) var(--ff-sans);
  --app-update-popup-message-font: var(--fw-base) var(--fs-16) /var(--lh-140) var(--ff-sans);
  --update-now-button-icon-width: initial;
  --update-now-button-surface-color: var(--colors-elements-button-button2-bg);
  --update-now-button-font: var(--fw-600) var(--fs-10) /var(--lh-140) var(--ff-sans);
  --update-now-button-text-color: var(--colors-elements-button-button2-text);
  --update-now-button-icon-display: none;
  --dismiss-button-surface-color: transparent;
  --dismiss-button-font: var(--fw-600) var(--fs-10) /var(--lh-140) var(--ff-sans);
  --dismiss-button-text-color: var(--colors-elements-button-button2-secondary-text);
  --dismiss-button-text-letter-spacing: 2px;
  --dismiss-button-text-transform: uppercase;
  --dismiss-button-border: var(--colors-elements-button-button2-secondary-border);
  --dismiss-button-border-radius: 8px
}

.stuff-app-update-popup.system-messaging .popup-icon {
  --icon-width: 20px;
  --icon-height: 20px
}

@media only screen and (min-width: 768px) {
  .stuff-app-update-popup.system-messaging {
    --app-update-container-flex-direction: row;
    --app-update-popup-container-gap: 16px;
    --app-update-popup-container-padding: 16px;
    --text-container-horizontal-position: flex-start
  }

  .stuff-app-update-popup.system-messaging .popup-icon {
    --icon-width: 32px;
    --icon-height: 32px
  }
}

@media only screen and (min-width: 1024px) {
  .stuff-app-update-popup.system-messaging {
    --app-update-popup-container-padding: 24px 32px
  }
}

.stuff-app-update-popup {
  --app-update-popup-surface-color: initial;
  --app-update-popup-border-top: none;
  --app-update-popup-height: 100%;
  --app-update-popup-container-max-width: 100%;
  --app-update-popup-container-padding: 0px;
  --app-update-popup-container-margin: 0px;
  --app-update-popup-container-horizontal-position: center;
  --app-update-popup-container-gap: 0px;
  --app-update-container-flex-direction: column;
  background: var(--app-update-popup-surface-color);
  border-top: var(--app-update-popup-border-top);
  display: flex;
  height: var(--app-update-popup-height);
  min-height: var(--app-update-popup-height);
  width: 100%
}

.stuff-app-update-popup .container {
  align-items: var(--app-update-popup-container-horizontal-position);
  display: flex;
  flex-direction: var(--app-update-container-flex-direction);
  gap: var(--app-update-popup-container-gap);
  margin: var(--app-update-popup-container-margin);
  max-width: var(--app-update-popup-container-max-width);
  padding: var(--app-update-popup-container-padding)
}

.stuff-full-screen-popups {
  --stuff-page-overflow: hidden
}

.stuff-text-body {
  color: var(--stuff-text-body-color);
  font-family: var(--stuff-text-body-font-family);
  font-size: var(--stuff-text-body-font-size);
  font-style: var(--stuff-text-body-font-style);
  font-weight: var(--stuff-text-body-font-weight);
  line-height: var(--stuff-text-body-line-height);
  margin: 0;
  padding: 0
}

:root {
  --stuff-top-nav-bar-height: 33px
}

.stuff-top-nav-bar {
  --_text-color: var(--stuff-header-text-color);
  --_item-hover-color: var(--stuff-header-splash-color);
  --_item-active-color: var(--stuff-header-text-color);
  --_item-border-width: 5px;
  --_nav-bar-row-gap: 8px;
  --_item-wrapper-padding: var(--spacing-12) var(--spacing-4);
  --_item-wrapper-state-bottom-height: 2px;
  -ms-overflow-style: none;
  text-wrap: nowrap;
  align-items: center;
  background: var(--stuff-header-surface-color);
  display: flex;
  font: var(--fw-500) var(--fs-14) /var(--lh-105) var(--ff-sans);
  height: var(--stuff-top-nav-bar-height);
  overflow-x: scroll;
  overflow-y: hidden;
  padding: 0 var(--spacing-8);
  position: relative;
  scrollbar-width: none;
  white-space: nowrap;
  width: 100%;
  z-index: var(--header-z-index-global)
}

.sticky .stuff-top-nav-bar {
  --stuff-top-nav-bar-height: 0;
  transition: all .1s .1s
}

.sticky .stuff-top-nav-bar.visible {
  --stuff-top-nav-bar-height: 33px;
  transition: all .1s .1s
}

.stuff-top-nav-bar::-webkit-scrollbar {
  display: none
}

.stuff-top-nav-bar .stuff-row.top-nav-bar-container {
  --stuff-row-gap: var(--_nav-bar-row-gap);
  align-items: center;
  flex-direction: row;
  justify-content: center
}

.stuff-top-nav-bar .item-wrapper {
  align-items: center;
  display: flex;
  height: 100%;
  min-width: var(--measure-tap-area-minimum-taparea);
  padding: var(--spacing-12) var(--spacing-0);
  position: relative
}

.stuff-top-nav-bar a.top-nav-item {
  color: var(--_text-color);
  letter-spacing: 1px;
  padding: 0 var(--spacing-4);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 800;
}


.stuff-top-nav-bar a.top-nav-item:hover:after {
  background: var(--_item-hover-color)
}

.stuff-top-nav-bar .item-wrapper.active:after,
.stuff-top-nav-bar a.top-nav-item:active:after,
.stuff-top-nav-bar a.top-nav-item:hover:after {
  bottom: var(--_item-wrapper-state-bottom-height);
  content: "";
  display: block;
  height: var(--_item-border-width);
  left: 0;
  position: absolute;
  width: 100%
}

.stuff-top-nav-bar .item-wrapper.active:after,
.stuff-top-nav-bar a.top-nav-item:active:after {
  background: var(--_item-active-color)
}

.stuff-top-nav-bar a.top-nav-item:focus-visible {
  outline: var(--clr-primary) dashed 2px
}

.stuff-top-nav-bar .top-nav-bar-container .stuff-divider {
  --stuff-divider-width: 2px;
  --stuff-divider-height: 12px;
  --stuff-divider-background-color: var(--stuff-header-splash-color)
}

@media screen and (min-width: 576px) {
  .stuff-top-nav-bar {
    --stuff-top-nav-bar-height: 42px;
    --_nav-bar-row-gap: 6px;
    --_item-wrapper-padding: var(--spacing-16) var(--spacing-8)
  }

  .sticky .stuff-top-nav-bar.visible {
    --stuff-top-nav-bar-height: 42px
  }
}

@media screen and (min-width: 768px) {
  .stuff-top-nav-bar {
    --_item-wrapper-state-bottom-height: 0;
    z-index: unset
  }
}

:root {
  --stuff-user-dropdown-background-hover: var(--clr-primary-translucent-10);
  --stuff-user-dropdown-background-active: var(--clr-primary-translucent-10);
  --stuff-user-dropdown-border-color: var(--clr-neutral-100);
  --stuff-user-dropdown-border: var(--border-width-1) solid var(--stuff-user-dropdown-border-color);
  --stuff-user-dropdown-background: transparent;
  --stuff-user-dropdown-icon-fill: var(--gray-950)
}

ion-popover.stuff-user-dropdown {
  --offset-y: 0.7rem;
  --width: 19rem;
  z-index: 999999 !important
}

ion-popover.stuff-user-dropdown::part(content) {
  border: var(--stuff-user-dropdown-border);
  border-radius: 0;
  box-shadow: 0 0 var(--spacing-4) rgba(0, 0, 0, .3)
}

ion-popover.stuff-user-dropdown ion-list {
  border: none;
  padding: 0;
  position: relative
}

ion-list div.greeting .close-icon-container {
  cursor: pointer;
  height: 100%
}

ion-popover.stuff-user-dropdown div.greeting span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

ion-popover.stuff-user-dropdown div.greeting {
  align-items: center;
  border-bottom: var(--stuff-user-dropdown-border);
  display: flex;
  font-family: var(--ion-font-family-sans);
  padding: var(--spacing-16) var(--spacing-24)
}

ion-popover.stuff-user-dropdown div.greeting .close-icon-container {
  height: -moz-fit-content;
  height: fit-content;
  padding: var(--spacing-16);
  position: absolute;
  right: 0;
  top: 0
}

ion-popover.stuff-user-dropdown div.greeting span:not(.close-icon-container) {
  display: inline-block;
  font: var(--fw-600) var(--fs-20) /var(--lh-110) var(--ff-sans);
  margin: 0;
  width: 14.25rem
}

ion-popover.stuff-user-dropdown .close-icon-container svg:focus {
  outline: none
}

ion-popover.stuff-user-dropdown .close-icon-container svg:focus-visible {
  outline: var(--stuff-header-item-focus-outline)
}

ion-popover.stuff-user-dropdown ion-item {
  --background: transparent;
  --ripple-color: transparent;
  background: var(--stuff-user-dropdown-background);
  display: flex;
  width: 100%
}

ion-popover.stuff-user-dropdown ion-item,
ion-popover.stuff-user-dropdown ion-item:focus {
  border: var(--border-width-1) solid transparent;
  border-bottom: var(--stuff-user-dropdown-border)
}

ion-popover.stuff-user-dropdown ion-item:focus {
  --background-focused: transparent
}

ion-popover.stuff-user-dropdown ion-item:hover {
  --background-hover: transparent;
  --stuff-user-dropdown-background: var(--stuff-user-dropdown-background-hover)
}

ion-popover.stuff-user-dropdown ion-item::part(native) {
  --inner-border-width: 0px;
  --min-height: 0;
  font: var(--fw-400) var(--fs-16) /var(--lh-130) var(--ff-sans);
  min-width: 100%;
  padding: var(--spacing-16) var(--spacing-24)
}

ion-popover.stuff-user-dropdown ion-item::part(native):focus-visible {
  --stuff-user-dropdown-focus-padding: calc(var(--spacing-16) - var(--border-width-2)) calc(var(--spacing-24) - var(--border-width-2));
  border: var(--stuff-header-item-focus-outline);
  padding: var(--stuff-user-dropdown-focus-padding)
}

ion-popover.stuff-user-dropdown ion-item span {
  margin-left: var(--spacing-16)
}

ion-popover.stuff-user-dropdown ion-item:active {
  --background-activated: transparent;
  --stuff-user-dropdown-background: var(--stuff-user-dropdown-background-active)
}

ion-popover.stuff-user-dropdown ion-item svg>use {
  fill: var(--stuff-user-dropdown-icon-fill);
  height: .875rem;
  width: .875rem
}

ion-popover.stuff-user-dropdown a.settings-button {
  text-decoration: none
}

:root {
  --stuff-ads-panel-border-width: var(--spacing-4);
  --stuff-ads-panel-border-color: var(--clr-primary);
  --ads-panel-grid-container-padding-top: 1rem;
  --ads-panel-grid-container-padding-x: 1rem;
  --ads-panel-grid-container-padding-bottom: 0
}

.ads-panels-container:not(:nth-child(2)) .ads-panel-grid-container:before,
.watch .html.ads-panels-container:not(:nth-child(2)) .ads-panel-grid-container:before {
  --_divider-line-color: var(--colors-theme-color-secondary-default);
  background-color: var(--_divider-line-color);
  content: "";
  display: block;
  height: 1px;
  max-width: calc(var(--page-container-max-width) - var(--page-margin-x)*2);
  position: absolute;
  width: calc(100% - var(--page-margin-x)*2);
  z-index: var(--z-index-10)
}

.fluid.ads-panels-container .ads-panel-grid-container:before,
.html.ads-panels-container .ads-panel-grid-container:before {
  display: none
}

.watch .html.ads-panels-container:not(:nth-child(2)) .ads-panel-grid-container:before {
  --_divider-line-color: var(--elements-text-color-default)
}

@media screen and (min-width: 1024px) {
  :root {
    --ads-panel-grid-container-padding-top: 1.5rem;
    --ads-panel-grid-container-padding-x: 2rem;
    --ads-panel-grid-container-padding-bottom: 0
  }
}

.ads-panels-container {
  --_vertical-ads-padding-x: var(--spacing-24);
  position: relative
}

.ads-panel-grid-container.list-story-frame,
.ads-panel-grid-container.top-stories,
.ads-panel-grid-container.top-story-frame {
  display: grid;
  grid-template-areas: "left" "content" "right";
  grid-template-columns: minmax(auto, 1fr);
  grid-template-rows: auto
}

.ads-panel-grid-container.carousel,
.ads-panel-grid-container.carousel-frame {
  display: block
}

.ads-panels-container:after {
  left: 50%;
  transform: translateX(-50%)
}

.panel-common {
  align-items: center;
  background-color: var(--ion-background-color);
  display: none;
  justify-content: center
}

.panel-common:not(.ads-panel-right, .ads-panel-left):has(.adHeader) {
  padding: 1rem 0
}

.enabled {
  display: flex
}

.ads-panel-bottom {
  z-index: 10
}

.ads-panel-bottom .ad-container:has(.ad-slot.open) {
  width: unset
}

.ads-panel-left {
  grid-area: left
}

.ads-panel-left,
.ads-panel-right {
  align-items: flex-start;
  background-color: var(--ion-color-base);
  display: flex;
  z-index: 1
}

.ads-panel-right {
  grid-area: right
}

.ads-panel-bottom iframe,
.ads-panel-top iframe {
  max-width: 100%;
  min-width: 100%
}

.ads-panel-grid-container.carousel .ads-panel-bottom,
.ads-panel-grid-container.carousel-frame .ads-panel-bottom {
  margin-top: 1rem
}

.ads-panels-container.top-stories span.common-tag-base.scheduled,
.ads-panels-container.top-story-frame span.common-tag-base.scheduled {
  margin: 1rem 1rem 0
}

.ads-panels-container span.common-tag-base.scheduled {
  margin: 0 0 1rem
}

.ads-panels-container.preview {
  background-color: var(--uira-color-black-10)
}

.ads-panels-container.fluid:after {
  width: 100%
}

.masthead .ads-panel-grid-container:not(.top-stories),
.masthead .ads-panel-grid-container:not(.top-story-frame) {
  padding: var(--ads-panel-grid-container-padding-top) var(--ads-panel-grid-container-padding-x) var(--ads-panel-grid-container-padding-bottom)
}

.masthead .ads-panel-grid-container.top-stories,
.masthead .ads-panel-grid-container.top-story-frame {
  padding: 0
}

.masthead .ads-panels-container:not(:has(.top-stories-frame)):not(:has(.story-list-medium-container)):after {
  background-image: radial-gradient(var(--ion-color-contrast) 1px, transparent 0);
  background-size: 5px 5px;
  bottom: 1rem;
  content: "";
  height: 15px;
  margin: 0 auto;
  position: absolute;
  width: calc(min(100vw, 1440px) - var(--ads-panel-grid-container-padding-x)*2)
}

.masthead .ads-panels-container:not(:has(.top-stories-frame)):not(:has(.story-list-medium-container)) {
  padding-bottom: 3rem
}

.stuff .ads-panels-container .ads-panel-grid-container {
  padding: 0;
  padding-inline: var(--page-margin-x)
}

.stuff .ads-panels-container .ads-panel-grid-container.fluid {
  padding: 0
}

.stuff .ads-panel-left .vertical {
  padding-right: var(--_vertical-ads-padding-x)
}

.stuff .ads-panel-right .vertical {
  padding-left: var(--_vertical-ads-padding-x)
}

.stuff .ads-panel-left .vertical:empty,
.stuff .ads-panel-right .vertical:empty {
  padding-left: 0;
  padding-right: 0
}

.stuff .ads-panel-right .ads-panel-content {
  grid-area: content
}

@media screen and (min-width: 768px) {

  .ads-panel-grid-container,
  .ads-panel-grid-container.list-story-frame,
  .ads-panel-grid-container.top-stories,
  .ads-panel-grid-container.top-story-frame {
    display: grid;
    grid-template-areas: "left content right";
    grid-template-columns: minmax(0, auto) 1fr minmax(0, auto)
  }

  .ads-panels-container.top-stories span.common-tag-base.scheduled,
  .ads-panels-container.top-story-frame span.common-tag-base.scheduled {
    margin: 0 0 1rem
  }

  .masthead .ads-panel-grid-container.top-stories,
  .masthead .ads-panel-grid-container.top-story-frame {
    padding: 1rem var(--ads-panel-grid-container-padding-x)
  }

  .masthead .web-wrapper.regional .ads-panel-grid-container.top-stories {
    padding: 1.5rem var(--ads-panel-grid-container-padding-x) 1rem
  }
}

@media screen and (min-width: 1024px) {
  .masthead .ads-panels-container:not(:has(.top-stories-frame)):not(:has(.story-list-medium-container)):after {
    bottom: 1.5rem
  }

  .masthead .ads-panels-container:not(:has(.top-stories-frame)):not(:has(.story-list-medium-container)) {
    padding-bottom: 4rem
  }

  .stuff .ads-panels-container {
    padding-bottom: 0
  }

  .masthead .ads-panel-grid-container.top-stories,
  .masthead .ads-panel-grid-container.top-story-frame {
    padding: 1.5rem var(--ads-panel-grid-container-padding-x) 0
  }
}

@media screen and (min-width: 1200px) {
  .panel-common:not(.ads-panel-right, .ads-panel-left):has(.adHeader) {
    margin-bottom: 1.5rem
  }
}

.masthead h1.display-title {
  margin: 0
}

.stuff h1.display-title {
  --_title-font: var(--fw-700) var(--fs-32) /var(--lh-120) var(--ff-sans-wide);
  margin: 0
}

.no-data {
  padding: 1rem 0
}

.masthead h1.display-title.present {
  color: var(--ion-color-contrast);
  font-family: var(--ion-font-family-sans);
  font-size: var(--font-size-26);
  font-weight: 600;
  line-height: 115%;
  margin: 0 !important;
  padding: 1rem 0;
  text-align: center
}

.masthead h1.display-title.present,
.stuff h1.display-title.present {
  letter-spacing: .05em;
  position: relative;
  text-transform: uppercase;
  z-index: 1
}

.stuff h1.display-title.present {
  color: var(--clr-primary);
  font: var(--_title-font);
  margin: auto;
  max-width: 1440px;
  padding-inline: var(--page-margin-x);
  text-align: left
}

.masthead h1.display-title.present:after {
  border-bottom: 1px solid var(--ion-color-contrast);
  bottom: 0;
  content: "";
  height: 1px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: calc(100vw - 2rem)
}

@media screen and (min-width: 0px) {
  .stuff h1.display-title.present {
    font-size: var(--fs-32);
    padding-top: calc(var(--spacing-16) - var(--stuff-inview-header-bar-and-gap-height))
  }
}

@media screen and (min-width: 1024px) {
  .stuff h1.display-title.present {
    font-size: var(--fs-40)
  }

  .masthead .display-title.present {
    font-size: var(--font-size-32);
    margin: 2rem 0
  }

  h1.display-title.present:after {
    width: calc(100vw - 4rem)
  }
}

@media screen and (min-width: 1440px) {
  .stuff h1.display-title.present {
    font-size: var(--fs-40);
    padding-inline: var(--page-margin-x)
  }
}

.masthead .display-icon {
  --_icon-height: 46px;
  --_manawatu-standard-logo-width: 396px;
  --_marlborough-express-logo-width: 173px;
  --_nelson-mail-logo-width: 295px;
  --_the-southland-times-logo-width: 308px;
  --_taranaki-daily-news-logo-width: 244px;
  --_timaru-herald-logo-width: 100%;
  --_sunday-star-times-logo-width: 100%;
  --_regional-icon-margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--ion-color-contrast);
  margin-inline: var(--ads-panel-grid-container-padding-x);
  padding-block: 1.5rem
}

.masthead .web-wrapper.regional .display-icon {
  margin-bottom: var(--_regional-icon-margin-bottom)
}

.masthead .display-icon svg {
  height: var(--_icon-height)
}

.masthead .display-icon #manawatu_standard_logo {
  width: var(--_manawatu-standard-logo-width)
}

.masthead .display-icon #marlborough_express_logo {
  width: var(--_marlborough-express-logo-width)
}

.masthead .display-icon #nelson_mail_logo {
  width: var(--_nelson-mail-logo-width)
}

.masthead .display-icon #the_southland_times_logo {
  width: var(--_the-southland-times-logo-width)
}

.masthead .display-icon #taranaki_daily_news_logo {
  width: var(--_taranaki-daily-news-logo-width)
}

.masthead .display-icon #timaru_herald_logo {
  width: var(--_timaru-herald-logo-width)
}

.masthead .display-icon #sunday_star_times_logo {
  width: var(--_sunday-star-times-logo-width)
}

@media screen and (min-width: 475px) {
  .masthead .display-icon {
    --_timaru-herald-logo-width: 434px
  }
}

@media screen and (min-width: 547px) {
  .masthead .display-icon {
    --_sunday-star-times-logo-width: 515px
  }
}

@media screen and (min-width: 768px) {
  .masthead .display-icon {
    --_regional-icon-margin-bottom: 0
  }
}

@media screen and (min-width: 1200px) {
  .masthead .display-icon {
    --_icon-height: 61px;
    --_manawatu-standard-logo-width: 520px;
    --_marlborough-express-logo-width: 226px;
    --_nelson-mail-logo-width: 387px;
    --_the-southland-times-logo-width: 405px;
    --_taranaki-daily-news-logo-width: 320px;
    --_timaru-herald-logo-width: 570px;
    --_sunday-star-times-logo-width: 672px
  }
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  transform: translateZ(0);
  transition: opacity .3s;
  z-index: 10
}

.swiper-pagination.swiper-pagination-hidden {
  opacity: 0
}

.swiper-pagination-disabled>.swiper-pagination,
.swiper-pagination.swiper-pagination-disabled {
  display: none !important
}

.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: 10px;
  left: 0;
  width: 100%
}

.swiper-pagination-bullets-dynamic {
  font-size: 0;
  overflow: hidden
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  position: relative;
  transform: scale(.33)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active,
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(.33)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(.33)
}

.swiper-pagination-bullet {
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  border-radius: 50%;
  display: inline-block;
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  opacity: var(--swiper-pagination-bullet-inactive-opacity, .2);
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px))
}

button.swiper-pagination-bullet {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  box-shadow: none;
  margin: 0;
  padding: 0
}

.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer
}

.swiper-pagination-bullet:only-child {
  display: none !important
}

.swiper-pagination-bullet-active {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  opacity: var(--swiper-pagination-bullet-opacity, 1)
}

.swiper-pagination-vertical.swiper-pagination-bullets,
.swiper-vertical>.swiper-pagination-bullets {
  right: 10px;
  top: 50%;
  transform: translate3d(0, -50%, 0)
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
  display: block;
  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: transform .2s, top .2s
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px)
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: transform .2s, left .2s
}

.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: transform .2s, right .2s
}

.swiper-pagination-progressbar {
  background: rgba(0, 0, 0, .25);
  position: absolute
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: scale(0);
  transform-origin: left top;
  width: 100%
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top
}

.swiper-horizontal>.swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  height: 4px;
  left: 0;
  top: 0;
  width: 100%
}

.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-vertical>.swiper-pagination-progressbar {
  height: 100%;
  left: 0;
  top: 0;
  width: 4px
}

.swiper-pagination-lock {
  display: none
}

@font-face {
  font-family: swiper-icons;
  font-style: normal;
  font-weight: 400;
  src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA")
}

:root {
  --swiper-theme-color: #007aff
}

.swiper {
  list-style: none;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  padding: 0;
  position: relative;
  z-index: 1
}

.swiper-vertical>.swiper-wrapper {
  flex-direction: column
}

.swiper-wrapper {
  box-sizing: content-box;
  display: flex;
  height: 100%;
  position: relative;
  transition-property: transform;
  width: 100%;
  z-index: 1
}

.swiper-android .swiper-slide,
.swiper-wrapper {
  transform: translateZ(0)
}

.swiper-pointer-events {
  touch-action: pan-y
}

.swiper-pointer-events.swiper-vertical {
  touch-action: pan-x
}

.swiper-slide {
  flex-shrink: 0;
  height: 100%;
  position: relative;
  transition-property: transform;
  width: 100%
}

.swiper-slide-invisible-blank {
  visibility: hidden
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto
}

.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height
}

.swiper-backface-hidden .swiper-slide {
  backface-visibility: hidden;
  transform: translateZ(0)
}

.swiper-3d,
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px
}

.swiper-3d .swiper-cube-shadow,
.swiper-3d .swiper-slide,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d
}

.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top {
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10
}

.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, .15)
}

.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(270deg, rgba(0, 0, 0, .5), transparent)
}

.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(90deg, rgba(0, 0, 0, .5), transparent)
}

.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(0deg, rgba(0, 0, 0, .5), transparent)
}

.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, .5), transparent)
}

.swiper-css-mode>.swiper-wrapper {
  -ms-overflow-style: none;
  overflow: auto;
  scrollbar-width: none
}

.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
  display: none
}

.swiper-css-mode>.swiper-wrapper>.swiper-slide {
  scroll-snap-align: start start
}

.swiper-horizontal.swiper-css-mode>.swiper-wrapper {
  scroll-snap-type: x mandatory
}

.swiper-vertical.swiper-css-mode>.swiper-wrapper {
  scroll-snap-type: y mandatory
}

.swiper-centered>.swiper-wrapper:before {
  content: "";
  flex-shrink: 0;
  order: 9999
}

.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
  margin-inline-start: var(--swiper-centered-offset-before)
}

.swiper-centered.swiper-horizontal>.swiper-wrapper: before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after)
}

.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
  margin-block-start: var(--swiper-centered-offset-before)
}

.swiper-centered.swiper-vertical>.swiper-wrapper: before {
  height: var(--swiper-centered-offset-after);
  min-width: 1px;
  width: 100%
}

.swiper-centered>.swiper-wrapper>.swiper-slide {
  scroll-snap-align: center center;
  scroll-snap-stop: always
}

:root {
  --stuff-carousel-bullet-space: 2rem;
  --stuff-carousel-slide-width: 250px;
  --stuff-carousel-item-gap: var(--grid-row-gap);
  --stuff-carousel-navigation-icon-color: var(--text-color-reverse);
  --stuff-carousel-pagination-bullet-color: var(--theme-color-primary-lighter);
  --stuff-carousel-pagination-bullet-color-active: var(--theme-color-primary)
}

@media screen and (min-width: 576px) {
  :root {
    --stuff-carousel-slide-width: 250px
  }
}

@media screen and (min-width: 768px) {
  :root {
    --stuff-carousel-slide-width: 320px
  }
}

@media screen and (min-width: 1024px) {
  :root {
    --stuff-carousel-slide-width: 280px
  }
}

@media screen and (min-width: 1200px) {
  :root {
    --stuff-carousel-slide-width: 350px
  }
}

@media screen and (min-width: 1440px) {
  :root {
    --stuff-carousel-slide-width: 400px
  }
}

.stuff-carousel-header {
  justify-content: space-between
}

.stuff-carousel-wrapper .swiper {
  display: block;
  padding-bottom: var(--stuff-carousel-bullet-space);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.stuff-carousel-wrapper {
  align-items: stretch;
  align-self: stretch;
  display: flex;
  flex: 1 0 0;
  flex-direction: row
}

.stuff-carousel-wrapper .swiper .swiper-slide {
  display: flex;
  height: auto;
  justify-content: stretch;
  min-width: var(--stuff-carousel-slide-width);
  text-align: start;
  width: -moz-min-content;
  width: min-content
}

.stuff-carousel-wrapper .swiper :is(.swiper-slide:last-child) {
  min-width: calc(var(--stuff-carousel-slide-width) - var(--stuff-carousel-item-gap)*2)
}

.stuff-carousel-item {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  justify-content: space-evenly;
  width: 100%
}

.swiper-slide:last-child .stuff-carousel-item {
  padding-right: 0
}

.stuff-carousel-wrapper .swiper .swiper-pagination-bullet {
  background: var(--stuff-carousel-pagination-bullet-color)
}

.stuff-carousel-wrapper .swiper .swiper-pagination-bullet-active {
  background: var(--stuff-carousel-pagination-bullet-color-active)
}

.stuff-carousel-item .stuff-divider {
  height: 100%;
  margin: 0 var(--stuff-list-item-padding);
  width: 1px
}

.stuff-carousel-wrapper .ad-container {
  flex: 1
}

.stuff-carousel-wrapper .ads-visible div {
  width: 100%
}

:root {
  --stuff-frame-column-gap: var(--spacing-24);
  --stuff-frame-container-gap: var(--spacing-12);
  --stuff-frame-margin-top: var(--stuff-frame-column-gap);
  --stuff-frame-padding-bottom: calc(var(--spacing-24) + var(--stuff-ads-panel-border-width));
  --stuff-frame-heading-color: var(--colors-theme-color-secondary-default);
  --stuff-frame-surface-color: transparent;
  --stuff-frame-inner-container-max-width: 100%
}

.watch {
  --stuff-frame-heading-color: var(--elements-text-color-default)
}

.stuff-frame-inner-container .stuff-frame-heading {
  --_heading-align: center;
  --stuff-text-heading-font-weight: var(--fw-700);
  --stuff-text-heading-font-size: var(--fs-20);
  --stuff-text-heading-line-height: var(--lh-100);
  display: inline-block;
  letter-spacing: 4px;
  text-align: var(--_heading-align);
  text-transform: uppercase;
  width: 100%
}

@media screen and (min-width: 1024px) {
  .stuff-frame-inner-container .stuff-frame-heading {
    --_heading-align: left
  }

  :root {
    --stuff-frame-column-gap: var(--spacing-32)
  }
}

.stuff-frame-container {
  flex: 1 0 0;
  margin-top: var(--stuff-frame-margin-top);
  padding-bottom: var(--stuff-frame-padding-bottom)
}

.watch .ads-panels-container.html:nth-child(2) .stuff-frame-container {
  margin-top: 0
}

.stuff-frame-container .stuff-frame-surface {
  background-color: var(--stuff-frame-surface-color)
}

.stuff-frame-container .stuff-frame-inner-container {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: var(--stuff-frame-container-gap);
  max-width: var(--stuff-frame-inner-container-max-width)
}

.stuff-frame-heading {
  --stuff-text-heading-color: var(--stuff-frame-heading-color)
}

.stuff-frame-container.yellow-background {
  --stuff-frame-surface-color: var(--clr-brand-yellow)
}

.fluid .stuff-frame-container .stuff-frame-inner-container {
  --stuff-frame-inner-container-max-width: var(--break-point-1440);
  margin: 0 auto;
  padding: var(--stuff-frame-margin-top) var(--page-margin-x) var(--stuff-frame-column-gap)
}

.stuff-frame-container.hide-intro .stuff-intro-text-body,
.stuff-frame-container.hide-timestamp .stuff-timestamp {
  display: none
}

.stuff-frame-container .ads-visible {
  background-color: unset
}

@media screen and (min-width: 1024px) {
  :root {
    --stuff-frame-container-gap: var(--spacing-24)
  }
}

.carousel-navigation-container {
  --button-md-icon-size: 0.75rem;
  display: flex;
  gap: var(--stuff-spacing-16);
  justify-content: space-between
}

.carousel-navigation-container .stuff-button {
  --stuff-button-icon-width: 12px;
  --stuff-button-icon-height: 12px;
  --stuff-button-icon-fill: var(--stuff-carousel-navigation-icon-color)
}

button.swiper-button-disabled {
  cursor: not-allowed;
  opacity: .2;
  outline-color: var(--clr-button-primary-text-disabled)
}

.stuff-carousel-frame .stuff-carousel-header {
  width: 100%
}

:root {
  --defcon-frame-border: var(--spacing-4) solid var(--clr-alert);
  --defcon-frame-surface: var(--clr-neutral-80);
  --defcon-frame-padding-bottom: var(--spacing-24);
  --defcon-frame-box-side-padding: var(--spacing-12);
  --defcon-frame-timestamp-color: var(--clr-alert);
  --defcon-frame-divider-line-horizontal: var(--border-dotted-horizontal);
  --defcon-frame-divider-line-vertical: var(--border-dotted-vertical);
  --defcon-title-font-weight: var(--fw-400);
  --defcon-title-font-size: var(--fs-36);
  --defcon-title-font-line-height: var(--lh-120);
  --defcon-title-font-family: var(--ff-fjalla-one);
  --defcon-frame-lead-card-heading-font: var(--defcon-title-font-weight) var(--defcon-title-font-size) /var(--defcon-title-font-line-height) var(--defcon-title-font-family)
}

.stuff-frame-container.defcon-frame {
  --_frame-border: var(--spacing-4) solid var(--maroon-100);
  --_frame-surface: var(--clr-neutral-80);
  --_frame-padding-bottom: var(--spacing-24);
  --_frame-box-side-padding: var(--spacing-12);
  --_lead-card-heading-font: var(--hero-heading-font-l);
  --_timestamp-color: var(--maroon-100);
  --_frame-divider-line-horizontal: var(--border-dotted-horizontal);
  --_frame-divider-line-vertical: var(--border-dotted-vertical);
  background: var(--_frame-surface);
  border-bottom: var(--_frame-border);
  border-top: var(--_frame-border);
  margin-top: var(--page-margin-y);
  padding-bottom: var(--_frame-padding-bottom)
}

.stuff-frame-container.defcon-frame.single-card-container {
  --_frame-padding-bottom: 0
}

.stuff-frame-container.defcon-frame .stuff-column {
  flex: 1 0 0
}

.stuff-frame-container.defcon-frame .lead-card-separator>.stuff-divider {
  --stuff-divider-width: calc(100% - var(--_frame-box-side-padding)*2);
  margin-left: var(--_frame-box-side-padding)
}

.defcon-story-card.lead .stuff-text-heading {
  font: var(--defcon-title-font-weight) var(--defcon-title-font-size) /var(--defcon-title-font-line-height) var(--defcon-title-font-family)
}

.defcon-story-card .stuff-timestamp {
  color: var(--_timestamp-color)
}

.defcon-story-card .stuff-timestamp:before {
  fill: var(--_timestamp-color);
  content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='7'%3E%3Cg fill='%23E61716' clip-path='url(%23a)'%3E%3Cpath d='M4.25 3.563a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0'/%3E%3Cpath fill-rule='evenodd' d='M3 5.563a2 2 0 1 0 0-4 2 2 0 0 0 0 4m0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .563h6v6H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  margin-right: var(--spacing-4)
}

.defcon-story-card.lead .sf-story-image-container {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding: var(--spacing-0)
}

.defcon-story-card.lead img {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  -o-object-fit: cover;
  object-fit: cover
}

.defcon-story-card.lead .card-body,
.stuff-frame-container.defcon-frame .remaining-stories-container {
  padding: 0 var(--_frame-box-side-padding)
}

.defcon-story-card.tertiary-square.hide-intro .sf-story-image-container {
  align-items: center;
  height: 100%
}

.stuff-frame-container.defcon-frame .stuff-divider {
  --stuff-divider-dotted-line: var(--border-dotted-horizontal)
}

.stuff-frame-container.defcon-frame .stuff-divider.vertical {
  --stuff-divider-dotted-line: var(--border-dotted-vertical)
}

@media screen and (min-width: 576px) {
  .defcon-story-card.tertiary-square {
    --story-card-image-width: 5rem;
    --story-card-image-height: 5rem
  }
}

@media screen and (min-width: 768px) {
  .stuff-frame-container.defcon-frame {
    --_frame-box-side-padding: var(--spacing-16);
    --_lead-card-heading-font: var(--hero-heading-font-xl)
  }
}

@media screen and (min-width: 1024px) {
  .stuff-frame-container.defcon-frame {
    --_frame-box-side-padding: var(--spacing-24)
  }
}

@media screen and (min-width: 1200px) {
  .stuff-frame-container.defcon-frame {
    --_frame-border: var(--spacing-8) solid var(--maroon-100);
    border: 0;
    border-left: var(--_frame-border)
  }

  .stuff-frame-container.defcon-frame .lead-card-separator>.stuff-divider {
    --stuff-divider-width: calc((100% - var(--_frame-box-side-padding))/2 - var(--_frame-box-side-padding));
    margin-top: calc(var(--stuff-column-gap)*-1)
  }

  .story-card.defcon-story-card.lead .story-card-link {
    align-items: stretch;
    display: flex;
    flex-direction: row-reverse;
    gap: var(--_frame-box-side-padding)
  }

  .defcon-story-card.lead .card-body {
    flex: 1 0 0;
    justify-content: center;
    padding: 0;
    padding-left: var(--_frame-box-side-padding)
  }

  .defcon-story-card.lead img {
    aspect-ratio: 1/1
  }

  .defcon-story-card.lead .sf-story-image-container {
    flex: calc((100% - var(--_frame-box-side-padding))/2) 0 0
  }
}

@media screen and (min-width: 1440px) {
  .stuff-frame-container.defcon-frame {
    --_lead-card-heading-font: var(--hero-heading-font-xxl)
  }
}

@media screen and (min-width: 768px) {
  :root {
    --defcon-frame-box-side-padding: var(--spacing-16)
  }

  .defcon-story-card.lead .stuff-text-heading {
    --defcon-title-font-size: var(--fs-42);
    --defcon-title-font-line-height: var(--lh-125)
  }
}

@media screen and (min-width: 1024px) {
  :root {
    --defcon-frame-box-side-padding: var(--spacing-24)
  }
}

@media screen and (min-width: 1200px) {
  :root {
    --defcon-frame-border: var(--spacing-8) solid var(--clr-alert)
  }
}

@media screen and (min-width: 1440px) {
  .defcon-story-card.lead .stuff-text-heading {
    --defcon-title-font-size: var(--fs-62);
    --defcon-title-font-line-height: var(--lh-125)
  }
}

.stuff-list-frame {
  --_stuff-list-frame-max-width: unset;
  --_stuff-list-frame-img-width: 177px;
  --_stuff-list-frame-img-height: 177px;
  max-width: var(--_stuff-list-frame-max-width)
}

.stuff-list-frame .tertiary-square .sf-story-image-container,
.stuff-list-frame .tertiary-wide .sf-story-image-container {
  --story-card-image-width: var(--_stuff-list-frame-img-width);
  --story-card-image-height: var(--_stuff-list-frame-img-height)
}

@media screen and (min-width: 576px) {
  .stuff-list-frame .tertiary-square .sf-story-image-container {
    --_stuff-list-frame-img-width: 268px;
    --_stuff-list-frame-img-height: 268px
  }
}

@media screen and (min-width: 768px) {
  .stuff-list-frame .tertiary-square .sf-story-image-container {
    --_stuff-list-frame-img-width: 128px;
    --_stuff-list-frame-img-height: 128px
  }
}

@media screen and (min-width: 1024px) {
  .stuff-list-frame .tertiary-wide .sf-story-image-container {
    --_stuff-list-frame-img-width: 10rem;
    --_stuff-list-frame-img-height: initial
  }
}

@media screen and (min-width: 1440px) {
  .stuff-list-frame {
    --_stuff-list-frame-max-width: 873px
  }

  .stuff-list-frame .tertiary-wide .sf-story-image-container {
    --_stuff-list-frame-img-width: 245px
  }
}

:root {
  --stuff-html-frame-font-family: var(--ff-sans)
}

.stuff-frame-container .html-content {
  align-self: stretch;
  font-family: var(--stuff-html-frame-font-family)
}

iframe.brightcove-top-carousel {
  margin-left: calc(var(--page-margin-x)*-1) !important;
  width: calc(100% + var(--page-margin-x)*2) !important
}

@media (max-width: 768px) {
  .native .feedback-link-wrapper--text {
    font-size: 26px
  }
}

.native .feedback-link-wrapper--btn {
  font-size: 14px
}

.stuff-frame-container iframe.common-html-frame {
  border: none
}

.stuff-latest-headlines-frame {
  --_title-font: var(--fw-700) var(--fs-40) /var(--lh-100) var(--ff-sans-condensed);
  --_heading-font: var(--fw-400) var(--fs-18) /var(--lh-140) var(--ff-sans);
  --_background-color: var(--maroon-05);
  --_corner-border-color: var(--maroon-50);
  --_splash-color: var(--maroon-100);
  --stuff-label-text-color: var(--clr-text);
  --stuff-timestamp-text-color: var(--_splash-color);
  --stuff-story-teaser-card-body-gap: var(--spacing-4);
  background: linear-gradient(to right, var(--_corner-border-color) 1px, transparent 1px) 0 0, linear-gradient(to right, var(--_corner-border-color) 1px, transparent 1px) 0 100%, linear-gradient(to left, var(--_corner-border-color) 1px, transparent 1px) 100% 0, linear-gradient(to left, var(--_corner-border-color) 1px, transparent 1px) 100% 100%, linear-gradient(to bottom, var(--_corner-border-color) 1px, transparent 1px) 0 0, linear-gradient(to bottom, var(--_corner-border-color) 1px, transparent 1px) 100% 0, linear-gradient(to top, var(--_corner-border-color) 1px, transparent 1px) 0 100%, linear-gradient(to top, var(--_corner-border-color) 1px, transparent 1px) 100% 100%;
  background-color: var(--_background-color);
  background-repeat: no-repeat;
  background-size: 20% 30%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  padding: var(--spacing-12) var(--spacing-16)
}

.stuff-latest-headlines-frame,
.stuff-latest-headlines-frame .stuff-frame-heading {
  --stuff-text-heading-font-family: var(--ff-sans-condensed)
}

.stuff-latest-headlines-frame .stuff-timestamp {
  --stuff-timestamp-order: 1
}

.stuff-latest-headlines-frame .stuff-text-heading {
  --stuff-text-heading-order: 2
}

.stuff-latest-headlines-frame .stuff-label {
  --stuff-label-order: 3
}

.stuff-latest-headlines-frame .stuff-divider {
  background-color: unset;
  border-bottom: 2px dotted var(--_splash-color)
}

.stuff-latest-headlines-frame .stuff-frame-heading {
  color: var(--_splash-color);
  font: var(--_title-font);
  text-transform: uppercase
}

.stuff-latest-headlines-frame h6.stuff-text-heading {
  font: var(--_heading-font)
}

.container-row {
  --_left-column-flex-basis: 70%;
  --_right-column-flex-basis: 30%;
  --_lead-story-flex-basis: 55%;
  --_secondary-story-flex-basis: 45%
}

@media screen and (min-width: 1440px) {
  .container-row {
    --_left-column-flex-basis: 79%;
    --_right-column-flex-basis: 21%;
    --_lead-story-flex-basis: 71%;
    --_secondary-story-flex-basis: 29%
  }
}

.stuff-news-mixed-frame.desktop .container-row .left-col {
  flex-basis: var(--_left-column-flex-basis)
}

.stuff-news-mixed-frame.desktop .container-row .right-col {
  flex-basis: var(--_right-column-flex-basis)
}

.stuff-news-mixed-frame.desktop .ad-container:has(.story1),
.stuff-news-mixed-frame.desktop .story1 {
  flex-basis: var(--_lead-story-flex-basis)
}

.stuff-news-mixed-frame.desktop .ad-container:has(.story2),
.stuff-news-mixed-frame.desktop .story2 {
  flex-basis: var(--_secondary-story-flex-basis)
}

.stuff-news-mixed-frame.desktop .left-col {
  align-self: flex-start
}

.stuff-news-mixed-frame .lead .sf-story-image-container,
.stuff-news-mixed-frame .lead .sf-story-image-container img {
  width: 100%
}

.stuff-news-mixed-frame.desktop .tertiary-wide .sf-story-image-container img {
  --story-card-image-width: 10rem
}

.stuff-news-mixed-frame.desktop .tertiary-wide {
  --stuff-measure-gaps-card-row-gap: 1.5rem
}

.stuff-news-mixed-frame .ads-visible {
  background-color: var(--clr-neutral-white);
  width: 100%
}

.stuff-news-mixed-frame .ads-visible div {
  width: 100%
}

.stuff-news-mixed-frame .story-card.lead .stuff-text-heading {
  --stuff-text-heading-font-size: var(--fs-24)
}

.stuff-news-mixed-frame.mobile .second-row.tertiary-square .sf-story-image-container {
  --story-card-image-width: 11rem;
  --story-card-image-height: 11rem
}

.stuff-news-mixed-frame.mobile .tertiary-square .sf-story-image-container {
  --story-card-image-width: 8rem;
  --story-card-image-height: 8rem
}

.stuff-news-mixed-frame.tablet .hero-stories .lead {
  flex-basis: 60%
}

.stuff-news-mixed-frame.tablet .hero-stories .secondary {
  flex-basis: 40%
}

.stuff-news-mixed-frame.tablet .secondary-stories .story-3 {
  flex-basis: 60%
}

.stuff-news-mixed-frame.tablet .secondary-stories .story-4 {
  flex-basis: 40%
}

.most-popular .stuff-label,
.most-popular .stuff-timestamp {
  display: none
}

.most-popular .stuff-frame-inner-container .stuff-column {
  flex: 1
}

.stuff-new-top-stories-frame.desktop .no-image img {
  display: none
}

.stuff-new-top-stories-frame.desktop .no-image {
  --stuff-story-card-container-gap-global: 0px
}

.stuff-new-top-stories-frame.desktop .row2>* {
  flex: 1 0 0
}

.stuff-new-top-stories-frame.desktop .row-1 .new-lead {
  flex-basis: calc(50% - var(--stuff-row-gap)*2/2)
}

.stuff-new-top-stories-frame.desktop .row-1 .story2to3,
.stuff-new-top-stories-frame.desktop .row-1 .story4to7 {
  flex: 50%
}

.stuff-new-top-stories-frame.desktop .row-3>.stuff-column {
  flex-basis: calc(25% - var(--stuff-row-gap)*6/4)
}

.stuff-new-top-stories-frame.desktop .row-3 .stuff-new-latest-headlines-frame {
  flex-basis: calc((100% - var(--stuff-row-gap))/3)
}

.stuff-new-top-stories-frame.desktop .new-secondary,
.stuff-new-top-stories-frame.desktop .new-secondary *,
.stuff-new-top-stories-frame.desktop .new-secondary-square,
.stuff-new-top-stories-frame.desktop .new-secondary-square * {
  align-items: center;
  text-align: center
}

.stuff-new-top-stories-frame .stuff-divider {
  --stuff-divider-background-color: var(--clr-neutral-200)
}

.stuff-new-top-stories-frame.mobile .stuff-grid .stuff-row {
  flex-direction: row
}

.stuff-new-top-stories-frame.mobile .stuff-grid .stuff-row .stuff-divider {
  --stuff-divider-height: 100%;
  --stuff-divider-width: var(--stuff-divider-thickness)
}

.stuff-new-top-stories-frame.tablet .story1 {
  flex-basis: 65%
}

.stuff-new-top-stories-frame.tablet .story2to3 {
  flex-basis: 35%
}

.stuff-new-top-stories-frame.tablet .row-2 .stuff-row>* {
  flex: 1
}

.stuff-new-top-stories-frame.tablet .row-2 .stuff-row .stuff-divider {
  flex: initial
}

.stuff-new-top-stories-frame.tablet .no-image img {
  display: none
}

.stuff-new-top-stories-frame.tablet .no-image {
  --stuff-story-card-container-gap-global: 0px
}

.stuff-new-top-stories-frame.tablet .row-4>* {
  flex: 1
}

.stuff-new-top-stories-frame.tablet .row-1 .new-lead {
  width: 342px
}

.stuff-new-top-stories-frame.tablet .row-1 .story2to3 {
  flex: 1 0 0
}

.stuff-new-top-stories-frame.tablet .new-secondary-square,
.stuff-new-top-stories-frame.tablet .new-secondary-square * {
  align-items: center;
  text-align: center
}

@media screen and (min-width: 1024px) {
  .stuff-new-top-stories-frame.tablet .row-4 .new-secondary-square {
    flex-basis: 66.66667%
  }

  .stuff-new-top-stories-frame.tablet .row-4 .stuff-new-latest-headlines-frame {
    flex-basis: 33.33333%
  }
}

.stuff-top-stories-frame.desktop {
  --_latest-headlines-flex-basis: 29%;
  --_top-stories-8th-story-flex-basis: 24%;
  --_top-stories-bottom-mid-column-flex-basis: 42%;
  margin-top: var(--grid-row-gap)
}

.stuff-top-stories-frame .story-card.secondary.img-square img {
  aspect-ratio: 1/1;
  -o-object-fit: cover;
  object-fit: cover
}

.stuff-top-stories-frame.desktop .tertiary-square .sf-story-image-container {
  --story-card-image-width: 5rem;
  --story-card-image-height: 5rem
}

.stuff-top-stories-frame.desktop .top-row {
  display: flex;
  gap: var(--grid-row-gap)
}

.stuff-top-stories-frame.desktop .hero-stories {
  flex: 1
}

.stuff-top-stories-frame.desktop .story1 {
  flex-basis: 67%
}

.stuff-top-stories-frame.desktop .ad-container:has(.story2),
.stuff-top-stories-frame.desktop .story2 {
  flex-basis: 33%
}

.stuff-top-stories-frame.desktop .stuff-latest-headlines-frame {
  flex-basis: var(--_latest-headlines-flex-basis)
}

.stuff-top-stories-frame.desktop .second-row .ad-container,
.stuff-top-stories-frame.desktop .second-row .secondary,
.stuff-top-stories-frame.desktop .second-row-tertiary-stories {
  flex-basis: 33%
}

.stuff-top-stories-frame.desktop .ad-container:has(.story8),
.stuff-top-stories-frame.desktop .story8 {
  flex-basis: var(--_top-stories-8th-story-flex-basis)
}

.stuff-top-stories-frame.desktop .ad-container:has(.bottom-mid-column),
.stuff-top-stories-frame.desktop .bottom-mid-column {
  flex-basis: var(--_top-stories-bottom-mid-column-flex-basis)
}

.stuff-top-stories-frame.desktop .remaining-stories {
  flex-basis: 33%
}

.bottom-mid-column .card-body,
.second-row-tertiary-stories .card-body {
  display: unset;
  flex: 1
}

.bottom-mid-column .card-body :not(:last-child),
.second-row-tertiary-stories .card-body :not(:last-child) {
  margin-bottom: var(--stuff-story-card-body-gap-global)
}

@media screen and (min-width: 1200px) {
  .stuff-top-stories-frame.desktop {
    --_latest-headlines-flex-basis: 30.5%
  }
}

@media screen and (min-width: 1440px) {
  .stuff-top-stories-frame.desktop {
    --_top-stories-8th-story-flex-basis: 28%;
    --_top-stories-bottom-mid-column-flex-basis: 38%
  }
}

.stuff-top-stories-frame.mobile {
  margin-top: var(--grid-row-gap)
}

.stuff-top-stories-frame.mobile:not(.contains-defcon) .story-card.lead>.sf-story-image-container {
  margin: calc(var(--grid-row-gap)*-1);
  width: calc(100% + var(--grid-row-gap)*2)
}

.stuff-top-stories-frame.mobile .stuff-latest-headlines-frame+.stuff-divider {
  display: none
}

.stuff-top-stories-frame.tablet {
  margin-top: var(--grid-row-gap)
}

.stuff-top-stories-frame .story-card.lead>.sf-story-image-container,
.stuff-top-stories-frame .story-card.lead>.sf-story-image-container img {
  width: 100%
}

.stuff-top-stories-frame.tablet .tertiary-square .sf-story-image-container {
  --story-card-image-width: 5rem;
  --story-card-image-height: 5rem
}

.stuff-top-stories-frame.tablet .second-row {
  display: flex;
  gap: var(--grid-row-gap)
}

.stuff-top-stories-frame.tablet .second-row.full-width .story2 {
  flex-basis: 100%
}

.stuff-top-stories-frame .second-row.full-width .img-square .sf-story-image-container,
.stuff-top-stories-frame.tablet .second-row.full-width .img-square img {
  aspect-ratio: unset;
  max-width: unset;
  width: 100%
}

.stuff-top-stories-frame.tablet .ad-container:has(.story2),
.stuff-top-stories-frame.tablet .fifth-row-left-col,
.stuff-top-stories-frame.tablet .forth-row .ad-container,
.stuff-top-stories-frame.tablet .forth-row-left-col,
.stuff-top-stories-frame.tablet .remaining-stories,
.stuff-top-stories-frame.tablet .story2,
.stuff-top-stories-frame.tablet .story8,
.stuff-top-stories-frame.tablet .stuff-latest-headlines-frame,
.stuff-top-stories-frame.tablet .third-row .ad-container,
.stuff-top-stories-frame.tablet .third-row .secondary {
  flex-basis: 50%
}

.fifth-row-left-col .card-body {
  display: unset;
  flex: 1
}

.fifth-row-left-col .card-body :not(:last-child) {
  margin-bottom: var(--stuff-story-card-body-gap-global)
}

.section-grid {
  display: flex;
  flex-direction: column
}

.stuff-top-stories-section-frame.desktop .story1 {
  flex-basis: 65%
}

.stuff-top-stories-section-frame.desktop .story2 {
  flex-basis: 35%
}

.stuff-top-stories-section-frame .img-square img {
  aspect-ratio: 1/1;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%
}

.stuff-top-stories-section-frame .section-grid .story-card>.sf-story-image-container,
.stuff-top-stories-section-frame .section-grid .story-card>.sf-story-image-container img,
.stuff-top-stories-section-frame .story1>.sf-story-image-container,
.stuff-top-stories-section-frame .story1>.sf-story-image-container img,
.stuff-top-stories-section-frame .story2>.sf-story-image-container,
.stuff-top-stories-section-frame .story2>.sf-story-image-container img {
  width: 100%
}

@media screen and (min-width: 768px) {
  .section-grid-left {
    margin-bottom: var(--grid-column-gap)
  }

  .section-grid-right {
    margin-top: var(--grid-column-gap)
  }

  .stuff-top-stories-section-frame.tablet .tertiary-square .sf-story-image-container {
    --story-card-image-width: 8rem;
    --story-card-image-height: 8rem
  }
}

@media screen and (min-width: 1200px) {
  .section-grid {
    flex-direction: row
  }

  .section-grid-left {
    margin-bottom: 0;
    margin-right: var(--grid-column-gap)
  }

  .section-grid-right {
    margin-left: var(--grid-column-gap);
    margin-top: 0
  }
}

.stuff-top-stories-section-frame .ads-visible {
  background-color: var(--clr-neutral-white);
  width: 100%
}

.stuff-top-stories-section-frame .ads-visible div {
  width: 100%
}

.stuff-frame-container.stuff-new-latest-headlines-frame {
  --stuff-frame-margin-top: 0px
}

.stuff-new-latest-headlines-frame .stuff-frame-inner-container {
  --_frame-border-color: var(--clr-neutral-200);
  border: 1px solid var(--_frame-border-color);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  padding: var(--spacing-24)
}

.stuff-new-latest-headlines-frame .stuff-divider {
  --stuff-divider-background-color: var(--clr-neutral-200)
}

.stuff-new-latest-headlines-frame .stuff-frame-heading {
  --stuff-text-heading-color: var(--clr-neutral-950);
  --stuff-text-heading-font-family: var(--ff-sans-wide);
  --stuff-text-heading-font-weight: var(--fw-700);
  --stuff-text-heading-font-size: var(--fs-20);
  --stuff-text-heading-line-height: var(--lh-100);
  letter-spacing: var(--spacing-4)
}

.stuff-new-latest-headlines-frame .story-card.new-text .stuff-text-heading {
  --stuff-text-heading-font-weight: var(--fw-600);
  --stuff-text-heading-font-size: var(--fs-14);
  --stuff-text-heading-line-height: var(--lh-140);
  --stuff-text-heading-font-family: var(--ff-sans)
}

.stuff-new-latest-headlines-frame .stuff-label {
  display: none
}

.stuff-new-latest-headlines-frame .stuff-timestamp {
  --stuff-timestamp-order: -1;
  --stuff-timestamp-text-color: var(--clr-text-alert)
}

.stuff-new-latest-headlines-frame .stuff-button {
  --stuff-button-gap: var(--spacing-8);
  width: 100%
}

.stuff-new-latest-headlines-frame .stuff-button svg {
  --stuff-button-icon-width: 12px;
  --stuff-button-icon-height: 12px
}

:root {
  --stuff-article-breadcrumbs-font: var(--fw-500) var(--fs-14) /var(--lh-130) var(--ff-sans)
}

p.article-breadcrumbs {
  color: var(--text-color-default);
  font: var(--stuff-article-breadcrumbs-font);
  margin: 0
}

.content-date {
  color: var(--stuff-article-subtext-color);
  font: var(--stuff-article-date-font);
  margin: 0;
  white-space: nowrap
}

.stuff-share-container {
  --_stuff-share-button-font: var(--fw-500) var(--fs-14) /var(--lh-130) var(--ff-sans);
  --_stuff-share-dropdown-font: var(--fw-400) var(--fs-16) /var(--lh-130) var(--ff-sans);
  --_stuff-share-dropdown-background-color: var(--theme-color-secondary-lighter);
  --_stuff-share-dropdown-hover-active-background-color: var(--theme-color-secondary);
  --_stuff-share-dropdown-outline: 1px solid var(--clr-neutral-white);
  --_stuff-share-dropdown-icon-fill: var(--clr-primary);
  --_stuff-share-button-offset-down: 14px;
  --_stuff-share-button-offset-up: 33px;
  --_stuff-share-button-offset-left: -12px;
  --_stuff-share-button-offset-right: -12px;
  --_stuff-share-dropdown-container-padding: var(--spacing-8) 0;
  --_stuff-share-dropdown-item-height: var(--spacing-48);
  --_stuff-share-dropdown-item-padding: 0 var(--spacing-24);
  display: flex;
  flex-direction: column;
  position: relative
}

.stuff-share {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: var(--spacing-8);
  justify-content: center;
  z-index: var(--z-index-10)
}

.stuff-share-container .stuff-share p {
  font: var(--_stuff-share-button-font);
  margin: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.stuff-share:not(.native).dropdown-active,
.stuff-share:not(.native):hover {
  background-color: var(--_stuff-share-dropdown-background-color);
  cursor: pointer
}

.stuff-share-dropdown svg>use {
  fill: var(--_stuff-share-dropdown-icon-fill)
}

.stuff-share-dropdown {
  background-color: var(--_stuff-share-dropdown-background-color);
  display: flex;
  flex-direction: column;
  position: absolute;
  z-index: var(--z-index-20)
}

.stuff-share-dropdown.down {
  top: calc(100% + var(--_stuff-share-button-offset-down))
}

.stuff-share-dropdown.up {
  top: calc(100% - var(--_stuff-share-button-offset-up));
  transform: translateY(-100%)
}

.stuff-share-dropdown.left {
  left: var(--_stuff-share-button-offset-left)
}

.stuff-share-dropdown.right {
  right: var(--_stuff-share-button-offset-right)
}

.share-dropdown-items {
  background-color: var(--_stuff-share-dropdown-background-color);
  display: flex;
  flex-direction: column;
  padding: var(--_stuff-share-dropdown-container-padding);
  z-index: var(--z-index-10)
}

.stuff-share:not(.native).dropdown-active:after,
.stuff-share:not(.native):hover:after {
  background-color: var(--_stuff-share-dropdown-background-color);
  content: "";
  height: 48px;
  position: absolute;
  width: 83px;
  z-index: calc(var(--z-index-10)*-1)
}

.share-dropdown-item {
  align-items: center;
  display: flex;
  gap: 8px;
  height: var(--_stuff-share-dropdown-item-height);
  justify-content: flex-start;
  padding: var(--_stuff-share-dropdown-item-padding)
}

.share-dropdown-item:hover {
  background-color: var(--_stuff-share-dropdown-hover-active-background-color);
  cursor: pointer
}

.share-dropdown-item:focus-visible {
  outline: var(--_stuff-share-dropdown-outline)
}

.share-dropdown-item p {
  font: var(--_stuff-share-dropdown-font);
  white-space: nowrap
}

:root {
  --stuff-article-date-font: var(--fw-500) var(--fs-14) /var(--lh-130) var(--ff-sans);
  --stuff-article-comment-share-font: var(--fw-500) var(--fs-14) /var(--lh-130) var(--ff-sans);
  --stuff-article-date-comment-share-width: 100%;
  --stuff-article-date-spacing-gap: unset;
  --stuff-article-date-alignment: center
}

@media screen and (min-width: 1200px) {
  :root {
    --stuff-article-date-comment-share-width: unset;
    --stuff-article-date-spacing-gap: var(--spacing-4);
    --stuff-article-date-alignment: flex-end
  }
}

.date-comment-share-container {
  align-items: var(--stuff-article-date-alignment);
  display: flex;
  gap: var(--stuff-article-date-spacing-gap);
  justify-content: space-between;
  margin-top: var(--stuff-article-header-margin);
  width: var(--stuff-article-date-comment-share-width)
}

.comment-and-share {
  fill: var(--text-color-default);
  align-items: center;
  display: flex;
  font: var(--stuff-article-comment-share-font);
  gap: var(--spacing-16);
  justify-content: center
}

.comment-and-share p {
  color: var(--text-color-default);
  margin: 0;
  padding: 0
}

.stuff-comment {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: var(--spacing-8);
  justify-content: center;
  white-space: nowrap
}

.stuff-comment .coral-count {
  margin-right: var(--spacing-4)
}

.stuff-comment .coral-comment {
  cursor: pointer
}

.stuff-article-header .common-tag-base {
  background-color: var(--clr-neutral-100);
  border: none;
  font: var(--fw-500) var(--fs-12) /var(--lh-130) var(--ff-sans)
}

:root {
  --stuff-article-header-margin: var(--spacing-12);
  --stuff-article-authors-font: var(--fw-500) var(--fs-14) /var(--lh-130) var(--ff-sans);
  --stuff-article-byline-font: var(--fw-400) var(--fs-14) /var(--lh-130) var(--ff-sans);
  --stuff-article-byline-border-bottom: 1px solid var(--clr-primary-lighter)
}

.stuff-author-byline {
  border-bottom: var(--stuff-article-byline-border-bottom);
  color: var(--text-color-default);
  gap: var(--spacing-16);
  padding-bottom: var(--stuff-article-header-margin);
  width: 100%
}

.stuff-author-byline,
.stuff-author-byline .author-container {
  align-items: center;
  display: flex
}

.stuff-author-byline p {
  font: var(--stuff-article-authors-font);
  margin: 0
}

.stuff-author-byline small {
  color: var(--stuff-article-subtext-color);
  font: var(--stuff-article-byline-font);
  margin: 0
}

.stuff-author-byline #avatar-img:first-child {
  margin-left: 0
}

.stuff-author-byline #avatar-img {
  border: var(--border-width-2) solid var(--clr-neutral-white);
  border-radius: 50%;
  height: 48px;
  margin-left: -7px;
  -o-object-fit: cover;
  object-fit: cover;
  width: 48px
}

.stuff-author-byline .avatar-container {
  align-items: center;
  display: flex;
  flex-shrink: 0
}

:root {
  --stuff-article-hero-image-desc-font: var(--fw-400) var(--fs-12) /var(--lh-140) var(--ff-sans);
  --stuff-article-header-padding: var(--spacing-12) var(--spacing-12) var(--spacing-16) var(--spacing-12);
  --stuff-article-hero-image-desc-padding: 0 var(--spacing-8);
  --stuff-article-article-controls-padding-bottom: 0;
  --stuff-article-header-gap: var(--spacing-12);
  --stuff-title-font-weight: var(--fw-400);
  --stuff-title-font-size: var(--fs-36);
  --stuff-title-font-line-height: var(--lh-120);
  --stuff-title-font-family: var(--ff-fjalla-one)
}

@media screen and (min-width: 768px) {
  :root {
    --stuff-article-header-padding: 0 0 var(--spacing-16) 0;
    --stuff-article-hero-image-desc-padding: 0
  }
}

@media screen and (min-width: 1200px) {
  :root {
    --stuff-article-title-font: var(--fw-600) var(--fs-62) /var(--lh-110) var(--ff-sans);
    --stuff-article-article-controls-padding-bottom: var(--spacing-12)
  }
}

.stuff-article-header {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: var(--stuff-article-header-gap);
  justify-content: space-between;
  max-width: var(--stuff-article-header-max-width);
  padding: var(--stuff-article-header-padding);
  width: 100%
}

.stuff-article-header h1 {
  color: var(--text-color-default);
  font: var(--stuff-title-font-weight) var(--stuff-title-font-size) /var(--stuff-title-font-line-height) var(--stuff-title-font-family);
  margin: 0;
  padding: 0
}

.article-controls {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--stuff-article-article-controls-padding-bottom);
  width: 100%
}

.stuff-hero-image {
  max-width: var(--stuff-article-header-max-width);
  width: 100%
}

.stuff-hero-image .hero-image {
  padding-bottom: var(--spacing-24)
}

.stuff-hero-image p {
  color: var(--stuff-article-subtext-color);
  font: var(--stuff-article-hero-image-desc-font);
  margin: var(--stuff-article-hero-image-desc-padding)
}

@media screen and (min-width: 0px) {
  .stuff-article-header h1 {
    padding-top: var(--spacing-16)
  }
}

@media screen and (min-width: 1024px) {
  .stuff-article-header h1 {
    margin: var(--spacing-32) 0
  }
}

@media screen and (min-width: 1200px) {
  .stuff-article-header h1 {
    --stuff-title-font-size: var(--fs-62);
    --stuff-title-font-line-height: var(--lh-125)
  }
}

.stuff-article-sentiment {
  margin: var(--measure-gaps-body-row-gap) 0
}

.stuff-comments-button {
  margin-top: var(--spacing-32)
}

#stuff-comment-btn {
  width: 100%
}

.comment-count-text {
  align-items: center;
  display: flex;
  gap: var(--spacing-8);
  margin-right: var(--spacing-4)
}

.stuff-article-sharebar {
  border-top: var(--border-width-1) solid var(--clr-primary-lighter);
  display: flex;
  justify-content: flex-start;
  padding: var(--spacing-16) 0
}

:root {
  --stuff-article-source-font: var(--fw-600) var(--fs-18) /var(--lh-150) var(--ff-sans)
}

.stuff-article-source {
  font: var(--stuff-article-source-font);
  padding: var(--spacing-8) 0
}

div#piano-article-end:not(:empty) {
  padding-bottom: var(--spacing-8)
}

#piano-article-end:empty {
  margin: var(--stuff-article-piano-gap-offset)
}

.article-block-rightrail-ad-container {
  display: var(--stuff-article-ads-display);
  width: var(--stuff-article-rightrails-width)
}

.article-sticky-ad-container {
  position: sticky;
  top: var(--ads-sticky-top)
}

ion-app.sticky-header .article-sticky-ad-container {
  --ads-sticky-top: calc(var(--header-height-global) + var(--header-decorative-bar-height-global) + var(--stuff-top-nav-bar-height) + 16px)
}

:root {
  --stuff-article-header-max-width: unset;
  --stuff-article-content-max-width: unset;
  --stuff-article-text-max-width: 100vw;
  --stuff-article-ads-gap: 0;
  --stuff-article-padding: var(--spacing-12);
  --stuff-article-block-padding: 0;
  --stuff-article-advert-padding: 0;
  --stuff-article-advert-margin: var(--spacing-24) 0 0 0;
  --stuff-article-ads-display: none;
  --stuff-article-rightrails-width: 300px
}

@media screen and (min-width: 768px) {
  :root {
    --stuff-article-content-max-width: 35rem;
    --stuff-article-text-max-width: 35rem;
    --stuff-article-ads-gap: var(--spacing-16);
    --stuff-article-padding: var(--spacing-16);
    --stuff-article-ads-display: block;
    --stuff-article-block-padding: 0 var(--spacing-16);
    --stuff-article-advert-padding: 0;
    --stuff-article-advert-margin: var(--spacing-24) 0 0 0
  }
}

@media screen and (min-width: 1024px) {
  :root {
    --stuff-article-text-max-width: 37.75rem;
    --stuff-article-content-max-width: 37.75rem;
    --stuff-article-ads-gap: var(--spacing-24);
    --stuff-article-padding: var(--spacing-32)
  }
}

@media screen and (min-width: 1200px) {
  :root {
    --stuff-article-content-max-width: 50.75rem
  }
}

@media screen and (min-width: 1440px) {
  :root {
    --stuff-article-content-max-width: 65.75rem;
    --stuff-article-header-max-width: 50.75rem
  }
}

.article-bottom-content-container.align-with-article,
.stuff-article-block {
  display: flex;
  flex-grow: 1;
  gap: var(--stuff-article-ads-gap);
  justify-content: center;
  padding: var(--stuff-article-block-padding);
  width: 100%
}

.article-block-container,
.article-bottom-content-container.align-with-article>div.content {
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  max-width: var(--stuff-article-content-max-width);
  width: 100%
}

.article-block-paragraph-ad-container .ad-container.ads-visible {
  margin: var(--stuff-article-advert-margin);
  padding: var(--stuff-article-advert-padding)
}

:root {
  --stuff-article-content-font: var(--fw-400) var(--fs-18) /var(--lh-150) var(--ff-sans);
  --stuff-article-subheading-font: var(--fw-500) var(--fs-24) /var(--lh-150) var(--ff-sans);
  --stuff-article-img-caption-title-font: var(--fw-600) var(--fs-20) /var(--lh-110) var(--ff-sans);
  --stuff-article-img-caption-body-font: var(--fw-400) var(--fs-14) /var(--lh-140) var(--ff-sans);
  --stuff-article-img-caption-credit-font: var(--fw-400) var(--fs-12) /var(--lh-140) var(--ff-sans);
  --stuff-article-piano-gap-offset: calc(var(--stuff-article-content-gap)*-1) 0 0 0
}

.stuff-article-content {
  --_content-max-width: var(--stuff-article-text-max-width);
  --_content-padding-x: 12px;
  --_content-padding: 0 var(--_content-padding-x);
  --article-content-width: calc(var(--_content-max-width) - var(--_content-padding-x)*2);
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--stuff-article-content-gap);
  max-width: var(--_content-max-width);
  padding: var(--_content-padding);
  width: 100%
}

@media screen and (min-width: 768px) {
  .stuff-article-content {
    --_content-padding-x: 0;
    --article-content-width: var(--_content-max-width)
  }
}

.stuff-article-content ol,
.stuff-article-content p,
.stuff-article-content ul {
  color: var(--text-color-default);
  font: var(--stuff-article-content-font);
  margin: 0
}

.stuff-article-content h2,
.stuff-article-content h3:not(.html-content h3) {
  font: var(--stuff-article-subheading-font);
  margin: 0
}

.stuff-article-content .html-content,
.stuff-article-content .html-content :not(.tik4-live) iframe {
  width: 100%
}

.stuff-article-content .html-content:has(iframe.puzzle-me) {
  border: none
}

.stuff-article-content .html-content iframe.puzzle-me {
  border: none;
  height: calc(100vh - var(--header-height-global))
}

.stuff-article-content .html-content:has(iframe.puzzle-me) {
  padding-left: 0;
  padding-right: 0;
  position: inherit;
  width: 100%
}

.stuff-article-content .html-content iframe.puzzle-me {
  width: 100%
}

.stuff-article-block .image-block {
  color: var(--stuff-article-subtext-color);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8)
}

.stuff-article-block .image-block p {
  color: var(--stuff-article-subtext-color);
  font: var(--stuff-article-img-caption-body-font)
}

.stuff-article-block .image-block span,
.stuff-article-block .video-info .video-credit {
  font: var(--stuff-article-img-caption-credit-font);
  letter-spacing: .6px;
  text-transform: uppercase
}

.stuff-article-block .body-video,
.stuff-article-block .html-content,
.stuff-article-block .image-block {
  z-index: 10
}

.stuff-article-block ol.content-item,
.stuff-article-block ul.content-item {
  list-style-position: outside;
  padding-inline-start: var(--spacing-24)
}

.ios .stuff-article-block ol.content-item,
.ios .stuff-article-block ul.content-item {
  padding-inline-start: 1.4em
}

.stuff-article-block #piano-article-newsletter:empty,
.stuff-article-block #piano-article-readmore:empty {
  margin: var(--stuff-article-piano-gap-offset)
}

.OB-REACT-WRAPPER .ob-widget-header span.ob-grid-header-text,
.OB-REACT-WRAPPER .ob-widget-header span.ob-grid-header-text>*,
.OB-REACT-WRAPPER .ob-widget-header span.ob-widget-text {
  --_header-font: var(--fw-700) var(--fs-40) /var(--lh-100) var(--ff-sans-condensed);
  color: var(--clr-primary);
  font: var(--_header-font);
  text-transform: uppercase
}

.OB-REACT-WRAPPER .ob-smartfeed-wrapper .ob-widget.ob-feed-layout {
  padding: 0
}

.stuff-article {
  --stuff-article-content-gap: var(--spacing-24);
  --stuff-article-padding-y: 0;
  --_content-part-padding: var(--spacing-16);
  background-color: var(--clr-neutral-white);
  cursor: default;
  display: flex;
  flex-direction: column;
  gap: var(--stuff-article-content-gap);
  justify-content: center;
  padding: var(--stuff-article-padding-y);
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
  width: 100%
}

.stuff-article.login-wall-active :is(.restricted-block, .restricted-body) {
  display: none
}

.stuff-article #piano-article-loginwall:empty {
  margin-bottom: calc(var(--stuff-article-content-gap)*-1);
  margin-top: calc(var(--stuff-article-content-gap)*-1)
}

.stuff-article.login-wall-active #piano-article-loginwall {
  position: relative
}

.stuff-article.login-wall-active #piano-article-loginwall:before {
  --_loginwall-gradient-height: 80px;
  background-image: linear-gradient(0deg, #fff 0, hsla(0, 0%, 100%, 0));
  content: "";
  height: var(--_loginwall-gradient-height);
  left: 0;
  position: absolute;
  right: 0;
  top: calc((var(--_loginwall-gradient-height) + var(--stuff-article-content-gap))*-1)
}

.stuff-article::-webkit-scrollbar {
  display: none
}

.stuff-article-loading-skeleton {
  margin: 0 auto;
  max-width: 1052px
}

.article-bottom .empty-rightrail {
  display: none
}

.stuff-article-content .block-type-corrections,
.stuff-article-content .block-type-disclaimer,
.stuff-article-content .block-type-methodology {
  padding: var(--_content-part-padding)
}

.stuff-article-content .block-type-corrections p,
.stuff-article-content .block-type-disclaimer p,
.stuff-article-content .block-type-methodology p {
  font-size: var(--font-size-16);
  font-style: italic;
  font-weight: 400;
  line-height: 135%
}

.stuff-article span.content-part-block-heading {
  display: inline;
  font-weight: 600
}

.stuff-article .content-part-block-heading+p {
  display: inline
}

.stuff-article .block-type-methodology {
  background: var(--clr-methodology-bg);
  border: 1px solid var(--clr-methodology-border)
}

.stuff-article .block-type-disclaimer {
  background: var(--clr-disclaimer-bg);
  border: 1px solid var(--clr-disclaimer-border)
}

.stuff-article .block-type-corrections {
  background: var(--clr-correction-bg);
  border: 1px solid var(--clr-correction-border)
}

.stuff-article-layout-container {
  background-color: var(--clr-neutral-white)
}

.active-article-container-parent {
  background-color: var(--uira-color-grey-light);
  position: relative
}

.active-article-container-parent:after {
  animation: shimmer 2s linear infinite;
  background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, .2) 7%, hsla(0, 0%, 100%, .5) 15%, hsla(0, 0%, 100%, .2) 22%, hsla(0, 0%, 100%, 0) 30%, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, .2) 37%, hsla(0, 0%, 100%, .5) 45%, hsla(0, 0%, 100%, .2) 52%, hsla(0, 0%, 100%, 0) 60%);
  background-repeat: no-repeat;
  background-size: 200% 100%;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%
}

@keyframes shimmer {
  0% {
    background-position: -100% 0
  }

  to {
    background-position: 100% 0
  }
}

#active-article-container {
  position: relative;
  z-index: 1
}

.transition-left-animationtransition-left-animation {
  opacity: 0;
  transform: translateX(-350px);
  transition: transform .4s ease, opacity .4s ease
}

.transition-right-animation {
  opacity: 0;
  transform: translateX(350px);
  transition: transform .4s ease, opacity .4s ease
}

@media screen and (min-width: 768px) {
  .stuff-article {
    --stuff-article-padding-y: var(--spacing-16) 0
  }
}

@media screen and (min-width: 992px) {
  .stuff-article {
    --_content-part-padding: var(--spacing-24)
  }
}

@media screen and (min-width: 1024px) {
  .article-bottom .empty-rightrail {
    display: block;
    height: 100%;
    width: 300px
  }
}

.stuff-video-layout .stuff-video-body .date-and-share-container {
  align-items: center;
  border-top: 1px solid var(--divider-lines-dividerlines-generic-light);
  display: flex;
  height: 47px;
  justify-content: space-between
}

.stuff-video-layout .stuff-video-body .date-and-share-container .stuff-share svg.icon {
  stroke: var(--action-bar-icon)
}

.stuff-video-layout .stuff-video-body .share-dropdown-items,
.stuff-video-layout .stuff-video-body .stuff-share.dropdown-active:after {
  --_stuff-share-dropdown-background-color: var(--share-popup-bg)
}

.stuff-video-layout .stuff-video-body .share-dropdown-item:hover {
  --_stuff-share-dropdown-hover-active-background-color: var(--share-popup-bg)
}

.stuff-video-layout .stuff-video-body .date-and-share-container .stuff-share-dropdown svg.icon,
.stuff-video-layout .stuff-video-body .date-and-share-container .stuff-share.dropdown-active svg.icon {
  --icon-color: var(--action-bar-icon);
  --_stuff-share-dropdown-icon-fill: var(--action-bar-icon)
}

.stuff-video-layout .stuff-video-body .date-and-share-container .stuff-share:not(.native):is(:hover, :hover:after) {
  --_stuff-share-dropdown-background-color: transparent
}

.stuff-video-layout .stuff-video-body .video-intro {
  font-family: var(--ff-sans);
  font-size: 18px;
  font-weight: var(--fw-400);
  line-height: 150%;
  max-width: 100%
}

@media screen and (min-width: 1200px) {
  .stuff-video-layout .stuff-video-body .video-intro {
    margin: 0 auto;
    max-width: var(--article-body-text-max-width)
  }
}

.stuff-video-layout .stuff-video-body {
  display: flex;
  flex-direction: column;
  gap: var(--article-body-row-gap);
  width: 100%
}

.stuff-video-layout .stuff-video-body .stuff-video-heading {
  --_video-heading-padding: 0 var(--video-content-side-padding);
  display: flex;
  flex-direction: column;
  gap: var(--measure-article-heading-row-gap);
  padding: var(--_video-heading-padding)
}

.stuff-video-layout .stuff-video-body .video-js {
  --_border-radius: 0;
  border-radius: var(--_border-radius)
}

.stuff-video-layout .stuff-video-body .stuff-video-heading .back-button {
  align-items: center;
  cursor: grab;
  display: flex;
  font-family: var(--ff-sans);
  font-size: 12px;
  font-weight: var(--fw-600);
  gap: 8px;
  letter-spacing: 2px;
  line-height: 13px;
  text-transform: uppercase;
  width: -moz-max-content;
  width: max-content
}

.stuff-video-layout .stuff-video-body .back-button svg.icon {
  --icon-color: var(--colors-elements-link-color-default);
  --icon-width: 12px;
  --icon-height: 12px
}

@media screen and (min-width: 768px) {
  .stuff-video-layout .stuff-video-body .temp-right-rail {
    --_display: block;
    --_width: 160px;
    --_height: 638px
  }

  .stuff-video-layout .stuff-video-body .global-video-player {
    --_width: 100%;
    --_margin-left: 0
  }

  .stuff-video-layout .stuff-video-body .stuff-video-heading {
    --_video-heading-padding: 0
  }
}

@media screen and (min-width: 1025px) {
  .stuff-video-layout .stuff-video-body .video-js {
    --_border-radius: 10px
  }
}

@media screen and (min-width: 1200px) {
  .stuff-video-layout .stuff-video-body .temp-right-rail {
    --_width: 300px
  }
}

.stuff-video-layout .bc-video-gallery iframe {
  border: none;
  width: 100%
}

#piano-article-more-from-stuff .more-from-stuff-title {
  --stuff-frame-heading-color: var(--text-color-default);
  --_title-alignment: center;
  color: var(--stuff-frame-heading-color);
  font-family: var(--ff-sans-wide);
  font-size: 20px;
  font-weight: var(--fw-700);
  letter-spacing: 4px;
  line-height: 100%;
  margin: 0;
  text-align: var(--_title-alignment);
  text-transform: uppercase;
  width: 100%
}

.video-bottom #piano-article-more-from-stuff .more-from-stuff-container.more-from-stuff-container {
  margin: 0
}

.article-bottom #piano-article-more-from-stuff .more-from-stuff-title {
  --_title-alignment: left
}

.video-bottom #piano-article-more-from-stuff .more-from-stuff-container {
  --stuff-article-content-max-width: 100%;
  --stuff-article-text-max-width: 100%
}

.video-bottom #piano-article-more-from-stuff .cx-flex-module[data-cx_r3ym] .cx-item:nth-last-child(2) {
  border-bottom: none;
  margin-bottom: 0
}

#piano-article-more-from-stuff .cx-flex-module[data-cx_r3ym] img {
  margin: 4px 16px 8px 0;
  order: 1
}

#piano-article-more-from-stuff .cx-flex-module[data-cx_r3ym] .timestamp:not(:empty) {
  display: inline
}

#piano-article-more-from-stuff .cx-flex-module[data-cx_r3ym] .sponsored {
  background: var(--label-sponsored-bg);
  border-radius: var(--corner-radius-small);
  color: var(--label-text-default);
  font-family: var(--ff-sans);
  font-size: 10px;
  font-weight: var(--fw-700);
  letter-spacing: 1px;
  text-transform: uppercase
}

#piano-article-more-from-stuff .cx-flex-module[data-cx_r3ym] .timestamp {
  color: var(--elements-text-timestamp-default)
}

#piano-article-more-from-stuff .cx-flex-module[data-cx_r3ym] .divider {
  background: var(--divider-lines-dividerlines-generic-light)
}

#piano-article-more-from-stuff .cx-flex-module[data-cx_r3ym] .cx-item .more-from-stuff-text-container {
  color: var(--text-color-default)
}

#piano-article-more-from-stuff .timestamp-author-separator {
  color: var(--colors-elements-dividerlines-primary-default)
}

#piano-article-more-from-stuff .author {
  color: var(--text-color-default)
}

@media screen and (min-width: 1204px) {
  .video-bottom #piano-article-more-from-stuff .more-from-stuff-title {
    --_title-alignment: left
  }
}

.video-bottom .video-bottom-content-container.align-with-article>div.content {
  --stuff-article-content-max-width: 100%
}

.video-bottom .video-bottom-content-container .stuff-text-heading {
  --_title-alignment: center;
  color: var(--stuff-frame-heading-color);
  font-family: var(--ff-sans-wide);
  font-size: 20px;
  font-weight: var(--fw-700);
  letter-spacing: 4px;
  line-height: 100%;
  text-align: var(--_title-alignment);
  text-transform: uppercase;
  width: 100%
}

.video-bottom .dark-background {
  --stuff-frame-heading-color: var(--elements-text-color-default)
}

.video-bottom .light-background {
  --stuff-frame-heading-color: var(--text-color-default);
  background: #fff
}

@media screen and (min-width: 1204px) {
  .video-bottom .video-bottom-content-container .stuff-text-heading {
    --_title-alignment: left
  }
}

:root {
  --article-body-row-gap: 24px;
  --measure-article-heading-row-gap: 12px;
  --measure-article-body-row-gap: 24px;
  --gaps-body-vertical-padding: 24px;
  --article-body-text-max-width: 608px
}

.stuff-video-layout {
  --video-content-max-width: 1440px;
  --video-content-side-padding: var(--measure-gaps-body-side-padding);
  --video-content-vertical-padding: 0;
  background: var(--watch-page-bg);
  color: var(--text-color-reverse)
}

.stuff-video-layout .stuff-video-container {
  --_video-container-padding: var(--video-content-vertical-padding) 0;
  align-items: flex-start;
  display: flex;
  gap: var(--measure-gaps-body-column-gap);
  justify-content: center;
  margin: 0 auto;
  max-width: var(--video-content-max-width);
  padding: var(--_video-container-padding)
}

@media screen and (min-width: 768px) {
  .stuff-video-layout {
    --video-content-vertical-padding: var(--video-content-side-padding)
  }

  .stuff-video-layout .stuff-video-container {
    --_video-container-padding: var(--video-content-vertical-padding) var(--video-content-side-padding);
    padding-bottom: var(--measure-article-body-row-gap)
  }
}

.stuff-video-layout {
  --divider-lines-dividerlines-generic-light: var(--gray-700)
}

.stuff-video-layout .video-bottom .light-background {
  --colors-theme-color-secondary-default: var(--gray-950)
}

.stuff-video-layout .video-bottom .dark-background {
  --colors-theme-color-secondary-default: var(--gray-100)
}

:root {
  --stuff-logo-width: 48px;
  --stuff-logo-height: 17px
}

.download-page {
  align-items: center;
  background: var(--ion-background-color);
  gap: 64px;
  padding: 32px 16px 16px
}

.download-body,
.download-page {
  align-self: stretch;
  display: flex;
  flex-direction: column
}

.download-body {
  gap: 32px
}

.title-container {
  align-items: center;
  gap: 16px
}

.title-container,
.title-container>div:first-of-type {
  align-self: stretch;
  display: flex;
  flex-direction: column
}

.title-container>div:first-of-type {
  gap: 8px
}

.title-container>div:first-of-type>h2 {
  font-family: var(--ion-font-family);
  font-size: var(--font-size-34);
  font-style: normal;
  font-weight: 600;
  line-height: 110%;
  margin: 0;
  text-align: center
}

.title-container>div:first-of-type>p {
  font-family: var(--ion-font-family-text);
  font-size: var(--font-size-18);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  margin: 0;
  text-align: center
}

.title-container>div:nth-of-type(2) {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 0
}

.title-container>div:nth-of-type(2)>p {
  display: flex;
  font-family: var(--ion-font-family-sans);
  font-size: var(--font-size-14);
  font-style: normal;
  font-weight: 400;
  justify-content: center;
  line-height: 140%;
  margin: 0;
  text-align: center
}

.download-page .stuff-logo {
  height: var(--stuff-logo-height);
  width: var(--stuff-logo-width)
}

.content-container {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 32px;
  justify-content: center
}

.app-image {
  width: 232px
}

.image-desc-container {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 32px;
  justify-content: center
}

.image-desc-container>p {
  font-family: var(--ion-font-family-text);
  font-size: var(--font-size-18);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  margin: 0;
  text-align: center
}

.image-desc-container>div:first-of-type {
  align-items: flex-start;
  display: flex;
  gap: 16px
}

.app-store,
.play-badge {
  height: 48px;
  width: 160px
}

.bottom-content {
  align-items: flex-start;
  gap: 16px
}

.bottom-content,
.bottom-content-container {
  align-self: stretch;
  display: flex;
  flex-direction: column
}

.bottom-content-container {
  align-items: center;
  background: var(--ion-color-base);
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, .25);
  gap: 32px;
  padding: 32px
}

.bottom-content-container>div {
  align-items: flex-end;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.bottom-content-container>div>p:first-of-type {
  align-self: stretch;
  font-family: var(--ion-font-family);
  font-size: var(--font-size-22);
  font-style: normal;
  font-weight: 600;
  line-height: 115%;
  margin: 0;
  text-align: center
}

.bottom-content-container>div>p:nth-of-type(2) {
  align-self: stretch;
  font-family: var(--ion-font-family-text);
  font-size: var(--font-size-18);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  margin: 0;
  text-align: center
}

.bottom-content-divider {
  border-top: 1px solid var(--ion-color-light-contrast);
  height: 0;
  width: 384px
}

@media only screen and (min-width: 576px) {

  .app-store,
  .play-badge {
    height: 70px;
    width: 235px
  }
}

@media only screen and (min-width: 768px) {
  .content-container {
    align-items: center;
    align-self: stretch;
    flex-direction: row;
    padding: 0 32px
  }

  .content-container,
  .image-desc-container {
    display: flex;
    gap: 32px;
    justify-content: center
  }

  .image-desc-container {
    align-items: flex-start;
    align-self: auto;
    flex: 1 0 0;
    flex-direction: column
  }

  .image-desc-container>p {
    text-align: start
  }

  .image-desc-container>div:first-of-type {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 16px
  }

  .bottom-content-container {
    align-items: flex-start;
    display: flex;
    flex-direction: row;
    justify-content: center
  }

  .bottom-content-container>div {
    align-items: flex-end;
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    gap: 8px
  }

  .bottom-content-divider {
    border-right: 1px solid var(--ion-color-light-contrast);
    border-top: none;
    display: inline;
    height: 141px;
    margin: 0;
    width: 0 !important
  }

  .bottom-content-container>div>p:nth-of-type(2) {
    padding: 6px
  }
}

@media only screen and (min-width: 1024px) {
  .title-container>div:first-of-type>h2 {
    font-family: var(--ion-font-family);
    font-size: var(--font-size-50);
    font-style: normal;
    font-weight: 600;
    letter-spacing: -.5px;
    line-height: 110%
  }

  .content-container>div:first-of-type {
    align-items: center;
    display: flex;
    flex: 1 0 0;
    gap: 10px;
    justify-content: flex-end
  }

  .app-image {
    width: 324px
  }

  .image-desc-container {
    flex: 1 0 0
  }

  .bottom-content-container {
    gap: 0;
    padding: 64px
  }

  .bottom-content-container>div>p:first-of-type {
    font-family: var(--ion-font-family);
    font-size: var(--font-size-26);
    font-style: normal;
    font-weight: 600;
    letter-spacing: -.26px;
    line-height: 110%
  }

  .bottom-content-divider {
    margin: 0 64px
  }
}

@media only screen and (min-width: 1200px) {
  .download-page {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 96px;
    padding: 64px 130px
  }
}

.maintenance-page {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 500px;
  padding: 20px 5px;
  text-align: center
}

.maintenance-message {
  margin-bottom: 10px;
  margin-top: 10px;
  max-width: 600px
}

.settings-list {
  --_page-surface-color: #fff;
  --_content-divider-background-color: linear-gradient(0deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1));
  --_divider-colour: var(--ion-color-content-tint);
  --_item-colour: var(--uira-color-black-95);
  --_surface-color: var(--clr-neutral-50);
  --_divider-label-color: var(--clr-neutral-550);
  --_item-text-color: var(--clr-neutral-950);
  --_item-divider-line: 1px solid var(--clr-neutral-100);
  --_settings-colour: var(--clr-primary);
  --_svg-colour: var(--clr-secondary)
}

ion-list.settings-list {
  background: var(--_page-surface-color);
  padding-top: 0
}

ion-item-divider.settings-divider {
  background: var(--_content-divider-background-color);
  color: var(--_divider-colour);
  font-family: var(--ion-font-family-sans);
  font-size: var(--font-size-12);
  font-weight: 400;
  height: 64px;
  line-height: 16.2px;
  padding: 32px 0 0 16px
}

ion-item-divider.settings-divider ion-label.settings-label,
ion-item.settings-item {
  font-family: var(--ion-font-family-sans) !important
}

ion-item.settings-item {
  --inner-padding-end: 0;
  --background: var(--_page-surface-color);
  color: var(--_item-colour);
  font-size: var(--font-size-16);
  font-weight: 400;
  height: 54px;
  line-height: 22.4px;
  padding: 0 16px
}

.settings-list ion-item-divider {
  --background: var(--_content-divider-background-color);
  border-bottom: 0
}

.settings-list ion-item::part(native) {
  height: 100%
}

.settings-list ion-item::part(detail-icon) {
  opacity: 1 !important;
  position: absolute;
  right: 0
}

.settings-list .stuff-settings-footer {
  background: var(--_surface-color);
  height: 65px
}

ion-item.text-item>div {
  display: flex;
  justify-content: space-between;
  width: 100%
}

ion-item.text-item>div>div:last-child {
  color: var(--_divider-colour);
  font-size: var(--font-size-12)
}

ion-item.settings-item>a {
  color: var(--_item-colour);
  display: block !important;
  font-family: var(--ion-font-family-sans);
  text-decoration: none
}

.stuff ion-list.settings-list {
  --_group-font: var(--fw-400) var(--fs-16) /var(--lh-130) var(--ff-sans);
  --_item-title-font: var(--fw-500) var(--fs-18) /var(--lh-120) var(--ff-sans);
  --_item-body-font: var(--fw-400) var(--fs-16) /var(--lh-150) var(--ff-sans);
  --_divider-padding: 24px 0 0 0;
  --_item-detail-icon-width: 22px;
  --_item-detail-icon-height: 22px;
  --_item-detail-icon-margin-left: 16px;
  padding-bottom: 0
}

.stuff ion-item.settings-item .title-icon-container:not(:empty) {
  align-items: center;
  background-color: var(--_settings-colour);
  border-radius: 50%;
  display: flex;
  height: 32px;
  justify-content: center;
  margin-right: 16px;
  width: 32px
}

.stuff ion-item.settings-item .title-icon-container svg {
  fill: var(--_svg-colour);
  height: 16px;
  margin: 8px
}

.stuff ion-item-divider.settings-divider {
  background: var(--_surface-color);
  height: auto;
  padding: var(--_divider-padding)
}

.stuff .first-group ion-item-divider.settings-divider {
  --padding-start: 0;
  --_divider-padding: 12px 0 0 0
}

.stuff ion-item-divider.settings-divider ion-label.settings-label {
  color: var(--_divider-label-color);
  font: var(--_group-font);
  margin: 0;
  padding: 8px 12px
}

.stuff ion-item.settings-item {
  --min-height: 0;
  border-top: var(--_item-divider-line);
  font: var(--_item-title-font);
  height: auto;
  padding: 16px 12px
}

.stuff ion-item.settings-item.first-item {
  border-top: none
}

.stuff ion-item.settings-item.text-item div {
  color: var(--_item-text-color);
  font: inherit
}

.stuff ion-item.settings-item a {
  color: var(--_item-text-color);
  z-index: 1
}

.stuff ion-item.settings-item.button-item .title {
  align-items: center;
  display: flex
}

.stuff ion-item.settings-item .body:not(:empty) {
  font: var(--_item-body-font);
  max-width: calc(100% - var(--_item-detail-icon-width) - var(--_item-detail-icon-margin-left));
  padding-top: 8px;
  white-space: break-spaces
}

.stuff .settings-list ion-item::part(detail-icon) {
  height: var(--_item-detail-icon-width);
  margin-left: var(--_item-detail-icon-margin-left);
  width: var(--_item-detail-icon-width)
}

.stuff .settings-list ion-item.has-body::part(detail-icon) {
  align-self: flex-start;
  z-index: -1
}

.stuff .settings-list ion-toggle::part(track) {
  align-self: flex-start
}

.stuff .settings-list .body .news-tips span {
  color: var(--_settings-colour);
  text-decoration: underline;
  text-underline-offset: 2px
}

.stuff .settings-list .body .news-tips a {
  text-decoration: none
}

.video-test-page .global-video-player {
  --video-destination-width: 500px;
  margin: 0 auto 48px;
  width: var(--video-destination-width)
}

.top-stories-right-fixed-ad {
  --_mobile-width: 0;
  --_tablet-width: 160px;
  --_desktop-width: 300px;
  --_ad-width: var(--_mobile-width);
  min-width: var(--_ad-width)
}

.ads-visible .top-stories-right-fixed-ad {
  --_ad-width: inherit
}

@media screen and (min-width: 768px) {
  .top-stories-right-fixed-ad {
    --_ad-width: var(--_tablet-width)
  }
}

@media screen and (min-width: 1024px) {
  .top-stories-right-fixed-ad {
    --_ad-width: var(--_desktop-width)
  }
}