.site-header {
  position: sticky;
  z-index: 30;
  top: 0;
  height: 78px;
  border-bottom: 1px solid var(--color-line);
  background: rgba(255, 253, 248, .97);
  backdrop-filter: blur(10px);
}

/* Sits on top of a full-bleed masthead until the page scrolls past it. */
.site-header--overlay {
  position: fixed;
  right: 0;
  left: 0;
  border-bottom-color: transparent;
  background: transparent;
  backdrop-filter: none;
  color: var(--color-white);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

/* The photograph decides nothing about contrast, so the header brings its own scrim. */
.site-header--overlay::before {  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  height: 200%;
  background: linear-gradient(180deg, rgba(13, 28, 21, .82) 0%, rgba(13, 28, 21, .7) 45%, rgba(13, 28, 21, 0) 100%);
  content: "";
  opacity: 1;
  transition: opacity var(--transition);
}

.site-header--overlay .icon-button {
  border-color: var(--color-line-light);
}

.site-header--overlay .lang-switch {
  border-color: var(--color-line-light);
}

.site-header--overlay .lang-switch:hover,
.site-header--overlay .lang-switch:focus-visible {
  background: rgba(255, 255, 255, .16);
}

.site-header--overlay .text-action::after {
  color: inherit;
}

/* The per-section accent colours are all dark, so on the photograph the current page is marked
   by its underline instead. The menu turns into a light panel below 980px and keeps its own colours. */
@media (min-width: 981px) {
  .site-header--overlay:not(.is-scrolled) .main-menu .nav-link {
    --link-color: var(--color-white);
  }
}

/* The mega panels keep their own light background, so their copy stays dark. */
.site-header--overlay :is(.destination-mega, .about-mega) {
  color: var(--color-ink);
}

.site-header--overlay.is-scrolled {
  border-bottom-color: var(--color-line);
  background: rgba(255, 253, 248, .97);
  backdrop-filter: blur(10px);
  color: inherit;
}

.site-header--overlay.is-scrolled::before {
  opacity: 0;
}

.site-header--overlay.is-scrolled .icon-button {
  border-color: var(--color-line);
}

.site-header--overlay.is-scrolled .lang-switch {
  border-color: var(--color-line);
}

.site-header--overlay.is-scrolled .text-action::after {
  color: var(--color-ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  .site-header--overlay,
  .site-header--overlay::before {
    transition: none;
  }
}

/* Padding on the figure rather than on the copy, so centred copy is pushed clear of the header
   while the art, which is absolutely positioned, keeps the full frame. */
.site-header--overlay ~ main .page-masthead__figure {
  padding-block-start: 78px;
}

/* The reserved strip is extra height, otherwise the copy would lose what the header takes. */
.site-header--overlay ~ main .page-masthead--spotlight .page-masthead__figure {
  height: calc(var(--masthead-height) + 78px);
}

/* The tall variant is already sized to its picture, so extra height would letterbox it. */
.site-header--overlay ~ main .page-masthead--spotlight.page-masthead--tall .page-masthead__figure {
  height: var(--masthead-height);
}

.site-header__inner {
  display: grid;
  height: 100%;
  align-items: center;
  grid-template-columns: 150px 1fr auto;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 650;
  line-height: 1;
}

.brand__compass {
  display: grid;
  width: 36px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: var(--color-coral);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
}

.site-header .brand {
  width: 118px;
  height: 66px;
  padding: 6px 0;
}

.brand__legacy {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.main-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-content: flex-start;
  gap: clamp(1.5rem, 3vw, 2.75rem);
}

.nav-link {
  position: relative;
  padding: .7rem 0;
  font-family: var(--font-display);
  font-size: 1.03rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  transition: color var(--transition), transform var(--transition);
}

.nav-link::before {
  content: none;
}

.nav-link::after {
  position: absolute;
  right: 0;
  bottom: .35rem;
  left: 0;
  height: 2px;
  background: var(--link-color);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition);
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--link-color);
}

.nav-link[aria-current="page"] { color: var(--link-color); }
.nav-link[aria-current="page"]::after { transform: scaleX(1); }


.nav-link--green { --link-color: var(--color-forest); }
.nav-link--blue { --link-color: var(--color-blue); }
.nav-link--red { --link-color: var(--color-coral); }
.nav-link--brown { --link-color: var(--color-brown); }

.destination-mega {
  position: fixed;
  z-index: 40;
  top: 78px;
  right: 0;
  left: 0;
  border-bottom: 1px solid var(--color-line);
  background: rgba(255, 253, 248, .98);
  box-shadow: none;
}

