/* (C)2026 Badger Commerce Limited, a subsidiary of Kedos Consulting Limited */

/* ==========================================================================================
   DIORAMA
   A dark, photo-first theme for sites whose pictures tell the story: photo blogs, galleries,
   makers and clubs. A near-black photographic ground, warm off-white type, one flare accent
   (the brand colour, #FF4D2E by default); Bricolage Grotesque for display, Instrument Sans for
   reading, IBM Plex Mono for dates and counts. Layered over Nova: Nova's bdgr.css loads first,
   this file second, the Design Brief's theme.css (brand colour / font / shape) last.

   Principles
   1. Photos first, the story underneath. A page that opens on a photo (a hero, a post's
      masthead) gets the whole width and the top of the screen: the header floats over it.
   2. The ground stays dark so photos glow; the chrome is quiet: hairlines, no shadows, no boxes
      around text.
   3. Dates, counts and labels are mono and small; titles are big and tight.
   4. One accent marks the action (buttons, the current link, a quote's rule) and nothing else.
   5. Motion is decoration: the photo zoom on hover and the header's fade are off under
      prefers-reduced-motion.

   Nova token re-points come first: the grey ramp is INVERTED (gray-50 is the darkest surface,
   gray-900 the strongest text, as in Spec) so Nova templates Diorama has not overridden (basket,
   checkout, account, search, the photo wall) read correctly on the dark ground. Diorama's own
   role tokens (--dio-*) follow.
   ========================================================================================== */

:root {
  color-scheme: dark;

  /* ── Nova tokens, re-pointed ─────────────────────────────────────────────────────────── */
  --color-primary: #FF4D2E;               /* flare: the default accent */
  --color-primary-dark: #E63B1D;
  --color-primary-light: #FF8A73;
  --color-primary-50: rgba(255, 77, 46, 0.12);
  --color-primary-ring: rgba(255, 77, 46, 0.35);
  --color-primary-tint: rgba(255, 77, 46, 0.10);

  /* Inverted ramp, warm: low numbers are the dark surfaces, high numbers the light text. */
  --color-gray-50: #121316;
  --color-gray-100: #17191C;
  --color-gray-200: #23262A;
  --color-gray-300: #34383D;
  --color-gray-400: #8C877E;
  --color-gray-500: #A9A49B;
  --color-gray-600: #C9C4BA;
  --color-gray-700: #DCD8D0;
  --color-gray-800: #E9E5DE;
  --color-gray-900: #F3F0EA;
  /* 950 is the exception, as in a dark Design Brief: Nova paints its deliberately dark sections with it
     (the latest-posts log, the announcement band, behind a slideshow), so it stays dark, a panel tone */
  --color-gray-950: #17191C;

  --color-success: #5CC98C;
  --color-success-light: rgba(92, 201, 140, 0.14);
  --color-error: #FF8577;
  --color-error-dark: #F06A5B;
  --color-error-light: rgba(255, 133, 119, 0.14);
  --color-error-ring: rgba(255, 133, 119, 0.3);
  --color-warning: #F2B33D;
  --color-info: #8DB4F2;
  --color-warning-bg: rgba(242, 179, 61, 0.14);
  --color-warning-text: #F5C96E;
  --color-info-bg: rgba(141, 180, 242, 0.14);
  --color-info-text: #ABC8F5;

  --color-surface: #0D0E10;
  --color-text-strong: #F3F0EA;
  /* Dark sections and the hero presets: the accent with dark text, not Nova's light primary */
  --color-on-dark-accent: var(--color-primary);
  --color-on-dark-accent-contrast: #0D0E10;
  /* The status colours are light, so text on them is dark; the "-dark" status shades, strong text in a
     light theme, are the light ones here */
  --color-on-success: var(--dio-on-accent);
  --color-on-warning: var(--dio-on-accent);
  --color-on-error: var(--dio-on-accent);
  --color-success-dark: var(--color-success);
  --color-warning-dark: var(--color-warning-text);

  --font-family-base: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-family-display: "Bricolage Grotesque", "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --font-weight-heading: 800;
  --letter-spacing-heading: -0.025em;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 20px;

  --shadow-xs: none;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.55);

  --container-max-width: 1280px;
  --container-padding: max(16px, 3vw);

  /* ── Diorama roles ───────────────────────────────────────────────────────────────────── */
  --dio-ground: #0D0E10;                   /* the page */
  --dio-surface: #17191C;                  /* panels, menus, empty photo blocks */
  --dio-raised: #1E2024;                   /* hover on a panel */
  --dio-ink: #F3F0EA;                      /* titles - ~17:1 on the ground */
  --dio-text: #E4E0D8;                     /* story text */
  --dio-muted: #C9C4BA;                    /* descriptions - ~11:1 */
  --dio-dim: #A9A49B;                      /* dates and small labels - ~7.5:1 */
  --dio-line: rgba(255, 255, 255, 0.10);
  --dio-line-strong: rgba(255, 255, 255, 0.22);
  --dio-accent: var(--color-primary);
  --dio-accent-text: color-mix(in srgb, var(--color-primary) 80%, #FFFFFF); /* the accent as text on the ground */
  --dio-on-accent: #0D0E10;                /* dark text on the flare - ~6:1 */
  --color-on-primary: #0D0E10;             /* the same ink on the flare fills; the Design Brief may set it */
  --dio-scrim: rgba(13, 14, 16, 0.55);     /* the header over a photo */
  --dio-header-h: 72px;                    /* diorama.js keeps this at the header's real height */
  --dio-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dio-focus: 0 0 0 2px var(--dio-ground), 0 0 0 4px var(--dio-ink);

  --nova-hero-screen-offset: var(--dio-header-h);
  --rm-sticky-top: var(--dio-header-h);
}

/* ==========================================================================================
   BASE
   ========================================================================================== */

html {
  background: var(--dio-ground);
}

