@charset "UTF-8";
/*
  Site: The Ocean Race 2027

  Qiu Template System
  Base style sheet
  Version: 3.0
  Author: Albano Manganelli
  Mueva el Volante!

  Table of Contents
  One file for now, split into sections that map 1:1 to future files:

  * Fonts and Icons ............ base/fonts.css
  * Tokens ..................... base/tokens.css
  * Widget modes ............... base/tokens.css (Light / Dark / Bluey / Subtle)
  * Base ....................... base/base.css
  * Common Elements ............ components/common.css
    * Buttons
    * Widget title and tabs
    * Diagonal action tab
  * Header ..................... layout/header.css
  * Footer ..................... layout/footer.css
  * Widgets
    * Generic widget ........... components/widget.css (title + header + more-items)
    * More items ............... components/more-items.css (grid, card, overlay, social stream)
    * Swipe on mobile .......... components/more-items.css (swipe-mobile)
    * Slider items ............. components/slider.css (simple slider for more-items)
    * Top story items .......... components/top-story-items.css (diagonal hero)
    * Top stories .............. components/top-stories.css (fotorama, legacy)
    * Legends home ............. pages/legends.css (2023 blocks, body.legends)
  * Helpers (CMS classes) ...... base/helpers.css

  Media queries live next to the component they change (max-width: 1280 / 1024 / 767 only).
*/

/* ==========================================================
  FONTS AND ICONS
  ========================================================== */
@import url(fonts/remixicon.css);
@import url(plugins.css);

@font-face {
  font-family: 'Antarctica';
  src: url('fonts/Antarctica VAR-VF.ttf.woff2') format('woff2-variations'),
    url('fonts/Antarctica VAR-VF.ttf.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 25% 200%;
  font-style: normal;
}

@font-face {
  font-family: 'Cera Ocean';
  src: url('fonts/CeraOcean-Regular.eot');
  src: url('fonts/CeraOcean-Regular.eot?#iefix') format('embedded-opentype'),
    url('fonts/CeraOcean-Regular.woff2') format('woff2'),
    url('fonts/CeraOcean-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Cera Ocean';
  src: url('fonts/CeraOcean-RegularItalic.eot');
  src: url('fonts/CeraOcean-RegularItalic.eot?#iefix') format('embedded-opentype'),
    url('fonts/CeraOcean-RegularItalic.woff2') format('woff2'),
    url('fonts/CeraOcean-RegularItalic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Cera Ocean';
  src: url('fonts/CeraOcean-SemiBold.eot');
  src: url('fonts/CeraOcean-SemiBold.eot?#iefix') format('embedded-opentype'),
    url('fonts/CeraOcean-SemiBold.woff2') format('woff2'),
    url('fonts/CeraOcean-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Cera Ocean';
  src: url('fonts/CeraOcean-SemiBoldItalic.eot');
  src: url('fonts/CeraOcean-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
    url('fonts/CeraOcean-SemiBoldItalic.woff2') format('woff2'),
    url('fonts/CeraOcean-SemiBoldItalic.woff') format('woff');
  font-weight: 600;
  font-style: italic;
}


/* ==========================================================
  TOKENS
  Generic names, independent from the Figma variable names:
    --color-*        palette (white, primary, dark, gray…) and semantic
                     colors (text, bg…)
    --widget-*       per-widget colors, set by the mode-* classes
    --button-*       button colors
    --font-*         families and sizes (title = Antarctica display sizes)
    --space-N        spacing scale (N in px / 4: space-4 = 16px)
    --gutter, --container, --container-inset, --grid-gap, --section-padding   layout
  Figma → token: ocean-500 → primary, charcoal-900 → dark,
  charcoal-500 → gray, sky-500 → gray-lighter.
  ========================================================== */
:root {
  /* Palette */
  --color-white: #ffffff;
  --color-primary: #0090ff;
  --color-dark: #212121;
  --color-gray-lighter: #e2e2e2;
  --color-europe: #ffb600;
  --color-atlantic: #f90041;

  /* Official brand tints (brand guide): use these, never a mix made up in the CSS.
     Each colour has its steps at 80 / 60 / 40 / 20 % */
  --color-primary-80: #33a6ff;  /* Ocean Blue */
  --color-primary-60: #66bcff;
  --color-primary-40: #99d3ff;
  --color-primary-20: #cce9ff;
  --color-dark-80: #414141;  /* Charcoal Black */
  --color-dark-60: #707070;
  --color-dark-40: #a0a0a0;
  --color-dark-20: #cfcfcf;
  --color-sky-80: #e8e8e8;  /* Sky Grey (#e2e2e2) */
  --color-sky-60: #eeeeee;
  --color-sky-40: #f3f3f3;
  --color-sky-20: #f9f9f9;
  --color-lime: #d8ff00;  /* European Waters */
  --color-lime-80: #e0ff33;
  --color-lime-60: #e8ff66;
  --color-lime-40: #efff99;
  --color-lime-20: #f7ffcc;
  --color-teal-beacon: #19e0d1;  /* Atlantic Beacon */
  --color-teal-beacon-80: #47e6da;
  --color-teal-beacon-60: #75ece3;
  --color-teal-beacon-40: #a3f3ed;
  --color-teal-beacon-20: #d1f9f6;
  --color-orange: #f95d23;  /* Golden Horizon */
  --color-orange-80: #fa7d4f;
  --color-orange-60: #fb9e7b;
  --color-orange-40: #fdbea7;
  --color-orange-20: #fedfd3;
  --color-purple: #ad35f4;  /* Twilight Tide */
  --color-purple-80: #bd5df6;
  --color-purple-60: #ce86f8;
  --color-purple-40: #deaefb;
  --color-purple-20: #efd7fd;

  /* Names used across the site, pointing at the official steps */
  --color-primary-light: var(--color-primary-80);
  --color-gray: var(--color-dark-60);
  --color-gray-light: var(--color-dark-20);

  /* Semantic */
  --color-text: var(--color-dark);
  --color-text-inverse: var(--color-white);
  --color-text-accent: var(--color-primary);
  --color-bg: var(--color-white);
  --color-bg-subtle: var(--color-gray-lighter);
  --color-bg-primary: var(--color-primary);

  /* Typography */
  --font-display: 'Antarctica', 'Arial Narrow', sans-serif;
  --font-body: 'Cera Ocean', 'Helvetica Neue', Arial, sans-serif;
  --font-display-wdth: 25; /* Extra Condensed instance */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-title-sm: 48px;
  --font-size-title-md: 54px;
  --font-size-title-lg: 56px;
  --font-size-title-xl: 72px;
  --tracking-title: -0.02em;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-12-5: 50px;
  --space-14: 56px;
  --space-16: 64px;

  /* Layout */
  /* Side spacing shared by header and widgets (16px on mobile).
     Content width: whole screen minus the gutters, never wider than
     1680px. Use var(--container) as a width, or --container-inset as the
     side padding of a full-bleed section (% resolve per property). */
  --gutter: var(--space-5);
  --container-max: 1920px;
  --container: min(var(--container-max), calc(100% - 2 * var(--gutter)));
  --container-inset: calc((100% - var(--container)) / 2);
  --grid-gap: var(--space-5);
  --section-padding: var(--space-14);

  /* Components */
  --header-row1: 44px;
  --header-row2: 78px;
  --button-height: 48px;
  --button-width: 220px;
  --card-action-height: 40px;
  --diagonal-tab: calc(var(--card-action-height) * var(--slope));  /* the site slope on the 40px tab */
  --radius-none: 0;
}


@media (max-width: 1024px) {
  :root {
    --font-size-title-md: 44px;
    --font-size-title-lg: 44px;
    --font-size-title-xl: 56px;
    --section-padding: var(--space-12);
  }
}

@media (max-width: 767px) {
  :root {
    --gutter: var(--space-4);
    --font-size-title-md: 40px;
    --font-size-title-lg: 40px;
    --font-size-title-sm: 36px;
  }
}

/* ==========================================================
  WIDGET MODES
  Every widget inherits these tokens; buttons and cards
  only use --color-widget-* so they adapt to the mode.
  ========================================================== */
:root,
.mode-light {
  --widget-bg: var(--color-white);
  --widget-text: var(--color-dark);
  --widget-text-muted: var(--color-dark-60);
  --widget-chip: var(--color-dark-20);  /* round buttons (share...) */
  --widget-chip-light: var(--color-sky-80);
  --widget-accent: var(--color-primary);
  --widget-action: var(--color-primary);
  --widget-on-action: var(--color-dark);
  --button-bg: var(--color-primary);
  --button-text: var(--color-dark);
  --button-alt-bg: var(--color-dark);
  --button-alt-text: var(--color-white);
}

.mode-dark {
  --widget-bg: var(--color-dark);
  --widget-text: var(--color-white);
  --widget-text-muted: var(--color-dark-40);
  --widget-chip: var(--color-dark-60);
  --widget-chip-light: var(--color-dark-80);
  --widget-accent: var(--color-primary);
  --widget-action: var(--color-primary);
  --widget-on-action: var(--color-dark);
  --button-bg: var(--color-primary);
  --button-text: var(--color-dark);
  --button-alt-bg: var(--color-white);
  --button-alt-text: var(--color-dark);
}

.mode-bluey {
  --widget-bg: var(--color-primary);
  --widget-text: var(--color-dark);
  --widget-text-muted: var(--color-dark-80);
  --widget-chip: var(--color-primary-60);
  --widget-chip-light: var(--color-primary-80);
  --widget-accent: var(--color-dark);
  --widget-action: var(--color-dark);
  --widget-on-action: var(--color-white);
  --button-bg: var(--color-white);
  --button-text: var(--color-dark);
  --button-alt-bg: var(--color-dark);
  --button-alt-text: var(--color-white);
}

.mode-subtle {
  --widget-bg: var(--color-bg-subtle);
  --widget-text-muted: var(--color-dark-60);
  --widget-chip: var(--color-dark-40);
  --widget-chip-light: var(--color-dark-20);
}

.mode-light,
.mode-dark,
.mode-bluey,
.mode-subtle {
  background-color: var(--widget-bg);
  color: var(--widget-text);
}


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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, figure {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.2;
}

ul, ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img, svg, video {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.display {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  line-height: 1;
}

.wrapper-inner {
  width: var(--container);
  margin-inline: auto;
}

.all-box-link {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* ==========================================================
  COMMON ELEMENTS
  ========================================================== */

/* Buttons — Core / Button: rectangular only, no skew */
.btn,
.link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  width: var(--button-width);
  max-width: 100%;
  height: var(--button-height);
  padding: 0 var(--space-5);
  background: var(--button-bg);
  color: var(--button-text);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  text-transform: uppercase;
  border-radius: var(--radius-none);
}

.btn-reverse {
  background: var(--button-alt-bg);
  color: var(--button-alt-text);
}

.btn.btn-reverse {
  --sweep-bg: var(--button-bg);
  --sweep-text: var(--button-text);
}

/* Simple Link widget used as a button (class link-button on the widget itself): the platform writes a stray
     before the link, and in a flex row that text plus the gap pushes the label off centre. The link fills
   the button instead, which also makes the whole button clickable. */
.widget.link-button > a {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

/* Hover (Figma 03.05): a slanted fill sweeps across the button from the left
   and the label changes colour with it. Colours come from the widget mode:
   blue goes dark on light surfaces and white on dark ones, white goes dark on
   blue. 360 ms ease-out in, 220 ms ease-in-out out. */
.btn,
.link-button:not(.more-items-item .link-button),
.more-items-item .link-button a,
.load-more-bt,
.scroll-arrows button {
  --sweep-bg: var(--button-alt-bg);
  --sweep-text: var(--button-alt-text);
  --sweep-skew: 12px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color .22s ease-in-out;
}

.btn::after,
.link-button:not(.more-items-item .link-button)::after,
.more-items-item .link-button a::after,
.load-more-bt::after,
.scroll-arrows button::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--sweep-skew));
  z-index: -1;
  width: calc(100% + 2 * var(--sweep-skew));
  background: var(--sweep-bg);
  clip-path: polygon(var(--sweep-skew) 0, 100% 0, calc(100% - var(--sweep-skew)) 100%, 0 100%);
  transform: translateX(calc(-100% - var(--sweep-skew)));
  transition: transform .22s ease-in-out;
}

.btn:hover,
.link-button:not(.more-items-item .link-button):hover,
.more-items-item .link-button a:hover,
.load-more-bt:hover,
.scroll-arrows button:hover:not(:disabled) {
  color: var(--sweep-text);
  transition: color .36s ease-out;
}

.btn:hover::after,
.link-button:not(.more-items-item .link-button):hover::after,
.more-items-item .link-button a:hover::after,
.load-more-bt:hover::after,
.scroll-arrows button:hover:not(:disabled)::after {
  transform: none;
  transition: transform .36s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn::after,
  .link-button::after,
  .more-items-item .link-button a::after,
  .load-more-bt,
  .load-more-bt::after,
  .scroll-arrows button,
  .scroll-arrows button::after {
    transition-duration: 0s;
  }
}

/* Widget title */
.widget-title {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: var(--font-size-title-md);
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  letter-spacing: var(--tracking-title);
  text-transform: uppercase;
  color: var(--widget-accent);
}

.mode-bluey .widget-title {
  color: var(--widget-text);
}

/* Tabs */
.tabs {
  display: flex;
  gap: var(--space-6);
}

.tabs .tab a {
  position: relative;
  display: block;
  padding-bottom: var(--space-2-5);
  font-size: var(--font-size-md);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--widget-text);
  cursor: pointer;
}

.tabs .tab a.active {
  color: var(--widget-accent);
}

/* Inactive tabs take the widget accent on hover (blue; dark on the blue surface, where blue would vanish) */
.tabs .tab a:not(.active):hover {
  color: var(--widget-accent);
}

.tabs .tab a.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--color-primary);
}

@media (max-width: 767px) {
  .tabs {
    overflow-x: auto;
  }

  .tabs .tab a {
    white-space: nowrap;
  }
}

/* Diagonal action tab (WATCH / SEE GALLERY / VIEW POST) */
.more-items-action {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--card-action-height);
  padding: 0 calc(var(--space-4) + var(--diagonal-tab)) 0 var(--space-4);
  background: var(--widget-action);
  color: var(--widget-on-action);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--diagonal-tab)) 100%, 0 100%);
}

.more-items-action i {
  font-size: 16px;
  line-height: 1;
}


/* ==========================================================
  HEADER
  Platform markup: #header > .wrapper-group > .row1 (zones 1-3)
  and .row2 (zones 4-6), each zone filled by widgets from
  web-menu.json.
  ========================================================== */
#header {
  position: relative;
  z-index: 20;
  /* Reserve the final height and paint it until web-menu.json renders: no layout jump */
  min-height: calc(var(--header-row1) + var(--header-row2));
  background: linear-gradient(var(--color-dark) var(--header-row1), var(--color-primary) var(--header-row1));
}

/* body.header-reveal (set in the CMS): the header leaves with the page and
   comes back fixed when scrolling up. Classes set by initScrollState() in script.js */
/* Until Angular boots the header is ng-cloak (display: none !important), so the page starts at the top and
   drops by the header height when it appears. Keep its box (min-height + background) from the first paint
   and only hide what is inside, as the min-height rule above intends. */
#header.ng-cloak {
  display: block !important;
}

#header.ng-cloak > * {
  visibility: hidden;
}

body.header-fixed {
  padding-top: var(--header-height);
}

body.header-fixed #header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  transform: translateY(-100%);
}

body.header-fixed.scroll-up #header {
  transform: none;
}

body.header-animated #header {
  transition: transform .3s ease;
}

@media (prefers-reduced-motion: reduce) {
  body.header-animated #header {
    transition: none;
  }
}

/* Intro: the header widgets are injected from web-menu.json after the page loads and can be re-rendered,
   so they stay hidden (body.header-intro, set by initHeaderIntro in js/script.js) until the menu has
   settled (body.header-in); then they ease in from above: the utility row first, then logo, menu, countdown */
@keyframes intro-fade-down {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

body.header-intro:not(.header-in) #header .header-widgets-json {
  opacity: 0;
}

body.header-in #header .row1 .header-widgets-json {
  animation: intro-fade-down .6s cubic-bezier(.2, .7, .2, 1) backwards;
}

body.header-in #header .row2 .header-widgets-json {
  animation: intro-fade-down .7s cubic-bezier(.2, .7, .2, 1) .12s backwards;
}

body.header-in #header-zone5 .header-widgets-json {
  animation-delay: .22s;
}

body.header-in #header-zone6 .header-widgets-json {
  animation-delay: .32s;
}

#header .header-footer-zone.empty-zone,
#header .visuallyhidden,
#header a.mobile {
  display: none;
}

/* Header/footer widgets reuse .more-items markup: no card surface */
#header .more-items-item,
#footer .more-items-item {
  background: transparent;
  color: inherit;
}

#navigation-mobile {
  display: none;
}

#header .wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:0;
}

#header .header-footer-zone,
#header .header-widgets-json {
  display: flex;
  align-items: center;
}

#header .submenu {
  position: absolute;
  top: 100%;
  z-index: 30;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}

#header .dropdown {
  position: relative;
}

#header .dropdown:hover > .submenu,
#header .dropdown.active > .submenu {
  opacity: 1;
  visibility: visible;
}

/* ---------- Row 1: races + utilities (charcoal) ---------- */
/* row 1 holds the dropdowns (languages, shop): keep it above row 2 (logo, menu, countdown) */
#header .row1 {
  position: relative;
  z-index: 2;
  height: var(--header-row1);
  padding: 0 var(--gutter);
  background: var(--color-dark);
  color: var(--color-white);
}

/* Race switcher (#left-top-menu) */
#header-zone1 .more-items-list {
  display: flex;
  gap: 30px;
}

#header-zone1 .more-items-item a {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: var(--font-size-lg);
  font-weight: 500;
  font-style: italic;
  line-height: 44px;
  transition: color .2s ease;
}

#header-zone1 .world-web a { color: var(--color-primary); }
#header-zone1 .atlantic-web a { color: var(--color-atlantic); }
#header-zone1 .europe-web a { color: var(--color-europe); }

#header-zone1 .more-items-item a:hover { color: var(--color-white); }

/* Utilities (#navigation-store + #languages-menu) */
#header-zone3 {
  gap: var(--space-4);
}

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

#header-zone3 .menu > li > a {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 44px;
  text-transform: uppercase;
  cursor: pointer;
}

/* Slanted separator between utilities */
#header-zone3 .header-widgets-json + .header-widgets-json::before {
  content: '';
  width: 1px;
  height: 18px;
  margin-right: var(--space-4);
  background: var(--color-dark-40);
  transform: rotate(atan(var(--slope)));  /* the site slope */
}

#header-zone3 .submenu {
  right: 0;
  min-width: 180px;
  padding: var(--space-2) 0;
  background: var(--color-dark);
}

#header-zone3 .submenu a {
  display: block;
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

#header-zone3 .submenu a:hover {
  color: var(--color-primary);
}

#header-zone3 .icon-helly-hansen:empty::before {
  content: 'Helly Hansen';
}

/* Shop icon: the platform writes a second, empty link (.mobile) next to the text one; it is only
   displayed where the label would not fit (see the media queries) */
#header-zone3 #navigation-store .icon-shop.mobile {
  display: none;  /* the generic zone 3 link rule (display: flex) would otherwise show it next to the label */
}

#navigation-store .icon-shop.mobile::before {
  content: '\f118'; /* ri-shopping-bag-line, the icon theoceanrace.com uses */
  font-family: 'remixicon';
  font-size: 21px;
  font-weight: 400;
}

/* Language */
#languages > a.lang-bt::before {
  content: '\edcf'; /* ri-global-line */
  font-family: 'remixicon';
  font-size: 24px;
  font-weight: 400;
}

#languages > a.lang-bt {
  font-size: var(--font-size-xs);
}

#languages .submenu {
  display: grid;
  grid-template-columns: repeat(3, auto);
  min-width: 0;
}

#languages .submenu a {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: 700;
}

/* Only EN, ES, IT and FR are offered (the platform lists every language of the site) */
#languages .submenu li:not(.lang_en_us, .lang_es_es, .lang_it_it, .lang_fr_fr) {
  display: none;
}

/* ---------- Row 2: logo + main menu + countdown (ocean) ---------- */
#header .row2 {
  height: var(--header-row2);
  padding-left: var(--gutter);
  background: var(--color-primary);
}

#header-zone4 {
  gap: var(--space-12);
  height: 100%;
}

#site-logo .logo-img {
  width: 231px;
  height: auto;
}

/* Main menu (#navigation-main.custom-menu) */
#navigation-main .menu {
  display: flex;
  align-items: center;
  gap: 42px;
}

#navigation-main .menu > li > a {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: var(--font-size-xl);
  font-weight: 500;
  font-style: italic;
  line-height: 78px;
  letter-spacing: .02em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--color-white);
  transition: color .4s ease, font-weight .4s ease, letter-spacing .4s ease;
}

/* Down to the burger menu (1024px) everything shrinks so the long items fit on one line */
@media (min-width: 1025px) and (max-width: 1280px) {
  #header-zone4 {
    gap: var(--space-6);
  }

  #site-logo .logo-img {
    width: 180px;
  }

  #navigation-main .menu {
    gap: 20px;
  }

  #navigation-main .menu > li > a {
    font-size: 19px;
  }

  #countdown-wrapper {
    padding-left: var(--space-5);
  }

  #countdown-title h2 {
    font-size: 12px;
  }

  #countdown .countdown-time {
    font-size: 26px;
  }
}

/* The logo keeps its size whatever the language: the menu is the one that gives way */
#header-zone4,
#site-logo {
  flex-shrink: 0;
}

#site-logo .logo-img {
  flex-shrink: 0;
  max-width: none;
}

/* ES, FR and IT items are longer than the EN ones: the menu scales with the viewport so it fits next to
   the logo and the countdown (EN keeps its fixed sizes) */
@media (min-width: 1025px) {
  html:not([lang="en"]) #navigation-main .menu {
    gap: clamp(8px, 1vw, 42px);
  }

  html:not([lang="en"]) #navigation-main .menu > li > a {
    font-size: clamp(12px, 1.3vw, var(--font-size-xl));
  }
}

/* Small diagonal marker on items with submenu */
#navigation-main .menu > li.dropdown > a::after {
  content: '';
  width: 5px;
  height: 7px;
  margin-bottom: 31px;
  background: var(--color-dark);
  opacity: .5;
  clip-path: polygon(37% 0, 100% 0, 63% 100%, 0 100%);
}

#navigation-main .menu > li.active > a,
#navigation-main .menu > li:hover > a {
  font-weight: 800;
  letter-spacing: 0;
  transition: color .4s ease, font-weight .4s ease, letter-spacing .4s ease;
}

#navigation-main .menu > li:hover > a::after,
#navigation-main .menu > li.active > a::after {
  opacity: 1;
}

/* Diagonal submenu moved in from #custom-submenu */
#custom-submenu > * {
  display: none;
}

#navigation-main .menu > li > .submenu {
  --n: 1;  /* number of entries, set below */
  --shift: calc((var(--n) * 49px + 30px) * var(--slope));  /* how far the top edge leans right */
  display: block;
  left: 50%;
  transform: translateX(calc(-50% - var(--shift) / 2));  /* the slanted panel is centred on its parent item */
  width: max-content;  /* as wide as the longest entry */
  min-width: 260px;
  padding: 15px 64px 15px 24px;
  isolation: isolate;
}

/* The dark panel is skewed (not clipped), so the lean stays the same
   whatever the width or the number of entries */
#navigation-main .menu > li > .submenu::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-dark);
  transform: skewX(calc(-1 * atan(var(--slope))));
  transform-origin: 0 100%;
}

#navigation-main .submenu .menu {
  display: block;
}

/* Each line steps left to follow the diagonal, counting from the bottom one */
#navigation-main .submenu li {
  --step: 0;
  padding-left: calc(var(--step) * 9px);
}
#navigation-main .menu > li > .submenu:has(li:nth-child(2)) { --n: 2; }
#navigation-main .menu > li > .submenu:has(li:nth-child(3)) { --n: 3; }
#navigation-main .menu > li > .submenu:has(li:nth-child(4)) { --n: 4; }
#navigation-main .menu > li > .submenu:has(li:nth-child(5)) { --n: 5; }
#navigation-main .menu > li > .submenu:has(li:nth-child(6)) { --n: 6; }
#navigation-main .menu > li > .submenu:has(li:nth-child(7)) { --n: 7; }
#navigation-main .menu > li > .submenu:has(li:nth-child(8)) { --n: 8; }
#navigation-main .menu > li > .submenu:has(li:nth-child(9)) { --n: 9; }
#navigation-main .menu > li > .submenu:has(li:nth-child(10)) { --n: 10; }

#navigation-main .submenu li:nth-last-child(2) { --step: 1; }
#navigation-main .submenu li:nth-last-child(3) { --step: 2; }
#navigation-main .submenu li:nth-last-child(4) { --step: 3; }
#navigation-main .submenu li:nth-last-child(5) { --step: 4; }
#navigation-main .submenu li:nth-last-child(6) { --step: 5; }
#navigation-main .submenu li:nth-last-child(7) { --step: 6; }
#navigation-main .submenu li:nth-last-child(8) { --step: 7; }
#navigation-main .submenu li:nth-last-child(9) { --step: 8; }
#navigation-main .submenu li:nth-last-child(10) { --step: 9; }

#navigation-main .submenu a {
  display: block;
  white-space: nowrap;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: var(--font-size-xl);
  font-weight: 800;
  font-style: italic;
  line-height: 49px;
  text-transform: uppercase;
  color: var(--color-text-accent);
}

#navigation-main .submenu a:hover {
  color: var(--color-white);
}

/* Countdown (#countdown-wrapper) */
#countdown-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  height: 77px;
  padding: 0 var(--gutter) 0 var(--space-8);
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-weight: 800;
  font-style: italic;
  color: var(--color-white);
  white-space: nowrap;
}

#countdown-wrapper::before {
  content: '';
  position: absolute;
  --line-h: 58px;
  left: 4px;
  top: 10px;
  width: calc(var(--line-h) * var(--slope) + 1.6px);  /* the site slope, like every other diagonal */
  height: var(--line-h);
  background: var(--color-primary-40);
  clip-path: polygon(calc(100% - 1.6px) 0, 100% 0, 1.6px 100%, 0 100%);
}

#countdown-title h2 {
  font-size: var(--font-size-md);
  font-weight: 800;
  line-height: 1;
  word-spacing: .18em;  /* the condensed italic font leaves the words almost touching */
  text-transform: uppercase;
}

#countdown {
  position: relative;
}

#countdown > a {
  position: absolute;
  inset: 0;
  z-index: 1;
}

#countdown .countdown-time {
  display: flex;
  font-size: 31.8px;
  line-height: 1;
}

/* Antarctica has no tabular figures (a "1" is ~40% narrower than a "0"),
   so the right-aligned countdown shifted every second. Each number gets a
   fixed slot as wide as "00", the widest pair. */
#countdown .countdown-time .number {
  display: inline-block;
  width: 2ch;
  text-align: center;
}

#countdown .countdown-time .name {
  display: none;
}

#countdown .countdown-time > span:not(:last-child)::after {
  content: ' : ';
  white-space: pre;
}

#navigation-toggle {
  display: none;
}


@media (max-width: 1024px) {
  #navigation-main {
    display: none;
  }

  /* The countdown stays, between the logo and the menu button */
  #header-zone6 {
    flex: 1;
    justify-content: flex-end;
    margin-right: 76px;  /* clear of the menu button */
  }

  #countdown-wrapper {
    padding: 0;
  }

  #countdown-wrapper::before {
    display: none;
  }

  #navigation-toggle {
    display: block;
    position: absolute;
    right: var(--gutter);
    top: 44px;
    z-index: 2;
    font-size: 0;
    line-height: var(--header-row2);
    color: var(--color-white);
    cursor: pointer;
  }

  #navigation-toggle::before {
    content: '\ef3e'; /* ri-menu-line */
    font-family: 'remixicon';
    font-size: 28px;
  }

  #navigation-toggle.open::before {
    content: '\eb99'; /* ri-close-line */
  }

  /* Mobile navigation: a full-screen panel under the header while body.menu-open is set
     (the toggle and the sub-menu accordion are in js/script.js) */
  body.menu-open #navigation-mobile {
    position: fixed;
    top: var(--header-height);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 19;  /* under the header (20) */
    display: block;
    padding: var(--space-6) var(--gutter) var(--space-10, 40px);
    overflow-y: auto;
    background: var(--color-dark);
    color: var(--color-white);
  }

  /* Opening: the background wipes in behind a slanted edge, then the items sweep in one by one from the right */
  body.menu-open #navigation-mobile {
    --menu-slant: calc(var(--slope) * 100svh);
    animation: menu-mask .5s cubic-bezier(.65, 0, .35, 1) both;
  }

  body.menu-open #navigation-mobile .menu > li {
    --item-slant: calc(var(--slope) * 72px);
    animation: menu-sweep .45s cubic-bezier(.22, .8, .3, 1) both;
    animation-delay: calc(.4s + var(--i, 0) * .08s);
  }

  /* Closing (body.menu-closing): the items sweep out, last one first, then the background wipes out */
  body.menu-open.menu-closing #navigation-mobile {
    animation: menu-mask-out .4s cubic-bezier(.65, 0, .35, 1) .2s both;
  }

  body.menu-open.menu-closing #navigation-mobile .menu > li {
    animation: menu-sweep-out .25s cubic-bezier(.5, 0, .75, 0) both;
    animation-delay: calc((6 - var(--i, 0)) * .04s);
  }

  /* Order of appearance: the six menu items, then the languages row (the first child but shown last) */
  #navigation-mobile .menu > li:nth-child(2) { --i: 0; }
  #navigation-mobile .menu > li:nth-child(3) { --i: 1; }
  #navigation-mobile .menu > li:nth-child(4) { --i: 2; }
  #navigation-mobile .menu > li:nth-child(5) { --i: 3; }
  #navigation-mobile .menu > li:nth-child(6) { --i: 4; }
  #navigation-mobile .menu > li:nth-child(7) { --i: 5; }
  #navigation-mobile .menu > li#languages { --i: 6; }

  @media (prefers-reduced-motion: reduce) {
    body.menu-open #navigation-mobile,
    body.menu-open #navigation-mobile .menu > li {
      animation: none;
    }
  }

  #navigation-mobile .menu {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #navigation-mobile .menu > li > a {
    display: block;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-dark-80);
    font-family: var(--font-display);
    font-variation-settings: 'wdth' var(--font-display-wdth);
    font-size: 32px;
    font-style: italic;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--color-primary);
  }

  #navigation-mobile .menu > li.dropdown > a {
    position: relative;
    padding-right: var(--space-8);
  }

  #navigation-mobile .menu > li.dropdown > a::after {
    content: '';
    position: absolute;
    top: 50%;
    right: var(--space-2);
    width: 10px;
    height: 10px;
    border: solid var(--color-primary);
    border-width: 0 2px 2px 0;
    transform: translateY(-70%) rotate(45deg);
    transition: transform .2s ease;
  }

  #navigation-mobile .menu > li.dropdown.open > a::after {
    transform: translateY(-30%) rotate(-135deg);
  }

  /* Sub-menu: closed until its item is tapped */
  #header #navigation-mobile .submenu {
    position: static;
    display: none;
    margin: 0;
    padding: var(--space-2) 0 var(--space-4);
    opacity: 1;
    visibility: visible;
    list-style: none;
  }

  #header #navigation-mobile li.open > .submenu {
    display: block;
  }

  #navigation-mobile .submenu a {
    display: block;
    padding: var(--space-3) 0 var(--space-3) var(--space-4);
    font-family: var(--font-display);
    font-variation-settings: 'wdth' var(--font-display-wdth);
    font-size: 24px;
    font-style: italic;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--color-white);
  }

  #navigation-mobile .submenu a:hover {
    color: var(--color-primary);
  }

  /* Languages go last, as a row of small links */
  #navigation-mobile #languages {
    order: 99;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-8);
  }

  #navigation-mobile #languages a {
    padding: 0;
    border: 0;
    font-family: inherit;
    font-size: var(--font-size-md);
    font-style: normal;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-gray-light);
  }

  #navigation-mobile #languages a:first-child {
    color: var(--color-primary);
  }

  /* the same four languages as the desktop menu */
  #navigation-mobile #languages a:not(.lang_en_us, .lang_es_es, .lang_it_it, .lang_fr_fr) {
    display: none;
  }
}