.destination-mega__inner {
  display: grid;
  width: var(--shell);
  margin-inline: auto;
  padding-block: 1.75rem;
  grid-template-columns: 1fr 1.2fr .9fr;
  gap: 2.5rem;
}

.destination-mega h2 {
  margin-bottom: .75rem;
  font: 600 .68rem var(--font-body);
  text-transform: uppercase;
  letter-spacing: .12em;
}

.destination-mega__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem 1rem;
}

.destination-mega a {
  padding-block: .25rem;
  font-size: .8rem;
}

.destination-mega a:hover {
  color: var(--color-forest);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.destination-mega__featured {
  padding: 1rem;
  background: #dce8e2;
}

.destination-mega__featured strong,
.destination-mega__featured span {
  display: block;
}

.destination-mega__featured span {
  color: var(--color-ink-soft);
  font-size: .72rem;
}

.mega-feature {
  display: grid;
  padding-block: 0;
  gap: .5rem;
}

.mega-feature img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.mega-feature .mega-feature__label {
  color: var(--color-coral);
  font-size: .58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.mega-feature strong {
  font: 500 1.05rem/1.2 var(--font-display);
}

.mega-feature:hover strong {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.destination-mega__close {
  position: absolute;
  top: 1rem;
  right: max(1rem, calc((100% - 1180px) / 2));
  width: 36px;
  aspect-ratio: 1;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: transparent;
}

.about-mega {
  position: fixed;
  z-index: 40;
  top: 78px;
  right: 0;
  left: 0;
  border-bottom: 1px solid var(--color-line);
  background: rgba(255, 253, 248, .98);
  box-shadow: none;
}

.about-mega__inner {
  display: grid;
  padding-block: 2rem;
  grid-template-columns: .7fr 1.3fr;
  gap: 4rem;
}

.about-mega h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.about-mega nav { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 2rem; }
.about-mega nav a { padding: .7rem 0; border-bottom: 1px solid var(--color-line); }
.about-mega nav strong,.about-mega nav span { display: block; }
.about-mega nav span { margin-top: .15rem; color: var(--color-ink-soft); font-size: .7rem; }
.about-mega nav a:hover strong { color: var(--color-blue); }
.about-mega__close { position: absolute; top: 1rem; right: max(1rem, calc((100% - 1180px) / 2)); width: 36px; aspect-ratio: 1; border: 1px solid var(--color-line); border-radius: 50%; background: transparent; }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.site-header .header-actions {
  height: auto;
  padding-left: clamp(1rem,2vw,1.5rem);
  justify-self: end;
  gap: clamp(1rem,2vw,1.5rem);
  border-left: 0;
}

.site-header .header-actions .button {
  display: inline-flex;
  min-height: 42px;
  padding: .65rem 1rem;
  border-color: var(--color-mustard);
  background: var(--color-mustard);
  color: var(--color-ink);
  white-space: nowrap;
}

.site-header .header-actions .button::before {
  content: none;
}

.site-header .header-actions .button:hover,
.site-header .header-actions .button:focus-visible {
  border-color: var(--color-coral);
  background: var(--color-coral);
  color: var(--color-white);
}

.text-action {
  font-size: .86rem;
  font-weight: 500;
}

.lang-switch {
  display: inline-flex;
  padding: .25rem .6rem .25rem .3rem;
  align-items: center;
  gap: .4rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: inherit;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  transition: border-color var(--transition), background var(--transition);
}

.lang-switch:hover,
.lang-switch:focus-visible {
  border-color: currentcolor;
  background: rgba(25, 35, 29, .06);
}

.lang-switch__flag {
  width: 22px;
  aspect-ratio: 1;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  box-shadow: 0 0 0 1px rgba(25, 35, 29, .12) inset;
}

.lang-switch__flag--nl { background-image: url("../images/flags/nl.svg"); }
.lang-switch__flag--gb { background-image: url("../images/flags/gb.svg"); }

.site-header .text-action {
  display: inline-flex;
  padding-block: .55rem;
  align-items: center;
  gap: .45rem;
  font-size: .8rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.site-header .header-actions form {
  margin: 0;
}

.site-header .header-logout {
  border: 0;
  background: transparent;
}

.site-header .text-action::after {
  color: var(--color-ink-soft);
  content: "→";
  font-size: .8rem;
  transition: transform var(--transition);
}

.site-header .text-action:hover::after,
.site-header .text-action:focus-visible::after {
  transform: translate(2px,-2px);
}

.about-subnav {
  position: sticky;
  z-index: 25;
  top: 76px;
  border-bottom: 1px solid var(--color-line);
  background: rgba(255, 253, 248, .96);
  backdrop-filter: blur(12px);
}

.about-subnav__inner {
  display: flex;
  overflow-x: auto;
  gap: 1.75rem;
  white-space: nowrap;
}

.about-subnav a {
  position: relative;
  padding: .85rem 0;
  color: var(--color-ink-soft);
  font-size: .75rem;
  font-weight: 600;
}

.about-subnav a.is-active {
  color: var(--color-blue);
}

.about-subnav a.is-active::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--color-blue);
  content: "";
}

/* Page masthead: hero image with overlaid title on the header background.
   The frame is wider than the shell so the image breaks out of the text column,
   and it is capped at 1440px so a 1920px upload is never upscaled. */
.page-masthead {
  padding-block: var(--space-4) 0;
  background: var(--color-white);
  color: var(--color-ink);
}

.page-masthead__frame {
  width: min(1440px, calc(100% - 2rem));
  margin-inline: auto;
}

/* Article headers line up with the reading column instead of breaking out. */
.page-masthead--contained .page-masthead__frame {
  width: var(--shell);
}

.page-masthead__figure {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 420px;
  margin: 0;
  align-items: end;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  color: var(--color-white);
}

.page-masthead--wide .page-masthead__figure {
  aspect-ratio: 21 / 9;
}

.page-masthead__figure > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-masthead__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(13, 28, 21, .92), rgba(13, 28, 21, .12) 78%);
}

