/* Sycamore Films — design tokens: deep indigo ground with a magenta-rose
   accent (sampled from Two Rivers Media's palette, adapted for Sycamore),
   replacing the earlier amber palette that read too close to Room 627's
   own site. */
:root {
  --ink:          #0a0e29;
  --ink-2:        #141a3d;
  --ink-3:        #1c2454;
  --paper:        #eef0fb;
  --muted:        #8791c2;
  --muted-dim:    #5c6499;
  --accent:       #d6266f;
  --accent-bright:#ef5c95;
  --accent-deep:  #7a1442;
  --line:         rgba(238, 240, 251, 0.12);
  --line-accent:  rgba(214, 38, 111, 0.35);
  --warn:         #e0a23f;

  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --body:    "Source Serif 4", Georgia, "Times New Roman", serif;
  --label:   "Oswald", "Helvetica Neue", Arial, sans-serif;

  --gut:    clamp(1.25rem, 4.5vw, 3.5rem);
  --shell:  76rem;
  --measure: 38rem;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: clamp(1.0625rem, 0.3vw + 1rem, 1.1875rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding-left: var(--gut);
  padding-right: var(--gut);
}

.eyebrow {
  font-family: var(--label);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-bright);
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  margin: 0;
}

h2 span, h1 span.accent { color: var(--accent); font-weight: 800; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.measure { max-width: var(--measure); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--label);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85em 1.5em;
  border: 1px solid var(--line-accent);
  border-radius: 2px;
  color: var(--paper);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
}
.btn:hover { border-color: var(--accent); color: var(--accent-bright); }
.btn.btn-solid {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}
.btn.btn-solid:hover { background: var(--accent-bright); border-color: var(--accent-bright); color: var(--ink); }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(10, 14, 41, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; }
.brand img { height: 2.35rem; width: auto; }
.brand-word { font-family: var(--label); font-size: 0.95rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper); }

.nav { display: flex; gap: clamp(1.25rem, 3vw, 2.5rem); font-family: var(--label); font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; }
.nav a { text-decoration: none; color: var(--muted); transition: color 0.2s var(--ease); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--accent-bright); }

.nav-toggle { display: none; }

@media (max-width: 640px) {
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--ink-2); flex-direction: column; padding: 1.25rem var(--gut) 1.75rem; gap: 1rem; border-bottom: 1px solid var(--line); }
  .nav.open { display: flex; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; background: none; border: 1px solid var(--line-accent); border-radius: 2px;
    color: var(--paper); font-size: 1.1rem; cursor: pointer;
  }
}

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 3.5rem 0 2.5rem; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 2.5rem; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 2rem; } }
.footer-grid h4 { font-family: var(--label); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-bright); margin: 0 0 0.9rem; }
.footer-grid a { display: block; text-decoration: none; color: var(--muted); font-size: 0.95rem; margin-bottom: 0.55rem; transition: color 0.2s var(--ease); }
.footer-grid a:hover { color: var(--paper); }
.footer-brand img { width: auto; height: 2.6rem; margin-bottom: 1rem; }
.footer-brand p { color: var(--muted); font-size: 0.92rem; max-width: 26rem; }

.social-row { display: flex; gap: 0.75rem; margin-top: 1.1rem; }
.social-row a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border: 1px solid var(--line-accent); border-radius: 50%;
  color: var(--muted); transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.social-row a:hover { color: var(--accent-bright); border-color: var(--accent-bright); }
.social-row svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }

.crisis-note {
  margin-top: 3rem;
  padding: 1.5rem clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line-accent);
  border-radius: 4px;
  background: rgba(214, 38, 111, 0.06);
}
.crisis-note h4 { font-family: var(--label); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-bright); margin: 0 0 0.6rem; }
.crisis-note p { color: var(--muted); font-size: 0.9rem; margin-bottom: 0.4rem; }
.crisis-note p:last-child { margin-bottom: 0; }
.crisis-note a { color: var(--accent-bright); text-decoration: underline; text-underline-offset: 0.15em; }
.crisis-note strong { color: var(--paper); }