@keyframes menu-mask {
  from { clip-path: polygon(calc(100% + var(--menu-slant)) 0, 100% 0, 100% 100%, 100% 100%); }
  to   { clip-path: polygon(0 0, 100% 0, 100% 100%, calc(-1 * var(--menu-slant)) 100%); }
}

@keyframes menu-mask-out {
  from { clip-path: polygon(0 0, 100% 0, 100% 100%, calc(-1 * var(--menu-slant)) 100%); }
  to   { clip-path: polygon(calc(100% + var(--menu-slant)) 0, 100% 0, 100% 100%, 100% 100%); }
}

@keyframes menu-sweep-out {
  from { clip-path: polygon(0 0, 100% 0, 100% 100%, calc(-1 * var(--item-slant)) 100%); }
  to   { clip-path: polygon(calc(100% + var(--item-slant)) 0, 100% 0, 100% 100%, 100% 100%); }
}

@keyframes menu-sweep {
  from { clip-path: polygon(calc(100% + var(--item-slant)) 0, 100% 0, 100% 100%, 100% 100%); }
  to   { clip-path: polygon(0 0, 100% 0, 100% 100%, calc(-1 * var(--item-slant)) 100%); }
}

@media (max-width: 767px) {
  #header-zone1 .more-items-list {
    gap: 16px;
  }

  #header-zone1 .more-items-item a {
    font-size: var(--font-size-md);
  }

  /* The shop shows as an icon, not as a label */
  #header-zone3 #navigation-store .icon-shop.desktop {
    display: none;
  }

  #header-zone3 #navigation-store .icon-shop.mobile {
    display: flex;
    align-items: center;
  }

  #site-logo .logo-img {
    width: 150px;
  }

  /* Blue bar a little lower, with the countdown between the logo and the menu button */
  :root {
    --header-row2: 60px;
  }

  #countdown-wrapper {
    height: var(--header-row2);
  }

  #header-zone6 {
    margin-right: 64px;
  }

  #countdown-title h2 {
    font-size: 10px;
  }

  #countdown .countdown-time {
    font-size: 20px;
  }
}

/* ---------- Legends header (body.legends) ----------
   Figma "Header / Non racing / Desktop": blue bar on top (logo | divider | site name), charcoal
   bar below (menu on the left, language on the right). The markup keeps row 1 (zones 1-3) before
   row 2 (zones 4-6), so the blue row 2 goes first with order. In the header JSON the menu sits in
   zone 1 and the language in zone 3; the race switcher and the countdown are off. */
body.legends {
  --site-name: 'LEGENDS REGATTA';
  --site-name-size: 28px;
}

body.legends #header {
  background: linear-gradient(var(--color-primary) var(--header-row2), var(--color-dark) var(--header-row2));
}

body.legends #header .wrapper-group {
  display: flex;
  flex-direction: column;
}

body.legends #header .row2 {
  order: -1;
  padding-right: var(--gutter);
}

/* Logo | slanted divider | site name */
body.legends #header-zone4 {
  gap: 0;
}

body.legends #header-zone4 .header-widgets-json:first-child::after {
  content: '';
  width: 3px;
  height: 36px;
  margin-left: 30px;
  background: var(--color-white);
  opacity: .6;
  transform: rotate(atan(var(--slope)));  /* the site slope, like the utilities separator */
}

body.legends #header-zone4::after {
  content: var(--site-name, '');
  margin-left: 30px;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: var(--site-name-size);
  font-style: italic;
  font-weight: 800;
  line-height: 1.23;
  white-space: nowrap;
  color: var(--color-white);
}

/* Menu in the charcoal bar (Custom Menu widget): small Cera caps, white, blue on hover */
body.legends #header-zone1 .more-items-list {
  gap: 30px;
}

body.legends #header-zone1 .more-items-item a {
  font-family: var(--font-body);
  font-variation-settings: normal;
  font-size: var(--font-size-sm);
  font-weight: 600;
  font-style: normal;
  line-height: var(--header-row1);
  text-transform: uppercase;
  color: var(--color-white);
}

body.legends #header-zone1 .more-items-item a:hover {
  color: var(--color-primary);
}

@media (max-width: 1024px) {
  /* Burger menu: only the blue bar stays (the menu and language live in the full-screen panel) */
  body.legends #header {
    min-height: var(--header-row2);
    background: var(--color-primary);
  }

  body.legends #header .row1 {
    display: none;
  }

  body.legends #navigation-toggle {
    top: 0;
    line-height: var(--header-row2);
  }
}

@media (max-width: 767px) {
  body.legends #header-zone4 .header-widgets-json:first-child::after,
  body.legends #header-zone4::after {
    display: none;
  }

  /* Mobile only: row 1 floats over the blue bar, left of the burger, with the shop icon only */
  body.legends #header .row1 {
    display: flex;
    position: absolute;
    top: 0;
    right: calc(var(--gutter) + 28px + var(--space-4));
    height: var(--header-row2);
    padding: 0;
    background: none;
  }

  body.legends #header-zone3 .header-widgets-json:has(#right-items) {
    display: none;
  }

  body.legends #header-zone3 #navigation-store .icon-shop.desktop {
    display: none;
  }

  body.legends #header-zone3 #navigation-store .icon-shop.mobile {
    display: flex;
    align-items: center;
    line-height: var(--header-row2);
  }
}

/* ==========================================================
  FOOTER
  Platform markup: #footer > .wrapper-group > .row1 (zones 1-3)
  and .row2 (zones 4-6).
  ========================================================== */
#footer .empty-zone {
  display: none;
}

/* Row 1: partners and suppliers (ocean) */
#footer .row1 {
  padding: var(--space-12-5) var(--container-inset) var(--space-16);
  background: var(--color-bg-primary);
  color: var(--color-text);
}

/* Partners page (not its item pages): the page already lists them, so the footer logos go and the
   white area takes the height */
body.partners:not(.related-on-left) #footer .row1 {
  display: none;
}

body.partners:not(.related-on-left) #main {
  min-height: 100vh;
}

#footer .sponsor {
  text-align: left;
}

#footer .sponsor .widget-title {
  grid-column: 1 / -1;  /* the generic widget grid reserves a column for the header */
  margin-bottom: var(--space-8);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-white);
  font-family: var(--font-body);
  font-variation-settings: normal;
  font-size: var(--font-size-lg);
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: 0;
  text-align: left;
  color: var(--color-white);
}

/* Logos keep a fixed gap and align left; row 1 is larger than row 2 */
#footer .sponsor .more-items-list {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  min-height: 120px;
}

#footer #officialSuppliers .more-items-list,

#footer #hostCities .more-items-list {
  gap: 35px;
  min-height: 96px;
}

#footer .sponsor + .sponsor,
#footer .header-widgets-json + .header-widgets-json .sponsor {
  margin-top: var(--space-8);
}

/* CMS logos are white on transparent: they stay white and turn charcoal on hover */
#footer .sponsor .more-items-img {
  width: 238px;
  max-height: 120px;
  object-fit: contain;
  object-position: left center;
  transition: filter .2s ease;
}

/* Hover: colour only, no zoom */
#footer .sponsor .more-items-item:hover .more-items-img,
#footer .sponsor .more-items-item a:hover .more-items-img {
  filter: brightness(0);
  transform: none;
}

#footer #officialSuppliers .more-items-img,

#footer #hostCities .more-items-img {
  width: 160px;
  max-height: 96px;
}

#footer .sponsor .wrapper {
  display: none;
}

/* A widget moved here with move-to-footer (host city partners): on the footer blue, logos as row 2 */
#footer #hostCities {
  margin-top: var(--space-8);
  padding: 0;
  background: transparent;
}

/* Google Play app banner (printed by the platform layout): hidden */
#smartbanner {
  display: none !important;
}

/* Cookie settings button: not used for now */
#ihavecookiesBtn {
  display: none;
}

/* Cookie banner (plugin ihavecookies, markup #gdpr-cookie-message) */
#gdpr-cookie-message {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: 12;
  max-width: 400px;
  margin-left: var(--space-6);
  padding: var(--space-5);
  background: var(--color-primary);
  color: var(--color-dark);
  font-family: var(--font-body);
  box-shadow: 0 6px 6px rgba(0, 0, 0, .25);
}

#gdpr-cookie-message h4 {
  margin-bottom: var(--space-2-5);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-dark);
}

#gdpr-cookie-message h5 {
  margin-bottom: var(--space-3);
  font-size: var(--font-size-md);
  font-weight: 700;
}

#gdpr-cookie-message p,
#gdpr-cookie-message ul {
  margin-bottom: var(--space-5);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-dark);
}

/* Customise panel: breathing room between text, options and buttons */
#gdpr-cookie-message p:last-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-bottom: 0;
}

#gdpr-cookie-message li {
  display: inline-block;
  width: 49%;
  margin-bottom: var(--space-2);
}

#gdpr-cookie-message a {
  font-size: var(--font-size-sm);
  color: var(--color-dark);
  text-decoration: underline;
}

#gdpr-cookie-message a:hover {
  color: var(--color-white);
}

#gdpr-cookie-message button {
  min-height: 40px;
  padding: 0 var(--space-4);
  border: 0;
  background: var(--color-dark);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
}

/* Secondary actions */
#gdpr-cookie-message button#gdpr-cookie-advanced,
#gdpr-cookie-message button#reject-all-cookie-btn {
  background: var(--color-white);
  color: var(--color-dark);
}

/* Hover: the slanted sweep of the site's buttons (see .btn); the fill is the opposite colour */
#gdpr-cookie-message button {
  --sweep-bg: var(--color-white);
  --sweep-text: var(--color-dark);
  --sweep-skew: 12px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color .22s ease-in-out;
}

#gdpr-cookie-message button#gdpr-cookie-advanced,
#gdpr-cookie-message button#reject-all-cookie-btn {
  --sweep-bg: var(--color-dark);
  --sweep-text: var(--color-white);
}

#gdpr-cookie-message button::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--sweep-skew));
  z-index: -1;
  width: calc(100% + 2 * var(--sweep-skew));
  background: var(--sweep-bg);
  clip-path: polygon(var(--sweep-skew) 0, 100% 0, calc(100% - var(--sweep-skew)) 100%, 0 100%);
  transform: translateX(calc(-100% - var(--sweep-skew)));
  transition: transform .22s ease-in-out;
}

#gdpr-cookie-message button:hover:not(:disabled) {
  color: var(--sweep-text);
  transition: color .36s ease-out;
}

/* the secondary buttons set their colour with two ids: the hover needs the same weight */
#gdpr-cookie-message button#gdpr-cookie-advanced:hover:not(:disabled),
#gdpr-cookie-message button#reject-all-cookie-btn:hover:not(:disabled) {
  color: var(--sweep-text);
}

#gdpr-cookie-message button:hover:not(:disabled)::after {
  transform: none;
  transition: transform .36s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  #gdpr-cookie-message button,
  #gdpr-cookie-message button::after {
    transition-duration: 0s;
  }
}

#gdpr-cookie-message button:disabled {
  opacity: .3;
}

#gdpr-cookie-message input[type="checkbox"] {
  float: none;
  margin: 0 var(--space-1) 0 0;
}

@media (max-width: 767px) {
  #gdpr-cookie-message {
    right: 0;
    bottom: 0;
    left: 0;
    max-width: none;
    margin-left: 0;
  }
}

@media (max-width: 1024px) {
  #footer .sponsor .more-items-list,
  #footer #officialSuppliers .more-items-list,
  #footer #hostCities .more-items-list {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--space-6);
  }

  #footer .sponsor .more-items-img {
    width: 180px;
  }

  #footer #officialSuppliers .more-items-img,

  #footer #hostCities .more-items-img {
    width: 120px;
  }
}

@media (max-width: 767px) {
  /* Two centred columns, as in the mobile design */
  #footer .row1 {
    padding: var(--space-8) var(--gutter);
  }

  #footer .sponsor .widget-title {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    font-size: var(--font-size-md);
    line-height: 22px;
    text-align: center;
  }

  #footer .sponsor .more-items-list,
  #footer #officialSuppliers .more-items-list,
  #footer #hostCities .more-items-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: center;
    gap: var(--space-4);
    min-height: 0;
  }

  #footer .sponsor .more-items-img {
    width: 100%;
    max-width: 167px;
    height: 100px;
    object-position: center;
  }

  #footer #officialSuppliers .more-items-img,

  #footer #hostCities .more-items-img {
    max-width: 121px;
    height: 73px;
  }

  #footer #officialSuppliers .more-items-list,

  #footer #hostCities .more-items-list {
    gap: 13px;
  }

  #footer .sponsor + .sponsor {
    margin-top: var(--space-4);
  }
}

/* Row 2: menus, social, legal (charcoal) */
#footer .row2 {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-12-5) var(--space-6);
  padding: var(--space-12-5) var(--container-inset) var(--space-8);
  background: var(--color-dark);
  color: var(--color-white);
}

#footer-zone4 {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 60px;
  padding-bottom: var(--space-12-5);
  border-bottom: 1px solid var(--color-gray);
}

#footer-zone4 .header-widgets-json:has(.social-links) {
  order: -1;
}

#footerMenu .more-items-list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 60px;
}

#footerMenu h2 {
  font-size: var(--font-size-sm);
  font-weight: 400;
  line-height: 1;
}

#footer a:hover {
  color: var(--color-primary);
}

/* Social icons */
.social-icons {
  display: flex;
  gap: var(--space-4);
}

.social-icons h3 a {
  display: block;
  width: 32px;
  height: 32px;
  background: no-repeat center / contain;
}

.social-icons .social-facebook a { background-image: url(../img/ui/social/footer-0.svg); }
.social-icons .social-instagram a { background-image: url(../img/ui/social/footer-1.svg); }
.social-icons .social-twitter a { background-image: url(../img/ui/social/footer-2.svg); }
.social-icons .social-linkedin a { background-image: url(../img/ui/social/footer-3.svg); }
.social-icons .social-youtube a { background-image: url(../img/ui/social/footer-4.svg); }
.social-icons .social-tiktok a { background-image: url(../img/ui/social/footer-5.svg); }

/* Hover: blue disc (the same icons with a blue background); the plain icon stays under it while the new one loads */
.social-icons .social-facebook a:hover { background-image: url(../img/ui/social/footer-0-hover.svg), url(../img/ui/social/footer-0.svg); }
.social-icons .social-instagram a:hover { background-image: url(../img/ui/social/footer-1-hover.svg), url(../img/ui/social/footer-1.svg); }
.social-icons .social-twitter a:hover { background-image: url(../img/ui/social/footer-2-hover.svg), url(../img/ui/social/footer-2.svg); }
.social-icons .social-linkedin a:hover { background-image: url(../img/ui/social/footer-3-hover.svg), url(../img/ui/social/footer-3.svg); }
.social-icons .social-youtube a:hover { background-image: url(../img/ui/social/footer-4-hover.svg), url(../img/ui/social/footer-4.svg); }
.social-icons .social-tiktok a:hover { background-image: url(../img/ui/social/footer-5-hover.svg), url(../img/ui/social/footer-5.svg); }

/* Legal links + copyright */
#footerMenuBottom .more-items-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

#footerMenuBottom h2,
#copyright p {
  font-size: var(--font-size-sm);
  font-weight: 400;
  line-height: 18.2px;
  color: var(--color-primary-20);
}

#copyright p {
  font-size: var(--font-size-xs);
  line-height: 18px;
  text-align: right;
}


@media (max-width: 767px) {
  #footer .row2 {
    grid-template-columns: 1fr;
  }

  #footer-zone4 {
    flex-direction: column;
  }

  #copyright p {
    text-align: left;
  }
}

/* ==========================================================
  WIDGETS
  Generic platform widget: section.widget >
    h2.widget-title + header (tabs) + .tabs-content / ul.more-items-list
  Behaviour comes from classes set in the CMS (one-four, mode-dark…).
  ========================================================== */

/* Top-level widgets: full-bleed background, centred content */
#main .zone-1 > .widget:not(.top-stories-wrapper):not(.md-modal) {
  padding: var(--section-padding) var(--container-inset);
}

/* No vertical padding, but content keeps the container width */
#main .zone-1 > .widget.no-wrapper,
#main .zone-1 > .widget.padding-0 {
  padding-block: 0;
}

/* Title and header (tabs / account / button) share the first row */
.widget:has(> .widget-title) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-6);
}

.widget:has(> .widget-title) > * {
  grid-column: 1 / -1;
}

.widget:has(> .widget-title) > .widget-title {
  grid-column: 1;
  margin-bottom: var(--space-8);
}

.widget:has(> .widget-title) > header {
  grid-column: 2;
  margin-bottom: var(--space-8);
}

@media (max-width: 767px) {
  .widget:has(> .widget-title) > header {
    grid-column: 1 / -1;
  }
}

/* Many filters (past events: five or more) do not fit beside the title: they go below it */
.widget:has(> .widget-title):has(> header .tab:nth-child(5)) > header {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: calc(-1 * var(--space-4));
}

.widget > header.hide-header {
  display: none;
}

/* The platform adds the name of the active feed under the title: the design shows only the title */
.widget-title .small {
  display: none;
}

/* Title with an account link inside (Follow us @theoceanrace) */
.widget-title > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.widget-title > span > a:not(.btn) {
  font-family: var(--font-body);
  font-variation-settings: normal;
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--widget-text);
}

.widget-title > span > .btn {
  flex-shrink: 0;
  /* a button inside the title must not inherit the display typography */
  font-style: normal;
  font-variation-settings: normal;
  letter-spacing: 0;
}

/* Empty list (a filter without items): Angular shows it with ng-show */
.no-results-container {
  padding: var(--space-12) 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
}

/* Angular Tabs loading: the widget keeps a minimum height until the items
   arrive (no jump), with a spinner centred in it. Visibility is handled by
   Angular's ng-hide / ng-cloak */
:root {
  --loading-height: 360px;
}

.tabs-content:not(:has(.more-items-item)) {
  min-height: var(--loading-height);
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: var(--loading-height);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
}

.loading-container i {
  display: none;
}

.loading-container::before {
  content: '';
  width: 40px;
  height: 40px;
  border: 3px solid var(--widget-text, currentColor);
  border-right-color: transparent;
  border-radius: 50%;
  animation: loading-spin .8s linear infinite;
}

@keyframes loading-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .loading-container::before {
    animation-duration: 2.4s;
  }
}

/* Angular */
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak,
.ng-hide:not(.ng-hide-animate) {
  display: none !important;
}

/* ---------- More items: grid ---------- */
.more-items-list {
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
  gap: var(--grid-gap);
}

.one-one .more-items-list { --cols: 1; }
.one-two .more-items-list { --cols: 2; }
.one-three .more-items-list { --cols: 3; }
.one-four .more-items-list { --cols: 4; }
.one-five .more-items-list { --cols: 5; }
.gap-0 .more-items-list { --grid-gap: 0; }
.gap-20 .more-items-list { --grid-gap: var(--space-5); }
.gap-24 .more-items-list { --grid-gap: var(--space-6); }
.gap-30 .more-items-list { --grid-gap: 30px; }

/* "More" button of the Angular Tabs widget: centred under the grid */
.load-more-bt {
  display: flex;
  width: var(--button-width);
  margin: var(--space-8) auto 0;
  align-items: center;
  justify-content: center;
  min-height: var(--button-height);
  --sweep-bg: var(--color-primary);
  --sweep-text: var(--color-dark);
  background: var(--color-dark);
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
}

/* On mobile buttons span the full width unless a widget says otherwise */
@media (max-width: 767px) {
  .load-more-bt {
    width: 100%;
  }
}

/* CMS class scroll-row: the list scrolls sideways, showing --cols cards at a time
   (the rest are reached by scrolling). On mobile .swipe-mobile takes over */
.scroll-row .more-items-list {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.scroll-row .more-items-list::-webkit-scrollbar {
  display: none;
}

.scroll-row .more-items-item {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--grid-gap)) / var(--cols));
  scroll-snap-align: start;
}

/* Previous / next buttons in the title row (script.js → initScrollArrows) */
/* Same specificity as the generic title rule, which reserves a column for the header */
.scroll-row:has(> .widget-title) > .widget-title {
  grid-column: 1 / -1;
}

.scroll-row .widget-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* the title text (and a link next to it, as in FOLLOW US / @theoceanrace) takes the free space: the link ends up beside the arrows */
.scroll-row .widget-title > .layout-row {
  flex: 1;
  align-items: center;
}

.scroll-row .widget-title > .layout-row a:not(.btn) {
  transition: color .2s ease-in-out;
}

.scroll-row .widget-title > .layout-row a:not(.btn):hover {
  color: var(--color-primary);
}

.scroll-arrows {
  display: flex;
  gap: var(--space-2);
}

.scroll-arrows button {
  position: relative;
  width: var(--button-height);
  height: var(--button-height);
  background: var(--button-bg);
  color: var(--button-text);
}

.scroll-arrows button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border: solid currentColor;
  border-width: 2px 2px 0 0;
  transform: translate(-70%, -50%) rotate(45deg);
}

.scroll-arrows .scroll-prev::before {
  transform: translate(-30%, -50%) rotate(-135deg);
}

.scroll-arrows button:disabled {
  opacity: .3;
  cursor: default;
}

@media (max-width: 767px) {
  .scroll-arrows {
    display: none;
  }
}

/* "More" button on dark widgets */
.mode-dark .load-more-bt {
  --sweep-bg: var(--button-alt-bg);
  --sweep-text: var(--button-alt-text);
  background: var(--color-primary);
  color: var(--color-dark);
}

/* "More" / "View all" on the blue surface: white hover fill, dark label */
.mode-bluey .load-more-bt {
  --sweep-bg: var(--color-white);
  --sweep-text: var(--color-dark);
}

/* CMS class more-bottom: the link inside the widget title is shown as a
   button after the list, bottom right (script.js → initMoreBottom).
   With Angular pagination (.after-pages) it appears only when the "More"
   button and the loading label are both hidden and the list has items */
.more-bottom .widget-title a {
  display: none;
}

.more-bottom .load-more-bt {
  margin: var(--space-8) 0 0 auto;
}

.more-bottom .view-more-link.after-pages {
  display: none;
}

.more-bottom .tabs-content:has(.more-items-item) a.load-more-bt.ng-hide ~ span.load-more-bt.ng-hide ~ .view-more-link.after-pages {
  display: flex;
}

@media (max-width: 1024px) {
  .one-four .more-items-list,
  .one-five .more-items-list { --cols: 2; }
  .one-three .more-items-list { --cols: 2; }
}

@media (max-width: 767px) {
  .one-two .more-items-list,
  .one-three .more-items-list,
  .one-four .more-items-list,
  .one-five .more-items-list { --cols: 1; }
}

/* ---------- More items: card ---------- */
.more-items-item {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--widget-bg);
  color: var(--widget-text);
}

.transparent .more-items-item,
.items-flush .more-items-item {
  background: transparent;
}

/* Media: angular widgets use .more-items-img-container,
   static widgets wrap the image in the first <a> */
.more-items-img-container,
.more-items-item > a:first-child:has(> img) {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: var(--ratio, 317 / 205);
}

.ratio-16-9 { --ratio: 16 / 9; }
.ratio-4-5 { --ratio: 4 / 5; }
.ratio-1-1 { --ratio: 1 / 1; }

.more-items-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

/* Second image of a two-image item is the hover state */
.more-items-img.img-2 {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .4s ease;
}

.more-items-item:hover .more-items-img.img-2 {
  opacity: 1;
}

.more-items-item:hover .more-items-img:only-child,
.grow-hover-img .more-items-item:hover .more-items-img,
.action-tab .more-items-item:hover .more-items-img,
.more-items-item[class*='-news-item']:hover .more-items-img {
  transform: scale(1.04);
}

/* responsive-images: item with two images, 1st = desktop, 2nd = mobile.
   No hover swap and no fixed ratio: the height follows the photo itself */
.responsive-images .more-items-img-container,
.responsive-images .more-items-item > a:first-child:has(> img) {
  aspect-ratio: auto;
}

.responsive-images .more-items-img {
  height: auto;
}

.responsive-images .more-items-img.img-2 {
  display: none;
}

@media (max-width: 767px) {
  .responsive-images .more-items-img:not(.img-2) {
    display: none;
  }

  .responsive-images .more-items-img.img-2 {
    display: block;
    position: static;
    opacity: 1;
  }
}

.more-items-img-mask {
  display: none;
}

/* Text */
.more-items-item .wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-2-5);
  row-gap: var(--space-2);
  padding: var(--space-4);
}

.items-flush .more-items-item .wrapper {
  padding: var(--space-3) 0 0;
}

.more-items-category,
.more-items-subsection,
.more-items-tag {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--widget-accent);
}

.more-items-time {
  font-size: var(--font-size-xs);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--widget-text-muted);
}

.more-items-time .date-time {
  display: none;
}

.more-items-item h2 {
  flex-basis: 100%;
  font-size: var(--font-size-lg);
  font-weight: 600;
  line-height: 1.2;
}

.ratio-16-9.items-flush .more-items-item .wrapper {
  padding-top: var(--space-4);
  row-gap: var(--space-3);
}

.ratio-16-9.items-flush .more-items-time {
  opacity: 1;
}

.more-items-short-text,
.more-items-long-text {
  flex-basis: 100%;
  font-size: var(--font-size-sm);
}

.sponsor .more-items-long-text {
  display: none;
}

.more-items-item .link-button {
  width: auto;
  height: auto;
  padding: 0;
  background: none;
}

.more-items-item .link-button a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--button-width);
  height: var(--button-height);
  padding: 0 var(--space-5);
  background: var(--button-bg);
  color: var(--button-text);
}

/* Whole card clickable */
.more-items-item .all-box-link,
.more-items-item h2 a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* The overlay link is the only link of news / gallery / video cards (home latest news), so it
   must take the tap; on cards with a button it stays inert so the button keeps its hover and click */
.more-items-item:not(:has(.link-button)) .all-box-link {
  pointer-events: auto;
}

/* Short text is opt-in (Figma cards show only meta + title) */
.more-items-item .more-items-short-text {
  display: none;
}

.show-text .more-items-item .more-items-short-text {
  display: block;
}

/* ---------- Social stream items ---------- */
.socialstream-item {
  --ratio: 4 / 5;
}

.socialstream-item .wrapper {
  display: none;
}

/* Hover video sits on top of the poster image */
.hover-video {
  position: relative;
  width: 100%;
  height: 100%;
}

.hover-video .more-items-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .3s ease;
}

.more-items-item:hover .hover-video .more-items-video {
  opacity: 1;
}

/* Video landing and the list under a video: the next step of the blue scale */
#angular-news.mode-bluey {
  --widget-bg: var(--color-primary-80);
}

/* On the blue surface the tab is dark, so its hover fill is white */
.mode-bluey {
  --tab-hover-bg: var(--color-white);
  --tab-hover-text: var(--color-dark);
}

/* Diagonal action tab generated from the item classes the platform adds, bottom right of the photo.
   Social items and news cards always get it; photo/video items inside a widget with
   .action-tab (CMS class) get SEE GALLERY / WATCH. Hover: the slanted sweep of the buttons. */
.socialstream-item .more-items-img-container::after,
.more-items-item[class*='-news-item'] .more-items-img-container::after,
.action-tab .more-items-item:is(.photo, .atlantic-photo) .more-items-img-container::after,
.action-tab .more-items-item.video .more-items-img-container::after {
  content: '\ee66  VIEW POST'; /* ri-instagram-line */
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  height: var(--card-action-height);
  padding: 0 var(--space-4) 0 calc(var(--space-6) + var(--diagonal-tab));
  background: linear-gradient(calc(90deg + atan(var(--slope))), var(--tab-hover-bg, var(--button-alt-bg)) var(--sweep), var(--widget-action) var(--sweep));
  color: var(--widget-on-action);
  font-family: 'remixicon', var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: pre;
  clip-path: polygon(var(--diagonal-tab) 0, 100% 0, 100% 100%, 0 100%);
  transition: --sweep .22s ease-in-out, color .22s ease-in-out;
}

.socialstream-item .more-items-img-container::after {
  font-size: var(--font-size-sm);
}

.socialstream-item.has-video .more-items-img-container::after {
  content: '\ee66  WATCH REEL';
}

html[lang="es"] .socialstream-item.has-video .more-items-img-container::after { content: '\ee66  VER REEL'; }
html[lang="fr"] .socialstream-item.has-video .more-items-img-container::after { content: '\ee66  VOIR LE REEL'; }
html[lang="it"] .socialstream-item.has-video .more-items-img-container::after { content: '\ee66  GUARDA IL REEL'; }

.more-items-item[class*='-news-item'] .more-items-img-container::after {
  content: 'READ ARTICLE';
}

.past-events .more-items-item[class*='-news-item'] .more-items-img-container::after {
  content: 'KNOW MORE';
}

.action-tab .more-items-item:is(.photo, .atlantic-photo) .more-items-img-container::after {
  content: 'SEE GALLERY';
}

