/* =========================================================================
   Ludic Group — foundation
   Tokens, reset, typography, page chrome (header / footer / skip link).

   This is the LIVE SITE'S design system, not a new one. Colours, fonts and
   layout dimensions were read off the Webflow build in _archive/ with the
   browser rather than eyeballed — the value each token replaces is noted
   beside it.

   What is deliberately different from the original, and only this:
     * ONE spacing ladder instead of ad-hoc paddings.
     * ONE type scale. The original mixes 0.8 / 0.9 / 1 / 1.2 / 1.25 / 1.3 /
       1.5 / 2 / 3rem with no relationship between them; the sizes below are
       the same design rounded onto a scale, so headings match across pages.
     * The h1 was 2rem on the homepage and 3rem on Contact. Every page h1 is
       now the same size.

   BREAKPOINT LADDER — the only four widths this site uses. Custom properties
   do not work inside @media (a CSS restriction, not an oversight), so the
   numbers are written out and this comment is the single source of truth.

       36rem   576px   small phone  -> large phone
       48rem   768px   phone        -> tablet
       64rem  1024px   tablet       -> laptop
       80rem  1280px   laptop       -> desktop

   NAMING — block__element--modifier. No ID selectors. No !important outside
   @media print and the reduced-motion block.
   ========================================================================= */

/* ---------- fonts -------------------------------------------------------
   Self-hosted so no third-party request fires before the visitor has made a
   consent choice. The original pulled both from Google Fonts, which is a
   third-party request on page load. Same two families, same weights.
   ----------------------------------------------------------------------- */
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Slab";
  src: url("../assets/fonts/roboto-slab-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ------------------------------------------------------ */
:root {
  /* Brand values, straight off the live site's :root. Components read the
     semantic aliases below, never these, which is what makes [data-theme] a
     five-line override instead of a rewrite. */
  --black: #000000;
  --white: #ffffff;
  --cream: #f2f2f2;          /* section background, the site's workhorse */
  --header-cream: #f9fbf7;   /* the hero card, and only the hero card */
  --black-hover: #1b1b1b;
  --dark-grey: #494949;
  --mid-grey: #929292;
  --light-grey: #e9f0f1;

  --blue: #44597b;           /* also Deep Blue in the 2026 brand kit */
  --bold-blue: #2c6eed;      /* Ludic Advisory tile */
  --smartlab-blue: #5b8edb;  /* SmartLab tile */
  --yellow: #ffd728;         /* Media Studio tile */
  --dh-purple: #865aa1;
  --curious-red: #ec6a54;
  /* Deep Blue opened up for use on the black chrome. #44597b itself measures
     2.96:1 on black — unusable for a link. Same hue, lightened to 9.87:1. */
  --blue-on-dark: #9fb3d4;

  /* Semantic aliases. The accent is black: the live site uses black for
     every button, border and rule, and reserves colour for the brand tiles
     and publication pages. */
  --accent: var(--black);
  --accent-hover: var(--black-hover);
  --accent-on: var(--white);
  --ink: var(--black);
  --ink-muted: var(--dark-grey);   /* 8.10:1 on white, 7.36:1 on cream */
  --surface: var(--white);
  --surface-alt: var(--cream);
  --ink-on-invert: var(--white);
  --line: #d4d4d4;
  --control-line: var(--black);    /* the original's 2px black input border */

  /* Layout, from the live site: .container-large is 80rem with 2.5rem of
     side padding; section paddings are 7 / 5 / 3rem. */
  --container: 80rem;
  --container-small: 60rem;
  --container-pad: 2.5rem;
  --header-h: 68px;

  /* Spacing ladder. The original had no ladder; these are its own values
     rounded onto one, so vertical rhythm is decided in a single place. */
  --space-2xs: 0.5rem;
  --space-xs: 1rem;
  --space-sm: 1.5rem;
  --space-md: 2rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 7rem;

  /* Type scale. Left column is the live site value each one replaces.
       0.80rem  nav             -> --text-xs   0.875rem
       0.90rem  small           -> --text-sm   0.9375rem
       1.00rem  body            -> --text-base 1rem
       1.20rem  card title      -> --text-md   1.25rem
       1.25rem  lede            -> --text-md   1.25rem
       1.30rem  filter label    -> --text-lg   1.5rem  (it was set larger
                                   than the card titles beneath it)
       1.50rem  h3              -> --text-lg   1.5rem
       2.00rem  h1 / h2         -> --text-xl   2rem
       3.00rem  Contact h1      -> --text-xl   2rem  (now consistent) */
  --text-nav: 0.8125rem;   /* nav only — one step below --text-xs */
  --text-xs: 0.875rem;
  --text-sm: 0.9375rem;
  --text-base: 1rem;
  --text-md: 1.25rem;
  --text-lg: 1.5rem;
  --text-xl: 2rem;

  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-body: 1.75;

  --duration: 250ms;   /* the original's .25s transition */
  --ease: ease;
}

/* Publication pages tint the accent, as the live site does with its own
   --dh-purple and --curious-red. Both darkened to carry white button text:
   the source hues measure 4.0:1 and 3.1:1 on white and fail as UI fills. */
[data-theme="digital-humans"] { --accent: #6b4482; --accent-hover: #543468; }
[data-theme="curious-advantage"] { --accent: #b8402a; --accent-hover: #932f1d; }

/* ---------- reset ------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  -webkit-text-size-adjust: 100%;
  /* Anchors must clear the sticky header or every in-page link lands under it. */
  scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--dark-grey); }

/* One global focus ring, and never `outline: none` anywhere else. The
   outline is kept rather than swapped for a box-shadow: box-shadows are
   discarded in Windows High Contrast mode, a silent WCAG 2.4.7 failure you
   cannot see on your own machine. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
@media (forced-colors: active) { :focus-visible { outline-color: Highlight; } }

/* A black ring is invisible on the black chrome. */
.site-header :focus-visible,
.footer :focus-visible,
.section[data-tone="black"] :focus-visible,
.section[data-tone="purple"] :focus-visible { outline-color: var(--white); }

::selection { background: var(--black); color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- utilities --------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -110%);
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--white);
  color: var(--black);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--duration) var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); color: var(--black); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