.legal { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; color: var(--muted-dim); font-size: 0.82rem; font-family: var(--label); letter-spacing: 0.04em; }
.legal a { color: var(--muted-dim); text-decoration: none; }
.legal a:hover { color: var(--accent-bright); }

/* ---------- hero ---------- */
.hero { padding: clamp(4rem, 12vw, 8rem) 0 clamp(3rem, 8vw, 5rem); text-align: center; }
.hero .mark { width: clamp(3.5rem, 8vw, 5rem); margin: 0 auto 1.75rem; }
.hero h1 { font-size: clamp(2.6rem, 7vw, 5rem); }
h1 .thin { font-weight: 400; color: var(--paper); }
h1 .bold { font-weight: 800; color: var(--accent); }
.hero h1 .thin, .hero h1 .bold { display: block; }
.page-hero h1 .thin { margin-right: 0.28em; }
.hero .tagline { font-family: var(--label); letter-spacing: 0.08em; color: var(--muted); font-size: clamp(0.95rem, 1.4vw, 1.15rem); margin: 1.1rem auto 0; max-width: 34rem; }
.hero .lede { margin: 2rem auto 0; max-width: 40rem; font-size: 1.15rem; color: var(--paper); }
.hero .lede strong { color: var(--accent-bright); font-weight: 600; }
.hero .cta-row { margin-top: 2.5rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ---------- hero video ---------- */
.hero-video {
  max-width: 62rem; margin: 2.75rem auto 0; border-radius: 4px;
  border: 1px solid var(--line-accent); position: relative;
}
/* Frame is cropped to 1920:818 (~2.35:1, Room 627's own shooting ratio).
   Vimeo's player fills whatever box it's given with no letterboxing, so
   sizing the iframe to the SOURCE clip's own native ratio (rather than the
   frame's ratio) and clipping the overflow is what actually crops the
   image instead of just adding black bars. The current hero clip
   ("Sycamore Films Promo1") is natively ~2.39:1 -- slightly WIDER than the
   2.35:1 frame -- so the iframe overscans horizontally and is centered
   left/right, cropping a sliver off each side rather than top/bottom. */
.hero-video .frame { position: relative; width: 100%; aspect-ratio: 1920 / 818; overflow: hidden; background: var(--ink-2); }
.hero-video iframe { position: absolute; top: 0; left: 50%; width: 101.75%; height: 100%; transform: translateX(-50%); border: 0; }

/* fallback link, used while the Vimeo clip's embed privacy is restricted */
.hero-video-link {
  max-width: 46rem; margin: 2.75rem auto 0; display: flex; align-items: center; gap: 1rem;
  padding: 1.5rem clamp(1.25rem, 4vw, 2rem); border-radius: 4px; border: 1px solid var(--line-accent);
  background: var(--ink-2); text-decoration: none; color: var(--paper); font-family: var(--label);
  font-size: 0.85rem; letter-spacing: 0.06em; transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.hero-video-link:hover { border-color: var(--accent); background: var(--ink-3); color: var(--accent-bright); }
.hero-video-link .play-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--accent); color: var(--paper);
  font-size: 0.9rem;
}

/* ---------- trailer embed (film detail pages) ---------- */
/* 16:9 is a fallback only -- Vimeo's own embed code gives each clip's exact
   native ratio via its padding-top percentage (e.g. 42.81% = 2.336:1), so
   each page overrides this with an inline `style="aspect-ratio: …"` sized
   to that specific trailer rather than forcing every clip into 16:9. */
.trailer-embed {
  margin-top: 1.75rem; border-radius: 4px; overflow: hidden;
  border: 1px solid var(--line-accent); position: relative; aspect-ratio: 16 / 9; background: var(--ink-2);
}
.trailer-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- section shell ---------- */
.section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.section-head { max-width: 40rem; margin: 0 auto 3rem; text-align: center; }
.section-head h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); margin-top: 0.5rem; }
.section-border-top { border-top: 1px solid var(--line); }