/* These three labels are generated here: one per language */
html[lang="es"] .more-items-item[class*='-news-item'] .more-items-img-container::after { content: 'LEER ARTÍCULO'; }
html[lang="fr"] .more-items-item[class*='-news-item'] .more-items-img-container::after { content: 'LIRE L’ARTICLE'; }
html[lang="it"] .more-items-item[class*='-news-item'] .more-items-img-container::after { content: 'LEGGI L’ARTICOLO'; }

html[lang="es"] .past-events .more-items-item[class*='-news-item'] .more-items-img-container::after { content: 'SABER MÁS'; }
html[lang="fr"] .past-events .more-items-item[class*='-news-item'] .more-items-img-container::after { content: 'EN SAVOIR PLUS'; }
html[lang="it"] .past-events .more-items-item[class*='-news-item'] .more-items-img-container::after { content: 'SCOPRI DI PIÙ'; }

html[lang="es"] .action-tab .more-items-item:is(.photo, .atlantic-photo) .more-items-img-container::after { content: 'VER GALERÍA'; }
html[lang="fr"] .action-tab .more-items-item:is(.photo, .atlantic-photo) .more-items-img-container::after { content: 'VOIR LA GALERIE'; }
html[lang="it"] .action-tab .more-items-item:is(.photo, .atlantic-photo) .more-items-img-container::after { content: 'VEDI LA GALLERIA'; }

.action-tab .more-items-item.video .more-items-img-container::after {
  content: '\f00a  WATCH'; /* ri-play-fill */
}

html[lang="es"] .action-tab .more-items-item.video .more-items-img-container::after { content: '\f00a  VER'; }
html[lang="fr"] .action-tab .more-items-item.video .more-items-img-container::after { content: '\f00a  REGARDER'; }
html[lang="it"] .action-tab .more-items-item.video .more-items-img-container::after { content: '\f00a  GUARDA'; }

@media (hover: hover) {
  .socialstream-item:hover .more-items-img-container::after,
  .more-items-item[class*='-news-item']:hover .more-items-img-container::after,
  .action-tab .more-items-item:is(.photo, .atlantic-photo):hover .more-items-img-container::after,
  .action-tab .more-items-item.video:hover .more-items-img-container::after {
    --sweep: 100%;
    color: var(--tab-hover-text, var(--button-alt-text));
    transition: --sweep .36s ease-out, color .36s ease-out;
  }
}

@media (prefers-reduced-motion: reduce) {
  .socialstream-item .more-items-img-container::after,
  .more-items-item[class*='-news-item'] .more-items-img-container::after,
  .action-tab .more-items-item .more-items-img-container::after {
    transition-duration: 0s;
  }
}

/* On phones the tab is larger: height, text and icon */
@media (max-width: 767px) {
  .socialstream-item .more-items-img-container::after,
  .more-items-item[class*='-news-item'] .more-items-img-container::after,
  .action-tab .more-items-item:is(.photo, .atlantic-photo) .more-items-img-container::after,
  .action-tab .more-items-item.video .more-items-img-container::after {
    height: 52px;
    font-size: var(--font-size-md);
  }
}

/* Atlantic label before the date (CMS class item-label): only on items
   carrying .atlantic-news, .atlantic-videos or .atlantic-photo */
.item-label .more-items-item.atlantic-news .wrapper::before,
.item-label .more-items-item.atlantic-videos .wrapper::before,
.item-label .more-items-item.atlantic-photo .wrapper::before {
  content: 'ATLANTIC';
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--widget-accent);
}

/* A tag that follows the category, the subsection or the Atlantic label is
   separated from it with a slash */
.more-items-category ~ .more-items-tag::before,
.more-items-subsection ~ .more-items-tag::before,
.item-label .more-items-item:is(.atlantic-news, .atlantic-videos, .atlantic-photo) .more-items-tag::before {
  content: '/';
  margin-right: var(--space-2-5);
  font-weight: 400;
  color: var(--widget-text-muted);
}

/* Hide the date (photo galleries show only the title) */
.hide-date .more-items-time {
  display: none;
}

/* ---------- Overlay items: text over the image (promo cards) ---------- */
.overlay-items .more-items-item {
  overflow: hidden;
  aspect-ratio: var(--ratio, 420 / 528);
  background: var(--color-primary);
  color: var(--color-white);
}

.overlay-items .more-items-item > a:first-child {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}

.overlay-items .more-items-item .wrapper {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: block;
  padding: 22px 20px;
}
.overlay-items .more-items-item.left-top .wrapper {
  top: 0;
  bottom: auto;
}
.overlay-items .more-items-category {
  font-size: var(--font-size-lg);
  font-weight: 600;
  line-height: 24px;
  text-transform: none;
  color: inherit;
}

.overlay-items .more-items-item h2 {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: var(--font-size-title-xl);
  font-weight: 800;
  line-height: 62px;
  text-transform: uppercase;
}

.overlay-items .link-button {
  display: none;
}

/* overlay-button: the card keeps its short text and its button (same portrait ratio as the home banners,
   dark scrim for the copy, closer to the block above) */
#main .zone-1 > .widget.overlay-button:not(.top-stories-wrapper):not(.md-modal) {
  padding-top: 0;
}

.overlay-button .more-items-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--color-dark), transparent 80%);
  opacity: .9;
  pointer-events: none;
}

.overlay-button .more-items-item .wrapper {
  padding: var(--space-8);
}

.overlay-button .more-items-text {
  margin: var(--space-3) 0 0;
  max-width: 34ch;
  font-size: var(--font-size-lg);
  line-height: 28px;
}

.overlay-button .link-button {
  display: inline-flex;
  margin-top: var(--space-5);
}

/* ---------- Top stories (fotorama, legacy) ---------- */
/* Wrapper holding the slider: 20px frame (background from mode-dark).
   :not(.md-modal) matches the specificity of the generic section rule */
#main .zone-1 > .widget:has(.top-stories, .top-story-items):not(.md-modal) {
  position: relative;
  overflow: hidden;
  padding: var(--space-5) var(--container-inset);
}

.top-stories,
.topstory-text-right {
  position: relative;
  width: 100%;
  background: var(--color-dark);
  color: var(--color-white);
}

.top-stories .fotorama__stage,
.top-stories .fotorama__html,
.topstory-text-right .fotorama__stage,
.topstory-text-right .fotorama__html {
  overflow: hidden;
}

/* Diagonal text panel on the right. The left padding clears the diagonal
   (22.56% of the panel width) so the copy never runs under the photo */
.top-stories .slide-content,
.topstory-text-right .slide-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
  width: min(470px, 40%);
  padding: 0 var(--space-8) 60px calc(min(470px, 40%) * .2256 + var(--space-5));
  background: var(--color-dark);
  clip-path: polygon(22.56% 0, 100% 0, 100% 100%, 0 100%);
}

.top-stories .slide-content p,
.topstory-text-right .slide-content p {
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: 28px;
}

.top-stories .slide-content .btn,
.topstory-text-right .slide-content .btn {
  align-self: flex-start;
}

/* Headline lines step left following the panel diagonal:
   a full-height float with a triangular shape-outside */
.top-stories .slide-title {
  position: absolute;
  inset: 0 var(--space-8) 0 0;
  display: block;
}

.top-stories .slide-title::before {
  content: '';
  float: left;
  width: 30%;
  height: 100%;
  shape-outside: polygon(0 0, 100% 0, 0 100%);
}

.top-stories .slide-title a,
.topstory-text-right .slide-title a {
  display: block;
  margin-top: 22%;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: var(--font-size-title-sm);
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  text-transform: uppercase;
}

/* The banner title is in the panel's flow, not floated along the diagonal */
.topstory-text-right .slide-title {
  margin: 0;
}

.topstory-text-right .slide-title a {
  margin-top: 0;
}

/* Dots as bars inside the panel */
.top-stories .fotorama__nav-wrap {
  position: absolute;
  right: calc(min(470px, 40%) - 120px - var(--space-5));
  bottom: 70px;
  width: 140px;
}

.top-stories .fotorama__nav--dots .fotorama__nav__frame {
  width: 39px;
  height: 5px;
  margin-right: 14px;
}

.top-stories .fotorama__dot {
  top: 0;
  left: 0;
  width: 39px;
  height: 5px;
  border: 0;
  border-radius: 3px;
  background: var(--color-primary);
  opacity: .5;
}

.top-stories .fotorama__active .fotorama__dot {
  opacity: 1;
}

@media (max-width: 1024px) {
  .top-stories .slide-content,
  .topstory-text-right .slide-content {
    width: 60%;
    padding-left: calc(60% * .2256 + var(--space-5));
  }
}

@media (max-width: 767px) {
  .top-stories .slide-content,
  .topstory-text-right .slide-content {
    width: 100%;
    padding: 0;
    clip-path: none;
    background: linear-gradient(transparent, var(--color-dark) 70%);
    justify-content: flex-end;
    gap: 0;
  }

  .top-stories .slide-title,
  .topstory-text-right .slide-title {
    position: static;
    padding: var(--gutter);
  }

  .top-stories .slide-title::before {
    display: none;
  }

  .top-stories .slide-content p,
  .topstory-text-right .slide-content p {
    padding: 0 var(--gutter) var(--gutter);
  }

  .top-stories .slide-content .btn,
  .topstory-text-right .slide-content .btn {
    align-self: stretch;
    width: auto;
    margin: 0 var(--gutter) var(--gutter);
  }
}

/* ---------- Legends home (body.legends) ----------
   Figma "LEGENDS REGATTA / Desktop / New brand": promo-photo bands (hero, The Legends) with their own photo
   size, a charcoal promo-strip for the tracker and the cards under "All you need to know". */

/* Photo + copy bands: smaller photo than the default, 64px heading, charcoal buttons, no dotted texture */
.legends .promo-photo::after {
  display: none;
}

.legends .promo-photo.mode-bluey {
  --button-bg: var(--button-alt-bg);
  --button-text: var(--button-alt-text);
}

.legends .promo-photo .more-items-item {
  --photo-w: 42.5;
  --photo-ratio: 540 / 278;
  --photo-hw: calc(278 / 540);
  align-items: start;  /* the copy can be taller than the photo: stretching it would widen the photo through its ratio */
}

@media (min-width: 1024px) and (max-width: 1280px) {
  .legends .promo-photo .more-items-item {
    --photo-ratio: 4 / 3;
    --photo-hw: calc(3 / 4);
  }
}

/* Stacked layout: the photo is a plain rectangle, without the generic corner mask */
@media (max-width: 1023px) {
  .legends .promo-photo .more-items-item > a:first-child:has(> img) {
    clip-path: none;
  }
}

.legends .promo-photo h2 {
  font-size: clamp(36px, 5cqw, 64px);
  line-height: .94;
}

/* The hero copy can be taller than the photo (3 headline lines below 1440px): the float that follows the diagonal
   is only as tall as the photo (slant / slope), so the text under it goes back to the left edge */
.legends .promo-photo .wrapper::before {
  height: calc(var(--slant) / var(--slope));
}

/* The intro paragraph (the record's text field) reads like the headline's body copy */
.legends .promo-photo .wrapper > p {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-lg);
  line-height: 28px;
}

/* Section titles are charcoal on this page, and the three cards get a 24px title */
.legends .widget-title {
  color: var(--color-dark);
  font-size: var(--font-size-title-sm);
  line-height: 52px;
}

/* Overlay items (cards and banners): the title in Antarctica italic at the base of the photo, on a charcoal fade */
.legends .overlay-items .more-items-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--color-dark), transparent 70%);
  opacity: .9;
  pointer-events: none;
}

.legends .overlay-items .more-items-item .wrapper {
  padding: var(--space-6);
}

.legends .overlay-items .more-items-item h2 {
  margin: 0;
  font-size: var(--font-size-title-sm);
  font-style: italic;
  line-height: 1;
}

/* Wide banner: big title and text at the left, straight button at the right, both on the base line */
.overlay-items.overlay-banner .more-items-item {
  --ratio: 1368 / 560;
  container-type: inline-size;
}

.overlay-items.overlay-banner .more-items-item .wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: var(--space-8);
  padding: var(--space-8);
}

.overlay-items.overlay-banner .more-items-item h2 {
  grid-column: 1;
  font-size: clamp(48px, 10cqw, 160px);
  line-height: .8;  /* caps only, so the lines can sit tight */
}

.overlay-items.overlay-banner .more-items-text {
  grid-column: 1;
  margin-top: var(--space-3);
  font-size: var(--font-size-lg);
  line-height: 28px;
}

.overlay-items.overlay-banner .link-button {
  display: inline-flex;
  grid-column: 2;
  grid-row: 1 / span 2;
}

@media (max-width: 767px) {
  .overlay-items.overlay-banner .more-items-item {
    --ratio: 4 / 5;
  }

  .overlay-items.overlay-banner .more-items-item .wrapper {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-6);
  }

  .overlay-items.overlay-banner .link-button {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    margin-top: var(--space-5);
  }

  .overlay-items.overlay-banner .link-button a {
    width: 100%;
  }
}

/* The hero button follows the copy (it is inline, so the float shape keeps it on the text's left edge) */
.legends .promo-photo .link-button {
  position: static;
  margin: var(--space-6) 0 0;
}

/* ---------- Promo strip: copy on the left, button on the right, on a band ---------- */
.promo-strip {
  padding: var(--space-8) var(--container-inset);
}

.promo-strip .more-items-list {
  display: block;
}

.promo-strip .more-items-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-10, 40px);
  background: none;
}

.promo-strip .wrapper {
  display: contents;
}

.promo-strip .more-items-category,
.promo-strip h2,
.promo-strip .more-items-text {
  grid-column: 1;
  color: var(--widget-accent);
}

.promo-strip .more-items-category {
  margin-bottom: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 18px;
  text-transform: uppercase;
}

.promo-strip h2 {
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: var(--font-size-title-lg);
  font-style: italic;
  font-weight: 800;
  line-height: 52px;
  text-transform: uppercase;
}

.promo-strip .more-items-title {
  color: inherit;
}

.promo-strip .more-items-text {
  margin-top: var(--space-2);
  font-size: var(--font-size-body-lg, 18px);
  line-height: 28px;
}

.promo-strip .link-button {
  grid-column: 2;
  grid-row: 1 / span 3;
}

.promo-strip .link-button a {
  clip-path: polygon(calc(var(--button-height) * var(--slope)) 0, 100% 0, 100% 100%, 0 100%);
  padding-left: var(--space-6);
}

@media (max-width: 767px) {
  .promo-strip .more-items-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .promo-strip h2 {
    font-size: var(--font-size-title-sm);
    line-height: 1;
  }

  .promo-strip .link-button {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    margin-top: var(--space-6);
  }

  .promo-strip .link-button a {
    width: 100%;
    clip-path: none;
    padding-left: var(--space-5);
  }
}

/* "More" link widget below the news: a centred button, not a half-cut block on the edge */
.legends #main .zone-1 > .widget.link-button:not(.top-stories-wrapper):not(.md-modal) {
  display: flex;
  margin: 0 auto var(--space-14);
  padding: 0;
}

/* ---------- Slider items ----------
   Any more-items widget with .slider-items becomes a slider
   (js/script.js → initSliderItems): items stack in one cell and
   only .active is visible; dots are appended as .slider-dots. */
.slider-items .more-items-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.slider-items .more-items-item {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility .6s ease;
}

.slider-items .more-items-item.active,
.slider-items:not(.slider-ready) .more-items-item:first-child {
  opacity: 1;
  visibility: visible;
}

.slider-dots {
  display: flex;
  gap: 14px;
}

.slider-dots button {
  width: 39px;
  height: 5px;
  border-radius: 3px;
  background: var(--widget-accent);
  opacity: .5;
  transition: opacity .2s ease;
}

.slider-dots button.active,
.slider-dots button:hover {
  opacity: 1;
}

/* ---------- Swipe on mobile ----------
   CMS class .swipe-mobile: at <= 767px the more-items list becomes a
   horizontal scroll-snap carousel (next card peeks from the right) and
   the "View more" button of the title moves below the carousel.
   Pure CSS, so it works with items Angular renders later. */
@media (max-width: 767px) {
  /* Swipe on mobile (.swipe-mobile) */
  #main .zone-1 > .widget.swipe-mobile {
    padding-block: var(--space-8);
    row-gap: var(--space-6);
  }

  .swipe-mobile.ratio-16-9 { --swipe-card: .84; }

  /* Title text and button become grid items so the button can go last */
  .swipe-mobile .widget-title,
  .swipe-mobile .widget-title > span {
    display: contents;
  }

  .swipe-mobile .widget-title {
    line-height: 1.1;
  }

  .swipe-mobile .widget-title > span > .btn {
    order: 3;
    grid-column: 1 / -1;
    width: 100%;
  }

  .swipe-mobile .tabs-content {
    min-width: 0;
  }

  .swipe-mobile .more-items-list {
    display: flex;
    gap: var(--space-4);
    margin-right: calc(-1 * var(--gutter));  /* bleed to the screen edge */
    padding-right: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .swipe-mobile .more-items-list::-webkit-scrollbar {
    display: none;
  }

  .swipe-mobile .more-items-item {
    flex: 0 0 calc(100% * var(--swipe-card, .81));
    scroll-snap-align: start;
  }
}


/* ---------- List on mobile ----------
   CMS class .list-mobile: at <= 767px the cards become a compact list, small
   4:3 thumbnail on the left (112 x 84 in the 350px mobile design) and date +
   title on the right; the "More" button spans the full width. Works with any
   more-items widget. */
@media (max-width: 767px) {
  .list-mobile {
    --list-thumb: 32%;
  }

  .list-mobile .more-items-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .list-mobile .more-items-item {
    display: grid;
    grid-template-columns: var(--list-thumb) minmax(0, 1fr);
    column-gap: var(--space-3);
    align-items: start;
  }

  .list-mobile .more-items-img-container,
  .list-mobile .more-items-item > a:first-child:has(> img) {
    aspect-ratio: auto;
    width: auto;
    height: 100%;
  }

  .list-mobile .more-items-item .wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: 0;
    text-align: left;
  }

  .list-mobile .more-items-item .wrapper::before {
    display: none;
  }

  .list-mobile .more-items-time {
    font-size: 10px;
    line-height: 14px;
  }

  .list-mobile .more-items-item h2 {
    margin: 0;
    font-size: 18px;
    line-height: 23px;
  }

  .list-mobile .more-items-short-text {
    display: none;
  }

  /* The thumbnail is too small for the diagonal action tab (READ ARTICLE, WATCH...).
     Doubled .more-items-item to reach the (0,4,1) of the .action-tab variants. */
  .list-mobile .more-items-item.more-items-item .more-items-img-container::after {
    display: none;
  }
}

/* ---------- Top story items (diagonal hero) ----------
   Markup: li.more-items-item > a > img.more-items-img
           + .wrapper > .more-items-category + h2 > a.more-items-title */
.top-story-items {
  position: relative;
  --panel: 39%;  /* 470 / 1368 */
}

.top-story-items .more-items-item {
  overflow: hidden;
  background: var(--color-dark);
  color: var(--color-white);
}

/* Photo flush with the left edge, always 16:9 like the original crop;
   its height sets the slide height. 74% reaches under the panel's
   diagonal (its top edge starts at 73.4% of the slide width). */
.top-story-items .more-items-item > a:first-child {
  position: relative;
  width: 70%;
  aspect-ratio: 16 / 9;
}

.top-story-items .more-items-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Diagonal text panel on the right */
.top-story-items .more-items-item .wrapper {
  --diagonal: calc(var(--slope) * 100.96%);   /* top offset of the panel's left edge: the site slope over the slide height (panel 39% wide, slide height .39375 of the width) */
  --text-gap: 20px;     /* constant distance between text and diagonal */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: block;
  width: var(--panel);
  padding: 0;
  background: var(--color-dark);
  clip-path: polygon(var(--diagonal) 0, 100% 0, 100% 100%, 0 100%);
}

/* Full-height float with the same slope as the clip-path diagonal,
   shifted by --text-gap, so every line keeps the same distance */
.top-story-items .more-items-item .wrapper::before {
  content: '';
  float: left;
  width: calc(var(--diagonal) + var(--text-gap));
  height: 100%;
  shape-outside: polygon(0 0, 100% 0, var(--text-gap) 100%, 0 100%);
}

.top-story-items .more-items-item .wrapper > * {
  margin-right: var(--space-8);
}

.top-story-items .more-items-category,
.top-story-items .more-items-time {
  display: block;
  margin-top: 18%;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color: var(--color-white);
  opacity: 1;
}

/* The label (ATLANTIC VIDEOS, ATLANTIC PHOTO, ARTICLES...) in the site blue; the date stays white */
.top-story-items .more-items-category {
  color: var(--color-primary);
}

.top-story-items .more-items-item h2 {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  /* Panel height follows the 16:9 photo, so the headline scales with it */
  font-size: clamp(28px, 3.4vw, var(--font-size-title-sm));
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  text-transform: uppercase;
}

.top-story-items .more-items-short-text,
.top-story-items .link-button {
  display: none;
}

/* Dots sit at the bottom of the panel: square ends, blue, the inactive ones fainter */
.top-story-items .slider-dots {
  position: absolute;
  left: calc(100% - var(--panel) + 40px);
  bottom: 10%;
  z-index: 5;
}

.top-story-items .slider-dots button {
  position: relative;
  border-radius: 0;
  background: var(--color-primary);
  opacity: .3;
}

/* Hover and click area larger than the bar: it grows up and down and half the gap to each side,
   so neighbouring bars never overlap and a click near one doesn't trigger another action */
.top-story-items .slider-dots button::before {
  content: '';
  position: absolute;
  inset: -14px -7px;
}

.top-story-items .slider-dots button.active,
.top-story-items .slider-dots button:hover {
  opacity: 1;
}

/* Transition: the incoming slide is revealed over the outgoing one by a
   diagonal wipe (same slope as the panel's left edge), and its texts slide
   in from the right (next) or the left (prev).
   Triggered by .enter-next / .enter-prev (js/script.js → go()). */
.top-story-items {
  --slide-duration: .9s;
  --slide-ease: cubic-bezier(.77, 0, .18, 1);
  --wipe-skew: calc(var(--slope) * 39.375%);  /* the site slope over the slide height */
  --text-shift: 90px;
}

.top-story-items .more-items-item {
  transition: none;
}

.top-story-items .more-items-item.leaving {
  z-index: 1;
  opacity: 1;
  visibility: visible;
}

.top-story-items .more-items-item.active {
  z-index: 2;
}

.top-story-items .more-items-item.enter-next {
  animation: tsWipeNext var(--slide-duration) var(--slide-ease) both;
}

.top-story-items .more-items-item.enter-prev {
  animation: tsWipePrev var(--slide-duration) var(--slide-ease) both;
}

@keyframes tsWipeNext {   /* left -> right */
  from { clip-path: polygon(0 0, 0 0, calc(-1 * var(--wipe-skew)) 100%, 0 100%); }
  to   { clip-path: polygon(0 0, calc(100% + var(--wipe-skew)) 0, 100% 100%, 0 100%); }
}

@keyframes tsWipePrev {   /* right -> left */
  from { clip-path: polygon(calc(100% + var(--wipe-skew)) 0, 100% 0, 100% 100%, 100% 100%); }
  to   { clip-path: polygon(0 0, 100% 0, 100% 100%, calc(-1 * var(--wipe-skew)) 100%); }
}

/* Incoming texts: staggered, after the wipe has started */
.top-story-items .more-items-item.enter-next .wrapper > * {
  animation: tsTextFromRight calc(var(--slide-duration) * .9) cubic-bezier(.2, .7, .2, 1) both;
}

.top-story-items .more-items-item.enter-prev .wrapper > * {
  animation: tsTextFromLeft calc(var(--slide-duration) * .9) cubic-bezier(.2, .7, .2, 1) both;
}

.top-story-items .more-items-item.enter-next .wrapper > :nth-child(1),
.top-story-items .more-items-item.enter-prev .wrapper > :nth-child(1) {
  animation-delay: calc(var(--slide-duration) * .35);
}

.top-story-items .more-items-item.enter-next .wrapper > :nth-child(n+2),
.top-story-items .more-items-item.enter-prev .wrapper > :nth-child(n+2) {
  animation-delay: calc(var(--slide-duration) * .5);
}

@keyframes tsTextFromRight {
  from { opacity: 0; transform: translateX(var(--text-shift)); }
  to   { opacity: 1; transform: none; }
}

@keyframes tsTextFromLeft {
  from { opacity: 0; transform: translateX(calc(-1 * var(--text-shift))); }
  to   { opacity: 1; transform: none; }
}

/* Outgoing texts leave in the opposite direction while the wipe covers them */
.top-story-items .more-items-item.leave-next .wrapper > * {
  animation: tsTextOutLeft calc(var(--slide-duration) * .55) ease-in both;
}

.top-story-items .more-items-item.leave-prev .wrapper > * {
  animation: tsTextOutRight calc(var(--slide-duration) * .55) ease-in both;
}

@keyframes tsTextOutLeft {
  to { opacity: 0; transform: translateX(calc(-1 * var(--text-shift))); }
}

@keyframes tsTextOutRight {
  to { opacity: 0; transform: translateX(var(--text-shift)); }
}

@media (max-width: 1024px) {
  /* The photo keeps its 16:9 and the panel its width: long headlines shrink instead */
  .top-story-items .more-items-category {
    margin-top: 10%;
    font-size: var(--font-size-md);
  }

  .top-story-items .more-items-item h2 {
    margin-top: var(--space-2);
    font-size: clamp(20px, 2.6vw, 28px);
  }

  .top-story-items .more-items-item .wrapper > * {
    margin-right: var(--space-5);
  }

  .top-story-items .slider-dots {
    left: calc(100% - var(--panel) + 28px);
  }
}

@media (max-width: 767px) {
  /* Mobile (Figma 1032:15770): full-bleed 16:9 photo, charcoal block below
     with category, headline and a position bar */
  #main .zone-1 > .widget:has(.top-stories, .top-story-items):not(.md-modal) {
    padding: 0;
  }

  .top-story-items .more-items-item > a:first-child {
    width: 100%;
  }

  .top-story-items .more-items-item .wrapper {
    position: relative;
    width: 100%;
    padding: var(--space-5) var(--space-14) calc(var(--space-6) + 3px + var(--space-4)) var(--space-6);
    clip-path: none;
  }

  .top-story-items .more-items-item .wrapper::before {
    display: none;
  }

  .top-story-items .more-items-item .wrapper > * {
    margin-right: 0;
  }

  .top-story-items .more-items-category {
    margin-top: 0;
    font-size: var(--font-size-xs);
    font-weight: 400;
    line-height: 16px;
  }

  .top-story-items .more-items-item h2 {
    margin-top: var(--space-4);
    font-size: 36px;
    line-height: 40px;
  }

  /* Position bar: current slide 64px, the rest 24px */
  .top-story-items .slider-dots {
    left: var(--space-6);
    right: auto;
    bottom: var(--space-6);
    gap: var(--space-2);
  }

  .top-story-items .slider-dots button {
    width: 24px;
    height: 3px;
    transition: width .3s ease, opacity .2s ease;
  }

  .top-story-items .slider-dots button.active {
    width: 64px;
  }

  /* the gap here is 8px: half of it to each side, taller for the thumb */
  .top-story-items .slider-dots button::before {
    inset: -18px -4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .top-story-items .more-items-item,
  .top-story-items .more-items-item .wrapper > * {
    animation: none !important;
  }
}

/* Intro of the top stories (class .intro, set once by initSliderItems in js/script.js and removed after
   2.4 s so the slide transitions are not affected): the photo settles in, the texts slide in after it */
@keyframes intro-photo {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: none; }
}

@keyframes intro-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.top-story-items:not(.intro):not(.intro-done) {
  opacity: 0;
  animation: intro-fade .01s 3s forwards;  /* fallback if the script never runs */
}

.top-story-items.intro {
  --text-shift: 40px;
  animation: intro-fade .7s ease-out both;
}

.top-story-items.intro .more-items-item.active > a:first-child {
  overflow: hidden;
}

.top-story-items.intro .more-items-item.active .more-items-img {
  animation: intro-photo 1.3s cubic-bezier(.2, .7, .2, 1) both;
}

.top-story-items.intro .more-items-item.active .wrapper > * {
  animation: tsTextFromRight .9s cubic-bezier(.2, .7, .2, 1) both;
}

.top-story-items.intro .more-items-item.active .wrapper > :nth-child(1) {
  animation-delay: .35s;
}

.top-story-items.intro .more-items-item.active .wrapper > :nth-child(n+2) {
  animation-delay: .5s;
}

.top-story-items.intro .slider-dots {
  animation: intro-fade .6s ease-out .9s both;
}

@media (prefers-reduced-motion: reduce) {
  .top-story-items.intro .more-items-img,
  .top-story-items.intro .wrapper > *,
  .top-story-items.intro .slider-dots {
    animation: none !important;
  }
}

/* TOR pattern decoration */
.tor-pattern {
  position: absolute;
  width: 540px;
  height: 295px;
  background: url(../img/ui/pattern-07.svg) no-repeat center / contain;
  opacity: .38;
  pointer-events: none;
}

#main .zone-1 > .widget:has(.top-stories, .top-story-items)::before,
#main .zone-1 > .widget:has(.top-stories, .top-story-items)::after {
  content: '';
  position: absolute;
  z-index: 3;
  width: 622px;
  height: 371px;
  background: url(../img/ui/pattern-07.svg) no-repeat center / contain;
  opacity: .38;
  pointer-events: none;
}

#main .zone-1 > .widget:has(.top-stories, .top-story-items)::before {
  bottom: 91%;
  right: calc(var(--container-inset) - 350px);
}

#main .zone-1 > .widget:has(.top-stories, .top-story-items)::after {
  top: 92%;
  right: calc(var(--container-inset) + 270px);
}

@media (max-width: 767px) {
  /* Mobile: one texture at the bottom right, inside the charcoal block */
  #main .zone-1 > .widget:has(.top-stories, .top-story-items)::before {
    display: none;
  }

  #main .zone-1 > .widget:has(.top-stories, .top-story-items)::after {
    top: auto;
    left: calc(100% - 100px);
    bottom: -60px;
    right: auto;
  }
}

/* ---------- Article stage (article-view: info panel + media) ----------
   CMS class .article-stage (with .mode-dark): info panel on the left,
   player on the right with a WATCH tab (Fotorama's play control) over it.
   Markup: article.article > .media-container + .media-info > header
           (h1.article-view-title + time.article-view-time) */
.article-stage .article {
  display: flex;
  align-items: stretch;
  gap: var(--space-8);
}

