@charset "UTF-8";:root {
  --primary: #00a8ff;
  --secondary: #323437;
  --ahd-red: #ED1941;
  --ahd-red-fill: #E7123A;
  --ahd-red-text: #F92848;
  --ahd-red-text-panel: #FF555C;
  --ahd-text-meta: #90929B;
  --ahd-text-current-page: #7E6BFF;
  --ahd-text-counter: #828282;
  --ahd-banner-bg: #14281b;
  --ahd-text-secondary: #B0B4C5;
  --ahd-bg-page: #19171A;
  --ahd-bg-panel: #2F2732;
  --ahd-bg-footer: #3B383F;
  --panel-grey-purple: #2F2732;
  --ad-backing-grey: #252525;
  --black-high-emphasis: hsla(0, 0%, 15%, 0.87);
  --black-medium-emphasis: hsla(0, 0%, 15%, 0.6);
  --black-inactive-emphasis: hsla(0, 0%, 15%, 0.54);
  --black-disabled-emphasis: hsla(0, 0%, 15%, 0.38);
  --black-action-emphasis: hsla(0, 0%, 15%, 0.12);
  --black-subtle-emphasis: hsla(0, 0%, 15%, 0.08);
  --white-high-emphasis: hsla(0, 0%, 100%, 1);
  --white-medium-emphasis: hsla(0, 0%, 100%, 0.7);
  --green: #28a745;
  /* Barlow is the one font the site loads; Source Sans Pro never was, so text left on the default fell back to the
     browser's own font */
  --font-family-sans-serif: 'Barlow', sans-serif;
  --font-family-serif: "Source Serif Pro", serif;
  --font-size-base: 16px;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --spacing: 8px;
  --elevation-1: 0 0 16px var(--black-medium-emphasis);
  --elevation-2: 0 0 16px var(--black-subtle-emphasis);
  --border-radius: 4px
}


html {
  background-color: var(--secondary);
  font-size: var(--font-size-base)
}

body {
  font: 1.125rem/1.6 var(--font-family-sans-serif);
  color: var(--black-high-emphasis);
  -webkit-font-smoothing: antialiased
}

a {
  color: var(--primary);
  transition: color .15s linear
}

hr {
  border-top: 2px solid var(--black-subtle-emphasis)
}

body>.optout-confirmation {
  display: none
}

/* BREAK */

.main-header {
  background-color: #19171A
}

/* Page content sits in this landmark, outside the header, so it needs the header's background */
.main-landmark {
  display: block;
  background-color: var(--ahd-bg-page, #19171A);
}

/* The skip link moves focus here; the landmark is not a control, so it draws no focus ring */
.main-landmark:focus {
  outline: none;
}

/* Hidden on screen, still read by screen readers */
.sr-only,
.skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link (WCAG 2.4.1): the first thing to take focus on the page, shown over the top-left corner while it has it */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 8px 16px;
  background-color: var(--ahd-bg-page);
  color: var(--white-high-emphasis);
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
  border-radius: var(--border-radius);
}

.skip-link:focus {
  outline: 2px solid var(--white-high-emphasis);
  outline-offset: 2px;
}
.hero-anchor {
  align-items: flex-end;
  color: var(--white-high-emphasis);
  display: flex;
  position: relative;
  text-decoration: none;
}

.secondary-hero-anchor {
  align-items: flex-end;
  color: var(--white-high-emphasis);
  display: flex;
  position: relative;
  text-decoration: none;
  min-height: 280px;
}

.hero-figure {
  background-color: var(--secondary);
  height: 100%;
  /* left: 0; */
  margin-bottom: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
  margin: 0;
}

.hero-img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* Cropped images keep the top of the photo rather than the middle, so portrait shots of people
   keep their heads. Landscape stills are barely affected because little of them is cropped. */
.hero-img,
.hero-img-secondary,
.content-hero-img,
.remaining-article-img,
.category-page-hero-img,
.latest-review-img {
  object-position: center 15%;
}

.barlow {
  font-family: 'Barlow', sans-serif;
}

.bold {
  font-weight: var(--font-weight-bold);
}

.semi-bold {
  font-weight: var(--font-weight-semibold);
}

.hero-title {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-family: 'Barlow', sans-serif;
}

.secondary-hero-title {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
}

.hero-tagline {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.hero-author {
  margin-top: 0;
  margin-bottom: 0;
  color: var(--ahd-text-meta);
  font-family: 'Barlow', sans-serif;
  font-size: 12px;
  margin-right: 4px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.landing-remaining-articles-container {
  /* padding-left: calc(var(--spacing) * 3);
  padding-right: calc(var(--spacing) * 3); */
  /* padding-bottom: calc(var(--spacing) * 5); */
  width: 100%;
  box-sizing: border-box;
}

.secondary-hero-article-container {
  border-bottom: 2px solid var(--black-subtle-emphasis);
  padding-bottom: calc(var(--spacing) * 3);
  background-color: white;
}

.landing-article-anchor {
  text-decoration: none;

  border-bottom: 2px solid var(--black-subtle-emphasis);
  margin-bottom: calc(var(--spacing) * 2);
  padding-bottom: calc(var(--spacing) * 3);
  align-items: center;
  display: flex;
}

.landing-article-title {
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  margin-bottom: 0.5rem;
  margin-top: 0;
  color: white;
}

.most-popular-article-summary {
  font-size: 16px;
  margin-bottom: 1rem;
  color: #CFCFCF;
  font-family: 'Barlow', sans-serif;
}

.landing-article-author {
  margin-bottom: 0;
  color: var(--black-medium-emphasis);
}

.hero-badge {
  background-color: var(--ahd-red-fill);
  color: white;
  align-items: center;
  display: inline-flex;
  font-size: .75rem;
  font-weight: var(--font-weight-semibold);
  justify-content: center;
  min-height: 22px;
  padding: 0 var(--spacing);
  /* margin-bottom: 0.5rem!important; */
  border-radius: 0.25rem;
  text-transform: uppercase;
  min-width: 30px;
}

.review-score-badge {
  background-color: var(--ahd-red-fill);
  color: white;
  align-items: center;
  display: inline-flex;
  font-size: .75rem;
  font-weight: var(--font-weight-semibold);
  justify-content: center;
  min-height: 22px;
  padding: 0 var(--spacing);
  border-radius: 0.65rem;
  text-transform: uppercase;
  font-size: 15px;
}

.featured-post__content {
  padding: calc(var(--spacing) * 4) calc(var(--spacing) * 3);
  display: block;
  z-index:1
}

/* Headings default to Barlow like the rest of the redesign. They used Source Serif Pro, which the site never loads,
   so pages without their own heading styles (accessibility statement, terms, privacy, contact) fell back to Times. */
h1,.heading1 {
  font: 2.875rem/1.2 var(--font-family-sans-serif);
  font-weight: var(--font-weight-bold)
}

h2,.heading2 {
  font: 2rem/1.2 var(--font-family-sans-serif);
  font-weight: var(--font-weight-bold)
}

h3,.heading3 {
  font: 1.5rem/1.2 var(--font-family-sans-serif);
  font-weight: var(--font-weight-bold)
}

h4,.heading4 {
  font: 1.125rem/1.4 var(--font-family-sans-serif);
  font-weight: var(--font-weight-bold)
}

/* A heading moved to another level to fix the page outline keeps the look of the level it was: it
   carries that level's class, which takes the font above, and gets that level's browser margins here.
   Each heading's own class rule comes later, so it still wins */
.heading2 { margin-block: 0.83em }
.heading3 { margin-block: 1em }
.heading4 { margin-block: 1.33em }

/* There is no h5 or h6 rule, so a former h5 or h6 drops the h2-h4 font and takes the browser's size
   for its level */
.heading5 {
  font: inherit;
  font-size: 0.83em;
  font-weight: bold;
  margin-block: 1.67em
}

.heading6 {
  font: inherit;
  font-size: 0.67em;
  font-weight: bold;
  margin-block: 2.33em
}

.subtitle1 {
  font: 1rem/1.4 var(--font-family-sans-serif);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 1px;
  text-transform: uppercase
}

.subtitle2 {
  font: 0.875rem/1.4 var(--font-family-sans-serif);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 1px;
  text-transform: uppercase
}

.subtitle3 {
  font: 0.75rem/1.4 var(--font-family-sans-serif);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 1px;
  text-transform: uppercase
}

.body1 {
  font: 1.125rem/1.6s var(--font-family-sans-serif);
  font-weight: 400
}

.body2 {
  font: 0.875rem/1.6 var(--font-family-sans-serif);
  font-weight: 400
}

/* DESKTOP */
@media screen and (min-width: 49rem) {
  .review-summary-container {
    min-height: 220px;
    background-color: var(--ahd-red-fill);
    display: flex;
    flex-direction: row;
    border-radius: 1rem;
  }

  .review-summary-figure {
    margin: 0;
    height: 100%;
  }

  .review-summary-img {
    width: 300px;
    height: 100%;
    min-height: 220px;
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
    object-fit: cover;
  }

  .hero-figure {
    background-color: var(--secondary);
    height: 100%;
    margin-bottom: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 33.33%;
    z-index: 0;
    margin: 0;
  }

  .mobile-only {
    display: none !important;
  }

  .review-score-badge-most-popular {
    position:absolute;
    top: 10px;
    right: 30px;
  }

  .review-score-badge-latest {
    position:absolute;
    top: 10px;
    right: 15px;
  }

  .review-score-badge-category-large {
    position:absolute;
    top: 10px;
    right: 15px;
  }

  .review-score-badge-category-small {
    position:absolute;
    top: 35px;
    left: 15px;
  }

  .image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to bottom, rgba(25, 24, 26, 0), rgba(25, 24, 26, 1));
  }
}

