/**
 * djtutor.com :: component styles (com_djtutor, mod_djtutor_latest, mod_djtutor_hero)
 *
 * Brand ink #2152AD is taken from the DJ Tutor logo. The --djt-* tokens below are the same set the
 * site template (tpl_djtutor, media/templates/site/djtutor/css/djtutor.css) defines; the template
 * loads after this file and therefore wins, so this block is the default used when the component
 * runs under another template. Keep the two token lists in sync.
 *
 * Nothing in this file requests anything from another host: no @font-face, no remote url().
 */

/* =============================================================================
   Tokens (defaults; the template overrides them)
   ========================================================================== */

:root {
  --djt-brand: #2152ad;
  --djt-brand-hover: #16397a;
  --djt-ink: #2152ad;
  --djt-ink-strong: #16397a;
  --djt-ink-soft: #e9f0fb;
  --djt-ink-deep: #0d2045;
  --djt-on-ink: #ffffff;
  --djt-text: #161b26;
  --djt-text-strong: #0b1220;
  --djt-muted: #5b6578;
  --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;
  --djt-ok: #176640;
  --djt-ok-soft: #e1f3ea;
  --djt-warn: #7c4a03;
  --djt-warn-soft: #fef3c7;
  --djt-focus: var(--djt-ink);
  --djt-focus-on-brand: #0d2045;
  --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;
  --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);
  --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;
  --djt-fs-sm: .875rem;
  --djt-fs-md: 1rem;
  --djt-fs-lg: 1.125rem;
  --djt-fs-xl: 1.375rem;
  --djt-fs-2xl: 1.75rem;
  --djt-fs-3xl: clamp(2rem, 1.55rem + 1.8vw, 2.5rem);
  --djt-fs-4xl: clamp(2.25rem, 1.6rem + 2.8vw, 3.25rem);
  --djt-lh-tight: 1.15;
  --djt-lh-snug: 1.3;
  --djt-lh-body: 1.6;
  --djt-lh-read: 1.7;
  --djt-measure: 68ch;
  --djt-fs-card: 1.0625rem;
  --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;
  --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);
  --djt-container: 1320px;
  --djt-gutter: 1rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --djt-brand-hover: #2f63c4;
    --djt-ink: #8fb2f2;
    --djt-ink-strong: #b5cbf8;
    --djt-ink-soft: #1b2a47;
    --djt-ink-deep: #0a1327;
    --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-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);
  }
}

:root[data-theme="dark"] {
  --djt-brand-hover: #2f63c4;
  --djt-ink: #8fb2f2;
  --djt-ink-strong: #b5cbf8;
  --djt-ink-soft: #1b2a47;
  --djt-ink-deep: #0a1327;
  --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-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);
}

/* =============================================================================
   Shared pieces: page header, eyebrow, badges, buttons, empty states
   ========================================================================== */

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

.djt-page-title {
  margin: 0;
  font-size: var(--djt-fs-3xl);
  font-weight: 700;
  line-height: var(--djt-lh-tight);
  letter-spacing: -.015em;
  color: var(--djt-text-strong);
  overflow-wrap: anywhere;
}

/* Page introductions run the full content width on desktop. A reading measure is right
   for an article you read top to bottom, and wrong for a two-line standfirst: it left the
   lead stopping halfway across while the heading above it and the grid below it used the
   whole width, which reads as a layout fault rather than as typography. These texts are
   short enough that a full-width line stays one or two lines deep. Long-form body text
   (.djt-article, .djt-transcript, .djt-brief) keeps its measure. */
.djt-page-lead {
  max-width: none;
  margin: var(--djt-sp-3) 0 0;
  font-size: var(--djt-fs-lg);
  line-height: 1.5;
  color: var(--djt-muted);
}

.djt-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--djt-sp-2) var(--djt-sp-3);
  margin: 0 0 var(--djt-sp-3);
  font-size: var(--djt-fs-sm);
  font-weight: 600;
  color: var(--djt-muted);
}

.djt-eyebrow a[href] {
  color: var(--djt-ink);
  text-decoration: none;
}

.djt-eyebrow a[href]:hover {
  text-decoration: underline;
}

.djt-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .15rem .6rem;
  border-radius: var(--djt-radius-pill);
  background: var(--djt-badge-bg);
  color: var(--djt-badge-fg);
  font-family: var(--djt-font-sans);
  font-size: var(--djt-fs-xs);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

.djt-badge--level,
.djt-badge--optional {
  background: transparent;
  color: var(--djt-muted);
  box-shadow: inset 0 0 0 1px var(--djt-border-strong);
}

.djt-badge--soon {
  background: var(--djt-badge-soon-bg);
  color: var(--djt-badge-soon-fg);
}

.djt-badge--education { background: var(--djt-badge-education-bg); color: var(--djt-badge-education-fg); }
.djt-badge--business { background: var(--djt-badge-business-bg); color: var(--djt-badge-business-fg); }
.djt-badge--product_test { background: var(--djt-badge-review-bg); color: var(--djt-badge-review-fg); }
.djt-badge--product_intro { background: var(--djt-badge-intro-bg); color: var(--djt-badge-intro-fg); }
.djt-badge--promo { background: var(--djt-badge-promo-bg); color: var(--djt-badge-promo-fg); }

.djt-empty {
  margin: var(--djt-sp-4) 0;
  padding: var(--djt-sp-5);
  border: 1px dashed var(--djt-border-strong);
  border-radius: var(--djt-radius);
  color: var(--djt-muted);
  text-align: center;
}

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

/* the template defines .djt-btn too; this copy keeps the hero and lesson links usable without it */
.djt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: .625rem 1.125rem;
  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-md) / 1.2 var(--djt-font-sans);
  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:hover {
  background: var(--djt-ink-soft);
  border-color: var(--djt-ink);
  color: var(--djt-ink-strong);
}

.djt-btn--primary {
  background: var(--djt-brand);
  border-color: var(--djt-brand);
  color: var(--djt-on-ink);
}

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

.djt-btn--primary:focus-visible {
  outline: 3px solid var(--djt-focus-on-brand);
  outline-offset: 2px;
}

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

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