.article-stage .media-container {
  position: relative;
  flex: 1;
  min-width: 0;
}

.article-stage .media-info {
  order: -1;
  display: flex;
  flex: 0 0 min(33%, 418px);
  flex-direction: column;
  justify-content: space-between;
  padding-block: calc(var(--space-8) + var(--space-2));
  padding-right: calc(var(--space-8) + var(--space-2));
}

.article-stage .media-info header {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.article-stage .article-view-time {
  order: -1;
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 20px;
  text-transform: uppercase;
}

.article-stage .article-view-time .date-time::before {
  content: ' \00b7  ';
}

.article-stage .article-view-title {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  /* 60px from ~1440px up, shrinking with the viewport like the home slider */
  font-size: clamp(36px, 4.2vw, 60px);
  font-style: italic;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--widget-accent);
}

/* Long titles (class added by js/script.js by length): the panel is narrow, so they take a smaller size.
   On very large screens (container at its 1680px maximum) they keep the normal size */
@media (max-width: 1680px) {
  .article-stage .article-view-title.title-long {
    font-size: clamp(28px, 3vw, 44px);
  }

  .article-stage .article-view-title.title-xlong {
    font-size: clamp(24px, 2.4vw, 34px);
  }
}

/* Share (video stage and news article): only Facebook, X and LinkedIn, drawn
   with remixicon (the platform's ionicons font is not loaded in this client) */
.article-stage .article-view-footer .share-buttons,
.article-news .article-view-footer .share-buttons {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.article-stage .article-view-footer .share-buttons::before,
.article-news .article-view-footer .share-buttons::before {
  content: 'SHARE';
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 20px;
}

html[lang="es"] :is(.article-stage, .article-news) .article-view-footer .share-buttons::before { content: 'COMPARTIR'; }
html[lang="fr"] :is(.article-stage, .article-news) .article-view-footer .share-buttons::before { content: 'PARTAGER'; }
html[lang="it"] :is(.article-stage, .article-news) .article-view-footer .share-buttons::before { content: 'CONDIVIDI'; }

.article-stage .share-buttons > div,
.article-news .share-buttons > div,
.article-stage .share-buttons .share,
.article-news .share-buttons .share {
  display: contents;
}

.article-stage .share-buttons > .share-text,
.article-news .share-buttons > .share-text,
.article-stage .share-buttons a:not(.facebook):not(.twitter):not(.linkedin),
.article-news .share-buttons a:not(.facebook):not(.twitter):not(.linkedin) {
  display: none;
}

.article-stage .share-buttons a.facebook,
.article-news .share-buttons a.facebook,
.article-stage .share-buttons a.twitter,
.article-news .share-buttons a.twitter,
.article-stage .share-buttons a.linkedin,
.article-news .share-buttons a.linkedin {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--widget-chip);
  color: var(--widget-text);
  font-family: 'remixicon';
  font-size: var(--font-size-md);
  line-height: 1;
}

.article-stage .share-buttons a i,
.article-news .share-buttons a i {
  display: none;
}

.article-stage .share-buttons a.facebook::before,
.article-news .share-buttons a.facebook::before { content: '\ecbc'; }  /* ri-facebook-fill */
.article-stage .share-buttons a.twitter::before,
.article-news .share-buttons a.twitter::before { content: '\f3e6'; }   /* ri-twitter-x-fill */
.article-stage .share-buttons a.linkedin::before,
.article-news .share-buttons a.linkedin::before { content: '\eeb5'; }  /* ri-linkedin-fill */

.article-stage .share-buttons a:hover,
.article-news .share-buttons a:hover {
  background: var(--widget-text);
  color: var(--widget-bg);
}

/* On the light news article the circles are a pale grey */
.article-news .share-buttons a.facebook,
.article-news .share-buttons a.twitter,
.article-news .share-buttons a.linkedin {
  width: 44px;
  height: 44px;
  background: var(--widget-chip-light);
}

.article-news .share-buttons a.facebook:hover,
.article-news .share-buttons a.twitter:hover,
.article-news .share-buttons a.linkedin:hover {
  background: var(--widget-text);
}

/* Fotorama's central play control stretches over the whole thumbnail, so a
   click anywhere starts the video (the plugin hides it while it plays). Its
   ::before draws the WATCH tab (same diagonal as the cards, larger). */
.article-stage .fotorama__stage .fotorama__video-play {
  --watch-height: clamp(44px, 5.4vw, 74px);  /* scales with the player */
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: none;
}

html[lang="es"] .article-stage .fotorama__stage .fotorama__video-play::before { content: '\f00a  VER'; }
html[lang="fr"] .article-stage .fotorama__stage .fotorama__video-play::before { content: '\f00a  REGARDER'; }
html[lang="it"] .article-stage .fotorama__stage .fotorama__video-play::before { content: '\f00a  GUARDA'; }

.article-stage .fotorama__stage .fotorama__video-play::before {
  content: '\f00a  WATCH'; /* ri-play-fill */
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  height: var(--watch-height);
  padding: 0 calc(var(--watch-height) * .43) 0 calc(var(--watch-height) * .77);
  background: linear-gradient(calc(90deg + atan(var(--slope))), var(--tab-hover-bg, var(--button-alt-bg)) var(--sweep), var(--widget-action) var(--sweep));
  color: var(--widget-on-action);
  font-family: 'remixicon', var(--font-body);
  font-size: calc(var(--watch-height) * .3);
  font-weight: 600;
  white-space: pre;
  clip-path: polygon(calc(var(--watch-height) * var(--slope)) 0, 100% 0, 100% 100%, 0 100%);
  transition: --sweep .22s ease-in-out, color .22s ease-in-out;
}

/* Hover: the slanted sweep of the other action tabs */
@media (hover: hover) {
  .article-stage .fotorama__stage .fotorama__video-play:hover::before {
    --sweep: 100%;
    color: var(--tab-hover-text, var(--button-alt-text));
    transition: --sweep .36s ease-out, color .36s ease-out;
  }
}

@media (prefers-reduced-motion: reduce) {
  .article-stage .fotorama__stage .fotorama__video-play::before {
    transition-duration: 0s;
  }
}

/* Below 900px the panel would get too narrow: stack it under the player */
@media (max-width: 900px) {
  .article-stage .article {
    flex-direction: column;
    gap: var(--space-6);
  }

  .article-stage .media-container {
    flex: none;
    width: 100%;
  }

  .article-stage .media-info {
    order: 0;
    flex: none;
    gap: var(--space-5);
    padding: 0;
  }
}

/* ---------- Article news (article-view of a news item) ----------
   CMS class .article-news (with .mode-light).
   Markup: article.article > header (time, h1, figure, .article-view-intro)
           + .article-view-body + footer.article-view-footer (share).
   The header is flattened into the article grid so the share buttons
   (in the footer) can sit on the same row as the date. */
.article-news .article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-6);
  max-width: 1024px;
  margin-inline: auto;
}

.article-news .article > header {
  display: contents;
}

.article-news .article-view-title,
.article-page .article-view-title {
  grid-row: 1;
  grid-column: 1 / -1;
  margin-bottom: var(--space-6);
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: clamp(44px, 6.4vw, 88px);
  font-style: italic;
  font-weight: 800;
  line-height: .89;
  text-transform: uppercase;
}

.article-news .article-view-intro,
.article-news .article-view-subheader {
  grid-row: 2;
  grid-column: 1 / -1;
  margin-bottom: var(--space-6);
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.38;
}

.article-news .article-view-intro p:has(> .credits:empty) {
  display: none;
}

.article-news .article-view-time {
  grid-row: 3;
  grid-column: 1;
  align-self: center;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--color-gray);
}

.article-news .article-view-time .date-time::before {
  content: ' \00b7  ';
}

/* only the date: the time of day is hidden in the article and the video page */
.article-news .article-view-time .date-time,
.article-stage .article-view-time .date-time,
.article-view-time .date-time {
  display: none;
}

.article-news .article-view-footer {
  grid-row: 3;
  grid-column: 2;
}

.article-news .article > header > figure {
  grid-row: 4;
  grid-column: 1 / -1;
  margin-block: var(--space-8) var(--space-12);
}

/* Extra images of the article: Fotorama slideshow on the same row as the lead photo */
.article-news .article > header > .fotorama {
  grid-row: 4;
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  margin-block: var(--space-8) var(--space-12);
}

.article-news .article-view-header-img {
  width: 100%;
  height: auto;
}

.article-news figcaption,
.article-page figcaption {
  margin-top: var(--space-3);
  font-size: clamp(14px, 1.2vw, 16px);  /* a bit smaller than the article text */
  line-height: 1.4;
  color: var(--color-gray);
}

/* Whatever the caption contains (p, span with inline styles, links) follows it */
.article-news figcaption *,
.article-page figcaption * {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* Blue ticks left of the reading column (where the design has its rail) */
.article-news .article-view-body::before {
  content: '';
  position: absolute;
  top: 0;
  left: -265px;
  width: 216px;
  height: 408px;
  background: url(../img/ui/texture-ticks.svg) no-repeat;
  pointer-events: none;
}

/* Blue texture, top right of the masthead (behind the text) */
.article-news {
  position: relative;
  overflow: hidden;
}

.article-news::before {
  content: '';
  position: absolute;
  top: 0;
  left: 84%;
  width: 593px;
  height: 307px;
  background: url(../img/ui/texture-blue.svg) no-repeat center / 100% 100%;
  pointer-events: none;
}

.article-news .article {
  position: relative;
  z-index: 1;
}

/* Reading column */
.article-news .article-view-body {
  position: relative;
  grid-row: 5;
  grid-column: 1 / -1;
  width: 100%;
  max-width: 759px;
  margin-inline: auto;
  font-size: clamp(18px, 1.46vw, 20px);
  line-height: 1.6;
}

.article-news .article-view-body p,
.article-news .article-view-body ul,
.article-news .article-view-body ol,
.article-news .article-view-body figure,
.article-page .article-view-body p,
.article-page .article-view-body ul,
.article-page .article-view-body ol,
.article-page .article-view-body figure {
  margin-bottom: var(--space-5);
}

/* The CMS editor stores font-size/colour inline: the design decides them */
.article-news .article-view-body span[style],
.article-page .article-view-body span[style] {
  font-size: inherit !important;
  color: inherit !important;
  font-family: inherit !important;
}

/* Every heading is Antarctica Extra Condensed italic */
.article-news .article-view-body h2,
.article-news .article-view-body h3,
.article-news .article-view-body h4,
.article-news .article-view-body h5,
.article-news .article-view-body h6,
.article-page .article-view-body h2,
.article-page .article-view-body h3,
.article-page .article-view-body h4,
.article-page .article-view-body h5,
.article-page .article-view-body h6 {
  margin: var(--space-8) 0 var(--space-5);
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-style: italic;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}

.article-news .article-view-body h2,
.article-page .article-view-body h2 { font-size: clamp(32px, 2.9vw, 40px); }
.article-news .article-view-body h3,
.article-page .article-view-body h3 { font-size: clamp(28px, 2.3vw, 32px); }
.article-news .article-view-body h4,
.article-news .article-view-body h5,
.article-news .article-view-body h6,
.article-page .article-view-body h4,
.article-page .article-view-body h5,
.article-page .article-view-body h6 { font-size: var(--font-size-xl); }

.article-news .article-view-body a:not(.article-video),
.article-page .article-view-body a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article-news .article-view-body a:not(.article-video):hover,
.article-page .article-view-body a:hover {
  color: var(--color-primary);
}

/* Tables from the editor: full width, grey header row, thin row lines (the
   editor also stores widths and borders inline) */
.article-news .article-view-body table,
.article-page .article-view-body table {
  width: 100% !important;
  max-width: 100% !important;
  margin-bottom: var(--space-5);
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

/* On phones the table keeps its columns and scrolls sideways */
@media (max-width: 767px) {
  .article-news .article-view-body table,
  .article-page .article-view-body table {
    display: block;
    overflow-x: auto;
  }
}

.article-news .article-view-body th,
.article-news .article-view-body td,
.article-page .article-view-body th,
.article-page .article-view-body td {
  min-width: 120px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-gray-light) !important;
  text-align: left !important;
  vertical-align: top !important;
}

.article-news .article-view-body th,
.article-page .article-view-body th,
.article-news .article-view-body tr:first-child td,
.article-page .article-view-body tr:first-child td {
  background: var(--color-bg-subtle);
  font-weight: 600;
  text-transform: uppercase;
}

.article-news .article-view-body td p,
.article-page .article-view-body td p {
  margin-bottom: 0;
}

/* Embedded video (iframe from the editor) */
.article-news .article-view-body .video-figure iframe,
.article-page .article-view-body .video-figure iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* Video inside the text: poster + WATCH tab (the player loads on click, see
   js/script.js initVideoFacade); the caption is the credit line below */
.video-facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--color-dark) center / cover no-repeat;
  cursor: pointer;
}

html[lang="es"] .video-facade::before { content: '\f00a  VER'; }
html[lang="fr"] .video-facade::before { content: '\f00a  REGARDER'; }
html[lang="it"] .video-facade::before { content: '\f00a  GUARDA'; }

.video-facade::before {
  --watch-height: clamp(44px, 5.4vw, 59px);
  content: '\f00a  WATCH'; /* ri-play-fill */
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  height: var(--watch-height);
  padding: 0 calc(var(--watch-height) * .43) 0 calc(var(--watch-height) * .77);
  background: linear-gradient(calc(90deg + atan(var(--slope))), var(--tab-hover-bg, var(--button-alt-bg)) var(--sweep), var(--widget-action) var(--sweep));
  color: var(--widget-on-action);
  font-family: 'remixicon', var(--font-body);
  font-size: calc(var(--watch-height) * .3);
  font-weight: 600;
  white-space: pre;
  clip-path: polygon(calc(var(--watch-height) * var(--slope)) 0, 100% 0, 100% 100%, 0 100%);
  transition: --sweep .22s ease-in-out, color .22s ease-in-out;
}

/* Hover: the slanted sweep of the other action tabs */
@media (hover: hover) {
  .video-facade:hover::before {
    --sweep: 100%;
    color: var(--tab-hover-text, var(--button-alt-text));
    transition: --sweep .36s ease-out, color .36s ease-out;
  }
}

@media (prefers-reduced-motion: reduce) {
  .video-facade::before {
    transition-duration: 0s;
  }
}

/* Video block: dark panel, photo on the right cut by a diagonal.
   <a class="article-video" href="…"><span class="article-video-label">…</span>
   <span class="article-video-title">…</span><span class="article-video-button">…</span>
   <img src="…" alt=""></a> */
.article-video {
  --video-photo: 57%;
  --video-h: 350px;  /* the block's height (its min-height) */
  --video-lean: calc(var(--video-h) * var(--slope));  /* the site slope over the block height */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-6);
  min-height: 350px;
  margin-block: var(--space-8);
  padding: calc(var(--space-8) + var(--space-2));
  overflow: hidden;
  background: var(--color-dark);
  color: var(--color-white);
  text-decoration: none;
}

.article-video-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 18px;
  text-transform: uppercase;
}

.article-video-title {
  position: relative;
  z-index: 1;
  max-width: calc(100% - var(--video-photo) + 12%);
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: clamp(36px, 4.1vw, 56px);
  font-style: italic;
  font-weight: 800;
  line-height: .93;
  text-transform: uppercase;
}

.article-video-button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: var(--button-height);
  padding: 0 var(--space-5);
  background: linear-gradient(calc(90deg + atan(var(--slope))), var(--color-white) var(--sweep), var(--color-primary) var(--sweep));
  color: var(--color-dark);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  transition: --sweep .22s ease-in-out, color .22s ease-in-out;
}

.article-video img {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--video-photo);
  height: 100%;
  object-fit: cover;
  clip-path: polygon(var(--video-lean) 0, 100% 0, 100% 100%, 0 100%);
}

/* Blue texture over the photo, bottom right */
.article-video::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 234px;
  left: 72%;
  width: 317px;
  height: 164px;
  background: url(../img/ui/texture-blue.svg) no-repeat center / 100% 100%;
  pointer-events: none;
}

/* Light blue strip along the diagonal */
.article-video::after {
  content: '';
  position: absolute;
  top: 0;
  left: calc(100% - var(--video-photo));
  width: calc(var(--video-lean) + 28px);
  height: 100%;
  background: var(--color-primary);
  clip-path: polygon(var(--video-lean) 0, 100% 0, 28px 100%, 0 100%);
}

@media (hover: hover) {
  .article-video:hover .article-video-button {
    --sweep: 100%;
    color: var(--color-dark);
    transition: --sweep .36s ease-out, color .36s ease-out;
  }
}

/* Quote: dark box, blue diagonal panel with the quote mark.
   <blockquote><p>…</p><cite>— Name, Team</cite></blockquote> */
.article-news .article-view-body blockquote {
  position: relative;
  margin: var(--space-8) 0;
  padding: var(--space-8) var(--space-12) var(--space-8) 238px;
  overflow: hidden;
  background: var(--color-dark);
  color: var(--color-white);
}

.article-news .article-view-body blockquote::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 192px;
  /* Quote mark drawn as SVG: the design uses Anton's squared glyph */
  background: url(../img/ui/quote-mark.svg) 42px 51px / 65px auto no-repeat, var(--color-primary);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--lean, 43px)) 100%, 0 100%);
}

.article-news .article-view-body blockquote::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(192px - 11px - var(--lean, 43px));
  width: calc(11px + var(--lean, 43px));
  background: var(--color-primary-light);
  clip-path: polygon(calc(100% - 11px) 0, 100% 0, calc(100% - var(--lean, 43px)) 100%, 0 100%);
}

/* With the script (initQuoteLean) the lines lean with the panel's edge: a left float shaped like the panel
   (shape-outside) pushes every line the same distance from the diagonal, whatever the height */
@media (min-width: 768px) {
  .article-news .article-view-body blockquote.quote-lean {
    padding-left: 0;
  }

  .article-news .article-view-body blockquote.quote-lean > :first-child::before {
    content: '';
    float: left;
    width: 238px;
    height: var(--quote-content-h);
    shape-outside: polygon(0 0, calc(100% - var(--lean-top)) 0, calc(100% - var(--lean-bottom)) 100%, 0 100%);
  }
}

.article-news .article-view-body blockquote p {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: clamp(30px, 2.9vw, 40px);
  font-style: italic;
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
}

.article-news .article-view-body blockquote cite {
  display: block;
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: .7;
}

@media (min-width: 1100px) {
  /* Same container as the title and the photo: the column sits on the right,
     where the design has the contents rail */
  .article-news .article-view-body {
    margin-left: auto;
    margin-right: 0;
  }
}

@media (max-width: 1099px) {
  .article-news .article-view-body::before {
    display: none;
  }
}

@media (max-width: 767px) {
  /* Date on its own row, share buttons below it */
  .article-news .article-view-time {
    grid-column: 1 / -1;
  }

  .article-news .article-view-footer {
    grid-row: 4;
    grid-column: 1 / -1;
    margin-top: var(--space-3);
  }

  .article-news .article > header > figure,
  .article-news .article > header > .fotorama {
    grid-row: 5;
  }

  .article-news .article-view-body {
    grid-row: 6;
    line-height: 1.55;
  }

  .article-news .article-view-body blockquote {
    padding: calc(var(--quote-tab) + var(--space-6)) var(--space-5) var(--space-6);
  }

  /* Quote mark sits in a small slanted tab at the top left, with the light strip */
  .article-news .article-view-body blockquote {
    --quote-tab: 64px;
  }

  .article-news .article-view-body blockquote::before {
    width: 100px;
    height: var(--quote-tab);
    bottom: auto;
    background-position: 22px 19px;
    background-size: 39px auto;
    clip-path: polygon(0 0, 100% 0, calc(100% - 15px) 100%, 0 100%);
  }

  .article-news .article-view-body blockquote::after {
    top: 0;
    bottom: auto;
    left: 74px;
    width: 26px;
    height: var(--quote-tab);
    clip-path: polygon(calc(100% - 11px) 0, 100% 0, calc(100% - 15px) 100%, calc(100% - 26px) 100%);
  }

  .article-video {
    padding: var(--space-6);
  }

  .article-video-title {
    max-width: 100%;
  }

  .article-video img,
  .article-video::before,
  .article-video::after {
    display: none;
  }

  .article-news::before {
    display: none;
  }
}

/* ---------- Social follow ---------- */
.social-networks {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.social-networks p {
  font-size: var(--font-size-lg);
  font-weight: 600;
  line-height: 1.2;
}


/* ---------- Article page + related list (The race, About, Careers) ----------
   Row .primary-related: zone 1 holds the article (CMS class article-page,
   same typography as a news article), zone 2 the list of related pages
   (CMS class submenu-list). */
.primary-related {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  column-gap: var(--space-12);
  align-items: start;
  max-width: calc(1024px + 340px + var(--space-12) + 3 * var(--gutter));  /* article (1024px + its gutters) + list + right padding */
  margin-inline: auto;
  padding-right: var(--gutter);
}

.primary-related > .zone-2 {
  align-self: stretch;  /* full row height, so the list can stay pinned while the article scrolls */
}

.primary-related > .zone-2 > .widget {
  position: sticky;
  top: calc(var(--header-row1) + var(--header-row2) + var(--space-6));
  margin-block: var(--section-padding);
}

.article-page .article-view-subheader,
.article-news .article-view-subheader {
  display: block;
  margin-bottom: var(--space-4);
  font-size: clamp(20px, 1.9vw, 24px);
  line-height: 1.38;
}

/* Same frame as .article-news: 1024px, centred in the page */
.article-page .article {
  max-width: 1024px;
  margin-inline: auto;
}

/* Lead photo (plain Article widget, e.g. legends and boats): same frame as the news photo */
.article-page .article > header > figure {
  margin-block: var(--space-8) var(--space-8);
}

.article-page .article-view-header-img {
  width: 100%;
  height: auto;
}

.article-page .article-view-intro {
  margin-bottom: var(--space-6);
  font-size: clamp(20px, 1.9vw, 24px);
  line-height: 1.38;
}

.article-page .article-view-body {
  max-width: 1024px;
  font-size: clamp(18px, 1.46vw, 20px);
  line-height: 1.6;
}

.submenu-list {
  padding: var(--space-8);
  background: var(--color-bg-subtle);
  border-top: 4px solid var(--color-primary);
}

.submenu-list .widget-title {
  margin-bottom: var(--space-5);
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: clamp(32px, 2.9vw, 40px);
  font-style: italic;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.submenu-list .more-items-item {
  padding: 0;
  background: none;
  border-top: 1px solid var(--color-gray-light);
}

.submenu-list .more-items-item .wrapper {
  padding: 0;
}

.submenu-list .more-items-item h2 {
  font-size: var(--font-size-sm);
  line-height: 20px;
  text-transform: uppercase;
}

.submenu-list .more-items-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  transition: color .2s ease;
}

.submenu-list .more-items-title::before {
  content: '\ea6e';  /* ri-arrow-right-line */
  order: 1;
  font-family: 'remixicon';
  font-size: var(--font-size-lg);
  color: var(--color-primary);
  transition: transform .2s ease;
}

.submenu-list .more-items-title:hover {
  color: var(--color-primary);
}

.submenu-list .more-items-title:hover::before {
  transform: translateX(4px);
}

@media (max-width: 1024px) {
  .primary-related {
    grid-template-columns: minmax(0, 1fr);
    padding-right: 0;
  }

  .primary-related > .zone-2 > .widget {
    position: static;
    margin: var(--space-8) var(--container-inset);
  }
}

/* ---------- Partners ----------
   .partner-logos (More Items of logos): the whole logo is shown (contain) in a
   fixed-height cell; the first widget has the big logos, the next ones are smaller.
   .partner-page (with .article-page): the logo sits to the right of the title,
   after a slanted line. */
/* Logos are left-aligned with the title */
.partner-logos {
  --logo-h: 120px;
}

.partner-logos ~ .partner-logos {
  --logo-h: 80px;
}

/* No wider than 1440px */
#main .zone-1 > .widget.partner-logos:not(.top-stories-wrapper):not(.md-modal) {
  padding-inline: max(var(--gutter), calc((100% - 1440px) / 2));
}

.partner-logos .more-items-item > a:first-child:has(> img) {
  aspect-ratio: auto;
  height: var(--logo-h);
  padding-right: var(--space-6);
}

/* More air under the title and between the rows of logos */
.widget.partner-logos:has(> .widget-title) > .widget-title {
  margin-bottom: var(--space-12);
}

.partner-logos .more-items-list {
  row-gap: var(--space-8);
}

/* The title is empty: its box would only add space under the logo */
.partner-logos .more-items-item .wrapper {
  display: none;
}

.partner-logos .more-items-img {
  object-fit: contain;
  object-position: left center;
}

.partner-page .article > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}

.partner-page .article-view-title {
  margin-bottom: 0;
}

.partner-page .article > header > figure {
  position: relative;
  flex: 0 0 auto;
  width: clamp(180px, 22vw, 280px);
  padding-left: var(--space-8);
}

.partner-page .article > header > figure::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--space-4));
  bottom: calc(-1 * var(--space-4));
  left: 0;
  width: 1px;
  background: var(--color-gray-light);
  transform: skewX(calc(-1 * atan(var(--slope))));
}

.partner-page .article-view-body figure {
  float: none;
  width: 100%;
  max-width: none;
  margin: 0 0 var(--space-6);
}

.partner-page .article-view-body figure img {
  width: 100%;
  height: auto;
}

.partner-page .article-view-header-img {
  max-height: 120px;
  object-fit: contain;
  object-position: left center;
}

@media (max-width: 1024px) {
  /* Two columns: logos centred in their cell */
  .partner-logos .more-items-img {
    object-position: center;
  }

  .partner-logos .more-items-item > a:first-child:has(> img) {
    padding-inline: var(--space-3);
  }
}

@media (max-width: 767px) {
  /* Always two columns, as the footer logos */
  .partner-logos .more-items-list {
    --cols: 2;
  }

  /* The cell width limits the logo: first row fills it, the next ones are 73% of it
     (same proportion as the footer logos, 167px / 121px) */
  .partner-logos {
    --logo-h: 110px;
  }

  .partner-logos ~ .partner-logos {
    --logo-h: 80px;
  }

  .partner-logos .more-items-item > a:first-child:has(> img) {
    padding-inline: 0;
  }

  .partner-logos ~ .partner-logos .more-items-img {
    width: 73%;
    margin-inline: auto;
  }

  .partner-page .article > header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
  }

  .partner-page .article > header > figure {
    width: 160px;
    padding-left: 0;
  }

  .partner-page .article > header > figure::before {
    display: none;
  }
}

/* ---------- Newsletter signup ----------
   Registration form (platform sign-up widget) on a blue panel next to a photo,
   in the /newsletter page and in the home overlay (#modal-newsletter, the platform's
   .md-modal markup: header with close button, content, "Don't show me again"). */
.md-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 99999;
  width: 70%;
  min-width: 320px;
  max-width: 630px;
  visibility: hidden;
  transform: translate(-50%, -50%);
}

.md-show {
  visibility: visible;
}

.md-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  visibility: hidden;
  opacity: 0;
  background: rgb(33 33 33 / .8);
  transition: opacity .3s ease, visibility .3s ease;
}

.md-show ~ .md-overlay {
  visibility: visible;
  opacity: 1;
}

.md-content {
  position: relative;
  margin-inline: auto;
  background: var(--color-white);
}

.md-effect-3 .md-content {
  opacity: 0;
  transform: translateY(20%);
  transition: opacity .3s ease, transform .3s ease;
}

.md-show.md-effect-3 .md-content {
  opacity: 1;
  transform: none;
}

.md-header {
  display: flex;
  justify-content: flex-end;
}

.md-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--color-dark);
  color: var(--color-white);
  cursor: pointer;
}

.md-close i::before {
  content: '\eb99';  /* ri-close-line */
  font-family: 'remixicon';
  font-size: 24px;
  font-style: normal;
}

#modal-newsletter {
  width: min(100% - 2 * var(--gutter), 1100px);
  max-width: none;
  max-height: 95svh;
  overflow: auto;
}

#modal-newsletter .md-header {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);  /* same distance to the top and to the right */
  z-index: 5;
  height: auto;
  padding: 0;
}

/* "Don't show me again": on the blue panel, on the Send row */
#modal-newsletter .controls.dontshow {
  position: absolute;
  bottom: calc(var(--space-12) + var(--space-3));
  left: var(--space-12);
  padding: 0;
}

.md-noshow {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-white);
  cursor: pointer;
}

.md-noshow:hover {
  text-decoration: underline;
}

/* Panel + photo */
#form-newsletter-home {
  display: flex;
  align-items: stretch;
  max-width: 1100px;
  margin-inline: auto;
  padding: 0;
}

/* Without the photo (the /newsletter page) the blue fills the width and the form sits in the middle */
#form-newsletter-home:not(:has(.sign-up-image)) {
  --page-bg: var(--color-primary-80);  /* softer blue (official tint) */
  --form-w: clamp(600px, 41.7vw, 880px);  /* 600px at about 1440px, growing up to 880px on wide screens */
  --photo-gap: var(--space-6);
  position: relative;
  overflow: hidden;
  max-width: none;
  align-items: center;
  justify-content: center;
  /* fixed height: the section is a size container, so the slanted edges can use its height (cqh) */
  height: max(calc(100svh - var(--header-height, 122px)), 800px);
  container-type: size;
  background: var(--page-bg);
}

/* No vertical padding: cqh is then the full height and the angle is exact (the id beats the
   generic padding of top-level widgets) */
#main #form-newsletter-home:not(:has(.sign-up-image)) {
  padding: 0 var(--gutter);
}

#form-newsletter-home:not(:has(.sign-up-image)) #sign-up-overlay {
  --field-bg: var(--color-primary);  /* on the soft blue page, the base blue */
  position: relative;
  z-index: 1;
  flex: 0 1 var(--form-w);
  padding: var(--space-12) 0;
  background: transparent;
}

/* Background photos left and right of the form, reaching the edges of the page, with the
   slanted edge towards the form (--slope over the height of the section: always the same angle). The images are
   img/ui/newsletter-left.jpg and newsletter-right.jpg; until they exist a light tint shows the shape. */
#form-newsletter-home:not(:has(.sign-up-image))::before,
#form-newsletter-home:not(:has(.sign-up-image))::after {
  --shift: calc(var(--slope) * 100cqh);  /* the same angle whatever the height */
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc((100% - var(--form-w)) / 2 - var(--photo-gap));
  background-color: var(--color-primary-60);
  background-position: center;
  background-size: cover;
}

#form-newsletter-home:not(:has(.sign-up-image))::before {
  left: 0;
  background-image: url(../img/ui/newsletter-left.webp);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--shift)) 100%, 0 100%);
}