body {
  background: var(--dio-ground);
  color: var(--dio-text);
  font-family: var(--font-family-base);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Element selectors only (no :root): a site's own HTML blocks that colour their headings and links with a
   class (a pill nav on a light background, say) must still win over the theme's defaults */
h1,
h2,
h3,
h4 {
  font-family: var(--font-family-display);
  color: var(--dio-ink);
  letter-spacing: var(--letter-spacing-heading);
  text-wrap: balance;
}

a {
  color: var(--dio-ink);
}

a:hover {
  color: var(--dio-accent-text);
}

:root :focus-visible {
  outline: 2px solid var(--dio-ink);
  outline-offset: 3px;
}

::selection {
  background: var(--dio-accent);
  color: var(--color-on-primary);
}

.dio-wrap {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.dio-meta,
:root time {
  font-family: var(--font-family-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dio-dim);
  font-variant-numeric: tabular-nums;
}

.dio-icon {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.dio-skip {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 2000;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--dio-ink);
  color: var(--dio-ground) !important;
  font-weight: 600;
}

.dio-skip:focus {
  top: var(--space-3);
}

/* Buttons: pills. The primary is the accent with dark text; on photos and dark sections too. The shared
   button (ui/button.html, bdgr.css "ui: button") takes the pill through its tokens; Nova's .nova-btn is
   restyled at :root so these rules out-rank Nova's own contextual button rules (on-dark bands, cards). */
.nova-button {
  --button-height: 44px;
  --button-padding: 0 22px;
  --button-gap: var(--space-2);
  --button-border-width: 1px;
  --button-radius: 999px;
  --button-line-height: 1;
  --button-letter-spacing: normal;
  --button-transition: transform 0.15s var(--dio-ease), background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  --button-hover-transform: translateY(-1px);
  --button-active-transform: translateY(-1px);
  --button-buy-bg: var(--dio-accent);
  --button-buy-border-color: var(--dio-accent);
  --button-buy-color: var(--color-on-primary);
  --button-buy-hover-bg: color-mix(in srgb, var(--dio-accent) 85%, white);
  --button-buy-hover-border-color: color-mix(in srgb, var(--dio-accent) 85%, white);
  --button-block-display: inline-flex;
}

:root .nova-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  font-family: var(--font-family-base);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s var(--dio-ease), background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

:root .nova-btn-primary,
:root .nova-on-dark .nova-btn-primary {
  background: var(--dio-accent);
  border: 1px solid var(--dio-accent);
  color: var(--color-on-primary);
  box-shadow: none;
}

:root .nova-btn-primary:hover:not(:disabled),
:root .nova-on-dark .nova-btn-primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--dio-accent) 85%, #FFFFFF);
  border-color: color-mix(in srgb, var(--dio-accent) 85%, #FFFFFF);
  color: var(--color-on-primary);
  box-shadow: none;
  transform: translateY(-1px);
}

:root .nova-btn-secondary,
:root .nova-btn-outline {
  background: transparent;
  border: 1.5px solid rgba(243, 240, 234, 0.6);
  color: var(--dio-ink);
}

:root .nova-btn-secondary:hover:not(:disabled),
:root .nova-btn-outline:hover:not(:disabled) {
  background: rgba(243, 240, 234, 0.08);
  border-color: var(--dio-ink);
  color: var(--dio-ink);
}

/* A JSON-component button with no colour of its own (no variant, e.g. a hero's call to action) would show
   the browser's default button grey under color-scheme: dark */
.json-button:not([style*="background"], [class*="nova-jc-bg"]) {
  min-height: 48px;
  border-radius: 999px;
  background: var(--dio-accent);
  color: var(--color-on-primary);
  font-family: var(--font-family-base);
  font-weight: 600;
}

.json-button:not([style*="background"], [class*="nova-jc-bg"]):hover {
  background: color-mix(in srgb, var(--dio-accent) 85%, #FFFFFF);
  color: var(--color-on-primary);
}


/* ==========================================================================================
   HEADER
   ========================================================================================== */

.dio-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(13, 14, 16, 0.86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--dio-line);
  transition: background 0.25s ease, border-color 0.25s ease;
}

.dio-strip {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--dio-line);
  font-size: 14px;
  text-align: center;
  color: var(--dio-muted);
}

.dio-strip a {
  color: var(--dio-ink);
}

.dio-header__in {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 72px;
  padding-block: var(--space-3);
}

.dio-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  color: var(--dio-ink) !important;
  text-decoration: none;
}

.dio-brand__logo {
  height: 40px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}

.dio-brand__name {
  font-family: var(--font-family-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dio-nav {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

.dio-header__tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.dio-nav + .dio-header__tools {
  margin-left: 0;
}

.dio-header__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-2);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.dio-iconlink {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--dio-ink);
  font-size: 20px;
  cursor: pointer;
}

.dio-iconlink:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--dio-ink) !important;
}

.dio-basket__count {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--dio-accent);
  color: var(--color-on-primary);
  font-family: var(--font-family-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
}

.dio-drawer__links .dio-basket__count {
  position: static;
  display: inline-block;
  margin-left: var(--space-2);
}

.dio-header__menu {
  display: none;
}

/* A page that opens on a photo: a photo masthead or a hero first in the banner, or (with no banner and no
   breadcrumb above it) a hero first in the main section. The header floats over the photo, see-through
   until the page scrolls (diorama.js adds is-scrolled), and the hero takes the whole screen height. */
body:has(> .dio-banner > :is(.dio-masthead--photo, .nova-hero):first-child),
body:not(:has(> .dio-banner)):not(:has(> .nova-page-crumbs)):has(> .dio-main > .nova-hero:first-child) {
  --nova-hero-screen-offset: 0px;
}

body:has(> .dio-banner > :is(.dio-masthead--photo, .nova-hero):first-child) > .dio-header,
body:not(:has(> .dio-banner)):not(:has(> .nova-page-crumbs)):has(> .dio-main > .nova-hero:first-child) > .dio-header {
  position: fixed;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, var(--dio-scrim), rgba(13, 14, 16, 0.12));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

