/* ============================================================
   RYDREA WALKER — design system
   Palette + type chosen for one reason: Deaf cinema lives and
   dies by the caption. Every label, eyebrow, and credit on this
   site is styled like a burned-in subtitle — black bar, white
   monospace text — because that's the actual visual language
   of the work this site exists to showcase.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  /* color tokens */
  --ink:        #0b0b0c;   /* primary background */
  --charcoal:   #1a1a1c;   /* card / layered surface */
  --charcoal-2: #232325;   /* hover surface */
  --paper:      #f4f1ea;   /* primary text on dark, and light tiles */
  --steel:      #8a8a8f;   /* muted / metadata text */
  --signal:     #d81f2a;   /* brand red — accent, never background */
  --signal-dim: #7a1117;
  --line:       #2c2c2f;   /* hairline borders on dark */

  --font-display: 'Anton', sans-serif;
  --font-body:    'Source Serif 4', Georgia, serif;
  --font-caption: 'JetBrains Mono', 'Courier New', monospace;

  --container: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body{
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
.wrap{ max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

h1, h2, h3, h4{
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.05;
  margin: 0;
  font-weight: 400; /* Anton only ships one weight */
}
h1{ font-size: clamp(40px, 7vw, 96px); }
h2{ font-size: clamp(28px, 4vw, 48px); }
h3{ font-size: clamp(20px, 2.4vw, 28px); }

p{ margin: 0 0 1.1em; max-width: 38em; }
.lede{ font-size: 1.2em; color: var(--paper); }
.muted{ color: var(--steel); }

/* ---------- caption bar — the signature device ---------- */
.cap{
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: #000;
  color: var(--paper);
  font-family: var(--font-caption);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  white-space: nowrap;
}
.cap--red{ color: #fff; background: var(--signal); }
.cap-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

.timecode{
  font-family: var(--font-caption);
  color: var(--signal);
  font-size: 13px;
  letter-spacing: 0.04em;
}

/* ---------- top live-caption ticker ---------- */
.ticker{
  background:#000;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-caption);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  color: var(--steel);
}
.ticker__track{
  display: inline-block;
  padding: 7px 0;
  animation: ticker 28s linear infinite;
}
.ticker__track span{ margin: 0 2.5em; }
.ticker__track span b{ color: var(--paper); }
@keyframes ticker{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ---------- nav ---------- */
header.site{
  position: sticky; top: 0; z-index: 50;
  background: rgba(11,11,12,0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px var(--gutter);
  max-width: var(--container); margin:0 auto;
}
.nav__logo{
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.nav__logo span{ color: var(--signal); }
.nav__links{ display:flex; gap: 28px; font-family: var(--font-caption); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.nav__links a{ position:relative; padding: 4px 0; color: var(--steel); transition: color .15s; }
.nav__links a:hover, .nav__links a[aria-current="page"]{ color: var(--paper); }
.nav__links a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background: var(--signal);
}
.nav__toggle{ display:none; background:none; border:1px solid var(--line); color:var(--paper); padding:8px 10px; font-family: var(--font-caption); font-size: 11px; letter-spacing:0.1em; text-transform:uppercase; }

@media (max-width: 760px){
  .nav__links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background: var(--ink); border-bottom: 1px solid var(--line);
    max-height:0; overflow:hidden; transition: max-height .25s ease;
  }
  .nav__links.is-open{ max-height: 320px; }
  .nav__links a{ padding: 14px var(--gutter); border-top: 1px solid var(--line); }
  .nav__toggle{ display:inline-block; }
}

/* ---------- hero ---------- */
.hero{ padding: 84px var(--gutter) 64px; max-width: var(--container); margin: 0 auto; }
.hero__eyebrow{ margin-bottom: 22px; }
.hero h1{ max-width: 14ch; }
.hero__cursor{ display:inline-block; width:.55ch; background:var(--signal); margin-left:6px; animation: blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.hero p.lede{ margin-top: 26px; max-width: 46ch; }
.hero__ctas{ display:flex; gap:16px; margin-top: 34px; flex-wrap:wrap; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-caption); font-size: 13px; letter-spacing:0.08em; text-transform:uppercase;
  padding: 14px 24px; border: 1px solid var(--paper); transition: all .15s;
}
.btn:hover{ background: var(--paper); color: var(--ink); }
.btn--solid{ background: var(--signal); border-color: var(--signal); color:#fff; }
.btn--solid:hover{ background: #fff; color: var(--ink); border-color:#fff; }

/* ---------- sections ---------- */
section{ padding: 70px 0; }
section.alt{ background: var(--charcoal); }
.section__head{ display:flex; justify-content:space-between; align-items:baseline; gap:24px; margin-bottom: 40px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:20px; }

/* ---------- film grid / cards ---------- */
.film-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 28px; }
.film-card{ position:relative; background: var(--charcoal); }
.film-card__art{ position:relative; aspect-ratio: 2/3; overflow:hidden; background:#000; }
.film-card__art img{ width:100%; height:100%; object-fit:cover; transition: transform .4s; }
.film-card:hover .film-card__art img{ transform: scale(1.04); }
.film-card__cap{
  position:absolute; left:0; right:0; bottom:0;
  background: rgba(0,0,0,0.88);
  font-family: var(--font-caption); font-size: 12px; line-height:1.5; color:#fff;
  padding: 12px 14px; letter-spacing:0.02em;
  transform: translateY(100%); transition: transform .25s ease;
}
.film-card:hover .film-card__cap{ transform: translateY(0); }
.film-card__meta{ padding: 14px 4px 0; }
.film-card__title{ font-family: var(--font-display); font-size: 17px; text-transform:uppercase; }
.film-card__year{ font-family: var(--font-caption); color: var(--signal); font-size:12px; }

.scene-card{ border:1px solid var(--line); padding: 24px; background: var(--charcoal); }
.scene-card h3{ margin-bottom:8px; }

/* ---------- laurels ---------- */
.laurels{ display:flex; gap:30px; flex-wrap:wrap; align-items:center; }
.laurels img{ height:120px; width:auto; }

/* ---------- venture rows ---------- */
.venture{
  display:grid; grid-template-columns: 280px 1fr; gap:36px;
  padding: 36px 0; border-top: 1px solid var(--line); align-items:start;
}
.venture:first-of-type{ border-top:none; }
.venture__logo{ background: var(--charcoal); display:flex; align-items:center; padding:16px; }
.venture__logo img{ width:100%; height:auto; }
.venture__badge{ display:inline-block; margin-bottom:10px; }
@media (max-width: 700px){ .venture{ grid-template-columns: 1fr; } }

/* ---------- ventures wordmark fallback (no logo yet) ---------- */
.wordmark-tile{
  background: var(--charcoal); border:1px dashed var(--line);
  display:flex; align-items:center; justify-content:center; padding: 28px 16px;
  font-family: var(--font-display); text-transform:uppercase; font-size: 20px; text-align:center;
  color: var(--steel);
}

/* ---------- bio page ---------- */
.bio-layout{ display:grid; grid-template-columns: 1fr 280px; gap: 56px; }
.bio-facts{ font-family: var(--font-caption); font-size: 13px; }
.bio-facts dt{ color: var(--steel); margin-top:18px; letter-spacing:0.06em; text-transform:uppercase; font-size:11px; }
.bio-facts dt:first-child{ margin-top:0; }
.bio-facts dd{ margin:4px 0 0; color: var(--paper); }
.pullcap{ background:#000; color:#fff; font-family: var(--font-caption); padding: 22px 26px; margin: 36px 0; font-size:15px; line-height:1.6; border-left: 4px solid var(--signal); }
@media (max-width: 800px){ .bio-layout{ grid-template-columns: 1fr; } }

.timeline{ list-style:none; margin:0; padding:0; }
.timeline li{ display:grid; grid-template-columns: 110px 1fr; gap:20px; padding: 16px 0; border-top:1px solid var(--line); }
.timeline li:first-child{ border-top:none; }

/* ---------- footer ---------- */
footer.site{ border-top:1px solid var(--line); padding: 50px 0 30px; margin-top:40px; }
.footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap:36px; }
.footer-grid h4{ font-family: var(--font-caption); font-size:12px; letter-spacing:0.08em; color:var(--steel); margin-bottom:14px; text-transform:uppercase; }
.footer-grid a{ display:block; color: var(--paper); margin-bottom:8px; font-size:14px; }
.footer-bottom{ margin-top:36px; padding-top:20px; border-top:1px solid var(--line); font-family: var(--font-caption); font-size:11.5px; color:var(--steel); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
@media (max-width: 700px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---------- forms ---------- */
form.contact-form{ display:grid; gap:18px; max-width: 560px; }
.field{ display:grid; gap:8px; }
.field label{ font-family: var(--font-caption); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--steel); }
.field input, .field textarea{
  background: var(--charcoal); border:1px solid var(--line); color: var(--paper);
  padding: 13px 14px; font-family: var(--font-body); font-size:16px;
}
.field input:focus, .field textarea:focus{ outline: 2px solid var(--signal); outline-offset:1px; }

/* ---------- blog ---------- */
.post-card{ border-top:1px solid var(--line); padding: 28px 0; display:grid; grid-template-columns:120px 1fr; gap:24px; }
.post-card:first-child{ border-top:none; }
@media (max-width:600px){ .post-card{ grid-template-columns:1fr; } }
.empty-state{ border:1px dashed var(--line); padding: 60px 30px; text-align:center; color: var(--steel); }

/* ---------- behind-the-lens montage ---------- */
.bts-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.bts-grid > *{
  aspect-ratio: 4/3;
  overflow: hidden;
  background:#000;
  position:relative;
}
.bts-grid img, .bts-grid video{
  width:100%; height:100%; object-fit:cover; object-position: top center;
}
.bts-grid .bts-video{ grid-column: span 2; grid-row: span 2; }
@media (max-width: 900px){
  .bts-grid{ grid-template-columns: repeat(2, 1fr); }
  .bts-grid .bts-video{ grid-column: span 2; grid-row: span 1; aspect-ratio: 16/9; }
}

.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 760px){ .grid-2{ grid-template-columns: 1fr; } }
.tag{ font-family: var(--font-caption); font-size: 11px; letter-spacing:0.08em; text-transform:uppercase; color: var(--steel); border:1px solid var(--line); padding:4px 9px; display:inline-block; }
:focus-visible{ outline: 2px solid var(--signal); outline-offset: 2px; }