#form-newsletter-home:not(:has(.sign-up-image))::after {
  right: 0;
  background-image: url(../img/ui/newsletter-right.webp);
  clip-path: polygon(var(--shift) 0, 100% 0, 100% 100%, 0 100%);
}

@media (max-width: 1100px) {
  #form-newsletter-home:not(:has(.sign-up-image))::before,
  #form-newsletter-home:not(:has(.sign-up-image))::after {
    display: none;
  }
}

#form-newsletter-home:not(:has(.sign-up-image)) .separator large {
  font-size: clamp(44px, 5vw, 80px);
}

#sign-up-overlay {
  --field-bg: var(--color-primary-80);  /* fields and checkboxes: one official step lighter than the panel */
  flex: 1 1 57%;
  min-width: 0;
  padding: var(--space-12) var(--space-12);
  background: var(--color-primary);
  color: var(--color-white);
}

.sign-up-image {
  position: relative;
  flex: 0 0 43%;
  overflow: hidden;
  padding: 0;
}

/* The photo's left edge leans like every diagonal of the site (--slope: run over height);
   the cut-away corner shows the blue of the content behind it */
#modal-newsletter .md-content {
  background: var(--color-primary);
}

.sign-up-image {
  container-type: size;
}

/* Dots on the photo's slanted edge, at the top: centred on the line, half over the photo and half over the blue */
.sign-up-image {
  overflow: visible;
}

.sign-up-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(100cqh * var(--slope));  /* the edge's x at the top */
  z-index: 2;
  height: calc(var(--space-12) + 1.8 * clamp(40px, 4.2vw, 60px));  /* down to the base of the title: panel padding + two title lines */
  aspect-ratio: 252 / 104;
  transform: translateX(-50%);
  background: url(../img/ui/promo-dots-white.svg) center / contain no-repeat;
  pointer-events: none;
}

/* (the clip is on the list: a container's own clip-path cannot use its own cqh) */
.sign-up-image > .more-items-list {
  clip-path: polygon(calc(100cqh * var(--slope)) 0, 100% 0, 100% 100%, 0 100%);
}

.sign-up-image .more-items-list,
.sign-up-image .more-items-item,
.sign-up-image .more-items-item > a:first-child:has(> img) {
  height: 100%;
  aspect-ratio: auto;
}

.sign-up-image .more-items-item > a {
  pointer-events: none;
}

.sign-up-image .wrapper,
.sign-up-image .ov-content,
.sign-up-image .modal-overlay {
  display: none;
}

/* Form */
#sign-up-overlay .formly {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

#sign-up-overlay .formly > div {
  width: 100%;
}

#sign-up-overlay .formly .firstname,
#sign-up-overlay .formly .lastname {
  width: calc(50% - var(--space-2));
}

#sign-up-overlay .separator {
  margin-bottom: var(--space-2);
}

#sign-up-overlay .separator large {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: clamp(40px, 4.2vw, 60px);
  font-style: italic;
  font-weight: 800;
  line-height: .9;
  text-transform: uppercase;
}

/* Part of the title in the dark colour (span.accent in the form's label) */
#sign-up-overlay .separator large .accent {
  display: block;  /* on its own line */
  color: var(--color-dark);
}

#sign-up-overlay .separator > span {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--font-size-lg);
  font-weight: 800;
  text-transform: uppercase;
}

#sign-up-overlay .separator small {
  font-size: var(--font-size-md);
  font-weight: 500;
}

#sign-up-overlay .form-group,
#sign-up-overlay .controls {
  width: 100%;
  padding: 0;
}

#sign-up-overlay input[type='text'],
#sign-up-overlay input[type='email'],
#sign-up-overlay select {
  width: 100%;
  height: 48px;
  padding: 0 var(--space-4);
  border: 2px solid transparent;
  border-radius: 0;
  background: var(--field-bg);
  color: var(--color-white);
  font: inherit;
  font-size: var(--font-size-sm);
}

#sign-up-overlay input::placeholder {
  color: var(--color-white);
  font-weight: 600;
  text-transform: uppercase;
}

#sign-up-overlay input:focus,
#sign-up-overlay select:focus {
  border-color: var(--color-white);
  outline: 0;
}

#sign-up-overlay select {
  padding-right: var(--space-12);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 13.17l4.95-4.95 1.41 1.41L12 16l-6.36-6.36 1.41-1.41z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 24px;
}

#sign-up-overlay select option {
  background: var(--color-white);
  color: var(--color-dark);
}

#sign-up-overlay .control-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
}

#sign-up-overlay .control-label *,
#sign-up-overlay .checkbox label * {
  display: inline;
}

#sign-up-overlay .has-error input,
#sign-up-overlay .has-error select {
  border-color: var(--color-white);
}

/* Round checkboxes */
#sign-up-overlay .checkbox label {
  position: relative;
  display: block;
  padding-left: 32px;
  font-size: var(--font-size-xs);
  line-height: 1.4;
  text-transform: uppercase;
  cursor: pointer;
}

#sign-up-overlay .checkbox label::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--field-bg);
}

#sign-up-overlay .checkbox input[type='checkbox'] {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 18px;
  height: 18px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

#sign-up-overlay .checkbox label:has(input:checked)::before {
  background: var(--color-white);
}

#sign-up-overlay .checkbox label:has(input:checked)::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 6px;
  width: 5px;
  height: 10px;
  border: solid var(--color-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

#sign-up-overlay .checkbox a {
  color: var(--color-white);
  text-decoration: underline;
}

#sign-up-overlay .agree {
  margin-top: var(--space-4);
}

/* Send */
#sign-up-overlay .form-buttons {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

#sign-up-overlay .form-buttons .btn {
  --button-bg: var(--color-dark);
  --button-text: var(--color-white);
  --button-alt-bg: var(--color-white);
  --button-alt-text: var(--color-dark);
  width: var(--send-w);
  padding-inline: 0;
  border: 0;
  cursor: pointer;
}

/* "Please fill in all mandatory fields": out of the flow (it used to push the form around),
   to the left of Send */
#sign-up-overlay .form-buttons {
  --send-w: 160px;
}

#sign-up-overlay .form-buttons .tooltip {
  position: absolute;
  top: 50% !important;
  right: calc(var(--send-w) + var(--space-4));
  left: auto !important;
  z-index: 5;
  padding: var(--space-2) var(--space-3);
  background: var(--color-dark);
  color: var(--color-white);
  font-size: var(--font-size-xs);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity .2s ease;
}

#sign-up-overlay .form-buttons .tooltip.in {
  opacity: 1;
}

#sign-up-overlay .form-buttons .tooltip-arrow {
  display: none;
}

#sign-up-overlay .form-buttons .btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* The summary of missing fields: the fields show their own error state */
#sign-up-overlay .formly-error {
  display: none;
}

@media (max-width: 767px) {
  #form-newsletter-home {
    flex-direction: column;
  }

  #sign-up-overlay {
    padding: var(--space-8) var(--space-5);
  }

  #modal-newsletter .controls.dontshow {
    position: static;
    padding: var(--space-4) var(--space-5) var(--space-6);
  }

  #sign-up-overlay .formly .firstname,
  #sign-up-overlay .formly .lastname {
    width: 100%;
  }

  #sign-up-overlay .form-buttons {
    --send-w: 100%;
  }

  #sign-up-overlay .form-buttons > span {
    display: block;
    width: 100%;
  }

  #sign-up-overlay .form-buttons .tooltip {
    top: auto !important;
    right: 0;
    bottom: calc(100% + var(--space-2));
    transform: none;
  }

  .sign-up-image {
    display: none;
  }
}

/* ---------- Photo gallery (CMS class gallery-view) ----------
   Platform markup: section#gallery > article > .media-info (header,
   ul#galleries-view toggle; the share footer is hidden) + .media-container > #tabs-gal1 (Fotorama
   slides) and #tabs-gal2 (#photoMosaic, isotope grid). The controller
   (angular/domains/tor2027/custom3Controller.js) switches the two views and
   fills .slide-meta (caption + counter). Slide rules hang from .fotorama1, not
   .gallery-view: in fullscreen Fotorama takes the player out of the widget. */
.gallery-view .article {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--space-6);
  align-items: start;
}

/* Photos on the left; title and view toggle stay pinned on the right while scrolling */
.gallery-view .media-container {
  grid-column: 1;
  grid-row: 1;
}

.gallery-view .media-info {
  position: sticky;
  top: calc(var(--header-row1) + var(--header-row2) + var(--space-6));
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}

.gallery-view .media-info > header {
  display: block;
}

html[lang="es"] .gallery-view .media-info > header::before { content: 'GALERÍA DE FOTOS'; }
html[lang="fr"] .gallery-view .media-info > header::before { content: 'GALERIE PHOTO'; }
html[lang="it"] .gallery-view .media-info > header::before { content: 'GALLERIA FOTOGRAFICA'; }

.gallery-view .media-info > header::before {
  content: 'PHOTO GALLERY';
  display: block;
  margin-bottom: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 20px;
}

.gallery-view .article-view-subheader {
  display: block;
  margin-top: var(--space-4);
  font-size: var(--font-size-md);
  line-height: 24px;
}

.gallery-view .article-view-title {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: clamp(40px, 4.4vw, 60px);
  font-style: italic;
  font-weight: 800;
  line-height: .9;
  text-transform: uppercase;
  color: var(--widget-text);
}

.gallery-view .article-view-subheader:empty,
.gallery-view .slide-content,
.gallery-view .bt-favorite,
.gallery-view .media-info > .article-view-footer {
  display: none;
}

/* View toggle: MOSAIC | SLIDES, two slanted tabs */
.gallery-view #galleries-view {
  display: flex;
  gap: 0;
}

.gallery-view #galleries-view li a {
  display: block;
  padding: 14px 28px;
  --tab-base: var(--color-gray-lighter);
  --tab-fill: var(--color-primary);
  background: linear-gradient(calc(90deg + atan(var(--slope))), var(--tab-fill) var(--sweep), var(--tab-base) var(--sweep));
  color: var(--color-dark);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 20px;
  text-transform: uppercase;
  transition: --sweep .22s ease-in-out, color .22s ease-in-out;
}

.gallery-view #galleries-view li a i {
  display: none;
}

.gallery-view #galleries-view li:first-child a::after {
  content: 'MOSAIC';
}

.gallery-view #galleries-view li:last-child a::after {
  content: 'SLIDES';
}

html[lang="es"] .gallery-view #galleries-view li:first-child a::after { content: 'MOSAICO'; }
html[lang="fr"] .gallery-view #galleries-view li:first-child a::after { content: 'MOSAÏQUE'; }
html[lang="it"] .gallery-view #galleries-view li:first-child a::after { content: 'MOSAICO'; }
html[lang="es"] .gallery-view #galleries-view li:last-child a::after { content: 'DIAPOSITIVAS'; }
html[lang="fr"] .gallery-view #galleries-view li:last-child a::after { content: 'DIAPORAMA'; }
html[lang="it"] .gallery-view #galleries-view li:last-child a::after { content: 'SLIDE'; }

.gallery-view #galleries-view li:first-child a {
  padding-right: 31px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}

.gallery-view #galleries-view li:last-child {
  margin-left: -12px;
}

.gallery-view #galleries-view li:last-child a {
  padding-left: 36px;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%);
}

.gallery-view #galleries-view li.active a {
  --tab-base: var(--color-primary);
  --tab-fill: var(--color-dark);
}

/* Hover on the inactive tab: the slanted sweep from grey to blue. The active tab does not react */
@media (hover: hover) {
  .gallery-view #galleries-view li:not(.active) a:hover {
    --sweep: 100%;
    transition: --sweep .36s ease-out, color .36s ease-out;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-view #galleries-view li a {
    transition-duration: 0s;
  }
}

/* Mosaic: 3 columns, each photo at its own ratio (isotope lays them out) */
.gallery-view .photo-mosaic {
  margin: 0 calc(-1 * var(--space-2));
}

.gallery-view .photo-mosaic .item {
  width: 33.333%;
  padding: 0 var(--space-2) var(--space-4);
  cursor: pointer;
}

.gallery-view .photo-mosaic .item img {
  display: block;
  width: 100%;
  height: auto;
}

.gallery-view .load-more-bt {
  --sweep-bg: var(--button-alt-bg);
  --sweep-text: var(--button-alt-text);
  margin-top: var(--space-6);
  background: var(--color-primary);
  color: var(--color-dark);
}

.gallery-view .load-more-bt:hover {
  color: var(--sweep-text);
}

.gallery-view .load-more-bt i {
  display: none;
}

/* Slides: 640px stage, square arrows, caption + counter, thumbnail strip */
.fotorama1,
.article-news .fotorama,
.article-page .fotorama {
  --stage-arrow: 64px;
}

.fotorama1 .fotorama__stage {
  background: var(--color-gray-lighter);
}

.fotorama1 .fotorama__arr,
.article-news .fotorama .fotorama__arr,
.article-page .fotorama .fotorama__arr {
  top: 50%;
  width: var(--stage-arrow);
  height: var(--stage-arrow);
  margin-top: calc(var(--stage-arrow) / -2);
  background: var(--color-primary);
  opacity: 1;
}

.fotorama1 .fotorama__arr--prev,
.article-news .fotorama .fotorama__arr--prev,
.article-page .fotorama .fotorama__arr--prev {
  left: var(--space-6);
}

.fotorama1 .fotorama__arr--next,
.article-news .fotorama .fotorama__arr--next,
.article-page .fotorama .fotorama__arr--next {
  right: var(--space-6);
}

.fotorama1 .fotorama__arr::before,
.article-news .fotorama .fotorama__arr::before,
.article-page .fotorama .fotorama__arr::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border: solid var(--color-dark);
  border-width: 2px 2px 0 0;
  transform: translate(-70%, -50%) rotate(45deg);
}

.fotorama1 .fotorama__arr--prev::before,
.article-news .fotorama .fotorama__arr--prev::before,
.article-page .fotorama .fotorama__arr--prev::before {
  transform: translate(-30%, -50%) rotate(-135deg);
}

.fotorama1 .fotorama__html .slide-content {
  display: none;
}

/* Stage, then caption + counter, then the thumbnail strip */
.fotorama1 .fotorama__wrap {
  display: flex;
  flex-direction: column;
}

.fotorama1 .slide-meta {
  order: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  height: 64px;  /* room for a two-line caption + credit, so it never jumps between photos */
  margin: var(--space-6) 0 var(--space-4);
}

.fotorama1 .fotorama__nav-wrap {
  order: 2;
}

.fotorama1 .slide-caption {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.fotorama1 .slide-caption .title,
.fotorama1 .slide-caption .owner {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fotorama1 .slide-caption .title {
  -webkit-line-clamp: 2;
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 20px;
  text-transform: uppercase;
}

.fotorama1 .slide-caption .owner {
  -webkit-line-clamp: 1;
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 18px;
  text-transform: uppercase;
  color: var(--color-gray);
}

.fotorama1 .slide-counter {
  flex-shrink: 0;
  padding-right: var(--space-1);  /* the italic glyphs overhang and the player clips them */
  white-space: nowrap;
  display: flex;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: 28px;
  font-style: italic;
  font-weight: 800;
  line-height: 30px;
}

.fotorama1 .slide-counter .current {
  color: var(--color-primary);
}

.fotorama1 .slide-counter .total {
  color: var(--color-gray);
}

/* Fullscreen: caption + counter sit over the bottom of the stage, on a dark
   gradient, because the stage takes the whole viewport above the thumbnails */
.fotorama1.fotorama--fullscreen .slide-meta {
  position: absolute;
  right: 0;
  bottom: 114px;  /* thumbnail strip: 90px + 24px */
  left: 0;
  z-index: 10;
  height: auto;
  margin: 0;
  padding: var(--space-12) var(--space-6) var(--space-4);
  background: linear-gradient(transparent, rgb(33 33 33 / .7));
  color: var(--color-white);
  pointer-events: none;
}

.fotorama1.fotorama--fullscreen .slide-caption .title {
  color: var(--color-white);
}

.fotorama1.fotorama--fullscreen .fotorama__stage {
  background: var(--color-dark);
}

.fotorama1.fotorama--fullscreen .slide-counter .total {
  color: var(--color-white);
}

.fotorama1.fotorama--fullscreen .slide-caption .owner {
  color: var(--color-gray-light);
}

/* Fullscreen toggle: remixicon on a square blue tile, like the arrows */
.fotorama1 .fotorama__fullscreen-icon,
.article-news .fotorama .fotorama__fullscreen-icon,
.article-page .fotorama .fotorama__fullscreen-icon {
  width: 44px;
  height: 44px;
  top: var(--space-4);
  right: var(--space-4);
  background: var(--color-primary);
  opacity: 1;
}

.fotorama1 .fotorama__fullscreen-icon::before,
.article-news .fotorama .fotorama__fullscreen-icon::before,
.article-page .fotorama .fotorama__fullscreen-icon::before {
  content: '\ed9c';  /* ri-fullscreen-line */
  display: grid;
  place-items: center;
  height: 100%;
  font-family: 'remixicon';
  font-size: var(--font-size-lg);
  color: var(--color-dark);
}

.fotorama1.fotorama--fullscreen .fotorama__fullscreen-icon::before,
.article-news .fotorama.fotorama--fullscreen .fotorama__fullscreen-icon::before,
.article-page .fotorama.fotorama--fullscreen .fotorama__fullscreen-icon::before {
  content: '\ed9a';  /* ri-fullscreen-exit-line */
}

/* Controls hidden by fotorama (idle/no-controls): the slide-out offsets are sized
   for its 32px sprite, so our larger tiles must be hidden outright */
.fotorama1 .fotorama__wrap--no-controls .fotorama__arr:not(:focus),
.fotorama1 .fotorama__wrap--no-controls .fotorama__fullscreen-icon:not(:focus),
.article-news .fotorama .fotorama__wrap--no-controls .fotorama__arr:not(:focus),
.article-page .fotorama .fotorama__wrap--no-controls .fotorama__arr:not(:focus),
.article-news .fotorama .fotorama__wrap--no-controls .fotorama__fullscreen-icon:not(:focus),
.article-page .fotorama .fotorama__wrap--no-controls .fotorama__fullscreen-icon:not(:focus) {
  opacity: 0;
  visibility: hidden;
}

.fotorama1 .fotorama__nav__frame {
  padding: 0 var(--space-3) 0 0;
}

.fotorama1 .fotorama__nav__frame .fotorama__thumb {
  opacity: .55;
  transition: opacity .2s ease;
}

.fotorama1 .fotorama__nav__frame.fotorama__active .fotorama__thumb,
.fotorama1 .fotorama__nav__frame:hover .fotorama__thumb {
  opacity: 1;
}

.fotorama1 .fotorama__thumb-border {
  border-color: var(--color-primary);
}

@media (max-width: 1024px) {
  .gallery-view .article {
    grid-template-columns: minmax(0, 1fr);
  }

  .gallery-view .media-container,
  .gallery-view .media-info {
    grid-column: 1;
  }

  .gallery-view .media-info {
    position: static;
    grid-row: 1;
  }

  .gallery-view .media-container {
    grid-row: 2;
  }
}

@media (max-width: 767px) {
  .gallery-view #galleries-view li a {
    padding: 10px 20px;
    font-size: var(--font-size-xs);
    line-height: 16px;
  }

  .gallery-view #galleries-view li:first-child a {
    padding-right: 24px;
  }

  .gallery-view #galleries-view li:last-child a {
    padding-left: 28px;
  }

  .gallery-view .photo-mosaic .item {
    width: 50%;
  }

  .fotorama1,
  .article-news .fotorama,
  .article-page .fotorama {
    --stage-arrow: 44px;
  }

  .fotorama1 .fotorama__arr--prev,
  .article-news .fotorama .fotorama__arr--prev,
  .article-page .fotorama .fotorama__arr--prev {
    left: var(--space-2);
  }

  .fotorama1 .fotorama__arr--next,
  .article-news .fotorama .fotorama__arr--next,
  .article-page .fotorama .fotorama__arr--next {
    right: var(--space-2);
  }
}

/* ---------- Round the World 2027 page (body class rtw) ----------
   Masthead: intro on the left, video on the right with a slanted left edge.
   Overview: blue band with the short text and the key figure.
   Route: map + numbered list of stopovers. */
/* Same vertical padding as the home top stories */
#main .zone-1 > .widget.rtw-masthead:not(.top-stories-wrapper):not(.md-modal) {
  padding-block: var(--space-5);
}

.rtw-masthead {
  --rtw-skew: calc(var(--slope) * 56.25%);  /* the site slope over the 16:9 video height, as a share of its width */
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, 31%) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-4);
}

.rtw-intro .more-items-category {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--color-white);
}

.rtw-intro .more-items-text {
  margin-top: var(--space-6);
  font-size: clamp(18px, 1.46vw, 20px);
  line-height: 1.5;
}

.rtw-intro .more-items-item {
  background: none;
}

.rtw-intro .more-items-title {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: clamp(52px, 5vw, 76px);
  font-style: italic;
  font-weight: 800;
  line-height: .9;
  text-transform: uppercase;
  color: var(--color-primary);
}

.rtw-video {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  clip-path: polygon(var(--rtw-skew) 0, 100% 0, 100% 100%, 0 100%);
}

.rtw-video .article,
.rtw-video .article > header,
.rtw-video .fotorama {
  height: 100%;
}

/* When the video is stopped, the round play button becomes a "Watch again" tab
   (same idea as the WATCH tab of the video cards) at the bottom right */
.rtw-video .fotorama__stage .fotorama__video-play {
  --watch-height: 56px;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: none;
}

.rtw-video .fotorama__stage .fotorama__video-play::before {
  content: '\f00a  WATCH AGAIN'; /* ri-play-fill */
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  height: var(--watch-height);
  padding: 0 calc(var(--watch-height) * .43) 0 calc(var(--watch-height) * .77);
  background: var(--color-primary);
  color: var(--color-dark);
  font-family: 'remixicon', var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 600;
  white-space: pre;
  clip-path: polygon(calc(var(--watch-height) * var(--slope)) 0, 100% 0, 100% 100%, 0 100%);
}

/* The video takes the whole frame and has no close button */
.rtw-video .fotorama__video {
  top: 0;
}

/* No hover UI of the player either: the video is only a background */
.rtw-video .fotorama__video iframe {
  pointer-events: none;
}

.rtw-video .fotorama__video-close {
  display: none !important;
}

/* ---------- Race overview (Figma 445:234) ----------
   Blue block: title, the two paragraphs and the key figure (17 JAN) beside them; always open. Then the
   light block with the four route legs, and the grey sustainability block with the noticeboard button.
   The widgets of the blue block (summary, intro) are children of .rtw-ov-route, whose grid takes
   their pieces through display: contents. */
#main .zone-1 > .widget.rtw-ov-route:not(.top-stories-wrapper):not(.md-modal) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 401px);
  column-gap: var(--space-6);
  align-items: start;
  padding: var(--space-12) var(--container-inset);
}

.rtw-ov-route > .rtw-overview,
.rtw-ov-route > .rtw-overview .more-items-list,
.rtw-ov-route > .rtw-overview .more-items-item,
.rtw-ov-route > .rtw-overview .wrapper,
.rtw-ov-route > .rtw-ov-intro,
.rtw-ov-route > .rtw-ov-intro .more-items-list,
.rtw-ov-route > .rtw-ov-intro .more-items-item,
.rtw-ov-route > .rtw-ov-intro .wrapper {
  display: contents;
}

/* Title */
.rtw-ov-intro h2 {
  grid-column: 1;
  grid-row: 1;
  margin: 0 0 13px;
}

/* The two paragraphs run on (summary, then the long text) */
.rtw-overview .more-items-text {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: 28px;
}

.rtw-ov-intro .more-items-text {
  grid-column: 1;
  grid-row: 3;
  margin: 0;
}

/* Key figure and its label, one block centred vertically against the two paragraphs: both sit in the
   same cell, each shifted by half of the other one's height */
.rtw-overview {
  --fig-size: clamp(64px, 7vw, 96px);
  --fig-h: calc(var(--fig-size) * .94);
  --label-h: 18px;
  --label-gap: 8px;
}

.rtw-overview h2,
.rtw-overview .more-items-category {
  grid-column: 2;
  grid-row: 2 / span 2;
  align-self: center;
  justify-self: start;
  margin: 0 0 0 calc((401px - 2.05 * var(--fig-size)) / 2);
}

.rtw-overview h2 {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: var(--fig-size);
  font-style: italic;
  font-weight: 800;
  line-height: .94;
  white-space: nowrap;
  color: var(--widget-accent);
  transform: translateY(calc(-1 * (var(--label-h) + var(--label-gap)) / 2));
}

.rtw-overview .more-items-category {
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: var(--label-h);
  text-transform: uppercase;
  transform: translateY(calc((var(--fig-h) + var(--label-gap)) / 2));
}

.rtw-overview .more-items-title {
  pointer-events: none;
  cursor: default;
}

/* Read more is gone: everything is always visible */
.rtw-overview .link-button {
  display: none;
}

.rtw-ov-intro .more-items-title {
  color: inherit;
  pointer-events: none;
  cursor: default;
}

.rtw-ov-intro h2,
.rtw-ov-sustain h2 {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: clamp(32px, 2.9vw, 40px);
  font-style: italic;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--widget-accent);
}

.rtw-ov-intro .more-items-text {
  max-width: none;
  font-size: var(--font-size-lg);
  line-height: 28px;
}

/* Route legs: their own light block under the blue one */
#main .zone-1 > .widget.rtw-ov-legs:not(.top-stories-wrapper):not(.md-modal) {
  padding: var(--space-12) var(--container-inset);
}

/* Four columns whose text and divider follow the site slope: each column is a block
   with a full-height float (shape-outside, same resource as the home) and a slanted
   line drawn with a clipped pseudo-element */
.rtw-ov-legs .more-items-list {
  display: flex;
  gap: var(--space-6);
  padding: 0;
}

.rtw-ov-legs .more-items-item {
  --slant: 32px;     /* horizontal run of the diagonal over the column height */
  --text-gap: 28px;  /* constant distance between text and the line */
  --leg-pad: 40px;
  position: relative;
  display: block;
  flex: 1 1 0;
  min-width: 0;
  padding-bottom: var(--leg-pad);  /* room for the extra line the diagonal can add: the float is as tall as the padded column */
  background: none;
}

.rtw-ov-legs .more-items-item::before {
  content: '';
  float: left;
  width: calc(var(--slant) + var(--text-gap));
  height: calc(100% + var(--leg-pad));
  shape-outside: polygon(0 0, 100% 0, var(--text-gap) 100%, 0 100%);
}

/* The first column sits flush left: no diagonal beside it */
.rtw-ov-legs .more-items-item:first-child::before {
  display: none;
}

.rtw-ov-legs .more-items-item + .more-items-item::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--slant);
  background: var(--color-primary-40);
  clip-path: polygon(calc(var(--slant) - 2px) 0, var(--slant) 0, 2px 100%, 0 100%);
}

.rtw-ov-legs .wrapper {
  display: block;
  padding: 0;
}

.rtw-ov-legs .more-items-category {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: clamp(30px, 2.65vw, 40px);
  font-style: italic;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--widget-accent);
}

.rtw-ov-legs .more-items-subsection {
  display: block;
  margin-bottom: var(--space-8);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 18px;
  text-transform: uppercase;
  color: var(--widget-text);
}

.rtw-ov-legs h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-xl, 20px);
  font-weight: 600;
  line-height: 26px;
}

.rtw-ov-legs .more-items-title {
  pointer-events: none;
  cursor: default;
}

.rtw-ov-legs .more-items-text {
  font-size: var(--font-size-md);
  line-height: 22px;
  color: var(--widget-text);
}

/* Sustainability (grey block): a box as wide as the page body, not full-bleed */
.rtw-ov-sustain {
  --button-bg: var(--color-primary);
  --button-text: var(--color-dark);
}

#main .zone-1 > .widget.rtw-ov-sustain:not(.top-stories-wrapper):not(.md-modal) {
  margin-inline: var(--container-inset);
  padding: var(--space-10, 42px);
}

.rtw-ov-sustain .wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-12);
  align-items: start;
}

.rtw-ov-sustain h2,
.rtw-ov-sustain .more-items-text,
.rtw-ov-sustain .more-items-long-text {
  grid-column: 1;
}

.rtw-ov-sustain h2 {
  margin: 0 0 15px;
  color: var(--color-primary);
}

.rtw-ov-sustain .more-items-text {
  max-width: 1048px;
  font-size: var(--font-size-lg);
  line-height: 28px;
}

.rtw-ov-sustain .more-items-text a {
  text-decoration: underline;
  color: inherit;
}

.rtw-ov-sustain .more-items-long-text {
  max-width: 1048px;
  margin-top: var(--space-4);
  font-size: var(--font-size-lg);
  line-height: 28px;
}

.rtw-ov-sustain .link-button {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: start;
  margin-top: var(--space-2);
}

.rtw-ov-sustain .link-button a {
  --sweep-bg: var(--color-dark);
  --sweep-text: var(--color-white);
  min-width: 188px;
  text-align: center;
}

.rtw-route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 28%, 480px);
  gap: var(--space-4);
  align-items: stretch;
}

.rtw-route-map img {
  display: block;
  width: 100%;
  height: auto;
}

/* The map and its text panel fill the same height as the city list */
.rtw-route-map .more-items-list {
  height: 100%;
}

.rtw-route-map .more-items-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-dark);
}

.rtw-route-map {
  --ratio: auto;
}

.rtw-route-map .more-items-item > a {
  display: block;
  flex: none;
}

.rtw-route-map .wrapper {
  flex: 1;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
  padding: var(--space-4) var(--space-5);
  min-height: clamp(150px, 12vw, 280px);  /* on wide screens the map outgrows the list: keep the title panel proportional */
  container-type: size;  /* the title scales with the panel the map leaves free */
}

.rtw-route-map h2,
.rtw-route-map .more-items-text {
  display: block;
  flex: none;
  margin: 0;
  text-align: left;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: clamp(36px, min(40cqh, 12cqw), 110px);
  font-style: italic;
  font-weight: 800;
  line-height: .95;
  text-transform: uppercase;
}

.rtw-route-map .more-items-title {
  color: var(--color-white);
}

.rtw-route-map .more-items-text {
  color: var(--color-primary);
}

.rtw-route-list .more-items-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
  counter-reset: stop;
}

/* City card (Figma 655:7125): dark diagonal band with the stop number, a thin
   light strip beside it, grey body with label, flag and city, blue band with the dates */
.rtw-route-list .more-items-item {
  position: relative;
  flex: 1 0 auto;
  min-height: 108px;  /* room for a two-line city name above the dates band */
  overflow: hidden;
  background: var(--color-gray-lighter);
  color: var(--color-dark);
  counter-increment: stop;
}