.container--small { max-width: var(--container-small); }
.container--narrow { max-width: 46rem; }
@media (min-width: 48rem) { .container { padding-inline: 2rem; } }
@media (min-width: 64rem) { .container { padding-inline: var(--container-pad); } }

/* Same 80rem measure, but at desktop the content lines up with the OUTER edge
   of the container rather than with the text inside it. The live brand-tile
   row is 1280px wide at 1440 — the container's full width, no inner gutter.
   Below 64rem it keeps the normal gutter, which is what the live site does
   too: the tiles are inset by the page margin on a phone. Declared after the
   base rules above so it wins without !important. */
@media (min-width: 64rem) { .container--flush { padding-inline: 0; } }

/* ---------- typography -------------------------------------------------- */
/* Archivo carries body, UI and communications. Roboto Slab is the editorial
   accent, used exactly where the live site uses it: the Insights header, the
   filter labels, insight card titles and article titles. Never body copy. */

.hero__title,
.page-title {
  font-family: "Archivo", sans-serif;
  font-size: clamp(1.625rem, 3.2vw, var(--text-xl));
  font-weight: 400;
  line-height: var(--leading-tight);
}

.section__title {
  font-family: "Archivo", sans-serif;
  font-size: clamp(1.5rem, 2.8vw, var(--text-xl));
  font-weight: 400;
  line-height: var(--leading-tight);
}

.subsection__title {
  font-family: "Archivo", sans-serif;
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: var(--leading-snug);
}

.eyebrow {
  font-family: "Archivo", sans-serif;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dark-grey);
  margin-bottom: var(--space-2xs);
}

/* The live statement runs the full 60rem container and lands on three lines
   at 32px. A 40ch cap here pushed it to four narrow lines. */
.statement--center { margin-inline: auto; text-align: center; max-width: 56ch; }

.statement {
  font-family: "Archivo", sans-serif;
  font-size: clamp(1.5rem, 2.8vw, var(--text-xl));
  font-weight: 400;
  line-height: var(--leading-tight);
}

.prose__p {
  margin-bottom: var(--space-xs);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  max-width: 62ch;
}
.prose__p:last-child { margin-bottom: 0; }

.section__head { max-width: 52rem; margin-bottom: var(--space-md); }
.section__lede { margin-top: var(--space-2xs); font-size: var(--text-md); line-height: 1.6; }

@media (min-width: 64rem) {
  .section__head--row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
    max-width: none;
  }
}

/* ---------- section rhythm ---------------------------------------------- */
/* Three paddings, and only three: the live site's 7 / 5 / 3rem made into a
   ladder, and stepped down on small screens rather than staying at 112px. */
.section { padding-block: var(--space-xl); }
.section--tight { padding-block: var(--space-lg); }
.section--loose { padding-block: var(--space-xl); }

@media (min-width: 64rem) {
  .section--loose { padding-block: var(--space-2xl); }
}
@media (max-width: 47.999rem) {
  .section, .section--loose { padding-block: var(--space-lg); }
  .section--tight { padding-block: var(--space-md); }
}

.section[data-tone="cream"] { background: var(--surface-alt); }
.section[data-tone="black"] { background: var(--black); color: var(--white); }
.section[data-tone="black"] .eyebrow { color: var(--mid-grey); }
/* The Digital Humans podcast band. White on #865aa1 is 5.26:1, so body copy
   carries; the eyebrow is white at reduced opacity rather than a grey, which
   on this hue would drop under AA. */
.section[data-tone="purple"] { background: var(--dh-purple); color: var(--white); }
.section[data-tone="purple"] .eyebrow { color: rgb(255 255 255 / 0.85); }

/* Two bands of the same tone in a row read as one; drop the seam. */
.section[data-tone="cream"] + .section[data-tone="cream"],
.section[data-tone="purple"] + .section[data-tone="purple"],
.section[data-tone="black"] + .section[data-tone="black"] { padding-top: 0; }

/* ---------- buttons ----------------------------------------------------- */
/* The live site's button: 2px solid black, black fill, white label, square.
   Only the vertical padding changes — 0.5rem left the label sitting high in
   the box; 0.75rem centres it at the same overall height. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--accent);
  background: var(--accent);
  color: var(--accent-on);
  font-family: "Archivo", sans-serif;
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease),
              border-color var(--duration) var(--ease),
              color var(--duration) var(--ease);
}
/* Every button inverts on hover and keeps its 2px border, so the shape does
   not move a pixel between states — the fill and the label swap, the border
   stays put. The border is already on the resting state above, which is what
   makes the inversion possible without a layout shift. */
.button:hover,
.button:focus-visible {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}

.button--secondary { background: transparent; color: var(--accent); }
.button--secondary:hover,
.button--secondary:focus-visible { background: var(--accent); color: var(--accent-on); }

.button--sm { padding: 0.5rem 1rem; font-size: var(--text-xs); }

/* On a dark band the resting button is white-on-dark, so inverting means the
   label goes white and the fill drops out — the border keeps the hit area
   and the outline visible against the band. */
.section[data-tone="black"] .button,
.section[data-tone="purple"] .button {
  border-color: var(--white);
  background: var(--white);
  color: var(--black);
}
.section[data-tone="black"] .button:hover,
.section[data-tone="black"] .button:focus-visible,
.section[data-tone="purple"] .button:hover,
.section[data-tone="purple"] .button:focus-visible {
  background: transparent;
  border-color: var(--white);
  color: var(--white);
}
.section[data-tone="black"] .button--secondary,
.section[data-tone="purple"] .button--secondary { background: transparent; color: var(--white); }
.section[data-tone="black"] .button--secondary:hover,
.section[data-tone="black"] .button--secondary:focus-visible,
.section[data-tone="purple"] .button--secondary:hover,
.section[data-tone="purple"] .button--secondary:focus-visible { background: var(--white); color: var(--black); }

.button-group { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-sm); }

.link-button {
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit;
  text-decoration: underline; text-underline-offset: 0.18em;
  cursor: pointer;
}

