/* ============================================================
   Stray Dog Media — Components
   Sibling to strAI.ca: shares its class conventions (.eyebrow,
   .btn-primary/.btn-ghost, #nav, .gs-reveal, mobile menu, lang
   + theme toggles, Formspree contact form) but carries SDM's own
   black-and-red brand and its refined-but-dangerous personality.
   All values come from tokens.css.
   ============================================================ */

/* ---- .stage — force the black canvas -----------------------
   The brand lives in the dark. Any section marked .stage stays
   film black in BOTH themes: it redefines the semantic tokens
   for its own subtree, so every child component follows without
   a single override. Use for the hero and the red-band moments. */
.stage {
  --bg: var(--sdm-black);
  --bg-elevated: #141111;
  --bg-sunken: #050404;
  --surface: #141111;
  --surface-2: #1C1918;
  --border: #272220;
  --border-strong: #3A3331;
  --text: #F4F1EC;
  --text-muted: #A9A19B;
  --text-subtle: #7B7370;
  --accent-text: var(--sdm-red-hot);
  background: var(--bg);
  color: var(--text);
}

/* ---- Nav -------------------------------------------------- */
#nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(140%) blur(14px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
#nav.scrolled { border-bottom-color: var(--border); background: color-mix(in srgb, var(--bg) 94%, transparent); }
/* Hairline of red under the nav — the leash. */
#nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--grad-red); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
#nav.scrolled::after { transform: scaleX(1); }

.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 4.25rem; }
.logo { display: inline-flex; align-items: center; gap: 0.6em; text-decoration: none; color: var(--text); cursor: pointer; }
.logo img { width: 34px; height: 34px; border-radius: var(--radius-xs); }
.logo .wordmark {
  font-family: var(--font-display); font-weight: 800; font-stretch: var(--display-width);
  text-transform: uppercase; letter-spacing: 0.01em; font-size: 1.02rem;
}
.logo .wordmark b { color: var(--accent-text); font-weight: 800; }

.nav-links { display: flex; align-items: center; gap: var(--space-md); }
.nav-links a {
  position: relative;
  font-family: var(--font-mono); font-size: 0.76rem;
  text-transform: uppercase; letter-spacing: 0.14em;
  text-decoration: none; color: var(--text-muted);
  padding-block: 0.4em;
  transition: color var(--dur-fast);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.active { color: var(--text); }
.nav-links a.active::after { transform: scaleX(1); }
.nav-right { display: flex; align-items: center; gap: var(--space-sm); }
@media (max-width: 52rem) { .nav-links { display: none; } }

/* Language button */
.lang-btn {
  font-family: var(--font-mono); font-size: var(--step--1);
  padding: 0.4em 0.7em; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border-strong); cursor: pointer;
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.lang-btn:hover { border-color: var(--accent); color: var(--accent-text); background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* Theme toggle */
.theme-toggle {
  display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem;
  border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); cursor: pointer;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent-text); }
.theme-toggle .sun { display: none; }
.theme-toggle .moon { display: block; }
:root[data-theme="light"] .theme-toggle .sun { display: block; }
:root[data-theme="light"] .theme-toggle .moon { display: none; }

/* Mobile menu */
.mobile-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; }
.mobile-toggle span { display: block; width: 24px; height: 2px; background: var(--text); transition: transform var(--dur-fast), opacity var(--dur-fast); }
.mobile-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); background: var(--accent); }
.mobile-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); background: var(--accent); }
.mobile-menu {
  display: none; flex-direction: column; gap: var(--space-xs);
  padding: var(--space-md) var(--gutter) var(--space-lg);
  background: color-mix(in srgb, var(--bg) 97%, transparent);
  border-bottom: 1px solid var(--border);
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  text-decoration: none; color: var(--text);
  font-family: var(--font-display); font-weight: 800; font-stretch: var(--display-width);
  text-transform: uppercase; font-size: var(--step-2); line-height: 1.1; padding: 0.18em 0;
}
.mobile-menu a:hover { color: var(--accent-text); }
@media (max-width: 52rem) { .mobile-toggle { display: flex; } }

