/* ============================================================
   STUDIO.CSS — VM STUDIO creative division
   VM Branding House
   ============================================================
   Loaded only by pages that show VM Studio (index.html, studio.html).
   Uses the existing type scale, spacing and colour tokens from
   reset.css — no new fonts, no new dependencies.
   ============================================================ */

:root {
  /* Studio-only accents. The saturation comes from the artwork itself,
     so the surfaces stay quiet and let the films carry the colour. */
  --st-ink:    #0b0b0d;
  --st-ink-2:  #141418;
  --st-paper:  #f3efe9;
  --st-line:   rgba(255, 255, 255, 0.16);
  --st-dim:    rgba(243, 239, 233, 0.62);
  --st-flare:  #c8452f;   /* single editorial accent — used sparingly */
}

/* ── Shared shell ─────────────────────────────────────────── */
.studio {
  background: var(--st-ink);
  color: var(--st-paper);
  position: relative;
  overflow: hidden;
}

.studio-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-8);
}

/* Eyebrow: VM STUDIO */
.studio-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--t-xxs);
  font-weight: 700;
  letter-spacing: var(--ls-xl);
  text-transform: uppercase;
  color: var(--st-paper);
}

.studio-eyebrow::before {
  content: '';
  width: clamp(28px, 4vw, 56px);
  height: 1px;
  background: var(--st-flare);
}

/* The headline — the loudest type on the site, by design */
/* Set in the display serif rather than the heavy uppercase sans: this line
   is the studio's thesis, so it should read as a statement, not a shout.
   Sentence case and a lighter weight keep it elegant; the large size and
   generous line-height keep it completely legible. */
.studio-headline {
  font-family: var(--f-display);
  font-size: clamp(2.1rem, 5.6vw, 4.9rem);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.08;
  text-transform: none;
  margin: var(--sp-6) 0 var(--sp-6);
  max-width: 20ch;
}

.studio-lede {
  font-family: var(--f-editorial);
  font-size: var(--t-ed-md);
  font-weight: 300;
  line-height: var(--lh-snug);
  color: var(--st-dim);
  max-width: 54ch;
}

/* ============================================================
   HERO — full-bleed film
   ============================================================ */
.studio-hero {
  position: relative;
  min-height: clamp(560px, 86svh, 900px);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}

.studio-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.studio-hero-media video,
.studio-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Keeps type legible over any frame of the film */
.studio-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(11,11,13,0.55) 0%,
      rgba(11,11,13,0.18) 38%,
      rgba(11,11,13,0.82) 88%,
      rgba(11,11,13,0.96) 100%);
  pointer-events: none;
}

.studio-hero .studio-inner {
  width: 100%;
  padding-top: var(--sp-24);
  padding-bottom: var(--sp-16);
}

.studio-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-10);
}

/* Scroll cue */
.studio-scroll {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-12);
  font-size: var(--t-xxs);
  letter-spacing: var(--ls-xl);
  text-transform: uppercase;
  color: var(--st-dim);
}

.studio-scroll span::after {
  content: '';
  display: block;
  width: 1px;
  height: 46px;
  margin: var(--sp-3) auto 0;
  background: linear-gradient(180deg, var(--st-flare), transparent);
  animation: studio-cue 2.4s var(--ease-in-out) infinite;
  transform-origin: top;
}

@keyframes studio-cue {
  0%, 100% { transform: scaleY(0.25); opacity: 0.35; }
  50%      { transform: scaleY(1);    opacity: 1; }
}

/* ============================================================
   THE WORLDS — asymmetric editorial gallery
   Source films are square, so the rhythm comes from varying the
   frame each one is cropped into, not from distorting them.
   ============================================================ */
.worlds {
  padding: var(--sp-32) 0;
}

.worlds-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--st-line);
  margin-bottom: var(--sp-16);
}

.worlds-title {
  font-family: var(--f-heading);
  font-size: clamp(1.75rem, 4.4vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
}

.worlds-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-10) var(--sp-8);
}

.world {
  grid-column: span 4;
  position: relative;
  text-decoration: none;
  color: inherit;
  display: block;
}

/* Editorial rhythm — alternating emphasis across the 12-col grid */
.world--wide    { grid-column: span 8; }
.world--tall    { grid-column: span 4; }
.world--half    { grid-column: span 6; }
.world--full    { grid-column: span 12; }

.world-frame {
  position: relative;
  overflow: hidden;
  background: var(--st-ink-2);
  aspect-ratio: 1 / 1;
}

.world--wide .world-frame { aspect-ratio: 16 / 10; }
.world--full .world-frame { aspect-ratio: 21 / 9; }
.world--tall .world-frame { aspect-ratio: 3 / 4; }

.world-frame video,
.world-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.1s var(--ease-out), filter 0.8s var(--ease-out);
  filter: saturate(1.02);
}

.world:hover .world-frame video,
.world:hover .world-frame img {
  transform: scale(1.045);
  filter: saturate(1.14);
}

/* The index number sits over the frame like a plate caption */
.world-index {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  z-index: 2;
  font-size: var(--t-xxs);
  font-weight: 700;
  letter-spacing: var(--ls-lg);
  color: var(--st-paper);
  mix-blend-mode: difference;
}

.world-caption {
  padding-top: var(--sp-5, var(--sp-4));
}

.world-name {
  font-family: var(--f-heading);
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.15;
  margin: 0 0 var(--sp-2);
  position: relative;
  display: inline-block;
}

/* Hairline draws in under the title on hover */
.world-name::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 1px;
  background: var(--st-flare);
  transition: width var(--tr-slow);
}

.world:hover .world-name::after { width: 100%; }

