/* ============================================================
   Site chrome — fixed nav, slide-out menu, grid overlay
   ============================================================ */

/* ---- Fixed nav -------------------------------------------- */
nav.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0 var(--pad-x);
  height: 72px;
  background-color: transparent;
  /* Fallback colour for browsers without blend modes; updateNavColor()
     flips it per section the way it always did. */
  color: var(--white);
  transition: color var(--dur-fast) linear, opacity var(--dur) ease;
  pointer-events: none;
}

/* The nav floats over whatever happens to be under it, and picking a
   colour per SECTION cannot solve a collision that happens per PIXEL —
   the wordmark lands half on top of a display letterform and half on the
   white beside it, and one colour is wrong for one of those halves.
   Difference blending inverts the nav against its own backdrop instead:
   white over white paints black, white over black paints white, and the
   two halves of that letterform each get the right one. */
@supports (mix-blend-mode: difference) {
  nav.site-nav {
    color: #fff;
    mix-blend-mode: difference;
    transition: opacity var(--dur) ease;
  }
  /* The per-section flip is what the blending replaces; leaving it on
     would darken the nav and then invert THAT. */
  body.nav--is-black nav.site-nav { color: #fff; }

  /* The menu panel is its own surface and sits above the page, so the nav
     over it should read normally rather than invert against it. */
  body.menu--is-showing nav.site-nav { mix-blend-mode: normal; color: var(--black); }
}
nav.site-nav > * { pointer-events: auto; }

/* All-caps wordmark: capitals need the tracking opened rather than
   closed, which is the opposite of what the mixed-case version wanted. */
.site-logo {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  color: inherit;
  flex-shrink: 0;
  transition: opacity var(--dur-fast) linear;
}
.site-logo:hover { opacity: 0.55; }

.nav-end {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  margin-left: auto;
}

.nav-links {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: center;
}

.nav-links a {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: inherit;
  transition: opacity var(--dur-fast) linear;
}
.nav-links a:hover { opacity: 0.55; }

.icons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.icons button {
  appearance: none;
  background: none;
  border: 0;
  padding: 20px 12px;
  cursor: pointer;
  color: inherit;
  transition: opacity var(--dur-fast) linear;
  line-height: 0;
}
.icons button:hover { opacity: 0.6; }
.icons .menu-toggle { padding-right: 0; }
.icons svg { width: 30px; height: 30px; display: block; }
.icons svg [stroke] { stroke: currentColor; }
.icons svg [fill]:not([fill="none"]) { fill: currentColor; }

@media print, screen and (min-width: 48em) {
  nav.site-nav { height: 88px; }

  .site-logo { font-size: 26px; }

  .nav-links { display: flex; }

  .icons .menu-toggle { display: none; }
  .icons button { padding: 28px 0; }
}

/* The nav flips to black over light sections. */
body.nav--is-black .site-nav { color: var(--black); }
/* …and stays black while the menu panel is open (white panel). */
body.menu--is-showing .site-nav { color: var(--black); }

/* Bars morph into a close cross while the menu is open. */
.menu-toggle .bar {
  transition: transform var(--dur) var(--ease-out),
              opacity 150ms linear;
  transform-origin: 50% 50%;
}
body.menu--is-showing .menu-toggle .bar-top    { transform: translateY(9px) rotate(45deg); }
body.menu--is-showing .menu-toggle .bar-mid    { opacity: 0; }
body.menu--is-showing .menu-toggle .bar-bottom { transform: translateY(-9px) rotate(-45deg); }

/* Eye closes when the grid overlay is on. */

/* ---- Slide-out menu --------------------------------------- */
/* ---- Menu panel -------------------------------------------
   Full bleed rather than a drawer, and five words rather than a
   table of contents. The nav sits above it (z 10000 against 900),
   so the wordmark and the close control are already in place and
   are not repeated here. Links sit on the same twelve columns as
   the page behind them. */
.menu-panel {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background-color: var(--white);
  color: var(--black);
  display: flex;
  flex-direction: column;
  padding: 96px 0 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) linear, visibility 0s linear var(--dur);
}
body.menu--is-showing .menu-panel {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur) linear, visibility 0s;
}

@media print, screen and (min-width: 48em) {
  /* The hamburger is display:none up here, so an open panel would be a
     full-screen sheet with nothing on it that closes it. JS clears the
     state too, but this rule is what guarantees it: no event has to fire
     for the panel to be gone. */
  .menu-panel { display: none; }
}