/* ---- Eyebrow / kicker ------------------------------------ */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.7em;
  max-width: none;   /* it's a label, not prose — ignore the 62ch measure */
  font-family: var(--font-mono); font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--accent-text);
}
.eyebrow::before { content: ""; width: 2em; height: 3px; background: var(--accent); flex: none; }

/* ---- Buttons ----------------------------------------------
   Cut corners, no float. Primary is a red block; ghost fills
   with red on hover instead of just changing colour. */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--font-display); font-weight: 700; font-stretch: var(--display-width);
  text-transform: uppercase; letter-spacing: 0.04em;
  font-size: var(--step-0); line-height: 1; padding: 0.95em 1.6em;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast), border-color var(--dur-fast),
              color var(--dur-fast), box-shadow var(--dur-fast);
}
.btn-primary { background: var(--accent); color: var(--accent-contrast); box-shadow: var(--shadow-accent); }
.btn-primary:hover { background: var(--sdm-red-deep); color: var(--accent-contrast); box-shadow: var(--glow-red); }
.btn-solid { background: var(--text); color: var(--text-invert); }
.btn-solid:hover { background: var(--accent); color: var(--accent-contrast); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-contrast); background: var(--accent); }
/* nowrap keeps buttons crisp, but a long label on a narrow screen would
   otherwise push the whole page wider than the viewport. Let them wrap. */
@media (max-width: 34rem) {
  .btn { white-space: normal; text-align: center; }
  .hero-cta .btn { width: 100%; justify-content: center; }
}
.btn-sm { font-size: var(--step--1); padding: 0.7em 1.15em; }
.btn-lg { font-size: var(--step-1); padding: 1.05em 1.9em; }

/* ---- Chips ----------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-mono); font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.4em 0.85em; border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border);
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.chip:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); color: var(--text); }
.chip-accent {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-text);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

/* ---- Cards -------------------------------------------------
   Flat, squared, hairline border. The only ornament is a red
   rule that cuts across the top edge on hover. */
.card {
  position: relative;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: var(--space-lg);
  transition: border-color var(--dur), background var(--dur), transform var(--dur) var(--ease-out);
}
.card-interactive { overflow: hidden; }
.card-interactive:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: var(--bg-elevated);
}
.card-interactive::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: var(--grad-red); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.card-interactive:hover::before { transform: scaleX(1); }
.card-index {
  font-family: var(--font-mono); color: var(--text-subtle);
  font-size: var(--step--1); letter-spacing: 0.1em;
}
.card-icon { width: 2.4rem; height: 2.4rem; color: var(--accent); margin-bottom: var(--space-sm); }
.card-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; }
.card-title { font-size: var(--step-2); margin-top: var(--space-xs); }
.card-body { color: var(--text-muted); margin-top: var(--space-2xs); }

/* ---- Grid ------------------------------------------------ */
.grid { display: grid; gap: var(--space-md); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }

/* ---- Hero --------------------------------------------------
   Always the black stage, in both themes. Red bloom top-right,
   the dog holding the frame, grain over the whole thing. */
.hero {
  position: relative; overflow: clip;
  padding-block: var(--space-2xl) var(--space-2xl);
  border-bottom: 1px solid var(--border);
}
.hero-inner { position: relative; z-index: 2; max-width: 54rem; }
.hero-title { font-size: var(--step-5); }
.hero-title .accent { color: var(--accent-text); }
/* The tagline, knifed out on red — the hero's one loud object. */
.hero-tag {
  margin-top: var(--space-md);
  font-family: var(--font-display); font-weight: 800; font-stretch: var(--display-width);
  text-transform: uppercase; letter-spacing: 0.01em;
  font-size: var(--step-1); line-height: 1.25;
}
.hero-sub { margin-top: var(--space-md); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }

/* Red bloom behind the frame */
.hero::before {
  content: ""; position: absolute; z-index: 0; top: -25%; right: -8%;
  width: 46rem; height: 46rem; border-radius: 50%;
  background: var(--bloom); filter: blur(20px); pointer-events: none;
}


/* The mascot. Stands on the hero's bottom edge, right of the copy.
   The asset is a tight portrait crop (~449x718), so size it by HEIGHT
   and let width follow — sizing by width leaves it floating and small.
   Hidden below 60rem so it never crowds the headline. */
.hero-dog {
  position: absolute; z-index: 1; right: 4%; bottom: 0;
  height: clamp(20rem, 42vw, 34rem); width: auto;
  object-fit: contain; object-position: bottom center;
  /* Red rim-light so a warm brown dog reads against film black. */
  filter: drop-shadow(0 0 70px color-mix(in srgb, var(--accent) 55%, transparent))
          drop-shadow(0 0 6px rgba(0,0,0,0.8))
          contrast(1.06) saturate(1.06);
  pointer-events: none; user-select: none;
}
@media (max-width: 60rem) {
  .hero-dog { display: none; }
  .hero-inner { max-width: none; }
}

/* ---- Spec row ----------------------------------------------
   The four-up capability strip from the brand art: red icon,
   mono caps label, one line of detail, hairline dividers. */
.spec-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0; border-block: 1px solid var(--border);
}
.spec {
  padding: var(--space-md) var(--space-md) var(--space-md) 0;
  border-right: 1px solid var(--border);
}
.spec:last-child { border-right: 0; }
@media (max-width: 44rem) {
  .spec { border-right: 0; border-bottom: 1px solid var(--border); padding-right: 0; }
  .spec:last-child { border-bottom: 0; }
}
.spec-icon { width: 1.8rem; height: 1.8rem; color: var(--accent); margin-bottom: var(--space-xs); }
.spec-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; }
.spec-label {
  font-family: var(--font-display); font-weight: 800; font-stretch: var(--display-width);
  text-transform: uppercase; letter-spacing: 0.02em; font-size: var(--step-0);
  color: var(--text);
}
.spec-detail {
  font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.55;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-subtle); margin-top: 0.35em; max-width: 22ch;
}

/* ---- Red band ----------------------------------------------
   The loud interruption. Solid red, white type, used once or
   twice a page maximum — it is the bark. */
.band-red {
  background: var(--grad-red); color: #fff;
  border-block: 1px solid color-mix(in srgb, #000 25%, var(--sdm-red-deep));
}
.band-red h2, .band-red h3, .band-red .lead, .band-red p { color: #fff; }
.band-red .eyebrow { color: rgba(255,255,255,0.85); }
.band-red .eyebrow::before { background: #fff; }
.band-red .btn-ghost { border-color: rgba(255,255,255,0.55); color: #fff; }
.band-red .btn-ghost:hover { background: #fff; color: var(--sdm-red-deep); border-color: #fff; }
.band-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-lg); }

/* ---- Audience strip -------------------------------------- */
.audience { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.audience .chip { font-size: var(--step--1); }

/* ---- Forms / contact ------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-xl); align-items: start; }
@media (max-width: 52rem) { .contact-grid { grid-template-columns: 1fr; gap: var(--space-lg); } }
.contact-methods { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-md); }
.contact-method { display: flex; align-items: center; gap: var(--space-sm); text-decoration: none; color: var(--text); padding: var(--space-xs) 0; }
.contact-method-icon { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; flex: none; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); transition: border-color var(--dur-fast); }
.contact-method:hover .contact-method-icon { border-color: var(--accent); }
.contact-method-icon svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: var(--accent); stroke-width: 2; }
.contact-method-label { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-subtle); }
.contact-method-text { font-weight: 600; }

.contact-form-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-lg); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
@media (max-width: 34rem) { .form-row { grid-template-columns: 1fr; } }
.form-group { display: flex; flex-direction: column; gap: 0.4em; margin-bottom: var(--space-sm); }
.form-group label {
  font-family: var(--font-mono); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-subtle);
}
.form-group input, .form-group select, .form-group textarea {
  font-family: var(--font-body); font-size: var(--step-0); color: var(--text);
  background: var(--bg-sunken); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 0.75em 0.85em; width: 100%;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring);
}
.form-group textarea { resize: vertical; min-height: 6rem; }
.form-submit { margin-top: var(--space-sm); }
.form-success { display: none; text-align: center; padding: var(--space-lg) 0; }
.form-success.show { display: block; }
.form-success-icon { font-size: 2.4rem; }

/* ---- Cross-link band (twin to strAI) --------------------- */
.twin-band { background: var(--bg-sunken); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.twin-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-lg); }
.twin-inner .twin-copy { max-width: 44ch; }

/* ---- Footer ---------------------------------------------- */
footer { border-top: 1px solid var(--border); padding-block: var(--space-xl); color: var(--text-muted); position: relative; }
footer::before { content: ""; position: absolute; left: 0; top: -1px; width: 6rem; height: 3px; background: var(--accent); }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); }
.footer-logo {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--font-display); font-weight: 800; font-stretch: var(--display-width);
  text-transform: uppercase; color: var(--text); text-decoration: none;
}
.footer-logo img { width: 28px; height: 28px; border-radius: var(--radius-xs); }
footer a { color: var(--text-muted); text-decoration: none; }
footer a:hover { color: var(--accent-text); }
.footer-strai a { color: var(--accent-text); font-weight: 600; }

