*, *::before, *::after { box-sizing: border-box; }

:root {
  --bg-deep: #0b0b0b;
  --card: #1f1f1f;
  --card-2: #181818;
  --pink: #e50914;
  --pink-light: #f6121d;
  --text: #fff;
  --text-dim: #d2d2d2;
  --text-muted: #929292;
  --border: rgb(255 255 255 / 10%);
}

html { min-width: 320px; background: var(--bg-deep); color-scheme: dark; font: 16px/1.5 "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { min-height: 100vh; min-height: 100dvh; margin: 0; overflow-x: hidden; background: var(--bg-deep); color: var(--text); -webkit-font-smoothing: antialiased; }
body::before, body::after { position: fixed; z-index: -1; width: 680px; height: 680px; content: ""; pointer-events: none; }
body::before { top: -300px; right: -230px; background: radial-gradient(circle, rgb(229 9 20 / 24%), transparent 62%); }
body::after { bottom: -280px; left: -220px; background: radial-gradient(circle, rgb(229 9 20 / 14%), transparent 62%); }

.hero { width: min(calc(100% - 32px), 400px); margin: 0 auto; padding: clamp(36px, 8vw, 86px) 0 20px; }
.player-shell { position: relative; width: 100%; max-width: 400px; margin: 0 auto; border: 1px solid rgb(255 255 255 / 14%); border-radius: 12px; background: radial-gradient(circle at 50% 42%, rgb(229 9 20 / 10%), transparent 35%), #050505; box-shadow: 0 20px 52px rgb(0 0 0 / 55%); }

.availability-notice { width: min(calc(100% - 32px), 1120px); margin: 8px auto 0; padding: 14px 17px; display: flex; align-items: flex-start; gap: 11px; border: 1px solid rgb(229 9 20 / 36%); border-radius: 12px; background: linear-gradient(135deg, rgb(229 9 20 / 16%), rgb(229 9 20 / 5%)); color: var(--text-dim); }
.availability-notice svg { width: 17px; flex: 0 0 auto; margin-top: 3px; color: var(--pink-light); }
.availability-notice p { margin: 0; font-size: .88rem; font-weight: 600; line-height: 1.55; }

.content-section { width: min(calc(100% - 32px), 1120px); margin: 0 auto; padding: clamp(36px, 7vw, 58px) 0 0; }
h1, h2 { margin: 0 0 18px; display: flex; align-items: center; gap: 12px; font-size: clamp(1.25rem, 3vw, 1.45rem); font-weight: 800; letter-spacing: -.01em; }
h1::before, h2::before { width: 4px; height: 23px; flex: 0 0 auto; border-radius: 3px; background: var(--pink); content: ""; }
.instructor-card { display: flex; align-items: flex-start; gap: 24px; padding: 24px; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(150deg, var(--card), var(--card-2)); }
.instructor-photo { width: 220px; flex: 0 0 auto; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: #111; }
.instructor-photo img { display: block; width: 100%; height: 250px; object-fit: cover; object-position: 50% 18%; }
.instructor-content { min-width: 0; }
.instructor-content p { margin: 0; color: var(--text-dim); font-size: .94rem; line-height: 1.66; }
.instructor-content .instructor-name { margin-bottom: 4px; color: var(--text); font-size: 1.25rem; font-weight: 800; line-height: 1.3; }
.instructor-content .instructor-role { margin-bottom: 15px; color: var(--pink-light); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.section-intro { margin: 0 0 16px; color: var(--text-muted); font-size: .88rem; line-height: 1.55; }
.reference-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: references; }
.reference-grid li { min-height: 100%; padding: 17px 18px; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(150deg, var(--card), var(--card-2)); color: var(--text-dim); font-size: .8rem; line-height: 1.58; counter-increment: references; }
.reference-grid li::before { width: 26px; height: 26px; margin-bottom: 9px; display: grid; place-items: center; border-radius: 7px; background: rgb(229 9 20 / 16%); color: var(--pink-light); content: counter(references); font-size: .82rem; font-weight: 800; }
.reference-grid em { color: var(--text-muted); }

.site-footer { margin-top: 46px; border-top: 1px solid var(--border); padding: 40px 16px 48px; }
.footer-inner { width: min(100%, 1120px); margin: 0 auto; display: grid; gap: 13px; }
.footer-brand { color: var(--pink); font-size: 1.1rem; font-weight: 900; letter-spacing: -.02em; text-transform: uppercase; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px; color: var(--text-muted); }
.site-footer a { color: var(--text-dim); font-size: .76rem; font-weight: 600; text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--pink-light); text-decoration: underline; }
.site-footer p { max-width: 840px; margin: 0; color: var(--text-muted); font-size: .7rem; line-height: 1.7; }

@media (max-width: 640px) { .hero { width: min(calc(100% - 32px), 400px); padding-top: 40px; } .instructor-card { flex-direction: column; align-items: center; text-align: center; } .instructor-photo { width: min(100%, 240px); } .reference-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }