/* Layout: one full-width hero film, then an even grid of 16:9 tiles. Wordmark + one line above, footer below. */
:root {
  --bg: #f1f1ee;
  --fg: #161615;
  --muted: #74746e;
  --line: #d6d6d0;
  --tile: #e2e2dd;

  --font: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --step-0: 0.9375rem;
  --step-1: 1.125rem;
  --gap: clamp(16px, 2.2vw, 28px);
  --cols: 2;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f0f0e;
    --fg: #ecece7;
    --muted: #8e8e87;
    --line: #2a2a27;
    --tile: #1c1c1a;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 var(--step-0)/1.45 var(--font);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

.wrap { max-width: 1600px; margin: 0 auto; }

/* Header */
.top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding-block: clamp(20px, 4vw, 44px) clamp(20px, 3vw, 36px);
}
.mark { font-weight: 700; font-size: var(--step-1); letter-spacing: 0.04em; }
.line { color: var(--muted); margin: 0; }

/* Grid */
.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: calc(var(--gap) * 1.4) var(--gap);
}
@media (max-width: 760px) { :root { --cols: 1; } }

.tile { display: grid; gap: 10px; }
.frame {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  background: var(--tile);
  overflow: hidden;
}
.frame img,
.frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  color: transparent;
  /* --zi / --zv push letterbox bars out of the frame (set per film with "zoom") */
  transform: scale(var(--zi, 1));
  transition: transform 0.6s cubic-bezier(.2, .7, .2, 1);
}
.frame video { transform: scale(var(--zv, 1)); }
.frame .preview { opacity: 0; transition: opacity 0.25s ease, transform 0.6s cubic-bezier(.2, .7, .2, 1); }
.tile.is-playing .preview { opacity: 1; }
/* Hover / keyboard focus: the picture leans in slightly and the title lights up. */
@media (hover: hover) {
  .tile:hover .frame img { transform: scale(calc(var(--zi, 1) * 1.02)); }
  .tile:hover .frame video { transform: scale(calc(var(--zv, 1) * 1.02)); }
}
.tile:focus-visible { outline: none; }
.tile:focus-visible .frame { outline: 2px solid var(--fg); outline-offset: 3px; }
.tile:focus-visible .frame img { transform: scale(calc(var(--zi, 1) * 1.02)); }
.tile:focus-visible .frame video { transform: scale(calc(var(--zv, 1) * 1.02)); }
.cap { margin: 0; }
.cap .title { color: var(--muted); transition: color 0.2s ease; }
.tile:hover .cap .title, .tile:focus-visible .cap .title { color: var(--fg); }

/* Hero: the first film, full width, widescreen. */
.grid .hero { grid-column: 1 / -1; margin-bottom: calc(var(--gap) * 0.6); }
.hero .frame { aspect-ratio: 2.39 / 1; }
.hero .cap { font-size: var(--step-1); }
@media (max-width: 760px) { .hero .frame { aspect-ratio: 16 / 9; } }

/* Film page */
.film { display: grid; gap: 18px; padding-bottom: 24px; }
.player {
  position: relative;
  aspect-ratio: 16 / 9;
  width: min(100%, calc(76vh * 16 / 9));
  max-width: 100%;
  margin-inline: auto;
  background: #000;
}
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.film h1, .pager { width: min(100%, calc(76vh * 16 / 9)); margin-inline: auto; }
.film h1 { font-size: var(--step-1); font-weight: 500; margin: 0; text-wrap: balance; }
.film h1 .title { color: var(--muted); }
.pager { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); }
.pager a:hover { color: var(--fg); }

/* Footer */
.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: clamp(48px, 7vw, 96px);
  padding-block: 20px clamp(24px, 4vw, 40px);
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.foot a:hover { color: var(--fg); }
.foot .mark { font-size: inherit; color: var(--fg); margin-right: auto; }

.empty { color: var(--muted); padding-block: 40px; }

@media (prefers-reduced-motion: reduce) {
  .frame .preview, .frame img, .frame video { transition: none; }
}

/* Vimeo icon in the footer: official icon file (vimeo.svg), black version. */
.foot .vimeo { display: inline-flex; align-items: center; }
.foot .vimeo img { height: 1.05em; width: auto; display: block; opacity: 0.55; transition: opacity 0.2s ease; }
.foot .vimeo:hover img, .foot .vimeo:focus-visible img { opacity: 1; }
@media (prefers-color-scheme: dark) { .foot .vimeo img { filter: invert(1); } }

/* Note shown only to visitors who came through a personal link */
.privacy { color: var(--muted); font-size: 0.8rem; margin: -12px 0 28px; }

/* Little invader next to "Space Invaders" in the footer */
.foot .inv { display: inline-flex; align-items: center; gap: 0.45em; }
.foot .inv svg { width: 1.1em; height: auto; fill: currentColor; shape-rendering: crispEdges; }
.foot .inv:hover svg { animation: inv-step 0.5s steps(1) infinite; }
@keyframes inv-step { 50% { transform: translateX(2px); } }
@media (prefers-reduced-motion: reduce) { .foot .inv:hover svg { animation: none; } }