/* a little arrow after "more" links */
.djt-more {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 600;
  text-decoration: none;
}

.djt-more::after {
  content: "\2192";
  transition: transform var(--djt-dur) var(--djt-ease);
}

.djt-more:hover::after {
  transform: translateX(.2rem);
}

/* =============================================================================
   Facade player
   ========================================================================== */

.djt-player {
  margin: 0 0 var(--djt-sp-4);
}

.djt-player__shell {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0c0d10;
  border-radius: var(--djt-radius-lg);
  overflow: hidden;
  box-shadow: var(--djt-shadow);
  /* a hairline keeps the dark box readable on dark backgrounds */
  outline: 1px solid rgba(255, 255, 255, .06);
  outline-offset: -1px;
}

/* Older browsers without aspect-ratio still get a 16:9 box. */
@supports not (aspect-ratio: 16 / 9) {
  .djt-player__shell::before {
    content: "";
    display: block;
    padding-top: 56.25%;
  }
}

.djt-player__poster,
.djt-player__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.djt-player__poster {
  object-fit: cover;
  transition: transform .5s var(--djt-ease), filter .3s var(--djt-ease);
}

.djt-player__poster--empty {
  background: radial-gradient(120% 120% at 30% 20%, #27365c 0%, #12161f 60%);
}

/* ---- activation button ---- */

.djt-player__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .35) 100%);
  color: #fff;
  cursor: pointer;
  font: inherit;
}

.djt-player__play-icon {
  display: block;
  line-height: 0;
}

.djt-player__play-icon svg {
  width: 4.75rem;
  height: 3.375rem;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .45));
  transition: transform var(--djt-dur) var(--djt-ease);
}

/* Brand the play lozenge rather than using YouTube red. */
.djt-player__play-bg {
  fill: var(--djt-brand);
  fill-opacity: .94;
  transition: fill-opacity var(--djt-dur) var(--djt-ease);
}

.djt-player__play-text {
  padding: .25rem .75rem;
  border-radius: var(--djt-radius-pill);
  background: rgba(8, 10, 14, .6);
  font-size: var(--djt-fs-sm);
  font-weight: 600;
  letter-spacing: .02em;
}

.djt-player__play:hover .djt-player__play-bg,
.djt-player__play:focus-visible .djt-player__play-bg {
  fill-opacity: 1;
}

.djt-player__play:hover .djt-player__play-icon svg,
.djt-player__play:focus-visible .djt-player__play-icon svg {
  transform: scale(1.06);
}

.djt-player:hover .djt-player__poster {
  transform: scale(1.025);
  filter: brightness(.85);
}

.djt-player__play:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -8px;
  border-radius: var(--djt-radius-lg);
}

.djt-player.is-playing .djt-player__play,
.djt-player.is-playing .djt-player__duration {
  display: none;
}

.djt-player__duration,
.djt-card__duration {
  position: absolute;
  right: .625rem;
  bottom: .625rem;
  z-index: 3;
  padding: .125rem .45rem;
  border-radius: var(--djt-radius-sm);
  background: rgba(8, 10, 14, .82);
  color: #fff;
  font-family: var(--djt-font-sans);
  font-size: var(--djt-fs-xs);
  font-weight: 600;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* ---- consent note ---- */

.djt-player__consent {
  margin: var(--djt-sp-2) 0 0;
  font-size: var(--djt-fs-sm);
  line-height: 1.45;
  color: var(--djt-muted);
}

.djt-player__consent a {
  color: var(--djt-ink);
}

.djt-player__noscript {
  margin: var(--djt-sp-2) 0 0;
  font-size: var(--djt-fs-sm);
}

/* =============================================================================
   Thumbnails, cards and grids (library, latest, related, course lists)
   ========================================================================== */

.djt-thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--djt-surface-3);
}

.djt-thumb--empty,
.djt-card__media--empty {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(120% 120% at 30% 20%, var(--djt-surface-3) 0%, var(--djt-surface-2) 60%);
}

.djt-grid {
  display: grid;
  gap: var(--djt-sp-5) var(--djt-sp-4);
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Wider than the video grid: a course card now carries a number in its own column, and
 * at 17rem the text beside it came out around 230px. Three abreast on a desktop also
 * leaves tidier rows for the four-to-six courses a stage actually has. */
.djt-grid--courses {
  grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
  gap: var(--djt-sp-4);
}

@media (max-width: 24em) {
  .djt-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.djt-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--djt-surface);
  border: 1px solid var(--djt-border);
  border-radius: var(--djt-radius);
  overflow: hidden;
  transition: border-color var(--djt-dur) var(--djt-ease), box-shadow var(--djt-dur) var(--djt-ease), transform var(--djt-dur) var(--djt-ease);
}

.djt-card:hover {
  border-color: var(--djt-border-strong);
  box-shadow: var(--djt-shadow);
}

@media (hover: hover) {
  .djt-card:hover {
    transform: translateY(-2px);
  }
}

.djt-card__media {
  position: relative;
  display: block;
  background: var(--djt-surface-3);
  overflow: hidden;
}

.djt-card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .5s var(--djt-ease);
}

@media (hover: hover) {
  .djt-card:hover .djt-card__media img {
    transform: scale(1.04);
  }
}

.djt-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--djt-sp-2);
  flex: 1 1 auto;
  padding: var(--djt-sp-4) var(--djt-sp-4) var(--djt-sp-5);
}

.djt-card__body > .djt-badge {
  align-self: flex-start;
}

.djt-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 0;
  font-size: var(--djt-fs-card, 1.0625rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--djt-text-strong);
  overflow-wrap: anywhere;
}

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

/* the title link covers the whole card: one tab stop, the whole card clickable */
.djt-card .djt-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.djt-card:hover .djt-card__title a {
  color: var(--djt-ink);
}

@supports selector(:has(a)) {
  .djt-card:has(.djt-card__title a:focus-visible) {
    outline: 3px solid var(--djt-focus);
    outline-offset: 2px;
  }

  .djt-card .djt-card__title a:focus-visible {
    outline: none;
  }
}

