/**
 * djtutor.com :: tpl_djtutor (Cassiopeia child) - template stylesheet
 *
 * Loads after Cassiopeia's template.min.css and re-themes it through the same custom properties
 * Cassiopeia/Bootstrap read, so core output (articles, forms, pagination, modules) follows the brand
 * without touching their markup.
 *
 * Brand: the single ink of the DJ Tutor logo, #2152AD (hue 219). Everything else is derived from it:
 * tints for surfaces and badges, a navy for the footer, cool neutrals for text and borders.
 *
 * Fonts: system stacks only. No @font-face, no url() to any other host anywhere in this file.
 *
 * The --djt-* tokens are shared with media/com_djtutor/css/djtutor.css (the component stylesheet, which
 * also carries a copy as defaults). Keep the two in sync when changing a value.
 */

/* =============================================================================
   1. Design tokens
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- brand --- */
  --djt-brand: #2152ad;
  --djt-brand-hover: #16397a;
  --djt-ink: #2152ad;            /* links and interactive colour */
  --djt-ink-strong: #16397a;     /* hover / pressed */
  --djt-ink-soft: #e9f0fb;       /* tint for backgrounds */
  --djt-ink-deep: #0d2045;       /* navy: footer */
  --djt-on-ink: #ffffff;
  --djt-logo: #2152ad;

  /* --- neutrals (cool, hue 219) --- */
  --djt-text: #161b26;
  --djt-text-strong: #0b1220;
  --djt-muted: #4c5464;          /* 7.6:1 on white, 4.5:1 over the strongest point of the
                                    ambient wash - see "Ambient background" for the sums */
  --djt-bg: #ffffff;
  --djt-bg-alt: #f4f7fc;
  --djt-surface: #ffffff;
  --djt-surface-2: #f4f7fc;
  --djt-surface-3: #e9eef6;
  --djt-border: #d8dfea;
  --djt-border-strong: #b7c2d4;

  /* --- states --- */
  --djt-ok: #176640;
  --djt-ok-soft: #e1f3ea;
  --djt-warn: #7c4a03;
  --djt-warn-soft: #fef3c7;
  --djt-danger: #a51f18;
  --djt-focus: var(--djt-ink);
  --djt-focus-on-brand: #0d2045;

  /* --- badges (background / foreground, all >= 6:1) --- */
  --djt-badge-bg: #e9f0fb;
  --djt-badge-fg: #16397a;
  --djt-badge-education-bg: #e9f0fb;
  --djt-badge-education-fg: #16397a;
  --djt-badge-business-bg: #e1f3ea;
  --djt-badge-business-fg: #176640;
  --djt-badge-review-bg: #efe9fb;
  --djt-badge-review-fg: #4a2a8a;
  --djt-badge-intro-bg: #fdeedb;
  --djt-badge-intro-fg: #7a3e05;
  --djt-badge-promo-bg: #ecf0f5;
  --djt-badge-promo-fg: #3b4454;
  --djt-badge-soon-bg: #fef3c7;
  --djt-badge-soon-fg: #7c4a03;

  /* --- shadows --- */
  --djt-shadow-sm: 0 1px 2px rgba(13, 32, 69, .06), 0 1px 3px rgba(13, 32, 69, .08);
  --djt-shadow: 0 1px 2px rgba(13, 32, 69, .06), 0 8px 24px rgba(13, 32, 69, .10);
  --djt-shadow-lg: 0 2px 4px rgba(13, 32, 69, .06), 0 18px 48px rgba(13, 32, 69, .16);

  /* --- type --- */
  --djt-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Ubuntu, Cantarell, Arial, sans-serif;
  --djt-font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --djt-fs-xs: .75rem;      /* 12 */
  --djt-fs-sm: .875rem;     /* 14 */
  --djt-fs-md: 1rem;        /* 16 */
  --djt-fs-lg: 1.125rem;    /* 18 */
  --djt-fs-xl: 1.375rem;    /* 22 */
  --djt-fs-2xl: 1.75rem;    /* 28 */
  --djt-fs-3xl: clamp(2rem, 1.55rem + 1.8vw, 2.5rem);     /* 32-40 */
  --djt-fs-4xl: clamp(2.25rem, 1.6rem + 2.8vw, 3.25rem);  /* 36-52 */
  --djt-lh-tight: 1.15;
  --djt-lh-snug: 1.3;
  --djt-lh-body: 1.6;
  --djt-lh-read: 1.7;
  --djt-measure: 68ch;
  /* the scale in use on listing pages: section heading 2xl/700 > card heading 1.0625rem/600 > body md/400 > meta sm/400 */
  --djt-fs-card: 1.0625rem; /* 17 */

  /* --- spacing (4px scale) --- */
  --djt-sp-1: .25rem;
  --djt-sp-2: .5rem;
  --djt-sp-3: .75rem;
  --djt-sp-4: 1rem;
  --djt-sp-5: 1.5rem;
  --djt-sp-6: 2rem;
  --djt-sp-7: 3rem;
  --djt-sp-8: 4rem;
  --djt-sp-9: 6rem;

  /* --- shape & motion --- */
  --djt-radius-sm: .375rem;
  --djt-radius: .625rem;
  --djt-radius-lg: 1rem;
  --djt-radius-pill: 999px;
  --djt-dur: .18s;
  --djt-ease: cubic-bezier(.2, .7, .2, 1);

  /* --- layout --- */
  --djt-container: 1320px;
  --djt-gutter: 1rem;
  --djt-header-h: 4rem;

  /* select arrow: inline data URI, no request */
  --djt-select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235b6578' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3 6 5 5 5-5'/%3e%3c/svg%3e");

  /* --- bridge: hand the tokens to Cassiopeia / Bootstrap --- */
  --cassiopeia-font-family-body: var(--djt-font-sans);
  --cassiopeia-font-family-headings: var(--djt-font-sans);
  --cassiopeia-font-weight-normal: 400;
  --cassiopeia-font-weight-headings: 700;
  --cassiopeia-color-primary: var(--djt-brand);
  --cassiopeia-color-hover: var(--djt-brand-hover);
  --cassiopeia-color-link: var(--djt-ink);
  --body-font-family: var(--djt-font-sans);
  --body-bg: var(--djt-bg);
  --body-bg-rgb: 255, 255, 255;
  --body-color: var(--djt-text);
  --body-color-rgb: 22, 27, 38;
  --body-line-height: var(--djt-lh-body);
  --heading-color: var(--djt-text-strong);
  --link-color: var(--djt-ink);
  --link-color-rgb: 33, 82, 173;
  --link-hover-color: var(--djt-ink-strong);
  --link-hover-color-rgb: 22, 57, 122;
  --primary: var(--djt-brand);
  --primary-rgb: 33, 82, 173;
  --secondary-color: var(--djt-muted);
  --secondary-bg: var(--djt-surface-2);
  --tertiary-bg: var(--djt-surface-2);
  --tertiary-color: var(--djt-muted);
  --emphasis-color: var(--djt-text-strong);
  --border-color: var(--djt-border);
  --border-radius: var(--djt-radius-sm);
  --border-radius-lg: var(--djt-radius);
  --focus-ring-color: rgba(33, 82, 173, .35);
  --code-color: var(--djt-ink-strong);
  --highlight-bg: var(--djt-warn-soft);
}

/* dark scheme: follows the OS unless <html data-theme="light"> pins it; data-theme="dark" forces it */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --djt-brand-hover: #2f63c4;
    --djt-ink: #8fb2f2;
    --djt-ink-strong: #b5cbf8;
    --djt-ink-soft: #1b2a47;
    --djt-ink-deep: #0a1327;
    --djt-logo: #9dbbf5;
    --djt-text: #e3e8f1;
    --djt-text-strong: #f6f8fc;
    --djt-muted: #a3adbf;
    --djt-bg: #0f1319;
    --djt-bg-alt: #141a23;
    --djt-surface: #171c25;
    --djt-surface-2: #1d2430;
    --djt-surface-3: #242c3b;
    --djt-border: #2a3344;
    --djt-border-strong: #3c4860;
    --djt-ok: #7fd6a8;
    --djt-ok-soft: #12302a;
    --djt-warn: #f2cf7e;
    --djt-warn-soft: #3a2c0d;
    --djt-danger: #f28b85;
    --djt-focus-on-brand: #cfe0ff;
    --djt-badge-bg: #1b2a47;
    --djt-badge-fg: #bfd3f7;
    --djt-badge-education-bg: #1b2a47;
    --djt-badge-education-fg: #bfd3f7;
    --djt-badge-business-bg: #12302a;
    --djt-badge-business-fg: #9fe0c0;
    --djt-badge-review-bg: #2a1f4a;
    --djt-badge-review-fg: #d2c2f7;
    --djt-badge-intro-bg: #3a2510;
    --djt-badge-intro-fg: #f7cf9a;
    --djt-badge-promo-bg: #232a36;
    --djt-badge-promo-fg: #c6cfdc;
    --djt-badge-soon-bg: #3a2c0d;
    --djt-badge-soon-fg: #f2cf7e;
    --djt-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3);
    --djt-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .45);
    --djt-shadow-lg: 0 2px 4px rgba(0, 0, 0, .4), 0 18px 48px rgba(0, 0, 0, .55);
    --djt-select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a3adbf' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3 6 5 5 5-5'/%3e%3c/svg%3e");
    --body-bg-rgb: 15, 19, 25;
    --body-color-rgb: 227, 232, 241;
    --link-color-rgb: 143, 178, 242;
    --link-hover-color-rgb: 181, 203, 248;
    --focus-ring-color: rgba(143, 178, 242, .4);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --djt-brand-hover: #2f63c4;
  --djt-ink: #8fb2f2;
  --djt-ink-strong: #b5cbf8;
  --djt-ink-soft: #1b2a47;
  --djt-ink-deep: #0a1327;
  --djt-logo: #9dbbf5;
  --djt-text: #e3e8f1;
  --djt-text-strong: #f6f8fc;
  --djt-muted: #a3adbf;
  --djt-bg: #0f1319;
  --djt-bg-alt: #141a23;
  --djt-surface: #171c25;
  --djt-surface-2: #1d2430;
  --djt-surface-3: #242c3b;
  --djt-border: #2a3344;
  --djt-border-strong: #3c4860;
  --djt-ok: #7fd6a8;
  --djt-ok-soft: #12302a;
  --djt-warn: #f2cf7e;
  --djt-warn-soft: #3a2c0d;
  --djt-danger: #f28b85;
  --djt-focus-on-brand: #cfe0ff;
  --djt-badge-bg: #1b2a47;
  --djt-badge-fg: #bfd3f7;
  --djt-badge-education-bg: #1b2a47;
  --djt-badge-education-fg: #bfd3f7;
  --djt-badge-business-bg: #12302a;
  --djt-badge-business-fg: #9fe0c0;
  --djt-badge-review-bg: #2a1f4a;
  --djt-badge-review-fg: #d2c2f7;
  --djt-badge-intro-bg: #3a2510;
  --djt-badge-intro-fg: #f7cf9a;
  --djt-badge-promo-bg: #232a36;
  --djt-badge-promo-fg: #c6cfdc;
  --djt-badge-soon-bg: #3a2c0d;
  --djt-badge-soon-fg: #f2cf7e;
  --djt-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3);
  --djt-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .45);
  --djt-shadow-lg: 0 2px 4px rgba(0, 0, 0, .4), 0 18px 48px rgba(0, 0, 0, .55);
  --djt-select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a3adbf' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3 6 5 5 5-5'/%3e%3c/svg%3e");
  --body-bg-rgb: 15, 19, 25;
  --body-color-rgb: 227, 232, 241;
  --link-color-rgb: 143, 178, 242;
  --link-hover-color-rgb: 181, 203, 248;
  --focus-ring-color: rgba(143, 178, 242, .4);
}

/* =============================================================================
   2. Base
   ========================================================================== */

html {
  scroll-padding-top: calc(var(--djt-header-h) + 1rem);
}

body.djt {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  font-family: var(--djt-font-sans);
  font-size: var(--djt-fs-md);
  line-height: var(--djt-lh-body);
  color: var(--djt-text);
  background-color: var(--djt-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.djt .site-grid {
  flex: 1 0 auto;
  width: 100%;
}

/* zero class specificity (:where) so that a single-class component rule, e.g. .djt-card__title, can set its own size and weight */
:where(.djt) h1, :where(.djt) h2, :where(.djt) h3, :where(.djt) h4, :where(.djt) h5, :where(.djt) h6,
.djt .h1, .djt .h2, .djt .h3, .djt .h4 {
  font-family: var(--djt-font-sans);
  font-weight: 700;
  line-height: var(--djt-lh-tight);
  letter-spacing: -.012em;
  color: var(--djt-text-strong);
  margin: 0 0 var(--djt-sp-3);
  text-wrap: balance;
}

:where(.djt) h1, .djt .h1 { font-size: var(--djt-fs-3xl); }
:where(.djt) h2, .djt .h2 { font-size: var(--djt-fs-2xl); }
:where(.djt) h3, .djt .h3 { font-size: var(--djt-fs-xl); line-height: var(--djt-lh-snug); }
:where(.djt) h4, .djt .h4 { font-size: var(--djt-fs-lg); line-height: var(--djt-lh-snug); }
:where(.djt) h5, :where(.djt) h6 { font-size: var(--djt-fs-md); line-height: var(--djt-lh-snug); }

.djt p {
  margin: 0 0 1em;
}

/* :where() keeps these at zero class specificity, so any single-class component rule wins */
:where(.djt) a {
  color: var(--djt-ink);
  text-decoration-thickness: .08em;
  text-underline-offset: .16em;
  transition: color var(--djt-dur) var(--djt-ease);
}

:where(.djt) a:hover {
  color: var(--djt-ink-strong);
}

.djt ::selection {
  background: var(--djt-ink-soft);
  color: var(--djt-text-strong);
}

.djt img,
.djt video {
  max-width: 100%;
  height: auto;
}

.djt svg {
  max-width: 100%;
}

.djt hr {
  border: 0;
  border-top: 1px solid var(--djt-border);
  opacity: 1;
  margin: var(--djt-sp-6) 0;
}

.djt code,
.djt kbd,
.djt pre {
  font-family: var(--djt-font-mono);
  font-size: .92em;
}

/* visible focus everywhere, same ring, offset so it reads on any background */
.djt :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--djt-focus);
  outline-offset: 2px;
  box-shadow: none;
}

.djt-skip:focus {
  position: fixed;
  inset-block-start: .75rem;
  inset-inline-start: .75rem;
  z-index: 2000;
  padding: .75rem 1.125rem;
  border-radius: var(--djt-radius-sm);
  background: var(--djt-brand);
  color: var(--djt-on-ink);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--djt-shadow);
  outline-color: var(--djt-focus-on-brand);
}

@media (prefers-reduced-motion: reduce) {
  .djt *,
  .djt *::before,
  .djt *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================================================
   3. Header and brand
   ========================================================================== */

.djt-header {
  position: relative;
  z-index: 1030;
  background: var(--djt-surface);
  background-image: none;
  border-bottom: 1px solid var(--djt-border);
  box-shadow: none;
  color: var(--djt-text);
}

@media (min-width: 62em) {
  .djt-header--sticky {
    position: sticky;
    top: 0;
  }
}

.djt-header .grid-child {
  padding: 0 var(--djt-gutter);
}

.djt-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--djt-sp-4);
  min-height: 3.5rem;
}

@media (min-width: 62em) {
  .djt-header__bar {
    min-height: var(--djt-header-h);
  }
}

.djt-brand {
  display: flex;
  align-items: center;
  gap: var(--djt-sp-3);
  margin: 0;
  padding: 0;
  font-size: inherit;
  color: var(--djt-logo);
}

.djt-header .djt-brand__link {
  display: inline-flex;
  align-items: center;
  color: var(--djt-logo);
  text-decoration: none;
  border-radius: var(--djt-radius-sm);
}

.djt-header .djt-brand__link:hover,
.djt-header .djt-brand__link:focus {
  color: var(--djt-ink-strong);
}

.djt-logo {
  display: block;
  flex: 0 0 auto;
  height: 1.875rem;
  width: calc(1.875rem * 600 / 163);
  aspect-ratio: 600 / 163;
}

