/* ==========================================================================
   Lumina Media — Design tokens
   ========================================================================== */
:root{
  --color-ink:        #14151A;
  --color-ink-alt:     #1F1B2E;
  --color-ivory:       #F2EFE9;
  --color-ivory-dim:   #C9C6BF;
  --color-brass:       #C89B3C;
  --color-brass-dim:   #8E6E2C;
  --color-signal:      #B23A2E;
  --color-slate:       #8A8D97;
  --color-line:        rgba(242,239,233,0.14);

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

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

  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--color-ink);
  color: var(--color-ivory);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight:400; margin:0; }
p{ margin:0; }

.screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); }
.skip-link{ z-index:9999; }
.skip-link:focus{
  position:fixed; top:1rem; left:1rem; width:auto; height:auto; clip:auto;
  background:var(--color-brass); color:var(--color-ink); padding:.75rem 1.25rem; border-radius:2px;
}
:focus-visible{ outline: 2px solid var(--color-brass); outline-offset: 3px; }

.container{
  max-width: var(--container);
  margin-inline:auto;
  padding-inline: var(--gutter);
}

/* ==========================================================================
   Signature element: REC tag + timecodes
   ========================================================================== */
.rec-tag{
  display:inline-flex; align-items:center; gap:.5em;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-ivory-dim);
}
.rec-dot{
  width:7px; height:7px; border-radius:50%;
  background: var(--color-signal);
  box-shadow: 0 0 0 0 rgba(178,58,46,.6);
  animation: rec-pulse 2.2s infinite;
}
@keyframes rec-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(178,58,46,.55); }
  70%{ box-shadow: 0 0 0 8px rgba(178,58,46,0); }
  100%{ box-shadow: 0 0 0 0 rgba(178,58,46,0); }
}

.section-head{ margin-bottom: clamp(2rem,5vw,3.5rem); }
.section-head__meta{
  display:flex; align-items:center; gap:.85rem; margin-bottom: .9rem;
  font-family: var(--font-mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--color-brass);
}
.section-head__index{ color: var(--color-slate); }
.section-head__title{ font-size: clamp(1.75rem, 3.4vw, 2.75rem); max-width: 18ch; }

