/*
  Microsite of a project (layout app/Site/views/microsite/layout.php). Loaded after site.css, before the generated theme
  stylesheet (/theme/{slug}.css), which overrides the colour and font tokens of :root.
  Tokens used here: --font-heading (set by the theme, falls back to --font-body), the colour tokens of site.css.
  Sections: studio bar, header, intro, footer, blocks (hero, facts, text + image, cards, tiles, image band, gallery, video, news, call to action).
*/

.ms {
  --bar-h: 44px;
  position: relative;
}

@media (min-width: 900px) {
  .ms {
    --bar-h: 34px;
  }

  .ms-bar {
    font-size: 0.75rem;
    letter-spacing: 2px;
  }
}

/* Headings and buttons use the heading font of the theme in capitals, as in the design. */
.ms h1,
.ms h2,
.ms h3,
.ms .h1,
.ms .h2,
.ms .h3,
.ms .btn {
  font-family: var(--font-heading, var(--font-body));
  font-weight: 700;
  text-transform: uppercase;
}

.ms h1,
.ms h2,
.ms .h1,
.ms .h2 {
  line-height: 1;
  letter-spacing: 0;
}

.ms .btn {
  letter-spacing: 0.1em;
}

/* ---------- Studio bar ---------- */

.ms-bar {
  background: #000;
  background: color-mix(in srgb, var(--color-bg) 35%, #000);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.ms-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--bar-h);
}

.ms-bar__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--bar-h);
  color: var(--color-text-2);
  text-decoration: none;
}

.ms-bar__back:hover {
  color: var(--color-text);
}

.ms-bar__domain {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: none;
}

/* ---------- Header ---------- */

.ms-header {
  background: var(--color-bg);
}

/* A hero under the header: the header floats over it, below the studio bar. */
.ms.has-hero .site-header {
  top: var(--bar-h);
}

/* The open mobile menu covers the screen from its top edge, the studio bar is behind it. */
.menu-open .ms.has-hero .site-header {
  top: 0;
}

.ms-wordmark {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--color-text);
  font-family: var(--font-heading, var(--font-body));
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}

.ms .site-nav__label {
  font-family: var(--font-heading, var(--font-body));
  font-weight: 600;
  text-transform: uppercase;
}

@media (min-width: 900px) {
  .ms-wordmark {
    font-size: 1.875rem;
    letter-spacing: 3px;
  }

  .ms .site-nav ol {
    gap: 36px;
  }

  .ms .site-nav__label,
  .ms .site-nav a:hover .site-nav__label,
  .ms .site-nav a[aria-current] .site-nav__label {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 2px;
  }

  .ms .site-nav a[aria-current] .site-nav__label {
    color: var(--color-accent);
  }

  /* The store button of the header is a filled accent button here (the studio header has an outline one). */
  .ms .ms-cta {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-weight: 700;
    letter-spacing: 2px;
  }

  .ms .ms-cta:hover {
    border-color: var(--color-accent-hover);
    background: var(--color-accent-hover);
    color: var(--color-on-accent);
  }
}

/* ---------- Intro (page without block output) ---------- */

.ms-intro__stores {
  margin-top: 28px;
}

.ms .page-head .h1 {
  font-size: clamp(2.5rem, 1.5rem + 4vw, 4.25rem);
}

/* ---------- Footer ---------- */

.ms-footer {
  margin-top: auto;
  border-top: 1px solid var(--color-border);
  background: #000;
  background: color-mix(in srgb, var(--color-bg) 35%, #000);
}

.ms-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-block: 32px;
  text-align: center;
}

.ms-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 24px;
}

.ms-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--color-text-2);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.ms-footer__nav a:hover {
  color: var(--color-text);
}

.ms-footer__studio {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: var(--tap);
  color: var(--color-muted);
  font-size: var(--fs-xs);
  letter-spacing: 1.5px;
  text-decoration: none;
  text-transform: uppercase;
}

.ms-footer__studio img {
  width: auto;
  height: 44px;
}

@media (min-width: 900px) {
  .ms-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    gap: 32px;
    text-align: left;
  }

  .ms-footer__nav ul {
    gap: 0 30px;
  }
}

/* ---------- Blocks (app/Site/views/blocks) ---------- */

.ms {
  --ms-danger: #d9432f;
  --ms-stripe: #000;
}

.ms-block {
  padding-block: var(--section-y);
}

/* Eyebrow, title and intro that start most blocks. */
.ms-head {
  margin-bottom: 40px;
}