/* ---- GSAP reveals (JS pre-hides, GSAP animates in) -------- */
.gs-reveal { opacity: 0; transform: translateY(24px); }
.gs-reveal-left { opacity: 0; transform: translateX(-28px); }
.gs-reveal-right { opacity: 0; transform: translateX(28px); }
/* Fallback if GSAP fails / reduced motion: never leave content hidden */
.no-gsap .gs-reveal, .no-gsap .gs-reveal-left, .no-gsap .gs-reveal-right { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .gs-reveal, .gs-reveal-left, .gs-reveal-right { opacity: 1 !important; transform: none !important; }
}

/* ---- Cursor glow (desktop, red) -------------------------- */
.cursor-glow {
  position: fixed; width: 420px; height: 420px; border-radius: 50%; pointer-events: none;
  z-index: 0; opacity: 0; transform: translate(-50%, -50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 13%, transparent), transparent 62%);
  transition: opacity var(--dur) var(--ease-out);
}

/* ---- Portfolio reels ------------------------------------- */
.reel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: var(--space-md); }
.reel {
  position: relative; display: block; border-radius: var(--radius-md);
  overflow: hidden; border: 1px solid var(--border); background: var(--surface-2);
  aspect-ratio: 16 / 9; cursor: pointer; text-decoration: none; color: #fff;
  transition: border-color var(--dur), transform var(--dur) var(--ease-out), box-shadow var(--dur);
}
.reel:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: var(--shadow-lg);
}
.reel--featured { grid-column: 1 / -1; aspect-ratio: 16 / 7; }
@media (max-width: 40rem) { .reel--featured { aspect-ratio: 16 / 9; } }
.reel__media, .reel__vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.reel__vid { opacity: 0; transition: opacity var(--dur) var(--ease-out); }
.reel.is-playing .reel__vid { opacity: 1; }
.reel__scrim { position: absolute; inset: 0; pointer-events: none; background: var(--grad-scrim); }
.reel__overlay { position: absolute; inset: auto 0 0 0; padding: var(--space-md); display: flex; flex-direction: column; gap: 0.4rem; }
.reel__cat {
  align-self: flex-start; font-family: var(--font-mono); font-size: 0.66rem;
  text-transform: uppercase; letter-spacing: 0.14em;
  padding: 0.3em 0.7em; border-radius: var(--radius-sm);
  background: var(--accent); color: #fff;
}
.reel__title {
  font-family: var(--font-display); font-weight: 800; font-stretch: var(--display-width);
  text-transform: uppercase; font-size: var(--step-1); line-height: 1.05; color: #fff;
}
.reel__full {
  align-self: flex-start; margin-top: 0.2rem; font-family: var(--font-mono);
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: #fff; text-decoration: none; opacity: 0.85;
  border-bottom: 2px solid var(--accent);
}
.reel__full:hover { color: #fff; opacity: 1; }
.reel__badge {
  position: absolute; top: var(--space-sm); right: var(--space-sm);
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.3em 0.6em; border-radius: var(--radius-sm);
  background: rgba(5,4,4,0.62); color: #fff; backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.14);
}
.reel__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff;
  box-shadow: var(--shadow-accent);
  transition: opacity var(--dur), transform var(--dur) var(--ease-out); pointer-events: none;
}
.reel.is-playing .reel__play { opacity: 0; transform: translate(-50%,-50%) scale(0.6); }
.reel__play svg { width: 1.3rem; height: 1.3rem; fill: currentColor; margin-left: 2px; }

