@import url('https://fonts.googleapis.com/css2?family=Anton&family=DM+Mono:wght@300;400;500&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/tabler-icons/2.47.0/iconfont/tabler-icons.min.css');

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
}

html, body {
  width: 100%;
  min-height: 100vh;
  background: #0a0a0a;
  font-family: 'DM Mono', monospace;
  color: #f5f3ee;
  cursor: none;
  overflow-x: hidden;
}

/* --- Global Components --- */

/* --- Custom Scrollbar --- */

::-webkit-scrollbar {
  width: 2px; /* Extremely thin */
}
::-webkit-scrollbar-track {
  background: #0a0a0a; 
}
::-webkit-scrollbar-thumb {
  background: #ddb4ad; /* Your custom recording dot red */
  border-radius: 0px; /* Sharp edges for a more brutalist/film look */
}
::-webkit-scrollbar-thumb:hover {
  background: #f5f3ee; /* Turns white on hover */
}

.logo {
  position: fixed;
  top: clamp(20px, 4vw, 48px);
  left: clamp(20px, 4vw, 48px);
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 3vw, 2.25rem);
  letter-spacing: 0.01em;
  color: #f5f3ee;
  text-decoration: none;
  z-index: 50;
}
.logo:hover { opacity: 0.85; }

/* Custom Cursor */
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(245,243,238,0.6);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  transition: width 0.25s ease, height 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  will-change: transform;
}
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 5px;
  height: 5px;
  background: #f5f3ee;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}
.cursor-ring.expand {
  width: 64px;
  height: 64px;
  background: rgba(245,243,238,0.08);
  border-color: rgba(245,243,238,0.9);
}

@media (max-width: 768px) {
  .cursor-ring, .cursor-dot { display: none; }
  html, body { cursor: auto; }
}


/* --- Index Page Specific --- */

.stage { 
  position: relative; 
  width: 100vw; 
  height: 100vh; 
  overflow: hidden; }

.stage video { 
  position: absolute; 
  top: 50%; left: 50%; 
  width: 100%; height: 100%; 
  object-fit: cover; 
  transform: translate(-50%, -50%); 
  filter: saturate(0.9) contrast(1.05); }

.overlay { 
  position: absolute; 
  inset: 0; 
  background: linear-gradient(to bottom, rgba(10,10,10,0.35) 0%, rgba(10,10,10,0.25) 40%, rgba(10,10,10,0.75) 100%); }

.content { 
  position: relative; 
  z-index: 2; 
  height: 100%; 
  display: flex; 
  flex-direction: column; 
  justify-content: space-between; 
  padding: clamp(24px, 5vw, 64px); }

.top-row { 
  display: flex; 
  align-items: flex-start; 
  font-size: 12px; 
  letter-spacing: 0.15em; 
  text-transform: uppercase; 
  color: rgba(245,243,238,0.7); }

.rec { 
  display: flex; 
  align-items: center; 
  gap: 8px; }

.rec-dot { 
  width: 8px; 
  height: 8px; 
  border-radius: 50%; 
  background: #d4533e; 
  animation: blink 1.4s infinite; }

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.name-block { 
  line-height: 0.92; }

.name-block h1 { 
  font-family: 'Anton', sans-serif; 
  font-weight: 400; 
  text-transform: uppercase; 
  font-size: clamp(3.5rem, 14vw, 11rem); 
  letter-spacing: 0.01em; 
  color: #f5f3ee; }

.role { 
  margin-top: 0.75rem; 
  font-size: clamp(12px, 1.4vw, 16px); 
  letter-spacing: 0.25em; 
  text-transform: uppercase; 
  color: rgba(245,243,238,0.65); }

.bottom-row { 
  display: flex; 
  justify-content: space-between; 
  align-items: flex-end; 
  font-size: 12px; 
  letter-spacing: 0.1em; }

.bottom-row .tagline { 
  color: rgba(245,243,238,0.5); 
  text-transform: lowercase; }

nav { 
  display: flex; gap: clamp(16px, 3vw, 32px); }

.nav-item { position: relative; }

.nav-item > a { 
  color: #f5f3ee; 
  text-decoration: none; 
  text-transform: uppercase; 
  letter-spacing: 0.15em; 
  position: relative; 
  padding-bottom: 4px; 
  transition: opacity 0.2s ease; }

.nav-item > a::after { 
  content: ''; 
  position: absolute; 
  left: 0; 
  bottom: 0; 
  width: 0; 
  height: 1px;
  background: #f5f3ee; 
  transition: width 0.3s ease; }

.nav-item:hover > a::after { width: 100%; }

.nav-item:hover > a { opacity: 0.85; }

@media (max-width: 600px) { .bottom-row { flex-direction: column; align-items: flex-start; gap: 16px; } }

.scroll-cue { 
  position: absolute; 
  bottom: clamp(80px, 12vh, 140px); 
  left: 50%; 
  transform: translateX(-50%); 
  z-index: 3; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 8px; 
  font-size: 11px; 
  letter-spacing: 0.25em; 
  text-transform: uppercase; 
  color: rgba(245,243,238,0.55); 
  transition: opacity 0.6s ease; 
  pointer-events: none; }

.scroll-cue.hidden { opacity: 0; }

.scroll-line { 
  width: 1px; 
  height: 36px; 
  background: linear-gradient(to bottom, rgba(245,243,238,0.8), rgba(245,243,238,0)); 
  animation: scrollpulse 1.8s ease-in-out infinite; }

@keyframes scrollpulse { 0% { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; } 50% { transform: scaleY(1); transform-origin: top; opacity: 1; } 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; } }