.world-concept {
  font-family: var(--f-editorial);
  font-size: var(--t-ed-sm);
  font-weight: 300;
  line-height: var(--lh-snug);
  color: var(--st-dim);
  margin: 0;
  max-width: 46ch;
}

/* Honest labelling — these are conceptual explorations, not client work */
.world-tag {
  display: inline-block;
  margin-top: var(--sp-3);
  font-size: 0.62rem;
  letter-spacing: var(--ls-lg);
  text-transform: uppercase;
  color: rgba(243,239,233,0.42);
}

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto {
  padding: var(--sp-32) 0;
  border-top: 1px solid var(--st-line);
}

.manifesto-title {
  font-family: var(--f-heading);
  font-size: clamp(1.5rem, 3.6vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0 0 var(--sp-12);
  max-width: 22ch;
}

.manifesto-body p {
  font-family: var(--f-editorial);
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  font-weight: 300;
  line-height: 1.35;
  color: var(--st-paper);
  margin: 0 0 var(--sp-4);
  max-width: 30ch;
}

/* The two refusals set in the accent, the rest in paper */
.manifesto-body p.is-reject { color: var(--st-flare); }

.manifesto-body p.is-turn {
  margin-top: var(--sp-10);
  color: var(--st-dim);
  font-size: clamp(1rem, 1.7vw, 1.3rem);
  max-width: 44ch;
}

/* ============================================================
   WHAT WE CREATE
   ============================================================ */
.st-services {
  padding: var(--sp-32) 0;
  border-top: 1px solid var(--st-line);
}

.st-services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-12) var(--sp-16);
  margin-top: var(--sp-16);
}

.st-service {
  border-top: 1px solid var(--st-line);
  padding-top: var(--sp-6);
}

.st-service-num {
  display: block;
  font-size: var(--t-xxs);
  font-weight: 700;
  letter-spacing: var(--ls-lg);
  color: var(--st-flare);
  margin-bottom: var(--sp-4);
}

.st-service-name {
  font-family: var(--f-heading);
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 var(--sp-3);
}

.st-service-desc {
  font-family: var(--f-editorial);
  font-size: var(--t-ed-sm);
  font-weight: 300;
  line-height: var(--lh-snug);
  color: var(--st-dim);
  margin: 0;
}

/* ============================================================
   ABOUT + CLOSING CTA
   ============================================================ */
.st-about {
  padding: var(--sp-32) 0;
  border-top: 1px solid var(--st-line);
}

.st-about p {
  font-family: var(--f-editorial);
  font-size: var(--t-ed-md);
  font-weight: 300;
  line-height: var(--lh-snug);
  color: var(--st-paper);
  max-width: 62ch;
  margin: 0 0 var(--sp-6);
}

.st-cta {
  padding: var(--sp-32) 0;
  border-top: 1px solid var(--st-line);
  text-align: center;
}

.st-cta .studio-headline {
  margin-left: auto;
  margin-right: auto;
  max-width: 18ch;
}

.st-cta-line {
  font-family: var(--f-editorial);
  font-size: var(--t-ed-md);
  font-weight: 300;
  color: var(--st-dim);
  max-width: 44ch;
  margin: 0 auto var(--sp-10);
}

/* Buttons on the dark studio ground */
.btn-studio {
  background: var(--st-paper);
  color: var(--st-ink);
  border: 1px solid var(--st-paper);
}
.btn-studio:hover { background: transparent; color: var(--st-paper); }

.btn-studio-ghost {
  background: transparent;
  color: var(--st-paper);
  border: 1px solid var(--st-line);
}
.btn-studio-ghost:hover {
  border-color: var(--st-paper);
  background: rgba(243,239,233,0.06);
}

/* ============================================================
   HOMEPAGE BAND — the teaser that sits 3rd on the landing page
   ============================================================ */
.studio-band { padding: 0; }

.studio-band .studio-hero {
  min-height: clamp(520px, 72svh, 780px);
}

.studio-band-worlds {
  padding: var(--sp-20) 0 var(--sp-24);
}

.band-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
  margin-top: var(--sp-10);
}

.band-grid .world { grid-column: span 1; }
.band-grid .world-frame { aspect-ratio: 3 / 4; }

.studio-band-more {
  margin-top: var(--sp-12);
  display: flex;
  justify-content: center;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .worlds, .manifesto, .st-services, .st-about, .st-cta { padding: var(--sp-20) 0; }

  .worlds-grid { gap: var(--sp-8) var(--sp-6); }
  .world, .world--wide, .world--tall, .world--half { grid-column: span 6; }
  .world--full { grid-column: span 12; }
  .world--wide .world-frame,
  .world--full .world-frame { aspect-ratio: 4 / 3; }
  .world--tall .world-frame { aspect-ratio: 3 / 4; }

  .st-services-grid { grid-template-columns: 1fr; gap: var(--sp-10); }
  .band-grid { grid-template-columns: repeat(2, 1fr); }
  .studio-hero-ctas .btn { width: 100%; justify-content: center; }
}

@media (max-width: 500px) {
  .studio-inner { padding: 0 var(--sp-6); }
  .worlds-grid { gap: var(--sp-8) 0; }
  .world, .world--wide, .world--tall,
  .world--half, .world--full { grid-column: span 12; }
  .world-frame,
  .world--wide .world-frame,
  .world--full .world-frame { aspect-ratio: 1 / 1; }
  .band-grid { grid-template-columns: 1fr; }
  .manifesto-body p { max-width: 100%; }
}

/* ============================================================
   REDUCED MOTION — films hold on their poster frame
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .world-frame video,
  .world-frame img,
  .studio-hero-media video { transition: none !important; }

  .world:hover .world-frame video,
  .world:hover .world-frame img { transform: none; }

  .studio-scroll span::after { animation: none; opacity: 0.6; }
}