:root {
  --nnw-width: 76rem;
  --nnw-gutter: clamp(1rem, 4vw, 3rem);
  --nnw-border: color-mix(in srgb, var(--nnw-muted, #7e6870) 22%, transparent);
  /* One timing for every hover and focus change: short, with a strong ease-out. */
  --nnw-duration: 160ms;
  --nnw-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  font-family: var(--nnw-body-font, 'DM Sans'), 'Vazirmatn', sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--nnw-text, #241a1d);
  background: var(--nnw-background, #fffaf9);
  text-size-adjust: 100%;
}

* {
  box-sizing: border-box;
}

/* Links and buttons show their own hover, focus and pressed states; no grey flash on tap. */
a,
button {
  -webkit-tap-highlight-color: transparent;
}

/* Buttons give way slightly while pressed, on touch screens too. `html` makes this win over the
   components' hover lift, which loads later. */
@media (prefers-reduced-motion: no-preference) {
  html
    :is(
      .call-to-action__button,
      .hero-slider__button,
      .image-text__button,
      .menu__button,
      .newsletter-signup__button,
      .not-found__home,
      .resource-cards__button
    ):active {
    transform: scale(0.97);
  }
}

body {
  min-inline-size: 20rem;
  margin: 0;
  background: var(--nnw-background, #fffaf9);
}

h1,
h2,
h3,
h4 {
  font-family: var(--nnw-heading-font, var(--nnw-body-font, 'DM Sans')), 'Vazirmatn', sans-serif;
  line-height: 1.2;
  text-wrap: balance;
}

/* Large Latin headings read better slightly tighter. Never in Persian or Arabic: letter spacing
   breaks the joins between letters. */
:root:not(:lang(fa), :lang(ar)) :where(h1, h2) {
  letter-spacing: -0.02em;
}

/* No single word left alone on the last line of a paragraph. */
p {
  text-wrap: pretty;
}

a {
  color: var(--nnw-primary, #8e2035);
}

.site-header {
  position: relative;
  z-index: 5;
  inline-size: 100%;
  border-block-end: 1px solid var(--nnw-border);
  background: var(--nnw-surface, #fffaf9);
  color: var(--nnw-text, #241a1d);
}

.site-header__inner,
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  max-inline-size: var(--nnw-width);
  margin-inline: auto;
  padding-block: 0.85rem;
  padding-inline: var(--nnw-gutter);
}

.site-header:has(.menu__layout--sticky) {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
}

.site-header[data-theme-header='dark'] {
  border-color: transparent;
  background: var(--nnw-text, #241a1d);
  color: var(--nnw-surface, #fffaf9);
}

.site-header[data-theme-header='dark'] .menu__subtitle,
.site-header[data-theme-header='dark'] .menu__links a,
.site-header[data-theme-header='dark'] .site-tagline {
  color: color-mix(in srgb, currentColor 76%, transparent);
}

.site-header[data-theme-header='dark'] .menu__toggle {
  border-color: color-mix(in srgb, currentColor 50%, transparent);
}

.site-header__identity {
  display: grid;
  gap: 0.15rem;
}

.site-title {
  color: inherit;
  font-family: var(--nnw-heading-font, var(--nnw-body-font, 'DM Sans')), 'Vazirmatn', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: none;
}

.site-tagline {
  margin: 0;
  color: var(--nnw-muted, #7e6870);
  font-size: 0.875rem;
}

.site-languages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-inline-start: auto;
}

.site-languages a {
  border-radius: 999px;
  padding-block: 0.3rem;
  padding-inline: 0.7rem;
  color: inherit;
  font-size: 0.875rem;
  text-decoration: none;
}

.site-languages a[aria-current='page'] {
  background: color-mix(in srgb, var(--nnw-accent, #b5813a) 18%, transparent);
  font-weight: 700;
}

.site-main {
  inline-size: 100%;
  padding-block: clamp(2rem, 5vw, 4rem);
}

.site-main > :not(.hero-slider),
.site-main > div:not(:has(> .hero-slider)) {
  max-inline-size: var(--nnw-width);
  margin-inline: auto;
  padding-inline: var(--nnw-gutter);
}

.site-main > .hero-slider,
.site-main > div:has(> .hero-slider) {
  max-inline-size: none;
  margin-inline: 0;
  padding-inline: 0;
}

.site-main > .hero-slider {
  border-radius: 0;
}

/* A hero slider at the top starts right under the header, edge to edge, like a cover. */
.site-main:has(> .hero-slider:first-child),
.site-main:has(> div:first-child > .hero-slider) {
  padding-block-start: 0;
}
.site-main > .hero-slider .hero-slider__slide,
.site-main > div > .hero-slider .hero-slider__slide {
  border-radius: 0;
}

.site-main > * + * {
  margin-block-start: clamp(2rem, 5vw, 3.5rem);
}
.site-main > div:has(> .hero-slider) > .hero-slider {
  border-radius: 0;
}

.site-footer {
  border-block-start: 1px solid var(--nnw-border);
  background: var(--nnw-surface, #fffaf9);
  color: var(--nnw-muted, #7e6870);
}

.site-footer__inner {
  align-items: start;
}

.news-article {
  max-inline-size: 54rem;
  margin-inline: auto;
  padding-inline: var(--nnw-gutter);
}

.news-article h1 {
  color: var(--nnw-text, #241a1d);
}
.news-article time {
  color: var(--nnw-muted, #7e6870);
}
.news-article img {
  max-inline-size: 100%;
  border-radius: var(--nnw-radius, 0.75rem);
}

.news-index {
  max-inline-size: 54rem;
  margin-inline: auto;
  padding-inline: var(--nnw-gutter);
}

.news-index__items {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Picture, then title, date and summary side by side; flex follows dir="rtl" by itself. */
.news-index__item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding-block-end: 1.25rem;
  border-block-end: 1px solid var(--nnw-border);
}

.news-index__image {
  flex: none;
}

.news-index__image img {
  display: block;
  inline-size: 7.5rem;
  block-size: 5rem;
  object-fit: cover;
  border-radius: var(--nnw-radius, 0.75rem);
}

.news-index__title {
  color: var(--nnw-primary, #8e2035);
  font-weight: 700;
}

.news-index__text time {
  display: block;
  color: var(--nnw-muted, #7e6870);
  font-size: 0.875rem;
}

.news-index__text p {
  margin-block: 0.25rem 0;
}

@media (max-width: 30rem) {
  .news-index__image img {
    inline-size: 5rem;
    block-size: 3.75rem;
  }
}

.not-found {
  display: grid;
  justify-items: center;
  gap: 1rem;
  max-inline-size: 48rem;
  min-block-size: 55vh;
  margin-inline: auto;
  padding-block: clamp(4rem, 12vh, 8rem);
  padding-inline: var(--nnw-gutter);
  text-align: center;
}

.not-found__code {
  margin: 0;
  color: var(--nnw-accent, #b5813a);
  font-size: 0.875rem;
  font-weight: 700;
}

.not-found h1 {
  margin: 0;
  color: var(--nnw-text, #241a1d);
  font-size: clamp(2rem, 5vw, 3.5rem);
}

.not-found__message {
  max-inline-size: 38rem;
  margin: 0;
  color: var(--nnw-muted, #7e6870);
}

.not-found__home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-block-start: 0.5rem;
  border-radius: var(--nnw-radius, 0.5rem);
  padding-block: 0.75rem;
  padding-inline: 1.1rem;
  background: var(--nnw-primary, #8e2035);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 48rem) {
  .site-header__inner {
    align-items: start;
  }
  .site-languages {
    margin-inline-start: 0;
  }
}

/* A page without a visible h1 in its sections still has one for screen readers and crawlers. */
.site-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Hover and focus: only theme variables are used, so every website and both header styles work.
   Movement and transitions run only when the visitor allows motion. */
:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--nnw-accent, #b5813a);
  outline-offset: 2px;
}

.site-title:focus-visible {
  color: var(--nnw-primary, #8e2035);
}

@media (hover: hover) and (pointer: fine) {
  .site-title:hover {
    color: var(--nnw-primary, #8e2035);
  }
}

.site-languages a:focus-visible {
  background: color-mix(in srgb, var(--nnw-primary, #8e2035) 10%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .site-languages a:hover {
    background: color-mix(in srgb, var(--nnw-primary, #8e2035) 10%, transparent);
  }
}

.site-header[data-theme-header='dark'] .site-title:focus-visible {
  color: var(--nnw-accent, #b5813a);
}

@media (hover: hover) and (pointer: fine) {
  .site-header[data-theme-header='dark'] .site-title:hover {
    color: var(--nnw-accent, #b5813a);
  }
}

.site-header[data-theme-header='dark'] .site-languages a:focus-visible {
  background: color-mix(in srgb, var(--nnw-accent, #b5813a) 28%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .site-header[data-theme-header='dark'] .site-languages a:hover {
    background: color-mix(in srgb, var(--nnw-accent, #b5813a) 28%, transparent);
  }
}

.news-index__title:focus-visible {
  color: color-mix(in srgb, var(--nnw-primary, #8e2035) 78%, black);
  text-decoration: underline;
}

@media (hover: hover) and (pointer: fine) {
  .news-index__title:hover {
    color: color-mix(in srgb, var(--nnw-primary, #8e2035) 78%, black);
    text-decoration: underline;
  }
}

@media (hover: hover) and (pointer: fine) {
  .news-index__item:hover .news-index__image img {
    filter: brightness(0.94);
  }
}

.not-found__home:focus-visible {
  background: color-mix(in srgb, var(--nnw-primary, #8e2035) 85%, black);
}

@media (hover: hover) and (pointer: fine) {
  .not-found__home:hover {
    background: color-mix(in srgb, var(--nnw-primary, #8e2035) 85%, black);
  }
}

/* Slider arrows are filled on hover; with a dark header the fill is the accent colour. */
:root:has(.site-header[data-theme-header='dark']) .hero-slider__controls > button:focus-visible,
:root:has(.site-header[data-theme-header='dark']) .slider__controls > button:focus-visible {
  border-color: var(--nnw-accent, #b5813a);
  background: var(--nnw-accent, #b5813a);
  color: var(--nnw-text, #241a1d);
}
@media (hover: hover) and (pointer: fine) {
  :root:has(.site-header[data-theme-header='dark']) .hero-slider__controls > button:hover,
  :root:has(.site-header[data-theme-header='dark']) .slider__controls > button:hover {
    border-color: var(--nnw-accent, #b5813a);
    background: var(--nnw-accent, #b5813a);
    color: var(--nnw-text, #241a1d);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .site-title,
  .site-languages a,
  .news-index__title,
  .news-index__image img,
  .not-found__home {
    transition-property: background-color, border-color, box-shadow, color, transform, filter;
    transition-duration: var(--nnw-duration, 160ms);
    transition-timing-function: var(--nnw-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
  }

  .not-found__home:focus-visible {
    transform: translateY(-2px);
  }

  @media (hover: hover) and (pointer: fine) {
    .not-found__home:hover {
      transform: translateY(-2px);
    }
  }
}

.hero {
  padding-block: clamp(3rem, 8vw, 6rem);
  padding-inline: clamp(1.5rem, 6vw, 5rem);
  border-radius: var(--nnw-radius, 0.75rem);
  color: var(--nnw-text, #241a1d);
  background: color-mix(in srgb, var(--nnw-primary, #8e2035) 7%, var(--nnw-surface, #fffaf9));
}

.hero--start {
  text-align: start;
}

.hero--center {
  text-align: center;
}

.hero__heading {
  margin-block: 0 0.5rem;
  font-family: var(--nnw-heading-font, var(--nnw-body-font, sans-serif));
  font-size: clamp(1.75rem, 4.2vw, 2.75rem);
  line-height: 1.15;
}

/* Lines that fill the width (the last line stays at the start). */
.hero--start .hero__heading {
  text-align: justify;
  text-align-last: start;
  hyphens: auto;
}

.hero__subheading {
  margin-block: 0 1.5rem;
  font-size: 1.125rem;
  color: var(--nnw-muted, #7e6870);
}

.hero__button {
  display: inline-block;
  padding-block: 0.6rem;
  padding-inline: 1.25rem;
  border-radius: 999px;
  background: var(--nnw-primary, #8e2035);
  color: #fff;
  text-decoration: none;
}

.hero__eyebrow {
  margin-block: 0 0.75rem;
  color: var(--nnw-primary, #8e2035);
  font-size: 0.85rem;
  font-weight: 600;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

.hero__link {
  padding-block: 0.6rem;
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* Portrait: the picture stands beside the text (Phase 33). */
.hero--portrait {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2.5rem 4rem;
  background: var(--nnw-background, #fffaf9);
}

.hero--portrait .hero__inner {
  flex: 1 1 30rem;
  min-inline-size: 0;
}

.hero__portrait {
  flex: 0 1 24rem;
  min-inline-size: 0;
  margin: 0;
}

.hero__portrait img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--nnw-radius, 0.75rem);
}

.hero__portrait figcaption {
  margin-block-start: 0.75rem;
  color: var(--nnw-muted, #7e6870);
  font-size: 0.875rem;
}

/* A photo behind the text: a shade on the text side keeps the picture bright, and the text sits on a
   frosted panel with a thin light border, like the hero slider. */
.hero--photo {
  position: relative;
  display: flex;
  align-items: center;
  min-block-size: clamp(18rem, 34vw, 28rem);
  overflow: hidden;
  color: #fff;
}

/* The photo is an image element in the page, so its address resolves like any other link. */
.hero__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.hero--photo::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgb(26 10 18 / 45%), rgb(26 10 18 / 8%) 75%);
  content: '';
}

:where([dir='rtl']) .hero--photo::before {
  background: linear-gradient(270deg, rgb(26 10 18 / 45%), rgb(26 10 18 / 8%) 75%);
}

.hero--photo .hero__inner {
  position: relative;
  z-index: 2;
  max-inline-size: 40rem;
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: var(--nnw-radius, 0.75rem);
  padding-block: clamp(1.25rem, 3vw, 2rem);
  padding-inline: clamp(1.25rem, 3vw, 2.25rem);
  background: rgb(30 12 20 / 52%);
  box-shadow: 0 1.25rem 3rem rgb(0 0 0 / 25%);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  text-shadow: 0 1px 2px rgb(0 0 0 / 35%);
}

.hero--photo .hero__subheading {
  color: rgb(255 255 255 / 92%);
}

.hero--photo .hero__eyebrow {
  color: #f3d9a4;
}

.rich-text {
  max-inline-size: 48rem;
}

.rich-text blockquote {
  margin-inline: 0;
  padding-inline-start: 1rem;
  border-inline-start: 4px solid var(--nnw-accent, #b5813a);
  color: var(--nnw-muted, #7e6870);
}

.rich-text h2,
.rich-text h3 {
  font-family: var(--nnw-heading-font, var(--nnw-body-font, sans-serif));
}

.rich-text a {
  color: var(--nnw-primary, #8e2035);
}

.rich-text img {
  max-inline-size: 100%;
  block-size: auto;
}

/* Tables (scores, points, fees): clear lines, a tinted header and rows that alternate. */
.rich-text table {
  inline-size: 100%;
  margin-block: 1.25rem;
  border-collapse: collapse;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.rich-text caption {
  padding-block-end: 0.5rem;
  font-weight: 700;
  text-align: start;
}

.rich-text th,
.rich-text td {
  border: 1px solid var(--nnw-border, #e6d9dc);
  padding-block: 0.6rem;
  padding-inline: 0.8rem;
  text-align: start;
  vertical-align: top;
}

.rich-text th {
  background: color-mix(in srgb, var(--nnw-primary, #8e2035) 9%, var(--nnw-surface, #fff));
  font-weight: 700;
}

.rich-text tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--nnw-primary, #8e2035) 3%, var(--nnw-surface, #fff));
}

@media (max-width: 40rem) {
  .rich-text table {
    display: block;
    overflow-x: auto;
  }
}

.call-to-action {
  padding-block: 2rem;
  padding-inline: 1.5rem;
  border-radius: var(--nnw-radius, 1rem);
  background: var(--nnw-primary, #8e2035);
  color: #fff;
}

.call-to-action--light {
  border: 1px solid color-mix(in srgb, var(--nnw-primary, #8e2035) 20%, white);
  background: var(--nnw-surface, #fffaf9);
  color: var(--nnw-text, #241a1d);
}

.call-to-action__body {
  margin-block: 0.5rem 1rem;
  color: rgba(255, 255, 255, 0.9);
}

.call-to-action--light .call-to-action__body {
  color: var(--nnw-muted, #7e6870);
}

.call-to-action__body p {
  margin: 0;
}

.call-to-action__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
}

.call-to-action__button,
.call-to-action__link {
  color: #fff;
  text-decoration: none;
}

/* The extra links are outlined pills, so they read as links to press. */
.call-to-action__link {
  display: inline-block;
  padding-block: 0.45rem;
  padding-inline: 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  font-size: 0.95rem;
}

.call-to-action__button {
  display: inline-block;
  padding-block: 0.7rem;
  padding-inline: 1.15rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.call-to-action--light .call-to-action__button {
  background: var(--nnw-primary, #8e2035);
  color: #fff;
}

.call-to-action--light .call-to-action__link {
  border-color: color-mix(in srgb, var(--nnw-primary, #8e2035) 30%, white);
  color: var(--nnw-primary, #8e2035);
}

/* Hover and focus */
.call-to-action__button:focus-visible {
  background: rgba(255, 255, 255, 0.3);
}
@media (hover: hover) and (pointer: fine) {
  .call-to-action__button:hover {
    background: rgba(255, 255, 255, 0.3);
  }
}

.call-to-action--light .call-to-action__button:focus-visible {
  background: color-mix(in srgb, var(--nnw-primary, #8e2035) 85%, black);
}

@media (hover: hover) and (pointer: fine) {
  .call-to-action--light .call-to-action__button:hover {
    background: color-mix(in srgb, var(--nnw-primary, #8e2035) 85%, black);
  }
}

.call-to-action__link:focus-visible {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.16);
}

@media (hover: hover) and (pointer: fine) {
  .call-to-action__link:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.16);
  }
}

.call-to-action--light .call-to-action__link:focus-visible {
  border-color: var(--nnw-primary, #8e2035);
  background: color-mix(in srgb, var(--nnw-primary, #8e2035) 9%, transparent);
  color: color-mix(in srgb, var(--nnw-primary, #8e2035) 78%, black);
}

@media (hover: hover) and (pointer: fine) {
  .call-to-action--light .call-to-action__link:hover {
    border-color: var(--nnw-primary, #8e2035);
    background: color-mix(in srgb, var(--nnw-primary, #8e2035) 9%, transparent);
    color: color-mix(in srgb, var(--nnw-primary, #8e2035) 78%, black);
  }
}

.call-to-action__link:active {
  transform: scale(0.97);
}

@media (prefers-reduced-motion: no-preference) {
  .call-to-action__button,
  .call-to-action__link {
    transition-property: background-color, border-color, box-shadow, color, transform;
    transition-duration: var(--nnw-duration, 160ms);
    transition-timing-function: var(--nnw-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
  }

  .call-to-action__button:focus-visible {
    transform: translateY(-2px);
  }

  .call-to-action__link:focus-visible {
    transform: translateY(-1px);
  }

  @media (hover: hover) and (pointer: fine) {
    .call-to-action__link:hover {
      transform: translateY(-1px);
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .call-to-action__button:hover {
      transform: translateY(-2px);
    }
  }
}

.link-list {
  padding: 1.5rem;
  border: 1px solid var(--nnw-border, #e3e5e8);
  border-radius: var(--nnw-radius, 1rem);
  background: var(--nnw-surface, #fffaf9);
  color: var(--nnw-text, #241a1d);
}

.link-list__profile {
  display: block;
  inline-size: 5rem;
  aspect-ratio: 1;
  margin-block-end: 1rem;
  border-radius: 50%;
  object-fit: cover;
}

.link-list__profile-subtitle,
.link-list__subtitle {
  color: var(--nnw-muted, #7e6870);
}

.link-list__meta {
  margin-block: 0 1rem;
  color: var(--nnw-muted, #7e6870);
}

.link-list__items {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.link-list__item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
}

.link-list__copy {
  display: grid;
  gap: 0.2rem;
}

.link-list__icon {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--nnw-primary, #8e2035) 9%, var(--nnw-surface, white));
  color: var(--nnw-primary, #8e2035);
}

.link-list__icon svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.link-list__group {
  font-weight: 600;
}

.link-list__item a {
  color: var(--nnw-primary, #8e2035);
  text-decoration: none;
}

.link-list__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: 1.5rem;
  margin-block-end: 0;
  padding: 0;
  list-style: none;
}

.link-list__social a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--nnw-primary, #8e2035);
  text-decoration: none;
}

.link-list__social-icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

/* Hover and focus */
.link-list__items {
  gap: 0.5rem;
}

.link-list__item {
  border: 1px solid transparent;
  border-radius: var(--nnw-radius, 0.75rem);
  padding: 0.5rem;
}

.link-list__item:focus-within {
  border-color: color-mix(in srgb, var(--nnw-primary, #8e2035) 30%, transparent);
  box-shadow: 0 0.5rem 1.25rem color-mix(in srgb, var(--nnw-text, #241a1d) 14%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .link-list__item:hover {
    border-color: color-mix(in srgb, var(--nnw-primary, #8e2035) 30%, transparent);
    box-shadow: 0 0.5rem 1.25rem color-mix(in srgb, var(--nnw-text, #241a1d) 14%, transparent);
  }
}

.link-list__item a:focus-visible,
.link-list__social a:focus-visible {
  color: color-mix(in srgb, var(--nnw-primary, #8e2035) 78%, black);
  text-decoration: underline;
}

@media (hover: hover) and (pointer: fine) {
  .link-list__item a:hover,
  .link-list__social a:hover {
    color: color-mix(in srgb, var(--nnw-primary, #8e2035) 78%, black);
    text-decoration: underline;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .link-list__item,
  .link-list__item a,
  .link-list__social a {
    transition-property: background-color, border-color, box-shadow, color, transform;
    transition-duration: var(--nnw-duration, 160ms);
    transition-timing-function: var(--nnw-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
  }

  .link-list__item:focus-within {
    transform: translateY(-4px);
  }

  @media (hover: hover) and (pointer: fine) {
    .link-list__item:hover {
      transform: translateY(-4px);
    }
  }
}

.stats {
  border-block: 1px solid color-mix(in srgb, var(--nnw-accent, #b5813a) 35%, white);
  padding-block: 1.5rem;
  padding-inline: 1rem;
  background: var(--nnw-surface, #fffaf9);
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  max-inline-size: 76rem;
  margin: 0 auto;
}

.stats__item {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.25rem;
  min-inline-size: 0;
  text-align: center;
}

.stats__item dt {
  color: var(--nnw-muted, #7e6870);
}
.stats__item dd {
  margin: 0;
  color: var(--nnw-primary, #8e2035);
  font-size: 1.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 48rem) {
  .stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 30rem) {
  .stats__grid {
    gap: 1rem 0.5rem;
  }
  .stats__item dd {
    font-size: 1.45rem;
  }
}

.fees__head {
  max-inline-size: 42rem;
}

.fees__eyebrow {
  margin-block: 0 0.5rem;
  color: var(--nnw-primary, #8e2035);
  font-size: 0.8rem;
  font-weight: 600;
}

.fees__heading {
  margin-block: 0;
}

.fees__intro {
  margin-block: 1rem 0;
  color: var(--nnw-muted, #7e6870);
}

.fees__plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 1.25rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.fees__plan {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  padding: 1.5rem;
  border: 1px solid var(--nnw-border, #e3e5e8);
  border-radius: var(--nnw-radius, 0.75rem);
  background: var(--nnw-surface, #fff);
}

.fees__plan--highlight {
  border-color: var(--nnw-primary, #8e2035);
  box-shadow: 0 0 0 1px var(--nnw-primary, #8e2035);
}

.fees__name {
  margin-block: 0;
  font-size: 1.125rem;
}

.fees__tagline {
  margin-block: 0.25rem 0;
  color: var(--nnw-muted, #7e6870);
  font-size: 0.9375rem;
}

.fees__price {
  margin-block: 1rem 0;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.fees__text {
  margin-block: 0.75rem 0;
}

.fees__features {
  display: grid;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding-inline-start: 1.25rem;
}

.fees__body {
  flex: 1 1 auto;
}

/* The body grows, so the buttons line up at the bottom of every card in a row. */
.fees__button {
  align-self: flex-start;
  margin-block-start: 1.5rem;
  padding-block: 0.75rem;
  padding-inline: 1.25rem;
  border-radius: var(--nnw-radius, 0.5rem);
  background: var(--nnw-primary, #8e2035);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.fees__button:focus-visible {
  outline: 2px solid var(--nnw-accent, #b5813a);
  outline-offset: 2px;
}

.fees__note {
  margin-block: 1.5rem 0;
  color: var(--nnw-muted, #7e6870);
  font-size: 0.9375rem;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .fees__button {
    transition: opacity 0.2s;
  }

  .fees__button:hover {
    opacity: 0.88;
  }
}

.booking-embed__eyebrow {
  margin-block: 0 0.5rem;
  color: var(--nnw-primary, #8e2035);
  font-size: 0.8rem;
  font-weight: 600;
}

.booking-embed__heading {
  margin-block: 0;
}

.booking-embed__intro {
  margin-block: 1rem 0;
  color: var(--nnw-muted, #7e6870);
}

.booking-embed__card {
  margin-block-start: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--nnw-border, #e3e5e8);
  border-radius: var(--nnw-radius, 0.75rem);
  background: var(--nnw-surface, #fff);
}

.booking-embed__card[hidden] {
  display: none;
}

.booking-embed__notice {
  max-inline-size: 38rem;
  margin-block: 0;
  color: var(--nnw-muted, #7e6870);
  font-size: 0.9375rem;
}

.booking-embed__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

.booking-embed__notice + .booking-embed__actions {
  margin-block-start: 1rem;
}

.booking-embed__load {
  min-block-size: 2.75rem;
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  border: 0;
  border-radius: var(--nnw-radius, 0.5rem);
  background: var(--nnw-primary, #8e2035);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}

.booking-embed__load[hidden] {
  display: none;
}

.booking-embed__link {
  color: var(--nnw-primary, #8e2035);
  font-weight: 600;
}

.booking-embed__load:focus-visible,
.booking-embed__link:focus-visible {
  outline: 2px solid var(--nnw-accent, #b5813a);
  outline-offset: 2px;
}

.booking-embed__frame:not(:empty) {
  margin-block-start: 1.5rem;
}

.booking-embed__frame iframe {
  display: block;
  inline-size: 100%;
  border: 1px solid var(--nnw-border, #e3e5e8);
  border-radius: var(--nnw-radius, 0.75rem);
  background: #fff;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .booking-embed__load {
    transition: opacity 0.2s;
  }

  .booking-embed__load:hover {
    opacity: 0.88;
  }
}

.contact-buttons__eyebrow {
  margin-block: 0 0.5rem;
  color: var(--nnw-primary, #8e2035);
  font-size: 0.8rem;
  font-weight: 600;
}

.contact-buttons__heading {
  margin-block: 0;
}

.contact-buttons__intro {
  margin-block: 1rem 0;
  color: var(--nnw-muted, #7e6870);
}

.contact-buttons__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.contact-buttons__button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-block-size: 2.75rem;
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  border: 1px solid var(--nnw-primary, #8e2035);
  border-radius: 999px;
  background: var(--nnw-surface, #fff);
  color: var(--nnw-primary, #8e2035);
  font-weight: 600;
  text-decoration: none;
}

.contact-buttons__button:focus-visible {
  outline: 2px solid var(--nnw-accent, #b5813a);
  outline-offset: 2px;
}

.contact-buttons__icon {
  flex: none;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .contact-buttons__button {
    transition:
      background-color 0.2s,
      color 0.2s;
  }

  .contact-buttons__button:hover {
    background: var(--nnw-primary, #8e2035);
    color: #fff;
  }
}

/* Express Entry draws (Phase 37): a chart made at build time and the latest draws. */
.draws-chart__eyebrow {
  margin-block: 0 0.25rem;
  color: var(--nnw-primary, #8e2035);
  font-size: 0.8rem;
  font-weight: 600;
}

.draws-chart__heading {
  margin-block: 0;
}

.draws-chart__intro,
.draws-chart__note,
.draws-chart__empty {
  color: var(--nnw-muted, #7e6870);
}

.draws-chart__latest {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
  margin-block: 1.25rem 0;
  padding: 0.85rem 1rem;
  border-inline-start: 4px solid var(--nnw-primary, #8e2035);
  border-radius: var(--nnw-radius, 0.5rem);
  background: color-mix(in srgb, var(--nnw-primary, #8e2035) 7%, var(--nnw-surface, #fff));
}

.draws-chart__latest-label {
  color: var(--nnw-primary, #8e2035);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
}

.draws-chart__latest strong {
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
}

.draws-chart__figure {
  margin: 1.25rem 0 0;
  padding: 0.75rem;
  border: 1px solid var(--nnw-border, #e4d8d3);
  border-radius: var(--nnw-radius, 0.5rem);
  background: var(--nnw-surface, #fff);
}

.draws-chart__figure figcaption {
  margin-block-start: 0.25rem;
  color: var(--nnw-muted, #7e6870);
  font-size: 0.85rem;
  text-align: center;
}

.draws-chart__svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.draws-chart__grid {
  stroke: var(--nnw-border, #e4d8d3);
  stroke-width: 1;
}

.draws-chart__axis {
  fill: var(--nnw-muted, #7e6870);
  font-family: var(--nnw-body-font, sans-serif);
  font-size: 12px;
}

.draws-chart__line {
  fill: none;
  stroke: var(--nnw-primary, #8e2035);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.draws-chart__dot {
  fill: var(--nnw-surface, #fff);
  stroke: var(--nnw-primary, #8e2035);
  stroke-width: 2;
}

.draws-chart__table-wrap {
  margin-block-start: 1rem;
  overflow-x: auto;
}

.draws-chart__table {
  inline-size: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.draws-chart__table th,
.draws-chart__table td {
  padding: 0.55rem 0.75rem;
  border-block-end: 1px solid var(--nnw-border, #e4d8d3);
  text-align: start;
  white-space: nowrap;
}

.draws-chart__table th {
  color: var(--nnw-muted, #7e6870);
  font-size: 0.8rem;
  font-weight: 600;
}

/* Charts of several programs: one colour per program, the same in the legend. A chart of one
   program uses the theme's primary colour. */
.draws-chart__series {
  --draws-colour: var(--nnw-primary, #8e2035);
}
.draws-chart__series--general {
  --draws-colour: #64748b;
}
.draws-chart__series--cec {
  --draws-colour: #c2410c;
}
.draws-chart__series--pnp {
  --draws-colour: #2563eb;
}
.draws-chart__series--french {
  --draws-colour: #7c3aed;
}
.draws-chart__series--healthcare {
  --draws-colour: #059669;
}
.draws-chart__series--trades,
.draws-chart__series--fst {
  --draws-colour: #b45309;
}
.draws-chart__series--stem {
  --draws-colour: #0891b2;
}
.draws-chart__series--transport {
  --draws-colour: #db2777;
}
.draws-chart__series--agriculture,
.draws-chart__series--education,
.draws-chart__series--managers,
.draws-chart__series--physicians,
.draws-chart__series--military,
.draws-chart__series--other {
  --draws-colour: #6b7280;
}

.draws-chart__series .draws-chart__line,
.draws-chart__series .draws-chart__dot {
  stroke: var(--draws-colour);
}

.draws-chart__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--nnw-muted, #7e6870);
  font-size: 0.85rem;
}

.draws-chart__key::before {
  content: '';
  display: inline-block;
  inline-size: 0.75rem;
  block-size: 0.2rem;
  margin-inline-end: 0.4rem;
  vertical-align: middle;
  border-radius: 1px;
  background: var(--draws-colour);
}

.menu__layout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding-block: 1rem;
}

.site-header__inner > .menu__layout {
  flex: 1 1 auto;
  min-inline-size: 0;
}

/* A sticky element only sticks inside its parent, so the whole header sticks (site.css), and the
   menu keeps the header's own background (light or dark). */
.menu__layout--sticky {
  background: transparent;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

.menu__toggle {
  display: none;
  border: 1px solid currentColor;
  border-radius: var(--nnw-radius, 0.5rem);
  padding-block: 0.6rem;
  padding-inline: 1rem;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.menu[hidden] {
  display: none;
}

.menu__brand {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.menu__brand a {
  color: inherit;
  font-weight: 700;
  text-decoration: none;
}

.menu__subtitle {
  margin: 0;
  color: var(--nnw-muted, #7e6870);
  font-size: 0.875rem;
}

.menu__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__links a,
.menu__button {
  color: inherit;
  text-decoration: none;
}

.menu__button {
  display: inline-block;
  padding-block: 0.5rem;
  padding-inline: 1rem;
  border-radius: 999px;
  background: var(--nnw-primary, #8e2035);
  color: #fff;
}

/* The menu button exists only on small screens, and only once the menu script runs. */
@media (max-width: 48rem) {
  .menu__layout--script-enabled .menu__toggle {
    display: inline-flex;
  }

  .menu__layout--script-enabled {
    align-items: start;
  }

  .menu__layout--script-enabled .menu {
    flex-basis: 100%;
  }

  .menu__layout--script-enabled .menu__links {
    flex-direction: column;
  }
}

/* Hover and focus */
.menu__links {
  gap: 0.5rem 0.25rem;
}

.menu__links a {
  border-radius: var(--nnw-radius, 0.5rem);
  padding-block: 0.25rem;
  padding-inline: 0.5rem;
}

.menu__links a:focus-visible {
  background: color-mix(in srgb, var(--nnw-primary, #8e2035) 8%, transparent);
  color: var(--nnw-primary, #8e2035);
}

@media (hover: hover) and (pointer: fine) {
  .menu__links a:hover {
    background: color-mix(in srgb, var(--nnw-primary, #8e2035) 8%, transparent);
    color: var(--nnw-primary, #8e2035);
  }
}

.site-header[data-theme-header='dark'] .menu__links a:focus-visible {
  background: color-mix(in srgb, var(--nnw-accent, #b5813a) 18%, transparent);
  color: var(--nnw-accent, #b5813a);
}

@media (hover: hover) and (pointer: fine) {
  .site-header[data-theme-header='dark'] .menu__links a:hover {
    background: color-mix(in srgb, var(--nnw-accent, #b5813a) 18%, transparent);
    color: var(--nnw-accent, #b5813a);
  }
}

.menu__button:focus-visible {
  background: color-mix(in srgb, var(--nnw-primary, #8e2035) 85%, black);
}

@media (hover: hover) and (pointer: fine) {
  .menu__button:hover {
    background: color-mix(in srgb, var(--nnw-primary, #8e2035) 85%, black);
  }
}

.menu__toggle:focus-visible {
  background: color-mix(in srgb, currentColor 12%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .menu__toggle:hover {
    background: color-mix(in srgb, currentColor 12%, transparent);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .menu__links a,
  .menu__button,
  .menu__toggle {
    transition-property: background-color, border-color, box-shadow, color, transform;
    transition-duration: var(--nnw-duration, 160ms);
    transition-timing-function: var(--nnw-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
  }

  .menu__button:focus-visible {
    transform: translateY(-2px);
  }

  @media (hover: hover) and (pointer: fine) {
    .menu__button:hover {
      transform: translateY(-2px);
    }
  }
}

/* A short line above the menu, for example the licence (Phase 33). */
.menu__top-line {
  flex: 1 0 100%;
  margin: 0;
  padding-block-end: 0.5rem;
  border-block-end: 1px solid var(--nnw-border, #e4d8d3);
  color: var(--nnw-muted, #7e6870);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
}

/* A "Book" bar fixed to the bottom of phone screens (Phase 38, `stickyBook`). The page gets bottom
   padding so the footer is not covered, and the cookie banner moves above the bar. */
.menu__sticky-book {
  display: none;
}

@media (max-width: 40rem) {
  .menu__sticky-book {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: 3rem;
    padding-block: 0.75rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    padding-inline: 1rem;
    background: var(--nnw-primary, #8e2035);
    color: #fff;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .menu__sticky-book:focus-visible {
    outline: 2px solid var(--nnw-accent, #b5813a);
    outline-offset: -4px;
  }

  body:has(.menu__sticky-book) {
    padding-block-end: calc(3.5rem + env(safe-area-inset-bottom, 0px));
  }

  body:has(.menu__sticky-book) .nnw-consent {
    inset-block-end: calc(4rem + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 40rem) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  .menu__sticky-book {
    transition: opacity 0.2s;
  }

  .menu__sticky-book:hover {
    opacity: 0.9;
  }
}

.hero-slider__track {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: inline mandatory;
  scroll-behavior: smooth;
}

.hero-slider__slide {
  position: relative;
  display: grid;
  flex: 0 0 100%;
  align-items: center;
  min-block-size: 30rem;
  overflow: hidden;
  border-radius: var(--nnw-radius, 1.25rem);
  padding-block: clamp(2.5rem, 8vh, 6rem);
  padding-inline: clamp(1.5rem, 7vw, 7rem);
  scroll-snap-align: start;
}

.hero-slider__slide--blush {
  background: linear-gradient(125deg, #f5dce3, #f8eee8 72%);
  color: #321820;
}
.hero-slider__slide--rose {
  background: linear-gradient(125deg, #a92e46, #e06f79 72%);
  color: #fff;
}
.hero-slider__slide--wine {
  background: linear-gradient(125deg, #250d19, #7b1f36 72%);
  color: #fff;
}
.hero-slider__slide--dusk {
  background: linear-gradient(125deg, #252234, #7f5367 72%);
  color: #fff;
}
.hero-slider__slide--cream {
  background: linear-gradient(125deg, #f6ecd9, #fff9ed 72%);
  color: #34241d;
}

.hero-slider__background,
.hero-slider__slide--image::before {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.hero-slider__background {
  object-fit: cover;
}

/* Over a photo: only a light shade on the text side, so the picture stays bright, and the text sits
   on a frosted panel with a thin light border. */
.hero-slider__slide--image::before {
  z-index: 0;
  background: linear-gradient(90deg, rgb(26 10 18 / 45%), rgb(26 10 18 / 10%) 70%);
  content: '';
}

:where([dir='rtl']) .hero-slider__slide--image::before {
  background: linear-gradient(270deg, rgb(26 10 18 / 45%), rgb(26 10 18 / 10%) 70%);
}

.hero-slider__slide--image {
  color: #fff;
}

.hero-slider__slide--image .hero-slider__content {
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: var(--nnw-radius, 1rem);
  padding-block: clamp(1.25rem, 3vw, 2.25rem);
  padding-inline: clamp(1.25rem, 3vw, 2.5rem);
  background: rgb(30 12 20 / 52%);
  box-shadow: 0 1.25rem 3rem rgb(0 0 0 / 25%);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  text-shadow: 0 1px 2px rgb(0 0 0 / 35%);
}

/* The tag becomes a small pill so it reads on any photo. */
.hero-slider__slide--image .hero-slider__tag {
  display: inline-block;
  border: 1px solid rgb(255 255 255 / 35%);
  border-radius: 999px;
  padding-block: 0.25rem;
  padding-inline: 0.75rem;
  background: rgb(255 255 255 / 12%);
  color: #f3d9a4;
  text-shadow: none;
}

.hero-slider__slide--image .hero-slider__text {
  color: rgb(255 255 255 / 92%);
}

.hero-slider__content {
  position: relative;
  z-index: 1;
  max-inline-size: 48rem;
}

.hero-slider__tag {
  margin-block: 0 1rem;
  color: var(--nnw-accent, #b5813a);
  font-size: 0.875rem;
  font-weight: 700;
}

.hero-slider__content h2 {
  max-inline-size: 16ch;
  margin-block: 0;
  font-family: var(--nnw-heading-font, inherit);
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  line-height: 1.08;
}

.hero-slider__content h2 em {
  color: var(--nnw-primary, #a52b43);
  font-style: normal;
}
.hero-slider__slide--wine .hero-slider__content h2 em,
.hero-slider__slide--dusk .hero-slider__content h2 em,
.hero-slider__slide--rose .hero-slider__content h2 em,
.hero-slider__slide--image .hero-slider__content h2 em {
  color: var(--nnw-accent, #e3bd7d);
}

.hero-slider__text {
  max-inline-size: 42rem;
  margin-block: 1.25rem 0;
  font-size: 1.1rem;
  line-height: 1.7;
}

.hero-slider__button {
  display: inline-flex;
  align-items: center;
  margin-block-start: 1.75rem;
  border-radius: var(--nnw-radius, 0.5rem);
  padding-block: 0.85rem;
  padding-inline: 1.25rem;
  background: var(--nnw-primary, #8e2035);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.hero-slider {
  position: relative;
}

/* Dots and arrows sit together inside the slide, at its bottom start corner. */
.hero-slider__controls {
  display: none;
  position: absolute;
  inset-block-end: clamp(1rem, 3vw, 2rem);
  inset-inline-start: max(
    var(--nnw-gutter, 1.25rem),
    calc((100% - var(--nnw-width, 72rem)) / 2 + var(--nnw-gutter, 1.25rem))
  );
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
}

.nnw-slider-enabled .hero-slider__controls {
  display: flex;
}

.hero-slider__controls > button,
.hero-slider__dots button {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border: 1px solid color-mix(in srgb, var(--nnw-primary, #8e2035) 35%, white);
  border-radius: 50%;
  background: var(--nnw-surface, #fffaf9);
  color: var(--nnw-primary, #8e2035);
  cursor: pointer;
}

.hero-slider__dots {
  display: flex;
  gap: 0.5rem;
}
.hero-slider__dots button {
  inline-size: 0.75rem;
  block-size: 0.75rem;
}
.hero-slider__dots button[aria-current='true'] {
  background: var(--nnw-primary, #8e2035);
}
.hero-slider:dir(rtl) .hero-slider__controls > button {
  transform: scaleX(-1);
}

@media (max-width: 44rem) {
  .hero-slider__slide {
    min-block-size: 26rem;
  }
  .hero-slider__content h2 {
    font-size: 2.25rem;
  }
}

/* Room for the dots and arrows, which sit over the bottom of the slide. */
.nnw-slider-enabled .hero-slider__content {
  padding-block-end: 4.5rem;
}

/* Hover and focus */
.hero-slider__button:focus-visible {
  background: color-mix(in srgb, var(--nnw-primary, #8e2035) 85%, black);
}
@media (hover: hover) and (pointer: fine) {
  .hero-slider__button:hover {
    background: color-mix(in srgb, var(--nnw-primary, #8e2035) 85%, black);
  }
}

.hero-slider__controls > button:focus-visible {
  border-color: var(--nnw-primary, #8e2035);
  background: var(--nnw-primary, #8e2035);
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .hero-slider__controls > button:hover {
    border-color: var(--nnw-primary, #8e2035);
    background: var(--nnw-primary, #8e2035);
    color: #fff;
  }
}

.hero-slider__dots button:focus-visible {
  background: color-mix(in srgb, var(--nnw-primary, #8e2035) 45%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .hero-slider__dots button:hover {
    background: color-mix(in srgb, var(--nnw-primary, #8e2035) 45%, transparent);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-slider__button,
  .hero-slider__controls > button,
  .hero-slider__dots button {
    transition-property: background-color, border-color, box-shadow, color, transform;
    transition-duration: var(--nnw-duration, 160ms);
    transition-timing-function: var(--nnw-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
  }

  .hero-slider__button:focus-visible {
    transform: translateY(-2px);
  }

  @media (hover: hover) and (pointer: fine) {
    .hero-slider__button:hover {
      transform: translateY(-2px);
    }
  }
}

/* width: contained. The site templates make a slider edge to edge; this keeps it inside the page
   width like the other sections, with rounded corners. */
.site-main > .hero-slider.hero-slider--contained,
.site-main > div:has(> .hero-slider.hero-slider--contained) {
  max-inline-size: var(--nnw-width);
  margin-inline: auto;
  padding-inline: var(--nnw-gutter);
}

.site-main:has(> .hero-slider.hero-slider--contained:first-child),
.site-main:has(> div:first-child > .hero-slider.hero-slider--contained) {
  padding-block-start: clamp(2rem, 5vw, 4rem);
}

.site-main > .hero-slider.hero-slider--contained,
.site-main > div > .hero-slider.hero-slider--contained,
.site-main > div:has(> .hero-slider.hero-slider--contained) > .hero-slider {
  border-radius: var(--nnw-radius, 1.25rem);
}

.site-main > .hero-slider.hero-slider--contained .hero-slider__slide,
.site-main > div > .hero-slider.hero-slider--contained .hero-slider__slide {
  border-radius: var(--nnw-radius, 1.25rem);
}

.hero-slider--contained .hero-slider__controls {
  inset-inline-start: calc(var(--nnw-gutter, 1.25rem) + clamp(1.5rem, 7vw, 7rem));
}

.notice {
  display: flex;
  align-items: start;
  gap: 0.75rem;
  padding-block: 0.75rem;
  padding-inline: 1rem;
  border: 1px solid color-mix(in srgb, var(--nnw-accent, #b5813a) 30%, white);
  border-radius: var(--nnw-radius, 0.75rem);
  background: color-mix(in srgb, var(--nnw-accent, #b5813a) 9%, var(--nnw-surface, #fffaf9));
  color: var(--nnw-text, #241a1d);
}

.notice__icon {
  font-size: 1.25rem;
  line-height: 1;
}

.notice__body {
  flex: 1;
}

.notice__body p {
  margin: 0;
}

.cards__heading {
  margin-block: 0 1rem;
}

.cards__intro {
  max-inline-size: 48rem;
  margin-block: 0 1.5rem;
  color: var(--nnw-muted, #7e6870);
}

.cards__grid {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cards--columns-2 .cards__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cards--columns-4 .cards__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cards__card {
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--nnw-text, #241a1d) 9%, transparent);
  border-radius: var(--nnw-radius, 0.75rem);
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.04),
    0 4px 12px rgb(0 0 0 / 0.04);
  background: var(--nnw-surface, #fffaf9);
  color: var(--nnw-text, #241a1d);
  min-inline-size: 0;
  position: relative;
}

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: var(--nnw-radius, 0.5rem);
  background: color-mix(in srgb, var(--nnw-primary, #8e2035) 10%, var(--nnw-surface, white));
}

.card__tag {
  display: inline-block;
  margin-block: 0.25rem 0.5rem;
  padding-block: 0.25rem;
  padding-inline: 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--nnw-accent, #b5813a) 15%, var(--nnw-surface, white));
  color: var(--nnw-text, #241a1d);
  font-size: 0.75rem;
}

.cards__card h3 {
  margin-block: 0.5rem;
}

.cards__card p {
  margin: 0;
  color: var(--nnw-muted, #7e6870);
}

.cards__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0.5rem 0;
  padding: 0;
  list-style: none;
}

.cards__tags li {
  border-radius: 999px;
  padding-block: 0.2rem;
  padding-inline: 0.55rem;
  background: color-mix(in srgb, var(--nnw-accent, #b5813a) 12%, var(--nnw-surface, white));
  color: var(--nnw-text, #241a1d);
  font-size: 0.75rem;
}

.cards__number {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-end: 0.75rem;
  color: var(--nnw-muted, #7e6870);
  font-variant-numeric: tabular-nums;
}

.cards--columns-2 .cards__card:last-child:nth-child(2n + 1) {
  grid-column: span 2;
}
.cards--columns-3 .cards__card:last-child:nth-child(3n + 1) {
  grid-column: 2;
}
.cards--columns-4 .cards__card:last-child:nth-child(4n + 1) {
  grid-column: 2 / span 2;
}

@media (max-width: 56rem) {
  .cards__grid,
  .cards--columns-4 .cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cards--columns-4 .cards__card:last-child:nth-child(4n + 1) {
    grid-column: auto;
  }
  .cards__card:last-child:nth-child(2n + 1) {
    grid-column: span 2;
  }
}

@media (max-width: 38rem) {
  .cards__grid,
  .cards--columns-2 .cards__grid,
  .cards--columns-4 .cards__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .cards__card:last-child:nth-child(2n + 1) {
    grid-column: auto;
  }
  .cards--columns-3 .cards__card:last-child:nth-child(3n + 1) {
    grid-column: auto;
  }
}

/* Hover and focus: the top bar grows across the card. */
.cards__card {
  overflow: hidden;
}

.cards__card::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  background: var(--nnw-primary, #8e2035);
  transform: scaleX(0);
  transform-origin: left center;
}

.cards__card:dir(rtl)::before {
  transform-origin: right center;
}

.cards__card:focus-within {
  background: color-mix(in srgb, var(--nnw-primary, #8e2035) 4%, var(--nnw-surface, #fffaf9));
}

@media (hover: hover) and (pointer: fine) {
  .cards__card:hover {
    background: color-mix(in srgb, var(--nnw-primary, #8e2035) 4%, var(--nnw-surface, #fffaf9));
  }
}

.cards__card:focus-within::before {
  transform: scaleX(1);
}

@media (hover: hover) and (pointer: fine) {
  .cards__card:hover::before {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .cards__card {
    transition-property: background-color, border-color, box-shadow, color, transform;
    transition-duration: var(--nnw-duration, 160ms);
    transition-timing-function: var(--nnw-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
  }

  .cards__card::before {
    transition-property: transform;
    transition-duration: var(--nnw-duration, 160ms);
    transition-timing-function: var(--nnw-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
  }
}

@media (prefers-reduced-motion: reduce) {
  .cards__card::before {
    transform: none;
    opacity: 0;
  }

  .cards__card:focus-within::before {
    opacity: 1;
  }

  @media (hover: hover) and (pointer: fine) {
    .cards__card:hover::before {
      opacity: 1;
    }
  }
}

/* A linked card: the whole card is the link's target area. */
.cards__link {
  color: inherit;
  text-decoration: none;
}

.cards__link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.cards__card--linked:focus-within {
  outline: 2px solid var(--nnw-primary, #8e2035);
  outline-offset: 2px;
}

.cards__link:focus-visible {
  outline: none;
}

/* Rows: one card per row, like a table of contents (Phase 33). */
.cards--rows .cards__grid,
.cards--rows.cards--columns-2 .cards__grid,
.cards--rows.cards--columns-4 .cards__grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-block-end: 1px solid var(--nnw-border, #e4d8d3);
}

.cards--rows .cards__card,
.cards--rows .cards__card:last-child:nth-child(n) {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.4fr);
  align-items: center;
  gap: 0.5rem 2rem;
  grid-column: auto;
  padding-block: 1.5rem;
  padding-inline: 0;
  border: 0;
  border-block-start: 1px solid var(--nnw-border, #e4d8d3);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.cards--rows .cards__card::before {
  display: none;
}

.cards--rows .cards__card h3 {
  margin: 0;
  font-size: clamp(1.25rem, 2.4vw, 1.85rem);
}

.cards--rows .cards__number {
  position: static;
  grid-column: 1;
  grid-row: 1;
  font-size: 0.8rem;
  font-weight: 600;
}

.cards--rows .card__icon,
.cards--rows .card__tag,
.cards--rows .cards__tags {
  display: none;
}

@media (max-width: 40rem) {
  .cards--rows .cards__card,
  .cards--rows .cards__card:last-child:nth-child(n) {
    grid-template-columns: 3rem minmax(0, 1fr);
  }

  .cards--rows .cards__card p {
    grid-column: 2;
  }
}

/* A picture at the top of the card, edge to edge (Phase 34). */
.cards__card--image {
  padding-block-start: 0;
}

.card__image {
  display: block;
  inline-size: calc(100% + 2rem);
  aspect-ratio: 16 / 10;
  margin-block-end: 1rem;
  margin-inline: -1rem;
  object-fit: cover;
}

.cards__card--image .card__icon {
  display: none;
}

.image-text {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.image-text--end .image-text__image {
  order: 2;
}

.image-text--end .image-text__content {
  order: 1;
}

.image-text__image {
  display: block;
  inline-size: 100%;
  border-radius: var(--nnw-radius, 1rem);
  object-fit: cover;
}

.image-text__content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.image-text__button {
  display: inline-block;
  align-self: start;
  padding-block: 0.6rem;
  padding-inline: 1.1rem;
  border-radius: 999px;
  background: var(--nnw-primary, #8e2035);
  color: #fff;
  text-decoration: none;
}

.image-text__content .rich-text {
  color: var(--nnw-text, #3c4043);
}

.image-text__badge {
  display: flex;
  flex-direction: column;
  align-self: start;
  gap: 0.15rem;
  border-inline-start: 3px solid var(--nnw-accent, #b5813a);
  padding-inline-start: 0.75rem;
}

.image-text__badge span {
  color: var(--nnw-muted, #7e6870);
}

.image-text__chip {
  align-self: start;
  border: 1px solid color-mix(in srgb, var(--nnw-primary, #8e2035) 30%, white);
  border-radius: 999px;
  padding-block: 0.35rem;
  padding-inline: 0.75rem;
  color: var(--nnw-primary, #8e2035);
  text-decoration: none;
}

.image-text__checklist {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding-inline-start: 1.25rem;
}

@media (max-width: 44rem) {
  .image-text {
    grid-template-columns: minmax(0, 1fr);
  }
  .image-text--end .image-text__image,
  .image-text--end .image-text__content {
    order: initial;
  }
}

/* Hover and focus */
.image-text__button:focus-visible {
  background: color-mix(in srgb, var(--nnw-primary, #8e2035) 85%, black);
}
@media (hover: hover) and (pointer: fine) {
  .image-text__button:hover {
    background: color-mix(in srgb, var(--nnw-primary, #8e2035) 85%, black);
  }
}

.image-text__chip:focus-visible {
  border-color: var(--nnw-primary, #8e2035);
  background: color-mix(in srgb, var(--nnw-primary, #8e2035) 8%, transparent);
  color: color-mix(in srgb, var(--nnw-primary, #8e2035) 78%, black);
}

@media (hover: hover) and (pointer: fine) {
  .image-text__chip:hover {
    border-color: var(--nnw-primary, #8e2035);
    background: color-mix(in srgb, var(--nnw-primary, #8e2035) 8%, transparent);
    color: color-mix(in srgb, var(--nnw-primary, #8e2035) 78%, black);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .image-text__button,
  .image-text__chip {
    transition-property: background-color, border-color, box-shadow, color, transform;
    transition-duration: var(--nnw-duration, 160ms);
    transition-timing-function: var(--nnw-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
  }

  .image-text__button:focus-visible {
    transform: translateY(-2px);
  }

  @media (hover: hover) and (pointer: fine) {
    .image-text__button:hover {
      transform: translateY(-2px);
    }
  }
}

.resource-cards__heading {
  margin-block: 0 0.75rem;
  color: var(--nnw-text, #241a1d);
}
.resource-cards__intro {
  max-inline-size: 48rem;
  margin-block: 0 1.5rem;
  color: var(--nnw-muted, #7e6870);
}

.resource-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.resource-cards__card {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 0.75rem;
  min-inline-size: 0;
  border: 1px solid color-mix(in srgb, var(--nnw-primary, #8e2035) 14%, transparent);
  border-radius: var(--nnw-radius, 0.75rem);
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.04),
    0 4px 12px rgb(0 0 0 / 0.04);
  padding: 1.25rem;
  background: var(--nnw-surface, #fffaf9);
  color: var(--nnw-text, #241a1d);
}

.resource-cards__icon {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--nnw-accent, #b5813a) 16%, var(--nnw-surface, white));
  font-size: 1.25rem;
}

.resource-cards__card h3 {
  margin: 0;
}
.resource-cards__card p {
  flex: 1;
  margin: 0;
  color: var(--nnw-muted, #7e6870);
  line-height: 1.6;
}

.resource-cards__button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: var(--nnw-radius, 0.5rem);
  padding-block: 0.6rem;
  padding-inline: 0.9rem;
  background: var(--nnw-primary, #8e2035);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.resource-cards__button::after {
  content: '↓';
}

@media (max-width: 52rem) {
  .resource-cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 38rem) {
  .resource-cards__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Hover and focus */
.resource-cards__card:focus-within {
  border-color: color-mix(in srgb, var(--nnw-primary, #8e2035) 30%, transparent);
  box-shadow: 0 0.5rem 1.25rem color-mix(in srgb, var(--nnw-text, #241a1d) 14%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .resource-cards__card:hover {
    border-color: color-mix(in srgb, var(--nnw-primary, #8e2035) 30%, transparent);
    box-shadow: 0 0.5rem 1.25rem color-mix(in srgb, var(--nnw-text, #241a1d) 14%, transparent);
  }
}

.resource-cards__button:focus-visible {
  background: color-mix(in srgb, var(--nnw-primary, #8e2035) 85%, black);
}

@media (hover: hover) and (pointer: fine) {
  .resource-cards__button:hover {
    background: color-mix(in srgb, var(--nnw-primary, #8e2035) 85%, black);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .resource-cards__card,
  .resource-cards__button {
    transition-property: background-color, border-color, box-shadow, color, transform;
    transition-duration: var(--nnw-duration, 160ms);
    transition-timing-function: var(--nnw-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
  }

  .resource-cards__card:focus-within {
    transform: translateY(-4px);
  }

  @media (hover: hover) and (pointer: fine) {
    .resource-cards__card:hover {
      transform: translateY(-4px);
    }
  }

  .resource-cards__button:focus-visible {
    transform: translateY(-2px);
  }

  @media (hover: hover) and (pointer: fine) {
    .resource-cards__button:hover {
      transform: translateY(-2px);
    }
  }
}

.video-list__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.video-list__eyebrow {
  margin-block: 0 0.25rem;
  color: var(--nnw-primary, #8e2035);
  font-size: 0.8rem;
  font-weight: 600;
}

.video-list__heading {
  margin-block: 0;
}

.video-list__button {
  padding-block: 0.75rem;
  padding-inline: 1.25rem;
  border-radius: var(--nnw-radius, 0.5rem);
  background: var(--nnw-primary, #8e2035);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.video-list__layout {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-block-start: 2rem;
}

.video-list__featured {
  flex: 3 1 26rem;
  min-inline-size: 0;
  color: inherit;
  text-decoration: none;
}

.video-list__thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--nnw-border, #e4d8d3);
  border-radius: var(--nnw-radius, 0.5rem);
  background: color-mix(in srgb, var(--nnw-primary, #8e2035) 8%, var(--nnw-surface, #fffaf9));
}

.video-list__thumb img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.video-list__play {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 4.5rem;
  block-size: 4.5rem;
  border-radius: 50%;
  background: var(--nnw-primary, #8e2035);
  color: #fff;
}

.video-list__thumb--small {
  flex: 0 0 9rem;
}

.video-list__thumb--small .video-list__play {
  inline-size: 2.5rem;
  block-size: 2.5rem;
}

.video-list__featured .video-list__title {
  display: block;
  margin-block-start: 1rem;
  font-family: var(--nnw-heading-font, var(--nnw-body-font, sans-serif));
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.25;
}

.video-list__meta {
  display: block;
  margin-block-start: 0.25rem;
  color: var(--nnw-muted, #7e6870);
  font-size: 0.9rem;
}

.video-list__more {
  flex: 2 1 18rem;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border-block-end: 1px solid var(--nnw-border, #e4d8d3);
  list-style: none;
}

.video-list__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: 1rem;
  border-block-start: 1px solid var(--nnw-border, #e4d8d3);
  color: inherit;
  text-decoration: none;
}

.video-list__row .video-list__title {
  display: block;
  font-weight: 500;
  line-height: 1.3;
}

@media (hover: hover) and (pointer: fine) {
  .video-list__featured:hover .video-list__title,
  .video-list__row:hover .video-list__title {
    color: var(--nnw-primary, #8e2035);
  }
}

/* Grid: every video as a card, for a full list of a channel (Phase 35). */
.video-list__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 2rem 1.5rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.video-list__card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.video-list__card .video-list__title {
  display: block;
  margin-block-start: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
}

/* With a thumbnail, the play button is small and sits over the picture. */
.video-list__play--small,
.video-list__thumb:has(img) .video-list__play {
  inline-size: 2.75rem;
  block-size: 2.75rem;
}

.video-list__thumb:has(img) .video-list__play {
  opacity: 0.9;
}

@media (hover: hover) and (pointer: fine) {
  .video-list__card:hover .video-list__title {
    color: var(--nnw-primary, #8e2035);
  }
}

.news-list__items {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.news-list__item {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
}

.news-list__image {
  flex: none;
}

.news-list__image img {
  display: block;
  inline-size: 5rem;
  block-size: 3.75rem;
  object-fit: cover;
  border-radius: var(--nnw-radius, 0.75rem);
}

.news-list__item time {
  display: block;
  color: var(--nnw-muted, #7e6870);
  font-size: 0.875rem;
}

.news-list__item a {
  color: var(--nnw-primary, #8e2035);
}

.news-list__item p {
  margin-block: 0.25rem 0;
}

.news-list__all {
  display: inline-block;
  margin-block-start: 1rem;
  color: var(--nnw-primary, #8e2035);
  font-weight: 700;
}

/* Hover and focus */
.news-list__item a:focus-visible,
.news-list__all:focus-visible {
  color: color-mix(in srgb, var(--nnw-primary, #8e2035) 78%, black);
  text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
  .news-list__item a:hover,
  .news-list__all:hover {
    color: color-mix(in srgb, var(--nnw-primary, #8e2035) 78%, black);
    text-decoration: underline;
  }
}

@media (hover: hover) and (pointer: fine) {
  .news-list__item:hover .news-list__image img {
    filter: brightness(0.94);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .news-list__item a,
  .news-list__all,
  .news-list__image img {
    transition-property: background-color, border-color, box-shadow, color, transform, filter;
    transition-duration: var(--nnw-duration, 160ms);
    transition-timing-function: var(--nnw-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
  }
}

.news-list__eyebrow {
  margin-block: 0 0.25rem;
  color: var(--nnw-primary, #8e2035);
  font-size: 0.8rem;
  font-weight: 600;
}

.news-list__head .news-list__heading {
  margin-block-start: 0;
}

.news-list__category {
  display: block;
  color: var(--nnw-primary, #8e2035);
  font-size: 0.75rem;
  font-weight: 700;
}

.news-list__note {
  margin-block: 1rem 0;
  color: var(--nnw-muted, #7e6870);
  font-size: 0.875rem;
}

/* Cards: a grid of pictures and summaries (Phase 33). */
.news-list--cards .news-list__items {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: 1.5rem;
}

.news-list--cards .news-list__item {
  position: relative;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--nnw-border, #e4d8d3);
  border-radius: var(--nnw-radius, 0.75rem);
  background: var(--nnw-surface, #fffaf9);
}

.news-list--cards .news-list__image,
.news-list--cards .news-list__image img {
  inline-size: 100%;
}

.news-list--cards .news-list__image img {
  block-size: auto;
  aspect-ratio: 16 / 9;
  border-radius: 0;
}

.news-list--cards .news-list__text {
  padding: 1.25rem;
}

.news-list--cards .news-list__text > a {
  color: var(--nnw-text, #241a1d);
  font-size: 1.15rem;
  font-weight: 600;
  text-decoration: none;
}

/* The whole card is the link's target area. */
.news-list--cards .news-list__text > a::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* Updates: a highlighted box of rows with a label and a date (Phase 33). */
.news-list--updates {
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border: 2px solid var(--nnw-primary, #8e2035);
  border-radius: var(--nnw-radius, 0.75rem);
  background: var(--nnw-surface, #fffaf9);
}

.news-list--updates .news-list__items {
  gap: 0;
  border-block-end: 1px solid var(--nnw-border, #e4d8d3);
}

.news-list--updates .news-list__item {
  padding-block: 1rem;
  border-block-start: 1px solid var(--nnw-border, #e4d8d3);
}

.news-list--updates .news-list__text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1.25rem;
  inline-size: 100%;
}

.news-list--updates .news-list__category {
  flex: 0 0 8rem;
}

.news-list--updates .news-list__text > a {
  flex: 1 1 16rem;
  color: var(--nnw-text, #241a1d);
  font-weight: 500;
  text-decoration: none;
}

/* As wide as the other sections; the text beside the form on wide screens (Phase 35). */
.newsletter-signup {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  align-items: center;
  gap: 1rem 3rem;
  border: 1px solid var(--nnw-border, #ddd);
  border-radius: var(--nnw-radius, 0.5rem);
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--nnw-surface, #fff);
  color: var(--nnw-text, #222);
}

.newsletter-signup__heading,
.newsletter-signup__text,
.newsletter-signup__privacy {
  margin: 0;
}

.newsletter-signup__text,
.newsletter-signup__privacy {
  color: var(--nnw-muted, #666);
}

.newsletter-signup__privacy {
  grid-column: 1 / -1;
}

.newsletter-signup__form {
  display: grid;
  gap: 0.7rem;
}

.newsletter-signup__email-label {
  display: grid;
  gap: 0.3rem;
  font-weight: 600;
}

/* At least 16px, or iOS zooms into the page when the field gets focus. */
.newsletter-signup__email {
  inline-size: 100%;
  min-block-size: 2.75rem;
  border: 1px solid var(--nnw-border, #999);
  border-radius: var(--nnw-radius, 0.35rem);
  padding: 0.65rem 0.75rem;
  background: var(--nnw-background, #fff);
  color: var(--nnw-text, #222);
  font: inherit;
  font-size: max(16px, 1em);
}

.newsletter-signup__button {
  justify-self: start;
  min-block-size: 2.75rem;
  border: 0;
  border-radius: var(--nnw-radius, 0.35rem);
  padding-inline: 1rem;
  background: var(--nnw-primary, #8e2035);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.newsletter-signup__honeypot {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Hover and focus */
.newsletter-signup__button:focus-visible {
  background: color-mix(in srgb, var(--nnw-primary, #8e2035) 85%, black);
}
@media (hover: hover) and (pointer: fine) {
  .newsletter-signup__button:hover {
    background: color-mix(in srgb, var(--nnw-primary, #8e2035) 85%, black);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .newsletter-signup__button {
    transition-property: background-color, border-color, box-shadow, color, transform;
    transition-duration: var(--nnw-duration, 160ms);
    transition-timing-function: var(--nnw-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
  }

  .newsletter-signup__button:focus-visible {
    transform: translateY(-2px);
  }

  @media (hover: hover) and (pointer: fine) {
    .newsletter-signup__button:hover {
      transform: translateY(-2px);
    }
  }
}

.newsletter-signup__intro {
  display: grid;
  gap: 0.8rem;
}

.newsletter-signup__eyebrow {
  margin: 0;
  color: var(--nnw-primary, #8e2035);
  font-size: 0.8rem;
  font-weight: 600;
}

/* Band: a full-width dark band, the text beside the form on wide screens (Phase 33). */
.newsletter-signup--band {
  gap: 1.5rem 4rem;
  padding: clamp(2rem, 6vw, 4.5rem);
  border: 0;
  background: var(--nnw-text, #222);
  color: var(--nnw-surface, #fff);
}

.newsletter-signup--band .newsletter-signup__text,
.newsletter-signup--band .newsletter-signup__privacy,
.newsletter-signup--band .newsletter-signup__eyebrow {
  color: color-mix(in srgb, var(--nnw-surface, #fff) 78%, transparent);
}

.newsletter-signup--band .newsletter-signup__email {
  background: #fff;
  color: #1a1114;
}

.footer {
  padding-block: 2rem;
  border-block-start: 1px solid var(--nnw-border, #e3e5e8);
  color: var(--nnw-muted, #7e6870);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 1.5rem;
  justify-content: space-between;
  max-inline-size: var(--nnw-width, 76rem);
  margin-inline: auto;
  padding-inline: var(--nnw-gutter, 1.5rem);
}

.footer__brand {
  font-weight: 700;
  color: var(--nnw-text, #241a1d);
}

.footer__lines,
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__links a,
.footer__lines li,
.footer__tagline {
  color: inherit;
}

.footer__links a {
  padding-block: 0.2rem;
  /* The underline is a background that grows from the start of the word on hover. */
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 2px;
  color: var(--nnw-primary, #8e2035);
  text-decoration: none;
}

:where([dir='rtl']) .footer__links a {
  background-position: 100% 100%;
}

/* Hover and focus */
.footer__links a:focus-visible {
  background-size: 100% 2px;
  color: color-mix(in srgb, var(--nnw-primary, #8e2035) 78%, black);
}
@media (hover: hover) and (pointer: fine) {
  .footer__links a:hover {
    background-size: 100% 2px;
    color: color-mix(in srgb, var(--nnw-primary, #8e2035) 78%, black);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .footer__links a {
    transition-property: background-size, color;
    transition-duration: var(--nnw-duration, 160ms);
    transition-timing-function: var(--nnw-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
  }
}

.footer__copyright {
  margin: 0;
  font-size: 0.875rem;
  opacity: 0.8;
}

@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:100 900;font-display:swap;src:url('platform/fonts/vazirmatn-arabic.84a382e46c30.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:100 900;font-display:swap;src:url('platform/fonts/vazirmatn-latin.d29c041cd429.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
:where(img[width][height]){height:auto}