/* =========================================================================
   THE VFX INSTITUTE — v1 BASE
   Reset, layout primitives, type defaults, buttons, the belt (marquee)
   component. Fold-specific layout lives in folds.css; this file is what
   every fold is built out of.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }

/* --- skip link ---------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--sp-2);
  top: -60px;
  z-index: 100;
  background: var(--ink);
  color: var(--void);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-sm);
  font-weight: 600;
  transition: top var(--t-1) var(--ease);
}
.skip-link:focus { top: var(--sp-2); }

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

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

/* --- layout primitives --------------------------------------------------- */
.shell {
  max-width: var(--page);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--brand-lit);
}
.eyebrow::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand-lit);
  box-shadow: 0 0 10px 2px rgba(var(--brand-lit-rgb), 0.75);
}

/* --- buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: 1.05em 1.9em;
  border-radius: var(--r-pill);
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: transform var(--t-1) var(--ease), box-shadow var(--t-1) var(--ease), filter var(--t-1) var(--ease);
}
/* white label, not the dark one: the brand red is dark enough that near-black
   type on it measures under 2:1. White holds 7.92:1 at the gradient's deep end
   and 4.90:1 at its lit end, so the label is legal across the whole sweep.

   The grounds, the badge and the hover for every variant live together in
   folds.css under THE BUTTON — one component, so they cannot drift apart. */

/* =========================================================================
   THE BELT — the repeating marquee ticker. Pure CSS: an outer clip, a track
   that animates translateX(0 -> -50%), and the phrase duplicated exactly
   twice so the loop is seamless with no visible seam or reset-snap.

   Two instances share this component (.belt--hero / .belt--fold2); a
   modifier only changes speed/colour via the --t-belt custom property and a
   colour token, so there is one implementation, not two.
   ========================================================================= */
.belt {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 6%, black 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, black 6%, black 94%, transparent 100%);
}
.belt-track {
  display: flex;
  width: max-content;
  animation: belt-scroll var(--t-belt) linear infinite;
}
.belt-set {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.belt-word {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--track-belt);
  white-space: nowrap;
  padding: 0 0.55em;
}
.belt-dot {
  color: var(--brand-lit);
  padding: 0 0.2em;
}

@keyframes belt-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  /* tokens.css already collapses transition/animation durations to 1ms —
     for a transform-driven loop that still leaves it flickering rather than
     stopped, so the belt needs an explicit off switch: freeze the track and
     drop the duplicate copy so reduced-motion users get one static line. */
  .belt-track { animation: none !important; }
  .belt-set:nth-of-type(2) { display: none; }
}

/* =============================================================================
   SHARED CHECKLIST MARKER — the boxed tick from the On-Campus page's
   "A clear split of who does what" list (.oc-check-list). One definition for
   every text bullet list: course "who is it for" + ledger lists, home and
   Studio-for-Rent tick lists, courses.html card lists, legal pages, blog
   article bodies, and any list given class="check-list".
   Brand red by default; add .check-list--gold for the gold variant.
   ============================================================================= */
.check-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.85rem; }
.cs-console-lines li,
.tdm-checklist li,
.aif-checklist li,
.fov-checklist li,
.gdv-checklist li,
.miv-checklist li,
.mga-checklist li,
.pve-checklist li,
.vca-checklist li,
.mcg-checklist li,
.course-list li,
.course-card-body ul li,
.legal-inner ul li,
.entry-content ul li,
.check-list li {
  position: relative;
  padding-left: 1.9em;
	list-style: none;
}
.cs-console-lines li::before,
.tdm-checklist li::before,
.aif-checklist li::before,
.fov-checklist li::before,
.gdv-checklist li::before,
.miv-checklist li::before,
.mga-checklist li::before,
.pve-checklist li::before,
.vca-checklist li::before,
.mcg-checklist li::before,
.course-list li::before,
.course-card-body ul li::before,
.legal-inner ul li::before,
.entry-content ul li::before,
.check-list li::before,
.tdm-ledger-list li::before,
.aif-ledger-list li::before,
.fov-ledger-list li::before,
.gdv-ledger-list li::before,
.miv-ledger-list li::before,
.mga-ledger-list li::before,
.pve-ledger-list li::before,
.vca-ledger-list li::before,
.mcg-ledger-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.3em;
  width: 1.25em; height: 1.25em;
  border-radius: 4px;
  border: var(--hair) solid rgba(var(--brand-rgb), 0.5);
  background: rgba(var(--brand-rgb), 0.1);
}
.cs-console-lines li::after,
.tdm-checklist li::after,
.aif-checklist li::after,
.fov-checklist li::after,
.gdv-checklist li::after,
.miv-checklist li::after,
.mga-checklist li::after,
.pve-checklist li::after,
.vca-checklist li::after,
.mcg-checklist li::after,
.course-list li::after,
.course-card-body ul li::after,
.legal-inner ul li::after,
.entry-content ul li::after,
.check-list li::after,
.tdm-ledger-list li::after,
.aif-ledger-list li::after,
.fov-ledger-list li::after,
.gdv-ledger-list li::after,
.miv-ledger-list li::after,
.mga-ledger-list li::after,
.pve-ledger-list li::after,
.vca-ledger-list li::after,
.mcg-ledger-list li::after {
  content: '';
  position: absolute;
  left: 0.3em; top: 0.6em;
  width: 0.66em; height: 0.34em;
  border-left: 2.5px solid var(--brand-lit);
  border-bottom: 2.5px solid var(--brand-lit);
  transform: rotate(-45deg);
}
/* ledger rows carry vertical padding, so the box sits lower */
.tdm-ledger-list li::before,
.aif-ledger-list li::before,
.fov-ledger-list li::before,
.gdv-ledger-list li::before,
.miv-ledger-list li::before,
.mga-ledger-list li::before,
.pve-ledger-list li::before,
.vca-ledger-list li::before,
.mcg-ledger-list li::before { top: 0.8rem; }
.tdm-ledger-list li::after,
.aif-ledger-list li::after,
.fov-ledger-list li::after,
.gdv-ledger-list li::after,
.miv-ledger-list li::after,
.mga-ledger-list li::after,
.pve-ledger-list li::after,
.vca-ledger-list li::after,
.mcg-ledger-list li::after { top: calc(0.8rem + 0.3em); }
.check-list--gold li::before { border-color: rgba(var(--gold-rgb), 0.5); background: rgba(var(--gold-rgb), 0.08); }
.check-list--gold li::after { border-color: var(--gold); }

/* blog article body (WordPress .entry-content) — bullet lists get the same
   marker; numbered lists keep their numerals in the brand colour */
.entry-content ul { margin: 0 0 1.25em; padding: 0; list-style: none; }
.entry-content ul li { margin: 0 0 0.6em; line-height: 1.6; }
.entry-content ul li::before { top: 0.3em; }
.entry-content ul li::after { top: 0.65em; }
.entry-content ol { margin: 0 0 1.25em; padding-left: 1.5em; }
.entry-content ol li { margin: 0 0 0.6em; line-height: 1.6; padding-left: 0.25em; }
.entry-content ol li::marker { color: var(--brand-lit); font-weight: 600; }