/* MOBILE */
@media screen and (max-width: 48.99rem) {
  .image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(to bottom, rgba(25, 24, 26, 0), rgba(25, 24, 26, 1));
  }

  .review-summary-container {
    height: fit-content;
    min-height: 300px;
    background-color: var(--ahd-red-fill);
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
  }

  .review-summary-img {
    width: 100%;
    height: 180px;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    object-fit: cover;
  }

  .review-summary-figure {
    margin: 0;
    width: 100%;
    height: 180px;
  }

  .hero-anchor-carousel {
    position: relative;
  }

  .review-score-badge-category-small {
    position:absolute;
    top: 35px;
    left: 15px;
  }

  .review-score-badge-category-large {
    position:absolute;
    top: 10px;
    right: 10px;
  }

  .review-score-badge-carousel {
    position:absolute;
    top: 10px;
    right: 10px;
  }

  .review-score-badge-latest {
    position:absolute;
    top: 10px;
    right: 10px;
  }

  .review-score-badge-most-popular {
    position:absolute;
    top: 10px;
    right: 10px;
  }

  .article-lead-image {
    height: 300px;
    margin:0;
  }

  .desktop-only {
    display: none !important;
  }

  .hero-img-secondary {
    height: 100%;
    object-fit: cover;
    width: 100%;
    max-height: 280px
  }

  .landing-remaining-articles-container {
    /* padding-left: calc(var(--spacing) * 3);
    padding-right: calc(var(--spacing) * 3); */
    padding-bottom: calc(var(--spacing) * 5);
    width: 100%;
    box-sizing: border-box;
  }
}

.c-cta-link {
  align-items: center;
  font-size: .875rem;
  font-weight: var(--font-weight-semibold);
  display: inline-flex;
  letter-spacing: 1px;
  line-height: 1.4;
  text-transform: uppercase;
  text-decoration: none;
}

.c-cta-link svg {
  height: 18px;
  fill: var(--primary);
  transition: fill .15s linear;
  margin-left: calc(var(--spacing) * 0.5);
  width: 18px
}

.c-cta-link:hover,.c-cta-link:active {
  text-decoration: none
}

.c-cta-link:hover svg,.c-cta-link:active svg {
  font-weight:700;
}

.nav-link-active {
  font-weight:700 !important;
}

.app-container {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
  background-color: #19171A;
}

/* FOOTER */
.main-footer {
  background: linear-gradient(to bottom, var(--ahd-bg-footer), #151416 90%, #302D38);
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.main-footer .footer-content {
  color: var(--white-medium-emphasis);
  /* max-width: 600px; */
  padding: calc(var(--spacing) * 4) calc(var(--spacing) * 3);
  text-align: center;
  /* background: linear-gradient(to bottom, #3B383F, #151416 90%, #302D38); */
}

.cover-stories-footer-sub-container {
  display: flex;
  flex-direction: row;
}

@media(max-width: 48.99rem) {
  .main-footer .footer-content {
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 2);
  }

  .cover-stories-footer-sub-container {
    flex-direction: column;
  }
}

@media(min-width: 992px) {
  .main-footer .footer-content {
      padding:calc(var(--spacing) * 5);
      display: flex;
      flex-direction: column;
      max-width: 1200px;
      width: 100%;
  }

  .footer-links-parent-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
}

.main-footer .footer-logo {
  display: inline-block;
  margin-bottom: calc(var(--spacing) * 2);
  width: 146px
}

.main-footer .footer-logo img {
  width: 100%
}

.main-footer .footer-nav {
  margin-bottom: calc(var(--spacing) * 2)
}

.c-mobile-nav {
  background-color: var(--secondary);
  margin-bottom: calc(var(--spacing) * 3)
}

.c-mobile-nav .nav-link {
  color: var(--white-high-emphasis);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 1px;
  padding-bottom: 10px;
  padding-top: 10px;
  text-transform: uppercase;
  display: block;
  padding: 0.5rem 1rem;
}

.c-nav .mobile-nav-link {
  line-height: 0;
  margin-right: calc(var(--spacing) * -1);
  padding: calc(var(--spacing) * 1)
}

.c-nav .mobile-nav-link svg {
  fill: var(--black-high-emphasis)
}

.c-nav--dark .nav-link {
  color: var(--white-high-emphasis)
}

.c-nav--dark .nav-link:hover,.c-nav--dark .nav-link:active {
  font-weight: 700;
}

.c-nav--dark .nav-link .mobile-nav-link svg {
  fill: var(--white-high-emphasis)
}

.footer-nav-list {
  flex-direction: column!important;
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.privacy-footer-nav-list {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
  justify-content: center;
  flex-direction: column;
  margin: 0;
}

.category-footer-nav-list {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
  justify-content: center;
  flex-direction: row;
  margin: 0;
  gap: 45px;
}

.terms-and-conditions-container-footer {
  display: flex;
  flex-direction: column;
}

.cover-stories-container-footer {

}

.footer-logo-container {
  width: 100%;
  display: flex;
  border-bottom: 2px solid #493E4D;
  margin-bottom: 10px;
}

.figjam-trademark-container {
  width: 100%;
  background: #19171A;
  display: flex;
  justify-content: center;
}

.footer-sub-title {
  color: #FFFFFF;
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  font-family: 'Barlow', sans-serif;
  margin: 0 0 10px 0;
  text-align: start;
  text-transform: uppercase;
}

.trademark-text {
  color: white;
  font-family: 'Barlow', sans-serif;
  font-size: 15px;
  font-weight: var(--font-weight-regular);
}

.nav-link {
  text-decoration: none;
}

.privacy-nav-item {
  box-sizing: border-box;
  width: fit-content;
  margin-bottom: 4px;
}

.category-nav-item {
  box-sizing: border-box;
  width: fit-content;
  margin-bottom: 4px;
}

.privacy-nav-link {
  display: block;
  text-decoration: none;
  background-color: transparent;
  box-sizing: border-box;
  color: white;
  font-family: 'Barlow', sans-serif;
  font-weight: var(--font-weight-regular);
  font-size: 14px;
}

.category-nav-link {
  display: block;
  text-decoration: none;
  background-color: transparent;
  box-sizing: border-box;
  color: white;
  font-family: 'Barlow', sans-serif;
  font-weight: var(--font-weight-bold);
  font-size: 14px;
}

.top-nav {
  /* left: 0; */
  /* position: absolute; */
  /* top: 0; */
  /* width: 100%; */
  z-index: 9;
  align-items: center;
  /* box-shadow: var(--elevation-2); */
  display: flex;
  height: calc(var(--spacing) * 8);
  justify-content: space-between;
  /* padding-left: calc(var(--spacing) * 3); */
  /* padding-right: calc(var(--spacing) * 3); */
}

@media screen and (max-width: 48.99rem) {
  .top-nav {
    height: 50px;
  }
}



.top-nav .logo {
  display: block;
  margin-right: calc(var(--spacing) * 2);
  width: auto;
  color: var(--primary);
  text-decoration: none;
  background-color: transparent;
}

/* DESKTOP */
@media screen and (min-width: 49rem) {

  body {
    font-size: 17px;
  }

  .hero-anchor:hover .landing-hero-img {
    transform: scale(1.02);
    transition: transform 0.7s;
  }

  .hero-anchor:not(:hover) .landing-hero-img {
    transform: scale(1);
    transition: transform 0.7s;
  }

  .secondary-hero-anchor:hover .landing-hero-img {
    transform: scale(1.02);
    transition: transform 0.7s;
  }

  .secondary-hero-anchor:not(:hover) .landing-hero-img {
    transform: scale(1);
    transition: transform 0.7s;
  }

  .container-xl {
    margin-right: auto;
    margin-left: auto;
    max-width: 1140px;
  }

  .secondary-hero-anchor {
    height: 100%;
  }

  .secondary-hero-col-lg {
    height: 100%
  }

  .hero-section-container {
    height: 533px;
    background-color: #19171A;
    display: flex;
    justify-content: center;
  }

  .hero-carousel-container {
    max-width: 2400px;
    width: 100%
  }

  .hero-sub-container {
    min-height: 760px;
  }

  .h-50 {
    height: 50% !important;
  }

  .mobile-nav-link {
    display: none;
  }
  .top-nav-list {
    font: 0.875rem/1.6 var(--font-family-sans-serif);
    font-weight: 400;
    display: flex;
    /* flex-wrap: wrap; */
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    margin-top: 0;
  }

  .top-nav {
    justify-content: flex-start !important;
    box-shadow: var(--elevation-2);
    width: 100%;
  }

  .top-nav-list .nav-item {
    box-sizing: border-box;
    font: 0.875rem/1.6 var(--font-family-sans-serif);
    font-weight: 400;
  }

  .top-nav-list .nav-link {
    color: white;
    font-weight: 600;
    font-family: 'Barlow', sans-serif;
    font-size: 15px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: block;
    padding: 0.5rem 1rem;
    text-decoration: none;
    background-color: transparent;
  }

  .hero-sub-container {
    display: flex;
    flex-wrap: wrap;
  }

  .primary-hero-container {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .secondary-hero-article-container {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
    padding-bottom: 0;
    border-bottom: 0px;
  }

  .hero-anchor {
    height: 100%;
  }

  .hero-img-secondary {
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  .main-content {
    padding-bottom: calc(var(--spacing) * 2);
    padding-top: calc(var(--spacing) * 5);
  }

  .main-content-category-page {
    padding-bottom: calc(var(--spacing) * 2);
    padding-top: 0;
  }

  .main-content-article-page {
    padding-bottom: calc(var(--spacing) * 2);
    padding-top: calc(var(--spacing) * 5);
  }

  .landing-remaining-articles-container {
    /* padding-left: calc(var(--spacing) * 4);
    padding-right: calc(var(--spacing) * 4); */
    flex: 0 0 66.666667%;
    /* max-width: 66.666667%; */
  }

  .remaining-article-figure {
    margin: 0px calc(var(--spacing) * 3) 0px 0px;
  }

  .post-content {
    margin: 0px calc(var(--spacing) * 3) 0px 0px;
  }

  .remaining-article-img {
    object-fit: cover;
    border-radius: 1rem;
  }

  .category-page-hero-img {
    object-fit: cover;
    border-radius: 1rem;
    height: 550px;
    width: 815px;
  }

  .latest-review-img {
    object-fit: cover;
    border-radius: 1rem;
  }

  .content-hero-figure {
    height: 400px;
    margin-bottom: 0;
    margin-left: calc(var(--spacing) * -3);
    margin-right: calc(var(--spacing) * -3);
  }

  .article-lead-image {
    margin: 0;
    max-height: 1000px;
  }
}

.latest-stories {
  font-weight: var(--font-weight-semibold) !important;
  margin-top: 0;
  color: white;
}

@media screen and (min-width: 49rem) {
  .latest-stories {
    font-size:21px;
  }

  .latest-review-img {
    width: 330px;
    height: 180px;
  }

  .post-category-content-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .article-content-container {
    /* background-color: #030303; */
    background-color: #19171A;
    border-radius: 1rem;
    padding: 20px 30px;
    max-width: 66.66%;
    margin-right: 30px;
    height: fit-content;
  }

  .main-content-article-page-container {
    display:flex;
    justify-content: space-between;
  }

  .category-page-title-container {
    display:flex;
    flex-direction: row;
    align-items: center;
    margin:0 0 10px 0px;
  }

  .category-page-heading-icon {
    margin-right: 10px;
    width: 40px;
    height: 40px;
  }

  .most-popular-title {
    font-size: 21px;
    font-weight: var(--font-weight-semibold) !important;
    margin-top: 0;
    color: white;
    font-family: 'Barlow', sans-serif;
    text-transform: uppercase;
  }
}

/* MOBILE */
@media screen and (max-width: 48.99rem) {
  .most-popular-title {
    font-size: 17px;
    font-weight: var(--font-weight-semibold) !important;
    margin-top: 0;
    color: white;
    font-family: 'Barlow', sans-serif;
    text-transform: uppercase;
  }

  .category-page-heading-icon {
    margin-right: 10px;
    width: 30px;
    height: 30px;
  }

  .category-page-title-container {
    display:flex;
    flex-direction: row;
    align-items: center;
    margin:0 0 10px 10px;
  }

  .main-content-category-page {
    padding-bottom: calc(var(--spacing) * 2);
    padding-top: calc(var(--spacing) * 2);
  }

  .main-content-article-page {
    padding-bottom: calc(var(--spacing) * 2);
    padding-top: calc(var(--spacing) * 30);
  }

  .post-content {
    padding: 0 10px 0 10px;
  }

  .post-content-category-section {
    width: 95%;
  }

  .remaining-article-img {
    object-fit: cover;
    /* clip: with overflow visible, current browsers paint a cover-fitted photo beyond its box, over the text */
    overflow: clip;
    max-width: 100%;
  }

  .remaining-article-figure,
  .landing-page-category-figure-large {
    max-width: 100%;
  }

  .category-page-hero-img {
    object-fit: cover;
    /* clip: with overflow visible, current browsers paint a cover-fitted photo beyond its box, over the text */
    overflow: clip;
    height: 240px;
    width: 100%;
  }

  .category-page-hero-figure {
    width: 100%;
  }

  .latest-review-img {
    object-fit: cover;
    border-radius: 1rem;
  }

  .latest-stories {
    font-size:17px;
    padding: 0 10px 0 10px;
  }

  .latest-review-img {
    width: 100%;
    max-width: 330px;
    height: 210px;
  }

  .latest-reviews-figure {
    width: 100%;
    max-width: 330px;
  }
}

.mainer-header {
  position: relative;
  display: block;
  box-sizing: border-box;
}

/* Content */
.content-post-title {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  margin-top: 0;
  font-weight: var(--font-weight-bold);
  color: var(--black-high-emphasis);
}

.content-container {
  padding-left: calc(var(--spacing) * 3);
  padding-right: calc(var(--spacing) * 3);
  padding-top: 50px;
}

.c-post-header .post-metadata>span:not(:last-of-type)::after {
  content: "·";
  color: var(--black-medium-emphasis);
  display: inline;
  font: 38px/0 serif;
  font-weight: 400;
  position: absolute;
  right: 0;
  top: 7px;
}

.c-post-header .post-metadata>span:not(:last-of-type) {
  margin-right: var(--spacing);
  padding-right: 22px;
  position: relative;
}

.content-hero-img {
  height: 100%;
  object-fit: cover;
  width: 100%;
  max-height: 1000px;
  max-width: 2400px;
}

@media screen and (min-width: 49rem) {
  .article-content-column {
    /* width: 66.66%; */
  }

  .post-content-category-page {
    width: 97%;
  }
}


@media screen and (max-width: 48.99rem) {
  .post-category-content-section {
    max-width: 70%;
  }
  .remaining-article-figure {
    margin: 0;
  }

  .article-content-column {
    /* width: 100%; */
  }

  .content-hero-figure {
    height: 300px;
    margin-bottom: 0;
    margin-left: calc(var(--spacing) * -3);
    margin-right: calc(var(--spacing) * -3);
  }
}

.trending-stories-heading {
  font-weight: var(--font-weight-semibold) !important;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.trending-story-title {
  color: var(--black-high-emphasis);
  font-weight: var(--font-weight-bold);
  margin-bottom: 0.5rem;
  margin-top: 0px;
}

.no-decoration {
  text-decoration: none;
}

.posts-list {
  margin-bottom: calc(var(--spacing) * 5);
  list-style: none;
  padding: 0;
}

.trending-story-author {
  color: var(--black-medium-emphasis);
  margin: 0;
}

.number-counter-dot-point {
  align-items: center;
  background-color: var(--primary);
  border-radius: 50%;
  color: #fff;
  display: flex;
  font: 0.75rem/1 var(--font-family-sans-serif);
  font-weight: var(--font-weight-bold);
  height: 18px;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 3px;
  width: 18px;
}

.trending-post {
  position: relative;
  padding-left: calc(var(--spacing) * 3);
}

.post-template-template-post-1 .posts-list li:not(:last-of-type) {
  margin-bottom: calc(var(--spacing) * 2);
  padding-bottom: calc(var(--spacing) * 3);
  position: relative;
}

.post-template-template-post-1 .posts-list--ordinal li {
  counter-increment: ordinal-list-counter;
  padding-left: calc(var(--spacing) * 4);
  position: relative;
}

.latest-stories-list li {
  position: relative;
  margin-bottom: calc(var(--spacing) * 2);
  padding-bottom: calc(var(--spacing) * 3);
}

.trending-posts-list li {
  margin-bottom: calc(var(--spacing) * 2);
  padding-bottom: calc(var(--spacing) * 3);
  position: relative;
}

.latest-stories-list li:not(:last-of-type)::after {
  background-color: var(--black-subtle-emphasis);
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 0;
  position: absolute;
  width: 100%;
}

.post-template-template-post-1 .posts-list li:not(:last-of-type)::after {
  background-color: var(--black-subtle-emphasis);
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 0;
  position: absolute;
  width: 100%;
}

.trending-posts-list li:not(:last-of-type)::after {
  background-color: var(--black-subtle-emphasis);
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 0;
  position: absolute;
  width: 100%;
}

/* Categories page */

.page-container-category {
  padding-left: calc(var(--spacing) * 3);
  padding-right: calc(var(--spacing) * 3);
  padding-top: calc(var(--spacing) * 5);
}

.remaining-category-article-container {
  padding-bottom: calc(var(--spacing) * 5);
  padding-top: calc(var(--spacing) * 5);
}

@media screen and (min-width: 49rem) {
  .hero-figure::before {
    content: '';
    z-index: 10;
    width:100%;
    height: 100%;
    display: block;
    position: absolute;
    /* The shading reaches up behind the whole headline, so white and red slide text stays readable
       on bright photos (WCAG 1.4.3) */
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.9) 15%, rgba(0, 0, 0, 0.6) 30%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0) 85%);
  }
}


@media screen and (max-width: 48.99rem) {
  .hero-figure::before {
    content: '';
    z-index: 10;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 55%, rgba(0, 0, 0, 0) 100%);
  }
}

/* A hero slide's link fills the slide, and the slide window clips anything outside it, so the focus
   ring goes inside the edge. The positioned figure covers the link's own outline, so the ring is
   drawn again over the photo and its shading: white between two dark edges, so it reads on light
   and dark photos alike (WCAG 2.4.7) */
.hero-anchor-carousel:focus-visible {
  outline: 2px solid white;
  outline-offset: -4px;
}

.hero-anchor-carousel:focus-visible .hero-figure::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 11;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px black, inset 0 0 0 4px white, inset 0 0 0 6px black;
  pointer-events: none;
}