/*
 * Spotlight masthead: the photograph is shown whole rather than cropped to the wide frame. A blurred
 * copy of the same picture fills the leftover space, so the tint behind the copy is always the
 * picture's own colour, and the sharp image fades into that wash instead of ending on a hard edge.
 */
.page-masthead--spotlight {
  /* Sits flush under the site header; the frame runs edge to edge, so a gap would read as a seam. */
  --masthead-height: clamp(420px, min(43vw, 1032px), 1024px);
  --masthead-art: 74%;
  --masthead-ratio: 21 / 9;
  padding-block: 0;
}

/* The homepage is the front door, so the same treatment gets more room. The height is the art's own
   height: 80% of the frame at the picture's 3:2, so the photo fills the frame instead of letterboxing. */
.page-masthead--spotlight.page-masthead--tall {
  --masthead-height: clamp(480px, 53.333vw, 1024px);
  --masthead-art: 80%;
  --masthead-ratio: 16 / 9;
}

/* The homepage headline runs far wider than a region name, so the scrim has to reach further with it,
   and the copy column ends over a sunlit valley that needs its own corner wash. */
.page-masthead--spotlight.page-masthead--tall .page-masthead__figure::after {
  background:
    linear-gradient(90deg, rgba(13, 28, 21, .84) 0%, rgba(13, 28, 21, .72) 42%, rgba(13, 28, 21, .3) 66%, rgba(13, 28, 21, 0) 82%),
    radial-gradient(120% 100% at 0% 100%, rgba(13, 28, 21, .55), rgba(13, 28, 21, 0) 62%);
}

/* Keeps the headline inside the shaded half instead of running onto the sunlit part of the photo. */
.page-masthead--spotlight.page-masthead--tall :is(h1, h2, h3) {
  max-width: min(16ch, 46%);
}

.page-masthead--spotlight.page-masthead--tall .page-masthead__lead {
  max-width: min(42ch, 46%);
}

.page-masthead--spotlight .page-masthead__frame {
  /* Grows until the art reaches its own 1024 pixels, then stops; wider than this only stretches the wash. */
  width: 100%;
  max-width: 2400px;
  margin-inline: auto;
}

/* Breadcrumbs stay on the reading column even though the frame runs edge to edge. */
.page-masthead--spotlight .page-masthead__trail {
  width: var(--shell);
  margin-inline: auto;
}

.page-masthead--spotlight .page-masthead__figure {
  align-items: center;
  /* Height follows the width so the art keeps its share of the frame, and stops at its own pixels. */
  aspect-ratio: auto;
  height: var(--masthead-height);
}

.page-masthead--spotlight .page-masthead__wash {
  filter: blur(40px) saturate(118%);
  /* Scaled up so the blur samples image, not the transparent edge beyond it. */
  transform: scale(1.18);
}

.page-masthead--spotlight .page-masthead__art {
  right: 0;
  left: auto;
  width: auto;
  max-width: var(--masthead-art);
  object-fit: contain;
  object-position: right center;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 14%, #000 34%);
}