.ms-eyebrow {
  margin-bottom: 16px;
  color: var(--color-accent);
  font-family: var(--font-heading, var(--font-body));
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.ms-title {
  font-size: clamp(2.5rem, 1.2rem + 3.6vw, 4rem);
}

.ms-intro {
  max-width: 60ch;
  margin-top: 20px;
  color: var(--color-text-2);
  font-size: var(--fs-lg);
}

.ms-prose {
  max-width: none;
  color: var(--color-text-2);
  font-size: 1.0625rem;
  line-height: 1.65;
}

/* Hero: darkened picture, label, tags, big title, subtitle, buttons. */
.ms-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-bg);
}

.ms-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.ms-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dark from the text side so that light text stays readable over any pixel of the picture: secondary and accent text keep
   4.5:1 even over a white pixel (tools/a11y-check.php reads these stops). */
.ms-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(11 12 14 / 88%) 0%, rgb(11 12 14 / 66%) 100%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--color-bg) 80%, transparent) 0%, color-mix(in srgb, var(--color-bg) 70%, transparent) 55%, var(--color-bg) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--color-bg) 70%, transparent) 0%, color-mix(in srgb, var(--color-bg) 30%, transparent) 100%);
}

.ms-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: calc(var(--header-h) + 56px);
  padding-bottom: 72px;
}

/* A soft glow in the background colour keeps the edges of the letters apart from a busy picture. */
.ms-hero__tags,
.ms-hero__title,
.ms-hero__subtitle {
  text-shadow: 0 1px 12px rgb(11 12 14 / 70%);
  text-shadow: 0 1px 12px color-mix(in srgb, var(--color-bg) 70%, transparent);
}

.ms-hero__label {
  margin-bottom: 16px;
}

.ms-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  color: var(--color-accent);
  font-family: var(--font-heading, var(--font-body));
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.ms-hero__tags li + li::before {
  content: "·";
  margin-inline: 0.8em;
}

.ms-hero__title {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
}

/* Sized for a condensed face; --ms-hero-scale (theme) shrinks it for wider fonts, a long word breaks instead of overflowing. */
.ms-hero__name {
  font-size: calc(clamp(3.5rem, 0.5rem + 20.5vw, 10.5rem) * var(--ms-hero-scale, 0.7));
  line-height: 0.9;
  overflow-wrap: anywhere;
}

.ms-hero__sub {
  margin-top: 8px;
  color: var(--color-accent);
  font-size: clamp(1.5rem, 0.8rem + 4.2vw, 4.5rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.ms-hero__subtitle {
  max-width: 48ch;
  margin-top: 20px;
  color: var(--color-text-2);
  font-size: 1.125rem;
}

/* Optional slots that only template pages fill (app/Templates): a lead paragraph and a short note after the buttons. */
.ms-hero__lead {
  max-width: 60ch;
  margin-top: 20px;
  color: var(--color-text-2);
}

.ms-hero__note {
  max-width: 40ch;
  margin-top: 16px;
  color: var(--color-text-2);
  font-size: var(--fs-sm);
}

.ms-hero .btn-row {
  width: 100%;
  flex-direction: column;
  align-items: stretch;
  margin-top: 32px;
}

.ms-hero .btn {
  min-height: 56px;
}

/* "Watch trailer" is a text link with a play mark, in the style of the buttons. */
.ms-hero .link-arrow {
  justify-content: center;
  color: var(--color-text);
  font-family: var(--font-heading, var(--font-body));
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ms-hero .link-arrow::after {
  content: none;
}

.ms-hero .link-arrow::before {
  content: "▷";
}

/* Hazard stripe under the hero, switched on by the theme (body.ms--hazard). */
.ms--hazard .ms-hero {
  padding-bottom: 18px;
}

.ms--hazard .ms-hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 18px;
  background: repeating-linear-gradient(135deg, var(--color-accent) 0 12px, var(--ms-stripe) 12px 24px);
}

@media (min-width: 640px) {
  .ms-hero .btn-row {
    width: auto;
    flex-direction: row;
    align-items: center;
    margin-top: 40px;
  }

  .ms-hero .btn {
    min-width: 160px;
  }
}

@media (min-width: 900px) {
  .ms-hero {
    min-height: 760px;
  }

  .ms-hero__inner {
    padding-top: calc(var(--header-h) + 72px);
    padding-bottom: 120px;
  }

  .ms-hero__subtitle {
    margin-top: 24px;
    font-size: 1.1875rem;
  }

  .ms-hero .btn {
    min-height: 59px;
    padding-inline: 28px;
    font-size: 1.0625rem;
    letter-spacing: 2px;
  }
}

/* Facts: values in big letters above small labels, one row on wide screens, two columns on phones. */
.ms-facts {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.ms-facts__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 20px;
  margin: 0;
  padding-block: 32px;
}

.ms-facts__item {
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
}

.ms-facts__value {
  margin: 0;
  font-family: var(--font-heading, var(--font-body));
  font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.25rem);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.ms-facts__label {
  color: var(--color-muted);
  font-family: var(--font-heading, var(--font-body));
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

@media (min-width: 900px) {
  .ms-facts__list {
    display: flex;
    justify-content: space-between;
    gap: 24px 48px;
    padding-block: 36px;
  }

  .ms-facts__value {
    font-size: 2.375rem;
    line-height: 1.55;
  }

  .ms-facts__label {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 3px;
    line-height: 1.55;
  }

  .ms-facts__item {
    gap: 2px;
  }
}

/* Text + image: the picture sits on the side the block names, above the text on phones. */
.ms-split {
  padding-block: calc(var(--section-y) / 2);
}

:not(.ms-split) + .ms-split {
  padding-top: var(--section-y);
}

.ms-split__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.ms-split__media {
  order: -1;
}

.ms-split__img {
  width: 100%;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius);
  object-fit: cover;
}

/* A portrait screenshot keeps its proportions at a capped height, centered in the media column (wrapper class is a hook only). */
.ms-split__img--portrait {
  display: block;
  margin-inline: auto;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: contain;
}

.ms-split .ms-head {
  margin-bottom: 20px;
}

.ms-split .ms-eyebrow {
  margin-bottom: 20px;
}

.ms-split__text > :last-child {
  margin-bottom: 0;
}

@media (min-width: 900px) {
  .ms-split--image-right .ms-split__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 700px);
    gap: 72px;
  }

  .ms-split--image-left .ms-split__inner {
    grid-template-columns: minmax(0, 700px) minmax(0, 1fr);
    gap: 72px;
  }

  .ms-split--image-right .ms-split__media {
    order: 0;
  }

  .ms-split--text-only .ms-split__inner {
    max-width: 760px;
  }
}

