/* ============================================================
   Keenan Billings — Film & Media
   Stylesheet. Organised top→bottom:
   tokens · base · type · nav · hero · sections · work ·
   featured · about · contact · footer · motion · responsive · a11y
============================================================ */

/* ============================================================
   TOKENS
============================================================ */
:root{
  --paper:#110F0E;        /* dark background */
  --surface:#1A1613;      /* raised surface */
  --ink:#F1ECE4;          /* bone white — standout only */
  --ink-soft:#AAA193;     /* grey — most text */
  --ink-faint:#6F685C;    /* dim grey — captions / metadata */
  --brass:#EA5D2A;        /* orange — the single accent */
  --brass-dim:#C24A1F;
  --line:rgba(241,236,228,.12);
  --line-strong:rgba(241,236,228,.20);

  --serif:"Fraunces", Georgia, serif;
  --sans:"Inter", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;

  --maxw:1180px;
  --gutter:clamp(1.25rem, 4vw, 4rem);
  --nav-h:3.85rem;        /* fixed-nav height — fixed elements clear this */
}

/* ============================================================
   RESET / BASE
============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 1rem);-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--brass);color:var(--paper)}

/* subtle film-grain texture over everything */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;
  opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   TYPE SCALE
============================================================ */
.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--brass);
  font-weight:400;
}
.tc{ /* timecode marker */
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.16em;
  color:var(--ink-faint);
}

/* ============================================================
   NAV
============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  min-height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:1.15rem var(--gutter);
  background:rgba(22,21,26,.55);
  backdrop-filter:blur(12px) saturate(120%);
  -webkit-backdrop-filter:blur(12px) saturate(120%);
  border-bottom:1px solid transparent;
  transition:border-color .4s ease, background .4s ease;
}
.nav.is-scrolled{border-bottom-color:var(--line);background:rgba(22,21,26,.82)}
.nav__brand{
  font-family:var(--mono);font-size:.82rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink);
  display:flex;align-items:center;gap:.6rem;
}
.nav__brand .dot{width:7px;height:7px;border-radius:50%;background:var(--brass);display:inline-block}
.nav__links{display:flex;gap:clamp(1.1rem,3vw,2.4rem);align-items:center}
.nav__link{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);
  position:relative;padding:.35rem 0;transition:color .25s ease;
}
.nav__link::after{
  content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;
  background:var(--brass);transition:width .35s ease;
}
.nav__link:hover{color:var(--ink)}
.nav__link.is-active{color:var(--ink)}
.nav__link.is-active::after{width:100%}

/* ============================================================
   HERO — film title card inside a viewfinder
============================================================ */
.hero{
  min-height:100vh;
  min-height:100svh;position:relative;
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--nav-h) + clamp(2.5rem,7vw,5rem)) var(--gutter) 5rem;
}
/* viewfinder corner ticks */
.viewfinder{position:absolute;inset:clamp(1rem,3vw,2.25rem);pointer-events:none}
.viewfinder span{position:absolute;width:26px;height:26px;border:1px solid var(--line-strong)}
.viewfinder span:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.viewfinder span:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.viewfinder span:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.viewfinder span:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}

.hero__inner{max-width:var(--maxw);margin:0 auto;width:100%}
.hero__eyebrow{display:block;margin-bottom:clamp(1.5rem,4vw,2.4rem)}
.hero__name{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(3.6rem,14vw,12rem);
  line-height:.9;
  letter-spacing:-.025em;
  font-variation-settings:"opsz" 144;
}
.hero__name .ln{display:block;overflow:hidden;padding-bottom:.18em;margin-bottom:-.18em}
.hero__name .ln > span{display:block}
.hero__role{
  margin-top:clamp(1.6rem,4vw,2.6rem);
  font-size:clamp(1.05rem,2.4vw,1.4rem);
  color:var(--ink-soft);font-weight:300;max-width:34ch;
}
/* bottom row: meta (left) + scroll CTA (right), shared baseline */
.hero__foot{
  margin-top:clamp(2.4rem,5vw,3.4rem);
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:1.4rem 2.5rem;flex-wrap:wrap;
}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:.5rem 2rem;align-items:baseline;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:var(--ink-faint);
}
.hero__meta strong{color:var(--ink);font-weight:400}
.hero__meta a{color:var(--brass);border-bottom:1px solid var(--line-strong);padding-bottom:1px;transition:border-color .25s}
.hero__meta a:hover{border-color:var(--brass)}

.scrollcue{
  display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-soft);border-bottom:1px solid var(--line-strong);padding-bottom:.45rem;
  transition:color .25s ease,border-color .25s ease;
}
.scrollcue:hover{color:var(--ink);border-color:var(--brass)}
.scrollcue .arrow{display:inline-block;color:var(--brass);animation:bob 2.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}

/* ============================================================
   SECTION SCAFFOLD
============================================================ */
.section{padding:clamp(5rem,11vw,9rem) var(--gutter);position:relative}
.section__wrap{max-width:var(--maxw);margin:0 auto}
.section__head{
  display:flex;align-items:baseline;gap:1rem;
  padding-bottom:clamp(2rem,5vw,3rem);margin-bottom:clamp(2rem,5vw,3rem);
  border-bottom:1px solid var(--line);
}
.section__head .tc{flex-shrink:0}
.section__title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.9rem,5vw,3.1rem);line-height:1;letter-spacing:-.01em;
  font-variation-settings:"opsz" 72;
}