.djt-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--djt-sp-2);
  margin: 0;
  font-size: .8125rem;
  color: var(--djt-muted);
}

.djt-card__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 0;
  font-size: var(--djt-fs-sm);
  line-height: 1.5;
  color: var(--djt-muted);
}

/* course cards carry no image; a brand bar at the start marks them as a path, not a video */
.djt-card--course {
  border-inline-start: 4px solid var(--djt-brand);
}

.djt-card--course .djt-card__title {
  font-size: var(--djt-fs-lg);
  -webkit-line-clamp: unset;
  display: block;
}

/* The number carries the meaning on a course card: these run in order, and a grid of
 * cards does not say so by itself. Same circled digit as a lesson row, so the two
 * levels of the path are recognisably the same device. */
.djt-card--course .djt-card__body {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  column-gap: var(--djt-sp-3);
  row-gap: var(--djt-sp-2);
  align-content: start;
  padding-bottom: var(--djt-sp-4);
}

.djt-card__num {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--djt-ink-soft);
  color: var(--djt-ink-strong);
  font-size: var(--djt-fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.djt-card--course .djt-card__title,
.djt-card--course .djt-card__meta,
.djt-card--course .djt-card__text {
  grid-column: 2;
}

/* "Course 3 of 5" beside the stage link, so a course page says where it sits even
 * when it was reached from a search result rather than from the stage. */
.djt-eyebrow__step {
  padding: .05rem .5rem;
  border: 1px solid var(--djt-border);
  border-radius: var(--djt-radius-pill);
  color: var(--djt-muted);
  font-variant-numeric: tabular-nums;
}

/* =============================================================================
   Learn: all stages (view=stages) and one stage (view=stage)
   ========================================================================== */

.djt-stages {
  --djt-rail: 3rem;
}

.djt-stage {
  position: relative;
  padding: var(--djt-sp-6) 0;
  border-top: 1px solid var(--djt-border);
}

.djt-stage:last-child {
  padding-bottom: var(--djt-sp-4);
}

@media (min-width: 48em) {
  .djt-stage {
    padding-inline-start: calc(var(--djt-rail) + var(--djt-sp-5));
  }

  /* a path down the page: line and marker per stage, decorative */
  .djt-stage::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: calc(var(--djt-rail) / 2 - 1px);
    width: 2px;
    background: var(--djt-border);
  }

  .djt-stage::after {
    content: "";
    position: absolute;
    top: calc(var(--djt-sp-6) + .5rem);
    inset-inline-start: calc(var(--djt-rail) / 2 - .5rem);
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--djt-brand);
    box-shadow: 0 0 0 4px var(--djt-bg);
  }

  .djt-stage:first-of-type::before {
    top: var(--djt-sp-6);
  }

  .djt-stage:last-of-type::before {
    bottom: auto;
    height: calc(var(--djt-sp-6) + 1rem);
  }
}

.djt-stage__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--djt-sp-2) var(--djt-sp-4);
  margin-bottom: var(--djt-sp-3);
}

.djt-stage__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--djt-sp-3);
  margin: 0;
  font-size: var(--djt-fs-2xl);
  letter-spacing: -.015em;
}

.djt-stage__header .djt-stage__title a {
  color: var(--djt-text-strong);
  text-decoration: none;
}

.djt-stage__header .djt-stage__title a:hover {
  color: var(--djt-ink);
  text-decoration: underline;
  text-underline-offset: .18em;
}

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

/* Title block left, intro right: the head of a stage page then spans the same width as
 * the course cards under it, rather than stopping half way across a desktop screen. */
.djt-stage__head {
  display: grid;
  gap: var(--djt-sp-4);
  align-items: end;
}

@media (width >= 62em) {
  .djt-stage__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--djt-sp-7);
  }

  .djt-stage__head .djt-page-header,
  .djt-stage__head .djt-stage__intro {
    margin-bottom: 0;
  }
}

.djt-stage__intro {
  max-width: none;
  margin-bottom: var(--djt-sp-5);
}

.djt-stage__intro p:last-child,
.djt-course__intro p:last-child,
.djt-lesson__note p:last-child {
  margin-bottom: 0;
}

.djt-stage__courses {
  margin-top: var(--djt-sp-6);
}

.djt-stage__courses h2,
.djt-lessons-section h2 {
  font-size: var(--djt-fs-xl);
  margin-bottom: var(--djt-sp-4);
}

.djt-stage__more {
  margin: var(--djt-sp-6) 0 0;
}

p.djt-stage__more a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 600;
  text-decoration: none;
}

p.djt-stage__more a::after {
  content: "\2192";
}

p.djt-stage__more a:hover {
  text-decoration: underline;
}

/* =============================================================================
   Course (view=course): outcomes and the lesson list
   ========================================================================== */

.djt-course {
  max-width: none;
}

.djt-course__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--djt-sp-2) var(--djt-sp-3);
  margin: var(--djt-sp-3) 0 0;
  font-size: var(--djt-fs-sm);
  color: var(--djt-muted);
}

/* Intro and outcomes sit side by side on a desktop: two blocks that each want a
 * reading measure, which together fill the width the lesson list uses below them. */
.djt-course__brief {
  display: grid;
  gap: var(--djt-sp-5);
  align-items: start;
  margin-bottom: var(--djt-sp-6);
}

@media (width >= 62em) {
  .djt-course__brief {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--djt-sp-7);
  }

  .djt-course__brief > * {
    margin-bottom: 0;
  }
}

.djt-course__intro {
  max-width: none;
  font-size: var(--djt-fs-lg);
  line-height: 1.55;
}

.djt-outcomes,
.djt-takeaways {
  margin: var(--djt-sp-6) 0;
  padding: var(--djt-sp-5) var(--djt-sp-5) var(--djt-sp-5);
  border-radius: var(--djt-radius-lg);
  background: var(--djt-ink-soft);
}

.djt-outcomes h2,
.djt-takeaways h2 {
  margin: 0 0 var(--djt-sp-4);
  font-size: var(--djt-fs-lg);
  color: var(--djt-text-strong);
}