@media (min-width: 62em) {
  .djt-brand .djt-brand__logo {
    height: 2.25rem;
    width: calc(2.25rem * 600 / 163);
  }
}

.djt-brand__image {
  display: block;
  max-height: 2.5rem;
  width: auto;
}

.djt-brand__title {
  font-size: var(--djt-fs-xl);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--djt-text-strong);
}

.djt-brand__tagline {
  display: none;
  color: var(--djt-muted);
  font-size: var(--djt-fs-sm);
  white-space: normal;
}

@media (min-width: 75em) {
  .djt-brand__tagline {
    display: inline;
    padding-inline-start: var(--djt-sp-3);
    border-inline-start: 1px solid var(--djt-border);
  }
}

.djt-topbar,
.djt-below-top {
  color: var(--djt-text);
  font-size: var(--djt-fs-sm);
  background: var(--djt-bg-alt);
}

.djt-topbar .grid-child,
.djt-below-top .grid-child {
  padding: var(--djt-sp-2) var(--djt-gutter);
}

/* --- mobile toggle ------------------------------------------------------ */

.djt-nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--djt-sp-2);
  min-height: 2.75rem;
  padding: .5rem .75rem;
  border: 1px solid var(--djt-border-strong);
  border-radius: var(--djt-radius-sm);
  background: var(--djt-surface);
  color: var(--djt-text-strong);
  font: 600 var(--djt-fs-sm) / 1 var(--djt-font-sans);
  cursor: pointer;
}

.djt-nav-toggle:hover {
  border-color: var(--djt-ink);
  color: var(--djt-ink);
}

.djt-nav-toggle__icon {
  display: inline-grid;
  gap: 4px;
  width: 1.125rem;
}

.djt-nav-toggle__icon span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--djt-dur) var(--djt-ease), opacity var(--djt-dur) var(--djt-ease);
}

.djt-nav-toggle[aria-expanded="true"] .djt-nav-toggle__icon span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.djt-nav-toggle[aria-expanded="true"] .djt-nav-toggle__icon span:nth-child(2) {
  opacity: 0;
}

.djt-nav-toggle[aria-expanded="true"] .djt-nav-toggle__icon span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.no-js .djt-nav-toggle {
  display: none;
}

/* --- navigation container ------------------------------------------------ */

.djt-nav__menu {
  margin: 0;
  padding: 0;
}

.djt-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.djt-nav__item {
  position: relative;
}

.djt-nav__link {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--djt-text-strong);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--djt-radius-sm);
  transition: color var(--djt-dur) var(--djt-ease), background-color var(--djt-dur) var(--djt-ease);
}

.djt-nav__link:hover {
  color: var(--djt-ink);
}

.djt-nav__link--static {
  cursor: default;
}

.djt-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--djt-radius-sm);
  background: transparent;
  color: var(--djt-muted);
  cursor: pointer;
  transition: color var(--djt-dur) var(--djt-ease), background-color var(--djt-dur) var(--djt-ease);
}

.djt-nav__toggle:hover {
  color: var(--djt-ink);
  background: var(--djt-ink-soft);
}

.djt-nav__chevron {
  transition: transform var(--djt-dur) var(--djt-ease);
}

.djt-nav__item.is-open > .djt-nav__toggle .djt-nav__chevron,
.djt-nav__toggle[aria-expanded="true"] .djt-nav__chevron {
  transform: rotate(180deg);
}

.no-js .djt-nav__toggle {
  display: none;
}

/* submenu panels: hidden until opened (JS), hover/focus (no JS, wide) or always (no JS, narrow) */
.js .djt-nav__item--parent > .djt-sub,
.js .djt-nav__item--parent > .djt-mega {
  display: none;
}

.js .djt-nav__item--parent.is-open > .djt-sub,
.js .djt-nav__item--parent.is-open > .djt-mega {
  display: block;
}

/* --- narrow screens: drawer under the header ----------------------------- */

@media (max-width: 61.99em) {
  .djt-nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    z-index: 1040;
    max-height: calc(100vh - 3.5rem);
    max-height: calc(100dvh - 3.5rem);
    overflow-y: auto;
    background: var(--djt-surface);
    border-top: 1px solid var(--djt-border);
    border-bottom: 1px solid var(--djt-border);
    box-shadow: var(--djt-shadow-lg);
  }

  .js .djt-nav {
    display: none;
  }

  .js .djt-nav.is-open,
  .no-js .djt-nav {
    display: block;
  }

  .no-js .djt-nav {
    position: static;
    box-shadow: none;
  }

  .djt-nav__list {
    padding: var(--djt-sp-2) var(--djt-gutter) var(--djt-sp-4);
  }

  .djt-nav__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    border-bottom: 1px solid var(--djt-border);
  }

  .djt-nav__item:last-child {
    border-bottom: 0;
  }

  .djt-nav__link {
    min-height: 3rem;
    padding: .5rem .25rem;
    font-size: var(--djt-fs-lg);
  }

  .djt-nav__item.active > .djt-nav__link {
    color: var(--djt-ink);
    box-shadow: inset 3px 0 0 var(--djt-ink);
    padding-inline-start: .75rem;
  }

  .djt-nav__item > .djt-sub,
  .djt-nav__item > .djt-mega {
    grid-column: 1 / -1;
    padding-bottom: var(--djt-sp-3);
  }

  .no-js .djt-nav__item > .djt-sub,
  .no-js .djt-nav__item > .djt-mega {
    display: block;
  }

  .djt-mega__inner {
    display: grid;
    gap: var(--djt-sp-2);
  }

  .djt-mega__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--djt-sp-3);
    padding: .25rem .25rem .5rem;
  }

  .djt-mega__title {
    margin: 0;
    color: var(--djt-muted);
    font-size: var(--djt-fs-sm);
  }

  .djt-mega__all {
    font-size: var(--djt-fs-sm);
    font-weight: 600;
    white-space: nowrap;
  }

  .djt-mega__stages {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .125rem;
  }

  .djt-mega__stage {
    display: grid;
    grid-template-columns: 4.25rem minmax(0, 1fr);
    align-items: baseline;
    column-gap: var(--djt-sp-2);
    min-height: 2.75rem;
    padding: .5rem .5rem;
    border-radius: var(--djt-radius-sm);
    color: var(--djt-text);
    text-decoration: none;
  }

  .djt-mega__stage:hover {
    background: var(--djt-ink-soft);
    color: var(--djt-text-strong);
  }

  .djt-mega__num {
    font-size: var(--djt-fs-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--djt-ink);
    font-variant-numeric: tabular-nums;
  }

  .djt-mega__name {
    font-weight: 600;
  }

  .djt-mega__desc,
  .djt-mega__aside {
    display: none;
  }

  .djt-sub {
    list-style: none;
    margin: 0;
    padding: 0 0 0 var(--djt-sp-3);
    display: grid;
    gap: .125rem;
  }

  .djt-sub__link {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: .5rem;
    border-radius: var(--djt-radius-sm);
    color: var(--djt-text);
    text-decoration: none;
  }

  .djt-sub__link:hover {
    background: var(--djt-ink-soft);
  }

  .djt-sub__item.active > .djt-sub__link {
    color: var(--djt-ink);
    font-weight: 600;
  }

  .djt-sub__heading {
    display: block;
    padding: .5rem;
    font-size: var(--djt-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--djt-muted);
  }

  .djt-nav__search {
    padding: var(--djt-sp-3) var(--djt-gutter) var(--djt-sp-4);
    border-top: 1px solid var(--djt-border);
  }
}

/* --- wide screens: horizontal bar with disclosure panels ----------------- */