body > .dio-header.is-scrolled {
  background: rgba(13, 14, 16, 0.9) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom-color: var(--dio-line) !important;
}

/* Under a floating header, the hero's copy keeps clear of it */
body > .dio-banner > .nova-hero:first-child .nova-hero__content,
body:not(:has(> .dio-banner)):not(:has(> .nova-page-crumbs)) > .dio-main > .nova-hero:first-child .nova-hero__content {
  padding-top: max(var(--dio-header-h), var(--space-16)) !important;
}

/* ==========================================================================================
   MENU (menuGeneratorExtension/menu, collectionChooser/menu)
   ========================================================================================== */

.dio-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dio-menu__item {
  position: relative;
}

.dio-menu__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 var(--space-3);
  border-radius: 999px;
  color: var(--dio-ink) !important;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}

.dio-menu__link::-webkit-details-marker {
  display: none;
}

.dio-menu__link:hover,
.dio-menu__group[open] > .dio-menu__link {
  background: rgba(255, 255, 255, 0.08);
}

.dio-menu__item.is-current > .dio-menu__link,
.dio-menu__link[aria-current] {
  color: var(--dio-accent-text) !important;
}

.dio-menu__caret {
  font-size: 14px;
  transition: transform 0.2s ease;
}

.dio-menu__group[open] .dio-menu__caret {
  transform: rotate(180deg);
}

.dio-menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 10;
  min-width: 240px;
  max-width: min(360px, 90vw);
  padding: var(--space-2);
  border: 1px solid var(--dio-line);
  border-radius: var(--radius-lg);
  background: var(--dio-surface);
  box-shadow: var(--shadow-lg);
}

.dio-menu__list,
.dio-menu__sublist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dio-menu__sublist {
  padding-left: var(--space-3);
}

.dio-menu__sublink {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--dio-text) !important;
  font-size: 15px;
  text-decoration: none;
}

.dio-menu__sublink:hover {
  background: var(--dio-raised);
  color: var(--dio-ink) !important;
}

.dio-menu__all {
  font-weight: 600;
  color: var(--dio-ink) !important;
}

.dio-menu__heading {
  margin: var(--space-2) var(--space-3) var(--space-1);
  font-family: var(--font-family-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dio-dim);
}

/* ==========================================================================================
   DRAWER (phones)
   ========================================================================================== */

.dio-drawer {
  width: min(400px, 100vw);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--dio-line);
  background: var(--dio-ground);
  color: var(--dio-text);
}

.dio-drawer[open] {
  display: flex;
  flex-direction: column;
}

.dio-drawer::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.dio-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--dio-line);
}

.dio-drawer__title {
  font-family: var(--font-family-display);
  font-weight: 800;
  font-size: 20px;
  color: var(--dio-ink);
}

.dio-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4);
}

.dio-drawer .dio-menu {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.dio-drawer .dio-menu__item {
  border-bottom: 1px solid var(--dio-line);
}

.dio-drawer .dio-menu__link {
  display: flex;
  justify-content: space-between;
  width: 100%;
  min-height: 56px;
  padding: 0;
  border-radius: 0;
  font-family: var(--font-family-display);
  font-size: 22px;
  font-weight: 700;
  background: none !important;
}

.dio-drawer .dio-menu__panel {
  position: static;
  min-width: 0;
  max-width: none;
  padding: 0 0 var(--space-3);
  border: 0;
  background: none;
  box-shadow: none;
}

.dio-drawer__foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border-top: 1px solid var(--dio-line);
}

.dio-drawer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dio-drawer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
}

/* Phones and small tablets: brand, basket and the Menu button; the rest is in the drawer. Without script
   (no .dio-js) there is no drawer, so the menu wraps under the brand instead. */
@media (max-width: 900px) {
  .dio-js .dio-nav,
  .dio-js .dio-header__account,
  .dio-js .dio-header__cta {
    display: none;
  }

  .dio-js .dio-header__menu {
    display: inline-flex;
  }

  html:not(.dio-js) .dio-header__in {
    flex-wrap: wrap;
  }

  html:not(.dio-js) .dio-nav {
    order: 3;
    flex-basis: 100%;
    justify-content: flex-start;
  }

  .dio-header__in {
    gap: var(--space-3);
    min-height: 64px;
  }

  .dio-brand__name {
    font-size: 19px;
  }

  .dio-brand__logo {
    height: 34px;
  }
}

/* ==========================================================================================
   MASTHEAD (blogMasthead)
   ========================================================================================== */

.dio-masthead {
  position: relative;
  padding: clamp(56px, 9vw, 112px) 0 clamp(32px, 5vw, 56px);
}

.dio-masthead--photo {
  display: flex;
  align-items: flex-end;
  min-height: clamp(440px, 82svh, 920px);
  padding: calc(var(--dio-header-h) + var(--space-10)) 0 clamp(36px, 5vw, 64px);
  overflow: hidden;
  background: #000;
}

.dio-masthead__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dark at the top for the header, clear through the middle, dark at the foot for the words */
.dio-masthead--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 14, 16, 0.45) 0%, rgba(13, 14, 16, 0) 26%, rgba(13, 14, 16, 0.2) 55%, rgba(13, 14, 16, 0.94) 100%);
  pointer-events: none;
}

.dio-masthead__in {
  position: relative;
  z-index: 1;
}