/* ---------- news strip ---------- */
.news-strip { padding: clamp(2.75rem, 6vw, 4rem) 0; }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (max-width: 760px) { .news-grid { grid-template-columns: 1fr; } }
.news-item { border-left: 2px solid var(--accent); padding-left: 1.1rem; }
.news-item .date { font-family: var(--label); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-bright); }
.news-item h3 { font-size: 1.15rem; margin: 0.4rem 0 0.4rem; line-height: 1.3; }
.news-item p { color: var(--muted); font-size: 0.92rem; }

/* ---------- featured production ---------- */
.featured { display: grid; grid-template-columns: minmax(0, 280px) 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 760px) { .featured { grid-template-columns: 1fr; } .featured .poster-frame { max-width: 260px; margin: 0 auto; } }
.poster-frame { position: relative; border: 1px solid var(--line-accent); }
.poster-frame img { width: 100%; }
.featured .status { display: inline-block; font-family: var(--label); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper); background: var(--accent); padding: 0.35em 0.8em; margin-bottom: 1.1rem; }
.featured h3 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 0.9rem; }
.featured .kicker { font-family: var(--label); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; }
.laurel-row { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; margin: 1.25rem 0 1.5rem; }
.laurel { font-family: var(--label); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--accent-bright); border: 1px solid var(--line-accent); padding: 0.4em 0.75em; border-radius: 2px; }
.featured .actions { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* ---------- filmography grid ---------- */
.film-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.film-card { display: flex; flex-direction: column; }
.film-card .poster-frame { aspect-ratio: 2 / 3; overflow: hidden; }
.film-card .poster-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.film-card:hover .poster-frame img { transform: scale(1.04); }
.film-card .kicker { font-family: var(--label); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-bright); margin: 1rem 0 0.3rem; }
.film-card h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.film-card p { color: var(--muted); font-size: 0.95rem; }
.film-card .status-line {
  font-family: var(--label); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-bright); margin: 0.5rem 0 0.7rem; display: flex; align-items: center; gap: 0.4em;
}
.film-card .status-line::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.film-card .links { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.85rem; }
.film-card .links a {
  font-family: var(--label); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line-accent); padding-bottom: 1px;
}
.film-card .links a:hover { color: var(--accent-bright); border-color: var(--accent-bright); }
.film-card .note { margin-top: 0.85rem; font-size: 0.85rem; color: var(--muted-dim); }
.film-card .note a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.film-card .btn { margin-top: 1rem; align-self: flex-start; }

/* ---------- back link (film detail pages) ---------- */
.back-link {
  display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--label);
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  color: var(--muted); margin-bottom: 1.5rem; transition: color 0.2s var(--ease);
}
.back-link:hover { color: var(--accent-bright); }

/* ---------- about teaser (home) ---------- */
.about-teaser { display: grid; grid-template-columns: minmax(0, 220px) 1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (max-width: 700px) { .about-teaser { grid-template-columns: 1fr; text-align: center; } .about-teaser .portrait { max-width: 180px; margin: 0 auto; } }
.portrait { border-radius: 3px; overflow: hidden; border: 1px solid var(--line-accent); }
.about-teaser blockquote { font-family: var(--display); font-style: italic; font-size: clamp(1.25rem, 2.6vw, 1.65rem); color: var(--paper); margin: 0 0 1.25rem; }
.about-teaser cite { display: block; font-style: normal; font-family: var(--label); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-bright); margin-bottom: 1.5rem; }

/* ---------- about page ---------- */
.about-hero { display: grid; grid-template-columns: minmax(0, 260px) 1fr; gap: clamp(2rem, 6vw, 4rem); align-items: center; padding: clamp(3rem, 8vw, 5rem) 0 clamp(2.5rem, 6vw, 4rem); }
@media (max-width: 760px) { .about-hero { grid-template-columns: 1fr; text-align: center; } .about-hero .portrait { max-width: 220px; margin: 0 auto; } }
.about-body { max-width: 42rem; margin: 0 auto; }
.about-body p { font-size: 1.08rem; }
.about-body p + p { margin-top: 1.35em; }
.signature { width: clamp(9rem, 18vw, 12rem); margin-top: 2.5rem; opacity: 0.92; }

