/* Public funnel. Mobile first. Every colour is a brand or semantic variable from base.css and
   the layout, so light and dark both work for any brand. Display type comes from --font-display,
   which is a single-weight face for most brands, so headings here are weight 400. */

body.public { overflow-x: hidden; }
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; line-height: 0.98; }
.lead { font-size: 18px; line-height: 1.5; max-width: 640px; }
.eyebrow span { color: var(--muted); }

/* ---------- top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 40; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.menu-toggle { justify-self: start; width: 40px; height: 40px; padding: 0; background: none; border: 0; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.menu-icon { display: inline-flex; flex-direction: column; justify-content: space-between; width: 22px; height: 14px; }
.menu-icon span { display: block; height: 2px; background: currentColor; border-radius: 1px; }
.brand-lock { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
/* Single-colour logos with alpha are painted in --ink through a mask, so a white logo shows on a
   light page and a black logo shows on a dark one. The img keeps the size and the alt text. */
.logo-mask { display: inline-block; background: var(--ink); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.logo-mask img { height: 32px; width: auto; max-width: 150px; opacity: 0; display: block; }
.brand-creators { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; }
.utility { justify-self: end; display: inline-flex; align-items: center; gap: 14px; }
.casting { display: none; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); align-items: center; gap: 8px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); display: inline-block; flex: none; }
.dot.live { background: var(--accent2, var(--accent)); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.theme-toggle { color: var(--ink); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .tt-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .tt-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .tt-moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .tt-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .tt-moon { display: none; }
@media (min-width: 720px) {
  .topbar { padding: 14px 32px; }
  .logo-mask img { height: 40px; max-width: 200px; }
  .casting { display: inline-flex; }
}

/* ---------- menu overlay ---------- */
.menu-overlay { position: fixed; inset: 0; z-index: 100; background: var(--ink); color: var(--bg); overflow-y: auto; animation: fade 0.18s ease; }
.menu-overlay[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.menu-close { position: absolute; top: 10px; left: 12px; width: 44px; height: 44px; background: none; border: 0; color: inherit; cursor: pointer; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
.menu-close:hover { background: color-mix(in srgb, var(--bg) 10%, transparent); }
.menu-panel { max-width: 720px; margin: 0 auto; padding: 84px 24px 48px; display: flex; flex-direction: column; }
.menu-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; padding-bottom: 20px; margin-bottom: 8px; border-bottom: 1px solid color-mix(in srgb, var(--bg) 18%, transparent); }
.menu-eyebrow span { opacity: 0.55; }
.menu-item { display: flex; gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid color-mix(in srgb, var(--bg) 10%, transparent); color: inherit; text-decoration: none; font-family: var(--font-display); font-size: clamp(28px, 7vw, 44px); line-height: 1; letter-spacing: -0.01em; transition: padding-left 0.2s ease, opacity 0.15s ease; }
.menu-item:hover { padding-left: 8px; opacity: 0.75; }
.menu-num { font-family: var(--font-mono); font-size: 12px; opacity: 0.5; width: 40px; flex: none; letter-spacing: 0.08em; }
.menu-links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 28px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.menu-links a { color: inherit; opacity: 0.7; text-decoration: none; }
.menu-links a:hover { opacity: 1; }
.menu-foot { display: inline-flex; align-items: center; gap: 8px; margin-top: 36px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; }
body.menu-open { overflow: hidden; }

/* ---------- hero ---------- */
.hero { padding: 40px 0 52px; }
.hero-eyebrow { display: flex; align-items: center; gap: 10px; }
.hero-title { font-size: clamp(42px, 11.5vw, 128px); margin: 14px 0 22px; max-width: 12ch; }
.hero-lead { font-size: 18px; line-height: 1.45; max-width: 620px; margin: 0 0 28px; }
.hero-lead strong { font-weight: 600; }
/* Flex, not the base grid: the box shrinks to however many counters the brand shows, cells
   grow to fill their row, and a wrap never leaves an empty track. Hairlines are each cell's
   left and top border, pulled 1px outward so later cells paint them over earlier ones and the
   first row and column tuck under the outer border. */
.hero-counters { display: flex; flex-wrap: wrap; gap: 0; width: fit-content; max-width: 100%; margin: 0 0 28px; background: transparent; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.hero-counters .counter { flex: 1 1 150px; min-width: 150px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); margin: -1px 0 0 -1px; }
.hero-cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.btn.lg { padding: 18px 28px; font-size: 13px; }
.scroll-hint { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.scroll-hint:hover { color: var(--ink); }
@media (min-width: 900px) {
  .hero { padding: 80px 0 88px; }
  .hero-title { margin: 18px 0 28px; }
  .hero-lead { font-size: 20px; margin-bottom: 36px; }
  .hero-counters { margin-bottom: 36px; }
}

/* ---------- sections ---------- */
.section { border-top: 1px solid var(--line); padding: 64px 0; }
.section-head { margin-bottom: 32px; max-width: 860px; }
.section-title { font-size: clamp(40px, 10vw, 96px); margin: 10px 0 14px; }
.section-sub { font-size: 17px; line-height: 1.5; color: var(--muted); max-width: 620px; margin: 0; }
.section-bad .section-title { color: var(--bad); }
@media (min-width: 900px) {
  .section { padding: 112px 0; }
  .section-head { margin-bottom: 48px; }
}

/* ---------- video tiles ---------- */
.tiles { display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0 16px; padding: 4px 16px 16px; margin: 0 -16px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.tile { flex: 0 0 76vw; max-width: 320px; scroll-snap-align: start; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.tile .video-tile { border-radius: 0; flex: none; }
.tile-body { padding: 14px 16px 16px; }
.tile-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.tile-head .eyebrow { margin: 0; white-space: nowrap; }
.tile-good .tier { color: var(--good); }
.tile-bad .tier { color: var(--bad); }
.tile .chip { white-space: normal; text-align: left; }
.tile-note { margin: 12px 0 0; padding: 10px 12px; font-size: 13px; line-height: 1.45; font-style: italic; color: var(--muted); border-left: 2px solid var(--line); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.tile-good .tile-note { border-left-color: var(--good); }
.tile-bad .tile-note { border-left-color: var(--bad); }
.unmute { position: absolute; right: 8px; bottom: 8px; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(0, 0, 0, 0.55); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.unmute svg { width: 18px; height: 18px; }
.unmute .vu-on, .unmute .vu-off { display: none; }
.unmute[data-state="muted"] .vu-off { display: block; }
.unmute[data-state="unmuted"] .vu-on { display: block; }
.unmute[data-state="unmuted"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
@media (min-width: 900px) {
  .tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; overflow: visible; padding: 0; margin: 0; }
  .tile { flex: none; max-width: none; }
}

/* ---------- teaching list (shown until graded examples exist) ---------- */
.teach { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); max-width: 860px; }
.teach li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: clamp(18px, 2.4vw, 24px); line-height: 1.3; font-weight: 500; }
.teach-num { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; }
.teach-good .teach-num { color: var(--good); }
.teach-bad .teach-num { color: var(--bad); }

/* ---------- rubric ---------- */
.rubric { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.rubric-card { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 22px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); align-items: start; }
.rubric-num { font-family: var(--font-mono); font-size: 16px; font-weight: 700; line-height: 1.3; }
.rubric-card h3 { font-size: 17px; margin: 0 0 6px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; line-height: 1.3; }
.rubric-card p { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 0; }
.rubric-card.required { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.rubric-pass { margin: 16px 0 0; }
@media (min-width: 640px) { .rubric { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .rubric { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- apply form ---------- */
.apply-form { max-width: 880px; display: flex; flex-direction: column; gap: 36px; }
.apply-form[hidden] { display: none; }
.form-block { border: 0; margin: 0; padding: 26px 0 0; border-top: 1px solid var(--line); min-width: 0; }
.form-block[hidden] { display: none; }
.form-legend { float: left; width: 100%; padding: 0; margin: 0 0 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); display: flex; gap: 10px; align-items: center; }
.form-legend span { background: var(--ink); color: var(--bg); padding: 2px 8px; border-radius: 2px; }
.form-fields { clear: both; }
.block-hint { margin: 0 0 16px; }
.apply-form .field { margin-bottom: 14px; }
.apply-form .track-card { font-family: var(--font-body); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.4; padding-left: 46px; }
.apply-form .track-card::before { content: ''; position: absolute; left: 18px; top: 20px; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); }
.apply-form .track-card:has(input:checked)::before { border: 5px solid var(--bg); background: var(--accent); }
.field-error { color: var(--bad); font-size: 13px; margin: 0; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--bad); }
.form-foot { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; border-top: 1px solid var(--line); padding-top: 26px; }
.form-foot .field { margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.status-msg:empty { display: none; }
.contact-strip { margin-top: 32px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); max-width: 880px; display: flex; flex-direction: column; gap: 6px; }
.contact-strip .eyebrow { margin: 0; }
.contact-strip a { font-size: 18px; text-decoration: none; border-bottom: 1px solid var(--ink); align-self: flex-start; }
.success-card { max-width: 720px; }
.success-card[hidden] { display: none; }
.success-card .section-title { margin-bottom: 18px; }
.approved-line { font-weight: 600; }
.approved-line[hidden] { display: none; }

/* ---------- narrow pages: applied, recover ---------- */
.narrow-page { padding: 56px 0 80px; }
.narrow-page .back-row { margin-top: 28px; }
.recover h1 { font-size: clamp(40px, 9vw, 64px); margin: 8px 0 14px; }
.recover-form { max-width: 460px; margin-top: 24px; }
.recover-foot { margin-top: 32px; }

/* ---------- legal ---------- */
.legal { padding: 48px 0 80px; }
.legal h1 { font-size: clamp(36px, 8vw, 64px); margin: 8px 0 8px; }
.legal-updated { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 28px; }
.legal-lead { font-size: 17px; line-height: 1.6; margin: 0 0 32px; }
.legal section { border-top: 1px solid var(--line); padding: 28px 0 10px; }
.legal h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 4vw, 32px); margin: 0 0 12px; letter-spacing: -0.01em; }
.legal h3 { font-size: 16px; margin: 18px 0 6px; }
.legal p, .legal li { font-size: 15px; line-height: 1.65; }
.legal ul { padding-left: 20px; margin: 0 0 14px; }
.legal li { margin-bottom: 6px; }
.legal .back-row { margin-top: 32px; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding: 28px 0 40px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.foot-grid { display: grid; gap: 12px; }
.foot-brand { font-weight: 700; }
.foot-links { display: flex; gap: 18px; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }
.foot-recover { margin: 8px 0 0; text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: 14px; color: var(--muted); }
.foot-recover a { color: var(--ink); }
@media (min-width: 900px) {
  .foot-grid { grid-template-columns: auto 1fr auto; align-items: center; }
  .foot-line { text-align: center; }
  .foot-recover { grid-column: 1 / -1; }
}