/* Forced colours mode removes box shadows, so the ring is an outline there */
@media (forced-colors: active) {
  .hero-anchor-carousel:focus-visible .hero-figure::after {
    outline: 3px solid CanvasText;
    outline-offset: -4px;
  }
}

/* The cards can be as wide as the window, so the focus ring goes inside the edge (WCAG 2.4.7) */
.most-popular-item:focus-visible {
  outline: 2px solid white;
  outline-offset: -2px;
}

/* Posts page */
.page-container-posts {
  padding-bottom: calc(var(--spacing) * 10);
  padding-top: calc(var(--spacing) * 10);
  padding-left: calc(var(--spacing) * 3);
  padding-right: calc(var(--spacing) * 3);
}

.content-hero-figure-posts {
  margin-left: calc(var(--spacing) * -12);
  margin-right: calc(var(--spacing) * -12);
  width: calc(100% + var(--spacing) * 24);
  height: 392px;
}

.next-page-arrow {
  height: 18px;
  width: 18px;
  fill: var(--primary);
}

/* ins.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;
} */

@media screen and (min-width: 49rem) {
  .landing-page-content-container {
    display: flex;
    flex-direction: column;
  }
}


/* Redesign */

.hero-published-date {
  font-size:12px;
  color: var(--ahd-text-meta);
  font-family: 'Barlow', sans-serif;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.article-body-sub-container {
  color:white;
  /* A long bare URL in a CMS body wraps instead of widening the page (WCAG 1.4.10) */
  overflow-wrap: anywhere;
  font-family: 'Barlow', sans-serif;
  font-size:18px;
}

/* DESKTOP */
@media screen and (min-width: 49rem) {
  .landing-page-content-container {
    width: fit-content;
  }
  .landing-page-middle-section-container {
    width: fit-content;
  }

  .latest-reviews-container {
    max-width: 340px;
  }

  .landing-page-content-parent-container {
    padding:8px 20px 0px 0px;
    width:1250px;
    margin-right:auto;
    margin-left:auto;
  }
  .hero-carousel-item {
    /* width: 66%; */
    height: 530px;
    /* The gap is padding inside the slide, not a margin, so the slides line up with the window and
       no slide's focus ring is cut off */
    box-sizing: border-box;
    margin-right: 0;
    padding-right: 10px;
    border-radius: 5px;
  }

  .hero-sub-title-container {
    display: flex;
    align-items: center;
    /* margin-bottom: 15px; */
  }

  .most-popular-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
    margin-bottom: 40px;
  }

  .most-popular-container-content-page {
    display:flex;
    flex-direction: row;
  }

  .most-popular-item {
    text-decoration: none;
    align-items: center;
    display: flex;
    flex-direction: column;
  }

  .col-lg-3-desktop {
    width: 33.33%;
  }

  .category-page-title {
    color: white;
    font-size: 34px;
    font-family: 'Barlow', sans-serif;
    font-weight: var(--font-weight-bold);
  }
}

/* MOBILE */
@media screen and (max-width: 48.99rem) {
  .category-page-title {
    color: white;
    font-size: 30px;
    font-family: 'Barlow', sans-serif;
    font-weight: var(--font-weight-bold);
  }

  .category-footer-nav-list {
  flex-wrap: no-wrap;
  gap: 5px;
  flex-direction: column;
}

  .hero-sub-title-container {
    display: flex;
    align-items: center;
    /* margin-bottom: 15px; */
  }

  .most-popular-item {
    text-decoration: none;
    align-items: center;
    display: flex;
    flex-direction: column;
  }

  .landing-page-middle-section-container {
    flex-direction: column;
  }

  .hero-carousel-item {
    /* width: 80%; */
    height: 195px;
    box-sizing: border-box;
    margin-right: 0;
    padding-right: 3px;
    border-radius: 5px;
  }

  .hero-title {
    font-size: 18px;
  }

  .hero-anchor {
    height: 100%
  }

  /* Padding for hero-title container on carousel */
  .featured-post__content {
    padding: 0 5px 0 5px;
  }

  .hero-carousel {
    margin-bottom: 40px;
    background-color: #19171A;
  }

  .most-popular-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 20px;
  }

  .latest-reviews-container {
    margin: 0 10px 0 10px;
  }

  .latest-reviews-container-article-content-page {
    background-color: var(--ahd-bg-panel);
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 9px;
    padding-bottom: 9px;
    border-radius: 0.5rem;
  }
}

