/*!
Context archive — Header
Loaded after trf.css.

>>> TABLE OF CONTENTS
# Header metrics
# Legacy header resets
# 1. Main row (logo / newsletters / search)
# Search and menu popups
# Menu social icons
# 2. Attribution
# 3. Archive notice
# 4. Sections bar
# 4b. Sections mega menu
# 5. Sticky bar
# Responsive
*/

/*--------------------------------------------------------------
# Header metrics
--------------------------------------------------------------*/

:root {
  /* Colour tokens are defined in trf.css. Only header-specific metrics here. */
  --ctx-max-width: 1400px;
  --ctx-pad-x: 3rem;
  --ctx-logo-width: clamp(200px, 17vw, 290px);
  --ctx-sticky-h: 6.5rem;
  --ctx-sticky-logo-w: 10rem;
  --ctx-z-sticky: 9998;
  --ctx-z-popup: 9999;

  /* Values taken from the original site. The source stylesheet is based on a
     10px root, so its rem values are converted to px here (root is 16px). */
  --ctx-newsletter-bg: var(--ctx-blue-accent, #006daa);
  --ctx-newsletter-bg-hover: #005b8f;
  --ctx-newsletter-h: 35px;
  --ctx-newsletter-radius: 5px;

  --ctx-sections-bg: var(--ctx-blue-deep, #004a7c);
  --ctx-sections-bg-hover: var(--ctx-blue-deep-hover, #003a61);
  --ctx-sections-h: 45px;
  --ctx-sections-rule: #000;

  /* Sections mega menu. The panel is 552px tall on the reference: 480px of
     content plus 36px of padding above and below. */
  --ctx-mega-bg: var(--ctx-navy-mid, #042d52);
  --ctx-mega-topics-bg: var(--ctx-blue-deep, #004a7c);
  --ctx-mega-tab-dim: #003559;
  --ctx-mega-content-h: 480px;
  --ctx-mega-pad-y: 36px;
  --ctx-mega-col-w: 26.5%;
  --ctx-mega-gap: 36px;
  --ctx-mega-rule: rgba(255, 255, 255, 0.3);
  --ctx-mega-divider: rgba(255, 255, 255, 0.15);
  --ctx-mega-note-gap: 40px;
  --ctx-mega-note-title-gap: 20px;
  --ctx-mega-note-link-gap: 28px;
  --ctx-mega-max-width: 1600px;
  --ctx-z-mega: 9997;

  --ctx-search-btn-bg: var(--ctx-blue-deep, #004a7c);
  --ctx-search-link: var(--ctx-blue-deep, #004a7c);

  /* Menu social icons: white tile, blue glyph. Measured on the reference. */
  --ctx-social-box: 40px;
  --ctx-social-glyph: 22px;
  --ctx-social-gap: 14px;
  --ctx-social-radius: 8px;
  --ctx-social-bg: #fff;
  --ctx-social-glyph-colour: var(--ctx-blue-deep, #004a7c);

  --ctx-burger-w: 34px;
  --ctx-menu-close-glyph: 26px;
  --ctx-close-glyph: 20px;
}

/*--------------------------------------------------------------
# Legacy header resets
--------------------------------------------------------------*/

#masthead.ctx-header {
  position: relative;
  width: 100%;
  background-color: var(--surface-dark);
  transform: none;
}

/* Reclaims the offset previously reserved for the fixed header */
#primary {
  margin-top: 0;
}

.ctx-header *,
.ctx-header *::before,
.ctx-header *::after {
  box-sizing: border-box;
}

.ctx-header p {
  margin: 0;
}

.ctx-header a {
  color: var(--text-on-dark);
  text-decoration: none;
}

.ctx-header a:focus-visible,
.ctx-header button:focus-visible {
  outline: 2px solid var(--text-on-dark);
  outline-offset: 3px;
}

/*--------------------------------------------------------------
# 1. Main row
--------------------------------------------------------------*/

.ctx-header-main {
  background-color: var(--surface-dark);
}

.ctx-header-inner {
  max-width: var(--ctx-max-width);
  margin: 0 auto;
  padding: 28px var(--ctx-pad-x) 34px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 24px;
}

/* --- left column --- */

.ctx-header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.ctx-newsletters-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: var(--ctx-newsletter-h);
  padding-left: 20px;
  padding-right: 20px;
  border: 0;
  border-radius: var(--ctx-newsletter-radius);
  background-color: var(--ctx-newsletter-bg);
  color: var(--text-on-dark);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.25s ease;
}

.ctx-newsletters-btn:hover,
.ctx-newsletters-btn:focus {
  background-color: var(--ctx-newsletter-bg-hover);
  color: var(--text-on-dark);
  text-decoration: none;
}

/* The button is not in use and is hidden at every width. Migrated from the
   Customizer, where it carried !important, so the flag is kept: the theme
   cannot see what else might set display on it. */
.ctx-newsletters-btn {
  display: none !important;
}

/* --- icon buttons (menu toggle and search) --- */

.ctx-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-on-dark);
  cursor: pointer;
  transition: opacity 0.25s ease;
}

.ctx-icon-btn:hover {
  opacity: 0.75;
  background: transparent;
  border: 0;
}

/* Menu toggle: burger when closed, cross when open. The width is fixed to the
   burger so the button does not shift as the two marks swap. */
.ctx-menu-toggle {
  min-width: calc(var(--ctx-burger-w) + 12px);
}

/* The toggle opens the row it sits in, so its left padding would set the
   burger off the gutter shared by the Newsletters button and the page
   content. The padding is dropped and the glyph pinned to the start, while
   the width stays fixed so the swap between the two marks is still stable. */
.ctx-header-left .ctx-menu-toggle,
.ctx-sticky-left .ctx-menu-toggle {
  justify-content: flex-start;
  min-width: calc(var(--ctx-burger-w) + 6px);
  padding-left: 0;
}

.ctx-burger {
  display: block;
  width: var(--ctx-burger-w);
}

.ctx-burger span {
  display: block;
  height: 2px;
  background-color: var(--text-on-dark);
  border-radius: 2px;
}

.ctx-burger span + span {
  margin-top: 8px;
}

.ctx-menu-toggle .ctx-menu-close-icon {
  display: none;
  flex: 0 0 auto;
  width: var(--ctx-menu-close-glyph);
  height: var(--ctx-menu-close-glyph);
  min-width: var(--ctx-menu-close-glyph);
  min-height: var(--ctx-menu-close-glyph);
  max-width: none;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.ctx-menu-toggle[aria-expanded="true"] .ctx-burger {
  display: none;
}

.ctx-menu-toggle[aria-expanded="true"] .ctx-menu-close-icon {
  display: block;
}

.ctx-menu-toggle .ctx-menu-label--close {
  display: none;
}

.ctx-menu-toggle[aria-expanded="true"] .ctx-menu-label--open {
  display: none;
}

.ctx-menu-toggle[aria-expanded="true"] .ctx-menu-label--close {
  display: inline-block;
}

/* Search icon: SVG file served from the theme image folder */
.ctx-search-icon {
  display: block;
  width: 30px;
  height: 30px;
}

/* --- logo --- */

.ctx-branding {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.ctx-logo-link {
  display: block;
}

.ctx-logo {
  display: block;
  width: var(--ctx-logo-width);
  height: auto;
}

.ctx-tagline {
  color: var(--text-on-dark);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* --- right column --- */

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

/*--------------------------------------------------------------
# Search and menu popups (shared by header and sticky bar)
--------------------------------------------------------------*/

.ctx-popup[hidden] {
  display: none;
}

.ctx-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--ctx-z-popup);
  background-color: var(--surface-dark);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.5);
}

.ctx-popup-inner {
  position: relative;
  max-width: var(--ctx-max-width);
  margin: 0 auto;
  padding: 28px var(--ctx-pad-x);
}

.ctx-popup .ctx-popup-close {
  position: absolute;
  top: 14px;
  right: var(--ctx-pad-x);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  line-height: 1;
  cursor: pointer;
}

.ctx-popup .ctx-popup-close:hover {
  opacity: 0.75;
  background: transparent;
  border: 0;
}

/* Close icon: SVG file served from the theme image folder.
   The square box is enforced here so the mark is never scaled unevenly. */
.ctx-popup .ctx-popup-close .ctx-close-icon {
  display: block;
  flex: 0 0 auto;
  width: var(--ctx-close-glyph);
  height: var(--ctx-close-glyph);
  min-width: var(--ctx-close-glyph);
  min-height: var(--ctx-close-glyph);
  max-width: none;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/*--------------------------------------------------------------
# Search popup — centred modal
--------------------------------------------------------------*/

.ctx-search-popup {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: none;
  overflow-y: auto;
}

.ctx-search-popup .ctx-popup-inner {
  width: 80%;
  max-width: 996px;
  min-height: 262px;
  margin: 0;
  padding: 60px;
  display: flex;
  flex-direction: column;
  background-color: var(--ctx-white, #fff);
  border: 1px solid #ccc;
}

.ctx-popup.ctx-search-popup .ctx-popup-close {
  position: static;
  align-self: flex-end;
  order: -1; /* keeps the close button above the search field */
  width: 24px;
  height: 24px;
  margin-bottom: 16px;
}

/* The modal sits on white: the mark is forced to solid black. */
.ctx-popup.ctx-search-popup .ctx-popup-close .ctx-close-icon {
  filter: brightness(0);
}

.ctx-popup.ctx-search-popup .ctx-popup-close:focus-visible {
  outline: 2px solid #000;
  outline-offset: 3px;
}

/* Field group: centred in the remaining vertical space */
.ctx-search-body {
  margin-top: auto;
  margin-bottom: auto;
}

/* --- form --- */

.ctx-search-form {
  display: flex;
  gap: 20px;
  max-width: none;
  margin: 0;
}

.ctx-search-form input[type="search"] {
  flex: 1;
  height: 55px;
  padding: 0 16px 0 50px;
  border: 0 !important;
  border-radius: 2px;
  outline: 1px solid #747474;
  background: var(--ctx-white, #fff)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23747474' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5 21 21'/%3E%3C/svg%3E")
    no-repeat 17px center / 22px 22px;
  color: var(--ctx-black, #000);
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}

.ctx-search-form input[type="search"]::placeholder {
  color: #747474;
  opacity: 1;
}

.ctx-search-form input[type="search"]:focus {
  outline: 2px solid #000;
}

.ctx-search-form button {
  flex: 0 0 auto;
  width: 185px;
  height: 55px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background-color: var(--ctx-search-btn-bg);
  color: var(--text-on-dark);
  font-size: 17px;
  font-weight: 600;
  line-height: 23px;
  text-transform: uppercase;
  cursor: pointer;
}

.ctx-search-form button:hover,
.ctx-search-form button:focus {
  background-color: var(--ctx-search-btn-bg);
  border-color: transparent;
  text-decoration: underline;
}

/* Link below the search field */
.ctx-search-advanced {
  display: block;
  margin-top: 18px;
  text-align: center;
  color: var(--ctx-search-link);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-decoration: underline;
}

.ctx-search-advanced:hover,
.ctx-search-advanced:focus,
.ctx-search-advanced:visited {
  color: var(--ctx-search-link);
  text-decoration: underline;
}

/*--------------------------------------------------------------
# Menu popup
--------------------------------------------------------------*/

.ctx-nav-popup {
  max-height: 100vh;
  overflow-y: auto;
}

.ctx-nav-popup a {
  color: var(--text-on-dark);
}

/*--------------------------------------------------------------
# Menu social icons
# White tile, blue glyph. The colour is declared on every link state:
# a visited-only rule elsewhere in the cascade would otherwise turn
# individual glyphs white on the white tile.
--------------------------------------------------------------*/

.ctx-nav-popup .ctx-hb-social {
  display: flex;
  align-items: center;
  gap: var(--ctx-social-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ctx-nav-popup .ctx-hb-social li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ctx-nav-popup .ctx-hb-social li .ctx-hb-social__link,
.ctx-nav-popup .ctx-hb-social li .ctx-hb-social__link:link,
.ctx-nav-popup .ctx-hb-social li .ctx-hb-social__link:visited,
.ctx-nav-popup .ctx-hb-social li .ctx-hb-social__link:hover,
.ctx-nav-popup .ctx-hb-social li .ctx-hb-social__link:focus,
.ctx-nav-popup .ctx-hb-social li .ctx-hb-social__link:active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ctx-social-box);
  height: var(--ctx-social-box);
  padding: 0;
  border: 0;
  border-radius: var(--ctx-social-radius);
  background-color: var(--ctx-social-bg);
  box-shadow: none;
  color: var(--ctx-social-glyph-colour);
  text-decoration: none;
  transition: opacity 0.25s ease;
}

.ctx-nav-popup .ctx-hb-social li .ctx-hb-social__link:hover,
.ctx-nav-popup .ctx-hb-social li .ctx-hb-social__link:focus {
  opacity: 0.85;
}

.ctx-nav-popup .ctx-hb-social li .ctx-hb-social__link svg {
  display: block;
  width: var(--ctx-social-glyph);
  height: var(--ctx-social-glyph);
  max-width: none;
  fill: var(--ctx-social-glyph-colour);
  stroke: none;
}

.ctx-nav-popup .ctx-hb-social li .ctx-hb-social__link svg path {
  fill: var(--ctx-social-glyph-colour);
  stroke: none;
}

/*--------------------------------------------------------------
# 2. Attribution
--------------------------------------------------------------*/

.ctx-attribution {
  background-color: var(--surface-darker);
  padding: 12px var(--ctx-pad-x);
  text-align: center;
  line-height: 0;
}

.ctx-journalism {
  display: inline-block;
  height: 30px;
  width: auto;
}

/*--------------------------------------------------------------
# 3. Archive notice
--------------------------------------------------------------*/

.ctx-archive-notice {
  display: flex;
  min-height: 0;
  align-items: center;
  justify-content: center;
  background-color: #eb1414;
  color: #fff;
}

.ctx-archive-notice__inner {
  width: 100%;
  padding: 10px 30px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
}

/* The link sits on its own line under the statement. trf.css declares
   "text-decoration: none !important" on every link state, so the underline
   needs !important here to survive. */
.ctx-archive-notice .ctx-archive-notice__inner a {
  display: block;
  margin-left: 0;
  color: #fff;
  font: inherit;
  text-decoration: underline !important;
}

.ctx-archive-notice .ctx-archive-notice__inner a:hover,
.ctx-archive-notice .ctx-archive-notice__inner a:focus {
  color: #fff;
  text-decoration: underline !important;
  text-decoration-thickness: 2px;
}

/*--------------------------------------------------------------
# 4. Sections bar
--------------------------------------------------------------*/

.ctx-sections {
  display: flex;
  width: 100%;
  max-width: 100%;
  height: var(--ctx-sections-h);
  position: relative;
  background-color: var(--ctx-sections-bg);
}

.ctx-sections-list {
  display: flex;
  width: 100%;
  max-width: 1600px;
  height: 100%;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.ctx-sections-list > li {
  flex: 1;
  margin: 0;
  border-left: 1px solid var(--ctx-sections-rule);
}

.ctx-sections-list > li:last-child {
  border-right: 1px solid var(--ctx-sections-rule);
}

/* All items share the bar background: the separators are the only divider. */
.ctx-sections-list > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 12px;
  background-color: transparent;
  color: var(--text-on-dark);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  transition: background-color 0.25s ease;
}

.ctx-sections-list > li > a:hover,
.ctx-sections-list > li > a:focus,
.ctx-sections-list > li.current-menu-item > a {
  background-color: var(--ctx-sections-bg-hover);
  color: var(--text-on-dark);
}

/* While a panel is open the bar reverses: the section being pointed at keeps
   the base colour and its siblings step back. */
.ctx-sections.is-mega-open .ctx-sections-list > li > a,
.ctx-sections.is-mega-open .ctx-sections-list > li > a:hover,
.ctx-sections.is-mega-open .ctx-sections-list > li > a:focus {
  background-color: var(--ctx-mega-tab-dim);
}

.ctx-sections.is-mega-open .ctx-sections-list > li.is-mega-active > a {
  background-color: var(--ctx-sections-bg);
}

/*--------------------------------------------------------------
# 3b. Sections mega menu
# One panel per section, printed inside .ctx-sections and dropped
# below the bar. Opened on hover by header.js, large screens only.
--------------------------------------------------------------*/

.ctx-mega[hidden] {
  display: none;
}

.ctx-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--ctx-z-mega);
  display: flex;
  background-color: var(--ctx-mega-bg);
  box-shadow: 0 18px 30px -18px rgba(0, 0, 0, 0.6);
}

/* Side fillers carry the column colours out to the viewport edges while the
   content itself stays inside the same width as the sections bar. The columns
   carry the header gutter (--ctx-pad-x) as their own padding, so the text
   lines up with .ctx-header-inner while the backgrounds stay full bleed. */
.ctx-mega-bg {
  flex: 1 1 0;
}

.ctx-mega-bg--left {
  background-color: var(--ctx-mega-topics-bg);
}

.ctx-mega-inner {
  flex: 0 1 var(--ctx-mega-max-width);
  display: flex;
  min-width: 0;
}

/* --- left column: topics and editorial note --- */

.ctx-mega-topics {
  flex: 0 0 var(--ctx-mega-col-w);
  max-width: var(--ctx-mega-col-w);
  padding: var(--ctx-mega-pad-y) 30px var(--ctx-mega-pad-y) var(--ctx-pad-x);
  background-color: var(--ctx-mega-topics-bg);
}

.ctx-mega-topic-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ctx-mega-topic-list li {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ctx-mega-rule);
}

.ctx-mega-topic-list li:last-child {
  border-bottom: 1px solid var(--ctx-mega-rule);
}

.ctx-mega .ctx-mega-topic-list a,
.ctx-mega .ctx-mega-topic-list a:visited {
  display: flex;
  align-items: center;
  height: 48px;
  color: var(--text-on-dark);
  font-size: 17px;
  font-weight: 700;
  line-height: 22px;
  text-decoration: none;
}

/* The underline is forced: the global link rules in trf.css and the header
   reset both declare text-decoration on plain anchors. */
.ctx-mega .ctx-mega-topic-list a:hover,
.ctx-mega .ctx-mega-topic-list a:focus,
.ctx-mega .ctx-mega-topic-list a:hover:visited,
.ctx-mega .ctx-mega-topic-list a:focus:visited {
  color: var(--text-on-dark);
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

.ctx-mega-note {
  margin-top: var(--ctx-mega-note-gap);
  color: var(--text-on-dark);
}

/* The note is built from paragraphs: these rules are scoped to .ctx-mega so
   they outrank the `.ctx-header p { margin: 0 }` reset above. */
.ctx-mega .ctx-mega-note__title {
  margin: 0 0 var(--ctx-mega-note-title-gap);
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
}

.ctx-mega .ctx-mega-note__text {
  margin: 0 0 var(--ctx-mega-note-link-gap);
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
}

.ctx-mega .ctx-mega-note__link,
.ctx-mega .ctx-mega-note__link:link,
.ctx-mega .ctx-mega-note__link:visited,
.ctx-mega .ctx-mega-note__link:hover,
.ctx-mega .ctx-mega-note__link:focus {
  display: inline-block;
  color: var(--text-on-dark);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* --- right column: latest stories --- */

.ctx-mega-feed {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.57fr);
  padding: var(--ctx-mega-pad-y) var(--ctx-pad-x) var(--ctx-mega-pad-y) var(--ctx-mega-gap);
}

.ctx-mega-feed > .ctx-mega-card + .ctx-mega-card {
  margin-left: 25px;
  padding-left: 25px;
  border-left: 1px solid var(--ctx-mega-divider);
}

.ctx-mega-card {
  min-width: 0;
  min-height: var(--ctx-mega-content-h);
}

.ctx-mega-card__media {
  display: block;
  line-height: 0;
}

.ctx-mega-card__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.ctx-mega-card__body {
  min-width: 0;
}

.ctx-mega-card__badge,
.ctx-mega-card__badge:visited {
  display: inline-flex;
  align-items: center;
  height: 25px;
  padding: 0 10px;
  border-radius: 4px;
  background-color: var(--ctx-sections-bg);
  color: var(--text-on-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
}

.ctx-mega-card__badge:hover,
.ctx-mega-card__badge:focus {
  color: var(--text-on-dark);
  text-decoration: underline;
}

.ctx-mega-card__title {
  margin: 21px 0 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 32px;
}

.ctx-mega-card__title a,
.ctx-mega-card__title a:visited {
  color: var(--text-on-dark);
  text-decoration: none;
}

.ctx-mega-card__title a:hover,
.ctx-mega-card__title a:focus {
  color: var(--text-on-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* First story: landscape image above the text */
.ctx-mega-card--lead .ctx-mega-card__image {
  aspect-ratio: 16 / 9;
}

.ctx-mega-card--lead .ctx-mega-card__body {
  padding-top: 20px;
}

/* Second story: portrait image beside the text, filling the panel height */
.ctx-mega-card--side {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 21px;
  align-items: start;
}

.ctx-mega-card--side .ctx-mega-card__media {
  height: var(--ctx-mega-content-h);
}

.ctx-mega-card--side .ctx-mega-card__image {
  width: 300px;
  height: 100%;
}

/*--------------------------------------------------------------
# 4. Sticky bar
--------------------------------------------------------------*/

.ctx-sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--ctx-z-sticky);
  background-color: var(--surface-dark);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0.3s ease;
}

.ctx-sticky.is-visible {
  transform: translateY(0);
  visibility: visible;
}

.ctx-sticky-inner {
  max-width: var(--ctx-max-width);
  margin: 0 auto;
  padding: 0 var(--ctx-pad-x);
  height: var(--ctx-sticky-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

.ctx-sticky-left {
  justify-self: start;
}

.ctx-sticky-branding {
  justify-self: center;
  line-height: 0;
}

.ctx-sticky-logo {
  display: block;
  width: var(--ctx-sticky-logo-w);
  height: auto;
}

.ctx-sticky-right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 28px;
}

.ctx-journalism-sticky {
  height: 30px;
}

/* Keeps anchor targets clear of the sticky bar */
body * {
  scroll-margin-top: var(--ctx-sticky-h);
}

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/

/* Above the container width the automatic margins already keep the content
   clear of the viewport edges, so the side padding is dropped and the inner
   rows use the full 1400px. */
@media (min-width: 1500px) {
  .ctx-header-inner,
  .ctx-sticky-inner {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 1080px) {
  :root {
    --ctx-pad-x: 20px;
    --ctx-sticky-h: 4.5rem;
    --ctx-sticky-logo-w: 7.5rem;
    --ctx-social-box: 38px;
    --ctx-social-glyph: 20px;
    --ctx-social-gap: 12px;
    --ctx-burger-w: 28px;
    --ctx-menu-close-glyph: 22px;
    --ctx-close-glyph: 22px;
  }

  .ctx-header-inner {
    padding-top: 20px;
    padding-bottom: 24px;
    align-items: center;
  }

  .ctx-header-left {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .ctx-newsletters-btn {
    display: none;
  }

  .ctx-burger span + span {
    margin-top: 6px;
  }

  .ctx-logo {
    width: clamp(150px, 42vw, 220px);
  }

  .ctx-search-icon {
    width: 26px;
    height: 26px;
  }

  .ctx-popup .ctx-popup-close {
    top: 8px;
    right: 8px;
  }

  .ctx-search-popup .ctx-popup-inner {
    width: 100%;
    min-height: 0;
    padding: 24px;
  }

  /* The desktop modal is taller than its content and centres the field group
     in the leftover space. Stacked, there is no leftover space to centre in. */
  .ctx-search-body {
    margin-top: 0;
    margin-bottom: 0;
  }

  .ctx-popup.ctx-search-popup .ctx-popup-close {
    width: 32px;
    height: 32px;
    margin-bottom: 12px;
  }

  .ctx-search-form {
    flex-direction: column;
  }

  /* Column direction makes flex-basis resolve against the height, so the
     input's flex:1 would override its own height and flatten the field. */
  .ctx-search-form input[type="search"] {
    flex: 0 0 auto;
    height: 55px;
    width: 100%;
  }

  .ctx-search-form button {
    flex: 0 0 auto;
    width: 100%;
  }

  .ctx-attribution p {
    font-size: 13px;
  }

  .ctx-attribution img {
    height: 24px;
  }

  .ctx-archive-notice {
    min-height: 0;
  }

  .ctx-archive-notice__inner {
    padding: 9px 20px;
    font-size: 15px;
    line-height: 21px;
  }

  /* Items size to their own label and share the leftover space, so the
     longest one stays on a single line. */
  .ctx-sections-list > li {
    flex: 1 1 auto;
  }

  .ctx-sections-list > li > a {
    padding: 0 6px;
    font-size: clamp(11px, 3.2vw, 15px);
  }

  /* The mega menu is a pointer feature: below this width the sections links
     behave as plain links and no panel is ever shown. */
  .ctx-mega {
    display: none !important;
  }

  .ctx-journalism {
    height: 22px;
  }

  .ctx-sticky-right {
    gap: 14px;
  }

  .ctx-journalism-sticky {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ctx-header *,
  .ctx-sticky {
    transition: none !important;
  }
}