@media (min-width: 62em) {
  .djt-nav-toggle {
    display: none;
  }

  .djt-nav,
  .js .djt-nav {
    display: flex;
    align-items: center;
    gap: var(--djt-sp-4);
    position: static;
  }

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

  .djt-nav__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .125rem;
  }

  .djt-nav__item {
    display: flex;
    align-items: center;
  }

  .djt-nav__item--drop {
    position: relative;
  }

  .djt-nav__item--mega {
    position: static;
  }

  .djt-nav__link {
    position: relative;
    padding: .5rem .75rem;
    font-size: var(--djt-fs-md);
  }

  .djt-nav__item--parent > .djt-nav__link {
    padding-inline-end: .375rem;
  }

  .djt-nav__link:hover {
    background: var(--djt-ink-soft);
  }

  /* current section: short bar under the label */
  .djt-nav__item.active > .djt-nav__link::after {
    content: "";
    position: absolute;
    inset-inline: .75rem;
    bottom: .25rem;
    height: 2px;
    border-radius: 2px;
    background: var(--djt-ink);
  }

  .djt-nav__item--parent.active > .djt-nav__link::after {
    inset-inline-end: .375rem;
  }

  .djt-nav__toggle {
    width: 2.25rem;
    height: 2.25rem;
    margin-inline-start: -.125rem;
  }

  /* plain dropdown */
  .djt-sub {
    position: absolute;
    top: calc(100% + .25rem);
    inset-inline-start: 0;
    z-index: 1050;
    min-width: 15rem;
    list-style: none;
    margin: 0;
    padding: var(--djt-sp-2);
    background: var(--djt-surface);
    border: 1px solid var(--djt-border);
    border-radius: var(--djt-radius);
    box-shadow: var(--djt-shadow-lg);
  }

  .djt-sub__link {
    display: flex;
    align-items: center;
    min-height: 2.5rem;
    padding: .5rem .75rem;
    border-radius: var(--djt-radius-sm);
    color: var(--djt-text);
    text-decoration: none;
  }

  .djt-sub__link:hover {
    background: var(--djt-ink-soft);
    color: var(--djt-text-strong);
  }

  .djt-sub__item.active > .djt-sub__link {
    color: var(--djt-ink);
    font-weight: 600;
  }

  .djt-sub__heading {
    display: block;
    padding: .5rem .75rem .25rem;
    font-size: var(--djt-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--djt-muted);
  }

  /* the Learn mega panel: full header width, content aligned with the page container */
  .djt-mega {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    z-index: 1050;
    background: var(--djt-surface);
    border-top: 1px solid var(--djt-border);
    border-bottom: 1px solid var(--djt-border);
    box-shadow: var(--djt-shadow-lg);
  }

  .djt-mega__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 17rem;
    grid-template-areas:
      "head head"
      "stages aside";
    gap: var(--djt-sp-3) var(--djt-sp-6);
    max-width: var(--djt-container);
    margin: 0 auto;
    padding: var(--djt-sp-5) var(--djt-gutter) var(--djt-sp-6);
  }

  .djt-mega__head {
    grid-area: head;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--djt-sp-4);
    padding: 0 .75rem;
  }

  .djt-mega__title {
    margin: 0;
    font-size: var(--djt-fs-lg);
    font-weight: 700;
    color: var(--djt-text-strong);
    letter-spacing: -.01em;
  }

  .djt-mega__all {
    font-weight: 600;
    white-space: nowrap;
  }

  .djt-mega__stages {
    grid-area: stages;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .25rem .5rem;
  }

  /* Each stage carries a still from its own most-watched lesson, and an accent that
     walks from brand blue at stage 0 towards teal at stage 8, so the colour itself
     reads as progress through the curriculum. --_i is the stage number, set inline. */
  .djt-mega__item {
    --_accent: hsl(calc(224 - (var(--_i, 0) * 7)) 70% 42%);
    --_accent-soft: hsl(calc(224 - (var(--_i, 0) * 7)) 70% 96%);
  }

  .djt-mega__stage {
    position: relative;
    display: grid;
    grid-template-columns: 5.25rem minmax(0, 1fr);
    align-items: start;
    gap: .25rem .75rem;
    height: 100%;
    padding: .5rem .625rem;
    border-radius: var(--djt-radius);
    color: var(--djt-text);
    text-decoration: none;
    transition:
      background-color var(--djt-dur) var(--djt-ease),
      transform var(--djt-dur) var(--djt-ease),
      box-shadow var(--djt-dur) var(--djt-ease);
  }

  .djt-mega__stage::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    border-radius: 3px;
    background: var(--_accent);
    opacity: 0;
    transform: scaleY(.4);
    transition: opacity var(--djt-dur) var(--djt-ease), transform var(--djt-dur) var(--djt-ease);
  }

  .djt-mega__stage:hover,
  .djt-mega__stage:focus-visible {
    background: var(--_accent-soft);
    color: var(--djt-text-strong);
    transform: translateY(-1px);
  }

  .djt-mega__stage:hover::before,
  .djt-mega__stage:focus-visible::before {
    opacity: 1;
    transform: scaleY(1);
  }

  /* ---- thumbnail + number badge ---- */

  .djt-mega__thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: calc(var(--djt-radius) - .2rem);
    overflow: hidden;
    background: linear-gradient(135deg, var(--_accent) 0%, var(--djt-ink-deep) 100%);
    box-shadow: 0 1px 2px rgba(13, 32, 69, .18);
  }

  .djt-mega__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s var(--djt-ease), filter var(--djt-dur) var(--djt-ease);
  }

  .djt-mega__stage:hover .djt-mega__thumb img,
  .djt-mega__stage:focus-visible .djt-mega__thumb img {
    transform: scale(1.08);
    filter: saturate(1.1);
  }

  .djt-mega__badge {
    position: absolute;
    left: .25rem;
    bottom: .25rem;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 .25rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--_accent);
    color: #fff;
    font-size: .6875rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  }

  .djt-mega__body {
    display: grid;
    gap: .125rem;
    min-width: 0;
  }

  .djt-mega__num {
    font-size: var(--djt-fs-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--_accent);
    font-variant-numeric: tabular-nums;
  }

  .djt-mega__name {
    font-weight: 700;
    line-height: var(--djt-lh-snug);
  }

  .djt-mega__desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: var(--djt-fs-sm);
    line-height: 1.45;
    color: var(--djt-muted);
  }

  /* ---- the panel's own entrance, staggered down the stage order ---- */

  @keyframes djt-mega-item-in {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: none; }
  }

  .djt-nav__item--parent.is-open > .djt-mega .djt-mega__item,
  .no-js .djt-nav__item--parent:hover > .djt-mega .djt-mega__item {
    animation: djt-mega-item-in .34s var(--djt-ease) backwards;
    animation-delay: calc(var(--_i, 0) * 24ms);
  }

  .djt-nav__item--parent.is-open > .djt-mega .djt-mega__aside {
    animation: djt-mega-item-in .34s var(--djt-ease) backwards;
    animation-delay: 230ms;
  }

  .djt-mega__aside {
    grid-area: aside;
    align-self: start;
    padding: var(--djt-sp-4) var(--djt-sp-4) var(--djt-sp-5);
    border-radius: var(--djt-radius);
    background: var(--djt-ink-soft);
  }

  .djt-mega__aside-title {
    margin: 0 0 .25rem;
    font-weight: 700;
    color: var(--djt-text-strong);
  }

  .djt-mega__aside-text {
    margin: 0 0 var(--djt-sp-4);
    font-size: var(--djt-fs-sm);
    color: var(--djt-muted);
  }

  /* without JS: open on hover or when something inside has focus */
  .no-js .djt-nav__item--parent:hover > .djt-sub,
  .no-js .djt-nav__item--parent:hover > .djt-mega,
  .no-js .djt-nav__item--parent:focus-within > .djt-sub,
  .no-js .djt-nav__item--parent:focus-within > .djt-mega {
    display: block;
  }

  .djt-nav__search {
    flex: 0 0 auto;
    margin: 0;
  }
}

@media (min-width: 62em) and (max-width: 74.99em) {
  .djt-mega__inner {
    grid-template-columns: minmax(0, 1fr) 15rem;
  }
}

/* =============================================================================
   4. Buttons (template + Bootstrap bridge)
   ========================================================================== */

.djt-btn,
.djt .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: .625rem 1.125rem;
  border: 1px solid transparent;
  border-radius: var(--djt-radius-sm);
  background: var(--djt-surface);
  color: var(--djt-text-strong);
  font: 600 var(--djt-fs-md) / 1.2 var(--djt-font-sans);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--djt-dur) var(--djt-ease), border-color var(--djt-dur) var(--djt-ease), color var(--djt-dur) var(--djt-ease);
}

.djt-btn--primary,
.djt .btn-primary {
  --btn-focus-shadow-rgb: 33, 82, 173;
  background: var(--djt-brand);
  border-color: var(--djt-brand);
  color: var(--djt-on-ink);
}

.djt-btn--primary:hover,
.djt-btn--primary:focus-visible,
.djt .btn-primary:hover,
.djt .btn-primary:focus,
.djt .btn-primary:active {
  background: var(--djt-brand-hover);
  border-color: var(--djt-brand-hover);
  color: var(--djt-on-ink);
}

.djt-btn--primary:focus-visible,
.djt .btn-primary:focus-visible {
  outline-color: var(--djt-focus-on-brand);
}

.djt-btn--secondary,
.djt .btn-secondary,
.djt .btn-outline-secondary {
  background: var(--djt-surface);
  border-color: var(--djt-border-strong);
  color: var(--djt-text-strong);
}

.djt-btn--secondary:hover,
.djt-btn--secondary:focus-visible,
.djt .btn-secondary:hover,
.djt .btn-secondary:focus,
.djt .btn-outline-secondary:hover {
  background: var(--djt-ink-soft);
  border-color: var(--djt-ink);
  color: var(--djt-ink-strong);
}

.djt-btn--ghost {
  background: transparent;
  color: var(--djt-ink);
}

.djt-btn--ghost:hover {
  background: var(--djt-ink-soft);
  color: var(--djt-ink-strong);
}

.djt-btn--sm,
.djt .btn-sm {
  min-height: 2.25rem;
  padding: .375rem .875rem;
  font-size: var(--djt-fs-sm);
}

.djt-btn--lg {
  min-height: 3.25rem;
  padding: .875rem 1.5rem;
  font-size: var(--djt-fs-lg);
}

/* =============================================================================
   5. Forms (Bootstrap bridge)
   ========================================================================== */

.djt .form-control,
.djt .form-select {
  min-height: 2.75rem;
  padding: .5rem .875rem;
  background-color: var(--djt-surface);
  color: var(--djt-text);
  border: 1px solid var(--djt-border-strong);
  border-radius: var(--djt-radius-sm);
  font-size: var(--djt-fs-md);
  line-height: 1.4;
  box-shadow: none;
}

.djt .form-select {
  padding-inline-end: 2.5rem;
  background-image: var(--djt-select-arrow);
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 1rem 1rem;
}

.djt .form-control::placeholder {
  color: var(--djt-muted);
  opacity: 1;
}

.djt .form-control:focus,
.djt .form-select:focus {
  border-color: var(--djt-ink);
  box-shadow: none;
  background-color: var(--djt-surface);
  color: var(--djt-text);
}

.djt .form-control:focus-visible,
.djt .form-select:focus-visible {
  outline-offset: 0;
}

.djt .input-group-text {
  background: var(--djt-surface-2);
  border-color: var(--djt-border-strong);
  color: var(--djt-muted);
}

.djt label,
.djt .form-label {
  font-weight: 600;
  color: var(--djt-text-strong);
}

/* =============================================================================
   6. Core modules, breadcrumbs, pagination, article pages
   ========================================================================== */

.djt .card {
  --card-bg: var(--djt-surface);
  --card-border-color: var(--djt-border);
  --card-border-radius: var(--djt-radius);
  --card-cap-bg: transparent;
  --card-cap-padding-y: .875rem;
  --card-cap-padding-x: 1.125rem;
  --card-spacer-x: 1.125rem;
  --card-spacer-y: 1rem;
  color: var(--djt-text);
}

.djt .card-header {
  font-size: var(--djt-fs-md);
  font-weight: 700;
  color: var(--djt-text-strong);
  border-bottom: 1px solid var(--djt-border);
}

.djt .container-component > * + * {
  margin-top: var(--djt-sp-4);
}

.djt .container-component {
  padding-bottom: var(--djt-sp-7);
}

.djt .mod-breadcrumbs__wrapper {
  margin-top: var(--djt-sp-4);
}

.djt .mod-breadcrumbs {
  --breadcrumb-divider-color: var(--djt-border-strong);
  --breadcrumb-item-active-color: var(--djt-muted);
  --breadcrumb-item-padding-x: .5rem;
  background: transparent;
  margin: 0;
  padding: 0;
  font-size: var(--djt-fs-sm);
  color: var(--djt-muted);
}

.djt .mod-breadcrumbs__here {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.djt .mod-breadcrumbs a {
  color: var(--djt-muted);
  text-decoration: none;
}

.djt .mod-breadcrumbs a:hover {
  color: var(--djt-ink);
  text-decoration: underline;
}

.djt .mod-breadcrumbs .breadcrumb-item.active {
  color: var(--djt-text);
}

.djt .breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  color: var(--djt-border-strong);
}

.djt .pagination {
  --pagination-color: var(--djt-ink);
  --pagination-bg: var(--djt-surface);
  --pagination-border-color: var(--djt-border);
  --pagination-hover-color: var(--djt-ink-strong);
  --pagination-hover-bg: var(--djt-ink-soft);
  --pagination-hover-border-color: var(--djt-border-strong);
  --pagination-focus-color: var(--djt-ink-strong);
  --pagination-focus-bg: var(--djt-ink-soft);
  --pagination-focus-box-shadow: none;
  --pagination-active-color: var(--djt-on-ink);
  --pagination-active-bg: var(--djt-brand);
  --pagination-active-border-color: var(--djt-brand);
  --pagination-disabled-color: var(--djt-muted);
  --pagination-disabled-bg: var(--djt-surface-2);
  --pagination-disabled-border-color: var(--djt-border);
  --pagination-border-radius: var(--djt-radius-sm);
  margin: 0;
  flex-wrap: wrap;
  gap: .25rem;
}

.djt .page-link {
  min-width: 2.5rem;
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--djt-radius-sm);
  font-weight: 600;
}

.djt .page-header h1,
.djt .page-header .page-title {
  font-size: var(--djt-fs-3xl);
}

.djt .page-header {
  margin: var(--djt-sp-5) 0 var(--djt-sp-4);
}

.djt .com-content-article,
.djt .com-content-category,
.djt .blog,
.djt .blog-featured {
  max-width: 72ch;
}

.djt .com-content-article h2 {
  margin-top: var(--djt-sp-6);
  font-size: var(--djt-fs-xl);
}

.djt .com-content-article h3 {
  margin-top: var(--djt-sp-5);
  font-size: var(--djt-fs-lg);
}

.djt .article-info,
.djt .article-info-term {
  color: var(--djt-muted);
  font-size: var(--djt-fs-sm);
}

.djt .mod-login__userdata .form-group + .form-group {
  margin-top: var(--djt-sp-3);
}

.djt .sidebar-right,
.djt .sidebar-left {
  font-size: var(--djt-fs-sm);
}

.djt .mod-list li a,
.djt .mod-menu a,
.djt .mod-menu button {
  color: var(--djt-ink);
}

.djt .alert,
.djt joomla-alert {
  --alert-border-color: var(--djt-border);
  border-radius: var(--djt-radius);
}

/* =============================================================================
   6b. Home page bands: shared section headings, rhythm, empty component area
   ========================================================================== */

/* one treatment for every section heading on the page: a short brand rule, then the heading */
.djt .djt-path__heading,
.djt .djt-sections__heading,
.djt .djt-section-mod__title {
  margin: 0 0 .6rem;
  font-size: var(--djt-fs-2xl);
  line-height: var(--djt-lh-tight);
  letter-spacing: -.015em;
  color: var(--djt-text-strong);
}

.djt .djt-path__heading::before,
.djt .djt-sections__heading::before,
.djt .djt-section-mod__title::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: .25rem;
  margin-bottom: .875rem;
  border-radius: var(--djt-radius-pill);
  background: var(--djt-brand);
}

.djt .djt-path__standfirst,
.djt .djt-sections__standfirst {
  font-size: var(--djt-fs-md);
  color: var(--djt-muted);
}

/* the modules own their vertical rhythm; the chrome adds nothing in the top positions */
.djt .top-a.djt-section-mod,
.djt .top-b.djt-section-mod {
  padding: 0;
}

.djt .container-top-a > *,
.djt .container-top-b > *,
.djt .container-bottom-a > *,
.djt .container-bottom-b > * {
  margin: 0;
}

.djt .bottom-a.djt-section-mod,
.djt .bottom-b.djt-section-mod {
  padding: clamp(2.75rem, 5.5vw, 4rem) 0 var(--djt-sp-4);
}

.djt .djt-section-mod__head {
  margin-bottom: var(--djt-sp-5);
}

/* a featured-articles home page with nothing featured leaves an empty main: fold it away */
.djt.view-featured .djt-main:not(:has(.blog-featured > *)),
.djt.view-featured .container-component > #system-message-container:empty {
  display: none;
}

.djt.view-featured .container-component:not(:has(.blog-featured > *)) {
  padding-bottom: 0;
}

.djt.view-featured .container-component:not(:has(.blog-featured > *)) > * {
  margin-top: 0;
}

.djt.view-featured .djt-footer {
  margin-top: var(--djt-sp-7);
}

/* =============================================================================
   6b2. Paid links
   ========================================================================== */

/* A paid, sponsored or commission-earning link has to be recognisable as advertising
 * before it is clicked, and the privacy notice says so in section 9. The hook is
 * rel="sponsored": it is the attribute search engines want on a paid link, and it is one
 * of the three attributes the content filter lets an author keep on an <a>
 * (FormatHelper::SAFE_ATTRIBUTES - class is stripped, so a class could not be the hook
 * even if we wanted it to be). Driving the label off the attribute means it cannot be
 * left off a link that was marked up correctly.
 *
 * rel="sponsored" also covers affiliate links; Google treats the two the same. Add
 * nofollow or noopener alongside it as needed - the selector matches one word in the list. */
.djt a[rel~="sponsored"]::after {
  content: "Ad";
  display: inline-block;
  margin-inline-start: .35em;
  padding: 0 .35em;
  border: 1px solid currentColor;
  border-radius: var(--djt-radius-sm);
  font-size: .7em;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: .08em;
}

/* The label is a separate word, so it must not be dragged under the link's own underline
 * or carried onto the next line on its own. */
.djt a[rel~="sponsored"] {
  text-decoration-skip-ink: auto;
}

/* =============================================================================
   6c. Legal pages (imprint, privacy notice)
   ========================================================================== */

/* The imprint and the privacy notice are reference documents - looked things up in, not
 * read start to finish - so they drop the 72ch measure that suits an article and use the
 * whole column instead: a section index that stays with you on the left, and the sections
 * as cards two abreast on the right. Each card sets its own measure, so filling the width
 * costs nothing in readability. Everything here is driven by the theme tokens, so the
 * dark scheme needs no rules of its own. */
.djt .com-content-article.djt-legal-page {
  max-width: none;
}

/* Same rule as .djt-page-lead in the component sheet: the standfirst on the imprint and
   the privacy policy spans the content width rather than stopping at a reading measure.
   The numbered sections below it keep theirs - those are read, not scanned. */
.djt-legal__lede {
  max-width: none;
  margin: 0 0 var(--djt-sp-6);
  font-size: var(--djt-fs-lg);
  line-height: var(--djt-lh-read);
  color: var(--djt-muted);
}

.djt-legal__index {
  margin: 0 0 var(--djt-sp-6);
  padding: var(--djt-sp-4) var(--djt-sp-5);
  border: 1px solid var(--djt-border);
  border-radius: var(--djt-radius);
  background: var(--djt-surface-2);
}

.djt .com-content-article .djt-legal__index-title {
  margin: 0 0 var(--djt-sp-3);
  font-size: var(--djt-fs-sm);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--djt-muted);
}

.djt-legal__index ul {
  display: grid;
  gap: var(--djt-sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.djt-legal__index a {
  display: block;
  font-size: var(--djt-fs-sm);
  line-height: var(--djt-lh-snug);
  color: var(--djt-ink);
  text-decoration: none;
}

.djt-legal__index a:hover,
.djt-legal__index a:focus-visible {
  color: var(--djt-ink-strong);
  text-decoration: underline;
}

.djt-legal__grid {
  display: grid;
  gap: var(--djt-sp-5);
  align-items: start;
}

.djt-legal__grid + .djt-legal__grid {
  margin-top: var(--djt-sp-5);
}

.djt-legal__block {
  padding: var(--djt-sp-5);
  border: 1px solid var(--djt-border);
  border-radius: var(--djt-radius);
  background: var(--djt-surface);
}

/* an h2 inside a card is a card heading, not a page heading */
.djt .com-content-article .djt-legal__block > h2 {
  margin: 0 0 var(--djt-sp-3);
  font-size: var(--djt-fs-lg);
  line-height: var(--djt-lh-snug);
  color: var(--djt-text-strong);
}

.djt-legal__block p,
.djt-legal__block ul {
  margin: 0 0 var(--djt-sp-4);
}

.djt-legal__block ul {
  padding-left: 1.25em;
}

.djt-legal__block li + li {
  margin-top: var(--djt-sp-2);
}

.djt-legal__block > :last-child {
  margin-bottom: 0;
}

/* the plain-English summary: given the full content width and a tinted panel, because it
 * is the part most readers actually want */
.djt-legal__block--accent {
  border-color: var(--djt-border-strong);
  background: var(--djt-surface-2);
}

/* The short identity blocks sit three abreast and fold down on their own as the width
 * goes, so they need no breakpoint. The doubled class keeps them clear of the
 * two-column rule below, whatever order the two end up in. */
.djt-legal__grid.djt-legal__grid--facts {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* Two columns only once a column is worth reading: below this the cards come out around
 * 38 characters, which is too narrow for prose of this density. */
@media (min-width: 56em) {
  .djt-legal__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .djt-legal {
    display: grid;
    grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr);
    column-gap: var(--djt-sp-7);
    align-items: start;
  }

  .djt-legal__lede {
    grid-column: 1 / -1;
  }

  /* the rail follows you down the document, clear of the sticky header. The selector
   * carries the extra classes because Cassiopeia pins every nav in the component area
   * with .container-component nav { position: relative }. */
  .djt .com-content-article .djt-legal__index {
    position: sticky;
    top: calc(var(--djt-header-h) + var(--djt-sp-4));
    margin: 0;
  }

  .djt-legal__body {
    min-width: 0;
  }
}

/* =============================================================================
   6c2. Ambient background
   ========================================================================== */

/* Three very soft blooms of brand colour, fixed behind the page, drifting slowly and
 * leaning a little towards the pointer. The point is peripheral: you should notice the
 * page is alive without ever catching it moving.
 *
 * The drift is CSS, so it runs with no JavaScript at all. reveal.js adds only the lean,
 * through --djt-amb-x / --djt-amb-y, and leaves them at zero if it does not run.
 *
 * Only `transform` is animated, on three small elements rather than one page-sized one,
 * so the whole thing stays on the compositor. No filter: blur() - a blurred layer this
 * size repaints on every frame, which is exactly the cost this is trying to avoid, and a
 * radial gradient with a soft stop looks the same.
 *
 * Stacking: the layer is fixed at z-index 0, which paints above the body's background
 * colour and below anything positioned above it. The header is already at 1030; the grid
 * and the footer are lifted to 1 here so nothing can fall behind the wash. */

.djt-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* The lean. reveal.js writes these; without it they stay at zero. */
  transform: translate3d(var(--djt-amb-x, 0px), var(--djt-amb-y, 0px), 0);
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.djt .site-grid,
.djt .djt-footer {
  position: relative;
  z-index: 1;
}

.djt-ambient__blob {
  position: absolute;
  display: block;
  width: 62vmax;
  height: 62vmax;
  border-radius: 50%;
  will-change: transform;
}

/* Strength, in one place. Everything below multiplies by it, so the three blooms stay in
 * proportion to one another whatever you choose.
 *
 * 1.6 is not an arbitrary taste setting - it is the ceiling. Muted text sits directly on
 * this background in page leads and intros, and at 1.6 it lands on exactly 4.5:1 over the
 * strongest point of the blue bloom, which is the AA minimum. Going higher means darkening
 * --djt-muted again or accepting text that fails. Drop it freely; raise it with the
 * contrast sums in hand. */
:root {
  --djt-amb-strength: 1.6;
}

.djt-ambient__blob--a {
  top: -16vmax;
  left: -10vmax;
  background: radial-gradient(circle closest-side,
      rgb(33 82 173 / calc(.20 * var(--djt-amb-strength))),
      rgb(33 82 173 / 0) 100%);
  animation: djt-drift-a 44s ease-in-out infinite alternate;
}

.djt-ambient__blob--b {
  top: 6vmax;
  right: -14vmax;
  background: radial-gradient(circle closest-side,
      rgb(74 42 138 / calc(.16 * var(--djt-amb-strength))),
      rgb(74 42 138 / 0) 100%);
  animation: djt-drift-b 59s ease-in-out infinite alternate;
}

.djt-ambient__blob--c {
  bottom: -18vmax;
  left: 14vmax;
  background: radial-gradient(circle closest-side,
      rgb(23 102 64 / calc(.13 * var(--djt-amb-strength))),
      rgb(23 102 64 / 0) 100%);
  animation: djt-drift-c 71s ease-in-out infinite alternate;
}

/* Three different periods, none a multiple of another, so the pattern never repeats
 * in any way a reader could notice. The travel is a good fraction of the bloom's own
 * size - at a few pixels nothing reads as movement, it just looks like a still image. */
@keyframes djt-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(14vmax, 9vmax, 0) scale(1.18); }
}

@keyframes djt-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.12); }
  to   { transform: translate3d(-12vmax, 14vmax, 0) scale(1); }
}

@keyframes djt-drift-c {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(16vmax, -11vmax, 0) scale(1.15); }
}

/* Dark scheme: more again. A wash this faint disappears completely on a near-black page,
 * and the colours have to be lighter than the background rather than darker. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* 1.7 is the dark ceiling for the same reason: muted text reaches 4.86:1 over the
       blue bloom here, and 2.0 would drop it to 4.3:1. */
    --djt-amb-strength: 1.7;
  }

  :root:not([data-theme="light"]) .djt-ambient__blob--a {
    background: radial-gradient(circle closest-side,
        rgb(96 141 229 / calc(.20 * var(--djt-amb-strength))),
        rgb(96 141 229 / 0) 100%);
  }

  :root:not([data-theme="light"]) .djt-ambient__blob--b {
    background: radial-gradient(circle closest-side,
        rgb(138 96 214 / calc(.16 * var(--djt-amb-strength))),
        rgb(138 96 214 / 0) 100%);
  }

  :root:not([data-theme="light"]) .djt-ambient__blob--c {
    background: radial-gradient(circle closest-side,
        rgb(52 160 110 / calc(.13 * var(--djt-amb-strength))),
        rgb(52 160 110 / 0) 100%);
  }
}

:root[data-theme="dark"] {
  --djt-amb-strength: 1.7;
}

:root[data-theme="dark"] .djt-ambient__blob--a {
  background: radial-gradient(circle closest-side,
      rgb(96 141 229 / calc(.20 * var(--djt-amb-strength))),
      rgb(96 141 229 / 0) 100%);
}

:root[data-theme="dark"] .djt-ambient__blob--b {
  background: radial-gradient(circle closest-side,
      rgb(138 96 214 / calc(.16 * var(--djt-amb-strength))),
      rgb(138 96 214 / 0) 100%);
}

:root[data-theme="dark"] .djt-ambient__blob--c {
  background: radial-gradient(circle closest-side,
      rgb(52 160 110 / calc(.13 * var(--djt-amb-strength))),
      rgb(52 160 110 / 0) 100%);
}

/* Print, and anyone who would rather the page held still. */
@media print {
  .djt-ambient { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .djt-ambient {
    transition: none;
    transform: none;
  }

  .djt-ambient__blob {
    animation: none;
    will-change: auto;
  }
}

/* =============================================================================
   6d. Reveal on scroll
   ========================================================================== */

/* The page is static until reveal.js says otherwise: it adds `djt-reveal-ready` to
 * <html>, and only then does anything hide. Without the script, or with it broken, every
 * rule below is inert and the page simply renders.
 *
 * These animate `translate` and `opacity`, never `transform`. Cards, path steps and
 * section links all lift by -2px on hover with `transform`, and an animation holding a
 * `transform` value under `animation-fill-mode: both` would sit on top of that and kill
 * the hover for good. `translate` is its own property and composes with it instead. */

@keyframes djt-rise {
  from { opacity: 0; translate: 0 1.1rem; }
  to   { opacity: 1; translate: 0 0; }
}

/* The thread between the steps of the learning path, drawn rather than just appearing. */
@keyframes djt-draw-down {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@keyframes djt-draw-across {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* The numbered node on a path step: a small overshoot, so it lands rather than fades. */
@keyframes djt-pop {
  from   { opacity: 0; scale: .4; }
  60%    { opacity: 1; scale: 1.08; }
  to     { opacity: 1; scale: 1; }
}

.djt-reveal-ready .djt-reveal,
.djt-reveal-ready .djt-path__step,
.djt-reveal-ready .djt-sections__item,
.djt-reveal-ready .djt-card,
.djt-reveal-ready .djt-lesson,
.djt-reveal-ready .djt-legal__block {
  opacity: 0;
}

.djt-reveal-ready .djt-reveal.is-revealed,
.djt-reveal-ready .djt-path__step.is-revealed,
.djt-reveal-ready .djt-sections__item.is-revealed,
.djt-reveal-ready .djt-card.is-revealed,
.djt-reveal-ready .djt-lesson.is-revealed,
.djt-reveal-ready .djt-legal__block.is-revealed {
  animation: djt-rise .5s cubic-bezier(.2, .7, .2, 1) both;
  /* Neighbours follow one another in reading order; reveal.js sets the step. */
  animation-delay: calc(var(--djt-reveal-step, 0) * 70ms);
}

/* A lesson row is a short, dense line in a long list: less travel, quicker, so a course
 * page does not feel like it is dealing cards at you. */
.djt-reveal-ready .djt-lesson.is-revealed {
  animation-duration: .38s;
  animation-delay: calc(var(--djt-reveal-step, 0) * 45ms);
}

/* ------------------------------------------------- the learning path, in detail -- */

/* The node pops after its card has begun to arrive, and the thread draws after the node,
 * so each step reads as: card, number, line to the next one. */
.djt-reveal-ready .djt-path__step .djt-path__marker {
  opacity: 0;
}

.djt-reveal-ready .djt-path__step.is-revealed .djt-path__marker {
  animation: djt-pop .45s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: calc(var(--djt-reveal-step, 0) * 70ms + 120ms);
}

.djt-reveal-ready .djt-path__step::before {
  transform: scaleY(0);
  transform-origin: top center;
}

.djt-reveal-ready .djt-path__step.is-revealed::before {
  animation: djt-draw-down .4s ease-out both;
  animation-delay: calc(var(--djt-reveal-step, 0) * 70ms + 280ms);
}

/* From two columns up the thread runs sideways, so it draws sideways too. */
@media (min-width: 48rem) {
  .djt-reveal-ready .djt-path__step::before {
    transform: scaleX(0);
    transform-origin: left center;
  }

  .djt-reveal-ready .djt-path__step.is-revealed::before {
    animation-name: djt-draw-across;
  }
}

/* ------------------------------------------------------------------ the figures -- */

/* Counting numbers are tabular so the band does not jiggle as the digits change. */
.djt-parallax__value[data-count-to] {
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------------- */

/* Everything above is decoration. Off it goes. */
@media (prefers-reduced-motion: reduce) {
  .djt-reveal-ready .djt-reveal,
  .djt-reveal-ready .djt-path__step,
  .djt-reveal-ready .djt-sections__item,
  .djt-reveal-ready .djt-card,
  .djt-reveal-ready .djt-lesson,
  .djt-reveal-ready .djt-legal__block,
  .djt-reveal-ready .djt-path__step .djt-path__marker {
    opacity: 1;
    animation: none;
    translate: none;
  }

  .djt-reveal-ready .djt-path__step::before {
    transform: none;
    animation: none;
  }
}

/* =============================================================================
   7. Footer
   ========================================================================== */

.djt-footer {
  margin-top: var(--djt-sp-8);
  background: var(--djt-ink-deep);
  background-image: none;
  color: #c9d4e8;
  font-size: var(--djt-fs-sm);
}

.djt-footer__inner {
  display: grid;
  gap: var(--djt-sp-5) var(--djt-sp-6);
  align-items: start;
  padding: var(--djt-sp-7) var(--djt-gutter) var(--djt-sp-6);
}

@media (min-width: 48em) {
  .djt-footer__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.2fr);
  }
}

.djt-footer__brand {
  display: grid;
  gap: var(--djt-sp-3);
  max-width: 28rem;
}

.djt-footer__logo {
  display: inline-flex;
  width: max-content;
  color: #fff;
  text-decoration: none;
  border-radius: var(--djt-radius-sm);
}

.djt-footer .djt-footer__mark {
  height: 1.875rem;
  width: calc(1.875rem * 600 / 163);
}

.djt-footer__note,
.djt-footer__privacy,
.djt-footer__copyright {
  margin: 0;
  line-height: 1.55;
}

.djt-footer__legal {
  display: grid;
  gap: var(--djt-sp-2);
}

.djt-footer__copyright {
  color: #fff;
}

.djt-footer a:not(.btn),
.djt-footer .btn-link {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .45);
  text-underline-offset: .18em;
}

.djt-footer a:not(.btn):hover,
.djt-footer a:not(.btn):focus,
.djt-footer .btn-link:hover {
  color: #fff;
  text-decoration-color: #fff;
}

.djt-footer :where(a, button):focus-visible {
  outline-color: #fff;
}

/* a menu module placed in the footer renders as a simple link list */
.djt-footer .mod-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem var(--djt-sp-4);
}

.djt-footer .mod-menu a {
  display: inline-block;
  padding: .25rem 0;
}

.djt-footer .mod-menu .mod-menu__sub {
  display: none;
}

/**
 * mod_menu renders `<ul class="mod-menu mod-list nav">`, and the component stylesheet
 * styles generic menu modules with `.djt .mod-list li a` (0,2,2) and `.djt .mod-list`.
 * Those out-specify the `.djt-footer .mod-menu` rules above (0,2,1), which left footer
 * links brand blue on the navy footer - about 1.9:1, nowhere near readable - and
 * stacked them vertically. Match that weight so the footer wins inside its own region.
 */
.djt .djt-footer .mod-menu,
.djt .djt-footer .mod-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: .35rem var(--djt-sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.djt .djt-footer .mod-menu a,
.djt .djt-footer .mod-list li a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .45);
  text-underline-offset: .18em;
}

.djt .djt-footer .mod-menu a:hover,
.djt .djt-footer .mod-menu a:focus-visible,
.djt .djt-footer .mod-list li a:hover,
.djt .djt-footer .mod-list li a:focus-visible {
  color: #fff;
  text-decoration-color: #fff;
}

.djt-footer .mod-custom h3,
.djt-footer .djt-footer__modules h3 {
  color: #fff;
  font-size: var(--djt-fs-md);
  margin-bottom: var(--djt-sp-3);
}

/* =============================================================================
   8. Back to top
   ========================================================================== */

.djt-back-top {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--djt-brand);
  color: var(--djt-on-ink);
  box-shadow: var(--djt-shadow);
  inset-inline-end: 1rem;
  bottom: 1rem;
}

.djt-back-top:hover,
.djt-back-top:focus {
  background: var(--djt-brand-hover);
  border-color: transparent;
  color: var(--djt-on-ink);
}

.djt-back-top:focus-visible {
  outline-color: var(--djt-focus-on-brand);
}

/* =============================================================================
   9. Error page
   ========================================================================== */

.djt-error__box {
  max-width: 40rem;
  margin: var(--djt-sp-8) auto;
  text-align: center;
}

.djt-error__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--djt-sp-3);
  margin-top: var(--djt-sp-5);
}

.djt-error__debug {
  margin-top: var(--djt-sp-6);
  text-align: start;
  font-size: var(--djt-fs-sm);
  overflow-x: auto;
}

/* =============================================================================
   10. Print
   ========================================================================== */

@media print {
  .djt-header,
  .djt-footer,
  .djt-back-top,
  .djt-skip {
    display: none !important;
  }

  .djt a {
    color: inherit;
    text-decoration: none;
  }
}

/* =============================================================================
   11. Mega menu - refinements
   ========================================================================== */

/* The mobile drawer is a compact list; stills would make it a long scroll. */
@media (max-width: 61.99em) {
  .djt-mega__thumb {
    display: none;
  }

  .djt-mega__body {
    display: contents;
  }
}

/* The hover tint is near-white, which would glare in dark mode; and the accents
   need lifting off a dark surface to stay legible. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .djt-mega__item {
    --_accent: hsl(calc(214 - (var(--_i, 0) * 7)) 78% 68%);
    --_accent-soft: hsl(calc(214 - (var(--_i, 0) * 7)) 40% 17%);
  }
}

:root[data-theme="dark"] .djt-mega__item {
  --_accent: hsl(calc(214 - (var(--_i, 0) * 7)) 78% 68%);
  --_accent-soft: hsl(calc(214 - (var(--_i, 0) * 7)) 40% 17%);
}

/* Motion is decoration here: the panel must still open instantly without it. */
@media (prefers-reduced-motion: reduce) {
  .djt-nav__item--parent.is-open > .djt-mega .djt-mega__item,
  .djt-nav__item--parent.is-open > .djt-mega .djt-mega__aside,
  .no-js .djt-nav__item--parent:hover > .djt-mega .djt-mega__item {
    animation: none;
  }

  .djt-mega__stage,
  .djt-mega__stage::before,
  .djt-mega__thumb img {
    transition: none;
  }

  .djt-mega__stage:hover,
  .djt-mega__stage:focus-visible {
    transform: none;
  }

  .djt-mega__stage:hover .djt-mega__thumb img,
  .djt-mega__stage:focus-visible .djt-mega__thumb img {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
 * A `feature` row in the site grid, between top-a and top-b.
 *
 * Cassiopeia names every row of .site-grid in grid-template-areas, so a child
 * with no named area is auto-placed into the first free row - which put the
 * parallax band above the learning path instead of below it. Re-declare the
 * areas with a feature row inserted; both breakpoints Cassiopeia defines are
 * mirrored here, otherwise the wider one would drop the new row again.
 *
 * The row costs nothing on pages without the module: grid rows are auto-sized,
 * so an empty one collapses.
 *
 * .container-feature carries `full-width` as well, and Cassiopeia's
 * `.site-grid > .full-width` rule is the more specific, so it keeps overriding
 * the column half of grid-area to span full-start/full-end. That is the same
 * arrangement container-banner already uses.
 * ------------------------------------------------------------------------ */
.djt .site-grid {
  grid-template-areas: ". banner banner banner banner ."
                       ". top-a top-a top-a top-a ."
                       ". feature feature feature feature ."
                       ". top-b top-b top-b top-b ."
                       ". comp comp comp comp ."
                       ". side-r side-r side-r side-r ."
                       ". side-l side-l side-l side-l ."
                       ". divider divider divider divider ."
                       ". bot-a bot-a bot-a bot-a ."
                       ". bot-b bot-b bot-b bot-b .";
}

@media (width >= 992px) {
  .djt .site-grid {
    grid-template-areas: ". banner banner banner banner ."
                         ". top-a top-a top-a top-a ."
                         ". feature feature feature feature ."
                         ". top-b top-b top-b top-b ."
                         ". side-l comp comp side-r ."
                         ". divider divider divider divider ."
                         ". bot-a bot-a bot-a bot-a ."
                         ". bot-b bot-b bot-b bot-b .";
  }
}

.djt .container-feature {
  /* Row only. grid-area would also set the column, and because this rule has the
     same specificity as Cassiopeia's .site-grid > .full-width but loads later, it
     would win and pull the band back inside the text columns. */
  grid-row: feature;
  grid-column: full-start / full-end;
}

/* Same arrangement for the band that separates the page from the "Latest videos"
   grid underneath it. Row only, for the reason above. */
.djt .container-divider {
  grid-row: divider;
  grid-column: full-start / full-end;
}