/* ==========================================================================
   Buttons / links
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: .95rem 1.9rem;
  font-family: var(--font-body); font-weight:500; font-size:.95rem;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.btn--brass{ background: var(--color-brass); color: var(--color-ink); }
.btn--brass:hover{ background: #dcae4f; transform: translateY(-2px); }
.btn--outline{ border-color: var(--color-line); color: var(--color-ivory); }
.btn--outline:hover{ border-color: var(--color-brass); color: var(--color-brass); }
.btn--ghost{ border-color: var(--color-line); color: var(--color-ivory); padding:.65rem 1.3rem; font-size:.85rem; }
.btn--ghost:hover{ border-color: var(--color-brass); color: var(--color-brass); }
.btn--lg{ padding: 1.15rem 2.5rem; font-size: 1rem; }

.link-arrow{
  position:relative; display:inline-flex; align-items:center; gap:.5rem;
  font-family: var(--font-mono); font-size:.85rem; letter-spacing:.06em;
  color: var(--color-ivory); border-bottom:1px solid var(--color-line); padding-bottom:.2rem;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.link-arrow::after{ content:"→"; transition: transform .2s var(--ease); }
.link-arrow:hover{ color: var(--color-brass); border-color: var(--color-brass); }
.link-arrow:hover::after{ transform: translateX(4px); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position: sticky; top:0; z-index:100;
  background: rgba(20,21,26,0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-line);
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: 1.5rem; padding-block: 1.1rem;
}
.site-header__logo{
  font-family: var(--font-display); font-size:1.35rem; letter-spacing:.01em;
}
.site-header__nav{ flex:1; display:flex; justify-content:center; }
.nav-menu{ display:flex; gap: 2.1rem; }
.nav-menu a{
  font-size:.92rem; color: var(--color-ivory-dim);
  position:relative; padding-block:.3rem;
  transition: color .2s var(--ease);
}
.nav-menu a:hover{ color: var(--color-ivory); }
.nav-menu a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background: var(--color-brass); transition: width .25s var(--ease);
}
.nav-menu a:hover::after{ width:100%; }

.site-header__cta{ display:flex; align-items:center; gap:1.25rem; }
.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px;
}
.nav-toggle span{ width:22px; height:2px; background: var(--color-ivory); display:block; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  min-height: min(92vh, 880px);
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
  background: var(--hero-image, none) center/cover no-repeat, radial-gradient(120% 120% at 50% 0%, var(--color-ink-alt) 0%, var(--color-ink) 62%);
}
.hero__vignette{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(20,21,26,.35) 0%, rgba(20,21,26,.55) 55%, var(--color-ink) 100%);
  pointer-events:none;
}
.hero__inner{ position:relative; padding-block: 6rem 8rem; }
.hero__eyebrow{ margin-bottom: 1.6rem; }
.hero__title{
  font-size: clamp(2.4rem, 6.2vw, 5rem);
  line-height: 1.05;
  max-width: 16ch;
  font-weight: 400;
}
.hero__subtitle{
  margin-top: 1.75rem; max-width: 46ch;
  font-size: 1.08rem; color: var(--color-ivory-dim);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap: 1rem; margin-top: 2.5rem; }

.hero__ticker{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:1.25rem;
  padding: 1.5rem var(--gutter) 2rem;
  border-top: 1px solid var(--color-line);
}
.hero__timecode{ font-family: var(--font-mono); font-size:.85rem; color: var(--color-brass); letter-spacing:.08em; }
.hero__ticker-line{ flex:1; height:1px; background: var(--color-line); }
.hero__scroll-hint{ font-family: var(--font-mono); font-size:.75rem; color: var(--color-slate); text-transform:uppercase; letter-spacing:.14em; }

/* ==========================================================================
   Work grid
   ========================================================================== */
.work{ padding-block: clamp(5rem, 9vw, 8rem) clamp(4rem,7vw,6rem); }
.work-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
}
.work-card{
  display:flex; flex-direction:column; gap:1.1rem;
  transition: transform .35s var(--ease);
}
.work-card:hover{ transform: translateY(-6px); }
.work-card__media{
  position:relative; aspect-ratio: 4/5; overflow:hidden; background: var(--color-ink-alt);
}
.work-card--tall .work-card__media{ aspect-ratio: 4/5.6; }
.work-card__media img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.work-card:hover .work-card__media img{ transform: scale(1.06); }
.work-card__placeholder{
  width:100%; height:100%;
  background: repeating-linear-gradient(135deg, var(--color-ink-alt), var(--color-ink-alt) 10px, #221e33 10px, #221e33 20px);
}
.work-card__timecode{
  position:absolute; left:.9rem; bottom:.9rem;
  font-family: var(--font-mono); font-size:.72rem; letter-spacing:.06em;
  background: rgba(20,21,26,.75); color: var(--color-brass);
  padding:.3rem .55rem; border:1px solid var(--color-line);
}
.work-card__category{
  display:block; font-family: var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--color-brass); margin-bottom:.5rem;
}
.work-card__title{ font-size:1.25rem; line-height:1.3; }
.work-card__client{ display:block; margin-top:.35rem; font-size:.85rem; color: var(--color-slate); }
.work-footer{ margin-top: 3rem; display:flex; justify-content:center; }
.empty-note{ color: var(--color-slate); }

/* ==========================================================================
   Studio / About
   ========================================================================== */