.djt-outcomes__list,
.djt-takeaways__list {
  display: grid;
  gap: var(--djt-sp-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.djt-outcomes__list li,
.djt-takeaways__list li {
  position: relative;
  padding-inline-start: 2rem;
  line-height: 1.5;
}

.djt-outcomes__list li::before,
.djt-takeaways__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .1rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: var(--djt-brand);
  -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3ccircle cx='10' cy='10' r='10' fill='%23000'/%3e%3cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3ccircle cx='10' cy='10' r='10' fill='%23000'/%3e%3cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") center / contain no-repeat;
}

.djt-lessons-section {
  margin-top: var(--djt-sp-6);
}

.djt-lessons {
  display: grid;
  gap: var(--djt-sp-3);
  list-style: none;
  counter-reset: djt-lesson;
  margin: 0;
  padding: 0;
}

/* Two abreast once there is room for it. One column of lesson rows across a desktop
 * leaves the title and the note running to about 1000px, which is far too wide to read;
 * two columns put them back at a sensible measure and use the whole width doing it.
 * The numbers carry the order, so reading left to right then down is unambiguous. */
@media (width >= 75rem) {
  .djt-lessons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--djt-sp-3) var(--djt-sp-4);
  }
}

.djt-lesson {
  position: relative;
  counter-increment: djt-lesson;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--djt-sp-3) var(--djt-sp-4);
  align-items: start;
  padding: var(--djt-sp-3);
  border: 1px solid var(--djt-border);
  border-radius: var(--djt-radius);
  background: var(--djt-surface);
  transition: border-color var(--djt-dur) var(--djt-ease), box-shadow var(--djt-dur) var(--djt-ease);
}

.djt-lesson:hover {
  border-color: var(--djt-border-strong);
  box-shadow: var(--djt-shadow-sm);
}

.djt-lesson::before {
  content: counter(djt-lesson);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--djt-ink-soft);
  color: var(--djt-ink-strong);
  font-size: var(--djt-fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.djt-lesson--optional {
  border-style: dashed;
}

.djt-lesson--optional::before {
  background: var(--djt-surface-2);
  color: var(--djt-muted);
}

.djt-lesson__media {
  display: block;
  grid-column: 2;
  max-width: 14rem;
  border-radius: var(--djt-radius-sm);
  overflow: hidden;
  background: var(--djt-surface-3);
}

.djt-lesson__body {
  grid-column: 2;
  min-width: 0;
}

@media (min-width: 40em) {
  .djt-lesson {
    grid-template-columns: 2.25rem 10rem minmax(0, 1fr);
  }

  .djt-lesson__media {
    grid-column: 2;
    max-width: none;
  }

  .djt-lesson__body {
    grid-column: 3;
  }
}

.djt-lesson__title {
  margin: 0 0 var(--djt-sp-1);
  font-size: var(--djt-fs-md);
  font-weight: 600;
  line-height: var(--djt-lh-snug);
  letter-spacing: 0;
}

.djt-lesson .djt-lesson__title a {
  color: var(--djt-text-strong);
  text-decoration: none;
}

.djt-lesson .djt-lesson__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.djt-lesson:hover .djt-lesson__title a {
  color: var(--djt-ink);
}

@supports selector(:has(a)) {
  .djt-lesson:has(.djt-lesson__title a:focus-visible) {
    outline: 3px solid var(--djt-focus);
    outline-offset: 2px;
  }

  .djt-lesson .djt-lesson__title a:focus-visible {
    outline: none;
  }
}

.djt-lesson__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--djt-sp-2);
  margin: 0;
  font-size: var(--djt-fs-sm);
  color: var(--djt-muted);
}

.djt-lesson__duration {
  font-variant-numeric: tabular-nums;
}

.djt-lesson__note {
  margin-top: var(--djt-sp-2);
  font-size: var(--djt-fs-sm);
  line-height: 1.5;
  color: var(--djt-muted);
}

/* =============================================================================
   Video page (view=video)
   ========================================================================== */

/* No cap. The page fills the component column and shares it out below; capping the
 * whole article left a third of a desktop screen empty. */
.djt-video {
  max-width: none;
}

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

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

.djt-video__header .djt-page-title {
  font-size: clamp(var(--djt-fs-xl), 1.1rem + 1.2vw, var(--djt-fs-2xl));
  line-height: 1.25;
}

.djt-video__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--djt-sp-2) var(--djt-sp-3);
  margin: var(--djt-sp-3) 0 0;
  font-size: var(--djt-fs-sm);
  color: var(--djt-muted);
}

/* The YouTube title, where it differs from the lesson heading. Quiet on purpose: it is
   there to reassure someone who searched that string, not to be read first. */
.djt-video__original {
  margin: var(--djt-sp-2) 0 0;
  font-size: var(--djt-fs-sm);
  color: var(--djt-muted);
}

.djt-video__original span {
  font-style: italic;
}

.djt-video__stage {
  font-weight: 600;
  text-decoration: none;
}

.djt-video__stage:hover {
  text-decoration: underline;
}

/* previous / next lesson */

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

.djt-lesson-nav__where {
  margin: 0 0 var(--djt-sp-3);
  font-size: var(--djt-fs-sm);
  color: var(--djt-muted);
}

.djt-lesson-nav__where a {
  font-weight: 600;
}