.hero-figure {
  border-radius: 0.5rem;
}

.sidebar-ads-container {
  background-color: var(--ad-backing-grey);
  margin-bottom: 30px;
  border-radius: 0.5rem;
}

.ad-backing {
  background-color: var(--ad-backing-grey);
}

.latest-reviews-container {
  background-color: var(--ahd-bg-panel);
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 18px;
  padding-bottom: 18px;
  border-radius: 0.5rem;
}

.latest-reviews-heading {
  font-size: 21px;
  color: white;
  margin-top: 0px;
  font-family: 'Barlow', sans-serif;
}

.latest-reviews-item {
  text-decoration: none;
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-bottom:0;
}

.latest-reviews-article-title {
  font-size: 15px;
  font-weight: var(--font-weight-bold);
  color: white;
  font-family: 'Barlow', sans-serif;
  margin-bottom: 0;
}

.latest-reviews-figure {
  margin-top:0;
  margin-bottom: 5px;
}

.latest-reviews-heading {
  margin-bottom: 20px;
}

.most-popular-article-title {
  font-family: 'Barlow', sans-serif;
  font-size: 19px;
  font-weight: var(--font-weight-bold);
  margin-bottom: 0.5rem;
  margin-top: 0;
  color: white;
}

/* DESKTOP */
@media screen and (min-width: 49rem) {
  .category-page-hero-article-title {
    font-family: 'Barlow', sans-serif;
    font-size: 39px;
    font-weight: var(--font-weight-bold);
    margin-bottom: 0;
    margin-top: 0;
    color: white;
  }

  .article-content-title {
    color: white;
    font-size:38px;
    font-weight: var(--font-weight-bold);
    font-family: 'Barlow', sans-serif;
    margin-top: 0;
  }

  /* The cards stack from the top at their own height. A fixed or minimum height left a gap under the ad
     whenever a section had only a few stories; the sidebar beside it already keeps the pagination below. */
  .landing-section-2 {
    display: flex;
    flex-direction: column;
  }

  .landing-page-latest-news-sub-container {
    display: flex;
    flex-direction: row;
  }

  .latest-category-container:not(:last-child) {
    margin-right: 2rem;
  }
}

/* MOBILE */
@media screen and (max-width: 49rem) {
  .category-page-hero-article-title {
    font-family: 'Barlow', sans-serif;
    font-size: 19px;
    font-weight: var(--font-weight-bold);
    margin-bottom: 0;
    margin-top: 0;
    color: white;
  }

  .article-content-title {
    color: white;
    font-size:32px;
    font-weight: var(--font-weight-bold);
    font-family: 'Barlow', sans-serif;
    margin-top: 0;

  }

  .latest-category-container:not(:last-child) {
    margin-bottom: 20px;
  }
}

.landing-page-category-title-large {
  font-size: 18px;
  color: white;
  font-weight: bold;
  font-family: 'Barlow', sans-serif;
  margin: 0 0 5px 0;
}

.landing-page-category-title-small {
  font-size: 16px;
  color: white;
  font-weight: var(--font-weight-semibold);
  font-family: 'Barlow', sans-serif;
  margin: 0 0 5px 0;
}

.landing-page-category-item-large {
  text-decoration: none;
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 385px;
  border-bottom: 2px solid #362A3A;
}

.landing-page-category-item-small {
  text-decoration: none;
  align-items: center;
  display: flex;
  flex-direction: row;
  height: 120px;
  border-bottom: 2px solid #362A3A;
  padding-top: 5px;
}

.landing-page-category-figure-small {
  margin: 0 10px 0 0;
  border-radius: 0.5rem;
}

.landing-page-category-figure-large {
  margin: 0;
}

.author-name {
  color: var(--ahd-red-text);
}

.latest-reviews-container .author-name,
.latest-reviews-container-article-content-page .author-name {
  color: var(--ahd-red-text-panel);
}

.nav-logo-container {
  height: 100%;
  background: linear-gradient(to bottom, #3B383F, #151416 90%, #302D38);
  display: flex;
  align-items: center;
}

.nav-category-container {
  height: 100%;
  background: linear-gradient(to bottom, #ED1941, #7C2E3D 90%, #B42B45);
  display: flex;
  align-items: center;
}

/* DESKTOP */
@media screen and (min-width: 49rem) {
  /* The padding sets how wide the logo column is. It shrinks as the window narrows, so the bar never
     runs past the window edge (WCAG 1.4.10); 980px is the logo column plus the category links */
  .nav-category-container {
    width: 100%;
    min-width: 0;
    padding-right: clamp(0px, calc(100% - 980px), 30rem);
  }

  .nav-logo-container {
    width: 70%;
    justify-content: end;
  }

  /* Block so no line-height gap sits under it; nudged 2px so the lettering, not the "y" descender, centres on the menu */
  .ahd-logo-top-img {
    display: block;
    height: 26px;
    width: auto;
    transform: translateY(2px);
  }

  .mobile-container-category-content {
    padding: 0 10px 0 10px;
    width: 100%;
    display: flex;
    flex-direction: row;
  }
}

/* MOBILE */
@media screen and (max-width: 48.99rem) {
  .landing-page-category-figure-small {
    overflow: hidden;
    width: 110px;
    height: 72px;
  }

  .landing-page-category-item-large {
    text-decoration: none;
    display: flex;
    align-items: start;
    flex-direction: column;
    height: 385px;
    border-bottom: 2px solid #362A3A;
  }

  .mobile-container-category-content {
    padding: 0 10px 0 10px;
    width: 100%;
    display: flex;
    flex-direction: row;
  }

  .mobile-container-category-content-large {
    flex-direction: column;
  }

  .mobile-margin-l-r-10 {
    margin-left: 10px;
    margin-right: 10px;
  }

  .post-content-category-section-large {
    padding: 0 10px 0 10px;
    display: flex;
    flex-direction: column;
  }

  .landing-page-latest-news-sub-container {
    display: flex;
    flex-direction: column;
  }

  .nav-category-container {
    width: 50px;
  }

  .nav-logo-container {
    width: 100%;
    justify-content: start;
    padding-left: 10px;
  }

  /* Block so no line-height gap sits under it; nudged 2px so the lettering, not the "y" descender, centres on the menu */
  .ahd-logo-top-img {
    display: block;
    height: 26px;
    width: auto;
    transform: translateY(2px);
  }

  .hero-section-container {
    margin-top: 5px;
  }
}

.menu-button-container {
  display: none;
  height: 24px;
  width: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.menu-button-container:focus-visible {
  outline: 2px solid white;
  outline-offset: 2px;
}

.menu-button,
.menu-button::before,
.menu-button::after {
  display: block;
  background-color: white;
  position: absolute;
  height: 2px;
  width: 20px;
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 2px;
}

.menu-button::before {
  content: '';
  margin-top: -8px;
}

.menu-button::after {
  content: '';
  margin-top: 8px;
}

#menu-toggle[aria-expanded="true"] .menu-button::before {
  margin-top: 0px;
  transform: rotate(405deg);
}

#menu-toggle[aria-expanded="true"] .menu-button {
  background: rgba(255, 255, 255, 0);
}

#menu-toggle[aria-expanded="true"] .menu-button::after {
  margin-top: 0px;
  transform: rotate(-405deg);
}