/* ============================================================
   WORK / FILMOGRAPHY
============================================================ */
.films{display:flex;flex-direction:column}
.film{
  display:grid;
  grid-template-columns:5.5rem 1fr 12rem 7rem;
  gap:1.5rem;align-items:baseline;
  padding:clamp(1.2rem,2.6vw,1.7rem) 0;
  border-bottom:1px solid var(--line);
  position:relative;transition:padding-left .35s ease;
}
.film::before{
  content:"";position:absolute;left:-1.25rem;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--brass);
  opacity:0;transition:opacity .3s ease;
}
.film:hover{padding-left:1.1rem}
.film:hover::before{opacity:1}
.film__year{font-family:var(--mono);font-size:.82rem;color:var(--ink-faint);letter-spacing:.04em}
.film__title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.2rem,2.6vw,1.6rem);line-height:1.15;color:var(--ink);
}
.film__title .fmt{
  display:inline-block;margin-left:.7rem;font-family:var(--mono);
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);vertical-align:middle;
  border:1px solid var(--line-strong);border-radius:2px;padding:.15rem .45rem;
}
.film__role{font-size:.95rem;color:var(--ink-soft);font-weight:300}
.film__fmt{font-family:var(--mono);font-size:.74rem;color:var(--ink-faint);letter-spacing:.04em;text-align:right}
.film__fmt a{color:var(--ink-soft);border-bottom:1px solid var(--line-strong);padding-bottom:1px;transition:color .25s,border-color .25s}
.film__fmt a:hover{color:var(--brass);border-color:var(--brass)}
.film__title a{color:inherit;border-bottom:1px solid var(--line-strong);padding-bottom:1px;transition:color .25s,border-color .25s}
.film__title a:hover{color:var(--brass);border-color:var(--brass)}
.film__title a .ext{font-family:var(--mono);font-size:.6em;color:var(--ink-faint);margin-left:.35em;vertical-align:super}

/* ============================================================
   FEATURED PROJECT (embedded video)
============================================================ */
.featured{margin-bottom:clamp(3.5rem,8vw,5.5rem)}
.featured__eyebrow{display:block;margin-bottom:.9rem}
.featured__title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.8rem,4.5vw,2.9rem);line-height:1.04;letter-spacing:-.01em;
  font-variation-settings:"opsz" 90;margin-bottom:.7rem;
}
.featured__metaline{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;color:var(--ink-faint);
  text-transform:uppercase;margin-bottom:clamp(1.6rem,3.5vw,2.2rem);
}
.featured__metaline .meta-seg{white-space:nowrap}
.featured__metaline .meta-type{color:var(--ink-soft)}
.vframe{
  position:relative;aspect-ratio:16/9;width:100%;background:#000;
  border:1px solid var(--line-strong);overflow:hidden;
}
.vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.vframe .tick{position:absolute;width:20px;height:20px;border:1px solid var(--brass);z-index:3;pointer-events:none;opacity:.85}
.vframe .tick:nth-child(1){top:10px;left:10px;border-right:0;border-bottom:0}
.vframe .tick:nth-child(2){top:10px;right:10px;border-left:0;border-bottom:0}
.vframe .tick:nth-child(3){bottom:10px;left:10px;border-right:0;border-top:0}
.vframe .tick:nth-child(4){bottom:10px;right:10px;border-left:0;border-top:0}
.featured__lower{
  display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(2rem,5vw,4rem);
  margin-top:clamp(1.8rem,4vw,2.6rem);
}
.featured__synopsis{font-size:1.06rem;color:var(--ink-soft);max-width:50ch}
.featured__synopsis strong{color:var(--ink);font-weight:500}
.featured__side{display:flex;flex-direction:column;gap:1.6rem}
.statbig{display:flex;flex-direction:column;gap:.2rem}
.statbig b{font-family:var(--serif);font-weight:300;font-size:clamp(2.4rem,6vw,3.4rem);line-height:1;color:var(--brass);font-variation-settings:"opsz" 144}
.statbig em{font-style:normal;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.featured__links{display:flex;flex-wrap:wrap;gap:.7rem 1.4rem;border-top:1px solid var(--line);padding-top:1.4rem}
.featured__links a{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);border-bottom:1px solid var(--line);padding-bottom:3px;transition:color .25s,border-color .25s;
}
.featured__links a:hover{color:var(--ink);border-color:var(--brass)}
.films-label{display:block;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.2em}

/* link styling for body + footer */
.hero__meta a strong{color:inherit}
.about__body a{color:var(--ink);border-bottom:1px solid var(--line-strong);transition:color .25s,border-color .25s}
.about__body a:hover{color:var(--brass);border-color:var(--brass)}