/* ---- Style-guide-only helpers ---------------------------- */
.swatch { border-radius: var(--radius-md); border: 1px solid var(--border); overflow: hidden; }
.swatch-chip { height: 5.5rem; }
.swatch-meta { padding: 0.7rem 0.85rem; font-family: var(--font-mono); font-size: 0.78rem; background: var(--surface); }
.swatch-meta b { display: block; font-weight: 700; margin-bottom: 0.15rem; letter-spacing: 0.02em; }
.swatch-meta span { color: var(--text-subtle); }

/* ============================================================
   v0.4 — "the record"
   Components for the repositioning: the site is the front door
   to an ongoing video archive of the Haut-Saint-Laurent, not a
   services brochure. Everything below is built on the same
   tokens; nothing here introduces a new colour.
   ============================================================ */

/* ---- Reel hero ---------------------------------------------
   The showreel plays behind the name. Text legibility comes
   first: the veil is deliberately heavy, because a hero nobody
   can read is just a screensaver. */
.hero--reel {
  display: flex; align-items: center;
  min-height: min(88vh, 50rem);
  padding-block: var(--space-2xl);
}
.hero-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Desaturated and dimmed so the red brand marks stay the
     loudest thing on screen, not the footage. */
  filter: grayscale(0.3) contrast(1.12) brightness(0.62);
}
.hero-veil {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(to right, rgba(10,9,9,0.94) 0%, rgba(10,9,9,0.78) 46%, rgba(10,9,9,0.35) 100%),
    linear-gradient(to top, rgba(10,9,9,0.95) 0%, rgba(10,9,9,0.15) 45%);
}
/* On phones the copy spans the full width, so the left-to-right veil
   above leaves the right side bright under the text. Go vertical and
   darker: legibility beats seeing more of the footage. */
@media (max-width: 60rem) {
  .hero-veil {
    background: linear-gradient(to bottom,
      rgba(10,9,9,0.88) 0%, rgba(10,9,9,0.74) 38%, rgba(10,9,9,0.96) 100%);
  }
  .hero--reel { min-height: min(76vh, 38rem); }
}

/* The reel hero already carries the footage — the accent bloom
   would only muddy it. */
.hero--reel::before { display: none; }

/* ---- Wordmark ----------------------------------------------
   The name, finally at full size. This is the single largest
   type on the site and nothing else may compete with it. */
.wordmark-xl {
  font-family: var(--font-display);
  font-weight: 900; font-stretch: var(--display-width);
  text-transform: uppercase;
  font-size: clamp(2.05rem, 8.4vw, 7rem);
  line-height: 0.86;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}
.wordmark-xl .accent { color: var(--accent-text); }

/* ---- Stat strip --------------------------------------------
   The proof. Mono numerals so the digits align in a row and the
   count-up animation doesn't reflow the layout as it ticks. */