.rtw-route-list .more-items-item::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: calc(90px + var(--grow, 0px));
  background: var(--color-dark);
  clip-path: polygon(0 0, calc(78px + var(--grow, 0px)) 0, calc(52px + var(--grow, 0px)) 100%, 0 100%);
}

/* The number sits in its own pseudo-element so the band's clip does not cut it */
.rtw-route-list .more-items-item::after {
  content: counter(stop, decimal-leading-zero);
  position: absolute;
  top: 50%;
  left: calc(var(--space-2) + var(--grow, 0px) / 2);
  z-index: 3;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: 32px;
  font-style: italic;
  font-weight: 800;
  line-height: 1;
  transform: translateY(-50%);
  color: var(--color-primary);
}

/* Text follows the slanted edge with the home's resource: a full-height float with
   the band's slope (shape-outside), so every line keeps the same distance to it.
   The wrapper is a plain block (a float does nothing inside flex); the flag is its
   background and the dates band is pinned to the bottom. */
.rtw-route-list .more-items-item {
  --text-gap: 14px;
}

.rtw-route-list .more-items-item .wrapper {
  display: block;
  position: absolute;  /* fills the card so the float's 100% height is definite */
  inset: 0;
  padding: var(--space-1) 0 32px;
  text-align: left;
  background: no-repeat right var(--space-3) top var(--space-2) / 32px 24px;
}

.rtw-route-list .more-items-item .wrapper::before {
  content: '';
  float: left;
  width: calc(84px + var(--text-gap) + var(--grow, 0px));
  height: 100%;
  shape-outside: polygon(0 0, 100% 0, calc(100% - 26px) 100%, 0 100%);  /* band slope: 26px over the card height */
}

.rtw-route-list .more-items-item .wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: calc(90px + var(--grow, 0px));
  background: var(--color-primary-light);
  clip-path: polygon(calc(78px + var(--grow, 0px)) 0, calc(84px + var(--grow, 0px)) 0, calc(58px + var(--grow, 0px)) 100%, calc(52px + var(--grow, 0px)) 100%);  /* same slope as the band, flush against it */
}

.rtw-route-list .more-items-category {
  display: block;
  padding: var(--space-1) 56px 0 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--color-gray);
}

/* Label inside the dates band */
.rtw-route-list .more-items-long-text {
  position: absolute;
  left: calc(84px + var(--grow, 0px));
  bottom: var(--space-1);
  z-index: 3;
  font-size: var(--font-size-md);
  font-weight: 600;
  line-height: 24px;
  text-transform: uppercase;
  color: var(--color-white);
}

.rtw-route-list .more-items-item h2 {
  padding: 0 var(--space-3) 0 0;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: clamp(22px, 1.6vw, 38px);
  font-style: italic;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}

.rtw-route-list .more-items-text {
  position: absolute;
  right: 0;
  bottom: 0;
  left: calc(58px + var(--grow, 0px));
  padding: var(--space-1) var(--space-4) var(--space-1) 36px;
  background: var(--color-primary);
  font-size: var(--font-size-md);
  font-weight: 600;
  line-height: 24px;
  text-align: right;
  text-transform: uppercase;
  color: var(--color-dark);
}

/* Hover: the grey body turns dark with a sweep that follows the band's diagonal (--slope) */
@property --sweep {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

/* the number band widens by --grow and pushes the strip and the text with it */
@property --grow {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

.rtw-route-list .more-items-item {
  --sweep: 0%;
  background: linear-gradient(calc(90deg + atan(var(--slope))), var(--color-dark) var(--sweep), var(--color-gray-lighter) var(--sweep));
}

.rtw-route-list .more-items-item h2,
.rtw-route-list .more-items-category {
  transition: color .3s ease-out;
}

@media (hover: hover) {
  .rtw-route-list .more-items-item {
    transition: --sweep .35s ease-out, --grow .35s ease-out;
  }

  .rtw-route-list .more-items-item:hover,
  .rtw-route-list .more-items-item:focus-within {
    --sweep: 100%;
    --grow: 12px;
  }

  .rtw-route-list .more-items-item:hover h2,
  .rtw-route-list .more-items-item:focus-within h2 {
    color: var(--color-white);
  }

  .rtw-route-list .more-items-item:hover .more-items-category,
  .rtw-route-list .more-items-item:focus-within .more-items-category {
    color: var(--color-primary-light);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rtw-route-list .more-items-item,
  .rtw-route-list .more-items-item h2,
  .rtw-route-list .more-items-category {
    transition: none;
  }
}

.rtw-route-list .country-209 .wrapper { background-image: url(../img/flags/es.svg); }
.rtw-route-list .country-155 .wrapper { background-image: url(../img/flags/nz.svg); }
.rtw-route-list .country-30 .wrapper { background-image: url(../img/flags/br.svg); }
.rtw-route-list .country-236 .wrapper { background-image: url(../img/flags/us.svg); }
.rtw-route-list .country-176 .wrapper { background-image: url(../img/flags/pt.svg); }
.rtw-route-list .country-194 .wrapper { background-image: url(../img/flags/sa.svg); }

/* Route page: the map on top and the cities below in three columns (two on tablet, one on mobile) */
.widget.rtw-route.route-page {
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-8);
}

#main .zone-1 > .widget.rtw-route.route-page:not(.top-stories-wrapper):not(.md-modal) {
  padding-top: var(--space-8);
}

.route-page .rtw-route-list .more-items-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: auto;
}

/* The map's title panel goes above the picture, and the picture does not zoom on hover */
.route-page .rtw-route-map .more-items-item {
  flex-direction: column-reverse;
}

.route-page .rtw-route-map .more-items-item:hover .more-items-img {
  transform: none;
}

/* Reserve the map's box (the photo is 1500 x 693): a lazy image with no height never starts loading */
.route-page .rtw-route-map .more-items-item > a {
  aspect-ratio: 1500 / 693;
}

@media (max-width: 1024px) {
  .route-page .rtw-route-list .more-items-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .route-page .rtw-route-list .more-items-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Placeholder page (Embed with a title and a line of text) */
#main .zone-1 > .widget.coming-soon:not(.top-stories-wrapper):not(.md-modal) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  text-align: center;
}

.coming-soon h2 {
  margin-bottom: var(--space-4);
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: clamp(32px, 4vw, 56px);
  font-style: italic;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}

.coming-soon p {
  font-size: var(--font-size-lg);
}

@media (max-width: 1024px) {
  .rtw-masthead,
  .rtw-route {
    grid-template-columns: minmax(0, 1fr);
  }

  .rtw-masthead {
    row-gap: var(--space-8);
  }

  .rtw-video {
    clip-path: none;
  }

  #main .zone-1 > .widget.rtw-ov-route:not(.top-stories-wrapper):not(.md-modal) {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Title, then the key figure and its label, then the paragraphs */
  .rtw-ov-intro h2,
  .rtw-overview h2,
  .rtw-overview .more-items-category,
  .rtw-overview .more-items-text,
  .rtw-ov-intro .more-items-text {
    grid-column: 1;
  }

  .rtw-overview h2,
  .rtw-overview .more-items-category {
    justify-self: start;
    margin-left: 0;
    transform: none;
  }

  .rtw-overview h2 { grid-row: 2; }
  .rtw-overview .more-items-category { grid-row: 3; margin-bottom: var(--space-4); }
  .rtw-overview .more-items-text { grid-row: 4; }
  .rtw-ov-intro .more-items-text { grid-row: 5; }

  .rtw-ov-sustain .wrapper {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-4);
  }

  .rtw-ov-sustain .link-button {
    grid-column: 1;
    grid-row: auto;
  }
}

/* Four columns need ~1200px for the long figures beside the diagonal float */
@media (max-width: 1200px) {
  .rtw-ov-legs .more-items-list {
    flex-wrap: wrap;
    row-gap: var(--space-8);
  }

  /* Two columns of 50%: the left one of each row is flush left, no diagonal */
  .rtw-ov-legs .more-items-item {
    flex: 0 0 calc(50% - var(--space-3));
  }

  .rtw-ov-legs .more-items-item:nth-child(odd)::before,
  .rtw-ov-legs .more-items-item:nth-child(odd)::after {
    display: none;
  }
}

@media (max-width: 767px) {
  /* The video runs edge to edge under the intro */
  /* Route legs: one column, no diagonal */
  .rtw-ov-legs .more-items-list {
    display: block;
  }

  /* as large as the longest title (TRANSATLANTIC) allows without leaving the column */
  .rtw-ov-legs .more-items-category {
    font-size: min(52px, 12.2vw);
  }

  .rtw-ov-sustain .link-button,
  .rtw-ov-sustain .link-button a {
    width: 100%;
  }

  #main .zone-1 > .widget.rtw-ov-sustain:not(.top-stories-wrapper):not(.md-modal) {
    padding: var(--space-6) var(--space-5);
  }

  .rtw-ov-legs .more-items-item {
    padding: var(--space-6) 0;
    text-align: left;
  }

  .rtw-ov-legs .more-items-item::before {
    display: none;
  }

  .rtw-ov-legs .more-items-item + .more-items-item::after,
  .rtw-ov-legs .more-items-item:nth-child(odd)::after {
    display: block;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    height: 2px;
    clip-path: none;
  }

  #main .zone-1 > .widget.rtw-masthead:not(.top-stories-wrapper):not(.md-modal) {
    padding-inline: 0;
    padding-bottom: 0;
  }

  .rtw-intro {
    padding-inline: var(--gutter);
  }

  .rtw-route-list .more-items-item {
    min-height: 104px;
  }
}

/* ==========================================================
  PROMO BAND (Figma "Promo / Photo and copy")
  Generic photo + copy band: class promo-photo plus a mode (mode-light,
  mode-dark, mode-bluey). Source: a More Items widget with one item.
  Show Fields: |category|title|text|||||button  (category = eyebrow,
  button text from the button field, link from the item url, 1st image = photo).
  The copy rows step to the left along the slanted edge of the photo.
  ========================================================== */
.promo-photo {
  --btn-h: 48px;
  position: relative;
  overflow: hidden;
  padding: clamp(32px, 4.1vw, 56px) var(--container-inset);
  --button-bg: var(--widget-text);
  --button-text: var(--widget-bg);
  --sweep-bg: var(--widget-action);
  --sweep-text: var(--widget-on-action);
}

.promo-photo.mode-bluey {
  --button-bg: var(--color-white);
  --button-text: var(--color-dark);
}

.promo-photo .more-items-list {
  display: block;
}

.promo-photo .more-items-item {
  --photo-w: 59.2;  /* photo width, % of the band */
  --photo-ratio: 760 / 370;
  --photo-hw: calc(370 / 760);  /* height over width of the photo */
  --slant: calc(var(--slope) * var(--photo-w) * 1cqw * var(--photo-hw));  /* the photo's height at the site slope */
  --text-gap: 44px;  /* constant distance between text and the photo diagonal */
  container-type: inline-size;
  display: grid;
  grid-template-columns: calc(var(--photo-w) * 1%) minmax(0, 1fr);
  align-items: stretch;
  background: none;
}

.promo-photo .more-items-item > a:first-child:has(> img) {
  aspect-ratio: var(--photo-ratio);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
}

.promo-photo .more-items-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Copy starts at the photo's bottom-right corner; a full-height float with the
   photo's slope pushes every line the same distance away from the diagonal */
.promo-photo .wrapper {
  position: relative;
  display: block;
  min-width: 0;
  margin-left: calc(-1 * var(--slant));
  padding: 0;
  text-align: left;
}

.promo-photo .wrapper::before {
  content: '';
  float: left;
  width: calc(var(--slant) + var(--text-gap));
  height: 100%;
  shape-outside: polygon(0 0, 100% 0, var(--text-gap) 100%, 0 100%);
}

.promo-photo .more-items-category {
  display: block;
  margin-bottom: var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--widget-accent);
}

.promo-photo h2 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: clamp(36px, 5.6cqw, 120px);
  font-style: italic;
  font-weight: 800;
  line-height: .9;
  text-transform: uppercase;
  color: var(--widget-text);
}

.promo-photo .more-items-title {
  color: inherit;
}

.promo-photo .more-items-text {
  font-size: var(--font-size-lg);
  line-height: 28px;
  color: var(--widget-text);
}

.promo-photo .link-button {
  position: absolute;
  right: 0;
  bottom: 0;
}

.promo-photo .link-button a {
  /* the base rule redeclares the sweep colours on the <a>, so set them here */
  --sweep-bg: var(--widget-action);
  --sweep-text: var(--widget-on-action);
  clip-path: polygon(calc(var(--btn-h) * var(--slope)) 0, 100% 0, 100% 100%, 0 100%);
  padding-left: var(--space-6);
}

/* Dotted texture in the top right corner (three rows, tinted by the mode accent) */
.promo-photo::after {
  content: '';
  position: absolute;
  top: -237px;
  left: 86.1%;
  width: 295px;
  height: 313px;
  background: var(--widget-accent);
  -webkit-mask: url(../img/ui/promo-dots-a.svg) 0 208px / 252px 105px no-repeat,
                url(../img/ui/promo-dots-b.svg) 21px 105px / 252px 104px no-repeat,
                url(../img/ui/promo-dots-a.svg) 43px 0 / 252px 105px no-repeat;
          mask: url(../img/ui/promo-dots-a.svg) 0 208px / 252px 105px no-repeat,
                url(../img/ui/promo-dots-b.svg) 21px 105px / 252px 104px no-repeat,
                url(../img/ui/promo-dots-a.svg) 43px 0 / 252px 105px no-repeat;
  pointer-events: none;
}

@media (max-width: 1023px) {
  .promo-photo .more-items-item {
    --slant: 0px;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .promo-photo .more-items-item > a:first-child:has(> img) {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5cqw), calc(100% - 5cqw * .6) 100%, 0 100%);
  }

  .promo-photo .wrapper {
    margin-left: 0;
  }

  .promo-photo .wrapper::before {
    display: none;
  }

  .promo-photo .link-button {
    position: static;
    margin-top: var(--space-6);
  }
}

@media (max-width: 767px) {
  .promo-photo .link-button {
    width: 100%;
  }

  .promo-photo .link-button a {
    width: 100%;
    clip-path: none;  /* no slanted left edge on mobile */
    padding-left: var(--space-5);
  }

  .promo-photo::after {
    display: none;
  }
}

/* ==========================================================
  CITY PAGE (Auckland and the other stopovers, body class city-page)
  Generic blocks fed by More Items widgets: .city-hero, .key-figures,
  .section-nav, .city-about, .city-programme, .city-guest, .city-paginator.
  Texts next to a diagonal use the float + shape-outside resource.
  ========================================================== */
:root {
  --color-teal: var(--color-teal-beacon);
  --slope: .2;  /* one lean for every diagonal of the city page: run over height (Figma 12:48) */
}

/* ---------- Hero: photo, name over it and a blue info panel with a slanted edge ---------- */
.city-hero {
  position: relative;
  overflow: hidden;
  padding: 0;
}

/* The zone adds padding to every widget: the hero is full bleed */
#main .zone-1 > .widget.city-hero:not(.top-stories-wrapper):not(.md-modal) {
  padding: 0;
}

.city-hero-media .more-items-list {
  display: block;
}

.city-hero-media .more-items-item {
  position: relative;
  background: none;
}

.city-hero-media .more-items-item > a:first-child:has(> img) {
  display: block;
  aspect-ratio: auto;
  height: clamp(440px, calc(100svh - var(--header-height, 122px)), 1200px);  /* the screen minus the header */
}

/* Big screens: the photo leaves room for the four key figures under it */
@media (min-width: 1600px) {
  .city-hero-media .more-items-item > a:first-child:has(> img) {
    height: clamp(440px, calc(100svh - var(--header-height, 122px) - 190px), 1000px);
  }
}

.city-hero-media .more-items-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position:top left;
}

/* A charcoal fade from the bottom left corner keeps the country and the name readable on light photos.
   It is a gradient that reaches transparent before the box ends, so no edge of the layer is ever visible;
   subtler on smaller screens so it hides less of the photo */
.city-hero-media .more-items-item::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse 75% 85% at 0 100%, var(--color-dark) 15%, transparent 100%);
  opacity: .9;
  pointer-events: none;
}

@media (max-width: 1024px) {
  .city-hero-media .more-items-item::before {
    opacity: .7;
  }
}

@media (max-width: 767px) {
  .city-hero-media .more-items-item::before {
    background: linear-gradient(to top, var(--color-dark), transparent 55%);
    opacity: .6;
  }
}

.city-hero-media .wrapper {
  position: absolute;
  --hero-name: clamp(56px, 7.2vw, 120px);
  bottom: 25%;  /* centred on the blue panel: it is half the hero tall and sits on the bottom edge */
  transform: translateY(50%);
  left: var(--container-inset);
  z-index: 1;
  display: block;
  padding: 0;
  text-align: left;
  color: var(--color-white);
}

.city-hero-media .more-items-category {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: calc(var(--hero-name) * .27);
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  /* the name leans: the country starts where the first letter does at that height */
  padding-left: calc(var(--hero-name) * .26);
  margin-bottom: calc(var(--hero-name) * .09);
  color: var(--color-white);
  opacity: 1;
}

.city-hero-media .more-items-category::before {
  content: '';
  width: 1.06em;
  height: .7em;
  background: center / cover no-repeat;
}

/* The flag follows the country text: the li gets its slug as a class */
/* (EN, then the ES, FR and IT names of each country) */
.city-hero-media :is(.new-zealand, .nueva-zelanda, .nouvelle-zelande, .nuova-zelanda) .more-items-category::before { background-image: url(../img/flags/nz.svg); }
.city-hero-media :is(.spain, .espana, .espagne, .spagna) .more-items-category::before { background-image: url(../img/flags/es.svg); }
.city-hero-media :is(.brazil, .brasil, .bresil, .brasile) .more-items-category::before { background-image: url(../img/flags/br.svg); }
.city-hero-media :is(.united-states, .estados-unidos, .etats-unis, .stati-uniti) .more-items-category::before { background-image: url(../img/flags/us.svg); }
.city-hero-media :is(.portugal, .portogallo) .more-items-category::before { background-image: url(../img/flags/pt.svg); }
.city-hero-media :is(.red-sea, .mar-rojo, .mer-rouge, .mar-rosso) .more-items-category::before { background-image: url(../img/flags/sa.svg); }

.city-hero-media h2 {
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: var(--hero-name);
  font-style: italic;
  font-weight: 800;
  line-height: .92;
  text-transform: uppercase;
}

.city-hero-media .more-items-title {
  color: inherit;
  pointer-events: none;
}

/* Info panel: blue plane with a slanted left edge (::before), a light strip along that edge,
   white textures climbing out of its top right corner (::after) and its three pairs
   following the diagonal */
.city-hero-info {
  --slant: calc(100cqh * var(--slope));
  --text-gap: 48px;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 40%;
  height: 50%;
  container-type: size;
  padding: 0;
  background: none;
  color: var(--color-dark);
}

.city-hero-info::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-primary);
  clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%);
}

.city-hero-info::after {
  content: '';
  position: absolute;
  bottom: 28cqw;
  left: 75.5cqw;
  width: 68.9cqw;
  aspect-ratio: 378 / 401;
  background:
    url(../img/ui/texture-white.svg) 100% 0 / 85.4% 33.5% no-repeat,
    url(../img/ui/texture-white.svg) 48.8% 50% / 85.4% 33.2% no-repeat,
    url(../img/ui/texture-white.svg) 0 100% / 85.4% 33.5% no-repeat;
  pointer-events: none;
}

.city-hero-info .more-items-list {
  position: relative;
  z-index: 1;
  display: block;
  height: 100%;
  /* rows are 26cqh apart and ~8cqw tall: centre that block vertically in the panel */
  padding: calc(24cqh - 4.05cqw) 0 0;
}

.city-hero-info .more-items-list::before {
  content: '';
  float: left;
  width: calc(var(--slant) + var(--text-gap));
  height: 100%;
  shape-outside: polygon(0 0, 100% 0, var(--text-gap) 100%, 0 100%);
}

.city-hero-info .more-items-list::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--slant) + 24px);
  background: var(--color-primary-light);
  clip-path: polygon(var(--slant) 0, calc(var(--slant) + 24px) 0, 24px 100%, 0 100%);
  z-index: -1;
}

.city-hero-info .more-items-item {
  display: block;  /* a flex item is a BFC: it would ignore the float's diagonal */
  height: 26cqh;
  margin-bottom: 0;
  padding-top: 0;
  background: none;
}

.city-hero-info .wrapper {
  display: block;
  padding: 0;
  text-align: left;
}

.city-hero-info .more-items-category {
  color: var(--color-white);
  opacity: 1;
  display: block;
  font-size: clamp(11px, 2.3cqw, 22px);
  font-weight: 400;
  line-height: 1.5;
}

.city-hero-info h2 {
  margin: 0;
  font-size: clamp(15px, 3.6cqw, 34px);
  color: var(--color-dark);
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
}

.city-hero-info .more-items-title {
  color: inherit;
  pointer-events: none;
}

/* ---------- Visit at a glance: four key figures ---------- */
.key-figures {
  padding: var(--space-10, 40px) var(--container-inset);
}

.key-figures .more-items-list {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
}

.key-figures .more-items-item {
  flex: 1 1 0;
  background: none;
  align-items: flex-start;  /* the generic item is a flex column that centres its wrapper */
}

.key-figures .wrapper {
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 0;
  text-align: left;
}

.key-figures .more-items-category {
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 18px;
  text-transform: uppercase;
  color: var(--color-gray-light);
}

.key-figures h2 {
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: clamp(36px, 3.9vw, 60px);
  font-style: italic;
  font-weight: 800;
  line-height: .95;
  text-transform: uppercase;
  color: var(--widget-accent);
}

.key-figures .more-items-title {
  color: inherit;
  pointer-events: none;
}

/* ---------- Section navigation: numbered, the active one on a blue parallelogram ---------- */
.section-nav {
  --tab-h: 84px;
  --tab-slant: calc(var(--tab-h) * var(--slope));
  position: sticky;
  top: 0;
  z-index: 15;  /* under the header (20) */
  padding: 0 var(--container-inset);
  counter-reset: section;
  transition: top .3s ease;
}

/* The zone adds padding to every widget: the sticky bar is only as tall as its tabs */
#main .zone-1 > .widget.section-nav:not(.top-stories-wrapper):not(.md-modal) {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: var(--space-8);  /* clear of the dark key-figures bar; margin, so the stuck bar has no gap above */
}

/* the header comes back when scrolling up: the tabs sit right under it */
body.header-fixed.scroll-up .section-nav {
  top: var(--header-height);
}

/* Each label stays on one line (longer in other languages): the tabs share the width and, when they
   do not fit, the bar scrolls sideways */
.section-nav .more-items-list {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.section-nav h2 {
  white-space: nowrap;
}

.section-nav .more-items-item {
  position: relative;
  isolation: isolate;
  flex: 1 0 auto;
  min-width: 0;
  height: var(--tab-h);
  background: none;
  counter-increment: section;
}

/* Separator: thin diagonal, hidden next to the active tab (its plane draws the edge) */
.section-nav .more-items-item + .more-items-item::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--tab-slant) + 1px);
  background: var(--color-gray-light);
  clip-path: polygon(var(--tab-slant) 0, calc(var(--tab-slant) + 1px) 0, 1px 100%, 0 100%);
}

.section-nav .more-items-item.is-active::before,
.section-nav .more-items-item.is-active + .more-items-item::before {
  opacity: 0;
}

/* Active plane: runs over the whole cell up to the next separator, its colour fades in and out */
.section-nav .more-items-item::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: calc(-1 * var(--tab-slant));
  z-index: -1;
  background: transparent;
  clip-path: polygon(var(--tab-slant) 0, 100% 0, calc(100% - var(--tab-slant)) 100%, 0 100%);
  transition: background-color .4s ease;
  pointer-events: none;
}

.section-nav .more-items-item.is-active::after {
  background: var(--color-primary);
}

/* Inactive tabs: the same plane in gray on hover (its separators hide, like the active one's) */
@media (hover: hover) {
  .section-nav .more-items-item:not(.is-active):hover::after {
    background: var(--color-gray-lighter);
  }

  .section-nav .more-items-item:not(.is-active):hover::before,
  .section-nav .more-items-item:not(.is-active):hover + .more-items-item::before {
    opacity: 0;
  }
}

.section-nav .wrapper {
  display: block;
  padding: var(--space-3) var(--space-8);
  text-align: left;
}

.section-nav .wrapper::before {
  content: counter(section);
  display: block;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: clamp(22px, 1.8vw, 26px);
  font-style: italic;
  font-weight: 800;
  line-height: 1;
}

.section-nav h2 {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: clamp(16px, 1.4vw, 20px);
  font-style: italic;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}

.section-nav .more-items-title {
  color: var(--color-dark);
}

/* The whole tab is the link (the generic all-box-link rule ignores pointer events) */
.section-nav .more-items-title::after {
  pointer-events: auto;
}

[id] {
  scroll-margin-top: var(--header-height, 0px);
}

.city-page [id] {
  scroll-margin-top: calc(var(--header-height, 0px) + 84px);  /* + the sticky tabs */
}

/* ---------- About: heading left, copy right ---------- */
#main .zone-1 > .widget.city-about:not(.top-stories-wrapper):not(.md-modal) {
  padding: calc(var(--space-12) + var(--space-8)) var(--container-inset) var(--space-12);  /* more air under the section tabs */
}

.city-about .wrapper {
  display: grid;
  grid-template-columns: minmax(260px, 33%) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;  /* opening the text grows row 3 only: the lead sentence stays put */
  column-gap: 7%;
  row-gap: var(--space-4);
  align-items: start;
  padding: 0;
  text-align: left;
}

.city-about h2 {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: clamp(44px, 4.4vw, 64px);
  font-style: italic;
  font-weight: 800;
  line-height: .95;
  text-transform: uppercase;
  color: var(--color-dark);
}

.city-about h2 span {
  color: var(--color-primary);
}

.city-about .more-items-title {
  color: inherit;
  pointer-events: none;
}

.city-about .more-items-text {
  grid-column: 1;
  grid-row: 2;
  font-size: var(--font-size-lg);
  line-height: 28px;
}

.city-about .more-items-long-text {
  grid-column: 2;
  grid-row: 1 / span 3;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.55;
  max-height: 4.65em;  /* three lines until Read more opens the rest */
  overflow: hidden;
}

.city-about.is-open .more-items-long-text {
  max-height: none;
}

.city-about .link-button {
  grid-column: 2;
  grid-row: 4;
  width: auto;
  justify-self: start;
}

/* ---------- Programme: heading with button, then numbered date rows ---------- */
.city-programme {
  padding: var(--space-12) var(--container-inset);
}

.city-programme-head .wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  row-gap: var(--space-5);
  padding: 0;
  text-align: left;
}

.city-programme-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: clamp(44px, 4.4vw, 64px);
  font-style: italic;
  font-weight: 800;
  line-height: .95;
  text-transform: uppercase;
}

.city-programme-head .more-items-title,
.city-programme-rows .more-items-title {
  color: inherit;
  pointer-events: none;
}

.city-programme-head .more-items-text {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: var(--font-size-sm);
  color: var(--color-gray);
}

.city-programme-head .link-button {
  grid-column: 2;
  grid-row: 1;
}

.city-programme-rows {
  --band: clamp(110px, 12vw, 160px);
  margin-top: var(--space-6);
}

.city-programme-rows .more-items-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.city-programme-rows .more-items-item {
  position: relative;
  min-height: 70px;
  background: var(--color-white);
}

.city-programme-rows .more-items-item:nth-child(odd) {
  background: var(--color-gray-lighter);
}

.city-programme-rows .more-items-item::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--band) + 7px);
  background: var(--color-primary-light);
  clip-path: polygon(var(--band) 0, calc(var(--band) + 7px) 0, calc(var(--band) - 7px) 100%, calc(var(--band) - 14px) 100%);
}

.city-programme-rows .wrapper {
  display: block;
  position: static;
  padding: var(--space-3) calc(var(--band) + var(--space-4)) var(--space-3) calc(var(--band) + var(--space-6));
  text-align: left;
}

.city-programme-rows .wrapper::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--band);
  background: var(--color-dark);
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}

.city-programme-rows .more-items-category {
  position: absolute;
  top: 50%;
  left: var(--space-4);
  z-index: 1;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: clamp(28px, 3vw, 44px);
  font-style: italic;
  font-weight: 800;
  line-height: 1;
  transform: translateY(-50%);
  color: var(--color-primary);
}

.city-programme-rows .more-items-subsection {
  position: absolute;
  inset: 0 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--band);
  background: var(--color-primary);
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-dark);
}

.city-programme-rows h2 {
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: clamp(20px, 1.9vw, 26px);
  font-style: italic;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}

.city-programme-rows .more-items-text {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-gray);
}

/* ---------- Schedule (Angular Tabs widget, class schedule): dates with their items ---------- */
.schedule {
  --band: clamp(110px, 12vw, 160px);
  padding: var(--space-12) var(--container-inset);
  overflow-x: clip;
}

/* Order: title, note, day tabs (built by script.js), list of the chosen day */
.widget.schedule.more-items {
  display: flex;  /* the generic widget is a grid */
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
}

.schedule .widget-title { order: 1; }
.schedule .schedule-timing-text { order: 2; }
.schedule .schedule-day-tabs-header { order: 3; }
.schedule .calendar-header { order: 3; }
.schedule .tabs-content { order: 4; }

.widget.schedule .widget-title {
  margin: 0 0 var(--space-4);  /* same distance as the About lead sentence */
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: clamp(44px, 4.4vw, 64px);
  font-style: italic;
  font-weight: 800;
  line-height: .95;
  text-transform: uppercase;
  color: var(--widget-text);
}

.schedule .more-items-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.schedule .more-items-group {
  display: block;
}

.schedule.has-day-tabs .more-items-group:not(.day-active) {
  display: none;
}

/* Calendar picker (widget with Calendar on, controller in angular/domains/tor2027/custom2Controller.js):
   the list on the left, the month on the right; no day tabs */
.widget.schedule.more-items:has(> .calendar-content) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 26vw, 380px);
  grid-template-rows: auto auto 1fr;
  column-gap: var(--space-10, 40px);
  align-items: start;
}

.widget.schedule.more-items:has(> .calendar-content) > .widget-title,
.widget.schedule.more-items:has(> .calendar-content) > .schedule-timing-text {
  grid-column: 1 / -1;
}

.widget.schedule.more-items:has(> .calendar-content) > .calendar-content {
  grid-column: 1;
  grid-row: 3;
}