/* ---------- header ------------------------------------------------------ */
/* Black bar, white wordmark left, nav right — as the live site. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--black);
  color: var(--white);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  max-width: var(--container);
  min-height: var(--header-h);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 48rem) { .site-header__inner { padding-inline: 2rem; } }
@media (min-width: 64rem) { .site-header__inner { padding-inline: var(--container-pad); } }

.site-header__logo { display: flex; align-items: center; margin-right: auto; }
/* The wordmark is the supplied SVG, never typeset — brand rule.
   1rem tall, matching .nav4_logo on the live site. */
.site-header__logo img { width: auto; height: 1rem; }

.site-header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-right: -0.625rem;
  background: none;
  border: 0;
  color: var(--white);
  cursor: pointer;
}
.site-header__toggle-bars,
.site-header__toggle-bars::before,
.site-header__toggle-bars::after {
  display: block;
  width: 22px; height: 2px;
  background: currentColor;
  transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease);
}
.site-header__toggle-bars { position: relative; }
.site-header__toggle-bars::before,
.site-header__toggle-bars::after { content: ""; position: absolute; left: 0; }
.site-header__toggle-bars::before { top: -7px; }
.site-header__toggle-bars::after { top: 7px; }
[aria-expanded="true"] .site-header__toggle-bars { background: transparent; }
[aria-expanded="true"] .site-header__toggle-bars::before { transform: translateY(7px) rotate(45deg); }
[aria-expanded="true"] .site-header__toggle-bars::after { transform: translateY(-7px) rotate(-45deg); }

.site-nav {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  background: var(--black);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease),
              visibility var(--duration) var(--ease);
}
.site-nav[data-open] { transform: none; opacity: 1; visibility: visible; }

.site-nav__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0 1.25rem var(--space-sm);
  list-style: none;
}

.site-nav__link {
  display: block;
  width: 100%;
  padding: 0.75rem 0;
  background: none;
  border: 0;
  border-bottom: 1px solid rgb(255 255 255 / 0.2);
  color: var(--white);
  font-family: "Archivo", sans-serif;
  font-size: var(--text-base);
  font-weight: 400;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--duration) var(--ease);
}
/* Hover is Ludic Deep Blue from the brand kit. On the black bar it has to be
   lightened to stay legible: #44597b on black measures 2.96:1, well under the
   4.5:1 a nav link needs. --blue-on-dark is the same hue opened up until it
   passes. */
.site-nav__link:hover,
.site-nav__sublink:hover { color: var(--blue-on-dark); }
.site-nav__link[aria-current="page"],
.site-nav__toggle[data-nav-current] { font-weight: 600; }

.site-nav__toggle { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.site-nav__caret { flex: none; transition: transform var(--duration) var(--ease); }
[aria-expanded="true"] > .site-nav__caret { transform: rotate(180deg); }

.site-nav__submenu { display: grid; margin: 0; padding: 0 0 0 var(--space-xs); list-style: none; }

.site-nav__sublink {
  display: block;
  padding: 0.625rem 0;
  color: var(--white);
  font-family: "Archivo", sans-serif;
  font-size: var(--text-sm);
  text-decoration: none;
  border-bottom: 1px solid rgb(255 255 255 / 0.12);
  transition: color var(--duration) var(--ease);
}
.site-nav__sublink[aria-current="page"] { font-weight: 600; }

@media (min-width: 64rem) {
  .site-header__toggle { display: none; }
  .site-nav {
    position: static;
    max-height: none;
    overflow: visible;
    background: none;
    transform: none;
    opacity: 1;
    visibility: visible;
  }
  .site-nav__list { flex-direction: row; align-items: center; gap: 0; padding: 0; }
  .site-nav__item { position: relative; }
  .site-nav__link {
    width: auto;
    padding: 0.5rem 0.875rem;
    border: 0;
    font-size: var(--text-nav);
  }
  .site-nav__link[aria-current="page"] { font-weight: 600; }

  /* The panel opens on hover, as asked — but hover is applied in JS, not
     with `:hover` here, and that is deliberate. With a CSS `:hover` rule the
     panel stays visible for as long as the pointer sits on the group, which
     means Escape cannot close it and a keyboard user watching the same
     screen sees a menu that ignores them. Driving visibility from
     [data-open] alone gives one source of truth that hover, click, Enter and
     Escape all write to, and keeps aria-expanded honest.

     No border on the panel; it reads as a continuation of the black bar.
     It starts flush at top:100% so the pointer never crosses a dead stripe
     on the way down and the menu does not flicker shut.

     Collapsed only when the document is scripted (`html[data-js]`, set by an
     inline script in the head). With scripting off nothing can reopen it, so
     it stays on show and the links remain reachable. */
  .site-nav__submenu {
    position: absolute;
    top: 100%;
    left: 0.375rem;
    z-index: 60;
    min-width: 14rem;
    padding: 0.375rem 0;
    background: var(--black);
    border: 0;
    transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease),
                visibility var(--duration) var(--ease);
  }
  [data-js] .site-nav__submenu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.25rem);
  }
  [data-js] .site-nav__item--group[data-open] > .site-nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .site-nav__sublink {
    padding: 0.5rem 0.875rem;
    border: 0;
    font-size: var(--text-nav);
    white-space: nowrap;
  }
}

