:root {
  --color-mode: 'light';
  --color-accent: var(--ghost-accent-color);

  --color-brand-black: #191919;
  --color-brand-blue: #262a33;
  --color-brand-beige: #fef1e5;
  --color-brand-lightblue: #fbfdff;
  --color-brand-red: #dd1922;

  --color-text-primary: var(--color-brand-black);
  --color-text-secondary: var(--color-brand-blue);
  --color-border-primary: #d4c2b5;
  --color-border-secondary: #d4c2b5;
  --color-background-primary: var(--color-brand-beige);
  --color-background-secondary: #e8dbd1;

  --font-family-serif: 'Playfair Display', serif;
  --font-family-sansSerif: 'Poppins', sans-serif;
}

body {
  min-height: 120vh;
}

body.smaller {
  --font-size-scale-0: 10px;
  --line-height-scale-0: 14px;
  --font-size-scale-1: 12px;
  --line-height-scale-1: 14px;
  --font-size-scale-2: 14px;
  --line-height-scale-2: 18px;
  --font-size-scale-3: 16px;
  --line-height-scale-3: 18px;
  --font-size-scale-4: 18px;
  --line-height-scale-4: 22px;
  --font-size-scale-5: 22px;
  --line-height-scale-5: 26px;
  --font-size-scale-6: 26px;
  --line-height-scale-6: 30px;
  --font-size-scale-7: 30px;
  --line-height-scale-7: 30px;
  --font-size-scale-8: 38px;
  --line-height-scale-8: 38px;
  --font-size-scale-9: 46px;
  --line-height-scale-9: 46px;
  --font-size-scale-10: 70px;
  --line-height-scale-10: 70px;
  --font-size-scale-body-copy: 18px;
  --line-height-scale-body-copy: 30px;
}

body.larger {
  --font-size-scale-0: 16px;
  --line-height-scale-0: 20px;
  --font-size-scale-1: 18px;
  --line-height-scale-1: 20px;
  --font-size-scale-2: 20px;
  --line-height-scale-2: 24px;
  --font-size-scale-3: 22px;
  --line-height-scale-3: 24px;
  --font-size-scale-4: 24px;
  --line-height-scale-4: 28px;
  --font-size-scale-5: 28px;
  --line-height-scale-5: 32px;
  --font-size-scale-6: 32px;
  --line-height-scale-6: 36px;
  --font-size-scale-7: 36px;
  --line-height-scale-7: 36px;
  --font-size-scale-8: 44px;
  --line-height-scale-8: 44px;
  --font-size-scale-9: 52px;
  --line-height-scale-9: 52px;
  --font-size-scale-10: 76px;
  --line-height-scale-10: 76px;
  --font-size-scale-body-copy: 24px;
  --line-height-scale-body-copy: 36px;
}

h1,
h2,
h3,
h4 {
  color: var(--color-text-secondary);
}

.c-header {
  box-shadow: none;
}

.c-header__bottom .o-grid {
  border-top: var(--border-width) var(--border-style) var(--color-border-secondary);
  border-bottom: var(--border-width) var(--border-style) var(--color-border-secondary);
}

.text-resize {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
}

.text-resize .c-header__button--textResize {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  margin: 0;
  width: 24px;
  height: 24px;
  background-color: var(--color-background-secondary);
  border-radius: 4px;
}

.text-resize .c-header__button--textResize .smaller {
  font-size: 10px;
}

.text-resize .c-header__button--textResize .larger {
  font-size: 20px;
}

.u-visible-on-mobile {
  display: none;
}

@media (max-width: 63.99em) {
  .u-visible-on-mobile {
    display: block !important;
  }
}

