:root {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --black: #090909;
  --white: #fff;
  --edge: clamp(1.25rem,2.6vw,2.75rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--black); color: var(--white); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.case-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 1rem var(--edge);
  background: var(--black);
  color: var(--white);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.case-nav a { position: relative; }
.case-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -.22rem;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 300ms ease;
}

.case-nav a:hover::after,
.case-nav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.case-nav a:focus-visible,
.case-footer a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

.case-header {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 1rem;
  min-height: 100svh;
  padding: 5.25rem var(--edge) var(--edge);
}

.case-name {
  margin: 0;
  font-size: clamp(1rem,1.7vw,1.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.film { display: grid; place-items: start center; min-width: 0; min-height: 0; padding: 0; }

.video-frame {
  position: relative;
  width: min(100%,calc(177.78svh - 18rem));
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #111;
  border: 1px solid rgba(255,255,255,.2);
}

.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.case-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  min-height: 30svh;
  padding: clamp(5rem,9vw,9rem) var(--edge) var(--edge);
  border-top: 1px solid rgba(255,255,255,.35);
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.case-footer p { margin: 0; }

@media (max-width:720px) {
  .case-nav { font-size: .7rem; }
  .case-header { min-height: auto; padding-top: 5rem; }
  .case-name { font-size: 1rem; }
  .video-frame { width: 100%; }
  .case-footer { align-items: flex-start; }
}

@media (max-width:440px) {
  .case-footer { flex-direction: column; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms!important; }
}