@media (max-width: 48.99rem) {
  .menu-button-container {
    display: flex;
  }

  .top-nav-mobile-menu {
    display: flex;
    justify-content: center;
  }

  .top-nav-menu {
    /* top: 130px; */
    padding: 0;
    /* margin-top: 50px; */
    left: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    display: none;
    z-index: 999;
    position: absolute;
  }
  .top-nav-menu.is-open {
    display: flex;
  }
  .top-nav-menu > li {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0.5em 0;
    width: 100%;
    /* The padding goes inside the width, so the open menu is no wider than the page */
    box-sizing: border-box;
    background-color: #392F3D;
    padding-left: 15px;
  }

  .top-nav-menu > li:active {
    background-color: #2C2131;
  }

  .top-nav-menu > li:not(:last-child) {
    border-bottom: 1px solid #605166;
  }

  .top-nav-menu > li > a {
    text-decoration: none;
    color: white;
    text-transform: uppercase;
    font-family: 'Barlow', sans-serif;
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    width: 100%;
  }

  .nav-menu-img {
    margin-right: 15px;
  }

  .logo-link {
    position: fixed;
    top: 10px;
    right: 25%;
  }
}

.privacy-policy-container a,
.terms-of-use-container a,
.accessibility-statement-container a {
  text-decoration: underline;
}

/* Long URLs in the legal text wrap instead of widening the page (WCAG 1.4.10) */
.privacy-policy-container {
  overflow-wrap: anywhere;
  color: white;
  width: 100%;
  max-width: 1250px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}

.terms-of-use-container,
.accessibility-statement-container {
  overflow-wrap: anywhere;
  color: white;
  width: 100%;
  max-width: 1250px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}

/* ===== Header: one flat dark bar, logo aligned with the content, red only as an accent ===== */
.main-header .top-nav {
  background: #121014;
  border-bottom: 1px solid #2c2930;
  box-sizing: border-box;
}

.main-header .nav-logo-container,
.main-header .nav-category-container {
  background: none;
}

@media screen and (min-width: 49rem) {
  .main-header .top-nav {
    height: 64px;
    justify-content: flex-start !important;
    /* The same edges as the page's 1250px content column (centred with 20px extra on its right) */
    padding: 0 max(24px, calc((100% - 1230px) / 2)) 0 max(24px, calc((100% - 1270px) / 2));
  }

  .main-header .nav-logo-container {
    width: auto;
    flex: none;
    padding: 0;
    margin-right: 36px;
    justify-content: flex-start;
  }

  .main-header .nav-category-container {
    flex: 1;
    width: auto;
    min-width: 0;
    padding: 0;
    height: 100%;
  }

  .main-header .top-nav-list {
    height: 100%;
    gap: 4px;
  }

  /* "More": the sections nobody is publishing in, out of the main row but still one click away */
  .main-header .nav-more-details {
    position: relative;
    display: flex;
    height: 100%;
  }

  .main-header .nav-more-toggle {
    cursor: pointer;
    list-style: none;
  }

  .main-header .nav-more-toggle::-webkit-details-marker {
    display: none;
  }

  .main-header .nav-more-toggle::after {
    content: '';
    width: 7px;
    height: 7px;
    margin: -4px 0 0 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
  }

  .main-header .nav-more-details[open] .nav-more-toggle {
    color: #fff;
  }

  .main-header .nav-more-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 30;
    min-width: 210px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #1c1a1f;
    border: 1px solid #2c2930;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  }

  .main-header .nav-more-link {
    display: block;
    padding: 10px 12px;
    border-radius: 6px;
    color: #cfcbd4;
    font-weight: 600;
    text-decoration: none;
  }

  .main-header .nav-more-link:hover,
  .main-header .nav-more-link:focus-visible {
    color: #fff;
    background: #2a272e;
  }

  .main-header .top-nav-list .nav-item {
    display: flex;
    height: 100%;
  }

  .main-header .top-nav-list .nav-link {
    display: flex;
    align-items: center;
    padding: 0 14px;
    color: #cfcbd4;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    transition: color 0.15s, border-color 0.15s;
  }

  .main-header .top-nav-list .nav-link:hover,
  .main-header .top-nav-list .nav-link-active {
    color: #fff;
    border-bottom-color: #ed1941;
  }
}

@media (max-width: 48.99rem) {
  .main-header .top-nav {
    height: 56px;
    padding: 0 12px;
  }

  .main-header .nav-logo-container {
    padding-left: 4px;
  }

  .main-header .nav-category-container {
    width: auto;
    justify-content: flex-end;
  }
}

/* ===== Category page headings: type only; the menu's active tab marks the section ===== */
.category-page-title-container {
  display: block;
  margin: 8px 0 28px;
}

.category-page-title {
  margin: 0;
  color: #fff;
  font-family: 'Barlow', sans-serif;
  font-size: 44px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
}


.category-page-tagline {
  margin: 10px 0 0;
  color: #b3afb8;
  font-size: 17px;
}

@media (max-width: 48.99rem) {
  .category-page-title-container {
    margin: 4px 16px 20px;
  }

  .category-page-title {
    font-size: 32px;
  }
}