.dio-masthead__title {
  max-width: 16ch;
  margin: 0 0 var(--space-4);
  font-size: clamp(44px, 8vw, 104px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

.dio-masthead__desc {
  max-width: 640px;
  margin: 0 0 var(--space-5);
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.5;
  color: var(--dio-muted);
}

.dio-masthead--photo .dio-masthead__desc {
  color: #E4E0D8;
}

.dio-masthead__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  font-family: var(--font-family-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dio-muted);
}

.dio-masthead__meta time {
  font-size: inherit;
  color: inherit;
}

/* ==========================================================================================
   BREADCRUMB (fragment/breadcrumb :: pageBreadcrumb)
   ========================================================================================== */

:root .nova-page-crumbs {
  padding-top: var(--space-5);
  font-family: var(--font-family-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

:root .nova-page-crumbs a {
  color: var(--dio-accent-text);
  text-decoration: none;
}

/* ==========================================================================================
   STORY (blog/blogPost: the post's markdown or HTML)
   ========================================================================================== */

/* Long reading in light type on the dark ground: a heavier weight and the system's own smoothing (not the
   thin antialiased rendering set on body) keep the strokes solid, and a little tracking opens the letters up */
.dio-story {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) 0 var(--space-12);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: var(--dio-text);
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

.dio-story--side {
  max-width: none;
  margin: 0;
}

/* A markdown block set to "container" brings Nova's padding and container: the column already is one */
.dio-story .nova-html-content {
  padding: 0 !important;
}

.dio-story .nova-container {
  max-width: none;
  padding: 0;
}

.dio-story p {
  margin: 0 0 1.3em;
}

/* The first paragraph is the lede */
.dio-story :is(.nova-container, .nova-html-content, .articleBody) > p:first-child,
.dio-story > p:first-child {
  font-family: var(--font-family-display);
  font-size: clamp(23px, 2.6vw, 30px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--dio-ink);
}

.dio-story h2 {
  margin: 1.8em 0 0.6em;
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 700;
  line-height: 1.1;
}

.dio-story h3 {
  margin: 1.6em 0 0.5em;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

.dio-story a {
  color: var(--dio-ink);
  text-decoration: underline;
  text-decoration-color: var(--dio-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.dio-story a:hover {
  color: var(--dio-accent-text);
}

.dio-story blockquote {
  margin: 2em 0;
  padding: 4px 0 4px 28px;
  border-left: 3px solid var(--dio-accent);
}

.dio-story blockquote p {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: clamp(23px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--dio-ink);
}

.dio-story ul,
.dio-story ol {
  margin: 0 0 1.3em;
  padding-left: 1.3em;
}

.dio-story li {
  margin-bottom: 0.4em;
}

.dio-story li::marker {
  color: var(--dio-accent);
}

.dio-story hr {
  margin: 2.5em 0;
  border: 0;
  border-top: 1px solid var(--dio-line-strong);
  opacity: 1;
}

/* Pictures in a story: rounded, and allowed to break out of the reading column on wide screens */
.dio-story img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.dio-story figure {
  margin: 2em 0;
}

.dio-story figcaption {
  margin-top: var(--space-3);
  font-family: var(--font-family-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dio-dim);
}

@media (min-width: 1100px) {
  .dio-story:not(.dio-story--side) figure,
  .dio-story:not(.dio-story--side) p > img:only-child {
    width: calc(100% + 240px);
    max-width: none;
    margin-left: -120px;
  }
}

.dio-story code {
  font-family: var(--font-family-mono);
  font-size: 0.85em;
  color: var(--dio-ink);
}

.dio-story table {
  width: 100%;
  margin: 0 0 1.3em;
  border-collapse: collapse;
  font-size: 16px;
}

.dio-story th,
.dio-story td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--dio-line);
  text-align: left;
}

/* Story beside a sidebar (a post or blog with something in its rightSection) */
.dio-post-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
}

.dio-post-side__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-block: clamp(24px, 6vw, 72px);
}

@media (min-width: 1024px) {
  .dio-post-side {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}

/* ==========================================================================================
   POST CARDS (blogLatestPosts, blogRelatedArticles: fragment/diorama-cards)
   ========================================================================================== */

.dio-cards {
  padding-block: clamp(48px, 7vw, 96px);
}

.dio-cards .nova-blog-head {
  align-items: flex-end !important;
  margin-bottom: var(--space-8) !important;
}

.dio-cards .nova-blog-head__title,
.dio-cards__title {
  margin: 0 0 var(--space-8);
  font-family: var(--font-family-display);
  font-size: clamp(32px, 4vw, 44px) !important;
  font-weight: 700 !important;
  line-height: 1.05;
  color: var(--dio-ink);
}

.dio-cards .nova-blog-head__title {
  margin: 0;
}

.dio-cards .nova-blog-head__more {
  font-size: 15px;
  text-decoration: none;
}

.dio-cards__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--space-10) var(--space-8);
}

.dio-cards--compact .dio-cards__grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: var(--space-6);
}

.dio-cards--single .dio-cards__grid {
  grid-template-columns: minmax(0, 1fr);
}

.dio-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: var(--dio-ink) !important;
  text-decoration: none;
}

.dio-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--dio-surface);
  margin-bottom: var(--space-1);
}

.dio-card__media > div {
  height: 100%;
}

.dio-card__media img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  transition: transform 0.5s var(--dio-ease);
}

.dio-card:hover .dio-card__media img {
  transform: scale(1.04);
}

.dio-card__title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  transition: color 0.15s ease;
}

.dio-cards--compact .dio-card__title {
  font-size: 20px;
}

.dio-card:hover .dio-card__title {
  color: var(--dio-accent-text);
}

.dio-card__desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--dio-muted);
}

/* ==========================================================================================
   BLOG PAGE AND PHOTO WALL (Nova's extensions/blogList/photoWall, re-voiced)
   ========================================================================================== */

.dio-blog .nova-photowall {
  padding-top: var(--space-6);
}

:root .nova-photowall__year {
  border-color: var(--dio-line-strong);
  color: var(--dio-ink);
  font-family: var(--font-family-mono);
  font-weight: 500;
}

:root .nova-photowall__photo {
  border-radius: var(--radius-lg);
  background: var(--dio-surface);
}

:root .nova-photowall__photo:focus-visible {
  outline-color: var(--dio-ink);
}