/* ============================================================
   ABOUT
============================================================ */
.about__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem)}
.about__lead{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1.32;letter-spacing:-.01em;
  font-variation-settings:"opsz" 60;
}
.about__lead em{font-style:normal;color:var(--brass)}
.about__body p{color:var(--ink-soft);font-size:1.02rem;margin-bottom:1.3rem;max-width:46ch}
.about__body p:last-child{margin-bottom:0}
.about__facts{margin-top:2.2rem;border-top:1px solid var(--line);padding-top:1.6rem;display:grid;gap:1rem}
.fact{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  font-family:var(--mono);font-size:.8rem}
.fact span:first-child{color:var(--ink-faint);letter-spacing:.1em;text-transform:uppercase;font-size:.7rem}
.fact span:last-child{color:var(--ink);text-align:right}

/* ============================================================
   CONTACT
============================================================ */
.contact__wrap{max-width:var(--maxw);margin:0 auto;text-align:center}
.contact__line{font-family:var(--mono);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);margin-bottom:clamp(1.5rem,4vw,2.2rem)}
.contact__big{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.7rem,7vw,4.5rem);line-height:1.05;letter-spacing:-.02em;
  font-variation-settings:"opsz" 144;overflow-wrap:break-word;
}
.contact__big a{display:inline-block;position:relative;transition:color .3s}
.contact__big a::after{content:"";position:absolute;left:0;bottom:.08em;height:1px;width:0;background:var(--brass);transition:width .45s ease}
.contact__big a:hover{color:var(--brass)}
.contact__big a:hover::after{width:100%}
.contact__sub{margin-top:clamp(2rem,5vw,3rem);display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;justify-content:center}
.contact__sub a{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);border-bottom:1px solid var(--line);padding-bottom:3px;transition:color .25s,border-color .25s;
}
.contact__sub a:hover{color:var(--ink);border-color:var(--brass)}

/* ============================================================
   REVEAL ANIMATION
============================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.is-visible{opacity:1;transform:none}
.hero__name .ln > span{transform:translateY(105%);transition:transform 1.05s cubic-bezier(.2,.8,.2,1)}
.hero.is-loaded .hero__name .ln > span{transform:translateY(0)}
.hero__name .ln:nth-child(2) > span{transition-delay:.08s}

/* ============================================================
   RESPONSIVE
============================================================ */
/* disable hover-shift on touch devices (it sticks after tap) */
@media (hover:none){
  .film:hover{padding-left:0}
  .film:hover::before{opacity:0}
}

/* tablet / small laptop */
@media (max-width:860px){
  .about__grid{grid-template-columns:1fr;gap:1.8rem}
  .featured__lower{grid-template-columns:1fr;gap:1.8rem}
  .film{grid-template-columns:3.25rem 1fr;gap:.2rem 1rem}
  .film__role{grid-column:2;color:var(--ink-faint);font-size:.85rem}
  .film__fmt{grid-column:2;text-align:left;margin-top:.2rem}
}

/* phones */
@media (max-width:600px){
  :root{--gutter:1.4rem;--nav-h:3.25rem}

  .nav{padding:.9rem var(--gutter)}
  .nav__brand span.full{display:none}
  .nav__links{gap:1.4rem}
  .nav__link{padding:.55rem 0}                /* larger tap target */

  .hero{padding:calc(var(--nav-h) + 2rem) var(--gutter) 4.5rem}
  .hero__name{font-size:clamp(3rem,15vw,5.5rem)}
  .hero__role{font-size:1.05rem;max-width:none}
  .hero__foot{flex-direction:column;align-items:flex-start;gap:1.4rem}
  .hero__meta{gap:.4rem 1.4rem;font-size:.74rem}

  .section{padding:4.25rem var(--gutter)}
  .section__head{padding-bottom:1.6rem;margin-bottom:1.8rem}
  .section__title{font-size:clamp(1.8rem,8vw,2.4rem)}

  .featured{margin-bottom:3rem}
  .featured__title{font-size:clamp(1.7rem,8vw,2.3rem)}
  .featured__metaline{letter-spacing:.06em;overflow-wrap:break-word}
  .vframe .tick{width:13px;height:13px}
  .vframe .tick:nth-child(1),.vframe .tick:nth-child(2){top:8px}
  .vframe .tick:nth-child(3),.vframe .tick:nth-child(4){bottom:8px}
  .vframe .tick:nth-child(1),.vframe .tick:nth-child(3){left:8px}
  .vframe .tick:nth-child(2),.vframe .tick:nth-child(4){right:8px}
  .featured__synopsis{font-size:1rem}

  .film{padding:1.05rem 0}

  .about__lead{font-size:clamp(1.45rem,6vw,1.9rem)}
  .fact{flex-direction:column;gap:.2rem;align-items:flex-start}
  .fact span:last-child{text-align:left}

  .contact__sub{gap:1rem 1.6rem}
}

/* very small phones */
@media (max-width:380px){
  .hero__name{font-size:2.7rem}
  .nav__links{gap:1.05rem}
  .nav__link{font-size:.68rem;letter-spacing:.12em}
  .nav__brand{font-size:.76rem}
}

/* ============================================================
   ACCESSIBILITY
============================================================ */
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::after,*::before{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .hero__name .ln > span{transform:none}
}