/* ---------- footer ------------------------------------------------------ */
.footer {
  background: var(--black);
  color: var(--white);
  padding-top: var(--space-xl);
}

.footer__inner {
  display: grid;
  gap: var(--space-md);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 48rem) {
  .footer__inner { padding-inline: 2rem; }
}
/* The live footer is a wide left column and a right-aligned block of link
   lists — measured at 1440: left column 224px, menu block 325px hard against
   the right edge. Not four equal columns. */
@media (min-width: 64rem) {
  .footer__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    padding-inline: var(--container-pad);
  }
}

.footer__logo { width: auto; height: 1.0625rem; }

.footer__details { margin-top: var(--space-md); display: grid; gap: var(--space-sm); }
.footer__label { font-weight: 700; }

.footer__menu { display: grid; gap: var(--space-md); }
@media (min-width: 30rem) { .footer__menu { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .footer__menu { grid-template-columns: repeat(2, 9.125rem); gap: var(--space-lg); } }

.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  padding: 0;
  list-style: none;
}
.footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem; height: 2rem;
  color: var(--white);
  transition: color var(--duration) var(--ease);
}
.footer__social-link:hover { color: var(--blue-on-dark); }

.footer__heading {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--white);
  margin-bottom: var(--space-2xs);
}

.footer__text { color: var(--white); font-size: var(--text-xs); line-height: 1.6; }

.footer__list { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; align-content: start; }

.footer__link {
  color: var(--white);
  font-size: var(--text-xs);
  line-height: 1.5;
  text-decoration: none;
  transition: color var(--duration) var(--ease);
}
/* Same hover as the header nav: Ludic Deep Blue opened up for the black
   background, no underline. */
.footer__link:hover { color: var(--blue-on-dark); text-decoration: none; }

.footer__link--button { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; font-family: inherit; }

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  width: 100%;
  max-width: var(--container);
  margin: var(--space-lg) auto 0;
  padding: var(--space-sm) 1.25rem var(--space-md);
  border-top: 1px solid rgb(255 255 255 / 0.25);
}
@media (min-width: 48rem) { .footer__legal { padding-inline: 2rem; } }
@media (min-width: 64rem) { .footer__legal { padding-inline: var(--container-pad); } }

.footer__credit { color: var(--white); font-size: var(--text-xs); }

.footer__legal-list { display: flex; flex-wrap: wrap; gap: 0.5rem var(--space-sm); margin: 0; padding: 0; list-style: none; }
/* The legal row keeps its underline at rest — it is a run of small links
   in a crowded strip and needs the affordance — but drops it on hover along
   with everything else in the footer. */
.footer__legal-list .footer__link { text-decoration: underline; }
.footer__legal-list .footer__link:hover { text-decoration: none; color: var(--blue-on-dark); }

/* ---------- print ------------------------------------------------------- */
@media print {
  .site-header, .footer, .consent, .skip-link, .filters { display: none !important; }
  body { color: #000; font-size: 11pt; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; }
}