@font-face {
  font-family: "Martian Mono";
  src: url("assets/fonts/martian-mono-extralight.ttf") format("truetype");
  font-style: normal;
  font-weight: 200;
  font-display: swap;
}

:root {
  --desktop-min-height: 600px;
  color-scheme: light;
  font-family: "Martian Mono", monospace;
  font-weight: 200;
  color: #111;
  background: #fff;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

*, *::before, *::after { box-sizing: border-box; }
body, h1, p, figure { margin: 0; }
a { color: inherit; text-decoration-thickness: .5px; text-underline-offset: .35em; }
a:hover { text-decoration-thickness: 1px; }
a:focus-visible, button:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; }
::selection { background: #ffed79; color: #111; }

.page {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: max(var(--desktop-min-height), 100svh);
  padding: 34px 35px;
}

.studio {
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
}

h1 { font: inherit; margin-bottom: .645em; }
address { font-style: normal; }
address a { display: table; }
.phone { text-decoration: none; }
.phone:hover { text-decoration: underline; }

/* Keep the film in normal flow: it always starts below the entire contact block. */
.work {
  /* Reserve space for the contact block, footer, padding and vertical gaps. */
  width: min(72vw, calc((max(var(--desktop-min-height), 100svh) - 240px) * 1.6006));
  margin: 25px auto 40px;
}
.showreel { position: relative; aspect-ratio: 1154 / 721; border-radius: 15px; overflow: hidden; background: #e8e8e8; }
.showreel picture, .showreel img { display: block; width: 100%; height: 100%; }
.showreel img { object-fit: cover; }
.showreel__video,
.showreel__gif {
  transform: scale(1.005);
}
/* The poster stays underneath both formats; reveal media only when ready. */
.showreel__video, .showreel__gif {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 220ms ease;
}
.showreel__video.is-ready, .showreel__gif.is-ready { opacity: 1; }

.social { margin-top: auto; font-size: 12px; line-height: 1.4; }
.playback {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 12px;
  border: 1px solid rgb(255 255 255 / .4);
  border-radius: 50%;
  background: rgb(0 0 0 / .55);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity 160ms ease;
}
.playback[hidden] { display: none; }
.playback svg { width: 16px; height: 16px; grid-area: 1 / 1; }
.playback .icon-play, .playback.is-paused .icon-pause { display: none; }
.playback.is-paused .icon-play { display: block; }
.showreel:hover .playback, .playback:focus-visible, .playback.is-paused { opacity: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (max-width: 700px) {
  .page {
    display: grid;
    height: 100svh;
    min-height: 520px;
    grid-template-rows: auto minmax(0, 1fr) auto;
    justify-items: stretch;
    align-items: center;
    gap: 16px;
    padding: clamp(20px, 5.9vw, 32px) 4.75vw max(24px, env(safe-area-inset-bottom));
  }
  .studio { position: static; }
  /* Reserve room for 14/12px text, gaps and padding before sizing the 4:5 film. */
  .work { width: min(100%, max(240px, calc((100svh - 210px) * .8))); min-width: 0; justify-self: center; margin: 0; }
  .showreel { aspect-ratio: 4 / 5; border-radius: 4.6vw; }
  .social { position: static; margin: 0; }
  .playback { right: 8px; bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .playback, .showreel__video, .showreel__gif { transition: none; }
}