.page-masthead--spotlight .page-masthead__figure::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(13, 28, 21, .78) 0%, rgba(13, 28, 21, .6) 34%, rgba(13, 28, 21, .18) 58%, rgba(13, 28, 21, 0) 74%),
    linear-gradient(0deg, rgba(13, 28, 21, .3), rgba(13, 28, 21, 0) 58%);
  content: "";
}

.page-masthead--spotlight .page-masthead__shade {
  background: none;
}

.page-masthead--spotlight .page-masthead__inner {
  /* Sits on the shell so the banner copy starts where the menu and the breadcrumbs do. */
  width: var(--shell);
  margin-inline: auto;
  padding: clamp(2rem, 4vw, 3.75rem) 0;
  text-shadow: 0 1px 24px rgba(13, 28, 21, .45);
}

@media (max-width: 900px) {
  /* A fixed ratio cannot grow with the copy, because the figure clips its overflow. */
  .site-header--overlay ~ main .page-masthead__figure {
    aspect-ratio: auto;
    min-height: 100svh;
  }

  /* Too narrow for a side column, so the copy takes the full width over a bottom-up scrim. */
  .page-masthead--spotlight .page-masthead__figure {
    align-items: end;
    height: auto;
    aspect-ratio: var(--masthead-ratio);
  }

  .page-masthead--spotlight .page-masthead__wash {
    display: none;
  }

  .page-masthead--spotlight .page-masthead__art {
    right: auto;
    left: 0;
    width: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    mask-image: none;
  }

  .page-masthead--spotlight .page-masthead__figure::after {
    background: none;
  }

  .page-masthead--spotlight .page-masthead__shade {
    background: linear-gradient(0deg, rgba(13, 28, 21, .92), rgba(13, 28, 21, .12) 78%);
  }

  .page-masthead--spotlight .page-masthead__inner {
    width: var(--shell);
    padding: clamp(1.75rem, 4vw, 3.25rem) 0;
  }
}

.page-masthead__inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  padding: clamp(1.75rem, 4vw, 3.25rem);
}

.page-masthead :is(h1, h2, h3) {
  max-width: 16ch;
  margin: 0;
  font-size: var(--step-4);
  line-height: .92;
}

.page-masthead__lead {
  max-width: 54ch;
  margin: 0;
  color: rgba(255, 253, 248, .8);
  font-size: var(--step-1);
}

/* The global anchor reset strips decoration, so a link in the lead needs its own affordance. */
.page-masthead__lead a {
  color: var(--color-white);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 500;
}

.page-masthead__lead a:hover,
.page-masthead__lead a:focus-visible {
  text-decoration-thickness: 2px;
}

.page-masthead__trail {
  padding-block: var(--space-3);
}

/* Restated here because the base breadcrumb colour targets dark heroes. */
.page-masthead__trail .breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 0;
  color: var(--color-ink-soft);
  font-size: .75rem;
}

@media (max-width: 720px) {
  /* Drop the fixed ratio so a long title and buttons can grow the image box. */
  .page-masthead__figure,
  .page-masthead--wide .page-masthead__figure {
    aspect-ratio: auto;
    min-height: 70svh;
  }
}

/* Full-width colour bands; the block inside keeps its own padding. */
.surface-white {
  background: var(--color-white);
}

.surface-mist {
  background: var(--color-mist);
}

.surface-paper {
  background: var(--color-paper);
}

/* Error and empty pages: one column of copy with room to breathe, no artwork to lean on. */
.error-state {
  display: grid;
  max-width: 54ch;
  justify-items: start;
  gap: var(--space-4);
  padding-block: clamp(1rem, 4vw, 3rem);
}

.error-state__code {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-3);
  letter-spacing: .04em;
}

.error-state h1 {
  margin: 0;
  font-size: var(--step-4);
  line-height: 1;
}

.error-state__lead {
  max-width: 46ch;
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--step-1);
}

.error-state__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.error-state__trace {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: .78rem;
}

.error-state__trace code {
  font-size: .78rem;
  word-break: break-all;
}

@media (max-width: 900px) {
  .about-subnav__inner {
    gap: 1rem;
  }
}

