/* ════════════════════════════════════════════════════════════════
   Drumbeat - Cookie consent banner-modal   ·   STANDALONE / SHARED
   ----------------------------------------------------------------
   Paired with consent.js. One copy at the site root; every page links
   it with its depth-correct path (`consent.css` at root, `../consent.css`
   from `dev/`). Because font `url()`s in a stylesheet resolve against the
   STYLESHEET, not the document, the @font-face below works from any depth.

   Design idiom (matches nav.css / the 2026 pages):
     · Screen Black panel, Newsprint text
     · Eurostile heading, FK Grotesk body
     · Sky Blue pill "Accept" + ghost/outline "Reject" - deliberately the
       same size, weight and padding. Reject is NOT dark-patterned.

   All colour/typography values are declared locally under --dbc-* so the
   banner renders identically on pages that carry the full 2026 token set
   (index/about/news) and on the leaner ones (privacy/terms/discover).
   ════════════════════════════════════════════════════════════════ */

/* privacy.html, terms.html and discover.html do not declare Eurostile
   (only the 2026 pages do). Same family name + same URL as those pages,
   so where it is already declared the browser reuses the one resource. */
@font-face {
  font-family: 'eurostile';
  src: url('Fonts/Eurostile-Med.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

.dbc {
  --dbc-black: #292A2A;
  --dbc-newsprint: #EFE8E3;
  --dbc-muted: #B9B2AD;
  --dbc-blue: #46BBFF;
  --dbc-display: 'eurostile', 'FK Grotesk', "Helvetica Neue", Helvetica, Arial, sans-serif;
  --dbc-body: 'FK Grotesk', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --dbc-ease: cubic-bezier(.2, .8, .25, 1);

  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Above the nav bar (nav.css .dbnav is z-index 500) and above the
     discover page's device frame. */
  z-index: 9999;
  padding: 16px;
  box-sizing: border-box;
  /* Banner, not a blocking scrim: the page behind stays visible, scrollable
     and clickable. Only the keyboard is held (consent.js), because a choice
     is required before anything third-party loads. */
  pointer-events: none;
}

.dbc[hidden] {
  display: none;
}

.dbc__panel {
  pointer-events: auto;
  box-sizing: border-box;
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 20px 24px;
  background: var(--dbc-black);
  color: var(--dbc-newsprint);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(41, 42, 42, 0.34);
  animation: dbc-rise .28s var(--dbc-ease) both;
}

@keyframes dbc-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dbc__panel {
    animation: none;
  }
}

.dbc__text {
  flex: 1 1 auto;
  min-width: 0;
}

.dbc__title {
  margin: 0 0 6px;
  font-family: var(--dbc-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--dbc-newsprint);
}

.dbc__copy {
  margin: 0;
  font-family: var(--dbc-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--dbc-newsprint);
}

.dbc__note {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--dbc-muted);
}

.dbc__link {
  color: var(--dbc-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dbc__link:hover {
  text-decoration-thickness: 2px;
}

.dbc__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Accept and Reject are the SAME control with two skins - identical box,
   type and weight - so neither reads as the default. */
.dbc__btn {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font-family: var(--dbc-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  letter-spacing: -0.01em;
  padding: 12px 26px;
  min-width: 118px;
  text-align: center;
  border-radius: 9999px;
  border: 1px solid transparent;
  transition: transform .15s var(--dbc-ease), filter .15s ease, background-color .15s ease, color .15s ease;
}

.dbc__btn:hover {
  transform: translateY(-1px);
}

.dbc__btn:focus-visible {
  outline: 2px solid var(--dbc-blue);
  outline-offset: 3px;
}

.dbc__btn--accept {
  background: var(--dbc-blue);
  color: var(--dbc-black);
}

.dbc__btn--accept:hover {
  filter: brightness(1.04);
}

.dbc__btn--reject {
  background: transparent;
  color: var(--dbc-newsprint);
  border-color: var(--dbc-newsprint);
}

.dbc__btn--reject:hover {
  background: rgba(239, 232, 227, 0.12);
}

/* Current choice, when the panel is reopened from the footer link. */
.dbc__btn[aria-pressed="true"]::after {
  content: " ✓";
}

@media (max-width: 860px) {
  .dbc {
    padding: 10px;
  }

  .dbc__panel {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 20px;
    border-radius: 12px;
  }

  .dbc__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .dbc__btn {
    min-width: 0;
    width: 100%;
    padding: 13px 12px;
  }

  .dbc__title {
    font-size: 18px;
  }

  .dbc__copy {
    font-size: 14.5px;
  }
}

/* ════════════════════════════════════════════════════════════════
   FOOTER "Cookie preferences" REOPEN CONTROL
   ----------------------------------------------------------------
   A <button>, not an <a>: it opens a dialog, it does not navigate - and
   nav.js's delegated footer tracker only matches `footer a[href]`, so the
   control adds no spurious analytics event on any page.

   The three blocks below are the three footer idioms this site has. Each
   mirrors that footer's own link rule so the button is visually
   indistinguishable from the links beside it.
   ════════════════════════════════════════════════════════════════ */
.dbc-prefs {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

/* index / dev-index / about / news - .site-footer__col a */
.site-footer__col .dbc-prefs {
  color: var(--newsprint, #EFE8E3);
  transition: color 0.2s;
}

.site-footer__col .dbc-prefs:hover {
  color: var(--blue, #46BBFF);
}

/* privacy / terms - .footer-links a */
.footer-links .dbc-prefs {
  color: var(--screen-black-400, #8C8888);
  font-size: 0.8rem;
  transition: color 0.2s;
}

.footer-links .dbc-prefs:hover {
  color: var(--newsprint-200, #F3ECE7);
}

/* discover - .footer a */
.footer .dbc-prefs {
  color: var(--screen-black-400, #8C8888);
  text-decoration: underline;
  text-underline-offset: 2px;
}