/* Cards (the infected): picture area with a tag, name, stat meters, attack and weak spot. */
/* On phones the cards are a row that scrolls sideways; the wrapper is the focusable, named scroll region. */
.ms-cards__scroll {
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}

.ms-cards__scroll::-webkit-scrollbar {
  display: none;
}

.ms-cards__list {
  display: flex;
  gap: 16px;
}

.ms-cards__list > li {
  display: flex;
  flex: 0 0 78%;
  scroll-snap-align: start;
}

.ms-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.ms-card__media {
  position: relative;
  height: 180px;
  background: var(--color-surface-raised);
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 14%, var(--color-surface)) 0%, var(--color-surface) 100%);
}

.ms-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A card without a picture keeps only a coloured strip for its tag. */
.ms-card__media--plain {
  height: 72px;
}

.ms-card__tag {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 5px 10px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-heading, var(--font-body));
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.2;
  text-transform: uppercase;
}

.ms-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px;
}

.ms-card__name {
  margin-bottom: 20px;
  font-size: 2.125rem;
  line-height: 1;
}

.ms-stats {
  display: grid;
  gap: 12px;
  margin: 0 0 20px;
}

.ms-stats__row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.ms-stats dt,
.ms-card__label {
  font-family: var(--font-heading, var(--font-body));
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.ms-stats dt {
  color: var(--color-muted);
}

.ms-stats dd {
  margin: 0;
}

.ms-card__label {
  margin-top: 4px;
  color: var(--color-accent);
}

.ms-card__text,
.ms-card__weak {
  margin-top: 8px;
  color: var(--color-text-2);
  font-size: 0.875rem;
  line-height: 1.5;
}

.ms-card__weak {
  color: var(--color-text);
}

.ms-card__text + .ms-card__label {
  margin-top: 16px;
}

/* A stat is a <meter>: the bar is its length (0 to 100); a value of 70 or more is drawn in the warning colour. */
.ms-stat {
  display: block;
  width: 100%;
  height: 6px;
  border: 0;
  border-radius: 0;
  background: var(--color-border);
  -webkit-appearance: none;
  appearance: none;
}

.ms-stat::-webkit-meter-bar {
  height: 6px;
  border: 0;
  border-radius: 0;
  background: var(--color-border);
}

.ms-stat::-webkit-meter-optimum-value {
  background: var(--color-accent);
}

.ms-stat::-webkit-meter-suboptimum-value {
  background: var(--color-accent);
}

.ms-stat::-webkit-meter-even-less-good-value {
  background: var(--color-accent);
}

.ms-stat::-moz-meter-bar {
  background: var(--color-accent);
}

.ms-stat--high::-webkit-meter-optimum-value {
  background: var(--ms-danger);
}

.ms-stat--high::-webkit-meter-suboptimum-value {
  background: var(--ms-danger);
}

.ms-stat--high::-webkit-meter-even-less-good-value {
  background: var(--ms-danger);
}

.ms-stat--high::-moz-meter-bar {
  background: var(--ms-danger);
}

@media (min-width: 640px) {
  .ms-cards__scroll {
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }

  .ms-cards__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap);
  }

  .ms-cards__list > li {
    display: block;
  }

  .ms-card {
    height: 100%;
  }
}