/* ---------- pull quote (wave-divided color band) ---------- */
.pull-quote {
  text-align: center; padding: clamp(4rem, 10vw, 7rem) 0;
  background: var(--accent); color: var(--paper); position: relative;
}
.pull-quote::before, .pull-quote::after {
  content: ""; position: absolute; left: 0; right: 0; height: clamp(2.5rem, 8vw, 5.5rem);
  background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,55 C300,-15 900,115 1200,45 L1200,0 L0,0 Z'/%3E%3C/svg%3E") center/100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,55 C300,-15 900,115 1200,45 L1200,0 L0,0 Z'/%3E%3C/svg%3E") center/100% 100%;
}
.pull-quote::before { top: -1px; }
.pull-quote::after { bottom: -1px; transform: scaleY(-1); }
.pull-quote blockquote { font-family: var(--display); font-style: italic; font-size: clamp(1.6rem, 4vw, 2.5rem); max-width: 44rem; margin: 0 auto; color: var(--paper); line-height: 1.35; }
.pull-quote cite { display: block; font-style: normal; font-family: var(--label); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(238, 240, 251, 0.75); margin-top: 1.5rem; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
@media (max-width: 780px) { .contact-grid { grid-template-columns: 1fr; } }
.field { margin-bottom: 1.4rem; }
.field label { display: block; font-family: var(--label); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.5rem; }
.field input, .field textarea {
  width: 100%; background: var(--ink-2); border: 1px solid var(--line); border-radius: 2px;
  padding: 0.8em 0.9em; color: var(--paper); font-family: var(--body); font-size: 1rem;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field textarea { min-height: 9rem; resize: vertical; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field-error { margin: 0.5rem 0 0; color: var(--warn); font-size: 0.85rem; }
.field-checkbox { display: flex; align-items: flex-start; gap: 0.65rem; margin: 0 0 1.4rem; }
.field-checkbox input[type="checkbox"] { flex-shrink: 0; margin-top: 0.2rem; width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }
.field-checkbox label { font-family: var(--body); font-size: 0.92rem; color: var(--muted); line-height: 1.4; }
.form-note { margin-top: 1rem; font-size: 0.9rem; color: var(--muted); }
.form-thanks { margin-top: 1rem; font-family: var(--label); font-size: 0.85rem; letter-spacing: 0.04em; color: var(--accent-bright); }

/* ---------- subscribe ---------- */
.subscribe-card { max-width: 32rem; margin: 0 auto; text-align: center; }
.subscribe-card .subscribe-form { margin-top: 2rem; text-align: left; }
.subscribe-card .form-note, .subscribe-card .form-thanks { text-align: center; }

/* ---------- page hero (interior pages) ---------- */
.page-hero { padding: clamp(3.5rem, 9vw, 6rem) 0 clamp(2.5rem, 5vw, 3.5rem); text-align: center; }
.page-hero h1 { font-size: clamp(2.4rem, 6vw, 3.75rem); margin-top: 0.6rem; }
.page-hero .lede { max-width: 38rem; margin: 1.25rem auto 0; color: var(--muted); font-size: 1.05rem; }

/* ---------- team grid ----------
   Fixed 4 columns. The roster keeps growing person-by-person and
   won't always divide evenly (11 people doesn't) -- 4 columns keeps
   any trailing row nearly full (at most 1 empty slot) rather than a
   lone card by itself, which reads fine left-aligned with no special
   centering needed. Revisit only if a future headcount leaves a
   noticeably sparse last row (e.g. exactly 1 or 2 over a multiple of 4). */
.team-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.75rem, 3vw, 2.5rem); text-align: center;
}
@media (max-width: 700px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 440px) {
  .team-grid { grid-template-columns: 1fr; max-width: 16rem; margin: 0 auto; }
}
.team-card .avatar {
  width: clamp(7rem, 16vw, 10rem); aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden;
  margin: 0 auto 1.1rem; border: 1px solid var(--line-accent);
}
.team-card .avatar img { width: 100%; height: 100%; object-fit: cover; }
.team-card h3 { font-size: 1.08rem; margin-bottom: 0.3rem; }
.team-card .role {
  font-family: var(--label); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-bright);
}

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