.djt-lesson-nav__links {
  display: grid;
  gap: var(--djt-sp-3);
  grid-template-columns: minmax(0, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Prev and next stack, one under the other, and each fills the width it is given.
 * They used to sit in a two-column grid with next pinned to column 2 and right-aligned.
 * That was tolerable while the nav was a wide box under the player, but on the first and
 * last lesson of a course only one of the two exists, so the single link was stranded
 * against one edge with an empty half beside it. Now that the nav lives in the rail there
 * is no room for two columns either. The arrows on the labels keep the direction clear.
 *
 * auto-fit rather than a fixed two columns: it collapses the empty track, so one link
 * on its own always spans the full width, whether that is a 277px rail or an 800px
 * tablet. That is what makes the stranding impossible rather than merely unlikely.
 * ------------------------------------------------------------------------- */
.djt-lesson-nav__links {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.djt-lesson-nav .djt-lesson-nav__links a {
  display: grid;
  gap: .125rem;
  min-height: 4rem;
  padding: var(--djt-sp-3) var(--djt-sp-4);
  border: 1px solid var(--djt-border);
  border-radius: var(--djt-radius-sm);
  background: var(--djt-surface);
  color: var(--djt-text-strong);
  text-decoration: none;
  transition: border-color var(--djt-dur) var(--djt-ease), box-shadow var(--djt-dur) var(--djt-ease);
}

.djt-lesson-nav .djt-lesson-nav__links a:hover {
  border-color: var(--djt-ink);
  box-shadow: var(--djt-shadow-sm);
  color: var(--djt-ink-strong);
}

.djt-lesson-nav__label {
  font-size: var(--djt-fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--djt-muted);
}

.djt-lesson-nav__prev .djt-lesson-nav__label::before {
  content: "\2190\00a0";
}

.djt-lesson-nav__next .djt-lesson-nav__label::after {
  content: "\00a0\2192";
}

.djt-lesson-nav__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-weight: 600;
  line-height: var(--djt-lh-snug);
}

/* sections below the player */

.djt-video > section {
  margin-top: var(--djt-sp-7);
}

.djt-video > section > h2 {
  margin: 0 0 var(--djt-sp-4);
  font-size: var(--djt-fs-xl);
}

.djt-video__summary {
  max-width: var(--djt-measure);
  font-size: var(--djt-fs-lg);
  line-height: 1.55;
}

.djt-video__summary p:last-child {
  margin-bottom: 0;
}

.djt-takeaways {
  max-width: 60rem;
}

.djt-chapters__list {
  display: grid;
  gap: .25rem;
  max-width: 44rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.djt-chapters__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--djt-sp-3);
  padding: .375rem 0;
  border-bottom: 1px solid var(--djt-border);
}

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

.djt-chapters__time {
  display: inline-block;
  min-width: 3.5rem;
  padding: .1rem .5rem;
  border-radius: var(--djt-radius-sm);
  background: var(--djt-ink-soft);
  color: var(--djt-ink-strong);
  font-family: var(--djt-font-mono);
  font-size: var(--djt-fs-sm);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* -------------------------------------------------------------------------
   The reading area of a lesson: prose beside a rail

   Same arrangement the transcript below already uses, and for the same reason. An
   article capped at the reading measure inside a full-width column left half a desktop
   screen empty, so the width now carries something useful: where you are in the course,
   and the article's own subheadings on anything long enough to need them.

   The prose is set a little larger here than elsewhere, because a wider column wants a
   bigger type size to keep the same number of characters on a line.
   ------------------------------------------------------------------------- */
.djt-video__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--djt-sp-6);
}

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

@media (width >= 64rem) {
  .djt-video__layout {
    /* The prose column takes the slack rather than being sized to a measure, so the
       page has no hole in the middle of it. The measure is then applied to the running
       text inside, while headings, figures and lists use the whole column - which is
       what keeps a wide column looking deliberate instead of stretched. */
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 21rem);
    align-items: start;
  }

  /* Source order puts the rail first, so a phone gets the lesson position and the
     contents before the article; on desktop it sits to the right of the prose. */
  .djt-video__rail {
    order: 2;
    position: sticky;
    top: var(--djt-sp-5);
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-inline-start: var(--djt-sp-5);
    border-inline-start: 1px solid var(--djt-border);
  }

  .djt-video__reading {
    order: 1;
  }

  .djt-video__layout--solo {
    grid-template-columns: minmax(0, 1fr);
  }

  .djt-video__layout .djt-article,
  .djt-video__layout .djt-brief,
  .djt-video__layout .djt-takeaways {
    max-width: none;
  }

  .djt-video__layout .djt-article {
    font-size: 1.125rem;
  }

  /* Running text keeps a measure; everything else fills the column. */
  .djt-video__layout .djt-article > p,
  .djt-video__layout .djt-article > ul,
  .djt-video__layout .djt-brief__text {
    max-width: 86ch;
  }
}

/* the article's own contents, in the rail */
.djt-article-contents {
  margin-top: var(--djt-sp-5);
}

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

.djt-article-contents__list {
  display: grid;
  gap: var(--djt-sp-2);
  margin: 0;
  padding: 0 0 0 1.4em;
  font-size: var(--djt-fs-sm);
  line-height: var(--djt-lh-snug);
}

.djt-article-contents__list a {
  color: var(--djt-ink);
  text-decoration: none;
}

.djt-article-contents__list a:hover,
.djt-article-contents__list a:focus-visible {
  text-decoration: underline;
}

/* the transcript: long-form reading */

.djt-transcript {
  max-width: var(--djt-measure);
  font-size: 1.0625rem;
  line-height: var(--djt-lh-read);
  color: var(--djt-text);
}

.djt-transcript p {
  margin: 0 0 1.1em;
  text-wrap: pretty;
}

.djt-transcript p:last-child {
  margin-bottom: 0;
}

.djt-transcript__note {
  margin-bottom: var(--djt-sp-5);
  padding: var(--djt-sp-3) var(--djt-sp-4);
  border-inline-start: 3px solid var(--djt-brand);
  border-radius: 0 var(--djt-radius-sm) var(--djt-radius-sm) 0;
  background: var(--djt-surface-2);
  color: var(--djt-muted);
  font-size: var(--djt-fs-sm);
  line-height: 1.5;
}

.djt-transcript--pending .djt-transcript__note {
  margin-bottom: 0;
}

.djt-video__course-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--djt-sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.djt-video .djt-video__course-list a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: .375rem .875rem;
  border: 1px solid var(--djt-border-strong);
  border-radius: var(--djt-radius-pill);
  color: var(--djt-text-strong);
  font-size: var(--djt-fs-sm);
  font-weight: 600;
  text-decoration: none;
  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-video .djt-video__course-list a:hover {
  background: var(--djt-ink-soft);
  border-color: var(--djt-ink);
  color: var(--djt-ink-strong);
}