@media (min-width: 1000px) {
  .ms-cards__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ms-card__media {
    height: 200px;
  }

  .ms-card__media--plain {
    height: 72px;
  }
}

/* Tiles: icon, title and text in bordered boxes on a band. */
.ms-tiles {
  background: var(--color-surface);
}

.ms-tiles__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ms-tile {
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.ms-icon {
  margin-bottom: 16px;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ms-tile__title {
  font-size: 1.25rem;
  line-height: 1.15;
}

.ms-tile__text {
  margin-top: 12px;
  color: var(--color-text-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}

@media (min-width: 900px) {
  .ms-tiles__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap);
  }

  .ms-tile {
    padding: 26px;
  }

  .ms-tile__title {
    font-size: 1.625rem;
  }
}

/* Image band: wide darkened picture (an img) with text over it. */
.ms-band {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: 360px;
  background: var(--color-surface);
}

.ms-band__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.ms-band__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Secondary text over the picture keeps 4.5:1 on the right end too (tools/a11y-check.php measures it). */
.ms-band__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(11 12 14 / 82%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-bg) 88%, transparent) 0%, color-mix(in srgb, var(--color-bg) 78%, transparent) 100%);
}

.ms-band__inner {
  padding-block: 64px;
}

.ms-band .ms-head {
  max-width: 640px;
  margin-bottom: 20px;
}

.ms-band__text {
  max-width: 560px;
  color: var(--color-text-2);
  font-size: 1.0625rem;
  line-height: 1.6;
}

@media (min-width: 900px) {
  .ms-band {
    min-height: 420px;
  }
}

/* Text block: a reading width. */
.ms-text .ms-prose {
  max-width: 70ch;
}

/* Gallery: the grid reuses .shots of site.css; the carousel scrolls by touch and by the buttons of js/carousel.js. */
.ms-gallery .shot {
  border-color: var(--color-border-strong);
}

.ms-gallery--carousel {
  overflow: hidden;
}

.ms-gallery--grid .ms-gallery__list {
  gap: var(--gap);
}
/* Carousel track and slides. */
.ms-carousel__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.ms-carousel__track::-webkit-scrollbar {
  display: none;
}

.ms-carousel__slide {
  flex: 0 0 85%;
  scroll-snap-align: start;
}

.ms-carousel__slide .shot {
  aspect-ratio: 16 / 9;
}

.ms-carousel__slide .shot.shot--portrait {
  aspect-ratio: auto;
}

.ms-carousel__bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 20px;
}

.ms-carousel__status {
  min-width: 5ch;
  text-align: center;
}

.ms-carousel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: transparent;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.ms-carousel__btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.ms-carousel__btn[aria-disabled="true"] {
  border-color: var(--color-border);
  color: var(--color-muted);
  cursor: default;
  opacity: 0.5;
}

.ms-carousel__bar[hidden] {
  display: none;
}

@media (min-width: 640px) {
  .ms-carousel__slide {
    flex-basis: calc((100% - 16px) / 2);
  }
}

@media (min-width: 1000px) {
  .ms-carousel__slide {
    flex-basis: calc((100% - 32px) / 3);
  }
}

/* Video: the trailer box of the classic page in a column of its own. */
.ms-video__figure {
  max-width: 960px;
  margin: 0;
}

.ms-video__caption {
  margin-top: 12px;
  color: var(--color-muted);
  font-size: var(--fs-sm);
}

/* News: the newest posts of the project in the cards of the news list. */
.ms-news__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 32px;
}

.ms-news__head .ms-head {
  margin-bottom: 0;
}

.ms-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  color: var(--color-accent);
  font-family: var(--font-heading, var(--font-body));
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-decoration: none;
  text-transform: uppercase;
}

.ms-more:hover {
  color: var(--color-accent-hover);
}

.ms .card__media {
  background: var(--color-surface-raised);
}

.ms .card__title {
  font-size: 1.625rem;
  line-height: 1.1;
  text-transform: none;
}