@media (min-width: 40em) {
  .c-header__top-inner {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.c-card--large .c-card__standfirst, article .c-content * {
  font-family: var(--font-family-sansSerif);
}

article .c-content h1,
article .c-content h2,
article .c-content h3 {
  font-family: var(--font-family-serif);
}

.c-topper__headline {
  font-family: var(--font-family-serif);
}

.c-card__standfirst {
  font-family: var(--font-family-sansSerif);
}

.swiper .buttons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  width: 100%;
  z-index: 1;
  margin-top: 16px;
  margin-bottom: 16px;
  padding-right: 32px;
}

.swiper .buttons .swiper-button-prev,
.swiper .buttons .swiper-button-next {
  background-color: var(--color-background-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: 50%;
  color: var(--color-text-primary);
  font-size: 0;
  height: 40px;
  line-height: 0;
  margin: 0;
  padding: 0;
  position: unset;
  width: 40px;
  z-index: 1;
}

.swiper .buttons .swiper-button-prev::after,
.swiper .buttons .swiper-button-next::after {
  font-size: 16px;
}

.ad-title {
  font-family: var(--font-family-sansSerif);
  font-size: 14px;
  line-height: 16px;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.c-ad {
  margin-top: var(--space-32);
  margin-bottom: var(--space-32);
}

.head-space {
  background-color: var(--color-background-secondary);
}

.header-ad {
  padding: 0;
  max-height: 90px;
  aspect-ratio: 728/90;
}

.header-ad .center {
  border-bottom: var(--border-width) var(--border-style) var(--color-border-secondary);
}

.c-header__top {
  border-bottom: 0;
}

.c-hero .center .c-card {
  background-color: var(--color-background-secondary);
  width: 100%;
}

.c-hero .center .c-card .c-card__link {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.c-card--center .c-card__content {
  padding-bottom: var(--space-16);
}

.c-logo__img {
  max-height: 80px;
}

.c-hero .left.c-stack-stories>:not(:last-child) {
  border: none;
}

.c-hero .left.c-stack-stories .headlines article .c-teaser__tag.c-tag {
  display: none;
}

.c-section--featured {
  margin-top: var(--space-16);
}

.swiper {
  padding-left: calc(var(--grid-margin) - var(--space-8)) !important;
  padding-right: calc(var(--grid-margin) - var(--space-8)) !important;
}

@media (min-width: 64em) {
  .swiper {
    padding-left: calc(var(--grid-margin-large) - var(--space-8)) !important;
    padding-right: calc(var(--grid-margin-large) - var(--space-8)) !important;
  }
}


.swiper-slide {
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}

@media (max-width: 63.99em) {
  .c-logo__img {
    margin-bottom: var(--space-16);
  }

  .c-hero .left .highlight {
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .c-hero .left article {
    margin-bottom: var(--space-16);
  }

  .c-hero .left.c-stack-stories {
    padding-bottom: var(--space-16);
    border-bottom: var(--border-width) var(--border-style) var(--color-border-secondary);
  }
}

@media (min-width: 64em) {
  .c-card--center .c-card__content {
    padding-bottom: var(--space-32);
  }

  .c-hero .left {
    grid-column: 1/span 4;
  }

  .c-hero .center {
    grid-column: 5/span 5;
  }

  .c-hero .left.c-stack-stories {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .c-hero .left.c-stack-stories .highlight article:first-child .c-teaser__headline {
    font-size: var(--font-size-scale-8);
    line-height: var(--line-height-scale-9);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .c-hero .left.c-stack-stories .headlines article .c-teaser__headline {
    font-size: var(--font-size-scale-3);
  }

  .c-hero .left.c-stack-stories .headlines {
    border-left: var(--border-width) var(--border-style) var(--color-border-secondary);
    padding-left: var(--space-16);
  }

  .c-hero .left.c-stack-stories .headlines article:not(:last-child) {
    margin-bottom: var(--space-16);
  }
}

.large-divider {
  height: 39px;
  background-color: var(--color-text-secondary);
}

.cta .o-grid {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: var(--space-16);
}

.c-visibility-label--public {
  display: none;
}

.c-hero .left.c-stack-stories .highlight .c-teaser__standfirst {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-family-sansSerif);
}

.c-hero .left.c-stack-stories .headlines .c-teaser__standfirst {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-family-sansSerif);
  font-size: var(--font-size-scale-2);
}

.c-teaser__readmore {
  display: inline-block;
  margin-top: var(--space-8);
}

.c-signup-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 90vw;
  height: 90vh;
  max-width: 640px;
  max-height: 480px;
  transform: translate(-50%, -1000vh);
  background-color: var(--color-background-secondary);
  padding: var(--space-32);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
  border-radius: 6px;
}

.c-signup-modal .lead {
  margin-bottom: var(--space-16);
}

.c-signup-modal.hidden {
  animation: fadeOutSlideDown 0.3s ease-out;
}

@keyframes fadeInSlideUp {
  0% {
    opacity: 0;
    transform: translate(-50%, -45%);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@keyframes fadeOutSlideDown {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -45%);
  }
}

.c-signup-modal.active {
  animation: fadeInSlideUp 0.3s ease-out;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

.signup-modal-backdrop {
  backdrop-filter: blur(0px);
  transition: backdrop-filter 0.3s ease-out;
}

.c-signup-modal.active + .signup-modal-backdrop {
  display: block;
  position: fixed;
  left: 0;
  top: -120px;
  right: 0;
  bottom: 0;
  backdrop-filter: blur(6px);
  z-index: 999;
}

.close-modal {
  width: 24px;
  height: 24px;
  position: absolute;
  top: 16px;
  right: 16px;
  cursor: pointer;
}

.c-signup-modal .header {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-16);
}

.c-signup-modal form label {
  display: block;
  margin-bottom: var(--space-16);
}

.c-signup-modal form p:where(.loading, .success, .error)  {
  display: none;
}

.loading .loading, .success .success, .error .error {
  margin-top: var(--space-16);
  display: block;
}

.account {
  display: flex;
  flex-direction:column;
  gap: 8px;
}

.gh-portal-signup-message {
  display: none !important;
}

@media screen and (max-width: 63.99em) {
  .account .c-btn {
    padding: 8px 16px;
  }

  .c-header__top-inner {
    gap: 0;
  }
}

@media screen and (min-width: 64em) {
  .tag-template .o-grid > article.c-card {
    display: inline-block;
    width: 25%;
    padding: 15px;
  }

  .tag-template .o-grid > article.c-card .c-card__link {
    height: 5.3rem;
    display: block;
    overflow-y: hidden;
  }
}