.stat-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-md) var(--space-lg);
}
.stat-num {
  font-family: var(--font-display);
  font-weight: 900; font-stretch: var(--display-width);
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1; color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-family: var(--font-mono); font-size: 0.74rem;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-muted); margin-top: 0.5em; max-width: 20ch;
}

/* ---- Latest from the channel -------------------------------
   Facade cards: a thumbnail and a play button, nothing more.
   The real YouTube player is only injected on click, so the
   page stays fast and sets no YouTube cookies for visitors who
   never press play. See renderLatestVideos() in main.js. */
.yt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--space-md); }
.yt-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); overflow: hidden;
  text-decoration: none; color: var(--text); cursor: pointer;
  transition: border-color var(--dur), transform var(--dur) var(--ease-out);
}
.yt-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.yt-card__frame { position: relative; aspect-ratio: 16 / 9; background: var(--bg-sunken); }
.yt-card__thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-card__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-card__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 3.2rem; height: 3.2rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff; box-shadow: var(--shadow-accent);
  transition: transform var(--dur) var(--ease-out);
}
.yt-card:hover .yt-card__play { transform: translate(-50%,-50%) scale(1.08); }
.yt-card__play svg { width: 1.2rem; height: 1.2rem; fill: currentColor; margin-left: 2px; }
.yt-card__body { padding: var(--space-sm) var(--space-sm) var(--space-md); }
.yt-card__date {
  font-family: var(--font-mono); font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-subtle);
}
.yt-card__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--step-0); line-height: 1.25; margin-top: 0.35em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Subscribe button. Deliberately YouTube's own red, not the SDM
   red — on a platform affordance, recognition beats brand purity. */
.btn-yt { background: #FF0000; color: #fff; border-color: #FF0000; }
.btn-yt:hover { background: #cc0000; border-color: #cc0000; color: #fff; }
.btn-yt svg { width: 1.3em; height: 1.3em; fill: currentColor; }

/* ---- Marquee -----------------------------------------------
   A slow ribbon of everything on the record. Two identical
   tracks side by side; translating one full track width and
   looping makes the seam invisible. */
.marquee {
  overflow: hidden; border-block: 1px solid var(--border);
  padding-block: var(--space-sm); background: var(--bg-sunken);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: marquee 46s linear infinite; }
.marquee__group { display: flex; gap: var(--space-lg); padding-right: var(--space-lg); flex: none; }
.marquee__item {
  font-family: var(--font-display); font-weight: 800; font-stretch: var(--display-width);
  text-transform: uppercase; font-size: var(--step-1);
  color: var(--text-subtle); white-space: nowrap;
}
.marquee__item::after { content: "◆"; color: var(--accent); margin-left: var(--space-lg); font-size: 0.5em; vertical-align: middle; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
}

/* ---- Archive categories ------------------------------------ */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--space-sm); }
.cat {
  display: flex; align-items: baseline; gap: 0.6em;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); text-decoration: none; color: var(--text);
  transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.cat:hover { border-color: var(--accent); background: var(--bg-elevated); color: var(--text); transform: translateX(3px); }
.cat__name {
  font-family: var(--font-display); font-weight: 800; font-stretch: var(--display-width);
  text-transform: uppercase; font-size: var(--step-0);
}
.cat__count { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-subtle); margin-left: auto; }

/* ---- Invite steps ------------------------------------------
   Numbered, deliberately short. The whole point is that asking
   feels like no work at all. */
.invite-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-lg); counter-reset: step; }
.step { counter-increment: step; position: relative; padding-top: var(--space-md); border-top: 2px solid var(--border); }
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; top: calc(-1 * var(--space-md)); left: 0;
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.14em; color: var(--accent);
}
.step h3 { font-size: var(--step-1); }
.step p { color: var(--text-muted); margin-top: var(--space-2xs); font-size: var(--step--1); }

/* ---- Section head helper ----------------------------------- */
.section-head { margin-bottom: var(--space-lg); }
.section-head h2 { font-size: var(--step-3); margin-top: var(--space-2xs); }
.section-head .lead { margin-top: var(--space-sm); }