/* The links take whatever room is left between the header and the foot,
   and sit in the middle of it. justify-content on the panel could not do
   this: margin-top:auto on the foot absorbs every pixel of free space,
   so the links were pinned to the top however the panel was aligned. */
.menu-body {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  width: 100%;
}
.menu-body > .grid-x { width: 100%; }

.menu-links { display: flex; flex-direction: column; align-items: flex-start; }
.menu-links a {
  display: block;
  padding: clamp(8px, 1.4vh, 16px) 0;
  font-size: clamp(36px, 9.5vw, 68px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--black);
  transition: opacity 150ms linear;
}
.menu-links a:hover { opacity: 0.45; }
.menu-links a:focus-visible { outline: 2px solid var(--black); outline-offset: 4px; }

/* Each word arrives just after the one above it. The hold lives inside
   the keyframes rather than in animation-delay, and there is no fill
   mode, so the resting state is the visible one — a menu that fails to
   animate is still a menu. */
body.menu--is-showing .menu-links a { animation: menu-word 620ms var(--ease-out); }
body.menu--is-showing .menu-links a:nth-child(2) { animation-duration: 680ms; }
body.menu--is-showing .menu-links a:nth-child(3) { animation-duration: 740ms; }
body.menu--is-showing .menu-links a:nth-child(4) { animation-duration: 800ms; }
body.menu--is-showing .menu-links a:nth-child(5) { animation-duration: 860ms; }

@keyframes menu-word {
  0%, 28% { opacity: 0; transform: translateY(14px); }
  100%    { opacity: 1; transform: none; }
}

.menu-foot { margin-top: auto; padding-top: 40px; }
.menu-foot .caption { margin: 0; color: var(--grey); }
.menu-meta { display: flex; flex-wrap: wrap; gap: 20px; }
.menu-meta a {
  color: var(--black);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

@media (prefers-reduced-motion: reduce) {
  body.menu--is-showing .menu-links a { animation: none; }
}

@media screen and (max-width: 47.99em) {
  .menu-foot { padding-top: 32px; }
  .menu-meta { gap: 14px; }
}

.menu-panel a.active { color: var(--black); }

/* ---- 12-column grid overlay -------------------------------- */

/* ---- Progress rail ---------------------------------------- */
.progress-rail {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  z-index: calc(var(--z-nav) - 1);
  pointer-events: none;
}
.progress-rail span {
  display: block;
  height: 100%;
  width: 0;
  background-color: var(--white);
  transform-origin: 0 50%;
  transition: background-color var(--dur-fast) linear;
}
/* Flips with the nav icons, on the same body class. */
body.nav--is-black .progress-rail span { background-color: var(--black); }

/* ==============================================================
   Cookie notice
   A black bar on a page that is mostly white, so it reads as an
   interruption without a scrim.
   ============================================================== */

/* A notice, not a takeover. Full width across the foot of the page put a
   black band over the headline; this sits in one corner and leaves the
   site visible behind it. Stacked by default — that is the phone
   layout — and laid out flat on anything wider. */
.cookie-bar {
  position: fixed;
  left: max(var(--pad-x), 2vw);
  right: max(var(--pad-x), 2vw);
  bottom: max(var(--pad-x), 2vw);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  padding: 20px 22px;
  background-color: var(--black);
  color: var(--white);
  /* Black on black: where this lands over the headline the two would
     merge without an edge of its own. */
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 14px;
  animation: cookie-rise 420ms var(--ease-out) both;
}

@media print, screen and (min-width: 48em) {
  /* One row on a laptop: the sentence reads across and the two answers
     sit at the end of it, which is a strip rather than a block. */
  .cookie-bar {
    flex-direction: row;
    align-items: center;
    gap: 32px;
    padding: 16px 18px 16px 24px;
  }
  .cookie-bar p { flex: 1; }
  .cookie-actions .pill { flex: 0 0 auto; }
}
.cookie-bar[hidden] { display: none; }

@keyframes cookie-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-bar { animation: none; }
}

.cookie-bar p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}
.cookie-bar a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookie-actions { display: flex; gap: 10px; }
.cookie-actions .pill { flex: 1; }

.pill {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 10px 20px;
  min-height: 44px;
  border-radius: 999px;
  transition: opacity 150ms linear, background-color 150ms linear, color 150ms linear;
}
.pill--ghost {
  background: none;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.55);
}
.pill--ghost:hover { border-color: var(--white); background-color: rgba(255, 255, 255, 0.08); }
.pill--solid {
  background-color: var(--white);
  color: var(--black);
  border: 1px solid var(--white);
}
.pill--solid:hover { opacity: 0.8; }
.pill:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }