/* The cookie banner
   ------------------------------------------------------------------
   One file for every page, hand built and newsroom alike, because the
   banner is on all of them and the host refuses inline styles. Goes up
   with the pages by the site publisher; the newsroom never writes it.

   Rules this file keeps, the same as every other stylesheet on the site:
     - No opacity on text. Anything that recedes gets a measured colour.
     - The violet is a fill or a mark, never text on a dark surface.
     - Accept and Reject carry the same weight and sit side by side.
     - Nothing moves. The banner is simply there or not there.
   ------------------------------------------------------------------ */

.consent {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 80;
  background: var(--canvas, #FAFAF9);
  color: var(--ink, #1E1330);
  border-block-start: 1px solid var(--rule, #DBDADD);
  box-shadow: 0 -2px 4px rgba(30, 19, 48, 0.06), 0 -18px 44px -16px rgba(30, 19, 48, 0.30);
  padding: 20px var(--margin, 20px);
  padding-block-end: max(20px, env(safe-area-inset-bottom));
}

.consent[hidden] {
  display: none;
}

.consent__inner {
  max-width: var(--container, 1200px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px 32px;
  align-items: center;
}

.consent__title {
  margin: 0 0 4px;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}

.consent__body {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--muted, #5A5470);
  max-width: 72ch;
}

.consent__body a {
  color: var(--accent, #6D4AFF);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.consent__body a:hover,
.consent__body a:focus-visible {
  color: var(--accent-active, #4C1D95);
}

.consent__choices {
  display: grid;
  gap: 12px;
  justify-items: end;
}

.consent__options {
  margin: 0;
  display: grid;
  gap: 10px;
  justify-self: stretch;
  padding: 12px 14px;
  border: 1px solid var(--rule, #DBDADD);
  border-radius: 10px;
}

.consent__options[hidden] {
  display: none;
}

.consent__option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 10px;
  align-items: start;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4;
}

.consent__option input {
  margin: 4px 0 0;
  inline-size: 18px;
  block-size: 18px;
  accent-color: var(--accent, #6D4AFF);
}

.consent__option span {
  grid-column: 2;
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--muted, #5A5470);
}

.consent__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.consent__buttons .btn[hidden] {
  display: none;
}

.consent__buttons .btn:focus-visible {
  outline: 3px solid var(--accent-active, #4C1D95);
  outline-offset: 2px;
}

@media (max-width: 48em) {
  .consent__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .consent__choices {
    justify-items: stretch;
  }

  .consent__buttons .btn {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* The phone menu is a full-screen panel. While it is open, by the :target
   route with JavaScript off or by the class site.js adds, the banner would
   sit over its last links, so it steps aside and returns when the menu
   closes. Found by the audit of 4 September 2026 at 360 by 800. */
html:has(#site-menu:target) .consent,
html:has(#site-menu.is-open) .consent {
  display: none;
}

@media print {
  .consent {
    display: none;
  }
}