.widget.schedule.more-items:has(> .calendar-content) > .calendar-header {
  display: block;
  grid-column: 2;
  grid-row: 3;
}

.schedule .calendar-content .day-selector {
  display: none;  /* the platform's Today / Tomorrow / Weekend shortcuts */
}

#calendar-container {
  padding: var(--space-5);
  background: var(--color-gray-lighter);
}

#calendar-container .calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

#calendar-container .calendar-month {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: clamp(20px, 1.8vw, 26px);
  font-style: italic;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--widget-text);
}

#calendar-container .calendar-arrow {
  position: relative;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

#calendar-container .calendar-arrow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border: solid var(--color-dark);
  border-width: 2px 2px 0 0;
  transform: translate(-70%, -50%) rotate(45deg);
}

#calendar-container .calendar-prev::before {
  transform: translate(-30%, -50%) rotate(-135deg);
}

#calendar-container .calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-1);
}

#calendar-container .calendar-weekday {
  padding-bottom: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-align: center;
  color: var(--color-gray);
}

#calendar-container .calendar-day {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-gray-light);
}

#calendar-container .calendar-day.active {
  background: var(--color-white);
  color: var(--color-dark);
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease;
}

#calendar-container .calendar-day.active:hover {
  color: var(--color-primary);
}

#calendar-container .calendar-day.selected,
#calendar-container .calendar-day.selected:hover {
  background: var(--color-primary);
  color: var(--color-dark);
}

@media (max-width: 1023px) {
  .widget.schedule.more-items:has(> .calendar-content) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }

  .widget.schedule.more-items:has(> .calendar-content) > .calendar-header {
    grid-column: 1;
    grid-row: auto;
    margin-bottom: var(--space-6);
  }

  .widget.schedule.more-items:has(> .calendar-content) > .calendar-content {
    grid-column: 1;
    grid-row: auto;
  }
}

/* Day tabs */
.schedule-day-tabs-header {
  display: none;
}

.schedule.has-day-tabs > .schedule-day-tabs-header {
  display: block;
  margin-bottom: var(--space-6);
}

.schedule-day-tabs-header .tabs {
  display: flex;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
  list-style: none;
}

.schedule-day-tabs-header .tabs::-webkit-scrollbar {
  display: none;
}

.schedule-day-tabs-header .tab {
  position: relative;
  flex: 0 0 auto;
}

/* thin separator on the site slope */
.schedule-day-tabs-header .tab + .tab::before {
  content: '';
  position: absolute;
  top: 18%;
  bottom: 18%;
  left: 0;
  width: 1px;
  background: var(--color-gray-light);
  transform: skewX(calc(-1 * atan(var(--slope))));
}

.schedule-day-tabs-header .tab a {
  display: block;
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: clamp(18px, 1.5vw, 22px);
  font-style: italic;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--widget-text);
  transition: color .3s ease;
}

.schedule-day-tabs-header .tab:first-child a {
  padding-left: 0;
}

.schedule-day-tabs-header .tab.active a,
.schedule-day-tabs-header .tab a:hover {
  color: var(--color-primary);
}

/* Day label: a dark parallelogram pill above the list */
.schedule .more-items-group > .wrapper {
  display: inline-grid;
  place-items: center;
  margin-bottom: var(--space-4);
  padding: var(--space-3) calc(var(--space-6) + 14px) var(--space-3) var(--space-6);
  background: var(--color-dark);
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}

.schedule .group-name {
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: clamp(22px, 2vw, 32px);
  font-style: italic;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-primary);
}

.schedule .more-items-group > .more-items-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Row: blue status band on the left (time, or TBC when there is no time), then the activity.
   Rows alternate grey and white */
.schedule .content-programme-item {
  --row-h: 92px;
  --slant: calc(var(--row-h) * var(--slope));
  position: relative;
  display: block;
  height: auto;
  min-height: var(--row-h);
  padding: var(--space-4) var(--space-6) var(--space-4) calc(var(--band) + var(--space-6));
  background: var(--color-white);
}

.schedule .content-programme-item:nth-child(odd) {
  background: var(--color-gray-lighter);
}

.schedule .content-programme-item::before,
.schedule .content-programme-item::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--band);
  pointer-events: none;
}

.schedule .content-programme-item::before {
  background: var(--color-primary);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
}

.schedule .content-programme-item::after {
  background: var(--color-primary-light);
  clip-path: polygon(calc(100% - 8px) 0, 100% 0, calc(100% - var(--slant)) 100%, calc(100% - var(--slant) - 8px) 100%);
}

.schedule .more-items-img-container {
  display: none;
}

.schedule .content-programme-item .wrapper {
  display: block;
  padding: 0;
  text-align: left;
}

/* The status sits in the band: the time, or the TBC label when the time is only the 00:00 placeholder */
.schedule .content-programme-time,
.schedule .content-programme-item .more-items-subsection {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: calc(var(--band) - var(--slant));
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-dark);
}

.schedule .content-programme-time[datetime$=' 00:00:00'],
.schedule .content-programme-item:has(.content-programme-time:not([datetime$=' 00:00:00'])) .more-items-subsection {
  display: none;
}

.schedule .content-programme-item h2 {
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: clamp(20px, 2vw, 28px);
  font-style: italic;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.schedule .content-programme-item .more-items-short-text {
  display: block;  /* the short text is hidden by default */
  margin-top: var(--space-1, 4px);
  font-size: var(--font-size-md);
  color: var(--color-gray);
}

.schedule .schedule-timing-text {
  margin: 0 0 var(--space-6);
  font-size: var(--font-size-lg);
  line-height: 28px;
}

@media (max-width: 767px) {
  .schedule {
    --band: 84px;
  }

  .schedule .content-programme-item {
    padding-right: var(--space-4);
  }

  .schedule-day-tabs-header .tab a {
    padding-right: var(--space-4);
    padding-left: var(--space-4);
  }
}

/* ---------- Guest experiences: copy on the left, a row of cards you scroll sideways ---------- */
.city-guest {
  display: grid;
  grid-template-columns: minmax(300px, 28%) minmax(0, 1fr);
  column-gap: var(--space-6);
  padding: var(--space-10, 40px) 0 var(--space-10, 40px) var(--container-inset);
}

.city-guest-head .more-items-list,
.city-guest-head .more-items-item {
  height: 100%;
}

.city-guest-head .wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  height: 100%;
  padding: 0;
  text-align: left;
}

.city-guest-head .more-items-category {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
}

.city-guest-head h2 {
  flex: none;
  margin: var(--space-4) 0;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: clamp(40px, 3.9vw, 56px);
  font-style: italic;
  font-weight: 800;
  line-height: .95;
  text-transform: uppercase;
}

.city-guest-head .more-items-title,
.city-guest-items .more-items-title {
  color: inherit;
  pointer-events: none;
}

.city-guest-head .more-items-text {
  margin: 0;
  font-size: var(--font-size-md);
  line-height: 1.6;
}

.city-guest-head .link-button {
  margin-top: auto;
}

.city-guest-items {
  --cols: 2.3;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: none;
  color: var(--color-dark);
}

.city-guest-items .more-items-list {
  gap: var(--space-4);
}

.city-guest-items .more-items-item {
  display: flex;
  flex-direction: column;
  background: var(--color-primary-light);
  color: var(--color-dark);
}

.city-guest-items .more-items-item > a:first-child:has(> img) {
  aspect-ratio: 16 / 9;
}

.city-guest-items .wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  flex: 1;
  align-items: flex-start;
  padding: var(--space-4);
  text-align: left;
}

.city-guest-items .more-items-category {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-dark);
  opacity: 1;
}

.city-guest-items h2 {
  margin: var(--space-2) 0 var(--space-3);
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: clamp(22px, 2vw, 28px);
  font-style: italic;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.city-guest-items .more-items-text {
  margin-bottom: var(--space-3);
  font-size: var(--font-size-sm);
  line-height: 1.45;
}

/* BOOK NOW: the regular straight button at the bottom of the card */
.city-guest-items .link-button {
  width: auto;
  margin-top: auto;
}

.city-guest-items .link-button a {
  --button-bg: var(--color-dark);
  --button-text: var(--color-white);
  --sweep-bg: var(--color-white);  /* the card is blue, so the hover is white (blue would vanish into it) */
  --sweep-text: var(--color-dark);
}

/* The arrows (script.js adds them to the title row) sit under the cards, flush right with the list */
.city-guest-items .widget-title {
  order: 2;
  justify-content: flex-end;
  margin-top: var(--space-4);
  padding-right: 0;
  font-size: 0;
}

.city-guest-items .scroll-arrows button {
  --button-bg: var(--color-white);
  --button-text: var(--color-dark);
}

.city-guest-items .scroll-arrows .scroll-prev {
  --button-bg: var(--color-primary-light);
}

/* ---------- Volunteers (promo-photo, photo on the right, teal surface) ---------- */
.promo-photo-reverse::after {
  display: none;
}

.promo-photo-reverse .more-items-item {
  grid-template-columns: minmax(0, 1fr) calc(var(--photo-w) * 1%);
  background: var(--color-teal);
}

.promo-photo-reverse .more-items-item > a:first-child:has(> img) {
  order: 2;
  clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%);
}

.promo-photo-reverse .wrapper {
  order: 1;
  margin-right: calc(-1 * var(--slant));
  margin-left: 0;
  padding: var(--space-8) 0 calc(var(--space-8) + var(--btn-h) + var(--space-5)) var(--space-8);
}

.promo-photo-reverse .wrapper::before {
  float: right;
  shape-outside: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%);
}

/* The button sits at the bottom left, in line with the copy and clear of the edges (same inset as the text) */
.promo-photo-reverse .link-button {
  right: auto;
  bottom: var(--space-8);
  left: var(--space-8);
}

/* straight on the left, slanted on the right (same direction as the photo's diagonal); the hover sweep is white on the teal surface */
.promo-photo-reverse .link-button a {
  --sweep-bg: var(--color-white);
  --sweep-text: var(--color-dark);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--btn-h) * var(--slope)) 100%, 0 100%);
  padding: 0 calc(var(--space-6) + var(--btn-h) * var(--slope)) 0 var(--space-6);
}

@media (max-width: 767px) {
  .promo-photo-reverse .link-button a {
    clip-path: none;  /* no slanted edge on mobile */
    padding: 0 var(--space-5);
  }
}

.promo-photo-reverse .more-items-text,
.promo-photo-reverse .more-items-text p {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-lg);
  line-height: 28px;
}

/* promo-photo-straight: the same banner with no slanted lines at all (alone or with -reverse) */
.promo-photo-straight::after {
  display: none;
}

.promo-photo-straight .more-items-item {
  --slant: 0px;
}

.promo-photo-straight .more-items-item > a:first-child:has(> img) {
  clip-path: none;
}

.promo-photo-straight .wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  margin: 0;
  padding: var(--space-8);
}

.promo-photo-straight .wrapper::before {
  display: none;
}

.promo-photo-straight .link-button {
  position: static;
  margin-top: auto;
  padding-top: var(--space-5);
}

.promo-photo-straight .link-button a {
  clip-path: none;
  padding: 0 var(--space-6);
}

/* ---------- Volunteers page (body class city-page, widgets vol-*) ----------
   Reuses promo-photo (hero: -teal, why volunteer: -reverse -plain), city-guest (roles),
   key-figures (details), city-paginator and the host-city partners; only the steps,
   the deadline banner, the FAQs and the shop banner are specific. */

/* Hero: the promo-photo on the teal surface, dark headline, white eyebrow */
.promo-photo-teal::after {
  display: none;
}

/* the whole band is teal (no white frame around the panel) */
.promo-photo-teal {
  background: var(--color-teal-beacon);
}

.promo-photo-teal .more-items-category {
  color: var(--color-dark);
}

.vol-hero {
  --vol-h: 400px;
}



.vol-hero .more-items-item {
  --slant: calc(var(--slope) * var(--vol-h));
  grid-template-columns: 42.45% minmax(0, 1fr);  /* photo 540 of the 1272 panel */
  min-height: var(--vol-h);
}

/* the photo takes the height of the row (never wider than its column if the text is taller) */
.vol-hero .more-items-item > a:first-child:has(> img),
.vol-why .more-items-item > a:first-child:has(> img) {
  aspect-ratio: auto;
}

.vol-hero h2 {
  font-size: clamp(36px, 5cqw, 64px);
  line-height: .94;
}

.vol-hero .more-items-text,
.vol-hero .more-items-long-text,
.vol-hero .more-items-long-text p {
  margin: 0;
  font-size: var(--font-size-md);
  line-height: 28px;
}

.vol-hero .wrapper {
  padding: 0 var(--space-16) calc(var(--btn-h) + var(--space-6)) 0;
}

/* button on the left, under the copy: at the bottom the photo diagonal meets the wrapper edge,
   and the button's slanted edge runs parallel to it, so it keeps the text gap */
.vol-hero .link-button {
  right: auto;
  left: var(--text-gap);
}

/* Why volunteer: photo on the right, list with slanted markers */
.promo-photo-plain .more-items-item {
  background: none;
}

#main .zone-1 > .widget.vol-why:not(.top-stories-wrapper):not(.md-modal) {
  padding-block: var(--space-6);
}

.vol-why .more-items-item {
  --slant: 0px;  /* straight photo, same as promo-photo-straight */
  grid-template-columns: minmax(0, 1fr) 44%;
  align-items: center;
}

.vol-why .more-items-item > a:first-child:has(> img) {
  clip-path: none;
}

.vol-why .more-items-item {
  min-height: calc(44cqw * 400 / 560);
}

/* the list stays 64px clear of the photo, so no float is needed here */
.vol-why .wrapper {
  margin-right: 0;
  padding: 0 var(--space-16) 0 0;
}

.vol-why .wrapper::before {
  display: none;
}

.vol-why h2 {
  margin-bottom: var(--space-8);
  font-size: clamp(40px, 3.9vw, 56px);  /* same as the Volunteer roles title */
  line-height: .95;
}

.vol-why ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vol-why .wrapper li {
  position: relative;
  padding: var(--space-4) 0 var(--space-4) 34px;
  border-bottom: 1px solid var(--color-dark-40);
  font-size: var(--font-size-lg);
  line-height: 28px;
  color: var(--widget-text);
}

.vol-why .wrapper li:last-child {
  border-bottom: 0;
}

.vol-why .wrapper li::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 24px;
  background: var(--color-primary);
  clip-path: polygon(37% 0, 100% 0, 63% 100%, 0 100%);
  transform: translateY(-50%);
}

/* Key details: label above, value in blue italics, slanted separators between the columns */
.key-details {
  --det-h: 138px;
  padding-block: 56px 64px;
}

.key-details .widget-title {
  margin: 0 0 var(--space-10, 40px);
  font-size: 40px;
  line-height: 44px;
  color: var(--color-white);
}

.key-details .more-items-list {
  gap: 0;
}

.key-details .more-items-item {
  position: relative;
  min-height: var(--det-h);
}

.key-details .more-items-item + .more-items-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--det-h) * var(--slope) + 1px);
  height: var(--det-h);
  background: var(--color-dark-60);
  clip-path: polygon(calc(100% - 1px) 0, 100% 0, 1px 100%, 0 100%);
}

.key-details .wrapper {
  display: block;
}

/* The text keeps its distance from the diagonal: a float with the slope pushes each line */
.key-details .wrapper::before {
  content: '';
  float: left;
  width: calc(var(--det-h) * var(--slope) + var(--space-3));
  height: var(--det-h);
  shape-outside: polygon(0 0, 100% 0, var(--space-3) 100%, 0 100%);
}

.key-details .more-items-category {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--color-dark-20);
}

.key-details h2 {
  font-size: 32px;
  font-weight: 500;
  line-height: 36px;
}

/* How to apply: three steps (a numbered chip + text) and the deadline banner */
.vol-apply {
  padding-block: var(--space-16, 64px);
}

/* the generic item padding would indent the content 16px from the other widgets */
.vol-apply .wrapper {
  display: block;
  padding: 0;
}

.vol-apply .more-items-title {
  color: var(--widget-text);
  pointer-events: none;
}

.vol-apply h2 {
  margin: 0 0 var(--space-10, 40px);
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: 40px;
  font-style: italic;
  font-weight: 800;
  line-height: 44px;
  text-transform: uppercase;
}

.vol-apply ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-10, 40px);
  margin: 0 0 var(--space-10, 40px);
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.vol-apply ol li {
  --chip-h: 72px;
  --chip-slant: calc(var(--chip-h) * var(--slope));
  position: relative;
  min-height: var(--chip-h);
  font-size: var(--font-size-lg);
  line-height: 28px;
  counter-increment: step;
}

/* The chip is a float (straight on the left, slanted on the right) taller than the chip itself:
   its shape-outside makes every line of the step start a little further left, along the diagonal */
.vol-apply ol li::before {
  --chip-w: 64px;
  --chip-gap: 24px;
  content: counter(step);
  float: left;
  width: var(--chip-w);
  height: var(--chip-float, 168px);
  margin-right: var(--chip-gap);
  padding-right: var(--space-2);
  background: linear-gradient(var(--color-dark), var(--color-dark)) 0 0 / 100% var(--chip-h) no-repeat;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--chip-slant)) var(--chip-h), 0 var(--chip-h));
  shape-outside: polygon(0 0, calc(var(--chip-w) + var(--chip-gap)) 0, calc(var(--chip-w) + var(--chip-gap) - var(--chip-float, 168px) * var(--slope)) var(--chip-float, 168px), 0 var(--chip-float, 168px));
  text-align: center;
  line-height: var(--chip-h);
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: 44px;
  font-style: italic;
  font-weight: 800;
  color: var(--color-white);
}

.vol-apply ol li::after {
  content: '';
  position: absolute;
  top: 0;
  left: 46px;
  width: 30px;
  height: var(--chip-h);
  background: var(--color-teal-beacon);
  clip-path: polygon(var(--chip-slant) 0, 100% 0, calc(100% - var(--chip-slant)) 100%, 0 100%);
}

.vol-apply .apply-deadline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'label button' 'date button' 'text button';
  align-items: center;
  column-gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  background: var(--color-teal-beacon);
  color: var(--color-dark);
}

.vol-apply .apply-deadline-label {
  grid-area: label;
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 18px;
  text-transform: uppercase;
}

.vol-apply .apply-deadline-date {
  grid-area: date;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: 52px;
  font-style: italic;
  font-weight: 800;
  line-height: 52px;
  text-transform: uppercase;
}

.vol-apply .apply-deadline-text {
  grid-area: text;
  margin-top: var(--space-2);
  font-size: var(--font-size-lg);
  line-height: 28px;
}

.vol-apply .apply-now {
  --apply-h: 64px;
  grid-area: button;
  display: inline-flex;
  align-items: center;
  height: var(--apply-h);
  padding: 0 var(--space-10, 40px) 0 calc(var(--space-10, 40px) + var(--apply-h) * var(--slope));
  background: var(--color-dark);
  clip-path: polygon(calc(var(--apply-h) * var(--slope)) 0, 100% 0, 100% 100%, 0 100%);
  font-size: var(--font-size-md);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-white);
}

.vol-apply .apply-now:hover {
  background: var(--color-white);
  color: var(--color-dark);
}

/* FAQs: title on top, accordion below it (initFaqs, js/script.js), left aligned and not full width */
.vol-faqs {
  padding-block: var(--space-6) var(--space-20, 80px);
}

.vol-faqs .widget-title {
  margin: 0 0 var(--space-6);
  font-size: 40px;
  line-height: 44px;
  color: var(--widget-text);
}

.vol-faqs .more-items-list {
  display: block;
  max-width: 908px;
}

.vol-faqs .more-items-item {
  display: block;
  border-bottom: 1px solid var(--color-dark-40);
  background: none;
}

.vol-faqs .wrapper {
  display: block;
  padding: var(--space-6) 0;
}

.vol-faqs .more-items-item h2 {
  position: relative;
  min-height: 40px;
  margin: 0;
  padding-right: 72px;
  font-size: var(--font-size-lg);
  font-weight: 600;
  line-height: 26px;
}

.vol-faqs .more-items-title {
  display: block;
  padding-block: 7px;
  color: var(--widget-text);
}

.vol-faqs .more-items-item h2::after {
  content: '+';
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 52px;
  height: 40px;
  background: var(--color-dark);
  clip-path: polygon(calc(40px * var(--slope)) 0, 100% 0, calc(100% - 40px * var(--slope)) 100%, 0 100%);
  font-size: var(--font-size-xl);
  line-height: 1;
  color: var(--color-white);
}

.vol-faqs .more-items-long-text {
  display: none;
  margin-top: var(--space-3);
  font-size: var(--font-size-lg);
  line-height: 26px;
  color: var(--color-dark-60);
}

.vol-faqs .more-items-long-text p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

.vol-faqs .more-items-item.is-open h2::after {
  content: '\2212';
  background: var(--color-primary);
}

.vol-faqs .more-items-item.is-open .more-items-long-text {
  display: block;
}

@media (max-width: 1023px) {
  /* hero and why volunteer: one column, photo first (the generic promo-photo mobile rules) */
  .vol-hero .more-items-item,
  .vol-why .more-items-item {
    --slant: 0px;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .vol-hero .more-items-item > a:first-child:has(> img),
  .vol-why .more-items-item > a:first-child:has(> img) {
    order: -1;
    aspect-ratio: 4 / 3;
    clip-path: none;  /* no mask on the photo */
  }

  .vol-hero .wrapper,
  .vol-why.promo-photo .wrapper {
    padding: var(--space-6) 0;
  }

  .vol-why h2 {
    margin-bottom: var(--space-5);
  }

  .vol-hero .link-button {
    margin-top: var(--space-6);
  }

  .key-details .more-items-list {
    flex-wrap: wrap;
    row-gap: var(--space-6);
  }

  .key-figures.key-details .more-items-list {
    display: flex;
    flex-direction: column;
    row-gap: var(--space-6);
  }

  .key-details .more-items-item {
    flex: none;
    min-height: 0;
  }

  /* one per line: no diagonal separators */
  .key-details .more-items-item + .more-items-item::before {
    display: none;
  }

  .key-details .wrapper::before {
    display: none;
  }

  /* one column: smaller chips and the text in a straight column next to them (no float, so no line
     can fall back under the chip) */
  .vol-apply ol {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .vol-apply ol li {
    --chip-h: 56px;
    padding-left: 72px;
  }

  .vol-apply ol li::before {
    --chip-w: 48px;
    position: absolute;
    top: 0;
    left: 0;
    float: none;
    height: var(--chip-h);
    margin: 0;
    shape-outside: none;
    font-size: 32px;
  }

  .vol-apply ol li::after {
    left: 34px;
    width: 22px;
  }

}

@media (max-width: 767px) {
  .vol-apply .apply-deadline {
    grid-template-areas: 'label' 'date' 'text' 'button';
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-6) var(--space-5);
  }

  .vol-apply .apply-deadline-date {
    font-size: 40px;
    line-height: 44px;
  }

  .vol-apply .apply-now {
    justify-content: center;
    margin-top: var(--space-5);
    clip-path: none;
    padding-inline: var(--space-5);
  }
}

/* ---------- Ocean Live Park: diagonal photo collage + text that follows its slanted edge ---------- */
.city-park {
  padding: var(--space-12) var(--container-inset);
  background: var(--color-primary-light);
  color: var(--color-dark);
}

.city-park .more-items-list {
  display: block;
}

.city-park .more-items-item {
  --ar: 1.28;          /* collage width / height */
  --slant: calc(var(--slope) * 50.3cqw / var(--ar));  /* horizontal run of the collage's right edge */
  --text-gap: 4.2cqw;  /* constant distance between text and that edge */
  container-type: inline-size;
  display: grid;
  grid-template-columns: 50.3% minmax(0, 1fr);
  align-items: stretch;  /* a stretched wrapper gives the float a definite height */
  background: none;
}

.city-park .more-items-item > a:first-child {
  position: relative;
  display: block;
  align-self: start;  /* otherwise the stretched height drives the aspect ratio */
  width: 100%;
  aspect-ratio: var(--ar);
  /* one right edge for the whole collage, so the diagonal is continuous */
  clip-path: polygon(0 0, 100% 0, calc(100% - 100% * var(--slope) / var(--ar)) 100%, 0 100%);
}

/* Four photos with no gaps: the right one of each row fills it, the left one lies over it with a diagonal edge */
.city-park .more-items-img {
  position: absolute;
  object-fit: cover;
  max-width: none;
  opacity: 1;  /* the generic hover swap hides the 2nd image */
}

.city-park .img-2 { left: 0; top: 0; width: 100%; height: 52%; }
.city-park .img-4 { left: 0; top: 52%; width: 100%; height: 48%; }
.city-park .img-1 { z-index: 1; left: 0; top: 0; width: 40.7%; height: 52%; clip-path: polygon(0 0, 100% 0, calc(100% - 100% * var(--slope) * .52 / (.407 * var(--ar))) 100%, 0 100%); }
.city-park .img-3 { z-index: 1; left: 0; top: 52%; width: 54.6%; height: 48%; clip-path: polygon(0 0, 100% 0, calc(100% - 100% * var(--slope) * .48 / (.546 * var(--ar))) 100%, 0 100%); }

.city-park .wrapper {
  display: block;
  min-width: 0;
  margin-left: calc(-1 * var(--slant));
  padding: 0;
  text-align: left;
}

.city-park .wrapper::before {
  content: '';
  float: left;
  width: calc(var(--slant) + var(--text-gap));
  height: 100%;
  shape-outside: polygon(0 0, 100% 0, var(--text-gap) 100%, 0 100%);
}

.city-park .more-items-category {
  display: block;
  margin-bottom: var(--space-4);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 18px;
  text-transform: uppercase;
  color: var(--color-dark);
}

.city-park h2 {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: clamp(48px, 6.3cqw, 96px);
  font-style: italic;
  font-weight: 800;
  line-height: .9;
  text-transform: uppercase;
}

.city-park .more-items-title {
  color: inherit;
  pointer-events: none;
}

.city-park .more-items-long-text {
  font-size: var(--font-size-md);
  line-height: 22px;
}

.city-park .more-items-long-text p {
  margin: 0 0 var(--space-4);
}

.city-park .more-items-long-text p:first-child {
  font-size: var(--font-size-xl, 20px);
  line-height: 26px;
}

.city-park .more-items-long-text ul {
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.city-park .more-items-long-text li {
  margin-bottom: var(--space-2);
}

.city-park .link-button {
  --button-bg: var(--color-dark);
  --button-text: var(--color-white);
  margin-top: var(--space-5);
}

.city-park .link-button a {
  --sweep-bg: var(--color-white);
  --sweep-text: var(--color-dark);
}

@media (max-width: 1023px) {
  .city-park .more-items-item {
    --slant: 0px;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-6);
  }

  .city-park .wrapper {
    margin-left: 0;
  }

  .city-park .wrapper::before {
    display: none;
  }
}

@media (max-width: 767px) {
  /* straight outer edge; the lines between the photos keep the slope */
  .city-park .more-items-item > a:first-child {
    clip-path: none;
  }

  .city-park .link-button,
  .city-park .link-button a {
    width: 100%;
  }
}

/* ---------- Continue exploring: previous / next city ---------- */
.city-paginator {
  position: relative;
  padding: var(--space-4) var(--container-inset);
}

.city-paginator .more-items-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.city-paginator .more-items-item {
  position: static;  /* the centred button is positioned against the widget */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-4);
  background: none;
}

.city-paginator .more-items-item:last-child {
  flex-direction: row-reverse;
  text-align: right;
}

.city-paginator .more-items-item::before,
.city-paginator .more-items-item::after {
  font-size: 22px;
  line-height: 1;
}

.city-paginator .more-items-item:first-child::before { content: '\2190'; }
.city-paginator .more-items-item:last-child::before { content: '\2192'; }

.city-paginator .more-items-item > a:first-child:has(> img) {
  flex: none;
  width: clamp(120px, 14vw, 190px);
  aspect-ratio: 150 / 72;
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}

.city-paginator .more-items-item:last-child > a:first-child:has(> img) {
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}

.city-paginator .wrapper {
  display: block;
  padding: 0;
}

.city-paginator .wrapper::before {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
}

.city-paginator .more-items-item:first-child .wrapper::before { content: 'Previous city'; }
.city-paginator .more-items-item:last-child .wrapper::before { content: 'Next city'; }

/* The labels are generated here, so each language has its own */
html[lang="es"] .city-paginator .more-items-item:first-child .wrapper::before { content: 'Ciudad anterior'; }
html[lang="es"] .city-paginator .more-items-item:last-child .wrapper::before { content: 'Ciudad siguiente'; }
html[lang="fr"] .city-paginator .more-items-item:first-child .wrapper::before { content: 'Ville précédente'; }
html[lang="fr"] .city-paginator .more-items-item:last-child .wrapper::before { content: 'Ville suivante'; }
html[lang="it"] .city-paginator .more-items-item:first-child .wrapper::before { content: 'Città precedente'; }
html[lang="it"] .city-paginator .more-items-item:last-child .wrapper::before { content: 'Città successiva'; }

.city-paginator h2 {
  margin: var(--space-1) 0 0;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: clamp(28px, 3vw, 44px);
  font-style: italic;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.city-paginator .more-items-title {
  color: inherit;
}

.city-paginator small {
  display: none;
}

/* One "View the route" button, centred */
.city-paginator .more-items-item:first-child .link-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.city-paginator .more-items-item:last-child .link-button {
  display: none;
}

/* First or last city of the route: a single item, on the right, and it keeps the button */
.city-paginator .more-items-item:only-child {
  margin-left: auto;
}

.city-paginator .more-items-item:only-child .link-button {
  display: block;
}

/* Last city of the route (class paginator-prev): the lone item is the previous city, on the left */
.city-paginator.paginator-prev .more-items-item:only-child {
  flex-direction: row;
  margin-left: 0;
  text-align: left;
}

.city-paginator.paginator-prev .more-items-item:only-child::before { content: '\2190'; }
.city-paginator.paginator-prev .more-items-item:only-child .wrapper::before { content: 'Previous city'; }
html[lang="es"] .city-paginator.paginator-prev .more-items-item:only-child .wrapper::before { content: 'Ciudad anterior'; }
html[lang="fr"] .city-paginator.paginator-prev .more-items-item:only-child .wrapper::before { content: 'Ville précédente'; }
html[lang="it"] .city-paginator.paginator-prev .more-items-item:only-child .wrapper::before { content: 'Città precedente'; }

@media (max-width: 1024px) {
  .city-guest {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-6);
    padding-right: 0;
  }

  .city-guest-head .link-button {
    margin-top: var(--space-5);
  }

  .city-about .wrapper {
    grid-template-columns: minmax(0, 1fr);
  }

  .city-about h2,
  .city-about .more-items-text,
  .city-about .more-items-long-text,
  .city-about .link-button {
    grid-column: 1;
  }

  .city-about h2 { grid-row: 1; }
  .city-about .more-items-text { grid-row: 2; }
  .city-about .more-items-long-text { grid-row: 3; }
  .city-about .link-button { grid-row: 4; }
}

