/* Eastward Film — site styles */
:root {
  --cream: #F3ECE1;
  --sand: #EDE4D6;
  --tan: #D9CCBA;
  --espresso: #2B2420;
  --espresso-2: #3A302A;
  --ink-soft: #4A3E35;
  --muted: #5A4A3E;
  --muted-2: #6E6258;
  --light-text: #E4D8C6;
  --light-muted: #C9BBA8;
  --sans: 'Jost', system-ui, sans-serif;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --bold: 'Archivo Black', 'Arial Black', sans-serif;
  --hand: 'Caveat', cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--espresso);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
}
a { color: var(--espresso); }
a:hover { color: var(--muted); }
img { max-width: 100%; display: block; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; margin: 0;
}
.wrap { max-width: 1320px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
section[id] { scroll-margin-top: 16px; }

/* ---------- shared type ---------- */
.eyebrow { font-weight: 500; font-size: 13px; letter-spacing: 6px; color: var(--muted-2); margin-bottom: 20px; }
.eyebrow--light { color: var(--light-muted); }
.serif-heading {
  margin: 0 0 24px; font-family: var(--serif); font-weight: 500;
  font-size: clamp(34px, 4vw, 52px); line-height: 1.15;
}
.serif-heading em { font-style: italic; }
.split-heading { margin: 0 0 20px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.split-heading .bold { font-family: var(--bold); font-size: clamp(32px, 4vw, 48px); letter-spacing: -1px; line-height: 1; }
.split-heading .italic { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(36px, 4.5vw, 56px); line-height: 1; }

.button {
  display: inline-block; text-decoration: none; padding: 16px 28px; min-height: 48px;
  font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: 3px;
  border: none; cursor: pointer;
}
.button--dark { background: var(--espresso); color: var(--cream); }
.button--dark:hover { background: var(--espresso-2); color: var(--cream); }
.button--light { background: var(--cream); color: var(--espresso); }
.button--light:hover { background: #fff; }

/* ---------- logo ---------- */
.logo { text-decoration: none; display: flex; align-items: baseline; gap: 8px; }
.logo-bold { font-family: var(--bold); font-size: 36px; letter-spacing: -0.5px; line-height: 1; }
.logo-italic { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 42px; line-height: 1; }
.logo--small .logo-bold { font-size: 22px; }
.logo--small .logo-italic { font-size: 26px; }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  background: var(--espresso-2); color: var(--cream);
}
.hero-video { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* Cover the screen with a 4:3 video */
.hero-video iframe {
  position: absolute; top: 50%; left: 50%; border: 0;
  width: 100vw; height: 75vw;
  min-height: 100vh; min-height: 100svh;
  min-width: 133.34vh; min-width: 133.34svh;
  transform: translate(-50%, -50%);
}
.hero-shade {
  position: absolute; top: 0; left: 0; right: 0; height: 180px;
  background: linear-gradient(rgba(43,36,32,0.55), rgba(43,36,32,0));
  pointer-events: none;
}
.site-header {
  position: relative; z-index: 2; max-width: 1440px; margin: 0 auto;
  padding: 28px clamp(24px, 4vw, 56px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
}
.site-header .logo, .site-header .logo:hover { color: var(--cream); }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; font-weight: 500; font-size: 13px; letter-spacing: 3px; }
.nav a { text-decoration: none; color: var(--cream); padding: 12px 0; }
.nav a:hover { opacity: 0.75; color: var(--cream); }
.nav .nav-cta { border: 1px solid var(--cream); padding: 11px 20px; }

@media (max-width: 600px) {
  .logo-bold { font-size: 28px; }
  .logo-italic { font-size: 32px; }
  .nav { gap: 4px 18px; font-size: 12px; letter-spacing: 2px; }
}

/* ---------- intro ---------- */
.intro { max-width: 960px; margin: 0 auto; padding: clamp(80px, 10vw, 140px) 24px; text-align: center; }
.intro .sunrise { display: block; margin: 0 auto 32px; color: var(--espresso); }
.intro .serif-heading { margin-bottom: 28px; }
.intro p { margin: 0 auto 18px; max-width: 62ch; color: var(--ink-soft); }

/* ---------- films ---------- */
.films { padding-bottom: clamp(80px, 10vw, 140px); }
.section-head { margin-bottom: 40px; }
.film-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px 32px; align-items: start; }
.film-player { position: relative; aspect-ratio: 16 / 9; background: var(--espresso); overflow: hidden; }
/* Wide (2.35:1) films sit letterboxed inside the same 16:9 frame so the grid lines up */
.film-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.film h3 { margin: 16px 0 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 30px; line-height: 1.1; }
.film p { margin: 8px 0 0; font-size: 15px; line-height: 1.45; color: var(--muted); }

/* ---------- strip ---------- */
.strip {
  position: relative; overflow: hidden; background: var(--espresso-2);
  height: 25vw; min-height: 200px; max-height: 380px;
}
/* Cover the strip with a ~2.13:1 video */
.strip iframe {
  position: absolute; top: 50%; left: 50%; border: 0; pointer-events: none;
  width: max(100%, 810px); aspect-ratio: 2.133 / 1;
  transform: translate(-50%, -50%);
}

/* ---------- approach ---------- */
.approach { background: var(--espresso); color: var(--cream); }
.approach-inner { max-width: 860px; margin: 0 auto; padding: clamp(80px, 10vw, 130px) 24px; text-align: center; }
.approach .eyebrow { margin-bottom: 28px; }
.approach-title { margin: 0 0 24px; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(40px, 5vw, 64px); line-height: 1.05; }
.approach p { margin: 0 auto 20px; max-width: 52ch; color: var(--light-text); font-size: 19px; }

/* ---------- about ---------- */
.about {
  padding-top: clamp(80px, 10vw, 140px); padding-bottom: clamp(80px, 10vw, 140px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 56px;
}
.about-photo { flex: 1 1 420px; max-width: 540px; margin: 0; position: relative; aspect-ratio: 100 / 138; color: var(--espresso); }
.about-photo-img { position: absolute; left: 0; right: 0; top: 8.7%; bottom: 18.84%; overflow: hidden; background: var(--tan); }
.about-photo-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 75%; }
.about-arrows { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.note { position: absolute; font-family: var(--hand); font-weight: 600; color: var(--espresso); }
.note--me { top: 0.5%; right: 2%; font-size: clamp(28px, 2.6vw, 36px); line-height: 1; transform: rotate(-4deg); }
.note--dom { top: 83%; left: 4%; width: 60%; text-align: center; transform: rotate(-2deg); }
.note-big { font-size: clamp(26px, 2.4vw, 32px); line-height: 1; }
.note-small { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.05; margin-top: 4px; }
.about-text { flex: 1 1 420px; min-width: 0; }
.about-text p { margin: 0 0 18px; color: var(--ink-soft); max-width: 56ch; }

/* ---------- quote ---------- */
.quote { background: var(--sand); }
.quote blockquote { max-width: 900px; margin: 0 auto; padding: clamp(80px, 10vw, 130px) 24px; text-align: center; }
.quote blockquote p { margin: 0 0 24px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.3; }
.quote blockquote footer { font-weight: 500; font-size: 13px; letter-spacing: 4px; color: var(--muted); }

/* ---------- experience ---------- */
.experience {
  padding-top: clamp(80px, 10vw, 140px); padding-bottom: clamp(80px, 10vw, 140px);
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px 56px;
}
.experience-text { flex: 1 1 520px; min-width: 0; }
.experience-text p { margin: 0 0 16px; color: var(--ink-soft); max-width: 56ch; }

/* ---------- inquire ---------- */
.inquire { background: var(--espresso); color: var(--cream); }
.inquire-inner { padding-top: clamp(80px, 10vw, 130px); padding-bottom: clamp(80px, 10vw, 130px); display: flex; flex-wrap: wrap; gap: 56px; }
.inquire-text { flex: 1 1 380px; min-width: 0; }
.inquire-title { margin: 0 0 20px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(40px, 5vw, 68px); line-height: 1.05; }
.inquire-text p { margin: 0 0 16px; color: var(--light-text); max-width: 44ch; }
.inquire-email { display: inline-block; margin-top: 8px; color: var(--cream); font-family: var(--serif); font-size: 26px; }
.inquire-email:hover { color: var(--light-text); }
.inquire-form { flex: 1 1 480px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.inquire-form label { display: flex; flex-direction: column; gap: 8px; font-size: 12px; letter-spacing: 3px; color: var(--light-text); }
.inquire-form .full { grid-column: 1 / -1; }
.inquire-form input, .inquire-form textarea {
  font: inherit; font-size: 16px; letter-spacing: 0; padding: 14px 0;
  background: transparent; border: none; border-bottom: 1px solid var(--light-muted);
  color: var(--cream); border-radius: 0;
}
.inquire-form input::placeholder { color: rgba(228,216,198,0.5); }
.inquire-form input:focus, .inquire-form textarea:focus { outline: none; border-bottom-color: var(--cream); }
.inquire-form textarea { resize: vertical; }
.inquire-form button { justify-self: start; }

/* ---------- footer ---------- */
.site-footer { padding-top: 48px; padding-bottom: 48px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 13px; letter-spacing: 2px; color: var(--ink-soft); }
.copyright { font-size: 12px; color: var(--muted-2); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}