.button {
  display: inline-flex;
  min-height: 48px;
  padding: .75rem 1.25rem;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  border: 1px solid var(--color-coral);
  border-radius: var(--radius-small);
  background: var(--color-coral);
  color: var(--color-white);
  font-size: .86rem;
  font-weight: 600;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

.button:hover,
.button:focus-visible {
  border-color: var(--color-forest-dark);
  background: var(--color-forest-dark);
  transform: translateY(-2px);
}

.button[aria-disabled="true"],
.text-action[aria-disabled="true"],
.nav-link[aria-disabled="true"],
.footer-links [aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

.button--compact {
  min-height: 40px;
  padding: .55rem .9rem;
}

.button--ink {
  border-color: var(--color-ink);
  background: var(--color-ink);
}

.button--ghost {
  border-color: var(--color-line);
  background: transparent;
  color: var(--color-ink);
}

.button--ghost:hover,
.button--ghost:focus-visible {
  border-color: var(--color-ink);
  background: transparent;
  color: var(--color-ink);
}

.underlined-link {
  display: inline-flex;
  padding: 0 0 .2rem;
  align-items: center;
  gap: .75rem;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  font-size: .86rem;
  font-weight: 600;
}

.underlined-link--light {
  color: var(--color-white);
}

.icon-button {
  display: none;
  width: 44px;
  aspect-ratio: 1;
  padding: 0;
  place-items: center;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: transparent;
}

.menu-toggle__icon,
.menu-toggle__icon::before,
.menu-toggle__icon::after {
  width: 18px;
  height: 1px;
  background: currentColor;
}

.menu-toggle__icon {
  position: relative;
}

.menu-toggle__icon::before,
.menu-toggle__icon::after {
  position: absolute;
  left: 0;
  content: "";
}

.menu-toggle__icon::before { top: -5px; }
.menu-toggle__icon::after { top: 5px; }

.section-heading {
  display: grid;
  margin-bottom: var(--space-6);
  align-items: end;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr);
  gap: var(--space-6);
}

.section-heading > p {
  max-width: 42ch;
  margin-bottom: .5rem;
  color: var(--color-ink-soft);
}

.section-heading--light {
  color: var(--color-white);
}

.site-footer {
  padding-block: var(--space-6) var(--space-4);
  background: var(--color-ink);
  color: rgba(255, 253, 248, .72);
}

.site-footer__top,
.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
}

.brand--footer {
  color: var(--color-white);
}

.site-footer__top p {
  margin: .75rem 0 0;
  font-family: var(--font-display);
}

.footer-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: .82rem;
}

.site-footer__bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line-light);
  font-size: .74rem;
}

@media (max-width: 980px) {
  .site-header__inner {
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
  }

  .icon-button {
    display: grid;
    justify-self: end;
  }

  /* The menu drops down as a light panel, so it keeps the normal ink instead of the header's white. */
  .site-header--overlay .main-menu {
    color: var(--color-ink);
  }

  .main-menu {
    position: absolute;
    top: 78px;
    right: 0;
    left: 0;
    display: none;
    padding: .75rem max(1.5rem, calc((100% - 720px) / 2));
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    border-bottom: 1px solid var(--color-line);
    background: var(--color-paper);
  }

  .nav-link {
    min-height: 54px;
    padding-inline: .75rem;
    border-top: 1px solid var(--color-line);
    border-left: 0;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
  }

  .nav-link::before {
    content: none;
  }

  .nav-link:first-child { border-top: 0; }

  .nav-link::after {
    top: 0;
    right: auto;
    bottom: 0;
    width: 3px;
    height: auto;
    transform: scaleY(0);
    transform-origin: bottom;
  }

  .nav-link:hover::after,
  .nav-link:focus-visible::after {
    transform: scaleY(1);
    transform-origin: top;
  }

  .main-menu.is-open {
    display: flex;
  }

  /* The actions collapse into the menu, except the language switch: it is the only way to reach
     the other language and stays next to the menu button. */
  .header-actions {
    display: flex;
    justify-self: end;
    padding-left: 0;
  }

  .site-header .header-actions > *:not(.lang-switch) {
    display: none;
  }

  .menu-toggle {
    order: 1;
  }

  .destination-mega {
    top: 78px;
    max-height: calc(100svh - 78px);
    overflow: auto;
  }

  .destination-mega__inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .about-mega { top: 78px; max-height: calc(100svh - 78px); overflow: auto; }
  .about-mega__inner { grid-template-columns: 1fr; gap: 1.5rem; }
}

@media (max-width: 720px) {
  .about-subnav {
    top: 68px;
  }

  .site-header {
    height: 68px;
  }

  .site-header--overlay ~ main .page-masthead__figure {
    padding-block-start: 68px;
  }

  .site-header .brand {
    width: 118px;
    height: 66px;
    padding: 8px 14px 4px 0;
  }

  .main-menu {
    top: 68px;
    padding-inline: .875rem;
  }

  .destination-mega,
  .about-mega {
    top: 68px;
    max-height: calc(100svh - 68px);
  }

  .section-heading {
    align-items: start;
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .site-footer__top {
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .about-subnav__inner {
    gap: 1.25rem;
  }
}