/* ===== Category colours: one colour per section, used on every badge. White text passes 4.5:1 on each ===== */
.hero-badge[data-category='celebrity'] { background-color: #B3166E; }
.hero-badge[data-category='movies-entertainment'] { background-color: #C4203C; }
.hero-badge[data-category='movies'] { background-color: #C4203C; }
.hero-badge[data-category='tv'] { background-color: #4338CA; }
.hero-badge[data-category='reviews'] { background-color: #A15C00; }
.hero-badge[data-category='tech-gadgets'] { background-color: #1F5FB8; }
.hero-badge[data-category='food-recipes'] { background-color: #B4480D; }
.hero-badge[data-category='lifestyle'] { background-color: #7232B8; }
.hero-badge[data-category='health-wellness'] { background-color: #0F7368; }

/* ===== Hero photo credit: a small label on the photo's corner, so it can never run into the headline ===== */
.article-content-container .article-lead-image {
  position: relative;
}

.hero-credit {
  position: absolute;
  right: 10px;
  bottom: 10px;
  max-width: calc(100% - 20px);
  margin: 0;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  text-align: right;
}

/* ===== Homepage "Most Popular": same heading style as the other sections, and the sidebar lines up with the
   cards beneath it rather than with the heading ===== */
.landing-section-2-sub-container-1 > .most-popular-title {
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 3px solid #ed1941;
  color: #fff;
  font-family: 'Barlow', sans-serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: none;
}

@media screen and (min-width: 49rem) {
  /* The rule ends where the cards' photos do, not in the gutter before the sidebar */
  .landing-section-2-sub-container-1 > .most-popular-title {
    margin-right: calc(var(--spacing) * 3);
  }

  .main-content .landing-page-middle-section-container > .col-lg-3-desktop {
    /* the heading's line height + padding + rule + margin, from the rule above */
    margin-top: calc(22px * 1.2 + 12px + 3px + 18px);
  }
}

/* A short card title must not shrink its text block to the middle of the card */
.most-popular-item > .post-content {
  align-self: stretch;
}

@media screen and (min-width: 49rem) {
  /* A section page keeps its full width with few or no stories, so the sidebar does not get squeezed */
  .main-content-category-page .landing-page-content-container,
  .main-content-category-page .landing-page-middle-section-container {
    width: 100%;
  }
}

/* Card score badges match the featured grid's: a red circle in Barlow, big enough to read on the photo, and
   bigger again on a section page's lead story */
.review-score-badge-most-popular,
.review-score-badge-latest {
  width: 40px;
  height: 40px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  font-family: 'Barlow', sans-serif;
  font-size: 18px;
  font-weight: 800;
}

.hero-section-container .review-score-badge-most-popular {
  width: 56px;
  height: 56px;
  font-size: 26px;
}

@media screen and (min-width: 49rem) {
  /* the photo stops 24px short of the card's right edge */
  .hero-section-container .review-score-badge-most-popular {
    top: 16px;
    right: 40px;
  }
}

/* The copyright is a quiet footnote under the footer links, not a second heading */
.trademark-text {
  color: #9c98a2;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Phones: the story cards use the same 16px gutter and rounded, full-width photos as the featured grid above them */
@media (max-width: 48.99rem) {
  .landing-section-2-sub-container-1 > .most-popular-title,
  .landing-section-2-sub-container-1 > .latest-stories {
    margin-left: 16px;
    margin-right: 16px;
    padding-left: 0;
    padding-right: 0;
  }

  .landing-section-2 .most-popular-item {
    padding: 0 16px;
    box-sizing: border-box;
  }

  .landing-section-2 .most-popular-item .remaining-article-figure {
    width: 100%;
    margin: 0 0 12px;
  }

  .landing-section-2 .most-popular-item .remaining-article-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
  }

  .landing-section-2 .most-popular-item .post-content {
    margin: 0;
    padding: 0;
    width: 100%;
  }

}

/* Section pages' "Latest ... News" heading matches the homepage's Latest Stories heading */
.landing-section-2-sub-container-1 > .latest-stories {
  font-family: 'Barlow', sans-serif;
  font-weight: 800 !important;
  letter-spacing: normal;
  text-transform: none;
}

/* Phones: a section page's lead story and the score badges sit inside the same 16px gutter */
@media (max-width: 48.99rem) {
  .hero-section-container .most-popular-item {
    padding: 0 16px;
    box-sizing: border-box;
  }

  .hero-section-container .category-page-hero-figure {
    width: 100%;
    margin: 0 0 12px;
  }

  .hero-section-container .category-page-hero-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
  }

  .hero-section-container .post-content {
    margin: 0;
    padding: 0;
    width: 100%;
  }

  .landing-section-2 .most-popular-item .review-score-badge-most-popular,
  .hero-section-container .review-score-badge-most-popular {
    top: 10px;
    right: 26px;
  }
}

/* Phones: the sidebar list (Latest Reviews / Latest Celebrity) lines up with the main column, with full-width
   rounded photos and its heading, photos and text on one edge */
@media (max-width: 48.99rem) {
  .latest-reviews-container {
    margin: 0 16px;
    padding: 20px 16px;
    max-width: none;
    box-sizing: border-box;
  }

  .latest-reviews-item {
    align-items: stretch;
  }

  .latest-reviews-figure {
    width: 100%;
    max-width: none;
    margin: 0 0 12px;
  }

  .latest-reviews-figure .latest-review-img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
  }

  .latest-reviews-item > div:not(.review-score-badge) {
    width: 100% !important;
  }
}

/* Phones, article pages: the stories under the article sit in the article's own 24px column, so their heading,
   photos and text start where the headline does */
@media (max-width: 48.99rem) {
  .main-content-article-page .landing-section-2-sub-container-1 > .latest-stories {
    margin-left: 0;
    margin-right: 0;
  }

  .main-content-article-page .most-popular-container-content-page .post-content {
    margin: 0;
    padding: 0;
    width: 100%;
  }

  .main-content-article-page .most-popular-container-content-page .remaining-article-figure {
    width: 100%;
    margin: 0 0 12px;
  }

  .main-content-article-page .most-popular-container-content-page .remaining-article-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
  }
}

/* Phones and tablets, article pages: the dimmed copy of the lead photo behind the header only works as a wide
   backdrop beside the article and its sidebar; once they stack (below 1100px) it reads as the same photo twice, so it
   goes, along with the space the article left to sit over it */
@media (max-width: 68.6875rem) {
  /* !important: the figure carries an inline display:flex */
  .main-landmark > .article-lead-image {
    display: none !important;
  }

  .main-content-article-page {
    padding-top: 24px;
  }
}

/* Phones: the menu opens below the header as a full-height panel in the header's colour, the main sections large,
   the older ones as a smaller "More" group, and the current section marked in red */
@media (max-width: 48.99rem) {
  .main-header .top-nav {
    position: relative;
  }

  .top-nav-menu {
    top: 100%;
    right: 0;
    margin: 0;
    justify-content: flex-start;
    align-items: stretch;
    height: calc(100dvh - 56px);
    overflow-y: auto;
    padding: 8px 0 32px;
    box-sizing: border-box;
    background-color: #121014;
    border-top: 1px solid #2c2930;
  }

  .top-nav-menu > li {
    display: block;
    padding: 0;
    background-color: transparent;
  }

  .top-nav-menu > li:not(:last-child) {
    border-bottom: 1px solid #2c2930;
  }

  .top-nav-menu > li > a {
    display: block;
    padding: 14px 16px;
    box-sizing: border-box;
    border-left: 3px solid transparent;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    text-transform: none;
  }

  .top-nav-menu > li > a:active,
  .top-nav-menu > li > a:hover {
    background-color: #1c1a1f;
  }

  .top-nav-menu > li > a.nav-link-active {
    border-left-color: #ed1941;
    color: #ff6b81;
  }

  .top-nav-menu > li.top-nav-menu-label {
    padding: 24px 16px 6px;
    border-bottom: 0;
    color: #9c98a2;
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .top-nav-menu > li.top-nav-menu-more > a {
    padding: 11px 16px;
    color: #cfcbd4;
    font-size: 16px;
    font-weight: 500;
  }
}

/* Between phone and full desktop width (784px to 1317px) the 1250px content column used to keep its width, so the
   page scrolled sideways and the sidebar sat half off-screen. It now fits the window with the header's 24px gutter:
   main column and 400px sidebar side by side from 1100px, and the sidebar under the main column below that. */
@media (min-width: 49rem) and (max-width: 82.3125rem) {
  .landing-page-content-parent-container {
    width: auto;
    padding: 8px 24px 0;
    box-sizing: border-box;
  }

  .landing-page-content-container,
  .landing-page-middle-section-container {
    width: 100%;
  }

  .landing-page-middle-section-container {
    gap: 24px;
  }

  .landing-remaining-articles-container {
    flex: 1 1 auto;
    min-width: 0;
  }

  .landing-page-middle-section-container > .col-lg-3-desktop {
    flex: none;
    width: 400px;
  }

  .category-page-hero-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 815 / 550;
  }

  .category-page-title-container {
    margin-left: 0;
    margin-right: 0;
  }

  .hero-section-container,
  .hero-section-container .category-page-hero-figure {
    width: 100%;
  }

  .hero-section-container .category-page-hero-figure {
    margin-right: 0;
  }

  /* Two card columns that share the width; the photos' 390px width attribute no longer sets a minimum */
  .most-popular-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .most-popular-container .remaining-article-figure {
    width: 100%;
    margin-right: 0;
  }

  .most-popular-container .remaining-article-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 390 / 240;
    object-fit: cover;
  }
}

@media (min-width: 49rem) and (max-width: 68.6875rem) {
  .landing-page-middle-section-container {
    flex-direction: column;
  }

  .landing-page-middle-section-container > .col-lg-3-desktop,
  .main-content .landing-page-middle-section-container > .col-lg-3-desktop {
    width: 100%;
    margin-top: 0;
  }

  .landing-page-middle-section-container > .col-lg-3-desktop .latest-reviews-container {
    max-width: none;
  }

  /* The in-list ad under Latest Stories is capped at 810 to 820px (inline styles) to fit beside the desktop sidebar;
     here the stories run the full width, so the ad does too */
  .landing-section-2 .desktop-only.ad-backing,
  .landing-section-2 .desktop-only.ad-backing > ins.adsbygoogle {
    max-width: none !important;
  }
}

/* Article pages between phone and full desktop width: the same fit as the section pages (the article and its
   400px sidebar side by side from 1100px, stacked below that), and the stories under the article in two columns
   that share the width instead of one fixed-width row that ran off the page */
@media (min-width: 49rem) and (max-width: 82.3125rem) {
  .main-content-article-page-container {
    gap: 24px;
  }

  .main-content-article-page-container > .article-content-container {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }

  /* The sidebar column is the wrapper around the aside (it carries an inline 33.33% width) */
  .main-content-article-page-container > .desktop-only:has(> aside.post-sidebar) {
    flex: none;
    width: 400px !important;
  }

  .main-content-article-page .most-popular-container-content-page {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .main-content-article-page .most-popular-container-content-page .most-popular-item {
    width: auto;
    min-width: 0;
  }

  .main-content-article-page .most-popular-container-content-page .remaining-article-figure {
    width: 100%;
    margin-right: 0;
  }

  .main-content-article-page .most-popular-container-content-page .remaining-article-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 390 / 240;
    object-fit: cover;
  }
}

@media (min-width: 49rem) and (max-width: 68.6875rem) {
  .main-content-article-page-container {
    flex-direction: column;
  }

  .main-content-article-page-container > .desktop-only:has(> aside.post-sidebar) {
    width: 100% !important;
  }

  /* The panel carries an inline 400px max-width for desktop */
  .main-content-article-page-container > .desktop-only:has(> aside.post-sidebar) .latest-reviews-container {
    max-width: none !important;
  }
}

/* An ad slot AdSense couldn't fill is hidden, as Google recommends, instead of leaving an empty grey box or strip */
.ad-backing:has(ins.adsbygoogle[data-ad-status='unfilled']),
.sidebar-ads-container:has(ins.adsbygoogle[data-ad-status='unfilled']),
.mobile-only:has(> .ad-backing ins.adsbygoogle[data-ad-status='unfilled']) {
  display: none !important;
}

/* Article pages on wider screens: the lead photo runs flush to the top and sides of the article panel (the panel's
   20px / 30px padding) instead of sitting inside a dark frame; the headline and text keep their padding */
@media screen and (min-width: 49rem) {
  .article-content-container > .article-lead-image {
    margin: -20px -30px 24px;
  }

  /* !important: the photo carries an inline border-radius */
  .main-content-article-page .article-content-container > .article-lead-image .content-hero-img {
    width: 100%;
    border-radius: 16px 16px 0 0 !important;
  }
}

/* Sidebar lists (Latest Reviews, Latest Celebrity): one section each, so no category badge on every card; the
   first story keeps its big photo and the rest are compact rows with a small thumbnail, about half the height */
.latest-reviews-container .hero-badge {
  display: none;
}

.latest-reviews-article-container > .latest-reviews-item:not(:first-child) {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 14px;
  /* Top, not centred: the score badge is placed from the top of the row, so the photo has to start there too */
  align-items: start;
  margin: 0 !important;
  padding: 14px 0;
  border-top: 1px solid #3d3542;
}

.latest-reviews-article-container > .latest-reviews-item:not(:first-child) .latest-reviews-figure {
  width: 112px;
  max-width: none;
  margin: 0;
}

.latest-reviews-article-container > .latest-reviews-item:not(:first-child) .latest-review-img {
  display: block;
  width: 112px;
  max-width: none;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
}

.latest-reviews-article-container > .latest-reviews-item:not(:first-child) > div:not(.review-score-badge) {
  width: auto !important;
}

.latest-reviews-article-container > .latest-reviews-item:not(:first-child) .latest-reviews-article-title {
  margin: 0 0 4px;
  font-size: 15px;
  line-height: 1.3;
}

.latest-reviews-article-container > .latest-reviews-item:not(:first-child) .review-score-badge-latest {
  top: 20px;
  left: 82px;
  right: auto;
  width: 26px;
  height: 26px;
  font-size: 13px;
}

/* Latest Stories under an article: the same section heading as the homepage's (size, weight, red rule), with room
   above it so it doesn't butt up against the article or the rating card */
.main-content-article-page .landing-section-2-sub-container-1 > .latest-stories {
  margin-top: 48px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 3px solid #ED1941;
  font-size: 22px;
  font-weight: 600 !important;
  line-height: 1.2;
}

/* Tablets, where the sidebar stacks under the stories: its lead story gets the full panel width, as on phones, with
   the score badge on the photo instead of out at the panel's edge */
@media (min-width: 49rem) and (max-width: 68.6875rem) {
  .latest-reviews-article-container > .latest-reviews-item:first-child {
    align-items: stretch;
  }

  .latest-reviews-article-container > .latest-reviews-item:first-child .latest-reviews-figure {
    width: 100%;
    max-width: none;
    margin: 0 0 12px;
  }

  .latest-reviews-article-container > .latest-reviews-item:first-child .latest-review-img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
  }

  .latest-reviews-article-container > .latest-reviews-item:first-child > div:not(.review-score-badge) {
    width: 100% !important;
  }

  .latest-reviews-article-container > .latest-reviews-item:first-child .review-score-badge-latest {
    top: 12px;
    right: 12px;
  }
}

/* Phones, homepage: Latest Stories reads like the sections below it, the first story as a full card and the rest as
   compact rows (photo beside headline and date) */
@media (max-width: 48.99rem) {
  .main-content .landing-section-2-sub-container-1 .most-popular-item:not(:first-child) {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    border-top: 1px solid #2c2930;
  }

  .main-content .landing-section-2-sub-container-1 .most-popular-item:not(:first-child) .remaining-article-figure {
    display: block !important;
    width: 112px;
    margin: 0;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
  }

  .main-content .landing-section-2-sub-container-1 .most-popular-item:not(:first-child) .remaining-article-img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    border-radius: 0;
  }

  .main-content .landing-section-2-sub-container-1 .most-popular-item:not(:first-child) .post-content {
    margin: 0;
    padding: 0;
  }

  .main-content .landing-section-2-sub-container-1 .most-popular-item:not(:first-child) .most-popular-article-title {
    font-size: 16px;
    line-height: 1.3;
  }

  .main-content .landing-section-2-sub-container-1 .most-popular-item:not(:first-child) .most-popular-article-summary,
  .main-content .landing-section-2-sub-container-1 .most-popular-item:not(:first-child) .hero-author {
    display: none;
  }
}

/* Phones: the footer runs down the page's left edge like everything above it, the sections in two columns and the
   legal links below them, smaller */
@media (max-width: 48.99rem) {
  .main-footer > div {
    justify-content: flex-start !important;
  }

  .main-footer .footer-content {
    width: 100%;
    box-sizing: border-box;
    padding: 32px 16px 24px;
    text-align: left;
  }

  .footer-logo-container {
    padding-bottom: 14px;
    margin-bottom: 18px;
  }

  .main-footer .category-footer-nav-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 16px;
  }

  .main-footer .privacy-nav-item {
    grid-column: 1 / -1;
    width: auto;
  }

  .main-footer .category-nav-item + .privacy-nav-item {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #3a363e;
  }

  .main-footer .privacy-nav-link {
    font-size: 15px;
    color: #cfcbd4;
  }

  .figjam-trademark-container {
    justify-content: flex-start;
    padding: 0 16px;
    box-sizing: border-box;
  }
}

/* Ads on phones and tablets. Below desktop the sidebar sits under the stories, so its ads would stack at the end of
   the list, two or three in a row. So they are desktop only, and list-ad.astro puts ads among the stories instead
   (on the homepage, between the Celebrity and Movies sections). */
.list-ad {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 250px;
  border-radius: 0.5rem;
  text-align: center;
}

@media (min-width: 68.75rem) {
  .list-ad {
    display: none !important;
  }
}

@media (min-width: 49rem) {
  .list-ad-phone {
    display: none !important;
  }
}

@media (max-width: 48.99rem) {
  .list-ad-tablet {
    display: none !important;
  }

  /* Phone ads run the screen's width, as the stories do */
  .list-ad-phone {
    border-radius: 0;
  }

  .landing-section-2-sub-container-1 > .list-ad-phone {
    margin-bottom: 20px;
  }
}

@media (max-width: 68.6875rem) {
  .landing-page-middle-section-container > .col-lg-3-desktop .sidebar-ads-container,
  .main-content-article-page-container .post-sidebar .sidebar-ads-container {
    display: none !important;
  }

  .main-content-article-page .list-ad {
    margin-top: 32px;
  }
}

/* Homepage, wider screens: 48px from the featured stories to Latest Stories (the grid's own 24px padding, this and
   the content's 8px), the same as between the homepage's other sections */
@media (min-width: 49rem) {
  .featured-grid + .main-content {
    padding-top: 16px;
  }
}

/* Phones: the article's text lines up with its headline and photo. The phone rule that pads .post-content by 10px
   is for the story cards; the article body shares the class. */
@media screen and (max-width: 48.99rem) {
  .article-content-column > .post-content {
    padding: 0;
  }
}

/* The sidebar lists' byline sits in a narrow column beside the photo: a long name moves the date to the next line
   whole, instead of the name and date each breaking inside their own squeezed column. The date has no leading
   dash here, which would start the line when it wraps; the gap separates them on one line. */
.latest-reviews-item .hero-sub-title-container {
  flex-wrap: wrap;
  gap: 4px 8px;
}

.latest-reviews-item .hero-author,
.latest-reviews-item .hero-published-date {
  margin-top: 0;
  margin-bottom: 0;
  white-space: nowrap;
}