.djt-related .djt-grid {
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

/* =============================================================================
   Library (view=library), latest, sections: filters, counters, pagination
   ========================================================================== */

.djt-filters {
  display: grid;
  gap: var(--djt-sp-3) var(--djt-sp-4);
  grid-template-columns: minmax(0, 1fr);
  margin: 0 0 var(--djt-sp-4);
  padding: var(--djt-sp-4);
  border: 1px solid var(--djt-border);
  border-radius: var(--djt-radius);
  background: var(--djt-surface-2);
}

@media (min-width: 36em) {
  .djt-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .djt-filters__field--search,
  .djt-filters__actions {
    grid-column: 1 / -1;
  }
}

@media (min-width: 62em) {
  .djt-filters {
    grid-template-columns: minmax(14rem, 2fr) repeat(auto-fit, minmax(8rem, 1fr)) auto;
    align-items: end;
  }

  .djt-filters__field--search,
  .djt-filters__actions {
    grid-column: auto;
  }
}

.djt-filters__field {
  display: grid;
  gap: .35rem;
  min-width: 0;
}

.djt-filters__label {
  font-size: var(--djt-fs-sm);
  font-weight: 600;
  color: var(--djt-text-strong);
}

.djt-filters__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--djt-sp-2);
  align-self: end;
}

.djt-pagination {
  display: flex;
  justify-content: center;
  margin-top: var(--djt-sp-6);
}

.djt-pagination .pagination {
  margin: 0;
}

/* =============================================================================
   Hero module (mod_djtutor_hero)
   ========================================================================== */

/**
 * Photographic hero.
 *
 * The image is a hard crop of a frame from the catalogue itself (Pioneer XDJ-RX, hands
 * on the crossfader). Cropping matters: the uncropped frame shows a mug, a door and a
 * domestic wall, because Ellaskins films at home. Tight on the gear it reads as a studio
 * shot; wide it reads as a bedroom. Served from our own origin like everything else.
 *
 * The hero is dark, so rather than restate a colour on every child we re-point the
 * design tokens for this subtree and let the existing rules follow.
 */
.djt-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--djt-ink-deep, #0d2045);

  /* light-on-dark for everything inside */
  --djt-text: #eef2f9;
  --djt-text-strong: #ffffff;
  --djt-muted: #b9c6dc;
  --djt-ink: #9dc0ff;
  --djt-ink-strong: #c3d8ff;
  --djt-border: rgba(255, 255, 255, .22);
  --djt-border-strong: rgba(255, 255, 255, .38);
  --djt-focus: #ffffff;

  background-color: #0b1220;
  background-image:
    linear-gradient(104deg, rgba(8, 14, 26, .96) 0%, rgba(9, 17, 33, .88) 42%,
                            rgba(11, 20, 38, .58) 68%, rgba(11, 20, 38, .42) 100%),
    image-set(url("../images/hero-decks.webp") type("image/webp"),
              url("../images/hero-decks.jpg")  type("image/jpeg"));
  background-repeat: no-repeat;
  background-position: center 62%, center 62%;
  background-size: cover, cover;
  color: var(--djt-text);
}

/* A brand wash over the image so it reads as DJ Tutor blue rather than grey. */
.djt-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(62% 70% at 78% 32%, rgba(33, 82, 173, .34) 0%, rgba(33, 82, 173, 0) 72%),
    linear-gradient(180deg, rgba(11, 18, 32, 0) 55%, rgba(11, 18, 32, .55) 100%);
  pointer-events: none;
}

@media (max-width: 61.99em) {
  /* Narrow screens put copy over the busiest part of the frame, so weight the scrim. */
  .djt-hero {
    background-image:
      linear-gradient(180deg, rgba(8, 14, 26, .93) 0%, rgba(9, 17, 33, .80) 55%,
                              rgba(11, 20, 38, .72) 100%),
      image-set(url("../images/hero-decks-1100.webp") type("image/webp"),
                url("../images/hero-decks.jpg") type("image/jpeg"));
  }
}

/**
 * Secondary buttons on the photograph.
 *
 * The non-primary hero button carries no modifier class - it is a bare `.djt-btn`,
 * whose default is a white face with token-coloured text. Re-pointing --djt-text above
 * therefore painted white on white. Target every hero button that is not the primary
 * one, so this holds whatever modifier it ends up with.
 */
.djt-hero .djt-btn:not(.djt-btn--primary) {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .50);
  color: #ffffff;
  backdrop-filter: blur(3px);
}

.djt-hero .djt-btn:not(.djt-btn--primary):hover,
.djt-hero .djt-btn:not(.djt-btn--primary):focus-visible {
  background: rgba(255, 255, 255, .20);
  border-color: #ffffff;
  color: #ffffff;
}

.djt-hero__inner {
  position: relative;
  display: grid;
  gap: var(--djt-sp-6);
  align-items: center;
  max-width: var(--djt-container, 1320px);
  margin: 0 auto;
  padding: var(--djt-sp-7) var(--djt-gutter, 1rem) var(--djt-sp-7);
}

@media (min-width: 62em) {
  .djt-hero__inner {
    grid-template-columns: minmax(0, 11fr) minmax(0, 10fr);
    gap: var(--djt-sp-8);
    padding-top: var(--djt-sp-8);
    padding-bottom: var(--djt-sp-8);
  }
}

.djt-hero__eyebrow {
  margin: 0 0 var(--djt-sp-3);
  font-size: var(--djt-fs-sm);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--djt-ink);
}

.djt-hero__title {
  max-width: 16ch;
  margin: 0 0 var(--djt-sp-4);
  font-size: var(--djt-fs-4xl);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.025em;
  color: var(--djt-text-strong);
  text-wrap: balance;
}

.djt-hero__lead {
  max-width: 52ch;
  margin: 0 0 var(--djt-sp-5);
  font-size: var(--djt-fs-lg);
  line-height: 1.55;
  color: var(--djt-muted);
}

.djt-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--djt-sp-3);
  margin-bottom: var(--djt-sp-5);
}

.djt-hero__library {
  align-self: center;
  margin-inline-start: var(--djt-sp-2);
}

.djt-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--djt-sp-3) var(--djt-sp-6);
  list-style: none;
  margin: 0;
  padding: var(--djt-sp-4) 0 0;
  border-top: 1px solid var(--djt-border);
  font-size: var(--djt-fs-sm);
  color: var(--djt-muted);
}