.studio{ padding-block: clamp(4rem,8vw,7rem); background: var(--color-ink-alt); }
.studio__inner{
  display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items:center;
}
.studio__frame{
  position:relative; aspect-ratio: 4/5;
  background: linear-gradient(155deg, #2a2440, #14151A 70%);
  border: 1px solid var(--color-line);
  display:flex; align-items:flex-end; padding: 1.25rem;
}
.studio__frame-tag{ position:relative; }
.studio__content p{ color: var(--color-ivory-dim); max-width: 52ch; }
.studio__facts{
  display:flex; gap: clamp(1.5rem,4vw,3rem); margin: 2.25rem 0 2rem; flex-wrap:wrap;
}
.studio__facts li{ display:flex; flex-direction:column; gap:.3rem; }
.studio__facts span{ font-family: var(--font-display); font-size:1.9rem; color: var(--color-brass); }
.studio__facts li{ font-size:.82rem; color: var(--color-slate); max-width:16ch; }

/* ==========================================================================
   Services
   ========================================================================== */
.services{ padding-block: clamp(4rem,8vw,7rem); }
.services-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.service-card{
  padding: 2.25rem 1.9rem; border: 1px solid var(--color-line);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.service-card:hover{ border-color: var(--color-brass-dim); transform: translateY(-4px); }
.service-card__icon{ color: var(--color-brass); font-size: 1.6rem; width:1.6rem; height:1.6rem; margin-bottom: 1.4rem; }
.service-card__title{ font-size: 1.3rem; margin-bottom: .85rem; }
.service-card__text{ color: var(--color-ivory-dim); font-size:.95rem; }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonials{ padding-block: clamp(4rem,8vw,7rem); background: var(--color-ink-alt); }
.testimonials-track{
  display:flex; gap: 1.75rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom: .5rem;
}
.testimonial-card{
  flex: 0 0 min(560px, 88vw); scroll-snap-align:start;
  border-left: 2px solid var(--color-brass);
  padding: .5rem 0 .5rem 1.75rem;
}
.testimonial-card__quote{
  font-family: var(--font-display); font-style: italic; font-size: 1.3rem; line-height:1.5;
  color: var(--color-ivory);
}
.testimonial-card__meta{ display:flex; gap:.6rem; margin-top:1.25rem; font-size:.85rem; }
.testimonial-card__name{ color: var(--color-brass); }
.testimonial-card__role{ color: var(--color-slate); }

/* ==========================================================================
   CTA strip
   ========================================================================== */
.cta-strip{
  padding-block: clamp(4.5rem, 9vw, 7.5rem);
  text-align:center;
  background: radial-gradient(80% 140% at 50% 100%, rgba(200,155,60,.14), transparent 60%);
}
.cta-strip__timecode{ font-family: var(--font-mono); color: var(--color-slate); font-size:.8rem; margin-bottom: 1.25rem; }
.cta-strip__title{ font-size: clamp(2rem, 4.5vw, 3.25rem); max-width: 20ch; margin-inline:auto; margin-bottom: 2.25rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ border-top: 1px solid var(--color-line); }
.site-footer__top{
  display:grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2.5rem,6vw,5rem);
  padding-block: clamp(4rem,8vw,6rem);
}
.site-footer__eyebrow{ margin-bottom: 1.5rem; }
.site-footer__title{ font-size: clamp(1.9rem, 3.6vw, 2.9rem); max-width: 16ch; margin-bottom: 2rem; }
.site-footer__grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.footer-col__title, .footer-widget__title{
  font-family: var(--font-mono); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--color-slate); margin-bottom: 1rem;
}
.footer-col p, .footer-col a{ color: var(--color-ivory-dim); font-size:.92rem; margin-bottom:.5rem; display:block; }
.footer-col a:hover{ color: var(--color-brass); }
.footer-col__list li{ margin-bottom:.5rem; }

.site-footer__bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap: .5rem;
  padding-block: 1.5rem; border-top:1px solid var(--color-line);
  font-family: var(--font-mono); font-size:.75rem; color: var(--color-slate);
}

/* ==========================================================================
   Generic page / single / archive / 404
   ========================================================================== */