@media (max-width: 767px) {
  .city-hero-media .more-items-item > a:first-child:has(> img) {
    height: clamp(340px, 112vw, 480px);  /* a photo, not the whole screen */
  }

  .city-hero-media .more-items-img {
    object-position: top center;
  }

  .city-hero-media .wrapper {
    bottom: clamp(24px, 5vw, 54px);  /* the panel goes under the photo */
    transform: none;
  }

  .city-hero-info {
    position: static;
    width: auto;
    height: auto;
    container-type: normal;  /* size containment would collapse the height */
    background: var(--color-primary);
  }

  .city-hero-info {
    position: relative;
    overflow: hidden;
  }

  .city-hero-info::before,
  .city-hero-info .more-items-list::before,
  .city-hero-info .more-items-list::after {
    display: none;
  }

  /* the white texture climbs the top right corner of the blue block */
  .city-hero-info::after {
    top: 0;
    bottom: auto;
    left: auto;
    right: -12%;
    width: 58%;
  }

  .city-hero-info .more-items-list {
    padding: var(--space-6) var(--container-inset);
  }

  .city-hero-info .more-items-item {
    height: auto;
    margin-bottom: var(--space-4);
    padding-top: 0;
  }

  .city-hero-info .more-items-category {
    font-size: var(--font-size-sm);
  }

  .city-hero-info h2 {
    font-size: 20px;
  }

  .key-figures .more-items-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-6);
  }

  .section-nav .more-items-list {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .section-nav {
    --tab-h: 72px;
  }

  .section-nav .more-items-item {
    flex: 0 0 auto;
    min-width: 150px;
  }

  .city-programme-head .wrapper {
    grid-template-columns: minmax(0, 1fr);
  }

  .city-programme-head .link-button {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
  }

  .city-programme-head .link-button a {
    width: 100%;
  }

  .city-programme-rows {
    --band: 76px;
  }

  .city-programme-rows .more-items-category {
    left: var(--space-2);
    font-size: 24px;
  }

  .city-programme-rows .more-items-subsection {
    font-size: var(--font-size-xs);
  }

  .city-programme-rows .wrapper {
    padding-left: calc(var(--band) + var(--space-4));
    padding-right: calc(var(--band) + var(--space-2));
  }

  .city-guest-items {
    --cols: 1.15;
  }

  .city-guest-head .link-button {
    width: auto;
  }

  .city-about .link-button,
  .city-about .link-button a {
    width: 100%;
  }

  .promo-photo-reverse .more-items-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .promo-photo-reverse .more-items-item > a:first-child:has(> img) {
    order: 0;
    clip-path: none;
  }

  .promo-photo-reverse .wrapper {
    order: 1;
    margin-right: 0;
    padding: var(--space-6) var(--space-5);
  }

  .promo-photo-reverse .link-button {
    position: static;
    margin-top: var(--space-5);
  }

  .promo-photo-reverse .wrapper::before {
    display: none;
  }

  .promo-photo-straight .wrapper {
    padding: var(--space-6) var(--space-5);
  }

  .city-paginator .more-items-item > a:first-child:has(> img) {
    display: none;
  }

  /* Previous and next side by side, the "View the route" button full width under them */
  .city-paginator .more-items-list {
    display: grid;
    padding-bottom: calc(48px + var(--space-6));  /* room for the button */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--space-4);
  }

  .city-paginator .more-items-item,
  .city-paginator .more-items-item:last-child {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .city-paginator .more-items-item:last-child {
    align-items: flex-end;
    text-align: right;
  }

  .city-paginator .more-items-item:only-child {
    grid-column: 2;
  }

  .city-paginator.paginator-prev .more-items-item:only-child {
    flex-direction: column;
    grid-column: 1;
    align-items: flex-start;
  }

  .city-paginator h2 {
    font-size: clamp(24px, 8vw, 32px);
  }

  .city-paginator .more-items-item:first-child .link-button {
    top: auto;
    right: var(--container-inset);
    bottom: var(--space-4);
    left: var(--container-inset);
    width: auto;
    transform: none;
  }

  .city-paginator .more-items-item:first-child .link-button a {
    width: 100%;
  }
}

/* ==========================================================
  ZOOM ON MOBILE (class zoom-mobile on a widget, see js/script.js initZoomMobile)
  ========================================================== */
@media (max-width: 767px) {
  .zoom-mobile img {
    cursor: zoom-in;  /* magnifier */
  }
}

.zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  background: var(--color-dark);
}

.zoom-overlay.is-open {
  display: block;
}

html.zoom-open {
  overflow: hidden;
}

/* flex + margin:auto centres the image and still lets it scroll when it is larger */
.zoom-overlay-scroller {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y pinch-zoom;
}

.zoom-overlay-scroller img {
  flex: none;
  width: max(240vw, 900px);
  max-width: none;
  height: auto;
  margin: auto;
  cursor: zoom-out;
}

.zoom-overlay-close {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: var(--color-primary);
  color: var(--color-dark);
  font-size: var(--font-size-xl, 24px);
  cursor: pointer;
}

/* ==========================================================
  HELPERS (CMS classes)
  ========================================================== */
.hidden { display: none !important; }
.full-width { width: 100%; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.overflow-hidden { overflow: hidden; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.layout-row { display: flex; }
.align-items-center { align-items: center; }
.justify-content-space-between { justify-content: space-between; }

/* ==========================================================
  GUEST EXPERIENCES (sitemap WEB_2025_EXPERIENCES, body class experiences-page)
  exp-head: heading + intro (section_experiences, subsec 3) on the dark surface.
  exp-tabs: one tab per city (Tabs Subwidgets); each city is an exp-city with
  exp-list (numbered cards) and exp-detail (the selected experience; initExperiences in js/script.js).
  The detail text is one rich-text blob, so its blocks are placed by position.
  ========================================================== */
#main .zone-1 > .widget.exp-head:not(.top-stories-wrapper):not(.md-modal) {
  padding: 74px var(--container-inset) 72px;
  background: var(--color-dark);
  color: var(--color-white);
}

.exp-head .more-items-list {
  display: block;
}

.exp-head .wrapper {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  grid-template-areas: 'title text' 'title long';
  align-items: start;
  column-gap: var(--space-12, 48px);
  row-gap: var(--space-5);
  padding: 0;
}

.exp-head h2 {
  grid-area: title;
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: 60px;
  font-style: italic;
  font-weight: 800;
  line-height: 60px;
  text-transform: uppercase;
  text-indent: calc(60px * var(--slope));  /* first line steps in along the slope */
  color: var(--color-white);
}

.exp-head .accent {
  color: var(--color-primary);
}

.exp-head .more-items-title {
  color: inherit;
  pointer-events: none;
}

.exp-head .more-items-text {
  grid-area: text;
  max-width: 680px;
  margin: 0;
  font-size: 26px;
  line-height: 36px;
  color: var(--color-white);
}

.exp-head .more-items-long-text {
  grid-area: long;
  max-width: 520px;
  font-size: var(--font-size-xl);
  line-height: 30px;
  color: var(--color-dark-20);
}

.exp-head .more-items-long-text p {
  margin: 0;
}

/* City tabs: dark strip with a blue line under it, the active tab is a blue parallelogram */
#main .zone-1 > .widget.exp-tabs:not(.top-stories-wrapper):not(.md-modal) {
  padding: 0;
}

.exp-tabs {
  --tab-h: 84px;
  --tab-slant: calc(var(--tab-h) * var(--slope));
}

/* The tab strip stays pinned to the top while the cities scroll (right under the header when it comes back) */
.exp-tabs > header {
  position: sticky;
  top: 0;
  z-index: 15;  /* under the header (20) */
  padding: 0 var(--container-inset);
  border-bottom: var(--space-3) solid var(--color-primary);
  background: var(--color-dark);
  transition: top .3s ease;
}

body.header-fixed.scroll-up .exp-tabs > header {
  top: var(--header-height);
}

.exp-tabs .tabs {
  gap: 0;
  padding: 0;
  list-style: none;
}

.exp-tabs .tab {
  position: relative;
  flex: 0 1 218px;
  min-width: 0;
}

.exp-tabs .tab + .tab::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--tab-slant) + 1px);
  height: var(--tab-h);
  background: var(--color-dark-60);
  clip-path: polygon(calc(100% - 1px) 0, 100% 0, 1px 100%, 0 100%);
}

/* no separator next to the active tab: its own diagonal edge is the limit */
.exp-tabs .tab.active::before,
.exp-tabs .tab.active + .tab::before {
  display: none;
}

.exp-tabs .tab a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--tab-h);
  padding: 0 calc(var(--space-6) + var(--tab-slant) / 2);  /* centred, clear of the slanted edges */
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: 26px;
  font-style: italic;
  font-weight: 800;
  line-height: 34px;
  text-align: center;
  color: var(--color-white);
}

.exp-tabs .tab a.active {
  background: var(--color-primary);
  clip-path: polygon(var(--tab-slant) 0, 100% 0, calc(100% - var(--tab-slant)) 100%, 0 100%);
  color: var(--color-white);
}

.exp-tabs .tab a.active::after {
  display: none;
}

.exp-tabs .tabs-content {
  padding: var(--space-14, 56px) var(--container-inset);
}

.exp-city > .widget-title {
  display: none;
}

/* with the script ready only the pane of the active tab is shown */
.exp-tabs-ready .exp-city:not(.is-active) {
  display: none;
}

.exp-city,
.exp-city-inner {
  padding: 0;
}

.exp-city-inner {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  align-items: stretch;  /* the detail panel is as tall as the whole list */
}

/* numbered list: a dark band with a diagonal edge and a strip, title and dates next to it */
.exp-list .more-items-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  counter-reset: exp;
}

.exp-list .more-items-item {
  --band-h: 100px;
  --band-slant: calc(var(--band-h) * var(--slope));
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: var(--band-h);
  justify-content: flex-start;
  padding-left: 96px;
  text-align: left;
  margin-right: var(--space-2);  /* the street to the detail panel equals the gap between items */
  background: var(--color-sky-80);
  color: var(--color-dark);
  counter-increment: exp;
  cursor: pointer;
}

.exp-list .more-items-item > a:first-child,
.exp-list .link-button {
  display: none;
}

.exp-list .more-items-item::before,
.exp-list .more-items-item::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--band-slant)) 100%, 0 100%);
}

.exp-list .more-items-item::after {
  width: 110px;
  z-index: 0;
  background: var(--color-primary);
}

.exp-list .more-items-item::before {
  content: counter(exp, decimal-leading-zero);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 96px;
  padding-right: var(--space-3);
  background: var(--color-dark);
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: 24px;
  font-style: italic;
  font-weight: 800;
  color: var(--color-primary);
}

.exp-list .more-items-item.is-active {
  margin-right: 0;  /* only the selected item reaches the detail panel */
  background: var(--color-dark);
  color: var(--color-white);
}

.exp-list .more-items-item.is-active::before {
  background: var(--color-primary);
  color: var(--color-white);
}

.exp-list .more-items-item.is-active::after {
  background: var(--color-primary-80);
}

.exp-list .wrapper {
  display: block;
  flex: 1;
  text-align: left;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6);
}

.exp-list h2 {
  margin: 0;
  text-align: left;
  font-size: var(--font-size-md);
  font-weight: 700;
  line-height: 20px;
  text-transform: uppercase;
}

.exp-list .more-items-title {
  color: inherit;
}

.exp-list .more-items-text {
  margin: var(--space-1) 0 0;
  text-align: left;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  color: inherit;
  opacity: .8;
}

/* detail panel: the wrapper dissolves (display: contents) so that its blocks and the photo share one grid:
   title + description on the left, photo on the right, then sessions / included, then the button */
.exp-detail {
  display: flex;
  flex-direction: column;
  background: var(--color-dark);
  color: var(--color-white);
}

.exp-city-inner.exp-ready .exp-detail .more-items-item {
  display: none;
}

.exp-city-inner.exp-ready .exp-detail .more-items-item.is-active {
  display: grid;
}

.exp-detail .more-items-list {
  display: flex;
  flex: 1;
}

/* two equal columns, the same 28px all around (photo, button and text) and the panel is as tall as the list */
.exp-detail .more-items-item {
  flex: 1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto auto auto auto 1fr;
  align-items: start;
  column-gap: var(--space-7, 28px);
  row-gap: var(--space-2-5, 10px);
  padding: var(--space-7, 28px);
  background: none;
  color: var(--color-white);
}

.exp-detail .wrapper {
  display: contents;
}

.exp-detail .more-items-item > a:first-child {
  grid-column: 2;
  grid-row: 1 / span 3;
  display: block;
  overflow: hidden;
  width: 100%;
  min-width: 0;
  height: 250px;
}

.exp-detail .more-items-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.exp-detail .more-items-item > a:last-child:empty {
  display: none;
}

/* the booking overlay copies its content from here; it is never shown in the page */
.exp-detail .ov-content {
  display: none;
}

.exp-detail .wrapper > * {
  grid-column: 1;
  margin: 0;
}

.exp-detail .more-items-category {
  grid-row: 1;
  align-self: start;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: 40px;
  font-style: italic;
  font-weight: 800;
  line-height: 44px;
  text-transform: uppercase;
  color: var(--color-white);
}

.exp-detail .exp-eyebrow {
  display: block;
  margin-top: -5px;  /* the top of the capitals lines up with the top of the photo */
  font-size: 28px;
  line-height: 30px;
  color: var(--color-primary);
}

.exp-detail h2 {
  grid-row: 2;
  font-size: var(--font-size-lg);
  font-weight: 400;
  line-height: 28px;
  color: var(--color-white);
}

.exp-detail h2 a {
  display: block;
  color: inherit;
  pointer-events: none;
}

.exp-detail .wrapper > .more-items-text:empty,
.exp-detail .wrapper > p:empty {
  display: none;
}

/* SESSIONS / INCLUDED: a heading (p before a list) and its list; first pair left, second pair right */
.exp-detail .wrapper > p:has(+ ul) {
  margin-top: var(--space-8);
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: 28px;
  font-style: italic;
  line-height: 30px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.exp-detail .wrapper > p:has(+ ul) strong {
  font-weight: 800;
}

.exp-detail .wrapper > p:has(+ ul:nth-of-type(1)),
.exp-detail .wrapper > ul:nth-of-type(1) {
  grid-column: 1;
}

.exp-detail .wrapper > p:has(+ ul:nth-of-type(2)),
.exp-detail .wrapper > ul:nth-of-type(2) {
  grid-column: 2;
}

.exp-detail .wrapper > p:has(+ ul:nth-of-type(1)),
.exp-detail .wrapper > p:has(+ ul:nth-of-type(2)) {
  grid-row: 4;
}

.exp-detail .wrapper > ul:nth-of-type(1),
.exp-detail .wrapper > ul:nth-of-type(2) {
  grid-row: 5;
}

.exp-detail .wrapper > ul {
  padding: 0;
  list-style: none;
  font-size: var(--font-size-md);
  line-height: 22px;
}

.exp-detail .wrapper > ul ul {
  margin: 0;
  padding-left: var(--space-4);
  list-style: none;
}

.exp-detail .wrapper > ul li {
  margin-bottom: var(--space-2);
}

/* price: the amount big, the unit small underneath, level with the button */
.exp-detail .wrapper > .exp-price {
  grid-column: 1;
  grid-row: 6;
  align-self: end;
  display: flex;
  flex-direction: column;
  margin-top: var(--space-6);
}

.exp-detail .exp-amount {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: 40px;
  font-style: italic;
  font-weight: 800;
  line-height: 44px;
  color: var(--color-white);
}

.exp-detail .exp-unit {
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 18px;
  text-transform: uppercase;
  color: var(--color-dark-20);
}

/* button, bottom right: rectangular, brand blue with dark text */
.exp-detail .link-button {
  grid-column: 2;
  grid-row: 6;
  align-self: end;
  justify-self: end;
  margin-top: var(--space-6);
  --button-bg: var(--color-primary);
  --button-text: var(--color-dark);
}

.exp-detail .link-button a {
  --sweep-bg: var(--color-white);  /* hover: white fill, dark label */
  --sweep-text: var(--color-dark);
  width: 188px;
  justify-content: center;
  clip-path: none;
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
}

/* city tab without experiences: a message on the white surface */
.exp-empty {
  padding: var(--space-8) 0 var(--space-12, 48px);
  background: none;
  color: var(--color-dark);
}

.exp-empty .more-items-list {
  display: block;
}

.exp-empty .wrapper {
  display: block;
  max-width: 640px;
  padding: 0;
  text-align: left;
}

.exp-empty h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: 40px;
  font-style: italic;
  font-weight: 800;
  line-height: 44px;
  text-transform: uppercase;
  color: var(--color-dark);
}

.exp-empty .more-items-title {
  color: inherit;
  pointer-events: none;
}

.exp-empty .more-items-text {
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: 28px;
  color: var(--color-dark-60);
}

@media (max-width: 1023px) {
  #main .zone-1 > .widget.exp-head:not(.top-stories-wrapper):not(.md-modal) {
    padding-block: var(--space-12, 48px);
  }

  .exp-head .wrapper {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'title' 'text' 'long';
  }

  .exp-head h2 {
    font-size: 44px;
    line-height: 44px;
    text-indent: calc(44px * var(--slope));
  }

  .exp-head .more-items-text {
    font-size: 22px;
    line-height: 32px;
  }

  .exp-head .more-items-long-text {
    font-size: var(--font-size-lg);
    line-height: 28px;
  }

  .exp-tabs {
    --tab-h: 60px;
  }

  .exp-tabs .tabs-content {
    padding-top: var(--space-2);
  }

  .exp-tabs .tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .exp-tabs .tab {
    flex: 0 0 auto;
  }

  .exp-tabs .tab a {
    padding-inline: calc(var(--space-6) + var(--tab-slant) / 2);
    font-size: 22px;
    white-space: nowrap;
  }

  .exp-city-inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;  /* the selected card touches the detail below, as it does at its right on desktop */
  }

  /* the list stays pinned under the tabs (and under the header when it comes back) */
  .exp-list {
    --pin-top: calc(var(--tab-h) + var(--space-3));  /* the tab strip and its blue line */
    position: sticky;
    top: var(--pin-top);
    z-index: 14;  /* under the tab strip (15) */
    background: var(--color-white);
    transition: top .3s ease;
  }

  body.header-fixed.scroll-up .exp-list {
    top: calc(var(--header-height) + var(--pin-top));
  }

  /* the list becomes a horizontal row of equal, compact cards (no category line) that scrolls sideways;
     they all line up at the top, the unselected ones keep a street at the bottom and the selected one
     reaches the detail */
  .exp-list .more-items-list {
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .exp-list .more-items-list::-webkit-scrollbar {
    display: none;
  }

  .exp-list .more-items-item,
  .exp-list .more-items-item.is-active {
    --band-h: 52px;
    flex: 0 0 min(300px, 82%);
    margin-right: 0;
    padding-left: 72px;
    border-bottom: var(--space-2) solid var(--color-white);
    scroll-snap-align: start;
  }

  .exp-list .more-items-item.is-active {
    border-bottom: 0;
  }

  .exp-list .more-items-item::before {
    width: 72px;
    font-size: 20px;
  }

  .exp-list .more-items-item::after {
    width: 86px;
  }

  .exp-list .wrapper {
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-6);
  }

  .exp-list h2 {
    font-size: var(--font-size-sm);
    line-height: 18px;
  }

  .exp-list .more-items-text {
    display: none;
  }

  .exp-detail .more-items-item {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    padding: var(--space-5) var(--space-5) var(--space-7, 28px);
  }

  .exp-detail .more-items-item > a:first-child {
    grid-column: 1;
    grid-row: 1;
    height: 240px;
  }

  .exp-detail .wrapper > *,
  .exp-detail .wrapper > p:has(+ ul:nth-of-type(n)),
  .exp-detail .wrapper > ul:nth-of-type(n),
  .exp-detail .wrapper > .exp-price,
  .exp-detail .link-button {
    grid-column: 1;
    grid-row: auto;
  }

  .exp-detail .more-items-category {
    margin-top: var(--space-3);
  }

  .exp-detail .link-button,
  .exp-detail .link-button a {
    width: 100%;
  }
}

/* ==========================================================
   LIVE / REPLAYS PAGE (class relive on the wrapper)
   Left: video with its title below. Right: list of replays, as tall as the left column and scrollable.
   ========================================================== */
.relive {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.relive .two-of-three .widget-title {
  margin: var(--space-4) 0 0;
}

.relive iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* The list takes the video's height (height 0 + min-height 100%) and scrolls inside */
.relive .one-of-three {
  display: flex;
  flex-direction: column;
  height: 0;
  min-height: 100%;
  padding: 0;
}

.relive .one-of-three .widget-title {
  align-self: stretch;  /* the generic title rule centres and shrinks it inside the flex column */
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-xl);
  text-align: left;
}

.relive .one-of-three .more-items-item {
  cursor: pointer;
}

.relive .one-of-three .more-items-item.active h2 {
  color: var(--color-primary);
}

.relive .one-of-three .tabs-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.relive .one-of-three .more-items-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.relive .one-of-three .more-items-item {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
}

.relive .one-of-three .more-items-img-container {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.relive .one-of-three .more-items-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.relive .one-of-three .more-items-item h2 {
  font-size: var(--font-size-md);
  line-height: 20px;
}

@media (max-width: 1024px) {
  .relive {
    grid-template-columns: minmax(0, 1fr);
  }

  .relive .one-of-three {
    height: auto;
    min-height: 0;
  }

  .relive .one-of-three .tabs-content {
    overflow: visible;
  }

  /* The list is now below the video: the title goes above it (the embed holds the iframe and then the title) */
  .relive .two-of-three > * {
    display: flex;
    flex-direction: column-reverse;
  }

  .relive .two-of-three .widget-title {
    margin: 0 0 var(--space-4);
  }
}

/* ==========================================================
   SCOREBOARD (class scoreboard-tabs on the TOR Scoreboard widget)
   Page title and tabs share the first row (generic title-and-tabs grid). The standings are a
   native table: dark heading bar, then 56px rows with diagonal bands (Figma "Scoreboard / Table").
   Cell order in a row: position, avatar, team, one cell per column, total.
   ========================================================== */
.scoreboard-tabs {
  padding: var(--space-8) var(--container-inset) var(--space-10, 40px);
}

/* "Full scoreboard" link to the 2021 standings: not part of this page */
.scoreboard-tabs .ranking-bottom-link {
  display: none;
}

/* Title (dark, large) and tabs as grey parallelograms; the active one is blue */
.scoreboard-tabs .widget-title {
  font-size: clamp(48px, 5.3vw, 72px);
  line-height: 1.1;
  color: var(--color-dark);
}

.scoreboard-tabs .tabs {
  gap: 0;
}

/* Same slanted tabs as the photo gallery toggle (MOSAIC | SLIDES): grey base, blue when active,
   and a slanted sweep from grey to blue on hover (the active tab does not react) */
.scoreboard-tabs .tabs .tab a {
  display: block;
  padding: 14px 28px;
  --tab-base: var(--color-gray-lighter);
  --tab-fill: var(--color-primary);
  background: linear-gradient(calc(90deg + atan(var(--slope))), var(--tab-fill) var(--sweep), var(--tab-base) var(--sweep));
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--color-dark);
  transition: --sweep .22s ease-in-out, color .22s ease-in-out;
}

.scoreboard-tabs .tabs .tab:not(:last-child) a {
  padding-right: 31px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}

.scoreboard-tabs .tabs .tab:not(:first-child) {
  margin-left: -12px;
}

.scoreboard-tabs .tabs .tab:not(:first-child) a {
  padding-left: 36px;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%);
}

.scoreboard-tabs .tabs .tab a.active {
  --tab-base: var(--color-primary);
}

.scoreboard-tabs .tabs .tab a.active::after {
  display: none;
}

@media (hover: hover) {
  .scoreboard-tabs .tabs .tab a:not(.active):hover {
    --sweep: 100%;
    color: var(--color-dark);
    transition: --sweep .36s ease-out, color .36s ease-out;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scoreboard-tabs .tabs .tab a {
    transition-duration: 0s;
  }
}

/* Teams come with a full name and a short code: the code is for mobile */
.scoreboard-tabs .ranking-team .is-mobile {
  display: none;
}

.scoreboard-tabs .class-title {
  display: none;
}

.scoreboard-tabs .table-results table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 var(--space-2);  /* white gap between heading bar and rows, and between teams */
}

.scoreboard-tabs .table-header td {
  width: 72px;
  height: 44px;
  padding: 0;
  background: var(--color-dark);
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: 22px;
  font-style: italic;
  font-weight: 800;
  line-height: 26px;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-white);
}

/* The first heading cell spans position, avatar and team: it carries the POS and TEAM headings */
.scoreboard-tabs .table-header td[colspan] {
  width: auto;
  text-align: left;
}

.scoreboard-tabs .table-header td[colspan]::before {
  content: 'POS';
  display: inline-block;
  width: 72px;
  text-align: center;
}

html[lang="es"] .scoreboard-tabs .table-header td[colspan]::after { content: 'EQUIPO'; }
html[lang="fr"] .scoreboard-tabs .table-header td[colspan]::after { content: 'ÉQUIPE'; }
html[lang="it"] .scoreboard-tabs .table-header td[colspan]::after { content: 'SQUADRA'; }

.scoreboard-tabs .table-header td[colspan]::after {
  content: 'TEAM';
  display: inline-block;
  margin-left: 72px;
}

.scoreboard-tabs .table-header .total {
  width: 144px;
}

.scoreboard-tabs .ranking-item:nth-child(even) {
  background: var(--color-sky-20);
}

.scoreboard-tabs .ranking-item td {
  position: relative;
  height: 56px;
  padding: 0;
  vertical-align: middle;
  isolation: isolate;  /* the diagonal bands sit behind the text but above the row background */
}

.scoreboard-tabs .ranking-position {
  width: 72px;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: 48px;
  font-style: italic;
  font-weight: 800;
  line-height: 52px;
  text-align: center;
  color: var(--color-primary);
}

.scoreboard-tabs .ranking-position::before {
  content: '';
  position: absolute;
  inset: 0 -4px 0 0;
  z-index: -1;
  background: var(--color-dark);
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}

/* Blue region behind the boat. Its slanted left edge continues the position band (14px over the row),
   with a lighter thin strip right next to the band */
.scoreboard-tabs .ranking-avatar::before,
.scoreboard-tabs .ranking-avatar::after {
  content: '';
  position: absolute;
  inset: 0 0 0 -10px;
  z-index: -2;
  background: var(--color-primary);
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}

.scoreboard-tabs .ranking-avatar::after {
  z-index: -1;
  background: var(--color-primary-light);
  clip-path: polygon(14px 0, 22px 0, 8px 100%, 0 100%);
}

.scoreboard-tabs .ranking-avatar {
  width: 64px;
  min-width: 64px;
  text-align: center;
}

.scoreboard-tabs .ranking-avatar .team-menu-logo {
  display: block;
  height: 64px;
  width: auto;
  max-width: none;  /* a squeezed cell must not squash the boat */
  margin: -4px auto;
}

.scoreboard-tabs .ranking-item .ranking-team {
  padding-left: var(--space-1);
  white-space: nowrap;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: 28px;
  font-style: italic;
  font-weight: 800;
  line-height: 28px;
  text-transform: uppercase;
  color: var(--color-dark);
}

.scoreboard-tabs .ranking-number {
  width: 72px;
  font-size: var(--font-size-xl);
  font-weight: 600;
  line-height: 28px;
  text-align: center;
  color: var(--color-dark);
}

/* Every second column sits on a grey parallelogram */
.scoreboard-tabs .ranking-number:not(.total):nth-child(even)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-gray-lighter);
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}

.scoreboard-tabs .ranking-number.total {
  width: 144px;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--font-display-wdth);
  font-size: 28px;
  font-style: italic;
  font-weight: 800;
  line-height: 32px;
  color: var(--color-white);
}

.scoreboard-tabs .ranking-number.total::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-primary);
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%);
}

/* Tablet and mobile keep the full team names: the table scrolls sideways and the total stays pinned to the right,
   with a soft white fade on its left edge so the scroll is noticeable */
@media (max-width: 1024px) {
  .scoreboard-tabs .table-results {
    overflow-x: auto;
  }

  .scoreboard-tabs .table-header .total,
  .scoreboard-tabs .ranking-number.total {
    position: sticky;
    right: 0;
  }

  /* The fade follows the total's slanted left edge: its right side is cut with the same 14px slope */
  .scoreboard-tabs .ranking-number.total::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 calc(-1 * var(--space-4));
    z-index: -1;
    width: calc(var(--space-4) + 14px);
    background: linear-gradient(to right, transparent, var(--color-white));
    clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
    pointer-events: none;
  }
}

@media (max-width: 767px) {
  .scoreboard-tabs .table-header td {
    width: 48px;
    font-size: var(--font-size-md);
  }

  .scoreboard-tabs .table-header .total,
  .scoreboard-tabs .ranking-number.total {
    width: 72px;
  }

  .scoreboard-tabs .ranking-position {
    width: 56px;
    font-size: 36px;
  }

  .scoreboard-tabs .ranking-item .ranking-team {
    padding-left: var(--space-2);
    font-size: var(--font-size-xl);
    line-height: 24px;
  }

  .scoreboard-tabs .ranking-number {
    width: 48px;
    font-size: var(--font-size-lg);
  }

  .scoreboard-tabs .ranking-number.total {
    font-size: var(--font-size-xl);
  }

  .scoreboard-tabs .table-header td[colspan]::before {
    width: 56px;
  }

  .scoreboard-tabs .table-header td[colspan]::after {
    margin-left: 64px;
  }
}

/* Scoreboard cells keep their width when the team names push the table wider than the screen */
.scoreboard-tabs .table-header td:not([colspan]),
.scoreboard-tabs .ranking-position,
.scoreboard-tabs .ranking-number {
  min-width: 72px;
}

.scoreboard-tabs .table-header .total,
.scoreboard-tabs .ranking-number.total {
  min-width: 144px;
}

@media (max-width: 767px) {
  .scoreboard-tabs .table-header td:not([colspan]),
  .scoreboard-tabs .ranking-number {
    min-width: 48px;
  }

  .scoreboard-tabs .ranking-position {
    min-width: 56px;
  }

  .scoreboard-tabs .table-header .total,
  .scoreboard-tabs .ranking-number.total {
    min-width: 72px;
  }
}