@media (min-width: 640px) {
  .ms .post-card .card__media {
    aspect-ratio: 421 / 160;
  }

  .ms .post-card .card__body {
    padding: 20px;
  }

  .ms-news__head .ms-title {
    font-size: 3rem;
  }
}

.ms .post-card .label {
  color: var(--color-accent);
}

/* Downloads: the list of the page downloads (site.css) on the full width of the block, in the theme colours. */
.ms-downloads__list {
  max-width: 68ch;
}

.ms-downloads .downloads__list {
  margin-top: 0;
  border-top-color: var(--color-border);
}

.ms-downloads .downloads__list .label {
  color: var(--color-muted);
}

/* Call to action: a band in the accent colour, dark text and buttons. */
.ms-cta-band {
  background: var(--color-accent);
  color: var(--color-on-accent);
  text-align: center;
}

.ms-cta-band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ms-cta-band__title {
  font-size: clamp(2.75rem, 1rem + 7vw, 5.5rem);
}

.ms-cta-band__text {
  max-width: 48ch;
  margin-top: 16px;
  font-size: var(--fs-lg);
}

/* Optional line after the buttons, filled only by template pages (app/Templates). */
.ms-cta-band__note {
  max-width: 48ch;
  margin-top: 20px;
}

/* The focus ring would vanish on the accent band in the accent colour: it takes the dark text colour there. */
.ms-cta-band :focus-visible {
  outline-color: var(--color-on-accent);
}

.ms-cta-band .btn-row {
  width: 100%;
  flex-direction: column;
  align-items: stretch;
  margin-top: 32px;
}

.ms-cta-band .btn--primary {
  border-color: var(--color-on-accent);
  background: var(--color-on-accent);
  color: var(--color-accent);
}

.ms-cta-band .btn--primary:hover {
  border-color: var(--color-on-accent);
  background: transparent;
  color: var(--color-on-accent);
}

.ms-cta-band .btn--outline {
  border-color: var(--color-on-accent);
  background: transparent;
  color: var(--color-on-accent);
}

.ms-cta-band .btn--outline:hover {
  background: var(--color-on-accent);
  color: var(--color-accent);
}

/* A text link on the accent band keeps the dark colour (the accent link colour would vanish), also on hover. */
.ms-cta-band .link-arrow {
  color: var(--color-on-accent);
  font-family: var(--font-heading, var(--font-body));
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ms-cta-band .link-arrow:hover {
  color: var(--color-on-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (min-width: 640px) {
  .ms-cta-band .btn-row {
    width: auto;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .ms-cta-band .btn {
    min-width: 180px;
  }
}

@media (min-width: 900px) {
  .ms-cta-band {
    padding-block: 90px;
  }

  .ms-cta-band .btn {
    min-height: 62px;
    padding-inline: 32px;
    font-size: 1.1875rem;
    letter-spacing: 2px;
  }

  .ms-cta-band .btn--primary {
    min-height: 66px;
  }
}

/* ---------- Cookie consent (site.css), re-themed with the theme tokens (design/export/Cookie-bar-microsite.png) ---------- */

.ms {
  --ck-line: var(--color-border);
  --ck-neutral: var(--color-text);
  --ck-neutral-hover: #fff;
  --ck-neutral-active: color-mix(in srgb, var(--color-text) 90%, #000);
  --ck-accent-active: color-mix(in srgb, var(--color-accent) 90%, #000);
}

.ms .consent-bar {
  border-top: 2px solid var(--color-accent);
  box-shadow: 0 -8px 32px rgb(0 0 0 / 67%);
}

.ms .consent-bar__title {
  font-family: var(--font-heading, var(--font-body));
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Phones: tighter letters so "Accept analytics" stays on one line in a half-width button. */
.ms .consent-btn,
.ms .consent-bar__settings {
  font-family: var(--font-heading, var(--font-body));
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.ms .consent-btn {
  padding-inline: 12px;
}

.ms .consent-btn,
.ms .consent-close,
.ms .consent-dialog__panel {
  border-radius: 0;
}

.ms .consent-dialog__title {
  font-size: 24px;
}

.ms .consent-row__name {
  font-size: 18px;
}

.ms .footer-consent {
  font-family: var(--font-ui);
}

@media (min-width: 900px) {
  .ms .consent-bar__title {
    font-size: 20px;
  }

  .ms .consent-btn,
  .ms .consent-bar__settings {
    letter-spacing: 2px;
  }

  .ms .consent-btn {
    padding-inline: 24px;
  }
}

@media (min-width: 640px) {
  .ms .consent-dialog__title {
    font-size: 28px;
  }
}