:root .nova-photowall__title {
  font-family: var(--font-family-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

:root .nova-photowall__title a:hover {
  color: var(--dio-accent-text);
}

:root .nova-photowall__desc {
  color: var(--dio-muted);
}

:root .nova-photowall__date {
  font-family: var(--font-family-mono);
  color: var(--dio-dim);
}

:root .nova-photowall__viewer-title {
  font-family: var(--font-family-display);
}

:root .nova-photowall__viewer-count {
  font-family: var(--font-family-mono);
}

:root .nova-photowall__viewer-link {
  color: var(--dio-accent-text);
}

/* ==========================================================================================
   HERO (Nova's hero presets, re-voiced)
   ========================================================================================== */

:root .nova-hero__title,
:root .nova-hero__title :is(h1, h2) {
  font-family: var(--font-family-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.95;
}

:root .nova-hero__eyebrow,
:root .nova-hero .nova-overline {
  font-family: var(--font-family-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dio-accent-text);
}

:root .nova-hero__slide-caption,
:root .nova-hero__slide-count {
  font-family: var(--font-family-mono);
  letter-spacing: 0.06em;
}

/* ==========================================================================================
   ACCOUNT AREA (/p/account and its tabs: Nova's userAccountMenu band, accountOverview and the list
   pages). Nova recolours it through --account-*, but its band is --color-gray-900 (light, with the
   ramp turned round) and its cards and pills are hard-coded light: here they sit on the dark ground.
   ========================================================================================== */

:root .nova-account {
  --account-band-bg: var(--dio-surface);
  --account-band-ink: var(--dio-ink);
  --account-band-muted: var(--dio-muted);
  --account-page-bg: var(--dio-ground);
  --account-figure: var(--dio-ink);
  --account-figure-strong: var(--dio-accent-text);
  --account-display-font: var(--font-family-display);
}

:root .nova-account-head {
  border-bottom: 1px solid var(--dio-line);
}

:root .nova-account-head__avatar {
  color: var(--color-on-primary);
  border-color: rgba(255, 255, 255, 0.12);
}

:root .nova-account-head__btn {
  border-color: var(--dio-line-strong);
  border-radius: 999px;
}

:root .nova-account-tabs a[aria-current="page"] {
  color: var(--dio-ink);
  box-shadow: inset 0 2px 0 var(--dio-accent);
}

/* On Nova the white cards stand out from the page without a gap; on the dark ground they need one */
:root .nova-account-body {
  padding-top: var(--space-6);
}

:root .nova-account-tile,
:root .nova-account-card {
  background: var(--dio-surface);
  border: 1px solid var(--dio-line);
  box-shadow: none;
  color: var(--dio-text);
}

:root a.nova-account-tile:hover {
  background: var(--dio-raised);
  box-shadow: none;
}

:root .nova-account-card__head,
:root .nova-account-pager {
  border-color: var(--dio-line);
}

:root .nova-account-tile__label,
:root .nova-account-tile__note,
:root .nova-account-card__note,
:root .nova-account-row__meta {
  color: var(--dio-dim);
}

:root .nova-account-details dt {
  color: var(--dio-dim);
}

:root .nova-account-details dd,
:root .nova-account-summary {
  color: var(--dio-text);
}

:root .nova-account-card__link,
:root .nova-account-details a {
  color: var(--dio-accent-text);
}

:root a.nova-account-row:hover {
  background: var(--dio-raised);
  color: var(--dio-ink);
}

:root .nova-account-pill {
  background: rgba(255, 255, 255, 0.08);
  color: var(--dio-text);
}

:root .nova-account-pill--good {
  background: var(--color-success-light);
  color: var(--color-success);
}

:root .nova-account-pill--warn {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

:root .nova-account-pill--bad {
  background: var(--color-error-light);
  color: var(--color-error);
}

/* ==========================================================================================
   BASKET AND CHECKOUT (Nova's fullBasket and checkout steps, skinned by the --nb-* tokens in
   fragment/commerceTokens.html): panels on the dark ground with hairlines, mono numerals, the
   accent pill as the checkout button.
   ========================================================================================== */

:root {
  --nb-card-bg: var(--dio-surface);
  --nb-card-border: 1px solid var(--dio-line);
  --nb-card-radius: var(--radius-lg);
  --nb-summary-bg: var(--dio-surface);
  --nb-rule: var(--dio-line);
  --nb-control-border: 1px solid var(--dio-line-strong);
  --nb-num-font: var(--font-family-mono);
  --nb-sticky-top: calc(var(--dio-header-h) + 16px);
  --nb-bar-bg: var(--dio-surface);
  --nb-title-weight: 800;
  --nb-total-size: 1.5rem;

  --nb-cta-bg: var(--dio-accent);
  --nb-cta-fg: var(--color-on-primary);
  --nb-cta-hover-bg: color-mix(in srgb, var(--dio-accent) 85%, #FFFFFF);
  --nb-cta-radius: 999px;
  --nb-cta-weight: 600;

  /* Checkout steps */
  --nb-head-bg: var(--dio-raised);
  --nb-input-bg: var(--dio-ground);
}

/* ==========================================================================================
   NOVA CONTENT BLOCKS ON A DIORAMA PAGE
   ========================================================================================== */

/* A block placed straight in a full-width page section with its "contain" setting off keeps to the page
   width, with the page's side gutters (Ridge's own versions of these blocks always did, so a site moving
   from Ridge doesn't spill them edge to edge). Nova does the same for its strips under <main>. */
.dio-section:not(.dio-wrap) > :is(.dio-cards:not(.dio-wrap), .nova-timeline:not(.nova-container), .dd-widget,
                                  .nova-cta--strip, .nova-cta--panel, .nova-cta--stat) {
  box-sizing: border-box;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* The timeline's picture fills its frame (fragment/responsive-image wraps it in an unsized div) */
.nova-timeline__media > div {
  height: 100%;
}

.nova-timeline__media img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

/* The call-to-action band is the accent: dark text on it, and its buttons dark and outlined */
:root .nova-cta--band {
  color: var(--color-on-primary);
}

:root .nova-cta--band :is(h2, h3, p, .nova-overline) {
  color: inherit;
}

:root .nova-cta--band .nova-btn-primary {
  border-color: var(--dio-ground);
  background: var(--dio-ground);
  color: var(--dio-ink);
}

:root .nova-cta--band .nova-btn-primary:hover:not(:disabled) {
  border-color: #000;
  background: #000;
  color: var(--dio-ink);
}

:root .nova-cta--band .nova-btn-outline {
  border-color: rgba(13, 14, 16, 0.6);
  background: transparent;
  color: var(--color-on-primary);
}

:root .nova-cta--band .nova-btn-outline:hover:not(:disabled) {
  border-color: var(--dio-ground);
  background: rgba(13, 14, 16, 0.08);
  color: var(--color-on-primary);
}

/* ==========================================================================================
   NOVA AND BOOTSTRAP LEFTOVERS ON THE DARK GROUND (after Spec's sweep)
   ========================================================================================== */

/* Bootstrap 5's own colours (cards, tables, text utilities, list groups in a site's HTML blocks); its
   primary is the accent, so .text-primary and the like stay legible on the dark ground */
:root {
  --bs-primary: var(--dio-accent);
  --bs-primary-rgb: 255, 77, 46;
  --bs-primary-text-emphasis: var(--dio-accent-text);
  --bs-body-color: var(--dio-text);
  --bs-body-color-rgb: 228, 224, 216;
  --bs-body-bg: var(--dio-ground);
  --bs-body-bg-rgb: 13, 14, 16;
  --bs-emphasis-color: var(--dio-ink);
  --bs-emphasis-color-rgb: 243, 240, 234;
  --bs-secondary-color: var(--dio-muted);
  --bs-tertiary-color: var(--dio-dim);
  --bs-secondary-bg: var(--dio-surface);
  --bs-tertiary-bg: var(--dio-surface);
  --bs-link-color: var(--dio-ink);
  --bs-link-color-rgb: 243, 240, 234;
  --bs-link-hover-color: var(--dio-accent-text);
  --bs-border-color: var(--dio-line-strong);
  --bs-border-color-translucent: var(--dio-line);
  --bs-card-bg: var(--dio-surface);
  --bs-card-color: var(--dio-text);
  --bs-card-cap-bg: var(--dio-raised);
}

:root .card {
  --bs-card-bg: var(--dio-surface);
  --bs-card-color: var(--dio-text);
  --bs-card-border-color: var(--dio-line);
  --bs-card-title-color: var(--dio-ink);
  --bs-card-cap-bg: var(--dio-raised);
}

:root .text-muted,
:root .text-body-secondary {
  color: var(--dio-muted) !important;
}

:root .text-dark,
:root .text-body,
:root .text-black {
  color: var(--dio-ink) !important;
}

:root .bg-white,
:root .bg-light,
:root .bg-body {
  background-color: var(--dio-surface) !important;
}

/* The markdown block's "blog" style (extensions/markdownExtension/blog.css) colours bold text Bootstrap blue
   and pads the article itself: Diorama's reading column has its own padding and its ink for bold */
:root .dio-story.articleBody {
  padding: clamp(40px, 6vw, 72px) 0 var(--space-12);
  font-size: 19px;
  line-height: 1.75;
}

:root .dio-story--side.articleBody {
  padding-right: 0;
  padding-left: 0;
}

:root .articleBody strong {
  color: var(--dio-ink);
}

/* Form fields: dark wells, light text, the accent ring on focus */
.nova-input,
.form-control,
.form-select,
.uc-input,
.nb-amount-input {
  min-height: 44px;
  border: 1px solid var(--dio-line-strong);
  border-radius: var(--radius-sm);
  background-color: var(--dio-ground);
  color: var(--dio-ink);
  font-size: 16px;
}

.nova-input::placeholder,
.form-control::placeholder,
.uc-input::placeholder {
  color: var(--dio-dim);
  opacity: 1;
}

.nova-input:focus,
.form-control:focus,
.form-select:focus,
.uc-input:focus {
  outline: none;
  border-color: var(--dio-accent);
  background-color: var(--dio-ground);
  color: var(--dio-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dio-accent) 25%, transparent);
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--dio-ink);
  box-shadow: 0 0 0 1000px var(--dio-ground) inset;
}

/* Nova writes "brand colour behind, white text" inline in places (the contact form's Send, a product card's
   donate button). On Diorama the brand colour is the bright flare and the success and error colours are light
   (they are text colours on the dark ground), so the text on them is dark. */
[style*="background: var(--color-primary)"][style*="color: white"],
[style*="background-color: var(--color-primary)"][style*="color: white"],
.nova-jc-bg-primary.nova-on-dark,
.nova-btn[style*="--color-success"],
.nova-btn:is(.nova-jc-color-success, .nova-jc-color-success-light, .nova-jc-color-success-dark, .nova-jc-bg-success, .nova-jc-bg-success-light),
:root .nova-btn-error,
:root .nova-btn-success {
  color: var(--dio-on-accent) !important;
}

/* Dark success green written inline for text (the fundraiser widget's "plus Gift Aid" line) */
[style*="--color-success-700"] {
  color: var(--color-success) !important;
}

/* Bootstrap alerts in a site's HTML blocks: dark tints of their colour, light text */
:root .alert {
  --bs-alert-bg: var(--dio-surface);
  --bs-alert-color: var(--dio-text);
  --bs-alert-border-color: var(--dio-line-strong);
  --bs-alert-link-color: var(--dio-ink);
}

:root .alert-info {
  --bs-alert-bg: var(--color-info-bg);
  --bs-alert-color: var(--color-info-text);
  --bs-alert-border-color: rgba(141, 180, 242, 0.35);
}

:root .alert-success {
  --bs-alert-bg: var(--color-success-light);
  --bs-alert-color: var(--color-success);
  --bs-alert-border-color: rgba(92, 201, 140, 0.35);
}

:root .alert-warning {
  --bs-alert-bg: var(--color-warning-bg);
  --bs-alert-color: var(--color-warning-text);
  --bs-alert-border-color: rgba(242, 179, 61, 0.35);
}

:root .alert-danger {
  --bs-alert-bg: var(--color-error-light);
  --bs-alert-color: var(--color-error);
  --bs-alert-border-color: rgba(255, 133, 119, 0.35);
}

:root .alert-primary {
  --bs-alert-bg: var(--color-primary-50);
  --bs-alert-color: var(--dio-accent-text);
  --bs-alert-border-color: var(--color-primary-ring);
}

:root .alert :is(h1, h2, h3, h4, h5, h6) {
  color: inherit;
}

/* Bootstrap colour bands that leave their text to the page colour (light here): white on the mid-tone ones,
   dark on the accent */
:root :is(.bg-success, .bg-danger, .bg-secondary, .bg-dark, .bg-info) {
  color: #FFFFFF;
}

:root :is(.bg-primary, .bg-warning),
:root .bg-primary.text-white,
:root .bg-primary .text-white {
  /* Bootstrap's primary is the bright accent here: "text-white" on it would not be legible */
  color: var(--dio-on-accent) !important;
}

:root :is(.bg-success, .bg-danger, .bg-secondary, .bg-dark, .bg-info, .bg-primary, .bg-warning) :is(h1, h2, h3, h4, h5, h6) {
  color: inherit;
}

:root .blockquote-footer {
  color: var(--dio-muted);
}

/* The latest-posts log's "Latest" tag sits on the accent */
:root .nova-log__tag {
  color: var(--color-on-primary);
}

/* Text on the accent in Nova's inline <style> blocks is white; on the flare it is dark. Those blocks load
   after this file, hence !important. */
.uc-cta, .nb-amount-update, .nb-summary-cta, .le-btn-primary,
.nb-summary-actions .nb-summary-cta,
.nb-summary-actions .nb-summary-cta:hover,
.wizard-step.active .wizard-step-circle {
  color: var(--color-on-primary) !important;
}

/* Nova inline styles and <style> blocks that hard-code a white background: the text on them is light now
   (the grey ramp is turned round), so they must be dark too. Stripe's own fields are light iframes, so
   their containers get a light surface instead. */
[style*="background: white"],
[style*="background:white"],
[style*="background: #fff"],
[style*="background:#fff"],
[style*="background: #FFF"],
[style*="background:#FFF"],
[style*="background: #ffffff"],
[style*="background: #FFFFFF"],
[style*="background-color: white"],
[style*="background-color:white"],
[style*="background-color: #fff"],
[style*="background-color: #FFF"],
.nova-jc-bg-white,
.demo-form,
.uc-delivery-option, .uc-lock-block, .uc-panel-block, .uc-lock-btn,
.nb-methods-card, .nb-empty, .nb-card, .nb-summary-card, .nb-summary-secondary,
.nova-coverflow-card, .nova-mobile-menu {
  background: var(--dio-surface) !important;
}

/* The email capture dock's card (bdgr.css "ui: capture"), white by default */
.nova-capture { --capture-bg: var(--dio-surface); }

/* bdgr.css's own hard-coded whites (the controls and cards that sit on the page; slider thumbs, slideshow
   dots and gallery arrows stay white) */
:root :is(.nova-child-category:hover, .nova-child-category:focus,
          .nova-facet-value__box, .nova-search-input:hover, .nova-search-input:focus,
          .fundraiser-donation-widget .amount-btn, .nova-feature-card, .nova-pricing-card, .nova-testimonial,
          .bdgr-search-scope option) {
  background: var(--dio-surface);
}

/* The product page's sticky buy bar on phones (Nova: near-white glass) */
:root .nova-sticky-buybar {
  border-top: 1px solid var(--dio-line);
  background: rgba(13, 14, 16, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--dio-ink);
}

:root .nova-variant-btn {
  border-color: var(--dio-line-strong);
  background: var(--dio-surface);
  color: var(--dio-ink);
}

:root .nova-variant-btn:hover:not(.nova-variant-btn--disabled):not(.nova-variant-btn--selected) {
  border-color: var(--dio-ink);
  color: var(--dio-ink);
}

/* Chosen: an accent outline over a tint of it, the label staying light (not dark text on a solid fill) */
:root .nova-variant-btn--selected,
:root .nova-variant-btn--disabled.nova-variant-btn--selected {
  border-color: var(--dio-accent);
  background: color-mix(in srgb, var(--dio-accent) 22%, var(--dio-surface));
  color: var(--dio-ink);
  box-shadow: inset 0 0 0 1px var(--dio-accent);
}

/* Text pasted into a product description or a post from elsewhere often carries its own dark colour
   (style="color: #2C3E50"), which disappears on the dark ground: it takes the theme's text colour instead.
   Inline backgrounds are left alone, with the text colour that goes with them. */
:root :is(.nova-product-card__description, .nova-product-detail__description, .dio-story)
      :is([style*="color"], [class*="nova-jc-variant-heading-"], .nova-jc-variant-link, [class*="nova-jc-color-"],
          .nova-jc-border-default, .nova-jc-border-light, .nova-jc-border-dark, .nova-jc-border-accent-top,
          .nova-jc-border-gradient-top):not([style*="background"], [class*="nova-jc-bg"]) {
  color: inherit !important;
}

:root .nova-variant-btn--disabled,
:root .nova-variant-btn--disabled:hover {
  border-color: var(--dio-line);
  background: var(--dio-ground);
  color: var(--dio-dim);
}

/* The recent-donations widget's card form (shared donation-display.css) is white */
:root .dd-widget {
  --dd-border: var(--dio-line);
  --dd-surface: var(--dio-ground);
}

:root .dd-widget.dd-card {
  border: 1px solid var(--dio-line);
  background: var(--dio-surface);
  box-shadow: none;
}

:root .dd-widget .dd-btn {
  border-color: var(--dio-line-strong);
  background: var(--dio-ground);
  color: var(--dio-ink);
}

:root .fundraiser-donation-widget .amount-btn {
  border-color: var(--dio-line-strong);
  color: var(--dio-ink);
}

.nb-methods-card,
.nb-methods-header {
  border-color: var(--dio-line) !important;
}

.uc-input, .nb-qty-pill, .nb-amount-frame, .nb-amount-input {
  background: var(--dio-ground) !important;
}

#uc-payment-element,
#card-element,
#payment-request-button {
  padding: 16px;
  border-radius: var(--radius-md);
  background: #F3F0EA;
  color: #0D0E10;
}

.StripeElement {
  background: #FFFFFF;
}

/* Bootstrap buttons in platform pages (the 404 page's "back to the homepage", older forms) */
:root .btn-primary,
:root .btn-success {
  min-height: 44px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--dio-accent);
  border-radius: 999px;
  background: var(--dio-accent);
  color: var(--color-on-primary);
  font-weight: 600;
}

:root .btn-primary:hover,
:root .btn-success:hover {
  border-color: color-mix(in srgb, var(--dio-accent) 85%, #FFFFFF);
  background: color-mix(in srgb, var(--dio-accent) 85%, #FFFFFF);
  color: var(--color-on-primary);
}

:root .btn-secondary,
:root .btn-outline-primary,
:root .btn-outline-secondary {
  border-radius: 999px;
  border-color: var(--dio-line-strong);
  background: transparent;
  color: var(--dio-ink);
}

table {
  color: var(--dio-text);
}

hr {
  border-color: var(--dio-line-strong);
  opacity: 1;
}

.alert {
  border-color: var(--dio-line-strong);
}

/* ==========================================================================================
   FOOTER
   ========================================================================================== */

.dio-footer {
  margin-top: var(--space-12);
  border-top: 1px solid var(--dio-line);
  color: var(--dio-muted);
  font-size: 14px;
}

.dio-footer__main {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6) var(--space-10);
  padding-block: var(--space-10) var(--space-6);
}

.dio-footer__name {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--dio-ink);
}

.dio-footer__content {
  min-width: 0;
}

.dio-footer__content a {
  color: var(--dio-ink);
}

/* Target size (WCAG 2.5.8): a link that is a list item on its own (the footer slot's link columns)
   is at least 24px high; the 22px rows grow by the difference */
.dio-footer__content li > a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* Nova's footer social links colour their icon --color-gray-300 inline, light on Nova's dark footer but dark
   here, where the grey scale is turned round (the hover's inline white still applies) */
.dio-footer a[style*="--color-gray-300"] {
  color: var(--dio-muted) !important;
}

.dio-footer__legal {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-bottom: var(--space-10);
}

.dio-footer__legal p {
  max-width: 720px;
  margin: 0;
  line-height: 1.5;
}

/* a link in the legal lines ("Powered by") reads as a link by more than its colour, which is close to
   the muted text around it */
.dio-footer__legal a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dio-footer__legal p + p {
  color: var(--dio-dim);
  font-size: 13px;
}

/* ==========================================================================================
   MOTION
   ========================================================================================== */

@media (prefers-reduced-motion: reduce) {
  .dio-header,
  :root .nova-btn,
  .dio-card__media img,
  .dio-menu__caret {
    transition: none !important;
  }

  .dio-card:hover .dio-card__media img,
  :root .nova-btn-primary:hover:not(:disabled) {
    transform: none;
  }

  .nova-button {
    --button-transition: none;
    --button-hover-transform: none;
    --button-active-transform: none;
  }
}

/* Account pages (ui/auth-head.html: sign in, register, password pages), Brock's variant: dark ground,
   accent button, pill buttons and an outlined sign-out (fragment/diorama-auth adds the fonts, display
   headings and the outline's border) */
:root {
  --auth-page-bg: var(--dio-ground);
  --auth-card-bg: var(--dio-surface);
  --auth-card-border: 1px solid var(--dio-line);
  --auth-input-border: 1.5px solid var(--dio-line-strong);
  --auth-input-bg: var(--dio-ground);
  --auth-focus: var(--dio-accent);
  --auth-focus-ring: color-mix(in srgb, var(--dio-accent) 25%, transparent);
  --auth-link: var(--dio-ink);
  --auth-btn-radius: 999px;
  --auth-primary-bg: var(--dio-accent);
  --auth-primary-ink: var(--color-on-primary);
  --auth-primary-hover-bg: var(--dio-ink);
  --auth-danger-bg: transparent;
  --auth-danger-ink: var(--dio-ink);
  --auth-danger-hover-bg: rgba(255, 255, 255, 0.06);
}

/* Language menu (ui/language-menu.html) */
.nova-lang {
  --lang-toggle-color: var(--dio-ink);
  --lang-toggle-hover-bg: var(--dio-surface);
  --lang-focus: var(--dio-accent);
  --lang-menu-bg: var(--dio-surface);
  --lang-menu-border: var(--dio-line);
  --lang-option-color: var(--dio-ink);
  --lang-option-hover-bg: var(--dio-surface);
  --lang-option-hover-color: var(--dio-ink);
}

/* JSON components: the status colours are light here (text colours on the dark ground), so text and headings
   on a success, error or warning background are dark. See "JSON components: semantic tokens" in bdgr.css. */
:root {
  /* the pale backgrounds are tints of the dark ground here, so the page's light text stays readable */
  --json-bg-primary-light: var(--color-primary-50);
  --json-bg-warning-light: var(--color-warning-bg);
  /* the primary is light too: text on it is the dark on-accent, and a primary button on any of these is
     the on-accent with the section's colour as its label */
  --json-bg-primary-text: var(--color-on-primary);
  --json-bg-primary-dark-text: var(--color-on-primary);
  --json-bg-primary-button-bg: var(--color-on-primary);
  --json-bg-primary-button-color: var(--json-bg-primary, var(--color-primary));
  --json-bg-primary-dark-button-bg: var(--color-on-primary);
  --json-bg-primary-dark-button-color: var(--json-bg-primary-dark, var(--color-primary-dark));
}