*, *:before, *:after {
  box-sizing: border-box;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct box sizing in Firefox.
 */

hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Remove the inheritance of text transform in Edge and Firefox.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
 */

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}




/* CSS variables */

:root {
  --column-gap: 2.13%;
  --column-width-multiplier: 8.333;
}

/* Mobile layout */

.row-fluid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}


  .row-fluid .span1,
  .row-fluid .span2,
  .row-fluid .span3,
  .row-fluid .span4,
  .row-fluid .span5,
  .row-fluid .span6,
  .row-fluid .span7,
  .row-fluid .span8,
  .row-fluid .span9,
  .row-fluid .span10,
  .row-fluid .span11,
  .row-fluid .span12{
  min-height: 1px;
  width: 100%;
}

/* Desktop layout */

@media (min-width: 768px) {
  .row-fluid {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  
    .row-fluid .span1 {
      width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span2 {
      width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span3 {
      width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span4 {
      width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span5 {
      width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span6 {
      width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span7 {
      width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span8 {
      width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span9 {
      width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span10 {
      width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span11 {
      width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100));
    }
  
}
.content-wrapper {
  margin: 0 auto;
  padding: 0 1rem;
}

@media screen and (min-width: 1380px) {
  .content-wrapper {
    padding: 0;
  }
}

.dnd-section > .row-fluid {
  margin: 0 auto;
}

.dnd-section .dnd-column {
  padding: 0 1rem;
}

@media (max-width: 767px) {
  .dnd-section .dnd-column {
    padding: 0;
  }
}






:root {
  --dv-walnut-deep: #1E0F09;
  --dv-walnut: #4A2616;
  --dv-velvet: #7A1020;
  --dv-velvet-deep: #3E0710;
  --dv-brass: #C9A45C;
  --dv-brass-light: #E8CF8F;
  --dv-cream: #F4EADB;
  --dv-paper: #EFE4D2;
  --dv-ink: #1B120D;
  --dv-teal: #127C78;
  --dv-teal-light: #4FB3A9;
  --dv-punk: #FF2E88;
  --dv-neon: #3BE8F0;
  --dv-walnut-deep-rgb: 30, 15, 9;
  --dv-walnut-rgb: 74, 38, 22;
  --dv-velvet-rgb: 122, 16, 32;
  --dv-brass-rgb: 201, 164, 92;
  --dv-cream-rgb: 244, 234, 219;
  --dv-ink-rgb: 27, 18, 13;

  --dv-font-display: "Fraunces", serif;
  --dv-font-body: "DM Sans", sans-serif;
  --dv-font-mono: "DM Mono", monospace;
  --dv-h1-max: 132px;
  --dv-h2-max: 76px;
  --dv-body-max: 19px;

  --dv-content: 1240px;
  --dv-gutter: clamp(16px, 4vw, 48px);
  --dv-radius: 18px;
  --dv-header-offset: 76px;
  --dv-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dv-gilt: linear-gradient(135deg, var(--dv-brass-light) 0%, var(--dv-brass) 28%, #8a6a2c 52%, var(--dv-brass-light) 74%, var(--dv-brass) 100%);
}

/* ── Text modes: modules never pick colours themselves, they read these working tokens ─────────────────────── */
:root,
.dv-text--light {
  --dv-c-heading: var(--dv-cream);
  --dv-c-text: var(--dv-cream);
  --dv-c-text-2: rgba(var(--dv-cream-rgb), 0.86);
  --dv-c-muted: rgba(var(--dv-cream-rgb), 0.6);
  --dv-c-line: rgba(var(--dv-cream-rgb), 0.16);
  --dv-c-card: rgba(var(--dv-cream-rgb), 0.06);
  --dv-c-card-line: rgba(var(--dv-brass-rgb), 0.35);
  --dv-c-link: var(--dv-brass-light);
  --dv-c-link-hover: var(--dv-cream);
  --dv-c-eyebrow: var(--dv-brass);
}
.dv-text--dark {
  --dv-c-heading: var(--dv-ink);
  --dv-c-text: var(--dv-ink);
  --dv-c-text-2: rgba(var(--dv-ink-rgb), 0.82);
  --dv-c-muted: rgba(var(--dv-ink-rgb), 0.6);
  --dv-c-line: rgba(var(--dv-ink-rgb), 0.16);
  --dv-c-card: rgba(var(--dv-ink-rgb), 0.05);
  --dv-c-card-line: rgba(var(--dv-ink-rgb), 0.2);
  --dv-c-link: var(--dv-velvet);
  --dv-c-link-hover: var(--dv-ink);
  --dv-c-eyebrow: var(--dv-velvet);
}

/* ── Elements ─────────────────────────────────────────────────────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}
html,
body {
  overflow-x: clip;
}
body {
  margin: 0;
  background: var(--dv-walnut-deep);
  color: var(--dv-c-text);
  font-family: var(--dv-font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
::selection {
  background: var(--dv-brass);
  color: var(--dv-ink);
}
a {
  color: var(--dv-c-link);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:where(:hover) {
  color: var(--dv-c-link-hover);
}
:focus-visible {
  outline: 2px solid var(--dv-brass-light);
  outline-offset: 3px;
}
img {
  max-width: 100%;
}
[id] {
  scroll-margin-top: calc(var(--dv-header-offset) + 16px);
}
.body-container-wrapper {
  position: relative;
  z-index: 1;
}
/* HubSpot's drag and drop rows: the sections run edge to edge, the modules set their own content width */
.body-container-wrapper .dnd-section {
  padding: 0;
}
.body-container-wrapper .dnd-section > .row-fluid {
  max-width: none;
}
.body-container-wrapper .dnd-section .dnd-column {
  padding: 0;
}

/* ── Section shell ────────────────────────────────────────────────────────────────────────────────────────────── */
.dv-section {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding-top: clamp(calc(var(--dv-pt, 120px) * 0.55), calc(var(--dv-pt-n, 120) * 0.0727vw), var(--dv-pt, 120px));
  padding-bottom: clamp(calc(var(--dv-pb, 120px) * 0.55), calc(var(--dv-pb-n, 120) * 0.0727vw), var(--dv-pb, 120px));
  color: var(--dv-c-text);
  font-family: var(--dv-m-body, var(--dv-font-body));
}
/* Anchor jumps: subtract the section's own top padding (same clamp as above), so the heading lands 20 px below the
   fixed menu instead of a whole padding further down */
.dv-section[id] {
  scroll-margin-top: calc(var(--dv-header-offset) + 20px - clamp(calc(var(--dv-pt, 120px) * 0.55), calc(var(--dv-pt-n, 120) * 0.0727vw), var(--dv-pt, 120px)));
}
.dv-section--contained {
  margin-inline: auto;
}
.dv-section--align-left {
  margin-inline: 0 auto;
}
.dv-section--align-right {
  margin-inline: auto 0;
}
.dv-container {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--dv-content) + 2 * var(--dv-gutter));
  margin-inline: auto;
  padding-inline: var(--dv-gutter);
}

/* Surfaces */
.dv-surface--walnut { background: var(--dv-walnut); }
.dv-surface--teal { background: var(--dv-teal); }
.dv-surface--paper { background: var(--dv-paper); }
.dv-surface--custom { background: var(--dv-bg-custom, transparent); }
/* Velvet: vertical folds like the curtain in the portraits */
.dv-surface--velvet {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.45) 100%),
    repeating-linear-gradient(90deg, var(--dv-velvet) 0px, var(--dv-velvet-deep) 38px, var(--dv-velvet) 76px, #8d1426 104px, var(--dv-velvet) 132px);
}
.dv-surface--image,
.dv-surface--video {
  overflow: hidden;
}

/* Background layer (image/video surfaces) */
.dv-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.dv-bg__media,
.dv-bg__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--dv-bg-pos, 50% 40%);
}
.dv-bg__overlay {
  position: absolute;
  inset: 0;
  background: var(--dv-bg-overlay, rgba(var(--dv-walnut-deep-rgb), 0.55));
}
@media (max-width: 767px) {
  .dv-bg__video--desktop-only {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dv-bg__video {
    display: none;
  }
}

/* ── Tones ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
.dv-tone--brass { --dv-tone: var(--dv-brass); --dv-tone-ink: var(--dv-ink); }
.dv-tone--cream { --dv-tone: var(--dv-cream); --dv-tone-ink: var(--dv-ink); }
.dv-tone--velvet { --dv-tone: var(--dv-velvet); --dv-tone-ink: var(--dv-cream); }
.dv-tone--teal { --dv-tone: var(--dv-teal); --dv-tone-ink: var(--dv-cream); }
.dv-tone--teal_light { --dv-tone: var(--dv-teal-light); --dv-tone-ink: var(--dv-ink); }
.dv-tone--ink { --dv-tone: var(--dv-ink); --dv-tone-ink: var(--dv-cream); }
.dv-tone--punk { --dv-tone: var(--dv-punk); --dv-tone-ink: var(--dv-ink); }
.dv-tone--neon { --dv-tone: var(--dv-neon); --dv-tone-ink: var(--dv-ink); }

.dv-accent {
  color: var(--dv-tone, var(--dv-brass));
  font-style: italic;
}

/* ── Section heading: eyebrow with a brass rule + serif heading ────────────────────────────────────────────────── */
.dv-head {
  margin-bottom: clamp(28px, 4vw, 52px);
}
.dv-head--center {
  text-align: center;
}
.dv-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  font-family: var(--dv-font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dv-c-eyebrow);
}
.dv-head__eyebrow::before {
  content: "";
  width: 36px;
  height: 1px;
  background: currentColor;
}
.dv-head--center .dv-head__eyebrow::after {
  content: "";
  width: 36px;
  height: 1px;
  background: currentColor;
}
.dv-head__title {
  margin: 0;
  font-family: var(--dv-m-display, var(--dv-font-display));
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--dv-c-heading);
  text-wrap: balance;
}
.dv-head__title--xxl { font-size: clamp(54px, 10.5vw, var(--dv-m-head-max, var(--dv-h1-max))); line-height: 0.92; letter-spacing: -0.035em; }
.dv-head__title--xl { font-size: clamp(40px, 6.4vw, var(--dv-m-head-max, var(--dv-h2-max))); }
.dv-head__title--l { font-size: clamp(34px, 5vw, var(--dv-m-head-max, calc(var(--dv-h2-max) * 0.8))); }
.dv-head__title--m { font-size: clamp(28px, 3.6vw, var(--dv-m-head-max, calc(var(--dv-h2-max) * 0.6))); }

/* ── Body copy inside modules ─────────────────────────────────────────────────────────────────────────────────── */
.dv-copy {
  font-size: var(--dv-m-text-size, clamp(16px, 1.5vw, var(--dv-body-max)));
  line-height: 1.6;
  color: var(--dv-c-text-2);
  text-wrap: pretty;
}
.dv-copy > :first-child { margin-top: 0; }
.dv-copy > :last-child { margin-bottom: 0; }
.dv-copy p,
.dv-copy ul,
.dv-copy ol { margin: 0 0 1em; font-size: inherit; }
.dv-copy strong { color: var(--dv-c-heading); font-weight: 700; }
.dv-copy a { text-decoration: underline; text-underline-offset: 3px; }

/* ── Buttons ──────────────────────────────────────────────────────────────────────────────────────────────────── */
.dv-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
/* Colour variables live on the base class only: restating them in the :hover/:focus list below would beat every
   variant (0-2-0 against 0-1-0) and turn outline, velvet and teal buttons into brass ones on hover */
.dv-btn {
  --dv-btn-bg: var(--dv-brass);
  --dv-btn-fg: var(--dv-ink);
  --dv-btn-line: transparent;
}
.dv-btn,
.dv-btn:hover,
.dv-btn:focus,
.dv-btn:active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  min-height: 48px;
  padding: 13px 26px;
  border: 1px solid var(--dv-btn-line);
  border-radius: 999px;
  background: var(--dv-btn-bg);
  color: var(--dv-btn-fg);
  font-family: var(--dv-font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.25s var(--dv-ease), background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.dv-btn--brass { --dv-btn-bg: var(--dv-brass); --dv-btn-fg: var(--dv-ink); }
.dv-btn--velvet { --dv-btn-bg: var(--dv-velvet); --dv-btn-fg: var(--dv-cream); }
.dv-btn--teal { --dv-btn-bg: var(--dv-teal); --dv-btn-fg: var(--dv-cream); }
.dv-btn--cream { --dv-btn-bg: var(--dv-cream); --dv-btn-fg: var(--dv-ink); }
.dv-btn--outline { --dv-btn-bg: transparent; --dv-btn-fg: var(--dv-c-heading); --dv-btn-line: var(--dv-c-card-line); }
.dv-btn--text { --dv-btn-bg: transparent; --dv-btn-fg: var(--dv-c-link); padding-inline: 0; min-height: 0; }
.dv-btn--text::after { content: "→"; transition: transform 0.25s var(--dv-ease); }
.dv-btn:not(.dv-btn--text):hover,
.dv-btn:not(.dv-btn--text):focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  color: var(--dv-btn-fg);
}
.dv-btn--outline:hover,
.dv-btn--outline:focus-visible {
  --dv-btn-bg: rgba(var(--dv-brass-rgb), 0.1);
  --dv-btn-fg: var(--dv-brass-light);
  --dv-btn-line: var(--dv-brass);
}
.dv-btn--text:hover,
.dv-btn--text:focus-visible { color: var(--dv-c-link-hover); }
.dv-btn--text:hover::after { transform: translateX(4px); }
.dv-cta-embed {
  display: inline-flex;
}
/* Our own button elements: theme boilerplate styles bare buttons, so restate the reset (error catalog) */
.dv-reset-btn,
.dv-reset-btn:hover,
.dv-reset-btn:focus,
.dv-reset-btn:active {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  text-transform: none;
  cursor: pointer;
}

/* ── Gilded frame (hero portrait, board portraits) ─────────────────────────────────────────────────────────────── */
.dv-frame {
  position: relative;
  box-sizing: border-box;
}
.dv-frame--gilded {
  padding: clamp(10px, 1.6vw, 18px);
  background: var(--dv-gilt);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), inset 0 0 0 2px rgba(255, 255, 255, 0.25), inset 0 0 0 6px rgba(0, 0, 0, 0.18);
}
.dv-frame--gilded::before {
  content: "";
  position: absolute;
  inset: clamp(5px, 0.8vw, 8px);
  border: 1px solid rgba(60, 40, 10, 0.55);
  pointer-events: none;
}
.dv-frame--thin {
  padding: 6px;
  border: 1px solid var(--dv-brass);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45);
}
.dv-frame__inner {
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.dv-plaque {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 4px;
  background: var(--dv-gilt);
  color: #2b1d08;
  font-family: var(--dv-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* ── Reveal on scroll (js/david-theme.js adds .dv-reveal-ready on the root element, then .is-in per element) ─────────────── */
.dv-reveal-ready .dv-motion-on [data-dv-reveal]:not(.is-in) {
  opacity: 0;
  transform: translateY(28px);
}
.dv-reveal-ready .dv-motion-on [data-dv-reveal] {
  transition: opacity 0.8s var(--dv-ease), transform 0.8s var(--dv-ease);
  transition-delay: var(--dv-delay, 0s);
}

/* ── Punk mode: the david-nav easter egg swaps the club for a basement gig ──────────────────────────────────────── */
html.dv-punk {
  --dv-brass: var(--dv-punk);
  --dv-brass-light: #ff8cc0;
  --dv-brass-rgb: 255, 46, 136;
  --dv-velvet: #111111;
  --dv-velvet-deep: #000000;
  --dv-teal: #1a1a1a;
  --dv-teal-light: var(--dv-neon);
  --dv-gilt: repeating-linear-gradient(45deg, var(--dv-punk) 0 10px, #111111 10px 20px);
}
html.dv-punk .dv-head__title {
  font-family: var(--dv-font-mono);
  text-transform: uppercase;
  letter-spacing: -0.06em;
  overflow-wrap: anywhere;
  transform: rotate(-1deg);
}
html.dv-punk .dv-accent {
  font-style: normal;
  background: var(--dv-punk);
  color: #111111;
  padding: 0 0.12em;
}
html.dv-punk img {
  filter: contrast(1.25) saturate(1.35);
}
.dv-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 1100;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--dv-ink);
  color: var(--dv-cream);
  border: 1px solid var(--dv-brass);
  font-family: var(--dv-font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  transform: translate(-50%, 0);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5);
}
.dv-toast[hidden] {
  display: none;
}

/* ── Keyframes ────────────────────────────────────────────────────────────────────────────────────────────────── */
@keyframes dv-slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes dv-spin {
  to { transform: rotate(360deg); }
}

/* ── Motion switches: a module with animations off, and visitors who ask for reduced motion ───────────────────── */
.dv-motion-off *,
.dv-motion-off *::before,
.dv-motion-off *::after {
  animation: none !important; /* documented override: the module's own keyframes must not run when motion is off */
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01s !important; /* documented override: reduced motion beats every module animation */
    animation-iteration-count: 1 !important;
    transition-duration: 0.01s !important;
  }
}

/* ── Helpers ──────────────────────────────────────────────────────────────────────────────────────────────────── */
.dv-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}