.work-section { 
  position: relative; 
  background: #0a0a0a; 
  padding: clamp(48px, 8vw, 96px) clamp(24px, 5vw, 64px); }

.work-header { 
  margin-bottom: clamp(32px, 6vw, 64px); }

.work-header .eyebrow { 
  font-size: 11px; 
  letter-spacing: 0.25em; 
  text-transform: uppercase; 
  color: rgba(245,243,238,0.45); 
  margin-bottom: 12px; }

.work-header h2 { 
  font-family: 'Anton', sans-serif; 
  font-weight: 400; 
  text-transform: uppercase; 
  font-size: clamp(2rem, 6vw, 4.5rem); 
  letter-spacing: 0.01em; line-height: 1; }

.video-grid { 
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  gap: clamp(16px, 2.5vw, 32px); 
  /* Add these two lines to shrink and center the grid */
  max-width: 90%; 
  margin: 0 auto; 
}

@media (max-width: 640px) { .video-grid { grid-template-columns: 1fr; } }

.video-card { position: relative; 
  aspect-ratio: 16/9; 
  overflow: hidden; 
  border-radius: 6px; 
  border: 1px solid rgba(245,243,238,0.1); 
  background: #111; }

.video-card iframe { 
  position: absolute; 
  inset: 0; 
  width: 100%; 
  height: 100%; 
  border: 0; }

/* Hide tagline on mobile devices */
@media (max-width: 768px) {
  #homeTagline {
    display: none !important;
  }
}


/* --- About Page Specific --- */

main { 
  width: 100%; 
  max-width: none; 
  padding: 180px 8vw 120px; }

main .eyebrow { 
  font-size: 11px; 
  letter-spacing: 0.25em; 
  text-transform: uppercase; 
  color: rgba(245,243,238,0.45); 
  margin-bottom: 16px; }

main h1.title { 
  font-family: 'Anton', sans-serif; 
  font-weight: 400; 
  text-transform: uppercase; 
  font-size: clamp(2rem, 6vw, 4rem); 
  letter-spacing: 0.01em;
  line-height: 1.05; 
  margin-bottom: clamp(32px, 5vw, 56px); }

.lede { 
  font-size: clamp(16px, 2vw, 19px); 
  line-height: 1.8; 
  color: rgba(245,243,238,0.9); 
  margin-bottom: 1.75rem; }

.portrait { 
  width: 100%; 
  aspect-ratio: 4/5; 
  max-width: 360px; 
  object-fit: cover; 
  border-radius: 6px; 
  border: 1px solid rgba(245,243,238,0.1); 
  margin: clamp(8px, 2vw, 16px) 0 clamp(32px, 5vw, 48px); 
  margin-right: 40px; filter: saturate(0.9) contrast(1.05); 
  float: left; }

main p { 
  font-size: 14px; 
  line-height: 1.9; 
  color: rgba(245,243,238,0.65); 
  margin-bottom: 1.5rem; }

.divider { 
  width: 100%; 
  height: 1px; 
  background: rgba(245,243,238,0.12); 
  margin: clamp(40px, 6vw, 64px) 0; }

.stats { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 24px; margin-bottom: clamp(40px, 6vw, 64px); }

.stat .num { 
  font-family: 'Anton', sans-serif; 
  font-weight: 400; 
  font-size: clamp(1.8rem, 4vw, 2.75rem); 
  letter-spacing: 0.01em; line-height: 1; 
  margin-bottom: 6px; }

.stat .label { 
  font-size: 11px; 
  letter-spacing: 0.15em; 
  text-transform: uppercase; 
  color: rgba(245,243,238,0.45); }

@media (max-width: 600px) { .stats { grid-template-columns: 1fr 1fr; gap: 24px 16px; } }

.closing { 
  font-family: 'Anton', sans-serif; 
  font-weight: 400; text-transform: uppercase; 
  font-size: clamp(1.5rem, 4vw, 2.75rem); 
  line-height: 1.15; 
  letter-spacing: 0.01em; 
  color: #f5f3ee; }

main .tagline { 
  margin-top: clamp(24px, 4vw, 40px); 
  font-size: 12px; 
  letter-spacing: 0.25em; 
  text-transform: lowercase; 
  color: rgba(245,243,238,0.5); }


/* --- Course Page Specific --- */

.hero { 
  min-height: 100vh; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  flex-direction: column; 
  text-align: center; 
  padding: 40px; }

.hero .eyebrow { 
  font-size: 11px; 
  letter-spacing: .25em; 
  text-transform: uppercase; 
  color: rgba(245,243,238,.4); 
  margin-bottom: 24px; }

.hero .title { 
  font-family: 'Anton', sans-serif; 
  font-weight: 400; text-transform: 
  uppercase; font-size: clamp(4rem, 12vw, 10rem); 
  line-height: .92; 
  letter-spacing: .02em; }

.subtitle { 
  margin-top: 28px; 
  max-width: 500px; 
  font-size: 13px; 
  line-height: 1.8; 
  letter-spacing: .05em; 
  color: rgba(245,243,238,.55); }
  
.status { 
  margin-top: 48px; 
  font-size: 11px; 
  letter-spacing: .25em; 
  text-transform: uppercase; 
  color: rgba(245,243,238,.35); }