.djt-hero__stat strong {
  display: block;
  font-size: var(--djt-fs-xl);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--djt-text-strong);
  font-variant-numeric: tabular-nums;
}

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

.djt-hero__player {
  margin: 0;
}

.djt-hero__player .djt-player__shell {
  box-shadow: var(--djt-shadow-lg);
}

.djt-hero__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--djt-sp-2) var(--djt-sp-4);
  margin: var(--djt-sp-3) 0 0;
  font-size: var(--djt-fs-sm);
  color: var(--djt-muted);
}

.djt-hero .djt-hero__caption a {
  font-weight: 600;
  color: var(--djt-text-strong);
  text-decoration: none;
}

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

.djt-hero__caption-meta {
  font-variant-numeric: tabular-nums;
}

/* =============================================================================
   Module chrome "section" (tpl_djtutor) and the latest-videos module
   ========================================================================== */

.djt-section-mod {
  padding: var(--djt-sp-6) 0 0;
}

.djt-section-mod__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--djt-sp-2) var(--djt-sp-4);
  margin-bottom: var(--djt-sp-4);
}

.djt-section-mod__title {
  margin: 0;
  font-size: var(--djt-fs-2xl);
  letter-spacing: -.015em;
}

.djt-latest.djt-grid {
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}

/* =============================================================================
   Motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .djt-player__poster,
  .djt-player__play-bg,
  .djt-player__play-icon svg,
  .djt-card,
  .djt-card__media img,
  .djt-more::after {
    transition: none;
  }

  .djt-player:hover .djt-player__poster,
  .djt-card:hover,
  .djt-card:hover .djt-card__media img,
  .djt-more:hover::after {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
 * Parallax band
 *
 * Sits between the learning path and the section cards, where the page was
 * otherwise a long white gap. Like .djt-hero it re-points the design tokens for
 * its own subtree rather than restating colours on every child, so existing
 * rules keep working but render light-on-dark.
 *
 * The image is a separate element rather than a background on the section,
 * because it is taller than the band and gets moved; overflow:hidden on the
 * section keeps that movement from showing.
 * ------------------------------------------------------------------------ */
.djt-parallax {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  isolation: isolate;
  background: var(--djt-ink-deep, #0d2045);

  /* light-on-dark for everything inside */
  --djt-text: #eef2f9;
  --djt-text-strong: #ffffff;
  --djt-muted: #c3cfe2;
  --djt-ink: #9dc0ff;
}

.djt-parallax--short  { min-height: 16rem; }
.djt-parallax--medium { min-height: 22rem; }
.djt-parallax--tall   { min-height: 30rem; }

.djt-parallax__bg {
  position: absolute;
  /* taller than the band, so there is image to spare at both ends of the drift */
  inset: -22% 0;
  z-index: 0;
  background-image: var(--djt-px-wide);
  background-position: center 55%;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Only promote to its own layer once JS is actually driving it: will-change on a
   static element costs memory for nothing. */
.djt-parallax.is-live .djt-parallax__bg {
  will-change: transform;
}

.djt-parallax.is-still .djt-parallax__bg {
  transform: none !important;
}

/* The photograph is dark but not evenly so - the beams are blown out where they
   cross. This veil guarantees the text contrast rather than trusting the image. */
.djt-parallax__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg,
      rgba(8, 17, 38, 0.92) 0%,
      rgba(8, 17, 38, 0.78) 42%,
      rgba(8, 17, 38, 0.55) 72%,
      rgba(8, 17, 38, 0.68) 100%);
}

.djt-parallax__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 68rem;
  margin-inline: auto;
  padding: 3.5rem 1rem;
}

.djt-parallax__heading {
  margin: 0 0 0.6rem;
  max-width: 24ch;
  color: var(--djt-text-strong);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.djt-parallax__standfirst {
  margin: 0;
  max-width: 54ch;
  color: var(--djt-muted);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.djt-parallax__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin: 2.25rem 0 0;
}

.djt-parallax__stat {
  min-width: 6rem;
}

.djt-parallax__value {
  margin: 0;
  color: var(--djt-text-strong);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.djt-parallax__label {
  margin: 0.25rem 0 0;
  color: var(--djt-muted);
  font-size: 0.875rem;
  line-height: 1.35;
}

@media (max-width: 48rem) {
  .djt-parallax--short,
  .djt-parallax--medium,
  .djt-parallax--tall { min-height: 0; }

  .djt-parallax__inner { padding: 2.75rem 1rem; }

  .djt-parallax__stats { gap: 1.5rem 2rem; }

  /* A narrow screen scrolls the band past in a moment, so the drift is not worth
     the paint cost; the image also needs more of its own height to stay covered. */
  .djt-parallax__bg {
    inset: 0;
    transform: none !important;
    /* the smaller file where the module supplied one */
    background-image: var(--djt-px-narrow, var(--djt-px-wide));
  }

  .djt-parallax__veil {
    background: linear-gradient(180deg,
      rgba(8, 17, 38, 0.88) 0%,
      rgba(8, 17, 38, 0.78) 60%,
      rgba(8, 17, 38, 0.88) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Belt and braces: the script also checks this, but the band must hold still
     even if the script never runs. */
  .djt-parallax__bg { transform: none !important; }
}

@media (prefers-contrast: more) {
  .djt-parallax__veil { background: rgba(6, 13, 30, 0.93); }
  .djt-parallax__standfirst,
  .djt-parallax__label { color: #e4eaf4; }
}

/* ---------------------------------------------------------------------------
 * The video page: using the content width without stretching the prose.
 *
 * The transcript was capped at --djt-measure (68ch) inside an article capped at
 * 60rem, so on a wide screen the text occupied about half the available width with
 * nothing beside it.
 *
 * The fix is NOT to widen the paragraphs. A 1,200px measure is materially harder to
 * read - the eye loses the line on the way back. Nor is it CSS multi-column: on a
 * transcript that runs for several screens you would read to the bottom of column
 * one and scroll back up for column two, which is worse than a single column.
 *
 * Instead the width is filled with something useful - a sticky contents rail beside
 * the prose - and the article itself is allowed to grow on large screens so the rail
 * does not eat into the reading measure.
 * ------------------------------------------------------------------------ */

.djt-transcript {
  max-width: none;
}

.djt-transcript__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--djt-sp-6);
}

.djt-transcript__body {
  max-width: var(--djt-measure);
  font-size: 1.0625rem;
  line-height: var(--djt-lh-read);
}

@media (width >= 90rem) {
  .djt-transcript__body {
    /* A little wider where there is room, but still inside the comfortable range. */
    max-width: 74ch;
  }
}

/* The rail only earns its place when there is width to spare; below that it becomes
 * an ordinary contents list above the text, which is the right thing on a phone. */
@media (width >= 64rem) {
  .djt-transcript__layout {
    /* Columns sized to their content, not 1fr: a 1fr prose column stretches to the
     * article edge while the paragraphs inside it stay capped at the reading measure,
     * which left about 300px of dead space between the text and the rail. Sizing the
     * columns and spreading them puts the rail flush against the right margin, so the
     * page uses its width and the gap reads as a gutter rather than a hole. */
    grid-template-columns: minmax(0, 74ch) minmax(13rem, 18rem);
    justify-content: space-between;
    align-items: start;
  }

  /* `.djt-transcript .djt-transcript__contents`, not the single class: Cassiopeia
   * ships `.container-component nav { position: relative }`, which at (0,1,1) beats a
   * lone class and quietly un-sticks the rail. */
  .djt-transcript .djt-transcript__contents {
    position: sticky;
    top: var(--djt-sp-5);
    /* Source order keeps the contents before the text for a screen reader and on a
     * phone; on desktop it sits to the right of the prose. */
    order: 2;
    max-height: calc(100vh - 8rem);
    padding-inline-start: var(--djt-sp-5);
    border-inline-start: 1px solid var(--djt-border);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .djt-transcript__body {
    order: 1;
  }
}

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

.djt-transcript .djt-chapters__list {
  max-width: none;
}

.djt-transcript .djt-chapters__list li {
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--djt-sp-2);
  padding: .3rem 0;
}

.djt-chapters__list a.djt-chapters__label {
  color: inherit;
  text-decoration: none;
  text-underline-offset: .18em;
}

.djt-chapters__list a.djt-chapters__label:hover,
.djt-chapters__list a.djt-chapters__label:focus-visible {
  color: var(--djt-brand);
  text-decoration: underline;
}

/* Chapter headings inside the text. These are what actually break the wall of prose
 * into something readable; the rail is just a way to jump between them. */
.djt-transcript__chapter {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--djt-sp-3);
  margin: var(--djt-sp-6) 0 var(--djt-sp-3);
  padding-top: var(--djt-sp-4);
  border-top: 1px solid var(--djt-border);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  /* So a jump from the contents does not hide the heading under the sticky header. */
  scroll-margin-top: var(--djt-sp-6);
}

.djt-transcript__chapter:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.djt-transcript__chapter > span:last-child {
  flex: 1 1 18ch;
  min-width: 0;
}

/* The disclaimer now follows the text it qualifies, so it reads as a footnote rather
 * than as an announcement before anyone has read a word. */
.djt-transcript__body .djt-transcript__note {
  margin: var(--djt-sp-6) 0 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ---------------------------------------------------------------------------
 * The written lesson: a short box, an explanatory article, and stills.
 *
 * A transcript alone is a wall of speech. Between the player and the transcript
 * sits a written explanation of the technique, with frames pulled from the video
 * to point at - and above that, one paragraph for someone deciding whether this
 * is the lesson they want at all.
 * ------------------------------------------------------------------------ */

.djt-brief {
  max-width: var(--djt-measure);
  margin: 0 0 var(--djt-sp-6);
  padding: var(--djt-sp-4) var(--djt-sp-5);
  border: 1px solid color-mix(in srgb, var(--djt-brand) 28%, transparent);
  border-inline-start: 4px solid var(--djt-brand);
  border-radius: var(--djt-radius-sm);
  background: color-mix(in srgb, var(--djt-brand) 7%, var(--djt-surface));
}

.djt-brief__title {
  margin: 0 0 var(--djt-sp-2);
  color: var(--djt-brand);
  font-size: var(--djt-fs-sm);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.djt-brief__text {
  margin: 0;
  color: var(--djt-ink-strong);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.djt-article {
  max-width: var(--djt-measure);
  font-size: 1.0625rem;
  line-height: var(--djt-lh-read);
}

.djt-article p {
  margin: 0 0 1.1em;
  text-wrap: pretty;
}

.djt-article__list {
  margin: 0 0 1.1em;
  padding-left: 1.25em;
}

.djt-article__list li {
  margin: 0 0 0.45em;
  text-wrap: pretty;
}

.djt-article__list li:last-child {
  margin-bottom: 0;
}

.djt-article__heading {
  margin: var(--djt-sp-6) 0 var(--djt-sp-3);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
}

.djt-article > .djt-article__heading:first-of-type {
  margin-top: var(--djt-sp-4);
}

/* Stills. Width-capped rather than fixed, so the same file serves the article
 * column and the narrower transcript column without overflowing either. */
.djt-figure {
  margin: var(--djt-sp-5) 0;
}

.djt-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--djt-border);
  border-radius: var(--djt-radius-sm);
  background: var(--djt-ink-soft);
}

.djt-figure figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--djt-sp-2);
  margin-top: var(--djt-sp-2);
  color: var(--djt-muted);
  font-size: var(--djt-fs-sm);
  line-height: 1.5;
}

.djt-figure__time {
  flex: none;
  padding: .1rem .45rem;
  border-radius: var(--djt-radius-sm);
  background: var(--djt-ink-soft);
  color: var(--djt-ink-strong);
  font-family: var(--djt-font-mono);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}

/* In the transcript a still sits under its chapter heading, a little smaller so the
 * text stays the main thing on the page. */
.djt-figure--chapter {
  max-width: 30rem;
  margin: 0 0 var(--djt-sp-4);
}