.page-header{ padding-block: clamp(4rem,8vw,6rem) 3rem; border-bottom: 1px solid var(--color-line); }
.page-header__title{ font-size: clamp(2rem,4.5vw,3.25rem); margin-top: 1rem; }
.page-content{ padding-block: 3rem 5rem; max-width: 820px; }
.page-content__thumb{ margin-bottom: 2.5rem; }
.entry-content{ color: var(--color-ivory-dim); font-size: 1.05rem; }
.entry-content > * + *{ margin-top: 1.25rem; }
.entry-content h2, .entry-content h3{ color: var(--color-ivory); margin-top: 2rem; }
.entry-content a{ color: var(--color-brass); border-bottom: 1px solid var(--color-brass-dim); }

.post-list__item{ display:grid; grid-template-columns: 260px 1fr; gap: 2rem; padding-block: 2.5rem; border-bottom:1px solid var(--color-line); }
.post-list__title{ font-size: 1.5rem; margin-bottom:.75rem; }
.post-list__excerpt{ color: var(--color-ivory-dim); margin-bottom: 1rem; }
.archive-main{ padding-block: clamp(4rem,8vw,6rem); }

.project-header__media{ position:relative; aspect-ratio: 16/8; overflow:hidden; }
.project-header__media img{ width:100%; height:100%; object-fit:cover; }
.project-header__vignette{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(20,21,26,.1), var(--color-ink) 92%); }
.project-header__inner{ padding-block: 2.5rem; }
.project-header__timecode{ font-family: var(--font-mono); color: var(--color-brass); font-size:.85rem; }
.project-header__title{ font-size: clamp(2rem,4.5vw,3.25rem); margin-top:.75rem; }
.project-header__category{ display:inline-block; margin-top:.75rem; font-family: var(--font-mono); font-size:.78rem; color: var(--color-slate); text-transform:uppercase; letter-spacing:.1em; }
.project-content{ display:grid; grid-template-columns: 220px 1fr; gap: clamp(2rem,5vw,4rem); padding-block: 3rem 5rem; }
.project-facts div{ margin-bottom: 1.5rem; }
.project-facts span{ display:block; font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color: var(--color-slate); margin-bottom:.3rem; }
.project-video{ margin-top: 2rem; aspect-ratio:16/9; }
.project-video iframe{ width:100%; height:100%; }

.error-404__inner{ min-height: 60vh; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap: 1.25rem; }
.error-404__code{ font-family: var(--font-mono); color: var(--color-brass); font-size:1rem; }
.error-404__inner h1{ font-size: clamp(2rem,4.5vw,3rem); max-width: 16ch; }
.error-404__inner p{ color: var(--color-ivory-dim); max-width: 46ch; }

/* ==========================================================================
   Motion
   ========================================================================== */
[data-reveal]{ opacity:0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .rec-dot{ animation:none; }
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  .work-card, .btn, .work-card__media img{ transition:none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 960px){
  .site-header__nav{ position:fixed; inset: 64px 0 auto 0; background: var(--color-ink); border-bottom:1px solid var(--color-line);
    transform: translateY(-110%); transition: transform .3s var(--ease); padding: 1.5rem var(--gutter); }
  .site-header__nav.is-open{ transform: translateY(0); }
  .nav-menu{ flex-direction:column; gap: 1.1rem; }
  .site-header__cta .btn--ghost{ display:none; }
  .nav-toggle{ display:flex; }

  .studio__inner{ grid-template-columns: 1fr; }
  .work-grid, .work-grid--archive{ grid-template-columns: repeat(2,1fr); }
  .services-grid{ grid-template-columns: repeat(2,1fr); }
  .site-footer__top{ grid-template-columns: 1fr; }
  .project-content{ grid-template-columns: 1fr; }
  .post-list__item{ grid-template-columns: 1fr; }
}

@media (max-width: 620px){
  .work-grid, .work-grid--archive{ grid-template-columns: 1fr; }
  .services-grid{ grid-template-columns: 1fr; }
  .site-footer__grid{ grid-template-columns: 1fr; }
  .hero__inner{ padding-block: 4rem 5rem; }
}